/* ==========================================================================
   beegin — composants de page (accueil et pages intérieures)
   Chargé après beegin-blocksy.css (voir inc/beegin-block-styles.php).
   ========================================================================== */

/* Fonds foncés : titres, textes et petits textes clairs (Blocksy impose sinon le noir). */
.has-noir-background-color, .has-sarcelle-background-color,
.bloc.sombre, .bloc.couleur.sarcelle,
.appel-a-action.sombre, .appel-a-action.couleur.sarcelle, .beegin-cta-section {
  --theme-headings-color: var(--beegin-blanc);
  --theme-text-color: var(--beegin-blanc);
  color: var(--beegin-blanc);
}
.has-noir-background-color .petit,
.has-sarcelle-background-color .petit { color: rgba(255, 255, 255, .72); }
.has-noir-background-color .citation-pilule p { color: var(--beegin-turquoise); }

/* Pages composées de sections pleine largeur : pas d'espace entre le header, les sections et le footer. */
.ct-container-full:has(> article > .entry-content > .beegin-section:first-child) { padding-top: 0; }
.ct-container-full:has(> article > .entry-content > .beegin-section:last-child) { padding-bottom: 0; }

/* Accueil : pas de fil d'Ariane (rangée basse du header). */
.home #header [data-row="bottom"] { display: none; }

/* Cartes et blocs seuls dans leur colonne : même hauteur sur la ligne. */
.wp-block-column > :only-child { height: 100%; }

/* En-tête de section : titre à gauche, introduction à droite. */
.entete-section { align-items: flex-end; }

/* Hero */
.beegin-hero { padding-block: clamp(64px, 7vw, 96px); }
.hero-colonnes { align-items: center; }
.beegin-hero .logo-hero { margin: 0; }
.beegin-hero .baseline { font-size: clamp(22px, 1rem + .9vw, 30px); line-height: 1.2; margin-top: 8px; }
.beegin-hero h1 { margin-top: 48px; }
.beegin-hero .petit { color: var(--beegin-noir); }

/* Carte statistique (fond noir) */
.carte-stat {
  border: 1px solid var(--beegin-turquoise); border-radius: var(--beegin-rayon-carte);
  padding: 36px;
}
.carte-stat .chiffre { color: var(--beegin-turquoise); }
.carte-stat h4 { margin-top: 16px; }

/* Cartes système : chiffre en noir. */
.is-style-carte .chiffre { color: var(--beegin-noir); }

/* Phrase de conclusion sous un filet. */
.conclusion { border-top: 1px solid var(--beegin-noir); padding-top: 40px; }

/* Gravure « branche » en filigrane (appel à action, section agir ensemble). */
.avec-branche { position: relative; overflow: hidden; }
.avec-branche > * { position: relative; z-index: 1; }
.avec-branche::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 4%; top: 50%; width: 210px; height: 316px; transform: translateY(-50%);
  background: url("/wp-content/uploads/2026/10/beegin-gravure-branche-sarcelle-681x1024.png.webp") center / contain no-repeat;
  opacity: .35;
}
.beegin-section.avec-branche::after { right: 2%; top: 40px; transform: none; width: 375px; height: 564px; opacity: .7; }
.colonne-texte > * { max-width: 760px; }

/* Étapes numérotées (vision, agir ensemble) */
.numero {
  display: inline-block; margin: 0; padding: 4px 16px; border-radius: var(--beegin-rayon-pilule);
  background: rgba(255, 255, 255, .35); color: var(--beegin-noir);
  font-family: var(--beegin-titre); font-size: 15px; line-height: 1.2;
}
.etapes .wp-block-column:nth-child(4) .numero { background: var(--beegin-blanc); }
.has-noir-background-color .numero { background: transparent; border: 1.5px solid var(--beegin-turquoise); color: var(--beegin-turquoise); }
.etapes h3 { margin-top: 16px; }
.filet-haut { border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 32px; }

/* Bloc à contour clair sur fond foncé */
.bloc.contour.inverse { border-color: rgba(255, 255, 255, .85); }

/* Pour qui */
.surtitre-sarcelle { color: var(--beegin-sarcelle); }
.is-style-carte-pale .liste-plus { border-top: 1px solid rgba(29, 29, 27, .25); padding-top: 16px; }
.liste-plus.petit li { margin-bottom: 6px; }

/* Ancrage territorial */
.visuel-ancrage { display: flex; align-items: center; justify-content: center; }

