/* Studio 916 — feuille de style unique
   Couleurs de marque : encre, papier, signal. Les thèmes de section
   redéfinissent --bg / --fg / --accent / --accent-texte localement. */

@font-face{font-family:Unbounded;src:url(/fonts/unbounded-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --encre:#0C0C0D;
  --papier:#F5F5F2;
  --signal:#D4FF3A;
  --gris:#5E5E5E;
  --gris-clair:#A8A8A3;
  --bg:var(--encre);
  --fg:var(--papier);
  --accent:var(--signal);
  --accent-texte:var(--encre);
  --marge:clamp(20px,4.4vw,64px);
  --titre:"Unbounded",system-ui,sans-serif;
  --texte:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --nav-h:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-padding-top:var(--nav-h)}
body{background:var(--bg);color:var(--fg);font:400 18px/1.55 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:fixed;top:-60px;left:12px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:6px;font-weight:600}
.evitement:focus{top:12px}

/* Thèmes de section */
.t-encre{--bg:var(--encre);--fg:var(--papier);--accent:var(--signal);--accent-texte:var(--encre);--doux:var(--gris-clair);background:var(--bg);color:var(--fg)}
.t-papier{--bg:var(--papier);--fg:var(--encre);--accent:var(--encre);--accent-texte:var(--papier);--doux:var(--gris);background:var(--bg);color:var(--fg)}
.t-signal{--bg:var(--signal);--fg:var(--encre);--accent:var(--encre);--accent-texte:var(--signal);--doux:#3B4512;background:var(--bg);color:var(--fg)}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-texte);font:600 17px/1 var(--texte);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:scale(1.04)}
.btn.petit{height:44px;padding:0 20px;font-size:15px}
.btn.grand{height:64px;padding:0 36px;font-size:18px}
.lien{font-weight:600;text-decoration-thickness:2px;text-underline-offset:5px}

/* Logo : cadre 9:16 + deux points */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.logo svg{flex:none;height:30px;width:auto}
.logo .cadre-logo{fill:currentColor}
.logo .points{fill:var(--bg)}
.logo .mot{font:400 21px/1 var(--titre);letter-spacing:-.035em}
.logo .mot b{font-weight:700}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);padding:0 var(--marge);display:flex;align-items:center;justify-content:space-between;background:var(--bg);color:var(--fg);transition:background-color .35s,color .35s}
.nav nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:600}
.nav nav a{text-decoration:none}
.nav nav a.nav-lien:hover{text-decoration:underline;text-underline-offset:5px}
.nav .lang{font-family:var(--mono);font-weight:500;font-size:14px}
@media (width<=860px){.nav nav a.nav-lien{display:none}.nav nav{gap:16px}}
@media (width<=760px){:root{--nav-h:64px}.logo .mot{font-size:18px}.logo svg{height:26px}}

