/* ══════════════════════════════════════════════════════════════
   KreaTech — page « Automatisation & systèmes »
   Vocabulaire repris des trois références (conicorn, prism, ainet)
   et retranscrit dans l'identité KreaGlobe : vert sapin, vert vif,
   fonds encre. Aucune couleur étrangère à la marque.
   ══════════════════════════════════════════════════════════════ */

/* ── étiquette de section numérotée (conicorn) ────────────── */
.tag-n{display:inline-flex;align-items:center;gap:.7em;
  padding:.5em 1em;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--vif) 26%,transparent);
  background:color-mix(in srgb,var(--vif) 7%,transparent);
  font-family:var(--dpl);font-weight:800;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vif)}
.tag-n b{font-weight:800;opacity:.55;font-variant-numeric:tabular-nums}
.tag-n i{width:5px;height:5px;border-radius:50%;background:var(--vif);font-style:normal}

/* ══════════════ 1 · HERO — plein cadre, centré ══════════════
   Structure reprise de conicorn : un objet occupe tout le fond, deux
   dégradés le fondent en haut et en bas, un voile assombrit, et le
   contenu est empilé au centre. Leur objet est une vidéo ; le nôtre
   est construit en CSS 3D — même effet, aucun octet chargé. */
.ah{position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:grid;place-items:center;
  padding:clamp(112px,14vh,150px) 0 clamp(64px,9vh,110px);
  background:var(--ink)}
.ah .wrap{position:relative;z-index:3;text-align:center;max-width:1140px}

/* — le fond — */
.ah-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ah-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(#0009,#00000026 42%,#0000 62%,var(--ink) 96%)}
.ah-halo{position:absolute;left:50%;top:46%;width:min(104vw,1080px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sapin) 96%,transparent),transparent 70%);
  filter:blur(16px)}
.ah-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* — l'objet : un tore d'anneaux, en 3D CSS —
   Chaque anneau est une ellipse tournée d'un pas régulier autour de Y.
   L'ensemble tourne lentement, et s'incline légèrement vers le curseur. */
.torus{position:absolute;left:50%;top:48%;width:min(70vw,700px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(calc(58deg + var(--ty,0deg))) rotateZ(var(--tz,0deg));
  transform-style:preserve-3d;
  animation:torusSpin 42s linear infinite}
.torus-r{position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--vif) var(--o,26%),transparent);
  transform:rotateY(var(--a)) rotateX(var(--x,0deg)) scale(var(--s,1))}
/* seconde couche, plus petite et tournant à l'envers : c'est le
   croisement des deux qui donne l'impression de volume tordu */
.torus-2{position:absolute;left:50%;top:48%;width:min(46vw,470px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(calc(26deg + var(--ty,0deg) * -.6));
  transform-style:preserve-3d;
  animation:torusSpin2 31s linear infinite}
@keyframes torusSpin2{to{transform:translate(-50%,-50%)
  rotateX(calc(26deg + var(--ty,0deg) * -.6)) rotateZ(-360deg)}}
@keyframes torusSpin{to{transform:translate(-50%,-50%) rotateX(calc(64deg + var(--ty,0deg)))
  rotateZ(calc(var(--tz,0deg) + 360deg))}}
/* un halo intérieur, pour donner de la matière au centre */
.torus::after{content:"";position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--vif) 46%,transparent),transparent 72%);
  filter:blur(30px)}

/* — la pastille — */
.ah-pill{display:inline-flex;align-items:center;gap:.6em;
  padding:.55em 1.05em;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--blanc) 22%,transparent);
  background:color-mix(in srgb,var(--ink) 45%,transparent);
  backdrop-filter:blur(10px);
  font-family:var(--dpl);font-weight:700;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase}
.ah-pill svg{width:14px;height:14px;color:var(--vif);flex:none}

/* — le titre en dégradé (recette conicorn, couleurs KreaGlobe) — */
.ah h1{margin:clamp(20px,2.6vw,30px) 0 0;
  font-family:var(--dpl);font-weight:900;
  font-size:clamp(2.3rem,5.6vw,4.85rem);line-height:1;letter-spacing:-.045em;
  background-image:linear-gradient(96deg,var(--menthe),var(--vif) 26%,
    var(--blanc) 52%,var(--vif) 76%,var(--menthe));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:180% 100%;animation:ahShine 12s ease-in-out infinite}
