/* ── Road2Luxe — fiche.css ─────────────────────────────────────
   Styles spécifiques aux fiches Voyage et Circuit.
   Chargé uniquement sur is_singular(['r2l_voyage','r2l_circuit']).
   Dépend de tokens.css + main.css (chargés avant).
   Nomenclature : .r2l-fiche-* sauf lightbox (.r2l-lightbox).
   ──────────────────────────────────────────────────────────────── */

/* ── variables locales ───────────────────────────────────────── */
:root {
  --r2l-f-line:        rgba(44,40,42,.12);
  --r2l-f-line-strong: rgba(44,40,42,.20);
  --r2l-f-radius:      var(--r2l-card-radius);    /* 12px */
  --r2l-f-radius-lg:   var(--r2l-radius-xl);      /* 24px */
  --r2l-f-section:     var(--r2l-rythme-inter);   /* clamp(72px,11vw,128px) */
  --r2l-f-section-sm:  var(--r2l-rythme-intra);   /* clamp(48px,7vw,80px)  */

  /* H2 de section : bas de la fourchette §11 (26–28 px). Ton moins cinématique,
     adapté à une page de décision. La signature (.r2la__quote-h) est réoverriden
     séparément à 40–52 px pour rester le seul moment statement de la page. */
  --r2l-fiche-titre:   clamp(30px, 4vw, 46px);
}


/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--r2l-sable-1);
  overflow: hidden;
}

/* image plein cadre — cover statique (fallback featured géré côté PHP) */
.r2l-fiche-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--r2l-charbon);
}

.r2l-fiche-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* voile sandwich — robuste, INDÉPENDANT de la photo : sombre haut → transparent
   milieu → sombre bas, + léger assombrissement gauche pour ancrer le texte. */
.r2l-fiche-hero__voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(12,10,9,.70) 0%,
      rgba(12,10,9,.26) 15%,
      rgba(12,10,9,0)   37%,
      rgba(12,10,9,0)   52%,
      rgba(12,10,9,.42) 72%,
      rgba(12,10,9,.93) 100%),
    linear-gradient(90deg, rgba(12,10,9,.42), rgba(12,10,9,0) 50%);
}

.r2l-fiche-hero__grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* colonne flex : haut (fil d'ariane) · spacer · bas (titre) · filet · barre.
   bg + voile = full-bleed (absolute). Le CONTENU passe par .r2l-container
   (max 1200 + gutter) → alignement exact sous le logo, comme le reste du site. */
.r2l-fiche-hero__top {
  position: relative;
  z-index: 5;
  /* calé sous le header global fixe (72px) ; horizontal géré par .r2l-container */
  padding-top: calc(var(--r2l-header-height, 72px) + 18px);
}

.r2l-fiche-hero__spacer { flex: 1 1 auto; }

/* breadcrumb */
.r2l-fiche-hero__breadcrumb {
  font-size: 13px;
  letter-spacing: .02em;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--r2l-sable-1);
}

.r2l-fiche-hero__breadcrumb a {
  text-decoration: none;
  opacity: .82;
  color: inherit;
}

.r2l-fiche-hero__breadcrumb a:hover { opacity: 1; }

.r2l-fiche-hero__breadcrumb span { opacity: .5; }

/* eyebrow dans le hero — override couleur */
.r2l-fiche-hero .r2l-eyebrow {
  color: rgba(247,243,238,.92);
  margin-bottom: 18px;
}

/* ── Harmonisation eyebrows / titres de section (R1·R2·R5) ─────────
   Eyebrow unique = .r2l-eyebrow (main.css) : filet via ::before en
   currentColor, jamais de Flamingo. Sur les sections à fond SOMBRE,
   on surcharge la couleur en crème → le filet suit (currentColor).
   Accompagnement = eyebrow sur carte bio claire → reste Terre (défaut). */
.r2lg  .r2l-eyebrow,
.r2lm  .r2l-eyebrow { color: rgba(247,243,238,.6); }

/* Avis — titre tokenisé SCOPÉ à la fiche voyage uniquement : .r2l-avis__title
   est partagé (home-avis.css) avec la homepage et l'archive /voyages/. */
body.single-r2l_voyage .r2l-avis__title {
  font-size: var(--r2l-fiche-titre);
  font-weight: 700;
}

/* ── SURFACES — sable de base + rampe tonale haute ─────────────────
   .r2l-main porte le sable de base : nuance tonale TRÈS subtile (point 4),
   visible uniquement sur la surface claire BASSE transparente (accompagnement
   → avis → faq → similaires), pour le rythme. Scopé aux deux fiches → ne
   touche ni homepage, ni archive. */
body.single-r2l_voyage .r2l-main,
body.single-r2l_circuit .r2l-main {
  background: linear-gradient(180deg, var(--r2l-fond-haut), var(--r2l-fond-bas-doux));
}

/* Surface claire HAUTE (réassurance→inclus) : UNE rampe continue, calée sur la
   hauteur du wrapper. AÉRÉE au milieu (le clair tient jusqu'à ~60 %), la
   densification vers le beige profond se concentre dans la DERNIÈRE portion,
   juste avant la galerie noire. Aucune bande : sections internes transparentes. */
.r2l-fiche-surface-haut {
  background: linear-gradient(180deg,
    var(--r2l-fond-haut) 0%,
    var(--r2l-fond-haut) 60%,
    var(--r2l-fond-bas) 100%);
}

/* Avis sur la fiche : section transparente (laisse voir le fond de base).
   .r2l-avis porte sa propre couleur dans home-avis.css (partagé homepage /
   archive) → on neutralise UNIQUEMENT en contexte fiche. */
body.single-r2l_voyage .r2l-avis,
body.single-r2l_circuit .r2l-avis { background: transparent; }

/* titleblock — bas du hero (eyebrow + titre + accroche + scroll).
   Horizontal géré par .r2l-container ; .r2l-container interne en relative
   pour ancrer « Faire défiler » sur le bord droit du contenu. */
.r2l-fiche-hero__titleblock {
  position: relative;
  z-index: 5;
  padding-bottom: 28px;
}

.r2l-fiche-hero__titleblock .r2l-container { position: relative; }

.r2l-fiche-hero__title {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.05;
  font-size: clamp(34px, 3.6vw, 54px);
  max-width: 17ch;
  text-wrap: balance;
  color: #fff;
  margin-bottom: 18px;
}

.r2l-fiche-hero__title em {
  display: block;
  font-style: normal;
  color: var(--r2l-sable-3);
}

.r2l-fiche-hero__lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(247,243,238,.92);
  max-width: 46ch;
}

/* « Faire défiler » — indicateur, ancré au bord droit du conteneur.
   Masqué mobile + reduced-motion. */
.r2l-fiche-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(247,243,238,.8);
  font-size: 12.5px;
}

.r2l-fiche-hero__scroll-c {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(247,243,238,.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.r2l-fiche-hero__scroll .r2l-icon {
  width: 16px;
  height: 16px;
  animation: r2l-hero-bob 1.8s ease-in-out infinite;
}

@keyframes r2l-hero-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

/* ── pastille « Départ confirmé » (vert token) ── */
.r2l-fiche-hero__depart-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(247,243,238,.92);
  letter-spacing: .01em;
}

.r2l-fiche-hero__depart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: #45B25E;   /* vert statut confirmé */
  box-shadow: 0 0 0 3px rgba(69,178,94,.25);
}

.r2l-fiche-hero__depart-chip--complet { color: rgba(247,243,238,.55); }

/* ── scroll button câblé : ancre vers #main, focus ring sobre ── */
.r2l-fiche-hero__scroll {
  text-decoration: none;
  color: inherit;
}
.r2l-fiche-hero__scroll:focus-visible {
  outline: 2px solid rgba(247,243,238,.7);
  outline-offset: 4px;
  border-radius: 6px;
}

/* filet pleine largeur — générique réutilisable (PAS scoped hero) */
.r2l-rule {
  height: 1px;
  width: 100%;
  background: rgba(247,243,238,.22);
  border: 0;
  margin: 0;
}

/* filet au-dessus de la barre d'infos : FULL-BLEED (enfant direct du hero),
   au-dessus du voile. La barre dessous reste alignée 1200 → le filet déborde
   volontairement de la barre. */
.r2l-fiche-hero__rulebar {
  position: relative;
  z-index: 5;
}

/* barre d'infos — desktop (dans le hero). Wrapper full-width ; la rangée
   d'attributs est dans .r2l-container (alignée sur le titre, 1200). */
.r2l-fiche-hero__bar {
  position: relative;
  z-index: 5;
  padding-bottom: 30px;
}

.r2l-fiche-hero__bar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 22px;
}

/* item d'attribut — partagé barre desktop + bande mobile */
.r2l-fiche-info { display: flex; flex-direction: column; gap: 6px; }
.r2l-fiche-info__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,243,238,.55);
}
.r2l-fiche-info__v { font-size: 15px; font-weight: 600; color: #fff; }
.r2l-fiche-info--depart .r2l-fiche-info__v {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
}

/* bande d'attributs séparée — mobile uniquement (masquée desktop) */
.r2l-fiche-band {
  display: none;
  background: var(--r2l-fiche-dark);
  color: #fff;
}
.r2l-fiche-band .r2l-rule { opacity: .5; }
.r2l-fiche-band__grid {
  /* horizontal géré par .r2l-container parent (gutter mobile) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 28px;
}
.r2l-fiche-band .r2l-fiche-info--depart { grid-column: 1 / -1; }

/* ── Mobile (≤767px) : la barre sort du hero → bande séparée ── */
@media (max-width: 767px) {
  .r2l-fiche-hero { min-height: 620px; }
  .r2l-fiche-hero__title { font-size: 36px; max-width: 100%; }
  .r2l-fiche-hero__lede { font-size: 15.5px; }
  .r2l-fiche-hero__scroll { display: none; }
  .r2l-fiche-hero__rulebar,
  .r2l-fiche-hero__bar { display: none; }
  .r2l-fiche-band { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .r2l-fiche-hero__scroll { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   RÉASSURANCE
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-reassurance {
  /* Transparente sur le fond de base. Définition portée par les filets des
     cellules (border-top + border-right → wrap-safe à 5 comme à 6 cases).
     Ligne fine de fermeture en bas, pleine largeur, en écho au filet du haut. */
  background: transparent;
  border-bottom: 1px solid var(--r2l-sable-4);
}

.r2l-fiche-reassurance__grid {
  display: grid;
  /* auto-fit : se recompose proprement à 5 cases (suiveur absent) comme à 6,
     sans colonne vide. auto-fit réduit les pistes vides. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Exception full-bleed ASSUMÉE : la bande de réassurance reste pleine largeur
     (edge-to-edge), elle ne s'aligne PAS sur .r2l-container (≠ contenu hero). */
}

.r2l-fiche-reassurance__cell {
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* border-top + border-right sur chaque cellule : les lignes internes
     restent cohérentes même quand la grille passe sur plusieurs rangées. */
  border-top: 1px solid var(--r2l-sable-4);
  border-right: 1px solid var(--r2l-sable-4);
}

.r2l-fiche-reassurance__cell:first-child { border-left: 0; }

.r2l-fiche-reassurance__cell .r2l-icon {
  width: 26px;
  height: 26px;
  color: var(--r2l-charbon);
  flex: none;
}

.r2l-fiche-reassurance__label {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--r2l-charbon);
  line-height: 1.2;
}

.r2l-fiche-reassurance__sub {
  font-size: 12.5px;
  color: var(--r2l-terre-corps);
  line-height: 1.4;
}

/* ── Mobile (≤767px) : 3 colonnes (toujours edge-to-edge) ── */
@media (max-width: 767px) {
  .r2l-fiche-reassurance__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .r2l-fiche-reassurance__cell {
    padding: 22px 12px;
    border-left: 0;
  }
  .r2l-fiche-reassurance__cell:nth-child(3n) { border-right: 0; }
  .r2l-fiche-reassurance__cell:nth-child(-n+3) { border-top: 0; }
  .r2l-fiche-reassurance__cell .r2l-icon { width: 23px; height: 23px; }
  .r2l-fiche-reassurance__label { font-size: 13px; }
  .r2l-fiche-reassurance__sub { font-size: 11px; }

  /* 5 cellules (suiveur absent) : rangée de 3 puis rangée de 2 pleine largeur.
     Base 6 colonnes → 3 cases span 2 (row1), 2 cases span 3 (row2). */
  .r2l-fiche-reassurance__grid--split32 {
    grid-template-columns: repeat(6, 1fr);
  }
  .r2l-fiche-reassurance__grid--split32 .r2l-fiche-reassurance__cell {
    grid-column: span 2;
  }
  .r2l-fiche-reassurance__grid--split32 .r2l-fiche-reassurance__cell:nth-child(4),
  .r2l-fiche-reassurance__grid--split32 .r2l-fiche-reassurance__cell:nth-child(5) {
    grid-column: span 3;
  }
  /* Case 5 = fin de la 2e rangée → pas de filet droit pendant. */
  .r2l-fiche-reassurance__grid--split32 .r2l-fiche-reassurance__cell:nth-child(5) {
    border-right: 0;
  }
}


/* ══════════════════════════════════════════════════════════════
   RÉSERVATION — enveloppe commune
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-reserve {
  background: var(--r2l-sable-3);
  padding: var(--r2l-f-section) 0;
}

.r2l-fiche-reserve-card {
  background: var(--r2l-sable-0);
  border: 1px solid var(--r2l-f-line);
  border-radius: var(--r2l-f-radius-lg);
  padding: 36px 40px;
  overflow: visible;
}

/* ── en-tête (date + devise) ── */
.r2l-fiche-reserve-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--r2l-f-line);
  margin-bottom: 26px;
}

.r2l-fiche-reserve-head h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin-top: 12px;
}

.r2l-fiche-reserve__meta {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--r2l-terre-corps);
  font-size: 15px;
  align-items: center;
}

