/* ============================================================
   TIE BREAK — one-page after-padel
   Palette charte : bleu #27348b · cyan #009fe3 · jaune #ffed00
   · dark blue #2b2171 — dominante sombre, jaune réservé aux CTA
   Typo : Big Shoulders (display incliné) · Poppins (charte, textes
   et petits labels en gras espacé)
   ============================================================ */

:root {
  --ink: #0b0d2b;            /* fond principal (dérivé dark blue) */
  --ink-2: #10123f;          /* fond alterné */
  --navy: #2b2171;           /* Dark Blue charte */
  --royal: #27348b;          /* Bleu Tie Break */
  --cyan: #009fe3;           /* Cyan pur */
  --yellow: #ffed00;         /* Yellow pur — CTA + ligne du court */
  --chalk: #f4f6ff;          /* texte principal */
  --chalk-dim: rgba(244, 246, 255, .68);

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  /* Les petits labels (eyebrow, chips SET, specs, CTA) : Poppins en gras et
     très espacé plutôt qu'une 4e police. C'est la typo officielle de la charte,
     et le nom --font-mono est conservé pour ne pas toucher aux 8 usages. */
  --font-mono: "Poppins", system-ui, sans-serif;
  --mono-weight: 600;

  --skew: -6deg;             /* inclinaison du logo Agharti */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(5rem, 12vh, 9rem);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

body[data-gate="locked"] { overflow: hidden; }

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- grain global ---------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ primitives ============ */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .78rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--cyan);
}

.score-chip {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  border: 1px solid rgba(0, 159, 227, .35);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  margin-bottom: 2.2rem;
}
.score-chip span {
  color: var(--cyan);
  border-right: 1px solid rgba(0, 159, 227, .35);
  padding-right: .75rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
}
/* > span : les lignes du titre. Le sélecteur est direct pour ne pas attraper
   les <span> de lettres que main.js injecte dans le titre de la section bière. */
.section-title > span { display: block; transform: skewX(var(--skew)); }
.section-title--accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 1rem 2.2rem;
  border-radius: 6px;
  transform: skewX(var(--skew));
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn > * { transform: skewX(calc(var(--skew) * -1)); }
.btn--primary {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(255, 237, 0, .35);
}
.btn--primary:hover {
  transform: skewX(var(--skew)) translateY(-3px);
  box-shadow: 0 12px 30px -8px rgba(255, 237, 0, .45);
}
.btn--ghost {
  background: transparent;
  color: var(--chalk);
  outline: 1.5px solid rgba(244, 246, 255, .4);
  outline-offset: -1.5px;
}
.btn--ghost:hover { outline-color: var(--cyan); color: var(--cyan); }
.btn--small { padding: .6rem 1.4rem; font-size: .9rem; }

:is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ============ reveal on scroll ============ */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.22, .8, .3, 1), transform .8s cubic-bezier(.22, .8, .3, 1);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============ age gate ============ */

.age-gate {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(39, 52, 139, .8), transparent 60%),
    linear-gradient(160deg, var(--ink-2), var(--ink) 70%);
  padding: var(--pad-x);
  transition: opacity .6s ease, visibility .6s ease;
}
.age-gate.is-open { opacity: 0; visibility: hidden; }

.age-gate__court-line {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 47.5%, var(--yellow) 47.5%, var(--yellow) 48.3%, transparent 48.3%);
  opacity: .35;
  pointer-events: none;
}

.age-gate__inner { position: relative; max-width: 34rem; }
.eyebrow--gate { color: var(--yellow); margin-bottom: 1.5rem; }

.age-gate__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
}
.gate-line { display: block; transform: skewX(var(--skew)); }
.gate-line--accent { color: var(--yellow); font-style: italic; }

.age-gate__sub { color: var(--chalk-dim); margin: 1.4rem 0 2.4rem; }

.age-gate__no {
  display: block;
  margin-top: 1.6rem;
  color: var(--chalk-dim);
  font-size: .9rem;
}

/* ============ header ============ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--pad-x);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.is-scrolled {
  background: rgba(11, 13, 43, .85);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 159, 227, .25);
  padding-block: .7rem;
}
/* Le bandeau n'existe que sur la page de garde : il s'efface dès qu'on avance
   et ne revient pas quand on remonte (il poussait à filer droit vers le bas au
   lieu de dérouler la page). On ne le retrouve qu'en revenant tout en haut. */
