/* =====================================================================
   VetSoft — Feuille de style principale
   CSS3 vanilla, sans framework (contrainte du projet).

   ⚠️ Les valeurs (couleurs, espacements, tailles, ombres) vivent dans
      assets/css/tokens.css. Cette feuille-ci ne contient que des RÈGLES
      qui les consomment. Aucune couleur en dur ici.

   Sommaire :
     1. Réinitialisation et bases
     2. Typographie
     3. Mise en page (navigation, en-tête, contenu)
     4. Composants (boutons, cartes, tableaux, formulaires, étiquettes)
     5. Alertes
     6. Pagination
     7. Pages d authentification et d erreur
     8. Documents imprimables
     9. Vitrine publique (page d accueil des visiteurs non connectés)
     10. Responsive
   ===================================================================== */

@import url("tokens.css");

/* ---------------------------------------------------------------------
   Compatibilité : alias des anciens noms de variables
   Les vues des phases 0 à 6 utilisent ces noms. Plutôt que de réécrire
   3 000 lignes de gabarits d un coup (et risquer d en casser), on fait
   pointer les anciens noms vers les nouveaux jetons. À résorber en
   phase 9, une vue à la fois.
   --------------------------------------------------------------------- */

:root {
    --couleur-succes:          var(--succes);
    --couleur-succes-claire:   var(--succes-fond);
    --couleur-erreur:          var(--erreur);
    --couleur-erreur-claire:   var(--erreur-fond);
    --couleur-avertissement:   var(--avert);
    --couleur-avert-claire:    var(--avert-fond);
    --couleur-info:            var(--info);
    --couleur-info-claire:     var(--info-fond);

    --bordure-douce: var(--bordure);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--police);
    font-size: var(--taille-base);
    line-height: var(--interligne);
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Chiffres tabulaires : UNIQUEMENT là où des nombres s'empilent en colonne
   (tableaux, graduations d'axe, montants d'une liste). Sans cela, « 1 »
   plus étroit que « 8 » fait danser les totaux d'une ligne à l'autre.

   ⚠️ Surtout PAS en global : `tabular-nums` donne à chaque chiffre la
   largeur d'un « 0 », ce qui fait paraître lâche une grande valeur isolée
   comme un KPI. Les grands nombres gardent les chiffres proportionnels de
   la police (règle « proportional figures for big numbers » du skill
   dataviz — c'est lui qui m'a fait voir que je l'appliquais partout). */
.tableau,
.montant,
.graphique__axe {
    font-variant-numeric: tabular-nums;
}

/* Lien d'évitement : accessibilité au clavier. Visible seulement au focus. */
.lien-evitement {
    position: absolute;
    top: -100px;
    left: var(--espace-md);
    z-index: 200;
    padding: var(--espace-sm) var(--espace-md);
    background: var(--couleur-primaire);
    color: #fff;
    border-radius: var(--rayon-sm);
    text-decoration: none;
    transition: top 0.15s;
}

.lien-evitement:focus {
    top: var(--espace-md);
}

/* Indicateur de focus homogène et toujours visible */
:focus-visible {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Icônes SVG (sprite : views/partials/icones.php)
   --------------------------------------------------------------------- */

.icone {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    /* Le tracé suit la couleur du texte : une seule icône sert partout,
       sur fond clair comme sur fond sombre. */
    stroke-width: 1.75;
    vertical-align: -0.1875em;
}

.icone--petite { width: 0.9375rem; height: 0.9375rem; }
.icone--grande { width: 1.5rem;    height: 1.5rem; }

/* ---------------------------------------------------------------------
   2. Typographie
   --------------------------------------------------------------------- */

/* Les titres passent en Figtree : une grotesque géométrique un peu plus
   chaleureuse que le texte courant. C'est ce contraste titre/texte qui
   donne à une interface son air « dessiné » plutôt que « par défaut ». */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titre);
    line-height: var(--interligne-serre);
    font-weight: var(--graisse-demi);
    letter-spacing: var(--espacement-serre);
    color: var(--texte-fort);
}

h1 { font-size: var(--taille-xl); }
h2 { font-size: var(--taille-lg); }
h3 { font-size: var(--taille-md); }
h4 { font-size: var(--taille-base); }

a {
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: color var(--duree-rapide) var(--sortie);
}

a:hover {
    color: var(--couleur-primaire-sombre);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.texte-doux   { color: var(--texte-doux); }
.texte-petit  { font-size: var(--taille-sm); }
.texte-gras   { font-weight: var(--graisse-demi); }
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }

/* Chasse fixe : réservée aux références (CLI-0001, FAC-0017, n° de puce).
   `font-variant-ligatures: none` évite qu'une police de code ne fusionne
   des caractères dans un identifiant. */
.mono {
    font-family: var(--police-mono);
    font-size: 0.875em;
    font-variant-ligatures: none;
    letter-spacing: 0;
}

/* Les montants sont tabulaires : les colonnes de chiffres s'alignent. */
.montant {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: var(--graisse-demi);
}

/* Le sens n'est jamais porté par la couleur seule : ces classes
   accompagnent toujours un libellé (« Solde dû », « Payé »). */
.montant--du     { color: var(--erreur); }
.montant--regle  { color: var(--couleur-accent); }

/* ---------------------------------------------------------------------
   3. Mise en page
   --------------------------------------------------------------------- */

.application {
    display: flex;
    min-height: 100vh;
}

/* --- Navigation latérale --- */

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--largeur-navigation);
    display: flex;
    flex-direction: column;
    background: var(--gris-900);
    color: var(--gris-300);
    z-index: var(--plan-navigation);
    overflow-y: auto;
}

.navigation__marque {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    height: var(--hauteur-entete);
    padding: 0 var(--e-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    text-decoration: none;
}

.navigation__marque:hover { text-decoration: none; }

.navigation__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rayon-sm);
    background: var(--couleur-primaire);
    color: var(--sur-primaire);
}

.navigation__nom {
    font-family: var(--police-titre);
    font-weight: var(--graisse-grasse);
    font-size: var(--taille-lg);
    letter-spacing: var(--espacement-serre);
    color: #ffffff;
}

.navigation__corps {
    flex: 1;
    padding: var(--e-4) var(--e-3);
}

.navigation__groupe {
    margin-bottom: var(--e-5);
}

.navigation__titre-groupe {
    padding: 0 var(--e-3);
    margin-bottom: var(--e-2);
    font-size: var(--taille-xs);
    font-weight: var(--graisse-demi);
    text-transform: uppercase;
    letter-spacing: var(--espacement-large);
    /* gris-400 sur gris-900 : 6,96:1 — conforme même en petites capitales */
    color: var(--gris-400);
}

.navigation__liste {
    list-style: none;
}

.navigation__lien {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    /* 40 px de haut : confortable à la souris, conforme au toucher */
    min-height: 2.5rem;
    padding: var(--e-2) var(--e-3);
    margin-bottom: 1px;
    color: var(--gris-300);
    text-decoration: none;
    font-size: var(--taille-sm);
    font-weight: var(--graisse-moyenne);
    border-radius: var(--rayon-sm);
    transition: background var(--duree-rapide) var(--sortie),
                color var(--duree-rapide) var(--sortie);
}

.navigation__lien:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    text-decoration: none;
}

.navigation__lien:focus-visible {
    outline: none;
    box-shadow: var(--halo-focus);
}

/* L'entrée active est une pastille pleine plutôt qu'un liseré : plus
   lisible d'un coup d'œil, et l'état courant doit sauter aux yeux
   (règle `nav-state-active`). */
.navigation__lien--actif,
.navigation__lien--actif:hover {
    background: var(--couleur-primaire);
    color: #ffffff;
    font-weight: var(--graisse-demi);
}

/* Module pas encore livré : lisible mais visiblement non cliquable */
.navigation__lien--inactif {
    color: var(--gris-500);
    cursor: not-allowed;
}

.navigation__lien--inactif:hover {
    background: none;
    color: var(--gris-500);
}

.navigation__icone {
    flex-shrink: 0;
    opacity: 0.9;
}

