/* =====================================================================
   MY HOTEL Malmedy — charte « Or & nuit »
   Les JETONS nomment des RÔLES (fond, texte, accent…), jamais des
   pigments. Une couleur peut ainsi changer sans relire la feuille, et
   l'administration pourra les piloter plus tard.
   ===================================================================== */

:root {
  /* --- pigments de marque : relevés DANS LE LOGO, pas dans le thème --- */
  --p-or:        #c8b374;   /* logo-myhotel-color-linear.png */
  --p-or-clair:  #ded0a2;
  --p-or-sombre: #806c30;   /* le seul or LISIBLE sur fond clair :
                               5,12 sur blanc et 4,82 sur ivoire, donc AA.
                               #a48f4f ne donnait que 3,17 — 56 textes du
                               site passaient sous le seuil. */
  --p-or-moyen:  #a48f4f;   /* décor seulement, jamais du texte sur clair */
  --p-nuit:      #1d1d1b;   /* logo noir */
  --p-nuit-2:    #262623;
  --p-ivoire:    #faf8f4;
  --p-blanc:     #ffffff;
  --p-gris:      #6f6d68;
  --p-gris-clair:#e4e0d8;

  /* --- rôles : c'est ce que les règles emploient --- */
  --fond:          var(--p-blanc);
  --fond-doux:     var(--p-ivoire);
  --fond-carte:    var(--p-blanc);
  --texte:         #24231f;
  --texte-doux:    var(--p-gris);
  --titre:         var(--p-nuit);
  /* --accent porte le TEXTE : il doit rester lisible.
     --accent-vif ne sert qu'au DÉCOR (filets, badges, fonds). */
  --accent:        var(--p-or-sombre);
  --accent-vif:    var(--p-or);
  --lisere:        var(--p-gris-clair);
  --ombre:         0 1px 2px rgb(29 29 27 / .04), 0 8px 24px -12px rgb(29 29 27 / .16);
  --ombre-forte:   0 2px 4px rgb(29 29 27 / .06), 0 24px 60px -24px rgb(29 29 27 / .34);

  /* --- alias attendus par le module de réservation (portabilité) --- */
  --couleur-primaire:   var(--accent);
  --couleur-secondaire: var(--titre);
  --couleur-fond:       var(--fond);
  --couleur-texte:      var(--texte);

  /* --- rythme --- */
  --pas: .5rem;
  --marge-page: clamp(1.15rem, 4.2vw, 4.5rem);
  --large: 1320px;
  --etroit: 760px;
  --rayon: 4px;
  --rayon-doux: 12px;
  --transition: 320ms cubic-bezier(.22, .61, .36, 1);

  /* --- typographie --- */
  --titrage: "Cormorant Garamond", "Iowan Old Style", Garamond, "Times New Roman", serif;
  --courante: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --interligne: 1.68;
}

/* Les sections sombres redéfinissent LES MÊMES jetons : un composant
   s'écrit une fois et fonctionne des deux côtés. */
.nuit {
  --fond:       var(--p-nuit);
  --fond-doux:  var(--p-nuit-2);
  --fond-carte: #2c2b28;
  --texte:      #e8e4da;
  --texte-doux: #a8a294;
  --titre:      var(--p-blanc);
  --accent:     var(--p-or);        /* sur fond sombre, l'or vif passe */
  --accent-vif: var(--p-or-clair);
  --lisere:     rgb(200 179 116 / .26);
  color: var(--texte);
  background: var(--fond);
}
.jour {
  --fond:       var(--p-blanc);
  --fond-doux:  var(--p-ivoire);
  --fond-carte: var(--p-blanc);
  --texte:      #24231f;
  --texte-doux: var(--p-gris);
  --titre:      var(--p-nuit);
  --accent:     var(--p-or-sombre);
  --accent-vif: var(--p-or);
  --lisere:     var(--p-gris-clair);
  color: var(--texte);
  background: var(--fond);
}

/* ------------------------------------------------------------- socle */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* coupe le double-tap qui zoome et les 300 ms avant chaque clic ;
     le pincement reste possible */
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--courante);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, canvas { display: block; max-width: 100%; height: auto; }
/* …mais une icône en ligne ne doit PAS passer en block : elle se
   retrouverait seule au-dessus de son texte. */
a svg, button svg, .pastille svg { display: inline-block; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--titrage);
  font-weight: 400;
  line-height: 1.1;
  color: var(--titre);
  text-wrap: balance;
  letter-spacing: -.005em;
}
p { text-wrap: pretty; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; }

:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 3px;
  border-radius: 2px;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--p-nuit); color: var(--p-blanc);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--rayon) 0;
}
.saut-contenu:focus { left: 0; }

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

/* --------------------------------------------------------- structure */
.large   { width: min(100% - var(--marge-page) * 2, var(--large));  margin-inline: auto; }
.etroit  { width: min(100% - var(--marge-page) * 2, var(--etroit)); margin-inline: auto; }
.section { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.section--serree { padding-block: clamp(1.6rem, 2.8vw, 2.4rem); }
.section > .large > * + * { margin-top: 1.5rem; }

/* Un intertitre de section : surtitre en capitales + grand titre. */
.surtitre {
  font-family: var(--courante);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .75rem;
}
.surtitre::before {
  content: ""; inline-size: 2.2rem; block-size: 1px;
  background: currentColor; flex: none;
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
  content: ""; inline-size: 2.2rem; block-size: 1px;
  background: currentColor; flex: none;
}

.titre-section {
  /* la largeur se pose sur LE TITRE, en em : elle suit sa taille réelle */
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.1rem);
  max-inline-size: 17em;
  margin-top: 1.1rem;
}
.titre-section--centre { margin-inline: auto; text-align: center; }
.chapo {
  max-inline-size: 62ch;
  color: var(--texte-doux);
  font-size: 1.06em;
}
.chapo--centre { margin-inline: auto; text-align: center; }

/* ----------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.85rem;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;              /* jamais cassé en deux lignes */
  border: 1px solid transparent;
  border-radius: var(--rayon);
  position: relative; isolation: isolate; overflow: hidden;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.bouton svg { flex: none; }
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--transition);
}
.bouton:hover::before, .bouton:focus-visible::before { transform: scaleX(1); transform-origin: left; }

.bouton--plein { background: var(--accent); color: #fff; }
.bouton--plein::before { background: var(--titre); }
.bouton--plein:hover, .bouton--plein:focus-visible { color: #fff; }

.bouton--trait { border-color: color-mix(in srgb, var(--texte) 26%, transparent); color: var(--titre); }
.bouton--trait::before { background: var(--titre); }
.bouton--trait:hover, .bouton--trait:focus-visible { color: var(--fond); border-color: var(--titre); }

.bouton--or { border-color: var(--accent-vif); color: var(--accent-vif); }
.bouton--or::before { background: var(--accent-vif); }
.bouton--or:hover, .bouton--or:focus-visible { color: var(--p-nuit); }

/* Lien souligné d'un filet qui file au survol */
.lien-file {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--titre); text-decoration: none;
}
.lien-file::before {
  content: ""; inline-size: 2.4rem; block-size: 1px; flex: none;
  background: var(--accent);
  transition: inline-size var(--transition);
}
.lien-file:hover::before, .lien-file:focus-visible::before { inline-size: 3.6rem; }

@media (max-width: 420px) {
  .bouton { width: 100%; }           /* plutôt pleine largeur que tronqué */
}

/* ------------------------------------------------------------ cartes */
.grille { display: grid; gap: clamp(1.1rem, 2.2vw, 1.9rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.carte {
  display: flex; flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-doux);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: color-mix(in srgb, var(--accent) 45%, var(--lisere)); }
.carte__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fond-doux); }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.22,.61,.36,1); }
.carte:hover .carte__media img { transform: scale(1.05); }
.carte__corps { display: flex; flex-direction: column; flex: 1 1 auto; gap: .7rem; padding: 1.5rem 1.5rem 1.7rem; }
.carte__titre { font-size: 1.42rem; }
.carte__texte { color: var(--texte-doux); font-size: .96rem; }
/* le dernier bloc pousse vers le bas : les liens s'alignent d'une carte
   à l'autre quelle que soit la longueur du texte */
.carte__pied { margin-top: auto; padding-top: .55rem; }

/* Un badge posé sur une photo : opaque, il tient sur n'importe quel fond */
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgb(29 29 27 / .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px;
}
.badge--or { background: var(--p-or); color: var(--p-nuit); }
.carte__media .badge { position: absolute; inset-block-start: .85rem; inset-inline-start: .85rem; z-index: 2; }

