/* =========================================================================
   BELLE ADRESSE : styles des blocs
   Un bloc = une section = un futur bloc Gutenberg.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BANNIÈRE VIDÉO

   Plein ecran reel. La barre de navigation est POSEE dessus : la banniere
   occupe donc toute la hauteur, pas la hauteur moins un bandeau. 100svh et
   non 100vh : sur mobile, vh compte la barre d'adresse du navigateur et
   coupe le bas du cadre au premier defilement.
   ------------------------------------------------------------------------- */
.ba-banniere {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ba-noir-prune);
}
@supports not (min-height: 100svh) {
  .ba-banniere { min-height: 100vh; }
}
.ba-banniere__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ba-banniere__media video,
.ba-banniere__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Voile : le texte doit rester lisible sur toute la duree de la video,
   pas seulement sur la premiere image. Deux voiles superposes : le premier
   assombrit le bas, le second protege la colonne de texte a gauche.
   Necessaire parce que la video est bien plus claire que le poster.
   Un troisieme, tres leger en haut, tient les liens de la barre. */
.ba-banniere__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(43,10,18,0.44) 0%,
      rgba(43,10,18,0.16) 14%,
      rgba(43,10,18,0.00) 26%),
    linear-gradient(to right,
      rgba(43,10,18,0.78) 0%,
      rgba(43,10,18,0.58) 34%,
      rgba(43,10,18,0.20) 64%,
      rgba(43,10,18,0.08) 100%),
    linear-gradient(to top,
      rgba(43,10,18,0.74) 0%,
      rgba(43,10,18,0.32) 42%,
      rgba(43,10,18,0.10) 72%,
      rgba(43,10,18,0.00) 100%);
}
@media (max-width: 860px) {
  /* En mobile le texte occupe toute la largeur : le voile lateral ne suffit
     pas. Le voile est fort SOUS le texte et faible au-dessus, la video reste
     visible dans le tiers haut. Contraste mesure sur les 15 s : jamais
     sous 6,2 pour le demi-titre, jamais sous 7,4 pour le titre. */
  .ba-banniere__voile {
    background:
      linear-gradient(to bottom,
        rgba(43,10,18,0.50) 0%,
        rgba(43,10,18,0.14) 18%,
        rgba(43,10,18,0.00) 30%),
      linear-gradient(to top,
        rgba(43,10,18,0.88) 0%,
        rgba(43,10,18,0.72) 42%,
        rgba(43,10,18,0.28) 74%,
        rgba(43,10,18,0.10) 100%);
  }
}
.ba-banniere__contenu {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: var(--ba-s-6) clamp(var(--ba-s-5), 9vh, var(--ba-s-7));
  color: var(--ba-beige-clair);
}
/* Le sur-titre : fin, tres espace, il annonce le metier et le territoire. */
.ba-banniere__surtitre {
  display: block;
  font-family: var(--ba-corps);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ba-rose-signature);
  margin-bottom: var(--ba-s-2);
}
.ba-banniere h1 {
  color: var(--ba-beige-clair);
  /* Nettement plus grand : le titre doit tenir l'ecran, pas le decorer. */
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin-bottom: var(--ba-s-2);
}
.ba-banniere__accroche {
  font-family: var(--ba-titre);
  font-weight: 500;
  font-size: clamp(1.1rem, 0.92rem + 0.7vw, 1.45rem);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ba-beige-fonce);
  margin-bottom: var(--ba-s-3);
}
.ba-banniere__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-s-3); }

/* Filet vertical + mention de defilement, comme un pied de composition. */
.ba-banniere__defiler {
  position: absolute; left: 50%; bottom: var(--ba-s-2); z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7em;
  color: var(--ba-beige-clair);
  font-family: var(--ba-corps);
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; opacity: 0.72;
  transition: opacity 300ms ease;
}
.ba-banniere__defiler:hover { opacity: 1; }
.ba-banniere__defiler i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, currentColor);
}
@media (max-width: 860px) { .ba-banniere__defiler { display: none; } }

.ba-banniere__lecture {
  position: absolute; right: var(--ba-marge); bottom: var(--ba-s-2); z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(253,232,225,0.42);
  background: rgba(67,16,29,0.32);
  backdrop-filter: blur(6px);
  color: var(--ba-beige-clair);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--ba-transition), border-color var(--ba-transition);
}
.ba-banniere__lecture:hover { background: var(--ba-rouge-velours); border-color: var(--ba-beige-clair); }

