/* =============================================================
   Horizon Builder — la page d'accueil (refonte du 23/09/2026).
   Chargée APRÈS style.css, sur les deux accueils seulement : les autres
   pages gardent leur feuille. Mêmes jetons, aucune couleur nouvelle hors
   des deux accents de la charte.
   ⭐ Tout le mouvement est décoratif : la page se lit entière sans
      JavaScript, et `prefers-reduced-motion` coupe tout.
   ============================================================= */

.accueil section{padding:clamp(80px,11vw,136px) 0}
.accueil h2{font-size:clamp(30px,4.6vw,52px);font-weight:300;letter-spacing:-.01em;line-height:1.08;margin:0 0 20px}
.accueil h2 em{font-style:normal;color:var(--soleil)}
.accueil .lede{font-size:clamp(16px,1.5vw,18px);max-width:58ch}
.accueil .kicker{display:inline-flex;align-items:center;gap:10px}
.accueil .kicker::before{content:"";width:22px;height:1px;background:currentColor}

/* ---------- le hero ---------- */
.h2x{
  position:relative;overflow:hidden;min-height:min(92vh,860px);
  display:flex;align-items:center;padding:96px 0 clamp(120px,15vh,170px);
  background:radial-gradient(900px 520px at 50% 118%,rgba(255,150,60,.16),transparent 70%),var(--nuit);
}
.h2x canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.h2x::after{ /* fondu vers la section suivante */
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:linear-gradient(transparent,var(--nuit));
}
.h2x .wrap{position:relative;z-index:1;width:100%}
.h2x .sceau{margin:0 0 34px}
.h2x .sceau .arc{stroke-dasharray:160;stroke-dashoffset:160;animation:trace 1.6s .25s cubic-bezier(.65,0,.35,1) forwards}
.h2x .sceau .ligne{stroke-dasharray:110;stroke-dashoffset:110;animation:trace 1.1s cubic-bezier(.65,0,.35,1) forwards}
.h2x .sceau .onde{opacity:0;animation:apparait 1.2s 1.4s ease-out forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes apparait{to{opacity:1}}

.h2x h1{
  font-size:clamp(44px,9vw,112px);line-height:.95;font-weight:200;letter-spacing:.04em;margin:0 0 30px;
}
.h2x h1 b{font-weight:600;background:linear-gradient(100deg,var(--blanc) 20%,var(--soleil-clair) 50%,var(--blanc) 80%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lustre 7s 1.6s ease-in-out infinite}
@keyframes lustre{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.h2x .claim{font-size:clamp(22px,3vw,34px);font-weight:300;line-height:1.25;margin:0 0 22px;max-width:30ch}
.h2x .claim span{color:var(--gris)}
.h2x .sub{color:#B9B9C4;max-width:56ch;margin:0 0 38px;font-size:clamp(16px,1.5vw,18px)}
.h2x .cta .btn{padding:15px 28px;font-size:15.5px}
.btn-1{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(255,150,60,.55)}
.btn-2{transition:border-color .25s,transform .25s,background .25s}
.btn-2:hover{transform:translateY(-2px);background:rgba(244,244,246,.04)}
.fleche{display:inline-block;transition:transform .25s}
.btn:hover .fleche{transform:translateX(4px)}

/* Les trois chiffres du haut de page : un panneau translucide posé sur
   l'horizon, trois colonnes égales (le compteur ne fait pas danser la mise en
   page), un filet de lumière qui le parcourt de temps en temps. */
.preuves{
  list-style:none;margin:42px 0 0;padding:0;position:relative;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,790px);
  border:1px solid rgba(244,244,246,.1);border-radius:18px;
  background:linear-gradient(180deg,rgba(24,24,31,.78),rgba(7,7,10,.62));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,244,246,.06);
}
.preuves::after{
  content:"";position:absolute;left:0;top:0;width:45%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--soleil),transparent);
  transform:translateX(-100%);animation:balaye 6s 2.2s ease-in-out infinite;
}
@keyframes balaye{0%{transform:translateX(-100%)}55%,100%{transform:translateX(330%)}}
.preuves li{display:flex;align-items:center;gap:16px;padding:20px 24px;position:relative;transition:background .4s}
.preuves li:hover{background:rgba(244,244,246,.025)}
.preuves li+li{border-left:1px solid rgba(244,244,246,.08)}
.preuves .chiffre{
  display:flex;align-items:baseline;flex:0 0 auto;
  font-size:clamp(30px,3.6vw,42px);font-weight:200;line-height:1;letter-spacing:-.03em;
  color:var(--numen);font-variant-numeric:tabular-nums;
}
.preuves .chiffre i{font-style:normal}
.preuves .chiffre small{font-size:.46em;font-weight:400;margin-left:3px;color:var(--gris);letter-spacing:0}
.preuves li:nth-child(2) .chiffre{color:var(--blanc)}
.preuves li.club .chiffre{color:var(--soleil)}
.preuves .leg{font-size:12.5px;line-height:1.45;color:var(--gris)}
@media(max-width:640px){
  .preuves{margin-top:40px}
  .preuves li{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 14px}
  .preuves .chiffre{font-size:28px}
  .preuves .leg{font-size:11.5px}
  .preuves .leg br{display:none}
}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(63,216,200,.45)}70%{box-shadow:0 0 0 9px rgba(63,216,200,0)}100%{box-shadow:0 0 0 0 rgba(63,216,200,0)}}

