/* LE THÈME DU TABLEAU DE BORD (04/11/2026, phase 2) : les couleurs de mySilae, dans le verre du témoin.
   Une seule feuille, que chaque page charge (`<link rel="stylesheet" href="/theme.css">`) : les jetons,
   le fond, la barre d'icônes, le cadre de verre, les cases. Ce qui n'est qu'à une page reste dans la page.

   La palette v3.1, relevée sur une vraie capture de mySilae (docs/captures/tutoriel-silae/
   01-salaries-1-ecran-ouvert.png) : bleu ardoise #396178 (son bandeau, ses icônes), corail #D8583A (son
   logo), beige #ECE9DA (son plan de travail), ruban #F5F7FC, filets #D7E0E4 et #B3C2CC.
   - Sombre d'abord : un verre givré sur presque noir teinté d'ardoise, des lueurs ardoise et UNE lueur
     corail très faible, dessinées en code ; l'arête claire d'un pixel en haut, jamais d'ombre noire.
     L'accent est le beige de mySilae.
   - Clair au même rang : le beige en fond, le verre blanc, l'accent en encre ardoise.
   - Le corail reste rare (une lueur), jamais un bouton ni une pastille : il se confondrait avec le
     rouge « à corriger ». Ni le logo de Silae, ni son nom en marque. Les couleurs d'état sont à part,
     franches : vert sûr et fait, ambre à vérifier, rouge à corriger, gris une question.
   Les anciens noms (--bg, --surface, --ink…) restent : tout le détail d'un mail les lit. --surface reste
   OPAQUE : posé en texte sur l'accent, il le contraste dans les deux thèmes. */

/* Le sombre éclairci le 05/11/2026 au soir (ma demande : « trop sombre […] éclaire-le un petit peu, surtout la
   partie mail ») : fond, verre, cases, cellules et surfaces d'un cran plus clairs, filets un peu plus nets ; mêmes
   teintes d'ardoise, même disposition. Avant : fond #0B1217, verre rgba(16,26,33,.58), case blanc à 4,5 %. Sur ces cases plus claires,
   le texte secondaire et les textes d'état sont un peu plus clairs pour garder leurs contrastes (contrastes.mjs). */
:root{
  color-scheme:dark;
  --fond:#17232C;
  --lueur-ardoise:rgba(57,97,120,.55); --lueur-ardoise-2:rgba(84,128,154,.36); --lueur-corail:rgba(216,88,58,.10);
  --lueur-papier:rgba(236,233,218,.07); --lueur-vedette:rgba(232,163,23,.20); --lueur-vedette-vert:rgba(63,185,80,.18);
  --verre:rgba(34,50,62,.60); --flou:24px;
  --case:rgba(255,255,255,.07); --case-survol:rgba(255,255,255,.10); --case-appui:rgba(255,255,255,.15); --cellule:rgba(30,44,55,.88);
  --filet:rgba(255,255,255,.16); --filet-doux:rgba(255,255,255,.11); --arete:rgba(255,255,255,.13); --trait:rgba(237,241,243,.45);
  --texte:#EDF1F3; --texte-2:rgba(237,241,243,.72);
  --accent:#ECE9DA; --sur-accent:#13212A; --accent-survol:#F8F6EC;
  --s-vert:#3FB950; --s-ambre:#E8A317; --s-rouge:#F2545B; --s-gris:#9AA6AD;
  /* Les trois temps de l'anneau : Lu en ardoise clair, Vérifié en beige, Importé en vert. */
  --temps-1:#7FA8C2; --temps-2:#ECE9DA; --temps-3:#3FB950;
  --bg:#17232C; --surface:#22313C; --sunk:rgba(255,255,255,.08); --ink:var(--texte); --muted:var(--texte-2);
  --rule:var(--filet-doux); --rule-hi:var(--filet);
  --vert:#3FB950; --orange:#E8A317; --rouge:#FFA8AD;
  --vert-bg:rgba(63,185,80,.14); --orange-bg:rgba(232,163,23,.14); --rouge-bg:rgba(242,84,91,.14);
  --orange-texte:#F5C760; --vert-texte:#80DE8E;
  /* La pile de police du système : SF sur Mac, Segoe sur Windows ; les valeurs et les chemins aussi (13/10/2026). */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--sans);
  /* Échelle de 1,25 autour d'un corps de 16 px ; trois graisses ; espaces par 4 ; mouvements de 150 à 250 ms. */
  --t-petit:13px; --t-second:14px; --t-corps:16px; --t-lecture:16px; --t-titre:20px; --t-question:25px; --t-h1:31px; --t-vedette:40px;
  --g-normal:400; --g-moyen:500; --g-fort:650;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --rayon:6px; --r-cadre:24px; --r-case:18px; --r-cellule:12px; --r-pilule:999px;
  --duree:200ms; --duree-courte:150ms; --duree-longue:250ms; --courbe:cubic-bezier(.23,1,.32,1);
  --barre-l:76px; --barre-tel:66px;
  /* Les marges (07/11/2026, « trop de vide à droite et à gauche ») : une seule gouttière autour de la barre et du cadre ;
     la barre prend toute la hauteur, collée à gauche ; le cadre va jusqu'au bord droit, 1 680 px au plus ; au-delà, la
     barre et le cadre se centrent ensemble (--bord, la marge de chaque côté du groupe). */
  --gouttiere:16px; --verre-max:1680px;
  /* Le volet « Derniers gestes » (09/11/2026, plus bas) : la place qu'il prend entre la barre et le cadre (0 sans lui). */
  --volet-l:264px; --volet-place:0px;
  --bord:max(var(--gouttiere),calc((100vw - var(--verre-max) - var(--barre-l) - var(--gouttiere) - var(--volet-place)) / 2));
  /* Le papier d'un PDF montré dans la page : blanc dans les deux thèmes, comme une feuille. */
  --papier:#FFFFFF;
}
/* Le clair, deux fois le même bloc (07/11/2026, « un bouton pour le mode sombre ») : l'ordinateur en clair sans choix
   contraire, ou le choix « clair » posé par /theme.js (`<html data-theme="clair">`), quel que soit l'ordinateur. Le
   choix « sombre » garde les jetons du haut, même sur un ordinateur en clair. Sans choix, tout suit l'ordinateur,
   comme avant. Les deux blocs restent identiques (src/theme.test.js le vérifie). */
