/* =========================================================================
   BELLE ADRESSE : vocabulaire de composition

   Le reproche etait juste : la charte servait de palette et de pictogrammes,
   pas de direction artistique. Ce fichier reprend les PROCEDES de la charte
   et en fait des outils de mise en page.

   p.11  six degrades verticaux, jamais utilises jusqu'ici
   p.15  le cadre bordeaux qui contient un bloc editorial, referme en Caveat
   p.17  le monogramme et le sceau comme signes de reconnaissance, en grand
   p.21  l'univers photographique : lieux lumineux, un seul accent par image
   p.22  l'affiche pleine image, le collage photo-sur-paysage,
         et le mot barre corrige a la main
   p.23  les objets de l'accueil : sceau de cire, livret, etiquette
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Les six degrades de la page 11

   Ce sont les associations colorimetriques de la charte, bornes comprises.
   Elles remplacent les aplats : une section n'est plus « rose » ou « beige »,
   elle passe d'une couleur a une autre.
   ------------------------------------------------------------------------- */
.ba-degrade-1 { background: linear-gradient(180deg, var(--ba-beige-poudre) 0%, var(--ba-rouge-velours) 100%); }
.ba-degrade-2 { background: linear-gradient(180deg, var(--ba-rose-signature) 0%, var(--ba-rouge-velours) 100%); }
.ba-degrade-3 { background: linear-gradient(180deg, var(--ba-rose-clair) 0%, var(--ba-beige-clair) 100%); }
.ba-degrade-4 { background: linear-gradient(180deg, var(--ba-beige-clair) 0%, var(--ba-bleu-horizon) 100%); }
.ba-degrade-5 { background: linear-gradient(180deg, var(--ba-taupe-charte) 0%, var(--ba-beige-poudre) 100%); }
.ba-degrade-6 { background: linear-gradient(180deg, var(--ba-rouge-velours) 0%, var(--ba-noir-prune) 100%); }

/* Versions douces, pour une section entiere : la couleur soutenue n'occupe
   que le dernier tiers, sinon le texte devient illisible sur la moitie basse. */
.ba-degrade--doux-1 { background: linear-gradient(180deg, var(--ba-beige-clair) 0%, var(--ba-beige-poudre) 62%, var(--ba-beige-fonce) 100%); }
.ba-degrade--doux-3 { background: linear-gradient(180deg, var(--ba-beige-clair) 0%, var(--ba-rose-clair) 100%); }
.ba-degrade--doux-4 { background: linear-gradient(170deg, var(--ba-beige-clair) 0%, var(--ba-beige-poudre) 55%, color-mix(in srgb, var(--ba-bleu-horizon) 34%, var(--ba-beige-clair)) 100%); }
.ba-degrade--doux-6 { background: linear-gradient(170deg, var(--ba-rouge-velours) 0%, var(--ba-noir-prune) 100%); }

/* -------------------------------------------------------------------------
   2. Le cadre editorial de la page 15

   Un filet bordeaux qui enferme un bloc entier : sur-titre, titre, corps,
   et une ligne manuscrite qui le referme. C'est un objet, pas une carte.
   ------------------------------------------------------------------------- */
.ba-cadre {
  position: relative;
  border: 1.5px solid var(--ba-rouge-velours);
  padding: clamp(28px, 4vw, 64px);
  background: transparent;
}
.ba-cadre--plein { background: var(--ba-beige-clair); }
.ba-cadre--clair { border-color: var(--ba-beige-poudre); }
.ba-cadre__fin {
  display: block;
  margin-top: var(--ba-s-3);
  font-family: var(--ba-manuscrit);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  line-height: 1.1;
  color: var(--ba-rose-BD3968);
}
.ba-cadre--clair .ba-cadre__fin { color: var(--ba-rose-signature); }
/* Le cadre peut mordre sur la section voisine : c'est ce debord qui empeche
   la page de ressembler a une pile de boites alignees. */
.ba-cadre--remonte { margin-top: calc(-1 * clamp(40px, 8vw, 130px)); }

/* -------------------------------------------------------------------------
   3. Le mot barre, corrige a la main (page 22)

   « le confort de ~~la-bas~~ chez soi ». Le procede typographique le plus
   identifiable de la marque, et il n'etait nulle part sur le site.
   ------------------------------------------------------------------------- */
.ba-corrige { display: inline; }
.ba-corrige__barre {
  position: relative;
  white-space: nowrap;
  opacity: 0.55;
}
.ba-corrige__barre::after {
  content: "";
  position: absolute; left: -0.04em; right: -0.04em; top: 55%;
  height: 2px;
  background: var(--ba-rose-BD3968);
  transform: rotate(-1.6deg) scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms;
}
.ba-vu .ba-corrige__barre::after,
.ba-corrige.ba-vu .ba-corrige__barre::after { transform: rotate(-1.6deg) scaleX(1); }
/* Sans JavaScript le trait doit etre la : sinon la phrase se lit a l'envers. */
html:not(.ba-js) .ba-corrige__barre::after,
body:not(.ba-js) .ba-corrige__barre::after { transform: rotate(-1.6deg) scaleX(1); }
.ba-corrige__main {
  display: inline-block;
  font-family: var(--ba-manuscrit);
  font-weight: 700;
  font-size: 1.16em;
  line-height: 0.9;
  color: var(--ba-rose-BD3968);
  transform: rotate(-1.2deg);
  margin-left: 0.22em;
}
.ba-section--sombre .ba-corrige__main,
.ba-plein-cadre .ba-corrige__main { color: var(--ba-rose-signature); }
.ba-section--sombre .ba-corrige__barre::after,
.ba-plein-cadre .ba-corrige__barre::after { background: var(--ba-rose-signature); }

/* -------------------------------------------------------------------------
   4. L'affiche pleine image (page 22)

   Une photographie qui occupe toute la section, un titre par-dessus.
   Rien d'autre. C'est le contraire d'une carte.
   ------------------------------------------------------------------------- */
.ba-plein-cadre {
  position: relative;
  min-height: min(86svh, 820px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--ba-beige-clair);
  background: var(--ba-noir-prune);
}
.ba-plein-cadre--haut { align-items: flex-start; }
.ba-plein-cadre--centre { align-items: center; }
.ba-plein-cadre__media { position: absolute; inset: 0; }
.ba-plein-cadre__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Leger zoom au defilement : la page respire sans effet de manege. */
  transform: scale(1.06);
  transition: transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ba-vu .ba-plein-cadre__media img { transform: scale(1); }
.ba-plein-cadre__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(43,10,18,0.80) 0%, rgba(43,10,18,0.30) 45%, rgba(43,10,18,0.05) 80%),
    linear-gradient(to right, rgba(43,10,18,0.55) 0%, rgba(43,10,18,0.10) 60%);
}
.ba-plein-cadre__contenu {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(var(--ba-s-5), 10vh, var(--ba-s-7));
}
.ba-plein-cadre h2 {
  color: var(--ba-beige-clair);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.2rem);
  line-height: 1.04;
  max-width: 17ch;
}
.ba-plein-cadre p { color: var(--ba-beige-fonce); max-width: 46ch; }

/* -------------------------------------------------------------------------
   5. Le collage de la page 22

   Une photographie encadree de blanc, posee de biais sur une autre image.
   C'est le procede qui dit « le gout d'ailleurs, le confort de chez soi ».
   ------------------------------------------------------------------------- */
.ba-collage { position: relative; }
.ba-collage__fond { position: relative; overflow: hidden; }
.ba-collage__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-collage__carte {
  position: absolute;
  background: var(--ba-beige-clair);
  padding: clamp(12px, 1.4vw, 20px);
  padding-bottom: clamp(46px, 5vw, 68px);
  box-shadow: 0 26px 60px rgba(43, 10, 18, 0.26);
  transform: rotate(-2.2deg);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ba-collage:hover .ba-collage__carte { transform: rotate(-0.8deg) translateY(-6px); }
.ba-collage__carte img { display: block; width: 100%; height: auto; }
.ba-collage__carte figcaption {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 1.6vw, 22px);
  text-align: center;
  font-family: var(--ba-manuscrit);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
  color: var(--ba-rouge-velours);
}

/* -------------------------------------------------------------------------
   6. Debordements et changements d'echelle

   Une image qui sort de sa colonne, un chiffre demesure, un monogramme
   recadre en grand : de quoi casser la grille sans la supprimer.
   ------------------------------------------------------------------------- */
.ba-debord-droite { margin-right: calc(-1 * var(--ba-marge)); }
.ba-debord-gauche { margin-left: calc(-1 * var(--ba-marge)); }
@media (min-width: 1100px) {
  .ba-debord-droite { margin-right: calc((100% - var(--ba-large-max)) / 2 - 4vw); }
  .ba-debord-gauche { margin-left: calc((100% - var(--ba-large-max)) / 2 - 4vw); }
}
.ba-monogramme-geant {
  position: absolute; pointer-events: none; user-select: none;
  width: clamp(280px, 42vw, 680px); height: auto;
  opacity: 0.07;
}
.ba-monogramme-geant--droite { right: -8%; top: -12%; }
.ba-monogramme-geant--gauche { left: -12%; bottom: -18%; }
.ba-a-monogramme { position: relative; overflow: hidden; }
.ba-a-monogramme > :not(.ba-monogramme-geant) { position: relative; z-index: 1; }

