/* cockpit.css — la feuille unique du cockpit des pôles (lot D, 01/10/26).

   Contrat visuel : CONTRATS.md (« Les écrans ») et, dans Tech Team,
   « 0 bis. Agents et produits/1. Agents Les Ombres/4. Cockpits des pôles/architecture-front-office.md ».
   Grammaire adaptée du cockpit tech (« 2. Cockpit/public/index.html ») : le bandeau .lat
   devient .rail, la tuile .fa-tuile devient .tuile-indicateur, la carte .po-carte / .pri-c
   devient .carte-action. Tout est en classes ; aucun #id n'est stylé.

   Passe UX du 05/10/26 (lot U1, décisions D1 et D2) : la charte graphique Les Ombres 2026 dans
   son dosage « écran de gestion » (Tech Team, skill 1-creer-des-interfaces, charte/), la
   grammaire des boutons en trois rangs (plein, lavis, texte) et Manrope partout. Les noms des
   jetons ne bougent pas : leur correspondance avec la charte est écrite en tête de la section 1
   et dans CONTRATS.md (« Jetons de design »).
   Polices : Manrope est servie par le cockpit (polices.css, polices/), la politique de sécurité
   de contenu n'autorisant que 'self' ; la pile de repli (Inter, puis la police du système) tient
   la page si un fichier manque.

   Passe 2 du 05/10/26 au soir (lot V1, décisions D1, D6, D7) : le rail à six entrées (Aujourd'hui
   en tuile pleine), « Plus » au téléphone, les non-lus du fil et « La base à tenir » dans
   Aujourd'hui, les tuiles repliées et disposées par le pôle. Aucune couleur nouvelle : les jetons
   de la section 1. */

/* ══ 1. Les jetons ══════════════════════════════════════════════════════════
   La charte 2026 en dosage « écran de gestion » (D1, 05/10/26), le même que le cockpit tech :
   toile très claire, surfaces blanches, bleu nuit en encre et en action pleine, baby blue en
   lavis de sélection, cyan pour ce qui est en cours, rouge pour les non-lus et l'action
   irréversible confirmée (moins de 1 % de la surface). Les noms restent ; correspondance :
     bleu nuit #020318 ......... --encre, --bleu-f, --bleu-n, --bouton-bg, --sur-bleu, --anneau
     baby blue #98CFED ......... --bleu (fond, jamais une encre) ; lavis --bleu-t (26 %), --bleu-t2 (42 %)
     cyan #00ADCD .............. --cyan, halo --cyan-t (jamais un texte sur blanc : 2,7:1)
     rouge #D91600, #B01200 .... --rouge, --rouge-f (= --panne, le rouge foncé de la charte)
     gris tirés du bleu nuit ... --toile #F7F9FC, --creux #EBEEF3, --sec #4F5469, --ter #585D72,
                                 --bouton-survol #23264A (le --nuit-s du cockpit tech), --lat
     filets .................... --ligne, --ligne-f : bleu nuit à 9 et 16 %
     états ..................... --ok, --attn, --panne et leurs lavis -t : ceux du cockpit tech
     --releve .................. la pastille choisie d'un contrôle segmenté : blanc ; en sombre #23264A
                                 (le survol du plein), plus clair que son rail (Réglages iOS en sombre)
   Contrastes mesurés (WCAG 2) : --sec 7,5:1 sur blanc, 7,1:1 sur la toile, 6,4:1 sur --creux ;
   --ter 6,5 / 6,2 / 5,6:1 ; bleu nuit sur un lavis 17,9:1 (16,5:1 au survol) ; blanc sur bleu
   nuit 20,4:1, sur --bouton-survol 14,5:1, sur rouge 5,2:1 ; --panne 7,2:1 sur blanc et 6,2:1 sur
   --panne-t ; --attn 5,3:1 sur --attn-t ; --ok 5,4:1 sur --ok-t.
   Le sombre pose la toile en bleu nuit et les surfaces en bleu nuit éclairci ; l'encre devient
   blanche, l'action pleine s'inverse (blanc, texte bleu nuit, 19:1). Mesures : --sec 9,7:1 et
   --ter 7,5:1 sur --carte, --panne 8,6:1, --attn 11,2:1, --ok 10,7:1. */
:root{
  --toile:#F7F9FC; --carte:#FFFFFF; --blanc:#FFFFFF; --creux:#EBEEF3; --encre:#020318;
  --sec:#4F5469; --ter:#585D72;
  --bleu:#98CFED; --bleu-t:rgba(152,207,237,.26); --bleu-t2:rgba(152,207,237,.42);
  --bleu-f:#020318; --bleu-n:#020318;
  --cyan:#00ADCD; --cyan-t:rgba(0,173,205,.26); --rouge:#D91600; --rouge-f:#B01200;
  --ok:#2F6B48; --ok-t:#E4EFE8; --attn:#7A5C12; --attn-t:#F4ECD6; --panne:#B01200; --panne-t:#FBE4E0;
  --bouton-bg:#020318; --bouton-fg:#FFFFFF; --bouton-survol:#23264A; --anneau:#020318; --releve:#FFFFFF;
  --ombre:0 1px 2px rgba(2,3,24,.04),0 8px 28px rgba(2,3,24,.06);
  --ombre-survol:0 2px 4px rgba(2,3,24,.05),0 14px 36px rgba(2,3,24,.10);
  --ombre-sel:0 1px 2px rgba(2,3,24,.07),0 0 0 .5px rgba(2,3,24,.05);
  --ombre-haut:0 -1px 2px rgba(2,3,24,.04),0 -10px 30px rgba(2,3,24,.06);
  --ombre-feuille:0 24px 70px rgba(2,3,24,.22);
  --lat:rgba(234,238,245,.72); --lat-fort:rgba(247,249,252,.92);
  --ligne:rgba(2,3,24,.09); --ligne-f:rgba(2,3,24,.16);
  --sur-bleu:#020318; --survol:rgba(2,3,24,.05); --voile:rgba(2,3,24,.36);
  /* Manrope partout (charte, « La typographie ») ; --serif et --marque gardent leur nom. */
  --sans:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:var(--sans); --marque:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --spring:cubic-bezier(.3,.9,.32,1);
  --r-tuile:22px; --r-carte:20px; --r-liste:18px; --r-bouton:10px; --r-pilule:999px;
  --lavis-texte:var(--bleu-f);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --toile:#020318; --lat:rgba(10,12,38,.72); --lat-fort:rgba(2,3,24,.92); --carte:#0C0E29; --blanc:#0C0E29; --creux:#181B3B;
  --encre:#F5F7FB; --sec:#B4B9CC; --ter:#9DA3B8;
  --bleu-t:rgba(152,207,237,.16); --bleu-t2:rgba(152,207,237,.28); --bleu-f:#F5F7FB; --bleu-n:#F5F7FB;
  --ligne:rgba(255,255,255,.1); --ligne-f:rgba(255,255,255,.18);
  --ok:#8FD1A8; --ok-t:#13281F; --attn:#E5C46A; --attn-t:#2E2610; --panne:#FF8F80; --panne-t:#3A1414;
  --bouton-bg:#F5F7FB; --bouton-fg:#020318; --bouton-survol:#DCE2EC; --anneau:#F5F7FB; --releve:#23264A;
  --ombre:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --ombre-survol:0 2px 4px rgba(0,0,0,.35),0 16px 38px rgba(0,0,0,.45);
  --survol:rgba(255,255,255,.06); --voile:rgba(0,0,0,.55);
  --ombre-sel:0 1px 2px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.06);
  --ombre-haut:0 -1px 2px rgba(0,0,0,.3),0 -10px 30px rgba(0,0,0,.35);
  --ombre-feuille:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --toile:#020318; --lat:rgba(10,12,38,.72); --lat-fort:rgba(2,3,24,.92); --carte:#0C0E29; --blanc:#0C0E29; --creux:#181B3B;
  --encre:#F5F7FB; --sec:#B4B9CC; --ter:#9DA3B8;
  --bleu-t:rgba(152,207,237,.16); --bleu-t2:rgba(152,207,237,.28); --bleu-f:#F5F7FB; --bleu-n:#F5F7FB;
  --ligne:rgba(255,255,255,.1); --ligne-f:rgba(255,255,255,.18);
  --ok:#8FD1A8; --ok-t:#13281F; --attn:#E5C46A; --attn-t:#2E2610; --panne:#FF8F80; --panne-t:#3A1414;
  --bouton-bg:#F5F7FB; --bouton-fg:#020318; --bouton-survol:#DCE2EC; --anneau:#F5F7FB; --releve:#23264A;
  --ombre:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --ombre-survol:0 2px 4px rgba(0,0,0,.35),0 16px 38px rgba(0,0,0,.45);
  --survol:rgba(255,255,255,.06); --voile:rgba(0,0,0,.55);
  --ombre-sel:0 1px 2px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.06);
  --ombre-haut:0 -1px 2px rgba(0,0,0,.3),0 -10px 30px rgba(0,0,0,.35);
  --ombre-feuille:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark }

/* ══ 2. La base ═════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{background:var(--toile);color:var(--encre);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:inherit;
  -webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--bleu-f);text-underline-offset:3px}
ul,ol{list-style:none}
svg{display:block}
[hidden]{display:none!important}
/* Le focus au clavier : un anneau de 2 px en bleu nuit (blanc en sombre), décalé de 2 px ;
   jamais au clic de souris (:focus-visible seulement). */
:focus-visible{outline:2px solid var(--anneau);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--bleu-t2)}
/* Une feuille plein écran est ouverte au téléphone : la page derrière ne défile plus. */
html.sans-defilement,html.sans-defilement body{overflow:hidden}
.lu-seul{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:fixed;left:12px;top:-60px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border-radius:var(--r-bouton);background:var(--bouton-bg);color:var(--bouton-fg);font-weight:600;text-decoration:none;transition:top .15s}
.evitement:focus{top:12px}
.annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round}
.ic-p{width:15px;height:15px;stroke-width:1.8}

/* ══ 3. Typographie ═════════════════════════════════════════════════════════ */
/* Manrope (charte, « La typographie ») : titres 700 à 800 au chasse serrée, corps 15 px en 400,
   boutons 600, légendes 12 px. Pas d'italique. */
/* Surtitre : petites capitales 11 px, .12em, au-dessus d'un titre (App Store, « Aujourd'hui »). */
.surtitre{font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;
  color:var(--sec);font-variant-numeric:tabular-nums}
/* Le titre d'un écran de travail — Réglages macOS : un grand titre, une ligne de contexte. */
.titre-ecran{font-family:var(--serif);font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.03em;
  margin-top:6px;text-wrap:balance}
.contexte{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--sec)}
.tete-vue{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tete-vue>div{min-width:0}
.section{margin-top:64px}
.tete-vue+.section,.tete-jour+.section{margin-top:40px}
.section-t{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section-t h2{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.section-t .q{font-size:13.5px;color:var(--sec)}

/* ══ 4. Les boutons — une famille, trois rangs (D2, 05/10/26) ═══════════════
   Référence : les boutons d'iOS (rempli, teinté, texte), transposés à la charte. .b porte tout,
   le rang dit l'importance :
     .b-plein  bleu nuit, texte blanc (20,4:1) — LE geste recommandé : un seul par groupe, jamais
               deux côte à côte, jamais un par carte empilée (Aujourd'hui : la première carte) ;
     .b-lavis  baby blue à 26 %, texte bleu nuit (17,9:1) — le second rang ;
     .b-texte  bleu nuit sans fond, souligné au survol seulement — le reste (« Plus tard »,
               « Annuler ») ;
     .b-ligne  blanc, filet 16 % — le second rang posé sur un fond d'état, où un lavis ne se lit pas ;
     .b-rouge  rouge, texte blanc (5,2:1) — une action irréversible, une fois confirmée.
   Coins 10 px, 36 px de haut sur ordinateur, 600, 14,5 px. Au doigt, 44 px : ::before élargit la
   zone de clic sur ordinateur, et la hauteur elle-même passe à 44 px sous 900 px (section 19).
   États : survol en 150 ms (une marche plus dense) ; pressé scale(.98) en 90 ms ; focus visible
   (section 2) ; désactivé : opacité .45, rien d'autre ; occupé (aria-busy) : le libellé s'efface
   sans que la largeur bouge, un point cyan pulse à sa place. */
.b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 16px;
  border-radius:var(--r-bouton);font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  white-space:nowrap;text-decoration:none;text-underline-offset:3px;cursor:pointer;
  transition:transform .09s ease-out,background-color .15s linear,color .15s linear,box-shadow .15s linear,opacity .15s linear}
.b::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.b:active:not(:disabled):not([aria-busy="true"]){transform:scale(.98)}
.b:disabled,.b[aria-disabled="true"]{opacity:.45;cursor:default}
.b .ic{width:16px;height:16px}
.b-plein{background:var(--bouton-bg);color:var(--bouton-fg)}
.b-lavis{background:var(--bleu-t);color:var(--lavis-texte)}
.b-texte{padding-left:10px;padding-right:10px;color:var(--encre)}
.b-ligne{background:var(--carte);color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne-f)}
.b-rouge{background:var(--rouge);color:#FFFFFF}
@media (hover:hover){
  .b-plein:hover:not(:disabled):not([aria-busy="true"]){background:var(--bouton-survol)}
  .b-lavis:hover:not(:disabled):not([aria-busy="true"]){background:var(--bleu-t2)}
  .b-texte:hover:not(:disabled):not([aria-busy="true"]){text-decoration:underline}
  .b-ligne:hover:not(:disabled):not([aria-busy="true"]){box-shadow:inset 0 0 0 1px var(--encre)}
  .b-rouge:hover:not(:disabled):not([aria-busy="true"]){background:var(--rouge-f)}
}
.b-petit{min-height:32px;padding:5px 12px;font-size:13.5px}
.b-petit::before{top:-6px;bottom:-6px}
.b-large{min-height:52px;padding:12px 22px;font-size:16px;width:100%}
/* Le bouton icône seul : un aria-label toujours, 36 px vus, 44 px de cible. */
.b-icone{position:relative;flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-bouton);
  color:var(--sec);transition:background-color .15s linear,color .15s linear,transform .09s ease-out}
.b-icone::before{content:"";position:absolute;inset:-4px}
.b-icone:active{transform:scale(.96)}
@media (hover:hover){ .b-icone:hover{background:var(--survol);color:var(--encre)} }
/* Un lien qui fait un geste, hors d'un .b (« Ouvrir la fiche dans Airtable ») : le bouton texte. */
.b-lien{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:14.5px;font-weight:600;
  color:var(--encre);text-decoration:none;text-underline-offset:3px;border-radius:6px}
.b-lien:hover{text-decoration:underline}
/* Occupé : le libellé reste dans le nom accessible mais s'efface à l'écran ; un point cyan pulse. */
.b[aria-busy="true"]{cursor:progress;opacity:1;color:transparent!important;text-decoration:none!important}
.b[aria-busy="true"] .ic{opacity:0}
.b[aria-busy="true"]::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--cyan);animation:bouton-occupe 1s ease-in-out infinite}
/* Sur la toile, le texte d'un lavis prend --bleu-n (aujourd'hui le même bleu nuit que --bleu-f). */
.sur-toile{--lavis-texte:var(--bleu-n)}