.r2l-fiche-reserve__meta b {
  color: var(--r2l-charbon);
  font-weight: 600;
}

.r2l-fiche-reserve__meta .r2l-fiche-sep {
  color: var(--r2l-f-line-strong);
}

/* places restantes */
.r2l-fiche-places {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--r2l-charbon);
  font-weight: 600;
  font-size: 14px;
}

.r2l-fiche-places__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--r2l-kaki);
  flex: none;
}

/* complet (voyage) */
.r2l-fiche-places--complet .r2l-fiche-places__dot { background: var(--r2l-terre-sec); }

/* ── sélecteur devise (maquette le montre — on le garde en visuel seulement; la devise vient du cookie) ── */
.r2l-fiche-devise-switch {
  display: inline-flex;
  background: var(--r2l-sable-3);
  border: 1px solid var(--r2l-f-line);
  border-radius: 100px;
  padding: 3px;
  flex: none;
}

.r2l-fiche-devise-switch button {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--r2l-font-corps);
  font-size: 13px;
  font-weight: 600;
  color: var(--r2l-terre-sec);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.r2l-fiche-devise-switch button.is-active {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-1);
}

/* ── sélecteur catégorie moto (mode B) ── */
.r2l-fiche-cat-block { margin-bottom: 26px; }

.r2l-fiche-cat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--r2l-terre-sec);
  margin-bottom: 12px;
}

.r2l-fiche-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.r2l-fiche-cat-pills button {
  border: 1px solid var(--r2l-f-line-strong);
  background: var(--r2l-sable-0);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--r2l-font-corps);
  font-size: 14px;
  font-weight: 600;
  color: var(--r2l-terre-corps);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.r2l-fiche-cat-pills button:hover { border-color: var(--r2l-charbon); }

.r2l-fiche-cat-pills button.is-active {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-1);
  border-color: var(--r2l-charbon);
}

.r2l-fiche-cat-models {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--r2l-terre-sec);
}

.r2l-fiche-cat-models b { color: var(--r2l-charbon); font-weight: 600; }

/* ── grille de prix ── */
.r2l-fiche-price-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.r2l-fiche-pg {
  border: 1px solid var(--r2l-f-line);
  border-radius: var(--r2l-f-radius);
  padding: 22px 24px;
  background: var(--r2l-sable-1);
}

.r2l-fiche-pg__head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--r2l-font-titres);
  font-size: 16px;
  font-weight: 600;
  color: var(--r2l-charbon);
  margin-bottom: 8px;
}

.r2l-fiche-pg__head .r2l-icon {
  width: 22px;
  height: 22px;
  color: var(--r2l-charbon);
  flex: none;
}

.r2l-fiche-pg__head span {
  font-family: var(--r2l-font-corps);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--r2l-terre-sec);
}

.r2l-fiche-pg__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--r2l-f-line);
}

.r2l-fiche-pg__label {
  font-size: 14.5px;
  color: var(--r2l-terre-corps);
}

.r2l-fiche-pg__label em {
  display: block;
  font-style: italic;
  font-size: 12px;
  color: var(--r2l-terre-sec);
  margin-top: 2px;
}

.r2l-fiche-pg__amount {
  font-family: var(--r2l-font-titres);
  font-size: 21px;
  font-weight: 600;
  color: var(--r2l-charbon);
  white-space: nowrap;
}

/* ── pied du bloc réservation ── */
.r2l-fiche-reserve-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--r2l-f-line);
}

.r2l-fiche-reserve-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13.5px;
  color: var(--r2l-terre-corps);
}

.r2l-fiche-reserve-terms b {
  color: var(--r2l-charbon);
  font-weight: 600;
}

.r2l-fiche-guaranteed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--r2l-kaki);
  font-weight: 600;
}

.r2l-fiche-guaranteed .r2l-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.r2l-fiche-reserve-actions {
  display: flex;
  gap: 10px;
}

/* notice Québec */
.r2l-fiche-qc-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  background: var(--r2l-sable-2);
  border: 1px solid var(--r2l-f-line);
  border-radius: var(--r2l-f-radius);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--r2l-charbon);
}

.r2l-fiche-qc-notice[hidden] { display: none; }

.r2l-fiche-qc-notice .r2l-icon {
  width: 22px;
  height: 22px;
  color: var(--r2l-terre-sec);
  flex: none;
  margin-top: 1px;
}

/* lien autres départs */
.r2l-fiche-other-departs {
  margin-top: 24px;
  text-align: center;
}

.r2l-fiche-other-departs a {
  color: var(--r2l-charbon);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--r2l-f-line-strong);
  padding-bottom: 2px;
  transition: border-color .2s;
}

.r2l-fiche-other-departs a:hover { border-color: var(--r2l-charbon); }

/* ── variante Circuit : liste des départs à venir ── */
.r2l-fiche-departs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.r2l-fiche-depart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--r2l-f-line);
  border-radius: var(--r2l-f-radius);
  background: var(--r2l-sable-1);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s var(--r2l-ease-reveal), border-color .25s;
}

.r2l-fiche-depart-row:hover {
  border-color: var(--r2l-charbon);
  box-shadow: 0 4px 16px rgba(44,40,42,.08);
}

.r2l-fiche-depart-row__date {
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-size: 16px;
  color: var(--r2l-charbon);
}

.r2l-fiche-depart-row__meta {
  font-size: 13.5px;
  color: var(--r2l-terre-sec);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.r2l-fiche-depart-row__price {
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-size: 18px;
  color: var(--r2l-charbon);
  white-space: nowrap;
}

.r2l-fiche-depart-row--complet { opacity: .5; pointer-events: none; }

/* responsive réservation */
@media (max-width: 760px) {
  .r2l-fiche-reserve-card { padding: 28px 24px; }
  .r2l-fiche-reserve-head { flex-direction: column; }
  .r2l-fiche-price-groups { grid-template-columns: 1fr; }
  .r2l-fiche-reserve-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .r2l-fiche-reserve-actions { width: 100%; }
  .r2l-fiche-reserve-actions .r2l-btn { flex: 1; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   GALERIE
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-galerie {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-1);
  position: relative;
  padding: var(--r2l-f-section) 0;
}

.r2l-fiche-galerie::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.r2l-fiche-galerie .r2l-container { position: relative; z-index: 1; }

.r2l-fiche-galerie .r2l-eyebrow { color: rgba(247,243,238,.7); }

.r2l-fiche-galerie .r2l-fiche-section-head h2 { color: #fff; }

.r2l-fiche-gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.r2l-fiche-gal-item {
  position: relative;
  border-radius: var(--r2l-f-radius);
  overflow: hidden;
  min-height: 200px;
  cursor: pointer;
}

.r2l-fiche-gal-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s var(--r2l-ease-reveal);
}

.r2l-fiche-gal-item:hover img { transform: scale(1.04); }

.r2l-fiche-gal-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30px 18px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(20,17,18,.78));
}

.r2l-fiche-gal-item--lg { grid-column: span 7; min-height: 340px; }
.r2l-fiche-gal-item--sm { grid-column: span 5; min-height: 340px; }
.r2l-fiche-gal-item--t  { grid-column: span 4; min-height: 230px; }

@media (max-width: 780px) {
  .r2l-fiche-gal-item--lg,
  .r2l-fiche-gal-item--sm,
  .r2l-fiche-gal-item--t { grid-column: span 12; }
}


/* ══════════════════════════════════════════════════════════════
   ===== PROGRAMME v2 — carnet digital (.r2lpg) =====
   Refonte : timeline des jours à gauche (rail en creux) + carte flottante
   avec image bandeau horizontale. Source : _artefacts/r2l-programme-v2-net.html.
   Rendu server-side : rail + cartes dans le DOM. Progressive enhancement —
   hauteur fixe + masquage des cartes inactives gatés sous html.js uniquement.
   Tout scopé .r2lpg / vars mappées aux tokens thème.
   ══════════════════════════════════════════════════════════════ */
.r2lpg {
  --or:    var(--r2l-flamingo);
  --ink:   var(--r2l-charbon);
  --sand:  var(--r2l-sable-1);
  --sand2: var(--r2l-sable-3);
  --brown: var(--r2l-terre-sec);
  --rad:   22px;
  --rbg:   #EFE7DC;

  font-family: var(--r2l-font-corps);
  color: var(--ink);
  background: transparent;   /* surface continue — relief = carnet .r2lpg__box */
  padding: clamp(34px, 5vw, 64px) var(--r2l-gutter);
}
.r2lpg__wrap { max-width: var(--r2l-container); margin: 0 auto; }

/* en-tête */
.r2lpg__head { max-width: 680px; margin: 0 0 clamp(22px, 3vw, 34px); }
.r2lpg__h2 {
  font-family: var(--r2l-font-titres); font-weight: 700;
  font-size: var(--r2l-fiche-titre); line-height: 1.05;
  letter-spacing: -.01em; margin: 14px 0 0;
}
.r2lpg__sub {
  margin: 12px 0 0; color: var(--brown);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; max-width: 56ch;
}

/* ---- BOX (carnet digital) ---- */
.r2lpg__box {
  position: relative; display: grid;
  grid-template-columns: clamp(232px, 26%, 300px) 1fr;
  gap: clamp(14px, 1.8vw, 22px); padding: clamp(14px, 1.6vw, 20px);
  border-radius: var(--rad);
  background: #F7F4EF;
  border: 1px solid rgba(139, 115, 85, .14);
}
/* PE : hauteur fixe seulement quand le JS est là (sans JS = tout empilé visible) */
html.js .r2lpg__box { height: clamp(520px, 70vh, 684px); }