/* ---------------------------------------------------------- en-tête */
.bandeau-service {
  background: var(--p-nuit); color: #cfcabd;
  font-size: .76rem; letter-spacing: .06em;
}
.bandeau-service__interieur {
  display: flex; align-items: center; gap: 1.6rem;
  min-height: 2.6rem; padding-block: .35rem;
}
.bandeau-service a { text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.bandeau-service a:hover { color: var(--p-or-clair); }
.bandeau-service__droite { margin-inline-start: auto; display: flex; align-items: center; gap: 1.4rem; }
@media (max-width: 900px) { .bandeau-service { display: none; } }

.entete {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: color-mix(in srgb, var(--p-nuit) 97%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  border-block-end: 1px solid rgb(200 179 116 / .18);
  transition: box-shadow var(--transition), background-color var(--transition);
}
.entete--posee { box-shadow: 0 10px 34px -22px rgb(0 0 0 / .9); }
.entete__interieur {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: var(--haut-entete, 5.2rem);
  transition: min-height var(--transition);
}
.entete--compacte .entete__interieur { min-height: 4.1rem; }
.entete__logo { display: inline-flex; align-items: center; flex: none; }
.entete__logo img { block-size: clamp(2.5rem, 4.4vw, 3.4rem); inline-size: auto; transition: block-size var(--transition); }
.entete--compacte .entete__logo img { block-size: 2.4rem; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.9rem); }
.nav__lien {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: #eceade;
  padding-block: .5rem; position: relative; white-space: nowrap;
}
.nav__lien::after {
  content: ""; position: absolute; inset-block-end: .1rem; inset-inline-start: 0;
  inline-size: 0; block-size: 1px; background: var(--p-or);
  transition: inline-size var(--transition);
}
.nav__lien:hover::after, .nav__lien:focus-visible::after, .nav__lien[aria-current]::after { inline-size: 100%; }
.nav__lien[aria-current] { color: var(--p-or-clair); }

.nav__groupe { position: relative; }
.nav__sous {
  position: absolute; inset-block-start: calc(100% + .45rem); inset-inline-start: -1rem;
  min-inline-size: 15rem; padding: .55rem;
  background: #232320; border: 1px solid rgb(200 179 116 / .22);
  border-radius: var(--rayon-doux); box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav__groupe:hover .nav__sous, .nav__groupe:focus-within .nav__sous { opacity: 1; visibility: visible; transform: none; }
.nav__sous a {
  display: block; padding: .6rem .85rem; border-radius: var(--rayon);
  font-size: .82rem; letter-spacing: .05em; text-decoration: none; color: #e4e1d5;
}
.nav__sous a:hover { background: rgb(200 179 116 / .14); color: #fff; }

.entete__actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.entete .bouton { padding: .72rem 1.25rem; font-size: .72rem; }

.burger { display: none; padding: .55rem; color: #fff; }
.burger span { display: block; inline-size: 24px; block-size: 1.5px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
.burger span + span { margin-block-start: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .entete__actions .bouton--fantome { display: none; }
  .burger { display: block; }
}

/* Menu plein écran (mobile) — caché ET non cliquable au repos */
.menu-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--p-nuit); color: #fff;
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
  overflow-y: auto;
}
.menu-mobile[data-ouvert="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-mobile__liens { display: flex; flex-direction: column; gap: .2rem; padding: 1rem var(--marge-page) 2rem; }
.menu-mobile__liens a {
  font-family: var(--titrage); font-size: clamp(1.5rem, 6vw, 2.1rem);
  text-decoration: none; padding-block: .42rem;
  border-block-end: 1px solid rgb(255 255 255 / .08);
}
.menu-mobile__liens a:hover { color: var(--p-or-clair); }
.menu-mobile__pied { padding: 1.4rem var(--marge-page) 6.5rem; display: grid; gap: .8rem; }

/* -------------------------------------------------------------- héros */
.hero {
  position: relative; isolation: isolate;
  min-block-size: clamp(30rem, 78vh, 46rem);
  display: grid; align-items: start;      /* ancré EN HAUT, jamais en bas */
  color: #fff; overflow: hidden;
}
.hero--accueil { min-block-size: clamp(34rem, 92vh, 56rem); }
.hero__fond { position: absolute; inset: 0; z-index: -2; }
.hero__fond img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(15 15 13 / .58) 0%, rgb(15 15 13 / .18) 34%, rgb(15 15 13 / .72) 100%),
    linear-gradient(90deg, rgb(15 15 13 / .48) 0%, rgb(15 15 13 / 0) 62%);
}
.hero__contenu {
  /* padding-top CONSTANT : le titre tombe à la même hauteur sur toutes
     les pages, accueil comprise, quel que soit le nombre de lignes */
  padding-block-start: clamp(5.5rem, 17vh, 10rem);
  padding-block-end: clamp(3rem, 8vh, 6rem);
  display: grid; gap: 1.2rem; justify-items: start;
  max-inline-size: 54rem;
}
.hero--centre .hero__contenu { justify-items: center; text-align: center; margin-inline: auto; }
.hero__surtitre { color: var(--p-or-clair); }
.hero__titre {
  color: #fff;
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 6.2rem);
  line-height: .98; letter-spacing: -.015em;
  max-inline-size: 13em;
  text-shadow: 0 2px 30px rgb(0 0 0 / .32);
}
.hero__texte { color: #eae6dc; font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); max-inline-size: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: .6rem; }
.hero__bas {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 3;
  padding-block-end: clamp(1.2rem, 3vh, 2.2rem);
}

/* Carrousel du héros : les diapos se fondent, l'image zoome lentement */
.hero__diapos { position: absolute; inset: 0; z-index: -2; }
.hero__diapo {
  position: absolute; inset: 0;
  opacity: 0;
  /* la sortante s'efface plus lentement que n'entre la suivante :
     sans ce décalage, le fond noir apparaît une fraction de seconde */
  transition: opacity 1800ms cubic-bezier(.4, 0, .6, 1);
}
.hero__diapo[data-active="true"] { opacity: 1; }
.hero__diapo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Pas de keyframes : une animation qui redémarre à chaque diapo entre
   en concurrence avec le fondu et fait scintiller l'image. Un zoom
   porté par une TRANSITION se joue une fois, proprement. */
.hero__diapo img {
  transform: scale(1.06);
  transition: transform 9s cubic-bezier(.12, .58, .38, 1);
  will-change: transform, opacity;
}
.hero__diapo[data-active="true"] img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hero__diapo img { transform: none !important; transition: none; }
  .hero__diapo { transition: none; }
}
/* (l'ancienne puce — une simple barre de 2 px — a été remplacée par une
   puce qui porte le nom de son univers ; sa règle forçait block-size: 2px
   et écrasait le libellé à zéro) */

/* flèche « descendre » */
.hero__descendre {
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  color: #fff; text-decoration: none;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}
.hero__descendre::after {
  content: ""; inline-size: 1px; block-size: 2.4rem;
  background: linear-gradient(180deg, var(--p-or), transparent);
  animation: filet 2.4s ease-in-out infinite;
}
@keyframes filet { 0%, 100% { opacity: .35; transform: scaleY(.72); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .hero__descendre::after { animation: none; } }

/* ----------------------------------------- bloc de recherche de dates */
.recherche {
  background: color-mix(in srgb, var(--p-nuit) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(200 179 116 / .3);
  border-radius: var(--rayon-doux);
  padding: 1rem 1.1rem;
  box-shadow: var(--ombre-forte);
}
.recherche__grille {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
}
.recherche__champ { display: grid; gap: .35rem; }
.recherche__champ > span {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--p-or-clair);
}
.recherche input {
  inline-size: 100%;
  padding: .72rem .85rem;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--rayon);
  color: #fff; font-size: .95rem;
  color-scheme: dark;
}
.recherche input:focus-visible { border-color: var(--p-or); }
.recherche .bouton { inline-size: 100%; }

/* ------------------------------------------------ apparitions douces */
/* L'opacité de départ ne se pose QUE si le script a démarré : sinon un
   échec du JavaScript laisserait la page vide. */
html.js [data-apparait] { opacity: 0; transform: translateY(14px); }
html.js [data-apparait][data-vu] {
  opacity: 1; transform: none;
  transition: opacity 1100ms cubic-bezier(.16, .8, .3, 1),
              transform 1200ms cubic-bezier(.16, .8, .3, 1);
}
html.js [data-apparait="cote"] { transform: translateX(-26px); }
html.js [data-apparait="zoom"] { transform: scale(.965); }
html.js [data-apparait][data-vu] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-apparait] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Titre qui se dévoile ligne par ligne.
   ⚠ `overflow: hidden` rogne les JAMBAGES (le g de « packages », le p,
   le q, le j). On compense par un creux en bas, repris en marge
   négative : le masque reste entier, les lettres aussi. */
.devoile { display: block; overflow: hidden; padding-block-end: .18em; margin-block-end: -.18em; }
.devoile > span { display: block; padding-block-end: .04em; }
html.js .devoile > span { transform: translateY(105%); }
html.js [data-vu] .devoile > span, html.js .devoile[data-vu] > span {
  transform: none; transition: transform 1250ms cubic-bezier(.16, .84, .3, 1);
}
@media (prefers-reduced-motion: reduce) { html.js .devoile > span { transform: none !important; } }

/* Parallaxe : la marge de débord est en CSS, la translation vient du script */
.parallaxe { overflow: hidden; }
.parallaxe > img, .parallaxe > .parallaxe__couche {
  inline-size: 100%; block-size: 122%;
  object-fit: cover; will-change: transform;
}

/* ------------------------------------------------------ bloc 2 colonnes */
.duo {
  display: grid; gap: clamp(1.8rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: center;                 /* texte + image : centré */
}
.duo--texte { align-items: start; }    /* deux colonnes de TEXTE : jamais centré */
.duo__media { position: relative; border-radius: var(--rayon-doux); overflow: hidden; align-self: stretch; }
.duo__media img { inline-size: 100%; block-size: 100%; object-fit: cover; min-block-size: 20rem; }
.duo__texte > * + * { margin-top: 1.1rem; }
.duo--inverse .duo__media { order: 2; }
@media (max-width: 860px) { .duo--inverse .duo__media { order: 0; } }

/* liste clé / valeur : une vraie grille à deux colonnes */
.paires { display: grid; gap: 0; }
.paires__ligne {
  display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: .4rem 1.6rem; padding-block: .78rem;
  border-block-end: 1px solid var(--lisere);
}
.paires__ligne:last-child { border-block-end: 0; }
.paires__cle { color: var(--texte-doux); font-size: .88rem; letter-spacing: .04em; }
@media (max-width: 620px) { .paires__ligne { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ barre d'appel */
.barre-appel {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 70;
  display: none;
  background: var(--p-nuit);           /* OPAQUE : sinon la page défile
                                          dans les interstices */
  border-block-start: 1px solid rgb(200 179 116 / .3);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.barre-appel__interieur { display: grid; grid-template-columns: repeat(3, 1fr); }
.barre-appel a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .28rem; min-block-size: 3.6rem; padding: .5rem .3rem;
  color: #efece1; text-decoration: none;
  font-size: .67rem; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.barre-appel a + a { border-inline-start: 1px solid rgb(255 255 255 / .12); }
.barre-appel a:last-child { color: var(--p-or-clair); }
@media (max-width: 860px) {
  .barre-appel { display: block; }
  body { padding-block-end: 3.9rem; }
}

/* --------------------------------------------------------- pied de page */
.pied { background: var(--p-nuit); color: #bdb8ab; padding-block: clamp(3rem, 6vw, 4.6rem) 2rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--p-or-clair); }
.pied__haut { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pied__logo img { block-size: 3.4rem; inline-size: auto; }
.pied__titre {
  font-family: var(--courante); font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--p-or);
  margin-block-end: .95rem;
}
.pied__liste { list-style: none; padding: 0; display: grid; gap: .52rem; font-size: .92rem; }
.pied__bas {
  margin-block-start: 2.8rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid rgb(255 255 255 / .1);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
  font-size: .8rem; color: #8f8b80;
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin-inline-start: auto; }
.reseaux { display: flex; gap: .6rem; }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.4rem; block-size: 2.4rem;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 50%;
  transition: border-color var(--transition), background-color var(--transition);
}
.reseaux a:hover { border-color: var(--p-or); background: rgb(200 179 116 / .14); }

/* ---------------------------------------------------------- mosaïque */
/* Le piège : un pavage écrit pour un nombre d'images précis laisse des
   cases orphelines dès qu'il y en a une de plus ou de moins. Ici la
   grille fait DOUZE colonnes et chaque photo en occupe quatre — trois
   par rangée. Seule la dernière rangée s'ajuste, selon le reste :
       n % 3 == 0   rien à faire, les rangées sont pleines
       n % 3 == 1   les QUATRE dernières passent à trois colonnes (4/rangée)
       n % 3 == 2   les DEUX dernières passent à six colonnes  (2/rangée)
   Aucune case orpheline, quel que soit le nombre de photos.          */
.mosaique {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 12.5rem;
}
.mosaique__case {
  position: relative; overflow: hidden;
  border-radius: var(--rayon); background: var(--fond-doux);
  grid-column: span 4;
  padding: 0; border: 0;
}
.mosaique__case img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.mosaique__case:hover img { transform: scale(1.06); }
.mosaique[data-reste="1"] > *:nth-last-child(-n+4) { grid-column: span 3; }
.mosaique[data-reste="2"] > *:nth-last-child(-n+2) { grid-column: span 6; }

@media (max-width: 900px) {
  /* deux par rangée : c'est la PARITÉ qui décide, plus le reste par
     trois — et cette règle doit passer APRÈS les précédentes, sinon
     elle est écrasée et un nombre impair laisse une case orpheline. */
  .mosaique { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 10rem; }
  .mosaique__case,
  .mosaique[data-reste="1"] > *:nth-last-child(-n+4),
  .mosaique[data-reste="2"] > *:nth-last-child(-n+2) { grid-column: span 3; }
  .mosaique[data-pair="non"] > *:last-child { grid-column: span 6; }
}
@media (max-width: 560px) {
  .mosaique { grid-template-columns: 1fr; grid-auto-rows: 13rem; }
  .mosaique__case { grid-column: span 1 !important; }
}

.galerie-grille {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.galerie-grille .mosaique__case { aspect-ratio: 4 / 3; grid-column: auto; }

/* ------------------------------------------------------- visionneuse */
.visionneuse[open] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  position: fixed; inset: 0; z-index: 120;
  inline-size: 100%; max-inline-size: 100%; block-size: 100%; max-block-size: 100%;
  margin: 0; padding: 0; border: 0;
  /* OPAQUE : à 97 % on voyait encore la page au travers, et l'en-tête
     du site apparaissait en filigrane par-dessus la photo. */
  background: #0c0c0b; color: #fff;
}
.visionneuse:not([open]) { display: none; }   /* JAMAIS de display inconditionnel */
.visionneuse::backdrop { background: rgb(0 0 0 / .8); }
.visionneuse__haut { display: flex; align-items: center; gap: 1rem; padding: 1rem var(--marge-page); }
.visionneuse__compteur { font-size: .78rem; letter-spacing: .16em; color: var(--p-or-clair); }
.visionneuse__fermer { margin-inline-start: auto; color: #fff; padding: .5rem; }
/* Zone d'affichage IDENTIQUE pour tous les clichés.
   Trois pièges s'enchaînent, et il faut les trois corrections :
   1. max-width/max-height SEULS laissent l'image à sa taille native —
      une vignette de 640 px flotte au milieu d'un cadre de 1440 ;
   2. l'image doit être HORS DU FLUX, sinon c'est elle qui dicte la
      hauteur du cadre, qui change alors d'un cliché à l'autre ;
   3. object-fit: contain uniformise sans jamais déformer.
   L'arrondi porterait sur la zone et non sur le cliché : on s'en passe,
   il est invisible sur fond noir. */
.visionneuse__cadre { position: relative; min-block-size: 0; }
.visionneuse__cadre img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  padding-inline: var(--marge-page);
}
.visionneuse__pied {
  block-size: 5.2rem;                 /* FIXE : une légende longue ne
                                         rabote pas la zone du cliché */
  display: flex; align-items: center; gap: 1rem;
  padding-inline: var(--marge-page);
}
.visionneuse__legende {
  flex: 1 1 auto; font-size: .92rem; color: #d8d3c6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.visionneuse__nav { display: flex; gap: .6rem; }
.visionneuse__nav button, .visionneuse__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; color: #fff;
  transition: border-color var(--transition), background-color var(--transition);
}
.visionneuse__nav button:hover, .visionneuse__fermer:hover { border-color: var(--p-or); background: rgb(200 179 116 / .16); }

/* ------------------------------------------- select habillé (jamais natif) */
.select { position: relative; }
/* le <select> reste dans la page : c'est lui que le formulaire envoie,
   lui que le clavier pilote, lui que les lecteurs d'écran annoncent */
.select select {
  position: absolute !important; opacity: 0 !important;
  inline-size: 1px !important; block-size: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  pointer-events: none !important; clip: rect(0 0 0 0) !important;
}
.select__bouton {
  inline-size: 100%; display: flex; align-items: center; gap: .7rem;
  padding: .82rem 1rem; text-align: start;
  background: var(--fond); border: 1px solid var(--lisere);
  border-radius: var(--rayon); color: var(--texte);
}
.select__bouton::after {
  content: ""; margin-inline-start: auto; flex: none;
  inline-size: .5rem; block-size: .5rem;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.select[data-ouvert="true"] .select__bouton::after { transform: rotate(-135deg) translate(-2px, -2px); }
.select__liste {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + .35rem); z-index: 40;
  max-block-size: 16rem; overflow-y: auto; padding: .35rem;
  background: var(--fond-carte); border: 1px solid var(--lisere);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  display: none;
}
.select--haut .select__liste { inset-block-start: auto; inset-block-end: calc(100% + .35rem); }
.select[data-ouvert="true"] .select__liste { display: block; }
.select__liste li { list-style: none; }
.select__option { inline-size: 100%; text-align: start; padding: .6rem .75rem; border-radius: var(--rayon); font-size: .94rem; }
.select__option:hover, .select__option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.recherche .select__liste { background: #232320; border-color: rgb(255 255 255 / .2); color: #fff; }
.recherche .select__option:hover { background: rgb(200 179 116 / .2); }

/* ------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-block-start: 2.6rem; }
.pagination[hidden] { display: none; }
.pagination button {
  min-inline-size: 2.6rem; block-size: 2.6rem; padding-inline: .7rem;
  border: 1px solid var(--lisere); border-radius: var(--rayon);
  font-size: .88rem; transition: all var(--transition);
}
.pagination button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination button:disabled { opacity: .35; cursor: default; }
.hors-page { display: none !important; }   /* jamais `hidden` : cet attribut
                                              appartient au contenu */

/* ---------------------------------------------------- chiffres-clés */
.chiffres {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  text-align: center;
}
.chiffre__valeur {
  font-family: var(--titrage);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
  margin-block-start: .55rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-doux);
}

/* --------------------------------------------------- fiches offres */
.offre__prix {
  font-family: var(--titrage); font-size: 1.5rem; color: var(--accent);
  display: flex; align-items: baseline; gap: .38rem;
}
.offre__prix small { font-family: var(--courante); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }

/* la bordure se pose sur le GROUPE, jamais sur sa première ligne */
.groupe-borde { padding-block-end: .85rem; border-block-end: 1px solid var(--lisere); }
.groupe-borde > * + * { margin-block-start: .2rem; }

/* --------------------------------------------- barre de filtres collante */
.filtres {
  position: sticky; inset-block-start: var(--haut-collant, 5.2rem); z-index: 40;
  display: flex; gap: .5rem; padding-block: .8rem;
  overflow-x: auto; scrollbar-width: none;
  transition: background-color var(--transition), box-shadow var(--transition), padding var(--transition);
}
.filtres::-webkit-scrollbar { display: none; }
.filtres[data-collee="true"] {
  /* quasi opaque : des photos défilent dessous */
  background: color-mix(in srgb, var(--fond) 97%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px -22px rgb(29 29 27 / .8);
  padding-inline: var(--marge-page);
  margin-inline: calc(var(--marge-page) * -1);
}
.filtres__bouton {
  flex: none; padding: .58rem 1.15rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--lisere); border-radius: 999px;
  transition: all var(--transition);
}
.filtres__bouton[aria-pressed="true"] { background: var(--titre); border-color: var(--titre); color: var(--fond); }

/* -------------------------------------------------------- formulaire */
.formulaire { display: grid; gap: 1.05rem; }
.champ { display: grid; gap: .4rem; }
.champ > span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.champ input, .champ textarea {
  inline-size: 100%; padding: .84rem 1rem;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--lisere); border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-block-size: 9rem; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}
.champ--duo { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.champ-piege { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.message-formulaire { padding: .9rem 1.1rem; border-radius: var(--rayon); font-size: .94rem; }
.message-formulaire[data-etat="ok"] { background: color-mix(in srgb, #2f7d52 14%, transparent); color: #256b45; border: 1px solid color-mix(in srgb, #2f7d52 32%, transparent); }
.message-formulaire[data-etat="erreur"] { background: color-mix(in srgb, #b3261e 12%, transparent); color: #9a231c; border: 1px solid color-mix(in srgb, #b3261e 30%, transparent); }

/* --------------------------------------------------- façade de carte */
.carte-geo { position: relative; border-radius: var(--rayon-doux); overflow: hidden; aspect-ratio: 16 / 9; background: var(--fond-doux); }
.carte-geo img, .carte-geo iframe { inline-size: 100%; block-size: 100%; object-fit: cover; border: 0; display: block; }
.carte-geo__epingle {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -100%);
  display: grid; place-items: center; gap: .3rem;
}
.carte-geo__actions { position: absolute; inset-block-end: 1rem; inset-inline: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.carte-geo__credit {
  position: absolute; inset-block-end: .3rem; inset-inline-end: .5rem;
  font-size: .64rem; color: #333; background: rgb(255 255 255 / .74);
  padding: .1rem .4rem; border-radius: 3px;
}
.carte-geo__credit a { color: inherit; }

/* ------------------------------------------------------ pastilles équipe */
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem; flex: none;
  border: 1px solid var(--lisere); border-radius: 50%;
  color: var(--accent); background: var(--fond);
  transition: border-color var(--transition), color var(--transition);
}
.pastille:hover { border-color: var(--accent); }

/* ---------------------------------------------------- corps d'article */
.prose > * + * { margin-block-start: 1.15rem; }
.prose h2, .prose h3, .prose h4 { margin-block-start: 2.2rem; }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.prose h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); }
.prose h4 { font-size: 1.18rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: .42rem; }
.prose li::marker { color: var(--accent); }
.prose img { border-radius: var(--rayon-doux); margin-block: 1.6rem; }
.prose a { color: var(--accent); }
.prose hr { border: 0; block-size: 1px; background: var(--lisere); margin-block: 2.2rem; }
.prose blockquote {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 1.3rem; font-family: var(--titrage); font-size: 1.3rem; color: var(--titre);
}

/* --------------------------------------------- logos de partenaires */
/* borner LES DEUX côtés : sinon un logo presque carré paraît minuscule
   à côté d'un logo très allongé */
.logos { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; justify-content: center; }
.logos img {
  max-block-size: 3.2rem; max-inline-size: 9rem;
  inline-size: auto; block-size: auto;
  opacity: .72; filter: grayscale(1);
  transition: opacity var(--transition), filter var(--transition);
}
.logos img:hover { opacity: 1; filter: none; }

/* ------------------------------------------------------------ bandeau */
.annonce {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1.1rem;
  background: color-mix(in srgb, var(--p-or) 92%, transparent); color: var(--p-nuit);
  font-size: .86rem; border-radius: var(--rayon);
}
.annonce a { font-weight: 500; }
.annonce__fermer { margin-inline-start: auto; flex: none; padding: .2rem .4rem; }

/* ------------------------------------------------ sélecteur de langue */
.langues { position: relative; flex: none; }
.langues__bouton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .12em;
  color: #eceade; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--rayon);
  transition: border-color var(--transition), color var(--transition);
}
.langues__bouton::after {
  content: ""; inline-size: .36rem; block-size: .36rem; flex: none;
  border-inline-end: 1.4px solid currentColor; border-block-end: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
.langues[data-ouvert="true"] .langues__bouton::after { transform: rotate(-135deg) translate(-1px, -1px); }
.langues__bouton:hover { border-color: var(--p-or); color: var(--p-or-clair); }
.langues__liste {
  position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-end: 0; z-index: 50;
  min-inline-size: 7.5rem; padding: .35rem;
  background: #232320; border: 1px solid rgb(200 179 116 / .22);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  display: none;
}
.langues[data-ouvert="true"] .langues__liste { display: block; }
.langues__liste a {
  display: block; padding: .5rem .7rem; border-radius: 3px;
  font-size: .8rem; letter-spacing: .08em; text-decoration: none; color: #e4e1d5;
}
.langues__liste a:hover { background: rgb(200 179 116 / .14); color: #fff; }
.langues__liste a[aria-current="true"] { color: var(--p-or); }
/* en mobile, la liste est toujours dépliée, en rangée */
.langues--mobile { display: flex; gap: .4rem; }
.langues--mobile .langues__bouton { display: none; }
.langues--mobile .langues__liste {
  position: static; display: flex; gap: .3rem; padding: 0;
  background: none; border: 0; box-shadow: none; min-inline-size: 0;
}
.langues--mobile .langues__liste a { border: 1px solid rgb(255 255 255 / .18); padding: .45rem .8rem; }

/* le bloc de recherche occupe toute la largeur qu'on lui donne */
.hero__actions .recherche { inline-size: 100%; }
.hero__actions > * { flex: 1 1 100%; }

/* le voile du héros : assez sombre à gauche pour que le texte tienne
   sur n'importe quelle photo du carrousel */
.hero__voile {
  background:
    linear-gradient(180deg, rgb(15 15 13 / .62) 0%, rgb(15 15 13 / .22) 30%, rgb(15 15 13 / .78) 100%),
    linear-gradient(100deg, rgb(15 15 13 / .74) 0%, rgb(15 15 13 / .34) 48%, rgb(15 15 13 / .05) 78%);
}

/* Cinq cartes : un pavage qui remplit ses deux rangées (3 + 2), plutôt
   qu'une grille de quatre qui laisse la cinquième orpheline. */
.grille--cinq { grid-template-columns: repeat(6, 1fr); }
.grille--cinq > *              { grid-column: span 2; }
.grille--cinq > *:nth-child(4),
.grille--cinq > *:nth-child(5) { grid-column: span 3; }
@media (max-width: 1080px) {
  .grille--cinq { grid-template-columns: repeat(2, 1fr); }
  .grille--cinq > * { grid-column: span 1 !important; }
}
@media (max-width: 680px) {
  .grille--cinq { grid-template-columns: 1fr; }
}

/* =====================================================================
   Le parti pris : hauteur pleine, très grands titres, filets d'or,
   sections numérotées, images qui se dévoilent par un volet.
   ===================================================================== */

/* --- le héros occupe vraiment l'écran --- */
.hero--accueil {
  min-block-size: 100svh;
  block-size: 100svh;
  align-content: center;
}
@supports not (block-size: 100svh) { .hero--accueil { min-block-size: 100vh; block-size: 100vh; } }
.hero--accueil .hero__contenu {
  padding-block-start: clamp(7rem, 16vh, 12rem);
  padding-block-end: clamp(9rem, 18vh, 14rem);
}
.hero--accueil .hero__titre { font-size: clamp(3rem, 1.4rem + 7vw, 8.5rem); }

/* la barre de recherche se pose en bas du héros, sur toute la largeur */
.hero__socle {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 4;
  padding-block-end: clamp(1rem, 3vh, 2rem);
}
.hero__socle .recherche { inline-size: 100%; }
.recherche--barre .recherche__grille {
  grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto;
  align-items: end; gap: 1rem;
}
@media (max-width: 860px) {
  .recherche--barre .recherche__grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .hero--accueil { block-size: auto; min-block-size: 100svh; }
  .hero__socle { position: static; padding-inline: var(--marge-page); padding-block: 0 2rem; }
}

/* --- numérotation des sections : un repère éditorial --- */
.compte {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--titrage); font-size: 1rem; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.compte::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--lisere); }

/* --- un titre vraiment grand, à la mesure d'un 4 étoiles --- */
.titre-geant {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem);
  line-height: .98; letter-spacing: -.02em;
  max-inline-size: 14em;
}

/* --- l'apparition des photos : le « reveal » à parallaxe interne -----
   C'est le mouvement des sites d'hôtellerie haut de gamme, et il tient
   en deux gestes simultanés :

     1. le CADRE se découvre du haut vers le bas (clip-path) ;
     2. l'IMAGE, à l'intérieur, glisse en sens inverse — plus lentement
        et plus longtemps que le cadre.

   Aucun aplat de couleur ne passe jamais sur la photo : c'est ce qui
   distingue un dévoilement d'un volet qui balaie, et ce qui le rend
   doux plutôt que brutal. Les deux durées sont volontairement
   différentes (1,4 s et 2 s) : c'est le décalage qui donne la
   profondeur. La courbe est une exponentielle sortante — très rapide au
   début, presque immobile à la fin, donc jamais d'arrêt sec.       --- */
html.js .volet { position: relative; overflow: hidden; }
html.js .volet > img,
html.js .volet > picture {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1400ms cubic-bezier(.22, 1, .36, 1);
  will-change: clip-path, transform;
}
html.js .volet[data-vu] > img,
html.js .volet[data-vu] > picture { clip-path: inset(0 0 0 0); }

/* le mouvement interne : l'image part plus haut et plus grande, et
   revient à sa place pendant que le cadre s'ouvre */
html.js .volet > img { transform: translateY(-4.5%) scale(1.11); }
html.js .volet[data-vu] > img {
  transform: none;
  transition: clip-path 1400ms cubic-bezier(.22, 1, .36, 1),
              transform 2000ms cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .volet > img, html.js .volet > picture {
    clip-path: none !important; transform: none !important; transition: none;
  }
}

/* --- rangée éditoriale : une chambre = une ligne pleine largeur --- */
.rangee {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  padding-block: clamp(2rem, 4vw, 3.4rem);
  border-block-start: 1px solid var(--lisere);
}
.rangee:first-child { border-block-start: 0; }
.rangee--inverse > .rangee__media { order: 2; }
.rangee__media { position: relative; border-radius: var(--rayon-doux); overflow: hidden; aspect-ratio: 16 / 10; }
.rangee__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.rangee__corps { display: grid; gap: .9rem; align-content: center; }
.rangee__titre { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); }
.rangee__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.jeton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .78rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux);
  border: 1px solid var(--lisere); border-radius: 999px;
}
@media (max-width: 860px) {
  .rangee { grid-template-columns: 1fr; }
  .rangee--inverse > .rangee__media { order: 0; }
}

/* --- un filet d'or qui se trace au défilement --- */
html.js .filet-or { block-size: 1px; background: var(--lisere); position: relative; }
html.js .filet-or::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent-vif), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1400ms cubic-bezier(.22,.61,.36,1);
}
html.js .filet-or[data-vu]::after { transform: scaleX(1); }