/* -------------------------------------------------------------------------
   BANDEAU DE REPÈRES sous la bannière
   ------------------------------------------------------------------------- */
.ba-reperes {
  background: var(--ba-rouge-velours);
  color: var(--ba-beige-poudre);
  padding-block: var(--ba-s-3);
}
.ba-reperes__liste {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.ba-reperes__item {
  display: flex; align-items: center; gap: var(--ba-s-2);
  padding-inline: var(--ba-s-3);
  border-left: 1px solid rgba(253,232,225,0.22);
}
.ba-reperes__item:first-child { border-left: 0; padding-left: 0; }
.ba-reperes__item img { width: 34px; height: 34px; flex: 0 0 auto; margin: 0;
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(390%) hue-rotate(304deg) brightness(102%) contrast(98%); }
.ba-reperes__texte { font-size: 0.95rem; line-height: 1.35; }
.ba-reperes__texte strong { display: block; font-weight: 700; }
.ba-reperes__texte span { color: var(--ba-rose-signature); font-size: 0.85rem; }

@media (max-width: 860px) {
  .ba-reperes__liste { grid-template-columns: 1fr; gap: var(--ba-s-2); }
  .ba-reperes__item { border-left: 0; padding-inline: 0; }
}

/* -------------------------------------------------------------------------
   LA PROMESSE
   ------------------------------------------------------------------------- */
.ba-promesse { text-align: center; }
.ba-promesse h2 {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem);
  max-width: 20ch;
  margin-inline: auto;
}
.ba-promesse p { margin-inline: auto; max-width: 56ch; }
.ba-promesse__sceau { width: 74px; margin: 0 auto var(--ba-s-3); opacity: 0.9; }

/* -------------------------------------------------------------------------
   PRESTATIONS
   ------------------------------------------------------------------------- */
.ba-prestation { display: flex; flex-direction: column; height: 100%; }
.ba-prestation__num {
  font-family: var(--ba-titre);
  font-size: 0.9rem; letter-spacing: 0.16em;
  color: var(--ba-rose-EE9FAE); margin-bottom: var(--ba-s-1);
}
.ba-prestation p { font-size: 0.97rem; color: var(--ba-taupe); }

/* Alternance image et texte */
.ba-alterne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ba-s-5); align-items: center; }
.ba-alterne--inverse .ba-alterne__media { order: 2; }
.ba-alterne__media > img:not(.ba-alterne__sceau) { border-radius: var(--ba-rayon-carte); width: 100%; }
.ba-alterne__media { position: relative; }
.ba-alterne__media > img.ba-alterne__sceau { position: absolute; right: -26px; bottom: -26px; width: 96px; height: auto; border-radius: 0; }
@media (max-width: 860px) {
  .ba-alterne { grid-template-columns: 1fr; gap: var(--ba-s-3); }
  .ba-alterne--inverse .ba-alterne__media { order: 0; }
  .ba-alterne__media > img.ba-alterne__sceau { right: 8px; bottom: -20px; width: 66px; }
}

/* -------------------------------------------------------------------------
   LES ÉTAPES
   ------------------------------------------------------------------------- */
.ba-etapes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ba-s-4); }
.ba-etapes::before {
  content: ""; position: absolute; top: 22px; left: 8%; right: 8%;
  height: 1px; background: var(--ba-liseret);
}
.ba-etape { position: relative; }
.ba-etape__pastille {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ba-beige-poudre);
  border: 1px solid var(--ba-rouge-velours);
  color: var(--ba-rouge-velours);
  font-family: var(--ba-titre); font-weight: 700; font-size: 1.05rem;
  margin-bottom: var(--ba-s-2);
  position: relative; z-index: 1;
}
.ba-section--claire .ba-etape__pastille { background: var(--ba-fond-alt); }
@media (max-width: 860px) {
  .ba-etapes { grid-template-columns: 1fr; gap: var(--ba-s-3); }
  .ba-etapes::before { top: 0; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; }
}

/* -------------------------------------------------------------------------
   VALEURS
   ------------------------------------------------------------------------- */
/* Le sceau decoratif deborde volontairement a droite. C'est la SECTION qui
   doit le rogner, pas le corps de page : un overflow pose sur body ne suffit
   pas toujours et laisse le document plus large que la vue. */
