/* ── Road2Luxe — nos-motos.css ──────────────────────────────────
   Page « Nos motos » (page template /nos-motos/).

   Principes DA appliqués :
   · Flamingo = CTA uniquement — aucun picto, aucun accent, aucun badge orange.
   · Accents de titre via --r2l-accent-titre (jamais Flamingo).
   · Cards / radius / ombres via les tokens --r2l-card-*.
   · Selle + poids en surface, côte à côte : les deux chiffres que le
     visiteur compare vraiment. La cylindrée reste réservée au panneau.

   Surface : claire (arbitrage validé — registre catalogue éditorial, et
   le détourage imparfait pardonne mieux sur sable que sur charbon).
   ──────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   0 — SURFACE & VARIABLES DE CONTEXTE
   Les couleurs de la page passent par ces variables locales : une
   éventuelle variante de surface se ferait en les redéfinissant,
   sans toucher aux règles.
   ═══════════════════════════════════════════════════════════════ */

.r2l-motos {
  --motos-fond:        var(--r2l-sable-0);
  --motos-fond-alt:    var(--r2l-sable-1);
  --motos-card:        var(--r2l-blanc);
  --motos-card-bord:   rgba(44, 40, 42, .07);
  --motos-titre:       var(--r2l-charbon);
  --motos-corps:       var(--r2l-terre-corps);
  --motos-meta:        var(--r2l-terre-sec);
  --motos-filet:       rgba(44, 40, 42, .10);
  --motos-scene:       radial-gradient(120% 80% at 50% 18%, #FFFFFF 0%, var(--r2l-sable-1) 62%, var(--r2l-sable-2) 100%);
  --motos-ombre-moto:  rgba(44, 40, 42, .22);
  --motos-piste:       rgba(44, 40, 42, .12);
  --motos-jauge:       var(--r2l-charbon);
  --motos-card-shadow: var(--r2l-card-shadow);

  background: var(--motos-fond);
  color: var(--motos-corps);
}


/* ═══════════════════════════════════════════════════════════════
   1 — EN-TÊTE DE PAGE
   Registre éditorial : on vend un niveau d'expérience, pas un parc.
   ═══════════════════════════════════════════════════════════════ */

/* Rythme d'entrée aligné sur la page Contact (.r2l-contact-hero) : `inter`
   ajouté aux 72 px de header creusait un vide au-dessus de l'eyebrow, très
   visible en mobile. `intra` des deux côtés, comme Contact. */
.r2l-motos-head {
  padding-block: var(--r2l-rythme-intra);
}

/* Texte à gauche, visuel à droite. auto-fit sur une seule colonne en dessous
   de 900 px (cf. §9) : le visuel passe alors sous le lede. */
.r2l-motos-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: center;
  gap: var(--r2l-s-6);
}

.r2l-motos-head__inner {
  max-width: 62ch;
}

/* ── Visuel de tête ── */

.r2l-motos-head__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r2l-card-radius);
  overflow: hidden;
  background: var(--motos-scene);
  border: 1px solid var(--motos-card-bord);
}

.r2l-motos-head__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder — tient la colonne tant que l'image à la une n'est pas posée.
   Registre neutre (sable + charbon estompé), jamais orange. */
.r2l-motos-head__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--motos-meta);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      rgba(44, 40, 42, .035) 10px 20px
    );
}

.r2l-motos-head__ph svg {
  width: 40px;
  height: 40px;
  opacity: .55;
}

.r2l-motos-head__ph-lab {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.r2l-motos-head__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(--motos-titre);
  margin: var(--r2l-s-2) 0 var(--r2l-s-3);
}

.r2l-motos-head__titre em {
  font-style: italic;
  color: var(--r2l-accent-titre);
}

.r2l-motos-head__lede {
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--motos-corps);
  margin: 0;
}


/* ── Légende des gammes — 3 tuiles-ancres ──────────────────────
   Répond à la question « ces codes T / GT / GT+, ça veut dire quoi ? »
   avant même la première moto. Sert aussi de nav interne. */

/* auto-fit, pas repeat(3) : une gamme sans modèle publié n'est pas rendue,
   et une colonne fantôme laisserait un pavé de filet vide. */
