/* LeLogo, feuille de style unique.

   Refondue le 19 septembre 2026. Le parti pris vient des maisons de joaillerie
   (Van Cleef, Cartier, Chaumet, Boucheron) et de deux applications de travail
   (Stripe, Linear), mesurees puis triees : ce qui fait la tenue d'un site de
   luxe se transpose, sa lenteur et son vide ne se transposent pas.

   Les quatre regles qui expliquent tout ce qui suit :

   1. Une seule echelle d'espacement, de 4 a 80 px. Rien en dehors.
   2. Deux rayons : la feuille est coupee droit (0), l'objet que l'on presse
      est adouci (2 px). La pastille d'etat seule est ronde.
   3. Aucune ombre portee, sauf sur une surface qui flotte reellement.
   4. La couleur n'est jamais seule a porter une information, et le metal ne
      sert qu'a l'ornement : a 3,68 pour 1 il n'a pas le droit d'ecrire.

   Ecran regarde huit heures par jour : tout le texte courant tient au-dessus
   de 4,5 pour 1, toute bordure de commande au-dessus de 3 pour 1. */

/* --------------------------------------------------------------------------
   Les deux polices du logiciel, posees a cote de cette feuille.

   Elles ne sortent jamais de l'ordinateur : aucun appel a Internet, ni au
   demarrage ni plus tard. C'est ce qui permet au meme ecran de se presenter
   a l'identique sur le Mac du cabinet et sur un PC, ce que les polices du
   systeme ne garantissent pas : SF Pro et Segoe UI n'ont ni la meme hauteur
   d'x, ni la meme chasse.

   Inter porte tout le texte de travail. Son fichier est variable : un seul
   fichier couvre les graisses 400, 500 et 600, d'ou la plage declaree.
   EB Garamond ne sert qu'aux titres et aux noms de patients.

   Les deux sont sous SIL Open Font License 1.1 ; le texte de la licence est
   dans polices/LICENCES.txt, qui doit accompagner les fichiers.

   Chaque police vient en deux morceaux : le latin courant, et le latin
   etendu pour les noms a caracteres rares, frequents a Bruxelles. Le
   navigateur ne charge le second que s'il en rencontre un.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Inter LeLogo";
    src: url("polices/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter LeLogo";
    src: url("polices/inter-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Garamond LeLogo";
    src: url("polices/garamond-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Garamond LeLogo";
    src: url("polices/garamond-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Surfaces */
    --fond: #f6f4f1;
    --carte: #ffffff;
    --surface-appuyee: #efece7;
    --surface-survol: #f2efea;
    --surface-choisie: #f3ede3;
    --surface-encre: #1b1a18;

    /* Encres */
    --encre: #1b1a18;
    --encre-moyenne: #4a4640;
    --encre-douce: #6e6860;
    --encre-inactive: #9b948a;

    /* Filets */
    --trait: #e4dfd8;
    --filet-fort: #c9c2b8;
    --filet-champ: #8f8577;

    /* Metal : ornement, jamais information */
    --metal: #a47f48;
    --metal-texte: #7a5c2e;
    --metal-clair: #d9c6a3;
    --metal-voile: #f3eadb;

    /* Etats */
    --vert: #1b6b4a;
    --vert-clair: #e9f1ec;
    --vert-filet: #c4dacd;
    --ambre: #8a5a10;
    --ambre-clair: #faf0dc;
    --ambre-filet: #e6d2a8;
    --rouge: #97241c;
    --rouge-clair: #f9ebe9;
    --rouge-filet: #ebc8c3;

    /* Information : un lien dans du texte suivi, et rien d'autre */
    --accent: #25506e;
    --accent-clair: #eaf0f5;

    /* Espacement : la liste complete, aucune valeur en dehors */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px;
    --e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px; --e10: 64px;

    /* Angles */
    --rayon: 0;
    --rayon-commande: 2px;
    --rayon-rond: 999px;

    /* Polices. Les piles de secours ne servent que si un fichier manquait.
       Georgia y figure pour les titres et jamais pour les chiffres : ses
       chiffres sont elzeviriens, ils montent et descendent autour de la ligne,
       et une colonne de montants en Georgia est visuellement bancale. */
    --police: "Inter LeLogo", -apple-system, BlinkMacSystemFont,
              "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
    --police-titre: "Garamond LeLogo", Georgia, Palatino, "Palatino Linotype",
                    "Times New Roman", serif;
    --police-chiffres: ui-monospace, SFMono-Regular, "SF Mono", Consolas, Menlo, monospace;

    /* Mouvement. Rien au-dela de 200 ms : au-dela, l'oeil enregistre le
       mouvement comme un objet, et non comme la suite de son geste. */
    --instant: 90ms;
    --etat: 140ms;
    --entree: 180ms;
    --courbe: cubic-bezier(0.4, 0, 0.2, 1);
    --courbe-sortie: cubic-bezier(0.215, 0.61, 0.355, 1);

    --ombre-flottante: 0 2px 5px rgba(27, 26, 24, .08),
                       0 1px 1px rgba(27, 26, 24, .10);
}

