:root{
  --nuit:#0B0B0C; --nuit-2:#131315; --nuit-3:#1A1A1D;
  --electrique:#FFCE00; --electrique-fonce:#E8B900; --azur:#FFE066; --ambre:#8A6A00;
  --brume:#F0EFEA; --brume-clair:#F7F6F1; --blanc:#FFFFFF;
  --texte:#0B0B0C; --texte-doux:#55534C;
  --texte-inverse:#FFFFFF; --texte-inverse-doux:#BDBBB2;
  --bordure:#E3E1D8; --bordure-sombre:rgba(255,255,255,.16);
  --rayon:14px; --rayon-lg:22px;
  --max:1200px; --gouttiere:clamp(20px,5vw,48px);
  --t-h1:clamp(2.2rem,1.4rem + 3.4vw,4.1rem);
  --t-h2:clamp(1.85rem,1.3rem + 2.2vw,3rem);
  --t-h3:clamp(1.15rem,1.02rem + .55vw,1.4rem);
  --f-base:1.0625rem; --f-sm:.9375rem; --f-xs:.8125rem;
  --f-lg:clamp(1.09rem,.98rem + .45vw,1.28rem);
  /* Telephone : tout descend d un cran, le corps reste a 16 px minimum */
  
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --entete:85px;   /* hauteur de l'en-tête fixe, à dégager sous les sections épinglées */
}
@media (max-width:939px){
  :root{
    --t-h1:clamp(1.8rem,1.55rem + 1.4vw,2rem);
    --t-h2:clamp(1.45rem,1.3rem + .9vw,1.62rem);
    --t-h3:1.05rem;
    --f-base:1rem;
    --f-sm:.875rem;
    --f-xs:.75rem;
    --f-lg:1rem;
  }
  p.chiffre__valeur{font-size:2.7rem}
  .intro__phrase{font-size:clamp(1.5rem,1.2rem + 2vw,1.8rem)}
  .chiffres__oeil{font-size:1.2rem}
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--nuit);color:var(--texte-inverse);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--f-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,p,figure{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--electrique);color:var(--nuit)}
.enveloppe{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}

/* ---------- Sélecteur de version (commun V1 / V2) ---------- */
.bascule{
  position:fixed;right:14px;bottom:14px;z-index:95;display:flex;gap:4px;
  background:rgba(11,11,12,.82);backdrop-filter:blur(10px);
  border:1px solid var(--bordure-sombre);border-radius:999px;padding:4px;
}
.bascule a{
  display:flex;align-items:center;justify-content:center;min-width:46px;min-height:34px;
  border-radius:999px;text-decoration:none;font-size:var(--f-xs);font-weight:700;
  letter-spacing:.06em;color:var(--texte-inverse-doux);transition:background .25s,color .25s;
}
.bascule a.est-active{background:var(--electrique);color:var(--nuit)}
.bascule a:not(.est-active):hover{color:var(--blanc)}

/* ============ Introduction (rideau d'ouverture) ============ */
.intro{
  position:fixed;inset:0;z-index:200;background:var(--nuit);
  display:grid;place-items:center;padding:40px 24px;
}
.intro__lueur{
  position:absolute;left:22%;top:-6%;width:min(1150px,140vw);aspect-ratio:1;transform:translate(-50%,0);
  background:radial-gradient(circle,rgba(255,206,0,.30),rgba(255,206,0,.07) 44%,transparent 70%);
  pointer-events:none;
}
.intro__bloc{position:relative;z-index:2;text-align:center;max-width:760px}
.intro__monogramme{width:clamp(96px,13vw,150px);margin:0 auto 22px}
.intro__mot{font-size:clamp(1.5rem,1rem + 2.2vw,2.35rem);font-weight:700;letter-spacing:.34em;line-height:1;margin-left:.34em}
.intro__mot--group{font-size:clamp(.85rem,.7rem + .7vw,1.15rem);color:var(--electrique);letter-spacing:.52em;margin:10px 0 0 .52em}
.intro__rail{
  position:relative;width:min(420px,72vw);height:2px;background:rgba(255,255,255,.12);
  margin:34px auto 0;overflow:hidden;border-radius:2px;
}
.intro__rail i{position:absolute;inset:0;background:var(--electrique);transform:scaleX(0);transform-origin:0 50%}
.intro__phrase{
  margin-top:clamp(38px,7vh,74px);
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);font-weight:800;letter-spacing:-.025em;line-height:1.12;
}
.intro__phrase b{font-weight:800}
.intro__phrase .accent{color:var(--electrique)}
.intro__ligne{display:block;overflow:hidden}
.intro__ligne > span{display:block}
.intro__passer{
  position:absolute;left:50%;bottom:clamp(28px,6vh,56px);transform:translateX(-50%);
  min-height:44px;padding:0 24px;border-radius:999px;
  background:transparent;border:1px solid var(--bordure-sombre);color:var(--texte-inverse-doux);
  font:inherit;font-size:var(--f-sm);cursor:pointer;transition:color .25s,border-color .25s;
}
.intro__passer:hover{color:var(--blanc);border-color:rgba(255,255,255,.4)}
.intro__passer:focus-visible{outline:3px solid var(--azur);outline-offset:3px}
body.intro-en-cours{overflow:hidden}

/* Quadrillage repris de la V1 */
.hero__quadrillage{
  position:absolute;inset:-20% -10%;
  background-image:linear-gradient(var(--bordure-sombre) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bordure-sombre) 1px,transparent 1px);
  background-size:78px 78px;opacity:.3;
  mask-image:radial-gradient(120% 82% at 42% 40%,#000 18%,transparent 76%);
  will-change:transform;
}