@keyframes ahShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* le dégradé sur du texte casse le découpage mot à mot : on l'applique
   au bloc entier et on laisse les mots hériter */
.ah h1 .w,.ah h1 .wi{background:none;-webkit-text-fill-color:inherit}

.ah-sub{margin:clamp(18px,2.2vw,26px) auto 0;max-width:56ch;
  font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.68;opacity:.72}
.ah-b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(28px,3.6vw,42px)}

/* bouton à lueur intérieure (conicorn) */
.btn-glow{position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--vif) 55%,transparent);
  backdrop-filter:blur(10px)}
.btn-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 30px 2px color-mix(in srgb,var(--vif) 70%,transparent);
  opacity:.85;transition:opacity .4s}
.btn-glow:hover::after{opacity:1}
.btn-glow:hover{border-color:var(--vif)}

.ah-note{display:inline-flex;align-items:center;gap:.6em;
  margin-top:clamp(22px,2.8vw,32px);font-size:.78rem;opacity:.5}
.ah-note i{width:6px;height:6px;border-radius:50%;background:var(--vif);flex:none;
  animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.6)}}

/* indice de scroll */
.ah-cue{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);transform:translateX(-50%);
  z-index:3;display:grid;justify-items:center;gap:8px;pointer-events:none;
  font-family:var(--dpl);font-weight:800;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;opacity:.45}
.ah-cue i{width:1px;height:34px;background:linear-gradient(var(--vif),transparent);
  animation:cueA 2.2s var(--ease) infinite}
@keyframes cueA{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media(max-width:700px){
  .ah{min-height:92svh}
  .torus{width:118vw}
  .torus-2{width:76vw}
}
@media(prefers-reduced-motion:reduce){
  .torus,.torus-2{animation:none}
  .ah h1{animation:none;background-position:0 50%}
  .ah-note i,.ah-cue i{animation:none}
}

/* — le scénario, juste après le hero — */
.flux{background:var(--ink-2);position:relative}
.flux-g{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.6vw,64px);
  align-items:center;margin-top:clamp(30px,4vw,46px)}
@media(max-width:940px){.flux-g{grid-template-columns:1fr}}


/* ── LE PANNEAU DE FLUX ───────────────────────────────────────
   Il vivait dans le hero ; il a désormais sa propre section, depuis
   que le hero est passé en plein cadre. Les styles restent ici. */
.wf{position:relative;border-radius:20px;padding:clamp(18px,2.2vw,26px);
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--vif) 30%,transparent);
  box-shadow:0 34px 80px -40px #000,0 0 0 1px color-mix(in srgb,var(--vif) 8%,transparent);
  backdrop-filter:blur(12px);overflow:hidden}
.wf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 58% at 100% 0,color-mix(in srgb,var(--vif) 13%,transparent),transparent 70%)}
.wf-hd{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:16px;
  border-bottom:1px solid color-mix(in srgb,var(--blanc) 10%,transparent);
  font-family:var(--dpl);font-weight:700;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6}
.wf-live{display:flex;align-items:center;gap:.5em;color:var(--vif);opacity:1}
.wf-live i{width:6px;height:6px;border-radius:50%;background:var(--vif);
  animation:pulseDot 1.9s ease-in-out infinite}
.wf-row{position:relative;display:flex;align-items:center;gap:13px;
  padding:12px 14px;border-radius:13px;
  background:color-mix(in srgb,var(--blanc) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--blanc) 11%,transparent)}
.wf-row+.wf-row{margin-top:24px}
/* le fil qui relie les étapes, et la bille qui y descend */
.wf-row+.wf-row::before{content:"";position:absolute;left:30px;top:-24px;width:1px;height:24px;
  background:linear-gradient(var(--vif),color-mix(in srgb,var(--vif) 18%,transparent))}
.wf-row+.wf-row::after{content:"";position:absolute;left:28.5px;top:-24px;width:4px;height:4px;
  border-radius:50%;background:var(--vif);box-shadow:0 0 9px var(--vif);
  animation:wfDrop 2.8s linear infinite}
@keyframes wfDrop{0%{transform:translateY(0);opacity:0}16%{opacity:1}84%{opacity:1}
  100%{transform:translateY(22px);opacity:0}}
