/* ============================================================
   CHARPENTE BNBE — feuille de style commune (v2.4, 16/10/2026)
   v2.3 du 07/10 + vidéos de fond (héros de l'accueil, hub de vocation),
   avec voile de lisibilité et bouton pause (journal en pied de fichier).
   Se charge APRÈS bootstrap.min.css. Unité unique : le pixel.

   Ordre des couches :
   1. Tokens   2. Base   3. Composants globaux   4. Blocs accueil
   5. Page services   6. Page tarifs   7. Pages intérieures
   Les règles mobiles restent à côté du composant qu'elles modifient.

   RÈGLES ABSOLUES (actées le 11/09, le 24/09 et le 07/10)
   - toute couleur, taille, espacement passe par var(--bnbe-*)
   - tout lien <a> qui n'est pas un bouton contient un <span> :
     le soulignement animé en dépend, sinon aucun signal au survol
   - couleur d'accentuation : VERT sur fond blanc, ORANGE (accent)
     sur fond marine — surtitres, lignes de titre, bandeaux collants,
     pastilles, liens texte et leur soulignement, boutons (secondary)
   - plus aucune section sur fond bleu (07/10) : marine à la place
   - accent réservé à l'information clé isolée, jamais aux titres
   - icônes Bootstrap filaires uniquement ; sur fond marine → pastille
     accent, icône blanche
   - cartes : bordure gris clair + bande haute 6 px (vert ou accent)
   - surtitre numéroté seulement en l'absence de bandeau collant ;
     la FAQ de bas de page n'a jamais de bandeau, toujours un surtitre
   - aucune ombre, aucun dégradé
   - jamais plus de 4 colonnes (4 / 2 / 1)
   - sections : 96 px de padding, sans marge (48 px sur mobile)
   - conteneurs sans marge latérale ; 25 px sous 576 px
   - titres : majuscule initiale ; boutons, navigation, liens : minuscules
   - Zilla Slab n'existe qu'en 700 : jamais de font-weight 900
   - photos en 16:9, vidéos en 2.39:1 ; PNG détourés permis pour casser le cadre
   - vidéo de fond : sans son, en boucle, avec image d'attente, voile uni
     de lisibilité et TOUJOURS un bouton pause (accessibilité, WCAG 2.2.2)
   ============================================================ */

/* ================= 1. TOKENS ================= */
:root {
  /* couleurs */
  --bnbe-vert: #00C189;        /* bouton / primary, hyperliens, accentuation sur fond blanc */
  --bnbe-marine: #021D36;      /* titres, fonds impactants, logo */
  --bnbe-bleu: #27649B;        /* plus utilisé par aucune section depuis le 07/10 ; gardé dans la palette */
  --bnbe-gris-texte: #5A6673;  /* corps de texte, T2 */
  --bnbe-gris-bord: #9EA3AA;   /* bordures, séparateurs, légendes sur fond sombre */
  --bnbe-blanc: #FFFFFF;
  --bnbe-fond-clair: #F8F9FA;  /* = .bg-light de Bootstrap (--bs-light-rgb), nommé ici pour mémoire */
  --bnbe-accent: #FFAF34;      /* orange retenu par Olivier (07/10, au lieu de #FF9A00) ; accentuation sur fond marine */
  --bnbe-media-fond: #0E2A45;  /* zone vidéo du héros, en attendant le média (= couleur du SVG « marine » du logo) */
  --bnbe-voile-video: rgba(0, 0, 0, .35);   /* voile uni sur les vidéos de fond (marine à 35 %) : à régler à l'œil sur l'image la plus claire */
  --bnbe-carte-fond: #7F858C;  /* zone carte de la localisation, en attendant le visuel */
  --bnbe-carte-zoom: 1.2;       /* agrandissement d'une province de la carte au survol de son intitulé (accueil, localisation) */
  --bnbe-carte-duree: .2s;      /* durée de l'agrandissement, à l'aller comme au retour */
  --bnbe-voile: rgba(255,255,255,.06);        /* colonnes et encarts sur fond marine */
  --bnbe-voile-media: rgba(255,255,255,.18);  /* rectangles média sur fond foncé */
  --bnbe-trait-clair: rgba(255,255,255,.2);   /* séparateurs sur fond foncé (unifié : .15 / .2 / .25 → .2) */
  --bnbe-trait-fort: rgba(255,255,255,.35);   /* ligne de total de l'exemple tarifs */
  --bnbe-blanc-doux: rgba(255,255,255,.75);   /* texte petit sur fond bleu */

  /* typographie */
  --bnbe-police-comfortaa: "Comfortaa", system-ui, sans-serif;   /* T1, corps */
  --bnbe-police-zilla: "Zilla Slab", Georgia, serif;             /* T2-T4, boutons, liens, chiffres — graisse 700 seulement */
  --bnbe-t1: 2.333rem; --bnbe-t2: 1.667rem; --bnbe-t3: 1.333rem; --bnbe-t4: 1.167rem;
  --bnbe-corps: 1rem; --bnbe-petit: .833rem; --bnbe-bouton: 1.167rem;
  --bnbe-chiffre: 2.8rem;      /* taux du barème */
  --bnbe-chiffre-xl: 3rem;     /* écart net / brut */
  --bnbe-mesure-court: 36rem;  /* largeur max d'un paragraphe centré (héros) */
  --bnbe-mesure: 42rem;        /* largeur max d'un paragraphe d'introduction */
  --bnbe-mesure-long: 52rem;   /* largeur max d'un accordéon FAQ */

  /* espacements — grille de 8 px, puis +16 px à partir de 24 (Olivier 24/09) */
  --bnbe-espace-1: 8px; --bnbe-espace-2: 16px; --bnbe-espace-3: 24px;
  --bnbe-espace-4: 32px; --bnbe-espace-5: 48px; --bnbe-espace-6: 64px;
  --bnbe-espace-7: 80px; --bnbe-espace-8: 96px;
  --bnbe-section: var(--bnbe-espace-8);          /* 96 px entre deux contenus, desktop */
  --bnbe-section-mobile: var(--bnbe-espace-5);   /* 48 px sur téléphone */

  /* formes */
  --bnbe-rayon: 8px; --bnbe-bordure: 1px;
  --bnbe-rayon-left: var(--bnbe-rayon) 0 0 var(--bnbe-rayon);
  --bnbe-rayon-right: 0 var(--bnbe-rayon) var(--bnbe-rayon) 0;
  --bnbe-rayon-top: var(--bnbe-rayon) var(--bnbe-rayon) 0 0;
  --bnbe-rayon-bottom: 0 0 var(--bnbe-rayon) var(--bnbe-rayon);
  --bnbe-bande: 6px;           /* bande haute des cartes */

  /* dimensions */
  --bnbe-header-h: 80px;       /* hauteur du header desktop → cale les éléments collants */
  --bnbe-header-h-mobile: 56px;
  --bnbe-entete-h: 320px;      /* hauteur minimale du bandeau marine d'en-tête des pages intérieures (évite le saut entre pages) — à ajuster */
  --bnbe-logo-w: 130px;        /* = largeur du bouton « estimez » : le menu reste centré (décision 24/09) ; hauteur ≈ 34 px */
  --bnbe-hero-marge: 50px;     /* héros encadré */
  --bnbe-marge-mobile: 25px;    /* marge latérale sous 576 px : conteneurs et héros (07/10) */
  --bnbe-hero-marge-mobile: var(--bnbe-marge-mobile);
  --bnbe-icone: 48px;          /* pastille d'icône des cartes */
  --bnbe-icone-liste: 32px;    /* pastille d'icône dans les listes */
  --bnbe-icone-etape: 36px;    /* pastille numérotée des frises et des coordonnées */
  --bnbe-avatar: 40px;         /* initiale dans les avis */

  /* mapping Bootstrap 5.3 */
  --bs-primary: var(--bnbe-vert); --bs-primary-rgb: 0,193,137;
  --bs-light-rgb: 248,249,250;
  --bs-body-bg: var(--bnbe-blanc); --bs-body-color: var(--bnbe-gris-texte);
  --bs-body-font-family: var(--bnbe-police-comfortaa); --bs-body-font-size: var(--bnbe-corps);
  --bs-body-line-height: 1.6; --bs-heading-color: var(--bnbe-marine);
  --bs-border-color: var(--bnbe-gris-bord); --bs-border-radius: var(--bnbe-rayon);
  --bs-link-color: var(--bnbe-vert); --bs-link-color-rgb: 0,193,137;
  --bs-link-hover-color: var(--bnbe-marine); --bs-link-hover-color-rgb: 2,29,54;
  --bs-link-decoration: none; --bs-link-hover-decoration: none;
}

