/* ============================================================
   LPMX v2 : paddock / garage de nuit.
   Dark-first assumé, pas de variante claire. Couleurs explicites.
   ============================================================ */
:root{
  --ink:        #08080A;
  --surface:    #101014;
  --surface-2:  #17171C;
  --surface-3:  #1E1E25;
  --line:       #26262E;
  --line-2:     #3A3A46;
  --bone:       #F4F3F0;
  --mute:       #8B8B95;
  --mute-2:     #C8C8CE;
  --red:        #E10600;
  --red-hot:    #FF1A0D;
  --red-deep:   #8E0400;
  --volt:       #C9FF3D;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --util:    "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.72,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:72px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
picture{ display:block; }
.nowrap{ white-space:nowrap; }

:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; border-radius:2px; }

.skip{
  position:fixed; left:12px; top:-60px; z-index:100;
  padding:10px 16px; background:var(--bone); color:var(--ink);
  font-family:var(--util); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:3px;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* --- Damier : motif de marque généré --- */
.checker{
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size:var(--sq,18px) var(--sq,18px);
  background-position:0 0, calc(var(--sq,18px)/2) calc(var(--sq,18px)/2);
}

.label{
  font-family:var(--util);
  font-size:.8125rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* Titre de section, commun */
.sec-title{
  font-family:var(--display);
  font-variation-settings:"wdth" 116;
  font-style:italic; font-weight:900;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:-.02em;
}
.sec-title em{
  font-style:inherit;
  color:transparent;
  -webkit-text-stroke:1.6px var(--bone);
  opacity:.75;
}
.rule{ width:56px; height:2px; background:var(--red); }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px 48px; flex-wrap:wrap;
  margin-bottom:clamp(30px,4.4vw,56px);
}
.sec-head__l{ display:flex; flex-direction:column; gap:14px; flex:1 1 420px; }
.sec-head__r{
  flex:0 1 38ch;
  color:var(--mute); font-size:1rem;
  padding-bottom:.3em;
}
.sec-head__r strong{ color:var(--bone); font-weight:600; }

/* ============================ NAV ============================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--pad);
  padding-top:max(14px, env(safe-area-inset-top));
  background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 70%,transparent), transparent);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease);
}
.nav[data-stuck="true"]{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
/* la nav se retire quand on descend, revient quand on remonte */
.nav[data-hide="true"]{ transform:translateY(-104%); }

.nav__mark{ display:flex; align-items:center; gap:11px; text-decoration:none; z-index:2; margin-right:auto; }
.nav__mark img{ width:40px; height:auto; transition:transform .5s var(--ease); }
.nav__mark:hover img{ transform:rotate(-14deg) scale(1.06); }
.nav__mark span{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-style:italic; font-weight:900; font-size:1rem; letter-spacing:.04em;
}
.nav__links{ display:flex; gap:clamp(18px,2.6vw,38px); align-items:center; }
.nav__links a{
  position:relative;
  font-family:var(--util);
  font-size:.875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--mute-2);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a.is-active{ color:var(--bone); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  display:inline-flex; align-items:center;
  height:40px; padding:0 18px;
  background:var(--red); color:var(--bone);
  font-family:var(--util); font-size:.875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border-radius:3px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nav__cta:hover, .nav__cta:focus-visible{ background:var(--red-hot); transform:translateY(-1px); }

/* Burger mobile */
.burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:3px;
  cursor:pointer; padding:0; z-index:2;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.burger:hover{ background:var(--surface-2); }
.burger span{
  display:block; position:relative;
  width:18px; height:2px; background:var(--bone);
  transition:background .2s var(--ease);
}
.burger span::before,
.burger span::after{
  content:""; position:absolute; left:0;
  width:18px; height:2px; background:var(--bone);
  transition:transform .35s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Panneau mobile plein écran */
.menu{
  position:fixed; inset:0; z-index:70;
  display:flex; flex-direction:column; justify-content:center;
  gap:40px;
  padding:96px var(--pad) 48px;
  background:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.menu[data-open="true"]{ opacity:1; visibility:visible; }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  display:flex; align-items:baseline; gap:14px;
  padding:6px 0;
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic; font-weight:900;
  font-size:clamp(2.4rem,12vw,3.6rem);
  line-height:1.08;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--bone);
  letter-spacing:-.02em;
  border-bottom:1px solid var(--line-soft, #1C1C23);
  opacity:0; transform:translateY(26px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s var(--ease);
}
.menu__links a small{
  font-family:var(--util); font-style:normal; font-weight:600;
  font-size:.8125rem; letter-spacing:.2em; color:var(--red);
}
.menu[data-open="true"] .menu__links a{ opacity:1; transform:none; }
.menu[data-open="true"] .menu__links a:nth-child(2){ transition-delay:.06s; }
.menu[data-open="true"] .menu__links a:nth-child(3){ transition-delay:.12s; }
.menu[data-open="true"] .menu__links a:nth-child(4){ transition-delay:.18s; }
.menu__links a:active{ color:var(--red); }
.menu__meta{
  display:flex; flex-direction:column; gap:16px;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease) .26s, transform .5s var(--ease) .26s;
}
.menu[data-open="true"] .menu__meta{ opacity:1; transform:none; }
.menu__socials{ display:flex; gap:10px; }
.menu__socials a{
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:3px; color:var(--bone);
  --yt-play:var(--ink);
}
.menu__mail{
  font-family:var(--util); font-size:1rem; letter-spacing:.08em;
  color:var(--mute-2); text-decoration:none;
}
.menu__flag{
  position:absolute; inset:auto 0 0 0; height:10px;
  color:rgba(255,255,255,.09); --sq:14px;
}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  min-height:max(100svh, 680px);
  display:grid; align-items:center;
  overflow:hidden;
  padding:104px 0 100px;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; z-index:-3; inset:auto -20% -40% -30%; height:70%;
  background:radial-gradient(ellipse at 30% 100%, color-mix(in srgb,var(--red) 22%,transparent), transparent 62%);
  pointer-events:none;
}

/* Photo : fondu continu vers le noir (pas d'arête), plus lumineuse qu'en v1 */
.hero__photo{
  position:absolute; z-index:-2;
  top:0; right:0; bottom:0;
  width:min(60%, 900px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 42%),
    linear-gradient(0deg, transparent 0%, #000 26%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 42%),
    linear-gradient(0deg, transparent 0%, #000 26%);
          mask-composite:intersect;
}
.hero__photo picture{ position:absolute; inset:-5% 0 -5% 0; will-change:transform; }
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  filter:saturate(1.04) contrast(1.06) brightness(.9);
  transform:scale(1.06);
  transition:transform 2.4s var(--ease-out);
}
.hero.is-ready .hero__photo img{ transform:scale(1); }
.hero__photo::after{
  /* léger voile en haut pour la nav */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 60%,transparent) 0%, transparent 22%);
}

.hero__flag{
  position:absolute; z-index:-2;
  top:-8%; left:-6%;
  width:min(46vw,560px); aspect-ratio:1.35;
  color:rgba(255,255,255,.055);
  --sq:34px;
  transform:rotate(-9deg) skewY(-4deg);
  -webkit-mask-image:radial-gradient(ellipse at 22% 28%, #000 8%, transparent 68%);
          mask-image:radial-gradient(ellipse at 22% 28%, #000 8%, transparent 68%);
  pointer-events:none;
}

.hero__inner{ position:relative; width:100%; }
.hero__col{ max-width:min(640px, 60%); }

.hero__logo{
  width:clamp(84px,7.6vw,108px); height:auto;
  margin-bottom:clamp(18px,2.4vw,26px);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.7));
}
.hero__eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;
  margin-bottom:22px;
  color:var(--mute-2);
  /* l'étiquette vit dans le H1 (SEO) : on neutralise les styles hérités du titre */
  font-style:normal; font-variation-settings:normal;
  line-height:1.5; text-shadow:none;
}
.hero__sep{ color:var(--red); }
.flag-ch{ display:inline-block; vertical-align:-1px; margin-left:4px; }