/* ---- RAIL JOURS (en creux) ---- */
.r2lpg__rail {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  border-radius: 16px; background: var(--rbg); overflow: hidden;
}
.r2lpg__rail-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 16px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brown);
}
.r2lpg__count {
  font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px;
  background: rgba(44, 40, 42, .07); color: var(--ink);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.r2lpg__rail-scroll {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(139, 115, 85, .4) transparent;
}
.r2lpg__rail-scroll::-webkit-scrollbar { width: 8px; }
.r2lpg__rail-scroll::-webkit-scrollbar-thumb { background: rgba(139, 115, 85, .35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.r2lpg__list { list-style: none; margin: 0; padding: 0; position: relative; }
.r2lpg__list::before { content: ""; position: absolute; left: 18px; top: 16px; bottom: 16px; width: 2px; background: rgba(139, 115, 85, .25); }
.r2lpg__day {
  position: relative; width: 100%; display: grid; grid-template-columns: 24px 1fr;
  gap: 12px; align-items: start; border: 0; background: none; text-align: left;
  cursor: pointer; font: inherit; color: inherit; padding: 11px 10px; border-radius: 11px;
  transition: background .15s, box-shadow .15s;
}
.r2lpg__day:hover { background: rgba(255, 255, 255, .55); }
.r2lpg__day.is-active { background: #FCF8F2; }
.r2lpg__node {
  justify-self: center; margin-top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rbg); border: 2px solid var(--brown); position: relative; z-index: 1; transition: .2s;
}
.r2lpg__day.is-done .r2lpg__node { background: var(--brown); border-color: var(--brown); }
.r2lpg__day.is-active .r2lpg__node { background: var(--brown); border-color: var(--brown); }
.r2lpg__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--brown); }
.r2lpg__day.is-active .r2lpg__k { color: var(--ink); }
.r2lpg__t { display: block; font-size: 14px; font-weight: 600; line-height: 1.28; color: var(--ink); margin-top: 1px; }
.r2lpg__s { display: block; font-size: 12px; color: var(--brown); margin-top: 3px; }

/* scroll-fade haut/bas (affordance) */
.r2lpg__fade-top, .r2lpg__fade-bot { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .22s; }
.r2lpg__fade-top { top: 44px; height: 30px; background: linear-gradient(180deg, var(--rbg), rgba(239, 231, 220, 0)); }
.r2lpg__fade-bot { bottom: 0; height: 36px; background: linear-gradient(0deg, var(--rbg), rgba(239, 231, 220, 0)); }
.r2lpg__rail.is-ftop .r2lpg__fade-top { opacity: 1; }
.r2lpg__rail.is-fbot .r2lpg__fade-bot { opacity: 1; }

/* ---- COLONNE CARTES ---- */
.r2lpg__cards { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
/* PE : sous JS, une seule carte visible occupe toute la colonne */
html.js .r2lpg__cards { display: block; gap: 0; }
html.js .r2lpg__card { height: 100%; }
html.js .r2lpg__card:not(.is-active) { display: none; }

/* ---- CARTE CONTENU (flottante) ---- */
.r2lpg__card {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(139, 115, 85, .1);
}
.r2lpg__card.anim { animation: pgFade .45s ease; }
@keyframes pgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.r2lpg__media { position: relative; flex: none; height: clamp(196px, 33%, 278px); background: linear-gradient(135deg, #8B7355, #2C282A); overflow: hidden; }
.r2lpg__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
.r2lpg__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
.r2lpg__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px; }
.r2lpg__daytag { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); margin-bottom: 8px; }
.r2lpg__title { font-family: var(--r2l-font-titres); font-weight: 700; font-size: clamp(19px, 2vw, 25px); line-height: 1.12; margin: 0 0 14px; color: var(--ink); }
.r2lpg__facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.r2lpg__fact { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(44, 40, 42, .06); color: #5b5654; white-space: nowrap; }
.r2lpg__fact svg { width: 17px; height: 17px; flex: none; }
.r2lpg__scrollwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.r2lpg__scroll {
  flex: 1; min-height: 0; overflow-y: auto; color: #46423f; font-size: 15px; line-height: 1.72;
  scrollbar-width: thin; scrollbar-color: rgba(139, 115, 85, .4) transparent;
}
.r2lpg__scroll::-webkit-scrollbar { width: 8px; }
.r2lpg__scroll::-webkit-scrollbar-thumb { background: rgba(139, 115, 85, .35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.r2lpg__scroll p { margin: 0 0 12px; } .r2lpg__scroll p:last-child { margin-bottom: 0; }
.r2lpg__scroll strong { color: var(--ink); font-weight: 700; }
.r2lpg__cardfade { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; pointer-events: none; opacity: 1; transition: opacity .2s; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }
.r2lpg__scrollwrap.is-end .r2lpg__cardfade { opacity: 0; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .r2lpg__box { display: flex; flex-direction: column; }
  html.js .r2lpg__box { height: auto; }
  .r2lpg__rail { height: 200px; }
  html.js .r2lpg__card { height: clamp(420px, 64vh, 540px); }
}
.r2lpg button:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .r2lpg *:not(.r2l-rise) { transition: none !important; animation: none !important; } }

/* ── Dots (shared — hidden by default, shown mobile carousel) ── */
.r2lpg__dots { display: none; justify-content: center; align-items: center; gap: 8px; padding: 14px 0 8px; }
.r2lpg__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(44,40,42,.2); cursor: pointer; transition: background .2s, transform .2s; flex: none; }
.r2lpg__dot.is-active { background: var(--r2l-charbon); transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) { .r2lpg__dot { transition: none; } }

/* ── Programme mobile carousel (≤ 640px) ── */
@media (max-width: 640px) {
  /* Rail masqué — navigation uniquement par glissement et dots */
  .r2lpg__rail,
  .r2lpg__count { display: none; }

  /* Supprimer le "carnet" : bord, fond, padding — les cartes sont full-bleed */
  .r2lpg__box,
  html.js .r2lpg__box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    height: auto;
    overflow: visible;
  }

  /* Cards container → scroll-snap horizontal, sortie des marges de section */
  .r2lpg__cards,
  html.js .r2lpg__cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin-inline: calc(-1 * var(--r2l-gutter));
    padding-inline: var(--r2l-gutter);
    scroll-padding-inline-start: var(--r2l-gutter);
    scrollbar-width: none;
  }
  .r2lpg__cards::-webkit-scrollbar { display: none; }

  /* Chaque carte = slide pleine largeur, hauteur fixe → description scroll en interne */
  .r2lpg__card,
  html.js .r2lpg__card,
  html.js .r2lpg__card:not(.is-active) {
    display: flex !important;
    flex: 0 0 calc(100% - var(--r2l-gutter));
    width: calc(100% - var(--r2l-gutter));
    height: clamp(400px, 78vh, 520px) !important;
    scroll-snap-align: start;
    animation: none !important;
    margin-right: 12px;
  }
  /* Dernière carte sans marge */
  .r2lpg__card:last-child { margin-right: 0; }

  /* Photo plus compacte */
  .r2lpg__media { height: 160px; }

  /* Corps : texte plus compact, description scrollable */
  .r2lpg__body { padding: 14px 16px; }
  .r2lpg__title { font-size: 1.05rem; margin-bottom: 10px; }
  .r2lpg__scroll { font-size: 14px; line-height: 1.55; }

  /* Dots */
  .r2lpg__dots { display: flex; margin-top: 14px; }
}
/* ===== /PROGRAMME v2 (.r2lpg) ===== */


/* ══════════════════════════════════════════════════════════════
   ===== CLÉ EN MAIN v2 (inclus / non-inclus) =====
   Refonte : inclus en panneau héros pleine largeur + non-compris en bande
   discrète dessous. Deux listes plates. Source : _artefacts/r2l-cle-en-main.html.
   Tout scopé sous .r2l-incl ; couleurs/fontes = tokens thème.
   Orange limité à la pastille d'en-tête inclus + le tiret eyebrow.
   (L'ancien bloc .r2l-fiche-inclus* a été retiré — markup remplacé.)
   ══════════════════════════════════════════════════════════════ */
.r2l-incl {
  font-family: var(--r2l-font-corps);
  color: var(--r2l-charbon);
  /* surface continue — relief = coffre charbon .r2l-incl__panel. Bord bas au
     rythme inter-sections (--r2l-rythme-inter) : la section respire avant l'ancre
     sombre de la galerie (le fond sombre ne doit pas pointer sous le coffre). */
  background: transparent;
  padding: clamp(34px, 5vw, 68px) var(--r2l-gutter) var(--r2l-rythme-inter);
}
.r2l-incl__wrap { max-width: var(--r2l-container); margin: 0 auto; }

/* en-tête */
.r2l-incl__head { margin: 0 0 clamp(24px, 3.4vw, 42px); max-width: 720px; }
.r2l-incl__h2 {
  font-family: var(--r2l-font-titres); font-weight: 700;
  font-size: var(--r2l-fiche-titre); line-height: 1.04;
  letter-spacing: -.01em; margin: 14px 0 0;
}
.r2l-incl__lede {
  margin: 14px 0 0; max-width: 560px;
  font-size: 16px; line-height: 1.6; color: var(--r2l-terre-corps);
}

/* sous-titre de liste : pastille carrée + label — partagé coffre / mineur */
.r2l-incl__sub {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-family: var(--r2l-font-titres); font-weight: 600; font-size: 18px;
  color: var(--r2l-charbon);
}
.r2l-incl__dot {
  flex: none; width: 8px; height: 8px; border-radius: 2px;
  background: var(--r2l-accent-titre);
}

/* deux colonnes côte à côte : coffre dominant (plus large) + à-prévoir mineur,
   même hauteur via align-items:stretch. --split n'est posé que si non-inclus existe
   (sinon le coffre reste pleine largeur en bloc). */
.r2l-incl__cols--split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

/* ---- COFFRE CHARBON (inclus) : objet posé, relief par ombre renforcée.
   Fond = token charbon #2C282A — PAS le noir profond #0c0a09 des sections
   sombres : le coffre ne doit pas se confondre avec galerie/motos. accent-titre
   y résout #C2A98F (terre clair) via la surcharge de contexte (main.css). ---- */
.r2l-incl__panel {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-2);
  border-radius: var(--r2l-card-radius);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--r2l-shadow-hover);
}
.r2l-incl__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px;
}
.r2l-incl__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15.5px; line-height: 1.45; color: var(--r2l-sable-2);
}
.r2l-incl__tick { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--r2l-accent-titre); }
.r2l-incl__tick .r2l-icon { width: 100%; height: 100%; display: block; }
.r2l-incl__item strong { color: var(--r2l-sable-0); font-weight: 700; }
/* titre de liste DANS le coffre : crème — sinon charbon/charbon = invisible */
.r2l-incl__panel .r2l-incl__sub { color: var(--r2l-sable-1); }

/* ---- À PRÉVOIR (non-inclus) : panneau sable, en MINEUR, aligné en hauteur
   sur le coffre. Colonne plus étroite (1fr) → liste sur une seule colonne. ---- */
.r2l-incl__exc {
  margin: 0;
  padding: clamp(26px, 2.6vw, 36px);
  background: var(--r2l-sable-2);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
}
.r2l-incl__exc .r2l-incl__sub { font-size: 16px; }
.r2l-incl__exc .r2l-incl__dot { background: var(--r2l-terre-sec); opacity: .6; }
.r2l-incl__exc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.r2l-incl__exc-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15.5px; line-height: 1.45; color: var(--r2l-terre-corps);
}
.r2l-incl__exc-item .r2l-icon {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  color: var(--r2l-terre-sec); opacity: .55;
}

/* responsive : on empile coffre + à-prévoir, puis la liste inclus en 1 colonne */
@media (max-width: 860px) {
  .r2l-incl__cols--split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .r2l-incl__list { grid-template-columns: 1fr; }
}

/* a11y — focus non-orange (terre sur clair, accent clair dans le coffre) */
.r2l-incl a:focus-visible,
.r2l-incl :focus-visible { outline: 2px solid var(--r2l-terre-sec); outline-offset: 3px; }
.r2l-incl__panel a:focus-visible { outline-color: var(--r2l-accent-titre); }
@media (prefers-reduced-motion: reduce) { .r2l-incl *:not(.r2l-rise) { transition: none !important; } }
/* ===== /CLÉ EN MAIN v2 ===== */




/* ══════════════════════════════════════════════════════════════
   NIVEAU — section standalone après le programme
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-niveau {
  background: transparent;
  padding: var(--r2l-f-section-sm) 0;
}

.r2l-fiche-niveau-card {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.r2l-fiche-niveau-card h2 {
  font-size: var(--r2l-fiche-titre);
  margin-top: 10px;
}

.r2l-fiche-niv-bar {
  max-width: 560px;
  margin: 28px auto 24px;
}

.r2l-fiche-niv-track {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: var(--r2l-sable-4);
}

.r2l-fiche-niv-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--r2l-niv-fill, 12.5%);
  border-radius: 6px;
  background: var(--r2l-charbon);
}

.r2l-fiche-niv-knob {
  position: absolute;
  top: 50%;
  left: var(--r2l-niv-fill, 12.5%);
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--r2l-charbon);
  border: 3px solid var(--r2l-fond-haut);
  box-shadow: 0 2px 8px rgba(44,40,42,.25);
}

.r2l-fiche-niv-ticks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
}

.r2l-fiche-niv-ticks span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--r2l-terre-sec);
  opacity: .7;
}

.r2l-fiche-niv-ticks span.is-active {
  color: var(--r2l-charbon);
  opacity: 1;
}

/* animation barre au reveal — gated html.js */
html.js .r2l-fiche-niveau-card.is-revealed .r2l-fiche-niv-fill {
  animation: r2lNivGrow .9s var(--r2l-ease-reveal) both;
}

@keyframes r2lNivGrow {
  from { width: 0; }
  to   { width: var(--r2l-niv-fill, 12.5%); }
}