.r2l-motos-legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-top: var(--r2l-s-6);
  background: var(--motos-filet);
  border-block: 1px solid var(--motos-filet);
}

.r2l-motos-legende__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px 0;
  background: var(--motos-fond);
  text-decoration: none;
  transition: background var(--r2l-transition-md);
}

.r2l-motos-legende__item + .r2l-motos-legende__item {
  padding-left: 22px;
}

.r2l-motos-legende__item:hover {
  background: var(--motos-fond-alt);
}

.r2l-motos-legende__code {
  font-family: var(--r2l-font-corps);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--motos-meta);
}

.r2l-motos-legende__nom {
  font-family: var(--r2l-font-titres);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--motos-titre);
}

.r2l-motos-legende__note {
  font-size: var(--r2l-text-caption);
  line-height: 1.5;
  color: var(--motos-corps);
}


/* ═══════════════════════════════════════════════════════════════
   2 — BARRE DE FILTRES (sticky)
   Reprend le chrome de /voyages/ : .r2l-filtre-group,
   .r2l-filtre-label, .r2l-segmented — aucun style redéfini ici.
   ═══════════════════════════════════════════════════════════════ */

.r2l-motos-filtres-wrap {
  position: sticky;
  /* Sous le header fixe, pas dessous-derrière : même ancrage que la barre
     de /voyages/ (voyages.css). À `top:0` la barre glissait sous le header
     et se faisait rogner. */
  top: var(--r2l-header-height);
  z-index: 40;
  background: color-mix(in srgb, var(--motos-fond) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--motos-filet);
}

.r2l-motos-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  column-gap: 18px;
  padding-block: 12px;
}

/* Compteur — aria-live, se met à jour au filtrage */
.r2l-motos-count {
  margin-left: auto;
  font-size: var(--r2l-text-caption);
  color: var(--motos-meta);
  white-space: nowrap;
}

.r2l-motos-count b {
  color: var(--motos-titre);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   3 — GAMME (chapeau éditorial + ligne de cards)
   ═══════════════════════════════════════════════════════════════ */

.r2l-gamme {
  padding-block: var(--r2l-rythme-intra);
  border-bottom: 1px solid var(--motos-filet);
  scroll-margin-top: 84px; /* ancre sous la barre sticky */
}

.r2l-gamme:last-of-type {
  border-bottom: 0;
}

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

.r2l-gamme__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: end;
  gap: var(--r2l-s-4);
  margin-bottom: var(--r2l-s-6);
}

.r2l-gamme__titre {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  line-height: 1.15;
  color: var(--motos-titre);
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

/* Code tarifaire — discret, jamais en vedette. Fait le pont
   avec les catégories de prix de la fiche voyage. */
.r2l-gamme__code {
  font-family: var(--r2l-font-corps);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--motos-meta);
  border: 1px solid var(--motos-filet);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
  transform: translateY(-2px);
}

.r2l-gamme__chapeau {
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--motos-corps);
  margin: 0;
  max-width: 56ch;
}

.r2l-gamme__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--r2l-s-3);
}


/* ═══════════════════════════════════════════════════════════════
   4 — CARD MOTO
   Surface = photo détourée + marque/modèle + selle & poids.
   Rien d'autre. La cylindrée vit dans le panneau.
   ═══════════════════════════════════════════════════════════════ */

.r2l-moto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--motos-card);
  border: 1px solid var(--motos-card-bord);
  border-radius: var(--r2l-card-radius);
  box-shadow: var(--motos-card-shadow);
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  transition:
    transform var(--r2l-transition-md),
    box-shadow var(--r2l-transition-md),
    border-color var(--r2l-transition-md);
}

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

.r2l-moto-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--r2l-shadow-hover);
  border-color: rgba(44, 40, 42, .16);
}

/* Déclencheur = le titre. Lien étiré sur toute la card : le <h3> reste un
   titre, l'action reste un <button>, et la zone cliquable reste la card. */
.r2l-moto-card__trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  /* La variante <a> (grille location) ne doit pas se souligner : c'est un
     titre de card, pas un lien dans un paragraphe. */
  text-decoration: none;
}

