/* ================= DIRECTION VISUELLE DIPYLON (09/2026) =================
     Source : DESIGN.md « papier de santé » — papier à peine froid, encre
     bleu-vert, Spectral pour les titres, Radio Canada pour l'interface,
     angles 8/12 px, teinte + pictogramme par module, tampon violet pour l'IA.
     Les anciens noms de jetons (--line, --accent…) sont conservés comme
     alias : le script les utilise dans ses gabarits. */
  :root{
    --fond:#ffffff; --surf:#ffffff; --surf2:#eef3f3; --filet-doux:#dce5e6; --lgf:var(--surf2);
    --encre:#1b2a30; --encre2:#3b4c53; --encre3:#4d5e65;
    --filet:#b9cacd; --filet2:#72878e;
    --marque:#72bfc8; --marque-f:#26707d; --marque-e:#1d5b67; --marque-d:#e3f2f4;
    --marque-nuit:#14304a; --marque-clair:#8CCFD7; --menu:var(--marque-nuit); /* fond du menu latéral */
    /* V-120 : identité des assistants IA — le violet les démarque de tout le
       reste du portail (règle : toute zone IA porte .iaZone / .btn-ia). */
    --ia:#6d47c7; --ia-f:#553296; --ia-d:#f1ebfd; --ia-b:#cdbbf2; --ia-texte:#ffffff; --sur-fort:#ffffff;
    --ok:#1b6e36; --ok-d:#e3f4e8; --att:#a34a06; --att-d:#fdf1dc; --crit:#b91c1c; --crit-d:#fde8e8;
    --bleu:#3556a8; --bleu-d:#e7eefb;
    --abs-defaut:#0b6f65; /* planning des absences : teinte par défaut, cellules ET légende */
    --vague1:var(--surf2); --vague2:var(--marque-d); --vague3:var(--marque);
    --terminal:#0f1b22; --terminal-texte:#dce8ea; --terminal-acc:#8CCFD7;
    /* alias historiques : seuls restent ceux que les zones JS emploient encore (lot C9) */
    --ink-2:var(--encre2); --ink-3:var(--encre3);
    --line:var(--filet); --line-2:var(--filet2); --bord:var(--filet);
    --accent:var(--marque-f); --accent-dark:var(--marque-e); --accent-soft:var(--marque-d);
    --ia-bord:var(--ia-b);
    --warn:var(--att); --warn-soft:var(--att-d);
    --ok-soft:var(--ok-d);
    --titre:var(--f-titre);
    --ui:var(--f-ui);
    --r:8px; --rc:12px; --hd-h:69px; /* lot C6a : .hd passe de 10 à --e-3 (12) en haut et en bas */
    --shadow:var(--ombre-1);
    --ombre-haut:var(--ombre-2);
    /* Charte commune (docs/decisions/2026-09-26-charte-commune.md, lot C1) :
       jetons ajoutés sans rien remplacer ; les anciens noms restent en place
       jusqu'au lot C7. Tailles : --t-* = taille, --i-* = interligne associé. */
    --f-titre:"Spectral",Georgia,"Iowan Old Style",serif;
    --f-ui:"Radio Canada","Segoe UI",Roboto,Helvetica,sans-serif;
    --f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:20px; --t-xl:28px; --t-2xl:40px;
    --i-xs:16px; --i-s:20px; --i-m:24px; --i-l:28px; --i-xl:34px; --i-2xl:44px;
    --g-normal:400; --g-moyen:500; --g-fort:600;
    --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
    --r-l:12px; --r-rond:999px;
    --h-ctrl:44px; --h-ctrl-s:44px; /* « aérés partout » (Dimitri, 26/09) : aucune cible sous 44 px */
    --focus:#26707d; --info:#3556a8; --info-d:#e7eefb;
    --ombre-1:0 1px 2px rgba(27,42,48,.05), 0 8px 22px -14px rgba(27,42,48,.28);
    --ombre-2:0 24px 60px -12px rgba(15,27,34,.35);
    --anneau:0 0 0 2px var(--surf), 0 0 0 4px var(--focus);
    /* lot C8 : teintes des modules — encre --mod-<module>, fond --mod-<module>-d, portées par [data-mod] (lot 1, 21/10/2026) */
    --mod-infos:#14697a; --mod-infos-d:#e8f5f8; --mod-annuaire:#3556a8; --mod-annuaire-d:#e7eefb; --mod-absences:#1b6e36; --mod-absences-d:#e3f4e8;
    --mod-planning:#3556a8; --mod-planning-d:#e7eefb; --mod-entretiens:#8a6420; --mod-entretiens-d:#fbf3e6; --mod-demande:#a93c55; --mod-demande-d:#fdecec;
    --mod-vehicule:#a34a06; --mod-vehicule-d:#fdeedd; --mod-monmateriel:#7a5c2e; --mod-monmateriel-d:#f3ede4; --mod-valid:#1b6e36; --mod-valid-d:#e3f4e8;
    --mod-equipe:#3556a8; --mod-equipe-d:#e7eefb; --mod-mensuel:#3556a8; --mod-mensuel-d:#e7eefb; --mod-contrats:#475569; --mod-contrats-d:#eceff3;
    --mod-ca:#7f6009; --mod-ca-d:#fdf3d7; --mod-crm:#0f6377; --mod-crm-d:#d9f0f4; --mod-materiel:#7a5c2e; --mod-materiel-d:#f3ede4;
    --mod-echeances:#b91c1c; --mod-echeances-d:#fdeaea; --mod-secteurs:#a34a06; --mod-secteurs-d:#fdeedd;
    --mod-signalement:#4f6a12; --mod-signalement-d:#eef5dc; --mod-direction:#7b2d6b; --mod-direction-d:#f6e8f2;
    color-scheme:light;
  }
  /* ---- thème sombre (ardoise) : mêmes rapports, teintes de modules en encres
     claires sur fond translucide ---- */
  @media (prefers-color-scheme:dark){
    :root{
      --fond:#0f1b22; --surf:#17262e; --surf2:#1e303a; --filet-doux:#263b44; --lgf:var(--fond);
      --encre:#e6edef; --encre2:#b4c3c8; --encre3:#9aabb1;
      --filet:#35505b; --filet2:#62818d;
      --marque-f:#8CCFD7; --marque-e:#a9dde3; --marque-d:#173a44; --menu:var(--surf);
      --ia:#8b6ce8; --ia-f:#a58cf0; --ia-d:#241b3b; --ia-b:#4a3a78; --ia-texte:#0f1b22; --sur-fort:#0f1b22;
      --ok:#4fc27a; --ok-d:#173427; --att:#e9a23b; --att-d:#3a2a12; --crit:#f07171; --crit-d:#3c1a1a;
      --bleu:#9db4f0; --bleu-d:#1c2a4a;
      --abs-defaut:#4db8ab;
      --vague1:#132229; --vague2:#173a44; --vague3:#1f4c56;
      /* charte commune (lot C1) : jetons dont la valeur change en sombre */
      --focus:#8CCFD7; --info:#9db4f0; --info-d:#1c2a4a;
      --ombre-1:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.7);
      --ombre-2:0 24px 60px -12px rgba(0,0,0,.7);
      /* lot C8 : modules en encre claire (AA sur l'ardoise) ; aplats francs et opaques (21/10/2026 : « trop ternes ») : la teinte du module,
         saturée, assez sombre pour que son encre y tienne 5:1 au moins */
      --mod-infos:#47bad1; --mod-infos-d:#153f47; --mod-annuaire:#8ea5df; --mod-annuaire-d:#1d3163; --mod-absences:#48d075; --mod-absences-d:#164b27;
      --mod-planning:#8ea5df; --mod-planning-d:#1d3163; --mod-entretiens:#d1a047; --mod-entretiens-d:#433214; --mod-demande:#e39aab; --mod-demande-d:#6b1f30;
      --mod-vehicule:#da9661; --mod-vehicule-d:#4b2d16; --mod-monmateriel:#c9a268; --mod-monmateriel-d:#473315; --mod-valid:#48d075; --mod-valid-d:#164b27;
      --mod-equipe:#8ea5df; --mod-equipe-d:#1d3163; --mod-mensuel:#8ea5df; --mod-mensuel-d:#1d3163; --mod-contrats:#96a5ba; --mod-contrats-d:#283343;
      --mod-ca:#d1ae47; --mod-ca-d:#473a15; --mod-crm:#47b7d1; --mod-crm-d:#153d47; --mod-materiel:#c9a268; --mod-materiel-d:#473315;
      --mod-echeances:#e38787; --mod-echeances-d:#5b1a1a; --mod-secteurs:#da9661; --mod-secteurs-d:#4b2d16;
      --mod-signalement:#acd05e; --mod-signalement-d:#33421a; --mod-direction:#d98cc6; --mod-direction-d:#43193b;
      color-scheme:dark;
    }
  }
  *{box-sizing:border-box}
  html{scrollbar-color:var(--filet2) var(--fond);-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--fond);color:var(--encre);
    font:var(--t-m)/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
  h1,h2,h3,.card h2,dialog h3{font-family:var(--f-titre);font-weight:var(--g-fort);letter-spacing:0;text-wrap:balance}
  a{color:var(--marque-f);text-underline-offset:.18em;text-decoration-thickness:1px}
  ::selection{background:var(--marque-d);color:var(--marque-e)}
  :focus-visible{outline:2px solid var(--marque-f);outline-offset:2px}
  input,select,textarea,button{caret-color:var(--marque-f)}
  input[type=checkbox],input[type=radio]{accent-color:var(--marque-f)}
  table,.encoche,.num,.chip,.cal,.day,.absGrille{font-variant-numeric:tabular-nums}
  /* Pleine largeur en version PC (décision du 19/08) : l'application occupe
     toute la fenêtre, seul un liseré de respiration reste sur les côtés. */
  .wrap{margin:0;padding:0 var(--e-5) 70px}
  /* viewport-fit=cover (index.html) : la barre du haut garde ses marges sous l'encoche et sur les bords arrondis */
  header{background:var(--surf);border-bottom:1px solid var(--filet-doux);position:sticky;top:0;z-index:30;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .hd{margin:0;padding:var(--e-3) var(--e-5);display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
  .logo{width:44px;height:44px;border-radius:var(--r);background:var(--marque-f);color:var(--sur-fort);display:grid;place-items:center;font-weight:var(--g-fort);flex:none;font-family:var(--f-titre)}
  .logoImg{height:44px;width:auto;flex:none;display:block}
  .logoImg,.logo{cursor:pointer}
  /* aperçu À L'ÉCRAN du registre des accusés (V-66l) — mêmes classes que le
     PDF (ctArt/imTable…), habillées ici aux couleurs du portail */
  #rlApercu{max-height:46vh;overflow:auto;border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-3) var(--e-4);margin-top:var(--e-2);background:var(--surf)}
  #rlApercu .ctArt{font-family:var(--f-ui);font-weight:var(--g-fort);font-size:var(--t-s);color:var(--marque-e);background:var(--marque-d);border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-1) var(--e-3) var(--e-1);margin:var(--e-3) 0 var(--e-2)}
  #rlApercu .ctArt:first-of-type{margin-top:var(--e-1)}
  #rlApercu .ctP{margin:0 0 var(--e-2);font-size:var(--t-m);color:var(--encre2)}
  #rlApercu .imTable{width:100%;border-collapse:collapse;font-size:var(--t-s);margin:var(--e-1) 0 var(--e-3)}
  #rlApercu .imTable th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--encre3);border-bottom:1px solid var(--filet2);padding:var(--e-1) var(--e-2)}
  #rlApercu .imTable td{border-bottom:1px solid var(--filet);padding:var(--e-1) var(--e-2)}
  #rlApercu .imOk{color:var(--ok)}
  #rlApercu .imAtt{color:var(--att);font-weight:var(--g-fort)}
  /* impression : seule la zone dédiée sort sur papier (entretiens → PDF) */
  #zoneImpression{display:none}
  @media print{
    body>*{display:none !important}
    body>#zoneImpression{display:block !important}
    body{background:#fff}
    /* entretiens & documents : même charte Ygie que le portail (V-66b) */
    #zoneImpression{font:12px/1.6 var(--f-ui);color:#333;max-width:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #zoneImpression h1{font-family:var(--f-titre);font-weight:var(--g-normal);font-size:19px;color:#14697a;margin:0 0 2px}
    #zoneImpression .imEnTete{border-bottom:3px solid #8ccfd7;padding-bottom:var(--e-3);margin-bottom:var(--e-4)}
    #zoneImpression .imMeta{font-size:11.5px;color:#5c6b70;margin:2px 0 0}
    #zoneImpression .imQ{font-weight:var(--g-fort);color:#1b8395;margin:var(--e-4) 0 var(--e-1);page-break-after:avoid}
    #zoneImpression .imR{white-space:pre-wrap;border-left:3px solid #8ccfd7;padding-left:var(--e-3);min-height:18px}
    #zoneImpression .imVide div{border-bottom:1px dotted #9fc6cd;height:26px}
    #zoneImpression .imSign{display:flex;gap:var(--e-5);margin-top:36px;page-break-inside:avoid}
    #zoneImpression .imSign>div{flex:1;border:1px solid #c3dde2;border-top:4px solid #8ccfd7;border-radius:var(--r);padding:var(--e-3) var(--e-3) 56px;font-size:11px;color:#5c6b70}
    /* contrats de travail : document à la charte Ygie (V-66b) — turquoise
       #8ccfd7 / foncé #14697a, titres en --f-titre, texte justifié en --f-ui
       (charte commune, lot C3 : même police qu'à l'écran) */
    #zoneImpression .ctDoc{-webkit-print-color-adjust:exact;print-color-adjust:exact;padding-bottom:34px}
    #zoneImpression .ctEnTete{display:flex;align-items:center;gap:var(--e-4);border-bottom:3px solid #8ccfd7;padding-bottom:var(--e-3)}
    #zoneImpression .ctEnTete img{height:52px;width:auto}
    #zoneImpression .ctSoc{font-family:var(--f-titre);font-size:16px;color:#14697a}
    #zoneImpression .ctSoc small{display:block;font-family:var(--f-ui);font-size:9px;color:#7e7e7e;margin-top:var(--e-1);letter-spacing:.2px}
    #zoneImpression .ctTitre{font-family:var(--f-titre);font-weight:var(--g-normal);text-align:center;font-size:17.5px;color:#14697a;margin:var(--e-5) 0 var(--e-1);text-transform:uppercase;letter-spacing:.8px}
    #zoneImpression .ctFilet{width:64px;height:3px;background:#f7bdbd;border-radius:var(--r);margin:0 auto var(--e-4)}
    #zoneImpression .ctBrouillon{text-align:center;margin:0 0 var(--e-4)}
    #zoneImpression .ctBrouillon span{display:inline-block;background:#fdecec;color:#d1607a;border:1px solid #f7bdbd;border-radius:var(--r-l);padding:var(--e-1) var(--e-4);font:10px/1.6 var(--f-ui);letter-spacing:.5px}
    #zoneImpression .ctArt{font-family:var(--f-titre);font-weight:var(--g-normal);font-size:12.5px;color:#14697a;background:#eef7f9;border-left:4px solid #8ccfd7;border-radius:0 var(--r) var(--r) 0;padding:var(--e-1) var(--e-3) var(--e-1);margin:var(--e-4) 0 var(--e-2);page-break-after:avoid}
    #zoneImpression .ctSousArt{font:var(--g-fort) 11px/1.5 var(--f-ui);color:#1b8395;margin:var(--e-3) 0 var(--e-1);page-break-after:avoid}
    #zoneImpression .ctP{margin:0 0 var(--e-2);text-align:justify;font:11px/1.62 var(--f-ui);color:#333}
    #zoneImpression .ctFait{text-align:center;font:11px/1.6 var(--f-ui);color:#333;margin:var(--e-5) 0 var(--e-4)}
    #zoneImpression .ctSign{display:flex;gap:var(--e-5);page-break-inside:avoid}
    #zoneImpression .ctSign>div{flex:1;border:1px solid #c3dde2;border-top:4px solid #8ccfd7;border-radius:var(--r);padding:var(--e-3) var(--e-3) 70px;font:10px/1.55 var(--f-ui);color:#5c6b70}
    #zoneImpression .ctSign b{display:block;font-family:var(--f-titre);font-weight:var(--g-normal);font-size:11.5px;color:#14697a;margin-bottom:var(--e-1)}
    #zoneImpression .ctPied{position:fixed;bottom:0;left:0;right:0;border-top:2px solid #8ccfd7;padding-top:var(--e-1);font:8.5px/1.5 var(--f-ui);color:#7e7e7e;text-align:center;background:#fff}
    /* registres tabulaires (accusés de lecture, V-66g) — même charte */
    #zoneImpression .imTable{width:100%;border-collapse:collapse;font:10.5px/1.5 var(--f-ui);margin:var(--e-1) 0 var(--e-4)}
    #zoneImpression .imTable th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:#14697a;border-bottom:2px solid #8ccfd7;padding:var(--e-1) var(--e-2)}
    #zoneImpression .imTable td{border-bottom:1px solid #dfeef1;padding:var(--e-1) var(--e-2);color:#333}
    #zoneImpression .imTable tr{page-break-inside:avoid}
    #zoneImpression .imOk{color:#15803d}
    #zoneImpression .imAtt{color:#b45309;font-weight:var(--g-fort)}
  }
  .hd h1{font-size:var(--t-l);line-height:1.2;margin:0;font-weight:var(--g-fort);font-family:var(--f-titre);color:var(--encre)}
  .hd p{margin:0;font-size:var(--t-s);color:var(--encre3)}
  .who{margin-left:auto;display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-s);color:var(--encre2);flex-wrap:wrap}
  .who b{color:var(--encre)}
  /* E4 : rond du compte + menu (sous 960 px, les entrées vont en pied du tiroir, voir placerCompte) */
  .compte{position:relative}
  .avatar{display:flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);padding:0 var(--e-2) 0 0;border:0;border-radius:var(--r-rond);background:none;color:var(--encre);font:var(--g-moyen) var(--t-s)/1 var(--f-ui);cursor:pointer}
  .avRond{width:var(--h-ctrl);height:var(--h-ctrl);border-radius:var(--r-rond);background:var(--marque-f);color:var(--sur-fort);font-weight:var(--g-fort);letter-spacing:.04em;display:grid;place-items:center}
  .avChev{color:var(--encre2);font-size:var(--t-xs)}
  .avatar:hover{background:var(--surf2)}
  .avatar:hover .avRond{background:var(--marque-e)}
  .avatar:focus-visible{outline:none;box-shadow:var(--anneau)}
  .menuCompte{position:absolute;right:0;top:calc(100% + var(--e-2));z-index:40;min-width:260px;display:flex;flex-direction:column;padding:var(--e-2);background:var(--surf);border:1px solid var(--filet);border-radius:var(--r-l);box-shadow:var(--ombre-1)}
  .mcTete{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2);padding:var(--e-2) var(--e-3) var(--e-3);margin-bottom:var(--e-1);border-bottom:1px solid var(--filet);font-size:var(--t-s);color:var(--encre)}
  .mcItem{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:var(--h-ctrl);padding:0 var(--e-3);border:0;border-radius:var(--r);background:none;color:var(--encre);font:var(--g-moyen) var(--t-s)/1.2 var(--f-ui);text-align:left;cursor:pointer}
  .mcItem .ic{width:18px;height:18px;color:var(--encre2)}
  .mcItem:hover,.mcItem:focus-visible{background:var(--surf2);outline:none}
  .mcItem:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
  .mcListe{display:flex;flex-direction:column}
  .mcSep{height:1px;margin:var(--e-1) 0;background:var(--filet)}
  .mcSortie{color:var(--crit)}
  .mcSortie .ic{color:var(--crit)}
  @media(max-width:960px){
    #btnCompte{display:none}
    .avPrenom,.avChev{display:none}   /* décision de Dimitri : rond seul sous 960 px */
    #lateral .menuCompte{position:static;min-width:0;margin-top:var(--e-5);padding:var(--e-3) 0 0;border:0;border-top:1px solid var(--filet);border-radius:0;box-shadow:none}
  }
  .badge{font-size:var(--t-xs);font-weight:var(--g-fort);letter-spacing:.06em;text-transform:uppercase;padding:var(--e-1) var(--e-2);border-radius:var(--r-rond);line-height:1.5}
  .badge.admin{background:var(--info-d);color:var(--info)}
  .badge.demo{background:var(--att-d);color:var(--att)}
  .badge.emp{background:var(--marque-d);color:var(--marque-e)}
  .card{background:var(--surf);border:1px solid var(--filet);border-radius:var(--r-l);padding:var(--e-5);box-shadow:var(--ombre-1);margin:var(--e-4) 0}
  .card h2{font-size:var(--t-l);line-height:1.25;margin:0 0 var(--e-1);font-weight:var(--g-fort);color:var(--encre)}
  /* une carte dans une carte devient une simple ligne de liste (le script en génère) */
  .card .card{box-shadow:none;border-radius:var(--r);background:var(--surf)}
  .contenu>.card{padding:0;border:0;border-radius:0;background:none;box-shadow:none}   /* page blanche : plus de feuille par module */
  .sub{color:var(--encre3);font-size:var(--t-s);margin:0 0 var(--e-4)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);font:var(--g-fort) var(--t-m)/1.2 var(--f-ui);min-height:var(--h-ctrl);padding:var(--e-2) var(--e-4);border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,transform .08s;text-decoration:none;vertical-align:middle}
  .btn:active{transform:translateY(1px)}
  /* charte commune, lot C2 (§ 4) : mêmes états pour toutes les familles.
     Focus clavier en double anneau (le contour transparent reste visible en
     mode de contraste forcé) ; désactivé ; en cours (aria-busy, pas de double envoi). */
  .btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anneau)}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
  .btn[aria-busy="true"]{cursor:progress;pointer-events:none}
  .btn-p{background:var(--marque-f);color:var(--sur-fort)}.btn-p:hover{background:var(--marque-e)}
  /* secondaire : fond turquoise pâle, texte turquoise foncé — un bouton ne
     ressemble jamais à un champ (décision du 26/09) */
  .btn-s{background:var(--marque-d);border-color:var(--marque-f);color:var(--marque-e)}.btn-s:hover{border-color:var(--marque-e)}
  .btn-ok{background:var(--ok);color:var(--sur-fort)}
  .btn-no{background:var(--surf);border-color:var(--crit);color:var(--crit)}
  .btn-sm{font-size:var(--t-s);min-height:var(--h-ctrl-s);padding:var(--e-1) var(--e-3)}
  input,select,textarea{font:inherit;font-size:var(--t-m);color:var(--encre);background:var(--surf);border:1px solid var(--filet2);border-radius:var(--r);padding:var(--e-2) var(--e-3);width:100%;min-height:var(--h-ctrl)}
  input[type=checkbox],input[type=radio],input[type=file]{min-height:0}
  input::placeholder,textarea::placeholder{color:var(--encre3);opacity:1}
  textarea{min-height:74px;resize:vertical}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marque-f);box-shadow:0 0 0 3px var(--marque-d)}
  label{font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre2);display:block;margin-bottom:var(--e-1)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--e-3)}
  @media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
  .f{margin-bottom:var(--e-3)}
  /* CRM — agenda : panneau identifiable, distinct du planning d'astreintes */
  .crm-panel{background:linear-gradient(180deg,var(--marque-d) 0,var(--surf) 110px);
    border:1px solid var(--filet2);border-radius:var(--r-l);padding:var(--e-4) var(--e-4) var(--e-4);
    margin-top:var(--e-1)}
  .crm-panel-tete{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-3)}
  .crm-panel-tete h3{margin:0;font-family:var(--f-titre);font-size:var(--t-l);color:var(--encre);min-width:150px}
  .crm-panel .cal{gap:var(--e-2)}
  .crm-panel .day{min-height:78px;background:var(--surf);border-color:var(--filet)}
  .crm-panel .day.we{background:var(--surf2)}
  .crm-panel .day.charge{background:var(--marque-d);border-color:var(--filet2)}
  .crm-panel .day.today{outline:2px solid var(--marque-f);outline-offset:-1px}
  .crm-panel .day .num{font-size:var(--t-s);color:var(--encre2)}
  /* pastilles de visite : la couleur porte le STATUT (lecture immédiate du mois),
     et non l'établissement — contrairement au planning d'astreintes où la couleur
     identifie la personne. C'est ce qui distingue les deux calendriers. */
  .vst{display:block;margin-top:var(--e-1);font-size:var(--t-xs);font-weight:var(--g-fort);border-radius:var(--r);
    padding:var(--e-1) var(--e-2);border:1px solid;cursor:pointer;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .12s}
  .badge.pm,.badge.pa{color:var(--surf)}.badge.pj{background:var(--att-d);color:var(--att)}.badge.pm{background:var(--ok)}.badge.pa{background:var(--att)}
  .crm-legende{display:flex;gap:var(--e-4);flex-wrap:wrap;margin-top:var(--e-3);font-size:var(--t-s);color:var(--encre3)}
  .crm-legende b{display:inline-block;width:11px;height:11px;border-radius:var(--r);margin-right:var(--e-1);vertical-align:-1px}
  @media(max-width:640px){ .crm-panel{padding:var(--e-3) var(--e-3) var(--e-4)} .crm-panel .day{min-height:64px}
    .crm-panel-tete{flex-wrap:wrap}
    .crm-panel-tete h3{min-width:0;flex:1;font-size:var(--t-m)}
    .crm-panel-tete select,.crm-panel-tete span~.btn{flex:1 1 100%;max-width:none!important} }
  /* CRM */
  .crmcard{border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-3);background:var(--surf)}
  .crmcard:hover{border-color:var(--marque-f);box-shadow:var(--ombre-1)}
  .crmcard .meta{text-align:right;font-size:var(--t-s);color:var(--encre3);min-width:130px}
  @media(max-width:620px){.crmcard .meta{text-align:left;min-width:0}}
  /* CRM — compte rendu dépliable sur place (décision 5 du 24/09/2026) */
  tr.crmCrL{cursor:pointer}
  /* CRM — d'une visite au suivi DH (décision 1, lot 3c) */
  .cvSuivi{border:1px dashed var(--filet2);border-radius:var(--r);padding:var(--e-2) var(--e-3) var(--e-3);margin-bottom:var(--e-3)}
  .cvSuiviCase{display:flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);margin:0;font-weight:var(--g-fort);color:var(--encre);cursor:pointer}
  .cvSuiviCase input{width:18px;height:18px;flex:none}
  .cvSuiviChamps{display:grid;gap:var(--e-2);margin-top:var(--e-2)}
  .cvSuiviChamps .sub{margin:0}
  .cvSuivi .pied{display:flex;gap:var(--e-2);flex-wrap:wrap}
  @media(max-width:640px){ .cvSuiviCase{min-height:44px} .cvSuiviChamps select,.cvSuiviChamps textarea{font-size:var(--t-m)} }
  /* CRM — obligations du suivi DH dans « Relances à venir » (décision 8, lot 4) */
  .crmObligTxt{overflow-wrap:anywhere}
  .crmObligTxt .sdhPoint{display:inline-block;margin-right:var(--e-1)}
  .crmObligLib{font-weight:var(--g-fort);color:var(--encre)}
  .crmOblig td.date{white-space:nowrap}
  .crmOblig td.act{text-align:right;white-space:nowrap}
  /* CRM — suivi DH sur la fiche établissement (lot 2b, fiche du 24/09/2026).
     Une couleur fixe par service (décision 7) : le script la pose en propriété
     --svc par le CSSOM (setProperty), jamais en attribut style. La couleur ne
     porte jamais seule l'information : le nom du service est toujours écrit. */
  #ccSuivi{border-top:1px solid var(--filet);margin:var(--e-4) 0;padding-top:var(--e-3)}
  #ccSuivi h3.sec{margin-top:0}
  #ccIa .ccIaL{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
  #ccIa .ccIaL input{flex:1;min-width:12em}
  #ccIaRep{margin-top:var(--e-2)}
  .sdhPast{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-3)}
  .sdhPlus{border-radius:var(--r);border-style:dashed}
  .sdhPoint{--svc:var(--marque-e);width:10px;height:10px;border-radius:var(--r-rond);background:var(--svc);flex:none}
  /* Service : teinte du service connu (--svc), pointillé si nouveau. */
  .svcSaisie{--svc:var(--filet2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
  .svcSaisie input{flex:1;min-width:0}
  .svcSaisie .sdhPoint{--svc:inherit}
  .svcSaisie:not(.connu) .sdhPoint{background:none;border:1px dashed var(--encre3);box-sizing:border-box}
  .svcSaisie.connu input{border-color:color-mix(in srgb,var(--svc) 45%,var(--filet2));background:color-mix(in srgb,var(--svc) 12%,var(--surf))}
  .cvSvcCoches{margin:0 0 var(--e-2)}
  .svcAide{margin:var(--e-1) 0 0}
  .svcAide:empty{display:none}
  .sdhFait{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);margin:0;font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre2);cursor:pointer;flex:none}
  .sdhFait input{width:18px;height:18px}
  .sdhAct{display:flex;gap:var(--e-1);flex:none}
  .sdhAjout .pied{grid-column:1/-1}
  .sdhAjout .pied{display:flex;gap:var(--e-2);justify-content:flex-end;flex-wrap:wrap}
  .sdhConf{background:var(--att-d);border-radius:var(--r);padding:var(--e-3) var(--e-3)}
  .sdhConf p{margin:0 0 var(--e-2);color:var(--encre);font-size:var(--t-s)}
  .sdhConf .pied{justify-content:flex-start}
  .sdhErr{color:var(--crit);margin:var(--e-2) 0 0}
  .sdhErr:empty{display:none}
  @media (prefers-color-scheme:dark){
    /* les encres de service sont foncées : sur l'ardoise, on les éclaircit */
    .sdhPoint{background:color-mix(in srgb,var(--svc) 55%,#fff)}
    .svcSaisie.connu input{background:color-mix(in srgb,var(--svc) 22%,var(--surf))}
  }
  @media(max-width:640px){
    .sdhFait,.sdhPlus{min-height:44px}
    .sdhAct{width:100%;justify-content:flex-end}
  }
  /* illustration des états vides (reprise démo) */
  .videIllu{padding:var(--e-4) 0 var(--e-3)}
  .videPhrase{font:italic var(--g-moyen) var(--t-l)/1.3 var(--f-titre);color:var(--marque-e);margin:2px 0}
  .videSous{font-size:var(--t-s);color:var(--encre3)}
  /* onglets */
  .tabs{display:flex;gap:var(--e-2);margin:var(--e-4) 0 var(--e-1);flex-wrap:wrap}
  .tab{font:var(--g-moyen) var(--t-s)/1.2 var(--f-ui);padding:var(--e-2) var(--e-4);min-height:var(--h-ctrl);display:inline-flex;align-items:center;gap:var(--e-2);border-radius:var(--r);border:1px solid var(--filet2);background:var(--surf);color:var(--encre2);cursor:pointer}
  .tab:hover{border-color:var(--marque-f);color:var(--marque-e)}
  .tab.on{background:var(--marque-e);border-color:var(--marque-e);color:var(--sur-fort)}
  .tab .n{display:inline-block;min-width:18px;text-align:center;background:var(--crit);color:var(--sur-fort);border-radius:var(--r-rond);font-size:var(--t-xs);font-weight:var(--g-fort);padding:var(--e-1) var(--e-1);margin-left:var(--e-1);line-height:1.4}
  /* sous-onglets d'un module : une ligne soulignée, pas des pilules */
  .card>.tabs{gap:var(--e-1);border-bottom:1px solid var(--filet2);margin:var(--e-2) 0 var(--e-4);flex-wrap:wrap}
  .card>.tabs .tab{border:0;border-radius:var(--r) var(--r) 0 0;background:transparent;color:var(--encre2);padding:var(--e-2) var(--e-3) var(--e-3);box-shadow:inset 0 -2px 0 transparent;margin-bottom:-1px;min-height:var(--h-ctrl)}
  .card>.tabs .tab:hover{color:var(--encre);background:var(--surf2)}
  .card>.tabs .tab.on{color:var(--encre);font-weight:var(--g-fort);background:transparent;box-shadow:inset 0 -3px 0 var(--marque-f)}
  /* E5 (fiche ergonomie 26/09, 5c ; audit design) : onglets à la ligne sur ordinateur ;
     sous 700 px, une ligne qui défile au doigt sans barre, fondu aux deux bouts (--fondu-g, --fondu-d : informations.js) */
  .card>.tabs.tabs-ligne{margin:var(--e-3) 0 var(--e-4)}
  .tabs-ligne>.pousse{flex:1 0 var(--e-4)}
  .card>.tabs.tabs-ligne .tab{min-height:var(--h-ctrl)}
  @media(max-width:700px){
    .card>.tabs.tabs-ligne{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
    .tabs-ligne::-webkit-scrollbar{display:none}
    .tabs-ligne>*{flex:none;white-space:nowrap}
    .tabs-ligne.suite,.tabs-ligne.avant{-webkit-mask-image:linear-gradient(to right,transparent,#000 min(var(--fondu-g,0px),var(--e-7)),#000 calc(100% - min(var(--fondu-d,0px),var(--e-7))),transparent);mask-image:linear-gradient(to right,transparent,#000 min(var(--fondu-g,0px),var(--e-7)),#000 calc(100% - min(var(--fondu-d,0px),var(--e-7))),transparent)}
    /* anneau de focus en dedans : le cadre défilant rognait l'anneau extérieur */
    .tabs-ligne .tab:focus-visible{outline-offset:calc(var(--e-1)/-2)}
  }
  /* ---- V-77 : refonte — navigation latérale groupée, tiroir mobile, parure ----
     09/2026 : la barre latérale devient le sommaire des « formulaires » du
     portail : un puits d'icône teinté par module, la ligne ouverte est la
     seule teintée (fond de sa teinte, puits rempli de son encre). */
  .appli{display:flex;align-items:flex-start}
  #lateral{width:248px;flex:none;background:var(--menu);border-right:1px solid var(--filet);
    padding:var(--e-3) var(--e-3) var(--e-4);position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top));height:calc(100dvh - var(--hd-h) - env(safe-area-inset-top));overflow:auto}
  body.co .wrap{padding:0}
  .contenu{flex:1;min-width:0;padding:0 var(--e-5) 70px}
  .navlab{font-size:var(--t-s);font-weight:var(--g-fort);letter-spacing:.09em;text-transform:uppercase;color:var(--encre3);padding:var(--e-4) var(--e-3) var(--e-2)}
  #lateral .tabs{flex-direction:column;gap:var(--e-1);margin:0}
  #lateral .tab{display:flex;align-items:center;gap:var(--e-3);text-align:left;border:0;background:transparent;
    border-radius:var(--r);padding:var(--e-1) var(--e-2);min-height:44px;font-size:calc((var(--t-m) + var(--t-l)) / 2);font-weight:var(--g-moyen);color:var(--encre2)}   /* 18 px (choix du 21/10/2026) */
  #lateral .tab:hover{background:var(--surf2);color:var(--encre)}
  #lateral .tab.on{background:var(--d,var(--marque-d));color:var(--encre);font-weight:var(--g-fort)}
  /* compteurs discrets (gris, cernés) ; rouge seulement pour le retard (.retard) */
  #lateral .tab .n{margin-left:auto;background:none;color:var(--encre2);font-weight:var(--g-moyen);box-shadow:inset 0 0 0 1px var(--filet2)}
  #lateral .tab.on .n{color:inherit;box-shadow:inset 0 0 0 1px currentColor}
  #lateral .tab .n.retard{background:var(--crit);color:var(--sur-fort);font-weight:var(--g-fort);box-shadow:none}
  /* V-119 : le pictogramme porte l'encre de son module (--m) */
  #lateral .icw{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:0 0 34px;color:var(--m,var(--marque-e))}
  #lateral .icw .ic{width:20px;height:20px;margin:0;vertical-align:0}
  /* module ouvert : le puits se remplit de l'encre du module, l'icône passe en blanc */
  #lateral .tab.on .icw{background:var(--m,var(--marque-e))}
  #lateral .tab.on .icw .ic{color:var(--sur-fort)}
  /* lot 1 (19/10/2026) : [data-mod] pose l'encre (--m) et le fond (--d) du module, lus par le menu, l'en-tête et les lignes */
  [data-mod="infos"]{--m:var(--mod-infos);--d:var(--mod-infos-d)}
  [data-mod="annuaire"]{--m:var(--mod-annuaire);--d:var(--mod-annuaire-d)}
  [data-mod="absences"]{--m:var(--mod-absences);--d:var(--mod-absences-d)}
  [data-mod="planning"]{--m:var(--mod-planning);--d:var(--mod-planning-d)}
  [data-mod="entretiens"]{--m:var(--mod-entretiens);--d:var(--mod-entretiens-d)}
  [data-mod="vehicule"]{--m:var(--mod-vehicule);--d:var(--mod-vehicule-d)}
  [data-mod="monmateriel"]{--m:var(--mod-monmateriel);--d:var(--mod-monmateriel-d)}
  [data-mod="valid"]{--m:var(--mod-valid);--d:var(--mod-valid-d)}
  [data-mod="equipe"]{--m:var(--mod-equipe);--d:var(--mod-equipe-d)}
  [data-mod="mensuel"]{--m:var(--mod-mensuel);--d:var(--mod-mensuel-d)}
  [data-mod="contrats"]{--m:var(--mod-contrats);--d:var(--mod-contrats-d)}
  [data-mod="ca"]{--m:var(--mod-ca);--d:var(--mod-ca-d)}
  [data-mod="crm"]{--m:var(--mod-crm);--d:var(--mod-crm-d)}
  [data-mod="materiel"]{--m:var(--mod-materiel);--d:var(--mod-materiel-d)}
  [data-mod="echeances"]{--m:var(--mod-echeances);--d:var(--mod-echeances-d)}
  [data-mod="secteurs"]{--m:var(--mod-secteurs);--d:var(--mod-secteurs-d)}
  [data-mod="demande"],[data-mod="frais"]{--m:var(--mod-demande);--d:var(--mod-demande-d)}
  [data-mod="accueil"]{--m:var(--marque-e);--d:var(--marque-d)}
  [data-mod="signalement"]{--m:var(--mod-signalement);--d:var(--mod-signalement-d)}
  [data-mod="direction"]{--m:var(--mod-direction);--d:var(--mod-direction-d)}
  .rond{display:grid;place-items:center;flex:none;width:var(--e-6);height:var(--e-6);border-radius:var(--r-rond);background:var(--d,var(--marque-d));color:var(--m,var(--marque-e))}
  #voile{display:none}
  .latTete{display:none}
  #btnMenu{display:none;font:inherit;font-size:var(--t-l);line-height:1;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--encre2);cursor:pointer;width:44px;height:44px;padding:0;place-items:center}
  #btnMenu:hover{background:var(--surf2);color:var(--encre)}
  body.co #btnMenu{display:inline-grid}          /* V-88 : visible dès qu'on est connecté, bureau compris */
  /* V-142 (Dimitri) : la colonne se retire et revient en glissant */
  @media(min-width:961px){
    #lateral{transition:margin-left .24s ease,opacity .18s ease,visibility 0s linear 0s}
    body.replie #lateral{margin-left:-248px;opacity:0;visibility:hidden;transition:margin-left .24s ease,opacity .16s ease,visibility 0s linear .24s}
  }
  /* en-tête de module : pastille ronde du module, titre Spectral ; ni date ni bande (19/10/2026) */
  #pageTete{padding-top:var(--e-2)}
  /* Lot 5 : fil d'Ariane au-dessus du titre (sous 700 px, seul le parent : « ‹ Parent ») */
  .fil{min-height:var(--h-ctrl);display:flex;align-items:center}
  .fil ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e-1);margin:0;padding:0;list-style:none;font-size:var(--t-s);color:var(--encre3)}
  .fil li{display:flex;align-items:center;gap:var(--e-1)}
  .fil li+li::before{content:"›";content:"›"/"";color:var(--encre3)}
  .fil [aria-current]{color:var(--encre2);font-weight:var(--g-moyen)}
  .filLien{min-height:var(--h-ctrl);padding:0 var(--e-1);border:0;border-radius:var(--r);background:none;font:inherit;color:var(--marque-f);cursor:pointer;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
  .filLien:hover{color:var(--marque-e)}
  @media(min-width:961px){body:not(.replie) .fil{display:none}body:not(.replie) #pageTete{padding-top:var(--e-6)}}   /* le menu dit où l'on est ; replié, le fil revient */
  #pageTete .ptLigne{display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap}
  .ptIco{width:calc(var(--e-6) + var(--e-2));height:calc(var(--e-6) + var(--e-2))}
  .ptIco .ic{width:var(--e-5);height:var(--e-5)}
  #pageTete h1{margin:0;font-size:var(--t-xl);line-height:1.15;color:var(--encre);font-weight:var(--g-fort)}
  /* actualités : surtitres de rubrique et carte « à la une » */
  .surTitre{font-size:var(--t-xs);font-weight:var(--g-fort);letter-spacing:.08em;text-transform:uppercase;color:var(--encre3)}
  .titreNote{font-size:var(--t-m);display:block;margin-top:2px}
  .una{border-color:var(--filet2)}
  .una .surTitre{color:var(--marque-f)}
  .una .titreNote{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:var(--t-l);line-height:1.25;color:var(--encre)}
  .una .btn-p{background:var(--marque-f)}
  .una .btn-p:hover{background:var(--marque-e)}
  /* connexion : vague aux couleurs de la marque en pied d'écran */
  #vague{position:fixed;left:0;right:0;bottom:0;z-index:-1;pointer-events:none}
  #vague svg{display:block;width:100%;height:170px}
  body.co #vague{display:none}
  #vLogin .loginMot{font:italic var(--g-moyen) var(--t-xl)/1.2 var(--f-titre);color:var(--marque-f);margin:var(--e-2) 0 0}
  @media(max-width:960px){
    #lateral{position:fixed;top:0;bottom:0;left:0;z-index:60;width:290px;height:auto;
      transform:translateX(-105%);transition:transform .26s cubic-bezier(.2,.7,.2,1);box-shadow:var(--ombre-2)}
    body.menuOuvert #lateral{transform:none}
    /* tiroir sous viewport-fit=cover : marges de l'encoche, des bords et de la barre d'accueil */
    #lateral{padding-left:calc(var(--e-3) + env(safe-area-inset-left));padding-bottom:calc(var(--e-4) + env(safe-area-inset-bottom))}
    .latTete{padding-top:env(safe-area-inset-top)}
    #voile{display:block;position:fixed;inset:0;background:rgba(15,27,34,.5);z-index:55;
      opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
    body.menuOuvert #voile{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease,visibility 0s linear 0s}
    body.co #btnMenu{display:inline-grid}
    /* E5 : une seule gouttière (--e-4) pour l'en-tête, le contenu et le tiroir */
    .hd{padding-left:var(--e-4);padding-right:var(--e-4)}
    .contenu{padding:0 var(--e-4) 56px}
    .latTete{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);position:sticky;top:0;z-index:1;background:var(--menu);margin:0 0 var(--e-2)}
    .latFermer{width:var(--h-ctrl);height:var(--h-ctrl);font:inherit;font-size:var(--t-l);line-height:1;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--encre2);cursor:pointer}
    .latTete .latLogo{height:40px;cursor:default}
    .latFermer:hover{background:var(--surf2);color:var(--encre)}
    .latFermer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
    /* tiroir (tablette, téléphone en paysage) : texte des entrées à --t-m, familles et compteurs à --t-s,
       icônes à --e-5 (24 px) ; sous 700 px le bloc « Menu plein écran » plus bas agrandit encore */
    #lateral .mcItem{font-size:var(--t-m)}
    #lateral .navlab,#lateral .tab .n{font-size:var(--t-s)}
    #lateral .icw .ic,#lateral .mcItem .ic{width:var(--e-5);height:var(--e-5)}
    #pageTete{padding-top:var(--e-1)}
    #pageTete h1{font-size:var(--t-l)}
    .ptIco{width:calc(var(--e-6) + var(--e-1));height:calc(var(--e-6) + var(--e-1))}
    .ptIco .ic{width:calc(var(--e-4) + var(--e-1));height:calc(var(--e-4) + var(--e-1))}
  }
  /* calendrier */
  .calhead{display:flex;align-items:center;gap:var(--e-3);margin-bottom:var(--e-3);flex-wrap:wrap}
  .calhead h3{margin:0;font-size:var(--t-m);min-width:150px;text-align:center}
  /* E5 (5b) : colonnes égales à toutes les largeurs ; un nom long se coupe, il n'élargit plus rien */
  .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--e-2)}
  .cal.sem{grid-template-columns:auto repeat(7,minmax(0,1fr))}
  .dow{font-size:var(--t-xs);font-weight:var(--g-fort);color:var(--encre3);text-align:center;text-transform:uppercase;letter-spacing:.06em;padding:var(--e-1) 0}
  .day{min-width:0;border:1px solid var(--filet);border-radius:var(--r);min-height:64px;padding:var(--e-1) var(--e-2);background:var(--surf);position:relative;cursor:default;font-size:var(--t-s)}
  .day.autre{opacity:.35}
  .day .num{font-size:var(--t-xs);font-weight:var(--g-fort);color:var(--encre3)}
  .day.we{background:var(--surf2)}
  .day.ferie .num::after{content:" férié";color:var(--att);font-weight:var(--g-fort);font-size:var(--t-xs)}
  .day.today{outline:2px solid var(--marque-f);outline-offset:-1px}
  .pers{margin-top:var(--e-1);font-size:var(--t-s);font-weight:var(--g-fort);border-radius:var(--r);padding:var(--e-1) var(--e-2);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .day .pending{position:absolute;top:4px;right:5px;font-size:var(--t-xs)}
  .day.editable{cursor:pointer}
  .day.editable:hover{border-color:var(--marque-f);box-shadow:var(--ombre-1)}
  .day select{margin-top:var(--e-1);font-size:var(--t-m);padding:var(--e-1) var(--e-1);min-height:0;width:100%;min-width:0}
  .day .pers{background:var(--pers-f,var(--surf2));color:var(--pers-e,var(--encre3))}
  .day .pers.modif{outline:2px dashed currentColor}
  /* week-end d'astreinte (ven + sam + dim) : « week-end » sur le vendredi, mes jours cernés, week-end à pourvoir en ambre */
  .day .weLib{font-size:var(--t-xs);font-weight:var(--g-fort);color:var(--encre3);margin-left:var(--e-1)}
  .day.mien{border-color:var(--marque-f)}
  .day .pers.nc{background:var(--att-d);color:var(--att)}
  /* audit d'accessibilité, lot A3 : cases de jour, pastilles de l'agenda et zone de dépôt atteintes au clavier —
     même double anneau que les boutons (.btn:focus-visible) */
  .day[role="button"]:focus-visible,.day .num[role="button"]:focus-visible,.drop:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anneau)}
  .legend{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-4)}
  .legend span{font-size:var(--t-s);font-weight:var(--g-fort);border-radius:var(--r);padding:var(--e-1) var(--e-2)}
  /* listes */
  table{border-collapse:collapse;width:100%;font-size:var(--t-s)}
  th{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:var(--g-fort);color:var(--encre3);text-align:left;padding:var(--e-2) var(--e-3);border-bottom:1px solid var(--filet2)}
  td{padding:var(--e-3);border-bottom:1px solid var(--filet);vertical-align:top}
  tr:last-child td{border-bottom:0}
  .chip{display:inline-block;font-size:var(--t-xs);font-weight:var(--g-fort);border-radius:var(--r-rond);padding:var(--e-1) var(--e-2);white-space:nowrap;line-height:1.5}
  .chip.att{background:var(--att-d);color:var(--att)}
  .chip.ok{background:var(--ok-d);color:var(--ok)}
  .chip.no{background:var(--crit-d);color:var(--crit)}
  .chip.sa{background:var(--surf2);color:var(--encre2);border:1px solid var(--filet2)}
  /* V-198 : carte « Démonstration » (compte direction de demo.dipylon.fr seulement) */
  .demoCarte{border:1px solid var(--filet);border-radius:var(--r-l);padding:var(--e-3) var(--e-4);margin:0 0 var(--e-4);background:var(--surf2)}
  .demoCarteTete{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);flex-wrap:wrap;margin:0 0 var(--e-2)}
  .demoCarteTete h2{margin:0}
  .demoCarte h3{margin:var(--e-3) 0 var(--e-2);font-size:var(--t-m)}
  .demoComptes{list-style:none;margin:0;padding:0}
  .demoComptes li{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;min-height:44px;border-top:1px solid var(--filet)}
  .demoMsg{border-top:1px solid var(--filet)}
  .demoMsg summary{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;min-height:44px;cursor:pointer}
  .demoMsg pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:var(--t-s);margin:0 0 var(--e-3);color:var(--encre2)}
  /* V-144 : ajout d'un collaborateur — écran de choix en trois cartes, puis le parcours choisi. Lot 3 (21/10/2026) :
     tête, corps et pied sont ceux de toute fenêtre de saisie (dialog.fen, plus bas) ; restent ici les écrans et les cartes. */
  #ajChoix,#ajForm{display:flex;flex-direction:column;min-height:0}
  .ajQuestion{margin:0 0 var(--e-3);font:var(--g-fort) var(--t-m)/1.4 var(--f-ui);color:var(--encre)}
  .ajRetour{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;margin:-12px 0 2px -10px;padding:0 var(--e-3);
    background:none;border:0;border-radius:var(--r);color:var(--marque-f);font:var(--g-fort) var(--t-s)/1.4 var(--f-ui);cursor:pointer}
  .ajRetour .ic{width:16px;height:16px;vertical-align:0}
  .ajRetour:hover{color:var(--marque-e);background:var(--marque-d)}
  .ajRetour:focus-visible{outline:2px solid var(--marque-f);outline-offset:2px}
  .ajGrille{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e-3)}
  .ajNote{margin:2px 0 var(--e-3);font-size:var(--t-s);line-height:1.45;color:var(--encre2)}
  .ajNote:empty{display:none}
  .ajErr{margin:0 0 var(--e-3);font-size:var(--t-s);line-height:1.45;color:var(--crit)}
  .ajErr:empty{display:none}
  @media(max-width:640px){
    .ajGrille{grid-template-columns:1fr}
  }
  /* bandeau d'aide « nouvel embauché » dans la zone de l'assistant de fiche (violet : zone IA) */
  .ajEmbaucheAide{display:flex;gap:var(--e-2);align-items:flex-start;margin:0 0 var(--e-2);padding:var(--e-3) var(--e-3);border-radius:var(--r);
    background:var(--ia-d);border:1px solid var(--ia-b);color:var(--ia-f);font-size:var(--t-s);line-height:1.45}
  .ajEmbaucheAide .ic{flex:none;margin-top:2px}
  .ajEmbaucheAide .btn{margin-left:auto;flex:none;align-self:center}
  .note{background:var(--marque-d);color:var(--marque-e);border-radius:var(--r);padding:var(--e-3) var(--e-3);font-size:var(--t-s);margin:var(--e-3) 0}
  .note.warn{background:var(--att-d);color:var(--att)}
  .hidden{display:none!important}
  dialog{border:1px solid var(--filet);border-radius:var(--r-l);box-shadow:var(--ombre-2);padding:var(--e-5);max-width:420px;width:92vw;background:var(--surf);color:var(--encre)}
  /* Ergonomie, lot E1 (fiche 2026-09-26) : fenêtre centrée par le navigateur
     (position fixe du mode modal), voile visible ; trois largeurs au lieu des
     style="max-width:…" en ligne. ::backdrop n'hérite pas toujours des jetons :
     teintes écrites en clair (voir aussi le thème sombre). */
  dialog::backdrop{background:rgb(15 27 34 / .55);backdrop-filter:blur(2px)}
  .dlg-xs{max-width:380px} .dlg-s{max-width:460px} .dlg-m{max-width:640px} .dlg-l{max-width:820px}
  /* fenêtre en cours de saisie : elle tressaute et demande « Abandonner la saisie ? » */
  .dlgQuitter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);flex:none;margin:var(--e-4) 0 0;padding:var(--e-3) var(--e-3);
    border-radius:var(--r);background:var(--att-d);color:var(--att);border:1px solid var(--att)}
  .dlgQuitter p{margin:0;flex:1 1 220px;font-weight:var(--g-fort);font-size:var(--t-s)}
  @keyframes dlgMonte{from{transform:translateY(100%)}to{transform:none}}
  @keyframes dlgTresse{0%,100%{translate:0}25%{translate:-6px 0}75%{translate:6px 0}}
  dialog.dlgSecoue{animation:dlgTresse .18s ease-in-out}
  dialog h3{margin:0 0 var(--e-1);font-size:var(--t-l);line-height:1.2;padding-right:36px}
  /* ══ Lot 3 (21/10/2026) : la FENÊTRE DE SAISIE (dialog.fen). Tête .fenT (pastille du module, titre, « Étape n sur N »),
     corps .fenC qui défile seul, pied .fenP fixe qui porte le seul bouton turquoise. Ordinateur : posée en haut (elle ne
     saute pas d'une étape à l'autre) ; téléphone : feuille du bas (bloc 700 px). « Abandonner la saisie ? » (commun.js)
     prend la place du pied. Les fenêtres sans la classe gardent la règle dialog ci-dessus. */
  dialog.fen{padding:0;overflow:hidden;max-width:560px;margin:max(var(--e-6),8dvh) auto auto;max-height:calc(100dvh - max(var(--e-6),8dvh) - var(--e-6))}
  dialog.fen[open]{display:flex;flex-direction:column}
  #dlgDemNouv{max-width:680px}
  .fenT{display:flex;flex:none;align-items:center;gap:var(--e-3);min-height:calc(var(--h-ctrl) + var(--e-3)*2);padding:var(--e-3) calc(var(--h-ctrl) + var(--e-3)*2) var(--e-3) var(--e-5);border-bottom:1px solid var(--filet-doux)}
  .fen:has(>#bulleChat:not(.hidden)) .fenT{padding-right:calc(var(--h-ctrl)*2 + var(--e-3)*3)}
  .fenT .rond{flex:none;width:calc(var(--e-6) + var(--e-1));height:calc(var(--e-6) + var(--e-1))}
  .fenTitre{flex:1;min-width:0}
  .fenT :is(h2,h3){margin:0;padding:0;font-size:var(--t-l);line-height:1.25}
  .fen [tabindex="-1"]:focus-visible{outline:2px solid var(--marque-f);outline-offset:4px;border-radius:var(--r)}
  .fenTitre .sub,.fenEtape{margin:var(--e-1) 0 0;font-size:var(--t-s);line-height:1.45;color:var(--encre2);text-wrap:pretty}
  .fenTitre .sub b,.fenEtape b{color:var(--encre);font-weight:var(--g-fort)}
  .fenC{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:var(--e-5);padding:var(--e-4) var(--e-5) var(--e-5)}
  .fenC h3:not(.sec){margin:0 0 var(--e-2);padding:0;font-size:var(--t-m)}
  .gridW.duo{grid-template-columns:repeat(auto-fit,minmax(max(140px,40%),1fr))}
  .fenP{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--e-2);padding:var(--e-4) var(--e-5) var(--e-5);border-top:1px solid var(--filet-doux);background:var(--surf)}
  .fenP .fenG{margin-right:auto}
  dialog.fen>.dlgQuitter{margin:0;border-width:1px 0 0;border-radius:0;padding:var(--e-4) var(--e-5) var(--e-5)}
  dialog.fen:has(>.dlgQuitter) .fenP{display:none}
  /* étapes : le pied ne montre que les boutons de l'étape ouverte (data-etape sur la fenêtre, data-pour sur chaque bouton) */
  .fen[data-etape="1"] .fenP>:not([data-pour~="1"]),.fen[data-etape="2"] .fenP>:not([data-pour~="2"]),
  .fen[data-etape="3"] .fenP>:not([data-pour~="3"]),.fen[data-etape="4"] .fenP>:not([data-pour~="4"]){display:none}
  /* aide repliée (« Ajouter un motif », « Joindre un justificatif ») : un bouton secondaire cerné (règle « Net ») qui
     s'efface quand son champ s'ouvre ; le focus passe alors au champ (commun.js, écouteur « toggle ») */
  .fenAjouts{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0 0}
  .fenAjouts>[open]{flex-basis:100%}
  .fenPli>summary{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);padding:0 var(--e-3);list-style:none;cursor:pointer;
    border:1px solid var(--marque-f);border-radius:var(--r);background:var(--surf);color:var(--marque-e);font-size:var(--t-s);font-weight:var(--g-fort)}
  .fenPli>summary::-webkit-details-marker{display:none}
  .fenPli>summary:hover{background:var(--marque-d)}
  .fenPli>summary:focus-visible{outline:2px solid var(--marque-f);outline-offset:2px}
  .fenPli[open]>summary{display:none}
  /* message du serveur (et bandeau de la retenue, lot 2) dans une fenêtre de saisie : sous sa tête .fenT, dans son flux (toastZone,
     informations.js), sans rien couvrir ; l'ordre affiché est celui de la page (le lecteur d'écran et la tabulation le suivent) et la
     feuille du téléphone, ancrée en bas, ne déplace pas ses champs quand il part */
  dialog.fen>#toastZone{position:static;transform:none;width:auto;margin:var(--e-3) var(--e-5) 0}
  dialog.fen>:is(.fenP,.dlgQuitter){order:2}
  #moAide:empty{display:none}
  .empty{color:var(--encre3);font-size:var(--t-s);padding:var(--e-4) 0;text-align:center}

  /* ---------- assistant de demande (portail) ---------- */
  .hint{font-size:var(--t-s);color:var(--encre3);font-weight:var(--g-normal)}
  label .req{color:var(--crit);margin-left:2px}
  input.err,select.err,textarea.err{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-d)}
  /* audit d'accessibilité, lot A5 : erreur posée sous le champ fautif (erreurChamp, commun.js) —
     l'icône double la couleur, le champ prend la bordure critique */
  .champErr{flex-basis:100%;margin:var(--e-1) 0 0;color:var(--crit);font-size:var(--t-s);font-weight:var(--g-moyen);line-height:1.45}
  .champErr .ic{margin-right:var(--e-1)}
  input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.drop[aria-invalid="true"]{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-d)}
  .gridW{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
  @media(max-width:620px){.gridW{grid-template-columns:1fr}}
  .fw{display:flex;flex-direction:column;gap:var(--e-2)}
  .fw.full{grid-column:1/-1}
  .drop{display:block;width:100%;font-family:inherit;border:1.5px dashed var(--filet2);border-radius:var(--r);padding:var(--e-4);text-align:center;color:var(--encre3);font-size:var(--t-s);cursor:pointer;background:var(--surf2)}
  .drop:hover{border-color:var(--marque-f);color:var(--marque-e)}
  .fdDrop.survol,.docDrop.survol{border-color:var(--ia);background:var(--ia-d);color:var(--ia-f)}
  /* V-191 : la case « Ajouter la mention » du dossier salarié. Cible de 44 px
     de haut, la case et son libellé formant une seule zone tapable. Ce n'est
     PAS une zone IA : aucune teinte violette ici. */
  .docMen{display:flex;align-items:center;gap:var(--e-2);min-height:44px;margin-top:var(--e-2);padding:0 var(--e-1);
    font-size:var(--t-s);color:var(--encre2);cursor:pointer}
  .docMen input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--marque-f)}
  /* l'indice qui dit POURQUOI la case est dans cet état, relié par
     `aria-describedby` : sans lui, une case cochée par défaut sur « Autre »
     et décochée sur « Contrat » n'est qu'un caprice de l'écran */
  .docMenAide{display:block;font-size:var(--t-s);color:var(--encre3)}
  .docMenAide:empty{display:none}
  /* V-192 (D1) : la case « titre de séjour » de « Mon dossier ». Même cible
     tactile de 44 px que `.docMen`, et HORS de la zone IA : ce n'est pas
     l'assistant qui pose cette question, c'est la loi. */
  /* V-192 (audit design) : la question est REPLIÉE. Elle ne concerne qu'une
     partie des salariés, et une case posée en clair sous la zone de dépôt
     attire l'œil de tous les autres pour rien. Le lien la déplie. */
  .mdTsPli{margin-top:var(--e-3)}
  .mdTsPli>summary{display:flex;align-items:center;min-height:44px;padding:0 var(--e-1);
    font-size:var(--t-s);color:var(--encre2);text-decoration:underline;cursor:pointer;list-style:none}
  .mdTsPli>summary::-webkit-details-marker{display:none}
  .mdTsPli>summary:focus-visible{outline:2px solid var(--marque-f);outline-offset:2px;border-radius:var(--r)}
  .mdTs{display:flex;align-items:flex-start;gap:var(--e-2);min-height:44px;padding:var(--e-2) var(--e-1);
    font-size:var(--t-s);color:var(--encre2);cursor:pointer}
  .mdTs input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--marque-f)}
  .mdTsAide{display:block;font-size:var(--t-s);color:var(--encre3)}
  /* V-193 (audit design) : la ligne d'une pièce du dossier. Elle porte
     désormais jusqu'à quatre boutons et deux pastilles : sans `flex-wrap`,
     le nom était écrasé à quelques caractères sur un téléphone. Le nom garde
     `min-width:0` pour pouvoir se réduire ET s'élider, jamais déborder. */
  .docLigne{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;
    padding:var(--e-1) 0;border-bottom:1px solid var(--filet);font-size:var(--t-s)}
  .docNom{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
  /* V-193 (B2) : le lien d'annulation d'un remplacement, et sa confirmation
     en ligne. Un LIEN, pas un bouton : c'est un recours, pas une action
     attendue. Il prend toute la largeur de la ligne, sous les boutons, et la
     cible tactile reste entière.
     Charte commune, lot C2 : c'est le bouton « discret » de la charte (Annuler,
     Voir plus, Retour) — texte turquoise foncé (--marque-e : AA sur toutes les
     surfaces, --marque-f tombe à 4,4:1 sur --surf2), souligné au survol. */
  .btn-lien{border:0;background:none;padding:0 var(--e-1);min-height:var(--h-ctrl);
    font-size:var(--t-s);color:var(--marque-e);text-decoration:none;
    text-underline-offset:.18em;cursor:pointer}
  .btn-lien:hover{color:var(--marque-e);text-decoration:underline}
  .docLigne .btn-lien{flex:1 0 100%;text-align:left}
  .annulConf{flex:1 0 100%;display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center;
    margin-top:var(--e-1);padding:var(--e-2) var(--e-3);border-radius:var(--r);
    background:var(--att-d);color:var(--att);font-size:var(--t-s)}
  .mdTsConf{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-2)}
  .fdProp table{width:100%;border-collapse:collapse;font-size:var(--t-s)}.fdProp td{padding:var(--e-1) var(--e-2);border-top:1px solid var(--filet);vertical-align:top}.fdProp td:first-child{white-space:nowrap;color:var(--encre3)}
  .files{list-style:none;margin:var(--e-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--e-2)}
  .files li{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-s);background:var(--surf2);padding:var(--e-2) var(--e-3);border-radius:var(--r)}
  .files li button{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--encre3);font-size:var(--t-m);line-height:1;padding:0 var(--e-1)}
  .btn-ghost{background:none;border-color:transparent;color:var(--encre3);padding:var(--e-2) var(--e-2)}
  .btn-ghost:hover{color:var(--marque-e)}
  .actions{display:flex;gap:var(--e-3);margin-top:var(--e-5);flex-wrap:wrap}
  @media(min-width:701px){body.co .contenu .actions{padding-right:calc(var(--e-7) * 3 + var(--e-4))}}   /* la bulle de l'IA ne couvre jamais le bouton d'une rangée d'actions (21/10) */
  h3.sec{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--encre3);margin:var(--e-5) 0 var(--e-3);font-weight:var(--g-fort);font-family:var(--f-ui)}
  .recap{border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
  .recap .row{display:flex;gap:var(--e-4);padding:var(--e-2) var(--e-4);font-size:var(--t-s);border-bottom:1px solid var(--filet)}
  .recap .row:last-child{border-bottom:0}
  .recap .row:nth-child(odd){background:var(--surf2)}
  .recap .k{flex:0 0 42%;color:var(--encre3);font-weight:var(--g-moyen)}
  .recap .v{flex:1;font-weight:var(--g-moyen);white-space:pre-wrap;word-break:break-word}
  .okc{text-align:center;padding:var(--e-4) 0 var(--e-1)}
  .okc .mark{width:52px;height:52px;border-radius:var(--r-rond);background:var(--ok-d);color:var(--ok);display:grid;place-items:center;margin:0 auto var(--e-4);font-size:var(--t-xl)}
  .ref{display:inline-block;font-family:var(--f-code);font-size:var(--t-m);font-weight:var(--g-fort);background:var(--marque-d);color:var(--marque-e);padding:var(--e-2) var(--e-4);border-radius:var(--r);letter-spacing:.04em;margin:var(--e-2) 0 var(--e-4)}
  .tg{background:var(--terminal);color:var(--terminal-texte);border-radius:var(--r-l);padding:var(--e-4);font-size:var(--t-s);line-height:1.55;white-space:pre-wrap;font-family:var(--f-code);overflow-x:auto}
  .tg b{color:var(--terminal-acc)}
  .tgbtns{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-3)}
  .tgbtns span{background:#1e303a;color:#b4c3c8;border-radius:var(--r);padding:var(--e-2) var(--e-3);font-size:var(--t-s)}
  details.raw{margin-top:var(--e-3)}
  details.raw summary{font-size:var(--t-s);color:var(--encre3);cursor:pointer}
  details.raw pre{background:var(--terminal);color:var(--terminal-texte);padding:var(--e-4);border-radius:var(--r);overflow-x:auto;font-size:var(--t-s);line-height:1.5}

  /* ---------- annuaire : fiches utilisateurs ---------- */
  .eqCard{border:1px solid var(--filet);border-radius:var(--r-l);margin-bottom:var(--e-3);background:var(--surf);overflow:hidden}
  .eqHead{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);flex-wrap:wrap}
  .eqHead .pers{font-size:var(--t-s)}
  .eqInfo{font-size:var(--t-s);color:var(--encre2)}
  .eqInfo b{color:var(--encre)}
  .eqManque{color:var(--att);font-weight:var(--g-fort)}
  .eqBtns{margin-left:auto;display:flex;gap:var(--e-2);flex-wrap:wrap}
  .eqEdit{border-top:1px solid var(--filet);background:var(--surf2);padding:var(--e-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--e-3)}
  .eqEdit .fw label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--encre3)}
  .eqEdit .eqActions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2);justify-content:flex-end;align-items:center}
  .eqEdit .eqActif{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre2);padding-top:var(--e-5)}
  .eqEdit .eqActif input{width:auto}
  /* numérisation des justificatifs */
  .scanZone{position:relative;background:#1b2426;border-radius:var(--r);overflow:hidden;
    display:flex;align-items:center;justify-content:center;min-height:220px}
  .scanZone canvas{display:block;max-width:100%;touch-action:none;cursor:grab}
  .scanZone canvas:active{cursor:grabbing}
  .scanOpts{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center;margin:var(--e-3) 0 var(--e-1)}
  .scanOpts .tab{font-size:var(--t-s);padding:var(--e-2) var(--e-3);min-height:var(--h-ctrl)}
  .scanEtatTxt{font-size:var(--t-s);color:var(--encre3);margin:var(--e-2) 0 0;min-height:16px}
  .drline{display:flex;gap:var(--e-3);align-items:flex-start;border:1px solid var(--filet);border-radius:var(--r);
    padding:var(--e-3) var(--e-3);margin-bottom:var(--e-2);cursor:pointer;font-size:var(--t-s);background:var(--surf2)}
  .drline:hover{border-color:var(--marque-f)}
  .drline input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--marque-f)}
  .drline input:disabled+span{opacity:.55}
  .ic{width:18px;height:18px;vertical-align:-3px;flex:none}
  .tab .ic{width:16px;height:16px;margin-right:2px;vertical-align:-3px}
  .h2ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r);
    background:var(--marque-d);color:var(--marque-e);margin-right:var(--e-2);vertical-align:-8px}
  .h2ic .ic{width:17px;height:17px;vertical-align:0}
  .dh3ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r);
    background:var(--marque-d);color:var(--marque-e);margin-right:var(--e-2);vertical-align:-7px}
  .dh3ic .ic{width:15px;height:15px;vertical-align:0}

  /* ---------- planning des absences (vue équipe) ---------- */
  .absGrille{overflow-x:auto;border:1px solid var(--filet);border-radius:var(--r);background:var(--surf)}
  .absGrille table{border-collapse:collapse;width:100%;font-size:var(--t-s)}
  .absGrille th{position:sticky;top:0;background:var(--surf2);padding:var(--e-1) var(--e-1);text-align:center;border-bottom:1px solid var(--filet2);min-width:24px}
  .absGrille td{border-bottom:1px solid var(--filet);height:30px;text-align:center;padding:0}
  .absGrille td.we{background:var(--surf2)}
  .absGrille td.ferie{background:var(--att-d)}
  .absGrille td .plein{display:block;height:18px;margin:0 1px;border-radius:var(--r)}
  .absLegende{display:flex;gap:var(--e-3);flex-wrap:wrap;margin-top:var(--e-3);font-size:var(--t-s);color:var(--encre2)}
  .absLegende span i{display:inline-block;width:14px;height:10px;border-radius:var(--r);margin-right:var(--e-1);vertical-align:-1px}

  /* ---------- rappels / notifications ---------- */
  .btn .n{display:inline-block;min-width:16px;text-align:center;background:var(--crit);color:var(--sur-fort);border-radius:var(--r-rond);font-size:var(--t-xs);padding:0 var(--e-1);margin-left:var(--e-1);vertical-align:1px}
  .rap{display:flex;gap:var(--e-2);align-items:center;padding:var(--e-2) 0;font-size:var(--t-s);border-top:1px solid var(--filet)}
  .rap:first-of-type{border-top:0}
  .rap .pt{flex:none;width:8px;height:8px;border-radius:var(--r-rond);background:var(--att)}
  .rap.crit .pt{background:var(--crit)}
  .rap.info .pt{background:var(--marque-f)}
  .rap span{flex:1}
  .rap .btn{flex:none}

  /* A2 : zone sensible de 44 px autour des croix, dessin inchangé (photos, fichiers joints) */
  .files li button,.btnTts,.btnTtsAuto{position:relative}
  .files li button::after,.btnTts::after,.btnTtsAuto::after{content:"";position:absolute;top:50%;left:50%;width:var(--h-ctrl);min-width:100%;height:var(--h-ctrl);transform:translate(-50%,-50%)}
  /* tableaux générés : défilement horizontal plutôt que débordement */
  #rapTable,#rapConges,#rapHS,#genResultat,#listeDemandes,#mesInterventions{overflow-x:auto}
  #crmTaches,#crmListe,#crmRelances{overflow-x:auto}
  /* V-181 : tableau de suivi des dossiers (Utilisateurs → Dossiers). Réutilise
     l'anneau des tuiles du tableau de bord : hors d'une tuile, `--te` n'est pas
     défini, on le pose ici (vert quand le dossier est à jour, ambre sinon). */
  .dossAnn{--te:var(--ok);display:inline-block;vertical-align:middle}
  .dossAnn.att{--te:var(--att)}
  .dossAnn .anneau{width:46px;height:46px}
  .dossAnn .anneau .ctr{font:var(--g-fort) var(--t-xs)/1 var(--f-ui);color:var(--encre2);padding:0}
  .dossAnn .anneau .ctr small{font-size:var(--t-xs);margin-left:0}
  .dossPuces{display:flex;flex-wrap:wrap;gap:var(--e-1);margin:2px 0 0}
  .dossPuce{font-size:var(--t-xs);border-radius:var(--r-rond);padding:var(--e-1) var(--e-2);background:var(--att-d);color:var(--att);white-space:nowrap}
  .dossPuce.info{background:var(--surf2);color:var(--encre2)}
  .dossPuce.per{background:var(--crit-d);color:var(--crit)}
  .dossPuce.hors{background:var(--surf2);color:var(--encre3);text-decoration:line-through}
  .dossNonConc{display:flex;flex-wrap:wrap;gap:var(--e-4);margin:var(--e-2) 0 0}
  .dossNonConc label{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;margin:0;font-size:var(--t-s);font-weight:var(--g-moyen);color:var(--encre2);cursor:pointer}
  /* la règle générale des champs (largeur 100 %) écrasait la case */
  .dossNonConc input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;padding:0;flex:none}
  /* ── V-186 : prénom et nom de famille dans le même champ ────────────────
     Un bandeau DISCRET (pas une alerte : rien n'est cassé, il y a seulement
     du rangement à faire), puis une grande carte où l'on relit ligne à ligne.
     Aucune couleur d'IA ici : la proposition vient d'une règle de casse, pas
     d'un modèle. */
  .ecBandeau{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;margin:0 0 var(--e-3);
    padding:var(--e-3) var(--e-4);border:1px solid var(--filet);border-radius:var(--r);background:var(--surf2);
    font-size:var(--t-s);color:var(--encre2)}
  .ecBandeau .ecIc{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;
    border-radius:var(--r);background:var(--surf);color:var(--encre3)}
  .ecBandeau .ecIc .ic{width:15px;height:15px}
  .ecBandeau span:nth-child(2){flex:1 1 200px}
  #ecListe{max-height:min(56vh,440px);overflow:auto;border:1px solid var(--filet);border-radius:var(--r)}
  #ecListe table{width:100%;border-collapse:collapse}
  #ecListe th,#ecListe td{text-align:left;vertical-align:middle;padding:var(--e-2) var(--e-3);border-top:1px solid var(--filet)}
  #ecListe thead th{position:sticky;top:0;z-index:1;background:var(--surf);border-top:0;
    font-size:var(--t-s);color:var(--encre3);white-space:nowrap}
  #ecListe tbody tr:hover{background:var(--surf2)}
  #ecListe td.coche{width:44px;padding:0 0 0 var(--e-1)}
  #ecListe input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;padding:0}
  #ecListe input[type=text]{width:100%;min-width:90px;margin:0}
  .ecPied{display:flex;gap:var(--e-2);justify-content:flex-end;margin-top:var(--e-3);flex-wrap:wrap;align-items:center}
  .ecConf{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;flex-basis:100%;justify-content:flex-end}
  .ecConf .question{flex:1 1 auto;font-weight:var(--g-fort);font-size:var(--t-s);color:var(--encre2)}
  @media(max-width:700px){
    /* une carte par fiche : la case et le nom d'aujourd'hui en tête, les deux
       champs dessous, chacun avec son intitulé */
    #ecListe thead{display:none}
    #ecListe tbody,#ecListe tr{display:grid}
    #ecListe tr{grid-template-columns:44px minmax(0,1fr);column-gap:var(--e-2);align-items:center;
      border-top:1px solid var(--filet);padding:var(--e-3) var(--e-2)}
    #ecListe tbody tr:hover{background:transparent}
    #ecListe td{display:block;border:0;padding:var(--e-1) 0;grid-column:2}
    #ecListe td.coche{grid-column:1;padding:0}
    #ecListe td[data-lbl]::before{content:attr(data-lbl) " : ";font-size:var(--t-s);color:var(--encre3)}
    .ecPied .btn{flex:1 1 100%;justify-content:center}
  }
  /* ── V-185 : « MON DOSSIER » — la voie CONNECTÉE ──────────────────────────
     Décision de Dimitri du 19/09 : qui a un compte met son dossier à jour ICI,
     et non par un lien public. L'écran reprend la structure et les textes du
     formulaire public (embauche.html) : ce qui manque en tête, la fiche
     pré-remplie, une zone de dépôt unique sous tampon violet, l'envoi.
     Grande carte sur bureau, FEUILLE DU BAS sur téléphone. */
  /* lot 3 : l'ossature (tête et pied fixes, seul le corps défile) est celle de dialog.fen, en plus large */
  #dlgMonDossier{max-width:760px}
  /* champ verrouillé : la forme dit l'état avant que le cadenas ne l'explique */
  #dlgMonDossier input[readonly]{background:var(--surf2);color:var(--encre2);cursor:default}
  #mdCorps>.sub:first-child{margin:0 0 var(--e-3)}
  .mdPied .mdSauve{margin-right:auto}
  /* bande verte du dossier à jour : l'état d'abord, l'action ensuite */
  .mdBande{display:flex;gap:var(--e-3);align-items:flex-start;margin:0;padding:var(--e-3) var(--e-4);border-radius:var(--r-l);
    background:var(--ok-d);color:var(--ok);font-size:var(--t-s);line-height:1.45}
  .mdBande .ic{flex:none;width:20px;height:20px;margin-top:1px}
  .mdBande b{color:var(--ok)}
  .mdEtat{display:flex;gap:var(--e-4);align-items:center;margin:0}
  .mdEtat .anneau{width:56px;height:56px;flex:none}
  .mdEtat .anneau .ctr{font:var(--g-fort) var(--t-s)/1 var(--f-ui);color:var(--encre2);padding:0}
  /* notices de la mutuelle : une rangée tapable par notice (D1) */
  .mdNotices{display:flex;flex-direction:column;gap:var(--e-2);margin:var(--e-3) 0}
  .mdNotices .mdNote{margin:0;padding:0}
  .mdNoticeBtn{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:44px;padding:var(--e-2) var(--e-3);
    background:none;border:0;border-radius:var(--r);color:inherit;font:var(--g-fort) var(--t-s)/1.4 var(--f-ui);text-align:left;cursor:pointer}
  .mdNoticeBtn .ic{flex:none;width:20px;height:20px}
  .mdNoticeBtn:hover{background:var(--marque-d)}
  .mdNoticeBtn:focus-visible{outline:2px solid var(--marque-f);outline-offset:2px}
  .mdSec{margin:var(--e-4) 0 0;padding-top:var(--e-4);border-top:1px solid var(--filet)}
  .mdSec:first-child{border-top:0;padding-top:0;margin-top:0}
  .mdSec h4{font-family:var(--f-ui);font-size:var(--t-m);font-weight:var(--g-fort);margin:0 0 var(--e-2)}
  .mdVerrou{display:flex;align-items:flex-start;gap:var(--e-2);font-size:var(--t-s);color:var(--encre3);margin-top:var(--e-1)}
  .mdVerrou svg{width:13px;height:13px;flex:none;margin-top:2px}
  .mdDrop{border:1.5px dashed var(--ia-b);border-radius:var(--r);padding:var(--e-5) var(--e-4);text-align:center;
    color:var(--ia-f);background:var(--surf);cursor:pointer;font-size:var(--t-s);min-height:92px;display:grid;place-items:center;gap:var(--e-1)}
  .mdDrop.survol{border-style:solid;background:var(--ia-d)}
  /* dépôt en cours : la zone n'accepte plus rien, et le dit */
  .mdDrop.occupe{opacity:.6;cursor:progress}
  .mdDrop b{font-size:var(--t-m)}
  .mdDrop small{color:var(--encre3)}
  .mdProgres{margin:var(--e-3) 0 0;font-size:var(--t-s);color:var(--ia-f);min-height:1.2em}
  .mdPieces{list-style:none;margin:var(--e-3) 0 0;padding:0;border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden}
  .mdPieces li{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-top:1px solid var(--filet);min-height:48px}
  .mdPieces li:first-child{border-top:0}
  .mdPieces .coche{flex:none;width:26px;height:26px;border-radius:var(--r-rond);border:1.5px solid var(--filet2);display:grid;place-items:center;color:var(--encre3)}
  .mdPieces .coche .ic{width:14px;height:14px}
  .mdPieces li.recue .coche{background:var(--ok-d);border-color:var(--ok);color:var(--ok)}
  .mdPieces li.manque{background:var(--att-d)}
  .mdPieces li.manque .coche{border-color:var(--att);color:var(--att)}
  .mdPieces li.perimee{background:var(--crit-d)}
  .mdPieces li.perimee .coche{border-color:var(--crit);color:var(--crit)}
  .mdPieces .fac{margin-left:auto;font-size:var(--t-xs);color:var(--encre3);white-space:nowrap}
  .mdPieces li.manque .fac{color:var(--att);font-weight:var(--g-fort)}
  .mdPieces li.perimee .fac{color:var(--crit);font-weight:var(--g-fort)}
  .mdPieces li.recue .fac{color:var(--ok)}
  .mdDepos{list-style:none;margin:var(--e-3) 0 0;padding:0;font-size:var(--t-s);color:var(--encre2)}
  .mdDepos li{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;padding:var(--e-2) 0;border-top:1px dashed var(--filet)}
  .mdDepos li:first-child{border-top:0}
  .mdDepos .entete,.mdDepos .conseil{display:block;color:var(--encre3);border-top:0;padding:0 0 var(--e-1)}
  .mdDepos .nom{flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:var(--g-fort);color:var(--encre)}
  .mdDepos .range{display:flex;align-items:center;gap:var(--e-2);flex:1 1 240px;min-width:0}
  .mdDepos .range label{font-size:var(--t-s);color:var(--encre3);white-space:nowrap;margin:0}
  .mdDepos .range select{flex:1;min-width:0;min-height:44px}
  .mdDepos .btnret{flex:none;margin-left:auto}
  /* confirmation EN LIGNE : jamais de confirm() natif (bloquant, hors charte) */
  .mdDepos .conf{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;flex:1 1 100%;
    background:var(--crit-d);color:var(--crit);border-radius:var(--r);padding:var(--e-2) var(--e-3)}
  .mdDepos .conf .question{flex:1 1 auto;font-weight:var(--g-fort)}
  .mdDepos .bsupp{border-color:var(--crit);color:var(--crit);background:var(--surf)}
  .mdDepos .bsupp:hover{background:var(--crit);color:var(--sur-fort);border-color:var(--crit)}
  .mdNote{border-radius:var(--r);padding:var(--e-3) var(--e-3);font-size:var(--t-s);margin:var(--e-3) 0 0;background:var(--marque-d);color:var(--marque-e)}
  .mdNote.att{background:var(--att-d);color:var(--att)}
  .mdNote.ok{background:var(--ok-d);color:var(--ok)}
  .mdErr{color:var(--crit);font-size:var(--t-s);min-height:1.2em;margin:var(--e-3) 0 0}
  .mdSauve{font-size:var(--t-s);color:var(--encre3)}
  .mdSauve.ok{color:var(--ok)}
  @media(max-width:700px){
    /* UN SEUL bouton, pleine largeur : la croix ferme, le pied agit — sauf
       quand il n'y a rien à envoyer, où « Fermer » reprend sa place. */
    .mdPied .btn-s{display:none}
    .mdPied:has(#mdEnvoyer.hidden) .btn-s{display:inline-flex}
    .mdPied .btn{flex:1 1 100%;justify-content:center}
    .mdPied .mdSauve{flex-basis:100%;text-align:center;margin:0 0 var(--e-1)}
  }
  /* V-178 : justificatifs d'absence (pièces choisies, trombone, dialogue, onglet) */
  .pjZone{min-width:0}
  .pjZone input[type=file]{width:100%;min-width:0;padding:var(--e-2);font-size:var(--t-s);color:var(--encre3)}
  .pjZone input[type=file]::file-selector-button{font:var(--g-fort) var(--t-s)/1.2 var(--f-ui);margin-right:var(--e-3);padding:var(--e-2) var(--e-3);border-radius:var(--r);border:1px solid var(--filet2);background:var(--surf2);color:var(--encre2);cursor:pointer}
  .pjZone input[type=file]:hover::file-selector-button{border-color:var(--marque-f);color:var(--marque-e)}
  .pjListe{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2);min-width:0}
  /* V-191 : la ligne d'annonce de la préparation d'une pièce. PLACE RÉSERVÉE
     (`min-height`), sans quoi son apparition pousserait le bouton d'envoi
     sous le doigt qui s'en approche. */
  .pjProg{margin:var(--e-2) 0 0;font-size:var(--t-s);color:var(--encre3);min-height:1.2em}
  /* le refus s'affiche EN LIGNE, sous le champ : un toast se lit une fois,
     passe, et ne dit plus jamais quelle pièce a été écartée */
  .pjErr{margin:var(--e-1) 0 0;font-size:var(--t-s);color:var(--crit)}
  .pjErr:empty{display:none}
  /* V-192 (D4) : l'aide du volet 3. Un conseil à suivre, pas un refus : elle
     se lit comme du texte courant, avec un filet qui la rattache au champ.
     Les jetons sont ceux de DESIGN.md, donc les deux thèmes suivent. */
  /* V-192 (audit design) : bordure COMPLÈTE, pas de filet d'accent à gauche —
     ce n'est pas une citation, c'est une consigne qui encadre le champ. */
  .pjAide{margin:var(--e-2) 0 var(--e-2);padding:var(--e-2) var(--e-3);font-size:var(--t-s);line-height:1.45;
    border:1px solid var(--filet2);border-radius:var(--r);
    background:var(--surf2);color:var(--encre2)}
  .pjAide:empty{display:none}
  .pjListe:empty{display:none}
  .btn.pjX{flex:none;min-width:44px;padding:0} /* cible tactile : 44 px (charte commune) */
  .pjX:hover{color:var(--crit)}
  #jlPieces{overflow-x:auto}
  #jlPieces td{vertical-align:middle}
  @media(min-width:900px){#sousAbsJus .gridW{grid-template-columns:repeat(4,minmax(0,1fr))}}
  #sousAbsRep .note ul{margin:var(--e-2) 0 0;padding-left:var(--e-5)}
  .note.repCrit{background:var(--crit-d);color:var(--crit)}
  .note.repOk{background:var(--ok-d);color:var(--ok)}
  /* les deux gestes qui écrivent (appliquer, annuler) : chacun dans son cadre, le mot à saisir et son bouton côte à
     côte, le message d'erreur (.champErr, posé après le champ) sous les deux ; l'annulation porte le filet critique */
  .repGeste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin:var(--e-5) 0 0;padding:var(--e-4);border:1px solid var(--filet2);border-radius:var(--r);background:var(--surf2)}
  .repGeste label{flex:1 0 100%;margin:0;color:var(--encre)}
  .repGeste input{flex:0 1 220px;width:auto;min-width:0}
  .repGeste .champErr{order:1}
  .repGesteCrit{border-color:var(--crit);background:var(--surf)}
  /* replis de l'écran (lignes non reprises, annulation) : 44 px sous le doigt, listes à la taille du reste ;
     l'annulation est tenue à l'écart du geste d'application par un filet */
  #sousAbsRep summary{padding:var(--e-3) 0}
  #sousAbsRep details ul{margin:0;padding-left:var(--e-5);font-size:var(--t-s)}
  #sousAbsRep>details{margin-top:var(--e-6);border-top:1px solid var(--filet)}
  /* le champ du classeur : un bouton aux couleurs du portail. Le nom du fichier est écrit dessous (« Classeur lu »),
     pas dans le champ, que l'écran vide après lecture pour qu'un classeur corrigé puisse être rechoisi */
  #repFichier{width:auto;max-width:100%;padding:0;border:0;border-radius:var(--r);background:none;font-size:0}
  #repFichier::file-selector-button{font:var(--g-fort) var(--t-m)/1.2 var(--f-ui);min-height:var(--h-ctrl);margin:0;padding:var(--e-2) var(--e-4);border-radius:var(--r);border:1px solid var(--filet2);border-color:color-mix(in srgb,var(--marque-f) 35%,transparent);background:var(--marque-d);color:var(--marque-e);cursor:pointer}
  #repFichier:hover::file-selector-button{border-color:var(--marque-f)}
  #repFichier:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anneau)}
  @media(max-width:700px){
    .repGeste input,.repGeste .btn{flex:1 1 100%}
  }
