/* ============================================================
   HYL'S STUDIO · home.css · "The Studio" (blueprint 09 cine-web)
   Concept : l'encre noire qui fleurit en or = de l'ombre a la lumiere.
   Palette : ink #08090C · bone #F4F1EB · or #C8A24B (accent, rare).
   Stack : GSAP + ScrollTrigger + Lenis (CDN). Aucun build.
   Depend de base.css (tokens, reset, .wrap, footer).
   ============================================================ */

.eyebrow{
  font-family:var(--ff-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.serif{font-family:var(--ff-serif)}
.muted{color:var(--bone-dim)}

/* Film grain overlay ------------------------------------------------ */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (hover:none){.grain{display:none}}

/* Nav --------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(20px,5vw,56px);
  padding-top:max(22px, env(safe-area-inset-top));
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(8,9,12,.92);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding-top:max(16px, env(safe-area-inset-top));padding-bottom:16px;
}
.nav__right{display:flex;align-items:center;gap:34px}
.nav__links{display:flex;gap:34px;align-items:center}
.nav__links a{font-size:.82rem;letter-spacing:.02em;color:var(--bone-dim);transition:color .25s}
.nav__links a:hover{color:var(--bone)}
.nav__cta{
  border:1px solid var(--gold);color:var(--gold);flex:0 0 auto;
  padding:12px 20px;border-radius:100px;font-size:.8rem;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__cta:hover{background:var(--gold);color:var(--ink)}

/* Toggle hamburger (mobile uniquement) ------------------------------ */
.nav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;background:none;border:none;padding:0;cursor:pointer;
  flex:0 0 auto;
  position:relative;z-index:101; /* doit rester au-dessus du tiroir (z-index:99) pour servir de bouton fermer */
}
.nav__toggle span{display:block;width:100%;height:2px;background:var(--bone);transition:transform .3s var(--ease),opacity .3s var(--ease)}

@media(max-width:820px){
  .nav__toggle{display:flex}
  .nav__right{gap:14px}
  /* backdrop-filter cree un containing block pour les descendants position:fixed :
     ca compressait le tiroir plein ecran dans la petite barre de nav des qu'on avait
     scrolle (nav.is-solid). On garde juste un fond opaque sur mobile, sans le flou. */
  .nav.is-solid{backdrop-filter:none;background:rgba(8,9,12,.97)}
  .nav__links{
    position:fixed;inset:0;z-index:99;
    background:var(--ink);
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;
  }
  .nav__links a{
    display:block;font-family:var(--ff-serif);font-size:1.6rem;color:var(--bone);
  }
  .nav.is-open .nav__links{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============ HERO (encre -> or, scroll-scrub) ==================== */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--ink)}
/* Placeholder "ink bloom" (actif tant que la video n'est pas la) */
.hero__bloom{
  position:absolute;left:50%;top:56%;width:120vmax;height:120vmax;
  transform:translate(-50%,-50%) scale(var(--bloom,.35));
  background:radial-gradient(circle at 50% 50%,
    rgba(224,200,136,calc(.55*var(--reveal,0))) 0%,
    rgba(200,162,75,calc(.35*var(--reveal,0))) 22%,
    rgba(20,16,10,.9) 55%, var(--ink) 72%);
  filter:blur(calc(30px + 40px*(1 - var(--reveal,0))));
  will-change:transform,filter;
}
.hero__ink{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(10,12,18,.9), transparent 60%),
    radial-gradient(50% 60% at 72% 68%, rgba(6,7,10,.95), transparent 55%);
  opacity:calc(1 - .6*var(--reveal,0));
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .7s var(--ease)}
.hero__video.is-active{opacity:1}
/* quand la vraie video est la, on efface les calques placeholder */
.hero__bg.has-video .hero__ink,.hero__bg.has-video .hero__bloom{opacity:0!important;transition:opacity .7s var(--ease)}
.hero__vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.75) 100%);
}
/* z-index:1 = au-dessus de la video (dans .hero__bg z-index:0) mais SOUS le texte (z-index:2) */
.hero__fade{position:absolute;inset:0;z-index:1;background:var(--ink);opacity:0;pointer-events:none}
.hero__content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-inline:clamp(20px,5vw,56px);
  /* Reserve la hauteur de la barre de nav en haut (l'eyebrow ne passe plus dessous)
     et la place de l'indice "Scroll" en bas. */
  padding-top:calc(84px + env(safe-area-inset-top));
  padding-bottom:78px;
}
.js .hero__eyebrow{opacity:0;transform:translateY(14px)}
.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(3.4rem,16vw,17rem);
  line-height:.86;letter-spacing:.005em;
  text-transform:uppercase;margin:.12em 0 .18em;
  color:var(--bone);
}
.hero__title .lit{
  color:transparent;-webkit-text-stroke:1.4px rgba(244,241,235,.5);
  transition:color .1s linear;
}
.hero__title.is-lit .lit{color:var(--gold);-webkit-text-stroke:0}
.hero__type{
  font-family:var(--ff-serif);font-size:clamp(1.25rem,3vw,2.1rem);
  color:var(--bone-dim);font-style:italic;
  /* Une seule ligne (desktop) : plus de max-width qui coupait la phrase en deux.
     Hauteur d'une ligne reservee pour que le typewriter ne recale pas le bloc. */
  line-height:1.35;min-height:1.35em;white-space:nowrap;
}
@media (max-width:760px){
  /* Sur petits ecrans la phrase repasse sur plusieurs lignes : on libere le nowrap
     et on reserve 2 lignes pour eviter le saut pendant l'animation. */
  .hero__type{white-space:normal;min-height:2.7em}
}
.hero__type .cd{color:var(--gold);font-style:normal}
.hero__cue{
  position:absolute;bottom:max(28px, env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;
}
.hero__cue span{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.js .hero__cta-row{opacity:0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:100px;font-weight:600;font-size:.9rem;letter-spacing:.01em;transition:background .3s var(--ease),color .3s var(--ease),transform .2s var(--ease),border-color .3s var(--ease)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-soft);transform:translateY(-2px)}
.btn--ghost{border:1px solid rgba(244,241,235,.35);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);transform:translateY(-2px)}

