/* ==========================================================================
   LastMinute.Life — feuille de style
   Direction artistique : éditoriale, titres monumentaux en capitales,
   collages d'images, sections en couleur pleine alternées.
   Typographie : Fraunces (titres), Playfair Display (corps), Lato (libellés).
   Palette : bordeaux #7A1F35, crème, sable, laiton, encre brune.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  --bordeaux: #7a1f35;
  --bordeaux-fonce: #5c1728;
  --bordeaux-clair: #9c3049;
  --laiton: #b08d4f;
  --laiton-clair: #d9bd86;
  /* Le laiton d'origine sert d'accent ; en petit texte il manque de
     contraste sur le crème. Cette version foncée est réservée aux libellés. */
  --laiton-texte: #8a6a2e;
  --sable: #ece2d5;
  --sable-fonce: #ded0bd;
  --creme: #fbf7f2;
  --creme-chaud: #f5eee4;
  --rose-poudre: #efdfdd;
  --blanc: #ffffff;
  --encre: #2b2420;
  --encre-douce: #6d6059;
  --filet: #e2d7c9;

  --display: "Fraunces", Georgia, serif;
  /* Playfair Display pour le texte courant : une serif de caractère, qui
     tire le site vers le magazine de voyage. Lato reste sur les petites
     capitales, les boutons et le menu — en corps 12 à 16 px et en capitales
     espacées, une serif contrastée devient illisible. */
  --texte: "Playfair Display", Georgia, "Times New Roman", serif;
  --label: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --largeur: 1160px;
  --largeur-texte: 680px;
  --gouttiere: 24px;
  --rayon-image: 14px;
  --ombre-douce: 0 2px 8px rgba(92, 23, 40, 0.06), 0 8px 24px rgba(92, 23, 40, 0.07);
  --ombre-moyenne: 0 4px 14px rgba(92, 23, 40, 0.09), 0 16px 40px rgba(92, 23, 40, 0.11);
  --ombre-forte: 0 8px 22px rgba(92, 23, 40, 0.13), 0 26px 60px rgba(92, 23, 40, 0.16);
  --transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  /* Playfair a un fort contraste entre pleins et déliés : elle demande un
     peu plus de corps et surtout plus d'air entre les lignes qu'une sans. */
  font-size: 18px;
  line-height: 1.78;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  body { font-size: 17px; line-height: 1.72; }
}

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

a {
  color: var(--bordeaux);
  text-decoration-color: var(--laiton-clair);
  text-underline-offset: 5px;
  transition: color var(--transition);
}

a:hover { color: var(--laiton); }

/* --- Titres : capitales monumentales -------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--bordeaux);
  margin: 0 0 0.35em;
  /* SOFT arrondit les angles, WONK active les formes fantaisistes :
     c'est ce qui rend Fraunces chaleureuse plutôt que sévère. */
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-optical-sizing: auto;
}

h1, h2 {
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.25rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.1rem); }

h3 {
  font-size: clamp(1.38rem, 2.4vw, 1.82rem);
  line-height: 1.26;
  letter-spacing: 0;
}

h4 { font-family: var(--label); font-size: 1.05rem; margin: 0 0 0.7em; }

/* Colonne étroite : le titre de carte reste grand, mais pas au point de
   passer sur trois lignes. */
.grille-4 h3 { font-size: clamp(1.2rem, 1.62vw, 1.52rem); }

h1 em, h2 em, h3 em {
  font-style: italic;
  text-transform: none;
  color: var(--laiton);
  letter-spacing: 0;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

::selection { background: var(--rose-poudre); color: var(--bordeaux); }

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.wrap-texte {
  width: 100%;
  max-width: var(--largeur-texte);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

section { padding: clamp(48px, 5.4vw, 80px) 0; }

.section-creme { background: var(--creme-chaud); }
.section-blanche { background: var(--creme); }
.section-sable { background: var(--sable); }
.section-poudre { background: var(--rose-poudre); }

/* Section en couleur pleine — l'équivalent des grands aplats */
.section-verte {
  background: var(--bordeaux);
  color: rgba(255, 255, 255, 0.86);
}

.section-verte h2,
.section-verte h3 { color: var(--creme); }
.section-verte h2 em,
.section-verte h3 em { color: var(--laiton-clair); }
.section-verte a { color: var(--laiton-clair); }
.section-verte .surtitre { color: var(--laiton-clair); }
.section-verte .chapo { color: rgba(255, 255, 255, 0.82); }

/* --- Surtitre très espacé ------------------------------------------------- */
.surtitre {
  font-family: var(--label);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin: 0 0 0.85em;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .surtitre { font-size: 0.9rem; letter-spacing: 0.14em; }
}

.chapo {
  font-size: 1.14rem;
  color: var(--encre-douce);
  max-width: 60ch;
  margin-top: 1.6em;
}

.centre { text-align: center; }
.centre .chapo { margin-left: auto; margin-right: auto; }

.filet {
  border: 0;
  height: 1px;
  background: var(--filet);
  margin: clamp(34px, 4.4vw, 56px) 0;
}

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

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  line-height: 1.4;
}

.btn-principal {
  background: var(--bordeaux);
  color: var(--creme);
  border-color: var(--bordeaux);
}

/* Au survol le bouton s'éclaircit jusqu'au blanc crème, et il passe au sable
   au moment du clic : le bouton répond visiblement au doigt ou à la souris,
   et il reste dans la palette du site. */
.btn-principal:hover,
.btn-principal:focus-visible {
  background: var(--creme);
  border-color: var(--bordeaux);
  color: var(--bordeaux);
}

.btn-principal:active {
  background: var(--sable);
  border-color: var(--bordeaux);
  color: var(--bordeaux-fonce);
}

.btn-secondaire {
  background: transparent;
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

.btn-secondaire:hover {
  background: var(--bordeaux);
  color: var(--creme);
}

.section-verte .btn-principal {
  background: var(--laiton-clair);
  border-color: var(--laiton-clair);
  color: var(--bordeaux-fonce);
}

.section-verte .btn-principal:hover {
  background: var(--creme);
  border-color: var(--creme);
}

.section-verte .btn-secondaire,
.hero-contenu .btn-secondaire {
  color: var(--creme);
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

.section-verte .btn-secondaire:hover,
.hero-contenu .btn-secondaire:hover {
  background: var(--creme);
  color: var(--bordeaux);
  border-color: var(--creme);
}

/* Lien souligné en capitales, pour les appels secondaires */
.lien-souligne {
  font-family: var(--label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--laiton);
  padding-bottom: 5px;
  display: inline-block;
}

.duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.centre .duo-boutons { justify-content: center; }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 242, 0.985);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}

/* L'en-tête n'est pas un bloc de lecture : il garde une largeur plus
   généreuse que le contenu, sinon la navigation déborde sur grand écran. */
.entete .wrap { max-width: 1330px; }

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}