/* ================= 2. BASE ================= */
*, ::before, ::after { box-sizing: border-box; }

/* Titres : T1 en Comfortaa, T2-T4 en Zilla. Majuscule initiale (11/09), aucune transformation de casse. */
h1, .h1 { font-family: var(--bnbe-police-comfortaa); font-weight: 700; font-size: var(--bnbe-t1); color: var(--bnbe-marine); }
h2, .h2 { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t2); color: var(--bnbe-gris-texte); }
h3, .h3 { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t3); color: var(--bnbe-marine); }
h4, .h4 { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t4); color: var(--bnbe-marine); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { line-height: 1.2; }
.text-petit { font-size: var(--bnbe-petit); }

/* Grand nombre (bande de chiffres, et tout chiffre mis en avant) — classe systémique demandée le 24/09.
   <div class="nombre"><span>10</span> ans</div> : le chiffre est dans le <span>, le libellé reste en marine.
   .chiffres .h1 est conservé le temps que l'accueil v3 passe à .nombre. */
.nombre { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t1); line-height: 1.2; color: var(--bnbe-marine); margin: 0; }
.nombre span, .chiffres .h1 span { color: var(--bnbe-accent); }   /* ⚠ ouvert : accent (Brian, JM) ou vert (règle d'Olivier : vert sur blanc) — une ligne à changer */

/* Liens : Zilla, jamais soulignés ; soulignement vert animé au survol, épaisseur constante sur tous les navigateurs.
   RÈGLE : le texte du lien est dans un <span>, sinon aucun signal au survol. */
a { font-family: var(--bnbe-police-zilla); font-weight: 700; text-decoration: none; transition: 0s; }
a span { position: relative; display: inline-block; padding-bottom: 2px; }
a span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--bnbe-bordure); background: var(--bnbe-vert);
  transform: scaleX(0); -webkit-transform: scaleX(0);
  transition: transform .3s ease-in-out; -webkit-transition: -webkit-transform .3s ease-in-out;
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
a:hover span::before, a:focus-visible span::before { transform: scaleX(1); -webkit-transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { a span::before { transition: none; } }

/* Icônes : pastille carrée arrondie, verte par défaut (rendu identique à Olivier) */
i { width: var(--bnbe-icone-liste); height: var(--bnbe-icone-liste);
  display: grid; place-items: center; font-size: 1.2rem; flex: none; color: var(--bnbe-vert); }
.bg-marine i {color: var(--bnbe-accent);}
.bg-marine .icone i {color: var(--bnbe-blanc);}

/* Fonds */
.bg-marine { background: var(--bnbe-marine); color: var(--bnbe-blanc); }
.bg-marine h1, .bg-marine h2, .bg-marine h3, .bg-marine p { color: var(--bnbe-blanc); }
.bg-marine a:not(.btn), #resultat a:not(.btn) { color: var(--bnbe-accent); }   /* liens texte en accent sur marine, soulignement animé aussi (règle 07/10) */
.bg-marine h4, .bg-marine .surtitre {color: var(--bnbe-accent);}
.bg-marine a span::before, #resultat a span::before {background: var(--bnbe-accent);}
.bg-marine a:hover span, #resultat a:hover span {color: var(--bnbe-accent);}

/* Accentuation selon le fond (règle du 24/09, bleu retiré le 07/10) : vert sur blanc, accent sur marine */
.surtitre { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-vert); font-size: var(--bnbe-petit);
  text-transform: lowercase; letter-spacing: .06em; margin-bottom: var(--bnbe-espace-1); }
#hub .surtitre, .exemple .surtitre { color: var(--bnbe-accent); }
.titre-ligne { text-align: center; }
.titre-ligne::after { content: ""; display: block; width: 6.667rem; height: 2px; background: var(--bnbe-vert); margin: var(--bnbe-espace-2) auto 0; }
.titre-ligne--gauche { text-align: left; }
.titre-ligne--gauche::after { margin-left: 0; margin-right: auto; }
.bg-marine .titre-ligne::after, #hub .titre-ligne::after, .exemple .titre-ligne::after { background: var(--bnbe-accent); }

/* Utilitaires */
.mt-8 { margin-top: var(--bnbe-espace-8); }
.mb-8 { margin-bottom: var(--bnbe-espace-8); }
.mesure-court { max-width: var(--bnbe-mesure-court); }
.mesure { max-width: var(--bnbe-mesure); }
.mesure-long { max-width: var(--bnbe-mesure-long); }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }   /* Bootstrap met !important : obligatoire */

/* Sections : 96 px desktop, 48 px mobile, sans marge (Olivier 24/09)
   Conteneurs sans marge latérale : tous les éléments s'alignent sur le même bord (Olivier 07/10).
   Sous 576 px, le conteneur prend toute la largeur de l'écran : la marge revient, égale à celle du héros. */
.container { padding: 0; }
@media (max-width: 575.98px) { .container { padding-left: var(--bnbe-marge-mobile); padding-right: var(--bnbe-marge-mobile); } }
section { padding: var(--bnbe-section) 0; }
@media (max-width: 767.98px) { section { padding: var(--bnbe-section-mobile) 0; } }

/* ================= 3. COMPOSANTS GLOBAUX ================= */