.site-header {
  transform: translateY(0);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease,
              transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.site-header.is-hidden { transform: translateY(-105%); opacity: 0; }

.site-header__brand { text-decoration: none; color: var(--chalk); }
.brand-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: .04em;
  display: inline-block;
  transform: skewX(var(--skew));
  color: var(--yellow);
}
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.site-header__nav { display: flex; gap: 2rem; }
.site-header__nav a {
  color: var(--chalk);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .04em;
  transition: color .2s ease;
}
.site-header__nav a:hover { color: var(--cyan); }
.nav-pro { color: var(--cyan) !important; }

/* ============ fonds : terrain (hero) → comptoir (bière), en fondu ============
   Les deux photos montrent le même court — celui du comptoir l'a en arrière-plan.
   Superposées en calques FIXES, elles se fondent l'une dans l'autre au scroll :
   on lit un seul lieu où la caméra se retourne vers le bar, pas deux décors.
   Fixes aussi parce que le verre est épinglé à la fenêtre : fond et verre
   restent ainsi calés l'un sur l'autre. main.js pilote les deux opacités.
   z-index -1 : derrière tout le contenu, mais au-dessus du fond de page. Les
   sections qui suivent (histoire, réseaux, contact) sont transparentes, d'où le
   fondu de sortie du comptoir à la fin de la section bière, qui redonne --ink. */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bg-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: opacity;
}
.bg-layer--court {
  background-image:
    radial-gradient(ellipse 130% 95% at 50% 0%, rgba(11, 13, 43, .78) 0%, rgba(11, 13, 43, .32) 55%, rgba(11, 13, 43, .85) 100%),
    url("../assets/terrain-padel.jpg");
  background-position: 50% 86%;
  background-size: auto, 230% auto;
}
.bg-layer--club {
  opacity: 0;
  background-image:
    linear-gradient(180deg, rgba(16, 18, 63, .82) 0%, rgba(16, 18, 63, .34) 42%, rgba(16, 18, 63, .5) 100%),
    url("../assets/clubhouse-comptoir.jpg");
  background-position: 50% 100%;
  background-size: auto, cover;
}
@media (max-width: 760px) {
  .bg-layer--court {
    background-image:
      radial-gradient(ellipse 140% 95% at 50% 0%, rgba(11, 13, 43, .8) 0%, rgba(11, 13, 43, .38) 55%, rgba(11, 13, 43, .88) 100%),
      url("../assets/terrain-padel-mobile.jpg");
    background-position: 50% 88%;
    background-size: auto, 340% auto;
  }
}

/* ============ hero ============ */

/* Le fond du hero ne vit plus ici mais dans .bg-stage (calques fixes) : c'est
   ce qui permet le fondu croisé avec le comptoir de la section bière. Le hero
   doit donc rester transparent, sinon il masquerait les calques. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5.5rem var(--pad-x) 2.5rem;
  overflow: hidden;
}

.hero__content {
  position: relative;
  max-width: 74rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "eyebrow eyebrow eyebrow"
    "title   title   title"
    "copy    stage   actions";
  justify-items: center;
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 4rem);
}
.hero__content > .eyebrow { grid-area: eyebrow; }
.hero__title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 7.5vw, 6.2rem);
  line-height: .9;
  text-transform: uppercase;
  margin: .8rem 0 0;
  text-align: center;
}
.hero-word {
  display: inline-block; /* « Jeu, » et « Set... » restent sur la même ligne */
  transform: skewX(var(--skew));
  opacity: 0;
  /* la révélation de chaque mot est déclenchée par main.js (classe .in),
     synchronisée sur les rebonds de la balle */
}
.hero-word--accent { display: block; color: var(--yellow); font-style: italic; }

@keyframes hero-in {
  from { opacity: 0; transform: skewX(var(--skew)) translateY(.6em) rotate(2deg); }
  to   { opacity: 1; transform: skewX(var(--skew)) translateY(0) rotate(0); }
}
.hero__stage { grid-area: stage; }
.hero__copy {
  grid-area: copy;
  justify-self: end;
  text-align: right;
  padding-bottom: 2.5rem;
  max-width: 21rem;
  color: var(--chalk-dim);
  font-size: .95rem;
  line-height: 1.65;
  margin-top: 1.6rem;
}
.hero__actions {
  grid-area: actions;
  display: flex;
  justify-self: start;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 2.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "stage" "copy" "actions";
  }
  .hero__copy { justify-self: center; text-align: center; padding-bottom: 0; }
  .hero__actions { justify-self: center; flex-direction: row; justify-content: center; padding-bottom: 0; }
  .hero .hero__stage { margin-top: .6rem; } /* la canette ne mord plus sur le titre en mobile (spécificité > règle de base située plus bas) */
}

/* ---------- la canette, centre de l'attention ---------- */