.logo {
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bordeaux);
  text-decoration: none;
  white-space: nowrap;
}

.logo span { color: var(--laiton); }

.nav-liste {
  display: flex;
  align-items: center;
  gap: 23px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-liste a {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav-liste a:hover,
.nav-liste a[aria-current="page"] {
  color: var(--bordeaux);
  border-bottom-color: var(--laiton);
}

.nav-liste .btn { font-size: 0.66rem; padding: 12px 22px; letter-spacing: 0.18em; }
.nav-liste .btn:hover { border-bottom-color: transparent; }

/* Le bouton « Me contacter » est un bouton, pas un lien de menu : la règle
   générale .nav-liste a lui imposait l'encre foncée sur fond bordeaux, donc
   un texte presque illisible. On lui rend sa couleur claire, au repos comme
   au survol et au clic. */
.nav-liste .btn-principal { color: var(--creme); }

.nav-liste .btn-principal:hover,
.nav-liste .btn-principal:focus-visible {
  color: var(--bordeaux);
  border-bottom-color: transparent;
}

.nav-liste .btn-principal:active {
  color: var(--bordeaux-fonce);
  border-bottom-color: transparent;
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--bordeaux);
}

.burger svg { display: block; }

@media (max-width: 1140px) {
  .nav-liste { gap: 18px; }
  .nav-liste a { font-size: 0.64rem; letter-spacing: 0.1em; }
  .nav-liste .btn { padding: 12px 18px; letter-spacing: 0.12em; }
}

@media (max-width: 1020px) {
  .nav-liste { gap: 13px; }
  .nav-liste a { font-size: 0.6rem; letter-spacing: 0.05em; }
  .nav-liste .btn { font-size: 0.6rem; padding: 11px 14px; letter-spacing: 0.08em; }
  .entete .logo { font-size: 1.28rem; }
}

@media (max-width: 900px) {
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    background: var(--creme);
    border-bottom: 1px solid var(--filet);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .nav[data-ouvert="true"] { max-height: 84vh; overflow-y: auto; }

  .nav-liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gouttiere) 30px;
  }

  .nav-liste li { border-bottom: 1px solid var(--filet); }
  .nav-liste li:last-child { border: 0; padding-top: 22px; }
  .nav-liste a { display: block; padding: 17px 0; font-size: 0.8rem; letter-spacing: 0.18em; }
  .nav-liste .btn { display: block; font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   6. Fil d'Ariane
   -------------------------------------------------------------------------- */
.fil {
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 22px 0 0;
}

.fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.fil li::after {
  content: "/";
  margin-left: 10px;
  color: var(--laiton);
}

.fil li:last-child::after { content: ""; }
.fil a { color: var(--encre-douce); text-decoration: none; }
.fil a:hover { color: var(--bordeaux); }

/* --------------------------------------------------------------------------
   7. Bandeau d'ouverture
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bordeaux);
  overflow: hidden;
  padding: clamp(64px, 8.5vw, 116px) 0 clamp(56px, 7vw, 92px);
}

/* Image de fond, volontairement très en retrait :
   la typographie est le premier plan, pas la photo. */
.hero-media {
  position: absolute;
  inset: 0;
  /* La parallaxe agrandit la photo : sans découpe, elle élargit la page. */
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(0.25);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(122, 31, 53, 0.86) 0%, rgba(92, 23, 40, 0.94) 100%);
}

.hero-contenu {
  position: relative;
  z-index: 2;
  color: var(--creme);
  max-width: 17ch;
}

.hero-contenu h1 {
  color: var(--creme);
  margin-bottom: 0.3em;
}

.hero-contenu h1 em { color: var(--laiton-clair); }
.hero-contenu .surtitre { color: var(--laiton-clair); }

.hero-contenu p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.08rem;
  max-width: 52ch;
}

.hero-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 0;
  margin: 34px 0 0;
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
}

.hero-tags li::before { content: "— "; color: var(--laiton-clair); }

/* Le titre déborde volontairement de la colonne de texte, comme un
   élément graphique à part entière. */
.hero-contenu h1,
.hero-contenu .surtitre { max-width: none; }

.hero-contenu > p,
.hero-contenu > .duo-boutons,
.hero-contenu > .hero-tags,
.hero-contenu > .reperes { max-width: 640px; }

@media (min-width: 1000px) {
  .hero-contenu { max-width: 74%; }
}

/* --- Collage d'images superposées ---------------------------------------- */
.collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.collage figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(43, 36, 32, 0.22);
}

.collage img { width: 100%; height: 100%; object-fit: cover; }

.collage-vide {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  flex-direction: column;
  gap: 6px;
}

.collage .c1 { top: 6%;  right: 4%;  width: 20%; aspect-ratio: 3 / 4; }
.collage .c2 { top: 46%; right: 17%; width: 15%; aspect-ratio: 3 / 4; }
.collage .c3 { top: 62%; right: 2%;  width: 17%; aspect-ratio: 1 / 1; }

@media (max-width: 1100px) {
  .collage .c2 { display: none; }
  .collage .c1 { width: 24%; }
  .collage .c3 { width: 20%; }
}

@media (max-width: 820px) {
  .collage { display: none; }
  .hero-contenu { max-width: none; }
}

/* --- En-tête de page secondaire ------------------------------------------ */
.entete-page {
  background: var(--creme-chaud);
  padding: clamp(44px, 6vw, 78px) 0 clamp(44px, 6vw, 78px);
  border-bottom: 1px solid var(--filet);
}

.entete-page h1 { margin-bottom: 0.25em; }

/* --------------------------------------------------------------------------
   8. Repères
   -------------------------------------------------------------------------- */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--filet);
}

.reperes div {
  padding: 22px 26px 22px 0;
  border-bottom: 1px solid var(--filet);
}

.reperes dt {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 10px;
}

/* Les repères se trouvent aussi dans le bandeau d'ouverture, sur bordeaux :
   là, le laiton foncé serait illisible. */
.hero-contenu .reperes dt,
.section-verte .reperes dt,
.section-verte .encadre h3,
.section-verte .reassurance h3,
.section-verte .carte-meta,
.section-verte .article-meta,
.section-verte .maillage .etiquette { color: var(--laiton-clair); }

