/* ── Road2Luxe — nav.css ─────────────────────────────────────
   Header (mega-menu, dropdowns, mobile, scroll states) + Footer.
   Chargé globalement (enqueue.php). Surcharge les stubs main.css.
   ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.r2l-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition:
    background var(--r2l-transition-md),
    box-shadow var(--r2l-transition-md),
    color var(--r2l-transition-md);
}

.r2l-header__inner {
  display: flex;
  align-items: center;
  height: var(--r2l-header-height, 72px);
  gap: var(--r2l-s-4);
  transition: height var(--r2l-transition-md);
}

/* ── Contextes de fond ── */
.r2l-header--solid {
  background: var(--r2l-sable-0);
  border-bottom: 1px solid var(--r2l-sable-3);
  color: var(--r2l-charbon);
}

.r2l-header--over-dark {
  background: transparent;
  color: var(--r2l-blanc);
}
.r2l-header--over-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(44,40,42,.44) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.r2l-header--over-light {
  background: transparent;
  color: var(--r2l-charbon);
}

/* ── Scrolled ── */
.r2l-header.is-scrolled {
  background: rgba(250,249,246,.96);
  color: var(--r2l-charbon);
  border-bottom: 1px solid var(--r2l-sable-3);
  box-shadow: 0 1px 16px rgba(44,40,42,.07);
  backdrop-filter: blur(8px);
}
/* Neutralise le voile sombre du contexte over-dark quand le header est scrollé */
.r2l-header.is-scrolled::before {
  opacity: 0;
  pointer-events: none;
}
.r2l-header.is-scrolled .r2l-header__inner {
  height: 68px;
}
/* Logo légèrement rétréci à l'état scrollé pour respirer dans la hauteur réduite */
.r2l-header.is-scrolled .r2l-header__logo-img {
  height: 24px;
}

/* Sentinel (IO cible — jamais scroll listener) */
.r2l-header__sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  visibility: hidden;
  aria-hidden: true;
}

/* ── Logo header ── */
.r2l-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--r2l-transition-sm);
  line-height: 0; /* supprime l'espace sous l'img */
}
.r2l-header__logo:hover { opacity: .78; }
.r2l-header__logo-img {
  display: block;
  height: 28px;   /* hauteur fixe — largeur s'adapte au ratio */
  width: auto;
  max-width: 160px;
}

/* ── Nav principale (desktop) ──
   Scopé à .r2l-header : la classe .r2l-nav est aussi utilisée par des
   carrousels de sections home (ex. home-experience.css), chargés APRÈS
   nav.css → sans ce scope, leur .r2l-nav clobbe la nav du header (elle
   restait visible en mobile). Ne jamais restyler .r2l-nav (bare) ici. */
.r2l-header .r2l-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.r2l-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0;
}
.r2l-nav__item {
  position: relative;
}

.r2l-nav__trigger,
.r2l-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem var(--r2l-s-3);
  font-family: var(--r2l-font-corps);
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--r2l-radius-sm);
  white-space: nowrap;
  transition: opacity var(--r2l-transition-sm);
}
/* Hover (#8) : crème → blanc plein + filet fin animé sous l'entrée */
.r2l-nav__trigger,
.r2l-nav__link { opacity: .88; }
.r2l-nav__trigger:hover,
.r2l-nav__link:hover,
.r2l-nav__item--has-mega:hover .r2l-nav__trigger,
.r2l-nav__item--has-dropdown:hover .r2l-nav__trigger { opacity: 1; color: inherit; }

.r2l-nav__trigger::after,
.r2l-nav__link::after {
  content: "";
  position: absolute;
  left: var(--r2l-s-3);
  right: var(--r2l-s-3);
  bottom: 4px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--r2l-ease);
}
.r2l-nav__trigger:hover::after,
.r2l-nav__link:hover::after,
.r2l-nav__item--has-mega:hover .r2l-nav__trigger::after,
.r2l-nav__item--has-dropdown:hover .r2l-nav__trigger::after { transform: scaleX(1); }

.r2l-nav__trigger .r2l-chevron {
  flex-shrink: 0;
  transition: transform var(--r2l-transition-sm);
}
.r2l-nav__trigger[aria-expanded="true"] .r2l-chevron {
  transform: rotate(180deg);
}