/* Un chiffre ou un mot porte a une echelle qui n'est pas celle du texte. */
.ba-demesure {
  font-family: var(--ba-titre);
  font-weight: var(--ba-titre-poids);
  font-size: clamp(4rem, 2rem + 9vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ba-rouge-velours);
}
.ba-demesure--creux {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ba-rouge-velours);
  text-stroke: 1.4px var(--ba-rouge-velours);
}
.ba-section--sombre .ba-demesure { color: var(--ba-beige-poudre); }
.ba-section--sombre .ba-demesure--creux {
  color: transparent; -webkit-text-stroke-color: var(--ba-rose-signature);
}

/* -------------------------------------------------------------------------
   7. L'alternance plein ecran image / texte

   Deux moities franches, sans carte ni bordure. L'image touche le bord de
   la fenetre : c'est ce qui distingue une composition d'une mise en page.
   ------------------------------------------------------------------------- */
.ba-diptyque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(78svh, 760px);
}
.ba-diptyque--inverse > .ba-diptyque__media { order: 2; }
.ba-diptyque__media { position: relative; overflow: hidden; }
.ba-diptyque__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ba-diptyque__texte {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px, 6vw, 110px);
}
/* Le texte peut chevaucher l'image de quelques dizaines de pixels : c'est ce
   petit recouvrement qui fait la difference entre deux blocs poses cote a
   cote et une composition. */
@media (min-width: 981px) {
  .ba-diptyque--chevauche .ba-diptyque__texte {
    margin-left: -8%;
    background: var(--ba-beige-clair);
    box-shadow: -30px 0 70px rgba(43, 10, 18, 0.07);
  }
  .ba-diptyque--inverse.ba-diptyque--chevauche .ba-diptyque__texte {
    margin-left: 0; margin-right: -8%;
    box-shadow: 30px 0 70px rgba(43, 10, 18, 0.07);
  }
}
@media (max-width: 980px) {
  .ba-diptyque { grid-template-columns: 1fr; min-height: 0; }
  .ba-diptyque--inverse > .ba-diptyque__media { order: 0; }
  .ba-diptyque__media { aspect-ratio: 4 / 3; }
  .ba-diptyque__media img { position: static; }
}

/* -------------------------------------------------------------------------
   8. Le sceau, en objet et non en picto

   La charte p.23 le montre en cire, avec son ombre. Utilise en grand, il
   ponctue une section ; utilise en petit, il redevient un pictogramme.
   ------------------------------------------------------------------------- */
.ba-sceau-objet {
  width: clamp(84px, 10vw, 168px); height: auto;
  filter: drop-shadow(0 14px 26px rgba(43, 10, 18, 0.22));
}
.ba-sceau-objet--flottant {
  position: absolute; z-index: 3;
  right: clamp(16px, 4vw, 60px);
  top: clamp(-30px, -3vw, -18px);
  transform: rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
  .ba-plein-cadre__media img,
  .ba-collage__carte { transition: none; transform: none; }
  .ba-corrige__barre::after { transition: none; transform: rotate(-1.6deg) scaleX(1); }
}

/* -------------------------------------------------------------------------
   9. Le portrait, en composition et non en rectangle d'attente

   Le collage occupe la moitie gauche, la carte blanche deborde vers le
   texte. Quand la vraie photo de Laurence arrivera, elle prendra la place
   du sceau dans la carte : la mise en page ne bougera pas d'un pixel.
   ------------------------------------------------------------------------- */
.ba-portrait-collage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}
.ba-portrait-collage__visuel { margin: 0; position: relative; }
.ba-portrait-collage .ba-collage__fond { aspect-ratio: 4 / 3; }
.ba-portrait-collage .ba-collage__carte {
  /* Le debord mordait sur la colonne de texte et couvrait des mots.
     Il reste un debord, c'est ce qui fait le collage, mais il s'arrete
     dans la gouttiere. */
  right: -4%; bottom: -10%;
  width: 50%;
}
.ba-portrait-collage__texte { min-width: 0; }
.ba-citation {
  margin: 0 0 var(--ba-s-2);
  padding-left: var(--ba-s-2);
  border-left: 2px solid var(--ba-rose-BD3968);
}
.ba-citation p {
  font-family: var(--ba-titre);
  font-weight: 500;
  font-size: clamp(1.18rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.44;
  color: var(--ba-rouge-velours);
  margin: 0;
}
@media (max-width: 980px) {
  .ba-portrait-collage { grid-template-columns: 1fr; }
  .ba-portrait-collage .ba-collage__carte { right: 4%; bottom: -8%; width: 46%; }
  .ba-portrait-collage__texte { margin-top: var(--ba-s-4); }
}

/* -------------------------------------------------------------------------
   10. L'en-tete de section decalee

   Le titre a gauche, la note en petit a droite et plus bas : l'oeil entre
   par le titre au lieu de balayer un bloc centre.
   ------------------------------------------------------------------------- */
.ba-entete-decalee {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 7vw, 96px);
}
.ba-entete-decalee h2 { margin: 0; max-width: 16ch; }
.ba-entete-decalee__note {
  margin: 0; padding-bottom: 0.4em;
  font-size: 1rem; color: var(--ba-taupe);
  border-top: 1px solid var(--ba-liseret);
  padding-top: var(--ba-s-2);
}
@media (max-width: 860px) {
  .ba-entete-decalee { grid-template-columns: 1fr; align-items: start; }
}

/* -------------------------------------------------------------------------
   11. La liste decalee

   Remplace les quatre cartes identiques. Un chiffre en contour, un texte,
   rien autour. Chaque ligne se retire un peu plus que la precedente : c'est
   ce decalage qui empeche la lecture « grille ».
   ------------------------------------------------------------------------- */
.ba-liste-decalee { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ba-liste-decalee__item {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2.4fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--ba-liseret);
  /* le retrait grandit ligne apres ligne, puis revient : l'oeil suit une
     diagonale au lieu d'une colonne */
  margin-left: calc(var(--rang) * clamp(0px, 2.2vw, 42px));
}
.ba-liste-decalee__item:last-child { border-bottom: 1px solid var(--ba-liseret); }
.ba-liste-decalee__num {
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);
  line-height: 0.8;
  display: block;
}
.ba-liste-decalee__corps h3 {
  margin: 0 0 0.5em;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
}
.ba-liste-decalee__corps p { margin: 0; max-width: 54ch; }
.ba-liste-decalee__suite { margin-top: clamp(30px, 4vw, 54px); }
@media (max-width: 720px) {
  .ba-liste-decalee__item {
    grid-template-columns: 1fr; gap: 10px; margin-left: 0;
  }
  .ba-liste-decalee__num { font-size: 2.4rem; }
}

/* -------------------------------------------------------------------------
   12. Les trois etapes, dans le diptyque
   ------------------------------------------------------------------------- */
.ba-etapes { list-style: none; margin: var(--ba-s-3) 0 0; padding: 0; }
.ba-etapes__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 26px);
  padding: var(--ba-s-2) 0;
  border-top: 1px solid var(--ba-liseret);
}
.ba-etapes__item:first-child { border-top: 0; padding-top: 0; }
.ba-etapes__num {
  font-family: var(--ba-titre);
  font-weight: var(--ba-titre-poids);
  font-size: 1.05rem;
  color: var(--ba-rose-BD3968);
  padding-top: 0.2em;
  letter-spacing: 0.06em;
}
.ba-etapes__item h3 { margin: 0 0 0.35em; font-size: 1.2rem; }
.ba-etapes__item p { margin: 0; font-size: 0.98rem; }
.ba-diptyque__texte .ba-sceau-objet { margin-top: var(--ba-s-3); align-self: flex-start; }

/* -------------------------------------------------------------------------
   13. Les valeurs, dans le cadre de la page 15
   ------------------------------------------------------------------------- */
.ba-valeurs-cadre { position: relative; }
.ba-valeurs-cadre h2 { margin: 0 0 var(--ba-s-2); max-width: 18ch; }
.ba-valeurs-cadre__chapeau { max-width: 62ch; margin-bottom: var(--ba-s-4); }
.ba-valeurs-cadre__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.4vw, 56px);
}
/* Le filet vertical remplace la bordure de carte : il separe sans enfermer. */
.ba-valeurs-cadre__item + .ba-valeurs-cadre__item {
  padding-left: clamp(22px, 3.4vw, 56px);
  border-left: 1px solid var(--ba-liseret);
}
.ba-valeurs-cadre__item h3 { margin: var(--ba-s-1) 0 0.4em; font-size: 1.12rem; }
.ba-valeurs-cadre__item p { margin: 0; font-size: 0.95rem; }
@media (max-width: 860px) {
  .ba-valeurs-cadre__liste { grid-template-columns: 1fr; }
  .ba-valeurs-cadre__item + .ba-valeurs-cadre__item {
    padding-left: 0; border-left: 0;
    padding-top: var(--ba-s-2); border-top: 1px solid var(--ba-liseret);
  }
  .ba-sceau-objet--flottant { right: 8px; top: -22px; width: 72px; }
}

/* -------------------------------------------------------------------------
   14. L'en-tete de page en affiche

   Une image qui touche les quatre bords, le titre par-dessus, la barre de
   navigation posee dessus. Les pages internes ouvraient sur un aplat clair
   avec un monogramme en filigrane ; trois d'entre elles n'avaient aucune
   photographie de toute la page.
   ------------------------------------------------------------------------- */
