/* ════════════════════════════════════════════════════════════════════════════
   Console d'administration Lumi
   Feuille de style unique. Aucune dépendance.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --ground:#F2F3F7;
  --surface:#FFFFFF;
  --surface-2:#E9EAF1;
  --surface-3:#F7F7FB;
  --ink:#15141D;
  --ink-2:#3F3D4B;
  --muted:#6D6B7C;
  --line:#DCDCE5;
  --line-soft:#E9E9F0;
  --accent:#B36E17;
  --accent-vif:#EFA33A;
  --indigo:#3A3670;
  --ok:#1C7A55;
  --ok-bg:#E3F1EA;
  --warn:#A96A08;
  --warn-bg:#F8ECD8;
  --crit:#B2333B;
  --crit-bg:#F8E4E5;
  --neutre-bg:#E7E7EF;
  --ombre:0 1px 2px rgba(20,18,32,.05), 0 6px 20px rgba(20,18,32,.05);

  /* Couleurs des groupes de navigation.
     Volontairement vives et distinctes : sur une barre du bas, la couleur est
     ce que l'œil retient avant l'étiquette. Elles ne servent QU'À identifier
     une section — jamais à signaler un danger. Aucun jaune ni orange : le
     rouge reste réservé aux vraies erreurs, et rien d'autre ne crie. */
  --g-apercu:#5E5CE6;
  --g-moderation:#FF375F;
  --g-communaute:#0A84FF;
  --g-argent:#2FA84F;
  --g-pilotage:#AF52DE;

  /* Verre dépoli de la barre du bas. */
  --verre:rgba(255,255,255,.74);
  --verre-bord:rgba(20,18,32,.10);
  --ombre-barre:0 0 0 .5px rgba(20,18,32,.05), 0 12px 36px rgba(20,18,32,.16);
}

