/* ── Road2Luxe — faq.css ─────────────────────────────────────────
   Page /faq-voyages/.

   Rappels de charte appliqués ici :
   • Flamingo = CTA uniquement : ni picto, ni état ouvert, ni thème actif.
     Seul le focus clavier le reprend (convention du thème).
   • Accents éditoriaux de titre → var(--r2l-accent-titre).
   • Tout élément .r2l-rise a un ancêtre .js-reveal (contrat §11).
   • Surface claire continue jusqu'au pré-footer → rythme bord en bas.
   Namespace .r2l-faqp (page) : .r2l-faq est l'accordéon des fiches.
──────────────────────────────────────────────────────────────── */

.r2l-faqp {
  background: var(--r2l-sable-0);
}


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

/* ⚠️ Ne pas ré-ajouter var(--r2l-header-height) : nav.css pose déjà
   padding-top sur .r2l-main des pages sans hero plein écran. */
.r2l-faqp-hero {
  padding-block: var(--r2l-rythme-intra) var(--r2l-s-6);
  background: linear-gradient(to bottom, var(--r2l-sable-1), var(--r2l-sable-0));
}

.r2l-faqp-hero__title {
  margin: var(--r2l-s-2) 0 0;
  max-width: 22ch;
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h1);
  font-weight: var(--r2l-fw-h1);
  line-height: 1.12;
  color: var(--r2l-charbon);
  text-wrap: balance;
}

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

.r2l-faqp-hero__lede {
  margin: var(--r2l-s-3) 0 0;
  max-width: 60ch;
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
}

.r2l-faqp-hero__meta {
  margin: var(--r2l-s-2) 0 0;
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-sec);
}


/* ══════════════════════════════════════════════════════════════
   2. CORPS — sommaire + rubriques
   ══════════════════════════════════════════════════════════════ */

.r2l-faqp-corps {
  padding-bottom: var(--r2l-rythme-inter);
}

.r2l-faqp-corps__grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.r2l-faqp-side {
  position: sticky;
  top: calc(var(--r2l-header-height, 72px) + var(--r2l-s-3));
  display: flex;
  flex-direction: column;
  gap: var(--r2l-s-4);
}

/* Mobile : la colonne se dissout, le sommaire passe en tête et l'aide
   après les réponses — on la trouve quand on a fini de chercher. */
@media (max-width: 899px) {
  .r2l-faqp-corps__grid { grid-template-columns: minmax(0, 1fr); gap: var(--r2l-s-4); }
  .r2l-faqp-side        { display: contents; }
  .r2l-faqp-nav         { order: 0; }
  .r2l-faqp-rubriques   { order: 1; }
  .r2l-faqp-aide        { order: 2; }
}


/* ── Sommaire ── */

.r2l-faqp-nav__label {
  margin: 0 0 var(--r2l-s-1);
  font-size: var(--r2l-text-eyebrow);
  font-weight: var(--r2l-fw-eyebrow);
  letter-spacing: var(--r2l-ls-eyebrow);
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
}

.r2l-faqp-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--r2l-sable-4);
}

.r2l-faqp-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 14px;
  border-bottom: 1px solid var(--r2l-sable-4);
  font-size: var(--r2l-text-meta);
  font-weight: 500;
  line-height: 1.35;
  color: var(--r2l-terre-corps);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}

/* Filet d'état actif — charbon, jamais orange. */
.r2l-faqp-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  inset-block: 12px;
  width: 2px;
  background: var(--r2l-charbon);
  transform: scaleY(0);
  transition: transform var(--r2l-transition-sm);
}

.r2l-faqp-nav__link:hover,
.r2l-faqp-nav__link[aria-current] { color: var(--r2l-charbon); }
.r2l-faqp-nav__link[aria-current] { font-weight: 700; }
.r2l-faqp-nav__link[aria-current]::before { transform: scaleY(1); }

.r2l-faqp-nav__link:focus-visible {
  outline: 2px solid var(--r2l-flamingo);
  outline-offset: 2px;
}

.r2l-faqp-nav__ic { display: inline-flex; color: var(--r2l-charbon); }
.r2l-faqp-nav__ic svg { width: 18px; height: 18px; }

.r2l-faqp-nav__txt { flex: 1; }

.r2l-faqp-nav__count {
  font-size: var(--r2l-text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--r2l-terre-sec);
}

/* Mobile : rangée de pastilles défilante, qui déborde dans la gouttière
   pour signaler qu'il y a une suite. */
@media (max-width: 899px) {
  .r2l-faqp-nav__label { display: none; }

  .r2l-faqp-nav__list {
    display: flex;
    gap: var(--r2l-s-1);
    margin-inline: calc(-1 * var(--r2l-gutter));
    padding-inline: var(--r2l-gutter);
    border-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: var(--r2l-gutter);
  }
  .r2l-faqp-nav__list::-webkit-scrollbar { display: none; }

  .r2l-faqp-nav__link {
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--r2l-sable-4);
    border-radius: 999px;
    background: var(--r2l-blanc);
    white-space: nowrap;
  }
  .r2l-faqp-nav__link::before { display: none; }
  .r2l-faqp-nav__link[aria-current] { font-weight: 500; }
  .r2l-faqp-nav__count { display: none; }
}


/* ── Aide conseiller ── */

.r2l-faqp-aide {
  padding: var(--r2l-card-pad);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
  background: var(--r2l-blanc);
}

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

.r2l-faqp-aide__txt {
  margin: var(--r2l-s-1) 0 0;
  font-size: var(--r2l-text-meta);
  line-height: var(--r2l-lh-meta);
  color: var(--r2l-terre-corps);
}

