/* =========================================================================
   AT OPS — THÈME « CLINICAL CARE » (v4.0.0)
   -------------------------------------------------------------------------
   Thèse : la clarté avant tout — une hiérarchie qui reste lisible en fin de
   journée, sur le terrain comme au bureau.

   Ce fichier est chargé APRÈS toutes les feuilles internes d'index.html.
   Il fait trois choses, dans cet ordre :
     1. il redéfinit les jetons de couleur des deux thèmes (cyan médical,
        corail pour ce qui demande une action, ambre pour la prudence) ;
     2. il pose les polices, hébergées sur le serveur (le CSP refuse Google) ;
     3. il redessine la coquille (barre latérale, barre du haut, onglets) et
        les composants communs (cartes, boutons, champs, tableaux, badges).

   Les jetons sont déclarés avec « :root:root » : cette spécificité passe
   devant les quatre blocs « :root » historiques sans avoir à les retirer.
   Tous les contrastes de texte visent 4,5:1 au minimum dans les deux thèmes.
   ========================================================================= */

/* --- 1. Polices -------------------------------------------------------- */
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('public-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('public-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('lora-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('roboto-mono-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto Mono'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('roboto-mono-latin-500.woff2') format('woff2');
}

/* --- 2. Jetons — thème clair (canonique) ------------------------------- */
:root:root{
  --police-texte:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --police-titre:'Lora',Georgia,'Times New Roman',serif;
  --police-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Mouvement mesuré : pas de rebond. */
  --courbe:cubic-bezier(.4,0,.2,1);
  --duree-courte:.2s; --duree:.2s; --duree-longue:.35s;

  /* Surfaces */
  --fond:#f8fbfc;
  --surface:#ffffff;
  --surface-2:#f3f8fa;
  --surface-3:#e5eef1;
  --surface-sunken:#eff5f7;
  --surface-survol:#edf4f7;
  --blanc:#ffffff;

  /* Traits */
  --bordure:#dce6ea;
  --border:#dce6ea;
  --bordure-forte:#b9cbd2;
  --bordure-champ:#7f959d;   /* 3,2:1 sur blanc : un champ se voit comme un champ */

  /* Texte */
  --texte:#14262c;
  --texte-doux:#3a4e56;
  --texte-faible:#566a72;    /* 5,6:1 sur blanc, 5,3:1 sur le fond */

  /* Action — cyan médical */
  --accent:#0e7490;          /* 5,4:1 sur blanc */
  --accent-clair:#e2f2f6;
  --accent-fort:#0b5b71;
  --texte-sur-accent:#ffffff;
  --accent-halo:rgba(14,116,144,.16);

  /* Échelle « bleu » historique, recalée sur le cyan */
  --bleu-900:#0a3a47; --bleu-800:#0b4d5e; --bleu-700:#0b5b71; --bleu-600:#0e7490;
  --bleu-500:#0e7490; --bleu-200:#c4e3eb; --bleu-100:#e2f2f6;

  /* Échelle « ardoise » historique, recalée sur les gris froids */
  --slate-900:#14262c; --slate-700:#3a4e56; --slate-600:#4a5e66; --slate-500:#566a72;
  --slate-300:#b9cbd2; --slate-200:#dce6ea; --slate-100:#eef4f6; --slate-50:#f8fbfc;

  /* États — chaque couleur de texte tient 4,5:1 sur son propre fond */
  --vert:#116932;   --vert-bg:#e6f4eb;  --vert-bord:#a9d9b9;
  --ambre:#8a5a06;  --ambre-bg:#fbf1d9;  --ambre-bord:#ecd29a;
  --orange:#b93d0b; --orange-bg:#fff0e6; --orange-bord:#f8c9a8;   /* corail */
  --rouge:#b91c1c;  --rouge-bg:#fdecec;  --rouge-bord:#f5c2c2;
  --violet:#6d3fd1; --violet-bg:#f0ebfd;
  --texte-sur-ambre:#2b1d02;
  --texte-sur-voile:#f8fafc;

  /* Ombres */
  --ombre:0 1px 2px rgba(15,40,50,.07),0 1px 3px rgba(15,40,50,.05);
  --ombre-md:0 4px 14px rgba(15,40,50,.09);
  --ombre-lg:0 14px 36px rgba(15,40,50,.14);

  /* Rayons (échelle douce) */
  --radius:10px;
  --arrondi-net:6px; --arrondi:8px; --arrondi-carte:12px; --arrondi-doux:16px;

  /* Coquille : barre latérale claire, barre du haut claire */
  --rail-l:252px;
  --rail-l-replie:72px;
  --rail-l-ouvert:252px;
  --barre-h:60px;
  --nav-fond:#ffffff;
  --barre-haut:#ffffff;
  --barre-bas:#ffffff;
  --barre-texte:#3a4e56;
  --barre-texte-fort:#14262c;
  --barre-texte-doux:#566a72;
  --barre-fond-doux:#f3f8fa;
  --barre-fond-moyen:#e5eef1;
  --barre-fond-fort:#dce9ee;
  --barre-trait:#dce6ea;

  /* Monogramme */
  --logo-fond-1:#0e7490;
  --logo-fond-2:#0a3a47;
  --logo-trait:#ffffff;

  /* Jetons employés par d'anciennes règles sans jamais avoir été déclarés. */
  --bleu:var(--accent); --rouge-600:var(--rouge); --radius-md:10px;
  --slate-400:#5b7078; --slate-800:#1f343b;
  --texte-sur-vert:#ffffff;
  --entete-tableau:#eef5f7;
  --entete-tableau-texte:#24525f;
  color-scheme:light;
}

/* --- 3. Jetons — thème sombre ------------------------------------------ */
:root:root[data-theme="sombre"]{
  --fond:#0c1417;
  --surface:#121c20;
  --surface-2:#172328;
  --surface-3:#1f2e34;
  --surface-sunken:#0f181b;
  --surface-survol:#22343b;
  --blanc:#121c20;

  --bordure:#243840;
  --border:#243840;
  --bordure-forte:#3a525b;
  --bordure-champ:#5f7a84;

  --texte:#e6eff3;
  --texte-doux:#bfd0d6;
  --texte-faible:#93a9b1;    /* 6,9:1 sur la surface */

  --accent:#22d3ee;
  --accent-clair:rgba(34,211,238,.13);
  --accent-fort:#67e8f9;
  --texte-sur-accent:#06222b;
  --accent-halo:rgba(34,211,238,.22);

  --bleu-900:#cff5fb; --bleu-800:#a5eef9; --bleu-700:#67e8f9; --bleu-600:#22d3ee;
  --bleu-500:#06b6d4; --bleu-200:#16414a; --bleu-100:#10292f;

  --slate-900:#e6eff3; --slate-700:#bfd0d6; --slate-600:#a3b8bf; --slate-500:#93a9b1;
  --slate-300:#3a525b; --slate-200:#243840; --slate-100:#172328; --slate-50:#0c1417;

  --vert:#4ade80;   --vert-bg:#0f2a1c;  --vert-bord:#1f5a37;
  --ambre:#fbbf24;  --ambre-bg:#2c2310;  --ambre-bord:#6b4f12;
  --orange:#fb923c; --orange-bg:#2e1a0f; --orange-bord:#7c3a12;
  --rouge:#f87171;  --rouge-bg:#2e1517;  --rouge-bord:#7f1d1d;
  --violet:#c4b5fd; --violet-bg:#221a3b;
  --texte-sur-ambre:#2b1d02;

  --ombre:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --ombre-md:0 4px 14px rgba(0,0,0,.45);
  --ombre-lg:0 14px 36px rgba(0,0,0,.55);

  --nav-fond:#0a1114;
  --barre-haut:#0f181b;
  --barre-bas:#0f181b;
  --barre-texte:#bfd0d6;
  --barre-texte-fort:#e6eff3;
  --barre-texte-doux:#93a9b1;
  --barre-fond-doux:#172328;
  --barre-fond-moyen:#1f2e34;
  --barre-fond-fort:#273a41;
  --barre-trait:#1f3036;

  --logo-fond-1:#22d3ee;
  --logo-fond-2:#0e7490;
  --logo-trait:#06222b;

  --slate-400:#8aa1a9; --slate-800:#d3e0e5;
  --texte-sur-vert:#052e16;
  --entete-tableau:#172328;
  --entete-tableau-texte:#67e8f9;
  color-scheme:dark;
}

/* --- 4. Base ----------------------------------------------------------- */
html,body{ background:var(--fond); }
body{
  font-family:var(--police-texte) !important;
  color:var(--texte);
  font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0;
}
button,input,select,textarea{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--texte-sur-accent); }
a{ color:var(--accent); }
a:hover{ color:var(--accent-fort); }
h1,h2,h3,h4{ color:var(--texte); letter-spacing:-.005em; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Les titres de page prennent la police de titre : c'est elle qui dit
   « vous êtes ici » avant même qu'on lise. */
main#view > .page-header h1,
main#view .page-header h1,
main#view h1,
.boite-connexion h1{
  font-family:var(--police-titre); font-weight:600; letter-spacing:-.01em;
  font-size:27px; line-height:1.2; color:var(--texte);
}
.page-header .sous-titre, .page-header p{ color:var(--texte-faible); }
.carte > h2, .carte > h3, .carte-titre{ font-weight:650; color:var(--texte); }

/* Les chiffres qu'on compare se lisent en chasse fixe. */
.kpi .valeur, .kpi-valeur, .terrain-kpi-valeur, .rapport-nombre,
#horloge .horloge-heure, .agenda-heure, .planning-heure,
.col-num, td.num, .montant, .money, code, kbd, pre{
  font-family:var(--police-mono); font-variant-numeric:tabular-nums;
}
code, kbd{ font-size:.92em; }

/* Défilement discret */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--bordure-forte); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); background-clip:padding-box; }

