/*
Theme Name: Begin
Theme URI: https://bonjour-begin.fr
Author: Begin
Description: Theme custom Begin — architecture commune (header, footer, tokens de design) construite à partir des maquettes validées du canvas de refonte. CSS externe plutôt qu'inline (consigne Florent, 28/09), base Bootstrap 5 chargée en CDN. N'intègre PAS encore le contenu réel des 18 gabarits de page ni le funnel de réservation (dépend du plugin métier "BonjourBegin", en cours de récupération) — uniquement l'architecture commune : design tokens, header, footer, classes utilitaires partagées (.btn, .card, .eyebrow, etc.), identiques à celles du canvas de maquettes pour que le rendu réel corresponde aux wireframes validés.
Version: 0.14.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: begin
*/

/* ==========================================================================
   Design tokens — copiés à l'identique du canvas de maquettes (Claude Design)
   pour que le site réel utilise exactement la même palette/typo que les
   wireframes déjà validés par Florent. Source : :root de NotreHistoire.dc.html
   et des autres artboards du canvas "Wireframes refonte Begin".
   ========================================================================== */
:root {
  --rouge: #E20613;
  --rouge-dark: #B90410;
  --bleu-gris: #A5BCCA;
  --gris-beige: #DCDBD9;
  --beige-rose: #EFDED5;
  --gris-clair: #F3EFEE;
  --blanc-casse: #F8F8F8;
  --ink: #2E2A27;
  --muted: #8A7F78;
  --line: #E4DCD5;
  --surface: #FFFFFF;
  --bg: var(--blanc-casse);
  --anthracite: #26211D;
  /* v99 (14/10) : gris anthracite neutre, demandé par Florent pour remplacer
     le fond marron (--ink, teinté chaud) du footer et du bouton header
     .btn-dark — --anthracite ci-dessus ne convient pas tel quel : c'est
     aussi une teinte chaude (brun), pas un gris neutre. Celui-ci est un vrai
     gris neutre (composantes R/V/B proches, légèrement plus froid), sans la
     dominante brune. */
  --anthracite-gris: #2B2E30;
}

/* Bootstrap est chargé en CDN pour quelques utilitaires (grille, etc. — cf.
   en-tête ci-dessus) mais ses propres variables de couleur par défaut
   (--bs-primary, --bs-link-color…) restent bleues tant qu'on ne les
   redéfinit pas, et plusieurs de ses composants (liens, .btn de base) s'y
   réfèrent directement. Sans ce correctif, certains éléments — notamment les
   boutons .btn au survol — héritaient silencieusement de ce bleu Bootstrap
   au lieu du rouge de marque (bug réel remonté par Florent le 13/10 sur la
   page Begin Pro). On neutralise ici une fois pour toutes, plutôt que de
   corriger composant par composant. */
:root {
  --bs-primary: var(--rouge);
  --bs-primary-rgb: 226, 6, 19;
  --bs-link-color: var(--rouge);
  --bs-link-color-rgb: 226, 6, 19;
  --bs-link-hover-color: var(--rouge-dark);
  --bs-link-hover-color-rgb: 185, 4, 16;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: "Poppins", Arial, sans-serif;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; line-height: 1.65; }

a { color: var(--rouge); text-decoration: none; }
a:hover { color: var(--rouge-dark); }

img { max-width: 100%; display: block; }

/* ==========================================================================
   Classes utilitaires partagées — identiques au canvas (.btn, .card, .eyebrow…)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary {
  background: var(--rouge);
  color: #fff;
  border: 2px solid var(--rouge);
  box-shadow: 0 10px 24px -8px rgba(226, 6, 19, .45);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn-dark {
  background: var(--anthracite-gris);
  color: #fff;
  border: 2px solid var(--anthracite-gris);
}

/* Survol uniforme de TOUS les boutons du site (consigne Florent, 13/10) :
   fond blanc, liseret rouge, texte rouge — qu'il s'agisse d'un .btn-primary
   plein, .btn-outline ou .btn-dark. Sélecteur "a.btn:hover, button.btn:hover"
   choisi plutôt que ".btn:hover" seul pour une spécificité strictement
   supérieure à celle des règles .btn/.btn-primary/… de Bootstrap (voir note
   sur --bs-primary plus haut) : la couleur gagne quel que soit l'ordre de
   chargement des feuilles de style, sans recourir à !important. */
a.btn:hover,
button.btn:hover {
  transform: translateY(-3px) scale(1.02);
  background: #fff;
  color: var(--rouge);
  border-color: var(--rouge);
  box-shadow: 0 14px 28px -10px rgba(46, 42, 39, .25);
}

.eyebrow {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.lift-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
.lift-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -14px rgba(46, 42, 39, .28); }

.link-arrow { position: relative; display: inline-block; }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.link-arrow:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .btn, .lift-card, .crm-mockup, .begin-lightbox { transition: none; }
}

/* ==========================================================================
   Mockup ordinateur portable (pour habiller une capture d'écran produit) +
   lightbox générique associée — introduits le 13/10 sur la page Begin Pro,
   réutilisables sur n'importe quelle autre page/gabarit du thème.
   ========================================================================== */
.crm-mockup {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  cursor: zoom-in;
  padding: 0;
  text-align: left;
}
.crm-mockup__frame {
  display: block;
  background: var(--anthracite);
  border-radius: 10px 10px 2px 2px;
  padding: 12px 12px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .3s ease;
}
.crm-mockup:hover .crm-mockup__frame,
.crm-mockup:focus-visible .crm-mockup__frame {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px -14px rgba(0, 0, 0, .4);
}
.crm-mockup__screen {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gris-clair);
  height: 180px;
}
.crm-mockup__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-mockup__base {
  display: block;
  height: 12px;
  margin: 0 -6px;
  background: linear-gradient(#332e29, var(--anthracite));
  border-radius: 0 0 6px 6px;
  position: relative;
}
.crm-mockup__base::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 26%;
  height: 5px;
  background: #15130f;
  border-radius: 0 0 5px 5px;
}
.crm-mockup__caption {
  display: block;
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.begin-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 16, .92);
  padding: 56px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.begin-lightbox.is-open { opacity: 1; visibility: visible; }