.ba-entete-affiche {
  position: relative;
  min-height: min(74svh, 660px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ba-noir-prune);
  color: var(--ba-beige-clair);
}
.ba-entete-affiche__media { position: absolute; inset: 0; }
.ba-entete-affiche__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.ba-entete-affiche__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(43,10,18,0.46) 0%, rgba(43,10,18,0.14) 16%, rgba(43,10,18,0) 30%),
    linear-gradient(to right, rgba(43,10,18,0.74) 0%, rgba(43,10,18,0.44) 44%, rgba(43,10,18,0.12) 100%),
    linear-gradient(to top, rgba(43,10,18,0.70) 0%, rgba(43,10,18,0.22) 46%, rgba(43,10,18,0) 78%);
}
.ba-entete-affiche__contenu {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(var(--ba-s-5), 8vh, var(--ba-s-7)) clamp(var(--ba-s-4), 6vh, var(--ba-s-6));
}
.ba-entete-affiche h1 {
  color: var(--ba-beige-clair);
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem);
  line-height: 1.04;
  max-width: 16ch;
  margin: var(--ba-s-2) 0 0;
}
.ba-entete-affiche__intro {
  margin-top: var(--ba-s-2);
  font-family: var(--ba-titre);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.94rem + 0.5vw, 1.35rem);
  color: var(--ba-beige-fonce);
  max-width: 48ch;
}
.ba-ariane--clair ol,
.ba-ariane--clair a,
.ba-ariane--clair li { color: var(--ba-beige-fonce); }
.ba-ariane--clair a { color: var(--ba-beige-clair); }
.ba-entete-affiche__sceau {
  position: absolute; z-index: 3;
  right: var(--ba-marge); bottom: clamp(20px, 4vw, 46px);
  transform: rotate(-7deg);
  opacity: 0.92;
}
@media (max-width: 860px) {
  .ba-entete-affiche { min-height: min(66svh, 520px); }
  .ba-entete-affiche__sceau { width: 74px; right: 14px; bottom: 14px; }
}

/* =========================================================================
   15. LE SCEAU-LECTEUR

   Le bouton de lecture de la banniere est le sceau de la marque, pas un rond
   gris. Charte p.17 : « ce symbole peut etre utilise comme marque de
   recommandation, element decoratif ou signe de reconnaissance ».

   - la cire tourne d'un tour exactement sur les 15 s de la video
   - la rotation s'arrete a la pause, elle ne se remet pas a zero
   - le monogramme reste droit : un monogramme qui tourne ne se lit plus
   - un arc de progression suit la lecture, discret
   - le glyphe lecture/pause n'apparait qu'au survol et au focus
   ========================================================================= */
.ba-sceau-lecteur {
  position: absolute; z-index: 4;
  right: var(--ba-marge); bottom: clamp(22px, 5vh, 54px);
  width: clamp(74px, 8vw, 116px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ba-beige-clair);
  filter: drop-shadow(0 12px 26px rgba(43, 10, 18, 0.34));
  transition: transform 420ms cubic-bezier(0.22,0.61,0.36,1);
}
.ba-sceau-lecteur > * { grid-area: 1 / 1; }
.ba-sceau-lecteur:hover { transform: scale(1.045); }
.ba-sceau-lecteur:focus-visible {
  outline: 2px solid var(--ba-beige-clair); outline-offset: 8px; border-radius: 50%;
}

/* la cire : un tour sur 15 s, exactement la duree de la banniere */
.ba-sceau-lecteur__cire { display: block; width: 100%; height: 100%; }
.ba-sceau-lecteur__cire img { width: 100%; height: 100%; display: block; }
.ba-sceau-lecteur[data-etat="lecture"] .ba-sceau-lecteur__cire {
  animation: ba-sceau-tourne 15s linear infinite;
}
.ba-sceau-lecteur[data-etat="pause"] .ba-sceau-lecteur__cire {
  animation: ba-sceau-tourne 15s linear infinite;
  animation-play-state: paused;
}
@keyframes ba-sceau-tourne { to { transform: rotate(360deg); } }

/* l'arc de progression, pose sur la cire */
.ba-sceau-lecteur__arc { width: 100%; height: 100%; transform: rotate(-90deg); }
.ba-sceau-lecteur__piste,
.ba-sceau-lecteur__avance {
  fill: none; stroke-width: 1.6; stroke-linecap: round;
}
.ba-sceau-lecteur__piste { stroke: rgba(253, 232, 225, 0.22); }
.ba-sceau-lecteur__avance {
  stroke: var(--ba-beige-clair);
  stroke-dasharray: 333;          /* 2 * PI * 53, arrondi */
  stroke-dashoffset: 333;
  transition: stroke-dashoffset 220ms linear;
}

/* Le SVG du sceau porte DEJA le monogramme : en superposer un second
   faisait un doublon visible. C'est donc le sceau entier qui tourne, ce qui
   est l'effet voulu : un cachet de cire qui pivote lentement. */

/* le glyphe ne se montre qu'au survol : le sceau reste un sceau */
.ba-sceau-lecteur__etat {
  display: grid; place-items: center;
  width: 46%; height: 46%;
  border-radius: 50%;
  background: rgba(43, 10, 18, 0.82);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 280ms ease;
  pointer-events: none;
}
.ba-sceau-lecteur__etat svg { width: 34%; }
.ba-sceau-lecteur:hover .ba-sceau-lecteur__etat,
.ba-sceau-lecteur:focus-visible .ba-sceau-lecteur__etat { opacity: 1; }
.ba-sceau-lecteur__etat svg { grid-area: 1 / 1; width: 100%; height: auto; }
.ba-sceau-lecteur[data-etat="lecture"] .ba-sceau-lecteur__play,
.ba-sceau-lecteur[data-etat="pause"] .ba-sceau-lecteur__pause { display: none; }

@media (max-width: 860px) {
  /* plus petit et remonte : il ne doit pas couvrir le texte ni la marge basse */
  .ba-sceau-lecteur { width: 62px; right: 14px; bottom: 16px; }
  .ba-sceau-lecteur__monogramme { width: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-sceau-lecteur[data-etat] .ba-sceau-lecteur__cire { animation: none; }
  .ba-sceau-lecteur__avance { transition: none; }
  .ba-sceau-lecteur { transition: none; }
  .ba-sceau-lecteur:hover { transform: none; }
}

/* =========================================================================
   16. L'EXPERIENCE : la sequence epinglee de la page 23

   La section fait quatre hauteurs d'ecran ; la scene reste collee pendant
   qu'on defile, l'objet change a droite et le message a gauche.
   Chaque objet a son propre mouvement d'entree.
   ========================================================================= */
.ba-experience { position: relative; background: var(--ba-beige-clair); }
/* Le degrade 3 de la charte, tres doux, pour que la sequence ne soit pas
   posee sur un blanc plat. */
.ba-experience::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ba-beige-clair) 0%, var(--ba-rose-clair) 46%, var(--ba-beige-clair) 100%);
}
.ba-experience__piste { position: relative; z-index: 1; height: calc(var(--etapes) * 100svh); }
.ba-experience__scene {
  position: sticky; top: 0;
  height: 100svh; display: flex; align-items: center;
  overflow: hidden;
}
.ba-experience__grille {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  width: min(100% - (2 * var(--ba-s-2)), var(--ba-large-max));
}

/* --- la colonne de gauche : les messages se relaient ------------------- */
.ba-experience__texte h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem);
  line-height: 1.1; max-width: 17ch; margin: 0 0 var(--ba-s-3);
}
.ba-experience__messages {
  position: relative; list-style: none; margin: 0; padding: 0;
  min-height: 15em;
}
.ba-experience__message {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}
.ba-experience__message.est-actif { opacity: 1; transform: none; pointer-events: auto; }
.ba-experience__numero {
  display: block;
  font-family: var(--ba-corps); font-size: 0.75rem;
  letter-spacing: 0.28em; color: var(--ba-rose-BD3968);
  margin-bottom: 0.9em;
}
.ba-experience__message h3 {
  margin: 0 0 0.55em;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.16;
}
.ba-experience__message p { margin: 0; max-width: 44ch; }

.ba-experience__vignette { display: none; }
.ba-experience__jauge { display: flex; gap: 10px; margin-top: var(--ba-s-3); }
.ba-experience__jauge span {
  width: 34px; height: 2px; background: var(--ba-liseret);
  transition: background 420ms ease, width 420ms ease;
}
.ba-experience__jauge span.est-actif { background: var(--ba-rouge-velours); width: 52px; }

/* --- la colonne de droite : les objets --------------------------------- */
.ba-experience__objets {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
}
.ba-experience__objet {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  opacity: 0;
  /* 640 ms mettait trop longtemps a s'etablir quand on defile vite :
     l'objet restait pale pendant un moment. 480 ms garde le calme du
     fondu sans laisser l'ecran a moitie vide. */
  transition: opacity 480ms ease, transform 720ms cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}
.ba-experience__objet img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 54px rgba(43, 10, 18, 0.16));
}
.ba-experience__objet.est-actif { opacity: 1; transform: none; pointer-events: auto; }

/* Chaque objet entre a sa maniere. Le sceau pivote et se pose, le livret
   s'ouvre, l'etiquette oscille, le carton de porte bascule sur sa poignee. */
