/* ── Road2Luxe — hub-destination.css ───────────────────────────
   Styles pour les hubs destination (taxonomy-r2l_destination).
   Chargé sur is_tax('r2l_destination') uniquement.
   Dépendances : tokens.css, main.css, components.css,
                 card-destination.css, home-avis.css.
   ────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   HERO — recette identique à .r2l-fiche-hero
   Photo + voile charbon dégradé + grain (3 %) + min-height 86vh
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  color: var(--r2l-sable-1);
  overflow: hidden;
  background-color: var(--r2l-charbon);
  --r2l-accent-titre: #C2A98F; /* Terre clair sur fond sombre */
}

.r2l-hub-hero__bg {
  position: absolute;
  inset: 0;
}

/* Absorption du déplacement parallax (top:-8%, height:116%) */
html.js .r2l-hub-hero__bg img.js-parallax {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Sans JS ou sans parallax : pleine couverture normale */
html:not(.js) .r2l-hub-hero__bg img,
.r2l-hub-hero__bg img:not(.js-parallax) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.r2l-hub-hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(44,40,42,.10) 0%,
    rgba(44,40,42,.32) 45%,
    rgba(44,40,42,.88) 100%
  );
  pointer-events: none;
}

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

.r2l-hub-hero .r2l-container {
  position: relative;
  z-index: 2;
  padding-bottom: 56px;
  width: 100%;
}

/* ── Fil d'ariane ── */
.r2l-hub-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(247,243,238,.75);
  margin-bottom: 26px;
}
.r2l-hub-hero__breadcrumb a {
  text-decoration: none;
  color: inherit;
}
.r2l-hub-hero__breadcrumb a:hover { color: var(--r2l-sable-1); }
.r2l-hub-hero__breadcrumb span { opacity: .5; }

/* ── Eyebrow dans le hero ── */
.r2l-hub-hero .r2l-eyebrow {
  color: rgba(247,243,238,.88);
  margin-bottom: 16px;
}
.r2l-hub-hero__eyebrow-link {
  color: inherit;
  text-decoration: none;
}
.r2l-hub-hero__eyebrow-link:hover { opacity: .8; }

/* ── H1 ── */
.r2l-hub-hero__h1 {
  font-family: var(--r2l-font-titres);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 600;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 var(--r2l-s-3);
  max-width: 18ch;
}
.r2l-hub-hero__h1 em {
  display: block;
  font-style: normal;
  color: var(--r2l-sable-3);
}

/* ── Accroche ── */
.r2l-hub-hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(247,243,238,.88);
  max-width: 54ch;
  margin: 0 0 var(--r2l-s-4);
}

/* ── Réassurance ── */
.r2l-hub-hero__reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0 0 var(--r2l-s-4);
  padding: 0;
  list-style: none;
  font-size: var(--r2l-text-meta);
  color: rgba(247,243,238,.80);
}
.r2l-hub-hero__reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.r2l-hub-hero__reassurance .r2l-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── CTAs ── */
.r2l-hub-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Variante outline sur fond sombre */
.r2l-btn--outline-light {
  background: transparent;
  color: var(--r2l-blanc);
  border: 1.5px solid rgba(247,243,238,.50);
}
.r2l-btn--outline-light:hover {
  background: rgba(247,243,238,.10);
  color: var(--r2l-blanc);
}


/* ═══════════════════════════════════════════════════════════════
   INTRO ÉDITORIALE
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-intro {
  padding-block: var(--r2l-rythme-inter);
  background: var(--r2l-sable-0);
}

.r2l-hub-intro__body {
  max-width: 72ch;
}
.r2l-hub-intro__body h2,
.r2l-hub-intro__body h3 {
  color: var(--r2l-charbon);
  margin-top: var(--r2l-s-6);
}
.r2l-hub-intro__body h2 em,
.r2l-hub-intro__body h3 em {
  font-style: normal;
  color: var(--r2l-accent-titre);
}
.r2l-hub-intro__body p {
  color: var(--r2l-terre-corps);
  line-height: var(--r2l-lh-corps);
}


/* ═══════════════════════════════════════════════════════════════
   VOYAGES CURÉS
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-voyages {
  padding-block: var(--r2l-rythme-inter);
  background: var(--r2l-sable-1);
}

.r2l-hub-voyages__header {
  margin-bottom: var(--r2l-s-6);
}

.r2l-hub-voyages__title {
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: var(--r2l-s-2) 0 0;
  line-height: 1.18;
}

.r2l-hub-voyages__accent {
  font-style: normal;
  color: var(--r2l-accent-titre);
}

.r2l-hub-voyages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--r2l-s-4);
  margin-bottom: var(--r2l-s-6);
}

.r2l-hub-voyages__more {
  text-align: center;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   BON À SAVOIR — fond charbon
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-bas {
  background: var(--r2l-charbon);
  padding-block: var(--r2l-rythme-inter);
  color: var(--r2l-sable-1);
  --r2l-accent-titre: #C2A98F;
}

.r2l-hub-bas__header {
  margin-bottom: var(--r2l-s-6);
}

.r2l-hub-bas__header .r2l-eyebrow {
  color: rgba(247,243,238,.65);
}

.r2l-hub-bas__title {
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: #fff;
  margin: var(--r2l-s-2) 0 0;
  line-height: 1.18;
}

.r2l-hub-bas__accent {
  font-style: normal;
  color: var(--r2l-accent-titre);
}

.r2l-hub-bas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--r2l-s-3);
}

.r2l-hub-bas__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--r2l-s-4);
  background: rgba(247,243,238,.06);
  border: 1px solid rgba(247,243,238,.10);
  border-radius: var(--r2l-card-radius);
}

.r2l-hub-bas__icon {
  width: 22px;
  height: 22px;
  color: rgba(247,243,238,.65);
  flex-shrink: 0;
}

.r2l-hub-bas__label {
  font-size: var(--r2l-text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(247,243,238,.50);
}

.r2l-hub-bas__val {
  font-size: var(--r2l-text-corps);
  font-weight: 500;
  color: var(--r2l-sable-1);
  line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION POURQUOI — reprend les styles de voyages.css
   Dupliqués ici car voyages.css n'est pas chargé sur is_tax.
   ═══════════════════════════════════════════════════════════════ */