@media (prefers-color-scheme:light){:root:not([data-theme="sombre"]){
  color-scheme:light;
  --fond:#ECE9DA;
  --lueur-ardoise:rgba(57,97,120,.18); --lueur-ardoise-2:rgba(120,160,185,.20); --lueur-corail:rgba(216,88,58,.08);
  --lueur-papier:rgba(245,247,252,.75); --lueur-vedette:rgba(232,163,23,.18); --lueur-vedette-vert:rgba(63,185,80,.16);
  --verre:rgba(255,255,255,.72);
  --case:rgba(255,255,255,.62); --case-survol:rgba(255,255,255,.92); --case-appui:#FFFFFF; --cellule:rgba(255,255,255,.9);
  --filet:#B3C2CC; --filet-doux:#D7E0E4; --arete:rgba(255,255,255,.95); --trait:rgba(19,33,42,.56);
  --texte:#13212A; --texte-2:rgba(19,33,42,.70);
  --accent:#396178; --sur-accent:#F5F7FC; --accent-survol:#2C4F63;
  --s-vert:#23863A; --s-ambre:#B07A00; --s-rouge:#C8323A; --s-gris:#66737B;
  --temps-1:#4F82A0; --temps-2:#2B3A44; --temps-3:#23863A;
  --bg:#F5F7FC; --surface:#F5F7FC; --sunk:rgba(19,33,42,.05);
  --vert:#23863A; --orange:#946200; --rouge:#B42630;
  --vert-bg:rgba(63,185,80,.13); --orange-bg:rgba(232,163,23,.16); --rouge-bg:rgba(242,84,91,.12);
  --orange-texte:#7A5100; --vert-texte:#1D6E31;
}}
:root[data-theme="clair"]{
  color-scheme:light;
  --fond:#ECE9DA;
  --lueur-ardoise:rgba(57,97,120,.18); --lueur-ardoise-2:rgba(120,160,185,.20); --lueur-corail:rgba(216,88,58,.08);
  --lueur-papier:rgba(245,247,252,.75); --lueur-vedette:rgba(232,163,23,.18); --lueur-vedette-vert:rgba(63,185,80,.16);
  --verre:rgba(255,255,255,.72);
  --case:rgba(255,255,255,.62); --case-survol:rgba(255,255,255,.92); --case-appui:#FFFFFF; --cellule:rgba(255,255,255,.9);
  --filet:#B3C2CC; --filet-doux:#D7E0E4; --arete:rgba(255,255,255,.95); --trait:rgba(19,33,42,.56);
  --texte:#13212A; --texte-2:rgba(19,33,42,.70);
  --accent:#396178; --sur-accent:#F5F7FC; --accent-survol:#2C4F63;
  --s-vert:#23863A; --s-ambre:#B07A00; --s-rouge:#C8323A; --s-gris:#66737B;
  --temps-1:#4F82A0; --temps-2:#2B3A44; --temps-3:#23863A;
  --bg:#F5F7FC; --surface:#F5F7FC; --sunk:rgba(19,33,42,.05);
  --vert:#23863A; --orange:#946200; --rouge:#B42630;
  --vert-bg:rgba(63,185,80,.13); --orange-bg:rgba(232,163,23,.16); --rouge-bg:rgba(242,84,91,.12);
  --orange-texte:#7A5100; --vert-texte:#1D6E31;
}

*{box-sizing:border-box}
html{background:var(--fond)}
body{margin:0;min-height:100vh;background:transparent;color:var(--ink);font:var(--t-corps)/1.55 var(--sans);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;padding:var(--gouttiere) 0}
h1,h2,h3,strong,b{font-weight:var(--g-fort)}
.cache-visuel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* LE SOMBRE PARTOUT (09/11/2026, refonte L6, ma demande : « le mode sombre mal fait ») : ce que chaque page reçoit sans
   rien écrire. Les champs natifs suivent le thème par `color-scheme` (posé sur :root, hérité : listes, calendrier, choix
   de fichiers) ; les options d'une liste ont un fond plein (sur Windows, elles prenaient le fond transparent de leur
   liste) ; les barres de défilement prennent le trait du thème ; tout ce qui se touche au clavier a un anneau visible.
   Sans spécificité (`:where`) : la règle d'une page l'emporte toujours. */
html{scrollbar-color:var(--trait) transparent}
:where(select) :where(option,optgroup){background-color:var(--surface);color:var(--texte)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* LE MOUVEMENT COMMUN (09/11/2026, refonte L6, recherches/refonte-0911/PLAN.md § 5) : discret, 150 à 250 ms, jamais à
   l'apparition au défilement. Les images-clés n'ont que leur départ : l'élément revient à son propre style, et la
   propriété `translate` s'ajoute à son `transform` sans l'écraser.
   - `.entre` : ce qui arrive (la carte suivante) : un fondu et 8 px vers le haut, en --duree ;
   - `.monte` : ce qui monte du bas (la barre de sélection) : --monte (24 px par défaut) et l'opacité, en --duree-longue ;
   - le changement de vue (`Mouvement.vue(fn)`, /theme.js) : un fondu de 180 ms de la page (View Transitions natives).
   Tout est coupé sous prefers-reduced-motion (en bas de la feuille). */
@keyframes entre{from{opacity:0;translate:0 8px}}
@keyframes monte{from{opacity:0;translate:0 var(--monte,24px)}}
.entre{animation:entre var(--duree) var(--courbe) backwards}
.monte{animation:monte var(--duree-longue) var(--courbe) backwards}
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:ease}

