/* ── Road2Luxe — location-moto.css ──────────────────────────────
   Landing location d'une moto (/nos-motos/<slug>/).

   Registre distinct de la page voyage : ici on vend une machine, pas une
   expérience. Plus factuel, plus dense — mais même palette, mêmes tokens,
   et Flamingo toujours réservé aux CTA.
   ──────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   1 — EN-TÊTE
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-hero {
  background: linear-gradient(180deg, var(--r2l-sable-1) 0%, var(--r2l-sable-0) 100%);
  padding-block: var(--r2l-rythme-inter) var(--r2l-rythme-intra);
}

.r2l-locmoto-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--r2l-s-6);
}

.r2l-locmoto-hero__titre {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h1);
  font-weight: var(--r2l-fw-h1);
  line-height: 1.1;
  color: var(--r2l-charbon);
  margin: var(--r2l-s-2) 0 var(--r2l-s-1);
}

.r2l-locmoto-hero__gamme {
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-corps);
  margin: 0 0 var(--r2l-s-2);
}

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

/* Champ wysiwyg : le conteneur reçoit des blocs (p, ul, ol). */
.r2l-locmoto-hero__desc {
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
  margin: 0 0 var(--r2l-s-2);
  max-width: 56ch;
}

.r2l-locmoto-hero__desc > :first-child { margin-top: 0; }
.r2l-locmoto-hero__desc > :last-child  { margin-bottom: 0; }
.r2l-locmoto-hero__desc p { margin: 0 0 .75em; }
.r2l-locmoto-hero__desc ul,
.r2l-locmoto-hero__desc ol { margin: 0 0 .75em; padding-left: 1.15em; }
.r2l-locmoto-hero__desc li { margin-bottom: .3em; }
.r2l-locmoto-hero__desc strong,
.r2l-locmoto-hero__desc b { color: var(--r2l-charbon); font-weight: 600; }

.r2l-locmoto-hero__agence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-sec);
  margin: 0 0 var(--r2l-s-3);
}

.r2l-locmoto-hero__agence svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.r2l-locmoto-hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r2l-s-2);
  margin: 0;
}

.r2l-locmoto-hero__prix {
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}

.r2l-locmoto-hero__prix b {
  font-family: var(--r2l-font-titres);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--r2l-charbon);
}

/* Scène photo — même grammaire que la card du catalogue voyage */
.r2l-locmoto-hero__scene {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r2l-card-radius);
  background: radial-gradient(120% 80% at 50% 20%, #FFFFFF 0%, var(--r2l-sable-1) 62%, var(--r2l-sable-2) 100%);
}

.r2l-locmoto-hero__scene img {
  position: absolute;
  top: 20px;
  left: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 52px);
  max-width: none;
  object-fit: contain;
  z-index: 1;
}

.r2l-locmoto-hero__ombre {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 62%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(44, 40, 42, .22) 0%, transparent 72%);
  filter: blur(4px);
}


/* ═══════════════════════════════════════════════════════════════
   2 — EN-TÊTES DE SECTION (communs)
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-sec__head {
  margin-bottom: var(--r2l-s-4);
  max-width: 60ch;
}

.r2l-locmoto-sec__head h2 {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: 10px 0 8px;
}

.r2l-locmoto-sec__note {
  font-size: var(--r2l-text-meta);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
  margin: 0;
}

.r2l-locmoto-sec__soustitre {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--r2l-charbon);
  margin: 0 0 var(--r2l-s-2);
}


/* ═══════════════════════════════════════════════════════════════
   3 — TARIFS
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-tarifs {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-0);
}

.r2l-locmoto-durees {
  margin-bottom: var(--r2l-s-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.r2l-locmoto-durees::-webkit-scrollbar {
  display: none;
}

.r2l-locmoto-durees .r2l-segmented {
  width: max-content;
}

/* Une carte par formule kilométrique */
.r2l-locmoto-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--r2l-s-2);
}

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