* { box-sizing: border-box; }

/* La place de l'ascenseur est reservee en permanence. Sans cela, une page qui
   defile rend 15 px de moins que les autres, et l'en-tete bascule sur deux
   lignes d'un ecran a l'autre sans qu'on comprenne pourquoi. */
html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.1px;
    color: var(--encre);
    background: var(--fond);
    font-variant-numeric: tabular-nums;
    /* "tnum" : chiffres de meme largeur, pour que les colonnes de montants
       s'alignent. "case" : ponctuation relevee dans les petites capitales
       espacees des titres de section. */
    font-feature-settings: "tnum" 1, "case" 1;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* L'en-tete est colle en haut : toute cible d'ancre garde sa place dessous. */
[id] { scroll-margin-top: 90px; }

/* Le focus se voit toujours, et il ne s'anime jamais. Le decalage de 2 px
   empeche l'anneau de se confondre avec la bordure du champ. */
:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------ bandeau d'apercu */
/* Une seule bande, au-dessus de tout, sur le fond sombre du logiciel : elle
   dit ce que le visiteur regarde sans lui prendre un centimetre utile. */
.bandeau-apercu {
    background: var(--surface-encre);
    color: #fff;
    padding: var(--e3) var(--e7);
    font-size: 13px;
    line-height: 20px;
    border-bottom: 2px solid var(--metal);
}

.bandeau-apercu strong {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 11px;
    color: var(--metal-clair);
    margin-right: var(--e2);
}

@media (max-width: 640px) {
    .bandeau-apercu { padding: var(--e3) var(--e4); }
}

/* ---------------------------------------------------------------- en-tete */
.entete {
    background: var(--carte);
    border-bottom: 1px solid var(--trait);
    padding: 0 var(--e7);
    display: flex;
    align-items: center;
    gap: var(--e6);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.marque {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.2px;
    padding: var(--e4) 0;
    white-space: nowrap;
}

.menu { display: flex; gap: 0; flex-wrap: wrap; flex: 1; }

.menu a {
    padding: var(--e5) var(--e3);
    text-decoration: none;
    color: var(--encre-douce);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--instant) var(--courbe),
                border-color var(--etat) var(--courbe-sortie);
}

.menu a:hover { color: var(--encre); }

/* Un seul trait de metal dans toute la page, et c'est celui-la. */
.menu a.actif { color: var(--encre); border-bottom-color: var(--metal); }

.identite {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-size: 13px;
    color: var(--encre-douce);
}

/* ------------------------------------------------------------------ corps */
main { max-width: 1280px; margin: 0 auto; padding: var(--e6) var(--e7) var(--e10); }

h1 {
    font-family: var(--police-titre);
    font-size: 26px;
    line-height: 32px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin: 0 0 var(--e1);
}

/* Le titre de section est un libelle, pas un titre : petites capitales
   espacees. L'ecart 40 au-dessus contre 12 en dessous est ce qui rattache
   visuellement un titre a ce qu'il annonce. */
h2 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--encre-douce);
    margin: var(--e8) 0 var(--e3);
}

h3 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    margin: var(--e5) 0 var(--e2);
}