/* --- 5. Barre latérale -------------------------------------------------- */
#rail-modules{
  width:var(--rail-l) !important;
  background:var(--nav-fond) !important;
  border-right:1px solid var(--bordure) !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:width var(--duree-longue) var(--courbe), box-shadow var(--duree) var(--courbe) !important;
}
#rail-modules:hover, #rail-modules:focus-within{ box-shadow:none !important; }
body{ padding-left:var(--rail-l) !important; transition:padding-left var(--duree-longue) var(--courbe); }
#topbar{ left:var(--rail-l) !important; transition:left var(--duree-longue) var(--courbe); }

.rail-marque{
  height:var(--barre-h); gap:10px; padding:0 18px;
  border-bottom:1px solid var(--bordure) !important;
  color:var(--texte) !important;
}
.rail-marque:hover{ background:transparent !important; }
/* 5.21.0 — Le logo ASLO-TECH : horizontal (200 px, la largeur minimale du
   guide) barre ouverte, le symbole seul barre repliée — voir plus bas. */
.rail-marque-nom img{ width:200px; height:auto; display:block; }
.rail-logo{ display:none !important; width:34px !important; height:34px !important; }
.rail-logo img{ width:34px; height:34px; display:block; }

/* Chaque logo existe en « couleur » (fond clair) et en « blanc » (fond
   sombre) : le guide interdit la version couleur sur un fond sombre. Les deux
   sont dans la page, le thème montre la bonne. */
:root[data-theme="sombre"] .logo-clair,
:root:not([data-theme="sombre"]) .logo-sombre{ display:none !important; }

.rail-liste{ padding:10px 12px 16px !important; scrollbar-width:thin; }
.rail-groupe{ padding-top:12px; }
.rail-groupe:first-child{ padding-top:2px; }
.rail-groupe-titre{
  font:600 10.5px/1 var(--police-texte); letter-spacing:.12em; text-transform:uppercase;
  color:var(--texte-faible); padding:0 10px 8px; white-space:nowrap;
}
.rail-separation{ display:none; }

.rail-item{
  gap:11px !important; min-height:35px !important; padding:0 10px !important;
  margin:0 0 2px !important; border-radius:8px !important;
  color:var(--texte-doux) !important; font-size:14px !important; font-weight:500 !important;
  border:0 !important; box-shadow:none !important; background:transparent !important;
  transform:none !important;
  transition:background var(--duree) var(--courbe), color var(--duree) var(--courbe) !important;
}
.rail-item .rail-icone{ width:22px !important; height:22px !important; color:var(--texte-faible); transition:color var(--duree) var(--courbe); }
.rail-item .rail-icone svg{ width:18px !important; height:18px !important; }
.rail-item:hover{ background:var(--surface-2) !important; color:var(--texte) !important; }
.rail-item:hover .rail-icone{ color:var(--texte); }
.rail-item.actif{
  background:var(--accent-clair) !important; color:var(--accent-fort) !important; font-weight:600 !important;
}
:root[data-theme="sombre"] .rail-item.actif{ color:var(--accent) !important; }
.rail-item.actif .rail-icone{ color:var(--accent); }
.rail-item.actif::before{
  left:-12px !important; top:8px !important; bottom:8px !important; width:3px !important;
  background:var(--accent) !important; box-shadow:none !important; border-radius:0 99px 99px 0 !important;
}
.rail-item:focus-visible{ outline:2px solid var(--accent) !important; outline-offset:-2px; }
.rail-texte{ opacity:1 !important; transform:none !important; overflow:hidden; text-overflow:ellipsis; }

