:root{
    /* ==== Charte d'interface (note 2026-09-25-charte-interface §2, sur la
       base des jetons de 2026-09-24-refonte-visuelle §2.2, avec la couche
       de marque ajustee par 2026-09-25-personnalisation-marque-client §3.1)
       ==== */

    /* ---- Fonds et surfaces ---- */
    --fond:#F3F6FA; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF2F7;
    --bordure:#DEE5ED; --bordure-douce:#EDF1F5; --bordure-champ:#8A919C;

    /* ---- Cadre sombre (barre laterale, barre superieure) ---- */
    --nav:#132542; --nav-entete:#0E1E36; --topbar:#1C3252; --nav-champ:#132542;
    --nav-texte:#CDDAEA; --nav-texte-2:#8791A5; --nav-trait:#22385C;

    /* ---- Texte (3 niveaux) ---- */
    --texte:#19222E; --texte-2:#5B6A7D; --texte-3:#6A7687; --texte-inverse:#FFFFFF;

    /* ---- Marque : SEULE couche surchargeable par client (note
       personnalisation-marque-client §2-3). Toute regle qui doit prendre la
       couleur du client lit ces jetons, et uniquement ceux-la. --guideur-or
       (logo Guideur) n'est JAMAIS surcharge. ---- */
    --marque:#214E95; --marque-texte:#FFFFFF; --marque-survol:#1A3F7A;
    --marque-doux:#E6EEFE; --marque-filet:#214E95;
    --accent:#D99847; --accent-texte:#19222E;
    --guideur-or:#D99847;

    /* ---- Etats ---- */
    --ok:#1C995F; --ok-texte:#206C4D; --ok-doux:#E6F5ED;
    --restant:#F7DADD;
    --alerte:#D53F4C; --alerte-doux:#FFEDEE;
    --attention:#E19A4A; --attention-texte:#A35A1B; --attention-doux:#FFF9EF; --attention-bord:#F3B968;
    --actif:#2B64C4; --actif-doux:#E7EEFA;
    --neutre:#8A919C; --neutre-texte:#5F6774; --neutre-doux:#EEF0F3;
    --focus:#2B64C4;

    /* ---- Formes ---- */
    --r-sm:6px; --r:8px; --r-lg:10px; --r-pill:999px;
    --ombre-1:0 1px 2px rgba(19,37,66,.05); --ombre-2:0 6px 18px rgba(19,37,66,.12);
    --h-barre-basse:64px;

    /* ---- Espacements (base 4) ---- */
    --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px;

    /* ---- Typographie ---- */
    --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:16px; --t-lg:20px; --t-xl:24px; --t-chiffre:28px;
    --g-normal:400; --g-moyen:500; --g-fort:600; --g-titre:700;
    --li-serre:1.25; --li-normal:1.45;
    --h-controle:44px;

    /* ---- Alias de compatibilite (anciens noms, ~90 usages en ligne dans
       index.html) -- pas de "--accent:var(--marque)" : l'ancien --accent
       (bleu marine) a ete remplace partout par --marque directement,
       "--accent" designe desormais uniquement la couleur 2 du client. ---- */
    --bg:var(--fond); --card:var(--surface); --ink:var(--texte); --muted:var(--texte-2);
    --line:var(--bordure); --accent-2:var(--accent);
    --warn:var(--attention-texte); --bad:var(--alerte); --idle:var(--neutre-texte);
    --incomplet:var(--actif); --radius:var(--r-lg);

    /* picto Voussoirs (champ Oui/Non/Incident) uniquement : rouge plus fonce
       que --bad pour "Non" (etat par defaut, le plus alarmant sur un
       voussoir), orange plus clair que --warn pour "Incident" (deja
       signale, donc moins urgent visuellement) -- inverse du code couleur
       standard oui/non/incident (.badge), choix assume par le metier.
       NE PAS UNIFIER avec les tons d'etat ci-dessus. */
    --rouge-fonce:#8B1E1E; --orange-clair:#F0A868;
  }
  @media (min-width:860px){ :root{ --t-base:14px; } }
  *{box-sizing:border-box;}
  body{margin:0;font-family:var(--police);font-size:var(--t-base);line-height:var(--li-normal);
       background:var(--fond);color:var(--texte);-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{color:var(--texte);line-height:var(--li-serre);margin:0 0 var(--e-2);}
  h2{font-size:var(--t-lg);font-weight:var(--g-titre);}
  h3{font-size:var(--t-md);font-weight:var(--g-fort);}
  h4{font-size:var(--t-sm);font-weight:var(--g-fort);color:var(--texte-2);}
  b{font-weight:var(--g-fort);}
  .num{font-feature-settings:"tnum";}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  /* mobile par defaut (colonne unique centree, comme avant) ; au-dela de
     860px (tablette large / bureau) la colonne s'elargit et la grille de
     tuiles se reorganise toute seule -- meme balisage, pas de JS distinct
     pour desktop, juste ces breakpoints. */
  #app{min-height:100vh;padding-bottom:90px;}
  /* barre superieure -- note 2026-09-25-charte-interface §3.2 : toujours
     --topbar (sombre), meme au-dela de 860px -- pas de bascule vers un
     fond clair sur bureau. */
  header.topbar{background:var(--topbar);color:#fff;padding:0 var(--e-4);height:56px;
    display:flex;align-items:center;gap:var(--e-3);position:sticky;top:0;z-index:10;}
  .topbar-marque{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;}
  .topbar-marque b{font-size:17px;font-weight:700;}
  .topbar-sous-titre{font-size:12px;color:var(--nav-texte);font-weight:400;}
  /* logo(s) du client dans la barre superieure -- note personnalisation-
     marque-client §5.2, uniquement pour une session cliente (role client). */
  .topbar-logo-client{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .topbar-logo-client img{height:32px;max-width:96px;object-fit:contain;}
  .topbar-logo-client img.topbar-logo-client-partenaire{height:24px;max-width:76px;opacity:.9;}
  header.topbar .role-tag{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.5px;flex:0 0 auto;}
  .btn-back{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0 8px;flex:0 0 auto;}
  main{max-width:720px;margin:0 auto;padding:16px;}
  /* carte : jamais de cadre dans un cadre (releve §1.2 B de refonte-visuelle,
     11 endroits) -- une carte imbriquee devient une simple section. */
  .card{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-lg);
        box-shadow:var(--ombre-1);padding:16px;margin-bottom:14px;}
  .card .card{border:0;border-top:1px solid var(--bordure);border-radius:0;box-shadow:none;
              background:transparent;padding:var(--e-3) 0 0;margin:var(--e-3) 0 0;}
  .card > h3:first-child{margin-top:0;}
  .grid-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  @media (min-width:860px){
    main{max-width:1040px;}
  }
  .menu-tile{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-lg);
             box-shadow:var(--ombre-1);padding:22px 14px 18px;text-align:center;cursor:pointer;}
  .menu-tile:hover,.menu-tile:active{background:var(--surface-2);}
  .card .menu-tile{border:0;box-shadow:none;background:var(--surface-2);}
  .menu-tile .ic{width:28px;height:28px;display:block;margin:0 auto 12px;color:var(--marque);}
  .menu-tile-titre{font-weight:600;font-size:15px;line-height:1.25;}
  .menu-tile-detail{font-weight:400;margin-top:3px;line-height:1.3;}
  /* socle Admin/Super Admin (guideur-architecture-v2.md) : meme composant
     .menu-tile, mais en liste a une seule colonne plutot qu'en grille --
     moins de destinations a reconnaitre d'un coup d'oeil. */
  .menu-list{display:grid;grid-template-columns:1fr;gap:10px;}
  /* Journal & audit : separe visuellement du reste (bordure + petit libelle)
     pour limiter les clics accidentels sur des actions sensibles (corbeille,
     historique, journal d'activite). */
  .menu-list-gouvernance{margin-top:14px;padding-top:16px;border-top:1px solid var(--bordure);}
  .menu-list-gouvernance-titre{font-size:12px;font-weight:600;color:var(--texte-2);margin:0 0 0 2px;}
  .ic{width:24px;height:24px;display:block;flex:0 0 auto;}
  .row-icon{width:34px;height:34px;border-radius:9px;background:var(--marque-doux);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .row-icon .ic{width:18px;height:18px;color:var(--marque);}
  .row-icon-oui{background:var(--ok-doux);} .row-icon-oui .ic{color:var(--ok);}
  .row-icon-non{background:var(--attention-doux);} .row-icon-non .ic{color:var(--attention-texte);}
  .row-icon-incident{background:var(--alerte-doux);} .row-icon-incident .ic{color:var(--alerte);}
  .site-row-left{display:flex;align-items:center;gap:12px;min-width:0;}
  .site-row-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .veh-onglets-icones{display:flex;align-items:center;gap:5px;}
  .veh-onglet-icone .ic{width:16px;height:16px;}
  .badge-notif{position:absolute;top:-4px;right:-4px;background:var(--alerte);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surface);}
  label{display:block;font-size:var(--t-sm);font-weight:var(--g-moyen);margin:var(--e-3) 0 var(--e-1);color:var(--texte-2);}
  label.label-photo{font-weight:var(--g-fort);color:var(--texte);}
  input,select,textarea{width:100%;min-height:40px;padding:0 var(--e-3);border:1px solid var(--bordure-champ);
    border-radius:var(--r);font:inherit;font-size:16px;background:var(--surface);color:var(--texte);}
  textarea{min-height:80px;padding:var(--e-2) var(--e-3);resize:vertical;}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--actif-doux);}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px;accent-color:var(--marque);}
  input[type=file]{min-height:0;padding:var(--e-2) 0;border:0;}
  /* bouton principal : --marque (note charte-interface §4.6). ".gold"
     redevient un bouton principal (decision D3 du 24/09, confirmee §4.6) :
     l'or/--accent reste reserve au logo/avatar/icone active, jamais a un
     bouton -- deux couleurs de bouton en concurrence faisaient partie du
     "charge" (refonte-visuelle §1.2 A). */
  button.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
    min-height:var(--h-controle);background:var(--marque);color:var(--marque-texte);border:1px solid transparent;
    border-radius:var(--r);padding:0 var(--e-4);font:inherit;font-size:15px;
    font-weight:var(--g-fort);cursor:pointer;width:100%;margin-top:12px;}
  button.btn:hover{background:var(--marque-survol);}
  button.btn.secondary{background:var(--surface);color:var(--texte);border-color:var(--bordure);font-weight:var(--g-moyen);}
  button.btn.secondary:hover{background:var(--surface-2);}
  button.btn.gold{background:var(--marque);color:var(--marque-texte);}
  /* discret : lien d'action ("Tout voir", "Voir l'historique") -- nouveau,
     pas encore cable a un ecran avant le lot 3/C. */
  button.btn.discret{background:none;border-color:transparent;color:var(--marque);
    width:auto;min-height:0;padding:var(--e-1) 0;font-size:var(--t-sm);font-weight:var(--g-moyen);margin-top:0;}
  /* danger : pas encore cable (23 boutons "supprimer" en style ligne,
     nettoyage prevu au lot 4 de refonte-visuelle -- hors perimetre ici). */
  button.btn.danger{background:var(--surface);color:var(--alerte);border-color:var(--bordure);}
  button.btn.danger:hover{background:var(--alerte-doux);border-color:var(--alerte);}
  /* boutons Oui/Non/Incident (voussoir) du compte-rendu, selectionne :
     couleur par statut plutot que le "gold" generique (cf. --rouge-fonce/
     --orange-clair dans :root) -- ne s'applique qu'a selectStatut()/
     selectStatutPersonnalise() qui posent cette classe, pas aux champs
     "boutons" generiques (toggleBoutonChampPersonnalise, reste en marque).*/
  button.btn.voussoir-selectionne[data-statut="oui"]{background:var(--ok);color:#fff;border-color:var(--ok);}
  button.btn.voussoir-selectionne[data-statut="non"]{background:var(--rouge-fonce);color:#fff;border-color:var(--rouge-fonce);}
  button.btn.voussoir-selectionne[data-statut="incident"]{background:var(--orange-clair);color:#20242c;border-color:var(--orange-clair);}
  button.btn.small{width:auto;min-height:36px;padding:0 var(--e-3);font-size:var(--t-sm);margin-top:0;}
  button.btn:disabled{opacity:.45;cursor:not-allowed;}
  .row{display:flex;gap:10px;}
  .row > *{flex:1;}
  /* pastilles/pilules : la refonte complete (pastille()/badgeStatut(), note
     2026-09-22-refonte-statuts) est hors perimetre de ce lot -- seules les
     majuscules forcees disparaissent ici (releve refonte-visuelle §1.2 C /
     §3.7), et ".en_cours" passe du dore au bleu --actif (n'a jamais ete un
     etat, juste une reutilisation opportuniste de la couleur de marque). */
  .badge{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;color:#fff;}
  .badge.oui{background:var(--ok);} .badge.non{background:var(--attention-texte);} .badge.incident{background:var(--alerte);}
  .badge.a_venir{background:var(--neutre-texte);} .badge.en_cours{background:var(--actif);color:#fff;}
  .site-row{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);
            padding:10px 0;min-height:var(--h-controle);border-bottom:1px solid var(--bordure-douce);}
  .site-row:last-child{border-bottom:none;}
  .site-row[onclick]:hover{background:var(--surface-2);}
  .checklist-item{display:flex;align-items:center;gap:10px;padding:8px 0;}
  .checklist-item input[type=checkbox],.checklist-item input[type=radio]{width:20px;height:20px;flex:0 0 auto;}
  .checklist-item span{flex:1 1 auto;}
  .pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle;margin-left:4px;}
  .pill-requis{background:var(--alerte);color:#fff;}
  .pill-optionnel{background:var(--fond);color:var(--texte-2);border:1px solid var(--bordure);}
  .chips-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
  .chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:22px;border:1px solid var(--bordure-champ);background:var(--surface);font-size:14px;cursor:pointer;box-sizing:border-box;text-align:center;}
  .chip input{position:absolute;opacity:0;width:0;height:0;}
  .chip:has(input:checked){background:var(--marque);color:#fff;border-color:var(--marque);}
  .onglets-cr-bar{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;}
  .onglet-cr{flex:0 0 auto;min-width:68px;min-height:56px;padding:8px 14px;border-radius:var(--r-lg);border:1px solid var(--bordure);background:var(--surface);font-size:12px;font-weight:600;color:var(--texte-2);white-space:nowrap;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;}
  .onglet-cr .ic{width:22px;height:22px;color:var(--texte-2);}
  .onglet-cr-actif{border-color:var(--marque);color:var(--marque);background:var(--marque-doux);}
  .onglet-cr-actif .ic{color:var(--marque);}
  .onglet-cr-complet::after{content:"";position:absolute;top:5px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid #fff;}
  /* bascule Carte/Liste de "Mon parc" (etape 5, refonte-espace-client) */
  .btn-actif{border-color:var(--marque);color:var(--marque);background:var(--marque-doux);}
  /* barre laterale -- note 2026-09-25-charte-interface §3.1 : sombre,
     258px, en-tete + bloc utilisateur en bas. Tiroir glissant sur mobile ;
     a partir de 860px, barre laterale toujours depliee (retour terrain,
     test Intervention 16/09 -- cf. media query plus bas). Le hamburger
     disparait a toutes les tailles : remplace par "Plus" dans la barre
     basse (telephone) et inutile sur bureau (barre laterale deja visible).
  */
  .btn-hamburger{display:none;}
  .btn-notifs,.btn-recherche-mobile{background:none;border:none;color:#fff;cursor:pointer;padding:4px 8px;position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
  .btn-notifs .ic,.btn-recherche-mobile .ic{width:20px;height:20px;}
  .drawer-overlay{position:fixed;inset:0;background:rgba(9,15,28,.55);z-index:900;opacity:0;pointer-events:none;transition:opacity .18s;}
  .drawer-overlay.drawer-ouvert{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;left:0;bottom:0;width:258px;max-width:85vw;background:var(--nav);
    color:var(--nav-texte);z-index:901;transform:translateX(-100%);transition:transform .2s ease-out;
    overflow-y:auto;box-shadow:var(--ombre-2);display:flex;flex-direction:column;}
  .drawer.drawer-ouvert{transform:translateX(0);}
  .drawer-header{padding:var(--e-4) var(--e-4) var(--e-3);background:var(--nav-entete);
    color:#fff;display:flex;align-items:center;gap:var(--e-2);flex:0 0 auto;}
  .drawer-header b{font-size:16px;font-weight:700;}
  .marque-logo{width:24px;height:24px;border-radius:var(--r-sm);background:var(--guideur-or);flex:0 0 auto;}
  .drawer-section{padding:var(--e-2) 0;border-bottom:1px solid var(--nav-trait);}
  .drawer-section:last-child{border-bottom:none;}
  .drawer-section-scroll{flex:1 1 auto;overflow-y:auto;}
  .drawer-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
    color:var(--nav-texte);font-size:14px;font-weight:500;border-radius:0;}
  .drawer-item:hover{background:rgba(255,255,255,.06);color:#fff;}
  .drawer-item.drawer-item-actif{background:var(--marque);color:#fff;font-weight:700;
    margin:0 var(--e-2);border-radius:var(--r);padding-left:14px;width:calc(100% - 2 * var(--e-2));}
  .drawer-item .ic{width:18px;height:18px;flex:0 0 auto;color:var(--nav-texte-2);}
  .drawer-item.drawer-item-actif .ic{color:var(--guideur-or);}
  .drawer-titre-section{padding:var(--e-2) 16px 2px;font-size:11px;color:var(--nav-texte-2);font-weight:500;}
  .drawer-compteur{position:static !important;margin-left:auto;border:0 !important;}
  .drawer-section-utilisateur{display:flex;align-items:center;gap:var(--e-2);padding:var(--e-3) var(--e-4);flex:0 0 auto;}
  .drawer-section-utilisateur b{color:#fff;font-size:13px;}
  .drawer-user-sous{font-size:11px;color:var(--nav-texte-2);}
  .avatar{width:28px;height:28px;border-radius:50%;background:var(--guideur-or);color:var(--texte);
    display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}
  @media (min-width:860px){
    .drawer-overlay{display:none;}
    .drawer{transform:none;box-shadow:none;border-right:1px solid var(--nav-trait);transition:none;}
    header.topbar{margin-left:258px;}
    main{margin-left:258px;margin-right:auto;}
    .barre-basse{display:none !important;}
  }

  /* recherche globale -- note charte-interface §3.3. Un seul champ, dans
     la barre superieure : visible en ligne des 860px, cache et ouvert en
     plein ecran par l'icone loupe en-dessous. */
  .btn-recherche-mobile{display:inline-flex;}
  .topbar-recherche{display:none;}
  .topbar-recherche-entete{display:flex;align-items:center;gap:var(--e-2);}
  .topbar-recherche-champ{position:relative;flex:1 1 auto;display:flex;align-items:center;}
  .topbar-recherche-champ .ic{position:absolute;left:10px;width:16px;height:16px;color:var(--nav-texte-2);pointer-events:none;}
  .topbar-recherche-champ input{padding-left:34px;}
  .topbar-recherche-raccourci{display:none;}
  .btn-fermer-recherche{background:none;border:none;color:var(--texte);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;flex:0 0 auto;}
  #recherche-universelle-resultats{margin-top:var(--e-2);}
  @media (min-width:860px){
    .btn-recherche-mobile{display:none;}
    .topbar-recherche{display:block;position:relative;width:280px;flex:0 0 auto;margin:0 var(--e-3) 0 auto;}
    .topbar-recherche-champ input{background:var(--nav-champ);border-color:var(--nav-trait);color:#fff;
      height:36px;font-size:14px;}
    .topbar-recherche-champ input::placeholder{color:var(--nav-texte-2);}
    .topbar-recherche-champ input:focus{box-shadow:0 0 0 2px rgba(255,255,255,.25);}
    .topbar-recherche-raccourci{display:inline-block;position:absolute;right:10px;font-size:11px;
      color:var(--nav-texte-2);border:1px solid var(--nav-trait);border-radius:4px;padding:0 5px;pointer-events:none;}
    .btn-fermer-recherche{display:none;}
    #recherche-universelle-resultats:empty{display:none;}
    #recherche-universelle-resultats:not(:empty){position:absolute;top:44px;left:0;right:0;
      background:var(--surface);color:var(--texte);border-radius:var(--r-lg);box-shadow:var(--ombre-2);
      max-height:60vh;overflow-y:auto;padding:var(--e-2) var(--e-3);z-index:20;}
  }
  .topbar-recherche.ouvert{display:block;position:fixed;inset:0;z-index:950;background:var(--surface);
    color:var(--texte);padding:var(--e-4);overflow-y:auto;}
  .topbar-recherche.ouvert .topbar-recherche-champ .ic{color:var(--texte-3);}

  /* barre de navigation basse (telephone, note charte-interface §3.4) */
  .barre-basse{display:none;}
  @media (max-width:859px){
    .barre-basse{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
      height:calc(var(--h-barre-basse) + env(safe-area-inset-bottom,0px));
      padding-bottom:env(safe-area-inset-bottom,0px);
      background:var(--surface);border-top:1px solid var(--bordure);}
    .barre-basse a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:3px;color:var(--texte-3);font-size:11px;font-weight:500;text-decoration:none;position:relative;}
    .barre-basse a .ic{width:22px;height:22px;}
    .barre-basse a[aria-current="page"]{color:var(--marque);font-weight:700;}
    #app{padding-bottom:calc(var(--h-barre-basse) + env(safe-area-inset-bottom,0px) + 16px);}
    /* les barres de validation collantes des formulaires se posent
       au-dessus de la barre basse au lieu d'etre cachees dessous --
       indispensable : sans elle, "Valider" d'un compte-rendu passerait
       sous la barre basse. */
    .form-submit-sticky{bottom:calc(var(--h-barre-basse) + env(safe-area-inset-bottom,0px));}
  }
  .form-submit-sticky{position:sticky;bottom:0;background:var(--fond);padding:12px 0 4px;margin-top:14px;}
  .section-titre{display:flex;align-items:center;gap:10px;margin:0;}
  .section-titre .ic{width:22px;height:22px;color:var(--marque);flex:0 0 auto;}
  .rappel-doc-card{background:var(--attention-doux);border-color:#F1D3B0;}
  #map{height:360px;border-radius:var(--r-lg);}
  #tournee-map{height:300px;border-radius:var(--r-lg);}
  #se-map{height:360px;border-radius:var(--r-lg);}
  #tournees-map{height:320px;border-radius:var(--r-lg);}
  .muted{color:var(--texte-2);font-size:var(--t-sm);}
  .error-msg{color:var(--alerte);font-size:13px;margin-top:6px;}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--texte);color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;z-index:100;}
  .toast-riche{display:flex;align-items:center;gap:10px;max-width:92%;border-radius:12px;padding:12px 16px;}
  .toast-riche .ic{width:20px;height:20px;color:var(--ok);flex:0 0 auto;}
  .toast-riche .toast-annuler{background:none;border:none;color:var(--accent);font-weight:700;font-size:14px;cursor:pointer;padding:0;margin-left:4px;flex:0 0 auto;}
  /* z-index tres au-dessus des panneaux Leaflet (jusqu'a 1000 pour
     .leaflet-control) : la carte de tournee-detail, deja re-rendue derriere
     cet overlay au moment ou il apparait, ne doit jamais transparaitre. */
  .cloture-overlay{position:fixed;inset:0;background:var(--fond);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;}
  .cloture-cercle{width:84px;height:84px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;}
  .step-current{border:2px solid var(--accent);}
  .drag-handle{cursor:grab;touch-action:none;padding:6px 10px;font-size:20px;color:var(--texte-2);user-select:none;}
  .etape-drag-item.cible-depot{border-top:3px solid var(--accent);}
  .photo-preview{width:100%;height:70px;object-fit:cover;border-radius:8px;margin-top:6px;background:#eee;}
  /* zone tactile pour un champ photo (legacy et moteur generique) : habille
     un <input type=file> existant sans le remplacer, cf. tactiliserChampsPhotos()
     -- l'input reste fonctionnel et couvre toute la zone (opacity 0, au-dessus
     visuellement), seul l'habillage change. */
  .champ-photo-tactile{position:relative;margin-top:6px;border-radius:var(--r-lg);overflow:hidden;}
  .champ-photo-tactile input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;}
  .champ-photo-tactile-zone{border:2px dashed var(--marque);border-radius:var(--r-lg);padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--marque);font-weight:600;font-size:14px;background:var(--surface);}
  .champ-photo-tactile-zone .ic{width:26px;height:26px;}
  .champ-photo-tactile-apercu{position:relative;line-height:0;}
  .champ-photo-tactile-apercu img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:var(--r-lg);background:#eee;}
  .champ-photo-tactile-reprendre{position:absolute;bottom:8px;right:8px;background:rgba(30,36,51,.75);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;z-index:1;}
  /* §4.1 en-tete de page (note charte-interface, corrigee par
     2026-09-25-accueil-corrections §1). L'action principale reste un
     bouton compact texte+icone sur ordinateur ET sur telephone (juste un
     libelle plus court sur telephone) -- plus de bouton carre icone
     seule, qui affichait l'icone "plus" (trois points, reservee a "Plus"
     de la barre basse) sans aucun sens a cote. */
  .page-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2) var(--e-3);margin-bottom:18px;}
  /* le bouton d'action (flex:0 0 auto, largeur fixe a son texte) ne doit
     jamais pouvoir ecraser le bloc titre : ce dernier garde une largeur
     minimale lisible (220px, en dessous de laquelle "Bonjour, ..." et la
     date se retrouvaient a un mot par ligne -- releve le 25/09 sur
     staging) et le bouton passe sur sa propre ligne (flex-wrap) plutot que
     de forcer le texte a retrecir davantage. */
  .page-entete-texte{flex:1 1 220px;min-width:220px;}
  .page-surtitre{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--marque);font-weight:700;}
  .page-titre{font-size:26px;font-weight:500;color:var(--texte);margin:2px 0 0;overflow-wrap:break-word;}
  .page-resume{font-size:13px;color:var(--texte-2);margin-top:4px;overflow-wrap:break-word;}
  /* selecteur au moins aussi fort que "button.btn" (0-1-1), sinon son
     width:100%/margin-top:12px l'emporte sur ".page-action" (0-1-0) --
     c'est exactement ce qui empechait ce bouton de jamais retrecir,
     releve le 25/09 sur staging (accueil-corrections §1). Plus petit que
     le bouton plein standard (--h-controle, 44px) : sur la capture
     envoyee a Cowork, l'action de l'en-tete est un bouton discret en
     haut a droite, pas un bouton pleine mesure. */
  button.btn.page-action{width:auto;min-height:36px;height:36px;padding:0 var(--e-3);
    font-size:var(--t-sm);margin-top:0;flex:0 0 auto;white-space:nowrap;align-self:center;}
  button.btn.page-action .ic{width:16px;height:16px;}
  /* libelle court reserve au telephone (bascule CSS pure, jamais choisi en
     JS -- boutonActionHtml() ecrit toujours les deux). */
  .page-action .libelle-court{display:none;}
  @media (max-width:859px){
    .page-titre{font-size:22px;}
    button.btn.page-action{height:36px;padding:0 var(--e-3);}
    .page-action .libelle-long{display:none;}
    .page-action .libelle-court{display:inline;}
  }

  /* §4.3 bandeau d'alerte (synchronisation, et tout avertissement). Texte
     fonce sur --attention (6,81:1) : la carte precedente posait du texte
     blanc sur ce meme orange (2,35:1), sous le minimum WCAG 4,5:1. */
  .bandeau-alerte{display:flex;align-items:center;gap:12px;background:var(--attention-doux);
    border:1px solid var(--attention-bord);border-radius:var(--r);padding:10px 12px;margin-bottom:16px;}
  .bandeau-alerte .ic-boite{width:32px;height:32px;border-radius:var(--r-sm);background:#FDE9CC;
    color:var(--attention-texte);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .bandeau-alerte b{font-size:13px;color:var(--texte);}
  .bandeau-alerte small{font-size:12px;color:var(--texte-2);}
  .bandeau-alerte .actions{margin-left:auto;display:flex;gap:8px;}
  .btn-attention{background:var(--attention);color:var(--texte);border:none;border-radius:var(--r);
    padding:0 var(--e-3);min-height:var(--h-controle);font-weight:var(--g-fort);cursor:pointer;}
  .btn-attention-contour{background:transparent;color:var(--attention-texte);border:1px solid var(--attention-texte);
    border-radius:var(--r);padding:0 var(--e-3);min-height:var(--h-controle);font-weight:var(--g-moyen);cursor:pointer;}
  @media (max-width:859px){ .bandeau-alerte{flex-wrap:wrap;} .bandeau-alerte .actions{flex-direction:column;width:auto;} }

  /* titre de section (note accueil-corrections §3) : eyebrow "VUE
     D'ENSEMBLE" (reprend .page-surtitre) + intitule "Ce qui m'attend" --
     reutilise sectionEnteteHtml(), pas de nouveau composant. */
  .section-entete{margin:0 0 10px;}
  .section-entete .page-surtitre{margin-bottom:2px;}
  .section-entete h3{margin:0;font-size:16px;font-weight:600;color:var(--texte);}

  /* §4.4 cartes de chiffres ("Ce qui m'attend") */
  .kpi-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px;}
  .kpi{position:relative;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-lg);
    padding:14px;cursor:pointer;box-shadow:var(--ombre-1);text-align:left;}
  .kpi:hover{border-color:var(--marque);}
  .kpi:focus-visible{outline:2px solid var(--marque);outline-offset:2px;}
  .kpi-icone{width:30px;height:30px;border-radius:var(--r-sm);background:var(--marque-doux);color:var(--marque);
    display:flex;align-items:center;justify-content:center;}
  .kpi-fleche{position:absolute;top:14px;right:14px;color:var(--texte-3);}
  .kpi-valeur{font-size:26px;font-weight:700;color:var(--texte);margin-top:14px;line-height:1;}
  .kpi-libelle{font-size:12.5px;color:var(--texte-2);margin-top:6px;}
  .kpi.kpi-alerte{border-top:3px solid var(--alerte);}
  .kpi.kpi-alerte .kpi-icone{background:var(--alerte-doux);color:var(--alerte);}
  @media (max-width:859px){
    .kpi-grille{grid-template-columns:1fr;gap:0;border:1px solid var(--bordure);border-radius:var(--r-lg);overflow:hidden;}
    .kpi{display:grid;grid-template-columns:36px 1fr auto;align-items:center;column-gap:12px;border:none;
      border-bottom:1px solid var(--bordure);border-radius:0;box-shadow:none;padding:12px 14px;}
    .kpi-fleche{position:static;}
    .kpi-valeur{font-size:20px;margin-top:2px;grid-column:2;}
    .kpi-libelle{margin-top:0;grid-column:2;grid-row:1;}
  }

  /* §4.5 avancement (2 couleurs : realise en vert, restant en rose) */
  .avancement-ligne{margin-top:10px;}
  .avancement-titre{display:flex;justify-content:space-between;font-size:12px;color:var(--texte-2);margin-bottom:5px;}
  .avancement-titre b{color:var(--texte);}
  .avancement-barre{height:8px;border-radius:var(--r-pill);background:var(--restant);overflow:hidden;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .avancement-barre span{display:block;height:100%;background:var(--ok);border-radius:var(--r-pill);}

  /* .grille-cartes : ajout propre a ce lot (ni refonte-visuelle ni
     charte-interface ne la specifient) -- regroupe les cartes de contenu
     de l'accueil Client (demandes/comptes-rendus/notes/prochaine
     intervention) cote a cote sur ordinateur. .grid-menu ne convient pas :
     ses colonnes minmax(150px,1fr) sont pensees pour des tuiles de
     navigation, pas des cartes a contenu (listes, textes multi-lignes). */
  .grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}

  @media print{
    @page{margin:0;}
    header.topbar,.no-print{display:none !important;}
    body{background:#fff;}
    .card{border:1px solid #999;break-inside:avoid;}
    .badge{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;}
    #print-overlay{position:static !important;inset:auto !important;overflow:visible !important;height:auto !important;padding:14mm !important;}
  }