@charset "utf-8";
/* ---------------------------------------------------------------------
   LES JETONS SONT DECLARES PAR LE THEME, PLUS IMPORTES PAR CETTE FEUILLE.

   Ils vivaient dans tokens.css, tire ici par un @import. Le fichier
   partait donc au navigateur SOUS SON PROPRE NOM, sans le « ?v= » que
   asset_versionne() ajoute aux feuilles declarees dans theme.json — et
   le .htaccess sert tout .css avec « Cache-Control: immutable » pour un
   an, ce qui ne dit pas « garde-le un an » mais « ne me redemande jamais
   s'il a change ».

   Autrement dit : monter la version du theme faisait bien repartir
   theme.css, et jamais tokens.css. Une correction posee sur un jeton —
   une couleur, une echelle typographique — ne serait jamais arrivee chez
   un visiteur deja venu, et rien ne l'aurait dit.

   Les deux feuilles sont donc declarees dans themes/atelier/theme.json,
   tokens d'abord. Un seul numero les casse toutes les deux, et il n'y a
   plus qu'un endroit a monter.
   --------------------------------------------------------------------- */
/* ==========================================================================
   ATELIER — feuille de style du theme
   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('../../../assets/fonts/geist-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../../../assets/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('../../../assets/fonts/geist-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../../../assets/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 themes/atelier/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);
  /* ON CALE LE TITRE, PAS LE BORD DE LA SECTION.
     Une valeur fixe ici visait le bord haut du <section> — mais ce bord est
     invisible, et le titre se trouve --section-y plus bas, soit 62 a 123 px
     selon la hauteur d'ecran. Le menu deposait donc son titre tres bas, avec
     la fin de la section precedente encore visible sous la barre.
     En retranchant cette marge interieure, c'est le TITRE qui s'immobilise
     a 80 px du haut, soit 20 px sous la barre posee, quelle que soit la
     hauteur de la fenetre. La valeur peut devenir negative sur un grand
     ecran : c'est voulu, et scroll-margin l'accepte.
     Va par paire avec .dispo. */
  scroll-margin-top: calc(80px - var(--section-y));
}
.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'embleme a besoin de hauteur */
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-decoration: none;
  white-space: nowrap;
}
/* L'embleme est une donnee d'instance : ce theme ne sait pas lequel il
   coiffera. Il ne regle donc que sa TAILLE, et sur la seule chose qui la
   determine — les proportions du dessin, que l'en-tete traduit en classe.
   Aucune couleur n'est posee : le trace herite de l'encre du theme, ce
   qui est vrai pour les cinq. */
.entete__embleme { flex: none; width: auto; }
/* Une maison, un monogramme : haut comme deux lignes de capitales. */
.entete__embleme--carre { height: 1.9em; }
/* Un dessin a long pedoncule — l'ombelle du Deux : centrer la boite
   mettrait son coeur au-dessus du mot. On le redescend sur la ligne des
   capitales, et on lui donne la hauteur qu'il demande. */
.entete__embleme--haut { height: 3em; 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);
    --t-enseigne: clamp(2.4rem, 5.4vw, 4.4rem);
    /* 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;
}
/* ---------------------------------------------------------------------
   LE NOM DE LA MAISON A SON PROPRE CORPS, ET C'EST UNE CORRECTION.

   Il empruntait --t-display, l'echelle d'affichage du theme — la meme
   que les titres de section. Or ces deux-la n'ont pas la meme place :
   un titre de section dispose de toute la largeur, le nom de la maison
   d'un tiers d'ecran seulement, puisque la planche d'ouverture occupe
   les 56 % de droite.

   Mesure sur « Le Clos d'Exemple » a 1280 px : le mot « d'Exemple »
   faisait 556 px de large dans une colonne de 475. Rien ne debordait au
   sens de la boite — scrollWidth passait a 556 sans que le rectangle
   bouge — donc rien ne le signalait : le mot se contentait de se
   PEINDRE par-dessus la photo. Un nom de maison en trois syllabes ne
   montrait rien ; un nom un peu long ecrivait sur l'image.

   Deux gardes, et il faut les deux :

     1. une echelle propre au nom, calee sur la colonne qui le recoit ;
     2. overflow-wrap, qui fait CASSER un mot trop long au lieu de le
        laisser sortir. Il ne se declenche pour aucun nom courant — la
        premiere garde s'en charge —, mais le jour ou il se declenchera,
        une cesure disgracieuse vaudra toujours mieux qu'un titre en
        travers de la facade.
   --------------------------------------------------------------------- */
