/* ========================================
   TOGUNA MOTORS — SITE ÉVÉNEMENT
   Design dérivé du Catalogue (mêmes structures : header, hero, sections,
   panneau de clôture) mais recalé sur l'identité noir + or de la campagne
   d'ouverture du showroom (cf. présentation direction, affichage, teasers).
   Thème unique (sombre) — pas de bascule clair/sombre sur ce site.
======================================== */
:root {
  --bg: #0a0a0a;
  --bg-deep: #000000;
  --surface-rgb: 255, 255, 255;
  --bg-panel: rgba(var(--surface-rgb), 0.04);
  --bg-panel-strong: rgba(var(--surface-rgb), 0.07);
  --border: rgba(var(--surface-rgb), 0.08);
  --border-strong: rgba(var(--surface-rgb), 0.15);
  --header-scrim: rgba(0, 0, 0, 0.8);
  --surface-solid: #0f0f0f;
  --closing-top: #050505;

  /* Accent événement : or/ambre sur noir (identité campagne). */
  --accent: #d4a24a;
  --accent-light: #e8c47c;
  --accent-glow: rgba(212, 162, 74, 0.3);
  /* couleur de texte/icône toujours utilisée sur un fond accent plein */
  --on-accent: #181206;

  --chrome-1: #f2f4f8;
  --chrome-2: #c7cdda;
  --chrome-3: #8891a3;

  --ink: #f3f4f7;
  --ink-soft: #a7adbd;
  --ink-faint: #656b7d;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.65, 0, 0.15, 1);
  --container-w: 1240px;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* surfaces qui changent de fond au bascule de thème : transition douce */
.hero,
.closing-panel {
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 2rem;
}

.d-none {
  display: none !important;
}

/* ========================================
   HEADER
======================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 0;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background-color: var(--header-scrim);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
  padding: 1rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  line-height: 0;
}

.brand-emblem {
  height: 42px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(199, 205, 218, 0.25));
  transition: height 0.4s var(--ease);
}

.site-header.scrolled .brand-emblem {
  height: 34px;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--chrome-1);
  line-height: 1;
}

.brand-word span {
  color: var(--ink-soft);
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-tag {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
}

@media (max-width: 640px) {
  .header-tag {
    display: none;
  }
}

/* ========================================
   HERO
======================================== */
.hero {
  /* Palette dédiée, réglée pour la lisibilité sur la photo plutôt que
     réutiliser telles quelles les teintes de texte génériques du site. */
  --hero-ink: #f7f8fa;
  --hero-ink-soft: #c7cdda;
  --hero-ink-faint: rgba(255, 255, 255, 0.5);
  --hero-accent: #d4a24a;
  --hero-chrome-1: #f2f4f8;
  --hero-chrome-2: #c7cdda;
  --hero-chrome-3: #8891a3;
  --hero-border: rgba(255, 255, 255, 0.14);

  position: relative;
  min-height: 96vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 0 5rem;
  isolation: isolate;
  background: #050505;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/img/hero/hero-bg.jpg");
  background-size: cover;
  background-position: center 42%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 2, 3, 0.94) 0%, rgba(2, 2, 3, 0.65) 42%, rgba(2, 2, 3, 0.15) 70%, transparent 100%),
    linear-gradient(180deg, rgba(2, 2, 3, 0.55) 0%, rgba(2, 2, 3, 0.2) 30%, rgba(2, 2, 3, 0.55) 78%, rgba(2, 2, 3, 0.92) 100%);
}

.hero-inner {
  position: relative;
  max-width: 640px;
  margin-left: 4rem;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hero-accent);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
  margin-bottom: 1.75rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.hero-title span {
  background: linear-gradient(
    115deg,
    var(--hero-chrome-1) 15%,
    var(--hero-chrome-3) 45%,
    var(--hero-chrome-1) 65%,
    var(--hero-chrome-2) 85%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chromeShine 7s linear infinite;
}

@keyframes chromeShine {
  to {
    background-position: -200% center;
  }
}

/* --- Blocs "spec", façon fiche technique --- */
.hero-specs {
  display: flex;
  gap: 1.75rem;
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--hero-border);
  border-bottom: 1px solid var(--hero-border);
}

.hero-spec {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero-spec-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-ink-faint);
}

.hero-spec-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hero-ink);
}

