/* ==========================================================================
   LE BLOG DES ESCAPADES
   ==========================================================================
   Feuille à part, chargée uniquement par les pages d'escapades — elle n'a rien
   à faire dans les 300 ko que porte déjà chaque page du site.

   La grille reprend celle des pièces (`d-grid-rooms`) : même rythme, mêmes
   colonnes, même survol. Ce qui change est ce qu'une carte de blog porte en
   plus d'une carte de pièce — une rubrique, un chapô, un lien de lecture.
   ========================================================================== */

.d-escapades { padding-block: 0 10rem; background-color: var(--creme); }
.d-escapades .container-fluid { max-width: 162rem; margin-inline: auto; }
/* 27/09 : même dérive que la galerie — 162 rem = 1 458 px à 1440 depuis le
   plancher de 9 px, et les cartes arrivaient à 24 px du bord. */
@media (min-width: 768px) { .d-escapades .container-fluid { max-width: min(162rem, calc(100% - 11.5rem)); } }

.d-escapades .b-intro { padding-bottom: 4rem; text-align: center; }
.d-escapades .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-escapades .b-intro .title {
  margin: 0 auto; max-width: 70rem; color: var(--encre);
  font-family: var(--titre-affichage); font-weight: 400;
  font-size: 3.6rem; line-height: 120%; text-wrap: balance;
}

.d-escapades .b-grid > div { display: flex; gap: 4rem; flex-wrap: wrap; }
.d-escapades .b-col-6 { width: calc(50% - 2rem); }
.d-escapades .b-col-4 { width: calc(33.33333333% - 2.67rem); }

.d-escapades .b-escapade { display: block; position: relative; }
.d-escapades .img-div {
  width: 100%; height: 44rem; border-radius: .5rem;
  overflow: hidden; position: relative; display: block;
}
.d-escapades .b-col-6 .img-div { height: 49.6rem; }
.d-escapades picture { display: block; width: 100%; height: 100%; }
.d-escapades .img-div img {
  display: inline; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
/* Le survol ne s'arme que sur une carte qui MÈNE quelque part : une image qui
   bouge sous la souris promet un clic. Une carte en préparation n'en promet
   aucun, et son image ne bouge pas. */
.d-escapades .b-escapade:not(.b-escapade--brouillon):hover .img-div img { transform: scale(1.04); }

.d-escapades .b-text { padding: 2.4rem .4rem 0; }
.d-escapades .b-text .p-section {
  margin: 0 0 .8rem; color: var(--or);
  font-family: "Jost"; font-size: 1.3rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .1em;
}
.d-escapades .b-text .title {
  margin: 0; font-family: var(--titre-affichage); font-weight: 400;
  font-size: 2.6rem; line-height: 125%; color: var(--encre);
  text-wrap: balance;
}
.d-escapades .b-text .title a { color: inherit; text-decoration: none; }
.d-escapades .b-escapade:hover .b-text .title a { color: var(--or); }
.d-escapades .b-text .chapeau {
  margin: 1.2rem 0 0; max-width: 46rem;
  font-family: "Jost"; font-size: 1.5rem; line-height: 175%;
  color: rgba(50, 32, 22, .78);
}
.d-escapades .b-lire { margin: 1.8rem 0 0; }

/* La carte en préparation. Le gris est celui, chaud, déjà dérivé du brun pour
   la liste des moulins — c'est le seul gris du site, on ne lui en invente pas
   un second. Pas de bouton, pas de curseur : rien n'est cliquable, et rien ne
   prétend l'être. */
.d-escapades .b-escapade--brouillon .img-div img { filter: saturate(.45) brightness(.92); }
.d-escapades .b-escapade--brouillon .b-text .title { color: var(--gris-chaud); }
.d-escapades .b-bientot {
  margin: 1.8rem 0 0;
  font-family: "Jost"; font-size: 1.3rem; line-height: 140%;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris-chaud);
}
.d-escapades--brouillons { padding-top: 2rem; }

