/* =========================================================
   Le Garam Garam · Reel landing
   Editorial · scroll-snap · vidéo plein écran
   ========================================================= */

/* =========================================================
   FONTS · Règles brand simplifiées (lisibilité)
   - Logo : Halden Solid (intégré au SVG, jamais en texte web)
   - Tout le site : Merriweather (--serif) + Vujahday Script (--script)
   - Exceptions ciblées en North Pole Rough (--rough) :
        · chiffres 01-04 de La Famille
        · baseline brand sous le logo home (INDIAN CUISINE & BAR)
   ========================================================= */
/* North Pole Rough = police "artistique" brand pour les sous-titres / accents :
   - chiffres 01..04 de La Famille
   - baseline brand sous le logo home
   - labels d'accent : eyebrow, calendar__label, family__eyebrow
   - menu / header (frame) */
.family__num,
.slide__baseline-text,
.eyebrow,
.calendar__label,
.family__eyebrow,
.frame__brand,
.frame__center,
.frame__loc {
  font-family: var(--rough) !important;
}

/* =========================================================
   FONTS BRAND · self-hosted (assets/fonts/)
   Conformes au brand book Garam Garam.
   ========================================================= */

/* Halden Solid · logotype + grands titres (Police principale DA) */
@font-face {
  font-family: 'Halden Solid';
  src: url('assets/fonts/Halden-Solid.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* North Pole Rough · titres secondaires, citations (Police secondaire DA) */
@font-face {
  font-family: 'North Pole Rough';
  src: url('assets/fonts/NorthPoleRough.woff2') format('woff2'),
       url('assets/fonts/NorthPoleRough.woff')  format('woff'),
       url('assets/fonts/NorthPoleRough.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Merriweather Sans · texte courant, titres, chapeaux (Police d'accompagnement DA) */
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Palette officielle Garam Garam (DA brand book) ---- */
  --bg:         #f4f2ef;       /* BEIGE IVOIRE (RAL 9001 Blanc Crème) */
  --bg-deep:    #9e7d63;       /* alias BEIGE CUMIN, utilisable à faible opacité */
  --bg-dark:    #120f0c;       /* NOIR BLACK (RAL 9017) · fond derrière les vidéos */
  --ink:        #120f0c;       /* NOIR BLACK */
  --ink-soft:   #C95D18;       /* MARRON / ORANGE CURRY brand · pour textes accent */
  --ink-mute:   #9e7d63;       /* BEIGE CUMIN (RAL 1011 Beige Brun) */
  --rule:       rgba(18, 15, 12, 0.16);
  --accent:     #C95D18;       /* ORANGE CURRY brand */
  --yellow:     #FCCF3F;       /* JAUNE brand */
  --brown:      #C95D18;       /* alias ORANGE CURRY brand */
  --stroke:     #3C2413;       /* MARRON très foncé brand · contour gros titres */
  --cumin:      #9e7d63;       /* alias BEIGE CUMIN */
  --light:      #f4f2ef;       /* alias BEIGE IVOIRE · la "lumière" la plus claire de la palette */

  /* ---- Stack typographique strict brand ----
     ⚠️ Halden Solid + North Pole Rough sont commerciales : il faut leurs fichiers.
     Les déposer dans /assets/fonts/ et @font-face plus bas pour activation.
     Tant que les fichiers ne sont pas là le navigateur fallback en système. */
  --display:   'Halden Solid', serif;             /* logotype + grands titres */
  --rough:     'North Pole Rough', sans-serif;    /* titres secondaires, citations */
  --serif:     'Merriweather Sans', sans-serif;   /* texte courant, titres, chapeaux */
  --script:    'Vujahday Script', cursive;        /* punchline · Google Fonts ✓ */

  --gutter:    clamp(24px, 5vw, 72px);
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* iOS : pas de flash bleu au tap */
  -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
  /* iOS Safari : empêche le bounce du body / overscroll global */
  overscroll-behavior: none;
}
body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verrouille le body pour qu'il ne bouge jamais (iOS) */
  position: fixed;
  inset: 0;
  width: 100%;
}
img, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; font-weight: 300; }

/* Utility · contenu accessible uniquement aux lecteurs d'écran + SEO crawlers
   (h1 invisible visuellement mais présent pour la sémantique) */
.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;
}

/* A11y : focus visible global pour clavier (kbd users)
   Utilise :focus-visible pour ne PAS afficher sur clic souris (UX propre)
   tout en restant visible sur Tab/Shift+Tab. */
:focus-visible {
  outline: 2px solid #FCCF3F;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Pour les inputs qui ont deja leur propre focus state, evite la double bordure */
.form__input:focus-visible {
  outline: none;
}

/* =========================================================
   FRAME (top header) · logo + baseline + location
   Logo en couleurs brand, texte avec text-shadow pour lisibilité
   ========================================================= */
.frame {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--gutter);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light);
  text-shadow: 0 1px 12px rgba(18, 15, 12, 0.55), 0 0 22px rgba(18, 15, 12, 0.25);
  pointer-events: none;
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
/* Slide contact (fond clair) : encre foncée */
.frame--dark {
  color: var(--ink);
  text-shadow: none;
}
/* Compat: ancienne classe frame--solid → identique au défaut */
.frame--solid {
  color: var(--light);
  text-shadow: 0 1px 12px rgba(18, 15, 12, 0.55), 0 0 22px rgba(18, 15, 12, 0.25);
}
.frame__brand {
  justify-self: start;
  font-weight: 400;
  opacity: 0.9;
  /* Lien cliquable · annule le pointer-events: none hérité du .frame */
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .frame__brand:hover {
    opacity: 1;
    transform: translateY(-1px);
  }
}
.frame__center {
  justify-self: center;
  font-weight: 400;
  opacity: 0.9;
}
.frame__loc {
  justify-self: end;
  font-weight: 400;
  opacity: 0.9;
}

