@charset "utf-8";
/* Les jetons vivent dans leur propre fichier : le back-office les importe
   lui aussi, pour ressembler au site plutot qu'a un panneau d'admin.
   Un @import doit precede toute autre regle, @charset excepte. */
@import url('tokens.css');
/* ==========================================================================
   Le Deux — feuille de style unique
   Principe : la planche d'herbier. Toute image est montee sur une marge
   visible ; elle conserve son propre rapport, c'est le montage qui est fixe.
   Aucune ombre portee nulle part : la profondeur vient du filet et de la
   difference de valeur.
   ========================================================================== */

/* ---------- 1. Polices auto-hebergees ---------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Geist ExtraBold, instancie depuis la fonte variable puis sous-ensemble sur
   le meme jeu de 225 glyphes que les deux precedents : memes metriques
   (upem 1000, asc 1005, desc 295), donc le repli ci-dessous reste valable.
   Reserve aux titres de section. */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Repli metrique. Les valeurs viennent des tables reelles des fichiers :
   Geist upem 1000, asc 1005, desc 295, largeur moyenne 546 ;
   Arial upem 2048, largeur moyenne 1139. Le decalage de substitution
   est donc quasi nul. */
@font-face {
  font-family: 'Geist repli';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.2%; ascent-override: 102.4%; descent-override: 30.0%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader repli';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  font-style: italic;
  size-adjust: 103.2%; ascent-override: 71.2%; descent-override: 25.7%; line-gap-override: 0%;
}

/* ---------- 2. Jetons -------------------------------------------------- */

/* Deplaces dans assets/css/tokens.css, importe en tete de ce fichier.
   Ils sont partages avec le back-office : une seule source. */

/* ---------- 3. Remise a plat ------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords; /* autorise l'animation de hauteur des <details> */
}

body {
  background: var(--chaux);
  color: var(--encre);
  font-family: var(--grotesque);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Rayon de bordure nul partout, y compris champs et boutons. */
input, textarea, button, select { border-radius: 0; }

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

::selection { background: var(--herbier); color: var(--chaux-clair); }

/* ---------- 4. Utilitaires typographiques ------------------------------ */

.titre2 {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.corps { max-width: 64ch; }
.corps + .corps { margin-top: 1.1em; }

.lien {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--survol) var(--ease);
}
.lien:hover { text-decoration-color: var(--herbier); }

/* Lien vers la carte : le pin reste hors du soulignement. */
.lien-carte { display: inline-flex; align-items: baseline; gap: 0.4em; text-decoration: none; }
.lien-carte__pin { width: 1em; height: 1em; flex: none; align-self: center; color: var(--encre); }
.lien-carte:hover .lien { text-decoration-color: var(--herbier); }

/* Newsreader a une hauteur d'x nettement plus basse que Geist
   (0,426 contre 0,530) : on compense pour que les deux s'alignent
   optiquement quand ils se cotoient. */
.botanique, .planche__legende, .hero__devise, .chambre__latin {
  font-family: var(--botanique);
  font-style: italic;
  font-weight: 400;
}

.etiquette-rang {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.aconfirmer {
  background: none;
  color: var(--erreur);
  font-family: var(--grotesque);
  font-size: 0.9375em;
  border-bottom: 1px dotted var(--erreur);
}

.evitement {
  position: absolute; left: var(--gouttiere); top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--encre); color: var(--chaux);
  padding: 0.75em 1.25em;
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  text-decoration: none;
  transition: transform var(--etat) var(--ease);
}
.evitement:focus { transform: translateY(0); }

/* Trois etoiles dessinees : le glyphe n'existe pas dans le sous-ensemble. */
.etoiles { display: inline-flex; gap: 0.14em; vertical-align: baseline; }
.etoiles svg { width: 0.72em; height: 0.72em; fill: currentColor; transform: translateY(0.02em); }
.etoiles--corps svg { width: 0.8em; height: 0.8em; }

/* ---------- 5. Trame -------------------------------------------------- */

.section {
  padding-block: var(--section-y);
  padding-inline: var(--gouttiere);
  /* l'en-tete pose fait 60 px : une ancre ne doit pas glisser dessous */
  scroll-margin-top: 72px;
}
.section > * { max-width: var(--large); margin-inline: auto; }

/* ---------- 6. En-tete ------------------------------------------------- */

.entete {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--etat) var(--ease), border-color var(--etat) var(--ease);
}
.entete--pose {
  background: var(--chaux);
  border-bottom-color: var(--trait);
}