.hero__titre {
  font-size: var(--t-enseigne);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  overflow-wrap: break-word;
}
.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. */
  /* LE VIS-A-VIS SUPPOSE UNE PLANCHE. Le gabarit ne rend pas de cadre
     vide quand la photo manque : sans garde, la colonne de droite
     restait pourtant reservee, et tout le texte se serrait dans la
     gauche en laissant plus de la moitie de l'ecran blanche. Un
     navigateur qui ignore :has() jette la regle et empile — c'est le
     repli voulu. */
  .hero:has(.planche--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;
  }
  .hero:has(.planche--hero) .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. Sans planche,
     le pied garde son calage normal — centre sur le conteneur de 1360 px
     —, d'ou la garde repetee ici. */
  .hero:has(.planche--hero) .hero__pied {
    grid-column: 1; grid-row: 1;
    margin-top: 0; margin-left: 0; margin-right: 0;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
   LES DEUX APPELS A L'ACTION DE L'ACCUEIL.

   Ils se posent sous le chapo, au pied de la colonne de texte. Le
   premier est plein, le second en filet : la hierarchie se lit sans
   couleur, comme le reste du theme. Ils entrent avec le chapo, un
   souffle plus tard — la sequence d'ouverture reste UN mouvement.
   --------------------------------------------------------------------- */
.hero__actions {
  margin-top: clamp(22px, 3vh, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  align-items: center;
}
.hero__actions .bouton {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
/* Sur un telephone, deux boutons cote a cote font deux cibles etroites :
   ils prennent la ligne chacun leur tour. */
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* 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; }
.hero__actions   { animation: hero-texte 760ms var(--ease) 300ms 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. */
  /* PAS DE PLANCHES, PAS DE COLONNE D'IMAGES. Le gabarit n'en rend
     aucune quand les photos manquent ; la grille, elle, gardait ses deux
     colonnes, et le texte — seul enfant — tombait dans celle de la
     planche, large de 440 px au plus, le reste de la page restant vide.
     Sans :has(), la regle saute et le texte occupe la largeur : repli
     correct. */
  .maison__grille:has(.maison__planches) {
    --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
       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 ---------------- */

/* ---------------------------------------------------------------------
   LE CHAPO, LES ELEMENTS DISTINCTIFS ET LES CHIFFRES CLES.

   Trois blocs que le modele portait depuis toujours et que ce theme
   n'ecrivait pas. Aucun ne devient une carte : le chapo est du texte de
   tete, les points distinctifs une liste de termes, les chiffres une
   enfilade separee de filets. La profondeur vient du trait et de la
   valeur, jamais d'une ombre — c'est la regle du theme.
   --------------------------------------------------------------------- */

.maison__chapeau {
  margin-top: 1.1em;
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--encre-douce);
}

/* Les points distinctifs : un terme court, son detail dessous. Le filet
   du dessus les separe sans les encadrer. */
.distinctifs {
  margin-top: 2.2em;
  display: grid;
  gap: 0;
}
.distinctif {
  padding-top: 0.9em;
  margin-top: 0.9em;
  border-top: 1px solid var(--trait);
}
.distinctif:first-child { margin-top: 0; }
.distinctifs dt {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
}
.distinctifs dd {
  margin: 0.35em 0 0;
  max-width: 56ch;
}

/* Les chiffres cles : la valeur en grand, son intitule dessous, en
   enfilade. Deux colonnes sur telephone, autant que la place le permet
   ensuite — jamais une seule ligne qui deborde. */
.chiffres {
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--encre);
  display: grid;
  /* La colonne de texte fait environ 34 rem : a 9 rem de large minimum,
     les chiffres tombent en deux rangees plutot qu'en trois plus un
     orphelin. C'est mesure sur quatre chiffres, le cas courant. */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 44px);
}
.chiffre dt {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre dd {
  margin: 0.5em 0 0;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
  line-height: 1.4;
}

.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; }

/* ---------------------------------------------------------------------
   LE DETAIL D'UNE CHAMBRE — les faits, les equipements, l'action.

   Neuf champs du modele n'avaient ici aucun dessin. Ils n'entrent pas
   dans la ligne repliee, qui doit rester lisible d'un trait : ils vivent
   sous la planche, ou l'on s'arrete pour lire.

   Les faits chiffres sont une ENFILADE separee de filets verticaux :
   « 2 a 4 personnes · 24 m2 · lit 160 · 2 lits · a partir de 120 € ».
   C'est la forme la plus dense et la plus lisible pour des faits courts,
   et elle se replie ligne a ligne quand la place manque, sans qu'un
   filet ne se retrouve en tete de ligne.
   --------------------------------------------------------------------- */

.chambre__faits {
  margin-top: 1.4em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.1em;
  font-size: var(--t-legende);
  letter-spacing: 0.01em;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
/* Le point separateur appartient a l'element QUI SUIT, et il est masque
   sur le premier : un separateur pose en fin d'element resterait pendu au
   bout d'une ligne pleine. */
.chambre__faits li { position: relative; }
.chambre__faits li + li { padding-left: 1.1em; }
.chambre__faits li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em; bottom: 0.35em;
  border-left: 1px solid var(--trait);
}

.chambre__intitule,
.galerie__categorie {
  margin-top: 1.6em;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
}
.galerie__categorie { margin-top: 1.2em; }

/* Les equipements sont des MOTS, en semis. Pas de puce, pas de
   pictogramme : un filet leger suffit a les detacher les uns des autres. */
.chambre__equipements {
  margin-top: 0.8em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.chambre__equipements li {
  padding: 0.32em 0.75em;
  border: 1px solid var(--trait);
  background: var(--chaux-clair);
  font-size: var(--t-legende);
  line-height: 1.3;
}

.chambre__action { margin-top: 1.8em; }
.chambre__action .bouton { display: inline-block; text-decoration: none; }

/* La legende d'une vue, sous sa vignette. Elle est bornee a la largeur de
   la vignette pour que la rangee garde son rythme. */
.galerie__piece { display: block; }
.galerie__legende {
  margin-top: 0.5em;
  max-width: clamp(76px, 9vw, 108px);
  font-family: var(--botanique);
  font-style: italic;
  font-size: var(--t-legende);
  line-height: 1.35;
  color: var(--encre-douce);
  text-wrap: pretty;
}

/* 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;
  align-items: flex-start;
  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 — un nom d'hebergement un peu long — 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 --------------------------------------- */
/* VIS-A-VIS SANS MECANISME DE MOTEUR.
   « Qui vous accueille » et « Acces » sont deux sections independantes,
   rendues chacune dans son propre <section>. Quand elles se suivent, la
   regle ci-dessous les met cote a cote ; quand l'une est eteinte, l'autre
   reprend toute la largeur sans qu'on ait rien a declarer.
   C'est :has() qui detecte le voisinage, pas une cle de configuration. */

.pratique .corps { margin-top: 1.3em; }
/* Empilees, les deux sections ne doivent pas cumuler leurs gouttieres
   verticales. La regle est reprise plus bas quand elles passent cote a
   cote : la, ce padding est ce qui aligne les deux titres. */
.pratique + .pratique { padding-top: 0; }

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

/* ---------------------------------------------------------------------
   LES BLOCS PRATIQUES QUE LE MODELE PORTAIT SANS QU'ON LES DESSINE.

   Le chapo des deux sections, l'histoire du lieu, les personnes
   presentees, le stationnement et les transports. Aucun ne demande une
   forme neuve : ce sont du texte de tete, du corps, et un cortege de
   petites planches. C'est exactement ce que le theme sait deja faire.
   --------------------------------------------------------------------- */

.pratique__chapeau {
  margin-top: 1.1em;
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--encre-douce);
}

/* L'histoire du lieu vient APRES le reste : un filet la detache du corps
   sans en faire une section a part, qu'elle n'est pas. */
.pratique__histoire {
  margin-top: 1.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--trait);
  font-family: var(--botanique);
  font-style: italic;
  color: var(--encre-douce);
}
.pratique__complement { margin-top: 1.3em; }