.r2l-faqp-aide__canaux {
  display: grid;
  gap: 6px;
  margin: var(--r2l-s-2) 0;
  padding: 0;
  list-style: none;
}

.r2l-faqp-aide__canal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--r2l-text-meta);
  font-weight: 700;
  color: var(--r2l-charbon);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.r2l-faqp-aide__canal:hover span { text-decoration: underline; text-underline-offset: 3px; }
.r2l-faqp-aide__canal svg { flex-shrink: 0; width: 18px; height: 18px; }


/* ── Rubriques ── */

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

/* Les ancres atterrissent sous le header fixe, pas derrière. */
.r2l-faqp-rubrique,
.r2l-faqp-item {
  scroll-margin-top: calc(var(--r2l-header-height, 72px) + var(--r2l-s-3));
}

@media (max-width: 899px) {
  .r2l-faqp-rubrique:first-child { margin-top: var(--r2l-s-2); }
}

.r2l-faqp-rubrique__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--r2l-s-2);
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h2);
  font-weight: var(--r2l-fw-h2);
  line-height: 1.2;
  color: var(--r2l-charbon);
}

.r2l-faqp-rubrique__ic { display: inline-flex; }
.r2l-faqp-rubrique__ic svg { width: 28px; height: 28px; }


/* ── Accordéon ── */

.r2l-faqp-list { max-width: 76ch; }

.r2l-faqp-item { border-top: 1px solid var(--r2l-sable-4); }
.r2l-faqp-item:last-child { border-bottom: 1px solid var(--r2l-sable-4); }

.r2l-faqp-item__q {
  position: relative;
  display: block;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  list-style: none;
}

.r2l-faqp-item__q::-webkit-details-marker { display: none; }

.r2l-faqp-item__q:focus-visible {
  outline: 2px solid var(--r2l-flamingo);
  outline-offset: 2px;
  border-radius: var(--r2l-radius-sm);
}

/* Le h3 garde la hiérarchie de la page ; le résumé reste un seul bouton. */
.r2l-faqp-item__q-txt {
  margin: 0;
  font-family: var(--r2l-font-titres);
  font-size: var(--r2l-text-h3);
  font-weight: var(--r2l-fw-h3);
  line-height: 1.35;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}

.r2l-faqp-item__q:hover .r2l-faqp-item__q-txt { color: var(--r2l-terre-corps); }

/* Plus → moins : cercle charbon au trait, rempli à l'ouverture. */
.r2l-faqp-item__q::before,
.r2l-faqp-item__q::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--r2l-charbon);
  transition: transform var(--r2l-transition-sm), opacity var(--r2l-transition-sm);
}

.r2l-faqp-item__q::after { transform: rotate(90deg); }
.r2l-faqp-item[open] > .r2l-faqp-item__q::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

.r2l-faqp-item__a {
  padding: 0 44px var(--r2l-s-4) 0;
}

.r2l-faqp-item[open] .r2l-faqp-item__a {
  animation: r2l-faqp-in .35s var(--r2l-ease-reveal, ease) both;
}

@keyframes r2l-faqp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 599px) {
  .r2l-faqp-item__a { padding-right: 0; }
}

.r2l-faqp-item__a p {
  margin: 0 0 12px;
  font-size: var(--r2l-text-corps);
  line-height: var(--r2l-lh-corps);
  color: var(--r2l-terre-corps);
}

.r2l-faqp-item__a > :last-child { margin-bottom: 0; }

.r2l-faqp-item__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: var(--r2l-s-2) !important;
}


/* ── Barème d'annulation ── */

.r2l-faqp-bareme {
  margin: var(--r2l-s-2) 0;
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
  background: var(--r2l-blanc);
  overflow-x: auto;
}

.r2l-faqp-bareme table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--r2l-text-meta);
}

.r2l-faqp-bareme th,
.r2l-faqp-bareme td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid var(--r2l-sable-3);
}

.r2l-faqp-bareme thead th {
  border-top: 0;
  font-size: var(--r2l-text-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
}

.r2l-faqp-bareme tbody th {
  font-weight: 500;
  color: var(--r2l-terre-corps);
}

.r2l-faqp-bareme td {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 10rem;
}

/* Jauge : la montée des frais se lit d'un coup d'œil. Charbon atténué —
   c'est une information, pas une alerte. */
.r2l-faqp-bareme__barre {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--r2l-charbon) var(--p), var(--r2l-sable-3) var(--p));
  opacity: .7;
}

.r2l-faqp-bareme__val {
  min-width: 3.5em;
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--r2l-charbon);
}


/* ── Garanties légales (liste market-aware de « Qui sommes-nous ») ── */

.r2l-faqp-garanties {
  margin: var(--r2l-s-2) 0;
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
  background: var(--r2l-blanc);
}

.r2l-faqp-garantie {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--r2l-s-2);
  padding: 12px 16px;
  border-top: 1px solid var(--r2l-sable-3);
}

.r2l-faqp-garantie:first-child { border-top: 0; }

@media (max-width: 599px) {
  .r2l-faqp-garantie { grid-template-columns: 1fr; gap: 2px; }
}

.r2l-faqp-garantie dt {
  font-size: var(--r2l-text-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--r2l-terre-sec);
}

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

.r2l-faqp-garantie dd strong { color: var(--r2l-charbon); }


@media (prefers-reduced-motion: reduce) {
  .r2l-faqp-item[open] .r2l-faqp-item__a { animation: none; }
  .r2l-faqp-nav__link::before,
  .r2l-faqp-item__q::after { transition: none; }
}