.rail-pied{
  padding:10px 12px 14px !important; border-top:1px solid var(--bordure) !important;
  display:flex; flex-direction:row; align-items:center; gap:4px;
}
.rail-pied .rail-item{ flex:1 1 auto; min-width:0; margin:0 !important; }
.rail-replier{
  display:flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px;
  height:35px; padding:0; margin:0;
  background:transparent; border:0; border-radius:8px;
  color:var(--texte-faible); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.rail-replier:hover{ background:var(--surface-2); color:var(--texte); border:0; }
.rail-replier svg{ width:18px; height:18px; flex:0 0 auto; transition:transform var(--duree-longue) var(--courbe); }
.rail-replier-texte{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.rail-replier .rail-icone{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; }

/* 5.1.0 — Le groupe actif, sous la marque. Replié, il ne montre que son
   pictogramme ; la liste déroulante garde la barre ouverte tant qu'elle a le
   focus (règle :focus-within plus bas), on peut donc choisir sans qu'elle se
   referme sous la souris. */
.rail-groupe-actif{
  display:flex; align-items:center; gap:11px; flex:0 0 auto;
  margin:10px 12px 0; padding:7px 10px; min-height:52px;
  border:1px solid var(--bordure); border-radius:10px; background:var(--surface-2);
  color:var(--texte-doux); cursor:pointer; overflow:hidden;
}
.rail-groupe-actif[hidden]{ display:none !important; }
.rail-groupe-actif .rail-icone{ width:22px !important; height:22px !important; color:var(--accent); }
.rail-groupe-actif .rail-icone svg{ width:18px !important; height:18px !important; }
.rail-groupe-actif-corps{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.rail-groupe-actif-titre{
  font:600 10px/1 var(--police-texte); letter-spacing:.12em; text-transform:uppercase; color:var(--texte-faible);
}
.rail-groupe-actif select{
  width:100%; min-width:0; height:28px; padding:2px 6px; margin:0;
  font-size:13px; font-weight:600; border-radius:7px;
}
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-groupe-actif{
  margin:10px 8px 0; padding:7px 9px; border-color:transparent; background:transparent;
}
/* La copie de la barre du haut : écrans étroits seulement. */
#selecteur-groupe-barre{ display:none !important; }
@media(max-width:820px){
  #selecteur-groupe-barre:not([hidden]){
    display:inline-block !important; max-width:150px; height:32px; padding:2px 8px;
    font-size:13px; border-radius:8px;
  }
}

/* Les rubriques communes ont quitté la barre du haut pour la barre latérale. */
#rail-modules #topbar-admin-links{
  display:flex !important; flex-direction:column; align-items:stretch; gap:0;
  overflow:visible; margin:0; padding:0; background:none; border:0;
}
#rail-modules #topbar-admin-links a{
  display:flex; align-items:center; gap:11px; min-height:35px; padding:0 10px; margin:0 0 2px;
  border-radius:8px; border:0; background:transparent; box-shadow:none; transform:none;
  color:var(--texte-doux); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
  position:relative;
}
#rail-modules #topbar-admin-links a:hover{ background:var(--surface-2); color:var(--texte); }
#rail-modules #topbar-admin-links a.actif{ background:var(--accent-clair); color:var(--accent-fort); font-weight:600; }
:root[data-theme="sombre"] #rail-modules #topbar-admin-links a.actif{ color:var(--accent); }
#rail-modules #topbar-admin-links a.actif::before{
  content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 99px 99px 0;
}
#rail-modules #topbar-admin-links .topbar-admin-ico{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:var(--texte-faible); opacity:1;
}
#rail-modules #topbar-admin-links a.actif .topbar-admin-ico{ color:var(--accent); }
#rail-modules #topbar-admin-links a span:last-child{ overflow:hidden; text-overflow:ellipsis; max-width:none; }

/* Barre repliée : pictogrammes seuls, s'élargit au survol par-dessus le contenu. */
:root:root.rail-replie{ --rail-l:var(--rail-l-replie); }
html.rail-replie #rail-modules:hover,
html.rail-replie #rail-modules:focus-within{
  width:var(--rail-l-ouvert) !important; box-shadow:var(--ombre-lg) !important;
}
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-texte,
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-groupe-titre,
html.rail-replie #rail-modules:not(:hover):not(:focus-within) #topbar-admin-links a span:last-child,
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-replier-texte{ opacity:0 !important; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-groupe-titre{ height:0; padding:0; overflow:hidden; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-groupe{ padding-top:8px; margin-top:8px; border-top:1px solid var(--bordure); }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-groupe:first-child{ border-top:0; margin-top:0; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-marque-nom{ display:none; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-logo{ display:flex !important; }
html.rail-replie .rail-replier svg{ transform:rotate(180deg); }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-pied{ flex-direction:column; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-pied .rail-item{ width:100%; }
html.rail-replie #rail-modules:not(:hover):not(:focus-within) .rail-marque{ padding:0 19px; }

/* --- 6. Barre du haut --------------------------------------------------- */
#topbar{
  height:var(--barre-h) !important;
  background:color-mix(in srgb, var(--fond) 88%, transparent) !important;
  backdrop-filter:saturate(160%) blur(10px) !important; -webkit-backdrop-filter:saturate(160%) blur(10px) !important;
  border-bottom:1px solid var(--bordure) !important;
  box-shadow:none !important;
  color:var(--texte-doux) !important;
  padding:0 24px !important; gap:12px !important;
}
#topbar .btn-barre, #topbar #cloche-notifs{
  width:38px; height:38px; border-radius:10px;
  background:var(--surface) !important; border:1px solid var(--bordure) !important;
  color:var(--texte-doux) !important; box-shadow:none !important;
}
#topbar .btn-barre:hover, #topbar #cloche-notifs:hover, #topbar #cloche-notifs[aria-expanded="true"]{
  background:var(--surface-2) !important; color:var(--accent) !important; border-color:var(--bordure-forte) !important;
}
#topbar .btn-barre:focus-visible, #topbar #cloche-notifs:focus-visible{ outline:2px solid var(--accent); }

/* La recherche devient un vrai champ apparent : on la trouve sans la chercher. */
#topbar #btn-recherche.recherche-large{
  width:min(380px, 34vw); justify-content:flex-start; gap:10px; padding:0 12px;
  color:var(--texte-faible) !important; font-size:13.5px; font-weight:500;
}
#topbar #btn-recherche.recherche-large .recherche-libelle{ flex:1; text-align:left; }
/* 5.1.0 — Entre 1181 et 1366 pixels (les portables courants), la recherche
   gardait ses 380 pixels et poussait le compte et le bouton de déconnexion
   hors de l'écran. Elle cède désormais la place : elle rétrécit, le texte
   s'abrège, les icônes de droite restent où elles sont. */
#topbar #btn-recherche.recherche-large{ flex:0 1 380px; min-width:150px; max-width:380px; overflow:hidden; }
#topbar #btn-recherche.recherche-large .recherche-libelle{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:1366px){ #topbar #btn-recherche.recherche-large kbd{ display:none; } }
#topbar #btn-recherche.recherche-large kbd{
  font-size:11px; padding:2px 6px; border-radius:5px;
  background:var(--surface-2); border:1px solid var(--bordure); color:var(--texte-faible);
}
.titre-barre{
  font-family:var(--police-titre); font-size:17px; font-weight:600; color:var(--texte);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.titre-barre:empty{ display:none; }

.cloche-pastille{ background:var(--rouge) !important; color:#fff !important; border-color:var(--fond) !important; }
/* Le compteur portait « hidden » à zéro, mais un display posé plus haut
   l'emportait : la cloche affichait « 0 » en rouge en permanence. */
.cloche-pastille[hidden]{ display:none !important; }
:root[data-theme="sombre"] .cloche-pastille{ background:#dc2626 !important; }

#voyant-reseau .voyant-point{ background:var(--vert); box-shadow:0 0 0 3px color-mix(in srgb, var(--vert) 22%, transparent); }
#voyant-reseau.hors-ligne .voyant-point{ background:var(--rouge); box-shadow:0 0 0 3px color-mix(in srgb, var(--rouge) 22%, transparent); }
#voyant-reseau.attente .voyant-point{ background:var(--ambre); box-shadow:0 0 0 3px color-mix(in srgb, var(--ambre) 22%, transparent); }
#etat-sync{ color:var(--texte-faible) !important; font-size:11.5px; }


.bascule-theme{ background:var(--surface) !important; border:1px solid var(--bordure) !important; width:64px; height:34px; }
.bascule-theme:hover{ background:var(--surface-2) !important; }
.bascule-curseur{ background:var(--accent) !important; top:5px; left:5px; height:22px; box-shadow:none !important; }
.bascule-theme[aria-checked="false"] .bascule-ico-clair,
.bascule-theme[aria-checked="true"] .bascule-ico-sombre{ color:var(--texte-sur-accent) !important; }
.bascule-theme[aria-checked="false"] .bascule-ico-sombre,
.bascule-theme[aria-checked="true"] .bascule-ico-clair{ color:var(--texte-faible) !important; }

#horloge{ color:var(--texte-faible) !important; }
#horloge .horloge-heure{ color:var(--texte) !important; font-size:15px; font-weight:500; letter-spacing:0; }
#horloge .horloge-date{ color:var(--texte-faible) !important; }

#chip-utilisateur{
  height:42px !important; padding:0 4px 0 6px !important; gap:10px !important;
  background:var(--surface) !important; border:1px solid var(--bordure) !important;
  border-radius:99px !important; box-shadow:none !important; color:var(--texte) !important;
}
#chip-utilisateur:hover{ border-color:var(--bordure-forte) !important; }
#chip-utilisateur .avatar-initiales{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-clair); color:var(--accent-fort);
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
:root[data-theme="sombre"] #chip-utilisateur .avatar-initiales{ color:var(--accent); }
#chip-utilisateur strong{ color:var(--texte) !important; font-size:13px !important; }
#chip-utilisateur .role{
  color:var(--texte-faible) !important; background:none !important; border:0 !important;
  padding:0 !important; font-size:11.5px !important; font-weight:500 !important;
}
#chip-utilisateur button{
  background:var(--surface-2) !important; border:1px solid var(--bordure) !important;
  color:var(--texte-doux) !important; box-shadow:none !important;
}
#chip-utilisateur button.btn-eteindre{ width:32px !important; height:32px !important; border-radius:50% !important; }
#chip-utilisateur button.btn-eteindre:hover{
  background:var(--rouge-bg) !important; color:var(--rouge) !important; border-color:var(--rouge-bord) !important; transform:none !important;
}

