:root{
  /* Charte graphique — bordeaux framboise (institution culturelle, éditorial, plat) */
  --bg:#ffffff; --panel:#ffffff; --muted-bg:#f4f3f5;
  --text:#1e1e1e; --muted:#6b6b70; --faint:#9a98a0;
  --line:#d7d5da; --line-strong:#c5c2c9;
  --primary:#a81c4d; --primary-dark:#85123a; --plum:#6e2b5c; --primary-soft:#f7e9ef;
  --ink-strong:#141414;
  --gradient-brand:linear-gradient(105deg,#a81c4d 0%,#6e2b5c 100%);
  --ok:#1f7a4d; --ok-bg:#e9f3ec; --skip:#9a6b14; --skip-bg:#f6efdf;
  --err:#b3243f; --err-bg:#fbecef; --run:#a81c4d; --run-bg:#f7e9ef;
  --pend:#6b6b70; --pend-bg:#f4f3f5;
  --radius-xs:4px; --radius-sm:8px; --radius-full:999px; --maxw:1200px;
  --shadow-sm:0 2px 8px rgba(20,20,20,.08);
  --shadow-md:0 6px 20px rgba(20,20,20,.10);
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Accessibilité : focus clavier visible et cohérent */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
.btn:focus-visible,.btn-mini:focus-visible{outline-offset:2px}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-dark);text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}

/* En-tête : bandeau pleine largeur en dégradé bordeaux→prune (signature de page) */
header.top{background:var(--gradient-brand);color:#fff;padding:26px 0}
header.top h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.005em}
/* Le titre est un bouton de retour au menu principal (V9) : il garde exactement
   l'apparence du titre (aucune couleur ne change), seule une légère atténuation
   au survol signale qu'il est cliquable. */
header.top h1 button{background:none;border:0;margin:0;padding:0;font:inherit;
  color:inherit;letter-spacing:inherit;cursor:pointer}
header.top h1 button:hover{opacity:.85}
header.top h1 button:focus-visible{outline:2px solid rgba(255,255,255,.65);
  outline-offset:4px;border-radius:var(--radius-xs)}
header.top h1 .dot{color:rgba(255,255,255,.55)}
header.top .sub{color:rgba(255,255,255,.82);font-size:13px;margin-top:5px;font-weight:400}
main{padding-top:48px;padding-bottom:80px}

/* Titre de section de premier niveau (« Nouvelle recherche », etc.) — bordeaux + filet */
.sec-titre{position:relative;margin:0 0 16px;padding-bottom:9px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--primary)}
.sec-titre::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;background:var(--primary)}

/* Lanceur : domaines, modèle et bouton sur une seule ligne, dans une carte. */
.lanceur-carte{padding:20px 24px;margin-bottom:32px}
.lanceur{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lanceur input{flex:1 1 340px;min-width:0;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font-size:15px;font-family:var(--font);outline:none;
  background:var(--panel);transition:border-color .15s,box-shadow .15s}
.lanceur input::placeholder{color:var(--muted)}
.lanceur input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,28,77,.15)}
/* Modèle qui rédigera le rapport */
.lanceur-llm{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:6px 10px 6px 13px;
  transition:border-color .15s,box-shadow .15s}
.lanceur-llm:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,28,77,.15)}
.lanceur-llm-lib{font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.lanceur-llm select{border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--text);outline:none;cursor:pointer;padding:5px 2px}
/* Curseur de réflexion (effort de raisonnement du modèle) : quatre crans. La
   valeur retenue est écrite en toutes lettres à droite, largeur fixe pour que la
   carte ne tressaute pas d'un cran à l'autre. */
/* `align-self:stretch` cale la hauteur de la carte sur celle de la ligne (champ,
   liste des modèles, bouton) : sans lui, le curseur ne fait que 4 px de haut et sa
   carte paraissait écrasée à côté des autres. */
.lanceur-effort{gap:12px;padding-right:13px;align-self:stretch}
/* Padding, bordure et flex sont remis à zéro : la règle générale « .lanceur input »
   (champ de saisie) s'applique aussi à ce curseur et gonflait sa hauteur à 28 px. */
.lanceur-effort input[type=range]{-webkit-appearance:none;appearance:none;
  flex:0 0 auto;width:132px;height:4px;margin:0;padding:0;border:0;
  border-radius:var(--radius-full);cursor:pointer;
  background:var(--line-strong);outline:none}
.lanceur-effort input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:var(--radius-full);background:var(--primary);
  border:2px solid var(--panel);box-shadow:0 0 0 1px var(--primary);cursor:pointer}
.lanceur-effort input[type=range]::-moz-range-thumb{width:15px;height:15px;
  border-radius:var(--radius-full);background:var(--primary);
  border:2px solid var(--panel);box-shadow:0 0 0 1px var(--primary);cursor:pointer}
/* Largeur figée sur le libellé le plus long (« Très élevé ») : sans elle, le bloc
   s'élargit ou se rétrécit à chaque cran et toute la barre de lancement tressaute. */
.lanceur-effort-val{font-size:13px;font-weight:600;color:var(--text);
  min-width:72px;text-align:left}
/* Scan en direct : case sur sa propre ligne, sous les réglages du modèle. Masquée
   tant que le serveur ne sait pas produire le flux (Xvfb + x11vnc absents). */
.lanceur-vue{display:flex;align-items:center;gap:9px;margin:14px 0 0;cursor:pointer;
  flex-wrap:wrap}
.lanceur-vue[hidden]{display:none}
.lanceur-vue input{width:15px;height:15px;margin:0;accent-color:var(--primary);cursor:pointer}
.lanceur-vue-lib{font-size:13px;font-weight:600;color:var(--text)}
.lanceur-vue-aide{font-size:12px;color:var(--faint)}

/* Boutons : primaire = bordeaux rectangulaire (coins peu arrondis, jamais pilule) */
.btn{border:1px solid var(--primary);background:var(--primary);color:#fff;
  padding:12px 24px;border-radius:var(--radius-xs);font-weight:600;font-size:14px;
  font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn.ghost{background:var(--panel);color:var(--muted);border-color:var(--line);font-weight:600}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn:disabled{opacity:.5;cursor:default}
.hint{color:var(--muted);font-size:13px;margin:12px 0 0}
.hint:empty{display:none}

.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--panel);
  padding:24px 24px 12px;box-shadow:var(--shadow-sm)}
/* Titre de carte : bordeaux MAJUSCULES + filet bordeaux dessous (motif identitaire) */
.card h2{position:relative;margin:0 0 14px;padding-bottom:9px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--primary)}
.card h2::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;background:var(--primary)}
.card .meta{font-size:12px;color:var(--faint);margin:-6px 0 14px}

/* Intertitre d'un bloc à l'intérieur d'un volet (« Résultats par outil »…) */
.sous-titre{margin:0 0 6px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--primary)}
.ligne{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.ligne .nom{flex:1;font-size:13.5px;font-family:var(--mono)}
.ligne .detail{display:block;font-size:11.5px;color:var(--faint);font-family:var(--mono);margin-top:2px}
.cout .detail{display:inline;margin:0 0 0 4px}

/* Étiquette noire (motif récurrent) : catégorise, texte blanc MAJUSCULES */
.badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;background:var(--ink-strong);padding:4px 10px;border-radius:var(--radius-xs)}

.chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-xs);white-space:nowrap}
.s-ok{color:var(--ok);background:var(--ok-bg)}
.s-skipped{color:var(--skip);background:var(--skip-bg)}
.s-error{color:var(--err);background:var(--err-bg)}
.s-en_cours{color:var(--run);background:var(--run-bg)}
.s-pending{color:var(--pend);background:var(--pend-bg)}