/* Le retour en bas d'un article. */
.d-retour { background-color: var(--creme); padding-block: 0 10rem; text-align: center; }
.d-retour .container-fluid { max-width: 131.2rem; margin-inline: auto; }
.d-retour p { margin: 0; font-family: "Jost"; font-size: 1.5rem; }

@media (max-width: 991px) {
  .d-escapades .b-col-6, .d-escapades .b-col-4 { width: calc(50% - 2rem); }
}
@media (max-width: 767.98px) {
  .d-escapades { padding-bottom: 6rem; }
  .d-escapades .b-grid > div { gap: 4rem; }
  .d-escapades .b-col-6, .d-escapades .b-col-4 { width: 100%; }
  .d-escapades .img-div, .d-escapades .b-col-6 .img-div { height: 30rem; }
  .d-escapades .b-intro .title { font-size: 2.8rem; }
  .d-escapades .b-text .title { font-size: 2.4rem; }
  .d-retour { padding-bottom: 6rem; }
}

/* --- La une ---------------------------------------------------------------
   La première escapade publiée tient toute la largeur : photo à gauche, texte
   à droite, centré dans sa hauteur. Avec une seule escapade publiée, une carte
   à 50 % laissait la moitié droite vide — un vide que rien n'explique se lit
   comme une panne. */
.d-escapades .b-escapade--une {
  width: 100%; display: grid; grid-template-columns: 62% 1fr;
  gap: 0 5rem; align-items: center;
}
.d-escapades .b-escapade--une .img-div { height: 52rem; }
.d-escapades .b-escapade--une .b-text { padding: 0; }
.d-escapades .b-escapade--une .b-text .title { font-size: 3.4rem; }
.d-escapades .b-escapade--une .b-text .chapeau { font-size: 1.6rem; max-width: 40rem; }

@media (max-width: 991px) {
  .d-escapades .b-escapade--une { grid-template-columns: 1fr; gap: 0; }
  .d-escapades .b-escapade--une .img-div { height: 40rem; }
  .d-escapades .b-escapade--une .b-text { padding: 2.4rem .4rem 0; }
  .d-escapades .b-escapade--une .b-text .title { font-size: 2.8rem; }
}
@media (max-width: 767.98px) {
  .d-escapades .b-escapade--une .img-div { height: 30rem; }
  .d-escapades .b-escapade--une .b-text .title { font-size: 2.4rem; }
}

/* --- Les brouillons en jeu de cartes --------------------------------------
   Manon, 10/09 : « les autres escapades, présente-les un peu plus comme un jeu
   de cartes comme sur la home ». La une, elle, reste épinglée en haut et en
   grand — c'est le règlement au-dessus, on n'y touche pas.

   Ce qui n'allait pas : les quatre brouillons héritaient de `b-col-6` et
   `b-col-4`, donc une carte large puis trois étroites, en photos PAYSAGE de
   44 rem de haut. Quatre sujets de même statut — tous « en préparation » —
   affichés à trois tailles différentes : la mise en page annonçait une
   hiérarchie qui n'existe pas. Et sans fond, une photo posée sur la crème
   n'est pas une carte, c'est une image.

   On reprend donc la carte du carrousel de l'accueil — proportion PORTRAIT,
   photo qui remplit, titre aligné sur son bord gauche — et on lui ajoute ce
   qu'il faut pour qu'elle se lise comme une carte à jouer : un corps blanc,
   un rayon, une ombre basse. Quatre colonnes égales, puisque les quatre
   sujets le sont.

   ⚠️ AUCUN survol qui promet un clic : ces cartes ne mènent nulle part tant
   que l'article n'est pas écrit. Elles ne se soulèvent pas, ne changent pas
   de couleur, ne prennent pas le curseur — la règle posée plus haut pour
   `--brouillon` vaut toujours, on ne fait que l'habiller. */
