/* Maquette accueil V5, 19 octobre 2026.
   Tons, polices et mouvements repris de /opt/alta36-website/index.html, puis élargis. */
:root{
  --vellum:#FFFFFF; --paper:#FBF6EF; --cream:#F6EDDF; --deep:#F1E6D4;
  --ink:#1A1206; --ink-2:#241A0C; --muted:#6F6355; --dot:#ECE2D4; --line:#E2D6C5;
  --orange:#F0531C; --orange-deep:#C73D0C; --amber:#FF9E2C; --peach:#FFEFE0;
  --amber-soft:rgba(255,158,44,.30); --halo:rgba(240,83,28,.14);
  --on-dark:rgba(255,249,242,.95); --on-dark-soft:rgba(255,249,242,.66); --line-dark:rgba(255,255,255,.12);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --disp:"Bricolage Grotesque",Inter,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-md:16px; --r-lg:24px; --r-xl:34px;
  --shadow:0 30px 80px -20px rgba(26,18,6,.18);
  /* Échelle d'espacements (R3) : tout espacement de mise en page en dépend */
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:20px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:56px; --s-9:80px;
  --gap:var(--s-4); --pad:var(--s-6); --head:var(--s-8);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--amber-soft);}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
img{max-width:100%;display:block;}
a{color:inherit;}
section[id],header[id]{scroll-margin-top:84px;}

/* ===== MOUVEMENT : visible par défaut, html.js active l'état caché ===== */
/* Passe premium : l'apparition passe par la propriété translate (le survol garde transform pour lui),
   et le délai par --d, pour qu'un survol ne soit jamais retardé par la cascade d'entrée. */
:root{--ease-expo:cubic-bezier(.19,1,.22,1);}
.js .rv{opacity:0;translate:0 28px;transition:opacity .9s var(--ease-out) var(--d,0s),translate 1.1s var(--ease-expo) var(--d,0s);}
.js .rv.in{opacity:1;translate:none;}
.js .stag .rv:nth-child(2){--d:.09s;}
.js .stag .rv:nth-child(3){--d:.18s;}
.js .stag .rv:nth-child(4){--d:.27s;}
.js .stag .rv:nth-child(5){--d:.36s;}
/* Titres mot à mot : chaque mot monte et apparaît, en léger décalé */
.js .split .w{display:inline-block;opacity:0;translate:0 .42em;transition:opacity .75s var(--ease-out) var(--d,0s),translate 1.05s var(--ease-expo) var(--d,0s);}
.js .split.in .w{opacity:1;translate:none;}
/* Sous-titre du haut : ligne après ligne */
.js .sub.lines{opacity:1;translate:none;}
.js .sub.lines > *{opacity:0;translate:0 14px;transition:opacity .8s var(--ease-out) var(--d,0s),translate 1s var(--ease-expo) var(--d,0s);}
.js .sub.lines.in > *{opacity:1;translate:none;}

/* Soulignement dessiné */
.uw{position:relative;white-space:nowrap;color:var(--orange);}
.uw svg{position:absolute;left:0;right:0;bottom:-.3em;width:100%;height:.22em;overflow:visible;}
.uw path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;}
.js .uw path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s 1.05s var(--ease);}
.js #h1.in .uw path{stroke-dashoffset:0;}

/* Bandeau maquette */
.mq{background:var(--ink);color:var(--on-dark-soft);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:8px 16px;}
.mq b{color:var(--amber);font-weight:500;}

/* ===== NAV ===== */
nav{position:sticky;top:0;z-index:60;background:rgba(251,246,239,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--dot);}
.nav-in{max-width:1240px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);}
.logo span{color:var(--orange);}
.nav-links{display:flex;gap:26px;font-size:15px;font-weight:600;}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .2s;white-space:nowrap;position:relative;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-links a:hover,.nav-links a.cur{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.cur::after{transform:scaleX(1);}
.nav-cta{font-size:15px;font-weight:700;text-decoration:none;color:#fff;background:var(--ink);padding:11px 20px;border-radius:999px;transition:background .2s,transform .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--orange-deep);}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;}
.progress i{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;}

/* ===== BOUTONS ===== */
.cta-row{margin-top:var(--s-7);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;text-decoration:none;font-weight:700;font-size:17px;padding:17px 28px;border-radius:999px;transition:background .25s var(--ease),box-shadow .25s var(--ease),border-color .2s,transform .25s var(--ease);}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:hover .arr{transform:translateX(4px);}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-deep);}
.btn-ghost{color:var(--ink);border:1.5px solid var(--line);background:var(--vellum);}
.btn-ghost:hover{border-color:var(--ink);}

/* ===== HERO ===== */
.hero{position:relative;padding:68px 0 0;overflow:hidden;}
.hero .wrap{position:relative;}
.hero-head{margin-bottom:var(--s-7);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-8);align-items:center;}
.hero .cta-row .btn{flex:1 1 auto;}
.kicker{font-size:17px;font-weight:600;color:var(--muted);margin-bottom:22px;}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(44px,8vw,112px);line-height:.93;letter-spacing:-.04em;}
.hero .sub{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:620px;line-height:1.6;}
.hero .sub span,.hero .sub b{display:block;}
.hero .sub b{color:var(--ink);font-weight:700;margin-top:.7em;}

/* Vidéo d'ouverture */
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r-xl);background:var(--ink);overflow:hidden;box-shadow:0 40px 90px -24px rgba(26,18,6,.45),0 0 0 1px rgba(255,255,255,.04) inset;}
.constel{position:absolute;inset:0;width:100%;height:100%;}
.c-lines path{stroke:rgba(255,249,242,.13);stroke-width:1.5;fill:none;}
.c-flow path{stroke:var(--amber);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:14 220;animation:flow 3.2s linear infinite;opacity:.9;}
.c-flow path:nth-child(2){animation-delay:-.6s;}.c-flow path:nth-child(3){animation-delay:-1.2s;}.c-flow path:nth-child(4){animation-delay:-1.8s;}.c-flow path:nth-child(5){animation-delay:-2.4s;}.c-flow path:nth-child(6){animation-delay:-2.9s;}
@keyframes flow{from{stroke-dashoffset:234;}to{stroke-dashoffset:0;}}
.c-nodes circle{fill:var(--ink);stroke:rgba(255,249,242,.55);stroke-width:2;}
.c-core{fill:var(--orange);}
.video-ui{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 26px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(transparent,rgba(26,18,6,.75));}
.play{position:absolute;z-index:2;left:50%;top:50%;margin:-38px 0 0 -38px;width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .3s var(--ease);}
.play::after{content:"";border-left:20px solid var(--orange);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px;}
.video:hover .play{transform:scale(1.07);}
.video .tag{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);}
.video .cap{font-size:16px;color:var(--on-dark);}

/* Bandeau défilant */
.ticker{margin-top:84px;border-top:1px solid var(--dot);border-bottom:1px solid var(--dot);background:rgba(255,255,255,.55);overflow:hidden;padding:18px 0;}
.tk-row{display:flex;align-items:center;gap:28px;width:max-content;animation:scrollx 46s linear infinite;}
.tk-row span{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.tk-row span:nth-child(4n+1){color:var(--orange);}
.tk-row i{width:1px;height:22px;background:var(--line);flex:0 0 auto;}
.ticker:hover .tk-row{animation-play-state:paused;}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* ===== SECTIONS ===== */
section{padding:clamp(76px,9vw,136px) 0;position:relative;}
.sec-kicker{font-size:17px;font-weight:600;color:var(--muted);margin-bottom:var(--s-3);}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4.8vw,62px);line-height:1;letter-spacing:-.03em;max-width:880px;margin-bottom:var(--s-5);text-wrap:balance;}
.sec-intro{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:700px;line-height:1.6;}
.end-line{margin-top:var(--s-8);font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,2.8vw,34px);line-height:1.25;max-width:820px;}
.go{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--orange-deep);text-decoration:none;}
.go b{transition:transform .25s var(--ease);}
/* Zone de toucher agrandie sans changer la mise en page */
.porte .go,.links a:not(.main),.data-box a{position:relative;}
.porte .go::after,.links a:not(.main)::after,.data-box a::after{content:"";position:absolute;inset:-10px -8px;}