.entete__barre {
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  height: var(--h-entete);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  transition: height var(--etat) var(--ease);
}
.entete--pose .entete__barre { height: 60px; }

.entete__marque {
  display: inline-flex; align-items: center;
  gap: 0.75em;
  /* un cran au-dessus du label courant : l'ombelle a besoin de hauteur */
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-decoration: none;
  white-space: nowrap;
}
/* Le dessin porte un long pedoncule : centrer la boite mettrait le coeur de
   l'ombelle au-dessus du mot. On le redescend sur la ligne des capitales. */
.entete__ombelle {
  flex: none;
  height: 3em; width: auto;
  color: var(--encre);
  translate: 0 0.1em;
}

.menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.menu__liste {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem);
  list-style: none; padding: 0;
}
.menu__liste a {
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  text-decoration: none;
  padding-block: 0.5em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--survol) var(--ease);
}
.menu__liste a:hover { border-bottom-color: var(--herbier); }

.menu__action {
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  text-decoration: underline;
  text-decoration-color: var(--encre);
  text-underline-offset: 0.5em;
  text-decoration-thickness: 1px;
  padding-block: 0.5em;
  transition: text-decoration-color var(--survol) var(--ease);
}
.menu__action:hover { text-decoration-color: var(--herbier); }

.entete__bascule { display: none; }

/* ---------- 7. Hero : la premiere planche ------------------------------ */

.hero {
  padding-inline: var(--gouttiere);
  padding-top: calc(var(--h-entete) + clamp(16px, 3vh, 40px));
  padding-bottom: clamp(40px, 7vh, 96px);
}

.planche {
  background: var(--chaux-clair);
  border: 1px solid var(--trait);
  padding: var(--marge-planche);
}
.planche__cadre { overflow: hidden; }
.planche__cadre img {
  width: 100%;
  transition: transform var(--apparition) var(--ease);
}
.planche:hover .planche__cadre img { transform: scale(1.025); }

/* Une planche cliquable : le lien enveloppe le cadre, jamais la legende.
   Il ne dessine rien de plus — le filet de la planche lui sert de bord —
   et la loupe dit ce qu'un clic va faire. */
.planche__lien {
  display: block;
  text-decoration: none;
  cursor: zoom-in;
}
.planche__lien:hover ~ .planche__legende { color: var(--herbier); }

/* La petite planche : meme montage, resserre a la taille d'une vignette
   de galerie. Elle recadre en 4/3 pour ne pas dependre du format exact
   de la photo qu'on y met. */
.planche--vignette { padding: 5px; }
.planche--vignette .planche__cadre img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.planche__legende {
  font-family: var(--botanique);
  font-style: italic;
  font-size: var(--t-legende);
  color: var(--encre-douce);
  margin-top: calc(var(--marge-planche) * 0.72);
  line-height: 1.45;
}

/* La planche est calee sur le meme bord gauche que tout le reste de la
   page : le vide se creuse a droite, comme pour le chapo. */
.planche--hero {
  max-width: var(--large);
  width: fit-content;
  /* cale le bord gauche sur celui du conteneur centre de 1360 px */
  margin-left: max(0px, (100% - var(--large)) / 2);
  margin-right: auto;
}
.planche--hero .planche__cadre img {
  max-height: 54vh;
  width: auto;
  max-width: 100%;
}
/* Fenetres basses : on rend au titre la place que l'image prenait. */
@media (max-height: 780px) and (min-width: 900px) {
  :root {
    --t-display: clamp(2.6rem, 6.4vw, 5rem);
    /* image bornee a 48vh ici : 82vh de large */
    --planche-hero: calc(82vh + 2 * var(--marge-planche) + 2px);
  }
  .planche--hero .planche__cadre img { max-height: 48vh; }
}

/* Le pied du hero reprend exactement le calage de la planche : meme bord
   gauche, meme largeur utile que le conteneur centre de 1360 px. */
.hero__pied {
  max-width: var(--large);
  margin-top: calc(var(--marge-planche) * 1.1);
  margin-left: max(0px, (100% - var(--large)) / 2);
  margin-right: auto;
}
.hero__titre {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.hero__rang {
  margin-top: 0.9em;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;
}
.hero__devise {
  margin-top: 0.5em;
  font-family: var(--botanique);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--encre-douce);
}

