@font-face{font-family:'Bricolage';src:url('/polices/bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'SpaceG';src:url('/polices/space.woff2') format('woff2');font-weight:300 700;font-display:swap}
/* Une variable CSS n'est pas admise dans un @font-face : le descripteur
   entier devient invalide et la police perd sa plage de graisses. Un
   ancien remplacement global de « font-weight:400 » avait frappe ici. */
@font-face{font-family:'SpaceGM';src:url('/polices/spacemono.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{
--sans:'SpaceG',ui-sans-serif,system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
--titre:'Bricolage','SpaceG',ui-sans-serif,system-ui,sans-serif;
--mono:'SpaceGM',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
--froid-1:oklch(0.52 0.10 236);--froid-2:oklch(0.44 0.11 240);
--chaud-1:oklch(0.72 0.145 62);--chaud-2:oklch(0.63 0.155 52);--chaud-3:oklch(0.50 0.12 48);
--encre:oklch(0.245 0.02 250);--encre-2:oklch(0.38 0.02 250);--encre-3:oklch(0.52 0.02 250);
--trait-faible:oklch(0.30 0.03 250 / 0.10);--trait:oklch(0.30 0.03 250 / 0.18);--trait-fort:oklch(0.30 0.03 250 / 0.32);
--ton-solide:oklch(0.55 0.13 165);--ton-partiel:oklch(0.60 0.13 80);--ton-critique:oklch(0.55 0.19 28);--ton-inactif:oklch(0.55 0.02 250);
--ton-actif:var(--ton-inactif);
--verre:oklch(1 0 0 / 0.52);--verre-bord:oklch(1 0 0 / 0.65);
--verre-ombre:0 24px 70px oklch(0.30 0.06 250 / 0.16),0 2px 8px oklch(0.30 0.06 250 / 0.08);
--rayon-panneau:26px;
/* Graisses : Bricolage monte à 800, Space Grotesk s'arrête à 700. Quatre
   valeurs suffisent, au lieu des sept qui s'étaient accumulées. */
--g-normal:400;--g-accent:600;--g-fort:700;--g-titre:800;
/* Interlettrage : trois positifs pour les petites capitales, deux négatifs
   pour les grands titres. */
--il-large:0.12em;--il-moyen:0.06em;--il-fin:0.02em;
--il-titre:-0.028em;--il-titre-s:-0.016em;--il-geant:-0.045em;
/* Interlignes : un titre, un compact, un de lecture. */
--ih-titre:1.12;--ih-chiffre:0.9;--ih-compact:1.42;--ih-texte:1.6;
--fil:1px;--cible:48px;
--d1:180ms;--d2:260ms;--d3:400ms;--d4:620ms;
--entree:cubic-bezier(0.22,1,0.36,1);--sortie:cubic-bezier(0.33,0,0.16,1);
/* Rien sous 12 px : en dessous, une petite capitale espacée devient pénible
   à lire, même avec un contraste conforme. */
--tm0:12px;--tm1:12.5px;--tm2:13.5px;--tm3:15px;
--ts1:14px;--ts2:15px;--ts3:16.5px;--ts4:19px;--ts5:24px;--ts6:clamp(25px,3.1vw,35px);
--e0:2px;--e1:4px;--e1b:6px;--e2:8px;--e3:12px;--e4:16px;--e5:22px;--e6:30px;--e7:42px;--e8:56px;
--r1:6px;--r2:12px;--r3:18px;--r4:99px;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:oklch(0.94 0.028 var(--ciel-t,225));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
/* Toute règle de classe portant un display écrase le [hidden] du navigateur :
   sans ceci, masquer un bloc stylé par une classe ne masque rien. */
[hidden]{display:none !important}
button,input{font:inherit;color:inherit}
a{color:var(--froid-1);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--chaud-1);outline-offset:3px;border-radius:var(--r1)}
.evitement{position:absolute;left:-200vw;top:var(--e2);z-index:50;padding:var(--e2) var(--e3);
border-radius:var(--r2);background:var(--encre);color:oklch(1 0 0);font-weight:var(--g-accent);
text-decoration:none}
.evitement:focus{left:var(--e3)}
.oreille{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ─── l'avertissement de sortie ───
   Le navigateur impose son propre texte au rechargement ; pour un clic sur un
   lien de la page, on peut expliquer proprement ce qui est en jeu. */
.quitter{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
justify-content:center;padding:var(--e5);
background:oklch(0.20 0.02 252 / 0.42);backdrop-filter:blur(6px);
animation:fondu var(--d3) linear both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.quitter-b{width:100%;max-width:420px;padding:var(--e5);border-radius:var(--r3);
background:oklch(1 0 0 / 0.94);border:var(--fil) solid var(--verre-bord);
box-shadow:0 24px 60px oklch(0.20 0.03 250 / 0.28);
animation:pousse var(--d3) var(--entree) both}
.quitter-b h2{margin:var(--e2) 0 var(--e3);font-family:var(--titre);font-size:var(--ts4);
font-weight:var(--g-fort);letter-spacing:var(--il-titre-s);line-height:var(--ih-titre);
color:var(--encre)}
.quitter-b p{margin:0 0 var(--e5);font-size:var(--ts1);line-height:var(--ih-texte);
color:var(--encre-2);text-wrap:pretty}
.quitter-a{display:flex;flex-wrap:wrap;gap:var(--e2)}
.quitter-a button{min-height:var(--cible);padding:0 var(--e5);border-radius:var(--r2);
cursor:pointer;font-size:var(--ts2);font-weight:var(--g-accent);border:0}
.q-rester{flex:1 1 160px;background:linear-gradient(180deg,oklch(0.84 0.140 66),
oklch(0.76 0.150 58));color:oklch(0.16 0.03 55);
box-shadow:0 6px 20px oklch(0.46 0.100 52 / 0.30)}
.q-rester:hover{filter:brightness(1.05)}
.q-partir{flex:0 1 auto;background:transparent;color:var(--encre-3);
border:var(--fil) solid var(--trait)}
.q-partir:hover{color:var(--encre);border-color:var(--trait-fort)}

/* ─── coque : ciel figé, grain, deux panneaux de verre ─── */
.racine{position:relative;min-height:100dvh;display:flex;flex-direction:column;
gap:var(--e5);padding:var(--e5);color:var(--encre);font-family:var(--sans);overflow-x:clip}
/* La scène occupe la hauteur de la fenêtre ; le pied se découvre en dessous. */
.scene-app{flex:1;min-height:0;display:flex;align-items:stretch;gap:var(--e5);
height:calc(100dvh - var(--e5) * 2)}
.ciel{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
background:linear-gradient(180deg,
oklch(0.82 0.055 calc(var(--ciel-t) + 10)) 0%,
oklch(0.88 0.045 calc(var(--ciel-t) + 5)) 34%,
oklch(0.94 0.028 var(--ciel-t)) 68%,
oklch(0.965 0.015 calc(var(--ciel-t) - 5)) 100%)}
.ciel i{position:absolute;display:block}
.ciel .n1{left:-30%;top:-6%;width:160%;height:70%;background:
radial-gradient(38% 42% at 22% 42%,oklch(1 0 0 / 0.85) 0%,oklch(1 0 0 / 0.55) 38%,oklch(1 0 0 / 0.18) 66%,transparent 84%),
radial-gradient(30% 34% at 58% 28%,oklch(1 0 0 / 0.75) 0%,oklch(1 0 0 / 0.42) 42%,oklch(1 0 0 / 0.12) 70%,transparent 86%),
radial-gradient(26% 30% at 84% 52%,oklch(1 0 0 / 0.7) 0%,oklch(1 0 0 / 0.34) 44%,transparent 80%)}
.ciel .n2{left:-35%;bottom:-12%;width:170%;height:64%;background:
radial-gradient(34% 40% at 30% 62%,oklch(0.99 0.005 220 / 0.9) 0%,oklch(0.99 0.005 220 / 0.5) 40%,transparent 78%),
radial-gradient(28% 34% at 68% 48%,oklch(0.99 0.008 225 / 0.8) 0%,oklch(0.99 0.008 225 / 0.4) 46%,transparent 82%),
radial-gradient(22% 26% at 90% 70%,oklch(1 0 0 / 0.75) 0%,transparent 76%)}
.ciel .g{inset:0;opacity:0.05;background-image:var(--grain);background-size:220px}
.panneau{position:relative;transform:translateZ(0);isolation:isolate;z-index:1;
border-radius:var(--rayon-panneau);background:var(--verre);border:var(--fil) solid var(--verre-bord);
backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
box-shadow:var(--verre-ombre)}
.menu{flex:0 0 264px;min-height:0;display:flex;flex-direction:column;gap:var(--e6);padding:var(--e6) var(--e5);overflow-y:auto;overscroll-behavior:auto}
/* La marque : le logotype vectorisé, tracé lettre à lettre à l'arrivée, puis
   au survol. Le mot est en contours, il ne dépend pas du chargement d'une fonte. */
.marque{display:flex;flex-direction:column;align-items:center;gap:var(--e2);
padding:var(--e3) 0 var(--e2);text-decoration:none;border-radius:var(--r2);
transition:opacity var(--d2) linear}
.marque:hover{opacity:0.86}
.logotype{width:100%;max-width:158px;height:auto;overflow:visible}
/* Le mot reste en encre : la seule couleur de la marque est le point du
   « i ». Un accent unique se retient mieux qu'un dégradé. */
.logotype .l{fill:var(--encre);stroke:var(--encre);stroke-width:14;
stroke-dasharray:1;stroke-dashoffset:0}
.logotype .l{animation:trace 2.6s var(--entree) 1 both}
.logotype .l0{animation-delay:0s}
.logotype .l1{animation-delay:0.09s}.logotype .l2{animation-delay:0.18s}
.logotype .l3{animation-delay:0.27s}.logotype .l4{animation-delay:0.36s}
.logotype .l5{animation-delay:0.45s}
@keyframes trace{0%{stroke-dashoffset:1;fill:transparent}
42%{stroke-dashoffset:0;fill:transparent}
62%,100%{stroke-dashoffset:0;fill:var(--encre)}}
/* ─── le point du « i » ───
   Il tombe de haut, rebondit sur le fût qu'il écrase au passage, puis se pose.
   C'est le seul élément coloré de la marque : un accent chaud sur une lettre
   d'encre, plutôt qu'un logo bariolé. */
.logotype .pt-i{fill:url(#lg-or);stroke:url(#lg-or);
filter:drop-shadow(0 3px 10px oklch(0.66 0.155 55 / 0.45));
animation:trace-or 2.6s var(--entree) 1 both,chute-pt 2.4s linear 1 both;
animation-delay:0.36s,0.62s;animation-fill-mode:both}
.logotype .fut-i{transform-origin:128px 0px;
animation:trace 2.6s var(--entree) 1 both,impact 2.4s linear 1 both;
animation-delay:0.36s,0.62s}
/* La courbe est portée par chaque segment, pas par l'animation entière : une
   chute accélère (gravité), un rebond monte en décélérant puis retombe en
   accélérant. Une courbe unique appliquée à tout donnait un point qui freine
   avant de tomber, ce qu'aucun objet ne fait. */
@keyframes chute-pt{
  0%{transform:translateY(2600px) scaleY(0.5);opacity:1;
     animation-timing-function:cubic-bezier(0.45,0,0.95,0.4)}
  30%{transform:translateY(0) scaleY(1.28);
      animation-timing-function:cubic-bezier(0.2,0,0.5,1)}
  34%{transform:translateY(0) scaleY(0.74);
      animation-timing-function:cubic-bezier(0.1,0.75,0.35,1)}
  48%{transform:translateY(215px) scaleY(1.08);
      animation-timing-function:cubic-bezier(0.6,0,0.95,0.35)}
  60%{transform:translateY(0) scaleY(0.86);
      animation-timing-function:cubic-bezier(0.1,0.75,0.35,1)}
  70%{transform:translateY(78px) scaleY(1.03);
      animation-timing-function:cubic-bezier(0.6,0,0.95,0.35)}
  79%{transform:translateY(0) scaleY(0.94);
      animation-timing-function:cubic-bezier(0.1,0.7,0.35,1)}
  86%{transform:translateY(22px) scaleY(1.01);
      animation-timing-function:cubic-bezier(0.6,0,0.95,0.4)}
  92%{transform:translateY(0) scaleY(0.98);
      animation-timing-function:cubic-bezier(0.25,1,0.4,1)}
  100%{transform:translateY(0) scaleY(1)}}
@keyframes impact{
  0%,29%{transform:scaleY(1) scaleX(1);animation-timing-function:cubic-bezier(0.2,0,0.4,1)}
  33%{transform:scaleY(0.86) scaleX(1.13);animation-timing-function:cubic-bezier(0.1,0.8,0.3,1)}
  44%{transform:scaleY(1.05) scaleX(0.97);animation-timing-function:linear}
  59%{transform:scaleY(1) scaleX(1);animation-timing-function:cubic-bezier(0.2,0,0.4,1)}
  62%{transform:scaleY(0.94) scaleX(1.05);animation-timing-function:cubic-bezier(0.1,0.8,0.3,1)}
  72%{transform:scaleY(1.02) scaleX(0.99);animation-timing-function:linear}
  80%{transform:scaleY(0.98) scaleX(1.02);animation-timing-function:cubic-bezier(0.25,1,0.4,1)}
  92%,100%{transform:scaleY(1) scaleX(1)}}
/* Les étincelles : trois bouffées, calées sur les trois impacts, d'intensité
   décroissante comme la hauteur de chute. Elles partent du point de contact
   avec le fût, pas du bas de la lettre. */
.etincelle{fill:var(--chaud-1);opacity:0;
animation:etincelle 2.4s linear 1 both;animation-delay:calc(0.62s + var(--t))}
@keyframes etincelle{
  0%,28.5%{opacity:0;transform:translate(0,0) scale(0.3)}
  30%{opacity:0.95;transform:translate(0,0) scale(1)}
  33%{opacity:0.8;animation-timing-function:cubic-bezier(0.2,0.8,0.4,1)}
  42%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0.25)}
  57.5%{opacity:0;transform:translate(0,0) scale(0.25)}
  59%{opacity:0.6;transform:translate(0,0) scale(0.6)}
  68%{opacity:0;transform:translate(calc(var(--dx) * 0.45),calc(var(--dy) * 0.45)) scale(0.18)}
  78%{opacity:0;transform:translate(0,0) scale(0.2)}
  79.5%{opacity:0.32;transform:translate(0,0) scale(0.36)}
  86%{opacity:0;transform:translate(calc(var(--dx) * 0.2),calc(var(--dy) * 0.2)) scale(0.12)}
  100%{opacity:0}}
/* L'onde de choc n'accompagne que le premier contact, le seul qui vient de haut. */
.onde-choc{stroke:var(--chaud-1);stroke-width:7;opacity:0;transform-origin:128px 512px;
animation:onde-choc 2.4s linear 1 both;animation-delay:0.62s}
@keyframes onde-choc{
  0%,29%{opacity:0;transform:scale(0.25)}
  30.5%{opacity:0.5;transform:scale(0.45);animation-timing-function:cubic-bezier(0.15,0.8,0.3,1)}
  40%{opacity:0;transform:scale(1.35)}
  58%{opacity:0;transform:scale(0.25)}
  59.5%{opacity:0.24;transform:scale(0.4);animation-timing-function:cubic-bezier(0.15,0.8,0.3,1)}
  66%{opacity:0;transform:scale(0.95)}
  100%{opacity:0}}
/* Au survol, toute la marque rejoue sa séquence. */
.marque:hover .logotype .l{animation-name:trace}
.marque:hover .logotype .pt-i{animation-name:trace-or,chute-pt}
@keyframes trace-or{0%{stroke-dashoffset:1;fill:transparent}
42%{stroke-dashoffset:0;fill:transparent}
62%,100%{stroke-dashoffset:0;fill:url(#lg-or)}}
.marque:hover .logotype .fut-i{animation-name:trace,impact}
.marque:hover .logotype .etincelle{animation-name:etincelle}
.marque:hover .logotype .onde-choc{animation-name:onde-choc}
.baseline{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-moyen);
text-transform:uppercase;color:var(--encre-2);text-align:center}
.legal{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-fin);color:var(--encre-2)}
.menu nav{display:flex;flex-direction:column;gap:var(--e2)}
/* Le tiroir n'existe que sur petit écran : ici, ses enfants prennent place
   dans la colonne comme s'il n'était pas là. */
.tiroir{display:contents}
.tiroir-cocher,.burger{display:none}
.menu-espace{flex:1}
/* Épinglés au bas de la colonne : elle défile en interne quand la fenêtre
   est basse, et ces deux liens disparaissaient avec le bas de la liste. */
.menu-autres{display:flex;flex-direction:column;gap:var(--e0);position:sticky;bottom:calc(var(--e6) * -1);
margin:0 calc(var(--e5) * -1) calc(var(--e6) * -1);padding:var(--e2) var(--e5) var(--e4);
background:linear-gradient(oklch(0.99 0.004 250 / 0),oklch(0.99 0.004 250 / 0.96) 30%)}
@media (max-height:860px) and (min-width:901px){
  .menu{gap:var(--e4);padding:var(--e4) var(--e4)}
  .marque{padding:var(--e1) 0 0}
  .baseline{display:none}
  .outil-lien{padding:var(--e2) var(--e3)}
  .menu-autres{margin:0 calc(var(--e4) * -1) calc(var(--e4) * -1);padding:var(--e2) var(--e4) var(--e3);
  bottom:calc(var(--e4) * -1)}
}
.menu-autres a{padding:var(--e1) var(--e4);font-size:var(--ts0);color:var(--encre-3);
text-decoration:none;border-radius:var(--r1);transition:color var(--d2) linear}
.menu-autres a:hover{color:var(--encre);text-decoration:underline}
.surtitre{font-family:var(--mono);font-size:var(--tm1);letter-spacing:var(--il-moyen);
text-transform:uppercase;color:var(--encre-2);font-weight:var(--g-fort)}
/* Intertitre à filet : une seule règle pour les quatre sections qui l'emploient. */
.intertitre{display:flex;align-items:center;gap:var(--e3)}
.intertitre:after{content:"";flex:1;height:1px;background:var(--trait-faible)}
/* Un instrument porte son nom et ce qu'il donne, pas un état en capitales.
   « gratuit » seul mentait : l'audit l'est, le diagnostic ne l'est pas.
   Aucune pastille : celui qui est en service se reconnaît à son fond de verre
   et à son encre pleine, les autres restent en retrait. */
/* La pastille dit de quel instrument il s'agit avant qu'on lise son nom.
   Elle double le libelle, elle ne le remplace pas : la couleur seule
   n'apprendrait rien a qui ne la distingue pas. */
.pt-outil{width:7px;height:7px;border-radius:var(--r4);flex:none;
background:var(--o-vif);box-shadow:0 0 0 3px oklch(0.66 0.145 var(--o-teinte) / 0.16)}
.outil-lien.attente .pt-outil{background:var(--encre-3);box-shadow:none;opacity:0.5}
.ol-tete{display:flex;align-items:center;gap:var(--e2)}
.outil-lien{display:flex;flex-direction:column;gap:var(--e0);
padding:var(--e3) var(--e4);border-radius:var(--r2);text-decoration:none;
border:var(--fil) solid transparent;color:var(--encre-3);
transition:background-color var(--d2) linear,border-color var(--d2) linear}
a.outil-lien:hover{background:oklch(1 0 0 / 0.42);border-color:var(--verre-bord)}
.outil-lien.actif{background:linear-gradient(150deg,var(--o-voile),oklch(1 0 0 / 0.72));border-color:var(--o-filet);
box-shadow:0 6px 18px oklch(0.30 0.06 250 / 0.08)}
.outil-lien s{font-size:var(--ts2);font-weight:var(--g-accent);text-decoration:none;
line-height:var(--ih-compact);color:var(--encre-2)}
.outil-lien.actif s{color:var(--encre)}
.outil-lien em{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-fin);
font-style:normal;line-height:var(--ih-compact);color:var(--encre-3)}
.outil-lien.actif em{color:var(--o-texte)}
.menu p{margin:0;font-size:var(--ts1);line-height:var(--ih-compact);color:var(--encre-2)}
.outil{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:clip}
/* Le bandeau porte la teinte de l'instrument ouvert : c'est le premier
   endroit ou l'oeil se pose, et le seul qui reste visible en permanence. */
.bandeau{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
padding:var(--e3) var(--e5);border-bottom:var(--fil) solid var(--o-filet);
background:linear-gradient(180deg,var(--o-voile),transparent);
border-radius:var(--rayon-panneau) var(--rayon-panneau) 0 0}
.bandeau:before{content:"";width:9px;height:9px;border-radius:var(--r4);
background:var(--o-vif);flex:none;margin-right:calc(var(--e2) * -1);
box-shadow:0 0 0 3px oklch(0.66 0.145 var(--o-teinte) / 0.18)}
.bandeau b{font-size:var(--ts2);font-weight:var(--g-accent);color:var(--encre)}
.bandeau b span{margin-left:var(--e3);font-family:var(--mono);font-size:var(--tm0);
letter-spacing:var(--il-large);text-transform:uppercase;color:var(--o-texte);font-weight:var(--g-normal)}
/* Un état en capitales — « PRÊT », « EN COURS » — est un tic de maquette :
   il occupe la place sans rien apprendre. La barre porte plutôt ce que
   l'instrument mesure, puis ce qu'il a trouvé. */
/* Rien à l'accueil : un chiffre annoncé plafonne l'idée qu'on se fait du
   travail. La barre ne parle que quand l'instrument travaille. */
.etat-jeton{display:none;align-items:center;gap:var(--e2);font-size:var(--tm2);
color:var(--encre-2);white-space:nowrap}
[data-etat="audit"] .etat-jeton{display:flex}
.etat-jeton b{font-weight:var(--g-accent);color:var(--encre)}
.pastille{width:9px;height:9px;border-radius:var(--r4);background:var(--ton-actif);
transition:background-color var(--d3) linear}
[data-etat="analyse"]{--ton-actif:var(--froid-1)}
[data-bande="solide"]{--ton-actif:var(--ton-solide)}
[data-bande="partiel"]{--ton-actif:var(--ton-partiel)}
[data-bande="critique"],[data-etat="echec"]{--ton-actif:var(--ton-critique)}
/* La note pilote la couleur, pas la bande : trois paliers pour six lettres
   revenait à peindre A+, A et B du même vert. */
[data-note="ap"]{--ton-actif:oklch(0.54 0.145 162)}
[data-note="a"]{--ton-actif:oklch(0.57 0.140 148)}
[data-note="b"]{--ton-actif:oklch(0.60 0.135 126)}
[data-note="c"]{--ton-actif:oklch(0.64 0.150 88)}
[data-note="d"]{--ton-actif:oklch(0.61 0.165 54)}
[data-note="e"]{--ton-actif:oklch(0.56 0.195 27)}

/* ─── la scène : trois écrans exclusifs, jamais empilés ─── */
.scene{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* Pas d'« overscroll-behavior: contain » : arrivé au bas du panneau, la
   molette doit continuer sur la page pour atteindre le pied de site.
   Sinon il faut viser le ciel entre les blocs pour défiler. */
.ecran{grid-area:1 / 1;min-height:0;overflow-y:auto;
padding:var(--e5);opacity:0;visibility:hidden;transform:translate3d(0,10px,0);
transition:opacity var(--d3) linear,transform var(--d4) var(--sortie),visibility 0s linear var(--d3)}
.ecran.vu{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.ecran::-webkit-scrollbar{width:8px}
.ecran::-webkit-scrollbar-thumb{background:var(--trait);border-radius:var(--r4)}
.dedans{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e6)}
/* Une seule colonne, du début à la fin : le résultat se lit de haut en bas. */
.dedans.audit{max-width:840px;display:flex;flex-direction:column;gap:var(--e4)}
.colonne{display:flex;flex-direction:column;gap:var(--e4);min-width:0}

/* ─── écran 1 : l'accueil ─── */
.titre-bloc{display:flex;flex-direction:column;gap:var(--e3)}
h1{margin:0;font-family:var(--titre);font-size:var(--ts6);font-weight:var(--g-titre);line-height:var(--ih-titre);
letter-spacing:var(--il-titre);color:var(--encre);text-wrap:balance}
h1 em{font-style:normal;position:relative;white-space:nowrap}
h1 em:after{content:"";position:absolute;left:-0.04em;right:-0.04em;bottom:0.04em;height:0.3em;
background:linear-gradient(90deg,oklch(0.86 0.10 72 / 0.55),oklch(0.80 0.145 58 / 0.24));
border-radius:3px;z-index:-1}

/* ─── la saynète ───
   Toutes les classes sont préfixées « cv- » : elles ne peuvent plus entrer en
   collision avec un autre composant de la page (le bandeau des moteurs porte .ia). */
.scene-chat{display:flex;flex-direction:column;gap:var(--e3)}
/* Ancré en haut : la question garde sa place, seule la réponse dessous respire. */
.cv-fil{min-height:186px;display:flex;flex-direction:column;justify-content:flex-start;
gap:var(--e2);padding:var(--e2) var(--e1) var(--e3)}
.cv-msg{margin:0;max-width:min(100%,32em);padding:var(--e3) var(--e4);
font-family:var(--sans);font-size:var(--ts3);font-weight:var(--g-normal);line-height:var(--ih-compact);
letter-spacing:normal;text-wrap:pretty;overflow-wrap:break-word;
transition:background-color var(--d3) linear}
.cv-msg>span{display:block;animation:cv-entre 380ms var(--entree) both}
@keyframes cv-entre{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
/* Le client, à gauche : le verre blanc du reste de la page. */
.cv-msg.cv-client{align-self:flex-start;border-radius:var(--r3) var(--r3) var(--r3) 6px;
background:oklch(1 0 0 / 0.86);border:var(--fil) solid var(--verre-bord);color:var(--encre);
box-shadow:0 8px 22px oklch(0.30 0.06 250 / 0.07),0 1px 0 oklch(1 0 0 / 0.85) inset}
/* L'IA, à droite : le même verre, teinté de l'orange pâle de nos accents.
   Le bleu sur le ciel bleu se noyait. */
.cv-msg.cv-ia{align-self:flex-end;border-radius:var(--r3) var(--r3) 6px var(--r3);
background:oklch(0.935 0.042 74 / 0.88);border:var(--fil) solid oklch(0.72 0.105 62 / 0.30);
color:var(--encre);box-shadow:0 8px 22px oklch(0.55 0.10 58 / 0.14),0 1px 0 oklch(1 0 0 / 0.7) inset}
.cv-msg.cv-pense{padding:var(--e3) var(--e4);border-radius:var(--r3)}
.cv-nom{align-self:flex-end;padding-right:var(--e4);font-family:var(--mono);font-size:var(--tm0);
letter-spacing:var(--il-large);text-transform:uppercase;color:var(--encre-3)}
.cv-nom>span{display:block;animation:cv-entre 300ms var(--entree) both}
.cv-pois{display:flex;gap:var(--e1b);align-items:center;height:0.9em}
.cv-pois i{width:7px;height:7px;border-radius:var(--r4);background:var(--chaud-3);opacity:0.35;
animation:cv-pois 1.2s ease-in-out infinite}
.cv-pois i:nth-child(2){animation-delay:0.16s}.cv-pois i:nth-child(3){animation-delay:0.32s}
@keyframes cv-pois{0%,62%,100%{opacity:0.28;transform:translateY(0)}
31%{opacity:0.9;transform:translateY(-4px)}}
@media (max-width:620px){
  .cv-fil{min-height:230px}
  .cv-msg{font-size:var(--ts2);max-width:100%}
}
.chute{margin:0;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty}
.chute b{color:var(--encre);font-weight:var(--g-accent)}
@media (max-width:620px){
  .fil{min-height:290px}
  .bulle{font-size:var(--ts2);max-width:100%}
}
.chapeau{margin:0;max-width:62ch;font-size:var(--ts3);line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty}

/* la barre d'action */
.action{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end;padding:var(--e4);
background:oklch(1 0 0 / 0.62);border:var(--fil) solid var(--verre-bord);border-radius:var(--r3);
box-shadow:0 12px 34px oklch(0.30 0.06 250 / 0.10),0 1px 0 oklch(1 0 0 / 0.8) inset}
.action .col{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;gap:var(--e2)}
.action label{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-large);
text-transform:uppercase;color:var(--encre-3)}
.champ{width:100%;min-height:var(--cible);padding:var(--e3) var(--e4);background:oklch(1 0 0 / 0.92);
border:var(--fil) solid var(--trait-fort);border-radius:var(--r2);font-family:var(--mono);
font-size:var(--tm3);color:var(--encre);caret-color:oklch(0.63 0.155 var(--o-teinte));
transition:border-color var(--d1) linear,box-shadow var(--d1) linear}
.champ::placeholder{color:var(--encre-3);opacity:0.7}
.champ:hover{border-color:oklch(0.56 0.035 246)}
.champ:focus{outline:none;border-color:oklch(0.66 0.070 232);box-shadow:0 0 0 3px oklch(0.73 0.105 234 / 0.16)}

/* le bouton lame de scan (proposition G) */
.lame{position:relative;overflow:hidden;min-height:var(--cible);padding:0 var(--e6);
border-radius:var(--r2);cursor:pointer;border:var(--fil) solid oklch(0.30 0.03 250 / 0.22);
background:oklch(1 0 0 / 0.96);color:var(--encre);font-size:var(--ts3);font-weight:var(--g-accent);
display:inline-flex;align-items:center;gap:var(--e2);white-space:nowrap;
box-shadow:0 8px 22px oklch(0.30 0.06 250 / 0.13),0 1px 0 oklch(1 0 0 / 0.9) inset;
transition:border-color var(--d1) linear,transform var(--d1) var(--sortie),box-shadow var(--d1) linear}
.lame .balai{position:absolute;top:0;bottom:0;width:42%;pointer-events:none;transform:translateX(-150%);
background:linear-gradient(90deg,transparent,oklch(0.80 0.145 var(--o-teinte) / 0.20) 42%,oklch(0.86 0.10 var(--o-teinte) / 0.34) 56%,transparent)}
/* Le bouton d'action prend la teinte de son instrument, comme le reste. */
.lame:hover{border-color:oklch(0.63 0.155 var(--o-teinte) / 0.55);transform:translateY(-1px);
box-shadow:0 12px 30px oklch(0.46 0.100 var(--o-teinte) / 0.24),0 1px 0 oklch(1 0 0 / 0.9) inset}
.lame:hover .balai{animation:balaie 1.6s cubic-bezier(0.5,0,0.3,1) infinite}
.lame:active{transform:translateY(0)}
.lame[data-occupe]{cursor:progress;border-color:oklch(0.63 0.155 var(--o-teinte) / 0.6)}
.lame[data-occupe] .balai{animation:balaie 900ms linear infinite}
@keyframes balaie{to{transform:translateX(390%)}}
.lame s{text-decoration:none;position:relative}
.fleche{position:relative;transition:transform var(--d2) var(--sortie)}
.lame:hover .fleche{transform:translateX(3px)}

/* l'erreur */
.erreur{display:flex;gap:var(--e3);padding:var(--e4) var(--e5);border-radius:var(--r2);
background:oklch(0.975 0.018 25 / 0.92);border:var(--fil) solid oklch(0.55 0.19 28 / 0.3);
border-left:3px solid var(--ton-critique);animation:pousse var(--d3) var(--entree) both}
@keyframes pousse{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.erreur em{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-large);text-transform:uppercase;
color:var(--ton-critique);font-style:normal;padding-top:var(--e0);white-space:nowrap}
.erreur p{margin:0;font-size:var(--ts2);line-height:var(--ih-compact);color:var(--encre)}

/* ─── la FAQ ───
   Les questions-réponses sont ce qu'une IA reprend le plus volontiers, à une
   condition : qu'elles soient visibles dans la page, pas seulement déclarées
   en JSON-LD. Les deux disent ici exactement la même chose, mot pour mot. */
.faq{display:flex;flex-direction:column;gap:var(--e3)}
.qrs{display:flex;flex-direction:column;border-radius:var(--r3);overflow:hidden;
background:oklch(1 0 0 / 0.55);border:var(--fil) solid var(--verre-bord);
box-shadow:0 8px 22px oklch(0.30 0.06 250 / 0.06)}
.qr+.qr{border-top:var(--fil) solid var(--trait-faible)}
.qr summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
padding:var(--e3) var(--e5);cursor:pointer;list-style:none;
font-size:var(--ts2);font-weight:var(--g-accent);color:var(--encre);line-height:var(--ih-compact);
transition:background-color var(--d2) linear}
.qr summary::-webkit-details-marker{display:none}
.qr summary:hover{background:oklch(1 0 0 / 0.45)}
.chev{position:relative;width:11px;height:11px;flex:none}
.chev:before,.chev:after{content:"";position:absolute;top:5px;left:0;width:11px;height:1.6px;
border-radius:2px;background:var(--encre-3);transition:transform var(--d2) var(--sortie)}
.chev:after{transform:rotate(90deg)}
.qr[open] .chev:after{transform:rotate(0deg)}
.qr[open] summary{color:var(--chaud-3)}
.qr p{margin:0;padding:0 var(--e5) var(--e4);max-width:78ch;font-size:var(--ts1);
line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty;
animation:ouvre var(--d3) var(--sortie) both}

/* ─── le pied de site ───
   Un bloc de verre sur toute la largeur, sous les deux colonnes. Il accueille
   ce qui n'a pas sa place dans l'instrument : les autres outils, les liens
   d'explication et les mentions. */
.pied-site{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
gap:var(--e6) var(--e5);padding:var(--e6) var(--e5);z-index:1}
.pied-col{display:flex;flex-direction:column;gap:var(--e2);min-width:0}
.pied-marque{gap:var(--e3)}
.pied-marque p{margin:0;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2);
max-width:34ch}
.pied-site .legal{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-fin);
color:var(--encre-3);margin-top:auto}
.pied-titre{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-large);
text-transform:uppercase;color:var(--encre-3);margin-bottom:var(--e1)}
.pied-col a{font-size:var(--ts1);color:var(--encre-2);text-decoration:none;
transition:color var(--d1) linear}
.pied-col a:hover{color:var(--chaud-3);text-decoration:underline}


/* ─── le bandeau des moteurs ───
   Vrais logos, alignés sur une hauteur optique commune : un symbole carré et
   un logotype large ne pèsent pas pareil à hauteur égale, d'où les retouches
   par marque. Les marques gardent leurs couleurs ; le survol isole celle
   qu'on regarde et estompe les autres. */
.moteurs{display:flex;flex-direction:column;gap:var(--e2)}
.ruban{position:relative;overflow:hidden;padding:var(--e3) 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ruban .file{display:flex;width:max-content;align-items:center;gap:var(--e8);
animation:defile 46s linear infinite}
.ruban:hover .file{animation-play-state:paused}
@keyframes defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ia{display:inline-flex;align-items:center;gap:var(--e3);white-space:nowrap;
transition:opacity var(--d2) linear,transform var(--d2) var(--entree)}
.ruban:hover .ia{opacity:0.42}
.ruban .ia:hover{opacity:1;transform:scale(1.04)}
.ia img,.ia svg{display:block;flex:none;height:27px;width:auto}
.ia[data-m="mistral"] img{height:21px}
.ia[data-m="gemini"] img{height:25px}
.ia[data-m="grok"] img{height:25px}
.ia[data-m="google"] svg{height:29px}
.ia b{font-size:var(--ts2);font-weight:var(--g-accent);letter-spacing:normal;color:var(--encre)}
.moteurs .note{margin:0;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty}

/* ─── écran 2 : l'analyse ─── */
.tete-audit{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
flex-wrap:wrap}
.tete-audit h2{margin:0;font-family:var(--titre);font-size:var(--ts5);font-weight:var(--g-fort);
letter-spacing:var(--il-titre-s);color:var(--encre)}
/* Le domaine est le sujet du titre, pas une annotation technique : il prend
   la police et le corps du titre, et ne se distingue que par la couleur et la
   graisse. En chasse fixe et deux crans plus bas, il paraissait rapporté. */
.tete-audit .cible{font-family:inherit;font-size:inherit;
font-weight:var(--g-titre);letter-spacing:inherit;color:var(--froid-2)}
.chrono{font-family:var(--mono);font-size:var(--tm1);color:var(--encre-3);font-variant-numeric:tabular-nums}
#avancement{font-weight:600;color:var(--encre-2)}#avancement::after{content:" · "}
/* Le raccordement au site n'est pas une note : il ne rapporte aucun point et
   n'a donc rien à faire dans la pile, où chaque ligne fait bouger le score. */
.raccord{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
padding:var(--e2) var(--e4);border-radius:var(--r2);
background:oklch(1 0 0 / 0.58);border:var(--fil) dashed var(--trait);
font-family:var(--mono);font-size:var(--tm1);color:var(--encre);overflow-wrap:anywhere;
transition:border-color var(--d3) linear,background-color var(--d3) linear}
.raccord em{font-style:normal;font-size:var(--tm0);letter-spacing:var(--il-large);
text-transform:uppercase;color:var(--encre-3)}
.raccord span{flex:1;min-width:0}
.raccord[data-etat="cours"]{border-color:oklch(0.52 0.10 236 / 0.42);
background:oklch(1 0 0 / 0.8)}
.raccord[data-etat="ok"]{border-style:solid;border-color:oklch(0.55 0.13 165 / 0.32)}
.raccord[data-etat="ko"]{border-style:solid;border-color:oklch(0.55 0.19 28 / 0.45);
background:oklch(0.975 0.018 25 / 0.7)}
.pts3{display:inline-flex;gap:var(--e1);align-items:center;margin-left:7px;
transform:translateY(-1px)}
.pts3 i{width:4px;height:4px;border-radius:var(--r4);background:var(--froid-1);opacity:0.3;
animation:pts3 1.15s ease-in-out infinite}
.pts3 i:nth-child(2){animation-delay:0.15s}.pts3 i:nth-child(3){animation-delay:0.3s}
@keyframes pts3{0%,62%,100%{opacity:0.28;transform:translateY(0)}
31%{opacity:1;transform:translateY(-3px)}}
.raccord b{width:8px;height:8px;border-radius:var(--r4);flex:none;background:var(--ton-inactif);
transition:background-color var(--d3) linear}
.raccord[data-etat="cours"] b{background:var(--froid-1);animation:respire 1.5s ease-in-out infinite}
.raccord[data-etat="ok"] b{background:var(--ton-solide)}
.raccord[data-etat="ko"] b{background:var(--ton-critique)}
.raccord[data-etat="ko"]{color:var(--ton-critique)}
.pile{display:flex;flex-direction:column;gap:var(--e1b);min-height:0}
/* Une étape a trois vies : en attente (effacée, sans cadre), en cours (posée
   sur du blanc, traversée d'une lame, avec sa jauge de gestes), close (jeton
   de verdict, preuve et points). L'état se lit dans le JETON de gauche, pas
   dans un filet coloré : un liseré vertical sur chaque ligne fait gabarit. */
.pas{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;
gap:var(--e4);padding:var(--e3) var(--e4);border-radius:var(--r2);
background:transparent;border:var(--fil) solid transparent;overflow:hidden;
transition:background-color var(--d3) linear,border-color var(--d3) linear,
opacity var(--d3) linear,transform var(--d3) var(--sortie),box-shadow var(--d3) linear}
.pas+.pas{margin-top:2px}
.pas[data-statut="attente"]{opacity:0.6;background:oklch(1 0 0 / 0.26);
border-color:oklch(1 0 0 / 0.4)}
.pas[data-statut="cours"]{background:oklch(1 0 0 / 0.94);border-color:oklch(1 0 0 / 0.9);
transform:translateY(-1px);box-shadow:0 14px 32px oklch(0.30 0.06 250 / 0.14),
0 1px 0 oklch(1 0 0 / 0.85) inset}
.pas[data-statut="fini"]{background:oklch(1 0 0 / 0.7);border-color:oklch(1 0 0 / 0.78);
box-shadow:0 4px 14px oklch(0.30 0.06 250 / 0.06),0 1px 0 oklch(1 0 0 / 0.7) inset}
/* le jeton : numéro, puis coche ou croix selon le verdict */
.jeton-pas{position:relative;width:26px;height:26px;flex:none;border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:var(--tm0);font-variant-numeric:tabular-nums;
color:var(--encre-3);background:oklch(0.30 0.03 250 / 0.06);
box-shadow:0 0 0 0 oklch(0.52 0.10 236 / 0.30);
transition:background-color var(--d3) linear,color var(--d3) linear,box-shadow var(--d3) linear}
.pas[data-statut="cours"] .jeton-pas{color:var(--froid-2);
background:oklch(0.73 0.105 234 / 0.16);box-shadow:0 0 0 3px oklch(0.73 0.105 234 / 0.14)}
.pas[data-statut="fini"] .jeton-pas{color:transparent}
.pas[data-statut="fini"][data-verdict="ok"] .jeton-pas{background:oklch(0.55 0.13 165 / 0.16)}
.pas[data-statut="fini"][data-verdict="partiel"] .jeton-pas{background:oklch(0.72 0.15 78 / 0.20)}
.pas[data-statut="fini"][data-verdict="ko"] .jeton-pas{background:oklch(0.62 0.20 28 / 0.14)}
.jeton-pas .marque{position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;opacity:0;transition:opacity var(--d2) linear}
.pas[data-statut="fini"] .jeton-pas .marque{opacity:1}
.jeton-pas .marque svg{width:14px;height:14px}
.pas[data-verdict="ok"] .marque{color:var(--ton-solide)}
.pas[data-verdict="partiel"] .marque{color:var(--ton-partiel)}
.pas[data-verdict="ko"] .marque{color:var(--ton-critique)}
.jeton-pas .marque path{stroke-dasharray:1;stroke-dashoffset:1}
.pas[data-statut="fini"] .marque path{animation:coche-trace 500ms var(--entree) both}
@keyframes coche-trace{to{stroke-dashoffset:0}}
/* la lame de lecture, uniquement sur la ligne en cours */
.pas[data-phase="preuve"] .lame-pas{animation:none;opacity:0;
transition:opacity var(--d2) linear}
.pas .lame-pas{position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
background:linear-gradient(90deg,transparent,oklch(0.73 0.105 234 / 0.13) 46%,
oklch(0.80 0.145 58 / 0.11) 58%,transparent);
animation:traverse 2.1s cubic-bezier(0.45,0,0.3,1) infinite}
@keyframes traverse{from{transform:translateX(-110%)}to{transform:translateX(400%)}}
/* la jauge de gestes : combien reste-t-il à faire dans cette étape */
.pas .jauge{position:absolute;left:0;right:0;bottom:0;height:2px;
background:oklch(0.30 0.03 250 / 0.06)}
.pas .jauge i{display:block;height:100%;width:0;
background:linear-gradient(90deg,oklch(0.73 0.105 234 / 0.5),oklch(0.80 0.145 58 / 0.65));
transition:width var(--d4) linear}
.pas .corps{position:relative;min-width:0;display:flex;flex-direction:column;gap:var(--e0);
padding-top:var(--e0)}
.pas .nom{font-size:var(--ts2);font-weight:var(--g-accent);color:var(--encre);line-height:var(--ih-compact);
transition:color var(--d3) linear}
.pas[data-statut="attente"] .nom{color:var(--encre-2);font-weight:var(--g-normal)}
.pas .dit{font-size:var(--ts1);line-height:var(--ih-compact);color:var(--encre-2);
animation:glisse var(--d3) var(--entree) both}
@keyframes glisse{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
.pas .dit.trouve{display:flex;align-items:baseline;gap:var(--e2);font-family:var(--mono);
font-size:var(--tm1);letter-spacing:var(--il-fin);color:var(--encre);line-height:var(--ih-compact);
overflow-wrap:anywhere}
.pas .dit.trouve b{width:5px;height:5px;border-radius:var(--r4);flex:none;
background:var(--chaud-2);transform:translateY(-2px)}
.pas .preuve{display:flex;align-items:baseline;gap:var(--e2);font-family:var(--mono);
font-size:var(--tm1);line-height:var(--ih-compact);color:var(--encre-2);overflow-wrap:anywhere;
animation:glisse var(--d3) var(--entree) both}
.pas .preuve b{width:5px;height:5px;border-radius:var(--r4);flex:none;
background:var(--ton-inactif);transform:translateY(-2px)}
.pas[data-verdict="ok"] .preuve b{background:var(--ton-solide)}
.pas[data-verdict="partiel"] .preuve b{background:var(--ton-partiel)}
.pas[data-verdict="ko"] .preuve b{background:var(--ton-critique)}
.pas .gain{position:relative;font-family:var(--mono);font-size:var(--tm2);font-weight:var(--g-fort);
padding-top:var(--e0);color:var(--ton-solide);font-variant-numeric:tabular-nums;
white-space:nowrap;opacity:0}
.pas[data-statut="fini"] .gain{animation:gagne 620ms cubic-bezier(0.16,1.1,0.3,1) both}
.pas[data-verdict="ko"] .gain{color:var(--encre-3)}
.pas[data-verdict="partiel"] .gain{color:var(--ton-partiel)}
@keyframes gagne{0%{opacity:0;transform:translate3d(0,12px,0)}
100%{opacity:1;transform:none}}

/* ─── le bilan ───
   Trois partis pris tirés de ce que font les références du domaine :
   1. une NOTE EN LETTRE, comme Mozilla Observatory : un A ou un D se comprend
      avant d'être lu, là où « 62 sur 100 » demande un barème ;
   2. un seul objet dominant, très grand, avec de l'air autour, plutôt que
      trois blocs de poids visuel égal ;
   3. la ventilation en une ligne de segments assumée, sans légende bavarde. */
.bilan{position:relative;display:flex;flex-direction:column;gap:var(--e5);
padding:var(--e5);border-radius:var(--r3);overflow:hidden;
background:oklch(1 0 0 / 0.62);border:var(--fil) solid var(--verre-bord);
box-shadow:0 10px 26px oklch(0.30 0.06 250 / 0.08)}
.bilan:before{content:"";position:absolute;left:-14%;top:-90%;width:76%;height:280%;
border-radius:50%;pointer-events:none;opacity:0;
background:var(--halo,radial-gradient(circle,
  oklch(0.80 0.145 58 / 0.20) 0%,oklch(0.80 0.145 58 / 0.12) 28%,
  oklch(0.80 0.145 58 / 0.045) 50%,oklch(0.80 0.145 58 / 0.012) 66%,
  oklch(0.80 0.145 58 / 0) 78%));
transition:opacity var(--d5) linear}
[data-bande] .bilan:before{opacity:1}
[data-note="ap"]{--halo:radial-gradient(circle,
  oklch(0.60 0.150 162 / 0.23) 0%,oklch(0.60 0.150 162 / 0.135) 28%,
  oklch(0.60 0.150 162 / 0.05) 50%,oklch(0.60 0.150 162 / 0.014) 66%,
  oklch(0.60 0.150 162 / 0) 78%)}
[data-note="a"]{--halo:radial-gradient(circle,
  oklch(0.63 0.145 148 / 0.23) 0%,oklch(0.63 0.145 148 / 0.135) 28%,
  oklch(0.63 0.145 148 / 0.05) 50%,oklch(0.63 0.145 148 / 0.014) 66%,
  oklch(0.63 0.145 148 / 0) 78%)}
[data-note="b"]{--halo:radial-gradient(circle,
  oklch(0.66 0.140 126 / 0.23) 0%,oklch(0.66 0.140 126 / 0.135) 28%,
  oklch(0.66 0.140 126 / 0.05) 50%,oklch(0.66 0.140 126 / 0.014) 66%,
  oklch(0.66 0.140 126 / 0) 78%)}
[data-note="c"]{--halo:radial-gradient(circle,
  oklch(0.72 0.150 88 / 0.23) 0%,oklch(0.72 0.150 88 / 0.135) 28%,
  oklch(0.72 0.150 88 / 0.05) 50%,oklch(0.72 0.150 88 / 0.014) 66%,
  oklch(0.72 0.150 88 / 0) 78%)}
[data-note="d"]{--halo:radial-gradient(circle,
  oklch(0.69 0.165 54 / 0.23) 0%,oklch(0.69 0.165 54 / 0.135) 28%,
  oklch(0.69 0.165 54 / 0.05) 50%,oklch(0.69 0.165 54 / 0.014) 66%,
  oklch(0.69 0.165 54 / 0) 78%)}
[data-note="e"]{--halo:radial-gradient(circle,
  oklch(0.62 0.195 27 / 0.23) 0%,oklch(0.62 0.195 27 / 0.135) 28%,
  oklch(0.62 0.195 27 / 0.05) 50%,oklch(0.62 0.195 27 / 0.014) 66%,
  oklch(0.62 0.195 27 / 0) 78%)}
.bilan-haut{position:relative;display:flex;align-items:center;gap:var(--e6);flex-wrap:wrap}
.note-bloc{display:flex;align-items:baseline;gap:var(--e4);min-width:0}
/* Vers le carnet du domaine : la seule sortie du bilan qui ne soit pas une
   vente. Elle n'apparait qu'une fois la note posee. */
.vers-domaine{display:block;margin-top:var(--e3);font-size:var(--ts1);
font-weight:var(--g-accent);color:var(--o-texte);text-decoration:none}
.vers-domaine:hover{text-decoration:underline}
/* La lettre : le héros typographique. Elle n'existe qu'une fois l'audit clos. */
.note-lettre{font-family:var(--titre);font-size:clamp(62px,7.4vw,98px);font-weight:var(--g-titre);
letter-spacing:var(--il-geant);line-height:var(--ih-chiffre);color:var(--ton-actif);
animation:note-tombe 700ms cubic-bezier(0.16,1.1,0.3,1) both}
@keyframes note-tombe{from{opacity:0;transform:translate3d(0,0.14em,0) scale(0.86)}
to{opacity:1;transform:none}}
.chiffre{display:flex;align-items:baseline;gap:var(--e1b);font-family:var(--titre);
font-weight:var(--g-titre);letter-spacing:var(--il-titre);line-height:var(--ih-chiffre);color:var(--encre);
font-variant-numeric:tabular-nums;font-size:clamp(46px,5.6vw,68px);
transition:font-size var(--d4) var(--sortie),color var(--d4) linear}
.chiffre em{font-family:var(--mono);font-size:var(--tm1);font-weight:var(--g-normal);font-style:normal;
letter-spacing:var(--il-moyen);color:var(--encre-3)}
/* Une fois la note tombée, le nombre lui cède la vedette. */
[data-bande] .chiffre{font-size:clamp(26px,3.4vw,34px);color:var(--encre-2)}
.bilan-dire{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:var(--e2)}
.bilan-dire .bande-nom{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-large);
text-transform:uppercase;color:var(--ton-actif);transition:color var(--d4) linear}
.bilan-dire h3{margin:0;font-family:var(--titre);font-size:var(--ts4);font-weight:var(--g-fort);
letter-spacing:var(--il-titre-s);line-height:var(--ih-titre);color:var(--encre);text-wrap:pretty}
.bilan-dire p{margin:0;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty}
/* La ventilation : une seule ligne de segments proportionnels, sans commentaire. */
.postes{position:relative;display:flex;align-items:flex-start;gap:var(--e1b)}
.poste{display:flex;flex-direction:column;gap:var(--e1b);min-width:0}
.poste .barre{height:10px;border-radius:3px;background:oklch(0.30 0.03 250 / 0.09);
overflow:hidden;position:relative}
.poste .barre i{display:block;height:100%;width:0;border-radius:3px;
background:linear-gradient(90deg,oklch(0.81 0.130 70),oklch(0.69 0.150 55));
transition:width 560ms var(--sortie)}
.poste[data-etat="cours"] .barre{box-shadow:0 0 0 2px oklch(0.73 0.105 234 / 0.32);
animation:respire 1.5s ease-in-out infinite}
@keyframes respire{0%,100%{opacity:0.62}50%{opacity:1}}
.poste[data-etat="ko"] .barre{background:oklch(0.62 0.20 28 / 0.16)}
/* Deux lignes : un segment de 10 % fait 70 px, « Les repères 10/10 » n'y tient pas. */
.poste .lab{display:flex;flex-direction:column;gap:var(--e0);font-family:var(--mono);font-size:var(--tm0);
letter-spacing:var(--il-fin);line-height:var(--ih-compact);color:var(--encre-2);min-width:0;
transition:color var(--d3) linear}
.poste .lab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poste .lab b{font-weight:var(--g-fort);color:var(--trait-fort);font-variant-numeric:tabular-nums}
.poste[data-etat="cours"] .lab{color:var(--froid-2)}
.poste[data-etat="ok"] .lab b{color:var(--ton-solide)}
.poste[data-etat="partiel"] .lab b{color:var(--ton-partiel)}
.poste[data-etat="ko"] .lab b{color:var(--ton-critique)}
@media (max-width:620px){
  .bilan{padding:var(--e5) var(--e4) var(--e4);gap:var(--e5)}
  .bilan-haut{gap:var(--e4)}
  .poste .lab{font-size:var(--tm0);letter-spacing:normal}
}

/* ─── la fiche ───
   Ce que les IA lisent de vous, rendu comme une fiche d'identité : un bloc
   blanc, un nom en tête, des lignes séparées par des filets. La grille à
   fond gris d'avant salissait le verre. */
.fiche{display:flex;flex-direction:column;gap:var(--e3)}
.fiche-carte{border-radius:var(--r3);background:oklch(1 0 0 / 0.74);
border:var(--fil) solid var(--verre-bord);box-shadow:0 10px 26px oklch(0.30 0.06 250 / 0.07);
overflow:hidden}
.fiche-tete img{width:20px;height:20px;border-radius:5px;object-fit:contain;
align-self:center;background:oklch(1 0 0 / 0.6)}
.fiche-tete b{flex:1;min-width:0}
.fiche-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
padding:var(--e3) var(--e4);border-bottom:var(--fil) solid var(--trait-faible);
background:linear-gradient(180deg,oklch(0.97 0.02 74 / 0.5),transparent)}
.fiche-tete b{font-family:var(--titre);font-size:var(--ts4);font-weight:var(--g-fort);
letter-spacing:var(--il-titre-s);color:var(--encre);overflow-wrap:anywhere}
.fiche-tete em{font-family:var(--mono);font-size:var(--tm0);font-style:normal;
letter-spacing:var(--il-large);text-transform:uppercase;color:var(--encre-3);white-space:nowrap}
.fiche dl{margin:0;display:flex;flex-direction:column}
.fiche dl>div{display:grid;grid-template-columns:minmax(104px,0.42fr) 1fr;gap:var(--e3);
align-items:baseline;padding:9px var(--e4)}
.fiche dl>div+div{border-top:var(--fil) solid var(--trait-faible)}
/* Un bandeau gris derrière un texte gris se lit mal et alourdit la carte :
   la section se signale par sa typographie et son filet, pas par un fond. */
.fiche .fiche-gr{display:flex;align-items:center;gap:var(--e3);
padding:var(--e5) var(--e4) var(--e2);background:transparent}
.fiche .fiche-gr:after{content:"";flex:1;height:1px;background:var(--trait-faible)}
.fiche .fiche-gr-t{font-family:var(--mono);font-size:var(--tm0);font-weight:var(--g-fort);
letter-spacing:var(--il-large);text-transform:uppercase;color:var(--encre);white-space:nowrap}
.fiche dl>div:first-child.fiche-gr{padding-top:var(--e3)}
.fiche dl>div.fiche-gr+div{border-top:0}
.fiche dt{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-moyen);
text-transform:uppercase;color:var(--encre-3)}
/* Le bloc « a transmettre » : des morceaux qu'on copie, pas qu'on lit. Le
   texte a coller est en chasse fixe, sur fond plein, avec son bouton. */
