/* Définit les variables globales de couleurs, espacements et rayons de l'identité Viwu Tours. */
:root {
  /* Définit le vert principal de la marque. */
  --green: #087A35;
  /* Définit le vert très sombre utilisé pour les fonds premium. */
  --green-dark: #053D25;
  /* Définit l'orange accent utilisé pour les interactions et détails. */
  --orange: #E9A227;
  /* Définit le blanc principal de l'interface. */
  --white: #FFFFFF;
  /* Définit le blanc cassé utilisé pour les sections secondaires. */
  --cream: #F6F4EE;
  /* Définit le gris très clair des arrière-plans. */
  --soft: #ECEBE5;
  /* Définit le noir principal des textes. */
  --ink: #111512;
  /* Définit le gris des textes secondaires. */
  --muted: #68706A;
  /* Définit la police de titre (display), utilisée pour tous les h1/h2/h3 éditoriaux. */
  --font-display: "Clash Display", Georgia, serif;
  /* Définit la police de corps de texte, utilisée pour tout le reste. */
  --font-body: "Satoshi", -apple-system, "Segoe UI", sans-serif;
  /* Définit une courbe d'accélération commune, pour une sensation de mouvement homogène sur tout le site. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Définit une courbe avec un léger rebond, réservée aux micro-interactions (clic, sélection). */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Définit le rayon standard des cartes. */
  --radius: 22px;
  /* Définit le rayon plus large des grandes cartes. */
  --radius-xl: 34px;
  /* Définit une ombre discrète utilisée sur les composants flottants. */
  --shadow: 0 20px 60px rgba(0, 0, 0, .10);
  /* Définit la largeur maximale commune à toutes les sections. */
  --max-width: 1240px;
}

/* Applique box-sizing à tous les éléments pour rendre les dimensions prévisibles. */
* {
  /* Inclut padding et border dans les dimensions déclarées. */
  box-sizing: border-box;
}

/* Active le défilement doux lors des ancres internes. */
html {
  /* Rend les transitions entre sections plus agréables. */
  scroll-behavior: smooth;
}

/* Définit les propriétés générales du body. */
body {
  /* Supprime la marge automatique du navigateur. */
  margin: 0;
  /* Définit la police principale de l'interface. */
  font-family: var(--font-body);
  /* Définit la couleur principale des textes. */
  color: var(--ink);
  /* Définit la couleur de fond globale. */
  background: var(--white);
  /* Améliore le rendu typographique sur certains navigateurs. */
  -webkit-font-smoothing: antialiased;
}

/* Empêche les images de dépasser de leur conteneur. */
img {
  /* Rend les images adaptatives. */
  max-width: 100%;
  /* Supprime l'espace inline sous les images. */
  display: block;
}

/* Supprime le soulignement par défaut des liens. */
a {
  /* Hérite de la couleur du contexte. */
  color: inherit;
  /* Supprime le soulignement. */
  text-decoration: none;
}

/* Rend les boutons cohérents avec les champs et liens. */
button,
input {
  /* Utilise la même police que le reste du site. */
  font: inherit;
}

/* Centre les contenus dans une largeur maximale. */
.container {
  /* Définit la largeur disponible en tenant compte des marges. */
  width: min(calc(100% - 48px), var(--max-width));
  /* Centre horizontalement le conteneur. */
  margin-inline: auto;
}

/* Définit le lien d'accessibilité visible uniquement au focus. */
.skip-link {
  /* Positionne le lien hors écran au repos. */
  position: fixed;
  /* Place le lien au-dessus de tous les éléments. */
  z-index: 9999;
  /* Déplace le lien hors de la zone visible. */
  left: -999px;
  /* Ajoute une marge intérieure. */
  padding: 12px 18px;
  /* Donne un fond contrasté. */
  background: var(--ink);
  /* Rend le texte blanc. */
  color: var(--white);
}

/* Replace le lien d'accessibilité à l'écran lorsqu'il reçoit le focus. */
.skip-link:focus {
  /* Replace le lien à gauche de la fenêtre. */
  left: 16px;
  /* Place le lien en haut de la fenêtre. */
  top: 16px;
}

/* Style commun des petites étiquettes de section : un chapeau éditorial en italique, pas une étiquette trackée en majuscules. */
.eyebrow {
  /* Supprime la marge haute par défaut. */
  margin: 0 0 14px;
  /* Utilise la police serif pour un ton éditorial plutôt qu'un badge technique. */
  font-family: var(--font-display);
  /* Penche le texte pour le distinguer du titre qui suit. */
  font-style: italic;
  /* Définit une taille lisible mais discrète. */
  font-size: 18px;
  /* Garde un poids léger propre au serif. */
  font-weight: 400;
  /* Utilise le vert de marque. */
  color: var(--green);
}

/* Version claire de l'étiquette destinée aux fonds sombres. */
.eyebrow.light {
  /* Rend l'étiquette blanche et légèrement translucide. */
  color: rgba(255,255,255,.82);
}

/* Définit le style des boutons génériques. */
.button {
  /* Permet d'aligner texte et flèche. */
  display: inline-flex;
  /* Centre verticalement les éléments. */
  align-items: center;
  /* Crée un espace entre texte et icône. */
  gap: 12px;
  /* Définit l'espacement interne horizontal et vertical. */
  padding: 15px 22px;
  /* Arrondit trois coins, laisse le quatrième net : une signature du site plutôt qu'une pilule générique. */
  border-radius: 4px 18px 18px 18px;
  /* Accentue la graisse. */
  font-weight: 800;
  /* Empêche le texte du bouton de passer à la ligne. */
  white-space: nowrap;
  /* Rend les changements de couleur animés. */
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), border-radius .25s var(--ease);
}

/* Adoucit le coin net et soulève légèrement le bouton au survol. */
.button:hover {
  /* Arrondit temporairement le quatrième coin. */
  border-radius: 18px;
  /* Crée une petite sensation de profondeur. */
  transform: translateY(-2px);
}

/* Donne un retour tactile discret au moment du clic. */
.button:active {
  /* Simule un léger enfoncement du bouton. */
  transform: translateY(0) scale(.97);
}

/* Style du bouton vert principal. */
.button-primary {
  /* Applique le vert de marque. */
  background: var(--green);
  /* Rend le texte blanc. */
  color: var(--white);
  /* Supprime toute bordure. */
  border: 1px solid var(--green);
  /* Sert de cadre au balayage lumineux du survol. */
  position: relative;
  /* Découpe le balayage aux bords arrondis du bouton. */
  overflow: hidden;
  /* Place le texte au-dessus du balayage. */
  isolation: isolate;
}

/* Assombrit le bouton vert au survol. */
.button-primary:hover {
  /* Utilise le vert sombre. */
  background: var(--green-dark);
  /* Harmonise la bordure. */
  border-color: var(--green-dark);
}

/* Dessine le trait de lumière diagonal qui balaie le bouton au survol. */
.button-primary::after {
  /* Crée l'élément décoratif. */
  content: "";
  /* Le place derrière le texte mais au-dessus du fond. */
  position: absolute;
  inset: 0;
  /* Positionne le trait hors du bouton au repos. */
  transform: translateX(-140%) skewX(-18deg);
  /* Dessine un trait de lumière fin et diffus. */
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  /* Anime le déplacement du trait. */
  transition: transform .7s var(--ease);
}

/* Fait glisser le trait de lumière à travers le bouton au survol. */
.button-primary:hover::after {
  transform: translateX(140%) skewX(-18deg);
}

/* Version compacte du bouton principal. */
.button-small {
  /* Réduit les espacements. */
  padding: 11px 16px;
  /* Réduit légèrement la taille du texte. */
  font-size: 13px;
}

/* Bouton blanc utilisé sur les images sombres. */
.button-light {
  /* Met le fond en blanc. */
  background: var(--white);
  /* Utilise le vert pour le texte. */
  color: var(--green-dark);
  /* Ajoute une bordure subtile. */
  border: 1px solid var(--white);
}

/* Rend le bouton blanc légèrement translucide au survol. */
.button-light:hover {
  /* Diminue légèrement la luminosité. */
  background: #f1f1ef;
}

/* Bouton transparent utilisé sur le hero. */
.button-ghost-light {
  /* Rend le fond transparent. */
  background: transparent;
  /* Rend le texte blanc. */
  color: var(--white);
  /* Ajoute une bordure blanche translucide. */
  border: 1px solid rgba(255,255,255,.55);
}

/* Accentue le bouton transparent au survol. */
.button-ghost-light:hover {
  /* Ajoute un fond blanc translucide. */
  background: rgba(255,255,255,.10);
}

/* Bouton sombre utilisé sur fond clair. */
.button-dark {
  /* Rend le fond sombre. */
  background: var(--ink);
  /* Rend le texte blanc. */
  color: var(--white);
  /* Ajoute une bordure sombre. */
  border: 1px solid var(--ink);
}

/* Bouton contour utilisé dans le configurateur. */
.button-outline-dark {
  /* Rend le fond transparent. */
  background: transparent;
  /* Rend le texte sombre. */
  color: var(--ink);
  /* Ajoute une bordure grise. */
  border: 1px solid #CDD1CC;
}

