/* ===== Widget Hero accueil — activités (braillard-hero-home) =====
   V2 carousel inversé / V3 pile d'images sous le curseur (propositions Avrile,
   PDF « Hero home » 15.08.26 ; V3 = mécanique bridget.pictures). */

/* Plein cadre : on annule le padding du conteneur Elementor qui porte le widget. */
/* ⚠️ Conteneur « boxed » (défaut Elementor) : le padding de 10px est porté par
   .e-con-inner, pas par .e-con -> il faut viser les deux (sinon liseré blanc de
   10px au-dessus du hero). On neutralise aussi les variables et le gap. */
.e-con:has(> .elementor-widget-braillard-hero-home),
.e-con:has(> .e-con-inner > .elementor-widget-braillard-hero-home),
.e-con-inner:has(> .elementor-widget-braillard-hero-home){
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px;
  padding: 0 !important; max-width: none !important; gap: 0 !important;
}
.elementor-widget-braillard-hero-home, .elementor-widget-braillard-hero-home > .elementor-widget-container{ margin: 0 !important; padding: 0 !important; }
.elementor-widget-braillard-hero-home{ width: 100%; }

.br-hh-wrap{
  --hh-pad: clamp(20px, 3.24vw, 56px);
  --hh-bar: 0px;
  --hh-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px));   /* hauteur utile du hero */
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  font-family: var(--br-font-body); color: var(--br-black, #000);
}
.br-hh-wrap--bar{ --hh-bar: 48px; }
/* Le header du site est sticky (il occupe la hauteur) : on remonte le hero dessous.
   --br-hh-header est posé par hero-home.js (hauteur réelle du header). */
.br-hh-wrap--under{ margin-top: calc(-1 * var(--br-hh-header, 0px)); }

.br-hh[hidden]{ display: none !important; }
.br-hh__figure{
  font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.br-hh-wrap--figtitle .br-hh__figure{ white-space: normal; line-height: 1.08; }
.br-hh__title{ font-family: var(--br-font-body) !important; font-weight: 500 !important; font-style: normal !important; font-size: var(--br-fs-text) !important; line-height: 1.25; margin: 0 0 .6em !important; color: inherit; }
.br-hh__title:empty{ display: none; }
/* Corps de texte aligné sur les autres modules de la home (token --br-fs-text = 20px). */
.br-hh__text{ font-size: var(--br-fs-text); line-height: var(--br-lh-body); margin: 0; }
.br-hh__fade{ transition: opacity .4s ease; }
.br-hh__fade.is-out{ opacity: 0; }
.br-hh__more{ display: inline-flex; align-items: center; gap: 14px; font-size: 16px; color: inherit; text-decoration: none; transition: transform .3s ease; }
.br-hh__more:hover{ transform: translateX(5px); }
/* Flèche « En savoir plus » à la couleur du pilier de l'activité affichée (--c posé par PHP puis hero-home.js). */
.br-hh__more .br-hh__arr{ color: var(--c, currentColor); transition: color .4s ease; }
.br-hh__arr{ width: clamp(70px, 6vw, 92px); height: auto; display: block; }
.br-hh__noimg{ display: block; width: 100%; height: 100%; background: #d9d6d0; }

/* ------------------------------ V1 ------------------------------ */
/* Fond plein écran : photo de l'activité (fondu d'une activité à l'autre) ou vidéo
   si une vidéo est fournie dans Elementor. Par-dessus, à mi-hauteur : logo blanc à
   GAUCHE, texte aligné à DROITE (maquette Avrile, PDF « Hero home », proposition V1). */
.br-hh--v1{ position: relative; height: var(--hh-h); min-height: 620px; overflow: hidden; background: #111; color: var(--br-white, #fff);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px); align-items: center; column-gap: clamp(24px, 4vw, 64px); }
.br-hh1__media{ position: absolute; inset: 0; cursor: none;   /* remplacé par la pastille .br-hh__dot (compteur), cf. hero-home.js */ }
.br-hh1__slide{ position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.br-hh1__slide.is-on{ opacity: 1; }
.br-hh1__slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.br-hh1__video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.br-hh--v1.has-video .br-hh1__slide{ display: none; }            /* la vidéo remplace les photos */
.br-hh1__media::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--hh1-dim, .38)); pointer-events: none; }
/* Voile dégradé sur la moitié droite : le texte blanc reste lisible même sur une photo
   claire, sans assombrir toute l'image. */
.br-hh1__media::before{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 34%, rgba(0,0,0,0) 62%); }
/* Logo à gauche, à mi-hauteur (le logo noir du header est masqué pendant ce temps). */
.br-hh1__logo{ position: relative; z-index: 3; grid-column: 1; justify-self: start; align-self: center;
  width: min(46vw, 560px); height: auto; margin-left: clamp(20px, 4.6vw, 80px); margin-bottom: calc(var(--hh-bar) / 2); pointer-events: none; }