.defiler{position:absolute;left:50%;bottom:26px;z-index:1;transform:translateX(-50%);width:22px;height:36px;border:1px solid var(--trait);border-radius:12px}
.defiler::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;background:var(--gris);animation:molette 1.8s infinite}
@keyframes molette{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* entrée du hero : chaque bloc monte à son tour */
.monte{opacity:0;transform:translateY(18px);animation:monte .9s cubic-bezier(.22,1,.36,1) forwards}
.monte.d1{animation-delay:.15s}.monte.d2{animation-delay:.3s}.monte.d3{animation-delay:.45s}
.monte.d4{animation-delay:.6s}.monte.d5{animation-delay:.75s}
@keyframes monte{to{opacity:1;transform:none}}

/* ---------- la bande des compétences ---------- */
.bande{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);overflow:hidden;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.bande .piste{display:flex;width:max-content;animation:bande 48s linear infinite}
.bande:hover .piste{animation-play-state:paused}
.bande ul{display:flex;gap:44px;list-style:none;margin:0;padding:0 22px 0 22px;white-space:nowrap;font-size:14px;color:var(--gris);letter-spacing:.04em}
.bande li{display:flex;align-items:center;gap:44px}
.bande li::after{content:"◗";color:var(--soleil);font-size:10px}
@keyframes bande{to{transform:translateX(-50%)}}

/* ---------- apparition au défilement ---------- */
.js .revele{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.js .revele.vu{opacity:1;transform:none}
.js .revele[data-delai="1"]{transition-delay:.08s}.js .revele[data-delai="2"]{transition-delay:.16s}
.js .revele[data-delai="3"]{transition-delay:.24s}.js .revele[data-delai="4"]{transition-delay:.32s}
.js .revele[data-delai="5"]{transition-delay:.4s}

/* ---------- le concept, en une phrase ---------- */
.accueil section.concept{border-top:0;padding-top:clamp(70px,9vw,110px)}
.phrase{font-size:clamp(26px,4vw,46px);font-weight:300;line-height:1.22;letter-spacing:-.01em;max-width:24ch;margin:0 0 56px}
.phrase .chaud{color:var(--soleil)}
.js .phrase .m{color:#4A4A56;transition:color .6s}
.js .phrase .m.on{color:var(--blanc)}
.js .phrase .m.chaud.on{color:var(--soleil)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:16px;overflow:hidden}
.trois div{background:var(--nuit);padding:28px 28px 30px}
.trois b{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--soleil);margin-bottom:10px;font-weight:600}
.trois p{margin:0;color:var(--gris);font-size:15px}
@media(max-width:760px){.trois{grid-template-columns:1fr}}

/* ---------- l'offre PME ---------- */
.pme{background:radial-gradient(760px 480px at 88% 10%,rgba(63,216,200,.07),transparent 70%)}
.pme-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:12px}
@media(max-width:900px){.pme-grille{grid-template-columns:1fr}}
ol.parcours{list-style:none;margin:0;padding:0;position:relative}
ol.parcours::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--trait)}
ol.parcours::after{content:"";position:absolute;left:19px;top:8px;width:1px;height:calc(var(--rempli,0) * (100% - 16px));
  background:linear-gradient(var(--soleil),var(--numen));transition:height .2s linear}