/* Header : hauteur garantie = token, pour que les éléments collants se calent juste dessous */
.navbar { padding: var(--bnbe-espace-2) 0; background: var(--bnbe-blanc); min-height: var(--bnbe-header-h); }
@media (max-width: 767.98px) { .navbar { padding: var(--bnbe-espace-1) 0; min-height: var(--bnbe-header-h-mobile); } }
.navbar .nav-link { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-bouton); color: var(--bnbe-marine);
  text-transform: lowercase; padding: var(--bnbe-espace-1) var(--bnbe-espace-2); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--bnbe-vert); }
.marque img { width: var(--bnbe-logo-w); height: auto; opacity: 1; }   /* largeur fixe, hauteur proportionnelle (24/09) */
.marque:hover img { opacity: .5; }
.menu-horizontale { display: flex; flex-direction: row; }
.menu-horizontale li { margin: 0 var(--bnbe-espace-2); }

/* Boutons : jamais de retour à la ligne (11/09) ; primary → transparent + contour vert au survol (validé 24/09) */
.btn { --bs-btn-font-family: var(--bnbe-police-zilla); --bs-btn-font-weight: 700; --bs-btn-font-size: var(--bnbe-bouton);
  --bs-btn-padding-y: var(--bnbe-espace-1); --bs-btn-padding-x: var(--bnbe-espace-4);
  --bs-btn-border-width: var(--bnbe-bordure); --bs-btn-border-radius: var(--bnbe-rayon);
  text-transform: lowercase; white-space: nowrap; }
.btn-primary { --bs-btn-bg: var(--bnbe-vert); --bs-btn-color: var(--bnbe-blanc); --bs-btn-border-color: var(--bnbe-vert);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--bnbe-vert); --bs-btn-hover-border-color: var(--bnbe-vert);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--bnbe-vert); --bs-btn-active-border-color: var(--bnbe-vert); }
.btn-outline-primary { --bs-btn-color: var(--bnbe-vert); --bs-btn-border-color: var(--bnbe-vert);
  --bs-btn-hover-bg: var(--bnbe-vert); --bs-btn-hover-color: var(--bnbe-blanc); --bs-btn-hover-border-color: var(--bnbe-vert);
  --bs-btn-active-bg: var(--bnbe-vert); --bs-btn-active-color: var(--bnbe-blanc); }
.btn-secondary { --bs-btn-bg: var(--bnbe-accent); --bs-btn-color: var(--bnbe-blanc); --bs-btn-border-color: var(--bnbe-accent);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--bnbe-accent); --bs-btn-hover-border-color: var(--bnbe-accent);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--bnbe-accent); --bs-btn-active-border-color: var(--bnbe-accent); }
.btn-outline-secondary { --bs-btn-color: var(--bnbe-accent); --bs-btn-border-color: var(--bnbe-accent);
  --bs-btn-hover-bg: var(--bnbe-accent); --bs-btn-hover-color: var(--bnbe-blanc)!important; --bs-btn-hover-border-color: var(--bnbe-accent);
  --bs-btn-active-bg: var(--bnbe-accent); --bs-btn-active-color: var(--bnbe-blanc); }
.btn-dark { --bs-btn-bg: var(--bnbe-marine); --bs-btn-color: var(--bnbe-blanc); --bs-btn-border-color: var(--bnbe-marine);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--bnbe-marine); --bs-btn-hover-border-color: var(--bnbe-marine); }

/* Cartes : sans ombre, bordure gris clair, bande haute optionnelle (6 px) */
.card { border: none; border-radius: var(--bnbe-rayon); }
.raison .card, .avis .card, .equipe .card { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); height: 100%; }
.border-top-vert { border-top: var(--bnbe-bande) solid var(--bnbe-vert) !important; }     /* !important : bat .card{border:none} et Bootstrap */
.border-top-marine { border-top: var(--bnbe-bande) solid var(--bnbe-marine) !important; } /* !important : bat .card{border:none} et Bootstrap */
.border-top-accent { border-top: var(--bnbe-bande) solid var(--bnbe-accent) !important; }

/* Pastille d'icône des cartes : verte (accueil) ou accent (services) */
.icone, .icone-carre { width: var(--bnbe-icone); height: var(--bnbe-icone); border-radius: var(--bnbe-rayon); background: var(--bnbe-marine);
  display: grid; place-items: center; font-size: 1.5rem; margin-bottom: var(--bnbe-espace-2); }
.icone { color: var(--bnbe-vert); }
.icone-carre { color: var(--bnbe-accent); }   /* ⚠ ouvert : pictos sur marine vert ou blanc (11/09) — l'accent y est hors règle */
.bg-marine .icone {background: var(--bnbe-accent);}

/* Listes nues (base commune) */
.lieux, .etapes, .hors, .coord, .couvre, .expert, .liste-coche, .services-liste, .reassurance, .contenu, .recevez, .sousnav ul, footer ul { list-style: none; padding: 0; margin: 0; }

/* Liste cochée */
.liste-coche li { display: flex; gap: var(--bnbe-espace-1); padding: 4px 0; }
.liste-coche li i {margin-right: var(--bnbe-espace-1); }

/* Bandeau de section collant, calé sous le header. Vert par défaut ; --accent sur fond bleu / marine.
   La section qui le contient porte .avec-bandeau (ou l'un des id historiques). */
.bandeau-section { position: sticky; top: var(--bnbe-header-h); z-index: 9; display: flex; align-items: center; justify-content: space-between;
  gap: var(--bnbe-espace-2); padding: 6px 0; font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-petit);
  text-transform: lowercase; letter-spacing: .06em; margin-top: calc(-1 * var(--bnbe-espace-6));
  background: var(--bnbe-vert); color: var(--bnbe-blanc); }
.bandeau-section--accent { background: var(--bnbe-accent); }
.bandeau-section .container { display: flex; justify-content: space-between; align-items: center; }
.bandeau-section .fin { font-family: var(--bnbe-police-comfortaa); font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .85; }
@media (max-width: 767.98px) { .bandeau-section { margin-top: calc(-1 * var(--bnbe-espace-5)); top: var(--bnbe-header-h-mobile); } .bandeau-section .fin { display: none; } }
section.avec-bandeau { padding-top: var(--bnbe-espace-6); padding-bottom: 0; }
.avec-bandeau > .container { padding-top: var(--bnbe-section); padding-bottom: var(--bnbe-section); }