.hero__stage {
  position: relative;
  margin: -1.6rem 0 0;   /* mord légèrement sur le titre : la canette passe devant */
  z-index: 1;
}
.hero__can {
  width: clamp(150px, 16vw, 215px);
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6));
  will-change: transform;
}
.hero__can-shadow {
  position: absolute;
  left: 50%;
  bottom: -1.4rem;
  translate: -50% 0;
  width: 72%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
}

/* ============================================================
   ANIMATION HERO — « La balle devient canette »
   La balle Tie Break retombe en fin d'échange, rebondit deux fois
   (chaque rebond declenche un mot du titre), et du troisieme rebond
   c'est la canette qui ressort. L'after commence.
   Sequence pilotee par main.js (rAF) + classes CSS.
   ============================================================ */

.fx-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.hero__content { z-index: 1; }

/* la balle voyageuse */
.hero__ball {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(72px, 8vw, 118px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45));
  will-change: transform;
}

/* ombre au sol de la balle (suit sa position en x, s'ecrase selon l'altitude) */
.hero__ball-shadow {
  position: absolute;
  width: 90px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 70%);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* la canette : cachee jusqu'au swap, puis ressort du rebond */
.hero__can { opacity: 0; }
body.swap .hero__can {
  animation: can-pop .7s cubic-bezier(.22, 1, .36, 1) forwards;
  transform-origin: 50% 100%;
}
@keyframes can-pop {
  0%   { opacity: 0; transform: translateY(34%) rotate(-9deg) scale(.9); }
  55%  { opacity: 1; transform: translateY(-3.5%) rotate(2.5deg) scale(1.01); }
  78%  { transform: translateY(.6%) rotate(-.6deg) scaleY(.985) scaleX(1.01); }
  100% { opacity: 1; transform: none; }
}

.hero__can-shadow { opacity: 0; }
body.swap .hero__can-shadow { animation: canshadow-in .7s ease-out .1s forwards; }
@keyframes canshadow-in {
  from { opacity: 0; scale: .4 1; }
  to   { opacity: 1; scale: 1 1; }
}

/* respiration tres lente une fois pose — l'after, c'est le calme */
/* opacity:1 explicite : en remplaçant can-pop, cette animation ferait
   perdre son fill forwards (et la canette retomberait à opacity 0) */
body.settled .hero__can { opacity: 1; animation: after-breathe 9s ease-in-out 1s infinite; }
@keyframes after-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* les mots tombent au rythme des rebonds (classes posees par main.js) */
.hero-word { opacity: 0; }
.hero-word.in { animation: hero-in .6s cubic-bezier(.2, .85, .25, 1) forwards; }

/* etat sans FX (reduced motion) : tout visible, rien ne bouge */
body.fx-off .hero__can { opacity: 1; animation: none; }
body.fx-off .hero__can-shadow { opacity: 1; }
body.fx-off .hero-word { opacity: 1; animation: none; }
body.fx-off .hero__ball, body.fx-off .hero__ball-shadow { display: none; }

/* ============ sections communes ============ */

main > section { padding: var(--section-y) var(--pad-x); }

/* ============ la bière ============ */

/* Transparente : le comptoir vient du calque fixe .bg-layer--club, qui couvre
   donc toute la section (pleine largeur, bord à bord) et pas seulement l'écran
   du service. La photo est exportée DÉJÀ floutée et assombrie
   (assets/clubhouse-comptoir.jpg) : aucun filtre à calculer au runtime, et le
   décor ne peut pas concurrencer le verre, seul élément net de la section. */
.beer { background: transparent; }

.beer__moment { min-height: 450vh; position: relative; }
.beer__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  text-align: center;
  overflow: hidden;
  padding-top: 3rem; /* plus de bandeau ici : le titre respire */
}
/* Le titre occupe la place que la canette vient de libérer, et s'écrit lettre
   par lettre au fil du scroll (main.js révèle les .ltr une à une).
   Plus compact que les autres titres de section : il doit tenir dans la bande
   laissée libre au-dessus du verre, qui est volontairement grand. */
.beer__title {
  position: relative;
  z-index: 1;
  font-size: clamp(2.6rem, 8.6vw, 6.8rem);
}
.beer__title .wd { display: inline-block; white-space: nowrap; }
.beer__title .ltr {
  display: inline-block;
  white-space: pre;      /* garde les espaces entre les mots */
  opacity: 0;
  transform: translateY(.22em);
  transition: opacity .18s linear, transform .18s ease-out;
}
.beer__title .ltr.is-in { opacity: 1; transform: none; }