.ba-experience__objet--sceau     { transform: rotate(-32deg) scale(0.82); }
.ba-experience__objet--livret    { transform: perspective(1400px) rotateY(-34deg) translateX(6%); transform-origin: left center; }
.ba-experience__objet--etiquette { transform: rotate(6deg) translateY(4%); transform-origin: 62% 18%; }
.ba-experience__objet--carton    { transform: perspective(1400px) rotateX(26deg) translateY(-6%); transform-origin: center top; }

.ba-experience__objet--etiquette.est-actif {
  animation: ba-oscille 5.5s ease-in-out 700ms infinite;
  transform-origin: 62% 18%;
}
@keyframes ba-oscille {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.4deg); }
}

.ba-experience__trait {
  position: absolute; bottom: -6px; left: 50%;
  width: min(300px, 62%); height: auto;
  transform: translateX(-50%);
  opacity: 0.75; pointer-events: none;
}

/* --- mobile et tablette : plus d'epinglage ----------------------------- */
@media (max-width: 980px) {
  /* Une sequence epinglee sur mobile capture le defilement et donne
     l'impression d'un site casse. On deroule les quatre objets. */
  .ba-experience__piste { height: auto; }
  .ba-experience__scene { position: static; height: auto; display: block; padding-block: var(--ba-s-5); }
  .ba-experience__grille { grid-template-columns: 1fr; gap: var(--ba-s-3); }
  .ba-experience__messages { position: static; min-height: 0; }
  .ba-experience__message {
    position: static; opacity: 1; transform: none;
    padding: var(--ba-s-3) 0; border-top: 1px solid var(--ba-liseret);
  }
  .ba-experience__vignette {
    display: block; width: 100%; height: auto;
    margin-bottom: var(--ba-s-2);
    filter: drop-shadow(0 14px 30px rgba(43, 10, 18, 0.14));
  }
  .ba-experience__objets, .ba-experience__jauge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-experience__objet { transition: opacity 200ms ease; transform: none !important; }
  .ba-experience__objet--etiquette.est-actif { animation: none; }
  .ba-experience__message { transition: opacity 200ms ease; transform: none; }
}

/* =========================================================================
   17. LA CARTE POSTALE : la page 22, en grand

   La carte part encadree, comme une carte postale posee sur la table, puis
   s'ouvre jusqu'au plein cadre au defilement. Deux vignettes derivent moins
   vite que le fond : c'est ce decalage qui fait la profondeur.

   Le pilotage se fait par une variable --ouverture entre 0 et 1, posee par
   le script. Sans JavaScript, --ouverture vaut 1 : la carte est ouverte,
   lisible, et rien n'est perdu.
   ========================================================================= */
.ba-postale {
  --ouverture: 1;
  position: relative;
  background: var(--ba-noir-prune);
}
.ba-postale__piste { height: 220svh; }
.ba-postale__scene {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}

.ba-postale__cadre {
  position: absolute;
  margin: 0;
  /* de 62% de large et arrondi, a 100% et net */
  inset: calc((1 - var(--ouverture)) * 9%) calc((1 - var(--ouverture)) * 19%);
  border-radius: calc((1 - var(--ouverture)) * 10px);
  overflow: hidden;
  box-shadow: 0 calc((1 - var(--ouverture)) * 60px) calc((1 - var(--ouverture)) * 120px) rgba(0,0,0,calc((1 - var(--ouverture)) * 0.5));
}
.ba-postale__image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  transform: scale(calc(1.12 - var(--ouverture) * 0.12));
}
.ba-postale__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(43,10,18,calc(0.30 + var(--ouverture) * 0.52)) 0%,
                            rgba(43,10,18,calc(0.08 + var(--ouverture) * 0.16)) 48%,
                            rgba(43,10,18,0.06) 100%),
    linear-gradient(to right, rgba(43,10,18,calc(var(--ouverture) * 0.46)) 0%,
                              rgba(43,10,18,0) 62%);
}

.ba-postale__contenu {
  position: relative; z-index: 3; width: 100%;
  padding-block: clamp(var(--ba-s-4), 8vh, var(--ba-s-6));
  color: var(--ba-beige-clair);
  opacity: var(--ouverture);
  transform: translateY(calc((1 - var(--ouverture)) * 34px));
}
.ba-postale__surtitre {
  display: block;
  font-family: var(--ba-corps); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ba-rose-signature); margin-bottom: var(--ba-s-2);
}
.ba-postale h2 {
  color: var(--ba-beige-clair);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.4rem);
  line-height: 1.06; margin: 0 0 var(--ba-s-2); max-width: 18ch;
}
.ba-postale__texte {
  color: var(--ba-beige-fonce); max-width: 46ch;
  font-family: var(--ba-titre); font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.22rem);
}
.ba-postale__liens { display: flex; flex-wrap: wrap; gap: var(--ba-s-3); margin: var(--ba-s-3) 0 0; }

/* les deux vignettes, decalees */
.ba-postale__vignette {
  position: absolute; z-index: 2; margin: 0;
  background: var(--ba-beige-clair);
  padding: 10px; padding-bottom: 30px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  opacity: var(--ouverture);
}
.ba-postale__vignette img { display: block; width: 100%; height: auto; }
.ba-postale__vignette--cote {
  width: clamp(120px, 15vw, 226px);
  right: 6%; top: 12%;
  transform: rotate(4deg) translateY(calc((1 - var(--ouverture)) * 70px));
}
.ba-postale__vignette--rue {
  width: clamp(104px, 12vw, 186px);
  right: 21%; top: 44%;
  transform: rotate(-5deg) translateY(calc((1 - var(--ouverture)) * 120px));
}

@media (max-width: 980px) {
  /* Pas d'epinglage : la carte est ouverte, les vignettes disparaissent.
     Un parallaxe a trois plans sur mobile coute cher pour rien. */
  .ba-postale { --ouverture: 1; }
  .ba-postale__piste { height: auto; }
  .ba-postale__scene { position: static; height: auto; min-height: 78svh; }
  .ba-postale__cadre { inset: 0; border-radius: 0; box-shadow: none; }
  .ba-postale__image { transform: none; }
  .ba-postale__vignette { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-postale { --ouverture: 1 !important; }
  .ba-postale__image { transform: none; }
  .ba-postale__vignette { transform: rotate(0deg) !important; }
}

/* =========================================================================
   18. L'APPEL FINAL

   Une affiche, pas un pied de page bordeaux. Photographie plein cadre de la
   charte p.21, voile profond, signature manuscrite en grand, trait rose qui
   se dessine sous elle, et le sceau pose comme un cachet sur un pli.
   ========================================================================= */
.ba-final {
  position: relative;
  min-height: min(96svh, 900px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ba-noir-prune);
  color: var(--ba-beige-clair);
  text-align: center;
}
.ba-final__media { position: absolute; inset: 0; }
.ba-final__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ba-final__voile {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(43,10,18,0.58) 0%, rgba(43,10,18,0.86) 62%, rgba(43,10,18,0.95) 100%);
}
.ba-final__filigrane {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  width: min(620px, 78vw); height: auto;
  transform: translate(-50%, -52%);
  opacity: 0.085; pointer-events: none;
}
.ba-final__contenu {
  position: relative; z-index: 2;
  padding-block: clamp(var(--ba-s-5), 9vh, var(--ba-s-7));
}
.ba-final__surtitre {
  display: block;
  font-family: var(--ba-corps); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ba-rose-signature); margin-bottom: var(--ba-s-3);
}
.ba-final__titre {
  color: var(--ba-beige-clair);
  font-size: clamp(2.1rem, 1.1rem + 4vw, 4.6rem);
  line-height: 1.06;
  max-width: 18ch; margin: 0 auto var(--ba-s-2);
}
.ba-final__titre .ba-titre-accent { display: block; margin-top: 0.12em; }
.ba-final__texte {
  margin: 0 auto var(--ba-s-4);
  max-width: 46ch;
  color: var(--ba-beige-fonce);
  font-family: var(--ba-titre); font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.24rem);
}
.ba-final__actions {
  display: flex; flex-wrap: wrap; gap: var(--ba-s-3);
  align-items: center; justify-content: center;
}
.ba-final__signe { position: relative; margin-top: clamp(38px, 6vh, 74px); text-align: center; }
.ba-final__signature {
  display: block; margin-inline: auto;
  width: min(420px, 74vw); height: auto;
  /* Le SVG de la signature est en Rouge Velours : sur fond sombre il faut
     l'eclaircir. Un filtre, plutot qu'un second fichier a maintenir. */
  filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(560%) hue-rotate(310deg) brightness(103%) contrast(97%);
}
.ba-final__trait {
  display: block; width: min(360px, 64vw); height: auto;
  margin: 6px auto 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform 1100ms cubic-bezier(0.22,0.61,0.36,1) 260ms;
}
.ba-vu .ba-final__trait, .ba-final.ba-vu .ba-final__trait { transform: scaleX(1); }
html:not(.ba-js) .ba-final__trait { transform: scaleX(1); }

/* Le sceau arrive de biais et se pose, comme un cachet sur un pli. */
.ba-final__sceau {
  position: absolute; z-index: 3;
  /* Ecarte du bouton « retour en haut », qui vit dans le meme coin. */
  right: clamp(76px, 9vw, 150px); bottom: clamp(-14px, -1vw, 4px);
  width: clamp(88px, 11vw, 168px); height: auto;
  transform: rotate(-26deg) scale(0.7); opacity: 0;
  transition: transform 900ms cubic-bezier(0.34, 1.36, 0.64, 1) 420ms, opacity 620ms ease 420ms;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.4));
}
.ba-vu .ba-final__sceau, .ba-final.ba-vu .ba-final__sceau { transform: rotate(-8deg) scale(1); opacity: 1; }
html:not(.ba-js) .ba-final__sceau { transform: rotate(-8deg); opacity: 1; }

