/* ==========================================================================
   LE MOULIN AUX ÉPICES — les sections qui n'existent pas sur la home.

   Chargée APRÈS styles.css, et seulement par les pages intérieures. Elle ne
   contient que les composants relevés sur les sous-pages de la référence :
   la liste à images accordéon, le bandeau des équipements, la grille des
   pièces, la photo pleine largeur et les questions fréquentes.

   Pourquoi un fichier séparé plutôt qu'un ajout à styles.css : cette
   feuille-là a déjà coûté deux régressions sérieuses (RAPPORT.md § 14), et
   son ordre de cascade est réglé au millimètre — toutes ses surcharges
   mobiles sont regroupées en fin de fichier. Y insérer des blocs au milieu
   rouvrirait exactement ce piège. Ici les sélecteurs sont disjoints de ceux
   de la home, sauf `.d-info-list-2` qui surcharge délibérément
   `.d-info-list` — et qui gagne parce que cette feuille passe après.

   Toutes les valeurs viennent de `main.min.css` de la référence, relevées
   règle par règle (RAPPORT.md § 15.1), pas estimées à l'œil.
   ========================================================================== */

/* --- Le seul jeton nouveau ------------------------------------------------
   La référence pose #999 sur les questions au repos et sur les libellés
   inactifs de la liste : un gris NEUTRE, à 2,8:1 sur son fond crème. Ici
   c'est un gris CHAUD dérivé du brun, à 3,65:1 sur `--creme` — au-dessus du
   seuil pour du texte de cette taille. Même rôle, même effet à l'œil, un
   contraste qui passe. C'est l'un des deux écarts assumés de la page. */
