/* =========================================================
   Groom Studio — feuille de style
   DA « Liquid Geometry » : noir vert, chrome liquide, géométrie fine
   ========================================================= */

@font-face{font-family:"Anton";src:url("../fonts/anton-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#050a08;
  --bg-2:#08110d;
  --ink:#ece5d8;          /* crème */
  --ink-2:rgba(236,229,216,.62);
  --ink-3:rgba(236,229,216,.38);
  --line:rgba(236,229,216,.1);
  --line-2:rgba(236,229,216,.2);
  --green:#2f8a66;
  --green-l:#8fdcb4;
  --orange:#ff7a1a;
  --violet:#8f3dff;
  --grad:linear-gradient(100deg,#ffb15c 0%,#ff7a1a 28%,#e03dd8 62%,#7b2cff 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.4 0 0 0 -.2 1.4 0 0 0 -.2 1.4 0 0 0 -.2 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(18px,4vw,56px);
  --max:1320px;
  --cell:72px;            /* taille d'une case du quadrillage */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.6;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--orange);color:#120804}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--bg);padding:.7em 1.2em;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* ---------- Typo utilitaire ---------- */
.label{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}
.label .num{color:var(--orange);margin-right:.9em;letter-spacing:.1em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Grain « logo » sur les textes en dégradé : bruit gris fusionné en overlay, découpé au texte */
.grad{background-image:var(--grain),var(--grad);background-size:150px 150px,100% 100%;background-repeat:repeat,no-repeat;background-blend-mode:soft-light,normal}
.h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,112px);line-height:.92;letter-spacing:-.005em;margin-top:22px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green-l);box-shadow:0 0 0 4px rgba(143,220,180,.15),0 0 14px var(--green-l);margin-right:12px;vertical-align:middle}

