/* ── Road2Luxe — circuit-departs.css ──────────────────────────────
   Bloc « Prochains départs » (liste) + Rappel bas de page.
   Chargé uniquement sur is_singular('r2l_circuit').
   Dépend de tokens.css + main.css (r2l-eyebrow y est défini).
   Maquette de référence : _import/artefacts/r2l-departs-final.html
   ──────────────────────────────────────────────────────────────── */

:root {
  --r2l-departs-padx: clamp(16px, 1.8vw, 22px);
  /* Gabarit de colonnes partagé — en-tête de colonnes + lignes alignés au pixel */
  --r2l-departs-grid: 1.7fr 1.4fr 1.2fr 148px 108px;
}

/* ══════════════════════════════════════════════════════════════
   BLOC LISTE DES DÉPARTS
   ══════════════════════════════════════════════════════════════ */

.r2l-departs {
  padding-block: var(--r2l-rythme-intra);
}

.r2l-departs__panel {
  background: var(--r2l-sable-0);
  border: 1px solid var(--r2l-sable-4);
  border-radius: var(--r2l-card-radius);
  padding: 0 0 8px;
  overflow: hidden;   /* le fond de l'en-tête suit l'arrondi du panneau */
}

/* ── En-tête du bloc — bandeau de tableau (fond soutenu, pleine largeur) ── */

.r2l-departs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px var(--r2l-departs-padx);
  background: var(--r2l-sable-2);
  border-bottom: 1px solid var(--r2l-sable-4);
}

.r2l-departs__head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.r2l-departs__garanti {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--r2l-kaki);
  font-weight: 600;
}

/* Bandeau sur une ligne → on neutralise les marges de flux (p, eyebrow) */
.r2l-departs__head p,
.r2l-departs__head .r2l-eyebrow {
  margin: 0;
}

.r2l-departs__head .r2l-eyebrow {
  color: var(--r2l-charbon);
}

.r2l-departs__garanti .r2l-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.r2l-departs__apartir {
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-meta);
  color: var(--r2l-terre-corps);
}

.r2l-departs__apartir b {
  font-family: var(--r2l-font-titres);
  font-size: 21px;
  font-weight: 600;
  color: var(--r2l-charbon);
}

/* ── En-tête de colonnes (desktop only) ── */

.r2l-dep-cols {
  display: grid;
  grid-template-columns: var(--r2l-departs-grid);
  gap: 22px;
  padding: 12px var(--r2l-departs-padx) 10px;
  border-bottom: 1px solid var(--r2l-sable-4);
  font-family: var(--r2l-font-corps);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--r2l-terre-sec);
}

/* ── Ligne de départ — .r2l-dep-row (BEM : évite conflit fiche.css .r2l-depart) ── */

.r2l-dep-row {
  display: grid;
  grid-template-columns: var(--r2l-departs-grid);
  align-items: center;
  gap: 22px;
  padding: 18px var(--r2l-departs-padx);
  margin: 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--r2l-transition-sm);
}

/* Filet entre lignes uniquement — l'en-tête de colonnes porte déjà le sien */
.r2l-dep-row + .r2l-dep-row {
  border-top: 1px solid var(--r2l-sable-3);
}

a.r2l-dep-row:hover,
a.r2l-dep-row:focus-visible {
  background: var(--r2l-sable-1);
  outline: none;
}

a.r2l-dep-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--r2l-terre-sec);
}

a.r2l-dep-row:hover .r2l-dep-row__cta,
a.r2l-dep-row:focus-visible .r2l-dep-row__cta {
  color: var(--r2l-flamingo);
}

a.r2l-dep-row:hover .r2l-dep-row__cta .r2l-icon,
a.r2l-dep-row:focus-visible .r2l-dep-row__cta .r2l-icon {
  transform: translateX(4px);
}

.r2l-dep-row--complet {
  opacity: .42;
}

/* ── Colonne 1 : date ── */

.r2l-dep-row__date b {
  font-family: var(--r2l-font-titres);
  font-weight: 500;
  font-size: 17px;
  color: var(--r2l-charbon);
  font-variant-numeric: tabular-nums;
}

.r2l-dep-row__to {
  color: var(--r2l-terre-sec);
  font-size: 15px;
}

.r2l-dep-row__meta {
  font-size: 12.5px;
  color: var(--r2l-terre-sec);
  margin-top: 5px;
}

/* ── Colonne 2 : accompagnateur ── */

.r2l-dep-row__acc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.r2l-dep-row__av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--r2l-sable-1);
  color: var(--r2l-charbon);
  display: grid;
  place-items: center;
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-size: 12px;
  flex: none;
  border: 1px solid var(--r2l-sable-4);
  overflow: hidden;
}

.r2l-dep-row__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Départ sans accompagnateur assigné → pastille en pointillé, même gabarit */
.r2l-dep-row__av--vide {
  background: none;
  border-style: dashed;
  border-color: var(--r2l-sable-4);
}

.r2l-dep-row__acc-nom {
  font-size: 13px;
  color: var(--r2l-terre-corps);
}

.r2l-dep-row__acc-nom span {
  color: var(--r2l-terre-sec);
}

.r2l-dep-row__acc-nom--vide {
  color: var(--r2l-terre-sec);
}

/* ── Colonne 3 : état ── */

.r2l-dep-row__etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--r2l-terre-corps);
}