.lien-voir,.lien-dl{font-size:12px;cursor:pointer;color:var(--primary);
  border:1px solid var(--line);padding:4px 10px;border-radius:var(--radius-xs);
  background:var(--panel);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.lien-voir:hover,.lien-dl:hover{background:var(--primary-soft);border-color:var(--primary)}
.apercu .tete-actions{display:flex;align-items:center;gap:14px}
.apercu .tete-actions a{font-size:12.5px;color:var(--primary);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:5px 12px}
.apercu .tete-actions a:hover{background:var(--primary-soft);border-color:var(--primary)}

.dl{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dl a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:var(--radius-xs);padding:9px 14px;color:var(--text);font-size:13px;font-weight:500;
  transition:background .15s,border-color .15s,color .15s}
.dl a:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.dl a.off{opacity:.4;pointer-events:none}
/* Livrables dans la colonne étroite : une entrée par ligne, pleine largeur */
.dl-colonne{flex-direction:column;gap:6px}
.dl-colonne a{width:100%}
/* Archive de TOUT le dossier : dernier de la liste, détaché et mis en avant —
   c'est le livrable que l'on transmet, les autres sont des pièces à l'unité. */
.dl a.dl-tout{margin-top:6px;border-color:var(--primary);color:var(--primary);
  font-weight:600;justify-content:center}
.dl a.dl-tout:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* Visualisation « position dans le pipeline » (dans le volet de suivi déplié) :
   étages empilés, puisque le volet vit dans la colonne étroite à droite du rapport.
   Accent framboise sur l'étage courant, vert sur les étapes faites, gris estompé
   sur celles à venir. */
.pl-flow{display:flex;flex-direction:column;gap:5px;padding-bottom:4px}
.pl-stage{display:flex;gap:10px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;transition:border-color .2s,background .2s,box-shadow .2s}
.pl-badge{width:24px;height:24px;border-radius:var(--radius-full);flex:none;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--muted-bg);color:var(--muted);transition:.2s}
.pl-titre{font-size:13px;font-weight:700;color:var(--text);line-height:1.25}
.pl-sous{font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.35}
.pl-arrow{align-self:center;flex:none;color:var(--line-strong);font-size:13px;line-height:1}
/* Étape faite */
.pl-ok{border-color:#bfe0cd;background:var(--ok-bg)}
.pl-ok .pl-badge{background:var(--ok);color:#fff}
.pl-ok .pl-titre{color:var(--ok)}
/* Étape courante */
.pl-en_cours{border-color:var(--primary);background:var(--primary-soft);
  animation:pl-glow 2s ease-in-out infinite}
.pl-en_cours .pl-badge{background:var(--primary);color:#fff}
.pl-en_cours .pl-titre{color:var(--primary-dark)}
/* Étape en erreur */
.pl-error{border-color:#e6bcc4;background:var(--err-bg)}
.pl-error .pl-badge{background:var(--err);color:#fff}
.pl-error .pl-titre{color:var(--err)}
/* Étape à venir */
.pl-pending{opacity:.55}
.pl-spin{width:11px;height:11px;border:2px solid rgba(168,28,77,.28);border-top-color:var(--primary);
  border-radius:50%;display:inline-block;animation:pl-rot .8s linear infinite}
@keyframes pl-rot{to{transform:rotate(360deg)}}
@keyframes pl-glow{0%,100%{box-shadow:0 0 0 1px var(--primary),0 3px 12px rgba(168,28,77,.10)}
  50%{box-shadow:0 0 0 1px var(--primary),0 5px 18px rgba(168,28,77,.20)}}

.apercu{position:fixed;inset:0;background:rgba(20,20,20,.42);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:20}
.apercu .boite{background:#fff;border-radius:var(--radius-sm);max-width:760px;width:100%;
  max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-md)}
.apercu .tete{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.apercu .tete b{font-size:14px;font-weight:700}
.apercu .tete span{cursor:pointer;color:var(--muted);font-size:20px;line-height:1}
.apercu pre{margin:0;padding:20px;overflow:auto;font-family:var(--mono);font-size:12.5px;
  line-height:1.55;white-space:pre-wrap;word-break:break-word;color:#2a2a2a}
.vide{color:var(--faint);font-size:13px;padding:8px 0}
.cout{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap}
.ligne.total{border-top:1px solid var(--line-strong)}
.ligne.total .nom{font-weight:600}
.ligne.total .cout{font-weight:700;color:var(--primary)}

/* --- Détail d'une recherche : en-tête + progression --- */
.board:empty{display:none}
/* Détail ouvert (livrables, résultats…) séparé de l'historique en dessous : sans cette
   marge, le bandeau « Historique » se colle à la carte « Livrables » (le détail se rend
   dans #board, l'historique juste après, sans respiration). Sans effet quand #board est
   vide (tableau de bord) car il est alors masqué. */
.board:not(:empty){margin-bottom:32px}
.detail-tete{display:flex;align-items:center;gap:12px;margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.detail-titre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.detail-fqdn{font-size:19px;font-weight:700;color:var(--primary);word-break:break-all;letter-spacing:-.005em}
/* Modèle LLM et durée du run, dans la ligne de titre (pas .meta : sa marge
   négative désalignerait les libellés dans le flex centré). */
.detail-llm{font-size:12px;color:var(--faint);white-space:nowrap}
/* La durée est écrite après le rendu (cf. `majDuree`) : vide, la case ne doit pas
   creuser un intervalle dans la ligne de titre. */
.detail-duree{font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.detail-duree:empty{display:none}
.detail-actions{display:flex;gap:6px;flex-shrink:0}

/* Deux colonnes : le rapport occupe la grande, livrables et suivi la petite.
   La colonne principale s'étire sur la hauteur de la colonne étroite : déplier le
   suivi agrandit le document affiché au lieu de creuser un vide à sa gauche.
   La colonne étroite est réduite à 286 px (V12) : ses deux cartes sont désormais des
   barres repliées, et chaque pixel rendu va à la scène. */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:18px}
.detail-principal{display:flex;flex-direction:column;min-width:0}
/* Hauteur bornée : le document défile DANS la carte, il ne pousse pas la page. */
.detail-principal>.card,.scene-slot>.card{flex:1;display:flex;flex-direction:column;
  min-height:min(620px,calc(100vh - 300px));max-height:calc(100vh - 210px)}
/* Emplacement de la scène : simple relais de mise en page, la carte vivante y est
   replacée après chaque rendu (cf. monterScene dans app.js). */
/* Hauteur FIXE pour la scène (et non une fourchette) : le journal se remplit au fil
   des opérations, et une carte qui grandit à chaque ligne ferait sauter la page sous
   les yeux de qui regarde le balayage. Elle prend maintenant presque toute la
   fenêtre (V12) : c'est la pièce que l'on regarde pendant l'analyse. */
.scene-slot{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
/* Les TROIS hauteurs valent la même chose, et ce n'est pas une redondance : la carte
   est un élément flexible sur une base nulle, dont la taille est arbitrée par le
   contenu de la ligne de grille. Avec la seule `height`, la carte gonflait jusqu'à la
   hauteur de la capture pleine page ; avec la seule `max-height`, elle RETOMBAIT à son
   minimum quand le journal était replié — la scène changeait de taille selon qu'un
   volet était ouvert ou non. Bornée des deux côtés, elle ne bouge plus. */
.scene-slot>.sc-card{height:min(1000px,calc(100vh - 170px));
  min-height:min(1000px,calc(100vh - 170px));
  max-height:min(1000px,calc(100vh - 170px))}
.detail-rail{display:flex;flex-direction:column;gap:12px;min-width:0}
@media(max-width:1000px){.detail-grid{grid-template-columns:1fr}}

/* --- Visionneuse Word : les pages du .docx rendues en images côté serveur --------
   Des images plutôt qu'un PDF inséré dans la page : elles s'affichent dans tous les
   navigateurs, y compris ceux dont le lecteur PDF intégré est désactivé. */
.wv-card{padding:0;overflow:hidden}
.wv-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 20px;border-bottom:1px solid var(--line)}
.wv-tete h2,.wv-tete .modal-titre{flex:1;min-width:0;margin:0;padding:0}
.wv-tete h2::after{display:none}
.wv-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wv-zone{flex:1;min-height:0;background:var(--muted-bg);
  display:flex;align-items:center;justify-content:center}
/* Pages présentes : le cadre devient une zone de lecture qui défile */
.wv-zone-pages{display:block;overflow-y:auto;padding:18px 0}
/* Sommaire dynamique de la visionneuse (consigne V23) : colonne fixe à gauche des
   pages, entrée courante surlignée, cliquable. */
.wv-sommaire{display:none}
/* Avec le sommaire, la zone ne défile plus elle-même : ses deux colonnes défilent
   chacune pour leur compte, la colonne du sommaire montre donc jusqu'à sa dernière
   entrée quelle que soit la hauteur des pages. */
.wv-avec-sommaire{display:flex;align-items:stretch;overflow:hidden;padding:0}
.wv-avec-sommaire .wv-sommaire{display:flex;flex:0 0 250px;min-height:0;overflow-y:auto;
  background:#fff;border-right:1px solid var(--line);padding:14px 10px 18px;
  flex-direction:column;gap:2px}
.wv-avec-sommaire .wv-defilement{flex:1;min-width:0;min-height:0;overflow-y:auto}
.wv-avec-sommaire .wv-pages{padding:18px 0}
#wv-sommaire-toggle.actif{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.wv-som-tete{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;
  letter-spacing:.05em;padding:0 8px 10px}
.wv-som-entree{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:5px 8px;border-radius:var(--radius-xs);font-size:12.5px;line-height:1.35;
  color:var(--text);text-decoration:none}
.wv-som-entree.niv2{padding-left:18px;font-size:12px}
.wv-som-entree.niv3{padding-left:30px;font-size:11.5px;color:var(--muted)}
.wv-som-entree:hover{background:var(--muted-bg)}
.wv-som-entree.actif{background:var(--primary-soft);color:var(--primary);font-weight:600}
.wv-som-titre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv-som-page{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted)}
.wv-som-entree.actif .wv-som-page{color:var(--primary)}
@media (max-width:900px){.wv-avec-sommaire .wv-sommaire{display:none}}
.wv-pages{display:flex;flex-direction:column;align-items:center;gap:20px}
.wv-page{width:100%;max-width:900px;margin:0;padding:0 18px}
/* La place d'une page est réservée AVANT son chargement (format A4 par défaut,
   proportions réelles dès que l'image arrive) : sans cela, les pages encore non
   chargées occupent une hauteur nulle et la barre de défilement saute. */
.wv-page img{display:block;width:100%;height:auto;aspect-ratio:auto 1 / 1.414;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* Hauteur connue AVANT le chargement (pages chargées à la demande) : les pages
   rendues font 910 x 1290 pixels (A4 à 110 ppp) ; sans cette réserve, un saut du
   sommaire calculé sur des pages encore vides dépassait sa cible (V23). */
.wv-page img{aspect-ratio:910/1290;height:auto}
.wv-page figcaption{margin-top:7px;text-align:center;font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.wv-message{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 24px;text-align:center;color:var(--muted);font-size:13.5px;max-width:440px}
.wv-message-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* Le rapport n'a plus de calque de lecture à lui : c'est la scène entière qui passe
   en plein écran (bouton de sa barre), un seul mécanisme pour les trois onglets. */

/* --- La scène : le scan en direct, la rédaction, puis le rapport ----------------
   Un seul cadre montre ce que fait l'application. Trois volets s'y succèdent
   (Direct, Rédaction, Rapport) sans jamais remplacer le cadre lui-même : le flux
   vidéo du navigateur de constatation doit survivre aux rafraîchissements. */
.sc-card{padding:0;overflow:hidden}
.sc-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;border-bottom:1px solid var(--line)}
.sc-titre{flex:1;min-width:120px;margin:0;padding:0;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--primary)}
.sc-onglets{display:flex;gap:3px;padding:3px;background:var(--muted-bg);
  border-radius:var(--radius-full)}
.sc-tab{border:0;background:none;font:inherit;font-size:12px;font-weight:600;
  color:var(--muted);padding:5px 14px;border-radius:var(--radius-full);cursor:pointer;
  transition:background .15s,color .15s}
.sc-tab:hover:not(:disabled):not(.actif){color:var(--text)}
.sc-tab.actif{background:var(--panel);color:var(--primary);box-shadow:var(--shadow-sm)}
.sc-tab:disabled{opacity:.4;cursor:default}
.sc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Barre d'adresse de l'application pendant la prise de main (14/09/2026) : l'enquêteur
   ouvre une adresse sans dépendre de la barre native du navigateur diffusé. */
.sc-adresse{display:flex;align-items:center;gap:6px;flex:1 1 260px;min-width:180px}
.sc-adresse input{flex:1;min-width:0;padding:5px 10px;font-size:12px;color:var(--text);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-full)}
.sc-adresse input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(74,222,128,.25)}
.sc-corps{flex:1;min-height:0;display:flex}
.sc-pan{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.sc-pan[hidden]{display:none}

/* Volet « Direct » : l'écran de constatation et la boîte de code côte à côte, le
   journal des actes en dessous. L'écran montre le navigateur en train de parcourir
   le site, ou le relevé de la page qui vient d'être capturée : la capture y défile
   et chaque surface de mise en page s'allume à son tour, pendant que la boîte de
   code reçoit le fragment de HTML correspondant. */
.sc-live{flex:1;min-height:0;display:flex;min-width:0}
.sc-ecran{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:#100c12;
  overflow:hidden}
.sc-flux{position:absolute;inset:0}
/* L'attribut `hidden` seul ne suffit pas face à une règle de classe qui pose
   `display` : sans ces sélecteurs, le relevé et l'attente s'affichaient côte à
   côte au lieu de se remplacer. */
.sc-flux[hidden],.sc-doc[hidden],.sc-attente[hidden],.sc-laser[hidden],
.sc-redac[hidden]{display:none}

/* --- Visionneuse de relevé : la capture pleine page, parcourue de haut en bas --- */
.sc-doc{position:absolute;inset:0;margin:0;padding:0;overflow:hidden;background:#100c12}
/* La capture EST l'image du document : sa largeur remplit le cadre et sa hauteur
   suit, si bien que les surfaces relevées se posent en pourcentages. */
.sc-page{position:absolute;left:0;top:0;width:100%;
  transition:transform .85s cubic-bezier(.22,.61,.36,1);will-change:transform}
.sc-page img{display:block;width:100%;height:auto;background:#fff}
.sc-surfaces{position:absolute;inset:0}
/* Léger assombrissement des bords : le regard va au centre du cadre, là où la
   surface en cours est amenée. */
.sc-doc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(8,5,10,.58) 100%)}
.sc-doc-pied{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;
  align-items:center;gap:10px;padding:9px 14px;color:#fff;font-size:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.8))}
/* Témoin de relevé en cours : il tient dans le pied, là où il ne masque aucune
   surface, au lieu d'une étiquette flottant sur la capture. */
.sc-doc-pied.vivant::before{content:"";flex:0 0 auto;width:7px;height:7px;
  border-radius:50%;background:#ff4d6d;animation:ec-pulse 1.4s ease-in-out infinite}
.sc-doc-titre{flex:0 3 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600}
.sc-doc-compte{margin-left:auto;flex:1 1 auto;min-width:0;overflow:hidden;text-align:right;
  text-overflow:ellipsis;white-space:nowrap;font-size:11px;
  color:rgba(255,255,255,.74);font-variant-numeric:tabular-nums}

/* Surfaces de mise en page : rectangle, coins marqués et étiquette numérotée, à
   l'image des encadrés que le rapport pose sur la capture d'accueil. Une seule est
   « active » à la fois ; les précédentes restent posées, en retrait. */
.sc-surf{position:absolute;color:var(--sf);border:1.5px solid currentColor;
  border-radius:3px;opacity:0;transform:scale(.99);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease,box-shadow .4s ease}
.sc-surf.vu{opacity:.5}
.sc-surf.actif{opacity:1;transform:none;
  box-shadow:0 0 24px -4px currentColor,0 0 0 9999px rgba(9,6,11,.6)}
.sc-surf::before{content:"";position:absolute;inset:-4px;opacity:0;transition:opacity .3s ease;
  background:
    linear-gradient(currentColor,currentColor) 0 0/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/2px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/2px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/2px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/2px 13px no-repeat}
.sc-surf.actif::before{opacity:1}
/* L'étiquette n'est pas bornée par la largeur de la surface : sur un encart étroit,
   elle n'affichait qu'un début d'intitulé coupé net. Elle déborde donc du rectangle,
   du côté où il reste de la place. */
.sc-surf-etiq{position:absolute;left:-1.5px;bottom:100%;display:none;align-items:center;
  gap:6px;padding:3px 9px;border-radius:3px 3px 0 0;background:var(--sf);
  color:#150e18;font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.sc-surf.droite .sc-surf-etiq{left:auto;right:-1.5px}
.sc-surf.vu .sc-surf-etiq,.sc-surf.actif .sc-surf-etiq{display:inline-flex}
.sc-surf.vu .sc-surf-etiq{gap:0;padding:2px 7px}
.sc-surf.vu .sc-surf-lib{display:none}
/* Surface collée au haut de la page : son étiquette passe DEDANS, sinon elle sort
   du cadre par le haut et le numéro disparaît. */
.sc-surf.dedans .sc-surf-etiq{bottom:auto;top:0;border-radius:0 0 3px 0}
.sc-surf.dedans.droite .sc-surf-etiq{border-radius:0 0 0 3px}
.sc-surf-lib{font-style:normal;font-weight:600}
/* Trois familles de couleur seulement, dérivées de la charte : contenu (framboise),
   structure (prune), publicité (ocre), média (vert des états). */
.sc-r-contenu,.sc-r-liste,.sc-r-carrousel{--sf:#ff6f9c}
.sc-r-entete,.sc-r-navigation,.sc-r-recherche,.sc-r-pied,.sc-r-aside{--sf:#c8a3d9}
.sc-r-pub{--sf:#e6ab3f}
.sc-r-media{--sf:#79d3a6}
/* Balayage : une ligne lumineuse traverse le cadre tant que le relevé se déroule. */
.sc-laser{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,111,156,.92),transparent);
  box-shadow:0 0 22px 4px rgba(255,111,156,.3);
  animation:sc-balayage 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sc-balayage{0%{top:-2%;opacity:0}12%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}

/* --- Rédaction en cours : la page du rapport se remplit section après section ---
   Même langage que la silhouette d'attente (surfaces claires sur fond sombre,
   reflet qui balaie), mais la forme est celle d'un DOCUMENT et non d'un site : on
   distingue d'un coup d'œil ce que l'application est en train de faire. */
.sc-redac{position:absolute;inset:0;margin:0;padding:0;overflow:hidden;
  background:#100c12;display:flex;align-items:flex-start;justify-content:center}
/* La page est BORNÉE par le cadre : au-delà, ce sont les sections les plus RÉCENTES
   qui sortiraient de l'écran (elles s'ajoutent en bas), c'est-à-dire justement
   celles que l'on regarde. Le corps se cale donc sur le bas et laisse filer le
   haut du document, comme un texte que l'on écrit au fil de la page. */
.sc-redac-page{position:relative;width:min(58%,520px);margin:26px 0 54px;padding:22px 26px;
  max-height:calc(100% - 80px);
  display:flex;flex-direction:column;gap:9px;overflow:hidden;
  border-radius:4px;background:rgba(255,255,255,.055);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.75)}
.sc-redac-page::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.10) 50%,transparent 64%);
  transform:translateX(-100%);animation:sc-reflet 3.1s ease-in-out infinite}
.r-titre,.r-sous,.r-h,.r-l{display:block;border-radius:3px;
  background:rgba(255,255,255,.13)}
.r-titre{height:13px;width:62%}
.r-sous{height:8px;width:38%;background:rgba(255,255,255,.08);margin-bottom:5px}
.r-corps{flex:1;min-height:0;display:flex;flex-direction:column;gap:13px;
  justify-content:flex-end;overflow:hidden}
.r-sec{display:flex;flex-direction:column;gap:6px;
  animation:sc-entree .35s ease both}
.r-h{height:9px;width:46%;background:rgba(255,111,156,.42)}
.r-l{height:6px;width:100%;background:rgba(255,255,255,.10)}
.r-l.court{width:72%}
/* Section en cours d'écriture : sa dernière ligne porte le curseur, le seul point
   mobile de la page. Le reste du document reste calme. */
.r-sec.ecrit .r-l.court::after{content:"";display:inline-block;width:2px;height:6px;
  margin-left:4px;background:var(--primary);animation:sc-curseur 1s steps(1) infinite}
.r-sec.ecrit .r-l.court{position:relative;width:46%}
.sc-redac-pied{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;
  align-items:center;gap:10px;padding:9px 14px;color:#fff;font-size:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.8))}
.sc-redac-sec{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600}
.sc-redac-compte{margin-left:auto;flex:0 0 auto;font-size:11px;
  color:rgba(255,255,255,.74);font-variant-numeric:tabular-nums}

/* --- Attente : silhouette de page balayée par un reflet, plutôt qu'un cadre noir --- */
.sc-attente{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:22px;color:rgba(255,255,255,.8);font-size:13px;text-align:center}
.sc-gabarit{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;
  gap:9px;overflow:hidden;opacity:.55}
.sc-gabarit>span,.g-case{display:block;border-radius:3px;background:rgba(255,255,255,.075)}
.g-bandeau{flex:0 0 26px}
.g-nav{flex:0 0 13px;width:66%}
.g-une{flex:0 0 24%;min-height:46px}
.g-grille{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:9px}
.g-pied{flex:0 0 18px}
.sc-gabarit::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.11) 50%,transparent 64%);
  transform:translateX(-100%);animation:sc-reflet 2.6s ease-in-out infinite}
@keyframes sc-reflet{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sc-attente-ligne{position:relative;z-index:1;display:flex;align-items:center;gap:11px;
  padding:9px 16px;border-radius:var(--radius-full);background:rgba(12,8,14,.74);
  backdrop-filter:blur(3px)}

/* Étiquette d'état de l'écran : ce que l'on regarde, flux vivant ou relevé. */
/* Posée à DROITE : à gauche elle recouvrait l'étiquette de la première surface,
   celle de l'en-tête du site, qui se pose tout en haut de la capture. */
.sc-badge{position:absolute;top:10px;right:12px;z-index:4;display:flex;align-items:center;
  gap:7px;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;
  letter-spacing:.03em;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.sc-badge[hidden]{display:none}
.sc-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.sc-badge.vivant::before{background:#ff4d6d;animation:ec-pulse 1.4s ease-in-out infinite}
/* Main à l'enquêteur (V31) : le badge passe au vert, et l'écran se borde de la même
   couleur, pour que l'on sache d'un coup d'œil que les clics atteignent la page. */
/* Pendant la main, le badge descend en bas : en haut à droite il masquait le menu
   et la fin de la barre d'adresse du navigateur diffusé (14/09/2026). */
.sc-badge.main{background:rgba(22,101,52,.82);top:auto;bottom:12px}
.sc-badge.main::before{background:#4ade80;animation:ec-pulse 1.4s ease-in-out infinite}
.sc-ecran:has(.sc-badge.main){box-shadow:inset 0 0 0 3px #4ade80}
.sc-attente .spinner{border-color:rgba(255,255,255,.22);border-top-color:#fff}

/* --- Veille (consigne V22) : la surface visée s'allume et respire ---------------- */
/* Distincte de `.actif` (relevé en cours, étiquette complète) : en veille la
   surface garde son numéro seul, et c'est son halo qui bouge. */
.sc-surf.vise{opacity:1;z-index:2;animation:sc-respire 1.3s ease-in-out infinite}
.sc-surf.vise::before{opacity:1}
.sc-surf.vise .sc-surf-etiq{display:inline-flex;gap:6px;padding:2px 8px}
.sc-surf.vise .sc-surf-lib{display:inline}
@keyframes sc-respire{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,.14),0 0 26px 2px currentColor}}
/* Le modèle lit le code source : la boîte de code s'allume à son tour. */
.sc-code.vise{box-shadow:inset 0 0 0 1.5px rgba(255,111,156,.85),inset 0 0 30px rgba(255,111,156,.12);
  animation:sc-code-respire 1.6s ease-in-out infinite}
@keyframes sc-code-respire{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(255,111,156,.55)}
  50%{box-shadow:inset 0 0 0 1.5px rgba(255,111,156,.95),inset 0 0 34px rgba(255,111,156,.18)}}

/* --- Requêtage (V22) : les sources publiques autour du domaine ------------------- */
.sc-req{position:absolute;inset:0;z-index:3;pointer-events:none}
.sc-req[hidden]{display:none}
.sc-req-plein{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:14px}
.sc-req-plein svg{width:100%;height:100%;max-width:820px;font-family:var(--font,inherit)}
.sc-req.bandeau .sc-req-plein{display:none}
.sc-req-bandeau{display:none}
.sc-req.bandeau .sc-req-bandeau{position:absolute;left:12px;right:12px;bottom:40px;
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 6px;padding:7px 10px;
  border-radius:8px;background:rgba(12,8,14,.78);backdrop-filter:blur(3px);
  color:#fff;font-size:11px}
.rq-titre{flex:0 0 100%;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.72);margin-bottom:1px}
.rq-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--radius-full);background:rgba(255,255,255,.09);white-space:nowrap;
  line-height:1.5}
.rq-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#79d3a6}
.rq-chip.en_cours::before{background:#e6ab3f;animation:ec-pulse 1s ease-in-out infinite}
.rq-chip.erreur::before{background:#ff6f9c}
.rq-chip.ignoree{opacity:.45}
.rq-chip.ignoree::before{background:#888}
/* Tableau plein cadre (SVG) */
.rq-lien{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.rq-src.en_cours .rq-lien{stroke:#e6ab3f;stroke-width:1.6;stroke-dasharray:7 9;
  animation:rq-flux .9s linear infinite}
.rq-src.ok .rq-lien{stroke:rgba(121,211,166,.55)}
.rq-src.erreur .rq-lien{stroke:rgba(255,111,156,.55)}
.rq-src.ignoree .rq-lien{stroke:rgba(255,255,255,.12)}
@keyframes rq-flux{to{stroke-dashoffset:-32}}
.rq-noeud{fill:#79d3a6;stroke:#100c12;stroke-width:2}
.rq-src.en_cours .rq-noeud{fill:#e6ab3f;animation:rq-pulse 1.1s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
.rq-src.erreur .rq-noeud{fill:#ff6f9c}
.rq-src.ignoree .rq-noeud{fill:#666}
@keyframes rq-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.55)}}
.rq-lib{fill:#fff;font-size:11.5px;font-weight:600}
.rq-src.ignoree .rq-lib{fill:rgba(255,255,255,.45)}
.rq-centre{fill:#a81c4d;stroke:rgba(255,255,255,.35);stroke-width:1.5}
.rq-onde{fill:none;stroke:rgba(168,28,77,.7);stroke-width:1.5;transform-box:fill-box;
  transform-origin:center;animation:rq-onde 2.8s ease-out infinite}
.rq-onde-2{animation-delay:1.4s}
@keyframes rq-onde{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.rq-dom{fill:#fff;font-size:11px;font-weight:700}
.rq-titre-svg{fill:rgba(255,255,255,.7);font-size:11.5px;letter-spacing:.04em}
/* Le message d'état se POSE sur l'écran sans l'effacer : voile sombre translucide,
   au travers duquel le flux, le relevé ou la silhouette animée restent visibles.
   Un fond opaque laissait un panneau de texte sur du vide, et le message qui parle
   du « flux en lecture seule » désignait alors un flux que l'on ne voyait plus. */
.sc-message-boite{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(16,12,18,.72);
  backdrop-filter:blur(3px)}
/* La note reste lisible sur n'importe quelle image : elle porte son propre fond. */
.sc-message{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  max-width:420px;padding:22px 26px;border-radius:var(--radius);
  background:var(--muted-bg);box-shadow:0 14px 40px -16px rgba(0,0,0,.8)}
/* Bouton d'action posé dans la scène (franchissement du mur d'accès) : un cran de
   plus que le pas de la colonne, pour qu'il se détache de la note qui l'explique. */
.sc-message .btn-mini{margin-top:3px}

/* --- Boîte de code : le HTML relevé, coloré, qui s'écrit au fil du balayage ---
   Les couleurs de jetons sont tirées de la charte (framboise, prune, vert des
   états) : la boîte reste dans le code couleur de l'application. */
.sc-code[hidden]{display:none}
.sc-code{flex:0 0 clamp(226px,33%,342px);min-width:0;display:flex;flex-direction:column;
  background:#17111b;border-left:1px solid var(--line);color:#d3ccd6}
.sc-code-tete{display:flex;align-items:baseline;gap:10px;padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.sc-code-titre{flex:0 0 auto;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#ff8fb1}
.sc-code-sel{flex:1;min-width:0;text-align:right;font-family:var(--mono);font-size:10.5px;
  color:#8d8494;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-code-corps{flex:1;min-height:0;overflow-y:auto;padding:0 0 14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
/* Boîte vide : on dit ce que l'on attend, plutôt que de laisser un pan noir muet. */
.sc-code-corps:empty{display:flex;align-items:center;justify-content:center;padding:20px}
.sc-code-corps:empty::before{content:"En attente du premier document";text-align:center;
  font-family:var(--mono);font-size:11px;line-height:1.6;color:#6d6575}
.c-etiq{position:sticky;top:0;z-index:1;padding:6px 12px 5px;font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#9a8fa4;background:#17111b;
  border-top:1px solid rgba(255,255,255,.07)}
.c-bloc:first-child .c-etiq{border-top:0}
.c-bloc pre{margin:0;padding:4px 0 10px;white-space:pre-wrap;word-break:break-word}
.c-bloc code{display:block;counter-reset:cl;font-family:var(--mono);font-size:10.5px;
  line-height:1.62}
.c-l{display:block;counter-increment:cl;position:relative;padding:0 10px 0 34px;
  min-height:1.62em}
.c-l::before{content:counter(cl);position:absolute;left:0;width:24px;text-align:right;
  font-size:9.5px;color:#584f61}
.c-bal{color:#ff8fb1}
.c-att{color:#c8a3d9}
.c-val{color:#8ed3ae}
.c-com{color:#6d6575;font-style:italic}
.c-txt{color:#cfc7d4}
.c-frappe .c-l:last-child::after{content:"";display:inline-block;width:6px;height:11px;
  margin-left:2px;vertical-align:-1px;background:#ff8fb1;
  animation:sc-curseur 1s steps(1) infinite}

/* Journal des opérations : replié derrière sa flèche (V12), il ne prend qu'une ligne
   et l'écran de constatation occupe tout le reste du cadre. Sa barre dit malgré tout
   où en est l'application (dernière opération + décompte). */
.sc-jr{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  border-top:1px solid var(--line);background:var(--panel)}
.sc-jr.ouvert{flex:0 1 34%}
.sc-jr-tete{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:9px 18px;font:inherit;color:var(--text);
  transition:background .15s}
.sc-jr-tete:hover{background:var(--muted-bg)}
.sc-jr-caret{flex:0 0 12px;color:var(--primary);font-size:12px}
.sc-jr-titre{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--primary)}
/* Fuseau de la colonne des heures (V26). Posé juste après le titre, à côté des
   heures qu'il qualifie, et assez discret pour ne pas concurrencer la dernière
   opération : il se lit une fois, puis se laisse oublier. */
.sc-jr-fuseau{flex:0 0 auto;font-size:11px;color:var(--faint);white-space:nowrap}
/* Dernière opération consignée, en clair sur la barre repliée : le volet fermé
   renseigne toujours, il ne se contente pas de cacher. */
.sc-jr-derniere{flex:1;min-width:0;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-jr-derniere:empty{flex:1}
.sc-jr-compte{flex:0 0 auto;font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
/* Le journal défile en suivant le bas : la ligne du haut est donc souvent coupée en
   deux. Un léger fondé au bord supérieur rend cette coupe volontaire et lisible. */
.sc-journal{flex:1;min-height:96px;overflow-y:auto;padding:2px 18px 12px;
  border-top:1px solid var(--line);background:var(--panel);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
.sc-journal[hidden]{display:none}
.sc-lignes{display:flex;flex-direction:column}
.sc-ligne{display:flex;align-items:baseline;gap:9px;padding:3px 0;font-size:12.5px;
  animation:sc-entree .25s ease both}
.sc-ligne::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--pend);transform:translateY(-1px)}
.sc-t-page::before{background:var(--primary)}
.sc-t-donnee::before{background:var(--ok)}
.sc-t-redaction::before{background:var(--plum)}
.sc-t-alerte::before{background:var(--err)}
.sc-t-vue::before{background:var(--skip)}
/* Ouverture d'étape : la puce bat. Clôture : coche ou croix. Deux lignes qui se
   ressemblaient trait pour trait se distinguent maintenant au premier regard. */
.sc-ligne.sc-e-en_cours::before{animation:ec-pulse 1.4s ease-in-out infinite}
.sc-ligne.sc-e-ok::before,.sc-ligne.sc-e-error::before{content:"✓";width:auto;
  min-width:7px;height:auto;border-radius:0;background:none;transform:none;
  font-size:10px;font-weight:700;line-height:1.45;text-align:center;color:var(--ok)}
.sc-ligne.sc-e-error::before{content:"✕";color:var(--err)}
.sc-heure{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.sc-texte{min-width:0;line-height:1.45}
.sc-ligne-url{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  word-break:break-all;line-height:1.4}

/* Volet « Rédaction » : les sections telles qu'elles s'écrivent. */
.sc-prose{flex:1;min-height:0;overflow-y:auto;padding:24px 30px}
.sc-sec{max-width:760px;margin:0 auto 20px}
.sc-sec h3{margin:0 0 7px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--primary)}
.sc-sec p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.sc-frappe::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;
  vertical-align:-2px;background:var(--primary);animation:sc-curseur 1s steps(1) infinite}

/* Pied commun : étape en cours, compteur, jauge fine. L'avancement chiffré reste
   disponible, sans occuper le centre de l'écran. */
.sc-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 20px;border-top:1px solid var(--line);background:var(--panel)}
.sc-etape{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  min-width:0;flex:1 1 auto}
.sc-compteur{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.sc-jauge{flex:0 0 140px;height:5px;border-radius:var(--radius-full);
  background:var(--muted-bg);overflow:hidden}
.sc-jauge[hidden]{display:none}
.sc-jauge>span{display:block;height:100%;background:var(--primary);
  transition:width .4s ease;animation:ec-pulse 1.7s ease-in-out infinite}
.sc-relance{flex-basis:100%;font-size:12.5px;color:var(--faint)}
@keyframes sc-entree{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes sc-curseur{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Écran étroit : la boîte de code passe SOUS l'écran de constatation plutôt que de
   réduire les deux à des colonnes illisibles. */
@media(max-width:1000px){
  .sc-live{flex-direction:column}
  .sc-code{flex:0 0 34%;min-height:130px;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:700px){
  .sc-tete{gap:10px}
  .sc-titre{flex-basis:100%}
  .sc-jr.ouvert{flex-basis:38%}
  .sc-code{flex-basis:30%}
}

/* Plein écran (consigne V12) : le MÊME cadre occupe l'écran entier — le flux vidéo de
   la constatation et le balayage des surfaces se poursuivent sans reconnexion. Ni
   coins arrondis ni ombre : il n'y a plus de page derrière. */
/* `display:flex` est REPOSÉ ici : hors de son emplacement, la carte ne répond plus au
   sélecteur `.scene-slot > .card` qui l'empile en colonne, et son écran de
   constatation débordait alors de la fenêtre au lieu de la remplir. */
.sc-card:fullscreen{width:100vw;height:100vh;min-height:0;max-height:none;border:0;
  border-radius:0;box-shadow:none;background:var(--panel);
  display:flex;flex-direction:column}
.sc-card:-webkit-full-screen{width:100vw;height:100vh;min-height:0;max-height:none;
  border:0;border-radius:0;box-shadow:none;background:var(--panel);
  display:flex;flex-direction:column}
/* Sur tout un écran, le cadre respire : barre plus haute et écran de constatation
   moins bridé par la boîte de code. */
.sc-card:fullscreen .sc-tete{padding:16px 26px}
.sc-card:fullscreen .sc-pied{padding:13px 26px}
.sc-card:fullscreen .sc-code{flex:0 0 clamp(280px,26%,420px)}
.sc-card:fullscreen .sc-jr-tete{padding:11px 26px}
.sc-card:fullscreen .sc-journal{padding:2px 26px 14px}
/* Mouvement réduit (réglage système) : tout le contenu reste, rien ne bouge. Le
   balayage, le reflet du gabarit et le curseur de frappe sont neutralisés ; le
   cadrage d'une surface devient un saut. */
@media(prefers-reduced-motion:reduce){
  .sc-page{transition:none}
  .sc-laser{display:none}
  .sc-surf.vise,.sc-code.vise,.rq-src.en_cours .rq-lien,.rq-src.en_cours .rq-noeud,
  .rq-onde,.rq-chip.en_cours::before{animation:none}
  .sc-gabarit::after{animation:none;transform:none;background:none}
  .sc-redac-page::after{animation:none;transform:none;background:none}
  .sc-redac .r-sec{animation:none}
  .sc-redac .r-sec.ecrit .r-l.court::after{animation:none}
  .c-frappe .c-l:last-child::after{animation:none}
  .sc-surf{transition:none}
}

/* --- Colonne principale sans rapport : l'avancement, centré dans la carte --- */
.etat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 24px}
.etat-bloc{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;width:100%;max-width:420px}
.spinner.grand{width:30px;height:30px;border-width:3px}
.etat-ico{width:34px;height:34px;border-radius:var(--radius-full);display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:700}
.etat-ico.err{color:var(--err);background:var(--err-bg)}
.etat-ico.warn{color:var(--skip);background:var(--skip-bg)}
.etat-titre{font-size:16px;font-weight:700;line-height:1.35}
.etat-sous{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.etat-jauge{width:100%;max-width:320px;height:6px;border-radius:var(--radius-full);
  background:var(--muted-bg);overflow:hidden}
.etat-jauge>span{display:block;height:100%;background:var(--primary);
  transition:width .4s ease;animation:ec-pulse 1.7s ease-in-out infinite}
.etat-note{font-size:12.5px;color:var(--faint);line-height:1.55}
.etat-hint{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* --- Bandeau d'accès bloqué (mur de connexion, défi anti-robot) --- */
.bandeau-connexion{margin:0 0 16px}
.bandeau-connexion .meta{margin:0 0 10px}
.bandeau-connexion .meta:last-of-type{margin-bottom:0}
.bandeau-attente{border-left:4px solid var(--skip)}
.bandeau-bloque{border-left:4px solid var(--err)}
.bandeau-connexion details{margin-top:14px}
.bandeau-connexion summary{cursor:pointer;margin-bottom:10px}
.bandeau-connexion .btn-mini{margin-top:4px}
.cmd{background:var(--ink-strong);color:#f2f2f2;padding:9px 12px;border-radius:var(--radius-xs);
  overflow:auto;margin:8px 0 0;font-family:var(--mono);font-size:12px}

.seg-bar{display:flex;gap:3px;margin:2px 0 12px}
.seg{flex:1;height:9px;border-radius:2px;background:var(--muted-bg);min-width:4px}
.seg.s-ok{background:var(--primary)}
.seg.s-en_cours{background:var(--primary);animation:ec-pulse 1.7s ease-in-out infinite}
.seg.s-error{background:var(--err)}
.phase-bloc{margin-top:10px}
.phase-titre{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:3px}
.etape-row{display:flex;align-items:center;gap:9px;padding:4px 6px;font-size:13px;border-radius:var(--radius-xs)}
.etape-row.et-en_cours{background:var(--primary-soft)}
.etape-ico{width:16px;text-align:center;font-weight:700;flex-shrink:0}
.etape-ico.et-ok,.etape-ico.et-en_cours{color:var(--primary)}
.etape-ico.et-error{color:var(--err)}
.etape-ico.et-pending{color:var(--faint)}
.etape-row .titre{flex:1}
.etape-row.et-en_cours .titre{font-weight:600;color:var(--primary)}
.etape-row.et-pending .titre{color:var(--faint)}
.etape-err{font-size:11px;color:var(--err);max-width:45%;text-align:right}

/* Zone utilisateur (en-tête) */
.top .wrap{position:relative}
.user-zone{position:absolute;top:2px;right:24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uz-nom{color:#fff;font-size:13px;font-weight:600}
.uz-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.22);padding:1px 6px;border-radius:var(--radius-xs);margin-left:4px}
.uz-btn{font:inherit;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-xs);padding:4px 10px;cursor:pointer;
  transition:background .15s}
.uz-btn:hover{background:rgba(255,255,255,.28)}
@media(max-width:640px){.user-zone{position:static;margin-top:12px;right:auto}}

/* Modales d'authentification / comptes */
.auth-modal{max-width:420px}
.auth-champs{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.auth-champs input,.adm-creer input,.adm-creer select{padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font:inherit;font-size:14px;outline:none;background:var(--panel)}
.auth-champs input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,28,77,.12)}
.auth-err{color:var(--err);font-size:12.5px;min-height:16px;margin-top:8px}
.adm-liste{margin:6px 0 14px;max-height:46vh;overflow:auto}
.adm-ligne{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line);flex-wrap:wrap}
.adm-ligne:first-child{border-top:0}
.adm-id{font-weight:700;min-width:120px}
.adm-flag{font-size:11px;color:var(--skip);background:var(--skip-bg);padding:2px 8px;border-radius:var(--radius-xs)}
.adm-act{display:flex;gap:6px;margin-left:auto}
.adm-creer{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.adm-creer input{flex:1;min-width:140px}
/* Consigne V24 : adresse reliée à chaque compte, lien à transmettre, lien « oublié » */
.adm-email{display:flex;gap:6px;align-items:center;flex:1;min-width:260px}
.adm-email input{flex:1;min-width:160px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-xs);font:inherit;font-size:12.5px}
.adm-email input:focus{border-color:var(--primary);outline:none}
.adm-lien{display:block;font-size:11.5px;word-break:break-all;user-select:all;margin-top:4px;color:var(--fg,inherit)}
.auth-lien{margin-right:auto;font-size:12.5px;color:var(--primary);text-decoration:none;align-self:center}
.auth-lien:hover{text-decoration:underline}

/* Boîte de dialogue de confirmation */
.modal-ov{position:fixed;inset:0;background:rgba(20,20,20,.42);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:40}
/* Hors session (consigne V30) : l'écran de connexion ne laisse rien voir de
   l'application derrière lui. Le voile devient un fond opaque aux couleurs de la
   marque, et tout ce qui n'est pas la modale est rendu invisible tant que la
   session n'est pas ouverte. */
.modal-ov.hors-session{background:var(--gradient-brand);backdrop-filter:none;flex-direction:column;gap:22px}
body.hors-session > :not(.modal-ov){visibility:hidden}
.auth-marque{color:#fff;font-size:22px;font-weight:700;letter-spacing:.01em;text-align:center}
.auth-marque small{display:block;font-size:13px;font-weight:400;opacity:.85;margin-top:4px}
.modal{background:#fff;border-radius:var(--radius-sm);max-width:440px;width:100%;
  box-shadow:var(--shadow-md);padding:22px 24px}
.modal-titre{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px}
.modal-msg{font-size:14px;color:var(--text);line-height:1.55}
.modal-msg b{color:var(--primary);font-weight:700}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
/* Capture assistée : panneau large pour accueillir le navigateur VNC embarqué. */
.modal.capture-assistee{max-width:1000px}
.capture-assistee .ca-scene{margin-top:14px}
.capture-assistee .ca-vnc{width:100%;height:62vh;min-height:420px;background:#000;
  border-radius:var(--radius-sm);overflow:hidden}
.capture-assistee .ca-local{background:#f3f4ee;border:1px solid var(--line,#e4e4d8);
  border-radius:var(--radius-sm);padding:18px 20px;font-size:14px;line-height:1.55;color:var(--text)}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.danger:hover{background:#8f1c2f;border-color:#8f1c2f}

/* Petits boutons d'action (Ouvrir / Arrêter) */
.btn-mini{font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--primary);
  border:1px solid var(--primary);border-radius:var(--radius-xs);padding:5px 12px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn-mini:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-mini.stop{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
.btn-mini.stop:hover{background:var(--muted-bg);border-color:var(--text)}

/* Pastille de compteur (en-tête « Recherches en cours ») */
.pastille{display:inline-block;min-width:20px;text-align:center;font-size:11px;font-weight:700;
  color:#fff;background:var(--primary);border-radius:var(--radius-full);padding:1px 7px;
  vertical-align:middle;margin-left:6px}

/* --- Recherches EN COURS : cartes vivantes, mises en avant --- */
.encours{margin:0 0 18px}
.encours:empty{display:none}
.ec-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ec-carte{border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:var(--radius-xs);padding:13px 15px;background:var(--panel)}
.ec-carte.actif{border-color:var(--primary)}
.ec-tete{display:flex;align-items:center;gap:10px}
.ec-nom{font-weight:700;flex:1;word-break:break-all}
.ec-actions{display:flex;gap:6px;flex-shrink:0}
.ec-etape{font-size:12.5px;color:var(--muted);margin:9px 0;min-height:16px}
.ec-jauge{height:6px;border-radius:var(--radius-full);background:var(--muted-bg);overflow:hidden}
.ec-jauge>span{display:block;height:100%;background:var(--primary);transition:width .4s ease;
  animation:ec-pulse 1.7s ease-in-out infinite}
@keyframes ec-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.ec-compteur{font-size:11.5px;color:var(--faint);margin-top:7px;font-variant-numeric:tabular-nums}

/* --- Spinner de chargement --- */
@keyframes tourne{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--primary-soft);
  border-top-color:var(--primary);border-radius:50%;animation:tourne .7s linear infinite;
  vertical-align:middle;flex-shrink:0}
/* Un sablier ne doit tourner que si quelque chose tourne : `hidden` doit donc primer
   sur le `display` de la classe (d'où le sélecteur attribut). */
.spinner[hidden]{display:none}
.chargement{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:44px 16px;color:var(--muted);font-size:13.5px}
.chargement .spinner{width:22px;height:22px;border-width:3px}
/* Bouton en cours de traitement : masque le libellé, affiche un spinner blanc centré */
.btn.charge,.btn-mini.charge{position:relative;color:transparent!important;pointer-events:none}
.btn.charge::after,.btn-mini.charge::after{content:"";position:absolute;inset:0;margin:auto;
  width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  border-radius:50%;animation:tourne .7s linear infinite}

/* Lien de secours pour relancer manuellement la génération du PV (rare) */
.lien-relance{background:none;border:0;color:var(--faint);font-size:12px;cursor:pointer;
  padding:4px;text-decoration:underline;text-underline-offset:2px}
.lien-relance:hover{color:var(--primary)}

/* --- HISTORIQUE : groupé par domaine, repliable, filtrable --- */
.historique:empty{display:none}
.histo-barre{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.histo-filtre{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font:inherit;font-size:13px;outline:none;background:var(--muted-bg);
  transition:border-color .15s,box-shadow .15s,background .15s}
.histo-filtre:focus{border-color:var(--primary);background:var(--panel);box-shadow:0 0 0 3px rgba(168,28,77,.12)}
.histo-filtre::placeholder{color:var(--muted)}
.histo-stock{font-size:12px;color:var(--muted);white-space:nowrap}
.histo-stock.plein{color:var(--primary);font-weight:700}
.histo-compte{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);margin-bottom:6px}
.histo-groupe{border-top:1px solid var(--line)}
.histo-groupe:first-of-type{border-top:0}
.histo-dom{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;cursor:pointer;padding:11px 4px;font:inherit;color:var(--text);transition:color .15s}
.histo-dom:hover{color:var(--primary)}
.histo-caret{color:var(--primary);font-size:11px;width:12px;flex-shrink:0}
.histo-nom{font-weight:700;word-break:break-all}
.histo-dom-meta{flex:1;font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.histo-runs{padding:0 0 10px 26px;display:flex;flex-direction:column;gap:1px}
.histo-run{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-xs);flex-wrap:wrap}
.histo-run:hover{background:var(--muted-bg)}
.histo-run.actif{background:var(--primary-soft)}
.histo-run-date{font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:108px}
.histo-run-qui{font-size:12px;color:var(--muted);max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.histo-run .btn-mini{margin-left:auto}
.pico{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-xs);
  background:var(--muted-bg);color:var(--muted)}
.pico.e-termine{color:var(--ok);background:var(--ok-bg)}
.pico.e-arrete,.pico.e-erreur,.pico.e-interrompu{color:var(--err);background:var(--err-bg)}
.pico.e-en_attente_acces{color:var(--skip);background:var(--skip-bg)}
.pico.pret{color:var(--primary);background:var(--primary-soft)}
#fiches-lien{margin-top:8px}

/* --- Volets repliables (suivi, détails, coûts, historique) : interface compacte --- */
/* Carte pliable : l'en-tête cliquable remplace le titre ; le corps n'existe qu'ouvert.
   Les volets techniques sont des barres pleine largeur SOUS les deux colonnes :
   aucun bouton de suivi ou de détail ne coupe la page en son milieu. */
.carte-pliable{padding:0;overflow:hidden}
.detail-grid+.carte-pliable,.carte-pliable+.carte-pliable{margin-top:14px}
/* Dans la colonne étroite, l'écart est déjà donné par `gap` : sans ce retour à zéro,
   les deux barres (livrables, suivi) se séparaient de 26 px au lieu de 12. Elles y
   sont aussi plus basses — ce sont des barres de service, pas le sujet de la page. */
.detail-rail>.carte-pliable+.carte-pliable{margin-top:0}
.detail-rail .pli-tete{padding:12px 18px;min-height:46px}
.detail-rail .pli-corps{padding:12px 18px 14px}
.pli-tete{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:15px 24px;font:inherit;color:var(--text);
  transition:background .15s;min-height:52px}
.pli-tete:hover{background:var(--muted-bg)}
.pli-tete .spinner{width:16px;height:16px}
.pli-titre{flex:1;min-width:0;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--primary)}
.pli-meta{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:1;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.pli-caret{margin-left:4px;color:var(--primary);font-size:12px;flex-shrink:0}
.pli-corps{padding:14px 24px 16px;border-top:1px solid var(--line)}
/* La bordure du corps tient lieu de séparateur : pas de double filet sur la 1re ligne */
.pli-corps>.ligne:first-child{border-top:0}
.pli-corps .pl-flow{margin-bottom:14px}
.pli-corps .seg-bar{margin:0 0 8px}
.suivi-ico{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700}
.suivi-ico.ok{color:var(--ok)}
.suivi-ico.err{color:var(--err)}
.suivi-ico.warn{color:var(--skip)}

/* Durée d'une analyse dans l'historique */
.histo-run-duree{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Responsive : bouton de lancement pleine largeur sur petit écran */
@media(max-width:560px){
  .lanceur{flex-wrap:wrap}
  .lanceur .btn{width:100%}
  .detail-tete{flex-wrap:wrap}
  .ec-grille{grid-template-columns:1fr}
}

/* Coffre à identifiants (consigne V19) : panneau replié sous le lanceur. */
.coffre{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.coffre summary{cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;font-size:13px}
.coffre summary::-webkit-details-marker{display:none}
.coffre summary::before{content:"\25B8";color:var(--primary);font-size:12px}
.coffre[open] summary::before{content:"\25BE"}
.coffre-titre{font-weight:600;color:var(--text)}
.coffre-meta{font-size:12px;color:var(--faint)}
.coffre-corps{padding:12px 0 2px}
.coffre-aide{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.coffre-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.coffre-liste:empty{display:none}
.coffre-ligne{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font-size:13px;background:var(--muted-bg)}
.coffre-ligne .dom{font-weight:600;color:var(--text);min-width:160px}
.coffre-ligne .id{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.coffre-ligne .qui{font-size:12px;color:var(--faint);white-space:nowrap}
.coffre-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.coffre-form input{flex:1 1 160px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font:inherit;font-size:13.5px;outline:none;background:var(--panel)}
.coffre-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,28,77,.12)}
.coffre-form .btn-mini{margin:0;padding:10px 16px}
.coffre-err{color:var(--err);font-size:12.5px;min-height:16px;margin-top:6px}
.coffre-err.ok{color:var(--muted)}
/* Bandeau « Identification requise » : formulaire posé dans le bandeau d'accès. */
.ident-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.ident-form input{flex:1 1 200px;min-width:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-xs);font:inherit;font-size:14px;outline:none;background:var(--panel)}
.ident-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,28,77,.12)}
.ident-form .btn-mini{margin:0;padding:11px 16px}
.ident-err{color:var(--err);font-size:12.5px;min-height:16px;margin-top:6px}
.ident-refus{background:var(--err-bg);color:var(--err);padding:8px 12px;border-radius:var(--radius-xs);
  font-size:13px;margin:0 0 10px}
.sc-message .ident-form{justify-content:center;max-width:520px;margin:12px auto 0}
.ca-prerempli{font-size:13px;color:var(--muted);margin-top:8px}

/* Soldes des clés API (17/09/2026) : une ligne de pastilles sous le lanceur. */
.credits{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.credits-titre{font-weight:600;color:var(--text);font-size:13px}
.credits-liste{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.credit{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:var(--radius-xs);
  background:var(--muted-bg);color:var(--muted);white-space:nowrap;cursor:default}
.credit b{color:var(--text);font-weight:600}
.credit .val{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text)}
.credit.bas{background:var(--err-bg);color:var(--err)}
.credit.bas .val,.credit.bas b{color:var(--err)}
.credit.hs{background:var(--skip-bg);color:var(--skip)}
.credit.hs b{color:var(--skip)}
.credits-maj{background:none;border:0;padding:0;margin:0;font:inherit;font-size:12px;color:var(--faint);
  cursor:pointer;text-decoration:underline dotted}
.credits-maj:hover{color:var(--primary)}
.credits-maj[disabled]{opacity:.5;cursor:progress}

/* V26 : réglages des comptes, lisibles sur ordinateur comme sur petit écran. */
.compte-modal{width:min(600px,calc(100vw - 32px));max-width:600px;
  max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box}
.compte-onglets{flex-wrap:wrap;justify-content:flex-start;margin-bottom:16px}
.compte-onglets .btn{flex:1;min-width:90px}
.compte-form label{display:flex;flex-direction:column;gap:5px;font-size:13px}
.compte-form input{width:100%;box-sizing:border-box}
.compte-form label:has(input[type="checkbox"]){flex-direction:row;align-items:center}
.compte-form input[type="checkbox"]{width:auto;flex:none}

/* Consigne V33 : rôles cochés à la création, mode admin temporaire */
.adm-roles{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.adm-roles label{display:flex;gap:4px;align-items:center;cursor:pointer}
.adm-creer .adm-roles input{flex:none;min-width:0;width:16px;height:16px;padding:0;margin:0;accent-color:var(--accent,#a51d4f)}
.uz-btn.uz-actif{background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.admin-modal{max-width:min(960px,calc(100vw - 32px));width:100%}
.admin-modal #pa-corps{max-height:65vh;overflow:auto}