/* Console du middleware SAM — feuille de style unique, sans dépendance. */

:root {
  /* Le thème est sombre et ne propose pas de variante claire. Le DIRE au
     navigateur n'est pas cosmétique : sans cette ligne, les listes déroulantes
     natives, le remplissage automatique et les calendriers se rendent en clair
     sur fond sombre, et deviennent illisibles. */
  color-scheme: dark;

  --bg: #0f1117;
  --surface: #171a23;
  --surface-2: #1e222e;
  --border: #2a2f3d;
  --text: #e6e8ee;
  --muted: #9aa3b8;
  --accent: #5b8def;

  /* Le bleu d'un bouton PLEIN, qui porte du texte blanc.
     `--accent` convient à du texte et à un trait sur fond sombre (5,38:1),
     mais en aplat il ne donne que 3,23:1 sous du blanc : tous les boutons
     primaires échouaient au AA, et `opacity:.5` divisait encore ce rapport
     quand ils étaient désactivés. Celui-ci donne 4,76:1. */
  --accent-fort: #3b6fd4;

  --ok: #3fb950;
  --warn: #d29922;
  --error: #f85149;
  /* Le rouge de `--error` sur son propre fond teinté ne donne que 4,0:1 :
     lisible en bordure, trop faible pour du texte de 12 px. Celui-ci, 6,9:1. */
  --error-clair: #ffa198;

  --radius: 8px;

  /* L'échelle typographique. Elle n'existait pas : onze tailles distinctes
     cohabitaient, et le nom d'un client se rendait exactement comme le mot
     « Filtres ». */
  --t-titre: 20px;
  --t-entite: 16px;
  --t-corps: 14px;
  --t-etiquette: 13px;
  --t-menu: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--t-corps)/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;

  /* `auto` et non une largeur figée : tant qu'aucune session n'est ouverte,
     la latérale porte `hidden`, sa colonne tombe à zéro, et le formulaire de
     connexion n'est pas poussé par une colonne vide. */
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
}

a { color: var(--accent); }

/* --- La barre latérale ---------------------------------------------------

   Elle remplace huit onglets à plat, qui mélangeaient les entités, l'activité,
   les journaux, la configuration et l'exploitation sans rien ranger — et qui
   débordaient horizontalement sous ~700 px, faute de `flex-wrap`. */

#menu {
  width: 212px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0 12px;
}

.marque {
  padding: 0 16px 18px;
  font-size: var(--t-etiquette);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#menu nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.menu-groupe {
  margin: 14px 0 4px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}
.menu-groupe:first-child { margin-top: 0; }

#menu nav button {
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-align: left;
  padding: 7px 16px;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-etiquette);
}
#menu nav button:hover { color: var(--text); background: var(--surface-2); }
#menu nav button[aria-current="page"] {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--surface-2);
  font-weight: 600;
}

.menu-pied {
  padding: 12px 16px 0;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-menu);
  color: var(--muted);
}
.menu-pied .user { display: block; }

/* --- La zone de travail et sa barre de contexte -------------------------- */

.zone { min-width: 0; }

