/* ── Road2Luxe — nav-location.css ────────────────────────────────
   Barre de navigation de l'univers location (/location-moto/ et
   /nos-motos/<slug>/). Chargée uniquement là — cf. enqueue.php.

   Surcouche de nav.css : tout ce qui est commun (hauteur, états de scroll,
   burger, panneau mobile, bouton téléphone) reste là-bas. Ici, uniquement
   ce qui distingue cet univers.
   ────────────────────────────────────────────────────────────── */

/* ⚠️ main.css pose `a:hover { color: var(--r2l-flamingo) }` AVEC une
   transition de couleur. Deux conséquences pour tout lien composite d'ici :
     1. Le Flamingo est réservé aux CTA (charte) — un lien de menu ne doit
        jamais y passer. Chaque lien de ce fichier fige donc sa couleur de
        survol.
     2. Un enfant sans couleur propre hérite de celle du lien PENDANT sa
        transition. Au relâchement du survol, la règle de l'enfant tombe d'un
        coup alors que le parent revient encore du Flamingo → éclair orange à
        la sortie. Tout libellé porte donc sa couleur explicitement.

   ═══════════════════════════════════════════════════════════════
   MARQUEUR D'UNIVERS
   ═══════════════════════════════════════════════════════════════ */

/* Le logo ramène au hub location, pas à l'accueil : le visiteur doit voir
   où il est avant de cliquer. Petite étiquette, jamais un second logo. */
.r2l-header__univers {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  font-family: var(--r2l-font-corps);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--r2l-ls-eyebrow, .16em);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--r2l-terre-sec);
  border: 1px solid var(--r2l-sable-4);
  border-radius: 999px;
  white-space: nowrap;
}
.r2l-header--over-dark:not(.is-scrolled) .r2l-header__univers {
  color: rgba(247, 243, 238, .82);
  border-color: rgba(247, 243, 238, .32);
}

/* Sur un petit écran la barre tient déjà tout juste (burger · logo ·
   téléphone) : l'étiquette cède avant que le logo ne se comprime. */
@media (max-width: 479px) {
  .r2l-header__univers { display: none; }
}

/* ── Bascule vers l'univers voyage ──
   Bouton fantôme : le Flamingo du header est déjà pris par « Demander un
   devis », qui est la conversion de cette page. Quitter l'univers ne doit
   pas être plus attirant que rester. */
.r2l-header__switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.4375rem 0.875rem;
  font-family: var(--r2l-font-corps);
  font-size: 0.8125rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--r2l-sable-4);
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--r2l-transition-sm), border-color var(--r2l-transition-sm);
}
.r2l-header__switch:hover {
  color: inherit;              /* pas de Flamingo : ce n'est pas le CTA */
  background: var(--r2l-sable-1);
  border-color: var(--r2l-terre-sec);
}
.r2l-header__switch-ic { width: 16px; height: 16px; flex-shrink: 0; }
.r2l-header--over-dark:not(.is-scrolled) .r2l-header__switch {
  border-color: rgba(247, 243, 238, .34);
}
.r2l-header--over-dark:not(.is-scrolled) .r2l-header__switch:hover {
  background: rgba(247, 243, 238, .14);
  border-color: rgba(247, 243, 238, .6);
}

.r2l-header__sep {
  width: 1px;
  height: 20px;
  background: var(--r2l-sable-4);
  flex-shrink: 0;
}
.r2l-header--over-dark:not(.is-scrolled) .r2l-header__sep {
  background: rgba(247, 243, 238, .28);
}


/* ═══════════════════════════════════════════════════════════════
   MÉGA-MENU « NOS MOTOS » — onglets de gamme + parc
   ═══════════════════════════════════════════════════════════════ */

/* Ancrage du panneau (position:static sur l'item, étirement des trois
   niveaux de la nav pour supprimer la bande morte sous le bouton) : la règle
   est générique dans nav.css depuis que la nav voyage a elle aussi un
   méga-menu large en première entrée. Rien à redire ici.
   ═══════════════════════════════════════════════════════════════ */

.r2l-mega--motos {
  width: min(940px, calc(100vw - 2 * var(--r2l-gutter)));
  padding: var(--r2l-s-4);
}

.r2l-megamotos {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--r2l-s-4);
  align-items: start;
}

/* ── Colonne gauche : les gammes ──
   Chaque onglet porte le prix d'appel de sa catégorie. C'est le seul endroit
   du menu où un tarif a le droit d'apparaître : le prix dépend de la gamme,
   pas de la machine (cf. inc/location.php). */
.r2l-megamotos__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: var(--r2l-s-4);
  border-right: 1px solid var(--r2l-sable-3);
}