/* ══ 5. Pilules, badges, disques ════════════════════════════════════════════
   La pilule dit un état ou une catégorie, toujours par un mot ; le badge compte le non-lu, en
   rouge (D1 : la seule place du rouge avec l'action irréversible) ; le disque dit qui parle. */
.pilule{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 9px;border-radius:var(--r-pilule);
  font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--creux);color:var(--sec);
  font-variant-numeric:tabular-nums}
.pilule.ok{background:var(--ok-t);color:var(--ok)}
.pilule.attn{background:var(--attn-t);color:var(--attn)}
.pilule.panne{background:var(--panne-t);color:var(--panne)}
.pilule.bleu{background:var(--bleu-t);color:var(--bleu-n)}
.pilule .pt{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Badge iOS : ce qui est nouveau depuis la dernière visite, ou non lu. Zéro ne s'écrit pas.
   Blanc sur rouge : 5,2:1. */
.badge{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pilule);
  background:var(--rouge);color:#FFFFFF;font-size:11.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.disque{flex:none;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--creux);color:var(--encre);font-weight:700;font-size:12.5px;line-height:1}
.disque.alex{background:var(--bleu);color:var(--sur-bleu)}
.disque.grand{width:40px;height:40px;font-size:16px}

/* ══ 6. La coquille : rail · scène · panneau droit ══════════════════════════ */
.coquille{display:flex;height:100vh;height:100dvh;overflow:hidden}
.scene{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;min-height:0}
.vue{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.page{padding:34px clamp(16px,4vw,44px) 104px}
.page-int{max-width:1080px;margin:0 auto;container-type:inline-size}
/* L'arrivée d'une vue : 240 ms, 6 px, échelonnée de 60 ms, puis plus rien (pas au rafraîchissement). */
.vue.arrive .arr{animation:arrivee .24s var(--spring) both}
.vue.arrive .arr-2{animation-delay:.06s}
.entree{animation:arrivee .24s var(--spring) both}
@keyframes arrivee{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes respire{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes gabarit{50%{opacity:.5}}
@keyframes tourne{to{transform:rotate(360deg)}}
/* Le point d'un bouton occupé, et de ce qui est en cours : il respire en cyan. */
@keyframes bouton-occupe{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
/* passe 2, lot V1 : la tête du panneau de l'agent (plus d'onglets) — son prénom, son titre ;
   alex.css (lot V2) y pose l'emblème et peut tout reprendre. */
.cv-agent{flex:1;min-width:0}
.cv-agent-nom{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.cv-agent-titre{font-size:12.5px;line-height:1.35;color:var(--sec)}
.cv-agent-titre:empty{display:none}
/* Le panneau droit n'est plus que celui de l'agent (D2) : un pôle sans agent ouvert n'en montre rien,
   pas même la poignée. */
body[data-alex="absent"] .panneau-droit{display:none}
/* Mails et Calendrier, tant que leur module ne s'est pas enregistré (LO.enregistrerVue). */
.etat-chargement{max-width:620px;font-size:16px;line-height:1.55;color:var(--sec)}

/* ══ 7. Le rail — barre latérale de macOS (Mail, Notes) ═════════════════════
   Repris du bandeau .lat du cockpit tech (24/09) : fond presque de la toile, translucide, rangées
   de 40 px dans une marge de 10 px. Depuis la passe UX (05/10) : la sélection est un lavis baby
   blue, le texte passe en 700 (un mot plus gras, pas la couleur seule) ; en tête, le vrai logo
   de la charte (jamais redessiné), un filet, le nom du pôle. */
.rail{width:236px;flex:none;display:flex;flex-direction:column;overflow:hidden;padding:22px 10px 14px;
  background:var(--lat);-webkit-backdrop-filter:saturate(1.3) blur(20px);backdrop-filter:saturate(1.3) blur(20px);
  border-right:1px solid var(--ligne)}
.rail-tete{display:flex;align-items:center;gap:12px;min-width:0;padding:0 11px 26px}
/* Le logo de la charte : le fichier noir sur fond clair, le blanc en sombre ; 30 px de haut. */
.logo-img{display:block;flex:none;width:auto;height:30px}
.logo-sombre{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-clair{display:none}
  :root:not([data-theme="light"]) .logo-sombre{display:block}
}
:root[data-theme="dark"] .logo-clair{display:none}
:root[data-theme="dark"] .logo-sombre{display:block}
.rail-marque{min-width:0;padding-left:12px;border-left:1px solid var(--ligne-f);font-family:var(--marque);font-size:15px;
  font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-marque:empty{display:none}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-entree{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:40px;padding:0 10px 0 11px;
  border-radius:var(--r-bouton);font-size:15px;font-weight:500;line-height:1.2;color:var(--encre);text-align:left;
  transition:background-color .15s linear,color .15s linear}
@media (hover:hover){ .rail-entree:hover{background:var(--survol)} }
.rail-entree[aria-current="page"]{background:var(--bleu-t2);font-weight:700}
.rail-entree .ic{color:var(--sec)}
.rail-entree[aria-current="page"] .ic{color:var(--encre)}
.rail-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* passe 2, lot V1 (D1) — Aujourd'hui, la tuile pleine des listes intelligentes de Rappels
   (macOS) : bleu nuit, texte blanc (20,4:1), le jour en surtitre ; l'inverse en sombre, comme le
   bouton plein. Choisie, un anneau baby blue autour (une marque, pas une encre) en plus du 700.
   Puis une respiration et un filet ; les cinq autres restent des entrées de barre latérale.
   Le libellé court (« Indicateurs ») sert la barre d'onglets du téléphone. */
.rail-jour{flex-direction:column;align-items:stretch;justify-content:center;gap:3px;min-height:62px;padding:10px 12px 11px 13px;
  border-radius:14px;background:var(--bouton-bg);color:var(--bouton-fg);box-shadow:var(--ombre-sel);
  transition:background-color .15s linear,box-shadow .15s linear}
.rail-jour[aria-current="page"]{background:var(--bouton-bg);box-shadow:0 0 0 2px var(--toile),0 0 0 4px var(--bleu)}
.rail-jour .ic,.rail-jour[aria-current="page"] .ic{color:currentColor}
@media (hover:hover){ .rail-jour:hover{background:var(--bouton-survol)} }
.rail-jour:focus-visible{outline-offset:4px}
.rail-jour-date{font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.rail-jour-l{display:flex;align-items:center;gap:10px;min-width:0;font-size:15.5px;font-weight:700}
.rail-jour .badge{box-shadow:0 0 0 2px var(--bouton-bg)}
.rail-filet{display:block;height:1px;margin:14px 11px 12px;background:var(--ligne)}
.rail-court{display:none}
.rail-plus{display:none}
.rail .ic{stroke-width:1.75}
/* « Plus » (au téléphone) : la feuille liste les écrans que la barre d'onglets ne montre pas. */
.plus-liste{margin-top:14px;border-radius:14px;background:var(--toile);padding:2px 6px}
.plus-liste li+li{border-top:1px solid var(--ligne)}
.plus-entree{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border-radius:10px;
  font-size:16px;font-weight:600;line-height:1.3;color:var(--encre);text-align:left;transition:background-color .15s linear}
.plus-entree .ic{color:var(--sec);stroke-width:1.75}
.plus-entree[aria-current="page"]{font-weight:800}
.plus-entree[aria-current="page"] .ic{color:var(--encre)}
.plus-l{flex:1;min-width:0}
.plus-entree .plus-chevron{width:16px;height:16px;color:var(--ter)}
.plus-entree:focus-visible{outline-offset:-2px}
@media (hover:hover){ .plus-entree:hover{background:var(--survol)} }
.rail-pied{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:14px}
.rail-groupe{padding:12px 11px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.rail-pole{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:0 10px 0 11px;border-radius:var(--r-bouton);
  font-size:14.5px;font-weight:500;color:var(--encre);text-align:left;transition:background-color .15s linear}
@media (hover:hover){ .rail-pole:hover{background:var(--survol)} }
.rail-pole .pt{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--ligne-f)}
.rail-pole[aria-pressed="true"]{font-weight:700}
.rail-pole[aria-pressed="true"] .pt{background:var(--encre);box-shadow:none}
.rail-pole .rail-l{color:inherit}
.rail-pole .badge{height:18px;min-width:18px;font-size:11px}
.rail-moi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border-radius:var(--r-bouton);
  text-align:left;transition:background-color .15s linear}
@media (hover:hover){ .rail-moi:hover{background:var(--survol)} }
.rail-moi-l{display:block;font-size:14px;font-weight:600;line-height:1.25}
.rail-moi-c{display:block;font-size:12.5px;line-height:1.3;color:var(--sec)}
.rail-voyant{display:flex;align-items:center;gap:7px;padding:2px 11px 0;font-size:12.5px;line-height:1.4;color:var(--sec)}
.rail-voyant .pt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok)}
.rail-voyant[data-etat="panne"] .pt{background:var(--panne)}
.rail-voyant[data-etat="attente"] .pt{background:var(--sec);animation:respire 1.5s ease-in-out infinite}
.rail-voyant[data-etat="calme"] .pt{background:var(--sec)}
/* Le compte, en haut à droite de chaque écran au téléphone (App Store : l'avatar du compte). */
.bouton-compte{display:none}

/* ══ 8. Aujourd'hui — App Store, « Aujourd'hui » ═══════════════════════════ */
.tete-jour{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tete-jour>div{min-width:0}
.tete-jour .surtitre{margin-bottom:10px}
/* La phrase du jour : le plus grand texte de l'écran (App Store, « Aujourd'hui »), en Manrope 700
   serré ; les chiffres qu'elle porte en 800, un cran plus grands. */
.phrase-jour{font-family:var(--serif);font-size:29px;font-weight:700;line-height:1.24;letter-spacing:-.025em;
  max-width:700px;text-wrap:balance;outline:none}
.phrase-jour .phrase-n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.phrase-jour.est-calme{font-size:29px;line-height:1.22}
.phrase-jour.est-attente{color:var(--sec)}
/* passe 5, lot accueil (retour 4) : « Bonjour Antoine, » sur sa ligne, la phrase dessous, à la façon de Claude ; le
   surtitre (le jour, le pôle) se tait sur grand écran, où le rail porte déjà l'un et l'autre. */
.phrase-jour .phrase-salut{display:block}
@media (min-width:901px){ .tete-jour .surtitre{display:none} }
.pile-cartes{display:flex;flex-direction:column;gap:14px;max-width:700px;margin-top:40px}
/* La zone de panne, vide la plupart du temps : vide, elle ne compte pas dans les espacements. */
.zone-panne{display:flex;flex-direction:column;gap:12px;max-width:700px}
.zone-panne:empty{display:none}
.zone-panne:not(:empty){margin-top:28px}
.zone-panne:not(:empty)+.pile-cartes{margin-top:14px}
/* passe 2, lot V1 : les non-lus du fil au-dessus de la pile, la base à tenir après la suite. */
.arrivees{display:flex;flex-direction:column;gap:10px;max-width:700px;margin-top:32px}
.zone-panne:not(:empty)+.arrivees{margin-top:14px}
.arrivees:not([hidden])+.pile-cartes{margin-top:14px}
.zone-panne:not(:empty)+.arrivees[hidden]+.pile-cartes{margin-top:14px}
.tenue-cartes{max-width:700px;margin-top:28px}
.zone-panne:empty+.section,.tete-vue+.section{margin-top:40px}
.zone-panne:not(:empty)+.section{margin-top:28px}
.suite-cartes{margin-top:18px;max-width:700px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14px;color:var(--sec)}
/* L'état calme : une phrase, ce qui continue sans la personne, le prochain geste. */
.etat-calme{max-width:620px}
.etat-calme p{font-size:16px;line-height:1.55;color:var(--sec)}
.etat-calme .gestes{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.vue[data-vue="aujourdhui"] .etat-calme{margin-top:18px}
.section[hidden]+.etat-calme,.zone-panne+.etat-calme{margin-top:40px}
.etat-calme-t{font-family:var(--serif);font-size:28px;font-weight:700;line-height:1.22;letter-spacing:-.025em;
  color:var(--encre);margin-bottom:10px;text-wrap:balance}

/* ══ 9. La carte d'action — notification iOS à réponse directe ══════════════
   Anatomie du contrat : le genre en petites capitales avec sa pastille, la référence à droite ;
   le titre en Manrope 700 (le sujet, pas le geste) ; le pourquoi daté ; la recommandation ; les
   gestes. Un seul plein dans la pile : la première carte le porte, les suivantes prennent un
   lavis (D2, anti-modèle nº 7 ; socle.js › hierarchiserPile). Reprise de .po-carte (30/09). */
.carte-action{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--carte);
  border-radius:var(--r-carte);padding:18px 20px 16px;box-shadow:var(--ombre);
  transition:opacity .2s linear,transform .2s var(--spring)}
.ca-tete{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:8px;min-height:22px}
.ca-pastille{flex:none;width:9px;height:9px;border-radius:3px;background:var(--bleu)}
.carte-action[data-genre="echeance"] .ca-pastille{background:var(--attn)}
.carte-action[data-genre="relance"] .ca-pastille{background:var(--bleu)}
.carte-action[data-genre="encaissement"] .ca-pastille{background:var(--ok)}
.carte-action[data-genre="renouvellement"] .ca-pastille{background:var(--sec)}
/* Les genres du prototype Finance (02/10, D3) : une forme de couleur à côté d'un mot, jamais seule. */
.carte-action[data-genre="versement"] .ca-pastille{background:var(--ok)}
.carte-action[data-genre="resigner"] .ca-pastille,.carte-action[data-genre="convention"] .ca-pastille{background:var(--sec)}
.carte-action[data-genre="decision"] .ca-pastille{background:var(--attn)}
.carte-action[data-source="alex"] .ca-pastille{background:var(--cyan);border-radius:50%}
/* passe 2, lot V1 (D4, D5, D8) : une tâche personnelle, un point bleu nuit ; la proposition d'un
   agent et une carte transmise, l'emblème de l'agent (alex.js) ou, en secours, son disque. */
.carte-action[data-genre="perso"] .ca-pastille{background:var(--encre);border-radius:50%}
.ca-tete .ca-embleme{width:28px;height:28px;font-size:12.5px;font-weight:800}
.ca-tete>svg:first-child{flex:none}
/* La note d'une transmission : le texte de l'agent en lavis, signé (« Victor, pour Louis »). */
.ca-note{margin-top:10px;padding:10px 14px 11px;border-radius:14px;background:var(--bleu-t)}
.ca-note p{font-size:14.5px;line-height:1.5;color:var(--encre);overflow-wrap:anywhere}
.ca-note .ca-signe{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--sec)}
/* Les non-lus du fil — une notification compacte : la bulle, le compte et l'espace, qui a écrit
   le dernier ; « Lire » à droite. */
.carte-fil{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--carte);
  border-radius:var(--r-liste);padding:12px 14px 12px 14px;box-shadow:var(--ombre)}
.cf-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bleu-t);color:var(--encre)}
.cf-ic .ic{width:19px;height:19px;stroke-width:1.75}
.cf-corps{min-width:0}
.cf-titre{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.005em}
.cf-dit{margin-top:1px;font-size:13px;line-height:1.45;color:var(--sec);overflow-wrap:anywhere}
/* La base à tenir (D6) : plus calme qu'une carte d'action — à plat, un filet, une icône en lavis,
   un titre plus petit, un seul geste en lavis. */
.carte-tenue{display:flex;flex-direction:column;min-width:0;background:var(--carte);border-radius:var(--r-carte);padding:16px 20px 16px;
  box-shadow:inset 0 0 0 1px var(--ligne)}
.ct-tete{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:8px;min-height:28px}
.ct-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--bleu-t);color:var(--encre)}
.ct-ic .ic{width:17px;height:17px;stroke-width:1.75}
.ct-titre{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere}
.carte-tenue .ca-gestes{margin-top:14px}
/* La feuille de la base à tenir : une liste groupée, chaque ligne avec son raccourci. */
.tenue-liste{margin-top:16px;border-radius:14px;background:var(--toile);padding:2px 14px}
.tenue-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 0}
.tenue-ligne+.tenue-ligne{border-top:1px solid var(--ligne)}
.tenue-corps{min-width:0}
.tenue-corps b{display:block;font-size:14.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.tenue-corps span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--sec);overflow-wrap:anywhere}
.tenue-corps .tenue-pour{font-weight:600}
.ca-genre{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.ca-ref{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ter);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ca-titre{font-family:var(--serif);font-size:18.5px;font-weight:700;line-height:1.3;letter-spacing:-.018em;
  overflow-wrap:anywhere;color:var(--encre)}
.ca-pourquoi{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--sec);overflow-wrap:anywhere}
.ca-reco{margin-top:8px;font-size:15px;line-height:1.5;color:var(--encre);overflow-wrap:anywhere}
.ca-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.ca-statut{margin-top:10px;font-size:13px;line-height:1.45;color:var(--sec)}
.ca-statut.erreur{color:var(--panne)}
/* Un pôle non branché, dit à plusieurs pôles dans Aujourd'hui : une ligne calme, pas une alerte. */
.note-calme{margin-top:10px;font-size:14px;line-height:1.5;color:var(--sec)}
.carte-action[aria-busy="true"] .ca-gestes{pointer-events:none}
.carte-action.part{opacity:0;transform:translateY(-6px)}
/* « Plus tard » ouvert : la question, les dates en un clic, et « Écarter » avec son motif. */
.ca-report{margin-top:12px;padding-top:12px;border-top:1px solid var(--ligne)}
.ca-report-q{font-size:13px;font-weight:600;color:var(--encre);margin-bottom:8px}
.ca-report-choix{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ca-report-date{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.ca-report-bas{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;justify-content:space-between;margin-top:10px}
.ca-ecarter{margin-top:10px}
.ca-ecarter .champ-saisie{min-height:64px}
.ca-ecarter .ca-report-choix{margin-top:8px}

/* La carte de panne — en tête, ce qui casse, depuis quand, ce qu'on peut faire. */
.carte-panne{display:flex;gap:12px;align-items:flex-start;background:var(--panne-t);border-radius:var(--r-liste);
  padding:14px 18px 15px;max-width:700px}
.carte-panne .ic{color:var(--panne);margin-top:2px}
.carte-panne-t{font-size:15px;font-weight:600;line-height:1.4;color:var(--encre)}
.carte-panne p{font-size:14px;line-height:1.5;color:var(--encre)}
.carte-panne .b{margin-top:10px}

/* ══ 10. Indicateurs — Fitness, « Résumé » ══════════════════════════════════
   Reprise de .fa-tuile (« Fait », 23/09) : vrai blanc, rayon 22, un grand chiffre tabulaire en
   Manrope 800 (le « chiffre d'impact » de la charte, en bleu nuit). La ligne comparative n'est
   jamais absente ; « non mesuré » se dit en mots avec sa raison, jamais par un zéro ; la flèche
   n'est colorée que si le sens est déclaré. */
.grille-tuiles{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container (min-width:560px){ .grille-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:880px){ .grille-tuiles[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tuile-indicateur{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--carte);
  border-radius:var(--r-tuile);padding:20px 22px 18px;box-shadow:var(--ombre);
  transition:transform .18s var(--spring),box-shadow .18s var(--spring)}
/* passe 2, lot V1 (D7) — une tuile repliée : le résumé (<summary>) se clique, Entrée ou Espace le
   déroule ; le chevron tourne d'un quart. Le résumé porte la marge de la tuile, pour que toute
   la tuile soit la cible. */
.tuile-indicateur:has(> .ti-pli){padding:0}
.ti-pli{display:block;min-width:0}
.ti-resume{position:relative;display:block;padding:20px 56px 18px 22px;border-radius:var(--r-tuile);cursor:pointer;list-style:none}
.ti-resume::-webkit-details-marker{display:none}
.ti-resume::marker{content:""}
.ti-resume:focus-visible{outline:2px solid var(--anneau);outline-offset:2px}
.ti-chevron{position:absolute;top:18px;right:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--creux);color:var(--sec);transition:transform .2s var(--spring),background-color .15s linear,color .15s linear}
.ti-chevron .ic{width:16px;height:16px;stroke-width:2}
.ti-pli[open] .ti-chevron{transform:rotate(90deg)}
.ti-plus{padding:0 22px 18px}
.ti-plus>:first-child{margin-top:0}
.ti-plus>.ti-details:first-child{margin-top:2px}
.ti-raison{display:block}
@media (hover:hover){
  .ti-resume:hover .ti-chevron{background:var(--bleu-t);color:var(--encre)}
  .tuile-indicateur:has(> .ti-pli > .ti-resume:hover){transform:translateY(-2px);box-shadow:var(--ombre-survol)}
}
/* La disposition du pôle : la rangée côte à côte (trois colonnes dès que la page a la place),
   puis la pile en pleine largeur. Les tuiles d'une rangée gardent la même hauteur repliées. */
.grille-tuiles[data-disposition="pole"]{display:block}
.ti-rangee{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container (min-width:540px){
  .ti-rangee[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ti-rangee[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ti-rangee[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:540px) and (max-width:820px){ .ti-rangee[data-n="3"] .ti-n{font-size:38px} }
.ti-pile{display:flex;flex-direction:column;gap:16px}
/* Une tuile de la pile, pleine largeur : ses détails sur deux colonnes dès que la place le permet
   (un libellé et sa valeur restent à portée d'œil). */
@container (min-width:760px){
  .ti-pile .ti-det-liste{column-count:2;column-gap:40px}
  .ti-pile .ti-det{break-inside:avoid}
}
/* « À regarder » suit la période, à gauche : le chevron garde le coin. */
.ti-resume .ti-sur .pilule{margin-left:2px}
.ti-rangee:not([hidden])+.ti-pile{margin-top:16px}
/* « Tout déplier » : en tête de l'écran, à droite du titre. */
.tete-outil{align-self:flex-end;flex:none;margin-bottom:2px}
.ti-sur{display:flex;align-items:center;gap:8px;min-height:22px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ter);font-variant-numeric:tabular-nums}
.ti-sur .pilule{margin-left:auto;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.ti-titre{margin-top:6px;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--encre);overflow-wrap:anywhere}
.ti-chiffre{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:14px;min-height:50px}
.ti-n{font-family:var(--serif);font-size:48px;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--encre);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;overflow-wrap:anywhere}
.ti-u{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--sec)}
.ti-comp{display:flex;align-items:baseline;gap:7px;margin-top:10px;font-size:14px;line-height:1.45;color:var(--encre)}
.ti-fleche{flex:none;font-weight:700;color:var(--sec)}
.ti-comp[data-ton="bon"] .ti-fleche{color:var(--ok)}
.ti-comp[data-ton="mauvais"] .ti-fleche{color:var(--attn)}
.ti-comp-t{min-width:0;overflow-wrap:anywhere}
.ti-comp.est-absent{color:var(--sec)}
.ti-raison{margin-top:8px;font-size:14px;line-height:1.5;color:var(--sec);overflow-wrap:anywhere}
.ti-venti{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.ti-venti .pilule b{font-weight:700;color:var(--encre)}
.ti-venti-axe{font-size:12px;font-weight:600;color:var(--sec);margin-right:2px}
/* Les détails d'une tuile (prototype Finance, 02/10, D1 et D8) — une liste groupée de Réglages iOS
   en dense : une ligne par sous-lecture, le libellé à gauche, la valeur à droite en chiffres
   tabulaires, le texte court dessous ; un filet à peine visible entre deux lignes. « Non mesuré »
   en gris (--sec, 7,5:1 sur la carte), sa raison dessous ; « à regarder » en --attn (6,2:1 sur
   blanc), un mot et un point, jamais la couleur seule ; le bleu ne porte aucun texte ici. */
.ti-details{margin-top:14px;border-top:1px solid var(--ligne)}
.ti-det-liste+.ti-det-liste,.ti-det-liste+.ti-det-sous{border-top:1px solid var(--ligne)}
.ti-det{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--ligne)}
.ti-det:last-child{border-bottom:none}
.ti-details>.ti-det-liste:last-child>.ti-det:last-child{padding-bottom:0}
/* Le surtitre d'un groupe de lignes réservées : petites capitales, comme un en-tête de section de Réglages. */
.ti-det-sous{padding:10px 0 2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ter)}
.ti-det-l{min-width:0;font-size:13.5px;line-height:1.4;color:var(--encre);overflow-wrap:anywhere}
.ti-det-v{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--encre);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ti-det-t{grid-column:1/-1;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--sec);overflow-wrap:anywhere}
.ti-det[data-etat="non_mesure"] .ti-det-l,.ti-det[data-etat="non_mesure"] .ti-det-v{color:var(--sec)}
.ti-det[data-etat="non_mesure"] .ti-det-v{font-weight:500}
.ti-det-marque{margin-right:6px;font-size:11.5px;font-weight:600;color:var(--attn)}
.ti-det[data-etat="alerte"] .ti-det-l::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;
  border-radius:50%;background:var(--attn);vertical-align:.1em}
.ti-pied{margin-top:auto;padding-top:16px;font-size:12px;line-height:1.45;color:var(--ter);overflow-wrap:anywhere}
/* « Non mesuré » : plus petit qu'un chiffre, en encre — une information, pas un trou. */
.tuile-indicateur[data-etat="non_mesure"] .ti-n,.tuile-indicateur .ti-n.est-mot{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.tuile-indicateur[data-etat="alerte"]{box-shadow:var(--ombre),inset 0 0 0 1.5px var(--attn)}
/* passe 5 (07/10, retour 6 de Mourad) — une catégorie de chiffres (socle.js › construireCategorie) : le
   titre, puis les groupes côte à côte (trois colonnes dès 720 px de page, une au téléphone), chacun
   sous son en-tête en petites capitales ; le premier chiffre d'un groupe en grand, les suivants en
   ligne de relevé (libellé à gauche, chiffre à droite, tabulaire) ; une liste nom + montant en
   lignes serrées. Aucune couleur nouvelle : encre, --sec pour les textes, --ter pour les en-têtes. */
.ti-categorie .ti-resume{padding-bottom:6px}
.ti-cat-titre{margin-top:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.ti-categorie .ti-chevron{top:16px}
.ti-categorie[data-ouverte="non"] .ti-resume{padding-bottom:18px}
@media (hover:hover){ .tuile-indicateur.ti-categorie:has(> .ti-pli > .ti-resume:hover){transform:none;box-shadow:var(--ombre)} }
.ti-cat-corps{padding-top:8px}
.ti-cat-groupes{display:grid;gap:22px 36px;grid-template-columns:minmax(0,1fr)}
@container (min-width:720px){
  .ti-cat-groupes[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ti-cat-groupes:not([data-n="1"]):not([data-n="2"]){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.ti-cat-groupe{min-width:0}
.ti-cat-sous{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--ligne-f);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ter)}
.ti-cat-lignes{margin:0}
.ti-cat-lignes .ti-det{padding:8px 0}
.ti-cat-lignes .ti-det-v{font-size:15px;font-weight:700}
.ti-cat-lignes>.ti-det:first-child{padding-top:10px}
.ti-cat-lignes>.ti-det:first-child .ti-det-v{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.ti-cat-lignes>.ti-det:first-child .ti-det-l{font-weight:600}
.ti-cat-lignes .ti-det[data-etat="non_mesure"] .ti-det-v{font-size:13.5px;font-weight:500;letter-spacing:0}
.ti-cat-l[data-forme="liste"]{grid-template-columns:minmax(0,1fr)}
.ti-cat-liste{margin:6px 0 0}
.ti-cat-entrees{margin:0;padding:0;list-style:none}
.ti-cat-entree{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:4px 0;
  font-size:13px;line-height:1.4}
.ti-cat-entree+.ti-cat-entree{border-top:1px dashed var(--ligne)}
.ti-cat-nom{min-width:0;color:var(--sec);overflow-wrap:anywhere}
.ti-cat-montant{font-weight:600;color:var(--encre);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ti-cat-entree[data-etat="non_mesure"] .ti-cat-montant{font-weight:500;color:var(--sec)}
/* Le gabarit animé pendant le chargement : la forme finale, pas un sablier. Il vaut pour les
   tuiles, les cartes et les lignes de liste. */
.gab{display:block;border-radius:10px;background:var(--creux);animation:gabarit 1.6s ease-in-out infinite}
.gab-sur{width:38%;height:11px}
.gab-titre{width:70%;height:17px;margin-top:10px}
.gab-n{width:46%;height:46px;margin-top:16px}
.gab-ligne{width:82%;height:13px;margin-top:14px}
.gab-court{width:48%}
.gab-pied{width:56%;height:11px;margin-top:22px}
.gab-bouton{width:132px;height:36px;margin-top:18px;border-radius:var(--r-bouton)}
.lg-gab{display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 18px;border-top:1px solid var(--ligne)}
.lg-gab .gab{height:12px}
.lg-gab .gab:first-child{width:44px}
.lg-gab .gab:nth-child(2){flex:1}
.lg-gab .gab:last-child{width:52px}

/* ══ 11. Les listes groupées — Réglages iOS, Mail ═══════════════════════════
   Une ligne, un objet, un état : l'échéance à gauche, le titre, l'état en mot à droite ;
   lignes de 44 px ; la sélection garde sa place pendant qu'on lit à droite. */
.liste-groupee{background:var(--carte);border-radius:var(--r-liste);box-shadow:var(--ombre);padding:12px 0 6px;min-width:0;
  container-type:inline-size}
.liste-groupee+.liste-groupee{margin-top:24px}
.lg-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 18px 8px}
.lg-tete h2,.lg-tete h3{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.lg-n{font-size:12.5px;font-weight:600;color:var(--sec);font-variant-numeric:tabular-nums}
.lg-sous{padding:14px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.lg-lignes>li{border-top:1px solid var(--ligne)}
.lg-ligne{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:0 12px;
  width:100%;min-height:44px;padding:9px 18px;text-align:left;transition:background-color .15s linear}
@media (hover:hover){ .lg-ligne:hover{background:var(--survol)} }
/* La ligne ouverte à droite (Mail) : un lavis baby blue et un liseré bleu nuit, pas la couleur seule. */
.lg-ligne[aria-current="true"]{background:var(--bleu-t)}
.lg-ligne[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--encre)}
.lg-ligne:focus-visible{outline-offset:-2px}
.lg-date{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sec);line-height:1.25;
  font-variant-numeric:tabular-nums}
/* En retard : le mot à droite le dit en rouge foncé ; la date reste en encre, plus grasse. */
.lg-date.retard{color:var(--encre);font-weight:800}
.lg-corps{min-width:0}
/* Le titre d'une ligne tient sur deux lignes au plus : le titre d'une carte groupée porte son montant
   en fin (« 6 versements attendus, 175 k€ chiffrés »), une ellipse sur une ligne le coupait. */
.lg-corps b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:14.5px;font-weight:700;line-height:1.35;
  overflow:hidden;overflow-wrap:anywhere}
.lg-corps span{display:block;font-size:12.5px;line-height:1.4;color:var(--sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-etat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--sec);white-space:nowrap}
/* « tâche en cours » : le mot en bleu nuit, et un point cyan qui respire (D1 : le cyan dit ce
   qui est en cours, jamais en texte). */
.lg-etat.en-cours{color:var(--encre)}
.lg-etat.en-cours::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:bouton-occupe 1.4s ease-in-out infinite}
.lg-etat.retard{color:var(--panne)}
/* Une proposition d'Alex : la ligne et ses deux gestes, jamais mélangée aux cartes des règles. */
.lg-prop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 18px 11px}
.lg-prop .lg-corps button{display:block;width:100%;max-width:100%;text-align:left;border-radius:8px}
.lg-prop .lg-corps button:hover b{text-decoration:underline;text-underline-offset:3px}
.lg-prop .lg-corps .pilule{display:inline-flex;margin-bottom:4px}
.lg-prop-gestes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Une liste étroite (la colonne de Tâches à côté du panneau) : la proposition passe sur deux rangs. */
@container (max-width:480px){
  .lg-prop{grid-template-columns:minmax(0,1fr)}
  .lg-prop-gestes{justify-content:flex-start}
}

/* ══ 12. Tâches — Mail à trois volets : la liste, le panneau Claude Code ════ */
.taches{display:grid;grid-template-columns:minmax(0,1fr);min-height:100%}
.taches-liste{min-width:0}
.taches-liste .page-int{max-width:760px;margin:0}
.panneau-tache{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--carte)}
.ptc-tete{flex:none;display:flex;align-items:flex-start;gap:12px;padding:20px 20px 12px 24px;border-bottom:1px solid var(--ligne)}
.ptc-tete>div{flex:1;min-width:0}
.ptc-titre{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-top:4px;
  overflow-wrap:anywhere}
.ptc-fixe{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--sec)}
.ptc-fixe .ic{width:15px;height:15px;color:var(--ok)}
.ptc-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 24px}
.ptc-bloc+.ptc-bloc{margin-top:24px}
.ptc-q{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin-bottom:8px}
.ptc-carte p{font-size:14px;line-height:1.5}
.ptc-carte .ptc-gestes{margin-top:10px}
.ptc-carte .ca-pourquoi{margin-top:0}
.ptc-etat{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.45;color:var(--sec)}
.ptc-etat.erreur{color:var(--panne)}
.ptc-bas{flex:none;padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--ligne)}
.ptc-gestes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* La frise — suivi de commande à étapes NOMMÉES : l'étape courante en évidence, l'heure en face. */
.frise{position:relative;display:flex;flex-direction:column;gap:2px}
.frise li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:0 10px;align-items:start;
  padding:5px 0;font-size:14px;line-height:1.4;color:var(--sec)}