.sous-titre { color: var(--encre-douce); margin: 0 0 var(--e6); }

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: var(--e6);
    margin-bottom: var(--e4);
    /* Un tableau plus large que la carte defile dans la carte. Le corps de la
       page ne defile jamais horizontalement, a aucune largeur d'ecran. */
    overflow-x: auto;
}

/* Un titre en premiere ligne de carte n'a pas d'espace au-dessus : il ouvre la
   carte, il ne separe pas deux blocs. Soixante-trois attributs
   `style="margin-top:0"` disaient cela un par un dans les gabarits, et sont
   partis avec cette regle. Le selecteur descend dans les blocs de titre, ou le
   `h2` est emballe dans un `div`. */
.carte > *:first-child,
.carte h2:first-child,
.carte h3:first-child,
.carte > .entre-deux:first-child h2,
.carte > .entre-deux:first-child h3 { margin-top: 0; }

/* Ce qui suit un tableau ou un paragraphe dans une carte, en general un
   bouton, prend l'ecart de l'echelle plutot qu'une marge ecrite a la main. */
.ecarte { margin-top: var(--e4); }

.grille { display: grid; gap: var(--e4); }
.grille.deux { grid-template-columns: 2fr 1fr; }
/* Sans min-width, une colonne de grille refuse de descendre sous la largeur
   de son contenu et pousse toute la page. Sans align-items, une carte de trois
   lignes s'etire a la hauteur d'une carte de vingt. */
.grille > * { min-width: 0; }
.grille { align-items: start; }

/* --------------------------------------------------------------------------
   Calendrier de la semaine

   Une grille de sept colonnes, une par jour, et une gouttiere d'heures a
   gauche. Les seances ne sont pas des cases de tableau mais des blocs places
   a la minute pres, en pourcentage de la hauteur de la journee : une seance de
   9h05 a 9h50 tombe donc au bon endroit sans qu'il faille une ligne de tableau
   pour chaque cas de figure.

   Les creneaux libres sont des boutons transparents places dessous. Un creneau
   pris est recouvert par son bloc, donc materiellement inatteignable : on ne
   peut pas cliquer sur une place deja occupee.
   -------------------------------------------------------------------------- */

.calendrier-cadre { overflow-x: auto; }

.calendrier {
    /* 64 px l'heure, donc 32 px pour une seance de 30 minutes : c'est la
       hauteur minimale ou le nom et l'horaire tiennent tous les deux sans etre
       coupes. A 56 px, la deuxieme ligne passait sous le bord du bloc. */
    --heure-hauteur: 64px;
    display: grid;
    grid-template-columns: 58px repeat(7, minmax(104px, 1fr));
    min-width: 780px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--carte);
}

.calendrier .titre-jour {
    padding: var(--e2) var(--e1);
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
    background: var(--surface-appuyee);
    border-bottom: 1px solid var(--trait);
    border-left: 1px solid var(--trait);
}

.calendrier .titre-heures {
    background: var(--surface-appuyee);
    border-bottom: 1px solid var(--trait);
}

.calendrier .gouttiere {
    position: relative;
    background: var(--surface-appuyee);
}

/* L'heure tient en entier : a 11 px et en chiffres a chasse fixe, "10:30"
   demande 36 px, la gouttiere en donne 58 moins 10 de marge. */
.calendrier .gouttiere .heure {
    position: absolute;
    right: var(--e2);
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

/* La derniere heure ferme la journee : aucune ligne ne lui correspond, et la
   centrer sur le bord la ferait couper par le cadre. Elle se pose donc juste
   au-dessus. */
.calendrier .gouttiere .heure.derniere { transform: translateY(-100%); }

.colonne-jour {
    position: relative;
    border-left: 1px solid var(--trait);
    /* Un trait plein a chaque heure, un trait clair a la demie : on lit
       l'heure d'un coup d'oeil sans compter les lignes. */
    background-image:
        repeating-linear-gradient(to bottom, var(--trait) 0 1px,
                                  transparent 1px var(--heure-hauteur)),
        repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure-hauteur) / 2),
                                  var(--fond) calc(var(--heure-hauteur) / 2)
                                  calc(var(--heure-hauteur) / 2 + 1px),
                                  transparent calc(var(--heure-hauteur) / 2 + 1px)
                                  var(--heure-hauteur));
}