.r2l-locmoto-formule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--r2l-card-pad);
  background: var(--r2l-blanc);
  border: 1px solid var(--r2l-sable-3);
  border-radius: var(--r2l-card-radius);
  transition: border-color var(--r2l-transition-md), box-shadow var(--r2l-transition-md);
}

.r2l-locmoto-formule:hover {
  border-color: var(--r2l-sable-4);
  box-shadow: var(--r2l-card-shadow);
}

.r2l-locmoto-formule__nom {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--r2l-charbon);
}

.r2l-locmoto-formule__km {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
}

.r2l-locmoto-formule__prix {
  font-family: var(--r2l-font-titres);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--r2l-charbon);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}

.r2l-locmoto-formule__unite {
  font-family: var(--r2l-font-corps);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--r2l-terre-sec);
  margin-left: 2px;
}

.r2l-locmoto-formule .r2l-link-arrow {
  margin-top: 12px;
  font-size: var(--r2l-text-caption);
}

.r2l-locmoto-caution {
  margin: var(--r2l-s-3) 0 0;
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-sec);
}

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


/* ═══════════════════════════════════════════════════════════════
   4 — CARACTÉRISTIQUES
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-specs {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-1);
}

.r2l-locmoto-specs__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--r2l-s-6);
  align-items: start;
}

.r2l-locmoto-specs__liste {
  margin: 0;
  border-top: 1px solid var(--r2l-sable-4);
}

.r2l-locmoto-specs__liste > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r2l-s-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--r2l-sable-4);
}

.r2l-locmoto-specs__liste dt {
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}

.r2l-locmoto-specs__liste dd {
  margin: 0;
  font-family: var(--r2l-font-titres);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--r2l-charbon);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.r2l-locmoto-equip__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px var(--r2l-s-2);
}

.r2l-locmoto-equip__liste li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}

.r2l-locmoto-equip__liste svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--r2l-kaki);
}


/* ═══════════════════════════════════════════════════════════════
   5 — COMPRIS / CONDITIONS / ONE WAY
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-cadre {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-0);
}

.r2l-locmoto-cadre__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--r2l-s-6);
  align-items: start;
}

.r2l-locmoto-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r2l-locmoto-liste li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--r2l-text-meta);
  line-height: 1.5;
  color: var(--r2l-terre-corps);
}

.r2l-locmoto-liste svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--r2l-kaki);
  transform: translateY(2px);
}

.r2l-locmoto-liste--sobre li {
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--r2l-sable-3);
}

.r2l-locmoto-liste--sobre b {
  color: var(--r2l-charbon);
  font-weight: 600;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   6 — PAGE HUB : en-tête, formules, parc, grille complète
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   HERO DU HUB — le parc mis en scène
   ═══════════════════════════════════════════════════════════════

   Ancre sombre, pas photo. Deux raisons : l'univers location doit se
   distinguer au premier coup d'œil du sable du site voyage, et les visuels
   du parc sont des découpes transparentes sans ombre — elles ne tiennent
   que sur un fond uni, avec un halo et une ombre au sol reconstruits ici.
   ═══════════════════════════════════════════════════════════════ */

.r2l-lochero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--r2l-charbon);
  color: var(--r2l-sable-0);
  /* Le header est en over-dark : le contenu démarre sous lui. */
  padding-block: calc(var(--r2l-header-height, 72px) + var(--r2l-s-6))
                 var(--r2l-s-4);
}

/* Flaque de lumière derrière la machine — sans elle, une découpe posée sur
   du charbon plat flotte dans le vide. */
.r2l-lochero__halo {
  position: absolute;
  z-index: -1;
  top: 42%; right: 14%;
  width: min(780px, 78vw);
  aspect-ratio: 1;
  transform: translate(35%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(194, 169, 143, .20) 0%,
    rgba(194, 169, 143, .07) 42%,
    transparent 70%);
  pointer-events: none;
}

/* Grain de la charte — même recette que le hero d'accueil. */
.r2l-lochero__grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.r2l-lochero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--r2l-s-6);
}

/* ── Colonne de texte ── */

