/* Charte reprise de figenai.com : Public Sans, navy #04142b, or #f5c13d,
   rayons 20/12 px, ombres bleutées, transition .18s cubic-bezier(.2,.6,.2,1). */

/* Polices auto-hébergées : aucun appel à un CDN tiers. Charger Google Fonts
   ferait partir l'adresse IP de chaque visiteur chez Google, sans base légale. */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #04142b;
  --navy-700: #0b2545;
  --navy-500: #1b3a5c;
  --ink: #142234;
  --body: #344256;
  --muted: #536174;
  --line: #d9e0e8;
  --mist: #e8edf3;
  --snow: #f7f9fb;
  --blanc: #fff;
  --or: #f5c13d;
  --or-fonce: #d9a520;
  --or-encre: #976a26;
  --or-voile: #f5c13d24;

  /* Sémantiques du système corporate : aucun rouge. Le danger se dit en terre
     brûlée, l'avertissement en or éteint, et l'or vif reste l'ornement — il ne
     signale jamais une alerte. Les variantes « claires » servent sur fond navy. */
  --vert: #2f6b47;
  --vert-voile: #e9f1ec;
  --vert-clair: #8ecfa8;
  --ambre: #7a4e15;
  --ambre-voile: #f6efe2;
  --ambre-clair: #d8bd8e;
  --danger: #7a3a1a;
  --danger-voile: #f5ece6;
  --danger-clair: #e0ac8c;

  --r: 20px;
  --r-s: 12px;
  --ombre: 0 18px 48px #04142b14;
  --ombre-haute: 0 26px 70px #04142b29;
  --ease: .18s cubic-bezier(.2, .6, .2, 1);
  --sortie: .55s cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--body);
  font: 400 16px/1.6 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.enveloppe { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ── En-tête ─────────────────────────────────────────────────────────── */
/* L'en-tête est une barre claire sur tous les écrans. C'est ce qui permet au
   logo CGPE — dessiné pour un fond clair — d'apparaître tel quel, sans plaque
   blanche rapportée qui le faisait ressembler à un autocollant. */
.tete {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffed; backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line); padding: 11px 0;
}
.tete-flex { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Deux marques à égalité, séparées par un filet. Rien d'écrit : le co-marquage
   se lit, il ne s'explique pas. */
.alliance { display: flex; align-items: center; gap: 18px; }
.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque img { height: 48px; width: auto; display: block; }
.alliance-filet { width: 1px; height: 34px; background: var(--line); flex: none; }
.partenaire { display: inline-flex; align-items: center; text-decoration: none;
              transition: opacity var(--ease); }
.partenaire:hover { opacity: .78; }

/* Le logo CGPE officiel empile son bloc principal et sa signature « La liberté
   sans l'isolement » : le bloc n'occupe que 65 % de la hauteur du fichier, là
   où le logo Figen en occupe 47 %. À hauteur égale la marque partenaire
   paraîtrait rapetissée. 58 px donnent au bloc CGPE la masse visuelle du
   mot-symbole Figen posé à 48 px. Hauteur seule, largeur auto : le rapport
   1027 × 639 est respecté, jamais de déformation.
   Les deux corrections qui suivent sont des fractions de cette hauteur, pour
   qu'elles suivent le logo à tous les paliers :
   – le fichier réserve 65/639 de marge blanche à gauche du bloc, soit 10,2 % de
     la hauteur ; sans compensation le filet de séparation respire plus à droite
     qu'à gauche ;
   – la signature descendant sous le bloc, le centre du bloc se trouve 7,1 %
     au-dessus du centre du fichier ; on redescend l'image des trois quarts de
     cet écart pour poser les deux marques sur le même axe, sans envoyer la
     signature contre le filet du bas. La transform ne déplace pas la ligne. */
.partenaire img {
  --h-cgpe: 58px;
  height: var(--h-cgpe); width: auto; display: block;
  margin-left: calc(var(--h-cgpe) * -.102);
  transform: translateY(calc(var(--h-cgpe) * .052));
}

/* Les deux marques descendent ensemble. Ces règles ferment la section de
   l'en-tête, du plus large au plus étroit : les surcharges de fin de feuille
   l'emportaient autrefois sur le palier 460 px, qui restait lettre morte. */
@media (max-width: 620px) {
  .marque img { height: 42px; }
  .partenaire img { --h-cgpe: 51px; }
}
@media (max-width: 460px) {
  .alliance { gap: 12px; }
  .marque img { height: 36px; }
  .partenaire img { --h-cgpe: 44px; }
}

/* ── Écrans ──────────────────────────────────────────────────────────── */
.ecran { display: none; }
.ecran.actif { display: block; }
.ecran.actif > * { animation: monte var(--sortie) both; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pleine-hauteur { min-height: calc(100vh - 72px); }
.pleine-hauteur.actif { display: flex; align-items: center; }
.pleine-hauteur.actif > * { width: 100%; }
.fond-clair { background: var(--snow); }

/* ── Surfaces ────────────────────────────────────────────────────────── */
.plein-navy, .heros {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-700) 100%);
  color: #ffffffdb;
}
.heros { padding: clamp(74px, 11vh, 118px) 0 clamp(64px, 9vw, 96px); }
.heros-grille {
  position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
}
.heros-corps { position: relative; text-align: center; }
.bande { background: var(--snow); padding: clamp(48px, 7vw, 86px) 0; }
.bande.haute { padding-top: clamp(40px, 5vw, 60px); }

/* ── Typographie ─────────────────────────────────────────────────────── */
.sourcil {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or-encre); margin: 0 0 .85rem;
}
.sourcil.or { color: var(--or); }
.sourcil.centre, .titre.centre, .titre-clair.centre { text-align: center; }

h1 {
  margin: 0 0 1.1rem; color: var(--blanc);
  font-size: clamp(2.4rem, 6.4vw, 4.1rem); line-height: 1.04;
  font-weight: 700; letter-spacing: -.033em; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--or); }

.titre { color: var(--navy); font-size: clamp(1.65rem, 3.1vw, 2.45rem); line-height: 1.15;
         font-weight: 700; letter-spacing: -.024em; margin: 0 0 1rem; text-wrap: balance; }
.titre.compact { font-size: clamp(1.45rem, 2.5vw, 1.95rem); margin-bottom: 1.1rem; }
.titre-clair { color: var(--blanc); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600;
               letter-spacing: -.02em; margin: 0 0 2rem; word-break: break-word; }
.section-titre { color: var(--navy); font-size: 1.28rem; font-weight: 700; letter-spacing: -.018em;
                 margin: 3rem 0 .35rem; }

.chapeau { color: #ffffffb0; font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.66;
           max-width: 46rem; margin: 0 auto 2.4rem; }
.chapeau.sombre { color: var(--muted); margin-left: 0; }
.chapeau.petit { font-size: .95rem; margin-bottom: 1.2rem; }