.ba-valeurs { position: relative; overflow: hidden; }
.ba-valeurs__sceau {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 380px; opacity: 0.22; pointer-events: none; z-index: 0;
}
.ba-valeurs .ba-large { position: relative; z-index: 1; }
.ba-valeur h3 { font-size: 1.4rem; margin-bottom: var(--ba-s-1); }
.ba-valeur p { font-size: 0.95rem; color: var(--ba-taupe); }
@media (max-width: 1100px) { .ba-valeurs__sceau { display: none; } }

/* -------------------------------------------------------------------------
   PORTRAIT
   ------------------------------------------------------------------------- */
.ba-portrait__cadre {
  position: relative;
  background: var(--ba-rose-clair);
  border-radius: var(--ba-rayon-carte);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  border: 1px solid var(--ba-liseret);
}
.ba-portrait__cadre > img { width: 100%; height: 100%; object-fit: cover; }
/* Emplacement en attente : jamais un portrait d'emprunt */
.ba-portrait__attente { text-align: center; padding: var(--ba-s-3); color: var(--ba-taupe); }
.ba-portrait__attente > img { width: 84px; height: auto; margin: 0 auto var(--ba-s-2); opacity: 0.6; }
.ba-portrait__signature { width: 260px; margin-top: var(--ba-s-3); }

/* -------------------------------------------------------------------------
   ZONE D'INTERVENTION
   ------------------------------------------------------------------------- */
/* La carte etait enfermee dans une boite bordee de 340 px de haut, avec un
   SVG plafonne a 400 px : une vignette au milieu d'un cadre, et un grand vide
   sous elle des que la colonne voisine etait longue. Elle est desormais
   traitee comme une planche : pas de bordure, un lavis rose de la charte
   (p.11) qui deborde legerement, et la carte a sa taille reelle. */
.ba-zone__carte {
  position: relative;
  display: block;
  padding: 0;
}
.ba-zone__carte::before {
  /* Le lavis debordait de 8 % de chaque cote. Sur les grandes largeurs
     la marge de page l'absorbait ; entre 768 et 1280 il poussait le
     document et la page defilait de 10 a 21 px en horizontal. Un
     pseudo-element n'apparait dans aucun parcours du DOM : il a fallu
     mesurer le document lui-meme pour le voir. Le debord vertical, lui,
     ne coute rien. */
  content: ""; position: absolute; inset: -8% 0 -6%;
  /* Un lavis IVOIRE, pas rose : la section de la page Lille est deja peche,
     et un halo rose sur du peche ne detachait rien du tout. Sur les sections
     ivoire, ce voile ne se voit pas : c'est voulu. */
  background: radial-gradient(56% 60% at 52% 44%,
              rgba(255, 249, 249, 0.92) 0%,
              rgba(255, 249, 249, 0.55) 48%,
              rgba(255, 249, 249, 0) 76%);
  pointer-events: none;
}
/* <picture> est en ligne par defaut : sans ce display:block, la largeur de
   l'image resolue en pourcentage n'a pas de reference. */
.ba-zone__carte picture { display: block; position: relative; }
.ba-zone__svg {
  position: relative;
  display: block;
  width: 100%; height: auto;
  max-width: 680px;
  margin-inline: auto;
}
/* La carte manquait de presence dans une demi-colonne. Premiere tentative :
   une marge negative pour la faire deborder : a 1280 son bord gauche passait
   a -6 px et « Boulogne-sur-Mer » se faisait couper par l'ecran. C'est donc
   la COLONNE qui s'elargit, et seulement dans les sections qui portent une
   carte : rien ne sort jamais du conteneur.
   Sans :has(), les colonnes restent egales et la carte reste lisible. */
@media (min-width: 981px) {
  .ba-alterne:has(.ba-zone__carte) { grid-template-columns: 1.15fr 1fr; }
  .ba-alterne--inverse:has(.ba-zone__carte) { grid-template-columns: 1fr 1.15fr; }
}
@media (max-width: 980px) {
  .ba-zone__svg { max-width: 480px; }
  .ba-zone__carte::before { inset: -6% 0; }
}
.ba-zone__liste { list-style: none; margin: 0; padding: 0; columns: 2; gap: var(--ba-s-3); }
.ba-zone__liste li {
  break-inside: avoid; padding: 0.4em 0 0.4em 1.4em; position: relative;
  font-size: 0.95rem; color: var(--ba-taupe);
}
.ba-zone__liste li::before {
  content: " "; position: absolute; left: 0.3em; top: 0.35em;
  color: var(--ba-rose-EE9FAE); font-size: 1.3em; line-height: 1;
}
@media (max-width: 640px) { .ba-zone__liste { columns: 1; } }