.frise li::before{content:"";position:absolute;left:5px;top:20px;bottom:-8px;width:2px;background:var(--creux)}
.frise li:last-child::before{display:none}
.frise .fr-p{position:relative;margin-top:3px;width:12px;height:12px;border-radius:50%;background:var(--carte);
  box-shadow:inset 0 0 0 2px var(--ligne-f)}
.frise li[data-etat="fait"] .fr-p{background:var(--sec);box-shadow:none}
.frise li[data-etat="fait"]::before{background:var(--sec)}
.frise li[data-etat="ici"]{color:var(--encre);font-weight:600}
.frise li[data-etat="ici"] .fr-p{background:var(--encre);box-shadow:0 0 0 4px var(--cyan-t)}
.frise li[data-etat="erreur"]{color:var(--panne)}
.frise li[data-etat="erreur"] .fr-p{background:var(--panne);box-shadow:none}
.frise .fr-h{font-size:12px;font-weight:500;color:var(--ter);font-variant-numeric:tabular-nums}
.frise .fr-t{display:block;margin-top:1px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--sec);overflow-wrap:anywhere}
/* Les fichiers produits — l'aperçu de pièce jointe de Mail. */
.fichiers{display:flex;flex-direction:column;gap:8px}
.fichier{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 10px;border-radius:14px;
  background:var(--toile);text-decoration:none;color:var(--encre);transition:background-color .14s linear}