.begin-lightbox__img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.begin-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.begin-lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.begin-lightbox__caption {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
}
@media (max-width: 640px) {
  .crm-mockup__screen { height: 140px; }
}

/* ==========================================================================
   Site header / footer
   ========================================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Correctif du 13/10 : "height" seul ne suffit pas — sans "width", l'image
   retombe sur l'attribut HTML width (indice de taille intrinsèque posé par
   WordPress) et s'affiche étirée/écrasée plutôt qu'à son vrai ratio. Bug
   invisible avec l'ancien repli texte, découvert à la vérification visuelle
   après mise en place du vrai logo. Taille augmentée le 13/10 (retour de
   Florent : logo trop petit) : 26px → 36px.
   v98 (14/10) : ré-augmenté 36px → 44px (retour de Florent, "un peu plus
   gros", valable sur toutes les pages — cette règle n'est pas scopée à un
   gabarit). Accompagne le remplacement du fichier logo lui-même par une
   source haute résolution (cf. Apparence > Personnaliser > Logo), qui
   corrige par la même occasion le flou relevé sur le logo du footer (même
   fichier, affiché plus grand là-bas — cf. .site-footer__logo img). */
.site-header__logo img { height: 44px; width: auto; }
.site-header__nav { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.site-header__nav a {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.site-header__nav a.is-pro { color: var(--rouge); }
.site-header__toggle { display: none; }

.site-footer {
  background: var(--anthracite-gris); /* v99 (14/10) : était var(--ink) (brun) — Florent n'aimait pas, remplacé par un gris anthracite neutre */
  padding: 56px 64px 32px;
  color: rgba(255, 255, 255, .6);
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.site-footer__logo img { height: 56px; width: auto; } /* même correctif + même agrandissement que .site-header__logo img, cf. commentaire ci-dessus (34px → 46px, puis 46px → 56px le 14/10) */
.site-footer__columns { display: flex; gap: 56px; font-size: 13px; flex-wrap: wrap; }
.site-footer__column { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.site-footer__column-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.site-footer__column a { color: rgba(255, 255, 255, .6); }
.site-footer__column a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 20px;
  font-size: 12px;
}

/* Page en construction, visible tant qu'un gabarit réel n'a pas de contenu */
.begin-placeholder {
  max-width: 820px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}
.begin-placeholder h1 { font-size: 28px; margin-bottom: 12px; }
.begin-placeholder p { color: var(--muted); }

/* ==========================================================================
   Composants partagés entre gabarits de page — en-tête de section ("eyebrow"
   + H1 + chapô centré), utilisé par page-notre-histoire.php, page-faq.php et
   tout futur gabarit de page de contenu simple.
   ========================================================================== */
.page-hero {
  padding: 64px 24px 40px;
  text-align: center;
}
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 680px;
  margin: 0 auto 16px;
}
.page-hero p {
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
}

/* Un gros pictogramme en filigrane discret, positionné en arrière-plan d'une
   section (cf. direction design validée par Florent : gros B, cœurs, trèfle…
   partout sur le site). Le conteneur doit être position:relative. */
.watermark-icon {
  position: absolute;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* v100 (14/10) : gouttière latérale pour les sections "brutes" en style
   inline (page-btob.php, page-btob-demo.php) qui fixaient jusqu'ici un
   padding horizontal de 64px directement en HTML, jamais réduit sur mobile
   — cause réelle de débordement horizontal relevée par Florent ("le
   responsive ne m'a pas l'air ok partout"). Un style inline l'emporte
   toujours sur une règle externe à spécificité égale ou inférieure, donc la
   seule façon propre de le rendre réductible en media query est de sortir
   CE padding précis dans une classe (le padding vertical, propre à chaque
   section, reste en style inline). Pages plus récentes (Comment ça marche,
   Annuaire, Communauté gratuite, FAQ, Notre histoire) utilisaient déjà des
   classes dédiées avec un padding mobile raisonnable (24px) — seules ces
   deux pages, plus anciennes, étaient restées sur le pattern inline 64px. */
.pad-h-64 { padding-left: 64px; padding-right: 64px; }
@media (max-width: 640px) {
  .pad-h-64 { padding-left: 20px; padding-right: 20px; }
}

/* v101 (14/10) : même situation que .pad-h-64 ci-dessus, trouvée en reprenant
   page-btob.php pour le retour de Florent sur le marron — cinq grilles de
   cartes (#fonctionnalites, #crm, #independance, #communaute-membres,
   "Nous sommes partenaires") fixaient leur nombre de colonnes (2 ou 3) en
   style inline, sans aucun repli mobile. `minmax(0,1fr)` empêche un
   débordement d'écran, donc un test de largeur de page ne voit rien — mais
   les colonnes se compriment à ~100px de large sur un téléphone, assez
   étroit pour que le texte se coupe caractère par caractère dans chaque
   carte (bug réel vérifié en capture d'écran à 375px, pas seulement
   supposé). Sorties dans ces deux classes, qui passent à une seule colonne
   sous 640px — le nombre de colonnes desktop (2 ou 3) vient du nom de
   classe, tout le reste (gap, max-width, margin) reste en style inline. */
.grid-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .grid-cards-2, .grid-cards-3 { grid-template-columns: 1fr; }
}

/* v102 (14/10) : Florent trouve que le bandeau sticky "Sur cette page" de
   page-btob.php (#fonctionnalites, #crm, etc.) "prend un peu trop de place"
   sur mobile — à raison : avec flex-wrap:wrap et 8 liens, il s'étalait sur
   4 lignes (~155px de haut), en permanence à l'écran puisque sticky. Plutôt
   que de retirer des liens ou la rendre non-sticky (ni demandé, ni
   souhaitable : c'est une vraie navigation d'ancrage utile sur une page
   longue), passée en une seule ligne qui défile horizontalement sur mobile —
   même principe que .nh-team__row (rangée de photos) plus bas dans ce
   fichier, déjà utilisé ailleurs sur le site. Résultat : une seule ligne
   compacte (~44px) au lieu de 4. */
.btob-subnav { gap: 28px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .btob-subnav {
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .btob-subnav::-webkit-scrollbar { display: none; }
  .btob-subnav span, .btob-subnav a { flex-shrink: 0; white-space: nowrap; }
}

/* ==========================================================================
   Page : Notre histoire (page-notre-histoire.php)
   ========================================================================== */
.nh-container { max-width: 1312px; margin: 0 auto; padding: 0 24px; }

.nh-intro {
  padding: 56px 0 56px;
  position: relative;
  overflow: hidden;
}
.nh-intro .watermark-icon { top: -16px; bottom: -16px; height: calc(100% + 32px); left: -40px; width: auto; }
/* v101 (14/10) : c'est CE conteneur (pas .nh-intro, dont le display:flex ne
   portait de toute façon que sur un seul enfant effectif : le filigrane est
   position:absolute, donc hors du flux flex) qui porte la vraie mise en
   colonnes texte/photo. Jusqu'ici ce display:flex était en style INLINE
   directement dans page-notre-histoire.php, donc invisible à toute media
   query — bug réel trouvé sur capture d'écran transmise par Florent
   ("pas du tout responsive") : sur mobile, texte et photo restaient
   côte à côte, la photo (min-width:280px, cf. .nh-intro__photo) écrasant le
   texte dans un filet de quelques dizaines de pixels de large, sans aucun
   débordement horizontal détectable (d'où l'absence de ce bug dans l'audit
   précédent, basé sur un test de scrollWidth). Déplacé en classe dédiée,
   réductible en media query ci-dessous comme .nh-intro__photo l'était déjà
   (cf. @media max-width:860px) mais sans effet tant que le parent restait en
   ligne. */
.nh-intro__row { display: flex; gap: 48px; align-items: center; width: 100%; }
.nh-intro__text { flex: 1 1 420px; min-width: 0; position: relative; z-index: 1; }
.nh-intro__text h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.nh-intro__tagline { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: var(--muted); margin-bottom: 22px; }
.nh-intro__text p.body { color: var(--ink); opacity: 0.85; font-size: 16px; margin-bottom: 16px; }
.nh-intro__beginsnow { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 16px; }
.nh-intro__photo {
  flex: 1 1 380px;
  min-width: 280px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 40px -14px rgba(46, 42, 39, .22);
}
.nh-intro__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nh-intro__photo-caption {
  position: absolute; left: 20px; right: 20px; bottom: 16px;
  color: #fff; font-family: "Poppins", sans-serif; font-size: 13px;
}
.nh-intro__photo-gradient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(38,33,29,.78), rgba(38,33,29,0));
}

/* v100 (14/10) : padding-top ajouté (était 0) — Florent : le bloc "L'alternative…"
   mangeait un peu sur le filigrane du gros B de la section au-dessus
   (.nh-intro .watermark-icon), les deux sections se touchant sans aucun
   espace entre elles. */
.nh-why { padding: 40px 0 56px; }
.nh-why__card {
  padding: 40px 36px;
  background: var(--gris-clair);
  border: none;
  position: relative;
  overflow: hidden;
}
.nh-why__card .watermark-icon { top: 30px; right: -60px; width: 280px; height: auto; transform: rotate(12deg); }
.nh-why__card h2 { font-size: 22px; font-weight: 800; margin-bottom: 18px; max-width: 760px; position: relative; z-index: 1; }
.nh-why__card p { font-size: 16px; color: var(--ink); opacity: .85; max-width: 820px; position: relative; z-index: 1; margin-bottom: 14px; }
.nh-why__card p:last-child { margin-bottom: 0; }
.nh-why__card strong { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--rouge); }

.nh-mission { padding: 16px 0 56px; }
.nh-mission__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nh-mission__card { padding: 28px; }
.nh-mission__card .eyebrow { margin-bottom: 12px; }
.nh-mission__card p { font-size: 14px; color: var(--ink); opacity: .85; }

.nh-team { padding: 0 0 64px; }
.nh-team .eyebrow { margin-bottom: 16px; }
.nh-team__row { display: flex; gap: 18px; max-width: 100%; overflow-x: auto; padding-bottom: 6px; }
.nh-team__item {
  flex: 0 0 240px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px -10px rgba(46, 42, 39, .18);
}
.nh-team__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .nh-intro { padding-top: 40px; }
  .nh-intro__row { flex-direction: column; align-items: stretch; gap: 28px; }
  .nh-intro__photo { width: 100%; height: 280px; }
  .nh-mission__grid { grid-template-columns: 1fr; }
  /* v101 (14/10), retour direct de Florent sur capture d'écran ("le B est
     trop étiré en hauteur, ça ne rend pas bien") : .nh-intro .watermark-icon
     (cf. plus bas) fixe sa hauteur à 100% + 32px de .nh-intro, avec une
     largeur auto. Tant que texte et photo étaient côte à côte, .nh-intro
     restait bas (~400px) et le filigrane gardait des proportions correctes
     par coïncidence. Depuis le correctif .nh-intro__row ci-dessus (texte et
     photo empilés sur mobile), .nh-intro est devenu beaucoup plus haut
     (~1100px+) : la hauteur du filigrane grandit avec, mais sa largeur reste
     plafonnée à 100% du conteneur par la règle globale `img{max-width:100%}`
     — d'où un B très haut et très étroit, visiblement déformé. Corrigé en
     repassant, sur mobile uniquement, sur le même motif que les autres
     filigranes du site (largeur fixe, hauteur:auto — qui respecte le vrai
     ratio de l'image, cf. .nh-why__card .watermark-icon par ex.) plutôt que
     l'inverse (hauteur fixe, largeur auto, qui ne le respecte pas pour un
     élément positionné en absolu). */
  .nh-intro .watermark-icon { top: -16px; bottom: auto; left: -30px; height: auto; width: 200px; }
}