:root { --gris-chaud: #8A7A6C; }

/* --- Héros des pages intérieures -----------------------------------------
   La référence n'y met pas l'emblème de la home : une photo, un titre centré,
   rien d'autre. Le voile et le cadrage sont ceux de `.d-hero`, déjà en place.
   Mesuré : H1 de 4,6 rem au-dessus de 768 px, 3,6 rem en dessous, boîte de
   50 rem, interligne 100 %. */
.d-hero .b-block .hero-titre {
  margin: 0;
  font-family: var(--titre-affichage);
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 100%;
  color: var(--blanc);
  width: 50rem;
  max-width: 100%;
  margin-inline: auto;
}

/* --- Liste à images en accordéon (`d-info-list-2`) ------------------------
   Deux moitiés égales : le texte à gauche, une PILE d'images à droite dont
   celle de l'item survolé s'ouvre à 70 vh pendant que les deux autres
   retombent à 15 vh. Avec exactement trois images, 70 + 15 + 15 = 100 % de la
   fenêtre — c'est ce que mesure la référence : 84 + 18 + 18 = 120 rem.

   ⚠️ La mécanique est calée sur TROIS images. En ajouter une quatrième
   demande de reprendre les hauteurs (la référence a une règle par cardinal). */
.d-info-list.d-info-list-2 .b-img  { flex: 0 0 50%; max-width: 50%; padding-right: 0; padding-left: 0; }
.d-info-list.d-info-list-2 .b-info { flex: 0 0 50%; max-width: 50%; }
/* Le bloc de texte est calé à 10 rem du bord, sur 55,6 rem — et non centré
   dans sa moitié comme sur la home. */
.d-info-list.d-info-list-2 .b-info > div { width: 55.6rem; margin-inline: 10rem auto; }

.d-info-list.d-info-list-2 .medias { display: flex; flex-direction: column; height: 100%; }
.d-info-list.d-info-list-2 .img-media {
  display: block; width: 100%; object-fit: cover;
  /* Même durée et même easing que la référence : 1 s, cubic-bezier de sortie
     douce. C'est ce qui rend l'accordéon lisible plutôt que sec. */
  transition: height 1s cubic-bezier(.645, .045, .355, 1);
  height: 15vh;
}
.d-info-list.d-info-list-2.active-img-1 .img-media:nth-child(1),
.d-info-list.d-info-list-2.active-img-2 .img-media:nth-child(2),
.d-info-list.d-info-list-2.active-img-3 .img-media:nth-child(3) { height: 70vh; }

/* La course d'épinglage de la section matières.
   ⚠️ C'est la pièce qui manquait : `script.js` (`epinglage`) n'arme un
   épinglage QUE si le spacer est plus haut que sa section
   (`course = spacer.offsetHeight - section.offsetHeight`). Sans cette
   réserve, la course valait 0, la section ne tenait pas en place — et les
   trois matières ne s'ouvraient qu'au survol, jamais au défilement.

   150 vh de contenu = 100 vh de molette (le contenu défile à 1,5×, voir
   `lissage`), soit un tiers d'écran par matière. La section fait exactement
   un écran (70 + 15 + 15), elle s'épingle donc sans rien rogner. */
.pin-spacer--matieres { padding-bottom: 150vh; }
@media (max-width: 767.98px) {
  /* En dessous de 768 px l'épinglage est désactivé et la pile d'images est
     masquée (`no-mobile`) : la réserve ne laisserait qu'un grand vide. */
  .pin-spacer--matieres { padding-bottom: 0; }
}

.d-info-list.d-info-list-2 .liste-services { margin-top: 5rem; }
/* Chaque libellé est un vrai <button> et non un <li> cliquable : la liste
   devient parcourable au clavier, ce que la référence ne permet pas. Le filet
   est un <span> et non un <hr> — un <hr> n'a rien à faire dans un bouton. */
.d-info-list.d-info-list-2 .liste-services li { display: block; }
.d-info-list.d-info-list-2 .liste-services button {
  display: flex; align-items: center; cursor: pointer;
  width: 100%; padding: 2rem 0; margin: 0; text-align: left;
  background: transparent; border: 0;
  font-family: var(--titre-affichage);
  font-size: 1.8rem; line-height: 140%;
  /* Le gris de la référence (#999) tombe à 2,8:1 sur son fond. Il est
     remplacé par un gris CHAUD dérivé du brun, à 3,65:1 — au-dessus du seuil
     pour du texte de cette taille. C'est le seul écart de couleur de la page,
     et il est invisible à l'œil. */
  color: var(--gris-chaud);
  transition: color .5s ease-in-out;
}
.d-info-list.d-info-list-2 .liste-services .filet {
  flex: 0 0 auto; width: 0; height: .13rem;
  background-color: currentColor;
  transition: width .5s ease-in-out, margin-right .5s ease-in-out;
}
.d-info-list.d-info-list-2 .liste-services li.actif button { color: var(--brun); }
.d-info-list.d-info-list-2 .liste-services li.actif .filet { width: 1.4rem; margin-right: 1.2rem; }
.d-info-list.d-info-list-2 .b-info .title { color: var(--brun); }

/* --- Bandeau des équipements (`d-carousel-services`) ----------------------
   Le même ruban que `.d-advantages` — même `scrollVentajas`, 40 s linéaires,
   translation de 0 à −50 % — mais sur fond brun, texte beige, et une vignette
   en CAPSULE après chaque libellé. Mesuré : 11,7 × 6 rem, rayon 10 rem,
   3 rem de marge à gauche, entretoise de 2,5 rem de chaque côté du bloc. */
.d-advantages.d-carousel-services { background-color: var(--brun); }
.d-advantages.d-carousel-services .b-adv { color: var(--beige); padding: 5rem 2.5rem; }
.d-advantages.d-carousel-services .b-adv img {
  margin-right: 0; margin-left: 3rem;
  width: 11.7rem; height: 6rem; object-fit: cover; border-radius: 10rem;
}

/* --- Les pictogrammes -----------------------------------------------------
   Une planche unique (`assets/img/pictos.svg`) appelée en `<use>`. Le trait
   suit `currentColor` : le picto prend la couleur du texte à côté de lui, y
   compris au survol, sans une règle de plus.

   ⚠️ Ce sont des ajouts. La référence met des photos de détail en capsule là
   où on met des traits — faute des photos (RAPPORT.md § 15.1). */
.picto { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: block; }

/* --- La ligne de capacité (`d-capacite`) ----------------------------------
   Ce n'est pas un gabarit de la référence : un hôtel de 10 chambres n'a pas
   de capacité à annoncer. C'est en revanche LA convention des sites de
   location — Airbnb, Booking, Vrbo affichent tous la même ligne juste sous le
   titre : voyageurs · chambres · lits · salle de bain. Un voyageur la cherche
   des yeux avant de lire quoi que ce soit d'autre.

   Elle prend la place et la hauteur du bandeau d'avantages de la référence
   (`d-advantages`, 14,48 rem), pour ne pas déranger le rythme de la page. */
/* ⭐ REPRIS EN FICHE TECHNIQUE (Manon, 10/09 : « fais ça un peu plus joli »).
   Chaque item était couché — picto à GAUCHE d'une pile chiffre + mot. Trois
   défauts qui se cumulaient : le picto ne s'alignait ni sur le chiffre ni sur
   le mot, chaque item avait sa largeur propre selon la longueur du mot, et un
   simple `gap` de 6 rem ne dit pas où finit une mesure et où commence la
   suivante — la rangée se lisait comme cinq bouts posés côte à côte.

   On redresse : picto AU-DESSUS, chiffre, mot — trois étages centrés sur un
   même axe. Et un filet vertical entre les colonnes, qui fait le travail que
   le blanc ne faisait pas. Le chiffre grandit (2,4 → 3,2 rem) parce que c'est
   lui l'information ; le mot rétrécit et s'espace, il n'est qu'une légende. */
.d-capacite { background-color: var(--creme); padding-block: 6.4rem; }
.d-capacite .b-capacite {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; row-gap: 3rem;
}
.d-capacite .item {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  padding-inline: 4.4rem; text-align: center; color: var(--encre);
  border-left: 1px solid rgba(85, 55, 37, .17);
}
.d-capacite .item:first-child { border-left: 0; }
.d-capacite .item .picto { width: 2.6rem; height: 2.6rem; color: var(--or); }
.d-capacite .item p {
  margin: 0;
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.2rem; line-height: 100%;
  /* Chasse fixe : sans elle, le 1 de « 1 salle de bain » décentre sa colonne
     par rapport aux quatre autres. */
  font-variant-numeric: tabular-nums;
}
.d-capacite .item p span {
  display: block; margin-top: .9rem;
  font-family: "Jost"; font-size: 1.25rem; font-variant-numeric: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(50, 32, 22, .6);
}

/* --- Texte et image, moitié-moitié (`d-img-info`) -------------------------
   Le gabarit de récit de la référence : une photo pleine hauteur d'un côté,
   un bloc de texte de 55,6 rem centré de l'autre. C'est celui d'`el-hotel`,
   pas d'`habitaciones` — mais c'est le seul de la référence qui accepte
   plusieurs paragraphes, et la description de l'annonce en a cinq. */
.d-img-info { margin: 0; }
.d-img-info .b-block { padding-inline: 0; }
.d-img-info .b-block > div { display: flex; width: 100%; }
.d-img-info .b-img { width: 100%; position: relative; }
.d-img-info .b-img .img-div { height: 100vh; width: 100%; overflow: hidden; position: relative; }
.d-img-info .b-img picture { display: block; width: 100%; height: 100%; }
.d-img-info .b-img img { display: inline; width: 100%; height: 100%; object-fit: cover; }
/* --- Le cadrage de la bâtisse --------------------------------------------
   `object-fit: cover` recadre depuis le CENTRE. Ici le panneau fait une
   demi-fenêtre en pleine hauteur — 720 × 900 à 1440 — et la source est
   panoramique : le recadrage ne garde que 53 % de sa largeur à 1440, 59 % à
   1920, 73 % à 390. La bâtisse s'étend de 5 à 38 % du cadre ; centré, on
   n'aurait vu que sa dernière travée, l'eau et le pont.

   14 % déplace la fenêtre de recadrage vers la gauche : elle couvre alors
   5,7–59 % à 1440, 5,7–65 % à 1920 et 3,8–76 % à 390. Le bâtiment tient en
   entier aux trois largeurs — vérifié à chacune, pas déduit d'une seule. */
.d-img-info .b-img img.cadre-batisse { object-position: 14% center; }

.d-img-info .b-text { width: 100%; display: grid; align-items: center; }
.d-img-info .b-text > div { max-width: 55.6rem; margin-inline: auto; }
.d-img-info .b-text .p-section { margin-bottom: 1rem; color: var(--or); font-family: "Jost"; font-size: 1.4rem; line-height: 140%; text-transform: uppercase; letter-spacing: .08em; }
.d-img-info .b-text .title {
  margin: 0; color: var(--brun);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%;
}
.d-img-info .b-text .text { margin-top: 3rem; }
.d-img-info .b-text .text p {
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 1.8rem; line-height: 140%; color: var(--encre);
}
.d-img-info .b-text .text p + p { margin-top: 2rem; }
.d-img-info .b-text .b-btn { margin-top: 5rem; }

/* --- Ce qui manque encore -------------------------------------------------
   Un trou dans le contenu doit SE VOIR, sinon il part en ligne. Le fond ocre
   et le trait pointillé sont là pour ça : personne ne publie une page en
   croyant qu'elle est finie. Ce n'est pas un style de la référence, et il n'a
   pas vocation à rester une fois les textes reçus. */
.a-remplir {
  display: inline-block; padding: .4rem 1rem; border-radius: .4rem;
  background: rgba(155, 116, 74, .14);
  box-shadow: inset 0 0 0 1px rgba(155, 116, 74, .5);
  color: var(--brun); font-family: "Jost"; font-size: 1.4rem; line-height: 150%;
}

/* --- La citation en grand (`d-intro-img`) ---------------------------------
   Gabarit de respiration de la référence : un bloc centré de 111,2 rem, une
   petite photo en portrait de 30 × 40 rem au-dessus, et UNE phrase en serif
   de 3,6 rem. Ce n'est pas un paragraphe : c'est une phrase qu'on retient.
   Retrait de 18 rem en haut et en bas — c'est ce qui lui donne son silence. */
.d-intro-img { padding-block: 18rem; }
.d-intro-img .b-block > div { max-width: 111.2rem; margin-inline: auto; text-align: center; }
.d-intro-img .b-block > div .img-div {
  height: 40rem; width: 30rem; margin-inline: auto;
  border-radius: 1rem; overflow: hidden; position: relative;
}
.d-intro-img .b-block > div .img-div img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-intro-img .b-block .p-section { margin-top: 3rem; color: var(--or); font-family: "Jost"; font-size: 1.4rem; line-height: 140%; text-transform: uppercase; letter-spacing: .08em; }
.d-intro-img .b-block > div .text-featured { margin-top: 3rem; }
.d-intro-img .b-block > div .text-featured p {
  margin: 0; font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%; color: var(--brun);
}
/* La variante sombre : la référence l'appelle `color-bg-green200`. Chez elle
   c'est un vert profond, chez nous le brun d'encre — même rôle, même contraste. */
.d-intro-img.color-bg-sombre { background-color: var(--encre); }
.d-intro-img.color-bg-sombre .b-block .p-section { color: var(--or-clair); }
.d-intro-img.color-bg-sombre .b-block > div .text-featured p { color: var(--blanc); }

/* --- Les chiffres dans un bloc de texte (`b-kpis`) ------------------------
   Gabarit `d-img-info-kpis` de la page `sobre-nosotros` : des chiffres posés
   DANS la colonne de texte, pas en bandeau séparé. Le nombre à 7,2 rem, son
   libellé en capitales de 1,4 rem au-dessous, 5 rem entre chaque. */
.d-img-info .b-text .b-kpis { margin-top: 5rem; }
.d-img-info .b-text .b-kpis > div { display: flex; flex-wrap: wrap; gap: 5rem; row-gap: 2rem; }
.d-img-info .b-text .b-kpis .kpi { width: max-content; }
.d-img-info .b-text .b-kpis .kpi p {
  margin: 0; max-width: 16rem;
  font-family: "Jost"; font-size: 1.4rem; line-height: 120%;
  text-transform: uppercase; letter-spacing: .06em; color: var(--or-clair);
}
.d-img-info .b-text .b-kpis .kpi p span {
  display: block; margin-bottom: 1rem;
  font-family: var(--titre-affichage); font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 7.2rem; line-height: 100%; color: var(--brun);
}

/* --- Les trois cartes d'équipements (`d-3col-cards`) ----------------------
   Gabarit de la page `contacto` de la référence : trois cartes sombres de
   131,2 rem de conteneur, 4,8 rem d'écart, rayon 1 rem, 5 rem de retrait
   intérieur. La référence y met trois blocs de contact ; on y met les
   cinquante-trois équipements de l'annonce, rangés en trois familles.

   Écart assumé : la référence n'a pas de pictogramme dans ces cartes, et ses
   items sont en serif de 2,4 rem. À cinquante-trois lignes, 2,4 rem ne tient
   pas — on descend à 1,6 rem et on ajoute un picto par ligne. La carte, elle,
   garde ses mesures. */
.d-3col-cards { padding-block: 10rem; }
.d-3col-cards .container-fluid { max-width: 131.2rem; margin-inline: auto; }
.d-3col-cards .b-block > div { display: flex; gap: 4.8rem; justify-content: space-between; max-width: 152.8rem; margin-inline: auto; }
.d-3col-cards .b-card {
  width: 100%; padding: 5rem; border-radius: 1rem;
  background: var(--encre); color: var(--beige);
  /* En colonne, pour que le pied de carte se cale en BAS : les trois listes
     n'ont pas la même longueur, et sans ça les trois traits de séparation
     tombaient à trois hauteurs différentes. */
  display: flex; flex-direction: column;
}
.d-3col-cards .b-card .title {
  margin: 0 0 3rem; color: var(--blanc);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.4rem; line-height: 120%;
}
.d-3col-cards .b-card ul { margin: 0; padding: 0; list-style: none; }
.d-3col-cards .b-card li {
  display: flex; align-items: flex-start; gap: 1.4rem;
  font-family: "Jost"; font-size: 1.6rem; line-height: 150%;
  color: var(--beige);
}
.d-3col-cards .b-card li + li { margin-top: 1.8rem; }
.d-3col-cards .b-card ul { margin-bottom: 3rem; }
.d-3col-cards .b-card li .picto { color: var(--or-clair); margin-top: .2rem; }
/* Le pied de carte : ce qui n'existe PAS. Le dire ici plutôt que de le taire
   évite la déception à l'arrivée, et c'est ce que les avis reprochent le plus
   aux annonces qui l'omettent. */
.d-3col-cards .b-card .absents {
  margin-top: auto; padding-top: 2.4rem;
  border-top: 1px solid rgba(237, 228, 216, .22);
  font-family: "Jost"; font-size: 1.3rem; line-height: 150%;
  color: rgba(237, 228, 216, .66);
}

/* --- La grille des pièces (`d-grid-rooms`) --------------------------------
   Conteneur de 131,2 rem centré, 10 rem de respiration en haut et en bas.
   Trois largeurs de carte, chacune avec SA hauteur d'image — ce n'est pas un
   ratio commun, ce sont trois valeurs distinctes relevées une par une. */
.d-grid-rooms { padding-block: 10rem; }
.d-grid-rooms .container-fluid { max-width: 131.2rem; margin-inline: auto; }
.d-grid-rooms .p-section { margin-bottom: 1rem; color: var(--or); font-family: "Jost"; font-size: 1.4rem; line-height: 140%; text-transform: uppercase; letter-spacing: .08em; }
.d-grid-rooms .b-intro .title {
  margin: 0; max-width: 92.5rem;
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%; color: var(--encre);
}
.d-grid-rooms .b-grid { margin-top: 6.3rem; }
.d-grid-rooms .b-grid > div { display: flex; gap: 4rem; flex-wrap: wrap; }

.d-grid-rooms .b-grid .b-col-6 { width: calc(50% - 2rem); }
.d-grid-rooms .b-grid .b-col-4 { width: calc(33.33333333% - 2.67rem); }
.d-grid-rooms .b-grid .b-col-6 .img-div { height: 49.6rem; }
.d-grid-rooms .b-grid .b-col-4 .img-div { height: 46.7rem; }
/* La bannière : sa BOÎTE fait 46,7 rem comme les cartes voisines, mais
   l'image qu'elle contient en fait 59,5 et déborde par le bas, coupée. Ce
   n'est pas une coquette­rie : c'est ce que fait la référence, où le carrousel
   (`overflow: clip`, 46,7 rem) rogne une image de 59,5. Mesuré élément par
   élément — la carte entière fait 53,58 rem, pas 59,5. */
.d-grid-rooms .b-grid .b-banner .img-div { height: 46.7rem; }
.d-grid-rooms .b-grid .b-banner .img-div img { height: 59.5rem; }
.d-grid-rooms .b-grid .img-div { width: 100%; border-radius: .5rem; overflow: hidden; position: relative; display: block; }
.d-grid-rooms .b-grid picture { display: block; width: 100%; height: 100%; }
.d-grid-rooms .b-grid .img-div img {
  display: inline; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
.d-grid-rooms .b-grid .b-room:hover .img-div img,
.d-grid-rooms .b-grid .b-banner:hover .img-div img { transform: scale(1.04); }

.d-grid-rooms .b-grid .b-room,
.d-grid-rooms .b-grid .b-banner { display: block; text-decoration: none; position: relative; }
.d-grid-rooms .b-grid .b-room .b-text { padding: 2rem 3rem; }
.d-grid-rooms .b-grid .b-room .b-text .title {
  margin: 0;
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.4rem; line-height: 120%; color: var(--encre);
  transition: color .5s cubic-bezier(.645, .045, .355, 1);
}
.d-grid-rooms .b-grid .b-room:hover .b-text .title { color: var(--or); }

/* La carte-bannière : voile noir à 30 %, texte centré en blanc par-dessus.
   C'est le seul bloc de la grille qui porte du texte sur l'image. */
.d-grid-rooms .b-grid .b-banner .img-div::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3));
}
.d-grid-rooms .b-grid .b-banner .b-text {
  padding: 4rem; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 100%; z-index: 1; text-align: center;
}
.d-grid-rooms .b-grid .b-banner .b-text .title { color: var(--blanc); margin: 0; font-family: var(--titre-affichage); font-weight: 400; font-size: 2.4rem; line-height: 120%; }
.d-grid-rooms .b-grid .b-banner .b-text .btn-underline { color: var(--blanc); margin-top: 1.5rem; display: inline-block; }

/* --- La photo pleine largeur (`d-img-video-full`) -------------------------
   Une seule image, plein cadre, 130,9 rem de haut au-dessus de 768 px.
   Survol : 1,02 en 1 s — un mouvement à peine perceptible, c'est voulu. */