.wf-row:nth-of-type(3)::after{animation-delay:.55s}
.wf-row:nth-of-type(4)::after{animation-delay:1.1s}
.wf-row:nth-of-type(5)::after{animation-delay:1.65s}
.wf-i{width:33px;height:33px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--vif) 14%,transparent);color:var(--vif)}
.wf-i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.wf-row b{display:block;font-family:var(--dpl);font-weight:700;font-size:.86rem;letter-spacing:-.012em}
.wf-row span{display:block;font-size:.73rem;opacity:.56;margin-top:1px}
.wf-t{margin-left:auto;font-size:.68rem;color:var(--vif);opacity:.8;
  font-variant-numeric:tabular-nums;flex:none}
.wf-ft{position:relative;margin-top:16px;padding-top:13px;
  border-top:1px solid color-mix(in srgb,var(--blanc) 10%,transparent);
  font-size:.73rem;line-height:1.55;opacity:.5}

/* ══════════════ 2 · LE COÛT — texte scrubbé + bandeau ══════════════ */
.cout{background:var(--ink-2);position:relative;overflow:hidden}
.cout .pin-stage{padding-block:clamp(70px,10vh,110px);gap:clamp(30px,5vh,54px)}
.cout-txt{font-family:var(--dpl);font-weight:700;letter-spacing:-.03em;line-height:1.24;
  font-size:clamp(1.35rem,3.1vw,2.55rem);max-width:22ch;margin-inline:auto;text-align:center}
/* chaque mot s'allume à son tour, piloté par --p (conicorn) */
.cout-txt .m{color:color-mix(in srgb,var(--blanc) 16%,transparent);transition:color .25s linear}
.cout-txt .m.on{color:var(--blanc)}
.cout-txt .m.hi.on{color:var(--vif)}

/* bandeau de chiffres géants */
.marq{position:relative;overflow:hidden;padding-block:clamp(16px,2vw,24px);
  border-block:1px solid color-mix(in srgb,var(--blanc) 10%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-t{display:flex;width:max-content;gap:clamp(30px,4vw,60px);
  animation:marq 34s linear infinite}
.marq-t span{display:flex;align-items:center;gap:clamp(30px,4vw,60px);
  font-family:var(--dpl);font-weight:900;letter-spacing:-.045em;white-space:nowrap;
  font-size:clamp(1.9rem,4.4vw,3.6rem);
  color:color-mix(in srgb,var(--blanc) 13%,transparent)}
.marq-t span em{font-style:normal;color:var(--vif);opacity:.85}
.marq-t span i{font-style:normal;width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--vif) 45%,transparent);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-t{animation:none}}

/* ══════════════ 3 · CALCULATEUR ══════════════ */
.calc{background:var(--ink);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 48% at 88% 12%,color-mix(in srgb,var(--vif) 11%,transparent),transparent 70%)}
.calc .wrap{position:relative;z-index:2}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);
  align-items:stretch;margin-top:clamp(32px,4.2vw,50px)}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}}
.calc-in,.calc-out{border-radius:20px;padding:clamp(24px,3vw,36px)}
.calc-in{display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid color-mix(in srgb,var(--blanc) 11%,transparent)}
.calc-f:first-of-type{margin-top:0}
/* la note de bas de colonne comble la hauteur laissée par la carte de droite */
.calc-tip{margin-top:auto;padding-top:clamp(24px,3vw,34px);display:flex;gap:12px;align-items:flex-start;
  font-size:.8rem;line-height:1.6;opacity:.55}
.calc-tip i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-family:var(--dpl);font-weight:800;font-size:.66rem;
  background:color-mix(in srgb,var(--vif) 16%,transparent);color:var(--vif);margin-top:.1em}
.calc-f{display:block}
.calc-f+.calc-f{margin-top:clamp(22px,2.8vw,30px)}
.calc-f-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.calc-f label{font-family:var(--dpl);font-weight:600;font-size:.88rem}
.calc-v{font-family:var(--dpl);font-weight:900;font-size:1.15rem;color:var(--vif);
  font-variant-numeric:tabular-nums}
.calc-f input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--vif) var(--fill,40%),
    color-mix(in srgb,var(--blanc) 14%,transparent) var(--fill,40%));
  outline:none;cursor:pointer}
.calc-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--vif);cursor:pointer;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vif) 20%,transparent);
  transition:transform .2s}
.calc-f input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.calc-f input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;
  background:var(--vif);cursor:pointer;box-shadow:0 0 0 4px color-mix(in srgb,var(--vif) 20%,transparent)}
.calc-hint{font-size:.75rem;opacity:.45;margin-top:9px}