.r2l-fiche-niveau-card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--r2l-terre-corps);
  max-width: 58ch;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  html.js .r2l-fiche-niveau-card.is-revealed .r2l-fiche-niv-fill { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOTOS — remplacé par la grille .r2l-fiche-motos (§8 spec merge)
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   ACCOMPAGNEMENT — voir bloc « SECTION ACCOMPAGNEMENT (.r2la) » en fin
   de fichier. L'ancien markup .r2l-fiche-accomp/-profile/-suiveur a été
   remplacé par le bento .r2la.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   AVIS (fin de fiche) — présentation complète .r2l-avis.
   Le style vient de home-avis.css (enqueue ajoutée sur la fiche).
   L'ancien markup réduit .r2l-fiche-avis* a été retiré.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   FAQ v2 — deux colonnes (aside sticky + accordéon) — namespace .r2l-faq
   Source : _artefacts/r2l-fiche-fin-de-page-FINAL.html. Contenu = repeater
   ACF Options « FAQ ». Replié en CSS (gated html.js) → tout ouvert sans JS.
   ══════════════════════════════════════════════════════════════ */
.r2l-faq{
  --or:var(--r2l-flamingo); --ink:var(--r2l-charbon); --sand:var(--r2l-sable-1);
  --line:#E2D8D2; --brown:var(--r2l-terre-sec); --brown-txt:var(--r2l-terre-corps);
  --serif:var(--r2l-font-titres); --sans:var(--r2l-font-corps); --ease:var(--r2l-ease-reveal);
  padding:clamp(48px,7vw,80px) var(--r2l-gutter) clamp(56px,8vw,96px);background:transparent}
.r2l-faq__inner{max-width:var(--r2l-container);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.r2l-faq__aside{position:sticky;top:90px}
.r2l-faq__title{margin:16px 0 0;font:700 var(--r2l-fiche-titre)/1.12 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.r2l-faq__intro{margin:16px 0 0;font:400 16px/1.65 var(--sans);color:var(--brown-txt)}
.r2l-faq__ask{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:13px 22px;
  border:1.5px solid var(--ink);border-radius:999px;font:700 14px/1 var(--sans);letter-spacing:.01em;
  color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.r2l-faq__ask:hover{background:var(--ink);color:#fff}
.r2l-faq__ask:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.r2l-faq__ask svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.r2l-faq__item{border-top:1px solid var(--line)}
.r2l-faq__list > .r2l-faq__item:last-child{border-bottom:1px solid var(--line)}
.r2l-faq__q{width:100%;display:flex;align-items:center;gap:20px;padding:22px 4px;background:transparent;
  border:0;cursor:pointer;text-align:left;font:500 clamp(17px,1.6vw,20px)/1.35 var(--serif);color:var(--ink)}
.r2l-faq__q:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
.r2l-faq__q-txt{flex:1;transition:color .2s var(--ease)}
.r2l-faq__item.is-open .r2l-faq__q-txt,.r2l-faq__q:hover .r2l-faq__q-txt{color:var(--or)}
.r2l-faq__icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;transition:transform .35s var(--ease),border-color .25s,background .25s}
.r2l-faq__icon svg{width:15px;height:15px;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.r2l-faq__item.is-open .r2l-faq__icon{transform:rotate(45deg);border-color:var(--or);background:var(--or)}
.r2l-faq__item.is-open .r2l-faq__icon svg{stroke:#fff}
.r2l-faq__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease)}
html.js .r2l-faq__item:not(.is-open) .r2l-faq__panel{grid-template-rows:0fr}
.r2l-faq__panel-in{overflow:hidden}
.r2l-faq__a{margin:0;padding:0 56px 24px 4px;font:400 16px/1.68 var(--sans);color:var(--brown-txt);max-width:64ch}
.r2l-faq__a p{margin:0 0 12px}.r2l-faq__a p:last-child{margin-bottom:0}
html.js .r2l-faq__item:not(.is-open) .r2l-faq__a{opacity:0;transition:opacity .2s}
.r2l-faq__item.is-open .r2l-faq__a{opacity:1;transition:opacity .3s .12s}
@media (prefers-reduced-motion:reduce){.r2l-faq__panel,.r2l-faq__icon,.r2l-faq__a{transition:none}}
@media (max-width:820px){.r2l-faq__inner{grid-template-columns:1fr}.r2l-faq__aside{position:static}}


/* ══════════════════════════════════════════════════════════════
   SIMILAIRES v2 — carousel « Vous aimerez aussi » — namespace .r2l-simil
   Source : _artefacts/r2l-fiche-fin-de-page-FINAL.html. Réemploie le partial
   .r2l-card--xl (style dans card-destination.css) — pas de CSS card ici.
   ══════════════════════════════════════════════════════════════ */
.r2l-simil{
  --or:var(--r2l-flamingo); --ink:var(--r2l-charbon); --sand:var(--r2l-sable-1);
  --line:#E2D8D2; --brown:var(--r2l-terre-sec); --brown-txt:var(--r2l-terre-corps);
  --serif:var(--r2l-font-titres); --sans:var(--r2l-font-corps);
  padding:clamp(48px,7vw,80px) 0 clamp(72px,11vw,128px);background:transparent}
.r2l-simil__head{max-width:var(--r2l-container-max);margin:0 auto 36px;padding:0 var(--r2l-gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.r2l-simil__title{margin:14px 0 0;font:700 var(--r2l-fiche-titre)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.r2l-simil__lede{margin:10px 0 0;max-width:46ch;font:400 16px/1.6 var(--sans);color:var(--brown-txt)}
.r2l-simil__nav{display:flex;gap:10px;flex-shrink:0}
.r2l-simil__arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,color .2s,opacity .2s}
.r2l-simil__arrow .r2l-icon{width:18px;height:18px;display:block}
.r2l-simil__arrow:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.r2l-simil__arrow:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.r2l-simil__arrow[disabled]{opacity:.35;pointer-events:none}
.r2l-simil__scroller-wrap{position:relative}
.r2l-simil__scroller{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px var(--r2l-gutter) 14px;margin:0;list-style:none;scrollbar-width:none}
.r2l-simil__scroller::-webkit-scrollbar{display:none}
.r2l-simil__scroller > li{scroll-snap-align:start;flex:0 0 320px}
@media (prefers-reduced-motion:reduce){.r2l-simil__scroller{scroll-behavior:auto}}
@media (max-width:680px){.r2l-simil__nav{display:none}.r2l-simil__scroller > li{flex-basis:72vw}}


/* ══════════════════════════════════════════════════════════════
   STICKY CTA
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--r2l-f-line);
  padding: 14px var(--r2l-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  transform: translateY(110%);
  transition: transform .5s var(--r2l-ease-reveal);
}

.r2l-fiche-sticky.is-visible { transform: translateY(0); }

.r2l-fiche-sticky__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.r2l-fiche-sticky__label {
  font-size: 12.5px;
  color: var(--r2l-terre-sec);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r2l-fiche-sticky__price {
  font-family: var(--r2l-font-titres);
  font-size: 20px;
  font-weight: 600;
  color: var(--r2l-charbon);
  white-space: nowrap;
}

.r2l-fiche-sticky__price small {
  font-size: 13px;
  color: var(--r2l-terre-corps);
  font-weight: 400;
  font-family: var(--r2l-font-corps);
}

.r2l-fiche-sticky__actions { display: flex; gap: 10px; flex: none; }

@media (max-width: 560px) {
  .r2l-fiche-sticky { padding: 12px 18px; }
  .r2l-fiche-sticky__actions .r2l-btn--outline { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   STICKY RÉSERVATION — MINI-BARRE CENTRÉE (.r2l-resa) — fiche Voyage
   Source visuelle : _artefacts/r2l-sticky-minibar-centree-FINAL.html.
   Pilule centrée, compacte (inline-flex en ligne unique). Couleurs
   mappées sur les tokens du thème ; floating bar → ombre marquée.
   État caché gaté sur html.js (contrat de révélation §11) : sans JS,
   la pilule reste VISIBLE — jamais invisible à vie. position:fixed →
   non géré par .js-reveal, révélé par .is-active (JS, indépendant du reveal).
   Le centrage (translateX(-50%)) est intégré au transform du reveal
   pour ne pas casser le centrage pendant l'apparition.
   ══════════════════════════════════════════════════════════════ */
.r2l-resa {
  position: fixed;
  z-index: 40;                   /* sous le header (200), sous l'ancien sticky circuit (95) */
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);   /* centrage — conservé même en no-JS */
  font-family: var(--r2l-font-corps);
}

/* hidden state — JS only ; révélé par .is-active (centrage intégré au transform).
   Le positionnement vertical (flotte/posée) est piloté en rAF via style.top /
   style.bottom inline ; le transform ne porte QUE le centrage + l'apparition. */
html.js .r2l-resa {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--r2l-ease-reveal);
}
html.js .r2l-resa.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.r2l-resa__inner {
  display: inline-flex;
  align-items: center;
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--r2l-sable-4);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(44,40,42,.05), 0 14px 36px rgba(44,40,42,.18);
  padding: 8px 8px 8px 24px;
}

.r2l-resa__tarif {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--r2l-charbon);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.r2l-resa__tarif .pre {
  font-size: .62em;
  font-weight: 600;
  color: var(--r2l-terre-corps);
  margin-right: 5px;
}
.r2l-resa__unit {
  font-weight: 600;
  font-size: .62em;
  color: var(--r2l-terre-corps);
  margin-left: 4px;
}

/* séparateur vertical entre tarif et meta */
.r2l-resa__vsep {
  width: 1px;
  height: 20px;
  background: var(--r2l-sable-4);
  margin: 0 16px;
  flex: 0 0 auto;
}

.r2l-resa__nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--r2l-charbon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.r2l-resa__meta { font-size: 12.5px; color: var(--r2l-terre-sec); white-space: nowrap; }
.r2l-resa__meta b { color: var(--r2l-charbon); font-weight: 600; }
/* urgence : charbon, JAMAIS d'orange. Affiché uniquement si départ tendu. */
.r2l-resa__sep {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--r2l-terre-sec);
  opacity: .6;
  margin: 0 8px;
  vertical-align: middle;
}
.r2l-resa__places { color: var(--r2l-charbon); font-weight: 600; }
.r2l-resa__places::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--r2l-charbon);
  margin-right: 6px;
  vertical-align: middle;
}

.r2l-resa__ask {
  font-weight: 600;
  font-size: 13px;
  color: var(--r2l-charbon);
  text-decoration: none;
  white-space: nowrap;
  margin: 0 16px;
  padding: 4px;
  border-radius: 6px;
  transition: color .18s;
}
.r2l-resa__ask:hover { color: var(--r2l-flamingo); }
.r2l-resa__book {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  background: var(--r2l-flamingo);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: background .18s, color .18s, box-shadow .18s;
}
/* Hover : fond orange foncé + texte BLANC explicite. Indispensable car
   a:hover{color:flamingo} (main.css) prend sinon le dessus sur la couleur du
   .r2l-resa__book (<a>) → texte orange sur fond orange = invisible. */