.d-img-video-full { padding: 0; margin: 0; }
.d-img-video-full .img-div { width: 100%; height: 130.9rem; overflow: hidden; position: relative; display: block; }
.d-img-video-full picture { display: block; width: 100%; height: 100%; }
.d-img-video-full .img-div img {
  display: inline; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.645, .045, .355, 1);
}
.d-img-video-full .img-div:hover img { transform: scale(1.02); }
.d-img-video-full .ico-plus {
  position: absolute; z-index: 1; top: 2rem; right: 2rem;
  width: 1.4rem; height: 1.4rem; background-color: var(--blanc);
}

/* --- Questions fréquentes (`d-faqs`) --------------------------------------
   Deux colonnes séparées de 10 rem : le titre à gauche sur 37,1 rem,
   l'accordéon à droite sur 69 % (80 rem au plus). Chaque question est séparée
   par un filet d'un pixel ; à l'ouverture, le filet, la question et l'icône
   passent en brun d'un seul mouvement. */
.d-faqs { padding-block: 10rem; }
.d-faqs .container-fluid { max-width: 131.2rem; margin-inline: auto; }
.d-faqs .b-block > div { display: flex; flex-wrap: wrap; max-width: 152.8rem; gap: 10rem; justify-content: space-between; }
.d-faqs .b-title { width: 37.1rem; }
.d-faqs .b-faqs { width: 69%; max-width: 80rem; }
.d-faqs .p-section { color: var(--or); margin-bottom: 1rem; font-family: "Jost"; font-size: 1.4rem; line-height: 140%; text-transform: uppercase; letter-spacing: .08em; }
.d-faqs .b-title .title {
  margin: 0; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%;
}

.d-faqs .b-collapse { position: relative; border-top: 1px solid var(--gris-chaud); transition: border-color .5s ease-in-out; }
.d-faqs .b-collapse:last-child { border-bottom: 1px solid var(--gris-chaud); }
.d-faqs .b-collapse:has(.collapse-button[aria-expanded="true"]),
.d-faqs .b-collapse:has(.collapse-button[aria-expanded="true"]) + .b-collapse { border-top-color: var(--brun); }
.d-faqs .b-collapse:last-child:has(.collapse-button[aria-expanded="true"]) { border-bottom-color: var(--brun); }

/* Un vrai <button> et non un <div data-open> comme la référence : il est
   atteignable au clavier et annoncé comme repliable par un lecteur d'écran.
   C'est l'écart d'accessibilité autorisé — invisible à l'écran. */
.d-faqs .collapse-button {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  width: 100%; padding: 2rem; margin: 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.4rem; line-height: 100%; color: var(--gris-chaud);
  transition: color .5s ease-in-out;
}
.d-faqs .collapse-button:hover,
.d-faqs .collapse-button[aria-expanded="true"] { color: var(--brun); }
/* Le « + » et le « − » sont DESSINÉS, pas chargés : deux barres de 1,4 rem,
   la verticale s'efface à l'ouverture. La référence charge deux SVG et en
   masque un ; ici la bascule s'anime au lieu de sauter, et il n'y a pas de
   requête de plus. La taille et la couleur sont celles de la référence. */
.d-faqs .collapse-button .signe {
  position: relative; flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
}
.d-faqs .collapse-button .signe::before,
.d-faqs .collapse-button .signe::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px; margin-top: -.5px;
  background-color: var(--gris-chaud);
  transition: background-color .5s ease-in-out, transform .5s ease-in-out;
}
.d-faqs .collapse-button .signe::after { transform: rotate(90deg); }
.d-faqs .collapse-button:hover .signe::before,
.d-faqs .collapse-button:hover .signe::after,
.d-faqs .collapse-button[aria-expanded="true"] .signe::before,
.d-faqs .collapse-button[aria-expanded="true"] .signe::after { background-color: var(--brun); }
.d-faqs .collapse-button[aria-expanded="true"] .signe::after { transform: rotate(0deg); }

.d-faqs .collapse-content { overflow: hidden; height: 0; transition: height .5s ease-in-out; }
.d-faqs .collapse-content > div { padding: 1rem 2rem 5rem; }
/* Les réponses étaient le plus petit texte du site : 1,4 rem de serif (10,5 px
   à 1440) contre 1,8 rem pour tout autre paragraphe, et une question de 2,4 rem
   juste au-dessus. Elles couraient en plus sur les 76 rem de la colonne, soit
   près de 110 signes par ligne — deux fautes qui s'additionnaient : trop petit
   ET trop long. 1,8 rem aligne les réponses sur le reste du site, l'interligne
   passe de 140 à 165 %, et la mesure est bornée à 55 rem — mesuré à 74 signes
   par ligne, dans la fourchette lisible ; 66 rem en donnaient encore 88. */
.d-faqs .collapse-content .text p,
.d-faqs .collapse-content .text li {
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 1.8rem; line-height: 165%; color: var(--encre);
}
.d-faqs .collapse-content .text { max-width: 55rem; }
.d-faqs .collapse-content .text ul { padding-left: 2rem; list-style: disc; }
.d-faqs .collapse-content .text p + p { margin-top: 1.8rem; }

/* ==========================================================================
   LA PAGE HISTOIRE — ce que le gabarit des pages intérieures ne savait pas
   faire.

   Trois ajouts, et un seul principe derrière les trois : une page qui raconte
   doit DONNER quelque chose à lire à chaque écran. Le gabarit relevé sur la
   référence sait poser une photo et un titre ; il ne sait pas tenir sept
   siècles. Les sélecteurs ci-dessous sont tous préfixés (`d-hero--recit`,
   `d-info-list-2`, `d-chrono`) : rien ici n'atteint la home ni
   `notre-logement`.
   ========================================================================== */

/* --- 1. Le héros de récit (`d-hero--recit`) -------------------------------
   Le gabarit centre le titre dans la photo. Sur `notre-logement`, dont la
   photo a un centre calme (un mur bleu, un rideau), c'est juste. Sur la photo
   de nuit des Ponts Couverts, le centre est la tour éclairée : le titre y
   tombait dans la seule zone claire et bruyante de l'image, à 4,6 rem, sans
   voile. Il se lisait comme une légende, pas comme le titre de la page.

   On descend donc le bloc au tiers bas, on lui donne un dégradé qui n'obscurcit
   QUE le bas (le ciel reste noir de lui-même, il n'a besoin de rien), et on
   rend au H1 sa taille : 7,2 rem contre 3,6 rem pour les titres de section —
   un rapport de deux, au lieu des 1,28 d'avant, qui ne hiérarchisait rien. */
/* Le voile suit le texte. Le titre étant AU MILIEU de la photo, c'est un halo
   centré qu'il lui faut, et non un socle par le bas : un dégradé qui monte du
   bas ne protège rien à mi-hauteur, et c'est justement là que cette photo est
   la plus claire et la plus bruyante — la passerelle éclairée et ses reflets.

   Trois couches, chacune pour une chose précise, et aucune sur la photo
   entière : le halo sous le bloc de titre, un filet en haut pour les liens
   blancs de l'en-tête, un filet en bas pour la pilule du moteur. Les angles et
   les deux tours restent à leur luminosité d'origine. */
.d-hero--recit .img-div::before {
  background:
    radial-gradient(56% 44% at 50% 50%,
      rgba(16, 10, 6, .58) 0%, rgba(16, 10, 6, .40) 48%,
      rgba(16, 10, 6, .13) 78%, rgba(16, 10, 6, 0) 100%),
    linear-gradient(180deg, rgba(16, 10, 6, .40) 0%, rgba(16, 10, 6, 0) 22%),
    linear-gradient(0deg,   rgba(16, 10, 6, .46) 0%, rgba(16, 10, 6, 0) 20%);
}
.d-hero--recit .b-block {
  top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  /* 112 rem : Garamond chasse plus large qu'Instrument Serif, et « Dormir dans
     un bout d'histoire » doit tenir sur une ligne. Mesuré à 612 px de texte
     pour 840 px de boîte à 1440. */
  width: 112rem;
}
.d-hero--recit .b-block .hero-lieu {
  font-size: 1.4rem; letter-spacing: .32em; text-indent: .32em;
  color: rgba(255, 255, 255, .84); margin: 0;
  /* le lieu-dit tombe sur les reflets de la rivière : 10,5 px en capitales
     espacées n'y tiennent pas sans un fond */
  text-shadow: 0 .2rem 2.4rem rgba(10, 6, 3, .8);
}
/* Le seul mouvement de la page : un filet d'or qui se tire sous le lieu-dit,
   une fois, à l'arrivée. Le reste du héros ne bouge pas. */
.d-hero--recit .b-block .hero-lieu::after {
  /* `text-indent` est hérité du lieu-dit (il compense son interlettrage) et
     décalait le filet vers la droite. */
  content: ""; display: block; width: 7rem; height: 1px; text-indent: 0;
  margin: 1.8rem auto 2.8rem;
  background-color: var(--or-clair);
  /* Le filet se tire depuis son milieu. En `scaleX` et non en `width` : la
     largeur relayoute la boîte à chaque image, l'échelle est composée. */
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) .7s;
}
.d-hero--recit.fade-animate .b-block .hero-lieu::after { transform: scaleX(1); }
.d-hero--recit .b-block .hero-titre {
  font-size: 7.2rem; line-height: 104%; letter-spacing: -.012em;
  /* Le titre suit son bloc au lieu de se donner une largeur à lui : à 100 rem
     il faisait 750 px dans un bloc de 720 et débordait des deux côtés. */
  width: 100%; text-wrap: balance;
  /* Une ombre longue et très diffuse, pas un contour : elle ne se voit pas,
     elle tient seulement le blanc au-dessus des reflets de la rivière. */
  text-shadow: 0 .3rem 4.5rem rgba(10, 6, 3, .62);
}
.d-hero--recit .b-block .hero-chapo {
  margin: 2.8rem auto 0; max-width: 64rem;
  font-family: "Jost"; font-weight: 400;
  font-size: 1.6rem; line-height: 170%;
  color: rgba(255, 255, 255, .82);
  /* Deux ombres, deux rôles : la large assoit le bloc sur la photo, la serrée
     tient chaque lettre. Mesuré : sous le chapô passent les arches rouges du
     pont, à 2,6:1 sur les pixels les plus clairs — une ombre diffuse n'y peut
     rien, elle s'étale ; une ombre de 0,8 rem colle au glyphe. */
  text-shadow: 0 .2rem 3rem rgba(10, 6, 3, .6), 0 0 .8rem rgba(10, 6, 3, .88);
  /* deux lignes dont la seconde faisait trois mots : on répartit */
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .d-hero--recit .b-block .hero-lieu::after { transform: none; transition: none; }
}

/* --- 2. La liste des moulins, qui dit enfin quelque chose ------------------
   ⚠️ Tout ce bloc est cloisonné derrière `.d-info-list.d-info-list--nomme`, et non posé
   sur `.d-info-list-2` : `notre-logement` porte LA MÊME liste, avec des
   libellés d'une seule ligne. Sans le modificateur, elle héritait d'un filet
   décalé de 1,3 rem (calé ici sur la première ligne d'un bloc de deux), de
   séparateurs qu'elle n'a jamais eus et de deux photos éteintes.

   La colonne de gauche fait 55,6 rem de large et 120 rem de haut, et elle ne
   portait que trois libellés d'une ligne : 28 rem de contenu dans 120 rem de
   colonne. Chaque entrée reçoit sa traduction et sa ligne.

   Les gloses restent TOUTES lisibles, y compris celles des entrées inactives.
   Le survol ne pilote que la photo et la couleur du nom — dégrader du texte
   courant sous le seuil de contraste pour « faire accordéon » aurait coûté
   à qui lit ce que ça aurait rapporté à qui survole. */