h1.hero__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic; font-weight:900;
  font-size:clamp(3.4rem, 8vw, 6.6rem);
  line-height:.86;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin-bottom:24px;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
}
/* chaque ligne du titre monte derrière un masque */
.tl{
  display:block;
  overflow:hidden;
  /* le masque laisse passer les accents et le débordement de l'italique :
     on ouvre le haut et on rattrape le décalage en marge négative */
  padding-top:.16em;
  margin-top:-.16em;
  padding-right:.08em; /* l'italique déborde à droite */
}
.tl > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1s var(--ease-out);
}
.hero__title em{
  font-style:inherit; display:block;
  padding-bottom:.06em;
  color:transparent;
  -webkit-text-stroke:2.4px var(--bone);
}

.hero__claim{
  font-family:var(--util);
  font-size:clamp(1.0625rem,1.9vw,1.375rem);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  margin-bottom:14px;
}
.hero__claim b{ font-weight:700; font-style:italic; }
.hero__claim b:nth-of-type(2){ color:var(--red-hot); }
.hero__meta{ color:var(--mute-2); font-size:1rem; max-width:44ch; margin-bottom:28px; }

.hero__follow{ display:flex; flex-direction:column; gap:12px; }
.social-bar{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.sb{
  position:relative;
  display:inline-flex; align-items:center; gap:11px;
  height:54px; padding:0 22px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  border:1px solid var(--line-2);
  border-radius:3px;
  color:var(--bone);
  font-family:var(--util);
  font-size:.9375rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  overflow:hidden; isolation:isolate;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  --yt-play:var(--bone);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sb::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--surface-3);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
}
.sb:hover, .sb:focus-visible{ transform:translateY(-2px); border-color:#55555F; }
.sb:hover::before, .sb:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.sb--yt svg{ color:var(--red); }

/* Instagram = action principale (le quotidien est là) */
.social-bar li:first-child .sb{ background:var(--red); border-color:var(--red); }
.social-bar li:first-child .sb::before{ background:var(--red-hot); }
.social-bar li:first-child .sb:hover,
.social-bar li:first-child .sb:focus-visible{ box-shadow:0 12px 30px color-mix(in srgb,var(--red) 34%,transparent); border-color:var(--red-hot); }

.plate{
  position:absolute; z-index:2;
  right:var(--pad); top:clamp(112px,17vh,170px);
  display:grid; place-items:center;
  padding:14px 22px 12px;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  border-radius:3px;
  box-shadow:0 18px 46px rgba(0,0,0,.62);
  transform:rotate(-3deg);
}
.plate__num{
  font-family:var(--display);
  font-variation-settings:"wdth" 122;
  font-style:italic; font-weight:900;
  font-size:clamp(2.2rem,4.6vw,3.4rem);
  line-height:.9; color:var(--bone); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.plate__cap{
  font-family:var(--util);
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin-top:4px;
}

/* indicateur de scroll */
.scroller{
  position:absolute; left:50%; bottom:72px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--util);
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--mute); text-decoration:none;
}
.scroller__bar{
  width:1px; height:40px;
  background:linear-gradient(180deg,var(--line-2),transparent);
  position:relative; overflow:hidden;
}
.scroller__bar::after{
  content:""; position:absolute; left:0; top:0;
  width:1px; height:14px; background:var(--red);
  animation:drop 2.1s var(--ease) infinite;
}
@keyframes drop{
  0%   { transform:translateY(-16px); opacity:0; }
  35%  { opacity:1; }
  100% { transform:translateY(42px); opacity:0; }
}