@media (max-width: 880px) {
  .frame {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    padding: 14px var(--gutter);
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .frame__center { display: none; }
  .frame__loc { justify-self: end; opacity: 0.8; }
}

/* =========================================================
   INTRO SPLASH · logo seul + zoom cartoon, < 3s
   ========================================================= */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #C95D18; /* MARRON BROWN brand · fond de départ */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* Voile chaud · orange curry + jaune au centre pour mettre le logo en valeur */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(252, 206, 60, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(201, 92, 22, 0.18) 0%, transparent 65%);
  animation: splashOut 2500ms linear forwards;
  will-change: opacity, visibility, background-color;
}
/* Chakra splash · SVG inline, 3 couches qui apparaissent dans l'ordre :
   1. Cercle orange (fond)
   2. Cercle jaune dentelé
   3. Rayons soleil + détails au centre */
.intro-splash__svg {
  width: clamp(200px, 40vh, 360px);
  height: auto;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.4));
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: splashFlow 2500ms cubic-bezier(0.55, 0, 0.7, 1) forwards;
}
/* Splash simplifié sur mobile : pas de rotation, scale plus contenu, moins
   de stress GPU sur les téléphones d'entrée de gamme */
@media (max-width: 720px) {
  .intro-splash__svg {
    width: clamp(180px, 50vw, 240px);
    animation: splashFlowMobile 2200ms cubic-bezier(0.55, 0, 0.7, 1) forwards;
  }
  @keyframes splashFlowMobile {
    0%   { transform: scale(0.8); opacity: 0; }
    20%  { transform: scale(1);   opacity: 1; }
    80%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(3);   opacity: 0; }
  }
}
@keyframes splashFlow {
  /* Phase 1 (0-68%) : tour complet pendant la construction des couches
     Phase 2 (68-92%) : zoom (6×) · le bg matché + clip saturent l'écran d'orange
     Phase 3 (92-100%) : fondu d'opacité, on entre dans le site
     scale réduit à 6× (vs 10×) pour soulager le GPU mobile / vieux navigateurs */
  0%   { transform: translateZ(0) rotate(0deg)   scale(1); opacity: 1; }
  68%  { transform: translateZ(0) rotate(360deg) scale(1); opacity: 1; }
  92%  { transform: translateZ(0) rotate(380deg) scale(6); opacity: 1; }
  100% { transform: translateZ(0) rotate(385deg) scale(7); opacity: 0; }
}
/* Apparition des couches uniquement par opacity = jamais janky.
   Pas de transform-box: fill-box (reflow par frame coûteux sur SVG <g>). */
.splash-l1, .splash-l2, .splash-l3 {
  opacity: 0;
  will-change: opacity;
}
.splash-l1 { animation: splashFade 0.45s ease-out 0s    forwards; }
.splash-l2 { animation: splashFade 0.45s ease-out 0.42s forwards; }
.splash-l3 { animation: splashFade 0.5s  ease-out 0.9s  forwards; }
@keyframes splashFade {
  to { opacity: 1; }
}
@keyframes splashOut {
  /* Hold opaque pendant la construction.
     De 68% à 92% : le fond marron foncé migre vers l'orange du centre du chakra,
     pour qu'à 92% l'écran soit entièrement marron uni quand le zoom est au max.
     De 92% à 100% : fondu uniforme vers le site. */
  /* Tout en MARRON BROWN brand uni · pas de transition de couleur, juste opacité */
  0%   { background-color: #C95D18; opacity: 1; visibility: visible; }
  92%  { background-color: #C95D18; opacity: 1; }
  100% { background-color: #C95D18; opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Une fois marqué "done" par le JS : retiré du flow */
.intro-splash.is-done {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .intro-splash { display: none; }
}

/* =========================================================
   REEL (scroll-snap container)
   ========================================================= */
.reel {
  height: 100vh;            /* Fallback Safari < 15.4 */
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Bloque rubber-band iOS / scroll-chain / overscroll en haut et en bas */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}
.reel::-webkit-scrollbar { display: none; }
.reel { scrollbar-width: none; }

/* Pendant l'animation JS (snapTo), on coupe le scroll-snap CSS pour eviter
   que Chrome force un re-snap mid-animation. Sans ca, le smooth-scroll JS
   et le snap-mandatory CSS se battent et on voit un jump a chaque slide.
   Firefox tolere la bagarre, Chrome non. */
.reel.is-animating {
  scroll-snap-type: none;
}
.reel.is-animating .slide {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.slide {
  position: relative;
  width: 100%;
  height: 100vh;            /* Fallback Safari < 15.4 */
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--bg-dark);
  /* Perf scroll : containerize les repaints sans skip le rendu.
     content-visibility: auto + contain-intrinsic-size causait un saut
     visible à chaque slide qui entrait dans le viewport (placeholder
     remplacé par contenu réel = repaint brusque). On garde uniquement
     contain qui n'a pas d'effet de bord visuel. */
  contain: layout style paint;
}

/* Vidéo plein écran */
.slide__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: contrast(1.04) saturate(0.92);
  pointer-events: none;
}
/* CRITIQUE cross-browser : quand l'autoplay est bloqué (Mode Eco iOS, data
   saver, connexion lente), iOS/WebKit affiche un GROS bouton play au centre
   de la vidéo · très moche. On masque tous les contrôles natifs : il ne reste
   alors que le poster (image fixe nette), jamais de bouton play figé.
   La vidéo joue quand elle peut, sinon le poster tient lieu de fond. */
.slide__video::-webkit-media-controls,
.slide__video::-webkit-media-controls-enclosure,
.slide__video::-webkit-media-controls-panel,
.slide__video::-webkit-media-controls-play-button,
.slide__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Zoom + recadrage pour masquer un watermark coin bas-droit */
.slide__video--zoom {
  transform: scale(1.32) translate(-5%, -7%);
  transform-origin: center;
}
/* Slide intro : vidéo source propre (Pexels salle à manger), pas de watermark
   à cacher, object-fit: cover (hérité de .slide__video) suffit. */
/* Slide contact (Avant-première) : scale + origin top pour le watermark VEO */
#contact .slide__video {
  transform: scale(1.15);
  transform-origin: center top;
}

/* Voile pour la lisibilité du caption · uniforme dense pour faire ressortir le logo */
.slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(18, 15, 12, 0.55) 0%,
      rgba(18, 15, 12, 0.55) 50%,
      rgba(18, 15, 12, 0.75) 100%);
  pointer-events: none;
}
/* Slide intro : la vidéo salle de resto est déjà naturellement sombre,
   on allège le voile pour la laisser respirer */