/* -------------------------------------------------------------------------
   ANNONCES TYPES
   La mention « Exemple » doit être impossible à manquer et impossible
   à confondre avec un bien réellement en intendance.
   ------------------------------------------------------------------------- */
.ba-annonce {
  position: relative;
  background: var(--ba-fond-alt);
  border: 1px solid var(--ba-liseret);
  border-radius: var(--ba-rayon-carte);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--ba-transition), box-shadow var(--ba-transition);
}
.ba-annonce:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(67,16,29,0.09); }
.ba-annonce__media { position: relative; aspect-ratio: 4 / 3; background: var(--ba-rose-clair); }
.ba-annonce__media img { width: 100%; height: 100%; object-fit: cover; }
.ba-annonce__etiquette {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--ba-rouge-velours);
  color: var(--ba-beige-poudre);
  font-family: var(--ba-corps);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 0.9em;
  border-radius: var(--ba-rayon);
}
.ba-annonce__corps { padding: var(--ba-s-2); display: flex; flex-direction: column; gap: var(--ba-s-1); flex: 1; }
.ba-annonce__corps h3 { font-size: 1.25rem; margin: 0; }
.ba-annonce__criteres { display: flex; flex-wrap: wrap; gap: var(--ba-s-2); list-style: none; margin: 0; padding: 0; }
.ba-annonce__criteres li { display: flex; align-items: center; gap: 0.45em; font-size: 0.85rem; color: var(--ba-taupe); }
.ba-annonce__criteres img { width: 22px; height: 22px; margin: 0; }
/* Les criteres tiennent sur une rangee ou deux selon la longueur des
   libelles : les descriptions ne demarraient donc pas a la meme hauteur
   d'une carte a l'autre. On reserve deux rangees des que les cartes sont
   alignees cote a cote. Mesure : 22px d'icone, 28px de gouttiere. */
@media (min-width: 861px) {
  /* Deux lignes reservees au titre AUSSI : sans cela un titre long
     decalait a lui seul le depart de la description de 22px. */
  .ba-annonce__corps h3 { min-height: 2.2em; }
  .ba-annonce__criteres { min-height: calc(44px + var(--ba-s-2)); }
}
.ba-annonce__note {
  margin-top: auto; padding-top: var(--ba-s-1);
  font-size: 0.8rem; color: var(--ba-taupe); font-style: italic;
  border-top: 1px solid var(--ba-liseret);
}

/* -------------------------------------------------------------------------
   ACCORDÉON
   ------------------------------------------------------------------------- */
.ba-accordeon { border-top: 1px solid var(--ba-liseret); }
.ba-accordeon__item { border-bottom: 1px solid var(--ba-liseret); }
.ba-accordeon__bouton {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ba-s-2);
  background: none; border: 0; cursor: pointer;
  padding: var(--ba-s-2) 0;
  font-family: var(--ba-titre);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 500;
  color: var(--ba-rouge-velours);
  text-align: left;
  transition: color var(--ba-transition);
}
.ba-accordeon__bouton:hover { color: var(--ba-survol); }
.ba-accordeon__signe { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.ba-accordeon__signe::before,
.ba-accordeon__signe::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; transition: transform var(--ba-transition);
}
.ba-accordeon__signe::after { transform: rotate(90deg); }
.ba-accordeon__bouton[aria-expanded="true"] .ba-accordeon__signe::after { transform: rotate(0deg); }
.ba-accordeon__panneau {
  overflow: hidden;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--ba-transition);
}
.ba-accordeon__panneau[data-ouvert="true"] { grid-template-rows: 1fr; }
.ba-accordeon__panneau > div { overflow: hidden; }
.ba-accordeon__panneau p { padding-bottom: var(--ba-s-2); color: var(--ba-taupe); }
@media (prefers-reduced-motion: reduce) { .ba-accordeon__panneau { transition: none; } }

/* -------------------------------------------------------------------------
   ENCART GUIDE (lead magnet)
   ------------------------------------------------------------------------- */