.fichier:hover{background:var(--creux)}
.fichier-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--carte);
  box-shadow:var(--ombre-sel);font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--sec)}
.fichier b{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.fichier span{display:block;font-size:12.5px;color:var(--sec)}
.fichier .ic{margin-left:auto;color:var(--sec)}
/* La précision à une tâche — la saisie de la conversation (D3) : une pilule, filet 16 %, au focus
   le filet bleu nuit dans un halo cyan ; un bouton rond bleu nuit de 44 px, désactivé tant que le
   champ est vide. (Ces classes servaient au panneau avant la passe UX ; il a les siennes, cv-*.) */
.compo{display:flex;align-items:flex-end;gap:8px;padding:4px 4px 4px 16px;border-radius:26px;background:var(--carte);
  box-shadow:inset 0 0 0 1px var(--ligne-f);transition:box-shadow .15s linear}
.compo:focus-within{box-shadow:inset 0 0 0 1.5px var(--encre),0 0 0 4px var(--cyan-t)}
.compo textarea{flex:1;min-width:0;border:none;outline:none;background:none;resize:none;padding:11px 0;font-size:15px;
  line-height:1.45;min-height:44px;max-height:160px}
.compo textarea::placeholder{color:var(--ter)}
.envoyer{flex:none;width:44px;height:44px;border-radius:50%;background:var(--bouton-bg);color:var(--bouton-fg);display:grid;
  place-items:center;transition:transform .09s ease-out,opacity .15s linear,background-color .15s linear}
@media (hover:hover){ .envoyer:hover:not(:disabled){background:var(--bouton-survol)} }
.envoyer:active:not(:disabled){transform:scale(.94)}
.envoyer:disabled{opacity:.45;cursor:default}
.envoyer .ic{width:18px;height:18px;stroke-width:2.1}
.compo-note{margin-top:7px;padding-left:16px;font-size:12px;line-height:1.5;color:var(--sec)}
.compo-note.erreur{color:var(--panne);font-weight:600}

/* ── passe 2, lot V3 ── Mes tâches par catégorie d'action, et les deux aides (D8, 05/10/26) ───────
   La liste : Rappels (une liste par catégorie, son compte) dans la grammaire des listes groupées de
   Réglages iOS (§ 11) ; une ligne de 44 px au moins — l'échéance en pilule dans une colonne fixe, le
   titre (deux lignes au plus) et son objet, l'état en mot. La pilule d'échéance dit l'urgence par
   un mot et une teinte : en retard (attention), aujourd'hui (lavis), sinon neutre. Dans la colonne
   étroite (panneau ouvert, téléphone), l'état passe sous le titre. Le panneau : les deux aides en
   pied, « Ouvrir dans Claude Code » pleine, « Confier à <agent> » en lavis, la ligne du coût
   dessous ; le brief copié se lit en clair, repliable. Aucune couleur nouvelle : les jetons du § 1. */
.tg-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.tg-barre+.zone-panne:empty+.section,.tg-barre+.zone-panne+.section{margin-top:28px}
.liste-groupee.tg-groupe{padding:0 0 4px;overflow:hidden}
.liste-groupee.tg-groupe+.liste-groupee.tg-groupe{margin-top:18px}
.lg-tete.tg-tete{display:flex;align-items:center;gap:10px;padding:14px 18px 10px}
.tg-tete h2{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
/* La marque d'un groupe : une forme à côté d'un mot, jamais seule (la carte d'Aujourd'hui porte la même). */
.tg-marque{flex:none;width:10px;height:10px;border-radius:3px;background:var(--bleu)}
.tg-groupe[data-groupe="propositions"] .tg-marque{background:var(--cyan);border-radius:50%}
.tg-groupe[data-groupe="transmis"] .tg-marque{background:var(--encre);border-radius:50%}
.tg-groupe[data-groupe="tenue"] .tg-marque{background:var(--creux);box-shadow:inset 0 0 0 1.5px var(--sec)}
.tg-groupe[data-groupe="perso"] .tg-marque{background:none;box-shadow:inset 0 0 0 2px var(--encre);border-radius:50%}
.tg-compte{flex:none;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--sec);font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-compte .tg-retard{color:var(--panne)}
.lg-ligne.tg-ligne{grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"quand corps etat";align-items:center;
  gap:0 12px;min-height:56px;padding:9px 18px}
.tg-ligne .tg-quand{grid-area:quand;display:flex;align-items:center;min-width:0}
.tg-ligne .lg-corps{grid-area:corps}
.tg-ligne .tg-etat{grid-area:etat;justify-self:end}
/* La pilule d'échéance : neutre (gris sur creux, 6,4:1), aujourd'hui (encre sur lavis), en retard
   (--attn sur son lavis, 5,3:1) ; le mot est toujours là. */
.tg-pilule{min-height:24px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.01em}
.tg-pilule[data-urgence="jour"]{background:var(--bleu-t2);color:var(--encre)}
.tg-pilule[data-urgence="retard"]{background:var(--attn-t);color:var(--attn)}
.tg-ligne .lg-corps b{font-size:14.5px}
.tg-ligne .lg-corps span{margin-top:1px}
/* Dans une colonne étroite (le panneau ouvert, le téléphone) : la ligne de Mail sur iPhone — le titre
   prend la largeur, l'échéance en haut à droite, l'état dessous. */
@container (max-width:470px){
  .lg-ligne.tg-ligne{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"corps quand" "corps etat";
    align-items:start;row-gap:5px;padding:11px 14px 11px 16px}
  .tg-ligne .tg-quand{justify-self:end}
  .tg-ligne .tg-etat{justify-self:end}
}
/* passe 5, lot accueil (retour 7) : l'interrupteur « Par date | Par thème » (contrôle segmenté d'iOS) et la liste dans
   l'ordre de Victor, chaque ligne avec « monter » et « descendre » à sa droite. La colonne peut être étroite (380 px) :
   la barre passe sur deux rangs, la ligne garde son titre sur toute la largeur restante. */
.tg-vues{display:inline-flex;flex:none;padding:3px;border-radius:var(--r-pilule);background:var(--creux)}
.tg-vue{min-height:32px;padding:4px 14px;border-radius:var(--r-pilule);font-size:13.5px;font-weight:600;line-height:1.2;color:var(--sec);
  transition:background-color .15s linear,color .15s linear}
.tg-vue[aria-pressed="true"]{background:var(--carte);color:var(--encre);box-shadow:0 1px 3px rgba(2,3,24,.14)}
.tg-barre [data-role="ajouter-tache"]{margin-left:auto}
/* passe 5 : la liste en colonne étroite à côté du panneau Claude Code, l'interrupteur et « Ajouter » sur une ligne. */
@media (min-width:901px){
  .taches-liste .tg-barre{flex-wrap:nowrap;gap:8px}
  .taches-liste .tg-barre [data-role="ajouter-tache"]{min-height:36px;padding:0 14px;font-size:14px;white-space:nowrap}
}
.tg-ordre .tg-tete h2{flex:1}
.tg-retablir{flex:none}
.tg-li-ordre{display:flex;align-items:stretch;min-width:0}
.tg-li-ordre>.lg-ligne{flex:1;min-width:0;padding-right:6px}
.tg-bouger{flex:none;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 10px 4px 0}
.tg-bouge{display:grid;place-items:center;width:32px;height:26px;border-radius:8px;color:var(--sec)}
.tg-bouge{position:relative}
.tg-bouge::before{content:"";position:absolute;left:0;top:-3px;width:32px;height:32px}
@media (max-width:600px){
  .tg-vue{min-height:44px}
  .tg-bouger{flex-direction:row;align-items:center;gap:0;padding:0 2px 0 0}
  .tg-bouge{width:44px;height:44px}
  .tg-bouge::before{display:none}
}
@media (hover:hover){ .tg-bouge:not([disabled]):hover{background:var(--survol);color:var(--encre)} }
.tg-bouge[disabled]{opacity:.28;cursor:default}
.tg-bouge .ic{width:16px;height:16px}
.tg-ic-haut{transform:rotate(-90deg)}
.tg-ic-bas{transform:rotate(90deg)}
/* Le panneau : l'échéance dite en clair, la note, le fil d'une tâche passée. */
.tg-echeance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:14px;color:var(--encre)}
.ptc-carte .tg-note{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--toile);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ptc-carte .ptc-etat:empty{display:none}
.ptc-carte .ptc-etat{margin-top:8px}
.tg-fil{display:flex;flex-direction:column;gap:12px}
.tg-fil-m{min-width:0}
.tg-fil-qui{font-size:12.5px;line-height:1.4;color:var(--sec);margin-bottom:3px}
.tg-fil-qui b{font-weight:700;color:var(--encre)}
.tg-fil-m[data-qui="personne"] .tg-fil-t{display:inline-block;max-width:100%;padding:8px 12px;border-radius:14px;background:var(--bleu-t);
  font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* Les deux aides, en pied du panneau : un plein et un lavis, la ligne du coût dessous. */
.tg-aides{display:flex;flex-direction:column;gap:8px}
.tg-aides-gestes{display:flex;gap:8px;flex-wrap:wrap}
.tg-aides-gestes .b{flex:1 1 auto}
.tg-nudge{font-size:12.5px;line-height:1.45;color:var(--sec)}
.tg-aides .ptc-etat:empty{display:none}
/* Le brief copié : ce qui s'est passé, le lien de secours, le texte en clair, repliable. */
.tg-brief-etat{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ok)}
.tg-brief-etat[data-etat="attn"]{color:var(--attn)}
.tg-brief-etat .ic{width:18px;height:18px;margin-top:1px;stroke-width:2.2}
.tg-brief-lien{margin-top:2px}
.tg-brief-detail{margin-top:8px;border-radius:14px;background:var(--toile);box-shadow:inset 0 0 0 1px var(--ligne)}
.tg-brief-detail summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-size:13.5px;font-weight:600;cursor:pointer;
  border-radius:14px;list-style:none}