.r2l-pourquoi {
  background: var(--r2l-sable-1);
  padding-block: var(--r2l-rythme-inter);
  border-top: 1px solid var(--r2l-sable-3);
}

.r2l-pourquoi__header {
  max-width: 640px;
  margin-bottom: var(--r2l-s-8);
}

.r2l-pourquoi__title {
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: 0;
  line-height: 1.18;
}

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

.r2l-pourquoi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r2l-s-8) var(--r2l-s-6);
}

.r2l-pourquoi__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--r2l-s-2);
}

.r2l-pourquoi__icon {
  width: 32px;
  height: 32px;
  color: var(--r2l-charbon);
  flex-shrink: 0;
}

.r2l-pourquoi__titre {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: 600;
  color: var(--r2l-charbon);
  line-height: 1.25;
  margin: 0;
}

.r2l-pourquoi__cond {
  display: block;
  font-size: .78em;
  font-weight: 500;
  color: var(--r2l-terre-sec);
}

.r2l-pourquoi__sub {
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
  line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════════
   AVIS (surcharge sur .r2l-avis de home-avis.css)
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-avis .r2l-avis__lede {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   SEO LONG + FAQ
   ═══════════════════════════════════════════════════════════════ */

.r2l-hub-seo {
  padding-block: var(--r2l-rythme-inter);
  background: var(--r2l-sable-0);
}

.r2l-hub-seo__texte {
  max-width: 72ch;
  margin-bottom: var(--r2l-s-8);
}
.r2l-hub-seo__texte p {
  color: var(--r2l-terre-corps);
  line-height: var(--r2l-lh-corps);
}
.r2l-hub-seo__texte h2,
.r2l-hub-seo__texte h3 {
  color: var(--r2l-charbon);
  margin-top: var(--r2l-s-6);
}

.r2l-hub-seo__faq {
  max-width: 760px;
}

.r2l-hub-seo__faq-title {
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: 0 0 var(--r2l-s-6);
}

/* ── Accordéon details/summary ── */

.r2l-hub-faq__item {
  border-bottom: 1px solid var(--r2l-sable-3);
}
.r2l-hub-faq__item:first-child {
  border-top: 1px solid var(--r2l-sable-3);
}

.r2l-hub-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--r2l-s-4);
  padding: var(--r2l-s-3) 0;
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  color: var(--r2l-charbon);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-hub-faq__question::-webkit-details-marker { display: none; }
.r2l-hub-faq__question:hover { color: var(--r2l-terre-corps); }

.r2l-hub-faq__question::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform var(--r2l-transition-md);
  color: var(--r2l-terre-sec);
}
.r2l-hub-faq__item[open] .r2l-hub-faq__question::after {
  transform: rotate(45deg);
}

.r2l-hub-faq__reponse {
  padding: 0 var(--r2l-s-8) var(--r2l-s-4) 0;
  color: var(--r2l-terre-corps);
  line-height: var(--r2l-lh-corps);
}
.r2l-hub-faq__reponse p {
  margin: 0 0 var(--r2l-s-2);
}
.r2l-hub-faq__reponse p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
   GABARIT CONTINENT — grille de tuiles pays
   ═══════════════════════════════════════════════════════════════ */

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

.r2l-continent__header {
  margin-bottom: var(--r2l-s-6);
}

.r2l-continent__title {
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  color: var(--r2l-charbon);
  margin: 0;
}

.r2l-continent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--r2l-s-4);
  margin-bottom: var(--r2l-s-6);
}

.r2l-continent__pays {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r2l-card-radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--r2l-charbon);
  box-shadow: var(--r2l-card-shadow);
  min-height: 240px;
  transition: box-shadow var(--r2l-transition-md), transform var(--r2l-transition-md);
}
.r2l-continent__pays:hover {
  transform: translateY(-2px);
  box-shadow: var(--r2l-shadow-hover);
}

.r2l-continent__pays-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.r2l-continent__pays-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 380ms var(--r2l-ease);
}
.r2l-continent__pays:hover .r2l-continent__pays-img img {
  transform: scale(1.04);
}

.r2l-continent__pays-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44,40,42,.04) 0%, rgba(44,40,42,.70) 100%);
}

.r2l-continent__pays-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--r2l-card-pad);
  margin-top: auto;
}

.r2l-continent__pays-name {
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.r2l-continent__pays-sub {
  font-size: var(--r2l-text-meta);
  color: rgba(247,243,238,.72);
  line-height: 1.4;
}

.r2l-continent__cta {
  text-align: center;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .r2l-pourquoi__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .r2l-hub-hero {
    min-height: 80vh;
  }
  .r2l-hub-hero__h1 {
    font-size: clamp(32px, 8vw, 46px);
  }
  .r2l-hub-voyages__grid,
  .r2l-continent__grid {
    grid-template-columns: 1fr;
  }
  .r2l-hub-bas__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .r2l-pourquoi__grid {
    grid-template-columns: 1fr;
    gap: var(--r2l-s-6);
  }
  .r2l-hub-bas__grid {
    grid-template-columns: 1fr;
  }
  .r2l-hub-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }
  .r2l-hub-hero__ctas .r2l-btn {
    width: 100%;
    justify-content: center;
  }
}