/* Guide long format NEO — « Le montage vidéo avec Claude Opus 5.5 ».
   Pensé mobile d'abord. Palette et polices du gabarit lead magnet NEO. 3 surfaces seulement :
   papier (texte), carte claire (listes, schémas), encre (prompts et interfaces). */
@font-face{font-family:"Open Sauce";src:url("./assets/fonts/OpenSauceSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sauce";src:url("./assets/fonts/OpenSauceSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Sauce";src:url("./assets/fonts/OpenSauceSans-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sauce";src:url("./assets/fonts/OpenSauceSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("./assets/fonts/instrumentserif-italic.woff2") format("woff2");font-style:italic;font-display:swap}

:root{
  --paper:#f7f4ef;--surface:#fffdf9;--sand:#e7dfd3;--sand-soft:#efe9e0;
  --ink:#1c1b19;--ink-2:#262420;--ink-3:#34312b;
  --orange:#e2571c;--orange-deep:#b8440f;--orange-soft:rgba(226,87,28,.11);--orange-light:#f4a27c;
  --body:#4c433b;--muted:#7a6f66;--line:rgba(28,27,25,.11);--line-strong:rgba(28,27,25,.2);
  --gutter:20px;--content:680px;--radius:18px;--radius-lg:24px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 0 rgba(28,27,25,.04),0 18px 40px -28px rgba(28,27,25,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.65 "Open Sauce",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
::selection{background:var(--sand)}
.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.micro{font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Couverture : titre, interface animée en grand, boutons ---------- */
.hero{display:flex;flex-direction:column;gap:22px;width:calc(100% - 2*var(--gutter));max-width:1100px;margin:0 auto;padding:12px 0 40px}
.hero__kicker{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.hero__kicker img{width:16px;height:16px;object-fit:contain}
.hero h1{margin:12px 0 0;font-size:clamp(34px,9vw,72px);font-weight:600;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.hero .studio{margin-inline:auto}
.hero h1 mark{padding:0 .08em;background:linear-gradient(transparent 52%,rgba(226,87,28,.85) 52%,rgba(226,87,28,.85) 90%,transparent 90%) no-repeat 0 0/100% 100%;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:surligne .9s .3s cubic-bezier(.6,0,.2,1) both}
@keyframes surligne{from{background-size:0 100%}}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.btn{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:50px;padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s,color .15s,box-shadow .15s}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:#cc4c15}
.btn--ghost{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.hero__meta{margin:0;text-align:center;font-size:13.5px;color:var(--muted)}
/* En-tête au logo centré : la couverture suit le même axe, sur mobile comme sur ordinateur. */
.neo-header--centre~.guide .hero__text{text-align:center}
.neo-header--centre~.guide .hero__kicker{justify-content:center}
.neo-header--centre~.guide .hero__meta{text-align:center}

/* Animation de couverture : seulement la timeline, où 3 agents coupent les blancs, posent le titre,
   l'animation et la musique, puis vérifient le rendu. Compacte pour laisser l'encart visible sur mobile. */
.studio{--a:#e2571c;--b:#6b8afd;--c:#2fae80;width:100%;max-width:760px;margin:0 auto;container-type:inline-size}
.studio__window{--label:62px;--tlpad:12px;position:relative;overflow:hidden;border-radius:18px;background:#151412;color:var(--paper);box-shadow:0 1px 0 rgba(28,27,25,.05),0 30px 60px -36px rgba(28,27,25,.6);user-select:none}
.studio__top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px}
.studio__brand{display:flex;align-items:center;gap:7px;font-weight:600}
.studio__file{display:none;font:500 11px/1 var(--mono);color:rgba(247,244,239,.45)}
.studio__status{display:inline-flex;align-items:center;gap:7px;min-width:0;margin-left:auto;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;color:rgba(247,244,239,.8);white-space:nowrap}
.studio__status::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(47,174,128,.22)}
.studio__status.is-done::before{background:var(--a);box-shadow:0 0 0 3px rgba(226,87,28,.25)}

/* Timeline */
.studio__timeline{position:relative;padding:8px var(--tlpad) 26px}
.tl__ruler{position:relative;height:16px;margin-left:var(--label);font:500 9.5px/16px var(--mono);color:rgba(247,244,239,.38)}
.tl__ruler span{position:absolute;left:calc(var(--x)*1%)}
.tl__track{display:grid;grid-template-columns:var(--label) minmax(0,1fr);align-items:center;height:24px;margin-top:5px}
.tl__label{font-size:10px;color:rgba(247,244,239,.5)}
.tl__lane{position:relative;height:100%;border-radius:6px;background:rgba(255,255,255,.045)}
.tl__lane--video{display:flex;padding:3px 0;overflow:hidden}
.seg,.gap{flex:0 0 calc(var(--w)*1%);height:100%;margin-right:2px;border-radius:4px;transition:flex-basis .55s cubic-bezier(.6,0,.2,1),margin .55s,opacity .35s,background .4s,box-shadow .2s,transform .5s cubic-bezier(.2,.8,.2,1)}
.seg{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 12px),linear-gradient(180deg,#5d574e,#47423b)}
.gap{background:repeating-linear-gradient(135deg,rgba(226,87,28,.6) 0 4px,rgba(226,87,28,.18) 4px 8px)}
.gap.is-marked{box-shadow:inset 0 0 0 1.5px #fff}
.gap.is-cut{flex-basis:0;margin-right:0;opacity:0}
.clip{position:absolute;top:3px;bottom:3px;left:calc(var(--x)*1%);width:calc(var(--w)*1%);overflow:hidden;padding:0 6px;border-radius:4px;font-size:9.5px;font-style:normal;font-weight:600;line-height:18px;white-space:nowrap;color:#fff;opacity:0;transform:scale(.85);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.clip--text{background:var(--b)}
.clip--fx{background:var(--a)}
.clip--audio{padding:0;transform:scaleX(0);transform-origin:left center;background:repeating-linear-gradient(90deg,rgba(47,174,128,.95) 0 2px,transparent 2px 4px) center/100% 55% no-repeat,rgba(47,174,128,.2)}
.clip.is-added{opacity:1;transform:none}
.tl__playhead{position:absolute;top:22px;bottom:22px;left:calc(var(--tlpad) + var(--label) + (100% - 2 * var(--tlpad) - var(--label)) * var(--ph,0));width:2px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12);transition:left .5s cubic-bezier(.6,0,.2,1)}
.studio__window.is-playing .tl__playhead{transition:none}

/* Agents : un curseur et une étiquette par agent */
.agent{position:absolute;left:0;top:0;z-index:5;width:0;height:0;opacity:0;pointer-events:none;transform:translate(var(--x,0px),var(--y,0px));transition:transform .95s cubic-bezier(.45,.05,.25,1),opacity .3s}
.agent.is-live{opacity:1}
.agent.is-teleport{transition:none}
.agent.is-follow{transition:transform .12s linear,opacity .3s}
.agent svg{position:absolute;left:-2px;top:-2px;width:18px;height:18px;fill:var(--ac);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.agent b{position:absolute;left:11px;top:15px;display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:999px;background:var(--ac);font-size:10px;font-weight:600;line-height:1.1;white-space:nowrap;color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.agent.is-flip b{left:auto;right:6px}
.agent.is-up b{top:auto;bottom:8px}
.bot{display:inline-block;width:13px;height:10px;border-radius:4px;background:radial-gradient(circle at 32% 55%,var(--ac) 0 1.4px,transparent 1.8px),radial-gradient(circle at 68% 55%,var(--ac) 0 1.4px,transparent 1.8px),#fff}
.agent__click{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border:2px solid var(--ac);border-radius:50%;opacity:0}
.agent.is-click .agent__click{animation:agent-click .5s ease-out}
@keyframes agent-click{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.7)}}
.agent--a{--ac:var(--a)}.agent--b{--ac:var(--b)}.agent--c{--ac:var(--c)}

@container (min-width:560px){
  .studio__window{--label:78px;--tlpad:18px}
  .studio__file{display:inline}
  .studio__top{padding:11px 18px;font-size:13px}
  .tl__ruler{font-size:10.5px}
  .tl__track{height:26px}
  .tl__label{font-size:11.5px}
  .clip{font-size:11px;line-height:20px}
  .agent b{font-size:11px;padding:4px 8px 4px 5px}
}
@media(prefers-reduced-motion:reduce){.agent,.seg,.gap,.clip{transition:none!important}}

/* ---------- Encart d'accès : e-mail → la suite du guide s'ouvre ----------
   Cadre au liseré orange qui tourne doucement, pour qu'il ne ressemble pas à une simple newsletter. */
@property --tour{syntax:"<angle>";inherits:false;initial-value:0deg}
.acces{position:relative;width:100%;max-width:640px;margin:0 auto;padding:2px;border-radius:26px;background:conic-gradient(from var(--tour),var(--orange) 0deg,var(--orange-light) 70deg,var(--sand) 140deg,var(--sand) 220deg,var(--orange-light) 290deg,var(--orange) 360deg);box-shadow:0 30px 60px -34px rgba(226,87,28,.55);animation:acces-tour 6s linear infinite}
@keyframes acces-tour{to{--tour:360deg}}
.acces__card{position:relative;overflow:hidden;padding:26px 22px 22px;border-radius:24px;background:var(--surface)}
.acces__card::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(226,87,28,.16),transparent 70%);pointer-events:none}
.acces__kicker{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--orange)}
.acces__pill{padding:3px 8px;border-radius:999px;background:var(--orange);font-size:10.5px;letter-spacing:.08em;color:#fff}
.acces__title{margin:0 0 14px;font-size:clamp(27px,7.4vw,38px);font-weight:600;line-height:1.08;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.acces__title em,.hero h1 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.acces__title em{color:var(--orange)}
.acces__points{display:grid;gap:7px;margin:0 0 20px;padding:0;list-style:none;font-size:15px;color:var(--body)}
.acces__points li{display:flex;align-items:center;gap:9px}
.acces__points li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.acces__form{display:flex;flex-wrap:wrap;gap:10px}
.acces__input{flex:1 1 220px;min-width:0;min-height:54px;padding:12px 16px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--paper);font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.acces__input::placeholder{color:var(--muted)}
.acces__input:focus{border-color:var(--orange);outline:0;box-shadow:0 0 0 4px var(--orange-soft)}
.acces__input[aria-invalid="true"]{border-color:var(--orange-deep)}
.acces__button{flex:1 1 auto;min-height:54px;padding:12px 24px;border:0;border-radius:14px;background:var(--orange);font-size:16px;font-weight:600;color:#fff;box-shadow:0 10px 24px -12px rgba(226,87,28,.9);transition:background .15s,transform .15s,opacity .15s}
.acces__button:hover{background:#cc4c15;transform:translateY(-1px)}
.acces__button:disabled{opacity:.6;cursor:wait;transform:none}
.acces__optin{display:flex;flex-basis:100%;align-items:flex-start;gap:10px;margin-top:6px;padding:11px 12px;border:1.5px dashed var(--line-strong);border-radius:14px;font-size:13px;line-height:1.45;color:var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.acces__optin:hover{border-color:var(--orange)}
.acces__optin:has(input:checked){border-style:solid;border-color:var(--orange);background:var(--orange-soft)}
.acces__optin b{display:block;font-size:14px;color:var(--ink)}
.acces__optin small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.acces__optin input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--orange)}
.acces__status{margin:0;font-size:14px;line-height:1.5;color:var(--orange-deep)}
.acces__status:not(:empty){margin-top:12px}
.acces__legal{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.acces__legal a{color:var(--body)}
@media(min-width:560px){.acces__card{padding:32px 32px 26px}.acces__button{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){.acces{animation:none}}

/* Page verrouillée : pas de boutons vers des chapitres absents, pas de 2e formulaire en haut du guide. */
[data-acces="verrouille"] .waitlist--compact{display:none}

/* Page verrouillée : sous l'encart, toute la suite du guide avec sa vraie mise en page, mais des lettres au hasard
   envoyées par le serveur. Les cartes et les blocs restent nets, le texte est flouté ; seuls les titres des chapitres
   et des prompts sont lisibles, pour montrer tout ce qui attend derrière. */
.porte{margin-top:48px}
.suite--floue{position:relative;user-select:none;pointer-events:none}
/* Flou appliqué aux blocs de texte eux-mêmes (filter), fiable sur tous les navigateurs, y compris ceux d'Instagram. */
.suite--floue .prompt__text .ph{background:rgba(226,87,28,.3)}
.suite--floue .waitlist{display:none}
/* Tout est flouté, titres compris : chaque bloc de la suite, image, tableau ou texte. */
.suite--floue .chapter>*{filter:blur(9px);opacity:.9}
.suite--floue .chapter__head h2{position:relative}

/* Barre collante pendant la lecture de la partie floutée : ramène à l'encart. */
.porte__barre{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:min(460px,calc(100% - 24px));margin:0;padding:12px 8px 8px;border-radius:26px;background:var(--ink);box-shadow:0 18px 40px -16px rgba(28,27,25,.7);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.porte__barre.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.porte__ligne{flex-basis:100%;margin:0 0 4px;padding:0 10px;font-size:13px;line-height:1.35;color:rgba(247,244,239,.75)}
.porte__ligne b{display:block;color:#fff;font-weight:600;font-size:14.5px}
.porte__ligne span{display:block;margin-top:2px;font-size:12px;color:rgba(247,244,239,.6)}
.porte__legal{flex-basis:100%;margin:2px 0 0;padding:0 10px;font-size:11px;line-height:1.4;color:rgba(247,244,239,.5)}
.porte__legal a{color:rgba(247,244,239,.7)}
.porte__input{flex:1;min-width:0;height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.1);font:inherit;font-size:16px;color:var(--paper)}
.porte__input::placeholder{color:rgba(247,244,239,.55)}
.porte__input:focus{outline:2px solid var(--orange);outline-offset:0}
.porte__input[aria-invalid="true"]{outline:2px solid var(--orange-light)}
.porte__go{flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--orange);font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.porte__go:disabled{opacity:.6}
.porte__status{flex-basis:100%;margin:0!important;padding:0 14px;font-size:12.5px;color:var(--orange-light)}
.porte__status:empty{display:none}

/* Juste après l'inscription : la suite apparaît en sortant du flou. */
.suite.is-revealing{animation:suite-revele 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes suite-revele{from{opacity:.3;filter:blur(12px);transform:translateY(12px)}to{opacity:1;filter:none;transform:none}}
.suite>.waitlist:last-child{margin-bottom:64px}

/* ---------- Barre de chapitre (mobile) ---------- */
.chapterbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);background:rgba(247,244,239,.88);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
.chapterbar__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 var(--gutter);border:0;background:none;text-align:left}
.chapterbar__num{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);font-size:11px;font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}
.chapterbar__title{flex:1;min-width:0;overflow:hidden;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.chapterbar__open{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--ink)}
.chapterbar__open .icon{width:14px;height:14px}
.progress{height:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--orange);transform-origin:left center;transform:scaleX(var(--progress,0))}

/* ---------- Panneau sommaire (mobile) ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;background:rgba(28,27,25,.45);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.sheet.is-open{opacity:1;visibility:visible;transition:opacity .22s ease}
.sheet__panel{width:100%;max-height:84vh;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gutter) calc(28px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--paper);transform:translateY(28px);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.sheet.is-open .sheet__panel{transform:none}
.sheet__head{position:sticky;top:-8px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 calc(-1*var(--gutter)) 8px;padding:12px var(--gutter);background:var(--paper)}
.sheet__head p{margin:0;color:var(--muted)}
.sheet__close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--sand-soft)}
.sheet .progress{display:none}
.sheet .toc a{margin-left:0;padding-left:0;border-left:0}

/* ---------- Mise en page ---------- */
.layout{width:calc(100% - 2*var(--gutter));max-width:1100px;margin:0 auto}
.sidebar{display:none}
.content{max-width:var(--content);margin:0 auto;padding-top:32px}

/* Sommaire (partagé ordinateur + panneau mobile) */
.toc+.toc{margin-top:28px}
.toc__label{margin:0 0 8px;color:var(--muted)}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:6px;align-items:baseline;margin-left:-14px;padding:7px 0 7px 12px;border-left:2px solid transparent;text-decoration:none;font-size:15px;line-height:1.35;color:var(--body);transition:color .15s,border-color .15s}
.toc a span{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.toc a em{grid-column:2;margin-top:2px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{border-left-color:var(--orange);font-weight:600;color:var(--ink)}
.toc a[aria-current="true"] span{color:var(--orange)}
.toc--prompts a{font-size:14px}

/* ---------- Texte courant ---------- */
.prose p,.prose li{color:var(--body)}
.prose p{margin:0 0 16px}
.prose>:last-child{margin-bottom:0}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose h3,h3{margin:0;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.prose h3{margin:40px 0 10px}
.src{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.prose.after-prompt,.prose.after-box{margin-top:20px}
.prose.after-box+.rows{margin-top:14px}
.intro p:first-child{color:var(--ink)}
.small,.prose p.small{font-size:14px;line-height:1.55;color:var(--muted)}
h2{margin:0;font-size:clamp(29px,7.6vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.04em;text-wrap:pretty}

/* Introduction */

/* Chapitres et parties */
.chapter{padding-top:80px;scroll-margin-top:62px}
.chapter.chapter--suite{padding-top:0}
.chapter.chapter--suite-p{padding-top:16px}
.content>.chapter:first-child{padding-top:36px}
.chapter__head{margin-bottom:26px}
.chapter__index{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;color:var(--orange)}
.tag{padding:3px 8px;border-radius:999px;background:var(--sand-soft);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.phase{margin-top:88px;padding-top:20px;border-top:2px solid var(--ink)}
.phase__label{margin:0 0 6px;color:var(--orange)}
.phase__title{margin:0 0 6px;font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.03em}
.phase__text{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.phase+.chapter{padding-top:44px}

/* Encadrés */
.note{margin:24px 0 0;padding:18px 20px;border-radius:16px;background:var(--sand-soft)}
.note+.note{margin-top:12px}
.note p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}
.note .note__title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--ink)}
.note strong{font-weight:600;color:var(--ink)}

/* Figures */
.figure{margin:28px 0}
.figure>figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.box{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.box>figcaption{margin-top:12px}
.panel{overflow:hidden;border-radius:var(--radius-lg);background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}

/* Interface Claude Code + HyperFrames */
.duo{container-type:inline-size}
.duo__panel{display:grid}
.duo__chat{padding:20px}
.app-bar{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:13.5px;font-weight:600;color:var(--paper)}
.app-bar small{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.08);font-size:11px;font-weight:500;color:rgba(247,244,239,.6)}
.app-dot{width:14px;height:14px;border-radius:50%;flex:none}
.app-dot--claude{background:radial-gradient(circle,#f0a07c 0 32%,transparent 33%),repeating-conic-gradient(#d97757 0 14deg,transparent 14deg 45deg)}
.app-dot--hf{border-radius:4px;background:linear-gradient(135deg,#7ee0b8,#3fbf8f)}
.bubble{width:fit-content;max-width:88%;margin:0 0 12px;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bubble--user{margin-left:auto;border-bottom-right-radius:5px;background:#3d3932;color:var(--paper)}
.bubble--claude{border-bottom-left-radius:5px;background:rgba(255,255,255,.07);color:rgba(247,244,239,.88)}
.file{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#141311}
.file__name{margin:0;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.08);font:500 11.5px/1.3 var(--mono);color:rgba(247,244,239,.55)}
.file__code{margin:0;padding:12px 13px;font:400 12px/1.75 var(--mono);color:#e9e3d9;white-space:pre-wrap;word-break:break-word}
.file__code .t{color:#f08a5d}.file__code .a{color:#b9a8ff}.file__code .s{color:#9fd8a4}.file__code .f{color:#f2c46d}.file__code .n{color:var(--orange-light)}
.file__code .add{display:inline-block;width:calc(100% + 26px);margin:0 -13px;padding:0 13px;background:rgba(226,87,28,.17);color:#ffc4a6}
.duo__done{margin:14px 0 0;font-size:13px;color:rgba(247,244,239,.55)}
.duo__preview{display:flex;flex-direction:column;padding:16px 18px 18px;border-top:1px solid rgba(255,255,255,.07);background:#121110}
.duo__preview .app-bar{margin-bottom:12px}
.duo__btn{margin-left:auto;padding:5px 11px;border-radius:7px;background:var(--orange);font-size:11.5px;font-weight:600;color:#fff}
.duo__stage{display:grid;flex:1;place-items:center;padding:16px 0;border-radius:12px;background:#0a0a09}
.mini-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;width:124px;aspect-ratio:9/16;border-radius:18px;background:linear-gradient(160deg,#2b2722,#161411);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.counter{margin:0;font-size:36px;font-weight:700;letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.counter.is-done{color:var(--orange)}
.counter__label{margin:4px 10px 0;font-size:10px;line-height:1.3;text-align:center;color:rgba(247,244,239,.55)}
.duo__time{display:flex;align-items:center;gap:12px;margin:12px 0 0;font:500 11px/1 var(--mono);color:rgba(247,244,239,.5)}
.duo__scrub{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.duo__scrub i{position:absolute;inset:0 87% 0 0;border-radius:3px;background:var(--orange)}
@container (min-width:600px){
  .duo__panel{grid-template-columns:1fr 1fr}
  .duo__preview{border-top:0;border-left:1px solid rgba(255,255,255,.07)}
}

/* Skill */
.skill__panel{display:grid;gap:16px;padding:18px}
.skill__chat .bubble:last-child{margin-bottom:0}
@media(min-width:760px){.skill__panel{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;padding:22px}}

/* ---------- Listes à filets (cas, outils, pièges, sources) ---------- */
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.prose+.rows{margin-top:22px}
.row{padding:20px 0;border-bottom:1px solid var(--line)}
.row p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}
.row h3{margin:0 0 6px;font-size:18px;line-height:1.3}
.cases .row h3{font-size:17px}

.tool{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.tool h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tool h3 span{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
.tool p.tool__tip{margin-top:10px;padding-left:12px;border-left:2px solid var(--orange);font-size:14.5px;color:var(--ink)}
.tool__icon{position:relative;width:44px;height:44px;border-radius:13px;background:var(--ink)}
.tool__icon::after{content:"";position:absolute;inset:0;margin:auto}
.tool__icon--claude::after{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#f0a07c 0 30%,transparent 31%),repeating-conic-gradient(#d97757 0 12deg,transparent 12deg 45deg)}
.tool__icon--ai::after{content:"IA";display:grid;place-items:center;width:auto;height:auto;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--paper)}
.tool__icon--hf::after{width:20px;height:14px;border-radius:4px;background:linear-gradient(135deg,#7ee0b8,#3fbf8f)}
.tool__icon--ear::after{width:20px;height:18px;background:linear-gradient(var(--paper),var(--paper)) 0 50%/3px 6px no-repeat,linear-gradient(var(--paper),var(--paper)) 25% 50%/3px 14px no-repeat,linear-gradient(var(--orange),var(--orange)) 50% 50%/3px 18px no-repeat,linear-gradient(var(--paper),var(--paper)) 75% 50%/3px 10px no-repeat,linear-gradient(var(--paper),var(--paper)) 100% 50%/3px 5px no-repeat}
.tool__icon--cut::after{width:18px;height:18px;border:2px solid var(--orange);border-radius:50%;box-shadow:8px 8px 0 -6px var(--paper)}


/* Erreurs fréquentes : l'erreur, puis ce qu'il faut faire à la place */
.traps{display:grid;gap:12px;margin:0;padding:0;list-style:none;container-type:inline-size}
.trap{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.trap__problem,.trap__fix{padding:18px 20px}
.trap__num{margin:0 0 8px;color:var(--muted)}
.trap h3{margin:0 0 6px;font-size:18px;line-height:1.3}
.trap__problem>p:last-child{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}
.trap__fix{border-top:1px solid var(--line);background:var(--sand-soft)}
.trap__fix .micro{margin:0 0 6px;color:var(--orange)}
.trap__fix p:last-child{margin:0;font-size:15.5px;font-weight:500;line-height:1.55;color:var(--ink)}
@container (min-width:600px){
  .trap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .trap__problem,.trap__fix{padding:22px 24px}
  .trap__fix{display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:1px solid var(--line)}
}
.costs__note{margin:14px 0 0}

/* Quel modèle choisir : 1 ligne par usage, 1 colonne par abonnement */
.models{margin:22px 0 0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);container-type:inline-size}
.models__head{display:none}
.models__row{display:grid;gap:10px;padding:16px 18px;border-top:1px solid var(--line)}
.models__head+.models__row{border-top:0}
.models__use b{display:block;font-size:16.5px;font-weight:600;line-height:1.3}
.models__use span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)}
.models__pick{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:baseline;column-gap:10px;font-size:15px;line-height:1.4}
.models__pick::before{content:attr(data-label);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.models__pick b{font-weight:600}
.models__pick span{grid-column:2;font-size:13.5px;color:var(--body)}
@container (min-width:580px){
  .models__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:12px 20px;background:var(--sand-soft);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .models__row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px}
  .models__head+.models__row{border-top:1px solid var(--line)}
  .models__pick{display:block}
  .models__pick::before{display:none}
  .models__pick b,.models__pick span{display:block}
  .models__pick span{margin-top:2px}
}

/* Outils en plus : 1 ligne par MCP, dépôt et boutons de copie en pied de ligne */
.mcps{margin:14px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.mcp{padding:18px 20px;border-top:1px solid var(--line)}
.mcp:first-child{border-top:0}
.mcp h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px;font-size:17px;line-height:1.3}
.mcp__tag{padding:2px 8px;border-radius:999px;background:var(--sand-soft);font-size:11px;font-weight:600;color:var(--muted)}
.mcp__tag--warn{background:var(--orange-soft);color:var(--orange-deep)}
.mcp>p{margin:0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--body)}
.mcp>p.mcp__warn{margin-top:8px;padding:1px 0 1px 10px;border-left:2px solid var(--orange);font-size:13.5px;line-height:1.5;color:var(--ink)}
.mcp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:12px}
.mcp__repo{display:flex;align-items:center;gap:6px;min-width:0;margin:0;font:500 12px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.mcp__repo .icon{flex:none;width:14px;height:14px}
.mcp__copy{display:grid;flex:none;place-items:center;width:26px;height:26px;margin-left:2px;border:0;border-radius:7px;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.mcp__copy:hover{background:var(--sand-soft);color:var(--ink)}
.mcp__copy .icon{width:14px;height:14px}
.mcp__copy .icon--done,.mcp__copy.is-done .icon:not(.icon--done){display:none}
.mcp__copy.is-done{color:var(--orange)}
.mcp__copy.is-done .icon--done{display:block}
.mcp__actions{display:flex;gap:6px}
.mcp__btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 11px;border:0;border-radius:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink);transition:background .15s,color .15s,box-shadow .15s,transform .15s}
.mcp__btn .icon{width:14px;height:14px}
.mcp__btn:hover{background:var(--sand-soft)}
.mcp__btn:active{transform:scale(.97)}
.mcp__btn--primary{background:var(--ink);box-shadow:none;color:var(--paper)}
.mcp__btn--primary:hover{background:var(--orange)}
.mcp__btn.is-done{background:var(--orange);box-shadow:none;color:#fff}
.mcps__note{margin:12px 0 0;font-size:12.5px!important}
@media(max-width:480px){.mcp{padding:16px}.mcp__actions{width:100%}.mcp__btn{flex:1;justify-content:center}}

/* ---------- Prompts ---------- */
.prompt{margin:24px 0 0;overflow:hidden;border-radius:var(--radius);background:var(--ink);color:var(--paper);box-shadow:var(--shadow);scroll-margin-top:70px}
.prompt__head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.prompt__name{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;margin:0}
.prompt__num{color:var(--orange-light)}
.prompt__title{font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--paper)}
.copy{display:inline-flex;flex:none;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:0;border-radius:10px;background:var(--orange);font-size:13.5px;font-weight:600;color:#fff;transition:background .15s,transform .15s}
.copy:hover{background:#cc4c15}
.copy:active{transform:scale(.97)}
.copy .icon{width:15px;height:15px}
.copy.is-done{background:#3d3932}
.prompt__text{margin:0;padding:16px 18px 6px;font:400 15px/1.7 "Open Sauce",sans-serif;color:#efe8de;white-space:pre-wrap;word-break:break-word}
.prompt__text .ph{padding:1px 5px;border-radius:5px;background:rgba(226,87,28,.24);color:#ffcdb3;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prompt__meta{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 18px 16px;font-size:13px;line-height:1.45;color:rgba(247,244,239,.58)}
.prompt__meta .icon{width:14px;height:14px;margin-top:1px}

/* ---------- Former ---------- */

/* ---------- Méthode ---------- */
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px;padding:0;list-style:none}
.flow a{display:flex;height:100%;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;font-size:15px;font-weight:600;line-height:1.3;transition:border-color .15s}
.flow a:hover{border-color:var(--orange)}
.flow span{margin-bottom:4px;font-size:11.5px;color:var(--orange);font-variant-numeric:tabular-nums}
.flow em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--muted)}
.flow a.flow--you{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.flow a.flow--you em{color:rgba(247,244,239,.65)}
.flow a.flow--both{border-color:var(--line-strong);background:var(--sand-soft)}

.steps{position:relative;margin-top:8px}
.step{position:relative;padding:36px 0 4px 46px;scroll-margin-top:62px}
.step::before{content:"";position:absolute;left:15px;top:0;bottom:-36px;width:2px;background:var(--line)}
.step:first-child::before{top:52px}
.step:last-child::before{bottom:auto;height:20px}
.step__dot{position:absolute;left:0;top:34px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong),0 0 0 5px var(--paper);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.step--you .step__dot{background:var(--ink);box-shadow:0 0 0 5px var(--paper);color:var(--paper)}
.step--both .step__dot{background:var(--sand);box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 5px var(--paper)}
.actor{display:inline-flex;margin:0 0 8px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5}
.actor--claude{background:var(--orange-soft);color:var(--orange-deep)}
.actor--you{background:var(--ink);color:var(--paper)}
.actor--both{background:var(--sand);color:var(--ink)}
.step>h3{margin:0 0 12px;font-size:21px;line-height:1.25}
.beats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none;counter-reset:beat}
.beats li{counter-increment:beat;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.beats li::before{content:counter(beat);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);font-size:10.5px;font-weight:600;color:var(--paper)}

.skill-rules{margin:20px 0 0;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:16px;background:var(--surface)}
.skill-rules__title{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:var(--orange)}
.skill-rules__title .icon{width:14px;height:14px}
.skill-rules ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.skill-rules li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;color:var(--body)}
.skill-rules li::before{content:"";position:absolute;left:1px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.skill-rules b{font-weight:600;color:var(--ink)}

/* Schémas des étapes */
.wave__bars{display:flex;align-items:center;gap:2px;height:72px}
.wave__bars i{flex:1;min-width:2px;border-radius:2px;background:var(--ink)}
.wave__bars i.cut{background:var(--orange);opacity:.45}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0}
.board__frame{padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.board__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:9px;background:#2a2621}
.board__img::before,.board__img::after{content:"";position:absolute}
.board__img--face::before{left:50%;top:26%;width:30%;aspect-ratio:1;border-radius:50%;background:#8a7d6f;transform:translateX(-50%)}
.board__img--face::after{left:50%;bottom:-10%;width:66%;height:42%;border-radius:50% 50% 0 0;background:#8a7d6f;transform:translateX(-50%)}
.board__img--split::before{inset:0 0 50%;background:linear-gradient(135deg,#e2571c,#f08a5d)}
.board__img--split::after{left:50%;bottom:-8%;width:46%;height:36%;border-radius:50% 50% 0 0;background:#8a7d6f;transform:translateX(-50%)}
.board__img--full::before{inset:16% 12%;border-radius:6px;background:var(--paper)}
.board__img--full::after{left:22%;top:38%;width:56%;height:7px;border-radius:4px;background:var(--orange);box-shadow:0 14px 0 #d9d1c4,0 28px 0 #d9d1c4}
.board__frame p{margin:8px 3px 2px;font-size:12.5px;line-height:1.4;color:var(--body)}
.board__frame b{display:block;font-weight:600;color:var(--orange)}
.layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:360px;margin:20px 0 0}
.layouts figure{margin:0}
.layouts figcaption{margin-top:8px;font-size:12.5px;text-align:center;color:var(--muted)}
.lay{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:#2a2621}
.lay i{position:absolute;left:50%;bottom:-6%;width:62%;height:30%;border-radius:50% 50% 0 0;background:#8a7d6f;transform:translateX(-50%)}
.lay i::before{content:"";position:absolute;left:50%;top:-62%;width:56%;aspect-ratio:1;border-radius:50%;background:#8a7d6f;transform:translateX(-50%)}
.lay--split b{position:absolute;inset:0 0 50%;background:linear-gradient(135deg,#e2571c,#f08a5d)}
.lay--split i{width:44%;height:22%}
.lay--full{box-shadow:inset 0 0 0 1px var(--line)}
.lay--full b{position:absolute;inset:0;background:linear-gradient(160deg,#fffdf9,#e7dfd3)}
.lay--full b::after{content:"";position:absolute;left:18%;right:18%;top:44%;height:10%;border-radius:6px;background:var(--orange)}
.beatgrid__row{position:relative;height:58px;border-radius:10px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 12.5%),var(--sand-soft)}
.beatgrid__row span{position:absolute;top:50%;left:calc(var(--s)*1%);padding:4px 8px;border-radius:7px;background:var(--orange);font:600 11.5px/1.2 var(--mono);color:#fff;white-space:nowrap;transform:translateY(-50%)}



.resources{display:grid;gap:12px;margin:80px 0 64px}
.resource-card{position:relative;isolation:isolate;min-height:250px;overflow:hidden;border-radius:var(--radius-lg);background:var(--sand);color:var(--paper)}
.resource-card>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.resource-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(28,27,25,.86) 0,rgba(28,27,25,.44) 40%,rgba(28,27,25,0) 74%)}
.resource-card--course>img{object-position:65% center}
.resource-card--library>img{object-position:center 48%}
.resource-copy{position:absolute;inset:auto 22px 22px}
.resource-copy h3{max-width:280px;margin:0 0 14px;font-size:22px;line-height:1.14;letter-spacing:-.025em;color:var(--paper);text-wrap:balance}
.button{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border-radius:9px;background:var(--paper);font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s}
.button:hover{background:var(--sand)}

/* Liste prioritaire de la formation montage : e-mail saisi dans l'encart, confirmation sur place.
   Carte claire (le fond encre est réservé aux prompts). */
.waitlist{margin:80px 0 0;padding:26px 22px 22px;border-radius:var(--radius-lg);background:var(--sand-soft);color:var(--ink)}
.content>.waitlist:last-child{margin-bottom:64px}
.waitlist__kicker{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--orange)}
.waitlist__pill{padding:3px 8px;border-radius:999px;background:var(--orange);font-size:10.5px;letter-spacing:.08em;color:#fff}
.waitlist__title{margin:0 0 12px;font-size:clamp(25px,6.4vw,32px);color:var(--ink);text-wrap:balance}
.waitlist__text{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:var(--body)}
.waitlist__form{display:flex;flex-wrap:wrap;gap:10px}
.waitlist__input{flex:1 1 220px;min-width:0;min-height:50px;padding:12px 16px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s}
.waitlist__input::placeholder{color:var(--muted)}
.waitlist__input:focus{border-color:var(--orange);outline:0}
.waitlist__input[aria-invalid="true"]{border-color:var(--orange-deep)}
.waitlist__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitlist__button{flex:1 1 auto;min-height:50px;padding:12px 22px;border:0;border-radius:12px;background:var(--orange);font-size:15px;font-weight:600;color:#fff;transition:background .15s,opacity .15s}
.waitlist__button:hover{background:#cc4c15}
.waitlist__button:disabled{opacity:.6;cursor:wait}
.waitlist__status{margin:0;font-size:14px;line-height:1.5;color:var(--orange-deep)}
.waitlist__status:not(:empty){margin-top:12px}
.waitlist__legal{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.waitlist__legal a{color:var(--body)}
/* Inscription faite : le formulaire laisse la place au message de confirmation. */
.waitlist.is-done .waitlist__form,.waitlist.is-done .waitlist__legal{display:none}
.waitlist.is-done .waitlist__status{margin:0;padding:16px 18px;border-radius:14px;background:var(--surface);font-size:15.5px;color:var(--ink)}
/* Version compacte, en tête du guide : titre plus petit, moins d'espace. */
.waitlist--compact{margin:36px 0 0;padding:20px 20px 18px;border-radius:var(--radius)}
.waitlist--compact+.chapter{padding-top:64px}
.waitlist--compact .waitlist__kicker{margin-bottom:10px}
.waitlist--compact .waitlist__title{margin:0 0 6px;font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.waitlist--compact .waitlist__text{margin-bottom:16px;font-size:15px}
.waitlist--compact .waitlist__legal{margin-top:12px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--ink);font-size:13.5px;color:var(--paper);opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .15s,transform .15s}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Grand mobile / tablette ---------- */
@media(min-width:560px){
  :root{--gutter:28px}
  .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .resources{grid-template-columns:1.3fr 1fr}
  .waitlist{padding:34px 32px 28px}
  .waitlist--compact{padding:22px 24px 20px}
  .waitlist__button{flex:0 0 auto}
}
@media(min-width:760px){
  body{font-size:17px}
  .hero{padding:24px 0 48px;gap:28px}
  .hero__cta{flex-direction:column;align-items:center;gap:14px}
  .btn{flex:0 0 auto}
  .cases{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;border-top:0}
  .cases .row{border-top:1px solid var(--line);border-bottom:0}
  .cases .row:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- Ordinateur : sommaire latéral ---------- */
@media(min-width:1024px){
  :root{--gutter:40px}
  .hero{gap:24px;padding:12px 0 64px}
  .hero h1{font-size:max(48px,min(5.2vw,8.2vh,72px))}
  .hero__text{max-width:880px;margin:0 auto;text-align:center}
  .hero__kicker{justify-content:center}
  .hero__cta{flex-direction:column;align-items:center;gap:14px}
  .chapterbar{display:none}
  .layout{display:grid;grid-template-columns:220px minmax(0,var(--content));justify-content:center;gap:88px;border-top:1px solid var(--line)}
  .sidebar{display:block}
  .sidebar__inner{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:40px 0 32px;scrollbar-width:none}
  .sidebar__inner::-webkit-scrollbar{display:none}
  .progress--track{margin:0 0 26px;border-radius:2px;background:var(--line)}
  .content{margin:0;padding-top:48px}
  .chapter{padding-top:96px;scroll-margin-top:24px}
  .step,.prompt{scroll-margin-top:24px}
  .phase{margin-top:104px}
  .board{max-width:560px}
  .resources{margin-bottom:96px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Dernière question avant d'ouvrir le guide : recevoir les nouveautés ? */
.optin{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(28,27,25,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:optin-fond .25s ease both}
.optin__box{width:min(360px,100%);padding:26px 22px 12px;border-radius:22px;background:var(--paper);box-shadow:0 30px 60px -20px rgba(28,27,25,.55);text-align:center;animation:optin-in .4s cubic-bezier(.2,.8,.2,1) both}
.optin__pill{display:inline-block;margin:0 0 12px;padding:4px 11px;border-radius:999px;background:var(--orange-soft);font-size:12px;font-weight:600;color:var(--orange)}
.optin__titre{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.optin__liste{display:grid;gap:8px;margin:14px 0 18px;padding:0;list-style:none;text-align:left;font-size:14px;line-height:1.4;color:var(--body)}
.optin__liste li{display:flex;align-items:flex-start;gap:9px}
.optin__liste li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.optin__legal{margin:8px 0 0;font-size:11px;line-height:1.4;color:rgba(28,27,25,.45)}
.optin__legal a{color:rgba(28,27,25,.6)}
.optin__oui{display:block;width:100%;height:48px;border:0;border-radius:999px;background:var(--orange);font:inherit;font-size:15.5px;font-weight:600;color:#fff;cursor:pointer}
.optin__non{display:block;margin:2px auto 0;padding:6px 8px 4px;border:0;background:none;font:inherit;font-size:12.5px;color:rgba(28,27,25,.55);cursor:pointer}
.optin__non:hover{color:var(--ink);text-decoration:underline}
.optin__oui:focus{outline:none}.optin__oui:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.optin__oui:disabled,.optin__non:disabled{opacity:.6}
.optin.is-ouvre .optin__box{width:min(360px,100%);padding:26px 22px 12px;border-radius:22px;background:var(--paper);box-shadow:0 30px 60px -20px rgba(28,27,25,.55);text-align:center;animation:optin-in .4s cubic-bezier(.2,.8,.2,1) both}
.optin.is-ouvre .optin__pill{display:inline-block;margin:0 0 12px;padding:4px 11px;border-radius:999px;background:var(--orange-soft);font-size:12px;font-weight:600;color:var(--orange)}
@keyframes optin-fond{from{opacity:0}}
@keyframes optin-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes optin-cadenas{40%{transform:scale(1.25) rotate(-12deg)}to{transform:scale(1)}}
@keyframes optin-ouvre{60%{opacity:1;transform:scale(1.02)}to{opacity:0;transform:scale(.9) translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.optin,.optin__box,.optin.is-ouvre .optin__box{animation:none}}