.reperes dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--bordeaux);
  line-height: 1.25;
}

.hero .reperes { border-top-color: rgba(255, 255, 255, 0.28); }
.hero .reperes div { border-bottom-color: rgba(255, 255, 255, 0.28); }
.hero .reperes dt { color: var(--laiton-clair); }
.hero .reperes dd { color: var(--creme); }

/* --------------------------------------------------------------------------
   9. Grilles et cartes
   -------------------------------------------------------------------------- */
.grille {
  display: grid;
  gap: clamp(26px, 3.4vw, 46px);
  margin-top: 44px;
}

.grille-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

/* Cartes sans boîte : un filet en haut, du blanc autour. */
.carte {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}

.carte:hover { border-top-color: var(--laiton); }

.carte-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sable);
  margin-top: 26px;
}

.carte-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition);
}

.carte:hover .carte-media img { transform: scale(1.045); }

.carte-corps {
  padding: 26px 0 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-corps h3 { margin-bottom: 0.45em; }

.carte-corps p {
  color: var(--encre-douce);
  font-size: 0.97rem;
}

.carte-meta {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laiton-texte);
}

.carte-meta a { color: var(--laiton); text-decoration: none; }

.carte-lien { text-decoration: none; color: inherit; display: flex; }

.section-verte .carte { border-top-color: rgba(255, 255, 255, 0.3); }
.section-verte .carte-corps p { color: rgba(255, 255, 255, 0.78); }

/* --- Vignettes destination ------------------------------------------------ */
.vignette {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.3;
  overflow: hidden;
  text-decoration: none;
  background: var(--bordeaux-fonce);
}

.vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--transition);
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 25, 30, 0.88) 0%, rgba(43, 25, 30, 0.2) 52%, rgba(43, 25, 30, 0.08) 100%);
  transition: background var(--transition);
}

.vignette:hover img { transform: scale(1.055); }

.vignette-texte {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 30px 26px;
  color: var(--blanc);
}

.vignette-texte h3 {
  color: var(--blanc);
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vignette-texte span {
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laiton-clair);
}

.vignette-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--sable) 0%, var(--rose-poudre) 100%);
  aspect-ratio: 3 / 4.3;
  padding: 30px;
  text-align: center;
  color: var(--bordeaux);
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   10. Étapes numérotées
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
  display: grid;
  gap: clamp(28px, 3.4vw, 50px);
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  counter-reset: etape;
}

.etapes li {
  border-top: 1px solid var(--filet);
  padding: 28px 0 0;
}

.etapes .num {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: 3.4rem;
  color: var(--laiton-clair);
  line-height: 1;
  margin-bottom: 20px;
}

.etapes h3 { font-size: clamp(1.3rem, 1.9vw, 1.62rem); margin-bottom: 0.5em; }
.etapes p { font-size: 1rem; color: var(--encre-douce); margin: 0; }

.section-verte .etapes li { border-top-color: rgba(255, 255, 255, 0.3); }
.section-verte .etapes p { color: rgba(255, 255, 255, 0.78); }

/* --------------------------------------------------------------------------
   11. Témoignages
   -------------------------------------------------------------------------- */
.temoignages {
  display: grid;
  gap: clamp(28px, 3.4vw, 46px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 44px;
}

.temoignage {
  border-top: 1px solid var(--filet);
  padding: 30px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.temoignage blockquote {
  margin: 0 0 26px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--bordeaux);
  font-style: italic;
}

.temoignage blockquote::before { content: "« "; color: var(--laiton); }
.temoignage blockquote::after { content: " »"; color: var(--laiton); }

.temoignage figcaption { margin-top: auto; }

.temoignage .nom {
  display: block;
  font-family: var(--label);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre);
}

.temoignage .contexte {
  display: block;
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-top: 8px;
}

.temoignage .date {
  display: block;
  font-size: 0.84rem;
  color: var(--encre-douce);
  margin-top: 8px;
}

.section-verte .temoignage { border-top-color: rgba(255, 255, 255, 0.3); }
.section-verte .temoignage blockquote { color: var(--creme); }
.section-verte .temoignage .nom { color: var(--creme); }
.section-verte .temoignage .date { color: rgba(255, 255, 255, 0.7); }

.temoignage-photo {
  aspect-ratio: 16 / 10;
  margin: 0 0 26px;
  overflow: hidden;
  background: var(--sable);
}

.temoignage-photo img { width: 100%; height: 100%; object-fit: cover; }

.renvoi-avis {
  margin-top: 44px;
  border-top: 1px solid var(--filet);
  padding: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

/* Variante placée en tête de section, juste sous le titre : pas de filet
   au-dessus, on ne sépare rien. */
.renvoi-avis-tete {
  margin-top: 30px;
  border-top: none;
  padding-top: 0;
}

.renvoi-avis p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.97rem;
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   12. Encadrés
   -------------------------------------------------------------------------- */
.encadre {
  background: var(--sable);
  padding: 34px 38px;
  margin: 40px 0;
}

.encadre h3 {
  font-family: var(--label);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 1.2em;
}

.encadre p:last-child { margin-bottom: 0; }

.section-verte .encadre {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.section-verte .encadre h3 { color: var(--laiton-clair); }

.encadre-a-completer {
  background: #fdf1e8;
  border-left: 3px solid var(--laiton);
}

.encadre-a-completer h3 { color: var(--laiton); }
.encadre-a-completer h3::before { content: "À compléter — "; }

/* Marqueur de contenu à renseigner : volontairement très visible. */
.a-completer {
  background: #f8e4d4;
  color: #8a5a20;
  border-bottom: 1px dashed var(--laiton);
  padding: 1px 6px;
  font-style: italic;
}

.a-completer::before { content: "⚑ "; }

.collage-vide small,
.vignette-vide small,
.duo-image-vide small,
.auteur-vide small,
.carte-lieu-vide small {
  font-size: 0.86em;
  opacity: 0.72;
  letter-spacing: 0.04em;
}

/* Sur fond bordeaux, le marqueur reste visible sans hurler. */
.hero .a-completer,
.section-verte .a-completer {
  background: rgba(255, 255, 255, 0.14);
  color: var(--laiton-clair);
  border-bottom-color: var(--laiton-clair);
  font-size: 0.8em;
}

.hero .reperes dd .a-completer { display: inline-block; line-height: 1.5; }

/* --------------------------------------------------------------------------
   13. Listes éditoriales
   -------------------------------------------------------------------------- */
.liste-tirets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.liste-tirets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.85em;
}

.liste-tirets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--laiton);
}