/* le verre se remplit : vraie séquence du service (61 frames détourées de
   la vidéo shooting, alignées pixel pour pixel) dessinée sur un canvas —
   le scroll pilote l'image affichée (main.js). Mousse et bulles réelles
   (ce sont de vraies photos), aucun fond gris, aucune saccade de décodage
   vidéo : on ne pilote qu'un index d'image.
   La boîte .beer__stage = LE VERRE SEUL : son bord bas est le point de contact
   (le sous-bock), c'est donc lui qu'on pose sur le plateau du comptoir via
   `bottom`. Le canvas déborde plus bas (--reflect) pour loger le reflet dans
   le bois verni, sans décaler ce point de contact. */
/* Taille pilotée par la HAUTEUR de la fenêtre, pas la largeur : c'est elle qui
   contraint la scène (il faut garder au-dessus du verre la bande où la canette
   verse, puis où le titre s'écrit). En vw, un écran large et court donnait un
   verre qui mangeait toute la hauteur. */
.beer__stage {
  --reflect: 22%; /* hauteur du reflet, en % de la hauteur du verre */
  position: absolute;
  left: 50%;
  bottom: 7%; /* ← cale le pied du verre sur le plateau du comptoir */
  transform: translateX(-50%);
  z-index: 1;
  height: clamp(255px, 53.5svh, 595px);
  aspect-ratio: 700 / 1193;
}
.beer__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--reflect));
}

/* LA canette : celle du hero, qui descend jusqu'au verre et le remplit.
   Fixe dans la fenêtre, entièrement positionnée par main.js (transform).
   transform-origin sur le GOULOT : elle bascule autour de son ouverture, donc
   le bec reste au-dessus du verre pendant que le corps se couche.
   z-index 40 = au-dessus des sections, mais sous le header (50). */
.travel-can {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  transform-origin: 50% 6%;   /* ← le goulot */
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
  will-change: transform, opacity;
}

.beer__body { max-width: 52rem; margin: 0 auto; }
.beer__copy { font-size: 1.1rem; color: var(--chalk-dim); margin-bottom: 3rem; }

.beer__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.spec {
  border: 1px solid rgba(0, 159, 227, .3);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  background: rgba(39, 52, 139, .18);
}
.spec dt {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .5rem;
}
.spec dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  transform: skewX(var(--skew));
}

.beer__notes-title {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.beer__notes ul { list-style: none; }
.beer__notes li {
  padding: .8rem 0;
  border-bottom: 1px solid rgba(244, 246, 255, .12);
  font-size: 1.02rem;
}
.beer__notes li::before { content: "— "; color: var(--yellow); }

/* ============ notre histoire ============ */

.story { max-width: 76rem; margin: 0 auto; }

.story__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin: 2.8rem 0 clamp(2rem, 5vw, 3.6rem);
}
.story__text p { color: var(--chalk-dim); margin-bottom: 1.2rem; }
.story__lead {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  color: var(--chalk) !important;
  line-height: 1.5;
}
/* la bascule du récit : c'est LA phrase de la marque, elle se détache */
.story__punch {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  text-transform: uppercase;
  transform: skewX(var(--skew));
  color: var(--yellow) !important;
  margin: 1.8rem 0 1.6rem !important;
  line-height: 1;
}

/* Les photos gardent leurs couleurs : ce sont les seules vraies images des
   deux frères, le duotone de la DA les aurait rendues anonymes. */
.story__hero { position: relative; }
.story__hero img {
  width: 100%;
  /* height:auto est indispensable : les attributs width/height du HTML (posés
     pour réserver la place et éviter que la page saute au chargement) valent
     une hauteur CSS, qui sinon écrase aspect-ratio — la photo s'affichait alors
     à sa hauteur d'origine. */
  height: auto;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* ligne de court : le rappel padel, discret, sur la photo de brasserie */
.story__hero::after {
  content: "";
  position: absolute;
  left: -10px; bottom: -10px;
  width: 42%; height: 3px;
  background: var(--yellow);
  border-radius: 2px;
}

/* Seconde photo « ensemble » : bande large sous le récit. La source ne fait que
   720 px — on la cadre en paysage (object-fit cover) pour qu'elle remplisse la
   largeur sans qu'on ait à l'agrandir au-delà de sa netteté. */
.story__solo {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
}
.story__solo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 38%;   /* garde les visages dans le cadre */
  border-radius: var(--radius);
}

/* ============ on se suit ? (réseaux) ============
   Pas de faux posts ni de compteurs : deux cartes réseaux, le lancement assumé
   comme argument. */