/* Mode sombre.
   Le fond descend plus bas et le texte remonte plus haut qu'avant : sur un
   écran de portable, à la lumière du jour, l'ancien couple gris moyen sur
   gris foncé se lisait mal. Les surfaces s'éclaircissent par paliers nets
   pour que l'œil distingue une carte de son fond sans avoir à chercher la
   bordure. Les couleurs de groupe sont éclaircies : une teinte vive sur fond
   sombre paraît toujours plus terne qu'elle ne l'est. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D0C12;
    --surface:#1A1922;
    --surface-2:#282732;
    --surface-3:#211F2A;
    --ink:#F5F4F9;
    --ink-2:#D2D0DC;
    --muted:#9997AB;
    --line:#34323F;
    --line-soft:#2A2833;
    --accent:#F0AC55;
    --accent-vif:#FFC178;
    --indigo:#B4ADF0;
    --ok:#5CD1A2;
    --ok-bg:#142C23;
    --warn:#E2A648;
    --warn-bg:#2E2413;
    --crit:#FF8A93;
    --crit-bg:#331A1D;
    --neutre-bg:#2A2934;
    --ombre:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.34);
    --g-apercu:#8886FF;
    --g-moderation:#FF6B87;
    --g-communaute:#4DA8FF;
    --g-argent:#4CD07A;
    --g-pilotage:#CB84EE;
    --verre:rgba(30,29,38,.76);
    --verre-bord:rgba(255,255,255,.10);
    --ombre-barre:0 0 0 .5px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0D0C12;--surface:#1A1922;--surface-2:#282732;--surface-3:#211F2A;
  --ink:#F5F4F9;--ink-2:#D2D0DC;--muted:#9997AB;--line:#34323F;--line-soft:#2A2833;
  --accent:#F0AC55;--accent-vif:#FFC178;--indigo:#B4ADF0;
  --ok:#5CD1A2;--ok-bg:#142C23;--warn:#E2A648;--warn-bg:#2E2413;
  --crit:#FF8A93;--crit-bg:#331A1D;--neutre-bg:#2A2934;
  --ombre:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.34);
  --g-apercu:#8886FF;--g-moderation:#FF6B87;--g-communaute:#4DA8FF;
  --g-argent:#4CD07A;--g-pilotage:#CB84EE;
  --verre:rgba(30,29,38,.76);--verre-bord:rgba(255,255,255,.10);
  --ombre-barre:0 0 0 .5px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.6);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.cache{display:none !important}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace}

a{color:inherit}
:focus-visible{outline:2px solid var(--accent-vif);outline-offset:2px;border-radius:2px}

/* ─────────────────────────── Boutons ─────────────────────────── */
.btn{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:8px 15px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  background:transparent;
  color:var(--ink);
  transition:background .12s ease, border-color .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primaire{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primaire:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-secondaire{border-color:var(--line);background:var(--surface)}
.btn-secondaire:hover{background:var(--surface-2)}
.btn-fantome{border-color:var(--line);color:var(--ink-2)}
.btn-danger{border-color:var(--crit);color:var(--crit)}
.btn-danger:hover{background:var(--crit-bg)}
.btn-large{width:100%;padding:11px;font-size:15px;margin-top:6px}
.btn-bloc{width:100%}
.btn-petit{padding:5px 11px;font-size:12.5px;border-radius:8px;border-color:var(--line)}

/* ─────────────────────────── Connexion ─────────────────────────── */
/* L'écran de connexion est la seule page que trois personnes sur quatre
   verront tous les jours avant d'entrer. Il mérite mieux qu'un formulaire
   posé au milieu du gris : un fond qui respire, une carte qui a du relief,
   des champs assez grands pour être visés sans réfléchir.                  */
.ecran-auth{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
/* Deux halos très diffus, empruntés aux couleurs des groupes. Assez pâles
   pour ne jamais concurrencer le texte, assez présents pour que la page ne
   soit pas un aplat mort. */
.ecran-auth::before,
.ecran-auth::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(90px);opacity:.5;
}
.ecran-auth::before{
  width:460px;height:460px;top:-170px;left:-130px;
  background:radial-gradient(circle, var(--g-apercu), transparent 68%);
}
.ecran-auth::after{
  width:520px;height:520px;bottom:-210px;right:-160px;
  background:radial-gradient(circle, var(--accent-vif), transparent 68%);
}

.carte-auth{
  position:relative;z-index:1;
  width:100%;
  max-width:404px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px 36px 34px;
  box-shadow:0 1px 2px rgba(20,18,32,.05), 0 18px 50px rgba(20,18,32,.14);
}
.logo-lumi{
  width:52px;height:52px;border-radius:15px;
  background:radial-gradient(circle at 32% 28%, var(--accent-vif), #C4761B 68%);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-vif) 14%, transparent),
             0 6px 18px color-mix(in srgb, var(--accent-vif) 34%, transparent);
  margin-bottom:24px;
}
.logo-lumi.petit{
  width:30px;height:30px;border-radius:9px;margin:0;flex:0 0 auto;
  box-shadow:0 2px 7px color-mix(in srgb, var(--accent-vif) 34%, transparent);
}
.carte-auth h1{font-size:25px;font-weight:700;letter-spacing:-.025em;margin:0 0 7px}
.auth-sous{color:var(--muted);font-size:14px;margin:0 0 26px;line-height:1.45}
.auth-aide{color:var(--muted);font-size:12.5px;margin:12px 0 4px;line-height:1.45}
.carte-auth label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 7px;
}
.carte-auth input{
  width:100%;padding:12px 14px;font-family:inherit;font-size:15.5px;
  background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;
  transition:border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.carte-auth input:focus{
  outline:none;background:var(--surface);
  border-color:var(--g-apercu);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--g-apercu) 20%, transparent);
}
.carte-auth .btn-large{border-radius:11px;padding:12px;margin-top:22px}
.champ-code{
  font-family:"JetBrains Mono",monospace !important;
  font-size:24px !important;letter-spacing:.35em;text-align:center;
}
.erreur-auth{
  color:var(--crit);font-size:13.5px;margin:16px 0 0;min-height:1px;line-height:1.45;
}
.qr-mfa{
  display:grid;place-items:center;padding:14px;margin-top:8px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
}
.qr-mfa svg,.qr-mfa img{max-width:190px;height:auto;display:block}

/* ═══════════════════════════ Structure console ═══════════════════════════
   La navigation est passée du rail latéral à une barre flottante en bas.
   Pourquoi : quinze entrées empilées à gauche mangeaient un quart de l'écran
   en permanence pour une liste qu'on ne lit qu'en changeant de section. En bas,
   cinq groupes colorés suffisent à s'orienter, et l'écran entier revient au
   contenu — qui est ce qu'on regarde 99 % du temps.
   ════════════════════════════════════════════════════════════════════════ */

#console{display:flex;flex-direction:column;min-height:100vh}

/* L'en-tete et les pastilles de section restent collees en haut ensemble.
   Les rendre collantes separement obligerait a fixer en dur la hauteur de
   l'une pour caler l'autre — un chiffre qui se decale des qu'un titre passe
   sur deux lignes. Un seul bloc collant, aucun calcul. */
.entete-zone{position:sticky;top:0;z-index:5;background:var(--ground)}

.principal{min-width:0;display:flex;flex-direction:column;flex:1}

/* ── Barre du haut ─────────────────────────────────────────────────────── */
.entete{
  display:flex;align-items:center;gap:16px;
  padding:16px 30px 14px;
}
.entete-marque{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.entete-titres{min-width:0}
.entete h2{
  font-size:25px;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.15;
}
.entete-env{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;
}
.entete-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.horodatage{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted)}

.jeton-admin{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 6px 5px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);max-width:230px;
}
.jeton-admin .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}

