/* ==========================================================================
   Voyflow — feuille de style du site public
   Direction A « Éditorial », avec les onglets du roadbook repris de la
   direction B. Contrairement à la maquette (figée à 1280 px), tout est ici
   réellement fluide : clamp() sur les tailles, grilles qui se replient.
   ========================================================================== */

:root {
  --encre:        #14263F;
  --vert:         #0FA391;
  --vert-fonce:   #0A6B60;
  --vert-pale:    #EAF6F3;
  --vert-vif:     #6DBE45;
  --miel:         #F5A623;
  --rouge:        #EE5A5A;
  --rouge-fonce:  #D9534F;
  --rouge-pale:   #FDECEB;

  --blanc:        #FFFFFF;
  --papier:       #F7F9FA;
  --bordure:      #E3E9EE;
  --bordure-fine: #EDF1F4;

  --texte:        #14263F;
  --texte-doux:   #4E6076;
  --texte-tiers:  #6B7C8E;
  --texte-faible: #8494A4;

  --titre: Epilogue, "Segoe UI", system-ui, sans-serif;
  --corps: Figtree, "Segoe UI", system-ui, sans-serif;
  --mono:  "DM Mono", ui-monospace, Consolas, monospace;

  /* Respiration horizontale : 20 px sur mobile, 64 px sur grand écran. */
  --marge: clamp(20px, 5vw, 64px);
  --largeur: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 400 16px/1.6 var(--corps);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--titre); letter-spacing: -0.032em; }

a { color: var(--vert-fonce); }

:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* Par défaut, un enfant de grille (ou de flex) ne peut pas devenir plus étroit
   que son contenu : un seul intitulé un peu long suffit alors à élargir toute
   la page sur mobile. On lève cette taille minimale automatique partout où on
   met en grille — les débordements sont gérés au cas par cas (troncature,
   passage à la ligne, ou conteneur défilant pour les tableaux). */
.hero .conteneur > *,
.deux-colonnes > *,
.trois-colonnes > *,
.avant-apres > *,
.arguments > *,
.styles > *,
.ventilation > *,
.bloc-etape > *,
.grille-destinations > *,
.encart-pdf > *,
.faq > *,
.pied-grille > *,
.apercu-ligne > *,
.activite > * { min-width: 0; }

/* ⚠️ Les surtitres et mentions passent de DM Mono à la police de texte.
   La mono était un choix « technique » : à 11 px et en graisse 500, ses
   chasses fixes et ses formes étroites la rendaient pâle et mal accordée aux
   titres Epilogue juste en dessous. On garde la capitale et l'interlettrage —
   c'est ce qui fait le surtitre — mais dans Figtree en 600, qui a le corps
   nécessaire à cette taille.
   La mono reste où elle a un sens : les CHIFFRES (montants, quotas, dates),
   qu'elle aligne colonne par colonne. */
.surtitre {
  font: 600 11px var(--corps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 18px;
}

.chapeau {
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--texte-doux);
  text-wrap: pretty;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Boutons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px var(--corps);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn-encre { background: var(--encre); color: #fff; }
.btn-encre:hover { background: var(--vert); }
.btn-vert { background: var(--vert); color: #fff; }
.btn-vert:hover { background: var(--vert-fonce); }
.btn-contour { background: var(--blanc); color: var(--encre); border-color: var(--encre); }
.btn-contour:hover { background: var(--encre); color: #fff; }
.btn-large { width: 100%; padding: 15px; font-size: 16px; }

.lien-souligne {
  font: 500 15px var(--corps);
  color: var(--vert-fonce);
  text-decoration: none;
  border-bottom: 1px solid #A9D8CF;
  padding-bottom: 2px;
}
.lien-souligne:hover { border-color: var(--vert); }

/* --- En-tête ------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure-fine);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}
/* La pastille passe SOUS le bloc de marque entier — pictogramme et logotype —
   et non a cote du dessin : elle qualifie la marque, pas l'image. */
/* Le logo est redevenu horizontal : il s'empilait sous la pastille
   « 100 % gratuit », qui lui volait la hauteur et le réduisait à 36 px de
   pictogramme et 18 px de logotype — illisible à l'échelle réelle. */
.marque {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.marque img.pictogramme { height: 64px; width: auto; }

/* Le nom, en texte et aux deux couleurs du logo — comme dans le pied de page.
   En image il portait sa propre marge interne, qu'aucun `gap` ne rattrapait :
   le nom flottait loin du pictogramme. */
.marque .logotype {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--encre);
}
.marque .logotype span { color: var(--vert); }

/* Le menu se cale juste après le logo, en pastilles, comme la barre latérale
   du back-office : sur fond blanc, des liens nus se lisaient mal et rien
   n'indiquait où l'on se trouvait dans la page. */
.navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;   /* colle au logo, pousse l'action à droite */
  font: 500 14.5px var(--corps);
}
/* Les intitulés ne se coupent JAMAIS en deux lignes : « Comment ça / marche »
   et « Le / PDF » cassaient la hauteur de l'en-tête et désalignaient le logo.
   Le menu est passé de quatre à sept entrées, il faut donc lui interdire le
   retour à la ligne et basculer plus tôt sur le menu burger. */
.navigation a {
  color: var(--texte-doux);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 999px;
  transition: background-color .16s, color .16s;
}
.navigation a:hover { color: var(--encre); background: var(--papier); }

/* Section en cours de lecture : pastille verte pleine, comme l'entrée active
   du back-office. C'est le seul repère de position sur une page de 17 000 px. */
.navigation a[aria-current="true"] {
  background: var(--vert);
  color: #fff;
}
.navigation a[aria-current="true"]:hover { background: var(--vert-fonce); color: #fff; }

.entete-actions { display: flex; align-items: center; gap: 14px; }


.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--encre);
  border-radius: 2px;
}

/* --- Hero --------------------------------------------------------------- */

.hero .conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(44px, 6vw, 72px);
}


.hero h1 {
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 0.99;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.hero p { margin: 24px 0 0; max-width: 31em; }

/* Appels à l'action du hero. Ils avaient disparu quand le générateur est passé
   à l'horizontale : la page n'offrait plus AUCUN geste avant 1 600 px de
   défilement, sur un produit dont l'argument est justement l'absence de
   friction. La mention passe à la ligne — collée aux boutons elle se lisait
   comme une étiquette du second lien. */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}
/* Les trois atouts, sous le bouton du hero.

   Ils tenaient sur une ligne grise séparée par des points médians — « Gratuit ·
   sans compte · PDF immédiat » — qui se lisait comme une mention légale et se
   sautait comme telle. Ce sont pourtant les trois seules objections d'un
   visiteur qui arrive : combien ça coûte, faut-il s'inscrire, qu'est-ce que
   j'obtiens.

   Bandeau ENCRE, pas vert pâle. Une première version posait un cadre vert clair
   sur toute la largeur : le contenu en occupait 40 %, et un cadre vide n'est
   jamais élégant. L'encre reprend le panneau « Comment ça marche » à droite du
   hero — les deux moitiés du premier écran se répondent au lieu de s'ignorer.

   ⚠️ `width: fit-content` : le bandeau se dimensionne sur son texte. C'est
   toute la différence entre un bloc qui affirme et une boîte qui attend qu'on
   la remplisse. */
.hero-atouts {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 12px 20px;
  list-style: none;
  border-radius: 12px;
  background: var(--encre);
}
.hero-atouts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13.5px var(--corps);
  color: var(--blanc);
}
.hero-atouts svg {
  flex: none;
  width: 16px;
  height: 16px;
  /* Vert vif et non vert charte : sur l'encre, le #0FA391 s'assombrit et la
     coche disparaît. Le #6DBE45 de la palette ressort nettement. */
  fill: var(--vert-vif);
}

/* Sous 480 px, les trois tiennent encore côte à côte si on resserre : les
   empiler ferait un pavé de trois lignes juste sous le bouton principal. */
@media (max-width: 480px) {
  .hero-atouts { gap: 6px 14px; padding: 10px 14px; }
  .hero-atouts li { font-size: 12.5px; }
  .hero-atouts svg { width: 14px; height: 14px; }
}
/* --- Hero pleine largeur et générateur horizontal ----------------------- */

/* À gauche la promesse et l'action, à droite la méthode en trois lignes. */
.hero-plein .conteneur { grid-template-columns: 1.05fr 1fr; align-items: center; }
.hero-plein h1 { font-size: clamp(38px, 5vw, 60px); }