/* Bandeau marine d'en-tête des pages intérieures : hauteur minimale fixe (24/09), contenu centré verticalement */
.entete {padding: var(--bnbe-espace-6) 0; min-height: var(--bnbe-entete-h); display: flex; align-items: center; }
.entete {background: radial-gradient(1100px 600px at 12% 15%, rgba(14,179,132,0.30), transparent 60%), radial-gradient(900px 520px at 88% 88%, rgba(14,179,132,0.16), transparent 55%), linear-gradient(135deg, #1f2a3a 0%, var(--bnbe-marine) 50%, #2f4a4a 100%);}
.entete h1, .entete p { color: var(--bnbe-blanc); }
.entete p { max-width: 40rem; }
.entete .text-petit { color: var(--bnbe-vert); }
@media (max-width: 767.98px) { .entete { min-height: 0; } }

/* Onglets (avis) */
.avis .btn-group .btn { font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; background: var(--bnbe-accent); color: var(--bnbe-blanc);}
.avis .btn-group .btn:hover { background: transparent; color: var(--bnbe-blanc);}
.avis .btn-group .btn.active { background: transparent; border-color: var(--bnbe-accent); color: var(--bnbe-blanc); }
/* hauteur constante au changement d'onglet (24/09) : les volets se superposent dans une même cellule de grille */
.avis .tab-content { display: grid; }
.avis .tab-content > .tab-pane { display: block; grid-area: 1 / 1; visibility: hidden; }
.avis .tab-content > .tab-pane.active { visibility: visible; }
.avis i {background: transparent; color: var(--bnbe-accent);}

/* Accordéon (FAQ) */
.accordion-button { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-marine); text-transform: lowercase; }
.accordion-button:not(.collapsed) { background: var(--bnbe-blanc); color: var(--bnbe-vert); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--bnbe-vert); }
.accordion-item { border-color: var(--bnbe-gris-bord); }

/* Formulaires (Fillout en V1 : ces règles servent aux champs natifs de secours et au thème Fillout) */
.form-label { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-marine); text-transform: lowercase; margin-bottom: 4px; }
.form-control, .form-select { font-family: var(--bnbe-police-comfortaa); font-size: var(--bnbe-corps); padding: var(--bnbe-espace-1) var(--bnbe-espace-2);
  border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); color: var(--bnbe-gris-texte); }
.form-control:focus, .form-select:focus { border-color: var(--bnbe-vert); box-shadow: none; }
.form-check-input:checked { background-color: var(--bnbe-vert); border-color: var(--bnbe-vert); }
.formulaire-cadre { border: 2px dashed var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); min-height: 420px; display: grid; place-items: center;
  text-align: center; padding: var(--bnbe-espace-4); color: var(--bnbe-gris-texte); }   /* emplacement de l'iframe Fillout */

/* Média (rectangle 16:9 en attendant l'image) — !important nécessaire : le bandeau de test posait un style= inline */
.media { position: relative; width: 100%; min-height: 240px; background: var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon);
  display: grid; place-items: center; color: var(--bnbe-blanc); font-size: var(--bnbe-petit); margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; }
.media::before { content: ""; display: block; width: 100%; padding-top: 56.25%; }
.media--fond { position: absolute; inset: 0; border-radius: 0; min-height: 0; z-index: 0; }
.bg-marine .media { background: var(--bnbe-voile-media); }

/* Portraits équipe (page vocation) */
.equipe #jean-marc {background: url(img/portrait-jean-marc.jpg);margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;}
.equipe #toussaint {background: url(img/portrait-toussaint.jpg);margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;}
.equipe #brian     {background: url(img/portrait-brian.jpg);margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;}
.equipe #virginie  {background: url(img/portrait-virginie.jpg);margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;}
.equipe #francois  {background: url(img/portrait-francois.jpg);margin: 0 auto;
  background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important;}

/* Blocs jumelés (split, bandeau final, contact) : un seul bloc, arrondis extérieurs seuls */
.split > div:first-of-type { border-radius: var(--bnbe-rayon-left); }
.split > div:last-of-type { border-radius: var(--bnbe-rayon-right); }
/* Blocs empilés : arrondis en haut et en bas. .split s'empile sous 768 px (col-md-*), .split--lg sous 992 px (col-lg-*) */
@media (max-width: 767.98px) {
  .split > div:first-of-type { border-radius: var(--bnbe-rayon-top); }
  .split > div:last-of-type { border-radius: var(--bnbe-rayon-bottom); } }
@media (max-width: 991.98px) {
  .split--lg > div:first-of-type { border-radius: var(--bnbe-rayon-top); }
  .split--lg > div:last-of-type { border-radius: var(--bnbe-rayon-bottom); } }
