/* ============================================================
   PressLab. studio — Or Éditorial
   Ink #0A0A0A · Cream #F4F0E8 · Gold #E8B84B (accent only)
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --ink-soft:#141414;
  --cream:#F4F0E8;
  --cream-soft:#ECE6DA;
  --gold:#E8B84B;
  --gold-deep:#C99A2E;

  --on-ink:#EFEAE0;
  --on-ink-dim:#9A9389;
  --on-cream:#1A1814;
  --on-cream-dim:#6B6357;

  --line-ink:rgba(232,184,75,.22);
  --line-cream:rgba(26,24,20,.14);

  --serif:'Playfair Display', Georgia, serif;
  --display:'Syne', sans-serif;
  --sans:'Space Grotesk', system-ui, sans-serif;

  --container:1200px;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--on-ink);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold);font-weight:inherit}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.container--narrow{max-width:780px}
section{position:relative}
.section--ink{background:var(--ink);color:var(--on-ink)}
.section--cream{background:var(--cream);color:var(--on-cream)}

/* hairline divider between consecutive sections */
.section--ink + .section--cream,
.section--cream + .section--ink{border-top:1px solid rgba(255,255,255,.04)}

/* ---------- Typo helpers ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--on-ink-dim);
  display:inline-flex;align-items:center;gap:.7em;
  margin-bottom:1.4rem;
}
.section--cream .eyebrow{color:var(--on-cream-dim)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.eyebrow--gold{color:var(--gold)}
.eyebrow--gold::before{background:var(--gold)}

.section-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.01em;
  max-width:18ch;
}
.section-head{margin-bottom:clamp(2.5rem,6vw,4rem)}

/* ---------- Buttons ---------- */
.btn{
  --h:54px;
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--h);padding:0 1.7rem;
  font-family:var(--display);font-weight:600;font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--sm{--h:42px;padding:0 1.1rem;font-size:.76rem}
.btn--gold{background:var(--gold);color:#1A1206;border-color:var(--gold)}
.btn--gold:hover{background:#F0C766;border-color:#F0C766}
.btn--ghost{background:transparent;color:var(--on-ink);border-color:rgba(239,234,224,.28)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--outline{background:transparent;border-color:currentColor}
.section--ink .btn--outline{color:var(--on-ink)}
.section--ink .btn--outline:hover{background:var(--gold);color:#1A1206;border-color:var(--gold)}
.section--cream .btn--outline{color:var(--on-cream)}
.section--cream .btn--outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.link-gold{color:var(--gold);border-bottom:1px solid var(--line-ink);transition:border-color .3s}
.link-gold:hover{border-color:var(--gold)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,.7);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .4s var(--ease),border-color .4s;
}
.nav.is-scrolled{background:rgba(10,10,10,.92)}
.nav__inner{
  max-width:var(--container);margin-inline:auto;padding:.9rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.wordmark{
  font-family:var(--display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.01em;color:var(--on-ink);display:inline-flex;align-items:baseline;gap:.18em;
}
.wordmark .dot{color:var(--gold)}
.wordmark__sub{font-weight:500;font-size:.78em;letter-spacing:.02em;color:var(--on-ink-dim)}
.wordmark--lg{font-size:1.7rem}

.nav__links{display:flex;gap:2rem}
.nav__links a{
  font-family:var(--display);font-weight:500;font-size:.84rem;
  color:var(--on-ink-dim);letter-spacing:.02em;position:relative;padding:.2rem 0;
  transition:color .3s;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--on-ink)}
.nav__links a:hover::after{width:100%}

.nav__right{display:flex;align-items:center;gap:1.1rem}
.lang-toggle{
  background:none;border:1px solid rgba(239,234,224,.22);color:var(--on-ink-dim);
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.06em;
  padding:.45rem .7rem;border-radius:2px;cursor:pointer;display:inline-flex;gap:.35em;align-items:center;
  transition:border-color .3s;
}
.lang-toggle:hover{border-color:var(--gold)}
.lang-toggle .lang-sep{color:rgba(239,234,224,.3)}
.lang-toggle [data-lang]{transition:color .3s}
.lang-toggle [data-lang].is-active{color:var(--gold)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(9rem,16vh,12rem);padding-bottom:clamp(4rem,9vh,7rem);overflow:hidden}
.hero::before{ /* subtle gold glow */
  content:"";position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(232,184,75,.10),transparent 62%);pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:1.05fr minmax(300px,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;
  margin-bottom:1.6rem;
}
.hero__sub{
  font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--on-ink-dim);
  max-width:46ch;margin-bottom:2.4rem;font-weight:300;
}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- Placeholders ---------- */
.placeholder{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  border:1px dashed rgba(232,184,75,.4);
  background:
    linear-gradient(135deg,rgba(232,184,75,.05),rgba(255,255,255,.015)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px);
  border-radius:4px;text-align:center;padding:1.5rem;color:var(--on-ink-dim);
}
.section--cream .placeholder{border-color:rgba(26,24,20,.28);color:var(--on-cream-dim);
  background:linear-gradient(135deg,rgba(26,24,20,.04),transparent),repeating-linear-gradient(45deg,rgba(26,24,20,.03) 0 12px,transparent 12px 24px);}
.placeholder__tag{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.22em;
  color:var(--gold);border:1px solid var(--line-ink);padding:.3rem .6rem;border-radius:2px;
}
.section--cream .placeholder__tag{border-color:rgba(26,24,20,.2)}
.placeholder__hint{font-size:.82rem;letter-spacing:.02em}
.placeholder--hero{aspect-ratio:4/5;width:100%}

/* ============================================================
   PROOF
   ============================================================ */
.proof{padding-block:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line-ink)}
.proof__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:4px;overflow:hidden;
}
.stat{background:var(--ink);padding:clamp(1.5rem,3vw,2.4rem) 1.4rem;text-align:center}
.stat__num{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1;color:var(--gold);margin-bottom:.5rem;
}
.stat__label{font-family:var(--display);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim)}