.r2l-resa__book:hover,
.r2l-resa__book:focus { background: #D9491E; color: #fff; box-shadow: 0 6px 18px rgba(245,95,42,.32); }

/* état complet : CTA neutralisé */
.r2l-resa--complet .r2l-resa__book {
  background: var(--r2l-sable-3);
  color: var(--r2l-terre-corps);
  pointer-events: none;
  cursor: default;
}
.r2l-resa--complet .r2l-resa__tarif { opacity: .5; }

.r2l-resa__book:focus-visible,
.r2l-resa__ask:focus-visible { outline: 2px solid var(--r2l-flamingo); outline-offset: 2px; }

/* Mobile : barre ramassée + ENTIÈREMENT CLIQUABLE (stretched link porté par
   le CTA). Compo : titre pleine largeur (2 lignes) → prix + date + flèche.
   On retire le bouton secondaire (« Poser une question »), l'unité « /pilote »
   et le libellé « Départ du » ; le CTA devient une flèche ronde (libellé masqué
   mais conservé dans le DOM pour le nom accessible). */
@media (max-width: 767px) {
  .r2l-resa { left: 10px; right: 10px; bottom: 10px; transform: none; }
  html.js .r2l-resa { transform: translateY(12px); }
  html.js .r2l-resa.is-active { transform: translateY(0); }
  .r2l-resa__inner {
    position: relative;                 /* ancre du stretched link */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    width: 100%;
    border-radius: 14px;
    padding: 13px 44px 13px 16px;   /* +padding global ; droite = place flèche */
    background: var(--r2l-sable-1);
  }
  /* retirés sur mobile : bouton secondaire, unité « /pilote », séparateurs,
     libellé « Départ du » (le gap sépare visuellement prix et date) */
  .r2l-resa__ask,
  .r2l-resa__unit,
  .r2l-resa__vsep,
  .r2l-resa__meta-label { display: none; }
  /* titre : petit, pleine largeur, jusqu'à 2 lignes */
  .r2l-resa__nom {
    order: 0;
    flex: 1 0 100%;
    max-width: none;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .r2l-resa__tarif { order: 1; flex: 0 0 auto; font-size: 19px; }
  /* date (+ urgence éventuelle) inline, juste à droite du prix */
  .r2l-resa__meta  { order: 2; flex: 1 1 auto; font-size: 12px; white-space: normal; }
  /* CTA → flèche seule, centrée verticalement sur toute la hauteur de la card.
     L'ancre couvre tout le bloc (position:absolute; inset:0) → card entièrement
     cliquable ; la flèche est posée à droite, sobre : orange, sans fond. Le
     libellé reste dans le DOM (masqué) pour le nom accessible. */
  .r2l-resa__book {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 16px 0 0;
    border-radius: 14px;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;            /* centrage vertical de la flèche */
    justify-content: flex-end;      /* flèche calée à droite */
    font-size: 0;
    line-height: 0;
  }
  .r2l-resa__book::before {
    content: "→";
    font-size: 21px;
    line-height: 1;
    color: var(--r2l-flamingo);
  }
  /* interaction : on garde la sobriété (pas de fond), la flèche fonce juste */
  .r2l-resa__book:hover,
  .r2l-resa__book:focus { background: none; box-shadow: none; }
  .r2l-resa__book:hover::before,
  .r2l-resa__book:focus::before { color: #D9491E; }
  /* départ complet : pas de navigation → flèche neutralisée (grise) */
  .r2l-resa--complet .r2l-resa__book { pointer-events: none; }
  .r2l-resa--complet .r2l-resa__book::before { color: var(--r2l-terre-sec); }
}

/* reduced-motion : on raccourcit la transition SANS toucher au transform
   (sinon le centrage translateX(-50%) sauterait). */
@media (prefers-reduced-motion: reduce) {
  html.js .r2l-resa,
  html.js .r2l-resa.is-active { transition: opacity .2s linear; }
}


/* ══════════════════════════════════════════════════════════════
   PRÉ-FOOTER IMMERSIF — VARIANTE VOYAGE + DOCK CONTINU DE LA BARRE RESA
   La base (.r2l-prefooter, scrim bas, parallax) vient de home-prefooter.css
   (chargé aussi sur la fiche Voyage). Ici, propre au voyage :
     1. transition haute (la photo émerge du fond sable, plus de bord franc) ;
     2. composition remontée (texte sur le ciel, barre posée moins bas) ;
     3. slot-placeholder qui réserve la hauteur de la barre flottante ;
     4. cascade de texte révélée quand la barre est posée (.is-docked),
        pilotée par le dock rAF de fiche.js (indépendant du reveal global).
   Contrat §11 : gates sous html.js ; sans JS → tout visible ; reduced-motion
   → visible instantané ; failsafe JS révèle le texte si le dock échoue.
   ══════════════════════════════════════════════════════════════ */

/* Un peu plus de hauteur pour loger la transition haute + le ciel.
   Double classe : l'emporte sur la base .r2l-prefooter quel que soit
   l'ordre de chargement des feuilles (home-prefooter.css vs fiche.css). */
.r2l-prefooter.r2l-prefooter--voyage {
  min-height: clamp(660px, 88vh, 940px);
}

/* (1) Transition haute : la photo émerge du fond de la section précédente
   (body = --r2l-sable-0) vers transparent sur ~20vh — plus de rupture nette.
   On conserve le fondu charbon en bas pour fondre dans le footer. */
.r2l-prefooter--voyage .r2l-prefooter__scrim {
  background:
    linear-gradient(to bottom, var(--r2l-sable-0) 0%, rgba(250,249,246,0) 20vh),
    linear-gradient(to bottom, transparent 52%, rgba(44,40,42,.87) 100%);
}

/* (2) Composition remontée : le contenu se cale dans le tiers haut, sur la
   zone claire du ciel (lisibilité), et la barre se pose un peu moins bas. */
.r2l-prefooter--voyage .r2l-prefooter__inner {
  padding-top: clamp(44px, 9vh, 104px);
  padding-bottom: 0;
}
.r2l-prefooter--voyage .r2l-prefooter__sub {
  margin-bottom: clamp(22px, 4vh, 40px);
}

/* (3) Slot-placeholder : réserve la hauteur de la barre (min-height fixé en
   JS = hauteur réelle de .r2l-resa). La barre flottante vient s'y POSER. */
.r2l-prefooter__dock-slot {
  width: 100%;
  min-height: 64px;          /* repli avant calibrage JS */
}

/* (4) Cascade de texte — eyebrow → titre → lede. Gate JS only ; révélée par
   .is-docked (barre posée), réversible au scroll inverse. ~0.6s, ease reveal,
   delays .12 / .24 / .38s. */
html.js .r2l-prefooter--voyage .r2l-prefooter__line {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s var(--r2l-ease-reveal), transform .6s var(--r2l-ease-reveal);
}
html.js .r2l-prefooter--voyage.is-docked .r2l-prefooter__line {
  opacity: 1;
  transform: none;
}
html.js .r2l-prefooter--voyage.is-docked .r2l-eyebrow.r2l-prefooter__line          { transition-delay: .12s; }
html.js .r2l-prefooter--voyage.is-docked .r2l-prefooter__title.r2l-prefooter__line { transition-delay: .24s; }
html.js .r2l-prefooter--voyage.is-docked .r2l-prefooter__sub.r2l-prefooter__line   { transition-delay: .38s; }

/* reduced-motion : texte visible instantanément, aucune cascade */
@media (prefers-reduced-motion: reduce) {
  html.js .r2l-prefooter--voyage .r2l-prefooter__line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — ALIGNÉ SUR LE PRÉ-FOOTER HOME (photo immersive plein cadre)
   Placé APRÈS les règles desktop ci-dessus : à spécificité égale, ces
   surcharges mobiles l'emportent par ordre de source.
   Ancien parti-pris (bande photo réduite en bas) abandonné : l'image était à
   peine visible. On reprend le traitement de la home — photo plein cadre +
   scrim clair en haut (lisibilité du texte) + fondu charbon vers le footer.
   La base immersive (media absolu inset:0 + plancher `img { min-height }`)
   vient de home-prefooter.css @media(max-width:768px), appliquée telle quelle.
   La barre resa flotte puis se pose dans le slot en flux (mécanique de dock
   inchangée : le JS lit la position DOM du slot). Desktop strictement intact.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Section immersive comme la home : photo plein cadre en fond, contenu ancré
     dans le tiers haut. Hauteur généreuse pour laisser respirer l'image. */
  .r2l-prefooter.r2l-prefooter--voyage {
    min-height: clamp(600px, 82vh, 880px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--r2l-charbon);
  }

  /* Texte dans la zone claire du haut (le scrim voyage y fond le sable). */
  .r2l-prefooter--voyage .r2l-prefooter__inner {
    padding-top: var(--r2l-s-8);
    padding-bottom: var(--r2l-s-12);
  }
  .r2l-prefooter--voyage .r2l-prefooter__sub {
    margin-bottom: clamp(20px, 4vh, 36px);
  }

  /* Slot de dock en flux (dans l'inner, sur la photo). Réserve la hauteur
     réelle de la barre (min-height posé en JS) ; la barre fixe vient s'y poser. */
  .r2l-prefooter--voyage .r2l-prefooter__dock-slot {
    position: static;
    width: 100%;
  }
  .r2l-prefooter--voyage .r2l-prefooter__bg img {
    object-position: center 60%;
  }

  /* Contrat de révélation §11 : le texte ne dépend plus du docking pour
     apparaître. Visible d'emblée — la cascade .is-docked reste desktop-only. */
  html.js .r2l-prefooter--voyage .r2l-prefooter__line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════ */
.r2l-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;   /* au-dessus du header (200) et des panneaux nav (300) */
  background: rgba(20,17,18,.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.r2l-lightbox[hidden] { display: none; }

.r2l-lightbox__stage {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.r2l-lightbox__img {
  width: min(86vw, 1000px);
  height: min(70vh, 640px);
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  display: block;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}

.r2l-lightbox__cap {
  color: rgba(247,243,238,.85);
  font-size: 15px;
  text-align: center;
}

.r2l-lightbox__btn {
  position: absolute;
  background: rgba(247,243,238,.1);
  border: 1px solid rgba(247,243,238,.25);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  font-family: var(--r2l-font-corps);
}

.r2l-lightbox__btn:hover { background: rgba(247,243,238,.22); }

.r2l-lightbox__close {
  top: 22px;
  right: 22px;
  font-size: 30px;
}

.r2l-lightbox__prev {
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.r2l-lightbox__next {
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 560px) {
  .r2l-lightbox__prev,
  .r2l-lightbox__next { display: none; }
  .r2l-lightbox__img { height: min(60vh, 460px); }
}


/* ══════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS (dans le scope fiche)
   ══════════════════════════════════════════════════════════════ */

/* en-tête de section */
.r2l-fiche-section-head {
  margin-bottom: 48px;
  max-width: 680px;
}

.r2l-fiche-section-head h2 {
  font-size: clamp(27px, 3.4vw, 33px);
  margin-top: 18px;
}

.r2l-fiche-section-sub {
  margin-top: 14px;
  color: var(--r2l-terre-corps);
  font-size: 17px;
}

/* boutons dans la fiche — pill shape harmonisé avec le design */
.r2l-fiche .r2l-btn,
.r2l-fiche-reserve .r2l-btn,
.r2l-fiche-sticky .r2l-btn {
  border-radius: 100px;
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .r2l-fiche-sticky {
    transition: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ===== VOTRE DÉPART v2 =====
   Refonte de la section réservation (fiche single voyage).
   Source visuelle : _artefacts/r2l-votre-depart-v2.html.
   Tout est scopé sous .r2l-depart / .r2l-depart-wrap pour éviter
   les conflits de spécificité avec le monolithe ci-dessus.
   Couleurs mappées sur les tokens du thème quand l'équivalent existe ;
   teintes spécifiques (verts, lignes, card) reprises de la maquette.
   ══════════════════════════════════════════════════════════════ */

.r2l-depart-wrap {
  /* variables locales scopées (pas de fuite globale) */
  --d-orange:       var(--r2l-flamingo);    /* #F55F2A — CTA */
  --d-orange-dark:  #E04F1E;
  --d-noir:         var(--r2l-charbon);     /* #2C282A */
  --d-brown:        var(--r2l-terre-sec);   /* #8B7355 */
  --d-meta:         #6A615C;
  --d-card:         #FBFAF8;
  --d-opt:          var(--r2l-sable-1);     /* #F7F3EE */
  --d-line:         rgba(44, 40, 42, .12);
  --d-line-soft:    rgba(44, 40, 42, .07);

  /* Surface continue : transparente sur le fond de base. Le relief vient
     de la carte .r2l-depart__card (claire, surélevée + ombre). */
  background: transparent;
  padding: 36px var(--r2l-gutter) 56px;
  display: flex;
  justify-content: center;
}

.r2l-depart {
  width: 100%;
  max-width: var(--r2l-container);

  /* v3 — vert plus vif, déclaré EN LOCAL (n'écrase pas les tokens globaux) */
  --r2l-vert:      #2A7D44;
  --r2l-vert-dot:  #45B25E;
  --r2l-vert-bg:   #E4F1E2;

  /* Alerte rareté (« dernières places ») — déclarée EN LOCAL, scopée à ce
     composant. Exception assumée à la règle « Flamingo = CTA uniquement » :
     signal de rareté sur la fiche voyage. Teinte texte assombrie pour rester
     ≥ 4.5:1 sur le fond pêche. Ne pas réutiliser hors de ce bloc. */
  --r2l-alerte:      #B93E14;
  --r2l-alerte-dot:  var(--r2l-flamingo);
  --r2l-alerte-bg:   #FDEBE3;
  --r2l-alerte-bord: rgba(245, 95, 42, .38);
}

/* ── Carte ── */
.r2l-depart__card {
  background: var(--d-card);
  border: 1px solid var(--d-line-soft);
  border-radius: 20px;
  padding: 32px 40px 28px;
  box-shadow: 0 1px 2px rgba(44, 40, 42, .04),
              0 28px 56px -30px rgba(44, 40, 42, .28);
}

/* ── En-tête ── */
.r2l-depart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.r2l-depart__date {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: var(--r2l-fiche-titre);   /* aligné sur la taille des H2 de section */
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--d-noir);
  margin: 0;
}

.r2l-depart__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 1rem;
  color: var(--d-meta);
}
.r2l-depart__meta-i {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.r2l-depart__meta-i strong {
  color: var(--d-noir);
  font-weight: 600;
}
.r2l-depart__meta-i svg {
  width: 18px;
  height: 18px;
  color: var(--d-brown);
  flex: none;
}

/* séparateur point */
.r2l-depart__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #C9BEAF;
  flex: none;
}

/* ── Pill disponibilité + pulse ── */
.r2l-depart__places {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--r2l-vert-bg);
  color: var(--r2l-vert);
  font-weight: 600;
  font-size: .95rem;
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.r2l-depart__pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--r2l-vert-dot);
  flex: none;
}
.r2l-depart__pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--r2l-vert-dot);
  animation: r2l-depart-pulse 2.2s ease-out infinite;
}
@keyframes r2l-depart-pulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(3); opacity: 0;  }
  100% { transform: scale(3); opacity: 0;  }
}
.r2l-depart__places--complet {
  background: rgba(44, 40, 42, .06);
  color: var(--d-meta);
}

/* ── Variante alerte : dernières places (≤ R2L_PLACES_URGENT_SEUIL) ──
   Plus contrastée que la pill verte : bordure, halo, graisse 700 et picto
   d'avertissement Flamingo. */
.r2l-depart__places--urgent {
  gap: 9px;
  background: var(--r2l-alerte-bg);
  color: var(--r2l-alerte);
  border: 1px solid var(--r2l-alerte-bord);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 20px;
  box-shadow: 0 0 0 4px rgba(245, 95, 42, .10);
}
.r2l-depart__places-ic {
  display: inline-flex;
  flex: none;
  color: var(--r2l-alerte-dot);
}
.r2l-depart__places-ic svg {
  display: block;
  width: 19px;
  height: 19px;
}
html.js .r2l-depart__places--urgent .r2l-depart__places-ic {
  animation: r2l-depart-alerte 2.4s ease-in-out infinite;
}
@keyframes r2l-depart-alerte {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.14); opacity: .72; }
}