.split .bg-white { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.split > [class*=col] { padding: var(--bnbe-espace-6) var(--bnbe-espace-4); }

/* Panneau (carte blanche à bande haute) : vert sur fond clair, accent via .panneau--accent ou sur fond bleu */
#logement .col-lg-5 {padding: var(--bnbe-espace-4);}
.panneau { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-top: var(--bnbe-bande) solid var(--bnbe-marine); border-radius: var(--bnbe-rayon);
  padding: var(--bnbe-espace-4); background: var(--bnbe-blanc); height: 100%; }
.panneau--accent { border-top-color: var(--bnbe-accent); }

/* Bandeau final (deux cadres) et réassurance — sur toutes les pages */
.cadres .cadre { border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-5) var(--bnbe-espace-4); height: 100%; display: flex; flex-direction: column; }
.cadres .cadre .btn { align-self: flex-start; margin-top: auto; }
.cadres .cadre--estimez { background: var(--bnbe-marine); color: var(--bnbe-blanc); }
.cadres .cadre--estimez h2, .cadres .cadre--estimez p { color: var(--bnbe-blanc); }
.cadres .cadre--guide, .cadres .cadre--appel, .cadres .cadre--clair { background: var(--bnbe-blanc); border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.reassurance { margin: var(--bnbe-espace-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--bnbe-espace-3); justify-content: center; font-size: var(--bnbe-petit); }
.reassurance li { display: flex; align-items: center; gap: var(--bnbe-espace-1); padding: var(--bnbe-espace-1) 0; }
.reassurance li i { color: var(--bnbe-vert); margin-right: var(--bnbe-espace-1); }

/* Footer : logo blanc, bouton en contour, quatre colonnes égales (24/09) */
footer { background: var(--bnbe-marine); color: var(--bnbe-blanc); padding: var(--bnbe-espace-6) 0 var(--bnbe-espace-4); }
footer a, footer .marque { color: var(--bnbe-blanc); }
footer a:hover { color: var(--bnbe-vert); }
footer h3 { color: var(--bnbe-vert); }
footer li { margin-bottom: var(--bnbe-espace-1); }
footer .horaires { font-size: var(--bnbe-petit); color: var(--bnbe-gris-bord); }
footer .credits { border-top: var(--bnbe-bordure) solid var(--bnbe-trait-clair); margin-top: var(--bnbe-espace-5); padding-top: var(--bnbe-espace-3);
  font-size: var(--bnbe-petit); color: var(--bnbe-gris-bord); }
/* ================= 4. BLOCS ACCUEIL ================= */

/* Héros : encadré, 70vh, vidéo en fond, texte HTML centré ; 25 px de marge sur mobile (24/09) */
.hero { position: relative; border-radius: var(--bnbe-rayon); overflow: hidden; background: var(--bnbe-voile); min-height: 70vh;
  display: flex; align-items: center; margin: 0 var(--bnbe-hero-marge); }
@media (max-width: 767.98px) { .hero { margin: 0 var(--bnbe-hero-marge-mobile); } }
.hero .container { position: relative; z-index: 1; color: var(--bnbe-blanc); }
.hero h1, .hero h2, .hero h3 { color: var(--bnbe-blanc); }   /* titres lisibles sur la vidéo (le H2 du hub restait gris, 16/10) */
.hero .media--fond { background: var(--bnbe-media-fond); }

/* Vidéo de fond (héros de l'accueil, hub de vocation — 16/10) : <div class="media media--fond media--video">
   contient la <video class="video-fond">, recadrée pour remplir le cadre ; un voile uni assure la lisibilité
   du texte (pas de dégradé). Le bouton .video-pause est un frère du .media, dans le .hero ; js/video-fond.js le pilote. */
.media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--video::after { content: ""; position: absolute; inset: 0; background: var(--bnbe-voile-video); }
.video-pause { position: absolute; right: var(--bnbe-espace-2); bottom: var(--bnbe-espace-2); z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: var(--bnbe-bordure) solid var(--bnbe-trait-fort); border-radius: var(--bnbe-rayon);
  background: transparent; color: var(--bnbe-blanc); font-size: var(--bnbe-t4); line-height: 1; cursor: pointer; }
.video-pause:hover, .video-pause:focus-visible { border-color: var(--bnbe-blanc); }
.video-pause:focus-visible { outline: 2px solid var(--bnbe-blanc); outline-offset: 2px; }
.video-pause i { width: auto; height: auto; background: none; color: inherit; display: inline; }   /* neutralise la pastille globale des icônes */

/* Bande de chiffres (juste sous le héros) */
.chiffres { padding: var(--bnbe-espace-5) 0; }
.chiffres p { margin: 0; font-size: var(--bnbe-petit); }
.chiffres .tuile-lien { display: block; color: inherit; font: inherit; } .chiffres .tuile-lien span { display: inline; padding-bottom: 0; } .chiffres .tuile-lien span::before { content: none; }   /* tuiles 1, 2, 5 cliquables vers vocation (demandes JM §3) : apparence inchangée (21/10) */

/* Split : listes de services (les vidéos ne sont que sur la page services ; ici, miniatures) */
.services-liste { margin: var(--bnbe-espace-3) 0 var(--bnbe-espace-4); }
.services-liste li { display: flex; align-items: center; gap: var(--bnbe-espace-2); padding: var(--bnbe-espace-1) 0; }
.services-liste a { font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; color: inherit; }
.services-liste a:hover { color: var(--bnbe-vert); }
.bg-marine .services-liste a, .bg-marine .services-liste a:hover { color: var(--bnbe-accent); }   /* règle 07/10 */
#photo-sejours {background: url(img/gestion-de-sejours.jpg);background-position: center center;background-size: cover;background-repeat: no-repeat;}
#photo-rotations {background: url(img/gestion-de-rotations.jpg);background-position: center center;background-size: cover;background-repeat: no-repeat;}

/* Cartes différenciateurs */
.raison .card a.lien { font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; margin-top: auto; }

/* Frise d'étapes (tarifs « mise en place ») */
.etapes { counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; padding-top: var(--bnbe-espace-5); }
.etapes li::before { content: counter(etape); position: absolute; top: 0; left: 0; width: var(--bnbe-icone-etape); height: var(--bnbe-icone-etape); border-radius: 50%;
  background: var(--bnbe-accent); color: var(--bnbe-blanc); font-family: var(--bnbe-police-zilla); font-weight: 700; display: grid; place-items: center; }
#valeurs .etapes li::before, #diagnostic .etapes li::before {background: var(--bnbe-vert);}
.etapes li::after { content: ""; position: absolute; top: 18px; left: var(--bnbe-icone-etape); right: -24px; height: var(--bnbe-bordure); background: var(--bnbe-gris-bord); }
.etapes li:last-child::after { display: none; }
@media (max-width: 767.98px) { .etapes li::after { display: none; } }

/* Bandeau tarifs (teaser) */
.tarifs-teaser .poste { border-left: 2px solid var(--bnbe-vert); padding-left: var(--bnbe-espace-2); }
.tarifs-teaser .poste h3 {margin-bottom: var(--bnbe-espace-1); }
.tarifs-teaser .poste p { margin: 0;}

/* Localisation */
.localisation { position: relative; overflow: hidden; min-height: 520px; padding: 0; display: flex; align-items: flex-end; }
.localisation .media--fond { background: var(--bnbe-carte-fond); display: grid; place-items: center; color: var(--bnbe-blanc); font-size: var(--bnbe-petit);
  text-align: center; padding: var(--bnbe-espace-4); }
.localisation .container { position: relative; z-index: 1; padding-top: var(--bnbe-espace-6); padding-bottom: var(--bnbe-espace-5); }
.localisation .carte-texte { background: var(--bnbe-fond-clair); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); max-width: 34rem; border: var(--bnbe-bordure) solid var(--bnbe-gris-bord);}
.lieux { display: flex; flex-wrap: wrap; gap: var(--bnbe-espace-1); }
.lieux li { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-1) var(--bnbe-espace-2);
  color: var(--bnbe-marine); font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; }
/* Carte des provinces : derrière .carte-texte, 50 % du container, calée à droite.
   Container en grille d'une seule cellule : la carte et le texte s'y superposent, et la
   hauteur du bloc s'ajuste à la carte (elle n'est jamais rognée par la section). */
.localisation .container { display: grid; }
.localisation .container > .carte-belgique, .localisation .container > .carte-texte { grid-area: 1 / 1; }
.localisation .carte-texte { position: relative; z-index: 1; align-self: end; }
.carte-belgique { justify-self: end; align-self: center; width: 50%; pointer-events: none; }
.carte-belgique svg { display: block; width: 100%; height: auto; overflow: visible; }
.carte-belgique .province { transform-box: fill-box; transform-origin: center;
  transition: transform var(--bnbe-carte-duree) ease-out; }
.carte-belgique .province.active { transform: scale(var(--bnbe-carte-zoom)); }
@media (prefers-reduced-motion: reduce) { .carte-belgique .province { transition: none; } }
@media (max-width: 991.98px) {
  .localisation .container > .carte-belgique, .localisation .container > .carte-texte { grid-area: auto; }
  .carte-belgique { justify-self: center; width: 100%; max-width: 32rem; margin-bottom: var(--bnbe-espace-4); }
}

/* Avis (initiales, jamais de visage) */
.avis .note { display: inline-flex; color: var(--bnbe-vert); }
.avis blockquote { font-size: var(--bnbe-corps); margin: 0 0 var(--bnbe-espace-2); }
.avis .avatar { width: var(--bnbe-avatar); height: var(--bnbe-avatar); border-radius: 50%; background: var(--bnbe-marine); color: var(--bnbe-blanc); display: grid; place-items: center;
  font-family: var(--bnbe-police-zilla); font-weight: 700; flex: none; }
.avis .auteur { display: flex; align-items: center; gap: var(--bnbe-espace-2); margin-top: auto; }

