/* =========================================================
   SEOUL REBEL — styles.css
   Landing « liste d'attente » · quiet luxury coréen
   Mobile-first strict (base = 390px), scale-up en min-width.
   ========================================================= */

:root{
  /* Palette — DA stricte */
  --black:       #0A0A0A;   /* fond profond */
  --black-2:     #111111;   /* sections alternées */
  --black-3:     #171717;   /* cartes / surfaces */
  --paper:       #F2F0EC;   /* texte blanc cassé */
  --paper-dim:   rgba(242,240,236,.62);
  --paper-mute:  rgba(242,240,236,.40);
  --line:        rgba(242,240,236,.14);
  --line-soft:   rgba(242,240,236,.08);
  --accent:      #C0392B;   /* rouge sourd — parcimonie (CTA, compte à rebours) */
  --accent-hi:   #d24435;

  /* Typo */
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;  /* condensé éditorial/affiche */
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --pad:  clamp(1.25rem, 6vw, 6rem);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--paper);
  line-height:1.62;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.02; letter-spacing:.005em; }
ol,ul{ list-style:none; }
section{ position:relative; }
::selection{ background:var(--paper); color:var(--black); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Reusable ---------- */
.section-label{
  font-family:var(--body);
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--paper-mute);
  margin-bottom:1.1rem;
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-scrolled{
  background:rgba(10,10,10,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav__mono{ display:block; width:auto; height:26px; }
.nav__word{ display:none; width:auto; height:15px; }
.nav__links{ display:none; }

.nav__actions{ display:flex; align-items:center; gap:.85rem; }

/* Toggle langue */
.lang{ display:flex; align-items:center; gap:.35rem; }
.lang__btn{
  background:none; border:0; cursor:pointer; padding:.2rem;
  font-family:var(--body); font-size:.72rem; letter-spacing:.14em;
  color:var(--paper-mute); transition:color .3s;
}
.lang__btn.is-active{ color:var(--paper); }
.lang__btn:hover{ color:var(--paper); }
.lang__sep{ color:var(--paper-mute); font-size:.72rem; }

.nav__cta{
  display:none;
  font-family:var(--body); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem 1.1rem; border:1px solid var(--line); color:var(--paper);
  transition:border-color .4s, background .4s, color .4s;
}
.nav__cta:hover{ border-color:var(--paper); }

.nav__burger{
  display:flex; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer;
  width:30px; height:30px; align-items:center; justify-content:center;
}
.nav__burger span{ display:block; width:22px; height:1.5px; background:var(--paper); transition:transform .4s var(--ease), opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

.nav__drawer{
  display:flex; flex-direction:column; gap:1.4rem;
  padding:0 var(--pad);
  max-height:0; overflow:hidden;
  background:rgba(10,10,10,.97); backdrop-filter:blur(14px);
  transition:max-height .5s var(--ease), padding .5s var(--ease);
}
.nav__drawer.is-open{ max-height:80vh; padding:1.6rem var(--pad) 2.2rem; border-bottom:1px solid var(--line); }
.nav__drawer a{
  font-family:var(--display); font-size:1.6rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--paper);
}
.nav__drawer-cta{ color:var(--accent-hi) !important; }

/* =========================================================
   1 · HERO = CAPTURE EMAIL
   ========================================================= */
.hero{
  min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  padding-top:6rem;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__img,
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 20%; transform:scale(1.05);
  animation:kenburns 20s var(--ease) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.1); } }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.15) 30%, rgba(10,10,10,.55) 66%, rgba(10,10,10,.97) 100%);
}
.hero__content{
  position:relative; z-index:2;
  max-width:var(--maxw); width:100%; margin:0 auto;
  padding:0 var(--pad) clamp(2rem,6vh,5rem);
}
.hero__eyebrow{
  font-family:var(--body); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--paper); margin-bottom:1.1rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.hero__eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.hero__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.7rem, 12vw, 6rem); line-height:.96; letter-spacing:.01em;
  text-transform:uppercase; margin-bottom:1rem;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.hero__lead{
  font-size:1rem; color:var(--paper); max-width:34ch; margin-bottom:1.8rem;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* Formulaire capture */
.capture{ width:100%; max-width:520px; }
.capture__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.capture__row{ display:flex; flex-direction:column; gap:.6rem; }
.capture__input{
  width:100%; background:rgba(10,10,10,.55); border:1px solid var(--line);
  color:var(--paper); font-family:var(--body); font-size:1rem; font-weight:300;
  padding:1.05rem 1.15rem; letter-spacing:.01em; backdrop-filter:blur(4px);
  transition:border-color .4s var(--ease);
}
.capture__input::placeholder{ color:var(--paper-mute); }
.capture__input:focus{ outline:none; border-color:var(--paper); }
.capture__btn{
  width:100%; cursor:pointer;
  background:var(--accent); color:var(--paper); border:1px solid var(--accent);
  font-family:var(--body); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1.05rem 1.4rem;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .2s var(--ease);
}
.capture__btn:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }
.capture__btn:active{ transform:translateY(1px); }
.capture__btn[disabled]{ opacity:.6; cursor:default; }
.capture__micro{
  margin-top:.85rem; font-size:.72rem; letter-spacing:.02em; color:var(--paper-dim);
}
.capture__status{
  margin-top:.7rem; font-size:.78rem; letter-spacing:.01em; min-height:1.1em;
}
.capture__status.is-ok{ color:#7dd39b; }
.capture__status.is-err{ color:var(--accent-hi); }

.hero__scroll{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:2; display:none; flex-direction:column; align-items:center; gap:.7rem;
}
.hero__scroll-line{ width:1px; height:40px; background:linear-gradient(var(--paper),transparent); animation:scrollPulse 2.4s var(--ease) infinite; }
.hero__scroll-text{ font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-mute); }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.5); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* =========================================================
   2 · CONCEPT DU DROP
   ========================================================= */