/* ===== 1. LE SYSTÈME ===== */
#systeme{overflow:hidden;background:var(--vellum);border-top:1px solid var(--dot);border-bottom:1px solid var(--dot);}
.sys{position:relative;margin-top:var(--head);display:grid;grid-template-columns:1fr minmax(290px,350px) 1fr;gap:var(--s-8);align-items:stretch;}
.flux{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;}
.flux .fl-base{fill:none;stroke:var(--line);stroke-width:1.5;}
.flux .fl-run{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:10 600;animation:flowfx 2.6s linear infinite;opacity:.0;transition:opacity .4s;}
.flux .fl-run.on{opacity:1;}
@keyframes flowfx{from{stroke-dashoffset:610;}to{stroke-dashoffset:0;}}
.sys-col{display:grid;grid-template-rows:repeat(3,1fr);gap:var(--gap);position:relative;z-index:1;}
.esp{background:var(--paper);border:1px solid var(--dot);border-radius:var(--r-md);padding:var(--s-5);display:grid;grid-template-columns:22px 1fr;gap:var(--s-3);align-items:start;align-content:start;text-decoration:none;color:inherit;transition:border-color .3s,background .3s,transform .35s var(--ease),box-shadow .35s var(--ease);}
.esp .ic{display:flex;align-items:center;height:1.2em;font-size:21px;}
.esp .ic svg{width:21px;height:21px;fill:none;stroke:var(--orange-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.esp h3{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.015em;margin-bottom:5px;line-height:1.2;}
.esp p{font-size:16px;color:var(--muted);line-height:1.55;}
.esp .go{display:none;margin-top:10px;}
.esp:hover,.esp.lit{border-color:var(--orange);background:#fff;transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(26,18,6,.22);}
.esp:hover .go b{transform:translateX(3px);}
.core{position:relative;z-index:1;display:block;align-self:center;text-decoration:none;background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);padding:42px 32px;text-align:center;box-shadow:0 30px 70px -20px rgba(26,18,6,.5);transition:transform .35s var(--ease);}
.core:hover,.core.lit{transform:scale(1.02);}
.core .m{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:12px;}
.core .n{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.08;display:block;margin-bottom:16px;}
.core .p{display:block;font-size:16px;color:var(--on-dark-soft);line-height:1.6;}
.core .go{margin-top:18px;color:var(--amber);}
.indep{margin-top:var(--s-9);border-radius:var(--r-lg);background:var(--ink);color:var(--on-dark);display:grid;grid-template-columns:minmax(272px,.9fr) repeat(3,1fr);overflow:hidden;box-shadow:var(--shadow);}
.indep .lbl{padding:var(--pad);display:flex;flex-direction:column;justify-content:center;background:var(--orange);}
.indep .lbl span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:8px;}
.indep .lbl b{font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.05;}
.indep .it{padding:var(--pad);border-left:1px solid var(--line-dark);}
.indep .it h3{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;color:#fff;}
.indep .it p{font-size:16.5px;color:var(--on-dark-soft);line-height:1.6;}

/* ===== 2. AU TRAVAIL (sombre) ===== */
.dark{background:var(--ink);color:var(--on-dark);overflow:hidden;}
.dark .wrap{position:relative;}
.dark h2{color:#fff;}
.dark .sec-intro{color:var(--on-dark-soft);}
.dark .end-line{color:#fff;}
.metiers{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-7);}
.metiers li{font-size:17px;font-weight:600;color:var(--on-dark-soft);}
.metiers li.on{color:var(--on-dark);}
.studio{margin-top:var(--s-5);display:grid;grid-template-columns:330px 1fr;gap:var(--s-7);align-items:start;}
.tabs{display:flex;flex-direction:column;gap:4px;}
.tabs button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;padding:16px 20px 16px 22px;border-radius:14px;transition:background .3s;}
.tabs button::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--line-dark);}
.tabs .t-n{display:block;font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--on-dark-soft);transition:color .3s;}
.tabs .t-d{display:block;font-size:15.5px;line-height:1.55;color:var(--on-dark-soft);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .4s;}
.tabs .bar{position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--amber);transform:scaleY(0);transform-origin:top;}
.tabs button:hover .t-n{color:#fff;}
.tabs button[aria-selected="true"]{background:rgba(255,255,255,.06);}
.tabs button[aria-selected="true"] .t-n{color:#fff;}
.tabs button[aria-selected="true"] .t-d{max-height:140px;opacity:1;margin-top:6px;}
.tabs button[aria-selected="true"] .bar{transform:scaleY(1);}
.studio.auto .tabs button[aria-selected="true"] .bar{animation:fill var(--dur,7s) linear forwards;}
@keyframes fill{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.tabs button:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.stage{position:sticky;top:110px;}
.frame{border-radius:18px;background:#2A1F12;padding:0;box-shadow:0 50px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;}
.frame-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#2A1F12;border-bottom:1px solid rgba(255,255,255,.06);}
.frame-bar .url{flex:1;max-width:420px;font-family:var(--mono);font-size:13px;color:var(--on-dark-soft);background:rgba(255,255,255,.06);border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.screens{position:relative;aspect-ratio:16/10;background:#fff;}
.screen{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.015);transition:opacity .55s var(--ease),transform .8s var(--ease-out);pointer-events:none;}
.screen.on{opacity:1;transform:none;pointer-events:auto;}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top left;}
.screen .open{position:absolute;right:var(--s-3);bottom:var(--s-3);display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;font-weight:700;line-height:1;color:#fff;background:var(--ink);text-decoration:none;border-radius:999px;padding:0 16px;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:background .2s;}
.screen .open:hover{background:var(--orange-deep);}
.screen .open[href="#"]{display:none;}
.stage-cap{display:none;margin-top:18px;font-size:16px;color:var(--on-dark-soft);line-height:1.55;}

/* ===== 3. SI NOUS VOUS AVONS ÉCRIT ===== */

/* ===== 4. PAR OÙ COMMENCER ===== */
#commencer{background:var(--cream);border-top:1px solid var(--dot);border-bottom:1px solid var(--dot);}
.portes{margin-top:var(--head);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);}
.porte{grid-column:span 2;grid-row:span 4;display:grid;grid-template-columns:1fr auto;grid-template-rows:subgrid;row-gap:0;align-content:start;background:var(--vellum);border:1px solid var(--dot);border-radius:var(--r-lg);padding:var(--pad);position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;}
.porte:nth-child(4){grid-column:2 / span 2;}
.porte:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line);}
.porte > *{grid-column:1 / -1;}
.porte .num{grid-column:1;grid-row:1;font-family:var(--disp);font-size:52px;font-weight:800;color:var(--orange);line-height:1;margin-bottom:var(--s-4);letter-spacing:-.04em;}
.porte h3{grid-row:2;font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--s-2);}
.porte p{grid-row:3;font-size:17px;color:var(--muted);line-height:1.62;}
.porte .go{grid-row:4;align-self:end;justify-self:start;margin-top:var(--s-5);}
.porte:hover .go b{transform:translateX(4px);}
.porte .rep{grid-column:2;grid-row:1;align-self:center;margin-bottom:var(--s-4);font-size:15px;font-weight:600;color:var(--orange-deep);}
.porte.top{border:1.5px solid var(--orange);}

/* ===== 5. ATELIERS ===== */
.duo{margin-top:var(--head);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.duo .c{background:var(--vellum);border:1px solid var(--dot);border-radius:var(--r-lg);padding:var(--pad);}
.duo .c .t{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:16px;}
.duo .c .t img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);}
.duo .c p{font-size:18px;color:var(--muted);line-height:1.68;}
.duo .c p b{color:var(--ink);}

/* L'arbre des possibles (passe R3) : estompé au repos, une branche jouée à la fois */
.arbre{margin:var(--s-5) 0 0;background:var(--ink);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 90px -30px rgba(26,18,6,.55);position:relative;}
.arbre-scroll{position:relative;padding:var(--s-6) var(--s-6) 0;}
.arbre-svg{display:block;width:100%;height:auto;max-width:1120px;margin:0 auto;-webkit-tap-highlight-color:transparent;}
.arbre figcaption{position:relative;padding:var(--s-5) var(--s-7) var(--s-7);display:grid;grid-template-columns:1fr auto;gap:var(--s-3) var(--s-7);align-items:end;}
.arbre-cap{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.2vw,27px);line-height:1.35;letter-spacing:-.015em;color:var(--on-dark);max-width:760px;text-wrap:balance;}
.arbre-cap em{font-style:normal;color:var(--amber);}
.arbre-hint{font-size:15px;color:var(--on-dark-soft);white-space:nowrap;}
.arbre-hint .t{display:none;}
@media (hover:none){.arbre-hint .m{display:none;}.arbre-hint .t{display:inline;}}