/* ==========================================================================
   Page : FAQ (page-faq.php)
   ========================================================================== */
.faq-container { max-width: 820px; margin: 0 auto; padding: 0 24px 96px; }
.faq-category { position: relative; overflow: hidden; margin-bottom: 40px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category .eyebrow { margin: 0 0 16px; position: relative; z-index: 1; }
.faq-category .watermark-icon { height: auto; }
.faq-category__list { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.faq-item { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-q span { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.faq-q svg { flex-shrink: 0; }
.faq-a { font-size: 14px; color: var(--muted); max-width: 680px; }

/* ==========================================================================
   Page : Comment ça marche (page-comment-ca-marche.php)

   Adaptation volontaire par rapport au canvas : la section "Le déroulé" du
   canvas (Offres.dc.html, v60) dessine un tracé "façon serpent" en SVG avec
   des cartes en position absolue sur un artboard de 1000x1080px fixes —
   display qui ne peut pas être rendu responsive tel quel (aucune des valeurs
   n'est relative). Remplacé ici par un déroulé en 2 voies verticales
   (Client / Membre) avec puces numérotées reliées par un trait, qui porte le
   même contenu et la même logique (1 étape commune, puis 4 étapes par voie)
   mais s'empile proprement en 1 colonne sous 860px. À valider visuellement
   par Florent : c'est un choix de mise en forme, pas une simplification du
   contenu (les 9 étapes/textes du canvas sont tous repris mot pour mot).
   ========================================================================== */
.cm-compare { padding: 0 0 80px; }
.cm-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: 0 auto; }
.cm-compare__card { padding: 40px; display: flex; flex-direction: column; position: relative; }
.cm-compare__card .eyebrow { margin-bottom: 10px; }
.cm-compare__card h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.cm-compare__price { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; margin-bottom: 6px; }
.cm-compare__note { font-size: 13px; color: var(--muted); margin-bottom: 30px; }
.cm-compare__card .link-arrow { font-size: 13px; font-weight: 600; color: var(--rouge); margin-bottom: 30px; display: inline-block; }
.cm-compare__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cm-compare__card .btn { margin-top: auto; width: 100%; }
.cm-compare__membre { overflow: hidden; }
.cm-compare__membre .watermark-icon { top: -90px; right: -90px; width: 260px; height: auto; transform: rotate(16deg); }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); }
.check-row.is-muted { color: var(--muted); }
.check-row.is-muted span:first-child { color: var(--muted); }
.check-row span:first-child { color: var(--rouge); flex-shrink: 0; }

/* v96 (13/10) : styles de formulaire, repris de BtoBDemo.dc.html (canvas,
   annotation v59 — "Styles de formulaire, absents de la direction design de
   base ... ajoutés ci-dessous sur les mêmes tokens"). Première page du thème
   à avoir un vrai formulaire hors du widget du plugin BonjourBegin (cf. les
   règles #bonjour-begin-plugin-container plus haut dans ce fichier, qui ne
   s'appliquent pas ici) — sélecteurs bruts comme dans le canvas, pas de
   classe dédiée, cohérent avec le fait qu'aucune autre page actuelle n'a de
   label/input/select en dehors du plugin. */
label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; font-size: 14px; font-family: "Open Sans", sans-serif; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface);
}
.field { margin-bottom: 18px; }

