/* =========================================================
   VDR SITE · Éditorial polaire, site public Laravel
   ---------------------------------------------------------
   Chargée après vdr-tour.css, copie du CSS de production des
   fiches WordPress (docs/design/vdr-tour-design-system.css).

   Règle d'autorité (docs/plan-de-construction.md, lot 6) :
   - vdr-tour.css fait foi pour le bloc programme de la fiche :
     jours, hôtels, options, séquence mise en avant, cabines,
     échéancier, inclus ;
   - le prototype (docs/design/vdr-design-system.css) fait foi
     pour le reste : en-tête, pied de page, hero, catalogue,
     cartes de départ, pages éditoriales ;
   - là où les deux se recouvrent et divergent, le prototype
     l'emporte. Ces reprises sont regroupées dans la section
     FICHE VOYAGE, chacune commentée.

   Accent doré, celui du logo (décision de Yannick, 22 septembre
   2026) : il remplace le cuivre du prototype, qui le garde dans
   docs/design, référence figée. Quatre règles, vérifiées au calcul
   (App\Support\Contraste, tests/Unit/ContrasteTest.php) :
   - jamais de doré du nuancier en texte sur fond clair (1,5 à
     2,5:1 sur blanc) : le texte doré sur fond clair est
     --or-texte, #92660F, 5,09:1 sur blanc, 4,76 sur ice, 4,69
     sur le fond d'alerte, 4,65 sur warm ;
   - jamais de texte blanc sur un aplat doré : le texte d'un
     bouton doré est bleu nuit, 8,1:1, le couple du logo ;
   - jamais de texte doré sur le bleu pâle frost : même assombri,
     le doré n'y tient que 3,99:1. L'accent y est le bleu nuit ;
   - une couleur de texte ne s'hérite jamais à travers un
     changement de fond : un panneau clair posé dans un bloc
     sombre reprend les couleurs du fond clair, et l'inverse
     (section FICHE VOYAGE, séquence mise en avant).
   Sur bleu nuit, les quatre dorés vont de 6,7 à 11,1:1.

   Le gris de l'italique éditorial, --italique, est plus sombre que
   le gris courant : seul texte dont le fond change (il suit les
   encadrés et les options), il tient 4,65:1 sur le bleu pâle, là
   où --muted tombait à 4,26.
   ========================================================= */

/* ============ POLICES, servies depuis le site ============ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/vdr/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/vdr/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/vdr/fraunces-italique-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/vdr/fraunces-italique-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/vdr/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/vdr/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============ JETONS ============ */
:root{
  --ink:#0a1f33;
  --deep:#143a5b;
  --ocean:#2c5f7f;
  --frost:#d8e6f0;
  --ice:#f4f8fb;
  --snow:#ffffff;
  /* Or : surtitres, chiffres et prix sur fond sombre ; or courant, filets et
     puces sur fond sombre ; fond des boutons, sous un texte bleu nuit ; survol
     des boutons et bordures ; texte doré sur fond clair. */
  --or-clair:#FBCD5C;
  --or:#F5BE45;
  --or-bouton:#E9A92A;
  --or-fonce:#D9981B;
  --or-texte:#92660F;
  --warm:#faf4ea;
  --text:#1f2d3b;
  --muted:#5a6c7d;
  /* Gris de l'italique éditorial : le seul texte dont le fond change. */
  --italique:#556676;
  --rule:#c8d6e2;
  --success:#2d6a4f;
  --alert:#9a3412;
  --page:#fbfcfd;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --wrap:1180px;
  --read:920px;
  --gut:24px;
  --r:4px;

  /* Jetons du CSS de production, définis sur .vdr-tour dans vdr-tour.css : repris ici
     pour que ses composants placés hors de la colonne de lecture (hero) les trouvent. */
  --vdr-ink:#0a1f33;
  --vdr-deep:#143a5b;
  --vdr-ocean:#2c5f7f;
  --vdr-frost:#d8e6f0;
  --vdr-ice:#f4f8fb;
  --vdr-snow:#ffffff;
  --vdr-or-clair:#FBCD5C;
  --vdr-or:#F5BE45;
  --vdr-or-bouton:#E9A92A;
  --vdr-or-fonce:#D9981B;
  --vdr-or-texte:#92660F;
  --vdr-warm:#faf4ea;
  --vdr-text:#1f2d3b;
  --vdr-muted:#5a6c7d;
  --vdr-rule:#c8d6e2;
  --vdr-success:#2d6a4f;
  --vdr-alert:#9a3412;
}

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

body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* Un élément masqué par l'attribut hidden le reste, quel que soit son display :
   sans cette règle, le bouton de pause des bandeaux s'affichait sans script. */