/* Dessin large */
.ab-ground{stroke:rgba(255,249,242,.12);stroke-width:1;}
.ab-root{fill:none;stroke:rgba(255,249,242,.2);stroke-width:1.2;stroke-linecap:round;}
.ab-src{font-family:var(--sans);font-size:17px;font-weight:500;fill:rgba(255,249,242,.46);transition:fill .3s;}
.ab-src.on{fill:#fff;}
.ab-trunk{fill:rgba(255,249,242,.26);}
.ab-branch{fill:none;stroke:rgba(255,249,242,.26);stroke-width:1.6;stroke-linecap:round;transition:stroke .35s,stroke-width .35s;}
.ab-lbl{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.01em;fill:rgba(255,249,242,.5);transition:fill .2s;}
.ab-br.on .ab-branch{stroke:rgba(255,249,242,.85);stroke-width:2;}
.ab-br.on .ab-lbl{fill:#fff;}
.ab-twig{fill:none;stroke:rgba(255,249,242,.7);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .24s var(--ease);}
.ab-lf{fill:var(--orange);transform:scale(0);transition:transform .3s var(--ease-out);}
.ab-lt{font-family:var(--sans);font-size:18px;font-weight:500;fill:#fff;opacity:0;transition:opacity .26s var(--ease),transform .32s var(--ease-out);}
.ab-br[data-i="0"] .ab-lt,.ab-br[data-i="1"] .ab-lt,.ab-br[data-i="2"] .ab-lt{transform:translateX(8px);}
.ab-br[data-i="3"] .ab-lt,.ab-br[data-i="4"] .ab-lt,.ab-br[data-i="5"] .ab-lt{transform:translateX(-8px);}
.ab-leaf.on .ab-twig{stroke-dashoffset:0;}
.ab-leaf.on .ab-lf{transform:none;transition-delay:.07s;}
.ab-leaf.on .ab-lt{opacity:1;transform:none;transition-delay:.1s;}
.ab-mem rect{fill:var(--ink);stroke:rgba(255,158,44,.45);stroke-width:1.2;transition:stroke .3s;}
.ab-mem text{font-family:var(--disp);font-size:18px;font-weight:700;fill:var(--amber);letter-spacing:-.005em;}
.ab-mem.on rect{stroke:var(--amber);}
.ab-sap{fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;opacity:0;stroke-dasharray:var(--len,900) var(--len,900);stroke-dashoffset:var(--len,900);}
.ab-sap-trunk{stroke-width:3;}
.ab-sap.go{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.5s) linear,opacity .15s;}
.ab-sap.out{opacity:0;stroke-dashoffset:0;transition:opacity .3s var(--ease);}
.ab-hit{cursor:pointer;outline:none;}
.ab-hit path{fill:none;stroke:transparent;stroke-width:46;pointer-events:stroke;}
.ab-hit rect{fill:transparent;pointer-events:all;}
.ab-hit:focus-visible path{stroke:rgba(255,158,44,.25);stroke-width:2;}
/* Mode « tout affiché » (mouvement réduit) */
.arbre.all .ab-br .ab-branch{stroke:rgba(255,249,242,.7);}
.arbre.all .ab-lbl{fill:#fff;}
.arbre.all .ab-leaf .ab-twig{stroke-dashoffset:0;}
.arbre.all .ab-leaf .ab-lf{transform:none;}
.arbre.all .ab-leaf .ab-lt{opacity:1;transform:none;}

/* Arbre adaptatif (tablette et téléphone), R3.1 : tronc au centre qui monte de la mémoire,
   branches en alternance, feuilles du côté de leur branche, racines vers les sources */
.arbre-m{display:none;position:relative;max-width:560px;margin:0 auto;--row:50px;--gut:34px;--lvh:190px;--trk:rgba(255,249,242,.26);}
.am{list-style:none;position:relative;padding:0 0 26px;min-height:calc(6 * var(--row) + var(--lvh));}
.am::before{content:"";position:absolute;left:50%;top:calc(var(--row) + 8px);bottom:0;width:5px;margin-left:-2.5px;background:var(--trk);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);}
.am-br{position:relative;display:grid;grid-template-columns:1fr var(--gut) 1fr;}
.am-name{all:unset;box-sizing:border-box;position:relative;grid-row:1;display:flex;align-items:flex-end;min-height:var(--row);padding-bottom:11px;cursor:pointer;font-family:var(--disp);font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:rgba(255,249,242,.5);text-wrap:balance;transition:color .2s;-webkit-tap-highlight-color:transparent;}
.am-l .am-name{grid-column:1;justify-content:flex-end;text-align:right;}
.am-r .am-name{grid-column:3;}
.am-name:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;}
.am-bough{position:absolute;top:calc(100% - 7px);height:24px;width:calc(var(--gut) / 2 + 72%);overflow:visible;pointer-events:none;}
.am-r .am-bough{left:calc(var(--gut) / -2);}
.am-l .am-bough{right:calc(var(--gut) / -2);transform:scaleX(-1);}
.am-bough path{fill:none;stroke:var(--trk);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .2s;}
.am-br.on .am-name{color:#fff;}
.am-br.on .am-bough path{stroke:var(--amber);}
.am-lv{grid-row:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);}
.am-l .am-lv{grid-column:1;}
.am-r .am-lv{grid-column:3;}
.am-lv ul{list-style:none;min-height:0;overflow:hidden;}
/* la gouttière du tronc entre dans la boîte masquée, pour que rameaux et feuilles restent visibles */
.am-r .am-lv ul{margin-left:calc(var(--gut) / -2);padding-left:calc(var(--gut) / 2);}
.am-l .am-lv ul{margin-right:calc(var(--gut) / -2);padding-right:calc(var(--gut) / 2);}
.am-lv li:first-child{padding-top:21px;}
.am-lv li{position:relative;display:flex;font-size:16px;line-height:1.25;color:#fff;padding:5px 0;opacity:0;transition:opacity .22s var(--ease),transform .3s var(--ease-out);}
.am-lv li span{text-wrap:balance;}
.am-lv li:last-child{padding-bottom:15px;}
.am-l .am-lv li{justify-content:flex-end;text-align:right;transform:translateX(8px);}
.am-r .am-lv li{transform:translateX(-8px);}
/* rameau depuis le tronc et feuille, dans la gouttière */
.am-lv li i{position:absolute;top:auto;margin-top:.625em;width:calc(var(--gut) / 2 - 3px);height:1.2px;background:rgba(255,249,242,.55);}
.am-r .am-lv li i{left:calc(var(--gut) / -2 + 3px);}
.am-l .am-lv li i{right:calc(var(--gut) / -2 + 3px);}
.am-lv li i::after{content:"";position:absolute;top:-4.5px;width:10px;height:9px;background:var(--orange);transform:scale(0);transition:transform .25s var(--ease-out);}
.am-r .am-lv li i::after{right:-1px;border-radius:0 80% 0 80%;transform-origin:0 50%;}
.am-l .am-lv li i::after{left:-1px;border-radius:80% 0 80% 0;transform-origin:100% 50%;}
.am-br.on .am-lv{grid-template-rows:1fr;}
.am-br.lit .am-lv li{opacity:1;transform:none;transition-delay:calc(var(--j) * var(--step,110ms));}
.am-br.lit .am-lv li i::after{transform:none;transition-delay:calc(var(--j) * var(--step,110ms));}
.am-mem{position:relative;z-index:1;text-align:center;}
.am-mem span{display:inline-block;font-family:var(--disp);font-size:17px;font-weight:700;color:var(--amber);border:1.2px solid rgba(255,158,44,.45);border-radius:5px;padding:7px 14px;background:var(--ink);transition:border-color .2s;}
.am-mem.on span{border-color:var(--amber);}
.am-roots{display:block;width:100%;height:30px;overflow:visible;}
.am-roots path{fill:none;stroke:rgba(255,249,242,.2);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .2s;}
.am-roots path.on{stroke:var(--amber);}
.am-roots .am-root-sap{stroke:transparent;}
.am-src{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 0;margin-top:6px;text-align:center;}
.am-src span{grid-column:var(--c);grid-row:var(--r);font-size:15px;color:rgba(255,249,242,.5);transition:color .2s;}
.am-src span.on{color:#fff;}
.am-sap{position:absolute;left:50%;width:2.5px;margin-left:-1.25px;background:var(--amber);border-radius:2px;transform:scaleY(0);transform-origin:50% 100%;opacity:0;pointer-events:none;}
.am-sap.go{opacity:1;transform:none;transition:transform var(--t,.3s) linear,opacity .1s;}
.am-sap.out{opacity:0;transform:none;transition:opacity .3s var(--ease);}
.arbre.all .am-lv{grid-template-rows:1fr;}
.arbre.all .am-lv li{opacity:1;transform:none;}
.arbre.all .am-lv li i::after{transform:none;}
.arbre.all .am-name{color:#fff;}
.arbre.all .am{min-height:0;}

/* Sans JavaScript : tout est affiché */
html:not(.js) .ab-lt{opacity:1;transform:none;}
html:not(.js) .ab-lf{transform:none;}
html:not(.js) .ab-twig{stroke-dashoffset:0;}
html:not(.js) .am-lv{grid-template-rows:1fr;}
html:not(.js) .am-lv li{opacity:1;transform:none;}
html:not(.js) .am-lv li i::after{transform:none;}

/* ===== 6. RÈGLES ===== */
#regles{background:var(--vellum);border-top:1px solid var(--dot);border-bottom:1px solid var(--dot);}
.logic-list{margin-top:var(--head);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.logic{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:var(--pad) var(--s-5);border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--dot);transition:transform .4s var(--ease),border-color .3s;}
.logic:hover{transform:translateY(-4px);border-color:var(--orange);}
.logic .ix{display:block;font-family:var(--mono);font-size:14px;color:var(--orange);font-weight:500;letter-spacing:.1em;margin-bottom:var(--s-6);}
.logic h3{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin-bottom:var(--s-2);}
.logic p{font-size:16.5px;color:var(--muted);line-height:1.6;}

/* ===== 7. QUI ON EST ===== */
.who{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);align-items:center;}
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.portrait{margin:0;}
.portrait:nth-child(2){margin-top:56px;}
.portrait .ph{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--deep);box-shadow:var(--shadow);}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s var(--ease-out);}
.portrait:hover img{transform:scale(1.04);}
.portrait figcaption{margin-top:16px;}
.portrait figcaption b{display:block;font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.015em;}
.portrait figcaption span{display:block;font-size:15px;color:var(--muted);margin-top:2px;}
.who-txt p{font-size:19px;color:var(--muted);line-height:1.7;}
.who-txt p b{color:var(--ink);}
.links{margin-top:var(--s-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);}
.links a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s;}
.links a:hover{text-decoration-color:var(--ink);}
.links a.main{display:inline-flex;align-items:center;min-height:46px;text-decoration:none;background:var(--ink);color:#fff;border-radius:999px;padding:0 var(--s-4);transition:background .2s;}
.links a.main:hover{background:var(--orange-deep);}

/* ===== 8. DONNÉES ===== */
#donnees{padding-top:0;}
.data-box{background:var(--vellum);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-8);display:grid;grid-template-columns:auto 1fr;gap:var(--s-7);align-items:start;box-shadow:var(--shadow);}
.lock{display:flex;align-items:center;height:1em;font-size:clamp(30px,3.6vw,46px);}
.lock svg{width:40px;height:40px;fill:none;stroke:var(--orange-deep);stroke-width:1.6;stroke-linecap:round;}
.data-box h2{font-size:clamp(30px,3.6vw,46px);}
.data-box p{font-size:18.5px;line-height:1.72;max-width:820px;color:var(--ink);}
.data-box a{display:inline-block;margin-top:var(--s-4);color:var(--orange-deep);font-weight:700;text-underline-offset:4px;}

/* ===== 9. QUESTIONS ===== */
#questions{background:var(--vellum);border-top:1px solid var(--dot);border-bottom:1px solid var(--dot);}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-8);align-items:start;}
.faq-list{border-top:1px solid var(--dot);}
.faq{border-bottom:1px solid var(--dot);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-5) 0;font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.28;transition:color .2s;}
.faq summary:hover{color:var(--orange-deep);}
.faq summary::-webkit-details-marker{display:none;}
.faq .pm{position:relative;flex:0 0 auto;width:24px;height:1.28em;transition:transform .35s var(--ease);}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--orange);border-radius:2px;transform:translate(-50%,-50%);}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq[open] .pm{transform:rotate(45deg);}
.faq p{padding:0 0 var(--s-5);font-size:17.5px;color:var(--muted);max-width:720px;line-height:1.68;}