/* Le fond : des lueurs ardoise, et une lueur corail très faible, dessinées en code, qui dérivent lentement. */
.fond{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--fond)}
.fond::before,.fond::after{content:"";position:absolute;inset:-18%;will-change:transform}
.fond::before{background:
    radial-gradient(34% 30% at 14% 18%,var(--lueur-ardoise),transparent 70%),
    radial-gradient(30% 28% at 86% 12%,var(--lueur-ardoise-2),transparent 70%),
    radial-gradient(42% 38% at 80% 84%,var(--lueur-ardoise),transparent 72%),
    radial-gradient(24% 22% at 26% 90%,var(--lueur-corail),transparent 70%);
  filter:blur(40px);animation:deriver 48s ease-in-out infinite alternate}
.fond::after{background:
    radial-gradient(40% 34% at 52% 38%,var(--lueur-papier),transparent 70%),
    radial-gradient(26% 24% at 62% 66%,var(--lueur-ardoise-2),transparent 72%);
  filter:blur(56px);opacity:.8;animation:deriver-loin 64s ease-in-out infinite alternate}
@keyframes deriver{to{transform:translate3d(3%,-2%,0) scale(1.05)}}
@keyframes deriver-loin{to{transform:translate3d(-4%,3%,0) scale(1.08)}}

/* La barre d'icônes : chaque icône dit son nom aux lecteurs d'écran ; sur un écran large, il est écrit à côté d'elle
   (plus bas) ; plus étroit, il vient au survol. Depuis le 07/11/2026 (« un bouton Accueil, toujours dans la barre de
   gauche ») : toute la hauteur, collée au bord gauche, la gouttière autour ; en haut le nom du cabinet, Accueil, Aide,
   « Une question ? » ; en bas « Mode sombre », Paramètres, « Je suis » (et, ouvert au réseau, « Se déconnecter »). */
.barre-icones{position:fixed;left:var(--bord);top:var(--gouttiere);bottom:var(--gouttiere);width:var(--barre-l);z-index:35;display:flex;
  flex-direction:column;align-items:center;gap:var(--e2);padding:var(--e3) var(--e2);border-radius:var(--r-case);background:var(--verre);
  border:1px solid var(--filet);-webkit-backdrop-filter:blur(var(--flou)) saturate(140%);backdrop-filter:blur(var(--flou)) saturate(140%);
  box-shadow:inset 0 1px 0 var(--arete)}
/* Ce qui suit « Une question ? » descend au bas de la barre. */
.barre-icones > .bouton-theme{margin-top:auto}
/* « Je suis » sans prénom porte la classe `vide`, que le tableau de bord centre ailleurs (`margin:auto`) : pas dans la barre. */
.barre-icones > .moi-rond{margin:0}
/* Le nom du cabinet, en petit, en tête de la barre (la responsable seulement : rien en haut pour l'employée, 06/11). */
.barre-cabinet{margin:0;padding:var(--e1) var(--e3) var(--e2);max-width:100%;font-size:var(--t-petit);font-weight:var(--g-moyen);
  color:var(--texte-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
body.vue-employe .barre-cabinet{display:none !important}
/* Ouvert au réseau et connecté : qui, et « Se déconnecter », sous « Je suis ». */
.compte-barre{display:flex;flex-direction:column;align-items:center;gap:var(--e1)}
.compte-barre[hidden]{display:none}
.compte-barre .sous{display:none;font-size:var(--t-petit);color:var(--texte-2);padding:0 var(--e3);overflow-wrap:anywhere}
.icone-lien{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;padding:0;
  background:none;color:var(--texte-2);font:inherit;cursor:pointer;text-decoration:none;list-style:none;
  transition:background-color var(--duree) ease,color var(--duree) ease}
.icone-lien::-webkit-details-marker{display:none}
.icone-lien svg{width:20px;height:20px}
.icone-lien[hidden]{display:none}
.icone-lien[aria-current="page"]{background:var(--accent);color:var(--sur-accent)}
.icone-lien:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.barre-icones .nom{position:absolute;left:calc(100% + var(--e4));top:50%;transform:translate(-4px,-50%);white-space:nowrap;z-index:2;
  padding:var(--e1) var(--e3);border-radius:var(--r-cellule);background:var(--surface);color:var(--texte);border:1px solid var(--filet);
  font-size:var(--t-petit);font-weight:var(--g-moyen);line-height:1.3;opacity:0;pointer-events:none;
  transition:opacity var(--duree-courte) ease,transform var(--duree-courte) var(--courbe)}
.icone-lien:focus-visible .nom{opacity:1;transform:translate(0,-50%)}
@media (hover:hover) and (pointer:fine){
  .icone-lien:hover{background:var(--case-survol);color:var(--texte)}
  .icone-lien[aria-current="page"]:hover{background:var(--accent);color:var(--sur-accent)}
  .icone-lien:hover .nom{opacity:1;transform:translate(0,-50%)}
}
.barre-sep{width:24px;height:1px;background:var(--filet);margin:var(--e1) 0}
/* « Mode sombre » (07/11/2026, point 5 ; aligné le 09/11/2026, refonte L6) : comme les autres entrées, une icône et son
   nom. L'icône dit l'état : la lune en sombre, le soleil en clair (`aria-checked`, le mot de l'interrupteur, le dit aux
   lecteurs d'écran). La petite piste, seulement sur écran large, au bout de la ligne (plus bas) : de 701 à 1 023 px, posée
   au coin de l'icône, elle tombait sous la lune, décalée. */
.bouton-theme .piste-theme{display:none}
.bouton-theme[aria-checked="true"] .icone-soleil,.bouton-theme:not([aria-checked="true"]) .icone-lune{display:none}

/* « Je suis » : le prénom en rond, au bas de la barre. La vraie liste est posée dessus, invisible : un clic l'ouvre.
   Sans prénom, une silhouette en pointillé ; il dit son nom au survol, comme les icônes. */
.moi-rond{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--case-survol);border:1px solid var(--filet);color:var(--texte);font-size:var(--t-second);font-weight:var(--g-fort)}
.moi-rond.vide{border-style:dashed;color:var(--texte-2)}
.moi-lettre{display:grid;place-items:center}
.moi-rond select{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);margin:0;padding:0;opacity:0;cursor:pointer;font-size:16px;
  border:0;border-radius:50%;-webkit-appearance:none;appearance:none}