[hidden]{display:none!important}
a{color:var(--ocean);text-decoration:none}
h1,h2,h3,h4{text-wrap:balance;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--or-texte);outline-offset:3px}
.dev-bandeau :focus-visible,.bandeau :focus-visible,
.section--ink :focus-visible,.foot :focus-visible,.vdr-cruise :focus-visible,.vdr-footer-cta :focus-visible{outline-color:var(--or-clair)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.read{width:100%;max-width:var(--read);margin:0 auto;padding-inline:var(--gut)}

/* Texte lu par les lecteurs d'écran seulement. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Lien d'évitement, visible au premier appui sur Tab. */
.evitement{
  position:absolute;left:12px;top:-120px;z-index:100;
  background:var(--ink);color:var(--snow);padding:10px 18px;border-radius:3px;
  font-weight:700;font-size:14px;
}
.evitement:focus{top:12px}
main:focus{outline:none}

/* ============ BANDEAU DU SITE DE DÉVELOPPEMENT ============
   Reprend la barre .proto du prototype, affichée hors production seulement. */
.dev-bandeau{
  background:var(--ink);color:var(--frost);
  font-size:12.5px;letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.dev-bandeau__in{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding-block:8px}
.dev-bandeau__tag{
  display:inline-flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:10.5px;
  color:var(--or-clair);
}
.dev-bandeau__point{width:6px;height:6px;border-radius:50%;background:var(--or);display:inline-block}
.dev-bandeau__note{color:rgba(255,255,255,.66);font-size:12px;letter-spacing:0}

/* ============ EN-TÊTE ============
   Collant, il se rétracte au défilement vers le bas et revient au défilement
   vers le haut (script du site, classe is-rentree) : toujours visible en haut de
   page, sans réaction sous un seuil de quelques dizaines de pixels, jamais
   rétracté pendant qu'un menu est ouvert ou que le clavier est dedans. Aucun
   autre élément ne calcule son décalage depuis sa hauteur, qui change. */
.site-head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
  transition:transform .25s ease;
}
.site-head.is-rentree{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
.head__in{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.brand__mark{
  font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);
  letter-spacing:-.01em;line-height:1;
}
.brand__mark em{font-style:italic;color:var(--or-texte);font-weight:500}
/* 44 px, 36 px sur téléphone : TraitementPhoto::LOGO_SITE_HAUTEUR en est tiré, à changer ensemble. */
.brand__logo{display:block;height:44px;width:auto;align-self:center}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:nowrap}
.nav a{
  padding:9px 11px;border-radius:3px;
  font-size:14px;font-weight:600;color:var(--text);
  transition:background .18s ease,color .18s ease;
}
.nav a:hover{background:var(--ice);color:var(--deep)}
/* Page courante : sur le beige, le texte reste bleu nuit et l'or n'est qu'un
   filet. Le doré y tiendrait 4,65:1 depuis #92660F, mais sur une étiquette aussi
   petite le bleu nuit se lit mieux. */
.nav a.is-on{color:var(--ink);background:var(--warm);box-shadow:inset 0 -2px 0 var(--or-fonce)}
.head__tel{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding-left:20px;border-left:1px solid var(--rule);
}
.head__tel b{font-family:var(--serif);font-size:19px;color:var(--or-texte);font-weight:600;line-height:1.1}
.head__tel .lab{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:3px;padding:8px 12px}

/* Le menu ne se replie que si le script est chargé : sans lui, la navigation reste affichée. */
@media (max-width:1210px){
  .head__in{min-height:64px;flex-wrap:wrap}
  .js .burger{display:block}
  .head__tel{margin-left:12px;padding-left:12px}
  html:not(.js) .head__tel{margin-left:auto}
  .nav{
    order:5;width:100%;margin-left:0;gap:0;flex-wrap:wrap;
    flex-direction:column;border-top:1px solid var(--rule);
    padding-block:6px;
  }
  .nav a{padding:11px 4px;border-radius:0}
  .js .nav:not(.is-open){display:none}
}
@media (max-width:620px){
  .head__tel .lab{display:none}
  .head__tel b{font-size:18px}
  .head__tel{margin-left:auto;padding-left:14px}
  .burger{margin-left:0;order:3}
  .brand{flex-shrink:1;min-width:0}
  .brand__logo{height:36px}
}

/* ============ ÉLÉMENTS COMMUNS ============ */
.kicker{
  font-size:11px;text-transform:uppercase;letter-spacing:.26em;
  color:var(--or-texte);font-weight:700;
}
.sec-title{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.015em;
  margin-block:10px 0;
}
.sec-lead{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,20px);
  color:var(--muted);margin-top:12px;max-width:62ch;
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:3px;border:none;
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--or-bouton);color:var(--ink);
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--or-fonce);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--snow);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--snow)}
.btn--line{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--line:hover{background:var(--ice);color:var(--deep)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:2px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
/* Départ ouvert : aplat or clair sous un texte bleu nuit, 11,1:1. */
.badge--few{background:var(--or-clair);color:var(--ink)}
.badge--full{background:#eef2f6;color:var(--muted)}
.badge--last{background:#fbe9e2;color:var(--alert)}

.section{padding-block:clamp(56px,7vw,88px)}
.section--ice{background:var(--ice);border-block:1px solid var(--rule)}
.section--ink{background:linear-gradient(165deg,var(--ink),var(--deep));color:var(--frost)}
.section--ink .sec-title{color:var(--snow)}
.section--ink .sec-lead{color:var(--frost)}
.section--ink .kicker{color:var(--or-clair)}
.centre{text-align:center}
.centre .sec-lead{margin-inline:auto}
.actions{margin-top:30px}
.actions--carnet{margin-top:28px}

/* ============ HERO DE L'ACCUEIL ============
   Contenu du bandeau de l'accueil (section BANDEAUX, variante accueil).
   Divergence avec le prototype, voulue au lot 6 quinquies. Le prototype posait
   ses photos à 46 % d'opacité sous un dégradé de 95 à 42 % : elles ne se
   voyaient presque plus. Elles sont maintenant pleines, sous une seule couche,
   le dégradé des bandeaux. */
.hero__kicker{color:var(--or-clair);font-size:11px;text-transform:uppercase;letter-spacing:.3em;font-weight:600}
.hero__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,6.4vw,70px);line-height:1.04;letter-spacing:-.025em;
  color:var(--snow);margin-top:20px;
}
.hero__title i,.hero__title em{font-style:italic;color:var(--or-clair);font-weight:400}
.hero__text{
  margin-top:22px;max-width:52ch;font-size:clamp(16px,1.6vw,18.5px);
  color:rgba(255,255,255,.84);line-height:1.75;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Logo du bandeau, blanc, posé au-dessus de l'accroche. Distinct du logo de
   l'en-tête, qui se pose sur fond blanc. Sa hauteur sur grand écran se règle au
   back-office (--logo-hauteur, en pixels, posée en ligne ; 60 d'origine) ; le
   téléphone en prend les deux tiers, et sa largeur reste bornée à cinq fois sa
   hauteur. À 60, c'est exactement le rendu d'avant le réglage :
   clamp(40px,4.8vw,60px), et 300 px de large au plus. */
.hero__logo{
  --logo-h:calc(var(--logo-hauteur,60) * 1px);
  display:block;width:auto;
  height:clamp(calc(var(--logo-h) * 2 / 3),calc(var(--logo-hauteur,60) * .08vw),var(--logo-h));
  max-width:min(calc(var(--logo-h) * 5),80%);
  object-fit:contain;object-position:left center;margin-bottom:26px;
}
/* Rien au-dessus du premier élément de l'accroche : sans logo ni surtitre, le
   titre part du haut du bloc, sans marge résiduelle. */
.bandeau--accueil .bandeau__texte > :first-child{margin-top:0}

/* Divergence avec le prototype, qui donnait à la carte un verre clair à 7 % :
   posée sur la partie franche de la photo, à droite, ses petits textes
   deviendraient illisibles. Son fond est sombre, pour le même contraste quelle
   que soit la photo : 8:1 au nom du voyage et 5:1 à son libellé cuivré, même
   sur un blanc pur. */
.next-card{
  background:rgba(10,31,51,.78);
  border:1px solid rgba(251,205,92,.32);
  border-radius:var(--r);padding:26px 26px 22px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.next-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.16);
}
.next-card__lab{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--or-clair);font-weight:700}
.next-card__name{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--snow);line-height:1.2}
.next-card__when{color:var(--frost);font-size:14.5px;margin-top:6px}
.next-card__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px}
.next-card__price{font-family:var(--serif);font-size:26px;color:var(--or-clair);font-weight:600;line-height:1}
.next-card__price small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600;margin-bottom:5px}
.next-card__mention{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:rgba(255,255,255,.78);letter-spacing:0;margin-top:6px}
.next-card__link{
  color:var(--snow);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--or);padding-bottom:3px;white-space:nowrap;
}
.next-card__link:hover{color:var(--or-clair)}

/* Voyages à la une. Sans script, les cartes s'empilent et le sélecteur est
   masqué. Avec lui, une seule se montre, choisie par les flèches ou les points ;
   toutes occupent la même case de grille, pour que le bandeau ne change pas de
   hauteur d'une carte à l'autre. La classe js, posée dès l'en-tête, montre la
   première carte avant même que le script ne s'exécute : rien ne saute au chargement. */
.vedettes__piste{display:grid;gap:14px}
html:not(.js) .vedettes__choix{display:none}
.js .vedettes[data-vedettes] .vedettes__piste > .next-card{grid-area:1/1;transition:opacity .35s ease,visibility .35s}
.js .vedettes[data-vedettes]:not(.is-pilote) .vedettes__piste > .next-card:not(:first-child),
.js .vedettes.is-pilote .vedettes__piste > .next-card:not(.is-on){opacity:0;visibility:hidden}
/* Le sélecteur est posé sur la partie franche de la photo : une pastille sombre
   garde ses flèches et ses points visibles sur la photo la plus claire. */
.vedettes__choix{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:fit-content;margin:12px auto 0;padding:3px;border-radius:999px;
  background:rgba(10,31,51,.72);
}
.vedettes__fleche,.vedettes__point{display:grid;place-items:center;padding:0;border:0;background:none;color:var(--snow)}
.vedettes__fleche{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.45)}
.vedettes__fleche:hover{background:rgba(255,255,255,.14)}
.vedettes__fleche::before{
  content:'';width:8px;height:8px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateX(1px) rotate(45deg);
}
.vedettes__fleche--suivante::before{transform:translateX(-1px) rotate(-135deg)}
.vedettes__point{width:24px;height:24px}
.vedettes__point::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);transition:background .2s ease,transform .2s ease;
}
.vedettes__point:hover::before{background:rgba(255,255,255,.85)}
.vedettes__point[aria-pressed="true"]::before{background:var(--or);transform:scale(1.3)}

.strip{
  position:relative;border-top:1px solid rgba(255,255,255,.14);
  background:var(--ink);
}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.strip__cell{background:var(--ink);padding:22px 18px;text-align:center}
.strip__n{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);color:var(--or-clair);font-weight:500;line-height:1}
.strip__l{font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.66);margin-top:8px;font-weight:600}

@media (max-width:860px){
  .strip__in{grid-template-columns:repeat(2,1fr)}
}

/* ============ BANDEAUX ============
   Un seul composant (site.bandeau) pour le haut de l'accueil, des pages
   intérieures et des fiches voyage : fond sombre, photos dessous, texte
   dessus. Il en coexistait trois, chacun posant le voile à sa façon. Sur les
   pages intérieures et les fiches, le voile était étiré depuis le bloc de
   texte par des marges négatives, mais la marge du premier et du dernier
   paragraphe s'échappait de ce bloc : le voile s'arrêtait avant le haut et le
   bas du bandeau, sur un trait net.

   Le bloc de texte est désormais une colonne de grille qui prend toute la
   hauteur du bandeau : les marges du bandeau (--bandeau-marge) sont ses marges
   intérieures, et rien ne s'en échappe, une cellule de grille contenant ses
   marges. Une seconde colonne, facultative, porte le bloc posé à droite
   (bandeau--aside : les voyages à la une de l'accueil). Les variantes ne
   règlent que les marges, la largeur du texte et le fond sans photo. */