/* ===== 10. CONTACT ===== */
.final{background:var(--ink);color:var(--on-dark);overflow:hidden;}
.final .wrap{position:relative;}
.final .inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;}
.final h2{color:#fff;}
.final .about p{font-size:19px;color:var(--on-dark-soft);line-height:1.7;max-width:520px;}
form{background:var(--vellum);color:var(--ink);border-radius:var(--r-xl);padding:var(--s-7);box-shadow:0 40px 90px -20px rgba(0,0,0,.5);}
form label{display:block;font-size:15px;color:var(--ink);margin:20px 0 8px;font-weight:600;}
form .two:first-child label{margin-top:0;}
form input,form select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:14px 15px;font-family:var(--sans);font-size:16.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s;}
form input:focus,form select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--halo);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.check{margin-top:22px;display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink);line-height:1.5;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--sans);}
.check input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--orange);padding:0;}
.check small{display:block;color:var(--muted);font-size:14px;font-weight:400;margin-top:2px;}
.check{font-weight:600;}
.check > span{text-wrap:balance;}
form button{margin-top:26px;width:100%;border:none;cursor:pointer;background:var(--orange);color:#fff;font-family:var(--sans);font-weight:700;font-size:17.5px;padding:18px;border-radius:999px;transition:background .2s,transform .2s;display:flex;align-items:center;justify-content:center;gap:10px;}
form button:hover{background:var(--orange-deep);transform:translateY(-1px);}
.form-ok{margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:12px;background:var(--peach);color:var(--ink);font-size:15px;line-height:1.5;}
.form-ok a{color:var(--orange-deep);font-weight:700;}
.form-note{margin-top:var(--s-3);font-size:14.5px;color:var(--muted);text-align:center;}

footer{padding:36px 0;background:var(--ink);border-top:1px solid var(--line-dark);}
.foot-in{max-width:1240px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
footer .logo{font-size:19px;color:#fff;}
footer p{font-size:14.5px;color:var(--on-dark-soft);}
footer a{color:var(--on-dark);text-decoration:none;}
footer a:hover{color:var(--amber);}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .nav-in{flex-wrap:wrap;padding-block:10px;}
  .nav-links{order:3;width:100%;overflow-x:auto;gap:20px;padding:4px 0 6px;scrollbar-width:none;}
  .nav-links::-webkit-scrollbar{display:none;}
  .porte .num{font-size:44px;}
  .porte:last-child:nth-child(odd){grid-column:1 / -1;}

  .sys{grid-template-columns:1fr 1fr;gap:var(--gap);}
  .sys .core{grid-column:1 / -1;grid-row:1;margin-bottom:var(--s-1);}
  .flux{display:none;}
  .esp .go{display:inline-flex;}
  .indep{grid-template-columns:1fr 1fr 1fr;}
  .indep .lbl{grid-column:1 / -1;}
  .indep .it:nth-child(2){border-left:none;}
  .studio{grid-template-columns:1fr;gap:20px;}
  .tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:8px;padding-bottom:4px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs{gap:var(--s-5);border-bottom:1px solid var(--line-dark);padding-right:var(--s-7);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);}
  .tabs button{flex:0 0 auto;padding:10px 0;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .tabs button::before,.tabs .bar,.tabs .t-d{display:none;}
  .tabs .t-n{font-size:16px;font-family:var(--sans);font-weight:600;}
  .tabs button[aria-selected="true"]{background:none;border-bottom-color:var(--amber);}
  .tabs button[aria-selected="true"] .t-n{color:#fff;}
  .stage{position:static;}
  .stage-cap{display:block;}
  .portes{grid-template-columns:1fr 1fr;}
  .porte,.porte:nth-child(4){grid-column:auto;}
  .logic-list{grid-template-columns:1fr 1fr;}
  .who{grid-template-columns:1fr;gap:var(--s-8);}
  .faq-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-4);}
}
@media (max-width:1100px) and (min-width:761px){
  section{padding:var(--s-9) 0;}
  h1{font-size:clamp(44px,7.4vw,82px);}
  body{font-size:17px;}
  .final .inner{grid-template-columns:1fr;gap:var(--s-7);}
  .final form{max-width:640px;}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-7);}
  .hero .video{max-width:600px;}
  .hero .cta-row{max-width:600px;}
}
@media (max-width:999px){
  .arbre-svg.arbre-d{display:none;}
  .arbre-m{display:block;}
  .arbre-scroll{padding:var(--s-6) var(--s-5) 0;}
  .arbre figcaption{grid-template-columns:1fr;padding:var(--s-5) var(--s-5) var(--s-6);}
  .arbre-hint{white-space:normal;}
}
@media (max-width:999px) and (min-width:761px){
  .arbre-m{max-width:640px;--row:56px;--gut:48px;--lvh:206px;}
  .am-name{font-size:22px;}
  .am-lv li{font-size:18px;}
  .am-src span{font-size:16px;}
}
@media (max-width:760px){
  .arbre-scroll{padding:var(--s-6) var(--s-3) 0;}
  .arbre-m{--gut:30px;}
  body{font-size:16.5px;}
  :root{--pad:var(--s-5);--head:var(--s-7);}
  .wrap{padding:0 var(--s-4);}
  .nav-in{padding-inline:var(--s-4);}
  .nav-cta{font-size:14px;padding:9px 15px;}
  .mq{font-size:13px;letter-spacing:.06em;}
  section{padding:72px 0;}
  .hero{padding-top:44px;}
  .kicker{font-size:15.5px;}
  h1{font-size:clamp(42px,12.5vw,60px);}
  .hero-head{margin-bottom:var(--s-6);}
  .video-ui{padding:14px 16px;}
  .play{width:60px;height:60px;margin:-30px 0 0 -30px;}
  .video .cap{font-size:14px;}
  .cta-row .btn{width:100%;justify-content:center;}
  .ticker{margin-top:var(--s-8);padding:14px 0;}
  .tk-row span{font-size:18px;}
  .sys{grid-template-columns:1fr;}
  .sys-col{grid-template-rows:none;}
  .core{padding:var(--s-6) var(--s-5);}
  .core .n{font-size:26px;}
  .indep{grid-template-columns:1fr;}
  .indep .it{border-left:none;border-top:1px solid var(--line-dark);}
  .frame{border-radius:12px;}
  .frame-bar{padding:9px 12px;}
  .frame-bar .url{font-size:13px;}
  .screen .open{right:var(--s-2);bottom:var(--s-2);font-size:13px;min-height:36px;padding:0 var(--s-2);}
  .portes,.duo,.logic-list{grid-template-columns:1fr;}
  .porte:last-child:nth-child(odd){grid-column:auto;}
  .duo .c p{font-size:17px;}
  .portraits{gap:14px;}
  .portrait:nth-child(2){margin-top:36px;}
  .portrait figcaption b{font-size:18px;}
  .portrait figcaption span{font-size:14px;}
  .who-txt p{font-size:17.5px;}
  .data-box{grid-template-columns:1fr;padding:var(--s-6) var(--s-5);gap:var(--s-4);}
  .lock{height:auto;}
  .data-box p{font-size:17px;}
  .faq summary{font-size:19px;padding:var(--s-4) 0;}
  .faq p{font-size:16.5px;}
  .final .inner{grid-template-columns:1fr;gap:var(--s-7);}
  .final .about p{font-size:17.5px;}
  .two{grid-template-columns:1fr;gap:0;}
  form{padding:var(--s-5) var(--s-4);border-radius:var(--r-lg);}
  .links a.main{width:100%;justify-content:center;}
  .logic{padding:var(--pad);}
  .arbre{border-radius:var(--r-lg);}
  form .two:first-child > div + div label{margin-top:20px;}
  .foot-in{align-items:flex-start;flex-direction:column;gap:var(--s-2);padding:0 var(--s-4);}
}

