/* 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;
  --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;
  --bord:max(var(--gouttiere),calc((100vw - var(--verre-max) - var(--barre-l) - var(--gouttiere)) / 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;
  --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;
  --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 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) : l'icône lune, son nom, et une petite piste (allumée = sombre ; le mot de
   l'interrupteur, `aria-checked`, dit l'état aux lecteurs d'écran). Étroit : la piste en petit, au coin de l'icône. */
.bouton-theme .piste-theme{position:absolute;right:0;bottom:3px;width:16px;height:10px;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:1px;left:1px;width:6px;height:6px;border-radius:50%;background:var(--texte-2)}
.bouton-theme[aria-checked="true"] .piste-theme{background:var(--accent);border-color:var(--accent)}
.bouton-theme[aria-checked="true"] .piste-theme::after{left:auto;right:1px;background:var(--sur-accent)}

/* « 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). */
.menu-aide{position:static}
.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(--e4));top:50%;transform:translateY(-50%);z-index:40;width:280px;
  max-height:calc(100vh - 2 * var(--e5));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, comme un interrupteur. */
  .bouton-theme{padding-right:var(--e2)}
  .bouton-theme .nom{white-space:nowrap}
  .bouton-theme .piste-theme{position:relative;right:auto;bottom:auto;flex:none;margin-left:auto;width:28px;height:16px}
  .bouton-theme .piste-theme::after{top:2px;left:2px;width:10px;height:10px}
  .bouton-theme[aria-checked="true"] .piste-theme::after{left:auto;right:2px}
  /* « 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));
  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)}

/* 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. */
.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:filter var(--duree) ease}
.bouton-principal:hover{filter:brightness(1.06)}
.bouton-principal:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 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). */
  .menu-aide{position:static}
  .menu-aide .dedans{left:0;right:0;top:auto;transform:none;bottom:calc(100% + var(--e3));width:auto;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)}
}

/* 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)}
}

@media (prefers-reduced-motion:reduce){
  .fond::before,.fond::after{animation:none}
  .icone-lien,.barre-icones .nom,.bouton-principal{transition:none}
}