.contexte {
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ariane { font-size: var(--t-menu); color: var(--muted); margin-bottom: 6px; }
.ariane button {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ariane button:hover { color: var(--text); }
.ariane .separateur { margin: 0 6px; opacity: 0.6; }
.ariane .courant { color: var(--text); }

.titre-ligne { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.titre-ligne h1 {
  margin: 0;
  font-size: var(--t-titre);
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}
.titre-ligne .gestes { margin-left: auto; }

/* Le nom d'une ENTITÉ — un client, un compte, une configuration. Il se lisait
   jusqu'ici avec `.card h2`, c'est-à-dire en 13 px gris majuscules : le nom
   « FIMAINFO » était rendu exactement comme le mot « FILTRES ». */
.titre-entite {
  font-size: var(--t-entite);
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

main { padding: 20px 24px; max-width: 1400px; }

.grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 12px; }

label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
label span { display: block; margin-bottom: 4px; }

input, select, textarea, button.action {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; min-height: 120px; resize: vertical; }
input[type="checkbox"] { width: auto; }

button.action { cursor: pointer; background: var(--accent-fort); border-color: var(--accent-fort); color: #fff; font-weight: 500; }
button.action:hover { filter: brightness(1.1); }
button.action:disabled { opacity: .5; cursor: not-allowed; }
button.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--border); }
td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover { background: var(--surface-2); }
/* La main ne s'affiche QUE sur les lignes qui mènent quelque part. Elle était
   posée sur toutes, alors que deux tableaux seulement sont cliquables : les
   comptes, les clés, la santé, la consommation et les verdicts l'annonçaient
   sans tenir. `data-id` est le marqueur que ces deux tableaux portent déjà. */
tbody tr[data-id] { cursor: pointer; }
tbody tr[data-id]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* La ligne OUVERTE. Rien ne disait de laquelle le détail affiché dessous
   parlait : au deuxième clic, on ne savait plus. */
tbody tr[aria-current="true"] { background: rgba(91, 141, 239, .12); box-shadow: inset 3px 0 0 var(--accent); }

pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  margin: 0;
}

/* UNE seule définition de `.badge`. Il y en avait deux — celle-ci et une autre
   cent lignes plus bas, de même spécificité : la première était intégralement
   morte, et la pastille arrondie qu'elle décrivait ne s'est jamais affichée.
   Les variantes qui suivent gagnent par leur spécificité (0,2,0), quel que
   soit leur rang ; `.badge-prod`, lui, ne tient QUE par son ordre. */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #2c3440;
  color: #cbd5e1;
}
.badge.ok { background: rgba(63,185,80,.15); color: var(--ok); }
.badge.empty { background: rgba(154,163,184,.15); color: var(--muted); }
.badge.error { background: rgba(248,81,73,.15); color: var(--error-clair); }
.badge.write { background: rgba(210,153,34,.15); color: var(--warn); }

.summary {
  background: rgba(91,141,239,.1);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
  font-size: 15px;
}

.metrics { display: flex; gap: 20px; flex-wrap: wrap; }
.metric { background: var(--surface-2); border-radius: 6px; padding: 12px 16px; min-width: 110px; }
.metric .value { font-size: 22px; font-weight: 600; }
.metric .label { color: var(--muted); font-size: 12px; }

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.right { text-align: right; }
.hint { color: var(--warn); font-size: 13px; margin-top: 8px; }
.error-box { background: rgba(248,81,73,.1); border-left: 3px solid var(--error); padding: 10px 14px; border-radius: 0 6px 6px 0; }
/* Les champs ouvrables d un modele : trente-sept cases a cocher, une par ligne,
   faisaient une colonne interminable ou l on ne trouvait plus rien. */
.champs-ouverts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 16px;
  margin: 8px 0;
}
.champs-ouverts label { margin: 0; }

.row { display: flex; gap: 10px; align-items: center; }

/* --- Playground : le périmètre d'exécution, toujours visible ------------- */

.scope {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.2rem;
}

/* La production se signale d'elle-même : c'est là que les écritures comptent.
   Attention : cette règle ne gagne sur `.badge` que par son RANG, les deux
   ayant la même spécificité. La remonter dans le fichier éteindrait tous les
   badges de production, sans qu'aucun test ne le dise. */
.badge-prod {
  background: #7f1d1d;
  color: #fecaca;
}

fieldset.subobject {
  border: 1px solid #2c3440;
  border-radius: 4px;
  padding: 0.6rem 0.8rem 0.8rem;
  margin: 0.8rem 0;
}