/* ---------- 8. Chapo, en vis-a-vis du titre ---------------------------- */

.hero__chapo {
  margin-top: clamp(28px, 4vh, 48px);
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  /* Deux colonnes en vis-a-vis : tout le texte a gauche, la planche a
     droite. Le hero devient lui-meme la grille ; le calage sur le
     conteneur centre de 1360 px passe donc de chaque bloc au hero, et
     les marges de centrage des enfants sont rendues. */
  .hero {
    display: grid;
    /* La colonne de droite epouse la planche au lieu de garder 56 % fixes :
       sur une fenetre basse, l'image bornee en hauteur laissait un large vide
       a sa gauche, qui s'ajoutait au column-gap. Le plafond de 56 % reste, il
       n'entre en jeu que sur les fenetres tres hautes, ou l'image finirait
       sinon par manger la colonne de texte et casser le titre en deux lignes.
       L'ecart visible se resume alors au column-gap, qu'on fixe a la moitie
       exacte de l'ancien ecart : ancien gap + vide laisse dans la colonne. */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(56%, var(--planche-hero)));
    column-gap: calc(
      clamp(32px, 5vw, 80px) / 2 + max(0px, 56% - var(--planche-hero)) / 2
    );
    align-items: center;
    max-width: calc(var(--large) + 2 * var(--gouttiere));
    margin-inline: auto;
  }
  .planche--hero {
    grid-column: 2; grid-row: 1;
    /* bord droit cale sur celui du conteneur centre, comme le reste */
    justify-self: end;
    margin-left: 0; margin-right: 0;
  }
  /* Dans la colonne de gauche, les blocs s'empilent dans l'ordre du
     document : le nom de la maison, puis ce qu'elle est. */
  .hero__pied {
    grid-column: 1; grid-row: 1;
    margin-top: 0; margin-left: 0; margin-right: 0;
    max-width: none;
  }
}

/* Sequence d'ouverture : un seul mouvement, rien d'autre sur la page. */
.planche--hero .planche__cadre img { animation: hero-image 900ms var(--ease) both; }
.hero__etiquette { animation: hero-texte 760ms var(--ease) 120ms both; }
.hero__chapo     { animation: hero-texte 760ms var(--ease) 220ms both; }
@keyframes hero-image { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-texte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 9. La maison ----------------------------------------------- */

.maison__grille { display: grid; gap: clamp(32px, 5vw, 64px); }
.maison__texte .corps { margin-top: 1.4em; }

/* La piece de vie, puis la cuisine et la table en petit dessous, calees a
   gauche comme les vignettes des chambres. L'ecart entre les rangs est celui
   d'une galerie, pas celui d'une section : l'ensemble forme un seul bloc. */
.maison__planches {
  display: grid;
  gap: clamp(8px, 1vw, 12px);
}
/* Meme rangee de vignettes que dans les chambres, au meme gabarit : deux
   tiennent cote a cote sous la grande planche, et passent a la ligne si la
   colonne se resserre. */
.maison__vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  list-style: none;
  padding: 0;
}
.maison__vignettes img { width: clamp(96px, 22vw, 132px); }

@media (min-width: 900px) {
  /* Les deux blocs gardent exactement les largeurs que leur donnait la trame
     de douze colonnes : la planche bornee a 330 px, le texte large de cinq
     colonnes. Seul l'ecart entre eux est divise par deux. On le calcule au
     lieu de sauter une colonne, car le vide venait autant de la colonne
     laissee libre que de la place perdue par la planche dans ses propres
     colonnes. */
  .maison__grille {
    --trame-gouttiere: clamp(16px, 2vw, 40px);
    --trame-colonne: calc((100% - 11 * var(--trame-gouttiere)) / 12);
    /* La planche est bornee en largeur pour que la colonne d'images tienne a
       peu pres la hauteur du texte d'en face. C'est une largeur, et non une
       hauteur max, pour que le format de l'image reserve sa place avant meme
       qu'elle soit chargee. La piece de vie est un paysage 4/3 : la ou le
       porte-cles, portrait tres etroit, demandait 330 px au plus, il en faut
       ici environ 440 pour que l'image et la vignette de la cuisine arrivent
       a hauteur du dernier paragraphe. */
    --planche-largeur: clamp(300px, 34vw, 440px);
    grid-template-columns:
      var(--planche-largeur)
      minmax(0, calc(var(--trame-colonne) * 5 + var(--trame-gouttiere) * 4));
    column-gap: calc(
      3 * (var(--trame-colonne) + var(--trame-gouttiere)) - var(--planche-largeur) / 2
    );
    /* L'ensemble planche + texte est plus etroit que le conteneur depuis que
       l'ecart a ete resserre : on centre le duo au lieu de laisser tout le
       vide a droite. */
    justify-content: center;
    align-items: start;
  }
  .planche--maison { max-width: var(--planche-largeur); }
  .maison__texte { padding-top: clamp(8px, 3vw, 40px); }
}