.progression{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90}
.progression span{display:block;height:100%;width:100%;background:var(--electrique);transform:scaleX(0);transform-origin:0 50%}

.entete{
  position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:18px var(--gouttiere);
  border-bottom:1px solid transparent;transition:background .3s,backdrop-filter .3s,border-color .3s;
}
.entete.est-collee{background:rgba(11,11,12,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--bordure-sombre)}
.entete img{height:26px;width:auto;max-width:none}
.entete a[aria-label]{flex:none}
.logo-mono{display:none}
@media (max-width:939px){
  .logo-complet{display:none}
  .logo-mono{display:block;height:30px}
  .entete .bouton{min-height:42px;padding:0 16px;font-size:var(--f-xs)}
}
.nav{display:flex;gap:28px;align-items:center}
.nav a{
  font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--texte-inverse-doux);transition:color .25s;
}
.nav a:hover{color:var(--blanc)}
/* Retour en haut : meme graisse que les autres liens, marque par la couleur */
.nav__retour{color:var(--electrique) !important;display:inline-flex;align-items:center;gap:8px}
.nav__retour::before{content:"↑";font-size:1.1em;line-height:1;transition:transform .25s ease}
.nav__retour:hover::before{transform:translateY(-2px)}
@media (max-width:939px){.nav{display:none}}
/* Menu telephone : les trois sections restent atteignables */
.menu-bouton{
  display:none;width:44px;height:44px;border:1px solid var(--bordure-sombre);border-radius:12px;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex:none;
}
.menu-bouton i{position:relative;display:block;width:18px;height:2px;background:var(--texte-inverse)}
.menu-bouton i::before,.menu-bouton i::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--texte-inverse);transition:transform .25s ease,top .25s ease;
}
.menu-bouton i::before{top:-6px}
.menu-bouton i::after{top:6px}
.menu-bouton[aria-expanded="true"] i{background:transparent}
.menu-bouton[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.menu-bouton[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
.menu-bouton:focus-visible{outline:3px solid var(--azur);outline-offset:3px}
@media (max-width:939px){.menu-bouton{display:inline-flex}}
/* Panneau compact sous la barre, fond opaque : pas de plein ecran */
.menu-mobile{
  position:fixed;left:auto;right:14px;top:calc(var(--entete) - 6px);min-width:246px;z-index:150;
  display:none;flex-direction:column;padding:6px 18px 10px;background:var(--nuit);
  border:1px solid var(--bordure-sombre);border-radius:16px;box-shadow:0 24px 48px rgba(0,0,0,.5);
}
.menu-mobile.est-ouvert{display:flex}
.menu-mobile a{
  padding:13px 2px;border-bottom:1px solid var(--bordure-sombre);text-decoration:none;
  font-size:var(--f-base);font-weight:700;letter-spacing:-.01em;color:var(--texte-inverse);
}
.menu-mobile a:first-child{color:var(--electrique)}
.menu-mobile a:last-child{border-bottom:0}
.menu-mobile .menu-mobile__fermer{display:none}
body.menu-ouvert{overflow:hidden}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;
  border-radius:999px;border:0;background:var(--electrique);color:var(--nuit);
  font:inherit;font-weight:700;font-size:var(--f-sm);text-decoration:none;cursor:pointer;white-space:nowrap;
}
.bouton--fantome{background:transparent;color:var(--texte-inverse);border:1px solid var(--bordure-sombre)}
.bouton:focus-visible{outline:3px solid var(--azur);outline-offset:3px}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px 0 56px;overflow:hidden}
.hero__voile{position:absolute;inset:0;background:radial-gradient(90% 70% at 30% 40%,rgba(255,206,0,.13),transparent 62%)}
.hero__grille{
  display:grid;gap:clamp(34px,5vw,60px);align-items:stretch;position:relative;z-index:2;
}
.hero__grille > div:first-child{align-self:center}
@media (min-width:1000px){.hero__grille{grid-template-columns:1.05fr .95fr}}
.pastille{
  display:inline-flex;align-items:center;gap:10px;font-size:var(--f-xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--texte-inverse-doux);
  border:1px solid var(--bordure-sombre);border-radius:999px;padding:8px 16px;margin-bottom:26px;
}
.pastille i{width:7px;height:7px;border-radius:50%;background:var(--electrique);flex:none}
/* Telephone : la marque sur sa ligne, la mention dessous — pas de repli en colonnes */
@media (max-width:939px){
  .pastille{align-items:flex-start}
  .pastille i{margin-top:5px}
  .pastille__texte{display:flex;flex-direction:column;gap:3px}
  .pastille__tiret{display:none}
}
.hero h1{font-size:var(--t-h1);line-height:1.05;font-weight:800;letter-spacing:-.025em;margin-bottom:24px}
.hero h1 .accent{color:var(--electrique)}
.hero__texte{color:var(--texte-inverse-doux);font-size:var(--f-lg);max-width:52ch;margin-bottom:32px;text-align:justify}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* Flux métier — dispersion puis rassemblement (remplace la console) */
.flux{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#111218,#0D0E12);
  border:1px solid var(--bordure-sombre);border-radius:26px;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;
}
.flux__barre{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--bordure-sombre);background:rgba(255,255,255,.02);
}
.flux__points{display:flex;gap:7px}
.flux__points i{width:9px;height:9px;border-radius:50%;background:var(--bordure-sombre)}
.flux__nom{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--texte-inverse-doux);white-space:nowrap}
.flux__etat{justify-self:end;display:flex;align-items:center;gap:8px;font-size:var(--f-xs);color:var(--texte-inverse-doux)}
.flux__etat i{width:8px;height:8px;border-radius:50%;background:#75E0A7;box-shadow:0 0 12px rgba(117,224,167,.5)}
.flux__corps{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.flux__legende{
  margin:0 0 10px 2px;font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-inverse-doux);
}

.sources{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:4}
.source{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--bordure-sombre);border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .45s ease,box-shadow .45s ease,background .45s ease;
}
.source.est-active{
  border-color:#8A7000;background:rgba(255,206,0,.04);
  box-shadow:0 0 0 1px rgba(255,206,0,.10),0 0 26px rgba(255,206,0,.05);
}
.source__icone{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--bordure-sombre);border-radius:11px;background:#0F1014;
  font-weight:800;font-size:12px;color:#D7D8DD;transition:.45s ease;
}
.source.est-active .source__icone{border-color:#645407;color:#FFF4BA}
.source b{display:block;font-size:var(--f-sm);letter-spacing:-.01em;margin-bottom:2px}
.source span{font-size:var(--f-xs);color:var(--texte-inverse-doux)}

.raccord{position:relative;flex:1;min-height:40px;z-index:2}
.raccord::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);background:var(--bordure-sombre);
}
.raccord__remplissage{
  position:absolute;top:0;left:50%;width:2px;height:100%;transform:translateX(-50%) scaleY(0);
  transform-origin:50% 0;background:linear-gradient(to bottom,#574A13,var(--electrique));
  box-shadow:0 0 10px rgba(255,206,0,.2);
}
.raccord__grain{
  position:absolute;left:50%;top:0;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(255,206,0,.7);
  box-shadow:0 0 0 4px rgba(255,206,0,.04),0 0 16px rgba(255,206,0,.35);opacity:0;
}

.noyau{
  position:relative;z-index:3;padding:16px 16px;border:1px solid #4A4123;border-radius:20px;
  background:linear-gradient(180deg,#14150F,#101114);
  transition:border-color .5s ease,box-shadow .5s ease;
}
.noyau.est-active{
  border-color:#746017;
  box-shadow:0 0 0 1px rgba(255,206,0,.06),0 0 42px rgba(255,206,0,.04);
}
.noyau__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.noyau__oeil{font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-inverse-doux);margin-bottom:6px}
.noyau__titre{margin:0;font-size:clamp(.9rem,.78rem + .45vw,1.08rem);letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
@media (max-width:939px){.noyau__titre{white-space:normal}}
.noyau__mention{
  flex:none;padding:8px 13px;border-radius:999px;border:1px solid #574A08;background:#252105;
  color:#F4E487;font-size:var(--f-xs);font-weight:600;
}
.sortie{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;border:1px solid var(--bordure-sombre);border-radius:14px;background:rgba(255,255,255,.02);
}
.sortie b{display:block;font-size:var(--f-sm);margin-bottom:4px;white-space:nowrap}
@media (max-width:939px){.sortie b{white-space:normal}}
.sortie p{margin:0;font-size:var(--f-xs);color:var(--texte-inverse-doux);line-height:1.5;max-width:34ch}
.sortie__humain{
  flex:none;padding:10px 14px;border-radius:999px;border:1px solid #574800;background:#272100;
  color:#F5E37C;font-size:var(--f-xs);font-weight:700;white-space:nowrap;
}
.flux__pointeur{
  position:absolute;width:20px;height:20px;border:3px solid var(--electrique);border-radius:50%;
  box-shadow:0 0 16px rgba(255,206,0,.35);z-index:10;opacity:0;pointer-events:none;
}
.flux__pointeur::after{
  content:"";position:absolute;inset:-8px;border:1px solid rgba(255,206,0,.25);border-radius:50%;opacity:0;
}
@media (max-width:939px){
  .sources{grid-template-columns:1fr}
  .sortie{flex-direction:column;align-items:flex-start}
  .flux__pointeur{display:none}
}



/* ============ Décor géométrique — test sur la partie claire ============
   Les tracés du fichier d'origine sont pensés pour du fond noir : sur le
   crème, le jaune pur et le blanc disparaissent. Repris en ambre et en
   bordure claire, avec des opacités relevées. */
.constat{position:relative;overflow:hidden}
.decor{
  position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:440px;height:620px;pointer-events:none;z-index:0;
}
@media (max-width:1180px){.decor{display:none}}
.decor__cercle{
  position:absolute;right:70px;top:0;width:320px;height:320px;border-radius:50%;
  border:1px solid rgba(138,106,0,.38);
}
.decor__cercle::before{
  content:"";position:absolute;left:20%;top:20%;width:60%;height:60%;
  border-radius:50%;border:1px solid rgba(138,106,0,.16);
}
.decor__satellite{
  position:absolute;left:50%;top:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--electrique);box-shadow:0 0 0 4px rgba(255,206,0,.18),0 0 18px rgba(138,106,0,.35);
}
.decor__carre{
  position:absolute;right:110px;bottom:20px;width:280px;height:280px;
  border:1px solid rgba(11,11,12,.13);transform:rotate(14deg);
}
.decor__ligne{
  position:absolute;right:-80px;top:52%;width:480px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(138,106,0,.15),rgba(138,106,0,.6));
  transform:rotate(-34deg);
}
.decor__points{
  position:absolute;right:10px;bottom:0;width:110px;height:110px;opacity:.55;
  background-image:radial-gradient(rgba(11,11,12,.32) 1px,transparent 1px);
  background-size:10px 10px;
}
.constat .enveloppe{position:relative;z-index:1}