/* --- 7. Zone de contenu ------------------------------------------------- */
main#view{
  max-width:1360px !important; margin:0 auto !important;
  padding:28px 32px 96px !important; background:transparent !important;
}
main#view > *{ animation:apparition var(--duree-longue) var(--courbe) both; }

/* --- 8. Onglets du module ---------------------------------------------- */
#onglets-module{ max-width:1360px; margin:20px auto 0 !important; padding:0 32px !important; }
.onglets-module{
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--bordure) !important;
  border-radius:0 !important; box-shadow:none !important; padding:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.onglets-module-piste{ gap:4px !important; }
.onglet-module{
  position:relative; background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; transform:none !important;
  min-height:44px !important; padding:0 14px !important; margin-bottom:-1px;
  color:var(--texte-faible) !important; font-size:14px !important; font-weight:500 !important;
}
.onglet-module::after{
  content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px;
  border-radius:2px 2px 0 0; background:transparent; transition:background var(--duree) var(--courbe);
}
.onglet-module:hover{ color:var(--texte) !important; background:transparent !important; }
.onglet-module:hover::after{ background:var(--bordure-forte); }
.onglet-module.actif{ color:var(--accent-fort) !important; font-weight:600 !important; background:transparent !important; }
:root[data-theme="sombre"] .onglet-module.actif{ color:var(--accent) !important; }
.onglet-module.actif::after{ background:var(--accent); }
.onglet-module .ico, .onglet-module svg{ opacity:.85; }
.onglets-module-fleche{ background:var(--surface) !important; border:1px solid var(--bordure) !important; color:var(--texte-doux) !important; }
.onglet-module .pastille, .onglet-module.actif .pastille,
:root[data-theme="sombre"] .onglet-module.actif .pastille{
  background:var(--rouge-bg) !important; color:var(--rouge) !important; border:1px solid var(--rouge-bord);
  min-width:20px; height:20px; padding:0 6px; font-size:11px; font-weight:700; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:none !important;
}
.onglet-module .pastille-ambre, .onglet-module.actif .pastille-ambre,
:root[data-theme="sombre"] .onglet-module.actif .pastille-ambre{
  background:var(--ambre-bg) !important; color:var(--ambre) !important; border-color:var(--ambre-bord);
}

/* Onglets génériques et sous-navigation terrain */
.onglets{ border-bottom:1px solid var(--bordure); gap:4px; }
/* 5.1.0 — La fiche d'un chantier compte douze onglets depuis qu'elle a repris
   le module Marchés. Ils passent à la ligne entiers plutôt que de couper
   leur libellé en trois (« Procès- / verbaux / (0) ») ou de pousser le
   dernier hors de l'écran. */
#onglets-pg{ flex-wrap:wrap; row-gap:2px; }
#onglets-pg .onglet{ white-space:nowrap; flex:0 0 auto; }
.onglet{ color:var(--texte-faible); border-bottom:2px solid transparent; font-weight:500; }
.onglet:hover{ color:var(--texte); }
.onglet.actif{ color:var(--accent-fort); border-bottom-color:var(--accent); font-weight:600; }
:root[data-theme="sombre"] .onglet.actif{ color:var(--accent); }