/* Le h1 a une interligne très serrée (0.99) : ses hautes lettres montent donc
   presque jusqu'au surtitre, et les 18 px par défaut ne se voyaient plus. */
.hero-plein .surtitre { margin-bottom: 26px; }

/* Générateur à l'horizontale, posé juste au-dessus du roadbook : on voit le
   programme se recomposer en bougeant un réglage, sans faire défiler. En
   colonne, il faisait 900 px de haut et le roadbook restait invisible.

   TROIS colonnes, pas quatre : il y a six réglages, donc quatre colonnes
   laissaient forcément un trou en fin de deuxième rang et les champs se
   décalaient les uns par rapport aux autres. */
/* ⚠️ TROIS RANGÉES HOMOGÈNES, pas une grille de trois colonnes.
   En 3×2, les six champs alternaient select / curseur / select puis curseur /
   curseur / boutons : quatre natures de contrôle mélangées, avec des hauteurs
   différentes (un select fait 48 px, un curseur 30), donc des rangées qui ne
   s'alignaient jamais. On lisait six choses sans rapport.
   On regroupe par nature — ce qu'on choisit, ce qu'on règle, comment on
   voyage. Chaque rangée a une seule forme de contrôle, et les yeux la
   parcourent d'un coup.
   Grille de 6 colonnes pour permettre 2×3 puis 3×2 sans changer de conteneur. */
.generateur-large {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 26px;
  align-items: start;
}

/* Rangée 1 — CE QU'ON CHOISIT : les deux listes déroulantes, ensemble. */
.generateur-large .champ-destination,
.generateur-large .champ-mois { grid-column: span 3; }

/* Rangée 2 — CE QU'ON RÈGLE : les trois curseurs, même forme, même hauteur. */
.generateur-large .champ-jours,
.generateur-large .champ-voyageurs,
.generateur-large .champ-budget { grid-column: span 2; }

/* Rangée 3 — COMMENT ON VOYAGE : deux réglages, moitié-moitié.
   Il n'y en avait qu'un, sur toute la largeur. Depuis qu'ils sont deux —
   combien on dépense, combien on bouge — les mettre côte à côte les montre
   pour ce qu'ils sont : deux questions de même rang, posées ensemble. Sur
   toute la largeur chacun, ils auraient poussé l'estimation hors de l'écran. */
.generateur-large .champ-style { grid-column: span 3; }

.generateur-large .generateur-tete {
  grid-column: 1 / -1;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bordure-fine);
}
.generateur-large .generateur-tete h2 { font-size: clamp(20px, 2vw, 24px); }

/* Chaque champ occupe toute la hauteur de sa cellule et pousse sa précision en
   bas : sans ça, une précision sur deux lignes désalignait toute la rangée. */
.generateur-large .champ {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.generateur-large .champ .precision { margin-top: auto; padding-top: 6px; }

/* Les trois styles de voyage tiennent dans une colonne en se resserrant. */
.generateur-large .styles { gap: 8px; }
.generateur-large .styles .style { padding: 10px 8px; }
.generateur-large .styles .style .nom { font-size: 13.5px; }
.generateur-large .styles .style .sous { font-size: 11px; }

.generateur-large .estimation { grid-column: 1 / -1; margin-top: 2px; }
.generateur-large > .btn,
.generateur-large > .mention { grid-column: 1 / -1; }
.generateur-large .mention { margin-top: -8px; }

/* ⚠️ Les `span` de la grille à six colonnes doivent être ANNULÉS ici, sinon un
   `span 3` sur une grille à deux colonnes se retrouve tronqué et les rangées se
   décalent d'un cran. On repasse à deux champs par ligne, sans distinction. */
@media (max-width: 1080px) {
  .generateur-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .generateur-large .champ-destination,
  .generateur-large .champ-mois,
  .generateur-large .champ-jours,
  .generateur-large .champ-voyageurs,
  .generateur-large .champ-budget { grid-column: auto; }
  /* Confort et rythme repassent chacun pleine largeur, l'un sous l'autre :
     serrés dans une demi-ligne, leurs libellés — « auberge, chambre chez
     l'habitant », « je prends mon temps » — cassent sur trois lignes et les
     deux blocs perdent toute lisibilité. */
  .generateur-large .champ-style { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .generateur-large { grid-template-columns: 1fr; }
  .generateur-large .champ { height: auto; }
}

.arguments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 26px;
  border-top: 1px solid var(--bordure-fine);
}
.argument .rang { font: 500 13px var(--mono); color: var(--miel); margin-bottom: 6px; }
.argument .titre { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.argument .texte { font-size: 13.5px; line-height: 1.5; color: var(--texte-tiers); }

/* --- Générateur --------------------------------------------------------- */

.generateur {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: 0 18px 50px -20px rgba(20, 38, 63, 0.28);
  padding: clamp(22px, 2.5vw, 30px) clamp(20px, 2.6vw, 32px) clamp(24px, 2.8vw, 32px);
}
.generateur-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.generateur-tete h2 {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.generateur-tete .compte { font: 500 11px var(--mono); letter-spacing: 0.1em; color: var(--texte-faible); }

.champ { margin-bottom: 22px; }
.champ:last-of-type { margin-bottom: 0; }

.champ-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.champ label,
.champ .intitule {
  font: 500 11px var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.champ .valeur { font: 500 15px var(--mono); color: var(--encre); }
.champ .precision {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--texte-faible);
}

/* La route-budget est la première chose qu'on voit après avoir réglé les
   curseurs : le résultat d'abord, l'explication en dessous et en petit. Le
   rappel « hors billets d'avion » y reste — c'est le genre de malentendu qui
   ruine la confiance si on le découvre après avoir fait ses comptes. */
.note-route {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--bordure-fine);
  max-width: 52em;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--texte-faible);
}

select {
  width: 100%;
  font: 500 16px var(--corps);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 13px 40px 13px 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238494A4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--bordure);
  outline: none;
  margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px; width: 20px;
  border-radius: 50%;
  background: var(--encre);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(20, 38, 63, 0.35);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  height: 14px; width: 14px;
  border-radius: 50%;
  background: var(--encre);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(20, 38, 63, 0.35);
  cursor: pointer;
}

.styles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.style {
  text-align: left;
  border: 1px solid var(--bordure);
  background: var(--blanc);
  color: var(--encre);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-family: var(--corps);
  transition: background-color .16s, border-color .16s, color .16s;
}
.style:hover { border-color: var(--encre); }
.style[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.style .nom { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.style .sous { display: block; font-size: 11.5px; line-height: 1.3; opacity: 0.72; }

.estimation {
  background: var(--papier);
  border: 1px solid var(--bordure-fine);
  border-radius: 14px;
  padding: 18px 18px 20px;
  margin-top: 26px;
}
.estimation-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font: 500 11px var(--mono);
  letter-spacing: 0.11em;
  color: var(--texte-faible);
}
.estimation-total {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.estimation-total .montant {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.estimation-total .sur { font-size: 14px; color: var(--texte-faible); padding-bottom: 5px; }
.total-groupe {
  margin: -6px 0 14px;
  font: 500 13.5px var(--corps);
  color: var(--vert-fonce);
}
.estimation .verdict { font-size: 13.5px; line-height: 1.5; color: var(--texte-doux); }

/* L'hébergement retenu, sous le coût de l'étape : c'est lui qui justifie le
   prix de la nuit — et il portera le lien de réservation en phase I. */
.couchage {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.couchage .quoi { font: 500 10.5px var(--mono); letter-spacing: 0.11em; color: var(--texte-faible); }
.couchage .nom { font-weight: 500; font-size: 13.5px; line-height: 1.35; }
.couchage .genre { font: 400 12px var(--mono); color: var(--texte-faible); }
.estimation .verdict strong { font-weight: 600; }
.mention { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--texte-faible); }

/* --- Jauge (petite, dans le générateur) --------------------------------- */

.jauge { position: relative; height: 22px; margin-bottom: 12px; }
.jauge .rail,
.jauge .remplissage {
  position: absolute; left: 0; top: 9px;
  height: 4px; border-radius: 4px;
}
.jauge .rail { right: 0; background: var(--bordure); }
.jauge .remplissage { background: var(--vert); width: 0; transition: width .35s ease, background-color .35s; }
/* Même correction que sur la route-budget : l'avion se centre sur l'axe de la
   barre (top 9 px, épaisseur 4 px), au lieu de flotter au-dessus. */
.jauge .avion {
  position: absolute; top: 11px; left: 0;
  width: 26px; height: auto;
  transform: translate(-13px, -50%);
  mix-blend-mode: multiply;
  transition: left .35s ease;
}

/* --- Bandeau de synthèse ------------------------------------------------ */

/* --- Sections ----------------------------------------------------------- */

/* L'en-tête est collant : sans marge de défilement, une ancre amène sa cible
   SOUS l'en-tête et on atterrit sur un texte décapité. La règle vise donc tout
   ce qui porte une ancre, pas seulement les <section> — « Comment ça marche »
   pointe sur un <div>, et c'est exactement là que ça se voyait. */
section,
[id]:target { scroll-margin-top: 88px; }
#methode, #generateur, #destinations, #roadbook, #pdf, #pourquoi, #faq, #contact {
  scroll-margin-top: 88px;
}

/* La carte de retours a quitté le bloc PDF pour sa propre section de fin de
   page : elle reprend l'allure d'un encart autonome plutôt que d'une colonne. */
/* CARTE ENCRE, comme le panneau de méthode du hero. Blanche sur fond papier,
   elle disparaissait : un formulaire pâle sur un gris pâle ne demande rien.
   C'est pourtant la seule chose qu'on attend du visiteur — autant qu'elle se
   voie. Posée juste avant le pied de page, également encre, elle amorce la
   descente au lieu de faire un trou clair entre deux blocs. */
.carte-contact {
  background: var(--encre);
  border: 0;
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 38px);
  box-shadow: 0 24px 48px -28px rgba(20, 38, 63, 0.5);
}
.carte-contact h3 { color: var(--blanc); font-size: 22px; }
.carte-contact p { color: rgba(255, 255, 255, 0.72); }
/* Le lien de confidentialité doit rester lisible : le vert de la charte tombe
   à 4,8 de contraste sur l'encre, on reprend le vert clair du pied de page. */
.carte-contact a { color: #7FD8C9; }

.section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 90px); }
.section-grise {
  background: var(--papier);
  border-top: 1px solid var(--bordure-fine);
  border-bottom: 1px solid var(--bordure-fine);
}
.section h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.06;
}
.section h3 { font-weight: 600; font-size: clamp(18px, 1.9vw, 21px); letter-spacing: -0.02em; }

