/* Agent SEO · charte mvaestech.fr en version « demi-sombre ».
   Montserrat très grasse pour les titres (la voix du logo), Figtree pour le texte.
   Fond graphite, surfaces un cran plus claires, jaune « capuche » et bleu du site.
   Les gravités se distinguent par une étiquette écrite et une forme, jamais par la seule couleur. */

@font-face { font-family: "Figtree"; src: url("polices/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("polices/montserrat-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --noir: #121416;
  --noir-2: #1A1D21;
  --bleu: #3870A8;
  --bleu-fonce: #2D5D8A;
  --bleu-clair: #8DBBEB;
  --capuche: #E3B532;
  --capuche-vif: #F0C64A;

  --fond: #1C1F23;
  --fond-haut: #15171A;
  --surface: #252A30;
  --surface-2: #2D333A;
  --surface-code: #14171A;
  --texte: #ECEEF1;
  --texte-doux: #AEB5BE;
  --texte-faible: #8E96A0;
  --filet: #3A4148;
  --filet-champ: #505861;
  --accent-texte: #8DBBEB;

  --g-critique: #FF8A7A;
  --g-critique-fond: #3A2523;
  --g-important: #F0C64A;
  --g-important-fond: #38301A;
  --g-mineur: #8DBBEB;
  --g-mineur-fond: #1F2E3F;
  --ok: #7FD1A0;
  --ok-fond: #1E3329;

  --titre: "Montserrat", "Arial Black", system-ui, sans-serif;
  --corps: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texte); font: 400 17px/1.6 var(--corps);
  background: var(--fond);
}
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-texte); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--capuche); outline-offset: 3px; border-radius: 4px; }
.masque-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--capuche); color: var(--noir); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.evitement:focus { top: 12px; }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }

/* ------------------------------------------------------------------ boutons, champs */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  font: 700 15px/1.1 var(--corps); text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-capuche { background: var(--capuche); color: var(--noir); font-weight: 800; }
.btn-capuche:hover:not(:disabled) { background: var(--capuche-vif); }
.btn-contour { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 2px #646D77; }
.btn-contour:hover:not(:disabled) { background: var(--texte); color: var(--noir); box-shadow: inset 0 0 0 2px var(--texte); }
.btn-grand { min-height: 60px; padding: 0 30px; font-size: 18px; font-weight: 800; }
.btn-petit { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }

.lien {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent-texte);
  font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}
.lien-souligne {
  border: 0; background: none; padding: 0 0 3px; cursor: pointer; font-weight: 700; color: var(--texte);
  border-bottom: 3px solid var(--capuche);
}

.champ {
  width: 100%; border: 2px solid var(--filet-champ); border-radius: 12px; background: var(--fond-haut);
  padding: 13px 16px; font-size: 17px; line-height: 1.55; resize: vertical;
}
.champ:focus { border-color: var(--capuche); outline: none; box-shadow: 0 0 0 3px rgba(227, 181, 50, .28); }
.champ::placeholder { color: var(--texte-faible); }
.champ-fin { border-width: 1px; padding: 11px 14px; font-size: 16px; }
.champ-site { font-size: 20px; padding: 16px 18px; }
select.champ { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%), linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.etiquette { display: block; font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.etiquette-espace { margin-top: 22px; }
.facultatif { font-weight: 400; color: var(--texte-faible); font-size: 13px; margin-left: 4px; }
.aide { color: var(--texte-doux); font-size: 15px; }
.erreur { color: var(--g-critique); font-weight: 600; margin-top: 14px; min-height: 1.5em; }
.vide { color: var(--texte-doux); padding: 28px 0; }
.case { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texte-doux); cursor: pointer; }
.case input { width: 20px; height: 20px; accent-color: var(--capuche); }

/* ------------------------------------------------------------------ mise en page */

.appli { min-height: 100vh; }
.contenu { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 140px; }