.navigation__badge {
    margin-left: auto;
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--rayon-rond);
    background: rgba(255, 255, 255, 0.08);
    color: var(--gris-400);
}

.navigation__pied {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Carte de profil en pied de navigation */

.navigation__profil {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: var(--rayon-sm);
    text-decoration: none;
    transition: background 0.12s;
}

.navigation__profil:hover,
.navigation__profil--actif {
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.navigation__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--couleur-primaire);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.navigation__profil-texte {
    min-width: 0; /* Autorise l'ellipse sur un nom long */
    display: flex;
    flex-direction: column;
}

.navigation__profil-nom {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navigation__profil-role {
    font-size: 0.6875rem;
    color: var(--gris-500);
}

/* --- Zone principale --- */

.zone-principale {
    flex: 1;
    margin-left: var(--largeur-navigation);
    display: flex;
    flex-direction: column;
    min-width: 0; /* Sans cela, un tableau large déborderait de la page */
}

.entete {
    position: sticky;
    top: 0;
    z-index: var(--plan-entete);
    display: flex;
    align-items: center;
    gap: var(--e-4);
    height: var(--hauteur-entete);
    padding: 0 var(--e-6);
    background: rgba(255, 255, 255, 0.85);
    /* Flou de fond : le contenu qui défile dessous reste perceptible sans
       gêner la lecture de la barre. */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--bordure);
}

.entete__burger {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--texte);
    padding: var(--espace-xs);
}

.entete__date {
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.entete__droite {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--espace-md);
}

.entete__utilisateur {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
    padding: 0.25rem 0.5rem;
    border-radius: var(--rayon-sm);
    text-decoration: none;
    color: inherit;
}

.entete__utilisateur:hover {
    background: var(--gris-100);
    text-decoration: none;
}

.entete__nom {
    font-weight: 500;
    font-size: 0.875rem;
}

.entete__deconnexion {
    display: inline;
}

/* Le contenu occupe TOUTE la largeur disponible.
   Un `max-width` sans `margin: auto` laissait une bande vide à droite sur
   les écrans larges — le contenu était calé à gauche et le reste perdu. */
.contenu {
    flex: 1;
    width: 100%;
    padding: var(--espace-lg) var(--espace-xl);
}

.entete-page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espace-md);
    flex-wrap: wrap;
    margin-bottom: var(--espace-lg);
}

.entete-page__titre {
    font-size: var(--taille-xl);
}

.entete-page__soustitre {
    color: var(--texte-doux);
    font-size: var(--taille-sm);
    margin-top: var(--e-1);
}

.entete-page__actions {
    display: flex;
    gap: var(--espace-sm);
}

.pied {
    padding: var(--espace-md) var(--espace-lg);
    border-top: 1px solid var(--bordure);
    font-size: 0.8125rem;
    color: var(--texte-doux);
    text-align: center;
}

/* ---------------------------------------------------------------------
   4. Composants
   --------------------------------------------------------------------- */

/* --- Boutons --- */

/* Hauteur minimale 40 px sur bureau, portée à 44 px au toucher (voir la
   section responsive) — la règle « touch target ≥ 44 px » des deux skills. */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 2.5rem;
    padding: 0 var(--e-4);
    font-family: var(--police);
    font-size: var(--taille-sm);
    font-weight: var(--graisse-moyenne);
    line-height: 1.4;
    color: var(--sur-primaire);
    background: var(--couleur-primaire);
    border: 1px solid var(--couleur-primaire);
    border-radius: var(--rayon-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--ombre-xs);
    /* On n'anime que la couleur et l'ombre : jamais la géométrie, qui
       provoquerait un recalcul de mise en page à chaque survol. */
    transition: background var(--duree-rapide) var(--sortie),
                border-color var(--duree-rapide) var(--sortie),
                box-shadow var(--duree-rapide) var(--sortie);
}

.bouton:hover {
    background: var(--couleur-primaire-sombre);
    border-color: var(--couleur-primaire-sombre);
    box-shadow: var(--ombre-sm);
    color: var(--sur-primaire);
    text-decoration: none;
}

/* Retour d'appui : l'ombre disparaît, le bouton « s'enfonce » sans que
   sa boîte ne bouge. */
.bouton:active {
    box-shadow: none;
}

.bouton:focus-visible {
    outline: none;
    box-shadow: var(--halo-focus);
}

.bouton:disabled,
.bouton[aria-busy="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.bouton--secondaire {
    color: var(--texte);
    background: var(--fond-carte);
    border-color: var(--bordure-forte);
}

.bouton--secondaire:hover {
    background: var(--fond-survol);
    border-color: var(--texte-faible);
    color: var(--texte-fort);
}

.bouton--fantome {
    color: var(--texte-doux);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.bouton--fantome:hover {
    background: var(--fond-enfonce);
    border-color: transparent;
    color: var(--texte-fort);
    box-shadow: none;
}

/* Accent : réservé aux validations d'encaissement. Un seul CTA principal
   par écran (règle `primary-action` du skill) — ne pas multiplier. */
.bouton--accent {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
}

.bouton--accent:hover {
    background: var(--couleur-accent-sombre);
    border-color: var(--couleur-accent-sombre);
}

/* Destructif : couleur sémantique + séparation visuelle des actions
   normales (règle `destructive-emphasis`). */
.bouton--danger {
    background: var(--erreur);
    border-color: var(--erreur);
}

.bouton--danger:hover {
    background: var(--erreur-texte);
    border-color: var(--erreur-texte);
}

.bouton--petit {
    min-height: 2rem;
    padding: 0 var(--e-3);
    font-size: var(--taille-xs);
}

.bouton--grand {
    min-height: 2.75rem;
    padding: 0 var(--e-5);
    font-size: var(--taille-base);
}

/* Bouton pleine largeur (formulaire de connexion) */
.bouton--bloc {
    width: 100%;
}

/* --- Cartes --- */

.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
}

.carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--bordure);
}

.carte__titre {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--police-titre);
    font-size: var(--taille-base);
    font-weight: var(--graisse-demi);
    letter-spacing: var(--espacement-serre);
}

.carte__corps {
    padding: var(--espace-lg);
}

.carte__pied {
    padding: var(--espace-md) var(--espace-lg);
    border-top: 1px solid var(--bordure);
    background: var(--gris-50);
    border-radius: 0 0 var(--rayon) var(--rayon);
}

/* --- Grille --- */

.grille {
    display: grid;
    gap: var(--espace-lg);
}

.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- Indicateurs (KPI du tableau de bord) --- */

.kpi {
    display: block;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--espace-lg);
    box-shadow: var(--ombre);
}

.kpi__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
    border-radius: var(--rayon-sm);
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire-sombre);
}

.kpi__libelle {
    display: block;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    margin-bottom: var(--espace-xs);
}

.kpi__valeur {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--gris-900);
}

.kpi__detail {
    display: block;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    margin-top: var(--espace-xs);
}

.kpi--alerte  .kpi__valeur { color: var(--couleur-erreur); }

/* --- Tableaux --- */

/* Un tableau large doit défiler dans son conteneur, jamais faire défiler
   la page entière horizontalement. */
.tableau-conteneur {
    overflow-x: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    background: var(--fond-carte);
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--taille-sm);
}

.tableau th,
.tableau td {
    padding: var(--e-3) var(--e-4);
    text-align: left;
    border-bottom: 1px solid var(--bordure);
}

/* L'en-tête reste visible quand on parcourt un long tableau — le
   secrétariat lit des listes de 50 lignes, pas de 5. */
.tableau th {
    position: sticky;
    top: 0;
    z-index: var(--plan-flottant);
    background: var(--gris-50);
    font-weight: var(--graisse-demi);
    font-size: var(--taille-xs);
    text-transform: uppercase;
    letter-spacing: var(--espacement-large);
    color: var(--texte-doux);
    white-space: nowrap;
    /* border-bottom disparaît en position:sticky : on le refait en ombre */
    box-shadow: inset 0 -1px 0 var(--bordure);
}

.tableau tbody tr:last-child td {
    border-bottom: none;
}

.tableau tbody tr:hover {
    background: var(--gris-50);
}