.bandeau{position:relative;overflow:hidden;background:var(--ink);color:var(--snow)}
.bandeau--page{--bandeau-marge:clamp(44px,6vw,72px)}
.bandeau--page.bandeau--photo{--bandeau-marge:clamp(64px,8vw,104px)}
.bandeau--accueil{--bandeau-marge:clamp(60px,9vw,108px)}
.bandeau--fiche{--bandeau-marge:clamp(48px,7vw,86px)}
.bandeau__media{position:absolute;inset:0;z-index:0}
/* Le texte des pages et des fiches s'arrête à 40rem pour que la droite de la
   photo reste franche ; celui de l'accueil partage la largeur avec le bloc de droite. */
/* Deux calques fixes, qui ne dépendent jamais de l'état du diaporama : les photos
   dessous (z-index 0, qui enferme leurs propres z-index), le texte, le logo, les
   boutons et le bloc de droite dessus (z-index 1). Un diaporama décore, il ne
   commande pas le contenu (tests/Unit/BandeauCalquesTest.php). */
.bandeau__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,40rem);gap:clamp(28px,5vw,64px)}
.bandeau--accueil .bandeau__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}
.bandeau--fiche:not(.bandeau--photo) .bandeau__in{grid-template-columns:minmax(0,1fr)}
.bandeau__texte{--texte-bas:var(--bandeau-marge);padding-block:var(--bandeau-marge) var(--texte-bas)}
.bandeau__aside{position:relative;z-index:1;align-self:end;padding-block:var(--bandeau-marge)}
/* Même point de rupture que la grille de l'accueil : le texte passe au-dessus du
   bloc de droite, séparé de lui par l'espace de la grille. */
@media (max-width:860px){
  .bandeau--accueil .bandeau__in{grid-template-columns:minmax(0,1fr)}
  .bandeau--aside .bandeau__texte{--texte-bas:0px}
  .bandeau--aside .bandeau__aside{padding-top:0}
}
/* Sans photo, le fond de chaque bandeau du prototype : les vagues de l'accueil,
   le voile de la fiche, le bleu nuit des pages. Une photo les recouvre. */
.bandeau--accueil .bandeau__media{background:linear-gradient(150deg,#0d2a44,#1d4f70)}
.bandeau--accueil .bandeau__media::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M-20 44 Q 50 6 100 44 T 230 44'/%3E%3Cpath d='M-20 84 Q 50 46 100 84 T 230 84'/%3E%3Cpath d='M-20 124 Q 50 86 100 124 T 230 124'/%3E%3Cpath d='M-20 164 Q 50 126 100 164 T 230 164'/%3E%3C/g%3E%3C/svg%3E");
}
.bandeau--fiche .bandeau__media{background:linear-gradient(150deg,#0b2438,#1b4a66)}
.bandeau--fiche:not(.bandeau--photo) .bandeau__media::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,31,51,.92),rgba(20,58,91,.72))}

/* ============ PHOTOS DES BANDEAUX ============
   Réglées dans le back-office, une liste par page. Une photo : bandeau fixe.
   Plusieurs : fondu enchaîné, dont les images clés sont écrites par le
   composant site.vues selon le nombre de photos. La première vue reste en
   dessous, toujours visible, pour qu'aucun fondu ne laisse voir le fond. Le
   bouton de pause s'aligne sur le bord droit du contenu. */
.vues{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.vue{position:absolute;inset:0;margin:0}
.vue img{width:100%;height:100%;object-fit:cover}
.vue + .vue{opacity:0;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:backwards}
.vues.is-pause .vue{animation-play-state:paused}
/* Photos suivantes, posées par le script après le chargement de la page
   (composant site.vues) : arrivée pendant qu'elle est à l'écran, une photo
   apparaît en fondu, sans à-coup. */
.vue--differee img{opacity:0;transition:opacity .6s ease}
.vue--differee.is-prete img{opacity:1}
/* Commandes : précédente, pause, suivante, groupées sur le bord droit du contenu,
   sous le texte et le bloc de droite (leur marge basse est d'au moins 44 px). Même
   allure pour les trois ; 44 px au pouce sur téléphone. */
.vues__commandes{
  position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:18px;z-index:3;
  display:flex;gap:8px;
}
.vues__commandes[hidden]{display:none}
.vues__bouton{
  width:38px;height:38px;border-radius:50%;
  background:rgba(10,31,51,.55);border:1px solid rgba(255,255,255,.45);color:var(--snow);
  display:grid;place-items:center;padding:0;cursor:pointer;
}
.vues__bouton:hover{background:rgba(10,31,51,.8)}
.vues__bouton svg{display:block}
.vues__pause::before{content:'';width:10px;height:12px;border-inline:3px solid currentColor}
.vues__pause[aria-pressed="true"]::before{width:0;height:0;border-inline:0;border-block:7px solid transparent;border-left:11px solid currentColor;margin-left:3px}
@media (max-width:700px){
  .vues__commandes{bottom:12px}
  .vues__bouton{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.vues__pause{display:none}}
/* Mode manuel, pris par une flèche : le défilement automatique s'arrête, et la photo
   choisie arrive par le même fondu et le même zoom, par-dessus celle qu'elle remplace.
   Sous prefers-reduced-motion, la règle générale coupe fondu et zoom : elle change net. */
/* !important : les animations du défilement sont posées dans l'attribut style des vues. */
.vues.is-manuel .vue{animation:none!important;opacity:0;z-index:0;transition:opacity var(--fondu,.5s) ease-in-out}
.vues.is-manuel .vue.is-precedente{opacity:1;z-index:1;transition:none}
.vues.is-manuel .vue.is-active{opacity:1;z-index:2}
@media (prefers-reduced-motion:no-preference){
  .vues.is-manuel .vue.is-active{animation:vue-arrivee var(--fondu,.5s) ease-in-out!important}
}
@keyframes vue-arrivee{from{transform:scale(1.06)}to{transform:none}}

/* ============ DÉGRADÉ DES BANDEAUX ============
   Une seule couche sur les photos des bandeaux : accueil, en-têtes des pages et
   couvertures des fiches voyage. Rien d'autre ne se pose sur la photo.

   Le voile est le pseudo-élément du bloc de texte, qui occupe toute la hauteur
   du bandeau : il en touche le bord haut et le bord bas sans aucun calcul, et
   déborde à gauche au-delà de l'écran, coupé par le bandeau. Il est
   horizontal, à pleine profondeur du bord gauche jusqu'à la fin de la colonne
   de texte, puis s'efface en courbe adoucie sur --fondu-degrade ; au-delà, la
   photo reste franche. Quand le texte prend toute la largeur, il bascule à la
   verticale sur toute la largeur : pleine profondeur du haut du bandeau
   jusqu'au bas du texte, marge du bas déduite (--texte-bas), puis même
   effacement, coupé au besoin par le bord bas. Aucune limite ne se voit : les
   bords de la couche sont ceux du bandeau, ou fondus.

   Sa couleur (--couleur-degrade, composantes pour rgba()) et sa profondeur
   (--degrade, de 0 à 0,95) viennent des réglages de la page Bandeaux, posées en
   ligne par le composant. La profondeur ne descend jamais sous un plancher,
   calculé pour la couleur par App\Support\DegradeBandeau : sur une photo toute
   blanche, il garde 4,5:1 aux surtitres dorés et aux textes courants, 3:1 aux
   titres. Les textes posés sur le dégradé sont ceux que liste
   DegradeBandeau::TEXTES : toute nouvelle couleur de texte d'un bandeau s'y
   ajoute. */
:root{--fondu-degrade:clamp(240px,25vw,420px)}
.bandeau--photo .bandeau__texte{position:relative;isolation:isolate}
.bandeau--photo .bandeau__texte::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:0;left:-100vw;
  right:var(--voile-droite,calc(-1 * var(--fondu-degrade)));
  bottom:var(--voile-bas,0px);
  background:linear-gradient(var(--sens-degrade,to right),
    rgba(var(--couleur-degrade,10,31,51),var(--degrade,.73)) calc(100% - var(--fondu-degrade)),
    rgba(var(--couleur-degrade,10,31,51),calc(var(--degrade,.73) * .85)) calc(100% - var(--fondu-degrade) * .75),
    rgba(var(--couleur-degrade,10,31,51),calc(var(--degrade,.73) * .5)) calc(100% - var(--fondu-degrade) * .5),
    rgba(var(--couleur-degrade,10,31,51),calc(var(--degrade,.73) * .15)) calc(100% - var(--fondu-degrade) * .25),
    rgba(var(--couleur-degrade,10,31,51),0) 100%);
}
/* Passage à la verticale, au vrai passage en colonne : 860 px pour l'accueil,
   dont la grille se replie ; 40rem plus deux gouttières pour les pages et les
   fiches, dont le texte prend alors toute la largeur. */
@media (max-width:860px){
  .bandeau--accueil .bandeau__texte{--sens-degrade:to bottom;--fondu-degrade:240px;--voile-droite:-100vw;--voile-bas:calc(var(--texte-bas) - var(--fondu-degrade))}
}
@media (max-width:43rem){
  .bandeau--page .bandeau__texte,.bandeau--fiche .bandeau__texte{--sens-degrade:to bottom;--fondu-degrade:240px;--voile-droite:-100vw;--voile-bas:calc(var(--texte-bas) - var(--fondu-degrade))}
}

/* ============ EMPLACEMENTS SANS PHOTO ============
   Dégradé et vagues du prototype (.ph), là où aucune photo n'est encore téléversée. */
.ph{
  position:relative;display:block;width:100%;
  background:linear-gradient(145deg,var(--deep) 0%,var(--ocean) 100%);
  overflow:hidden;
}
.ph::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M-20 30 Q 35 4 70 30 T 160 30'/%3E%3Cpath d='M-20 58 Q 35 32 70 58 T 160 58'/%3E%3Cpath d='M-20 86 Q 35 60 70 86 T 160 86'/%3E%3Cpath d='M-20 114 Q 35 88 70 114 T 160 114'/%3E%3C/g%3E%3C/svg%3E");
}
.ph::after{
  content:attr(data-label);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;
  font-family:var(--serif);font-style:italic;font-size:15px;
  color:rgba(255,255,255,.62);letter-spacing:.02em;
}
.ph--tone2{background:linear-gradient(145deg,#1b4a63,#2c5f7f)}
.ph--tone3{background:linear-gradient(145deg,#173d55,#3a6b7d)}
.ph--fill{position:absolute;inset:0;width:100%;height:100%}
.member__ph .ph::after{font-size:30px;font-style:normal;font-weight:500;color:rgba(255,255,255,.75)}

/* ============ CARTES DE DÉPART ============ */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{
  display:flex;flex-direction:column;
  background:var(--snow);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
  color:var(--text);
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,31,51,.1);border-color:var(--or-fonce)}
.card__media{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,var(--deep),var(--ocean));overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__badge{position:absolute;top:12px;left:12px}
.card__year{
  position:absolute;bottom:0;right:0;
  background:var(--ink);color:var(--or-clair);
  font-size:11px;font-weight:700;letter-spacing:.14em;padding:5px 12px;
}
.card__body{padding:22px 22px 0;flex:1}
.card__where{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--or-texte);font-weight:700}
.card__name{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);line-height:1.22;margin-top:7px}
.card__when{color:var(--muted);font-size:14px;margin-top:9px}
.card__hook{font-size:14.5px;color:var(--text);margin-top:12px;line-height:1.6}
.card__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:16px 22px 20px;margin-top:18px;border-top:1px solid var(--frost);
}
.card__price{font-family:var(--serif);font-size:19px;color:var(--deep);font-weight:600;line-height:1.1}
.card__price small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.card__mention{display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:4px}
.card__days{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ============ CARNET ============ */
.carnet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,68px);align-items:center}
.carnet__stack{position:relative;aspect-ratio:4/3}
.carnet__sheet{
  position:absolute;border-radius:3px;overflow:hidden;
  box-shadow:0 18px 44px rgba(10,31,51,.24);border:6px solid var(--snow);
}
.carnet__sheet img{width:100%;height:100%;object-fit:cover}
.carnet__sheet .ph{height:100%}
.carnet__sheet:nth-child(1){inset:0 34% 22% 0;transform:rotate(-3deg)}
.carnet__sheet:nth-child(2){inset:14% 6% 6% 30%;transform:rotate(2.5deg)}
.carnet__seal{
  position:absolute;left:0;bottom:2%;z-index:3;
  background:var(--or-bouton);color:var(--ink);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:2px;
}
.feature-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.feature-list li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px}
.feature-list b{
  font-family:var(--serif);font-size:15px;color:var(--or-texte);
  min-width:26px;font-weight:600;
}