/* ── Droite header ── */
.r2l-header__right {
  display: flex;
  align-items: center;
  gap: var(--r2l-s-2);
  flex-shrink: 0;
}

/* CTA pill */
.r2l-header__cta {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Bouton téléphone (#10) ──
   Picto Phosphor + numéro selon la devise. Couleur = currentColor du header
   (crème sur hero sombre, charbon sur solid/scrolled) → toujours lisible. */
.r2l-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-family: var(--r2l-font-corps);
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r2l-radius-sm);
  white-space: nowrap;
  transition: background var(--r2l-transition-sm), opacity var(--r2l-transition-sm);
}
.r2l-header__phone:hover { background: rgba(255,255,255,.14); }
.r2l-header--solid .r2l-header__phone:hover,
.r2l-header--over-light .r2l-header__phone:hover,
.r2l-header.is-scrolled .r2l-header__phone:hover { background: var(--r2l-sable-2); }
.r2l-header__phone-ic { width: 18px; height: 18px; flex-shrink: 0; }
.r2l-header__phone--icon { padding: 8px; }

/* ── Actions mobile (burger + mini-CTA) ── */
.r2l-header__mobile-actions {
  display: none;
  align-items: center;
  gap: var(--r2l-s-2);
  flex-shrink: 0;
}
.r2l-header__cta-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SÉLECTEURS (langue, devise & région)
   ═══════════════════════════════════════════════════════════════ */
.r2l-selector {
  position: relative;
}
.r2l-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-family: var(--r2l-font-corps);
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
  background: none;
  border: none;
  border-radius: var(--r2l-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--r2l-transition-sm), opacity var(--r2l-transition-sm);
  line-height: 1.2;
}
/* Sur fond sable (scrolled / solid) : couleur charbon */
.r2l-header--solid .r2l-selector__trigger,
.r2l-header--over-light .r2l-selector__trigger,
.r2l-header.is-scrolled .r2l-selector__trigger {
  color: var(--r2l-charbon);
}
/* Hover : fond très léger pour l'affordance */
.r2l-selector__trigger:hover { background: rgba(255,255,255,.14); }
.r2l-header--solid .r2l-selector__trigger:hover,
.r2l-header--over-light .r2l-selector__trigger:hover,
.r2l-header.is-scrolled .r2l-selector__trigger:hover { background: var(--r2l-sable-2); }

.r2l-selector__trigger .r2l-chevron {
  flex-shrink: 0;
  transition: transform var(--r2l-transition-sm);
}
.r2l-selector__trigger[aria-expanded="true"] .r2l-chevron { transform: rotate(180deg); }

.r2l-selector__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--r2l-blanc);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-radius-md);
  box-shadow: var(--r2l-shadow-hover);
  padding: 8px var(--r2l-s-1) var(--r2l-s-1);
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--r2l-transition-sm), transform var(--r2l-transition-sm);
  z-index: 300;
}
.r2l-selector.is-open .r2l-selector__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.r2l-selector__menu button,
.r2l-selector__menu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px var(--r2l-s-2);
  font-family: var(--r2l-font-corps);
  font-size: 0.875rem;
  color: var(--r2l-charbon);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: var(--r2l-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--r2l-transition-sm);
}
.r2l-selector__menu button:hover,
.r2l-selector__menu a:hover {
  background: var(--r2l-sable-1);
  color: var(--r2l-charbon);
}
.r2l-selector__menu button.is-active { font-weight: 600; }

/* ── Option devise avec aide marché (#9) ──
   Symbole | Nom (EUR)  ·  aide marché dessous. */
#r2l-currency-menu,
#r2l-currency-menu-m { min-width: 232px; }
.r2l-selector__menu button.r2l-currency-opt {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: var(--r2l-s-1);
  row-gap: 1px;
  align-items: center;
}
.r2l-currency-opt__sym {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--r2l-charbon);
}
.r2l-currency-opt__name { grid-column: 2; font-size: 0.875rem; line-height: 1.2; }
.r2l-currency-opt__hint {
  grid-column: 2;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--r2l-terre-sec);
}
.r2l-currency-opt.is-active .r2l-currency-opt__name { font-weight: 700; }