.tg-brief-detail summary::-webkit-details-marker{display:none}
.tg-brief-detail summary .ic{width:16px;height:16px;color:var(--sec);transition:transform .15s ease-out}
.tg-brief-detail[open] summary .ic{transform:rotate(90deg)}
.tg-brief-texte{margin:0 14px;max-height:320px;overflow:auto;padding:10px 0 4px;border-top:1px solid var(--ligne);font-family:var(--sans);
  font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--encre)}
.tg-brief-texte:focus-visible{outline-offset:4px}
.tg-brief-gestes{display:flex;justify-content:flex-end;padding:4px 8px 8px}
/* L'état vide de Mes tâches : une phrase calme en titre, ce qui arrivera ici. */
.etat-calme p.tg-vide-t{font-size:24px;line-height:1.25;color:var(--encre);margin-bottom:8px}
/* Au doigt (sous 900 px) : les deux aides prennent chacune la largeur, le plein d'abord. */
@media (max-width:900px){
  .tg-aides-gestes .b{flex:1 1 100%}
  .tg-barre{margin-top:18px}
}
/* ── fin lot V3 ── */

/* ── passe 4, lot F6 ── Le rangement : replié, effacé (D16, 06/10/26) ────────────────────────────────
   Mourad : « on veut de l'ops ici, pas du rangement ». Les groupes de second rang (« Obtenir une
   convention ») et « Tenir la base » descendent dans une zone en bas de Mes tâches, repliée derrière une
   seule ligne qui les compte (« Rangement · 3 conventions, 12 compléments de saisie ») ; ouverte, elle
   reste effacée : des titres de groupe en --sec, des titres de ligne à 72 % de l'encre, une marque creuse,
   et aucune pilule d'urgence colorée — l'échéance se lit en texte, « en retard » aussi, sans le rouge ni
   le lavis. Le repli est un disclosure de 48 px (44 au moins au doigt). Aucune couleur nouvelle : les
   jetons du § 1 ; le titre à 72 % mélange --encre avec le transparent (8,1:1 au plus bas, en clair
   comme en sombre : tests/passe4-rangement.js le mesure). L'objet de la ligne garde --sec tel quel :
   à 72 %, il tomberait à 3,5:1 sur la toile, sous les 4,5:1 de la charte. */
.tg-rangement-zone{margin-top:18px}
.tg-rangement{min-width:0}
.tg-rangement-h{font-size:inherit;font-weight:inherit;line-height:inherit}
.tg-rangement-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 18px;
  border-radius:var(--r-liste);box-shadow:inset 0 0 0 1px var(--ligne);font-size:13.5px;font-weight:600;line-height:1.35;color:var(--sec);
  text-align:left;transition:background-color .15s linear}
.tg-rangement-texte{min-width:0;overflow-wrap:anywhere}
.tg-rangement-tete .ic{width:18px;height:18px;flex:none;transition:transform .15s ease-out}
.tg-rangement-tete[aria-expanded="true"] .ic{transform:rotate(90deg)}
@media (hover:hover){ .tg-rangement-tete:hover{background:var(--survol)} }
.tg-rangement-corps{margin-top:12px}
.tg-rangement-corps .liste-groupee.tg-groupe+.liste-groupee.tg-groupe{margin-top:12px}
/* Un groupe de second rang : sans ombre ni fond, un filet ; le titre en --sec ; la marque creuse. */
.tg-groupe[data-rang="second"]{background:transparent;box-shadow:inset 0 0 0 1px var(--ligne)}
.tg-groupe[data-rang="second"] .tg-tete h2{font-size:14px;font-weight:600;color:var(--sec)}
.tg-groupe[data-rang="second"] .tg-marque{background:none;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--sec)}
.tg-groupe[data-rang="second"] .tg-compte .tg-retard{color:var(--sec)}
/* Les lignes : le titre à 72 % de l'encre (le repli --sec si color-mix manque), « en retard » en mot gris,
   la pilule d'échéance sans ses teintes d'urgence (le mot de la date reste, le lavis et le rouge partent). */
.tg-groupe[data-rang="second"] .lg-corps b{font-weight:600;color:var(--sec);color:color-mix(in srgb,var(--encre) 72%,transparent)}
.tg-groupe[data-rang="second"] .lg-etat.retard{color:var(--sec)}
.tg-rangement .tg-pilule[data-urgence],.tg-groupe[data-rang="second"] .tg-pilule[data-urgence]{background:var(--creux);color:var(--sec);font-weight:600}
/* ── fin lot F6 ── */

/* ══ 13. L'accord d'écriture — le même composant partout (Alex, tâche, raccourci) ══
   Le récapitulatif est rendu par le code depuis la charge : champ, avant → après. Le texte du
   modèle n'y est que le « pourquoi ». Un seul bouton plein. */
.proposition{border-radius:16px;background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne-f);padding:14px 16px 14px}
.prop-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prop-titre{margin-top:8px;font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.prop-pourquoi{margin-top:10px}
.prop-pourquoi .ptc-q{margin-bottom:4px}
.prop-gestes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.prop-resultat{margin-top:12px;font-size:13.5px;line-height:1.5}
/* Ce que le moteur avertit avant le clic (une adresse absente des fiches du pôle) : sur le fond d'attention. */
.prop-avertissements{margin-top:8px;padding:8px 12px 8px 26px;border-radius:12px;background:var(--attn-t);color:var(--encre);font-size:13px;line-height:1.5;list-style:disc}
.prop-resultat.ok{color:var(--ok)}
.prop-resultat.erreur{color:var(--panne)}
.prop-corps-mail{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--toile);font-size:13.5px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow-y:auto}
.recap{margin-top:10px;border-radius:12px;background:var(--toile);padding:2px 12px}
.recap-r{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr);gap:4px 12px;padding:8px 0;font-size:13.5px;line-height:1.45}
.recap-r+.recap-r{border-top:1px solid var(--ligne)}
.recap-r dt{font-weight:600;color:var(--encre);overflow-wrap:anywhere}
.recap-r dd{min-width:0;overflow-wrap:anywhere}
.recap-avant{color:var(--sec)}
.recap-fl{color:var(--sec);padding:0 5px}
.recap-apres{font-weight:600;color:var(--encre)}
.recap-vide{color:var(--sec)}

/* ══ 14. Raccourcis — le dépôt d'un dossier, les plus utilisés, puis les catégories ══
   Passe 2, lot V4 (D9, 05/10/26 ; Mourad : « un vrac, des cartes identiques, sans vie »). Trois blocs,
   une référence chacun : la carte héros « Déposer un dossier » (la carte du jour de l'App Store, en
   bandeau bleu nuit, le titre signature de la charte — le verbe en cyan, l'objet en blanc — et la zone
   de dépôt de Mail sur macOS) ; « Les plus utilisés » (les widgets de Raccourcis d'iOS : deux grandes
   cartes) ; les catégories (les listes de Rappels : une icône au trait du rail, le nom, le compte, et le
   filet cyan qui amorce l'en-tête). Aucune couleur nouvelle : la carte héros pose ses jetons locaux
   (--dp-*) sur les cinq couleurs de la charte et leurs lavis ; en sombre, elle prend les surfaces du
   thème et un filet baby blue. */
.grille-raccourcis{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.grille-raccourcis.rc-groupes{display:flex;flex-direction:column;gap:44px}
.ic-rc{stroke-width:1.75}
.rc-groupe{min-width:0}
.rc-groupe-t{position:relative;display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--ligne)}
.rc-groupe-t::after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:2px;border-radius:2px;background:var(--cyan)}
.rc-groupe-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-bouton);background:var(--bleu-t);color:var(--encre)}
.rc-groupe-h{min-width:0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.rc-groupe-n{margin-left:auto;flex:none;display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:var(--r-pilule);
  background:var(--creux);color:var(--sec);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rc-grille{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.rc-grille-large{gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
/* La carte-geste : l'icône du verbe (créer, modifier), le titre, la table et ce que le geste fait. Au
   survol, le lavis baby blue monte en 150 ms et la carte s'élève de 2 px ; mouvement réduit : rien ne
   bouge (section 20 coupe les transitions, la règle plus bas coupe la montée). */
.carte-raccourci{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;min-width:0;min-height:84px;
  padding:16px 18px;border-radius:var(--r-carte);background:var(--carte);box-shadow:var(--ombre);text-align:left;
  transition:transform .15s var(--spring),box-shadow .15s linear}
.carte-raccourci::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bleu-t);opacity:0;
  transition:opacity .15s linear}
.carte-raccourci.est-gabarit{flex-direction:column;align-items:flex-start;min-height:128px}
.cr-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bleu-t);color:var(--encre)}
.cr-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-sur{font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--sec)}
.cr-titre{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--encre);overflow-wrap:anywhere}
.cr-sous{font-size:12.5px;line-height:1.4;color:var(--sec)}
/* Les deux plus utilisés : plus grands, l'icône en lavis dense. */
.carte-raccourci.cr-large{flex-direction:column;align-items:flex-start;gap:16px;min-height:150px;padding:22px 24px}
.cr-large .cr-ic{width:48px;height:48px;border-radius:14px;background:var(--bleu-t2)}
.cr-large .cr-ic .ic{width:24px;height:24px}
.cr-large .cr-titre{font-size:19px;letter-spacing:-.015em}
/* Sa description (raccourcis.json), deux lignes au plus : ce que le geste fait, sans l'ouvrir. */
.cr-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--sec)}
@media (hover:hover){
  .carte-raccourci:hover,.souleve:hover{transform:translateY(-2px);box-shadow:var(--ombre-survol)}
  .carte-raccourci:hover::before{opacity:1}
}
.carte-raccourci:active{transform:scale(.98);transition-duration:.09s}
@media (prefers-reduced-motion:reduce){ .carte-raccourci:hover,.carte-raccourci:active,.souleve:hover{transform:none} }