.r2l-moto-card__trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r2l-card-radius);
}

.r2l-moto-card__trigger:focus-visible::after {
  outline: 2px solid var(--r2l-flamingo);
  outline-offset: 3px;
}

/* ── Scène photo : la moto détourée posée sur une surface ──
   Pas de cadre photo 4/3 « card voyage » : c'est un objet, pas un paysage. */

.r2l-moto-card__scene {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--motos-scene);
}

/* Photo en absolu : la hauteur se résout contre la boîte à ratio fixe, donc
   la card ne s'étire jamais à la définition de l'image (carrée ou paysage). */
.r2l-moto-card__img {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 1;
  display: block;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  max-width: none;
  object-fit: contain;
  transition: transform var(--r2l-transition-md);
}

.r2l-moto-card:hover .r2l-moto-card__img {
  transform: translateY(-4px) scale(1.015);
}

/* Ombre portée elliptique — donne l'assise sans fond photo */
.r2l-moto-card__ombre {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 62%;
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--motos-ombre-moto) 0%, transparent 72%);
  filter: blur(3px);
  transition: width var(--r2l-transition-md), opacity var(--r2l-transition-md);
  pointer-events: none;
}

.r2l-moto-card:hover .r2l-moto-card__ombre {
  width: 70%;
  opacity: .8;
}

/* Repli quand la photo manque */
.r2l-moto-card__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--motos-meta);
  opacity: .35;
}

.r2l-moto-card__ph svg {
  width: 56px;
  height: 56px;
}

/* ── Corps ── */

.r2l-moto-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px var(--r2l-card-pad) 18px;
  border-top: 1px solid var(--motos-card-bord);
  flex: 1 1 auto;
}

.r2l-moto-card__marque {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--motos-meta);
}

.r2l-moto-card__modele {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  line-height: 1.25;
  color: var(--motos-titre);
  margin: 0 0 14px;
}

.r2l-moto-card__pied {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--r2l-text-caption);
  font-weight: 600;
  color: var(--motos-meta);
}

.r2l-moto-card__pied span {
  transition: color var(--r2l-transition-sm);
}

.r2l-moto-card:hover .r2l-moto-card__pied span {
  color: var(--motos-titre);
}

.r2l-moto-card__arr {
  display: inline-flex;
  transition: transform var(--r2l-transition-md);
}

.r2l-moto-card:hover .r2l-moto-card__arr {
  transform: translateX(3px);
}


/* ═══════════════════════════════════════════════════════════════
   5 — REPÈRES CHIFFRÉS (card)
   Deux cellules côte à côte : « vais-je poser les pieds ? » et
   « vais-je la relever ? ». Registre factuel, aucun qualificatif —
   on situe la machine, on ne promet pas un confort.
   ═══════════════════════════════════════════════════════════════ */

/* Grille en deux rangées (labels / valeurs) que les cellules reprennent en
   subgrid : « Hauteur de selle » passe sur deux lignes là où « Poids » tient
   sur une, et les deux chiffres restent malgré tout alignés. */
.r2l-moto-card__specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  margin: 0;
  border-top: 1px solid var(--motos-card-bord);
  padding-top: 12px;
}

.r2l-moto-card__spec {
  min-width: 0;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 3px;
}

.r2l-moto-card__spec + .r2l-moto-card__spec {
  padding-left: 14px;
  border-left: 1px solid var(--motos-card-bord);
  margin-left: 14px;
}

.r2l-moto-card__spec dt {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--motos-meta);
}

.r2l-moto-card__spec dd {
  margin: 0;
  font-family: var(--r2l-font-titres);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--motos-titre);
  font-variant-numeric: tabular-nums;
}

.r2l-moto-card__unit {
  font-family: var(--r2l-font-corps);
  font-size: .75rem;
  font-weight: 500;
  color: var(--motos-meta);
  margin-left: 3px;
}


/* ═══════════════════════════════════════════════════════════════
   6 — PANNEAU LATÉRAL (fiche complète)
   Une seule URL. Contenu rendu dans le HTML initial (masqué),
   jamais injecté en JS → indexable.
   ═══════════════════════════════════════════════════════════════ */