#intro .slide__overlay {
  background:
    linear-gradient(180deg,
      rgba(18, 15, 12, 0.30) 0%,
      rgba(18, 15, 12, 0.25) 50%,
      rgba(18, 15, 12, 0.55) 100%);
}

/* Caption · flush-left, bas */
.slide__caption {
  position: absolute;
  z-index: 3;
  bottom: clamp(56px, 10vh, 120px);
  left: var(--gutter);
  right: var(--gutter);
  color: var(--light);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  animation: captionIn 1.2s 0.2s var(--ease) both;
}

/* Intro : logo + baseline + calendrier empilés et centrés horizontalement,
   composition vertical-center avec une légère descente (padding-top > padding-bottom) */
#intro .slide__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(22px, 3vw, 38px);
  padding: clamp(140px, 19vh, 220px) var(--gutter) clamp(80px, 11vh, 130px);
}
#intro .slide__title {
  margin-left: 0;
}

/* Logo principal sur la slide intro · SVG inline directement dans le HTML
   → pas d'URL .svg dans le Network tab, pas de "Save image as", pas de drag,
   pas de menu long-press iOS. */
.intro-logo {
  width: clamp(380px, 56vw, 720px);
  display: block;
  margin: 0;
  filter: drop-shadow(0 8px 32px rgba(18, 15, 12, 0.5));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.intro-logo__svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .intro-logo {
    width: clamp(280px, 80vw, 420px);
  }
}

.calendar-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: center;
  margin-left: 0;
}
.calendar__label {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--light);
  opacity: 0.75;
}
@keyframes captionIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.slide__title {
  font-family: var(--serif);       /* Merriweather Sans ExtraBold · police principale web */
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--light);                     /* Blanc · propre, sans contour */
  text-shadow: 0 2px 18px rgba(18, 15, 12, 0.55), 0 0 36px rgba(18, 15, 12, 0.25);
}
.slide__title em {
  font-family: var(--script);       /* Vujahday Script pour les emphases */
  font-style: italic;
  font-weight: 400;
  font-size: 0.92em;
  color: var(--yellow);             /* JAUNE YELLOW de la brand */
  text-transform: none;
  letter-spacing: 0;
}
.slide__title--lead {
  font-weight: 400;
}
/* Le "." final des gros titres est remplacé par la roue chakra brand ·
   taille de ponctuation : juste un point final, pas un emblème */
.slide__title-mark {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  background: url('assets/garamgaram-wheel.svg') center/contain no-repeat;
  vertical-align: -0.01em;     /* assis sur la baseline comme un vrai point final */
  margin-left: 0.05em;
  /* Cache le caractère "." qui reste dans le HTML (push off-screen, em-sizing préservé) */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  /* Légère ombre pour subtilement détacher de l'arrière-plan */
  filter: drop-shadow(0 1px 3px rgba(18, 15, 12, 0.4));
  /* Rotation continue, lente et fluide */
  animation: chakraSpin 12s linear infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes chakraSpin {
  to { transform: rotate(360deg); }
}
/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .slide__title-mark { animation: none; }
}

/* Baseline brand de la charte
   Layout (vertical) :
   1) INDIAN CUISINE & BAR  (texte en haut)
   2) ─────────────────     (longue ligne sous le texte, même largeur)
   3) गरम                   (Sanskrit aligné gauche dessous) */
.slide__baseline {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;          /* enfants prennent la largeur du conteneur */
  gap: clamp(4px, 0.6vw, 8px);
  text-shadow: 0 1px 8px rgba(18, 15, 12, 0.55);
}
.slide__baseline-text {
  font-family: var(--rough);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FCCF3F;
  text-align: center;
  padding-left: 0.32em;          /* compense le tracking droit */
}
.slide__baseline-rule {
  display: block;
  width: 100%;                   /* longue ligne = pleine largeur du texte */
  height: 1.5px;
  background: #FCCF3F;
  opacity: 0.95;
}
.slide__baseline-script {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: 0.05em;
  color: #FCCF3F;
  align-self: flex-start;        /* aligné à GAUCHE comme dans la charte */
  margin-left: -0.05em;
  line-height: 1;
}
@media (max-width: 720px) {
  .slide__baseline-text {
    font-size: 0.86rem;
    letter-spacing: 0.26em;
  }
  .slide__baseline-script { font-size: 1rem; }
}

/* =========================================================
   CALENDAR · cubes qui se remplissent jour après jour
   ========================================================= */