/* ==========================================================================
   Carrousel presse ("Ils parlent de Begin") — v98 (14/10), ajouté sur la page
   Demande de démo (page-btob-demo.php) juste avant le footer, à la demande
   de Florent ("pour crédibiliser"). Logos réels récupérés sur le site de
   production (www.bonjour-begin.fr), pas des placeholders — cf. commentaire
   en tête de page-btob-demo.php. Défilement en CSS pur (@keyframes), liste
   de logos dupliquée une fois dans le HTML pour boucler sans saut visible ;
   pause au survol et défilement coupé si l'utilisateur préfère moins
   d'animation (prefers-reduced-motion, cf. règle déjà en place plus haut
   dans ce fichier pour .btn/.lift-card/etc., complétée ici). */
.presse-carousel { padding: 56px 0 64px; background: var(--gris-clair); overflow: hidden; }
/* v99 (14/10) : variante utilisée en haut de page (juste sous le header,
   avant le hero) plutôt qu'avant le footer — remonté à la demande de
   Florent ("pas assez visible en bas"). Padding resserré : le bloc suit
   directement le header plutôt qu'une section précédente avec sa propre
   marge basse, pas besoin du même entourage généreux. */
.presse-carousel--top { padding: 0 0 40px; }
/* v100 (14/10) : cette variante n'est plus seulement "remontée" (v99), elle
   remplace carrément le <header> séparé sur page-btob-demo.php (cf. le
   commentaire v100 dans header.php) — Florent se demandait si le bandeau
   presse ne pouvait pas faire office de header. Le logo (cliquable vers
   l'accueil, comme le vrai header) est donc réintégré ici plutôt que
   simplement supprimé, pour ne pas laisser la page sans aucune marque Begin
   visible au-dessus de la ligne de flottaison. */
