/*
 * Polices servies depuis le domaine — aucun appel à Google Fonts.
 *
 * Cormorant Garamond pour les titres, Manrope pour le texte, sous-ensembles
 * `latin` et `latin-ext` uniquement : les quatre langues du site (français,
 * anglais, italien, allemand) tiennent dedans. Les graisses servies sont
 * exactement celles utilisées plus bas ; toute nouvelle graisse suppose
 * d'ajouter le fichier correspondant, sans quoi le navigateur la synthétise.
 *
 * `font-display: swap` : le texte s'affiche dans la pile système avant que les
 * fichiers n'arrivent, jamais d'écran vide.
 */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500-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: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-400-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: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-400-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: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope-500-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: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope-500-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: 600;
  font-display: swap;
  src: url("/assets/fonts/manrope-600-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: 600;
  font-display: swap;
  src: url("/assets/fonts/manrope-600-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;
}
/*
 * Feuille de style de base.
 *
 * Palette validée : vert profond, ivoire, bois clair, agave.
 */

:root {
  --vert-nuit: #101a14;
  /* Le vert profond et le vert des bandeaux ont été ramenés sur le vert nuit
     (demandé le 17 septembre 2026) : les trois jetons portent la même valeur.
     Chacun garde son rôle — bandeaux de titre pour l'un, boutons, section
     « sous les étoiles », bouton de retour en haut et filets pour l'autre — et
     les redissocier ne demande qu'une ligne. */
  --vert-profond: var(--vert-nuit);
  --vert-bandeau: var(--vert-nuit);
  --vert-profond-clair: #2c5540;
  --ivoire: #f7f3e9;
  --bois-clair: #b98d5b;
  --agave: #5f7a58;

  --papier: #fbfaf7;
  --neige: #f2efe7;
  /* Le doré du « 1860 » du logo vaut #c09249 (mesuré au cœur des traits).
     Tel quel il ne donne que 2,45:1 sur la neige, sous le seuil de 4,5:1 du
     petit texte : ce jeton en reprend la teinte (36,7° contre 36,8°) et la
     saturation, assombries au strict nécessaire — 5,02:1 sur le papier,
     4,56:1 sur la neige. */
  --or: #89662f;

  --couleur-fond: var(--papier);
  --couleur-texte: var(--vert-nuit);
  --couleur-lien: var(--vert-profond-clair);
  --couleur-accent: var(--bois-clair);
  /* Couleur du focus : elle doit tenir 3:1 sur le papier comme sur le vert
     profond, ce que le bois clair décoratif ne fait pas. */
  --couleur-focus: #a87c4a;
  --couleur-discrete: #4a544c;
  --couleur-erreur: #8f2313;
  --couleur-succes: #1d5637;
  --couleur-sur-sombre: #f2dfbf;

  --pile-titres: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pile-texte: Manrope, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --espace-xs: 0.5rem;
  --espace-s: 1rem;
  --espace-m: 1.5rem;
  --espace-l: 2.5rem;
  --largeur-texte: 42rem;
  --largeur-page: 78rem;
  --gouttiere: clamp(1.25rem, 4vw, 4.5rem);
}

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--pile-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* On ne charge que Cormorant 400/500 et Manrope 400/500/600. Si une graisse ou
     un italique non chargé est demandé par erreur, le navigateur doit retomber
     sur une vraie fonte, jamais en fabriquer une « en moins bien ». */
  font-synthesis: none;
}

h1,
h2,
h3 {
  font-family: var(--pile-titres);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--espace-s);
}

strong,
b {
  font-weight: 600;
}

h1 {
  font-size: 2rem;
}

p {
  margin: 0 0 var(--espace-s);
  max-width: var(--largeur-texte);
}

a {
  color: var(--couleur-lien);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--couleur-texte);
}

/* Le focus reste visible partout, y compris quand le survol change la couleur. */
:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}

/* Contenu réservé aux technologies d'assistance : retiré de l'affichage sans
   être retiré de l'arbre d'accessibilité — jamais `display: none`. */
.visuellement-cachee {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, jamais supprimé. */
.skip-link {
  position: absolute;
  left: var(--espace-s);
  top: -4rem;
  z-index: 30;
  padding: var(--espace-xs) var(--espace-s);
  background-color: var(--couleur-texte);
  color: var(--ivoire);
  text-decoration: none;
  transition: top 150ms ease-in-out;
}

.skip-link:focus {
  top: var(--espace-s);
}

/* `main` est toujours en pleine largeur ; ce sont les pages intérieures qui
   ramènent leur contenu dans une colonne de lecture. */
main {
  padding: 0;
}

/* Bandeau de titre des pages intérieures : même langage que l'ouverture de
   l'accueil, en aplat vert plutôt qu'en photo. Le bandeau supérieur se pose
   dessus, comme sur l'accueil. */
.page-hero {
  padding: clamp(9rem, 18vh, 12rem) var(--gouttiere) clamp(2.5rem, 5vw, 4rem);
  background-color: var(--vert-bandeau);
  color: var(--ivoire);
}

.page-hero-inner {
  max-width: var(--largeur-page);
  margin: 0 auto;
}

/* Les deux sur-titres d'ouverture — l'aplat des pages intérieures et la photo
   de l'accueil — gardent la petite taille : ils annoncent le `h1` juste en
   dessous, pas une section. */
.page-hero .eyebrow {
  color: var(--couleur-sur-sombre);
  font-size: 0.75rem;
}

.page-hero h1 {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
}

.page-body {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gouttiere);
}

/* --- Bandeau supérieur --- *
 *
 * Marque à gauche, navigation au centre, langues à droite : la disposition de la
 * v1. Sur l'accueil, ce bandeau se pose par-dessus la photo d'ouverture (voir
 * plus bas) ; sur les autres pages, où il n'y a pas d'image, il reste un bandeau
 * clair posé sur le papier.
 */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--espace-s) var(--espace-m);
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 1.4rem var(--gouttiere);
  border-bottom: 1px solid var(--agave);
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-brand {
  margin: 0;
}

.site-brand a {
  display: block;
}

/* Logo en surimpression sur une surface sombre (photo de l'accueil, aplat vert
   ailleurs) : le fichier est déjà en ivoire et or, pas de recoloration ici. La
   hauteur pilote la taille, la largeur suit le ratio du fichier. */
.site-logo {
  display: block;
  width: auto;
  height: clamp(2rem, 5.5vw, 4rem);
}

.site-brand-name {
  display: block;
  font-family: var(--pile-titres);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 0.85;
}