/* Sélecteur compact (barre mobile) */
.r2l-selector--compact .r2l-selector__trigger {
  padding: 6px 8px;
  font-size: 0.8125rem;
  gap: 0;
}

.r2l-selector__sep {
  height: 1px;
  background: var(--r2l-sable-3);
  margin: var(--r2l-s-1);
}
.r2l-selector__group-label {
  padding: 8px var(--r2l-s-2) 4px;
  margin: 0;
  font-family: var(--r2l-font-corps);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--r2l-terre-sec);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN SIMPLE (Le concept)
   ═══════════════════════════════════════════════════════════════ */
.r2l-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--r2l-blanc);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-radius-md);
  box-shadow: var(--r2l-shadow-hover);
  padding: 8px var(--r2l-s-1) var(--r2l-s-1);
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--r2l-transition-sm), transform var(--r2l-transition-sm);
  z-index: 300;
}
.r2l-nav__item--has-dropdown.is-open .r2l-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.r2l-dropdown a {
  display: block;
  padding: 10px var(--r2l-s-3);
  font-size: 0.9375rem;
  color: var(--r2l-charbon);
  text-decoration: none;
  border-radius: var(--r2l-radius-sm);
  transition: background var(--r2l-transition-sm);
}
.r2l-dropdown a:hover { background: var(--r2l-sable-1); color: var(--r2l-charbon); }

/* ═══════════════════════════════════════════════════════════════
   MEGA-MENU DESTINATIONS
   ═══════════════════════════════════════════════════════════════ */
.r2l-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  /* Panel plus compact en largeur car les cards sont en portrait */
  width: min(720px, 90vw);
  background: var(--r2l-blanc);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-radius-lg);
  box-shadow: var(--r2l-shadow-hover);
  padding: 8px var(--r2l-s-3) var(--r2l-s-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--r2l-transition-sm), transform var(--r2l-transition-sm);
  z-index: 300;
}
.r2l-nav__item--has-mega.is-open .r2l-mega {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Hover sur desktop pointer fin (en plus du clic) */
@media (hover: hover) and (pointer: fine) {
  .r2l-nav__item--has-mega:hover .r2l-mega {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  .r2l-nav__item--has-dropdown:hover .r2l-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.r2l-mega__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r2l-s-2);
  margin-bottom: var(--r2l-s-2);
}

.r2l-mega__card {
  position: relative;
  display: block;
  border-radius: var(--r2l-radius-md);
  overflow: hidden;
  /* Format portrait pour valoriser les photos verticales */
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: var(--r2l-blanc);
  background: var(--r2l-sable-3);
}
.r2l-mega__card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top; /* cadre le haut des photos de route/paysage */
  transition: transform 500ms var(--r2l-ease);
}
.r2l-mega__card:hover .r2l-mega__card-img { transform: scale(1.05); }
.r2l-mega__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44,40,42,.62) 0%, rgba(44,40,42,.06) 48%, transparent 100%);
}
.r2l-mega__card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--r2l-s-3);
}
.r2l-mega__card-title {
  font-family: var(--r2l-font-titres);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--r2l-blanc);
  margin: 0;
  line-height: 1.15;
}
.r2l-mega__card-accroche {
  font-family: var(--r2l-font-titres);
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(247,243,238,.78);
  margin: 0;
}
.r2l-mega__card--no-img .r2l-mega__card-overlay { display: none; }
.r2l-mega__card--no-img .r2l-mega__card-title { color: var(--r2l-charbon); }
.r2l-mega__card--no-img .r2l-mega__card-accroche { color: var(--r2l-terre-corps); }

.r2l-mega__footer {
  border-top: 1px solid var(--r2l-sable-3);
  padding-top: var(--r2l-s-2);
  display: flex;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   BURGER
   ═══════════════════════════════════════════════════════════════ */
.r2l-burger {
  display: none; /* masqué en desktop ; affiché en mobile (#12, extrême gauche) */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  margin-left: -8px; /* aligne l'icône sur le bord du container */
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}
.r2l-burger__bar {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--r2l-transition-sm), opacity var(--r2l-transition-sm);
}
.r2l-burger[aria-expanded="true"] .r2l-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.r2l-burger[aria-expanded="true"] .r2l-burger__bar:nth-child(2) {
  opacity: 0;
}
.r2l-burger[aria-expanded="true"] .r2l-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   PANNEAU MOBILE
   ═══════════════════════════════════════════════════════════════ */