.ba-guide {
  background: var(--ba-rose-clair);
  border: 1px solid var(--ba-rose-signature);
  border-radius: var(--ba-rayon-carte);
  padding: clamp(var(--ba-s-3), 4vw, var(--ba-s-5));
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--ba-s-3); align-items: center;
}
.ba-guide__picto { width: 76px; height: auto; margin: 0; }
.ba-guide h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); margin-bottom: 0.4em; }
.ba-guide p { margin: 0; font-size: 0.97rem; color: var(--ba-taupe); }
@media (max-width: 860px) {
  .ba-guide { grid-template-columns: 1fr; text-align: left; }
  .ba-guide__picto { width: 62px; }
}

/* -------------------------------------------------------------------------
   SIGNATURE DE MARQUE, pleine largeur
   ------------------------------------------------------------------------- */
.ba-signature { text-align: center; position: relative; overflow: hidden; }
.ba-signature__image {
  width: min(560px, 82%); margin: 0 auto var(--ba-s-3);
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(390%) hue-rotate(304deg) brightness(102%) contrast(98%);
}
.ba-signature__actions { display: flex; flex-wrap: wrap; gap: var(--ba-s-2); justify-content: center; }
.ba-signature__filigrane {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 620px; opacity: 0.07; pointer-events: none;
}

/* -------------------------------------------------------------------------
   DOUBLE VOIE : écrire ou se parler
   ------------------------------------------------------------------------- */
.ba-voies { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--ba-s-4); align-items: start; }
.ba-voie {
  background: var(--ba-fond-alt);
  border: 1px solid var(--ba-liseret);
  border-radius: var(--ba-rayon-carte);
  padding: clamp(var(--ba-s-3), 3vw, var(--ba-s-4));
}
.ba-voie__entete { display: flex; align-items: center; gap: var(--ba-s-2); margin-bottom: var(--ba-s-2); }
.ba-voie__entete img { width: 40px; height: 40px; margin: 0; }
.ba-voie__entete h3 { margin: 0; }
.ba-calendly { min-height: 620px; border-radius: var(--ba-rayon); overflow: hidden; }
.ba-calendly__attente {
  min-height: 320px; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--ba-rose-signature); border-radius: var(--ba-rayon);
  padding: var(--ba-s-3); color: var(--ba-taupe);
}
@media (max-width: 980px) { .ba-voies { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   JOURNAL
   ------------------------------------------------------------------------- */
.ba-filtres { display: flex; flex-wrap: wrap; gap: var(--ba-s-1); margin-bottom: var(--ba-s-4); }
.ba-filtre {
  font-family: var(--ba-corps); font-size: 0.85rem; font-weight: 500;
  padding: 0.55em 1.2em; border-radius: 999px;
  border: 1px solid var(--ba-liseret); background: transparent;
  color: var(--ba-taupe); cursor: pointer;
  transition: all var(--ba-transition);
}
.ba-filtre[aria-pressed="true"] {
  background: var(--ba-rouge-velours); border-color: var(--ba-rouge-velours);
  color: var(--ba-beige-poudre);
}
.ba-filtre:hover { border-color: var(--ba-rouge-velours); color: var(--ba-rouge-velours); }
.ba-filtre[aria-pressed="true"]:hover { color: var(--ba-beige-poudre); }

.ba-article-carte { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ba-article-carte__media { aspect-ratio: 16 / 10; background: var(--ba-rose-clair); }
.ba-article-carte__media img { width: 100%; height: 100%; object-fit: cover; }
.ba-article-carte__corps { padding: var(--ba-s-2); display: flex; flex-direction: column; gap: 0.6em; flex: 1; }
.ba-article-carte__meta {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ba-taupe);
}
.ba-article-carte h3 { font-size: 1.2rem; margin: 0; line-height: 1.25; }
.ba-article-carte h3 a { text-decoration: none; }
.ba-article-carte p { font-size: 0.92rem; color: var(--ba-taupe); margin: 0; }
.ba-article-carte .ba-lien-fleche { margin-top: auto; font-size: 0.8rem; }

/* Corps d'article */
.ba-article-corps { max-width: 68ch; }
.ba-article-corps h2 { margin-top: var(--ba-s-5); }
.ba-article-corps h3 { margin-top: var(--ba-s-3); }
.ba-article-corps ul, .ba-article-corps ol { padding-left: 1.3em; margin-bottom: var(--ba-s-2); }
.ba-article-corps li { margin-bottom: 0.5em; }
.ba-article-corps blockquote {
  margin: var(--ba-s-3) 0; padding-left: var(--ba-s-2);
  border-left: 2px solid var(--ba-rose-signature);
  font-family: var(--ba-titre); font-size: 1.25rem; font-style: italic;
  color: var(--ba-rouge-velours);
}
.ba-sommaire {
  background: var(--ba-fond-alt); border: 1px solid var(--ba-liseret);
  border-radius: var(--ba-rayon-carte); padding: var(--ba-s-2) var(--ba-s-3);
  margin-bottom: var(--ba-s-4);
}
.ba-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ba-sommaire li { counter-increment: s; padding: 0.35em 0 0.35em 2em; position: relative; font-size: 0.93rem; }
.ba-sommaire li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; color: var(--ba-rose-EE9FAE);
  font-family: var(--ba-titre); font-size: 0.85rem;
}

/* Fil d'Ariane */
.ba-ariane { font-size: 0.82rem; color: var(--ba-taupe); padding-block: var(--ba-s-2); }
.ba-ariane ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; }
.ba-ariane li::after { content: " "; margin-left: 0.5em; color: var(--ba-rose-EE9FAE); }
.ba-ariane li:last-child::after { content: none; }