/* --- 9. Cartes, indicateurs -------------------------------------------- */
.carte, .kpi, .carte-module, .table-wrap, .terrain-carte, .terrain-bloc{
  background:var(--surface) !important;
  border:1px solid var(--bordure) !important;
  border-radius:var(--arrondi-carte) !important;
  box-shadow:var(--ombre) !important;
}
.carte{ padding:22px 24px; }
.carte:hover{ box-shadow:var(--ombre) !important; }
.carte-module:hover, .kpi[data-apercu]:hover, a.kpi:hover{
  border-color:var(--bordure-forte) !important; box-shadow:var(--ombre-md) !important; transform:translateY(-2px);
}
.kpi{ padding:18px 20px; transition:border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.kpi .valeur, .kpi-valeur{ color:var(--texte); font-weight:500; font-size:28px; letter-spacing:-.01em; }
.kpi .libelle{ color:var(--texte-faible); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.kpi.alerte, .kpi-alerte{ border-left:3px solid var(--orange) !important; }
.kpi.alerte .valeur, .kpi-alerte .valeur{ color:var(--orange); }
.carte-module h2{ font-family:var(--police-titre); font-weight:600; }
.carte-module p{ color:var(--texte-faible); }
.carte-module .icone-module{ background:var(--accent-clair); color:var(--accent); border-radius:10px; }

/* --- 10. Boutons -------------------------------------------------------- */
button, .btn{
  border-radius:8px; font-weight:600; font-size:14px;
  background:var(--surface); border:1px solid var(--bordure-forte); color:var(--texte);
  transition:background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
button:hover, .btn:hover{ border-color:var(--accent); color:var(--accent-fort); }
:root[data-theme="sombre"] button:hover, :root[data-theme="sombre"] .btn:hover{ color:var(--accent); }
button:active, .btn:active{ transform:scale(.98); }
button:disabled, .btn:disabled, button[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-primary, button.btn-primary, .btn-module-primary, a.btn-primary{
  background:var(--accent) !important; border:1px solid var(--accent) !important;
  color:var(--texte-sur-accent) !important; box-shadow:0 1px 2px rgba(15,40,50,.12) !important;
}
.btn-primary:hover, button.btn-primary:hover, .btn-module-primary:hover, a.btn-primary:hover{
  background:var(--accent-fort) !important; border-color:var(--accent-fort) !important;
  color:var(--texte-sur-accent) !important; box-shadow:0 4px 12px var(--accent-halo) !important; transform:none;
}
.btn-danger, button.btn-danger{ color:var(--rouge) !important; border-color:var(--rouge-bord) !important; background:var(--surface) !important; }
.btn-danger:hover, button.btn-danger:hover{ background:var(--rouge-bg) !important; border-color:var(--rouge) !important; color:var(--rouge) !important; }
.btn-danger-outline{ color:var(--rouge); border-color:var(--rouge-bord); }
.btn-danger-outline:hover{ background:var(--rouge-bg); border-color:var(--rouge); color:var(--rouge); }
.btn-secondary, button.btn-secondary{ background:var(--surface); border:1px solid var(--bordure-forte); color:var(--texte); }
.btn-secondary:hover{ background:var(--surface-2); }
.btn-sm{ padding:5px 11px; font-size:13px; }
.btn-success, button.btn-success{ background:var(--vert) !important; border-color:var(--vert) !important; color:var(--texte-sur-vert) !important; }
.btn-success:hover, button.btn-success:hover{ filter:brightness(1.08); color:var(--texte-sur-vert) !important; }
.btn-sm.actif{ background:var(--accent-clair); border-color:var(--accent); color:var(--accent-fort); }
:root[data-theme="sombre"] .btn-sm.actif{ color:var(--accent); }

.chip-btn{ background:var(--surface) !important; border:1px solid var(--bordure) !important; color:var(--texte-doux) !important; box-shadow:none !important; }
.chip-btn:hover{ border-color:var(--accent) !important; color:var(--accent-fort) !important; }
.chip-btn.actif{ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--texte-sur-accent) !important; }

/* --- 11. Champs --------------------------------------------------------- */
input, select, textarea{
  background:var(--surface); color:var(--texte);
  border:1px solid var(--bordure-champ); border-radius:8px;
  font-size:14px;
  transition:border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
input::placeholder, textarea::placeholder{ color:var(--texte-faible); opacity:1; }
input:hover, select:hover, textarea:hover{ border-color:var(--texte-faible); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-halo) !important;
}
input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent); }
label{ color:var(--texte-doux); font-weight:600; }

/* --- 12. Tableaux ------------------------------------------------------- */
.table-wrap{ overflow:auto; }
table th, th{
  background:var(--entete-tableau) !important; color:var(--entete-tableau-texte) !important;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border-bottom:1px solid var(--bordure) !important;
}
table td, td{ border-bottom:1px solid var(--bordure); color:var(--texte); }
tbody tr:hover td, tr.lignable:hover td{ background:var(--surface-2) !important; }
tbody tr:last-child td{ border-bottom:0; }

/* --- 13. Badges & pastilles --------------------------------------------- */
.badge, .badge-statut{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:99px; font-size:12px; font-weight:600; padding:2px 10px; line-height:1.6;
  border:1px solid transparent;
}
.badge-vert{ background:var(--vert-bg) !important; color:var(--vert) !important; }
.badge-ambre{ background:var(--ambre-bg) !important; color:var(--ambre) !important; }
.badge-orange{ background:var(--orange-bg) !important; color:var(--orange) !important; }
.badge-rouge{ background:var(--rouge-bg) !important; color:var(--rouge) !important; }
.badge-bleu{ background:var(--accent-clair) !important; color:var(--accent-fort) !important; }
:root[data-theme="sombre"] .badge-bleu{ color:var(--accent) !important; }
.badge-gris{ background:var(--surface-3) !important; color:var(--texte-doux) !important; }
.badge-violet{ background:var(--violet-bg) !important; color:var(--violet) !important; }
.pastille{ background:var(--rouge); color:#fff; }
:root[data-theme="sombre"] .pastille{ background:#dc2626; }
.pastille-ambre{ background:var(--ambre); color:var(--texte-sur-ambre); }
.pastille[hidden], [hidden].pastille{ display:none !important; }

/* --- 14. Fenêtres, notifications --------------------------------------- */
#modal-root .modal-fond, #modal-signature .modal-fond{
  background:rgba(8,20,26,.52) !important; backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
}
.modal-boite{
  background:var(--surface) !important; color:var(--texte);
  border:1px solid var(--bordure) !important; border-radius:16px !important;
  box-shadow:var(--ombre-lg) !important;
}
.modal-entete{ border-bottom:1px solid var(--bordure); }
.modal-entete h2, .modal-entete h3{ font-family:var(--police-titre); font-weight:600; }
.modal-pied{ border-top:1px solid var(--bordure); }
.fermer-x{ border-radius:8px !important; }

.toast{ background:var(--surface) !important; color:var(--texte) !important; border:1px solid var(--bordure) !important; border-left:4px solid var(--accent) !important; box-shadow:var(--ombre-lg) !important; border-radius:10px !important; }
.toast.succes{ border-left-color:var(--vert) !important; }
.toast.erreur{ border-left-color:var(--rouge) !important; }
.toast.attention{ border-left-color:var(--ambre) !important; }

#fenetre-recherche{ background:rgba(8,20,26,.5) !important; }
#fenetre-recherche .boite-recherche{ border-radius:14px !important; box-shadow:var(--ombre-lg) !important; }

/* --- 15. Écran de connexion -------------------------------------------- */
#ecran-connexion{ background:var(--fond) !important; }
#ecran-connexion::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1000px 520px at 85% -10%, var(--accent-clair), transparent 60%),
             radial-gradient(700px 400px at -10% 110%, color-mix(in srgb, var(--orange-bg) 70%, transparent), transparent 60%);
}
.boite-connexion{
  position:relative; background:var(--surface) !important; border:1px solid var(--bordure) !important;
  border-radius:18px !important; box-shadow:var(--ombre-lg) !important;
}
.boite-connexion .sous, #ecran-connexion .sous{ color:var(--texte-faible) !important; }
.choix-acces-btn{ background:var(--surface-2) !important; border:1px solid var(--bordure) !important; color:var(--texte-doux) !important; }
.choix-acces-btn.actif{ background:var(--accent-clair) !important; border-color:var(--accent) !important; color:var(--accent-fort) !important; }
:root[data-theme="sombre"] .choix-acces-btn.actif{ color:var(--accent) !important; }
.choix-acces-sous{ color:var(--texte-faible) !important; opacity:1 !important; }
.choix-acces{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
.choix-acces-btn{ width:100%; justify-content:flex-start; }
.btn-oeil-mdp{ color:var(--texte-faible) !important; }
.choix-acces-btn.actif .choix-acces-sous{ color:inherit !important; opacity:1 !important; }

/* --- 16. Bandeaux ------------------------------------------------------- */
#bandeau-reseau{ background:var(--ambre-bg) !important; color:var(--texte) !important; border-bottom:1px solid var(--ambre-bord) !important; }
.avertissement{ background:var(--ambre-bg); border-color:var(--ambre-bord); color:var(--texte); }

/* --- 17. Correctifs de lisibilité (audit de contraste v4.0.0) ---------- */
.semaine-rien, .liste-vide, .terrain-vide-detail{ color:var(--texte-faible) !important; }
.cal-cell.hors-mois, .cal-jour-case.cal-jour-hors-mois{ opacity:1 !important; background:var(--surface-sunken) !important; }
.cal-date, .cal-cell.weekend-equipe .cal-date{ color:var(--texte-faible) !important; }
.cal-projet{ background:var(--accent-clair) !important; border:1px solid var(--bleu-200) !important; color:var(--accent-fort) !important; }
:root[data-theme="sombre"] .cal-projet{ color:var(--texte) !important; }
.cal-projet span, .cal-projet b{ color:inherit !important; }
.ligne-etiquette .meta, .licence-carte .meta{ color:var(--texte-faible); }
/* Un aperçu de document est une feuille : blanche dans les deux thèmes. */
.apercu-entete{ background:var(--papier) !important; color:var(--encre) !important; border-color:var(--bordure) !important; }

/* Composants qui n'existaient qu'en clair (couleurs écrites en dur). */
.avis-obligatoire{ background:var(--rouge-bg) !important; border-color:var(--rouge-bord) !important; color:var(--rouge) !important; }
.avis-obligatoire .sous-titre{ color:var(--rouge) !important; opacity:1 !important; }
.champ-invalide input, .champ-invalide select, .champ-invalide textarea{ border-color:var(--rouge) !important; background:var(--rouge-bg) !important; }
.champ-invalide > label{ color:var(--rouge) !important; }
.avis-brouillon{ background:var(--ambre-bg) !important; border-color:var(--ambre-bord) !important; color:var(--ambre) !important; }
.etiquette-tache{ background:var(--accent-clair) !important; color:var(--accent-fort) !important; border-color:var(--bleu-200) !important; }
:root[data-theme="sombre"] .etiquette-tache{ color:var(--accent) !important; }
.etiquette-tache:hover{ filter:brightness(.97); }
.taches-vue.survol-depot{ background:var(--accent-clair) !important; outline-color:var(--accent) !important; }
.badge-canal-whatsapp{ background:var(--vert-bg) !important; color:var(--vert) !important; border-color:var(--vert-bord) !important; }
.badge-canal-sms{ background:var(--accent-clair) !important; color:var(--accent-fort) !important; border-color:var(--bleu-200) !important; }
:root[data-theme="sombre"] .badge-canal-sms{ color:var(--accent) !important; }
.badge-canal-simu{ background:var(--ambre-bg) !important; color:var(--ambre) !important; border-color:var(--ambre-bord) !important; }

/* --- 18. Écrans étroits ------------------------------------------------- */
@media (max-width:1180px){
  #topbar #btn-recherche.recherche-large{ width:38px; flex:0 0 38px; min-width:38px; padding:0; justify-content:center; }
  #topbar #btn-recherche.recherche-large .recherche-libelle,
  #topbar #btn-recherche.recherche-large kbd{ display:none; }
  #horloge{ display:none !important; }
}
@media (max-width:820px){
  body{ padding-left:0 !important; }
  #topbar{ left:0 !important; padding:0 12px !important; }
  main#view{ padding:18px 14px 80px !important; }
  #onglets-module{ padding:0 14px !important; }
}
@media (prefers-reduced-motion:reduce){
  #rail-modules, body, #topbar, .rail-item, .rail-replier svg{ transition:none !important; }
}
@media print{
  #rail-modules, #topbar, #onglets-module{ display:none !important; }
  body{ padding:0 !important; background:#fff !important; }
}

/* --- 19. Recherche globale ---------------------------------------------- */
#fenetre-recherche .ligne-champ{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--bordure); }
#fenetre-recherche #recherche-globale{ flex:1; border:0 !important; box-shadow:none !important; background:transparent; font-size:16px; padding:6px 0; }
#fenetre-recherche .indice{ font-size:11px; padding:2px 7px; border-radius:5px; border:1px solid var(--bordure); background:var(--surface-2); color:var(--texte-faible); }
#resultats-recherche{ overflow-y:auto; padding:6px; }
#resultats-recherche .resultat{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer;
  transition:background var(--duree) var(--courbe);
}
#resultats-recherche .resultat:hover{ background:var(--surface-2); }
#resultats-recherche .resultat-icone{
  width:32px; height:32px; flex:0 0 auto; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-clair); color:var(--accent);
}
#resultats-recherche .resultat-corps{ flex:1; min-width:0; display:flex; flex-direction:column; }
#resultats-recherche .resultat-titre{ font-weight:600; color:var(--texte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#resultats-recherche .resultat-detail{ font-size:12.5px; color:var(--texte-faible); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#resultats-recherche .resultat-detail:empty{ display:none; }
#resultats-recherche .resultat-famille{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--texte-faible); }
#resultats-recherche .resultat-vide{ padding:18px; text-align:center; color:var(--texte-faible); }