.r2l-mobile-panel {
  position: fixed;
  inset: 0;
  background: var(--r2l-sable-0);
  z-index: 190; /* sous le header (200) */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(var(--r2l-header-height, 72px) + var(--r2l-s-2))
           var(--r2l-container-pad)
           var(--r2l-s-8);
  /* État fermé */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--r2l-transition-md), visibility var(--r2l-transition-md);
}
.r2l-mobile-panel.is-open {
  visibility: visible;
  transform: translateX(0);
}

/* Eyebrow d'en-tête du panneau — ancre éditoriale, remplace le vide (#11). */
.r2l-mobile-panel__eyebrow {
  margin: 0 0 var(--r2l-s-2);
}

.r2l-mobile-nav {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
}
.r2l-mobile-nav__item {
  border-bottom: 1px solid var(--r2l-sable-3);
}
.r2l-mobile-nav__item:first-child { border-top: 1px solid var(--r2l-sable-3); }

.r2l-mobile-nav__link,
.r2l-mobile-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--r2l-s-3) 0;
  font-family: var(--r2l-font-titres);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--r2l-charbon);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Label = picto + intitulé, aligné à gauche ; le chevron reste à droite. */
.r2l-mobile-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--r2l-s-2);
  min-width: 0;
}
.r2l-mobile-nav__ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--r2l-terre-sec); /* picto Terre — accent discret, jamais orange */
}

.r2l-mobile-nav__trigger .r2l-chevron {
  flex-shrink: 0;
  color: var(--r2l-terre-sec);
  transition: transform var(--r2l-transition-sm);
}
.r2l-mobile-nav__item.is-open .r2l-mobile-nav__trigger .r2l-chevron {
  transform: rotate(180deg);
}

.r2l-mobile-nav__sub {
  list-style: none;
  margin: 0 0 var(--r2l-s-3);
  /* Aligné sous le texte du parent (picto 22 + gap 16 = 38px), filet Terre à gauche. */
  padding: var(--r2l-s-1) 0 var(--r2l-s-1) 38px;
  border-left: 2px solid var(--r2l-sable-3);
  margin-left: 10px;
  display: none;
}
.r2l-mobile-nav__item.is-open .r2l-mobile-nav__sub { display: block; }
.r2l-mobile-nav__sub a {
  display: block;
  padding: 10px 0;
  font-size: 0.9375rem;
  color: var(--r2l-terre-corps);
  text-decoration: none;
  transition: color var(--r2l-transition-sm), padding-left var(--r2l-transition-sm);
}
.r2l-mobile-nav__sub a:hover {
  color: var(--r2l-charbon);
  padding-left: 4px;
}

/* Bas du panneau mobile */
.r2l-mobile-panel__bottom {
  margin-top: var(--r2l-s-6);
  border-top: 1px solid var(--r2l-sable-3);
  padding-top: var(--r2l-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--r2l-s-3);
}
.r2l-mobile-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2l-s-2);
}
.r2l-mobile-selector-group {
  display: flex;
  gap: var(--r2l-s-1);
  flex-wrap: wrap;
}
/* Boutons sélecteur mobile : adaptation de .r2l-selector__trigger */
.r2l-mobile-panel .r2l-selector__trigger {
  border-color: var(--r2l-sable-4);
  color: var(--r2l-charbon);
  font-size: 0.875rem;
}
.r2l-mobile-panel .r2l-selector__trigger.is-active {
  background: var(--r2l-charbon);
  color: var(--r2l-blanc);
  border-color: var(--r2l-charbon);
}

/* ── Coordonnées en bas de panneau (#10) ── */
.r2l-mobile-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--r2l-s-1);
}
.r2l-mobile-contact__link,
.r2l-mobile-contact__addr {
  display: flex;
  align-items: flex-start;
  gap: var(--r2l-s-2);
  font-size: 0.9375rem;
  color: var(--r2l-terre-corps);
  text-decoration: none;
  line-height: 1.4;
}
.r2l-mobile-contact__link { transition: color var(--r2l-transition-sm); }
.r2l-mobile-contact__link:hover { color: var(--r2l-charbon); }
.r2l-mobile-contact__ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--r2l-terre-sec);
}

