/* ============================================================
   UNKILLABLE COMPANIES — chassis commun (design system)
   Extrait de bootcamp-c1-26/index.html le 2026-09-21.
   Sert la home, la page Bootcamp et, plus tard, la version FR.
   Chaque page garde en local : la ligne has-js, le symbole #arw
   et son propre bloc .hero (meme nom de classe, composants differents).
   Reference : 04_PROJECTS/Unkillable_Companies_Club/Brand/
               Design_System_Unkillable_Companies_Club.md
   ============================================================ */
/* ============================================================
   UNKILLABLE COMPANIES — page Bootcamp
   But unique : faire candidater (appel de 30 min avec un fondateur).
   Meme grammaire que la home : tokens UC, filets 1 px, coins de
   cadrage, fleche 64x40, grain. Alternance encre / matiere claire.
   Schemas concept repris du kit de composants (DS §13) : cercles en
   tirets, points, mots ; ils eclosent depuis leur centre au scroll.
   Contenu : 01_COMPANY/Offer/Bootcamp.md (vault), rien d'autre.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--font:'General Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ink:#0b0e10; --ink-2:#262d32; --muted:#6b767c;
  --peach:#f6e8dc; --mist:#cddce2;
  --line-ink:rgba(11,14,16,.28);
  --accent:#35b0ff;

  --bg:#0b0e10;
  --fg:#ededed;
  --fg-2:rgba(237,237,237,.72);
  --fg-3:rgba(237,237,237,.48);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.28);

  --ease:cubic-bezier(.16,1,.3,1);
  /* schemas : clair par defaut (surface encre), redefini sur les surfaces claires */
  --fig-line:rgba(237,237,237,.34); --fig-line-hi:rgba(237,237,237,.8);
  --fig-line-soft:rgba(237,237,237,.42); --fig-line-faint:rgba(237,237,237,.18);
  --fig-dot:#ededed; --fig-halo:#0b0e10; --fig-txt:#ededed; --fig-muted:rgba(237,237,237,.6); --fig-area:rgba(237,237,237,.07);
  --gutter:clamp(20px,5vw,64px);
  --maxw:1180px;
  --topbar-h:42px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2 30V10M10 2H30' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font-family:var(--font);font-weight:400;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.55;letter-spacing:-.012em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:1px solid currentColor;outline-offset:5px}
/* ---------- structure ---------- */
.sec{position:relative;background:var(--bg);color:var(--fg);
  padding:clamp(72px,10vw,140px) 0;isolation:isolate}
.sec::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);opacity:.035}
.wrap{width:min(var(--maxw),100% - (var(--gutter) * 2));margin-inline:auto;position:relative;z-index:1}
/* matiere claire — degrade peche vers bleu-gris du DS */
.sec--light,.sec--paper{--fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--muted);
  --line:var(--line-ink); --line-2:rgba(11,14,16,.45); --bg:#eef1f3;
  --fig-line:rgba(11,14,16,.34); --fig-line-hi:rgba(11,14,16,.78);
  --fig-line-soft:rgba(11,14,16,.38); --fig-line-faint:rgba(11,14,16,.16);
  --fig-dot:var(--ink); --fig-halo:#eef1f3; --fig-txt:var(--ink); --fig-muted:var(--muted); --fig-area:rgba(11,14,16,.06);}