.r2l-lochero__titre {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h1);
  font-weight: var(--r2l-fw-h1);
  line-height: 1.08;
  color: var(--r2l-sable-0);
  margin: var(--r2l-s-2) 0 var(--r2l-s-2);
}

.r2l-lochero__desc {
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: rgba(247, 243, 238, .76);
  max-width: 46ch;
  margin: 0 0 var(--r2l-s-2);
}

.r2l-lochero__agence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--r2l-text-meta);
  color: rgba(247, 243, 238, .60);
  margin: 0 0 var(--r2l-s-3);
}
.r2l-lochero__agence svg { width: 18px; height: 18px; flex: 0 0 auto; }

.r2l-lochero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r2l-s-2) var(--r2l-s-3);
}

.r2l-lochero__prix {
  position: relative;
  font-size: var(--r2l-text-meta);
  color: rgba(247, 243, 238, .72);
}
.r2l-lochero__prix b {
  color: var(--r2l-sable-0);
  font-weight: 600;
}

/* Une ligne par machine, empilées : seule l'active occupe le flux, les
   autres sont retirées du calque sans quitter le document. */
.r2l-lochero__prix-ligne {
  display: none;
  transition: opacity var(--r2l-transition-md);
}
.r2l-lochero__prix-ligne.is-active { display: inline; }

/* ── La scène ── */

.r2l-lochero__scene {
  position: relative;
  aspect-ratio: 4 / 3;
}

/* ── Le nom en filigrane ──
   Posé derrière la machine, qui vient le recouvrir en partie. C'est ce
   chevauchement qui fait la profondeur : un mot entièrement lisible ne
   serait qu'un titre de plus.

   Marque et modèle sont empilés. Le corps se calcule à partir de la ligne
   la plus longue (--r2l-wm-n, posé par PHP) pour viser une largeur constante
   quel que soit le nom : « BMW / R18 » et « Ducati / Multistrada » occupent
   la même place. La chasse moyenne de Cabinet Grotesk en capitales grasses
   est d'environ .62 em — d'où le diviseur. --r2l-wm-span est cette largeur
   visée, en vw.

   Ancré à gauche de la scène et jamais centré : il peut ainsi déborder à
   droite (la section est en overflow:hidden, il se coupe au bord de l'écran)
   sans jamais venir sous le titre ni sous le texte, à gauche. */
.r2l-lochero__marque {
  --r2l-wm-span: 40;
  position: absolute;
  /* Assez haut pour que la seconde ligne reste devinable au-dessus du
     carénage : entièrement masquée, elle ne serait plus qu'une texture. */
  top: 7%;
  left: 0;
  z-index: 0;
  font-family: var(--r2l-font-titres);
  font-size: clamp(2.4rem, calc(var(--r2l-wm-span) * 1vw / (.62 * var(--r2l-wm-n, 10))), 9.5rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, .09);
  user-select: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Décalage inverse de celui de la machine : le filigrane part un peu plus
     loin, la scène prend une épaisseur au changement de moto. */
  transform: translateX(-14px);
  transition:
    opacity .45s var(--r2l-ease-reveal),
    transform .6s var(--r2l-ease-reveal),
    visibility 0s linear .45s;
}
.r2l-lochero__marque.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Une ligne par mot, calées à gauche : le drapeau qui en résulte est le
   dessin recherché, pas un défaut d'alignement. */
.r2l-lochero__marque-l {
  display: block;
  white-space: nowrap;
}

/* Ombre au sol reconstruite : la découpe n'en a plus, et sans elle la moto
   plane. Ellipse très floue, jamais un bord net.

   ⚠️ `object-fit: contain` cadre l'image en boîte aux lettres : le bas réel de
   la machine est bien au-dessus du bas du cadre, et d'autant plus haut que la
   photo est large. Une ombre calée sur le cadre se retrouve donc décrochée —
   la moto plane. Les deux variables sont mesurées par le script à chaque
   changement de machine ; les valeurs de repli ne servent que le temps du
   premier rendu. `translateY(50%)` centre l'ellipse sur le point de contact. */