/* Erreurs : grands numéros dans la marge */
.erreurs {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
  counter-reset: erreur;
}

.erreurs li {
  counter-increment: erreur;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  border-top: 1px solid var(--filet);
  padding: 32px 0;
}

.erreurs li::before {
  content: counter(erreur, decimal-leading-zero);
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: 2.9rem;
  line-height: 0.9;
  color: var(--laiton-clair);
}

.erreurs h3 { margin-bottom: 0.45em; }
.erreurs p { margin: 0; color: var(--encre-douce); font-size: 1rem; }

.section-verte .erreurs li { border-top-color: rgba(255, 255, 255, 0.3); }
.section-verte .erreurs p { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 620px) {
  .erreurs li { grid-template-columns: 1fr; gap: 10px; }
  .erreurs li::before { font-size: 2.2rem; }
}

/* --------------------------------------------------------------------------
   14. Tableaux
   -------------------------------------------------------------------------- */
.tableau-enveloppe {
  overflow-x: auto;
  margin-top: 40px;
  border-top: 1px solid var(--filet);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 560px;
}

th, td {
  text-align: left;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

thead th {
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  font-weight: 500;
  padding-top: 20px;
  padding-bottom: 20px;
}

tbody th {
  font-family: var(--label);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bordeaux);
  white-space: nowrap;
}

tbody td { color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   15. Itinéraires
   -------------------------------------------------------------------------- */
.itineraire {
  border-top: 2px solid var(--bordeaux);
  margin-top: 44px;
  padding-top: 40px;
}

.itineraire-entete { margin-bottom: 30px; }

.itineraire-entete .duree {
  font-family: var(--label);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 1em;
}

.itineraire-entete h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 0.4em;
}

.itineraire-entete p { color: var(--encre-douce); max-width: 60ch; }

.jour { border-bottom: 1px solid var(--filet); }
.jour:first-of-type { border-top: 1px solid var(--filet); }

.jour summary {
  cursor: pointer;
  padding: 20px 0;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--bordeaux);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
  transition: color var(--transition);
}

.jour summary::-webkit-details-marker { display: none; }
.jour summary:hover { color: var(--laiton); }

.jour summary::before {
  content: "+";
  color: var(--laiton);
  font-family: var(--label);
  font-size: 1.05rem;
  width: 16px;
  flex-shrink: 0;
}

.jour[open] summary::before { content: "–"; }

.jour-corps {
  padding: 0 0 30px 34px;
  color: var(--encre-douce);
  font-size: 0.99rem;
  max-width: 68ch;
}

.jour-corps p:last-child { margin-bottom: 0; }

.inclus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: 34px;
}

.inclus h4 {
  font-family: var(--label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 1.3em;
  border-top: 1px solid var(--filet);
  padding-top: 20px;
}

.inclus ul { margin: 0; padding-left: 20px; font-size: 0.95rem; color: var(--encre-douce); }
.inclus li { margin-bottom: 0.6em; }

.carte-lieu { display: block; margin-top: 36px; }
.carte-lieu img { width: 100%; }

.carte-lieu-vide {
  background: var(--sable);
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px;
  color: var(--bordeaux);
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.8;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   16. Questions fréquentes
   -------------------------------------------------------------------------- */
.faq { margin-top: 40px; border-top: 1px solid var(--filet); }

.faq details { border-bottom: 1px solid var(--filet); }

.faq summary {
  cursor: pointer;
  padding: 26px 44px 26px 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.4;
  color: var(--bordeaux);
  list-style: none;
  position: relative;
  transition: color var(--transition);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--laiton); }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 27px;
  font-family: var(--label);
  color: var(--laiton);
  font-size: 1.1rem;
}

.faq details[open] summary::after { content: "–"; }

.faq .reponse { padding: 0 44px 30px 0; color: var(--encre-douce); }
.faq .reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Bloc auteur
   -------------------------------------------------------------------------- */
.auteur {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--filet);
  padding-top: 40px;
  margin-top: 36px;
}

.auteur img { width: 180px; height: 230px; object-fit: cover; }

.auteur-vide {
  width: 180px;
  height: 230px;
  background: var(--sable);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--label);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  padding: 14px;
  line-height: 1.7;
  flex-direction: column;
  gap: 6px;
}

.auteur h3 { margin-bottom: 0.45em; }
.auteur p { color: var(--encre-douce); font-size: 1.02rem; margin-bottom: 0; }

@media (max-width: 620px) {
  .auteur { grid-template-columns: 1fr; justify-items: start; }
}

/* --------------------------------------------------------------------------
   18. Deux colonnes
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 4.6vw, 72px);
  align-items: center;
}

.duo-image-vide {
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, var(--sable) 0%, var(--rose-poudre) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  color: var(--bordeaux);
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.9;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. Formulaire
   -------------------------------------------------------------------------- */
.formulaire {
  border-top: 2px solid var(--bordeaux);
  padding-top: 44px;
  margin-top: 38px;
}

.champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.champ { display: flex; flex-direction: column; }
.champ-large { grid-column: 1 / -1; }

.champ label {
  font-family: var(--label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 12px;
}

.champ .aide {
  font-family: var(--texte);
  font-size: 0.86rem;
  color: var(--encre-douce);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 9px;
  line-height: 1.6;
}

.facultatif {
  font-weight: 400;
  color: var(--encre-douce);
  letter-spacing: 0.14em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  padding: 11px 0;
  width: 100%;
  transition: border-color var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--bordeaux);
  outline: none;
}

input::placeholder, textarea::placeholder { color: #b5a798; }

textarea { min-height: 130px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b08d4f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 34px;
  cursor: pointer;
}

.consentement {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--texte);
  font-size: 0.9rem;
  color: var(--encre-douce);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 12px;
  line-height: 1.7;
}

.consentement input { margin-top: 6px; flex-shrink: 0; accent-color: var(--bordeaux); }

.formulaire-pied {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}

.formulaire-pied p {
  margin: 0;
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.miel { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   20. Double appel à l'action
   -------------------------------------------------------------------------- */
.double-cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 70px);
  margin-top: 44px;
  text-align: left;
}

.double-cta > div {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 32px;
}

.double-cta h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

.double-cta p { font-size: 0.99rem; }
.double-cta .btn { margin-top: 26px; }