ol.parcours li{position:relative;padding:0 0 30px 62px}
ol.parcours li:last-child{padding-bottom:0}
ol.parcours .n{position:absolute;left:0;top:-4px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;
  background:var(--nuit);border:1px solid var(--trait);font-family:var(--mono);font-size:12px;color:var(--gris);z-index:1;transition:border-color .5s,color .5s,box-shadow .5s}
ol.parcours li.on .n{border-color:var(--soleil);color:var(--soleil);box-shadow:0 0 0 5px rgba(255,150,60,.08)}
ol.parcours b{display:block;font-size:18px;font-weight:600;margin-bottom:4px}
ol.parcours span{color:var(--gris);font-size:15px}

/* le schéma « vos murs » */
.enceinte{position:relative;border-radius:20px;border:1px solid var(--trait);background:linear-gradient(160deg,var(--ardoise),#101016);padding:10px;aspect-ratio:1.08}
.enceinte svg{width:100%;height:100%;display:block}
.enceinte .flux{stroke-dasharray:4 7;animation:flux 1.6s linear infinite}
.enceinte .flux.lent{animation-duration:2.4s}
@keyframes flux{to{stroke-dashoffset:-22}}
.enceinte .noeud{animation:respire 3.2s ease-in-out infinite}
.enceinte .noeud.b{animation-delay:.8s}.enceinte .noeud.c{animation-delay:1.6s}.enceinte .noeud.d{animation-delay:2.4s}
@keyframes respire{0%,100%{opacity:.75}50%{opacity:1}}
.enceinte .mur{stroke-dasharray:6 5;animation:veille 3s ease-in-out infinite}
@keyframes veille{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
.enceinte .refus{animation:refus 3s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes refus{0%,60%,100%{opacity:.35}70%{opacity:1}}
.enceinte .sortie{stroke-dasharray:3 6;animation:sortie 3s linear infinite}
@keyframes sortie{0%{stroke-dashoffset:0;opacity:0}20%{opacity:.8}60%{opacity:.8}70%,100%{stroke-dashoffset:-40;opacity:0}}

.garanties{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:clamp(48px,6vw,72px) 0 40px}
@media(max-width:900px){.garanties{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.garanties{grid-template-columns:1fr}}
.garanties div{border-top:1px solid var(--trait);padding-top:18px}
.garanties strong{display:block;font-size:clamp(34px,4vw,46px);font-weight:200;line-height:1;margin-bottom:10px;font-family:var(--sans);letter-spacing:-.02em}
.garanties strong i{font-style:normal;color:var(--soleil)}
.garanties span{color:var(--gris);font-size:14.5px}
.remise{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--gris);margin-left:6px}
.remise b{color:var(--numen);font-family:var(--mono)}

/* ---------- les tuiles (réalisations, labo, outils) ---------- */
.tuiles{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.tuiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tuiles{grid-template-columns:1fr}}
.tuile{
  --x:50%;--y:0%;position:relative;border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;
  background:radial-gradient(420px circle at var(--x) var(--y),rgba(255,150,60,.075),transparent 42%),var(--ardoise);
  border:1px solid var(--trait);transition:border-color .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.tuile:hover{border-color:#44444F;transform:translateY(-3px)}
.tuile.large{grid-column:span 2}
/* la vedette occupe deux rangées : les cinq autres tuiles tombent juste, 2 à droite puis 3 dessous */
@media(min-width:961px){.tuile.vedette{grid-row:span 2}}
.tuile.vedette p{flex:0 0 auto;font-size:16px;max-width:62ch}
.tuile.vedette h3{font-size:26px;font-weight:300;letter-spacing:.01em}
.signal{display:block;width:100%;height:clamp(70px,12vw,150px);margin:auto 0 8px;overflow:visible}
.signal .fond{stroke:var(--trait);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.signal .onde{fill:none;stroke:var(--soleil);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:900;stroke-dashoffset:900;animation:signal 5s cubic-bezier(.65,0,.35,1) infinite}
.signal .etapes-s circle{fill:var(--nuit);stroke:var(--numen);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;animation:etape-s 5s infinite}
.signal .etapes-s circle:nth-child(2){animation-delay:.45s}.signal .etapes-s circle:nth-child(3){animation-delay:.9s}.signal .etapes-s circle:nth-child(4){animation-delay:1.35s}
@keyframes signal{0%{stroke-dashoffset:900}55%{stroke-dashoffset:0}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes etape-s{0%,12%{opacity:0}22%,80%{opacity:1}100%{opacity:0}}
@media(max-width:620px){.tuile.large{grid-column:auto}}
.tuile .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--trait);background:var(--nuit);color:var(--soleil);margin-bottom:6px}
.tuile .ico svg{width:20px;height:20px}
.tuile h3{font-size:20px;font-weight:600;margin:0;letter-spacing:.005em}
.tuile p{margin:0;color:var(--gris);font-size:15px;flex:1}
.tuile p b{color:var(--blanc);font-weight:600}
.tuile .lien{font-size:14px;font-weight:600;margin-top:6px}
.tuile .tag{margin-top:2px}
/* toute la tuile clique, sans envelopper le contenu dans un <a> (cf. style.css) */
.tuile>a.lien:first-of-type::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tuile:has(>a.lien){cursor:pointer}
.tuile:has(>a.lien:focus-visible){outline:2px solid var(--numen);outline-offset:3px}
.tuile .avance{margin:10px 0 2px}
.tuile .jauge{height:4px;border-radius:3px;overflow:hidden;background:rgba(244,244,246,.07)}
.tuile .jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--soleil),var(--numen));transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.tuile .etat-avance{display:flex;gap:8px;margin-top:7px;font-size:11.5px;line-height:1.4}
.tuile .etat-avance .pc{font-family:var(--mono);color:var(--soleil);font-weight:600}
.tuile .etat-avance .phase{color:var(--gris-sourd)}
.tuile .modules{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;padding:0;list-style:none}
.tuile .modules li{font-size:12.5px;color:#C4C4CE;border:1px solid var(--trait);border-radius:999px;padding:3px 11px;background:var(--nuit)}

/* Mixprism : la tuile vedette, liseré qui tourne */
.tuile.vedette{border-color:transparent;background:
  radial-gradient(420px circle at var(--x) var(--y),rgba(255,150,60,.09),transparent 42%) padding-box,
  linear-gradient(var(--ardoise),var(--ardoise)) padding-box,
  conic-gradient(from var(--angle,0deg),rgba(255,150,60,.7),rgba(63,216,200,.55),transparent 40%,transparent 60%,rgba(255,150,60,.7)) border-box;
  animation:tourne 8s linear infinite}
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes tourne{to{--angle:360deg}}

/* le laboratoire : sobre, pointillé, sans lien */
.labo-t{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:8px}
@media(max-width:860px){.labo-t{grid-template-columns:1fr}}
.labo-t .tuile{background:transparent;border-style:dashed}
.labo-t .tuile:hover{transform:none}
.labo-t .ico{color:var(--numen)}
.sous-titre{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:clamp(56px,7vw,84px) 0 18px;padding-top:26px;border-top:1px solid var(--trait)}
.sous-titre h3{font-size:clamp(20px,2.2vw,24px);font-weight:300;margin:0;letter-spacing:.01em}
.sous-titre p{margin:0;color:var(--gris-sourd);font-size:14px;max-width:56ch}

/* ---------- le club : membre ou visiteur (refonte du 24/09) ---------- */
.club2{background:
  radial-gradient(820px 520px at 12% 0%,rgba(63,216,200,.08),transparent 70%),
  radial-gradient(700px 480px at 92% 8%,rgba(255,150,60,.06),transparent 70%)}
.club-tete{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;margin-bottom:clamp(44px,6vw,72px)}
@media(max-width:900px){.club-tete{grid-template-columns:1fr}}
.club-tete .lede{margin-bottom:26px}
.club-faits{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.club-faits li{font-size:13.5px;color:var(--gris);border:1px solid var(--trait);border-radius:999px;padding:6px 14px;background:rgba(24,24,31,.6)}
.club-faits b{color:var(--blanc);font-weight:600}

/* La carte de membre : un objet, légèrement incliné, qui suit la souris. */
.carte-zone{position:relative;perspective:1100px;display:grid;place-items:center;padding:20px 0 34px}
.carte-m{
  --rx:6deg;--ry:-14deg;position:relative;width:min(100%,420px);aspect-ratio:1.586;border-radius:20px;overflow:hidden;
  padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(63,216,200,.28),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(255,150,60,.26),transparent 60%),
    linear-gradient(150deg,#1E1E28,#0C0C12 70%);
  border:1px solid rgba(244,244,246,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(244,244,246,.12);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  animation:flotte 7s ease-in-out infinite;
}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -10px}}
.carte-zone:hover .carte-m{transition-duration:.12s}
.cm-haut{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;font-weight:600;color:var(--blanc)}
.cm-haut em{font-style:normal;margin-left:auto;color:var(--numen);border:1px solid rgba(63,216,200,.45);border-radius:999px;padding:3px 10px;letter-spacing:.24em}
.cm-puce{width:44px;height:33px;border-radius:7px;background:linear-gradient(135deg,#E9C58A,#9C6A2E 55%,#D9A865);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative}
.cm-puce::before,.cm-puce::after{content:"";position:absolute;inset:8px 0;border-top:1px solid rgba(0,0,0,.28);border-bottom:1px solid rgba(0,0,0,.28)}
.cm-puce::after{inset:0 15px;border:0;border-left:1px solid rgba(0,0,0,.28);border-right:1px solid rgba(0,0,0,.28)}
.cm-remise{position:absolute;right:clamp(18px,3vw,26px);top:50%;transform:translateY(-50%);margin:0;
  font-size:clamp(40px,6vw,58px);font-weight:200;letter-spacing:-.04em;color:var(--soleil);line-height:1;
  text-shadow:0 0 30px rgba(255,150,60,.35)}
.cm-remise small{font-size:.45em;margin-left:2px;color:var(--soleil-clair)}
.cm-bas{display:flex;justify-content:space-between;gap:16px;align-items:flex-end}
.cm-bas small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:3px}
.cm-bas b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--blanc);letter-spacing:.04em}
.cm-bas div:last-child{text-align:right}
.cm-bas div:last-child b{color:var(--numen)}
/* le reflet holographique qui balaye la carte */
.cm-reflet{position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 47%,rgba(63,216,200,.10) 50%,rgba(255,150,60,.08) 53%,transparent 60%);
  animation:reflet 6s ease-in-out infinite}
@keyframes reflet{0%{transform:translateX(-45%)}60%,100%{transform:translateX(45%)}}
.carte-ombre{position:absolute;bottom:4px;left:50%;width:62%;height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,216,200,.22),transparent);filter:blur(6px);animation:ombre 7s ease-in-out infinite}
@keyframes ombre{0%,100%{opacity:.9;scale:1}50%{opacity:.55;scale:.9}}

/* Visiteur contre membre */
.statuts{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:stretch}
@media(max-width:860px){.statuts{grid-template-columns:1fr}}
.statut{position:relative;border-radius:22px;border:1px solid var(--trait);padding:clamp(26px,3.4vw,40px);background:var(--ardoise);display:flex;flex-direction:column}
.statut h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gris);margin:0 0 18px}
.statut:not(.membre){background:linear-gradient(180deg,rgba(24,24,31,.7),rgba(12,12,17,.7))}
.statut:not(.membre) .gros{color:#C4C4CE}
.statut.membre{border-color:transparent;background:
  radial-gradient(600px 360px at 100% 0%,rgba(63,216,200,.12),transparent 65%) padding-box,
  linear-gradient(var(--ardoise),var(--ardoise)) padding-box,
  conic-gradient(from var(--angle,0deg),rgba(63,216,200,.75),rgba(255,150,60,.55),transparent 35%,transparent 65%,rgba(63,216,200,.75)) border-box;
  animation:tourne 9s linear infinite;box-shadow:0 30px 80px -40px rgba(63,216,200,.35)}
.statut.membre h3{color:var(--numen)}
.pastille{position:absolute;top:clamp(22px,3vw,34px);right:clamp(22px,3vw,34px);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#062422;background:var(--numen);border-radius:999px;padding:5px 12px}
@media(max-width:480px){.pastille{position:static;align-self:flex-start;margin-bottom:14px}}
.statut .gros{font-size:clamp(56px,8vw,96px);font-weight:200;line-height:.9;letter-spacing:-.04em;margin:0 0 8px;display:flex;align-items:baseline}
.statut .gros small{font-size:.4em;letter-spacing:0;font-weight:300;margin-left:4px;opacity:.8}
.statut.membre .gros{color:var(--numen);text-shadow:0 0 40px rgba(63,216,200,.25)}
.statut .sous{color:var(--gris);font-size:15px;margin:0 0 26px}
.statut ul{list-style:none;margin:0 0 28px;padding:0;flex:1}
.statut li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--trait);font-size:15px;color:var(--gris)}
.statut li b{color:var(--blanc);font-weight:600}
.statut li::before{content:"";position:absolute;left:3px;top:22px;width:12px;height:1px;background:var(--gris-sourd)}
.statut.membre li::before{content:"";left:0;top:14px;width:18px;height:18px;border-radius:50%;background:rgba(63,216,200,.14)}
.statut.membre li::after{content:"";position:absolute;left:6px;top:19px;width:7px;height:4px;border-left:1.6px solid var(--numen);border-bottom:1.6px solid var(--numen);transform:rotate(-45deg)}
.statut .btn{align-self:flex-start}