.d-escapades--brouillons .b-grid > div {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3rem; flex-wrap: nowrap;
}
.d-escapades .b-col-3 { width: auto; }

.d-escapades--brouillons .b-escapade--brouillon {
  display: flex; flex-direction: column;
  background: var(--blanc); border-radius: .8rem; overflow: hidden;
  box-shadow: 0 1.2rem 3.2rem -1.6rem rgba(30, 18, 10, .22);
}
/* La photo passe en portrait et perd son rayon propre : c'est la carte qui
   porte le rayon maintenant, et deux arrondis emboîtés se voient. */
.d-escapades--brouillons .b-escapade--brouillon .img-div {
  height: 30rem; border-radius: 0; flex: 0 0 auto;
}
.d-escapades--brouillons .b-escapade--brouillon .b-text {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 2.4rem 2.4rem 2.6rem;
}
.d-escapades--brouillons .b-escapade--brouillon .b-text .title { font-size: 2.1rem; }
.d-escapades--brouillons .b-escapade--brouillon .chapeau {
  margin-top: 1rem; max-width: none; font-size: 1.4rem; line-height: 165%;
}
/* « En préparation » se cale EN BAS de la carte : les quatre chapôs n'ont pas
   la même longueur, et sans ça la mention flottait à quatre hauteurs. */
.d-escapades--brouillons .b-escapade--brouillon .b-bientot {
  margin-top: auto; padding-top: 2rem;
}