fieldset.subobject legend {
  padding: 0 0.4rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

details.advanced {
  margin-top: 1rem;
  border-top: 1px solid #2c3440;
  padding-top: 0.6rem;
}

details.advanced summary {
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* La forme d'une valeur saisie en JSON entier : une description, pas un
   formulaire. Voir `formeJson` dans app.js. */
ul.forme-json {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

ul.forme-json .mono {
  color: var(--text);
}

/* --- Info-bulles d'aide -------------------------------------------------
   Les descriptions de champs faisaient souvent deux lignes, rendues en BLOC
   sous chaque intitulé. Dans l'éditeur de modèle, où une ligne porte le choix
   du champ à gauche et sa valeur à droite, elles donnaient à chaque ligne une
   hauteur différente : plus rien n'était aligné d'une ligne à l'autre. */

.info {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  margin: 0 0 0 6px;
  cursor: help;
}

.info-marque {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  transition: color .12s, border-color .12s;
}

.info:hover .info-marque,
.info:focus-visible .info-marque {
  color: var(--text);
  border-color: var(--accent);
}

.info-bulle {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 20;
  display: block;
  width: max-content;
  max-width: min(420px, 70vw);
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.45;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}

/* `opacity` seule : ni `display` ni `visibility`, qui sortiraient la bulle de
   l'arbre d'accessibilité et rendraient `aria-describedby` muet. */
.info:hover .info-bulle,
.info:focus-visible .info-bulle,
.info:focus-within .info-bulle {
  opacity: 1;
  transform: translateY(0);
}

.info-bulle::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 12px;
  border: 6px solid transparent;
  border-bottom-color: var(--border);
}

/* --- Une ligne de valeur figée ou assistée ------------------------------
   Une grille, et non un `flex` avec une largeur maximale posée au jugé : les
   trois colonnes s'alignent alors d'une ligne à l'autre, ce que la version
   précédente ne donnait pas — c'était le décalage visible à l'écran. */

.tpl-ligne {
  display: grid;
  grid-template-columns: minmax(200px, 22rem) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.tpl-ligne [data-valeur] label { margin-bottom: 0; }
.tpl-ligne [data-valeur] > p { margin: 6px 0 0; }
.tpl-ligne [data-retirer] { width: 36px; padding: 8px 0; }

/* Sous 720 px, la valeur passe sous le choix du champ plutôt que de se
   comprimer en une colonne illisible. */
@media (max-width: 720px) {
  .tpl-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .tpl-ligne [data-valeur] { grid-column: 1 / -1; }
}

/* --- Les identités d'écriture d'un compte SAM --------------------------------------
   Aligné sur une ligne, l'intitulé au-dessus du champ : c'est le seul endroit
   de la console où l'on modifie une valeur qui décide de ce qui part dans un
   CRM de production. */

.identites {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.identites label { margin: 0; width: 13rem; }
.identites button { width: auto; }
.identites [data-identites-etat] { font-size: 12.5px; flex-basis: 100%; }

/* L'identifiant ElevenLabs est long — « agent_ » suivi de 27 caractères — et il
   se relit pour être COMPARÉ à celui de la console d'ElevenLabs. Le tronquer
   dans les 13 rem des identités d'écriture obligeait à faire défiler un champ
   pour vérifier une valeur, et le bouton passait par-dessus. */
.identite-externe label { width: 30rem; }
.identite-externe input { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.identite-externe [data-externe-etat] { font-size: 12.5px; flex-basis: 100%; }

/* --- Écran de configuration : un compte SAM, ses configurations (plan Q4) ---
   L'écran rendait une carte par AGENT, en y répétant le bloc du COMPTE. Deux
   configurations sur un même compte — le cas normal, un compte par client et
   un agent par canal — produisaient deux fois les mêmes `data-compte`, et
   l'enregistrement les balayait tous : la dernière carte écrasait la première,
   sans un mot. Un compte, une carte — et ses huit valeurs sur SA page, où
   l'on voit qu'elles sont à lui. */

/* L'identité d'une configuration : des faits, pas un formulaire. */
.defs { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.defs dt { color: var(--muted); }
.defs dd { margin: 0; }

/* Les huit réglages d'un compte.
   Une GRILLE, et non un flex à largeur posée au jugé : c'est elle qui aligne
   les colonnes d'une ligne à l'autre et qui décide de la largeur des champs.
   AUCUN `style="width:…"` ici, jamais — le 17/09/2026, un champ plus large que
   son conteneur est passé sous le bouton, et le clic n'atteignait plus rien. */
.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 20px;
  margin-top: 12px;
}
.valeurs label { width: auto; margin: 0 0 10px; }
.valeurs .champ-motif { margin: -6px 0 10px; font-size: 12px; }

/* Une valeur enregistrée que le référentiel ne propose plus. Elle n'est jamais
   effacée en silence : le signe est DANS le libellé de l'option, la bordure ne
   fait que le redire en couleur. */
.valeurs select:has(option[data-hors-liste]:checked) { border-color: var(--warn); }

.valeurs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.valeurs-actions button { width: auto; }
.valeurs-actions input { width: auto; flex: 1 1 18rem; }
.valeurs-actions [data-identites-etat],
.valeurs-actions [data-cle-emettre-etat] { flex-basis: 100%; font-size: 12.5px; }

/* La clé émise, affichée UNE SEULE FOIS. Elle vit dans `state`, pas dans le
   DOM : chaque enregistrement de cet écran reconstruit la page. */
.cle-emise {
  background: rgba(210, 153, 34, .10);
  border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cle-emise .valeur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* `flex` et non `width` : la clé fait quarante caractères, le champ prend ce
   qui reste et passe à la ligne plutôt que de pousser le bouton dehors. */
.cle-emise input { flex: 1 1 26rem; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.cle-emise button { width: auto; }

.gestes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gestes button { width: auto; }
.gestes p { flex-basis: 100%; margin: 6px 0 0; }

button.danger { background: var(--surface-2); border-color: var(--error); color: var(--error); }
button.danger:hover { background: rgba(248, 81, 73, .12); filter: none; }
/* Pas d'`opacity: .5` ici, contrairement à `button.action:disabled` : ce bouton
   PORTE sa raison dans son libellé — « Suppression impossible — 318 appels ».
   À demi effacé, il ne se lirait plus. */
button.danger:disabled { opacity: 1; color: var(--muted); border-color: var(--border); cursor: not-allowed; }

/* --- Les accès -----------------------------------------------------------

   Les onglets d'une configuration. Ils remplacent quatre cartes empilées dans
   une fiche dépliable, elle-même dans une carte — six niveaux d'encadrement.
   Chacun est une ADRESSE, donc partageable. */

.onglets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.onglets button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-etiquette);
  width: auto;
}
.onglets button:hover { color: var(--text); }
.onglets button[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Une ligne d'actions qui respire, sous un tableau ou sous les onglets. */
.ligne-compte {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ligne-compte button { width: auto; }

/* Le nom d'une entité dans un `h2` de carte : il reprend ses propres règles,
   que `.card h2` écraserait sinon en 13 px gris majuscules. */
.card h2 .titre-entite { margin-right: 6px; }

/* --- Le banc d'essai ------------------------------------------------------

   Il tenait dans la colonne de 320 px de `.grid` — 286 px utiles à l'intérieur
   d'une carte — pendant que les mille pixels de droite restaient vides tant
   qu'on n'avait pas exécuté. Il prend maintenant toute la largeur, et le
   résultat s'affiche dessous. */

.essai { max-width: 1180px; }

.essai-outil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 20px;
}

/* Les sections du formulaire. Elles remplacent le repli unique intitulé
   « 30 champ(s) supplémentaire(s) », qui ne disait pas où chercher. */
.section-champs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.section-champs > h3,
.section-champs > summary {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--t-etiquette);
  font-weight: 600;
}
.section-champs > summary { cursor: pointer; margin-bottom: 0; list-style: none; }
.section-champs[open] > summary { margin-bottom: 12px; }
.section-champs > summary::-webkit-details-marker { display: none; }
/* Le chevron natif diffère d'un navigateur à l'autre et disparaît chez
   certains : on le pose en CARACTÈRE, lisible sans couleur. */
.section-champs > summary::before { content: '▸'; color: var(--muted); }
.section-champs[open] > summary::before { content: '▾'; }
.section-champs > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-titre { text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* La grille des champs. Même motif que `.champs-ouverts` et `.valeurs`, qui
   existaient déjà : le banc d'essai était le seul écran à ne pas s'en servir. */
.champs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 20px;
  align-items: start;
}
.champs-grille > label { margin-bottom: 12px; }
/* Ce qui ne se laisse pas mettre en colonne prend la ligne entière : un
   sous-objet et ses dix-sept champs, une valeur JSON, un commentaire. */
.champs-grille > fieldset.subobject,
.champs-grille > label:has(textarea) { grid-column: 1 / -1; }
.champs-grille > fieldset.subobject .champs-grille { gap: 0 16px; }

/* La barre d'action, collée au bas de l'écran. Le bouton « Exécuter » était
   sous le dernier champ, c'est-à-dire parfois à plusieurs milliers de pixels. */
.barre-action {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.barre-action button.action { width: auto; margin-left: auto; }
.barre-action .raccourci { font-size: var(--t-menu); }

/* Le verdict d'un essai. TROIS issues : écrite, composée sans être écrite,
   refusée. L'écran n'en connaissait qu'une, et annonçait « créée » là où rien
   n'était parti dans SAM. */
.summary.verdict-ok { border-left-color: var(--ok); background: rgba(63, 185, 80, .08); }
.summary.verdict-write { border-left-color: var(--warn); background: rgba(210, 153, 34, .08); }
.summary.verdict-error { border-left-color: var(--error); background: rgba(248, 81, 73, .08); }
.verdict-marque { font-weight: 700; margin-right: 4px; }

/* Un `<pre>` n'avait ni hauteur maximale ni retour à la ligne : vingt contacts
   rendus par `find_contact` faisaient plusieurs milliers de pixels. */
pre.borne {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.table-defilante { max-height: 420px; overflow: auto; }

/* Un bouton qui se lit comme un lien : la corrélation mène à l'historique. */
button.lien {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .valeurs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .champs-grille { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* Sous 820 px, la barre latérale passe EN BANDEAU au-dessus du contenu.
   Figée à 212 px, elle ne laissait que ~178 px sur un écran de 390 px —
   moins que le minimum de `.champs-grille` (210 px) : la page débordait
   horizontalement, et c'est ce débordement qui avait fait conclure, le
   17/09, qu'une clé « n'était pas enregistrée » alors que son bouton était
   simplement passé hors de portée du clic. */
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }

  #menu {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
  }
  .marque { padding: 0 16px 10px; }
  #menu nav { flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 0 10px; }
  .menu-groupe { flex-basis: 100%; margin: 8px 0 2px; padding: 0 6px; }
  #menu nav button {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
  }
  #menu nav button[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .menu-pied { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

  .contexte { padding: 12px 16px 10px; }
  main { padding: 16px; }
  .champs-grille { grid-template-columns: 1fr; }
  .essai-outil { grid-template-columns: 1fr; }
  .barre-action { flex-wrap: wrap; }
}

/* Même seuil que `.tpl-ligne` : un champ comprimé à 110 px ne montre plus
   « 7963 — Agent IA démo ». */
@media (max-width: 720px) {
  .valeurs { grid-template-columns: 1fr; }
  .defs { grid-template-columns: 1fr; }
  .defs dd { margin-bottom: 8px; }
  .cle-emise input { flex-basis: 100%; }
}