/* ===== MOUVEMENT RÉDUIT ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js .rv,.js .split .w,.js .sub.lines > *{opacity:1;transform:none;translate:none;}
  .js .uw path{stroke-dashoffset:0;}
}
.nw{white-space:nowrap;}
p,li,figcaption,.sec-intro{text-wrap:pretty;}
h3,.sec-kicker,.end-line,.faq summary{text-wrap:balance;}

.faq summary .q{flex:1;min-width:0;}

/* ===== 3. LA MACHINE (passe Puissance, 20 octobre 2026) ===== */
#machine{background:var(--paper);}
.mach{margin-top:var(--head);background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,auto auto auto 1fr auto);}
.mot{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0;padding:var(--s-7);min-width:0;}
.mot:nth-child(2n){border-left:1px solid var(--line-dark);}
.mot:nth-child(n+3){border-top:1px solid var(--line-dark);}
.mot h3{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.2;margin-bottom:var(--s-4);}
.mv{position:relative;height:212px;margin-bottom:var(--s-6);background:var(--ink-2);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);overflow:hidden;padding:var(--s-4) var(--s-4);}
.big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3);row-gap:4px;margin-bottom:var(--s-3);}
.big b{display:inline-block;font-family:var(--disp);font-weight:800;font-size:clamp(56px,5.4vw,80px);line-height:.92;letter-spacing:-.045em;color:var(--orange);white-space:nowrap;}
.big span{font-size:17px;font-weight:600;line-height:1.35;color:#fff;max-width:240px;}
.mot .tx{font-size:16.5px;line-height:1.6;color:var(--on-dark-soft);margin-bottom:var(--s-4);}
.mot .sm{align-self:end;font-size:15.5px;line-height:1.5;color:var(--on-dark-soft);border-top:1px solid var(--line-dark);padding-top:var(--s-3);}
.mot .sm b{color:#fff;font-weight:700;}

/* Données : les signaux qui arrivent */
.mv-feed{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
.feed{list-style:none;will-change:transform;}
.feed li{display:flex;align-items:center;gap:var(--s-3);height:34px;margin-bottom:5px;padding-left:var(--s-2);border-left:2px solid var(--line-dark);transition:border-color .9s var(--ease);}
.feed .k{flex:0 0 auto;min-width:148px;font-family:var(--mono);font-size:13px;color:var(--amber);white-space:nowrap;}
.feed .v{min-width:0;font-size:14.5px;color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .9s var(--ease);}
.feed li.new{border-left-color:var(--orange);}
.feed li.new .v{color:#fff;}
.feed li.in{animation:feedIn .5s var(--ease-out) both;}
@keyframes feedIn{from{opacity:0;}to{opacity:1;}}

/* Acquisition : la liste qui se qualifie */
.qual-head{display:flex;gap:var(--s-5);font-size:13.5px;color:var(--on-dark-soft);margin-bottom:var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--line-dark);}
.qual-head b{color:#fff;font-weight:700;}
.qual{list-style:none;}
.qual li{display:grid;grid-template-columns:minmax(0,1fr) 30% 20px;gap:var(--s-2);align-items:center;height:35px;}
.q-n{min-width:0;font-size:14.5px;color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s,opacity .4s;}
.q-s{margin-left:var(--s-2);color:rgba(255,249,242,.45);}
.qual .bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.qual .bar i{display:block;height:100%;background:rgba(255,249,242,.38);transform-origin:left;transform:scaleX(var(--w,0));transition:transform .7s var(--ease-out),background .4s;}
.q-t{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;color:var(--on-dark-soft);transition:opacity .3s;}
.qual li.t-A .q-n{color:#fff;}
.qual li.t-A .bar i{background:var(--orange);}
.qual li.t-A .q-t{color:var(--orange);}
.qual li.t-C .q-n{opacity:.5;}
.js .qual li:not(.f) .bar i{transform:scaleX(0);}
.js .qual li:not(.f) .q-t{opacity:0;}

/* Contenu : voir la section « Studio de contenu » de la passe premium, en fin de fichier */
.ias{display:flex;flex-wrap:wrap;margin-top:var(--s-4);padding-top:var(--s-2);border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--on-dark-soft);}
.ias span{padding:0 var(--s-2);transition:color .3s;}
.ias span:first-child{padding-left:0;}
.ias span+span{border-left:1px solid var(--line-dark);}
.ias span.on{color:var(--amber);}

/* Équipiers : le travail qui passe de main en main */
.relay{list-style:none;}
.relay li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s-2);align-items:center;min-height:34px;padding:2px 0 2px var(--s-2);border-left:2px solid var(--line-dark);transition:border-color .35s;}
.relay .w{font-family:var(--mono);font-size:13px;color:var(--on-dark-soft);transition:color .35s;}
.relay .v{font-size:14.5px;line-height:1.35;color:var(--on-dark-soft);transition:color .35s;}
.relay li.on{border-left-color:var(--orange);}
.relay li.on .w{color:var(--amber);}
.relay li.on .v{color:#fff;}

.mach-foot{margin-top:var(--s-6);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3) var(--s-6);flex-wrap:wrap;}
.mach-foot p{font-size:19px;line-height:1.5;max-width:760px;}
.mach-foot b{font-weight:700;}
.mach-foot .mach-date{font-size:14.5px;color:var(--muted);}

@media (max-width:1100px){
  .mot{padding:var(--s-6);}
  .q-s{display:none;}
  .feed li{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;height:46px;}
  .feed .k{min-width:0;}
  .feed .v{max-width:100%;}
}
@media (max-width:900px){
  .mach{grid-template-columns:1fr;grid-template-rows:none;}
  .mot{grid-row:auto;grid-template-rows:none;display:block;}
  .mot:nth-child(2n){border-left:none;}
  .mot+.mot{border-top:1px solid var(--line-dark);}
  .mot .sm{margin-top:0;}
  .mv{max-width:600px;}
}
@media (max-width:760px){
  .mach{border-radius:var(--r-lg);}
  .mot{padding:var(--s-5) var(--s-4) var(--s-6);}
  .mot h3{font-size:21px;}
  .mv{height:200px;padding:var(--s-3);margin-bottom:var(--s-5);}
  .mv-fmt,.mv-relay{height:auto;}
  .big b{font-size:56px;}
  .big span{font-size:16.5px;}
  .mot .tx{font-size:16px;}
  .mot .sm{font-size:15px;}
  .qual li{grid-template-columns:minmax(0,1fr) 28% 18px;}
  .relay li{grid-template-columns:1fr;gap:0;padding:5px 0 5px var(--s-2);}
  .mach-foot p{font-size:17.5px;}
}
@media (max-width:760px){
  .qual li{grid-template-columns:minmax(0,1fr) 18px;grid-template-areas:"n n" "b t";row-gap:6px;column-gap:var(--s-2);height:auto;padding:5px 0;}
  .q-n{grid-area:n;}
  .qual .bar{grid-area:b;}
  .q-t{grid-area:t;line-height:1;}
  .qual-head{margin-bottom:var(--s-1);}
  .mv-qual{height:auto;}
}
@media (max-width:1200px){.q-s{display:none;}}
@media (max-width:760px){.ias{flex-wrap:nowrap;font-size:13px;}.ias span{padding:0 7px;white-space:nowrap;}.ias span:first-child{padding-left:0;}}
@media (max-width:1100px){.mv-relay{height:auto;min-height:212px;}.big{flex-direction:column;align-items:flex-start;}}

/* =====================================================================
   PASSE PREMIUM (20 octobre 2026) : entrées, schéma, studio de contenu,
   cartes, boutons, focus. Seuls transform, translate, scale et opacity
   sont animés ; aucun halo, aucune lueur, aucune pastille.
   ===================================================================== */

/* ----- Détails : focus, sélection, appui ----- */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;}
.dark a:focus-visible,.dark button:focus-visible,.final a:focus-visible,.mach a:focus-visible{outline-color:var(--amber);}
.btn:focus-visible,.nav-cta:focus-visible,.links a.main:focus-visible{border-radius:999px;outline-offset:4px;}
summary{-webkit-tap-highlight-color:transparent;}

/* ----- Boutons : un aplat qui monte au survol, un léger appui au clic ----- */
.btn,.nav-cta,.links a.main{position:relative;isolation:isolate;overflow:hidden;}
.btn::before,.nav-cta::before,.links a.main::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease-expo);}
.btn{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s,transform .3s var(--ease);}
.btn-primary::before{background:var(--orange-deep);}
.btn-primary:hover{background:var(--orange);}
.btn-ghost::before{background:var(--ink);}
.btn-ghost:hover{color:#fff;border-color:var(--ink);}
.nav-cta::before,.links a.main::before{background:var(--orange);}
.nav-cta:hover,.links a.main:hover{background:var(--ink);}
.btn:hover::before,.nav-cta:hover::before,.links a.main:hover::before{transform:none;}
.btn:active,.nav-cta:active{transform:scale(.975);transition-duration:.12s;}
.btn .arr{display:inline-block;transition:transform .35s var(--ease-expo);}
/* Liens soulignés : le trait se tend au survol */
.links a:not(.main){text-decoration:none;padding-bottom:2px;background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-size:100% 1px,0 1px;background-position:0 100%,0 100%;transition:background-size .45s var(--ease-expo);}
.links a:not(.main):hover{background-size:100% 1px,100% 1px;}
.go b{display:inline-block;}

/* ----- Haut de page : titre mot à mot, puis le cadre vidéo qui se pose ----- */
.js .hero .video.rv{translate:0 44px;scale:.94;transition:opacity 1s var(--ease-out) var(--d,0s),translate 1.4s var(--ease-expo) var(--d,0s),scale 1.6s var(--ease-expo) var(--d,0s);}
.js .hero .video.rv.in{translate:none;scale:1;}
.js .hero .video > :not(.play){scale:1.1;transition:scale 2.2s var(--ease-expo) .5s;}
.js .hero .video.in > :not(.play){scale:1;}
.js .hero .video .play{opacity:0;scale:.6;transition:opacity .6s var(--ease-out) 1.25s,scale .9s var(--ease-expo) 1.25s,transform .3s var(--ease);}
.js .hero .video.in .play{opacity:1;scale:1;}
/* constellation de l'aperçu : les liaisons se tracent */
.js .c-lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out);}
.js .video.in .c-lines path{stroke-dashoffset:0;}
.js .video.in .c-lines path:nth-child(2){transition-delay:.75s;}.js .video.in .c-lines path:nth-child(3){transition-delay:.85s;}.js .video.in .c-lines path:nth-child(4){transition-delay:.95s;}
.js .video.in .c-lines path:nth-child(1){transition-delay:.65s;}.js .video.in .c-lines path:nth-child(5){transition-delay:1.05s;}.js .video.in .c-lines path:nth-child(6){transition-delay:1.15s;}
.js .c-nodes circle,.js .c-core{transform-box:fill-box;transform-origin:center;scale:0;transition:scale .7s var(--ease-expo);}
.js .video.in .c-core{scale:1;transition-delay:.55s;}
.js .video.in .c-nodes circle{scale:1;transition-delay:1.2s;}

