/* ============================================================
   HYL'S STUDIO · grand-large.css
   Page dediee a l'offre premium "Grand Large" (parcours client).
   Charge APRES base.css (tokens + @font-face + reset communs).
   Toutes les classes sont prefixees .gl- : zero collision avec home.css.
   ============================================================ */

.gl-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

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

.gl-body h1,.gl-body h2{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.01em;
}

/* ---------- Hero ---------- */
.gl-hero{
  /* La nav grand-large est sticky (dans le flux) : on retranche sa hauteur pour
     que le hero remplisse pile le reste de l'ecran, comme le hero plein d'accueil. */
  min-height:100vh;min-height:calc(100svh - 62px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  /* Contenu centre, avec une respiration en bas pour l'indice de scroll. */
  padding-top:32px;
  padding-bottom:78px;
  background:
    radial-gradient(1200px 600px at 70% -10%,rgba(200,162,75,.10),transparent 60%),
    radial-gradient(900px 500px at 10% 110%,rgba(120,140,180,.07),transparent 60%),
    var(--ink);
}
/* Le contenu du hero s'aligne a gauche comme sur l'accueil (plus de colonne
   centree 1080px) et partage exactement le meme padding lateral. */
.gl-hero .gl-wrap{max-width:none;margin:0;padding-inline:clamp(20px,5vw,56px)}
/* "GRAND LARGE" sur UNE seule ligne (comme le titre d'accueil) : nowrap +
   taille calibree pour ne pas deborder du padding lateral (5vw). */
.gl-hero h1{font-size:clamp(2.7rem,13vw,13rem);margin:.12em 0 .18em;white-space:nowrap}
/* Fallback sans-JS : "LARGE" est directement plein or. */
.gl-hero h1 .gl-line2{color:var(--gold)}
/* Avec JS : "LARGE" part en contour seul et se remplit d'or AU SCROLL.
   La variable --lit (0 -> 1) est pilotee par le defilement dans le JS
   (meme logique que "STUDIO" sur l'accueil). */
.js .gl-hero h1 .gl-line2{
  --lit:0;
  color:color-mix(in srgb, var(--gold) calc(var(--lit) * 100%), transparent);
  -webkit-text-stroke:1.4px rgba(244,241,235,calc(.5 * (1 - var(--lit))));
}
.gl-hero .gl-kicker{margin-bottom:0}
.gl-hero .gl-promise{
  margin-top:20px;max-width:46ch;
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem);color:var(--bone-dim);
}
.gl-hero .gl-promise strong{color:var(--bone);font-weight:600}
.gl-hero .gl-hero-what{margin-top:22px;max-width:46ch;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;color:var(--bone-dim)}
.gl-hero .gl-hero-what b{color:var(--gold);font-weight:600}
.gl-back{
  position:absolute;top:28px;left:clamp(20px,5vw,48px);
  font-family:var(--ff-display);font-size:1.05rem;letter-spacing:.04em;color:var(--bone);
}
.gl-back b{color:var(--gold);font-weight:400}
.gl-scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim);
}
.gl-scroll-cue::after{
  content:"";display:block;width:1px;height:44px;
  background:linear-gradient(var(--gold),transparent);
  margin:12px auto 0;animation:gl-cue 2.2s ease-in-out infinite;
}
@keyframes gl-cue{0%,100%{opacity:.25}50%{opacity:1}}

/* Entree en cascade du hero (mime le staggered fade-in de l'accueil, sans video).
   .js masque au depart ; .gl-hero-lit revele les items l'un apres l'autre. */
.js .gl-hero-in{opacity:0;transform:translateY(24px)}
.js .gl-hero.gl-hero-lit .gl-hero-in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.gl-hero.gl-hero-lit .gl-hero-in:nth-child(1){transition-delay:.15s}
.gl-hero.gl-hero-lit .gl-hero-in:nth-child(2){transition-delay:.3s}
.gl-hero.gl-hero-lit .gl-hero-in:nth-child(3){transition-delay:.5s}
.gl-hero.gl-hero-lit .gl-hero-in:nth-child(4){transition-delay:.65s}