/* La carte héros « Déposer un dossier ». */
.rc-depot-place{margin-top:28px}
.rc-depot{--dp-fond:#020318;--dp-encre:#FFFFFF;--dp-sec:rgba(255,255,255,.78);--dp-filet:rgba(152,207,237,.55);--dp-zone:rgba(255,255,255,.04);
  --dp-bouton:#FFFFFF;--dp-bouton-fg:#020318;--dp-bouton-survol:rgba(255,255,255,.86);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 36px;align-items:center;padding:32px 34px;
  border-radius:var(--r-tuile);background:var(--dp-fond);color:var(--dp-encre);box-shadow:var(--ombre)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rc-depot{--dp-fond:var(--carte);--dp-encre:var(--encre);--dp-sec:var(--sec);
  --dp-zone:rgba(152,207,237,.05);--dp-bouton:var(--bouton-bg);--dp-bouton-fg:var(--bouton-fg);--dp-bouton-survol:var(--bouton-survol);
  box-shadow:var(--ombre),inset 0 0 0 1px var(--bleu-t2)} }
:root[data-theme="dark"] .rc-depot{--dp-fond:var(--carte);--dp-encre:var(--encre);--dp-sec:var(--sec);
  --dp-zone:rgba(152,207,237,.05);--dp-bouton:var(--bouton-bg);--dp-bouton-fg:var(--bouton-fg);--dp-bouton-survol:var(--bouton-survol);
  box-shadow:var(--ombre),inset 0 0 0 1px var(--bleu-t2)}
.rc-depot :focus-visible{outline-color:var(--dp-encre)}
.rc-depot-texte{min-width:0}
.rc-depot-sur{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--dp-sec)}
.rc-depot-embleme{display:inline-flex;flex:none}
.rc-depot-titre{margin-top:10px;font-size:36px;font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.rc-depot-verbe{color:var(--cyan)}
.rc-depot-q{margin-top:14px;max-width:46ch;font-size:15px;line-height:1.55;color:var(--dp-sec)}
.rc-depot-note{margin-top:10px;font-size:13px;font-weight:600;line-height:1.45;color:var(--dp-encre)}
.rc-depot-cible{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:200px;padding:22px 20px;
  border:1.5px dashed var(--dp-filet);border-radius:18px;background:var(--dp-zone);text-align:center;
  transition:background-color .15s linear,border-color .15s linear}
.rc-depot-ic{display:grid;place-items:center;width:50px;height:50px;margin-bottom:6px;border-radius:15px;background:rgba(152,207,237,.16);color:var(--bleu)}
.rc-depot-ic .ic{width:26px;height:26px;stroke-width:1.75}
.rc-depot-l{font-size:16px;font-weight:700;line-height:1.35;color:var(--dp-encre)}
.rc-si-survol{display:none}
/* Au doigt, rien ne se glisse : la zone se réduit à sa légende et au bouton. */
@media (hover:none){
  .rc-si-souris{display:none}
  .rc-depot .rc-depot-cible{align-items:stretch;min-height:0;padding:0;border:none;background:none;text-align:left}
  .rc-depot-ic,.rc-depot-l{display:none}
  .rc-depot .rc-depot-choisir{width:100%;max-width:none;margin-top:8px}
}
.rc-depot[data-etat="survol"] .rc-si-souris{display:none}
.rc-depot[data-etat="survol"] .rc-si-survol{display:inline}
.rc-depot[data-etat="survol"] .rc-depot-cible{border-style:solid;border-color:var(--bleu);background:rgba(152,207,237,.16)}
.rc-depot-c{font-size:13px;line-height:1.4;color:var(--dp-sec)}
.rc-depot-choisir{margin-top:12px;background:var(--dp-bouton);color:var(--dp-bouton-fg)}
.rc-depot-choisir .ic{width:18px;height:18px}
@media (hover:hover){ .rc-depot-choisir:hover:not(:disabled):not([aria-busy="true"]){background:var(--dp-bouton-survol)} }
.rc-depot-etat{grid-column:1 / -1;min-width:0}
.rc-depot-etat>p{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.5;color:var(--dp-encre)}
.rc-depot-etat>p+.b{margin-top:6px}
.rc-point{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--cyan);animation:bouton-occupe 1s ease-in-out infinite}
.rc-depot-ok .ic{margin-top:3px;stroke-width:2.2;color:var(--bleu)}
.rc-depot-voir{padding-left:0;color:var(--dp-encre)}
.rc-depot-etat>p.rc-depot-erreur{display:block;padding:10px 14px;border-radius:12px;background:var(--panne-t);color:var(--encre)}
.rc-depot-erreur strong{color:var(--panne)}
/* Quand la colonne se resserre (téléphone, ou panneau de l'agent ouvert à côté), la carte héros
   s'empile : le titre, puis la zone ; le bouton prend la largeur (requête de conteneur : .page-int). */
@container (max-width:720px){
  .rc-depot{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 22px}
  .rc-depot-titre{font-size:30px}
  .rc-depot-cible{min-height:0;padding:20px 16px}
  .rc-depot-choisir{width:100%;max-width:360px}
}
/* Au téléphone, une liste groupée de Réglages iOS plutôt qu'une pile de cartes identiques (anti-modèle
   « des rectangles blancs identiques empilés ») : un bloc arrondi par catégorie, une ligne par geste, un
   filet entre deux lignes ; le lavis marque la ligne pressée. Les deux plus utilisés deviennent deux
   tuiles côte à côte, comme les widgets de Raccourcis. */
@media (max-width:600px){
  .grille-raccourcis.rc-groupes{gap:34px}
  .rc-groupe-t{margin-bottom:12px}
  .rc-grille:not(.rc-grille-large){gap:0;border-radius:var(--r-liste);background:var(--carte);box-shadow:var(--ombre);overflow:hidden}
  .rc-grille:not(.rc-grille-large) .carte-raccourci{min-height:66px;padding:12px 16px;border-radius:0;box-shadow:none}
  .rc-grille:not(.rc-grille-large) .carte-raccourci+.carte-raccourci::after{content:"";position:absolute;top:0;left:66px;right:0;height:1px;background:var(--ligne)}
  .rc-grille:not(.rc-grille-large) .cr-ic{width:36px;height:36px;border-radius:10px}
  .rc-grille:not(.rc-grille-large) .carte-raccourci:active{transform:none}
  .rc-grille:not(.rc-grille-large) .carte-raccourci:active::before{opacity:1}
  .rc-grille-large{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .carte-raccourci.cr-large{gap:12px;min-height:0;padding:16px}
  .cr-large .cr-ic{width:42px;height:42px;border-radius:12px}
  .cr-large .cr-titre{font-size:16px}
  .cr-desc{display:none}
}

/* ══ 15. La feuille — feuille iOS : centrée sur ordinateur, montée par le bas au téléphone ══ */
.feuille{margin:auto;width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 48px);border:none;border-radius:var(--r-carte);
  padding:0;background:var(--carte);color:var(--encre);box-shadow:var(--ombre-feuille);overflow:auto;overscroll-behavior:contain}
.feuille::backdrop{background:var(--voile)}
.feuille[open]{animation:feuille-entre .25s var(--spring)}
@keyframes feuille-entre{from{opacity:0;transform:translateY(12px) scale(.98)}}
.fe-poignee{display:none}
.fe-corps{padding:22px 24px 22px}
.fe-tete{display:flex;align-items:flex-start;gap:12px}
.fe-tete>div{flex:1;min-width:0}
.fe-titre{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.22;margin-top:3px;overflow-wrap:anywhere}
/* Fermer : le disque gris des feuilles iOS (30 px, porté par l'icône) dans une cible de 44 px ;
   un aria-label (socle.js › ouvrirFeuille). */
.fe-fermer{flex:none;width:44px;height:44px;margin:-7px -10px 0 0;border-radius:50%;color:var(--sec);display:grid;place-items:center;
  transition:color .15s linear,transform .09s ease-out}
.fe-fermer .ic{box-sizing:content-box;width:14px;height:14px;padding:8px;border-radius:50%;background:var(--creux);stroke-width:2.2}
.fe-fermer:active{transform:scale(.94)}
@media (hover:hover){ .fe-fermer:hover{color:var(--encre)} }
.fe-texte{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--sec)}
.fe-form{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.fe-gestes{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-top:22px}
.fe-erreur{padding:10px 14px;border-radius:12px;background:var(--panne-t);font-size:14px;line-height:1.5;color:var(--encre)}
.fe-erreur b{color:var(--panne)}
.fe-ok{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ok)}
.fe-ok .ic{width:18px;height:18px;stroke-width:2.2}
.fe-conflit{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--attn-t);font-size:14px;line-height:1.5}
.fe-conflit b{color:var(--attn)}
.fe-conflit .recap{background:var(--carte)}
.fe-conflit .ca-report-choix{margin-top:10px}
.fe-section{margin-top:20px}
.fe-section-t{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin-bottom:8px}
.fe-section .champ-aide{margin-top:8px}
.fe-liste{border-radius:14px;background:var(--toile);padding:2px 14px}
.fe-liste li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;line-height:1.45}
.fe-liste li+li{border-top:1px solid var(--ligne)}
.fe-liste li span:last-child{color:var(--sec);text-align:right}
/* Réglages, « Ce qu'Alex retient » (passe 1, 02/10/26) : une leçon par ligne, son texte à gauche,
   « Effacer » à droite ; le texte va à la ligne, le geste ne se comprime jamais. */
/* Sous un en-tête de section, un sous-titre en toutes lettres (pas deux petites capitales de suite). */
.fe-section-t.fe-section-t2{margin:14px 0 4px;font-size:14px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--encre)}
.fe-sous{margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--encre)}
.fe-memoire li.fe-lecon{align-items:flex-start}
.fe-liste li span.fe-lecon-t{flex:1;min-width:0;color:var(--encre);text-align:left;overflow-wrap:anywhere}
.fe-lecon-t small{font-size:12px;color:var(--sec)}
.fe-liste li .fe-lecon-g{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--sec)}
.fe-lecon-note{font-size:12px;line-height:1.4}

/* Les champs — formulaires iOS (D2) : libellé au-dessus, 44 px de haut, filet 16 %, coins 10 px ;
   au focus, le filet passe au bleu nuit (le repère lisible, 20:1) dans un halo cyan (ce qui est
   en cours) ; l'erreur sous le champ, en rouge foncé, commence par le mot « Erreur ». */
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ-l{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--encre)}
.champ-fac{font-weight:500;color:var(--sec)}
.champ-saisie{display:block;width:100%;min-height:44px;padding:10px 12px;border:none;border-radius:var(--r-bouton);background:var(--carte);
  box-shadow:inset 0 0 0 1px var(--ligne-f);font-size:15px;line-height:1.4;color:var(--encre);outline:none;
  transition:box-shadow .15s linear}
textarea.champ-saisie{min-height:88px;resize:vertical}
select.champ-saisie{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--sec) 50%),linear-gradient(135deg,var(--sec) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.champ-saisie:focus{box-shadow:inset 0 0 0 1.5px var(--encre),0 0 0 4px var(--cyan-t)}
.champ-saisie::placeholder{color:var(--ter)}
.champ-saisie[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--panne)}
.champ-saisie[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1.5px var(--panne),0 0 0 4px var(--cyan-t)}
.champ-aide{font-size:12.5px;line-height:1.45;color:var(--sec)}
.champ-erreur{font-size:13px;line-height:1.45;color:var(--panne);font-weight:600}
/* La valeur comprise d'un nombre, sous le champ, telle qu'elle partira (« Compris : 1 500 »). */
.champ-compris{font-size:12.5px;line-height:1.45;color:var(--sec);font-variant-numeric:tabular-nums}
.champ-compris:empty{display:none}
.champ-case{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.champ-case input{width:20px;height:20px;accent-color:var(--encre)}
.champ-multiple{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-bouton);background:var(--carte);padding:2px 12px;
  box-shadow:inset 0 0 0 1px var(--ligne-f)}
.champ-multiple label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px}
.champ-multiple label+label{border-top:1px solid var(--ligne)}
.champ-multiple input{width:18px;height:18px;accent-color:var(--encre)}
/* Le contrôle segmenté — Réglages iOS, de 2 à 4 options exactes d'Airtable. Le choix : une pastille
   blanche en relief et le texte en 700 (pas la couleur seule). 36 px vus, 44 px sous 900 px. */
.seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--creux);min-width:0}
.seg button,.seg label{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;
  padding:4px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--sec);text-align:center;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s linear,color .15s linear,box-shadow .15s linear}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"],.seg label.est-choisi{background:var(--releve);color:var(--encre);font-weight:700;box-shadow:var(--ombre-sel)}
.seg label:focus-within{outline:2px solid var(--anneau);outline-offset:1px}
.seg .badge{height:18px;min-width:18px;font-size:11px}

/* ══ 16. Le panneau droit : Fil · Alex — déplacé dans alex.css (passe UX, lot U2, 05/10/26) ══
   Restent ici le texte du modèle nettoyé (Alex, la tâche, le pourquoi d'une proposition) et le
   voile, partagé avec le panneau de tâche. */
/* Le texte du modèle, nettoyé par rendreTexteModele : une colonne de lecture sobre. */
.texte-modele{font-size:14.5px;line-height:1.6;overflow-wrap:anywhere;min-width:0}
.texte-modele>*+*{margin-top:8px}
.texte-modele h3{font-size:15px;font-weight:650;line-height:1.35;margin-top:14px}
.texte-modele h4{font-size:14px;font-weight:650;line-height:1.35;margin-top:12px}
.texte-modele ul,.texte-modele ol{padding-left:20px}
.texte-modele ul{list-style:disc}
.texte-modele ol{list-style:decimal}
.texte-modele li+li{margin-top:3px}
.texte-modele strong{font-weight:650}
.texte-modele code{font-family:var(--mono);font-size:.88em;background:var(--creux);border-radius:5px;padding:1px 5px}
.texte-modele pre{background:var(--toile);border-radius:10px;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.5}
.texte-modele pre code{background:none;padding:0}
.texte-modele blockquote{border-left:3px solid var(--bleu);padding-left:12px;color:var(--sec)}
.texte-modele table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:13px}
.texte-modele th,.texte-modele td{padding:5px 10px 5px 0;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
.texte-modele th{font-weight:650}

.voile{position:fixed;inset:0;z-index:55;background:var(--voile)}

/* ══ 17. La connexion — configuration de l'iPhone : une question, un champ, un bouton plein ══ */
.page-connexion{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(40px,10vh,110px) 16px 40px}
.cx{width:min(452px,100%)}
.cx-marque{display:flex;align-items:center}
.cx-marque .logo-img{height:34px}
.cx .surtitre{margin-top:30px}
.cx-q{font-family:var(--serif);font-weight:800;font-size:32px;line-height:1.1;letter-spacing:-.03em;margin:8px 0 12px;text-wrap:balance}
.cx-phrase{font-size:16px;line-height:1.55;color:var(--sec);margin-bottom:22px}
.cx-phrase b{color:var(--encre);font-weight:600;overflow-wrap:anywhere}
.cx-form{display:grid;gap:12px}
/* Le champ de la configuration de l'iPhone : grand, un seul ; au focus, filet bleu nuit et halo cyan. */
.cx-champ{width:100%;height:56px;border:0;border-radius:14px;background:var(--carte);padding:0 18px;font-size:17px;
  box-shadow:inset 0 0 0 1px var(--ligne-f);outline:none;transition:box-shadow .15s linear}
.cx-champ::placeholder{color:var(--ter)}
.cx-champ:focus,.cx-cases input:focus{box-shadow:inset 0 0 0 1.5px var(--encre),0 0 0 4px var(--cyan-t)}
.cx-champ[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--panne)}
.cx-aide{min-height:22px;font-size:14.5px;line-height:1.5;color:var(--sec)}
.cx-aide.erreur{color:var(--panne);font-weight:600}
.cx-cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cx-cases input{width:100%;height:60px;border:0;border-radius:12px;background:var(--carte);text-align:center;
  font:700 26px var(--serif);box-shadow:inset 0 0 0 1px var(--ligne-f);caret-color:var(--encre);outline:none;
  font-variant-numeric:tabular-nums;transition:box-shadow .15s linear}
/* Les liens de la connexion : la grammaire du bouton texte (bleu nuit, souligné au survol), 44 px. */
.cx-liens{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-top:6px}
.cx-lien{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:600;color:var(--encre);text-underline-offset:3px}
@media (hover:hover){ .cx-lien:hover:not(:disabled){text-decoration:underline} }
.cx-lien:disabled{opacity:.45;cursor:default;text-decoration:none}
.cx-pied{margin-top:28px;max-width:452px;font-size:13px;line-height:1.55;color:var(--sec)}
/* Mode dev, « Qui entre ? » : une liste groupée de Réglages, une personne par ligne. */
.cx-personnes{border-radius:var(--r-liste);background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne);overflow:hidden}
.cx-personne{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px;text-align:left;
  transition:background-color .15s linear}
.cx-personne+.cx-personne{border-top:1px solid var(--ligne)}
@media (hover:hover){ .cx-personne:hover{background:var(--survol)} }
.cx-personne:active{background:var(--bleu-t)}
.cx-personne:focus-visible{outline-offset:-3px;border-radius:var(--r-liste)}
.cx-personne[aria-busy="true"]{background:var(--bleu-t)}
.cx-personne[aria-busy="true"] .ic{opacity:0}
.cx-personne>span:nth-child(2){flex:1;min-width:0}
.cx-personne b{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.cx-personne small{display:block;font-size:12.5px;line-height:1.4;color:var(--sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-personne .ic{color:var(--ter)}
.cx-personne:disabled:not([aria-busy="true"]){opacity:.45;cursor:default}
/* Centrée sur ordinateur par des marges automatiques, pas par justify-content : une liste plus
   haute que l'écran (mode dev, douze personnes) déborde alors vers le bas seulement, le haut de la
   carte reste atteignable. */
@media (min-width:600px){
  .page-connexion{padding-top:40px}
  .cx{margin:auto 0}
  .cx-carte{background:var(--carte);border-radius:var(--r-tuile);box-shadow:var(--ombre);padding:38px 38px 30px}
  .cx-q{font-size:36px}
}

/* ══ 18. Tâches en deux colonnes au-delà de 900 px ═══════════════════════════
   passe 5, lot claude (retour 8 du 07/10) : la liste à gauche (400 px), le panneau de la tâche toujours à droite —
   la fiche en haut, Claude Code dessous. Sous 900 px : une colonne, le panneau en feuille. */
@media (min-width:901px){
  .vue[data-vue="taches"]{overflow:hidden;display:flex;flex-direction:column}
  .taches{flex:1;min-height:0;grid-template-columns:minmax(340px,400px) minmax(0,1fr)}
  .taches-liste{overflow-y:auto;overscroll-behavior:contain;min-height:0}
  .taches .taches-liste .page{padding-left:24px;padding-right:20px}
  .taches .titre-ecran{font-size:28px}
  .panneau-tache{border-left:1px solid var(--ligne);min-height:0}
}
/* Sous 900 px : le panneau de tâche passe par-dessus, une feuille. */
@media (max-width:900px){
  .panneau-tache{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(600px,100%);box-shadow:var(--ombre-feuille);
    transform:translateX(104%);visibility:hidden;transition:transform .25s var(--spring),visibility 0s .25s}
  .taches[data-panneau="ouvert"] .panneau-tache{transform:none;visibility:visible;transition:transform .25s var(--spring)}
}

/* ══ 19. Téléphone et tablette : le rail devient la barre d'onglets du haut ══
   L'anatomie d'une barre d'onglets (icône sur libellé, badge à l'épaule), gardée en haut comme au
   cockpit tech : le bas est pris par la pastille d'Alex et les feuilles qui montent. Les
   panneaux deviennent des feuilles plein écran. */
@media (max-width:900px){
  .coquille{flex-direction:column;height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
  .scene{display:block}
  .vue{overflow:visible}
  .rail{position:sticky;top:0;z-index:30;width:100%;flex-direction:row;align-items:stretch;gap:2px;overflow:visible;
    padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));background:var(--lat-fort);border-right:none;
    border-bottom:1px solid var(--ligne)}
  .rail-tete,.rail-pied{display:none}
  .rail-nav{display:contents}
  .rail-entree{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:5px 2px 4px;
    border-radius:14px;font-size:11px;font-weight:600;color:var(--sec);text-align:center}
  /* L'onglet courant : une capsule de lavis derrière l'icône et le libellé en 700, pas la couleur seule. */
  .rail-entree[aria-current="page"]{background:none;color:var(--encre);font-weight:700}
  .rail-entree .ic{box-sizing:content-box;padding:3px 12px;border-radius:var(--r-pilule);transition:background-color .15s linear}
  .rail-entree[aria-current="page"] .ic{background:var(--bleu-t2)}
  .rail-entree .rail-l{flex:none;max-width:100%}
  /* passe 2, lot V1 (D1) : Aujourd'hui · Indicateurs · Tâches · Plus. Les trois autres écrans
     passent dans la feuille « Plus », qui se dit courante quand l'un d'eux est affiché ; Aujourd'hui
     garde sa marque : sa capsule est pleine (bleu nuit, icône blanche) quand il est choisi. */
  .rail-filet,.rail-jour-date,.rail-long{display:none}
  .rail-court{display:inline}
  .rail-entree[data-plus="oui"]{display:none}
  .rail-plus{display:flex}
  .rail-jour{gap:3px;min-height:54px;padding:5px 2px 4px;border-radius:14px;background:none;color:var(--sec);box-shadow:none}
  .rail-jour[aria-current="page"]{background:none;color:var(--encre);box-shadow:none}
  .rail-jour-l{display:contents;font-size:11px;font-weight:600}
  .rail-jour[aria-current="page"] .rail-jour-l{font-weight:700}
  .rail-jour[aria-current="page"] .ic{background:var(--bouton-bg);color:var(--bouton-fg)}
  .rail-jour .badge{box-shadow:0 0 0 2px var(--toile)}
  .rail-plus[data-courant="oui"]{color:var(--encre);font-weight:700}
  .rail-plus[data-courant="oui"] .ic{background:var(--bleu-t2)}
  /* Les tuiles repliées, au doigt : le résumé un peu moins large, le chevron à la même place. */
  .ti-resume{padding:18px 52px 16px 18px}
  .ti-plus{padding:0 18px 16px}
  .ti-chevron{top:16px;right:14px}
  /* « Tout déplier » passe sous le titre, à gauche. */
  .tete-vue{flex-wrap:wrap}
  .tete-outil{order:3;align-self:auto;margin:-4px 0 0 -10px}
  .rail-entree .badge{position:absolute;top:1px;left:calc(50% + 8px);height:18px;min-width:18px;padding:0 5px;font-size:11px;
    box-shadow:0 0 0 2px var(--toile)}
  .bouton-compte{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -6px 0 0;border-radius:50%}
  .bouton-compte .disque{width:34px;height:34px;font-size:14px}
  .page{padding:22px 16px 104px}
  .section{margin-top:48px}
  .titre-ecran{font-size:28px}
  .phrase-jour{font-size:23px;line-height:1.25;letter-spacing:-.02em}
  .phrase-jour .phrase-n{font-size:27px}
  .phrase-jour.est-calme,.etat-calme-t{font-size:23px}
  .section-t h2{font-size:20px}
  /* Au doigt, la hauteur elle-même fait 44 px. */
  .b,.b-petit{min-height:44px}
  .b::before,.b-petit::before{top:0;bottom:0}
  .b-petit{padding-top:8px;padding-bottom:8px}
  .b-icone{width:44px;height:44px}
  .b-lien{min-height:44px}
  .seg button,.seg label{min-height:44px}
  .lg-ligne{min-height:48px}
  /* Le panneau droit (feuille plein écran) et la pastille d'Alex : dans alex.css (lot U2, 05/10). */
  /* Le panneau de tâche : plein écran, monté par le bas. */
  .panneau-tache{width:100%;transform:translateY(102%)}
  .ptc-tete{padding-top:max(16px,env(safe-area-inset-top));padding-left:16px;padding-right:12px}
  .ptc-corps{padding:16px 16px 22px}
  .ptc-bas{padding-left:16px;padding-right:16px}
  /* La feuille : montée par le bas, sa poignée, ses boutons en pleine largeur. */
  .feuille{margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;border-radius:20px 20px 0 0}
  .feuille[open]{animation:feuille-monte .25s var(--spring)}
  @keyframes feuille-monte{from{transform:translateY(100%)}}
  .fe-poignee{display:block;width:38px;height:5px;border-radius:3px;background:var(--ligne-f);margin:8px auto 0}
  .fe-corps{padding:14px 16px calc(18px + env(safe-area-inset-bottom))}
  .fe-gestes .b{flex:1}
  .compo textarea{font-size:16px}
  .champ-saisie{font-size:16px}
}
/* Entre 601 et 900 px, la place revient : l'icône à côté du libellé. */
@media (min-width:601px) and (max-width:900px){
  .rail-entree{flex-direction:row;gap:8px;min-height:46px;padding:0 10px;font-size:14px;font-weight:500}
  .rail-entree .ic{padding:0;background:none}
  .rail-entree[aria-current="page"]{background:var(--bleu-t2);font-weight:700}
  .rail-entree[aria-current="page"] .ic{background:none}
  .rail-entree .badge{position:static;box-shadow:none}
  /* passe 2 : à cette largeur, Aujourd'hui choisi est plein (bleu nuit), les autres en lavis. */
  .rail-jour[aria-current="page"]{background:var(--bouton-bg);color:var(--bouton-fg)}
  .rail-jour[aria-current="page"] .ic{background:none;color:currentColor}
  .rail-jour-l{font-size:14px}
  .rail-plus[data-courant="oui"]{background:var(--bleu-t2)}
  .rail-plus[data-courant="oui"] .ic{background:none}
}
/* Au téléphone, les gestes d'une carte se rangent comme les boutons d'une notification iOS : le
   geste recommandé seul sur son rang (plein sur la première carte, lavis sur les suivantes), les
   autres lavis se partagent le suivant, puis les boutons texte sur le dernier rang, « Plus tard »
   à droite. Le saut de rang est un pseudo-élément de pleine largeur et de hauteur nulle. */
@media (max-width:640px){
  .carte-action{padding:16px 16px 14px;border-radius:18px}
  .ca-titre{font-size:18px}
  .ca-gestes>.b{flex:1 1 auto;order:1}
  .ca-gestes>[data-recommande]{flex:1 1 100%;order:0}
  .ca-gestes::after{content:"";order:2;flex:1 1 100%;height:0;margin-top:-8px}
  .ca-gestes>.b-texte{flex:0 0 auto;order:3;padding-left:4px;padding-right:12px}
  .ca-gestes>.b-texte:last-child{margin-left:auto;padding-left:12px;padding-right:4px}
  .tuile-indicateur{padding:18px 18px 16px}
  .ti-n{font-size:42px}
  /* passe 2 : une ligne de la base à tenir, son geste dessous. */
  .carte-tenue{padding:16px 16px 14px;border-radius:18px}
  .tenue-ligne{grid-template-columns:minmax(0,1fr)}
  .tenue-ligne>.b{justify-self:start}
  .lg-ligne{grid-template-columns:52px minmax(0,1fr) auto;padding-left:16px;padding-right:14px;gap:0 10px}
  .lg-prop{grid-template-columns:minmax(0,1fr);padding-left:16px;padding-right:16px}
  .lg-prop-gestes{justify-content:flex-start}
  .recap-r{grid-template-columns:minmax(0,1fr)}
  /* Quatre options exactes d'Airtable tiennent sur 343 px : moins d'air, jamais d'ellipse. */
  .seg button,.seg label{padding-left:5px;padding-right:5px;font-size:13px}
}

/* ══ 20. Réduire les animations : tout est coupé, l'état de repos est l'état final ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ══ 21. Mails et calendrier — Mail et Calendrier d'Apple (passe 2, lot V5, 05/10/26) ═══════════════
   « Mes mails » : la liste de Mail — l'expéditeur en tête de ligne, la date relative à droite, l'objet,
   l'extrait sur deux lignes en gris ; le non-lu est marqué d'un point cyan ET de la graisse (jamais la
   couleur seule), les mails sont regroupés par jour. « Mon calendrier » : la présentation en liste de
   Calendrier — aujourd'hui en tête, plus grand ; l'heure à gauche (début sur fin), une barre de teinte
   (baby blue, un fond), le titre, ses participants et son lieu en gris ; le passé s'efface (--ter), ce
   qui est en cours se dit par un mot et un point cyan (D1 : le cyan dit « en cours »). Une ligne est un
   lien (<a target="_blank" rel="noopener">) vers Gmail ou Google Agenda ; le seul geste de la ligne,
   « Répondre avec <agent> », est un bouton texte à côté, jamais dans le lien. Aucune couleur nouvelle :
   que des jetons de la section 1. Cibles de 44 px au doigt (le lien fait 44 px au moins) ; le mouvement
   réduit est coupé par la section 20. Préfixe gm- ; le lot V1 écrit les sections, ce lot le contenu. */
.gm{max-width:760px}
.gm-entete{display:block}
.gm-contexte{font-size:14.5px;line-height:1.5;color:var(--sec)}
.gm-barre{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;margin-top:10px}
.gm-compte{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;line-height:1.4;color:var(--sec);overflow-wrap:anywhere}
.gm-actions{display:flex;flex-wrap:wrap;gap:2px;margin:0 -10px 0 auto}
.gm-confirme{margin-top:12px;padding:14px 18px 16px;background:var(--carte);border-radius:var(--r-liste);box-shadow:var(--ombre)}
.gm-confirme p{font-size:14.5px;line-height:1.5}
.gm-gestes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gm-erreur{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--panne)}
.gm-note{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--sec)}
.gm-note-fort{margin:0 0 18px;padding:10px 14px;border-radius:var(--r-bouton);background:var(--attn-t);color:var(--attn);font-weight:600}
.gm-fichier{font-family:var(--mono);font-size:.92em;padding:1px 6px;border-radius:6px;background:var(--creux);color:var(--encre)}
.gm-etat{margin-top:8px}
.gm-entete+.gm-etat{margin-top:32px}
/* .etat-calme p (section 8) l'emporte sur .etat-calme-t : le titre d'un état de ce lot reprend son corps et son encre. */
.etat-calme.gm-etat .etat-calme-t{font-size:24px;line-height:1.25;color:var(--encre)}
.etat-calme.gm-etat .gm-note{font-size:13.5px;color:var(--sec)}
.etat-calme.gm-etat .gm-note-fort{color:var(--attn)}
.gm-panne{margin-top:20px}
/* La carte d'un groupe (un jour, ou un jour de mails) : la liste groupée de Réglages iOS, comme .liste-groupee. */
.gm-carte{margin-top:20px;padding:12px 0 4px;overflow:hidden;background:var(--carte);border-radius:var(--r-liste);box-shadow:var(--ombre)}
.gm-entete+.gm-carte,.gm-chargement .gm-carte{margin-top:20px}
.gm-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 18px 8px}
.gm-tete h2,.gm-tete h3{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.gm-n,.gm-date{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--sec);font-variant-numeric:tabular-nums}
.gm-auj .gm-tete h2{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.gm-auj .gm-date{font-size:13.5px}
.gm-sous{margin:36px 0 -4px;font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--sec)}
.gm-liste{list-style:none}
.gm-liste>li{border-top:1px solid var(--ligne)}
.gm-rien{padding:2px 18px 14px;font-size:14.5px;line-height:1.5;color:var(--sec)}
.gm-rien-hors{margin-top:12px;padding:0 2px}
/* Une ligne : un lien qui occupe toute la place (44 px au moins), le geste de la ligne à côté. */
.gm-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px;padding-right:10px}
.gm-lien{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:10px;align-items:start;min-height:44px;padding:11px 10px 11px 18px;
  color:inherit;text-decoration:none;transition:background-color .15s linear}