/* ============ GRILLE « TOUT COMPRIS » ============ */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.incl__it{background:var(--snow);padding:28px 26px}
.incl__n{font-family:var(--serif);font-size:13px;color:var(--or-texte);font-weight:600;letter-spacing:.1em}
.incl__t{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;margin-top:10px}
.incl__d{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.6}

/* ============ ÉQUIPE ============
   Le premier membre en bande pleine largeur, sur blanc ; les suivants en cartes crème de
   même hauteur, filet doré en haut. Tous les textes à gauche : une biographie centrée fait
   bouger son bord gauche à chaque ligne. Nombre de colonnes choisi par la vue (--1 à --3).
   Couples texte et fond vérifiés par tests/Unit/EquipeContrasteTest.php. */
.member__ph{
  --ph:130px;
  position:relative;flex:none;width:var(--ph);height:var(--ph);border-radius:50%;overflow:hidden;
  border:3px solid var(--snow);box-shadow:0 8px 26px rgba(10,31,51,.14);
  background:var(--frost);
}
.member__ph img{width:100%;height:100%;object-fit:cover}
.member__texte{min-width:0;text-align:left}
.member__r{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--or-texte);font-weight:700}
.member__n{font-family:var(--serif);font-size:21px;color:var(--ink);font-weight:600;margin-top:6px;line-height:1.2}
.member__b{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.65}

.member--une{
  display:flex;gap:46px;align-items:flex-start;
  background:var(--snow);border-radius:var(--r);padding:44px;
  box-shadow:0 2px 20px rgba(10,31,51,.07);
}
.member--une .member__ph{--ph:190px}
.member--une .member__texte{flex:1}
.member--une .member__n{font-size:29px}
.member--une .member__b{font-size:16px;color:var(--text)}

.team__cartes{display:grid;gap:26px;list-style:none;margin:56px 0 0;padding:0}
.team__cartes--1{grid-template-columns:minmax(0,420px)}
.team__cartes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.team__cartes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.member--carte{
  display:flex;flex-direction:column;
  background:var(--warm);border-top:3px solid var(--or);border-radius:var(--r);padding:32px 26px;
}
.member--carte .member__ph{--ph:104px;margin-bottom:20px}

@media (max-width:820px){
  .member--une{flex-direction:column;align-items:center;gap:26px;padding:32px 22px}
  .member--une .member__r,.member--une .member__n{text-align:center}
  .team__cartes--1,.team__cartes--2,.team__cartes--3{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:36px}
}