/* ---------- 10. Index des chambres — l'element signature ---------------- */

.chambres__entete { margin-bottom: clamp(40px, 6vh, 80px); }
.chambres__chapeau {
  margin-top: 1.1em;
  font-size: var(--t-lead);
  color: var(--encre-douce);
  max-width: 46ch;
}

.chambres__corps { display: grid; gap: clamp(32px, 4vw, 56px); }

.index { border-top: 1px solid var(--trait); }
.chambre { border-bottom: 1px solid var(--trait); }

.chambre__ligne {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.25rem;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-block: clamp(18px, 2.4vw, 30px);
  cursor: pointer;
  list-style: none;
  transition: color var(--etat) var(--ease);
}
.chambre__ligne::-webkit-details-marker { display: none; }

.chambre__num {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.chambre__nom {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.chambre__latin {
  font-size: 1.12em;
  color: var(--herbier-fonce);
  grid-column: 2;
}
.chambre__resume {
  grid-column: 2;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  margin-top: 0.35em;
  text-wrap: balance;
}
.chambre__fleche {
  grid-column: 3; grid-row: 1;
  width: 1.25rem; height: 1.25rem;
  color: var(--encre-douce);
  align-self: center;
  transition: transform var(--etat) var(--ease), color var(--etat) var(--ease);
}

.chambre__detail { padding-bottom: clamp(20px, 3vw, 34px); }
.chambre__detail .planche { margin-bottom: 1.4em; }

/* Galerie : les autres vues de la chambre, en petit. Chaque vignette est
   une planche miniature — meme fond, meme filet — et un vrai lien vers la
   grande image, pour que le clic ait un sens sans le script. */
.galerie__intitule {
  margin-top: 1.6em;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
}
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  list-style: none;
  padding: 0;
  margin-top: 0.9em;
}
.galerie__vue {
  display: block;
  background: var(--chaux-clair);
  border: 1px solid var(--trait);
  padding: 5px;
  transition: border-color var(--survol) var(--ease);
}
.galerie__vue img {
  width: clamp(76px, 9vw, 108px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity var(--survol) var(--ease);
}
.galerie__vue:hover { border-color: var(--herbier); }
.galerie__vue:hover img { opacity: 0.88; }

/* ---------- 10 bis. Visionneuse, construite par le script -------------- */

.visionneuse {
  width: min(94vw, 1180px);
  max-width: none;
  max-height: 92vh;
  /* La remise a plat pose margin:0 sur tout : il faut redonner le
     margin:auto que le navigateur applique aux dialogues modaux,
     sinon la planche se colle en haut a gauche. */
  margin: auto;
  padding: var(--marge-planche);
  background: var(--chaux-clair);
  border: 1px solid var(--trait);
  color: var(--encre);
  overflow: hidden;
}
.visionneuse::backdrop { background: rgb(27 30 25 / 0.82); }

.visionneuse__scene {
  display: grid;
  place-items: center;
  min-height: 0;
}
.visionneuse__vue {
  max-width: 100%;
  max-height: calc(92vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.visionneuse__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: calc(var(--marge-planche) * 0.72);
}
.visionneuse__legende {
  font-family: var(--botanique);
  font-style: italic;
  font-size: var(--t-legende);
  color: var(--encre-douce);
}
.visionneuse__compteur {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Les trois commandes partagent la meme facture : un carre au filet,
   pose sur le fond de la planche. */
.visionneuse__commande {
  position: absolute;
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  background: var(--chaux-clair);
  border: 1px solid var(--trait);
  cursor: pointer;
  transition: border-color var(--survol) var(--ease), background var(--survol) var(--ease);
}
.visionneuse__commande:hover { border-color: var(--herbier); background: var(--chaux); }
.visionneuse__commande[hidden] { display: none; }

/* Chevrons et croix traces au filet, comme celui du bloc « Le sejour » :
   aucun glyphe a charger, aucune icone a servir. */
.visionneuse__chevron {
  width: 9px; height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.visionneuse__chevron--gauche { transform: rotate(135deg) translate(-2px, -2px); }
.visionneuse__chevron--droite { transform: rotate(-45deg) translate(-2px, -2px); }
.visionneuse__croix { position: relative; width: 15px; height: 15px; }
.visionneuse__croix::before,
.visionneuse__croix::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
}
.visionneuse__croix::before { transform: rotate(45deg); }
.visionneuse__croix::after  { transform: rotate(-45deg); }
/* Les commandes restent dans la planche : rien ne deborde, et le meme
   placement tient de 320 px a 2000 px. */
.visionneuse__fermer     { top: 8px;  right: 8px; }
.visionneuse__precedente { top: 50%; left: 8px;  transform: translateY(-50%); }
.visionneuse__suivante   { top: 50%; right: 8px; transform: translateY(-50%); }

@media (min-width: 760px) {
  .chambre__ligne {
    /* La colonne du nom part de min-content, jamais de zero : un nom d'un
       seul tenant — Campanule, Hellebore — ne peut pas se couper, et une
       borne basse a 0 le laissait deborder sur le nom latin d'a cote. */
    grid-template-columns: 2.5rem minmax(min-content, 1.15fr) minmax(0, 1.05fr) minmax(0, 1.3fr) 1.25rem;
    align-items: baseline;
    gap: 1.6rem;
  }
  /* Le nom garde le meme maximum que --t-h2 mais monte plus doucement :
     a 1280 px l'index doit loger quatre colonnes a cote du panneau. */
  .chambre__nom { font-size: clamp(1.6rem, 2.5vw, 2.9rem); }
  .chambre__latin, .chambre__resume { grid-column: auto; margin-top: 0; }
  /* Un decalage franc du nom latin : la gouttiere seule ne suffisait pas
     a le detacher du nom francais, qui est bien plus gros. */
  .chambre__latin { padding-inline-start: 0.5rem; }
  .chambre__fleche { grid-column: 5; }
  .chambre__detail { padding-left: 2.75rem; }
}

/* Panneau d'apercu, construit par le script. */
.apercu { display: none; }

@media (min-width: 1024px) {
  .chambres__corps {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .panneau .apercu {
    display: block;
    position: sticky;
    top: calc(60px + clamp(24px, 5vh, 64px));
    background: var(--chaux-clair);
    border: 1px solid var(--trait);
    padding: var(--marge-planche);
    /* Tant qu'aucune chambre n'a ete survolee, il n'y a pas de photo a
       encadrer : le cadre s'efface plutot que de poser un bloc blanc vide.
       La place reste reservee, pour que rien ne saute a l'arrivee. */
    opacity: 0;
    transition: opacity var(--etat) var(--ease);
  }
  .panneau .apercu--rempli { opacity: 1; }

  /* Le cadre epouse le rapport de la photo montree — le script pose
     --rapport — donc la meme marge blanche court sur les quatre cotes. */
  .apercu__scene {
    position: relative;
    width: 100%;
    aspect-ratio: var(--rapport, 4 / 5);
    overflow: hidden;
  }
  .apercu__vue {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--etat) var(--ease);
  }
  .apercu__vue--active { opacity: 1; }

  /* La photo ne disparait de la ligne que si le panneau existe vraiment
     pour la reprendre. Sans script, ou en mouvement reduit ou le panneau
     n'est pas construit, les sept planches restent en place. */
  .panneau .chambre__detail .planche { display: none; }

  /* Survol : la ligne pointee garde l'encre, les autres reculent. */
  .panneau .index--survole .chambre__ligne { color: var(--encre-douce); }
  .panneau .index--survole .chambre--visee .chambre__ligne { color: var(--encre); }
  .chambre__ligne:hover .chambre__fleche,
  .chambre__ligne:focus-visible .chambre__fleche { transform: translate(2px, -2px); color: var(--encre); }
}

/* ---------- 11. Le sejour ---------------------------------------------- */

.sejour { background: var(--chaux); }
.sejour__grille { display: grid; gap: clamp(32px, 5vw, 64px); }
.sejour__chapeau { margin-top: 1.1em; color: var(--encre-douce); max-width: 40ch; }

.index--savoir { border-top: 1px solid var(--trait); }
.savoir { border-bottom: 1px solid var(--trait); }
.savoir__ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(15px, 1.8vw, 22px);
  cursor: pointer;
  list-style: none;
}
.savoir__ligne::-webkit-details-marker { display: none; }
.savoir__nom {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Chevron trace au trait, sans icone. */
.savoir__chevron {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1px solid var(--encre-douce);
  border-bottom: 1px solid var(--encre-douce);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--etat) var(--ease);
}
.savoir[open] .savoir__chevron { transform: rotate(225deg) translate(-2px, -2px); }

.savoir__detail { padding-bottom: clamp(16px, 2vw, 26px); }
.savoir__detail .corps { color: var(--encre-douce); }

@media (min-width: 900px) {
  .sejour__grille {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(16px, 2vw, 40px);
  }
  .sejour__entete { grid-column: 1 / 5; }
  .index--savoir { grid-column: 6 / 13; }
}

/* Depliage : hauteur animee la ou le navigateur le permet,
   simple apparition ailleurs. */
.savoir[open] .savoir__detail,
.chambre[open] .chambre__detail { animation: deplier var(--etat) var(--ease) both; }
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@supports selector(::details-content) {
  .savoir::details-content,
  .chambre::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--etat) var(--ease), content-visibility var(--etat) allow-discrete;
  }
  .savoir[open]::details-content,
  .chambre[open]::details-content { block-size: auto; }
  .savoir[open] .savoir__detail, .chambre[open] .chambre__detail { animation: none; }
}

/* ---------- 12. Hotesse et acces --------------------------------------- */

.pratique__grille { display: grid; gap: clamp(40px, 6vw, 80px); }
.pratique__bloc .corps { margin-top: 1.3em; }

/* Le portrait est un 4/5 : a pleine largeur de colonne il ecraserait le texte
   qui suit. On le borne, comme le porte-cles de la maison, pour qu'il reste
   une vignette posee sous le titre. */
.planche--hotesse {
  margin-top: 1.8em;
  max-width: clamp(200px, 62vw, 300px);
}

.coordonnees { margin-top: 1.5em; line-height: 1.9; }
.coordonnees a {
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--survol) var(--ease);
}
.coordonnees a:hover { text-decoration-color: var(--herbier); }