/* Style commun des sections verticales. */
.section {
  /* Ajoute de grands espaces verticaux. */
  padding: 110px 0;
}

/* Définit le header principal. */
.site-header {
  /* Le header reste visible pendant le défilement. */
  position: fixed;
  /* Le place en haut de la fenêtre. */
  top: 0;
  /* Le fait occuper toute la largeur. */
  left: 0;
  right: 0;
  /* Le place au-dessus du contenu. */
  z-index: 1000;
  /* Anime son changement d'état. */
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}

/* État du header après le défilement. */
.site-header.is-scrolled {
  /* Ajoute un fond blanc légèrement transparent. */
  background: rgba(255,255,255,.94);
  /* Ajoute un flou moderne derrière le header. */
  backdrop-filter: blur(18px);
  /* Ajoute une ombre très légère. */
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Organise horizontalement le contenu du header. */
.header-inner {
  /* Active Flexbox. */
  display: flex;
  /* Centre verticalement les éléments. */
  align-items: center;
  /* Écarte logo, navigation et actions. */
  justify-content: space-between;
  /* Donne une hauteur confortable au header. */
  min-height: 82px;
}

/* Définit la signature typographique du logo. */
.brand {
  /* Aligne les deux mots du logo verticalement. */
  display: flex;
  /* Oriente les éléments en colonne. */
  flex-direction: column;
  /* Réduit l'espace entre les deux lignes. */
  gap: 0;
  /* Définit la couleur par défaut du logo. */
  color: var(--white);
}

/* Change la couleur du logo lorsque le header devient clair. */
.site-header.is-scrolled .brand {
  /* Utilise le vert sombre. */
  color: var(--green-dark);
}

/* Définit le mot principal du logo. */
.brand-name {
  /* Utilise une graisse forte. */
  font-weight: 800;
  /* Augmente légèrement l'espacement. */
  letter-spacing: .08em;
  /* Définit une taille visible. */
  font-size: 20px;
  /* Réduit la hauteur de ligne. */
  line-height: .9;
}

/* Définit le sous-titre du logo. */
.brand-sub {
  /* Utilise une taille plus petite. */
  font-size: 8px;
  /* Augmente fortement l'espacement. */
  letter-spacing: .42em;
  /* Ajoute une petite marge à gauche. */
  padding-left: 2px;
}

/* Organise les liens de navigation. */
.main-nav {
  /* Active Flexbox. */
  display: flex;
  /* Crée un espace régulier entre les liens. */
  gap: 30px;
}

/* Définit les liens de navigation. */
.main-nav a {
  /* Utilise une taille compacte. */
  font-size: 13px;
  /* Accentue légèrement le poids. */
  font-weight: 700;
  /* Rend les transitions fluides. */
  transition: color .2s var(--ease);
}

/* Rend les liens du header blancs avant le scroll. */
.site-header:not(.is-scrolled) .main-nav a {
  /* Applique le blanc. */
  color: rgba(255,255,255,.88);
}

/* Change les liens au survol. */
.main-nav a:hover {
  /* Utilise l'orange accent. */
  color: var(--orange) !important;
}

/* Organise les actions du header. */
.header-actions {
  /* Active Flexbox. */
  display: flex;
  /* Centre les actions. */
  align-items: center;
  /* Ajoute un espace entre les actions. */
  gap: 10px;
}

/* Définit le menu hamburger. */
.menu-toggle {
  /* Cache le bouton sur ordinateur. */
  display: none;
  /* Supprime le fond. */
  background: transparent;
  /* Supprime la bordure. */
  border: 0;
  /* Définit une taille carrée. */
  width: 44px;
  height: 44px;
  /* Place les barres en colonne. */
  flex-direction: column;
  /* Centre les barres. */
  align-items: center;
  justify-content: center;
  /* Crée un espace entre les barres. */
  gap: 5px;
  /* Change le curseur. */
  cursor: pointer;
}

/* Définit chacune des trois barres du hamburger. */
.menu-toggle span {
  /* Définit la largeur de la barre. */
  width: 22px;
  /* Définit la hauteur de la barre. */
  height: 2px;
  /* Rend les extrémités arrondies. */
  border-radius: 10px;
  /* Utilise le vert sombre par défaut. */
  background: var(--green-dark);
  /* Anime la transformation. */
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

/* Définit le hero plein écran. */
.hero {
  /* Sert de référence aux éléments positionnés à l'intérieur. */
  position: relative;
  /* Garantit une grande hauteur visuelle. */
  min-height: 760px;
  /* Centre les éléments. */
  display: flex;
  align-items: center;
  /* Cache ce qui dépasse. */
  overflow: hidden;
  /* Utilise un fond de secours si l'image ne charge pas. */
  background: var(--green-dark);
}

/* Définit l'image de fond du hero. */
.hero-media {
  /* Place l'image derrière tout le contenu. */
  position: absolute;
  inset: 0;
  /* Remplit toute la zone sans déformation. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centre le cadrage de l'image. */
  object-position: center;
  /* Ouvre la page sur un léger dézoom de l'image, un seul geste d'entrée. */
  animation: heroMediaIn 1.6s var(--ease) both;
}

/* Définit le point de départ légèrement zoomé de l'image du hero. */
@keyframes heroMediaIn {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Ajoute un dégradé sombre au-dessus de l'image. */
.hero-overlay {
  /* Positionne l'overlay sur toute la surface. */
  position: absolute;
  inset: 0;
  /* Crée une profondeur avec un dégradé. */
  background: linear-gradient(90deg, rgba(0,20,12,.78) 0%, rgba(0,20,12,.42) 55%, rgba(0,20,12,.20) 100%);
}

/* Positionne le contenu du hero au-dessus des couches d'image. */
.hero-content {
  /* Rend le contenu relatif pour gérer son z-index. */
  position: relative;
  /* Place le contenu au-dessus de l'overlay. */
  z-index: 2;
  /* Limite la largeur du bloc textuel. */
  max-width: 900px;
  /* Ajoute un espace supérieur pour le header. */
  padding-top: 70px;
}

/* Fait apparaître chaque ligne du hero l'une après l'autre à l'ouverture de la page. */
.hero-content > * {
  /* Applique l'animation d'entrée, sans répétition ni déclenchement au scroll. */
  animation: heroContentIn .9s var(--ease) both;
}

/* Définit le mouvement de fondu-montée commun à chaque ligne. */
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Décale l'apparition du titre. */
.hero-content > *:nth-child(2) { animation-delay: .1s; }
/* Décale l'apparition du texte descriptif. */
.hero-content > *:nth-child(3) { animation-delay: .2s; }
/* Décale l'apparition des boutons. */
.hero-content > *:nth-child(4) { animation-delay: .3s; }

/* Définit le grand titre du hero. */
.hero h1 {
  /* Supprime la marge haute. */
  margin: 0;
  /* Utilise une taille très visible. */
  font-size: clamp(56px, 7vw, 100px);
  /* Réduit la hauteur de ligne pour un impact éditorial. */
  line-height: .92;
  /* Réduit légèrement l'épaisseur. */
  font-weight: 500;
  /* Resserre légèrement l'approche, adapté à une sans-serif bold en très grande taille. */
  letter-spacing: -.02em;
  /* Rend le titre blanc. */
  color: var(--white);
  /* Limite la largeur pour conserver une belle composition. */
  max-width: 900px;
  /* Utilise la police serif de caractère. */
  font-family: var(--font-display);
}

/* Met en évidence le mot italique du hero. */
.hero h1 em {
  /* Utilise l'orange comme accent. */
  color: var(--orange);
  /* Garde le style italique. */
  font-style: italic;
}

/* Définit le texte descriptif du hero. */
.hero-text {
  /* Ajoute un espace supérieur. */
  margin: 28px 0 0;
  /* Limite la largeur. */
  max-width: 610px;
  /* Augmente légèrement la taille. */
  font-size: 18px;
  /* Améliore la lisibilité. */
  line-height: 1.7;
  /* Utilise un blanc légèrement translucide. */
  color: rgba(255,255,255,.84);
}

/* Organise les CTA du hero. */
.hero-actions {
  /* Active Flexbox. */
  display: flex;
  /* Ajoute un espace entre les boutons. */
  gap: 12px;
  /* Ajoute un espace au-dessus du texte. */
  margin-top: 34px;
  /* Permet aux boutons de passer à la ligne sur petits écrans. */
  flex-wrap: wrap;
}

/* Positionne l'indicateur de scroll. */
.scroll-hint {
  /* Place l'indicateur en bas du hero. */
  position: absolute;
  /* Centre horizontalement. */
  left: 50%;
  /* Place l'indicateur près du bas. */
  bottom: 24px;
  /* Centre précisément l'élément. */
  transform: translateX(-50%);
  /* Utilise le blanc. */
  color: rgba(255,255,255,.8);
  /* Anime légèrement l'indicateur. */
  animation: floatDown 1.8s infinite ease-in-out;
}

/* Définit l'animation de l'indicateur de scroll. */
@keyframes floatDown {
  /* État initial. */
  0%, 100% { transform: translate(-50%, 0); }
  /* État intermédiaire. */
  50% { transform: translate(-50%, 7px); }
}

/* Définit la section de confiance. */
.trust {
  /* Utilise le fond blanc. */
  background: var(--white);
  /* Réduit légèrement l'espace vertical. */
  padding: 54px 0;
}

/* Organise les indicateurs en quatre colonnes. */
.trust-grid {
  /* Active la grille CSS. */
  display: grid;
  /* Crée quatre colonnes égales. */
  grid-template-columns: repeat(4, 1fr);
}

/* Définit chaque élément de confiance. */
.trust-item {
  /* Centre le contenu. */
  text-align: center;
  /* Ajoute une bordure à droite sauf au dernier élément. */
  border-right: 1px solid var(--soft);
}

/* Supprime la bordure du dernier élément. */
.trust-item:last-child {
  /* Évite une bordure inutile. */
  border-right: 0;
}

/* Définit les grandes valeurs de confiance. */
.trust-item strong {
  /* Affiche la valeur en bloc. */
  display: block;
  /* Utilise une taille forte. */
  font-size: 34px;
  /* Accentue le poids. */
  font-weight: 800;
  /* Utilise le vert. */
  color: var(--green-dark);
}

/* Définit les petits suffixes des valeurs. */
.trust-item strong span {
  /* Réduit la taille du suffixe. */
  font-size: 18px;
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit les descriptions des indicateurs. */
.trust-item p {
  /* Supprime les marges inutiles. */
  margin: 6px 0 0;
  /* Réduit la taille. */
  font-size: 12px;
  /* Utilise une couleur secondaire. */
  color: var(--muted);
}

/* Définit la section sombre du configurateur. */
.section-dark {
  /* Utilise le vert très sombre. */
  background: var(--green-dark);
  /* Rend le texte clair. */
  color: var(--white);
}

/* Définit une section entièrement noire, pour varier avec le vert sombre utilisé ailleurs sur le site. */
.section-ink {
  /* Utilise le noir de marque plutôt que le vert sombre. */
  background: var(--ink);
  /* Rend le texte clair. */
  color: var(--white);
}

/* Définit une section vert vif plein, pour une rupture franche entre deux sections plus sombres. */
.section-green {
  /* Utilise le vert de marque, plus vif que le vert sombre des autres sections foncées. */
  background: var(--green);
  /* Rend le texte clair. */
  color: var(--white);
}

/* Arrondit les deux coins bas de la section sur mesure, qui semble se poser sur la section blanche du dessous. */
.custom-trip {
  border-radius: 0 0 40px 40px;
}

/* Organise la section sur mesure en deux colonnes. */
.custom-grid {
  /* Active la grille. */
  display: grid;
  /* Crée deux colonnes équilibrées. */
  grid-template-columns: .85fr 1.15fr;
  /* Ajoute un grand espace entre les colonnes. */
  gap: 80px;
  /* Centre verticalement les deux blocs. */
  align-items: center;
}

/* Définit le titre du bloc sur mesure. */
.custom-copy h2 {
  /* Supprime la marge haute. */
  margin: 0;
  /* Utilise une grande taille. */
  font-size: clamp(48px, 5vw, 72px);
  /* Réduit la hauteur de ligne. */
  line-height: .95;
  /* Utilise la police serif. */
  font-family: var(--font-display);
  /* Définit le poids. */
  font-weight: 400;
  /* Resserre légèrement l'approche, adapté à une sans-serif bold. */
  letter-spacing: -.015em;
}

/* Colore l'italique du titre sur mesure. */
.custom-copy h2 em {
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit le paragraphe du bloc sur mesure. */
.custom-copy > p {
  /* Limite la largeur. */
  max-width: 520px;
  /* Ajoute de l'espace vertical. */
  margin: 28px 0;
  /* Définit la hauteur de ligne. */
  line-height: 1.75;
  /* Rend le texte translucide. */
  color: rgba(255,255,255,.70);
}

/* Définit la liste de bénéfices. */
.check-list {
  /* Supprime les puces. */
  list-style: none;
  /* Supprime les marges. */
  padding: 0;
  margin: 0;
  /* Organise les éléments verticalement. */
  display: grid;
  /* Crée un espace régulier. */
  gap: 12px;
}

/* Organise chaque bénéfice. */
.check-list li {
  /* Aligne icône et texte. */
  display: flex;
  align-items: center;
  /* Ajoute un espace. */
  gap: 10px;
  /* Réduit la taille du texte. */
  font-size: 13px;
}

/* Définit la couleur de la coche. */
.check-list li span {
  /* Utilise l'orange. */
  color: var(--orange);
  /* Accentue le poids. */
  font-weight: 800;
}

/* Définit la carte du configurateur. */
.trip-builder {
  /* Utilise un fond clair. */
  background: var(--cream);
  /* Utilise le texte sombre. */
  color: var(--ink);
  /* Arrondit fortement la carte. */
  border-radius: var(--radius-xl);
  /* Ajoute beaucoup d'espace intérieur. */
  padding: 36px;
  /* Ajoute une ombre. */
  box-shadow: var(--shadow);
}

/* Organise l'indicateur de progression. */
.builder-progress {
  /* Active Flexbox. */
  display: flex;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace. */
  gap: 18px;
  /* Ajoute une marge sous la progression. */
  margin-bottom: 34px;
}

/* Définit le texte de progression. */
#builderStepLabel {
  /* Accentue le texte. */
  font-weight: 800;
  /* Réduit la taille. */
  font-size: 12px;
  /* Utilise le vert. */
  color: var(--green);
}

/* Définit la piste de progression. */
.progress-bar {
  /* Permet au remplissage de prendre la place restante. */
  flex: 1;
  /* Définit la hauteur. */
  height: 5px;
  /* Arrondit la piste. */
  border-radius: 999px;
  /* Utilise un fond gris clair. */
  background: #DCDDD7;
  /* Cache le débordement du remplissage. */
  overflow: hidden;
}

/* Définit le remplissage de la progression. */
.progress-bar span {
  /* Affiche le remplissage en bloc. */
  display: block;
  /* Définit la hauteur complète. */
  height: 100%;
  /* Commence à 25 %. */
  width: 25%;
  /* Utilise le vert. */
  background: var(--green);
  /* Anime la progression. */
  transition: width .3s var(--ease);
}

/* Cache les étapes inactives du configurateur. */
.builder-step {
  /* Supprime la bordure native des fieldsets. */
  border: 0;
  /* Supprime le padding natif. */
  padding: 0;
  /* Supprime les marges. */
  margin: 0;
  /* Cache les étapes inactives. */
  display: none;
}

/* Affiche l'étape active. */
.builder-step.is-active {
  /* Affiche le contenu de l'étape. */
  display: block;
}

/* Définit le titre des étapes. */
.builder-step legend {
  /* Permet au legend de prendre sa place normalement. */
  display: block;
  /* Ajoute un espace sous le titre. */
  margin-bottom: 24px;
  /* Utilise la police serif. */
  font-family: var(--font-display);
  /* Définit une taille importante. */
  font-size: 34px;
  /* Réduit le poids. */
  font-weight: 400;
  /* Définit la hauteur de ligne. */
  line-height: 1.05;
}

/* Organise les choix en grille. */
.choice-grid {
  /* Active la grille. */
  display: grid;
  /* Crée deux colonnes. */
  grid-template-columns: repeat(2, 1fr);
  /* Ajoute un petit espace. */
  gap: 10px;
}

/* Définit chaque choix du configurateur. */
.choice {
  /* Organise emoji et texte horizontalement. */
  display: flex;
  align-items: center;
  /* Ajoute un espace. */
  gap: 10px;
  /* Aligne le contenu à gauche. */
  text-align: left;
  /* Ajoute un espace intérieur. */
  padding: 16px;
  /* Utilise le blanc. */
  background: var(--white);
  /* Ajoute une bordure discrète. */
  border: 1px solid #E0E1DC;
  /* Arrondit les choix. */
  border-radius: 15px;
  /* Change le curseur. */
  cursor: pointer;
  /* Anime l'interaction. */
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

/* État au survol des choix. */
.choice:hover {
  /* Soulève légèrement le choix. */
  transform: translateY(-2px);
  /* Met la bordure en vert. */
  border-color: var(--green);
}

/* État sélectionné par JavaScript, avec un léger rebond au moment du choix. */
.choice.is-selected {
  /* Utilise un vert très pâle. */
  background: #E7F3EB;
  /* Utilise une bordure verte. */
  border-color: var(--green);
  /* Accentue le poids du texte. */
  font-weight: 800;
  /* Grossit très légèrement puis se stabilise, pour un retour tactile net. */
  transform: scale(1.03);
  /* Utilise la courbe à rebond pour ce mouvement bref. */
  transition: transform .35s var(--ease-spring), border-color .2s var(--ease), background .2s var(--ease);
}

/* Permet au choix large de prendre deux colonnes. */
.choice-wide {
  /* Étend l'élément sur toute la ligne. */
  grid-column: 1 / -1;
}

/* Définit les champs du configurateur. */
.field {
  /* Organise le label et le champ verticalement. */
  display: grid;
  /* Ajoute un petit espace. */
  gap: 8px;
  /* Ajoute une marge sous chaque champ. */
  margin-bottom: 14px;
}

/* Définit le texte des labels. */
.field > span {
  /* Accentue le label. */
  font-weight: 800;
  /* Réduit sa taille. */
  font-size: 12px;
}

/* Définit les champs de saisie, du configurateur comme des formulaires des pages intérieures. */
.field input,
.field textarea,
.field select {
  /* Rend le champ pleine largeur. */
  width: 100%;
  /* Ajoute de l'espace intérieur. */
  padding: 15px 16px;
  /* Ajoute une bordure discrète. */
  border: 1px solid #D8DAD4;
  /* Arrondit le champ. */
  border-radius: 13px;
  /* Supprime l'outline par défaut. */
  outline: none;
  /* Utilise le blanc. */
  background: var(--white);
}

/* Donne une hauteur confortable aux zones de texte multi-lignes. */
.field textarea {
  /* Définit une hauteur minimale lisible. */
  min-height: 130px;
  /* Autorise le redimensionnement vertical uniquement. */
  resize: vertical;
}

/* Change la bordure des champs actifs. */
.field input:focus {
  /* Met la bordure en vert. */
  border-color: var(--green);
  /* Ajoute un halo d'accessibilité. */
  box-shadow: 0 0 0 3px rgba(8,122,53,.10);
}

/* Style des mentions facultatives. */
.field small {
  /* Utilise le gris. */
  color: var(--muted);
  /* Réduit la graisse. */
  font-weight: 500;
}

/* Organise les boutons du configurateur. */
.builder-actions {
  /* Active Flexbox. */
  display: flex;
  /* Place les boutons de chaque côté. */
  justify-content: space-between;
  /* Ajoute un espace supérieur. */
  margin-top: 26px;
}

/* Cache le bouton précédent lors de la première étape. */
#builderPrev.is-hidden {
  /* Rend le bouton invisible. */
  visibility: hidden;
}

/* Définit l'en-tête de section avec titre et lien. */
.section-heading {
  /* Active une grille. */
  display: grid;
  /* Organise titre et CTA. */
  grid-template-columns: 1fr auto;
  /* Aligne le contenu en bas. */
  align-items: end;
  /* Ajoute un espace entre les colonnes. */
  gap: 30px;
  /* Ajoute une marge sous l'en-tête. */
  margin-bottom: 44px;
}

/* Place l'eyebrow au-dessus du titre. */
.section-heading .eyebrow {
  /* Étend l'eyebrow sur toute la grille. */
  grid-column: 1 / -1;
  /* Laisse un espace mesuré avant le titre. */
  margin-bottom: 2px;
}

/* Définit les grands titres de section. */
.section-heading h2,
.center-heading h2,
.about h2 {
  /* Supprime les marges. */
  margin: 0;
  /* Utilise une police serif. */
  font-family: var(--font-display);
  /* Réduit le poids. */
  font-weight: 400;
  /* Définit une taille responsive. */
  font-size: clamp(44px, 5vw, 68px);
  /* Réduit la hauteur de ligne. */
  line-height: .98;
  /* Resserre légèrement l'approche, adapté à une sans-serif bold. */
  letter-spacing: -.015em;
}

/* Colore les textes italiques des titres. */
.section-heading h2 em,
.about h2 em {
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit les liens textuels secondaires. */
.text-link {
  /* Accentue le poids. */
  font-weight: 800;
  /* Utilise le vert. */
  color: var(--green);
  /* Ajoute un espace. */
  display: inline-flex;
  gap: 10px;
  /* Anime le déplacement. */
  transition: gap .2s var(--ease);
}

/* Écarte légèrement la flèche au survol. */
.text-link:hover {
  /* Augmente l'espace entre le texte et la flèche. */
  gap: 14px;
}

/* Organise les cartes de circuits. */
.tour-grid {
  /* Active une grille. */
  display: grid;
  /* Crée deux colonnes. */
  grid-template-columns: repeat(2, 1fr);
  /* Ajoute un espace. */
  gap: 18px;
}

/* Définit les cartes de circuits. */
.tour-card {
  /* Positionne les éléments internes. */
  position: relative;
  /* Définit une hauteur minimale. */
  min-height: 500px;
  /* Cache le débordement des images. */
  overflow: hidden;
  /* Arrondit les cartes. */
  border-radius: var(--radius);
  /* Utilise un fond sombre de secours. */
  background: var(--green-dark);
}

/* Permet à la première carte de prendre deux lignes. */
.tour-card-large {
  /* Étend la carte sur deux lignes. */
  grid-row: span 2;
  /* Augmente sa hauteur. */
  min-height: 1018px;
}

/* Définit les images des cartes. */
.tour-card img {
  /* Étend l'image sur toute la carte. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Recadre l'image. */
  object-fit: cover;
  /* Anime le zoom. */
  transition: transform .8s var(--ease);
}

/* Agrandit l'image lors du survol. */
.tour-card:hover img {
  /* Crée un zoom subtil. */
  transform: scale(1.05);
}

/* Ajoute un dégradé sous le contenu des cartes. */
.tour-card::after {
  /* Crée un élément décoratif. */
  content: "";
  /* Positionne le dégradé. */
  position: absolute;
  inset: 0;
  /* Crée un dégradé sombre depuis le bas. */
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.78) 100%);
}

/* Place le contenu des cartes au-dessus de l'image. */
.tour-card-content {
  /* Positionne le contenu. */
  position: absolute;
  /* Le place près des bords. */
  inset: auto 28px 28px;
  /* Le place au-dessus du dégradé. */
  z-index: 2;
  /* Rend le texte blanc. */
  color: var(--white);
}

/* Définit les catégories de circuits. */
.tour-category {
  /* Utilise une petite taille. */
  font-size: 12px;
  /* Accentue la graisse. */
  font-weight: 800;
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit les titres des cartes. */
.tour-card h3 {
  /* Ajoute une petite marge. */
  margin: 10px 0 12px;
  /* Utilise une police serif. */
  font-family: var(--font-display);
  /* Définit la taille. */
  font-size: 36px;
  /* Réduit le poids. */
  font-weight: 400;
  /* Réduit la hauteur. */
  line-height: 1;
}

/* Organise les métadonnées. */
.tour-meta {
  /* Active Flexbox. */
  display: flex;
  /* Permet le retour à la ligne. */
  flex-wrap: wrap;
  /* Ajoute un espace. */
  gap: 8px 16px;
  /* Réduit la taille. */
  font-size: 11px;
  /* Accentue légèrement le texte à côté des icônes. */
  font-weight: 700;
  /* Rend le texte translucide. */
  color: rgba(255,255,255,.9);
}

/* Aligne chaque icône avec le texte qui l'accompagne. */
.tour-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Dimensionne les icônes des métadonnées de circuit. */
.tour-meta svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--orange);
}

/* Définit le lien des cartes. */
.tour-card-content > a {
  /* Affiche le lien en ligne-flex. */
  display: inline-flex;
  /* Ajoute un espace. */
  gap: 10px;
  /* Ajoute une marge supérieure. */
  margin-top: 20px;
  /* Accentue le poids. */
  font-size: 13px;
  font-weight: 800;
}

/* Organise la section manifeste. */
.manifesto {
  /* Active une grille. */
  display: grid;
  /* Crée deux colonnes égales. */
  grid-template-columns: 1fr 1fr;
  /* Utilise le fond crème. */
  background: var(--cream);
}

/* Définit l'image du manifeste. */
.manifesto-image {
  /* Définit une hauteur minimale. */
  min-height: 700px;
  /* Cache les débordements. */
  overflow: hidden;
}

/* Définit l'image elle-même. */
.manifesto-image img {
  /* Remplit la zone. */
  width: 100%;
  height: 100%;
  /* Recadre l'image. */
  object-fit: cover;
}

/* Définit la colonne textuelle du manifeste. */
.manifesto-copy {
  /* Centre verticalement le texte. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ajoute de grands espaces intérieurs. */
  padding: 80px clamp(30px, 7vw, 110px);
}

/* Définit le titre du manifeste. */
.manifesto-copy h2 {
  /* Utilise la police serif. */
  font-family: var(--font-display);
  /* Définit une taille responsive. */
  font-size: clamp(50px, 5vw, 78px);
  /* Réduit la hauteur de ligne. */
  line-height: .95;
  /* Réduit le poids. */
  font-weight: 400;
  /* Supprime la marge supérieure. */
  margin: 0;
  /* Resserre légèrement l'approche, adapté à une sans-serif bold. */
  letter-spacing: -.015em;
}

/* Colore l'italique du manifeste. */
.manifesto-copy h2 em {
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit le paragraphe du manifeste. */
.manifesto-copy > p:not(.eyebrow) {
  /* Limite la largeur. */
  max-width: 520px;
  /* Ajoute une marge verticale. */
  margin: 30px 0;
  /* Définit la hauteur de ligne. */
  line-height: 1.8;
  /* Utilise le gris. */
  color: var(--muted);
}

/* Organise les trois principes. */
.manifesto-points {
  /* Active une grille. */
  display: grid;
  /* Ajoute une séparation horizontale. */
  border-top: 1px solid #D8D6CD;
}

/* Définit chaque principe. */
.manifesto-points div {
  /* Ajoute des espaces verticaux. */
  padding: 17px 0;
  /* Sépare les lignes. */
  border-bottom: 1px solid #D8D6CD;
  /* Organise texte et sous-texte. */
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Définit le mot principal du principe. */
.manifesto-points strong {
  /* Utilise une graisse forte. */
  font-weight: 800;
}

/* Définit la description du principe. */
.manifesto-points span {
  /* Utilise le gris. */
  color: var(--muted);
  /* Réduit la taille. */
  font-size: 12px;
}

/* Centre les en-têtes de certaines sections. */
.center-heading {
  /* Centre le texte. */
  text-align: center;
  /* Ajoute une marge sous le bloc. */
  margin-bottom: 44px;
}

/* Centre l'eyebrow. */
.center-heading .eyebrow {
  /* Centre explicitement le texte. */
  text-align: center;
}

/* Organise les engagements. */
.commitment-grid {
  /* Active une grille. */
  display: grid;
  /* Crée trois colonnes. */
  grid-template-columns: repeat(3, 1fr);
  /* Ajoute un espace. */
  gap: 18px;
}

/* Définit les cartes d'engagement. Trois principes autonomes, pas une séquence, donc pas de numérotation.
   Chaque carte porte une couleur assumée plutôt qu'un pâle fond neutre, avec le même coin net que les boutons. */
.commitment-card {
  /* Arrondit trois coins, coin net en haut à gauche comme sur les boutons. */
  border-radius: 6px 30px 30px 30px;
  /* Ajoute de l'espace intérieur. */
  padding: 38px;
  /* Définit une hauteur minimale. */
  min-height: 300px;
  /* Prépare une légère mise en avant au survol. */
  transition: transform .3s var(--ease);
}

/* Soulève légèrement la carte au survol, pour un site qui répond au geste. */
.commitment-card:hover {
  transform: translateY(-6px);
}

/* Première carte, vert de marque plein, texte blanc. */
.commitment-card:nth-child(1) {
  background: var(--green);
  color: rgba(255,255,255,.88);
}

/* Deuxième carte, orange plein, texte sombre pour un bon contraste sur une couleur claire. */
.commitment-card:nth-child(2) {
  background: var(--orange);
  color: rgba(17,21,18,.78);
}

/* Troisième carte, noir plein, texte blanc. */
.commitment-card:nth-child(3) {
  background: var(--ink);
  color: rgba(255,255,255,.82);
}

/* Définit la pastille qui porte l'icône, un cercle translucide posé sur la couleur pleine de la carte. */
.commitment-card .icon {
  /* Affiche la pastille en bloc pour contrôler sa taille. */
  display: flex;
  /* Centre l'icône dans la pastille. */
  align-items: center;
  justify-content: center;
  /* Définit une taille carrée. */
  width: 56px;
  height: 56px;
  /* Arrondit complètement la pastille. */
  border-radius: 50%;
  /* Ajoute une marge basse. */
  margin-bottom: 28px;
}

/* Pastille blanche translucide sur les cartes vert et noir. */
.commitment-card:nth-child(1) .icon,
.commitment-card:nth-child(3) .icon {
  background: rgba(255,255,255,.16);
  color: var(--white);
}

/* Pastille sombre translucide sur la carte orange, plus claire. */
.commitment-card:nth-child(2) .icon {
  background: rgba(17,21,18,.12);
  color: var(--ink);
}

/* Définit les titres des engagements, toujours blancs quelle que soit la carte pour porter le regard. */
.commitment-card h3 {
  /* Définit une taille lisible. */
  font-size: 22px;
  /* Ajoute une marge basse. */
  margin: 0 0 12px;
  /* Utilise la police display pour un vrai titre de carte. */
  font-family: var(--font-display);
  /* Réduit le poids, la police display porte déjà assez de présence. */
  font-weight: 500;
}

/* Force un titre sombre sur la carte orange, plus claire. */
.commitment-card:nth-child(2) h3 {
  color: var(--ink);
}

/* Force un titre blanc sur les cartes vert et noir. */
.commitment-card:nth-child(1) h3,
.commitment-card:nth-child(3) h3 {
  color: var(--white);
}

/* Définit les textes des engagements, en héritant de la couleur de texte propre à chaque carte. */
.commitment-card p {
  /* Supprime la marge haute. */
  margin: 0;
  /* Hérite de la couleur définie plus haut pour chaque carte. */
  color: inherit;
  /* Définit la hauteur de ligne. */
  line-height: 1.7;
  /* Réduit la taille. */
  font-size: 13.5px;
}

/* Définit la section timeline. */
.booking {
  /* Utilise un fond crème très léger. */
  background: var(--cream);
}

/* Organise les quatre étapes de réservation. */
.timeline {
  /* Active la grille. */
  display: grid;
  /* Crée quatre colonnes. */
  grid-template-columns: repeat(4, 1fr);
  /* Ajoute un espace. */
  gap: 0;
  /* Sert de référence à la ligne d'itinéraire. */
  position: relative;
  /* Laisse la place à la ligne au-dessus des étapes. */
  padding-top: 30px;
}

/* Trace une ligne pointillée horizontale, comme un itinéraire, au-dessus des quatre étapes. */
.timeline::before {
  /* Crée l'élément décoratif. */
  content: "";
  /* Positionne la ligne. */
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  /* Dessine le pointillé avec la couleur accent. */
  border-top: 2px dashed rgba(233,162,39,.5);
}

/* Définit chaque élément de timeline. */
.timeline-item {
  /* Sert de référence au repère posé sur la ligne. */
  position: relative;
  /* Ajoute un espace intérieur. */
  padding: 0 28px 0 0;
  /* Ajoute une bordure à droite. */
  border-right: 1px solid #D7D9D2;
  /* Ajoute une marge à droite. */
  margin-right: 28px;
}

/* Pose un repère rond sur la ligne d'itinéraire, à l'aplomb de chaque étape. */
.timeline-item::before {
  /* Crée le repère. */
  content: "";
  /* Positionne le repère sur la ligne. */
  position: absolute;
  top: -34px;
  left: 0;
  /* Définit une taille de point d'arrêt. */
  width: 11px;
  height: 11px;
  /* Arrondit le repère. */
  border-radius: 50%;
  /* Utilise l'orange accent. */
  background: var(--orange);
  /* Détache le repère du fond crème avec un liseré. */
  border: 3px solid var(--cream);
}

/* Supprime la bordure du dernier élément. */
.timeline-item:last-child {
  /* Évite une ligne inutile. */
  border-right: 0;
}

/* Définit les numéros de timeline. */
.timeline-item > span {
  /* Utilise l'orange. */
  color: var(--orange);
  /* Accentue le poids. */
  font-weight: 800;
  /* Réduit la taille. */
  font-size: 12px;
}

/* Définit les titres de timeline. */
.timeline-item h3 {
  /* Définit une taille. */
  font-size: 24px;
  /* Ajoute une marge. */
  margin: 14px 0 8px;
}

/* Définit les descriptions. */
.timeline-item p {
  /* Supprime la marge. */
  margin: 0;
  /* Utilise le gris. */
  color: var(--muted);
  /* Définit la hauteur de ligne. */
  line-height: 1.7;
  /* Réduit la taille. */
  font-size: 13px;
}

/* Définit la bannière régionale. */
.regional {
  /* Sert de référence aux overlays. */
  position: relative;
  /* Définit une hauteur importante. */
  min-height: 620px;
  /* Centre le contenu. */
  display: flex;
  align-items: center;
  /* Cache les débordements. */
  overflow: hidden;
}

/* Définit l'image régionale. */
.regional > img {
  /* Place l'image en arrière-plan. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Recadre l'image. */
  object-fit: cover;
}

/* Définit l'overlay régional. */
.regional-overlay {
  /* Place l'overlay sur toute la section. */
  position: absolute;
  inset: 0;
  /* Crée un fond sombre. */
  background: linear-gradient(90deg, rgba(4,36,22,.85), rgba(4,36,22,.35));
}

/* Place le contenu régional au-dessus de l'image. */
.regional-content {
  /* Positionne le contenu. */
  position: relative;
  /* Place le contenu au-dessus de l'overlay. */
  z-index: 2;
  /* Utilise le blanc. */
  color: var(--white);
}

/* Définit le titre régional. */
.regional-content h2 {
  /* Utilise la police serif. */
  font-family: var(--font-display);
  /* Définit une taille responsive. */
  font-size: clamp(54px, 7vw, 92px);
  /* Réduit la hauteur de ligne. */
  line-height: .92;
  /* Réduit le poids. */
  font-weight: 400;
  /* Supprime la marge haute. */
  margin: 0;
  /* Resserre nettement l'approche à cette très grande taille. */
  letter-spacing: -.02em;
}

/* Définit le texte régional. */
.regional-content > p:not(.eyebrow) {
  /* Ajoute une marge. */
  margin: 24px 0 30px;
  /* Utilise une couleur translucide. */
  color: rgba(255,255,255,.78);
}

/* Organise la grille des articles. */
.article-grid {
  /* Active une grille. */
  display: grid;
  /* Crée trois colonnes. */
  grid-template-columns: 1.35fr 1fr 1fr;
  /* Ajoute un espace. */
  gap: 18px;
}

/* Définit les cartes d'articles. */
.article-card {
  /* Utilise le fond crème. */
  background: var(--cream);
  /* Arrondit les cartes. */
  border-radius: var(--radius);
  /* Cache les images débordantes. */
  overflow: hidden;
}

/* Définit les images des articles. */
.article-card img {
  /* Définit une hauteur standard. */
  height: 280px;
  /* Recadre l'image. */
  width: 100%;
  object-fit: cover;
}

/* Agrandit l'image du premier article. */
.article-featured img {
  /* Donne une hauteur plus importante. */
  height: 380px;
}

/* Définit le corps des articles. */
.article-body {
  /* Ajoute de l'espace intérieur. */
  padding: 26px;
}

/* Définit la catégorie des articles. */
.article-body > span {
  /* Utilise une petite taille. */
  font-size: 10px;
  /* Accentue la graisse. */
  font-weight: 800;
  /* Augmente l'espacement. */
  letter-spacing: .15em;
  /* Utilise le vert. */
  color: var(--green);
}

/* Définit le titre des articles. */
.article-body h3 {
  /* Ajoute des marges. */
  margin: 12px 0 18px;
  /* Utilise une police serif. */
  font-family: var(--font-display);
  /* Définit la taille. */
  font-size: 28px;
  /* Réduit la hauteur de ligne. */
  line-height: 1.05;
  /* Réduit le poids. */
  font-weight: 400;
}

/* Définit les liens d'articles. */
.article-body a {
  /* Accentue le poids. */
  font-weight: 800;
  /* Réduit la taille. */
  font-size: 12px;
  /* Utilise le vert. */
  color: var(--green);
}

/* Organise la section à propos. */
.about {
  /* Utilise le vert très sombre. */
  background: var(--green-dark);
  /* Rend le texte blanc. */
  color: var(--white);
  /* Arrondit les deux coins hauts, la section semble se poser sur celle du dessus. */
  border-radius: 40px 40px 0 0;
}

/* Organise le contenu à propos. */
.about-grid {
  /* Active une grille. */
  display: grid;
  /* Crée deux colonnes. */
  grid-template-columns: 1fr 1fr;
  /* Ajoute un espace. */
  gap: 100px;
  /* Centre verticalement. */
  align-items: center;
}

/* Définit le titre à propos. */
.about h2 {
  /* Utilise le blanc. */
  color: var(--white);
  /* Ajoute une marge sous le titre. */
  margin-bottom: 28px;
}

/* Définit les paragraphes à propos. */
.about p:not(.eyebrow) {
  /* Limite la largeur. */
  max-width: 560px;
  /* Utilise une couleur translucide. */
  color: rgba(255,255,255,.68);
  /* Définit la hauteur de ligne. */
  line-height: 1.8;
}

/* Définit le bloc citation. */
.about-quote {
  /* Ajoute un contour léger. */
  border: 1px solid rgba(255,255,255,.14);
  /* Arrondit le bloc. */
  border-radius: var(--radius-xl);
  /* Ajoute un espace intérieur. */
  padding: 54px;
}

/* Définit le gros guillemet décoratif. */
.quote-mark {
  /* Utilise l'orange. */
  color: var(--orange);
  /* Agrandit fortement le symbole. */
  font-size: 70px;
  /* Réduit sa hauteur. */
  line-height: .5;
}

/* Définit la citation. */
.about blockquote {
  /* Utilise la police serif. */
  font-family: var(--font-display);
  /* Définit une taille. */
  font-size: 44px;
  /* Réduit la hauteur de ligne. */
  line-height: 1.05;
  /* Réduit la graisse. */
  font-weight: 400;
  /* Ajoute une marge. */
  margin: 26px 0;
}

/* Définit la signature de la citation. */
.about cite {
  /* Utilise l'orange. */
  color: var(--orange);
  /* Accentue la graisse. */
  font-weight: 800;
  /* Supprime le style italique par défaut. */
  font-style: normal;
}

/* Définit la grille des ressources de préparation. */
.prep-grid {
  /* Active une grille. */
  display: grid;
  /* Crée quatre colonnes. */
  grid-template-columns: repeat(4, 1fr);
  /* Ajoute un espace. */
  gap: 12px;
}

/* Définit chaque carte de préparation, un bloc blanc net posé sur la section noire. */
.prep-card {
  /* Organise le contenu verticalement. */
  display: flex;
  flex-direction: column;
  /* Ajoute de l'espace intérieur. */
  padding: 28px;
  /* Utilise un blanc franc, qui tranche sur le fond noir de la section. */
  background: var(--white);
  /* Utilise le texte sombre habituel, la carte reste un îlot clair. */
  color: var(--ink);
  /* Arrondit trois coins, coin net en bas à droite en écho au bouton. */
  border-radius: 22px 22px 4px 22px;
  /* Anime la carte. */
  transition: transform .3s var(--ease), border-radius .3s var(--ease);
}

/* Soulève les cartes au survol. */
.prep-card:hover {
  /* Crée une sensation de profondeur. */
  transform: translateY(-6px);
  /* Adoucit le dernier coin net au survol. */
  border-radius: 22px;
}

/* Définit les numéros des ressources. */
.prep-card span {
  /* Utilise l'orange. */
  color: var(--orange);
  /* Accentue la graisse. */
  font-weight: 800;
  /* Réduit la taille. */
  font-size: 11px;
}

/* Définit les titres des ressources. */
.prep-card strong {
  /* Ajoute un espace. */
  margin: 40px 0 10px;
  /* Définit une taille. */
  font-size: 19px;
}

/* Définit les descriptions des ressources. */
.prep-card small {
  /* Utilise le gris. */
  color: var(--muted);
  /* Définit la hauteur de ligne. */
  line-height: 1.6;
}

/* Définit le footer. */
.site-footer {
  /* Utilise un fond très sombre. */
  background: #07110C;
  /* Utilise le blanc. */
  color: var(--white);
  /* Ajoute un espace supérieur. */
  padding: 80px 0 24px;
}

/* Organise le contenu principal du footer. */
.footer-main {
  /* Active une grille. */
  display: grid;
  /* Crée une colonne large et trois colonnes plus petites. */
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  /* Ajoute un espace. */
  gap: 50px;
  /* Ajoute une marge basse. */
  padding-bottom: 70px;
}

/* Définit le logo du footer. */
.brand-footer {
  /* Force le blanc. */
  color: var(--white);
}

/* Définit la signature sous le logo. */
.footer-brand > p {
  /* Utilise une couleur translucide. */
  color: rgba(255,255,255,.55);
  /* Ajoute une marge supérieure. */
  margin-top: 20px;
}

/* Définit les titres des colonnes footer. */
.footer-column h3 {
  /* Réduit la taille. */
  font-size: 12px;
  /* Accentue la graisse. */
  font-weight: 800;
  /* Augmente l'espacement. */
  letter-spacing: .12em;
  /* Met le titre en majuscules. */
  text-transform: uppercase;
  /* Ajoute une marge inférieure. */
  margin: 0 0 20px;
  /* Utilise l'orange. */
  color: var(--orange);
}

/* Définit les liens des colonnes. */
.footer-column > a {
  /* Affiche les liens en bloc. */
  display: block;
  /* Ajoute une marge inférieure. */
  margin-bottom: 12px;
  /* Utilise une couleur claire. */
  color: rgba(255,255,255,.68);
  /* Réduit la taille. */
  font-size: 13px;
}

/* Change la couleur des liens footer au survol. */
.footer-column > a:hover {
  /* Utilise le blanc. */
  color: var(--white);
}

/* Définit le texte de contact. */
.footer-contact p {
  /* Utilise une couleur translucide. */
  color: rgba(255,255,255,.55);
  /* Définit une hauteur de ligne. */
  line-height: 1.6;
  /* Réduit la taille. */
  font-size: 13px;
}

/* Définit la ligne légale. */
.footer-bottom {
  /* Ajoute une bordure supérieure. */
  border-top: 1px solid rgba(255,255,255,.10);
  /* Ajoute un espace intérieur supérieur. */
  padding-top: 22px;
  /* Organise les contenus sur une ligne. */
  display: flex;
  justify-content: space-between;
  gap: 20px;
  /* Utilise une couleur secondaire. */
  color: rgba(255,255,255,.40);
  /* Réduit la taille. */
  font-size: 11px;
}

/* Organise les liens légaux. */
.footer-bottom div {
  /* Active Flexbox. */
  display: flex;
  /* Ajoute un espace. */
  gap: 18px;
}

/* Définit le bouton WhatsApp flottant. */
.whatsapp-float {
  /* Fixe le bouton dans la fenêtre. */
  position: fixed;
  /* Le place au-dessus du contenu. */
  z-index: 900;
  /* Positionne le bouton en bas à droite. */
  right: 22px;
  bottom: 22px;
  /* Organise icône et texte. */
  display: inline-flex;
  align-items: center;
  /* Ajoute un espace. */
  gap: 8px;
  /* Ajoute un espace intérieur. */
  padding: 13px 17px;
  /* Arrondit complètement le bouton. */
  border-radius: 999px;
  /* Utilise le vert WhatsApp générique. */
  background: #25D366;
  /* Utilise le blanc. */
  color: var(--white);
  /* Accentue le poids. */
  font-weight: 800;
  /* Ajoute une ombre. */
  box-shadow: 0 15px 40px rgba(0,0,0,.18);
  /* Anime le bouton. */
  transition: transform .25s var(--ease);
}

/* Soulève le bouton WhatsApp au survol. */
.whatsapp-float:hover {
  /* Crée un petit effet d'interaction. */
  transform: translateY(-4px);
}

/* Définit la taille de l'icône WhatsApp. */
.whatsapp-float svg {
  /* Définit la largeur. */
  width: 20px;
  /* Définit la hauteur. */
  height: 20px;
  /* Remplit l'icône en blanc. */
  fill: currentColor;
}

/* Adapte l'interface aux écrans moyens. */
@media (max-width: 980px) {
  /* Réduit la largeur des conteneurs. */
  .container { width: min(calc(100% - 32px), var(--max-width)); }
  /* Affiche le hamburger. */
  .menu-toggle { display: flex; }
  /* Positionne le panneau de navigation mobile, toujours en place mais invisible tant qu'il n'est pas ouvert. */
  .main-nav {
    /* Positionne le menu sous le header. */
    position: fixed;
    left: 16px;
    right: 16px;
    top: 72px;
    /* Affiche les liens en colonne. */
    display: flex;
    flex-direction: column;
    /* Ajoute de l'espace intérieur. */
    padding: 22px;
    /* Utilise le blanc. */
    background: var(--white);
    /* Arrondit le panneau. */
    border-radius: 20px;
    /* Ajoute une ombre. */
    box-shadow: var(--shadow);
    /* Utilise le texte sombre. */
    color: var(--ink);
    /* Cache le panneau au repos, prêt à apparaître en douceur. */
    opacity: 0;
    /* Le décale légèrement vers le haut au repos. */
    transform: translateY(-10px);
    /* Empêche les clics tant que le panneau est fermé. */
    pointer-events: none;
    /* Anime l'ouverture et la fermeture avec la courbe commune au site. */
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  /* Rend les liens mobiles sombres. */
  .main-nav a { color: var(--ink) !important; }
  /* Révèle le panneau lorsqu'il est ouvert. */
  .main-nav.is-open {
    /* Rend le panneau visible. */
    opacity: 1;
    /* Le replace à sa position naturelle. */
    transform: translateY(0);
    /* Réautorise les clics. */
    pointer-events: auto;
  }
  /* Passe le configurateur en une seule colonne. */
  .custom-grid { grid-template-columns: 1fr; gap: 50px; }
  /* Passe les engagements en deux colonnes. */
  .commitment-grid { grid-template-columns: repeat(2, 1fr); }
  /* Passe les ressources en deux colonnes. */
  .prep-grid { grid-template-columns: repeat(2, 1fr); }
  /* Réduit le footer à deux colonnes. */
  .footer-main { grid-template-columns: repeat(2, 1fr); }
}

/* Adapte l'interface aux smartphones. */
@media (max-width: 720px) {
  /* Réduit l'espace vertical général. */
  .section { padding: 76px 0; }
  /* Réduit la hauteur du hero. */
  .hero { min-height: 680px; }
  /* Réduit le titre principal. */
  .hero h1 { font-size: clamp(50px, 15vw, 72px); }
  /* Réduit le texte du hero. */
  .hero-text { font-size: 15px; }
  /* Empile les indicateurs de confiance. */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  /* Ajoute des séparations verticales adaptées au mobile. */
  .trust-item { padding: 15px; border-bottom: 1px solid var(--soft); }
  /* Supprime certaines bordures selon la position. */
  .trust-item:nth-child(2) { border-right: 0; }
  /* Supprime la bordure inférieure des deux derniers éléments. */
  .trust-item:nth-child(3), .trust-item:nth-child(4) { border-bottom: 0; }
  /* Réduit la carte du configurateur. */
  .trip-builder { padding: 24px; }
  /* Empile les choix en une colonne. */
  .choice-grid { grid-template-columns: 1fr; }
  /* Permet au choix large de reprendre une ligne normale. */
  .choice-wide { grid-column: auto; }
  /* Empile titre et CTA de section. */
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  /* Réduit le titre des sections. */
  .section-heading h2, .center-heading h2, .about h2 { font-size: 48px; }
  /* Empile les cartes de circuits. */
  .tour-grid { grid-template-columns: 1fr; }
  /* Annule la hauteur spéciale de la première carte. */
  .tour-card-large { grid-row: auto; min-height: 560px; }
  /* Uniformise la hauteur des autres cartes. */
  .tour-card { min-height: 430px; }
  /* Passe le manifeste en une colonne. */
  .manifesto { grid-template-columns: 1fr; }
  /* Réduit la hauteur de l'image manifeste. */
  .manifesto-image { min-height: 430px; }
  /* Réduit les espaces internes du manifeste. */
  .manifesto-copy { padding: 65px 24px; }
  /* Passe les engagements en une colonne. */
  .commitment-grid { grid-template-columns: 1fr; }
  /* Empile la timeline. */
  .timeline { grid-template-columns: 1fr; gap: 28px; padding-top: 0; padding-left: 26px; }
  /* Bascule la ligne d'itinéraire à la verticale sur le côté gauche. */
  .timeline::before { top: 0; bottom: 0; left: 5px; right: auto; border-top: 0; border-left: 2px dashed rgba(233,162,39,.5); }
  /* Supprime les bordures latérales de la timeline et replace le repère à gauche de chaque étape. */
  .timeline-item { border-right: 0; border-bottom: 1px solid #D7D9D2; margin-right: 0; padding: 0 0 28px; }
  /* Repositionne le repère rond sur la ligne verticale. */
  .timeline-item::before { top: 4px; left: -26px; }
  /* Supprime la bordure du dernier élément de timeline. */
  .timeline-item:last-child { border-bottom: 0; }
  /* Réduit la hauteur de la bannière régionale. */
  .regional { min-height: 560px; }
  /* Passe les articles en une colonne. */
  .article-grid { grid-template-columns: 1fr; }
  /* Uniformise la hauteur des images d'articles. */
  .article-card img, .article-featured img { height: 280px; }
  /* Passe la section à propos en une colonne. */
  .about-grid { grid-template-columns: 1fr; gap: 50px; }
  /* Réduit la taille de la citation. */
  .about blockquote { font-size: 36px; }
  /* Réduit l'espace du bloc citation. */
  .about-quote { padding: 34px; }
  /* Passe les ressources en une colonne. */
  .prep-grid { grid-template-columns: 1fr; }
  /* Passe le footer en une colonne. */
  .footer-main { grid-template-columns: 1fr; }
  /* Empile la ligne légale. */
  .footer-bottom { flex-direction: column; }
  /* Permet aux liens légaux de passer à la ligne. */
  .footer-bottom div { flex-wrap: wrap; }
  /* Réduit le bouton WhatsApp à une bulle. */
  .whatsapp-float { width: 54px; height: 54px; padding: 0; justify-content: center; }
  /* Cache le texte de WhatsApp sur mobile. */
  .whatsapp-float span { display: none; }
}

/* Rend les éléments observés légèrement transparents avant leur apparition. */
.reveal {
  /* Définit une opacité initiale basse. */
  opacity: 0;
  /* Décale légèrement les éléments vers le bas. */
  transform: translateY(18px);
  /* Anime l'apparition et le déplacement. */
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

/* Rend les éléments visibles après intersection avec la fenêtre. */
.reveal.is-visible {
  /* Rend l'élément totalement visible. */
  opacity: 1;
  /* Replace l'élément à sa position naturelle. */
  transform: translateY(0);
}

/* Révélation à deux couches pour les cartes en grille, le cadre apparaît puis l'image se pose, un mouvement plus travaillé qu'un simple fondu uniforme. */
.reveal-card {
  /* Cache la carte avant son apparition. */
  opacity: 0;
  /* La décale légèrement vers le bas. */
  transform: translateY(26px);
  /* Anime l'apparition du cadre. */
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* Révèle la carte à l'intersection. */
.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Prépare l'image à l'intérieur d'une carte non encore révélée, légèrement agrandie et estompée. */
.reveal-card:not(.is-visible) img {
  transform: scale(1.12);
  opacity: .001;
}

/* Anime l'image séparément du cadre, sur une durée plus longue pour un effet de profondeur. */
.reveal-card img {
  transition: transform 1.1s var(--ease), opacity .9s var(--ease);
}

/* Décale l'apparition de chaque carte selon sa position, pour un rythme plutôt qu'un déclenchement uniforme. */
.reveal-card:nth-child(2) { transition-delay: .08s; }
.reveal-card:nth-child(3) { transition-delay: .16s; }
.reveal-card:nth-child(4) { transition-delay: .24s; }
/* Applique le même décalage à l'image, en plus du délai déjà posé sur le cadre. */
.reveal-card:nth-child(2) img { transition-delay: .08s; }
.reveal-card:nth-child(3) img { transition-delay: .16s; }
.reveal-card:nth-child(4) img { transition-delay: .24s; }

/* Respecte les préférences système des personnes sensibles aux animations. */
@media (prefers-reduced-motion: reduce) {
  /* Désactive le défilement doux. */
  html { scroll-behavior: auto; }
  /* Désactive les transitions et animations non essentielles. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Pages intérieures ===== */

.page-main {
  padding-top: 82px;
}

.page-hero {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
}

.page-hero-media,
.page-hero-overlay {
  position: absolute;
  inset: 0;
}

.page-hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.72));
}

.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 80px 0 60px;
}

.page-hero h1 {
  margin: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 72px);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: 900px;
}

.page-hero p {
  max-width: 620px;
  color: rgba(255,255,255,.82);
  font-size: 18px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.breadcrumb a:hover {
  color: var(--white);
}

.breadcrumb span {
  opacity: .5;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 12px 18px;
  border: 1px solid #CDD1CC;
  border-radius: 4px 16px 16px 16px;
  background: var(--white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: .2s var(--ease);
}

.filter-btn.is-active,
.filter-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  border-radius: 16px;
}

.catalog-item.is-hidden {
  display: none;
}

/* Fait réapparaître une carte en douceur juste après un changement de filtre. */
.catalog-item.just-shown {
  animation: catalogItemIn .4s var(--ease) both;
}

/* Définit le mouvement de fondu-montée d'une carte filtrée. */
@keyframes catalogItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bandeau de repères rapides sur le circuit, en bloc sombre assumé plutôt qu'en cases grises. */
.circuit-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.14);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Définit chaque case du bandeau, fond vert sombre uni. */
.circuit-stat {
  background: var(--green-dark);
  color: var(--white);
  padding: 24px 20px;
}

/* Définit la valeur mise en avant dans chaque case. */
.circuit-stat strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* Définit le libellé, avec son icône, sous la valeur. */
.circuit-stat span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* Colore les icônes des repères en orange, pour qu'elles ressortent sur le fond sombre. */
.circuit-stat svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--orange);
}

.circuit-layout {
  display: grid;
  grid-template-columns: 1.4fr .85fr;
  gap: 50px;
  margin-top: 60px;
  align-items: start;
}

/* Encadré de réservation, en bloc noir assumé plutôt qu'en carte crème pâle, pour porter le regard vers l'action. */
.circuit-sidebar {
  position: sticky;
  top: 100px;
  background: var(--ink);
  color: rgba(255,255,255,.85);
  border-radius: 6px 30px 30px 30px;
  padding: 30px;
}

.circuit-sidebar h3 {
  margin: 8px 0 12px;
  font-size: 28px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.price-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.price-table td:last-child {
  text-align: right;
  font-weight: 800;
  color: var(--white);
}

/* Parcours illustré du circuit, une ligne pointillée centrale reliant chaque étape numérotée, en écho à la timeline de réservation. */
.route-map {
  position: relative;
  padding: 10px 0 6px;
  margin-bottom: 50px;
}

/* Trace la ligne pointillée centrale qui traverse tout le parcours. */
.route-map::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  border-left: 2px dashed rgba(233,162,39,.55);
  transform: translateX(-50%);
}

/* Définit chaque étape, une moitié de largeur, alternée à gauche ou à droite de la ligne. */
.route-stop {
  position: relative;
  width: calc(50% - 34px);
  padding-bottom: 42px;
}

/* Place les étapes impaires à gauche de la ligne, texte aligné à droite vers la ligne. */
.route-stop:nth-child(odd) {
  text-align: right;
}

/* Place les étapes paires à droite de la ligne, texte aligné à gauche vers la ligne. */
.route-stop:nth-child(even) {
  margin-left: calc(50% + 34px);
  text-align: left;
}

/* Dessine le repère numéroté de chaque étape, posé sur la ligne centrale. */
.route-stop::before {
  content: attr(data-index);
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

/* Positionne le repère des étapes impaires juste à droite du bloc de texte. */
.route-stop:nth-child(odd)::before {
  right: -64px;
}

/* Positionne le repère des étapes paires juste à gauche du bloc de texte. */
.route-stop:nth-child(even)::before {
  left: -64px;
}

/* Définit le nom de l'étape. */
.route-stop strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

/* Définit la légende courte de l'étape. */
.route-stop span {
  color: var(--muted);
  font-size: 13px;
}

.itinerary details {
  border-bottom: 1px solid var(--soft);
  padding: 18px 0;
}

.itinerary summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.itinerary summary::-webkit-details-marker {
  display: none;
}

.itinerary p {
  color: var(--muted);
  margin: 12px 0 0;
}

.inclusion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.inclusion-card {
  padding: 28px;
  border-radius: var(--radius);
}

/* Première carte, ce qui est inclus, teintée de vert pour une lecture immédiate. */
.inclusion-grid .inclusion-card:first-child {
  background: #EAF4EE;
  border: 1px solid #CFE6D8;
}

/* Deuxième carte, ce qui ne l'est pas, reste neutre. */
.inclusion-grid .inclusion-card:last-child {
  background: var(--white);
  border: 1px solid var(--soft);
}

.inclusion-card span {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 800;
  color: var(--green);
}

/* Assombrit le libellé de la carte "non inclus", moins besoin d'attirer l'œil. */
.inclusion-grid .inclusion-card:last-child span {
  color: var(--ink);
}

.cta-band {
  background: var(--ink);
  color: var(--white);
  padding: 80px 0;
}

.cta-band h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
}

.cta-band p {
  max-width: 560px;
  color: rgba(255,255,255,.72);
  margin-bottom: 28px;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.legal-content {
  max-width: 760px;
}

/* Ligne de méta-informations sous le titre d'un article, auteur, date et temps de lecture. */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

/* Sépare chaque information par un point discret plutôt qu'un texte concaténé. */
.article-meta span + span::before {
  content: "•";
  margin-right: 14px;
  color: var(--orange);
}

/* Image insérée au fil d'un article, pour aérer le texte. */
.article-inline-img {
  width: 100%;
  border-radius: 6px 26px 26px 26px;
  margin: 36px 0;
}

/* Bloc de circuit lié en fin d'article, un carton vert plein plutôt qu'un simple lien perdu dans le texte. */
.related-circuit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--green);
  color: var(--white);
  border-radius: 6px 30px 30px 30px;
  padding: 28px 32px;
  margin-top: 44px;
}

/* Définit le petit libellé au-dessus du nom du circuit lié. */
.related-circuit span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
}