/* ----- Le système : les métiers arrivent de chaque côté, la mémoire se pose, les liaisons se tracent ----- */
.js .sys .esp{opacity:0;translate:var(--sx,0) 0;transition:opacity .8s var(--ease-out) var(--d,0s),translate 1.1s var(--ease-expo) var(--d,0s),border-color .3s,background .3s,transform .35s var(--ease),box-shadow .35s var(--ease);}
.js .sys .sys-col:first-of-type .esp{--sx:-32px;}
.js .sys .sys-col:last-child .esp{--sx:32px;}
.js .sys .esp:nth-child(1){--d:.3s;}.js .sys .esp:nth-child(2){--d:.42s;}.js .sys .esp:nth-child(3){--d:.54s;}
.js .sys.in .esp{opacity:1;translate:none;}
.js .sys .core{opacity:0;scale:.9;transition:opacity .9s var(--ease-out) .12s,scale 1.2s var(--ease-expo) .12s,transform .35s var(--ease);}
.js .sys.in .core{opacity:1;scale:1;}
.flux .fl-base{stroke-dasharray:1;stroke-dashoffset:0;}
.js .flux .fl-base{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) var(--d,.8s);}
.js .sys.in .flux .fl-base{stroke-dashoffset:0;}
.flux .fl-base.on{stroke:rgba(240,83,28,.45);}
.esp .ic svg{transition:stroke .3s,transform .5s var(--ease-expo);}
.esp:hover .ic svg,.esp.lit .ic svg{transform:scale(1.12);}
.core{transition:transform .5s var(--ease-expo),box-shadow .5s var(--ease);}
.core:hover{box-shadow:0 40px 80px -24px rgba(26,18,6,.55);}
.indep .it h3{transition:transform .5s var(--ease-expo);}
.indep .it:hover h3{transform:translateX(4px);}

/* ----- Au travail : le cadre de démo se pose en suivant le défilement ----- */
.frame{transition:box-shadow .5s var(--ease);}

/* ----- Cartes : profondeur et filet orange qui se tend au survol ----- */
.js .porte.rv,.js .logic.rv,.js .duo .c.rv{transition:opacity .9s var(--ease-out) var(--d,0s),translate 1.1s var(--ease-expo) var(--d,0s),transform .5s var(--ease-expo),box-shadow .5s var(--ease),border-color .3s;}
.porte,.logic,.duo .c{position:relative;}
.porte::before,.logic::before,.duo .c::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-expo);}
.porte:hover::before,.logic:hover::before,.duo .c:hover::before{transform:scaleX(1);}
.porte:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(26,18,6,.04),0 28px 60px -28px rgba(26,18,6,.32);}
.porte .num{transition:transform .6s var(--ease-expo),color .3s;transform-origin:left bottom;}
.porte:hover .num{transform:translateX(3px) scale(1.06);color:var(--orange-deep);}
.logic:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(26,18,6,.28);}
.logic .ix{transition:transform .5s var(--ease-expo),color .3s;}
.logic:hover .ix{transform:translateX(4px);color:var(--orange-deep);}
.duo .c:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(26,18,6,.26);}
.duo .c .t img{transition:transform .6s var(--ease-expo);}
.duo .c:hover .t img{transform:scale(1.08);}
.portrait .ph{transition:transform .8s var(--ease-expo),box-shadow .6s var(--ease);}
.portrait:hover .ph{transform:translateY(-4px);}
.faq summary .q{transition:transform .45s var(--ease-expo);}
.faq summary:hover .q{transform:translateX(3px);}

/* ----- La machine : les quatre moteurs entrent l'un après l'autre ----- */
.js .mach .mot{opacity:0;translate:0 22px;transition:opacity .8s var(--ease-out) var(--d,0s),translate 1s var(--ease-expo) var(--d,0s),background .4s;}
.js .mach .mot:nth-child(1){--d:.15s;}.js .mach .mot:nth-child(2){--d:.27s;}.js .mach .mot:nth-child(3){--d:.39s;}.js .mach .mot:nth-child(4){--d:.51s;}
.js .mach.in .mot{opacity:1;translate:none;}
.mot:hover{background:rgba(255,255,255,.018);}
.big b{font-variant-numeric:tabular-nums;}
/* Équipiers : le relais avance, une barre suit la tâche en cours */
.relay li{position:relative;}
.relay li::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;}
.relay li.on::after{animation:relayRun 1.15s linear forwards;}
@keyframes relayRun{to{transform:scaleY(1);}}
.relay li.on{border-left-color:rgba(240,83,28,.22);}
.relay li .v{transition:color .35s,transform .45s var(--ease-expo);}
.relay li.on .v{transform:translateX(3px);}