.site-brand-place {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.site-nav {
  justify-self: center;
}

.lang-nav {
  justify-self: end;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs) var(--espace-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav ul {
  gap: var(--espace-xs) clamp(0.9rem, 2.2vw, 2.4rem);
}

.site-nav a {
  display: inline-block;
  padding: 0.6rem 0;
  border-bottom: 1px solid transparent;
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav [aria-current="page"] {
  border-bottom-color: currentColor;
}

/* --- Sélecteur de langue --- *
 *
 * `details`/`summary` : le déroulé fonctionne sans JavaScript et au clavier. Le
 * bouton n'affiche que le drapeau et l'abréviation, pour rester étroit ; le nom
 * complet de la langue reste dans le nom accessible du lien.
 */

.lang-menu {
  position: relative;
}

.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid currentColor;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  /* Masque le triangle natif, sur les deux familles de moteurs. */
  list-style: none;
}

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

.lang-caret {
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
}

.lang-menu[open] .lang-caret {
  transform: translateY(0.06em) rotate(-135deg);
}

.lang-menu ul {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background-color: var(--papier);
  border: 1px solid var(--agave);
  box-shadow: 0 14px 30px rgba(16, 26, 20, 0.22);
}

.lang-menu ul a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  color: var(--couleur-texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.lang-menu ul a:hover {
  background-color: var(--neige);
}

.lang-flag {
  display: block;
  flex: none;
  width: 1.15rem;
  height: auto;
  border: 1px solid rgba(16, 26, 20, 0.3);
}

/* Le bandeau se pose sur la surface sombre qui ouvre chaque page : la photo sur
   l'accueil — c'est le bois de l'image qui fait le fond du menu — et l'aplat vert
   sur les pages intérieures. Le contraste du texte clair est garanti par le voile
   de `.hero` d'un côté, par l'aplat de l'autre. */
body {
  position: relative;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  max-width: none;
  padding-inline: var(--gouttiere);
  color: var(--ivoire);
  border-bottom-color: rgba(247, 243, 233, 0.22);
}

/* Le panneau déroulé reste clair, même par-dessus la photo : c'est une surface
   de choix, elle doit se lire sans dépendre de l'image. */
.page-home .lang-menu ul {
  border-color: rgba(16, 26, 20, 0.25);
}

/* Le bandeau s'empile plus tôt que les grilles du récit : quatre entrées de menu
   et quatre langues cessent de tenir sur une ligne bien avant. */
@media (max-width: 64rem) {
  /* Deux rangées : marque et sélecteur de langue côte à côte, menu en dessous
     sur toute la largeur. Une rangée de moins qu'un empilement complet, ce qui
     compte : le bandeau se pose sur la photo et ne doit pas manger le titre. */
  .site-header {
    grid-template-columns: 1fr auto;
    row-gap: var(--espace-s);
  }

  .site-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .lang-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .site-nav a {
    padding: 0.45rem 0;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .site-nav ul {
    gap: 0.2rem 0.9rem;
  }

  .page-home .hero-copy {
    padding-top: clamp(14rem, 28vh, 18rem);
  }

  .page-hero {
    padding-top: clamp(12rem, 24vh, 15rem);
  }
}

/* --- Pied de page --- *
 *
 * Sombre et en pleine largeur, comme la v1 : il ferme la page juste après
 * l'image de fin, elle-même sombre. Trois colonnes — marque, séjour,
 * informations — qui se replient en deux puis en une.
 */

.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) var(--gouttiere) 2rem;
  background-color: var(--vert-nuit);
  color: rgba(247, 243, 233, 0.74);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.7fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--largeur-page);
  margin: 0 auto;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover {
  color: var(--ivoire);
  border-bottom-color: currentColor;
}

/* Logo, e-mail et icône du pied partagent un même axe centré : le logo est
   ainsi centré par rapport à l'adresse de contact, juste en dessous. */
.footer-brand {
  text-align: center;
}

.footer-brand .site-brand a {
  color: var(--ivoire);
}

/* Le lien du logo est en bloc : le soulignement au survol des liens du pied
   traverserait toute la colonne sous l'image. */
.footer-brand .site-brand a,
.footer-brand .site-brand a:hover {
  border-bottom: 0;
}

.footer-brand .site-logo {
  margin-inline: auto;
}

.footer-brand .site-brand-name {
  font-size: 1.9rem;
}

/* Le pied de page reprend le logo image (comme l'en-tête), sur fond sombre.
   Agrandi de 30 % pour la lisibilité de « MONTGENÈVRE ». */
.footer-brand .site-logo {
  height: clamp(4.55rem, 7.8vw, 5.85rem);
}

.footer-brand .site-tagline {
  margin-top: var(--espace-s);
  color: var(--couleur-sur-sombre);
  font-family: var(--pile-titres);
  font-size: 1.25rem;
}

.footer-links h2 {
  margin-bottom: var(--espace-s);
  color: var(--ivoire);
  font-family: var(--pile-texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li + li {
  margin-top: 0.45rem;
}

.footer-legal {
  max-width: var(--largeur-page);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 243, 233, 0.16);
  color: rgba(247, 243, 233, 0.62);
  font-size: 0.72rem;
}

/* Mention provisoire : disparaîtra avec les contenus réels. */
.draft-notice {
  border-left: 4px solid var(--couleur-accent);
  padding-left: var(--espace-s);
  color: var(--couleur-discrete);
}

/* Seule exception à la règle « pas de `!important` » (voir CLAUDE.md) : sans
   lui, ce sélecteur universel perd face à toute transition déclarée sur une
   classe — bandeau collant, galerie, barre tarifs — et le mouvement continuait
   pour qui a demandé de le réduire. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------------- *
 * Accueil : le récit long.
 *
 * Toutes les grilles retombent à une colonne sous 900px, et le récit reste
 * lisible à 320px comme à 200 % de zoom : largeurs en `rem` et en `clamp()`,
 * jamais en pixels fixes.
 * ------------------------------------------------------------------------- */

.page-home main > section {
  padding-inline: var(--gouttiere);
}

/* Sections dont l'image occupe toute la largeur : la gouttière est portée par
   les colonnes de texte, pas par la section. */
.page-home .hero,
.page-home .kitchen,
.page-home .destination,
.page-home .closing {
  padding-inline: 0;
}

/* Pas d'approche négative sur Cormorant (corrigé le 18 octobre 2026) : la
   version servie pose les accents comme des signes séparés, et Chrome insère
   l'approche entre la lettre et son accent — « journée », « étoiles »,
   « Montgenèvre » s'affichaient l'accent décalé vers la droite. */
.titre {
  font-family: var(--pile-titres);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
}

/* Taille alignée sur celle qu'avaient déjà les sur-titres de la grille
   éditoriale (« Le logement », « En images », « Votre espace à vous », « Les
   soirées à LAO ») : c'est elle qui fait référence, et non l'ancien 0.75rem.
   Les deux ouvertures de page gardent la petite taille, voir plus bas. */
.eyebrow {
  color: var(--or);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--espace-xs);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 0.95rem 1.6rem;
  border: 0;
  background-color: var(--vert-profond);
  color: var(--ivoire);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.bouton:active {
  transform: translateY(1px);
}

.bouton:hover {
  background-color: var(--vert-profond-clair);
  color: var(--ivoire);
}

/* Action secondaire : un lien souligné, pas un bouton à contour. */
.bouton-discret {
  padding-inline: 0;
  background-color: transparent;
  color: var(--vert-profond);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.bouton-discret:hover {
  background-color: transparent;
  color: var(--vert-profond-clair);
  text-decoration-thickness: 2px;
}

/* Bouton plein sur la photo d'ouverture. */
.bouton-clair {
  background-color: var(--ivoire);
  color: var(--vert-nuit);
}

.bouton-clair:hover {
  background-color: var(--couleur-sur-sombre);
  color: var(--vert-nuit);
}

/* --- Ouverture --- */

.hero {
  position: relative;
  display: flex;
  /* Le bloc de texte part du haut, pas du bas : son premier mot tombe au même
     endroit quel que soit le nombre de lignes du titre — qui varie avec la
     langue et avec la largeur de la fenêtre. Aligné en bas, c'est le bloc entier
     qui descendait dès qu'une ligne manquait. */
  align-items: flex-start;
  /* Hauteur plancher ; au-delà de 64rem de large elle devient une hauteur fixe,
     voir plus bas — sinon le cadrage de la photo change avec la langue.
     En `svh` : sur mobile, `vh` change quand la barre d'adresse se replie au
     défilement, et toute la page sautait avec elle — le bandeau collant en
     dessous n'arrêtait pas de se recoller. `vh` reste en repli. */
  min-height: min(88vh, 46rem);
  min-height: min(88svh, 46rem);
  background-color: var(--vert-nuit);
  color: var(--ivoire);
  overflow: hidden;
}

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

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 56%;
}

/* Voile de lisibilité : sans lui, le texte blanc ne tient pas le contraste. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile allégé par rapport à la v1 (0,90 / 0,55 / 0,25). Les valeurs viennent
     d'une mesure de la photo elle-même : claire à gauche, sombre à droite. Au
     plus juste, le texte ivoire garde 5,8:1 sur le bandeau comme sur le titre —
     inutile d'assombrir plus, c'est du bois qu'on veut voir. */
  background-image:
    /* Halo local : l'écran du téléviseur, dans la photo, affiche une montagne
       enneigée quasi blanche (248, 254, 255) juste derrière le titre. Assombrir
       toute l'image pour ce seul endroit serait absurde ; ce halo ne touche que
       lui. Il est calé sur CETTE photo — la remplacer suppose de remesurer. */
    /* Voile limité à la hauteur du bandeau supérieur. Sur un écran très large,
       le cadrage remonte et amène une zone claire de la cuisine sous le menu,
       à droite, là où le dégradé horizontal est le plus faible. 0,35 suffit :
       mesuré à 5,5:1 en 1920 et 8,4:1 en 1440. */
    linear-gradient(180deg, rgba(7, 13, 9, 0.35) 0, rgba(7, 13, 9, 0.35) 6.5rem, transparent 11rem),
    radial-gradient(68% 54% at 45% 34%, rgba(7, 13, 9, 0.54), transparent 78%),
    linear-gradient(90deg, rgba(7, 13, 9, 0.62) 0%, rgba(7, 13, 9, 0.36) 62%, rgba(7, 13, 9, 0.14)),
    linear-gradient(0deg, rgba(7, 13, 9, 0.68), transparent 55%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(60rem, 100%);
  padding: clamp(9rem, 18vh, 13rem) var(--gouttiere) clamp(3rem, 8vh, 6rem);
}

/* Le `h1` de l'accueil est la phrase descriptive, posée sous la baseline en
   deuxième taille, en casse normale : ni l'allure d'un titre (que la règle de
   base `h1` lui imposerait), ni celle d'un sur-titre. */
.hero-copy .hero-h1 {
  max-width: 34rem;
  margin: 0 0 var(--espace-m);
  color: var(--couleur-sur-sombre);
  font-family: var(--pile-texte);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
}

/* La baseline tient en deux lignes à toutes les largeurs : la mesure est
   bornée en `em` pour que le retour tombe après « mètres ». */
.hero-title {
  font-size: clamp(2.4rem, min(7.4vw, 12vh), 7rem);
  line-height: 0.95;
  margin: 0 0 var(--espace-m);
  max-width: 11em;
}

.hero-lead {
  color: var(--ivoire);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  max-width: 38rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s) var(--espace-m);
  margin: var(--espace-l) 0 0;
}

.hero-price {
  color: var(--ivoire);
  font-family: var(--pile-titres);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

/* La hauteur du bandeau d'ouverture ne doit pas suivre son texte.
 *
 * `object-fit: cover` recadre selon la hauteur de la boîte : si celle-ci suit le
 * nombre de lignes du titre — qui change avec la langue et avec la largeur de la
 * fenêtre — la photo n'est pas cadrée pareil d'une langue à l'autre. On lui donne
 * donc une hauteur fixe dès qu'il y a la place, et le texte flotte dedans.
 *
 * En dessous, la hauteur reste un plancher : sur un écran étroit ou bas, mieux
 * vaut un bandeau qui s'allonge qu'un texte qui déborde. */
@media (min-width: 64rem) {
  .hero {
    height: min(100vh, 54rem);
    height: min(100svh, 54rem);
  }

  /* La baseline ouvre le bandeau : elle prend le large sous le bandeau
     supérieur au lieu de le toucher. */
  .page-home .hero-copy {
    padding-top: clamp(9.5rem, 18vh, 12.5rem);
  }
}

/* --- Bandeau tarifs et disponibilités --- */

/* Le bandeau colle en haut de l'écran par CSS seul — sans JavaScript il reste
   collant, simplement à sa taille pleine. Le script ne fait que le resserrer. */
.booking-band {
  position: sticky;
  top: 0;
  z-index: 15;
  padding-block: var(--espace-l);
  background-color: var(--neige);
  transition: padding 350ms ease;
}

.booking-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  max-width: var(--largeur-page);
  margin: 0 auto;
}

/* Sentinelle posée par le script juste au-dessus du bandeau : tant qu'elle est
   visible, le bandeau n'est pas collé. Un pixel, annulé par sa marge. */
.booking-sentinelle {
  height: 1px;
  margin-bottom: -1px;
}

.booking-band.collee {
  padding-block: 0.8rem;
}

.booking-band.collee .eyebrow,
.booking-band.collee .booking-band-copy p:last-child {
  display: none;
}

.booking-band.collee h2 {
  margin-bottom: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.booking-band.collee .bouton {
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
}

/* Sur un écran très bas ou étroit, un bandeau collant mangerait une part trop
   grande de la hauteur utile — sur un téléphone, même resserré, il prenait
   près d'un tiers de l'écran. Il reprend sa place dans le flux ; le bouton de
   retour en haut ramène au menu. Le script lit cette position calculée pour ne
   pas resserrer un bandeau qui ne colle pas. */
@media (max-height: 26rem), (max-width: 47.5rem) {
  .booking-band {
    position: static;
  }
}

/* Les ancres ne doivent pas atterrir sous le bandeau collé : 7.5rem laisse
   un vrai dégagement au titre (6rem ne lui laissait qu'une vingtaine de px). */
.page-home main > section[id] {
  scroll-margin-top: 7.5rem;
}

@media (max-height: 26rem), (max-width: 47.5rem) {
  .page-home main > section[id] {
    scroll-margin-top: var(--espace-s);
  }
}

.booking-band h2 {
  font-family: var(--pile-titres);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: var(--espace-xs);
  transition: font-size 350ms ease;
}

.booking-band p {
  margin-bottom: 0;
}

/* Prix d'appel et inclusions, sous le titre du bandeau. Les inclusions sont le
   dernier paragraphe : resserré, le bandeau les masque (règle `.collee`
   ci-dessus) et ne garde que le titre, le prix et les boutons. */
.booking-band-price {
  font-family: var(--pile-titres);
  font-size: 1.15rem;
}

.booking-band-included {
  margin-top: 0.3rem;
  color: var(--couleur-texte);
  font-size: 0.85rem;
}

.booking-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
}

/* --- Grilles éditoriales --- */

.intro,
.comfort,
.gallery,
.parents,
.evening,
.essentials,
.faq {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.intro,
.comfort,
.parents,
.evening,
.essentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.intro {
  align-items: end;
}

/* Deux sections de la grille éditoriale qui se suivent additionnent leurs
   `padding-block` : la respiration y vaut le double d'ailleurs. Entre « Les
   soirées à LAO » et « Les équipements », on ne garde que celle du bas de la
   première. */
.evening + .essentials {
  padding-block-start: 0;
}

.intro h2,
.gallery h2,
.parents h2,
.evening h2,
.essentials h2 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  margin-bottom: var(--espace-s);
}

/* Ces règles visent le corps de texte, pas le sur-titre. Sans `:not(.eyebrow)`
   elles l'emportent sur `.eyebrow` — un élément de plus suffit à les rendre plus
   spécifiques — et le sur-titre y perdait son doré, alors qu'il le gardait
   partout ailleurs. */
.intro p:not(.eyebrow),
.gallery-head p:not(.eyebrow),
.parents p:not(.eyebrow),
.evening p:not(.eyebrow) {
  color: var(--couleur-texte);
  font-size: 1.05rem;
}

/* --- La cuisine et ses caractéristiques --- */

.kitchen {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  background-color: var(--neige);
}

.kitchen-visual {
  position: relative;
  margin: 0;
  min-height: 26rem;
}

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

.kitchen-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espace-l);
  padding: clamp(2rem, 5vw, 4rem) var(--gouttiere);
}