.hero-caption {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--hero-ink-faint);
  max-width: 42ch;
  margin-bottom: 2rem;
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hero-border);
  color: var(--hero-ink-soft);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: bob 2.4s ease-in-out infinite;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.hero-scroll-cue:hover {
  border-color: var(--hero-accent);
  color: var(--hero-chrome-1);
  box-shadow: 0 0 24px rgba(212, 162, 74, 0.3);
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 767.98px) {
  .hero-specs {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  /* Le décalage de 4rem est pensé pour la mise en page large (texte posé
     sur la voiture) ; sur mobile il ne fait que pousser tout le texte
     trop loin du bord, en plus du padding du .container. */
  .hero-inner {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 84vh;
    padding: 6.5rem 0 3.5rem;
  }
}

/* ========================================
   VÉHICULES — hero façon Frameblox (Day 86) : titre, sous-titre, CTA,
   puis un anneau 3D de photos en rotation continue et automatique
   (aucune interaction requise, comme la démo d'origine). Chaque carte
   est positionnée par rotateY(i * pas) + translateZ(rayon) autour d'un
   centre commun ; c'est la rotation du conteneur parent qui fait défiler
   l'ensemble — les cartes qui passent près de 90°/-90° se présentent de
   profil et s'illuminent (tranche dorée), rejouant l'effet de "barre
   lumineuse" centrale de la référence sans dépendre du contenu photo.
======================================== */
.vehicle-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  max-width: 720px;
}

.vehicle-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.vehicle-hero-sub {
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 46ch;
}

.vehicle-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(212, 162, 74, 0);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.vehicle-hero-cta:hover,
.vehicle-hero-cta:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-light);
  box-shadow: 0 0 32px 4px var(--accent-glow);
}

/* Effet "glitch" en écho au titre pixellisé de la référence, teinté
   dans l'or de la marque plutôt que le vert néon d'origine. */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--accent-light);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  color: var(--accent-light);
  background: var(--bg);
  clip-path: inset(0 0 92% 0);
}

.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 var(--accent);
  animation: glitchSliceA 4.5s infinite linear;
}

.glitch-text::after {
  left: -2px;
  text-shadow: 1px 0 var(--ink);
  animation: glitchSliceB 3.2s infinite linear;
}

@keyframes glitchSliceA {
  0%, 92%, 100% { clip-path: inset(0 0 92% 0); opacity: 0; }
  93% { clip-path: inset(10% 0 60% 0); opacity: 1; }
  95% { clip-path: inset(40% 0 20% 0); opacity: 1; }
  97% { clip-path: inset(70% 0 5% 0); opacity: 1; }
}

@keyframes glitchSliceB {
  0%, 88%, 100% { clip-path: inset(0 0 92% 0); opacity: 0; }
  89% { clip-path: inset(60% 0 15% 0); opacity: 1; }
  91% { clip-path: inset(20% 0 55% 0); opacity: 1; }
  94% { clip-path: inset(5% 0 80% 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-text::before,
  .glitch-text::after {
    animation: none;
    content: none;
  }
}

/* Le scroll force à voir toute la gamme : sur desktop, ce wrapper est
   nettement plus haut que l'écran, et pendant qu'on le traverse le
   carrousel reste collé en haut (position: sticky, pas de pin GSAP — plus
   simple et sans les soucis de mesure entre plusieurs sections épinglées)
   pendant que script.js fait avancer la phase avec la progression du
   scroll. Sur mobile, pas de piste géante : juste la dérive libre. */
.vehicle-scroll-track {
  position: relative;
}

@media (min-width: 992px) {
  .vehicle-scroll-track {
    height: 240vh;
  }
}

/* Carrousel 3D adapté de la démo Frameblox Day 86 : chaque carte dérive en
   continu (translate3d + rotateY + scale calculés en JS à chaque frame),
   rétrécit en approchant du centre puis grandit en s'en éloignant, et
   boucle à l'infini. Aucune carte n'utilise translateZ ni un groupe 3D
   partagé — l'empilement se fait via z-index explicite — donc le
   navigateur n'a jamais de profondeurs ambiguës à départager entre elles. */
.carousel {
  position: relative;
  width: 100%;
  margin: 3rem 0 4.5rem;
  padding-top: 2rem;
  overflow: hidden;
  perspective: 1000px;
}

@media (min-width: 992px) {
  .carousel {
    position: sticky;
    top: 96px;
    margin: 0;
  }
}

.carousel__glow-ambient {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(640px, 60vw);
  height: 320px;
  transform: translate(-50%, -50%);
  background: var(--accent);
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
}

.carousel__beam {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 6px;
  height: 320px;
  transform: translateX(-50%);
  pointer-events: none;
}

.carousel__beam-layer {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  background: var(--accent-light);
  border-radius: 999px;
}

.carousel__beam-layer--1 { width: 110px; filter: blur(56px); opacity: 0.5; }
.carousel__beam-layer--2 { width: 56px;  filter: blur(36px); opacity: 0.65; }
.carousel__beam-layer--3 { width: 20px;  filter: blur(12px); opacity: 0.85; }
.carousel__beam-layer--4 { width: 9px;   filter: blur(3px);  opacity: 1; }
.carousel__beam-layer--core { width: 3px; background: var(--ink); filter: blur(1px); opacity: 0.9; }

.carousel__track {
  position: relative;
  height: 500px;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 280px;
  margin: -140px 0 0 -95px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-solid);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .carousel__track {
    height: 320px;
  }

  .card {
    width: 128px;
    height: 190px;
    margin: -95px 0 0 -64px;
  }
}

.vehicle-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  max-width: 980px;
}