/* ═══════════════════════════════════════════════════════════════
   CASCADE D'ENTRÉE (panneau mobile) — brique motion partagée §11.
   Gatée par html.js → sans JS tout est visible (PE). Rejoue à chaque
   ouverture car le retrait de .is-open réinitialise l'animation.
   ═══════════════════════════════════════════════════════════════ */
@keyframes r2l-mob-cascade {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
html.js .r2l-mobile-panel__eyebrow,
html.js .r2l-mobile-nav__item,
html.js .r2l-mobile-panel__bottom {
  opacity: 0;
}
.r2l-mobile-panel.is-open .r2l-mobile-panel__eyebrow,
.r2l-mobile-panel.is-open .r2l-mobile-nav__item,
.r2l-mobile-panel.is-open .r2l-mobile-panel__bottom {
  animation: r2l-mob-cascade var(--r2l-dur-reveal) var(--r2l-ease-reveal) both;
}
/* Stagger : l'eyebrow entre en premier, puis les items, puis le bas. */
.r2l-mobile-panel.is-open .r2l-mobile-panel__eyebrow   { animation-delay: 0.06s; }
.r2l-mobile-panel.is-open .r2l-mobile-nav__item:nth-child(1) { animation-delay: 0.12s; }
.r2l-mobile-panel.is-open .r2l-mobile-nav__item:nth-child(2) { animation-delay: 0.18s; }
.r2l-mobile-panel.is-open .r2l-mobile-nav__item:nth-child(3) { animation-delay: 0.24s; }
.r2l-mobile-panel.is-open .r2l-mobile-nav__item:nth-child(4) { animation-delay: 0.30s; }
.r2l-mobile-panel.is-open .r2l-mobile-panel__bottom    { animation-delay: 0.36s; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .r2l-header .r2l-nav,
  .r2l-header__right { display: none; }
  /* Ordre mobile : burger · logo · … · devise · téléphone (#12) */
  .r2l-burger { display: flex; }
  .r2l-header__mobile-actions { display: flex; margin-left: auto; }

  /* Barre mobile toujours équilibrée : gaps resserrés + éléments latéraux
     autorisés à se compresser pour que le téléphone reste visible (#12). */
  .r2l-header__inner { gap: var(--r2l-s-2); }
  .r2l-header__logo { min-width: 0; } /* le logo cède avant de pousser les actions hors écran */
  .r2l-header__mobile-actions { gap: var(--r2l-s-1); min-width: 0; }
}

/* Petits téléphones : on rétrécit le logo et on compacte encore les actions
   pour garder burger · logo · devise · téléphone sur une seule ligne équilibrée. */
@media (max-width: 479px) {
  .r2l-header__inner { gap: 12px; }
  .r2l-header__logo-img { height: 22px; }
  .r2l-header.is-scrolled .r2l-header__logo-img { height: 20px; }
  .r2l-header__mobile-actions { gap: 2px; }
  .r2l-selector--compact .r2l-selector__trigger { padding: 6px 4px; }
  .r2l-header__phone--icon { padding: 6px; }
}

@media (max-width: 359px) {
  .r2l-header__logo-img { height: 20px; }
  /* Label devise (drapeau + symbole + code) réduit pour dégager de la place. */
  .r2l-selector--compact .r2l-selector__label { font-size: 0.75rem; }
}
@media (min-width: 1024px) {
  .r2l-header__mobile-actions { display: none; }
  .r2l-mobile-panel { display: none !important; }
}

/* Padding-top général sur les pages sans hero plein-écran */
body:not(.r2l-has-hero) .r2l-main {
  padding-top: var(--r2l-header-height, 72px);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

/* Override du stub main.css */
.r2l-footer {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-1);
  padding-block: 0;
}

/* Corps principal : brand (identité+contact+réseaux) + newsletter en haut,
   nav colonnes en bas, séparées par un filet plein largeur */
.r2l-footer__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "brand newsletter"
    "nav   nav";
  column-gap: var(--r2l-s-12);
  row-gap: var(--r2l-s-6);   /* 48px entre rangée haute et colonnes nav */
  padding-block: var(--r2l-s-8) var(--r2l-s-6);  /* 64px haut / 48px bas */
}