.deux-colonnes {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.deux-colonnes.centre { align-items: center; }
.deux-colonnes.egales { grid-template-columns: 1fr 1fr; }
.deux-colonnes.inverse { grid-template-columns: 0.85fr 1.15fr; }

/* Trois colonnes séparées par des filets — la section « comment ça marche ». */
.trois-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); }
.methode-etape { padding: 0 clamp(20px, 3vw, 40px); border-right: 1px solid var(--bordure-fine); }
.methode-etape:first-child { padding-left: 0; }
.methode-etape:last-child { padding-right: 0; border-right: none; }
.methode-etape .rang { font: 500 14px var(--mono); color: var(--miel); margin-bottom: 14px; }
.methode-etape h3 { margin-bottom: 10px; }
.methode-etape p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--texte-doux); }

.puces { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.puce { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.puce::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vert);
  margin-top: 9px;
  flex: none;
}

/* --- Avant / après ------------------------------------------------------ */

.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.colonne-titre { font: 500 11px var(--mono); letter-spacing: 0.13em; margin-bottom: 12px; }
.colonne-titre.avant { color: #B9C4CD; }
.colonne-titre.apres { color: var(--vert-fonce); }

.onglets-navigateur { display: flex; flex-direction: column; gap: 6px; }
.onglet-mort {
  display: flex; align-items: center; gap: 9px;
  background: var(--papier);
  border: 1px solid var(--bordure-fine);
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 12.5px;
  color: var(--texte-faible);
}
.onglet-mort::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  background: #C9D4DC;
  flex: none;
}
.onglet-mort span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.apercu {
  border: 1px solid var(--bordure);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px -18px rgba(20, 38, 63, 0.3);
}
.apercu-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: var(--encre);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.apercu-tete .format { font: 500 11px var(--mono); color: #7FD8C9; }
.apercu-corps { padding: 16px; }
.apercu-ligne {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid #F2F5F7;
}
.apercu-ligne .jour { font: 500 12px var(--mono); color: var(--vert); width: 28px; flex: none; }
.apercu-ligne .pastille { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.apercu-ligne .intitule {
  font-weight: 500; font-size: 13.5px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apercu-ligne .duree { font: 400 12px var(--mono); color: var(--texte-faible); }
.apercu-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 13px;
  font: 500 12px var(--mono);
  letter-spacing: 0.1em;
  color: var(--texte-faible);
}
.apercu-total strong { font: 500 15px var(--mono); color: var(--encre); letter-spacing: 0; }

/* --- Étapes en fil ------------------------------------------------------ */

.fil-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.fil-etapes .etape {
  font-weight: 500;
  font-size: 13.5px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 15px;
}
.fil-etapes .fleche { font: 500 12px var(--mono); color: var(--vert); }

.carte-illustration { position: relative; }
.carte-illustration img { filter: drop-shadow(0 24px 40px rgba(20, 38, 63, 0.16)); }
.carte-etiquette {
  position: absolute;
  left: 8px; bottom: 6px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 11px 15px;
  box-shadow: 0 10px 28px -14px rgba(20, 38, 63, 0.35);
}
.carte-etiquette .quoi { font: 500 10.5px var(--mono); letter-spacing: 0.11em; color: var(--texte-faible); margin-bottom: 4px; }
.carte-etiquette .detail { font-weight: 600; font-size: 14px; }

/* --- Route-budget ------------------------------------------------------- */

.route {
  border: 1px solid var(--bordure);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
}
.route-piste { position: relative; height: 96px; }
.route-piste .rail,
.route-piste .remplissage {
  position: absolute; left: 0; top: 46px;
  height: 6px; border-radius: 6px;
}
.route-piste .rail { right: 0; background: var(--bordure-fine); }
.route-piste .remplissage {
  background: var(--vert);
  width: 0;
  transition: width .35s ease, background-color .35s;
  /* Les segments sont des enfants : ils doivent etre rognes par les coins
     arrondis de la barre, sinon le premier et le dernier debordent en carre. */
  overflow: hidden;
  display: flex;
}

/* Une case par etape, large comme ce qu'elle coute.
   ⚠️ TOUTES DE LA MEME TEINTE. Une premiere version alternait un voile clair
   « pour donner le rythme » : deux tons sans signification, donc deux tons que
   le lecteur cherche a interpreter et n'explique pas. Ce qui separe les
   troncons est une coupure blanche, et rien d'autre — la difference qu'on voit
   doit etre une difference qui veut dire quelque chose. */
.route-piste .segment {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  box-shadow: inset -2px 0 0 var(--blanc);
}
.route-piste .segment:last-child { box-shadow: none; }
/* Les étapes n'ont pas de fond propre : elles laissent voir celui de la barre,
   qui passe au rouge quand le budget est dépassé. Les trajets, eux, gardent
   l'ambre dans tous les cas — c'est une NATURE de dépense, pas un état. */
.route-piste .segment.trajet { background: var(--miel); }

/* --- La méthode, dans la colonne droite du hero -------------------------- */

/* ⚠️ TROIS LIGNES, PAS UNE SECTION.
   « Comment ça marche » occupait un écran entier — surtitre, titre, chapeau et
   maquette d'onglets — pour dire ce que ces trois lignes disent. Il vit
   maintenant EN FACE de la promesse : on lit ce qu'on obtient et comment d'un
   seul regard, et le formulaire remonte d'autant.
   L'aperçu PDF qui occupait cette colonne est parti : le vrai roadbook est
   700 px plus bas, une miniature de lui-même n'ajoutait rien. */
/* PANNEAU ENCRE. Sur fond blanc, trois lignes de texte ne pesaient rien face à
   un h1 de 60 px : la colonne droite paraissait vide et le hero penchait. Le
   bloc reprend la couleur de la carte PDF qui occupait cette place, ce qui
   rétablit l'équilibre sans ajouter d'image à charger. */
.panneau-methode {
  align-self: center;
  background: var(--encre);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 38px);
  box-shadow: 0 24px 48px -28px rgba(20, 38, 63, 0.5);
}
/* Le surtitre passe au vert : sur l'encre, le vert de la charte ressort là où
   le gris des surtitres clairs disparaîtrait. */
/* ⚠️ Sélecteur `.hero .surtitre-clair` : le panneau vit dans le hero, où
   `.hero p { margin: 24px 0 0 }` s'applique à tout paragraphe. À (0,1,1) il
   bat `.surtitre-clair` à (0,1,0) et imposait une marge basse NULLE — le
   surtitre restait collé au titre quel que soit le chiffre écrit ici. Deuxième
   fois que ce piège se referme sur ce hero ; le premier était `.hero
   .conteneur` contre `.bande-methode`. */
.hero .surtitre-clair {
  font: 600 11px var(--corps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vert);
  /* 18 px : le titre a une interligne de 1,2, ses hautes lettres montent donc
     presque jusqu'ici. Même correction que sur le surtitre du hero. */
  margin: 0 0 18px;
}
/* LA phrase — celle qui dit ce qu'on arrête de faire. Elle titrait une section
   entière ; elle coiffe maintenant les trois pas qui la règlent, ce qui met
   enfin le problème et sa réponse au même endroit. */
.titre-panneau {
  color: var(--blanc);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.pas-methode {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pas-methode li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  /* `center` et non `baseline` : la pastille est un bloc de 34 px, une ligne de
     base la ferait flotter au-dessus du texte qu'elle numérote. */
  align-items: center;
  padding: 20px 0;
  /* Filet clair et non `--bordure-fine` : sur l'encre, une bordure claire
     opaque ferait une barre, un blanc translucide fait une couture. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Le premier pas garde son padding : il suit le titre, pas le bord du panneau. */
.pas-methode li:first-child { padding-top: 18px; }
.pas-methode li:last-child { padding-bottom: 0; border-bottom: 0; }

/* Pastille ronde, comme le repère numéroté d'une étape d'itinéraire : c'est le
   même objet — un rang dans un parcours — donc la même forme. En petit chiffre
   ambre posé dans le vide, il se lisait comme une note de bas de page. */
.pas-methode .rang {
  grid-row: 1 / span 2;
  align-self: start;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vert);
  color: var(--blanc);
  font: 500 12.5px var(--mono);
  /* Le chiffre est optiquement plus haut que le centre géométrique dans cette
     fonte : 1 px de compensation, sinon la pastille paraît mal remplie. */
  padding-top: 1px;
}
.pas-methode .quoi {
  font-weight: 600;
  font-size: 16.5px;
  color: var(--blanc);
}
/* L'« avant », en une ligne sous l'« après ». Le contraste porte tout
   l'argument : il n'a pas besoin d'une image de 250 px pour se faire entendre. */
.pas-methode .remplace {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* --- Légende de la jauge ------------------------------------------------ */

.legende-route {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 14px;
}
.cle-legende {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 12.5px/1.4 var(--texte-police, inherit);
  color: var(--texte-tiers);
}
.cle-legende .pastille {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.cle-legende .pastille.etape  { background: var(--vert); }
.cle-legende .pastille.trajet { background: var(--miel); }
.cle-legende .pastille.marge  { background: var(--bordure-fine); }
/* L'avion se cale sur l'AXE de la barre (top 46 px, épaisseur 6 px), pas
   au-dessus : il flottait de 26 px et semblait décroché de la jauge. */
.route-piste .avion {
  position: absolute; top: 49px; left: 0;
  width: 44px; height: auto;
  transform: translate(-22px, -50%);
  mix-blend-mode: multiply;
  transition: left .35s ease;
}
/* ⚠️ Ancrée sur la BARRE, pas sur le haut ni sur le bas de la piste.
   La colonne porte un nom, un montant, un point et une tige : calée par le
   haut, sa hauteur variable ferait finir la tige n'importe où. Calée par le
   bas avec une valeur en dur, elle se décale dès que la piste change de
   hauteur — et elle change, elle passe de 96 à 108 px sur écran étroit, ce qui
   faisait plonger la tige de 12 px à travers la barre.
   `calc(100% - 46px)` reprend la seule constante qui tienne : la barre est à
   46 px du haut, quoi qu'il arrive. */
.epingle {
  position: absolute;
  bottom: calc(100% - 46px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: left .35s ease;
}
.epingle .nom { font: 500 12px var(--mono); white-space: nowrap; }

/* Le montant de l'étape, sous son nom. C'est lui qui donne son sens à la
   longueur du tronçon juste en dessous : sans chiffre, on voyait des largeurs
   différentes sans savoir de quoi elles parlaient. */
.epingle .cout-etape {
  font: 500 11px var(--mono);
  color: var(--texte-faible);
  white-space: nowrap;
  margin-top: -2px;
}
.epingle .point {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--encre);
}

/* Tige qui descend jusqu'à la barre. L'étiquette flottait à 13 px au-dessus :
   elle se lisait comme un repère posé sur une frontière, alors qu'elle
   désigne le tronçon CENTRÉ sous elle. */
.epingle .tige {
  width: 1px;
  height: 13px;
  background: var(--bordure);
  margin-top: -1px;
}

.route-bilan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--bordure-fine);
}
.route-bilan .montant {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.route-bilan .contexte { font-size: 15px; color: var(--texte-faible); }
.route-bilan .badge {
  font: 500 13px var(--mono);
  border-radius: 999px;
  padding: 7px 14px;
}

.ventilation {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.poste .barre { height: 5px; border-radius: 5px; margin-bottom: 12px; min-width: 14px; transition: width .35s ease; }
.poste .libelle {
  font: 500 11px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 5px;
}
.poste .valeur { font: 500 19px var(--mono); }
.poste .part { font: 400 12px var(--mono); color: var(--texte-faible); margin-top: 2px; }

/* --- Roadbook ----------------------------------------------------------- */

.roadbook-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.roadbook-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Onglets « Jour par jour / Budget ventilé » — repris de la direction B. */
.onglets {
  display: inline-flex;
  border: 1px solid var(--encre);
  border-radius: 999px;
  overflow: hidden;
}
.onglets button {
  font: 600 13.5px var(--corps);
  border: none;
  padding: 11px 18px;
  cursor: pointer;
  background: transparent;
  color: #5A6B7D;
  transition: background-color .16s, color .16s;
}
.onglets button[aria-selected="true"] { background: var(--encre); color: #fff; }

.blocs { display: flex; flex-direction: column; gap: 0; }

.bloc-etape {
  display: grid;
  grid-template-columns: 120px 1fr 260px;
  gap: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
  background: var(--blanc);
}
/* Pastille ronde verte, comme le repère d'une étape dans « Comment ça marche » :
   c'est le même objet — un rang dans un parcours — donc la même forme. En petit
   chiffre ambre posé dans le vide, il se lisait comme une note de bas de page. */
.bloc-etape .rang {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vert);
  color: var(--blanc);
  font: 500 12.5px var(--mono);
  padding-top: 1px;   /* le chiffre est optiquement haut dans cette fonte */
  margin-bottom: 10px;
}
.bloc-etape .jours { font: 500 15px var(--mono); margin-bottom: 4px; }
/* L'avion entre les deux jours : plus petit que dans le surtitre du hero, et
   sans la marge latérale de celui-ci — ici il sépare deux repères courts. */
.bloc-etape .jours .avion-signe { width: 1em; height: 1em; margin: 0 0.34em; }
.bloc-etape .nuits { font-size: 13px; color: var(--texte-faible); }
.bloc-etape h3 {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.bloc-etape .accroche { font-size: 14.5px; color: var(--texte-tiers); margin-bottom: 16px; }

/* Une activité, c'est d'abord un lieu : la photo mérite d'être regardable, pas
   réduite à une pastille. La place existe dans la colonne centrale du bloc. */
.activite {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #F2F5F7;
}

/* Activités repliées : `display:none` et non une hauteur nulle, pour que les
   vignettes en `loading="lazy"` ne soient pas téléchargées tant que personne
   n'a demandé à les voir. Une étape en cache trois. */
.activite.repliee { display: none; }
.activite.repliee.ouverte { display: flex; }

.deplier-activites {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid #F2F5F7;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 600 13px var(--texte-police, inherit);
  color: var(--vert-fonce);
}
.deplier-activites:hover { color: var(--encre); }
.activite .marqueur {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: none;
  background: var(--miel);
  /* Même emprise qu'une vignette : les lignes restent alignées avec ou sans photo. */
  margin: 0 27px;
}
.activite.gratuite .marqueur { background: var(--vert-vif); }

.activite .miniature {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--bordure-fine);
}

.activite .intitule { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.activite .nom { font-weight: 500; font-size: 15.5px; line-height: 1.35; }
.activite .etiquette { font: 400 12px var(--mono); color: var(--texte-faible); }
.activite .cout { font: 500 15px var(--mono); min-width: 66px; text-align: right; }
.activite.gratuite .cout { color: var(--vert); }

@media (max-width: 640px) {
  .activite .miniature { width: 52px; height: 52px; }
  .activite .marqueur { margin: 0 21px; }
}

.encart-cout {
  background: var(--papier);
  border: 1px solid var(--bordure-fine);
  border-radius: 12px;
  padding: 16px;
}
.encart-cout .quoi { font: 500 10.5px var(--mono); letter-spacing: 0.11em; color: var(--texte-faible); margin-bottom: 10px; }
.encart-cout .montant {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  margin-bottom: 2px;
}
/* Sans cette précision, « 285 € » est ambigu dès qu'on voyage à plusieurs. */
.encart-cout .par-qui {
  font: 400 11.5px var(--mono);
  color: var(--texte-faible);
  margin-bottom: 12px;
}

.regle-montants {
  max-width: 44em;
  margin: 0 0 32px;
  padding: 12px 16px;
  background: var(--papier);
  border: 1px solid var(--bordure-fine);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-doux);
}

.tableau-budget caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--texte-faible);
}
.encart-cout .detail { font-size: 13px; line-height: 1.55; color: var(--texte-tiers); }

/* Photo réelle d'une étape, dans la colonne de droite du bloc. */
.illustration {
  margin: 12px 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bordure-fine);
  position: relative;
  line-height: 0;
}
.illustration img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.illustration figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5px 9px;
  font: 400 10.5px/1.3 var(--mono);
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(transparent, rgba(20, 38, 63, 0.75));
  line-height: 1.3;
}