/* --- 20. Écrans de bureau étroits : la barre se replie d'elle-même ------ */
.grille-2 > *, .grille-3 > *, .grille-4 > *, .dash-quatre > *{ min-width:0; }
@media (min-width:821px) and (max-width:1180px){
  :root:root{ --rail-l:var(--rail-l-replie); }
  #rail-modules:hover, #rail-modules:focus-within{ width:var(--rail-l-ouvert) !important; box-shadow:var(--ombre-lg) !important; }
  #rail-modules:not(:hover):not(:focus-within) .rail-texte,
  #rail-modules:not(:hover):not(:focus-within) .rail-groupe-titre,
  #rail-modules:not(:hover):not(:focus-within) #topbar-admin-links a span:last-child{ opacity:0 !important; }
  #rail-modules:not(:hover):not(:focus-within) .rail-marque-nom{ display:none; }
  #rail-modules:not(:hover):not(:focus-within) .rail-logo{ display:flex !important; }
  #rail-modules:not(:hover):not(:focus-within) .rail-groupe-titre{ height:0; padding:0; overflow:hidden; }
  #rail-modules:not(:hover):not(:focus-within) .rail-groupe{ padding-top:8px; margin-top:8px; border-top:1px solid var(--bordure); }
  #rail-modules:not(:hover):not(:focus-within) .rail-groupe:first-child{ border-top:0; margin-top:0; }
  #rail-modules:not(:hover):not(:focus-within) .rail-marque{ padding:0 19px; }
  /* Repliée d'office : le bouton « Replier » n'aurait aucun effet visible. */
  .rail-replier{ display:none; }
}