.adresse { margin-top: 1.3em; font-style: normal; line-height: 1.7; }
.reperes { margin-top: 1.8em; }
.reperes dt {
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--encre-douce);
  padding-top: 0.9em; margin-top: 0.9em;
  border-top: 1px solid var(--trait);
}
.reperes dd { margin: 0.35em 0 0; }
.reperes + p { margin-top: 2em; }

@media (min-width: 900px) {
  .pratique__grille {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(16px, 2vw, 40px);
  }
  .pratique__bloc:first-child { grid-column: 1 / 6; }
  .pratique__bloc:last-child  { grid-column: 7 / 12; }
}

/* ---------- 13. Disponibilites et formulaire ---------------------------- */

.dispo {
  background: var(--chaux-clair);
  border-top: 1px solid var(--trait);
  scroll-margin-top: 72px;
}
.dispo__grille { display: grid; gap: clamp(40px, 5vw, 64px); }
.dispo__chapeau { margin-top: 1.2em; font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; }

@media (min-width: 900px) {
  .dispo__grille {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(16px, 2vw, 40px);
    align-items: start;
  }
  .dispo__entete { grid-column: 1 / 6; position: sticky; top: 120px; }
  .dispo__zone   { grid-column: 7 / 13; }
}

.champs { display: grid; gap: clamp(18px, 2vw, 26px); }
@media (min-width: 560px) {
  .champs { grid-template-columns: 1fr 1fr; }
  .champ { grid-column: 1 / -1; }
  .champ--moitie { grid-column: auto; }
}