/* ================= 5. PAGE SERVICES ================= */
.numero { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-petit); letter-spacing: .06em; }
#sejours .container, #rotations .container {padding-top: 0;}
#sejours .numero { color: var(--bnbe-vert); }
#video-sejours, #video-rotations {margin-top: var(--bnbe-espace-8);}
#rotations .numero, #rotations .surtitre, #roles .surtitre, #mise-en-place .surtitre { color: var(--bnbe-accent); }   /* ⚠ #roles (ex-#perimetre, renommé le 21/10 selon les ancres de JM) est sur fond clair : accent hors règle, conservé tel quel */
#rotations .titre-ligne::after, #roles .titre-ligne::after, #mise-en-place .titre-ligne::after { background: var(--bnbe-accent); }
.service { padding: var(--bnbe-espace-5) 0; border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.service:last-child { border-bottom: none; }
.service h3 { font-size: var(--bnbe-t2); }
.detail {padding: var(--bnbe-espace-2);}
.service .detail { padding-left: var(--bnbe-espace-2); margin-top: var(--bnbe-espace-3); background: #F8F9FA;}
#sejours .detail { border-left: 3px solid var(--bnbe-vert); }
.detail strong { color: var(--bnbe-vert); }
#rotations .detail { border-left: 3px solid var(--bnbe-accent); background: var(--bnbe-voile);}
.bg-marine strong { color: var(--bnbe-accent) !important;}

/* Photos par service : une seule image par point (24/09) ; grilles 2/3 conservées pour mémoire */
.photos { display: grid; gap: var(--bnbe-espace-2); }
body.photos-1 .photos { grid-template-columns: 1fr; }
body.photos-2 .photos, body.photos-3 .photos { grid-template-columns: 1fr 1fr; }
#sejours .media, #rotations .media {background-position: center center;background-size: cover;background-repeat: no-repeat;}

#annonce .media {background: url(img/services-annonce.jpg);}
#calendrier .media {background: url(img/services-calendrier.jpg);}
#tarification .media {background: url(img/services-tarification.svg);}
#communication .media {background: url(img/services-message.jpg);}
#guide-invites .media {background: url(img/services-guide.jpg);}

#entretien .media {background: url(img/services-entretien.jpg);}
#blanchisserie .media {background: url(img/services-blanchisserie.jpg);}
#produits .media {background: url(img/services-produits.jpg);}
#verifications .media {background: url(img/services-verification.jpg);}
#maintenance .media {background: url(img/services-maintenance.jpg);}

/* Cartes « avec quoi » : 4 × 2 */
.expert { display: grid; gap: var(--bnbe-espace-3); }
@media (min-width: 992px) { .expert { grid-template-columns: repeat(4, 1fr); } }
.expert li { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-3); }
.expert li i { font-size: 1.4rem; display: block; margin-bottom: var(--bnbe-espace-1); }
.expert li strong { display: block; color: var(--bnbe-marine); font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; margin-bottom: 4px; }
/* Sous-navigation collante (pages longues) */
.sousnav { position: sticky; top: var(--bnbe-header-h); z-index: 10; background: var(--bnbe-blanc); border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); padding: var(--bnbe-espace-1) 0; }
.sousnav ul { display: flex; flex-wrap: wrap; gap: var(--bnbe-espace-1); }
.sousnav a { font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; font-size: var(--bnbe-petit); color: var(--bnbe-marine);
  border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: 4px var(--bnbe-espace-2); }
.sousnav a:hover { color: var(--bnbe-vert); border-color: var(--bnbe-vert); }
.sousnav .sep { align-self: center; color: var(--bnbe-gris-bord); padding: 0 4px; }

/* ================= 6. PAGE TARIFS ================= */

/* Barème */
.bareme { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bnbe-espace-3); }
@media (max-width: 767.98px) { .bareme { grid-template-columns: 1fr; } }
.bareme .annee { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); text-align: center; }
.bareme .annee h3 { margin-bottom: var(--bnbe-espace-2); color: var(--bnbe-gris-texte); }
.bareme .annee .taux { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-chiffre); color: var(--bnbe-marine); line-height: 1; }
.bareme .annee .taux small { font-family: var(--bnbe-police-comfortaa); font-weight: 400; font-size: var(--bnbe-petit); color: var(--bnbe-gris-texte); margin-left: 6px; vertical-align: middle; }
.bareme .annee .tvac { font-size: var(--bnbe-petit); margin-top: var(--bnbe-espace-1); }
.assiette { border-left: 3px solid var(--bnbe-accent); padding-left: var(--bnbe-espace-3); }

/* Ce que la commission couvre */
.couvre { columns: 2; column-gap: var(--bnbe-espace-4); }
@media (max-width: 575.98px) { .couvre { columns: 1; } }
.couvre li { break-inside: avoid; padding: var(--bnbe-espace-1) 0; }
.couvre li i { color: var(--bnbe-accent); margin-right: var(--bnbe-espace-1); }

/* Exemple net / brut. Séparateurs portés par le HAUT de chaque ligne : plus de double trait avant le total (bug du 24/09) */
#exemple, #volets { background: var(--bnbe-marine); color: var(--bnbe-blanc); }
.exemple h2, .exemple h3 { color: var(--bnbe-blanc); }
.exemple .intro, .exemple .note { color: var(--bnbe-gris-bord); }
.exemple .colonne { background: var(--bnbe-voile); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); height: 100%; }
.exemple .colonne--bnbe { outline: 2px solid var(--bnbe-accent); }
.exemple .ligne { display: flex; justify-content: space-between; gap: var(--bnbe-espace-2); padding: var(--bnbe-espace-1) 0; border-top: 1px solid var(--bnbe-trait-clair); }
.exemple .ligne:first-of-type { border-top: none; }
.exemple .ligne .montant { font-family: var(--bnbe-police-zilla); font-weight: 700; white-space: nowrap; }
.exemple .ligne--reste { font-size: var(--bnbe-t3); color: var(--bnbe-accent); border-top: 1px solid var(--bnbe-trait-fort); margin-top: var(--bnbe-espace-1); padding-top: var(--bnbe-espace-2); }
.exemple .ligne--reste .montant { color: var(--bnbe-accent); }
.exemple .barre { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: var(--bnbe-espace-2) 0 var(--bnbe-espace-1); }
.exemple .barre span { display: block; height: 100%; }
.exemple .legende { display: flex; flex-wrap: wrap; gap: var(--bnbe-espace-3); font-size: var(--bnbe-petit); color: var(--bnbe-gris-bord); }
.exemple .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Comparatif à barres : texte blanc dans les trois segments (24/09) */
.comparatif { margin-top: var(--bnbe-espace-5); }
.comparatif .rangee { display: grid; grid-template-columns: 9rem 1fr; gap: var(--bnbe-espace-2); align-items: center; margin-bottom: var(--bnbe-espace-2); }
.comparatif .etiquette { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-blanc); text-transform: lowercase; }
.comparatif .etiquette small { display: block; font-family: var(--bnbe-police-comfortaa); font-weight: 400; font-size: var(--bnbe-petit); color: var(--bnbe-gris-bord); text-transform: none; }
.comparatif .barre { display: flex; height: 44px; border-radius: var(--bnbe-rayon); overflow: hidden; margin: 0; }
.comparatif .barre span { display: grid; place-items: center; font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-petit); color: var(--bnbe-blanc); white-space: nowrap; overflow: hidden; }
.comparatif .barre .b-vous { background: var(--bnbe-accent); color: var(--bnbe-blanc); }
.comparatif .barre .b-bnbe { background: var(--bnbe-vert); }
.comparatif .barre .b-plat { background: var(--bnbe-gris-bord); }
@media (max-width: 575.98px) { .comparatif .rangee { grid-template-columns: 1fr; } }