.kitchen-detail h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

/* Les caractéristiques se lisent à la taille, pas aux filets : la valeur en
   grand, son libellé dessous. */
.facts {
  display: grid;
  gap: var(--espace-m);
  margin: 0;
}

.fact {
  display: flex;
  flex-direction: column-reverse;
}

.fact dt {
  color: var(--couleur-discrete);
  font-size: 0.95rem;
}

.fact dd {
  margin: 0;
  font-family: var(--pile-titres);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  /* Si une valeur doit couper (« 1 chambre + coin nuit »), deux lignes égales
     plutôt qu'un mot seul en bas. */
  text-wrap: balance;
}

/* --- Photos d'ambiance --- */

.gallery-head {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: var(--espace-l);
}

.photo-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.72fr 0.72fr;
  grid-auto-rows: 19rem;
  gap: var(--espace-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.photo-grid li:first-child {
  grid-row: span 2;
}

/* Sept visuels : la grande vignette prend deux rangs, il en reste deux pour
   la dernière ligne ; le dernier s'étire pour ne pas laisser de trou. */
.photo-grid li:last-child:nth-child(7) {
  grid-column: span 2;
}

.photo-card {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--neige);
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.photo-card:hover img {
  transform: scale(1.025);
}

.photo-card figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem var(--espace-s) var(--espace-xs);
  background-image: linear-gradient(transparent, rgba(5, 10, 7, 0.8));
  color: var(--ivoire);
  font-size: 0.95rem;
}