.champ { display: flex; flex-direction: column; }

/* Les etiquettes doivent toutes faire la meme hauteur, sinon les champs
   voisins ne s'alignent plus. La mention « facultatif », en italique et
   plus grande, ne doit donc pas agrandir la ligne. */
.etiquette {
  display: flex; align-items: baseline; gap: 0.55em;
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--encre-douce);
  line-height: 1.4;
  margin-bottom: 0.7em;
}
.etiquette__note {
  font-family: var(--botanique); font-style: italic;
  text-transform: none; letter-spacing: 0;
  font-size: 1.15em;
  line-height: 1;
}

.controle {
  background: var(--chaux);
  /* Le bord identifie le champ : il doit tenir le seuil interface de 3:1,
     ce que le filet decoratif --trait ne fait pas. */
  border: 1px solid var(--trait-fort);
  padding: 0.72em 0.85em;
  width: 100%;
  transition: border-color var(--survol) var(--ease);
  scroll-margin-top: 96px;
}
.controle:hover { border-color: var(--encre-douce); }
.controle:focus { border-color: var(--encre); outline-offset: 1px; }
.controle--zone { resize: vertical; min-height: 7em; line-height: 1.5; }
.controle::placeholder { color: var(--encre-douce); opacity: 0.72; }

/* Etat d'erreur : un filet a gauche, pas de rouge criard. */
.controle[aria-invalid="true"] {
  border-color: var(--erreur);
  border-left-width: 2px;
}
.erreur {
  font-family: var(--botanique); font-style: italic;
  font-size: var(--t-legende);
  color: var(--erreur);
  margin-top: 0.5em;
  display: none;
}
.erreur--visible { display: block; }