.r2l-depart__rule {
  height: 1px;
  background: var(--d-line);
  border: 0;
  margin: 22px 0;
}

/* ── Sélecteur catégorie moto (mode B) ── */
.r2l-depart__cat {
  margin-bottom: 18px;
}
.r2l-depart__cat-label {
  display: block;
  font-size: .92rem;
  color: var(--d-meta);
  margin-bottom: 12px;
}
.r2l-depart__cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.r2l-depart__cat-pills button {
  font-family: var(--r2l-font-corps);
  font-size: .95rem;
  font-weight: 600;
  color: var(--d-noir);
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.r2l-depart__cat-pills button:hover {
  border-color: rgba(44, 40, 42, .28);
}
.r2l-depart__cat-pills button.is-active {
  background: var(--d-noir);
  border-color: var(--d-noir);
  color: #fff;
}
.r2l-depart__cat-models {
  margin: 14px 0 0;
  font-size: .92rem;
  color: var(--d-meta);
}
.r2l-depart__cat-models b {
  color: var(--d-noir);
  font-weight: 600;
}

/* ── Options de prix ── */
.r2l-depart__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.r2l-depart__opt {
  background: var(--d-opt);
  border: 1px solid var(--d-line-soft);
  border-radius: 14px;
  padding: 18px 20px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.r2l-depart__opt:hover {
  border-color: rgba(44, 40, 42, .18);
  box-shadow: 0 14px 30px -22px rgba(44, 40, 42, .4);
  transform: translateY(-2px);
}
.r2l-depart__opt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--d-line-soft);
  margin-bottom: 4px;
}
.r2l-depart__opt-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--d-line-soft);
  color: var(--d-noir);
}
.r2l-depart__opt-ic svg {
  width: 21px;
  height: 21px;
}
.r2l-depart__opt-title {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--d-noir);
  line-height: 1.1;
}
.r2l-depart__opt-title span {
  font-family: var(--r2l-font-corps);
  font-weight: 500;
  color: var(--d-brown);
  font-size: .92rem;
  margin-left: 6px;
}
.r2l-depart__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
}
.r2l-depart__line + .r2l-depart__line {
  border-top: 1px solid var(--d-line-soft);
}
.r2l-depart__line-label {
  font-size: 1rem;
  color: var(--d-meta);
}
.r2l-depart__line-sub {
  display: block;
  font-size: .82rem;
  font-style: italic;
  color: var(--r2l-vert);
  margin-top: 3px;
}
.r2l-depart__line-sub svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}
.r2l-depart__line-price {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--d-noir);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Garantie + CTA ── */
.r2l-depart__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.r2l-depart__trust {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--d-meta);
}
.r2l-depart__trust strong,
.r2l-depart__trust b {
  color: var(--d-noir);
  font-weight: 600;
}
.r2l-depart__garanti {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--r2l-vert);
}
.r2l-depart__garanti-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--r2l-vert-bg);
  color: var(--r2l-vert);
}
.r2l-depart__garanti-ic svg {
  width: 18px;
  height: 18px;
}
.r2l-depart__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.r2l-depart__btn {
  font-family: var(--r2l-font-corps);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* v3 — hovers explicites & blindés contre le a:hover global (main.css:46
   `a:hover{color:flamingo}` = spéc. 0,1,1). On préfixe par .r2l-depart pour
   passer en 0,2,x et imposer la couleur de texte sur tous les états. */
.r2l-depart .r2l-depart__btn {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.r2l-depart .r2l-depart__btn:focus-visible {
  outline: 2px solid var(--d-orange);
  outline-offset: 3px;
}

.r2l-depart .r2l-depart__btn--ghost,
.r2l-depart .r2l-depart__btn--ghost:link,
.r2l-depart .r2l-depart__btn--ghost:visited {
  background: transparent;
  color: var(--d-noir);
  border: 1.5px solid rgba(44, 40, 42, .28);
}
.r2l-depart .r2l-depart__btn--ghost:hover,
.r2l-depart .r2l-depart__btn--ghost:focus {
  background: var(--d-noir);
  color: #fff;
  border-color: var(--d-noir);
}

.r2l-depart .r2l-depart__btn--primary,
.r2l-depart .r2l-depart__btn--primary:link,
.r2l-depart .r2l-depart__btn--primary:visited {
  background: var(--d-orange);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(245, 95, 42, .8);
}
.r2l-depart .r2l-depart__btn--primary:hover,
.r2l-depart .r2l-depart__btn--primary:focus {
  background: var(--d-orange-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px rgba(245, 95, 42, .95);
}
.r2l-depart .r2l-depart__btn--primary svg {
  width: 18px;
  height: 18px;
  transition: transform .18s ease;
}
.r2l-depart .r2l-depart__btn--primary:hover svg {
  transform: translateX(3px);
}

/* focus visible — pills & lien autres départs (a11y) */
.r2l-depart__cat-pills button:focus-visible,
.r2l-depart__more a:focus-visible {
  outline: 2px solid var(--d-orange);
  outline-offset: 3px;
}

/* ── Note Québec (v3 — cadrage service, icône téléphone) ── */
.r2l-depart__note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #F4EEE4;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 26px;
}
.r2l-depart__note[hidden] {
  display: none;
}
.r2l-depart__note-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  background: #EBE1D2;
  color: var(--d-brown);
}
.r2l-depart__note-ic svg {
  width: 18px;
  height: 18px;
}
.r2l-depart__note-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.r2l-depart__note-txt strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--d-noir);
}
.r2l-depart__note-txt span {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--d-meta);
}

.r2l-depart__complet-msg {
  margin-top: 20px;
  color: var(--d-meta);
  font-size: 1rem;
}

/* ── Lien autres départs ── */
.r2l-depart__more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.r2l-depart__more a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--d-noir);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s ease;
}
.r2l-depart__more a:hover {
  border-color: var(--d-orange);
}
.r2l-depart__more svg {
  width: 17px;
  height: 17px;
  color: var(--d-orange);
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .r2l-depart-wrap { padding: 40px 16px 64px; }
  .r2l-depart__card { padding: 34px 24px 30px; border-radius: 22px; }
  .r2l-depart__options { grid-template-columns: 1fr; }
  .r2l-depart__foot { align-items: stretch; }
  /* CTA empilés l'un sous l'autre, chacun pleine largeur, texte 1 ligne */
  .r2l-depart__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .r2l-depart__btn { width: 100%; justify-content: center; white-space: nowrap; }
}

/* Très petits écrans (~320–380px) : on resserre légèrement pour garantir que
   « Être rappelé par un conseiller » tienne sur une seule ligne (les 2 variantes). */
@media (max-width: 380px) {
  .r2l-depart__btn { padding: 14px 16px; font-size: .9375rem; }
  .r2l-depart .r2l-depart__btn--primary svg { display: none; }
}
@media (max-width: 340px) {
  .r2l-depart__btn { padding: 13px 12px; font-size: .875rem; }
}

/* ── Accessibilité mouvement ── */
@media (prefers-reduced-motion: reduce) {
  .r2l-depart__pulse::before { animation: none; }
  .r2l-depart__places-ic { animation: none !important; }
  .r2l-depart__opt,
  .r2l-depart__btn,
  .r2l-depart__btn--primary svg,
  .r2l-depart__more a { transition: none; }
}
/* ===== /VOTRE DÉPART v2 ===== */


/* ══════════════════════════════════════════════════════════════
   ===== GALERIE v2 (catalogue) =====
   Refonte de la section galerie (fiche single voyage).
   Source visuelle : _artefacts/r2l-galerie-catalogue.html.
   Section sombre, bento numéroté + lightbox. Tout scopé sous .r2lg.
   Couleurs mappées sur les tokens thème (charbon/sable/flamingo) ;
   teintes locales (muted, line, tuiles) déclarées en local.
   ══════════════════════════════════════════════════════════════ */

.r2lg {
  /* variables locales scopées */
  --g-orange: #C2A98F;             /* Terre clair — fond sombre, jamais Flamingo */
  --g-sand:   var(--r2l-sable-1);          /* #F7F3EE */
  --g-muted:  rgba(247, 243, 238, .58);
  --g-line:   rgba(247, 243, 238, .16);

  /* Ancre sombre unifiée (#0c0a09) — attaque FRANCHE du noir (point 2 : le
     fondu local créait une arête/banding). C'est la rampe tonale au-dessus
     (beige profond #E6DDD0 en bas de l'inclus) qui adoucit perceptuellement
     l'entrée, plus aucun dégradé ici. Raccord invisible avec niveau. */
  background: var(--r2l-fiche-dark);
}
.r2lg__inner {
  max-width: var(--r2l-container-max);   /* contenu 1200 (gutter hors cap) */
  margin: 0 auto;
  padding: 72px var(--r2l-gutter) 80px;
}

/* ── en-tête ── */
.r2lg__title {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: var(--r2l-fiche-titre);
  line-height: 1.05;
  margin: 14px 0 34px;
  color: var(--g-sand);
}

/* ── bento catalogue ── */
.r2lg-cat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 27vh));
  gap: 14px;
}
.r2lg-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #3a3436, #262223);
}
.r2lg-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.r2lg-tile:hover img { transform: scale(1.05); }
.r2lg-tile:focus-visible { outline: 2px solid var(--r2l-terre-sec); outline-offset: 3px; }

/* scrim + légende numérotée */
.r2lg-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 18, .66), rgba(20, 17, 18, 0) 46%);
  pointer-events: none;
}
.r2lg-tile figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 22px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.r2lg-idx {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: .82rem;
  color: var(--g-orange);
  letter-spacing: .04em;
}

/* placements bento — défaut (5 tuiles) */
.r2lg-tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.r2lg-tile--2 { grid-column: 3;     grid-row: 1; }
.r2lg-tile--3 { grid-column: 4;     grid-row: 1; }
.r2lg-tile--4 { grid-column: 3;     grid-row: 2; }
.r2lg-tile--5 { grid-column: 4;     grid-row: 2; }

/* variantes < 5 photos — pas de cellule vide */
.r2lg-cat--1 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 54vh); }
.r2lg-cat--1 .r2lg-tile--1 { grid-column: 1; grid-row: 1; }

.r2lg-cat--2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: minmax(0, 46vh); }
.r2lg-cat--2 .r2lg-tile--1 { grid-column: 1; grid-row: 1; }
.r2lg-cat--2 .r2lg-tile--2 { grid-column: 2; grid-row: 1; }

.r2lg-cat--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 24vh)); }
.r2lg-cat--3 .r2lg-tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.r2lg-cat--3 .r2lg-tile--2 { grid-column: 3;     grid-row: 1; }
.r2lg-cat--3 .r2lg-tile--3 { grid-column: 3;     grid-row: 2; }