/* ---------- Fond : quadrillage animé ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 70% 0%,#0b1d16 0%,var(--bg) 55%)}
.backdrop__grid{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 100%)}
.backdrop__grid-move{position:absolute;inset:0;will-change:transform}
.backdrop__grid-in{position:absolute;inset:calc(var(--cell) * -2);will-change:transform;
  background-image:
    linear-gradient(rgba(236,229,216,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,229,216,.075) 1px,transparent 1px),
    linear-gradient(rgba(236,229,216,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,229,216,.035) 1px,transparent 1px);
  background-size:var(--cell) var(--cell),var(--cell) var(--cell),calc(var(--cell)/4) calc(var(--cell)/4),calc(var(--cell)/4) calc(var(--cell)/4);
  animation:grid-drift 26s linear infinite}
/* Glissement d'exactement une case : la boucle est invisible */
@keyframes grid-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--cell) * -1),calc(var(--cell) * -1),0)}}
.backdrop__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.backdrop__glow--a{width:46vw;height:46vw;left:-12vw;top:30vh;background:radial-gradient(circle,rgba(47,138,102,.55),transparent 65%);animation:float-a 22s ease-in-out infinite alternate}
.backdrop__glow--b{width:38vw;height:38vw;right:-10vw;top:-8vw;background:radial-gradient(circle,rgba(143,61,255,.32),transparent 65%);animation:float-b 26s ease-in-out infinite alternate}
@keyframes float-a{to{transform:translate3d(18vw,-12vh,0)}}
@keyframes float-b{to{transform:translate3d(-14vw,24vh,0)}}
.backdrop__grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Boutons ---------- */
.btn{--h:56px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--h);padding:0 26px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.01em;color:#140904;background:var(--ink);overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{color:#fff}
.btn i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;margin-right:-12px;border-radius:50%;background:#140904;color:var(--ink);font-size:13px;transition:transform .5s var(--ease)}
.btn:hover i{transform:rotate(45deg)}
.btn--ghost{background:rgba(236,229,216,.04);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--small{--h:42px;padding:0 20px;font-size:14px}
.link{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .3s,gap .3s}
.link i{font-style:normal}
.link:hover{border-color:var(--orange);gap:16px}

/* ---------- En-tête ---------- */
.header{position:fixed;z-index:60;top:16px;left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),1180px);display:flex;align-items:center;gap:24px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(8,17,13,.45);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transition:background .4s,top .4s var(--ease)}
.header.is-scrolled{background:rgba(5,10,8,.72)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:auto}
.brand__name{font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1}
.brand__studio{font-weight:300;color:var(--ink-2);margin-left:.3em}
.nav{display:flex;gap:4px}
.nav a{position:relative;text-decoration:none;font-size:14px;color:var(--ink-2);padding:10px 14px;border-radius:999px;transition:color .3s,background .3s}
.nav a:hover,.nav a.is-active{color:var(--ink);background:rgba(236,229,216,.06)}
.burger{display:none;position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);cursor:pointer}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--bg);transition:transform .5s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:26px}
.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px;background:rgba(5,10,8,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu-open .menu{opacity:1;visibility:visible}
.menu nav{display:flex;flex-direction:column}
.menu a{display:flex;align-items:baseline;gap:16px;font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,11vw,72px);line-height:1.05;text-decoration:none;border-bottom:1px solid var(--line);padding:8px 0;transform:translateY(20px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.menu a small{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--orange)}
.menu-open .menu a{transform:none;opacity:1}
.menu-open .menu a:nth-child(2){transition-delay:.04s}.menu-open .menu a:nth-child(3){transition-delay:.08s}
.menu-open .menu a:nth-child(4){transition-delay:.12s}.menu-open .menu a:nth-child(5){transition-delay:.16s}.menu-open .menu a:nth-child(6){transition-delay:.2s}
.menu__foot{margin-top:32px}

/* ---------- Repères géométriques ---------- */
.cross{position:absolute;width:22px;height:22px;opacity:.5}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink)}
.cross::before{left:50%;top:0;bottom:0;width:1px}
.cross::after{top:50%;left:0;right:0;height:1px}
.hero__marks .cross:nth-child(1){left:3%;top:16%}
.hero__marks .cross:nth-child(2){right:3%;top:16%}
.hero__marks .cross:nth-child(3){left:3%;bottom:12%}
.hero__marks .cross:nth-child(4){right:3%;bottom:12%}
.frame__c{position:absolute;width:22px;height:22px;border:0 solid var(--ink);opacity:.8;z-index:2}
.frame__c--tl{left:-10px;top:-10px;border-width:1px 0 0 1px}
.frame__c--tr{right:-10px;top:-10px;border-width:1px 1px 0 0}
.frame__c--bl{left:-10px;bottom:-10px;border-width:0 0 1px 1px}
.frame__c--br{right:-10px;bottom:-10px;border-width:0 1px 1px 0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 40px}
.hero__marks{position:absolute;inset:0;pointer-events:none}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.hero__eyebrow{display:flex;align-items:center}
.hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(50px,6.8vw,116px);line-height:.92;letter-spacing:-.005em;margin:26px 0 30px}
.hero__title .line{display:block;overflow:hidden;padding:.22em 0 .04em;margin-top:-.22em}
.hero__title .line>span{display:inline-block;white-space:nowrap}
/* Le dégradé doit couvrir aussi les accents, qui dépassent du haut de la ligne */
.hero__title .grad{padding-top:.22em;margin-top:-.22em}
.hero__lead{max-width:34em;color:var(--ink-2);font-size:clamp(16px,1.25vw,19px)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.hero__visual{position:relative;aspect-ratio:4/5;max-height:72vh;justify-self:center;width:100%}
.frame{position:absolute;inset:0;border-radius:4px}
.frame__img{position:absolute;inset:0;overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-2)}
.frame__img img{width:100%;height:118%;object-fit:cover;transform-origin:50% 50%}
.frame__img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(236,229,216,.09) 1px,transparent 1px) 0 0/25% 20%,
  linear-gradient(90deg,rgba(236,229,216,.09) 1px,transparent 1px) 0 0/25% 20%,
  linear-gradient(180deg,transparent 50%,rgba(5,10,8,.7))}
.frame__hud{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between;font-size:10px;z-index:2}
.frame__hud--top{top:14px}
.frame__hud--bot{bottom:14px}
.frame__hud b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.ring{position:absolute;width:62%;left:-18%;bottom:-8%;color:var(--ink);opacity:.55}
.hero__logo{position:absolute;width:58%;right:-10%;top:-9%;filter:drop-shadow(0 30px 50px rgba(123,44,255,.35)) drop-shadow(0 10px 30px rgba(255,122,26,.25))}
.spark{position:absolute;color:var(--ink)}
.spark--a{width:34px;left:-6%;top:20%;color:var(--orange)}
.spark--b{width:18px;right:6%;bottom:22%}
.hero__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(40px,7vh,80px);font-size:10px;color:var(--ink-3)}
.hero__scroll{display:flex;align-items:center;gap:12px}
.hero__scroll i{position:relative;display:block;width:1px;height:36px;background:var(--line-2);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:scrolldown 1.8s var(--ease) infinite}
@keyframes scrolldown{to{top:100%}}