/* Les personnes : de petites planches en rang, nom dessous. Le montage
   est celui des vignettes de la maison — meme fond, meme filet, meme
   marge de 5 px. */
.gens {
  margin-top: 1.8em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 30px);
}
.gens__personne { max-width: clamp(104px, 13vw, 148px); }
.gens__personne .planche--vignette { margin-bottom: 0.7em; }
.gens__personne .planche__cadre img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gens__nom { font-weight: 500; line-height: 1.35; }
.gens__role {
  margin-top: 0.15em;
  font-size: var(--t-legende);
  color: var(--encre-douce);
  line-height: 1.35;
}

.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) {
  /* Le <main> est une grille a une seule colonne : sans paire, tout se
     comporte exactement comme avant, en blocs pleine largeur. */
  main { display: grid; grid-template-columns: repeat(12, 1fr); }
  main > * { grid-column: 1 / -1; }

  /* La paire, et elle seule, se partage la rangee. Les deux sections
     gardent leur propre gouttiere : les colonnes 1-5 et 7-11 reprennent
     exactement le calage de l'ancienne grille interne. */
  main > .pratique--about:has(+ .pratique--access) {
    grid-column: 1 / 7;
    padding-right: 0;
  }
  main > .pratique--about:has(+ .pratique--access) + .pratique--access {
    grid-column: 7 / 13;
    padding-left: clamp(16px, 2vw, 40px);
    /* Cote a cote, les deux sections demarrent sur la meme ligne : il faut
       donc rendre a l'acces le padding haut que « .pratique + .pratique »
       lui retire pour l'empilement, sans quoi son titre remonte d'un
       --section-y entier au-dessus de celui de l'hotesse. */
    padding-top: var(--section-y);
  }

  /* PAS DE REPLI @supports ICI, ET C'EST VOULU.
     Un navigateur qui ne connait pas :has() jette la regle entiere comme
     selecteur invalide ; « main > * { grid-column: 1 / -1 } » reprend
     alors la main, et les deux sections s'empilent pleine largeur. Le
     repli est donc deja la, par construction. Un bloc @supports ne
     ferait que repeter une declaration qui s'applique de toute facon.

     Meme mecanique quand les deux sections ne se suivent plus : une
     section intercalee entre elles fait echouer le « + », la regle ne
     s'applique pas, chacune reprend la largeur. Verifie sur Chromium et
     WebKit par tools/verifier-navigateurs.mjs. */
}

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