/* --- Figures des visuels --- */

.parents-visual,
.evening-visual,
.night-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--neige);
}

.parents-visual img,
.evening-visual img,
.night-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* Chambre parents : la photo s'étire sur toute la hauteur de la colonne de texte
   plutôt que de rester centrée avec du vide au-dessus et en dessous. La figure
   remplit la rangée (align-items: stretch) et l'image, en absolu, la recouvre —
   même technique fiable que `.kitchen-visual`, la hauteur venant du texte. */
.parents {
  align-items: stretch;
}

.parents-visual img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* --- Le coin nuit sous les étoiles --- */

/* Du jour à la nuit : la version de jour recouvre la nuit, et `site.js` règle
   son opacité (`--jour`, de 1 à 0) au fil du défilement. Sans script, ou avec
   le mouvement réduit, `--jour` reste à 0 : seule la nuit se voit. */
.night-visual .night-jour {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: var(--jour, 0);
  pointer-events: none;
}

.night {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  background-color: var(--vert-profond);
  color: var(--ivoire);
  padding-block: clamp(4rem, 9vw, 8rem);
}

.night-copy {
  max-width: var(--largeur-texte);
}

.night-copy .eyebrow {
  color: var(--couleur-sur-sombre);
}

.night h2 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  margin-bottom: var(--espace-s);
}

.night p {
  color: rgba(247, 243, 233, 0.86);
}

/* --- Équipements --- */

.essentials-list {
  columns: 2 14rem;
  column-gap: var(--espace-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.essentials-list li {
  break-inside: avoid;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--agave);
}

/* --- La destination --- */

.destination {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background-color: var(--neige);
}

.destination-visual {
  position: relative;
  margin: 0;
  min-height: 28rem;
}

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

.destination-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 6rem) var(--gouttiere);
}

.destination-copy h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  margin-bottom: var(--espace-s);
}

/* Même piège que pour la grille éditoriale, voir plus haut. */
.destination-copy p:not(.eyebrow) {
  color: var(--couleur-texte);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  list-style: none;
  margin: var(--espace-s) 0 0;
  padding: 0;
}

.tags li {
  padding: 0.45rem 0.8rem;
  background-color: var(--neige);
  font-size: 0.95rem;
}

/* Boutons du plan sous les tags de la section destination : sur une même rangée,
   qui passe à la ligne si la place manque. */
.destination-plan {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin: var(--espace-m) 0 0;
}

/* --- Témoignages --- */

/* Section absente tant qu'aucun avis n'existe (voir `inc/reviews.php`). Trois
   colonnes sur grand écran ; sur téléphone, un défilement horizontal à
   aimantation plutôt qu'une pile de cartes interminable — sans JavaScript. */