/* ---------- Sections ---------- */
/* Meme rythme vertical que les sections de l'accueil (.section). */
.gl-section{padding:clamp(90px,12vw,180px) 0;position:relative}
/* En-tete aligne sur la signature de l'accueil (.section__head) : eyebrow kicker,
   gros titre display avec un mot en serif-or, trait or anime, puis chapô en serif. */
.gl-head{max-width:720px;margin-bottom:clamp(40px,6vw,80px)}
.gl-head .gl-eyebrow{display:block;margin-bottom:18px}
.gl-head h2{
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1;
  position:relative;padding-bottom:22px;
}
.gl-head h2 em{
  font-family:var(--ff-serif);font-style:italic;text-transform:none;
  color:var(--gold);font-weight:400;
}
.gl-head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--gold);transition:width 1.1s var(--ease) .2s;
}
.gl-head.gl-visible h2::after{width:72px}
.gl-head p:not(.gl-eyebrow){
  margin-top:26px;color:var(--bone-dim);
  font-family:var(--ff-serif);font-size:clamp(1.15rem,2.4vw,1.7rem);
  line-height:1.4;max-width:40ch;
}

/* Constat */
.gl-constat{border-top:1px solid var(--line)}
.gl-constat .gl-quote{
  font-family:var(--ff-serif);font-style:italic;
  font-size:clamp(1.5rem,1.2rem + 2.4vw,2.8rem);line-height:1.35;max-width:24em;
}
.gl-constat .gl-quote em{color:var(--gold);font-style:italic}
.gl-constat .gl-answer{margin-top:28px;max-width:36em;color:var(--bone-dim)}
.gl-constat .gl-answer strong{color:var(--bone)}

/* ---------- Parcours : 4 etapes ---------- */
.gl-steps{display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,2.5rem)}
.gl-step{
  display:grid;grid-template-columns:84px 1fr;gap:clamp(16px,4vw,40px);
  border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,44px);
  background:linear-gradient(160deg,rgba(244,241,235,.028),rgba(244,241,235,0) 55%);
}
.gl-step-num{
  font-family:var(--ff-display);font-size:clamp(2.2rem,5vw,3.4rem);
  color:transparent;-webkit-text-stroke:1.5px var(--gold);line-height:1;
}
.gl-step h3{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,1.9rem);letter-spacing:.02em;
}
.gl-step .gl-phase{color:var(--gold);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
/* Pastille metier : montre que la meme mecanique tourne sur chaque secteur cible. */
.gl-step .gl-metier{display:inline-block;margin:8px 0 2px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);border:1px solid var(--line);border-radius:100px;padding:3px 12px}
.gl-step .gl-friction{
  font-family:var(--ff-serif);font-style:italic;
  font-size:clamp(1.1rem,1rem + .8vw,1.45rem);color:var(--bone);margin:14px 0 6px;
}
.gl-step .gl-flabel,.gl-step .gl-rlabel{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone-dim);font-weight:600;display:block;margin-top:18px;
}
.gl-step ul{list-style:none;margin-top:10px}
.gl-step li{padding-left:22px;position:relative;margin:7px 0;color:var(--bone-dim)}
.gl-step li::before{content:"\2192";position:absolute;left:0;color:var(--gold)}
.gl-step li strong{color:var(--bone);font-weight:600}

/* ---------- "Comment on s'y prend" : 4 benefices (IA 100% en coulisses) ---------- */
.gl-how{display:flex;flex-direction:column}
.gl-how-item{display:grid;grid-template-columns:84px 1fr;gap:clamp(16px,4vw,40px);border-top:1px solid var(--line);padding:clamp(22px,3.2vw,34px) 0}
.gl-how-num{font-family:var(--ff-display);font-size:clamp(2rem,4.5vw,3rem);color:transparent;-webkit-text-stroke:1.5px var(--gold);line-height:1}
.gl-how-item h3{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:.02em}
.gl-how-item p{margin-top:10px;color:var(--bone-dim);max-width:54ch}
.gl-how-item p b{color:var(--bone);font-weight:600}
@media (max-width:720px){.gl-how-item{grid-template-columns:1fr;gap:8px}}

