/* Axalyon Standard — feuille de base (FONDATION).
   Design « Nexoria Mobile Console » appliqué tel quel : palette, rayons, ombres, échelle de texte.
   Jetons de la plateforme (contrat §17.5) conservés SOUS LEURS NOMS et repointés sur les valeurs du
   design : les autres feuilles (poste.css, vues.css, crm.css, admin.css) suivent sans être touchées.
   Sombre uniquement. Accent principal #8D9BA8 (le design n'a pas de rouge : le rouge ne sert plus
   qu'aux erreurs, #EF4444). Titres et chiffres Space Grotesk, texte Manrope.

   CE FICHIER EST LA SEULE MAISON DES PATRONS DU DESIGN (_design/CARTE-DESIGN.md §3) :
   P1 .carte · P2 .liste + .element · P3 .carte-titre et .surtitre · P4 .entete-vue .surtitre ·
   P5 .titre-vue · P6 .entete-vue (+ .nu) · P7/P8/P9 .bouton (.principal, .principal.clair, .succes,
   .fantome, .danger, .lien, .moyen, .petit, .grand) · P10 .pastille · P11 .onglets + .onglet ·
   P12 .recherche-champ et .barre-outils · P13/P15 .champ (+ textarea.champ.note) · P14 .etiquette ·
   P16 input[type=checkbox] · P17 .sw + [data-pill] · P18 .avatar (.petit/.moyen/.grand) ·
   P19 .chiffres + .cc · P20 .encart.ia · P21 .vide (+ .compact) · P22 .kvs + .kv · P25 .encart ·
   P26 .jeton · P28 .retour · P29 .grille. Plus .titre-panneau et .ic.t11…t26.
   poste.css, vues.css, crm.css et admin.css ne les redéfinissent pas : elles n'écrivent que
   ce qui s'en écarte, écran par écran. */