.section-creme .double-cta > div,
.section-blanche .double-cta > div,
.section-sable .double-cta > div { border-top-color: var(--filet); }

.section-creme .double-cta p,
.section-blanche .double-cta p,
.section-sable .double-cta p { color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   21. Réassurance
   -------------------------------------------------------------------------- */
.reassurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(26px, 3.4vw, 48px);
  margin-top: 44px;
}

.reassurance div {
  border-top: 1px solid var(--filet);
  padding-top: 26px;
}

.reassurance h3 {
  font-family: var(--label);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 1.2em;
}

.reassurance p { font-size: 0.94rem; color: var(--encre-douce); margin: 0; }

.section-verte .reassurance div { border-top-color: rgba(255, 255, 255, 0.3); }
.section-verte .reassurance p { color: rgba(255, 255, 255, 0.78); }
.section-verte .reassurance h3 { color: var(--laiton-clair); }

/* --------------------------------------------------------------------------
   22. Article
   -------------------------------------------------------------------------- */
.article-corps {
  max-width: var(--largeur-texte);
  margin: 0 auto;
  font-size: 1.08rem;
}

.article-corps h2 {
  margin-top: 2em;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.article-corps h3 { margin-top: 1.7em; }
.article-corps ul { padding-left: 24px; margin-bottom: 1.4em; }
.article-corps li { margin-bottom: 0.6em; }

.article-corps blockquote {
  margin: 1.9em 0;
  padding: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--bordeaux);
}

.article-meta {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 1.8em;
}

/* --------------------------------------------------------------------------
   23. Maillage interne
   -------------------------------------------------------------------------- */
.maillage {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

.maillage li { border-top: 1px solid var(--filet); }

.maillage a {
  display: block;
  padding: 26px 0 0;
  text-decoration: none;
}

.maillage .etiquette {
  display: block;
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 12px;
}

.maillage .titre {
  display: block;
  font-family: var(--display);
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--bordeaux);
  text-transform: uppercase;
  transition: color var(--transition);
}

.maillage a:hover .titre { color: var(--laiton); }

/* --------------------------------------------------------------------------
   24. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--bordeaux-fonce);
  color: rgba(255, 255, 255, 0.76);
  padding: clamp(52px, 6vw, 84px) 0 34px;
  font-size: 0.93rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(34px, 5vw, 70px);
}

@media (max-width: 820px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .pied-grille { grid-template-columns: 1fr; }
}

.pied .logo { color: var(--creme); font-size: 1.5rem; }
.pied .logo span { color: var(--laiton-clair); }
.pied p { color: rgba(255, 255, 255, 0.68); max-width: 40ch; margin-top: 1.4em; }

.pied h3 {
  font-family: var(--label);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--laiton-clair);
  margin-bottom: 1.6em;
}

.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.85em; }

.pied a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.9rem;
}

.pied a:hover { color: var(--laiton-clair); }

.pied-bas {
  margin-top: clamp(36px, 4.4vw, 54px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: space-between;
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied-legal a { font-size: 0.66rem; letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   25. Divers
   -------------------------------------------------------------------------- */
.page-erreur {
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
}

@media (max-width: 560px) {
  .surtitre { letter-spacing: 0.2em; font-size: 0.64rem; }
  .hero-contenu p { font-size: 1rem; }
  .duo-boutons .btn { width: 100%; }
  .temoignage blockquote { font-size: 1.14rem; }
  .jour-corps { padding-left: 26px; }
  .encadre { padding: 26px 24px; }
}

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

@media print {
  .entete, .pied, .double-cta, .btn { display: none; }
  body { background: #fff; font-size: 12pt; }
}

/* Bloc de remplacement occupant tout son conteneur d'image */
.carte-media .vignette-vide {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   26. Note Google
   Affichage en texte uniquement : pas de balisage de note agrégée, qui est
   documenté comme non éligible aux étoiles pour une agence de voyage.
   -------------------------------------------------------------------------- */
.note-google {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  flex-wrap: wrap;
}

.note-google .note {
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--bordeaux);
  font-variation-settings: "SOFT" 60, "WONK" 0;
}

.note-google .etoiles {
  color: var(--laiton);
  font-size: 1rem;
  letter-spacing: 0.14em;
}

.note-google .nb {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.note-google:hover .nb { color: var(--bordeaux); }

/* Dans le bandeau d'ouverture, sur fond bordeaux */
.note-google-hero {
  margin-top: 28px;
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--transition);
}

.note-google-hero:hover { background: rgba(255, 255, 255, 0.13); }
.note-google-hero .note { color: var(--creme); }
.note-google-hero .etoiles { color: var(--laiton-clair); }
.note-google-hero .nb { color: rgba(255, 255, 255, 0.82); }
.note-google-hero:hover .nb { color: var(--creme); }

.hero-tags { margin-top: 26px; }

/* Citation mise en avant dans le corps de texte */
.citation {
  border-left: 2px solid var(--laiton);
  padding-left: 26px;
  margin: 1.8em 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--bordeaux);
  font-variation-settings: "SOFT" 60, "WONK" 0;
}

/* --------------------------------------------------------------------------
   27. Bandeau de consentement
   -------------------------------------------------------------------------- */
.consentement-bandeau {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--creme);
  border-top: 2px solid var(--bordeaux);
  box-shadow: 0 -10px 40px rgba(43, 36, 32, 0.14);
  padding: 26px var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 44px;
  transform: translateY(100%);
  transition: transform 0.45s var(--transition);
}

.consentement-bandeau[data-visible="true"] { transform: translateY(0); }

.consentement-texte { max-width: 62ch; }

.consentement-texte p { margin: 0 0 0.5em; font-size: 0.92rem; color: var(--encre-douce); }
.consentement-texte p:last-child { margin-bottom: 0; }
.consentement-texte strong { color: var(--bordeaux); }

.consentement-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.consentement-actions .btn { padding: 13px 26px; font-size: 0.68rem; }

@media (max-width: 680px) {
  .consentement-bandeau { padding: 22px 20px; gap: 18px; }
  .consentement-actions { width: 100%; }
  .consentement-actions .btn { flex: 1; }
}