/* Le jour d'aujourd'hui se marque par le seul trait de metal autorise, pas par
   un aplat de couleur. */
.calendrier .titre-jour.aujourdhui {
    background: var(--metal-voile);
    color: var(--encre);
    box-shadow: inset 0 -2px 0 var(--metal);
}
.calendrier .titre-jour.ferme { color: var(--encre-inactive); }

/* Un jour ferme se voit d'un coup d'oeil : hachure legere, et aucun creneau
   libre a l'interieur puisqu'il ne s'y passe rien. */
.colonne-jour.ferme {
    background-image: repeating-linear-gradient(45deg, var(--surface-appuyee) 0 6px,
                                                var(--carte) 6px 12px);
}

.creneau-libre {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--instant) var(--courbe);
}

.creneau-libre:hover { background: var(--surface-choisie); }

.creneau-libre:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: -2px;
}

.bloc-seance {
    position: absolute;
    left: 3px;
    right: 3px;
    display: block;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: var(--rayon-commande);
    border: 1px solid var(--trait);
    border-left: 2px solid var(--filet-fort);
    background: var(--carte);
    color: var(--encre);
    font-size: 11px;
    line-height: 13px;
    text-decoration: none;
    transition: border-color var(--instant) var(--courbe);
}

.bloc-seance:hover { border-color: var(--encre); }
.bloc-seance.tiers-payant { background: var(--vert-clair); border-left-color: var(--vert); }
/* Une presence pointee est un fait acquis : trait plein a gauche. */
.bloc-seance.presente { border-left: 4px solid var(--vert); }
.bloc-seance.absente { opacity: 0.55; text-decoration: line-through; }
.bloc-seance .qui { font-weight: 600; display: block; }
.bloc-seance .quand { color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Zone de depot : on glisse le fichier dessus, ou on clique. Le champ de
   fichier reste dessous et fait le travail ; l'habillage ne fait que le rendre
   visible et accueillant. */
.zone-depot {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e6) var(--e5);
    border: 1px dashed var(--filet-champ);
    border-radius: var(--rayon);
    background: var(--carte);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--instant) var(--courbe),
                background-color var(--instant) var(--courbe);
}

.zone-depot:hover, .zone-depot.survol { border-color: var(--encre); background: var(--surface-survol); }
.zone-depot.rempli { border-style: solid; border-color: var(--vert); background: var(--vert-clair); }
.zone-depot .titre-depot { font-weight: 600; }
.zone-depot .nom-fichier { font-size: 13px; margin-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.zone-depot input[type=file] { display: none; }

/* Reprise des anciens fichiers : ce qui est incertain se voit, ce qui est
   secondaire se replie. */
tr.incertaine { background: var(--ambre-clair); }
.avertissement { color: var(--ambre); }
.a-verifier { color: var(--rouge); }
details.repli summary { cursor: pointer; font-weight: 600; }
details.repli[open] summary { margin-bottom: var(--e3); }
ul.compte-rendu, ul.non-compris { margin: 0 0 var(--e3); padding-left: var(--e5); }
ul.non-compris li { overflow-wrap: anywhere; }

.navigation-mois { align-items: center; gap: var(--e3); }
.navigation-mois .bouton { padding: 0 var(--e3); font-size: 16px; }
.navigation-mois h2 { white-space: nowrap; margin: 0; }

/* Ligne modifiable : lecture d'abord, correction ensuite.

   Une ligne de facture ou de comptabilite s'affiche comme du texte. Le bouton
   « Modifier » ouvre les champs et devient « Enregistrer ». Sans cela, une
   dizaine de cases de saisie s'offrent en permanence a la faute de frappe, et
   l'ecran ressemble a un formulaire alors qu'on vient surtout y lire. */
.ligne-modifiable .en-lecture { display: block; }
.ligne-modifiable .en-saisie { display: none; }
.ligne-modifiable.ouverte .en-lecture { display: none; }
.ligne-modifiable.ouverte .en-saisie { display: block; }
.ligne-modifiable.ouverte { background: var(--surface-choisie); }
.ligne-modifiable .bouton.enregistrer { display: none; }
.ligne-modifiable.ouverte .bouton.enregistrer { display: inline-flex; }
.ligne-modifiable.ouverte .bouton.ouvrir { display: none; }
.ligne-modifiable.ouverte td { color: var(--encre-moyenne); }

/* Dans un tableau, les deux boutons d'une ligne tiennent cote a cote et ne
   s'etirent pas : sinon chaque ligne prend deux fois sa hauteur. */
td .rangee { flex-wrap: nowrap; justify-content: flex-end; gap: var(--e2); }
td .rangee .bouton { white-space: nowrap; }
table input[type=text], table input[type=date], table select { width: auto; }

.en-ordre { color: var(--vert); font-size: 13px; white-space: nowrap; }

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
    margin-top: var(--e3);
    font-size: 11px;
    color: var(--encre-douce);
}