.reviews {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding-block: clamp(3.5rem, 8vw, 7rem) 0;
}

.reviews h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: var(--espace-m);
}

/* Carrousel : trois avis entiers et l'amorce du quatrième, qui annonce la
   suite. Le défilement est natif (doigt, trackpad, clavier) ; les flèches,
   révélées par le script, ne font qu'avancer d'une carte. Sans script, la
   liste reste défilable et la barre de défilement le signale. */
.reviews-carousel {
  position: relative;
}

.reviews-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--espace-m)) / 3.25);
  gap: var(--espace-m);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.reviews-list > li {
  scroll-snap-align: start;
}

.reviews-carousel-actif .reviews-list {
  scrollbar-width: none;
}

.reviews-carousel-actif .reviews-list::-webkit-scrollbar {
  display: none;
}

.reviews-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--bois-clair);
  border-radius: 50%;
  background-color: var(--ivoire);
  color: var(--vert-nuit);
  box-shadow: 0 0.4rem 1.2rem rgba(16, 26, 20, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 200ms ease, color 200ms ease;
}

.reviews-nav:hover {
  background-color: var(--vert-nuit);
  color: var(--ivoire);
}

.reviews-nav[hidden] {
  display: none;
}

.reviews-nav-prev {
  left: -1.5rem;
}

.reviews-nav-next {
  right: -1.5rem;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--espace-l) var(--espace-m) var(--espace-m);
  background-color: var(--neige);
  border-top: 2px solid var(--bois-clair);
}

.review-rating {
  margin: 0 0 var(--espace-s);
  color: var(--or);
  letter-spacing: 0.15em;
}

.review-card blockquote {
  flex: 1;
  margin: 0;
}

.review-card blockquote p {
  margin: 0;
  font-family: var(--pile-titres);
  font-size: 1.3rem;
  line-height: 1.45;
}

/* Un avis long garde ses paragraphes : une ligne vide dans le texte saisi. */
.review-card blockquote p + p {
  margin-top: 0.75em;
}

.review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--espace-m);
  padding-top: var(--espace-s);
  border-top: 1px solid rgba(95, 122, 88, 0.35);
}

.review-name {
  font-weight: 600;
}

.review-meta {
  color: var(--couleur-discrete);
  font-size: 0.85rem;
}

/* Une seule ligne sur grand écran : la mention est courte, la couper à
   `--largeur-texte` laissait un mot seul sur la seconde ligne. */
.reviews-note {
  max-width: none;
  margin: var(--espace-m) 0 0;
  color: var(--couleur-discrete);
  font-size: 0.85rem;
}

@media (max-width: 47.5rem) {
  .reviews-list {
    grid-auto-columns: 85%;
    padding-bottom: var(--espace-s);
  }

  /* Sur téléphone, les flèches rentrent dans la page : la gouttière est trop
     étroite pour les laisser déborder. */
  .reviews-nav-prev {
    left: 0.25rem;
  }

  .reviews-nav-next {
    right: 0.25rem;
  }
}

/* --- Questions fréquentes --- */

.faq h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: var(--espace-m);
}

.faq-list {
  border-top: 1px solid var(--agave);
  max-width: 52rem;
}

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

.faq summary {
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 500;
}

.faq details p {
  padding-bottom: var(--espace-s);
  color: var(--couleur-discrete);
}

.faq-contact {
  margin-top: var(--espace-m);
}

/* --- Image de fin --- */

.closing {
  position: relative;
  background-color: var(--vert-nuit);
}

.closing-visual {
  margin: 0;
}

.closing-visual img {
  display: block;
  width: 100%;
  height: clamp(20rem, 55vh, 34rem);
  object-fit: cover;
  object-position: 58% 55%;
}

.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(7, 13, 9, 0.9), rgba(7, 13, 9, 0.1) 68%);
}

.closing-quote {
  position: absolute;
  z-index: 1;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: clamp(2rem, 6vh, 4rem);
  /* Assez large pour que chaque phrase de la citation tienne sur une seule ligne
     (« On ne se souvient pas d'un séjour. » ≈ 17,6 em dans la plus large des
     polices de repli, plus étroite en Cormorant). Le retour reste piloté par le
     saut de ligne du texte, pas par le pliage. */
  max-width: 19em;
  margin: 0;
  color: var(--ivoire);
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.15;
}

/* --- Reflow --- */

@media (max-width: 56rem) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .page-home .kitchen,
  .page-home .destination {
    padding-inline: 0;
  }

  .intro,
  .comfort,
  .gallery-head,
  .kitchen,
  .parents,
  .night,
  .evening,
  .essentials,
  .destination {
    grid-template-columns: 1fr;
  }

  .kitchen-visual,
  .destination-visual {
    position: relative;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .kitchen-visual img,
  .destination-visual img {
    position: static;
  }

  .photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 14rem;
  }

  .photo-grid li:first-child {
    grid-column: span 2;
    grid-row: auto;
  }

  .photo-grid li:last-child:nth-child(7) {
    grid-column: auto;
  }

  /* L'image de la chambre parents passe après le texte : le titre annonce la
     figure plutôt que de la suivre. */
  .parents-visual,
  .evening-visual {
    order: 1;
  }

  /* En une colonne, la photo reprend sa hauteur naturelle : l'étirement et le
     positionnement absolu n'ont de sens que dans la grille à deux colonnes. */
  .parents-visual img {
    position: static;
    height: auto;
  }
}

/* En dessous de 760 px — le seuil où `<source>` bascule sur l'image mobile,
   claire presque partout — le bandeau porte son propre fond translucide. Au
   dessus, la photo d'ouverture est sombre là où il faut et le voile suffit :
   c'est bien le bois qui fait le fond du menu. */
@media (max-width: 47.5rem) {
  .page-home .site-header {
    background-image: linear-gradient(180deg, rgba(7, 13, 9, 0.86), rgba(7, 13, 9, 0.7));
  }
}

@media (max-width: 34rem) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }

  /* Les coupes de titre écrites dans les partiels de contenu sont éditoriales :
     elles valent pour les grandes largeurs. En dessous, on laisse le navigateur
     couper où il faut, sinon les deux découpes se cumulent. */
  .titre br {
    display: none;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid li:first-child {
    grid-column: auto;
  }

  .fact {
    flex-direction: column;
    gap: var(--espace-xs);
  }

  .fact dd {
    text-align: left;
  }
}

/* ------------------------------------------------------------------------- *
 * Pages intérieures : texte courant, messages, formulaires.
 * ------------------------------------------------------------------------- */

/* Accroche des pages intérieures. Nom distinct de la section `.intro` de
   l'accueil, qui est une grille : deux usages, deux noms. */
.page-intro {
  font-size: 1.15rem;
  color: var(--couleur-discrete);
}

/* --- Messages d'état --- */

.message {
  margin-bottom: var(--espace-m);
  padding: var(--espace-s) var(--espace-m);
  border-left: 4px solid currentColor;
  background-color: var(--neige);
  max-width: none;
}