/* Les outils, en deux groupes */
.groupe-t{display:flex;align-items:center;gap:14px;margin:26px 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--soleil)}
.groupe-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--trait),transparent)}
.groupe-t.membres{color:var(--numen);margin-top:34px}
.outils2{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.outils2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.outils2{grid-template-columns:1fr}}
.outils2 .tuile{padding:22px 22px 20px;gap:6px}
.outils2 .tuile .ico{width:38px;height:38px;margin-bottom:8px}
.outils2 .tuile h3{font-size:17px}
.outils2 .tuile p{font-size:14px}
.outils2 .tuile.verrou{background:radial-gradient(420px circle at var(--x) var(--y),rgba(63,216,200,.08),transparent 42%),linear-gradient(180deg,#15161C,var(--ardoise))}
.outils2 .tuile.verrou .ico{color:var(--numen)}
.outils2 .tuile.verrou .tag{color:var(--numen)}
.cadenas{position:absolute;top:22px;right:22px;width:20px;height:20px;color:var(--gris-sourd);transition:color .35s}
.cadenas .anse{transition:transform .45s cubic-bezier(.34,1.56,.64,1);transform-origin:16px 11px}
.tuile.verrou:hover .cadenas{color:var(--numen)}
.tuile.verrou:hover .cadenas .anse{transform:translateY(-2.5px) rotate(24deg)}
.bientot{margin:20px 0 0;color:var(--gris-sourd);font-size:14px}

/* L'appel final */
.club-appel{
  margin:clamp(48px,6vw,76px) 0 0;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:clamp(26px,4vw,42px);border-radius:22px;border:1px solid rgba(63,216,200,.28);position:relative;overflow:hidden;
  background:radial-gradient(520px 260px at 0% 0%,rgba(63,216,200,.14),transparent 70%),radial-gradient(520px 260px at 100% 100%,rgba(255,150,60,.12),transparent 70%),var(--ardoise);
}
.club-appel .appel-titre{font-size:clamp(22px,2.8vw,30px);font-weight:300;letter-spacing:-.01em;margin:0 0 10px;color:var(--blanc)}
.club-appel .mention{max-width:62ch}
.club-appel .btn{padding:15px 30px;font-size:15.5px}

/* ---------- qui construit ---------- */
.qui2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:860px){.qui2{grid-template-columns:1fr}}
.qui2 p{color:var(--gris)}

/* ---------- mouvement réduit ----------
   style.css coupe déjà durées et itérations ; ici on remet aussi les éléments
   masqués dans leur état final, sinon ils resteraient invisibles. */
@media(prefers-reduced-motion:reduce){
  .monte,.js .revele{opacity:1!important;transform:none!important}
  .h2x .sceau .arc,.h2x .sceau .ligne{stroke-dashoffset:0!important}
  .h2x .sceau .onde{opacity:1!important}
  .bande .piste{animation:none!important}
  .preuves::after{display:none}
  .carte-m,.carte-ombre,.cm-reflet{animation:none!important}
  .signal .onde{stroke-dashoffset:0!important}
  .signal .etapes-s circle{opacity:1!important}
  .js .phrase .m{color:var(--blanc)}
  .js .phrase .m.chaud{color:var(--soleil)}
}

/* ---------- l'offre PME : les niveaux et le comparatif (23/09, soir) ---------- */
.niveaux{margin:clamp(48px,6vw,72px) 0 0}
.niveaux ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.niveaux li{font-size:14px;color:var(--blanc);border:1px solid var(--trait);border-radius:999px;padding:7px 16px;background:var(--ardoise);transition:border-color .3s,color .3s}
.niveaux li:hover{border-color:var(--soleil);color:var(--soleil)}
.versus{margin:clamp(48px,6vw,72px) 0 0}
.versus h3{font-size:clamp(20px,2.2vw,24px);font-weight:300;margin:0 0 16px}
.versus .compare{border:1px solid var(--trait);border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0}
.versus .compare td:first-child{width:22%}
.garanties{margin-top:clamp(40px,5vw,56px)}

/* ---------- demande d'audit PME (25/09) : un formulaire au lieu d'un mailto ---------- */
.audit{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,48px);
  padding:clamp(24px,4vw,40px);border-radius:22px;border:1px solid rgba(255,150,60,.3);
  background:radial-gradient(520px 260px at 0% 0%,rgba(255,150,60,.10),transparent 70%),var(--ardoise)}