/* --- 21. Pilotage (SuperAdmin) — v4.1.0 --------------------------------- */
:root:root{ --pl-tache:var(--accent); --pl-visite:var(--violet); --pl-interv:var(--orange); --pl-projet:var(--vert); }
.pl-kpis{ margin-bottom:20px; }
.pl-section-titre{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px; }
.pl-section-titre h2{ font-family:var(--police-titre); font-size:20px; margin:0; }
.pl-section-titre h2 span, .pl-compte{ font-family:var(--police-texte); font-size:12px; font-weight:600; color:var(--texte-faible);
  background:var(--surface-3); border-radius:99px; padding:2px 9px; margin-left:6px; vertical-align:middle; }
.pl-personnes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-bottom:22px; }
.pl-autres{ margin:-8px 0 22px; }
.pl-autres > summary{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--bordure); border-radius:8px; background:var(--surface); color:var(--texte); font-weight:600; font-size:13px; list-style:none; margin-bottom:12px; }
.pl-autres > summary::-webkit-details-marker{ display:none; }
.pl-autres > summary::before{ content:'▸'; color:var(--texte-faible); }
.pl-autres[open] > summary::before{ content:'▾'; }
.pl-autres > summary span{ font-size:12px; color:var(--texte-faible); }
.pl-personne{ background:var(--surface); border:1px solid var(--bordure); border-radius:var(--arrondi-carte); padding:14px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--ombre); transition:border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
.pl-personne:hover{ border-color:var(--bordure-forte); box-shadow:var(--ombre-md); }
.pl-personne.choisie{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-halo); }
.pl-personne-vide{ border-style:dashed; }
.pl-personne-tete{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--texte); min-width:0; }
.pl-personne-id{ display:flex; flex-direction:column; min-width:0; }
.pl-personne-id strong{ font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-personne-id span{ font-size:12px; color:var(--texte-faible); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-avatar{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-clair); color:var(--accent-fort); font-weight:700; font-size:12.5px; }
:root[data-theme="sombre"] .pl-avatar{ color:var(--accent); }
.pl-avatar-grand{ width:54px; height:54px; font-size:18px; }
.pl-chiffres{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.pl-chiffres span{ display:flex; flex-direction:column; align-items:center; padding:6px 2px; border-radius:8px; background:var(--surface-2);
  font-size:10.5px; color:var(--texte-faible); text-transform:uppercase; letter-spacing:.04em; text-align:center; }
.pl-chiffres b{ font-family:var(--police-mono); font-size:18px; font-weight:500; color:var(--texte); letter-spacing:0; text-transform:none; }
.pl-chiffres .pl-alerte b{ color:var(--rouge); }
.pl-personne-actions{ display:flex; gap:6px; }
.pl-personne-actions .btn{ flex:1; justify-content:center; }
.pl-filtre-actif{ margin:0 0 10px; color:var(--texte-doux); }

.pl-calendrier{ padding:18px; }
.pl-barre{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.pl-nav{ display:flex; align-items:center; gap:8px; }
.pl-mois{ font-family:var(--police-titre); font-size:20px; margin:0 6px; text-transform:capitalize; min-width:170px; text-align:center; }
.pl-filtres{ display:flex; gap:6px; flex-wrap:wrap; }
.pl-filtre{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-size:13px; font-weight:600;
  text-decoration:none; border:1px solid var(--bordure-forte); color:var(--texte-faible); background:var(--surface); }
.pl-filtre::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--pl-c); opacity:.35; }
.pl-filtre.actif{ color:var(--texte); border-color:var(--pl-c); background:color-mix(in srgb, var(--pl-c) 10%, var(--surface)); }
.pl-filtre.actif::before{ opacity:1; }
.pl-tache{ --pl-c:var(--pl-tache); } .pl-visite{ --pl-c:var(--pl-visite); } .pl-interv{ --pl-c:var(--pl-interv); } .pl-projet{ --pl-c:var(--pl-projet); }
.pl-grille{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border:1px solid var(--bordure); border-radius:10px; overflow:hidden; }
.pl-entete{ background:var(--entete-tableau); color:var(--entete-tableau-texte); font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; text-align:center; padding:8px 0; border-bottom:1px solid var(--bordure); }
.pl-case{ min-height:118px; padding:6px; border-right:1px solid var(--bordure); border-bottom:1px solid var(--bordure);
  display:flex; flex-direction:column; gap:3px; min-width:0; background:var(--surface); transition:background var(--duree) var(--courbe); }
.pl-case:nth-child(7n+7){ border-right:0; }
.pl-hors{ background:var(--surface-sunken); }
.pl-hors .pl-num{ color:var(--texte-faible); font-weight:500; }
.pl-auj .pl-num{ background:var(--accent); color:var(--texte-sur-accent); border-radius:99px; padding:0 7px; }
.pl-survol{ background:var(--accent-clair); outline:2px dashed var(--accent); outline-offset:-3px; }
.pl-num{ align-self:flex-start; font-family:var(--police-mono); font-size:12.5px; font-weight:600; color:var(--texte); margin-bottom:2px; }
.pl-puce{ display:flex; align-items:center; gap:5px; min-width:0; padding:3px 6px; border-radius:6px; text-decoration:none;
  font-size:11.5px; line-height:1.3; color:var(--texte); border-left:3px solid var(--pl-c);
  background:color-mix(in srgb, var(--pl-c) 11%, var(--surface)); cursor:pointer; }
.pl-puce:hover{ background:color-mix(in srgb, var(--pl-c) 20%, var(--surface)); color:var(--texte); }
.pl-puce[draggable="true"]{ cursor:grab; }
.pl-puce.pl-clos{ background:var(--surface-2); border-left-color:var(--bordure-forte); }
.pl-puce.pl-clos .pl-titre{ text-decoration:line-through; }
.pl-puce.pl-retard{ box-shadow:inset 0 0 0 1px var(--rouge); }
.pl-heure{ font-family:var(--police-mono); font-size:10.5px; color:var(--texte-doux); flex:0 0 auto; }
.pl-qui{ flex:0 0 auto; font-size:10px; font-weight:700; color:var(--texte-doux); background:var(--surface); border-radius:4px; padding:0 4px; }
.pl-titre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pl-plus{ align-self:flex-start; border:0; background:none; padding:2px 4px; font-size:11.5px; font-weight:600; color:var(--accent-fort); }
:root[data-theme="sombre"] .pl-plus{ color:var(--accent); }
.pl-aide{ margin:10px 0 0; font-size:12.5px; color:var(--texte-faible); }
.pl-liste h2, .pl-equipe h2{ font-size:16px; margin-bottom:10px; }
.pl-ligne{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--bordure); text-decoration:none; color:var(--texte); }
.pl-ligne:last-of-type{ border-bottom:0; }
.pl-ligne:hover{ background:var(--surface-2); }
.pl-ligne-corps{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pl-ligne-corps strong{ font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-ligne-corps span{ font-size:12px; color:var(--texte-faible); }
.pl-type{ flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:5px;
  color:var(--texte); background:color-mix(in srgb, var(--pl-c) 14%, var(--surface)); border-left:3px solid var(--pl-c); }
.pl-equipe-liste{ display:flex; flex-wrap:wrap; gap:8px; }
.pl-membre{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--bordure); border-radius:99px; text-decoration:none; color:var(--texte); }
.pl-membre:hover{ border-color:var(--accent); }
.pl-membre > span:last-child{ display:flex; flex-direction:column; line-height:1.2; }
.pl-membre > span:last-child span{ font-size:11.5px; color:var(--texte-faible); }
.pl-membre .pl-avatar{ width:30px; height:30px; font-size:11px; }
.pl-jour-liste{ display:flex; flex-direction:column; }
.pl-entete-personne h1{ margin:0; }
@media (max-width:1000px){ .pl-case{ min-height:90px; } .pl-qui{ display:none; } }

/* --- 22. Matrice des accès : la valeur choisie lisible dans les deux thèmes */
.btn-acces.choisi, .btn-acces-suppr.choisi{ background:var(--accent) !important; color:var(--texte-sur-accent) !important; }
.btn-acces[data-valeur="ferme"].choisi, .btn-acces-suppr[data-valeur="false"].choisi{ background:var(--rouge) !important; color:#fff !important; }
.btn-acces-suppr[data-valeur="true"].choisi{ background:var(--vert) !important; color:var(--texte-sur-vert) !important; }
:root[data-theme="sombre"] .btn-acces[data-valeur="ferme"].choisi,
:root[data-theme="sombre"] .btn-acces-suppr[data-valeur="false"].choisi{ background:#dc2626 !important; }
/* Une ligne archivée se distingue par son fond et son badge, pas par une
   opacité qui ferait tomber le texte sous le seuil de lecture. */
tr.ligne-archivee, tr.ligne-archivee td{ opacity:1 !important; }
tr.ligne-archivee td{ background:var(--surface-sunken) !important; color:var(--texte-doux) !important; }
tr.ligne-archivee td a{ color:var(--accent-fort) !important; }
:root[data-theme="sombre"] tr.ligne-archivee td a{ color:var(--accent) !important; }
.ligne-archivee{ opacity:1 !important; }

/* Pilotage : les chiffres du haut s'ouvrent en liste */
.pl-kpi{ font:inherit; text-align:left; cursor:pointer; width:100%; display:block; }
.pl-kpi:hover{ border-color:var(--accent); }
.pl-kpi:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* --- 22. Téléphone et tablette étroite (≤ 820 px) : menu en tiroir ------- */
/* La barre latérale n'a plus sa place en permanence : elle devient un tiroir
   qu'ouvre le bouton ☰ de la barre du haut, par-dessus la page. */
@media (max-width:820px){
  #topbar .mobile-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    flex:0 0 44px; width:44px; height:44px; margin-left:-8px; padding:0;
    border:0; border-radius:10px; background:transparent; color:var(--texte);
    font-size:22px; line-height:1; cursor:pointer;
  }
  #topbar .mobile-toggle:hover{ background:var(--surface-2); }
  html:root #rail-modules#rail-modules{
    display:flex !important; width:min(84vw,300px) !important; z-index:300;
    transform:translateX(-105%); visibility:hidden; box-shadow:none !important;
    transition:transform .22s var(--courbe), visibility 0s .22s !important;
  }
  html.menu-tel-ouvert #rail-modules#rail-modules{
    transform:none; visibility:visible; box-shadow:var(--ombre-lg) !important;
    transition:transform .22s var(--courbe), visibility 0s !important;
  }
  html.menu-tel-ouvert body::after{
    content:''; position:fixed; inset:0; z-index:290; background:rgba(8,16,24,.45);
  }
  /* Le tiroir est toujours déplié, même si l'utilisateur a replié la barre. */
  html:root #rail-modules#rail-modules .rail-texte,
  html:root #rail-modules#rail-modules #topbar-admin-links a span:last-child{ opacity:1 !important; }
  html:root #rail-modules#rail-modules .rail-groupe-titre{ height:auto; padding:0 10px 8px; overflow:visible; }
  html:root #rail-modules#rail-modules .rail-groupe{ margin-top:0; padding-top:12px; border-top:0; }
  html:root #rail-modules#rail-modules .rail-groupe:first-child{ padding-top:2px; }
  html:root #rail-modules#rail-modules .rail-marque-nom{ display:flex; }
  html:root #rail-modules#rail-modules .rail-logo{ display:none !important; }
  html:root #rail-modules#rail-modules .rail-marque{ padding:0 18px; }
  html:root #rail-modules#rail-modules .rail-pied{ flex-direction:row; }
  html:root #rail-modules#rail-modules .rail-pied .rail-item{ width:auto; }
  html:root #rail-modules#rail-modules .rail-replier{ display:none; }
  .rail-item{ min-height:44px !important; }
}