/* Définit le nom du circuit lié. */
.related-circuit strong {
  font-size: 19px;
  font-family: var(--font-display);
  font-weight: 500;
}

.legal-content h2 {
  margin-top: 40px;
  font-size: 28px;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  line-height: 1.7;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.dest-card {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  align-items: end;
}

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dest-card-content {
  position: relative;
  z-index: 1;
  padding: 28px;
  color: var(--white);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}

.prep-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.prep-link {
  padding: 24px;
  border: 1px solid var(--soft);
  border-radius: var(--radius);
  background: var(--white);
  transition: .2s var(--ease);
}

.prep-link:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.prep-link strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.prep-link small {
  color: var(--muted);
}

.section-cream {
  background: var(--cream);
}

.nav-link-prep {
  font-weight: 700;
}

@media (max-width: 980px) {
  .circuit-stats,
  .circuit-layout,
  .inclusion-grid,
  .dest-grid,
  .form-grid,
  .prep-links {
    grid-template-columns: 1fr;
  }

  .circuit-sidebar {
    position: static;
  }

  /* Replie le parcours illustré sur une seule colonne, la ligne passe à gauche. */
  .route-map::before {
    left: 14px;
    transform: none;
  }

  /* Toutes les étapes se placent désormais à droite de la ligne, quelle que soit leur position. */
  .route-stop,
  .route-stop:nth-child(even) {
    width: auto;
    margin-left: 46px;
    text-align: left;
  }

  /* Replace chaque repère à gauche du texte, sur la ligne verticale. */
  .route-stop::before,
  .route-stop:nth-child(odd)::before,
  .route-stop:nth-child(even)::before {
    left: -46px;
    right: auto;
  }
}