/* ---------- Scène d'ouverture (épinglée au scroll) ---------- */
.scene{position:relative;height:100svh;overflow:hidden}
.geant{position:absolute;inset:0;z-index:1;pointer-events:none;font:700 clamp(44px,8vw,132px)/1 var(--titre);letter-spacing:-.045em}
.geant .l{position:absolute;white-space:nowrap;overflow:hidden;padding:0 .02em .1em}
.geant .l span{display:block}
.geant .l1{left:var(--marge);top:max(100px,12vh)}
.geant .l2{right:var(--marge);top:calc(max(100px,12vh) + clamp(44px,8vw,132px)*1.08)}
.geant .l2 span{font-weight:400}
.eventail{position:absolute;inset:0;z-index:2;pointer-events:none}
.carte,.ecran{position:absolute;top:50%;left:50%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#000;will-change:transform;backface-visibility:hidden}
.carte{width:16vw;opacity:0;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.carte img,.ecran video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecran{z-index:3;width:26vw;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.ecran video{clip-path:inset(100% 0 0 0)}
.ecran video:first-child{clip-path:inset(0)}
.hero-bas{position:absolute;z-index:4;left:var(--marge);right:var(--marge);bottom:clamp(24px,4vh,44px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.hero-bas p{max-width:30ch;font-size:clamp(19px,1.55vw,24px);line-height:1.35;letter-spacing:-.01em}
.hero-bas .actions{display:flex;align-items:center;gap:28px;flex:none}
.defiler{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.defiler i{display:block;width:2px;height:34px;background:currentColor;transform-origin:top;animation:goutte 1.6s ease-in-out infinite}
@keyframes goutte{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.noms{position:absolute;top:50%;left:0;right:0;z-index:1;height:clamp(80px,15vw,240px);transform:translateY(-50%);overflow:hidden;pointer-events:none}
.noms div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(64px,13.5vw,220px)/1 var(--titre);letter-spacing:-.05em;white-space:nowrap;visibility:hidden;will-change:transform}
.fiches{position:absolute;z-index:4;left:var(--marge);bottom:44px;width:min(32ch,30vw)}
.fiche{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden}
.fiche p{font-size:18px;line-height:1.45}
.fiche .meta{margin-top:12px;font-family:var(--mono);font-size:13px;opacity:.75}
.fiche a{display:inline-block;margin-top:14px;font-size:16px;font-weight:600;text-decoration-thickness:2px;text-underline-offset:5px}
.passer{position:absolute;z-index:4;right:var(--marge);bottom:44px;font-size:15px;font-weight:600;text-underline-offset:5px;opacity:0;visibility:hidden}

/* ---------- Finale : le cadre vide = le logo ---------- */
.finale{position:relative;z-index:4;height:100svh;overflow:hidden}
.sixieme{--w:min(23vw,calc(56.25svh - 100px));position:absolute;top:calc(50% + var(--nav-h)/2);right:calc(var(--marge) + 4vw);width:var(--w);margin-top:calc(var(--w)*-.8889);aspect-ratio:9/16;border-radius:clamp(14px,2.2vw,30px);background:var(--encre);color:var(--papier);display:grid;place-items:start center;padding-top:22px;opacity:0;visibility:hidden}
.sixieme span{font:500 clamp(13px,1.1vw,16px)/1 var(--mono);opacity:.8}
.sixieme i{position:absolute;left:50%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--signal);transform:translateX(-50%)}
.sixieme i:nth-of-type(1){top:36.5%}
.sixieme i:nth-of-type(2){top:57%}
.question{position:absolute;left:var(--marge);top:calc(50% + var(--nav-h)/2 - 40px);transform:translateY(-50%);width:62vw;pointer-events:none;font:700 clamp(48px,8.6vw,150px)/.95 var(--titre);letter-spacing:-.05em}
.question .l{display:block;overflow:hidden;padding:0 .04em .08em}
.question .l span{display:block;will-change:transform}
.finale .cta{position:absolute;left:var(--marge);bottom:8vh;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:26px;opacity:0;visibility:hidden}

/* ---------- Sections de conversion ---------- */
.bloc{position:relative;z-index:4;padding:clamp(88px,12vw,160px) var(--marge)}
.bloc h2{font:700 clamp(34px,4.6vw,72px)/1.02 var(--titre);letter-spacing:-.045em;max-width:18ch}
.intro{margin-top:24px;max-width:52ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--doux)}

/* Offre */
.offre-tete{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end}
.offre-tete .intro{margin-top:0}
.lancement{margin-top:clamp(40px,5vw,64px);border-radius:22px;padding:clamp(24px,3vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px clamp(28px,3.4vw,56px);align-items:center;position:relative;overflow:hidden}
.l-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--encre);color:var(--signal);font:600 13px/1 var(--texte);letter-spacing:.02em;text-transform:uppercase}
.l-pct{margin-top:10px;font:700 clamp(84px,10vw,152px)/.82 var(--titre);letter-spacing:-.07em}
.l-pct small{font-size:.45em;letter-spacing:-.04em;margin-left:.04em}
.lancement h3{font:700 clamp(20px,1.9vw,28px)/1.15 var(--titre);letter-spacing:-.035em;max-width:30ch}
.lancement .l-corps>p{margin-top:10px;max-width:58ch;font-size:16px;line-height:1.5}
.l-tarifs{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:1px solid color-mix(in srgb,var(--encre) 30%,transparent)}
.l-tarifs li{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 30%,transparent);font-size:15px}
.l-tarifs span{margin-right:auto}
.l-tarifs s{color:var(--doux);text-decoration-thickness:2px}
.l-tarifs b{font:700 17px/1 var(--titre);letter-spacing:-.03em}
.l-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.l-places{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.slots{display:flex;gap:5px}
.slots i{width:12px;height:20px;border-radius:4px;background:var(--encre)}
.l-apres{font-size:14px;color:var(--doux);margin-bottom:6px}
.lancement .btn{background:var(--encre);color:var(--signal)}
.formules{list-style:none;margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.formule{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,36px);border-radius:18px;border:2px solid var(--fg)}
.formule.reco{border-color:var(--bg)}
.f-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px}
.f-tete h3{font:700 clamp(24px,2.2vw,32px)/1 var(--titre);letter-spacing:-.04em}
.f-tete .duree{font:500 14px/1 var(--mono);color:var(--doux)}
.f-tete .tag{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--signal);color:var(--encre);font-size:13px;font-weight:600}
.formule .montant{margin-top:28px;font:700 clamp(48px,4.6vw,72px)/.95 var(--titre);letter-spacing:-.055em}
.formule .unite{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;color:var(--doux)}
.formule .unite .eco{padding:6px 12px;border-radius:999px;background:var(--signal);color:var(--encre);font-weight:600}
.formule .unite s{text-decoration-thickness:2px}
.formule .pitch{margin-top:20px;font-size:17px;line-height:1.5}
.formule .points{list-style:none;margin:22px 0 28px;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.formule .points li{padding:12px 0 12px 26px;position:relative;font-size:16px;border-bottom:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.formule .points li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:16px;border-radius:3px;background:var(--fg)}
.formule.reco .points li::before{background:var(--signal)}
.formule .btn{margin-top:auto;align-self:flex-start}
.formule.abo{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,72px)}
.abo-g,.abo-d{display:flex;flex-direction:column}
.formule.abo .montant small{font-size:.32em;letter-spacing:-.02em;margin-left:.15em;font-weight:400}
.formule.abo .points{margin-top:0}
.inclus{margin-top:clamp(56px,7vw,96px)}
.inclus h3{font-size:16px;font-weight:600;color:var(--doux)}
.inclus ul{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.inclus li{padding-top:18px;border-top:2px solid var(--fg)}
.inclus li b{display:block;font:700 19px/1.2 var(--titre);letter-spacing:-.03em}
.inclus li span{display:block;margin-top:10px;font-size:16px;line-height:1.45;color:var(--doux)}

/* Process : une timeline de montage */
.piste{margin-top:clamp(56px,7vw,96px);position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:58px}
.piste::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:repeating-linear-gradient(90deg,var(--doux) 0 1px,transparent 1px 16px);opacity:.55}
.piste::after{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--fg)}
.piste li{position:relative}
.piste li::before{content:"";position:absolute;top:-44px;left:0;width:14px;height:25px;border-radius:4px;background:var(--accent)}
.piste .num{font:500 13px/1 var(--mono);color:var(--doux)}
.piste h3{margin-top:14px;font:700 clamp(21px,1.9vw,28px)/1.15 var(--titre);letter-spacing:-.035em;max-width:16ch}
.piste p{margin-top:12px;max-width:36ch;font-size:17px;line-height:1.5;color:var(--doux)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq > div{border-top:2px solid var(--fg)}
.t-encre + .t-encre{padding-top:clamp(24px,4vw,56px)}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:600 clamp(18px,1.5vw,21px)/1.35 var(--texte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/2px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;max-width:58ch;font-size:17px;line-height:1.55;color:var(--doux)}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact h2{font-size:clamp(40px,5vw,84px)}
.contact .direct{margin-top:32px;font-size:16px}
.contact .direct a{display:inline-block;margin-top:6px;font:400 clamp(17px,1.5vw,22px)/1.3 var(--titre);letter-spacing:-.03em;text-underline-offset:6px;text-decoration-thickness:2px;word-break:break-all}

/* Formulaire */
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.formulaire .large{grid-column:1/-1}
.formulaire label{display:block;margin-bottom:6px;font-size:15px;font-weight:600}
.formulaire label small{font-size:14px;font-weight:400;opacity:.7}
.formulaire input,.formulaire textarea{width:100%;padding:10px 0;border:0;border-bottom:1.5px solid color-mix(in srgb,var(--fg) 55%,transparent);border-radius:0;background:transparent;color:var(--fg);font:400 18px/1.4 var(--texte)}
.formulaire textarea{min-height:120px;resize:vertical}
.formulaire input:focus,.formulaire textarea:focus{outline:0;border-bottom:2.5px solid var(--fg)}
.formulaire input::placeholder{color:color-mix(in srgb,var(--fg) 40%,transparent)}
.formulaire [aria-invalid=true]{border-bottom-color:#B42318}
.formulaire .erreur{margin-top:6px;font-size:14px;font-weight:600;color:#B42318}
.formulaire .erreur:empty{display:none}
.formulaire .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .envoi{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:6px}
.formulaire button[disabled]{opacity:.6;cursor:progress}
.formulaire .statut{max-width:52ch;font-size:16px;font-weight:600}
.formulaire .statut a{font-weight:600}
.formulaire .rgpd{font-size:14px;color:var(--doux)}
.formulaire .rgpd a{font-weight:600}
.t-encre .formulaire [aria-invalid=true]{border-bottom-color:#FF8A7A}
.t-encre .formulaire .erreur{color:#FF8A7A}

/* Fenêtre de contact */
.fenetre{position:fixed;inset:0;margin:auto;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:clamp(22px,4vw,44px);overflow:auto;border:0;border-radius:18px;box-shadow:0 40px 120px -20px rgba(0,0,0,.6)}
.fenetre::backdrop{background:rgba(12,12,13,.7);backdrop-filter:blur(4px)}
.fenetre[open]{animation:ouvre .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ouvre{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.fenetre-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.fenetre h2{font:700 clamp(28px,4vw,46px)/1 var(--titre);letter-spacing:-.045em}
.fermer{flex:none;width:46px;height:46px;border:1.5px solid var(--fg);border-radius:50%;background:transparent;color:var(--fg);font:400 28px/1 var(--texte);cursor:pointer}
.fenetre .formulaire{gap:16px 28px}
.fenetre textarea{min-height:90px}
.fenetre-intro{margin:10px 0 20px;max-width:52ch;font-size:17px;color:var(--doux)}

/* Pied de page */
.pied{position:relative;z-index:4;padding:clamp(80px,10vw,120px) var(--marge) 40px}
.pied-haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.pied-logo{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font:400 clamp(52px,10.5vw,176px)/.9 var(--titre);letter-spacing:-.06em}
.pied-logo b{font-weight:700}
.pied-logo svg{height:.95em;width:auto;flex:none}
.pied-logo .cadre-logo{fill:var(--signal)}
.pied-logo .points{fill:var(--encre)}
.pied-contact p{margin-bottom:8px;font-size:17px;color:var(--doux)}
.pied-mail{font:400 clamp(18px,1.8vw,26px)/1.2 var(--titre);letter-spacing:-.03em;text-underline-offset:7px;text-decoration-thickness:2px}
.pied-films{margin-top:56px;display:flex;flex-wrap:wrap;gap:10px 28px;font:400 clamp(17px,1.6vw,22px)/1.3 var(--titre);letter-spacing:-.03em}
.pied-films span{color:var(--doux);font:600 15px/1.9 var(--texte);letter-spacing:0;margin-right:4px}
.pied-films a{text-decoration:none}
.pied-films a:hover{text-decoration:underline;text-underline-offset:5px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:80px;padding-top:24px;border-top:1.5px solid color-mix(in srgb,var(--fg) 30%,transparent);font-size:14px}
.pied-bas span{color:var(--doux)}
.pied-bas nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:600}
.pied-bas nav a{text-decoration:none}
.pied-bas nav a:hover{text-decoration:underline}

/* ---------- Pages projet ---------- */
.projet{padding:calc(var(--nav-h) + clamp(32px,5vw,64px)) var(--marge) clamp(80px,10vw,120px)}
.retour{display:inline-block;font-size:15px;font-weight:600;text-underline-offset:5px}
.projet-grille{margin-top:32px;display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.projet-video{position:sticky;top:calc(var(--nav-h) + 24px)}
.projet-video video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#000}
.projet-video p{margin-top:12px;font-size:14px;color:var(--doux)}
.projet h1{font:700 clamp(52px,8vw,128px)/.95 var(--titre);letter-spacing:-.06em}
.projet .avertissement{margin-top:20px;max-width:56ch;font-size:16px;color:var(--doux)}
.fiche-projet{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--fg)}
.fiche-projet div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.fiche-projet dt{font-weight:600}
.fiche-projet dd{max-width:58ch}
.decoupage{margin-top:72px}
.decoupage h2{font:700 clamp(26px,2.6vw,38px)/1.1 var(--titre);letter-spacing:-.04em}
.decoupage ol{list-style:none;margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px}
.decoupage img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px}
.decoupage p{margin-top:10px;font-size:15px;line-height:1.4}
.decoupage .tc{display:block;margin-top:4px;font:500 13px/1 var(--mono);color:var(--doux)}
.projet-fin{margin-top:88px;padding-top:40px;border-top:2px solid var(--fg);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.projet-fin h2{font:700 clamp(28px,3.4vw,52px)/1.05 var(--titre);letter-spacing:-.045em;max-width:20ch}
.projet-fin .actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}

/* ---------- Pages légales ---------- */
.legal{padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) var(--marge) 120px;max-width:calc(760px + 2*var(--marge))}
.legal h1{font:700 clamp(40px,5.4vw,80px)/1 var(--titre);letter-spacing:-.05em}
.legal .maj{margin-top:16px;color:var(--doux);font-size:15px}
.legal h2{margin-top:48px;font:700 22px/1.2 var(--titre);letter-spacing:-.03em}
.legal p{margin-top:14px;max-width:64ch}
.legal .a-completer{background:color-mix(in srgb,var(--fg) 10%,transparent);padding:0 6px;border-radius:4px}

@media (761px<=width<=1100px){
  .hero-bas p{font-size:18px;max-width:28ch}
  .formules{grid-template-columns:minmax(0,1fr)}
  .formule{max-width:640px}
  .formule.abo{grid-template-columns:minmax(0,1fr)}
  .formule.abo .points{margin-top:22px}
  .lancement{grid-template-columns:auto minmax(0,1fr)}
  .l-action{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
  .l-apres{margin:0}
}

.moi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px clamp(40px,6vw,120px);align-items:start}
.moi h2{font:700 clamp(36px,4.6vw,72px)/1 var(--titre);letter-spacing:-.05em}
.moi-texte p{font-size:clamp(18px,1.5vw,21px);line-height:1.55;max-width:46ch}
.moi-texte p+p{margin-top:18px}
.moi-texte .moi-sig{margin-top:28px;font-size:15px;color:var(--doux)}

/* ---------- Mobile ---------- */
@media (width<=900px){
  .offre-tete,.faq,.contact,.moi{grid-template-columns:minmax(0,1fr)}
  .offre-tete .intro{margin-top:4px}
  .lancement{grid-template-columns:minmax(0,1fr)}
  .l-action{grid-column:auto;flex-direction:column;align-items:flex-start}
  .l-tarifs{grid-template-columns:minmax(0,1fr)}
  .formule.abo{grid-template-columns:minmax(0,1fr)}
  .formule.abo .points{margin-top:22px}
  .inclus ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projet-grille{grid-template-columns:minmax(0,1fr)}
  .projet-video{position:static;max-width:380px}
}
@media (width<=760px){
  body{font-size:17px}
  .geant{font-size:10.2vw}
  .geant .l1{top:96px}
  .geant .l2{top:calc(96px + 11vw);right:auto;left:var(--marge)}
  .hero-bas{bottom:24px;flex-direction:column;align-items:flex-start;gap:16px}
  .hero-bas p{font-size:18px;max-width:none}
  .formules{grid-template-columns:minmax(0,1fr)}
  .defiler{display:none}
  .noms{transform:none}
  .fiches{left:var(--marge);right:var(--marge);bottom:62px;width:auto}
  .fiche p{font-size:16px}
  .passer{left:var(--marge);right:auto;bottom:22px}
  .sixieme{--w:min(40vw,calc(56.25svh - 190px));top:calc(var(--nav-h) + 24px);right:auto;left:50%;margin:0 0 0 calc(var(--w)*-.5)}
  .question{top:auto;bottom:calc(5vh + 150px);transform:none;width:auto;right:var(--marge);font-size:12.5vw}
  .finale .cta{flex-direction:column;align-items:flex-start;gap:14px;bottom:5vh}
  .inclus ul,.piste{grid-template-columns:minmax(0,1fr)}
  .piste{padding-top:0;padding-left:44px;gap:40px}
  .piste::before{left:0;right:auto;top:0;bottom:0;width:22px;height:auto;background:repeating-linear-gradient(180deg,var(--doux) 0 1px,transparent 1px 16px)}
  .piste::after{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .piste li::before{top:0;left:-37px;width:25px;height:14px}
  .formulaire{grid-template-columns:1fr}
  .fiche-projet div{grid-template-columns:minmax(0,1fr);gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .btn,.nav{transition:none}
  .scene{height:auto;padding:calc(var(--nav-h) + 32px) var(--marge) 40px;display:grid;gap:32px;overflow:visible}
  .geant,.geant .l,.ecran,.fiches,.fiche,.hero-bas{position:static;width:auto;transform:none!important}
  .eventail,.noms,.passer,.defiler{display:none}
  .ecran{width:min(70vw,340px)}
  .fiche{opacity:1;visibility:visible;margin-bottom:24px}
  .fiche h2.sr{position:static;width:auto;height:auto;clip:auto;white-space:normal;margin-bottom:8px;font:700 28px/1.1 var(--titre)}
  .geant .l2{margin-top:0}
  .finale{height:auto;padding:100px var(--marge);display:grid;justify-items:center;gap:40px}
  .sixieme{position:relative;top:auto;left:auto;right:auto;margin:0;opacity:1;visibility:visible;--w:min(50vw,240px)}
  .question{transform:none;width:auto}
  .question,.finale .cta{position:static;opacity:1;visibility:visible}
  .defiler i,.fenetre[open]{animation:none}
}