/* ============================ BANDES ============================ */
.tapes{
  position:relative; z-index:4;
  height:clamp(116px,11vw,150px);
  margin-top:-62px;
  overflow:hidden;
  pointer-events:none;
}
.tape{
  position:absolute; left:-4%; right:-4%; top:50%;
  display:flex; overflow:hidden;
  padding:11px 0 10px;
}
.tape--back{
  background:var(--surface-3);
  transform:translateY(-50%) rotate(2deg);
}
.tape--front{
  background:var(--red);
  transform:translateY(-50%) rotate(-2.2deg);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.tape__row{
  display:flex; flex:none; align-items:center; gap:26px;
  padding-right:26px;
}
.tape.is-live .tape__row{ animation:slide var(--dur,40s) linear infinite; }
.tape--back.is-live .tape__row{ animation-direction:reverse; }
.tape i{
  font-style:italic;
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-weight:900;
  font-size:clamp(1.0625rem,1.9vw,1.5rem);
  line-height:1.1;
  letter-spacing:.01em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
}
.tape--back i{ color:transparent; -webkit-text-stroke:1px #6A6A75; }
.tape b{
  flex:none;
  width:12px; height:12px;
  color:var(--ink);
  background:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size:6px 6px;
  background-position:0 0, 3px 3px;
}
.tape--back b{ color:#55555F; }
@keyframes slide{ to{ transform:translateX(-100%); } }

/* ============================ CONTENU ============================ */
.content{
  position:relative;
  padding:clamp(48px,7vw,96px) 0 clamp(72px,9vw,128px);
}

.bento{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  grid-template-rows:repeat(2, minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  height:clamp(580px,58vw,760px);
}
.shot{
  position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  isolation:isolate;
}
.shot--tall{ grid-row:span 2; }
.shot picture{ position:absolute; inset:0; z-index:-2; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.shot--tall img{ object-position:50% 18%; }
.shot:not(.shot--tall) img{ object-position:50% 42%; }
.shot::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 34%, color-mix(in srgb,var(--ink) 88%,transparent) 92%);
}
.shot::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.shot:hover img{ transform:scale(1.05); }
.shot:hover::after{ transform:scaleX(1); }

.shot__body{
  display:flex; flex-direction:column; gap:8px;
  padding:clamp(22px,2.6vw,36px);
  max-width:48ch;
}
.shot__n{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--util);
  font-size:.8125rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone);
}
.shot__n::before{ content:""; width:8px; height:8px; background:var(--red); flex:none; }
.shot--flag .shot__n::before{ background:var(--bone); }
.shot h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 116;
  font-style:italic; font-weight:900;
  font-size:clamp(1.6rem,2.8vw,2.5rem);
  line-height:.95;
  text-transform:uppercase; letter-spacing:-.015em;
}
.shot p{ color:var(--mute-2); font-size:.9688rem; }