@media(max-width:900px){.audit{grid-template-columns:1fr}}
.audit-tete h3{font-size:clamp(22px,2.6vw,28px);font-weight:300;margin:0 0 10px}
.audit-tete p{color:var(--gris);margin:0 0 18px}
.audit-tete .remise{margin:0}
.audit-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
@media(max-width:560px){.audit-grille{grid-template-columns:1fr}}
.audit-form label{display:block;font-size:13px;color:var(--gris)}
.audit-form label span[aria-hidden]{color:var(--soleil)}
.audit-form .opt{color:var(--gris-sourd)}
.audit-form input,.audit-form select,.audit-form textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border-radius:10px;
  background:var(--nuit);border:1px solid var(--trait);color:var(--blanc);font:inherit;font-size:15px}
.audit-form textarea{resize:vertical;line-height:1.5}
.audit-form select option{background:var(--ardoise)}
.audit-form input:focus-visible,.audit-form select:focus-visible,.audit-form textarea:focus-visible{outline:2px solid var(--numen);outline-offset:2px;border-color:var(--numen)}
.audit-form .large{margin-top:12px}
.audit-pied{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px}
.audit-pied .rappel{min-width:200px}
.audit-piege{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.audit-statut{min-height:1.3em;margin:12px 0 4px;font-size:14.5px}
.audit-statut.ok{color:var(--numen)} .audit-statut.ko{color:#FF9C8F}
.audit-form .mention{margin:0}

/* ---------- simulateur de gains PME (25/09) ---------- */
.roi{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:1.15fr .85fr;border-radius:22px;overflow:hidden;border:1px solid var(--trait)}
@media(max-width:900px){.roi{grid-template-columns:1fr}}
.roi-reglages{background:var(--ardoise);padding:clamp(22px,3.4vw,36px)}
.roi-reglages h3{font-size:clamp(22px,2.6vw,28px);font-weight:300;margin:0 0 6px}
.roi-sous{color:var(--gris);margin:0 0 18px;font-size:15px}
.roi-reglages label{display:block;font-size:13.5px;color:var(--gris);margin:14px 0 0}
.roi-reglages output{float:right;font-family:var(--mono);color:var(--blanc);font-weight:600}
.roi-reglages input[type=range]{display:block;width:100%;margin-top:8px;accent-color:var(--soleil)}
.roi-reglages input[type=range]:focus-visible{outline:2px solid var(--numen);outline-offset:3px}
.roi-resultat{padding:clamp(22px,3.4vw,36px);display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(420px 260px at 100% 0%,rgba(255,150,60,.16),transparent 70%),#101016}
.roi-k{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--numen);font-weight:600}
.roi-heures{margin:8px 0 2px;color:var(--gris)} .roi-heures b{display:block;font-size:clamp(44px,6vw,64px);font-weight:200;color:var(--blanc);line-height:1;font-variant-numeric:tabular-nums}
.roi-euros{margin:10px 0 16px;color:var(--gris)} .roi-euros b{font-size:clamp(24px,3vw,32px);font-weight:400;color:var(--soleil);font-variant-numeric:tabular-nums}
.roi-detail{list-style:none;margin:0 0 18px;padding:12px 0 0;border-top:1px solid var(--trait)}
.roi-detail li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;color:var(--gris)}
.roi-detail b{color:var(--blanc);font-family:var(--mono)}
.roi-go{align-self:flex-start}
.roi-note{margin:14px 0 0;font-size:12px;color:var(--gris-sourd)}

/* ---------- preuves : les automatisations qui tournent déjà ---------- */
.cas{margin-top:clamp(48px,6vw,72px)}
.cas-h{font-size:clamp(22px,2.6vw,28px);font-weight:300;margin:0 0 20px}
.cas-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:960px){.cas-grille{grid-template-columns:1fr}}
.cas-carte{background:var(--ardoise);border:1px solid var(--trait);border-radius:18px;padding:22px}
.cas-tag{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soleil);font-weight:600}
.cas-carte h3{font-size:18px;margin:0 0 14px}
.cas-carte dl{margin:0}
.cas-carte dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-sourd);font-weight:600;margin-top:12px}
.cas-carte dd{margin:4px 0 0;color:var(--gris);font-size:14.5px}
.cas-carte dd.cas-chiffre{color:var(--numen);font-weight:600}