.concept{ padding:clamp(2.25rem,5vh,7rem) var(--pad); background:var(--black); }
.concept__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:2rem; }
.concept__head{ margin-bottom:2rem; }
.concept__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; letter-spacing:.01em; }
.concept__intro{ color:var(--paper-dim); max-width:52ch; margin-top:1rem; font-size:1rem; }
.concept__figure{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; }
.concept__figure img{ filter:brightness(.9); transition:transform 1.3s var(--ease); }
.concept__figure:hover img{ transform:scale(1.05); }

.steps{
  display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.step{ background:var(--black); padding:2rem 1.6rem; position:relative; }
.step__num{
  font-family:var(--display); font-weight:600; font-size:2.4rem; color:var(--accent);
  display:block; line-height:1; margin-bottom:1rem;
}
.step__title{ font-size:1.4rem; font-weight:500; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.6rem; }
.step__desc{ color:var(--paper-dim); font-size:.95rem; max-width:40ch; }

/* =========================================================
   3 · UNIVERS
   ========================================================= */
.univers{ padding:clamp(2.25rem,5vh,7rem) var(--pad); background:var(--black-2); }
.univers__head{ max-width:var(--maxw); margin:0 auto 2rem; }
.univers__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; }
.univers__list{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:1.4rem; }

.uni{ position:relative; overflow:hidden; }
.uni__media{ aspect-ratio:4/5; overflow:hidden; }
.uni__media img{ transition:transform 1.3s var(--ease), filter 1.3s var(--ease); filter:grayscale(.1) brightness(.82); }
.uni:hover .uni__media img{ transform:scale(1.05); filter:grayscale(0) brightness(.9); }
.uni__caption{
  position:absolute; inset:auto 0 0 0;
  padding:1.6rem;
  background:linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.35) 70%, transparent 100%);
}
.uni__index{ font-family:var(--display); font-weight:500; font-size:.85rem; letter-spacing:.3em; color:var(--paper-mute); }
.uni__name{ font-size:clamp(1.8rem,7vw,2.6rem); text-transform:uppercase; margin:.3rem 0 .5rem; }
.uni__desc{ color:var(--paper-dim); font-size:.92rem; max-width:38ch; }
.uni__tag{
  display:inline-block; margin-top:1rem;
  font-family:var(--body); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute); border:1px solid var(--line); padding:.4rem .7rem;
}