/* Bandeau fixe en bas : la navigation reste à portée sans prendre de largeur au contenu. */
.bandeau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 64px;
  display: flex; align-items: center; gap: 10px; padding: 0 clamp(12px, 3vw, 32px);
  background: var(--noir); color: #E6E8EB; border-top: 3px solid var(--capuche);
}
.bandeau .logo { display: block; margin-right: 10px; flex: none; }
.bandeau .logo img { width: 150px; }
.bandeau-espace { flex: 1 1 auto; }
.bandeau-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 10px; background: none; color: #E6E8EB; cursor: pointer; font-weight: 700;
}
.bandeau-bouton:hover, .bandeau-bouton[aria-expanded="true"] { border-color: #454C54; background: var(--noir-2); }
.pastille-sombre { font: 700 12.5px/1 var(--corps); background: #33383E; color: #E6E8EB; border-radius: 999px; padding: 4px 8px; }
.connexion { text-align: left; max-width: 360px; min-width: 0; }
.connexion-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.connexion-texte strong, .connexion-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connexion-texte small { font-weight: 400; font-size: 12.5px; color: #A3AAB3; }
.point { width: 10px; height: 10px; border-radius: 50%; background: #6B727B; flex: none; }
.point.ok { background: var(--ok); }
.point.ko { background: var(--g-critique); }
.bandeau-nouvelle { white-space: nowrap; }

.panneau-historique {
  position: fixed; left: clamp(8px, 2vw, 24px); bottom: 76px; z-index: 19; width: min(420px, calc(100vw - 16px)); max-height: min(60vh, 520px);
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--filet); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.panneau-historique-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--filet); }
.historique-titre { font: 800 15px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .04em; }
.historique-liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.historique-liste button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.historique-liste button:hover, .historique-liste li[aria-current] button { background: var(--surface-2); }
.historique-intitule { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historique-meta { display: block; font-size: 13.5px; color: var(--texte-doux); }
.statut-echec { color: var(--g-critique); font-weight: 700; }
.statut-cours { color: var(--capuche); font-weight: 700; }
.historique-vide { padding: 18px 16px; color: var(--texte-doux); }
.fermer { border: 0; background: none; color: var(--texte-doux); cursor: pointer; min-width: 40px; min-height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.fermer:hover { background: var(--surface-2); color: var(--texte); }

/* ------------------------------------------------------------------ accueil */

.accueil {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: clamp(16px, 4vw, 48px); align-items: end;
  margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: clamp(36px, 7vw, 72px) clamp(16px, 4vw, 40px) 0;
  background: linear-gradient(180deg, var(--fond-haut) 0%, #1A1D21 70%, var(--fond) 100%);
  border-bottom: 1px solid var(--filet); overflow: hidden;
}
.surtitre { font: 800 13px/1 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--capuche); margin-bottom: 18px; }
.titre-geant { font: 800 clamp(34px, 6vw, 62px)/1.04 var(--titre); letter-spacing: -.01em; text-transform: uppercase; }
.titre-capuche { color: var(--capuche); }
.chapo { margin-top: 22px; font-size: 19px; color: var(--texte-doux); max-width: 62ch; padding-bottom: clamp(28px, 5vw, 56px); }
.guetteur { width: 100%; max-width: 150px; justify-self: end; align-self: end; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }

.etape { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 40px 0 8px; }
.etape-premiere { padding-top: 48px; }
.numero {
  width: 44px; height: 44px; border-radius: 50%; background: var(--capuche); color: var(--noir);
  font: 800 20px/44px var(--titre); text-align: center;
}
.titre-etape { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--titre); margin-bottom: 16px; text-transform: uppercase; }
.titre-petit { font: 800 14px/1.2 var(--titre); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; color: var(--texte-doux); }
.etape-corps > .aide { margin-top: 12px; }

.confidentialite { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.confidentialite li { background: var(--surface); border: 1px solid var(--filet); border-left: 4px solid var(--capuche); border-radius: 12px; padding: 14px 16px; }
.confidentialite strong { display: block; margin-bottom: 4px; }
.confidentialite span { color: var(--texte-doux); font-size: 15px; display: block; }

.ligne-pages { display: flex; align-items: center; gap: 20px; }
.curseur { flex: 1 1 auto; accent-color: var(--capuche); height: 32px; max-width: 520px; }
.valeur-pages { font: 800 22px/1 var(--titre); min-width: 7ch; color: var(--capuche); }

.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.porte {
  text-align: left; background: var(--surface); border: 2px solid var(--filet); border-radius: 16px; padding: 18px 20px; cursor: pointer; display: block;
}
.porte:hover { border-color: #5A636D; }
.porte[aria-checked="true"] { border-color: var(--capuche); background: #2A2B26; box-shadow: 0 0 0 1px var(--capuche); }
.porte-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.porte-titre { font: 800 19px/1.2 var(--titre); text-transform: uppercase; }
.porte-coche { color: var(--capuche); opacity: 0; }
.porte[aria-checked="true"] .porte-coche { opacity: 1; }
.porte-texte { color: var(--texte-doux); font-size: 15.5px; display: block; }

.reglages-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--filet); border-radius: 14px; }
.reglages-ia-aide { grid-column: 1 / -1; }

.lancement { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; margin-top: 40px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--filet); border-radius: 18px; }
.quota { font-weight: 700; margin-bottom: 4px; }
.quota.epuise { color: var(--g-critique); }

.limites { margin-top: 36px; padding: 22px 26px; border: 1px dashed var(--filet-champ); border-radius: 16px; color: var(--texte-doux); font-size: 15.5px; }
.limites ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ------------------------------------------------------------------ un audit */

.entete-audit { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin: 22px 0 18px; }
.titre-audit { font: 800 clamp(26px, 4vw, 40px)/1.1 var(--titre); overflow-wrap: anywhere; }
.meta { color: var(--texte-doux); margin-top: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ecran { padding-top: 28px; }
#ecranNouveau { padding-top: 0; }

.alerte { background: var(--g-critique-fond); border: 1px solid #7A3A33; border-left: 5px solid var(--g-critique); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; color: #FFD6D0; }
.avis { background: var(--g-important-fond); border: 1px solid #5B4D22; border-left: 5px solid var(--capuche); border-radius: 12px; padding: 14px 18px; margin: 14px 0; display: grid; gap: 10px; justify-items: start; }
.appel { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--g-important-fond); border: 1px solid #5B4D22; border-left: 5px solid var(--capuche); border-radius: 14px; padding: 14px 20px; margin: 18px 0; }

.suivi { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--filet); border-radius: 18px; padding: 28px 32px; margin-bottom: 24px; }
.compteur-geant { display: flex; align-items: baseline; gap: 12px; }
.compteur-nombre { font: 800 clamp(48px, 8vw, 84px)/1 var(--titre); color: var(--capuche); }
.compteur-libelle { font-size: 20px; color: var(--texte-doux); }
.barre { height: 12px; background: var(--fond-haut); border-radius: 999px; overflow: hidden; margin: 14px 0 10px; border: 1px solid var(--filet); }
.barre-remplie { height: 100%; width: 0; background: linear-gradient(90deg, var(--bleu), var(--bleu-clair)); border-radius: 999px; transition: width .4s ease; }
.phases { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.phases li { display: flex; gap: 10px; align-items: baseline; color: var(--texte-faible); }
.phases li::before { content: "○"; color: var(--texte-faible); }
.phases li.fait { color: var(--texte-doux); }
.phases li.fait::before { content: "✓"; color: var(--ok); font-weight: 800; }
.phases li.courant { color: var(--texte); font-weight: 700; }
.phases li.courant::before { content: "▸"; color: var(--capuche); }
.suivi-dessin img { max-width: 170px; margin: 0 auto; }
.suivi-legende { text-align: center; font-weight: 700; color: var(--texte-doux); margin-bottom: 8px; }

.resume { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; background: var(--surface); border: 1px solid var(--filet); border-radius: 18px; padding: 26px 32px; margin-bottom: 22px; }
.resume-note { text-align: center; }
.anneau-fond { stroke: var(--fond-haut); }
.anneau-valeur { stroke: var(--capuche); transition: stroke-dasharray .8s ease; }
.anneau-valeur.niveau-excellent { stroke: var(--ok); }
.anneau-valeur.niveau-bas { stroke: var(--g-critique); }
.anneau-texte { font: 800 40px/1 var(--titre); fill: var(--texte); }
.niveau { font: 800 14px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.resume-texte { font-size: 18px; line-height: 1.55; white-space: pre-line; }
.chiffres { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chiffres li { background: var(--fond-haut); border: 1px solid var(--filet); border-radius: 12px; padding: 8px 14px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.chiffres strong { font: 800 20px/1 var(--titre); }
.technologies { margin-top: 14px; color: var(--texte-doux); font-size: 15px; }
.avertissements { margin: 14px 0 0; padding-left: 20px; color: var(--g-important); font-size: 15px; }
#telechargements { margin-top: 20px; }

/* ------------------------------------------------------------------ onglets */

.onglets { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--filet); margin-top: 26px; scrollbar-width: thin; }
.onglet { border: 0; background: none; padding: 12px 16px; font-weight: 700; color: var(--texte-doux); cursor: pointer; white-space: nowrap; border-bottom: 4px solid transparent; margin-bottom: -2px; display: inline-flex; gap: 8px; align-items: center; }
.onglet:hover { color: var(--texte); }
.onglet[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--capuche); }
.pastille { font: 700 12.5px/1 var(--corps); background: var(--surface-2); color: var(--texte); border-radius: 999px; padding: 4px 8px; min-width: 24px; text-align: center; }
.onglet[aria-selected="true"] .pastille { background: var(--capuche); color: var(--noir); }
.pastille.attention { background: var(--capuche); color: var(--noir); }
.panneau { padding: 26px 0; }

/* constats */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.puce { border: 1px solid var(--filet-champ); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.puce:hover { border-color: var(--texte-doux); }
.puce[aria-pressed="true"] { background: var(--texte); color: var(--noir); border-color: var(--texte); }
.filtres select { width: auto; max-width: 100%; margin-left: auto; }
.constats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.constat { background: var(--surface); border: 1px solid var(--filet); border-left: 6px solid var(--g-mineur); border-radius: 14px; padding: 16px 20px; display: grid; gap: 8px; }
.constat.critique { border-left-color: var(--g-critique); }
.constat.important { border-left-color: var(--g-important); }
.constat-tete { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gravite { font: 800 12px/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; padding: 5px 8px; display: inline-flex; gap: 6px; align-items: center; }
.gravite.critique { background: var(--g-critique-fond); color: var(--g-critique); }
.gravite.critique::before { content: "■"; }
.gravite.important { background: var(--g-important-fond); color: var(--g-important); }
.gravite.important::before { content: "▲"; }
.gravite.mineur { background: var(--g-mineur-fond); color: var(--g-mineur); }
.gravite.mineur::before { content: "●"; }
.constat-titre { font-weight: 800; font-size: 17.5px; }
.etiquette-schema { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border-radius: 6px; padding: 3px 8px; color: var(--texte-doux); }
.constat-page { font-size: 14.5px; color: var(--texte-doux); overflow-wrap: anywhere; }
.constat-detail { color: var(--texte); }
.constat-correction { background: var(--ok-fond); border-radius: 10px; padding: 10px 14px; color: #CDEBD9; }
.constat-correction strong { color: var(--ok); }
.constat-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.constat-code { font-family: var(--mono); font-size: 12.5px; color: var(--texte-faible); margin-left: auto; }

/* code */
.code-mise-en-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.liste-blocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: sticky; top: 12px; }
.liste-blocs button { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--filet); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 6px; }
.liste-blocs button:hover { border-color: #5A636D; }
.liste-blocs button[aria-current="true"] { border-color: var(--capuche); background: #2A2B26; box-shadow: 0 0 0 1px var(--capuche); }
.bloc-titre { font-weight: 800; line-height: 1.3; }
.etat { font: 800 11.5px/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; padding: 5px 8px; justify-self: start; }
.etat-Prete { background: var(--ok-fond); color: var(--ok); }
.etat-Prete::before { content: "✓ "; }
.etat-AComplete { background: var(--g-important-fond); color: var(--g-important); }
.etat-AComplete::before { content: "✎ "; }
.etat-Bloquee { background: var(--g-critique-fond); color: var(--g-critique); }
.etat-Bloquee::before { content: "? "; }
.etat-actif, .etat-revoque, .etat-expire { font: 700 13px/1 var(--corps); text-transform: none; letter-spacing: 0; }
.etat-actif { background: var(--ok-fond); color: var(--ok); }
.etat-revoque, .etat-expire { background: var(--g-critique-fond); color: var(--g-critique); }

.bloc-detail { background: var(--surface); border: 1px solid var(--filet); border-radius: 16px; padding: 22px 24px; min-width: 0; }
.bloc-detail h2 { font: 800 clamp(20px, 2.6vw, 26px)/1.2 var(--titre); margin-bottom: 8px; }
.bloc-meta { display: grid; gap: 4px; color: var(--texte-doux); font-size: 15px; margin: 8px 0 14px; }
.bloc-meta strong { color: var(--texte); }
.types { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.notes { margin: 12px 0; padding: 12px 16px 12px 36px; background: var(--fond-haut); border-radius: 10px; color: var(--texte-doux); font-size: 15px; display: grid; gap: 6px; }
.variantes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.variante { border: 1px solid var(--filet-champ); background: var(--fond-haut); border-radius: 10px 10px 0 0; padding: 9px 14px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.variante[aria-selected="true"] { background: var(--surface-code); border-color: var(--capuche); color: var(--capuche); }
.code-boite { background: var(--surface-code); border: 1px solid var(--filet); border-radius: 0 12px 12px 12px; overflow: hidden; }
.code-tete { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--filet); background: #191C20; }
.code-fichier { font-family: var(--mono); font-size: 13.5px; color: var(--texte-doux); overflow-wrap: anywhere; }
.code-pre { margin: 0; padding: 16px 18px; overflow: auto; max-height: 560px; font: 13.5px/1.55 var(--mono); tab-size: 4; color: #D8DEE6; }
.consigne { margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid var(--bleu-clair); background: var(--g-mineur-fond); border-radius: 0 10px 10px 0; white-space: pre-line; font-size: 15.5px; }
.verifier { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.manquantes { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* questions */
.questions-tete { display: grid; gap: 12px; margin-bottom: 18px; }
.groupe-questions { background: var(--surface); border: 1px solid var(--filet); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.groupe-questions > summary { list-style: none; cursor: pointer; padding: 16px 22px; font: 800 17px/1.2 var(--titre); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.groupe-questions > summary::-webkit-details-marker { display: none; }
.groupe-questions > summary::after { content: "＋"; color: var(--capuche); font-size: 20px; }
.groupe-questions[open] > summary::after { content: "－"; }
.groupe-compte { font: 700 13px/1 var(--corps); color: var(--texte-doux); text-transform: none; margin-left: auto; }
.groupe-corps { padding: 6px 22px 22px; display: grid; gap: 22px; }
.question { display: grid; gap: 6px; }
.question-libelle { font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.requise { color: var(--capuche); font-weight: 800; }
.question-aide { color: var(--texte-doux); font-size: 14.5px; }
.badge { font: 700 12px/1 var(--corps); border-radius: 999px; padding: 4px 9px; }
.badge-site { background: var(--g-mineur-fond); color: var(--g-mineur); }
.badge-ia { background: var(--g-important-fond); color: var(--g-important); }
.badge-debloque { background: var(--ok-fond); color: var(--ok); }
.question .champ { background: var(--fond-haut); }
.liste-lignes { display: grid; gap: 10px; }
.ligne-liste { display: grid; gap: 8px; padding: 12px; background: var(--fond-haut); border: 1px solid var(--filet); border-radius: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.ligne-liste label { font-size: 13px; font-weight: 700; color: var(--texte-doux); display: block; margin-bottom: 4px; }
.ligne-liste .champ { font-size: 15px; padding: 9px 12px; border-width: 1px; }
.ligne-liste .retirer { grid-column: 1 / -1; justify-self: end; }
.barre-envoi { position: sticky; bottom: 76px; z-index: 5; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 20px; background: rgba(37, 42, 48, .96); border: 1px solid var(--filet); border-radius: 16px; backdrop-filter: blur(6px); }

/* pages */
.table-defilante { overflow-x: auto; border: 1px solid var(--filet); border-radius: 14px; background: var(--surface); }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th { text-align: left; font: 800 12.5px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); padding: 12px 14px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tableau td { padding: 11px 14px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .mono, .mono { font-family: var(--mono); font-size: 13px; }
.tableau .url { overflow-wrap: anywhere; min-width: 200px; }
.tableau tr.revoque td { opacity: .6; }
.pastilles-types { display: flex; flex-wrap: wrap; gap: 5px; }
.quota-saisie { width: 70px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--filet-champ); background: var(--fond-haut); }
.actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; }

/* rapport */
.rapport { max-width: 78ch; }
.rapport h2 { font: 800 24px/1.2 var(--titre); margin: 30px 0 12px; text-transform: uppercase; }
.rapport h3 { font: 800 18px/1.3 var(--titre); margin: 24px 0 10px; }
.rapport p { margin: 10px 0; }
.rapport ul { padding-left: 22px; }
.rapport li { margin: 8px 0; }
.rapport table { border-collapse: collapse; margin: 14px 0; width: 100%; font-size: 15px; }
.rapport th, .rapport td { border: 1px solid var(--filet); padding: 8px 12px; text-align: left; }
.rapport th { background: var(--surface); }
.rapport pre { background: var(--surface-code); border: 1px solid var(--filet); border-radius: 10px; padding: 14px; overflow: auto; font: 13.5px/1.5 var(--mono); }
.rapport pre code { background: none; padding: 0; }
.rapport hr { border: 0; border-top: 1px solid var(--filet); margin: 24px 0; }

/* activité */
.activite { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.activite li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 8px 12px; border-radius: 8px; }
.activite li:nth-child(odd) { background: var(--surface); }
.activite time { font-family: var(--mono); font-size: 13px; color: var(--texte-faible); padding-top: 2px; }
.activite .alerte-ligne { color: var(--g-important); }
.activite .erreur-ligne { color: var(--g-critique); }
.activite .resultat-ligne { color: var(--ok); font-weight: 700; }

/* ------------------------------------------------------------------ dialogues */

.dialogue { border: 1px solid var(--filet); border-radius: 20px; padding: 0; background: var(--surface); color: var(--texte); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.dialogue-large { width: min(980px, calc(100vw - 24px)); }
.dialogue::backdrop { background: rgba(8, 9, 10, .72); }
.dialogue-corps { padding: 28px clamp(18px, 4vw, 34px) 30px; display: grid; gap: 16px; }
.dialogue-tete { display: flex; justify-content: space-between; align-items: center; }
.titre-dialogue { font: 800 24px/1.2 var(--titre); text-transform: uppercase; }
.champ-groupe { display: grid; gap: 6px; margin-top: 8px; }
.explication { background: var(--fond-haut); border: 1px solid var(--filet); border-radius: 12px; padding: 12px 16px; }
.explication summary { cursor: pointer; font-weight: 700; }
.explication[open] summary { margin-bottom: 8px; }
.explication p { color: var(--texte-doux); font-size: 15px; margin-top: 8px; }
.resultat-test { min-height: 1.4em; font-weight: 600; }
.resultat-test.ok { color: var(--ok); }
.resultat-test.ko { color: var(--g-critique); }
.nouveau-client { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.cle-creee { background: var(--g-important-fond); border: 1px solid #5B4D22; border-radius: 12px; padding: 14px 18px; display: grid; gap: 10px; }
.cle-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cle-ligne code { overflow-wrap: anywhere; flex: 1 1 280px; padding: 10px 12px; font-size: 14px; }

/* ------------------------------------------------------------------ adaptation aux petits écrans */

@media (max-width: 900px) {
  .code-mise-en-page { grid-template-columns: minmax(0, 1fr); }
  .liste-blocs { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .resume { grid-template-columns: minmax(0, 1fr); }
  .suivi { grid-template-columns: minmax(0, 1fr); }
  .suivi-dessin { display: none; }
  .nouveau-client { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .accueil { grid-template-columns: minmax(0, 1fr); }
  .guetteur { display: none; }
  .etape { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bandeau-texte { display: none; }
  .bandeau .logo img { width: 110px; }
  .connexion { max-width: 150px; }
  .lancement { padding: 18px; }
  .btn-grand { width: 100%; }
  .barre-envoi .btn { width: 100%; }
  .filtres select { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-remplie, .anneau-valeur { transition: none; }
}
.code-pre code { background: none; padding: 0; font-size: inherit; }