/* ==========================================================================
   beegin — gabarit des pages intérieures
   Bandeau de titre : fil d'Ariane + H1 sur fond turquoise pâle (inc/beegin-bandeau.php).
   ========================================================================== */

.beegin-bandeau-titre {
  background: var(--beegin-pale);
  padding-block: clamp(48px, 5.5vw, 80px) clamp(40px, 4.5vw, 64px);
}
.beegin-bandeau-titre .beegin-fil-ariane {
  margin: 0 0 clamp(16px, 2vw, 28px);
  font-family: var(--beegin-texte); font-size: 14px; line-height: 1.55;
  color: rgba(29, 29, 27, .7);
}
.beegin-bandeau-titre .beegin-fil-ariane a { color: var(--beegin-sarcelle); text-decoration: none; }
.beegin-bandeau-titre .beegin-fil-ariane a:hover { text-decoration: underline; }
.beegin-bandeau-titre .beegin-fil-ariane .breadcrumb_last { color: var(--beegin-noir); }
/* Titres en bas de casse, comme dans la maquette. */
.beegin-bandeau-titre__h1 { margin: 0; text-transform: lowercase; }

/* Le contenu démarre juste sous le bandeau. */
.beegin-bandeau-titre ~ .ct-container-full,
.beegin-bandeau-titre ~ .ct-container { padding-top: clamp(48px, 5vw, 72px); }
.beegin-bandeau-titre ~ .ct-container-full:has(> article > .entry-content > .beegin-section:first-child) { padding-top: 0; }

/* Première section déjà turquoise pâle : elle prolonge le bandeau sans double marge. */
.beegin-bandeau-titre ~ .ct-container-full .entry-content > .beegin-section.has-turquoise-pale-background-color:first-child { padding-top: 0; }

/* Méta des articles dans le bandeau : étiquette de catégorie + date · auteur. */
.beegin-bandeau-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.beegin-bandeau-meta .petit { color: var(--beegin-gris); }
.beegin-bandeau-meta .etiquette.sarcelle {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--beegin-sarcelle); border-radius: var(--beegin-rayon-pilule);
  font-family: var(--beegin-texte); font-size: 14px; line-height: 1.55; color: var(--beegin-sarcelle); text-decoration: none;
}
.beegin-bandeau-meta .etiquette.sarcelle:hover { background: var(--beegin-sarcelle); color: var(--beegin-blanc); }

/* ==========================================================================
   Article (single post) — maquette Figma « Article — Desktop 1440 »
   colonne principale (photo, chapô, liste) + encadré « en bref » à droite.
   ========================================================================== */
/* Largeur du site (1200 px) au lieu de la colonne de lecture de Blocksy (750 px). */
.single-post .entry-content > .article-colonnes,
.single-post .entry-content > .article-navigation {
  --article-largeur: min(var(--theme-normal-container-max-width, 1200px), 88vw);
  width: var(--article-largeur); max-width: none; margin-inline: auto;
}
.article-colonnes { gap: 64px; align-items: flex-start; }
.article-colonnes .en-bref { height: auto; }
.article-principal > * { margin-block: 0; }
.article-principal > * + * { margin-top: 32px; }
.article-photo { margin: 0; }
.article-photo img { width: 100%; border-radius: var(--beegin-rayon-carte); }

.en-bref { padding: 32px; }
.en-bref h4 { margin: 0; }
.en-bref-info { border-top: 1px solid var(--beegin-turquoise); padding-top: 12px; margin-top: 20px; }
.en-bref-info p { margin: 0; }
.en-bref-info .petit { color: var(--beegin-sarcelle); margin-bottom: 4px; }

/* Navigation : sous la colonne principale (66 %), alignée sur ses bords. */
.single-post .entry-content > .article-navigation {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 64px; padding-right: calc((var(--article-largeur) - 64px) * .34 + 64px);
}
@media (max-width: 781px) {
  .article-colonnes { gap: 40px; }
  .single-post .entry-content > .article-navigation { padding-right: 0; }
}

/* ==========================================================================
   Cartes d'articles des listes (catégorie, auteur, étiquette, recherche, actualités)
   Toute la carte est cliquable : le lien du titre s'étend sur la carte.
   Les liens de la méta (catégorie, auteur) restent cliquables au-dessus.
   ========================================================================== */
.entries .entry-card { position: relative; cursor: pointer; }
.entries .entry-card .entry-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.entries .entry-card .entry-meta a { position: relative; z-index: 2; }
.entries .entry-card:hover .entry-title a { color: var(--beegin-sarcelle); }
.entries .entry-card:has(.entry-title a:focus-visible) { outline: 2px solid var(--beegin-sarcelle); outline-offset: 4px; }
.entries .entry-card .entry-title a:focus-visible { outline: none; }

/* Liste d'articles insérée dans une page ([beegin_articles]) : largeur du site. */
.entry-content > .beegin-articles,
.entry-content > p:has(> .beegin-articles) {
  width: min(var(--theme-normal-container-max-width, 1200px), 88vw); max-width: none; margin-inline: auto;
}