/* =========================================================
   4 · CAMPAGNE (éditorial couple)
   ========================================================= */
.campaign{ padding:clamp(2.25rem,5vh,7rem) 0 clamp(2.25rem,5vh,7rem); background:var(--black-2); }
.campaign__head{ max-width:var(--maxw); margin:0 auto 2rem; padding:0 var(--pad); }
.campaign__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; line-height:1; }
.campaign__intro{ color:var(--paper-dim); max-width:46ch; margin-top:1rem; font-size:1rem; }

/* Mobile : carrousel scroll-snap (glisser) */
.gallery{
  display:grid; grid-auto-flow:column; grid-auto-columns:74%;
  gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) .6rem; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gallery::-webkit-scrollbar{ display:none; }
.ph{ scroll-snap-align:start; overflow:hidden; aspect-ratio:4/5; background:var(--black-3); }
.ph img{ filter:brightness(.86); transition:transform 1.2s var(--ease), filter .6s var(--ease); }
.ph:hover img{ transform:scale(1.05); filter:brightness(.98); }

/* =========================================================
   5 · MONOGRAMME (détail plein cadre)
   ========================================================= */
.mono{ position:relative; min-height:70svh; display:flex; align-items:flex-end; overflow:hidden; }
.mono__media{ position:absolute; inset:0; z-index:-1; }
.mono__media img{ object-position:center 40%; transform:scale(1.04); filter:brightness(.7); }
.mono__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.92) 100%); }
.mono__content{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 var(--pad) clamp(2.5rem,7vh,5rem); }
.mono__title{ font-size:clamp(2rem,8vw,4rem); text-transform:uppercase; line-height:1; margin:.3rem 0 .8rem; }
.mono__text{ color:var(--paper-dim); max-width:44ch; font-size:1rem; }

/* ---------- Compte à rebours (hero) ---------- */
.countdown{ margin:0 0 1.6rem; }
.countdown__label{
  display:block; font-family:var(--body); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--paper-dim); margin-bottom:.55rem;
}
.countdown__units{ display:flex; gap:1.4rem; }
.cd{ display:flex; align-items:baseline; gap:.28rem; }
.cd b{ font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--accent-hi); line-height:1; letter-spacing:.02em; }
.cd i{ font-style:normal; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mute); }

/* ---------- Slogan manifeste ---------- */
.concept__slogan{
  margin-top:1.8rem; font-family:var(--display); font-weight:400; font-style:italic;
  font-size:1.2rem; letter-spacing:.02em; color:var(--silver, #b9b6b0);
}
.concept__intro p{ margin-bottom:1rem; }

/* =========================================================
   3 · BÉNÉFICES (« Ce que tu obtiens »)
   ========================================================= */
.benefits{ padding:clamp(2.25rem,5vh,7rem) var(--pad); background:var(--black); }
.benefits__head{ max-width:var(--maxw); margin:0 auto 2rem; }
.benefits__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; }
.benefits__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:1.8rem 2.2rem;
}
.benefit{ padding:0; }
.benefit__title{ font-size:1.35rem; font-weight:500; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.55rem; color:var(--accent-hi); }
.benefit__desc{ color:var(--paper-dim); font-size:.95rem; max-width:40ch; }
.benefits__note{
  max-width:var(--maxw); margin:2.2rem auto 0; font-size:.82rem; color:var(--paper-mute);
}

/* =========================================================
   4b · LES PIÈCES (packshots)
   ========================================================= */
.pieces{ padding:clamp(2.25rem,5vh,7rem) var(--pad); background:var(--black); }
.pieces__head{ max-width:var(--maxw); margin:0 auto 2.4rem; }
.pieces__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; }
.pieces__intro{ color:var(--paper-dim); max-width:50ch; margin-top:1rem; font-size:1rem; }
.pieces__grid{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
}
.piece{ position:relative; flex:0 1 calc(50% - .5rem); }
.pieces__note{
  max-width:var(--maxw); margin:1.8rem auto 0; text-align:center;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute);
}
.piece__media{ aspect-ratio:4/5; overflow:hidden; background:var(--black-3); border:1px solid var(--line-soft); }
.piece__media img{ transition:transform 1s var(--ease); }
.piece:hover .piece__media img{ transform:scale(1.04); }
.piece__row{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-top:.8rem; }
.piece__name{ font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; }
.piece__color{ font-size:.72rem; letter-spacing:.1em; color:var(--paper-mute); text-transform:uppercase; }
.piece__tag{
  position:absolute; top:.7rem; left:.7rem;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  background:rgba(10,10,10,.55); backdrop-filter:blur(4px); padding:.3rem .55rem;
}