.champ--case {
  flex-direction: row; flex-wrap: wrap;
  align-items: flex-start; gap: 0.75em;
  margin-top: 0.4em;
}
.case {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 1.05em; height: 1.05em;
  margin-top: 0.28em;
  border: 1px solid var(--encre-douce);
  background: var(--chaux);
  cursor: pointer;
  display: grid; place-content: center;
  transition: border-color var(--survol) var(--ease);
}
.case::after {
  content: ""; width: 0.5em; height: 0.5em;
  background: var(--encre);
  transform: scale(0);
  transition: transform var(--survol) var(--ease);
}
.case:checked::after { transform: scale(1); }
.case:checked { border-color: var(--encre); }
.case[aria-invalid="true"] { border-color: var(--erreur); }
.case__etiquette { flex: 1; min-width: 12ch; cursor: pointer; font-size: 0.9375rem; line-height: 1.5; }
.champ--case .erreur { flex-basis: 100%; margin-left: 0; }

/* Piege a robots : hors ecran, jamais display:none. */
.appat {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.envoi { margin-top: clamp(24px, 3vw, 36px); }
.bouton {
  background: var(--encre);
  color: var(--chaux);
  border: 1px solid var(--encre);
  padding: 0.95em 2em;
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  cursor: pointer;
  transition: background var(--survol) var(--ease), color var(--survol) var(--ease);
}
.bouton:hover { background: transparent; color: var(--encre); }
.bouton[aria-busy="true"] { cursor: progress; opacity: 0.72; }
.bouton--secondaire {
  background: transparent; color: var(--encre);
  text-decoration: none; display: inline-block;
}
.bouton--secondaire:hover { background: var(--encre); color: var(--chaux); }

.secours {
  margin-top: 1.6em;
  font-size: var(--t-legende);
  font-family: var(--botanique); font-style: italic;
  color: var(--encre-douce);
}
/* Le secours tient sur une seule ligne des que la colonne est assez large ;
   en dessous, il reprend le retour a la ligne normal plutot que de deborder. */
@media (min-width: 760px) {
  .secours { white-space: nowrap; }
}
.secours .lien { font-family: var(--grotesque); font-style: normal; font-size: 0.9375rem; }

/* Bloc de confirmation */
.confirme { border-top: 1px solid var(--encre); padding-top: clamp(24px, 3vw, 36px); }
.confirme:focus-visible { outline-offset: 6px; }
.confirme__titre { font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.confirme__rappel { margin-top: 1.2em; }
.confirme__rappel dt {
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--encre-douce); margin-top: 0.9em;
}
.confirme__rappel dd { margin: 0.2em 0 0; font-variant-numeric: tabular-nums; }
.confirme__actions { margin-top: 1.8em; display: flex; flex-wrap: wrap; gap: 1.5em; align-items: center; }
.confirme__echec { color: var(--erreur); margin-top: 1em; max-width: 52ch; }

/* ---------- 14. Pied --------------------------------------------------- */

.pied {
  border-top: 1px solid var(--trait);
  padding-block: clamp(40px, 6vh, 72px);
  padding-inline: var(--gouttiere);
  font-size: var(--t-legende);
  font-family: var(--grotesque);
  color: var(--encre-douce);
  line-height: 1.75;
}
.pied__grille {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: clamp(20px, 3vw, 32px);
}
.pied__nom {
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--encre);
}
.pied a { text-decoration: none; border-bottom: 1px solid var(--trait); }
.pied a:hover { border-bottom-color: var(--herbier); }
.pied__annee { font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .pied__grille {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    align-items: start;
  }
}