.objBar{height:8px;background:var(--filet);border-radius:var(--r);overflow:hidden;flex:1;min-width:120px}.objBar>i{display:block;height:100%;background:var(--ok);border-radius:var(--r)}   /* V-107c : lisible sur smartphone */

  /* anneau d'avancement (tbAnneau, informations.js) : suivi des dossiers d'Utilisateurs (.dossAnn) */
  .anneau{width:74px;height:74px;flex:none;position:relative}
  .anneau svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
  .anneau circle{fill:none;stroke-width:3.6}
  .anneau .fond{stroke:var(--filet)}
  .anneau .val{stroke:var(--te);stroke-linecap:round;transition:stroke-dasharray .5s ease-out}
  .anneau .ctr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:var(--g-fort) var(--t-l)/1 var(--f-titre);color:var(--encre);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;padding:0 var(--e-2)}
  .anneau .ctr small{font:var(--g-moyen) var(--t-xs)/1 var(--f-ui);color:var(--encre3);margin-left:1px}
  @media(prefers-reduced-motion:reduce){.anneau .val{transition:none}}

  /* ================= SMARTPHONES ================= */
  @media(max-width:700px){
    :root{--hd-h:57px}
    body{font-size:var(--t-m)}
    .wrap{padding:0 var(--e-4) 56px}
    .hd{padding:var(--e-2) var(--e-4);gap:var(--e-2)}
    #lateral{width:100%;padding-left:calc(var(--e-4) + env(safe-area-inset-left));padding-right:calc(var(--e-4) + env(safe-area-inset-right));box-shadow:none}   /* E5 (5a) : tiroir plein écran */
    /* Menu plein écran, retour de Dimitri du 02/10/2026 (« boutons et texte trop petits »).
       Deux mesures locales, calculées sur les jetons de la charte (aucune valeur brute) :
       --h-menu = --h-ctrl + --e-2 = 52 px (hauteur d'une entrée) ;
       --t-menu = milieu de --t-m et --t-l = 18 px (texte d'une entrée).
       Icônes à --e-5 (24 px) dans un puits de --h-ctrl (44 px) ; familles et compteurs à --t-s (14 px). */
    #lateral{--h-menu:calc(var(--h-ctrl) + var(--e-2));--t-menu:calc((var(--t-m) + var(--t-l)) / 2)}
    #lateral .tabs{gap:0}
    #lateral .tab,#lateral .mcItem{width:100%;min-height:var(--h-menu);font-size:var(--t-menu);border-bottom:1px solid var(--filet);border-radius:0}
    #lateral .navlab{font-size:var(--t-s);padding-top:var(--e-5)}
    #lateral .tab .n{font-size:var(--t-s);min-width:var(--e-5)}
    #lateral .icw{width:var(--h-ctrl);height:var(--h-ctrl);flex-basis:var(--h-ctrl)}
    #lateral .icw .ic{width:var(--e-5);height:var(--e-5)}
    /* compte en pied de menu : mêmes tailles, icône centrée sous les puits des modules */
    #lateral .mcItem{padding-left:var(--e-2);padding-right:var(--e-2)}
    #lateral .mcItem .ic{width:var(--e-5);height:var(--e-5);margin:0 calc((var(--h-ctrl) - var(--e-5)) / 2)}
    #lateral .mcItem:last-child{border-bottom:0}
    #lateral .mcSep{display:none}
    #lateral .mcTete{font-size:var(--t-m)}
    .hd p{display:none}
    .hd h1{font-size:var(--t-m)}
    .logoImg{height:40px}
    /* E4 : la barre ne porte plus que la cloche (icône seule, 44 px), à droite du titre ;
       le compte est en pied du tiroir */
    .who{margin-left:auto;gap:var(--e-2);font-size:var(--t-s)}
    .fil li{display:none}
    .fil li:nth-last-child(2){display:flex}
    .fil li:nth-last-child(2)::before{content:none}
    .filLien{padding-left:0;gap:var(--e-1);display:inline-flex;align-items:center}
    .fil li:nth-last-child(2) .filLien::before{content:"‹";content:"‹"/"";font-size:var(--t-l);line-height:1;text-decoration:none;display:inline-block}
    .who .btn{position:relative;font-size:0;gap:0;width:var(--h-ctrl);min-width:var(--h-ctrl);min-height:var(--h-ctrl);padding:0;justify-content:center}
    .who .btn .ic{width:18px;height:18px;margin:0}
    .who .btn .n{position:absolute;top:-6px;right:-6px;margin:0;font-size:var(--t-xs);line-height:1.4}
    .card{padding:var(--e-4) var(--e-3);margin:var(--e-3) 0;border-radius:var(--r-l)}
    .card h2{font-size:var(--t-m)}
    /* V-77 : les onglets principaux vivent dans le tiroir latéral — seuls les
       sous-onglets (dans une carte) restent affichés, avec retour à la ligne */
    .card .tab{flex:none;padding:var(--e-2) var(--e-3);font-size:var(--t-s)}
    .card .tabs{margin:var(--e-2) 0 var(--e-4);flex-wrap:wrap}
    /* sous-onglets d'un module : une seule ligne qui défile au doigt */
    .card>.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:1px}
    .card>.tabs .tab{white-space:nowrap}
    /* calendrier d'astreinte compact */
    .cal{gap:var(--e-1)}
    .day{min-height:46px;padding:var(--e-1) var(--e-1);border-radius:var(--r);font-size:var(--t-xs)}
    .day .num{font-size:var(--t-xs)}
    .day.ferie .num::after{content:" f."}
    .pers{font-size:var(--t-xs);padding:var(--e-1) var(--e-1);border-radius:var(--r);margin-top:2px}
    .day select{padding:var(--e-1) var(--e-1)}
    /* case de 46 px : pas de « week-end » ; la liste ouverte prend la largeur du calendrier, sous sa case */
    .day .weLib{display:none}
    .cal{position:relative}
    .day:has(select){position:static}
    .day select{position:absolute;left:0;right:0;width:auto;z-index:2}
    .calhead{gap:var(--e-2)}
    .calhead h3{min-width:0;flex:1;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* les sélecteurs et grands boutons de l'en-tête passent sur leur propre ligne */
    .calhead select,.calhead .btn:not(.btn-sm){flex:1 1 100%;max-width:none!important}
    /* tableaux plus denses */
    table{font-size:var(--t-s)}
    th,td{padding:var(--e-2) var(--e-2)}
    /* fiches équipe */
    .eqHead{padding:var(--e-3) var(--e-3)}
    .eqBtns{margin-left:0;width:100%;justify-content:flex-end}
    .eqEdit{grid-template-columns:1fr 1fr;padding:var(--e-3) var(--e-3)}
    /* fenêtres : feuille qui monte du bas (décision Q4 A de Dimitri, 26/09) */
    dialog{width:100%;max-width:100%;padding:var(--e-4) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto;
      margin:auto auto 0;border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0}
    dialog[open]{animation:dlgMonte .22s ease-out}
    dialog[open].dlgSecoue{animation:dlgMonte .22s ease-out,dlgTresse .18s ease-in-out}
    /* lot 3 : la fenêtre de saisie est une feuille du bas dont la tête et le pied ne défilent pas ; boutons côte à côte */
    dialog.fen,#dlgDemNouv,#dlgMonDossier{max-width:100%}
    dialog.fen{margin:auto auto 0;max-height:92dvh}
    dialog.fen>#toastZone{margin:var(--e-3) var(--e-4) 0}
    .fenT{padding-left:var(--e-4)}
    .fenC{padding:var(--e-4)}
    .fenP,dialog.fen>.dlgQuitter{padding:var(--e-3) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom))}
    .fenP>.btn{flex:1 1 auto}
    .fenP .fenG{margin-right:0}
    /* confort tactile ; 16px dans les champs = pas de zoom automatique iOS */
    .btn{min-height:var(--h-ctrl);padding:var(--e-3) var(--e-4)}
    .btn-sm{min-height:var(--h-ctrl-s);padding:var(--e-2) var(--e-3);font-size:var(--t-s)}
    input,select,textarea{font-size:var(--t-m);padding:var(--e-3) var(--e-3);min-height:44px}
    .actions .btn{flex:1}
    #vLogin{margin:var(--e-4) auto!important}
    #vLogin .loginMot{font-size:var(--t-l)}
    .legend{gap:var(--e-2)}
    .legend span{font-size:var(--t-xs);padding:var(--e-1) var(--e-2)}
  }

  /* ---------- assistant (chat IA) ---------- */
  .btnMic{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-rond);padding:0;display:grid;place-items:center;
    background:var(--ia-d);border:1.5px solid var(--ia);color:var(--ia-f);cursor:pointer}
  .btnMic .ic{width:19px;height:19px;margin:0;vertical-align:0}
  .btnMic:hover{background:var(--ia-b)}
  .btnMic.ecoute{background:var(--crit-d,#fde8e8);border-color:var(--crit,#c0392b);color:var(--crit,#c0392b);animation:micPulse 1.2s infinite}
  @keyframes micPulse{0%,100%{opacity:1}50%{opacity:.55}}
  /* V-121 : boutons de lecture vocale (identité IA) */
  .btnTts{border:1px solid var(--ia);background:var(--surf);color:var(--ia-f);border-radius:var(--r-rond);width:28px;height:28px;padding:0;
    display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle;margin:0 0 0 var(--e-2);flex:none}
  .btnTts .ic{width:14px;height:14px;margin:0;vertical-align:0}
  .btnTts.lit{background:var(--ia);color:var(--sur-fort);border-color:var(--ia);animation:micPulse 1.2s infinite}
  .btnTtsAuto{font:var(--g-moyen) var(--t-s)/1.4 var(--f-ui);border:1px solid var(--ia);background:var(--surf);color:var(--ia-f);border-radius:var(--r-rond);padding:var(--e-1) var(--e-3);min-height:28px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--e-1)}
  .btnTtsAuto .ic{width:14px;height:14px;margin:0;vertical-align:0}
  .btnTtsAuto.on{background:var(--ia);color:var(--sur-fort);border-color:var(--ia)}
  /* la bulle de l'assistant : une pastille « ✨ Assistant IA », double filet violet
     (identité IA) ; sur téléphone, le tampon rond ✨ seul */
  #bulleChat{position:fixed;right:18px;bottom:18px;z-index:60;height:52px;padding:0 var(--e-5) 0 var(--e-4);
    border-radius:var(--r-rond);border:none;background:linear-gradient(135deg,var(--ia),var(--ia-f));
    outline:1.5px solid var(--ia-b);outline-offset:3px;
    color:var(--sur-fort);font:var(--g-fort) var(--t-m)/1 var(--f-ui);display:inline-flex;align-items:center;gap:var(--e-2);cursor:pointer;transition:transform .12s}
  #bulleChat .bulleIc{font-size:var(--t-l);line-height:1}
  #bulleChat:hover{transform:translateY(-1px)}
  #bulleChat:focus-visible{outline:2px solid var(--ia);outline-offset:3px}
  @media(max-width:640px){
    #bulleChat{width:58px;height:58px;padding:0;border-radius:var(--r-rond);justify-content:center}
    #bulleChat .bulleTxt{display:none}
  }
  /* Retour de recette (29/09/2026) : la bulle ne recouvre JAMAIS un bouton d'action. Logée dans une
     fenêtre ouverte (placerAssistant, assistant.js), elle quitte le coin bas droit — le pied
     « Annuler / Enregistrer » d'une feuille de téléphone ou d'une fenêtre haute — et se range en
     haut à droite, à gauche de la croix (.dlgX) : tampon rond de 44 px, qui défile avec l'en-tête.
     Le titre lui laisse la place ; le pied reste libre, sans marge de rattrapage. */
  dialog>#bulleChat{position:absolute;top:12px;right:calc(12px + var(--h-ctrl) + var(--e-3));bottom:auto;
    width:var(--h-ctrl);height:var(--h-ctrl);padding:0;justify-content:center}
  dialog>#bulleChat .bulleTxt{display:none}
  dialog:not(.fen):has(>#bulleChat) h3{padding-right:calc(var(--h-ctrl)*2 + var(--e-5))}
  dialog:not(.fen):has(>#bulleChat)>h3:first-of-type{min-height:var(--h-ctrl)}   
  /* V-144b : messages éphémères */
  #toastZone{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:var(--e-2);align-items:center;width:min(560px,calc(100vw - 100px));pointer-events:none}
  .toast{pointer-events:auto;cursor:pointer;background:var(--encre);color:var(--surf);padding:var(--e-3) var(--e-4);border-radius:var(--r-l);box-shadow:var(--ombre-2);font-size:var(--t-s);line-height:1.45;white-space:pre-line;max-width:100%;animation:toastEntre .18s ease-out}
  /* lot A5 (audit design) : l'erreur reste jusqu'à sa fermeture, par un vrai bouton de 44 px */
  .toast.crit{background:var(--crit);color:var(--surf);cursor:default;display:flex;align-items:center;gap:var(--e-2);padding:var(--e-1) var(--e-1) var(--e-1) var(--e-4)}
  .toastX{flex:none;width:var(--h-ctrl);height:var(--h-ctrl);border:0;border-radius:var(--r);background:none;color:inherit;font:inherit;cursor:pointer}
  /* « Signaler ce problème » sous une erreur logée dans une fenêtre ; « Un souci sur cet écran ? » en bas de chaque page (23/10/2026) */
  .toastSig{display:block;padding:0;color:inherit;font-weight:var(--g-fort);text-decoration:underline}
  .toastSig:hover{color:inherit}
  .toastSig:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  .sigPied{margin:var(--e-6) 0 0;padding-top:var(--e-2);border-top:1px solid var(--filet-doux);font-size:var(--t-s);color:var(--encre3)}
  .sigPied .btn-lien,.chatPied .btn-lien{text-decoration:underline;font-weight:var(--g-moyen);font-family:inherit}   /* lien souligné (WCAG 1.4.1) */
  /* pied de l'assistant : un bouton du portail, jamais le violet de l'IA (23/10/2026) */
  .chatPied{margin:0;padding-inline:var(--e-3);padding-bottom:env(safe-area-inset-bottom);background:var(--surf);font-size:var(--t-s);color:var(--encre3);text-align:center}
  .chatPied .btn-lien:focus-visible{outline-offset:-2px}
  .chatSaisie:has(+.chatPied){padding-bottom:var(--e-1)}
  .dlgErrSig{margin:0;color:var(--crit)}   /* le même lien, sous la zone d'erreur d'une fenêtre (.dlgErr, informations.js) : à la couleur du message */
  .toast.sort{animation:toastSort .2s ease-in forwards}
  @keyframes toastEntre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes toastSort{to{opacity:0;transform:translateY(10px)}}
  @media(prefers-reduced-motion:reduce){.toast,.toast.sort{animation:none}}
  @media(max-width:700px){#toastZone{bottom:84px;width:calc(100vw - 24px)}}
  /* lot 2 (vérif. du 22/10/2026) : dans une fenêtre, la zone entre dans son flux, sous le titre (toastZone, informations.js) :
     jamais sur un champ ou un bouton ; en tête, elle passe sous la croix et le tampon de l'assistant. Collée en haut quand la
     fenêtre défile (audit du 22/10) : au bas d'une longue fenêtre, un refus du serveur reste à l'écran */
  dialog>#toastZone{position:sticky;top:var(--e-2);z-index:2;transform:none;width:auto;align-items:stretch;margin:0 0 var(--e-3)}
  dialog>#toastZone:first-child{margin-top:calc(var(--h-ctrl) + var(--e-1))}
  /* audit du 23/10/2026 : vide, elle reste à sa hauteur tant qu'elle la tient (zoneTenir, informations.js) — la fenêtre ne raccourcit pas
     sous le pointeur quand le bandeau de la retenue ou un message part ; rendue à la fermeture */
  dialog>#toastZone:empty:not([data-tenue]){display:none}
  dialog>#toastZone[data-tenue]{min-height:var(--zone-tenue)}
  /* V-139 (Dimitri, 06/09) : l'assistant est une FENÊTRE DE BULLE posée au-dessus
     de la bulle, pas une colonne pleine hauteur ; plein écran seulement sur téléphone */
  #vChat{position:fixed;right:18px;bottom:calc(var(--h-barre,calc(var(--h-ctrl) + var(--e-1) + var(--e-4) + var(--e-5))) + var(--e-1));z-index:70;width:min(400px,calc(100vw - 36px));
    height:min(640px,calc(100vh - 110px));background:color-mix(in srgb,var(--ia-d) 45%,var(--surf));display:flex;flex-direction:column;
    border:1.5px solid var(--ia-b);border-radius:var(--r-l);overflow:hidden;
    box-shadow:0 1px 2px rgba(27,42,48,.08),0 24px 56px -20px rgba(85,50,150,.45);
    transform-origin:100% 100%;animation:vChatOuvre .16s ease-out}
  @keyframes vChatOuvre{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  #vChat.fermeture{animation:vChatFerme .16s ease-in forwards;pointer-events:none}
  @keyframes vChatFerme{to{opacity:0;transform:translateY(10px) scale(.97)}}
  @media(prefers-reduced-motion:reduce){#vChat,#vChat.fermeture{animation:none}}
  #vChat.hidden{display:none}
  @media(max-width:700px){
    #vChat{right:0;bottom:0;width:100vw;height:100vh;height:100dvh;border:0;border-radius:0;animation:vChatMonte .22s ease-out}
    #vChat.fermeture{animation:vChatDescend .2s ease-in forwards}
    @keyframes vChatMonte{from{transform:translateY(100%)}to{transform:none}}
    @keyframes vChatDescend{to{transform:translateY(100%)}}
  }
  @media(max-height:480px){.chatSaisie textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
  @media(min-width:701px) and (max-height:520px){#vChat{bottom:18px;height:calc(100dvh - 36px)}}
  .chatTete{display:flex;gap:var(--e-2);align-items:center;padding:var(--e-3) var(--e-4);background:linear-gradient(160deg,var(--ia-d),var(--surf) 80%);border-bottom:1.5px solid var(--ia-b)}
  .chatTete .sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chatTete .iaTitre{flex:none;white-space:nowrap}
  .iaTitre{color:var(--ia-f);font-family:var(--f-ui);font-weight:var(--g-fort);font-size:var(--t-m);line-height:1.2}
  .btn-ia{background:var(--ia);border:1px solid var(--ia);color:var(--sur-fort)}
  .btn-ia:hover{background:var(--ia-f);border-color:var(--ia-f)}
  /* charte commune, lot C2 : en zone IA, l'anneau de focus passe au violet */
  .btn-ia:focus-visible,.iaZone .btn:focus-visible{--anneau:0 0 0 2px var(--surf), 0 0 0 4px var(--ia)}
  #chatMsgs{flex:1;overflow-y:auto;padding:var(--e-4);display:flex;flex-direction:column;gap:var(--e-2)}
  .cmsg{max-width:82%;padding:var(--e-2) var(--e-3);border-radius:var(--r-l);white-space:pre-wrap}
  .cmsg.moi{align-self:flex-end;background:var(--ia);color:var(--sur-fort);border-bottom-right-radius:var(--r)}
  .cmsg.lui{align-self:flex-start;background:var(--surf);border:1px solid var(--filet);border-bottom-left-radius:var(--r)}
  .cform{align-self:stretch;background:var(--surf);border:1px solid var(--filet2);border-radius:var(--r-l);padding:var(--e-3)}
  .cform .fq{margin:var(--e-3) 0 0}
  .cform .fql{font-weight:var(--g-fort);font-size:var(--t-s);margin-bottom:var(--e-1)}
  .cform .fopts{display:flex;gap:var(--e-2);flex-wrap:wrap}
  .cform .fopt{display:flex;gap:var(--e-1);align-items:center;border:1px solid var(--filet2);border-radius:var(--r);
    padding:var(--e-2) var(--e-3);min-height:var(--h-ctrl);font-size:var(--t-s);cursor:pointer;background:var(--surf)}
  .cform .fopt:has(input:checked){border-color:var(--marque-f);background:var(--marque-d);color:var(--marque-e);font-weight:var(--g-fort)}
  .cform .fopt input{accent-color:var(--marque-f);margin:0;width:auto;min-height:0}
  /* proposition de l'assistant : sous tampon violet, la confirmation reste à l'humain */
  .cprop{align-self:flex-start;background:var(--ia-d);border:1px dashed var(--ia-b);
    border-radius:var(--r-l);padding:var(--e-3) var(--e-3);display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;max-width:82%}
  .cprop.faite{border-style:solid;opacity:.75}
  /* sous chaque bouton ou choix de l'assistant : ce que l'action fait vraiment (écrit par la page, jamais par le modèle) */
  .sub.propFait{display:block;margin:0;font-weight:var(--g-normal)}
  .cprop .sub.propFait,.oaProps .sub.propFait{margin-top:calc(-1*var(--e-1))}
  /* dans le formulaire du chat, la pastille du choix se cale sur son libellé (première ligne), pas sur la ligne posée dessous */
  .cform .fopt:has(.propFait){align-items:baseline}
  #chatAttente{padding:var(--e-2) var(--e-4);color:var(--encre3);font-style:italic}
  .chatSaisie{display:flex;gap:var(--e-2);align-items:flex-end;padding:var(--e-3) var(--e-3) calc(var(--e-3) + env(safe-area-inset-bottom));
    background:var(--surf);border-top:1px solid var(--filet)}
  .chatSaisie textarea{flex:1;resize:none;border:1px solid var(--ia-b);border-radius:var(--r);padding:var(--e-3) var(--e-3);font:inherit;line-height:1.35;min-height:44px;max-height:140px;field-sizing:content}
  .chatSaisie textarea:focus{border-color:var(--ia);box-shadow:0 0 0 3px var(--ia-d)}
  /* ---------- organigramme — format de la démo, à l'identique ---------- */
  .arbreZone{overflow-x:auto;padding:var(--e-2) var(--e-1) var(--e-4)}
  .arbre,.arbre ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;width:max-content;min-width:100%}
  .arbre ul{position:relative;padding-top:var(--e-5)}
  .arbre ul::before{content:"";position:absolute;top:0;left:50%;height:24px;border-left:2px dotted var(--marque)}
  .arbre li{display:flex;flex-direction:column;align-items:center;position:relative;padding:var(--e-5) var(--e-1) 0}
  .arbre li::before{content:"";position:absolute;top:0;right:50%;width:50%;height:24px;
    border-top:2px dotted var(--marque)}
  .arbre li::after{content:"";position:absolute;top:0;left:50%;width:50%;height:24px;border-top:2px dotted var(--marque)}
  .arbre li:first-child::before{border-top:0}
  .arbre li:last-child::after{display:none}
  .arbre>li{padding-top:0}
  .arbre>li::before,.arbre>li::after{display:none}
  .noeud{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
  .noeud .avOrg{width:36px;height:36px;border-radius:var(--r-rond);display:grid;place-items:center;
    font-weight:var(--g-fort);font-size:var(--t-s);position:relative;z-index:1}
  .avOrg{width:36px;height:36px;border-radius:var(--r-rond);display:grid;place-items:center;font-weight:var(--g-fort);font-size:var(--t-s)}
  .noeud .pil{background:var(--surf);border:1px solid var(--filet2);border-radius:var(--r-l);
    padding:var(--e-3) var(--e-2) var(--e-2);margin-top:-14px;min-width:92px;max-width:138px}
  .noeud .pil b{display:block;font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre);line-height:1.25}
  .noeud .pil .role{display:block;font-size:var(--t-xs);color:var(--encre3);margin-top:1px;line-height:1.3}
  .noeud.chef .pil{background:var(--marque-f);border-color:var(--marque-f)}
  .noeud.chef .pil b{color:var(--sur-fort)}
  .noeud.chef .pil .role{color:var(--sur-fort);opacity:.85}
  .noeud.ajout{cursor:pointer}
  .noeud.ajout .avOrg{background:var(--surf);color:var(--marque-f);border:2px dashed var(--marque);box-shadow:none;font-size:var(--t-l)}
  .noeud.ajout .pil{background:transparent;border:1.5px dashed var(--filet2);box-shadow:none}
  .noeud.ajout .pil b{color:var(--encre3);font-weight:var(--g-fort)}
  .noeud.ajout:hover .avOrg{background:var(--marque-d)}
  .noeud.ajout:hover .pil{border-color:var(--marque);background:var(--marque-d)}
  .pliBtn{font:var(--g-fort) var(--t-xs)/1.4 var(--f-ui);letter-spacing:.02em;color:var(--encre2);
    border:1px solid var(--filet2);background:var(--surf);border-radius:var(--r-rond);padding:var(--e-1) var(--e-2);margin-top:var(--e-1);cursor:pointer}
  .pliBtn:hover{background:var(--marque-d)}
  .dlgX{position:absolute;top:12px;right:12px;width:var(--h-ctrl);height:var(--h-ctrl);border-radius:var(--r);
    background:var(--surf2);border:1px solid var(--filet2);cursor:pointer;color:var(--encre2);
    display:grid;place-items:center;font-size:var(--t-s);line-height:1;padding:0}
  .dlgX:hover{color:var(--encre)}
  .noeud .pil .chips{display:flex;flex-wrap:wrap;gap:var(--e-1);justify-content:center;margin-top:var(--e-1)}
  .noeud .pil .chips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media (max-width:640px){
    .arbre li{padding:var(--e-5) var(--e-1) 0}
    .noeud .pil{min-width:84px;max-width:120px;padding:var(--e-2) var(--e-2) var(--e-2)}
  }
  /* zones assistant IA (V-82b, unifiées VIOLETTES en V-120 — règle Dimitri :
     toute zone IA se démarque du reste). 09/2026 : le « tampon » — double
     filet violet (bord + contour décalé), étiquette à cheval sur le bord. */
  .iaZone{position:relative;margin:var(--e-4) var(--e-1) var(--e-3);padding:var(--e-4) var(--e-4) var(--e-3);border-radius:var(--r-l);
    border:1.5px solid var(--ia-b);outline:1px solid var(--ia-b);outline-offset:3px;
    background:linear-gradient(160deg,var(--ia-d) 0%,var(--surf) 72%)}
  .iaZone::before{content:"✨ Assistant";position:absolute;top:-12px;left:14px;
    font:var(--g-fort) var(--t-xs)/1.4 var(--f-ui);letter-spacing:.02em;color:var(--sur-fort);
    background:var(--ia-f);padding:var(--e-1) var(--e-3);border-radius:var(--r-rond)}
  .iaZone>label{color:var(--ia-f);font-weight:var(--g-fort)}
  .iaZone .btn{background:var(--ia-f);border-color:var(--ia-f);color:var(--sur-fort);font-weight:var(--g-fort);white-space:nowrap;flex:none}
  .iaZone .btn:disabled{opacity:.55}
  .iaZone input:focus,.iaZone textarea:focus,.iaZone select:focus{border-color:var(--ia);box-shadow:0 0 0 3px var(--ia-d)}
  /* V-180 : pastille d'analyse documentaire — même identité violette que les
     autres zones IA (règle Dimitri). Elle se pose SOUS la ligne du fichier :
     une proposition se lit, elle ne remplace jamais ce qui est rangé. */
  .daL{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-2);align-items:center;margin:0 0 var(--e-2);padding:0 0 0 var(--e-1);font-size:var(--t-s)}
  .daP{display:inline-flex;align-items:center;gap:var(--e-1);max-width:100%;
    background:var(--ia-d);color:var(--ia-f);border:1px solid var(--ia-b);
    border-radius:var(--r-rond);padding:var(--e-1) var(--e-3);font-weight:var(--g-fort);line-height:1.55}
  .daP.daMuet{background:var(--surf2);color:var(--encre2);border-color:var(--filet2);font-weight:var(--g-moyen)}
  .daNote{color:var(--encre2);font-size:var(--t-s)}
  .daL .btn,.daL select{min-height:var(--h-ctrl-s)}
  .daL select{max-width:230px;font-size:var(--t-s)}
  /* V-183 : un champ que la lecture vient de pré-remplir se signale jusqu'à la
     première correction — la personne voit d'un coup d'œil ce qu'elle n'a pas
     saisi elle-même. Les deux thèmes suivent, les jetons étant redéfinis. */
  .daPre{border-color:var(--ia-b)!important;box-shadow:0 0 0 3px var(--ia-d)}
  /* la carte de l'assistant objectifs est un tampon posé dans le module */
  #oaCarte{box-shadow:none}
  /* ---------- thème sombre : ce que les jetons ne couvrent pas ---------- */
  @media (prefers-color-scheme:dark){
    dialog::backdrop{background:rgb(0 0 0 / .65)}
    .logoImg{background:#fff;border-radius:var(--r);padding:var(--e-1)}
    #oaMsgs>div[style*="#fff"]{background:var(--surf)!important;border-color:var(--filet)!important}
    .tgbtns span{background:#0f1b22}
    .una .surTitre{color:var(--marque-f)}
    #vChat{box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 56px -20px rgba(0,0,0,.8)}
  }
  @media (prefers-reduced-motion:reduce){
    .btn,.vst,#bulleChat,#lateral{transition:none}
    .btnMic.ecoute,.btnTts.lit{animation:none}
    dialog[open],dialog.dlgSecoue,dialog[open].dlgSecoue{animation:none}
  }
  /* === C9 crm.js et informations.js === */
  .crmDr{text-align:right}
  .crmHaut{margin-top:var(--e-2)}
  .crmDecal{margin-left:var(--e-2)}
  .sub.subIn{margin:0}
  .sub.subH{margin:var(--e-1) 0 0}
  .sub.subB{margin:0 0 var(--e-2)}
  .sub.crmAtt{color:var(--att)}
  .pers.persTeinte{background:var(--pf);color:var(--pe)}
  /* carte d'établissement (gabarit repris par les cartes d'informations) */
  .crmRang{display:flex;align-items:flex-start;gap:var(--e-3);flex-wrap:wrap}
  .crmCorps{flex:1;min-width:180px}
  .crmCarteTitre{font-size:var(--t-m)}
  .crmBtns{display:flex;gap:var(--e-2);flex-wrap:wrap}
  .crmTachesT{min-width:720px}
  tr.crmFait{color:var(--encre3)}
  tr.crmFait strong{text-decoration:line-through}
  .crmColLib{display:flex;gap:var(--e-2);align-items:center;cursor:pointer}
  .crmColLib input{width:auto;flex:0 0 auto}
  .card.crmCarteC{padding:var(--e-3);margin-bottom:var(--e-2)}
  .crmLigneH{display:flex;gap:var(--e-2);align-items:flex-start}
  .crmTxt{flex:1}
  /* informations : convention collective, notes, annuaire, documents, affichage */
  .note.infCcnEtat{margin:0 0 var(--e-3)}
  #ccnQ{flex:1;min-width:240px}
  .sub.infCcnIa{margin:var(--e-1) 0 var(--e-3)}
  .infCcnSom{margin-top:var(--e-4)}
  .infCcnSom>summary{cursor:pointer}
  .infCcnTextes{margin-top:var(--e-2);font-size:var(--t-s)}
  .infCcnTexte{padding:var(--e-1) 0;border-bottom:1px solid var(--filet)}
  #ccnRes .crmLigneH{flex-wrap:wrap}
  .sub.infExtrait{margin:var(--e-2) 0 0;white-space:pre-wrap}
  #zoneImpression .ctP.ctCentre{text-align:center}
  .crmcard.infEpingle{border-color:var(--marque);background:var(--marque-d)}
  .crmCorps.infCorps{min-width:200px}
  .infTexte{margin-top:var(--e-2);font-size:var(--t-s);white-space:pre-wrap}
  .infLien{margin-top:var(--e-2);font-size:var(--t-s)}
  .infImages{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-2)}
  .infImg{max-width:230px;max-height:170px;border-radius:var(--r);border:1px solid var(--filet);cursor:zoom-in;display:none}
  .infRetirer{cursor:pointer}
  .crmcard.infAnn{padding:var(--e-3)}
  .crmRang.infAnnL{align-items:center}
  .sub.infAnnProf{flex:1;min-width:140px}
  .avOrg.infEquipe{background:var(--marque-d);color:var(--marque-e)}
  .sub.infHors{margin:var(--e-2) 0 var(--e-1)}

  /* === C9 utilitaires === */
  /* Lot C9 de la charte commune (docs/decisions/2026-09-26-charte-commune.md, § 5) : les utilitaires
     u-* remplacent un style="…" en ligne (index.html, droits.js, flotte.js). Ils portent !important
     pour garder la priorité de l'attribut sur les règles plus précises (.card h2, .card>.tabs…),
     sauf display et color, que .hidden ou le JS (el.style.color des messages) doivent pouvoir
     changer. Un seul bloc, une seule définition par classe. Écarts ramenés à la table § 3 :
     1-5 px → --e-1, 6-9 → --e-2, 10-13 → --e-3, 14-19 → --e-4, 20-27 → --e-5, 28-39 → --e-6.
     Ordre voulu : .u-m0 AVANT les marges ciblées, qui l'emportent (« margin:8px 0 0 » = u-m0 u-mt-2). */
  .u-m0{margin:0!important}
  .u-mt-1{margin-top:var(--e-1)!important} .u-mt-2{margin-top:var(--e-2)!important}
  .u-mt-3{margin-top:var(--e-3)!important} .u-mt-4{margin-top:var(--e-4)!important}
  .u-mt-5{margin-top:var(--e-5)!important} .u-mt-6{margin-top:var(--e-6)!important}
  .u-mb-1{margin-bottom:var(--e-1)!important} .u-mb-2{margin-bottom:var(--e-2)!important}
  .u-mb-3{margin-bottom:var(--e-3)!important} .u-mb-4{margin-bottom:var(--e-4)!important}
  .u-ml-3{margin-left:var(--e-3)!important} .u-ml-auto{margin-left:auto!important}
  .u-mx-auto{margin-left:auto!important;margin-right:auto!important}
  .u-pl-3{padding-left:var(--e-3)!important}
  /* mise en page */
  .u-flex{display:flex} .u-iflex{display:inline-flex} .u-grid{display:grid}
  .u-flex-wrap{flex-wrap:wrap!important}
  .u-gap-1{gap:var(--e-1)!important} .u-gap-2{gap:var(--e-2)!important} .u-gap-3{gap:var(--e-3)!important}
  .u-centre-v{align-items:center!important} .u-bas{align-items:flex-end!important}
  .u-haut{align-items:flex-start!important}
  .u-centre-h{justify-content:center!important} .u-entre{justify-content:space-between!important}
  .u-flex-1{flex:1!important} .u-flex-2{flex:2!important} .u-flex-none{flex:none!important}
  .u-base-pleine{flex-basis:100%!important}
  .u-col-pleine{grid-column:1/-1!important}
  /* A2 : texte réservé aux lecteurs d'écran ; lien d'évitement visible au focus seulement */
  /* lot 1 : le h2 d'origine de 9 écrans doublait le titre de l'en-tête ; caché à l'œil, gardé pour la hiérarchie des titres */
  .u-sr,.evite:not(:focus),:is(#tMonMateriel,#tEcheances,#tMateriel,#tAnnuaire,#tCrm,#tVehicule,#tEntretiens,#tContrats)>h2:first-child,#tCa>div:first-child>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;min-height:0;padding:0;border:0;margin:-1px}
  .evite{position:fixed;top:var(--e-2);left:var(--e-2);z-index:99}
  body:has(#vApp.hidden) .evite{display:none}
  .u-defil{overflow:auto!important} .u-defil-x{overflow-x:auto!important} .u-defil-y{overflow-y:auto!important}
  /* largeurs et hauteurs ; champs de filtre : hors échelle d'espacement, valeurs d'origine gardées */
  .u-l-pleine{width:100%!important} .u-l-auto{width:auto!important}
  .u-l-170{width:170px!important} .u-l-260{width:260px!important}
  .u-lmin-120{min-width:120px!important} .u-lmin-150{min-width:150px!important}
  .u-lmin-180{min-width:180px!important} .u-lmin-190{min-width:190px!important}
  .u-lmin-220{min-width:220px!important} .u-lmin-230{min-width:230px!important}
  .u-lmax-100{max-width:100px!important} .u-lmax-120{max-width:120px!important}
  .u-lmax-140{max-width:140px!important} .u-lmax-160{max-width:160px!important}
  .u-lmax-170{max-width:170px!important} .u-lmax-180{max-width:180px!important}
  .u-lmax-190{max-width:190px!important} .u-lmax-200{max-width:200px!important}
  .u-lmax-210{max-width:210px!important}
  .u-lmax-220{max-width:220px!important} .u-lmax-230{max-width:230px!important}
  .u-lmax-360{max-width:360px!important}
  .u-hmin-44{min-height:var(--h-ctrl)!important}
  .u-hmin-54{min-height:54px!important} .u-hmin-56{min-height:56px!important}
  .u-hmin-64{min-height:64px!important} .u-hmin-70{min-height:70px!important}
  .u-hmax-46{max-height:46vh!important} .u-hmax-56{max-height:56vh!important} .u-hmax-60{max-height:60vh!important}
  /* texte */
  .u-txt-c{text-align:center!important} .u-txt-d{text-align:right!important} .u-txt-g{text-align:left!important}
  .u-nowrap{white-space:nowrap!important} .u-pre{white-space:pre-wrap!important}
  .u-casse-n{text-transform:none!important;letter-spacing:0!important}
  .u-casse-maj{text-transform:uppercase!important}
  .u-g-n{font-weight:var(--g-normal)!important} .u-g-f{font-weight:var(--g-fort)!important}
  .u-t-s{font-size:var(--t-s)!important} .u-t-m{font-size:var(--t-m)!important} .u-t-l{font-size:var(--t-l)!important}
  .u-pointeur{cursor:pointer}
  .u-muted{color:var(--encre3)} .u-ok{color:var(--ok)} .u-att{color:var(--att)}
  .u-crit{color:var(--crit)} .u-marque{color:var(--marque-e)}
  /* === C9 index.html === */
  /* Lot C9 de la charte commune (docs/decisions/2026-09-26-charte-commune.md, § 5) : les
     attributs style="…" de index.html deviennent des classes (utilitaires u-* : bloc
     « C9 utilitaires » ci-dessus). */
  /* pied de dialogue : boutons à droite, retour à la ligne sur téléphone */
  .dlgPied{display:flex;gap:var(--e-2);justify-content:flex-end;align-items:center;flex-wrap:wrap}
  /* message d'erreur sous un formulaire (p.sub) ; le JS peut repeindre sa couleur */
  .dlgErr{color:var(--crit);margin:var(--e-2) 0 0}
  /* écran de connexion (sur téléphone, #vLogin{margin:… !important} plus haut garde la main) */
  #vLogin{max-width:430px;margin:var(--e-7) auto}
  #vLogin .loginLogo{height:86px;width:auto}
  #inCode{letter-spacing:6px;font-size:var(--t-l);text-align:center}
  #vLogin .loginPied{text-align:center;margin:var(--e-4) 0 0;font-size:var(--t-xs);line-height:1.7}
  #vLogin .loginPropulse{text-align:center;margin:var(--e-1) 0 0;font-size:var(--t-xs)}
  /* CRM : légende du calendrier alignée sur les pastilles .vst (jetons, deux thèmes) */
  .crm-legende b.prevu{background:var(--info-d);border-left:3px solid var(--info)}
  .crm-legende b.retard{background:var(--att-d);border-left:3px solid var(--att)}
  .crm-legende b.fait{background:var(--ok-d);border-left:3px solid var(--ok)}
  .crm-legende b.annule{background:var(--surf2);border-left:3px solid var(--filet2)}
  .crm-legende b.tache{background:var(--marque-d);border-left:3px solid var(--marque-e)}
  #oaCarte{padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4)}
  #oaMsgs{max-height:340px;overflow-y:auto;display:grid;gap:var(--e-2);margin-bottom:var(--e-2)}
  /* éditeurs de contrats et de modèles */
  #coDlgCorps{min-height:340px;font:var(--t-s)/1.55 var(--f-ui)}
  .saisieCode{font:var(--t-xs)/1.5 var(--f-code)}
  #cmCorps{min-height:300px}
  #caCfg{min-height:220px;width:100%}
  #ccnArtTexte{white-space:pre-wrap;font-size:var(--t-s);line-height:1.5;max-height:60vh;overflow:auto;
    border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-3)}
  #dlgAbs .grid3{grid-template-columns:1fr 1fr 1.2fr}
  .fw2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
  /* le JS réécrit className (flotte.js) : la marge passe par l'identifiant */
  #docsManque{margin:0 0 var(--e-3)}
  /* === C9 droits.js et flotte.js === */
  /* Lot C9 de la charte commune (docs/decisions/2026-09-26-charte-commune.md, § 5) : les style="…"
     des gabarits de droits.js et flotte.js deviennent des classes à jetons (utilitaires u-* : bloc
     « C9 utilitaires » plus haut). Restent en ligne les seules valeurs calculées (largeur de
     .objBar, position des repères, teinte d'un nom). */
  /* champs de largeur bornée (valeurs d'origine, hors échelle d'espacement) */
  .chDate{max-width:150px} .chType{max-width:240px}
  .chSouple{flex:1;min-width:160px} .chLarge{flex:2;min-width:160px}
  /* cartes et lignes de liste : plans d'action, objectifs, doublons, mon matériel */
  .card.carteListe{padding:var(--e-4);margin-bottom:var(--e-3)}
  .carteListe.attenue{color:var(--encre3)}
  .carteListe.abandonne .colTexte>b{text-decoration:line-through}
  .colTexte{flex:1;min-width:200px}
  .ligneListe{display:flex;gap:var(--e-2);align-items:center;padding:var(--e-2) 0;border-top:1px solid var(--filet)}
  .objAvance{display:flex;gap:var(--e-3);align-items:center;margin:var(--e-3) 0 var(--e-2)}
  .paLigne{display:grid;gap:var(--e-2);grid-template-columns:1fr;border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-2)}
  .drGrille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e-2)}
  /* fenêtre « Droits d'accès » : la règle générale des champs (largeur 100 %) étirait chaque case */
  .drGrille input[type=checkbox],#drSuper{width:20px;height:20px;min-height:0;margin:0;padding:0;flex:none}
  /* pastilles : rattachement (teinte de marque) ; pastille qui porte un bouton de retrait .btn.pjX */
  .chip.marque{background:var(--marque-d);color:var(--marque-e)}
  .chip.chipRet{display:inline-flex;align-items:center;gap:var(--e-1)}
  .chip.fdPiece{margin:0 var(--e-2) var(--e-1) 0}
  /* assistant de fiche et assistant objectifs (zones IA) : bulles = celles du chat (.cmsg) */
  .fdClasse{margin-top:var(--e-3);padding-top:var(--e-2);border-top:1px solid var(--ia-b)}
  .fdPages{min-width:110px}
  #oaMsgs .cmsg.moi{justify-self:end}
  #oaMsgs .cmsg.lui,#oaMsgs .oaFait{justify-self:start}
  .oaProps{display:grid;gap:var(--e-2);justify-self:start;max-width:88%}
  /* flotte.js : véhicules, états mensuels, dossiers, lecture des documents, astreintes */
  .chNb{max-width:76px} .chMoy{max-width:260px}
  .ligneListe.filetBas{border-top:0;border-bottom:1px solid var(--filet)}
  .daRattr{margin:var(--e-3) 0 0;padding-top:var(--e-3);border-top:1px solid var(--filet)}
  /* === C9 conges, organigramme, contrats-ca === */
  /* Lot C9 de la charte commune (docs/decisions/2026-09-26-charte-commune.md, § 5) : les style="…"
     des gabarits de conges.js, organigramme.js et contrats-ca.js deviennent des classes à jetons
     (utilitaires u-* : bloc « C9 utilitaires » plus haut). Restent en ligne les seules valeurs
     calculées (teintes des absences, d'un nom, d'un avatar). */
  /* planning des absences : jour courant, légende alignée sur les cellules .we et .ferie */
  .absGrille td.auj{outline:2px solid var(--marque-f);outline-offset:-2px}
  .absLegende span i.we{background:var(--surf2);border:1px solid var(--filet2)}
  .absLegende span i.ferie{background:var(--att-d)}
  .absLegende span i.defaut{background:var(--abs-defaut)}
  .absLegende span i.attente{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--abs-defaut) 33%,transparent),color-mix(in srgb,var(--abs-defaut) 33%,transparent) 4px,transparent 4px,transparent 8px);border:1px dashed var(--abs-defaut)}
  /* organigramme : pastille d'anomalie, titre de la fiche d'un nœud (place du bouton de fermeture) */
  .avOrg.alerte{background:var(--att-d);color:var(--att)}
  dialog.hubFiche{width:min(1500px,96vw);max-width:none;max-height:94vh;overflow:auto}
  /* tableau de bord du CA : cadre sans double défilement, la hauteur est ajustée en JS au contenu */
  #caDashCadre iframe{width:100%;height:480px;border:1px solid var(--filet);border-radius:var(--r-l);background:transparent;overflow:hidden;display:block}
  /* === C9 validations et autres zones === */
  /* Lot C9 de la charte commune (docs/decisions/2026-09-26-charte-commune.md, § 5) : les style="…"
     des gabarits de validations.js, rendu.js, paie.js, rapports.js, astreintes.js, entretiens.js,
     demarrage.js, assistant.js et demande.js deviennent des classes à jetons (utilitaires u-* :
     bloc « C9 utilitaires » plus haut). Restent en ligne les seules valeurs calculées : teinte d'un
     nom en variables --pf/--pe (coul()), et teinte de module des .icw de rendu.js, que les
     sélecteurs [style*="--mod-…"] du menu latéral et de l'en-tête de page lisent. */
  /* demandes, interventions, échanges d'astreinte, demandes de congé, autorisations, questions d'une trame :
     carte à filet et ligne d'en-tête */
  .carteBord{border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-3);margin-bottom:var(--e-2)}
  .ligneTete{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
  /* bandeau « nouvelle version » (demarrage.js) : pastille flottante, encre --sur-fort sur --marque-f dans les deux thèmes */
  .bandeauVersion{position:fixed;bottom:var(--e-4);left:50%;transform:translateX(-50%);z-index:99;background:var(--marque-f);color:var(--sur-fort);border-radius:var(--r-rond);padding:var(--e-3) var(--e-4);box-shadow:var(--ombre-2);cursor:pointer;font-weight:var(--g-fort)}
  .sub.subMotif{margin:var(--e-2) 0}
  .sub.subH2{margin:var(--e-2) 0 0}
  /* pastille d'un élément annulé (guichet, mes demandes, entretiens) */
  .chip.annule{background:var(--filet);color:var(--encre2)}
  /* légende du planning d'astreinte : teinte de la personne */
  .legend span.persTeinte{background:var(--pf);color:var(--pe)}
  /* grille des primes : commentaire de 120 px au moins */
  #tblPrimes .prCom{min-width:calc(var(--e-5)*5)}
  /* assistant (zone IA) : propositions empilées, une par ligne */
  .cprop.cpropCol{flex-direction:column;align-items:stretch}

  /* === D1 accueil === */
  /* D1 (fiche 2026-10-02, parti pris 3) : en-tête de module commun (.modTete), écrit par rendre() dès qu'un module pose
     MODTETE.<onglet> (rendu.js) : pastille, titre et phrase (.ptPhrase) à gauche, action principale (.ptActions) à droite.
     Sous 700 px l'action passe sous le titre, sur toute la largeur. */
  #pageTete .modTete{align-items:flex-start;flex-wrap:nowrap}
  .modTete .mtTexte{flex:1;min-width:0}
  .modTete .ptPhrase{margin:var(--e-1) 0 0;color:var(--encre2);max-width:68ch}
  .modTete .ptPhrase:empty{display:none}
  .modTete .ptPhrase b{color:var(--encre);font-weight:var(--g-fort)}
  .modTete .ptActions{display:flex;gap:var(--e-2);flex:none;align-self:center}
  #tInfos>h2,#tInfos>.sub{display:none}   /* le titre et la phrase sont dans l'en-tête */
  #tInfos>.tabs{margin-top:0}
  #pageTete h1.ptSalut{font-style:italic;font-weight:var(--g-moyen)}
  #pageTete:has(>.fil.hidden){padding-top:var(--e-5)}@media(min-width:961px){#pageTete:has(>.fil.hidden){padding-top:var(--e-6)}}   /* accueil sans fil ; sur ordinateur, menu ouvert ou replié, même air que les modules */
  @media(max-width:700px){
    #pageTete .modTete{flex-wrap:wrap}
    .modTete .mtTexte{flex-basis:0}
    .modTete .ptActions{flex-basis:100%}
    .modTete .ptActions .btn{flex:1}
    .ptJour{display:none}
  }
  /* === D4-D6 planning === */
  /* Design approfondi (docs/decisions/2026-10-02-design-approfondi.md, parti pris 5).
     D4 : une teinte par type d'absence, en jetons — encre --abs-<type>, fond pâle --abs-<type>-d.
     Le RTT quitte le violet (réservé à l'IA) pour le bleu. Les jetons adossés à --ok, --info,
     --crit et --att suivent le thème d'eux-mêmes ; les autres ont leur valeur sombre ici. */
  :root{
    --abs-cp:var(--ok); --abs-cp-d:var(--ok-d);
    --abs-rtt:var(--info); --abs-rtt-d:var(--info-d);
    --abs-maladie:var(--crit); --abs-maladie-d:var(--crit-d);
    --abs-sans-solde:#475569; --abs-sans-solde-d:#eceff3;
    --abs-autre:var(--att); --abs-autre-d:var(--att-d);
    --abs-defaut-d:#eaf6f4;
  }
  @media (prefers-color-scheme:dark){
    :root{ --abs-sans-solde:#9aa9be; --abs-sans-solde-d:rgba(71,85,105,.24); --abs-defaut-d:rgba(13,122,111,.24); }
  }
  .abs-cp{--c:var(--abs-cp);--d:var(--abs-cp-d)}
  .abs-rtt{--c:var(--abs-rtt);--d:var(--abs-rtt-d)}
  .abs-maladie{--c:var(--abs-maladie);--d:var(--abs-maladie-d)}
  .abs-sans-solde{--c:var(--abs-sans-solde);--d:var(--abs-sans-solde-d)}
  .abs-autre{--c:var(--abs-autre);--d:var(--abs-autre-d)}
  .absLegende span i[class^="abs-"]{background:var(--d);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c)}
  /* demande en attente : hachures et bord en tirets, dans la teinte du type */
  .absLegende span i.attente{background:repeating-linear-gradient(45deg,var(--d) 0 4px,var(--surf) 4px 8px);border:0;box-shadow:none;outline:1.5px dashed var(--c);outline-offset:-1.5px}
  /* la légende passe au-dessus de la grille (déplacée par rendreAbsences) ; chaque pastille porte
     l'abrégé qu'on retrouve sur les barres d'un ou deux jours */
  .absLegende{margin:0 0 var(--e-3);gap:var(--e-2) var(--e-4);align-items:center}
  .absLegende span{display:inline-flex;align-items:center}
  .absLegende span i{flex:none;min-width:28px;height:20px;margin-right:var(--e-2);display:inline-grid;place-items:center;font:var(--g-fort) var(--t-xs)/1 var(--f-ui)}
  /* D5 : une barre par absence (jours contigus fusionnés), lignes de 48 px, noms en texte, jour courant */
  .absGrille th{min-width:28px;font:var(--g-moyen) var(--t-xs)/1.2 var(--f-ui);color:var(--encre3)}
  .absGrille th b{display:block;font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre)}
  .absGrille th.we b{font-weight:var(--g-normal);color:var(--encre3)}
  .absGrille th.auj{background:var(--marque-d)}
  .absGrille th.auj b{border-radius:var(--r-rond);background:var(--marque-f);color:var(--sur-fort)}
  .absGrille td{height:var(--e-7)}
  .absGrille td.auj{outline:0;background:var(--marque-d)}
  .asCarte{margin:0;padding:0;list-style:none;border:1px solid var(--filet);border-radius:var(--r-l);background:var(--surf);overflow:hidden}
  .asCarte ul{margin:0;padding:0;list-style:none}
  .asCarte li{margin:0;padding:var(--e-3) var(--e-4);border-top:1px solid var(--filet)}
  .asCarte>li:first-child{border-top:0}
  .asCarte li b{display:block;font-weight:var(--g-fort);line-height:1.3}
  .asCarte li>span:not(.chip){display:block;font-size:var(--t-s);line-height:1.4;color:var(--encre3)}
  /* === D7-D9 CRM === */
  /* la fiche d'un établissement existant s'élargit pour loger la colonne des services */
  @media(min-width:900px){ #dlgCrmContact:has(#ccSuivi:not(.hidden)){max-width:960px} }
  .sdhFait{width:44px;min-height:44px;justify-content:center;margin-left:calc(-1*var(--e-2))}
  .sdhFait input{width:22px;height:22px;accent-color:var(--marque-f);cursor:pointer}
  .ligne2{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:64px;padding:var(--e-2) var(--e-1);border:0;border-top:1px solid var(--filet);border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
  h3+.ligne2{border-top:0}
  .ligne2:hover{background:var(--surf2)}
  .ligne2 .x{display:flex;flex-direction:column;flex:1;min-width:0}
  .ligne2 .t{font-weight:var(--g-fort);line-height:1.3;overflow-wrap:anywhere}
  .ligne2 .m{font-size:var(--t-s);line-height:1.4;color:var(--encre3)}
  .ligne2 .m.r{color:var(--crit);font-weight:var(--g-fort)}
  .ligne2>.ic{flex:none;color:var(--encre3)}
  @media(min-width:1100px){
    #dlgCrmContact:has(#ccSuivi:not(.hidden)){max-width:1240px}
    #ccSuivi:not(.hidden){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--e-5);align-items:start}
    #ccSuivi>*{grid-column:1}
  }
  /* === R coquille === */
  /* Revue de design du 02/10/2026 (docs/decisions/2026-10-02-revue-design-skills.md), lots de la coquille. */
  /* --- R1 : durées du geste, bouton de troisième niveau, réponse au survol --- */
  :root{--d-court:120ms;--d-moyen:220ms}
  /* troisième niveau : un mot souligné, cible de 44 px, pour les gestes répétés sur chaque ligne */
  .btn-t{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--h-ctrl);min-width:var(--h-ctrl);padding:0 var(--e-3);
    border:0;border-radius:var(--r);background:none;color:var(--marque-e);font:var(--g-fort) var(--t-m)/1.2 var(--f-ui);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:background-color var(--d-court),color var(--d-court)}
  .btn-t:hover{background:var(--marque-d)}
  .btn-t:active{transform:translateY(1px)}
  .btn-t:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anneau)}
  .btn-t:disabled,.btn-t[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
  /* lignes, onglets, entrées du menu : le fond et l'encre changent en 120 ms */
  .ligne2,.tab,.mcItem,.avatar,#btnMenu{transition:background-color var(--d-court),color var(--d-court),border-color var(--d-court),box-shadow var(--d-court)}
  #lateral .tab .icw{transition:background-color var(--d-court),color var(--d-court)}
  @media(prefers-reduced-motion:reduce){
    .btn-t,.ligne2,.tab,.mcItem,.avatar,#btnMenu,#lateral .tab .icw{transition:none}
    .btn-t:active{transform:none}
  }
  /* --- R2 : menu (décision Q1 A) : au repos, pictogramme sans fond ; seule la ligne ouverte est teintée --- */
  /* familles en minuscules ; capitales retirées des badges et des étiquettes de fiche
     (elles restent aux en-têtes de tableau) */
  .navlab,.badge,.eqEdit .fw label{text-transform:none;letter-spacing:0}
  .eqEdit .fw label{font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre2)}
  /* ordinateur et tablette : puits de 28 px, le texte des entrées s'aligne sur celui des familles.
     Sous 700 px, les tailles du menu plein écran (52 px, texte à 18 px, retour du 02/10) ne bougent pas. */
  @media(min-width:701px){
    #lateral .tab{gap:var(--e-2);padding:0 var(--e-2)}
    #lateral .icw{width:28px;height:28px;flex-basis:28px}
    .navlab{padding:var(--e-4) var(--e-3) var(--e-2)}
  }
  /* --- R3 : barre du haut --- */
  /* 60 px (filet compris), le nom de l'entreprise seul, une cloche discrète, les initiales dans un
     carré arrondi. Le prénom et « ▾ » restent sur ordinateur ; sous 960 px le compte est dans le tiroir. */
  :root{--hd-h:60px}
  .hd{height:calc(var(--hd-h) - 1px);padding:0 var(--e-5) 0 var(--e-4);flex-wrap:nowrap}
  .hd .logoImg{height:34px}
  .hdNom{flex:1;min-width:0;font:var(--g-fort) calc((var(--t-m) + var(--t-l)) / 2)/1.3 var(--f-titre);color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who{flex:none;flex-wrap:nowrap}
  #btnCloche{position:relative;width:var(--h-ctrl);min-width:var(--h-ctrl);height:var(--h-ctrl);padding:0;gap:0;font-size:0;border-color:transparent;background:none;color:var(--encre2)}
  #btnCloche:hover{background:var(--surf2);border-color:transparent;color:var(--encre)}
  #btnCloche .ic{width:22px;height:22px;margin:0}
  #btnCloche .n{position:absolute;top:2px;left:calc(50% + 2px);right:auto;margin:0;min-width:18px;padding:0 var(--e-1);font-size:var(--t-xs);line-height:1.5;background:var(--marque-f)}
  #btnCloche .n.retard{background:var(--crit)}
  #btnCloche .n.retard::after{content:"\202F!"}   /* le retard se dit aussi sans la couleur */
  #btnCloche .n:empty{display:none}
  .avatar{border-radius:var(--r);padding:0 var(--e-2) 0 var(--e-1);font-size:var(--t-m)}
  .avRond,.avatar:hover .avRond{width:36px;height:36px;border-radius:var(--r);background:var(--marque-d);color:var(--marque-e);font-size:var(--t-s);letter-spacing:0}
  @media(max-width:700px){
    /* une seule ligne : menu, logo, nom (coupé par « … » s'il déborde), cloche */
    :root{--hd-h:56px}
    .hd{padding:0 var(--e-2);gap:var(--e-1)}
    .hd .logoImg{height:30px}
    .hdNom{margin-left:var(--e-1);font-size:var(--t-m)}
  }
  /* --- R11 : connexion --- */
  /* une colonne de saisie sur une feuille, un panneau de marque à droite ; la barre du haut se tait
     (le logo et le nom sont en tête de colonne). Sous 960 px : la colonne seule, plein écran, sans carte. */
  body:has(#vLogin:not(.hidden)) header{display:none}
  body:has(#vLogin:not(.hidden)) .wrap{padding:0}
  #vLogin{max-width:none;margin:0!important;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr)}
  .lgCol{display:flex;flex-direction:column;min-width:0;padding:var(--e-5) var(--e-5) calc(var(--e-7) * 3)}
  .lgTete{display:flex;align-items:center;gap:var(--e-3)}
  #vLogin .loginLogo{height:var(--h-ctrl);width:auto;flex:none}
  #vLogin .loginMot{font:italic var(--g-moyen) var(--t-xl)/var(--i-xl) var(--f-titre);color:var(--marque-e);margin:var(--e-6) 0 0;padding-bottom:var(--e-1)}
  .lgPhrase{margin:var(--e-1) 0 var(--e-5);color:var(--encre2)}
  #vLogin .f{margin-bottom:var(--e-4)}
  #vLogin .f label{font-size:var(--t-s);font-weight:var(--g-fort);color:var(--encre2)}
  #vLogin .f input,#vLogin #blocIdent>.btn,#vLogin #btnCode{min-height:calc(var(--h-ctrl) + var(--e-1))}
  /* mot de passe : « Afficher » loge dans le champ, à droite ; un message d'erreur passe dessous */
  .lgMdp{position:relative;display:flex;flex-wrap:wrap}
  .lgMdp input{padding-right:calc(var(--e-7) * 2)}
  .lgMdp .btn-t{position:absolute;top:0;right:0;min-height:calc(var(--h-ctrl) + var(--e-1));padding:0 var(--e-3);font-size:var(--t-s);text-decoration:none}
  .lgMdp .btn-t:hover{background:none;text-decoration:underline}
  .lgMdp .champErr{flex:1 0 100%}
  #vLogin .loginPied{text-align:left;margin-top:auto;padding-top:var(--e-5)}
  #vLogin .loginPropulse{text-align:left}
  .lgMarque{display:none}
  @media(max-width:960px){
    body:has(#vLogin:not(.hidden)){background:var(--surf)}
    #vague svg{height:110px}
  }
  @media(min-width:961px){
    #vLogin{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
    .lgCol{background:var(--surf);border-right:1px solid var(--filet);box-shadow:var(--ombre-1);padding:var(--e-7) calc(var(--e-7) + var(--e-6)) var(--e-6)}
    #vLogin .loginMot{font-size:var(--t-2xl);line-height:var(--i-2xl);margin-top:var(--e-7)}
    .lgMarque{display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;min-width:0;padding-inline:calc(var(--e-7) + var(--e-6));background:var(--lgf)}   /* page blanche : la moitié de marque garde sa teinte en clair */
    .lgFiligrane{position:absolute;right:-60px;top:60px;height:520px;width:auto;opacity:.14;pointer-events:none}
    .lgTitre{position:relative;margin:0;max-width:460px;font:var(--g-fort) var(--t-2xl)/var(--i-2xl) var(--f-titre);letter-spacing:-.01em;color:var(--encre)}
    .lgSous{position:relative;margin:var(--e-3) 0 0;max-width:420px;color:var(--encre2)}
  }
  /* --- Tampon de l'assistant (décision Q3 A) --- */
  /* un rectangle pâle, à l'encre violette, avec un double filet (bord plein + filet clair décalé).
     Contraste du texte sur le fond : 7,9:1 en clair (--ia-f sur --ia-d), 5,9:1 en sombre. Le bord plein (--ia) porte le
     contraste du contour ; le filet extérieur (--ia-b, environ 1,7:1) est décoratif et ne porte pas le contraste.
     Dans une zone .iaZone (déjà sous tampon), le bouton d'action reste plein : règle « .iaZone .btn » plus haut. */
  .btn-ia,#bulleChat{background:var(--ia-d);border:1.5px solid var(--ia);outline:1px solid var(--ia-b);outline-offset:3px;color:var(--ia-f)}
  .btn-ia:hover{background:var(--ia-d);border-color:var(--ia-f)}
  #bulleChat{height:calc(var(--h-ctrl) + var(--e-1));padding:0 var(--e-4) 0 var(--e-3);border-radius:var(--r);
    transition:transform var(--d-court),border-color var(--d-court)}
  #bulleChat:hover{border-color:var(--ia-f)}
  @media(prefers-reduced-motion:reduce){#bulleChat{transition:none}#bulleChat:hover{transform:none}}
  /* --- R12 : barre d'action du téléphone (décision Q2 A) --- */
  /* Sous 700 px, une barre fixe en bas remplace la bulle flottante : le bouton principal de l'écran
     (.ptActions de l'en-tête de module, MODTETE.onglet.action dans rendu.js) et le tampon de l'assistant,
     côte à côte. Sans bouton principal, le tampon est seul, avec son libellé. Rien ne change dans le DOM :
     la bulle reste un enfant de body, placerAssistant (assistant.js) et la surcharge de showModal ne sont
     pas touchés. Dans une fenêtre ouverte, la règle V-280 garde la main (dialog>#bulleChat, plus haut). */
  @media(max-width:700px){
    body.co{--h-barre:calc(var(--h-ctrl) + var(--e-1) + var(--e-3) * 2 + env(safe-area-inset-bottom,0px));--b-barre:calc(var(--e-3) + env(safe-area-inset-bottom,0px))}
    body.co:is(:has(#bulleChat:not(.hidden)),:has(.ptActions:not(.hidden)):not(:has(.hidden .ptActions)))::after{content:"";position:fixed;left:0;right:0;bottom:0;height:var(--h-barre);z-index:50;background:var(--fond);border-top:1px solid var(--filet-doux)}
    /* marge basse : la barre ne masque jamais la fin du contenu */
    body.co .contenu{padding-bottom:calc(var(--h-barre) + var(--e-5))}
    body.co .modTete .ptActions{position:fixed;left:var(--e-4);right:calc(var(--h-ctrl) + var(--e-1) * 2 + var(--e-4) * 2);bottom:var(--b-barre);z-index:51;flex-basis:auto}
    /* lot 3 : le libellé tient sur une ligne, dans la barre, sans couvrir le tampon : plus petit et sans pictogramme sous 375 px */
    body.co .modTete .ptActions .btn{min-height:calc(var(--h-ctrl) + var(--e-1));white-space:nowrap;max-width:100%;overflow:hidden}
    /* le tampon : sous le voile et le tiroir du menu (55 et 60), au-dessus de la barre */
    body>#bulleChat{right:calc(var(--e-4) + var(--e-1));bottom:var(--b-barre);z-index:51;width:auto;height:calc(var(--h-ctrl) + var(--e-1));padding:0 var(--e-4) 0 var(--e-3);border-radius:var(--r)}
    body>#bulleChat:hover{transform:none}
    /* le tampon ne perd son libellé que si l'écran AFFICHÉ a une action principale (ni .hidden, ni dans un bloc .hidden) */
    body>#bulleChat .bulleTxt{display:inline}
    body:has(.ptActions:not(.hidden)):not(:has(.hidden .ptActions))>#bulleChat{width:calc(var(--h-ctrl) + var(--e-1));padding:0;justify-content:center}
    body:has(.ptActions:not(.hidden)):not(:has(.hidden .ptActions))>#bulleChat .bulleTxt{display:none}
    /* messages éphémères et bandeau de version : au-dessus de la barre */
    body.co #toastZone,body.co .bandeauVersion{bottom:calc(var(--h-barre) + var(--e-2))}
  }
  @media(max-width:374px){body.co .modTete .ptActions .btn{font-size:var(--t-s);padding-left:var(--e-3);padding-right:var(--e-3)}body.co .modTete .ptActions .btn .ic{display:none}}
  /* === R validations et fiche === */
  /* Revue de design du 02/10/2026 (docs/decisions/2026-10-02-revue-design-skills.md), lots R5, R7 et R8 :
     gabarits de validations.js et de droits.js. Jetons seulement, deux thèmes par les jetons. */
  /* R5 : demandes et heures à valider. Un titre par groupe d'urgence (Spectral), puis des lignes à deux
     niveaux séparées par un filet : initiales, objet et détail, « Refuser » en mot, bouton d'accord. */
  .valGr{margin:var(--e-5) 0 var(--e-1);font:var(--g-fort) var(--t-l)/var(--i-l) var(--f-titre);color:var(--encre)}
  .valGr:first-child{margin-top:var(--e-2)}
  .valL{display:flex;align-items:center;gap:var(--e-4);min-height:84px;padding:var(--e-3) 0;border-top:1px solid var(--filet)}
  .valGr+.valL{border-top:0}
  .valIni{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);background:var(--surf2);color:var(--encre2);font-size:var(--t-s);font-weight:var(--g-fort)}
  .valL .x{flex:1;min-width:0}
  .valL .t{font-weight:var(--g-fort);line-height:1.3;overflow-wrap:anywhere}
  .valL .m{font-size:var(--t-s);line-height:var(--i-s);color:var(--encre2);overflow-wrap:anywhere}
  .valAlerte{color:var(--att);font-weight:var(--g-fort)}
  .valAct{display:flex;align-items:center;gap:var(--e-2);flex:none}
  .btn-t.refus{color:var(--crit)}
  @media(max-width:640px){
    .valL{flex-wrap:wrap;gap:var(--e-2) var(--e-3)}
    .valIni{display:none}
    .valAct{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .valAct .btn-t.refus{border:1px solid var(--crit);text-decoration:none}
  }
  .fPieces{border-top:1px solid var(--filet);padding:var(--e-1) 0 0}
  .fPieces h4{display:flex;align-items:center;min-height:var(--h-ctrl);margin:0;font:var(--g-fort) var(--t-l)/var(--i-l) var(--f-titre);color:var(--encre)}
  .fPieces ul{list-style:none;margin:var(--e-2) 0 var(--e-3);padding:0}
  .fPieces li{display:flex;align-items:center;gap:var(--e-2);min-height:52px;border-top:1px solid var(--filet)}
  .fPieces li .x{flex:1;min-width:0;overflow-wrap:anywhere}
  .fCote .iaZone{margin:var(--e-2) var(--e-1) 0}
  /* === R primes === */
  /* R9 (fiche 2026-10-02, parti pris 5) : le tableau des primes devient une liste de montants. Montant et
     libellé dans une même case, bordée seulement au survol et à la saisie ; noms en texte ; pied de totaux,
     le total du mois en Spectral. Le « + » des cases vides est en --encre3 (plus de 5:1 sur la feuille). */
  #grillePrimes{overflow:visible}
  .prDefil{overflow-x:auto;background:var(--surf)}
  .prResume{margin:0 0 var(--e-3);color:var(--encre2)}
  #tblPrimes{font-size:var(--t-m)}
  /* « tout à l'écran » à 1280 px : cases de 96 px, marges latérales resserrées, nom sur deux lignes au besoin */
  #tblPrimes th,#tblPrimes td{vertical-align:middle;padding-left:var(--e-2);padding-right:var(--e-2)}
  #tblPrimes thead th{vertical-align:bottom;letter-spacing:0}
  /* en-têtes de primes, alignés à droite : la marge de gauche ne faisait qu'élargir la colonne */
  #tblPrimes thead th[title]{padding-left:0}
  #tblPrimes .prNom{font-size:var(--t-m);text-transform:none;letter-spacing:0;color:var(--encre);border-bottom-color:var(--filet)}
  #tblPrimes .prCase{padding:var(--e-1);min-width:calc(var(--e-7)*2)}
  .prC{border:1px solid transparent;border-radius:var(--r);padding:0 var(--e-1) var(--e-1)}
  .prC:hover{border-color:var(--filet2)}
  .prC:focus-within{border-color:var(--marque-f);box-shadow:0 0 0 3px var(--marque-d)}
  #tblPrimes .prC input{display:block;border:0;background:transparent;box-shadow:none;padding:0 var(--e-2);text-align:right}
  #tblPrimes .prC input:focus{background:var(--surf2)}
  #tblPrimes .prC [data-k="montant"]::placeholder{color:var(--encre3);font-size:var(--t-l);font-weight:var(--g-fort)}
  /* case de montant sans flèches (elles rognaient le chiffre) ; les touches haut et bas restent */
  #tblPrimes .prC [data-k="montant"]{-moz-appearance:textfield;appearance:textfield}
  #tblPrimes .prC [data-k="montant"]::-webkit-inner-spin-button{display:none}
  #tblPrimes .prC [data-k="libelle"]{min-height:calc(var(--e-5) + var(--e-1));font-size:var(--t-s);color:var(--encre2)}
  @media(pointer:coarse){#tblPrimes .prC [data-k="libelle"]{min-height:var(--h-ctrl)}}
  /* colonne des noms figée quand la grille défile en largeur ; le pied garde son fond --surf2 ; bordures séparées,
     pour que le filet reste sous la colonne figée */
  #tblPrimes{border-collapse:separate;border-spacing:0}
  #tblPrimes .prNom,#tblPrimes thead th:first-child{position:sticky;left:0;z-index:1}
  #tblPrimes tbody .prNom,#tblPrimes thead th:first-child{background:var(--surf)}
  .prC:not(:hover):not(:focus-within) [data-k="montant"]:placeholder-shown~[data-k="libelle"]{opacity:0}
  #tblPrimes .prManque [data-k="libelle"]::placeholder{color:var(--att);font-weight:var(--g-fort)}
  #tblPrimes .prTot,#tblPrimes tfoot td{text-align:right;white-space:nowrap}
  #tblPrimes .prTot{font-weight:var(--g-fort)}
  #tblPrimes .prTot.prZero{font-weight:var(--g-normal);color:var(--encre3)}
  #tblPrimes tbody tr:last-child .prNom{border-bottom:0}
  #tblPrimes tfoot th,#tblPrimes tfoot td{background:var(--surf2);border-bottom:0;padding:var(--e-4) var(--e-2)}
  #totalPrimes{font:var(--g-fort) var(--t-l)/1.4 var(--f-titre)}
  #tblPrimes .prCom{background:transparent;font-size:var(--t-s)}
  #tblPrimes .prCom:focus{border-color:var(--marque-f);background:var(--surf)}
  .prAide{margin:var(--e-3) 0 0}
  /* R10 : sous 700 px, le tableau laisse la place à une liste (une ligne par salarié, .ligne2 du lot D9) sous le
     total du mois en grand ; la saisie se fait dans la fenêtre qui monte du bas (primeFeuille, paie.js). */
  .prGrand,.prListe,.prAideT{display:none}
  .prGrand{margin:0;font:var(--g-fort) var(--t-2xl)/1.1 var(--f-titre);font-variant-numeric:tabular-nums}
  .prLigne{min-height:72px}
  .prListe .prLigne:first-child{border-top:0}
  .prLTot{font-weight:var(--g-fort);white-space:nowrap;font-variant-numeric:tabular-nums}
  .prLTot.prZero{font-weight:var(--g-normal);color:var(--encre3)}
  .ligne2 .m.prAtt{color:var(--att);font-weight:var(--g-fort)}
  .prFGroupe{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--e-3);margin:0;border:0;border-top:1px solid var(--filet);padding:var(--e-3) 0 0;min-width:0}
  .prFGroupe legend{padding:0 var(--e-2) 0 0;font-weight:var(--g-fort)}
  .prFCom{border-top:1px solid var(--filet);padding-top:var(--e-3)}
  @media(max-width:700px){
    .prDefil,.prAideO{display:none}
    .prGrand,.prListe,.prAideT{display:block}
  }
  /* === R4 feuille par écran === */
  /* Revue de design du 02/10/2026 (docs/decisions/2026-10-02-revue-design-skills.md), parti pris n° 1 :
     la feuille blanche porte l'écran, les lignes s'y séparent par un filet. Plus de boîte dans la boîte :
     .carteBord et les .card posées dans une feuille (ou une fenêtre) perdent cadre, arrondi, fond et ombre.
     La zone de l'assistant (.iaZone) garde son tampon. Mêmes règles de filet que .ligne2 (lot D9). */
  .carteBord,.card .card:not(.iaZone),.card.crmCarteC,.card.carteListe{border:0;border-top:1px solid var(--filet);border-radius:0;background:none;box-shadow:none;margin:0;padding:var(--e-3) 0}
  h3+.carteBord,h3+.card.crmCarteC,h3+.card.carteListe{border-top:0}
  /* Audit R4 : sans cadre, les boutons d'une ligne (.carteBord) gardent de l'air au-dessus et entre eux quand ils
     passent à la ligne sur téléphone. Les groupes à sous-lignes (.carteListe : objectif et ses étapes, plan et ses
     actions, doublons) se séparent par un filet plus marqué que celui de leurs sous-lignes (.ligneListe). */
  .carteBord>.btn{margin-top:var(--e-2)}
  .card .card.carteListe,dialog .card.carteListe{border-top-color:var(--filet2);padding:var(--e-4) 0}
  /* États vides : une phrase simple (Spectral italique de .videPhrase), alignée comme le texte de la feuille,
     puis, en dessous et en encre discrète, ce qu'on peut faire (.videSous). Remplace .empty, gris et centré,
     qui reste pour les attentes (« Chargement… ») et les messages d'erreur. */
  .videPhrase.videF{margin:0;padding:var(--e-4) 0;text-wrap:balance}
  .videF .videSous{display:block;margin-top:var(--e-1);font:normal var(--g-normal) var(--t-s)/1.4 var(--f-ui)}
  /* Audit R4 : la grande phrase (20 px) est celle de la liste principale d'un écran. Dans une fenêtre, ou dans une
     rubrique secondaire empilée avec d'autres (.videP : rapport mensuel, documents du véhicule, justificatifs),
     la même phrase passe à la taille du texte courant pour ne pas crier plus fort que les titres de rubrique. */
  dialog .videPhrase.videF,.videPhrase.videF.videP{font-size:var(--t-m);padding:var(--e-3) 0}
  /* === fin R4 === */
  /* === Rédaction par passages === */
  /* L'aperçu d'une retouche de modèle de contrat. L'assistant ne réécrit plus le document pour en changer
     trois lignes : il propose des passages, qu'on lit AVANT / APRÈS avant de les appliquer. L'aperçu vit dans
     la zone .iaZone (tampon violet) ; le rouge et le vert sont ceux des jetons, donc justes dans les deux thèmes. */
  .iaProp{margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px dashed var(--ia-b)}
  .iaPropTitre{margin:0;font:var(--g-fort) var(--t-s)/1.45 var(--f-ui);color:var(--ia-f)}
  .iaResume{margin:var(--e-1) 0 var(--e-2);font-size:var(--t-s);color:var(--encre2)}
  .iaProp ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-2)}
  .iaProp ol>li{background:var(--surf);border:1px solid var(--ia-b);border-radius:var(--r);padding:var(--e-2) var(--e-3)}
  .iaPropN{font:var(--g-fort) var(--t-xs)/1.5 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--encre3)}
  .iaLigne{display:flex;gap:var(--e-2);align-items:flex-start;margin-top:var(--e-1)}
  .iaEtiq{flex:none;width:66px;font:var(--g-fort) var(--t-xs)/1.9 var(--f-ui);letter-spacing:.04em;text-transform:uppercase}
  .iaTexte{flex:1;min-width:0;max-height:12em;overflow:auto;border-radius:var(--e-1);padding:var(--e-1) var(--e-2);
    font:var(--t-xs)/1.55 var(--f-code);white-space:pre-wrap;overflow-wrap:anywhere}
  .iaAvant .iaEtiq{color:var(--crit)} .iaAvant .iaTexte{background:var(--crit-d);color:var(--encre2)}
  .iaApres .iaEtiq{color:var(--ok)} .iaApres .iaTexte{background:var(--ok-d);color:var(--encre)}
  .iaEcarte{margin:var(--e-2) 0 0;font-size:var(--t-s);color:var(--att)}
  .iaEcarte ul{margin:var(--e-1) 0 0;padding-left:var(--e-4)}
  .iaPropActions{display:flex;gap:var(--e-2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--e-3)}
  .iaPropActions .btn{min-height:var(--h-ctrl)}
  .iaCase{min-height:var(--h-ctrl)}
  /* « Annuler » et « Ignorer » gardent l'identité violette sans peser autant que l'action principale */
  .iaZone .btn.iaDiscret{background:transparent;border-color:var(--ia-b);color:var(--ia-f)}
  /* === fin === */
  /* === Contraste (09/10/2026) === */
  /* Planche du designer : « Net » dans les deux thèmes, « Franc » en plus dans le thème clair seulement.
     Jetons seulement. Mesuré : 4,5:1 au moins pour tout texte, 3:1 pour les limites utiles. Le bord plein
     du bouton secondaire, le soulignement de 3 px de l'onglet ouvert et le contour plein des barres
     d'absence sont écrits à leur règle d'origine. */
  /* --- Net : ce qui porte un état est cerné à sa couleur (.chip.sa a déjà son bord) --- */
  .badge,.chip:not(.sa),.dossPuce,.note{box-shadow:inset 0 0 0 1px currentColor}
  /* sans état (« Qualitatif », « droit Paie », un fichier joint) ou annulée : l'étiquette la plus discrète, sur le
     fond des bandes et au contour des champs, jamais à l'encre du texte ; les puces neutres du dossier suivent */
  .chip:not(.att,.ok,.no,.sa,.marque,.crmSelNb){background:var(--surf2);color:var(--encre2);box-shadow:inset 0 0 0 1px var(--filet2)}
  .dossPuce:is(.info,.hors){box-shadow:inset 0 0 0 1px var(--filet2)}
  /* étiquettes d'état, règle de sens : PLEINE quand une décision est attendue (en attente, refusée, en retard,
     échue : .chip.att et .chip.no), cernée pour le reste (validée, traitée, information). Texte en --sur-fort,
     tenu dans les deux thèmes (5,9 et 6,5 en clair ; 8,1 et 6,1 en sombre). .info : une étiquette ambre ou
     rouge qui ne dit qu'une catégorie ou un repère (type de document, objectif, équipe, « nouveau », portée
     d'un pouvoir) reste cernée. */
  .chip:is(.att,.no):not(.info){box-shadow:none;color:var(--sur-fort)}
  .chip.att:not(.info){background:var(--att)}
  .chip.no:not(.info){background:var(--crit)}
  /* ligne ouverte du menu, nom du planning et étiquette teintée (type d'établissement, nom) : un contour */
  #lateral .tab.on{box-shadow:inset 0 0 0 1px var(--filet2)}
  .day .pers,.pers.persTeinte{box-shadow:inset 0 0 0 1px currentColor}
  /* jour courant : case teintée, numéro en pastille (« férié » suit l'encre de la pastille) */
  .day.today{background:var(--marque-d)}
  .day.today .num:not(.crmAutres){display:inline-block;padding:0 var(--e-2);border-radius:var(--r-rond);background:var(--marque-f);color:var(--sur-fort)}
  .day.today.ferie .num::after{color:inherit}
  /* accueil (gabarit de rendreRappels, rendu.js) : l'action prioritaire sort de la liste « À faire » et prend un bloc.
     Net : cerné au turquoise d'action, sans aplat ; son bouton est le bouton principal. Téléphone : le bouton passe dessous. */
  .afPrio{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4);margin:0 0 var(--e-3);padding:var(--e-4) var(--e-5);border:2px solid var(--marque-f);border-radius:var(--r-l);background:var(--surf);color:var(--encre)}
  .afPrioTexte{flex:1 1 240px;min-width:0}
  .afPrioTitre{margin:0 0 var(--e-1);font:var(--g-fort) var(--t-l)/1.3 var(--f-titre);overflow-wrap:anywhere}
  .afPrioMeta{margin:0;font-size:var(--t-s);line-height:1.4}
  .afPrio .btn{flex:none}
  @media(max-width:700px){
    .afPrio{padding:var(--e-3) var(--e-4)}
    .afPrio .btn{flex:1 1 100%}
  }
  /* --- Franc : clair, écran (la page teintée est abandonnée le 19/10/2026 : page blanche) --- */
  @media screen and (prefers-color-scheme:light){
    /* en-têtes de colonne sur une bande (les en-têtes de ligne, scope="row", n'en ont pas) */
    th:where([scope="col"]){background:var(--surf2);color:var(--encre2)}
    #ecListe thead th,#tblPrimes thead th:first-child{background:var(--surf2)}
    /* fiche : rubrique sur bande ; intitulés de champ à --encre2, 14 px, sans petites capitales */
    .fPieces{border-top:0}
    .fPieces h4{padding-left:var(--e-3);border-radius:var(--r);background:var(--surf2)}
    .fPieces h4{margin-bottom:var(--e-2)}
    /* barres d'absence et noms du planning en aplat */
    .absLegende span i[class^="abs-"]:not(.attente){background:var(--c);color:var(--sur-fort);box-shadow:none}
    .day .pers[data-fond]{background:var(--pers-e);color:var(--sur-fort);box-shadow:none}
    .day .pers.modif{outline-color:var(--pers-e)}
    .legend span.persTeinte{background:var(--pe);color:var(--sur-fort)}
    /* encart critique plein ; l'avertissement reste cerné */
    .note.repCrit{background:var(--crit);color:var(--sur-fort);box-shadow:none}
    /* accueil : bloc plein de l'action prioritaire, son bouton en blanc (survol sur --surf2, anneau de focus blanc) */
    .afPrio{background:var(--marque-f);color:var(--sur-fort)}
    .afPrio .btn-p{background:var(--surf);color:var(--marque-e)}
    .afPrio .btn-p:hover{background:var(--surf2)}
    .afPrio .btn-p:focus-visible{--anneau:0 0 0 2px var(--marque-f), 0 0 0 4px var(--surf)}
    /* menu sur le bleu nuit (--menu) : encres du thème sombre ; survol et filets mêlent les deux bleus de la
       marque. Une valeur changée dans le bloc sombre se reporte ici. */
    #lateral{--encre:#e6edef;--encre2:#b4c3c8;--marque-f:var(--marque-clair);--marque-e:#a9dde3;--marque-d:#173a44;--focus:var(--marque-clair);--crit:#f07171;--sur-fort:#0f1b22;
      --info:#9db4f0;--info-d:#1c2a4a;--att:#e9a23b;--att-d:#3a2a12;
      --surf2:color-mix(in srgb,var(--marque-clair) 16%,var(--menu));--filet:color-mix(in srgb,var(--marque-clair) 24%,var(--menu));--filet2:color-mix(in srgb,var(--marque-clair) 55%,var(--menu));
      --mod-infos:#47bad1;--mod-annuaire:#8ea5df;--mod-absences:#48d075;--mod-planning:#8ea5df;--mod-entretiens:#d1a047;--mod-demande:#e39aab;--mod-vehicule:#da9661;--mod-monmateriel:#c9a268;
      --mod-valid:#48d075;--mod-equipe:#8ea5df;--mod-mensuel:#8ea5df;--mod-contrats:#96a5ba;--mod-ca:#d1ae47;--mod-crm:#47b7d1;--mod-materiel:#c9a268;--mod-echeances:#e38787;--mod-secteurs:#da9661;--mod-signalement:#acd05e;--mod-direction:#d98cc6;
      border-right-color:transparent;scrollbar-color:var(--filet2) var(--menu)}
    #lateral .tab{color:var(--encre)}
    #lateral .navlab{color:var(--marque-clair)}
    /* la ligne ouverte se remplit de l'encre de son module (--m, [data-mod]) ; son puits reprend le fond du menu,
       son compteur de retard s'inverse */
    #lateral .tab.on{background:var(--m,var(--marque-f));color:var(--sur-fort);box-shadow:none}
    #lateral .tab.on .icw{background:var(--menu)}
    #lateral .tab.on .icw .ic{color:inherit}
    #lateral .tab.on .n.retard{background:var(--sur-fort);color:var(--m,var(--marque-f))}
    /* tiroir (sous 960 px) : logo sur une plaque claire, entrées du compte sans fond */
    .latTete .latLogo{background:var(--surf);border-radius:var(--r);padding:var(--e-1)}
    #lateral .menuCompte{background:none}
  }
  /* === fin contraste === */
  /* === Accueil, lot 1 (portail moins dense, 19/10/2026 ; tuiles à encoche, 21/10/2026) === */
  /* « À faire » / « À savoir » : une ligne par rappel (famille à l'encre du module, action, flèche), séparées par le filet doux
     (--filet-doux : décoratif, sous 3:1, déclaré dans 98). */
  .lst{list-style:none;margin:0;padding:0;border:1px solid var(--filet-doux);border-radius:var(--r-l);background:var(--surf);overflow:hidden}
  .lst>li+li{border-top:1px solid var(--filet-doux)}
  .ligne{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:calc(var(--h-ctrl) + var(--e-3));padding:var(--e-2) var(--e-4);border:0;background:none;color:var(--encre);font:inherit;text-align:left}
  button.ligne{cursor:pointer}
  button.ligne:hover{background:var(--surf2)}
  button.ligne:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
  .ligneTx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-1);line-height:1.35;overflow-wrap:anywhere}
  .ligneFam{font:var(--g-fort) var(--t-s)/1.3 var(--f-ui);color:var(--m,var(--marque-e))}   /* le module en petit, à son encre (maquette) */
  .ligne>.ic{color:var(--encre3)}
  .ligne .chip{white-space:normal}
  .acCols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-6);margin-top:var(--e-5)}
  .acOnglets{display:flex;align-items:flex-end;gap:var(--e-5);border-bottom:1px solid var(--filet-doux);margin-bottom:var(--e-5)}
  .acOnglet{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);padding:0 var(--e-1);margin-bottom:-1px;border:0;background:none;color:var(--encre2);font:var(--g-moyen) var(--t-m)/1.2 var(--f-ui);cursor:pointer}
  .acOnglet:hover{color:var(--encre)}
  .acOnglet[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--marque-f);color:var(--encre);font-weight:var(--g-fort)}
  .acOnglet .k{font-size:var(--t-s);color:var(--encre3)}
  /* « Ma situation » en tuiles (décision du 21/10/2026) : aplat pâle du module (--d), titre à son encre (--m), le chiffre dans une
     encoche du coin, à la couleur de la page. Contour à 75 % de l'encre mêlée à la page : 3,24 au moins en clair, 4,31 en sombre
     (98). Survol : contour plein. Rien à signaler : l'icône du module dans l'encoche, jamais un vert d'état (08/09). */
  .sitTitre{margin:0 0 var(--e-4);font-size:var(--t-l)}
  .tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}   /* jamais « dense » : l'ordre au clavier suit l'écran */
  .tuile{--cerne:color-mix(in srgb,var(--m) 75%,var(--fond));position:relative;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-1);width:100%;min-height:calc(var(--e-7) * 2);margin:0;padding:var(--e-4) var(--e-4) var(--e-7);border:1px solid var(--cerne);border-radius:var(--r-l);background:var(--d);color:var(--encre);font:inherit;text-align:left}
  button.tuile{cursor:pointer}
  button.tuile:hover{--cerne:var(--m)}
  .tuile.large{grid-column:1/-1}
  .tuileTitre{display:flex;align-items:center;gap:var(--e-2);margin:0;font:var(--g-fort) calc((var(--t-m) + var(--t-l)) / 2)/1.3 var(--f-ui);color:var(--m)}
  .tuileTitre .ic{width:var(--e-6);height:var(--e-6)}
  .tuileDe{font-size:var(--t-m);line-height:1.4;color:var(--encre2)}
  .tuile>.chip{margin-top:auto;max-width:100%;white-space:normal;font-size:var(--t-s)}
  .encoche{position:absolute;right:-1px;bottom:-1px;min-width:calc(var(--e-7) + var(--e-6));padding:var(--e-1) var(--e-3) var(--e-2) var(--e-4);border:solid var(--cerne);border-width:1px 0 0 1px;border-top-left-radius:calc(var(--r-l) + var(--e-2));background:var(--fond);color:var(--m);font:var(--g-fort) var(--t-xl)/1 var(--f-titre);text-align:right;white-space:nowrap}
  .encoche small{margin-left:var(--e-1);font:var(--g-moyen) var(--t-s)/1 var(--f-ui);color:var(--encre2)}
  .encoche .ic{width:calc(var(--e-5) + var(--e-3));height:calc(var(--e-5) + var(--e-3));margin-left:auto}
  .tuile.neutre{--m:var(--encre);--d:var(--surf2);--cerne:var(--filet2);min-height:calc(var(--e-7) + var(--e-5))}
  .tuile.indispo{--m:var(--encre2);--d:var(--surf2);--cerne:var(--filet2)}   /* indisponible : jamais l'air de « rien à signaler » */
  /* Tuiles partout (lot 1 bis, 21/10/2026) : toute grille de choix ou de compteurs reprend CETTE tuile, sans la recopier ; la teinte vient
     du data-mod. .choix : choix d'une fenêtre ou d'un formulaire, plus bas ; .compte : compteurs d'un écran, plus bas, auto-fit, chiffre en --t-l.
     Choisie (aria-pressed) : contour doublé à l'encre et coche dans l'encoche ; pas choisie : tuile neutre, encoche vide (pas la couleur seule).
     Dans une fenêtre, l'encoche et le contour se mêlent à la fenêtre (--surf), non à la page. */
  .tuile.calme>.encoche{min-width:calc(var(--e-7) + var(--e-3))}
  .tuiles.compte{grid-template-columns:repeat(auto-fit,minmax(calc(var(--e-7) * 3),1fr));margin-bottom:var(--e-4)}
  .tuiles.compte .encoche{font-size:var(--t-l)}
  .tuiles.compte .tuile.large{grid-column:span 2}   /* un renseignement (contrat, véhicule) tient deux colonnes : la rangée se remplit */
  .tuiles.choix .tuile.large{min-height:calc(var(--e-7) + var(--e-5));padding-bottom:var(--e-4);padding-right:calc(var(--e-7) * 2 + var(--e-4))}   /* choix sur toute la largeur : le texte longe l'encoche */
  .tuile[aria-pressed="true"]{--cerne:var(--m);box-shadow:inset 0 0 0 1px var(--m)}
  .tuile[aria-pressed="false"] .encoche .ic{visibility:hidden}
  dialog .tuiles{--fond:var(--surf)}
  #wPrio{grid-template-columns:repeat(3,minmax(0,1fr))}
  #wPrio [data-v="Normale"]:not(.neutre){--m:var(--marque-f);--d:var(--marque-d)}
  #wPrio [data-v="Urgente"]:not(.neutre){--m:var(--att);--d:var(--att-d)}
  #wPrio [data-v="Critique"]:not(.neutre){--m:var(--crit);--d:var(--crit-d)}
  /* une tuile qui porte plusieurs gestes (« Actualités non lues ») est une <section class="tuile large"> : chaque geste est un .tuileLien, une ligne
     de 44 px sous un filet à la teinte du module ; jamais un bouton dans un bouton */
  .tuileLien{display:block;width:100%;min-height:var(--h-ctrl);padding:var(--e-2) 0;border:0;border-top:1px solid var(--cerne);background:none;color:var(--encre);font:inherit;text-align:left;cursor:pointer}
  .tuileLien:hover{color:var(--m);text-decoration:underline}
  .tuileLien:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .tuileLien .tuileDe{margin-right:var(--e-2)}
  .tuile:has(>.tuileLien){padding-bottom:var(--e-4)}
  .tuile>.tuileLien:last-of-type{padding-right:calc(var(--e-7) * 2)}
  #infoListeNotes>.crmcard{scroll-margin-top:calc(var(--e-7) + var(--e-5))}   /* l'actualité ouverte depuis l'accueil n'arrive pas sous la barre du haut */
  .tuCourt{display:none}
  @media(min-width:1100px){.acCols{gap:calc(var(--e-6) + var(--e-2))}.tuiles{gap:var(--e-4)}.encoche{font-size:calc(var(--t-xl) + var(--e-1))}}
  @media(min-width:1240px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}.fen .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* lot 3 : dans une fenêtre (680 px au plus), deux colonnes quelle que soit la largeur de l'écran */
  @media(min-width:1440px){.tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
  #mvInfos>.tuiles{grid-template-columns:repeat(auto-fit,minmax(calc(var(--e-7) * 4),1fr))}
  @media(min-width:701px){body.co .contenu{padding-bottom:calc(var(--h-ctrl) + var(--e-1) + var(--e-5) + var(--e-4))}}   /* la bulle de l'IA ne couvre jamais le bas d'un écran */
  @media(max-width:700px){.ligne{padding:var(--e-2) var(--e-3)}.tuileTitre{hyphens:auto}.tuileTitre .ic{width:var(--e-5);height:var(--e-5)}#cats{grid-template-columns:1fr}#cats .tuile{padding-bottom:var(--e-4);padding-right:calc(var(--e-7) + var(--e-5))}.tuile:not(.large){aspect-ratio:auto;min-height:calc(var(--e-7) * 2);padding:var(--e-3) var(--e-3) var(--e-7)}.tuile:not(.large):not(.calme) .tuileDe,.tuDetail{display:none}.tuile>.chip{margin-top:0;max-width:100%}.tuCourt{display:inline}#wPrio,#mmListe{grid-template-columns:1fr}}
  @media(max-width:359px){.tuiles{grid-template-columns:1fr}.tuile.large{grid-column:auto}.tuile:not(.large){aspect-ratio:auto;min-height:calc(var(--e-7) * 2 + var(--e-4))}}
  /* === fin accueil, lot 1 === */
  /* === Listes et Validations, lot 2 (portail moins dense, 21/10/2026) === */
  /* liste et fiche côte à côte (.duo, vdRendre) ; ligne choisie : fond --marque-d et pastille pleine (DESIGN.md) */
  .vdCols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-5)}
  .vdCols.duo{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}
  /* la fiche reste à l'écran quand la liste défile (une longue liste ne la laisse plus en haut de la page) ;
     son bas laisse la place de la bulle de l'IA, comme .contenu (88 px) : collée, elle ne passe plus dessous ; au bout de la fiche, la molette fait défiler la page */
  .vdCols.duo>.vdD,.vdCols.duo>.vdVide{position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top) + var(--e-4));max-height:calc(100dvh - var(--hd-h) - env(safe-area-inset-top) - var(--e-6) - var(--h-ctrl) - var(--e-1) - var(--e-5));overflow:auto}
  /* gabarit des fenêtres du lot 3 (.fenC, .fenP) : le corps défile seul, la rangée de décision reste fixe dessous ; aucun focus caché sous elle (WCAG 2.4.11).
     clip et non hidden : la fiche n'est pas un bloc qui défile, le focus ne la fait pas glisser ; sans overscroll-behavior : au bout du corps, la molette fait défiler la page */
  .vdCols.duo>.vdD{display:flex;flex-direction:column;overflow:clip;padding:0}
  .vdCols.duo>.vdD>.vdCorps{min-height:0;overflow:auto;scroll-padding-block:var(--e-5);padding:var(--e-5)}
  /* le corps prend le focus au clavier : anneau à l'intérieur (l'overflow:clip de la fiche le rognait), comme .tabs-ligne .tab */
  .vdCols.duo>.vdD>.vdCorps:focus-visible{outline-offset:calc(var(--e-1)/-2)}
  /* l'en-tête ne cache jamais ce qui prend le focus dans Validations (fiche collée poussée en bas de page, ou sous sa ligne) */
  html:has(#tValid:not(.hidden)){scroll-padding-top:calc(var(--hd-h) + env(safe-area-inset-top) + var(--e-4))}
  .card .vdGr{margin:var(--e-5) 0 var(--e-2);font:var(--g-fort) var(--t-s)/1.3 var(--f-ui);color:var(--encre2)}
  .card .vdG>.vdGr:first-child,.card .vdFiltre+.vdGr{margin-top:0}
  .vdFiltre{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2) var(--e-3);margin-bottom:var(--e-4);color:var(--encre2)}
  .vdFiltre *{min-width:0;max-width:100%}.vdFiltre :is(select,input){width:auto}
  button.vdL[aria-current="true"],button.vdL[aria-expanded="true"]{background:var(--marque-d)}   /* « button. » : le survol des lignes ne l'efface pas */
  .vdL[aria-current="true"] .rond,.vdL[aria-expanded="true"] .rond{background:var(--m);color:var(--sur-fort)}
  .vdRes{font-size:var(--t-s);color:var(--encre2)}
  .typ{border-radius:var(--r)}
  .vdD,.vdVide{border:1px solid var(--filet-doux);border-radius:var(--r-l);padding:var(--e-5)}
  .vdVide{border:1px dashed var(--filet2);color:var(--encre2);text-align:center}
  .lst .vdD{border:0;border-radius:0;padding:var(--e-1) var(--e-4) var(--e-4)}
  .vdPh,.vdNote,.vdMotif{margin:var(--e-2) 0 0;color:var(--encre2);overflow-wrap:anywhere}
  .vdNote{font-size:var(--t-s)}
  .vdMotif{color:var(--encre)}
  .vdS{margin-top:var(--e-4)}
  .card .vdT{margin:0;font-size:var(--t-l);line-height:1.25}
  .vdS :is(h3,h4){margin:0 0 var(--e-2);font-size:var(--t-m)}
  .vdS .ligne{min-height:var(--h-ctrl)}
  .vdVal{flex:none;font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
  .vdCorps>.note,.vdPj{margin:var(--e-3) 0 0}
  .vdPj{display:flex;align-items:center;gap:var(--e-2)}
  .vdDec{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-top:var(--e-5);padding-top:var(--e-4);border-top:1px solid var(--filet-doux)}
  .vdDec .valAct{margin-left:auto}
  /* la bulle ne recouvre jamais un bouton de décision (audit du 23/10/2026) : côte à côte, la rangée est le pied fixe de la fiche (comme .fenP) ;
     au clavier, le focus s'arrête au-dessus de la bulle (marge basse de .contenu) ; sur téléphone, toute commande de la fiche s'arrête au-dessus de la barre du bas */
  .vdCols.duo>.vdD .vdDec{flex:none;margin:0;padding:var(--e-4) var(--e-5) var(--e-5)}
  /* l'état de la retenue (r6Poser) s'insère dans .valAct : le groupe passe à la ligne au lieu de dépasser la fiche */
  .vdCols.duo>.vdD .valAct{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .vdDec button{scroll-margin-bottom:calc(var(--h-ctrl) + var(--e-1) + var(--e-5) + var(--e-4))}
  @media(max-width:700px){.vdD :is(a,button,summary,input,select,textarea){scroll-margin-bottom:calc(var(--h-barre) + var(--e-2))}}
  .vdPlus{margin-top:var(--e-3)}
  .vdAide{margin-top:var(--e-6)}
  .vdAide h2{margin:var(--e-4) 0 var(--e-1);font-size:var(--t-m)}
  .mesBascule{min-height:var(--h-ctrl)}
  .astQui{display:flex;flex-direction:column;align-items:flex-end;gap:var(--e-1);text-align:right}
  /* === fin listes et Validations, lot 2 === */
  /* === Secteurs de la semaine (secteurs.js) === */
  .secGrille{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:var(--e-2)}
  .secGrille .day{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--e-1);min-height:72px}
  .secGrille .secMoment{align-self:center;text-align:left;padding-right:var(--e-2)}
  #secTitre,#secEqTitre,#tSecteurs .chip,#dlgSecteur .drline span{white-space:normal;overflow-wrap:anywhere}
  #tSecteurs .chip.sa{border-radius:var(--r)}
  .secLigne{display:flex;align-items:center;gap:var(--e-3);min-height:var(--h-ctrl);padding:var(--e-1) 0}
  .secLigne+.secLigne,.secLg{border-top:1px solid var(--filet)}
  .secLigne.editable,.secEq{border:1px solid var(--filet);border-radius:var(--r)}
  .secLigne.editable{margin-top:var(--e-2);padding:var(--e-1) var(--e-2);cursor:pointer}
  .secLigne[role="button"]:focus-visible,.secGroupe>summary:focus-visible{outline:2px solid transparent;box-shadow:var(--anneau);border-radius:var(--r)}
  .secLigne .secMoment{flex:0 0 5.5em;font-size:var(--t-s);color:var(--encre3)}
  .secVal,.secLg{display:flex;flex-wrap:wrap;align-items:center}
  .secVal{gap:var(--e-1);min-width:0}
  .secVal .btn-lien,.secEq .btn-lien,.secLg .btn-sm{min-width:var(--h-ctrl)}
  #dlgSecteur[open]{display:flex;flex-direction:column;overflow:hidden}
  .secEtages{flex:1;min-height:0;overflow:auto;padding:0 var(--e-1)}
  .secGroupe>summary{padding:var(--e-3) 0;cursor:pointer;font-weight:var(--g-fort)}
  .secLg{gap:var(--e-2);padding:var(--e-2) 0}
  .secLg b{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
  .secFiltres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,220px));gap:0 var(--e-3);align-items:start}
  .secEq{position:relative;background:var(--surf)}
  .secEq table{table-layout:fixed}
  .secEq th{text-align:center;background:var(--surf)}
  .secEq tbody th,.secEq thead th[rowspan]{position:sticky;left:0;z-index:1;text-align:left}
  .secEq th[rowspan]{width:136px}
  .secEq tbody th{text-transform:none;letter-spacing:0;font-size:var(--t-s);color:var(--encre);border-bottom:1px solid var(--filet);vertical-align:top;overflow-wrap:anywhere}
  .secEq tr:last-child th{border-bottom:0}
  .secEq td,.secEq thead tr+tr th{padding:var(--e-2) var(--e-1)}
  #tSecteurs td .chip{display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:1px 0;padding-inline:var(--e-1);max-width:100%;overflow:hidden;vertical-align:top}
  .secEq thead{position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top));z-index:2}
  @media(max-width:1199px){.secEq{overflow:auto;max-height:80dvh}.secEq table{min-width:900px}.secEq thead{top:0}}
  .secJour,.secEq th[colspan],.secEq thead tr+tr th:nth-child(odd){border-left:1px solid var(--filet)}
  .secPar,.secSuite{display:block}
  .secPar{font-size:var(--t-xs);font-weight:var(--g-normal);color:var(--encre3)}
  @media(min-width:701px){#secEqPlus>summary{display:none}}
  @media(max-width:700px){
    #dlgSecteur{height:100dvh;max-height:100dvh;border-radius:0}
    .secLg>.secVal{flex-basis:100%}
    .secFiltres{grid-template-columns:1fr}
  }
  /* === R6 annuler une décision === */
  /* Lot R6 (revue de design du 02/10/2026) : gabarits de informations.js (deciderAvecDelai). Le bandeau est un
     message de #toastZone : il hérite de sa place (au-dessus de la barre du téléphone R12, marge basse de
     l'encoche comprise, hors du tampon de l'assistant) et de l'entrée .toast, déjà coupée sous
     prefers-reduced-motion ; aucun autre mouvement n'est ajouté. Jetons seulement, deux thèmes par les jetons. */
  .r6Bandeau{cursor:default;display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2) var(--e-3);padding:var(--e-2) var(--e-2) var(--e-2) var(--e-4)}
  .r6Txt{font-weight:var(--g-fort)}
  .r6Gestes{display:flex;gap:var(--e-2);margin-left:auto}
  .r6Reste{flex:1;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
  /* « Annuler » est le geste principal (plein) ; « Envoyer maintenant » reste un contour */
  .r6B{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--h-ctrl);min-width:var(--h-ctrl);padding-inline:var(--e-3);border:1px solid currentColor;border-radius:var(--r);background:none;color:inherit;font:inherit;font-size:var(--t-s);font-weight:var(--g-fort);cursor:pointer}
  .r6B.r6BAnnul{background:var(--surf);border-color:var(--surf);color:var(--encre)}
  .r6B:focus-visible{outline:2px solid var(--surf);outline-offset:2px}
  /* le raccourci clavier, écrit sur le bouton : une touche, pas un second libellé */
  .r6Touche{font-size:var(--t-xs);font-weight:var(--g-normal);line-height:1.5;border:1px solid var(--filet);border-radius:var(--r);padding-inline:var(--e-1);color:var(--encre2)}
  /* la ligne en attente d'envoi : ses boutons restent visibles mais ne répondent plus ; l'état porte un filet
     en tirets (provisoire), ce qui le distingue de la pastille pleine d'une ligne déjà traitée */
  .r6Retenue [data-r6]:not([data-r6="champ"]){opacity:.5;cursor:not-allowed}
  .r6Etat{display:inline-flex;align-items:center;grid-column:1/-1;font-size:var(--t-s);font-weight:var(--g-fort);border:1px dashed currentColor;border-radius:var(--r);padding:var(--e-1) var(--e-2);background:var(--att-d);color:var(--att)}
  .carteBord>.r6Etat{margin:var(--e-2) var(--e-2) 0 0;vertical-align:middle}
  /* téléphone : le nom de la demande, le compte à rebours dessous (lot 2 : un nom long le chevauchait), puis les deux boutons à parts égales (le pouce), sans raccourci clavier */
  @media(max-width:700px){
    .r6Bandeau{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--e-3)}
    .r6Txt,.r6Reste{grid-column:1/-1}
    .r6Gestes{grid-column:1/-1;display:grid;grid-template-columns:inherit;margin:0}
    .r6B{padding-inline:var(--e-2)}
    .r6Touche{display:none}
  }
  /* hors téléphone, #toastZone ne compte pas l'encoche basse : le bandeau la réserve lui-même. Tant que la zone
     centrée peut atteindre la pastille de l'assistant (coin bas droit), le bandeau passe au-dessus d'elle. */
  @media(min-width:701px){
    .r6Bandeau{margin-bottom:env(safe-area-inset-bottom,0px)}
    @media(max-width:1023px){body:has(>#bulleChat:not(.hidden)) .r6Bandeau{margin-bottom:calc(var(--h-ctrl) + var(--e-4) + env(safe-area-inset-bottom,0px))}}
  }
  /* lot 2 : Échap ne défait rien dans une fenêtre (il la ferme) : ni écrit ni dit */
  dialog .r6Echap,dialog .r6Touche{display:none}
  /* === fin R6 === */