.ecart { display: grid; grid-template-columns: auto 1fr; gap: var(--bnbe-espace-4); align-items: center; background: var(--bnbe-voile); border-radius: var(--bnbe-rayon);
  padding: var(--bnbe-espace-4); margin-top: var(--bnbe-espace-3); border-left: 4px solid var(--bnbe-accent); }
@media (max-width: 767.98px) { .ecart { grid-template-columns: 1fr; } }
.ecart .gros { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-chiffre-xl); line-height: 1; color: var(--bnbe-accent); }
.ecart .gros small, .ecart .chiffres-ecart div small { display: block; font-family: var(--bnbe-police-comfortaa); font-weight: 400; font-size: var(--bnbe-petit); color: var(--bnbe-gris-bord); }
.ecart .gros small { margin-top: 6px; }
.ecart .chiffres-ecart { display: flex; flex-wrap: wrap; gap: var(--bnbe-espace-4); }
.ecart .chiffres-ecart div { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t3); color: var(--bnbe-blanc); }

/* Postes (forfait, dotations, récurrents) */
.poste-carte { background: var(--bnbe-voile); border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); height: 100%; display: flex; flex-direction: column; }
.bg-marine .poste-carte p {color: var(--bnbe-blanc);}
.poste-carte li a { color: var(--bnbe-gris-texte); }
.poste-carte .prix, .prix { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t2); color: var(--bnbe-marine); }
.poste-carte .prix small, .prix small { font-family: var(--bnbe-police-comfortaa); font-weight: 400; font-size: var(--bnbe-petit); color: var(--bnbe-gris-texte); }
.poste-carte h3 .option { font-family: var(--bnbe-police-comfortaa); font-weight: 400; font-size: var(--bnbe-petit); }
.poste-carte-footer { bottom: 0; }
.repere { font-size: var(--bnbe-petit); color: var(--bnbe-gris-texte); border-top: var(--bnbe-bordure) solid var(--bnbe-gris-bord); padding-top: var(--bnbe-espace-2); margin-top: auto; }
.hors li { padding: var(--bnbe-espace-1) 0; border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.hors li:last-child { border-bottom: none; }
.hors li i { color: var(--bnbe-gris-bord); margin-right: var(--bnbe-espace-1); }

/* ================= 7. PAGES INTÉRIEURES (guide, diagnostic, vocation, contact, estimez, faq, légal) ================= */

/* Contact : coordonnées (pastilles vertes sur marine — règle icônes) */
.coord li { display: flex; gap: var(--bnbe-espace-2); padding: var(--bnbe-espace-2) 0; border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.coord li:last-child { border-bottom: none; }
.coord li i { width: var(--bnbe-icone-etape); height: var(--bnbe-icone-etape); border-radius: var(--bnbe-rayon); background: var(--bnbe-marine); color: var(--bnbe-vert); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.coord h4 { margin-bottom: 2px; }
.cadre-appel .ou { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-accent); font-size: var(--bnbe-petit); letter-spacing: .06em; text-transform: lowercase; margin: var(--bnbe-espace-4) 0 var(--bnbe-espace-1); }
.cadre-appel .tel { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-t2); color: var(--bnbe-accent); white-space: nowrap; }
@media (max-width: 399.98px) { .cadre-appel .tel { font-size: var(--bnbe-t3); } }   /* le numéro tient sur une ligne jusqu'à 320 px (v2.2) */
.cadre-appel .tel:hover { color: var(--bnbe-blanc); }
.cadre-appel .petit { color: var(--bnbe-gris-bord); font-size: var(--bnbe-petit); }
.captcha { border: var(--bnbe-bordure) dashed var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-2); font-size: var(--bnbe-petit); color: var(--bnbe-gris-texte); }

/* Guide : quatre volets, sélecteur bruxelles / wallonie (version A retenue par défaut) */
.region-switch .btn { --bs-btn-font-size: var(--bnbe-petit); }
.volet.region-wal .bxl { display: none; }        /* chaque volet a son propre sélecteur (07/10) */
.volet:not(.region-wal) .wal { display: none; }
.volet { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); height: 100%; display: flex; flex-direction: column; background: var(--bnbe-voile); }
.volet h3 { font-size: var(--bnbe-t3);  color: var(--bnbe-blanc); }
.volet h4 { font-size: var(--bnbe-petit); letter-spacing: .06em; margin: var(--bnbe-espace-2) 0 4px; }   /* accent retiré des titres (règle) */
.volet p { margin-bottom: 0; }
.volet .region-tag { display: inline-block; font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-petit); color: var(--bnbe-marine);
  border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: 0 var(--bnbe-espace-1); margin-bottom: 4px; }
.capture { max-width: 36rem; }
#guide-bnbe .media {background: url(img/le-guide.jpg);}