/* La barre du haut tient sur 360 px : l'avatar (déjà dans le menu de
   l'utilisateur) et les espaces superflus cèdent la place. */
@media (max-width:480px){
  #topbar{ gap:4px !important; padding:0 8px !important; }
  #topbar .zone-droite{ gap:2px !important; }
  #chip-utilisateur .avatar-initiales{ display:none; }
}

/* Les onglets d'une page défilent au doigt plutôt que d'élargir l'écran. */
@media (max-width:820px){
  .onglets{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .onglets::-webkit-scrollbar{ display:none; }
  .onglets > .onglet{ flex:0 0 auto; white-space:nowrap; }
}

/* Débordements repérés sur 390 px. */
@media (max-width:900px){
  .para-cadre{ grid-template-columns:minmax(0,1fr); }
  .para-menu{ min-width:0; }
}
@media (max-width:820px){
  .pl-nav{ flex-wrap:wrap; }
  .page-header.chq-tete .action-bar{ flex-wrap:wrap; }
}
@media (max-width:820px){
  .segmented-control{ max-width:100%; overflow-x:auto !important; scrollbar-width:none; }
  .segmented-control::-webkit-scrollbar{ display:none; }
  .segmented-control > *{ flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:820px){
  .page-header > .action-bar{ min-width:0; max-width:100%; }
  #btn-importer-historique-cheques{ white-space:normal; max-width:100%; height:auto; text-align:left; }
}
@media (max-width:820px){
  #view label{ min-width:0; }
  #view select{ min-width:0; max-width:100%; }
}
/* Une grille qui exige 300 px et plus par colonne passe en une seule colonne
   sur téléphone, au lieu d'élargir la page. */
@media (max-width:480px){
  #view [style*="minmax(3"], #view [style*="minmax(4"], #view [style*="minmax(5"]{ grid-template-columns:minmax(0,1fr) !important; }
}