.sec--light{background:
    radial-gradient(58% 52% at 50% 26%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(162deg,var(--peach) 0%,#eef1f3 42%,#d4e0e7 76%,var(--mist) 100%);}
/* papier : aplat du DS (--paper), pour separer deux sections claires voisines */
.sec--paper{--bg:#f1f4f5;--fig-halo:#f1f4f5}
.sec--light::after,.sec--paper::after{opacity:.055;mix-blend-mode:multiply}
/* ---------- typographie ---------- */
.eyebrow{font-size:clamp(10.5px,.78vw,12px);font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg-3)}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.05em;line-height:.98}
h1{font-weight:400;font-size:clamp(2.5rem,6vw,5.2rem);letter-spacing:-.055em;line-height:.95;
  text-wrap:balance}
h2{font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.055em;line-height:.99;max-width:22ch;
  text-wrap:balance}
h3{font-size:clamp(1.35rem,2.3vw,1.9rem);letter-spacing:-.04em;line-height:1.05}
h4{font-size:clamp(1.08rem,1.6vw,1.3rem);letter-spacing:-.03em;line-height:1.15}
.lead{font-size:clamp(1.08rem,1.9vw,1.45rem);letter-spacing:-.025em;line-height:1.3;
  color:var(--fg-2);max-width:40ch;text-wrap:pretty}
.body{color:var(--fg-2);max-width:58ch;text-wrap:pretty}
.body + .body{margin-top:1em}
.note{margin-top:clamp(22px,2.6vw,30px);color:var(--fg-3);font-size:.94em}
/* fleche de lecture 64x40, toujours vers la droite */
.arrow{width:64px;height:40px;color:var(--fg-3);flex:none}
/* bouton — capitales et fleche oblique, sans cadre ni aplat */
.btn{display:inline-flex;align-items:center;gap:clamp(14px,1.5vw,22px);
  padding:6px 0;border:0;color:var(--fg);
  font-size:clamp(12px,.95vw,14.5px);text-transform:uppercase;letter-spacing:.1em;
  background:transparent;cursor:pointer;
  transition:opacity .35s var(--ease)}
.btn .arrow{width:clamp(17px,1.5vw,22px);height:clamp(17px,1.5vw,22px);
  color:currentColor;margin:0;transition:transform .35s var(--ease)}
.btn:hover{opacity:.62}
.btn:hover .arrow{transform:translate(3px,-3px)}
/* lien texte en capitales, souligne d'un filet */
.textlink{display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(11px,.82vw,12.5px);text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .3s var(--ease)}
.textlink:hover{border-color:var(--fg)}
.textlink .arrow{width:24px;height:15px;color:currentColor}
/* etiquette — filet sans fond, metadonnee */
.tag{display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;
  border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;line-height:1}
/* liste filetee */
.list{list-style:none}
.list li{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--line);color:var(--fg-2)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li::before{content:"";position:absolute;left:0;top:calc(14px + .78em);width:14px;height:1px;background:var(--fg-3)}
/* ---------- images : cadre, coins de cadrage, grain ---------- */
.frame{position:relative;overflow:hidden;background:#a7b1b7}
.frame img{width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.14;mix-blend-mode:multiply}
.corners i{position:absolute;z-index:3;width:clamp(15px,1.7vw,24px);height:clamp(15px,1.7vw,24px);
  background:#fff;-webkit-mask:var(--corner) center/100% 100% no-repeat;mask:var(--corner) center/100% 100% no-repeat}
.corners i:nth-child(1){left:18px;top:18px}
.corners i:nth-child(2){right:18px;top:18px;transform:rotate(90deg)}
.corners i:nth-child(3){right:18px;bottom:18px;transform:rotate(180deg)}
.corners i:nth-child(4){left:18px;bottom:18px;transform:rotate(270deg)}
/* ---------- grille de composition (filets pleine largeur) ---------- */
.grid{position:relative;margin-top:clamp(28px,3.6vw,48px)}
.row{position:relative}
.row-in{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.cell{position:relative;padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:8px}
.cell:first-child{padding-left:0}
.cell:last-child{padding-right:0}
.cell b{font-weight:500;font-size:clamp(1.02rem,1.55vw,1.26rem);letter-spacing:-.03em;line-height:1.2}
.cell p,.cell span:not(.eyebrow):not(.num){color:var(--fg-2);text-wrap:pretty}
.grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line);transform-origin:left center}
.row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);transform-origin:left center}
.cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line);transform-origin:center top}
.cell:first-child::before{display:none}
.num{display:block;font-weight:400;font-size:clamp(2.3rem,4.6vw,3.8rem);
  letter-spacing:-.06em;line-height:.95;color:var(--fg);font-variant-numeric:tabular-nums}
/* ---------- mises en page ---------- */
.head{display:flex;flex-direction:column;gap:clamp(15px,1.9vw,22px)}
.head .eyebrow{order:-1}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.split-top{align-items:start}
/* texte + schema, cote a cote ; .rev met le schema a gauche */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.duo.rev .fig-col{order:-1}
.duo-txt{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px)}
.duo-txt .list{margin-top:6px}
.fig-col{width:100%;max-width:520px;justify-self:center}
/* ============================================================
   SCHEMAS CONCEPT (DS §13) — cercles, points, mots
   Un <figure class="fig" data-box="W,H" data-center="cx,cy" data-rings="r;r;x,y,r,light">
   contient un <svg viewBox="0 0 W H"> (lignes eventuelles) et des etiquettes
   <i class="node [left|above|below|center] [nodot] [hi] [muted]" data-x data-y>.
   Le script cree les cercles et les points ; a l'arrivee dans l'ecran, les
   cercles s'ouvrent, les points eclosent depuis le centre, les lignes se tracent.
   ============================================================ */