/* ── Bloc marque : logo → tagline → desc → coordonnées → réseaux ── */
.r2l-footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--r2l-s-2);   /* 16px — resserré */
}
.r2l-footer__logo {
  display: inline-flex;
  text-decoration: none;
  line-height: 0;
  transition: opacity var(--r2l-transition-sm);
}
.r2l-footer__logo:hover { opacity: .78; }
.r2l-footer__logo-img {
  display: block;
  height: 56px;   /* logo full (texte + moto/montagnes) */
  width: auto;
  max-width: 180px;
}
.r2l-footer__tagline {
  font-size: var(--r2l-text-meta);
  font-weight: 600;
  color: var(--r2l-sable-0);   /* #FAF9F6 — pleine sur fond charbon */
  margin: 0;
}
.r2l-footer__desc {
  font-size: var(--r2l-text-meta);
  color: rgba(247,243,238,.70);
  line-height: 1.65;
  margin: 0;
}
/* ── Coordonnées — liste verticale dans le bloc marque (Options « Coordonnées ») ── */
.r2l-footer__coords {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: var(--r2l-s-1) 0 0;
  padding: 0;
}
.r2l-footer__coords li { margin: 0; }
.r2l-footer__contact-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: rgba(247,243,238,.72);
  font-size: var(--r2l-text-meta);
  line-height: 1.5;
  transition: color var(--r2l-transition-sm);
}
a.r2l-footer__contact-item:hover { color: var(--r2l-sable-0); }
.r2l-footer__contact-item--static { cursor: default; }
.r2l-footer__contact-item--phone {
  color: var(--r2l-sable-0);
  font-weight: 600;
}
.r2l-footer__contact-ic {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;   /* aligne le picto sur la 1re ligne du texte */
  color: rgba(247,243,238,.55);
  transition: color var(--r2l-transition-sm);
}
a.r2l-footer__contact-item:hover .r2l-footer__contact-ic { color: var(--r2l-sable-0); }

/* ── Réseaux sociaux — sous les coordonnées, dans le bloc marque ── */
.r2l-footer__social {
  display: flex;
  gap: var(--r2l-s-2);
  list-style: none;
  margin: var(--r2l-s-2) 0 0;
  padding: 0;
}
.r2l-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(247,243,238,.18);
  border-radius: var(--r2l-radius-sm);
  color: rgba(247,243,238,.55);
  text-decoration: none;
  transition: border-color var(--r2l-transition-sm), color var(--r2l-transition-sm);
}
.r2l-footer__social a:hover {
  border-color: rgba(247,243,238,.5);
  background: rgba(247,243,238,.08);
  color: var(--r2l-blanc);
}
.r2l-footer__social svg {
  width: 16px; height: 16px;
  display: block;
  /* Icônes outline auto-portantes (stroke="currentColor" en attribut SVG) */
}

/* ── Newsletter ── */
.r2l-footer__newsletter {
  grid-area: newsletter;
  display: flex;
  flex-direction: column;
  gap: var(--r2l-s-2);
}
.r2l-footer__newsletter .r2l-eyebrow {
  color: rgba(247,243,238,.55);
}
.r2l-footer__newsletter-title {
  font-family: var(--r2l-font-titres);
  font-size: 1.3125rem;
  font-weight: 500;
  color: var(--r2l-blanc);
  margin: 0;
  line-height: 1.25;
}
.r2l-footer__newsletter-sub {
  font-size: var(--r2l-text-meta);
  color: rgba(247,243,238,.70);
  line-height: 1.65;
  margin: 0;
}
.r2l-footer__form {
  display: flex;
  gap: var(--r2l-s-1);
  margin-top: var(--r2l-s-1);
}
.r2l-footer__email {
  flex: 1;
  padding: 0.625rem var(--r2l-s-3);
  font-family: var(--r2l-font-corps);
  font-size: 0.9375rem;
  color: var(--r2l-charbon);
  background: var(--r2l-sable-0);
  border: 1.5px solid var(--r2l-sable-4);
  border-radius: var(--r2l-radius-md);
  outline: none;
  transition: border-color var(--r2l-transition-sm);
  min-width: 0; /* flex shrink */
}
.r2l-footer__email:focus { border-color: var(--r2l-charbon); }
.r2l-footer__email::placeholder { color: var(--r2l-terre-sec); }
.r2l-footer__submit {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
}
.r2l-footer__legal-note {
  font-size: 0.75rem;
  color: rgba(247,243,238,.50);
  margin: 0;
}