.tableau__actions {
    display: flex;
    gap: var(--espace-xs);
    justify-content: flex-end;
}

/* État vide : plus accueillant qu'un tableau sans lignes */
.vide {
    padding: var(--espace-xl);
    text-align: center;
    color: var(--texte-doux);
}

.vide__icone {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.3;
    margin-bottom: var(--espace-sm);
    stroke-width: 1.5;
}

.vide p { margin-bottom: var(--espace-sm); }

.vide .bouton { margin-top: var(--espace-sm); }

/* --- Formulaires --- */

.champ {
    margin-bottom: var(--espace-md);
}

.champ__label {
    display: block;
    margin-bottom: var(--e-1);
    font-size: var(--taille-sm);
    font-weight: var(--graisse-moyenne);
    color: var(--texte);
}

.champ__requis {
    color: var(--erreur);
    margin-left: 2px;
}

/* 16 px : sous cette taille, Safari iOS zoome automatiquement à la mise
   au point du champ et casse la mise en page. Hauteur 40 px minimum,
   44 px au toucher (voir responsive). */
.champ__saisie,
.champ__selection,
.champ__zone {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--e-2) var(--e-3);
    font-family: var(--police);
    font-size: var(--taille-md);
    color: var(--texte);
    background: var(--fond-carte);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-sm);
    transition: border-color var(--duree-rapide) var(--sortie),
                box-shadow var(--duree-rapide) var(--sortie);
}

.champ__saisie::placeholder,
.champ__zone::placeholder {
    color: var(--texte-faible);
}

.champ__saisie:hover,
.champ__selection:hover,
.champ__zone:hover {
    border-color: var(--texte-faible);
}

.champ__saisie:focus,
.champ__selection:focus,
.champ__zone:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    box-shadow: var(--halo-focus);
}

/* Lecture seule ≠ désactivé : l'un se lit et se copie, l'autre est hors
   circuit (règle `read-only-distinction`). */
.champ__saisie:read-only:not([type="date"]):not([type="datetime-local"]) {
    background: var(--fond-enfonce);
    color: var(--texte-doux);
}

.champ__saisie:disabled,
.champ__selection:disabled,
.champ__zone:disabled {
    background: var(--fond-enfonce);
    color: var(--texte-faible);
    cursor: not-allowed;
    opacity: 0.7;
}

.champ__zone {
    min-height: 90px;
    resize: vertical;
}

.champ__saisie--erreur,
.champ__selection--erreur,
.champ__zone--erreur {
    border-color: var(--couleur-erreur);
}

.champ__erreur {
    display: block;
    margin-top: var(--espace-xs);
    font-size: 0.75rem;
    color: var(--couleur-erreur);
}

.champ__aide {
    display: block;
    margin-top: var(--espace-xs);
    font-size: 0.75rem;
    color: var(--texte-doux);
}

.champ__case {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
    cursor: pointer;
    font-size: 0.875rem;
}

.champ-groupe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--espace-md);
}

.formulaire__actions {
    display: flex;
    gap: var(--espace-sm);
    justify-content: flex-end;
    padding-top: var(--espace-md);
    border-top: 1px solid var(--bordure);
    margin-top: var(--espace-md);
}

/* --- Barre de filtres --- */

.barre-filtres {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
    flex-wrap: wrap;
    padding: 0.75rem;
    margin-bottom: var(--espace-md);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.barre-filtres__recherche {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 16rem;
}

.barre-filtres__loupe {
    position: absolute;
    left: 0.75rem;
    opacity: 0.45;
    pointer-events: none;
}

.barre-filtres__champ { width: auto; min-width: 11rem; }

.barre-filtres__case { white-space: nowrap; }

/* --- En-tête de fiche --- */

.fiche-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espace-md);
    flex-wrap: wrap;
    margin-bottom: var(--espace-lg);
}

.fiche-entete__identite {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fiche-entete__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: var(--rayon);
    background: var(--couleur-primaire-claire);
    font-size: 1.5rem;
}

.fiche-entete__titre {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
    flex-wrap: wrap;
    font-size: 1.375rem;
}

.fiche-entete__meta {
    font-size: 0.8125rem;
    color: var(--texte-doux);
    margin-top: 0.125rem;
}

/* --- Grilles de fiche et de formulaire --- */

/* Colonne principale large + colonne latérale fixe : la latérale ne doit
   pas s'étirer sur grand écran, sinon les libellés flottent loin des
   valeurs. */
.grille-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--espace-lg);
    align-items: start;
}

.grille-formulaire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--espace-md);
    align-items: start;
}

/* --- Liste de définitions (fiches) --- */

.donnees { display: flex; flex-direction: column; gap: 0.75rem; }

.donnees__ligne {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--espace-sm);
    align-items: baseline;
}

.donnees__ligne dt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--texte-doux);
}

.donnees__ligne dd {
    font-size: 0.875rem;
    min-width: 0;
    word-break: break-word;
}

/* --- Liste d'animaux (fiche client) --- */

.liste-animaux { list-style: none; }

.liste-animaux li + li { border-top: 1px solid var(--bordure); }

.carte-animal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem var(--espace-lg);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.carte-animal:hover { background: var(--gris-50); text-decoration: none; }

/* Un animal décédé reste consultable mais s'efface visuellement */
.carte-animal--decede { opacity: 0.55; }

.carte-animal__espece {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--rayon-sm);
    background: var(--gris-100);
    font-size: 1.25rem;
}

.carte-animal__corps { flex: 1; min-width: 0; }

.carte-animal__nom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gris-900);
}

.carte-animal__detail {
    display: block;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    margin-top: 0.125rem;
}

.carte-animal__code {
    font-size: 0.75rem;
    color: var(--gris-400);
    flex-shrink: 0;
}

/* --- Autocomplétion --- */

.champ-recherche { position: relative; }

.champ-recherche--masque { display: none; }

.client-choisi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-sm);
    padding: 0.5rem 0.625rem;
    background: var(--couleur-primaire-claire);
    border: 1px solid transparent;
    border-radius: var(--rayon-sm);
}

.client-choisi__nom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 16rem;
    overflow-y: auto;
    list-style: none;
    background: var(--fond-carte);
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre-md);
}

.suggestions__item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bordure);
}

.suggestions__item:last-child { border-bottom: none; }

.suggestions__item:hover,
.suggestions__item:focus {
    background: var(--couleur-primaire-claire);
    outline: none;
}

.suggestions__nom { font-size: 0.875rem; font-weight: 500; }

.suggestions__meta { font-size: 0.75rem; color: var(--texte-doux); }

.suggestions__vide {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    text-align: center;
}

/* --- Bandeau patient (formulaires médicaux) --- */

/* Rappel permanent de qui l'on soigne : on ne saisit pas un acte médical
   sans avoir le patient sous les yeux. */
.bandeau-patient {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem var(--espace-md);
    margin-bottom: var(--espace-md);
    background: var(--couleur-primaire-claire);
    border: 1px solid transparent;
    border-radius: var(--rayon);
}

.bandeau-patient__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--rayon-sm);
    background: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
}

.bandeau-patient__corps { flex: 1; min-width: 0; }

.bandeau-patient__nom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--couleur-primaire-sombre);
}

.bandeau-patient__detail {
    font-size: 0.8125rem;
    color: var(--couleur-primaire-sombre);
    opacity: 0.8;
}

/* --- Frise chronologique (dossier médical) --- */

.frise {
    list-style: none;
    padding: var(--espace-md) var(--espace-lg);
}

.frise__element {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: var(--espace-md);
}

/* Trait vertical reliant les consultations, sauf après la dernière */
.frise__element::before {
    content: '';
    position: absolute;
    left: 0.3125rem;
    top: 1rem;
    bottom: 0;
    width: 1px;
    background: var(--bordure);
}

.frise__element:last-child { padding-bottom: 0; }
.frise__element:last-child::before { display: none; }

.frise__marqueur {
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 50%;
    background: var(--fond-carte);
    border: 2px solid var(--couleur-primaire);
}

.frise__corps {
    display: block;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, background 0.12s;
}

.frise__corps:hover {
    text-decoration: none;
    border-color: var(--couleur-primaire);
    background: var(--gris-50);
}