.shot--flag{
  background:linear-gradient(135deg, var(--red) 0%, #B80500 55%, var(--red-deep) 100%);
  border-color:transparent;
}
.shot--flag::before{ display:none; }
.shot--flag::after{ background:var(--bone); }
.shot__checker{
  position:absolute; z-index:-1;
  top:-10%; right:-8%;
  width:70%; aspect-ratio:1.2;
  color:rgba(0,0,0,.26); --sq:28px;
  transform:rotate(-8deg) skewY(-4deg);
  -webkit-mask-image:radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%);
          mask-image:radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%);
}
.shot--flag .shot__n{ color:rgba(255,255,255,.8); }
.shot--flag p{ color:rgba(255,255,255,.9); }
.shot__link{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:10px;
  font-family:var(--util);
  font-size:.875rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--bone);
  transition:gap .3s var(--ease);
}
.shot__link:hover, .shot__link:focus-visible{ gap:18px; }

/* ============================ HISTOIRE ============================ */
.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.story__media{ position:relative; overflow:hidden; min-height:clamp(380px,50vw,760px); }
.story__img{ position:absolute; inset:-8% 0; will-change:transform; }
.story__img picture, .story__img img{ width:100%; height:100%; }
.story__img img{ object-fit:cover; object-position:50% 52%; }
.story__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 58%, color-mix(in srgb,var(--surface) 90%,transparent) 100%);
}
/* légende posée sur la photo */
.story__cap{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  background:color-mix(in srgb,var(--ink) 82%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  font-family:var(--util);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute-2);
}
.story__cap b{
  flex:none;
  width:8px; height:8px;
  color:var(--red);
  background:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size:4px 4px;
  background-position:0 0, 2px 2px;
}