.vehicle-feature h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.vehicle-feature p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.vehicle-feature p a {
  color: var(--accent-light);
}

@media (max-width: 900px) {
  .vehicle-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ========================================
   PANNEAU DE CLÔTURE (CTA + footer)
======================================== */
.closing-panel {
  position: relative;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 32px 32px 0 0;
  background: linear-gradient(180deg, var(--closing-top) 0%, var(--bg) 55%);
  overflow: hidden;
}

.cta {
  position: relative;
  padding: 5.5rem 2rem 4.5rem;
  isolation: isolate;
}

.cta-glow {
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  width: 130%;
  max-width: 900px;
  height: 260px;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-glow), transparent 72%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

.cta-inner {
  text-align: center;
}

.cta-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

.cta-sub {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 2.25rem;
  font-size: 1rem;
  font-weight: 300;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.cta-button:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}

.cta-button svg {
  transition: transform 0.35s var(--ease);
}

.cta-button:hover svg {
  transform: translateX(3px);
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
  padding: 3rem 0 2.25rem;
  background: transparent;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.75rem;
}

.footer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-links a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer-nav-links a:hover {
  color: var(--chrome-1);
}

.footer-brand-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.footer-emblem {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(199, 205, 218, 0.2));
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 34ch;
  line-height: 1.65;
}

.footer-col-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.footer-brands {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-text-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.footer-text-link:hover {
  color: var(--chrome-1);
}

.social-row {
  display: flex;
  gap: 0.65rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.03);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.social-link:hover {
  background: var(--accent);
  border-color: var(--accent-light);
  color: var(--on-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px var(--accent-glow);
}

.footer-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 1.5rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.footer-gda-link {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}

.footer-gda-link:hover {
  color: var(--chrome-1);
}

@media (max-width: 767.98px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ========================================
   SECTIONS GÉNÉRIQUES (en-tête de section)
======================================== */
.section {
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-sub {
  color: var(--ink-soft);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 1rem;
}

.section-sub a {
  color: var(--chrome-1);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--chrome-2);
}

.section-sub a:hover {
  color: var(--chrome-1);
  border-color: var(--chrome-1);
}

/* ========================================
   HERO — COMPTE À REBOURS + CTA
======================================== */
.countdown-wrap {
  margin: 2.5rem 0 2.25rem;
}

.event-past {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--hero-border);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  color: var(--hero-ink-soft);
  max-width: 46ch;
}

/* --- Compte à rebours façon "flip clock" --- */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 76px);
  gap: 0.6rem;
}

.countdown-block {
  position: relative;
  background: linear-gradient(180deg, #161616, #0a0a0a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.9rem 0 0.75rem;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.countdown-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
}

.countdown-block .num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hero-ink);
  line-height: 1;
}

.countdown-labels {
  display: grid;
  grid-template-columns: repeat(4, 76px);
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.countdown-labels span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hero-ink-faint);
}