@media (max-width: 860px) {
  .ba-final { min-height: 84svh; }
  .ba-final__sceau { width: 82px; right: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-final__trait { transform: scaleX(1); transition: none; }
  .ba-final__sceau { transform: rotate(-8deg); opacity: 1; transition: none; }
}

/* =========================================================================
   19. LA PROMESSE

   Une declaration en grand dont les mots se revelent au defilement, adossee
   a deux photographies de la charte p.21 qui debordent de la colonne.
   Transforme de Scroll Word Reveal, /@motiondotdev/components/motion-scroll-word-reveal.
   ========================================================================= */
.ba-promesse-v2 {
  padding-block: clamp(var(--ba-s-5), 9vw, var(--ba-s-7));
  background: linear-gradient(180deg, var(--ba-beige-clair) 0%, var(--ba-beige-poudre) 100%);
  overflow: hidden;
}
.ba-promesse-v2__grille {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 6vw, 96px);
  align-items: center;
}
.ba-promesse-v2__declaration {
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.16;
  margin: 0 0 var(--ba-s-3);
  max-width: 20ch;
}
/* Chaque mot part estompe et remonte legerement. Sans JavaScript ils sont
   tous visibles : la promesse ne depend pas d'un script pour se lire. */
.ba-js .ba-mot {
  display: inline-block;
  opacity: 0.16;
  transform: translateY(9px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22,0.61,0.36,1);
  transition-delay: calc(var(--m) * 42ms);
}
.ba-js .ba-mot.est-vu { opacity: 1; transform: none; }
.ba-promesse-v2__corps { max-width: 52ch; }
.ba-promesse-v2__suite { margin-top: var(--ba-s-3); }

.ba-promesse-v2__visuels { position: relative; aspect-ratio: 3 / 4; }
.ba-promesse-v2__haut, .ba-promesse-v2__bas { position: absolute; margin: 0; overflow: hidden; }
.ba-promesse-v2__haut {
  inset: 0 0 22% 16%;
  box-shadow: 0 30px 64px rgba(43, 10, 18, 0.16);
}
.ba-promesse-v2__bas {
  width: 52%; left: -12%; bottom: 0;
  aspect-ratio: 4 / 5;
  box-shadow: 0 22px 46px rgba(43, 10, 18, 0.2);
  border: 8px solid var(--ba-beige-clair);
}
.ba-promesse-v2__haut img, .ba-promesse-v2__bas img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ba-promesse-v2__sceau {
  position: absolute; z-index: 2;
  right: -6%; top: 8%;
  width: clamp(72px, 8vw, 120px); height: auto;
  transform: rotate(-9deg);
  filter: drop-shadow(0 12px 24px rgba(43, 10, 18, 0.2));
}
@media (max-width: 900px) {
  .ba-promesse-v2__grille { grid-template-columns: 1fr; }
  .ba-promesse-v2__visuels { aspect-ratio: 4 / 3; margin-top: var(--ba-s-3); }
  .ba-promesse-v2__haut { inset: 0 12% 14% 0; }
  .ba-promesse-v2__bas { width: 40%; left: auto; right: 0; bottom: 0; }
  .ba-promesse-v2__sceau { right: 2%; top: -6%; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-js .ba-mot { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   20. LES PRESTATIONS, avec leurs photographies

   Quatre colonnes decalees deux par deux, pas une grille reguliere. Le
   pictogramme de la charte est pose SUR l'image, en pastille, plutot que
   depose a cote du texte.
   ========================================================================= */
.ba-prestations {
  padding-block: clamp(var(--ba-s-5), 8vw, var(--ba-s-7));
  background: linear-gradient(180deg, var(--ba-beige-poudre) 0%, var(--ba-beige-clair) 78%);
}
.ba-prestations__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
}
.ba-prestation-v2 {
  /* les colonnes paires descendent : c'est ce decalage qui empeche la
     lecture « quatre cartes identiques » */
  margin-top: calc(mod(var(--rang), 2) * clamp(18px, 4vw, 74px));
}
@supports not (width: calc(mod(2, 2) * 1px)) {
  .ba-prestation-v2:nth-child(2n) { margin-top: clamp(18px, 4vw, 74px); }
}
.ba-prestation-v2__media {
  position: relative; margin: 0 0 var(--ba-s-2);
  aspect-ratio: 4 / 5; overflow: hidden;
}
.ba-prestation-v2__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1);
}
.ba-prestation-v2:hover .ba-prestation-v2__media img { transform: scale(1.045); }
.ba-prestation-v2__pastille {
  position: absolute; left: 14px; top: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--ba-beige-clair) 92%, transparent);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.ba-prestation-v2__pastille img { width: 26px; height: 26px; }
.ba-prestation-v2__num {
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--ba-titre); font-weight: var(--ba-titre-poids);
  font-size: 2.6rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(253, 232, 225, 0.9);
}
.ba-prestation-v2 h3 {
  margin: 0 0 0.45em;
  font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.24rem);
  line-height: 1.22;
}
.ba-prestation-v2 p { margin: 0; font-size: 0.94rem; }
.ba-prestations__suite { margin-top: clamp(34px, 5vw, 64px); }

@media (max-width: 1100px) { .ba-prestations__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .ba-prestations__grille { grid-template-columns: 1fr; }
  .ba-prestation-v2, .ba-prestation-v2:nth-child(2n) { margin-top: 0; }
}

/* =========================================================================
   21. LES ANNONCES EXEMPLES

   Trois grandes annonces en plein cadre photographique, decalees en eventail.
   La fiche monte sur l'image au survol et au focus ; sur ecran tactile elle
   est toujours visible, un survol n'existe pas au doigt.
   Principe de revelation repris de /@pulseawan/components/image-expansion,
   mise en eventail de /@felipemenezes098/components/hero-10.
   ========================================================================= */
.ba-annonces {
  padding-block: clamp(var(--ba-s-5), 8vw, var(--ba-s-7));
  background: var(--ba-beige-clair);
}
.ba-annonces__eventail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.ba-annonce-v2 { margin: 0; }
.ba-annonce-v2:nth-child(2) { margin-top: clamp(20px, 4vw, 66px); }
.ba-annonce-v2:nth-child(3) { margin-top: clamp(10px, 2vw, 30px); }

.ba-annonce-v2__media {
  position: relative; margin: 0;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ba-rose-clair);
}
.ba-annonce-v2__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1);
}
.ba-annonce-v2:hover .ba-annonce-v2__media img,
.ba-annonce-v2:focus-within .ba-annonce-v2__media img { transform: scale(1.05); }

.ba-annonce-v2__badge {
  position: absolute; z-index: 3; left: 14px; top: 14px;
  background: var(--ba-rouge-velours); color: var(--ba-beige-poudre);
  font-family: var(--ba-corps); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  padding: 0.45em 0.85em;
}

/* La fiche monte du bas, posee sur un voile : le texte reste lisible quelle
   que soit la photographie dessous. */
.ba-annonce-v2__fiche {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  padding: clamp(16px, 2vw, 26px);
  color: var(--ba-beige-clair);
  background: linear-gradient(to top, rgba(43,10,18,0.94) 0%, rgba(43,10,18,0.82) 58%, rgba(43,10,18,0) 100%);
  transform: translateY(calc(100% - 5.4em));
  transition: transform 620ms cubic-bezier(0.22,0.61,0.36,1);
}
.ba-annonce-v2:hover .ba-annonce-v2__fiche,
.ba-annonce-v2:focus-within .ba-annonce-v2__fiche { transform: translateY(0); }
.ba-annonce-v2__fiche h3 {
  margin: 0 0 0.6em; color: var(--ba-beige-clair);
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.24rem); line-height: 1.2;
}
.ba-annonce-v2__criteres {
  list-style: none; margin: 0 0 0.9em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5em 1.2em;
}
.ba-annonce-v2__criteres li {
  display: flex; align-items: center; gap: 0.42em;
  font-size: 0.8rem; color: var(--ba-beige-fonce);
}
.ba-annonce-v2__criteres img {
  width: 18px; height: 18px;
  /* les pictogrammes sont en Rouge Velours : sur fond sombre on les eclaircit */
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(390%) hue-rotate(304deg) brightness(102%) contrast(98%);
}
.ba-annonce-v2__fiche p { margin: 0; font-size: 0.9rem; color: var(--ba-beige-fonce); }
.ba-annonce-v2__note {
  margin-top: 0.8em !important; padding-top: 0.7em;
  border-top: 1px solid rgba(253,232,225,0.22);
  font-style: italic; font-size: 0.78rem !important;
}

@media (hover: none) {
  /* Au doigt il n'y a pas de survol : la fiche reste ouverte. */
  .ba-annonce-v2__fiche { transform: none; }
}
@media (max-width: 900px) {
  .ba-annonces__eventail { grid-template-columns: 1fr; }
  .ba-annonce-v2:nth-child(2), .ba-annonce-v2:nth-child(3) { margin-top: 0; }
  .ba-annonce-v2__media { aspect-ratio: 4 / 3; }
  .ba-annonce-v2__fiche { position: static; transform: none; background: var(--ba-rouge-velours); }
}
@media (prefers-reduced-motion: reduce) {
  .ba-annonce-v2__fiche, .ba-annonce-v2__media img { transition: none; }
}