/* ============ PIED DE PAGE ============ */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding-block:56px 30px;font-size:14.5px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.foot__h{font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--or-clair);font-weight:700;margin-bottom:14px}
.foot a{color:rgba(255,255,255,.72);display:block;padding-block:4px}
.foot a:hover{color:var(--snow)}
.foot__brand{font-family:var(--serif);font-size:24px;color:var(--snow);font-weight:500}
.foot__brand em{font-style:italic;color:var(--or-clair)}
.foot__txt{margin-top:10px}
.foot a.foot__tel{font-family:var(--serif);font-size:26px;color:var(--or-clair);font-weight:600;display:block;margin-top:6px}
.foot__partenaire{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.foot__note{margin-top:14px;font-size:13.5px}
.foot__bot{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;color:rgba(255,255,255,.58);
}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
@media (max-width:860px){.carnet{grid-template-columns:1fr}}

/* ============ EN-TÊTE DES PAGES ============
   Contenu du bandeau des pages intérieures (section BANDEAUX, variante page) :
   fond sombre du prototype. Les photos de bandeau, absentes du prototype,
   passent dessous comme dans le hero de l'accueil : pleines, sous le seul
   dégradé des bandeaux ; l'en-tête gagne en hauteur pour les laisser voir. */
.bandeau--page .kicker{color:var(--or-clair)}
.bandeau--page h1{
  font-family:var(--serif);font-weight:500;color:var(--snow);
  font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.02em;margin-top:14px;
}
.bandeau--page p{color:rgba(255,255,255,.78);max-width:62ch;margin-top:16px;font-size:16.5px}
/* Dans le prototype, la règle précédente donne aussi au surtitre la taille du chapô
   (16,5 px), par accident de spécificité : il reprend ici les 11 px de .kicker. */
.bandeau--page p.kicker{font-size:11px;color:var(--or-clair)}

/* ============ CATALOGUE ============
   Divergence avec le prototype, voulue au lot 6 sexies : la barre de filtres ne
   se fige plus sous l'en-tête, elle défile avec la page. Figée, elle masquait
   le haut des cartes qui passaient dessous et coupait leurs pastilles en deux ;
   et son décalage valait la hauteur de l'en-tête, faux dès que celui-ci se
   rétracte. Le choix de destination, déplié, passe au-dessus des cartes par son
   propre z-index (.fmenu__panneau). */
.filters{background:var(--page);border-bottom:1px solid var(--rule)}
.filters__in{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;padding-block:16px}
.fgroup{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fgroup__lab{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700}
.fgroup__choix{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-block;
  padding:7px 15px;border-radius:2px;background:var(--snow);
  border:1px solid var(--rule);color:var(--text);
  font-size:13.5px;font-weight:600;line-height:1.5;transition:all .16s ease;
}
.chip:hover{border-color:var(--or-fonce);color:var(--or-texte)}
.chip[aria-current="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--snow)}
.fcount{margin:0 0 0 auto;font-size:13.5px;color:var(--muted);font-weight:600}
.fcount b{color:var(--ink);font-family:var(--serif);font-size:17px}

/* Choix de la destination : liste de liens dépliable, sans script. */
.fmenu{position:relative}
.fmenu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.fmenu > summary::-webkit-details-marker{display:none}
.fmenu > summary::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.fmenu[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.fmenu__panneau{
  position:absolute;left:0;top:calc(100% + 8px);z-index:45;
  width:min(600px,calc(100vw - 2 * var(--gut)));max-height:min(420px,60vh);overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;
  margin:0;padding:14px;list-style:none;
  background:var(--snow);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 14px 34px rgba(10,31,51,.14);
}
.fmenu__panneau .chip{display:block}

.section--serre{padding-top:20px}
/* Titre de niveau 2 pour la structure de la page, sans changer l'aspect du prototype. */
.year-bar{
  display:flex;align-items:center;gap:18px;margin:44px 0 26px;
  font-size:inherit;font-weight:inherit;line-height:inherit;
}
.year-bar__n{font-family:var(--serif);font-size:clamp(30px,4vw,44px);color:var(--ink);font-weight:500;line-height:1;letter-spacing:-.02em}
.year-bar__c{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:700}
.year-bar::after{content:'';flex:1;height:1px;background:var(--rule)}
.empty{text-align:center;padding:64px 20px;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:19px}
.empty .btn{font-style:normal;font-family:var(--sans);margin-top:18px}

/* ============ PAGES ÉDITORIALES ============ */
.notice{background:var(--frost);border-left:4px solid var(--deep);padding:17px 22px;margin-block:22px;border-radius:0 var(--r) var(--r) 0;font-size:15.5px}
.notice__l{display:block;font-weight:700;color:var(--deep);text-transform:uppercase;letter-spacing:.14em;font-size:11px;margin-bottom:6px}
.notice p:last-child{margin-bottom:0}
.notice--carnet{margin-top:28px}
.sec-head--espace{margin-top:56px}
.read--pleine{padding-inline:0;margin-top:52px}

.col-box{background:var(--snow);border:1px solid var(--rule);border-radius:var(--r);padding:24px 26px}
.col-box h2{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin-bottom:14px}

.book{
  background:linear-gradient(135deg,var(--ink),var(--deep));color:var(--snow);
  padding:clamp(30px,4vw,44px);border-radius:6px;margin-block:44px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;
}
.book__box{background:rgba(255,255,255,.08);border:1px solid rgba(251,205,92,.3);border-radius:var(--r);padding:24px;text-align:center}
.book__tel{font-family:var(--serif);font-size:32px;color:var(--or-clair);font-weight:600;display:block;line-height:1.1}
.book__lab{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.66);font-weight:700;display:block;margin-bottom:8px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.contact .book{margin:0;grid-template-columns:1fr;text-align:center}
.contact__horaires{color:var(--frost);margin-top:14px;font-size:14.5px}
.contact__intro{color:var(--muted);font-size:15px}
.contact__courriel{margin-top:18px}
.contact__adresse{color:var(--muted);font-size:14px;margin-top:22px}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

/* ============ FICHE VOYAGE ============
   Bloc programme : composants .vdr-* de vdr-tour.css, tels quels. Les règles
   ci-dessous sont les reprises du prototype là où il l'emporte, et les
   adaptations au site ; chacune dit ce qu'elle change. */

/* Hero : le prototype fait foi. Le .vdr-hero de production est une boîte en
   dégradé dans la colonne de lecture ; le prototype en fait un bandeau pleine
   largeur, photo de couverture dessous, fil d'Ariane et pastille de dates :
   c'est le bandeau commun (section BANDEAUX, variante fiche), dont seul le
   contenu est réglé ici. Divergence, voulue au lot 6 quinquies : la photo de
   couverture n'est plus posée à 42 % sous un voile de 92 à 72 %. Elle est
   pleine, sous le seul dégradé des bandeaux, et le texte s'arrête à 40rem pour
   que la droite de la photo reste franche. Sans photo, le fond du prototype reste. */
.crumbs{font-size:12.5px;color:rgba(255,255,255,.8);margin:1em 0 22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 .5em;margin:0;padding:0;list-style:none}
.crumbs li + li::before{content:'·';margin-right:.5em}
.crumbs a{color:rgba(255,255,255,.88)}
.crumbs a:hover{color:var(--or-clair)}
.bandeau--fiche .vdr-hero__kicker{
  display:inline-block;margin:1em 0;
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);background:var(--or-clair);font-weight:700;padding:6px 13px;border-radius:2px;
}
.bandeau--fiche .vdr-hero__title{
  font-family:var(--serif);font-weight:500;color:var(--snow);
  font-size:clamp(34px,5.6vw,60px);line-height:1.06;letter-spacing:-.022em;margin:20px 0 0;
}
.bandeau--fiche .vdr-hero__subtitle{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,2.2vw,23px);
  color:var(--frost);margin:16px 0 1em;max-width:58ch;
}

/* Encadré des informations clés : le prototype fait foi. Il chevauche le bas
   du hero et resserre légèrement ses libellés et ses valeurs. */
.vdr-keybox.vdr-keybox--chevauche{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  box-shadow:0 2px 14px rgba(10,31,51,.07);
  margin:-38px auto 0;position:relative;z-index:5;
}
.vdr-keybox--chevauche .vdr-keybox__item{padding:22px 16px}
.vdr-keybox--chevauche .vdr-keybox__label{font-size:10px;font-weight:700;margin-bottom:7px}
.vdr-keybox--chevauche .vdr-keybox__value{font-size:19px;line-height:1.28}
.vdr-keybox--chevauche .vdr-keybox__value strong{font-weight:600}
.vdr-keybox__note{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.4;margin-top:3px}

/* Autres dates du même circuit, et autres versions de la même famille. */
.vdr-dates{margin:22px 0 0;padding:0;list-style:none;text-align:center;font-size:15px;color:var(--muted)}
.vdr-dates li + li{margin-top:4px}

.vdr-fiche__corps{padding-block:clamp(40px,5vw,60px)}

/* Titres de section : le prototype fait foi, il redéfinit .vdr-section et
   donne au surtitre l'aspect de son .kicker. */
.vdr-tour .vdr-section{margin-block:clamp(48px,6vw,72px) 28px}
.vdr-tour .vdr-section__kicker{font-size:11px;letter-spacing:.26em;font-weight:700;color:var(--or-texte);margin:0 0 1em}
.vdr-tour .vdr-section__pdf{margin:.9em 0 0;font-size:14px}
.vdr-tour .vdr-section__pdf a{color:var(--ocean);font-weight:600}
.vdr-tour .vdr-section__title{font-family:var(--serif);font-size:clamp(25px,3.4vw,34px);font-weight:500;color:var(--ink);line-height:1.18;letter-spacing:-.012em;margin:10px 0 0}
.vdr-tour .vdr-section__lead{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--muted);margin:12px 0 1em}

/* Argumentaire : le prototype fait foi pour la boîte (.pitch), le surlignage
   garde le composant de production .vdr-pitch__highlight, que le prototype
   omettait en stylisant .pitch mark. */
.vdr-tour .vdr-pitch{padding:30px 32px;margin-block:36px;border-radius:0 var(--r) var(--r) 0}
.vdr-tour .vdr-pitch__title{font-size:23px}

/* Italique éditorial : noms de navires, mots étrangers, noms latins, et parfois
   un encadré entier, comme celui des deux Pérou. Le gris de production, #5a6c7d,
   ne tenait que 4,26:1 sur le bleu pâle des encadrés ; --italique y tient
   4,65:1, et de 5,4 à 5,9:1 sur les autres fonds clairs. Une seule valeur pour
   tous les fonds clairs : la couleur d'un texte ne dépend pas du panneau où il
   tombe. Sur fond sombre, l'italique reste clair (séquence mise en avant,
   plus bas ; cette règle-ci passerait sinon devant, à spécificité égale). */
.vdr-tour em{color:var(--italique)}

/* Numéro de jour collant : à 20 px du haut, comme en production. Il était
   décalé de la hauteur de l'en-tête, faux dès que celui-ci se rétracte (section
   EN-TÊTE) : pendant la lecture, l'en-tête est rentré et le numéro reste sous
   les yeux ; revenu au défilement vers le haut, l'en-tête passe par-dessus. */
.vdr-day__repas{margin-bottom:.6em}

/* Échéancier en liste de définitions, pour les lecteurs d'écran : même aspect. */
.vdr-schedule{margin-block:24px}
.vdr-schedule dd{margin:0}

/* Appel final : le prototype fait foi. Son bloc .book place le texte à gauche
   et le numéro d'Asia Voyages à droite, là où .vdr-footer-cta centre tout. */
.vdr-footer-cta.vdr-footer-cta--partenaire{
  display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;
  text-align:left;padding:clamp(30px,4vw,44px);margin:44px 0;
}
.vdr-footer-cta--partenaire .vdr-footer-cta__title{font-size:clamp(24px,3vw,30px);line-height:1.2;margin:0}
.vdr-footer-cta--partenaire .vdr-footer-cta__sub{color:var(--frost);margin:12px 0 0;font-size:1em}
.vdr-footer-cta__box{background:rgba(255,255,255,.08);border:1px solid rgba(251,205,92,.3);border-radius:var(--r);padding:24px;text-align:center}
.vdr-footer-cta__label{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.66);font-weight:700;display:block;margin-bottom:8px}
.vdr-footer-cta a.vdr-footer-cta__tel{font-family:var(--serif);font-size:32px;color:var(--or-clair);font-weight:600;display:block;line-height:1.1;border:none}
.vdr-footer-cta a.vdr-footer-cta__tel:hover{color:var(--snow)}
.vdr-footer-cta__actions{margin:14px 0 0}