.legende span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: var(--rayon-commande);
    vertical-align: -1px;
}

.legende .tp::before { background: var(--vert-clair); border: 1px solid var(--vert-filet); }
.legende .ordinaire::before { background: var(--carte); border: 1px solid var(--filet-fort); }
.legende .libre::before { background: var(--carte); border: 1px solid var(--trait); }
.legende .pointee::before { background: var(--carte); border: 1px solid var(--trait);
                            border-left: 4px solid var(--vert); }

@media (max-width: 900px) { .grille.deux { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- patient du jour */
/* Le patient du moment occupe deux colonnes : a gauche qui il est et les deux
   boutons, a droite le decompte et les reperes de facturation. */
.patient-courant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    gap: var(--e7);
    align-items: start;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: var(--e7);
    margin-bottom: var(--e4);
}

/* La note occupe toute la largeur sous les deux colonnes. */
.patient-note { grid-column: 1 / -1; border-top: 1px solid var(--trait); padding-top: var(--e5); }
.patient-identite { min-width: 0; }
.patient-details { border-left: 1px solid var(--trait); padding-left: var(--e6); }

.repere { width: 100%; }
.repere td { padding: var(--e1) 0; border: 0; font-size: 14px; }
.repere td:first-child { color: var(--encre-douce); width: 45%; }
.repere td:last-child { text-align: right; font-weight: 600; }

/* Une date en toutes lettres commence par un nom de jour en minuscule : la
   majuscule se pose ici plutot que dans le texte, qui sert aussi ailleurs.
   `::first-letter` ne s'applique qu'a un bloc, d'ou le display. */
.capitale { display: inline-block; }
.capitale::first-letter { text-transform: uppercase; }

/* La ligne du jour, dans le releve du mois. */
tr.appuyee td { background: var(--surface-choisie); font-weight: 600; }

.patient-courant.alerte { border-color: var(--metal); box-shadow: inset 3px 0 0 var(--metal); }

.etiquette {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
    font-weight: 500;
}

.nom-patient {
    font-family: var(--police-titre);
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin: var(--e2) 0 var(--e1);
}

.creneau { color: var(--encre-douce); font-size: 15px; }

/* Le decompte est le seul grand chiffre du logiciel : il se lit de l'autre
   bout de la piece, donc en police d'interface et jamais en Georgia. */
.decompte {
    font-size: 44px;
    line-height: 44px;
    font-weight: 400;
    letter-spacing: -0.7px;
    font-variant-numeric: tabular-nums;
    margin: var(--e3) 0 var(--e1);
}

/* La fin d'une seance n'est pas une alerte : c'est l'heure. Le texte se fait
   simplement plus petit et plus calme, sans rouge. */
.decompte.fini,
.decompte:not([data-secondes]) { font-size: 22px; line-height: 28px; letter-spacing: 0; color: var(--encre-douce); }

.boutons-pointage { display: flex; gap: var(--e3); margin-top: var(--e5); flex-wrap: wrap; }

/* ---------------------------------------------------------------- boutons */
/* Le bouton principal est noir sur blanc, comme chez Cartier : c'est a la fois
   le plus elegant et le plus contraste (17,4 pour 1). Le secondaire porte une
   bordure a 3,63 pour 1, seuil des commandes ; l'ancienne bordure a 1,33 etait
   invisible. */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 40px;
    padding: 0 var(--e5);
    border-radius: var(--rayon-commande);
    border: 1px solid var(--filet-champ);
    background: var(--carte);
    color: var(--encre);
    font-family: inherit;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--instant) var(--courbe),
                border-color var(--instant) var(--courbe);
}