@media (max-width: 991px) {
  .d-escapades--brouillons .b-grid > div { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .d-escapades--brouillons .b-grid > div { grid-template-columns: 1fr; gap: 2.4rem; }
  .d-escapades--brouillons .b-escapade--brouillon .img-div { height: 24rem; }
}

/* --- « Lire aussi », le pied d'un article ---------------------------------
   Même carte que l'index, en plus petit et en trois colonnes : rien de neuf à
   apprendre pour le lecteur, c'est le même objet à une autre échelle.

   Le filet au-dessus du titre n'est pas décoratif — il dit où l'ARTICLE
   s'arrête. Sans lui, trois photos posées sur la même crème que la dernière
   section se lisaient comme une sixième section de l'article. C'est la
   hairline déjà employée par la chronologie et les listes de services ; on ne
   lui invente pas une seconde valeur.

   L'écart passe de 4 à 3 rem : trois colonnes au lieu de deux, sur la même
   largeur de page. La soustraction du calc suit le gap — 2/3 de 3 rem — sans
   quoi la troisième carte passe à la ligne. */
/* ⚠️ Le filet est porté par `.b-intro`, pas par la section : la marge qui le
   détache de l'article se met donc EN HAUT DE SECTION. Mesuré sans elle, le
   trait tombait à 0 px du bas de la dernière photo — collé à l'image, il ne
   séparait plus rien. */
.d-escapades--aussi { padding-block: 9rem 5rem; }
.d-escapades--aussi .b-intro {
  padding-top: 6rem; padding-bottom: 3.6rem;
  border-top: 1px solid rgba(85, 55, 37, .2);
}
.d-escapades--aussi .b-intro .title { font-size: 2.8rem; }
.d-escapades--aussi .b-grid > div { gap: 3rem; }
.d-escapades--aussi .b-col-4 { width: calc(33.33333333% - 2rem); }
.d-escapades--aussi .img-div { height: 28rem; }
.d-escapades--aussi .b-text { padding-top: 2rem; }
.d-escapades--aussi .b-text .title { font-size: 2.1rem; }
.d-escapades--aussi .b-text .chapeau { margin-top: 1rem; font-size: 1.4rem; line-height: 165%; }
.d-escapades--aussi .b-lire { margin-top: 1.4rem; }

@media (max-width: 991px) {
  .d-escapades--aussi .b-col-4 { width: calc(50% - 1.5rem); }
}
@media (max-width: 767.98px) {
  .d-escapades--aussi { padding-block: 6rem 3rem; }
  .d-escapades--aussi .b-intro { padding-top: 4rem; }
  .d-escapades--aussi .b-intro .title { font-size: 2.4rem; }
  .d-escapades--aussi .b-col-4 { width: 100%; }
  .d-escapades--aussi .img-div { height: 24rem; }
}

/* --- Les liens DANS le texte d'un article ---------------------------------
   Mesuré sur « où manger » : les sept liens vers les restaurants sortaient
   exactement de la couleur du paragraphe — `rgb(50,32,22)` de part et d'autre,
   aucun soulignement — à cause du `a { color: inherit; text-decoration: none }`
   global de styles.css, écrit pour les liens-blocs (cartes, bannières). Dans
   un article dont l'intérêt EST de mener au site du restaurant, un lien qu'on
   ne voit pas ne fait rien.

   L'or, soulignement compris, et un trait d'abord pâle qui se remplit au
   survol : c'est déjà la mécanique de `btn-underline`, on ne lui invente pas
   une seconde grammaire. Règle limitée au corps de l'article — les liens-blocs
   des cartes, eux, n'ont rien à porter. */
.d-img-info .text a {
  color: var(--or);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(155, 116, 74, .4);
  text-underline-offset: .25em;
  transition: text-decoration-color .3s ease-in-out;
}
.d-img-info .text a:hover { text-decoration-color: var(--or); }

/* ==========================================================================
   L'ARTICLE EN LONG FORMAT (26/09/2026)
   ==========================================================================
   Manon : « le layout est un peu ripou ». Les sections étaient des blocs
   `d-img-info` de 900 px, moitié photo moitié texte, avec des demi-écrans
   vides quand la photo manquait. Ici : une ouverture (fil d'Ariane, chapô,
   date, sommaire, illustration à la plume), puis une colonne de lecture
   numérotée, les photos en figures larges, un encart « Dormir au Moulin ». */
.d-article-tete { background: var(--creme); padding: 9rem 3rem 4rem; }
.d-article-tete__grille { max-width: 118rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8rem; align-items: center; }
.d-ariane { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .06em; color: var(--gris-chaud); margin-bottom: 3.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.d-ariane a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(138, 122, 108, .4); }
.d-ariane a:hover { color: var(--encre); }
.d-ariane [aria-current] { color: var(--encre); }
.d-article-chapo { font-family: var(--titre-affichage); font-size: 3rem; line-height: 1.35; color: var(--encre); margin: 0 0 2rem; text-wrap: pretty; }
.d-article-meta { font-family: "Jost"; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-chaud); margin: 0 0 4rem; }
.d-article-sommaire { border-top: 1px solid rgba(50, 32, 22, .14); padding-top: 2.4rem; }
.d-article-sommaire .p-section { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faience); margin: 0 0 1.4rem; }
.d-article-sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 1rem; }
.d-article-sommaire li { counter-increment: s; display: flex; gap: 1.4rem; align-items: baseline; }
.d-article-sommaire li::before { content: counter(s, decimal-leading-zero); font-family: var(--titre-affichage); font-style: italic; font-size: 1.5rem; color: var(--faience); }
.d-article-sommaire a { font-family: var(--titre-affichage); font-size: 1.9rem; line-height: 1.35; color: var(--encre); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; }
.d-article-sommaire a:hover { background-size: 100% 1px; }
.d-article-tete__illus { color: var(--encre); display: flex; justify-content: center; }
.vignette--article { display: block; width: min(34rem, 100%); aspect-ratio: 1; }
.vignette--article svg { width: 100%; height: 100%; display: block; overflow: visible; }