.d-info-list.d-info-list--nomme .b-info .chapeau {
  margin: 2.6rem 0 0; max-width: 47rem;
  font-family: "Jost"; font-weight: 400;
  font-size: 1.5rem; line-height: 175%;
  color: rgba(50, 32, 22, .82);
}
.d-info-list.d-info-list--nomme .liste-services { margin-top: 4.4rem; }
.d-info-list.d-info-list--nomme .liste-services li + li { border-top: 1px solid rgba(85, 55, 37, .17); }
.d-info-list.d-info-list--nomme .liste-services button {
  align-items: flex-start; padding: 2.6rem 0; font-size: inherit;
}
/* Le filet se cale sur la première ligne du nom, pas sur le milieu du bloc. */
.d-info-list.d-info-list--nomme .liste-services .filet { margin-top: 1.3rem; }
.d-info-list.d-info-list--nomme .liste-services .corps { display: block; min-width: 0; }
.d-info-list.d-info-list--nomme .liste-services .nom {
  display: block;
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.4rem; line-height: 130%; color: inherit;
}
.d-info-list.d-info-list--nomme .liste-services .glose {
  display: block; margin-top: .9rem; max-width: 43rem;
  font-family: "Jost"; font-weight: 400;
  font-size: 1.4rem; line-height: 175%;
  color: rgba(50, 32, 22, .82);
}
.d-info-list.d-info-list--nomme .liste-services .glose em { font-style: italic; color: var(--brun); }
/* La marque de la troisième entrée. C'est le bâtiment de la page : le dire
   ici évite au visiteur d'avoir à faire le rapprochement tout seul. */
.d-info-list.d-info-list--nomme .liste-services .jeton {
  display: inline-block; vertical-align: .22em; margin-left: 1.2rem;
  padding: .45rem 1.1rem .4rem; border-radius: 10rem;
  background-color: var(--brun); color: var(--blanc);
  font-family: "Jost"; font-size: 1.3rem; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
}
/* Sans anneau de focus, la liste au clavier ne montre rien — et c'est pour le
   clavier que ces libellés ont été faits `<button>` au départ. */
.d-info-list.d-info-list-2 .liste-services button:focus-visible {
  outline: 2px solid var(--or); outline-offset: .6rem; border-radius: .3rem;
}
/* Les deux photos repliées : elles étaient deux bandeaux de 15 vh à pleine
   lumière, qu'on lisait comme un défaut d'affichage. Éteintes, elles se
   lisent pour ce qu'elles sont — les deux autres, en attente. */
.d-info-list.d-info-list--nomme .img-media {
  transition: height 1s cubic-bezier(.645, .045, .355, 1), filter 1s cubic-bezier(.645, .045, .355, 1);
  filter: saturate(.5) brightness(.62);
}
.d-info-list.d-info-list--nomme.active-img-1 .img-media:nth-child(1),
.d-info-list.d-info-list--nomme.active-img-2 .img-media:nth-child(2),
.d-info-list.d-info-list--nomme.active-img-3 .img-media:nth-child(3) { filter: none; }

/* --- 3. Les planches d'archive (`planche`) --------------------------------
   Une carte postale et une photographie anciennes ne se traitent pas comme les
   photos du logement. Une photo d'aujourd'hui remplit son cadre : on la recadre
   sans rien lui prendre. Un document a un FORMAT, des bords, un titre imprimé
   et un grain — le rogner en plein cadre le change en papier peint, et lui
   retire précisément ce qui prouve qu'il est ancien.

   Les deux sont donc montrées ENTIÈRES, posées sur la crème, une ombre portée
   sous elles, et légendées. Elles ne sont jamais agrandies : c'est la règle qui
   décide de leur largeur, pas la mise en page. */
.planche { margin: 0; }
.planche .img-div {
  width: 100%; overflow: hidden; position: relative;
  border-radius: .3rem;
  background-color: rgba(50, 32, 22, .06);
  /* Une seule déclaration d'élévation : l'ombre, pas de filet en plus. */
  box-shadow: 0 1.8rem 4.4rem -1.4rem rgba(30, 18, 10, .34);
}
.planche picture { display: block; width: 100%; }
.planche img { display: block; width: 100%; height: auto; }
.planche figcaption {
  margin-top: 1.8rem;
  font-family: "Jost"; font-weight: 400;
  font-size: 1.3rem; line-height: 165%;
  color: rgba(50, 32, 22, .74);
  text-wrap: balance;
}

/* La carte postale, en ouverture. Le gabarit `d-intro-img` pose une vignette
   PORTRAIT de 30 × 40 rem recadrée en `cover` : elle aurait coupé le titre
   imprimé de la carte des deux côtés. On rend la boîte à l'image. */
.d-intro-img--archive .b-block > div .img-div {
  width: 66rem; height: auto; max-width: 100%; margin-inline: auto;
}
.d-intro-img--archive .b-block > div .img-div img { height: auto; object-fit: fill; }

/* ⭐ TOUTE planche suit son image (Manon, 10/09 : « attention au cadre de
   l'image ici »). Le gabarit `d-intro-img` impose une vignette de 30 × 40 rem,
   soit 3:4 ; la vue à vol d'oiseau est en 4:5. L'écart laissait une bande de
   19 px de fond teinté sous l'illustration — le liseré qu'on voyait.

   Pourquoi `object-fit: cover` ne l'avait pas rattrapé : l'image porte bien
   `height: 100%`, mais son parent est un `<picture>` sans hauteur définie, et
   un pourcentage n'a alors rien contre quoi se résoudre — il retombe sur
   `auto`. La règle paraissait donc appliquée sans l'être.

   On ne force pas la hauteur pour autant : `cover` recadrerait, et une planche
   se montre ENTIÈRE — c'est la règle posée plus haut. C'est la boîte qui cède,
   exactement comme pour la carte postale au-dessus. */
.d-intro-img .b-block > div .planche .img-div { height: auto; }
.d-intro-img .b-block > div .planche .img-div img { height: auto; object-fit: fill; }
.d-intro-img--archive .planche figcaption { max-width: 62rem; margin-inline: auto; }
/* Le surtitre suit la planche : il lui faut sa respiration à lui. */
.d-intro-img--archive .b-block .p-section { margin-top: 6rem; }

/* La photographie de la Würtzmühle, dans la colonne de texte. Le fichier fait
   522 px : la borne est EN PIXELS et non en rem, parce qu'elle vient du fichier
   et non de la mise en page — au-delà, on l'agrandirait et elle deviendrait
   molle sur les grands écrans. */
/* 42 rem, et non toute la colonne : la section fait exactement une fenêtre, et
   le texte de la Würtzmühle en occupe déjà les deux tiers. À pleine largeur, la
   planche poussait le surtitre sous l'en-tête. La borne en PIXELS reste, pour
   les très grands écrans : au-delà de 522 px on agrandirait le fichier. */
.d-img-info .b-text .planche--document { margin-top: 4.5rem; }
.d-img-info .b-text .planche--document .img-div { width: 42rem; max-width: 522px; }
.d-img-info .b-text .planche--document figcaption { max-width: 42rem; }

/* --- 4. La frise (`d-chrono`) ---------------------------------------------
   Une page d'histoire sans chronologie. Les dates étaient là, mais réparties
   en deux paquets de `b-kpis` au pied de deux colonnes de texte, à quatre
   écrans l'un de l'autre : impossible d'y voir que sept siècles séparent la
   canalisation des bras de la fin de la meunerie. Elles sont réunies ici.

   Grille de deux colonnes alignées sur la LIGNE DE BASE : le fait démarre sur
   le pied du chiffre, ce qui fait tenir une date de 4,8 rem et une phrase de
   1,6 rem sur le même rail sans qu'aucune ne flotte. */
.d-chrono { background-color: var(--beige); padding-block: 12rem; }
.d-chrono .container-fluid { max-width: 131.2rem; margin-inline: auto; }
.d-chrono .p-section {
  margin-bottom: 1rem; color: var(--or);
  font-family: "Jost"; font-size: 1.4rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .08em;
}
.d-chrono .b-intro .title {
  margin: 0; max-width: 78rem; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%;
}
.d-chrono .b-frise { margin: 7rem 0 0; padding: 0; }
.d-chrono .jalon {
  /* 21 rem. C'était 18, calé sur « Aujourd'hui » en Instrument Serif ; Garamond
     chasse plus large et le mot débordait de 11 px sur la colonne du fait.
     (30 rem, la première valeur, laissait 18 rem de vide entre le chiffre et sa
     phrase : l'œil perdait le lien entre les deux.) */
  display: grid; grid-template-columns: 21rem 1fr; gap: 4rem;
  align-items: baseline;
  padding-block: 2.8rem;
  border-top: 1px solid rgba(85, 55, 37, .2);
}
.d-chrono .jalon:last-child { border-bottom: 1px solid rgba(85, 55, 37, .2); }

/* ⭐ LA FRISE SE DÉROULE (Manon, 10/09 : « un petit effet d'animation pour un
   peu de vie »). Sept siècles qui arrivent d'un bloc, c'est un tableau ; qui
   arrivent l'un après l'autre, c'est une chronologie — le mouvement dit la
   même chose que le contenu.

   AUCUN JAVASCRIPT : l'observateur de `[data-fade]` pose déjà `.fade-animate`
   sur la liste quand elle entre dans la fenêtre. On s'y accroche et le retard
   se fait au `nth-child`. La date part d'un peu plus bas que sa phrase — six
   pixels d'écart, invisibles à l'arrêt, qui suffisent à donner de l'épaisseur
   au mouvement.
   ⚠️ La liste porte `fade-in` et non `fade-up` : deux translations empilées,
   celle du bloc et celle des lignes, se voyaient comme un glissement mou. */
.d-chrono .b-frise .jalon {
  opacity: 0; transform: translate3d(0, 1.6rem, 0);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}
.d-chrono .b-frise .jalon .date {
  transform: translate3d(0, .6rem, 0);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}
.d-chrono .b-frise.fade-animate .jalon,
.d-chrono .b-frise.fade-animate .jalon .date { opacity: 1; transform: none; }

/* Dix jalons, 80 ms d'écart : la cascade dure 0,8 s en tout — assez pour se
   lire, trop court pour qu'on attende la fin. */