.frise__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-sm);
}

.frise__date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--couleur-primaire-sombre);
}

.frise__veto { font-size: 0.75rem; color: var(--texte-doux); }

.frise__motif {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 0.125rem;
}

.frise__detail {
    display: block;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    margin-top: 0.125rem;
}

.frise__constantes {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.frise__constantes:empty { display: none; }

/* --- Blocs du compte rendu --- */

.bloc-medical { margin-bottom: var(--espace-md); }
.bloc-medical:last-child { margin-bottom: 0; }

.bloc-medical__titre {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-doux);
    margin-bottom: 0.25rem;
}

.bloc-medical__corps { font-size: 0.9375rem; }

/* Le traitement prescrit est l'information qu'on cherche en priorité */
.bloc-medical--fort {
    padding: 0.75rem;
    background: var(--couleur-primaire-claire);
    border-radius: var(--rayon-sm);
}

/* Valeur non modifiable affichée à la place d'un champ */
.champ__statique {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.barre-filtres__date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.barre-filtres__date .champ__saisie { width: auto; }

/* --- Agenda --- */

.agenda-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-md);
    flex-wrap: wrap;
    margin-bottom: var(--espace-md);
}

.agenda-nav {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
}

.agenda-periode {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-left: var(--espace-sm);
}

.agenda-outils {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
}

/* Bascule Jour / Semaine */
.agenda-bascule {
    display: inline-flex;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-sm);
    overflow: hidden;
}

.agenda-bascule__option {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--texte);
    text-decoration: none;
    background: var(--fond-carte);
}

.agenda-bascule__option:hover { background: var(--gris-50); text-decoration: none; }

.agenda-bascule__option--actif {
    background: var(--couleur-primaire);
    color: #fff;
}

/* Grille : colonne d'heures + colonnes de jours */
.agenda {
    display: flex;
    overflow-x: auto;
}

.agenda__heures {
    flex-shrink: 0;
    width: 3.5rem;
    border-right: 1px solid var(--bordure);
}

.agenda__heure {
    position: relative;
    font-size: 0.6875rem;
    color: var(--texte-doux);
    text-align: right;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

/* Le libellé d'heure chevauche la ligne, calé sur le trait */
.agenda__heure span {
    position: absolute;
    top: -0.5em;
    right: 0.5rem;
    background: var(--fond-carte);
    padding: 0 0.125rem;
}

.agenda__colonnes {
    display: flex;
    flex: 1;
}

.agenda__colonne {
    flex: 1;
    min-width: 8rem;
    border-right: 1px solid var(--bordure);
}

.agenda__colonne:last-child { border-right: none; }

.agenda__colonne--aujourdhui { background: rgba(15, 118, 110, 0.03); }

.agenda__jour-entete {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--bordure);
    padding: 0 0.5rem;
}

.agenda__jour-entete--vide { background: var(--fond-carte); }

.agenda__jour-lien {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: inherit;
}

.agenda__jour-lien:hover { text-decoration: none; }

.agenda__jour-nom {
    font-size: 0.75rem;
    text-transform: capitalize;
    color: var(--texte-doux);
}

.agenda__jour-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
}

.agenda__jour-num--actif { background: var(--couleur-primaire); color: #fff; }

/* Piste où sont posés les rendez-vous, positionnés en absolu */
.agenda__pistes {
    position: relative;
}

.agenda__ligne {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--gris-100);
}

.agenda__vide-jour {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    font-size: 0.8125rem;
    color: var(--gris-400);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s;
}

.agenda__colonne:hover .agenda__vide-jour { opacity: 1; }

/* Un rendez-vous */
.rdv {
    position: absolute;
    left: 2px;
    right: 2px;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    border-left: 3px solid;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
    text-decoration: none;
    box-sizing: border-box;
}

.rdv:hover {
    text-decoration: none;
    box-shadow: var(--ombre-md);
    z-index: 5;
}

.rdv__heure { font-weight: 600; margin-right: 0.25rem; }

.rdv__titre { font-weight: 500; }

.rdv__motif {
    display: block;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rdv--prevu {
    background: var(--couleur-info-claire);
    border-left-color: var(--couleur-info);
    color: var(--info-texte);
}

.rdv--honore {
    background: var(--couleur-succes-claire);
    border-left-color: var(--couleur-succes);
    color: var(--succes-texte);
}

/* Un RDV annulé reste visible mais barré : la trace compte */
.rdv--annule {
    background: var(--gris-100);
    border-left-color: var(--gris-400);
    color: var(--texte-doux);
}

.rdv--annule .rdv__titre { text-decoration: line-through; }

/* Légende */
.agenda-legende {
    display: flex;
    gap: var(--espace-lg);
    margin-top: var(--espace-md);
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.agenda-legende__item { display: inline-flex; align-items: center; gap: 0.375rem; }

.pastille {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    border-left: 3px solid;
}

.pastille--prevu  { background: var(--couleur-info-claire);   border-left-color: var(--couleur-info); }
.pastille--honore { background: var(--couleur-succes-claire); border-left-color: var(--couleur-succes); }
.pastille--annule { background: var(--gris-100);              border-left-color: var(--gris-400); }

/* ======================================================================
   TABLEAU DE BORD
   ======================================================================
   Organisé par USAGE, pas par type de donnée : la journée d'abord (c'est
   pour elle qu'on ouvre l'écran), les alertes ensuite, l'argent après.
   La version précédente alignait cinq tuiles identiques au-dessus d'une
   courbe de 370 px — aucune hiérarchie, et l'agenda sous la ligne de
   flottaison. */

.bord {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--e-4);
    align-items: start;
}

/* La colonne de droite s'empile SOUS la journée en dessous de 1100 px :
   l'agenda est ce qu'on doit voir en premier sur un écran étroit. */
@media (max-width: 1100px) {
    .bord { grid-template-columns: minmax(0, 1fr); }
}

.bord__cote {
    display: grid;
    gap: var(--e-4);
}

/* --- La journée : le bloc héros --- */

.journee {
    overflow: hidden;
}

.journee__resume {
    display: flex;
    align-items: baseline;
    gap: var(--e-4);
    padding: var(--e-5) var(--e-5) var(--e-4);
}

/* Le chiffre-héros. Le skill dataviz en autorise EXACTEMENT UN par vue :
   c'est lui. Chiffres proportionnels (pas `tabular-nums`) — à 52 px, la
   chasse fixe fait flotter les chiffres les uns par rapport aux autres. */
.journee__nombre {
    margin: 0;
    font-size: var(--taille-4xl);
    font-weight: var(--graisse-grasse);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--gris-900);
    font-variant-numeric: proportional-nums;
}

.journee__legende {
    margin: 0;
    font-size: var(--taille-md);
    color: var(--texte);
}

.journee__detail {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

/* --- L'agenda --- */

.journee__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bordure);
    max-height: 24rem;
    overflow-y: auto;
}

.journee__rdv {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    border-bottom: 1px solid var(--bordure-douce);
}

.journee__rdv:last-child { border-bottom: none; }

.journee__heure {
    font-size: var(--taille-sm);
    font-weight: var(--graisse-demi);
    color: var(--texte-doux);
    /* Chiffres tabulaires ICI : les heures s'empilent en colonne et doivent
       s'aligner. C'est le cas d'usage prévu, contrairement au chiffre-héros. */
    font-variant-numeric: tabular-nums;
}

.journee__objet { min-width: 0; }