/* Mentions : le prototype fait foi (.fine), un peu plus compact que .vdr-fine. */
.vdr-tour .vdr-fine{padding:22px 26px;font-size:14px;margin-block:28px}

/* Séquence mise en avant : une couleur de texte ne s'hérite jamais à travers un
   changement de fond. Le CSS de production colore le bloc sombre par des
   sélecteurs descendants (.vdr-cruise p, strong, em), qui traversent les
   panneaux clairs posés dedans : option, encadré, cadre photo, étiquette,
   surlignage. Leur texte restait blanc sur fond clair, 1,05:1 au titre de
   l'option de l'Antarctique. Chaque panneau clair reprend donc exactement les
   couleurs qu'il a hors du bloc sombre. À l'inverse, le lien, coloré pour le
   fond clair (2,4:1 sur bleu nuit), prend l'or clair dans le bloc sombre, et le
   bleu océan dans ses panneaux clairs. Tout nouveau panneau clair posé dans la
   séquence s'ajoute à ces listes. */
.vdr-cruise :is(.vdr-option,.vdr-notice,.vdr-warning,.vdr-photo){color:var(--vdr-text)}
.vdr-cruise :is(.vdr-option,.vdr-notice,.vdr-warning,.vdr-photo) p{color:var(--vdr-text)}
.vdr-cruise .vdr-option p.vdr-option__title{color:var(--vdr-or-texte)}
.vdr-cruise em{color:var(--vdr-frost)}
.vdr-cruise :is(.vdr-option,.vdr-notice,.vdr-warning,.vdr-photo,.vdr-tag,.vdr-pitch__highlight) strong{color:var(--vdr-ink)}
.vdr-cruise :is(.vdr-option,.vdr-notice,.vdr-warning,.vdr-photo,.vdr-tag,.vdr-pitch__highlight) em{color:var(--italique)}
.vdr-cruise a{color:var(--vdr-or-clair);border-bottom-color:rgba(251,205,92,.4)}
/* En-tête de la séquence mise en avant (lot 6 ter), sur le fond sombre : surtitre en
   or clair (.vdr-cruise__kicker du CSS de production), titre et introduction en blanc
   plein. Rapports, au pire sur le bas du dégradé halo compris : or clair 6,39 pour 1,
   blanc 9,59 ; sur ink, 11,13 et 16,71 (tests/Unit/ContrasteTest.php). */
.vdr-cruise__entete{margin-bottom:8px}
.vdr-cruise__entete .vdr-cruise__title{font-size:clamp(1.5em,3.4vw,2em)}
.vdr-cruise__intro{margin-bottom:28px}
.vdr-cruise .vdr-cruise__intro p{color:var(--vdr-snow)}
.vdr-cruise .vdr-cruise__intro p:last-child{margin-bottom:0}
.vdr-cruise a:hover{color:var(--vdr-snow);border-color:var(--vdr-snow)}
.vdr-cruise :is(.vdr-option,.vdr-notice,.vdr-warning,.vdr-photo) a{color:var(--vdr-ocean);border-bottom-color:var(--vdr-frost)}
.vdr-cruise :is(.vdr-option,.vdr-warning,.vdr-photo) a:hover{color:var(--vdr-or-texte);border-color:var(--vdr-or-texte)}

/* Sur le bleu pâle des encadrés, l'accent n'est pas doré : même assombri, le
   doré n'y tient que 3,99:1. Le lien y passe au bleu nuit au survol, dans le
   bloc clair comme dans le bloc sombre. Le survol doré du CSS de production
   (.vdr-tour a:hover) tombait sur ce fond dans l'encadré « Programme détaillé »
   d'une fiche sans programme. */
.vdr-tour .vdr-notice a:hover,.vdr-cruise .vdr-notice a:hover{color:var(--vdr-ink);border-color:var(--vdr-ink)}

/* Les petits textes dorés, étiquettes et boutons du bloc programme prennent l'or
   dans vdr-tour.css même, avec le contraste voulu : aucune reprise ici. */

@media (max-width:760px){
  .book,.vdr-footer-cta.vdr-footer-cta--partenaire{grid-template-columns:1fr}
}