/* ---------- Bandeau ---------- */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:rgba(5,10,8,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.marquee__track{display:flex;align-items:center;gap:36px;width:max-content;white-space:nowrap}
.marquee span{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.2vw,46px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--ink-2)}
.marquee span:nth-of-type(odd){color:var(--ink);-webkit-text-stroke:0}
.marquee b{color:var(--orange);font-size:22px;font-weight:400}

/* ---------- Sections ---------- */
section{position:relative}
.statement,.method,.work,.offers,.studio,.faq{padding-block:clamp(70px,10vh,120px)}
.section-head{margin-bottom:clamp(50px,8vh,90px)}
.section-head__lead{max-width:36em;margin-top:28px;color:var(--ink-2);font-size:clamp(16px,1.25vw,19px)}

/* Constat */
.statement{display:grid;grid-template-columns:220px 1fr;gap:40px}
.statement__text{font-size:clamp(28px,3.6vw,54px);line-height:1.12;font-weight:300;letter-spacing:-.015em}
.statement__text em{font-style:normal;font-weight:500}

/* Méthode */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{position:relative;padding:34px 28px 40px;border-right:1px solid var(--line);transition:background .5s}
.step:first-child{border-left:1px solid var(--line)}
.step::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.step:hover{background:rgba(236,229,216,.025)}
.step:hover::before{transform:none}
.step__icon{width:56px;height:56px;color:var(--ink);opacity:.8;margin-bottom:50px}
.step__icon svg{width:100%;height:100%;stroke-width:1}
.step__n{position:absolute;right:24px;top:30px;font-size:11px;letter-spacing:.2em;color:var(--orange)}
.step h3{font-weight:500;font-size:21px;letter-spacing:-.01em;margin-bottom:12px}
.step p{color:var(--ink-2);font-size:15px}

/* Réalisations : projets à venir */
.soon{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,52vh,520px);padding:clamp(28px,5vw,60px);border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2);isolation:isolate}
.soon__bg{position:absolute;inset:-14% 0;z-index:-1;will-change:transform}
.soon__bg img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(120%);transform:scale(1.1);opacity:.75}
.soon::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(rgba(236,229,216,.07) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(236,229,216,.07) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(5,10,8,.88) 0%,rgba(5,10,8,.55) 55%,rgba(5,10,8,.2))}
.soon .frame__c{left:auto;right:auto;top:auto;bottom:auto}
.soon .frame__c--tl{left:14px;top:14px}.soon .frame__c--tr{right:14px;top:14px}
.soon .frame__c--bl{left:14px;bottom:14px}.soon .frame__c--br{right:14px;bottom:14px}
.soon__hud{position:absolute;left:44px;right:44px;top:26px;display:flex;justify-content:space-between;font-size:10px}
.soon__body{max-width:620px}
.soon__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.4vw,84px);line-height:.92;margin:16px 0 20px}
.soon__text{color:var(--ink-2);max-width:30em}
.soon__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);overflow:hidden}
.soon__bar i{position:absolute;top:0;bottom:0;width:30%;background:var(--grad);animation:loading 2.6s var(--ease) infinite}
@keyframes loading{from{left:-30%}to{left:100%}}
.next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;padding:30px 34px;border:1px dashed var(--line-2);border-radius:6px;transition:border-color .4s,background .4s}
.next:hover{border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.03)}
.next__text{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1;color:var(--ink-3);transition:color .4s}
.next:hover .next__text{color:var(--ink)}

/* Ancien bloc étude de cas (gardé pour les futurs projets) */
.case{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.case__media{position:relative;display:block;aspect-ratio:16/11;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2)}
.case__bg{position:absolute;inset:-12% 0;will-change:transform}
.case__bg img{width:100%;height:100%;object-fit:cover}
.case__screen.ph{position:absolute;left:10%;right:10%;top:12%;bottom:-6%;border-radius:8px 8px 0 0;box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 0 0 1px var(--line-2);transition:transform .8s var(--ease)}
.case__media:hover .case__screen{transform:translateY(-12px)}
.case__tag{position:absolute;left:16px;top:16px;z-index:2;padding:7px 12px;border-radius:999px;background:rgba(5,10,8,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-size:10px}
.case__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.6vw,70px);line-height:.95;margin:16px 0 20px}
.case__body>p:not(.label){color:var(--ink-2)}
.case__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.case__tags li{padding:8px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:10px}
.case--soon{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;padding:30px 34px;border:1px dashed var(--line-2);border-radius:6px}
.case--soon__text{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1;color:var(--ink-3)}