/* ============ Quadrillage de fond, parties sombres uniquement ============ */
.quadrille{position:relative}
.quadrille::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--bordure-sombre) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bordure-sombre) 1px,transparent 1px);
  background-size:78px 78px;
  opacity:.22;
  /* effacé au centre : la grille encadre la lecture, elle ne la traverse pas */
  mask-image:radial-gradient(115% 78% at 50% 50%,transparent 26%,#000 88%);
  -webkit-mask-image:radial-gradient(115% 78% at 50% 50%,transparent 26%,#000 88%);
}
.quadrille > *{position:relative;z-index:1}

/* ============ Bandeau ============ */
.bandeau{background:var(--electrique);color:var(--nuit);padding:15px 0;overflow:hidden;white-space:nowrap}
.bandeau__piste{display:inline-flex;gap:44px}
.bandeau__piste span{font-size:var(--f-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;gap:44px}
.bandeau__piste span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--nuit);opacity:.5}

/* ============ Constat ============ */
.constat{background:var(--brume-clair);color:var(--texte);padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,116px)}
.oeil{font-size:var(--f-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ambre);margin-bottom:20px}
.constat h2{font-size:var(--t-h2);line-height:1.1;font-weight:800;letter-spacing:-.02em;max-width:20ch;margin-bottom:20px}
/* 52ch et non 62 : le décor occupe la droite de la section */
.constat__intro{color:var(--texte-doux);max-width:52ch;font-size:var(--f-lg);margin-bottom:clamp(44px,6vw,74px)}
/* Trois lignes, pas trois cartes : le hero a déjà montré la dispersion,
   ici on nomme les conséquences sans refaire l'inventaire. */
