/* audit.css — feuille partagée des pages du site (l'outil /audit-ia/ qui lui
 * donnait son nom a été supprimé le 2026-08-17)
 *
 * Les jetons de couleur, les deux familles de caractères et les composants
 * repris de la page d'accueil (eyebrow, boutons du héros, jauge circulaire,
 * cartes blanches) sont recopiés ici plutôt que partagés : le bloc <style> de
 * public/index.html est gelé par design-lock/, et le sortir dans un fichier
 * commun obligerait à modifier la page d'accueil. Les pages légales suivent
 * déjà cette convention avec legal.css. Toute évolution d'un jeton doit donc
 * être reportée dans les trois fichiers — c'est le prix du gel, il est assumé.
 */

:root {
  color-scheme: light;
  --ui: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;

  /* La gouttière : l'air entre le contenu et le bord de l'écran. Une seule
     valeur pour tout le site, appliquée à un seul endroit (voir « Ossature »).
     20 px sous 760 px, c'est la valeur de la page d'accueil ; elle fait
     référence, les autres pages s'alignent sur elle. */
  --gut: 32px;
  --bg: #ffffff; --fg: #0f1419; --muted: #536471; --dim: #5f6b77; --dim2: #667380;
  --card: #f4f9fe; --card2: #e4f0fb; --card3: #ffffff; --soft: #eef6fe;
  --border: #e1eaef; --border-soft: #eef3f5; --border-dash: #b8c4cc;
  --blue: #1d9bf0; --blue-h: #1a8cd8; --blue-sh: #0f6ba8;
  /* Variantes accessibles — mêmes valeurs et mêmes raisons que dans le bloc
     <style> de public/index.html. Les deux doivent rester d’accord. */
  --blue-cta: #147ab8; --blue-cta-h: #0f6ba8; --blue-txt-h: #0b5b8f;
  --tint: #e8f5fe; --tint2: #f1f9ff; --tint-line: #cfe8fa; --tint-solid: #cfe8fa;
  --tint-border: #a9d8f7; --tint-border2: #7cc2f2; --on-tint: #0f6ba8;
  --acc-2: #7c5cf5; --acc-3: #0fa3a3; --acc-2-text: #5b3fd4; --acc-3-text: #0a7070;
  /* Jetons repris du bloc <style> gelé de la page d'accueil : la pastille de
     question de la FAQ (--feat-h), les cartes « Prestations » (--feat) et le
     noir d'encre des étiquettes (--sticker). Mêmes valeurs, mêmes usages. */
  --feat: #f2f8fe; --feat-h: #e6f2fd; --feat-rule: rgba(15,20,25,0.07); --sticker: #0f1419;
  --wash: linear-gradient(155deg, #eaf6ff 0%, var(--card3) 56%, var(--tint2) 100%);
  --lift: 0 1px 2px rgba(15,20,25,0.04), 0 10px 26px rgba(15,20,25,0.055);
  --header: rgba(255,255,255,0.86); --shadow: rgba(15,20,25,0.12);

  /* Les quatre états d'un critère. Chaque état porte aussi une icône et un
     libellé écrit : le PRD demande un résultat lisible sans dépendre de la
     couleur, et un daltonien ne doit pas avoir à deviner. Les teintes de texte
     sont toutes au-dessus de 4,5:1 sur leur fond. */
  --ok: #1f7a4d; --ok-bg: #e9f6ef; --ok-line: #bfe3d0;
  --warn: #8a5300; --warn-bg: #fdf3e3; --warn-line: #f0dcb8;
  --bad: #b4231b; --bad-bg: #fdecea; --bad-line: #f3cdc9;
  --none: #536471; --none-bg: #f1f4f6; --none-line: #dfe6ea;
}
@media (max-width: 760px) { :root { --gut: 20px; } }

* { box-sizing: border-box; }
/* Les voiles décoratifs pleine largeur de pages.css mesurent 100vw ; sur un
   système à barre de défilement visible, 100vw la compte et déborde d'une
   quinzaine de pixels. « clip » coupe sans créer de conteneur de défilement,
   donc l'en-tête collant continue de suivre la fenêtre. C'est le mécanisme de
   .page { overflow-x: clip } sur la page d'accueil. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-sh); text-decoration: none; }
a:hover { color: var(--blue-txt-h); }
input, button, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--muted); }
::selection { background: var(--blue); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}

/* ── En-tête, repris à l'identique de la page d'accueil ──────────────────── */

.topbar {
  display: block; color: #fff;
  /* même filet dégradé que la page d'accueil : bleu profond vers indigo */
  background: linear-gradient(90deg, var(--blue-sh) 0%, var(--blue-cta) 38%, var(--acc-2-text) 100%);
  font-family: var(--ui); font-weight: 400; font-size: 13px; text-align: center;
}
.topbar:hover { color: #fff; }
.topbar:hover .topbar-cta { text-decoration: underline; text-underline-offset: 3px; }
.topbar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.topbar-in {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; padding: 7px 24px; line-height: 1.4;
}
.topbar-lead { color: rgba(255,255,255,0.86); }
.topbar-cta { font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .topbar-in { padding: 6px 20px; font-size: 12px; }
  .topbar-lead { display: none; }
}

/* ── La barre flottante ──────────────────────────────────────────────────────
   La maquette fournie pose la barre comme une carte détachée
   (`sticky mx-auto max-w-4xl h-14 border rounded-lg`) : elle ne touche ni le
   haut de l'écran ni les bords. L'en-tête collé ne porte donc plus ni fond ni
   bordure — il ne sert qu'à réserver la marge autour ; c'est `.inner` qui
   devient la carte, avec ses quatre bordures, ses coins et son ombre.

   `pointer-events` : l'en-tête couvre toute la largeur, dont une bande
   transparente au-dessus et sur les côtés de la carte. Sans ces deux lignes,
   cette bande avalerait les clics destinés à la page derrière elle. */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: transparent; border-bottom: 0; backdrop-filter: none;
  padding: 14px var(--gut) 0;
  pointer-events: none;
}
header.site .inner {
  max-width: 1080px; margin: 0 auto; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--header); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow);
  pointer-events: auto;
}
header.site img { height: 34px; width: auto; display: block; }
/* Les liens sont des pastilles, comme `NavigationMenuTrigger`
   (`rounded-md px-4 py-1 text-sm font-medium`, fond au survol) : d'où
   l'écart resserré à 4 px, l'espacement venant maintenant des pastilles. */