.r2l-megamotos__tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  border-radius: var(--r2l-radius-md);
  text-decoration: none;
  color: var(--r2l-charbon);
  background: transparent;
  transition: background var(--r2l-transition-sm);
}
.r2l-megamotos__tab-nom {
  grid-column: 1;
  color: var(--r2l-charbon);
  font-family: var(--r2l-font-titres);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.r2l-megamotos__tab-meta {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--r2l-font-corps);
  font-size: 0.75rem;
  color: var(--r2l-terre-sec);
}
.r2l-megamotos__tab-code {
  padding: 1px 6px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: .04em;
  border: 1px solid var(--r2l-sable-4);
  border-radius: 4px;
}
.r2l-megamotos__tab-prix { font-weight: 600; }
.r2l-megamotos__tab-ic {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px; height: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--r2l-transition-sm), transform var(--r2l-transition-sm);
}

.r2l-megamotos__tab:hover,
.r2l-megamotos__tab:focus-visible,
.r2l-megamotos__tab.is-active {
  color: var(--r2l-charbon);   /* le fond signale la cible, pas la couleur */
  background: var(--r2l-sable-1);
}
.r2l-megamotos__tab.is-active .r2l-megamotos__tab-ic {
  opacity: 1;
  transform: translateX(0);
}

/* ── Colonne droite : le parc de la gamme ── */
.r2l-megamotos__panels { min-width: 0; }

/* Progressive enhancement : sans JS, les trois panneaux s'affichent à la
   suite — rien n'est perdu, et tout reste dans le HTML pour le crawler. */
html.js .r2l-megamotos__panel { display: none; }
html.js .r2l-megamotos__panel.is-active { display: block; }

.r2l-megamotos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r2l-s-3);
  list-style: none;
  margin: 0; padding: 0;
  /* Un parc qui s'allonge ne doit pas pousser le menu hors de l'écran. */
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.r2l-megamoto {
  display: block;
  text-decoration: none;
  color: var(--r2l-charbon);
}
.r2l-megamoto:hover { color: var(--r2l-charbon); }
.r2l-megamoto__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--r2l-card-ratio, 4 / 3);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: var(--r2l-radius-md);
  overflow: hidden;
  background: var(--r2l-sable-1);
  transition: background var(--r2l-transition-sm);
}
.r2l-megamoto:hover .r2l-megamoto__frame { background: var(--r2l-sable-2); }

/* `contain`, pas `cover` : on choisit une moto sur sa silhouette — garde-boue,
   carénage, hauteur de selle. Un cadrage qui coupe la roue avant fait perdre
   l'information qu'on vient chercher. Les photos du parc sont détourées et de
   ratios inégaux : le cadre les uniformise sans les rogner. */
.r2l-megamoto__img,
.r2l-megamoto__frame picture,
.r2l-megamoto__frame img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}

/* Pas de zoom au survol ici : agrandir une image en `contain` la recadre —
   exactement ce que ce cadre est censé éviter. C'est le fond qui répond. */

.r2l-megamoto__ph {
  width: 34px; height: 34px;
  color: var(--r2l-terre-sec);
  opacity: .55;
}

.r2l-megamoto__nom {
  display: block;
  color: var(--r2l-charbon);
  font-family: var(--r2l-font-titres);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--r2l-transition-sm);
}
.r2l-megamoto:hover .r2l-megamoto__nom { color: var(--r2l-terre-sec); }

.r2l-megamoto__reperes {
  display: block;
  margin-top: 2px;
  font-family: var(--r2l-font-corps);
  font-size: 0.75rem;
  color: var(--r2l-terre-sec);
}

/* Le pied respire à la mesure du panneau. */
.r2l-mega--motos .r2l-mega__footer {
  margin-top: var(--r2l-s-3);
  padding-top: var(--r2l-s-3);
}

/* Panneau un peu à l'étroit entre 1024 et 1200px : 2 colonnes de motos. */
@media (max-width: 1199px) {
  .r2l-megamotos { grid-template-columns: 208px minmax(0, 1fr); }
  .r2l-megamotos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════
   PANNEAU MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* Le prix d'appel suit le nom de la gamme dès l'entrée repliée : au doigt,
   on ne déplie pas trois accordéons pour comparer trois tarifs. */
.r2l-mobile-nav__prix {
  margin-left: 8px;
  font-family: var(--r2l-font-corps);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--r2l-terre-sec);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   A11Y
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .r2l-megamoto__frame,
  .r2l-megamoto__nom,
  .r2l-megamotos__tab-ic { transition: none !important; }
}