.moi-rond select:disabled{cursor:default}
.moi-rond:has(select:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.moi-rond:has(select:focus-visible) .nom,.moi-rond:has(select.manque) .nom{opacity:1;transform:translate(0,-50%)}
.moi-rond:has(select.manque){border:2px solid var(--s-ambre);color:var(--orange-texte)}
@media (hover:hover) and (pointer:fine){.moi-rond:hover .nom{opacity:1;transform:translate(0,-50%)}}

/* L'aide, repliée dans la barre. Son menu s'ouvre à droite de la barre, centré sur elle, donc sur l'écran (la barre
   l'est), jamais plus haut que l'écran : il défile s'il ne tient pas (06/11/2026, testeur et relecteur : posé au bas de
   son icône, il montait ; avec le tutoriel dedans, ses premiers liens sortaient par le haut de l'écran, hors d'atteinte). */
/* 09/11/2026, ma demande (« un menu qui glisse en animation à côté d'Aide », pas tout en bas) : sur ordinateur, le menu
   s'ouvre à la hauteur d'« Aide », juste à sa droite, et glisse depuis elle. Au téléphone, il reste au-dessus de la barre. */
.menu-aide{position:relative}
.menu-aide[open] > .icone-lien{background:var(--case-survol);color:var(--texte)}
/* Ouvert depuis sa propre page (l'Aide sur une page d'aide, le Tutoriel sur une page du tutoriel), il garde l'accent :
   sinon son nom, écrit en --sur-accent, disparaissait sur le fond clair (relecture du 05/11/2026). */
.menu-aide[open] > .icone-lien[aria-current="page"]{background:var(--accent);color:var(--sur-accent)}
.menu-aide[open] > .icone-lien .nom{display:none}
.menu-aide .dedans{position:absolute;left:calc(100% + var(--e3) + var(--e2));top:calc(-1 * var(--e3));transform:none;z-index:40;width:280px;
  animation:aide-glisse .26s cubic-bezier(.22,.8,.2,1) both;
  max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);color:var(--texte);border:1px solid var(--filet);border-radius:var(--r-case);padding:var(--e4);
  display:flex;flex-direction:column;gap:var(--e3);font-size:var(--t-second);box-shadow:inset 0 1px 0 var(--arete)}
.menu-aide .dedans hr{border:0;border-top:1px solid var(--filet-doux);margin:0;width:100%}
.menu-aide .dedans button.lien{font-size:var(--t-second);text-align:left;min-height:44px}
.menu-aide .aide a{display:flex;align-items:center;min-height:44px}
/* La barre des autres pages (/barre.js) : ce que le tableau de bord règle dans sa propre feuille. */
.barre-commune [hidden]{display:none !important}
.barre-commune .aide{display:flex;flex-direction:column;gap:var(--e1)}
.barre-commune .aide a{color:var(--accent);font-weight:var(--g-fort);text-underline-offset:2px}
.barre-commune .aide a[aria-current="page"]{color:var(--texte);text-decoration:none}
.barre-commune button.lien{font:inherit;font-size:var(--t-second);background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-weight:var(--g-fort)}
.barre-commune a:focus-visible,.barre-commune button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Écran large : le nom de chaque icône écrit à côté d'elle, toujours visible (05/11/2026, ma demande : « à partir des
   logos, ils ne peuvent pas savoir »). La barre s'élargit, le cadre recule d'autant ; même ordre, mêmes gestes. */