.proof__refs{margin-top:2.6rem;display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;justify-content:center}
.proof__refs-label{font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-dim)}
.proof__logos{list-style:none;display:flex;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;justify-content:center}
.proof__logos li{
  font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.6vw,1.2rem);
  letter-spacing:.04em;color:var(--on-ink);opacity:.55;transition:opacity .3s;
}
.proof__logos li:hover{opacity:1;color:var(--gold)}

/* ============================================================
   GENERIC CARDS GRID
   ============================================================ */
.why,.work,.audience,.process,.faq{
  padding-block:clamp(4rem,9vw,7rem);
}
.section--ink.offers,.section--ink.ultra,.section--ink.partner,.hero{padding-block:clamp(4rem,9vw,7rem)}
.hero{padding-top:clamp(9rem,16vh,12rem)}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.card{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-inset);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.card:hover{transform:translateY(-4px);border-color:var(--glass-border-gold);box-shadow:0 22px 50px -30px rgba(0,0,0,.7),var(--glass-inset)}
.card__num{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--gold);display:block;margin-bottom:1rem}
.card__title{font-family:var(--display);font-weight:700;font-size:1.18rem;margin-bottom:.7rem}
.card p{color:var(--on-ink-dim);font-size:.96rem}

/* ============================================================
   WORK
   ============================================================ */
.work__feature{aspect-ratio:16/7;width:100%;margin-bottom:1.4rem}
.work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.work__thumb{aspect-ratio:1/1;transition:transform .4s var(--ease),border-color .3s}
.work__thumb:hover{transform:translateY(-4px);border-color:var(--gold)}

/* ---------- Cas client : STL avant / après ---------- */
.case__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem clamp(2rem,5vw,4rem);flex-wrap:wrap;margin-bottom:1.8rem}
.case__label{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.case__name{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;margin:.5rem 0 .35rem}
.case__role{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--on-ink-dim)}
.case__desc{max-width:46ch;color:var(--on-ink-dim);font-size:.98rem}