.calc-out{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(165deg,color-mix(in srgb,var(--sapin) 62%,var(--ink)),var(--ink) 78%);
  border:1px solid color-mix(in srgb,var(--vif) 34%,transparent)}
.calc-out::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 100% 0,color-mix(in srgb,var(--vif) 18%,transparent),transparent 72%)}
.calc-out>*{position:relative;z-index:2}
.calc-lbl{font-family:var(--dpl);font-weight:800;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vif);opacity:.85}
.calc-big{font-family:var(--dpl);font-weight:900;letter-spacing:-.05em;line-height:.94;
  font-size:clamp(3.1rem,7vw,5.2rem);margin:.22em 0 .1em;color:var(--blanc);
  font-variant-numeric:tabular-nums}
.calc-big small{font-family:var(--txt);font-weight:500;font-size:.24em;letter-spacing:0;
  opacity:.62;margin-left:.4em}
.calc-sub{font-size:.92rem;line-height:1.6;opacity:.72;max-width:34ch}
.calc-rows{display:grid;gap:1px;margin:clamp(22px,2.8vw,30px) 0;
  background:color-mix(in srgb,var(--blanc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);border-radius:13px;overflow:hidden}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 16px;background:color-mix(in srgb,var(--ink) 62%,transparent);font-size:.85rem}
.calc-row b{font-family:var(--dpl);font-weight:800;color:var(--vif);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-row span{opacity:.72}
.calc-out .btn{margin-top:auto;align-self:flex-start}
.calc-fine{font-size:.72rem;opacity:.45;margin-top:16px;line-height:1.55}

/* ══════════════ 4 · BENTO DES CAPACITÉS ══════════════ */
.bento{background:var(--ink-2)}
.bento-g{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
  margin-top:clamp(32px,4.2vw,50px)}
.bc{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;padding:clamp(22px,2.6vw,30px);
  background:var(--ink);border:1px solid color-mix(in srgb,var(--blanc) 10%,transparent);
  transition:border-color .45s,transform .55s var(--ease)}
.bc::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(70% 90% at 0 0,color-mix(in srgb,var(--vif) 11%,transparent),transparent 70%)}
.bc:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--vif) 42%,transparent)}
.bc:hover::before{opacity:1}
.bc>*{position:relative;z-index:2}
.bc-lg{grid-column:span 3}
.bc-sm{grid-column:span 3}
.bc-th{grid-column:span 2}
@media(max-width:1000px){.bc-lg,.bc-sm,.bc-th{grid-column:span 6}}
.bc h3{font-family:var(--dpl);font-weight:700;font-size:1.06rem;letter-spacing:-.024em;margin-bottom:.5em}
.bc h3 span{font-weight:500;opacity:.6}
.bc p{font-size:.87rem;line-height:1.62;opacity:.66}
.bc-l{list-style:none;display:grid;gap:7px;margin-top:15px;font-size:.8rem;opacity:.66}
.bc-l li{display:flex;gap:.6em;align-items:flex-start}
.bc-l li::before{content:"";flex:none;width:13px;height:13px;margin-top:.22em;border-radius:4px;
  background-color:color-mix(in srgb,var(--vif) 20%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%2374E55C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.bc-viz{margin-top:auto;padding-top:clamp(20px,2.6vw,28px)}

/* mini-illustration : fil WhatsApp */
.mini-chat{display:grid;gap:7px}
.mini-b{max-width:82%;padding:8px 11px;border-radius:12px;font-size:.75rem;line-height:1.4}
.mini-in{justify-self:start;border-bottom-left-radius:4px;
  background:color-mix(in srgb,var(--blanc) 8%,transparent)}
.mini-out{justify-self:end;border-bottom-right-radius:4px;
  background:color-mix(in srgb,var(--vif) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--vif) 30%,transparent)}
/* mini-illustration : arbre de nœuds */
.mini-tree{display:grid;gap:9px;justify-items:center}
.mini-node{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:color-mix(in srgb,var(--vif) 13%,transparent);color:var(--vif);
  border:1px solid color-mix(in srgb,var(--vif) 26%,transparent)}
.mini-node svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.mini-fan{display:flex;gap:12px;position:relative;padding-top:16px}
.mini-fan::before{content:"";position:absolute;left:50%;top:0;width:1px;height:16px;
  background:color-mix(in srgb,var(--vif) 40%,transparent)}
.mini-fan::after{content:"";position:absolute;left:calc(50% - 40px);top:16px;width:80px;height:1px;
  background:color-mix(in srgb,var(--vif) 26%,transparent)}
/* mini-illustration : lignes de suivi */
.mini-rows{display:grid;gap:6px}
.mini-r{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--blanc) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--blanc) 8%,transparent);font-size:.72rem}
.mini-r u{text-decoration:none;width:6px;height:6px;border-radius:50%;flex:none;background:var(--vif)}
.mini-r u.w{background:color-mix(in srgb,var(--menthe) 60%,transparent)}
.mini-r u.o{background:color-mix(in srgb,var(--blanc) 26%,transparent)}
.mini-r em{font-style:normal;margin-left:auto;opacity:.5;font-size:.68rem}
/* mini-illustration : barres */
.mini-bars{display:flex;align-items:flex-end;gap:6px;height:74px}
.mini-bars i{flex:1;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--vif) 26%,transparent)}
.mini-bars i.hi{background:var(--vif)}
/* mini-illustration : horloge de relance */
.mini-clock{display:flex;align-items:center;gap:14px}
.mini-dial{position:relative;width:62px;height:62px;border-radius:50%;flex:none;
  background:conic-gradient(var(--vif) 0turn .68turn,color-mix(in srgb,var(--blanc) 12%,transparent) .68turn 1turn)}