@media (min-width:1024px){
  :root{--barre-l:200px}
  .barre-icones{align-items:stretch}
  .barre-cabinet{display:block}
  .compte-barre{align-items:stretch}
  .compte-barre .sous{display:block}
  .icone-lien{display:flex;align-items:center;justify-content:flex-start;gap:var(--e3);width:auto;height:auto;min-height:44px;
    padding:var(--e1) var(--e3);border-radius:var(--r-pilule);text-align:left}
  .icone-lien svg{flex:none}
  .barre-icones .nom{position:static;transform:none;opacity:1;padding:0;border:0;border-radius:0;background:none;color:var(--texte);
    font-size:var(--t-second);white-space:normal;line-height:1.25;text-align:left;transition:none}
  .icone-lien[aria-current="page"] .nom{color:var(--sur-accent)}
  .icone-lien:hover .nom,.icone-lien:focus-visible .nom,.moi-rond:hover .nom,
  .moi-rond:has(select:focus-visible) .nom,.moi-rond:has(select.manque) .nom{transform:none}
  .menu-aide[open] > .icone-lien .nom{display:block}
  .barre-sep{width:auto;margin:var(--e1) var(--e3)}
  /* « Mode sombre » : la piste au bout de la ligne, centrée sur elle, comme un interrupteur (allumée = sombre). */
  .bouton-theme{padding-right:var(--e2)}
  .bouton-theme .nom{white-space:nowrap}
  .bouton-theme .piste-theme{display:block;position:relative;flex:none;align-self:center;margin-left:auto;width:28px;height:16px;
    border-radius:var(--r-pilule);background:var(--case-survol);border:1px solid var(--trait);pointer-events:none}
  .bouton-theme .piste-theme::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--texte-2);
    transition:left var(--duree-courte) var(--courbe)}
  .bouton-theme[aria-checked="true"] .piste-theme{background:var(--accent);border-color:var(--accent)}
  .bouton-theme[aria-checked="true"] .piste-theme::after{left:14px;background:var(--sur-accent)}
  /* « Je suis » : le rond garde son initiale (ou sa silhouette en pointillé), son nom à côté ; la liste couvre la ligne. */
  .moi-rond{display:flex;align-items:center;gap:var(--e3);width:auto;height:auto;min-height:44px;padding:var(--e1) var(--e2) var(--e1) var(--e1);
    border:1px solid transparent;border-radius:var(--r-pilule);background:none;font-weight:var(--g-moyen)}
  .moi-lettre{flex:none;width:36px;height:36px;border-radius:50%;background:var(--case-survol);border:1px solid var(--filet);font-weight:var(--g-fort)}
  .moi-rond.vide .moi-lettre{border-style:dashed}
  .moi-rond select{border-radius:var(--r-pilule)}
  @media (hover:hover) and (pointer:fine){.moi-rond:not(:has(select:disabled)):hover{background:var(--case-survol)}}
}

/* Le grand cadre de verre, et sa tête : la réception en pastille. Il prend la largeur jusqu'au bord droit, une gouttière
   à droite, la barre et une gouttière à gauche (07/11/2026 : 1 240 px centrés laissaient 236 px vides de chaque côté à
   1 920 px). */
.verre{max-width:var(--verre-max);margin:0 var(--bord) 0 calc(var(--bord) + var(--barre-l) + var(--gouttiere) + var(--volet-place));
  min-height:calc(100vh - 2 * var(--gouttiere));padding:var(--e5);border-radius:var(--r-cadre);
  background:var(--verre);border:1px solid var(--filet);-webkit-backdrop-filter:blur(var(--flou)) saturate(140%);
  backdrop-filter:blur(var(--flou)) saturate(140%);box-shadow:inset 0 1px 0 var(--arete);display:flex;flex-direction:column;gap:var(--e4)}
.tete-cadre{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e4);padding:0 var(--e1)}
.tete-cadre .cabinet{margin:0;font-size:var(--t-second);font-weight:var(--g-moyen);color:var(--texte-2);min-width:0;max-width:48ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tete-cadre .ia-phrase{flex:1 1 280px}
.direct{margin-left:auto;display:inline-flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3);border-radius:var(--r-pilule);
  background:var(--case);border:1px solid var(--filet-doux);font-size:var(--t-petit);font-weight:var(--g-moyen);color:var(--texte-2);white-space:nowrap}
.direct::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-ambre);flex:none}
.direct.vivant::before{background:var(--s-vert)}

/* Une case : du verre plus clair sur le cadre, l'arête claire en haut, aucune ombre. */
.tuile{position:relative;min-width:0;padding:var(--e5);border-radius:var(--r-case);background:var(--case);
  border:1px solid var(--filet-doux);box-shadow:inset 0 1px 0 var(--arete)}
.nombre-pastille{display:inline-block;min-width:28px;padding:0 var(--e2);border-radius:var(--r-pilule);background:var(--case-survol);
  border:1px solid var(--filet-doux);text-align:center;font-size:var(--t-petit);font-weight:var(--g-fort);color:var(--texte)}

/* « Retour » (07/11/2026, point 6 : « des boutons Retour partout ») : une pilule, un chevron, le mot. Sur les pages
   (Paramètres, L'équipe, le tutoriel, « à la main »), /barre.js le pose en tête du cadre ; le tableau de bord a les
   siens (le mail ouvert, l'Aide, le Bureau). */
.retour{display:inline-flex;align-items:center;gap:var(--e2);align-self:flex-start;min-height:44px;padding:0 var(--e4) 0 var(--e3);
  border-radius:var(--r-pilule);border:1px solid var(--filet);background:var(--case);color:var(--texte);font:inherit;font-size:var(--t-second);
  font-weight:var(--g-fort);text-decoration:none;cursor:pointer}
.retour svg{width:16px;height:16px;flex:none}
.retour:hover{background:var(--case-survol)}
.retour:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Sur une page du tutoriel, ses liens sont en accent : « Retour » garde son air de bouton. */
.retour.retour-page{color:var(--texte);font-weight:var(--g-fort);text-decoration:none}
.retour[hidden]{display:none}

/* L'Aide ouverte dans le tableau de bord (07/11/2026) : la page du tutoriel dans un cadre ; /barre.js s'y sait intégré
   (`html.integre`) : ni barre, ni fond, ni « Retour », ni second verre. */
/* La connexion n'a pas de barre : sa carte se centre (07/11/2026 : le cadre suit la barre partout ailleurs). */
body.sans-barre .verre{margin-left:auto;margin-right:auto}