:root{--bg:#0B0E14;--surface:#0D1117;--card:#14181F;--line:#272E39;--ink:#EDF0F3;--ink2:#B0BAC5;--mut:#8A95A3;
--red:#8D9BA8;--red2:#9EABB7;--ok:#4ADE80;--okbg:rgba(34,197,94,.14);--bad:#F87171;--badbg:rgba(239,68,68,.14);--chip:#222832;
--warn:#FBBF24;--warnbg:rgba(245,158,11,.14);--info:#A9B7C5;--infobg:rgba(141,155,168,.14);--champ:#0F1319;--rayon:16px}

:root{
  color-scheme:dark;
  /* traits et fonds complémentaires du design */
  --line-fin:#1D232C;
  --line2:#3E4854;
  --line3:#2F3743;
  --survol:#1B2027;
  --redbg:rgba(141,155,168,.16);
  --accent:#8D9BA8;
  --accent-survol:#9EABB7;
  --accent-admin:#A9B7C5;
  --accent-clair:#A9B7C5;
  --onglet-actif:#B9C4CE;
  --ink3:#C6CED6;
  --ink4:#79838F;
  --ink5:#6E7783;
  --neutre:#3A424E;
  --vert:#22C55E;--vert-clair:#4ADE80;--vert-survol:#1FB555;
  --orange:#F59E0B;--orange-clair:#FBBF24;
  --rouge:#EF4444;--rouge-clair:#F87171;--rouge-survol:#DC3535;
  --ombre:0 30px 70px -20px rgba(0,0,0,.8);
  --ombre-modale:0 40px 90px -30px rgba(0,0,0,.9);
  --titre:"Space Grotesk",Manrope,sans-serif;
  --texte:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Grotesk",ui-monospace,SFMono-Regular,Menlo,monospace;
  --largeur-menu:272px;
  --hauteur-barre:58px;
  --hauteur-bas:34px;
  --hauteur-menu-mobile:62px;
  --bas-sur:env(safe-area-inset-bottom,0px);
}

/* ---------- Base (feuille globale du design) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:#0B0E14;color:#EDF0F3;font-family:Manrope,system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:"Space Grotesk",Manrope,sans-serif;margin:0;line-height:1.2;font-weight:600}
h1{font-size:25px;letter-spacing:-.018em}h2{font-size:16px}h3{font-size:15px}h4{font-size:14px}
p{margin:0 0 .8em}
a{text-decoration:none;color:inherit}
a:hover{color:#EDF0F3}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
table{border-collapse:collapse}
hr{border:0;border-top:1px solid var(--line-fin);margin:16px 0}
code,kbd,samp,pre{font-family:var(--mono);font-size:.92em}
[hidden]{display:none!important}
::selection{background:#3A4250}
*{scrollbar-width:thin;scrollbar-color:#272E39 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#272E39;border-radius:10px;border:2px solid #0B0E14}
::-webkit-scrollbar-thumb:hover{background:#3E4854}
@keyframes lampe{0%,100%{opacity:1}50%{opacity:.3}}

/* Focus visibles (clavier) */
:focus{outline:none}
:focus-visible{outline:2px solid #8D9BA8;outline-offset:2px}
#vue:focus,#vue:focus-visible{outline:none}

/* Pictogrammes du sprite (App.icone) : les propriétés héritent jusque dans <use>. */
#sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic.petit{width:14px;height:14px}
.ic.grand{width:24px;height:24px}
.ic.tres-grand{width:40px;height:40px;stroke-width:1.4}
/* Tailles exactes appelées par le design (11 à 26 px) */
.ic.t11{width:11px;height:11px}.ic.t12{width:12px;height:12px}.ic.t13{width:13px;height:13px}
.ic.t14{width:14px;height:14px}.ic.t15{width:15px;height:15px}.ic.t16{width:16px;height:16px}
.ic.t17{width:17px;height:17px}.ic.t18{width:18px;height:18px}.ic.t19{width:19px;height:19px}
.ic.t20{width:20px;height:20px}.ic.t21{width:21px;height:21px}.ic.t22{width:22px;height:22px}
.ic.t23{width:23px;height:23px}.ic.t25{width:25px;height:25px}.ic.t26{width:26px;height:26px}

/* ---------- Interrupteur du design (input.sw + span[data-pill]) ---------- */
.sw{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
[data-pill]{width:42px;height:24px;flex:none;position:relative;border-radius:999px;background:#222832;box-shadow:inset 0 1px 3px rgba(0,0,0,.35);transition:background .15s ease}
[data-pill]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8A95A3;transition:transform .15s ease,background .15s ease}
.sw:checked + [data-pill]{background:#8D9BA8}
.sw:checked + [data-pill]::after{transform:translateX(18px);background:#fff}
.sw:focus-visible + [data-pill]{outline:2px solid #A9B7C5;outline-offset:2px}
.sw:disabled + [data-pill]{opacity:.5}

/* ---------- Lignes et onglets du design ---------- */
[data-nav]{color:#8A95A3;border-left:2px solid transparent}
[data-nav]:hover{color:#EDF0F3;background:#14181F}
[data-nav][aria-current="page"]{color:#EDF0F3;background:linear-gradient(90deg,rgba(141,155,168,.16),rgba(141,155,168,.04));border-left-color:#8D9BA8}
[data-nav][aria-current="page"] svg{color:#A9B7C5}
[data-tabnav]{color:#79838F;border-bottom:3px solid transparent}
[data-tabnav]:hover{color:#EDF0F3;background:#161B23}
[data-tabnav][aria-current="page"]{color:#0B0E14;background:#B9C4CE;border-bottom-color:#B9C4CE;font-weight:700}
[data-tabnav][aria-current="page"] svg{color:#0B0E14}
[data-tab]{color:#8A95A3}
[data-tab]:hover{color:#C6CED6}
[data-tab][aria-selected="true"]{color:#EDF0F3;border-bottom-color:#8D9BA8}
[data-row]:hover{background:#1B2027}

/* ---------- Typographie utilitaire ---------- */
.marque{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.025em}
.rouge{color:var(--accent)}
.surtitre{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.chiffre{font-family:var(--titre);font-variant-numeric:tabular-nums}
.muet{color:var(--mut)}
.faible{color:var(--ink2)}
.petit-texte{font-size:12.5px}
.gras{font-weight:700}
.tronque{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cache{display:none!important}
.lecteur-seul{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Mise en page de l'application ---------- */
body.connecte{overflow:hidden}
#appli{
  display:grid;
  grid-template-rows:var(--hauteur-barre) auto minmax(0,1fr) var(--hauteur-bas);
  height:100vh;height:100dvh;
  background:#0B0E14;
  overflow:hidden;
}
/* Barre du haut : le design la donne en « overflow:hidden » (§4.1), mais il n'a ni panneau de
   recherche ni menu déroulant. Les nôtres pendent sous la barre : « hidden » les coupait à 58 px.
   Le débordement horizontal reste tenu par les enfants (#barre-onglets défile, les autres blocs
   sont en flex:none), et #appli fait toute la hauteur de la fenêtre : rien ne s'échappe de l'écran. */
#barre{grid-row:1/2;grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 14px;background:#0D1117;border-bottom:1px solid #1D232C;min-width:0;overflow:visible;position:relative;z-index:30}
#bandeau-appel{grid-row:2/3;grid-column:1/-1;min-width:0}
#bandeau-appel:empty{display:none}
/* Corps : deux colonnes, comme le design (CARTE-DESIGN §1.8) — colonne gauche 272 px, écran sur
   tout le reste. Le design n'a AUCUN panneau de droite : l'ancre #poste reste dans le balisage
   (identifiants inchangés) mais ne s'affiche plus et ne prend aucune piste de la grille ; l'écran
   « Poste de travail » est rendu dans #vue comme tous les autres (design §5.2, poste.js). */
#corps{grid-row:3/4;grid-column:1/-1;display:grid;grid-template-columns:var(--largeur-menu) minmax(320px,1fr);min-width:0;min-height:0;overflow:hidden}
#colonne{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#0D1117;border-right:1px solid #1D232C;padding:14px 12px;display:flex;flex-direction:column;gap:18px}
#colonne:empty{display:none}
#zone{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}
#bandeau-service:empty{display:none}
#vue{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;position:relative;background:radial-gradient(1200px 460px at 28% -10%,#141922 0%,#0B0E14 64%)}
#poste{display:none}
#barre-bas{grid-row:4/5;grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 16px;background:#0D1117;border-top:1px solid #1D232C;font-size:11.5px;color:#8A95A3;overflow:hidden;white-space:nowrap}
#barre-etat{display:flex;align-items:center;gap:16px;min-width:0;overflow:hidden}
#barre-bas-droite{display:flex;align-items:center;gap:16px;flex:none;margin-left:auto}
/* Le design n'a pas de menu latéral : la liste de toutes les pages reste construite
   (navigation de référence, feuille mobile, contrôles de permission) mais ne s'affiche pas. */
#menu{display:none}
#menu-mobile{display:none}

/* Marque du design : ne|x|oria|mobile */
.barre-marque{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#EDF0F3}
.barre-marque:hover{color:#EDF0F3}
.marque-nx{font-family:Manrope,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.025em;color:#EDF0F3;line-height:1;white-space:nowrap}
.marque-nx .x,.marque-nx .suite{color:#8D9BA8}
.marque-nx .suite{font-weight:500}
.marque-carre{display:inline-block;width:7px;height:7px;margin-left:4px;vertical-align:3px;background:#8D9BA8}

/* Onglets de la barre du haut */
#barre-onglets{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:1px;overflow-x:auto;scrollbar-width:none}
#barre-onglets::-webkit-scrollbar{display:none}
.onglet-nav{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 8px 8px;border-radius:10px;font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.2;background:none;border:0;border-bottom:3px solid transparent}
.onglet-nav .ic{width:20px;height:20px;flex:none}
.onglet-nav .compteur-onglet{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;background:#EF4444;color:#fff;border-radius:999px;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* Bloc de droite de la barre */
#barre-recherche{flex:none;min-width:0;width:240px;position:relative}
/* Bloc de droite du design (NPD, cloche, casque, compte) : collé au bord de la barre. La marge
   automatique ne sert que lorsque les onglets ou la recherche sont masqués (sous 1200 px, sous
   900 px) — au-delà, c'est la bande d'onglets qui occupe déjà toute la place libre. */
#barre-droite{flex:none;display:flex;align-items:center;gap:10px;margin-left:auto}
.npd{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:700;color:#EDF0F3;white-space:nowrap}
.bouton-rond{position:relative;width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#14181F;border:1px solid #272E39;border-radius:50%;color:#8A95A3}
.bouton-rond:hover,.bouton-rond[aria-expanded="true"]{color:#EDF0F3;border-color:#3E4854}
.bouton-rond .point-vert{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;background:#22C55E;border:2px solid #0D1117;border-radius:50%}
.avatar-compte{width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#283040;border:0;border-radius:50%;font-family:var(--titre);font-weight:600;font-size:12px;color:#EDF0F3}
.avatar-compte:hover,.avatar-compte[aria-expanded="true"]{background:#3E4854}

/* Contenu d'une vue */
.vue-contenu{min-width:0;min-height:0;padding:28px 32px 34px;width:100%}
#vue.en-chargement::before{content:"";position:sticky;top:0;left:0;display:block;height:2px;margin-bottom:-2px;z-index:5;background:linear-gradient(90deg,transparent,#8D9BA8,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:barre-chargement 1s linear infinite}
@keyframes barre-chargement{from{background-position:-40% 0}to{background-position:140% 0}}

/* ---------- Bandeau d'appel en cours (rangée 2) ---------- */
.ba{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 16px 0;padding:12px 16px;background:linear-gradient(180deg,#18202A,#12161D);border:1px solid #1F5C36;border-left:3px solid #22C55E;border-radius:14px;box-shadow:0 14px 34px -22px rgba(0,0,0,.9)}
.ba-pastille{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#22C55E;border-radius:12px;color:#06240F}
.ba-identite{flex:0 1 auto;min-width:0}
.ba-nom{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-puce{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;background:rgba(34,197,94,.16);color:#4ADE80;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ba-point{width:6px;height:6px;background:#22C55E;border-radius:50%;box-shadow:0 0 7px #22C55E}
.ba-etat{color:#8A95A3;font-size:12.5px;font-family:var(--titre);font-variant-numeric:tabular-nums;margin-top:2px}
.ba-chrono{flex:none;font-family:var(--titre);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;color:#4ADE80;letter-spacing:.02em}
.ba-transfert{flex:1 1 220px;min-width:180px;display:flex;align-items:center;gap:8px}
.ba-champ{flex:1;min-width:0;height:38px;padding:0 12px;background:#0F1319;border:1px solid #272E39;border-radius:10px;font-size:13px;outline:none;color:#EDF0F3}
.ba-cmds{flex:none;display:flex;align-items:center;gap:7px}
.ba-carre{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#1B2027;border:1px solid #272E39;border-radius:10px;color:#EDF0F3}
.ba-carre:hover{background:#222832;border-color:#3E4854}
.ba-carre[aria-pressed="true"]{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.25);color:#FBBF24}
.ba-raccrocher{height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;background:#EF4444;border:0;border-radius:10px;color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 20px -10px rgba(239,68,68,.7)}
.ba-raccrocher:hover{background:#DC3535}

/* ---------- Colonne gauche ---------- */
.col-titre{display:flex;align-items:center;gap:8px;margin-bottom:9px;padding:0 2px}
.col-titre .col-libelle{flex:1;min-width:0;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.col-titre .col-lien{flex:none;color:#A9B7C5;font-size:11px;font-weight:700}
.col-titre .col-lien:hover{color:#EDF0F3}
.col-vide{padding:13px;background:#14181F;border:1px dashed #272E39;border-radius:12px}
.col-vide .col-vide-titre{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.col-vide .col-vide-texte{color:#B0BAC5;font-size:12px;margin-top:5px}
.col-vide .col-vide-bouton{width:100%;height:34px;margin-top:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#1B2027;border:1px solid #272E39;border-radius:10px;color:#EDF0F3;font-size:12.5px;font-weight:700}
.col-vide .col-vide-bouton:hover{background:#222832}
.col-point{width:9px;height:9px;flex:none;border-radius:50%;background:#3A424E}
.col-ia{padding:13px;background:linear-gradient(180deg,#1A212C,#12161D);border:1px solid #2F3743;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.col-ia-entete{display:flex;align-items:center;gap:10px}
.col-ia-carre{width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(141,155,168,.16);border-radius:10px;color:#A9B7C5}
.col-ia-nom{font-size:14px;font-weight:600}
.col-ia-sous{color:#8A95A3;font-size:11.5px}
.col-ia-pret{flex:none;display:inline-flex;align-items:center;gap:5px;color:#4ADE80;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.col-bascule{display:flex;align-items:flex-start;gap:11px;margin-top:10px;cursor:pointer}
.col-bascule.premiere{margin-top:13px;padding-top:12px;border-top:1px solid #1D232C}
.col-bascule .col-bascule-corps{flex:1;min-width:0}
.col-bascule .col-bascule-titre{display:block;font-size:12.5px;font-weight:700}
.col-bascule .col-bascule-aide{display:block;color:#8A95A3;font-size:11.5px;margin-top:1px}
.col-compteurs{display:flex;gap:7px;margin-top:9px}
.col-compteur{flex:1;min-width:0;padding:10px 11px;background:#14181F;border:1px solid #272E39;border-radius:10px}
.col-compteur .col-compteur-libelle{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8A95A3}
.col-compteur .col-compteur-valeur{font-family:var(--titre);font-size:20px;font-weight:600;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.col-compteur .col-compteur-valeur.warn{color:#FBBF24}
.col-reglages{display:flex;align-items:center;gap:7px;margin-top:9px;padding:9px 11px;background:none;border:1px solid #272E39;border-radius:10px;color:#B0BAC5;font-size:12px;font-weight:600;width:100%}
.col-reglages:hover{color:#EDF0F3;border-color:#3E4854}
.col-liste{display:flex;flex-direction:column;gap:1px}
.col-tache{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#EDF0F3}
.col-tache:hover{background:#1B2027;color:#EDF0F3}
.col-tache .col-tache-nom{flex:1;min-width:0;font-size:12.5px;font-weight:600}
.col-tache .col-tache-nb{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;background:#222832;color:#B0BAC5;line-height:1}
.col-tache .col-tache-nb.urgent{background:#EF4444;color:#fff}
.col-tache .col-tache-nb.attention{background:rgba(245,158,11,.18);color:#FBBF24}
.col-poste{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;background:none;border:0;border-radius:10px;color:#EDF0F3;text-align:left}
.col-poste:hover{background:#1B2027}
.col-poste:disabled{color:#8A95A3;cursor:not-allowed}
.col-poste .col-poste-avatar{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#222832;border-radius:50%;font-family:var(--titre);font-weight:600;font-size:10px}
.col-poste .col-poste-nom{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-poste .col-poste-etat{width:7px;height:7px;flex:none;border-radius:50%;background:#3A424E}
.col-poste .col-poste-etat.dispo{background:#22C55E;box-shadow:0 0 7px #22C55E}
.col-poste .col-poste-etat.appel{background:#EF4444}
.col-poste .col-poste-etat.pause{background:#F59E0B}

/* ---------- Bandeau de mise en service ---------- */
.ms-bandeau{margin:14px 20px 0;padding:13px 16px;background:#14181F;border:1px solid #272E39;border-left:3px solid #8D9BA8;border-radius:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ms-bandeau-gauche{flex:0 0 auto}
.ms-surtitre{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8D9BA8}
.ms-compte{font-family:var(--titre);font-size:18px;font-weight:600;margin-top:2px}
.ms-bandeau-milieu{flex:1 1 200px;min-width:0}
.ms-piste{display:block;height:6px;background:#0F1319;border-radius:999px;overflow:hidden}
.ms-piste > span{display:block;height:100%;background:#8D9BA8;border-radius:999px}
.ms-suivant{margin-top:7px;color:#B0BAC5;font-size:12.5px}
.ms-suivant strong{color:#EDF0F3;font-weight:600}
/* Écran « Mise en service » : en-tête sans filet + compteur 34 px du design. */
.ms-entete{padding-bottom:20px}
.ms-phrase{max-width:62ch}
.ms-compteur{flex:none;text-align:right}
.ms-compteur-valeur{font-size:34px;line-height:1}
.ms-compteur-note{font-size:12px}
.ms-fin{margin-top:20px}
.ms-carte{background:#14181F;border:1px solid #272E39;border-radius:14px;padding:16px 18px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ms-num{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#222832;border-radius:12px;font-family:var(--titre);font-weight:600;font-size:15px;color:#B0BAC5}
.ms-corps{flex:1 1 240px;min-width:0}
.ms-jetons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ms-fini{display:flex;align-items:center;gap:14px;margin-top:20px;padding:18px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);border-radius:14px}
.ms-fini-carre{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(34,197,94,.16);border-radius:14px;color:#4ADE80}

/* Barre du bas */
.bb-sep{width:1px;height:15px;background:#1D232C;flex:none}
.bb-point{width:8px;height:8px;flex:none;border-radius:50%;background:#3A424E}
.bb-point.ok{background:#22C55E;box-shadow:0 0 8px #22C55E}
.bb-point.bad{background:#EF4444}
.bb-fort{color:#EDF0F3;font-weight:700}
.bb-bad{color:#F87171;font-weight:700}
.bb-warn{color:#FBBF24;font-weight:700}
.bb-mono{font-family:var(--titre);font-variant-numeric:tabular-nums}
.bb-heure{flex:none;font-family:var(--titre);font-variant-numeric:tabular-nums;color:#EDF0F3}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;min-height:38px;padding:0 14px;border-radius:10px;border:1px solid #272E39;background:#1B2027;color:#EDF0F3;font-weight:600;font-size:13.5px;line-height:1.2;text-decoration:none;white-space:nowrap;position:relative;transition:background .15s,border-color .15s,color .15s}
.bouton:hover{background:#222832;color:#EDF0F3}
.bouton.principal{background:#8D9BA8;border-color:#8D9BA8;color:#0B0E14;font-size:13px;font-weight:700}
.bouton.principal:hover{background:#9EABB7;border-color:#9EABB7}
.bouton.fantome{background:transparent;border-color:#272E39;color:#B0BAC5}
.bouton.fantome:hover{background:#1B2027;color:#EDF0F3;border-color:#3E4854}
.bouton.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.25);color:#F87171}
.bouton.danger:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.3)}
.bouton.succes{background:#22C55E;border-color:#22C55E;color:#04220F;font-size:14px}
.bouton.succes:hover{background:#1FB555;border-color:#1FB555}
.bouton.petit{height:30px;min-height:30px;padding:0 10px;font-size:12.5px;border-radius:8px;gap:6px}
.bouton.petit .ic{width:15px;height:15px}
/* Format 34 px du design (P7/P8 : barre d'outils, en-tête d'agenda, sous-écrans) */
.bouton.moyen{height:34px;min-height:34px;padding:0 12px;gap:7px;font-size:13px}
/* Le design donne au bouton primaire deux survols : #9EABB7 partout, #A9B7C5 sur les écrans
   de réglages et de supervision (P7). « clair » demande le second. */
.bouton.principal.clair:hover{background:#A9B7C5;border-color:#A9B7C5}
.bouton.grand{height:48px;min-height:48px;padding:0 20px;font-size:15px;border-radius:12px;font-family:var(--titre);font-weight:600}
.bouton.plein{width:100%}
.bouton.carre{padding:0;width:38px;min-width:38px}
.bouton.carre.petit{width:30px;min-width:30px}
.bouton.lien{background:none;border:0;height:auto;min-height:0;padding:0;color:#B0BAC5;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bouton.lien:hover{color:#EDF0F3;background:none}
.bouton:disabled,.bouton[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.bouton.chargement{color:transparent!important;pointer-events:none}
.bouton.chargement .ic{visibility:hidden}
.bouton.chargement::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#EDF0F3;border-radius:50%;animation:tourne .7s linear infinite}
.groupe-boutons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bouton-icone{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid transparent;background:none;color:#8A95A3;position:relative;transition:background .12s,color .12s}
.bouton-icone:hover,.bouton-icone[aria-expanded="true"]{background:#1B2027;color:#EDF0F3;border-color:#272E39}
.bouton-icone .ic{width:18px;height:18px}

/* ---------- Champs de formulaire ---------- */
.champ{display:block;width:100%;height:40px;min-height:40px;border:1px solid #272E39;border-radius:10px;padding:0 12px;font-size:13.5px;background:#0F1319;color:#EDF0F3;outline:none;transition:border-color .15s}
.champ::placeholder{color:#6E7783}
.champ:hover{border-color:#3E4854}
.champ:focus{outline:none;border-color:#8D9BA8}
.champ:disabled{opacity:.55;cursor:not-allowed}
.champ[aria-invalid="true"]{border-color:#EF4444}
textarea.champ{min-height:72px;height:auto;padding:11px 12px;resize:vertical;line-height:1.6}
/* Bloc de note du design (P15) : 86 px, rembourrage plus large, rayon 12. */
textarea.champ.note{min-height:86px;padding:13px 15px;border-radius:12px;color:#EDF0F3}
select.champ{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#8A95A3 50%),linear-gradient(135deg,#8A95A3 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type="checkbox"],input[type="radio"]{accent-color:#8D9BA8;width:16px;height:16px;margin:0;flex:none}
.champ.code{font-family:var(--titre);font-size:26px;letter-spacing:.5em;text-align:center;padding:12px 0 12px .5em;height:auto;min-height:56px}
.etiquette{display:block;font-size:12px;font-weight:600;color:#B0BAC5;margin:16px 0 6px}
.etiquette:first-child{margin-top:0}
.case{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#B0BAC5;cursor:pointer;margin:18px 0}
.aide{font-size:12px;color:#8A95A3;margin-top:6px}
.erreur-champ{font-size:12px;color:#F87171;margin-top:6px;font-weight:700}
.formulaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.formulaire .large{grid-column:1/-1}
.champ-groupe{position:relative;display:flex;align-items:stretch}
.champ-groupe .champ{padding-right:46px}
.champ-groupe .bouton-icone{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;color:#8A95A3}

/* Interrupteur « classique » (conservé pour les vues qui l'utilisent) */
.interrupteur{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
/* La piste est le [data-pill] du design (voir plus haut) : ici, seulement l'étiquette qui le porte. */

/* ---------- Cartes, pastilles, encarts ---------- */
.carte{background:#14181F;border:1px solid #272E39;border-radius:16px;padding:18px;min-width:0}
.carte > h2,.carte > h3{margin-bottom:10px}
.carte-titre{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3;margin:0 0 14px;font-family:var(--texte)}
.carte.cliquable{cursor:pointer;transition:border-color .15s,background .15s}
.carte.cliquable:hover{border-color:#3E4854;background:#1B2027}
.carte.accent{border-top:3px solid #8D9BA8}
.chiffre-cle{font-family:var(--titre);font-size:29px;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

.pastille{display:inline-flex;align-items:center;gap:5px;height:22px;border-radius:999px;padding:0 9px;font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;background:#222832;color:#B0BAC5}
.pastille .ic{width:12px;height:12px}
.pastille.ok{background:rgba(34,197,94,.14);color:#4ADE80}
.pastille.bad{background:rgba(239,68,68,.14);color:#F87171}
.pastille.warn{background:rgba(245,158,11,.14);color:#FBBF24}
.pastille.info{background:rgba(141,155,168,.14);color:#A9B7C5}
.pastille.mut{background:#222832;color:#8A95A3}
.pastille.rouge{background:rgba(141,155,168,.18);color:#EDF0F3}
.jeton{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:#0F1319;border:1px solid #272E39;border-radius:999px;font-size:11.5px;color:#8A95A3}
.jeton.mono{font-family:var(--titre)}
.point{width:8px;height:8px;border-radius:50%;background:#3A424E;flex:none;display:inline-block}
/* Le design donne un halo à toutes ses pastilles vertes (0 0 7px), et 0 0 8px aux plus marquées. */
.point.ok{background:#22C55E;box-shadow:0 0 7px #22C55E}.point.bad{background:#EF4444}.point.warn{background:#F59E0B}.point.info{background:#8D9BA8}
.point.vif{box-shadow:0 0 8px #22C55E}

/* Note encadrée (design P25) : aucune graisse imposée, le design la laisse au corps de page. */
.encart{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:12.5px;background:#0F1319;color:#B0BAC5;border:1px solid transparent}
.encart .ic{margin-top:1px;color:#8A95A3}
.encart.ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28);color:#4ADE80}
.encart.ok .ic{color:#4ADE80}
.encart.bad{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#F87171}
.encart.bad .ic{color:#F87171}
.encart.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25);color:#FBBF24}
.encart.warn .ic{color:#FBBF24}
.encart.info{background:rgba(141,155,168,.08);border-color:rgba(141,155,168,.22);color:#C6CED6}
.encart.info .ic{color:#A9B7C5}
.encart.ia{background:rgba(141,155,168,.07);border-color:rgba(141,155,168,.22);color:#C6CED6;border-radius:16px;padding:16px 18px}
.encart.ia .ic{color:#A9B7C5}

/* ---------- Structure ---------- */
.grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grille.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899.98px){.grille.deux,.grille.trois{grid-template-columns:minmax(0,1fr)}}
.ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ligne.serree{gap:6px}
.ligne.entre{justify-content:space-between}
.ligne.nowrap{flex-wrap:nowrap}
.pile{display:flex;flex-direction:column;gap:12px;min-width:0}
.pile.large{gap:18px}
.pousse{margin-left:auto}
.separateur{height:1px;background:#1D232C;margin:14px 0}

.entete-vue{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid #1D232C;margin-bottom:24px}
/* Variante sans filet (design P6 : Mon compte, Scripts, Fiche d'appel, Mise en service). */
.entete-vue.nu{padding-bottom:0;border-bottom:0;margin-bottom:0}
.entete-vue .surtitre{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#79838F;margin-bottom:7px}
.entete-vue .surtitre:empty{display:none}
.entete-titres{min-width:0;flex:1 1 320px}
.titre-vue{font-family:var(--titre);font-size:25px;font-weight:600;letter-spacing:-.018em;margin:0;line-height:1.2}
.sous-titre{color:#8A95A3;font-size:13px;margin:6px 0 0}
.sous-titre:empty{display:none}
/* Barre d'outils du design (P12) : recherche, onglets pilule et filtres sur une ligne. */
.barre-outils{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding-bottom:18px}
.barre-outils .case{margin:0}
.barre-outils > .champ{width:auto;flex:0 1 200px;min-width:0;height:38px;min-height:38px}

/* Lien de retour (design P28) : un seul patron pour tous les sous-écrans. */
.retour{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0;margin:0 0 10px;color:#B0BAC5;font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;min-height:0}
.retour:hover{color:#EDF0F3;background:none}
.retour .ic{width:16px;height:16px}

/* Titre de panneau (design : `h2` 16 px). `.carte-titre` est le surtitre 10,5 px, pas ce titre-là. */
.titre-panneau{font-family:var(--titre);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;color:#EDF0F3;margin:0;min-width:0;flex:1}

/* Ligne clé / valeur (design P22) */
.kvs{display:block;min-width:0}
.kv{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1D232C;min-width:0}
.kv:last-child{border-bottom:0}
.kv.haut{align-items:flex-start}
.kv-cle{flex:none;color:#B0BAC5;font-size:13px}
.kv-val{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere}

/* Chiffre-clé (design P19) : grille, carte, libellé, valeur, note */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.chiffres:empty{display:none}
.cc{background:#14181F;border:1px solid #272E39;border-radius:14px;padding:16px;min-width:0}
.cc-lib{font-family:var(--texte);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.cc-val{font-family:var(--titre);font-size:29px;font-weight:600;line-height:1.05;letter-spacing:-.01em;margin-top:6px;color:#EDF0F3;font-variant-numeric:tabular-nums}
.cc-val.ok{color:#4ADE80}.cc-val.warn{color:#FBBF24}.cc-val.bad{color:#F87171}
.cc-note{color:#8A95A3;font-size:12px}

/* Listes */
.liste{list-style:none;margin:0;padding:0;border:1px solid #272E39;border-radius:16px;background:#14181F;overflow:hidden}
.liste.nue{border:0;background:none;border-radius:0}
.element{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #1D232C;min-width:0;color:#EDF0F3;text-decoration:none;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;font:inherit}
.liste > .element:last-child,.liste > li:last-child > .element{border-bottom:0}
a.element,button.element,.element.cliquable{cursor:pointer;transition:background .12s}
a.element:hover,button.element:hover,.element.cliquable:hover{background:#1B2027;color:#EDF0F3}
.element.actif{background:rgba(141,155,168,.16)}
.element.non-lu{box-shadow:inset 3px 0 0 #8D9BA8}
.element-corps{flex:1;min-width:0}
.element-titre{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.element-texte{color:#8A95A3;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.element-meta{color:#8A95A3;font-size:12px;white-space:nowrap;flex:none}

/* État vide */
.vide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:64px 28px;color:#B0BAC5;font-size:13px;background:#14181F;border:1px dashed #272E39;border-radius:16px}
.vide .ic{width:25px;height:25px;color:#6E7783}
.vide > .ic{width:52px;height:52px;padding:13px;background:#0F1319;border-radius:16px;box-sizing:content-box}
.vide-titre{font-size:15px;font-weight:700;color:#EDF0F3}
.vide .bouton{margin-top:6px}
/* Forme compacte du bloc vide (design P21 : une ligne, padding 18, icône à sa taille normale) :
   à l'intérieur d'un panneau, quand l'état vide ne doit pas occuper tout l'écran. */
.vide.compact{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:10px;padding:18px;color:#8A95A3}
.vide.compact > .ic{width:18px;height:18px;padding:0;background:none;border-radius:0}

/* Onglets pilule du design */
.onglets{display:flex;gap:4px;padding:3px;background:#14181F;border:1px solid #272E39;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;margin-bottom:18px;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglet{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:none;border:0;border-radius:999px;font-weight:600;font-size:14px;color:#8A95A3;white-space:nowrap;text-decoration:none}
.onglet:hover{color:#C6CED6}
.onglet.actif,.onglet[aria-selected="true"]{background:#283040;color:#EDF0F3}
.onglet .menu-compteur{min-width:17px;height:17px;font-size:10px}

/* Tableaux */
.tableau-conteneur{position:relative;overflow-x:auto;border:1px solid #272E39;border-radius:16px;background:#14181F}
.tableau{width:100%;border-collapse:collapse;font-size:13.5px}
.tableau th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3;padding:12px 16px;border-bottom:1px solid #1D232C;white-space:nowrap;background:#14181F}
.tableau td{padding:12px 16px;border-bottom:1px solid #1D232C;vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau tbody tr{transition:background .12s}
.tableau tbody tr:hover{background:#1B2027}
.tableau tr.cliquable{cursor:pointer}
.tableau .num{text-align:right;font-variant-numeric:tabular-nums}
/* Tableau posé DANS un panneau : il n'a ni cadre ni fond propres, ses lignes se séparent
   par un filet fin, comme la liste encadrée du design (P2). Valable sur tous les écrans. */
.carte > .tableau th{background:none}
.carte .tableau-conteneur{background:none;border:0;border-radius:0}
.carte .tableau th{background:none;padding:0 12px 10px;border-bottom:0}
.carte .tableau td{padding:11px 12px;border-bottom:0;border-top:1px solid #1D232C}

/* Avatars, touches */
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#283040;color:#EDF0F3;font-family:var(--titre);font-weight:600;font-size:12px;position:relative;text-transform:uppercase}
.avatar.petit{width:26px;height:26px;font-size:10px;background:#222832;color:#B0BAC5}
/* Design P18 : 26 (colonne gauche) · 34 (barre, listes) · 36 (administration, agents, cartes) · 48 (appel flottant) */
.avatar.moyen{width:36px;height:36px;font-size:12px}
.avatar.grand{width:48px;height:48px;font-size:15px}
.avatar.rouge{background:rgba(141,155,168,.18);color:#A9B7C5}
.avatar .point{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border:2px solid #0D1117}
.kbd{display:inline-block;font-family:var(--titre);font-size:11.5px;line-height:1.4;padding:1px 8px;border-radius:999px;border:1px solid #272E39;background:#0F1319;color:#8A95A3}

/* ---------- Chargement ---------- */
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes miroite{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.squelette{display:block;min-height:14px;border-radius:8px;background:linear-gradient(90deg,#14181F 25%,#1B2027 45%,#14181F 65%);background-size:300% 100%;animation:miroite 1.4s ease-in-out infinite;color:transparent!important;user-select:none}
.squelette.bloc{min-height:72px;border-radius:16px}
.squelette.ligne-texte{height:12px;margin:8px 0}
.rond-chargement{width:22px;height:22px;border-radius:50%;border:2px solid #272E39;border-top-color:#8D9BA8;animation:tourne .8s linear infinite;flex:none}
.rond-chargement.petit{width:14px;height:14px}
.bloc-chargement{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px 16px;color:#8A95A3;font-size:13px}
.apparait{animation:apparait .25s ease both}

/* Erreur de vue */
.erreur-vue{max-width:560px;margin:40px auto;text-align:center;background:none;border:0}
.erreur-vue > .ic{width:40px;height:40px;color:#F87171;stroke-width:1.5;padding:0;background:none}
.erreur-vue h2{margin:12px 0 6px;font-size:22px}
.erreur-vue p{color:#B0BAC5;line-height:1.6}
.erreur-vue .groupe-boutons{justify-content:center;margin-top:14px}

/* ---------- Recherche globale ---------- */
.recherche{position:relative}
.recherche-champ{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid #272E39;border-radius:999px;background:#14181F;color:#8A95A3;transition:border-color .15s}
.recherche-champ:focus-within{border-color:#3E4854;color:#B0BAC5}
.recherche-champ input{flex:1;min-width:0;border:0;background:none;outline:none;height:100%;font-size:13.5px;color:#EDF0F3}
.recherche-champ input::placeholder{color:#6E7783}
.recherche-champ input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.recherche-champ .ic{width:15px;height:15px}
.recherche-champ .kbd{flex:none}
@media (max-width:1399.98px){.recherche-champ .kbd{display:none}}
.recherche-panneau{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:320px;max-height:min(460px,70vh);overflow-y:auto;background:#14181F;border:1px solid #272E39;border-radius:16px;box-shadow:var(--ombre);padding:6px;z-index:60;animation:apparait .15s ease both}
@media (max-width:520px){.recherche-panneau{position:fixed;top:calc(var(--hauteur-barre) + env(safe-area-inset-top,0px));left:8px;right:8px;min-width:0}}
.recherche-titre{padding:8px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.recherche-ligne{display:flex;align-items:center;gap:4px;border-radius:10px}
.recherche-ligne:hover{background:#1B2027}
.recherche-resultat{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 10px;background:none;border:0;border-radius:10px;text-align:left;color:#EDF0F3}
.recherche-resultat:focus-visible{outline-offset:-2px}
.recherche-resultat .element-corps{min-width:0}
.recherche-vide{padding:14px 12px;color:#8A95A3;font-size:13px}

/* ---------- Menus déroulants (notifications, utilisateur) ---------- */
.deroulant{position:relative}
.deroulant-panneau{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-width:calc(100vw - 16px);background:#14181F;border:1px solid #272E39;border-radius:16px;box-shadow:var(--ombre);z-index:60;overflow:hidden;animation:apparait .15s ease both}
.deroulant-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #1D232C}
.deroulant-entete h2{font-size:16px;flex:1;min-width:0}
.deroulant-entete .bouton{flex:none}
.deroulant-corps{max-height:min(420px,60vh);overflow-y:auto}
.deroulant-pied{border-top:1px solid #1D232C;padding:8px}
.deroulant-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;border-radius:10px;color:#B0BAC5;text-align:left;text-decoration:none;font-size:13px;font-weight:600}
.deroulant-item:hover{background:#1B2027;color:#EDF0F3}
.deroulant-item.danger{color:#F87171}
.deroulant-item.danger:hover{background:rgba(239,68,68,.14)}
.deroulant-liste{padding:6px}
/* Intertitre du menu du compte (P3) : il coiffe les pages que le design ne met pas en onglet. */
.deroulant-intertitre{padding:8px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.deroulant-item[aria-current="page"]{color:#EDF0F3;background:#1B2027}
.bordure-haut{border-top:1px solid #1D232C}
.utilisateur-bouton{display:flex;align-items:center;gap:9px;height:34px;padding:0;border-radius:999px;border:0;background:none;color:#EDF0F3}
.utilisateur-nom{font-weight:600;font-size:13px;max-width:140px}
@media (max-width:1399.98px){.utilisateur-nom,.utilisateur-bouton > .ic{display:none}}
.utilisateur-fiche{display:flex;align-items:center;gap:12px;padding:16px}
.utilisateur-fiche .element-titre{font-size:14.5px}
.compteur-cloche{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#EF4444;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #0D1117;line-height:1}
.notif{display:flex;gap:10px;align-items:flex-start;width:100%;padding:12px 16px;border:0;border-bottom:1px solid #1D232C;background:none;text-align:left;color:#EDF0F3}
.notif:last-child{border-bottom:0}
.notif:hover{background:#1B2027}
.notif .notif-icone{width:30px;height:30px;border-radius:10px;background:rgba(141,155,168,.14);display:inline-flex;align-items:center;justify-content:center;flex:none;color:#A9B7C5}
.notif.haute .notif-icone{background:rgba(239,68,68,.14);color:#F87171}
.notif.non-lue .notif-titre::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8D9BA8;margin-left:7px;vertical-align:middle}
.notif-titre{font-weight:600;font-size:14px}
.notif-texte{color:#B0BAC5;font-size:12.5px;margin-top:1px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-date{color:#8A95A3;font-size:12px;margin-top:3px}
.menu-compteur{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#EF4444;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* ---------- Modales et feuilles ---------- */
body.modale-ouverte{overflow:hidden}
.modale-fond{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,8,16,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fondu .15s ease both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes monte{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes glisse-haut{from{transform:translateY(100%)}to{transform:none}}
.modale{width:min(520px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#14181F;border:1px solid #272E39;border-radius:22px;box-shadow:var(--ombre-modale);position:relative;overflow:hidden;animation:monte .22s cubic-bezier(.2,.7,.2,1) both}
.modale.large{width:min(860px,100%)}
.modale-entete{display:flex;align-items:center;gap:12px;padding:22px 22px 6px}
.modale-entete h2{flex:1;min-width:0;font-size:22px}
.modale-corps{padding:10px 22px 18px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.modale-corps > p:last-child{margin-bottom:0}
.modale-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 22px 20px;border-top:1px solid #1D232C}
.modale-fond.feuille{align-items:flex-end;padding:0}
.modale-fond.feuille .modale{width:100%;max-width:640px;border-radius:22px 22px 0 0;max-height:85dvh;padding-bottom:var(--bas-sur);animation:glisse-haut .25s cubic-bezier(.2,.7,.2,1) both}
.modale-fond.feuille .modale::after{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#272E39}
@media (max-width:560px){
  .modale-fond{align-items:flex-end;padding:0}
  .modale,.modale.large{width:100%;border-radius:22px 22px 0 0;max-height:92dvh;padding-bottom:var(--bas-sur);animation:glisse-haut .25s cubic-bezier(.2,.7,.2,1) both}
  .modale-actions .bouton{flex:1 1 auto}
}
.feuille-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.feuille-lien{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:84px;padding:10px 6px;border-radius:14px;border:1px solid #272E39;background:#14181F;color:#B0BAC5;text-decoration:none;font-size:12px;font-weight:600;text-align:center;line-height:1.25}
.feuille-lien .ic{width:24px;height:24px}
.feuille-lien:hover,.feuille-lien[aria-current="page"]{color:#EDF0F3;border-color:#3E4854;background:#1B2027}
.feuille-lien[aria-current="page"] .ic{color:#A9B7C5}
.feuille-intertitre{grid-column:1/-1;margin:10px 2px 0;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}

/* ---------- Toasts ---------- */
#toasts{position:fixed;right:24px;bottom:calc(var(--hauteur-bas) + 14px);z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:calc(100vw - 32px)}
@media (max-width:899.98px){#toasts{left:12px;right:12px;bottom:calc(var(--hauteur-menu-mobile) + var(--bas-sur) + 10px);align-items:stretch}}
body.non-connecte #toasts{bottom:18px}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:380px;max-width:100%;padding:14px 14px 14px 16px;border-radius:16px;background:#14181F;border:1px solid #272E39;box-shadow:var(--ombre);color:#EDF0F3;font-size:13.5px;animation:toast-entre .25s cubic-bezier(.2,.7,.2,1) both;position:relative;overflow:hidden}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#8A95A3}
.toast.ok::before{background:#22C55E}.toast.ok .toast-ic{color:#4ADE80}
.toast.erreur::before{background:#EF4444}.toast.erreur .toast-ic{color:#F87171}
.toast.ia::before{background:#8D9BA8}.toast.ia .toast-ic{color:#A9B7C5}
.toast.info::before{background:#8D9BA8}.toast.info .toast-ic{color:#A9B7C5}
.toast.sortie{animation:toast-sort .2s ease both}
.toast.cliquable{cursor:pointer}
.toast.cliquable:hover{border-color:#3E4854}
.toast-ic{flex:none;margin-top:1px}
.toast-corps{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-titre{font-weight:700}
.toast-texte{color:#B0BAC5;font-size:12.5px}
.toast .bouton-icone{width:26px;height:26px;margin:-3px -3px 0 0}
.toast .bouton-icone .ic{width:15px;height:15px}
@keyframes toast-entre{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-sort{to{opacity:0;transform:translateX(20px)}}

/* ---------- Écran de connexion ---------- */
#ecran-connexion{display:none}
body.non-connecte #ecran-connexion{display:block}
body.non-connecte{min-height:100vh;min-height:100dvh;background:radial-gradient(900px 520px at 20% -10%,#1E2632 0%,#0B0E14 60%)}
.connexion{min-height:100vh;min-height:100dvh;display:grid;place-items:start center;padding:24px;overflow-y:auto}
.connexion-duo{width:100%;max-width:420px;margin-block:auto}
.connexion-marque{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:28px}
.connexion-marque .marque-nx{font-size:27px}
.connexion-marque .connexion-sous{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#8A95A3;margin-top:8px}
.connexion-carte{position:relative;min-width:0;background:#14181F;border:1px solid #272E39;border-radius:16px;padding:28px 24px;animation:monte .45s cubic-bezier(.2,.7,.2,1) both}
.connexion-entete h2{font-size:22px;font-weight:600}
.connexion-entete p{color:#B0BAC5;font-size:13.5px;margin:6px 0 24px}
.connexion-etape{animation:entre-droite .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes entre-droite{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.connexion-etape .champ:not(.code){height:46px;min-height:46px;padding:0 14px;border-radius:12px;font-size:14.5px}
.connexion-etape .champ-groupe .champ{padding-right:46px}
.connexion-etape .bouton.grand{margin-top:0}
.connexion-message{margin-top:0;margin-bottom:18px}
.connexion-message:empty{display:none}
.connexion-message .encart.bad{animation:secoue .45s ease}
@keyframes secoue{15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}90%{transform:translateX(2px)}}
.facteurs{display:flex;gap:8px;margin-bottom:22px}
.facteur{flex:1;min-width:0;border-top:2px solid #272E39;padding-top:9px;transition:border-color .3s}
.facteur .n{font-family:var(--titre);font-size:10.5px;letter-spacing:.14em;color:#8A95A3}
.facteur .l{font-size:12px;font-weight:600;color:#8A95A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facteur.actif{border-top-color:#8D9BA8}
.facteur.actif .n{color:#A9B7C5}
.facteur.actif .l{color:#EDF0F3}
.facteur.fait{border-top-color:#3E4854}
.facteur.fait .l{color:#B0BAC5}
.connexion-mention{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid #272E39;color:#8A95A3;font-size:12px}
.connexion-mention .ic{width:14px;height:14px}
.connexion-regle{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:12px;color:#8A95A3}
.connexion-regle li{display:flex;align-items:center;gap:7px}
.connexion-regle li .ic{width:13px;height:13px;color:#3A424E}
.connexion-regle li.valide{color:#4ADE80}
.connexion-regle li.valide .ic{color:#4ADE80}
.qr-cadre{width:208px;height:208px;margin:14px auto 6px;padding:12px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center}
.qr-cadre svg{width:100%;height:100%;display:block}
.qr-cadre.indisponible{background:#0F1319;border:1px dashed #272E39;color:#8A95A3;font-size:12px;text-align:center;padding:18px}
.cle-secrete{margin-top:8px;padding:12px;border-radius:10px;background:#0F1319;border:1px solid #272E39;font-family:var(--titre);font-size:15px;letter-spacing:.06em;word-spacing:.2em;text-align:center;overflow-wrap:anywhere;user-select:all}
.connexion details{margin-top:8px;font-size:13px;color:#B0BAC5}
.connexion summary{cursor:pointer;color:#8A95A3;font-weight:600;font-size:12.5px;padding:4px 0}
.connexion summary:hover{color:#EDF0F3}
.connexion-etapes-liste{margin:10px 0 0;padding-left:18px;color:#B0BAC5;font-size:13px}
.connexion-etapes-liste li{margin:3px 0}
.connexion-fini{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 12px}
.connexion-fini svg{width:64px;height:64px}
.connexion-fini .cc{fill:none;stroke:#4ADE80;stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:trace .6s ease forwards}
.connexion-fini .ck{fill:none;stroke:#4ADE80;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:trace .35s .5s ease forwards}
.connexion-fini .gras{color:#4ADE80}
@keyframes trace{to{stroke-dashoffset:0}}
.connexion-retour{text-align:center;margin-top:12px}
.centre-copie{margin-top:8px;justify-content:center}
.ecran-erreur{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}

/* ---------- Mobile (seuil unique 899.98 px) ---------- */
@media (max-width:1199.98px){
  #barre-recherche{display:none}
}
@media (max-width:899.98px){
  #appli{
    grid-template-rows:auto auto minmax(0,1fr) calc(var(--hauteur-menu-mobile) + var(--bas-sur));
  }
  #barre{padding:env(safe-area-inset-top,0px) 10px 0;min-height:var(--hauteur-barre);gap:8px}
  #menu-mobile{grid-row:4/5;grid-column:1/-1}
  #corps{grid-template-columns:minmax(0,1fr)}
  #colonne{display:none}
  #barre-bas{display:none}
  #barre-onglets{display:none}
  #menu-mobile{display:flex;align-items:stretch;background:#0D1117;border-top:1px solid #1D232C;padding-bottom:var(--bas-sur);z-index:30}
  .vue-contenu{padding:18px 16px 32px}
  h1,.titre-vue{font-size:21px}
  .entete-vue{gap:14px;padding-bottom:16px;margin-bottom:18px}
  .recherche-champ{max-width:none}
  .barre-outils{gap:8px;padding-bottom:14px}
  .ba{margin:10px 12px 0;padding:10px 12px;gap:12px}
  .ba-chrono{font-size:22px}
}
.mm-lien{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;background:none;border:0;color:#79838F;text-decoration:none;font-size:11px;font-weight:600;position:relative;-webkit-tap-highlight-color:transparent}
.mm-lien .ic{width:22px;height:22px}
.mm-lien[aria-current="page"],.mm-lien[aria-expanded="true"]{color:#EDF0F3}
.mm-lien[aria-current="page"] .ic{color:#A9B7C5}
.mm-lien[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:2px;border-radius:0 0 2px 2px;background:#8D9BA8}
.mm-lien .menu-compteur{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10px}
/* Liens de la liste complète (#menu, masquée) : styles du design pour un menu vertical. */
.menu-lien{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#8A95A3;text-decoration:none;font-weight:600;font-size:13.5px}
.menu-texte{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-entete{padding:18px 18px 8px}
.menu-groupe{list-style:none;margin:0;padding:6px 10px}
.menu-intertitre{padding:16px 20px 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A95A3}
.menu-pied{margin-top:auto;padding:14px 20px 18px;font-family:var(--titre);font-size:10.5px;letter-spacing:.06em;color:#6E7783}
.menu-role{font-family:var(--titre);font-weight:600;font-size:15px;margin-top:4px;color:#EDF0F3}

/* ---------- Hors ligne ---------- */
body.hors-ligne #barre{box-shadow:inset 0 -2px 0 #F59E0B}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .squelette{animation:none;background:#1B2027}
  .rond-chargement,.bouton.chargement::after{animation:tourne 1.6s linear infinite!important;animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}

/* ---------- Impression ---------- */
@media print{
  #barre,#menu,#poste,#menu-mobile,#toasts,#couche-appel,#colonne,#bandeau-appel,#bandeau-service,#barre-bas{display:none!important}
  .retour,.barre-outils{display:none!important}
  #appli,#corps,#zone{display:block;height:auto}
  #vue{overflow:visible;background:none}
  body{background:#fff;color:#000}
}