.cartes{display:grid;gap:0;border-top:1px solid var(--bordure);max-width:820px}
.carte{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--bordure);
}
@media (min-width:760px){.carte{grid-template-columns:auto 22ch 1fr;gap:28px}}
.carte__num{font-family:var(--mono);font-size:var(--f-sm);color:var(--ambre);margin:0}
.carte h3{font-size:var(--f-base);font-weight:700;line-height:1.35;margin:0}
.carte p{color:var(--texte-doux);font-size:var(--f-sm);margin:0;text-align:justify}

/* ============ Chaîne de travail épinglée ============ */
.chaine{background:var(--nuit);position:relative}
.chaine__panneau{min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--entete) + clamp(16px,2.4vh,28px)) 0 clamp(16px,2.4vh,28px)}
@media (max-width:939px){.chaine__panneau{min-height:0;align-items:flex-start;padding:clamp(64px,10vw,96px) 0 clamp(40px,7vw,64px)}}
/* stretch : la carte s'étire à la hauteur de la colonne de gauche,
   les deux colonnes sont donc calées en haut comme en bas. */
.chaine__grille{display:grid;gap:clamp(30px,5vw,58px);align-items:stretch}
@media (min-width:1000px){.chaine__grille{grid-template-columns:.85fr 1.15fr}}
.chaine h2{font-size:var(--t-h2);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.chaine .oeil{color:var(--electrique)}
.chaine__intro{color:var(--texte-inverse-doux);max-width:44ch}
.etapes{display:grid;gap:12px;margin-top:30px}
.etape{
  display:flex;gap:14px;align-items:flex-start;padding:11px 16px;border-radius:var(--rayon);
  border:1px solid transparent;transition:border-color .35s,background .35s,opacity .35s;opacity:.45;
  width:100%;text-align:left;font:inherit;color:inherit;background:none;cursor:pointer;
}
.etape:hover{opacity:.75}
.etape:focus-visible{outline:3px solid var(--azur);outline-offset:3px;opacity:1}
.etape.est-active{opacity:1;background:rgba(255,255,255,.04);border-color:var(--bordure-sombre)}
.etape__pastille{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--bordure-sombre);font-family:var(--mono);font-size:11px;color:var(--texte-inverse-doux);
  transition:background .35s,color .35s,border-color .35s;
}
.etape.est-active .etape__pastille{background:var(--electrique);color:var(--nuit);border-color:var(--electrique)}
.etape b{display:block;font-size:var(--f-sm);font-weight:700}
.etape span{font-size:var(--f-xs);color:var(--texte-inverse-doux)}

.chaine__droite{display:flex;flex-direction:column;height:100%}
.ecran{
  background:linear-gradient(180deg,var(--nuit-2),#0F0F11);border:1px solid var(--bordure-sombre);
  border-radius:var(--rayon-lg);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);
  flex:1;display:flex;flex-direction:column;
}
.ecran__barre{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--bordure-sombre)}
.ecran__barre b{font-size:var(--f-sm);font-weight:700}
.ecran__etat{font-family:var(--mono);font-size:11px;color:var(--electrique);display:flex;align-items:center;gap:8px}
.ecran__etat i{width:7px;height:7px;border-radius:50%;background:var(--electrique)}
.ecran__corps{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}
.champ{border:1px solid var(--bordure-sombre);border-radius:10px;padding:14px 16px;background:rgba(255,255,255,.02);
  flex:1;min-height:78px;display:flex;flex-direction:column;justify-content:center}
.champ small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-inverse-doux);margin-bottom:5px}
.champ p{font-size:var(--f-sm);white-space:pre-line}
.champ.est-remplie{border-color:rgba(255,206,0,.4)}
.actions-ecran{display:flex;gap:12px;margin-top:16px}
.faux-bouton{
  flex:1;text-align:center;padding:14px;border-radius:12px;font-size:var(--f-sm);font-weight:700;
  border:1px solid var(--bordure-sombre);color:var(--texte-inverse-doux);
}
.faux-bouton--valider{background:var(--electrique);color:var(--nuit);border-color:var(--electrique)}