html.integre{background:transparent}
html.integre body{padding:0;min-height:0;background:transparent}
html.integre .fond{display:none}
html.integre .verre{margin:0 auto;max-width:1080px;min-height:0;padding:var(--e2) var(--e1) var(--e5);border:0;border-radius:0;background:none;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* PARAMÈTRES (07/11/2026, point 3 : « les paramètres à un seul endroit ») : trois pages, une tête commune : « Retour »
   (posé par /barre.js en tête du cadre), le titre « Paramètres », trois onglets en pilules (l'ouvert en accent), et
   une ligne qui dit pour qui vaut ce qui s'y règle. Les onglets passent de l'un à l'autre sans entrée d'historique. */
.tete-parametres h1{margin:0;font-size:var(--t-h1);line-height:1.15;letter-spacing:-.02em}
.onglets-parametres{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--e2)}
.onglets-parametres a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e4);border-radius:var(--r-pilule);border:1px solid var(--filet);
  background:var(--case);color:var(--texte);font-size:var(--t-second);font-weight:var(--g-fort);text-decoration:none}
.onglets-parametres a:hover{background:var(--case-survol)}
.onglets-parametres a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.onglets-parametres a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.portee-parametres{flex-basis:100%;margin:0;font-size:var(--t-second);color:var(--texte-2)}
/* Les alertes d'une page de Paramètres (la démonstration, un plafond atteint) : de la largeur de la colonne des cases, pas
   jusqu'au bord du cadre (passe de design du 09/11/2026 : le bandeau dépassait les cases de 100 px à droite). */
.verre:has(> .colonne) > :is(#alertes,.alertes){width:100%;max-width:880px}
/* « En savoir plus » replié au bas d'une rangée : sa cible de 44 px déborde sur le retrait de la rangée, le vide sous lui
   n'est plus double (passe de design du 09/11/2026 : 52 px sous le mot au bas d'une case, 24 px au-dessus du titre). */
.rangee:not(:has(> .a-enregistrer:not([hidden]))) > details.en-savoir:not([open]):last-of-type{margin-bottom:calc(-1 * var(--e3))}

/* LA LECTURE DES MAILS (07/11/2026, point 2 : « bien en avant ») : la même bande sur l'accueil et dans Paramètres. Son
   titre, deux segments (« À la main », « Automatique ») pour qui peut changer le mode, la phrase et son point (gris à
   la main, vert en automatique, ambre en pause, rouge arrêtée ; le mot porte l'état, jamais la couleur seule). */
.bande-lecture{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e5);min-width:0}
.titre-lecture{margin:0;font-size:var(--t-second);font-weight:var(--g-fort);color:var(--texte)}
.segments-lecture{display:inline-flex;flex:none;border:1px solid var(--filet);border-radius:var(--r-pilule);padding:3px;gap:2px;background:var(--cellule)}
.segments-lecture button{font:inherit;font-size:var(--t-second);font-weight:var(--g-fort);color:var(--texte-2);background:none;border:0;
  border-radius:var(--r-pilule);padding:0 var(--e4);min-height:44px;cursor:pointer}
.segments-lecture button:hover:not(:disabled){color:var(--texte)}
.segments-lecture button[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent)}
.segments-lecture button:disabled{cursor:not-allowed;opacity:.55}
.segments-lecture button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.phrase-lecture{margin:0;flex:1 1 300px;min-width:0;display:flex;align-items:flex-start;gap:var(--e2);font-size:var(--t-corps);line-height:1.45;color:var(--texte)}
.phrase-lecture .point{width:10px;height:10px;margin-top:.42em;border-radius:50%;flex:none;background:var(--s-gris)}
.point.p-vert{background:var(--s-vert)}
.point.p-ambre{background:var(--s-ambre)}
.point.p-rouge{background:var(--rouge)}
.phrase-lecture .prevenir{font-weight:var(--g-fort)}
.geste-lecture{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e4);border-radius:var(--r-pilule);border:1px solid var(--accent);
  color:var(--texte);font-size:var(--t-second);font-weight:var(--g-fort);text-decoration:none}
.geste-lecture:hover{background:var(--case-survol)}
.geste-lecture:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.confirme-lecture{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e4);padding:var(--e3) var(--e4);
  border-radius:var(--r-cellule);border:1px solid var(--filet);border-left:3px solid var(--s-ambre);background:var(--cellule)}
.confirme-lecture p{margin:0;flex:1 1 260px;font-weight:var(--g-moyen)}
.confirme-gestes{display:flex;flex-wrap:wrap;gap:var(--e2)}
.bouton-second{font:inherit;font-size:var(--t-second);font-weight:var(--g-fort);min-height:44px;padding:0 var(--e4);border-radius:var(--r-pilule);
  border:1px solid var(--filet);background:var(--case-survol);color:var(--texte);cursor:pointer}
.bouton-second:hover{background:var(--case-appui)}
.bouton-second:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Le bouton principal : l'accent, en pilule ; un seul par écran. Au survol, l'accent d'un cran (--accent-survol : plus
   clair en sombre, plus foncé en clair ; 09/11/2026, passe de design : le filtre de luminosité d'avant ne se voyait pas
   sur l'ardoise du clair). */
.bouton-principal{font:inherit;font-size:var(--t-corps);font-weight:var(--g-fort);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--e2);min-height:48px;padding:0 var(--e5);border-radius:var(--r-pilule);border:1px solid var(--accent);background:var(--accent);
  color:var(--sur-accent);cursor:pointer;transition:background-color var(--duree-courte) ease,border-color var(--duree-courte) ease}
.bouton-principal:hover:not(:disabled){background:var(--accent-survol);border-color:var(--accent-survol)}
.bouton-principal:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bouton-principal:disabled{opacity:.55;cursor:not-allowed}

/* LE FINI COMMUN (09/11/2026, passe de design, recherches/nuit-0911-suite/) : ce que chaque geste reçoit sans rien écrire,
   sans spécificité (`:where`) : la règle d'une page l'emporte toujours.
   - Appuyé, un geste s'enfonce d'un pixel : le doigt sent qu'il a pris (la propriété `translate` s'ajoute au `transform`
     d'une page, une case qui monte au survol garde sa montée) ; rien pour un geste grisé.
   - Le texte choisi à la souris prend l'accent du thème, pas le bleu du système. */