.remede{display:flex;flex-direction:column;gap:var(--e3)}
.remede-intro{margin:0;max-width:60ch;font-size:var(--ts1);line-height:var(--ih-texte);
color:var(--encre-2);text-wrap:pretty}
.pieces{display:flex;flex-direction:column;gap:var(--e3)}
.piece{position:relative;display:flex;flex-direction:column;gap:var(--e2);
padding:var(--e4) var(--e5);border-radius:var(--r2);
background:oklch(1 0 0 / 0.62);border:var(--fil) solid var(--verre-bord)}
.piece b{font-size:var(--ts1);font-weight:var(--g-accent);color:var(--encre);
padding-right:5.5em}
.piece pre{margin:0;padding:var(--e3) var(--e4);border-radius:var(--r1);
background:var(--o-voile);border:var(--fil) solid var(--o-filet);
font-family:var(--mono);font-size:var(--tm1);line-height:var(--ih-texte);
color:var(--encre);white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.piece p{margin:0;font-size:var(--ts0);line-height:var(--ih-texte);color:var(--encre-2)}
.piece-copier{position:absolute;top:var(--e3);right:var(--e4);min-height:var(--cible-s,32px);
padding:0 var(--e3);border-radius:var(--r2);cursor:pointer;border:0;
background:var(--o-plein);color:oklch(1 0 0);font-size:var(--ts0);font-weight:var(--g-accent)}
.piece-copier:hover{filter:brightness(1.06)}
.remede-pied{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
.remede-pied .btn-essai{background:var(--ton-solide);color:oklch(1 0 0)}
.remede-dit{font-family:var(--mono);font-size:var(--tm0);color:var(--encre-2)}
.fiche dd{margin:0;font-size:var(--ts2);line-height:var(--ih-compact);color:var(--encre);
overflow-wrap:anywhere}
@media (max-width:620px){
  .fiche dl>div{grid-template-columns:1fr;gap:var(--e0);padding:var(--e3) var(--e4)}
  .fiche-tete{padding:var(--e3) var(--e4)}
}
.apres{display:flex;flex-direction:column;gap:var(--e4);min-width:0;
animation:ouvre var(--d4) var(--sortie) both}
@keyframes ouvre{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.constats-bloc{display:flex;flex-direction:column;gap:var(--e3)}
.constats{display:flex;flex-direction:column;gap:var(--e2)}
.constat{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);padding:var(--e3) var(--e4);
border-radius:var(--r3);background:oklch(1 0 0 / 0.55);border:var(--fil) solid var(--verre-bord);
box-shadow:0 8px 22px oklch(0.30 0.06 250 / 0.06)}
.constat .pic{display:flex;width:34px;height:34px;align-items:center;justify-content:center;
border-radius:10px;flex:none;color:var(--ton-partiel);background:oklch(0.72 0.15 78 / 0.12)}
.constat .pic svg{width:19px;height:19px}
.constat[data-grav="haute"] .pic{color:var(--ton-critique);background:oklch(0.62 0.20 28 / 0.10)}
.constat[data-grav="ok"] .pic{color:var(--ton-solide);background:oklch(0.55 0.13 165 / 0.12)}
.constat b{display:block;font-size:var(--ts3);font-weight:var(--g-accent);color:var(--encre);margin-bottom:var(--e1)}
.constat p{margin:0;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2);text-wrap:pretty}
/* ═══ La scene ═══
   Une scene qui joue seule, sans transition d'etat. La premiere version
   faisait basculer deux panneaux : il fallait un fondu, le fondu laissait un
   trou, et le flou ajoute pour boucher le trou empechait de lire.

   La lecon : ne pas faire disparaitre un etat pour en montrer un autre.
   Une seule scene, un seul fil, et ce qui change change sous les yeux.
   Le cadre reste, la jauge dit ou l'on en est du cycle. */
.cycle{position:relative}
.cy-etats{position:relative}
.cy-tete{position:relative;margin-bottom:var(--e3);
font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-large);
text-transform:uppercase;min-height:1.4em}
.cy-tete span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
animation:cy-nom var(--cycle,14s) linear infinite}
.cy-tete span.cy-b{animation-name:cy-nom-b}
.cy-tete span:before{content:"";display:inline-block;width:7px;height:7px;
border-radius:var(--r4);margin-right:var(--e2);vertical-align:middle}
.cy-tete .cy-a{color:var(--encre-3)}
.cy-tete .cy-a:before{background:var(--encre-3)}
.cy-tete .cy-b{color:var(--o-texte)}
.cy-tete .cy-b:before{background:var(--o-vif)}
@keyframes cy-nom{0%,2%{opacity:0}5%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes cy-nom-b{0%,50%{opacity:0}55%,96%{opacity:1}99%,100%{opacity:0}}

/* Les deux vues de l'accessibilite : un simple fondu croise, sans flou et
   sans temps mort, les deux superposees dans une grille. */
.cy-etats.cy-deux{display:grid;grid-template-columns:minmax(0,1fr)}
.cy-deux .cy-vue{grid-area:1 / 1;min-width:0;
animation:cy-vue-a var(--cycle,14s) ease-in-out infinite}
.cy-deux .cy-vue.cy-b{animation-name:cy-vue-b}
@keyframes cy-vue-a{0%,46%{opacity:1}52%,96%{opacity:0}100%{opacity:1}}
@keyframes cy-vue-b{0%,46%{opacity:0}52%,96%{opacity:1}100%{opacity:0}}

.cy-jauge{height:2px;border-radius:var(--r4);margin-top:var(--e4);
background:oklch(0.30 0.03 250 / 0.08);overflow:hidden}
.cy-jauge i{display:block;height:100%;width:100%;border-radius:var(--r4);
background:linear-gradient(90deg,
oklch(0.74 0.035 var(--o-teinte)) 0%,
oklch(0.68 0.095 var(--o-teinte)) 48%,
var(--o-vif) 100%);
transform-origin:left;animation:cy-jauge var(--cycle,14s) linear infinite}
@keyframes cy-jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Le fil de la narration : toutes les lignes au meme endroit, une seule
   visible a la fois. Une zone vide pendant l'animation, c'est du silence au
   moment ou l'on regarde. */
.na{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--e3);
padding-top:var(--e3);border-top:var(--fil) solid var(--trait-faible);
min-height:4.6em}
.na-l{grid-area:1 / 1;margin:0;font-size:var(--ts1);line-height:var(--ih-texte);
color:var(--encre-2);max-width:62ch;opacity:0;text-wrap:pretty}
.na-l b{color:var(--encre);font-weight:var(--g-accent)}
.na-l.na-ko b{color:var(--ton-critique)}
.na-l.na-ok b{color:var(--ton-solide)}
@media (prefers-reduced-motion:reduce){
.na{display:block}.na-l{opacity:1;animation:none;margin-bottom:var(--e2)}}
.bs-cout{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e4);
padding:var(--e2) var(--e4);border-radius:var(--r2);width:fit-content;
max-width:100%;background:var(--o-voile);border:var(--fil) solid var(--o-filet);
font-size:var(--tm2);line-height:var(--ih-compact);color:var(--encre-2)}
.bs-cout b{font-family:var(--mono);font-weight:var(--g-fort);color:var(--o-texte);
white-space:nowrap}