/* =========================================================================
   22. LE GUIDE : capture en bas de page
   -------------------------------------------------------------------------
   Un eventail des vraies pages du PDF a gauche, le sommaire et la capture
   a droite. Le principe de composition vient du site de la conciergerie
   precedente ; la mecanique de l'eventail est transformee de Card Fan
   Carousel, 21st.dev/@aayush-duhan/components/card-fan-carousel.

   Trois choses que la reference ne fait pas : les cartes se deploient a
   l'entree dans le champ, elles s'ecartent au survol, et on peut les
   feuilleter une par une au clic ou au clavier.
   ========================================================================= */
.ba-magnet {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(168deg,
              var(--ba-beige-poudre) 0%,
              var(--ba-beige-clair) 58%,
              var(--ba-rose-clair) 100%);
  overflow: hidden;
}
.ba-magnet__grille {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* --- l'eventail --------------------------------------------------------- */
.ba-magnet__eventail { position: relative; }
.ba-magnet__scene {
  position: relative;
  height: clamp(360px, 36vw, 500px);
  perspective: 1400px;
  /* --ouvert : 0 empile, 1 deploye. Le script le fait passer de 0 a 1 quand
     la section entre dans le champ ; --large monte au survol. */
  --ouvert: 0;
  --large: 0;
  /* L'ecart de l'arc suit la largeur disponible : en fixe, la carte de
     gauche sortait du conteneur et se faisait couper par overflow:hidden. */
  --ecart: clamp(34px, 4.2vw, 54px);
}
.ba-magnet__page {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(158px, 16.5vw, 238px);
  aspect-ratio: 760 / 1075;
  margin: 0; padding: 0;
  border: 0; background: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(104, 17, 42, 0.16),
              0 2px 6px rgba(104, 17, 42, 0.10);
  /* Position dans l'arc : l'ecart au centre donne l'angle et la fleche.
     --d va de -(n-1)/2 a +(n-1)/2, --r est la distance absolue au centre. */
  --d: calc(var(--i) - (var(--n) - 1) / 2);
  --r: max(var(--d), calc(-1 * var(--d)));
  --angle: calc(var(--d) * (5.6deg + var(--large) * 2deg) * var(--ouvert));
  --dx: calc(var(--d) * (var(--ecart) + var(--large) * 14px) * var(--ouvert));
  --dy: calc(var(--r) * 13px * var(--ouvert));
  transform:
    translate(-50%, -50%)
    translate(var(--dx), var(--dy))
    rotate(var(--angle))
    scale(calc(0.94 + var(--ouvert) * 0.06));
  transform-origin: 50% 104%;
  transition: transform 0.62s cubic-bezier(0.22, 1.12, 0.34, 1),
              box-shadow 0.4s ease, z-index 0s;
  z-index: calc(10 - var(--r));
}
.ba-magnet__page img { display: block; width: 100%; height: auto; }

/* la carte en avant : elle sort de l'arc et se redresse */
/* La carte en avant vient AU CENTRE et se redresse : sans cela l'eventail
   restait accroche a gauche, et feuilleter ne deplacait rien. */
.ba-magnet__page[aria-current="true"] {
  --angle: 0deg;
  --dx: 0px;
  --dy: -12px;
  z-index: 20;
  box-shadow: 0 26px 56px rgba(104, 17, 42, 0.26),
              0 3px 10px rgba(104, 17, 42, 0.14);
}
.ba-magnet__page:focus-visible {
  outline: 2px solid var(--ba-rouge-velours);
  outline-offset: 4px;
  z-index: 21;
}
.ba-magnet__legende {
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ba-taupe);
}

/* --- la colonne de texte ------------------------------------------------ */
.ba-magnet__texte > h2 {
  margin: 0.4em 0 0.5em;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  color: var(--ba-rouge-velours);
}
.ba-magnet__main {
  display: block;
  font-family: var(--ba-manuscrit);
  font-weight: 600;
  font-size: 1.06em;
  color: var(--ba-rose-BD3968);
}
.ba-magnet__chapo {
  max-width: 46ch;
  color: var(--ba-taupe);
}
.ba-magnet__sommaire {
  list-style: none;
  margin: clamp(1.4rem, 3vw, 2rem) 0;
  padding: 0;
  border-top: 1px solid var(--ba-rose-signature);
}
.ba-magnet__sommaire li {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.62em 0;
  border-bottom: 1px solid var(--ba-rose-signature);
  color: var(--ba-rouge-velours);
  font-size: 0.98rem;
}
.ba-magnet__sommaire span {
  font-family: var(--ba-titre);
  font-size: 0.92rem;
  color: var(--ba-rose-fonce);
  min-width: 1.6em;
}

.ba-magnet__ligne {
  display: grid;
  grid-template-columns: 1fr 1.35fr auto;
  gap: 0.9rem;
  align-items: end;
}
.ba-magnet__form .ba-consentement { margin-top: 0.9rem; }
.ba-magnet__note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ba-taupe);
}

@media (max-width: 980px) {
  .ba-magnet__grille { grid-template-columns: 1fr; }
  .ba-magnet__scene { height: clamp(300px, 62vw, 400px); }
  .ba-magnet__ligne { grid-template-columns: 1fr; }
  .ba-magnet__ligne > .ba-bouton { justify-self: start; }
}

/* Sans mouvement : l'eventail est deploye des le depart, rien ne bouge.
   La lecture et le feuilletage restent entiers. */
@media (prefers-reduced-motion: reduce) {
  .ba-magnet__scene { --ouvert: 1; }
  .ba-magnet__page { transition: none; }
}

/* =========================================================================
   23. LES PAGES INTERIEURES
   -------------------------------------------------------------------------
   Jusqu'ici, Offre, Lille, Hauts-de-France, Contact, Guide et Journal
   n'etaient qu'une pile de `ba-section` : entete, section claire, section,
   section sombre. C'est exactement la « succession de blocs codes »
   reprochee. Le vocabulaire de la charte descend ici a son tour.
   ========================================================================= */

/* --- 23.1 Le cout, en chiffres creux -------------------------------------
   Trois cartes bordees devenaient trois boites. A la place : trois grands
   numeros en contour (p.15), le texte a cote, rien qui les enferme. */
.ba-cout { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--ba-beige-clair); }
.ba-cout__liste { display: grid; gap: clamp(2rem, 4vw, 3.4rem); margin-top: clamp(2.4rem, 5vw, 4rem); }
.ba-cout__item {
  display: grid;
  grid-template-columns: minmax(96px, 12%) 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--ba-rose-signature);
}
.ba-cout__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ba-cout__num {
  font-family: var(--ba-titre); font-weight: 600;
  font-size: clamp(3rem, 7vw, 5.4rem); line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--ba-rose-fonce);
}
.ba-cout__item h3 { margin: 0 0 0.4em; color: var(--ba-rouge-velours); font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.ba-cout__item p { margin: 0; max-width: 62ch; color: var(--ba-taupe); }

/* --- 23.2 Un seul chiffre, en grand --------------------------------------
   La commission etait un titre centre sur un fond sombre. Elle devient le
   sujet de la section : le chiffre occupe la page, le texte l'accompagne. */
.ba-chiffre {
  position: relative; overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: linear-gradient(152deg, var(--ba-rouge-velours) 0%, var(--ba-noir-prune) 100%);
  color: var(--ba-beige-clair);
}
.ba-chiffre__grille {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* `.ba-chiffre p` (une classe + un element) l'emportait sur `.ba-chiffre__valeur`
   (une classe) : le chiffre se remplissait de rose au lieu de rester en
   contour. On egalise la specificite et on coupe le remplissage
   explicitement, `color` seul ne suffit pas partout. */
.ba-chiffre p.ba-chiffre__valeur {
  font-family: var(--ba-titre); font-weight: 600;
  -webkit-text-fill-color: transparent;
  font-size: clamp(6rem, 17vw, 15rem); line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ba-rose-signature);
  letter-spacing: -0.02em;
}
.ba-chiffre__valeur sup { font-size: 0.42em; vertical-align: super; -webkit-text-stroke-width: 1px; }
.ba-chiffre h2 { margin: 0 0 0.5em; color: var(--ba-beige-clair); max-width: 20ch; }
.ba-chiffre p { color: var(--ba-beige-fonce); max-width: 52ch; }
.ba-chiffre__sceau { position: absolute; right: -40px; bottom: -40px; width: 220px; opacity: 0.14; }

/* --- 23.3 Le parcours ----------------------------------------------------
   Les etapes etaient une liste a pastilles. Elles deviennent une frise :
   un filet rose traverse la section, chaque etape y est accrochee. */
.ba-parcours { padding: clamp(4rem, 8vw, 7rem) 0; }
.ba-parcours__frise {
  display: grid; gap: clamp(1.8rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  position: relative;
}
.ba-parcours__frise::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px;
  height: 1px; background: var(--ba-rose-signature);
}
.ba-parcours__etape { position: relative; padding-top: 74px; }
.ba-parcours__etape::before {
  content: ""; position: absolute; left: 0; top: 24px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ba-beige-clair);
  border: 1.4px solid var(--ba-rouge-velours);
}
.ba-parcours__num {
  position: absolute; left: 26px; top: 12px;
  font-family: var(--ba-titre); font-size: 1.1rem;
  color: var(--ba-rose-fonce);
}
.ba-parcours__etape h3 { margin: 0 0 0.45em; color: var(--ba-rouge-velours); font-size: 1.18rem; }
.ba-parcours__etape p { margin: 0; color: var(--ba-taupe); font-size: 0.96rem; }