/* ---------- Livrables : setup + abonnement ---------- */
.gl-offers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,28px);align-items:stretch}
.gl-offer{border:1px solid var(--line);border-radius:18px;padding:clamp(26px,5vw,44px);display:flex;flex-direction:column}
.gl-offer.gl-featured{border-color:rgba(200,162,75,.55);background:rgba(200,162,75,.10)}
.gl-offer .gl-tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700}
.gl-offer h3{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.1rem);margin:12px 0 4px}
.gl-offer .gl-price{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin:10px 0 2px}
.gl-offer .gl-price small{font-size:.5em;font-weight:400;color:var(--bone-dim)}
.gl-offer .gl-price-note{font-size:13px;color:var(--bone-dim);margin-bottom:18px}
.gl-offer .gl-offer-lead{color:var(--bone);font-size:.98rem;line-height:1.55;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gl-offer ul{list-style:none;margin-top:6px}
.gl-offer li{padding-left:24px;position:relative;margin:10px 0;color:var(--bone-dim)}
.gl-offer li::before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:700}
.gl-offer li strong{color:var(--bone);font-weight:600}

/* ---------- Pour qui ---------- */
.gl-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
/* Bulles metier : desormais des boutons cliquables qui revelent la raison du cycle long. */
.gl-chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;
  font-family:var(--ff-sans);font-size:14px;color:var(--bone-dim);
  background:none;cursor:pointer;transition:border-color .25s,color .25s,background .25s;
}
.gl-chip::after{content:"+";color:var(--gold);font-size:15px;line-height:1;transition:transform .25s}
.gl-chip:hover{border-color:rgba(200,162,75,.5);color:var(--bone)}
.gl-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gl-chip[aria-expanded="true"]{border-color:var(--gold);color:var(--bone)}
.gl-chip[aria-expanded="true"]::after{content:"\2212";transform:rotate(180deg)}
/* Bulle "ouverte" : signale que la liste n'est pas fermee (pointille + teinte or discrete). */
.gl-chip--more{border-style:dashed;border-color:rgba(200,162,75,.45);color:var(--gold)}
.gl-chip--more:hover{border-color:var(--gold)}
/* Panneau "pourquoi ce cycle est long", partage : se remplit au clic sur une bulle. */
.gl-why{
  margin-top:22px;max-width:44em;
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  background:rgba(244,241,235,.03);padding:20px 26px;
  animation:gl-why-in .35s var(--ease);
}
@keyframes gl-why-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.gl-why-metier{color:var(--gold);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.gl-why-text{color:var(--bone-dim);font-family:var(--ff-serif);font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.45}
/* Bloc calcul : l'equation de l'investissement 1re annee, chiffres en display, puis conclusion. */
.gl-calc{
  margin-top:44px;max-width:56em;
  border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,40px);
  background:linear-gradient(160deg,rgba(200,162,75,.07),rgba(244,241,235,0) 62%);
}
.gl-calc-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:24px}
.gl-calc-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:clamp(14px,3vw,30px)}
.gl-calc-fig{display:flex;flex-direction:column;gap:6px}
.gl-calc-fig b{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.8rem,5vw,2.9rem);line-height:1;color:var(--bone)}
.gl-calc-fig span{font-size:12px;letter-spacing:.05em;color:var(--bone-dim)}
.gl-calc-op{font-family:var(--ff-display);font-size:clamp(1.4rem,3.2vw,2rem);color:var(--gold);line-height:1;padding-bottom:.3em}
.gl-calc-total b{color:var(--gold)}
.gl-calc-concl{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--ff-serif);font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.55;
  color:var(--bone-dim);max-width:48em;
}
.gl-calc-concl strong{color:var(--bone);font-weight:600}
/* Phrase "cycle court" detachee du bloc calcul : note discrete en dessous. */
.gl-calc-alt{
  margin-top:18px;max-width:48em;color:var(--bone-dim);
  font-family:var(--ff-serif);font-style:italic;
  font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.5;
}