@media (prefers-reduced-motion:reduce){
.cy-vue,.cy-tete span,.cy-jauge i{animation:none;opacity:1;transform:none}
.cy-etats.cy-deux{display:block}
.cy-tete{display:none}
.cy-jauge{display:none}}

/* ═══ Le sacre ═══
   Cent sur cent est rare : c'est la seule note qui declenche une fete, et
   chaque instrument a la sienne. Une matiere commune, le foil d'une carte a
   collectionner, et quatre motifs, ceux que les vraies cartes emploient :
   le lineaire, le sceau, la glace fendue, les paillettes. Une seule matiere
   fait tenir la famille ; quatre motifs empechent la repetition.
   Rien n'est cree en dessous de cent, rien ne bouge sous mouvement reduit,
   et le bloc est decoratif donc masque aux lecteurs d'ecran : la note, elle,
   est annoncee par la voix.
   --vitesse multiplie toutes les durees. A 1 c'est le rythme normal ; la page
   /fete le passe a 3 pour qu'un detail qui cloche ait le temps d'etre nomme. */
.sacre{
/* Le foil : un seul degrade continu, sans bande ni coupure. Les cinq teintes
   se fondent l'une dans l'autre, c'est ce qui fait « holographique » et non
   « cinq couleurs cote a cote ». */
--foil:linear-gradient(115deg,oklch(0.86 0.13 20),oklch(0.90 0.13 92) 25%,
oklch(0.88 0.12 160) 50%,oklch(0.86 0.12 232) 75%,oklch(0.86 0.13 310));
position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
border-radius:inherit}