/* --- 23.4 Les questions --------------------------------------------------
   Le titre tient tout seul dans la colonne de gauche pendant qu'on
   deroule les reponses. */
.ba-questions { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--ba-beige-clair); }
.ba-questions__grille {
  display: grid; grid-template-columns: 0.68fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.ba-questions__titre { position: sticky; top: 120px; }
.ba-questions__titre h2 { margin: 0.3em 0 0; max-width: 12ch; }
.ba-questions__titre img { width: 190px; margin-top: var(--ba-s-3); opacity: 0.9; }

@media (max-width: 900px) {
  .ba-chiffre__grille { grid-template-columns: 1fr; }
  .ba-questions__grille { grid-template-columns: 1fr; }
  .ba-questions__titre { position: static; }
  .ba-parcours__frise::before { display: none; }
  .ba-parcours__etape { padding-top: 0; padding-left: 44px; }
  .ba-parcours__etape::before { top: 6px; }
  .ba-parcours__num { left: 24px; top: -2px; }
}

/* --- 23.5 Les moments, sur une image plein cadre -------------------------
   Les quatre irritants etaient noyes dans un paragraphe. Poses l'un sous
   l'autre, ils se lisent comme une journee, et c'est ce qui rend la
   fatigue concrete. Chaque ligne est barree d'un filet rose a gauche. */
.ba-plein-cadre__moments {
  list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0; padding: 0;
  display: grid; gap: 0.55rem;
}
.ba-plein-cadre__moments li {
  position: relative; padding-left: 1.9rem;
  color: var(--ba-beige-poudre);
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
}
.ba-plein-cadre__moments li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 20px; height: 1px; background: var(--ba-rose-signature);
}

/* --- 23.6 Les prestations detaillees -------------------------------------
   Quatre blocs identiques en grille devenaient quatre boites. Ici, quatre
   grands moments alternes : la photographie d'un cote, le detail de
   l'autre, et le numero en contour de la charte p.15. */
.ba-detaillees { padding: clamp(4rem, 8vw, 7rem) 0; }
.ba-detaillee {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 6rem);
}
.ba-detaillee--inverse > .ba-detaillee__media { order: 2; }
.ba-detaillee__media {
  position: relative; overflow: hidden;
  border-radius: var(--ba-rayon-carte);
  aspect-ratio: 4 / 3;
}
.ba-detaillee__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-detaillee__pastille {
  position: absolute; left: 22px; bottom: 22px;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ba-beige-clair);
  box-shadow: 0 8px 22px rgba(104, 17, 42, 0.18);
}
.ba-detaillee__texte { position: relative; }
.ba-detaillee__num {
  display: block; margin-bottom: 0.1em;
  font-family: var(--ba-titre); font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: 0.9;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--ba-rose-fonce);
}
.ba-detaillee__texte h3 {
  margin: 0 0 0.45em; color: var(--ba-rouge-velours);
  font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.14;
}
.ba-detaillee__texte > p { color: var(--ba-taupe); max-width: 44ch; }
.ba-detaillee__label {
  margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0.6rem;
  font-family: var(--ba-corps); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ba-rose-BD3968);
}
.ba-detaillee__items { list-style: none; margin: 0; padding: 0; }
.ba-detaillee__items li {
  position: relative; padding: 0.42em 0 0.42em 1.5rem;
  color: var(--ba-taupe); font-size: 0.95rem;
  border-bottom: 1px solid var(--ba-rose-clair);
}
.ba-detaillee__items li:last-child { border-bottom: 0; }
.ba-detaillee__items li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 14px; height: 1px; background: var(--ba-rose-fonce);
}
@media (max-width: 860px) {
  .ba-detaillee { grid-template-columns: 1fr; }
  .ba-detaillee--inverse > .ba-detaillee__media { order: 0; }
}

/* Le meme dispositif de couts, pose sur le fond ivoire des pages de
   territoire plutot que sur le beige clair de la page de l'offre. */
.ba-cout--clair { background: var(--ba-beige-poudre); }

/* --- 23.7 Les coordonnees ------------------------------------------------
   Une adresse et un numero n'ont pas besoin d'une boite chacun : ils ont
   besoin d'etre gros et faciles a attraper. */
.ba-coordonnees { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--ba-beige-clair); }
.ba-coordonnees__sceau { width: 86px; height: auto; justify-self: end; align-self: center; }
.ba-coordonnees__liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0; margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.ba-coordonnees__voie {
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.2rem, 3vw, 2.4rem);
  border-left: 1px solid var(--ba-rose-signature);
}
.ba-coordonnees__voie:first-child { padding-left: 0; border-left: 0; }
.ba-coordonnees__voie dt {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--ba-corps); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ba-rose-BD3968);
  margin-bottom: 0.7rem;
}
.ba-coordonnees__voie dt img { width: 20px; height: 20px; opacity: 0.85; }
.ba-coordonnees__voie dd {
  margin: 0;
  font-family: var(--ba-titre);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.24;
  color: var(--ba-rouge-velours);
}
.ba-coordonnees__voie dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ba-rose-fonce); }
.ba-coordonnees__voie dd a:hover { border-bottom-color: var(--ba-rouge-velours); }
@media (max-width: 720px) {
  .ba-coordonnees__voie { padding-left: 0; border-left: 0; border-top: 1px solid var(--ba-rose-signature); }
  .ba-coordonnees__voie:first-child { border-top: 0; }
}

/* La frise, en version sombre : derniere section avant le pied. */
.ba-parcours--sombre {
  background: linear-gradient(152deg, var(--ba-rouge-velours) 0%, var(--ba-noir-prune) 100%);
}
.ba-parcours--sombre h2,
.ba-parcours--sombre .ba-parcours__etape h3 { color: var(--ba-beige-clair); }
.ba-parcours--sombre .ba-parcours__etape p,
.ba-parcours--sombre .ba-entete-decalee__note { color: var(--ba-beige-fonce); }
.ba-parcours--sombre .ba-parcours__frise::before { background: rgba(247, 188, 197, 0.42); }
.ba-parcours--sombre .ba-parcours__etape::before {
  background: var(--ba-noir-prune); border-color: var(--ba-rose-signature);
}
.ba-parcours--sombre .ba-parcours__num { color: var(--ba-rose-signature); }

/* --- 23.8 Les articles ---------------------------------------------------
   Les articles du Journal et les articles lies etaient des cartes bordees
   avec un fond : trois boites de plus. Ici la photographie porte la carte,
   le cadre disparait, et le titre passe devant le reste.

   La regle est plus specifique que `.ba-carte` pour la neutraliser sans y
   toucher : `.ba-carte` sert encore ailleurs. */
.ba-carte.ba-article-carte {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ba-carte.ba-article-carte:hover { transform: none; box-shadow: none; }
.ba-article-carte__media {
  border-radius: var(--ba-rayon-carte);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ba-article-carte__media img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ba-article-carte:hover .ba-article-carte__media img { transform: scale(1.045); }
.ba-article-carte__corps { padding: var(--ba-s-2) 0 0; gap: 0.55em; }
.ba-article-carte__meta {
  font-family: var(--ba-corps); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ba-rose-BD3968);
}
.ba-carte.ba-article-carte h3 {
  font-family: var(--ba-titre);
  font-size: clamp(1.16rem, 1.9vw, 1.44rem);
  line-height: 1.16;
  color: var(--ba-rouge-velours);
}
.ba-carte.ba-article-carte h3 a { color: inherit; }
.ba-carte.ba-article-carte h3 a:hover { color: var(--ba-rose-BD3968); }
.ba-article-carte__corps > p { color: var(--ba-taupe); font-size: 0.94rem; }
.ba-article-carte .ba-lien-fleche { margin-top: auto; padding-top: 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .ba-article-carte__media img { transition: none; }
  .ba-article-carte:hover .ba-article-carte__media img { transform: none; }
}

/* Les articles ouvrent sur la meme affiche que les pages, en un peu plus
   bas : le titre y est plus long, et le corps suit immediatement. */
.ba-entete-affiche--article { min-height: min(62svh, 560px); }
.ba-entete-affiche--article h1 { max-width: 20ch; }

/* Le fil d'Ariane, quand il est pose sur l'affiche sombre d'un article. */
.ba-ariane--clair { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }
.ba-ariane--clair ol { color: var(--ba-beige-fonce); }
.ba-ariane--clair a { color: var(--ba-rose-signature); }
.ba-ariane--clair a:hover { color: var(--ba-beige-clair); }
.ba-ariane--clair li:last-child { color: var(--ba-beige-fonce); opacity: 0.86; }

/* --- 23.9 Le guide, sur sa propre page -----------------------------------
   Meme dispositif que la capture du pied de page, mais c'est ici la piece
   centrale : l'eventail est plus grand et le sommaire porte le detail de
   chaque chapitre. */
.ba-magnet--page { padding-top: clamp(3rem, 6vw, 5rem); }
.ba-magnet--page .ba-magnet__scene { height: clamp(400px, 40vw, 560px); }
.ba-magnet--page .ba-magnet__page { width: clamp(176px, 19vw, 272px); }
.ba-magnet__sommaire--detail li { align-items: flex-start; gap: 1.1rem; }
.ba-magnet__sommaire--detail li > div { display: grid; gap: 0.22rem; }
.ba-magnet__sommaire--detail strong {
  font-family: var(--ba-titre); font-weight: 600;
  font-size: 1.06rem; color: var(--ba-rouge-velours);
}
.ba-magnet__sommaire--detail em {
  font-style: normal; font-size: 0.9rem; color: var(--ba-taupe);
}
.ba-magnet__titre-form {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0.4em;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ba-rouge-velours);
}
.ba-magnet--page .ba-magnet__note { margin: 0 0 1.1rem; }
.ba-magnet__form .ba-consentement + .ba-consentement { margin-top: 0.6rem; }