@media (hover:hover){ .gm-lien:hover{background:var(--survol)} }
.gm-lien:focus-visible{outline-offset:-3px}
.gm-corps{display:block;min-width:0}
.gm-pt{width:8px;height:8px;margin-top:7px;border-radius:50%;flex:none}
.gm-ligne[data-non-lu="oui"] .gm-pt{background:var(--cyan)}
.gm-l1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gm-de{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600;line-height:1.4}
.gm-quand{flex:none;font-size:12.5px;line-height:1.4;color:var(--sec);font-variant-numeric:tabular-nums}
.gm-objet{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;line-height:1.4}
.gm-extrait{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin-top:1px;
  font-size:13.5px;line-height:1.45;color:var(--sec)}
.gm-ligne[data-non-lu="oui"] .gm-de{font-weight:800}
.gm-ligne[data-non-lu="oui"] .gm-objet{font-weight:700}
.gm-ligne[data-non-lu="oui"] .gm-quand{font-weight:700;color:var(--encre)}
.gm-repondre{align-self:center;white-space:nowrap}
/* Un événement : l'heure, la barre de teinte, le titre et ce qui le complète, l'état s'il y en a un. */
.gm-evt-lien{grid-template-columns:76px 4px minmax(0,1fr) auto;column-gap:12px;align-items:stretch;padding:10px 18px}
.gm-heure{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.gm-heure .gm-fin{font-size:13px;font-weight:500;color:var(--sec)}
.gm-heure-jour{font-size:12.5px;font-weight:600;color:var(--sec)}
.gm-trait{min-height:36px;border-radius:2px;background:var(--bleu)}
.gm-titre{display:block;font-size:14.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.gm-meta{display:block;margin-top:1px;font-size:13px;line-height:1.4;color:var(--sec);overflow-wrap:anywhere}
.gm-statut{display:inline-flex;align-items:center;align-self:center;gap:6px;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--sec)}
.gm-evt[data-etat="en-cours"] .gm-trait{background:var(--cyan)}
.gm-evt[data-etat="en-cours"] .gm-statut{color:var(--encre)}
.gm-evt[data-etat="en-cours"] .gm-statut::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:bouton-occupe 1.4s ease-in-out infinite}
.gm-evt[data-etat="passe"] .gm-heure,.gm-evt[data-etat="passe"] .gm-titre{color:var(--ter)}
.gm-evt[data-etat="passe"] .gm-trait{background:var(--creux)}
/* Le chargement : la forme des lignes, pas un spinner. */
.gm-gab{display:grid;grid-template-columns:44px minmax(0,1fr) 52px;gap:0 12px;align-items:center;padding:14px 18px;border-top:1px solid var(--ligne)}
.gm-gab .gab{height:12px}
@media (max-width:900px){
  .gm-ligne{grid-template-columns:minmax(0,1fr);padding-right:0}
  .gm-lien{padding-right:16px}
  .gm-repondre{justify-self:start;margin:-6px 0 6px 28px}
  .gm-actions{margin-right:-8px}
  .etat-calme.gm-etat .etat-calme-t{font-size:22px}
}
@media (max-width:640px){
  .gm-tete{padding-left:16px;padding-right:16px}
  .gm-lien{padding-left:16px}
  .gm-evt-lien{grid-template-columns:64px 4px minmax(0,1fr);column-gap:10px;padding:10px 16px}
  .gm-statut{grid-column:3;justify-self:start;margin-top:2px}
  .gm-rien{padding-left:16px;padding-right:16px}
  .gm-gab{padding-left:16px;padding-right:16px}
}

/* ══ 22. L'épure — passe 3, lot E1 (décision D11, Mourad le 05/10 la nuit : « beaucoup trop verbeux ») ══
   Une ligne se coupe en une ligne, par des points de suspension, et se lit en entier quand on déplie
   (la carte par « Pourquoi ? », la tuile par son résumé) : la coupe tient quel que soit le texte du
   serveur. Références : la notification iOS (un titre, une ligne, les gestes), « plus » de l'App Store
   (le texte replié se déplie sur place), le Résumé de Fitness (un chiffre, une ligne), les widgets de
   Raccourcis (le verbe, une ligne). Aucune couleur nouvelle : les jetons de la section 1. */
.ca-une-ligne,.ti-une-ligne{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cf-dit.ca-une-ligne,.ca-pourquoi.ca-une-ligne,.ti-raison.ti-une-ligne{display:block}
/* La carte d'action : le titre sur deux lignes au plus, la ligne de contexte et « Pourquoi ? » au bout. */
.ca-titre{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ca-ligne{display:flex;align-items:center;gap:0 6px;min-width:0;margin-top:4px}
.ca-ligne>.ca-pourquoi{flex:1 1 auto;min-width:0;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-pq{flex:none;margin:-6px -10px -6px 0;font-size:13px;color:var(--encre)}
.carte-action[data-pourquoi="ouvert"] .ca-ligne{align-items:flex-start}
.carte-action[data-pourquoi="ouvert"] .ca-ligne>.ca-pourquoi{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.carte-action[data-pourquoi="ouvert"] .ca-pq{margin-top:-7px}
/* Ce que « Pourquoi ? » déplie : la recommandation, la signature et le pourquoi d'une transmission, les
   gestes au-delà de deux (en boutons texte : le rang des gestes reste celui de la carte). */
.ca-plus{margin-top:10px;padding-top:10px;border-top:1px solid var(--ligne)}
.ca-plus>*+*{margin-top:6px}
.ca-plus>.ca-reco{margin-top:0;font-size:14.5px}
.ca-plus>.ca-reco+*{margin-top:8px}
.ca-plus .ca-signe{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--sec)}
.ca-plus-t{font-size:13.5px;line-height:1.5;color:var(--sec);overflow-wrap:anywhere}
.ca-plus-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-left:-10px}
/* Le récapitulatif d'une proposition d'écriture reste visible : c'est l'accord qu'on donne. */
.ca-reco.ca-accord{margin-top:8px;font-size:14px;line-height:1.5}
/* La tuile repliée : la ligne comparative (ou la raison d'une tuile qui ne se mesure pas) et, en alerte,
   sa raison, une ligne chacune ; dépliée, la tuile les montre en entier. */
.ti-comp>.ti-comp-t.ti-une-ligne{flex:1 1 auto}
.ti-raison.ti-une-ligne{margin-top:6px}
.ti-pli[open] .ti-une-ligne{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* La suite d'une ligne comparative à plusieurs faits : lue par les lecteurs d'écran, montrée dépliée. */
.ti-comp-suite{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ti-pli[open] .ti-comp-suite{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
/* La carte de raccourci : le verbe, une ligne ; chacune se coupe en une ligne. */
.carte-raccourci .cr-texte{flex:1 1 auto}
.carte-raccourci .cr-titre,.carte-raccourci .cr-sous{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* La feuille d'un raccourci : sa description, une phrase sous le titre. */
.rc-feuille-desc{margin:2px 0 18px;color:var(--sec)}
.rc-depot-q{max-width:52ch}
/* La pilule « Données d'essai » au bout de la ligne d'état de l'agent, et la saisie d'une tâche sans note. */
.cv-etat .cv-essai{margin-left:8px;vertical-align:1px}
.compo-note:empty{margin:0;min-height:0}
/* La phrase du jour en deux temps : le compte, puis, à la ligne et en gris, ce qui presse d'abord. */
.phrase-jour .phrase-suite{display:block;color:var(--sec)}
@media (max-width:900px){
  .carte-action .ca-pq,.carte-action .ca-pq.b-petit{min-height:32px;padding-top:4px;padding-bottom:4px}
  .carte-action .ca-pq::before{top:-6px;bottom:-6px}
  /* Trois gestes au plus : le recommandé sur son rang, le second et « Plus tard » sur le suivant (le saut
     de rang de la passe UX servait aux liens, qui sont maintenant sous « Pourquoi ? »). */
  .carte-action .ca-gestes::after{content:none}
}