.journee__patient {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.journee__motif {
    display: block;
    font-size: var(--taille-sm);
    color: var(--texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journee__etat { justify-self: end; }

/* Un rendez-vous honoré est du passé : il recule, sans disparaître. */
.journee__rdv--honore { background: var(--fond); }
.journee__rdv--honore .journee__patient,
.journee__rdv--honore .journee__heure { opacity: 0.6; }

/* Le prochain rendez-vous est LA ligne qui compte. Le liseré porte le
   repère, le bouton « Prochain » porte le mot : jamais la couleur seule. */
.journee__rdv--prochain {
    background: var(--couleur-primaire-claire);
    box-shadow: inset 3px 0 0 var(--couleur-primaire);
}

.journee__rdv--prochain .journee__heure { color: var(--couleur-primaire-sombre); }

/* --- À traiter --- */

.traiter {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bordure);
}

.traiter__ligne {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    border-bottom: 1px solid var(--bordure-douce);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.traiter li:last-child .traiter__ligne { border-bottom: none; }

.traiter__ligne:hover {
    text-decoration: none;
    background: var(--fond);
}

.traiter__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rayon-sm);
}

/* Jetons directs (--erreur, --avert…) et non les alias de compatibilité :
   ces derniers sont une dette à résorber, on ne l'alimente pas. */
.traiter__ligne--erreur .traiter__icone {
    background: var(--erreur-fond);
    color: var(--erreur);
}

.traiter__ligne--avertissement .traiter__icone {
    background: var(--avert-fond);
    color: var(--avert-texte);
}

.traiter__texte { min-width: 0; }

.traiter__libelle {
    display: block;
    font-size: var(--taille-base);
    font-weight: var(--graisse-moyenne);
    color: var(--texte);
}

.traiter__detail {
    display: block;
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

/* Le chevron de l'icône « retour » pivoté : il pointe vers l'action. */
.traiter__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--gris-400);
    transform: rotate(180deg);
}

/* --- Tuile d'indicateur (valeur + tendance + écart) --- */

.tuile {
    display: block;
    padding: var(--e-5);
    text-decoration: none;
    color: inherit;
}

.tuile--lien {
    transition: border-color 0.12s, box-shadow 0.12s;
}

.tuile--lien:hover {
    text-decoration: none;
    border-color: var(--couleur-primaire);
    box-shadow: var(--ombre-md);
}

.tuile__libelle {
    display: block;
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

.tuile__valeur {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--taille-2xl);
    font-weight: var(--graisse-grasse);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gris-900);
    font-variant-numeric: proportional-nums;
}

.tuile__pied {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-2);
    font-size: var(--taille-sm);
}

/* L'écart. Le triangle et le signe portent le sens ; la couleur ne fait que
   le renforcer. Un daltonien lit « ▲ +12 % » sans la couleur. */
.delta {
    font-weight: var(--graisse-demi);
    font-variant-numeric: tabular-nums;
}

.delta--hausse { color: var(--couleur-accent); }
.delta--baisse { color: var(--couleur-erreur); }

/* --- Sparkline --------------------------------------------------------
   La tendance d'une tuile, pas un graphique : ni axe, ni grille, ni
   libellé. On y lit « ça monte », pas une valeur. */

.sparkline {
    position: relative;
    margin: var(--e-3) 0 var(--e-1);
    height: 2.5rem;
}

.sparkline__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sparkline__aire {
    fill: var(--graphique-aire);
    stroke: none;
}

.sparkline__ligne {
    fill: none;
    stroke: var(--graphique-serie);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* En HTML et non dans le SVG : le viewBox est étiré en largeur et
   déformerait un <circle> en ellipse (D-39). */
.sparkline__point {
    position: absolute;
    box-sizing: content-box;
    width: 0.3125rem;
    height: 0.3125rem;
    transform: translate(-50%, -50%);
    background: var(--graphique-serie);
    border: 2px solid var(--fond-carte);
    border-radius: 50%;
    pointer-events: none;
}

/* --- Pastille d'état d'un patient (phase 16) ---------------------------
   Le code couleur demandé par le cabinet : vert vivant, rouge décédé,
   noir vendu/cédé. Le MOT accompagne toujours la couleur (D-33) — la
   pastille seule ne porte jamais le sens. */

.pastille-statut {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--taille-xs);
    font-weight: var(--graisse-demi);
    white-space: nowrap;
}

.pastille-statut::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.pastille-statut--vivant { color: var(--succes); }
.pastille-statut--decede { color: var(--erreur); }
.pastille-statut--cede   { color: var(--gris-900); }

/* État calme : « rien à signaler » ne doit pas crier comme une alerte. */
.vide--calme {
    padding: var(--e-6) var(--e-5);
}

.vide--calme .vide__icone { color: var(--couleur-accent); }

/* --- Graphique --------------------------------------------------------
   SVG calculé côté serveur, sans bibliothèque. Les règles viennent du
   skill dataviz : trait fin, lavis d'aire, grille récessive.
   La donnée est la seule chose qui a le droit d'être forte. */

.graphique {
    position: relative;
}

/* Boîte de tracé : le référentiel des surcouches HTML. Elle a exactement les
   proportions du viewBox, l'axe est en dehors. Un `top: 40%` posé sur la
   figure entière se résoudrait contre le SVG + la ligne d'axe, et décalerait
   le marqueur sous le trait. */
.graphique__cadre {
    position: relative;
    height: 11rem;
}

.graphique__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Filet plein de 1 px, une graduation au-dessus de la surface. Jamais de
   pointillés : ils attirent l'œil autant que la donnée. */
.graphique__grille {
    stroke: var(--graphique-grille);
    stroke-width: 1;
    fill: none;
}

.graphique__aire {
    fill: var(--graphique-aire);
    stroke: none;
}

/* 2 px, jointures rondes — la spec du skill. `non-scaling-stroke` empêche
   le trait de s'épaissir quand le SVG s'étire en largeur. */
.graphique__ligne {
    fill: none;
    stroke: var(--graphique-serie);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Marqueur du dernier point : 8 px de diamètre (le plancher du skill), cerné
   de 2 px de la couleur de surface pour rester lisible là où il croise le
   trait. `content-box` : la bordure s'AJOUTE aux 8 px au lieu de les manger.
   En HTML et non dans le SVG — voir le commentaire de la vue : le viewBox est
   étiré en largeur et déformerait un <circle> en ellipse. */
.graphique__point-fin {
    position: absolute;
    box-sizing: content-box;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(-50%, -50%);
    background: var(--graphique-serie);
    border: 2px solid var(--fond-carte);
    border-radius: 50%;
    pointer-events: none;
}

/* Bandes de survol : invisibles, plus larges que le point — viser un
   marqueur de 8 px à la souris est impossible. */
.graphique__zone {
    fill: transparent;
    cursor: crosshair;
}

.graphique__zone:hover {
    fill: var(--couleur-primaire);
    fill-opacity: 0.05;
}

/* Libellé sélectif (maximum, dernier point). Encre de TEXTE, jamais la
   couleur de série : c'est la marque à côté qui porte l'identité. */
.graphique__etiquette {
    position: absolute;
    transform: translate(-50%, -140%);
    padding: 0.0625rem 0.375rem;
    background: var(--fond-carte);
    border-radius: var(--rayon-sm);
    font-size: var(--taille-xs);
    font-weight: var(--graisse-demi);
    color: var(--texte);
    white-space: nowrap;
    pointer-events: none;
}

.graphique__bulle {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: var(--plan-flottant);
    padding: var(--e-2) var(--e-3);
    background: var(--gris-900);
    color: #ffffff;
    border-radius: var(--rayon-sm);
    font-size: var(--taille-xs);
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--ombre-md);
}

.graphique__bulle-date {
    display: block;
    color: var(--gris-400);
}

.graphique__bulle-valeur {
    display: block;
    font-weight: var(--graisse-demi);
}

.graphique__axe {
    display: flex;
    justify-content: space-between;
    margin-top: var(--e-2);
    font-size: var(--taille-xs);
    color: var(--texte-doux);
}

.graphique__details {
    border-top: 1px solid var(--bordure);
}

.graphique__details summary {
    padding: var(--e-3) var(--e-5);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
    cursor: pointer;
}

.graphique__details summary:hover { color: var(--texte); }

/* --- Facturation --- */

/* Suffixe d'unité (Ar) accolé à un champ numérique */
.champ__enveloppe:has(.champ__suffixe) .champ__saisie { padding-right: 2.5rem; }

.champ__suffixe {
    position: absolute;
    right: 0.75rem;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    pointer-events: none;
}

.champ__selection--petite { font-size: 0.8125rem; padding: 0.375rem 0.5rem; }