.bouton:hover { background: var(--surface-survol); border-color: var(--encre); }

.bouton.principal {
    background: var(--surface-encre);
    border-color: var(--surface-encre);
    color: #fff;
    font-weight: 600;
}
.bouton.principal:hover { background: #33312d; border-color: #33312d; }

.bouton.present { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.bouton.present:hover { background: #15563b; border-color: #15563b; }
.bouton.absent { background: var(--carte); border-color: var(--rouge); color: var(--rouge); }
.bouton.absent:hover { background: var(--rouge-clair); }
.bouton.grand { height: 48px; padding: 0 var(--e7); font-size: 15px; }
.bouton:disabled { color: var(--encre-inactive); border-color: var(--trait);
                   background: var(--surface-appuyee); cursor: default; }
.bouton:disabled:hover { background: var(--surface-appuyee); border-color: var(--trait); }

/* ---------------------------------------------------------------- tableaux */
/* Ligne a 44 px : treize lignes sur un portable, contre neuf si l'on prenait
   la hauteur des sites de joaillerie. Filets horizontaux seulement, jamais de
   quadrillage : les traits verticaux font tableur. */
table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
    padding: var(--e3);
    border-bottom: 1px solid var(--filet-fort);
    white-space: nowrap;
}

/* 12 + 20 + 12 = 44 px de haut, la hauteur ou treize lignes tiennent sur un
   portable. Douze de marge laterale et non seize : dans une grille a deux
   colonnes, six colonnes de tableau perdaient un tiers de leur largeur en
   marges, et les libelles se cassaient en trois lignes. */
td {
    padding: var(--e3);
    line-height: 20px;
    border-bottom: 1px solid var(--trait);
    vertical-align: middle;
}

tbody tr { transition: background-color var(--instant) var(--courbe); }
tbody tr:hover td { background: var(--surface-survol); }
tr:last-child td { border-bottom: none; }
tr.faible td { color: var(--encre-douce); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-dense td { padding: var(--e2) var(--e3); }
.tableau-dense th { padding: var(--e2) var(--e3); }

/* -------------------------------------------------------------- pastilles */
.pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rayon-rond);
    border: 1px solid transparent;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pastille.presente { background: var(--vert-clair); border-color: var(--vert-filet); color: var(--vert); }
.pastille.absente { background: var(--rouge-clair); border-color: var(--rouge-filet); color: var(--rouge); }
.pastille.annulee { background: var(--surface-appuyee); border-color: var(--filet-fort); color: var(--encre-moyenne); }
.pastille.prevue { background: var(--surface-appuyee); border-color: var(--trait); color: var(--encre-moyenne); }
.pastille.tp { background: var(--metal-voile); border-color: var(--metal-clair); color: var(--metal-texte); }
.pastille.alerte { background: var(--ambre-clair); border-color: var(--ambre-filet); color: var(--ambre); }

/* ---------------------------------------------------------------- messages */
.message {
    padding: var(--e3) var(--e4);
    border-radius: var(--rayon);
    margin-bottom: var(--e4);
    border: 1px solid var(--trait);
    border-left: 2px solid var(--filet-fort);
    background: var(--carte);
    animation: apparaitre var(--entree) var(--courbe-sortie);
}

@keyframes apparaitre {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.message.succes { background: var(--vert-clair); border-color: var(--vert-filet);
                  border-left-color: var(--vert); color: var(--vert); }
.message.erreur { background: var(--rouge-clair); border-color: var(--rouge-filet);
                  border-left-color: var(--rouge); color: var(--rouge); }
.message.attention { background: var(--ambre-clair); border-color: var(--ambre-filet);
                     border-left-color: var(--ambre); color: var(--ambre); }

/* ------------------------------------------------------------------ formes */
label, .label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--encre-moyenne);
    margin-bottom: 6px;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="time"], select, textarea {
    width: 100%;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--filet-champ);
    border-radius: var(--rayon-commande);
    font-size: 15px;
    line-height: 20px;
    font-family: inherit;
    background: var(--carte);
    color: var(--encre);
    transition: border-color var(--instant) var(--courbe);
}