.carte-destination .visuel.avec-image { padding: 0; }
.carte-destination .visuel img { width: 100%; height: 180px; object-fit: cover; }

.photo-attente {
  margin-top: 12px;
  min-height: 74px;
  border-radius: 12px;
  border: 1px solid var(--bordure-fine);
  background: repeating-linear-gradient(135deg, #F7F9FA 0 8px, #EFF4F6 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 11px var(--mono);
  color: var(--texte-faible);
  text-align: center;
  padding: 8px;
}

.bloc-trajet {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px clamp(18px, 2.2vw, 28px);
  margin: 2px 0;
}
.bloc-trajet .tige { width: 1px; height: 26px; background: #D8E1E7; margin-left: 38px; flex: none; }
.bloc-trajet .quoi { font: 500 12px var(--mono); letter-spacing: 0.1em; color: var(--vert-fonce); }
.bloc-trajet .segment { font-weight: 500; font-size: 15px; }
.bloc-trajet .mode { font-size: 14px; color: var(--texte-tiers); }
.bloc-trajet .filet { flex: 1; height: 1px; background: var(--bordure-fine); min-width: 20px; }
.bloc-trajet .cout { font: 500 14px var(--mono); }

/* --- Vue « budget ventilé » --------------------------------------------- */

.tableau-budget {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tableau-budget th {
  text-align: right;
  font: 500 10.5px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 0 0 12px 14px;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}
.tableau-budget th:first-child,
.tableau-budget td:first-child { text-align: left; padding-left: 0; }
.tableau-budget td {
  text-align: right;
  padding: 14px 0 14px 14px;
  border-bottom: 1px solid var(--bordure-fine);
  font: 500 14.5px var(--mono);
}
.tableau-budget td:first-child { font: 600 15px var(--corps); }
.tableau-budget td .sous { display: block; font: 400 12px var(--mono); color: var(--texte-faible); }
.tableau-budget tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--encre);
  font-weight: 600;
  font-size: 16px;
  padding-top: 16px;
}
.tableau-budget .zero { color: var(--texte-faible); }

.enveloppe-tableau { overflow-x: auto; }

.rappel-budget {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--papier);
  border: 1px solid var(--bordure-fine);
  font-size: 14.5px;
  color: var(--texte-doux);
}
/* Les montants sont en DM Mono, le reste en Figtree : a 17 px contre 14,5 px
   ils depassaient en hauteur et cassaient la ligne de base. Meme corps, et une
   interligne large pour que le melange des deux polices reste calme. */
