/* ── Road2Luxe — main.css ─────────────────────────────────────
   Reset minimal + base + utilitaires.
   Variables → tokens.css (chargé avant via enqueue).
   ──────────────────────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  /* Garde-fou débordement horizontal : le menu off-canvas (.r2l-mobile-panel)
     est parqué hors écran à droite via translateX(100%) → sur mobile (iOS Safari
     notamment) ça crée un espace vide à droite sur toute la page. `clip` contient
     ce débordement SANS créer de conteneur de scroll (préserve position:sticky,
     contrairement à overflow:hidden). */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
  background-color: var(--r2l-sable-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--r2l-font-titres);
  color: var(--r2l-charbon);
  margin: 0 0 var(--r2l-s-3);
  text-wrap: balance;
}

h1 { font-size: var(--r2l-text-h1); font-weight: var(--r2l-fw-h1); line-height: 1.12; }
h2 { font-size: var(--r2l-text-h2); font-weight: var(--r2l-fw-h2); line-height: 1.2; }
h3 { font-size: var(--r2l-text-h3); font-weight: var(--r2l-fw-h3); line-height: 1.3; }

p { margin: 0 0 var(--r2l-s-3); }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--r2l-transition-sm);
}
a:hover { color: var(--r2l-flamingo); }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: var(--r2l-s-4); }

/* ── Eyebrow label ────────────────────────────────────────
   Filet 24px avant le label. Jamais de pill, jamais d'orange.
   Slot d'index (.r2l-eyebrow__num) masqué par défaut —
   numérotation de section = décision globale en attente.
   ────────────────────────────────────────────────────── */
.r2l-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-eyebrow);
  font-weight: var(--r2l-fw-eyebrow);
  letter-spacing: var(--r2l-ls-eyebrow);
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
  margin-bottom: var(--r2l-s-2);
}
.r2l-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  margin-right: .95ch;
  flex-shrink: 0;
}
.r2l-eyebrow__num { display: none; }

/* ── Système d'animation — brique partagée ────────────────
   Un seul IntersectionObserver (main.js) ajoute .is-revealed
   sur tout conteneur marqué .js-reveal (threshold ~.2, unobserve).
   Les états masqués sont conditionnés à html.js → no-JS = visible.
   ────────────────────────────────────────────────────────── */

/* 1. Reveal (opacity + translateY) */
html.js .r2l-rise {
  opacity: 0;
  transform: translateY(14px);
}
.is-revealed .r2l-rise {
  animation: r2l-rise-anim var(--r2l-dur-reveal) var(--r2l-ease-reveal) forwards;
  animation-delay: calc(var(--i, 0) * var(--r2l-stagger));
}
@keyframes r2l-rise-anim {
  to { opacity: 1; transform: translateY(0); }
}

/* 2. Draw-on SVG — l'élément doit avoir stroke-dasharray posé */
html.js .r2l-draw {
  stroke-dashoffset: var(--r2l-draw-length, 520);
}
.is-revealed .r2l-draw {
  animation: r2l-draw-anim var(--r2l-dur-draw) var(--r2l-ease-draw) forwards;
}
@keyframes r2l-draw-anim {
  to { stroke-dashoffset: 0; }
}

/* Self-reveal — quand .js-reveal et .r2l-rise sont sur le même élément.
   main.js ajoute .is-revealed sur le nœud lui-même ; le sélecteur
   descendant ".is-revealed .r2l-rise" ne matcherait pas. */
html.js .js-reveal.r2l-rise {
  opacity: 0;
  transform: translateY(16px);
}
html.js .js-reveal.r2l-rise.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--r2l-dur-reveal) var(--r2l-ease-reveal),
              transform var(--r2l-dur-reveal) var(--r2l-ease-reveal);
  animation: none;
}