.fig{position:relative;width:100%}
html:not(.has-js) .fig{display:none}
.fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fig .ring{fill:none;stroke:var(--fig-line);stroke-width:1.2;stroke-dasharray:3 7;stroke-linecap:round;
  opacity:0;transition:r 1.2s var(--ease) calc(var(--k,0) * 90ms),opacity .8s ease calc(var(--k,0) * 90ms)}
.fig .ring.hi{stroke:var(--fig-line-hi)}
.fig .ring.light{stroke:var(--fig-line-faint)}
.fig .dot{fill:var(--fig-dot);stroke:var(--fig-halo);stroke-width:3;opacity:0;
  transition:cx 1.2s var(--ease) calc(.35s + var(--k,0) * 40ms),cy 1.2s var(--ease) calc(.35s + var(--k,0) * 40ms),
             opacity .5s ease calc(.35s + var(--k,0) * 40ms)}
.fig .dot.hi{fill:var(--accent)}
.fig .area{fill:var(--fig-area);stroke:none}
.fig .ln{fill:none;stroke:var(--fig-line-soft);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset 1.1s var(--ease) calc(.4s + var(--i,0) * .12s)}
.fig.visible .ln{stroke-dashoffset:0}
.fig .node{position:absolute;width:0;height:0;display:flex;align-items:center;justify-content:flex-start;
  font-style:normal;z-index:1}
.fig .node > span{flex:none;white-space:nowrap;margin-left:14px;color:var(--fig-txt);
  font-size:clamp(12.5px,1.15vw,17px);font-weight:500;letter-spacing:-.02em;line-height:1.15;
  opacity:0;filter:blur(6px);
  transition:opacity .8s var(--ease) calc(.9s + var(--k,0) * 70ms),filter .8s var(--ease) calc(.9s + var(--k,0) * 70ms)}
.fig.visible .node > span{opacity:1;filter:none}
.fig .node > span small{display:block;margin-top:3px;font-size:.8em;font-weight:400;color:var(--fig-muted);letter-spacing:-.01em}
.fig .node.left{justify-content:flex-end}
.fig .node.left > span{margin:0 14px 0 0;text-align:right}
.fig .node.above{align-items:flex-end;justify-content:center}
.fig .node.above > span{margin:0 0 14px;text-align:center}
.fig .node.below{align-items:flex-start;justify-content:center}
.fig .node.below > span{margin:14px 0 0;text-align:center}
.fig .node.center{justify-content:center}
.fig .node.center > span{margin:0;text-align:center}
.fig .node.muted > span{color:var(--fig-muted);font-weight:400}
.fig-v{display:none}
/* ---------- bandeau formation (identique a la home) ---------- */
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;
  gap:18px;height:var(--topbar-h);padding:0 var(--gutter);overflow:hidden;white-space:nowrap;
  background:var(--ink);color:rgba(237,237,237,.72);border-bottom:1px solid rgba(255,255,255,.1);
  font-size:clamp(10.5px,.78vw,12px);text-transform:uppercase;letter-spacing:.1em}
.topbar b{font-weight:500;color:#fff}
.topbar .sep{margin:0 .5em;color:rgba(237,237,237,.48)}
.topbar-short{display:none}
.topbar-cta{display:inline-flex;align-items:center;gap:10px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s var(--ease)}
.topbar-cta .arrow{width:24px;height:15px;color:currentColor}
.topbar:hover .topbar-cta{border-color:#fff}
@media (max-width:359px){
.topbar{letter-spacing:.05em}
.topbar .sep{margin:0 .35em}
.topbar-cta .arrow{width:20px}
}
/* ---------- 01 hero : texte a gauche, portrait cadre a droite ---------- */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(34px,4.4vw,60px);margin-top:clamp(4px,1vw,12px)}
.meta{display:flex;flex-wrap:wrap;align-items:center;
  font-size:clamp(10.5px,.8vw,12px);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3)}