.rappel-budget { line-height: 1.8; }
.rappel-budget strong { font: 500 15px var(--mono); color: var(--encre); }

/* --- « À savoir avant de partir » --------------------------------------- */

/* ⚠️ FOND PÂLE, ET C'EST UN CHOIX CONTRAINT. Essayé en vert de la charte :
   sur ce vert, UNE SEULE couleur de texte passe le seuil de contraste —
   l'encre à 4,84. Le blanc tombe à 3,15, l'encre translucide aussi, le vert
   foncé à 1,9. Tout le bloc devenait donc monochrome, et ce panneau vit de sa
   hiérarchie : intitulé en vert foncé, valeur en encre, détail en gris.
   Trois niveaux qui ne tiennent que sur un fond clair.
   La couleur va aux blocs qui portent UNE idée ; celui-ci en porte cinq. */
/* ⚠️ FOND PÂLE, ET C'EST UN CHOIX CONTRAINT. Essayé en vert de la charte :
   sur ce vert, UNE SEULE couleur de texte passe le seuil de contraste —
   l'encre à 4,84. Le blanc tombe à 3,15, l'encre translucide aussi, le vert
   foncé à 1,9. Tout le bloc devenait monochrome, et il vit de sa hiérarchie :
   intitulé en vert foncé, valeur en encre, détail en gris. Trois niveaux qui
   ne tiennent que sur un fond clair.
   La couleur va aux blocs qui portent UNE idée ; celui-ci en porte cinq. */
.a-savoir {
  margin-top: 28px;
  padding: 24px 26px 26px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--papier);
}
.a-savoir-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.a-savoir h3 {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.a-savoir-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 26px;
}
.a-savoir-carte .titre {
  font: 500 10.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 6px;
}
.a-savoir-carte .valeur { font-weight: 500; font-size: 15px; line-height: 1.45; }
.a-savoir-carte .detail {
  margin-top: 3px;
  font: 400 12.5px var(--mono);
  color: var(--texte-faible);
  line-height: 1.45;
}

/* --- Cartes destinations ------------------------------------------------ */

.grille-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.carte-destination {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carte-destination .visuel {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 11.5px var(--mono);
  color: #7C9A93;
  background: repeating-linear-gradient(135deg, #F1F8F6 0 10px, #E6F2EF 10px 20px);
}
.carte-destination .corps { padding: 20px 22px 22px; }
.carte-destination .titre-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.carte-destination h3 { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.carte-destination .compte { font: 500 12px var(--mono); color: var(--texte-faible); }
.carte-destination .resume { font-size: 14.5px; line-height: 1.55; color: var(--texte-tiers); margin-bottom: 14px; }
.carte-destination .badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carte-destination h3 a { color: inherit; text-decoration: none; }
.carte-destination h3 a:hover { color: var(--vert-fonce); }
.carte-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bordure-fine);
}
.btn.petit { font-size: 13.5px; padding: 9px 18px; }
.badge-vert, .badge-gris {
  font: 500 11px var(--mono);
  border-radius: 999px;
  padding: 5px 10px;
}
.badge-vert { color: var(--vert-fonce); background: var(--vert-pale); }
.badge-gris { color: var(--texte-faible); background: #F2F5F7; }

/* --- Liste « pourquoi c'est gratuit » ----------------------------------- */

.liste-principes { border-top: 1px solid var(--bordure-fine); }
.principe {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bordure-fine);
}
.principe .cle { font: 500 12px var(--mono); color: var(--miel); width: 62px; flex: none; }
.principe .texte { font-size: 15.5px; line-height: 1.55; }

/* --- Encart PDF --------------------------------------------------------- */

/* ⚠️ FOND ENCRE — possible SEULEMENT depuis que l'illustration est détourée.
   Tant que `roadbook-map.webp` portait un fond blanc opaque, un panneau sombre
   ici aurait dessiné un grand rectangle blanc autour de la carte : exactement
   le défaut du pictogramme dans le pied de page. Le détourage lève le blocage.
   Le bloc rejoint donc la règle du site : encre = ce qu'on attend de toi (la
   méthode, le PDF, l'avis), blanc = ce qu'on te montre. */
.encart-pdf {
  background: var(--encre);
  border: 0;
  box-shadow: 0 28px 56px -32px rgba(20, 38, 63, 0.55);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.encart-pdf h2 { font-size: clamp(26px, 3.2vw, 36px); color: var(--blanc); }
.encart-pdf > div > p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.74);
  max-width: 32em;
  line-height: 1.7;
}
/* Le surtitre gris disparaîtrait : il passe au vert de la charte, comme dans
   le panneau du hero. */
