/* ═══════ LES PAGES DE VOYAGE — FEUILLE PARTAGÉE ═══════

   Posée par l'audit design du 3 novembre 2026, et chargée APRÈS le <style> en
   ligne de chaque page de voyage (`voyage-*.html` qui portent la frise
   `.chemin`) : ce qui est écrit ici reprend la main sur la page, sans qu'on
   ait à toucher sept copies de la même règle. Les règles d'origine restent
   dans les pages ; elles servent encore à tout ce que cette feuille ne
   redessine pas.

   Cinq choses, dans l'ordre de la page :
     1. le titre court et sa ligne « 9 jours · décembre 2026 – janvier 2027 » ;
     2. la photo du voyage, enfin visible derrière le haut de page sur ordinateur ;
     3. les repères (durée, lieux, groupe) en ligne de valeurs, sans cadre ;
     4. la frise repliée sur téléphone, une journée à la fois ;
     5. la barre de réservation fixe du téléphone (js/voyage-barre.js).

   Couleurs de la marque, inchangées : bleu nuit #10275a, or #e0a33c. */

/* ── 1. LE TITRE COURT ──
   Le h1 portait toute la requête de référencement (« Voyage en Russie l'hiver :
   Noël féérique à Moscou et Saint-Pétersbourg, 9 jours Décembre 2026 · janvier
   2027 ») : trois lignes en 1440, six sur un téléphone, avant la moindre
   information. Le <title>, la meta description et le JSON-LD gardent la
   phrase longue ; le titre VISIBLE dit le voyage, et la ligne en dessous dit
   sa durée et sa saison — deux données déjà écrites dans la page. */
.tete h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.1; margin: 0 0 10px; text-wrap: balance; }
.tete p.tete__ligne {
  font-family: var(--titre); font-weight: 600; font-size: 18px; line-height: 1.4;
  color: var(--accent); margin: 0 0 18px; letter-spacing: .01em;
}
@media (max-width: 767px) {
  .tete h1 { font-size: 30px; line-height: 1.15; }
  .tete p.tete__ligne { font-size: 16px; margin-bottom: 14px; }
}

/* ── 2. LA PHOTO DU VOYAGE, SUR ORDINATEUR ──
   Elle était déjà dans la page (`.tete__photo`), mais à 34 % d'opacité sous un
   voile à 72-95 % : sur l'écran, il restait un aplat bleu nuit. À partir de
   900 px elle passe à pleine opacité, et le voile se couche de gauche à
   droite — dense sous le texte, léger à droite, où la photo se voit. Sur
   téléphone rien ne change : le texte couvre toute la largeur, le voile
   aussi. */
@media (min-width: 900px) {
  .tete__photo img { opacity: 1; }
  .tete__photo::after {
    background:
      linear-gradient(180deg, rgba(7,20,49,.55) 0%, rgba(7,20,49,0) 26%),
      linear-gradient(90deg, rgba(16,39,90,.95) 0%, rgba(16,39,90,.9) 40%, rgba(16,39,90,.7) 70%, rgba(16,39,90,.45) 100%);
  }
  /* la page du Bélarus garde son vert profond, même voile, même pente */
  .page-by .tete__photo::after {
    background:
      linear-gradient(180deg, rgba(8,28,18,.55) 0%, rgba(8,28,18,0) 26%),
      linear-gradient(90deg, rgba(12,40,25,.95) 0%, rgba(12,40,25,.9) 40%, rgba(12,40,25,.7) 70%, rgba(12,40,25,.45) 100%);
  }
}

/* ── 3. LES REPÈRES, EN LIGNE DE VALEURS ──
   Trois petites boîtes à liseré d'or sous les deux cartouches : cinq cadres
   dans le premier écran, et l'œil ne savait plus lequel lire. Les cartouches
   de prix et de départs gardent leur cadre — ce sont les deux choses qu'on
   cherche ; les repères deviennent une ligne de valeurs, sans cadre :
   la valeur d'abord (20 px, demi-gras), sa légende dessous (12 px). Le HTML
   écrit la légende avant la valeur ; `column-reverse` les retourne sans
   toucher au texte. */
.tete .reperes { gap: 14px 40px; margin: 24px 0 0; }
.tete .reperes li {
  flex-direction: column-reverse; justify-content: flex-end; gap: 4px;
  background: none; border: 0; border-radius: 0; padding: 0;
}
/* pas de filet entre les valeurs : essayé, il tombait en tête de ligne dès
   que trois longues valeurs passaient à la ligne (Kaliningrad, en 1440) */