.mini-dial::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink)}
.mini-dial b{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--dpl);font-weight:800;font-size:.78rem;color:var(--vif)}
.mini-clock div{font-size:.76rem;line-height:1.5;opacity:.62}

/* ══════════════ 5 · ACCORDÉON + PANNEAU (prism) ══════════════ */
.how{background:var(--ink);position:relative;overflow:hidden}
.how-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.6vw,64px);
  align-items:start;margin-top:clamp(32px,4.2vw,50px)}
@media(max-width:940px){.how-grid{grid-template-columns:1fr}}
.how-list{border-top:1px solid color-mix(in srgb,var(--blanc) 12%,transparent)}
.how-i{width:100%;text-align:left;display:block;padding:clamp(17px,2.1vw,23px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);cursor:pointer}
.how-i-hd{display:flex;align-items:baseline;gap:14px}
.how-i-n{font-family:var(--dpl);font-weight:800;font-size:.86rem;letter-spacing:.04em;
  opacity:.4;transition:color .35s,opacity .35s;font-variant-numeric:tabular-nums}
.how-i-t{font-family:var(--dpl);font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);
  letter-spacing:-.024em;opacity:.55;transition:opacity .35s}
.how-i[aria-expanded="true"] .how-i-n{color:var(--vif);opacity:1}
.how-i[aria-expanded="true"] .how-i-t{opacity:1}
.how-i-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.how-i[aria-expanded="true"] .how-i-d{grid-template-rows:1fr}
.how-i-d>div{overflow:hidden}
.how-i-d p{font-size:.88rem;line-height:1.65;opacity:.66;padding-top:11px;max-width:44ch}

/* le panneau visuel, un écran par étape */
.how-panel{position:relative;border-radius:22px;overflow:hidden;
  min-height:clamp(300px,34vw,420px);display:grid;place-items:center;
  padding:clamp(24px,3vw,40px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--sapin) 52%,var(--ink)),var(--ink) 76%);
  border:1px solid color-mix(in srgb,var(--vif) 24%,transparent)}
.how-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 78% 8%,color-mix(in srgb,var(--vif) 20%,transparent),transparent 70%)}
.how-scr{position:absolute;inset:clamp(24px,3vw,40px);display:grid;align-content:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.how-scr.on{opacity:1;transform:none;pointer-events:auto}
.scr-card{border-radius:13px;padding:13px 15px;
  background:color-mix(in srgb,var(--ink) 58%,transparent);
  border:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);
  display:flex;align-items:center;gap:12px;font-size:.82rem}
.scr-card b{font-family:var(--dpl);font-weight:700;font-size:.86rem}
.scr-card span{display:block;font-size:.72rem;opacity:.55;margin-top:1px}
.scr-card u{text-decoration:none;margin-left:auto;font-size:.7rem;color:var(--vif);
  font-variant-numeric:tabular-nums;flex:none}
.scr-ico{width:31px;height:31px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--vif) 14%,transparent);color:var(--vif)}
.scr-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.scr-t{font-family:var(--dpl);font-weight:800;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vif);opacity:.75;margin-bottom:4px}
.scr-bars{display:flex;align-items:flex-end;gap:7px;height:96px;margin-top:8px}
.scr-bars i{flex:1;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--vif) 24%,transparent)}
.scr-bars i.hi{background:var(--vif)}