.encart-pdf .surtitre { color: var(--vert); }

/* Le fil des étapes : pastilles claires translucides plutôt que blanches, qui
   feraient des taches dures sur l'encre. */
.encart-pdf .fil-etapes .etape {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--blanc);
}

/* ⚠️ LE BOUTON PASSE EN VERT. En `btn-encre` il était encre sur fond pâle —
   à peine visible — et il serait maintenant invisible sur l'encre. C'est
   l'action principale du site : elle doit être la chose la plus lumineuse du
   bloc. */
.encart-pdf .btn-encre {
  background: var(--vert);
  color: var(--blanc);
  border-color: var(--vert);
}
.encart-pdf .btn-encre:hover {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
}

/* L'étiquette flottante sur la carte reste blanche : elle est POSÉE sur
   l'illustration, pas sur le fond du panneau. */

.pdf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.pdf-sans { font-size: 13.5px; line-height: 1.5; color: #6B8B84; max-width: 20em; }
.encart-pdf .pdf-sans { color: rgba(255, 255, 255, 0.6); }

/* L'inscription est volontairement secondaire : le PDF ne se paie pas en
   adresse email. La finalité et le lien de confidentialité sont ici, au point
   de collecte, et pas relégués au pied de page. */
.pdf-lettre {
  background: var(--blanc);
  border: 1px solid #D6EAE5;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 26px);
}
.rubrique-lettre {
  font: 600 11px var(--corps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B8B84;
  margin-bottom: 14px;
}
/* Sur l'encre, le gris-vert du bloc PDF disparaît : on passe au vert vif. */
.carte-contact .rubrique-lettre { color: var(--vert); }
.pdf-lettre h3 { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; margin-bottom: 8px; }
.pdf-lettre p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #3F5568; }
.pdf-lettre .note-email a { color: #4E7F76; }
/* Formulaire de retour : un message, et l'email seulement si on veut une
   réponse. Pas de liste de diffusion, donc pas de double opt-in ni de
   désinscription à gérer. */
.formulaire-avis textarea {
  width: 100%;
  font: 400 15px var(--corps);
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid #C9E0DA;
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
  resize: vertical;
  min-height: 76px;
  line-height: 1.55;
}
.formulaire-avis textarea:focus { border-color: var(--vert); }

/* Champs sur fond encre : un blanc pur ferait deux rectangles éblouissants au
   milieu du panneau. Un voile clair suffit, et le texte saisi reste sombre —
   on écrit dans un champ, pas sur une ardoise. */
.carte-contact .formulaire-avis textarea,
.carte-contact .ligne-avis input {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.28);
}
.carte-contact .formulaire-avis textarea:focus,
.carte-contact .ligne-avis input:focus {
  background: var(--blanc);
  border-color: var(--vert);
}
/* Le bouton passe en vert plein : en contour blanc il se lisait comme une
   action secondaire, alors que c'est la seule de la section. */
.carte-contact .btn-contour {
  background: var(--vert);
  color: var(--blanc);
  border-color: var(--vert);
}
.carte-contact .btn-contour:hover {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--blanc);
}
/* Mention sous le formulaire. */
.carte-contact .mention,
.carte-contact .precision { color: rgba(255, 255, 255, 0.6); }
/* Le bloc contact est un simple lien mailto tant que la Cloudflare Function
   n'existe pas. Les règles `.formulaire-avis`, `.ligne-avis` et `.piege`
   ci-dessous sont DORMANTES, pas mortes : le formulaire revient avec elle, et
   les supprimer pour les réécrire dans trois semaines n'aiderait personne. */
.ligne-avis-mailto { margin-top: 16px; }
.ligne-avis-mailto .btn { display: inline-block; }

.ligne-avis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ligne-avis input {
  flex: 1;
  min-width: 190px;
  font: 400 15px var(--corps);
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid #C9E0DA;
  border-radius: 999px;
  padding: 13px 18px;
  outline: none;
}
.ligne-avis input:focus { border-color: var(--vert); }

/* Champ piège : hors écran plutôt que display:none, que certains robots
   savent détecter. Invisible pour un humain, invisible aux lecteurs d'écran. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire-email { display: flex; gap: 10px; flex-wrap: wrap; }
.formulaire-email input {
  flex: 1;
  min-width: 200px;
  font: 400 15.5px var(--corps);
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid #C9E0DA;
  border-radius: 999px;
  padding: 15px 20px;
  outline: none;
}
.formulaire-email input:focus { border-color: var(--vert); }
.note-email { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #6B8B84; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 56px; }
.faq h3 { font-weight: 600; font-size: 19px; letter-spacing: -0.015em; margin-bottom: 8px; }
.faq p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--texte-doux); }

/* ==========================================================================
   Pages destination — statiques, pré-rendues, faites pour être indexées.
   ========================================================================== */

.ariane-site {
  border-bottom: 1px solid var(--bordure-fine);
  background: var(--papier);
  font: 500 13px var(--corps);
  color: var(--texte-faible);
}
.ariane-site .conteneur { padding-top: 12px; padding-bottom: 12px; }
.ariane-site a { color: var(--texte-faible); text-decoration: none; }
.ariane-site a:hover { color: var(--vert-fonce); }
.ariane-site span { margin: 0 6px; }
.ariane-site [aria-current] { color: var(--encre); font-weight: 600; }

.titre-destination {
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.04;
  margin: 0 0 20px;
  text-wrap: balance;
}

.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 32px 0;
  padding: 22px 0;
  border-top: 1px solid var(--bordure-fine);
  border-bottom: 1px solid var(--bordure-fine);
}
.repere .valeur {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.repere .libelle { font-size: 13.5px; color: var(--texte-faible); margin-top: 4px; }

.rappel-vols {
  max-width: 46em;
  padding: 14px 18px;
  border-left: 3px solid var(--miel);
  background: #FEF9F0;
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texte-doux);
}

/* --- Le parcours -------------------------------------------------------- */

.liste-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }

.etape-fiche {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.etape-visuel { background: var(--papier); }
.etape-visuel img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.etape-corps { padding: 24px 26px 26px 0; }
.etape-fiche h3 {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 25px);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.etape-accroche { margin: 0 0 18px; color: var(--texte-tiers); font-size: 15px; }
.etape-corps h4 {
  font: 500 10.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin: 22px 0 10px;
}

.tableau-styles { width: 100%; border-collapse: collapse; }
.tableau-styles th {
  text-align: left;
  font: 500 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--bordure-fine);
}
.tableau-styles td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--bordure-fine);
  font-size: 14.5px;
  vertical-align: top;
}
.tableau-styles tr:last-child td { border-bottom: none; }
.tableau-styles .detail-cout {
  display: block;
  font: 400 12px var(--mono);
  color: var(--texte-faible);
  margin-top: 2px;
}

.liste-activites, .liste-hebergements { list-style: none; margin: 0; padding: 0; }
.liste-activites li, .liste-hebergements li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid #F2F5F7;
  font-size: 15px;
}
.liste-activites .nom, .liste-hebergements .nom { flex: 1; min-width: 12em; font-weight: 500; }
.liste-activites .prix, .liste-hebergements .prix { font: 500 14px var(--mono); }
.liste-activites .prix.gratuit { color: var(--vert); }
.liste-activites .duree, .liste-hebergements .genre {
  font: 400 12px var(--mono);
  color: var(--texte-faible);
}

/* --- Trajets et climat -------------------------------------------------- */

.tableau-trajets, .tableau-climat-public {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tableau-trajets th, .tableau-climat-public th {
  text-align: left;
  font: 500 10.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}
.tableau-trajets td, .tableau-climat-public td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--bordure-fine);
  font-size: 14.5px;
}
.tableau-climat-public { min-width: 700px; }
.tableau-climat-public th:not(:first-child),
.tableau-climat-public td { text-align: center; padding-right: 0; }
.tableau-climat-public th[scope="row"] {
  text-align: left;
  text-transform: none;
  font: 500 13px var(--corps);
  color: var(--texte-doux);
  letter-spacing: 0;
  border-bottom: 1px solid var(--bordure-fine);
  padding: 12px 14px 12px 0;
}
.tableau-climat-public td.humide { background: #EAF2FA; color: #2E5E8C; font-weight: 600; }

.source-donnees {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texte-faible);
  max-width: 46em;
}