/* Le fond commun aux quatre : la carte prend la lumiere en biais. Chaque
   instrument regle son intensite et son nombre de passages, puis pose sa
   signature par dessus. */
.sacre[data-effet]:before{content:"";position:absolute;inset:-20%;opacity:0;
mix-blend-mode:multiply;background:var(--foil);
-webkit-mask-image:linear-gradient(108deg,transparent 34%,#000 50%,transparent 66%);
mask-image:linear-gradient(108deg,transparent 34%,#000 50%,transparent 66%);
-webkit-mask-size:300% 300%;mask-size:300% 300%;
animation:foil calc(2200ms*var(--vitesse,1)) var(--sortie) var(--passes,1) both}
@keyframes foil{0%{opacity:0;-webkit-mask-position:112% 50%;mask-position:112% 50%}
14%{opacity:var(--eclat,0.5)}86%{opacity:var(--eclat,0.5)}
100%{opacity:0;-webkit-mask-position:-12% 50%;mask-position:-12% 50%}}
.sacre[data-effet="holo"]{--passes:2;--eclat:0.85}
.sacre[data-effet="cachet"]{--eclat:0.40}
.sacre[data-effet="verrou"]{--eclat:0.42}
.sacre[data-effet="confetti"]{--eclat:0.36}

/* Visibilite IA : le lineaire. Le motif le plus pur, celui qu'on reconnait au
   premier coup d'oeil sur une holographique. Etre cite par les IA, c'est etre
   la piece rare : elle passe deux fois et garde le reflet blanc pour elle. */
.sacre[data-effet="holo"]:after{content:"";position:absolute;inset:-20%;opacity:0;
mix-blend-mode:screen;
background:linear-gradient(108deg,transparent 42%,oklch(1 0 0/0.9) 50%,transparent 58%);
background-size:300% 300%;
animation:holo-eclat calc(2200ms*var(--vitesse,1)) var(--sortie) 2 both}
@keyframes holo-eclat{0%{opacity:0;background-position:112% 50%}
22%{opacity:0.75}78%{opacity:0.75}
100%{opacity:0;background-position:-12% 50%}}

/* Delivrabilite : le sceau. Le pli recoit son cachet, mais un cachet a
   hologramme, comme un cachet de garantie plutot qu'un tampon d'encre. Il
   tombe de haut, se pose de travers, puis un trait de lumiere le traverse. */
.sacre[data-effet="cachet"] b{position:absolute;top:50%;left:50%;
display:grid;place-items:center;width:8.6em;height:8.6em;border-radius:50%;
overflow:hidden;opacity:0;
font-family:var(--mono);font-size:var(--tm1);font-weight:var(--g-fort);
letter-spacing:var(--il-geant);text-transform:uppercase;
color:oklch(0.28 0.06 var(--o-teinte));
background:var(--foil);background-size:280% 280%;
border:3px solid oklch(0.48 0.14 var(--o-teinte));
box-shadow:0 8px 20px oklch(0.30 0.06 250/0.20);
animation:cachet calc(820ms*var(--vitesse,1)) cubic-bezier(0.2,1.5,0.4,1) calc(240ms*var(--vitesse,1)) both}
@keyframes cachet{0%{opacity:0;transform:translate(-50%,-50%) rotate(-38deg) scale(3.2)}
62%{opacity:0.95}100%{opacity:0.95;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
.sacre[data-effet="cachet"] b:after{content:"";position:absolute;inset:0;opacity:0;
mix-blend-mode:screen;
background:linear-gradient(108deg,transparent 38%,oklch(1 0 0/0.9) 50%,transparent 62%);
background-size:320% 320%;
animation:sceau calc(1000ms*var(--vitesse,1)) var(--sortie) calc(880ms*var(--vitesse,1)) both}
@keyframes sceau{0%{opacity:0;background-position:125% 50%}
26%{opacity:1}74%{opacity:1}100%{opacity:0;background-position:-25% 50%}}
.sacre[data-effet="cachet"] i{position:absolute;top:50%;left:50%;
width:8.6em;height:8.6em;border-radius:50%;opacity:0;
border:2px solid oklch(0.48 0.14 var(--o-teinte));
animation:onde calc(880ms*var(--vitesse,1)) var(--sortie) calc(600ms*var(--vitesse,1)) both}
@keyframes onde{0%{opacity:0.55;transform:translate(-50%,-50%) scale(1)}
100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}

/* Securite : la glace fendue. C'est le motif des hologrammes de garantie, sur
   une carte bancaire ou une piece d'identite : l'hologramme EST le dispositif
   de securite. Trois anneaux de foil se referment, puis les facettes
   prismatiques s'ouvrent une fois. */
.sacre[data-effet="verrou"] i{position:absolute;top:50%;left:50%;
width:7em;height:7em;border-radius:50%;opacity:0;
background:var(--foil);background-size:240% 240%;
-webkit-mask:radial-gradient(circle,transparent 60%,#000 64%);
mask:radial-gradient(circle,transparent 60%,#000 64%);
animation:verrou calc(760ms*var(--vitesse,1)) cubic-bezier(0.2,0.9,0.2,1) both}
.sacre[data-effet="verrou"] i:nth-child(2){animation-delay:calc(140ms*var(--vitesse,1))}
.sacre[data-effet="verrou"] i:nth-child(3){animation-delay:calc(280ms*var(--vitesse,1))}
@keyframes verrou{0%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}
58%{opacity:0.95}100%{opacity:0;transform:translate(-50%,-50%) scale(0.88)}}
.sacre[data-effet="verrou"]:after{content:"";position:absolute;inset:0;opacity:0;
mix-blend-mode:screen;
background:conic-gradient(from 0deg at 50% 50%,
oklch(0.88 0.16 20/0.85),oklch(0.90 0.16 92/0.85),oklch(0.88 0.15 160/0.85),
oklch(0.86 0.15 232/0.85),oklch(0.88 0.16 310/0.85),oklch(0.88 0.16 20/0.85));
-webkit-mask:radial-gradient(circle,#000 6%,transparent 56%);
mask:radial-gradient(circle,#000 6%,transparent 56%);
animation:facettes calc(640ms*var(--vitesse,1)) var(--sortie) calc(900ms*var(--vitesse,1)) both}
@keyframes facettes{0%{opacity:0;transform:rotate(-26deg) scale(0.62)}
34%{opacity:1}100%{opacity:0;transform:rotate(28deg) scale(1.55)}}

/* Les paillettes : le motif retenu pour les quatre instruments. Chaque eclat
   prend une tranche differente du meme foil, tiree au hasard sur tout le
   degrade, donc chacun brille de sa propre couleur sans qu'une seule couleur
   soit ecrite en dur. « --tr » est cette tranche, pas une teinte.
   Le depart est en pourcentage du PARENT, par « left » ; le deplacement est
   en pixels, par translate3d. Un translate en pourcentage se calculerait sur
   la paillette, large de sept pixels, et elle ne traverserait jamais la carte. */
.sacre[data-effet="confetti"] i{position:absolute;top:-9%;
width:7px;height:11px;border-radius:1px;opacity:0;
background:var(--foil);background-size:1200% 1200%;
background-position:calc(var(--tr)*1%) 50%;
box-shadow:0 0 4px oklch(1 0 0/0.5);will-change:transform,opacity;
animation:tombe calc(var(--d)*var(--vitesse,1)) cubic-bezier(0.35,0.1,0.62,1) calc(var(--r)*var(--vitesse,1)) both}
.sacre[data-effet="confetti"] i:nth-child(3n){width:9px;height:9px;border-radius:50%}
.sacre[data-effet="confetti"] i:nth-child(4n){width:5px;height:14px}
@keyframes tombe{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
12%{opacity:1}78%{opacity:1}
100%{opacity:0;transform:translate3d(var(--dx),340px,0) rotate(var(--rot))}}

/* La couronne : au cent sur cent, la bordure du bilan devient le foil, et il
   tourne autour de la carte. Le degrade conique est peint dans la zone de
   bordure seulement (border-box sous padding-box), donc le bilan garde son
   overflow et ses confettis. --tour est une vraie propriete animable. */
@property --tour{syntax:'<angle>';inherits:false;initial-value:0deg}
.bilan.couronne{border:2px solid transparent;
background:linear-gradient(oklch(0.99 0.004 250 / 0.96),oklch(0.99 0.004 250 / 0.96)) padding-box,
conic-gradient(from var(--tour),oklch(0.86 0.13 20),oklch(0.90 0.13 92),oklch(0.88 0.12 160),
oklch(0.86 0.12 232),oklch(0.86 0.13 310),oklch(0.86 0.13 20)) border-box;
box-shadow:0 0 0 1px oklch(1 0 0 / 0.6) inset,0 12px 34px oklch(0.70 0.12 300 / 0.22);
animation:tour calc(5s*var(--vitesse,1)) linear infinite}
@keyframes tour{to{--tour:360deg}}
@media (prefers-reduced-motion:reduce){.sacre{display:none}.bilan.couronne{animation:none}}

/* ═══ Le nuancier des instruments ═══/* ═══ Le nuancier des instruments ═══/* ═══ Le nuancier des instruments ═══/* ═══ Le nuancier des instruments ═══
   Chaque outil porte une teinte, et rien d'autre ne change : la clarte et la
   chroma sont fixes par role, seule la teinte tourne. C'est ce qui fait qu'un
   nuancier categoriel se lit comme une famille et non comme un assortiment.

   Deux niveaux de clarte, parce qu'un seul ne suffit pas : la teinte vive
   plafonne a 3,4:1 sur le fond pale et ne peut donc pas porter de texte. Le
   niveau sombre est cale sur la teinte la plus exigeante du cercle, la
   turquoise, pour qu'aucun outil ne passe sous 4,5:1.

   La couleur ne porte jamais seule une information : la ligne du client est
   aussi la seule en gras, avec son rang chiffre. Huit pour cent des hommes ne
   distinguent pas certaines teintes.

     62  ambre      Visibilite IA, l'audit
   135  vert       Delivrabilite e-mail
   200  turquoise  Hygiene de securite
   300  violet     Accessibilite
   350  framboise  Vitesse du site, a venir
   165  jade       Votre place, dans le rapport du diagnostic complet
   Le fond du site tourne autour de 242 : aucun outil ne s'en approche.
*/
[data-outil]{
  /* --ciel-t est la teinte du fond de page. 225 est celle du bleu d'origine :
     les quatre paliers du degrade s'en deduisent, donc l'audit ne bouge pas
     d'un poil pendant qu'un autre instrument change tout le ciel. */
  --ciel-t:225;
  --o-texte:oklch(0.50 0.125 var(--o-teinte));
  --o-vif:oklch(0.66 0.145 var(--o-teinte));
  --o-voile:oklch(0.965 0.024 var(--o-teinte));
  --o-filet:oklch(0.88 0.048 var(--o-teinte));
  /* Le plein des boutons : cale sur la turquoise, la teinte la plus exigeante,
     pour qu'un libelle blanc tienne 4,5:1 sur les quatre couleurs du cercle.
     A la clarte du « vif », il n'atteignait que 2,8. */
  --o-plein:oklch(0.52 0.125 var(--o-teinte));
  --o-plein-bas:oklch(0.45 0.115 var(--o-teinte));
}
[data-outil="visibilite"]{--o-teinte:62;--ciel-t:225}
[data-outil="courriel"]{--o-teinte:135;--ciel-t:132}
[data-outil="securite"]{--o-teinte:200;--ciel-t:205}
/* 190 turquoise reste attribue a la comparaison, qui vit dans le rapport
   du diagnostic complet. */
[data-outil="place"]{--o-teinte:165;--ciel-t:170}
[data-outil="accessibilite"]{--o-teinte:300;--ciel-t:295}
/* 20 corail : la conformite, la couleur du signal, pale comme les autres. */
[data-outil="conformite"]{--o-teinte:20;--ciel-t:22}
[data-outil="vitesse"]{--o-teinte:350;--ciel-t:345}

/* Le constat gratuit a son propre panneau, clair. Le panneau de vente sombre
   qui le suivait a ete retire : l'offre a 290 euros ne correspond plus au
   modele retenu. Ce panneau est desormais le dernier mot de la page. */
.constat-panneau{position:relative;margin-bottom:var(--e5);padding:var(--e5);
border-radius:var(--r3);
background:linear-gradient(168deg,var(--o-voile),oklch(1 0 0 / 0.72) 62%);
border:var(--fil) solid var(--o-filet);box-shadow:var(--verre-ombre)}
.cp-sur{display:block;font-family:var(--mono);font-size:var(--tm1);
letter-spacing:var(--il-moyen);text-transform:uppercase;color:var(--o-texte);
font-weight:var(--g-fort)}
.cp-titre{margin:var(--e2) 0 var(--e3);font-family:var(--titre);
font-size:clamp(22px,3.1vw,30px);font-weight:var(--g-titre);
letter-spacing:var(--il-geant);line-height:var(--ih-titre);color:var(--encre);
text-wrap:balance;max-width:22ch}
.cp-dit{margin:0 0 var(--e4);font-size:var(--ts3);line-height:var(--ih-texte);
color:var(--encre-2);max-width:54ch;text-wrap:pretty}
.cp-dit b{color:var(--encre);font-weight:var(--g-accent)}
@media (max-width:640px){.constat-panneau{padding:var(--e4)}}
.suite-sur.second{display:block;margin:var(--e6) 0 var(--e3)}
.ap-l.vous{color:var(--s-fort)}
.ap-l.vous b{color:var(--chaud-1);font-weight:var(--g-fort)}
.ap-l.vous .ap-b i{background:linear-gradient(90deg,var(--chaud-2),var(--chaud-1))}
@keyframes barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ─── l'échantillon ───
   Trois questions offertes avant qu'on parle d'argent. Le visiteur constate
   lui-même qu'il n'est pas cité : c'est ce constat qui vend, pas la liste des
   livrables. */
.essai{margin-bottom:var(--e5);padding:var(--e4) var(--e5);border-radius:var(--r2);
background:var(--s-voile);border:var(--fil) solid var(--s-filet)}
.essai .surtitre{color:var(--s-texte)}
.essai .intertitre:after{background:var(--s-filet)}
#f-essai{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-end;
padding-top:0;border-top:0}
.btn-essai{min-height:var(--cible);padding:0 var(--e5);border-radius:var(--r2);
cursor:pointer;background:oklch(1 0 0 / 0.94);color:oklch(0.22 0.03 252);
border:0;font-size:var(--ts2);font-weight:var(--g-accent);white-space:nowrap;
transition:transform var(--d1) var(--sortie),filter var(--d1) linear}
.btn-essai:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-essai:disabled{opacity:0.55;cursor:progress;transform:none}
.essai-note{margin:var(--e3) 0 0;font-family:var(--mono);font-size:var(--tm0);
line-height:var(--ih-compact);color:var(--s-doux)}
.essai-res{margin-top:var(--e4);border-radius:var(--r2);overflow:hidden;
background:var(--s-voile);border:var(--fil) solid var(--s-filet);
animation:pousse var(--d4) var(--entree) both}
.eq{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3);align-items:baseline;
padding:var(--e3) var(--e4);font-size:var(--ts1);line-height:var(--ih-compact);
color:var(--s-texte)}
.eq+.eq{border-top:var(--fil) solid oklch(1 0 0 / 0.08)}
.eq i{width:var(--e1b);height:var(--e1b);border-radius:var(--r4);
transform:translateY(-1px)}
.eq[data-cite="1"] i{background:oklch(0.74 0.13 165)}
.eq[data-cite="0"] i{background:oklch(0.70 0.17 28)}
.eq b{font-family:var(--mono);font-size:var(--tm0);font-weight:var(--g-normal);
white-space:nowrap;color:var(--s-doux)}
.eq[data-cite="0"] b{color:oklch(0.80 0.14 30)}
.eq-bilan{padding:var(--e3) var(--e4);
background:oklch(0.70 0.17 28 / 0.14);border-top:var(--fil) solid oklch(1 0 0 / 0.10);
font-size:var(--ts2);line-height:var(--ih-compact);color:var(--s-fort)}
.eq-bilan b{font-weight:var(--g-accent)}
/* L'offre, sous l'echantillon. A dix-neuf euros il n'y a rien a plaider :
   on dit ce qu'on livre, on donne un champ et un bouton. Le panneau sombre
   qui argumentait pendant deux ecrans vendait un tarif dix fois plus haut. */
.offre{margin-top:var(--e5);padding-top:var(--e4);
border-top:var(--fil) solid var(--o-filet)}
.offre-t{margin:0 0 var(--e2);font-family:var(--titre);font-size:var(--ts3);
font-weight:var(--g-titre);color:var(--encre);text-wrap:balance}
.offre-d{margin:0 0 var(--e3);font-size:var(--ts1);line-height:var(--ih-texte);
color:var(--encre-2);max-width:56ch;text-wrap:pretty}
.offre-l{margin:0 0 var(--e4);padding:0;list-style:none;
display:flex;flex-direction:column;gap:var(--e1)}
.offre-l li{position:relative;padding-left:var(--e4);font-size:var(--ts1);
line-height:var(--ih-compact);color:var(--encre-2)}
.offre-l li:before{content:"";position:absolute;left:0;top:calc(0.56em - 1px);
width:var(--e1b);height:var(--e1b);border-radius:var(--r4);
background:var(--ton-solide)}
#f-mail{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-end}
#f-mail .btn-essai{background:var(--ton-solide);color:oklch(1 0 0)}
/* Deux portes, une seule adresse : le champ est au-dessus des deux cartes,
   chaque carte n'a que son geste. */
.cp-mail{display:flex;flex-direction:column;gap:var(--e2);max-width:440px;margin:0 0 var(--e4)}
.cp-mail label{font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-fin);color:var(--encre-3)}
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--e4);align-items:start}
@media (max-width:620px){.choix{grid-template-columns:minmax(0,1fr)}}
.choix-carte{position:relative;display:flex;flex-direction:column;gap:var(--e3);padding:var(--e4) var(--e5);
border-radius:var(--r3);background:oklch(1 0 0 / 0.62);border:var(--fil) solid var(--verre-bord)}
/* Le payant est l'ancre : un peu plus large, bordure foil discrete, liste
   plus longue avec des coches, actions des deux cartes alignees en bas. */
.choix-carte.payant{padding:var(--e5);border:2px solid transparent;
background:linear-gradient(160deg,oklch(1 0 0 / 0.92),oklch(0.985 0.006 var(--o-teinte) / 0.86)) padding-box,
linear-gradient(140deg,oklch(0.86 0.13 20 / 0.55),oklch(0.90 0.13 92 / 0.55) 25%,oklch(0.88 0.12 160 / 0.55) 50%,
oklch(0.86 0.12 232 / 0.55) 75%,oklch(0.86 0.13 310 / 0.55)) border-box;
box-shadow:0 18px 44px oklch(0.30 0.06 250 / 0.12)}
.choix-carte.payant .choix-tete:after{content:"Le plus complet";position:absolute;right:var(--e4);top:var(--e4);
font-family:var(--mono);font-size:var(--tm0);letter-spacing:var(--il-moyen);text-transform:uppercase;
padding:4px 10px;border-radius:var(--r4);color:var(--encre);
background:linear-gradient(115deg,oklch(0.86 0.13 20 / 0.5),oklch(0.90 0.13 92 / 0.5) 30%,oklch(0.88 0.12 160 / 0.5) 55%,oklch(0.86 0.12 232 / 0.5) 80%,oklch(0.86 0.13 310 / 0.5))}
.choix-l{flex:1}
.choix-carte.payant .offre-l li:before{content:"✓";width:auto;height:auto;border-radius:0;
top:0;font-weight:var(--g-accent);font-size:var(--ts0);
background:linear-gradient(115deg,oklch(0.62 0.16 20),oklch(0.60 0.14 160),oklch(0.58 0.15 300));
-webkit-background-clip:text;background-clip:text;color:transparent}
.choix-btn,#f-mail .btn-essai{width:100%;justify-content:center;display:inline-flex;align-items:center}
#f-mail{margin-top:auto}
.choix-tete{display:flex;flex-direction:column;gap:var(--e0);padding-bottom:var(--e3);
border-bottom:var(--fil) solid var(--trait-faible)}
.choix-sur{font-family:var(--mono);font-size:var(--tm1);letter-spacing:var(--il-moyen);
text-transform:uppercase;color:var(--encre-3)}
.choix-carte.payant .choix-sur{color:var(--o-texte)}
.choix-prix{font-family:var(--titre);font-size:var(--ts6);font-weight:var(--g-titre);
letter-spacing:var(--il-titre);line-height:var(--ih-chiffre);color:var(--encre)}
.choix-sous{font-size:var(--ts0);color:var(--encre-3)}
.choix-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--e1)}
.choix-l li{position:relative;padding-left:var(--e4);font-size:var(--ts1);
line-height:var(--ih-compact);color:var(--encre-2)}
.choix-l li:before{content:"";position:absolute;left:0;top:calc(0.56em - 1px);
width:var(--e1b);height:var(--e1b);border-radius:var(--r4);background:var(--encre-3);opacity:0.6}
.choix-btn{align-self:stretch;margin-top:var(--e2);background:var(--o-plein);color:oklch(1 0 0)}
.constat-panneau:has(#essai) #btn-veille{display:none}
.choix-note{margin:0;font-family:var(--mono);font-size:var(--tm0);line-height:var(--ih-compact);
color:var(--encre-2);min-height:1.2em}
.choix-carte .offre{margin-top:0;padding-top:0;border-top:0;display:flex;flex-direction:column;gap:var(--e3);flex:1}
.choix-carte .offre-t{font-size:var(--ts2)}
.choix-carte .offre-l{margin:0}
.choix-carte #f-mail{margin-top:auto}
.constat-panneau .essai{margin-top:var(--e4)}
/* La suite : trois cartes, une par autre instrument, chacune dans sa teinte.
   L'audit vient de finir, le domaine est encore dans la main du visiteur :
   c'est le moment ou il continue, pas celui ou il cherche un menu. Une carte
   deja mesuree montre son score ; une carte vide donne envie de la remplir. */
.suite-outils{display:flex;flex-direction:column;gap:var(--e3)}
.so-dit{margin:0;max-width:56ch;font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2)}
.so-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e3);align-items:stretch}
.so-carte{position:relative;display:flex;flex-direction:column;
gap:var(--e2);padding:var(--e4);border-radius:var(--r3);
text-decoration:none;color:inherit;overflow:hidden;
background:linear-gradient(160deg,oklch(0.975 0.028 var(--o-teinte)),oklch(1 0 0 / 0.78) 65%);
border:var(--fil) solid var(--o-filet);box-shadow:0 1px 2px oklch(0.30 0.06 250 / 0.05);
transition:transform var(--d2) var(--sortie),box-shadow var(--d2) linear,border-color var(--d2) linear}
.so-carte:before{content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(150deg,oklch(0.92 0.05 var(--o-teinte) / 0.55),oklch(1 0 0 / 0) 60%);
opacity:0;transition:opacity var(--d3) linear;pointer-events:none}
.so-carte:hover,.so-carte:focus-visible{transform:translateY(-3px);border-color:var(--o-vif);
box-shadow:0 14px 34px oklch(0.55 0.12 var(--o-teinte) / 0.22),0 2px 4px oklch(0.30 0.06 250 / 0.06)}
.so-carte:hover:before{opacity:1}
.so-corps{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.so-corps b{font-family:var(--titre);font-size:var(--ts3);font-weight:var(--g-titre);
letter-spacing:var(--il-titre-s);color:var(--encre)}
.so-promesse{font-size:var(--ts0);line-height:var(--ih-compact);color:var(--encre-2)}
.so-etat{margin-top:var(--e1);font-family:var(--mono);font-size:var(--tm0);color:var(--encre-3)}
.so-etat.mesure{display:flex;align-items:baseline;gap:var(--e1b);color:var(--encre-2)}
.so-etat.mesure b{font-family:var(--titre);font-size:var(--ts4);font-weight:var(--g-titre);
letter-spacing:var(--il-geant);color:var(--encre)}
.so-etat.mesure i{font-style:normal;font-family:var(--titre);font-size:var(--ts1);font-weight:var(--g-titre);
color:var(--o-texte)}
.so-va{margin-top:auto;padding-top:var(--e2);font-style:normal;font-size:var(--ts1);
font-weight:var(--g-accent);color:var(--o-texte);transition:transform var(--d2) var(--sortie)}
.so-carte:hover .so-va{transform:translateX(4px)}
.so-carte[hidden]{display:none}
/* L'objet sous le constat : une ligne, un prix, une fleche. */
.constat-objet{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
margin:calc(var(--e2) * -1) 0 var(--e2) calc(30px + var(--e3) + var(--e4));padding:var(--e2) var(--e4);
border-radius:var(--r2);text-decoration:none;color:var(--encre);
background:linear-gradient(150deg,var(--o-voile),oklch(1 0 0 / 0.72));border:var(--fil) solid var(--o-filet);
transition:transform var(--d2) var(--sortie),box-shadow var(--d2) var(--sortie)}
.constat-objet:hover{transform:translateY(-1px);box-shadow:0 8px 22px oklch(0.30 0.06 250 / 0.10)}
.constat-objet span{font-size:var(--ts1);line-height:var(--ih-compact)}
.constat-objet b{flex:none;font-family:var(--mono);font-size:var(--tm1);color:var(--o-texte);white-space:nowrap}
.baro{display:block;margin-top:var(--e1b);font-family:var(--mono);font-size:var(--tm0);
letter-spacing:var(--il-fin);color:var(--encre-3)}
/* L'apercu : les vraies lignes, puis le flou. Ce qui manque se devine. */
.offre-apercu{margin:var(--e3) 0 var(--e4);padding:var(--e3) var(--e4);border-radius:var(--r2);
background:oklch(1 0 0 / 0.6);border:var(--fil) solid var(--verre-bord)}
.offre-apercu b{display:block;margin-bottom:var(--e2);font-family:var(--mono);font-size:var(--tm1);
letter-spacing:var(--il-moyen);text-transform:uppercase;color:var(--o-texte)}
.offre-apercu p{margin:0 0 var(--e1b);font-size:var(--ts1);line-height:var(--ih-texte);color:var(--encre-2)}
.offre-apercu p.flou{filter:blur(4px);user-select:none;pointer-events:none;color:var(--encre-3)}
.offre-garantie{margin:var(--e2) 0 0;font-size:var(--ts0);color:var(--encre-3)}
.bilan-avant{margin:var(--e2) 0 0;font-family:var(--mono);font-size:var(--tm0);color:var(--encre-3)}
@media (max-width:620px){.constat-objet{margin-left:0;flex-wrap:wrap}}
.offre-n{margin:var(--e3) 0 0;font-family:var(--mono);font-size:var(--tm0);
line-height:var(--ih-compact);color:var(--encre-3)}
/* L'essai a demenage sur un panneau clair : ses couleurs etaient toutes
   ecrites pour le fond bleu. On ne redefinit que ce qui depend du fond. */
.essai.clair{background:transparent;border:0;padding:0;margin-bottom:0}
.essai.clair .surtitre{color:var(--encre-2)}
.essai.clair .intertitre:after{background:var(--trait-faible)}
.essai.clair .essai-dit{color:var(--encre-2)}
.essai.clair label{color:var(--encre-3)}
.essai.clair .champ{background:oklch(1 0 0 / 0.92);
border-color:var(--trait-fort);color:var(--encre)}
.essai.clair .champ::placeholder{color:var(--encre-3);opacity:0.7}
.essai.clair .champ:focus{border-color:oklch(0.66 0.070 232);
box-shadow:0 0 0 3px oklch(0.73 0.105 234 / 0.16)}
.essai.clair .btn-essai{background:linear-gradient(180deg,var(--o-plein),var(--o-plein-bas));
color:oklch(0.99 0.004 250)}
.essai.clair .essai-note{color:var(--encre-3)}
.essai.clair .essai-res{background:oklch(1 0 0 / 0.55);
border-color:var(--trait)}
.essai.clair .eq{color:var(--encre-2)}
.essai.clair .eq b{color:var(--encre)}
.essai.clair .eq-bilan{background:oklch(1 0 0 / 0.6);color:var(--encre-2);
border-top-color:var(--trait)}
.essai.clair .eq-bilan b{color:var(--encre)}
.suite form .col{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:var(--e2)}
.suite .champ{background:oklch(1 0 0 / 0.08);border-color:oklch(1 0 0 / 0.22);
color:var(--s-fort)}
.suite .champ::placeholder{color:var(--s-faible)}
.suite .champ:focus{border-color:oklch(0.72 0.145 62 / 0.7);
box-shadow:0 0 0 3px oklch(0.72 0.145 62 / 0.18)}
@media (max-width:620px){
  .suite-corps{padding:var(--e5) var(--e4)}
  .chiffres span{flex:1 1 100%}
  .ap-l{grid-template-columns:auto 1fr;row-gap:var(--e0)}
  .ap-l b{grid-column:2;justify-self:start}
}
/* Reprise : pas un bouton, un retour. La flèche recule et s'allonge au survol,
   le libellé se souligne de gauche à droite. Rien d'autre. */
.rejoue{display:inline-flex;align-items:center;gap:var(--e3);align-self:flex-start;
background:none;border:0;cursor:pointer;padding:var(--e2) 2px;
font-size:var(--ts1);font-weight:var(--g-normal);color:var(--encre-2);
transition:color var(--d2) linear}
.rejoue svg{width:19px;height:15px;flex:none;overflow:visible}
.rejoue .fut{transform-origin:right center;transform:scaleX(0.62);
transition:transform var(--d3) var(--entree),opacity var(--d2) linear;opacity:0.75}
.rejoue .tete{transition:transform var(--d3) var(--entree)}
.rejoue span{position:relative}
.rejoue span:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:right center;
transition:transform var(--d3) var(--entree)}
.rejoue:hover{color:var(--chaud-3)}
.rejoue:hover .fut{transform:scaleX(1);opacity:1}
.rejoue:hover .tete{transform:translateX(-2px)}
.rejoue:hover span:after{transform:scaleX(1);transform-origin:left center}
.rejoue:active .tete{transform:translateX(-4px)}