/* ============ MANIFESTE CINETIQUE ================================= */
.kinetic{position:relative;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.kinetic__stage{position:relative;text-align:center;width:100%}
.kinetic__word{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) scale(.8);
  font-family:var(--ff-display);text-transform:uppercase;
  font-size:clamp(3rem,15vw,13rem);line-height:.9;letter-spacing:.01em;
  opacity:0;
}
.kinetic__word:last-child{color:var(--gold)}
.kinetic__sub{
  position:absolute;left:50%;top:15%;transform:translateX(-50%);
  width:min(92%,60ch);text-align:center;
  font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--bone-dim);opacity:0;
}

/* ============ SECTIONS GENERIQUES ================================= */
.section{padding:clamp(90px,12vw,180px) 0;position:relative}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(40px,6vw,80px);flex-wrap:wrap}
.section__title{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(2.4rem,7vw,6rem);line-height:.92;letter-spacing:.01em}
.section__title em{font-family:var(--ff-serif);font-style:italic;text-transform:none;color:var(--gold);font-weight:400}
.section__lead{font-family:var(--ff-serif);font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--bone-dim);max-width:40ch}

.js .reveal{opacity:0;transform:translateY(34px)}

/* ============ REALISATIONS (work grid) =========================== */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.work__card{
  position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(140deg,var(--ink-2),#05060a);cursor:pointer;
}
.work__media{position:absolute;inset:0;transition:transform .9s var(--ease),filter .9s var(--ease);filter:grayscale(.3) brightness(.82)}
.work__media img,.work__media video{width:100%;height:100%;object-fit:cover}
/* placeholder si pas d'image */
.work__media.placeholder{background:
  radial-gradient(80% 120% at 30% 10%,rgba(200,162,75,.12),transparent 50%),
  linear-gradient(160deg,#12141c,#070810);}
.work__card:hover .work__media{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.work__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px;
  background:linear-gradient(transparent,rgba(4,5,8,.9));
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
}
.work__name{font-family:var(--ff-serif);font-size:1.5rem;line-height:1.1}
.work__meta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.work__pitch{font-size:.85rem;color:var(--bone-dim);margin-top:6px;max-width:34ch}
.work__tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(200,162,75,.4);padding:5px 10px;border-radius:100px;white-space:nowrap}
@media(max-width:720px){.work{grid-template-columns:1fr}.work__card{aspect-ratio:16/9}}
@media(max-width:480px){
  .work__card{aspect-ratio:4/5}
  .work__label{padding:18px 18px}
  .work__name{font-size:1.2rem}
  .work__pitch{font-size:.8rem}
}

/* ============ SERVICES (2 colonnes editorial) ==================== */
.services{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start}
.services__intro p{font-family:var(--ff-serif);font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--bone);margin-bottom:20px}
.services__intro .muted{font-family:var(--ff-sans);font-size:.98rem}
.svc-list{border-top:1px solid var(--line)}
.svc-item{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:baseline}
.svc-item__no{font-family:var(--ff-display);color:var(--gold);font-size:1rem;opacity:.8}
.svc-item__t{font-family:var(--ff-serif);font-size:1.5rem;margin-bottom:6px}
.svc-item__d{font-size:.92rem;color:var(--bone-dim);max-width:52ch}
@media(max-width:820px){.services{grid-template-columns:1fr}}

/* ============ FORFAITS ============================================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:16px}
.tier{border:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.tier.is-feat{border-color:rgba(200,162,75,.55);background:linear-gradient(180deg,rgba(200,162,75,.06),transparent);position:relative}
.tier.is-feat::before{content:"Le plus choisi";position:absolute;top:-11px;left:30px;background:var(--gold);color:var(--ink);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.tier__name{font-family:var(--ff-display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.03em}
.tier__price{font-family:var(--ff-serif);font-size:2.6rem;margin:14px 0 4px}
.tier__price span{font-size:1rem;color:var(--bone-dim);font-family:var(--ff-sans)}
.tier__desc{font-size:.9rem;color:var(--bone-dim);margin-bottom:22px}
.tier__feat{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;font-size:.9rem}
.tier__feat li{padding-left:24px;position:relative;color:var(--bone)}
.tier__feat li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border:1px solid var(--gold);border-radius:50%}
.tier__btn{margin-top:auto;text-align:center;border:1px solid var(--bone);padding:13px;border-radius:100px;font-weight:600;font-size:.85rem;transition:.3s var(--ease)}
.tier__btn:hover{background:var(--bone);color:var(--ink)}
.tier.is-feat .tier__btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tier.is-feat .tier__btn:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.tiers__note{margin-top:26px;font-size:.9rem;color:var(--bone-dim)}
.tiers__note b{color:var(--gold);font-weight:600}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* ============ ATELIER ============================================ */
.atelier__caption{margin-bottom:clamp(28px,4vw,44px)}
.atelier__caption h3{font-family:var(--ff-serif);font-size:clamp(1.6rem,4vw,3rem);max-width:20ch;font-style:italic}
.atelier__caption p{color:var(--bone-dim);max-width:60ch;margin-top:14px}
.atelier{position:relative;overflow:hidden;border:1px solid var(--line)}
.atelier__media{position:relative;aspect-ratio:21/9;background:
  radial-gradient(60% 100% at 78% 60%,rgba(200,162,75,.14),transparent 55%),
  linear-gradient(120deg,#0b0d13,#050609);}
.atelier__media img,.atelier__media video{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
@media(max-width:720px){.atelier__media{aspect-ratio:4/5}}

/* ============ CONTACT =========================== */
.contact{padding:clamp(90px,12vw,170px) 0 60px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink),#050609)}
.contact__title{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(2.8rem,10vw,9rem);line-height:.9;letter-spacing:.01em;margin-bottom:12px}
.contact__title em{font-family:var(--ff-serif);font-style:italic;text-transform:none;color:var(--gold);font-weight:400}
.contact__lead{font-family:var(--ff-serif);font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--bone-dim);max-width:44ch;margin-bottom:50px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.form label.full{grid-column:1/-1}
.form input,.form textarea{
  background:rgba(244,241,235,.045);border:1px solid rgba(244,241,235,.22);border-radius:12px;
  color:var(--bone);font-family:var(--ff-sans);font-size:1rem;padding:14px 16px;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(184,180,170,.55)}
.form input:hover,.form textarea:hover{border-color:rgba(244,241,235,.4)}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(200,162,75,.06);
  box-shadow:0 0 0 3px rgba(200,162,75,.18);
}
.form textarea{resize:vertical;min-height:80px}
.form__submit{grid-column:1/-1;justify-self:start;margin-top:14px;background:var(--gold);color:var(--ink);border:none;font-family:var(--ff-sans);font-weight:700;font-size:.9rem;letter-spacing:.04em;padding:16px 40px;border-radius:100px;cursor:pointer;transition:.3s var(--ease)}
.form__submit:hover{background:var(--gold-soft);transform:translateY(-2px)}
.form__note{grid-column:1/-1;font-size:.82rem;color:var(--bone-dim);margin-top:6px}
[hidden]{display:none!important} /* l'attribut hidden doit gagner sur les display auteurs (labels flex, etc.) */

/* Onglets contact (maquette / question) */
.ctabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.ctabs__tab{font-family:var(--ff-sans);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);background:none;border:1px solid var(--line);border-radius:100px;padding:13px 26px;cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.ctabs__tab:hover{color:var(--bone);border-color:var(--bone-dim)}
.ctabs__tab.is-on{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* Formulaire maquette en 3 etapes */
.mform__progress{grid-column:1/-1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.mform__bar{display:block;height:100%;width:33.33%;background:var(--gold);transition:width .45s var(--ease)}
.mform__stepline{grid-column:1/-1;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.mstep{grid-column:1/-1;display:none;grid-template-columns:1fr 1fr;gap:18px}
.mstep.is-on{display:grid;animation:stepIn .45s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mstep.is-on{animation:none}}
.mstep__q{grid-column:1/-1;font-family:var(--ff-serif);font-size:clamp(1.15rem,2vw,1.45rem)}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--ff-sans);font-size:.85rem;font-weight:600;color:var(--bone-dim);background:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:12px 20px;cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.chip:hover{color:var(--bone);border-color:var(--bone-dim);transform:translateY(-1px)}
.chip.is-sel{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.mform__nav{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin-top:14px}
.mform__nav .form__submit{grid-column:auto;margin-top:0}
.mform__back{background:none;border:none;color:var(--bone-dim);font-family:var(--ff-sans);font-size:.85rem;letter-spacing:.02em;cursor:pointer;padding:10px 0;transition:color .25s var(--ease)}
.mform__back:hover{color:var(--gold)}
.mform.is-done .mstep,.mform.is-done .mform__nav,.mform.is-done .mform__progress,.mform.is-done .mform__stepline,.mform.is-done .form__trust{display:none}
.mform__done{grid-column:1/-1;border:1px solid rgba(200,162,75,.4);border-radius:16px;padding:28px 30px}
.mform__done h3{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--gold);font-size:1.4rem;margin-bottom:8px}
.mform__done p{color:var(--bone-dim);font-size:.95rem}
.opt{opacity:.55;text-transform:none;letter-spacing:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.contact__direct{margin-top:28px;font-size:.9rem;color:var(--bone-dim)}
.contact__direct a{color:var(--gold)}
.contact__direct a:hover{color:var(--gold-soft)}
@media(max-width:640px){.form,.mstep{grid-template-columns:1fr}}

/* ============ HERO value-prop + stats ============ */
.hero__vp{margin-top:20px;font-size:.98rem;color:var(--bone-dim);max-width:46ch}
.hero__vp b{color:var(--bone);font-weight:600}
.hero__stats{display:flex;gap:clamp(22px,4vw,42px);margin-top:26px}
.js .hero__vp,.js .hero__stats{opacity:0}
.hstat__n{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2rem);color:var(--gold);line-height:1}
.hstat__l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-top:6px}
@media(max-width:600px){.hero__stats{flex-wrap:wrap;row-gap:14px}}

/* ============ PROBLEME (pain) ============ */
.pain__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.pain__card{border:1px solid var(--line);padding:clamp(24px,3vw,34px);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.pain__ico{font-size:1.5rem;margin-bottom:14px}
.pain__card h3{font-family:var(--ff-serif);font-size:1.35rem;line-height:1.2;margin-bottom:10px}
.pain__card p{font-size:.92rem;color:var(--bone-dim)}
.pain__pill{display:inline-block;margin-top:16px;font-size:.72rem;color:var(--gold);border:1px solid rgba(200,162,75,.35);border-radius:100px;padding:6px 12px}
.pain__quote{margin-top:clamp(44px,6vw,72px);border-left:2px solid var(--gold);padding-left:clamp(20px,4vw,40px);max-width:66ch}
.pain__quote p{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--bone);line-height:1.4}
.pain__quote .attr{font-family:var(--ff-sans);font-style:normal;font-size:.92rem;color:var(--bone-dim);margin-top:18px}
@media(max-width:720px){.pain__grid{grid-template-columns:1fr}}

/* ============ AVANT / APRES ============ */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.ba__col{border:1px solid var(--line);padding:clamp(24px,3vw,36px)}
.ba__col--after{border-color:rgba(200,162,75,.4);background:linear-gradient(180deg,rgba(200,162,75,.05),transparent)}
.ba__badge{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:20px}
.ba__badge--bad{color:#cc8b8b;border:1px solid rgba(204,139,139,.4)}
.ba__badge--good{color:var(--gold);border:1px solid rgba(200,162,75,.5)}
.ba__row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.ba__row:first-of-type{border-top:none}
.ba__row b{display:block;font-size:1rem;margin-bottom:3px;color:var(--bone)}
.ba__row span{font-size:.86rem;color:var(--bone-dim)}
.ba__ico{font-size:1.15rem;flex:0 0 auto}
@media(max-width:720px){.ba{grid-template-columns:1fr}}

/* ============ METHODE (journey) ============ */
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,32px)}
.jstep{border-top:2px solid var(--gold);padding-top:22px}
.jstep__tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.jstep__n{font-family:var(--ff-display);font-size:2.4rem;color:var(--bone);opacity:.22;line-height:1}
.jstep h3{font-family:var(--ff-serif);font-size:1.45rem;margin:6px 0 10px;line-height:1.2}
.jstep p{font-size:.92rem;color:var(--bone-dim)}
.jstep__res{display:inline-block;margin-top:16px;font-size:.78rem;color:var(--gold)}
@media(max-width:720px){.journey{grid-template-columns:1fr}}

/* ============ work gain ============ */
.work__gain{display:block;font-size:.74rem;letter-spacing:.01em;color:var(--gold);margin-top:8px}

/* ============ AVIS (proof) ============ */
.testi__disc{font-size:.88rem;color:var(--bone-dim);max-width:64ch;margin:-24px 0 0}
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(36px,4vw,54px)}
.testi{border:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.testi__tag{align-self:flex-start;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);border:1px solid var(--line);border-radius:100px;padding:4px 10px;margin-bottom:14px}
.testi__stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.testi__q{font-size:.95rem;color:var(--bone-dim);line-height:1.55;margin-bottom:16px}
.testi__q b{color:var(--bone)}
.testi__res{font-size:.8rem;color:var(--gold);margin-bottom:22px}
.testi__who{margin-top:auto;display:flex;align-items:center;gap:12px}
.testi__av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:var(--ink);background:var(--gold)}
.testi__name{font-weight:600;font-size:.92rem;color:var(--bone)}
.testi__role{font-size:.78rem;color:var(--bone-dim)}
.roi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line);padding-top:clamp(34px,4vw,54px)}
.roi__n{font-family:var(--ff-display);font-size:clamp(2.4rem,5vw,3.6rem);color:var(--gold);line-height:1}
.roi__n span{font-size:1rem;color:var(--bone-dim);font-family:var(--ff-sans);margin-left:5px}
.roi__d{font-size:.9rem;color:var(--bone-dim);margin-top:8px;max-width:28ch}
@media(max-width:820px){.testi__grid{grid-template-columns:1fr}.roi{grid-template-columns:1fr;gap:26px}}