/* --- Infos pratiques ---------------------------------------------------- */

.grille-pratique {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 32px;
  margin-top: 28px;
}
.bloc-pratique { scroll-margin-top: 90px; }
.bloc-pratique h3 {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.bloc-pratique p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--texte-doux); }

.liste-destinations-404 { list-style: none; margin: 24px 0; padding: 0; font-size: 17px; }
.liste-destinations-404 li { padding: 8px 0; border-bottom: 1px solid var(--bordure-fine); }

@media (max-width: 900px) {
  .etape-fiche { grid-template-columns: 1fr; }
  .etape-visuel img { min-height: 200px; max-height: 260px; }
  .etape-corps { padding: 0 22px 24px; }
}

/* --- Pied de page ------------------------------------------------------- */

.pied { background: var(--encre); color: #fff; padding-top: 52px; padding-bottom: 36px; }
.pied-grille {
  display: grid;
  /* ⚠️ La colonne des destinations est DOUBLE : elle porte dix-sept liens en
     multi-colonnes, les autres en portent quatre à six. A largeur egale elle
     n'avait que 234 px, soit la place d'UNE colonne — la regle `columns`
     s'appliquait sans rien changer. */
  grid-template-columns: 1.3fr 2.2fr 1fr 1.1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.pied img { height: 42px; width: auto; margin-bottom: 14px; }
/* Le nom REMPLACE le pictogramme, il doit donc en porter le poids : 34 px au
   lieu de 19, et les deux couleurs du logotype. Le vert de la charte est trop
   sombre sur l'encre (contraste 4,8) — on prend le vert clair déjà utilisé par
   les rubriques du pied de page, qui monte au-dessus de 9. */
.pied .nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
}
.pied .nom span { color: #7FD8C9; }
.pied .baseline { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 22em; }
.pied .rubrique { font: 500 11px var(--mono); letter-spacing: 0.13em; color: #7FD8C9; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pied a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 14px; }
.pied a:hover { color: #fff; }
.pied .delai { color: rgba(255, 255, 255, 0.55); font-size: 14px; }
/* Crédits photo — obligation de licence, pas décoration.

   Les images de Wikimedia Commons sont sous CC BY / CC BY-SA : nommer l'auteur
   est une condition d'usage. Le bloc est donc DISCRET mais LISIBLE — pas de
   gris à 30 % d'opacité qui rendrait l'attribution illisible, ce qui reviendrait
   à ne pas l'avoir faite. En colonnes, parce qu'une page de destination en
   compte une quinzaine et qu'une liste verticale ferait quatre écrans. */
.credits-photos {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font: 400 12px var(--corps);
  color: rgba(255, 255, 255, 0.62);
}
.credits-titre {
  display: block;
  margin-bottom: 8px;
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.credits-photos ul {
  list-style: none;
  /* ⚠️ `display: block` OBLIGATOIRE, et ce n'est pas une redondance.
     `.pied ul` est en `display: flex` : un conteneur flex IGNORE purement et
     simplement `columns`. Sans cette ligne, la règle passait le `column-count`
     à 3 dans l'inspecteur, et la liste s'affichait quand même sur une seule
     colonne de 920 px de haut. Deuxième fois que ce pied de page me le fait. */
  display: block;
  columns: 3 190px;
  column-gap: 26px;
  margin: 0;
  padding: 0;
}
.credits-photos li {
  break-inside: avoid;
  margin-bottom: 3px;
}
.credits-photos .banque { color: rgba(255, 255, 255, 0.4); }

@media (max-width: 640px) {
  .credits-photos ul { columns: 1; }
}

.pied-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 20px;
  font: 400 12.5px var(--mono);
  color: rgba(255, 255, 255, 0.45);
}

/* Bandeau honnête : ces données ne sont pas encore validées. */
.avis-demo {
  background: #FEF3E0;
  border-bottom: 1px solid #F4DFBB;
  color: #8A5A0B;
  font: 500 12.5px var(--corps);
  text-align: center;
  padding: 9px 16px;
}

/* --- Repli responsive --------------------------------------------------- */

@media (max-width: 1080px) {
  .bloc-etape { grid-template-columns: 104px 1fr; }
  .bloc-etape .colonne-cout { grid-column: 1 / -1; }
  .encart-cout { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
  .encart-cout .montant { margin-bottom: 0; }
  .encart-cout .quoi { grid-column: 1 / -1; margin-bottom: 0; }
  .ventilation { grid-template-columns: repeat(3, 1fr); }
}

/* Entre 1080 et 1240 px, sept entrees tiennent encore mais serrees : on
   reduit avant de basculer, plutot que de laisser le menu deborder. */
@media (max-width: 1240px) {
  .navigation { gap: 2px; font-size: 13.5px; }
  .navigation a { padding: 7px 10px; }
  .entete .conteneur { gap: 14px; }
}

/* Bascule sur le burger a 1080 px et non plus a 900 : avec sept entrees, le
   menu depassait bien avant. */
@media (max-width: 1080px) {
  .navigation { display: none; }
  .burger { display: flex; }
  .entete .conteneur { height: 64px; }

  /* ⚠️ LE BOUTON D'APPEL QUITTE L'ENTÊTE SOUS 480 px.
     Il fait 191 px à lui seul. Avec le logo (126), le burger (36), les
     espacements et les marges, il faut 419 px minimum — donc ça passe sur un
     iPhone Pro Max (430) et ça DÉBORDE sur la plupart des téléphones : à
     375 px, l'entête sortait de son conteneur de 25 px et le burger était
     coupé par le bord de l'écran.

     On ne perd rien en le retirant : le burger contient « Ton voyage », qui
     mène au même ancrage, et le hero affiche un « Composer mon roadbook » en
     vert pleine largeur trois centimètres plus bas. */
  @media (max-width: 480px) {
    .entete-actions .btn { display: none; }
  }

  .navigation.ouverte {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    padding: 8px var(--marge) 16px;
    box-shadow: 0 18px 30px -22px rgba(20, 38, 63, 0.4);
  }
  .navigation.ouverte a { padding: 13px 0; border-bottom: 1px solid var(--bordure-fine); }

  .hero .conteneur { grid-template-columns: 1fr; }
  .deux-colonnes,
  .deux-colonnes.egales,
  .deux-colonnes.inverse { grid-template-columns: 1fr; }
  .trois-colonnes { grid-template-columns: 1fr; gap: 28px; }
  .methode-etape {
    padding: 0 0 24px;
    border-right: none;
    border-bottom: 1px solid var(--bordure-fine);
  }
  .methode-etape:last-child { padding-bottom: 0; border-bottom: none; }
  .avant-apres { grid-template-columns: 1fr; }
  .encart-pdf { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  }

@media (max-width: 640px) {
  .arguments { grid-template-columns: 1fr; gap: 20px; }
  .styles { grid-template-columns: 1fr; }
  .style .sous { display: inline; margin-left: 6px; }
  .ventilation { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .bloc-etape { grid-template-columns: 1fr; }
  /* La pastille est ronde : elle se centre sur la ligne, elle ne s'aligne pas
     sur une ligne de base qu'elle n'a pas. */
  .bloc-etape .colonne-repere { display: flex; align-items: center; gap: 10px; }
  .bloc-etape .rang { margin-bottom: 0; flex: none; }
  .bloc-etape .jours { margin-bottom: 0; }

  .bloc-trajet { gap: 10px; padding-left: 4px; padding-right: 4px; }
  .bloc-trajet .tige { display: none; }
  .bloc-trajet .filet { display: none; }
  .bloc-trajet .segment { width: 100%; }

  .route-piste { height: 108px; }
  .epingle .nom { font-size: 10.5px; }
  .pied-grille { grid-template-columns: 1fr; gap: 26px; }
}

/* ⚠️ Le masquage des étiquettes ne se fait PLUS par media query.
   La règle précédente ne cachait les intermédiaires qu'en dessous de 520 px,
   alors que « Salvador de Bahia / Chapada Diamantina / Morro de São Paulo » se
   chevauchaient sur un écran de 1 450 px : ce qui compte est le nombre
   d'étapes et la longueur des noms, pas la largeur de la fenêtre. C'est
   `masquerEtiquettesQuiSeChevauchent()` qui mesure et pose `.sans-nom`. */
.epingle.sans-nom .nom,
.epingle.sans-nom .cout-etape { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* --- Impression : le roadbook seul, lisible en noir et blanc ------------ */

@media print {
  .entete, .hero, .section-grise, .encart-pdf,
  .pied, .roadbook-outils, .avis-demo, .btn { display: none !important; }

  body { font-size: 11pt; }
  .section { padding: 0 !important; }
  .conteneur { max-width: none; padding: 0; }

  .bloc-etape {
    break-inside: avoid;
    border-color: #999;
    margin-bottom: 8pt;
  }
  .photo-attente { display: none; }
  .route { break-inside: avoid; }
}

/* Description d'activite : une phrase, seulement quand le nom ne suffit pas. */
.activite .intitule .description {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte-tiers);
  margin-top: 3px;
}

/* --- Tiroir de réglages -------------------------------------------------- */

/* Onglet accroché au bord droit, visible uniquement quand le formulaire est
   sorti de l'écran : les réglages ne servent à rien si on ne peut pas les
   atteindre depuis le reste de la page. */
.onglet-reglages {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  border: none;
  border-radius: 12px 0 0 12px;
  background: var(--encre);
  color: #fff;
  font: 600 13px var(--corps);
  padding: 16px 10px;
  cursor: pointer;
  box-shadow: -6px 0 24px -12px rgba(20, 38, 63, 0.5);
  writing-mode: vertical-rl;
  letter-spacing: 0.02em;
}
.onglet-reglages:hover { background: var(--vert); }

.tiroir {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  width: min(420px, 92vw);
  height: 100dvh;
  background: var(--blanc);
  border-left: 1px solid var(--bordure);
  box-shadow: -18px 0 50px -28px rgba(20, 38, 63, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s ease;
}
.tiroir.ouvert { transform: translateX(0); }

.tiroir-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bordure-fine);
  font-family: var(--titre);
  font-size: 18px;
}
.tiroir-fermer {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--texte-tiers);
  cursor: pointer;
  padding: 0 4px;
}
.tiroir-fermer:hover { color: var(--encre); }

.tiroir-corps { overflow-y: auto; padding: 18px 20px 28px; }

/* Dans le tiroir, le formulaire reprend UNE colonne : il n'a plus la largeur
   de la page, et l'empiler est plus lisible que de le comprimer. */
.tiroir-corps .generateur-large {
  grid-template-columns: 1fr;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tiroir-corps .generateur-large .champ { height: auto; }
.tiroir-corps .generateur-tete { display: none; }

.voile-tiroir {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(20, 38, 63, 0.32);
  opacity: 0;
  transition: opacity .28s ease;
}
.voile-tiroir.ouvert { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tiroir, .voile-tiroir { transition: none; }
}

/* L'onglet se signale À SON APPARITION, puis se tait. Un clignotement continu
   attirerait l'œil en permanence, deviendrait pénible au bout de trente
   secondes, et pose un vrai problème d'accessibilité — c'est un déclencheur
   connu pour certaines migraines et épilepsies photosensibles. Trois pulsations
   suffisent à se faire remarquer. */
@keyframes pulse-onglet {
  0%, 100% { transform: translateY(-50%) translateX(0); box-shadow: -6px 0 24px -12px rgba(20, 38, 63, 0.5); }
  35%      { transform: translateY(-50%) translateX(-7px); box-shadow: -10px 0 30px -8px rgba(15, 163, 145, 0.85); }
}

.onglet-reglages.signale {
  animation: pulse-onglet 1.15s ease-in-out 3;
}

/* Liseré vert permanent mais immobile : il garde l'onglet repérable une fois
   les pulsations terminées. */
.onglet-reglages { border-left: 3px solid var(--vert); }

@media (prefers-reduced-motion: reduce) {
  .onglet-reglages.signale { animation: none; }
}

/* Aéroports d'arrivée et de retour, sous le titre du roadbook. */
.roadbook-vols {
  margin: 8px 0 0;
  font: 500 13.5px/1.5 var(--corps);
  color: var(--texte-tiers);
}


/* --- Section encre ------------------------------------------------------- */

/* Reservee aux blocs qui portent UNE idee. « A savoir avant de partir » a ete
   essaye et annule : sur fond colore, une seule couleur de texte passe le
   seuil de contraste, et ce panneau vit de ses trois niveaux. */
.section-encre {
  background: var(--encre);
  border-top: 0;
}
.section-encre h2 { color: var(--blanc); }
.section-encre .surtitre { color: var(--vert); }
.section-encre .chapeau,
.section-encre p { color: rgba(255, 255, 255, 0.74); }

/* Les principes : la cle en vert, le texte en blanc adouci. Le vert de la
   charte passe a 6,1 sur l'encre — largement au-dessus du seuil. */
.section-encre .principe .cle { color: var(--vert); }

/* FAQ sur l'encre : question en blanc, reponse en blanc adouci. Deux niveaux
   suffisent, c'est ce qui rend ce bloc compatible avec un fond colore. */
.section-encre .faq h3 { color: var(--blanc); }
.section-encre .faq p { color: rgba(255, 255, 255, 0.74); }
.section-encre .principe .texte { color: rgba(255, 255, 255, 0.74); }
.section-encre .liste-principes .principe {
  border-color: rgba(255, 255, 255, 0.13);
}


/* --- Avion du surtitre --------------------------------------------------- */

/* Remplace la flèche « → » : même signe que dans le logo, et il dit le
   mouvement mieux qu'un caractère typographique. En SVG plutôt qu'en image,
   pour qu'il prenne la couleur du texte et reste net à toute taille. */
.avion-signe {
  width: 1.15em;
  height: 1.15em;
  fill: var(--vert);
  vertical-align: -0.22em;
  margin: 0 0.5em;
  transform: rotate(90deg);   /* le tracé pointe vers le haut : on le couche */
}
/* Le surtitre du hero est le premier mot de la page : il mérite d'être lu. */
.surtitre-hero { font-size: 13px; letter-spacing: 0.14em; }


/* --- Pages légales ------------------------------------------------------- */

/* Elles sont longues et se lisent d'une traite : interligne large, colonne
   étroite, titres nettement séparés. C'est le seul endroit du site où le
   confort de lecture prime sur la densité. */
.texte-legal { font-size: 15.5px; line-height: 1.75; color: var(--texte-doux); }
.texte-legal h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 40px 0 12px;
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { margin: 0 0 14px; }
.texte-legal ul { margin: 0 0 18px; padding-left: 20px; }
.texte-legal li { margin-bottom: 8px; }
.texte-legal strong { color: var(--encre); }
.texte-legal a { color: var(--vert-fonce); }

/* Le tableau des traitements RGPD : deux colonnes, la clé en petit et en
   capitales. En liste à puces il devenait illisible. */
.tableau-legal { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.tableau-legal th,
.tableau-legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0;
  border-bottom: 1px solid var(--bordure-fine);
}
.tableau-legal th {
  width: 30%;
  padding-right: 20px;
  font: 600 11px var(--corps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .tableau-legal th, .tableau-legal td { display: block; width: auto; padding-bottom: 4px; }
  .tableau-legal td { padding-top: 0; padding-bottom: 14px; }
}

.maj-legale {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure-fine);
  font: 500 12.5px var(--mono);
  color: var(--texte-faible);
}


/* --- Liste des destinations du pied de page ------------------------------ */

/* ⚠️ TOUS LES LIENS RESTENT, EN COLONNES. On ne peut pas raccourcir cette
   liste : c'est le SEUL chemin d'exploration vers les pages destination, les
   cartes de la grille étant écrites par JavaScript et donc invisibles pour un
   robot. Un « voir toutes » les sortirait du maillage interne.
   Le multi-colonnes règle le vrai problème — la hauteur — sans toucher au
   nombre de liens : dix-sept entrées passent de dix-sept lignes à six. Et ça
   tient tout seul quand le catalogue grandira. */
#destinationsPied {
  /* ⚠️ `display: block` OBLIGATOIRE : `.pied ul` est en `display: flex`, et un
     conteneur flex IGNORE purement et simplement `columns`. La règle passait
     sans erreur et ne faisait rien. */
  display: block;
  columns: 2 150px;
  column-gap: 26px;
}
#destinationsPied li { margin-bottom: 9px; }   /* le `gap` du flex ne s'applique plus */
#destinationsPied li {
  break-inside: avoid;    /* un nom coupé en deux colonnes serait illisible */
}
@media (max-width: 900px) { #destinationsPied { columns: 2 120px; } }

/* La FAQ n'a plus de filet a compenser : son fond encre marque deja la rupture.
   On resserre le haut, qui gardait la place d'une separation disparue. */
#faq { padding-top: clamp(40px, 4.6vw, 62px); }