@media (max-width:900px){
  /* Sur petit écran, le défilement de page reste le plus naturel. */
  .racine{min-height:100dvh;padding:var(--e3);gap:var(--e3)}
  .scene-app{height:auto;flex-direction:column;gap:var(--e3)}
  .outil{overflow:visible}
  .ecran{overflow:visible}
  /* La barre : le logo au centre, le menu derrière un hamburger à gauche.
     Une rangée de six liens ne tient pas, et une rangée qui défile se
     devine mal. Sans script : une case à cocher ouvre le tiroir. */
  .menu{flex:none;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;
  justify-content:center;gap:0;min-height:60px;padding:var(--e2) var(--e7);overflow:visible}
  .baseline{display:none}
  .marque{padding:0}
  .logotype{max-width:112px}
  .tiroir-cocher{display:block;position:absolute;left:var(--e2);top:50%;width:44px;height:44px;
  margin:0;transform:translateY(-50%);opacity:0;z-index:2;cursor:pointer}
  .burger{display:flex;position:absolute;left:var(--e2);top:50%;width:44px;height:44px;
  transform:translateY(-50%);flex-direction:column;justify-content:center;gap:5px;
  padding:0 11px;box-sizing:border-box;border-radius:var(--r2)}
  .burger i{display:block;height:2px;border-radius:2px;background:var(--encre);
  transition:transform var(--d3) var(--sortie),opacity var(--d2) linear}
  .tiroir-cocher:focus-visible ~ .burger{outline:2px solid oklch(0.66 0.145 var(--o-teinte));outline-offset:2px}
  .tiroir-cocher:checked ~ .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .tiroir-cocher:checked ~ .burger i:nth-child(2){opacity:0}
  .tiroir-cocher:checked ~ .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .tiroir{display:none;position:absolute;left:0;right:0;top:calc(100% + var(--e2));z-index:40;
  flex-direction:column;gap:var(--e4);padding:var(--e4);border-radius:var(--rayon-panneau);
  /* Opaque : un tiroir de verre laisse lire la page à travers les liens. */
  background:oklch(0.99 0.004 250);border:var(--fil) solid var(--verre-bord);
  box-shadow:var(--verre-ombre),0 28px 70px -24px oklch(0.30 0.06 250 / 0.35)}
  .tiroir-cocher:checked ~ .tiroir{display:flex;animation:tiroir-ouvre 260ms var(--sortie) both}
  @keyframes tiroir-ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
  .menu nav .surtitre{grid-column:1 / -1}
  .menu .outil-lien{padding:var(--e3)}
  .menu-espace{display:none}
  .menu-autres{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--e2) var(--e4);
  padding-top:var(--e3);border-top:var(--fil) solid var(--trait-faible)}
  .menu-autres a{padding:var(--e1) 0;font-size:var(--ts1)}
  .pied-site{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e5) var(--e4)}
  .pied-marque{grid-column:1 / -1}
  .ecran{padding:var(--e5) var(--e4)}
  .verdict{gap:var(--e4)}
}