.nav-desktop { display: flex; align-items: center; gap: 4px; }
.navlink {
  color: var(--muted); font-family: var(--ui); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}
.navlink:hover { color: var(--fg); background: var(--card); }
.navlink[aria-current='page'] { color: var(--fg); background: var(--soft); }

/* ── Menu déroulant « Nos services » ─────────────────────────────────────────
   Zéro JavaScript. Le panneau s'ouvre sur `:hover` **et** sur `:focus-within` :
   la souris et le clavier ouvrent donc la même chose, et `visibility: hidden`
   le retire de l'arbre d'accessibilité tant qu'il est fermé. Les mêmes règles
   existent dans le bloc <style> de public/index.html, qui est gelé : les deux
   doivent rester d'accord. */
.nav-desktop { align-self: stretch; }
.nav-list {
  list-style: none; margin: 0; padding: 0; height: 100%;
  display: flex; align-items: stretch; gap: 4px;
}
.nav-item { position: static; display: flex; align-items: center; }
.nav-trigger { cursor: pointer; }
.nav-chev { transition: transform 0.3s ease; flex: none; }
.nav-item.has-panel:hover .nav-chev,
.nav-item.has-panel:focus-within .nav-chev { transform: rotate(180deg); }
.nav-item.has-panel:hover > .nav-trigger,
.nav-item.has-panel:focus-within > .nav-trigger { color: var(--fg); background: var(--card); }

/* Le conteneur porte une gouttière transparente : sans elle, le curseur
   traverse un vide entre le lien et la carte, et le panneau se referme en
   chemin. Largeur et grille reprises de la maquette : `md:w-4xl` (896 px) et
   `md:grid-cols-[1fr_.30fr]`. L'ouverture est celle de `zoom-in-95` sur
   `duration-300`, avec l'origine `origin-top-center`. */