.d-article { background: var(--creme); padding: 2rem 3rem 6rem; }
.d-article__section { max-width: 118rem; margin: 0 auto; padding: 7rem 0 0; scroll-margin-top: 10rem; }
.d-article__col { max-width: 68rem; margin: 0 auto; }
.d-article__section .p-section { display: flex; align-items: baseline; gap: 1.4rem; font-family: "Jost"; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faience); margin: 0 0 1.4rem; }
.d-article__num { font-family: var(--titre-affichage); font-style: italic; font-size: 1.8rem; letter-spacing: 0; text-transform: none; color: var(--faience); }
.d-article__section .title { font-family: var(--titre-affichage); font-weight: 400; font-size: 3.8rem; line-height: 1.18; letter-spacing: -.015em; color: var(--encre); margin: 0 0 2.6rem; text-wrap: balance; }
.d-article__section .text p { font-family: "Jost"; font-size: 1.75rem; line-height: 1.75; color: rgba(50, 32, 22, .86); margin: 0 0 1.8rem; }
.d-article__section .text strong { color: var(--encre); font-weight: 500; }
.d-article__section .text a { color: var(--faience); text-underline-offset: .25em; }
.d-article__figure { margin: 4.4rem auto 0; max-width: 104rem; }
.d-article__figure picture, .d-article__figure img { display: block; width: 100%; }
/* Chaque photo à son format : un 16/9 imposé coupait les photos en hauteur
   (la flèche de la cathédrale) et rognait le haut et le bas des autres (26/10). */
.d-article__figure img { height: auto; border-radius: .3rem; }
.d-article__figure--portrait { max-width: 56rem; }
.d-article__photo-a-trouver { margin: 2.4rem 0 0; }
.d-article__photo-a-trouver .a-remplir { display: inline-block; font-size: 1.2rem; line-height: 1.5; }

.d-article-sejour { background: var(--creme); padding: 4rem 3rem 10rem; }
.d-article-sejour__carte { max-width: 72rem; margin: 0 auto; text-align: center; background: var(--encre); color: var(--creme); padding: 5rem 5rem 4.6rem; border-radius: .3rem; }
.d-article-sejour .vignette--rangee { display: block; width: min(30rem, 80%); aspect-ratio: 196 / 100; margin: 0 auto 2.4rem; color: var(--creme); }
.d-article-sejour .vignette--rangee svg { width: 100%; height: 100%; display: block; overflow: visible; }
.d-article-sejour .p-section { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; color: var(--volets); margin: 0 0 1.2rem; }
.d-article-sejour__titre { font-family: var(--titre-affichage); font-size: 3rem; line-height: 1.25; margin: 0 0 1.4rem; text-wrap: balance; }
.d-article-sejour__texte { font-family: "Jost"; font-size: 1.6rem; line-height: 1.65; color: rgba(245, 240, 234, .82); margin: 0 auto 2.6rem; max-width: 48ch; }
.d-article-sejour__liens { display: flex; justify-content: center; gap: 3.2rem; flex-wrap: wrap; margin: 0; }
.d-article-sejour__liens a { color: var(--creme); }

@media (max-width: 767.98px) {
  .d-article-tete { padding: 6rem 2rem 2rem; }
  .d-article-tete__grille { grid-template-columns: 1fr; gap: 3rem; }
  .d-article-tete__illus { order: -1; }
  .vignette--article { width: 18rem; }
  .d-article-chapo { font-size: 2.2rem; }
  .d-article { padding: 0 2rem 4rem; }
  .d-article__section { padding-top: 5rem; }
  #smooth-content .d-article__section .title { font-size: 2.6rem; }
  .d-article__section .text p { font-size: 1.6rem; }
  .d-article__figure { margin-top: 3rem; margin-inline: -2rem; }
  .d-article__figure img { border-radius: 0; }
  .d-article-sejour { padding: 2rem 2rem 7rem; }
  .d-article-sejour__carte { padding: 4rem 2.4rem; }
  .d-article-sejour__titre { font-size: 2.3rem; }
}