.r2l-moto-panneau {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

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

.r2l-moto-panneau__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 18, .48);
  opacity: 0;
  transition: opacity var(--r2l-transition-md);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.r2l-moto-panneau__dialog {
  position: relative;
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--r2l-sable-0);
  box-shadow: -24px 0 60px rgba(44, 40, 42, .18);
  transform: translateX(24px);
  opacity: 0;
  transition:
    transform var(--r2l-dur-reveal) var(--r2l-ease-reveal),
    opacity var(--r2l-transition-md);
  pointer-events: auto;
}

.r2l-moto-panneau.is-open .r2l-moto-panneau__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.r2l-moto-panneau.is-open .r2l-moto-panneau__dialog {
  transform: none;
  opacity: 1;
}

.r2l-moto-panneau__close {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  width: 100%;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--r2l-sable-0) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  border-bottom: 1px solid var(--r2l-sable-3);
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-caption);
  font-weight: 600;
  color: var(--r2l-terre-sec);
  cursor: pointer;
  transition: color var(--r2l-transition-sm);
}

.r2l-moto-panneau__close:hover {
  color: var(--r2l-charbon);
}

.r2l-moto-panneau__close svg {
  width: 16px;
  height: 16px;
}

/* ── Fiche ── */

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

.r2l-moto-fiche__scene {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 80% at 50% 20%, #FFFFFF 0%, var(--r2l-sable-1) 60%, var(--r2l-sable-2) 100%);
  border-bottom: 1px solid var(--r2l-sable-3);
}

.r2l-moto-fiche__scene img {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 1;
  display: block;
  width: calc(100% - 56px);
  height: calc(100% - 58px);
  max-width: none;
  object-fit: contain;
}

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

.r2l-moto-fiche__inner {
  padding: var(--r2l-s-3) var(--r2l-s-4) var(--r2l-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--r2l-s-3);
}

.r2l-moto-fiche__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.r2l-moto-fiche__modele {
  font-family: var(--r2l-font-titres);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--r2l-charbon);
  margin: 0;
}

.r2l-moto-fiche__gamme {
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-corps);
  margin-top: 6px;
}

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

/* Note de selle — réassurance, posée sous la barre de repères. */
.r2l-moto-fiche__selle-note {
  font-size: var(--r2l-text-caption);
  line-height: 1.5;
  color: var(--r2l-terre-corps);
  margin: -4px 0 0;
}

/* Les trois repères — selle, poids, cylindrée — au même niveau, dans une
   seule barre : aucun n'est mis en scène plus que les autres. */
.r2l-moto-fiche__specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto;
  margin: 0;
  border: 1px solid var(--r2l-sable-3);
  border-radius: var(--r2l-card-radius);
  overflow: hidden;
}

/* Subgrid : un label qui passe sur deux lignes (panneau resserré) ne
   décale pas la valeur de ses voisines. */
.r2l-moto-fiche__spec {
  min-width: 0;
  padding: 14px 16px;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 3px;
}

.r2l-moto-fiche__spec + .r2l-moto-fiche__spec {
  border-left: 1px solid var(--r2l-sable-3);
}

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

.r2l-moto-fiche__spec 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;
}

/* Description — champ wysiwyg : le conteneur reçoit des blocs (p, ul, ol),
   d'où les règles sur les enfants plutôt que sur l'élément seul. */
.r2l-moto-fiche__desc {
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
}

.r2l-moto-fiche__desc > :first-child { margin-top: 0; }
.r2l-moto-fiche__desc > :last-child  { margin-bottom: 0; }
.r2l-moto-fiche__desc p { margin: 0 0 .75em; }
.r2l-moto-fiche__desc ul,
.r2l-moto-fiche__desc ol { margin: 0 0 .75em; padding-left: 1.15em; }
.r2l-moto-fiche__desc li { margin-bottom: .3em; }
.r2l-moto-fiche__desc strong,
.r2l-moto-fiche__desc b { color: var(--r2l-charbon); font-weight: 600; }
.r2l-moto-fiche__desc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Blocs de section dans le panneau ── */