/* --- bandeau pleine largeur avec photo de fond --- */
.bandeau-photo {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: clamp(24rem, 62vh, 40rem);
  display: grid; align-content: center;
}
.bandeau-photo > .fond { position: absolute; inset: 0; z-index: -2; }
.bandeau-photo > .fond img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bandeau-photo > .voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(15 15 13 / .84) 0%, rgb(15 15 13 / .5) 55%, rgb(15 15 13 / .16) 100%);
}

/* =====================================================================
   HÉROS D'ACCUEIL — refonte
   Trois zones qui ne se chevauchent JAMAIS : le titre à gauche, le
   panneau de la diapo à droite, la barre de recherche en socle. Le tout
   tient dans 100svh grâce à une grille en trois rangées, sans position
   absolue qui déborderait.
   ===================================================================== */
.hero--accueil {
  min-block-size: 100svh; block-size: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  align-content: stretch; padding: 0;
}
@supports not (block-size: 100svh) { .hero--accueil { min-block-size: 100vh; block-size: 100vh; } }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(6.5rem, 14vh, 10rem) clamp(1.2rem, 3vh, 2.4rem);
  min-block-size: 0;
}
.hero--accueil .hero__contenu {
  padding: 0; display: grid; gap: 1rem; justify-items: start;
  max-inline-size: none; align-content: end;
}
.hero--accueil .hero__titre {
  font-size: clamp(2.8rem, 1.2rem + 6.2vw, 7.4rem);
  line-height: .92; margin-block: .2rem;
}
.hero--accueil .hero__texte { max-inline-size: 34ch; }