textarea { line-height: 22px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--encre-inactive); }

input:hover, select:hover, textarea:hover { border-color: var(--encre-moyenne); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
    border-color: var(--encre);
}

.champ { margin-bottom: var(--e5); }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--e4); }

.case { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.case input { width: auto; accent-color: var(--surface-encre); }
.case label { margin: 0; font-weight: 400; font-size: 14px; color: var(--encre); }

fieldset {
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: var(--e5);
    margin: 0 0 var(--e4);
    background: var(--carte);
}

legend {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
    padding: 0 var(--e2);
}

/* ---------------------------------------------------------------- connexion */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e5);
}

.boite-connexion { width: 100%; max-width: 380px; }

/* ----------------------------------------------------- note de seance */
/* Le commentaire et le materiel s'ecrivent la ou la seance se pointe. Le bloc
   se replie quand il n'y a rien a lire, s'ouvre des qu'il y a quelque chose. */
.note {
    /* L'en-tete est colle en haut : sans cette marge, une ancre depose la note
       juste dessous et son titre passe derriere. */
    scroll-margin-top: 90px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--carte);
}

.note > summary {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    cursor: pointer;
    list-style: none;
}

.note > summary::-webkit-details-marker { display: none; }

/* Le triangle est dessine ici : celui du navigateur ne se colore pas et saute
   d'un systeme a l'autre. */
.note > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid var(--encre-douce);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--etat) var(--courbe-sortie);
}

.note[open] > summary::before { transform: rotate(90deg); }
.note > summary:hover { background: var(--surface-survol); }

.note-titre {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
}

.note-etat { font-size: 13px; color: var(--encre-moyenne); }
.note-etat.vide { color: var(--encre-inactive); }

.note-formulaire, .note-lecture {
    padding: var(--e2) var(--e4) var(--e5);
    border-top: 1px solid var(--trait);
}

.note-formulaire .champ:last-of-type { margin-bottom: var(--e4); }
.note-texte { white-space: pre-wrap; margin: 0 0 var(--e2); }

.materiel-listes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--e3);
}

.materiel-groupe {
    margin: 0;
    padding: var(--e3) var(--e4) var(--e1);
    border: 1px solid var(--trait);
    background: var(--fond);
}

.materiel-groupe .case { margin-bottom: var(--e2); }
.materiel-groupe .case label { font-size: 13px; }

/* La ligne de note dans le tableau de la journee : elle n'a ni filet ni
   marge, le cadre de la note fait deja tout le travail. */
tr.ligne-note td { padding: 0 var(--e4) var(--e3); border-bottom: 1px solid var(--trait); }
tr.ligne-note:hover td { background: transparent; }

/* ------------------------------------------------------- suivi du patient */
/* Le fil du suivi, tout en bas de la fiche : une entree par seance, la plus
   recente en premier, avec un filet vertical qui tient la colonne. */
.suivi { margin-top: var(--e8); }

.fil { list-style: none; margin: 0; padding: 0; }

.fil-entree {
    position: relative;
    padding: 0 0 var(--e5) var(--e5);
    border-left: 1px solid var(--trait);
}

.fil-entree:last-child { padding-bottom: 0; border-left-color: transparent; }

.fil-entree::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: var(--rayon-rond);
    background: var(--metal);
}

.fil-date {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--encre-douce);
    display: flex;
    align-items: center;
    gap: var(--e2);
}

.fil-texte { white-space: pre-wrap; margin: var(--e2) 0 var(--e1); }
.fil-pied { font-size: 11px; }

.etiquettes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }

.etiquette-compte {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-rond);
    font-size: 13px;
    background: var(--carte);
}