/* ─── l'écran d'audit en mode application (mobile seulement) ───
   Sur un téléphone, une liste de six lignes détaillées ne se lit pas pendant
   qu'elle bouge. Les applications de mesure font l'inverse : un cadran unique,
   une ligne qui dit ce qui se passe, une rangée de jalons. Le détail arrive
   après, quand le résultat est tombé. */
.cadran-bloc,.titre-detail{display:none}
.cadran{position:relative;width:min(72vw,268px);aspect-ratio:1;margin:0 auto}
.cadran svg{width:100%;height:100%;display:block;
filter:drop-shadow(0 10px 26px oklch(0.55 0.10 58 / 0.16))}
.c-fond{stroke:oklch(0.30 0.03 250 / 0.09)}
.c-arc{stroke:url(#cad-or);transition:stroke-dashoffset 900ms var(--entree)}
/* L'anneau intérieur ne dit pas la même chose que l'extérieur : celui-ci
   compte les points gagnés, celui-là l'avancement du script. Deux mesures,
   deux couleurs, deux épaisseurs. */
.c-pro-fond{stroke:oklch(0.30 0.03 250 / 0.07)}
.c-pro{stroke:var(--froid-1);opacity:0.75;
transition:stroke-dashoffset 220ms linear}
/* Tant que le serveur n'a pas répondu, l'avancement est inconnu : un arc court
   tourne, au lieu d'afficher une progression qu'on ne connaît pas. */
[data-attente] .c-pro{stroke-dasharray:62 384;stroke-dashoffset:0;
transition:none;transform-origin:100px 100px;
animation:pro-tourne 1.5s linear infinite}
@keyframes pro-tourne{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.cadran:before{content:"";position:absolute;inset:6%;border-radius:50%;
background:radial-gradient(circle,
  oklch(0.80 0.145 58 / 0.17) 0%,oklch(0.80 0.145 58 / 0.10) 32%,
  oklch(0.80 0.145 58 / 0.035) 54%,oklch(0.80 0.145 58 / 0) 72%);
animation:pouls 2.6s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:0.5;transform:scale(0.96)}50%{opacity:1;transform:scale(1.02)}}
[data-bande] .cadran:before{animation:none;opacity:0.8}
.cadran-centre{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:var(--e0);pointer-events:none}
.cadran-centre b{font-family:var(--titre);font-size:clamp(50px,17vw,74px);font-weight:var(--g-titre);
letter-spacing:var(--il-geant);line-height:var(--ih-chiffre);color:var(--encre);font-variant-numeric:tabular-nums}
.cadran-centre em{font-family:var(--mono);font-size:var(--tm0);font-style:normal;
letter-spacing:var(--il-large);text-transform:uppercase;color:var(--encre-3)}
.mob-dit{display:flex;flex-direction:column;align-items:center;gap:var(--e1b);text-align:center;
min-height:52px;padding:0 var(--e3)}
.mob-titre{font-family:var(--titre);font-size:var(--ts3);font-weight:var(--g-fort);
letter-spacing:var(--il-titre-s);color:var(--encre);text-wrap:balance}
.mob-geste{font-family:var(--mono);font-size:var(--tm1);line-height:var(--ih-compact);color:var(--encre-2);
text-wrap:pretty;animation:glisse var(--d3) var(--entree) both}
.jalons{display:flex;align-items:center;justify-content:center;gap:var(--e1b)}
.jalon{width:10px;height:10px;border-radius:var(--r4);background:oklch(0.30 0.03 250 / 0.14);
transition:background-color var(--d3) linear,transform var(--d3) var(--sortie)}
.jalon[data-e="cours"]{background:var(--froid-1);transform:scale(1.5);
animation:respire 1.5s ease-in-out infinite}
.jalon[data-e="ok"]{background:var(--ton-solide)}
.jalon[data-e="partiel"]{background:var(--ton-partiel)}
.jalon[data-e="ko"]{background:var(--ton-critique)}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE
   Les étapes deviennent un stepper vertical : sur un écran étroit, un
   tableau à trois colonnes écrase le texte, alors qu'une file de jetons
   reliés par un fil se lit d'un pouce. Le fil se colore à mesure, comme
   dans une appli de suivi de commande.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .pied-site{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e5) var(--e4);
  padding:var(--e5) var(--e4)}
  .pied-marque{grid-column:1 / -1}

  /* — la barre du haut — */
  .menu{padding:var(--e2) var(--e7)}
  .logotype{max-width:100px}
  .menu .outil-lien s{font-size:var(--ts1)}

  /* — l'accueil — */
  .ecran{padding:var(--e4) var(--e3)}
  .dedans{gap:var(--e5)}
  h1{font-size:clamp(24px,7.4vw,30px)}
  .chapeau{font-size:var(--ts2)}
  .action{padding:var(--e3);gap:var(--e2)}
  .action .col{flex:1 1 100%}
  .lame{width:100%;justify-content:center}
  .ruban .file{gap:var(--e6)}
  .ia b{font-size:var(--ts1)}
  .qr summary{padding:var(--e3) var(--e4);font-size:var(--ts1)}
  .qr p{padding:0 var(--e4) var(--e3)}

  /* — le bilan : la ligne de segments devient une liste lisible — */
  .bilan-haut{gap:var(--e3)}
  .bilan:before{left:-34%;top:-58%;width:150%;height:190%}
  .note-lettre{font-size:clamp(52px,15vw,68px)}
  .chiffre{font-size:clamp(30px,9vw,40px)}
  [data-bande] .chiffre{font-size:var(--ts4)}
  .bilan-dire{flex:1 1 100%}
  .postes{flex-direction:column;gap:var(--e1b);padding-top:var(--e3);
  border-top:var(--fil) solid var(--trait-faible)}
  .poste{flex:none !important;display:grid;
  grid-template-columns:minmax(74px,auto) 1fr auto;align-items:center;gap:var(--e3)}
  .poste .barre{grid-column:2;height:7px}
  .poste .lab{flex-direction:row;align-items:baseline;gap:var(--e1b);font-size:var(--tm0);
  letter-spacing:var(--il-fin);order:-1}
  .poste .lab b{display:none}
  .poste:after{content:attr(data-pts);font-family:var(--mono);font-size:var(--tm0);
  color:var(--encre-3);font-variant-numeric:tabular-nums;white-space:nowrap}
  .poste[data-etat="ok"]:after{color:var(--ton-solide)}
  .poste[data-etat="partiel"]:after{color:var(--ton-partiel)}
  .poste[data-etat="ko"]:after{color:var(--ton-critique)}

  /* — pendant l'audit : le cadran remplace tout le détail — */
  .cadran-bloc{display:flex;flex-direction:column;gap:var(--e4);
  padding:var(--e4) 0 var(--e2)}
  [data-bande] .cadran-bloc{display:none}
  .bilan,.pile{display:none}
  [data-bande] .bilan{display:flex}
  [data-bande] .pile{display:flex}
  [data-bande] .raccord{display:flex}
  .raccord{display:none}
  [data-etat="echec"] .raccord{display:flex}
  .titre-detail{display:block}

  /* — les étapes : stepper vertical à fil conducteur — */
  .pile{position:relative}
  .pas{grid-template-columns:auto 1fr;gap:var(--e3);padding:var(--e3);
  padding-left:var(--e2)}
  .pas+.pas{margin-top:6px}
  /* le fil qui relie un jeton au suivant */
  .pas:not(:last-child):after{content:"";position:absolute;left:calc(var(--e2) + 12px);
  top:38px;bottom:-8px;width:2px;border-radius:2px;background:var(--trait-faible);
  transition:background-color var(--d3) linear}
  .pas[data-statut="fini"]:not(:last-child):after{background:oklch(0.55 0.13 165 / 0.45)}
  .pas[data-verdict="ko"]:not(:last-child):after{background:oklch(0.62 0.20 28 / 0.35)}
  .pas[data-verdict="partiel"]:not(:last-child):after{background:oklch(0.72 0.15 78 / 0.42)}
  .pas .corps{gap:var(--e1b)}
  .pas .nom{font-size:var(--ts1);font-weight:var(--g-accent)}
  /* les points passent sous le titre : une troisième colonne écrase le texte */
  .pas .gain{grid-column:2;grid-row:2;justify-self:start;font-size:var(--tm1);
  padding-top:0;margin-top:2px;padding:2px 8px;border-radius:var(--r4);
  background:oklch(0.55 0.13 165 / 0.12)}
  .pas[data-verdict="partiel"] .gain{background:oklch(0.72 0.15 78 / 0.16)}
  .pas[data-verdict="ko"] .gain{background:oklch(0.30 0.03 250 / 0.07)}
  .pas .dit,.pas .preuve{font-size:var(--tm1)}
  .raccord{padding:var(--e2) var(--e3);font-size:var(--tm0)}
  .raccord em{display:none}

  /* — la suite du rapport — */
  .constat{grid-template-columns:auto 1fr;gap:var(--e3);padding:var(--e3)}
  .constat .pic{width:30px;height:30px}
  .constat b{font-size:var(--ts2)}
  .suite{padding:var(--e4)}
  .suite form .col{flex:1 1 100%}
  .btn-or{width:100%}
  .tete-audit h2{font-size:var(--ts4)}
}
@media (max-width:380px){
  .menu nav{grid-template-columns:1fr}
  .poste{grid-template-columns:minmax(62px,auto) 1fr auto}
  .note-lettre{font-size:clamp(44px,13vw,56px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;
  transition-duration:60ms !important}
}