/* ── État « dernières places » ──────────────────────────────────────────────
   ⚠️ TEST EN COURS (arbitrage Aaron) — dérogation à la règle « Flamingo =
   CTA uniquement » (CLAUDE.md §11), alignée sur .r2l-card .r2l-chip--urgent
   (card-destination.css). Mêmes tokens → un seul point de bascule si l'on
   revient au registre charbon.
   ──────────────────────────────────────────────────────────────────────── */
.r2l-dep-row__etat--urgent {
  --r2l-urgent-picto: var(--r2l-flamingo);
  --r2l-urgent-texte: var(--r2l-flamingo);
  font-weight: 700;
  color: var(--r2l-urgent-texte);
}

/* Le triangle a un centre optique bas → léger remontage (idem card) */
.r2l-dep-row__warn {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--r2l-urgent-picto);
  transform: translateY(-.5px);
}

.r2l-dep-row__etat--vide {
  color: var(--r2l-terre-sec);
}

.r2l-dep-row__etat--complet {
  color: var(--r2l-terre-sec);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 700;
}

/* ── Colonne 4 : prix ── */

.r2l-dep-row__prix {
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-size: 19px;
  color: var(--r2l-charbon);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.r2l-dep-row__prix small {
  font-family: var(--r2l-font-corps);
  font-weight: 400;
  font-size: 12px;
  color: var(--r2l-terre-sec);
  margin-left: 2px;
}

/* ── Colonne 5 : CTA ── */

.r2l-dep-row__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}

.r2l-dep-row__cta .r2l-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--r2l-transition-md);
}

.r2l-dep-row__cta--muted {
  color: var(--r2l-terre-sec);
  font-weight: 600;
}

/* ── État vide ── */

.r2l-departs__vide {
  padding: 24px var(--r2l-departs-padx) 16px;
  color: var(--r2l-terre-corps);
  font-size: 16px;
}

.r2l-departs__vide a {
  color: var(--r2l-charbon);
  font-weight: 600;
  text-underline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════
   RAPPEL BAS DE PAGE
   ══════════════════════════════════════════════════════════════ */

.r2l-departs-rappel {
  padding-block: var(--r2l-rythme-bord);
}

.r2l-departs-rappel__inner {
  background: var(--r2l-charbon);
  color: var(--r2l-sable-1);
  border-radius: var(--r2l-radius-lg);
  padding: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.1fr auto;
  align-items: center;
  gap: 40px;
}

/* Eyebrow sur fond sombre */
.r2l-departs-rappel .r2l-eyebrow {
  color: rgba(247, 243, 238, .6);
}

.r2l-departs-rappel__title {
  font-family: var(--r2l-font-titres);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  margin: 14px 0 12px;
  letter-spacing: -.01em;
  color: var(--r2l-sable-1);
}

/* Accent éditorial sur fond sombre → #C2A98F (Terre clair, ~4.5:1 sur charbon) */
.r2l-departs-rappel__title em {
  font-style: italic;
  color: #C2A98F;
}

.r2l-departs-rappel__sub {
  font-size: 14px;
  color: rgba(247, 243, 238, .7);
  max-width: 440px;
}

.r2l-departs-rappel__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.r2l-departs-rappel__next-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247, 243, 238, .55);
  font-weight: 600;
}

.r2l-departs-rappel__next-label .r2l-icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: #C2A98F;
}

.r2l-departs-rappel__date {
  font-family: var(--r2l-font-titres);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.05;
  color: var(--r2l-sable-1);
  letter-spacing: -.015em;
  margin: 4px 0 10px;
}

.r2l-departs-rappel__apartir {
  font-size: 13px;
  color: rgba(247, 243, 238, .6);
  margin-bottom: 14px;
}

.r2l-departs-rappel__apartir b {
  font-family: var(--r2l-font-titres);
  font-size: 18px;
  font-weight: 600;
  color: var(--r2l-sable-1);
  margin-left: 4px;
}

/* Flamingo — seul CTA primaire de la fiche circuit dans ce périmètre */
.r2l-departs-rappel__cta {
  background: var(--r2l-flamingo);
  color: #fff;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: var(--r2l-font-corps);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: background var(--r2l-transition-sm), box-shadow var(--r2l-transition-sm);
}

.r2l-departs-rappel__cta:hover,
.r2l-departs-rappel__cta:focus-visible {
  background: #DD4E1B;
  color: #fff;           /* surcharge a:hover { color: flamingo } de main.css */
  box-shadow: 0 4px 16px rgba(245, 95, 42, .35);
  outline: none;
}

.r2l-departs-rappel__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.r2l-departs-rappel__all {
  font-size: 13px;
  color: rgba(247, 243, 238, .6);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  font-family: var(--r2l-font-corps);
  padding: 0;
  margin-top: 12px;
  display: inline-block;
  transition: color var(--r2l-transition-sm);
}

.r2l-departs-rappel__all:hover {
  color: var(--r2l-sable-1);
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 820px
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* Pas de colonnes en mobile → l'en-tête de colonnes n'a plus de sens */
  .r2l-dep-cols {
    display: none;
  }

  /* En-tête de colonnes masqué → chaque ligne porte son propre filet haut */
  .r2l-dep-row {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: flex-start;
    border-top: 1px solid var(--r2l-sable-3);
  }

  .r2l-dep-row__cta {
    justify-self: start;
  }

  .r2l-departs-rappel__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .r2l-departs-rappel__aside {
    align-items: flex-start;
    text-align: left;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .r2l-dep-row,
  .r2l-dep-row__cta,
  .r2l-dep-row__cta .r2l-icon,
  .r2l-departs-rappel__cta,
  .r2l-departs-rappel__all {
    transition: none;
  }
}