.r2lg-cat--4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 24vh)); }
.r2lg-cat--4 .r2lg-tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.r2lg-cat--4 .r2lg-tile--2 { grid-column: 3;     grid-row: 1; }
.r2lg-cat--4 .r2lg-tile--3 { grid-column: 4;     grid-row: 1; }
.r2lg-cat--4 .r2lg-tile--4 { grid-column: 3 / 5; grid-row: 2; }

/* overlay "+N" sur la dernière tuile visible */
.r2lg-tile__more {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 18, .55);
  color: #fff;
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 1.3rem;
}

/* ── bouton "voir les N photos" ── */
.r2lg-cat__foot { margin-top: 24px; display: flex; justify-content: center; }
.r2lg-more-btn {
  font-family: var(--r2l-font-corps);
  font-weight: 600;
  font-size: .98rem;
  color: var(--g-sand);
  background: transparent;
  border: 1.5px solid var(--g-line);
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background .2s, border-color .2s;
}
.r2lg-more-btn:hover { background: rgba(247, 243, 238, .08); border-color: rgba(247, 243, 238, .4); }
.r2lg-more-btn:focus-visible { outline: 2px solid var(--g-orange); outline-offset: 3px; }
.r2lg-more-btn svg { width: 17px; height: 17px; color: var(--g-orange); }

/* ── lightbox ── */
.r2lg-lb[hidden] { display: none; }
.r2lg-lb {
  position: fixed;
  inset: 0;
  /* au-dessus de TOUT le chrome : header (200), panneaux nav (300),
     sticky CTA (95), menu d'ancrage (90) — sinon le header recouvre
     la zone haut-droite et la croix de fermeture devient inatteignable. */
  z-index: 1000;
  background: rgba(15, 12, 13, .93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.r2lg-lb__img {
  max-width: 88vw;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  background: #262223;
}
.r2lg-lb__img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 88vw;
  max-height: 80vh;
}
.r2lg-lb__bar { display: flex; align-items: center; gap: 16px; margin-top: 18px; color: var(--g-sand); }
.r2lg-lb__count {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  color: var(--g-orange);
  font-size: .9rem;
  letter-spacing: .04em;
}
.r2lg-lb__cap { font-size: 1.02rem; }
.r2lg-lb__close {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;                      /* au-dessus de l'image et de la barre légende */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--g-line);
  background: rgba(40, 36, 37, .6);
  color: var(--g-sand);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s;
}
.r2lg-lb__close:hover {
  background: rgba(247, 243, 238, .14);
  border-color: rgba(247, 243, 238, .4);
}
.r2lg-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--g-line);
  background: rgba(40, 36, 37, .6);
  color: var(--g-sand);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.r2lg-lb__nav:hover { background: rgba(247, 243, 238, .14); }
.r2lg-lb__nav svg,
.r2lg-lb__close svg { width: 22px; height: 22px; }
.r2lg-lb__nav--prev { left: 24px; }
.r2lg-lb__nav--next { right: 24px; }
.r2lg-lb__close:focus-visible,
.r2lg-lb__nav:focus-visible { outline: 2px solid var(--g-orange); outline-offset: 2px; }

/* ── responsive ── */
@media (max-width: 760px) {
  .r2lg__inner { padding: 48px 18px 60px; }
  .r2lg-cat,
  .r2lg-cat--1, .r2lg-cat--2, .r2lg-cat--3, .r2lg-cat--4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 10px;
  }
  .r2lg-cat .r2lg-tile { aspect-ratio: 1 / 1; }
  .r2lg-cat .r2lg-tile--1 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
  .r2lg-cat .r2lg-tile--2,
  .r2lg-cat .r2lg-tile--3,
  .r2lg-cat .r2lg-tile--4,
  .r2lg-cat .r2lg-tile--5 { grid-column: auto; grid-row: auto; }
  .r2lg-lb__nav { width: 44px; height: 44px; }
}

/* ── accessibilité mouvement ── */
@media (prefers-reduced-motion: reduce) {
  .r2lg-tile img,
  .r2lg-more-btn { transition: none; }
}
/* ===== /GALERIE v2 ===== */


/* ══════════════════════════════════════════════════════════════
   SECTION MOTOS · grille — namespace .r2l-fiche-motos
   Toutes les motos visibles simultanément (pas de rail/carousel desktop).
   Fond charbon (token unifié). Gros chiffres décoratifs en très faible
   opacité. Contrat de révélation §11 : .js-reveal + .r2l-rise.
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-motos {
  --m-line:    rgba(247,243,238,.10);
  --m-sand:    #F7F3EE;
  --m-sand-m:  rgba(247,243,238,.58);
  background: var(--r2l-charbon);
  color: var(--m-sand);
  padding: clamp(52px,7vw,88px) var(--r2l-gutter);
  -webkit-font-smoothing: antialiased;
}
.r2l-fiche-motos__inner {
  max-width: var(--r2l-container);
  margin: 0 auto;
}

/* ── en-tête ── */
.r2l-fiche-motos .r2l-fiche-section-head h2 { color: var(--m-sand); }
.r2l-fiche-motos .r2l-fiche-section-sub     { color: var(--m-sand-m); }

/* ── grille motos : 3 colonnes desktop, 2 tablette, 1 mobile ── */
.r2l-fiche-moto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── carte moto ── */
.r2l-fiche-moto-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--m-line);
  border-radius: var(--r2l-card-radius);
  overflow: hidden;
}

/* badge catégorie tarifaire */
.r2l-fiche-moto-cat {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  background: rgba(44,40,42,.55);
  border: 1px solid rgba(247,243,238,.24);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* gros chiffre décoratif — crème à très faible opacité */
.r2l-fiche-moto-num {
  position: absolute;
  bottom: -6px;
  right: 10px;
  z-index: 0;
  font-family: var(--r2l-font-titres);
  font-weight: 800;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 1;
  color: rgba(247,243,238,.04);
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
}

.r2l-fiche-moto-photo {
  position: relative;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255,255,255,.02);
  z-index: 1;
}

.r2l-fiche-moto-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
  transition: transform .5s var(--r2l-ease-reveal);
}

.r2l-fiche-moto-card:hover .r2l-fiche-moto-photo img {
  transform: scale(1.04) translateY(-4px);
}

.r2l-fiche-moto-ph {
  color: rgba(247,243,238,.22);
}
.r2l-fiche-moto-ph .r2l-icon {
  width: 80px;
  height: 80px;
  display: block;
}

.r2l-fiche-moto-body {
  position: relative;
  z-index: 1;
  padding: 20px 22px 22px;
}

.r2l-fiche-moto-body h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--m-sand);
  margin: 0 0 14px;
  line-height: 1.2;
}

.r2l-fiche-moto-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.r2l-fiche-moto-spec {
  background: rgba(247,243,238,.07);
  border: 1px solid var(--m-line);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--m-sand-m);
}

.r2l-fiche-moto-spec b {
  color: var(--m-sand);
  font-family: var(--r2l-font-titres);
  font-weight: 600;
}

/* ── description courte de la moto ── */
.r2l-fiche-moto-desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.3em;
  color: var(--m-sand-m);
}

.r2l-fiche-moto-desc-more,
.r2l-fiche-moto-desc-less {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-family: inherit;
  color: var(--m-sand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .65;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.r2l-fiche-moto-desc-more:hover,
.r2l-fiche-moto-desc-less:hover { opacity: 1; }

.r2l-fiche-moto-desc-less { display: none; }

/* ── bandeau « propre moto » ── */
.r2l-fiche-moto-own {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: var(--r2l-card-radius);
  text-decoration: none;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--m-line);
  transition: border-color .25s var(--r2l-ease-reveal), background .25s;
}

.r2l-fiche-moto-own:hover {
  border-color: rgba(247,243,238,.28);
  background: rgba(255,255,255,.06);
}

.r2l-fiche-moto-own__ic {
  flex: none;
  width: 42px;
  height: 42px;
  color: rgba(247,243,238,.6);
}
.r2l-fiche-moto-own__ic .r2l-icon { width: 100%; height: 100%; display: block; }

.r2l-fiche-moto-own__txt {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--m-sand-m);
}
.r2l-fiche-moto-own__txt strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--m-sand);
}

.r2l-fiche-moto-own__arr {
  flex: none;
  font-size: 1.2rem;
  color: rgba(247,243,238,.45);
  transition: transform .25s var(--r2l-ease-reveal), color .25s;
}
.r2l-fiche-moto-own:hover .r2l-fiche-moto-own__arr {
  transform: translateX(5px);
  color: var(--m-sand);
}
.r2l-fiche-moto-own:focus-visible { outline: 2px solid var(--r2l-terre-sec); outline-offset: 3px; }

/* ── responsive ── */
@media (max-width: 960px) {
  .r2l-fiche-moto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .r2l-fiche-moto-grid { grid-template-columns: 1fr; }
  .r2l-fiche-moto-own { flex-wrap: wrap; }
  .r2l-fiche-moto-own__arr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .r2l-fiche-moto-card:hover .r2l-fiche-moto-photo img { transform: none; }
  .r2l-fiche-moto-own,
  .r2l-fiche-moto-own__arr { transition: none; }
}
/* ===== /SECTION MOTOS grille ===== */



/* ══════════════════════════════════════════════════════════════
   SECTION ACCOMPAGNEMENT — bento sable + carte suiveur — namespace .r2la
   Source : _artefacts/r2l-accompagnement.html.
   États : avec suiveur (défaut, 4 tuiles) · sans suiveur (.r2la--no-van).
   Révélation : contrat thème .js-reveal / .r2l-rise (pas d'anim autonome).
   ══════════════════════════════════════════════════════════════ */
.r2la{
  --sand:#F7F3EE; --sand2:#EDE6DB; --ink:#2C282A; --orange:#F55F2A; --brown:#8B7355;
  --ink-soft:rgba(44,40,42,.66); --ink-faint:rgba(44,40,42,.45);
  --card:#FBF9F5; --line:rgba(44,40,42,.10);
  /* Section CLAIRE (bento sable) = landing du bloc sombre. Transparente sur le
     fond de base → fait partie de la surface basse continue. Le bloc sombre se
     termine à MOTOS : transition motos(noir)→accompagnement(clair) en coupe
     nette (franc, cohérent point 2). Titre charbon, lisible (cf. quote-h). */
  position:relative;background:transparent;color:var(--ink);
  padding:clamp(64px,9vw,128px) var(--r2l-gutter);-webkit-font-smoothing:antialiased;
}
.r2la__wrap{position:relative;z-index:1;max-width:var(--r2l-container);margin:0 auto;}
.r2la__quote-h{margin:0 0 clamp(40px,5vw,64px);text-align:center;font-family:var(--r2l-font-titres),sans-serif;font-weight:700;
  letter-spacing:-.012em;line-height:1.16;
  /* Signature — seul moment statement de la page (§11 : 40–60px Cabinet italic).
     Override le token --r2l-fiche-titre (ramené à 26-28px pour les h2 de section)
     pour maintenir l'amplitude de la signature. */
  font-size:clamp(36px, 4.4vw, 52px);
  font-style:normal;color:var(--r2l-charbon);}
/* accents éditoriaux : seuls « seul » / « libre » en terre (token, jamais d'orange).
   Cabinet Grotesk n'a pas d'italique natif (font-style:italic = droit synthétisé
   nul) → slant réel via skewX, scopé à la signature. inline-block requis pour
   appliquer le transform sans casser le flux de la ligne. */
.r2la__quote-h em{
  display:inline-block;
  font-style:normal;
  transform:skewX(-11deg);
  font-weight:700;
  color:var(--r2l-accent-titre);
}
.r2la__text{margin:0;font-size:1.02rem;line-height:1.66;color:var(--ink-soft);}

.r2la__portrait{position:relative;margin:0;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#cdbfae,#9a8a78);display:flex;}
/* Le plugin WebP réécrit <img class="r2la__img"> en <picture class="r2la__img"><img>…
   → le cover doit être posé sur les DEUX (object-fit n'a aucun effet sur <picture>,
   et l'<img> interne retomberait sur le height:auto global de main.css). */
.r2la__img,
.r2la__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.r2la__ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.55);}
.r2la__ph-ic{width:54px;height:54px;} .r2la__ph-ic .r2l-icon{width:100%;height:100%;display:block;}
.r2la__ph span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.r2la__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 28px 24px;background:linear-gradient(0deg,rgba(20,18,19,.82),transparent);color:#fff;}
.r2la__cap strong{display:block;font-family:var(--r2l-font-titres),sans-serif;font-weight:700;font-size:1.5rem;}