/* Diagnostic : paliers, contenu, sorties */
.paliers .palier { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-top: var(--bnbe-bande) solid var(--bnbe-vert); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); height: 100%; background: var(--bnbe-blanc); }
.paliers .palier--complet { border-top-color: var(--bnbe-marine); }   /* pas d'accent sur fond blanc (correctif v2.2) */
.contenu li { display: flex; gap: var(--bnbe-espace-2); padding: var(--bnbe-espace-2) 0; border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.contenu li:last-child { border-bottom: none; }
.contenu li .lettre { font-family: var(--bnbe-police-zilla); font-weight: 700; color: var(--bnbe-vert); flex: none; width: 2rem; }
.contenu h4 { margin-bottom: 2px; }
.sorties .sortie { border: var(--bnbe-bordure) solid var(--bnbe-gris-bord); border-radius: var(--bnbe-rayon); padding: var(--bnbe-espace-4); height: 100%; display: flex; flex-direction: column; background: var(--bnbe-blanc); }
.sorties .sortie .btn { align-self: flex-start; margin-top: auto; }
.bg-marine .sortie h3 { color: var(--bnbe-marine); }   /* cartes blanches sur marine (ex-bleu, 07/10) */
.bg-marine .sortie p, .bg-marine .sortie .text-petit { color: var(--bnbe-gris-texte); }
#diagnostic .col-lg-7 {margin-top: 0;}

/* Estimez : ce que vous recevez */
.recevez li { display: flex; gap: var(--bnbe-espace-2); padding: var(--bnbe-espace-2) 0; border-bottom: var(--bnbe-bordure) solid var(--bnbe-gris-bord); }
.recevez li:last-child { border-bottom: none; }
.recevez li i { width: var(--bnbe-icone-etape); height: var(--bnbe-icone-etape); border-radius: var(--bnbe-rayon); background: var(--bnbe-marine); color: var(--bnbe-vert); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.recevez h4 { margin-bottom: 2px; }

/* Vocation : histoire (logo en tête), équipe (cinq personnes, 3 + 2), hub, valeurs, vision (hors V1, masquée) */
.logo-cadre { background: var(--bnbe-marine); border-radius: var(--bnbe-rayon); min-height: 420px; display: grid; place-items: center; text-align: center; padding: var(--bnbe-espace-5); }
.logo-cadre img { width: 240px; height: auto; }
.logo-cadre .tagline { font-family: var(--bnbe-police-comfortaa); font-weight: 700; color: var(--bnbe-blanc); font-size: var(--bnbe-t3); text-transform: lowercase; margin-top: var(--bnbe-espace-3); }
.equipe .media { min-height: 220px; border-radius: var(--bnbe-rayon) var(--bnbe-rayon) 0 0; }
.equipe .role { font-size: var(--bnbe-petit); color: var(--bnbe-accent); font-family: var(--bnbe-police-zilla); font-weight: 700; text-transform: lowercase; }
.valeurs .valeur { border-top: var(--bnbe-bande) solid var(--bnbe-vert); padding-top: var(--bnbe-espace-2); height: 100%; }
.valeurs .valeur h3 { font-size: var(--bnbe-t3); }
body:not(.vision-on) .vision { display: none; }   /* vision 2031 : hors V1 par défaut ; ajouter .vision-on sur <body> pour l'afficher */

/* Pages de texte (mentions, CG, politique) */
.prose { max-width: var(--bnbe-mesure-long); }
.prose h2 { margin-top: var(--bnbe-espace-5); }
.prose h3 { margin-top: var(--bnbe-espace-4); }
#cookies { scroll-margin-top: calc(var(--bnbe-header-h) + var(--bnbe-espace-3)); }   /* lien « Cookies » du pied de page : le titre du §12 reste sous l'en-tête collant (21/10) */

/* ============================================================
   JOURNAL DES CHANGEMENTS v2 → v2.1 (25/09), à relire par Olivier
   - accent : #FF9A00 (sa valeur), plus #F4A63A
   - bandeau collant : --accent générique + alias --rotations ; #avec-quoi ajouté
   - texte blanc dans les segments du comparatif (sa correction de séance)
   - logo : width 133 px / height auto (décision 24/09 : centrage du menu)
   - héros : marge 25 px sur mobile (demande du 24/09)
   - navbar : min-height = token header-h (80 / 56) — garantit le calage des collants
   - .nombre : classe systémique pour les chiffres ; .chiffres .h1 conservé en alias
   - soulignement : 1 px au lieu de 1 pt, transition sur transform seul, préfixes -webkit,
     reduced-motion — épaisseur constante Chrome / Firefox / Safari
   - .exemple .ligne : séparateur en border-top → le double trait avant « il vous reste » disparaît
   - .avis : hauteur constante au changement d'onglet (grille superposée)
   - .entete : min-height 320 px + centrage vertical (saut entre pages)
   - règle vert / accent selon le fond, appliquée aux surtitres et lignes de titre
   - .panneau : bande 6 px verte par défaut (accent sur bleu ou .panneau--accent)
   - .hero .origine supprimé (plus de liste dans le héros v3) ; .repere-ecart supprimé (« ça dégage », 24/09)
   - rgba blancs regroupés en tokens (trait-clair unifié à .2 — à valider)
   - utilitaires .mesure / .mesure-court / .mesure-long, footer .horaires : remplacent les style= inline
   - couche 7 complétée pour guide, diagnostic, contact, estimez, vocation, faq, légal
   
   JOURNAL DES CHANGEMENTS v2.1 → v2.3 (07/10)
   Olivier (sur la v2.1, dans le fichier) :
   - accent #FFAF34 (au lieu de #FF9A00) ; logo 130 px (au lieu de 133)
   - .container sans marge latérale : alignement de tous les éléments sur le même bord
   - fond marine : liens et soulignement en accent, pastilles d'icône accent, h4 et surtitres accent
   - .poste-carte sur marine (texte blanc), frise .etapes réutilisée pour les valeurs (vocation)
     et le diagnostic (guide), pastilles vertes
   Correctifs v2.2 (2/10), réappliqués puis vérifiés contre charpente-bnbe-v2-2.css (reçue le 09/10) :
   - .split / .split--lg : arrondis haut / bas une fois les blocs empilés (768 / 992 px)
   - contact : téléphone sur une seule ligne, en T3 sous 400 px
   - diagnostic : sorties en col-lg-4 (les boutons débordaient entre 768 et 991 px) — dans le gabarit ;
     la v2.2 laissait le libellé passer à la ligne, contraire à la règle des boutons : non repris
   - diagnostic : palier « complet » en marine (pas d'accent sur fond blanc)
   Règles du 07/10 :
   - .bg-bleu supprimé, toutes ses règles avec ; les sorties du diagnostic passent sur marine
   - liens texte en accent sur marine (listes de services et téléphone de contact compris)
   - sélecteur de région par volet (.volet.region-wal) au lieu de toute la page
   - marge latérale de 25 px sous 576 px (--bnbe-marge-mobile, partagée avec le héros)
   - .avec-bandeau > .container : padding vertical seulement (sinon la marge mobile est écrasée)
   - section.avec-bandeau : margin-bottom invalide supprimée
   
   JOURNAL DES CHANGEMENTS v2.3 → v2.4 (16/10)
   - vidéos de fond : .media--video (vidéo recadrée + voile uni), .video-pause (bouton pause / lecture)
   - token --bnbe-voile-video (marine à 45 %), à régler sur les vraies vidéos
   - règle absolue : toute vidéo de fond a un bouton pause
   - script associé : js/video-fond.js (pause, animations réduites, lecture seulement à l'écran)
   - .hero h1, h2, h3 en blanc : le H2 du hub restait en gris texte sur fond sombre
   - .video-pause i : neutralise la pastille globale des icônes (l'icône restait verte)

   AJOUT DU 19/10 (carte des provinces, accueil section 8)
   - .carte-belgique : SVG en ligne derrière .carte-texte, 50 % du container, à droite ;
     .localisation .container passe en grille d'une cellule (superposition sans position absolue)
   - .province / .province.active : agrandissement au survol de l'intitulé (script js/carte-belgique.js)
   - tokens --bnbe-carte-zoom (1.5) et --bnbe-carte-duree (.2s)
   - sous 992 px : la carte passe au-dessus du texte, pleine largeur (32rem max)
   ============================================================ */