/* ============ PAGE D'ATTENTE ============ */
.attente{max-width:760px}
.attente__etiquette{
  display:inline-block;margin:0 0 18px;padding:5px 12px;border-radius:2px;
  background:var(--or-clair);color:var(--ink);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.attente__voyage{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:600;margin:0}
.attente__dates{color:var(--muted);margin:4px 0 0}
.attente__retour{margin-top:28px;font-size:15px}

/* ============ DEMANDES (lot 7) ============ */
/* Fond clair, texte et accents du fond clair : l'or de texte est #92660F, le texte d'un bouton doré est bleu nuit. */
.demande{background:var(--snow,#fff);color:var(--text,#1f2d3b);border:1px solid var(--rule);border-radius:var(--r);padding:28px 30px;margin-block:40px}
.demande__surtitre{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:#92660F;margin:0 0 .6em}
.demande__titre{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.2;color:var(--ink);margin:0 0 .6em}
.demande__intro{margin:0 0 1.2em}
.demande__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.demande__champ{margin:0;display:flex;flex-direction:column;gap:6px}
.demande__champ--large{grid-column:1/-1}
.demande__champ label{font-size:13px;font-weight:600;color:var(--ink)}
.demande__champ input,.demande__champ textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #6b7c8c;border-radius:6px;padding:10px 12px;width:100%;box-sizing:border-box}
.demande__champ input:focus,.demande__champ textarea:focus{outline:2px solid var(--ocean);outline-offset:1px;border-color:var(--ocean)}
.demande__champ [aria-invalid="true"]{border-color:#9a3412}
.demande__actions{margin:18px 0 0}
.demande__bouton{font:inherit;font-weight:700;font-size:15px;background:#E9A92A;color:#0a1f33;border:0;border-radius:6px;padding:12px 22px;cursor:pointer}
.demande__bouton:hover,.demande__bouton:focus-visible{background:#D9981B;color:#0a1f33}
.demande__mention{margin:16px 0 0;font-size:13px;color:var(--muted)}
.demande__erreurs{background:#fdf0ea;color:#9a3412;border-left:3px solid #9a3412;padding:12px 16px;margin:0 0 16px}
.demande__erreurs p,.demande__erreurs ul{margin:0}
.demande__erreurs ul{padding-left:1.2em;margin-top:6px}
.demande__merci{background:#eaf4ee;color:#1f2d3b;border-left:3px solid #2d6a4f;padding:14px 18px}
.demande__merci p{margin:0}
.demande__merci p+p{margin-top:8px}
.demande__merci a{color:var(--ocean);font-weight:600}
.demande__piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.demande{padding:22px 18px}.demande__grille{grid-template-columns:1fr}}
.vdr-keybox__demande{display:inline-block;margin-top:6px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ocean)}


/* ============ EXTENSION (lot 6 ter) ============
   Section d'une extension facultative, après le programme du voyage : un cadre
   pointillé sur fond ice la sépare du jour par jour, pour qu'aucun de ses jours
   ne se lise comme un jour du voyage. Textes sur ice : bleu nuit, gris courant
   (5,07 pour 1) et or foncé #92660F (4,76 pour 1), jamais le doré vif. */
.extension{margin-top:clamp(40px,5vw,60px)}
.extension__cadre{
  border:2px dashed var(--or-fonce);border-radius:8px;background:var(--ice);
  padding:clamp(20px,3vw,32px) clamp(16px,3vw,32px);
}
.extension__avertissement{
  margin:0 0 18px;padding:10px 14px;border-left:3px solid var(--or-texte);background:var(--snow);
  color:var(--ink);font-weight:600;font-size:15px;line-height:1.5;
}
.extension__introduction{color:var(--ink)}
.extension__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:18px 0 24px}
.extension__prix span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--or-texte)}
.extension__prix strong{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink)}
.extension__mention{font-style:normal;font-size:14px;color:var(--muted)}
.extension .vdr-day__num-label{letter-spacing:.08em}

/* ============ GALERIES PHOTOS ============
   Liste en cartes (.cards du catalogue) et page d'une galerie en rangées justifiées.
   Aucune photo n'est recadrée : un bandeau large (GaleriePhoto::estBandeau) garde ses
   proportions, dans sa carte comme dans la grille. Couples texte et fond vérifiés par
   tests/Unit/GaleriesContrasteTest.php. */
.cards--galeries{list-style:none;margin:0;padding:0}
.cards--galeries > li{display:flex}
.cards--galeries .card{flex:1}
/* Couverture en bandeau : entière dans la carte, sur le fond sombre, jamais coupée. */
.card__media--bandeau{background:var(--ink)}
.card__media--bandeau img{object-fit:contain}

.album-voyage{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:0 0 26px;padding:14px 18px;border-left:3px solid var(--or);border-radius:var(--r);
  background:var(--warm);color:var(--text);font-size:15px;
}
.album-voyage__lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--or-texte)}
.album-voyage a{color:var(--ocean);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Rangées justifiées : chaque case a les proportions exactes de sa photo (--ratio,
   posé par la vue) ; sa base est proportionnelle, et elle grandit à proportion de son
   ratio, si bien que toutes les cases d'une rangée ont la même hauteur. Le dernier
   pseudo-élément absorbe la place restante de la dernière rangée, qui n'est pas
   étirée. Une photo plus large que l'écran rétrécit en gardant ses proportions. */
.album{--h:250px;display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.album::after{content:'';flex-grow:999999}
.album__item{position:relative;flex:var(--ratio) 1 calc(var(--ratio) * var(--h));max-width:100%;margin:0}
.album__lien{display:block;aspect-ratio:var(--ratio);overflow:hidden;border-radius:var(--r);background:var(--frost)}
.album__lien img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.album__lien:hover img{transform:scale(1.03)}
.album__lien:focus-visible{outline:3px solid var(--or-texte);outline-offset:3px}
.album__legende{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
@media (max-width:700px){.album{--h:150px;gap:6px}}

/* Visionneuse : la photo en grand sur fond bleu nuit, texte clair, boutons pleins. */
.visionneuse{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink);color:var(--snow);overflow:hidden;
}
.visionneuse[open]{display:grid;grid-template-rows:1fr auto}
.visionneuse::backdrop{background:rgba(10,31,51,.92)}
.visionneuse__figure{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:0;margin:0;padding:64px 72px 12px;touch-action:pan-y;
}
.visionneuse__image{
  display:block;max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;
  object-fit:contain;transition:opacity .2s ease;
}
.visionneuse.is-chargement .visionneuse__image{opacity:.35}
.visionneuse__legende{max-width:60ch;text-align:center;font-size:15px;line-height:1.5;color:var(--snow)}
.visionneuse__compteur{margin:0;padding:0 16px 18px;text-align:center;font-size:13px;letter-spacing:.08em;color:var(--or-clair)}
.visionneuse__bouton{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  background:var(--deep);color:var(--snow);font:600 15px/1 var(--sans);
}
.visionneuse__bouton:hover{background:var(--ocean)}
.visionneuse__bouton:focus-visible{outline:3px solid var(--or-clair);outline-offset:2px}
.visionneuse__bouton:disabled{opacity:.35;cursor:default}
.visionneuse__fermer{top:12px;right:12px}
.visionneuse__precedente,.visionneuse__suivante{top:50%;transform:translateY(-50%);font-size:30px;padding:0}
.visionneuse__precedente{left:12px}
.visionneuse__suivante{right:12px}
@media (max-width:700px){
  .visionneuse__figure{padding:64px 8px 8px}
  .visionneuse__precedente,.visionneuse__suivante{top:auto;bottom:10px;transform:none}
  .visionneuse__compteur{padding-bottom:22px}
}

/* ============ AVIS DES VOYAGEURS (lot 15) ============
   Formulaire /donner-mon-avis, sur la base du formulaire de demande (.demande). Les cœurs
   sont des boutons radio : l'ordre du document va de 6 à 1, affiché de 1 à 6 (row-reverse),
   pour qu'un cœur coché remplisse aussi ceux d'avant. Cœur vide en gris (5,4:1), plein en
   or de texte (5,09:1 sur blanc), assez contrastés pour un indicateur. */
.avis__groupe{border:0;margin:0 0 26px;padding:0;min-width:0}
.avis__legende{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin-bottom:12px;padding:0}
.avis__aide{font-size:14px;color:var(--muted);margin:-4px 0 12px}
.coeurs{display:inline-flex;flex-direction:row-reverse;gap:6px}
.coeurs__choix{position:absolute;opacity:0;width:1px;height:1px}
.coeurs__coeur{cursor:pointer;font-size:34px;line-height:1;color:var(--muted)}
.coeurs__coeur::before{content:'\2661'}
.coeurs__choix:checked ~ .coeurs__coeur,
.coeurs__coeur:hover,
.coeurs__coeur:hover ~ .coeurs__coeur{color:var(--or-texte)}
.coeurs__choix:checked ~ .coeurs__coeur::before,
.coeurs__coeur:hover::before,
.coeurs__coeur:hover ~ .coeurs__coeur::before{content:'\2665'}
.coeurs__choix:focus-visible + .coeurs__coeur{outline:3px solid var(--or-texte);outline-offset:2px;border-radius:4px}
.avis__coeurs[aria-invalid="true"] .coeurs__coeur{color:var(--alert)}
.avis__photos{list-style:none;margin:6px 0 0;padding:0;font-size:14px;color:var(--text)}
.avis__photo{padding:4px 0}
.avis__photo--alerte{color:var(--alert)}
.avis__consentement{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14.5px;color:var(--text)}
.avis__consentement input{margin-top:4px;flex:none}
.avis .demande__champ select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #6b7c8c;border-radius:6px;padding:10px 12px;width:100%;box-sizing:border-box}
/* Masqué par le script (un autre voyage, autorisation des photos) : l'attribut l'emporte sur la grille. */
.avis [hidden]{display:none!important}

/* ============ PHOTOS DE L'ACCUEIL (lot 15) ============
   Section entre le calendrier et les avis (App\Support\PhotosAccueil) : un album, cinq photos en
   mosaïque de quatre colonnes. La première occupe deux colonnes sur deux rangées, les
   autres remplissent exactement les cases restantes : aucun trou, quel que soit le
   nombre de photos, de une à cinq. Sur téléphone, deux colonnes, même principe.
   Pastille « En ce moment » : rouge 5,27:1 sur ice, pulsation douce, arrêtée par
   prefers-reduced-motion (règle générale plus haut). */
.pastille-direct{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c62828;margin-right:10px;vertical-align:1px;animation:pastille-direct 2.4s ease-out infinite}
@keyframes pastille-direct{
  0%{box-shadow:0 0 0 0 rgba(198,40,40,.45)}
  70%{box-shadow:0 0 0 8px rgba(198,40,40,0)}
  100%{box-shadow:0 0 0 0 rgba(198,40,40,0)}
}
.sec-head__actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.lien-secondaire{font-size:14.5px;font-weight:600;color:var(--ocean);text-decoration:underline;text-underline-offset:3px}
.lien-secondaire:hover{color:var(--deep)}
.mosaique-album{margin:0}
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;text-decoration:none}
.mosaique:focus-visible{outline:3px solid var(--or-texte);outline-offset:4px;border-radius:var(--r)}
.mosaique__ph{display:block;overflow:hidden;border-radius:var(--r);background:var(--frost)}
.mosaique__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaique:hover .mosaique__ph img{transform:scale(1.03)}
.mosaique .mosaique__ph:first-child{grid-column:span 2;grid-row:span 2}
.mosaique--1 .mosaique__ph:first-child{grid-column:span 4}
.mosaique--2 .mosaique__ph:nth-child(2){grid-column:span 2;grid-row:span 2}
.mosaique--3 .mosaique__ph:nth-child(n+2){grid-column:span 2}
.mosaique--4 .mosaique__ph:nth-child(2){grid-column:span 2}
.mosaique__legende{margin-top:12px;font-size:13.5px;color:var(--muted)}
@media (max-width:700px){
  .sec-head__actions{align-items:flex-start}
  .mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:135px}
  .mosaique .mosaique__ph:nth-child(n+2){grid-column:auto;grid-row:auto}
  .mosaique--1 .mosaique__ph:first-child{grid-column:span 2}
  .mosaique--2 .mosaique__ph:nth-child(2),
  .mosaique--4 .mosaique__ph:nth-child(2){grid-column:span 2}
}

/* Lien de connexion du pied de page : discret, dans la ligne du bas. */
.foot .foot__bot a.foot__connexion{display:inline;padding:0;color:rgba(255,255,255,.58)}
.foot .foot__bot a.foot__connexion:hover{color:var(--snow)}

/* ============ AVIS EN LIGNE (lot 15, phase 2) ============
   Un avis entier (.temoignage) : rubrique /avis et fiches de voyage. Trois extraits
   sur l'accueil (.extrait), sur fond chaud (.section--warm) : bleu nuit, bleu pâle,
   blanc, chaud, jamais deux fonds identiques à la suite. Cœurs en or de texte (5,09:1
   sur blanc), doublés de la note en toutes lettres. La réponse de l'agence est un
   bloc à part, sur bleu glace, filet bleu à gauche : jamais mêlée au texte du client. */
.section--warm{background:var(--warm);border-block:1px solid var(--rule)}
.wrap.temoignages{max-width:880px;display:grid;gap:22px}
.temoignages__tete{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.temoignages__moyenne{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--muted)}
.temoignages__chiffre{font-family:var(--serif);font-size:40px;line-height:1;color:var(--ink);font-weight:500}
.temoignages__nombre{margin:0;color:var(--muted);font-weight:600}
.temoignage{background:var(--snow);border:1px solid var(--rule);border-radius:var(--r);padding:26px 28px;scroll-margin-top:90px}
.temoignage__tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap}
.temoignage__voyage{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.25;color:var(--ink);margin:0}
.temoignage__note{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.temoignage__coeurs{color:var(--or-texte);font-size:18px;letter-spacing:.08em;margin-right:4px}
.temoignage__textes{margin-top:16px;display:grid;gap:14px}
.temoignage__question{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--muted);margin:0 0 4px}
.temoignage__bloc p{margin:0 0 8px;line-height:1.6;color:var(--text)}
.temoignage__bloc p:last-child{margin-bottom:0}
.temoignage__photos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.temoignage__photos a{display:block;border-radius:var(--r);overflow:hidden}
.temoignage__photos img{display:block;width:120px;height:90px;object-fit:cover}
.temoignage__pied{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-size:14px;color:var(--muted)}
.temoignage__signature{margin:0;font-weight:700;color:var(--ink)}
.temoignage__date{margin:0}
.temoignage__lien{margin-left:auto;font-weight:600;color:var(--ocean)}
.temoignage__reponse{margin-top:18px;background:var(--ice);border-left:3px solid var(--ocean);border-radius:var(--r);padding:14px 18px;color:var(--text)}
.temoignage__reponse-tete{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--deep)}
.temoignage__reponse p{margin:0 0 6px;line-height:1.55}
.temoignage__reponse p:last-child{margin-bottom:0}
.extraits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.extrait{background:var(--snow);border:1px solid var(--rule);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.extrait__voyage{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.extrait__marque{margin:4px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--muted)}
.extrait__texte{margin:0;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--italique)}
.extrait__texte p{margin:0}
.extrait__signature{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.extrait__lien{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:600;color:var(--ocean)}
.avis-fiche{margin-block:40px}
.avis-fiche__intro{margin:0 0 18px;color:var(--muted)}
.avis-fiche__intro a{color:var(--ocean);font-weight:600}
.avis-fiche .temoignage + .temoignage{margin-top:16px}
.album-avis{margin:36px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-family:var(--serif);font-size:19px;color:var(--ink)}
@media (max-width:860px){.extraits{grid-template-columns:1fr}}
@media (max-width:700px){
  .temoignage{padding:20px 18px}
  .temoignage__lien{margin-left:0}
}
/* Accueil sans avis publié : une invitation courte, centrée, à la place des extraits. */
.invitation-avis{max-width:640px;margin:0 auto;text-align:center}
.invitation-avis .sec-lead{margin-inline:auto}
.invitation-avis .actions{margin-top:24px}

/* Logo du partenaire, au-dessus du surtitre de l'encart sombre de l'accueil : une image
   de 288 px sans perte (TraitementPhoto::LOGO_PARTENAIRE_LARGEUR, calculée sur ces deux
   tailles : à changer ensemble). Son disque porte son propre fond ; pas de disque blanc. */
.partenaire__logo{display:block;width:128px;height:auto;margin:0 auto 22px}
@media (max-width:700px){.partenaire__logo{width:96px}}

/* Appel à suivre la page Facebook (#suivre-facebook), entre les chiffres et le calendrier :
   un bandeau à lui, bleu pâle et plus serré qu'une section, jamais une colonne de plus des
   chiffres. Bouton doré, f et texte bleu nuit (8,1:1) : la lettre fait la reconnaissance,
   pas le bleu de Facebook, qui jurerait avec la palette. */
#suivre-facebook{padding-block:clamp(26px,3.5vw,38px)}
.suivre{display:flex;align-items:center;justify-content:center;gap:14px 28px;flex-wrap:wrap;text-align:center}
.suivre__texte{margin:0;font-family:var(--serif);font-size:clamp(18px,2.2vw,21px);color:var(--ink);max-width:40ch}
.suivre__bouton{display:inline-flex;align-items:center;gap:10px}
.suivre__f{flex:none;display:block}

/* Page introuvable (errors/404) : le texte et deux chemins, centrés. */
.introuvable__in{max-width:640px;text-align:center;padding-block:clamp(48px,8vw,96px)}
.introuvable__chemins{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:10px}