/* ==========================================================================
   L'INDEX, EN PLUS BEAU (26/09/2026)
   ==========================================================================
   Manon, après trois pistes refusées : « laisse comme avant mais en plus
   beau ». Même page — la une, puis la grille — avec :
     · la frise « une journée depuis le Moulin » sous le titre ;
     · le doublon de titre retiré (« Les escapades / À lire avant de venir »
       répétait le h1 à 20 cm de distance) ;
     · des photos au format 3:2 plutôt qu'à hauteur fixe, la colonne de droite
       décalée d'un demi-rythme — c'est ce qui sort la grille du catalogue ;
     · sur chaque carte : la rubrique, le temps de lecture (compté, pas
       estimé), et « Lire l'escapade → ». */

/* --- La frise ------------------------------------------------------------ */
.d-galerie-tete .b-frise { margin-top: 7rem; text-align: left; }
.b-frise__titre {
  margin: 0 0 1rem; text-align: center; color: var(--gris-chaud);
  font-family: "Jost"; font-size: 1.25rem; letter-spacing: .16em; text-transform: uppercase;
}
.b-frise__defile { max-width: 140rem; margin: 0 auto; }
.b-frise__trait { position: relative; height: 40rem; }   /* ce qui passe SOUS le trait descend de ~19 rem : 30 rem le coupait */
.b-frise__trait::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(155, 116, 74, .15), var(--or) 18%, var(--or) 62%, var(--encre));
}
.b-frise__heure {
  position: absolute; top: calc(50% + 1.8rem); transform: translateX(-50%); white-space: nowrap;
  font-family: "Jost"; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-chaud);
}
.b-frise__heure.haut { top: auto; bottom: calc(50% + 1.8rem); }
.b-frise__point {
  position: absolute; top: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 1.8rem; color: var(--encre); text-decoration: none;
}
.b-frise__point::after {
  content: ""; position: absolute; bottom: -.5rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 0 .4rem var(--creme); transition: transform .3s;
}
.b-frise__point .vignette { display: block; width: 11rem; height: 9rem; color: var(--encre); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.b-frise__point .vignette svg { width: 100%; height: 100%; display: block; overflow: visible; }
.b-frise__nom {
  margin-top: .8rem; white-space: nowrap;
  font-family: var(--titre-affichage); font-size: 1.7rem; color: var(--encre);
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
  padding-bottom: .2rem; transition: background-size .35s ease, color .3s;
}
.b-frise__point:hover .vignette, .b-frise__point:focus-visible .vignette { transform: translateY(-.6rem); }
.b-frise__point:hover .b-frise__nom, .b-frise__point:focus-visible .b-frise__nom { background-size: 100% 1px; color: var(--brun); }
.b-frise__point:hover::after { transform: scale(1.4); }
/* Un point sur deux passe SOUS le trait : la frise tient sur une ligne sans
   que deux étiquettes voisines se chevauchent. */
.b-frise__point.bas { transform: translate(-50%, 5.4rem); flex-direction: column-reverse; padding: 1.8rem 0 0; }
.b-frise__point.bas .b-frise__nom { margin: 0 0 .8rem; }
.b-frise__point.bas::after { bottom: auto; top: -5.9rem; }

/* --- La grille de l'index ------------------------------------------------ */
.d-escapades--index { padding-bottom: 18rem; }
.d-escapades--index .b-grid > div {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9rem 6rem;
}
.d-escapades--index .b-col-6 { width: auto; }
.d-escapades--index .b-escapade--une { grid-column: 1 / -1; margin-bottom: 3rem; }
/* La colonne de droite descend d'un demi-rythme. Un décalage et non une
   marge : la marge étirerait la RANGÉE, et la carte de gauche suivante
   descendrait avec. Le bas de section rattrape ces 10 rem.
   ⚠️ `translate` et PAS `transform` : l'apparition au défilement (data-fade)
   écrit son propre `transform` en ligne et écrasait le décalage — mesuré,
   les deux colonnes restaient alignées. Les deux propriétés se cumulent. */
.d-escapades--index .b-col-6:nth-child(odd) { translate: 0 10rem; }
.d-escapades--index .container-fluid { padding-inline: 4rem; }

.d-escapades--index .img-div,
.d-escapades--index .b-col-6 .img-div { height: auto; aspect-ratio: 3 / 2; border-radius: .6rem; }
.d-escapades--index .b-escapade--une .img-div { height: auto; aspect-ratio: 16 / 11; }
.d-escapades--index .img-div::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 18, 10, 0) 60%, rgba(30, 18, 10, .18));
  opacity: 0; transition: opacity .5s;
}
.d-escapades--index .b-escapade:hover .img-div::after { opacity: 1; }
.d-escapades--index .b-escapade:hover .img-div img { transform: scale(1.035); }
.d-escapades--index .img-div img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }

.d-escapades--index .b-text { padding-top: 2.8rem; }
.d-escapades--index .b-text .title { font-size: 3rem; line-height: 1.18; letter-spacing: -.01em; }
.d-escapades--index .b-escapade--une .b-text .title { font-size: 4.6rem; line-height: 1.08; letter-spacing: -.02em; }
.d-escapades--index .b-escapade--une .b-text .chapeau { font-size: 1.7rem; max-width: 42rem; margin-top: 2rem; }
.d-escapades--index .b-escapade--une .b-lire { margin-top: 3.2rem; }

/* --- La ligne de rubrique, et le lien (index ET « Lire aussi ») ---------- */
.d-escapades .b-text .p-section { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.d-escapades .b-duree { color: var(--gris-chaud); letter-spacing: .08em; }
.d-escapades .b-duree::before { content: "·"; margin-right: 1.2rem; color: rgba(138, 122, 108, .6); }
.d-escapades .b-une {
  color: var(--creme); background: var(--encre); border-radius: 10rem;
  padding: .5rem 1.1rem; letter-spacing: .12em; font-size: 1.1rem;
}
.d-escapades .b-text .title a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s ease, color .3s;
}
.d-escapades .b-escapade:hover .b-text .title a { color: var(--encre); background-size: 100% 1px; }
.d-escapades .b-lire .btn-underline { display: inline-flex; align-items: center; gap: .8rem; }
.d-escapades .b-fleche { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.d-escapades .b-escapade:hover .b-fleche { transform: translateX(.6rem); }

@media (max-width: 991px) {
  .d-escapades--index .b-grid > div { gap: 6rem 3rem; }
  .d-escapades--index .b-escapade--une .b-text .title { font-size: 3.4rem; }
  .d-escapades--index .b-text .title { font-size: 2.5rem; }
}
@media (max-width: 767.98px) {
  /* Sur téléphone, la frise garde sa largeur et défile de côté : écrasée à
     375 px, cinq dessins et cinq étiquettes se recouvraient. */
  .d-galerie-tete .b-frise { margin-top: 4rem; }
  /* 27/09 : bord à bord EXACT (-8 → 398 px mesuré à 390 avec -1,5 rem) ; le trait se coupait au bord droit. */
  .b-frise__defile { overflow-x: auto; margin-inline: calc(50% - 50vw); padding-inline: 2rem; scrollbar-width: none; }
  .b-frise__defile::-webkit-scrollbar { display: none; }
  .b-frise__trait { width: 88rem; height: 36rem; }
  .b-frise__point .vignette { width: 9rem; height: 7.4rem; }
  .d-escapades--index { padding-bottom: 6rem; }
  .d-escapades--index .b-grid > div { grid-template-columns: 1fr; gap: 5rem; }
  .d-escapades--index .b-col-6:nth-child(odd) { translate: none; }
  .d-escapades--index .container-fluid { padding-inline: 2rem; }
  .d-escapades--index .b-escapade--une { margin-bottom: 0; }
  .d-escapades--index .b-escapade--une .b-text .title { font-size: 2.8rem; }
  .d-escapades--index .b-text .title { font-size: 2.4rem; }
}