.r2l-moto-fiche__bloc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--r2l-s-2);
  border-top: 1px solid var(--r2l-sable-3);
}

.r2l-moto-fiche__bloc-titre {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
  margin: 0;
}

/* Chips destinations — registre factuel, jamais orange */
.r2l-moto-dests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.r2l-moto-dests li {
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-corps);
  background: var(--r2l-sable-2);
  border-radius: 100px;
  padding: 5px 12px;
}

/* « Où elle roule » — scroller de cards compactes (composant existant),
   flanqué des flèches partagées .r2l-nav--overlay (components.css).
   Le panneau n'a pas de trackpad garanti : sans elles, le rail n'est
   navigable qu'au drag. */
.r2l-moto-voyages-wrap {
  position: relative;
}

/* Le scroller réserve 14 px en haut et 28 px en bas pour l'ombre des cards :
   son centre est donc 7 px sous celui des cards. On recale les flèches. */
.r2l-moto-voyages__nav {
  top: calc(50% - 7px);
  left: -4px;
  right: -4px;
  transform: translateY(-50%);
}

/* Gabarit resserré : 46 px pèsent trop dans un panneau de 560 px. */
.r2l-moto-voyages__nav .r2l-nav-btn {
  width: 38px;
  height: 38px;
}

.r2l-moto-voyages__nav .r2l-nav-btn svg {
  width: 17px;
  height: 17px;
}

.r2l-moto-voyages {
  display: flex;
  gap: var(--r2l-s-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--r2l-s-4);
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--r2l-s-4));
  padding-inline: var(--r2l-s-4);
  /* La card porte --r2l-card-shadow (0 8px 24px) : le scroller doit lui
     laisser de la place en haut comme en bas, sinon l'ombre est coupée net.
     Les marges négatives rendent la gouttière invisible dans le flux. */
  padding-block: 14px 28px;
  margin-block: -14px -20px;
}

.r2l-moto-voyages::-webkit-scrollbar {
  display: none;
}

.r2l-moto-voyages > .r2l-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.r2l-moto-fiche__vide {
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-sec);
  margin: 0;
}

/* ── Passerelle location ───────────────────────────────────────
   Deux poids selon le contexte (cf. template-parts/motos/fiche.php) :
   ligne discrète quand des départs existent, bloc à CTA quand la
   location est la seule action possible sur cette machine. */

.r2l-moto-fiche__louer {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.r2l-moto-fiche__louer-txt {
  margin: 0;
  font-size: var(--r2l-text-caption);
  color: var(--r2l-terre-sec);
}

.r2l-moto-fiche__louer--seul {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.r2l-moto-fiche__louer--seul .r2l-btn {
  align-self: stretch;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   7 — BLOC « VOTRE PROPRE MOTO » (4e catégorie, hors gamme)
   ═══════════════════════════════════════════════════════════════ */

.r2l-moto-perso {
  display: flex;
  align-items: center;
  gap: var(--r2l-s-3);
  padding: var(--r2l-s-4);
  margin-block: var(--r2l-rythme-intra);
  background: var(--motos-card);
  border: 1px solid var(--motos-card-bord);
  border-radius: var(--r2l-card-radius);
}

.r2l-moto-perso__ic {
  flex: 0 0 auto;
  color: var(--motos-titre);
  opacity: .8;
}

.r2l-moto-perso__ic svg {
  width: 34px;
  height: 34px;
}

.r2l-moto-perso__txt {
  flex: 1 1 auto;
}

/* Le CTA ne se laisse pas comprimer par le texte à sa gauche. */
.r2l-moto-perso .r2l-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.r2l-moto-perso__txt strong {
  display: block;
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--motos-titre);
  margin-bottom: 4px;
}

.r2l-moto-perso__txt p {
  margin: 0;
  font-size: var(--r2l-text-meta);
  line-height: var(--r2l-lh-corps);
  color: var(--motos-corps);
}


/* ── Passerelle location — bande sobre, registre bas ──────────
   Ni card ni CTA plein : c'est un aiguillage, pas une offre à pousser. */

.r2l-motos-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--r2l-s-3);
  padding-top: var(--r2l-rythme-bord);
  padding-bottom: var(--r2l-rythme-inter);
  border-top: 1px solid var(--motos-filet);
}