.case__bar{display:inline-flex;gap:.3rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:999px;padding:.32rem;margin-bottom:1.5rem}
.case__tab{
  border:none;background:transparent;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.02em;
  color:var(--on-ink-dim);padding:.6rem 1.15rem;border-radius:999px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.case__tab:hover{color:var(--on-ink)}
.case__tab.is-active{background:var(--gold);color:#1A1206}

.kit-frame{
  background:#161210;border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;
  box-shadow:0 45px 90px -55px rgba(0,0,0,.9),var(--glass-inset);
}
.kit-frame__bar{
  height:40px;display:flex;align-items:center;gap:.55rem;padding:0 1.1rem;
  background:#0d0a09;border-bottom:1px solid rgba(255,255,255,.06);
}
.kit-frame__bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.kit-frame__bar span:first-child{background:var(--gold)}
.kit-scroll{max-height:74vh;overflow-y:auto;padding:clamp(.8rem,2vw,1.4rem);-webkit-overflow-scrolling:touch}
.kit-stack{display:flex;flex-direction:column;gap:clamp(.8rem,2vw,1.4rem)}
.kit-stack[hidden]{display:none}
.kit-stack img{width:100%;display:block;border-radius:7px;box-shadow:0 14px 34px -22px rgba(0,0,0,.9)}
.kit-scroll::-webkit-scrollbar{width:10px}
.kit-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
.kit-scroll::-webkit-scrollbar-thumb{background:rgba(232,184,75,.45);border-radius:10px}
.kit-scroll::-webkit-scrollbar-thumb:hover{background:rgba(232,184,75,.7)}
.case__hint{text-align:center;margin-top:1.1rem;font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--on-ink-dim)}

/* ============================================================
   OFFERS
   ============================================================ */
.offers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem);align-items:stretch}
.offer{
  display:flex;flex-direction:column;
  background:var(--ink-soft);border:1px solid rgba(255,255,255,.08);border-radius:5px;
  padding:clamp(1.8rem,3vw,2.4rem);position:relative;transition:transform .4s var(--ease),border-color .4s}
.offer:hover{transform:translateY(-5px);border-color:var(--line-ink)}
.offer--featured{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(232,184,75,.06),rgba(20,20,20,1) 40%);
  box-shadow:0 30px 70px -40px rgba(232,184,75,.5);
}
.offer__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#1A1206;font-family:var(--display);font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .9rem;border-radius:2px;white-space:nowrap;
}
.offer__head{padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.offer__name{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:.01em}
.offer__price{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,2.8rem);color:var(--gold);margin:.3rem 0 .5rem}
.offer__pitch{color:var(--on-ink-dim);font-size:.96rem;font-style:italic;font-family:var(--serif)}
.offer__list{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-bottom:2rem;flex:1}
.offer__list li{position:relative;padding-left:1.7rem;font-size:.95rem;color:var(--on-ink)}
.offer__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:transparent;border:1px solid var(--gold);
}
.offer--featured .offer__list li::before{background:var(--gold)}
.offer__cta{width:100%}

/* UPDATE CARD */
.update-card{
  margin-top:clamp(1.5rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(232,184,75,.07),rgba(20,20,20,.4));
  border:1px solid var(--line-ink);border-radius:5px;padding:clamp(1.6rem,3vw,2.2rem)clamp(1.6rem,3vw,2.6rem);
}
.update-card__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:.4rem 0 .6rem}
.update-card__text p{color:var(--on-ink-dim);font-size:.95rem;max-width:54ch}
.update-card .eyebrow{margin-bottom:.2rem}

/* QUOTE BAND */
.quote-band{
  margin-top:clamp(1.5rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border:1px dashed var(--line-ink);border-radius:5px;padding:1.5rem clamp(1.5rem,3vw,2.2rem);
}
.quote-band p{font-family:var(--serif);font-style:italic;font-size:1.15rem}

/* ============================================================
   PRO ULTRA DETAIL
   ============================================================ */
.ultra{border-top:1px solid rgba(255,255,255,.05)}
.ultra__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.ultra__lead{color:var(--on-ink-dim);font-size:1.05rem;margin:1.4rem 0 2.2rem;max-width:42ch}
.ultra__features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);border-radius:5px;overflow:hidden}
.ultra__features li{background:var(--ink);padding:clamp(1.4rem,2.6vw,1.9rem)}
.ultra__features h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:.5rem;color:var(--gold)}
.ultra__features p{color:var(--on-ink-dim);font-size:.9rem}
.ultra__feature--wide{grid-column:1 / -1}

/* ============================================================
   AUDIENCE
   ============================================================ */