/* Visuel d'ouverture d'article */
.article-visuel {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto clamp(40px, 5vw, 64px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Cartes de blog : image en paysage plutôt qu'en portrait */
.blog-grille .carte-media { aspect-ratio: 16 / 10; }


/* --------------------------------------------------------------------------
   28. Angles arrondis sur les images
   -------------------------------------------------------------------------- */
.carte-media,
.vignette,
.vignette-vide,
.collage figure,
.collage-vide,
.duo-image img,
.duo-image-vide,
.auteur img,
.auteur-vide,
.article-visuel,
.temoignage-photo,
.carte-lieu img,
.carte-lieu-vide {
  border-radius: var(--rayon-image);
  overflow: hidden;
}

/* Le bandeau d'ouverture reste à bord perdu, mais son bas s'arrondit
   légèrement pour rester dans la même famille de formes. */
.hero {
  border-bottom-left-radius: calc(var(--rayon-image) * 2);
  border-bottom-right-radius: calc(var(--rayon-image) * 2);
}

/* Le portrait du bloc auteur : un angle plus marqué, il est petit */
.auteur img,
.auteur-vide { border-radius: calc(var(--rayon-image) + 4px); }

/* Les boutons suivent discrètement */
.btn { border-radius: 6px; }
.case-choix span { border-radius: 40px; }

@media (max-width: 560px) {
  :root { --rayon-image: 10px; }
}


/* --------------------------------------------------------------------------
   29. Ombres et effets d'images
   Ombres teintées de bordeaux plutôt que de noir : elles réchauffent au lieu
   de salir. Tout est désactivé si le visiteur a demandé moins d'animations.
   -------------------------------------------------------------------------- */

/* --- Repos -------------------------------------------------------------- */
.carte-media,
.vignette,
.duo-image img,
.duo-image-vide,
.article-visuel,
.temoignage-photo,
.carte-lieu img,
.carte-lieu-vide,
.auteur img,
.auteur-vide {
  box-shadow: var(--ombre-douce);
}

/* --- Collage : profondeur différenciée par plan ------------------------- */
.collage figure { box-shadow: var(--ombre-forte); }
.collage .c1 { box-shadow: 0 10px 26px rgba(30, 8, 14, 0.24), 0 30px 70px rgba(30, 8, 14, 0.28); }
.collage .c2 { box-shadow: 0 6px 18px rgba(30, 8, 14, 0.20), 0 20px 50px rgba(30, 8, 14, 0.22); }
.collage .c3 { box-shadow: 0 12px 30px rgba(30, 8, 14, 0.26), 0 34px 80px rgba(30, 8, 14, 0.30); }

/* Le collage respire très légèrement, en décalé. Pas de va-et-vient :
   une seule dérive lente, à peine perceptible. */
@media (prefers-reduced-motion: no-preference) {
  .collage figure { animation: derive 14s ease-in-out infinite alternate; }
  .collage .c2 { animation-delay: -4.5s; animation-duration: 17s; }
  .collage .c3 { animation-delay: -9s; animation-duration: 12s; }
}

@keyframes derive {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-10px) rotate(-0.4deg); }
}

/* --- Cartes : élévation au survol --------------------------------------- */
.carte {
  transition: transform var(--transition), border-color var(--transition);
}

.carte:hover { transform: translateY(-4px); }

.carte:hover .carte-media { box-shadow: var(--ombre-moyenne); }

.carte-media { transition: box-shadow var(--transition); }

/* --- Vignettes destination ---------------------------------------------- */
.vignette {
  transition: transform var(--transition), box-shadow var(--transition);
}

.vignette:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-forte);
}

/* Le voile s'éclaircit au survol : l'image reprend la main */
.vignette:hover::after {
  background: linear-gradient(to top, rgba(43, 25, 30, 0.82) 0%, rgba(43, 25, 30, 0.12) 58%, rgba(43, 25, 30, 0) 100%);
}

/* Le texte de la vignette remonte légèrement */
.vignette-texte { transition: transform var(--transition); }
.vignette:hover .vignette-texte { transform: translateY(-5px); }

/* --- Images de contenu : léger relief au survol --------------------------
   L'ombre et le soulèvement passent par le cadre, pas par l'image : c'est le
   cadre qui découpe la parallaxe, une ombre posée sur l'image serait rognée. */
.duo-image {
  overflow: hidden;
  border-radius: var(--rayon-image);
  transition: box-shadow var(--transition), transform var(--transition);
}

.article-visuel {
  transition: box-shadow var(--transition), transform var(--transition);
}

.duo-image:hover,
.article-visuel:hover {
  box-shadow: var(--ombre-moyenne);
  transform: translateY(-3px);
}

/* --- Boutons : une ombre qui suit le clic -------------------------------- */
.btn-principal { box-shadow: 0 2px 8px rgba(92, 23, 40, 0.18); }

.btn-principal:hover {
  box-shadow: 0 6px 18px rgba(92, 23, 40, 0.26);
  transform: translateY(-2px);
}

.btn-principal:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(92, 23, 40, 0.2); }

.btn { transition: all var(--transition); }

/* --- Bandeau : une ombre portée sous le bord arrondi --------------------- */
.hero { box-shadow: 0 18px 50px rgba(92, 23, 40, 0.13); }

/* --- Apparition au défilement -------------------------------------------
   Les blocs montent de quelques pixels en se révélant. L'état de départ
   n'est appliqué que si le script a pris la main, pour que le contenu
   reste visible si le JavaScript ne se charge pas. */
[data-revele="attente"] {
  opacity: 0;
  transform: translateY(22px);
}

[data-revele="visible"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-revele="attente"] { opacity: 1; transform: none; }
  .collage figure { animation: none; }
  .carte:hover,
  .vignette:hover,
  .btn-principal:hover,
  .duo-image img:hover,
  .article-visuel:hover { transform: none; }
}

/* Bandeau sans photo : un aplat, pas un cadre vide */
.hero-sans-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--bordeaux) 0%, var(--bordeaux-fonce) 60%, #431019 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 26px;
}

/* Vignette de destination sans photo */
.vignette-sans-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--bordeaux) 0%, var(--bordeaux-fonce) 55%, #3f0f1a 100%);
}