.meta span{white-space:nowrap}
.meta span + span::before{content:"·";margin:0 .8em;color:var(--fg-3)}
/* ---------- 03 l'ecart : deux chiffres, centres ---------- */
.gap{text-align:center}
.gap-nums{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:clamp(20px,5vw,80px);max-width:980px;margin:clamp(28px,4vw,52px) auto 0}
.gap-nums .big{display:block;font-weight:300;font-size:clamp(4.6rem,12.5vw,10.5rem);letter-spacing:-.065em;
  line-height:.9;font-variant-numeric:tabular-nums}
.gap-nums > div:first-child .big{color:var(--fg-3)}
.gap-nums > div:last-child .big{color:var(--fg)}
.gap-nums p{margin:16px auto 0;max-width:24ch;color:var(--fg-2)}
.gap-sep{width:1px;align-self:stretch;background:var(--line-2)}
.gap-line{margin:clamp(44px,6vw,80px) auto 0;font-size:clamp(1.45rem,3.1vw,2.5rem);letter-spacing:-.045em;
  line-height:1.1;max-width:24ch;text-wrap:balance}
.source{margin-top:18px;color:var(--fg-3);font-size:12px;line-height:1.4}
/* ---------- 05 le moteur : image + enonce ---------- */
.band{position:relative;width:100%;height:clamp(220px,42vh,440px)}
.band img{object-position:50% 58%}
.motor-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,80px);align-items:end}
.motor-grid h2{font-size:clamp(2.4rem,6vw,5rem);max-width:12ch}
/* ---------- 06 le company brain ---------- */
.principle{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line)}
.principle p{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.03em;line-height:1.25;max-width:32ch}
.principle .arrow{color:var(--fg);width:48px;height:30px}
/* ---------- 07 ce que vous emportez ---------- */
.outcomes .cell{gap:14px;padding-block:clamp(26px,3vw,40px)}
.outcomes h3{max-width:16ch}
/* ---------- 08 le parcours : chaine de cercles + semaines repliables ---------- */
.fig-d{max-width:880px;margin:clamp(44px,6vw,84px) auto 0}
.acts{margin-top:clamp(48px,6vw,90px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;gap:0 clamp(24px,3vw,44px)}
.act{display:grid;grid-template-rows:subgrid;grid-row:span 2}
.act-head{padding-bottom:clamp(16px,2vw,22px)}
.act-head .eyebrow{display:block;margin-bottom:10px}
.act-head p{margin-top:10px;color:var(--fg-2);font-size:.95em;text-wrap:pretty}
.wks{border-bottom:1px solid var(--line)}
.wk{border-top:1px solid var(--line)}
.wk summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:62px minmax(0,1fr) auto;
  gap:10px;align-items:baseline;padding:13px 0}
.wk summary::-webkit-details-marker{display:none}
.wk summary::after{content:"+";font-weight:300;font-size:1.3em;line-height:.8;color:var(--fg-3);
  transition:transform .35s var(--ease)}