/* -------------------------------------------------------------------------
   PIED DE PAGE
   ------------------------------------------------------------------------- */
.ba-pied {
  background: var(--ba-rouge-velours);
  color: var(--ba-beige-fonce);
  padding-top: var(--ba-s-6);
  position: relative; overflow: hidden;
}
.ba-pied a { color: var(--ba-beige-poudre); text-decoration: none; }
.ba-pied a:hover { color: var(--ba-rose-signature); text-decoration: underline; }
.ba-pied__haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--ba-s-4); }
.ba-pied__verrou { width: 190px; margin-bottom: var(--ba-s-2); }
.ba-pied h4 {
  font-family: var(--ba-corps); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ba-rose-signature); margin-bottom: var(--ba-s-2);
}
.ba-pied ul { list-style: none; margin: 0; padding: 0; }
.ba-pied li { margin-bottom: 0.6em; font-size: 0.93rem; }
.ba-pied__reseaux { display: flex; gap: var(--ba-s-1); margin-top: var(--ba-s-2); }
.ba-pied__reseaux img { width: 30px; height: 30px; margin: 0;
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(390%) hue-rotate(304deg) brightness(102%) contrast(98%); }
.ba-pied__nom {
  margin-top: var(--ba-s-5);
  width: 100%; opacity: 0.16;
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(390%) hue-rotate(304deg) brightness(102%) contrast(98%);
}
.ba-pied__bas {
  border-top: 1px solid rgba(253,232,225,0.18);
  margin-top: var(--ba-s-3);
  padding-block: var(--ba-s-2) var(--ba-s-3);
  display: flex; flex-wrap: wrap; gap: var(--ba-s-2) var(--ba-s-3);
  justify-content: space-between; align-items: center;
  font-size: 0.82rem; color: var(--ba-rose-EE9FAE);
}
.ba-pied__bas ul { display: flex; flex-wrap: wrap; gap: var(--ba-s-2); }
@media (max-width: 980px) { .ba-pied__haut { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ba-pied__haut { grid-template-columns: 1fr; gap: var(--ba-s-3); } }

/* Retour en haut, porté par le monogramme */
.ba-haut {
  position: fixed; right: var(--ba-s-2); bottom: var(--ba-s-2); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ba-beige-poudre);
  border: 1px solid var(--ba-rose-signature);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 26px rgba(67,16,29,0.14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--ba-transition), transform var(--ba-transition), visibility var(--ba-transition);
}
.ba-haut[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.ba-haut img { width: 24px; height: auto; margin: 0; }

/* -------------------------------------------------------------------------
   EN-TÊTE DE PAGE INTERNE
   ------------------------------------------------------------------------- */
.ba-entete-page {
  position: relative; overflow: hidden;
  background: var(--ba-fond-alt);
  padding-block: clamp(var(--ba-s-5), 7vw, var(--ba-s-7)) clamp(var(--ba-s-4), 5vw, var(--ba-s-6));
  border-bottom: 1px solid var(--ba-liseret);
}
.ba-entete-page__filigrane {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 420px; opacity: 0.5; pointer-events: none;
}
.ba-entete-page .ba-large { position: relative; z-index: 1; }
.ba-entete-page p { font-size: 1.08rem; color: var(--ba-taupe); max-width: 58ch; }
@media (max-width: 980px) { .ba-entete-page__filigrane { display: none; } }