/* --------------------------------------------------------------------------
   30. Effets liés au défilement
   Écrits avec les animations pilotées par le défilement (animation-timeline),
   qui tournent hors du fil principal : pas d'écouteur de scroll en
   JavaScript, donc aucun coût mesurable sur la fluidité.
   Les navigateurs qui ne les gèrent pas encore gardent l'apparition simple
   déjà en place — rien ne casse, l'effet est simplement absent.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* --- Révélation par volet ------------------------------------------
       Un voile bordeaux se retire de bas en haut pendant que l'image
       entre dans le champ. C'est l'effet principal : discret, mais on le
       remarque, et il reprend la couleur de la marque plutôt qu'un fondu
       gris quelconque. */
    .carte-media,
    .vignette,
    .duo-image,
    .article-visuel,
    .temoignage-photo {
      position: relative;
    }

    .carte-media::after,
    .vignette::before,
    .duo-image::after,
    .temoignage-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      background: var(--bordeaux);
      transform-origin: top;
      pointer-events: none;
      animation: volet linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 56%;
    }

    /* La vignette a déjà un ::after pour son dégradé : le volet passe
       par ::before, au-dessus du texte le temps de se retirer. */
    .vignette::before { z-index: 3; }

    @keyframes volet {
      from { transform: scaleY(1); }
      to   { transform: scaleY(0); }
    }

    /* --- Parallaxe interne ---------------------------------------------
       L'image glisse doucement dans son cadre pendant le défilement.
       Six pour cent de course : assez pour donner de la profondeur,
       trop peu pour donner le tournis. */
    .carte-media img,
    .vignette img,
    .duo-image img,
    .temoignage-photo img {
      animation: derive-interne linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }

    @keyframes derive-interne {
      from { transform: scale(1.2) translateY(-6%); }
      to   { transform: scale(1.04) translateY(6%); }
    }

    /* Le survol reprend la main sur la parallaxe */
    .carte:hover .carte-media img,
    .vignette:hover img { animation-play-state: paused; }

    /* --- Bandeau d'ouverture --------------------------------------------
       La photo de fond descend plus lentement que le texte, et le contenu
       s'efface légèrement en sortant. Deux effets classiques, dosés bas. */
    .hero-media img,
    .hero-sans-image {
      animation: hero-parallaxe linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }

    @keyframes hero-parallaxe {
      from { transform: scale(1.18) translateY(-2%); }
      to   { transform: scale(1.18) translateY(13%); }
    }

    .hero-contenu {
      animation: hero-sortie linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 78%;
    }

    @keyframes hero-sortie {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to   { opacity: 0.08; transform: translateY(-58px) scale(0.965); }
    }

    /* --- Titres de section ----------------------------------------------
       Les grands titres en capitales se posent en remontant de quelques
       pixels. Sur une typographie de cette taille, ça suffit. */
    section h2 {
      animation: titre-pose linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 58%;
    }

    @keyframes titre-pose {
      from { opacity: 0; transform: translateY(46px); clip-path: inset(0 0 100% 0); }
      60%  { opacity: 1; }
      to   { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -18% 0); }
    }

    /* --- Collage du bandeau ---------------------------------------------
       Les trois images du collage ne défilent pas à la même vitesse :
       c'est ce qui crée la profondeur, plus que les ombres. */
    .collage .c1 {
      animation: collage-plan-arriere linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }

    .collage .c3 {
      animation: collage-plan-avant linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }

    @keyframes collage-plan-arriere {
      from { transform: translateY(-14px) scale(0.97); }
      to   { transform: translateY(52px) scale(1.02); }
    }

    @keyframes collage-plan-avant {
      from { transform: translateY(18px) scale(1.03); }
      to   { transform: translateY(-58px) scale(0.98); }
    }

    /* --- Surtitres -------------------------------------------------------
       Le surtitre arrive par la gauche en ouvrant son interlettrage. Il
       part un peu avant le titre : c'est ce décalage qui donne l'impression
       que le bloc se met en place, plutôt que d'apparaître d'un coup. */
    section .surtitre {
      animation: surtitre-entree linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 46%;
    }

    @keyframes surtitre-entree {
      from { opacity: 0; transform: translateX(-16px); letter-spacing: 0.34em; }
      to   { opacity: 1; transform: translateX(0); letter-spacing: 0.24em; }
    }

    /* --- Textes d'accompagnement -----------------------------------------
       Chapô, paragraphes d'introduction, citations et boutons montent
       après le titre. Course courte, fondu doux : on veut une mise en
       place, pas une animation qu'on regarde. */
    section > .wrap > .chapo,
    section > .wrap-texte > .chapo,
    section > .wrap > p,
    section > .wrap-texte > p,
    .citation,
    section > .wrap > .duo-boutons,
    section > .wrap-texte > .duo-boutons {
      animation: texte-montee linear both;
      animation-timeline: view();
      animation-range: entry 14% entry 62%;
    }

    @keyframes texte-montee {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* La citation a droit à un peu plus : son filet laiton se dessine de
       haut en bas pendant que le texte monte. */
    .citation { position: relative; border-left-color: transparent; }

    .citation::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 0;
      width: 2px;
      height: 100%;
      background: var(--laiton);
      transform-origin: top;
      animation: citation-filet linear both;
      animation-timeline: view();
      animation-range: entry 16% entry 74%;
    }

    @keyframes citation-filet {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }

    /* --- Blocs en grille : arrivée décalée --------------------------------
       Les cartes d'une même rangée ne montent pas ensemble. Quatre crans de
       décalage suffisent à créer la cascade ; au-delà, ça traîne. */
    .grille > *,
    .reassurance > div,
    .etapes > li,
    .temoignages > .temoignage,
    .double-cta > div {
      animation: bloc-montee linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 58%;
    }

    @keyframes bloc-montee {
      from { opacity: 0; transform: translateY(44px) scale(0.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .grille > *:nth-child(2),
    .reassurance > div:nth-child(2),
    .etapes > li:nth-child(2),
    .temoignages > .temoignage:nth-child(2),
    .double-cta > div:nth-child(2) { animation-range: entry 16% entry 64%; }

    .grille > *:nth-child(3),
    .reassurance > div:nth-child(3),
    .etapes > li:nth-child(3),
    .temoignages > .temoignage:nth-child(3) { animation-range: entry 22% entry 70%; }

    .grille > *:nth-child(n + 4),
    .reassurance > div:nth-child(n + 4),
    .etapes > li:nth-child(n + 4) { animation-range: entry 28% entry 76%; }

    /* --- Listes à tirets et repères ---------------------------------------
       Chaque ligne arrive à son tour, très légèrement. */
    .liste-tirets > li,
    .inclus li {
      animation: ligne-entree linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }

    @keyframes ligne-entree {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* --- Itinéraires, questions, tableaux ----------------------------------
       Attention : la plage « entry » dure aussi longtemps que l'élément est
       haut. Sur un bloc plus haut que l'écran — un itinéraire complet, un
       tableau de douze mois — un fondu calé sur « entry » resterait à
       mi-course pendant tout le défilement, et le texte paraîtrait délavé.
       On n'anime donc que les blocs courts, et pour les longs on anime leur
       en-tête ou on resserre fortement la plage. */
    .faq details,
    .encadre,
    .itineraire-entete {
      animation: bloc-montee linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 56%;
    }

    .tableau-enveloppe {
      animation: bloc-montee linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 22%;
    }

    /* --- Image d'ouverture d'article --------------------------------------
       L'image est elle-même le cadre : on la dévoile par le bas au lieu de
       la faire glisser, sinon elle déborderait de sa place. */
    .article-visuel {
      animation: visuel-devoile linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 28%;
    }

    @keyframes visuel-devoile {
      from { clip-path: inset(0 0 100% 0); opacity: 0.6; }
      to   { clip-path: inset(0 0 0 0); opacity: 1; }
    }

    /* --- Grands chiffres des étapes ----------------------------------------
       Le numéro se pose en se rapprochant, comme un tampon. */
    /* Le numéro est un bloc : mis à l'échelle tel quel, il élargirait la
       colonne et ferait déborder la page sur mobile. On le réduit à la
       largeur de ses chiffres et on l'agrandit depuis la gauche. */
    .etapes .num {
      display: inline-block;
      transform-origin: left bottom;
      animation: num-pose linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 62%;
    }

    @keyframes num-pose {
      from { opacity: 0; transform: scale(1.35) translateY(10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* --- Respirations photographiques -------------------------------------
       La photo défile nettement plus lentement que la page et s'ouvre en
       même temps : c'est l'effet le plus visible du site, et le seul endroit
       où on peut se le permettre sans fatiguer le lecteur. */
    .respiration-media img {
      animation: respiration-plan linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }

    @keyframes respiration-plan {
      from { transform: scale(1.3) translateY(-9%); }
      to   { transform: scale(1.08) translateY(9%); }
    }

    .respiration-contenu {
      animation: respiration-texte linear both;
      animation-timeline: view();
      animation-range: entry 22% cover 42%;
    }

    @keyframes respiration-texte {
      from { opacity: 0; transform: translateY(54px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .respiration-phrase::after {
      animation: filet-trace linear both;
      animation-timeline: view();
      animation-range: entry 34% cover 46%;
    }

    @keyframes filet-trace {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* --- Filet de progression de lecture ---------------------------------
       Une ligne laiton sous l'en-tête, qui se remplit à mesure qu'on
       descend. Un seul élément, animé sans JavaScript. */
    .progression {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      z-index: 150;
      transform-origin: left;
      background: linear-gradient(to right, var(--laiton), var(--laiton-clair));
      animation: avancee linear both;
      animation-timeline: scroll(root);
    }

    @keyframes avancee {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
    /* Sur petit écran, on garde le volet mais on coupe la parallaxe :
       l'écran est trop court pour qu'elle apporte quoi que ce soit, et
       autant économiser le travail de composition. */
    .carte-media img,
    .vignette img,
    .duo-image img,
    .temoignage-photo img { animation: none; transform: none; }
    @keyframes respiration-plan {
      from { transform: scale(1.18) translateY(-5%); }
      to   { transform: scale(1.06) translateY(5%); }
    }
    .collage .c1, .collage .c3 { animation: none; }
    .carte-media::after,
    .vignette::before,
    .duo-image::after,
    .temoignage-photo::after { animation-range: entry 10% entry 40%; }
  }
}


/* ==========================================================================
   30 bis. AMBIANCE VOYAGE
   --------------------------------------------------------------------------
   Deux ajouts qui font la différence entre un site d'agence et un magazine
   de voyage : de grandes respirations photographiques pleine largeur, et un
   grain de papier très léger sur toute la page.
   ========================================================================== */

/* --- Respiration : un bandeau photo entre deux sections ------------------ */
.respiration {
  position: relative;
  padding: 0;
  min-height: min(70vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.respiration-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.respiration-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Un voile bordeaux, mais bien plus léger que celui du bandeau d'ouverture :
   ici c'est la photo qui doit parler, pas la couleur de marque. */
.respiration-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(50, 12, 22, 0.82) 0%, rgba(50, 12, 22, 0.34) 46%, rgba(50, 12, 22, 0.08) 100%),
    linear-gradient(to right, rgba(92, 23, 40, 0.38) 0%, rgba(92, 23, 40, 0) 62%);
}

.respiration-contenu {
  position: relative;
  z-index: 2;
  padding-top: clamp(60px, 9vw, 120px);
  padding-bottom: clamp(38px, 5.4vw, 72px);
}

.respiration .surtitre { color: var(--laiton-clair); }

.respiration-phrase {
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  color: var(--creme);
  max-width: 20ch;
  margin: 0;
  text-wrap: balance;
}

/* Un filet laiton court, posé sous la phrase : la signature graphique des
   grands bandeaux du site. */
.respiration-phrase::after {
  content: "";
  display: block;
  width: 96px;
  height: 2px;
  margin-top: clamp(20px, 2.4vw, 32px);
  background: var(--laiton-clair);
  transform-origin: left;
}

@media (max-width: 700px) {
  .respiration { min-height: 62vh; }
  .respiration-phrase { max-width: 16ch; }
}

/* --- Grain de papier ------------------------------------------------------
   Une trame très fine posée sur toute la page. On ne la voit pas, on la
   sent : les aplats de couleur cessent d'être parfaitement lisses, et
   l'ensemble prend un aspect imprimé plutôt que numérique. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

@media print {
  body::after { display: none; }
}

/* Sans les animations de défilement, le filet reste invisible plutôt que
   de rester plein en haut de page. */
.progression { transform: scaleX(0); }

/* ==========================================================================
   31. MASQUAGE DES BLOCS NON REMPLIS
   --------------------------------------------------------------------------
   Tant que les prix et les textes personnels ne sont pas écrits, on ne les
   montre pas aux visiteurs. On masque le marqueur orange ET le bloc qui
   l'entoure, sinon il resterait un intitulé sans réponse — « Fourchette
   indicative : » suivi de rien.

   La classe `bloc-incomplet` est posée à la génération sur les blocs qui
   n'auraient plus de contenu propre : une question sans réponse, une journée
   d'itinéraire vide, une section réduite à son titre.

   POUR TOUT REVOIR quand tu travailles sur le site : supprime les deux
   règles ci-dessous. Rien n'a été effacé, tout est encore dans les fichiers.
   ========================================================================== */

.a-completer,
.encadre-a-completer { display: none !important; }

.bloc-incomplet { display: none !important; }