.message p {
  margin-bottom: var(--espace-xs);
}

.message ul {
  margin: 0;
  padding-left: 1.2rem;
}

.message-succes {
  color: var(--couleur-succes);
}

.message-echec {
  color: var(--couleur-erreur);
}

/* --- Formulaire --- */

.formulaire {
  margin-top: var(--espace-m);
  max-width: 34rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--espace-m);
  max-width: none;
}

.champ label {
  font-size: 0.9rem;
  font-weight: 500;
}

.facultatif {
  color: var(--couleur-discrete);
  font-weight: 400;
}

.champ input,
.champ textarea {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--agave);
  background-color: #ffffff;
  color: var(--couleur-texte);
  font: inherit;
  /* Sans cela, un champ de saisie déborde de sa colonne sur petit écran. */
  max-width: 100%;
}

.champ textarea {
  resize: vertical;
}

/* Le champ en erreur est signalé par un texte explicite relié au champ ; le
   trait rouge et le symbole ne font que le doubler visuellement. */
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--couleur-erreur);
  border-left-width: 4px;
}

/* Indication de format des dates : visible en permanence, et non un simple
   `placeholder` que la saisie efface au moment où il servirait encore. */
.aide {
  color: var(--couleur-discrete);
  font-size: 0.85rem;
}

.erreur {
  color: var(--couleur-erreur);
  font-size: 0.9rem;
}

.erreur::before {
  content: "\25B2  ";
}

.champs-lies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 var(--espace-s);
}

.champ-envoi {
  margin-bottom: var(--espace-s);
}

/* Champ leurre : sorti de l'écran sans `display: none`, que les robots repèrent,
   et hors du parcours clavier grâce à `tabindex="-1"`. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mention-donnees,
.contact-direct {
  color: var(--couleur-discrete);
  font-size: 0.9rem;
}

.contact-direct {
  margin-top: var(--espace-l);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--agave);
}

/* ------------------------------------------------------------------------- *
 * Retour en haut.
 *
 * Les entrées du menu mènent à des ancres de l'accueil, loin sous le bandeau
 * de marque qui, lui, ne suit pas le défilement : une fois dans le récit, plus
 * aucun menu n'est à portée. Ce bouton ramène au bandeau, et le focus avec
 * lui — la tabulation suivante tombe sur la marque puis sur le menu. Le script
 * l'affiche une fois le bandeau sorti de l'écran ; sans JavaScript il reste
 * invisible et hors du parcours clavier, ce n'est qu'un confort.
 * ------------------------------------------------------------------------- */

.retour-haut {
  position: fixed;
  z-index: 30;
  right: 1.25rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(247, 243, 233, 0.35);
  border-radius: 50%;
  background-color: var(--vert-profond);
  color: var(--ivoire);
  box-shadow: 0 6px 18px rgba(16, 26, 20, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms;
}

.retour-haut.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.retour-haut:hover {
  background-color: var(--vert-profond-clair);
}

.retour-haut svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ------------------------------------------------------------------------- *
 * Barre tarifs sur téléphone (accueil seulement).
 *
 * Le bandeau tarifs ne colle qu'à partir de 760 px : sur téléphone il prenait
 * près d'un tiers de l'écran (voir CLAUDE.md, « Mise en page »). En dessous,
 * cette barre fine posée en bas de l'écran garde l'accès aux tarifs à portée
 * de pouce, sur une seule ligne. Sans JavaScript elle reste affichée ; le
 * script la masque tant que le bandeau tarifs lui-même est à l'écran ou au-
 * dessous. Le bouton de retour en haut remonte d'autant pour ne pas la couvrir.
 * ------------------------------------------------------------------------- */

.cta-mobile {
  display: none;
}

@media (max-width: 47.5rem) {
  .cta-mobile {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: 0;
    padding: 0.6rem var(--gouttiere) max(0.6rem, env(safe-area-inset-bottom));
    background-color: var(--papier);
    border-top: 1px solid var(--agave);
    box-shadow: 0 -8px 24px rgba(16, 26, 20, 0.12);
    transition: transform 250ms ease, visibility 0s linear 0s;
  }

  .cta-mobile.cachee {
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 250ms ease, visibility 0s linear 250ms;
  }

  .cta-mobile .bouton {
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 1.1rem;
  }

  .cta-mobile-prix {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
  }

  /* Le pied de page ne doit pas finir sous la barre. */
  .page-home .site-footer {
    padding-bottom: 6.5rem;
  }

  .page-home .retour-haut {
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-mobile,
  .cta-mobile.cachee {
    transition: none;
  }
}

/* ------------------------------------------------------------------------- *
 * Consentement et module de réservation.
 * ------------------------------------------------------------------------- */

/* Le bandeau est posé en bas de l'écran, mais il n'est ni modal ni bloquant :
   il ne piège pas le focus, ne recouvre pas le lien d'évitement, et la page
   reste lisible et navigable tant qu'aucun choix n'est fait. */
.bandeau-consentement {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--espace-s) var(--gouttiere);
  background-color: var(--vert-nuit);
  color: rgba(247, 243, 233, 0.86);
  border-top: 3px solid var(--couleur-accent);
}

.bandeau-consentement-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s) var(--espace-m);
  max-width: var(--largeur-page);
  margin: 0 auto;
}

.bandeau-consentement h2 {
  margin-bottom: 0.3rem;
  color: var(--ivoire);
  font-family: var(--pile-texte);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bandeau-consentement p {
  margin-bottom: 0;
  max-width: 58rem;
  font-size: 0.875rem;
}

.bandeau-consentement a {
  color: var(--couleur-sur-sombre);
}

/* Refuser doit être aussi simple qu'accepter : deux boutons identiques, côte
   à côte, sans hiérarchie visuelle qui pousserait vers l'un des deux. */
.bandeau-consentement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.bandeau-consentement .bouton {
  background-color: var(--ivoire);
  color: var(--vert-nuit);
}

.bandeau-consentement .bouton:hover {
  background-color: var(--couleur-sur-sombre);
  color: var(--vert-nuit);
}

.bandeau-consentement .bouton:hover {
  background-color: var(--couleur-sur-sombre);
  border-color: var(--couleur-sur-sombre);
  color: var(--vert-nuit);
}

/* Un bouton qui doit avoir l'allure d'un lien : le pied de page n'a pas de
   place pour un bouton, mais l'action modifie un état, donc c'est un bouton. */
.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.lien-bouton:hover {
  color: var(--ivoire);
}

.footer-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-xs) var(--espace-m);
  max-width: var(--largeur-page);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 243, 233, 0.16);
  color: rgba(247, 243, 233, 0.62);
  font-size: 0.72rem;
}

.footer-bas .footer-legal {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  color: inherit;
  font-size: inherit;
}

.footer-consentement {
  margin: 0;
}

/* --- Module de réservation --- */