/* ---------- 15. Apparition au defilement -------------------------------- */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal--vu {
  opacity: 1; transform: none;
  transition: opacity var(--apparition) var(--ease), transform var(--apparition) var(--ease);
}
/* Decalage de 70 ms entre freres, sans attribut de style en ligne. */
.js .reveal--vu:nth-child(2) { transition-delay: 70ms; }
.js .reveal--vu:nth-child(3) { transition-delay: 140ms; }
.js .reveal--vu:nth-child(4) { transition-delay: 210ms; }
.js .reveal--vu:nth-child(5) { transition-delay: 280ms; }

/* ---------- 16. Menu mobile -------------------------------------------- */

@media (max-width: 899px) {
  .entete__bascule {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px;
    margin-right: -10px;
    background: none; border: 0; padding: 0;
    cursor: pointer;
  }
  .entete__trait2 {
    display: block; width: 24px; height: 1px;
    background: var(--encre);
    transition: transform var(--etat) var(--ease), opacity var(--etat) var(--ease);
  }
  .entete__bascule[aria-expanded="true"] .entete__trait2:first-child { transform: translateY(3.5px) rotate(45deg); }
  .entete__bascule[aria-expanded="true"] .entete__trait2:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

  /* Le panneau couvre la page entiere : la marque et la bascule doivent
     rester au-dessus, sans quoi le menu ouvert n'offre plus aucune sortie. */
  .entete__marque, .entete__bascule { position: relative; z-index: 1; }

  .menu {
    position: fixed; inset: 0;
    background: var(--chaux);
    flex-direction: column;
    align-items: flex-start; justify-content: flex-start;
    gap: clamp(20px, 3vh, 32px);
    /* La liste commence sous la barre, jamais dessous ni dessus. */
    padding: calc(var(--h-entete) + clamp(24px, 5vh, 56px)) var(--gouttiere) var(--gouttiere);
    opacity: 0; visibility: hidden;
    /* A la fermeture, visibility attend la fin du fondu ; a l'ouverture
       elle bascule immediatement, sans quoi le menu n'accepte pas encore
       le focus au moment ou on le lui donne. */
    transition: opacity var(--etat) var(--ease), visibility 0s linear var(--etat);
  }
  .menu--ouvert {
    opacity: 1; visibility: visible;
    transition: opacity var(--etat) var(--ease), visibility 0s;
  }
  /* Meme typographie qu'en desktop : seule la direction change. Les liens
     passent en inline-flex pour tenir la cible tactile de 44 px sans elargir
     le soulignement au-dela du mot. */
  .menu__liste { flex-direction: column; align-items: flex-start; gap: clamp(12px, 2vh, 20px); }
  .js .menu__liste a,
  .js .menu__action { display: inline-flex; align-items: center; min-height: 44px; }
  /* Sans script, le menu doit rester atteignable. */
  html:not(.js) .menu { position: static; opacity: 1; visibility: visible; flex-direction: row; flex-wrap: wrap; gap: 1rem; background: none; padding: 0; }
  html:not(.js) .menu__liste { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  html:not(.js) .menu__liste a { font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 400; }
  html:not(.js) .entete__bascule { display: none; }
  html:not(.js) .entete { position: static; background: var(--chaux); border-bottom-color: var(--trait); }
  html:not(.js) .entete__barre { height: auto; padding-block: 16px; flex-wrap: wrap; }
  html:not(.js) .hero { padding-top: clamp(16px, 3vh, 40px); }
}

body.bloque { overflow: hidden; }

/* ---------- 17. Mouvement reduit --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal, .js .reveal--vu { opacity: 1; transform: none; }
  .planche--hero .planche__cadre img, .hero__etiquette, .hero__chapo { animation: none; opacity: 1; transform: none; }
  .planche:hover .planche__cadre img { transform: none; }
  .apercu__vue { transition: none; }
}