/* ══════════════ 6 · COMPARATIF (prism) ══════════════ */
.vs{background:var(--ink-2)}
.vs-g{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(32px,4.2vw,50px)}
@media(max-width:820px){.vs-g{grid-template-columns:1fr}}
.vs-c{border-radius:20px;overflow:hidden;border:1px solid color-mix(in srgb,var(--blanc) 11%,transparent)}
.vs-a{border-color:color-mix(in srgb,var(--vif) 34%,transparent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--sapin) 44%,var(--ink)),var(--ink) 62%)}
.vs-b{background:var(--ink)}
.vs-hd{padding:clamp(22px,2.6vw,30px)}
.vs-hd h3{font-family:var(--dpl);font-weight:800;font-size:1.16rem;letter-spacing:-.028em;
  display:flex;align-items:center;gap:.6em}
.vs-hd p{font-size:.86rem;line-height:1.6;opacity:.65;margin-top:.6em}
.vs-dot{width:9px;height:9px;border-radius:50%;flex:none}
.vs-a .vs-dot{background:var(--vif)}
.vs-b .vs-dot{background:color-mix(in srgb,var(--blanc) 30%,transparent)}
.vs-l{list-style:none}
.vs-l li{display:flex;align-items:flex-start;gap:12px;padding:13px clamp(22px,2.6vw,30px);
  font-size:.86rem;line-height:1.5;
  border-top:1px solid color-mix(in srgb,var(--blanc) 9%,transparent)}
.vs-l li::before{content:"";flex:none;width:17px;height:17px;margin-top:.1em;border-radius:50%;
  background-size:12px;background-position:center;background-repeat:no-repeat}
.vs-a .vs-l li::before{background-color:color-mix(in srgb,var(--vif) 20%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%2374E55C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.vs-b .vs-l li::before{background-color:color-mix(in srgb,var(--blanc) 9%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6 8.4 8.4M8.4 3.6 3.6 8.4' fill='none' stroke='%23F2FCF2' stroke-opacity='.5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.vs-b .vs-l li{opacity:.62}

/* ══════════════ 7 · OUTILS ══════════════ */
.stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(28px,3.4vw,40px)}
.stack span{font-family:var(--dpl);font-weight:600;font-size:.86rem;
  padding:.6em 1.1em;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--blanc) 14%,transparent);
  transition:border-color .35s,background .35s,transform .4s var(--ease)}
.stack span:hover{border-color:color-mix(in srgb,var(--vif) 45%,transparent);
  background:color-mix(in srgb,var(--vif) 8%,transparent);transform:translateY(-3px)}
.stack-note{font-size:.82rem;opacity:.5;margin-top:22px;max-width:62ch;line-height:1.6}

/* ── repli sans JavaScript ────────────────────────────────────
   L'accordéon et son panneau reposent sur le script. Sans lui,
   quatre étapes sur cinq resteraient repliées et leurs écrans
   invisibles : on déplie tout et on empile les panneaux. */
/* le hero attend .is-ready, posée par le script : sans JS, le fond et
   l'indice de scroll resteraient invisibles */
.no-js .ah-bg{opacity:1;transform:none}
.no-js .ah-cue{opacity:.45}
.no-js .how-i-d{grid-template-rows:1fr}
.no-js .how-i-n{color:var(--vif);opacity:1}
.no-js .how-i-t{opacity:1}
.no-js .how-i{cursor:default}
.no-js .how-panel{min-height:0;display:grid;gap:14px;place-items:stretch}
.no-js .how-scr{position:static;inset:auto;opacity:1;transform:none;
  padding:16px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--blanc) 10%,transparent)}
/* le calculateur n'a aucun sens figé : on le remplace par sa consigne */
.no-js .calc-grid{grid-template-columns:1fr}
.no-js .calc-out .calc-big,.no-js .calc-out .calc-rows{display:none}

@media(prefers-reduced-motion:reduce){
  .wf-row+.wf-row::after{animation:none;opacity:0}
  .ah-note i,.wf-live i{animation:none}
}

/* ── ENTRÉE DU HERO ───────────────────────────────────────────
   L'objet se déploie, le contenu monte derrière. Les durées sont
   longues et les courbes molles : c'est ce qui fait la différence
   entre « ça bouge » et « ça respire ». */