.audience__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem)}
.audience__item{
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-inset);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  transition:transform .4s var(--ease),border-color .4s}
.audience__item:hover{transform:translateY(-4px);border-color:var(--glass-border-gold)}
.audience__idx{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem}
.audience__item h3{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2vw,1.28rem)}
.audience__item p{color:var(--on-ink-dim);font-size:.92rem}

/* ============================================================
   PARTNER
   ============================================================ */
.partner{background:#070707}
.partner__head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.partner__lead{color:var(--on-ink-dim);font-size:1.05rem;margin-top:1.3rem}
.partner__cta{margin-top:clamp(2rem,4vw,3rem)}

/* ============================================================
   STEPS (partner + process)
   ============================================================ */
.steps--4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
.step{position:relative;padding-top:1.4rem;border-top:1px solid currentColor}
.section--ink .step{border-top-color:var(--line-ink)}
.section--cream .step{border-top-color:var(--line-cream)}
.step__num{
  font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.8rem;
}
.step h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:.5rem}
.step p{font-size:.92rem}
.section--ink .step p{color:var(--on-ink-dim)}
.section--cream .step p{color:var(--on-cream-dim)}

/* ============================================================
   FAQ
   ============================================================ */
.accordion{display:flex;flex-direction:column;gap:.8rem}
.acc{border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg);box-shadow:var(--glass-inset);overflow:hidden}
.acc summary{
  list-style:none;cursor:pointer;padding:1.25rem 1.5rem;
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .3s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--gold);transition:transform .35s var(--ease);line-height:1}
.acc[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--gold)}
.acc__body{padding:0 1.5rem 1.4rem;color:var(--on-ink-dim);font-size:.97rem}
.acc__body a{color:var(--gold)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding-top:clamp(3.5rem,7vw,5rem)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer__tag{color:var(--on-ink-dim);margin-top:1rem;font-size:.95rem;max-width:30ch}
.footer__nav{display:flex;flex-direction:column;gap:.7rem}
.footer__nav a{color:var(--on-ink-dim);font-size:.95rem;transition:color .3s}
.footer__nav a:hover{color:var(--gold)}
.footer__contact{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.footer__label{font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-dim)}
.footer__email{font-size:1.05rem;color:var(--gold);border-bottom:1px solid var(--line-ink);padding-bottom:.15rem}
.footer__legal{color:var(--on-ink-dim);font-size:.9rem;transition:color .3s}
.footer__legal:hover{color:var(--on-ink)}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;padding-bottom:2.2rem}
.footer__bottom span{font-size:.82rem;color:var(--on-ink-dim);letter-spacing:.02em}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:2.2rem}
  .hero__visual{order:0;max-width:360px}
  .placeholder--hero{aspect-ratio:16/10}
  .ultra__grid{grid-template-columns:1fr;gap:2rem}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:860px){
  .nav__links{display:none}
  .cards-3{grid-template-columns:1fr}
  .offers__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .offer--featured{order:-1}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .proof__stats{grid-template-columns:repeat(2,1fr)}
  .audience__grid{grid-template-columns:1fr 1fr}
  .steps--4{grid-template-columns:1fr 1fr}
  .ultra__features{grid-template-columns:1fr}
  .ultra__feature--wide{grid-column:auto}
}
@media (max-width:560px){
  :root{--pad:1.15rem}
  .nav__right .btn--gold{display:none}
  .work__grid{grid-template-columns:1fr 1fr}
  .audience__grid{grid-template-columns:1fr}
  .steps--4{grid-template-columns:1fr}
  .update-card,.quote-band{flex-direction:column;align-items:flex-start}
  .update-card .btn,.quote-band .btn{width:100%}
  .footer__grid{grid-template-columns:1fr}
  .hero__cta .btn{flex:1}
}

/* ============================================================
   GLASSMORPHISM LAYER — verre dépoli + or sur fond encre
   ============================================================ */
:root{
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --glass-bg-gold:linear-gradient(155deg,rgba(232,184,75,.14),rgba(255,255,255,.02));
  --glass-border:rgba(255,255,255,.14);
  --glass-border-gold:rgba(232,184,75,.32);
  --glass-blur:saturate(160%) blur(16px);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.18);
}