/* ----- Studio de contenu : six contenus qui naissent d'une même actualité, puis se rangent ----- */
.mv-fmt{height:auto;container-type:inline-size;padding:var(--s-4);}
.fmt-src{position:relative;z-index:3;display:flex;flex-direction:column;gap:3px;padding:11px 14px 12px;margin-bottom:var(--s-4);border:1px solid var(--line-dark);border-left:2px solid var(--orange);border-radius:4px 10px 10px 4px;background:rgba(255,255,255,.035);transition:border-color .4s,background .4s;}
.fmt-src.hot{border-color:rgba(255,158,44,.55);border-left-color:var(--orange);background:rgba(255,255,255,.06);}
.fs-k{font-size:13px;font-weight:600;line-height:1.2;color:var(--amber);}
.fs-h{font-family:var(--disp);font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance;}
.fmt{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) 10px;}
@container (min-width:360px){.fmt{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ct{position:relative;z-index:1;min-width:0;container-type:inline-size;}
.mv-fmt.wait .ct{opacity:0;}
.cv{position:relative;aspect-ratio:5/4;border-radius:8px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 28px -14px rgba(0,0,0,.7);transition:transform .45s var(--ease-expo);}
@container (max-width:119px){.cv{aspect-ratio:4/5;}}
.cv img{display:block;}
.cv p{margin:0;}
.cl{display:block;margin-top:7px;font-size:13px;line-height:1.25;color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;}
.ct.on .cl{color:#fff;}
.ct.on .cv{transform:translateY(-4px);}
/* article */
.ct-art img{width:100%;height:52%;object-fit:cover;}
.ct-art p{padding:7px 9px 0;font-family:var(--disp);font-size:13.5px;font-weight:700;line-height:1.12;letter-spacing:-.01em;}
/* post */
.ct-post .cv{display:flex;flex-direction:column;gap:5px;padding:8px 9px 9px;}
.pa{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.1;}
.pa img{flex:0 0 auto;width:20px;height:20px;border-radius:50%;object-fit:cover;}
.pa b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-post p{font-size:13px;font-weight:500;line-height:1.18;}
.pv{flex:1;min-height:24px;display:flex;align-items:flex-end;gap:5px;padding:5px 8px;border-radius:5px;background:var(--cream) url(assets/studio/carrousel-fond.webp) 50% 50%/cover;overflow:hidden;}
.pv b{font-family:var(--disp);font-size:24px;font-weight:800;line-height:.92;letter-spacing:-.03em;color:var(--orange);white-space:nowrap;}
.pv span{font-size:13px;line-height:1.1;color:var(--ink);white-space:nowrap;}
/* carrousel : les pages défilent */
.ct-car .cv{background:var(--cream);}
.cr-track{display:flex;width:400%;height:100%;transition:transform .7s var(--ease-expo);}
.cr-p{position:relative;flex:0 0 25%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 10px 26px;background:var(--cream) url(assets/studio/carrousel-fond.webp) 50% 50%/cover;}
.cr-p b{font-family:var(--disp);font-size:28px;font-weight:800;line-height:1;color:var(--orange);margin-bottom:3px;}
.cr-p p{font-size:13px;font-weight:600;line-height:1.16;color:var(--ink);}
.cr-c{justify-content:flex-start;}
.cr-c img{position:absolute;left:0;right:0;bottom:0;width:100%;height:52%;object-fit:cover;object-position:50% 72%;}
.cr-c p{position:relative;font-family:var(--disp);font-size:14px;font-weight:800;line-height:1.08;letter-spacing:-.01em;max-width:92%;}
.cr-n{position:absolute;right:6px;bottom:6px;font-family:var(--mono);font-size:13px;line-height:1;color:var(--ink);background:rgba(255,255,255,.88);border-radius:4px;padding:3px 5px;}
/* vidéo : elle joue */
.ct-vid .cv{background:#17110a;}
.ct-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform-origin:72% 55%;}
.ct-vid p{position:absolute;left:9px;right:9px;top:8px;font-family:var(--disp);font-size:14px;font-weight:700;line-height:1.1;color:#fff;}
.vt{position:absolute;right:7px;bottom:9px;font-family:var(--mono);font-size:13px;line-height:1;color:#fff;background:rgba(15,10,5,.72);border-radius:3px;padding:2px 4px;}
.vb{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16);}
.vb i{display:block;height:100%;background:var(--orange);transform:scaleX(.18);transform-origin:left;}
.mv-fmt.live .ct-vid img{animation:vidKb 10s ease-in-out infinite alternate;}
.mv-fmt.live .vb i{animation:vidBar 7s linear infinite;}
@keyframes vidKb{from{transform:scale(1);}to{transform:scale(1.14) translateX(-4%);}}
@keyframes vidBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* newsletter */
.ct-nl img{width:100%;height:40%;object-fit:cover;}
.ct-nl p{padding:7px 9px 0;font-family:var(--disp);font-size:13.5px;font-weight:700;line-height:1.12;letter-spacing:-.01em;}
/* annonce */
.ct-ad .cv{background:var(--paper);}
.ct-ad img{position:absolute;top:0;right:0;bottom:0;width:50%;height:100%;object-fit:cover;object-position:78% 45%;}
.ct-ad p{position:absolute;left:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 7px 0 9px;font-size:13px;font-weight:600;line-height:1.15;color:var(--ink);}
.ct-ad p b{display:block;font-family:var(--disp);font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--orange);margin-bottom:3px;}
/* petites vignettes (moins de 120 px) : un peu plus serré */
@container (max-width:132px){
  .ct-art p,.ct-nl p{padding:6px 7px 0;font-size:13px;}
  .ct-post .cv{padding:7px;gap:4px;}
  .pa img{width:18px;height:18px;}
  .pv b{font-size:21px;}
  .cr-p{padding:7px 8px 24px;}
  .cr-p b{font-size:24px;}
  .ct-vid p,.cr-c p{font-size:13px;}
  .ct-ad p{padding:0 5px 0 7px;}
  .ct-ad p b{font-size:19px;}
}
/* sur ordinateur, la ligne du bas (studio et équipiers) prend la hauteur du studio */
@media (min-width:901px){
  .mv-relay{height:auto;display:flex;flex-direction:column;padding-block:var(--s-5);}
  .relay{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
  .relay li{flex:1;max-height:76px;}
}

/* ----- Défilement : le cadre de démo et les portraits suivent la lecture (là où le navigateur sait le faire) ----- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .studio .frame{animation:frameIn linear both;animation-timeline:view();animation-range:entry 0% cover 32%;}
    @keyframes frameIn{from{transform:translateY(36px) scale(.95);}to{transform:none;}}
    .portrait:nth-child(2) .ph{animation:portraitDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
    .portrait:nth-child(1) .ph{animation:portraitDrift2 linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
    @keyframes portraitDrift{from{translate:0 26px;}to{translate:0 -26px;}}
    @keyframes portraitDrift2{from{translate:0 -10px;}to{translate:0 10px;}}
  }
}

/* ----- Mouvement réduit : tout est posé, rien ne bouge ----- */
@media (prefers-reduced-motion:reduce){
  .js .sys .esp,.js .sys .core,.js .mach .mot,.js .hero .video.rv,.js .hero .video > *,.js .hero .video .play{opacity:1;translate:none;scale:none;}
  .js .flux .fl-base,.js .c-lines path{stroke-dashoffset:0;}
  .js .c-nodes circle,.js .c-core{scale:none;}
  .mv-fmt.wait .ct{opacity:1;}
  .studio .frame,.portrait .ph{animation:none!important;}
}

/* =====================================================================
   DÉMO INTÉGRÉE (20 octobre 2026) : la vraie démo du cabinet dans le cadre.
   Ordinateur : la page de démo garde ses 1440 x 900 et se réduit au cadre (--k posé par app.js).
   Téléphone : la version téléphone (390 x 800) dans un cadre de téléphone, jouable après « Essayer la démo ».
   ===================================================================== */
.frame-bar{gap:16px;}
.frame-bar .hint{margin-left:auto;font-size:13.5px;color:var(--on-dark-soft);white-space:nowrap;}
.frame-bar .hint .t{display:none;}
@media (hover:none){.frame-bar .hint .m{display:none;}.frame-bar .hint .t{display:inline;}}
.frame-bar .full{display:inline-flex;align-items:center;gap:6px;min-height:30px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;border-radius:8px;padding:0 10px;background:rgba(255,255,255,.08);transition:background .2s;white-space:nowrap;}
.frame-bar .full b{color:var(--amber);font-weight:600;}
.frame-bar .full:hover{background:rgba(255,255,255,.16);}
.frame-bar .full:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.screen .sc-m{display:none;}
.screen img{display:block;}
.live-box{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .45s var(--ease);pointer-events:none;}
.live-box.on{opacity:1;pointer-events:auto;}
/* classe propre à l'iframe : « live » est déjà l'état animé du studio de contenu (.mv-fmt.live) */
.live-frame{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;display:block;background:#fff;transform:scale(var(--k,.5));transform-origin:0 0;}
/* écran tactile : c'est le voile « Essayer la démo » qui protège le défilement ; couper les gestes de l'iframe
   puis les rendre faisait partir le premier glissé vers la page */
.try{all:unset;box-sizing:border-box;position:absolute;inset:0;z-index:3;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;-webkit-tap-highlight-color:transparent;}
.try[hidden]{display:none;}
.try span{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;box-shadow:0 12px 28px rgba(0,0,0,.28);transition:background .2s,transform .2s var(--ease-out);}
.try:hover span{background:var(--orange-deep);}
.try:active span{transform:scale(.97);}
.try:focus-visible span{outline:2px solid var(--amber);outline-offset:3px;}
.try-end{all:unset;box-sizing:border-box;display:none;}

@media (max-width:760px){
  /* le cadre devient un téléphone : la barre passe dessous, sans l'adresse */
  .studio .frame{display:flex;flex-direction:column;align-items:center;background:none;box-shadow:none;border-radius:0;overflow:visible;}
  .studio .frame-bar{order:3;width:100%;max-width:336px;background:none;border:0;padding:14px 0 0;justify-content:space-between;}
  .studio .frame-bar .url{display:none;}
  .studio .frame-bar .hint{margin-left:0;font-size:14px;}
  .studio .frame-bar .full{min-height:44px;padding:0 14px;font-size:14px;}
  .screens{width:min(336px,100%);aspect-ratio:390/800;max-height:calc(100svh - 150px);min-height:440px;border:9px solid #0D0905;border-radius:46px;background:#fff;overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -24px rgba(0,0,0,.7);isolation:isolate;}
  .screen .sc-d{display:none;}
  .screen .sc-m{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
  .live-frame{width:390px;height:800px;}
  .try-end{order:2;display:inline-flex;align-items:center;justify-content:center;margin-top:14px;min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
    color:#fff;font-weight:600;font-size:15px;border:1px solid rgba(255,255,255,.28);transition:background .2s;}
  .try-end[hidden]{display:none;}
  /* pendant l'essai, la sortie reste à portée de pouce, quelle que soit la position de la page */
  .try-end:not([hidden]){position:fixed;z-index:60;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;
    background:var(--ink);border-color:rgba(255,255,255,.22);box-shadow:0 12px 30px rgba(0,0,0,.45);white-space:nowrap;}
  .try-end:active{background:#2A1F12;}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  /* le téléphone se pose : il monte et se redresse en arrivant */
  .js .studio .screens{opacity:0;transform:translateY(40px) scale(.94) rotate(-1.5deg);transition:opacity .9s var(--ease-out),transform 1.2s var(--ease-expo);}
  .js .studio.in .screens{opacity:1;transform:none;}
}

/* Téléphone plus fort (20 octobre 2026) : la vidéo du haut, la machine.
   Seuls transform et opacity bougent ; liés au défilement là où le navigateur le permet (Chrome, Safari 26). */
@media (max-width:760px){
  .hero .video{width:calc(100% + 2 * var(--s-2));margin-left:calc(-1 * var(--s-2));border-radius:22px;}
  .big b{font-size:64px;}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* la vidéo grandit en arrivant au centre de l'écran */
    .hero .video{animation:telVideo linear both;animation-timeline:view();animation-range:entry 0% cover 42%;}
    @keyframes telVideo{from{transform:scale(.86);opacity:.55;}to{transform:none;opacity:1;}}
    /* la machine : chaque moteur pose son visuel, puis son chiffre glisse en place */
    .mach .mot .mv{animation:telMv linear both;animation-timeline:view();animation-range:entry 0% cover 30%;}
    @keyframes telMv{from{transform:translateY(36px) scale(.9);opacity:.25;}to{transform:none;opacity:1;}}
    .mach .mot .big b{animation:telBig linear both;animation-timeline:view();animation-range:entry 10% cover 34%;transform-origin:0 100%;}
    @keyframes telBig{from{transform:translateX(-28px) scale(.82);opacity:0;}to{transform:none;opacity:1;}}
  }
}

/* Studio V2 : pages de carrousel et visuel du post réels */
.cr-p.cr-i{padding:0;background:none;}
.cr-p.cr-i img{display:block;width:100%;height:100%;object-fit:cover;}
.ct-post .pvi{display:block;width:100%;height:46px;object-fit:cover;object-position:center 35%;border-radius:5px;margin-top:5px;}
/* Studio V2 : cadrage des visuels qui portent déjà leur titre */
.ct-vid .cv img{object-position:center 24%;transform-origin:85% 30%;}
.ct-ad .cv img{object-position:0% 18%;}
.mv-fmt.live .ct-vid img{animation:vidKb2 10s ease-in-out infinite alternate;transform-origin:90% 35%;}
@keyframes vidKb2{from{transform:scale(1);}to{transform:scale(1.06);}}

/* =====================================================================
   STUDIO LISIBLE (20 octobre 2026) : le studio prend toute la largeur de « La machine ».
   La grille des six formats reste la vue d'ensemble ; la scène montre chaque format en grand,
   dans son vrai cadre (page d'article, post LinkedIn, document, lecteur vidéo, email, annonce).
   Téléphone : un format à la fois, qu'on fait défiler du doigt (défilement natif, aimanté).
   ===================================================================== */
.mach{grid-template-rows:auto auto auto 1fr auto;}
.mot.wide{grid-column:1/-1;grid-row:auto;}
.mot.wide:nth-child(2n){border-left:none;}
@media (min-width:1180px){
  .mot.wide{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--s-7);}
  .mot.wide>*{grid-column:1;}
  .mot.wide h3{grid-row:1;}.mot.wide .big{grid-row:2;}.mot.wide .tx{grid-row:3;}.mot.wide .sm{grid-row:4;}
  .mot.wide>.mv{grid-column:2;grid-row:1/span 4;margin:0;}
  .mot.wide .big{flex-direction:column;align-items:flex-start;}
}
@media (min-width:901px) and (max-width:1179px){
  .mot.wide{display:block;}
  .mot.wide .big{flex-direction:row;align-items:baseline;}
}
/* les équipiers, eux aussi en ligne pleine : le relais n'a plus à s'étirer sur la hauteur du studio */
@media (min-width:901px){
  .mot.wide .mv-relay{display:block;height:auto;min-height:0;padding-block:var(--s-4);}
  .mot.wide .relay{display:block;}
  .mot.wide .relay li{max-height:none;min-height:44px;}
}

/* la scène et sa grille */
.st-body{display:grid;grid-template-columns:minmax(0,212px) minmax(0,1fr);gap:var(--s-4);align-items:start;}
.st-body .fmt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) 10px;}
.st-body .ct{cursor:pointer;}
.st-body .ct.on .cv{transform:translateY(-3px);box-shadow:0 0 0 2px var(--orange),0 14px 28px -14px rgba(0,0,0,.7);}
.st-scene{position:relative;height:452px;min-width:0;}
.st-cap{display:none;}
.sf{position:absolute;inset:0;min-width:0;display:flex;justify-content:center;align-items:center;opacity:0;translate:0 14px;scale:.985;pointer-events:none;
  transition:opacity .45s var(--ease),translate .7s var(--ease-expo),scale .7s var(--ease-expo);}
.sf.on{opacity:1;translate:none;scale:none;pointer-events:auto;}
.sf-in{position:relative;width:min(100%,468px);height:100%;overflow:hidden;border-radius:12px;background:#fff;color:#191919;font-family:var(--sans);font-size:14px;line-height:1.45;text-align:left;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -24px rgba(0,0,0,.85);}
.sf-in img{display:block;}
.sf-in p{margin:0;}
.mv-fmt.wait .st-scene{opacity:0;}
.st-scene{transition:opacity .5s var(--ease);}
.mv-fmt.fold .st-scene{opacity:0;}

/* article : une page de blog */
.ar-bar{height:30px;display:flex;align-items:center;padding:0 14px;background:#EFEDEA;border-bottom:1px solid #E2DED8;font-family:var(--mono);font-size:13px;color:#6B6660;}
.ar{padding:16px 20px 0;height:calc(100% - 30px);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent);}
.ar-k{display:block;font-size:13px;font-weight:600;color:#A8461F;margin-bottom:6px;}
.ar-h{font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:700;line-height:1.16;letter-spacing:-.005em;color:#16213A;text-wrap:balance;}
.ar-by{display:flex;align-items:center;gap:8px;margin:10px 0 12px;font-size:13px;color:#5E5A55;}
.ar-by img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
.ar-by b{color:#16213A;font-weight:600;}
.ar-img{width:100%;height:148px;object-fit:cover;border-radius:6px;}
.ar-ch{margin-top:12px!important;font-family:Georgia,"Times New Roman",serif;font-size:15.5px;font-weight:700;line-height:1.42;color:#16213A;}
.ar-tx{margin-top:8px!important;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.5;color:#3A3835;}

/* post et annonce : le cadre LinkedIn (icônes de réaction tolérées, c'est une reproduction) */
.li-h{display:flex;align-items:flex-start;gap:9px;padding:12px 14px 8px;}
.li-av,.ad-logo{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover;}
.ad-logo{border-radius:4px;display:flex;align-items:center;justify-content:center;background:#16213A;color:#F3EEE6;font-family:Georgia,serif;font-size:24px;font-weight:700;}
.li-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.li-who b{font-size:14px;font-weight:600;color:#191919;}
.li-who span{font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px;}
.li-f{flex:0 0 auto;font-size:14px;font-weight:600;color:#0A66C2;}
.li-t{padding:0 14px 10px;font-size:14px;line-height:1.45;color:#191919;}
.li-m{color:#666;margin-left:4px;white-space:nowrap;}
.li-img{width:100%;height:208px;object-fit:cover;object-position:50% 0;}
.sf-ad .li-img{height:218px;object-position:50% 12%;}
.sf-ad .li-a{border-top:1px solid #E8E8E8;margin:0 8px;}
.li-r{display:flex;align-items:center;gap:5px;margin:0 14px;padding:8px 0;border-bottom:1px solid #E8E8E8;font-size:13px;color:#666;}
.li-ic{display:flex;}
.li-ic i{display:flex;width:17px;height:17px;border-radius:50%;align-items:center;justify-content:center;border:1.5px solid #fff;margin-left:-4px;}
.li-ic i:first-child{margin-left:0;}
.li-ic svg{width:10px;height:10px;}
.r-l{background:#378FE9;}.r-b{background:#DF704D;}.r-c{background:#6DAE4F;}
.li-c{margin-left:auto;}
.li-a{display:flex;justify-content:space-around;padding:4px 6px;font-size:13px;font-weight:600;color:#5E5E5E;}
.li-a span{display:flex;align-items:center;gap:5px;padding:7px 4px;}
.li-a svg{width:18px;height:18px;}
.ad-f{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F3F2EF;}
.ad-f>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:#666;line-height:1.3;}
.ad-f b{font-size:14px;font-weight:600;color:#191919;}
.ad-btn{flex:0 0 auto;font-size:14px;font-weight:600;color:#0A66C2;border:1.5px solid #0A66C2;border-radius:999px;padding:5px 14px;}

/* carrousel et vidéo : le média en grand, une ligne d'information dessous */
.sf-car .sf-in,.sf-vid .sf-in{width:auto;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;display:flex;flex-direction:column;align-items:center;overflow:visible;}
.dc-v,.vp{position:relative;height:calc(100% - 38px);aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:10px;background:#F3EEE6;box-shadow:0 30px 60px -24px rgba(0,0,0,.85);}
.dc-t{position:relative;height:100%;}
.dc-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-expo);}
.dc-t img+img{transform:translateX(100%);}
.md{width:100%;height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--on-dark-soft);}
.md b{color:#fff;font-weight:600;}
.dc-n{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:#fff;}
.dc-a{font-family:var(--sans);font-size:18px;line-height:1;color:var(--on-dark-soft);}
.vp{background:#16213A;}
.vp img{width:100%;height:100%;object-fit:cover;transform-origin:70% 40%;}
.sf-vid.joue .vp img{animation:vpKb 9s ease-in-out infinite alternate;}
@keyframes vpKb{from{transform:none;}to{transform:scale(1.07);}}
.vp-sub{position:absolute;left:10%;right:10%;bottom:52px;text-align:center;font-size:15px;font-weight:600;line-height:1.35;color:#fff;}
.vp-sub span{background:rgba(10,8,6,.78);padding:2px 6px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.vp-c{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 12px 12px;background:linear-gradient(0deg,rgba(10,8,6,.7),transparent);}
.vp-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;}
.vp-bar i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1s linear;}
.vp-time{font-family:var(--mono);font-size:13px;color:#fff;white-space:nowrap;}

/* newsletter : l'email reçu */
.sf-nl .sf-in{background:#F3EEE6;}
.ml-h{padding:14px 18px 12px;background:#fff;border-bottom:1px solid #E6E1D9;}
.ml-o{font-size:18px;font-weight:600;line-height:1.3;color:#1F1F1F;}
.ml-f{display:flex;align-items:center;gap:9px;margin:9px 0 7px;font-size:13px;line-height:1.35;color:#5F6368;}
.ml-f img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.ml-f b{font-weight:600;color:#1F1F1F;}
.ml-p{font-size:13.5px;line-height:1.4;color:#5F6368;}
.ml-b{margin:14px 16px 0;background:#fff;border-radius:6px 6px 0 0;overflow:hidden;height:calc(100% - 160px);-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);}
.ml-b img{width:100%;height:112px;object-fit:cover;}
.ml-k{display:block;padding:12px 16px 0;font-size:13px;font-weight:600;color:#A8461F;}
.ml-t{padding:3px 16px 0;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;color:#16213A;}
.ml-x{padding:6px 16px 0;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.5;color:#3A3835;}

/* ordinateur moyen et tablette : la scène se resserre */
@media (max-width:900px) and (min-width:761px){
  .mv-fmt{max-width:none;}
  .st-body{grid-template-columns:minmax(0,180px) minmax(0,1fr);}
}

/* téléphone : la grille devient une bande, la scène un défilement aimanté, un format à la fois */
@media (max-width:760px){
  .mv-fmt{background:none;border:0;padding:0;overflow:visible;}
  .st-body{display:block;}
  .st-body .fmt{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
  .st-body .cl{display:none;}
  .st-body .cv{aspect-ratio:4/5;border-radius:6px;}
  .st-body .cv p,.st-body .pa,.st-body .cr-n,.st-body .vt{display:none;}
  .st-body .ct-art img,.st-body .ct-nl img{height:100%;}
  .st-body .ct-post .cv{padding:0;}
  .st-body .ct-post .pvi{height:100%;margin:0;border-radius:0;}
  .st-body .ct-ad img{width:100%;}
  .st-scene{height:auto;display:flex;gap:12px;margin:var(--s-3) calc(-1 * var(--s-4)) 0;padding:0 var(--s-4);overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--s-4);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .st-scene::-webkit-scrollbar{display:none;}
  .sf{position:relative;inset:auto;flex:0 0 calc(100% - 22px);height:460px;scroll-snap-align:start;opacity:1;translate:none;scale:none;pointer-events:auto;transition:none;}
  .sf-in{width:100%;}
  .sf-car .sf-in,.sf-vid .sf-in{width:100%;justify-content:center;}
  .dc-v,.vp{height:auto;width:100%;}
  .md{max-width:100%;}
  .ar-h{font-size:21px;}
  .li-img{height:180px;}
  .sf-ad .li-img{height:168px;}
  .li-a{padding:2px 4px 6px;}
  .li-a span{flex-direction:column;gap:2px;padding:6px 2px 0;}
  .li-a svg{width:20px;height:20px;}
  .li-rp{display:none;}
  .sf-ad .li-a{display:none;}
  .st-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:14px;color:var(--on-dark-soft);}
  .st-cap b{color:#fff;font-weight:600;}
  .st-cap span{font-family:var(--mono);font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .sf{transition:none;}
  .mv-fmt.wait .st-scene{opacity:1;}
  .sf-vid.joue .vp img{animation:none;}
  .dc-t img,.vp-bar i{transition:none;}
}

/* Mise en ligne : la vidéo réelle dans le cadre du haut */
.video video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink);}
.foot-credit{font-size:12px;color:var(--muted);margin-top:6px;}
.foot-credit a{color:inherit;}