.r2l-motos-location__txt {
  max-width: 60ch;
}

.r2l-motos-location__txt h2 {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--motos-titre);
  margin: 10px 0 6px;
}

.r2l-motos-location__txt p {
  margin: 0;
  font-size: var(--r2l-text-meta);
  line-height: var(--r2l-lh-corps);
  color: var(--motos-corps);
}


/* ═══════════════════════════════════════════════════════════════
   8 — ÉTAT VIDE (filtre sans résultat)
   ═══════════════════════════════════════════════════════════════ */

.r2l-motos-vide {
  padding-block: var(--r2l-s-8);
  text-align: center;
  color: var(--motos-corps);
}

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

.r2l-motos-vide p {
  margin: 0 0 var(--r2l-s-2);
  font-size: var(--r2l-text-corps);
}


/* ═══════════════════════════════════════════════════════════════
   9 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Le visuel passe sous le texte : à cette largeur, deux colonnes
     réduisent le lede à une colonne de mots. */
  .r2l-motos-head__grid {
    grid-template-columns: 1fr;
    gap: var(--r2l-s-4);
  }

  .r2l-motos-head__media {
    aspect-ratio: 16 / 9;
  }

  .r2l-gamme__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--r2l-s-2);
  }

  .r2l-motos-legende {
    grid-template-columns: 1fr;
  }

  .r2l-motos-legende__item,
  .r2l-motos-legende__item + .r2l-motos-legende__item {
    padding: 16px 0;
  }
}

@media (max-width: 767px) {
  /* Ligne de cards → scroller avec peek ~13 % de la carte suivante */
  .r2l-gamme__grid {
    display: flex;
    gap: var(--r2l-s-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Sans scroll-padding, le snap colle la 1re card au bord du scrollport
       et mange le gutter → décalage avec le titre de gamme. */
    scroll-padding-inline: var(--r2l-gutter);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--r2l-gutter));
    padding-inline: var(--r2l-gutter);
  }

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

  .r2l-moto-card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  /* Les filtres passent à la ligne plutôt que de défiler : un axe caché
     hors écran ne se découvre pas. Un groupe par ligne, label au-dessus
     de son contrôle. Scopé à la barre motos — /voyages/ a la sienne. */
  .r2l-motos-filtres {
    row-gap: 14px;
  }

  .r2l-motos-filtres .r2l-filtre-group {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  /* Le segmented lui-même déborde sous ~380 px (« Plus de 800 mm ») :
     on l'autorise à se replier. Les items gardent leur forme de pilule,
     seul le conteneur relâche son arrondi pour rester lisible sur deux
     rangées. */
  .r2l-motos-filtres .r2l-segmented {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 2px;
    border-radius: var(--r2l-radius-md);
  }

  .r2l-motos-count {
    display: none; /* le compteur passe sous la barre en mobile */
  }

  /* Panneau → feuille basse plein écran */
  .r2l-moto-panneau {
    align-items: flex-end;
  }

  .r2l-moto-panneau__dialog {
    width: 100%;
    height: 92%;
    border-radius: var(--r2l-radius-lg) var(--r2l-radius-lg) 0 0;
    transform: translateY(24px);
  }

  .r2l-moto-fiche__inner {
    padding-inline: var(--r2l-s-3);
  }

  .r2l-moto-voyages {
    margin-inline: calc(-1 * var(--r2l-s-3));
    padding-inline: var(--r2l-s-3);
    scroll-padding-inline: var(--r2l-s-3);
  }

  .r2l-moto-perso {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10 — A11Y / MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .r2l-moto-card,
  .r2l-moto-card__img,
  .r2l-moto-card__ombre,
  .r2l-moto-panneau__dialog,
  .r2l-moto-panneau__backdrop {
    transition: none !important;
  }

  .r2l-moto-card:hover {
    transform: none;
  }

  .r2l-moto-card:hover .r2l-moto-card__img {
    transform: none;
  }
}