.presse-carousel__masthead { display: flex; justify-content: center; padding: 28px 0 24px; }
.presse-carousel__logo { margin: 0; }
.presse-carousel__head { text-align: center; margin-bottom: 32px; }
.presse-carousel__mask {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.presse-carousel__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: begin-presse-scroll 32s linear infinite;
}
.presse-carousel__mask:hover .presse-carousel__track { animation-play-state: paused; }
.presse-carousel__track img {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  opacity: .85;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease;
}
.presse-carousel__track img:hover { opacity: 1; filter: grayscale(0); }
@keyframes begin-presse-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .presse-carousel__track { animation: none; }
}
@media (max-width: 640px) {
  .presse-carousel__track img { height: 26px; }
}

.cm-flow { padding: 0 0 96px; position: relative; overflow: hidden; }
.cm-flow .watermark-icon { top: 420px; left: -100px; width: 480px; height: auto; opacity: .07; transform: rotate(-14deg); }
.cm-flow__head { text-align: center; margin-bottom: 48px; position: relative; z-index: 1; }
.cm-flow__head .eyebrow { margin-bottom: 16px; }
.cm-flow__intro { max-width: 760px; margin: 0 auto 48px; position: relative; z-index: 1; }
.cm-step1 { display: flex; gap: 18px; align-items: flex-start; }
.cm-step1__node, .cm-step__node {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
	background: var(--rouge); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: "Poppins", sans-serif; font-weight: 800; font-size: 16px;
	box-shadow: 0 10px 24px -8px rgba(226, 6, 19, .45);
}
.cm-step1 h3, .cm-step__body h3 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.cm-step1 p, .cm-step__body p { font-size: 14.5px; color: var(--ink); opacity: .8; }
.cm-flow__lanes { max-width: 1000px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; position: relative; z-index: 1; }
.cm-lane__badge {
	display: inline-block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase; padding: 7px 18px; border-radius: 20px; margin-bottom: 24px;
}
.cm-lane--client .cm-lane__badge { background: var(--beige-rose); color: var(--rouge-dark); }
.cm-lane--membre .cm-lane__badge { background: rgba(165, 188, 202, .28); color: #3E5A6B; }
.cm-lane__steps { display: flex; flex-direction: column; gap: 28px; position: relative; padding-left: 2px; }
.cm-lane__steps::before {
	content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
	background-repeat: repeat-y; background-size: 2px 12px;
}
.cm-lane--client .cm-lane__steps::before { background-image: linear-gradient(var(--rouge-dark), var(--rouge-dark)); opacity: .3; }
.cm-lane--membre .cm-lane__steps::before { background-image: linear-gradient(#3E5A6B, #3E5A6B); opacity: .3; }
.cm-step { display: flex; gap: 16px; align-items: flex-start; position: relative; z-index: 1; }
.cm-step__node { background: var(--surface); border: 2px solid var(--line); color: var(--ink); width: 44px; height: 44px; box-shadow: none; }
.cm-lane--client .cm-step__node { border-color: var(--rouge-dark); color: var(--rouge-dark); }
.cm-lane--membre .cm-step__node { border-color: #3E5A6B; color: #3E5A6B; }
.cm-step__body img { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }

.cm-tarifs { padding: 0 0 96px; }
.cm-tarifs__card { padding: 48px 56px; max-width: 1080px; margin: 0 auto; background: var(--gris-clair); border: none; position: relative; overflow: hidden; }
.cm-tarifs__card .watermark-icon { bottom: -60px; right: 20px; top: auto; width: 220px; height: auto; opacity: .12; transform: rotate(-8deg); }
.cm-tarifs__content { position: relative; z-index: 1; }
.cm-tarifs__content .eyebrow { margin-bottom: 14px; }
.cm-tarifs__content h2 { font-size: 26px; font-weight: 800; margin-bottom: 18px; max-width: 720px; }
.cm-tarifs__content p { font-size: 16px; color: var(--ink); opacity: .85; margin-bottom: 16px; max-width: 760px; }
.cm-tarifs__note {
	font-size: 12px; color: var(--ink); background: rgba(165, 188, 202, .16); border: 1px solid var(--bleu-gris);
	border-radius: 10px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 8px; max-width: 760px; margin: 0;
}
.cm-tarifs__note svg { flex-shrink: 0; margin-top: 2px; }

.cm-cta { padding: 64px 24px; background: var(--rouge); text-align: center; position: relative; overflow: hidden; }
.cm-cta__ghost {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	overflow: hidden; pointer-events: none; z-index: 0;
}
.cm-cta__ghost span {
	font-family: "Poppins", sans-serif; font-weight: 800; font-size: 400px; letter-spacing: -0.03em;
	color: rgba(255, 255, 255, .14); white-space: nowrap;
}
.cm-cta__body { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.cm-cta__body h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 18px; }
.cm-cta__body .btn { background: #fff; color: var(--rouge); border: 2px solid #fff; }

.cm-faq { padding: 56px 24px 96px; max-width: 820px; margin: 0 auto; }
.cm-faq__head { text-align: center; margin-bottom: 40px; }
.cm-faq__head .eyebrow { margin-bottom: 16px; }
.cm-faq__list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.cm-faq__list .faq-item { background: var(--surface); }

@media (max-width: 860px) {
  .cm-compare__grid { grid-template-columns: 1fr; }
  .cm-flow__lanes { grid-template-columns: 1fr; gap: 48px; }
}

/* ==========================================================================
   Badges partagés ("communauté gratuite" / "appel découverte gratuit") —
   utilisés sur Annuaire, FicheMatchmaker (à construire) et FunnelResultats.
   Bleu-gris plutôt que rouge pour les deux : le rouge évoque un manque, pas
   une info positive (décision Laura/Florent actée depuis v47).
   ========================================================================== */
.badge-free, .badge-community {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #3E5A6B;
  background: rgba(165, 188, 202, .22);
  border: 1px solid var(--bleu-gris);
  border-radius: 20px;
  padding: 4px 9px;
}

/* ==========================================================================
   Page : Annuaire (page-annuaire.php)
   ========================================================================== */
.annu-intro { padding: 64px 24px 32px; }
.annu-intro__inner { max-width: 900px; margin: 0 auto; }
.annu-intro .eyebrow { margin-bottom: 14px; }
.annu-intro h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
.annu-intro p { color: var(--muted); font-size: 16px; }
.annu-intro p a { font-weight: 600; }

.annu-filters { max-width: 1312px; margin: 0 auto; padding: 0 24px 32px; }
.annu-filters__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 20px;
}
.annu-filters__search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--bg);
}
.annu-filters__search span { font-size: 13px; color: var(--muted); }
.annu-filters__country {
  display: inline-flex; align-items: center; gap: 6px; font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: 13px; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; background: var(--surface); flex-shrink: 0;
}
.annu-filters__geoloc { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.annu-filters__chips {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.annu-filters__chips-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.chip {
  font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 15px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}

.annu-grid-section { max-width: 1312px; margin: 0 auto; padding: 0 24px 40px; }
.annu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.annu-card-wrap { position: relative; }
.annu-card__watermark {
  position: absolute; left: -70px; bottom: -70px; width: 260px; height: auto;
  opacity: .13; pointer-events: none; z-index: 0; transform: rotate(-6deg);
}
.annu-card { overflow: hidden; box-shadow: 0 14px 32px -10px rgba(46, 42, 39, .12); position: relative; z-index: 1; }
.annu-card__photo { height: 160px; }
.annu-card__body { padding: 18px; }
.annu-card__name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.annu-card__zone { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.annu-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.annu-grid__more { text-align: center; margin-top: 36px; }

@media (max-width: 860px) {
  .annu-grid { grid-template-columns: 1fr; }
  .annu-filters__bar { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Page : Communauté gratuite — instance Laura (page-communaute-laura.php)
   ========================================================================== */
.cg-back { padding: 16px 24px 0; font-size: 13px; color: var(--muted); max-width: 1100px; margin: 0 auto; }
.cg-back a { color: var(--muted); }

.cg-hero { padding: 40px 24px 48px; text-align: center; }
.cg-hero__photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px;
  box-shadow: 0 10px 24px -10px rgba(46, 42, 39, .25);
}
.cg-hero .eyebrow { margin-bottom: 14px; }
.cg-hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px; max-width: 680px; margin-left: auto; margin-right: auto; }
.cg-hero p { color: var(--muted); font-size: 16px; max-width: 600px; margin: 0 auto; }

.cg-main { display: flex; gap: 48px; padding: 0 24px 72px; align-items: flex-start; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.cg-features { flex: 1 1 380px; display: flex; flex-direction: column; gap: 22px; min-width: 280px; }
.feature-row { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink); }
.feature-row p { color: var(--muted); font-size: 14px; }
.feature-row__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.icon-tile {
  width: 36px; height: 36px; border-radius: 12px; background: var(--beige-rose);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cg-features__badge { margin-top: 8px; }

.cg-form { width: 420px; flex-shrink: 0; padding: 0; overflow: hidden; }
.cg-form__tag {
  background: var(--gris-clair); padding: 9px 16px; border-bottom: 1px solid var(--line);
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; color: var(--muted);
  letter-spacing: .03em; text-transform: uppercase;
}
.cg-form__body { background: var(--gris-clair); padding: 56px 32px; text-align: center; }
.cg-form__icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.cg-form__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.cg-form__body p { font-size: 13px; color: var(--muted); max-width: 300px; margin: 0 auto; }
.cg-form__note { font-size: 11px; color: var(--muted); text-align: center; padding: 12px 20px 18px; background: var(--gris-clair); }

/* v86 : conteneur du vrai widget d'inscription du plugin BonjourBegin
   (shortcode [bonjour_begin_register_widget]) — le widget gère sa propre
   mise en forme interne (bonjour-begin.css), ce wrapper ne fait que
   l'habiller visuellement dans la colonne de droite ; overflow remis à
   visible (contrairement à .cg-form de base) pour ne jamais rogner un
   élément du widget (listes déroulantes, étapes suivantes du parcours). */
.cg-form--plugin { padding: 24px 20px; overflow: visible; background: var(--gris-clair); }

/* v87 : correctif d'un bug visuel réel constaté après la mise en ligne du
   widget plugin (v86) — la barre de progression affichait "Etape 1 sur 617%"
   au lieu de "Etape 1 sur 6" + "17%" sur deux zones séparées. Diagnostic :
   le plugin BonjourBegin donne la classe `.progress` à son conteneur de
   barre de progression, qui entre en collision avec la classe `.progress`
   de Bootstrap (chargé en CDN par ce thème, cf. functions.php) : Bootstrap
   impose `display:flex` à `.progress`, ce qui transforme `.infos` et `.bar`
   (initialement pensés comme empilés, l'un au-dessus de l'autre) en deux
   colonnes flex côte à côte. `.infos` se retrouve alors réduit à la largeur
   de son seul contenu, et son `margin-left:auto` sur `.percent` (prévu pour
   pousser le pourcentage à droite) n'a plus d'espace disponible pour
   s'appliquer : "Etape 1 sur 6" et "17%" se retrouvent collés l'un à
   l'autre. Correctif scoping le conflit au seul widget plugin, sans toucher
   aux fichiers du plugin lui-même (propriété de Benoît) ni à Bootstrap
   globalement (dont d'autres pages peuvent dépendre). */
#bonjour-begin-plugin-container .progress { display: block; }
#bonjour-begin-plugin-container .progress .infos { width: 100%; }

/* v87 (suite) : second effet du même conflit Bootstrap. Les colonnes de
   formulaire du widget (ex. Prénom / Nom) utilisent les vraies classes de
   grille Bootstrap (.row > .col-12.col-lg-6), ce qui est correct en soi,
   mais Bootstrap attend normalement que `.row` soit placé dans un
   `.container`/`.container-fluid` qui compense par un padding la marge
   négative de `.row` (-12px de chaque côté avec le gutter par défaut de
   24px). Le plugin place son `.row` directement dans `.carousel-container`,
   sans ce padding compensatoire : le contenu déborde donc de ~12px de
   chaque côté de la carte (léger débordement visuel constaté sur le champ
   "Nom", visible comme une fine bande vide collée au bord droit de la
   carte). On restitue ici ce padding compensatoire, comme le ferait
   `.container-fluid` de Bootstrap. */
#bonjour-begin-plugin-container .carousel-container { padding-left: 12px; padding-right: 12px; }

/* v88 : bug plus sérieux trouvé en vérifiant la v87 ci-dessus — la bande
   résiduelle visible après le champ "Nom" n'était pas (seulement) le débordement
   de grille corrigé plus haut, mais un vrai débordement des champs de saisie
   eux-mêmes. Les <input> du widget (Prénom, Nom, email, téléphone, etc.) ont
   un attribut HTML `size="40"` et le plugin BonjourBegin ne leur donne aucune
   règle de largeur en CSS (sa propre feuille bonjour-begin.css ne stylise pas
   `.form-input`) : un navigateur sans autre contrainte dimensionne alors le
   champ à ~40 caractères de large (339px mesurés), quelle que soit la largeur
   réelle de sa colonne (185px mesurés dans une colonne à deux champs) — soit
   154px de débordement par champ, caché par `overflow:visible` plutôt que
   coupé, d'où la fine bande visible débordant de la carte. C'est au thème de
   fournir cette règle de largeur puisque le plugin ne le fait pas (cf. note
   v86 : le widget "gère sa propre mise en forme interne" concerne la
   structure, pas la largeur des champs). */
/* Ciblage volontairement restreint aux champs placés dans une colonne de
   grille Bootstrap (ex. Prénom / Nom / email / téléphone) : la date de
   naissance (jour/mois/année) utilise un <fieldset> sans colonnes, où 3
   champs doivent rester côte à côte avec leur taille HTML `size` actuelle —
   leur appliquer width:100% les empilerait verticalement et casserait cette
   mise en page qui, elle, fonctionne correctement. */
#bonjour-begin-plugin-container [class*="col-"] input[type="text"],
#bonjour-begin-plugin-container [class*="col-"] input[type="email"],
#bonjour-begin-plugin-container [class*="col-"] input[type="tel"],
#bonjour-begin-plugin-container [class*="col-"] input[type="number"],
#bonjour-begin-plugin-container [class*="col-"] input[type="password"],
#bonjour-begin-plugin-container [class*="col-"] select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cg-upsell { padding: 56px 24px; background: var(--surface); border-top: 1px solid var(--line); text-align: center; }
.cg-upsell h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.cg-upsell p { color: var(--muted); font-size: 14px; margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .cg-main { flex-direction: column; }
  .cg-form { width: 100%; }
}

/* ==========================================================================
   Responsive — gouttière latérale minimale au format mobile
   ========================================================================== */
@media (max-width: 860px) {
  .site-header, .site-footer { padding-left: 24px; padding-right: 24px; }
  .site-header__nav { display: none; }
  .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .site-header.is-open .site-header__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    /* v100 (14/10) : était "top: 72px" — un nombre figé qui supposait une
       hauteur de header de 72px. Trouvé faux en auditant le responsive à la
       demande de Florent : le header fait en réalité ~96-97px depuis
       l'agrandissement du logo (v98/v99, 36px → 44px avec son padding), donc
       le menu ouvert chevauchait le bas du header au lieu de s'ouvrir juste
       en dessous. "top: 100%" colle toujours exactement au bas réel du
       header (position:relative, cf. règle juste en dessous), quelle que
       soit sa hauteur — ne cassera plus si le logo change encore de taille. */
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    padding: 24px;
    border-bottom: 1px solid var(--line);
    /* v100 (14/10) : 40 → 60 — trouvé trop bas en auditant le responsive
       (page-btob.php a un sous-menu sticky en z-index:50 qui passait
       au-dessus du menu ouvert, le rendant invisible malgré un DOM "ouvert"
       — cf. le commentaire détaillé dans page-btob.php). Un menu burger
       ouvert doit toujours s'afficher au-dessus de tout contenu de page,
       sticky ou non ; 60 laisse de la marge au-dessus de tout z-index de
       contenu actuellement utilisé sur le site (le plus élevé trouvé était
       50). */
    z-index: 60;
  }
  .site-header { position: relative; }
  .site-footer__top { flex-direction: column; }
  .site-footer__columns { gap: 32px; }
}


/* ==========================================================================
Page : Blog — liste, catégorie, article (système d'articles géo, rapatriement
du blog production, v103 21/10). Réutilise au maximum les briques existantes
— .annu-card (cartes), .chip (filtre), .watermark-icon (picto en filigrane),
le motif .cm-cta__ghost (mot géant en filigrane) et .cg-main/.cg-features/
.cg-form (mise en page à deux colonnes) — plutôt que d'inventer un nouveau
langage visuel : demande explicite de Florent le 21/10 ("comme on a deja
fait") suite à son retour sur le pilote Nantes ("la page Blog manque un peu
d'âme / visuel sur l'aperçu / bouton Lire l'article / tri par catégorie /
page article : visuel en haut, titre centré, texte aéré, sidebar").
========================================================================== */

/* -- En-tête Blog / Catégorie : .page-hero existant + picto cœur en
filigrane (assets/img/shared/icon-heart-stem.png, déjà utilisé ailleurs
sur le site, cf. .nh-intro .watermark-icon pour le même motif). -- */
.blog-hero { position: relative; overflow: hidden; }
/* v121 (22/10) : Florent a demande de centrer le picto par rapport au titre --
   .page-hero h1 a 'margin:0 auto' donc sa boite est deja centree sur la largeur
   de .blog-hero quelle que soit la longueur du titre (verifie : centre du H1 ==
   centre du hero sur /blog/ et /blog/lamour-en-france/), d'ou 'left:50%' pur
   CSS, sans JS. Hauteur reduite + 'top' remonte car .blog-hero a overflow:hidden
   et ne fait que ~224px de haut : la version precedente (top:90px, 150px de
   large ~153px de haut) depassait de ~58px et avait le bas du cœur coupe net
   (retour Florent : "on ne voit pas le bas"). Ici top:55 + hauteur ~143px =
   bas a 198px, dans les 224px du hero avec de la marge. */
.blog-hero .watermark-icon {
  top: 55px; left: 50%;
  width: 140px; height: auto;
  opacity: .12;
  transform: translateX(-50%) rotate(-10deg);
}
.blog-hero .page-hero { position: relative; z-index: 1; }

/* -- Bandeau "mot en filigrane" entre deux rangées d'articles — même motif
que .cm-cta__ghost (page Comment ça marche), sur fond clair plutôt que
rouge puisqu'il s'intercale dans une grille de cartes, pas dans un CTA. -- */
.blog-ghost-band {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 140px;
  overflow: hidden;
  pointer-events: none;
}
.blog-ghost-band span {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 150px;
  letter-spacing: -0.03em; color: var(--beige-rose); white-space: nowrap;
}
@media (max-width: 860px) {
  .blog-ghost-band { height: 90px; }
  .blog-ghost-band span { font-size: 80px; }
}

/* -- Filtre dynamique par catégorie — reprend .annu-filters__chips + .chip
tels quels (même composant que l'annuaire) ; .chip.is-active est une
variante ajoutée ici, .chip n'avait jusque-là aucun état "sélectionné". -- */
.blog-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 32px;
}
.blog-filters__label { font-size: 13px; color: var(--muted); font-weight: 600; font-family: "Poppins", sans-serif; }
.chip.is-active { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.blog-grid-section { max-width: 1312px; margin: 0 auto; padding: 0 24px 72px; }

/* -- Carte article — même squelette que .annu-card (photo + corps, lift au
survol via .lift-card), avec eyebrow catégorie + CTA "Lire l'article". -- */
.blog-card { display: block; overflow: hidden; position: relative; box-shadow: 0 14px 32px -10px rgba(46, 42, 39, .12); }
.blog-card__photo { height: 180px; background-size: cover; background-position: center; }
.blog-card__body { padding: 22px; }
.blog-card__cat { display: block; margin-bottom: 10px; }
.blog-card__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 10px; }
.blog-card__excerpt { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.blog-card__cta { display: inline-flex; align-items: center; gap: 6px; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 13px; color: var(--rouge); }
.blog-card__cta svg { transition: transform .25s ease; }
.blog-card:hover .blog-card__cta svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .blog-grid-section .grid-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-grid-section .grid-cards-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
Page : Article géo (single post, catégorie "Nos matchmakers") — hero centré
avec visuel, corps de texte aéré, sidebar de navigation (même motif à deux
colonnes que .cg-main / .cg-features / .cg-form, page Communauté gratuite).
========================================================================== */
.article-hero { padding: 48px 24px 0; text-align: center; }
.article-hero__breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.article-hero__breadcrumb a { color: var(--muted); }
.article-hero__breadcrumb a:hover { color: var(--rouge); }
.article-hero .eyebrow { display: block; margin-bottom: 14px; }
.article-hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.01em; max-width: 760px; margin: 0 auto 32px; }
.article-hero__photo { max-width: 1100px; margin: 0 auto; height: 360px; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 44px -16px rgba(46, 42, 39, .25); }
.article-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.article-layout { display: flex; gap: 48px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 48px 24px 96px; flex-wrap: wrap; }
.article-body { flex: 1 1 560px; min-width: 0; }
.article-body p { margin-bottom: 18px; }
.article-body h2 { font-size: 24px; font-weight: 700; margin: 44px 0 16px; }
.article-body h2:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }

.article-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.article-sidebar__card { padding: 26px; text-align: center; }
.article-sidebar__card h3 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.article-sidebar__card p { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.article-sidebar__card .btn { width: 100%; }

@media (max-width: 860px) {
  .article-hero h1 { font-size: 28px; }
  .article-hero__photo { height: 220px; border-radius: 14px; }
  .article-layout { flex-direction: column; }
  .article-sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .article-sidebar__card { flex: 1 1 240px; }
}