/* Table de lignes de facture : les cellules de saisie ne doivent pas
   s'écraser les unes les autres sur un écran étroit. */
.tableau-facture th,
.tableau-facture td { vertical-align: middle; }

.ligne-facture__designation {
    min-width: 14rem;
}

.ligne-facture__designation select,
.ligne-facture__designation input {
    width: 100%;
}

.ligne-facture__recherche {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
}

/* Un <select> ou <input> masqué par la bascule de type ne doit occuper
   aucune place dans la cellule. */
.ligne-facture [hidden] { display: none !important; }

.facture-totaux {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espace-xl);
    flex-wrap: wrap;
    padding-top: var(--espace-md);
    border-top: 1px solid var(--bordure);
}

.recap-facture {
    min-width: 16rem;
    margin-left: auto;
}

.recap-facture__ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--espace-md);
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.recap-facture__ligne dt { color: var(--texte-doux); }
.recap-facture__ligne dd { font-variant-numeric: tabular-nums; }

.recap-facture__ligne--total {
    margin-top: 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--bordure);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* --- Divers --- */

.lien-fort { font-weight: 600; color: var(--gris-900); }
.lien-fort:hover { color: var(--couleur-primaire); }

.ligne-icone {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Conserve les retours à la ligne d'un champ texte libre */
.texte-pre { white-space: pre-wrap; font-size: 0.875rem; }

.tableau__ligne--attenuee { opacity: 0.55; }

.carte--danger { border-color: var(--erreur-bord); }

/* --- Étiquettes --- */

.etiquette {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--gris-100);
    color: var(--gris-600);
    white-space: nowrap;
}

.etiquette--primaire      { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-sombre); }
.etiquette--admin         { background: var(--couleur-info-claire);     color: var(--couleur-info); }
.etiquette--veterinaire   { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-sombre); }
.etiquette--secretaire    { background: var(--gris-200);                color: var(--gris-700); }

.etiquette--succes        { background: var(--couleur-succes-claire);   color: var(--couleur-succes); }
.etiquette--erreur        { background: var(--couleur-erreur-claire);   color: var(--couleur-erreur); }
.etiquette--avertissement { background: var(--couleur-avert-claire);    color: var(--couleur-avertissement); }
.etiquette--info          { background: var(--couleur-info-claire);     color: var(--couleur-info); }

/* ---------------------------------------------------------------------
   5. Alertes
   --------------------------------------------------------------------- */

.alertes {
    margin-bottom: var(--espace-lg);
    display: flex;
    flex-direction: column;
    gap: var(--espace-sm);
}

.alerte {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--rayon);
    border: 1px solid;
    font-size: var(--taille-sm);
}

/* L icône garde sa place quel que soit le nombre de lignes du message */
.alerte__icone {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alerte__texte { flex: 1; }

.alerte__fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--rayon-sm);
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--duree-rapide) var(--sortie);
}

.alerte__fermer:hover { opacity: 1; }

.alerte__fermer:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px currentColor;
}

.alerte--succes {
    background: var(--couleur-succes-claire);
    border-color: var(--succes-bord);
    color: var(--succes-texte);
}

.alerte--erreur {
    background: var(--couleur-erreur-claire);
    border-color: var(--erreur-bord);
    color: var(--erreur-texte);
}

.alerte--avertissement {
    background: var(--couleur-avert-claire);
    border-color: var(--avert-bord);
    color: var(--avert-texte);
}

.alerte--info {
    background: var(--couleur-info-claire);
    border-color: var(--info-bord);
    color: var(--info-texte);
}

/* ---------------------------------------------------------------------
   6. Pagination
   --------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-md);
    margin-top: var(--espace-md);
    flex-wrap: wrap;
}

.pagination__info {
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.pagination__liens {
    display: flex;
    gap: var(--espace-xs);
    list-style: none;
}

.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--espace-sm);
    font-size: 0.8125rem;
    color: var(--texte);
    background: var(--fond-carte);
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-sm);
    text-decoration: none;
}

.pagination__lien:hover {
    background: var(--gris-50);
    text-decoration: none;
}

.pagination__lien--actif {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
    font-weight: 600;
}

.pagination__lien--desactive {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   7. Pages d'authentification et d'erreur
   --------------------------------------------------------------------- */

/* --- Page de connexion : deux panneaux --- */

.corps-auth {
    background: var(--fond-carte);
}

.auth {
    display: grid;
    /* Le panneau de marque est fixe, le formulaire prend le reste :
       la colonne de saisie ne s'étire pas indéfiniment sur grand écran. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* Panneau gauche : identité du produit */

.auth__marque {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--espace-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--gris-900) 0%, var(--couleur-primaire-sombre) 55%, var(--couleur-primaire) 100%);
    color: #fff;
}

/* Motif de fond : deux halos diffus, en CSS pur (aucune image à charger) */
.auth__marque-fond {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(45, 212, 191, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(15, 118, 110, 0.45) 0%, transparent 50%);
    pointer-events: none;
}

/* Rangée principale du panneau : le texte (largeur fixe) à gauche, la
   photo à droite qui absorbe tout le reste — et toute la hauteur
   disponible du panneau, pas seulement celle du texte. */
.auth__marque-rangee {
    position: relative;
    display: flex;
    align-items: stretch;
    /* Centre le bloc texte quand il est seul (pas de photo à côté, faute de
       fichier) : sans ça, un enfant de largeur fixe reste collé à gauche et
       laisse tout le reste du panneau vide. Sans effet quand la photo est
       là : elle occupe déjà tout l'espace restant (flex: 1). */
    justify-content: center;
    gap: var(--e-6);
    flex: 1 1 auto;
    min-height: 0;
}

.auth__marque-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 17rem;
    width: 17rem;
}

/* Sans photo à côté (fichier absent), le texte a tout le panneau pour lui :
   autant lui laisser un peu plus de largeur qu'une colonne pensée pour
   cohabiter avec une image. */
.auth__marque-texte:only-child {
    flex-basis: 26rem;
    width: 26rem;
    max-width: 100%;
}

.auth__marque-titre {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-top: var(--espace-lg);
}

.auth__marque-accroche {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.375);
    /* Suit soit le titre de repli (espacement serré, var(--espace-xs)
       suffit), soit la carte du logo — plus haute, elle veut un peu plus
       d'air en dessous. */
    margin-top: var(--e-4);
}

/* Photo d'accueil : centrée quel que soit l'alignement du reste du
   panneau (celui-ci est aligné à gauche) — c'est elle qui doit accrocher
   l'œil en premier, au milieu du panneau de marque. */
.auth__atouts {
    list-style: none;
    margin-top: var(--espace-xl);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.auth__atouts li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.auth__atout-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--rayon-sm);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Logo */

.auth__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: var(--rayon-xl);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    /* Le SVG hérite de currentColor : c'est ce qui permet à la même icône
       de servir sur le panneau sombre et sur la carte claire. */
    color: #ffffff;
}

/* Variante affichée dans le panneau du formulaire, sur mobile uniquement */
.auth__logo--compact {
    display: none;
    background: var(--couleur-primaire-claire);
    border-color: transparent;
    color: var(--couleur-primaire);
    margin-bottom: var(--e-4);
}

/* Carte du logo téléversé : le fichier a son propre fond clair (voir
   Paramètres) — sur le dégradé sombre du panneau, il flotterait sans cadre
   sans cette carte. Bien plus grande que l'ancien badge carré : c'est
   l'élément qui porte la marque du cabinet, il doit se lire de loin. */
.auth__logo-carte {
    display: inline-block;
    width: 100%;
    max-width: 17rem;
    padding: var(--e-4);
    background: #fff;
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-lg);
}

.auth__logo-image {
    display: block;
    width: 100%;
    height: auto;
}

.auth__logo-carte--compact {
    display: none;
    max-width: 12rem;
    margin-bottom: var(--e-5);
}

/* --- Photo, pleine hauteur du panneau --- */

/* Le montage est un portrait (bien plus haut que large) : une bande
   verticale qui va du haut au bas du panneau lui va naturellement mieux
   qu'une vignette carrée. C'est elle qui comble l'espace resté vide à
   côté du texte. */