/* Photos à fournir */
.ph{position:relative;overflow:hidden;background:#0d1813}
.ph::before{content:"";position:absolute;inset:0;background-image:repeating-conic-gradient(rgba(236,229,216,.05) 0 25%,transparent 0 50%);background-size:40px 40px}
.ph__note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding:.6em 1.1em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);background:rgba(5,10,8,.6);color:var(--ink-2)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* Offres */
.offers{overflow:hidden}
.offers__bg{position:absolute;right:-12%;top:8%;width:min(60vw,820px);opacity:.38;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);pointer-events:none}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1080px}
.plan{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;padding:38px 36px 36px;border-radius:10px;background:linear-gradient(180deg,rgba(236,229,216,.05),rgba(236,229,216,.015));box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden;isolation:isolate}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(143,220,180,.12),transparent 60%);opacity:0;transition:opacity .5s}
.plan:hover::before{opacity:1}
.plan--featured{box-shadow:inset 0 0 0 1px rgba(255,122,26,.35)}
.plan--featured::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan__badge{position:absolute;right:20px;top:20px;padding:7px 12px;border-radius:999px;background:var(--grad);color:#fff;font-size:9px}
.plan__name{font-weight:500;font-size:26px;letter-spacing:-.01em;margin-top:10px}
.plan__price{display:flex;align-items:baseline;gap:14px;margin:30px 0 8px}
.plan__price b{font-family:var(--display);font-weight:400;font-size:clamp(56px,6vw,84px);line-height:1}
.plan__old{font-size:18px;color:var(--ink-3);text-decoration:line-through}
.plan__per{font-size:16px;color:var(--ink-2)}
/* Prix remisé : dégradé DA qui glisse + halo qui respire (boucles alternées = sans à-coup) */
.plan__deal{position:relative;isolation:isolate;padding:.08em .04em 0;margin-top:-.08em;
  background-size:150px 150px,220% 100%;animation:deal-shift 7s ease-in-out infinite alternate}
.plan__deal::before{content:"";position:absolute;inset:-35% -30%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 32% 55%,rgba(255,122,26,.85),transparent 75%),
             radial-gradient(closest-side at 70% 45%,rgba(143,61,255,.85),transparent 75%),
             radial-gradient(closest-side at 50% 50%,rgba(224,61,216,.5),transparent 80%);
  filter:blur(20px);opacity:.6;transform:scale(.9);animation:deal-breathe 4.5s ease-in-out infinite alternate}