.r2l-lochero__sol {
  position: absolute;
  left: 50%;
  bottom: var(--r2l-sol-bas, 16%);
  width: var(--r2l-sol-large, 58%);
  height: 26px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5) 0%, transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  transition: bottom var(--r2l-transition-md), width var(--r2l-transition-md);
}

.r2l-lochero__moto {
  position: absolute;
  inset: 0;
  z-index: 1;          /* devant le filigrane */
  margin: 0;
  padding: 5% 6%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.985);
  /* Durée propre, plus courte que --r2l-dur-reveal : celle-ci sert les
     entrées au scroll, où l'on regarde arriver. Ici on répond à un clic —
     au-delà de ~.5s le geste paraît mou et les deux motos se chevauchent. */
  transition:
    opacity .45s var(--r2l-ease-reveal),
    transform .45s var(--r2l-ease-reveal),
    visibility 0s linear .45s;
}
/* `is-active` est posé en PHP sur la première : la scène est juste avant
   que le script ne prenne la main, et reste juste s'il ne tourne jamais. */
.r2l-lochero__moto.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.r2l-lochero__img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  /* Le parc n'est pas homogène : certaines photos sont de vraies découpes,
     d'autres des clichés studio rectangulaires enveloppés d'une marge
     transparente. Sur un fond charbon, les secondes montrent leurs arêtes.
     Ce dégradé estompe les 12 derniers pour cent du cadre : invisible sur une
     découpe (elle n'y arrive jamais, cf. le retrait du <figure>), il dissout
     la couture des autres. Le jour où le parc sera homogène, cette règle ne
     fera plus rien — on peut la laisser. */
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 50% 48%,
    #000 0%, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 76% 74% at 50% 48%,
    #000 0%, #000 72%, transparent 100%);
}

/* ── Le sélecteur de machine ──
   Masqué sans JS : des boutons qui ne font rien seraient un piège au
   clavier, et le parc complet est de toute façon juste en dessous. */
.r2l-lochero__barre,
.r2l-lochero__rail { display: none; }

html.js .r2l-lochero__barre,
html.js .r2l-lochero__rail { display: flex; }

/* Le filet de séparation fait aussi office de jauge. */
.r2l-lochero__barre {
  position: relative;
  height: 1px;
  background: rgba(247, 243, 238, .14);
}
.r2l-lochero__jauge {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(247, 243, 238, .55);
}
/* Le remplissage EST le minuteur : c'est sa fin qui déclenche la machine
   suivante (cf. location-moto.js), pas un compteur parallèle qui dériverait. */
.r2l-lochero--auto .r2l-lochero__jauge {
  animation: r2l-lochero-jauge var(--r2l-lochero-duree, 5s) linear forwards;
}
.r2l-lochero--pause .r2l-lochero__jauge { animation-play-state: paused; }
@keyframes r2l-lochero-jauge { to { transform: scaleX(1); } }

.r2l-lochero__rail {
  align-items: center;
  gap: var(--r2l-s-2);
  padding-top: var(--r2l-s-3);
}

html.js .r2l-lochero__switch {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--r2l-s-2);
  /* Le parc compte des dizaines de machines : sans défilement, celles du bout
     étaient purement inatteignables — la section est en overflow:hidden. */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
html.js .r2l-lochero__switch::-webkit-scrollbar { display: none; }

/* Flèches : on ne reprend de la brique partagée que la taille et le calage.
   Le comportement (pas de défilement, désactivation en bout) vient de
   home-experience.js, comme pour les carrousels de la home. */
.r2l-lochero__nav { flex: 0 0 auto; gap: 6px; }
.r2l-lochero__nav .r2l-nav-btn {
  width: 34px; height: 34px;
  background: transparent;
  border-color: rgba(247, 243, 238, .3);
  color: var(--r2l-sable-0);
}
.r2l-lochero__nav .r2l-nav-btn svg { width: 14px; height: 14px; }
.r2l-lochero__nav .r2l-nav-btn:hover {
  background: rgba(247, 243, 238, .12);
  border-color: rgba(247, 243, 238, .6);
  color: var(--r2l-sable-0);
}
.r2l-lochero__nav .r2l-nav-btn:disabled,
.r2l-lochero__nav .r2l-nav-btn:disabled:hover {
  opacity: 0;
  pointer-events: none;
}