.dispo {
  background: var(--chaux-clair);
  border-top: 1px solid var(--trait);
  /* Meme atterrissage que .section : voir la note la-bas. */
  scroll-margin-top: calc(80px - var(--section-y));
}
.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; }
/* Les deux creneaux proposes quand les dates demandees sont prises.
   Jamais plus de deux : ce n'est pas un calendrier, c'est une reponse. */
.confirme__pistes { margin: 0.9em 0 0; padding-left: 1.1em; }
.confirme__pistes li { margin-bottom: 0.35em; 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;
}
/* ---------------------------------------------------------------------
   LA SIGNATURE DU PIED — le nom, la devise, la presentation.

   Le pied n'etait qu'une grille de paragraphes de meme poids : le nom de
   la maison y pesait autant que l'annee. Il s'ouvre desormais sur une
   signature, puis range le reste en colonnes. Trois champs du modele y
   trouvent enfin un toit : la devise, la description longue et les
   quatre adresses de reseaux sociaux, qu'AUCUN gabarit ne lisait.
   --------------------------------------------------------------------- */

.pied__signature {
  max-width: var(--large);
  margin-inline: auto;
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--trait);
}
.pied__devise {
  margin-top: 0.35em;
  font-family: var(--botanique);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--encre);
}
/* La presentation garde une mesure de lecture : un paragraphe de six
   lignes etale sur 1360 px ne se lit pas. */
.pied__mot {
  max-width: 58ch;
  margin-top: 1.1em;
  line-height: 1.7;
}
.pied__mot + .pied__mot { margin-top: 0.9em; }

.pied__adresse, .pied__contacts, .pied__mention { font-style: normal; }

/* Les reseaux sont des MOTS, pas des logos : le socle ne dessine aucune
   marque, et un logo approximatif se remarque plus qu'il ne sert. */
.pied__intitule {
  margin-bottom: 0.4em;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.pied__reseaux ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1.1em;
}

/* Une photo du socle qui s'agrandit : le curseur dit ce que le clic fait. */
.sec__agrandir { display: block; cursor: zoom-in; text-decoration: none; }
.sec__agrandir img { transition: opacity var(--survol) var(--ease); }
.sec__agrandir:hover img { opacity: 0.88; }

.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); }
/* Les liens legaux du pied. La regle manquait : tant qu'aucun site
   n'avait de pages legales, la ligne n'etait jamais rendue et son
   absence de style restait invisible. tools/verifier-styles.php l'a
   trouvee des que la confidentialite est devenue obligatoire. */
.pied__legal, .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; }
}

/* ---------- 18. Les sections servies par le socle -------------------------
   Ce thème fournit ses propres gabarits pour sept sections ; les quatre
   autres — galerie, alentours, avis, services — tombent sur ceux de
   core/. Elles sortaient donc SANS AUCUN STYLE : une liste à puces et
   des photos en pleine largeur.

   La matrice d'activation ne l'avait pas vu, parce qu'elle vérifie qu'une
   section s'affiche, pas qu'elle est présentable. C'est
   tools/verifier-styles.php qui l'a trouvé, et qui l'empêche de revenir.

   Ce qui suit reste sobre à dessein : le vocabulaire de l'atelier — la
   marge, le filet, la capitale espacée — appliqué à des gabarits qui ne
   sont pas les siens. Un thème qui veut mieux écrit son propre gabarit.
   ------------------------------------------------------------------------ */