.d-chrono .b-frise.fade-animate .jalon:nth-child(1),
.d-chrono .b-frise.fade-animate .jalon:nth-child(1) .date  { transition-delay: 0s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(2),
.d-chrono .b-frise.fade-animate .jalon:nth-child(2) .date  { transition-delay: .08s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(3),
.d-chrono .b-frise.fade-animate .jalon:nth-child(3) .date  { transition-delay: .16s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(4),
.d-chrono .b-frise.fade-animate .jalon:nth-child(4) .date  { transition-delay: .24s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(5),
.d-chrono .b-frise.fade-animate .jalon:nth-child(5) .date  { transition-delay: .32s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(6),
.d-chrono .b-frise.fade-animate .jalon:nth-child(6) .date  { transition-delay: .40s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(7),
.d-chrono .b-frise.fade-animate .jalon:nth-child(7) .date  { transition-delay: .48s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(8),
.d-chrono .b-frise.fade-animate .jalon:nth-child(8) .date  { transition-delay: .56s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(9),
.d-chrono .b-frise.fade-animate .jalon:nth-child(9) .date  { transition-delay: .64s; }
.d-chrono .b-frise.fade-animate .jalon:nth-child(10),
.d-chrono .b-frise.fade-animate .jalon:nth-child(10) .date { transition-delay: .72s; }

/* La même règle que le reste du site : qui demande moins de mouvement voit la
   frise entière, tout de suite, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .d-chrono .b-frise .jalon,
  .d-chrono .b-frise .jalon .date {
    opacity: 1; transform: none; transition: none;
  }
}
.d-chrono .jalon .date {
  margin: 0; color: var(--brun);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 4.8rem; line-height: 100%;
  /* Chasse fixe pour que la colonne s'aligne. On ne demande PAS `lining-nums` :
     EB Garamond dessine des chiffres elzéviriens — le 9 et le 4 descendent sous
     la ligne — et c'est exactement ce qu'on veut dans une chronologie composée
     en Garamond. Les redresser reviendrait à lui retirer sa raison d'être. */
  font-variant-numeric: tabular-nums;
}
.d-chrono .jalon .date sup { font-size: .52em; vertical-align: .62em; }
.d-chrono .jalon .fait {
  margin: 0; max-width: 70rem; color: var(--encre);
  font-family: "Jost"; font-weight: 400;
  font-size: 1.6rem; line-height: 175%;
}
/* La dernière ligne n'est pas une date : c'est l'arrivée. Elle change de voix
   — le fait passe en serif, comme les phrases qu'on garde. */
.d-chrono .jalon--ici { border-top-color: var(--brun); }
.d-chrono .jalon--ici .date { font-size: 3.6rem; color: var(--or); }
.d-chrono .jalon--ici .fait {
  font-family: var(--titre-affichage); font-size: 2.4rem; line-height: 145%;
  color: var(--brun);
}

/* ==========================================================================
   LA GALERIE

   Neuf liens « Galerie » pointaient sur une ancre `#galerie` qui n'a jamais
   été écrite : menu et pied des trois pages, plus le « voir toutes les photos »
   de l'accueil et la photo pleine largeur du logement. Ils mènent désormais ici.

   Le parti pris : les photos gardent LEUR format. Une galerie qui recadre tout
   en carrés range bien, mais elle ment sur les images — et ici les portraits
   (la fenêtre cintrée, les vasques, les portes) valent justement par leur
   hauteur. D'où des colonnes CSS plutôt qu'une grille : chaque photo tombe à
   sa proportion, personne n'est rogné.
   ========================================================================== */

/* --- Le bandeau d'ouverture ---------------------------------------------- */
/* ⭐ Manon, 30/08 : « un layout plus large, plus paysage, plus impactant comme
   sur le site de lasala + titre au milieu, pas justifié à gauche ».
   162 rem = 1 215 px à 1440, contre 984 avant : +23 %. La valeur n'est pas
   choisie au jugé — relevée sur la galerie de Lasala, leur mur tient dans
   1 207,6 px (quatre colonnes de 285, gouttières de 22,6, marges de 116,2 de
   chaque côté). On s'aligne dessus, et on garde trois colonnes : à cette
   largeur elles donnent 390 px par photo là où eux en ont 285. */
/* 27/09 : 21 rem en haut et non 15. L'en-tête fixe mesure 13 rem : à 15, le
   surtitre tombait à 18 px sous son filet — la page semblait commencer coincée. */
.d-galerie-tete { background-color: var(--creme); padding-block: 21rem 5rem; text-align: center; }
.d-galerie-tete .container-fluid { max-width: 162rem; margin-inline: auto; }
.d-galerie-tete .p-section {
  margin-bottom: 1rem; color: var(--or);
  font-family: "Jost"; font-size: 1.4rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .08em;
}
/* `margin-inline: auto` en plus de `text-align` : les deux blocs ont une
   largeur maximale (88 et 62 rem) et resteraient collés à gauche de leur
   conteneur, texte centré à l'intérieur d'une boîte décalée. */
.d-galerie-tete .title {
  margin: 0 auto; max-width: 88rem; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 4.6rem; line-height: 115%; text-wrap: balance;
}
/* ⭐ Cadre ÉLARGI et `balance` abandonné (Manon, 10/09 : « il faut que le cadre
   soit un peu plus large, la 1re ligne plus grande que la 2e »).
   `text-wrap: balance` égalise la longueur des lignes — c'est précisément ce
   qui donnait une seconde ligne plus longue que la première, un pied de
   paragraphe qui s'élargit sous le titre. `pretty` remplit la première ligne
   normalement et ne soigne que la dernière : la descente naturelle revient. */
.d-galerie-tete .chapeau {
  margin: 2.4rem auto 0; max-width: 74rem; text-wrap: pretty;
  font-family: "Jost"; font-size: 1.5rem; line-height: 175%;
  color: rgba(50, 32, 22, .78);
}

/* --- Les quatre sections -------------------------------------------------- */
/* Les quatre intros suivent le titre de page : un h1 centré au-dessus de
   quatre h2 restés à gauche se lit comme un oubli, pas comme un choix. */
.d-galerie { background-color: var(--creme); padding-block: 0 8rem; }
/* ⛔ 27/09 : le plancher de lisibilité (racine ≥ 9 px) a fait passer 162 rem de
   1 215 à 1 458 px, plus large que l'écran de 1440 : le mur touchait les deux
   bords, sans marge, alors que ses gouttières intérieures en avaient une.
   Bornée à la marge de l'en-tête (5,75 rem de chaque côté), la photo reste
   grande et le mur retrouve son cadre. */
.d-galerie .container-fluid { max-width: 162rem; margin-inline: auto; }
@media (min-width: 768px) { .d-galerie .container-fluid { max-width: min(162rem, calc(100% - 11.5rem)); } }
.d-galerie .b-intro { padding-bottom: 3rem; text-align: center; }
.d-galerie .p-section {
  margin-bottom: .8rem; color: var(--or);
  font-family: "Jost"; font-size: 1.4rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .08em;
}
.d-galerie .b-intro .title {
  margin: 0 auto; max-width: 70rem; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.8rem; line-height: 125%;
}

/* --- Le mur de photos -----------------------------------------------------
   ⚖️ `grid` et non plus `columns`. La maçonnerie laissait chaque photo à sa
   proportion — et le mur mélangeait des 3:2 couchées et des 2:3 debout, d'où
   des colonnes de hauteurs inégales et des trous en bas. Manon, 30/08 :
   « plus paysage, plus impactant ».

   ⚠️ CE QUE ÇA COÛTE, et c'est un vrai renoncement : les six photos verticales
   (la fenêtre cintrée, les vasques, les portes anciennes) perdent 55 % de leur
   hauteur au recadrage. Elles valaient précisément par là. C'est le prix d'un
   mur régulier, et il est assumé, pas ignoré.

   La lecture repart de gauche à droite, ce que la maçonnerie ne faisait pas.
   Gouttière de 3 rem = 22,5 px, la valeur relevée chez Lasala (22,6). */
.d-galerie .b-mur {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3rem; padding-inline: 0;
}
.d-galerie .vignette {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: zoom-in;
  border-radius: .4rem; overflow: hidden; position: relative;
}
.d-galerie .vignette img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .6s cubic-bezier(.215, .61, .355, 1), filter .6s ease;
}
/* Le survol : la photo avance à peine et s'éclaircit. Pas de voile, pas de
   texte par-dessus — sur un mur de vingt-huit images, un libellé au survol
   ferait clignoter la page à chaque passage de souris. */
.d-galerie .vignette:hover img,
.d-galerie .vignette:focus-visible img { transform: scale(1.03); filter: brightness(1.06); }
.d-galerie .vignette:focus-visible { outline: 2px solid var(--or); outline-offset: .5rem; }

/* --- Le rythme du mur (Manon, 26/09 : « améliore le design, pas grand chose à
   faire ») -----------------------------------------------------------------
   Toujours du PAYSAGE, jamais de portrait (30/08) : une grande photo couvre
   2 × 2 cases — elle reste en 3:2 —, une panoramique couvre toute la largeur
   sur deux rangs, soit ~2,25:1. Les deux sont placées pour que chaque mur
   tombe juste : 2 × 2 ajoute 3 cases, la panoramique 5. Logement 38 + 2×5
   + 2×3 = 54 ; l'eau 6 + 3 = 9 ; le quartier 19 + 5 + 3 = 27 — plus de
   dernière rangée à moitié vide. */
.d-galerie .b-mur { grid-auto-flow: row dense; }
.d-galerie .vignette--large { grid-column: span 2; grid-row: span 2; }
.d-galerie .vignette--pano  { grid-column: 1 / -1; grid-row: span 2; }
/* La photo d'une grande case ne doit PAS dimensionner la grille : en flux, une
   photo debout (800 × 1200) étirait ses deux rangs. Elle est posée en absolu,
   la case prend la hauteur des rangs voisins. La panoramique n'a pas de voisine
   sur ses rangs : elle porte donc sa propre proportion. */
.d-galerie .vignette--large img, .d-galerie .vignette--pano img { position: absolute; inset: 0; aspect-ratio: auto; }
.d-galerie .vignette--pano { aspect-ratio: 9 / 4; }

/* Le sommaire des trois murs, sous le lieu-dit. */
.galerie-sommaire { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin: 3.2rem 0 0; }
.galerie-sommaire a {
  display: inline-flex; align-items: baseline; gap: .8rem;
  padding: 1.5rem 2.8rem; border: 1px solid rgba(85, 55, 37, .22); border-radius: 99rem;
  font-family: "Jost"; font-size: 1.9rem; color: var(--encre);
  transition: background-color .25s, color .25s, border-color .25s;
}
.galerie-sommaire a span { font-family: var(--titre-affichage); font-size: 1.6rem; color: var(--or); }
.galerie-sommaire a:hover { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.galerie-sommaire a:hover span { color: var(--or-clair); }
.d-galerie-tete .galerie-sommaire + .chapeau { margin-top: 2.2rem; font-size: 1.6rem; color: rgba(50, 32, 22, .6); }

/* Des titres de mur qui s'affirment : plus grands, un filet or dessous. */
.d-galerie { scroll-margin-top: 10rem; }
.d-galerie .b-intro { padding-top: 4rem; padding-bottom: 4rem; }
.d-galerie .b-intro .title { font-size: 4.8rem; line-height: 115%; }
.d-galerie .b-intro .title::after { content: ""; display: block; width: 6rem; height: 1px; margin: 2.2rem auto 0; background: var(--or); }

/* En dessous de 992 px, le mur passe à deux puis une colonne : le rythme se
   retire, chaque photo reprend sa case. */
@media (max-width: 991px) {
  .d-galerie .vignette--large, .d-galerie .vignette--pano { grid-column: auto; grid-row: auto; }
  .d-galerie .vignette--large img, .d-galerie .vignette--pano img { position: static; aspect-ratio: 3 / 2; }
  .d-galerie .vignette--pano { aspect-ratio: auto; }
  .d-galerie .b-intro .title { font-size: 3rem; }
}

/* --- La visionneuse -------------------------------------------------------
   Un `<dialog>` natif, ouvert en modal : focus piégé, Échap, fond inerte.
   Le fond est le brun d'encre à 96 % — assez opaque pour que la photo soit
   seule, assez transparent pour qu'on sache d'où l'on vient. */
.visionneuse { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.visionneuse::backdrop { background-color: rgba(24, 15, 9, .96); }
.visionneuse__cadre {
  position: absolute; inset: 0;
  /* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` a pour taille minimale son
     CONTENU, donc elle grandit avec l'image au lieu de la contenir, et le
     `max-height: 100%` ci-dessous ne résout contre rien. Sans ce minmax, une
     photo en portrait sortait du cadre par le bas, légende comprise. */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  align-items: center; justify-items: center;
  padding: 8rem 10rem 6rem; gap: 2rem;
}
.visionneuse__img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: .4rem;
  box-shadow: 0 3rem 8rem -2rem rgba(0, 0, 0, .7);
}
.visionneuse__legende {
  margin: 0; max-width: 90rem; text-align: center;
  font-family: "Jost"; font-size: 1.4rem; line-height: 165%;
  color: rgba(245, 240, 234, .78);
}
.visionneuse__compteur {
  position: absolute; top: 3rem; left: 50%; transform: translateX(-50%);
  margin: 0; font-family: "Jost"; font-size: 1.3rem; letter-spacing: .12em;
  color: rgba(245, 240, 234, .6);
  font-variant-numeric: tabular-nums;
}

/* Les commandes. Les flèches réutilisent le masque `arrow-btn` du site ; la
   croix est DESSINÉE, comme le « + » des questions fréquentes — deux barres,
   pas de fichier de plus, et elle suit la couleur du texte. */
.visionneuse__nav, .visionneuse__fermer {
  position: absolute; display: grid; place-items: center;
  width: 5.6rem; height: 5.6rem; padding: 0;
  background: rgba(245, 240, 234, .08); border: 0; border-radius: 50%;
  color: var(--creme); cursor: pointer;
  transition: background-color .4s ease, transform .4s ease;
}
.visionneuse__nav:hover, .visionneuse__fermer:hover { background: rgba(245, 240, 234, .2); }
.visionneuse__nav:focus-visible, .visionneuse__fermer:focus-visible { outline: 2px solid var(--or-clair); outline-offset: .4rem; }
.visionneuse__nav { top: 50%; transform: translateY(-50%); }
.visionneuse__nav--prec { left: 2.4rem; }
.visionneuse__nav--suiv { right: 2.4rem; }
.visionneuse__nav .icons { width: 2rem; height: 2rem; background-color: currentColor; }
.visionneuse__nav--prec .icons { transform: rotate(180deg); }
.visionneuse__fermer { top: 2.4rem; right: 2.4rem; }
.visionneuse__fermer .croix { position: relative; width: 1.6rem; height: 1.6rem; display: block; }
.visionneuse__fermer .croix::before,
.visionneuse__fermer .croix::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px; margin-top: -.5px;
  background-color: currentColor;
}
.visionneuse__fermer .croix::before { transform: rotate(45deg); }
.visionneuse__fermer .croix::after  { transform: rotate(-45deg); }

/* --- L'en-tête sur un mur de photos ---------------------------------------
   Ailleurs sur le site, l'en-tête est transparent et le script bascule chaque
   jeton en brun ou en blanc selon la SECTION qu'il survole. Ici la méthode
   atteint sa limite : la section est bien crème, mais elle est recouverte de
   photos sur presque toute sa largeur — les jetons passaient donc en brun, et
   le brun sur une photo sombre ne se lit pas davantage que le blanc sur une
   photo claire. Avec vingt-huit images de tons imprévisibles, aucune bascule
   ne peut avoir raison.

   L'en-tête reçoit donc son propre fond, sur cette page seulement : crème
   pleine, fondu vers rien en bas. Sur le bandeau d'ouverture il est invisible
   (même crème) ; sur les photos il rend la barre lisible quoi qu'il y ait
   dessous. Il est posé en `::before` pour ne pas toucher au dessin de
   l'en-tête, qui est partagé avec les autres pages. */
/* 26/09 — Manon : « c'est un fondu et ça j'aime pas ». Le fondu crème de la
   galerie est retiré : le bandeau net commun (styles.css, « Le bandeau net »)
   fait le même travail — fond plein dès qu'on quitte la photo du héros. */

/* Le moteur de réservation n'a rien à faire par-dessus une photo en grand. */
body.visionneuse-ouverte .d-motor { opacity: 0; pointer-events: none; }

/* ==========================================================================
   SURCHARGES MOBILES — toutes ici, en fin de feuille.

   La leçon de la home (RAPPORT.md § 14, bug n° 2) : à spécificité égale c'est
   le dernier qui gagne. Un bloc de mise en page écrit APRÈS une media query
   la court-circuite en silence. On ne mélange donc pas.

   Le point de bascule est 767,98 px, celui de la référence, pas un rond.
   ========================================================================== */
@media (max-width: 767.98px) {

  .d-hero .b-block .hero-titre { font-size: 3.6rem; width: 100%; }

  /* La pile d'images disparaît : sur 390 px de large, trois photos empilées
     ne montrent plus rien. La référence fait le même choix (`no-mobile`). */
  .d-info-list.d-info-list-2 .b-img { display: none; }
  .d-info-list.d-info-list-2 .b-info { flex: 0 0 100%; max-width: 100%; }
  .d-info-list.d-info-list-2 .b-info > div { width: 100%; margin-inline: 0; }
  .d-info-list.d-info-list-2 { padding-top: 2.6rem; padding-bottom: 7.6rem; height: auto; }
  .d-info-list.d-info-list-2 .liste-services button { cursor: default; color: var(--brun); }
  .d-info-list.d-info-list-2 .liste-services .filet { width: 1.4rem; margin-right: 1.2rem; }

  /* Le ruban s'arrête de défiler et devient une grille centrée : une bande qui
     glisse sous le pouce se lit mal, et la référence l'arrête aussi. */
  .d-advantages.d-carousel-services { padding-block: 10rem; }
  .d-advantages.d-carousel-services .b-advs {
    animation: none; flex-wrap: wrap; width: 100%;
    gap: 4rem; row-gap: 3rem; justify-content: center;
  }
  .d-advantages.d-carousel-services .b-adv {
    flex-direction: column; text-align: center; padding: 0;
    max-width: 14.7rem; white-space: normal;
  }
  .d-advantages.d-carousel-services .b-adv span { order: 2; }
  .d-advantages.d-carousel-services .b-adv img {
    margin-inline: auto; margin-bottom: 2rem;
    width: 14.7rem; height: 8rem;
  }
  /* Le doublon qui sert à boucler l'animation n'a plus lieu d'être une fois
     l'animation arrêtée : il ferait six équipements affichés deux fois. */
  .d-advantages.d-carousel-services .b-adv.no-mobile { display: none; }

  .d-grid-rooms { padding-block: 5rem; }
  .d-grid-rooms .b-grid { margin-top: 3rem; }
  .d-grid-rooms .b-grid > div { gap: 5rem; }
  .d-grid-rooms .b-grid .b-col-6,
  .d-grid-rooms .b-grid .b-col-4 { width: 100%; }
  .d-grid-rooms .b-grid .b-col-6 .img-div,
  .d-grid-rooms .b-grid .b-col-4 .img-div { height: 33rem; }
  /* 35 et non 33 : la bannière est la seule à garder sa hauteur propre en
     mobile chez la référence, l'ordre de cascade lui donnant raison. */
  .d-grid-rooms .b-grid .b-banner .img-div,
  .d-grid-rooms .b-grid .b-banner .img-div img { height: 35rem; }
  .d-grid-rooms .b-grid .b-room {
    border-radius: .5rem; overflow: hidden;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .25);
  }
  .d-grid-rooms .b-grid .b-room .b-text { background-color: var(--blanc); padding: 2rem; }
  .d-grid-rooms .b-grid .img-div { border-radius: 0; }
  .d-grid-rooms .b-intro .title { font-size: 2.8rem; }

  .d-img-video-full .img-div { height: 50rem; }

  .d-capacite { padding-block: 4rem; }
  .d-capacite .b-capacite { gap: 3rem; row-gap: 2.8rem; justify-content: flex-start; padding-inline: 2rem; }
  /* Deux par rangée : le filet vertical n'a plus de sens — il tomberait au
     milieu de la 3e et de la 5e colonne, c'est-à-dire en tête de rangée. Le
     retrait latéral part avec lui, la demi-largeur suffit à séparer. */
  .d-capacite .item {
    flex: 0 0 calc(50% - 1.5rem);
    padding-inline: 0; border-left: 0;
  }
  .d-capacite .item p { font-size: 2.4rem; }
  .d-capacite .item p span { font-size: 1.15rem; letter-spacing: .12em; }

  /* La photo passe au-dessus du texte : à 390 px, une moitié d'écran par
     colonne ne montre ni l'une ni l'autre. C'est ce que fait la référence. */
  .d-img-info .b-block > div { display: block; }
  .d-img-info .b-img .img-div { height: 35rem; }
  .d-img-info .b-text { padding-inline: 2rem; padding-top: 5rem; padding-bottom: 10rem; }

  .d-intro-img { padding-block: 13.4rem; }
  .d-intro-img .b-block > div .img-div { height: 25rem; width: 20rem; }
  .d-intro-img .b-block > div .text-featured p { font-size: 2.4rem; padding-inline: 2rem; }
  .d-img-info .b-text .b-kpis > div { gap: 3rem; }
  .d-img-info .b-text .b-kpis .kpi p { max-width: 9.1rem; }
  .d-img-info .b-text .b-kpis .kpi p span { font-size: 4.2rem; }

  .d-3col-cards { padding-block: 6rem; overflow: hidden; }
  .d-3col-cards .b-block > div { display: block; }
  .d-3col-cards .b-card { padding: 3rem; }
  .d-3col-cards .b-card + .b-card { margin-top: 2rem; }

  /* --- La page histoire ---------------------------------------------------
     Le héros de récit : le bloc reste en bas, mais la pilule du moteur occupe
     78 % de la largeur à 3 rem du bord — on remonte au-dessus d'elle. */
  .d-hero--recit .b-block { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 100%; }
  .d-hero--recit .b-block .hero-titre { font-size: 3.6rem; width: 100%; letter-spacing: -.008em; }
  .d-hero--recit .b-block .hero-lieu { font-size: 1.2rem; letter-spacing: .26em; text-indent: .26em; }
  .d-hero--recit .b-block .hero-lieu::after { width: 5rem; margin-block: 1.4rem 2rem; }
  .d-hero--recit .b-block .hero-chapo { font-size: 1.5rem; margin-top: 2rem; padding-inline: 1rem; }
  /* Le halo s'élargit : à 390 px le titre fait trois lignes et le bloc occupe
     une bien plus grande part du cadre qu'en grand écran. */
  .d-hero--recit .img-div::before {
    background:
      radial-gradient(84% 40% at 50% 50%,
        rgba(16, 10, 6, .68) 0%, rgba(16, 10, 6, .48) 52%,
        rgba(16, 10, 6, .14) 82%, rgba(16, 10, 6, 0) 100%),
      linear-gradient(180deg, rgba(16, 10, 6, .42) 0%, rgba(16, 10, 6, 0) 18%),
      linear-gradient(0deg,   rgba(16, 10, 6, .48) 0%, rgba(16, 10, 6, 0) 16%);
  }

  /* Les planches d'archive prennent toute la largeur utile. */
  .d-intro-img--archive .b-block > div .img-div { width: 100%; }
  .d-intro-img--archive .b-block .p-section { margin-top: 4rem; }
  .planche figcaption { font-size: 1.35rem; margin-top: 1.4rem; }
  /* 42 rem valent 430 px sur un écran de 390 : la planche débordait le cadre.
     En mobile elle prend la largeur utile, comme la carte postale. */
  .d-img-info .b-text .planche--document { margin-top: 4rem; }
  .d-img-info .b-text .planche--document .img-div,
  .d-img-info .b-text .planche--document figcaption { width: 100%; max-width: 100%; }

  .d-info-list.d-info-list--nomme .b-info .chapeau { max-width: none; }
  .d-info-list.d-info-list--nomme .liste-services .glose { max-width: none; }
  .d-info-list.d-info-list--nomme .liste-services .nom { font-size: 2.1rem; }
  /* Le filet est allumé en permanence sur mobile (règle plus haut) : sans
     décalage il se posait au milieu du bloc, entre le nom et sa glose. */
  .d-info-list.d-info-list--nomme .liste-services .filet { margin-top: 1.1rem; }

  /* La frise passe en une colonne : la date au-dessus de son fait. Deux
     colonnes de 30 rem sur 390 px auraient laissé 12 caractères par ligne. */
  .d-chrono { padding-block: 6rem; }
  .d-chrono .b-intro .title { font-size: 2.8rem; }
  .d-chrono .b-frise { margin-top: 4rem; }
  .d-chrono .jalon { display: block; padding-block: 2.4rem; }
  .d-chrono .jalon .date { font-size: 4rem; margin-bottom: 1rem; }
  .d-chrono .jalon--ici .date { font-size: 3.2rem; }
  .d-chrono .jalon .fait { max-width: none; }
  .d-chrono .jalon--ici .fait { font-size: 2.1rem; }

  /* --- La galerie ---------------------------------------------------------
     Une seule colonne : à 390 px, deux colonnes donneraient des photos de
     18 rem de large, où l'on ne distingue plus rien. */
  /* 27/09 : 17 rem et non 11 — l'en-tête mobile mesure 133 px, le surtitre passait dessous. */
  .d-galerie-tete { padding-block: 17rem 5rem; }
  .d-galerie-tete .title { font-size: 3.2rem; }
  .d-galerie-tete .chapeau { font-size: 1.5rem; }
  .d-galerie { padding-bottom: 5rem; }
  .d-galerie .b-intro .title { font-size: 2.4rem; }
  .d-galerie .b-mur { grid-template-columns: 1fr; gap: 2rem; }
  .d-galerie .vignette { cursor: pointer; }

  /* La visionneuse au doigt : les flèches descendent en bas, sous la photo,
     là où le pouce les atteint — sur les côtés elles tombaient sous l'image. */
  .visionneuse__cadre { padding: 7rem 1.6rem 11rem; }
  .visionneuse__nav { top: auto; bottom: 2.4rem; transform: none; width: 5rem; height: 5rem; }
  .visionneuse__nav--prec { left: calc(50% - 6.4rem); }
  .visionneuse__nav--suiv { right: calc(50% - 6.4rem); }
  .visionneuse__legende { font-size: 1.35rem; }

  .d-faqs { padding-block: 10rem; }
  .d-faqs .b-block > div { gap: 0; }
  .d-faqs .b-title { width: 100%; }
  .d-faqs .b-faqs { width: 100%; max-width: none; margin-top: 4rem; }
  .d-faqs .b-title .title { font-size: 2.8rem; }
  .d-faqs .collapse-button { font-size: 2.1rem; line-height: 140%; padding-inline: 0; }
  .d-faqs .collapse-content > div { padding-inline: 0; }
  .d-faqs .collapse-content .text { max-width: none; }
  .d-faqs .collapse-content .text p, .d-faqs .collapse-content .text li { font-size: 1.7rem; }
}

/* Entre 768 et 1100 px, trois colonnes tombent à 21 rem : on passe à deux. */
@media (min-width: 768px) and (max-width: 1100px) {
  .d-galerie .b-mur { grid-template-columns: repeat(2, 1fr); }
}

/* --- La liste à image FIXE (`d-info-list--fixe`) --------------------------
   Manon, 30/08 : « une seule jolie photo à droite », sur la section « Ce
   qu'on touche » de `notre-logement` — et là seulement. Tout ce bloc est
   cloisonné derrière `--fixe` : `histoire` porte le MÊME gabarit avec sa
   liste des moulins, et son accordéon reste intact.

   Ce n'est pas une variante de l'accordéon, c'est son absence : plus de
   `active-img-*`, plus de transition de hauteur, plus d'état survolé. Une
   image qui remplit sa moitié, et trois libellés qui se lisent tous en même
   temps. */
.d-info-list.d-info-list--fixe .medias { height: 100%; }
.d-info-list.d-info-list--fixe .img-media {
  height: 100%;
  /* La transition de hauteur de l'accordéon n'a plus d'objet, et animer
     `height` coûtait un relayout à chaque image. */
  transition: none;
}
/* Le recadrage de la bâtisse, repris de `.d-img-info` : même sujet, même
   géométrie de panneau, donc même valeur. */
.d-info-list.d-info-list--fixe .img-media.cadre-batisse { object-position: 14% center; }

/* Les libellés ne sont plus des boutons : ils reprennent l'aplomb et le
   rythme que portait le `<button>`, sans le curseur ni l'état survolé. Le
   filet est ouvert sur les TROIS — c'était la marque de l'item actif, il
   devient la puce de la liste. */
.d-info-list.d-info-list--fixe .liste-services li {
  display: flex; align-items: center;
  padding: 2rem 0;
  font-family: var(--titre-affichage);
  font-size: 1.8rem; line-height: 140%;
  color: var(--brun);
}
.d-info-list.d-info-list--fixe .liste-services .filet {
  flex: 0 0 auto; width: 1.4rem; margin-right: 1.2rem;
  height: .13rem; background-color: currentColor;
  transition: none;
}

/* ⛔ `--nomme` ÉTEINT ses images — `filter: saturate(.5) brightness(.62)` — et
   ne les rallume que par `active-img-*`. En retirant cette classe pour figer
   la section, la photo unique serait restée grise et désaturée : le réglage
   qui servait à distinguer l'image active de ses deux voisines n'a plus
   d'objet quand il n'y a plus de voisines. */
.d-info-list.d-info-list--fixe .img-media { filter: none; }

/* La liste des moulins porte deux lignes par entrée — un nom et sa glose — là
   où « ce qu'on touche » n'en portait qu'une. Le `<li>` reprend donc l'aplomb
   que `--nomme` donnait à son `<button>` : aligné en haut, et non centré. */
.d-info-list.d-info-list--nomme.d-info-list--fixe .liste-services li {
  align-items: flex-start; padding: 2.6rem 0; font-size: inherit;
}

/* --- La bande de capacité, un cran au-dessus ------------------------------
   Manon, 30/08 : « ça un peu plus grand ». Le chiffre passe de 2,4 à 3,2 rem
   (18 → 24 px à 1440) et son libellé de 1,4 à 1,6. Le pictogramme suit :
   laissé à 2,4 rem, il devenait plus petit que le chiffre qu'il annonce. */
.d-capacite .item p { font-size: 3.2rem; }
.d-capacite .item p span { font-size: 1.6rem; }
.d-capacite .item .picto { width: 3.2rem; height: 3.2rem; }
.d-capacite .b-capacite { gap: 5rem; }

/* --- Les équipements : quatre cartes, et un titre -------------------------
   Manon, 30/08 : « sépare dormir et salle de bain » — la carte du milieu en
   fait deux, donc quatre. En ligne, quatre cartes dans 984 px tombent à
   219 px, dont 144 de texte une fois le retrait de 5 rem enlevé : illisible.
   On passe donc en DEUX RANGÉES DE DEUX, qui donnent 474 px par carte.

   `min-width: 768px` seulement : en dessous, la règle mobile existante
   (`display: block`, cartes empilées) doit continuer de gagner — et elle est
   moins spécifique que celle-ci, elle ne le ferait pas toute seule. */
@media (min-width: 768px) {
  .d-3col-cards.d-equipements .b-block > div {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem; max-width: 131.2rem; margin-inline: auto;
  }
}

/* ⭐ LES QUATRE SUR UNE LIGNE (Manon, 10/09 : « mets les 4 cases en ligne plus
   resserrées pour qu'ils rentrent tous sur l'écran en même temps »).

   Le 30/08 on avait renoncé au rang unique parce que quatre cartes dans
   131,2 rem tombaient à 29,2 rem, dont 19,2 de texte une fois les 5 rem de
   retrait ôtés des deux côtés — douze caractères par ligne. Le rang n'était
   pas la mauvaise idée : c'était le retrait qui mangeait tout.

   On reprend donc les trois mesures ensemble, sinon rien ne rentre :
   le conteneur s'élargit à 160 rem, l'écart tombe de 4,8 à 2,4, le retrait de
   5 à 3. Reste 34,8 rem par carte, dont 28,8 de texte — le double d'avant.
   Le corps descend d'un cran (1,6 → 1,5 rem) pour finir de payer la place.

   ⚠️ 1200 px SEULEMENT. Entre 768 et 1200, quatre colonnes redeviennent ces
   douze caractères par ligne : la grille 2 × 2 ci-dessus continue d'y régner.
   Et comme tout le site compte ses rem en `vw`, la proportion tient ensuite
   d'un écran à l'autre — ce n'est pas un réglage pour une seule taille. */
@media (min-width: 1200px) {
  .d-3col-cards.d-equipements .b-block > div {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem; max-width: 160rem;
  }
  .d-3col-cards.d-equipements .b-card { padding: 3rem; }
  .d-3col-cards.d-equipements .b-card .title { margin-bottom: 2.2rem; font-size: 2rem; }
  .d-3col-cards.d-equipements .b-card li { font-size: 1.5rem; line-height: 145%; gap: 1rem; }
  .d-3col-cards.d-equipements .b-card li + li { margin-top: 1.2rem; }
  .d-3col-cards.d-equipements .b-card li .picto { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
  .d-3col-cards.d-equipements .b-card ul { margin-bottom: 2.2rem; }
  .d-3col-cards.d-equipements .b-card .absents { padding-top: 1.8rem; font-size: 1.2rem; }
}

/* Le titre de section. Il reprend exactement le gabarit des autres intros de
   la page — sur-titre en or, titre serif — pour qu'il ne s'annonce pas comme
   une pièce rapportée. */
.d-3col-cards .b-intro { padding-bottom: 5rem; }
.d-3col-cards .b-intro .p-section {
  margin-bottom: 1rem; color: var(--or);
  font-family: "Jost"; font-size: 1.4rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .08em;
}
.d-3col-cards .b-intro .title {
  margin: 0; max-width: 70rem; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%;
}
@media (max-width: 767.98px) {
  .d-3col-cards .b-intro { padding-bottom: 3rem; }
  .d-3col-cards .b-intro .title { font-size: 2.8rem; }
}

/* --- « Le Moulin est-il fait pour vous ? » (`d-pour-vous`) ----------------
   L'encart du bruit, sur la page Infos pratiques. Deux cartes et non trois :
   la grille de base les met côte à côte à 50 % chacune, rien à faire de plus.

   Le chapô sous le titre de section n'existait pas dans ce gabarit — les
   autres intros de la page n'en portent pas. Il reprend le corps et la
   couleur de celui de `.d-galerie-tete`, pour rester dans la même voix. */
.d-3col-cards .b-intro .chapeau {
  margin: 2rem auto 0; max-width: 62rem; text-wrap: balance;
  font-family: "Jost"; font-size: 1.5rem; line-height: 175%;
  color: rgba(50, 32, 22, .78);
}
/* Les entrées n'ont pas de pictogramme ici — le jeu d'icônes du site n'a ni
   coche ni croix, et un glyphe Unicode à la place d'une icône se voit. Sans
   picto, le `gap` de 1,4 rem du `li` n'a plus rien à écarter : on le reprend
   en retrait de texte, pour que les lignes de deux lignes s'alignent. */
.d-pour-vous .b-card li { padding-left: 1.4rem; text-indent: -1.4rem; gap: 0; }

/* --- La bande de capacité, dessinée (25/09/2026) ------------------------------
   Manon : « un peu plus grand, et des images en mode homard ». Les pictogrammes
   laissent place à des vignettes à la plume (illustrations.js, VIGNETTES),
   posées par pages.js ; tout monte d'un cran. */
.d-capacite { padding-block: 8rem; }
.d-capacite .item .vignette { display: block; width: 9.6rem; aspect-ratio: 56 / 44; color: var(--encre); margin-bottom: .6rem; }
.d-capacite .item .vignette svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d-capacite .item p { font-size: 4.2rem; }
.d-capacite .item p span { font-size: 1.8rem; margin-top: 1.2rem; }
@media (max-width: 767.98px) {
  .d-capacite .item .vignette { width: 8rem; }
  .d-capacite .item p { font-size: 3rem; }
  .d-capacite .item p span { font-size: 1.3rem; }
}

/* --- Les cartes d'équipements, illustrées et plus larges (25/09/2026) ----------
   Manon : « plus beau, genre beaucoup plus beau, peut-être plus large…
   essentiellement des petites illus en haut ». Une vignette à la plume en tête
   de chaque carte (illustrations.js : cafetière, chevet, vasque, fauteuil),
   titre centré sous un filet ; le conteneur s'ouvre presque bord à bord. */
.d-3col-cards.d-equipements .b-card .vignette--carte {
  display: block; width: 15rem; aspect-ratio: 56 / 44; margin: .6rem auto 2.2rem; color: var(--creme);
}
.d-3col-cards.d-equipements .b-card .vignette--carte svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d-3col-cards.d-equipements .b-card .title {
  text-align: center; font-size: 2.6rem; padding-bottom: 2.2rem; margin-bottom: 2.8rem;
  border-bottom: 1px solid rgba(237, 228, 216, .2);
}
.d-3col-cards.d-equipements .b-card { border-radius: .4rem; }
@media (min-width: 1200px) {
  .d-3col-cards.d-equipements .container-fluid { max-width: none; padding-inline: 4rem; }
  .d-3col-cards.d-equipements .b-block > div { max-width: none; gap: 1.6rem; }
  .d-3col-cards.d-equipements .b-card { padding: 4.4rem 4rem 3.6rem; }
  .d-3col-cards.d-equipements .b-card .title { font-size: 2.6rem; margin-bottom: 2.8rem; }
  .d-3col-cards.d-equipements .b-card li { font-size: 1.6rem; gap: 1.2rem; }
  .d-3col-cards.d-equipements .b-card li + li { margin-top: 1.4rem; }
}
@media (max-width: 767.98px) {
  .d-3col-cards.d-equipements .b-card .vignette--carte { width: 13rem; }
}
/* Les lignes sans pictogramme (« Serviettes… », « Placard… », « Terrasse… ») s'alignent sur le texte des autres. */
.d-3col-cards.d-equipements .b-card li:not(:has(.picto)) { padding-left: 1.8rem; }   /* 3 rem mesurés moins 1,2 rem de marge déjà présente */

/* --- Bande de capacité sur téléphone (25/09/2026) -------------------------------
   Manon : « mets les textes au milieu, et la terrasse ne doit pas avoir un cadre
   aussi big ». Mesuré à 375 : une seule colonne calée à gauche. Deux colonnes
   centrées ; la terrasse, seule sur sa ligne, se centre sur toute la largeur
   avec une vignette de la même taille que les autres. */
@media (max-width: 767.98px) {
  .d-capacite .b-capacite {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4.4rem 2rem;
    justify-items: center; padding-inline: 2rem;
  }
  .d-capacite .item { flex: none; width: 100%; padding: 0; border: 0; align-items: center; text-align: center; }
  .d-capacite .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .d-capacite .item .vignette { width: 8rem; }
  .d-capacite .item p span { white-space: nowrap; }
  /* Et les intros de section, centrées elles aussi. */
  #smooth-content .b-intro, #smooth-content .b-intro .title, #smooth-content .b-intro .p-section { text-align: center; }
}

/* --- L'encart sur Williann, l'artiste de la fresque (26/09/2026) ----------------
   Photo de la fresque à gauche (grande, cadrée sur le mur peint), texte court à
   droite sur fond beige papier ; lien souligné vers son portfolio. */
.d-artiste {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
  background-color: var(--beige); background-image: var(--papier);
}
.d-artiste__photo { min-height: 56rem; overflow: hidden; }
.d-artiste__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; display: block; }
.d-artiste__texte { align-self: center; padding: 8rem clamp(4rem, 8vw, 14rem) 8rem clamp(4rem, 6vw, 10rem); max-width: 72rem; }
.d-artiste .p-section { font-family: "Jost"; font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); margin: 0 0 1.6rem; }
.d-artiste .title { font-family: var(--titre-affichage); font-weight: 400; font-size: 4rem; line-height: 1.15; letter-spacing: -.02em; color: var(--encre); margin: 0 0 2.8rem; }
.d-artiste p:not(.p-section):not(.d-artiste__lien) { font-family: "Jost"; font-size: 1.7rem; line-height: 1.65; color: rgba(50, 32, 22, .82); margin: 0 0 1.6rem; max-width: 46ch; }
.d-artiste__lien { margin: 3.2rem 0 0; }
.d-artiste__lien a { color: var(--encre); font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
@media (max-width: 767.98px) {
  .d-artiste { grid-template-columns: 1fr; }
  .d-artiste__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .d-artiste__texte { padding: 5rem 2rem 6rem; text-align: center; }
  .d-artiste p:not(.p-section):not(.d-artiste__lien) { margin-inline: auto; font-size: 1.5rem; }
  #smooth-content .d-artiste .title { font-size: 2.8rem; }
}

/* --- TEST : les titres des héros secondaires en calligraphie (26/09/2026) ------
   Manon : « les titres sur les héros secondaires (le logement, l'histoire…),
   on peut tester de les mettre en calligraphie ». Monsieur La Doulaise, celle
   de « aux Épices ». À taille égale l'anglaise paraît ~40 % plus petite et ses
   déliés sont très fins : corps × 1,7, mots plus espacés, ombre diffuse pour
   tenir sur la photo. Bloc isolé : le supprimer rend le Playfair. */
#smooth-content .d-hero .b-block .hero-titre {
  font-family: "Monsieur La Doulaise", cursive; font-weight: 400;
  font-size: 8rem; line-height: 1.08; letter-spacing: 0; word-spacing: .16em;
  text-shadow: 0 2px 22px rgba(20, 12, 8, .45), 0 0 2px rgba(20, 12, 8, .25);
}
#smooth-content .d-hero--recit .b-block .hero-titre { font-size: 11.5rem; line-height: 1.02; }
@media (max-width: 767.98px) {
  #smooth-content .d-hero .b-block .hero-titre, #smooth-content .d-hero--recit .b-block .hero-titre { font-size: 5.6rem; line-height: 1.1; }
}
/* Mesuré : boîte de 50 rem (375 px) → trois lignes, anglaise trop petite pour la photo. */
#smooth-content .d-hero .b-block .hero-titre { width: min(110rem, 92vw); font-size: 11rem; line-height: 1; }
#smooth-content .d-hero--recit .b-block .hero-titre { font-size: 12.5rem; }
@media (max-width: 767.98px) {
  #smooth-content .d-hero .b-block .hero-titre, #smooth-content .d-hero--recit .b-block .hero-titre { font-size: 6.4rem; width: 100%; }
}
/* Sur les photos claires (le logement), l'anglaise blanche a besoin d'une ombre plus nette. */
#smooth-content .d-hero .b-block .hero-titre { text-shadow: 0 2px 28px rgba(20, 12, 8, .6), 0 1px 3px rgba(20, 12, 8, .4); text-wrap: balance; }

/* --- L'aquarelle du quartier, page histoire (26/09/2026) ------------------------
   Pleine largeur sur le crème du papier : l'image a ses propres bords qui se
   fondent dans le blanc, on ne l'encadre pas. Légende courte dessous. */
.d-aquarelle { background: var(--creme); padding: 6rem 0 9rem; }
.d-aquarelle__figure { margin: 0; }
.d-aquarelle__figure img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.d-aquarelle figcaption { text-align: center; margin-top: 2.4rem; padding-inline: 2rem; }
.d-aquarelle .p-section { font-family: "Jost"; font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faience); margin: 0 0 .8rem; }
.d-aquarelle__legende { font-family: var(--titre-affichage); font-style: italic; font-size: 2rem; line-height: 1.4; color: rgba(50, 32, 22, .78); margin: 0; }
@media (max-width: 767.98px) { .d-aquarelle { padding: 3rem 0 6rem; } .d-aquarelle__legende { font-size: 1.6rem; } }

/* L'aquarelle « peinte sur la page » (Manon, 26/09 : « une meilleure couture sur
   les bords, comme si c'était peint direct sur la page, et plus petit »).
   - plus petite : 70 % de la largeur, 110 rem au plus, centrée ;
   - les bords : un masque qui fond l'image dans le papier sur les quatre côtés
     (deux dégradés croisés), et un second masque de bruit (SVG, feTurbulence)
     qui rend ce bord IRRÉGULIER, comme une aquarelle qui s'arrête d'elle-même ;
   - le blanc du papier peint disparaît par `multiply` dans le crème du site. */
.d-aquarelle__figure { width: min(110rem, 70vw); margin: 0 auto; }
.d-aquarelle__figure img {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Crect x='2.5' y='2.5' width='95' height='51' rx='4' fill='%23000' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Crect x='2.5' y='2.5' width='95' height='51' rx='4' fill='%23000' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent);
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect;
}
.d-aquarelle { padding: 5rem 0 8rem; }
.d-aquarelle figcaption { margin-top: 1.2rem; }
@media (max-width: 767.98px) { .d-aquarelle__figure { width: 100%; } }

/* --- Galerie au téléphone : deux colonnes (audit 26/09/2026) ----------------
   En une colonne, les 63 photos faisaient 18 500 px de défilement. Deux
   colonnes serrées divisent la page par deux ; le toucher ouvre la visionneuse
   plein écran, où l'on voit le détail. Les panoramiques gardent toute la largeur.
   ↩ Pour revenir à une colonne : supprimer ce bloc. */
@media (max-width: 767.98px) {
  .d-galerie .b-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .d-galerie .vignette--pano { grid-column: 1 / -1; }
  .d-galerie .vignette img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
  .d-galerie .vignette--pano img { aspect-ratio: 3 / 2; }
}

/* --- Pages légales (26/09/2026) : le gabarit des articles, en plus sobre. --- */
.d-legal { padding-bottom: 10rem; }
.d-legal .d-article__section { padding-top: 5rem; }
.d-legal .d-article__section .title { font-size: 2.8rem; margin-bottom: 1.6rem; }
.d-legal .text a { color: var(--brun); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; }