/* ── Champ de saisie ─────────────────────────────────────────────────── */
.saisie {
  display: flex; align-items: center; gap: 12px; max-width: 590px; margin: 0 auto;
  background: var(--blanc); border-radius: 18px; padding: 8px 8px 8px 20px;
  box-shadow: 0 1px 0 #ffffff59 inset, 0 22px 50px -12px #00000073, 0 3px 10px #00000038;
  transition: transform var(--ease), box-shadow var(--ease);
}
.saisie:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #ffffff59 inset, 0 28px 60px -12px #00000080, 0 0 0 2px var(--or);
}
.saisie-globe { flex: none; width: 21px; height: 21px; color: #9aa4b2; transition: color var(--ease); }
.saisie:focus-within .saisie-globe { color: var(--or-fonce); }

.saisie-zone { position: relative; flex: 1; min-width: 0; }
.saisie input {
  width: 100%; background: none; border: 0; outline: none; position: relative; z-index: 1;
  color: var(--navy); font: 500 17px/1 "Public Sans", sans-serif; padding: 15px 0;
  letter-spacing: -.01em;
}
/* Faux marque-page animé : un vrai placeholder ne sait pas « s'écrire ». */
.saisie-fantome {
  position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none;
  color: #a7b0bd; font: 400 17px/1 "Public Sans", sans-serif; letter-spacing: -.01em;
}
.saisie-fantome.parti { display: none; }
.curseur {
  display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; background: #c2c9d3;
  animation: clignote 1s steps(2, start) infinite;
}
@keyframes clignote { to { visibility: hidden; } }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 15px/1 "Public Sans", sans-serif; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px; padding: 15px 26px;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), opacity var(--ease);
}
.bouton { text-decoration: none; }
.bouton svg { width: 15px; height: 15px; transition: transform var(--ease); }
.bouton:hover svg { transform: translateX(3px); }
.bouton.or { background: var(--or); color: var(--navy); }
.bouton.or:hover { background: #ffcf52; transform: translateY(-2px); }
.bouton.navy { background: var(--navy); color: var(--blanc); box-shadow: 0 8px 22px #04142b2e; }
.bouton.navy:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: 0 14px 30px #04142b40; }
.bouton.fantome { background: var(--blanc); border-color: var(--line); color: var(--navy); }
.bouton.fantome:hover { border-color: var(--navy-500); }
.bouton.grand { padding: 16px 28px; font-size: 15.5px; }
.bouton.large { width: 100%; }
.bouton:active { transform: translateY(0); }
.bouton[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ── Gages ───────────────────────────────────────────────────────────── */

.filet-legal { font-size: .79rem; color: var(--muted); line-height: 1.7; max-width: 60rem;
               margin: 2.6rem auto 0; text-align: center; opacity: .9; }
.filet-legal.serre { margin-top: .9rem; text-align: left; font-size: .73rem; }
/* Les mentions légales portent maintenant des liens : sans règle, le bleu du
   navigateur casse la charte et se voit à peine sur ce gris. */
.filet-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
                 text-decoration-color: #04142b47; transition: color var(--ease); }
.filet-legal a:hover { color: var(--navy); text-decoration-color: currentColor; }
.filet-legal.encadre { text-align: left; background: var(--mist); border-radius: var(--r-s); padding: 18px 20px; margin-top: 2.6rem; }

.alerte { color: var(--danger-clair); background: #7a3a1a73; border: 1px solid #ffffff2b; border-radius: var(--r-s);
          padding: 11px 16px; font-size: .9rem; margin: 1.1rem auto 0; max-width: 590px; }
.formulaire .alerte { color: var(--danger); background: var(--danger-voile); border-color: #7a3a1a26; margin: 0 0 12px; }

/* ── 2. Écran d'analyse ──────────────────────────────────────────────── */
.scan-corps { position: relative; text-align: center; padding: 96px 0 56px; }

.radar { position: relative; width: 210px; height: 210px; margin: 0 auto 2.6rem; display: grid; place-items: center; }
.radar-onde {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid #f5c13d38;
  animation: onde 3s cubic-bezier(.2, .6, .2, 1) infinite;
}
.radar-onde:nth-child(2) { animation-delay: 1s; }
.radar-onde:nth-child(3) { animation-delay: 2s; }
@keyframes onde {
  0% { transform: scale(.42); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.radar-balai {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, #f5c13d00 200deg, #f5c13d 330deg, #f5c13db3 360deg);
  mask-image: radial-gradient(circle, transparent 44%, #000 45%);
  animation: tourne 2.1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.radar-coeur {
  position: relative; width: 120px; height: 120px; border-radius: 50%;
  background: #ffffff0d; border: 1px solid #ffffff1f;
  display: grid; place-content: center; text-align: center;
}
.radar-coeur span { display: block; font-size: 2.5rem; font-weight: 700; color: var(--blanc);
                    line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.radar-coeur small { display: block; font-size: .72rem; color: #ffffff7d; letter-spacing: .1em;
                     text-transform: uppercase; margin-top: 5px; }

.progression-legende {
  margin: 0 0 2.2rem; font-size: .88rem; color: #ffffff87; text-align: center;
  min-height: 1.4em; transition: opacity .3s ease;
}
.progression-legende b { color: var(--blanc); font-weight: 650; font-variant-numeric: tabular-nums; }

.etapes { list-style: none; margin: 0 auto; padding: 0; max-width: 340px; text-align: left; }
.etapes li { display: flex; align-items: center; gap: 14px; padding: 9px 0;
             font-size: .93rem; color: #ffffff47; transition: color .45s ease; }
.etapes li i { position: relative; flex: none; width: 17px; height: 17px; border-radius: 50%;
               border: 1.5px solid #ffffff2b; transition: all .45s ease; }
.etapes li.encours { color: #ffffffdb; }
.etapes li.encours i { border-color: var(--or); }
.etapes li.encours i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
                              background: var(--or); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.etapes li.faite { color: #ffffff94; }
.etapes li.faite i { border-color: var(--or); background: var(--or); }
.etapes li.faite i::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 8px;
                            border: solid var(--navy); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }

/* ── 3. Duel : le score glisse à gauche, le coffre entre à droite ─────── */
.duel {
  --ecart: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ecart); align-items: center; padding: 100px 0 56px;
}

/* Fermé, la colonne de gauche est décalée d'une demi-colonne : son contenu
   tombe pile au centre de l'écran. Ouvert, elle revient à sa place. Une seule
   propriété bouge — `transform` — donc l'œil suit sans à-coup. */
.duel-gauche {
  width: 100%; min-width: 0;
  transform: translateX(calc(50% + var(--ecart) / 2));
  transition: transform .95s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.duel.ouvert .duel-gauche { transform: none; }
.gauche-corps { max-width: 440px; margin: 0 auto; text-align: left; }

.duel-droite {
  min-width: 0; opacity: 0; pointer-events: none;
  transform: translateX(22px);
  transition: opacity .5s ease .34s, transform .85s cubic-bezier(.22, 1, .36, 1) .34s;
  will-change: opacity, transform;
}
.duel.ouvert .duel-droite { opacity: 1; transform: none; pointer-events: auto; }

.cadran { position: relative; width: min(264px, 66vw); aspect-ratio: 1; margin: 0 auto 1.3rem; }
.cadran-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cadran-fond { fill: none; stroke: #ffffff17; stroke-width: 13; }
.cadran-arc {
  fill: none; stroke: url(#degrade-arc); stroke-width: 13; stroke-linecap: round;
  stroke-dasharray: 653.45; stroke-dashoffset: 653.45;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}
.cadran-centre { position: absolute; inset: 0; display: grid; place-content: center; }
.cadran-nombre {
  font-size: clamp(3.3rem, 7.6vw, 4.4rem); font-weight: 700; color: var(--blanc);
  line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  animation: net .95s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes net { from { filter: blur(10px); opacity: 0; transform: scale(.88); }
                 to { filter: blur(0); opacity: 1; transform: none; } }
.cadran-sur { font-size: .78rem; color: #ffffff7a; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.score-mention { font-size: 1.1rem; font-weight: 600; color: var(--blanc); letter-spacing: -.012em; margin: 0 0 1.1rem; }


.mini-blocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; margin-bottom: 1rem; text-align: left; }
.mini-bloc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                  font-size: .86rem; margin-bottom: 6px; }
.mini-bloc-nom { color: #ffffffcc; font-weight: 500; }
.mini-bloc-pts { color: #ffffff7d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-barre { height: 5px; background: #ffffff14; border-radius: 999px; overflow: hidden; }
.mini-barre span { display: block; height: 100%; width: 0; border-radius: 999px;
                   transition: width 1s cubic-bezier(.22, 1, .36, 1); }

.pastilles { display: flex; flex-wrap: wrap; gap: 7px; }
.pastille { background: #ffffff0f; border: 1px solid #ffffff1c; border-radius: 999px;
            padding: 6px 13px; font-size: .79rem; color: #ffffff9e; }
.pastille b { color: var(--blanc); font-weight: 650; }

/* ── Coffre (aperçu verrouillé) ──────────────────────────────────────── */
.coffre { position: relative; min-width: 0; }
.coffre-titre { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
                color: var(--or); margin: 0 0 13px; }
.coffre-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.coffre-ligne {
  display: flex; align-items: center; gap: 13px;
  background: #ffffff0f; border: 1px solid #ffffff1a; border-radius: var(--r-s); padding: 13px 16px;
}
.coffre-ligne .cl-id { font: 500 11px/1 ui-monospace, monospace; color: #ffffff6b; flex: none; width: 24px; }
.coffre-ligne .cl-nom { flex: 1 1 0; min-width: 0; font-size: .88rem; font-weight: 550; color: #ffffffe0;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le voile était trop léger : la première ligne — l'interdiction, celle qui
   vaut le plus — se lisait encore. Le but est de montrer qu'il y a matière,
   jamais de laisser deviner quoi. */
.coffre-ligne[data-voile="0"] { filter: blur(4.4px); opacity: .84; }
.coffre-ligne[data-voile="1"] { filter: blur(5.2px); opacity: .72; }
.coffre-ligne[data-voile="2"] { filter: blur(6.2px); opacity: .56; }
.coffre-ligne[data-voile="3"] { filter: blur(7.4px); opacity: .42; }

.coffre-voile { position: absolute; inset: auto 0 0; height: 64%; pointer-events: none;
                background: linear-gradient(180deg, #07192f00 0%, #07192fb0 38%, #081c34 74%); }

.coffre-clef {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; background: var(--blanc);
  border-radius: var(--r); padding: 34px 34px 28px;
  box-shadow: 0 34px 80px -20px #000000a6, 0 4px 14px #0000003d;
  animation: leve .7s cubic-bezier(.22, 1, .36, 1) .6s both;
}
@keyframes leve { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cadenas { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center;
           color: var(--or-encre); background: var(--or-voile); border: 1px solid #f5c13d54;
           animation: cadenas 4.5s cubic-bezier(.36, .07, .19, .97) 1.6s infinite; }
.cadenas svg { width: 26px; height: 26px; }
/* Un frémissement toutes les quatre secondes : assez pour attraper l'œil,
   trop court pour agacer. */
@keyframes cadenas {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  84% { transform: rotate(-7deg) scale(1.06); }
  87% { transform: rotate(6deg) scale(1.06); }
  90% { transform: rotate(-4deg) scale(1.03); }
  93% { transform: rotate(3deg) scale(1.01); }
  96% { transform: rotate(0) scale(1); }
}
.coffre-clef h4 { margin: 0 0 9px; color: var(--navy); font-size: 1.36rem; font-weight: 700; letter-spacing: -.024em; }
.coffre-clef h4 span { color: var(--or-encre); }
.coffre-clef p { margin: 0 0 20px; color: var(--muted); font-size: .93rem; line-height: 1.62; }
.coffre-note { display: block; margin-top: 13px; font-size: .79rem; color: var(--muted); }

/* Un reflet traverse le bouton, comme une lumière sur une surface laquée. */
#bouton-rapport { position: relative; overflow: hidden; font-size: 16.5px; padding: 18px 30px; }
#bouton-rapport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(105deg, transparent, #ffffffa6, transparent);
  animation: reflet 4.5s ease-in-out 1.6s infinite;
}
@keyframes reflet {
  0% { left: -50%; } 18% { left: 115%; } 100% { left: 115%; }
}

/* ── 4. Formulaire ───────────────────────────────────────────────────── */
.duo-colonnes { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .78fr);
                gap: clamp(22px, 3.5vw, 46px); align-items: center; padding: 44px 0 44px; }
.colonne-form { min-width: 0; }
.formulaire { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--r);
              box-shadow: var(--ombre); padding: clamp(20px, 2.4vw, 26px); }
.champ { margin-bottom: 13px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.formulaire .champ label { display: block; font-size: .8rem; font-weight: 650; color: var(--navy); margin-bottom: 5px; }
.formulaire .champ label b { color: var(--danger); }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel] {
  width: 100%; padding: 11px 13px; font: 400 14.5px/1.4 "Public Sans", sans-serif;
  border: 1px solid var(--line); border-radius: 10px; background: var(--snow); color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.formulaire input:focus { outline: none; background: var(--blanc); border-color: var(--or-fonce);
                          box-shadow: 0 0 0 2px var(--or); }

.statuts { border: 0; padding: 0; margin: 14px 0; }
.statuts legend { font-size: .8rem; font-weight: 650; color: var(--navy); padding: 0; margin-bottom: 9px; }
.aide-en-ligne { font-weight: 400; color: var(--muted); font-size: .75rem; }
.grille-statuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.statut-ligne {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; position: relative;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--snow);
  font-size: .83rem; color: var(--body); line-height: 1.32;
  transition: border-color var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}
.statut-ligne:hover { border-color: #c3ccd8; }
.statut-ligne input { position: absolute; opacity: 0; pointer-events: none; }
.statut-case {
  flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #c3ccd8;
  background: var(--blanc); display: grid; place-items: center; color: var(--navy); transition: all var(--ease);
}
.statut-case svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: all var(--ease); }
.statut-ligne:has(input:checked) { background: #fffaee; border-color: var(--or); color: var(--navy);
                                   font-weight: 550; box-shadow: 0 0 0 1px var(--or); }
.statut-ligne:has(input:checked) .statut-case { background: var(--or); border-color: var(--or); }
.statut-ligne:has(input:checked) .statut-case svg { opacity: 1; transform: scale(1); }
.statut-nom { flex: 1; min-width: 0; }
.statut-detecte {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vert); background: var(--vert-voile); border: 1px solid #2f6b4733;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}

.accord { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted);
          margin-bottom: 13px; cursor: pointer; user-select: none; position: relative; }
.accord input { position: absolute; opacity: 0; pointer-events: none; }
.accord-case { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #c3ccd8;
               background: var(--blanc); display: grid; place-items: center; color: var(--navy);
               margin-top: 2px; transition: all var(--ease); }
.accord-case svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: all var(--ease); }
.accord:has(input:checked) .accord-case { background: var(--or); border-color: var(--or); }
.accord:has(input:checked) .accord-case svg { opacity: 1; transform: scale(1); }
.accord:has(input:checked) .accord-texte { color: var(--ink); }

.recap { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-700) 100%);
         border-radius: var(--r); padding: 26px; color: #ffffffb5; box-shadow: var(--ombre-haute); }
.recap h4 { margin: 0 0 12px; font-size: .73rem; font-weight: 700; letter-spacing: .14em;
            text-transform: uppercase; color: var(--or); }
.recap-haut { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.recap-score { font-size: 3rem; font-weight: 700; color: var(--blanc); line-height: 1;
               letter-spacing: -.042em; font-variant-numeric: tabular-nums; }
.recap-score small { font-size: 1rem; color: #ffffff7a; font-weight: 500; }
.recap-mention { font-size: .81rem; color: var(--or); font-weight: 600; }
.recap-site { font-size: .84rem; color: #ffffff9e; margin: 10px 0 17px; word-break: break-all;
              padding-bottom: 15px; border-bottom: 1px solid #ffffff1c; }
.recap-lignes { list-style: none; margin: 0; padding: 0; }
.recap-lignes li { margin-bottom: 11px; }
.recap-l-tete { display: flex; justify-content: space-between; gap: 10px; font-size: .79rem; margin-bottom: 5px; }
.recap-l-tete span { color: #ffffffb5; }
.recap-l-tete b { color: var(--blanc); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap-l-barre { height: 4px; background: #ffffff14; border-radius: 999px; overflow: hidden; }
.recap-l-barre span { display: block; height: 100%; border-radius: 999px; }
.recap-pied { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid #ffffff1c;
              font-size: .77rem; color: #ffffff87; display: flex; justify-content: space-between; gap: 10px; }
.recap-pied b { color: var(--blanc); font-weight: 650; }

/* ── 5. Rapport ──────────────────────────────────────────────────────── */
.bandeau-ok { background: var(--vert-voile); border: 1px solid #2f6b4726; border-radius: var(--r-s);
              padding: 14px 18px; font-size: .92rem; color: var(--vert); margin-bottom: 14px; }
.bandeau-avert { background: var(--ambre-voile); border: 1px solid #7a4e1526; border-radius: var(--r-s);
                 padding: 14px 18px; font-size: .92rem; color: var(--ambre); margin-bottom: 14px; line-height: 1.6; }
.rapport-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
                padding-bottom: 22px; border-bottom: 1px solid var(--line); margin: 1.6rem 0 0; }
.rapport-tete .titre { margin: 0; }
.rapport-note { font-size: 3rem; font-weight: 700; color: var(--navy); line-height: 1;
                letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rapport-note small { font-size: 1.1rem; color: var(--muted); font-weight: 500; }

/* ── Plan d'action : ce que le conseiller doit faire, concrètement ────── */
/* Le texte prêt à coller : c'est lui qui fait gagner du temps au conseiller. */
.modele { margin-top: 13px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--snow); overflow: hidden; }
.modele-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               padding: 9px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.modele-titre { font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.modele-copier {
  font: 600 .76rem/1 "Public Sans", sans-serif; cursor: pointer; color: var(--navy);
  background: var(--blanc); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  transition: all var(--ease); white-space: nowrap;
}
.modele-copier:hover { border-color: var(--or); background: #fffaee; }
.modele-copier.fait { background: var(--vert-voile); border-color: #2f6b4740; color: var(--vert); }
.modele-texte { margin: 0; padding: 13px 15px; font-size: .87rem; line-height: 1.68; color: var(--ink); }
.modele-note { margin: 0; padding: 0 15px 12px; font-size: .74rem; color: var(--muted); }

.etat { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .72rem;
        font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.etat-conforme { color: var(--vert); background: var(--vert-voile); }
.etat-partiel { color: var(--ambre); background: var(--ambre-voile); }
.etat-absent { color: var(--danger); background: var(--danger-voile); }
.etat-infraction { color: var(--blanc); background: var(--danger); }
.etat-non_applicable { color: var(--muted); background: var(--mist); }
/* Sur fond navy, les pastilles d'état doivent s'éclaircir pour rester lisibles. */
.coffre-ligne .etat { flex: none; font-size: .68rem; padding: 3px 9px; }
.coffre-ligne .etat-conforme { color: var(--vert-clair); background: #2f6b4759; }
.coffre-ligne .etat-partiel { color: var(--ambre-clair); background: #7a4e1566; }
.coffre-ligne .etat-absent { color: var(--danger-clair); background: #7a3a1a66; }

#bouton-recommencer { margin-top: 2rem; }
.pied { background: var(--navy); color: #ffffff63; padding: 26px 0; font-size: .82rem; }

/* ── Adaptatif ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .duel, .duel.ouvert { grid-template-columns: 1fr; gap: 34px; padding-top: 110px; }
  .duel-gauche, .duel.ouvert .duel-gauche { transform: none; }
  .duel-droite { transform: translateY(18px); }
  .mini-blocs { text-align: left; }
  .pastilles { justify-content: center; }
  .duo-colonnes { grid-template-columns: 1fr; padding-top: 34px; }
  .recap { order: -1; }
  .pleine-hauteur.actif { align-items: flex-start; }
  .cartes-trio { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .saisie { flex-wrap: wrap; border-radius: var(--r); padding: 12px 14px; }
  .saisie-zone { flex: 1 1 60%; }
  .saisie .bouton { width: 100%; margin-top: 4px; }
  .trio, .grille-statuts { grid-template-columns: 1fr; }
  .gages { gap: 8px 20px; font-size: .84rem; }
  .plan li { flex-wrap: wrap; }
  .plan .gain { margin-left: 37px; }
  .coffre-clef { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Les cases natives sont masquées au profit d'un carré dessiné : sans cette
   règle, un utilisateur au clavier ne verrait plus où il se trouve. */
.statut-ligne:has(input:focus-visible),
.accord:has(input:focus-visible) { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

/* ── Alerte « à traiter en priorité » ────────────────────────────────────
   Posée sous le score, dans la colonne de gauche : elle ne déplace plus rien.
   Et elle dit qu'il y a urgence sans dire de quoi il s'agit — le détail est ce
   qu'on vient chercher dans le rapport. */
.alerte-bloc {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  margin: 18px 0 0; padding: 15px 17px; border-radius: var(--r-s);
  background: #7a3a1a45; border: 1px solid #e0ac8c4d;
  animation: monte .6s cubic-bezier(.22, 1, .36, 1) both;
}
.alerte-pictogramme {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #e0ac8c26; color: var(--danger-clair);
}
.alerte-pictogramme svg { width: 17px; height: 17px; }
.alerte-corps { min-width: 0; }
.alerte-etiquette { margin: 0; font-size: .73rem; font-weight: 700; letter-spacing: .12em;
                    text-transform: uppercase; color: #e7bb9e; }
.alerte-texte { margin: 6px 0 0; font-size: .87rem; line-height: 1.6; color: #ffffffcf; }
.alerte-texte b { color: var(--blanc); font-weight: 700; }

/* Quand l'analyse n'a pu lire qu'une fraction du site, le score reste affiché
   mais on dit franchement sur quoi il porte. */
.pastille.reserve { color: var(--ambre-clair); background: #7a4e1547; border-color: #d8bd8e59; }
.note-fiabilite { margin: 12px 0 0; font-size: .82rem; color: #ffffff8f; line-height: 1.6;
                  background: #ffffff0f; border-radius: 10px; padding: 11px 14px; text-align: left; }

/* ── Porte : le visiteur n'est pas abonné ────────────────────────────────── */
.porte { display: grid; place-items: center; min-height: 100%; padding-block: 44px 52px; }
.porte-carte {
  width: 100%; max-width: 620px; background: var(--blanc);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--ombre-haute); padding: 40px 42px 34px;
  animation: monte .55s cubic-bezier(.22, 1, .36, 1) both;
}
.cadenas.grand { width: 64px; height: 64px; border-radius: 19px; margin-bottom: 20px; }
.cadenas.grand svg { width: 31px; height: 31px; }
.porte-texte { margin: 14px 0 0; text-align: center; font-size: .97rem; line-height: 1.68; color: var(--body); }
.porte-texte b { color: var(--navy); font-weight: 650; }

.porte-chiffres {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--line);
}
.porte-chiffres div { text-align: center; }
.porte-chiffres b { display: block; font-size: 2.1rem; font-weight: 700; color: var(--navy);
                    line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.porte-chiffres span { display: block; margin-top: 5px; font-size: .76rem; color: var(--muted); }

.porte-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.porte-liste li { position: relative; padding-left: 26px; font-size: .9rem; line-height: 1.6; color: var(--body); }
.porte-liste li::before {
  content: ''; position: absolute; left: 6px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--or);
}
#porte-reverifier { margin-top: 10px; }
.filet-legal.centre { text-align: center; }

@media (max-width: 560px) {
  .porte-carte { padding: 30px 22px 26px; }
  .porte-chiffres b { font-size: 1.7rem; }
}

.lien-discret {
  display: block; width: 100%; margin-top: 14px; padding: 4px;
  background: none; border: 0; cursor: pointer;
  font: 500 .83rem/1.5 "Public Sans", sans-serif; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; transition: color var(--ease);
}
.lien-discret:hover { color: var(--navy); }

/* ══ Rapport : lire la couleur avant de lire le texte ═══════════════════════
   Le conseiller doit savoir en un regard ce qui brûle et ce qui va. Chaque
   niveau a donc son bandeau plein, avec un dégradé et un motif de vagues ;
   les corrections, elles, restent repliées sous leur bandeau. Le détail ne
   s'ouvre que sur le point qu'on traite. */

:root {
  --vague: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='90'%20viewBox='0%200%20560%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,46c70,-34,140,-34,210,0s140,34,210,0s140,-34,140,0v44H0z'%20fill='%23fff'%20opacity='.085'/%3E%3Cpath%20d='M0,64c70,-30,140,-30,210,0s140,30,210,0s140,-30,140,0v26H0z'%20fill='%23fff'%20opacity='.13'/%3E%3C/svg%3E");
}

/* ── Le verdict en trois chiffres, avant tout le reste ──────────────────── */
.verdict {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px; margin: 0 0 14px;
}
.tuile {
  position: relative; overflow: hidden; border-radius: var(--r-s);
  padding: 19px 20px 17px; color: var(--blanc); min-height: 104px;
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: monte .5s cubic-bezier(.22, 1, .36, 1) both;
}
.tuile::before { content: ''; position: absolute; inset: 0;
                 background: linear-gradient(140deg, var(--t1), var(--t2)); }
.tuile::after  { content: ''; position: absolute; inset: 0;
                 background: var(--vague) repeat-x left bottom / 560px 90px; }
.tuile b, .tuile span { position: relative; }
.tuile b { font-size: 2.15rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
           font-variant-numeric: tabular-nums; }
.tuile span { margin-top: 7px; font-size: .78rem; line-height: 1.35; opacity: .84; }

.t-urgent { --t1: #7a3a1a; --t2: #4f2310; }
.t-faire  { --t1: #96651f; --t2: #6a4512; }
.t-ok     { --t1: #2f6b47; --t2: #1c4630; }
.t-gain   { --t1: #2b5878; --t2: #0b2545; }

/* ── Bilan : les corrections à gauche, ce qui va déjà à droite ───────────── */
.bilan {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px; align-items: start; margin-top: 1.7rem;
}
.bilan-col { min-width: 0; }
.col-ok { position: sticky; top: 24px; }

.panneau {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--blanc); margin-bottom: 14px;
  animation: monte .5s cubic-bezier(.22, 1, .36, 1) both;
}
.panneau-tete {
  position: relative; overflow: hidden; color: var(--blanc);
  padding: 17px 22px 19px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.panneau-tete::before { content: ''; position: absolute; inset: 0;
                        background: linear-gradient(140deg, var(--t1), var(--t2)); }
.panneau-tete::after  { content: ''; position: absolute; inset: 0;
                        background: var(--vague) repeat-x left bottom / 560px 90px; }
.panneau-tete > div, .panneau-compte { position: relative; }
.panneau-tete h3 { margin: 0; font-size: 1.14rem; font-weight: 700; letter-spacing: -.022em; }
.panneau-sous { margin: 5px 0 0; font-size: .82rem; line-height: 1.5; opacity: .85; max-width: 46ch; }
.panneau-compte {
  flex: none; font-size: .79rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; background: #ffffff26; border-radius: 999px;
  padding: 6px 13px;
}

.pan-urgent      { --t1: #7a3a1a; --t2: #4f2310; }
.pan-prioritaire { --t1: #8c4a1c; --t2: #63300f; }
.pan-important   { --t1: #96651f; --t2: #6a4512; }
.pan-completer   { --t1: #2b5878; --t2: #0b2545; }
.pan-ok, .pan-vide { --t1: #2f6b47; --t2: #1c4630; }

/* ── Une correction : titre seul, le reste se déplie ─────────────────────── */
.point { border-top: 1px solid var(--mist); }
.panneau-corps > .point:first-child { border-top: 0; }
.point > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; transition: background var(--ease);
}
.point > summary::-webkit-details-marker { display: none; }
.point > summary:hover { background: var(--snow); }
.point > summary:focus-visible { outline: 2px solid var(--navy-500); outline-offset: -2px; }
.point-nom { flex: 1; min-width: 0; font-size: .93rem; font-weight: 600;
             color: var(--navy); line-height: 1.45; letter-spacing: -.01em; }
.point-gain { flex: none; font-size: .78rem; font-weight: 700; color: var(--muted);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.point-chevron { flex: none; width: 17px; height: 17px; color: var(--muted);
                 transition: transform var(--ease); }
.point-chevron svg { width: 100%; height: 100%; display: block; }
.point[open] > summary { background: var(--snow); }
.point[open] .point-chevron { transform: rotate(180deg); }
.point-corps { padding: 0 22px 20px; }
.point-faire { margin: 0; font-size: .9rem; line-height: 1.68; color: var(--body); }
.point-constat { margin: 9px 0 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.point-constat b { color: var(--body); font-weight: 650; }

/* ── Ce qui va déjà : volontairement sobre et compact ────────────────────── */
.conformes { list-style: none; margin: 0; padding: 6px 22px 4px; display: grid; }
.conforme-ligne { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0;
                  font-size: .87rem; line-height: 1.5; color: var(--body); }
.conforme-ligne + .conforme-ligne { border-top: 1px solid var(--mist); }
.conforme-ligne.vide { color: var(--muted); font-style: italic; }
.coche { flex: none; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%;
         background: var(--vert-voile); color: var(--vert); display: grid; place-items: center; }
.coche svg { width: 10px; height: 10px; }
.conforme-nom { flex: 1; min-width: 0; }

.hors-champ { margin: 4px 22px 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.hors-champ-titre { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
                    text-transform: uppercase; color: var(--muted); }
.hors-champ-texte { margin: 8px 0 0; font-size: .84rem; line-height: 1.55; color: var(--body); }
.hors-champ-note { margin: 7px 0 0; font-size: .76rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 920px) {
  .bilan { grid-template-columns: minmax(0, 1fr); }
  .col-ok { position: static; }
}
@media (max-width: 560px) {
  .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau-tete, .point > summary { padding-inline: 17px; }
  .point-corps, .conformes, .hors-champ { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tuile, .panneau { animation: none; }
}

/* ── Écran d'analyse ─────────────────────────────────────────────────────
   Une analyse peut durer cinq minutes : tout doit être lisible de loin, et le
   compteur doit finir exactement là où il a promis d'aller. */
.scan-site { margin: .55rem 0 0; text-align: center; color: var(--blanc);
             font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 650; letter-spacing: -.03em; }
.scan-legende { margin: .85rem auto 0; max-width: 46rem; text-align: center;
                font-size: 1.02rem; line-height: 1.6; color: #ffffffb0; }

.jauge { width: min(620px, 100%); margin: 30px auto 30px; }
.jauge-barre { position: relative; height: 11px; border-radius: 999px;
               background: #ffffff17; overflow: hidden; }
.jauge-barre span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--or-fonce), var(--or) 55%, #ffdc84);
  box-shadow: 0 0 18px -4px #f5c13d94;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.jauge-barre::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff2e 48%, transparent);
  transform: translateX(-100%); animation: lueur 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lueur { to { transform: translateX(100%); } }
.jauge-pieds { display: flex; justify-content: space-between; gap: 16px; margin-top: 13px;
               font-size: .95rem; color: #ffffffc2; font-variant-numeric: tabular-nums; }
#jauge-compte b { color: var(--blanc); font-weight: 700; }
#jauge-reste { color: var(--or); font-weight: 600; }

/* Un propos, pas une bulle : même largeur que la jauge, posé dans la page. */
.scan-propos {
  width: min(620px, 100%); margin: 30px auto 0; padding: 0 0 0 20px;
  position: relative; text-align: left;
  font-size: 1rem; line-height: 1.7; color: #ffffffab;
}
.scan-propos::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--or); box-shadow: 0 0 0 5px #f5c13d1f;
}
.scan-propos.entre { animation: souffle .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes souffle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-propos.entre { animation: none; }
  .jauge-barre::after { animation: none; }
}

/* ── Rapport : plus large, moins de vide sur les côtés ───────────────────── */
#ecran-rapport .enveloppe { max-width: 1460px; padding-inline: clamp(16px, 2.6vw, 30px); }
/* L'en-tête est en position absolue : le contenu doit lui laisser sa hauteur,
   sinon le bandeau de confirmation passe derrière le cartouche de marques. */
#ecran-rapport .bande.haute { padding-block: 40px 52px; }
#ecran-rapport .rapport-tete { margin-top: 1rem; padding-bottom: 16px; }
@media (min-width: 1200px) {
  .bilan { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; }
}

/* Le détail des 22 critères double la hauteur de page : il se déplie à la
   demande, une fois qu'on a lu ce qu'il faut changer. */
.detail-repli { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--r);
                background: var(--blanc); overflow: hidden; }
.detail-repli > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; transition: background var(--ease);
}
.detail-repli > summary::-webkit-details-marker { display: none; }
.detail-repli > summary:hover { background: var(--snow); }
.detail-repli > summary > span:first-child { font-size: 1.08rem; font-weight: 700;
                                             color: var(--navy); letter-spacing: -.02em; }
.detail-indice { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); }
.detail-repli[open] > summary { background: var(--snow); border-bottom: 1px solid var(--line); }
/* Sans le `> summary`, ce sélecteur retournait AUSSI les chevrons des vingt-deux
   critères imbriqués : tous pointaient vers le haut alors qu'ils étaient fermés. */
.detail-repli[open] > summary .point-chevron { transform: rotate(180deg); }
.detail-repli #detail { padding: 20px 22px 24px; }
.detail-repli .groupe:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .detail-repli > summary, .detail-repli #detail { padding-inline: 17px; }
  .detail-indice { display: none; }
}

/* ══ Accueil : mouvement discret, jamais décoratif ══════════════════════════ */

/* Deux halos qui dérivent lentement derrière le héros. Ils donnent de la
   profondeur au navy plat sans rien ajouter à lire. */
.heros-lueur {
  position: absolute; inset: -25% -12%; pointer-events: none;
  background:
    radial-gradient(42% 44% at 24% 28%, #f5c13d1c, transparent 68%),
    radial-gradient(38% 40% at 76% 62%, #2f7ad11f, transparent 70%);
  animation: derive 30s ease-in-out infinite alternate;
}
@keyframes derive {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}

/* Le titre entre en deux temps : la page est lisible en moins d'une seconde,
   et le regard suit la phrase au lieu de la recevoir d'un bloc. */
.heros h1 .ligne { display: block; animation: leve .72s cubic-bezier(.22, 1, .36, 1) both; }
.heros h1 .ligne:nth-child(1) { animation-delay: .04s; }
.heros h1 .ligne:nth-child(2) { animation-delay: .13s; }
.heros .sourcil { animation: leve .6s cubic-bezier(.22, 1, .36, 1) both; }
.heros .chapeau { animation: leve .7s cubic-bezier(.22, 1, .36, 1) .22s both; }
.heros .saisie { animation: leve .78s cubic-bezier(.22, 1, .36, 1) .3s both; }
@keyframes leve {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

/* Les trois cartes se posent l'une après l'autre, une seule fois au chargement. */
.cartes-trio .carte { animation: leve .62s cubic-bezier(.22, 1, .36, 1) both; }
.cartes-trio .carte:nth-child(1) { animation-delay: .04s; }
.cartes-trio .carte:nth-child(2) { animation-delay: .11s; }
.cartes-trio .carte:nth-child(3) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .heros-lueur { animation: none; }
  .heros h1 .ligne, .heros .sourcil, .heros .chapeau, .heros .saisie,
  .cartes-trio .carte { animation: none; }
}

/* ══ Accueil — démonstration en vidéo ═══════════════════════════════════════
   Elle s'ouvre DANS la page : un conseiller qui clique ne doit jamais se
   retrouver sur un autre site, son analyse en cours resterait derrière lui. */
/* Vignette de la vidéo tutoriel. Elle se pose dans l'angle du héros : le titre
   et la barre de recherche restent centrés, comme avant — la vidéo est une
   offre, pas un deuxième sujet. L'aperçu est une vraie image de la vidéo, donc
   ce que le conseiller verra en cliquant. */
.demo {
  position: absolute; top: clamp(18px, 4vh, 46px); right: clamp(18px, 3vw, 44px);
  width: clamp(210px, 20vw, 272px); z-index: 3;
  animation: leve .8s cubic-bezier(.22, 1, .36, 1) .42s both;
}
.demo-cadre {
  display: block; width: 100%; padding: 0; cursor: pointer; position: relative;
  background: #04142b; border: 1px solid #ffffff26; border-radius: 13px; overflow: hidden;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.demo-cadre:hover { transform: translateY(-2px); border-color: #f5c13d70; box-shadow: 0 20px 44px -18px #000000c4; }
.demo-cadre:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.demo-affiche { display: block; width: 100%; height: auto; }

/* Le balayage doré : il dit ce que fait l'outil sans un mot. Posé au-dessus de
   l'image, assez discret pour ne pas la masquer. */
.demo-faisceau {
  position: absolute; inset: 0 auto 0 -34%; width: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, #f5c13d1f 42%, #f5c13d59 62%, #f5c13d14 78%, transparent);
  animation: balaie 3.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes balaie { from { transform: translateX(0); } to { transform: translateX(400%); } }
/* Un voile en bas pour que la légende reste lisible quelle que soit l'image. */
.demo-cadre::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(transparent, #04142bf0);
  pointer-events: none;
}

.demo-lecture {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or); color: var(--navy); box-shadow: 0 8px 22px -6px #000000a6;
  transition: transform var(--ease); z-index: 2;
}
.demo-lecture svg { width: 18px; height: 18px; margin-left: 1px; }
.demo-cadre:hover .demo-lecture { transform: translate(-50%, -50%) scale(1.1); }

/* L'icône d'agrandissement dit que la vidéo s'ouvrira en grand, dans la page. */
.demo-agrandir {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; background: #04142b9c; color: #ffffffc4; z-index: 2;
  transition: background var(--ease), color var(--ease);
}
.demo-agrandir svg { width: 12px; height: 12px; }
.demo-cadre:hover .demo-agrandir { background: var(--or); color: var(--navy); }

.demo-legende {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; text-align: center;
  font-size: .82rem; font-weight: 650; color: var(--blanc); letter-spacing: -.005em;
}

/* Sous 1100 px la vignette quitterait le titre : on la range sous la barre. */
@media (max-width: 1100px) {
  .demo { position: static; width: min(272px, 100%); margin: 30px auto 0; }
}

.lecteur[hidden] { display: none; }
.lecteur { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.lecteur-voile { position: absolute; inset: 0; background: #04142bed; backdrop-filter: blur(4px); }
.lecteur-boite { position: relative; width: min(980px, 100%); }
/* Même piège que le voile : `display: block` sur un sélecteur de classe bat le
   `display: none` de [hidden]. Sans cette ligne, le lecteur vide restait à
   l'écran à côté du message expliquant que le fichier manque. */
.lecteur-boite video[hidden] { display: none; }
.lecteur-boite video { width: 100%; display: block; border-radius: var(--r); background: #000;
                       box-shadow: 0 40px 90px -30px #000; }
.lecteur-croix {
  position: absolute; top: -46px; right: 0; width: 34px; height: 34px; cursor: pointer;
  background: #ffffff1c; border: 0; border-radius: 50%; color: var(--blanc); display: grid; place-items: center;
  transition: background var(--ease);
}
.lecteur-croix:hover { background: #ffffff33; }
.lecteur-croix svg { width: 17px; height: 17px; }
.lecteur-absente { margin: 0; padding: 40px 34px; background: var(--navy-700); border-radius: var(--r);
                   color: #ffffffc4; font-size: .92rem; line-height: 1.7; text-align: center; }
.lecteur-absente code { background: #ffffff14; padding: 2px 6px; border-radius: 5px; font-size: .88em; }

@media (prefers-reduced-motion: reduce) { .demo, .demo-faisceau { animation: none; } }

/* ══ Accueil — « ce que nous vérifions » ════════════════════════════════════
   La section était blanche et vide, les trois blocs faisaient bon marché.
   Fond sombre travaillé, cartes en dégradé avec leur vague : le même langage
   que le rapport, sans en reprendre les couleurs — ici on présente, on ne
   juge pas encore. */
.bande.verif { position: relative; overflow: hidden; padding: clamp(58px, 8vw, 96px) 0;
               background: linear-gradient(180deg, #071c33 0%, #04142b 100%); }
.verif-fond {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(38% 42% at 18% 12%, #f5c13d12, transparent 70%),
    radial-gradient(34% 38% at 84% 78%, #2f7ad118, transparent 72%),
    linear-gradient(#ffffff07 1px, transparent 1px),
    linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  mask-image: radial-gradient(ellipse 86% 74% at 50% 42%, #000 10%, transparent 82%);
  animation: derive 34s ease-in-out infinite alternate;
}
.verif-corps { position: relative; }
.verif-chapeau { max-width: 62ch; margin: 1rem auto 0; text-align: center;
                 font-size: 1rem; line-height: 1.75; color: #ffffff9e; }
.filet-legal.clair { color: #ffffff6e; }

.cartes-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 18px; margin-top: clamp(30px, 4vw, 44px); }
.carte {
  position: relative; overflow: hidden; border-radius: var(--r);
  padding: 26px 26px 22px; color: #ffffffd6;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  border: 1px solid #ffffff17;
  transition: transform var(--ease), box-shadow var(--ease);
  animation: leve .62s cubic-bezier(.22, 1, .36, 1) both;
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px #000000b8; }
.carte:nth-child(1) { animation-delay: .04s; }
.carte:nth-child(2) { animation-delay: .11s; }
.carte:nth-child(3) { animation-delay: .18s; }

.bloc-a { --c1: #15365c; --c2: #0a2140; }
.bloc-b { --c1: #113f4f; --c2: #0a2632; }
.bloc-c { --c1: #3c2a4e; --c2: #201735; }

/* La vague reprend le motif du rapport : une continuité visuelle d'un bout à
   l'autre du parcours, sans réutiliser le code couleur du verdict. */
.carte-vague {
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: var(--vague) repeat-x left bottom / 560px 90px;
  opacity: .9; pointer-events: none;
}
.carte > *:not(.carte-vague) { position: relative; }
.carte-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
               margin-bottom: 18px; color: var(--or); background: #ffffff12;
               border: 1px solid #ffffff1a;
               transition: background var(--ease), transform var(--ease); }
.carte-icone svg { width: 23px; height: 23px; }
.carte:hover .carte-icone { background: #f5c13d1f; transform: scale(1.06); }
.carte h3 { margin: 0 0 9px; color: var(--blanc); font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; }
.carte p { margin: 0 0 20px; font-size: .91rem; color: #ffffffa3; line-height: 1.66; }
.carte-pied { display: flex; align-items: center; gap: 9px; padding-top: 15px;
              border-top: 1px solid #ffffff17; font-size: .8rem; color: #ffffff87; }
.carte-pied b { color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-pied i { width: 3px; height: 3px; border-radius: 50%; background: #ffffff38; }

@media (max-width: 880px) { .cartes-trio { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .verif-fond, .carte { animation: none; } }

.bande.verif .titre-clair { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700;
                            letter-spacing: -.03em; margin: .5rem 0 0; }

/* ══ Détail critère par critère ═════════════════════════════════════════════
   C'était un mur de blanc : vingt-deux blocs de texte identiques, sans relief
   et sans hiérarchie. Chaque bloc a maintenant son bandeau et sa jauge, et
   chaque critère est un volet qu'on ouvre — l'état se lit sans lire. */
.groupe { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
          background: var(--blanc); margin-bottom: 14px; }
.groupe-tete {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 15px 20px; color: var(--blanc);
  background: linear-gradient(140deg, var(--g1), var(--g2));
}
.groupe-tete::after { content: ''; position: absolute; inset: 0; pointer-events: none;
                      background: var(--vague) repeat-x left bottom / 560px 90px; }
.groupe-tete > * { position: relative; }
.g-a { --g1: #1d4270; --g2: #0a2140; }
.g-b { --g1: #14505f; --g2: #0a2632; }
.g-c { --g1: #48325c; --g2: #201735; }

.groupe-lettre { flex: none; width: 34px; height: 34px; border-radius: 10px;
                 display: grid; place-items: center; background: #ffffff1f;
                 font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.groupe-nom { flex: 1; min-width: 0; }
.groupe-nom h4 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.groupe-barre { height: 4px; margin-top: 8px; border-radius: 999px; background: #ffffff26; overflow: hidden; }
.groupe-barre span { display: block; height: 100%; border-radius: 999px;
                     background: linear-gradient(90deg, var(--or-fonce), var(--or)); }
.groupe-score { flex: none; font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em;
                font-variant-numeric: tabular-nums; }
.groupe-score small { font-size: .78rem; font-weight: 500; opacity: .72; }

.critere { border-top: 1px solid var(--mist); background: var(--blanc); }
.groupe-corps > .critere:first-child { border-top: 0; }
.critere > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px;
  padding: 13px 20px; transition: background var(--ease);
}
.critere > summary::-webkit-details-marker { display: none; }
.critere > summary:hover, .critere[open] > summary { background: var(--snow); }
.critere > summary:focus-visible { outline: 2px solid var(--navy-500); outline-offset: -2px; }
.critere-puce { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.critere.est-conforme .critere-puce { background: var(--vert); }
.critere.est-partiel .critere-puce { background: var(--ambre); }
.critere.est-absent .critere-puce { background: var(--danger); }
.critere.est-infraction .critere-puce { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-voile); }
.critere-nom { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600;
               color: var(--navy); line-height: 1.45; letter-spacing: -.01em; }
.critere .etat { flex: none; }
.critere-points { flex: none; font-size: .79rem; color: var(--muted);
                  font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.critere[open] .point-chevron { transform: rotate(180deg); }
.critere-corps { padding: 2px 20px 18px 42px; }
.critere-detail { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.6; }
.critere-action { margin-top: 12px; padding: 13px 15px; background: var(--snow);
                  border: 1px solid var(--line); border-radius: 10px;
                  font-size: .89rem; line-height: 1.64; color: var(--body); }
.critere-action b { color: var(--navy); font-weight: 650; }
.critere-produit { margin-top: 9px; font-size: .86rem; color: var(--body); line-height: 1.6; }
.critere-produit .manque { color: var(--danger); }
.critere-preuve { margin: 11px 0 0; padding: 11px 14px; background: var(--mist);
                  border-radius: 10px; font-size: .82rem; line-height: 1.65; color: var(--body); font-style: italic; }
.critere-preuve b { display: block; font-style: normal; font-weight: 650; color: var(--navy);
                    font-size: .76rem; margin-bottom: 4px; letter-spacing: .01em; }

@media (max-width: 560px) {
  .groupe-tete, .critere > summary { padding-inline: 15px; }
  .critere-corps { padding: 2px 15px 16px 15px; }
  .critere .etat { display: none; }
}