.r2l-lochero__pion {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(247, 243, 238, .62);
  cursor: pointer;
  transition:
    color var(--r2l-transition-sm),
    background var(--r2l-transition-sm),
    border-color var(--r2l-transition-sm);
}
.r2l-lochero__pion:hover {
  color: var(--r2l-sable-0);
  background: rgba(247, 243, 238, .07);
}
.r2l-lochero__pion.is-active {
  color: var(--r2l-sable-0);
  background: rgba(247, 243, 238, .10);
  border-color: rgba(247, 243, 238, .30);
}

.r2l-lochero__pion-nom {
  font-family: var(--r2l-font-titres);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.r2l-lochero__pion-meta {
  font-family: var(--r2l-font-corps);
  font-size: 0.75rem;
  opacity: .74;
  white-space: nowrap;
}

/* ── Mobile ──
   La machine passe au-dessus du texte : c'est elle qu'on vient voir, et
   elle porte l'univers. Le sélecteur défile au doigt (peek sur le pion
   suivant, comme les carrousels de la home). */
@media (max-width: 899px) {
  .r2l-lochero {
    padding-block: calc(var(--r2l-header-height, 72px) + var(--r2l-s-3))
                   var(--r2l-s-3);
  }
  .r2l-lochero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--r2l-s-2);
  }
  .r2l-lochero__scene {
    order: -1;
    aspect-ratio: 3 / 2;
  }
  .r2l-lochero__halo {
    top: 26%; right: 50%;
    width: min(560px, 96vw);
    transform: translate(50%, -50%);
  }
  .r2l-lochero__desc { max-width: none; }
  /* La scène occupe toute la largeur : le filigrane vise plus large pour
     rester un aplat graphique et non une petite ligne de texte. Sous les
     100vw, marge comprise — un mot amputé d'une lettre passe pour un bug,
     là où un large débord se lit comme un parti pris. */
  .r2l-lochero__marque { --r2l-wm-span: 84; top: 8%; }

  html.js .r2l-lochero__switch {
    scroll-snap-type: x mandatory;
    /* Le gutter passe en padding pour que le premier pion s'aligne sur le
       texte tout en laissant le rail filer bord à bord. */
    margin-inline: calc(-1 * var(--r2l-gutter));
    padding-inline: var(--r2l-gutter);
  }
  .r2l-lochero__pion { scroll-snap-align: start; }
  /* Au doigt, le glissement suffit — deux cibles de plus encombreraient. */
  .r2l-lochero__nav { display: none; }
}

/* ── A11y ── */
@media (prefers-reduced-motion: reduce) {
  /* Plus de défilement automatique, donc plus de jauge à afficher. */
  .r2l-lochero--auto .r2l-lochero__jauge { animation: none; }
  .r2l-lochero__sol { transition: none; }
  .r2l-lochero__moto,
  .r2l-lochero__marque {
    transition: opacity .01s linear, visibility 0s;
    transform: none;
  }
  .r2l-lochero__moto.is-active,
  .r2l-lochero__marque.is-active { transform: none; }
}


.r2l-loc-hero {
  background: linear-gradient(180deg, var(--r2l-sable-1) 0%, var(--r2l-sable-0) 100%);
  padding-block: var(--r2l-rythme-inter) var(--r2l-rythme-intra);
}

.r2l-loc-hero__inner {
  max-width: 62ch;
}

/* ── Formules kilométriques ── */

.r2l-locformules {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-0);
}

.r2l-locformules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--r2l-sable-4);
  border-block: 1px solid var(--r2l-sable-4);
}

.r2l-locformule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: var(--r2l-sable-0);
}

.r2l-locformule__nom {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--r2l-charbon);
}

.r2l-locformule__km {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
}

/* ── Parc ── */