.wk[open] summary::after{transform:rotate(45deg)}
.wk-n{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.wk-t{font-weight:500;letter-spacing:-.02em;font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.25}
.wk-in{padding:0 0 16px 72px}
.wk-in p{color:var(--fg-2);font-size:.94em;text-wrap:pretty}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* ---------- 09 ce qui est inclus ---------- */
.inside .cell{gap:10px}
.inside .cell b{margin-top:6px}
.included{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(24px,5vw,80px)}
/* ---------- 10 pour qui ---------- */
.fit{margin-top:clamp(36px,4.6vw,60px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,80px)}
.fit h3{margin-bottom:clamp(14px,2vw,22px)}
.fit .list li{color:var(--fg);padding-left:34px}
.fit .yes li::before,.fit .no li::before{width:auto;height:auto;background:none;top:14px;
  font-size:1.05em;line-height:1.55;color:var(--fg-3)}
.fit .yes li::before{content:"+"}
.fit .no li::before{content:"−"}
.fit .no li{color:var(--fg-2)}
/* ---------- 11 equipe ---------- */
.team{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px)}
.member .frame{aspect-ratio:4/5}
.member .frame img{object-position:55% 30%}
.member-txt{padding-top:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:8px}
.member-txt p{color:var(--fg-2);text-wrap:pretty}
.member .corners i{width:15px;height:15px}
.member .corners i:nth-child(1){left:12px;top:12px}
.member .corners i:nth-child(2){right:12px;top:12px}
.member .corners i:nth-child(3){right:12px;bottom:12px}
.member .corners i:nth-child(4){left:12px;bottom:12px}
.team-line{margin-top:clamp(36px,4.4vw,56px);display:flex;align-items:center;gap:clamp(16px,3vw,36px)}
.team-line p{font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.04em;line-height:1.15}
/* ---------- 13 prix et entree ---------- */
.offer{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.card,.price-card{position:relative;border:1px solid var(--line-2);padding:clamp(26px,3.4vw,44px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.card-title{font-weight:400;font-size:clamp(2.2rem,4.4vw,3.6rem);letter-spacing:-.055em;line-height:.98;
  color:var(--fg);max-width:12ch;text-wrap:balance}
.card-sub{color:var(--fg-3)}
.card .list,.price-card .list{align-self:stretch;margin:10px 0 18px}
.steps{list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);font-size:clamp(10.5px,.8vw,12px);
  letter-spacing:.1em;color:var(--fg-3);padding-top:.35em;font-variant-numeric:tabular-nums}
.steps p{margin-top:4px;color:var(--fg-2)}
/* ---------- 14 FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;padding:clamp(16px,2vw,22px) 0;font-size:clamp(1.02rem,1.5vw,1.2rem);
  letter-spacing:-.025em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:300;font-size:1.5em;line-height:.8;color:var(--fg-3);
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 clamp(18px,2.2vw,26px);color:var(--fg-2);max-width:62ch;text-wrap:pretty}
/* ---------- 15 appel final ---------- */
.final h2{max-width:18ch;font-size:clamp(2.2rem,5.6vw,4.4rem)}
.final .cta-row{margin-top:clamp(30px,4vw,48px)}
.final .later{margin-top:clamp(40px,5vw,64px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;color:var(--fg-2)}
footer{background:var(--ink);color:var(--fg-3);padding:clamp(28px,3.6vw,40px) 0;
  border-top:1px solid rgba(255,255,255,.1)}
.foot{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;
  font-size:clamp(11.5px,.85vw,13px);letter-spacing:.04em;text-transform:uppercase}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--fg)}
/* ---------- apparition — memes regles que la home ---------- */
.has-js .reveal{opacity:0;transform:translateY(26px);filter:blur(12px)}
.has-js .reveal.visible{opacity:1;transform:none;filter:blur(0);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms)}
.has-js .grid::before,.has-js .row::after{transform:scaleX(0)}
.has-js .cell::before{transform:scaleY(0)}
.has-js .grid.visible::before{transform:none;transition:transform 1.3s var(--ease) .15s}
.has-js .grid.visible .row::after{transform:none;
  transition:transform 1.3s var(--ease) calc(.15s + var(--i,0) * 110ms)}
.has-js .grid.visible .cell::before{transform:none;
  transition:transform 1.3s var(--ease) calc(.3s + var(--i,0) * 110ms)}
/* ---------- responsive ---------- */
@media (max-width:980px){
.split,.duo,.motor-grid,.included,.offer,.faq-grid{grid-template-columns:1fr}
.duo.rev .fig-col{order:0}
.fig-col{max-width:460px}
.acts{grid-template-columns:1fr;grid-template-rows:none;gap:clamp(36px,6vw,56px)}
.act{grid-template-rows:none;grid-row:auto}
.team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
h2{max-width:none}
.row-in{grid-template-columns:1fr}
.cell{padding-inline:0}
.cell::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;transform-origin:left center}
.has-js .cell::before{transform:scaleX(0)}
.arrow{width:48px;height:30px}
.topbar{gap:10px;padding-inline:16px}
.topbar-long{display:none}
.topbar-short{display:inline}
.gap-nums{grid-template-columns:1fr;gap:36px}
.gap-sep{display:none}
.fig-h{display:none}
.fig-v{display:block}
.fit,.team{grid-template-columns:1fr}
.member .frame{aspect-ratio:16/10}
.principle .arrow,.team-line .arrow{display:none}
.foot{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.has-js .reveal,.has-js .reveal.visible,
  .has-js .grid::before,.has-js .row::after,.has-js .cell::before,
  .fig .ring,.fig .dot,.fig .ln,.fig .node > span{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.fig .ln{stroke-dashoffset:0!important}
}