.ah-bg{opacity:0;transform:scale(1.14);
  transition:opacity 1.6s var(--ease),transform 2.2s cubic-bezier(.16,1,.3,1)}
.ah.is-ready .ah-bg{opacity:1;transform:none}
.ah-cue{opacity:0;transition:opacity 1s var(--ease) .9s}
.ah.is-ready .ah-cue{opacity:.45}

/* le tore suit le curseur, et s'éloigne quand on quitte le hero */
.torus,.torus-2{will-change:transform}
.ah-bg{--ty:0deg;--tz:0deg}

/* départ du scroll : l'objet recule et s'efface, le contenu monte
   un peu moins vite — c'est ce décalage qui crée la profondeur */
.ah-bg{transform-origin:50% 45%}
.ah.is-out .ah-bg{opacity:calc(1 - var(--q,0) * 1.1);
  transform:scale(calc(1 + var(--q,0) * .16)) translateY(calc(var(--q,0) * 4vh))}
.ah.is-out .wrap{transform:translateY(calc(var(--q,0) * -6vh));
  opacity:calc(1 - var(--q,0) * 1.25)}

@media(prefers-reduced-motion:reduce){
  .ah-bg,.ah-cue{opacity:1!important;transform:none!important;transition:none}
  .ah.is-out .wrap{transform:none;opacity:1}
}

/* ══════════════ 8 · LE SOCLE — schéma de connexion ══════════════
   Remplace la soupe de pastilles : vos outils à gauche, le moteur au
   centre, ce qui en sort à droite. Les liens sont tracés en CSS. */
.socle{background:var(--ink);position:relative;overflow:hidden}
.socle::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 44% at 84% 16%,color-mix(in srgb,var(--vif) 10%,transparent),transparent 70%)}
.socle .wrap{position:relative;z-index:2}
.sc-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.6vw,38px);
  align-items:center;margin-top:clamp(34px,4.4vw,54px)}
@media(max-width:900px){.sc-grid{grid-template-columns:1fr;gap:20px}}
.sc-col{display:grid;gap:10px}
.sc-lbl{font-family:var(--dpl);font-weight:800;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.42;margin-bottom:4px}
.sc-item{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:12px;
  background:var(--ink-2);border:1px solid color-mix(in srgb,var(--blanc) 11%,transparent);
  font-size:.86rem;transition:border-color .4s,transform .45s var(--ease)}
.sc-item:hover{border-color:color-mix(in srgb,var(--vif) 45%,transparent);transform:translateX(4px)}
.sc-item u{text-decoration:none;width:7px;height:7px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--vif) 65%,transparent)}
.sc-item em{font-style:normal;margin-left:auto;font-size:.68rem;opacity:.4}

/* le moteur, au centre */
.sc-core{position:relative;display:grid;place-items:center;
  width:clamp(120px,15vw,168px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sapin) 88%,transparent),var(--ink) 88%);
  border:1px solid color-mix(in srgb,var(--vif) 42%,transparent);
  box-shadow:0 0 60px -14px color-mix(in srgb,var(--vif) 55%,transparent)}
.sc-core span{font-family:var(--dpl);font-weight:800;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vif);text-align:center;line-height:1.5}
/* l'anneau qui tourne autour du moteur : rappel de la marque */
.sc-core::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--vif) 32%,transparent);
  animation:scSpin 26s linear infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){.sc-core{width:120px;justify-self:center}}

.sc-note{font-size:.82rem;opacity:.5;margin-top:clamp(26px,3.2vw,38px);max-width:64ch;line-height:1.6}

/* ══════════════ 9 · LIVRABLES — bordereau de remise ══════════════ */
.livr{background:var(--ink-2)}
.lv{margin-top:clamp(32px,4.2vw,50px);border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);background:var(--ink)}
.lv-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px clamp(20px,2.4vw,28px);
  background:color-mix(in srgb,var(--vif) 7%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);
  font-family:var(--dpl);font-weight:800;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.72}
.lv-hd span:last-child{color:var(--vif);opacity:.9}
.lv-r{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;
  padding:15px clamp(20px,2.4vw,28px);font-size:.88rem;line-height:1.5;
  border-top:1px solid color-mix(in srgb,var(--blanc) 8%,transparent);
  transition:background .35s}
.lv-r:first-of-type{border-top:0}
.lv-r:hover{background:color-mix(in srgb,var(--vif) 5%,transparent)}
.lv-n{font-family:var(--dpl);font-weight:800;font-size:.72rem;opacity:.35;
  font-variant-numeric:tabular-nums}