/* ── Sous-navigation : les sections du groupe actif ────────────────────── */
.sous-nav{
  display:flex;gap:7px;flex-wrap:wrap;
  padding:0 30px 16px;
}
.sous-nav:empty{display:none}
.sous-nav button{
  font-family:inherit;font-size:13.5px;font-weight:550;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:background .13s ease, color .13s ease, border-color .13s ease;
}
.sous-nav button:hover{background:var(--surface-2)}
.sous-nav button.actif{
  background:var(--groupe,var(--ink));border-color:transparent;color:#fff;font-weight:650;
}
.sous-nav .compte{
  font-family:"JetBrains Mono",monospace;font-size:11px;
  padding:0 6px;border-radius:999px;
  background:var(--crit);color:#fff;
}
.sous-nav button.actif .compte{background:rgba(255,255,255,.28)}
.sous-nav .compte[hidden]{display:none}

.vue{padding:4px 30px 132px;min-width:0}

/* ── Barre du bas ──────────────────────────────────────────────────────────
   Verre dépoli, flottante, centrée : le vocabulaire d'une barre d'onglets
   d'iPad. `backdrop-filter` n'est pas un ornement — c'est lui qui donne
   l'impression que la barre est posée SUR le contenu plutôt que collée
   dessous, et qui laisse deviner ce qui défile derrière.                    */
.barre-nav{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:40;display:flex;gap:2px;
  padding:7px;border-radius:22px;
  background:var(--verre);
  border:1px solid var(--verre-bord);
  box-shadow:var(--ombre-barre);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
}
.barre-nav::-webkit-scrollbar{display:none}

.nav-onglet{
  position:relative;
  font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:76px;padding:8px 10px 7px;border-radius:16px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nav-onglet:hover{background:color-mix(in srgb, var(--groupe) 10%, transparent);color:var(--ink-2)}
.nav-onglet.actif{color:var(--groupe);background:color-mix(in srgb, var(--groupe) 14%, transparent)}

.nav-icone{
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--groupe) 16%, transparent);
  color:var(--groupe);
  transition:background .15s ease, transform .15s ease;
}
.nav-onglet.actif .nav-icone{
  background:var(--groupe);color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb, var(--groupe) 45%, transparent);
}
.nav-onglet:active .nav-icone{transform:scale(.92)}
.nav-icone svg{width:17px;height:17px;display:block}

.nav-pastille{
  position:absolute;top:4px;right:12px;
  min-width:17px;height:17px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--crit);color:#fff;
  font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;
  border-radius:999px;
  box-shadow:0 0 0 2px var(--verre);
}
.nav-pastille[hidden]{display:none}