/* halos dorés derrière le verre (pour que le flou ait de la matière) */
.section--ink{position:relative;overflow:hidden}
.section--ink + .section--ink{border-top:1px solid rgba(255,255,255,.05)}
.offers::before,.partner::before,.ultra::before,.why::before,.work::before,.audience::before,.faq::before{
  content:"";position:absolute;width:55vw;height:55vw;max-width:680px;max-height:680px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(232,184,75,.10),transparent 62%);
}
.offers::before{top:-12%;left:-12%}
.partner::before{bottom:-18%;right:-12%}
.ultra::before{top:10%;right:-15%}
.why::before{top:-10%;right:-12%}
.work::before{bottom:-12%;left:-14%}
.audience::before{top:20%;left:-15%}
.faq::before{top:-8%;right:-10%}
.section--ink > .container{position:relative;z-index:1}

/* ---------- Nav : verre renforcé ---------- */
.nav{background:rgba(10,10,10,.5);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.nav.is-scrolled{background:rgba(10,10,10,.8)}

/* ---------- Hero : titre bold sans (effet mockup) ---------- */
.hero__title{
  font-family:var(--display);font-weight:800;line-height:1.12;letter-spacing:-.02em;
  font-size:clamp(1.65rem,3.1vw,2.7rem);
  max-width:21ch;margin-bottom:1.4rem;
}
.hero__title em{font-style:normal;font-family:var(--display);color:var(--gold)}

/* ---------- Hero : composition en verre ---------- */
.glass-stack{position:relative;width:100%;aspect-ratio:4/5;max-width:480px;margin-inline:auto}
.glass-panel{
  position:absolute;border-radius:22px;border:1px solid var(--glass-border);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 30px 70px -35px rgba(0,0,0,.85),var(--glass-inset);
}
.glass-panel--main{inset:9% 7% 7% 9%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}
.glass-panel--float1{width:58%;height:48%;top:-3%;right:-4%;transform:rotate(6deg);opacity:.7;z-index:1;animation:floaty 7s ease-in-out infinite}
.glass-panel--float2{width:52%;height:44%;bottom:-5%;left:-6%;transform:rotate(-8deg);opacity:.5;z-index:0;animation:floaty 9s ease-in-out infinite reverse}
.glass-panel--main .placeholder__tag{border-color:var(--glass-border-gold)}
.glass-panel--main .placeholder__hint{color:var(--on-ink-dim);font-size:.85rem}

/* hero : visuel dans un cadre verre */
.hero__visual{position:relative;width:100%;max-width:440px;margin-inline:auto}
.hero-art{
  position:relative;width:100%;border-radius:18px;overflow:hidden;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  box-shadow:0 50px 100px -45px rgba(0,0,0,.95),var(--glass-inset);
}
.hero-art__img{width:100%;height:auto;display:block}

@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
.glass-panel--float1{--r:6deg}
.glass-panel--float2{--r:-8deg}

/* ---------- Cartes offres en verre ---------- */
.offer{
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--glass-inset);
}
.offer:hover{border-color:var(--glass-border-gold)}
.offer--featured{
  border-color:var(--glass-border-gold);
  background:linear-gradient(180deg,rgba(232,184,75,.14),rgba(255,255,255,.03) 45%);
  box-shadow:0 45px 95px -50px rgba(232,184,75,.55),var(--glass-inset);
}

/* ---------- Bande de preuve : tuiles en verre ---------- */
.proof__stats{background:rgba(232,184,75,.16);border:1px solid var(--glass-border-gold);border-radius:20px}
.stat{background:var(--glass-bg)}
.proof__refs{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);border-radius:20px;padding:1.1rem 1.7rem;margin-top:2.2rem;
  box-shadow:var(--glass-inset);justify-content:center;
}

/* ---------- Pro Ultra : tuiles en verre ---------- */
.ultra__features{background:rgba(232,184,75,.16);border:1px solid var(--glass-border-gold);border-radius:20px}
.ultra__features li{background:var(--glass-bg)}

/* ---------- Update card + quote band en verre ---------- */
.update-card{
  background:var(--glass-bg-gold);
  border:1px solid var(--glass-border-gold);border-radius:20px;box-shadow:var(--glass-inset);
}
.quote-band{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);border-radius:20px;
}