/* Flexbox nowrap = 1 ligne strictement garantie quel que soit le nombre de cubes */
.calendar {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(3px, 0.35vw, 5px);
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: clamp(280px, 35vw, 480px);
}
.cube {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid rgba(244, 242, 239, 0.28);
  border-radius: 2px;
  animation: cubeWave 2.4s ease-in-out infinite;
}
@keyframes cubeWave {
  0%, 80%, 100% {
    background: transparent;
    border-color: rgba(244, 242, 239, 0.22);
  }
  14% {
    background: rgba(244, 242, 239, 0.10);
    border-color: rgba(244, 242, 239, 0.5);
  }
}

/* Cubes "passés" : même respiration, mais en accent marron */
.cube--filled {
  background: var(--accent);
  border-color: var(--accent);
  animation: cubeWaveFilled 2.4s ease-in-out infinite;
}
@keyframes cubeWaveFilled {
  0%, 80%, 100% {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.92;
  }
  14% {
    background: #FCCF3F;
    border-color: #FCCF3F;
    opacity: 1;
  }
}

/* =========================================================
   CONTACT slide · vidéo en fond + voile noir pour faire ressortir le form
   ========================================================= */
.slide--contact {
  background: var(--bg-dark);         /* fallback si la vidéo ne charge pas */
  display: grid;
  align-items: center;
  padding: clamp(60px, 10vh, 120px) 0;
  position: relative;
}
/* Voile noir profond · la vidéo soirée passe en mood, le form pop */
.slide__overlay--dark {
  background: linear-gradient(
    180deg,
    rgba(18, 15, 12, 0.78) 0%,
    rgba(18, 15, 12, 0.72) 50%,
    rgba(18, 15, 12, 0.84) 100%
  );
}
.slide--contact .slide__caption {
  z-index: 4;
}
.slide--contact .slide__caption {
  position: static;
  color: var(--ink);
}
.slide--contact .slide__title {
  color: var(--ink);
}
.slide--contact .slide__sub {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  opacity: 1;
  max-width: 480px;
  margin-bottom: 32px;
}
.slide__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Subtile carte glassy sur fond vidéo sombre · donne de la présence sans casser la sobriété */
  padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 44px) clamp(24px, 3.5vh, 36px);
  background: rgba(244, 242, 239, 0.04);
  border: 1px solid rgba(244, 242, 239, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   FORM · états chargement + spinner
   (le styling visuel des inputs/boutons est plus bas, dans la slide contact)
   ========================================================= */
.form__btn:disabled,
.form__btn.is-loading {
  cursor: progress;
  pointer-events: none;
}
.form__btn-spinner { display: none; }
.form__btn.is-loading .form__btn-text,
.form__btn.is-loading .form__btn-arrow {
  visibility: hidden;
  opacity: 0;
}
.form__btn.is-loading .form__btn-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: var(--ink);
}
.form__btn.is-loading .form__btn-spinner svg {
  animation: btnSpin 0.85s linear infinite;
  transform-origin: center;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   SLIDE CONTACT · formulaire d'invitation, fond clair
   ========================================================= */
.slide--contact .slide__caption {
  position: absolute;
  inset: 0;
  padding: clamp(110px, 14vh, 160px) var(--gutter) clamp(56px, 9vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(28px, 4vh, 48px);
}
.slide--contact .slide__title {
  color: var(--light);                 /* Blanc · fond noir */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  -webkit-text-stroke: 0;
  font-size: clamp(2.2rem, 7.2vw, 5.6rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.025em;
  white-space: nowrap;                 /* "Soirée d'ouverture." sur 1 ligne */
}
/* Titre long de la section Avant-première : doit wrapper (sinon overflow
   horizontal) et rester à une taille lisible au-dessus du formulaire. */
.slide--contact .slide__title--contact {
  white-space: normal;
  font-size: clamp(1.7rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  max-width: 16ch;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .slide--contact .slide__title {
    font-size: clamp(1.7rem, 8.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: normal;              /* wrap sur mobile si trop long */
  }
  .slide--contact .slide__title--contact {
    font-size: clamp(1.45rem, 6.4vw, 2rem);
    line-height: 1.1;
    max-width: 18ch;
  }
}

.slide--contact .slide__meta {
  max-width: 520px;
  align-self: end;
}

/* Intro · italic clair sous le titre */
.contact__intro {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: rgba(244, 242, 239, 0.88);
  max-width: 460px;
  margin: 0 0 14px;
  text-align: center;
}

/* Counter · bigger, accent jaune chakra dominant */
.contact__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 239, 0.7);
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(244, 242, 239, 0.14);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.contact__counter.is-loaded { opacity: 1; }
.contact__counter-current {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FCCF3F;                  /* JAUNE chakra brand */
  font-feature-settings: 'tnum';
}
.contact__counter-sep {
  font-size: 1.3rem;
  color: rgba(244, 242, 239, 0.35);
  margin: 0 2px;
}
.contact__counter-cap {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(244, 242, 239, 0.78);
  font-feature-settings: 'tnum';
}
.contact__counter-label {
  margin-left: 8px;
  opacity: 0.7;
}

/* ---------- Form · sobre, simple, sur fond sombre ---------- */
.form { width: 100%; max-width: 460px; }
.form__hide { display: none !important; }

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
/* Inputs : underline net + accent jaune au focus */
.form__input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(244, 242, 239, 0.42);
  outline: none;
  padding: 12px 2px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--light);
  border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.form__input--full {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.form__input::placeholder {
  color: rgba(244, 242, 239, 0.6);
  font-weight: 400;
}
.form__input:hover {
  border-bottom-color: rgba(244, 242, 239, 0.7);
}
.form__input:focus {
  border-bottom-color: #FCCF3F;
  border-bottom-width: 2px;
}

/* Checkbox custom · sobre sur fond sombre */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 0.74rem;
  color: rgba(244, 242, 239, 0.58);
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
}
.form__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.2px solid rgba(244, 242, 239, 0.45);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form__consent input[type="checkbox"]:hover {
  border-color: #FCCF3F;
}
.form__consent input[type="checkbox"]:checked {
  background: #FCCF3F;
  border-color: #FCCF3F;
}
.form__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7l3 3 5-6' stroke='%23120F0C' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* État "liste complète" : form désactivé visuellement + message d'alerte */
.form.is-full .form__btn {
  background: rgba(244, 242, 239, 0.15);
  color: rgba(244, 242, 239, 0.5);
  box-shadow: none;
  cursor: not-allowed;
}
.form.is-full .form__input {
  opacity: 0.4;
  pointer-events: none;
}
.form.is-full .form__consent {
  opacity: 0.4;
  pointer-events: none;
}
.form__full {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(252, 207, 63, 0.4);
  border-radius: 8px;
  background: rgba(252, 207, 63, 0.08);
  font-family: var(--serif);
  font-size: 0.84rem;
  line-height: 1.45;
  color: #FCCF3F;
  text-align: center;
}
.form__full strong { font-weight: 700; }
.form__full[hidden] { display: none; }

/* Bouton CTA · pill jaune chakra sur fond sombre, contraste max */
.form__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #FCCF3F;                 /* JAUNE chakra brand */
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 16px 34px;
  font: inherit;
  font-family: var(--rough);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 28px -10px rgba(245, 208, 94, 0.5);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .form__btn:hover {
    background: var(--light);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgba(244, 242, 239, 0.4);
  }
}

.form__success {
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(18, 15, 12, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form__success strong {
  font-weight: 600;
  font-size: 1.05rem;
}

/* =========================================================
   SLIDE FAMILLE · fond sombre, lettre éditoriale
   ========================================================= */
.slide--family {
  background: var(--bg-dark);
  color: var(--bg);
}
/* La slide famille réserve la hauteur du credit footer dans son padding bas,
   pour qu'il y ait toujours un écart visible entre le contenu (table des
   restaurants) et le bandeau "by Mont Blanc Web · Mentions légales · …" */
:root { --credit-h: 38px; }
@media (max-width: 720px) { :root { --credit-h: 44px; } }

.slide--family .slide__caption {
  position: absolute;
  top: clamp(96px, 13vh, 140px);
  bottom: calc(clamp(48px, 8vh, 96px) + var(--credit-h));
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: stretch;
}

.family__head {
  display: flex;
  flex-direction: column;
}
.slide--family .slide__title {
  color: var(--light);                     /* Blanc, sans contour */
  font-size: clamp(2rem, 5.5vw, 4.6rem);
  line-height: 0.92;
  margin: 0 0 clamp(20px, 3vw, 32px);
  margin-left: -0.02em;
}
.slide--family .slide__title em {
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;                  /* "exigence" agrandi pour pop */
  line-height: 0.85;
  color: var(--yellow);              /* jaune brand FCCF3F */
  display: inline-block;
  vertical-align: -0.12em;           /* compense la baseline du script */
}

.family__eyebrow {
  font-family: var(--serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.family__intro {
  font-family: var(--serif);          /* Merriweather */
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: rgba(244, 242, 239, 0.7);
  max-width: 540px;
  margin: 0 0 clamp(36px, 5vh, 56px);
}

/* Badge "Lauréat Réseau Entreprendre Savoie" · pastille crème (le logo a du
   texte foncé, illisible sur le fond sombre du slide) · cliquable vers RE Savoie */
.family__laureat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;             /* ne s'étire pas sur toute la colonne */
  padding: 9px 15px;
  background: var(--light);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.family__laureat-tag {
  font-family: var(--rough);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.family__laureat img {
  height: 34px;
  width: auto;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .family__laureat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  }
}
.family__laureat:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.family__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(244, 242, 239, 0.12);
  /* Inset par rapport au bord du slide */
  padding: 0 clamp(10px, 2vw, 20px) clamp(28px, 4vh, 48px);
}
.family__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  /* Padding mesuré : assez d'air, mais la liste (4 lignes + logos) doit tenir
     dans la hauteur réservée du slide sans chevaucher le footer sur les écrans
     d'ordinateur portable (hauteur ~900px). */
  padding: clamp(16px, 2.2vh, 26px) clamp(22px, 4vw, 40px);
  border-bottom: 1px solid rgba(244, 242, 239, 0.12);
  border-radius: 4px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .family__row:hover {
    transform: translateX(6px);
    background: linear-gradient(90deg, rgba(201, 92, 22, 0.06), transparent 60%);
  }
}

.family__num {
  font-family: var(--rough);            /* North Pole Rough · la 2e police brand */
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent);
  min-width: 56px;
  font-feature-settings: 'tnum';
}
/* Logo de chaque maison (remplace le numéro) · boîte de taille uniforme,
   chaque logo contenu dedans quelle que soit sa forme (R24 uniformité). */
.family__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(74px, 8vw, 104px);
  height: clamp(44px, 5vw, 56px);
  flex-shrink: 0;
}
.family__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.family__name {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.family__brand {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--bg);
}
.family__brand em {
  font-style: italic;
  font-weight: 300;
  color: rgba(244, 242, 239, 0.65);
}
/* Localisation (ville · quartier) · boost SEO local */
.family__loc {
  font-family: var(--rough);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}
.family__row--current .family__loc {
  color: var(--yellow);
}
.family__desc {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(244, 242, 239, 0.5);
  line-height: 1.4;
  margin-top: 4px;
}
.family__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bg);
  white-space: nowrap;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.family__link .arr {
  font-size: 1em;
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .family__link:hover {
    color: var(--accent);
    gap: 16px;
  }
  .family__link:hover .arr {
    transform: translateX(2px);
  }
}

/* 4e entrée : on est déjà sur cette page, pas cliquable */
.family__row--current {
  background: linear-gradient(90deg, rgba(201, 92, 22, 0.08), transparent 70%);
}
.family__row--current:hover {
  transform: none;
  background: linear-gradient(90deg, rgba(201, 92, 22, 0.08), transparent 70%);
}
.family__row--current .family__num,
.family__row--current .family__brand {
  color: var(--accent);
}
.family__link--current {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  cursor: default;
  opacity: 0.85;
}

/* Mobile : épure (intro masquée), plus aéré, typo plus grosse */
@media (max-width: 720px) {
  /* Mobile famille : fixed 100svh, overflow hidden, contenu compacté pour fit */
  .slide--family {
    height: 100vh;            /* Fallback Safari < 15.4 */
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }
  .slide--family .slide__caption {
    position: absolute;
    inset: 0;
    /* Padding bottom : laisse la place au badge Laureat absolu
       (var(--credit-h) 44px + offset 12px + hauteur badge ~36px + 28px de respiration)
       = 120px minimum, plus safe-area pour les iPhone notch. */
    padding: clamp(64px, 9vh, 90px) var(--gutter) calc(120px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    overflow: hidden;
  }
  .slide--family .family__list { padding-bottom: 0; padding-top: 0; }
  .slide--family .slide__title {
    font-size: clamp(2.2rem, 10.5vw, 3.4rem);
  }
  .family__eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    margin-bottom: 14px;
  }
  /* Intro masquée sur mobile : le titre et la liste portent assez le message */
  .family__intro { display: none; }

  /* ===== Mobile famille : compact pour fit en 100svh ===== */
  /* Réduction du titre pour libérer de l'espace */
  .slide--family .slide__title {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem);
    margin-bottom: 0;
  }
  .family__eyebrow {
    margin-bottom: 10px;
  }
  /* La liste prend tout l'espace restant et se distribue */
  .family__list {
    flex: 1;
    justify-content: space-around;
    padding: 0 clamp(8px, 1.6vw, 16px);
    margin-top: 14px;
  }
  .family__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 4px;
  }
  /* Numéro : compact, à gauche, accent · North Pole Rough */
  .family__num {
    display: block;
    font-family: var(--rough);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--accent);
    min-width: 28px;
    margin: 0;
    font-feature-settings: 'tnum';
  }
  /* Logo maison · compact sur mobile */
  .family__logo {
    width: 60px;
    height: 38px;
  }
  /* Badge Lauréat sur mobile : sorti du flux et ancré TOUT en bas, juste
     au-dessus du footer crédit (qui fait ~51px), avec un petit gap. Taille
     réduite. Desktop/tablette inchangé. */
  .slide--family .family__laureat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--credit-h) + env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 5px 11px;
    gap: 7px;
    z-index: 3;
  }
  .slide--family .family__laureat img { height: 20px; }
  .slide--family .family__laureat-tag { font-size: 0.46rem; letter-spacing: 0.16em; }
  /* Description : masquée mobile, mais loc visible (SEO + info utile) */
  .family__desc { display: none; }
  .family__loc {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    margin-top: 1px;
  }
  .family__name { display: block; }
  /* Brand : taille équilibrée pour fit 4 entrées */
  .family__brand {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1rem, 4.4vw, 1.3rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--bg);
    margin: 0;
  }
  .family__brand em {
    font-style: italic;
    font-weight: 300;
    color: rgba(244, 242, 239, 0.7);
  }
  /* Lien : à droite, tappable (≥44px), inline avec le brand */
  .family__link,
  .family__link--current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;          /* zone tap mini iOS HIG */
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
  }
  .family__sign {
    font-size: 0.95rem;
    margin-top: 24px;
    align-self: stretch;
    text-align: left;
  }
}