/* le panneau de droite : ce que montre la diapo en cours */
.hero__panneau { position: relative; min-block-size: 15rem; align-self: end; }
.hero__legende {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: grid; gap: .55rem; justify-items: start;
  padding: 1.4rem 1.5rem;
  background: rgb(15 15 13 / .42);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(200 179 116 / .3);
  border-radius: var(--rayon-doux);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1);
}
.hero__legende[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }
.hero__index {
  font-family: var(--titrage); font-size: .95rem; letter-spacing: .08em;
  color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums;
}
.hero__index span { color: var(--p-or); font-size: 1.5rem; }
.hero__legende-titre { font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); color: #fff; }
.hero__legende-texte { color: #ded9cd; font-size: .95rem; max-inline-size: 40ch; }
.lien-file--clair { color: var(--p-or-clair); }
.lien-file--clair::before { background: var(--p-or); }

/* le socle : puces + recherche, toujours dans l'écran */
.hero__socle { position: static; padding-block-end: clamp(1rem, 2.6vh, 2rem); }
.hero__socle-interieur { display: grid; gap: .9rem; }
.hero__puces { display: flex; gap: .55rem; }
.hero__puce {
  flex: 1 1 auto; max-inline-size: 5.5rem; padding: .6rem 0 0;
  background: none; border: 0;
}
.hero__puce i {
  display: block; block-size: 2px; border-radius: 2px;
  background: rgb(255 255 255 / .28);
  transition: background-color var(--transition);
}
.hero__puce[aria-current="true"] i { background: var(--p-or); }
/* la barre se remplit pendant que la diapo est affichée */
.hero__puce[aria-current="true"] i { position: relative; overflow: hidden; }

.hero__descendre {
  position: absolute; inset-block-end: 50%; inset-inline-end: var(--marge-page);
  inline-size: 1px; block-size: 3.4rem; padding: 0;
  background: linear-gradient(180deg, transparent, var(--p-or));
  display: none;
}

@media (max-width: 1000px) {
  .hero__grille { grid-template-columns: 1fr; align-items: end; }
  .hero__panneau { min-block-size: 0; }
  .hero__legende { position: static; opacity: 1; transform: none; display: none; }
  .hero__legende[data-active="true"] { display: grid; }
}
@media (max-width: 700px) {
  .hero--accueil { block-size: auto; min-block-size: 100svh; }
  .hero__grille { padding-block-start: clamp(5.5rem, 13vh, 8rem); }
  .hero--accueil .hero__titre { font-size: clamp(2.6rem, 1.4rem + 7vw, 4rem); }
  .hero__legende { padding: 1.1rem 1.2rem; }
}

/* Le héros d'accueil occupe l'écran MOINS l'en-tête : sans cette
   soustraction, 100svh + l'en-tête dépasse la fenêtre et la barre de
   recherche se retrouve coupée en bas. --haut-total est mesuré par le
   script (bandeau de service + en-tête), avec un repli raisonnable. */
.hero--accueil {
  block-size: calc(100svh - var(--haut-total, 8rem));
  min-block-size: calc(100svh - var(--haut-total, 8rem));
}
@supports not (block-size: 100svh) {
  .hero--accueil {
    block-size: calc(100vh - var(--haut-total, 8rem));
    min-block-size: calc(100vh - var(--haut-total, 8rem));
  }
}
@media (max-width: 700px) {
  .hero--accueil { block-size: auto; min-block-size: calc(100svh - var(--haut-total, 5rem)); }
}

/* =====================================================================
   Corrections relevées par la revue automatique
   ===================================================================== */

/* --- l'en-tête débordait en mobile : les actions passent en ligne
       compacte, et le sélecteur de langue rejoint le menu --- */
@media (max-width: 1100px) {
  .entete__interieur { min-height: 4.4rem; gap: .6rem; }
  .entete__actions { gap: .45rem; margin-inline-start: auto; }
  .entete__actions .langues { display: none; }
  .entete .bouton { padding: .62rem .9rem; font-size: .68rem; }
}
@media (max-width: 460px) {
  .entete__logo img { block-size: 2.1rem; }
  .entete .bouton { padding: .58rem .75rem; font-size: .64rem; letter-spacing: .1em; }
}

/* --- un titre court ne doit pas tomber sur trois lignes : la largeur
       se pose sur LE TITRE, en em, pour suivre sa taille réelle --- */
.titre-geant, .rangee__titre { max-inline-size: 15em; }
.titre-section { max-inline-size: 17em; }
@media (min-width: 1000px) {
  .rangee__corps .rangee__titre { max-inline-size: 11em; }
}

/* --- les numéros de section : présents, pas timides --- */
.compte {
  align-items: center; gap: 1rem;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  color: var(--accent-vif);
  letter-spacing: .02em;
}
.nuit .compte { color: var(--p-or); }
.compte span {
  font-family: var(--courante); font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux);
}
.nuit .compte span { color: #b8b2a3; }
.compte::after { block-size: 1px; background: currentColor; opacity: .34; }

/* Toute grande photo s'ouvre dans la visionneuse : le geste est naturel
   sur un site d'hôtel, et rien ne signalait qu'on pouvait agrandir. */
.agrandir { cursor: zoom-in; position: relative; }
.agrandir::after {
  content: "";
  position: absolute; inset-block-end: .85rem; inset-inline-end: .85rem;
  inline-size: 2.6rem; block-size: 2.6rem; z-index: 3;
  border-radius: 50%;
  background: rgb(15 15 13 / .58) center / 1rem 1rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--transition), transform var(--transition);
}
.agrandir:hover::after, .agrandir:focus-visible::after { opacity: 1; transform: none; }

/* =====================================================================
   Le panneau du héros ne doit JAMAIS bouger d'une diapo à l'autre.
   Sa hauteur est fixe et son contenu borné : un texte de trois lignes
   ferait autrement remonter tout le bloc.
   ===================================================================== */
.hero__panneau {
  min-block-size: 17.5rem; block-size: 17.5rem;
  align-self: end;
}
.hero__legende {
  inset-block: 0;                      /* ancré HAUT ET BAS : figé */
  align-content: start;
  padding: 1.6rem 1.7rem;
  gap: .7rem;
  transform: none;                     /* plus de glissement du bloc */
  transition: opacity 520ms ease;
}
.hero__legende-titre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__legende-texte {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-block-size: 4.2rem;
}
.hero__legende .lien-file { margin-block-start: auto; }

/* Le contenu, lui, glisse — le cadre reste immobile. Chaque élément
   entre avec un léger décalage : c'est ce qui fait la différence entre
   un fondu plat et une vraie transition. */
html.js .hero__legende > * { opacity: 0; transform: translateY(12px); }
html.js .hero__legende[data-active="true"] > * {
  opacity: 1; transform: none;
  transition: opacity 620ms ease, transform 760ms cubic-bezier(.22,.61,.36,1);
}
html.js .hero__legende[data-active="true"] > *:nth-child(1) { transition-delay: 90ms; }
html.js .hero__legende[data-active="true"] > *:nth-child(2) { transition-delay: 170ms; }
html.js .hero__legende[data-active="true"] > *:nth-child(3) { transition-delay: 250ms; }
html.js .hero__legende[data-active="true"] > *:nth-child(4) { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero__legende > * { opacity: 1 !important; transform: none !important; }
}

/* La transition entre photos : un fondu long, doublé d'un très léger
   zoom — jamais de coupure franche. */
.hero__diapo[data-active="true"] { transition-duration: 1200ms; z-index: 1; }
.hero__diapo img { object-position: center 45%; }

/* Les photos de héros de page : cadrage légèrement haut. Le centre
   exact coupe les plafonds sur les vues d'intérieur. */
.hero__fond img { object-position: center 42%; }
.rangee__media img, .duo__media img { object-position: center 48%; }

@media (max-width: 1000px) {
  .hero__panneau { min-block-size: 0; block-size: auto; }
  .hero__legende { position: static; inset: auto; }
  .hero__legende-texte { min-block-size: 0; }
}

/* =====================================================================
   HÉROS DE PAGE — il ne suffit pas d'une photo et d'un titre au milieu.
   Le titre s'ancre EN BAS À GAUCHE, sur un filet d'or, avec le nom de
   la rubrique au-dessus : c'est la page qui s'annonce, pas un bandeau.
   ===================================================================== */
.hero:not(.hero--accueil) {
  min-block-size: clamp(26rem, 66svh, 40rem);
  align-content: end;
}
.hero:not(.hero--accueil) .hero__contenu {
  padding-block: clamp(6rem, 16vh, 9rem) clamp(2.6rem, 7vh, 4.6rem);
  gap: .85rem;
  max-inline-size: 52rem;
}
.hero:not(.hero--accueil) .hero__titre {
  font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem);
  line-height: .96;
}
.hero:not(.hero--accueil) .hero__texte {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.35rem);
  max-inline-size: 48ch;
  color: #e6e1d6;
}
/* le filet d'or qui souligne le titre, tracé à l'arrivée */
.hero__filet {
  inline-size: 0; block-size: 2px; background: var(--p-or);
  margin-block-start: .4rem;
}
html.js .hero__filet { transition: inline-size 1100ms cubic-bezier(.22,.61,.36,1) 260ms; }
html.js .hero__filet[data-vu], html:not(.js) .hero__filet { inline-size: 5.5rem; }

/* =====================================================================
   BLOCS DE TEXTE SANS PHOTO — une composition éditoriale à deux
   colonnes plutôt qu'un pavé centré qui flotte.
   ===================================================================== */
.bloc-texte {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 4.5rem);
  align-items: start;
}
.bloc-texte__tete { position: sticky; inset-block-start: calc(var(--haut-collant, 5rem) + 2rem); }
.bloc-texte__tete .rangee__titre { max-inline-size: 9em; }
.bloc-texte__corps { max-inline-size: 68ch; }
@media (max-width: 900px) {
  .bloc-texte { grid-template-columns: 1fr; }
  .bloc-texte__tete { position: static; }
}

/* un long texte respire en deux colonnes sur grand écran */
.prose--longue { columns: 2; column-gap: clamp(2rem, 4vw, 3.6rem); }
.prose--longue > * { break-inside: avoid; }
.prose--longue h2, .prose--longue h3, .prose--longue h4 { column-span: all; }
@media (max-width: 1000px) { .prose--longue { columns: 1; } }

/* Un seul espacement, quel que soit le fond. La règle précédente
   supprimait le padding haut des sections blanches qui se suivaient :
   l'écart changeait selon la couleur, ce qui se voit immédiatement. */

/* =====================================================================
   BANDEAU PHOTO — le texte doit rester lisible sur N'IMPORTE quelle
   photo. Un dégradé qui s'éclaircit là où le texte se pose (c'était le
   cas : voile à 16 % côté droit, texte blanc par-dessus une salle de
   bain claire) le rend illisible. Le voile est donc le plus dense
   DERRIÈRE le texte.
   ===================================================================== */
