/* 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.
Charte unique (15 octobre 2026, docs/CHARTE.md) : toute valeur vient d'un
jeton de :root, et les tailles sont en rem pour que le reglage de taille du
texte du navigateur agisse sur tout l'ecran (a 16 px par defaut, 1rem vaut
16 px : 0.9375rem fait les 15 px du texte courant). La page de reference
des composants est /reglages/charte. */
/* --------------------------------------------------------------------------
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. L'inactive (indications, « rien de noté », jours hors du mois)
tient 4,5 pour 1 sur le blanc, le fond, le survol et la ligne ouverte
(5,32 / 4,84 / 4,64 / 4,57) ; elle remplace #9b948a, a 3,00. Sur le
voile de metal, c'est l'encre douce qui ecrit. */
--encre: #1b1a18;
--encre-moyenne: #4a4640;
--encre-douce: #6e6860;
--encre-inactive: #726a61;
/* Le texte pose sur l'encre (bouton principal, bandeau d'apercu). */
--sur-encre: #ffffff;
--principal-survol: #33312d;
/* 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-survol: #15563b;
--vert-clair: #e9f1ec;
--vert-filet: #c4dacd;
--ambre: #8a5a10;
--ambre-clair: #faf0dc;
--ambre-filet: #e6d2a8;
--rouge: #97241c;
--rouge-clair: #f9ebe9;
--rouge-filet: #ebc8c3;
/* Bordure d'une commande qui detruit (corbeille) : 3,54 pour 1, la ou
le filet rouge clair n'en faisait que 1,55. */
--rouge-bord: #cf6b62;
/* Information : un lien dans du texte suivi, et rien d'autre */
--accent: #25506e;
--accent-clair: #eaf0f5;
/* Les paliers de la carte de chaleur du tableau de bord, de l'accent clair
a l'accent. */
--accent-palier-1: #dbe5ee;
--accent-palier-2: #b3c8da;
--accent-palier-3: #7c9fbd;
/* Plusieurs logopedes : la couleur du filet en haut de leurs seances.
Aucune ne reprend une couleur d'etat (L06-11) : le vert de la
presence, le rouge de l'absence, le gris de l'encre douce. Les codes
« vert », « rouge », « gris » restent ceux des donnees ; l'ecran les
nomme turquoise, framboise, ardoise. */
--logo-bleu: #2f6fa3;
--logo-vert: #0f8088;
--logo-ambre: #b07a1c;
--logo-rouge: #b23a6c;
--logo-violet: #6a3f8f;
--logo-gris: #5b6e85;
/* Le voile qui eteint la page derriere la visite guidee. */
--voile: rgba(27, 26, 24, .45);
/* La feuille MOD 111 dessinee a l'ecran : le papier et l'encre du vrai
formulaire, pas ceux du logiciel. */
--feuille-papier: #fffefa;
--feuille-encre: #161616;
--feuille-valeur: #000000;
--feuille-perforation: #8d877d;
--feuille-trou: #b9b3a8;
--feuille-taille: 10pt;
/* Espacement : la liste complete, aucune valeur en dehors. En rem : a
16 px par defaut, --e1 vaut 4 px et --e10 64 px. --e0 (2 px) ne sert
qu'aux composants serres : bloc de seance, pastille, liste du mois. */
--e0: 0.125rem;
--e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.25rem;
--e6: 1.5rem; --e7: 2rem; --e8: 2.5rem; --e9: 3rem; --e10: 4rem;
/* Mise en page. La gouttiere est la meme pour l'en-tete et le corps :
16 px sur telephone, 24 px jusqu'a 1 279 px, 32 px au-dela. La colonne
porte les formulaires et les fiches ; les ecrans de donnees (horaire,
listes, comptabilite) prennent la colonne large. L'en-tete s'aligne sur
la colonne de la page. */
--gouttiere: var(--e7);
--colonne: 80rem;
--colonne-large: 115rem;
--colonne-page: var(--colonne);
/* La marge interieure d'une carte (et d'une section de formulaire). */
--marge-carte: var(--e6);
/* Un paragraphe ne depasse pas 72 caracteres par ligne. */
--mesure: 72ch;
/* La barre d'onglets du telephone, en bas de l'ecran ; la gouttiere des
heures du calendrier ; la feuille d'actions d'une seance au doigt. */
--hauteur-onglets: 3.5rem;
--largeur-heures: 3.625rem;
--largeur-feuille: 27.5rem;
/* Texte : huit tailles, rien d'autre. */
--taille-affichage: 2.75rem; /* 44 px, le decompte, seul */
--taille-titre: 1.625rem; /* 26 px, Garamond : h1, nom du patient */
--taille-intertitre: 1.0625rem; /* 17 px, 600 : titre de periode, marque */
--taille-courant: 0.9375rem; /* 15 px : texte, champs */
--taille-commande: 0.875rem; /* 14 px, 500 : boutons, cases, menu ; h2 en 600 */
--taille-secondaire: 0.8125rem; /* 13 px : .discret, libelles */
--taille-surtitre: 0.75rem; /* 12 px, 500, capitales : legend, th, surtitre */
--taille-pastille: 0.75rem; /* 12 px, 500 : pastilles, calendrier */
--ligne-affichage: 2.75rem;
--ligne-titre: 2rem;
--ligne-courant: 1.5rem;
--ligne-serree: 1.25rem; /* tableaux, texte secondaire */
--ligne-commande: 1.125rem;
--ligne-surtitre: 1rem; /* surtitres, libelles de champ */
--ligne-pastille: 0.875rem;
--ligne-bloc: 0.8125rem; /* bloc de seance : deux lignes dans 32 px */
--interlettrage: -0.00667em; /* le texte courant, un rien serre */
--interlettrage-titre: -0.0115em;
--interlettrage-capitales: 0.08em;
--interlettrage-pastille: 0.03em;
/* Commandes : bouton, champ, liste, date, heure, a la meme hauteur. */
--hauteur-commande: 2.5rem;
--hauteur-commande-petite: 2rem;
--hauteur-commande-grande: 3rem;
--cote-case: 1.125rem; /* case a cocher et bouton radio : 18 px */
/* Au doigt (pointer: coarse) : une cible fait 44 px, la case 24 px. */
--cible-tactile: 2.75rem;
--cote-case-tactile: 1.5rem;
/* Angles */
--rayon: 0;
--rayon-commande: 2px;
--rayon-rond: 999px;
/* Filets : 1 px partout ; 2 px pour la marque (page active, aujourd'hui,
message) ; 3 px pour la couleur d'un logopede ; 4 px pour une presence
pointee. */
--filet: 1px;
--filet-marque: 2px;
--filet-logopede: 3px;
--filet-presence: 4px;
/* 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. Il n'y
a plus de police a chasse fixe : les chiffres tabulaires d'Inter
alignent les colonnes, et la chasse fixe du systeme changeait d'un
ordinateur a l'autre (SF Mono, Consolas, DejaVu). */
--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;
/* 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);
/* Deux ombres, pas une de plus : ce qui flotte au-dessus de la page
(barre des modifications, bulle, question au lacher), et ce qu'on tient
en main (seance qu'on deplace, heure qu'on change sur place, feuille). */
--ombre-flottante: 0 8px 24px rgba(27, 26, 24, .16);
--ombre-glisse: 0 4px 14px rgba(27, 26, 24, .16);
}
/* La gouttiere suit la largeur, la meme pour l'en-tete et le corps. Les
points de rupture sont en em : avec un texte agrandi dans le navigateur,
la mise en page etroite arrive plus tot, comme il se doit. */
@media (max-width: 79.9375em) { :root { --gouttiere: var(--e6); } }
@media (max-width: 40em) { :root { --gouttiere: var(--e4); --marge-carte: var(--e5); } }
* { box-sizing: border-box; }
/* Un element marque hidden reste cache, quelle que soit sa mise en page : la
grille des champs (.colonnes > .champ) le montrait, et le formulaire
« Placer » offrait la date, le code et l'objet dans tous les cas (vu avec la
seance collective, L14-4). Le lecteur d'ecran ne lit plus ce qui est cache. */
[hidden] { display: none !important; }
/* 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. */
/* La racine suit le reglage de taille du texte du navigateur : tout ce qui
suit est en rem. */
/* L'element qui prend le focus (Tab, Maj+Tab) ou qu'une ancre amene ne passe
jamais sous l'en-tete colle et le sommaire, ni sous la barre des
modifications en bas (L08-3) : le navigateur garde cette marge en faisant
defiler. Le script de layout.html mesure les deux hauteurs ; sans lui,
90 px. */
html { scrollbar-gutter: stable; font-size: 100%;
scroll-padding-top: calc(var(--hauteur-entete, 90px) + var(--hauteur-sommaire, 0px));
scroll-padding-bottom: var(--e10); }
/* Ni chiffres tabulaires ni ponctuation des capitales sur le corps : dans
Inter, la premiere donne au trait d'union la largeur d'un chiffre et la
seconde le releve, d'ou « rendez - vous » sur chaque page. Les chiffres
tabulaires vont aux colonnes de chiffres (.nombre et voisins), la
ponctuation des capitales aux capitales espacees (h2, th, legend...). */
body {
/* La marge laterale d'une bande pleine largeur (en-tete, bandeaux) : la
colonne large, sur toutes les pages. Alignee sur la colonne de chaque
page, la marque sautait de 80 px entre l'accueil et les factures, a
1 440 px (passe 4 du comparatif). Le pourcentage se compte la ou le
jeton sert : la largeur de la page. */
--marge-colonne: max(var(--gouttiere), calc((100% - var(--colonne-large)) / 2 + var(--gouttiere)));
margin: 0;
font-family: var(--police);
font-size: var(--taille-courant);
line-height: var(--ligne-courant);
letter-spacing: var(--interlettrage);
color: var(--encre);
background: var(--fond);
-webkit-font-smoothing: antialiased;
}
/* Trois graisses, 400, 500, 600 : le gras du navigateur (700) n'en est pas. */
strong, b { font-weight: 600; }
/* Les commandes du navigateur ne prennent ni la police ni l'interlettrage de
la page d'elles-memes. */
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
a { color: var(--accent); }
/* Un paragraphe ne s'etale pas sur toute la colonne : au-dela de 72
caracteres, l'oeil perd le debut de la ligne suivante (le sous-titre de
page suit la meme mesure). */
p { max-width: var(--mesure); }
/* Les messages, les aides posees en bloc et les listes simples suivent la
meme mesure : a 1 440 px, une ligne y faisait jusqu'a 188 caracteres
(L08-31). */
.message, div.discret, .champ > .discret, main ul:not([class]) > li, main ol:not([class]) > li,
.prochaines-etapes > li { max-width: var(--mesure); }
/* 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: var(--filet-marque) solid var(--encre);
outline-offset: var(--filet-marque);
}
@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: var(--sur-encre);
padding: var(--e3) var(--marge-colonne);
font-size: var(--taille-secondaire);
line-height: var(--ligne-serree);
border-bottom: var(--filet-marque) solid var(--metal);
}
.bandeau-apercu strong {
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
color: var(--metal-clair);
margin-right: var(--e2);
}
/* Controle FastSolve : preavis avant blocage (7 derniers jours sans statut
neuf). Meme couleurs que les messages « attention », sur toute la largeur. */
.bandeau-licence {
background: var(--ambre-clair);
color: var(--ambre);
padding: var(--e3) var(--marge-colonne);
font-size: var(--taille-secondaire);
line-height: var(--ligne-serree);
border-bottom: var(--filet-marque) solid var(--ambre-filet);
}
/* ---------------------------------------------------------------- en-tete */
/* Le contenu de l'en-tete s'aligne sur la colonne large, la meme sur toutes
les pages : la marque ne bouge pas d'un ecran a l'autre. */
.entete {
background: var(--carte);
border-bottom: var(--filet) solid var(--trait);
padding: 0 var(--marge-colonne);
display: flex;
align-items: center;
gap: var(--e4);
flex-wrap: nowrap;
position: sticky;
top: 0;
z-index: 10;
}
/* Un nom de cabinet long se coupe (il reste entier au survol). */
.marque {
font-family: var(--police-titre);
font-weight: 400;
font-size: var(--taille-intertitre);
line-height: var(--ligne-courant);
letter-spacing: var(--interlettrage-titre);
padding: var(--e4) 0;
white-space: nowrap;
max-width: 12em;
overflow: hidden;
text-overflow: ellipsis;
}
/* Le menu ne passe jamais sur deux lignes : trop etroit, il defile de cote
(tour de simplicite, 6 octobre 2026 : a 1 440 px il s'enroulait de nouveau
depuis l'ajout du tableau de bord et des accords). */
.menu {
display: flex; gap: 0; flex-wrap: nowrap; flex: 1;
overflow-x: auto; min-width: 0; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
/* Le menu se lit comme une commande, en casse normale (14 px, 500) : plus
court que les capitales espacees de 12 px, il tient en entier dans la
colonne, et se lit mieux (charte du 15 octobre 2026). */
.menu a {
padding: var(--e5) var(--e2);
text-decoration: none;
color: var(--encre-douce);
font-size: var(--taille-commande);
line-height: var(--ligne-commande);
font-weight: 500;
border-bottom: var(--filet-marque) solid transparent;
white-space: nowrap;
transition: color var(--instant) var(--courbe),
border-color var(--etat) var(--courbe-sortie);
}
.menu a:hover { color: var(--encre); }
/* Le menu et le sommaire defilent de cote, donc rognent ce qui depasse : leur
anneau de focus se pose a l'interieur du lien, entier (L08-7). */
.menu a:focus-visible, .sommaire a:focus-visible { outline-offset: calc(-1 * var(--filet-marque)); }
/* « Aller au contenu » : invisible a la souris, il parait au premier Tab. */
.lien-evitement { position: absolute; left: -9999px; top: var(--e2); z-index: 1000;
padding: var(--e2) var(--e3); background: var(--carte); color: var(--encre);
border: var(--filet-marque) solid var(--metal); border-radius: var(--rayon-commande); }
.lien-evitement:focus { left: var(--e2); }
main:focus { outline: none; }
/* Les quatre groupes du menu (le temps, les patients, la facturation, la
gestion) : un trait fin entre eux. Deux traits qui se suivent, ou un trait
en bout de menu (groupe absent pour ce compte), ne se montrent pas. */
.separateur-menu { flex: none; align-self: center; width: var(--filet); height: var(--ligne-pastille);
margin: 0 var(--e1); background: var(--trait); }
.separateur-menu:first-child, .separateur-menu:last-child,
.separateur-menu + .separateur-menu { display: none; }
/* Regle a part : un navigateur sans :has() ignore celle-ci, pas la precedente. */
.separateur-menu:not(:has(~ a)) { display: none; }
/* 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: var(--taille-secondaire);
line-height: var(--ligne-serree);
color: var(--encre-douce);
white-space: nowrap;
}
.lien-reglages { color: inherit; text-decoration: none; border-bottom: var(--filet) dotted currentColor; }
.lien-reglages:hover, .lien-reglages.actif { color: var(--encre); border-bottom-style: solid; }
/* « Quitter » se lit comme ses voisins (Reglages, le compte) : un lien, pas un
bouton encadre, ce qui laisse la place au menu sur une ligne. */
.identite .quitter { background: none; border: 0; padding: 0; font-family: inherit;
font-size: inherit; line-height: inherit; color: inherit;
cursor: pointer; border-bottom: var(--filet) dotted currentColor; }
.identite .quitter:hover { color: var(--encre); border-bottom-style: solid; }
/* ------------------------------------------------------------------ corps */
main { max-width: var(--colonne-page); margin: 0 auto; padding: var(--e6) var(--gouttiere) var(--e10); }
/* Les ecrans de donnees (horaire, listes, comptabilite) : `{% set
colonne_large = true %}` dans leur gabarit pose cette classe sur le corps,
et l'en-tete s'aligne sur la meme colonne. */
.page-large { --colonne-page: var(--colonne-large); }
h1 {
font-family: var(--police-titre);
font-size: var(--taille-titre);
line-height: var(--ligne-titre);
font-weight: 400;
letter-spacing: var(--interlettrage-titre);
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, .surtitre {
font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
color: var(--encre-douce);
}
/* Le titre de section se lit sans effort et passe avant le sous-titre (L08-23,
L08-32) : en 12 px gris, il paraissait plus petit que le h3 de 17 px gras.
Il garde ses capitales, en 14 px et 600 ; le h3 descend a la taille du
texte. */
h2 {
margin: var(--e8) 0 var(--e3);
font-size: var(--taille-commande);
line-height: var(--ligne-courant);
font-weight: 600;
color: var(--encre-moyenne);
}
h3 {
font-size: var(--taille-courant);
line-height: var(--ligne-courant);
font-weight: 600;
margin: var(--e5) 0 var(--e2);
}
.sous-titre { color: var(--encre-douce); margin: 0 0 var(--e6); max-width: var(--mesure); }
.carte {
/* Une boite placee dedans (texte pour lecteur d'ecran d'un en-tete de
tableau) se range dans la carte, et non dans la page : elle poussait la
fiche du tiers payant de 13 px de cote a 320 px (L07-19). */
position: relative;
/* Un tableau plus large que la carte defile dans la carte, et un ombrage
sur le bord le dit (L07-18) : les deux voiles blancs suivent le contenu
(local) et cachent l'ombre tant qu'il n'y a rien de plus de ce cote. */
background:
linear-gradient(to right, var(--carte) var(--e4), transparent) left center / var(--e8) 100% no-repeat local,
linear-gradient(to left, var(--carte) var(--e4), transparent) right center / var(--e8) 100% no-repeat local,
linear-gradient(to right, var(--filet-fort), transparent) left center / var(--e3) 100% no-repeat scroll,
linear-gradient(to left, var(--filet-fort), transparent) right center / var(--e3) 100% no-repeat scroll,
var(--carte);
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
padding: var(--marge-carte);
margin-bottom: var(--e4);
/* 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,
.carte > input[type="hidden"]:first-child + h2,
.carte > input[type="hidden"]:first-child + input[type="hidden"] + h2,
.carte > input[type="hidden"]:first-child + input[type="hidden"] + input[type="hidden"] + h2 { margin-top: 0; }
/* Et le dernier element ne laisse pas de vide sous lui : la carte garde sa
marge interieure, ni plus ni moins, en bas comme en haut. */
.carte > *:last-child { margin-bottom: 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); }
/* Sans align-items, une carte de trois lignes s'etire a la hauteur d'une
carte de vingt. */
.grille { display: grid; gap: var(--e4); align-items: start; }
.grille.deux { grid-template-columns: 2fr 1fr; }
/* Deux cartes de meme nature cote a cote finissent a la meme hauteur (L06-44). */
.grille.egales { align-items: stretch; }
/* La comptabilite se lit en tableau large. Dans la grille ordinaire, sa carte
plafonnait a 800 px : ouvrir une ligne poussait le tableau a 1032 px, et le
bouton « Enregistrer » se posait hors de la carte, hors d'atteinte de la
souris, a toutes les largeurs. Les ecritures prennent donc toute la
largeur, et les totaux et l'ajout passent dessous, cote a cote. */
.grille.deux.compta { grid-template-columns: minmax(0, 1fr); }
.grille.deux.compta > div:not(.carte) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--e4);
align-items: start;
}
/* Sans min-width, une colonne de grille refuse de descendre sous la largeur
de son contenu et pousse toute la page. */
.grille > * { min-width: 0; }
/* --------------------------------------------------------------------------
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.
-------------------------------------------------------------------------- */
/* La grille porte toute la journee permise, de 7 h a 22 h, et defile dans son
cadre, dans les deux sens : en hauteur pour monter et descendre dans les
heures, en largeur quand la fenetre est etroite. Le script de la page donne
au cadre la hauteur de la tranche ou sont les seances ; sans script, la
journee entiere s'affiche. Les titres des jours restent en haut, les heures
restent a gauche. */
.calendrier-zone {
display: flex;
gap: var(--e2);
align-items: stretch;
}
.calendrier-cadre {
flex: 1 1 auto;
min-width: 0;
overflow: auto;
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
background: var(--carte);
}
/* Les fleches d'une heure plus tot, d'une heure plus tard : dans le coin des
heures, au-dessus de la gouttiere, ou elles ne prennent aucune place (une
colonne de 46 px a droite du calendrier, 13 % de la largeur sur un
telephone, L06-46). */
.defilement-heures { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e0) var(--e1); }
.legende-fleches { flex-basis: 100%; text-align: center; font-size: var(--taille-pastille);
line-height: var(--ligne-pastille); color: var(--encre-douce); }
.defilement-heures .bouton { width: var(--e6); height: var(--e6); min-height: 0; padding: 0;
font-size: var(--taille-secondaire); line-height: var(--ligne-serree); }
.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: 4rem;
display: grid;
grid-template-columns: var(--largeur-heures) repeat(7, minmax(6.5rem, 1fr));
min-width: 48.75rem;
background: var(--carte);
}
/* Samedi et dimanche vides : deux colonnes etroites, et la semaine tient a
768 px (passe 5). Le telephone, un jour a la fois, garde sa grille. */
@media (min-width: 40.0625em) {
.calendrier.week-end-vide {
grid-template-columns: var(--largeur-heures) repeat(5, minmax(6.5rem, 1fr))
repeat(2, minmax(2.75rem, 0.3fr));
min-width: 41rem;
}
.calendrier.week-end-vide .titre-jour:nth-child(n+7) a > span:first-child {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendrier.week-end-vide .titre-jour:nth-child(n+7) .pointer-noter { display: none; }
}
/* Ce qui reste en place quand la grille defile passe devant les seances. */
.calendrier .titre-jour,
.calendrier .titre-heures { position: sticky; top: 0; z-index: 3; }
.calendrier .titre-jour {
padding: var(--e2) var(--e1);
text-align: center;
font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
color: var(--encre-douce);
background: var(--surface-appuyee);
border-bottom: var(--filet) solid var(--trait);
border-left: var(--filet) solid var(--trait);
}
.calendrier .titre-heures {
left: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-appuyee);
border-bottom: var(--filet) solid var(--trait);
}
.calendrier .gouttiere {
position: sticky;
left: 0;
z-index: 2;
background: var(--surface-appuyee);
}
/* L'heure tient en entier : a 12 px et en chiffres tabulaires, "10:30"
demande 33 px, la gouttiere en donne 58 moins 8 de marge. */
.calendrier .gouttiere .heure {
position: absolute;
right: var(--e2);
transform: translateY(-50%);
white-space: nowrap;
font-size: var(--taille-pastille);
line-height: var(--ligne-pastille);
font-weight: 500;
letter-spacing: var(--interlettrage-pastille);
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%); }
/* La premiere ouvre la journee : centree sur le bord, sa moitie haute passait
sous les titres des jours. Elle se pose donc juste en dessous. */
.calendrier .gouttiere .heure.premiere { transform: none; }
.colonne-jour {
position: relative;
border-left: var(--filet) 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 calc(-1 * var(--filet-marque)) 0 var(--metal);
}
/* Sur la surface appuyee, l'encre inactive tomberait a 4,45 pour 1 : le jour
ferme s'ecrit en encre douce, sa hachure dit le reste. */
.calendrier .titre-jour.ferme { color: var(--encre-douce); font-weight: 400; }
/* 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);
}
/* Une colonne ou l'on peut placer un patient se clique la ou le moment est
libre (L09-12) : un repere suit la souris, a la hauteur d'un pas de grille,
avec l'heure qu'un clic donnerait. */
.colonne-jour[data-placer] { cursor: pointer; }
.creneau-survol {
position: absolute;
left: 0;
right: 0;
padding: 0 var(--e1);
background: var(--surface-choisie);
color: var(--encre-moyenne);
font-size: var(--taille-pastille);
line-height: var(--ligne-pastille);
pointer-events: none;
}
.bloc-seance {
position: absolute;
left: var(--e0);
right: var(--e0);
display: block;
overflow: hidden;
padding: var(--e0) var(--e1);
border-radius: var(--rayon-commande);
border: var(--filet) solid var(--trait);
border-left: var(--filet-marque) solid var(--filet-fort);
background: var(--carte);
color: var(--encre);
font-size: var(--taille-pastille);
line-height: var(--ligne-bloc);
text-decoration: none;
transition: border-color var(--instant) var(--courbe);
}
.bloc-seance:hover { border-color: var(--encre); }
/* Avec l'espacement de texte agrandi (interligne, lettres, mots), l'heure
d'une seance de 30 minutes passait sous le bord du bloc (L08-18) : au
survol et au clavier, le bloc s'ouvre a la hauteur de ce qu'il porte, sans
jamais descendre sous sa duree (--hauteur, posee par l'horaire). */
.bloc-seance:hover, .bloc-seance:focus-within {
z-index: 2;
height: auto !important;
min-height: var(--hauteur, 0);
overflow: visible;
}
/* Le tiers payant prend le metal de sa pastille, comme partout : le vert ne
dit plus que la presence (L06-11). */
.bloc-seance.tiers-payant { background: var(--metal-voile); border-left-color: var(--metal); }
/* Une presence pointee est un fait acquis : trait plein a gauche. */
.bloc-seance.presente { border-left: var(--filet-presence) solid var(--vert); }
/* Une absence se barre, en encre douce : palie par l'opacite, elle tombait
entre 2,26 et 2,47 pour 1. */
.bloc-seance.absente { color: var(--encre-douce); text-decoration: line-through; }
/* Le nom tient sur une ligne et se coupe d'une ellipse, dans tous les blocs :
un nom long passait sur deux lignes et cachait l'heure (L04-24). */
.bloc-seance .qui { font-weight: 600; display: block; overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; }
.bloc-seance .quand { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
/* Un bloc qu'on peut deplacer : le nom est une prise (la main), l'heure un
bouton qu'on touche pour la changer. Les deux se distinguent au survol. */
.bloc-seance.deplacable .qui {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
text-decoration: none;
cursor: grab;
/* Au doigt, glisser fait defiler la grille : le deplacement ne s'arme
qu'apres un appui long (script de horaire.html, L04-7). L'appui long
n'ouvre pas le menu du lien sur iPhone. */
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.bloc-seance.deplacable .quand {
position: relative;
z-index: 1;
display: block;
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: var(--encre-douce);
font-variant-numeric: tabular-nums;
text-align: left;
cursor: text;
}
.bloc-seance.deplacable .quand:hover { color: var(--encre); text-decoration: underline; }
/* Le nom ouvre la fiche depuis tout le bloc, et non depuis sa seule ligne de
13 px (L08-17) : l'heure et la croix restent au-dessus, cliquables. */
.bloc-seance.deplacable a.qui::after { content: ""; position: absolute; inset: 0; }
.bloc-seance:has(.menu-bloc) .qui { padding-right: var(--e6); }
.bloc-seance.deplacable .quand[hidden] { display: none; }
.bloc-seance.deplacable .qui:focus-visible,
.bloc-seance.deplacable .quand:focus-visible { outline: var(--filet-marque) solid var(--encre); outline-offset: var(--filet); }
/* Pendant le geste : le bloc d'origine s'efface, son double suit la main au
pas de cinq minutes et annonce le jour et l'heure ou il tombera. */
.bloc-seance.en-deplacement,
.bloc-seance.parti { opacity: 0.35; }
.bloc-seance.fantome {
z-index: 1;
border-color: var(--encre);
box-shadow: var(--ombre-glisse);
pointer-events: none;
}
.bloc-seance.fantome.refuse {
border-color: var(--rouge);
background: var(--rouge-clair);
}
.bloc-seance.fantome .quand { white-space: nowrap; }
body.glisse-en-cours,
body.glisse-en-cours * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* L'heure qu'on change sur place : le bloc s'ouvre a la hauteur du champ. */
.bloc-seance.en-edition {
z-index: 1;
height: auto !important;
overflow: visible;
border-color: var(--encre);
box-shadow: var(--ombre-glisse);
}
.bloc-seance .heure-sur-place {
width: 100%;
height: auto;
margin-top: var(--e0);
padding: var(--e0) var(--e1);
font-size: var(--taille-secondaire);
}
/* 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. C'est le seul dessin d'un champ de fichier : le
bouton gris « Choisir un fichier » du navigateur n'apparait nulle part. Le
script de layout.html y ecrit le nom du fichier choisi et accepte le
fichier glisse dessus. */
.zone-depot {
position: relative;
display: flex;
flex-direction: column;
gap: var(--e1);
padding: var(--e6) var(--e5);
border: var(--filet) 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: var(--taille-secondaire); line-height: var(--ligne-serree);
margin-top: var(--e1); font-weight: 600; overflow-wrap: anywhere; }
.zone-depot .nom-fichier:empty { display: none; }
/* Le champ reste atteignable au clavier (Tab, puis Espace ouvre le choix) :
cache a l'oeil, pas au clavier ni au lecteur d'ecran. */
.zone-depot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
clip: rect(0 0 0 0); }
.zone-depot:focus-within { outline: var(--filet-marque) solid var(--encre); outline-offset: var(--filet-marque); }
/* La variante d'une ligne, dans un tableau ou un formulaire en rangee :
la hauteur d'un bouton, le nom du fichier a cote. */
.zone-depot.compacte {
flex-direction: row;
align-items: center;
gap: var(--e2);
height: auto;
min-height: var(--hauteur-commande);
padding: 0 var(--e3);
text-align: left;
font-size: var(--taille-commande);
line-height: var(--ligne-commande);
font-weight: 500;
}
.zone-depot.compacte .titre-depot { white-space: nowrap; }
.zone-depot.compacte .nom-fichier { margin-top: 0; }
/* Un bouton et sa variante en lien discret (« Exporter en tableur », « ou en
CSV ») restent ensemble quand la rangee passe a la ligne. */
.avec-variante { display: inline-flex; align-items: center; gap: var(--e2); }
/* Ce que la reprise prend et ce qu'elle laisse : deux colonnes courtes. */
.repris-ou-pas p { margin: 0 0 var(--e2); }
/* 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); }
/* 15 octobre 2026 (L05-10, L05-28, L05-33). Le resume des champs lus, en tete
du tableau : une colonne perdue se voit d'un coup. */
.resume-champs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4);
font-size: var(--taille-secondaire); line-height: var(--ligne-serree);
max-width: none; }
.resume-champs .surtitre { flex: 1 1 100%; }
/* « Modifier » : chaque champ garde la largeur de ce qu'il porte (« vendredi »,
« 15:30 », « 30 »), au lieu d'etre coupe par une colonne etroite. */
.table-reprise td.jour .en-saisie { min-width: 8.5rem; }
.table-reprise td.heure .en-saisie { min-width: 5rem; }
.table-reprise td.duree .en-saisie { min-width: 4.5rem; }
.table-reprise td.code .en-saisie { min-width: 5.5rem; }
.table-reprise td.duree { white-space: nowrap; }
/* D'ou vient la ligne et ses alertes prennent toute la largeur, sous elle : une
colonne etroite en faisait des lignes de 200 px de haut. */
.provenance { display: flex; flex-wrap: wrap; gap: 0 var(--e4); margin: 0 0 var(--e1); max-width: none;
font-size: var(--taille-secondaire); line-height: var(--ligne-serree); }
ul.alertes-reprise { list-style: none; margin: 0 0 var(--e1); padding: 0;
font-size: var(--taille-secondaire); line-height: var(--ligne-serree); }
/* « Tout voir » colle a sa ligne : un seul filet sous les deux. */
.table-reprise tr.ligne-modifiable td { border-bottom: 0; }
.table-reprise tr.tout-voir td { padding-top: 0; }
.table-reprise tr.incertaine + tr.tout-voir { background: var(--ambre-clair); }
.table-reprise tr.ligne-modifiable.ouverte + tr.tout-voir { background: var(--surface-choisie); }
.table-reprise tr.tout-voir summary { font-size: var(--taille-secondaire); color: var(--encre-douce); }
.champs-reprise { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: var(--e3) var(--e4); padding: var(--e3) 0; }
.champs-reprise .champ { margin-bottom: 0; }
.champs-reprise .champ > span { display: block; margin-bottom: var(--e1); }
.champs-reprise .large, .champs-reprise .choix-reprise { grid-column: 1 / -1; }
.champs-reprise .choix-reprise .case { margin-bottom: var(--e1); }
.titre-mobile { display: none; }
@media (max-width: 79.9375em) {
/* Sous 1 280 px, une carte par personne : neuf champs a saisir ne tiennent
pas sur une ligne de tableau sans faire defiler la page de cote. Chaque
valeur sous son libelle ; les champs vont a la ligne quand la place
manque (un par ligne ou presque sur telephone). */
.table-reprise thead { display: none; }
.table-reprise, .table-reprise tbody { display: block; }
.table-reprise tr.ligne-modifiable { display: flex; flex-wrap: wrap; align-items: flex-start;
gap: var(--e2) var(--e4); padding: var(--e3) 0 0; }
.table-reprise tr.ligne-modifiable td { display: block; padding: 0; }
.table-reprise tr.ligne-modifiable td.reprendre { flex: 0 0 auto; padding-top: var(--e4); }
.table-reprise tr.ligne-modifiable td.nom,
.table-reprise tr.ligne-modifiable td.prenom { flex: 1 1 11rem; }
.table-reprise tr.ligne-modifiable td.jour { flex: 1 1 8.5rem; }
.table-reprise tr.ligne-modifiable td.heure,
.table-reprise tr.ligne-modifiable td.duree { flex: 1 1 5rem; }
.table-reprise tr.ligne-modifiable td.code { flex: 1 1 5.5rem; }
.table-reprise tr.ligne-modifiable td.tp { flex: 0 0 auto; }
.table-reprise tr.ligne-modifiable td.actions { flex: 0 0 auto; align-self: flex-end; }
.table-reprise tr.tout-voir { display: block; border-bottom: var(--filet) solid var(--trait); }
.table-reprise tr.tout-voir td { display: block; padding: var(--e2) 0 var(--e3); }
.table-reprise .titre-mobile { display: block; font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre); color: var(--encre-douce); }
.table-reprise td.jour .en-saisie, .table-reprise td.heure .en-saisie,
.table-reprise td.duree .en-saisie, .table-reprise td.code .en-saisie { min-width: 0; }
}
@media (max-width: 40em) {
.table-lu thead { display: none; }
.table-lu, .table-lu tbody, .table-lu tr { display: block; }
.table-lu tr { padding: var(--e3) 0; border-bottom: var(--filet) solid var(--trait); }
.table-lu td { display: inline-block; padding: 0 var(--e3) 0 0; border: 0; text-align: left; }
.table-lu td:first-child, .table-lu td.actions { display: block; padding: 0 0 var(--e1); }
.table-lu .titre-mobile { display: inline; color: var(--encre-douce); }
}
/* « A suivre » (L06-7) : ce qui demande un geste, sur l'accueil et dans
Accords. Une rangee par alerte : la pastille dit l'etat, le texte est en
encre (il etait en ambre sur 150 caracteres), le nom en 600, la fleche dit
que la rangee mene ou l'on agit. Un filet ambre a gauche, comme un message. */
.a-suivre { border-left: var(--filet-marque) solid var(--ambre); }
.liste-a-suivre { list-style: none; margin: 0; padding: 0; }
.liste-a-suivre > li {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr) var(--e4);
gap: var(--e3);
align-items: baseline;
padding: var(--e2) 0;
border-top: var(--filet) solid var(--trait);
}
.liste-a-suivre > li:first-child { border-top: 0; padding-top: 0; }
.liste-a-suivre > li:last-child { padding-bottom: 0; }
.liste-a-suivre .pastille { justify-self: start; }
.liste-a-suivre > li > :nth-child(2) { max-width: var(--mesure); }
.a-suivre-fleche { color: var(--encre-douce); text-align: right; }
.liste-a-suivre > li.ligne-lien:hover { text-decoration: none; }
.liste-a-suivre > li.ligne-lien:hover > :nth-child(2) { text-decoration: underline; text-underline-offset: 0.1875rem; }
.liste-a-suivre > li.ligne-lien:hover .a-suivre-fleche { color: var(--encre); }
.a-suivre .discret { margin: var(--e3) 0 0; }
@media (max-width: 40em) {
/* Sur telephone, la pastille passe au-dessus du texte. */
.liste-a-suivre > li { grid-template-columns: minmax(0, 1fr) var(--e4); row-gap: var(--e1); }
.liste-a-suivre .pastille { grid-column: 1 / -1; }
.liste-a-suivre > li > span:empty:first-child { display: none; }
}
/* Le triangle de repli : une seule famille, dessinee ici, pour tout ce qui se
deplie (note de seance, carte depliable, carre de materiel, « Ajouter un
intervenant », question de l'aide). Celui du navigateur ne se colore pas,
change d'un systeme a l'autre et cotoyait le notre sur le meme ecran. Un
titre dessine en bouton (« Modifier », « Ajouter un logopède ») n'en porte
pas : c'est un bouton. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:not(.bouton)::before {
content: "";
flex: none;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-right: var(--e2);
border-left: 0.3125rem solid var(--encre-douce);
border-top: var(--e1) solid transparent;
border-bottom: var(--e1) solid transparent;
transition: transform var(--etat) var(--courbe-sortie);
}
details[open] > summary:not(.bouton)::before { transform: rotate(90deg); }
/* Dans un titre en rangee, l'ecart de la rangee suffit. */
details.depliable > summary::before,
.note > summary::before,
.carre-materiel > summary::before { margin-right: 0; align-self: center; }
/* Une carte qu'on deplie : son titre et ce qu'elle contient sur une ligne,
le triangle devant. Le titre ne passe jamais sous le triangle (a 390 px,
le triangle restait seul sur sa ligne). */
details.depliable > summary {
display: flex;
align-items: baseline;
flex-wrap: nowrap;
gap: var(--e1) var(--e3);
}
details.depliable > summary h2 { margin: 0; min-width: 0; }
details.depliable[open] > summary { margin-bottom: var(--e3); }
details.depliable > summary:hover h2 { color: var(--encre); }
details.depliable > summary:focus-visible { outline: var(--filet-marque) solid var(--encre); outline-offset: var(--e1); }
/* Les autorisations d'un compte, une par ligne. */
.liste-permissions { margin: 0; padding: 0; list-style: none; }
.liste-permissions li + li { margin-top: var(--e0); }
/* Sous les cases d'un compte : enregistrer ses autorisations, puis ce qui
touche au compte lui-meme. Les boutons passent a la ligne plutot que de
pousser la carte. */
.actions-compte {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-top: var(--e3);
}
tr.reglage-compte:hover td { background: transparent; }
/* Le materiel du cabinet : un carre par categorie, replie, cote a cote tant
que la place le permet. Chaque carre demande au moins 15 caracteres de
large, jamais plus que la carte. */
.carres-materiel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(15em, 100%), 1fr));
gap: var(--e3);
align-items: start;
margin-top: var(--e4);
}
.carre-materiel {
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
background: var(--carte);
min-width: 0;
}
.carre-materiel > summary {
display: flex;
align-items: center;
gap: var(--e2);
padding: var(--e2) var(--e2) var(--e2) var(--e3);
}
.carre-materiel > summary:hover { background: var(--surface-survol); }
.carre-materiel[open] > summary { border-bottom: var(--filet) solid var(--trait); }
.carre-titre {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
font-size: var(--taille-commande);
line-height: var(--ligne-commande);
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
.carre-compte {
flex: none;
font-size: var(--taille-secondaire);
line-height: var(--ligne-serree);
color: var(--encre-douce);
font-variant-numeric: tabular-nums;
}
.bouton.ajout-dans-carre { flex: none; width: var(--hauteur-commande-petite);
height: var(--hauteur-commande-petite); padding: 0; }
.ajout-carre {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
padding: var(--e3);
border-bottom: var(--filet) solid var(--trait);
}
.ajout-carre[hidden] { display: none; }
.ajout-carre input[type=text] { flex: 1 1 10em; min-width: 0; }
.liste-materiel { margin: 0; padding: var(--e1) 0; list-style: none; }
.liste-materiel li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e2);
padding: var(--e1) var(--e2) var(--e1) var(--e3);
}
.liste-materiel li:hover { background: var(--surface-survol); }
.liste-materiel li.faible { color: var(--encre-douce); }
.liste-materiel .materiel-nom { min-width: 0; overflow-wrap: break-word; }
.liste-materiel .bouton { height: var(--hauteur-commande-petite); }
.liste-materiel .bouton.corbeille { width: var(--hauteur-commande-petite); }
/* Deposer un fichier dans un carre (18 octobre 2026) : sous sa liste, a
l'aplomb des noms, a la hauteur d'un petit bouton. */
.depot-carre { padding: var(--e1) var(--e2) var(--e3) var(--e3); }
.depot-carre .zone-depot.compacte { min-height: var(--hauteur-commande-petite); }
/* Une ligne du materiel qui est un fichier (18 octobre 2026) : son dessin a
l'encre douce, puis son nom en lien pointille ; un clic l'ouvre. Le dessin
se cale sur la premiere ligne d'un nom qui passe a la ligne (sa boite a la
hauteur d'une ligne), et le pointille suit chaque ligne. */
a.fichier-materiel { display: inline-flex; align-items: flex-start; gap: var(--e2); max-width: 100%;
color: inherit; text-decoration: none; }
a.fichier-materiel .icone { flex: none; width: 0.875rem; height: var(--ligne-courant);
color: var(--encre-douce); }
a.fichier-materiel span { min-width: 0; overflow-wrap: anywhere;
text-decoration: underline dotted var(--filet-champ);
text-decoration-thickness: var(--filet); text-underline-offset: var(--e1); }
a.fichier-materiel:hover .icone { color: var(--encre); }
a.fichier-materiel:hover span { text-decoration-style: solid; text-decoration-color: var(--encre); }
details.repli > summary { 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; }
/* La barre d'une periode (horaire de la semaine et du mois, L06-4) : a
gauche « ← titre → » et le retour a aujourd'hui, a droite la vue et les
autres pages. Trop etroite, elle passe a la ligne entre ses deux groupes ;
le groupe passe a la ligne commence alors a gauche (space-between). Le
compteur se lit sous le titre. */
.barre-periode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: var(--e3) var(--e6); }
.barre-periode .periode { flex-wrap: nowrap; min-width: 0; }
.barre-periode .navigation-mois { flex-wrap: nowrap; min-width: 0; }
.barre-periode .navigation-mois > .bouton { flex: none; }
/* Le titre se plie sur deux lignes entre ses fleches plutot que de laisser
« → » seule a la ligne (320 px). */
.barre-periode .navigation-mois h2 { white-space: normal; min-width: 0; }
.barre-periode-actions { gap: var(--e2) var(--e4); }
.compteur-periode { margin: var(--e2) 0 var(--e4); }
/* Controle segmente : des choix exclusifs cote a cote (la vue de l'horaire,
la note d'un avis). Le choix en cours est noir, comme un bouton actif ; les
boutons se touchent, un seul filet entre eux. */
.segments { display: inline-flex; flex-wrap: nowrap; }
.segments > .bouton { border-radius: 0; }
.segments > .bouton + .bouton { margin-left: calc(-1 * var(--filet)); }
.segments > .bouton:first-child { border-top-left-radius: var(--rayon-commande);
border-bottom-left-radius: var(--rayon-commande); }
.segments > .bouton:last-child { border-top-right-radius: var(--rayon-commande);
border-bottom-right-radius: var(--rayon-commande); }
.segments > .bouton:hover, .segments > .bouton:focus-visible { position: relative; z-index: 1; }
/* Des boutons radio dessines en segments (la note d'un avis) : le bouton radio
reste dessous, pour le clavier (fleches) et le lecteur d'ecran. */
.choix-segments > label.bouton { position: relative; width: var(--hauteur-commande); padding: 0; margin-bottom: 0; }
.choix-segments > label.bouton input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-segments > label.bouton:has(input:checked) { background: var(--surface-encre);
border-color: var(--surface-encre); color: var(--sur-encre); }
.choix-segments > label.bouton:has(input:focus-visible) { outline: var(--filet-marque) solid var(--encre);
outline-offset: var(--filet-marque); z-index: 1; }
/* Navigation de periode : « ← titre → ». Seules les fleches, qui portent
toutes un title (« Semaine précédente »...), grossissent : en 16 px, « Vue
du mois » et « Rappels » criaient plus fort que tous les autres boutons.
Le titre de la periode est l'information de l'ecran : en encre, en 17 px,
en casse normale, et non plus en petites capitales grises. */
.navigation-mois { align-items: center; gap: var(--e3); }
.navigation-mois > .bouton[title],
.navigation-mois .periode > .bouton[title] { width: var(--hauteur-commande); padding: 0;
font-size: var(--taille-intertitre); line-height: var(--ligne-courant);
font-weight: 600; }
.navigation-mois h2 {
white-space: nowrap;
margin: 0;
font-size: var(--taille-intertitre);
line-height: var(--ligne-courant);
font-weight: 600;
text-transform: none;
letter-spacing: inherit;
font-feature-settings: normal;
color: var(--encre);
}
/* 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.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); }
/* La colonne des actions n'est pas une colonne de chiffres : la classe
« nombre » y imposait `white-space: nowrap`, donc 239 px de largeur
minimale, et poussait le tableau hors de sa carte. Et un champ de saisie
sans largeur imposee prend la place de son contenu, pas celle de sa
colonne. */
.ligne-modifiable td.actions { text-align: right; white-space: normal; }
.ligne-modifiable td.actions .bouton { transition: opacity var(--instant) var(--courbe); }
.ligne-modifiable .en-saisie { display: none; width: 100%; min-width: 0; box-sizing: border-box; }
.ligne-modifiable .en-saisie.parts { display: none; }
.ligne-modifiable.ouverte .en-saisie.parts {
display: flex;
gap: var(--e2);
justify-content: flex-end;
margin-top: var(--e2);
}
.ligne-modifiable .parts label {
display: flex;
align-items: center;
gap: var(--e1);
font-size: var(--taille-secondaire);
color: var(--encre-douce);
margin: 0;
}
/* 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; }
/* Le lieu et le logopede d'une prochaine seance : la liste et « Changer »
sur une ligne, au debut de la colonne ; « Changer » passe dessous quand la
place manque (sinon le tableau deborde de 900 a 1 200 px). */
td .rangee.choix-de-seance { justify-content: flex-start; flex-wrap: wrap; }
table input[type=text], table input[type=date], table select { width: auto; }
.en-ordre { color: var(--vert); font-size: var(--taille-secondaire); white-space: nowrap; }
/* Une seule legende, pour l'horaire comme pour les graphiques : une rangee
de carres de 10 px suivis de leur libelle, un ecart de 8 px entre le carre
et son libelle, de 16 px entre deux entrees. Les deux regles qui
s'additionnaient (11 puis 13 px, marge annulee) n'en font plus qu'une. */
.legende {
margin: var(--e3) 0;
font-size: var(--taille-secondaire);
line-height: var(--ligne-serree);
color: var(--encre-douce);
}
.legende > span:not(.pastille-serie) {
display: inline-flex;
align-items: center;
gap: var(--e2);
margin-right: var(--e4);
}
.legende > span:not(.pastille-serie)::before {
content: "";
flex: none;
width: 0.625rem;
height: 0.625rem;
border-radius: var(--rayon-commande);
}
.legende .tp::before { background: var(--metal-voile); border: var(--filet) solid var(--metal-clair); }
.legende .ordinaire::before { background: var(--carte); border: var(--filet) solid var(--filet-fort); }
.legende .libre::before { background: var(--carte); border: var(--filet) solid var(--trait); }
.legende .pointee::before { background: var(--carte); border: var(--filet) solid var(--trait);
border-left: var(--filet-presence) solid var(--vert); }
.legende .barree { text-decoration: line-through; }
.legende .groupe::before { background: var(--surface-choisie); border: var(--filet) solid var(--trait);
border-left: var(--filet-presence) double var(--encre-moyenne); }
.legende .barree::before { background: var(--carte); border: var(--filet) solid var(--filet-fort); }
.legende .coche { color: var(--vert); font-weight: 600; }
/* Une seance collective (L14-4) : un seul bloc pour ses membres, au double
filet, qui mene a sa carte ; la carte liste ses membres. */
.bloc-seance.groupe { background: var(--surface-choisie); border-left: var(--filet-presence) double var(--encre-moyenne); }
.groupe-seance + .groupe-seance { border-top: var(--filet) solid var(--trait); margin-top: var(--e4); padding-top: var(--e4); }
.groupe-seance h3 { margin-top: 0; }
.membres-groupe { list-style: none; margin: var(--e2) 0; padding: 0; display: grid; gap: var(--e1); }
.membres-groupe li { display: flex; align-items: center; gap: var(--e2); }
/* Ce que la couleur dit d'une seance se lit aussi en mots (L08-15) : « TP »
pour le tiers payant, les initiales du logopede quand tout le cabinet
s'affiche, une coche devant l'heure d'une presence pointee. */
.marque-tp, .marque-logo { margin-left: var(--e1); font-weight: 600; letter-spacing: var(--interlettrage-pastille); }
.marque-tp { color: var(--metal-texte); }
.marque-logo { color: var(--encre-moyenne); }
.legende .marque-tp, .legende .marque-logo { margin-left: 0; }
.bloc-seance.presente .quand::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; color: var(--vert); font-weight: 600; }
@media (max-width: 56.25em) { .grille.deux { grid-template-columns: 1fr; } }
/* Les factures du mois : leur tableau demande 765 px ; la colonne de droite
passe dessous tant que l'ecran ne les laisse pas cote a cote (L07-18). */
@media (max-width: 77.5em) { .grille.deux.liste-large { grid-template-columns: minmax(0, 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(13.75rem, 0.8fr);
gap: var(--e7);
align-items: start;
background: var(--carte);
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
padding: var(--e7);
margin-bottom: var(--e4);
}
/* La note occupe toute la largeur sous les deux colonnes. Quand l'editeur sert
une autre ligne de la journee (L09-5), sa place reste vide et se retire. */
.patient-note { grid-column: 1 / -1; border-top: var(--filet) solid var(--trait); padding-top: var(--e5); }
.patient-note:not(:has(.note)) { display: none; }
.patient-identite { min-width: 0; }
.patient-details { border-left: var(--filet) solid var(--trait); padding-left: var(--e6); }
.repere { width: 100%; }
.repere td { padding: var(--e1) 0; border: 0; }
/* Le libelle est l'en-tete de sa ligne (L08-22) : il garde l'allure d'un
libelle, pas celle d'un en-tete de colonne. */
.repere th { padding: var(--e1) 0; border: 0; color: var(--encre-douce); width: 45%;
font-size: inherit; line-height: inherit; font-weight: 400; text-transform: none;
letter-spacing: inherit; white-space: normal; }
.repere td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 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; }
/* Un mot ne se coupe jamais au milieu : chaque colonne garde au moins la
largeur de son plus long mot. L'ancienne regle (anywhere) declarait toute
cellule compressible jusqu'a une lettre, et le tableau en profitait pour
ecraser les colonnes courtes : « secretaria / t ». La cesure ne vaut pas
mieux ici : elle rend aussi chaque mot compressible, jusqu'a la syllabe, et
le tableau coupait « secreta-riat » alors qu'il avait la place. Un tableau
plus large que sa carte defile dans la carte, jamais la page. */
table td, table th { overflow-wrap: break-word; }
/* Un texte libre (un libelle colle depuis un tableur, sans espace) cede
avant la colonne des montants : lui seul peut se couper n'importe ou. */
table td.texte-libre { overflow-wrap: anywhere; }
/* 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 var(--filet-marque) 0 0 var(--metal); }
/* Le nom du patient a la taille d'un titre de page, partout (il etait en 28
px sur l'accueil et en 26 en titre de fiche). */
.nom-patient {
font-family: var(--police-titre);
font-size: var(--taille-titre);
line-height: var(--ligne-titre);
font-weight: 400;
letter-spacing: var(--interlettrage-titre);
margin: var(--e2) 0 var(--e1);
/* Un titre h2 a l'accueil (L08-23) : il ne prend rien du surtitre. */
text-transform: none;
font-feature-settings: normal;
color: var(--encre);
}
.creneau { color: var(--encre-douce); font-size: var(--taille-courant); }
/* 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: var(--taille-affichage);
line-height: var(--ligne-affichage);
font-weight: 400;
letter-spacing: var(--interlettrage-titre);
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: var(--taille-intertitre); line-height: var(--ligne-courant);
font-weight: 600; letter-spacing: normal; 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.
Trois hauteurs, pas une de plus : 40 px (bouton, champ, liste, date, heure
cote a cote), 32 px pour le petit bouton d'une ligne de tableau, 48 px pour
le grand bouton seul sur sa ligne (Present, Absent, Enregistrer la fiche). */
.bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e2);
height: var(--hauteur-commande);
padding: 0 var(--e5);
border-radius: var(--rayon-commande);
border: var(--filet) solid var(--filet-champ);
background: var(--carte);
color: var(--encre);
font-family: inherit;
font-size: var(--taille-commande);
line-height: var(--ligne-commande);
font-weight: 500;
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: var(--sur-encre);
font-weight: 600;
}
.bouton.principal:hover { background: var(--principal-survol); border-color: var(--principal-survol); }
.bouton.present { background: var(--vert); border-color: var(--vert); color: var(--sur-encre); font-weight: 600; }
.bouton.present:hover { background: var(--vert-survol); border-color: var(--vert-survol); }
.bouton.absent { background: var(--carte); border-color: var(--rouge); color: var(--rouge); }
.bouton.absent:hover { background: var(--rouge-clair); }
.bouton.grand { height: var(--hauteur-commande-grande); padding: 0 var(--e7); }
/* Le petit bouton d'une ligne (« Retirer », « Annuler », filtres) : il
gardait les 40 px du bouton ordinaire pour un texte de 12 px. */
.bouton.petit { height: var(--hauteur-commande-petite); padding: 0 var(--e3);
font-size: var(--taille-secondaire); line-height: var(--ligne-serree); }
/* Un bouton au libelle long, dans une carte etroite (« Envoyer par e-mail les
14 pas encore parties ») : il passe a la ligne et grandit, au lieu de
sortir de sa carte (L07-20). */
.bouton.long { max-width: 100%; height: auto; min-height: var(--hauteur-commande); white-space: normal;
padding-top: var(--e2); padding-bottom: var(--e2); text-align: left; justify-content: flex-start; }
/* Un bouton seul sur sa ligne, de toute la largeur (connexion, impression). */
.bouton.pleine-largeur { width: 100%; }
/* L'action qui detruit : texte rouge, bordure rouge a 3,54 pour 1 ; elle se
pose au bout de sa rangee, jamais collee au bouton principal. */
.bouton.danger { color: var(--rouge); border-color: var(--rouge-bord); }
.bouton.danger:hover { background: var(--rouge-clair); border-color: var(--rouge); }
/* La corbeille : partout ou une ligne se retire, un bouton carre, rouge, a
la hauteur des autres boutons. Son libelle est dans title et aria-label. */
.bouton.corbeille {
width: var(--hauteur-commande);
padding: 0;
color: var(--rouge);
border-color: var(--rouge-bord);
}
.bouton.corbeille:hover { background: var(--rouge-clair); border-color: var(--rouge); }
.bouton.corbeille:focus-visible { outline: var(--filet-marque) solid var(--rouge); outline-offset: var(--filet-marque); }
.bouton .icone { flex: none; display: block; }
.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: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
color: var(--encre-douce);
padding: var(--e3);
border-bottom: var(--filet) 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: var(--ligne-serree);
border-bottom: var(--filet) solid var(--trait);
vertical-align: middle;
}
tbody tr { transition: background-color var(--instant) var(--courbe); }
tbody tr:hover td { background: var(--surface-survol); }
/* Une ligne qui s'ouvre d'un clic le montre au survol (script de layout.html),
et se voit quand on l'atteint au clavier. */
tbody tr[data-lien] { cursor: pointer; }
tbody tr[data-lien]:focus-visible { outline: var(--filet-marque) solid var(--encre);
outline-offset: calc(-1 * var(--filet-marque)); }
tbody tr[data-lien]:focus-visible td { background: var(--surface-survol); }
/* Le lien que le script de layout.html pose sur le nom d'une ligne (L08-9) :
il garde l'allure de la ligne, et la ligne entiere s'eclaire quand il a le
focus. */
.lien-de-ligne { color: inherit; text-decoration: none; }
tbody tr[data-lien]:focus-within td { background: var(--surface-survol); }
/* Un message ou une partie qui recoit le focus apres un envoi ou un saut
d'ancre (L08-20) : son cadre suffit, pas d'anneau en plus. */
[data-focus-place]:focus { outline: none; }
/* Une alerte ou une carte qui mene ailleurs : meme geste qu'une ligne. */
.ligne-lien { cursor: pointer; border-radius: var(--rayon-commande); }
.ligne-lien:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
.ligne-lien:focus-visible { outline: var(--filet-marque) solid var(--encre); outline-offset: var(--filet-marque); }
.carte.carte-lien {
cursor: pointer;
transition: border-color var(--instant) var(--courbe),
background-color var(--instant) var(--courbe);
}
.carte.carte-lien:hover { border-color: var(--filet-fort); background: var(--surface-survol); }
.carte.carte-lien:hover td { background: transparent; }
.carte.carte-lien:focus-visible { outline: var(--filet-marque) solid var(--encre); outline-offset: var(--filet-marque); }
tr:last-child td { border-bottom: none; }
/* Dans une carte, le texte d'un tableau commence au bord des titres et des
paragraphes (il etait 12 px plus loin, L06-28) : le tableau deborde de la
marge de ses cellules dans celle de la carte, et le survol d'une ligne
garde son air autour du texte. */
.carte table:not(.mois-agenda):not(.disponibilites):not(.resultats):not(.exemple-tableau) {
width: calc(100% + 2 * var(--e3));
margin-left: calc(-1 * var(--e3));
margin-right: calc(-1 * var(--e3));
}
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); }
/* Un tableau « libelle : valeur » : le libelle ne se coupe pas (« Date de /
naissance » dans la fiche d'une facture, L07-14). */
.tableau-libelles td:first-child, .tableau-libelles th { white-space: nowrap; color: var(--encre-douce); }
/* L'en-tete d'une ligne « libelle : valeur » (L08-22) garde l'allure d'une
cellule ; la rangee d'en-tetes ecrite pour le lecteur d'ecran seul ne prend
aucune place. */
.en-tete-ligne { font-size: inherit; line-height: var(--ligne-serree); font-weight: 400; text-transform: none;
letter-spacing: inherit; font-feature-settings: normal; color: inherit; white-space: normal;
border-bottom: var(--filet) solid var(--trait); }
tr.en-tetes-lecteur th { padding: 0; border: 0; }
tr:last-child th.en-tete-ligne { border-bottom: none; }
/* Le tableau des chiffres d'un graphique (L08-25) : la case du coin porte le
meme filet que les en-tetes de colonne. */
.chiffres-graphique thead td { border-bottom: var(--filet) solid var(--filet-fort); }
.chiffres-graphique table { margin-top: var(--e2); }
.tableau-dense th { padding: var(--e2) var(--e3); }
/* -------------------------------------------------------------- pastilles */
/* Pastille d'etat : 20 px de haut (2 + 14 + 2 et ses filets), la hauteur
d'une ligne de texte serre, pour qu'une ligne de tableau garde ses 44 px
avec ou sans pastille (45, 46 ou 49 px auparavant). Une pastille sans
variante est neutre, comme « prévue ». */
.pastille {
display: inline-block;
padding: var(--e0) var(--e2);
border-radius: var(--rayon-rond);
border: var(--filet) solid var(--trait);
background: var(--surface-appuyee);
color: var(--encre-moyenne);
font-size: var(--taille-pastille);
line-height: var(--ligne-pastille);
font-weight: 500;
letter-spacing: var(--interlettrage-pastille);
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: var(--filet) solid var(--trait);
border-left: var(--filet-marque) 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: var(--taille-secondaire);
line-height: var(--ligne-serree);
color: var(--encre-moyenne);
margin-bottom: var(--e1);
}
/* Champ, liste, date, heure : 40 px, la hauteur du bouton, pour qu'une
rangee « Début / Durée / Ajouter » soit droite (38, 39 et 40 px
auparavant). Le texte de la liste commence au meme endroit que celui du
champ, et sa fleche est la notre, pas celle du systeme. */
input[type="text"], input[type="password"], input[type="date"], input[type="month"],
input[type="number"], input[type="time"], input[type="tel"], input[type="email"],
input[type="search"], select, textarea {
width: 100%;
/* Une liste aux options longues ne pousse pas la page (« Toutes les
natures » des depenses, 339 px a 320, L07-19). */
max-width: 100%;
height: var(--hauteur-commande);
padding: 0 var(--e3);
border: var(--filet) solid var(--filet-champ);
border-radius: var(--rayon-commande);
font-size: var(--taille-courant);
line-height: var(--ligne-serree);
font-family: inherit;
letter-spacing: inherit;
background: var(--carte);
color: var(--encre);
transition: border-color var(--instant) var(--courbe);
}
select {
-webkit-appearance: none;
appearance: none;
padding-right: var(--e8);
background: var(--carte) url("chevron.svg") no-repeat right var(--e3) center / var(--e3);
text-overflow: ellipsis;
}
select[multiple], select[size] { height: auto; padding: var(--e2) var(--e3); background-image: none; }
textarea { height: auto; padding: var(--e2) var(--e3); line-height: var(--ligne-courant); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--encre-inactive); }
/* Une date vide ne ressemble pas a une date remplie : « jj/mm/aaaa » en encre
inactive, comme une indication (L06-8). Le script de layout.html pose
l'attribut tant que le champ est vide. */
input[type="date"][data-vide] { 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: var(--filet-marque) solid var(--encre);
outline-offset: var(--filet);
border-color: var(--encre);
}
/* Un champ qu'on ne peut que lire ne ressemble pas a un champ a remplir ; un
champ refuse se designe lui-meme. */
input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled {
background-color: var(--surface-appuyee);
border-color: var(--trait);
color: var(--encre-douce);
}
[aria-invalid="true"] { border-color: var(--rouge); box-shadow: inset var(--filet-marque) 0 0 var(--rouge); }
/* Case a cocher et bouton radio : 18 px, a la couleur de l'encre, partout
(le bleu du systeme etait la seule couleur vive de certains ecrans). */
input[type="checkbox"], input[type="radio"] {
flex: none;
width: var(--cote-case);
height: var(--cote-case);
margin: 0;
accent-color: var(--encre);
vertical-align: -0.1875rem;
cursor: pointer;
}
.champ { margin-bottom: var(--e5); }
/* Des champs a la largeur de ce qu'ils recoivent : une annee, une date, une
adresse courte. Ils remplacent les largeurs ecrites dans les gabarits. */
.champ-annee { max-width: 7rem; }
.champ-date { max-width: 11.25rem; }
.champ-moyen { max-width: 17.5rem; }
/* Une grille de champs garde les memes colonnes d'un bloc a l'autre (L06-26) :
`auto-fill` garde les places vides, la ou `auto-fit` etirait trois champs
sur la largeur de cinq, et chaque bloc de la fiche avait ses propres bords
(5, 4, 3 puis 5 colonnes). Chaque champ s'etend sur trois rangees
partagees avec ses voisins (sous-grille) : libelle, champ, aide. Un
libelle sur deux lignes ne decale plus son champ, et l'aide sous un champ
ne repousse plus la ligne suivante de ses voisins. */
.colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 0 var(--e4); }
.colonnes > * { grid-row: span 3; }
/* Un champ qui prend toute la ligne de la grille (une adresse). */
.colonnes > .pleine { grid-column: 1 / -1; }
.colonnes > .champ { display: grid; grid-template-rows: subgrid; align-content: start; }
.colonnes > .champ > label { align-self: end; }
/* L'aide sous un champ : un bloc en texte secondaire (13/20), et non un
morceau de ligne a l'interligne de 24 px du formulaire. */
.champ > .discret { display: block; margin-top: var(--e1); }
/* Le message d'un champ refuse, sous lui, en rouge (L06-12). */
.champ > .a-verifier { display: block; margin-top: var(--e1); font-size: var(--taille-secondaire);
line-height: var(--ligne-serree); }
/* La zone des boutons d'un formulaire : detachee des champs au-dessus et de
la carte qui suit (« Enregistrer » collait a la carte Dossier, L06-27). */
.actions-formulaire { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
margin: var(--e6) 0 var(--e8); }
/* A la fin d'une carte, la carte garde sa propre marge, ni plus ni moins. */
.carte .actions-formulaire:last-child { margin-bottom: 0; }
/* L'action qui detruit se pose au bout de sa rangee, loin du bouton principal. */
.rangee > .bouton.danger, .actions-formulaire > .bouton.danger { margin-left: auto; }
/* La case se cale sur la premiere ligne de son libelle, meme quand il en a
deux. */
.case { display: flex; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e3); }
.case input { margin-top: calc((var(--ligne-courant) - var(--cote-case)) / 2); }
.case label { margin: 0; font-weight: 400; font-size: var(--taille-courant); line-height: var(--ligne-courant);
color: var(--encre); }
/* Section de formulaire : une seule facon de la dessiner. Seul, le fieldset
EST une carte (meme filet, meme marge interieure de 24 px) et sa legende
s'ecrit dedans, en surtitre, comme le h2 d'une carte : elle ne coupe plus
le filet. Dans une carte, il n'y a pas de boite dans la boite : le
fieldset perd cadre et marges, et deux sections se separent d'un filet.
`min-width: 0` : un fieldset prend sinon la largeur de son contenu le plus
large et pousse toute la page de cote sur telephone. */
fieldset {
min-width: 0;
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
padding: var(--marge-carte);
margin: 0 0 var(--e4);
background: var(--carte);
/* Un fieldset s'elargit par defaut jusqu'a son plus long contenu : une
option de liste plus longue en neerlandais faisait deborder la page a
390 px (L03-38). */
min-width: 0;
}
/* Dans un cadre, un bouton long passe a la ligne plutot que de faire
deborder la page sur telephone (« Controleren op MyCareNet (portaal
Member Data) », L03-38) ; sur un grand ecran, rien ne change. */
fieldset .rangee .bouton {
white-space: normal;
height: auto;
min-height: var(--hauteur-commande);
max-width: 100%;
padding-top: var(--e2);
padding-bottom: var(--e2);
text-align: center;
}
fieldset > legend {
float: left;
width: 100%;
padding: 0;
margin: 0 0 var(--e3);
font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
color: var(--encre-douce);
}
fieldset > legend + * { clear: both; }
fieldset > :last-child { margin-bottom: 0; }
.carte fieldset:not(.materiel-groupe) { border: 0; padding: 0; margin: 0 0 var(--e6); background: none; }
.carte fieldset:not(.materiel-groupe):last-child { margin-bottom: 0; }
.carte fieldset:not(.materiel-groupe) + fieldset {
padding-top: var(--e6);
border-top: var(--filet) solid var(--trait);
}
/* ---------------------------------------------------------------- connexion */
.page-connexion {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--e5);
}
.boite-connexion { width: 100%; max-width: 23.75rem; }
/* La marque du logiciel au-dessus du nom du cabinet : le mot LeLogo, en
Garamond comme la marque de l'en-tete, en metal qui ecrit (6,18 pour 1). */
.marque-logiciel {
margin: 0;
font-family: var(--police-titre);
font-size: var(--taille-intertitre);
line-height: var(--ligne-courant);
letter-spacing: var(--interlettrage-titre);
color: var(--metal-texte);
}
/* Comptes en ligne (lot v2-12) : inscription, connexion par e-mail, choix du
cabinet, mot de passe oublie, invitation. La boite de la connexion ; son
bouton principal en prend toute la largeur, les liens se rangent dessous. */
.boite-connexion .bouton.principal.grand { width: 100%; }
.liens-connexion {
list-style: none;
margin: var(--e5) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--e2);
font-size: var(--taille-secondaire);
line-height: var(--ligne-serree);
}
.carte .liens-connexion { margin: var(--e3) 0 var(--e4); }
.choix-cabinets { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; gap: var(--e3); }
.bouton.choix-cabinet {
width: 100%;
height: auto;
min-height: var(--hauteur-commande-grande);
padding: var(--e3) var(--e5);
flex-direction: column;
align-items: flex-start;
gap: var(--e1);
text-align: left;
white-space: normal;
}
.nom-du-choix { font-weight: 600; }
.role-du-choix { font-weight: 400; font-size: var(--taille-secondaire); line-height: var(--ligne-serree); }
/* Appareils connectes et invitations en attente : une ligne par appareil ou
par adresse, l'action a droite (dessous sur un telephone). */
.liste-appareils, .liste-invitations { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.liste-appareils li, .liste-invitations li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e3);
padding: var(--e3) 0;
border-bottom: var(--filet) solid var(--trait);
}
.liste-appareils li:last-child, .liste-invitations li:last-child { border-bottom: 0; }
.appareil-infos { flex: 1 1 16rem; min-width: 0; }
.appareil-infos p { margin: 0; overflow-wrap: anywhere; }
.appareil-nom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
/* Le lien d'un rappel (lot v2-13) : la page sans compte ou le patient
confirme ou annule. Le jour et l'heure en grand, les boutons l'un sous
l'autre, de toute la largeur, faciles a toucher sur un telephone. */
.rdv-public-quand {
margin: 0 0 var(--e4);
font-family: var(--police-titre);
font-size: var(--taille-intertitre);
line-height: var(--ligne-courant);
}
.rdv-public-choix { display: grid; gap: var(--e3); margin: var(--e5) 0 var(--e4); }
.rdv-public-choix .bouton.grand { width: 100%; }
/* Les reponses aux rappels, a l'accueil et dans l'horaire ; le champ de
l'essai d'envoi (option avancee). */
.reponses-rappels ul { margin: var(--e2) 0 var(--e3); padding-left: var(--e5); }
/* Une seance confirmee par le patient : une coche en haut du bloc, a gauche
de la croix, visible meme sur un bloc d'une demi-heure. */
.bloc-seance .marque-confirme { position: absolute; top: var(--filet); right: var(--e5); margin: 0; }
.champ-essai { max-width: 17.5rem; }
/* ----------------------------------------------------- note de seance */
/* Le commentaire et le materiel s'ecrivent la ou la seance se pointe. Le bloc
est replie par defaut : son en-tete dit ce qui est note, un clic le deplie. */
.note {
border: var(--filet) solid var(--trait);
border-radius: var(--rayon);
background: var(--carte);
}
.note > summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--e1) var(--e3);
padding: var(--e3) var(--e4);
}
.note > summary:hover { background: var(--surface-survol); }
.note-titre {
font-size: var(--taille-surtitre);
line-height: var(--ligne-surtitre);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--interlettrage-capitales);
font-feature-settings: "case" 1;
color: var(--encre-douce);
}
.note-etat { font-size: var(--taille-secondaire); line-height: var(--ligne-serree); color: var(--encre-moyenne); }
/* « rien de noté » ne porte plus la classe `vide` : celle-ci est l'etat vide
des listes, avec 64 px de marge en haut et en bas, et le bouton replie de la
note montait a 176 px de haut pour une ligne de texte (constat de FastSolve,
22/09/2026 : « pas besoin d'autant d'espace »). */
.note-etat.rien { color: var(--encre-inactive); }
.note-formulaire, .note-lecture {
padding: var(--e2) var(--e4) var(--e5);
border-top: var(--filet) 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(13.125rem, 1fr));
gap: var(--e3);
}
/* Un groupe est un aplat, sans filet : dans la note ouverte, la carte, la
note et chaque groupe faisaient trois cadres emboites (L06-38). */
.materiel-groupe {
margin: 0;
padding: var(--e4) var(--e4) var(--e3);
border: 0;
background: var(--fond);
}
/* Le titre est DANS le bloc, pose sur son fond : ni l'etiquette que le
navigateur accroche en travers du filet du haut, moitie dedans moitie
dehors, ni une bande rapportee d'une autre couleur qui ferait du titre une
piece collee dessus. Un seul bloc, une seule couleur, le titre en haut.
`float` est la seule facon de faire d'un