/* A11y — mouvement réduit : tout visible sans délai */
@media (prefers-reduced-motion: reduce) {
  html.js .r2l-rise { opacity: 1 !important; transform: none !important; }
  html.js .js-reveal.r2l-rise { opacity: 1 !important; transform: none !important; }
  html.js .r2l-draw { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ── Icônes SVG inline (Phosphor) ── */
.r2l-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Container ── */
.r2l-container {
  width: 100%;
  max-width: var(--r2l-container-max);   /* contenu 1200, gutter hors du cap */
  margin-inline: auto;
  padding-inline: var(--r2l-gutter);
}

/* ── Surcharge --r2l-accent-titre sur fonds sombres ──────────
   #C2A98F = même ton Terre, lisible sur charbon (~4.5:1).
   Valeur facile à ajuster visuellement ici.
────────────────────────────────────────────────────────────── */
.r2l-hero,
.r2l-worlds,
.r2l-duo,
.r2l-cta-final,
.r2l-incl__panel,   /* coffre charbon de la fiche (panneau sombre en section claire) */
.r2lm {             /* section motos sombre — bandeau Niveau (jauge terre clair) */
  --r2l-accent-titre: #C2A98F;
}

/* ── Brique .js-parallax — fonds photo des ancres atmosphériques
   JS anime transform:translate3d(). Le CSS pose will-change
   uniquement sous html.js, et le retire via reduced-motion/mobile.
   Les éléments bg doivent avoir top:-8%; height:116% pour
   absorber le déplacement sans révéler le fond (voir css section).
─────────────────────────────────────────────────────────────── */
html.js .js-parallax {
  will-change: transform;
}
@media (max-width: 767px) {
  html.js .js-parallax {
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-parallax {
    will-change: auto !important;
    transform: none !important;
  }
}

/* ── Boutons ── */
.r2l-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--r2l-s-1);
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-meta);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--r2l-radius-md);
  padding: var(--r2l-s-2) var(--r2l-s-4);
  transition: background var(--r2l-transition-sm), color var(--r2l-transition-sm), transform var(--r2l-transition-sm);
}
.r2l-btn:hover { transform: translateY(-1px); }

/* CTA primaire — Flamingo (seul usage orange autorisé) */
.r2l-btn--primary {
  background: var(--r2l-flamingo);
  color: var(--r2l-blanc);
}
.r2l-btn--primary:hover {
  background: #e04e1d;
  color: var(--r2l-blanc);
}

/* CTA secondaire outline Charbon */
.r2l-btn--outline {
  background: transparent;
  color: var(--r2l-charbon);
  border: 1.5px solid var(--r2l-charbon);
}
.r2l-btn--outline:hover {
  background: var(--r2l-charbon);
  color: var(--r2l-blanc);
}

/* Lien texte "Découvrir →" */
.r2l-link-arrow {
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-meta);
  font-weight: 500;
  color: var(--r2l-charbon);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--r2l-transition-sm), color var(--r2l-transition-sm);
}
.r2l-link-arrow::after { content: "→"; }
.r2l-link-arrow:hover { gap: 10px; color: var(--r2l-flamingo); }

/* ── Skip link ── */
.r2l-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--r2l-s-1);
  background: var(--r2l-charbon);
  color: var(--r2l-blanc);
  padding: var(--r2l-s-1) var(--r2l-s-3);
  z-index: 9999;
  border-radius: var(--r2l-radius-sm);
}
.r2l-skip-link:focus { left: var(--r2l-s-1); }

/* ── Notice erreur / état vide ── */
.r2l-notice {
  padding: var(--r2l-s-4) var(--r2l-s-6);
  background: var(--r2l-sable-3);
  border-left: 4px solid var(--r2l-kaki);
  border-radius: var(--r2l-radius-md);
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}
.r2l-notice p { margin: 0; }

/* ── Grille de cards ── */
.r2l-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--r2l-s-4);
}

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

/* ── Pagination ── */
.r2l-pagination {
  display: flex;
  justify-content: center;
  gap: var(--r2l-s-2);
  padding-block: var(--r2l-s-8);
}
.r2l-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--r2l-s-2);
  border-radius: var(--r2l-radius-sm);
  font-size: var(--r2l-text-meta);
  text-decoration: none;
  color: var(--r2l-charbon);
  border: 1px solid var(--r2l-sable-4);
  transition: background var(--r2l-transition-sm);
}
.r2l-pagination .page-numbers.current,
.r2l-pagination .page-numbers:hover {
  background: var(--r2l-charbon);
  color: var(--r2l-blanc);
  border-color: var(--r2l-charbon);
}