.r2l-locparc {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-1);
  /* Les cards réemployées viennent de nos-motos.css : on ne redéfinit
     que le contexte, jamais le composant. */
  --motos-card: var(--r2l-blanc);
  --motos-card-bord: rgba(44, 40, 42, .07);
  --motos-titre: var(--r2l-charbon);
  --motos-meta: var(--r2l-terre-sec);
  --motos-piste: rgba(44, 40, 42, .12);
  --motos-jauge: var(--r2l-charbon);
}

.r2l-locparc__gamme + .r2l-locparc__gamme {
  margin-top: var(--r2l-rythme-intra);
}

.r2l-locparc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--r2l-s-2);
  padding-bottom: 12px;
  margin-bottom: var(--r2l-s-3);
  border-bottom: 1px solid var(--r2l-sable-4);
}

.r2l-locparc__titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: 0;
}

/* Le prix vit ici, au niveau de la catégorie — jamais sur une card. */
.r2l-locparc__prix {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}

.r2l-locparc__mini b {
  font-family: var(--r2l-font-titres);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--r2l-charbon);
}

.r2l-locparc__caution {
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-sec);
}

.r2l-locparc__caution::before {
  content: '·';
  margin-right: 12px;
  color: var(--r2l-sable-4);
}

/* ── Grille complète ── */

.r2l-locgrille {
  padding-block: var(--r2l-rythme-intra);
  background: var(--r2l-sable-0);
}

.r2l-locgrille__nav {
  margin-bottom: var(--r2l-s-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.r2l-locgrille__nav::-webkit-scrollbar {
  display: none;
}

.r2l-locgrille__nav .r2l-segmented {
  width: max-content;
}

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

/* Le tableau déborde dans son propre conteneur, jamais la page. */
.r2l-locgrille__wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.r2l-locgrille__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.r2l-locgrille__table th,
.r2l-locgrille__table td {
  padding: 12px 14px;
  text-align: right;
  border-bottom: 1px solid var(--r2l-sable-3);
}

.r2l-locgrille__table thead th {
  text-align: right;
  vertical-align: bottom;
  border-bottom-color: var(--r2l-sable-4);
}

.r2l-locgrille__table thead th:first-child,
.r2l-locgrille__table tbody th {
  text-align: left;
}

.r2l-locgrille__table tbody th {
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-meta);
  font-weight: 500;
  color: var(--r2l-terre-corps);
  white-space: nowrap;
}

.r2l-locgrille__table tbody td {
  font-family: var(--r2l-font-titres);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--r2l-charbon);
  white-space: nowrap;
}

.r2l-locgrille__table tbody tr:hover td,
.r2l-locgrille__table tbody tr:hover th {
  background: var(--r2l-sable-1);
}

.r2l-locgrille__formule {
  display: block;
  font-family: var(--r2l-font-titres);
  font-size: 1rem;
  font-weight: 500;
  color: var(--r2l-charbon);
}

.r2l-locgrille__km {
  display: block;
  margin-top: 2px;
  font-family: var(--r2l-font-corps);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
  white-space: nowrap;
}

.r2l-locgrille__vide {
  color: var(--r2l-sable-4);
}


/* ═══════════════════════════════════════════════════════════════
   7 — DEMANDE
   ═══════════════════════════════════════════════════════════════ */

.r2l-locmoto-demande {
  padding-block: var(--r2l-rythme-intra) var(--r2l-rythme-inter);
  background: var(--r2l-sable-1);
}

.r2l-locmoto-demande__form {
  max-width: 720px;
}


/* ═══════════════════════════════════════════════════════════════
   7 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .r2l-locmoto-hero__inner,
  .r2l-locmoto-specs__cols {
    grid-template-columns: 1fr;
  }

  /* La photo passe au-dessus du texte : c'est elle qu'on vient voir. */
  .r2l-locmoto-hero__scene {
    order: -1;
  }
}

@media (max-width: 600px) {
  .r2l-locmoto-formule__prix {
    font-size: 1.5rem;
  }

  .r2l-locmoto-hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}