/* Blocs clairs posés dans une section foncée : le texte redevient noir. */
.bloc.couleur.turquoise, .bloc.couleur.pale, .bloc.clair, .is-style-carte, .is-style-carte-pale {
  --theme-headings-color: var(--beegin-noir);
  --theme-text-color: var(--beegin-noir);
  color: var(--beegin-noir);
}

/* Surtitre seul dans une section : aligné sur le contenu ; pastille blanche sur fond turquoise. */
.is-layout-constrained > .is-style-surtitre { display: flex; }
.has-turquoise-background-color .is-style-surtitre::before { background: var(--beegin-blanc); }

/* Citation pilule : neutralise le cadre et les guillemets de Blocksy. */
.wp-block-pullquote.citation-pilule { border: 0; border-top: 1px solid var(--beegin-turquoise); padding: 32px 0 0; margin-top: 48px; }
.wp-block-pullquote.citation-pilule blockquote { margin: 0; padding: 0; }
.wp-block-pullquote.citation-pilule blockquote::before { display: none; }
.wp-block-pullquote.citation-pilule p { margin: 0; }

/* Ligne d'appel à action : bouton sur une seule ligne. */
.beegin-cta-ligne .wp-block-buttons { flex: none; }
.beegin-cta-ligne .wp-block-button__link { white-space: nowrap; }

/* ==========================================================================
   Header (Blocksy Header Builder) — maquette Figma « Header · sticky »
   logo à gauche, menu au centre, bouton « nous rejoindre » à droite.
   ========================================================================== */
#header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
#header [data-row="middle"] {
  --height: 93px;
  background: var(--beegin-blanc);
  border-bottom: 1px solid var(--beegin-turquoise);
}
#header .site-logo-container img { width: 156px; height: auto; max-height: none; }

/* Menu : IBM Plex Mono Medium 15, casse normale, 40 px entre les liens. */
#header [data-device="desktop"] .menu > li > .ct-menu-link,
#header [data-device="desktop"] .menu > li > a {
  font-family: var(--beegin-texte, "IBM Plex Mono", monospace);
  font-size: 15px; font-weight: 500; line-height: 1;
  text-transform: none; letter-spacing: 0;
  color: var(--beegin-noir);
  padding-inline: 20px; height: auto;
}
#header [data-device="desktop"] .menu > li:first-child > a { padding-left: 0; }
#header [data-device="desktop"] .menu > li:last-child > a { padding-right: 0; }
#header .menu > li > a:hover,
#header .menu > li.current-menu-item > a { color: var(--beegin-sarcelle); }
#header .menu .ct-toggle-dropdown-desktop,
#header .menu .ct-toggle-dropdown-desktop svg { color: var(--beegin-sarcelle); fill: currentColor; }

/* Sous-menu */
#header .sub-menu {
  background: var(--beegin-blanc); border: 1px solid var(--beegin-turquoise);
  border-radius: 16px; box-shadow: none; padding: 8px 0;
}
#header .sub-menu a {
  font-family: var(--beegin-texte, "IBM Plex Mono", monospace); font-size: 15px; font-weight: 500;
  text-transform: none; color: var(--beegin-noir);
}
#header .sub-menu a:hover { color: var(--beegin-sarcelle); }

/* Bouton « nous rejoindre » : pilule noire, Loos 15. */
#header .ct-header-cta .ct-button {
  min-height: 0; padding: 17px 28px; border-radius: 999px;
  font-family: var(--beegin-titre); font-size: 15px; font-weight: 500; line-height: 1;
  background: var(--beegin-noir); color: var(--beegin-blanc); white-space: nowrap;
}
#header .ct-header-cta .ct-button:hover { background: var(--beegin-sarcelle); }
#header [data-device="desktop"] [data-column="end"] [data-items] > .ct-header-cta { margin-inline-start: 40px; }

/* Menu mobile (panneau latéral) : fond noir beegin, bouton turquoise. */
#offcanvas .ct-panel-inner { background: var(--beegin-noir); }
#offcanvas .mobile-menu a { font-weight: 500; text-transform: none; }
#offcanvas .ct-header-cta .ct-button { background: var(--beegin-turquoise); color: var(--beegin-noir); }

@media (max-width: 999.98px) {
  #header [data-row="middle"] { --height: 72px; }
  #header .site-logo-container img { width: 120px; }
}

@media (max-width: 781px) {
  .avec-branche::after { display: none; }
  .beegin-hero h1 { margin-top: 32px; }
}