/* Une phrase de reassurance n'a pas la meme taille qu'une adresse e-mail :
   meme dispositif, corps de texte courant. */
.ba-coordonnees__phrase {
  font-family: var(--ba-corps);
  font-size: 0.95rem; line-height: 1.6;
  color: var(--ba-taupe);
}

/* Textes finaux du 22/09 : préserver le rythme avec les titres plus longs. */
.ba-menu-plein { z-index:101; }
.ba-banniere h1 { font-size:clamp(2.7rem,5.2vw,5.2rem); max-width:18ch; }
.ba-banniere__accroche { max-width:52ch; }
.ba-entete-affiche h1 { font-size:clamp(2.5rem,4.2vw,4.6rem); max-width:24ch; }
.ba-entete-affiche__intro { max-width:72ch; font-size:clamp(1.05rem,1.5vw,1.35rem); }
.ba-entete-affiche__action { margin-top:1.6rem; }
.ba-entete-affiche .ba-titre-accent { color:var(--ba-rose-signature); }
.ba-entete-affiche { min-height:100svh; height:auto; }
.ba-entete-affiche__contenu { padding-bottom:4rem; }
.ba-experience__texte h2 { font-size:clamp(2rem,3.3vw,3.5rem); }
.ba-experience__intro { max-width:52ch; margin:1rem 0 1.8rem; }
.ba-experience__messages { min-height:270px; }
.ba-experience__message h3 { font-size:clamp(1.6rem,2.1vw,2.2rem); }
.ba-experience__message { visibility:hidden; transition:opacity .18s ease,transform .18s ease; }
.ba-experience__message.est-actif { visibility:visible; }
.ba-postale h2 { font-size:clamp(2.6rem,5vw,5rem); }
.ba-benefices-locaux { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,4rem); margin-top:3.5rem; }
.ba-benefices-locaux article { border-top:1px solid var(--ba-rouge-velours); padding-top:1.5rem; }
.ba-benefices-locaux h3 { font-size:1.8rem; margin:.6rem 0 1rem; }
.ba-cout__conclusion { max-width:65ch; margin:2.5rem 0 0 auto; font-size:1.2rem; }
.ba-hospitalite { background:var(--ba-ivoire,#faf5f0); }
.ba-hospitalite__grille { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.ba-hospitalite h2 { font-size:clamp(2.3rem,3.5vw,3.8rem); }
.ba-hospitalite img { width:210px; height:230px; object-fit:cover; margin-top:2rem; transform:rotate(-4deg); }
.ba-hospitalite__texte p { margin-bottom:1.5rem; }
.ba-hospitalite__questions { font-family:var(--ba-titre); font-size:clamp(1.5rem,2vw,2rem); line-height:1.45; color:var(--ba-rouge-velours); border-left:2px solid var(--ba-rouge-velours); padding-left:1.5rem; }
.ba-prestations .ba-entete-decalee h2 { font-size:clamp(2.3rem,3.8vw,4rem); }
.ba-prestations .ba-entete-decalee__note { max-width:40ch; }
@media(max-width:979px){
 .ba-experience__messages { min-height:0; }
 .ba-experience__message { visibility:visible; }
 .ba-benefices-locaux,.ba-hospitalite__grille { grid-template-columns:1fr; }
 .ba-hospitalite img { width:160px; height:180px; }
 .ba-entete-affiche__contenu { padding-top:130px; }
}
@media(max-width:600px){
 .ba-banniere { height:auto; min-height:100svh; }
 .ba-banniere__contenu { padding-top:130px; padding-bottom:150px; }
 .ba-banniere h1 { font-size:2.65rem; }
 .ba-banniere__accroche { font-size:1.12rem; }
 .ba-entete-affiche h1 { font-size:2.45rem; }
 .ba-entete-affiche__contenu { padding-bottom:120px; }
 .ba-entete-affiche__sceau { width:80px; right:1rem; bottom:1rem; }
 .ba-final__titre { font-size:clamp(2.4rem,8vw,3.6rem); }
 .ba-guide { gap:1.5rem; }
}

/* Retours de Laurence : marges, lisibilite et rythme, 4 octobre 2026. */
:root { --ba-espace-section: clamp(48px, 5vw, 72px); }
body { font-size: 19px; line-height: 1.65; }
.ba-large.ba-plein-cadre__contenu,
.ba-large.ba-postale__contenu,
.ba-large.ba-final__contenu { width: min(calc(100% - 2 * var(--ba-s-2)), var(--ba-large-max)); margin-inline: auto; }
.ba-section, .ba-promesse-v2, .ba-prestations, .ba-cout, .ba-detaillees,
.ba-parcours, .ba-questions, .ba-chiffre, .ba-magnet, .ba-coordonnees { padding-block: var(--ba-espace-section); }
.ba-entete-affiche { min-height: min(76svh, 720px); }
.ba-entete-affiche__contenu { padding-top: 150px; padding-bottom: 56px; }
.ba-entete-affiche__intro { font-size: clamp(20px, 1.65vw, 24px); }
.ba-plein-cadre { min-height: 0; }
.ba-plein-cadre__contenu { padding-block: var(--ba-espace-section); }
.ba-plein-cadre__voile { background: linear-gradient(90deg, rgba(43,10,18,.83), rgba(43,10,18,.52)); }
.ba-plein-cadre p, .ba-plein-cadre__moments li { color: var(--ba-beige-clair); font-size: 19px; }
.ba-plein-cadre h2 { max-width: 23ch; }
.ba-plein-cadre__moments { max-width: 65ch; }
.ba-plein-cadre__moments li { padding-left: 0; }
.ba-plein-cadre__moments li::before { content: none; }
.ba-detaillee { margin-top: clamp(32px, 4vw, 56px); }
.ba-detaillee__items li { padding-left: 0; font-size: 18px; }
.ba-detaillee__items li::before { content: none; }
.ba-prestation-v2 p, .ba-valeur p, .ba-parcours__item p, .ba-parcours__etape p,
.ba-entete-decalee__note, .ba-accordeon__contenu p,
.ba-deux-voies p, .ba-voie p { font-size: 18px; }
.ba-bouton, .ba-lien-fleche, .ba-champ input, .ba-champ select,
.ba-champ textarea { font-size: 17px; }
.ba-consentement, .ba-magnet__note { font-size: 15px; }
.ba-voie > p[style] { font-size: 18px !important; }
.ba-detaillee__label { font-size: 14px; }
.ba-prestations__suite, .ba-promesse-v2__suite { margin-top: 28px; }
.ba-entete-decalee { margin-bottom: 36px; }
.ba-parcours__etape::before { content: none; }
.ba-ariane li + li::before { content: none; }
.ba-ariane ol { gap: 16px; }

/* Lisibilite des sequences animees, dont la mecanique reste intacte. */
.ba-experience__numero { font-size: 16px; }
.ba-experience__message p { font-size: 18px; }
.ba-postale__texte { font-size: 20px; }
.ba-final { min-height: 0; }
.ba-final__contenu { padding-block: var(--ba-espace-section); }
.ba-final__signe { margin-top: 32px; }
.ba-final__texte { font-size: 20px; }
.ba-portrait-collage { gap: clamp(28px, 5vw, 64px); }
.ba-relation-visuel { margin: 0; }
.ba-relation-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ba-relation-section .ba-citation { margin: 24px 0; }
.ba-relation-section .ba-portrait-collage__texte { margin-top: 0; }

@media(max-width: 980px) {
  .ba-experience__scene { padding-block: var(--ba-espace-section); }
}
@media(max-width: 600px) {
  :root { --ba-s-2: 24px; }
  body { font-size: 18px; }
  .ba-entete-affiche { min-height: 0; }
  .ba-entete-affiche__contenu { padding-top: 125px; padding-bottom: 108px; }
  .ba-entete-affiche__intro { font-size: 20px; }
  .ba-banniere { min-height: min(820px,100svh); }
  .ba-banniere__contenu { padding-top: 132px; padding-bottom: 128px; }
  .ba-banniere__accroche { font-size: 19px; }
  .ba-plein-cadre p, .ba-plein-cadre__moments li { font-size: 18px; }
  .ba-final__titre { font-size: 38px; }
}

/* Demande Laurence du 7 octobre : jonction Intendance / Le point de depart.
   Les deux blocs nommes appartiennent a la page Accompagnement. */
.ba-entete-affiche + .ba-plein-cadre[aria-labelledby="t-probleme"] {
  border-top: 2px solid #fff;
}

/* Les destinations du menu restent visibles sous l'en-tete fixe. */
#commission, #demarrer, #parlons { scroll-margin-top: 112px; }