.nav-panel {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  width: min(896px, calc(100vw - 48px));
  padding-top: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: top center;
  transform: translateX(-50%) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nav-item.has-panel:hover .nav-panel,
.nav-item.has-panel:focus-within .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.nav-panel-in {
  display: grid; grid-template-columns: 1fr 0.3fr; gap: 0;
  background: var(--card3);
  /* La maquette pose un panneau translucide (`bg-background/95` +
     `backdrop-blur-xl`). Impossible ici : le parent anime `opacity` et
     `transform`, ce qui en fait une racine d’arrière-plan — le filtre n’a
     alors plus rien derrière lui à flouter, et seule la transparence reste.
     Le titre H1 de la page se lisait au travers. Le panneau est donc opaque. */
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 40px var(--shadow); overflow: hidden;
}
.nav-cards {
  list-style: none; margin: 0; padding: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  border-right: 1px solid var(--border-soft);
}
.nav-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card3); color: var(--fg);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-card:hover { background: var(--card); border-color: var(--tint-border); color: var(--fg); }
.nav-card[aria-current='page'] { border-color: var(--tint-border2); background: var(--tint2); }
.nav-card-ico { color: var(--fg); opacity: 0.8; display: flex; }
.nav-card-t { font-family: var(--ui); font-weight: 500; font-size: 14px; line-height: 1.3; }
.nav-card-d { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.nav-side { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.nav-side-t { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
/* `NavSmallItem` : une ligne sobre, dont l'affordance est la flèche qui entre
   au survol (`-translate-x-2 opacity-0` → `translate-x-0 opacity-100`). */
.nav-small {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ui); font-weight: 500; font-size: 13.5px;
  color: var(--fg); border-radius: 8px; padding: 8px 10px;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-small:hover { background: var(--card); color: var(--fg); }
.nav-arrow {
  flex: none; margin-left: auto; opacity: 0; transform: translateX(-8px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-small:hover .nav-arrow,
.nav-small:focus-visible .nav-arrow { opacity: 1; transform: translateX(0); }

/* Sous 900 px le panneau ne tient plus en trois colonnes ; il n'est de toute
   façon plus affiché sous 1100 px, mais la règle protège les zooms élevés. */
@media (max-width: 1100px) {
  .nav-panel { display: none; }
}

.tag-free {
  font-family: var(--ui); font-weight: 600; font-size: 10px; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-tint);
  background: var(--tint); border: 1px solid var(--tint-line);
  border-radius: 999px; padding: 4px 7px;
}
/* Ces deux règles remplacent des styles en ligne recopiés dans chaque page
   secondaire. Elles ne changent rien à l'écran : mêmes valeurs, un seul
   endroit. Voir pages/_coquille.mjs, qui rend désormais l'en-tête. */
.header-side { display: flex; align-items: center; gap: 12px; }
.menu-sep { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 8px; width: auto; }
.header-cta {
  background: var(--blue-cta); color: #fff; font-family: var(--ui); font-weight: 600;
  font-size: 14px; padding: 11px 20px; border-radius: 9px; white-space: nowrap;
}
.header-cta:hover { background: var(--blue-cta-h); color: #fff; }
.menu-toggle { display: none; }
/* Seuil porté de 900 à 1100 px : à cinq liens, la barre ne tient plus en
   dessous de ~1 023 px. Ces pages ont un conteneur de 1 080 px, plus étroit que
   celui de la page d'accueil (1 280 px) — c'est donc ici que la barre est la
   plus serrée. Même valeur dans le bloc <style> de public/index.html : les deux
   doivent rester d'accord. */
@media (max-width: 1100px) {
  .nav-desktop { display: none !important; }
  .menu-toggle { display: block; position: relative; }
  /* `>` et non un espace : le panneau du ☰ contient un second <summary>,
     celui de l'accordéon « Nos services ». En descendant, cette règle le
     touchait aussi et lui imposait 42 × 42 px avec bordure et fond — le
     libellé sortait de la boîte, tronqué des deux côtés. */
  .menu-toggle > summary {
    list-style: none; cursor: pointer; width: 42px; height: 42px;
    border: 1px solid var(--border); border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 18px; background: var(--card3);
  }
  .menu-toggle > summary::-webkit-details-marker { display: none; }
  .menu-panel {
    position: absolute; right: 0; top: 52px; background: var(--card3);
    border: 1px solid var(--border); border-radius: 14px; padding: 10px;
    min-width: 220px; display: flex; flex-direction: column;
    box-shadow: 0 18px 40px var(--shadow); z-index: 60;
  }
  /* À douze entrées le panneau mesure 569 px : sur un écran de 640 px de haut,
     la dernière tombait sous le bord, et comme le panneau est posé dans un
     en-tête collé, la faire défiler la page ne la ramenait pas. Il défile donc
     en lui-même. */
  .menu-panel { max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
  .menu-panel a { padding: 12px 14px; border-radius: 9px; color: var(--fg); font-size: 15.5px; }
  .menu-panel a:hover { background: var(--card); }
  .menu-cta { background: var(--blue-cta); color: #fff !important; font-family: var(--ui); font-weight: 600; text-align: center; margin-bottom: 6px; }
  /* L'accordéon « Nos services » du menu ☰ : même `<details>` natif que la
     FAQ, donc ouvrable au clavier sans une ligne de JavaScript. */
  .menu-sub summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    gap: 8px; padding: 12px 14px; border-radius: 9px; color: var(--fg);
    font-size: 15.5px;
  }
  .menu-sub summary::-webkit-details-marker { display: none; }
  .menu-sub summary:hover { background: var(--card); }
  .menu-sub[open] summary { color: var(--blue-sh); }
  .menu-sub[open] summary .nav-chev { transform: rotate(180deg); }
  .menu-sub .nav-chev { margin-left: auto; transition: transform 0.25s ease; }
  /* `display: block` : les liens de premier niveau du ☰ sont des enfants directs
     de `.menu-panel`, donc des éléments flex, donc déjà en bloc. Ceux-ci sont
     imbriqués dans le <details>, qui est un bloc ordinaire : sans cette ligne
     ils restaient en ligne et les quatre libellés se lisaient d'un seul tenant. */
  .menu-sub-a { display: block; padding-left: 28px !important; font-size: 14.5px !important; color: var(--muted) !important; }
  .menu-sub-a:hover { color: var(--fg) !important; }
}
@media (max-width: 560px) { .header-cta { display: none; } }
@media (min-width: 561px) { .menu-cta { display: none; } }

/* ── Ossature ────────────────────────────────────────────────────────────── */

.wrap { max-width: 1080px; margin: 0 auto; }

/* ── La gouttière, et la seule règle qui la pose ──────────────────────────
   Trois conteneurs, une déclaration, un jeton. Rien d'autre dans ce fichier
   ne doit écrire `padding-left` / `padding-right` / `padding` sur eux.

   Pourquoi `!important` sur une feuille de style qu'on maîtrise :
   `.wrap` est une classe (0,1,0), exactement comme `.aud-top`, `.aud-result`
   et `.aud-method` qui l'accompagnent dans l'attribut class. À spécificité
   égale, c'est la règle écrite le plus bas qui gagne — et ces trois-là
   déclaraient un raccourci `padding: 54px 0 0`, dont les deux zéros
   remettaient la gouttière à néant sans le dire. Sur téléphone, les cinq
   pages qui utilisent ce fichier collaient donc leur texte au bord de
   l'écran (constaté le 2026-08-15 : titres et paragraphes à x = 0).
   Le raccourci a été remplacé par `padding-top`, ce qui suffisait à réparer ;
   `!important` est là pour que la prochaine page écrite ne puisse pas
   rouvrir la même trappe par distraction. Pour l'ouvrir volontairement il
   faut un second `!important` écrit plus bas — voir @media print. */
.wrap,
header.site .inner,
footer.site .inner {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}

.eyebrow {
  display: inline-block; position: relative; padding-top: 17px;
  font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-tint);
}
.eyebrow::before {
  content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--acc-2));
}
.eyebrow.is-center::before { left: 50%; transform: translateX(-50%); }

h1 {
  font-family: var(--ui); font-weight: 600;
  font-size: clamp(33px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.032em;
  margin: 18px 0 0; text-wrap: balance;
}
h2 {
  font-family: var(--ui); font-weight: 600;
  /* rapproché de l'échelle des titres de section de la page d'accueil
     (clamp(30px, 3.4vw, 50px) dans un conteneur de 1 280 px) */
  font-size: clamp(27px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -0.025em;
  margin: 16px 0 0; text-wrap: balance;
}
h3 { font-family: var(--ui); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; margin: 0; }
.lede { font-size: 17.5px; line-height: 1.65; color: var(--muted); margin: 18px 0 0; max-width: 62ch; }

/* ── Bloc de saisie ──────────────────────────────────────────────────────── */

/* padding-top et non `padding: 54px 0 0` : le raccourci écraserait la
   gouttière de .wrap, avec laquelle cette classe partage l'attribut class. */
.aud-top { padding-top: 54px; text-align: center; }
.aud-top .eyebrow { display: inline-block; }
.aud-top .lede { margin-left: auto; margin-right: auto; }

.aud-console {
  margin: 38px auto 0; max-width: 780px; background: var(--wash);
  border: 1px solid var(--border); border-radius: 22px;
  padding: 28px; box-shadow: var(--lift); text-align: left;
}
.aud-form { display: flex; gap: 12px; align-items: stretch; }
.aud-field { flex: 1 1 auto; min-width: 0; position: relative; }
.aud-label {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.aud-input {
  width: 100%; height: 56px; padding: 0 16px 0 44px;
  background: var(--card3); border: 1px solid var(--border); border-radius: 12px;
  font-size: 16px; color: var(--fg);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.aud-input:hover { border-color: var(--tint-border2); }
.aud-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,155,240,0.16); }
.aud-input[aria-invalid='true'] { border-color: var(--bad); }
.aud-globe {
  position: absolute; left: 15px; bottom: 18px; width: 20px; height: 20px;
  color: var(--dim2); pointer-events: none;
}
.aud-go {
  align-self: flex-end; height: 56px; padding: 0 24px; border: 1px solid transparent;
  border-radius: 12px; background: var(--blue-cta); color: #fff; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 15.5px;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15,20,25,0.10), 0 10px 24px rgba(29,155,240,0.16);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.aud-go:hover:not(:disabled) { background: var(--blue-cta-h); transform: translateY(-1px); }
.aud-go:disabled { background: var(--tint-border2); cursor: progress; box-shadow: none; transform: none; }
.aud-go svg { flex: none; }
@media (max-width: 640px) {
  .aud-console { padding: 22px; border-radius: 18px; }
  .aud-form { flex-direction: column; }
  .aud-go { align-self: stretch; justify-content: center; }
}

.aud-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; font-size: 13.2px; line-height: 1.55; color: var(--muted);
}
.aud-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--on-tint); }
.aud-err {
  display: none; margin: 14px 0 0; padding: 13px 15px; border-radius: 11px;
  background: var(--bad-bg); border: 1px solid var(--bad-line);
  color: var(--bad); font-size: 14px; line-height: 1.55;
}
.aud-err.is-on { display: block; }

/* Ce que l'outil regarde — annoncé avant le clic, pas découvert après. */
.aud-scope { margin: 26px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aud-chip {
  font-family: var(--ui); font-weight: 500; font-size: 12.5px; color: var(--muted);
  background: var(--card3); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px;
}
.aud-chip b { font-weight: 600; color: var(--on-tint); font-size: 11.5px; }

/* ── État « analyse en cours » ────────────────────────────────────────────
   Pas de fausse progression : nous ne savons pas où en est la requête, donc la
   barre est indéterminée et la liste dit ce qui est demandé, sans cocher des
   étapes au hasard pour faire patienter. Le PRD interdit le faux compte à
   rebours ; une barre qui ment est la même chose. */

.aud-run { display: none; margin: 30px auto 0; max-width: 780px; }
.aud-run.is-on { display: block; }
.aud-run-bar {
  height: 4px; border-radius: 999px; background: var(--tint); overflow: hidden; position: relative;
}
.aud-run-bar::after {
  content: ''; position: absolute; inset: 0; width: 38%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--acc-2));
  animation: aud-slide 1.15s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes aud-slide { from { transform: translateX(-100%); } to { transform: translateX(365%); } }
.aud-run-txt {
  margin: 14px 0 0; font-size: 14.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
}
.aud-run-txt span { display: inline-flex; align-items: center; gap: 7px; }
.aud-run-txt svg { width: 15px; height: 15px; color: var(--dim2); }
@media (prefers-reduced-motion: reduce) {
  .aud-run-bar::after { animation: none; width: 100%; opacity: .45; }
}

/* ── Résultat ────────────────────────────────────────────────────────────── */

.aud-result { display: none; padding-top: 46px; }
.aud-result.is-on { display: block; }

.res-card {
  background: var(--wash); border: 1px solid var(--border); border-radius: 22px;
  padding: 32px; box-shadow: var(--lift);
  display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 34px; align-items: center;
}
@media (max-width: 780px) {
  .res-card { grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; text-align: center; padding: 26px; }
}
/* Sans ce min-width, la colonne de droite se dimensionne sur son contenu le
   plus large — la pastille « Page analysée : https://… », qui est en nowrap.
   Une URL de 90 caractères élargissait alors toute la carte et débordait la
   page de 27 px sous 360. La valeur `auto` par défaut d'un enfant de grille
   l'empêche de rétrécir sous son contenu ; c'est elle qu'on annule ici, et
   c'est ce qui rend effectif le `max-width: 100%` de la pastille. */
.res-card > * { min-width: 0; max-width: 100%; }

/* Jauge reprise de la page d'accueil : même rayon, même épaisseur, même
   arrondi de trait. Le score n'est pas illustré, il est tracé — l'arc vaut
   exactement le nombre de points obtenus. */
.res-gauge { position: relative; display: grid; place-items: center; width: 196px; height: 196px; }
.res-gauge > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.res-ring-bg { fill: none; stroke: var(--tint); stroke-width: 12; }
.res-ring-fg {
  fill: none; stroke: var(--blue); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dasharray .9s cubic-bezier(.22,.68,.36,1);
}
.res-gauge-in { position: relative; text-align: center; line-height: 1; }
.res-score { font-family: var(--ui); font-weight: 600; font-size: 52px; letter-spacing: -0.04em; }
.res-score small { font-size: 20px; color: var(--dim2); letter-spacing: -0.02em; }
.res-grade {
  display: inline-block; margin-top: 9px; font-family: var(--ui); font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}

.res-verdict { font-family: var(--ui); font-weight: 600; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.res-sub { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.res-meta { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
/* Sous 780 px la carte passe en colonne centrée : les pastilles et les boutons
   doivent suivre, sinon ils s'alignent à gauche sous un texte centré. */
@media (max-width: 780px) { .res-meta, .res-actions { justify-content: center; } }
.res-pill {
  font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--card3); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-pill b { font-weight: 600; color: var(--fg); }

.res-caveat {
  margin: 18px 0 0; padding: 13px 15px; border-radius: 11px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn); font-size: 13.5px; line-height: 1.55;
}

.res-actions { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 14.5px; line-height: 1;
  padding: 13px 19px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--card3); color: var(--fg);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { border-color: var(--tint-border2); background: var(--tint2); color: var(--fg); transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; color: var(--on-tint); }
/* le bouton principal porte l'ombre étagée du bouton du héros de l'accueil */
.btn-main {
  background: var(--blue-cta); border-color: var(--blue-cta); color: #fff;
  box-shadow: 0 2px 6px rgba(15,20,25,0.10), 0 10px 24px rgba(15,20,25,0.10);
}
.btn-main:hover {
  background: var(--blue-cta-h); border-color: var(--blue-cta-h); color: #fff;
  box-shadow: 0 4px 10px rgba(15,20,25,0.12), 0 14px 30px rgba(15,20,25,0.12);
}
.btn-main svg { color: #fff; }
.btn[hidden] { display: none; }

/* ── Les huit critères ───────────────────────────────────────────────────── */

.chk-head { margin: 54px 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.chk-head p { margin: 8px 0 0; font-size: 15px; color: var(--muted); max-width: 58ch; }
.chk-list { margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }

.chk {
  background: var(--card3); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--lift);
}
.chk-top { display: flex; align-items: flex-start; gap: 14px; }
.chk-plate {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint2); border: 1px solid var(--tint-line); color: var(--on-tint);
}
.chk-plate svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chk-id { flex: 1 1 auto; min-width: 0; }
.chk-id h3 { font-size: 18px; }
.chk-state {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.chk-state svg { width: 13px; height: 13px; flex: none; }
.chk-pts { flex: none; text-align: right; font-family: var(--ui); }
.chk-pts b { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.chk-pts span { color: var(--dim2); font-size: 15px; }

/* Barre de points du critère : elle redit le rapport points/max sans couleur
   seule — le chiffre est juste à côté. */
.chk-bar { margin: 14px 0 0; height: 5px; border-radius: 999px; background: var(--none-bg); overflow: hidden; }
.chk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue); }

.chk-body { margin: 16px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 760px) { .chk-body { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.chk-sec > div {
  font-family: var(--ui); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim2); margin-bottom: 7px;
}
.chk-sec p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.chk-ev { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.chk-ev li {
  font-size: 13.5px; line-height: 1.5; color: var(--fg);
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 8px 11px; overflow-wrap: anywhere;
}
.chk-fix {
  margin: 16px 0 0; display: flex; gap: 11px; align-items: flex-start;
  background: var(--tint2); border: 1px solid var(--tint-line);
  border-radius: 12px; padding: 13px 15px;
}
.chk-fix svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--on-tint); }
.chk-fix p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.chk-fix b { font-family: var(--ui); font-weight: 600; }

/* Les quatre habillages d'état. Fond, filet et texte changent ensemble, et
   l'icône porte la même information sans la couleur. */
.is-good  { background: var(--ok-bg);   border: 1px solid var(--ok-line);   color: var(--ok); }
.is-partial { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.is-missing { background: var(--bad-bg);  border: 1px solid var(--bad-line);  color: var(--bad); }
.is-error   { background: var(--none-bg); border: 1px solid var(--none-line); color: var(--none); }
.chk.has-good .chk-bar i { background: var(--ok); }
.chk.has-partial .chk-bar i { background: var(--warn); }
.chk.has-missing .chk-bar i, .chk.has-error .chk-bar i { background: var(--none-line); }

/* ── Conversion, après le résultat et jamais avant ───────────────────────── */

.aud-next {
  margin: 54px 0 0; background: var(--wash); border: 1px solid var(--border);
  border-radius: 22px; padding: 34px; box-shadow: var(--lift);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: center;
}
@media (max-width: 780px) { .aud-next { grid-template-columns: minmax(0, 1fr); padding: 26px; } }
.aud-next p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.aud-next-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Méthode : le barème, en clair ───────────────────────────────────────── */

.aud-method { padding-top: 96px; }
.tbl-wrap { margin: 26px 0 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--card3); }
table.rubric { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
table.rubric th, table.rubric td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); }
table.rubric th {
  font-family: var(--ui); font-weight: 600; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--dim2); background: var(--tint2);
}
table.rubric td:last-child, table.rubric th:last-child { text-align: right; font-family: var(--ui); font-weight: 600; white-space: nowrap; }
table.rubric tr:last-child td { border-bottom: 0; }
table.rubric td b { font-family: var(--ui); font-weight: 600; }

/* ── FAQ : la conversation de la page d'accueil, partout ──────────────────
   La page d'accueil fait référence. Pastille de question à gauche (fond
   --feat-h, rayon 12), signe + / − posé juste à côté d'elle, réponse en bulle
   bleue alignée à droite (fond --blue-cta, texte blanc). Le sélecteur de
   bulle vise « details > p » : il couvre les FAQ des pages générées sans
   changer leur balisage. Toujours <details>/<summary>, donc
   ouvrable au clavier et lisible fermé. */
.faq-list { margin: 26px 0 0; }
.faq-list details { margin-bottom: 20px; }
.faq-list details:last-child { margin-bottom: 0; }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* La pastille épouse son texte, comme sur la page d'accueil : mêmes fond,
   rayon, fonte, graisse, corps et transition. */
.faq-list .faq-q {
  background: var(--feat-h); border-radius: 12px; padding: 13px 20px;
  font-family: var(--ui); font-weight: 600; font-size: 16.5px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--fg); transition: background .2s ease;
}
.faq-list summary:hover .faq-q { background: var(--tint-solid); }
/* L'anneau de focus se pose sur la pastille, pas sur la rangée pleine largeur. */
.faq-list summary:focus-visible { outline: none; }
.faq-list summary:focus-visible .faq-q { outline: 2px solid var(--blue); outline-offset: 3px; }
.faq-list summary::after {
  content: '+'; flex: none;
  font-family: var(--ui); font-weight: 600; font-size: 20px; line-height: 1; color: var(--dim);
}
.faq-list details[open] summary::after { content: '−'; color: var(--on-tint); }
/* La réponse : bulle bleue à droite. Opacité seule, comme sur l'accueil : une
   transformation animée laisserait la bulle sur sa propre couche et adoucirait
   le texte blanc. */
.faq-list details > p {
  margin: 14px 0 0 auto; max-width: 62%; background: var(--blue-cta); color: #ffffff;
  border-radius: 12px; padding: 18px 22px; font-size: 15.5px; line-height: 1.6;
  animation: faq-in .28s ease both;
}
.faq-list details > p a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.faq-list details > p a:hover { color: #ffffff; }
.faq-list details > p b, .faq-list details > p strong { color: #ffffff; }
.faq-list details > p i { color: #ffffff; }
.faq-list details > p code { background: rgba(255,255,255,0.16); border-color: transparent; color: #ffffff; }
@keyframes faq-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  /* les pastilles remplissent presque la largeur : la colonne de « + » rejoint
     le bord droit, comme sur la page d'accueil */
  .faq-list summary::after { margin-left: auto; }
  .faq-list details > p { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details > p { animation: none; }
}

/* Ce que la note mesure, posé à côté de la note et non en bas de page. */
.res-portee {
  margin: 14px 0 0; padding: 12px 15px; border-radius: 11px;
  background: var(--tint2); border: 1px solid var(--tint-line);
  font-size: 13.8px; line-height: 1.6; color: var(--muted);
}
.res-portee b { font-family: var(--ui); font-weight: 600; color: var(--fg); }

/* ── Pied de page ────────────────────────────────────────────────────────── */

footer.site { margin-top: 96px; padding: 0 0 48px; }
footer.site .inner { max-width: 1080px; margin: 0 auto; }
footer.site .grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px; border-top: 1px solid var(--border-soft); padding-top: 44px;
}
@media (max-width: 760px) { footer.site .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
footer.site img { height: 30px; width: auto; display: block; }
footer.site .col-h {
  font-family: var(--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim2); margin-bottom: 8px;
}
footer.site .col a { display: block; color: var(--muted); font-size: 14.5px; line-height: 2.1; }
footer.site .col a:hover { color: var(--fg); }
footer.site .base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--dim2); display: flex; flex-wrap: wrap;
  gap: 10px 24px; justify-content: space-between;
}
footer.site .intro { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; max-width: 34ch; }

/* ── Impression : c'est le PDF ────────────────────────────────────────────
   Le PRD demande un PDF « conforme au rapport affiché ». Plutôt qu'embarquer
   un générateur de PDF de 300 Ko qui produirait une seconde mise en page à
   maintenir, la page s'imprime : le navigateur écrit le PDF, et ce qui sort
   est exactement ce qui est à l'écran, moins la coquille du site. */

@media print {
  .topbar, header.site, footer.site, .aud-console, .aud-scope, .aud-run,
  .res-actions, .aud-next, .aud-method, .aud-top .lede { display: none !important; }
  body { background: #fff; }
  /* La feuille imprimée a déjà ses marges : la gouttière d'écran est rendue.
     C'est le seul endroit du site autorisé à la reprendre, et il le dit. */
  .aud-result { padding: 0; display: block !important; }
  .wrap { padding-left: 0 !important; padding-right: 0 !important; }
  .res-card, .chk, .aud-next { box-shadow: none; background: #fff; }
  .res-card { border: 1px solid #ccc; }
  .chk { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ddd; }
  .chk-fix { background: #f6f6f6; border-color: #ddd; }
  /* la bulle bleue de FAQ s'imprime en gris clair : pas d'aplat d'encre, et
     pas de texte blanc sur papier blanc si l'aplat n'est pas imprimé */
  .faq-list details > p { background: #f2f2f2; color: #000; animation: none; }
  .faq-list details > p a, .faq-list details > p b,
  .faq-list details > p strong, .faq-list details > p i { color: #000; }
  a[href]::after { content: ''; }
}