.sec--gallery, .sec--nearby, .sec--reviews, .sec--services {
  max-width: var(--large);
  margin-inline: auto;
  padding: var(--section-y) var(--gouttiere);
}

.sec__entete { margin-bottom: 2.5rem; }

.sec__titre {
  font-family: var(--botanique);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .6rem;
  color: var(--encre);
}

.sec__intro, .sec__texte {
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 42em;
  color: var(--encre-douce);
}

/* --- La galerie : une mosaïque, pas une liste à puces ------------------- */
.sec__mosaique {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--gouttiere);
}
.sec__mosaique > li { margin: 0; }
/* La chaîne a > picture > img est en ligne par défaut. Une image en
   largeur 100 % dans un conteneur en ligne ne remplit pas sa cellule de
   grille : la mosaïque sortait en une seule colonne d'images centrées,
   ce qui ressemblait à un défaut de grille alors que c'en était un
   d'affichage. */
.sec__mosaique figure,
.sec__mosaique a,
.sec__mosaique picture { display: block; margin: 0; }
.sec__mosaique img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--chaux-clair);
}
.sec__mosaique figcaption {
  font-size: var(--t-legende);
  color: var(--encre-douce);
  padding-top: .45rem;
}
.sec__mosaique a { display: block; }

/* --- Alentours : des cartes en grille ----------------------------------- */
.sec__grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gouttiere);
}
.carte {
  border-top: 1px solid var(--trait);
  padding-top: .9rem;
}
.carte__nom {
  font-family: var(--botanique);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 .3rem;
}
.carte__type, .carte__distance {
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-right: .8rem;
}
.carte__action { display: inline-block; margin-top: .6rem; font-size: var(--t-legende); }

/* --- Avis ---------------------------------------------------------------- */
.sec__avis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: calc(var(--gouttiere) * 1.5);
}
.avis { border-left: 2px solid var(--trait-fort); padding-left: 1.1rem; }
.avis__texte { font-size: var(--t-body); line-height: 1.6; margin: 0 0 .7rem; }
.avis__note   { font-size: var(--t-label); letter-spacing: .1em; color: var(--herbier-fonce); }
.avis__auteur { font-weight: 500; }
.avis__date, .avis__origine, .avis__source {
  font-size: var(--t-legende);
  color: var(--encre-douce);
}

/* --- Services ------------------------------------------------------------ */
.sec__services, .sec__categorie {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: .7rem var(--gouttiere);
}
.service__nom { font-weight: 500; }
.service__detail { font-size: var(--t-legende); color: var(--encre-douce); }

/* --- Le formulaire du socle, si un jour il sert ici ---------------------- */
.formulaire { display: grid; gap: 1rem; max-width: 34rem; }
/* Une fois la demande partie, form.hidden est pose par form.js — mais
   `display: grid` ci-dessus l'emportait sur le display:none de
   l'attribut, et le formulaire restait affiche SOUS sa propre
   confirmation. Personne ne l'avait vu : le bloc de confirmation
   s'ecrit en dessous, et il fallait remonter pour s'en apercevoir. */
.formulaire[hidden] { display: none; }

/* --- Ce que les gabarits du socle posent en plus ------------------------
   La couverture de la galerie, les series d'un hebergement, les vues
   legendees. Ces classes viennent de core/templates : ce theme ne
   redefinit pas toutes les sections, et celles qu'il laisse au socle
   doivent etre habillees comme les siennes. */

.sec--gallery__couverture {
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.sec--gallery__couverture img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: var(--chaux-clair);
}
.sec--gallery__couverture figcaption {
  margin-top: .5rem;
  font-size: var(--t-legende);
  color: var(--encre-douce);
}

.carte__photo { margin: 0 0 .8rem; }
.carte__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte__photo figcaption,
.carte__vues figcaption {
  margin-top: .35rem;
  font-size: var(--t-legende);
  color: var(--encre-douce);
}
.carte__intitule,
.carte__categorie {
  margin: 1rem 0 .4rem;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--encre-douce);
}
.carte__vues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .4rem;
}
.carte__vues img { width: 4rem; height: 3rem; object-fit: cover; }
.carte__vues figcaption { max-width: 4rem; }