.bandeau-photo > .voile {
  background:
    linear-gradient(180deg, rgb(12 12 11 / .5) 0%, rgb(12 12 11 / .22) 40%, rgb(12 12 11 / .62) 100%),
    linear-gradient(270deg, rgb(12 12 11 / .88) 0%, rgb(12 12 11 / .72) 38%, rgb(12 12 11 / .28) 100%);
}
.bandeau-photo--gauche > .voile {
  background:
    linear-gradient(180deg, rgb(12 12 11 / .5) 0%, rgb(12 12 11 / .22) 40%, rgb(12 12 11 / .62) 100%),
    linear-gradient(90deg, rgb(12 12 11 / .88) 0%, rgb(12 12 11 / .72) 38%, rgb(12 12 11 / .28) 100%);
}
/* le texte se pose sur une colonne, jamais en pleine largeur d'écran */
.bandeau-photo__texte { max-inline-size: min(100%, 46rem); display: grid; gap: 1rem; }
.bandeau-photo__texte .chapo { color: #ded9cd; }
.bandeau-photo__texte .chapo strong { color: #fff; font-weight: 500; }

/* =====================================================================
   DISTINCTIONS — des logos de tailles très inégales (un badge presque
   carré de 100×155 à côté d'un logo allongé) paraissent minuscules si
   l'on ne borne qu'un seul côté. On borne les DEUX, et on leur donne
   une ligne à eux, avec leur intitulé.
   ===================================================================== */
.distinctions {
  display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center; justify-content: center;
}
.distinction {
  display: flex; align-items: center; gap: .85rem;
  color: var(--texte-doux);
}
.distinction img {
  max-block-size: 4.2rem; max-inline-size: 7rem;
  inline-size: auto; block-size: auto;
  opacity: .9;
}
.distinction span {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  max-inline-size: 9rem; line-height: 1.5;
}

/* =====================================================================
   BLOC « GROUPES » — une ligne isolée entre deux filets ne dit rien.
   On en fait une vraie invitation, avec son intitulé et son adresse.
   ===================================================================== */
.encart {
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-doux);
  background: var(--fond-carte);
}
.encart__titre { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }

/* =====================================================================
   FORMULAIRES — étiquette flottante, filet qui se trace au focus.
   Un champ encadré et une étiquette au-dessus, c'est un formulaire
   d'administration ; sur un site d'hôtel, la saisie doit être aussi
   soignée que le reste.
   ===================================================================== */
.champ--flottant { position: relative; display: block; }
.champ--flottant > input,
.champ--flottant > textarea {
  inline-size: 100%;
  padding: 1.55rem .2rem .55rem;
  background: transparent; color: inherit;
  border: 0; border-block-end: 1px solid var(--lisere);
  border-radius: 0;
  transition: border-color var(--transition);
}
.champ--flottant > textarea { min-block-size: 7rem; resize: vertical; }
.champ--flottant > span {
  position: absolute; inset-inline-start: .2rem; inset-block-start: 1.35rem;
  font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--texte-doux); pointer-events: none;
  transform-origin: left top;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), color 260ms;
}
.champ--flottant > input:focus + span,
.champ--flottant > textarea:focus + span,
.champ--flottant > input:not(:placeholder-shown) + span,
.champ--flottant > textarea:not(:placeholder-shown) + span {
  transform: translateY(-1.25rem) scale(.72);
  color: var(--accent);
}
/* le filet qui se trace sous le champ actif */
.champ--flottant::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.champ--flottant:focus-within::after { transform: scaleX(1); }
.champ--flottant > input:focus, .champ--flottant > textarea:focus { outline: none; }
.nuit .champ--flottant > input, .nuit .champ--flottant > textarea {
  border-block-end-color: rgb(255 255 255 / .22); color: #fff;
}
.nuit .champ--flottant > span { color: #a8a294; }
.nuit .champ--flottant > input:focus + span,
.nuit .champ--flottant > input:not(:placeholder-shown) + span { color: var(--p-or-clair); }

/* le bouton d'envoi occupe la ligne, avec son état d'attente */
.formulaire button[type="submit"] { justify-self: start; min-inline-size: 12rem; }
.formulaire button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.formulaire__note { font-size: .82rem; color: var(--texte-doux); }
.nuit .formulaire__note { color: #a8a294; }

/* =====================================================================
   Corrections de lisibilité relevées par la revue
   ===================================================================== */

/* --accent-vif est une couleur de DÉCOR : sur fond clair elle ne donne
   que 1,95 de contraste. Tout ce qui est TEXTE prend --accent. */
.compte { color: var(--accent); }
.nuit .compte, .bandeau-photo .compte { color: var(--p-or); }
.surtitre { color: var(--accent); }
.nuit .surtitre, .hero .surtitre, .bandeau-photo .surtitre { color: var(--p-or-clair); }
.chiffre__valeur { color: var(--accent); }
.nuit .chiffre__valeur { color: var(--p-or); }
.offre__prix { color: var(--accent); }
.prose a { color: var(--accent); }
.pied__titre { color: var(--p-or-clair); }

/* les badges posés sur une photo : franchement opaques, sinon le texte
   se perd dès que la photo est claire */
.badge { background: rgb(18 18 16 / .92); color: #fff; }
.badge--or { background: var(--p-or); color: #16160f; font-weight: 500; }

/* un titre dans une demi-colonne ne doit pas se casser en trois lignes :
   on plafonne sa taille, la largeur seule ne suffit pas */
.duo__texte .titre-geant,
.rangee__corps .rangee__titre,
.bandeau-photo__texte .titre-geant {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem);
}
.bloc-texte__tete .rangee__titre { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.6rem); }

/* Les titres de héros de page tombaient sur trois lignes pour cinq mots :
   la colonne était plus étroite que le titre. On l'élargit et on
   plafonne la taille — la largeur seule ne suffit jamais. */
.hero:not(.hero--accueil) .hero__contenu { max-inline-size: min(100%, 62rem); }
.hero:not(.hero--accueil) .hero__titre {
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem);
  max-inline-size: 16em;
}
@media (max-width: 700px) {
  .hero:not(.hero--accueil) .hero__titre { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.9rem); }
}

/* =====================================================================
   ALIGNEMENT — un seul axe pour tout le site : à GAUCHE.
   Le piège rencontré : `.large` (qui centre un conteneur de 1320 px) et
   `.hero__contenu` (qui borne le texte à 62 rem) étaient le MÊME
   élément. La borne l'emportait, et tout le bloc se recentrait —
   le titre du héros commençait à 31 % de l'écran au lieu de la marge.
   Désormais : `.large` tient la largeur, `.hero__contenu` tient le texte.
   ===================================================================== */
.hero__contenu { max-inline-size: min(100%, 62rem); margin-inline: 0; }
.hero--centre .hero__contenu { margin-inline: auto; }

/* =====================================================================
   SYMÉTRIE — une grille `auto-fit` décide seule du nombre de colonnes,
   et six cartes tombaient en 4 + 2. Les grilles de cartes ont donc un
   nombre de colonnes EXPLICITE : six cartes font deux rangées de trois.
   ===================================================================== */
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   VISIONNEUSE — les flèches doivent être là où l'œil les cherche :
   de part et d'autre du cliché, à mi-hauteur. Reléguées dans le pied,
   à droite, elles ne se lisaient pas comme « précédent / suivant ».
   ===================================================================== */
.visionneuse__nav { display: contents; }
.visionneuse__nav button {
  position: fixed; inset-block-start: 50%; z-index: 4;
  transform: translateY(-50%);
  inline-size: 3.4rem; block-size: 3.4rem;
  background: rgb(255 255 255 / .07);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.visionneuse__nav button[data-prec] { inset-inline-start: clamp(.6rem, 2vw, 1.6rem); }
.visionneuse__nav button[data-suiv] { inset-inline-end: clamp(.6rem, 2vw, 1.6rem); }
.visionneuse__cadre img { padding-inline: clamp(4rem, 8vw, 7rem); }
.visionneuse__pied { block-size: 4.4rem; justify-content: center; text-align: center; }
.visionneuse__legende { flex: 0 1 auto; max-inline-size: 60ch; }
@media (max-width: 640px) {
  .visionneuse__nav button { inline-size: 2.8rem; block-size: 2.8rem; }
  .visionneuse__cadre img { padding-inline: 3.4rem; }
}

/* Les caractéristiques d'une chambre, en bandeau : chaque colonne porte
   son intitulé et sa valeur, et la ligne se répartit à parts égales. */
.fiche-carac {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-block: 1px solid var(--lisere);
}
.fiche-carac > div {
  display: grid; gap: .35rem;
  padding: 1.4rem clamp(1rem, 2vw, 1.8rem);
  border-inline-start: 1px solid var(--lisere);
}
.fiche-carac > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fiche-carac span {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux);
}
.fiche-carac strong {
  font-family: var(--titrage); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 400;
}
@media (max-width: 760px) {
  .fiche-carac > div { border-inline-start: 0; border-block-start: 1px solid var(--lisere); padding-inline: 0; }
  .fiche-carac > div:first-child { border-block-start: 0; }
}

/* =====================================================================
   CALENDRIER DE SÉJOUR
   ===================================================================== */
.champ-natif { position: absolute !important; inline-size: 1px !important; block-size: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.calendrier { position: relative; grid-column: 1 / span 2; }
@media (max-width: 860px) { .calendrier { grid-column: 1 / -1; } }

.calendrier__champs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.calendrier__champ {
  display: grid; gap: .3rem; justify-items: start; text-align: start;
  padding: .68rem .9rem;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--rayon);
  transition: border-color var(--transition), background-color var(--transition);
}
.calendrier__champ span {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--p-or-clair);
}
.calendrier__champ strong {
  font-family: var(--titrage); font-weight: 400; font-size: 1.12rem; color: #fff;
}
.calendrier__champ[data-rempli="false"] strong { color: rgb(255 255 255 / .45); }
.calendrier__champ[data-actif="true"] { border-color: var(--p-or); background: rgb(200 179 116 / .1); }

.calendrier__volet {
  position: absolute; inset-block-end: calc(100% + .7rem); inset-inline-start: 0; z-index: 60;
  inline-size: min(40rem, calc(100vw - 2 * var(--marge-page)));
  padding: 1.1rem;
  background: #1f1f1c; color: #fff;
  border: 1px solid rgb(200 179 116 / .3);
  border-radius: var(--rayon-doux);
  box-shadow: var(--ombre-forte);
}
.calendrier__volet[hidden] { display: none; }
.calendrier__tete { display: flex; align-items: center; gap: .8rem; margin-block-end: .7rem; }
.calendrier__mois {
  flex: 1 1 auto; text-align: center;
  font-family: var(--titrage); font-size: 1.05rem; color: var(--p-or-clair);
}
.calendrier__fleche {
  inline-size: 2.2rem; block-size: 2.2rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: #fff;
}
.calendrier__fleche:hover { border-color: var(--p-or); background: rgb(200 179 116 / .14); }

.calendrier__grilles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.calendrier__nom {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #b8b2a3; text-align: center; margin-block-end: .5rem;
}
.calendrier__jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendrier__jours abbr {
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8f8a7d; text-align: center; padding-block: .3rem; text-decoration: none;
}
.calendrier__jours button {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: .84rem; border-radius: 4px; color: #eceade;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms, color 160ms;
}
.calendrier__jours button:hover:not(:disabled) { background: rgb(200 179 116 / .22); }
.calendrier__jours button:disabled { color: rgb(255 255 255 / .2); cursor: default; }
.calendrier__jours button[data-dedans] { background: rgb(200 179 116 / .14); border-radius: 0; }
.calendrier__jours button[data-debut], .calendrier__jours button[data-fin] {
  background: var(--p-or); color: #1d1d1b; font-weight: 500;
}
.calendrier__jours button[data-debut] { border-radius: 4px 0 0 4px; }
.calendrier__jours button[data-fin] { border-radius: 0 4px 4px 0; }
.calendrier__jours button[data-debut][data-fin] { border-radius: 4px; }

.calendrier__pied {
  display: flex; align-items: center; gap: 1rem;
  margin-block-start: .9rem; padding-block-start: .8rem;
  border-block-start: 1px solid rgb(255 255 255 / .12);
}
.calendrier__resume { font-size: .84rem; color: var(--p-or-clair); }
.calendrier__effacer {
  margin-inline-start: auto;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #b8b2a3;
}
.calendrier__effacer:hover { color: #fff; }

@media (max-width: 720px) {
  .calendrier__grilles { grid-template-columns: 1fr; }
  .calendrier__volet { inset-block-end: auto; inset-block-start: calc(100% + .6rem); }
}

/* Le champ « personnes » prend exactement la même forme que les deux
   champs de dates : intitulé à l'intérieur du cadre, même hauteur,
   même graisse. Sans cela, trois champs voisins ne s'alignent pas. */
.select--encadre {
  display: grid; gap: .3rem; justify-items: start;
  padding: .68rem .9rem;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--rayon);
  transition: border-color var(--transition), background-color var(--transition);
}
.select--encadre:hover, .select--encadre[data-ouvert="true"] {
  border-color: var(--p-or); background: rgb(200 179 116 / .1);
}
.select__intitule {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--p-or-clair);
}
.select--encadre .select__bouton {
  padding: 0; background: none; border: 0; inline-size: 100%;
  font-family: var(--titrage); font-size: 1.12rem; color: #fff;
}
.select--encadre .select__bouton::after { margin-inline-start: auto; opacity: .7; }
.select--encadre .select__liste { inset-inline: -1px; inset-block-start: calc(100% + .45rem); }
.recherche__champ--select { display: grid; }
/* le bouton prend la hauteur des champs : un bloc de recherche dont le
   bouton est plus court qu'eux se voit immédiatement */
.recherche__grille > .bouton { block-size: 100%; min-block-size: 3.3rem; }

/* --- le menu : tous les liens ont la même boîte -----------------------
   Un <a> enfant direct de .nav (flex) devient un bloc flex de 37 px,
   tandis qu'un <a> dans .nav__groupe reste en ligne, à 34 px : les
   entrées sans sous-menu se retrouvaient trois pixels plus haut. */
.nav > .nav__lien, .nav__groupe > .nav__lien {
  display: inline-flex; align-items: center;
  block-size: 2.125rem;
}
.nav__groupe { display: inline-flex; align-items: center; }