/* ---------- Partenaire : étapes en cartes de verre ---------- */
.section--ink .step{
  border:1px solid var(--glass-border);border-top:1px solid var(--glass-border);
  background:var(--glass-bg);
  border-radius:16px;padding:1.6rem 1.4rem;box-shadow:var(--glass-inset);
}
.section--ink .step__num{margin-bottom:.6rem}

/* ---------- Footer email pill discret ---------- */
.footer__email{border-bottom:none}

/* ---------- Pages formulaire (devis / partenaire) ---------- */
.form-page{padding-top:clamp(7rem,14vh,9rem);padding-bottom:5rem;min-height:100vh}
.form-intro{margin-bottom:2.4rem;max-width:60ch}
.form-intro .eyebrow{margin-bottom:1rem}
.form-intro h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,3rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1rem}
.form-intro h1 em{font-style:italic;color:var(--gold)}
.form-intro p{color:var(--on-ink-dim);font-size:1.02rem}
.form-back{display:inline-flex;align-items:center;gap:.5em;margin-bottom:2rem;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-ink-dim)}
.form-back:hover{color:var(--gold)}

.form-card{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;
  box-shadow:var(--glass-inset);padding:clamp(1.5rem,4vw,2.8rem);max-width:760px;
}
.field{margin-bottom:1.4rem}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-ink-dim);margin-bottom:.55rem}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:10px;
  padding:.85rem 1rem;color:var(--on-ink);font-family:var(--sans);font-size:1rem;
  transition:border-color .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(154,147,137,.6)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.25rem,calc(100% - 14px) 1.25rem;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:#161210;color:var(--on-ink)}
.field input[type=file]{padding:.65rem;cursor:pointer}
.field input[type=file]::file-selector-button{
  background:var(--gold);color:#1A1206;border:none;border-radius:7px;padding:.55rem .9rem;margin-right:.9rem;
  font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;cursor:pointer;transition:background .3s;
}
.field input[type=file]::file-selector-button:hover{background:#F0C766}
.field-hint{font-size:.82rem;color:var(--on-ink-dim);margin-top:.45rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--on-ink-dim);margin:.6rem 0 1.7rem}
.form-consent input{width:auto;margin-top:.25rem;accent-color:var(--gold);flex-shrink:0}
.form-consent a{color:var(--gold)}
.form-submit{width:100%}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .glass-panel--float1,.glass-panel--float2,.gold-orb,.hero-art__emblem{animation:none}
}
@media (max-width:980px){
  .glass-stack{max-width:380px}
}
@media (max-width:560px){
  .glass-stack{max-width:300px}
  .proof__refs{border-radius:16px}
}

/* ============================================================
   REFONTE — positionnement « supports premium »
   ============================================================ */
.section-sub{margin-top:1rem;color:var(--on-ink-dim);font-size:clamp(1rem,1.6vw,1.1rem);max-width:56ch}
.hero__proof{margin-top:1.5rem;font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.03em;color:var(--on-ink-dim)}

/* mini-cartes formats sous le hero */
.formats{padding-block:clamp(2rem,4vw,3.2rem)}
.formats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.4rem)}
.format-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-inset);padding:clamp(1.3rem,2.4vw,1.7rem);transition:transform .4s var(--ease),border-color .4s}
.format-card:hover{transform:translateY(-4px);border-color:var(--glass-border-gold)}
.format-card__tag{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.1rem;display:block;margin-bottom:.7rem}
.format-card h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin-bottom:.45rem}
.format-card p{color:var(--on-ink-dim);font-size:.9rem}

/* bloc devis : titre + texte élargi */
.quote-band{align-items:center}
.quote-band__text{flex:1;min-width:280px}
.quote-band__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.85rem);margin-bottom:.55rem}
.quote-band__text p{font-family:var(--sans);font-style:normal;font-size:.97rem;line-height:1.6;color:var(--on-ink-dim);max-width:62ch}

/* responsive refonte */
@media (max-width:860px){
  .formats__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{flex:none;width:100%;--h:56px;font-size:.82rem}
  .hero__proof{font-size:.72rem;letter-spacing:.02em}
  .section-sub{font-size:1rem}
}