/* ==========================================================================
   Page « Repenser les systèmes » (patterns/systemes-*.php)
   ========================================================================== */
.texte-turquoise { color: var(--beegin-turquoise); }
.texte-sarcelle { color: var(--beegin-sarcelle); }
.surtitre-turquoise { color: var(--beegin-turquoise); }
.entete-simple > * { margin-block: 0; }
.entete-simple > * + * { margin-top: 20px; }

/* Méthode : outils (cadres contour clair sur fond noir) */
.outils .bloc { padding: 24px; }
.outils .bloc p { margin: 0; }
.outils .bloc p + p { margin-top: 10px; }

/* Parcours : 6 étapes reliées par un filet */
.parcours { position: relative; gap: 24px; }
.parcours::before {
  content: ""; position: absolute; z-index: 0; top: 24px; left: 24px; right: calc((100% - 120px) / 6 - 24px);
  height: 2px; background: var(--beegin-turquoise);
}
.parcours .numero {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: var(--beegin-noir); color: var(--beegin-blanc); font-size: 17px;
}
.parcours .wp-block-column:nth-child(even) .numero { background: var(--beegin-turquoise); color: var(--beegin-noir); }
.parcours p:not(.numero) { margin-top: 16px; }

/* Preuves par l'exemple : 4 cartes, numéro dans la couleur du système, carte cliquable vers son cas */
.carte-systeme { position: relative; }
.carte-systeme::before { display: none; }
.carte-systeme .numero {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: var(--beegin-accent); color: var(--beegin-noir);
}
.carte-systeme .petit { margin: 8px 0 0; color: var(--beegin-sarcelle); }
.carte-systeme h4 { margin: 0; }
.carte-systeme h4 a { color: var(--beegin-noir); text-decoration: none; }
.carte-systeme h4 a::after { content: ""; position: absolute; inset: 0; }
.carte-systeme:hover h4 a { color: var(--beegin-sarcelle); }

/* Cas : pastille de couleur sous le titre, 3 blocs (actuel / redessiné / chiffres) */
.cas-systeme h2::after {
  content: ""; display: block; width: 64px; height: 10px; margin-top: 24px;
  border-radius: var(--beegin-rayon-pilule); background: var(--beegin-accent);
}
.cas-systeme .bloc > p { margin: 0; }
.cas-systeme .bloc > p + p { margin-top: 12px; }
.cas-systeme .systeme-redessine .petit { color: inherit; opacity: .8; }
.cas-pile > .bloc + .bloc { margin-top: 24px; }
.chiffres-cles .chiffre { color: var(--beegin-turquoise); }
.chiffres-cles .petit { color: rgba(255, 255, 255, .72); }
.chiffres-cles > p.petit + p.chiffre { margin-top: 32px; }
.cas-systeme .wp-block-buttons { margin-top: 8px; }