/* =========================================================
   CREDIT · bandeau fin agence en pied de page
   ========================================================= */
.credit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 9px var(--gutter);
  /* Respect du safe-area iOS (home indicator) */
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--serif);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--light);
  mix-blend-mode: difference;
  pointer-events: none;
  /* Inline flow pour multiples liens + séparateurs */
  white-space: nowrap;
  overflow-x: auto;
}
.credit a {
  display: inline;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0.55;
  margin: 0 4px;
  transition: opacity 0.3s var(--ease);
}
.credit a > * { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .credit a:hover { opacity: 1; }
}
.credit__label { opacity: 0.7; margin-right: 6px; }
.credit__sep {
  display: inline;
  opacity: 0.35;
  margin: 0 4px;
}
.credit__brand { font-weight: 600; letter-spacing: 0.22em; }

/* Sur la page /merci : statique, pas fixed */
.credit--static {
  position: static;
  mix-blend-mode: normal;
  color: var(--ink-mute);
  padding: 24px 0 12px;
  border-top: 1px solid rgba(18, 15, 12, 0.08);
  margin-top: 24px;
}

@media (max-width: 720px) {
  .credit {
    font-size: 0.48rem;
    padding: 9px 12px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    letter-spacing: 0.16em;
    mix-blend-mode: normal;
    color: rgba(244, 242, 239, 0.72);
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(18, 15, 12, 0.6) 50%,
      rgba(18, 15, 12, 0.95) 100%
    );
    padding-top: 18px;
    /* Sur mobile : autoriser 2 lignes pour les liens légaux qui débordent */
    white-space: normal;
    overflow-x: visible;
    line-height: 1.6;
  }
  .credit a { margin: 0 3px; }
  .credit__sep { margin: 0 2px; }
  .credit__brand { letter-spacing: 0.14em; font-weight: 700; }
  /* Page merci : le credit static doit rester discret sur le fond clair,
     PAS le dégradé sombre du footer fixe des slides (qui créait une bande
     glitchée en bas de la page merci en mobile Safari). */
  .credit--static {
    background: none;
    color: var(--ink-mute);
    padding: 24px 0 12px;
    text-shadow: none;
    border-top: 1px solid rgba(18, 15, 12, 0.08);
  }
  .credit--static a { opacity: 0.6; }
}
/* Très petits écrans : on raccourcit aussi les libellés via CSS pour gagner de la place */
@media (max-width: 380px) {
  .credit {
    font-size: 0.46rem;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* =========================================================
   PAGER (right side dots)
   ========================================================= */
.pager {
  position: fixed;
  top: 50%;
  right: clamp(14px, 2vw, 28px);
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  mix-blend-mode: difference;
}
.pager__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(244, 242, 239, 0.3);
  border: 1px solid rgba(244, 242, 239, 0.6);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pager__dot:hover { background: rgba(244, 242, 239, 0.6); }
}
.pager__dot.is-active {
  background: var(--light);
  transform: scale(1.4);
}

/* =========================================================
   RESPONSIVE · mobile pass (≤ 880px)
   ========================================================= */
@media (max-width: 880px) {
  :root { --gutter: clamp(20px, 5vw, 32px); }

  /* Intro mobile : on sert une version PORTRAIT dédiée de la vidéo (recadrée
     9:16 depuis la source HD, voir data-mobile-src dans le HTML + swap JS).
     Elle remplit l'écran vertical en object-fit: cover sans bande noire et
     sans le sur-zoom de la version paysage. Rien à forcer ici : le cover par
     défaut suffit puisque la vidéo est déjà au bon format portrait. */

  /* Mobile : scroll-snap natif désactivé pour ne pas bagarrer avec le JS.
     Mon JS handler est l'unique source de vérité du snap → comportement déterministe. */
  .reel { scroll-snap-type: none; }
  .slide {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  /* Pendant le snap, on bloque le scroll user pour qu'il n'interrompe pas l'animation */
  .reel.is-animating {
    pointer-events: none;
    touch-action: none;
  }

  .slide__caption {
    grid-template-columns: 1fr;
    gap: 18px;
    bottom: clamp(56px, 9vh, 90px);
  }

  .slide__title {
    font-size: clamp(2.6rem, 13vw, 4.6rem);
    letter-spacing: -0.025em;
  }

  .slide__sub { max-width: 100%; }

  .form__grid { grid-template-columns: 1fr; gap: 14px; }

  .pager { display: none; }

  /* Calendar : 22 cubes sur une seule ligne, plus serrés sur mobile */
  .calendar {
    gap: 3px;
    max-width: min(100%, 320px);
  }
  .cube {
    aspect-ratio: 1;
  }
  /* Aligné strict avec le bord gauche du titre */
  .calendar-wrap { margin-left: 0; }

  .calendar__label {
    font-size: 0.92rem;
    letter-spacing: 0.22em;
  }

  /* Famille mobile : empile, contenu compact qui rentre sans scroll interne */
  .slide--family .slide__caption {
    grid-template-columns: 1fr;
    top: clamp(70px, 10vh, 100px);
    bottom: clamp(36px, 6vh, 60px);
    gap: 14px;
    overflow: visible;
  }

  /* Contact mobile : 100svh strict, marge top/bottom safe pour ne rien toucher */
  .slide--contact {
    height: 100vh;            /* Fallback Safari < 15.4 */
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: block;
    padding: 0;
    align-items: stretch;
  }
  .slide--contact .slide__caption {
    position: absolute;
    inset: 0;
    grid-template-columns: 1fr;
    padding: 90px var(--gutter) calc(75px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: auto;
    width: 100%;
    max-width: 100%;
    gap: clamp(14px, 2vh, 22px);    /* gap réduit titre ↔ form */
    overflow: hidden;
  }
  /* Carte form compacte sur mobile */
  .slide--contact .slide__meta {
    max-width: 100%;
    padding: 18px 18px 16px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .contact__intro {
    font-size: 0.86rem;
    margin: 0 0 10px;
    line-height: 1.4;
  }
  .contact__counter {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    margin: 0 0 14px;
    padding-bottom: 12px;
    gap: 6px;
  }
  .contact__counter-current {
    font-size: 1.4rem;
  }
  .contact__counter-sep {
    font-size: 0.95rem;
  }
  .contact__counter-cap {
    font-size: 0.85rem;
  }
  .form__grid { gap: 10px; margin-bottom: 8px; }
  .form__input {
    padding: 9px 2px;
    font-size: 0.92rem;
  }
  .form__input--full {
    margin-bottom: 12px;
  }
  .form__btn {
    padding: 12px 22px;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }
  .form__consent {
    font-size: 0.7rem;
    margin-bottom: 14px;
    line-height: 1.35;
  }
  .family__intro {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .family__row {
    padding: 12px 0;
    gap: 12px;
  }
  .family__brand {
    font-size: 1.04rem;
  }
  .family__desc {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .family__num {
    font-size: 0.62rem;
    min-width: 14px;
  }
  .family__link {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
}

/* Petit mobile (<480px) : ajustements supplémentaires */
@media (max-width: 480px) {
  .slide__title { font-size: clamp(2.4rem, 14vw, 3.8rem); }
  .calendar {
    max-width: min(100%, 280px);
  }
  .frame { font-size: 0.62rem; padding: 16px var(--gutter); letter-spacing: 0.14em; }
  .calendar__label { font-size: 0.86rem; letter-spacing: 0.2em; }
  /* Famille très petits écrans : encore plus serré */
  .slide--family .slide__caption { top: 60px; bottom: 30px; }
  .family__intro { font-size: 0.86rem; margin-bottom: 14px; }
  .family__row { padding: 10px 0; }
  .family__brand { font-size: 0.98rem; }
  .family__desc { font-size: 0.74rem; }
}

/* =========================================================
   POPUP d'inscription (apparait après 5s)
   ========================================================= */
.popup {
  position: fixed;
  bottom: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  z-index: 200;
  width: clamp(280px, 92vw, 360px);
  background: var(--bg);
  color: var(--ink);
  padding: 26px 28px 22px;
  border-radius: 6px;
  box-shadow:
    0 30px 70px -10px rgba(18, 15, 12, 0.45),
    0 8px 24px -8px rgba(18, 15, 12, 0.25),
    0 0 0 1px rgba(18, 15, 12, 0.06);
  animation: popupIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  font-family: var(--serif);
}
.popup.is-closing {
  animation: popupOut 0.4s var(--ease) both;
  pointer-events: none;
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes popupOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.popup__close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  border-radius: 50%;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .popup__close:hover {
    background: rgba(18, 15, 12, 0.06);
    color: var(--ink);
  }
}

.popup__eyebrow {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.popup__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
  margin-left: -0.04em;
}
.popup__title-mark {
  color: var(--accent);
}

.popup__sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.popup__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), gap 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .popup__btn:hover {
    background: var(--accent);
    gap: 14px;
  }
}

@media (max-width: 720px) {
  .popup {
    bottom: 14px;
    right: 14px;
    left: 14px;
    width: auto;
    padding: 22px 24px 18px;
  }
  .popup__title { font-size: 1.45rem; }
  .popup__sub { font-size: 0.86rem; margin-bottom: 18px; }
  /* Tap target >= 44 px (R16) : padding vertical bump pour WCAG AA mobile */
  .popup__btn { font-size: 0.62rem; padding: 15px 22px; min-height: 44px; }
}

/* =========================================================
   PAGE /merci · confirmation après soumission
   ========================================================= */
.thanks {
  background: var(--bg);
  height: 100vh;
  overflow: hidden;
}
.thanks .frame {
  mix-blend-mode: normal;
}
.thanks__main {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
}
.thanks__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  animation: captionIn 1.2s 0.1s var(--ease) both;
}
.thanks__eyebrow {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.thanks__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 4vw, 44px);
  margin-left: -0.043em;
}
.thanks__title em {
  font-style: italic;
  font-weight: 300;
}
.thanks__title-mark {
  color: var(--accent);
}
.thanks__sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.thanks__actions { display: flex; gap: 18px; }
.thanks__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 14px 24px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .thanks__back:hover {
    background: var(--ink);
    color: var(--bg);
    gap: 18px;
  }
}
.thanks__footer {
  padding: 0 0 clamp(24px, 4vh, 48px);
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.thanks__footer a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .thanks__footer a:hover { color: var(--accent); }
}

@media (max-width: 720px) {
  .thanks__title { font-size: clamp(2.4rem, 13vw, 4rem); }
  .thanks__sub   { font-size: 0.96rem; }
  .thanks__back  { font-size: 0.66rem; padding: 12px 20px; }
  .thanks__footer{ font-size: 0.66rem; }
}

/* =========================================================
   LEGAL PAGES · mentions légales, politique de confidentialité, règlement
   ========================================================= */
/* Override le body fixed par défaut (intro réel scroll-snap) pour permettre
   un scroll natif standard sur les pages légales. */
html:has(body.legal),
body.legal {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior: auto;
}
body.legal {
  position: static;
  inset: auto;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
}
.legal .frame {
  position: sticky;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-shadow: none;
}
.legal .frame__brand,
.legal .frame__center,
.legal .frame__loc { color: var(--ink); }
.legal__main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 120px) clamp(20px, 5vw, 40px) clamp(60px, 8vh, 100px);
}
.legal__eyebrow {
  font-family: var(--rough);
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.legal__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 clamp(36px, 5vh, 56px);
}
.legal__title-mark {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  background: url('assets/garamgaram-wheel.svg') center/contain no-repeat;
  vertical-align: -0.01em;
  margin-left: 0.05em;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  filter: drop-shadow(0 1px 3px rgba(18, 15, 12, 0.25));
  animation: chakraSpin 12s linear infinite;
  transform-origin: center center;
}
.legal__lead {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 clamp(32px, 5vh, 48px);
  padding-bottom: clamp(24px, 4vh, 36px);
  border-bottom: 1px solid var(--rule);
}
.legal__lead a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__lead a:hover { color: var(--accent); }
.legal__section {
  margin-bottom: clamp(28px, 4vh, 44px);
}
.legal__section h2 {
  font-family: var(--rough);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.legal__section p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.legal__section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.legal__section li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.legal__section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: url('assets/garamgaram-wheel.svg') center/contain no-repeat;
}
.legal__section a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.legal__section a:hover { color: var(--accent); }
.legal__section strong { color: var(--ink); font-weight: 700; }
.legal__back {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--rule);
}
.legal__back a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rough);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease), gap 0.25s var(--ease);
}
.legal__back a:hover { color: var(--accent); gap: 14px; }

/* =========================================================
   FOOTER LÉGAL · discret, sous le reel sur la home
   ========================================================= */
.legal-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: none;            /* masqué par défaut, géré par .reel context */
  pointer-events: none;
}
.legal-footer a {
  pointer-events: auto;
  font-family: var(--rough);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 242, 239, 0.6);
  text-decoration: none;
  margin: 0 6px;
  transition: color 0.2s var(--ease);
}
.legal-footer a:hover { color: rgba(244, 242, 239, 0.95); }
.legal-footer span { color: rgba(244, 242, 239, 0.3); }

/* Lien dans la checkbox de consentement form */
.form__consent-link {
  color: rgba(244, 242, 239, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}
.form__consent-link:hover { color: #FCCF3F; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reel { scroll-snap-type: none; }
  .slide__video { display: none; }
  .slide { background: var(--bg-dark); }
}