:where(button,a.geste,a.retour,summary):active:not(:disabled){translate:0 1px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* LE VOLET « DERNIERS GESTES » (09/11/2026, recherches/nuit-0911-suite/BRIEF.md, point 3 ; /volet-historique.js) : à
   droite de la barre, du même verre, toute la hauteur. Les 20 derniers gestes, par jour : le prénom et l'heure, le geste en
   mots, le mail et sa production en petit ; une ligne rouvre son mail. Son bouton à part dans la barre, « Derniers gestes »
   (`#lien-gestes`, sous « Historique », 09/11/2026 au soir, ma demande), l'ouvre et le ferme. Selon la largeur :
   - ≥ 1 500 px : posé, ouvert (264 px), le cadre recule d'autant ; rangé (le bouton ou « Replier »), plus rien à côté de
     la barre, le cadre reprend sa place ;
   - 701 à 1 499 px : rien à l'écran (la disposition validée du 04/11 et du 07/11 garde sa largeur : une ligne de mail sur un
     rang dès 1 264 px, la première dans le premier écran à 1 280 × 800) ; le bouton ouvre le volet PAR-DESSUS la page, un
     voile derrière (un clic dessus le ferme) ;
   - au téléphone : pas de bouton (les ronds de la barre du bas sont comptés) ; « Historique » ouvre le même tiroir,
     « Tout l'historique » est dedans, au-dessus de la barre du bas.
   La place est réservée dès le haut de la page (`html.avec-volet`, posé par /barre.js ou le script du volet) : rien ne saute. */
@media (min-width:1500px){html.avec-volet.volet-ouvert{--volet-place:calc(var(--volet-l) + var(--gouttiere))}}
.volet-historique{position:fixed;z-index:34;left:calc(var(--bord) + var(--barre-l) + var(--gouttiere));top:var(--gouttiere);bottom:var(--gouttiere);
  width:var(--volet-l);display:none;flex-direction:column;min-height:0}
.volet-titre svg{width:20px;height:20px;flex:none}
/* Le bouton de la barre, volet ouvert : marqué comme l'Aide ouverte. */
.icone-lien[aria-expanded="true"]{background:var(--case-survol);color:var(--texte)}
.volet-corps{display:none;flex:1;min-height:0;flex-direction:column;gap:var(--e2);padding:var(--e3) var(--e2) var(--e3) var(--e3);
  border-radius:var(--r-case);border:1px solid var(--filet);background:var(--verre);
  -webkit-backdrop-filter:blur(var(--flou)) saturate(140%);backdrop-filter:blur(var(--flou)) saturate(140%);box-shadow:inset 0 1px 0 var(--arete)}
@media (min-width:1500px){
  html.volet-ouvert .volet-historique{display:flex}
  html.volet-ouvert .volet-corps{display:flex}
}
/* Le tiroir (sous 1 500 px, téléphone compris) : le volet par-dessus la page, plus opaque (le texte de la page ne transparaît
   pas), un voile derrière. */
html.volet-tiroir .volet-historique{display:flex;z-index:45;width:min(var(--volet-l),calc(100vw - var(--bord) - var(--barre-l) - 2 * var(--gouttiere)))}
html.volet-tiroir .volet-corps{display:flex;background:var(--surface);animation:volet-entre var(--duree) var(--courbe) backwards}
@keyframes volet-entre{from{opacity:0;translate:-12px 0}}
@keyframes aide-glisse{from{opacity:0;translate:-14px 0}}
@keyframes aide-monte{from{opacity:0;translate:0 10px}}
.volet-voile{position:fixed;inset:0;z-index:44;background:color-mix(in srgb,var(--fond) 60%,transparent)}
/* Tiroir ouvert : la barre reste au-dessus du voile (son bouton « Derniers gestes » le referme, marqué). */
html.volet-tiroir .barre-icones{z-index:46}
.volet-voile[hidden]{display:none}
.volet-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);padding-right:var(--e1)}
.volet-titre{margin:0;display:flex;align-items:center;gap:var(--e2);font-size:var(--t-second);font-weight:var(--g-fort);color:var(--texte)}
.volet-replier{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:none;
  color:var(--texte-2);cursor:pointer}