@media (max-width:780px){
  .entete{padding:13px 16px 11px;gap:10px}
  .entete h2{font-size:21px}
  .entete-marque{display:none}
  .sous-nav{padding:0 16px 12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sous-nav::-webkit-scrollbar{display:none}
  .sous-nav button{white-space:nowrap}
  .vue{padding:4px 16px 128px}
  .horodatage{display:none}
  .nav-onglet{min-width:62px;font-size:10.5px;padding:7px 6px 6px}
}

/* ─────────────────────────── Blocs ─────────────────────────── */
.grille{display:grid;gap:15px}
.g-chiffres{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.g-deux{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.tuile{
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:17px 19px 18px;
}
.tuile-lab{
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.tuile-val{
  font-family:"JetBrains Mono",monospace;font-size:27px;font-weight:500;
  letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;
}
.tuile-note{font-size:12.5px;color:var(--muted);margin-top:5px}
.tuile.alerte{border-color:var(--crit);background:var(--crit-bg)}
.tuile.alerte .tuile-val,.tuile.alerte .tuile-lab{color:var(--crit)}
/* « Donnée manquante » n'est pas une alarme : c'est une information en
   attente. Elle se signale par un liseré et un texte discret, pas par une
   couleur qui ferait croire à une panne. */
.tuile.attention{border-color:var(--line);border-left:3px solid var(--muted)}
.tuile.attention .tuile-val{color:var(--muted);font-size:19px}

.bloc{
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.bloc-tete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 19px;border-bottom:1px solid var(--line-soft);background:var(--surface-3);
}
.bloc-tete h3{font-size:14.5px;font-weight:600;margin:0}
.bloc-corps{padding:19px}

.section-titre{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:30px 0 13px;
}
.section-titre:first-child{margin-top:0}

/* Les avis sont neutres par défaut.
   Un bandeau coloré à chaque écran finit par ne plus rien signaler : quand
   tout est orange, plus rien n'attire l'œil. Ceux-ci expliquent — « il manque
   un tarif », « une ligne = une capsule » — ils n'alertent pas. Ils se lisent
   donc en gris, et gardent un liseré à gauche pour rester repérables.
   La couleur revient uniquement quand quelque chose a réellement échoué :
   c'est le rôle de .avis-erreur, et c'est le seul rouge de la console. */
.avis{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:13px 16px;border-radius:10px;margin-bottom:18px;
  border:1px solid var(--line);border-left:3px solid var(--muted);
  background:var(--surface);
  font-size:13.5px;line-height:1.55;color:var(--ink-2);
}
.avis .lab{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:3px;
}
.avis strong{color:var(--ink)}
.avis code{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  background:var(--surface-3);border:1px solid var(--line-soft);
  border-radius:5px;padding:1px 5px;
}
.avis-erreur{border-color:var(--crit);border-left-color:var(--crit);background:var(--crit-bg)}
.avis-erreur .lab{color:var(--crit)}
.avis-ok{border-color:var(--ok);border-left-color:var(--ok);background:var(--ok-bg)}
.avis-ok .lab{color:var(--ok)}

/* ─────────────────────────── Tableaux ─────────────────────────── */
.tableau-boite{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{
  text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;vertical-align:top;
}
td:first-child{min-width:300px}
/* Ligne technique qui accueille le panneau Mistral, repliée tant qu'il est vide. */
.ia-ligne td{padding:0;border-bottom:0;min-width:0}
.ia-ligne:hover{background:transparent}
th{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-3);white-space:nowrap;
  position:sticky;top:0;
}
td{color:var(--ink-2)}
tbody tr:hover{background:var(--surface-3)}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Les actions se replient sur deux lignes plutôt que de pousser le tableau
   hors de l'écran : cinq boutons ne tiennent pas sur un portable. */
td.actions{text-align:right;white-space:normal;min-width:210px}
td.actions .btn{margin:0 0 5px 5px}
.primaire-cell{color:var(--ink);font-weight:600}
.secondaire-cell{color:var(--muted);font-size:12.5px}
.extrait{
  color:var(--muted);font-size:12.5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:460px;
}

/* ─────────────────────────── Étiquettes ─────────────────────────── */
.etiquette{
  display:inline-block;padding:2px 8px;border-radius:11px;
  font-size:11px;font-weight:600;letter-spacing:.03em;
  background:var(--neutre-bg);color:var(--muted);white-space:nowrap;
}
.et-ok{background:var(--ok-bg);color:var(--ok)}
.et-warn{background:var(--warn-bg);color:var(--warn)}
.et-crit{background:var(--crit-bg);color:var(--crit)}
.et-info{background:var(--neutre-bg);color:var(--indigo)}

/* ─────────────────────────── Formulaires en ligne ─────────────────────────── */
.barre-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.barre-outils input[type="search"],.barre-outils input[type="text"],.barre-outils select{
  font-family:inherit;font-size:14px;padding:8px 11px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;
}
.barre-outils input[type="search"]{min-width:260px;flex:1 1 260px}

/* ─────────────────────────── Courbe ─────────────────────────── */
.courbe{width:100%;height:auto;display:block}
.legende{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.puce{width:11px;height:3px;border-radius:2px;display:inline-block}

/* ─────────────────────────── États ─────────────────────────── */
.vide{
  padding:48px 20px;text-align:center;color:var(--muted);font-size:14.5px;
}
.vide strong{display:block;color:var(--ink);font-size:16px;font-weight:600;margin-bottom:6px}
.chargement{padding:44px;text-align:center;color:var(--muted);font-size:14px}

/* ─────────────────────────── Champs de formulaire ─────────────────────────── */
.champ-lab{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px;
}
.champ{
  width:100%;padding:9px 11px;font-family:inherit;font-size:14.5px;
  background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;
}
textarea.champ{resize:vertical;line-height:1.45}
.ligne-boutons{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.compteur{font-size:12.5px;color:var(--muted);margin:7px 0 0}
.compteur-fort{color:var(--crit);font-weight:600}

.resultat{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  width:100%;text-align:left;cursor:pointer;
  padding:8px 11px;margin-bottom:5px;
  background:var(--surface-3);border:1px solid var(--line);border-radius:7px;
  font-family:inherit;
}
.resultat:hover{background:var(--surface-2)}
.cible-choisie{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border-radius:7px;
  background:var(--ok-bg);border:1px solid var(--ok);
  font-size:13.5px;color:var(--ink-2);
}

/* ─────────────────────────── Média signalé ─────────────────────────── */
.media-zone:not(:empty){margin-top:10px}
.lecteur{
  width:100%;max-width:380px;border-radius:8px;
  background:#000;border:1px solid var(--line);display:block;
}
.galerie{display:flex;gap:8px;flex-wrap:wrap;max-width:460px}
.galerie img{
  width:110px;height:110px;object-fit:cover;
  border-radius:7px;border:1px solid var(--line);
}

/* ─────────────────────────── Assistance Mistral ─────────────────────────── */
.btn-ia{border-color:var(--indigo);color:var(--indigo)}
.btn-ia:hover{background:var(--neutre-bg)}

.ia-zone:not(:empty){margin:0 14px 16px}
.ia-panneau{
  border:1px solid var(--indigo);border-radius:8px;
  background:var(--surface-3);padding:13px 15px;
  font-size:13.5px;line-height:1.5;max-width:620px;
}
.ia-attente,.ia-echec{color:var(--muted);font-style:italic}
.ia-echec{border-color:var(--crit);color:var(--crit);font-style:normal}
.ia-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ia-marque{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--indigo);
}
.ia-jauge{display:inline-flex;gap:3px;align-items:center}
.ia-jauge .cran{
  width:14px;height:4px;border-radius:2px;background:var(--line);display:inline-block;
}
.ia-jauge .cran.plein{background:var(--accent-vif)}
.ia-conf{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.ia-texte{margin:0 0 8px;color:var(--ink-2)}
.ia-champ{margin:0 0 6px;color:var(--ink-2)}
.ia-champ b{
  display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;
}
.ia-pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--line-soft);
}
.ia-avertissement{font-size:12px;color:var(--muted)}
.ia-boutons{display:flex;gap:6px;flex-wrap:wrap}

/* ─────────────────────────── Modale ─────────────────────────── */
.modale-fond{
  position:fixed;inset:0;background:rgba(12,10,20,.55);
  display:grid;place-items:center;padding:20px;z-index:60;
  backdrop-filter:blur(2px);
}
.modale{
  width:100%;max-width:452px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:var(--ombre);
}
.modale h3{margin:0 0 8px;font-size:17.5px;font-weight:600;letter-spacing:-.01em}
.modale p{margin:0 0 4px;color:var(--ink-2);font-size:14px;line-height:1.5}
.modale label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px;
}
.modale input,.modale select,.modale textarea{
  width:100%;padding:9px 11px;font-family:inherit;font-size:14.5px;
  background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;
}
.modale textarea{min-height:74px;resize:vertical;line-height:1.45}
.modale-pied{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.modale-danger .modale-pied .btn-primaire{background:var(--crit);border-color:var(--crit);color:#fff}

/* ─────────────────────────── Toasts ─────────────────────────── */
.toasts{position:fixed;bottom:112px;right:22px;display:grid;gap:9px;z-index:80;max-width:min(400px,88vw)}
.toast{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--ink-2);
  box-shadow:var(--ombre);animation:entree .2s ease-out;
}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--crit)}
.toast b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@keyframes entree{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}