@media (max-width: 400px) {
  .countdown,
  .countdown-labels {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   L'ÉVÉNEMENT — CARTES FEATURE
======================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  border-top: 2px solid var(--accent);
  padding: 1.75rem 1.5rem 0;
  transition: transform 0.4s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  font-weight: 300;
}

@media (max-width: 767.98px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   PROGRAMME — DÉROULÉ EN SCROLL HORIZONTAL
   Le titre de section défile normalement ; la section .programme-pin est
   ensuite épinglée par ScrollTrigger et le scroll vertical de la page
   pilote un défilement horizontal des étapes (voir initProgrammeScroll
   dans script.js). Une fois la dernière étape atteinte, la page se
   dépingle et le scroll vertical reprend normalement.
======================================== */
.programme-section {
  padding: 6rem 0 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.programme-scroll-track {
  position: relative;
}

@media (max-width: 991.98px) {
  .programme-scroll-track {
    height: 320vh;
  }
}

/* prefers-reduced-motion : pas de scroll-jacking, retour au flux normal. */
.programme-scroll-track.is-flat {
  height: auto;
}

.programme-scroll-track.is-flat .programme-pin--static {
  position: static;
  height: auto;
}

.programme-pin {
  position: relative;
  height: 78vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 4vw;
}

.programme-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.programme-track {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 0 4vw;
  will-change: transform;
}

/* Mobile : le wrapper .programme-scroll-track est bien plus haut que
   l'écran (media query plus bas) ; tant qu'on le traverse, .programme-pin
   reste collé (position: sticky) et le scroll fait défiler les étapes
   verticalement à l'intérieur — pas de pin GSAP ici (voir
   initProgrammeMobileScroll dans script.js), pour éviter les soucis de
   mesure rencontrés avec deux sections épinglées par ScrollTrigger sur la
   même page. Idem si prefers-reduced-motion : tout est affiché à plat. */
.programme-pin--static {
  position: sticky;
  top: 88px;
  height: 64vh;
  min-height: 420px;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.programme-pin--static .programme-viewport {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.programme-pin--static .programme-track {
  flex-direction: column;
  align-items: stretch;
  gap: 2.75rem;
  padding: 0.5rem 1.5rem 2rem;
  will-change: transform;
}

.programme-pin--static .step-card {
  flex: 0 0 auto;
  width: 100%;
}

.programme-pin--static .programme-map {
  display: none;
}

.step-card {
  position: relative;
  flex: 0 0 300px;
  padding-top: 4.5rem;
}

.step-dot {
  position: absolute;
  left: 0;
  top: 2rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(var(--surface-rgb), 0.28);
  background: var(--bg-deep);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  z-index: 1;
}

.step-card::before {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(2rem + 6px);
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(var(--surface-rgb), 0.22) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}

.step-card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: calc(2rem + 6px);
  width: 3rem;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(var(--surface-rgb), 0.22) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}

.step-card.is-done .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.step-card.is-active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 7px var(--accent-glow), 0 0 22px var(--accent-glow);
}

.step-time {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  opacity: 0.65;
  transition: opacity 0.4s var(--ease);
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.step-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
  font-weight: 300;
  opacity: 0.4;
  transition: opacity 0.4s var(--ease);
}

.step-card.is-active .step-time,
.step-card.is-active .step-title,
.step-card.is-active .step-desc,
.step-card.is-done .step-time,
.step-card.is-done .step-title,
.step-card.is-done .step-desc {
  opacity: 1;
}

.programme-pin--static .step-time,
.programme-pin--static .step-title,
.programme-pin--static .step-desc {
  opacity: 1;
}

.programme-pin--static .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Carte "itinéraire" à côté du défilé : une route stylisée que la
   voiture parcourt en même temps que les étapes défilent. --- */
.programme-map {
  position: relative;
  flex: 0 0 260px;
  height: 88%;
  max-height: 520px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(212, 162, 74, 0.07), transparent 60%),
    linear-gradient(180deg, #101010, #060606);
  overflow: hidden;
}

.programme-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.road-bg,
.road-progress {
  fill: none;
  stroke-linecap: round;
}

.road-bg {
  stroke: rgba(var(--surface-rgb), 0.14);
  stroke-width: 2;
}

.road-progress {
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.programme-car {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--accent-glow);
  transition: left 0.05s linear, top 0.05s linear;
  will-change: left, top, transform;
}

.programme-map-readout {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.programme-map-time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.programme-map-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (max-width: 991.98px) {
  .programme-map {
    display: none;
  }
}

/* ========================================
   LIEU & ACCÈS
======================================== */
.lieu-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 460px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 12% 20%, rgba(var(--surface-rgb), 0.05), transparent 60%), var(--surface-solid);
  margin-bottom: 3.5rem;
}

.lieu-banner-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lieu-banner-map svg {
  width: 100%;
  height: 100%;
}

.lieu-banner-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 5, 5, 0.86) 0%, rgba(5, 5, 5, 0.5) 38%, transparent 66%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.65), transparent 45%);
}