.social { background: var(--ink-2); }
.social__inner { max-width: 60rem; margin: 0 auto; }
.social__intro {
  color: var(--chalk-dim);
  max-width: 40rem;
  margin: 1.8rem 0 2.8rem;
}

.social__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.social-card {
  display: grid;
  gap: .8rem;
  align-content: start;
  text-decoration: none;
  color: var(--chalk);
  border: 1px solid rgba(0, 159, 227, .3);
  border-radius: var(--radius);
  background: rgba(39, 52, 139, .18);
  padding: 1.8rem;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.social-card:hover {
  transform: translateY(-6px);
  border-color: var(--yellow);
  background: rgba(39, 52, 139, .3);
}
.social-card__net {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  text-transform: uppercase;
  transform: skewX(var(--skew));
}
.social-card__desc { color: var(--chalk-dim); font-size: .95rem; line-height: 1.5; }
.social-card__cta {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: .3rem;
}
.social-card:hover .social-card__cta { color: var(--yellow); }

/* ============ contact ============ */

/* Section pleine largeur : la photo « je porte le carton » en fond, déjà passée
   en duotone bleu à l'export (contact-bg.webp). Le voile (::before) garantit la
   lisibilité du formulaire par-dessus — la photo reste une ambiance. */
.contact {
  position: relative;
  isolation: isolate;
  /* position verticale à 70% : remonte le carton pour qu'il soit entièrement
     lisible au-dessus du champ email, plutôt que coupé derrière lui */
  background: var(--ink-2) url("../assets/contact-bg.webp") 50% 70% / cover no-repeat;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 13, 43, .86) 0%, rgba(11, 13, 43, .6) 42%, rgba(11, 13, 43, .84) 100%),
    radial-gradient(ellipse 90% 70% at 30% 40%, transparent, rgba(11, 13, 43, .45));
}
.contact__inner { max-width: 46rem; margin: 0 auto; }
.contact__intro { color: var(--chalk-dim); margin: 1.8rem 0 2.6rem; }

.contact__form { display: grid; gap: 1.3rem; }
.contact__form label {
  display: grid;
  gap: .45rem;
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cyan);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }

.contact__form :is(input, select, textarea) {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--chalk);
  /* posé sur la photo de fond : fond plus dense qu'ailleurs pour rester net */
  background: rgba(9, 12, 38, .72);
  border: 1px solid rgba(0, 159, 227, .45);
  border-radius: 8px;
  padding: .9rem 1rem;
  transition: border-color .2s ease;
}
.contact__form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--cyan);
}
.contact__form textarea { resize: vertical; }
.contact__form .btn { justify-self: start; }

.hp { position: absolute; left: -9999px; }

/* ============ footer ============ */

.site-footer {
  background: #070818;
  border-top: 1px solid rgba(0, 159, 227, .25);
  padding: 3.4rem var(--pad-x) 2rem;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.6rem;
}
.brand-mark--footer { font-size: 2.2rem; }
.site-footer__tag {
  font-family: var(--font-mono);
  font-weight: var(--mono-weight);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.site-footer__top nav { display: grid; gap: .6rem; }
.site-footer__top nav a {
  color: var(--chalk-dim);
  text-decoration: none;
  font-size: .95rem;
}
.site-footer__top nav a:hover { color: var(--cyan); }

.site-footer__health {
  font-size: .85rem;
  color: var(--chalk);
  border: 1px solid rgba(244, 246, 255, .25);
  border-radius: 8px;
  padding: .8rem 1.2rem;
  margin-bottom: 1.6rem;
}
.site-footer__legal { font-size: .8rem; color: var(--chalk-dim); }
.site-footer__legal a { color: var(--cyan); }

/* ============ responsive ============ */

@media (max-width: 760px) {
  .site-header__nav { display: none; }
  /* une colonne : la photo garde une taille confortable */
  .story__grid { grid-template-columns: 1fr; }
  /* en portrait mobile, un paysage 16:9 devient une bande trop fine : on
     revient à un cadrage plus carré pour la seconde photo */
  .story__solo img { aspect-ratio: 4 / 3; }
  .form-row { grid-template-columns: 1fr; }
  .social__links { grid-template-columns: 1fr; }
  .beer__moment { min-height: 410vh; }
  /* Le verre peut prendre plus de hauteur en mobile : la fenêtre est étroite
     mais haute, et le titre y tient sur moins de largeur. */
  .beer__stage { height: clamp(238px, 46.75svh, 476px); }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-word { animation: none; opacity: 1; }
  .hero__can { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero__can-shadow { animation: none !important; opacity: 1 !important; }
}