.auth__marque-photo {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--rayon-lg);
    overflow: hidden;
    box-shadow: var(--ombre-lg);
}

.auth__marque-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Panneau droit : formulaire */

/* Photo en fond, adoucie d'un voile blanc translucide : assez présente
   pour ne plus laisser le panneau nu, assez discrète pour que le
   formulaire — posé dessus sans carte propre — reste lisible. Vérifié sur
   les zones les plus sombres de la photo (blouse bleu marine) : même là,
   0,75 blanchi remonte le fond à ~185/255, largement assez clair pour le
   texte foncé du formulaire (contraste mesuré > 7:1). */
.auth__panneau {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--espace-xl) var(--espace-lg);
    background-color: var(--fond-carte);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.375), rgba(255, 255, 255, 0.375)),
        url('../img/login.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auth__boite {
    width: 100%;
    max-width: 22rem;
    margin: auto 0;
}

/* Le voile blanc sur la photo de fond (0,375 — abaissé à la demande du
   client) laisse passer les zones sombres de l'image (blouse, cheveux) :
   sans ce halo, le texte qui tombe dessus devient illisible. Portée assez
   large pour tenir sur n'importe quelle zone de la photo, pas seulement
   les plus claires. */
.auth__retour,
.auth__titre,
.auth__soustitre,
.auth__aide,
.auth__pied,
.auth__panneau .champ__label {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.75);
}

.auth__retour {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-6);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
    text-decoration: none;
}

.auth__retour .icone { width: 0.875rem; height: 0.875rem; }

.auth__retour:hover {
    color: var(--couleur-primaire);
}

.auth__entete {
    margin-bottom: var(--espace-lg);
}

.auth__titre {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.auth__soustitre {
    font-size: 0.875rem;
    color: var(--texte-doux);
    margin-top: var(--espace-xs);
}

.auth__formulaire .champ {
    margin-bottom: var(--espace-md);
}

.auth__aide {
    margin-top: var(--espace-lg);
    font-size: 0.75rem;
    color: var(--texte-doux);
    text-align: center;
}

.auth__pied {
    margin-top: var(--espace-xl);
    font-size: 0.75rem;
    color: var(--gris-400);
    text-align: center;
}

/* --- Champ avec icône et action --- */

.champ__enveloppe {
    position: relative;
    display: flex;
    align-items: center;
}

.champ__icone {
    position: absolute;
    left: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.5;
    pointer-events: none; /* Le clic doit atteindre le champ, pas l'icône */
}

.champ__saisie--avec-icone  { padding-left: 2.25rem; }
.champ__saisie--avec-action { padding-right: 2.75rem; }

.champ__action {
    position: absolute;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32 px : le minimum confortable dans un champ de 40 px. Le champ
       lui-même reste la cible principale. */
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--rayon-sm);
    cursor: pointer;
    color: var(--texte-faible);
    transition: color var(--duree-rapide) var(--sortie),
                background var(--duree-rapide) var(--sortie);
}

.champ__action:hover {
    color: var(--texte);
    background: var(--fond-enfonce);
}

.champ__action:focus-visible {
    outline: none;
    color: var(--couleur-primaire);
    box-shadow: var(--halo-focus);
}

.champ__action[aria-pressed="true"] { color: var(--couleur-primaire); }

/* --- Page d'erreur --- */

.corps-erreur {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--espace-lg);
    background: var(--fond);
}

.erreur {
    max-width: 640px;
    width: 100%;
    text-align: center;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--espace-xl);
    box-shadow: var(--ombre);
}

.erreur__icone {
    width: 3rem;
    height: 3rem;
    color: var(--texte-faible);
}

.erreur__code {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-doux);
    margin-top: var(--espace-sm);
}

.erreur__titre { margin: var(--espace-xs) 0 var(--espace-sm); }

.erreur__message { color: var(--texte-doux); }

.erreur__actions {
    display: flex;
    gap: var(--espace-sm);
    justify-content: center;
    margin-top: var(--espace-lg);
    flex-wrap: wrap;
}

.erreur__debogage {
    margin-top: var(--espace-xl);
    padding-top: var(--espace-lg);
    border-top: 1px solid var(--bordure);
    text-align: left;
}

.erreur__debogage-titre {
    display: flex;
    align-items: center;
    gap: var(--espace-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: var(--espace-sm);
}

.erreur__exception {
    font-size: 0.875rem;
    color: var(--couleur-erreur);
    margin-bottom: var(--espace-xs);
}

.erreur__fichier {
    font-family: var(--police-mono);
    font-size: 0.75rem;
    color: var(--texte-doux);
    margin-bottom: var(--espace-sm);
    word-break: break-all;
}

.erreur__trace {
    font-family: var(--police-mono);
    font-size: 0.6875rem;
    line-height: 1.5;
    background: var(--gris-900);
    color: var(--gris-300);
    padding: var(--espace-md);
    border-radius: var(--rayon-sm);
    overflow-x: auto;
    max-height: 320px;
}

/* ---------------------------------------------------------------------
   8. Documents imprimables (comptes rendus, factures)
   --------------------------------------------------------------------- */

.corps-impression {
    background: var(--gris-200);
    padding: var(--espace-lg) var(--espace-md);
}

.barre-impression {
    display: flex;
    justify-content: center;
    gap: var(--espace-sm);
    margin-bottom: var(--espace-lg);
}

/* Aperçu à l'écran d'une feuille A4 (210 mm de large) */
.page-a4 {
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 18mm 16mm;
    background: #fff;
    box-shadow: var(--ombre-md);
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
}

.doc__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espace-lg);
    padding-bottom: var(--espace-md);
    border-bottom: 2px solid var(--couleur-primaire);
}

.doc__cabinet {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--couleur-primaire-sombre);
}

.doc__coordonnees {
    font-size: 0.75rem;
    color: var(--gris-600);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.doc__type { text-align: right; }

.doc__titre {
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.doc__date { font-size: 0.8125rem; color: var(--gris-600); }

.doc__parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-lg);
    margin: var(--espace-lg) 0;
}

.doc__partie-titre {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris-500);
    margin-bottom: 0.25rem;
}

.doc__partie-corps { font-size: 0.875rem; line-height: 1.5; }

.doc__alerte {
    padding: 0.5rem 0.75rem;
    margin-bottom: var(--espace-md);
    border: 1px solid #000;
    border-left-width: 4px;
    font-size: 0.875rem;
}

.doc__bloc { margin-bottom: var(--espace-md); }

.doc__bloc-titre {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--couleur-primaire-sombre);
    padding-bottom: 0.125rem;
    margin-bottom: 0.375rem;
    border-bottom: 1px solid var(--gris-300);
}

.doc__texte { font-size: 0.9375rem; }

.doc__bloc--encadre {
    padding: 0.75rem;
    border: 1px solid var(--gris-400);
    border-radius: 2px;
}

.doc__tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.doc__tableau th,
.doc__tableau td {
    padding: 0.375rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--gris-300);
}

.doc__tableau th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris-600);
    border-bottom-width: 2px;
}

.doc__pied { margin-top: var(--espace-xl); }

.doc__signature { max-width: 16rem; margin-left: auto; text-align: left; }

.doc__cadre-signature {
    height: 3.5rem;
    margin-top: 0.375rem;
    border-bottom: 1px solid var(--gris-400);
}

.doc__mention {
    margin-top: var(--espace-lg);
    padding-top: var(--espace-sm);
    border-top: 1px solid var(--gris-300);
    font-size: 0.6875rem;
    color: var(--gris-500);
    text-align: center;
}

/* ---------------------------------------------------------------------
   Règles d'impression
   --------------------------------------------------------------------- */

@page {
    size: A4;
    margin: 12mm;
}