.story__body{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center;
  gap:22px;
  padding:clamp(48px,6vw,96px) clamp(24px,5vw,80px);
}
.story__num{
  position:absolute; z-index:-1;
  right:-.06em; bottom:-.2em;
  font-family:var(--display);
  font-variation-settings:"wdth" 122;
  font-style:italic; font-weight:900;
  font-size:clamp(9rem,22vw,19rem);
  line-height:1; letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.07);
  pointer-events:none; user-select:none;
}
.story__body p{ color:var(--mute-2); max-width:54ch; font-size:1.0625rem; }

.facts{
  display:grid; grid-template-columns:repeat(4, max-content);
  gap:22px clamp(24px,3vw,44px);
  margin:8px 0 0; padding-top:22px; border-top:1px solid var(--line);
}
/* le chiffre est visuellement au-dessus de son libellé ; chiffres alignés en haut */
.fact{ display:flex; flex-direction:column-reverse; justify-content:flex-end; }
.fact__n{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic; font-weight:900;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.fact__l{
  font-family:var(--util);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-top:8px;
  max-width:9rem; line-height:1.35;
}

/* ============================ RÉSEAUX ============================ */
.socials{
  position:relative;
  padding:clamp(64px,8vw,120px) 0 clamp(72px,9vw,128px);
  border-top:1px solid var(--line);
  background:var(--ink);
}
.grid-start{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.gate{
  position:relative;
  display:grid;
  grid-template-columns:clamp(40px,5vw,72px) 44px minmax(0,1fr) auto auto;
  grid-template-areas:"n ico net handle go";
  align-items:center;
  gap:0 clamp(14px,2.4vw,32px);
  padding:clamp(20px,2.6vw,30px) clamp(10px,1.6vw,22px);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  overflow:hidden; isolation:isolate;
}
.gate::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--red), var(--red-deep));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.gate:hover::before, .gate:focus-visible::before{ transform:scaleX(1); }
.gate__n{
  grid-area:n;
  font-family:var(--util); font-weight:600;
  font-size:1rem; letter-spacing:.2em;
  color:var(--mute);
  transition:color .3s var(--ease);
}
.gate__ico{ grid-area:ico; color:var(--bone); --yt-play:var(--ink); justify-self:center; }
.gate--yt .gate__ico{ color:var(--red); --yt-play:var(--bone); }
.gate__net{
  grid-area:net;
  font-family:var(--display);
  font-variation-settings:"wdth" 120;
  font-style:italic; font-weight:900;
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:.9; letter-spacing:-.025em;
  text-transform:uppercase;
  padding-right:.08em;
  transition:transform .5s var(--ease-out);
}
.gate__handle{
  grid-area:handle;
  font-family:var(--util); font-weight:500;
  font-size:1.0625rem; letter-spacing:.1em;
  color:var(--mute-2);
  transition:color .3s var(--ease);
}
.gate__go{
  grid-area:go;
  display:inline-flex; align-items:center; gap:12px;
  height:46px; padding:0 18px;
  border:1px solid var(--line-2); border-radius:3px;
  font-family:var(--util); font-weight:600;
  font-size:.875rem; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .3s var(--ease), gap .3s var(--ease), background .3s var(--ease);
}
.gate:hover .gate__n, .gate:focus-visible .gate__n,
.gate:hover .gate__handle, .gate:focus-visible .gate__handle{ color:var(--bone); }
.gate:hover .gate__net, .gate:focus-visible .gate__net{ transform:translateX(10px); }
.gate:hover .gate__go, .gate:focus-visible .gate__go{ border-color:rgba(255,255,255,.6); gap:18px; background:rgba(0,0,0,.18); }
.gate--yt:hover .gate__ico, .gate--yt:focus-visible .gate__ico{ color:var(--bone); --yt-play:var(--red); }
.gate:focus-visible{ outline-offset:-2px; }