.lv-t{flex:none;font-family:var(--dpl);font-weight:700;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.38em .7em;border-radius:99px;color:var(--vif);
  border:1px solid color-mix(in srgb,var(--vif) 30%,transparent);white-space:nowrap}
@media(max-width:640px){
  .lv-r{grid-template-columns:32px 1fr;row-gap:8px}
  .lv-t{grid-column:2;justify-self:start}
}

/* ══════════════ 10 · BUDGET — trois curseurs ══════════════
   On ne publie pas de prix, mais on montre ce qui le fait bouger. */
.budget{background:var(--ink)}
.bg-l{display:grid;gap:clamp(20px,2.6vw,30px);margin-top:clamp(32px,4.2vw,50px)}
.bg-i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,44px);
  align-items:center;padding:clamp(20px,2.4vw,28px);border-radius:16px;
  background:var(--ink-2);border:1px solid color-mix(in srgb,var(--blanc) 10%,transparent)}
@media(max-width:820px){.bg-i{grid-template-columns:1fr;gap:16px}}
.bg-i b{display:block;font-family:var(--dpl);font-weight:800;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vif);margin-bottom:.7em}
.bg-i h3{font-family:var(--dpl);font-weight:700;font-size:1.06rem;letter-spacing:-.022em;margin-bottom:.4em}
.bg-i p{font-size:.86rem;line-height:1.62;opacity:.66}
/* la règle graduée : deux extrêmes, un remplissage indicatif */
.bg-sc{display:grid;gap:9px}
.bg-bar{position:relative;height:8px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--blanc) 10%,transparent)}
.bg-bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--vif) 45%,transparent),var(--vif));
  width:var(--w,40%)}
.bg-ends{display:flex;justify-content:space-between;gap:14px;font-size:.74rem;opacity:.5}
.bg-ends span:last-child{text-align:right}

/* ══════════════ 11 · FAQ en deux colonnes ══════════════ */
.faq2{background:var(--ink-2)}
.fq-g{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.6vw,66px);
  align-items:start;margin-top:clamp(30px,4vw,46px)}
@media(min-width:941px){.fq-g>*:first-child{position:sticky;top:clamp(96px,13vh,132px)}}
@media(max-width:940px){.fq-g{grid-template-columns:1fr}}
.fq-aide{margin-top:clamp(22px,3vw,32px);padding:clamp(20px,2.4vw,26px);border-radius:16px;
  background:color-mix(in srgb,var(--vif) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--vif) 26%,transparent)}
.fq-aide h3{font-family:var(--dpl);font-weight:700;font-size:1rem;letter-spacing:-.02em;margin-bottom:.5em}
.fq-aide p{font-size:.85rem;line-height:1.6;opacity:.7;margin-bottom:1.1em}

/* ══════════════ PREUVE — un projet réel ══════════════ */
.preuve{background:var(--ink);position:relative;overflow:hidden}
.pv-g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,60px);
  align-items:center;margin-top:clamp(30px,4vw,46px)}
@media(max-width:900px){.pv-g{grid-template-columns:1fr}}
.pv-shot{position:relative;display:block;border-radius:18px;overflow:hidden;
  aspect-ratio:1100/507;border:1px solid color-mix(in srgb,var(--blanc) 12%,transparent);
  background:color-mix(in srgb,var(--sapin) 40%,var(--ink));
  transition:transform .6s var(--ease),border-color .45s}
.pv-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.92;
  transition:transform .8s var(--ease),opacity .5s}
.pv-shot:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--vif) 45%,transparent)}
.pv-shot:hover img{transform:scale(1.04);opacity:1}
.pv-go{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--dpl);font-weight:800;font-size:.72rem;
  background:var(--vif);color:var(--noir);padding:.55em 1em;border-radius:99px}
.pv-go svg{width:.85em;height:.85em}
.pv-q{font-family:var(--dpl);font-weight:700;letter-spacing:-.028em;line-height:1.28;
  font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:.8em}
.pv-m{font-size:.88rem;line-height:1.62;opacity:.68}
.pv-who{display:flex;align-items:center;gap:10px;margin-top:clamp(18px,2.4vw,26px);
  font-size:.8rem;opacity:.55}
.pv-who u{text-decoration:none;width:6px;height:6px;border-radius:50%;background:var(--vif);flex:none}