@media print {
    /* Tout ce qui ne fait pas partie du document disparaît */
    .sans-impression { display: none !important; }

    .corps-impression { background: #fff; padding: 0; }

    .page-a4 {
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Un bloc ne doit pas être coupé entre deux pages */
    .doc__bloc,
    .doc__parties,
    .doc__signature {
        page-break-inside: avoid;
    }
}

@media print {
    .navigation,
    .entete,
    .pied,
    .entete-page__actions,
    .alertes,
    .pagination,
    .bouton,
    .lien-evitement {
        display: none !important;
    }

    .zone-principale { margin-left: 0; }

    .contenu { padding: 0; max-width: none; }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .carte,
    .tableau-conteneur {
        border: none;
        box-shadow: none;
    }

    /* Évite qu'une ligne de facture soit coupée entre deux pages */
    .tableau tr { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   9. Vitrine publique (page d'accueil des visiteurs non connectés)
   --------------------------------------------------------------------- */

.corps-vitrine {
    background: var(--fond-carte);
}

.vitrine__conteneur {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--espace-lg);
}

/* --- En-tête --- */

.vitrine__entete {
    position: sticky;
    top: 0;
    z-index: var(--plan-entete);
    background: var(--fond-carte);
    border-bottom: 1px solid var(--bordure);
}

.vitrine__entete-ligne {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    min-height: var(--hauteur-entete);
    padding: var(--e-2) 0;
}

.vitrine__marque {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    color: var(--texte-fort);
    text-decoration: none;
}

/* Logo affiché en entier (pas de recadrage) : c'est la seule marque du
   header depuis que le nom du cabinet, en toutes lettres dans l'image,
   n'est plus répété en texte à côté. Il a besoin d'assez de hauteur pour
   rester lisible — nettement plus que l'ancien badge carré. */
/* Le fond du logo est presque blanc, comme l'en-tête : sans bordure, il se
   fond dans la barre et devient difficile à repérer. Le contour fin le
   détache nettement, et la hauteur augmentée (3,5 → 4,5 rem) le rend
   lisible au premier coup d'œil plutôt que deviné. */
.vitrine__logo-img {
    display: block;
    height: 7rem;
    width: auto;
    flex-shrink: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-sm);
}

/* Repli si aucun logo n'a été téléversé : icône générique + nom écrit. */
.vitrine__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire);
    flex-shrink: 0;
}

.vitrine__nom {
    font-family: var(--police-titre);
    font-weight: var(--graisse-demi);
    font-size: var(--taille-md);
}

.vitrine__nav {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    margin-left: var(--e-4);
}

.vitrine__nav a {
    color: var(--texte-doux);
    font-family: var(--police-titre);
    font-size: var(--taille-base);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
}

.vitrine__nav a:hover {
    color: var(--texte-fort);
}

.vitrine__actions {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-left: auto;
}

/* Lien d'inscription volontairement inerte pour l'instant : pas de
   formulaire derrière (voir le commentaire dans le layout). Le curseur et
   l'opacité l'annoncent sans le rendre invisible. */
.vitrine__actions [aria-disabled="true"] {
    cursor: default;
    opacity: 0.85;
}

/* --- Hero --- */

/* Image composée (assets/img/section_hero.png) : elle porte déjà son
   propre message et ses propres repères visuels, affichée telle quelle,
   pleine largeur. Les vrais boutons d'action vivent EN DESSOUS, sur fond
   normal : ceux dessinés dans l'image ne mènent nulle part. */
.vitrine__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Au format natif (3:2), l'image dépasse 900 px de haut sur un écran large
   — elle écrase le reste de la page. Sous 640 px la largeur est déjà
   modeste et la hauteur native reste raisonnable (le problème n'existe
   pas) : le recadrage ne s'applique qu'à partir de là. */
@media (min-width: 641px) {
    .vitrine__hero-image {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: center top;
    }
}

/* Repli texte : seulement si le fichier ci-dessus est absent. */
.vitrine__hero-fond {
    display: flex;
    justify-content: center;
    background: linear-gradient(160deg, var(--gris-900) 0%, var(--couleur-primaire-sombre) 60%, var(--couleur-primaire) 100%);
    color: #fff;
}

.vitrine__hero-contenu {
    padding: var(--e-16) var(--espace-lg);
    text-align: center;
    max-width: 44rem;
}

.vitrine__eyebrow {
    font-size: var(--taille-sm);
    font-weight: var(--graisse-demi);
    color: rgba(255, 255, 255, 0.375);
    text-transform: uppercase;
    letter-spacing: var(--espacement-large);
}

.vitrine__hero-titre {
    margin-top: var(--e-3);
    font-size: var(--taille-3xl);
    font-weight: 700;
    letter-spacing: var(--espacement-serre);
    color: #fff;
}

.vitrine__hero-accroche {
    margin-top: var(--e-4);
    font-size: var(--taille-md);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--interligne-large);
}

.vitrine__hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--e-3);
    padding: var(--e-8) var(--espace-lg);
}

/* --- Sections génériques --- */

.vitrine__services,
.vitrine__cta {
    padding: var(--e-16) 0;
}

.vitrine__cta {
    background: var(--fond);
    text-align: center;
}

.vitrine__cta-contenu {
    max-width: 36rem;
}

.vitrine__cta-contenu p {
    margin-top: var(--e-3);
    color: var(--texte-doux);
}

.vitrine__cta-contenu .bouton {
    margin-top: var(--e-6);
}

.vitrine__section-titre {
    font-size: var(--taille-xl);
    text-align: center;
}

/* --- Grille de services --- */

.vitrine__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--e-6);
    margin-top: var(--e-8);
}

.vitrine__service {
    padding: var(--e-6);
    text-align: center;
}

.vitrine__service-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--rayon-lg);
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire);
}

.vitrine__service h3 {
    margin-top: var(--e-4);
    font-size: var(--taille-base);
}

.vitrine__service p {
    margin-top: var(--e-2);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

/* --- Pied de page --- */

.vitrine__pied {
    border-top: 1px solid var(--bordure);
    background: var(--fond);
}

.vitrine__pied-ligne {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e-2);
    padding: var(--e-6) var(--espace-lg);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

/* ---------------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .navigation {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .navigation--ouverte {
        transform: translateX(0);
        box-shadow: var(--ombre-md);
    }

    .zone-principale { margin-left: 0; }

    .entete__burger { display: block; }

    /* Voile d'arrière-plan quand le menu est ouvert sur mobile */
    .voile {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 45;
    }
}

/* Sous 900 px, le panneau de marque passerait sous le formulaire et
   repousserait la saisie hors de l'écran : on le retire et on remonte le
   logo compact dans le panneau du formulaire. */
@media (max-width: 900px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__marque { display: none; }

    .auth__logo--compact { display: inline-flex; }
    .auth__logo-carte--compact { display: inline-block; }

    .auth__panneau {
        justify-content: flex-start;
        padding-top: var(--espace-xl);
    }
}

/* La colonne latérale des fiches passe sous le contenu principal */
@media (max-width: 1100px) {
    .grille-fiche { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .contenu { padding: var(--espace-md); }

    .entete__date,
    .entete__nom,
    .entete__deconnexion-texte {
        display: none;
    }

    .barre-filtres__recherche { min-width: 100%; }
    .barre-filtres__champ     { width: 100%; }

    .donnees__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }

    .fiche-entete { flex-direction: column; align-items: stretch; }
    .fiche-entete__actions .bouton { flex: 1; }

    .entete-page {
        flex-direction: column;
        align-items: stretch;
    }

    .formulaire__actions {
        flex-direction: column-reverse;
    }

    .formulaire__actions .bouton { width: 100%; }

    /* La vitrine perd son fil de navigation ancré sur mobile : l'espace
       manque à côté des deux boutons d'action, qui restent la priorité. */
    .vitrine__nav { display: none; }

    /* Le logo affiché en entier (sans recadrage) prend plus de largeur que
       l'ancien badge carré : à côté des deux boutons de droite, il ne tient
       plus sur une seule ligne sous 640 px. On la fait passer sous le logo
       plutôt que de laisser déborder la page horizontalement. */
    .vitrine__entete-ligne {
        flex-wrap: wrap;
        row-gap: var(--e-2);
    }

    .vitrine__logo-img { height: 4.5rem; }

    .vitrine__actions {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .vitrine__hero-titre { font-size: var(--taille-2xl); }

    .vitrine__hero-actions .bouton,
    .vitrine__cta-contenu .bouton { width: 100%; }
}

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}