.road {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-faint {
  stroke: var(--border-strong);
  stroke-width: 2;
}

.road-route {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.road-node {
  fill: var(--surface-solid);
  stroke: var(--accent);
  stroke-width: 2;
}

.road-node-end {
  fill: var(--accent);
}

.lieu-banner-car {
  position: absolute;
  top: 8%;
  right: 4%;
  width: min(52%, 460px);
  z-index: 1;
  transform: rotate(-5deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 42%, #000 58%, transparent 92%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 42%, #000 58%, transparent 92%);
}

.lieu-banner-car img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.lieu-banner-car-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 26px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65), transparent 72%);
  filter: blur(4px);
  z-index: -1;
}

.lieu-banner-content {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 3rem;
}

.lieu-banner-kicker {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.lieu-banner-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.lieu-banner-datetime {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.lieu-banner-meta-icon {
  flex-shrink: 0;
  color: var(--accent);
  vertical-align: -3px;
}

.lieu-banner-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin: 0 0.15rem;
}

.lieu-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 1.6rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg-deep);
  font-family: var(--font-display);
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.lieu-banner-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
}

.lieu-banner-cta-map {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 7px;
  border-radius: 12px;
  background: var(--surface-solid);
}

.lieu-banner-cta-map svg {
  width: 100%;
  height: 100%;
}

.lieu-banner-cta-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.lieu-banner-cta-arrow {
  flex-shrink: 0;
}

.mini-map-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-map-node {
  fill: var(--surface-solid);
  stroke: var(--accent);
  stroke-width: 3;
}

.mini-map-node-end {
  fill: var(--accent);
  stroke: none;
}

@media (max-width: 900px) {
  .lieu-banner {
    min-height: 0;
  }

  .lieu-banner-content {
    padding: 2rem 1.5rem 1.5rem;
    max-width: 100%;
  }

  .lieu-banner-car {
    position: relative;
    width: 68%;
    max-width: 320px;
    margin: 0.5rem auto 2rem;
    transform: rotate(-4deg);
  }
}

/* ========================================
   RSVP
======================================== */
.rsvp-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.035), rgba(var(--surface-rgb), 0.012));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.rsvp-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2.25rem 1.75rem;
  background: rgba(var(--surface-rgb), 0.03);
  border-right: 1px solid var(--border);
}

.rsvp-visual-emblem {
  width: 40px;
  height: 40px;
  opacity: 0.9;
}

.rsvp-visual-brand {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.rsvp-visual-brand span {
  color: var(--accent);
  font-weight: 400;
}

.rsvp-visual-text {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.55;
  font-weight: 300;
  max-width: 26ch;
  margin: 0.25rem 0 0.5rem;
}

.rsvp-visual-qr {
  width: 128px;
  height: 128px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}

.rsvp-visual-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.rsvp-visual-caption {
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.rsvp-body {
  padding: 2.25rem 2rem;
}

.rsvp-body .section-eyebrow {
  margin-bottom: 0.4rem;
}

.rsvp-lead {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  font-weight: 300;
  margin: 0.6rem 0 1.5rem;
}

/* --- Formulaire multi-étapes --- */
.form-progress[hidden],
.form-step[hidden] {
  display: none;
}

.form-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.form-progress-dot {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background 0.3s var(--ease);
}

.form-progress-dot.active,
.form-progress-dot.done {
  background: var(--accent);
}

.form-step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.form-step--success {
  text-align: center;
  align-items: center;
  padding: 1rem 0 0.5rem;
}

.form-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.form-step--success h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.form-step--success p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 34ch;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.form-field em {
  font-style: normal;
  color: var(--ink-faint);
  font-weight: 400;
}

.form-field input,
.form-field select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.form-field input::placeholder {
  color: var(--ink-faint);
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent);
  background: rgba(var(--surface-rgb), 0.05);
}

.form-field select {
  cursor: pointer;
}

.phone-field {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.6rem;
}

.form-error {
  font-size: 0.82rem;
  color: #e0664f;
  margin: -0.5rem 0 1rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.form-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  border: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.form-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  flex: 1;
}

.form-btn--primary:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}

.form-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-btn--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
}

.form-btn--ghost:hover {
  border-color: var(--chrome-2);
  color: var(--chrome-1);
}

@media (max-width: 480px) {
  .phone-field {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .rsvp-panel {
    grid-template-columns: 1fr;
  }

  .rsvp-visual {
    padding: 1.75rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .rsvp-body {
    padding: 2rem 1.5rem;
  }
}

/* ========================================
   SCROLL TO TOP
======================================== */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s var(--ease);
  z-index: 900;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  box-shadow: 0 8px 32px var(--accent-glow);
}

@media (max-width: 640px) {
  .scroll-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
  }
}

/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-scroll-cue,
  .hero-title span {
    animation: none;
  }

  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}