@keyframes deal-shift{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
@keyframes deal-breathe{from{opacity:.45;transform:scale(.88)}to{opacity:.9;transform:scale(1.1)}}
.plan__note{font-size:13px;color:var(--ink-2)}
.plan__list{margin:30px 0;border-top:1px solid var(--line)}
.plan__list li{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan__list li::before{content:"";flex:none;width:9px;height:9px;background:var(--green-l);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.plan__extra{font-size:13px;color:var(--ink-2);margin-bottom:28px}
.plan__extra b{color:var(--ink);font-weight:500}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan__more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:-6px 0 28px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:gap .3s,border-color .3s,color .3s}
.plan__more i{font-style:normal}
.plan__more:hover{gap:16px;border-color:var(--orange);color:var(--orange)}
.offers__foot{margin-top:30px;font-size:10px;color:var(--ink-3)}

/* Le studio */
.studio__grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}

/* Fiche studio */
.idcard{position:relative;padding:clamp(26px,3.4vw,40px);border-radius:8px;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(rgba(236,229,216,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(236,229,216,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(160deg,rgba(47,138,102,.16),rgba(5,10,8,.75) 55%,rgba(143,61,255,.12));
  box-shadow:inset 0 0 0 1px var(--line-2),0 40px 100px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.idcard .frame__c{width:16px;height:16px}
.idcard .frame__c--tl{left:12px;top:12px}.idcard .frame__c--tr{right:12px;top:12px}
.idcard .frame__c--bl{left:12px;bottom:12px}.idcard .frame__c--br{right:12px;bottom:12px}
.idcard__mark{position:absolute;z-index:-1;width:78%;right:-22%;top:-8%;opacity:.22;filter:blur(1px)}
.idcard__ring{position:absolute;z-index:-1;width:70%;right:-14%;top:-12%;color:var(--ink);opacity:.35}
.idcard__head{display:flex;justify-content:space-between;font-size:10px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.idcard__name{font-family:var(--display);text-transform:uppercase;font-size:clamp(54px,6.4vw,96px);line-height:.9;margin:28px 0 30px}
.idcard__rows{margin:0}
.idcard__rows div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.idcard__rows dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.idcard__rows dd{margin:0;color:var(--ink)}
.idcard__rows [data-clock]{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.idcard__status{display:flex;align-items:center;color:var(--green-l) !important}
.idcard__status .dot{flex:none;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(143,220,180,0),0 0 14px var(--green-l)}}
.footer__mail{display:inline-block;margin-top:14px;font-size:14px;color:var(--ink-2)}
.studio__text>p:not(.label){color:var(--ink-2);margin-top:22px;max-width:32em}
.studio__text .h2{margin-bottom:10px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.facts li{padding:22px 16px 0 0}
.facts b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(36px,3.6vw,54px);line-height:1}
.facts span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}

/* FAQ */
.faq__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.section-head--left{position:sticky;top:120px;margin:0}
.faq__list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.4vw,21px);font-weight:400;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{padding:0 50px 28px 0;color:var(--ink-2)}

/* Contact */
.contact{padding:clamp(120px,20vh,220px) 0;overflow:hidden;text-align:center}
.contact__bg{position:absolute;inset:-10% 0;z-index:-1;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 20%,transparent 75%);opacity:.55}
.contact__bg img{width:100%;height:100%;object-fit:cover}
.contact__inner{display:flex;flex-direction:column;align-items:center}
.contact__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,12vw,200px);line-height:.86;margin:26px 0 30px}
.contact__lead{max-width:30em;color:var(--ink-2);font-size:clamp(16px,1.3vw,20px)}
.contact__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* Formulaire */
.form{position:relative;width:100%;max-width:820px;margin-top:48px;padding:clamp(24px,4vw,44px);text-align:left;border-radius:10px;background:linear-gradient(180deg,rgba(8,17,13,.72),rgba(5,10,8,.6));box-shadow:inset 0 0 0 1px var(--line-2),0 40px 120px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.field label b{color:var(--orange);font-weight:500}
.field label span{letter-spacing:.08em;text-transform:none;color:var(--ink-3)}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:rgba(236,229,216,.035);border:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 16px;transition:box-shadow .3s,background .3s}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,.field textarea:hover{box-shadow:inset 0 0 0 1px rgba(236,229,216,.32)}
.field input:focus,.field textarea:focus{outline:none;background:rgba(236,229,216,.06);box-shadow:inset 0 0 0 1px var(--orange),0 0 0 4px rgba(255,122,26,.14)}
.field.is-invalid input{box-shadow:inset 0 0 0 1px #ff5a5a}
.field__err{font-size:13px;color:#ff8a7a}
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.form__legal{max-width:30em;font-size:12px;line-height:1.55;color:var(--ink-3)}
.form__legal a{color:var(--ink-2)}
.form .btn{flex:none;border:0;cursor:pointer;font-family:inherit}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form__status{font-size:15px;margin-top:0}
.form__status:not(:empty){margin-top:20px;padding:14px 16px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2)}
.form__status.is-ok{color:var(--green-l);box-shadow:inset 0 0 0 1px rgba(143,220,180,.4);background:rgba(143,220,180,.06)}
.form__status.is-err{color:#ff8a7a;box-shadow:inset 0 0 0 1px rgba(255,138,122,.4)}
.form.is-sent .form__grid,.form.is-sent .form__foot{display:none}
.form.is-sent .form__status{margin-top:0;font-size:18px;text-align:center;padding:30px 20px}
@media (max-width:640px){
  .form__grid{grid-template-columns:1fr}
  .form__foot{flex-direction:column;align-items:stretch}
  .form .btn{justify-content:center}
}

/* Pied de page */
.footer{position:relative;border-top:1px solid var(--line);padding-top:70px;overflow:hidden}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.footer__brand img{width:52px;margin-bottom:16px}
.footer__brand .brand__name{font-size:26px}
.footer__tag{margin-top:10px;color:var(--ink-2);font-size:14px}
.footer__nav,.footer__legal{display:flex;flex-direction:column;gap:12px;font-size:10px}
.footer a{text-decoration:none;transition:color .3s}
.footer a:hover{color:var(--orange)}
.footer__giant{font-family:var(--display);text-transform:uppercase;font-size:31vw;line-height:.75;text-align:center;margin-top:60px;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(236,229,216,.14);transform:translateY(8%);user-select:none}

/* ---------- Pages secondaires (légal, 404) ---------- */
.header--page{gap:12px}
.page{max-width:880px;margin:0 auto;padding:160px var(--pad) 110px}
.page h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(48px,8vw,104px);line-height:.92;margin:20px 0 26px}
.page__intro{color:var(--ink-2);font-size:clamp(16px,1.25vw,19px);max-width:36em}
.page__date{margin-top:18px;font-size:10px}
.page h2{font-weight:500;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.01em;margin:56px 0 16px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.page h2 .num{font-size:11px;letter-spacing:.2em;color:var(--orange);font-weight:500}
.page p,.page li{color:var(--ink-2)}
.page p+p{margin-top:12px}
.page ul{margin:12px 0;padding-left:0}
.page ul li{position:relative;padding:6px 0 6px 24px}
.page ul li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;background:var(--green-l);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.page strong{color:var(--ink);font-weight:500}
.page a:not(.btn){color:var(--ink);text-decoration-color:var(--orange);text-underline-offset:3px}
.card{position:relative;padding:24px 26px;border-radius:8px;background:rgba(236,229,216,.03);box-shadow:inset 0 0 0 1px var(--line-2)}
.card p{margin:0}
.card p+p{margin-top:6px}
.page__back{margin-top:64px}
.footer--page{padding-top:40px}
.footer--page .footer__grid{grid-template-columns:1fr auto;align-items:center}
.footer--page .footer__legal{flex-direction:row;flex-wrap:wrap;gap:22px}
.notfound{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 60px}
.notfound__code{font-family:var(--display);font-size:clamp(140px,30vw,360px);line-height:.8;margin:10px 0 24px}
.notfound p:not(.label){color:var(--ink-2);max-width:28em;margin-bottom:34px}
@media (max-width:860px){.footer--page .footer__grid{grid-template-columns:1fr}}

/* ---------- Mode démo ---------- */
.todo{background:none;color:inherit}
.is-demo .todo{background:rgba(255,229,138,.16);outline:1px dashed #ffd36a;outline-offset:2px;border-radius:3px}

/* G géant en fond du hero : téléphone uniquement */
.hero__ghost{display:none}

/* ---------- États d'animation ---------- */
/* Avant le chargement de GSAP, rien ne doit sauter : les éléments animés partent masqués uniquement si JS est actif */
.js-anim [data-reveal]{opacity:0}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav,.header__cta{display:none}
  .burger{display:block}
  .header{padding:6px 6px 6px 16px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:1px solid var(--line)}
  .step{border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .hero{padding-top:110px}
  .hero__title{line-height:.98}
  .hero__inner{grid-template-columns:1fr}
  .hero{overflow:hidden;min-height:100svh}
  .hero__visual{display:none}
  .hero__ghost{display:block;position:absolute;z-index:-1;width:150vw;max-width:none;right:-62vw;top:12%;opacity:.2;pointer-events:none;filter:drop-shadow(0 0 60px rgba(143,61,255,.35))}
  .hero__text{position:relative}
  .hero__foot span:last-child{display:none}
  .statement{grid-template-columns:1fr;gap:24px}
  .case{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .studio__grid,.faq__grid{grid-template-columns:1fr}
  .idcard{max-width:520px}
  .soon__hud{left:34px;right:34px}
  .section-head--left{position:static}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:560px){
  :root{--cell:52px}
  .idcard__rows div{grid-template-columns:90px 1fr;gap:12px}
  .soon__hud span:last-child{display:none}
  .next{padding:24px}
  .steps{grid-template-columns:1fr}
  .step,.step:first-child,.step:nth-child(3){border-left:1px solid var(--line)}
  .step__icon{margin-bottom:28px}
  .plan{padding:30px 22px 26px}
  .plan__badge{position:static;align-self:flex-start;margin-bottom:16px}
  .facts{grid-template-columns:1fr 1fr 1fr}
  .facts b{font-size:32px}
  .faq details p{padding-right:0}
  .hero__ctas .btn,.contact__ctas .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .backdrop__grid-in,.backdrop__glow,.hero__scroll i::after,.soon__bar i,.idcard__status .dot,.plan__deal,.plan__deal::before{animation:none}
  .js-anim [data-reveal]{opacity:1}
  *{transition-duration:.01ms !important}
}