/* ============ 80/20 — trois compteurs ============ */
.chiffres{
  background:var(--nuit);color:var(--texte-inverse);
  /* Le bloc suivant est épinglé sur 100svh et centre son contenu : il
     apporte déjà ~280px de vide en haut. On ne rajoute donc presque rien. */
  padding:clamp(56px,7vw,88px) 0 clamp(16px,2vw,28px);
  border-top:1px solid var(--bordure-sombre);
  position:relative;overflow:hidden;
}
.chiffres::before{
  content:"";position:absolute;left:50%;top:-40%;width:min(1000px,120vw);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,206,0,.10),transparent 62%);pointer-events:none;
}
.chiffres__contenu{position:relative;z-index:2;text-align:center}
/* Même position et même graisse que « Le constat » et « L'outil au travail » :
   calé à gauche de la colonne, pas centré avec le reste du bloc. */
.chiffres__titre{
  text-align:left;
  font-size:var(--f-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--electrique);margin-bottom:clamp(40px,5vw,60px);
}
.chiffres__oeil{
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem);font-weight:800;letter-spacing:-.02em;
  color:var(--blanc);margin-bottom:16px;
}
.chiffres__chute{
  max-width:52ch;margin:0 auto clamp(46px,6vw,74px);
  padding-bottom:clamp(30px,4vw,44px);border-bottom:1px solid var(--bordure-sombre);
  font-size:var(--f-lg);color:var(--texte-inverse-doux);
}
.chiffres__grille{display:grid;gap:clamp(42px,5vw,32px);grid-template-columns:1fr}
@media (min-width:760px){.chiffres__grille{grid-template-columns:repeat(3,1fr);gap:32px}}
/* Classe portée directement par le <p> : sinon « .chiffre p » (la
   description) l'emporte en spécificité et écrase la taille. */
p.chiffre__valeur{
  font-size:clamp(3.8rem,2.2rem + 6vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.95;
  color:var(--electrique);margin-bottom:16px;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;justify-content:center;gap:.12em;
}
.chiffre__valeur .unite{font-size:.42em;letter-spacing:0}
.chiffre__valeur .compteur{display:inline-block;will-change:transform}
.chiffre h3{font-size:var(--t-h3);font-weight:700;margin-bottom:10px}
.chiffre__texte{color:var(--texte-inverse-doux);font-size:var(--f-sm);max-width:34ch;margin-inline:auto}
.chiffres__chute b{color:var(--blanc);font-weight:700}

/* ============ 80/20 — la ligne se sépare (reprise de la V Lenis) ============ */
.separation{background:var(--nuit);color:var(--texte-inverse);position:relative}
.separation__panneau{display:flex;align-items:center;overflow:hidden;padding:clamp(72px,9vw,116px) 0}
.separation__grille{display:grid;gap:clamp(34px,5vw,56px);align-items:center;width:100%}
@media (min-width:940px){.separation__grille{grid-template-columns:1fr 1.05fr}}
.separation h2{font-size:var(--t-h2);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:16px 0 18px}
.separation h2 .accent{color:var(--electrique)}
.separation .oeil{color:var(--electrique)}
/* ---- Jauge de responsabilite : la frontiere se deplace ---- */
.jauge__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.jauge__etat{font-size:var(--f-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-inverse-doux)}
.jauge__mesures{display:flex;gap:32px}
.mesure{text-align:right}
.mesure small{display:block;font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-inverse-doux);margin-bottom:6px}
.mesure b{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mesure--machine b{color:var(--electrique)}
.mesure--humain b{color:var(--blanc)}

.jauge{position:relative;height:118px;border:1px solid var(--bordure-sombre);background:rgba(255,255,255,.01);overflow:hidden}
.jauge__legende{position:absolute;top:18px;font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-inverse-doux)}
.jauge__legende--gauche{left:26px}
.jauge__legende--droite{right:26px}
.jauge__legende--gauche b{color:var(--electrique);font-weight:700}
.jauge__legende--droite b{color:var(--blanc);font-weight:700}
.jauge__piste{position:absolute;left:26px;right:26px;top:50%;transform:translateY(-50%);height:32px;border:1px solid var(--bordure-sombre);background:#101115;overflow:hidden}
.jauge__machine{position:absolute;left:0;top:0;bottom:0;width:80%;background:var(--electrique)}
.jauge__humain{position:absolute;right:0;top:0;bottom:0;width:20%;background:var(--brume)}
.jauge__frontiere{
  position:absolute;top:50%;left:calc(26px + 80% - 52px * .8);width:1px;height:64px;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.28);
}
.jauge__frontiere::before{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--nuit);border:2px solid var(--electrique);
}
.minuterie{margin-top:14px;height:2px;background:var(--bordure-sombre);overflow:hidden}
.minuterie i{display:block;height:100%;width:100%;background:var(--electrique);transform:scaleX(0);transform-origin:0 50%}
.minuterie.est-figee{opacity:0}