/* ── Nav colonnes ── */
.r2l-footer__nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r2l-s-6);
  padding-top: var(--r2l-s-6);
  border-top: 1px solid rgba(247,243,238,.12);
}
.r2l-footer__nav-col {}
.r2l-footer__nav-col .r2l-eyebrow {
  color: rgba(247,243,238,.55);
  margin-bottom: var(--r2l-s-2);   /* 16px — réduit depuis 24px */
}
.r2l-footer__nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.r2l-footer__nav-list a {
  font-size: 0.9375rem;
  color: rgba(247,243,238,.85);
  text-decoration: none;
  transition: color var(--r2l-transition-sm), text-decoration-color var(--r2l-transition-sm);
  display: inline-block;
}
.r2l-footer__nav-list a:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(247,243,238,.35);
  text-underline-offset: 3px;
}

/* ── Barre bas de page ── */
.r2l-footer__bottom {
  border-top: 1px solid rgba(247,243,238,.12);
  padding-block: var(--r2l-s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--r2l-s-3);
}
.r2l-footer__copyright {
  font-size: var(--r2l-text-caption);
  color: rgba(247,243,238,.50);
  margin: 0;
}
.r2l-footer__legal {
  display: flex;
  gap: var(--r2l-s-3);
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.r2l-footer__legal a {
  font-size: var(--r2l-text-caption);
  color: rgba(247,243,238,.50);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-footer__legal a:hover { color: rgba(247,243,238,.80); }

/* ── Responsive footer ── */
@media (max-width: 767px) {
  .r2l-footer__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "newsletter"
      "nav";
    row-gap: var(--r2l-s-6);
    padding-block: var(--r2l-s-6);
  }
  .r2l-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--r2l-s-6) var(--r2l-s-4);
    padding-top: var(--r2l-s-6);
  }
  .r2l-footer__form {
    flex-direction: column;
  }
  .r2l-footer__submit {
    width: 100%;
    justify-content: center;
  }
  .r2l-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--r2l-s-3);
  }
  .r2l-footer__legal { justify-content: center; }
}
@media (max-width: 479px) {
  .r2l-footer__nav { grid-template-columns: 1fr; }
}

/* ── Admin bar WordPress (utilisateur connecté) ──────────────
   WP ajoute .admin-bar sur <body> + une barre fixe de 32 px.
   Sur écran < 782 px la barre fait 46 px.
   Sur écran < 600 px elle passe en position:absolute → pas d'offset.
   ─────────────────────────────────────────────────────────────── */
.admin-bar .r2l-header {
  top: 32px;
}
.admin-bar .r2l-mobile-panel {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .r2l-header,
  .admin-bar .r2l-mobile-panel {
    top: 46px;
  }
}
@media screen and (max-width: 600px) {
  /* En dessous de 600 px, l'admin bar passe en absolute → retour à 0 */
  .admin-bar .r2l-header,
  .admin-bar .r2l-mobile-panel {
    top: 0;
  }
}

/* ── A11y — reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .r2l-header,
  .r2l-header__inner,
  .r2l-mega,
  .r2l-dropdown,
  .r2l-selector__menu,
  .r2l-burger__bar,
  .r2l-mobile-panel,
  .r2l-nav__trigger .r2l-chevron,
  .r2l-selector__trigger .r2l-chevron {
    transition: none !important;
  }
  .r2l-mega__card-img { transition: none !important; }
  /* Cascade panneau mobile neutralisée → tout visible instantanément. */
  html.js .r2l-mobile-panel__eyebrow,
  html.js .r2l-mobile-nav__item,
  html.js .r2l-mobile-panel__bottom,
  .r2l-mobile-panel.is-open .r2l-mobile-panel__eyebrow,
  .r2l-mobile-panel.is-open .r2l-mobile-nav__item,
  .r2l-mobile-panel.is-open .r2l-mobile-panel__bottom {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}