.reservation {
  max-width: 42rem;
  margin: var(--espace-m) auto 0;
}

.reservation-placeholder {
  padding: var(--espace-m);
  background-color: var(--neige);
  border-left: 4px solid var(--couleur-accent);
}

.reservation-placeholder p {
  margin-bottom: var(--espace-s);
}

.reservation-repli {
  margin-top: var(--espace-m);
  color: var(--couleur-discrete);
  font-size: 0.9rem;
}

/* Cadre du module de réservation. La hauteur est généreuse : un formulaire de
   réservation qui se retrouve avec sa propre barre de défilement interne est
   pénible, en particulier au clavier. */
.reservation-cadre {
  margin-top: var(--espace-s);
  background-color: var(--neige);
  /* Masque le bandeau du haut de l'iframe, remonté par la marge négative. */
  overflow: hidden;
}

.reservation-cadre iframe {
  display: block;
  width: 100%;
  /* Le haut de la page Lodgify est un bandeau noir (logo du compte) qu'on ne peut
     pas retirer de l'intérieur — l'iframe est cross-origin. On le rogne en
     remontant l'iframe dans le cadre `overflow: hidden` ci-dessus. Ajuster
     --rogne-haut si Lodgify change la hauteur de ce bandeau. */
  --rogne-haut: 3.5rem;
  margin-top: calc(-1 * var(--rogne-haut));
  /* Hauteur de repli : l'iframe est cross-origin, sa hauteur réelle n'est pas
     lisible en CSS. `site.js` l'ajuste si Lodgify publie sa hauteur ; sinon on
     garde une valeur assez haute pour limiter le défilement interne. Le rognage
     est ajouté pour que la partie visible reste à 46rem. */
  min-height: calc(46rem + var(--rogne-haut));
  border: 0;
}

/* --- Calendrier de disponibilité --- */

.calendrier {
  margin-top: var(--espace-l);
}

.calendrier-mois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.calendrier table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}

.calendrier caption {
  margin-bottom: 0.7rem;
  color: var(--couleur-discrete);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
}

.calendrier th {
  padding-bottom: 0.4rem;
  color: var(--couleur-discrete);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.calendrier td {
  padding: 0.42rem 0;
  font-size: 0.8rem;
  text-align: center;
}

/* Le statut ne repose pas sur la seule couleur : un jour réservé est barré, et
   chaque case porte son état en toutes lettres pour les lecteurs d'écran. */
.jour-libre {
  background-color: rgba(29, 59, 42, 0.16);
  color: var(--vert-profond);
}

/* Réservé : sans aplat, barré, et plus pâle. Trois différences pour une seule
   information — deux aplats voisins ne se distinguaient pas. */
.jour-pris {
  background-color: transparent;
  color: var(--couleur-discrete);
  text-decoration: line-through;
}

.jour-vide {
  visibility: hidden;
}

.calendrier-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
  margin-top: var(--espace-s);
  color: var(--couleur-discrete);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pastille {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  vertical-align: -0.05rem;
}

/* La pastille « réservé » porte la barre oblique du jour barré : sans elle, les
   deux carrés de la légende ne se distinguaient que par une nuance. */
.pastille.jour-pris {
  border: 1px solid var(--agave);
  background-image: linear-gradient(
    to top right,
    transparent 45%,
    var(--couleur-discrete) 45%,
    var(--couleur-discrete) 55%,
    transparent 55%
  );
}

.calendrier-fraicheur {
  margin-top: var(--espace-xs);
  color: var(--couleur-discrete);
  font-size: 0.8rem;
}

/* --- Recherche de dates et récapitulatif de prix (réservation directe) --- */

.booking-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espace-s);
  margin-top: var(--espace-m);
  padding: var(--espace-m);
  background-color: var(--ivoire);
  border: 1px solid var(--agave);
}

.booking-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 8rem;
}

.booking-search-field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-discrete);
}

.booking-search-field input {
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--couleur-texte);
  background-color: #fff;
  border: 1px solid var(--agave);
}

.booking-search .field-hint {
  font-size: 0.75rem;
  color: var(--couleur-discrete);
}

.booking-search .bouton {
  flex: 0 0 auto;
}

/* Adultes / Enfants : colonnes étroites, côte à côte. */
.booking-search-count {
  flex: 0 0 auto;
}

.booking-search-count select {
  width: 12rem;
  max-width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--couleur-texte);
  background-color: #fff;
  border: 1px solid var(--agave);
}

/* « Voir le prix » : même largeur que les menus, calé en bas de ligne. */
.booking-search-submit {
  min-width: 12rem;
  justify-content: center;
  align-self: flex-end;
}

/* Récapitulatif : une colonne de lecture, total en grand comme le récit. */
.quote {
  max-width: 42rem;
  margin: var(--espace-m) auto 0;
}

.quote-intro {
  color: var(--couleur-discrete);
  max-width: 34rem;
}

.quote-lines {
  margin: var(--espace-l) 0 var(--espace-m);
}

.quote-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-m);
  padding: var(--espace-s) 0;
  border-top: 1px solid var(--agave);
}

.quote-line:last-child {
  border-bottom: 1px solid var(--agave);
}

.quote-line dt {
  color: var(--couleur-texte);
}

.quote-line .quote-nights {
  color: var(--couleur-discrete);
}

.quote-line dd {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.quote-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-m);
  margin: var(--espace-m) 0 0;
}

.quote-total-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--couleur-discrete);
}

.quote-total-amount {
  font-family: var(--pile-titres);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
}

/* Échéancier Lodgify, sous le total : ce qui est prélevé maintenant ressort,
   le solde reste en retrait. */
.quote-schedule {
  margin: var(--espace-s) 0 0;
}

.quote-schedule .quote-line,
.quote-schedule .quote-line dt {
  color: var(--couleur-discrete);
}

.quote-schedule .quote-now,
.quote-schedule .quote-now dt {
  font-weight: 600;
  color: var(--couleur-texte);
}

.quote-saving {
  margin-top: var(--espace-s);
  padding: var(--espace-s) var(--espace-m);
  background-color: var(--ivoire);
  border-left: 3px solid var(--agave);
  color: var(--couleur-texte);
}

/* Taxe de séjour. C'est la seule somme du devis qui n'entre pas dans le total :
   si elle ne se voit pas ici, le voyageur la découvre trois jours avant son
   arrivée. Elle est donc traitée comme un encadré, pas comme une mention. */
.quote-note {
  margin-top: var(--espace-m);
  padding: var(--espace-m);
  background-color: var(--ivoire);
  border-left: 3px solid var(--bois-clair);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--couleur-texte);
}

.quote-note strong {
  font-weight: 600;
  white-space: nowrap;
}

.quote-discount dd {
  color: var(--vert-profond-clair);
}

/* Code promo : sous le total, avant le module de paiement. */
.quote-promo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: var(--espace-m);
}

.quote-promo label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-discrete);
}