/* Texte à droite, aligné à droite, sur la même bande horizontale que le logo. */
.br-hh1__inner{ position: relative; z-index: 4; grid-column: 2; justify-self: end; align-self: center;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  width: min(100%, 680px); padding-right: var(--hh-pad); margin-bottom: calc(var(--hh-bar) / 2); pointer-events: none; }
.br-hh1__inner a{ pointer-events: auto; }                         /* seul le lien reste cliquable : le reste du fond = activité suivante */
.br-hh--v1 .br-hh__figure{ font-size: clamp(30px, 3vw, 52px); margin-bottom: clamp(12px, 1.8vh, 22px); }
.br-hh--v1 .br-hh__eyebrow{ align-self: flex-end; }
.br-hh-wrap--figtitle .br-hh--v1 .br-hh__figure{ font-size: clamp(30px, 3vw, 52px); }
.br-hh--v1 .br-hh__date{ color: inherit; }
.br-hh--v1 .br-hh__text{ margin-bottom: clamp(22px, 3.5vh, 40px); }
/* Sur photo, la couleur du pilier passerait mal : la flèche reste blanche en V1. */
.br-hh--v1 .br-hh__more .br-hh__arr{ color: currentColor !important; }
/* V1 : « En savoir plus » à la taille du texte, en Medium et avec une majuscule
   (client 2026-09-30). Majuscule par CSS pour ne pas toucher au libellé partagé
   avec la V2/V3 ni aux traductions ; ::first-letter exige un display non inline. */
.br-hh--v1 .br-hh__more span{ display: inline-block; font-size: var(--fs-body, 20px); font-weight: 500; }
.br-hh--v1 .br-hh__more span::first-letter{ text-transform: uppercase; }
.br-hh1__count{ position: absolute; right: var(--hh-pad); bottom: calc(var(--hh-bar) + 22px); z-index: 4; font-size: 12px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
/* Le logo noir du header serait illisible sur la photo : il est masqué tant que la V1 est
   à l'écran (même mécanique que la V2, classe posée par hero-home.js). */

/* ------------------------------ V2 ------------------------------ */
.br-hh--v2{ position: relative; height: var(--hh-h); min-height: 640px; display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); overflow: hidden; }
/* Clic sur la photo = news suivante -> curseur = flèche du design (blanche, halo sombre
   pour rester lisible sur les photos claires), hotspot au centre ; e-resize en repli. */
.br-hh2__media{ position: relative; background: #111; overflow: hidden;
  cursor: none;   /* remplacé par la pastille .br-hh__dot (compteur), cf. hero-home.js */ }