/* ============================ CONTACT / FOOTER ============================ */
.footer{
  position:relative;
  border-top:1px solid var(--line);
  background:var(--surface);
  overflow:hidden; isolation:isolate;
}
.footer::before{
  content:""; position:absolute; z-index:-1; inset:auto -20% -50% -20%; height:90%;
  background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb,var(--red) 16%,transparent), transparent 62%);
  pointer-events:none;
}
.footer__strip{ position:absolute; inset:0 0 auto 0; height:8px; color:rgba(255,255,255,.09); --sq:12px; }

.footer__main{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:20px;
  padding-top:clamp(80px,10vw,150px);
  padding-bottom:clamp(64px,8vw,110px);
}
.footer__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic; font-weight:900;
  font-size:clamp(2.5rem,7.6vw,6.4rem);
  line-height:.9; letter-spacing:-.025em;
  text-transform:uppercase;
}
.footer__title em{
  display:block; font-style:inherit;
  color:transparent; -webkit-text-stroke:2px var(--bone); opacity:.8;
  padding-right:.08em;
}
.footer__text{ color:var(--mute-2); max-width:52ch; font-size:1.0625rem; }

.mail{
  position:relative;
  display:inline-flex; align-items:center; gap:clamp(12px,1.6vw,20px);
  margin-top:10px; padding-bottom:10px;
  font-family:var(--display);
  font-variation-settings:"wdth" 108;
  font-style:italic; font-weight:800;
  font-size:clamp(1.15rem,4vw,2.6rem);
  letter-spacing:-.01em;
  color:var(--bone); text-decoration:none;
  overflow-wrap:anywhere;
}
.mail::before, .mail::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
}
.mail::before{ background:var(--line-2); }
.mail::after{
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.mail svg{ flex:none; color:var(--red); transition:transform .4s var(--ease-out); }
.mail:hover::after, .mail:focus-visible::after{ transform:scaleX(1); }
.mail:hover svg, .mail:focus-visible svg{ transform:translateX(6px); }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 28px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:max(26px, env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.footer__brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:800; font-size:.9375rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.footer__brand img{ width:44px; height:auto; }
.footer__socials{ display:flex; gap:8px; }
.footer__socials a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:3px;
  color:var(--mute-2); --yt-play:var(--surface);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.footer__socials a:hover, .footer__socials a:focus-visible{ color:var(--bone); border-color:var(--red); background:var(--surface-2); }
.footer__copy{ font-size:.8125rem; color:#6E6E78; }

/* Grain de film, très léger */
.grain{
  position:fixed; inset:0; z-index:95; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============================ INTRO ============================ */
.intro{ display:none; }
.js .intro{
  position:fixed; inset:0; z-index:200;
  display:block;
  cursor:pointer;
  /* filet de sécurité : si le JS ne tourne pas, l'intro s'efface seule */
  animation:introSafety .01s linear 5s forwards;
}
@keyframes introSafety{ to{ visibility:hidden; pointer-events:none; } }
.intro.is-gone{ display:none !important; }

.intro__red, .intro__ink{
  position:absolute; inset:0;
  /* bord inférieur incliné : la sortie part en diagonale */
  clip-path:polygon(0 0, 100% 0, 100% 118%, 0 100%);
}
.intro__red{ background:var(--red); }
.intro__ink{
  background:var(--ink);
  display:grid; place-items:center;
  overflow:hidden;
}
.intro.is-out .intro__ink{ animation:introWipe .72s cubic-bezier(.76,0,.24,1) forwards; }
.intro.is-out .intro__red{ animation:introWipe .72s cubic-bezier(.76,0,.24,1) .13s forwards; }
@keyframes introWipe{
  to{ clip-path:polygon(0 0, 100% 0, 100% 0, 0 -18%); }
}

.intro__flag{
  position:absolute; top:-12%; left:-10%;
  width:62vmax; aspect-ratio:1.3;
  color:rgba(255,255,255,.05); --sq:38px;
  transform:rotate(-9deg) skewY(-4deg);
  -webkit-mask-image:radial-gradient(ellipse at 22% 28%, #000 8%, transparent 66%);
          mask-image:radial-gradient(ellipse at 22% 28%, #000 8%, transparent 66%);
}
.intro__center{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.intro.is-out .intro__center{ transform:translateY(-34px); opacity:0; }

.intro__logo{
  width:clamp(112px,15vw,164px); height:auto;
  animation:introLogo 1.05s var(--ease-out) both;
}
@keyframes introLogo{
  from{ opacity:0; transform:scale(.5) rotate(-170deg); filter:blur(10px) drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
  55% { opacity:1; }
  to  { opacity:1; transform:none; filter:blur(0) drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
}

.intro__name{
  display:flex; gap:.3em;
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic; font-weight:900;
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1; letter-spacing:-.01em;
  text-transform:uppercase;
}
.intro__name > span{ display:block; overflow:hidden; padding:.12em .08em .06em 0; }
.intro__name > span > span{
  display:block;
  transform:translateY(115%);
  animation:introWord .8s var(--ease-out) forwards;
}
.intro__name > span:nth-child(1) > span{ animation-delay:.3s; }
.intro__name > span:nth-child(2) > span{ animation-delay:.38s; }
.intro__name > span:nth-child(3) > span{ animation-delay:.46s; }
.intro__name em{ font-style:inherit; color:transparent; -webkit-text-stroke:1.4px var(--bone); }
@keyframes introWord{ to{ transform:none; } }

.intro__bar{ width:clamp(150px,20vw,220px); height:2px; background:var(--line); overflow:hidden; }
.intro__bar i{
  display:block; height:100%;
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  animation:introBar 1.2s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes introBar{ to{ transform:scaleX(1); } }

.intro__num{
  position:absolute; right:-.04em; bottom:-.24em;
  font-family:var(--display);
  font-variation-settings:"wdth" 122;
  font-style:italic; font-weight:900;
  font-size:clamp(10rem,30vw,26rem);
  line-height:1; letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.06);
  animation:introNum 1.8s var(--ease-out) both;
}
@keyframes introNum{ from{ opacity:0; transform:translateX(14%); } to{ opacity:1; transform:none; } }

/* ============================ REVEAL ============================ */
.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-reveal="side"]{ transform:translateX(-26px); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* séquence d'ouverture du hero (seulement si le JS tourne) */
.js .hero [data-open]{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .hero.is-ready [data-open]{ opacity:1; transform:none; }
html:not(.js) .tl > span,
.hero.is-ready .tl > span{ transform:none; }

.hero.is-ready [data-open="1"]{ transition-delay:.05s; }
.hero.is-ready [data-open="2"]{ transition-delay:.3s; }
.hero.is-ready [data-open="3"]{ transition-delay:.7s; }
.hero.is-ready [data-open="4"]{ transition-delay:.8s; }
.hero.is-ready [data-open="5"]{ transition-delay:.92s; }
.hero.is-ready .tl > span{ transition-delay:calc(.12s + var(--i, 0) * .09s); }
.js .plate{ opacity:0; }
.hero.is-ready .plate{ animation:plateIn 1s var(--ease-out) .62s both; }
@keyframes plateIn{
  from{ opacity:0; transform:rotate(-11deg) translateY(26px) scale(.9); }
  to  { opacity:1; transform:rotate(-3deg) translateY(0) scale(1); }
}
.js .scroller{ opacity:0; }
.hero.is-ready .scroller{ animation:fadeIn .8s var(--ease) 1.25s both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .js .intro{ display:none; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal], .js .hero [data-open]{ opacity:1; transform:none; }
  .tl > span{ transform:none; }
  .tape.is-live .tape__row{ animation:none; }
  .scroller__bar::after{ animation:none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .hero__col{ max-width:min(600px, 66%); }
}

@media (max-width:980px){
  .story{ grid-template-columns:1fr; }
  .story__media{ min-height:0; height:min(125vw, 70svh); order:-1; }
  .story__img img{ object-position:50% 58%; }
  .story__media::after{
    background:linear-gradient(180deg, transparent 50%, color-mix(in srgb,var(--surface) 94%,transparent) 100%);
  }
  .gate{
    grid-template-columns:clamp(34px,5vw,56px) minmax(0,1fr) auto;
    grid-template-areas:"n net go" "n handle go";
    row-gap:6px;
  }
  .gate__ico{ display:none; }
  .gate__n{ align-self:start; padding-top:.5em; }
}

@media (max-width:820px){
  .nav__links{ display:none; }
  .burger{ display:inline-flex; }
  .nav{ padding-block:10px; gap:10px; }
  .nav__cta{ height:44px; padding:0 14px; font-size:.8125rem; letter-spacing:.14em; }

  /* Mobile : photo cadrée sur la LARGEUR de l'écran, donc même composition sur
     tous les téléphones : casque sous la nav, plaque 288 dégagée, titre posé
     sur le fondu de la fourche. */
  .hero{
    display:block;
    min-height:0;
    padding:0 0 100px;
  }
  .hero__photo{
    position:relative; top:auto; right:auto; bottom:auto;
    width:100%;
    height:min(112vw, 80svh);
    -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 76%, transparent 100%);
  }
  .hero__photo picture{ inset:0; }
  .hero__photo img{ object-position:50% 39%; filter:saturate(1.05) contrast(1.05) brightness(.9); }
  .hero__inner{ margin-top:-64px; }
  .hero__photo::after{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 55%,transparent) 0%, transparent 18%);
  }
  .hero__flag{ display:none; }
  .hero__col{ max-width:100%; }
  .hero__logo{ display:none; }
  .hero__eyebrow{ margin-bottom:16px; }
  h1.hero__title{ margin-bottom:22px; }

  .plate{ display:none; }
  .scroller{ display:none; }
  .hero__sep{ display:none; }
  .hero__eyebrow > .nowrap{ flex-basis:100%; }

  .social-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .sb{
    flex-direction:column; justify-content:center; gap:6px;
    width:100%; height:72px; padding:0 6px;
    font-size:.8125rem; letter-spacing:.12em;
  }

  .tapes{ margin-top:-56px; }

  .bento{ height:clamp(620px,96vw,760px); }

  .sec-head{ align-items:flex-start; }
  .sec-head__r{ flex-basis:auto; }

  /* pas de parallaxe sur mobile : coût et jank inutiles */
  .story__img{ inset:0; }
}

@media (max-width:600px){
  .bento{
    grid-template-columns:1fr;
    grid-template-rows:none;
    height:auto;
  }
  /* Mobile : la photo entière au-dessus, le texte en dessous
     (sur petit écran, le texte posé sur l'image en masquait la moitié) */
  .shot{ flex-direction:column; align-items:stretch; }
  .shot--tall{ grid-row:auto; }
  .shot picture{ position:relative; inset:auto; z-index:auto; aspect-ratio:1/1; overflow:hidden; }
  .shot:not(.shot--tall) picture{ aspect-ratio:4/3; }
  .shot--tall img{ object-position:50% 6%; } /* plaque 288 entière en haut */
  .shot:not(.shot--tall) img{ object-position:50% 46%; }
  .shot::before{ display:none; }
  .shot__body{ padding:20px 20px 24px; max-width:none; }
  .shot--flag .shot__body{ padding-top:64px; }
}

@media (max-width:520px){
  .gate{ padding-inline:4px; gap:0 14px; }
  .gate__go{ height:44px; width:44px; padding:0; justify-content:center; font-size:0; gap:0; letter-spacing:0; }
  .gate:hover .gate__go{ gap:0; }
  .gate__handle{ font-size:.9375rem; }
  .facts{ grid-template-columns:repeat(2, max-content); gap:22px 48px; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
}