/* Cas alimentation : schéma du circuit du MIL */
.schema-mil { padding: 24px; }
.schema-mil .flux { align-items: center; gap: 28px; margin-top: 16px; }
.schema-mil .flux > .wp-block-column { position: relative; }
.schema-mil .flux > .wp-block-column:not(:last-child)::after {
  content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  color: var(--beegin-noir); font-size: 18px;
}
.schema-mil .etiquette { display: block; margin: 0 0 8px; text-align: center; font-size: 12px; line-height: 1.3; }
.schema-mil .flux-source { background: var(--wp--preset--color--vert, #7DC18A); border-color: transparent; }
.schema-mil .flux-plateforme { background: var(--wp--preset--color--bleu, #6B7AB9); border-color: transparent; color: var(--beegin-blanc); margin-top: 12px; }
.schema-mil .flux-logistique { background: var(--beegin-noir); border-color: transparent; color: var(--beegin-blanc); }
.schema-mil .flux-debouches .etiquette { background: var(--beegin-turquoise); border-color: transparent; }
.schema-mil .flux-mil { padding: 16px; text-align: center; }
.schema-mil .flux-mil h4 { margin: 0 0 6px; color: var(--beegin-blanc); }
.schema-mil .flux-mil .petit { margin: 0; color: rgba(255, 255, 255, .8); font-size: 12px; }
.schema-mil .flux .petit { text-align: center; }

/* Ce que les quatre cas ont en commun : avant → après */
.avant-apres { align-items: center; gap: 16px; }
.beegin-section > .avant-apres + .avant-apres { margin-block-start: 12px; }
.avant-apres p { margin: 0; }
.avant-apres .etiquette.pleine { display: block; border: 0; text-align: center; font-weight: 500; }
.avant-apres .bloc { padding: 14px 20px; border-radius: 14px; }
.aa-fleche { text-align: center; font-size: 20px; }
.avant-apres-entete .petit { margin: 0; }
/* Ajustements : blocs et étiquettes à leur hauteur naturelle, contrastes sur fonds clair et noir. */
.schema-mil .flux .wp-block-column > :only-child,
.avant-apres .wp-block-column > :only-child { height: auto; }
.has-fond-clair-background-color .bloc.clair { background: var(--beegin-blanc); }
.has-noir-background-color .petit.surtitre-turquoise { color: var(--beegin-turquoise); }
.has-noir-background-color .etapes .wp-block-column:nth-child(4) .numero { background: var(--beegin-turquoise); color: var(--beegin-noir); }
.bouton.lien:not(.retour) .wp-block-button__link::after { margin-left: .6ch; }

/* ==========================================================================
   Page « Qui sommes-nous ? » (patterns/qui-*.php)
   ========================================================================== */
.qsn-ecosysteme { align-items: center; gap: 64px; }
.qsn-visuel { display: flex; justify-content: center; }
.qsn-visuel .qsn-blason { max-width: 280px; height: auto; margin: 0; }
.qsn-visuel .qsn-blason img { width: 100%; height: auto; }
.qsn-phrase { padding: 28px 36px; margin-top: 48px; }
.qsn-phrase p { margin: 0; }

.qsn-question { margin-top: 48px; }
.qsn-leviers { gap: 20px; }
.qsn-levier { padding: 28px; }
.qsn-levier h3 { margin: 0 0 16px; }
.qsn-levier p { margin: 0; }

/* Cartes blanches posées sur fond turquoise ou sarcelle : texte noir. */
.qsn-service, .qsn-fondateur {
  --theme-headings-color: var(--beegin-noir); --theme-text-color: var(--beegin-noir); color: var(--beegin-noir);
}
.qsn-services { gap: 20px; }
.qsn-services + .qsn-services { margin-top: 20px; }
.qsn-service { padding: 28px; }
.qsn-service > p { margin: 20px 0 0; }
.qsn-service-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qsn-service-tete p { margin: 0; }
p.etiquette.qsn-pastille { border: 0; padding: 5px 16px; font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--beegin-blanc); }
p.etiquette.qsn-pastille--noir { background: var(--beegin-noir); }
p.etiquette.qsn-pastille--sarcelle { background: var(--beegin-sarcelle); }

.qsn-fondateurs { gap: 24px; }
.qsn-fondateur { padding: 36px; }
.qsn-fondateur h3 { margin: 0 0 12px; }
.qsn-fondateur .petit { margin: 0; color: var(--beegin-gris); }
.qsn-citation { margin: 40px 0 0; }
.qsn-citation::before {
  content: ""; display: block; width: 56px; height: 8px; margin-bottom: 24px;
  border-radius: var(--beegin-rayon-pilule); background: var(--beegin-sarcelle);
}

/* ==========================================================================
   Page « Agir ensemble » (patterns/agir-*.php)
   ========================================================================== */
.agir-beehive { align-items: center; gap: 48px; }
.agir-texte p + p { margin-top: 24px; }
.agir-pilules { margin: 0; }
.agir-pilules li {
  display: block; margin: 0 0 14px; padding: 14px 22px;
  border: 1.5px solid var(--beegin-turquoise); border-radius: var(--beegin-rayon-pilule);
  font-size: 13px; line-height: 1.4;
}
.agir-pilules li::before { display: none; }
.agir-visuel { display: flex; justify-content: center; }
.agir-gravure { max-width: 300px; margin: 0; }
.agir-phrase { margin-top: 48px; max-width: 760px; }

.agir-cartes { gap: 20px; }
.agir-carte { padding: 28px; }
.agir-carte h3 { margin: 0 0 32px; }
.agir-carte p { margin: 0; }

.agir-reseau { gap: 20px; }
.agir-osh { padding: 36px; }
.agir-osh p { margin: 0; }
.agir-osh p + p { margin-top: 24px; }
p.etiquette.agir-badge { background: var(--beegin-blanc); border: 0; color: var(--beegin-noir); font-weight: 600; font-size: 13px; padding: 6px 28px; }
.agir-partenaires > .agir-partenaire + .agir-partenaire { margin-top: 12px; }
.agir-partenaire { padding: 16px 22px; }
.agir-partenaire p { margin: 0; }
.agir-partenaire .petit { margin-top: 6px; color: rgba(29, 29, 27, .7); }

.agir-sources-colonnes { gap: 48px; }
.agir-sources { margin: 0; }
.agir-sources li { display: block; margin-bottom: 14px; padding-left: 2ch; text-indent: -2ch; }
.agir-sources li::before { display: inline-block; width: 2ch; text-indent: 0; }
.agir-sources a { color: var(--beegin-sarcelle); }

@media (max-width: 781px) {
  .agir-beehive { gap: 24px; }
  .agir-gravure { max-width: 200px; }
  .qsn-ecosysteme { gap: 32px; }
  .qsn-visuel .qsn-blason { max-width: 200px; }
  .avant-apres-entete, .aa-fleche { display: none; }
  .parcours::before, .schema-mil .flux > .wp-block-column::after { display: none; }
  .beegin-section > .avant-apres + .avant-apres { margin-block-start: 32px; }
}