.etiquette-compte .fois {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

/* ------------------------------------------------------------------ divers */
.discret { color: var(--encre-douce); font-size: 13px; line-height: 20px; }
.mono { font-family: var(--police-chiffres); font-size: 13px; }
.rangee { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }

/* Un champ dans une rangee partage la ligne au lieu de la prendre entiere :
   sans cela, un formulaire d'ajout en une ligne s'empile en trois. */
.rangee input[type="text"], .rangee input[type="date"],
.rangee input[type="number"], .rangee select { width: auto; flex: 1 1 170px; }
.entre-deux { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); }

/* L'etat vide est le seul endroit ou l'on respire a la joailliere. */
.vide { padding: var(--e10) var(--e6); text-align: center; color: var(--encre-douce); }

.secret-affiche {
    font-family: var(--police-chiffres);
    font-size: 20px;
    letter-spacing: 1px;
    background: var(--metal-voile);
    border: 1px solid var(--metal-clair);
    border-radius: var(--rayon-commande);
    padding: var(--e3) var(--e4);
    display: inline-block;
    margin-top: var(--e2);
}

/* ------------------------------------------------------------ petits ecrans */
/* Le cabinet travaille sur deux Mac, mais l'ecran doit rester lisible si
   quelqu'un ouvre la page sur un portable etroit ou une fenetre reduite. */
@media (max-width: 1100px) {
    main { padding: var(--e6) var(--e6) var(--e10); }
    .entete { padding: 0 var(--e6); }
}

/* Entre 1000 et 640 px, l'en-tete tient encore sur une ligne mais le menu, lui,
   ne tient plus : il defile au lieu de s'enrouler. Un menu enroule sur quatre
   lignes pousse toute la page vers le bas et change de hauteur d'un ecran a
   l'autre, ce qui est exactement ce qu'un en-tete colle ne doit pas faire. */
@media (max-width: 1000px) {
    .entete { padding: 0 var(--e5); gap: var(--e4); }
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        scrollbar-width: none;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { padding: var(--e5) var(--e2); letter-spacing: 1px; }
}

@media (max-width: 640px) {
    main { padding: var(--e4) var(--e4) var(--e9); }
    /* En etroit, l'en-tete s'empile au lieu de casser le menu en quatre lignes :
       marque, puis menu qui defile horizontalement, puis identite.
       flex-wrap doit repasser a nowrap : en colonne, un conteneur qui enroule
       calcule sa largeur sur l'element le plus large et etire tous les autres
       dessus, ce qui pousse l'en-tete hors de l'ecran. */
    .entete {
        padding: 0 var(--e4);
        gap: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    /* Le nom du cabinet est saisi par le client : il peut etre long, donc il
       doit pouvoir revenir a la ligne plutot que pousser la page. */
    .marque { padding: var(--e3) 0 var(--e1); font-size: 17px; white-space: normal; }
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        border-top: 1px solid var(--trait);
    }
    .menu a { padding: var(--e3) var(--e2); }
    .identite {
        justify-content: space-between;
        padding: var(--e2) 0;
        border-top: 1px solid var(--trait);
    }
    th { white-space: normal; }
    td, th { padding: var(--e3) var(--e2); }
    .colonnes { grid-template-columns: 1fr; }
    .carte { padding: var(--e5); }
    .patient-courant { padding: var(--e5); grid-template-columns: 1fr; gap: var(--e5); }
    .patient-details { border-left: 0; border-top: 1px solid var(--trait);
                       padding-left: 0; padding-top: var(--e4); }
    .nom-patient { font-size: 24px; line-height: 30px; }
    .decompte { font-size: 40px; line-height: 40px; }
    .boutons-pointage .bouton.grand { flex: 1; }
    .entre-deux { flex-direction: column; align-items: stretch; }
    .materiel-listes { grid-template-columns: 1fr; }
    /* Le calendrier garde sa largeur et defile dans son cadre : le comprimer
       rendrait les noms illisibles, et c'est justement ce qu'on voulait
       corriger. */
    .calendrier { --heure-hauteur: 56px; }
}

@media print {
    .entete, .boutons-pointage, .bouton, .sans-impression { display: none !important; }
    .creneau-libre { display: none !important; }
    .calendrier-cadre { overflow: visible; }
    body { background: #fff; }
    .carte { border: none; padding: 0; }
    .note { display: none !important; }
}