/* --- le bloc de recherche, plus compact ------------------------------
   Trois champs de 76 px font un bandeau trop haut sous le héros. */
.calendrier__champ, .select--encadre { padding: .5rem .85rem; gap: .18rem; }
.calendrier__champ strong, .select--encadre .select__bouton { font-size: 1.02rem; }
.recherche { padding: .85rem .9rem; }
.recherche__grille { gap: .7rem; }
.recherche__grille > .bouton { min-block-size: 2.9rem; }

/* --- le bloc de recherche : fin, comme une barre, pas comme un formulaire */
.recherche { padding: .55rem .6rem; }
.recherche__grille { gap: .5rem; }
.calendrier__champ, .select--encadre { padding: .42rem .8rem .46rem; gap: .1rem; }
.calendrier__champ span, .select__intitule { font-size: .58rem; letter-spacing: .16em; }
.calendrier__champ strong, .select--encadre .select__bouton { font-size: .98rem; line-height: 1.35; }
.calendrier__champs { gap: .5rem; }
.recherche__grille > .bouton { min-block-size: 0; block-size: 100%; padding-block: .6rem; }

/* La liste déroulante et le calendrier sortent du héros, qui rogne ce
   qui dépasse : ils s'ouvrent donc VERS LE HAUT dans la barre de
   recherche, où il n'y a de place qu'au-dessus. */
.hero__socle .select__liste {
  inset-block-start: auto; inset-block-end: calc(100% + .4rem);
}
.hero { overflow: visible; }
.hero__diapos, .hero__fond { overflow: hidden; }

/* Un titre de page long (les pages légales, surtout) tombe sur trois
   lignes à 4,6 rem : on le laisse respirer en réduisant sa taille
   au-delà d'une certaine longueur. `text-wrap: balance` fait le reste. */
.hero__titre { text-wrap: balance; }
.hero:not(.hero--accueil) .hero__titre:has(> span:only-child) { max-inline-size: 14em; }

/* =====================================================================
   HÉROS DE PAGE — la photo était tranchée net par le bas de la section,
   ce qui donne l'impression d'une image coupée au ciseau. On la fait
   fondre vers la section suivante, et on lui laisse plus de hauteur
   pour que le sujet respire.
   ===================================================================== */
.hero:not(.hero--accueil) { min-block-size: clamp(30rem, 74svh, 46rem); }
.hero:not(.hero--accueil)::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: clamp(5rem, 12vh, 9rem); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--fond) 92%);
}
/* quand la section suivante est ivoire, le fondu prend la même teinte */
.hero--vers-doux::after { background: linear-gradient(180deg, transparent, var(--p-ivoire) 92%); }
.hero:not(.hero--accueil) .hero__contenu { position: relative; z-index: 2; }

/* le sujet d'une photo d'intérieur est rarement au centre exact : un
   cadrage légèrement haut garde les plafonds et les têtes de lit */
.hero__fond img { object-position: center 38%; }

/* Le héros fond déjà vers le blanc : la section qui le suit n'a pas
   besoin de son plein espacement en haut, sinon le vide se cumule. */
.hero + .section,
.hero + section > .section:first-child { padding-block-start: clamp(1.6rem, 3.5vw, 3rem); }

/* Derniers titres étriqués relevés par la revue :
   — en mobile, un titre de héros de 26 signes tombait sur trois lignes ;
   — « Votre petit-déjeuner d'entreprise » ne tenait pas dans la colonne
     de 20 rem des blocs éditoriaux. */
@media (max-width: 560px) {
  .hero:not(.hero--accueil) .hero__titre { font-size: clamp(1.85rem, 1rem + 4.2vw, 2.4rem); }
  .rangee__titre, .titre-geant { font-size: clamp(1.6rem, 1rem + 3.6vw, 2.2rem); }
}
@media (min-width: 900px) {
  .bloc-texte { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
  .bloc-texte__tete .rangee__titre { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem); max-inline-size: 12em; }
}

/* L'en-tête d'une section : ce qui dépasse du héros doit être une amorce
   de TEXTE — un numéro, un titre —, jamais une photo tranchée. */
.entete-section { margin-block-end: clamp(2rem, 4vw, 3.2rem); display: grid; gap: .2rem; }
.entete-section .chapo { margin-block-start: .7rem; }

/* =====================================================================
   HÉROS PLEIN ÉCRAN — sur TOUTES les pages, pas seulement l'accueil.
   Un héros qui s'arrête aux trois quarts laisse une bande sous lui et
   coupe la page en deux : on voit la fin d'une image et le début d'autre
   chose, sans que ni l'une ni l'autre soit entière.
   La hauteur retranche l'en-tête (bandeau de service compris), sinon
   100svh + en-tête dépasse la fenêtre.
   ===================================================================== */
.hero:not(.hero--accueil) {
  block-size: calc(100svh - var(--haut-total, 8rem));
  min-block-size: calc(100svh - var(--haut-total, 8rem));
  align-content: end;
}
@supports not (block-size: 100svh) {
  .hero:not(.hero--accueil) {
    block-size: calc(100vh - var(--haut-total, 8rem));
    min-block-size: calc(100vh - var(--haut-total, 8rem));
  }
}
/* plus de fondu vers le blanc : le héros va jusqu'au bord, franchement */
.hero:not(.hero--accueil)::after { display: none; }
.hero:not(.hero--accueil) .hero__contenu {
  padding-block-end: clamp(3.5rem, 9vh, 6rem);
}
@media (max-width: 700px) {
  .hero:not(.hero--accueil) {
    block-size: auto;
    min-block-size: calc(100svh - var(--haut-total, 5rem));
  }
}

/* =====================================================================
   UN SEUL MODÈLE DE SECTION — c'est la cohérence que réclamait la revue :
   les titres de section prenaient sept tailles différentes selon le bloc
   (86, 54, 51, 35, 33, 23 px) et les numéros trois positions (60, 85,
   764 px) selon que la rangée était inversée. Désormais, partout :

       [ 03 ─────────────────── ]   ← en-tête, toujours sur la marge
       [ Titre de la section    ]   ← une seule taille
       [ chapô                  ]
       [ contenu : photo + texte, ou galerie, ou texte seul ]
   ===================================================================== */
.entete-section {
  display: grid; gap: .1rem; justify-items: start;
  margin-block-end: clamp(1.6rem, 3vw, 2.6rem);
  max-inline-size: 46rem;
}
.entete-section .compte { inline-size: min(100%, 22rem); }
.titre-section-page {
  font-size: clamp(1.9rem, 1.25rem + 2vw, 3.1rem);   /* LA taille des h2 */
  line-height: 1.04;
  margin-block-start: .6rem;
  max-inline-size: 18em;
}
.entete-section .chapo { margin-block-start: .8rem; }
.chapo--fort { color: var(--texte); font-size: 1.08em; max-inline-size: 60ch; }

.corps-section { max-inline-size: 68ch; }
.corps-section--large { max-inline-size: none; }
.duo--texte > .corps-section { max-inline-size: none; }

/* l'ancien modèle à colonne collante n'a plus lieu d'être */
.bloc-texte { display: block; }
.bloc-texte__tete { position: static; margin-block-end: 1.6rem; }

/* L'échelle typographique, une fois pour tout le site :
     titre de page (héros)    71 px
     titre de section         49 px   .titre-section-page
     titre dans le corps      31 px   .prose h2
     sous-titre dans le corps 25 px   .prose h3
     titre de carte           23 px   .carte__titre
   Une hiérarchie, pas sept tailles au hasard. */
.prose h2 { font-size: clamp(1.45rem, 1.15rem + .9vw, 1.95rem); }
.prose h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); }
.prose h4 { font-size: 1.12rem; }
.titre-section { font-size: clamp(1.9rem, 1.25rem + 2vw, 3.1rem); }

/* Un en-tête de section vit sur la marge ; celui d'une colonne suit sa
   colonne — c'est le seul cas où il n'est pas à 60 px, et il est déclaré
   comme tel plutôt que subi. */
.entete-section--colonne { max-inline-size: none; }
.univers + .univers { margin-block-start: clamp(3rem, 7vw, 6rem); }

/* =====================================================================
   Le héros occupe tout l'écran : son titre peut respirer davantage.
   Un titre de 71 px dans 824 px de hauteur paraissait timide.
   ===================================================================== */
.hero:not(.hero--accueil) .hero__titre {
  font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.8rem);
  max-inline-size: 15em;
}
.hero:not(.hero--accueil) .hero__texte {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.55rem);
  max-inline-size: 44ch;
}
.hero:not(.hero--accueil) .hero__surtitre { font-size: .82rem; }
.hero__filet { block-size: 2px; }
html.js .hero__filet[data-vu], html:not(.js) .hero__filet { inline-size: 7rem; }

@media (max-width: 700px) {
  .hero:not(.hero--accueil) .hero__titre { font-size: clamp(2.2rem, 1.2rem + 5vw, 3.2rem); }
  .hero:not(.hero--accueil) .hero__texte { font-size: 1.05rem; }
}

/* =====================================================================
   ESPACEMENT DES SECTIONS — une seule valeur, partout.
   Elle était de 115 px en haut ET en bas, soit 230 px entre deux
   sections : beaucoup trop. Et la première section après un héros avait
   sa propre valeur (48 px), d'où une différence visible selon l'endroit.
   ===================================================================== */
.section { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.hero + .section,
.hero + section > .section:first-child { padding-block-start: clamp(2.2rem, 4vw, 3.4rem); }
/* pas d'exception sur la dernière : une valeur unique, sans quoi
   l'écart change selon l'endroit de la page */

/* La carte de prix suit le défilement pendant la lecture du détail.
   ⚠ `align-self: start` était l'erreur : la colonne prenait alors la
   hauteur de la carte, et une carte aussi haute que son parent n'a
   nulle part où coller. Il faut que la COLONNE s'étire (stretch) et que
   ce soit la CARTE qui colle à l'intérieur. */
@media (min-width: 900px) {
  .aside-collant {
    align-self: stretch;
    block-size: 100%;
  }
  .aside-collant > .carte {
    position: sticky;
    inset-block-start: calc(var(--haut-collant, 5rem) + 1.5rem);
  }
}

/* =====================================================================
   PHOTO ET TEXTE CÔTE À CÔTE — l'image ne doit pas écraser son texte.
   Une photo au format portrait (2752 × 5664 px pour la terrasse) posée
   à côté de trois lignes produisait une colonne d'image quatre fois plus
   haute que le texte. On borne son rapport ET sa hauteur.
   ===================================================================== */
/* ⚠ `aspect-ratio` ET `max-block-size` sur le même élément font grandir
   sa LARGEUR : 34 rem de haut en 4/3 donnent 45 rem de large, soit
   720 px sur un écran de 390 — 52 débordements horizontaux d'un coup.
   On borne donc l'IMAGE, jamais le conteneur, qui garde sa largeur. */
.duo__media, .rangee__media { inline-size: 100%; overflow: hidden; }
.duo__media img, .rangee__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  max-block-size: 34rem;
  object-fit: cover;
}
/* quand le texte est plus haut que l'image, celle-ci s'étire avec lui */
.duo--texte { align-items: stretch; }
.duo--texte > .duo__media img { block-size: 100%; aspect-ratio: auto; min-block-size: 20rem; }
@media (max-width: 860px) {
  .duo__media img, .rangee__media img { aspect-ratio: 16 / 10; max-block-size: 24rem; }
  .duo--texte > .duo__media img { aspect-ratio: 16 / 10; min-block-size: 0; }
}

/* Une phrase que le site d'origine avait composée en titre : mise en
   valeur, mais pas en grand — six lignes de titre ne se lisent pas. */
.prose__fort {
  font-size: 1.06em; color: var(--titre);
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 1.1rem;
}

/* =====================================================================
   LIENS DANS LE TEXTE — un soulignement par défaut, épais et collé à la
   lettre, fait « lien de forum ». Ici : un filet fin, décalé sous la
   ligne de base, qui s'épaissit au survol.
   ===================================================================== */
.prose a, .chapo a, .carte__texte a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .06em);
  padding-block-end: .04em;
  transition: background-size var(--transition), color var(--transition);
}
.prose a:hover, .chapo a:hover, .carte__texte a:hover {
  color: var(--titre);
  background-size: 100% 2px;
}
.nuit .prose a, .nuit .chapo a { color: var(--p-or-clair); }
.nuit .prose a:hover, .nuit .chapo a:hover { color: #fff; }
/* un lien vers un document se signale par son icône, pas par sa couleur */
.prose a[href$=".pdf"]::after {
  content: ""; display: inline-block; vertical-align: -.1em;
  inline-size: .78em; block-size: .78em; margin-inline-start: .35em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

/* =====================================================================
   LES IMAGES D'UN ARTICLE — une PLANCHE, pas une pile.

   Le cadre crème autour de chaque photo (qui dépassait dès que le format
   ne correspondait pas) est supprimé : la photo se suffit. Une image
   seule déborde légèrement de la colonne de texte — c'est ce débord qui
   fait « éditorial » plutôt que « pièce jointe ».
   ===================================================================== */
.planche { display: grid; gap: .55rem; margin-block: clamp(1.8rem, 3.5vw, 2.8rem); }
.planche figure.prose__image {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--rayon-doux);
  background: var(--fond-doux);
  cursor: zoom-in;
}
.planche figure.prose__image img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform 1000ms cubic-bezier(.22,.61,.36,1);
}
.planche figure.prose__image:hover img { transform: scale(1.04); }