.r2la__bio{padding:clamp(24px,2.6vw,36px) clamp(28px,2.8vw,40px);display:flex;flex-direction:column;justify-content:center;}
/* Eyebrow bio : picto moto en tête (pendant clair de .r2la__van-ic), filet retiré. */
.r2la__bio-eyebrow{gap:12px;}
.r2la__bio-eyebrow::before{content:none;}
.r2la__bio-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(44,40,42,.06);color:var(--ink);}
.r2la__bio-ic .r2l-icon{width:19px;height:19px;display:block;}

/* Tuile Véhicule suiveur — DESIGN D'ORIGINE (charbon, icône, checklist). */
.r2la__van{background:var(--ink);color:#fff;border-radius:20px;padding:30px;display:flex;flex-direction:column;}
.r2la__van-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);}
.r2la__van-ic .r2l-icon{width:23px;height:23px;display:block;}
.r2la__van-title{margin:0 0 10px;font-family:var(--r2l-font-titres),sans-serif;font-weight:700;font-size:1.45rem;color:inherit;}
.r2la__van-text{margin:0;font-size:.96rem;line-height:1.6;color:rgba(247,243,238,.62);}
.r2la__checks{list-style:none;margin:0;padding:0;display:flex;}
.r2la__checks--row{flex-wrap:wrap;gap:10px 22px;margin-top:20px;}
.r2la__checks--row li{position:relative;padding-left:26px;font-size:.9rem;color:rgba(247,243,238,.82);}
.r2la__checks li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F55F2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");}

/* Case « Encadré… » — DESIGN D'ORIGINE (crème, icône bouclier orange). */
.r2la__accent{border-radius:20px;padding:26px;}
.r2la__accent--claim{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:16px;}
.r2la__accent--claim .r2la__accent-ic{width:30px;height:30px;color:var(--orange);flex:none;}
.r2la__accent--claim .r2la__accent-ic .r2l-icon{width:100%;height:100%;display:block;}
.r2la__accent--claim p{margin:0;font-family:var(--r2l-font-titres),sans-serif;font-weight:500;font-size:1.22rem;line-height:1.28;color:var(--ink);}

/* ══ BENTO — SEULE MODIF vs bento d'origine : photo + texte GROUPÉS (jonction NULLE).
   Véhicule suiveur + case = tuiles distinctes, design d'origine, écarts conservés. ══ */
.r2la__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) 1.4fr minmax(0,.6fr);
  grid-template-rows:auto auto;
  gap:0;
  align-items:stretch;
}
.r2la__grid .r2la__portrait{grid-column:1;grid-row:1 / 3;border-radius:20px 0 20px 20px;min-height:0;}
.r2la__grid .r2la__bio{grid-column:2 / 4;grid-row:1;background:var(--sand2);border-radius:0 20px 20px 0;}
.r2la__grid .r2la__van{grid-column:2;grid-row:2;margin:18px 9px 0 18px;}
.r2la__grid .r2la__accent{grid-column:3;grid-row:2;margin:18px 0 0 9px;}

/* Sans véhicule suiveur — carte groupée photo + texte, plein largeur. */
.r2la--no-van .r2la__grid{grid-template-columns:minmax(0,.82fr) 1fr;grid-template-rows:auto;}
.r2la--no-van .r2la__grid .r2la__portrait{grid-row:1;min-height:clamp(320px,32vw,420px);}
.r2la--no-van .r2la__grid .r2la__bio{grid-column:2;grid-row:1;border-radius:0 20px 20px 0;}

@media(max-width:900px){
  .r2la::before{height:70px;}
  .r2la__grid,.r2la--no-van .r2la__grid{grid-template-columns:1fr;grid-template-rows:auto;}
  .r2la__grid .r2la__portrait{grid-column:1;grid-row:auto;border-radius:20px 20px 0 0;min-height:clamp(300px,72vw,400px);}
  .r2la__grid .r2la__bio,.r2la--no-van .r2la__grid .r2la__bio{grid-column:1;grid-row:auto;border-radius:0 0 20px 20px;}
  .r2la__grid .r2la__van{grid-column:1;grid-row:auto;margin:18px 0 0;}
  .r2la__grid .r2la__accent{grid-column:1;grid-row:auto;margin:18px 0 0;}
  .r2la__checks--row{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){.r2la *{animation:none!important;transition:none!important;}}
/* ===== /SECTION ACCOMPAGNEMENT (.r2la) ===== */


/* ══════════════════════════════════════════════════════════════
   MENU D'ANCRAGE FLOTTANT — rail de points, position droite (.r2l-anchor)
   Source : _artefacts/r2l-menu-ancrage-FINAL.html. fiche.css est chargé
   uniquement sur la fiche (voyage/circuit) → ces règles sont fiche-scopées,
   y compris scroll-padding-top sur html. Apparition + scroll-spy : fiche.js
   (IO dédié, indépendant du reveal de main.js). JAMAIS d'orange.
   ══════════════════════════════════════════════════════════════ */

/* Ancrage natif : décale la cible sous le header sticky (72px) + air. */
html { scroll-padding-top: calc(var(--r2l-header-height) + 16px); scroll-behavior: smooth; }

.r2l-anchor {
  position: fixed; top: 50%; right: 26px;
  transform: translateY(-50%) translateX(14px);
  z-index: 90;                 /* au-dessus du contenu, sous le header (200) et la sticky (95) */
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--r2l-ease-reveal), transform .5s var(--r2l-ease-reveal);
  --ink:   var(--r2l-charbon);   /* point + étiquette (fond) sur fond clair */
  --paper: var(--r2l-sable-1);   /* texte de l'étiquette (inversé) sur fond clair */
}
.r2l-anchor.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.r2l-anchor.is-on-dark { --ink: #f1ebe3; --paper: #15110f; }   /* bascule sur section sombre */

.r2l-anchor__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* Lien = zone de survol confortable (on ne vise plus le point pile). Resserré. */
.r2l-anchor a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  text-decoration: none; color: var(--ink); padding: 5px 9px; outline: none;
}
.r2l-anchor a:focus-visible { outline: 2px solid var(--r2l-terre-sec); outline-offset: 3px; border-radius: 6px; }

.r2l-anchor__dot {
  width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .32;
  transition: .28s var(--r2l-ease-reveal); flex: none;
}
.r2l-anchor a:hover .r2l-anchor__dot { opacity: .9; }

/* Étiquette : tooltip net en position ABSOLUE (n'élargit pas la colonne),
   fond plein inversé (--ink) / texte (--paper) → lisible sur clair ET sombre. */
.r2l-anchor__txt {
  position: absolute; right: calc(100% + 4px); top: 50%;
  white-space: nowrap; font-size: 12px; letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: .24s var(--r2l-ease-reveal);
  background: var(--ink); color: var(--paper);
  padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(44,40,42,.20);
}
.r2l-anchor a:hover .r2l-anchor__txt { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Point actif : allongé, charbon/crème (zéro orange). */
.r2l-anchor a[aria-current="true"] .r2l-anchor__dot { opacity: 1; height: 18px; }
.r2l-anchor a[aria-current="true"]:hover .r2l-anchor__txt { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 760px) { .r2l-anchor { display: none; } }   /* mobile : hors périmètre */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r2l-anchor, .r2l-anchor * { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   BLOG LIÉS — « Pour aller plus loin » — namespace .r2l-blog-lies
   Circuit uniquement. 3 cartes article : image + date + titre.
   ══════════════════════════════════════════════════════════════ */
.r2l-blog-lies {
  --ink:   var(--r2l-charbon);
  --brown: var(--r2l-terre-sec);
  --serif: var(--r2l-font-titres);
  --sans:  var(--r2l-font-corps);
  --line:  #E2D8D2;
  border-top: 1px solid var(--line);
  padding: var(--r2l-f-section-sm) 0 var(--r2l-f-section);
  background: transparent;
}

.r2l-blog-lies__head { margin-bottom: 36px; }

.r2l-blog-lies__title {
  margin: 12px 0 0;
  font: 700 clamp(22px, 2.8vw, 30px) / 1.15 var(--serif);
  color: var(--ink);
  letter-spacing: -.01em;
}

.r2l-blog-lies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Card article ── */
.r2l-blog-lies-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
  overflow: hidden;
  background: var(--r2l-fond-haut);
  box-shadow: var(--r2l-card-shadow);
  transition: box-shadow .28s var(--r2l-ease-reveal), transform .28s var(--r2l-ease-reveal), border-color .2s;
}

.r2l-blog-lies-card:hover {
  border-color: var(--r2l-charbon);
  box-shadow: 0 4px 8px rgba(44,40,42,.06), 0 20px 48px rgba(44,40,42,.13);
  transform: translateY(-3px);
}

.r2l-blog-lies-card:focus-visible {
  outline: 2px solid var(--r2l-terre-sec);
  outline-offset: 3px;
}

.r2l-blog-lies-card__frame {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex: none;
  background: var(--r2l-sable-3);
}

.r2l-blog-lies-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--r2l-ease-reveal);
}

.r2l-blog-lies-card:hover .r2l-blog-lies-card__frame img { transform: scale(1.04); }

.r2l-blog-lies-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--r2l-sable-4);
}

.r2l-blog-lies-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  gap: 6px;
}

.r2l-blog-lies-card__date {
  font: 400 12px / 1 var(--sans);
  color: var(--brown);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.r2l-blog-lies-card__title {
  margin: 0;
  font: 600 16px / 1.35 var(--serif);
  color: var(--ink);
  flex: 1;
}

.r2l-blog-lies-card__cta {
  display: block;
  margin-top: 14px;
  font: 500 13px / 1 var(--sans);
  color: var(--brown);
  letter-spacing: .04em;
  transition: color .2s;
}

.r2l-blog-lies-card:hover .r2l-blog-lies-card__cta { color: var(--ink); }

@media (max-width: 900px) { .r2l-blog-lies__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .r2l-blog-lies__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .r2l-blog-lies-card, .r2l-blog-lies-card__frame img { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   #37 sous-ligne CTA · #39 accordéon Options & suppléments
   (bloc prix — charbon, jamais orange)
   ══════════════════════════════════════════════════════════════ */
.r2l-depart__cta-sub{
  margin:10px 0 0;
  text-align:center;
  font-size:.82rem;
  color:var(--r2l-terre-corps);
}

.r2l-depart__addons{
  margin-top:18px;
  border-top:1px solid var(--r2l-sable-4);
  padding-top:4px;
}
.r2l-depart__addons-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;
  padding:12px 2px;
  font-family:var(--r2l-font-corps);font-weight:700;font-size:.95rem;
  color:var(--r2l-charbon);
}
.r2l-depart__addons-summary::-webkit-details-marker{display:none;}
.r2l-depart__addons-summary:focus-visible{outline:2px solid var(--r2l-charbon);outline-offset:3px;border-radius:6px;}
.r2l-depart__addons-chevron{display:inline-flex;color:var(--r2l-terre-sec);transition:transform .25s ease;}
.r2l-depart__addons-chevron .r2l-icon{width:18px;height:18px;display:block;}
.r2l-depart__addons[open] .r2l-depart__addons-chevron{transform:rotate(180deg);}
.r2l-depart__addons-list{list-style:none;margin:0;padding:2px 2px 6px;}
.r2l-depart__addon{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid var(--r2l-sable-3);
}
.r2l-depart__addon:first-child{border-top:0;}
.r2l-depart__addon-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.r2l-depart__addon-label{font-size:.92rem;font-weight:600;color:var(--r2l-charbon);}
.r2l-depart__addon-desc{font-size:.8rem;line-height:1.4;color:var(--r2l-terre-corps);}
.r2l-depart__addon-price{flex:none;white-space:nowrap;font-family:var(--r2l-font-titres);font-weight:700;font-size:.95rem;color:var(--r2l-charbon);}

/* ══════════════════════════════════════════════════════════════
   #40 Carte du parcours — embed MyMaps sous la section programme
   ══════════════════════════════════════════════════════════════ */
.r2l-fiche-carte{padding:clamp(48px,6vw,80px) var(--r2l-gutter);}
.r2l-fiche-carte__wrap{max-width:var(--r2l-container);margin:0 auto;}
.r2l-fiche-carte__head{margin-bottom:clamp(20px,3vw,32px);}
.r2l-fiche-carte__h2{margin:8px 0 0;font-family:var(--r2l-font-titres),sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.01em;color:var(--r2l-charbon);}
.r2l-fiche-carte__embed{border-radius:18px;overflow:hidden;border:1px solid var(--r2l-sable-4);box-shadow:0 12px 30px -20px rgba(44,40,42,.28);line-height:0;background:var(--r2l-sable-2);}
.r2l-fiche-carte__embed iframe{display:block;width:100%;border:0;}