.quote-promo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
}

.quote-promo-row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--couleur-texte);
  background-color: #fff;
  border: 1px solid var(--agave);
}

.quote-promo-status {
  margin: 0;
  font-size: 0.9rem;
}

.quote-promo-status.is-rejected {
  color: var(--couleur-texte);
  padding-left: var(--espace-s);
  border-left: 3px solid var(--or);
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin-top: var(--espace-l);
}

/* Calendrier deux mois — amélioration progressive. Quand il est actif, les
   champs texte (socle sans JS) sont masqués. */
.booking-search.calendar-active {
  align-items: flex-start;
}

.booking-search.calendar-active .booking-search-dates,
.formulaire.calendar-active .champ-date {
  display: none;
}

.calendrier-contact:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--espace-m);
}

/* Champ « dates du séjour » : reprend l'allure des champs de saisie, et ouvre
   le calendrier juste dessous, dans le flux (rien ne passe par-dessus). */
.calendar-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.calendar-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--agave);
  background-color: #ffffff;
  color: var(--couleur-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-toggle.is-empty {
  color: var(--couleur-discrete);
}

.calendar-toggle svg {
  flex: none;
  color: var(--vert-profond);
}

.calendar-toggle[aria-expanded="true"] {
  border-color: var(--vert-profond);
}

/* `order: -1` place le calendrier de recherche en tête de son formulaire ;
   replié, il doit rester sous le champ qui l'ouvre. */
.calendar.calendar-popup {
  order: 0;
  padding: var(--espace-s);
  border: 1px solid var(--agave);
  background-color: #ffffff;
}

.calendar-popup .calendar-months {
  grid-template-columns: 1fr;
}

/* `.lien-bouton` vient du pied de page sombre : son survol ivoire serait
   invisible sur le panneau blanc. */
.calendar-actions .lien-bouton:hover {
  color: var(--vert-profond);
}

.calendar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--espace-s);
  margin-top: var(--espace-s);
}

.calendar {
  flex: 1 1 100%;
  order: -1;
}

.calendar-readout {
  margin: 0 0 var(--espace-s);
  font-weight: 600;
}

.calendar-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-xs);
}

.calendar-prev,
.calendar-next {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--vert-profond);
  background-color: #fff;
  border: 1px solid var(--agave);
  cursor: pointer;
}

.calendar-prev[disabled] {
  opacity: 0.4;
  cursor: default;
}

.calendar-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-m);
}

.calendar-caption {
  margin-bottom: var(--espace-xs);
  text-align: center;
  font-family: var(--pile-titres);
  font-size: 1.2rem;
  text-transform: capitalize;
}

.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-grid th {
  padding: 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--couleur-discrete);
}

.calendar-grid th abbr {
  text-decoration: none;
}

.calendar-grid td {
  padding: 1px;
  text-align: center;
}

.calendar-day {
  width: 100%;
  min-height: 2.2rem;
  padding: 0.2rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--couleur-texte);
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.calendar-day:hover:not([disabled]) {
  border-color: var(--agave);
}

.calendar-day[disabled] {
  color: var(--agave);
  opacity: 0.5;
  cursor: default;
}

/* Nuit réservée : barrée, pour ne pas reposer sur la seule couleur. Reste
   lisible comme jour de départ quand elle n'est pas désactivée. */
.calendar-day.is-booked {
  text-decoration: line-through;
}

.calendar-day.is-range {
  background-color: rgba(95, 122, 88, 0.18);
}

.calendar-day.is-start,
.calendar-day.is-end {
  background-color: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--ivoire);
}

/* Un départ posé la veille d'une nuit réservée est désactivé pour une nouvelle
   arrivée, mais reste la date choisie : il garde son plein contraste. */
.calendar-day.is-end[disabled] {
  opacity: 1;
}

.calendar-day:focus-visible {
  outline: 2px solid var(--vert-profond);
  outline-offset: 1px;
}

@media (max-width: 40rem) {
  .calendar-months {
    grid-template-columns: 1fr;
  }
}

/* --- Mentions légales --- */

.legal-updated {
  margin-top: var(--espace-xs);
  color: var(--couleur-discrete);
  font-size: 0.85rem;
}

.legal-toc {
  margin: var(--espace-l) 0;
  padding: var(--espace-m);
  background-color: var(--ivoire);
  border: 1px solid var(--agave);
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2 15rem;
  gap: var(--espace-m);
}

.legal-toc li {
  margin-bottom: 0.35rem;
}

.legal-section {
  margin-top: var(--espace-l);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--agave);
  scroll-margin-top: var(--espace-m);
}

.legal-section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-bottom: 0.2rem;
}

.legal-ref {
  margin: 0 0 var(--espace-s);
  color: var(--couleur-discrete);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.legal-facts {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  margin: var(--espace-s) 0;
  border: 1px solid var(--agave);
}

.legal-facts dt,
.legal-facts dd {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--agave);
}

.legal-facts dt:first-of-type,
.legal-facts dd:first-of-type {
  border-top: 0;
}

.legal-facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--couleur-discrete);
}

.legal-facts dd {
  overflow-wrap: anywhere;
}

.legal-todo {
  color: var(--bois-clair);
  font-style: italic;
}

@media (max-width: 40rem) {
  .legal-toc ol {
    columns: 1;
  }

  .legal-facts {
    grid-template-columns: 1fr;
  }

  .legal-facts dt {
    padding-bottom: 0;
  }

  .legal-facts dd {
    border-top: 0;
    padding-top: 0.2rem;
  }

  .legal-facts dt:not(:first-of-type) {
    border-top: 1px solid var(--agave);
  }
}

/* --- Conditions générales : résumé « L'essentiel » et barème d'annulation --- */

.terms-glance {
  margin: var(--espace-l) 0;
}

.terms-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0;
  background-color: var(--agave);
  border: 1px solid var(--agave);
}

.terms-glance-grid div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  background-color: var(--ivoire);
}

.terms-glance-grid dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--couleur-discrete);
}

.terms-glance-grid dd {
  margin: 0;
  font-family: var(--pile-titres);
  font-size: 1.2rem;
  line-height: 1.2;
}

.terms-sub {
  margin: var(--espace-m) 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.terms-scale {
  margin: var(--espace-s) 0 var(--espace-m);
  border: 1px solid var(--agave);
}

.terms-scale-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  border-top: 1px solid var(--agave);
}

.terms-scale-row:first-child {
  border-top: 0;
}

.terms-scale-when,
.terms-scale-what {
  padding: 0.7rem 0.9rem;
}

.terms-scale-when {
  font-weight: 600;
  border-left: 3px solid var(--vert-profond);
}

.terms-scale-what {
  border-left: 1px solid var(--agave);
}

@media (max-width: 40rem) {
  .terms-scale-row {
    grid-template-columns: 1fr;
  }

  .terms-scale-what {
    border-left: 3px solid transparent;
    padding-top: 0;
  }
}