/* une seule : elle déborde de la colonne de texte, des deux côtés */
.planche--une { margin-inline: clamp(0rem, -4vw, 0rem); }
.planche--une figure.prose__image { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .planche--une { margin-inline: -3.5rem; }
}

/* deux : côte à côte, la seconde légèrement décalée vers le bas */
.planche--deux { grid-template-columns: 1fr 1fr; align-items: start; }
.planche--deux figure.prose__image { aspect-ratio: 4 / 5; }
/* la seconde photo descend légèrement : c'est ce décalage qui donne du
   rythme, au lieu de deux rectangles parfaitement alignés */
@media (min-width: 900px) {
  .planche--deux { align-items: start; }
  .planche--deux > figure:nth-child(2) { margin-block-start: 3rem; }
}

/* trois et plus : une mosaïque dont les rangées sont toujours pleines */
.planche--mosaique { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 10rem; }
.planche--mosaique > * { grid-column: span 2; }
.planche--mosaique > *:nth-child(3n+1) { grid-column: span 3; }
.planche--mosaique > *:nth-child(3n+2) { grid-column: span 3; }
.planche--mosaique > *:nth-child(3n)   { grid-column: span 6; grid-row: span 1; }

@media (max-width: 760px) {
  .planche--deux, .planche--mosaique { grid-template-columns: 1fr; }
  .planche--deux > *:nth-child(2) { margin-block-start: 0; }
  .planche--mosaique > * { grid-column: span 1 !important; }
  .planche figure.prose__image { aspect-ratio: 3 / 2 !important; }
}


/* La marge générale des images du corps (.prose img) décalait de 26 px
   les photos des planches, pourtant posées en absolu : on la neutralise
   là où l'image remplit déjà son cadre. */
.planche figure.prose__image img { margin: 0 !important; border-radius: 0; }
.planche figure.prose__image { isolation: isolate; }
/* le trait qui sépare, dans un sous-menu, ce qui touche au séjour de ce
   qui touche à la maison elle-même */
.nav__trait { border: 0; block-size: 1px; background: rgb(200 179 116 / .2); margin: .4rem .85rem; }

/* =====================================================================
   PAGE 404 — une page d'erreur n'est pas une impasse : on remet le
   visiteur sur la route, avec quatre chemins illustrés.
   ===================================================================== */