/* ---------- CTA ---------- */
.gl-cta{text-align:center;border-top:1px solid var(--line)}
.gl-cta h2{font-size:clamp(2rem,6vw,3.8rem);max-width:14em;margin:14px auto 0}
.gl-cta h2 em{font-family:var(--ff-serif);font-style:italic;text-transform:none;color:var(--gold)}
.gl-cta p{max-width:36em;margin:22px auto 0;color:var(--bone-dim)}
.gl-btn{
  display:inline-block;margin-top:36px;background:var(--gold);color:var(--ink);
  font-weight:700;text-decoration:none;padding:18px 42px;border-radius:100px;font-size:17px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.gl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(200,162,75,.3)}
.gl-btn:focus-visible{outline:3px solid var(--bone);outline-offset:3px}
.gl-cta .gl-sub{font-size:14px;margin-top:16px}

.gl-foot{padding:40px 0 60px;text-align:center;color:var(--bone-dim);font-size:13px;border-top:1px solid var(--line)}

/* ---------- Nav (intégration au site) ---------- */
.gl-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(20px,5vw,48px);background:rgba(11,13,18,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gl-nav__logo{font-family:var(--ff-display);font-size:1.1rem;letter-spacing:.04em;color:var(--bone)}
.gl-nav__logo b{color:var(--gold);font-weight:400}
.gl-nav__right{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
.gl-nav__right a{font-size:.85rem;color:var(--bone-dim);transition:color .25s}
.gl-nav__right a:hover{color:var(--bone)}
.gl-nav__cta{border:1px solid var(--gold);color:var(--gold)!important;padding:9px 16px;border-radius:100px;font-weight:600}
.gl-nav__cta:hover{background:var(--gold);color:var(--ink)!important}
@media (max-width:560px){.gl-nav__right a:not(.gl-nav__cta){display:none}}
.gl-section{scroll-margin-top:74px}

/* ---------- Formulaire de contact / diagnostic ---------- */
.gl-form{max-width:480px;margin:32px auto 0;display:flex;flex-direction:column;gap:14px;text-align:left}
.gl-form label{display:flex;flex-direction:column;gap:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.gl-form label .gl-opt{text-transform:none;letter-spacing:normal;opacity:.8}
.gl-form input,.gl-form textarea{width:100%;background:rgba(244,241,235,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--bone);font-family:var(--ff-sans);font-size:15px;text-transform:none;letter-spacing:normal}
.gl-form input:focus,.gl-form textarea:focus{outline:none;border-color:var(--gold)}
.gl-form textarea{min-height:92px;resize:vertical}
.gl-form .gl-btn{margin-top:6px;border:none;cursor:pointer;width:100%}
.gl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.gl-form-note{margin-top:6px;text-align:center;font-size:13px;color:var(--bone-dim)}
.gl-form-rgpd{font-size:12px;line-height:1.5;color:var(--bone-dim);opacity:.7;margin-top:4px}
.gl-form-rgpd a{color:var(--gold)}

/* ---------- Reveals au scroll ---------- */
.gl-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gl-reveal.gl-visible{opacity:1;transform:none}

@media (max-width:720px){
  .gl-step{grid-template-columns:1fr}
  .gl-step-num{font-size:2rem}
  .gl-offers{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gl-reveal{opacity:1;transform:none;transition:none}
  .js .gl-hero-in{opacity:1;transform:none;transition:none}
  .gl-head h2::after{transition:none}
  .gl-scroll-cue::after{animation:none}
  .gl-btn{transition:none}
  .gl-why{animation:none}
}