.tete .reperes b { font-family: var(--titre); font-size: 20px; font-weight: 600; line-height: 1.25; color: #fff; }
.tete .reperes span { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; color: rgba(255,255,255,.72); }
@media (max-width: 767px) {
  .tete .reperes { gap: 14px 24px; }
  .tete .reperes b { font-size: 18px; }
}

/* ── 4. LA FRISE REPLIÉE, SUR TÉLÉPHONE ──
   Neuf journées dépliées faisaient l'essentiel des vingt mille pixels de la
   page en 390. Chaque jour garde sa photo, son titre et deux lignes de
   texte ; le reste — la fin du paragraphe, « ce que vous voyez ce jour-là »
   et les pastilles — se déplie au bouton « Lire la journée ».
   TOUT RESTE DANS LE HTML : Google lit la journée entière, seul l'écran la
   replie. Et la classe `chemin--pliable` n'est posée que par
   js/voyage-barre.js : sans script, la frise reste entière, jamais muette.
   Sur ordinateur, rien n'est replié. */
.chemin__lire { display: none; }
@media (max-width: 767px) {
  .chemin--pliable .chemin__etape:not(.est-ouverte) .chemin__texte > p:not(.chemin__quand) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .chemin--pliable .chemin__etape:not(.est-ouverte) .chemin__voir,
  .chemin--pliable .chemin__etape:not(.est-ouverte) .chemin__detail { display: none; }
  .chemin--pliable .chemin__lire {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 10px 0 -8px;
    padding: 0; background: none; border: 0; cursor: pointer;
    font: 600 15px/1.2 var(--texte, 'Inter', sans-serif); color: var(--encre);
    text-decoration: underline; text-decoration-color: rgba(224,163,60,.8); text-underline-offset: 4px; text-decoration-thickness: 2px;
  }
  .chemin--pliable .chemin__lire::after {
    content: ""; width: 8px; height: 8px; border-right: 2px solid #b57f22; border-bottom: 2px solid #b57f22;
    transform: rotate(45deg) translateY(-2px); transition: transform .25s cubic-bezier(.16,1,.3,1);
  }
  .chemin--pliable .est-ouverte .chemin__lire::after { transform: rotate(-135deg) translateY(-2px); }
  .chemin--pliable .chemin__lire:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  /* la photo du jour, un peu moins haute : le titre remonte dans l'écran */
  .chemin--pliable .chemin__photo { aspect-ratio: 16 / 9; }
}

/* ── 5. LA BARRE DE RÉSERVATION FIXE ──
   Écrite par js/voyage-barre.js, avec le prix et le prochain départ LUS dans
   les cartouches de la page (`data-barre-prix`, `data-barre-depart`) : rien
   n'y est saisi deux fois. Elle monte quand le bouton du haut sort de
   l'écran, et redescend quand le formulaire de réservation y entre — on ne
   montre pas un raccourci vers ce qu'on a sous les yeux.
   64 px, plus la marge du bas des iPhone (`safe-area-inset-bottom`), et le
   corps de page reçoit le même padding pour que le pied ne passe pas
   dessous. Aucun autre bouton flottant sur ces pages (vérifié le 3 novembre
   2026) : z-index 40, sous la barre de navigation (50) et son panneau (49). */
/* Sur ordinateur aussi depuis le 3 novembre 2026 (Thomas, sur l'aperçu) :
   la même barre, en capsule centrée au bas de l'écran, avec le nom du voyage
   devant le prix. */
body.a-barre-resa { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.barre-resa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: #10275a; border-top: 1px solid rgba(224,163,60,.45);
  box-shadow: 0 -10px 28px rgba(7,20,49,.28);
  transform: translateY(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.barre-resa.est-visible {
  transform: none; visibility: visible;
  transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.barre-resa__info { margin: 0; min-width: 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-resa__info b { font-family: var(--titre); font-weight: 600; font-size: 16px; color: #fff; }
.barre-resa__nom { display: none; }
.barre-resa__note { display: block; color: #e0a33c; font-weight: 700; font-size: 13px; }
.barre-resa__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: #e0a33c; color: #10275a; font-weight: 600; font-size: 15px; text-decoration: none;
}
.barre-resa__btn:hover { background: #d4932a; color: #10275a; }
.barre-resa__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 768px) {
  body.a-barre-resa { padding-bottom: 0; }
  .barre-resa {
    left: 50%; right: auto; bottom: 20px; width: min(760px, calc(100vw - 48px));
    height: 64px; padding: 0 10px 0 26px; border: 1px solid rgba(224,163,60,.45); border-radius: 999px;
    box-shadow: 0 14px 40px rgba(7,20,49,.35);
    transform: translate(-50%, calc(100% + 30px));
  }
  .barre-resa.est-visible { transform: translate(-50%, 0); }
  .barre-resa__nom { display: inline; font-family: var(--titre); font-weight: 600; color: #fff; font-size: 16px; }
  .barre-resa__nom::after { content: "  ·  "; white-space: pre; color: rgba(255,255,255,.5); }
  .barre-resa__info { font-size: 15px; }
  .barre-resa__note { display: inline; font-size: 15px; }
  .barre-resa__btn { min-height: 46px; padding: 0 28px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-resa, .barre-resa.est-visible { transition: none; }
}
/* l'arrivée au formulaire depuis la barre : sous la barre de navigation fixe */
#devis { scroll-margin-top: 88px; }