/* =========================================================
   6 · SOCIAL / TIKTOK
   ========================================================= */
.social{ padding:clamp(2.25rem,5vh,7rem) var(--pad); background:var(--black); }
.social__head{ max-width:var(--maxw); margin:0 auto 2rem; text-align:center; }
.social__title{ font-size:clamp(2rem,9vw,3.6rem); text-transform:uppercase; }
.social__handle{
  display:inline-block; margin-top:.9rem;
  font-family:var(--body); font-size:.82rem; letter-spacing:.16em; color:var(--paper);
  border-bottom:1px solid var(--line); padding-bottom:.25rem; transition:border-color .4s;
}
.social__handle:hover{ border-color:var(--paper); }

.counter{
  max-width:var(--maxw); margin:0 auto 2.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
  border-block:1px solid var(--line); padding:1.6rem 0;
}
.counter__item{ text-align:center; }
.counter__num{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,7vw,2.6rem); color:var(--paper); letter-spacing:.02em; }
.counter__label{ display:block; margin-top:.3rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute); }

.tiktok{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:.8rem;
}
.tt{ position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--black-3); }
.tt img{ transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:brightness(.8); }
.tt:hover img{ transform:scale(1.05); filter:brightness(.95); }
.tt__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,10,.5); border:1px solid var(--paper);
  backdrop-filter:blur(3px);
}
.tt__play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--paper);
}
.tt__meta{
  position:absolute; left:.8rem; bottom:.8rem;
  font-size:.66rem; letter-spacing:.06em; color:var(--paper);
  background:rgba(10,10,10,.5); backdrop-filter:blur(4px); padding:.35rem .6rem;
}

/* =========================================================
   5 · CLOSING CTA
   ========================================================= */
.closing{ min-height:92svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:5rem var(--pad); }
.closing__media{ position:absolute; inset:0; z-index:-1; }
.closing__media img{ object-position:center 35%; transform:scale(1.04); }
.closing__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.78), rgba(10,10,10,.86)); }
.closing__content{ position:relative; z-index:2; width:100%; max-width:560px; }
.closing__mono{ display:block; width:auto; height:clamp(38px,10vw,54px); margin:0 auto 1.2rem; opacity:.85; }
.closing__title{ font-size:clamp(2.2rem,10vw,4.4rem); text-transform:uppercase; letter-spacing:.01em; }
.closing__sub{ color:var(--paper-dim); margin:1rem 0 1.8rem; font-size:1rem; }
.capture--center{ margin:0 auto; }
.capture--center .capture__micro{ text-align:center; }
.capture--center .capture__status{ text-align:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--black-2); padding:clamp(3rem,7vh,5rem) var(--pad) 2rem; border-top:1px solid var(--line); }
.footer__top{ max-width:var(--maxw); margin:0 auto 2.4rem; }
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; }
.footer__mono{ display:block; width:auto; height:clamp(48px,12vw,72px); margin-bottom:.9rem; }
.footer__logo img{ width:auto; height:15px; opacity:.7; }
.footer__tag{ color:var(--paper-mute); margin-top:.8rem; font-size:.88rem; }
.footer__cols{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem 1rem;
  padding-bottom:2.4rem; border-bottom:1px solid var(--line);
}
.footer__col{ display:flex; flex-direction:column; gap:.8rem; }
.footer__h{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:.3rem; }
.footer__col a{ color:var(--paper-dim); font-size:.9rem; transition:color .35s; width:fit-content; }
.footer__col a:hover{ color:var(--paper); }
.footer__bottom{
  max-width:var(--maxw); margin:1.8rem auto 0;
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.72rem; letter-spacing:.02em; color:var(--paper-mute);
}