.volet-replier:hover{background:var(--case-survol);color:var(--texte)}
.volet-etat{margin:0;padding:0 var(--e1);font-size:var(--t-petit);color:var(--texte-2)}
.volet-etat:empty{display:none}
.volet-reessayer{font:inherit;font-size:var(--t-petit);font-weight:var(--g-fort);background:none;border:0;padding:0;min-height:44px;color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.volet-liste{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:var(--e1)}
.volet-groupe + .volet-groupe{margin-top:var(--e3)}
.volet-jour{margin:0 0 var(--e1);padding:0 var(--e2);font-size:var(--t-petit);font-weight:var(--g-moyen);color:var(--texte-2)}
.volet-liste ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.volet-ligne{display:flex;flex-direction:column;gap:2px;width:100%;min-height:44px;padding:var(--e2);border:0;border-radius:var(--r-cellule);
  background:none;color:var(--texte);font:inherit;text-align:left}
button.volet-ligne{cursor:pointer;transition:background-color var(--duree-courte) ease}
@media (hover:hover) and (pointer:fine){button.volet-ligne:hover{background:var(--case-survol)}}
.volet-haut{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);font-size:var(--t-petit);line-height:1.3}
.volet-qui{font-weight:var(--g-fort);color:var(--texte);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.volet-quand{flex:none;color:var(--texte-2)}
.volet-phrase{font-size:var(--t-second);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.volet-ou{font-size:var(--t-petit);line-height:1.3;color:var(--texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.volet-tout{flex:none;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--e4);border-radius:var(--r-pilule);
  border:1px solid var(--filet);background:var(--case);color:var(--texte);font-size:var(--t-second);font-weight:var(--g-fort);text-decoration:none}
.volet-tout:hover{background:var(--case-survol)}

/* Téléphone : la barre en bas, le cadre plus serré. Ses ronds : Accueil, Historique, Aide, « Une question ? », Mode
   sombre, Paramètres (la responsable), Je suis, et « Se déconnecter » ouvert au réseau : six à huit (07/11/2026). Chacun
   garde 44 px au toucher (règle du projet) : quand ils ne tiennent pas sur une ligne, la barre passe sur deux rangées
   (plus bas), jamais un rond plus petit, rien ne déborde. */
@media (max-width:700px){
  :root{--rond-tel:44px}
  body{padding:var(--e3) var(--e2) calc(var(--barre-tel) + var(--e5) + env(safe-area-inset-bottom))}
  .barre-icones{left:var(--e3);right:var(--e3);top:auto;bottom:calc(var(--e3) + env(safe-area-inset-bottom));width:auto;transform:none;
    flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:var(--e1) var(--e2);gap:var(--e1);border-radius:var(--r-pilule);
    background:color-mix(in srgb,var(--surface) 90%,transparent)}
  .barre-icones > .bouton-theme{margin-top:0}
  .icone-lien,.moi-rond{flex:none;width:var(--rond-tel);height:var(--rond-tel)}
  .compte-barre{flex:none;flex-direction:row}
  .barre-sep,.barre-icones .nom,.barre-cabinet{display:none}
  /* Les menus de l'Aide et du Tutoriel : toute la largeur de la barre, juste au-dessus d'elle (posés depuis un rond du
     milieu, ils sortaient de l'écran). */
  /* « Base de données » (09/11/2026) : sur ordinateur seulement ; la barre du téléphone garde ses ronds. */
  .barre-icones #lien-base{display:none}
  /* « Derniers gestes » non plus : au téléphone, « Historique » ouvre son tiroir. */
  .barre-icones #lien-gestes{display:none}
  .menu-aide{position:static}
  .menu-aide .dedans{left:0;right:0;top:auto;transform:none;bottom:calc(100% + var(--e3));width:auto;animation-name:aide-monte;max-height:calc(100vh - var(--barre-tel) - 2 * var(--e5));overflow-y:auto}
  .verre{margin:0;padding:var(--e4) var(--e3);border-radius:var(--r-case);min-height:0}
  .tuile{padding:var(--e4)}
  /* Le volet « Derniers gestes » : le tiroir que le rond « Historique » ouvre, au-dessus de la barre du bas. */
  html.volet-tiroir .volet-historique{left:var(--e3);top:calc(var(--e3) + env(safe-area-inset-top));
    bottom:calc(var(--barre-tel) + 2 * var(--e3) + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 2 * var(--e3)))}
}

/* Deux rangées quand les ronds ne tiennent pas sur une ligne (48 px chacun, gouttières comprises, plus les marges de la
   barre) : six sous 324 px ; sept (la responsable, ou l'employée ouverte au réseau) sous 372 px ; huit (la responsable
   ouverte au réseau) sous 420 px. La barre grandit d'une rangée, et le bas de la page avec elle. */
@media (max-width:323px){
  :root{--barre-tel:114px}
  .barre-icones{border-radius:var(--r-case)}
}
@media (max-width:371px){
  :root:has(.barre-icones #compte:not([hidden])),:root:has(.barre-icones #lien-reglages:not([hidden])){--barre-tel:114px}
  :root:has(.barre-icones #compte:not([hidden])) .barre-icones,:root:has(.barre-icones #lien-reglages:not([hidden])) .barre-icones{border-radius:var(--r-case)}
}
@media (max-width:419px){
  :root:has(.barre-icones #compte:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])){--barre-tel:114px}
  :root:has(.barre-icones #compte:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])) .barre-icones{border-radius:var(--r-case)}
}
/* « Mode essai » (09/11/2026, lot E, /espace.js) : un rond de plus pour la responsable. Sept sous 372 px, huit sous 420 px,
   neuf (la responsable ouverte au réseau) sous 468 px : la barre passe sur deux rangées, et --barre-tel le dit, sinon le
   bas de la page et le tiroir « Derniers gestes » (lot H) passaient sous la seconde rangée. */
@media (max-width:371px){
  :root:has(.barre-icones #lien-essai:not([hidden])){--barre-tel:114px}
  :root:has(.barre-icones #lien-essai:not([hidden])) .barre-icones{border-radius:var(--r-case)}
}
@media (max-width:419px){
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])),
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #compte:not([hidden])){--barre-tel:114px}
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])) .barre-icones,
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #compte:not([hidden])) .barre-icones{border-radius:var(--r-case)}
}
@media (max-width:467px){
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])):has(.barre-icones #compte:not([hidden])){--barre-tel:114px}
  :root:has(.barre-icones #lien-essai:not([hidden])):has(.barre-icones #lien-reglages:not([hidden])):has(.barre-icones #compte:not([hidden])) .barre-icones{border-radius:var(--r-case)}
}

@media (prefers-reduced-motion:reduce){
  .fond::before,.fond::after{animation:none}
  .menu-aide .dedans{animation:none}
  .icone-lien,.barre-icones .nom,.bouton-principal,.bouton-theme .piste-theme::after{transition:none}
  :where(button,a.geste,a.retour,summary):active{translate:none}
  .entre,.monte{animation:none}
  button.volet-ligne{transition:none}
  html.volet-tiroir .volet-corps{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}