/* ============ tier extras ============ */
.tier__for{font-size:.82rem;color:var(--gold);margin:2px 0 16px}
.tier__feat li b{color:var(--bone)}
.tiers__pay{margin-top:22px;font-size:.92rem;color:var(--bone-dim);max-width:70ch}
.tiers__pay b{color:var(--bone)}

/* ============ FAQ + urgence ============ */
.faq{max-width:860px;margin-top:8px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:none;border:none;color:var(--bone);font-family:var(--ff-serif);font-size:clamp(1.1rem,2vw,1.4rem);padding:22px 42px 22px 0;cursor:pointer;position:relative;display:flex;gap:12px;align-items:baseline}
.faq__q .qi{color:var(--gold);flex:0 0 auto}
.faq__q .arw{position:absolute;right:2px;top:22px;transition:transform .3s var(--ease);color:var(--gold)}
.faq__item.open .faq__q .arw{transform:rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 0 24px;color:var(--bone-dim);font-size:.95rem;max-width:74ch}
.faq__a b{color:var(--bone)}
.urgency{margin-top:clamp(40px,5vw,64px);text-align:center;border:1px solid rgba(200,162,75,.4);background:linear-gradient(180deg,rgba(200,162,75,.06),transparent);border-radius:16px;padding:clamp(28px,4vw,44px) 24px}
.urgency__cta{margin-bottom:18px}
.urgency__txt{font-size:.98rem;color:var(--gold-soft)}
.urgency__txt b{color:var(--gold)}