.hero--404 { min-block-size: clamp(30rem, 72svh, 44rem); block-size: auto; }
.chiffre-404 {
  font-family: var(--titrage);
  font-size: clamp(5rem, 3rem + 11vw, 12rem);
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1px rgb(200 179 116 / .55);
  letter-spacing: .02em;
  margin-block: .2rem -.1rem;
  font-variant-numeric: lining-nums;
}
.carte--piste {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.carte--piste .carte__media { display: block; aspect-ratio: 3 / 4; }
.carte--piste .carte__corps { display: flex; flex-direction: column; }
.carte--piste .carte__titre { font-family: var(--titrage); font-size: 1.32rem; }
.carte--piste .lien-file { margin-block-start: auto; }
@media (max-width: 700px) {
  .carte--piste .carte__media { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   VISIONNEUSE EN PAYSAGE — sur un téléphone tenu à l'horizontale, la
   hauteur disponible est faible : le pied fixe et les marges latérales
   mangeaient l'essentiel de la place et le cliché devenait minuscule.
   On rend au cliché tout ce qu'on peut.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  .visionneuse__haut { padding: .5rem 1rem; }
  .visionneuse__pied {
    block-size: auto; padding: .35rem 1rem .5rem;
    position: absolute; inset-block-end: 0; inset-inline: 0;
    background: linear-gradient(0deg, rgb(12 12 11 / .9), transparent);
    pointer-events: none;
  }
  .visionneuse__legende { font-size: .8rem; -webkit-line-clamp: 1; }
  .visionneuse__cadre img { padding-inline: 3.6rem; padding-block-end: 1.6rem; }
  .visionneuse__nav button { inline-size: 2.5rem; block-size: 2.5rem; }
  .visionneuse__fermer { inline-size: 2.4rem; block-size: 2.4rem; }
  .visionneuse[open] { grid-template-rows: auto minmax(0, 1fr); }
}
/* et en portrait étroit, le cliché prend aussi plus de place */
@media (max-width: 560px) {
  .visionneuse__cadre img { padding-inline: 3rem; }
  .visionneuse__pied { block-size: 3.6rem; }
}

/* Un logo dans le corps d'un texte : à sa taille, centré, sans cadre.
   Traité comme une photo d'ambiance, il prenait un écran entier. */
.prose__logo { margin-block: clamp(1.4rem, 3vw, 2.2rem); }
.prose__logo img {
  inline-size: auto; max-inline-size: min(100%, 16rem);
  max-block-size: 11rem; block-size: auto;
  margin: 0; border-radius: var(--rayon);
}

/* Deux titres de héros tombaient encore sur trois lignes en mobile
   (« MY Wellness by Maison Eole », « Explorez Malmedy & sa région ») :
   on abaisse légèrement leur taille sous 700 px. */
@media (max-width: 700px) {
  .hero:not(.hero--accueil) .hero__titre { font-size: clamp(1.95rem, 1.1rem + 4vw, 2.7rem); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero:not(.hero--accueil) .hero__titre { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.8rem); }
}

/* La colonne d'une fiche chambre (équipements + réservation) suit le
   défilement pendant qu'on lit le détail à droite : la colonne est
   courte, le texte long — c'est précisément le cas où le sticky sert.
   ⚠ le PARENT ne doit pas être `overflow: hidden`, sinon rien ne colle. */
@media (min-width: 900px) {
  .bloc-texte--colonnes {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 4rem);
    /* PAS `align-items: start` : la colonne serait réduite à la hauteur
       de son contenu, et un élément aussi haut que son conteneur n'a
       nulle part où coller. C'est la colonne qui s'étire, l'élément
       qui colle à l'intérieur. */
    align-items: stretch;
  }
  .bloc-texte__tete--collant {
    position: sticky;
    inset-block-start: calc(var(--haut-collant, 5rem) + 1.5rem);
    /* sa hauteur NATURELLE, pas celle de sa zone : étiré, il remplissait
       la colonne et n'avait plus de course pour coller */
    align-self: start;
    block-size: fit-content;
  }
}

/* Deux boutons d'action côte à côte : dès qu'ils passent l'un sous
   l'autre, ils doivent avoir la MÊME largeur — deux pilules de tailles
   différentes empilées se voient immédiatement. `flex: 1 1 12rem` les
   fait s'étirer à parts égales, en ligne comme empilés. */
.actions-paire { display: flex; flex-wrap: wrap; gap: .7rem; }
.actions-paire > .bouton { flex: 1 1 12rem; }

/* Le nom de l'univers sous chaque puce du carrousel : cinq barres
   muettes n'annoncent rien, et personne ne clique dessus. */
.hero__puce { display: grid; gap: .45rem; justify-items: stretch; text-align: start; }
.hero__puce span {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(255 255 255 / .5);
  transition: color var(--transition);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__puce:hover span { color: rgb(255 255 255 / .85); }
.hero__puce[aria-current="true"] span { color: var(--p-or-clair); }
.hero__puces { gap: .85rem; }
.hero__puce { max-inline-size: 8rem; }
/* sous 700 px, cinq noms ne tiennent pas : les barres restent, seules */
@media (max-width: 700px) {
  .hero__puce span { display: none; }
  .hero__puce { max-inline-size: none; }
  .hero__puces { gap: .5rem; }
}

/* =====================================================================
   GRILLE DE CARTES QUI S'ADAPTE AU NOMBRE
   Une grille figée à trois colonnes oblige à tronquer (on montrait 3
   « autres chambres » sur 4) et se casse dès que le client en ajoute
   une. Ici le pavage suit le nombre réel, et chaque rangée est pleine :
       2 → 2        5 → 3 + 2
       3 → 3        6 → 3 + 3
       4 → 4 (2×2 en tablette)   7 → 4 + 3
   ===================================================================== */
.grille--auto { grid-template-columns: repeat(12, 1fr); }
.grille--auto > * { grid-column: span 4; }                       /* défaut : 3/rangée */
.grille--auto[data-cartes="1"] > * { grid-column: span 12; }
.grille--auto[data-cartes="2"] > * { grid-column: span 6; }
.grille--auto[data-cartes="4"] > * { grid-column: span 3; }      /* 4 sur une rangée */
.grille--auto[data-cartes="5"] > *:nth-child(-n+3) { grid-column: span 4; }
.grille--auto[data-cartes="5"] > *:nth-child(n+4)  { grid-column: span 6; }
.grille--auto[data-cartes="7"] > *:nth-child(-n+4) { grid-column: span 3; }
.grille--auto[data-cartes="7"] > *:nth-child(n+5)  { grid-column: span 4; }
.grille--auto[data-cartes="8"] > *:nth-child(-n+4) { grid-column: span 3; }
.grille--auto[data-cartes="8"] > *:nth-child(n+5)  { grid-column: span 3; }

/* En tablette, DEUX par rangée, sans exception : une règle par nombre
   se contredisait avec celles du desktop et laissait des trous à 5 et 7.
   Seul le cas impair demande un ajustement — la dernière carte prend la
   rangée entière. */
@media (max-width: 1080px) {
  .grille--auto > * { grid-column: span 6 !important; }
  .grille--auto[data-cartes="1"] > *,
  .grille--auto[data-cartes="3"] > *:last-child,
  .grille--auto[data-cartes="5"] > *:last-child,
  .grille--auto[data-cartes="7"] > *:last-child,
  .grille--auto[data-cartes="9"] > *:last-child { grid-column: span 12 !important; }
}
@media (max-width: 680px) {
  .grille--auto > * { grid-column: span 12 !important; }
}

/* La barre de la puce active : un peu plus épaisse que les autres, pour
   qu'on la repère sans lire le libellé — mais 3 px, pas davantage : la
   première version, trop marquée, écrasait les quatre autres. */
.hero__puce i { block-size: 2px; transition: block-size var(--transition), background-color var(--transition); }
.hero__puce[aria-current="true"] i { block-size: 3px; }
.hero__puce:hover i { background: rgb(255 255 255 / .5); }
.hero__puce[aria-current="true"]:hover i { background: var(--p-or); }

/* =====================================================================
   CALENDRIER SUR MOBILE — une feuille plein écran, pas un volet flottant.

   Mesuré avant correction : sur un écran de 390 × 844, le volet faisait
   353 × 713 px et s'étendait jusqu'à 1508 px — il sortait par le bas ET
   par la droite ; en paysage il sortait par le haut. Un volet ancré à un
   champ ne peut pas tenir sur un écran de téléphone : il devient donc une
   feuille qui occupe l'écran, avec sa propre barre de titre et un bouton
   de validation — c'est ce que font les moteurs de réservation.
   ===================================================================== */
@media (max-width: 760px), (max-height: 560px) {
  .calendrier__volet[data-plein-ecran]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgb(10 10 9 / .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  /* la feuille est déménagée dans <body> par le script : elle porte
     alors data-plein-ecran et n'est plus contrainte par la barre de
     recherche (dont le backdrop-filter la limitait à 314 px) */
  .calendrier__volet[data-plein-ecran] {
    position: fixed; inset: 0; z-index: 95;
    inline-size: 100%; max-inline-size: none;
    block-size: 100%; max-block-size: none;
    margin: 0; border: 0; border-radius: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: #1b1b18;
  }
  [data-plein-ecran] .calendrier__tete {
    padding: 1rem var(--marge-page);
    border-block-end: 1px solid rgb(255 255 255 / .12);
    margin-block-end: 0;
  }
  /* un seul mois à la fois : deux côte à côte donnent des cases de 40 px */
  [data-plein-ecran] .calendrier__grilles {
    grid-template-columns: 1fr; gap: 2rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 1.2rem var(--marge-page) 1rem;
  }
  [data-plein-ecran] .calendrier__jours button { font-size: 1rem; border-radius: 6px; }
  [data-plein-ecran] .calendrier__jours abbr { font-size: .68rem; padding-block: .5rem; }
  [data-plein-ecran] .calendrier__nom { font-size: .78rem; margin-block-end: .8rem; }
  [data-plein-ecran] .calendrier__pied {
    margin: 0; padding: .9rem var(--marge-page) 1.1rem;
    border-block-start: 1px solid rgb(255 255 255 / .12);
    background: #1b1b18;
  }
  [data-plein-ecran] .calendrier__resume { font-size: .95rem; }
  /* le bouton de fermeture, posé dans la barre de titre par le script */
  .calendrier__fermer {
    inline-size: 2.4rem; block-size: 2.4rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: #fff;
  }
  .calendrier__valider {
    padding: .8rem 1.4rem; border-radius: var(--rayon);
    background: var(--p-or); color: #16160f;
    font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    margin-inline-start: auto;
  }
  .calendrier__valider:disabled { opacity: .45; }
}
@media (min-width: 761px) and (min-height: 561px) {
  .calendrier__fermer, .calendrier__valider { display: none; }
}
/* en paysage de téléphone, la feuille montre UN mois : deux ne tiennent
   pas dans 390 px de haut */
@media (max-height: 560px) {
  [data-plein-ecran] .calendrier__grilles { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  [data-plein-ecran] .calendrier__jours button { font-size: .82rem; }
  [data-plein-ecran] .calendrier__tete { padding-block: .55rem; }
  [data-plein-ecran] .calendrier__pied { padding-block: .5rem .6rem; }
}

/* =====================================================================
   HÉROS D'ACCUEIL SUR ÉCRAN BAS — paysage de téléphone, petit portable.
   À 390 px de haut, le titre, le panneau, les puces et la barre de
   recherche ne peuvent pas coexister : ils se chevauchaient. On garde ce
   qui fait agir (le titre et la recherche) et on retire le reste.
   ===================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  /* Vaut pour TOUS les héros, pas seulement l'accueil : contraints à la
     hauteur d'écran, leur contenu — ancré en bas — débordait par le HAUT
     et le titre passait sous l'en-tête (vu sur la 404 à 844×390). */
  .hero, .hero:not(.hero--accueil) { block-size: auto; min-block-size: 0; }
  /* On ne force PAS la hauteur d'écran en paysage : à 390 px de haut,
     le contenu compacté fait encore 434 px. Mieux vaut le laisser couler
     (on déroule d'un pouce) que de l'écraser ou de le faire déborder. */
  .hero--accueil { block-size: auto; min-block-size: 0; }
  .hero__grille {
    grid-template-columns: 1fr;
    padding-block: clamp(2.2rem, 7.5vh, 3rem) .35rem;
    gap: .25rem;
  }
  .hero--accueil .hero__titre { font-size: clamp(1.5rem, .85rem + 2.6vw, 2rem); line-height: .94; }
  .hero__surtitre { margin-block-end: .1rem; }
  .calendrier__champ, .select--encadre { padding: .32rem .7rem .36rem; }
  .recherche { padding: .4rem .45rem; }
  .hero--accueil .hero__texte { display: none; }
  .hero__panneau { display: none; }              /* le panneau demande 17 rem */
  .hero__puce span { display: none; }            /* les libellés passent sous le titre */
  .hero__socle { padding-block-end: .5rem; }
  .hero__socle-interieur { gap: .5rem; }
  .hero__surtitre { font-size: .7rem; }
}

/* --- portrait de téléphone : tout doit tenir dans l'écran ------------- */
@media (max-width: 700px) {
  .hero--accueil {
    block-size: calc(100svh - var(--haut-total, 5rem));
    min-block-size: calc(100svh - var(--haut-total, 5rem));
  }
  .hero__grille { padding-block: clamp(3.5rem, 9vh, 6rem) .8rem; gap: .5rem; }
  .hero--accueil .hero__titre { font-size: clamp(2.2rem, 1.1rem + 6vw, 3.1rem); }
  .hero--accueil .hero__texte { font-size: .98rem; max-inline-size: 30ch; }
  .hero__panneau { display: none; }   /* la légende est déjà dans le titre du haut */
  .hero__socle { padding-block-end: .7rem; }
  .calendrier__champs { gap: .4rem; }
  .recherche__grille { gap: .45rem; }
}

/* =====================================================================
   TROIS DÉFAUTS RELEVÉS PAR LE CLIENT, ET LEURS FAMILLES.
   ===================================================================== */

/* --- 1. La croix du menu. -------------------------------------------
   .menu-mobile est en z-index 90, l'en-tête en 60 : le panneau passait
   PAR-DESSUS le bouton. La croix existait (le burger se transforme),
   elle était simplement recouverte. On remonte l'en-tête au-dessus du
   panneau et on efface son fond, qui ferait une barre dans le noir. */
body[data-menu="ouvert"] .entete {
  z-index: 95;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-block-end-color: transparent;
  box-shadow: none;
}
body[data-menu="ouvert"] .entete__actions .bouton { opacity: 0; pointer-events: none; }
/* Le panneau est en inset:0, donc il commence SOUS l'en-tête : sans
   réserve, le logo se posait sur la première entrée du menu. */
.menu-mobile { padding-block-start: var(--haut-total, 5rem); }
.menu-mobile__liens { padding-block-start: .4rem; }

/* --- 2. Les libellés rognés. ----------------------------------------
   `.bouton` cumule `white-space: nowrap` et `overflow: hidden` : dans une
   grille étroite, le texte est coupé SANS AUCUN SIGNE — c'est ce qu'a vu
   le client sur « Vérifier les disponibilités » en paysage. Le nowrap
   sert au fond animé ; dans une grille, il ne sert qu'à rogner. Partout
   où un bouton est une cellule de grille, il a le droit de respirer. */
.recherche__grille > .bouton,
.grille > .bouton,
.hero__actions .bouton {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.15;
  padding-inline: 1rem;
}
@media (max-width: 900px) {
  .recherche__grille > .bouton { font-size: .7rem; letter-spacing: .1em; }
}

/* --- 3. Le héros sur écran haut et étroit. --------------------------
   Une tablette en portrait fait 1 180 px de haut : à 100svh, la photo
   devient un mur et le titre se retrouve tout en bas, seul. On plafonne
   la hauteur — l'écran reste rempli, mais la suite de la page s'annonce. */
@media (orientation: portrait) and (min-width: 700px) {
  .hero, .hero--accueil {
    block-size: min(calc(100svh - var(--haut-total, 8rem)), 54rem);
    min-block-size: min(calc(100svh - var(--haut-total, 8rem)), 54rem);
  }
}

/* --- 4. Ce que la barre d'appel recouvrait. --------------------------
   `.barre-appel` est fixée en bas, en z-index 70 : sur téléphone elle
   passait par-dessus la fin du héros, donc par-dessus le bouton
   « Vérifier les disponibilités », qu'on ne pouvait plus toucher. Le
   héros réserve désormais sa hauteur, mesurée par le script. */
.hero__socle { padding-block-end: calc(.7rem + var(--haut-appel, 0px)); }
/* On AJOUTE la barre au souffle du bas, on ne le remplace pas : écrite
   comme une valeur sèche, cette règle mettait le padding à zéro sur
   desktop (où la barre n'existe pas) et collait le bouton au bord. */
.hero:not(.hero--accueil) .hero__contenu {
  padding-block-end: calc(clamp(3.2rem, 8vh, 5.6rem) + var(--haut-appel, 0px));
}
@media (max-width: 700px) {
  .hero__socle { padding-block-end: calc(.7rem + var(--haut-appel, 0px)); }
  .hero__grille { padding-block-end: .4rem; }
}

/* --- 5. Le panneau contre les puces en tablette portrait. ------------
   Le plafond de hauteur posé plus haut serre la grille : à 768 px de
   large, le panneau latéral et la rangée de puces se rejoignent. En
   portrait, la grille passe sur une colonne et le panneau s'efface. */
@media (orientation: portrait) and (max-width: 1000px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__panneau { display: none; }
}

/* --- 6. Les libellés rognés, où qu'ils soient. -----------------------
   Le contrôle multi-formats a trouvé « Découvrir la Carte du… » et
   « Ouvrir la carte Google… » coupés à 320 px. Le `nowrap` du bouton
   n'a de sens que tant qu'il y a la place ; en dessous, il ment. */
@media (max-width: 420px) {
  .bouton { white-space: normal; line-height: 1.2; padding-inline: 1.1rem; letter-spacing: .1em; }
}

/* --- 7. Pas de barre d'appel en paysage de téléphone. ----------------
   À 390 px de haut, elle mange le dixième de l'écran et recouvrait la
   recherche. Les mêmes actions restent à portée dans l'en-tête et le
   menu ; la barre du bas n'a de sens qu'en portrait, le pouce en bas. */
@media (max-height: 560px) and (orientation: landscape) {
  .barre-appel { display: none !important; }
}

/* --- 7. Pas de bloc de réservation dans le héros, en paysage. --------
   À 390 px de haut, il occupait le tiers de l'écran, écrasait le titre
   et passait sous la barre d'appel — trois défauts pour un seul bloc.
   Le bouton RÉSERVER de l'en-tête et la barre du bas suffisent : on ne
   remplit pas un formulaire de séjour en tenant son téléphone en long. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero__socle .recherche { display: none; }
  .hero__socle-interieur { justify-content: center; }
}

/* --- 8. Les écrans très étroits (320 px). ----------------------------
   Deux restes, relevés par le contrôle multi-formats : le texte du héros
   touchait le bloc de recherche, et les boutons de la 404 passaient sous
   la barre d'appel — celle-ci n'étant pas réservée sur cette page. */
@media (max-width: 380px) {
  .hero--accueil .hero__texte { display: none; }   /* le titre porte déjà le propos */
  .hero__grille { gap: .35rem; }
}
.hero--404 { padding-block-end: var(--haut-appel, 0px); }

/* --- 9. Le souffle sous le héros, sur toutes les pages. --------------
   Le contenu est ancré en bas du héros : sans réserve, le dernier
   élément — souvent un bouton — vient toucher le bord de l'image, et le
   client l'a vu coupé. La réserve vaut pour l'accueil comme pour les
   autres, et grandit avec l'écran. */
.hero__contenu { padding-block-end: clamp(3.2rem, 8vh, 5.6rem); }
.hero--accueil .hero__grille { padding-block-end: clamp(1rem, 2.5vh, 2rem); }

/* --- 10. La garde sous l'en-tête, en paysage. ------------------------
   Le padding du haut d'un héros vaut clamp(5.5rem, 17vh, 10rem) : à
   390 px de haut, 17vh ne fait que 66 px, moins que l'en-tête, et le
   titre passait dessous. La garde se cale donc sur la hauteur MESURÉE
   de l'en-tête, jamais sur une fraction de l'écran. */
@media (max-height: 620px) {
  .hero__contenu { padding-block-start: calc(var(--haut-total, 5rem) + 1.2rem); }
}

/* --- 11. La barre du bas devient l'action de la page. ----------------
   Sur une fiche de chambre ou d'offre, un « Réserver » discret ne suffit
   pas : le visiteur qui descend la fiche doit garder le geste sous le
   pouce. Plutôt qu'un SECOND bandeau collant — qui aurait doublonné avec
   celui-ci — c'est la même barre qui porte le bouton, en plein. */
.barre-appel__interieur--action {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
}
.barre-appel--action a:not(.bouton) {
  min-block-size: 2.6rem; inline-size: 2.9rem; padding: 0;
  border: 1px solid rgb(255 255 255 / .16); border-radius: var(--rayon);
}
.barre-appel--action a:not(.bouton) span {
  position: absolute; inline-size: 1px; block-size: 1px;   /* lu, jamais vu */
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.barre-appel--action a + a { border-inline-start: 1px solid rgb(255 255 255 / .16); }
/* `.barre-appel a:last-child` (0,2,1) bat `.barre-appel--action .bouton`
   (0,2,0) : sans ce sélecteur plus fort, le libellé restait doré SUR
   fond doré — illisible, et vu à l'œil avant tout contrôle. */
.barre-appel--action .barre-appel__interieur--action > .bouton {
  inline-size: 100%; min-block-size: 2.6rem;
  padding-block: .55rem; font-size: .72rem; letter-spacing: .1em;
  white-space: normal; line-height: 1.15;
  /* PLEIN, pas en contour : c'est l'action principale de la page, elle
     doit trancher sur le fond nuit de la barre. L'or vif porte ici du
     texte sombre — l'inverse du texte doré, qui échouerait à l'AA. */
  background: var(--accent-vif); border-color: var(--accent-vif);
  color: var(--p-nuit); font-weight: 600;
}
.barre-appel--action .barre-appel__interieur--action > .bouton::before { background: #fff; }
.barre-appel--action .barre-appel__interieur--action > .bouton:hover,
.barre-appel--action .barre-appel__interieur--action > .bouton:focus-visible { color: var(--p-nuit); }

/* --- 12. Savoir où l'on est, dans les deux menus. --------------------
   Le menu mobile ne marquait RIEN : ouvert depuis une fiche de chambre,
   il ne disait ni la rubrique ni laquelle des cinq on regardait. Et même
   en desktop, le sous-menu déroulé ne marquait pas la page ouverte. */
.menu-mobile__sous {
  font-size: 1.05rem;
  padding-inline-start: 1rem;
  color: rgb(255 255 255 / .72);
}
.menu-mobile__liens a[aria-current="page"] { color: var(--p-or-clair); }
.menu-mobile__liens a[aria-current="page"]::before {
  content: ""; display: inline-block; vertical-align: middle;
  inline-size: .85rem; block-size: 1px; margin-inline-end: .55rem;
  background: var(--p-or-clair);
}
/* La rubrique d'où l'on vient : toutes les rubriques sont déjà blanches,
   il fallait autre chose que la couleur — un filet d'or à sa gauche. */
.menu-mobile__liens a[data-rubrique="active"] {
  color: #fff;
  position: relative;
  padding-inline-start: .9rem;
}
.menu-mobile__liens a[data-rubrique="active"]::before {
  content: ""; position: absolute; inset-inline-start: 0;
  inset-block: .55rem; inline-size: 2px;
  background: var(--p-or-clair); opacity: .6;
}
.nav__sous a[aria-current="page"] { color: var(--p-or-clair); background: rgb(200 179 116 / .1); }
.nav__lien[data-rubrique="active"] { color: var(--p-or-clair); }
.nav__lien[data-rubrique="active"]::after { inline-size: 100%; opacity: .5; }