/* =========================================================
   BREAKPOINTS — scale up (mobile-first)
   ========================================================= */
@media (min-width:600px){
  .capture__row{ flex-direction:row; }
  .capture__input{ flex:1 1 auto; }
  .capture__btn{ width:auto; white-space:nowrap; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .benefits__grid{ grid-template-columns:repeat(3,1fr); }
  .piece{ flex-basis:calc(33.333% - .67rem); }
  .univers__list{ grid-template-columns:1fr 1fr; gap:1rem; }
  .tiktok{ grid-template-columns:repeat(3,1fr); }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .footer__bottom{ flex-direction:row; justify-content:space-between; }
  .hero__scroll{ display:flex; }
}

@media (min-width:920px){
  .nav__links{ display:flex; gap:2.4rem; }
  .nav__links a{
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-dim); position:relative; padding:.2rem 0; transition:color .4s;
  }
  .nav__links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background:var(--paper); transition:width .45s var(--ease);
  }
  .nav__links a:hover{ color:var(--paper); }
  .nav__links a:hover::after{ width:100%; }
  .nav__word{ display:block; }
  .nav__mono{ display:none; }
  .nav__cta{ display:inline-block; }
  .nav__burger{ display:none; }
  .nav__drawer{ display:none; }

  .hero__content{ padding-bottom:clamp(4rem,12vh,7rem); }
  .hero__lead{ font-size:1.1rem; }
  .hero__img{ object-position:center 14%; }

  /* Concept : texte + steps à gauche, visuel monogramme à droite */
  .concept__grid{ grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
  .concept__head{ margin-bottom:2.4rem; }
  .steps{ grid-template-columns:1fr; }
  .step{ padding:1.9rem 2rem; }
  .concept__figure{ display:block; }

  .univers__list{ gap:1.4rem; }
  .uni__caption{ padding:2rem; }

  /* Campagne : mur éditorial masonry */
  .gallery{
    display:block; column-count:4; column-gap:.9rem;
    overflow:visible; scroll-snap-type:none; padding:0 var(--pad);
  }
  .ph{ margin:0 0 .9rem; break-inside:avoid; aspect-ratio:4/5; }
  .ph--tall{ aspect-ratio:4/6; }
}

@media (min-width:1200px){
  .hero__title{ font-size:clamp(4rem,7vw,6.5rem); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__video{ display:none; }
}

/* =========================================================
   PAGES LÉGALES
   ========================================================= */
.legal-nav{
  position:sticky; top:0; z-index:900;
  background:rgba(10,10,10,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.legal-nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.legal-nav__inner img{ width:auto; height:15px; }
.legal-nav__back{
  font-family:var(--body); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); transition:color .3s;
}
.legal-nav__back:hover{ color:var(--paper); }

.legal{ max-width:760px; margin:0 auto; padding:clamp(2.5rem,7vh,5rem) var(--pad) 5rem; }
.legal__label{
  font-family:var(--body); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem;
}
.legal h1{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.9rem,7vw,3rem); letter-spacing:.01em; margin-bottom:1.6rem;
}
.legal h2{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:1.25rem; letter-spacing:.03em; margin:2.4rem 0 .8rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal p, .legal li{ color:var(--paper-dim); font-size:.95rem; margin-bottom:.9rem; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin-bottom:.9rem; }
.legal li{ margin-bottom:.5rem; }
.legal strong{ color:var(--paper); font-weight:500; }
.legal a{ color:var(--paper); border-bottom:1px solid var(--line); }
.legal a:hover{ border-color:var(--paper); }
.legal .todo{
  color:var(--accent-hi); background:rgba(192,57,43,.08);
  padding:.1rem .35rem; border:1px solid rgba(192,57,43,.35); font-size:.85em;
}
.legal__note{
  margin-top:1.4rem; padding:1rem 1.2rem; border:1px solid var(--line);
  font-size:.82rem; color:var(--paper-mute);
}
.legal__updated{ margin-top:3rem; font-size:.78rem; color:var(--paper-mute); }