.niveaux{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.niveau{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;cursor:pointer;
  padding:15px 0 15px 19px;border:0;border-left:2px solid var(--bordure-sombre);
  opacity:.32;transition:opacity .35s ease,border-color .35s ease;
}
.niveau:hover{opacity:.7}
.niveau:focus-visible{outline:3px solid var(--azur);outline-offset:3px}
.niveau b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.013em}
.niveau i{font-style:normal;font-size:var(--f-sm);color:var(--texte-inverse-doux)}
.niveau.est-active{opacity:1;border-left-color:var(--electrique)}
.detail{background:#0E0E10;border:1px solid var(--bordure-sombre);border-radius:18px;padding:26px 24px;margin-top:24px}
.detail__cle{font-size:var(--f-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--electrique);margin-bottom:13px}
.detail ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.detail li{padding-left:21px;position:relative;color:var(--texte-inverse-doux);font-size:var(--f-sm);line-height:1.5}
.detail li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border:1.5px solid var(--electrique);border-radius:2px}
.detail__note{margin-top:18px;font-size:var(--f-sm);color:var(--texte-inverse-doux);opacity:.75;line-height:1.5}

/* ============ Contact — bloc d'origine du site ============ */
.contact{background:var(--nuit);padding:clamp(72px,9vw,116px) 0;position:relative;overflow:hidden}
.contact__halo{position:absolute;left:50%;top:130%;width:min(900px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,206,0,.18),transparent 62%)}
.contact__grille{position:relative;z-index:2;display:grid;gap:clamp(38px,5vw,64px);align-items:start}
@media (min-width:1000px){
  .contact__grille{grid-template-columns:.92fr 1.08fr}
  .formulaire{grid-column:2;grid-row:1 / span 2}
  .contact__coord{grid-column:1;align-self:start}
}
.contact .oeil{color:var(--electrique);display:flex;align-items:center;gap:14px}
.contact .oeil::before{content:"";width:34px;height:2px;background:var(--electrique);flex:none}
.contact h2{font-size:var(--t-h2);line-height:1.08;font-weight:800;letter-spacing:-.025em;margin-bottom:20px}
.contact__intro{color:var(--texte-inverse-doux);font-size:var(--f-lg);margin-bottom:34px;max-width:52ch;text-align:justify}
.promesses{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.promesses li{display:flex;gap:14px;align-items:flex-start;font-size:var(--f-sm);color:var(--texte-inverse-doux)}
.promesses svg{width:16px;height:16px;flex:none;margin-top:5px}
.promesses path{fill:none;stroke:var(--electrique);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Réglé pour que le bas de la colonne arrive au niveau du bas de la carte */
.contact__coord{margin-top:clamp(26px,3.2vw,38px);padding-top:22px;border-top:1px solid var(--bordure-sombre)}
.contact__coord p{color:var(--texte-inverse-doux);font-size:var(--f-sm);margin-bottom:14px}
.contact__coord a{display:block;font-size:var(--f-base);text-decoration:none;margin-bottom:6px;transition:color .25s}
.contact__coord a:hover{color:var(--electrique)}

/* Carte formulaire */
.formulaire{
  background:var(--blanc);color:var(--texte);border-radius:22px;
  padding:clamp(22px,2.4vw,30px);box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.champs{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.champs--duo{grid-template-columns:1fr 1fr}}
.champ-form label,.champ-form legend{display:block;font-size:var(--f-sm);font-weight:700;margin-bottom:6px}
.champ-form label .facultatif{font-weight:400;color:var(--texte-doux)}
.champ-form input,.champ-form select,.champ-form textarea{
  width:100%;font:inherit;font-size:var(--f-sm);color:var(--texte);
  background:var(--brume-clair);border:1px solid var(--bordure);border-radius:11px;
  padding:11px 14px;min-height:46px;transition:border-color .2s,box-shadow .2s,background .2s;
}
.champ-form textarea{min-height:104px;resize:vertical;line-height:1.55}
.champ-form input::placeholder,.champ-form textarea::placeholder{color:#9A978D}
.champ-form input:focus,.champ-form select:focus,.champ-form textarea:focus{
  outline:none;background:var(--blanc);border-color:var(--nuit);box-shadow:0 0 0 3px rgba(255,206,0,.35);
}
.consentement{display:flex;gap:12px;align-items:flex-start;margin-top:18px}
.consentement input{
  appearance:none;width:22px;height:22px;flex:none;margin-top:2px;
  border:1.5px solid var(--bordure);border-radius:6px;background:var(--brume-clair);cursor:pointer;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.consentement input::after{
  content:"";width:11px;height:6px;border-left:2.4px solid var(--nuit);border-bottom:2.4px solid var(--nuit);
  transform:rotate(-45deg) scale(0);transition:transform .18s ease;margin-top:-3px;
}
.consentement input:checked{background:var(--electrique);border-color:var(--electrique)}
.consentement input:checked::after{transform:rotate(-45deg) scale(1)}
.consentement input:focus-visible{outline:3px solid var(--azur);outline-offset:2px}
.consentement label{font-size:var(--f-sm);line-height:1.5}
/* Le lien ouvre les mentions au lieu de les imposer dans la carte */
.lien-conditions{
  font:inherit;font-size:inherit;color:var(--texte);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.lien-conditions:hover{color:var(--ambre)}
.lien-conditions:focus-visible{outline:3px solid var(--azur);outline-offset:2px;border-radius:3px}
.lien-conditions::after{content:" ▾";font-size:.8em;text-decoration:none;display:inline-block}
.lien-conditions[aria-expanded="true"]::after{content:" ▴"}
.conditions{overflow:hidden}
.conditions__corps{
  margin-top:14px;padding:14px 16px;border:1px solid var(--bordure);border-radius:12px;
  background:var(--brume-clair);
}
.conditions__corps p{font-size:var(--f-xs);color:var(--texte-doux);line-height:1.6}
.conditions__corps p + p{margin-top:10px}
.envoyer{
  width:100%;margin-top:20px;min-height:54px;border:0;border-radius:999px;
  background:var(--electrique);color:var(--nuit);font:inherit;font-weight:700;font-size:var(--f-base);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  transition:background .25s;
}
.envoyer:hover{background:var(--electrique-fonce)}
.envoyer:focus-visible{outline:3px solid var(--nuit);outline-offset:3px}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.confirmation{
  margin-top:20px;padding:16px 18px;border-radius:12px;
  background:var(--brume-clair);border:1px solid var(--bordure);
  font-size:var(--f-sm);display:none;
}
.confirmation.est-visible{display:block}
.pied{border-top:1px solid var(--bordure-sombre);padding:24px 0;color:var(--texte-inverse-doux)}
.pied .enveloppe{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:var(--f-xs)}

@media (prefers-reduced-motion:reduce){
  .etape{opacity:1}
}

/* ===== Telephone : declare en dernier pour gagner la cascade ===== */
.copie-courte{display:none}

@media (max-width:939px){
  /* copies courtes, alignees a gauche : la justification creuse des trous
     dans des colonnes aussi etroites */
  .copie-courte{display:inline}
  .copie-longue{display:none}
  .hero__texte,.contact__intro,.carte p{text-align:left}

  /* 4 · le bouton d appel vit deja dans la barre : pas de doublon sous le titre */
  .hero__actions{display:none}

  /* 5 · le titre du flux tient sur sa ligne */
  .noyau__titre{font-size:.78rem;letter-spacing:-.01em;white-space:nowrap}

  /* La barre de la carte : le nom en petit, rien ne sort du cadre */
  .flux__barre{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px}
  .flux__nom{font-size:10px;letter-spacing:.05em}
  .flux__etat{white-space:nowrap;flex:none}
  .flux__points{flex:none}

  /* La mention « sur mesure » se cale a cote du surtitre, en plus petit */
  .noyau__tete{display:block;position:relative;margin-bottom:18px}
  .noyau__titre{margin-top:8px}
  .noyau__mention{position:absolute;right:0;top:-4px;padding:5px 10px;font-size:.68rem}


  /* 7 · constat : numero, titre puis description, en pile */
  .carte{display:block;padding:18px 0}
  .carte__num{margin-bottom:6px}
  .carte h3{margin:0 0 8px}

  /* 8 et 11 · la jauge se lit de haut en bas : situation, chiffres, barre.
     La liste des paliers et les legendes internes disparaissent. */
  .niveaux{display:none}
  .jauge__legende{display:none}
  .jauge__tete{flex-direction:column;align-items:flex-start;gap:12px}
  .jauge__etat{font-size:1.05rem;letter-spacing:.04em;color:var(--electrique);font-weight:800}
  .jauge__mesures{width:100%;justify-content:space-between}
  .mesure{text-align:left}
  .jauge{height:84px}
  .jauge__piste{left:16px;right:16px}
  .jauge__frontiere{display:none}
}


/* La pile de « L outil au travail » suit le meme seuil que son JavaScript
   (940px) : entre 621 et 939, tablette portrait, elle s applique aussi. */
@media (max-width:939px){
  .ecran .etapes{margin:0;padding:12px 14px 0;display:block}
  .ecran .etape{display:none;opacity:1;background:none;border:0;padding:6px 2px;cursor:default}
  .ecran .etape.est-active{display:flex}
  .ecran__corps{display:block;padding:12px 14px 16px}
  .champ{display:none;min-height:0}
  .champ.est-visible{display:flex}
  .ecran__barre{display:flex;justify-content:space-between;gap:10px}
  .ecran__etat{white-space:nowrap;flex:none}
  .actions-ecran{max-width:560px}
  .actions-ecran .faux-bouton--valider{
    background:transparent;color:var(--texte-inverse-doux);border:1px solid var(--bordure-sombre);
    transition:background .4s,color .4s,border-color .4s;
  }
  .actions-ecran .faux-bouton--valider.est-pret{
    background:var(--electrique);color:var(--nuit);border-color:var(--electrique);
  }
  .ecran{max-width:560px}
}


/* --------------------------------------------------------------------------
   Classes utilitaires — remplacent les attributs style="" en ligne, que la
   politique de sécurité du site (style-src 'self') refuserait.
   -------------------------------------------------------------------------- */
.u-accent{font-weight:700;color:var(--electrique);}
.u-mt18{margin-top:18px;}

/* --------------------------------------------------------------------------
   Polices auto-hébergées — la politique de sécurité (font-src 'self')
   interdit Google Fonts.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}

/* Lien vers la page complète, dans le panneau dépliable des conditions */
.conditions__lien{margin-top:14px;}
.conditions__lien a{color:var(--electrique);text-underline-offset:3px;}

/* Pied de page : liens légaux */
.pied__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.pied__legal a:hover{color:var(--electrique);}
@media (max-width:939px){.pied__legal{display:block;margin-top:6px;}}

/* Message d'état de l'envoi */
#confirmation.est-ok{color:#0B0B0C;}
#confirmation.est-ko{color:#B3261E;}

/* --------------------------------------------------------------------------
   Écrans peu hauts (plein écran sur portable, ~700-820 px) : les marges
   verticales sont resserrées pour qu'une section tienne dans l'écran.
   Ne s'applique qu'au-dessus de 940 px de large — le mobile a ses propres
   règles, déclarées plus haut.
   -------------------------------------------------------------------------- */
@media (min-width:940px) and (max-height:840px){
  .hero{padding:76px 0 22px}
  .hero h1{margin-bottom:18px}
  .hero__texte{margin-bottom:24px}
  .pastille{margin-bottom:18px}
  .constat{padding:60px 0 68px}
  .constat__intro{margin-bottom:38px}
  .carte{padding:16px 0}
  .chaine__panneau{padding:calc(var(--entete) + 6px) 0 6px}
  .etapes{margin-top:20px;gap:8px}
  .etape{padding:9px 14px}
  .chiffres{padding:52px 0 8px}
  .chiffres__titre{margin-bottom:30px}
  .chiffres__chute{margin-bottom:38px;padding-bottom:26px}
  .chiffres__grille{gap:24px}
  p.chiffre__valeur{font-size:clamp(3rem,1.8rem + 4.4vw,5rem);margin-bottom:10px}
  .separation__panneau{padding:34px 0 46px}
  .separation h2{margin:10px 0 12px}
  .niveaux{margin-top:20px}
  .niveau{padding:11px 0 11px 19px}
  .detail{padding:20px 22px;margin-top:18px}
  .jauge{height:96px}
  .contact{padding:52px 0}
  .formulaire{padding:20px}
  .champs{gap:11px}
  .champ-form textarea{min-height:78px}
  .consentement{margin-top:12px}
  .envoyer{margin-top:14px;min-height:48px}
  .contact__intro{margin-bottom:24px}
  .promesses{gap:12px}
  .contact__coord{margin-top:20px;padding-top:16px}
}

/* --------------------------------------------------------------------------
   Ancres : l'en-tête est fixe, une section amenée par un lien de menu passait
   ses premiers pixels — donc son titre — dessous. scroll-margin-top dégage sa
   hauteur. #chaine en est exclu : son panneau compense déjà en padding.
   -------------------------------------------------------------------------- */
#constat, #engagement, #contact{scroll-margin-top:var(--entete)}

/* --------------------------------------------------------------------------
   Le bandeau jaune se cale en bas de l'écran : hero + bandeau = exactement
   une hauteur de fenêtre, donc la section claire ne dépasse jamais sous la
   ligne de flottaison. La hauteur du bandeau est fixée pour que le calcul
   reste juste quelle que soit la taille de police.
   -------------------------------------------------------------------------- */
@media (min-width:940px){
  :root{--bandeau-h:56px}
  .bandeau{padding:0;height:var(--bandeau-h);display:flex;align-items:center}
  .hero{min-height:calc(100svh - var(--bandeau-h))}
}

/* La section claire occupe toute la hauteur restante sous l'en-tête, son
   contenu centré : plus de bande noire résiduelle en bas d'écran. */
@media (min-width:940px){
  .constat{min-height:calc(100svh - var(--entete));display:flex;align-items:center}
  .constat .enveloppe{width:100%}
}


/* ---- Tiret devant chaque intitulé de section (même repère que PREMIER ÉCHANGE) ---- */
.oeil,.chiffres__titre{display:flex;align-items:center;gap:14px}
.oeil::before,.chiffres__titre::before{content:"";width:34px;height:2px;background:currentColor;flex:none}

/* ---- Constat a 5 reperes : rythme vertical ajuste a la hauteur d ecran ---- */
@media (min-width:940px) and (min-height:1001px){
  .constat{padding:88px 0 92px}
  .constat__intro{margin-bottom:66px}
}
@media (min-width:940px) and (min-height:841px) and (max-height:1000px){
  .constat{padding:56px 0 60px}
  .constat h2{margin-bottom:16px}
  .constat__intro{margin-bottom:34px}
  .constat .carte{padding:14px 0}
}
@media (min-width:940px) and (max-height:840px){
  .constat{padding:28px 0 22px}
  .constat .oeil{margin-bottom:10px}
  .constat h2{font-size:clamp(1.9rem,1.2rem + 1.7vw,2.5rem);margin-bottom:10px}
  .constat__intro{font-size:1.05rem;margin-bottom:16px}
  .constat .carte{padding:10px 0}
}

/* ---- Jauge 80/20 : legendes au-dessus de la barre, barre descendue ---- */
.jauge__legende{top:14px}
.jauge__piste{top:62%}
.jauge__frontiere{top:62%}
@media (min-width:940px) and (max-height:840px){
  .jauge__legende{top:11px}
}

/* ---- Contact : l adresse e-mail s aligne sur le bas du cadre du formulaire ---- */
@media (min-width:940px){
  .contact__coord{
    position:absolute;left:0;bottom:0;margin-top:0;
    width:calc(.46 * (100% - clamp(38px,5vw,64px)));
  }
}

/* ---- Jauge : plus aucun mouvement parasite pendant l animation ---- */
@media (min-width:940px){
  .jauge__tete{min-height:88px}
  .mesure--machine{min-width:140px}
  .mesure--humain{min-width:118px}
  .detail{min-height:290px}
}
@media (min-width:940px) and (max-height:840px){
  .jauge__piste{top:calc(62% + 15px)}
  .jauge__frontiere{top:calc(62% + 15px);height:44px}
}

/* ---- Barre 80/20 ancree en bas du cadre : plus de vide dessous ---- */
.jauge__piste{top:auto;bottom:12px;transform:none}
.jauge__frontiere{top:auto;bottom:0;height:56px;transform:translateX(-50%)}

/* ---- Bloc niveaux + detail descendu de 50px (grands ecrans) ---- */
@media (min-width:940px) and (min-height:841px){
  .niveaux{margin-top:130px}
  .detail{margin-top:124px}
}

/* ---- Separation : grand espace avant les niveaux, toutes hauteurs d ecran ---- */
@media (min-width:940px){
  .niveaux{margin-top:100px}
  .detail{margin-top:94px}
}