.br-hh2__slide{ position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.br-hh2__slide.is-on{ opacity: 1; }
.br-hh2__slide img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.br-hh2__media::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); pointer-events: none; }
.br-hh2__logo{ position: absolute; left: 5%; top: calc(50% - var(--hh-bar) / 2); transform: translateY(-50%); width: min(60%, 440px); height: auto; z-index: 5; pointer-events: none; }
.br-hh2__panel{ position: relative; background: var(--br-white, #fff); display: flex; align-items: center; justify-content: center; padding: clamp(90px, 14vh, 150px) var(--hh-pad) calc(var(--hh-bar) + clamp(40px, 7vh, 80px)); }
.br-hh2__inner{ width: min(100%, 480px); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.br-hh--v2 .br-hh__figure{ font-size: clamp(56px, 6.4vw, 112px); align-self: center; margin-bottom: clamp(20px, 3vh, 38px); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure{ font-size: clamp(34px, 3.4vw, 60px); align-self: flex-end; }
.br-hh--v2 .br-hh__text{ margin-bottom: clamp(30px, 5vh, 56px); }
.br-hh2__count{ position: absolute; right: var(--hh-pad); bottom: calc(var(--hh-bar) + 22px); font-size: 12px; color: #8a857e; font-variant-numeric: tabular-nums; }
/* Le logo du header (noir, en haut à gauche) serait invisible sur la photo : on le
   masque tant que la V2 est affichée et que la page n'a pas défilé (le logo blanc
   de la maquette est dans l'image). */
/* Classe posée par hero-home.js tant que le hero V2 est À L'ÉCRAN : couvre aussi le
   monogramme (badge) qui apparaît au scroll -> jamais 2 logos en même temps. */
.br-header .br-header__logo{ transition: opacity .25s ease; }
body.br-hh-v2-cover .br-header .br-header__logo{ opacity: 0 !important; pointer-events: none !important; }

/* ------------------------------ V3 ------------------------------ */
.br-hh--v3{ position: relative; height: var(--hh-h); min-height: 680px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding: 0 var(--hh-pad); gap: clamp(24px, 4vw, 64px); background: var(--br-white, #fff); }
/* --hh3-card-w : même largeur que la photo du hero des 4 piliers (hero.css .br-hero__media)
   → les images des deux heros ont la même taille. Lue par hero-home.js. */
.br-hh3__stage{ position: relative; height: calc(var(--hh-h) - 200px - var(--hh-bar)); min-height: 420px; cursor: none; touch-action: pan-y;
  --hh3-card-w: min(500px, 32vw); }
.br-hh3__card{ position: absolute; display: block; overflow: hidden; background: #e9e7e2; opacity: 0; transform: scale(.6); pointer-events: none;
  box-shadow: 0 18px 50px rgba(0,0,0,.16); transition: opacity .35s ease, transform .55s cubic-bezier(.22,.61,.36,1); cursor: none; }
.br-hh3__card img{ width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.br-hh3__card.is-on{ opacity: 1; transform: scale(1); pointer-events: auto; }
.br-hh3__card.is-top{ box-shadow: 0 26px 70px rgba(0,0,0,.24); }
.br-hh3__content{ max-width: 480px; min-width: 0; }
.br-hh3__stage{ min-width: 0; isolation: isolate; }
/* Pile calée en BAS du hero : sa dernière image arrive juste au-dessus de la photo du
   hero des 4 piliers → l'enchaînement se lit comme une suite d'images. Respiration de
   ~30px entre les deux (demande client 2026-09-25), au lieu du contact direct. */
.br-hh--v3 .br-hh3__stage{ align-self: end; margin-bottom: 30px; }
.br-hh--v3 .br-hh__figure{ font-size: clamp(40px, 4.4vw, 74px); margin-bottom: clamp(16px, 2.2vh, 28px); }
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure{ font-size: clamp(30px, 3vw, 52px); }
/* Une colonne en fr ne descend pas sous la largeur mini de son contenu : un chiffre long en
   nowrap élargissait la colonne texte et faisait VARIER la zone image d'un post à l'autre.
   -> colonnes en minmax(0, …) + corps réduit quand le chiffre est long (classe posée par le JS). */
.br-hh--v3 .br-hh__figure.is-long{ font-size: clamp(26px, 2.75vw, 46px); }
.br-hh--v2 .br-hh__figure.is-long{ font-size: clamp(32px, 3.5vw, 60px); }
.br-hh--v1 .br-hh__figure.is-long{ font-size: clamp(26px, 2.75vw, 46px); }
.br-hh--v3 .br-hh__text{ text-align: justify; }
.br-hh3__cursor{ position: fixed; left: 0; top: 0; z-index: 995; pointer-events: none; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #000; font-size: 11px; display: flex; align-items: center; justify-content: center; mix-blend-mode: difference; opacity: 0; transition: opacity .2s; }
.br-hh3__cursor.is-on{ opacity: 1; }

/* Pastille compteur des V1/V2 : suit la souris sur l'image, affiche « 1 / 8 ».
   Même principe que le curseur de la V3, en plus large pour le compteur. */
.br-hh__dot{ position: fixed; left: 0; top: 0; z-index: 995; pointer-events: none; transform: translate(-50%,-50%);
  width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000;
  font-family: var(--br-font-body); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.br-hh__dot.is-on{ opacity: 1; }
@media (max-width: 900px), (hover: none){
  .br-hh__dot{ display: none !important; }
  .br-hh1__media, .br-hh2__media{ cursor: pointer; }
}

/* ------------------------- Barre du bas (fixe) ------------------------- */
.br-hh-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; height: 48px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--hh-pad); background: #000; color: #fff; font-family: var(--br-font-body); font-size: 14px; }
.br-hh-bar__list{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--bar-gap); }
/* Même ligne optique pour tous les textes de la barre (cf. inner-bar.css). */
.br-hh-bar__list a, .br-hh-bar__donate span{ display: block; line-height: 1; }
body.br-home-bar .br-header .br-lang{ font-size: 14px; }
body.br-home-bar .br-header .br-lang__link{ line-height: 1; }
.br-hh-bar a{ color: #fff; text-decoration: none; }
.br-hh-bar a:hover{ opacity: .7; }
/* --bar-gap = écart d'origine des icônes du header (cf. inner-bar.css). */
.br-hh-bar{ --bar-gap: clamp(12px, 1.6vw, 22px); }
.br-hh-bar__meta{ display: flex; align-items: center; gap: var(--bar-gap); }
.br-hh-bar__count{ font-size: 12px; color: #b5b0a8; font-variant-numeric: tabular-nums; }

/* ------------------- Switch V2/V3 (administrateurs) ------------------- */
.br-hh-switch{ position: fixed; right: 16px; bottom: calc(var(--hh-bar) + 14px); z-index: 996; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: #fff; border: 1px solid #000; font-family: var(--br-font-body); font-size: 12px; color: #000; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.br-hh-switch__label{ color: #6b6660; margin-right: 4px; }
.br-hh-switch button{ -webkit-appearance: none; appearance: none; background: #fff; color: #000; border: 1px solid #000; border-radius: 0; padding: 3px 9px; font: inherit; cursor: pointer; line-height: 1.2; }
.br-hh-switch button[aria-pressed="true"]{ background: #000; color: #fff; }
.br-hh-switch__sep{ color: #cfcac3; }
.br-hh-switch__thr{ display: none; align-items: center; gap: 4px; margin-left: 6px; color: #6b6660; font-variant-numeric: tabular-nums; }
.br-hh-switch__thr button{ border: 0; padding: 0 4px; }
.br-hh-wrap[data-active="v3"] .br-hh-switch__thr{ display: inline-flex; }
.br-hh-empty{ padding: 40px; text-align: center; background: #f5f3ee; }

/* ------------------------------ Mobile ------------------------------ */
@media (max-width: 900px), (hover: none){
  .br-hh--v1{ grid-template-columns: 1fr; align-content: center; row-gap: clamp(28px, 6vh, 56px); min-height: 100svh; }
  .br-hh1__logo{ grid-column: 1; width: min(70%, 320px); margin-left: var(--hh-pad); }
  .br-hh1__inner{ grid-column: 1; justify-self: start; align-items: flex-start; text-align: left; width: 100%; padding: 0 var(--hh-pad); }
  .br-hh--v1 .br-hh__eyebrow{ align-self: flex-start; }
  .br-hh1__media::before{ background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 80%); }
  .br-hh--v2{ grid-template-columns: 1fr; grid-template-rows: 55svh auto; height: auto; min-height: 100svh; }
  .br-hh2__logo{ width: min(70%, 320px); }
  .br-hh2__panel{ padding: 44px var(--hh-pad) calc(var(--hh-bar) + 56px); }
  .br-hh2__inner{ align-items: flex-start; text-align: left; }
  .br-hh--v2 .br-hh__figure{ align-self: flex-start; white-space: normal; }
  .br-hh--v3{ grid-template-columns: 1fr; align-content: start; height: auto; min-height: 100svh; padding-top: 120px; padding-bottom: calc(var(--hh-bar) + 48px); }
  /* même largeur que .br-hero__media en mobile (hero.css : min(500px, 72vw)) */
  .br-hh3__stage{ height: 62vw; min-height: 300px; cursor: pointer; --hh3-card-w: min(500px, 72vw); }
  .br-hh3__card{ cursor: pointer; }
  .br-hh--v3 .br-hh__figure{ white-space: normal; }
  .br-hh3__cursor{ display: none !important; }
  .br-hh-bar__list{ gap: 16px; font-size: 13px; }
}

/* ---------- Mode « Titre en grand » (défaut, retour client 2026-09-18) ----------
   Le TITRE de l'activité est l'élément fort (PP Eiko), sur plusieurs lignes ; la date passe
   en petit dessous. Tailles dégressives selon la longueur (classes is-long / is-xlong du JS). */
.br-hh__date{ font-size: 16px; line-height: 1.4; color: #000; font-variant-numeric: tabular-nums; margin: 0 0 1.1em; }
.br-hh__date:empty{ display: none; }
.br-hh-wrap--figtitle .br-hh__figure{ white-space: normal; line-height: 1.08; text-wrap: balance; }
.br-hh-wrap--figtitle .br-hh2__inner{ width: min(100%, 540px); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure,
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure.is-long{ font-size: clamp(30px, 3.2vw, 56px); align-self: flex-end; margin-bottom: clamp(14px, 1.8vh, 22px); }
.br-hh-wrap--figtitle .br-hh--v2 .br-hh__figure.is-xlong{ font-size: clamp(25px, 2.5vw, 42px); }
.br-hh-wrap--figtitle .br-hh3__content{ max-width: 520px; }
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure,
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure.is-long{ font-size: clamp(28px, 2.8vw, 48px); margin-bottom: clamp(12px, 1.6vh, 20px); }
.br-hh-wrap--figtitle .br-hh--v3 .br-hh__figure.is-xlong{ font-size: clamp(23px, 2.2vw, 36px); }

/* ---------- Eyebrow « pilier » : au-dessus du titre, style des piliers du site ---------- */
.br-hh__eyebrow{ font-family: var(--br-font-display); font-style: italic; font-weight: 300; font-size: clamp(17px, 1.4vw, 24px);
  line-height: 1; letter-spacing: -.01em; color: var(--c, #000); margin: 0 0 clamp(10px, 1.4vh, 18px); }
.br-hh__eyebrow:empty{ display: none; }
.br-hh--v2 .br-hh__eyebrow{ align-self: flex-end; }

/* ---------- Enchaînement avec le hero des 4 piliers (widget braillard-hero) ----------
   UNIQUEMENT en V3 : la pile d'images doit sembler se terminer sur la photo du hero
   suivant → on annule le grand retrait haut de ce dernier (data-active posé par hero-home.js).
   En V1 et V2 (image plein cadre), au contraire, le retrait d'origine sert de respiration. */
.e-con:has(.br-hh-wrap[data-active="v3"]) + .elementor-section .br-hero,
.e-con:has(.br-hh-wrap[data-active="v3"]) + .e-con .br-hero{
  padding-top: clamp(32px, 4vw, 72px);
}
/* V1 / V2 : marge sous le hero, en plus du retrait du hero suivant. */
.br-hh-wrap[data-active="v1"], .br-hh-wrap[data-active="v2"]{ margin-bottom: clamp(32px, 4vw, 72px); }

/* ============ Accueil : header défilant, puis barre fixe en haut ============
   Demande client (2026-09-24) : tant que le hero est visible, le header défile avec la
   page ; dès que le hero est passé, la barre noire du hero remonte EN HAUT et devient la
   navigation fixe (monogramme + Boutique/Contact/Qui sommes-nous + Donate), le header s'y
   fond pour garder ses icônes et le burger. Ces règles ne chargent qu'avec le widget hero. */

/* 1. Header dans le flux : il défile avec le hero au lieu de rester collé. */
body:has(.br-hh-wrap) .br-header{ position: relative; }
/* Même piège qu'en pages intérieures : le top:32px de la barre d'admin pousserait le
   header vers le bas une fois remis dans le flux. */
body.admin-bar:has(.br-hh-wrap) .br-header{ top: auto !important; }
/* Le header défilant, la bascule wordmark → monogramme (header.js, --word-op/--mono-op)
   n'a plus de sens sur l'accueil : le grand logo reste grand et s'en va avec la page.
   (En V1/V2 il est de toute façon masqué par .br-hh-v2-cover ; dans la barre du haut,
   c'est le monogramme de la barre qui prend le relais.) */
body:has(.br-hh-wrap) .br-header__logo-full{ opacity: 1 !important; }
body:has(.br-hh-wrap) .br-header__logo-mono{ opacity: 0 !important; }

/* 2. La barre ne s'affiche PLUS en bas du hero (demande client 2026-09-24) : elle n'existe
   qu'en haut, une fois le hero passé. On libère aussi la hauteur qu'elle réservait. */
.br-hh-bar:not(.is-top){ display: none; }
.br-hh-wrap--bar{ --hh-bar: 0px; }

/* Barre du hero remontée en haut. */
.br-hh-bar{ transition: background-color .25s ease; }
.br-hh-bar.is-top{
  top: 0; bottom: auto; height: 64px; z-index: 1001;
  padding-right: clamp(270px, 25vw, 380px);   /* place laissée aux icônes du header (EN/FR + 3 icônes + burger) */
  animation: br-hh-bar-in .35s cubic-bezier(.22,.61,.36,1) both;
}
/* Couleur de la barre fixe : réglage Elementor (data-bar-theme), que le switch admin
   peut basculer localement. Blanche = filet gris clair pour la détacher d'un fond blanc. */
.br-hh-bar.is-top[data-bar-theme="light"]{ background: var(--br-white, #fff); color: var(--br-black, #000); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.br-hh-bar.is-top[data-bar-theme="light"] a{ color: var(--br-black, #000); }
.br-hh-bar.is-top[data-bar-theme="dark"]{ background: #000; color: #fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,.85); }   /* mince filet blanc en bas (client 2026-10-01) */
.br-hh-bar.is-top[data-bar-theme="dark"] a{ color: #fff; }
.br-hh-bar.is-top[data-bar-theme="dark"] .br-hh-bar__mono img{ filter: invert(1); }   /* disque blanc, B noir */
@keyframes br-hh-bar-in{ from{ transform: translateY(-100%); } to{ transform: none; } }
body.admin-bar .br-hh-bar.is-top{ top: 32px; }
@media screen and (max-width: 782px){ body.admin-bar .br-hh-bar.is-top{ top: 46px; } }
.br-hh-bar__mono{ display: none; }
.br-hh-bar.is-top .br-hh-bar__mono{ display: block; margin-right: clamp(18px, 2.6vw, 40px); line-height: 0; }
.br-hh-bar.is-top .br-hh-bar__mono img{ width: 38px; height: 38px; display: block; }  /* disque noir, B blanc (SVG d'origine) */
/* Tout le menu aligné à DROITE (le monogramme reste seul à gauche) + flèche du design
   à gauche de « Donate ». */
/* Ordre : monogramme à gauche, puis à droite Donate (avec sa flèche) et le menu.
   ⚠️ le monogramme doit garder un order INFÉRIEUR, sinon Donate passe devant lui. */
.br-hh-bar.is-top .br-hh-bar__mono{ order: -2; }
/* Ordre de la barre : monogramme · piliers (à gauche) — puis à droite : Donate, liens, icônes.
   Même disposition que la barre des pages intérieures. */
.br-hh-bar.is-top .br-hh-bar__meta{ order: 0; margin-left: auto; margin-right: var(--bar-gap); }
.br-hh-bar.is-top .br-hh-bar__nav{ order: 1; margin-left: 0; margin-right: 0; }
.br-hh-bar.is-top.has-pillars .br-hh-bar__meta{ margin-left: 0; }   /* ce sont les piliers qui poussent */
/* Les 4 piliers dans la barre (comme sur les pages intérieures) : masqués tant que le hero
   des piliers n'est pas dépassé, puisqu'ils sont alors déjà à l'écran en grand. */
.br-hh-bar__pillars{ display: none; }
.br-hh-bar.is-top.has-pillars .br-hh-bar__pillars{ display: block; order: -1; margin-right: auto; }
.br-hh-bar__pillars-list{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.br-hh-bar__pillars-list a{ font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  font-size: calc(var(--fs, 20px) * 1.1); color: inherit; text-decoration: none; transition: color .2s ease; }
/* Piliers en NOIR (couleur du texte de la barre), couleur du pilier au survol seulement.
   Essai « couleur permanente » annulé le 2026-09-30 à la demande du client. */
.br-hh-bar__pillars-list a:hover{ color: var(--c); }
.br-hh-bar.is-top[data-bar-theme="dark"] .br-hh-bar__pillars-list a:hover{ filter: brightness(1.45); }
.br-hh-bar__donate{ display: inline-flex; align-items: center; gap: 12px; transition: transform .3s ease; }
.br-hh-bar__donate:hover{ transform: translateX(4px); }
.br-hh-bar__arr{ width: clamp(40px, 3.6vw, 56px); height: auto; display: block; flex: none; }
.br-hh-bar.is-top .br-hh-bar__count{ display: none; }                 /* compteur = affaire du hero */

/* 3. Header compacté DANS la barre : fond transparent, logo masqué, icônes en blanc. */
/* STICKY, pas fixed : « fixed » sortait le header du flux au moment de la bascule et la
   page sautait de sa hauteur. En sticky, il garde sa place dans le flux (aucun saut) et
   se colle en haut dès qu'il est dépassé. */
body.br-home-bar .br-header{ position: sticky; top: 0; z-index: 1002; }
body.admin-bar.br-home-bar .br-header{ top: 32px !important; }
@media screen and (max-width: 782px){ body.admin-bar.br-home-bar .br-header{ top: 46px !important; } }
/* NE PAS toucher à la hauteur du header ici : la réduire (199px -> 64px) faisait sauter
   la page de 135px à chaque bascule. On garde sa boîte intacte (elle est transparente et
   en pointer-events:none) et on remonte simplement les icônes dans la bande de 64px. */
body.br-home-bar .br-header__actions{ transform: translateY(-22px); }
/* Le monogramme de la barre le remplace. SANS TRANSITION : le header hérite d'un fondu
   de .25s (règle du cover V1/V2) et on voyait donc le grand logo apparaître un instant
   au moment où le header se colle en haut (visible surtout en V3, où il n'est pas masqué). */
body.br-home-bar .br-header__logo{ opacity: 0 !important; pointer-events: none !important; transition: none !important; }
body.br-home-bar .br-header .br-iconbtn,
body.br-home-bar .br-header .br-menu-toggle{ color: var(--br-black, #000); }
body.br-home-bar .br-header .br-lang__link{ color: #9a948d; }
body.br-home-bar .br-header .br-lang__link.is-active{ color: var(--br-black, #000); }
/* Barre noire : les icônes du header (qui se superposent à la barre) passent en blanc. */
body.br-home-bar--dark .br-header .br-iconbtn,
body.br-home-bar--dark .br-header .br-menu-toggle{ color: #fff; }
body.br-home-bar--dark .br-header .br-lang__link{ color: rgba(255,255,255,.6); }
body.br-home-bar--dark .br-header .br-lang__link.is-active{ color: #fff; }


/* Écrans moyens (2026-10-02, tout se chevauchait vers 1000px) : comme la barre des pages
   intérieures, les liens secondaires sautent sous 1280px (ils restent dans le burger),
   puis Donate sous 1100px ; les piliers se resserrent. */
@media (max-width: 1280px){ .br-hh-bar.is-top .br-hh-bar__nav{ display: none; } }
@media (max-width: 1100px){
  .br-hh-bar.is-top .br-hh-bar__donate{ display: none; }
  .br-hh-bar__pillars-list{ gap: 18px; }
  .br-hh-bar__pillars-list a{ font-size: 18px; }
}

/* V1 en quinconce (retour client 2026-10-12) : logo en HAUT à gauche, texte de l'activité en
   BAS à droite -> ils ne peuvent plus se rapprocher, quelle que soit la longueur du titre.
   Desktop seulement (mobile : empilés, inchangé). Voile déplacé vers le coin bas droit. */
@media (min-width: 901px) and (hover: hover){
  .br-hh1__logo{ align-self: start; margin-top: clamp(24px, 5vh, 60px); margin-bottom: 0; width: min(38vw, 460px); }
  .br-hh1__inner{ align-self: end; margin-bottom: calc(var(--hh-bar) + clamp(64px, 9vh, 110px)); }
  .br-hh1__media::before{ background: linear-gradient(to top left, rgba(0,0,0,.6) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 64%); }
}