/* ============ contact trust badges ============ */
.form__trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px}
.form__trust span{font-size:.82rem;color:var(--bone-dim);display:flex;align-items:center;gap:8px}
.form__trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto}

/* ============ MOTION / HOVER (premium) ============ */
.section__title,.contact__title{will-change:transform}
.pain__card,.jstep,.testi,.tier,.ba__col{transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
/* Pas de translateY ici : la carte "montait" et son ombre debordait sur la rangee/bloc du dessus.
   Ombre resserree (peu d'offset/blur, spread negatif fort) pour rester contenue sous la carte. */
.pain__card:hover,.jstep:hover,.testi:hover,.tier:hover,.ba__col:hover{border-color:rgba(200,162,75,.4);box-shadow:0 10px 22px -14px rgba(0,0,0,.55)}
.tier.is-feat:hover{border-color:rgba(200,162,75,.7)}
.svc-item{transition:padding-left .4s var(--ease)}
.svc-item:hover{padding-left:10px}
.btn--gold,.form__submit{will-change:transform}
/* petit trait or anime sous les eyebrows de section */
.section__head .section__title::after{content:"";display:block;width:0;height:2px;background:var(--gold);margin-top:18px;transition:width 1.1s var(--ease) .2s}
.section__title.in-view::after{width:72px}

/* ============ REDUCED MOTION (fallback statique) ================= */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto;min-height:90vh;min-height:90svh}
  .hero__eyebrow,.hero__cta-row,.hero__vp,.hero__stats,.reveal{opacity:1!important;transform:none!important}
  .hero__bloom{--reveal:.7;--bloom:.7}
  .kinetic{height:auto;flex-direction:column;gap:20px;padding:100px 0;text-align:center}
  .kinetic__word{position:static;transform:none;opacity:1;font-size:clamp(2.4rem,10vw,7rem)}
  .kinetic__sub{position:static;transform:none;opacity:1;width:auto;margin:0}
  .hero__cue{display:none}
  *{animation:none!important}
}

/* ============ HERO · FENETRES COURTES EN HAUTEUR =================
   Empeche le hero de deborder sous la nav quand la fenetre est basse
   (portables, fenetre reduite). On aligne le contenu en haut plutot
   que centre, et on allege progressivement pour que tout reste visible. */
@media (max-height:820px){
  .hero__content{justify-content:flex-start}
  .hero__cue{display:none}
}