/*
 * Styles de la refonte CNEP — thème enfant Divi.
 * Couche v2 « Editorial Atelier » (maquettes Stitch série 2, 13/07/2026 —
 * spec-integration §0 et §8). Principes : hiérarchie par COUCHES TONALES de
 * surfaces (règle « no-line » : plus de bordures 1px opaques), ombres
 * ambiantes teintées encre (32–64px, 4–6 %), dégradé signature 135° par
 * entité, hovers en tonal shift, rayons resserrés (4px boutons / 12px cartes).
 *
 * Mobile-first : les styles de base ciblent le mobile, les media queries
 * élargissent (breakpoints Divi : 768px / 981px / 1350px).
 * Pas de couleur en dur quand un token existe.
 *
 * Sommaire :
 *   0. Polices auto-hébergées (@font-face)
 *   1. Tokens — miroir cnep-core + tiers de surface v2 (+ alias --cnep-ui-*)
 *   2. Base typographique globale (surcharge Divi)
 *   3. Échelle typographique (classes .cnep-*) + gestes éditoriaux v2
 *   4. Sections (tiers tonals + rythme vertical 64/96–128px)
 *   5. Boutons
 *   6. Badges, statuts, chips
 *   7. Cartes
 *   8. Divers transverses (liens fléchés, pastilles, pagination, champs, FAB)
 *   9. Header sticky, top bar, footer (Theme Builder)
 *  10. Page d'accueil CNEP (hero, missions, bento, focus UPB, actus, partenaires, newsletter)
 *  11. Composants v2 « Editorial Atelier » (spec §4.10)
 *  12. Émojis SVG (Twemoji — assets/emoji/)
 *  13. Accessibilité & préférences utilisateur
 *  14. Pages — compléments spécifiques (passes successives, en fin de fichier :
 *      pages CNEP, puis Technique C — espace adhérent + pages légales)
 */

/* ==========================================================================
   0. Polices auto-hébergées (RGPD — aucun appel Google Fonts distant)
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variable.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Noto Serif";
	src: url("../fonts/noto-serif-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Noto Serif";
	src: url("../fonts/noto-serif-italic-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   1. Tokens
   --------------------------------------------------------------------------
   1a. MIROIR de cnep-core/assets/tokens.css : le plugin cnep-core est inactif
       en local, ses variables ne sont donc pas chargées. On recopie ici les
       valeurs canoniques en FALLBACK. À la réactivation du socle, ces valeurs
       identiques seront simplement redéclarées (aucun conflit).
   1b. Couche UI « Modern Institutional » (préfixe --cnep-ui-*), propre au
       thème enfant : surfaces papier, bordures, ombres douces, rayons.

   NOTE spécificité : le plugin actif upb-espace-adherent déclare encore
   d'anciennes valeurs (--cnep-primary: #761319) dans un :root chargé APRÈS
   ce fichier. On double le sélecteur (:root:root, spécificité 0,2,0) pour
   que les valeurs canoniques de la charte l'emportent sans !important.
   ========================================================================== */

:root:root {
	/* --- 1a. Miroir de cnep-core/tokens.css (fallback local) ------------- */

	/* Palettes par entité.
	   CNEP : palette OFFICIELLE du Notion client (table « Palette de couleur »,
	   13/07/2026) — remplace le #540009/#C55A2B du socle cnep-core (jamais
	   déployé). Le plugin upb-espace-adherent en prod utilise déjà #761319. */
	--cnep-primary: #761319;
	--cnep-secondary: #A02A1D;
	--cnep-accent: #C55A2B;
	--cnep-light: #E1A15A;
	--cnep-on-primary: #ffffff;

	--upb-primary: #D90D58;
	--upb-secondary: #F24822;
	--upb-accent: #F27D16;
	--upb-light: #F28F13;
	--upb-on-primary: #ffffff;

	--umm-primary: #8E2C1C;
	--umm-secondary: #C14E24;
	--umm-accent: #E07B2C;
	--umm-light: #F0B15F;
	--umm-on-primary: #ffffff;

	--ume-primary: #A61F3D;
	--ume-secondary: #D94A3A;
	--ume-accent: #F07A3A;
	--ume-light: #F3B36B;
	--ume-on-primary: #ffffff;

	/* Statuts métier (contrastes AA vérifiés) */
	--cnep-status-valid-bg: #E6F4EA;
	--cnep-status-valid-text: #1E7E34;
	--cnep-status-progress-bg: #FCF3DC;
	--cnep-status-progress-text: #9A6B00;
	--cnep-status-expired-bg: #FDECEA;
	--cnep-status-expired-text: #C0392B;

	/* Badges */
	--cnep-badge-bg: #1F2937;
	--cnep-badge-text: #FFFFFF;

	/* Ombres historiques du socle — redéfinies v2 : teinte encre (#1D1B20),
	   jamais de noir pur (DA v2 §0.2) */
	--cnep-shadow-sm: 0 1px 2px rgba(29, 27, 32, 0.05);
	--cnep-shadow: 0 2px 8px rgba(29, 27, 32, 0.05);
	--cnep-shadow-lg: 0 24px 48px rgba(29, 27, 32, 0.06);

	/* --- 1b. Tiers de surface v2 « Editorial Atelier » (spec §2.1) -------- */

	/* La hiérarchie visuelle se construit par EMPILEMENT de neutres chauds
	   dérivés du papier #F8F5F3 (« papiers empilés ») — plus de cartes
	   blanches bordées. Une carte --cnep-surface posée sur une section
	   --cnep-surface-low crée le lift naturel. */
	--cnep-bg: #F8F5F3;            /* base de page — papier chaud, jamais de blanc froid */
	--cnep-surface: #FFFFFF;       /* tier le plus clair (cartes) */
	--cnep-surface-low: #F3EEEB;   /* cartes/sections en creux */
	--cnep-surface-mid: #EDE7E3;   /* sections alternées, footer */
	--cnep-surface-high: #E7E0DB;  /* hover de carte, imbrications */
	--cnep-surface-dim: #E2DAD4;   /* fonds appuyés (ressources) */
	/* Alias rétro-compatibles série 1 */
	--cnep-bg-alt: var(--cnep-surface-low);
	--cnep-bg-footer: var(--cnep-surface-mid);

	/* Bordure : consommer UNIQUEMENT en ghost border 15–20 % (règle no-line
	   §0.1) — jamais 1px opaque hors focus des champs */
	--cnep-border: #E8E0DD;
	--cnep-border-ghost: color-mix(in srgb, var(--cnep-border) 20%, transparent);

	--cnep-ink: #1D1B20;           /* texte principal */
	--cnep-ink-soft: #4C4744;      /* texte secondaire (AA sur #F8F5F3) */

	/* Ombres AMBIANTES v2 : blur 32–64px, opacité 4–6 %, teinte encre */
	--cnep-shadow-soft: 0px 24px 48px rgba(29, 27, 32, 0.05);
	--cnep-shadow-soft-lg: 0px 32px 64px rgba(29, 27, 32, 0.06);

	/* Rayons v2 resserrés (« institutional elegance », §0.7) */
	--cnep-radius-sm: 4px;         /* boutons, badges, tags */
	--cnep-radius: 8px;            /* champs */
	--cnep-radius-lg: 12px;        /* cartes standard */
	--cnep-radius-xl: 16px;        /* grandes cartes / images héros */
	--cnep-radius-2xl: 24px;       /* grands panneaux */
	--cnep-radius-pill: 9999px;    /* chips fonctionnels + pastilles d'icônes SEULEMENT */

	/* --- 1c. Alias --cnep-ui-* (rétro-compatibilité des règles série 1) --- */
	--cnep-ui-bg: var(--cnep-bg);
	--cnep-ui-bg-alt: var(--cnep-bg-alt);
	--cnep-ui-bg-footer: var(--cnep-bg-footer);
	--cnep-ui-surface: var(--cnep-surface);
	--cnep-ui-border: var(--cnep-border);
	--cnep-ui-ink: var(--cnep-ink);
	--cnep-ui-ink-soft: var(--cnep-ink-soft);
	--cnep-ui-shadow-soft: var(--cnep-shadow-soft);
	--cnep-ui-shadow-soft-lg: var(--cnep-shadow-soft-lg);
	--cnep-ui-radius-sm: var(--cnep-radius-sm);
	--cnep-ui-radius: var(--cnep-radius);
	--cnep-ui-radius-lg: var(--cnep-radius-lg);
	--cnep-ui-radius-xl: var(--cnep-radius-xl);
	--cnep-ui-radius-2xl: var(--cnep-radius-2xl);
	--cnep-ui-radius-pill: var(--cnep-radius-pill);

	/* Échelle z-index (pas de 9999) */
	--z-sticky: 100;
	--z-fab: 150;
	--z-modal: 200;
}

/* Entité courante : remap --entity-* (miroir cnep-core, fallback CNEP).
   :root:root — même parade de spécificité que ci-dessus.
   v2 (§0.4) : chaque entité gagne son tint de surface et son DÉGRADÉ
   SIGNATURE 135° (primary → secondary) pour les CTA primaires et les fonds
   de hero/section brand.
   NB contraste AA : le blanc sur la fin claire du dégradé doit rester ≥ 4.5:1.
   Vérifié : CNEP (#A02A1D → 7.3:1) et UMM (#C14E24 → 4.8:1) passent avec le
   secondary plein ; UPB (#F24822 → 3.7:1) et UME (#D94A3A → 4.3:1) échouent,
   leur dégradé est donc PLAFONNÉ à color-mix(secondary 35 %, primary)
   (≈ 4.6:1) comme le prévoit la spec §8. */
:root:root,
.entity-cnep {
	--entity-primary: var(--cnep-primary);
	--entity-secondary: var(--cnep-secondary);
	--entity-accent: var(--cnep-accent);
	--entity-light: var(--cnep-light);
	--entity-on-primary: var(--cnep-on-primary);
	--entity-primary-tint: color-mix(in srgb, var(--cnep-primary) 8%, #fff);
	--entity-surface-tint: color-mix(in srgb, var(--cnep-primary) 4%, #F8F5F3);
	--entity-gradient: linear-gradient(135deg, var(--cnep-primary), var(--cnep-secondary));
}
.entity-upb {
	--entity-primary: var(--upb-primary);
	--entity-secondary: var(--upb-secondary);
	--entity-accent: var(--upb-accent);
	--entity-light: var(--upb-light);
	--entity-on-primary: var(--upb-on-primary);
	--entity-primary-tint: color-mix(in srgb, var(--upb-primary) 8%, #fff);
	--entity-surface-tint: color-mix(in srgb, var(--upb-primary) 4%, #F8F5F3);
	/* Dégradé plafonné : blanc AA sur toute la course (cf. note ci-dessus) */
	--entity-gradient: linear-gradient(135deg, var(--upb-primary), color-mix(in srgb, var(--upb-secondary) 35%, var(--upb-primary)));
}
.entity-umm {
	--entity-primary: var(--umm-primary);
	--entity-secondary: var(--umm-secondary);
	--entity-accent: var(--umm-accent);
	--entity-light: var(--umm-light);
	--entity-on-primary: var(--umm-on-primary);
	--entity-primary-tint: color-mix(in srgb, var(--umm-primary) 8%, #fff);
	--entity-surface-tint: color-mix(in srgb, var(--umm-primary) 4%, #F8F5F3);
	--entity-gradient: linear-gradient(135deg, var(--umm-primary), var(--umm-secondary));
}
.entity-ume {
	--entity-primary: var(--ume-primary);
	--entity-secondary: var(--ume-secondary);
	--entity-accent: var(--ume-accent);
	--entity-light: var(--ume-light);
	--entity-on-primary: var(--ume-on-primary);
	--entity-primary-tint: color-mix(in srgb, var(--ume-primary) 8%, #fff);
	--entity-surface-tint: color-mix(in srgb, var(--ume-primary) 4%, #F8F5F3);
	/* Dégradé plafonné : blanc AA sur toute la course (cf. note ci-dessus) */
	--entity-gradient: linear-gradient(135deg, var(--ume-primary), color-mix(in srgb, var(--ume-secondary) 35%, var(--ume-primary)));
}

/* ==========================================================================
   2. Base typographique globale — surcharge de Divi
   --------------------------------------------------------------------------
   Divi pose ses familles via le Customizer (CSS inline attaché au style
   parent). Ce fichier est chargé APRÈS : on gagne à spécificité égale, et on
   double avec le conteneur #page-container pour battre les règles Divi plus
   spécifiques — sans !important.
   ========================================================================== */

/* Corps & UI : Manrope */
html body,
#page-container,
#page-container input,
#page-container select,
#page-container textarea,
#page-container button,
#page-container .et_pb_button {
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html body {
	background-color: var(--cnep-ui-bg);
	color: var(--cnep-ui-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* Titres : Noto Serif (h1–h6 + classes display/headline) */
h1, h2, h3, h4, h5, h6,
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
.cnep-display,
.cnep-headline-md,
.cnep-headline-sm {
	font-family: "Noto Serif", Georgia, "Times New Roman", serif;
	color: var(--cnep-ui-ink);
}

/* Équilibrage des titres + largeur de lecture confortable */
h1, h2, h3 {
	text-wrap: balance;
}
#page-container p {
	max-width: 70ch;
}

/* ==========================================================================
   3. Échelle typographique (spec-integration §3) — mobile-first
   ========================================================================== */

/* Display — H1 hero uniquement (une seule par page) */
#page-container .cnep-display {
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: -0.01em; /* jamais plus serré sur une serif */
	padding-bottom: 0;
}
/* Accent signature : mot en italique couleur d'entité dans le H1 */
.cnep-display em {
	font-style: italic;
	color: var(--entity-primary);
}

/* Headline M — titres de section (h2) */
#page-container .cnep-headline-md {
	font-size: 26px;
	line-height: 34px;
	font-weight: 600;
	padding-bottom: 0;
}

/* Headline S — titres de cartes larges (h3) */
#page-container .cnep-headline-sm {
	font-size: 21px;
	line-height: 28px;
	font-weight: 600;
	padding-bottom: 0;
}

/* Title — titres de cartes CQP/actus (h4). Exception voulue par la spec :
   .cnep-title reste en Manrope (la classe prime sur la règle h1-h6). */
#page-container .cnep-title {
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
}

/* Body L — chapô, intro hero */
#page-container .cnep-body-lg {
	font-size: 17px;
	line-height: 27px;
	color: var(--cnep-ui-ink-soft);
}

/* Label M — boutons, nav, catégories */
.cnep-label {
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Label S — badges, métadonnées, dates */
.cnep-label-sm {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.03em;
}

/* Pastille « kicker » du hero (pill teintée entité) */
.cnep-pill {
	display: inline-block;
	padding: 4px 16px;
	margin-bottom: 24px;
	border-radius: var(--cnep-ui-radius-pill);
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 981px) {
	#page-container .cnep-display {
		font-size: 48px;
		line-height: 56px;
	}
	#page-container .cnep-headline-md {
		font-size: 32px;
		line-height: 40px;
	}
	#page-container .cnep-headline-sm {
		font-size: 24px;
		line-height: 32px;
	}
	#page-container .cnep-title {
		font-size: 20px;
		line-height: 28px;
	}
	#page-container .cnep-body-lg {
		font-size: 18px;
		line-height: 28px;
	}
}

/* --- 3.1 Gestes typographiques éditoriaux v2 (spec §3, §0.8) -------------- */

/* Variante light du display — pages éditoriales (UPB, ressources, collège) :
   graisse allégée, la ligne d'accent <em> italique porte la couleur */
#page-container .cnep-display--light {
	font-weight: 350;
}

/* Eyebrow — surtitre systématique en tête de section : uppercase Manrope,
   tracking très large 0.2em, couleur d'entité */
.cnep-eyebrow {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--entity-primary);
	margin-bottom: 16px;
}

/* Numéros de piliers/étapes « 01 / 02 / 03 » — Noto Serif italique géant,
   couleur d'entité à ~20 % d'opacité (filigrane éditorial) */
.cnep-num {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
	color: color-mix(in srgb, var(--entity-primary) 20%, transparent);
}
@media (min-width: 981px) {
	.cnep-num {
		font-size: 40px;
	}
}

/* Lettrine d'article (page article uniquement) */
.cnep-dropcap > p:first-of-type::first-letter,
p.cnep-dropcap::first-letter {
	font-family: "Noto Serif", Georgia, serif;
	font-size: 5rem;
	line-height: 0.8;
	float: left;
	padding: 8px 12px 0 0;
	color: var(--entity-primary);
}

/* Exergue / citation — Noto Serif italique couleur d'entité */
.cnep-quote {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-size: 24px;
	line-height: 1.4;
	color: var(--entity-primary);
	margin: 0;
}
.cnep-quote cite {
	display: block;
	margin-top: 16px;
	font-family: "Manrope", sans-serif;
	font-style: normal;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink);
}
@media (min-width: 981px) {
	.cnep-quote {
		font-size: 30px;
	}
}

/* ==========================================================================
   4. Sections — tiers tonals + rythme vertical v2 (64px mobile / 112px desktop)
   --------------------------------------------------------------------------
   L'ALTERNANCE DE TIERS remplace tout séparateur (règle no-line §0.1) :
   plus de border-top/bottom entre sections.
   ========================================================================== */

#page-container .cnep-section {
	background-color: var(--cnep-ui-bg);
	padding-top: 64px;
	padding-bottom: 64px;
}
/* --alt : alias série 1 de --low (rétro-compatibilité accueil) — la rupture
   tonale suffit, les bordures 1px de la série 1 sont supprimées */
#page-container .cnep-section--alt,
#page-container .cnep-section--low {
	background-color: var(--cnep-surface-low);
}
#page-container .cnep-section--mid {
	background-color: var(--cnep-surface-mid);
}
#page-container .cnep-section--dim {
	background-color: var(--cnep-surface-dim);
}
/* --brand : fond DÉGRADÉ SIGNATURE d'entité (v2 §0.4 — remplace le fond
   uni --entity-primary de la série 1), texte blanc */
#page-container .cnep-section--brand {
	background: var(--entity-gradient);
}
/* #page-container en préfixe : la base typographique (#page-container h2…)
   gagnerait sinon en spécificité et laisserait l'encre sombre sur fond brand. */
#page-container .cnep-section--brand h2,
#page-container .cnep-section--brand h3,
#page-container .cnep-section--brand h4,
#page-container .cnep-section--brand p,
#page-container .cnep-section--brand .cnep-label {
	color: var(--entity-on-primary);
}
#page-container .cnep-section--brand p {
	color: rgba(255, 255, 255, 0.85);
}
/* CORRECTIF : les CARTES blanches posées sur une section brand ne doivent PAS
   hériter du texte blanc (sinon titre/description invisibles). Texte sombre
   rétabli à l'intérieur des cartes. */
#page-container .cnep-section--brand .cnep-card h2,
#page-container .cnep-section--brand .cnep-card h3,
#page-container .cnep-section--brand .cnep-card h4,
#page-container .cnep-section--brand .cnep-card .et_pb_module_header {
	color: var(--entity-primary);
}
#page-container .cnep-section--brand .cnep-card p,
#page-container .cnep-section--brand .cnep-card .et_pb_blurb_description,
#page-container .cnep-section--brand .cnep-card .et_pb_blurb_description p {
	color: var(--cnep-ink-soft);
}

/* Grands espaces v2 (§0.3) : 96–128px desktop — 112px retenu */
@media (min-width: 981px) {
	#page-container .cnep-section {
		padding-top: 112px;
		padding-bottom: 112px;
	}
}

/* ==========================================================================
   5. Boutons — .cnep-btn (posé sur le module et_pb_button, onglet Avancé)
   --------------------------------------------------------------------------
   On neutralise l'anatomie Divi (bordure 2px, flèche :after, padding mouvant)
   au profit de la spec §4.1. Spécificité : body #page-container … pour battre
   les règles bouton de Divi sans !important.
   ========================================================================== */

/* Les wrappers de boutons Divi se posent côte à côte */
.et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 16px;
}
.et_pb_button_module_wrapper:last-child {
	margin-right: 0;
}

body #page-container .cnep-btn.et_pb_button {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--cnep-radius-sm); /* v2 §0.7 : 4px, jamais de pilule */
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: filter 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
/* Suppression de la flèche Divi et du décalage de padding au survol */
body #page-container .cnep-btn.et_pb_button:after {
	display: none;
}
body #page-container .cnep-btn.et_pb_button:hover {
	padding: 12px 24px;
	border: 0;
}

/* Variante primaire v2 : DÉGRADÉ SIGNATURE d'entité (§4.1), ombre ambiante ;
   hover en simple élévation de luminosité (plus de translateY ni grosse ombre) */
body #page-container .cnep-btn--primary.et_pb_button {
	background: var(--entity-gradient);
	color: var(--entity-on-primary);
	box-shadow: var(--cnep-shadow-soft);
}
body #page-container .cnep-btn--primary.et_pb_button:hover {
	background: var(--entity-gradient);
	filter: brightness(1.08);
}

/* Variante fantôme v2 : ghost border 30 % (au lieu du filet plein 2px),
   opacité 100 % + fond tint au survol */
body #page-container .cnep-btn--ghost.et_pb_button {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--entity-primary) 30%, transparent);
	color: var(--entity-primary);
}
body #page-container .cnep-btn--ghost.et_pb_button:hover {
	background-color: var(--entity-primary-tint);
	box-shadow: inset 0 0 0 1px var(--entity-primary);
}

/* Variante inverse : CTA sur section sombre/dégradée — hover en tonal shift */
body #page-container .cnep-btn--inverse.et_pb_button {
	background-color: var(--cnep-surface);
	color: var(--entity-primary);
	box-shadow: var(--cnep-shadow-soft);
}
body #page-container .cnep-btn--inverse.et_pb_button:hover {
	background-color: var(--cnep-surface-low);
}

/* Variante texte (nouvelle, série 2) — action tertiaire « Tout consulter » :
   texte seul souligné d'un filet 30 % qui passe à 100 % au survol */
body #page-container .cnep-btn--text.et_pb_button,
a.cnep-btn--text {
	display: inline-block;
	padding: 4px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--entity-primary);
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--entity-primary) 30%, transparent);
	transition: box-shadow 200ms ease;
}
body #page-container .cnep-btn--text.et_pb_button:hover,
a.cnep-btn--text:hover {
	padding: 4px 0;
	background: transparent;
	box-shadow: inset 0 -1px 0 var(--entity-primary);
}

/* Variante UPB explicite (bouton framboise sur la bande « Focus UPB ») */
body #page-container .cnep-btn--upb.et_pb_button {
	background-color: var(--upb-primary);
	color: var(--upb-on-primary);
	box-shadow: var(--cnep-shadow-soft);
}
body #page-container .cnep-btn--upb.et_pb_button:hover {
	background-color: var(--upb-primary);
	filter: brightness(1.08);
}

/* Variante large (CTA hero) */
body #page-container .cnep-btn--lg.et_pb_button,
body #page-container .cnep-btn--lg.et_pb_button:hover {
	padding: 16px 32px;
}

/* ==========================================================================
   6. Badges, statuts, chips
   ========================================================================== */

/* Badge sombre catégorie (« COLLÈGE… », « RÉSERVÉ ») — complète cnep-core */
.cnep-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--cnep-ui-radius-sm);
	background: var(--cnep-badge-bg);
	color: var(--cnep-badge-text);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Badges de statut métier */
.cnep-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--cnep-ui-radius-sm);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.cnep-status--valid {
	background: var(--cnep-status-valid-bg);
	color: var(--cnep-status-valid-text);
}
.cnep-status--progress {
	background: var(--cnep-status-progress-bg);
	color: var(--cnep-status-progress-text);
}
.cnep-status--expired {
	background: var(--cnep-status-expired-bg);
	color: var(--cnep-status-expired-text);
}
/* Pastille optionnelle (ronde, couleur du texte courant) */
.cnep-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* Chip / tag fonctionnel (filtres, tags UMM·UME) — v2 : la PILULE est
   réservée aux chips (§0.7) ; bordure en ghost border (règle no-line) */
.cnep-chip {
	display: inline-block;
	padding: 4px 14px;
	border-radius: var(--cnep-radius-pill);
	background: var(--cnep-surface-low);
	border: 1px solid var(--cnep-border-ghost);
	color: var(--cnep-ui-ink-soft);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	transition: background-color 200ms ease;
}
.cnep-chip:hover {
	background: var(--cnep-surface-high); /* tonal shift */
}
.cnep-chip--active {
	background: var(--cnep-badge-bg);
	border-color: var(--cnep-badge-bg);
	color: var(--cnep-badge-text);
}

/* ==========================================================================
   7. Cartes
   ========================================================================== */

/* Carte générique (blurbs missions, cartes bento…) — v2 « no-line » :
   SANS bordure, le lift vient de la couche tonale (carte --cnep-surface sur
   section --cnep-surface-low) + ombre ambiante ; hover en tonal shift léger
   (translateY limité à −2px, §0.6) */
#page-container .cnep-card {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	transition: transform 300ms ease, background-color 300ms ease;
}
#page-container .cnep-card:hover {
	transform: translateY(-2px);
}

/* Carte verticale CQP (posée sur la colonne hôte) — sans bordure (v2) */
#page-container .cnep-card-cqp {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	overflow: hidden;
	transition: transform 300ms ease;
}
#page-container .cnep-card-cqp:hover {
	transform: translateY(-2px);
}
#page-container .cnep-card-cqp h4 {
	color: var(--entity-primary);
}
/* Pied de carte : la RUPTURE TONALE remplace le border-top (§4.3) ;
   tonal shift au survol de la carte */
#page-container .cnep-card-cqp__footer {
	background: var(--cnep-surface-low);
	padding: 12px 24px;
	text-align: right;
	transition: background-color 300ms ease;
}
#page-container .cnep-card-cqp:hover .cnep-card-cqp__footer {
	background: var(--cnep-surface-high);
}
/* Zoom lent de l'image au survol (700ms, conteneur masqué) */
#page-container .cnep-card-cqp img {
	transition: transform 700ms ease;
}
#page-container .cnep-card-cqp:hover img {
	transform: scale(1.05);
}

/* Carte horizontale « travaux » (posée sur la ligne hôte) — sans bordure */
#page-container .cnep-card-work {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	overflow: hidden;
	transition: transform 300ms ease, background-color 300ms ease;
}
#page-container .cnep-card-work:hover {
	transform: translateY(-2px);
}
#page-container .cnep-card-work h3 {
	color: var(--entity-primary);
}

/* Image placeholder (visuel manquant en médiathèque) : dégradé neutre + ratio,
   sans bordure (les deux tiers du dégradé suffisent à dessiner la zone) */
.cnep-placeholder-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--cnep-radius-lg);
	background: linear-gradient(135deg, var(--cnep-surface-low), var(--cnep-surface-dim));
}

/* --- 7.9 Égalisation des rangées de cartes (Technique D, 13/07/2026) --------
   Exigence client : toutes les cartes d'une même rangée à la même hauteur.
   DOM Divi : et_pb_row > et_pb_column > et_pb_module. La carte est portée
   soit par la COLONNE (.cnep-card, -pillar, -offer, -cqp posées sur la
   colonne hôte), soit par le MODULE blurb (tuiles émoji .cnep-card,
   .cnep-card-resource, .cnep-card-person). Stratégie :
   1) la RANGÉE hôte passe en flex (align-items:stretch) → colonnes égales ;
   2) la COLONNE passe en flex-column → le module-carte peut s'étirer ;
   3) le pied de carte (bouton, lien fléché, pied CQP) est calé en bas
      via margin-top:auto.
   Les largeurs/marges % de Divi (gutters3) sont conservées telles quelles
   par le contexte flex + flex-wrap ; en mobile (≤767) les colonnes à 100 %
   s'empilent comme avant. Dégradation douce : sans :has(), la mise en page
   float actuelle de Divi est simplement conservée (cartes inégales). */

/* 1) Rangée hôte → flex stretch */
#page-container .et_pb_row:has(> .et_pb_column.cnep-card),
#page-container .et_pb_row:has(> .et_pb_column.cnep-card-pillar),
#page-container .et_pb_row:has(> .et_pb_column.cnep-card-offer),
#page-container .et_pb_row:has(> .et_pb_column.cnep-card-cqp),
#page-container .et_pb_row:has(> .et_pb_column > .et_pb_module.cnep-card),
#page-container .et_pb_row:has(> .et_pb_column > .et_pb_module.cnep-card-resource),
#page-container .et_pb_row:has(> .et_pb_column > .et_pb_module.cnep-card-person) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* 2) Colonne-carte (ou colonne hébergeant un module-carte) → flex column */
#page-container .et_pb_column.cnep-card,
#page-container .et_pb_column.cnep-card-pillar,
#page-container .et_pb_column.cnep-card-offer,
#page-container .et_pb_column.cnep-card-cqp,
#page-container .et_pb_column:has(> .et_pb_module.cnep-card),
#page-container .et_pb_column:has(> .et_pb_module.cnep-card-resource),
#page-container .et_pb_column:has(> .et_pb_module.cnep-card-person) {
	display: flex;
	flex-direction: column;
}

/* Le module-carte (blurb) remplit la hauteur de sa colonne étirée */
#page-container .et_pb_column > .et_pb_module.cnep-card,
#page-container .et_pb_column > .et_pb_module.cnep-card-resource,
#page-container .et_pb_column > .et_pb_module.cnep-card-person {
	flex: 1 1 auto;
}

/* Dans une colonne-carte, le module texte principal s'étire pour que le
   pied éventuel (lien fléché) puisse être calé en bas */
#page-container .et_pb_column.cnep-card > .et_pb_text,
#page-container .et_pb_column.cnep-card-pillar > .et_pb_text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#page-container .et_pb_column.cnep-card > .et_pb_text > .et_pb_text_inner,
#page-container .et_pb_column.cnep-card-pillar > .et_pb_text > .et_pb_text_inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 3) Pieds de carte calés en bas (uniquement les éléments « pied » :
   bouton, lien fléché, pied tonal CQP — jamais le texte courant) */
#page-container .et_pb_column.cnep-card > .et_pb_button_module_wrapper:last-child,
#page-container .et_pb_column.cnep-card-offer > .et_pb_button_module_wrapper:last-child,
#page-container .et_pb_column.cnep-card-cqp > .cnep-card-cqp__footer:last-child,
#page-container .et_pb_column.cnep-card .et_pb_text_inner > p:has(.cnep-link-arrow):last-child,
#page-container .et_pb_column.cnep-card .et_pb_text_inner > .cnep-link-arrow:last-child,
#page-container .et_pb_column.cnep-card-pillar .et_pb_text_inner > p:has(.cnep-link-arrow):last-child,
#page-container .et_pb_column.cnep-card-pillar .et_pb_text_inner > .cnep-link-arrow:last-child {
	margin-top: auto;
}

/* ==========================================================================
   8. Divers transverses
   ========================================================================== */

/* Lien fléché « Voir tout » — la flèche translate au survol */
.cnep-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--entity-primary);
	font-weight: 700;
	text-decoration: none;
}
.cnep-link-arrow .cnep-link-arrow__icon {
	display: inline-block;
	transition: transform 200ms ease;
}
.cnep-link-arrow:hover .cnep-link-arrow__icon {
	transform: translateX(4px);
}
#page-container .cnep-link-arrow:hover {
	color: var(--entity-primary);
}

/* Pastille ronde d'icône (blurbs missions) — appliquée au blurb Divi */
.cnep-icon-circle .et-pb-icon {
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-size: 28px;
	transition: transform 200ms ease;
}
.cnep-icon-circle:hover .et-pb-icon {
	transform: scale(1.1);
}

/* Pagination (blog / listes) — v2 : boutons tonals sans bordure, page
   active fond entité */
.cnep-pagination a,
.cnep-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--cnep-radius);
	background: var(--cnep-surface-low);
	color: var(--cnep-ui-ink);
	font-weight: 600;
	transition: background-color 200ms ease, color 200ms ease;
}
.cnep-pagination .current,
.cnep-pagination a:hover {
	background: var(--entity-primary);
	color: var(--entity-on-primary);
}

/* Champs de formulaire (contact, newsletter, connexion) — GHOST BORDER
   15–20 % (exception a11y de la règle no-line §0.1) ; le focus repasse à
   100 % d'opacité couleur d'entité */
.cnep-field input[type="text"],
.cnep-field input[type="email"],
.cnep-field input[type="password"],
.cnep-field input[type="tel"],
.cnep-field select,
.cnep-field textarea {
	background: var(--cnep-surface);
	border: 1px solid var(--cnep-border-ghost);
	border-radius: var(--cnep-radius);
	padding: 12px 16px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	color: var(--cnep-ui-ink);
}
.cnep-field ::placeholder {
	color: var(--cnep-ui-ink-soft);
	opacity: 1;
}
.cnep-field input:focus,
.cnep-field select:focus,
.cnep-field textarea:focus {
	border-color: var(--entity-primary);
	outline: 2px solid var(--entity-primary);
	outline-offset: 0;
}

/* Variante éditoriale « underline » (formulaire contact Collège, §4.5) :
   fond tonal appuyé, seul un filet bas fantôme ; focus couleur d'entité */
.cnep-field--underline input[type="text"],
.cnep-field--underline input[type="email"],
.cnep-field--underline input[type="password"],
.cnep-field--underline input[type="tel"],
.cnep-field--underline select,
.cnep-field--underline textarea {
	background: var(--cnep-surface-high);
	border: 0;
	border-bottom: 2px solid var(--cnep-border-ghost);
	border-radius: var(--cnep-radius) var(--cnep-radius) 0 0;
}
.cnep-field--underline input:focus,
.cnep-field--underline select:focus,
.cnep-field--underline textarea:focus {
	border-bottom-color: var(--entity-primary);
	outline: none;
}

/* Bouton flottant assistance (espace adhérent) */
.cnep-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--z-fab);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--entity-primary);
	color: var(--entity-on-primary);
	box-shadow: var(--cnep-ui-shadow-soft-lg);
}

/* ==========================================================================
   9. Header sticky, top bar, footer (posés via le Theme Builder)
   ========================================================================== */

/* Top bar « portails » — masquée en mobile (liens repris dans le menu) */
#page-container .cnep-topbar {
	display: none;
	background: var(--entity-primary);
	color: var(--entity-on-primary);
	padding-top: 8px;
	padding-bottom: 8px;
}
#page-container .cnep-topbar a {
	color: var(--entity-on-primary);
}
@media (min-width: 768px) {
	#page-container .cnep-topbar {
		display: block;
	}
}

/* Header sticky glassmorphism — réservé au header + overlays (§0.5).
   v2 : blanc 80 % + blur 12px, SANS border-bottom (remplacée par une ombre
   ambiante très légère) */
#page-container .cnep-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--cnep-shadow-soft);
	min-height: 64px;
}
/* Fallback navigateurs sans backdrop-filter : fond quasi opaque */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	#page-container .cnep-header {
		background: rgba(255, 255, 255, 0.97);
	}
}
@media (min-width: 981px) {
	#page-container .cnep-header {
		min-height: 80px;
	}
}
/* Sticky natif Divi (sticky_position="top" posé sur la section dans le
   Theme Builder) : #page-container { overflow: auto hidden } (Divi core)
   neutralise position:sticky, Divi fixe donc l'élément en JS. On rend alors
   la position neutre pour ne pas fausser ses calculs d'offset ; le
   position:sticky ci-dessus reste en secours si le sticky natif est retiré. */
#page-container .cnep-header.et_pb_sticky_module {
	position: relative;
	top: auto;
}
/* Lien de menu actif : couleur entité + soulignement 2px */
.cnep-header .current-menu-item > a {
	color: var(--entity-primary);
	box-shadow: inset 0 -2px 0 var(--entity-primary);
}

/* Footer 4 colonnes — v2 : la rupture tonale avec la page suffit
   (plus de border-top, règle no-line §0.1) */
#page-container .cnep-footer {
	background: var(--cnep-ui-bg-footer);
}

/* --- 9.1 Top bar : mise en page interne (états manquants) ----------------- */

/* Gouttières latérales (16px mobile / 40px desktop, contenu max 1280px) */
#page-container .cnep-topbar,
#page-container .cnep-header,
#page-container .cnep-footer {
	padding-left: 16px;
	padding-right: 16px;
}
@media (min-width: 981px) {
	#page-container .cnep-topbar,
	#page-container .cnep-header,
	#page-container .cnep-footer {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Le clearfix ::after des lignes Divi devient un item flex parasite :
   on le neutralise sur les lignes passées en flex */
.cnep-topbar .cnep-topbar__row::after,
.cnep-header .cnep-header__row::after,
.cnep-footer .cnep-footer__legal::after {
	display: none;
}

/* Ligne 2 colonnes en flex : portails à gauche, Presse/Contact à droite */
.cnep-topbar .cnep-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.cnep-topbar .cnep-topbar__row > .et_pb_column {
	width: auto;
	margin: 0;
}
.cnep-topbar .cnep-topbar__links p,
.cnep-topbar .cnep-topbar__meta p {
	margin: 0;
	padding: 0;
	max-width: none;
}
.cnep-topbar__label {
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 16px;
}
/* Liens portails : l'actif en gras souligné, les autres atténués */
#page-container .cnep-topbar .cnep-topbar__link {
	margin-right: 16px;
	opacity: 0.7;
	transition: opacity 200ms ease;
}
#page-container .cnep-topbar .cnep-topbar__link:hover {
	opacity: 1;
}
#page-container .cnep-topbar .cnep-topbar__link--active {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	opacity: 1;
}
#page-container .cnep-topbar .cnep-topbar__meta {
	text-align: right;
}
#page-container .cnep-topbar .cnep-topbar__meta a {
	margin-left: 16px;
}
#page-container .cnep-topbar .cnep-topbar__meta a:hover {
	text-decoration: underline;
}

/* --- 9.2 Header : mise en page interne (états manquants) ------------------ */

/* Section centrée verticalement, ligne logo / menu / CTA en flex */
#page-container .cnep-header {
	display: flex;
	align-items: center;
}
.cnep-header .cnep-header__row {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.cnep-header .cnep-header__row > .et_pb_column {
	width: auto;
	margin: 0;
}
/* max-width:max-content : contre le width:100% !important que Divi impose
   aux colonnes empilées ≤ 980px (les colonnes restent sur une seule ligne) */
.cnep-header .cnep-header__col-logo {
	flex: 0 0 auto;
	max-width: max-content;
}
.cnep-header .cnep-header__col-menu {
	flex: 1 1 auto;
	min-width: 0;
}
.cnep-header .cnep-header__col-cta {
	flex: 0 0 auto;
	max-width: max-content;
	text-align: right;
}
.cnep-topbar .cnep-topbar__row > .et_pb_column,
.cnep-footer .cnep-footer__legal > .et_pb_column {
	max-width: max-content;
}
#page-container .cnep-header .cnep-header__logo {
	margin-bottom: 0;
}
.cnep-header .cnep-header__logo img {
	max-height: 48px;
	width: auto;
}
@media (min-width: 981px) {
	/* Logo carré 2026 : la baseline devient lisible à partir de ~64px. */
	.cnep-header .cnep-header__logo img {
		max-height: 64px;
	}
}
/* Menu Divi : fond transparent, liens en label uppercase (Manrope) */
#page-container .cnep-header .cnep-header__menu,
#page-container .cnep-header .cnep-header__menu .et_pb_menu__wrap {
	background-color: transparent;
}
.cnep-header .cnep-header__menu .et-menu > li > a {
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ui-ink-soft);
	transition: color 200ms ease;
}
.cnep-header .cnep-header__menu .et-menu > li > a:hover {
	color: var(--entity-primary);
	opacity: 1;
}
.cnep-header .cnep-header__menu .et_pb_menu__icon {
	color: var(--cnep-ui-ink-soft);
}
.cnep-header .cnep-header__menu .et_pb_menu__icon:hover {
	color: var(--entity-primary);
}
/* CTA compact en mobile pour cohabiter avec le hamburger */
@media (max-width: 980px) {
	body #page-container .cnep-header .cnep-header__cta.et_pb_button,
	body #page-container .cnep-header .cnep-header__cta.et_pb_button:hover {
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* --- 9.3 Footer : variante sombre + mise en page interne ------------------ */

/* Variante sombre — DÉGRADÉ SIGNATURE d'entité, même convention que
   .cnep-section--brand : le footer se recolore selon body.entity-* */
#page-container .cnep-footer--brand {
	background: var(--entity-gradient);
	border-top: none;
	color: rgba(255, 255, 255, 0.8);
}
#page-container .cnep-footer--brand p {
	color: rgba(255, 255, 255, 0.8);
}
#page-container .cnep-footer--brand a {
	color: rgba(255, 255, 255, 0.75);
	transition: color 200ms ease;
}
#page-container .cnep-footer--brand a:hover {
	color: #ffffff;
}
/* Titres de colonnes : label uppercase blanc (Manrope, bat la règle serif h4) */
#page-container .cnep-footer .cnep-label {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
	padding-bottom: 16px;
}
/* Listes de liens sans puces */
.cnep-footer .cnep-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}
.cnep-footer .cnep-footer__nav li {
	padding: 4px 0;
}
/* Logo : le JPG (fond blanc) est posé sur pastille blanche arrondie */
#page-container .cnep-footer .cnep-footer__logo {
	margin-bottom: 24px;
	text-align: left;
}
.cnep-footer .cnep-footer__logo img {
	max-height: 64px;
	width: auto;
	background: #ffffff;
	padding: 6px;
	border-radius: var(--cnep-ui-radius);
}
#page-container .cnep-footer .cnep-footer__desc {
	margin-bottom: 24px;
}
/* Icônes sociales rondes, discrètes sur fond sombre */
#page-container .cnep-footer .cnep-footer__social li a.icon {
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	transition: background-color 200ms ease;
}
#page-container .cnep-footer .cnep-footer__social li a.icon:hover {
	background-color: rgba(255, 255, 255, 0.25);
}
/* Barre légale : copyright à gauche, liens à droite — v2 : le filet est
   remplacé par un simple espacement de 48px (§4.8) */
.cnep-footer .cnep-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	padding-top: 48px;
}
.cnep-footer .cnep-footer__legal > .et_pb_column {
	width: auto;
	margin: 0;
}
.cnep-footer .cnep-footer__legal p {
	margin: 0;
	padding: 0;
	max-width: none;
}
#page-container .cnep-footer .cnep-footer__legal-links {
	text-align: right;
}
#page-container .cnep-footer .cnep-footer__legal-links a {
	margin-left: 24px;
}
/* Responsive : 4 colonnes ≥ 981 (Divi), 2 colonnes 768–980, 1 colonne ≤ 767 */
@media (min-width: 768px) and (max-width: 980px) {
	.cnep-footer .cnep-footer__row {
		display: flex;
		flex-wrap: wrap;
	}
	.cnep-footer .cnep-footer__row > .et_pb_column {
		width: calc(50% - 12px);
		margin-right: 24px;
		margin-bottom: 24px;
	}
	.cnep-footer .cnep-footer__row > .et_pb_column:nth-child(2n) {
		margin-right: 0;
	}
}
@media (max-width: 767px) {
	.cnep-footer .cnep-footer__legal {
		flex-direction: column;
		text-align: center;
	}
	#page-container .cnep-footer .cnep-footer__legal-links {
		text-align: center;
	}
	#page-container .cnep-footer .cnep-footer__legal-links a {
		margin: 0 12px;
	}
}

/* ==========================================================================
   10. Page d'accueil CNEP (spec-integration §5.1)
   ========================================================================== */

/* --- 10.1 Hero ---------------------------------------------------------- */

/* ≤ 980 : image AU-DESSUS du texte (ordre DOM inversé en flex) */
.cnep-hero .cnep-hero__row {
	display: flex;
	flex-direction: column-reverse;
}
.cnep-hero .cnep-hero__row > .et_pb_column {
	width: 100%;
}
@media (min-width: 981px) {
	.cnep-hero .cnep-hero__row {
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}
	.cnep-hero .cnep-hero__row > .et_pb_column {
		width: 50%;
		margin-right: 0;
	}
}

/* Visuel hero : radius 16, très légère surimpression dégradée en bas */
.cnep-hero__image {
	position: relative;
	border-radius: var(--cnep-ui-radius-xl);
	overflow: hidden;
	box-shadow: var(--cnep-ui-shadow-soft);
	margin-bottom: 32px;
}
.cnep-hero__image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}
.cnep-hero__image::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Voile teinté encre (jamais de noir pur, §0.2) */
	background: linear-gradient(to top, rgba(29, 27, 32, 0.25), transparent 40%);
	pointer-events: none;
}
@media (min-width: 981px) {
	.cnep-hero__image {
		margin-bottom: 0;
	}
	.cnep-hero__image img {
		height: 600px;
	}
}

/* --- 10.2 Missions fondamentales ---------------------------------------- */

/* Titre centré + trait 80×4px couleur entité dessous */
.cnep-missions__head h2 {
	text-align: center;
}
.cnep-missions__head h2::after {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	margin: 16px auto 0;
	background: var(--entity-primary);
}

/* Blurbs missions : cartes centrées, padding généreux */
#page-container .cnep-missions .cnep-card.et_pb_blurb {
	padding: 32px 24px;
	height: 100%;
}
.cnep-missions .cnep-card .et_pb_main_blurb_image {
	margin-bottom: 24px;
}
.cnep-missions .cnep-card h4 {
	font-family: "Manrope", sans-serif; /* rôle Title (§3) : Manrope 600 */
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 8px;
}
.cnep-missions .cnep-card .et_pb_blurb_description {
	color: var(--cnep-ui-ink-soft);
}

/* 4 colonnes ≥ 981 (géré par Divi), 2 colonnes entre 768 et 980 */
@media (min-width: 768px) and (max-width: 980px) {
	.cnep-missions__grid {
		display: flex;
		flex-wrap: wrap;
	}
	.cnep-missions__grid > .et_pb_column {
		width: calc(50% - 12px);
		margin-right: 24px;
		margin-bottom: 24px;
	}
	.cnep-missions__grid > .et_pb_column:nth-child(2n) {
		margin-right: 0;
	}
}

/* --- 10.3 Écosystème (bento) -------------------------------------------- */

/* Colonnes de même hauteur ≥ 981 */
@media (min-width: 981px) {
	.cnep-bento__row {
		display: flex;
		align-items: stretch;
	}
}

/* Grande carte CNEP = la colonne 2/3 — sans bordure (couche tonale, v2) */
#page-container .cnep-bento__main {
	position: relative;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
	padding: 32px;
	overflow: hidden;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#page-container .cnep-bento__main h3 {
	color: var(--entity-primary);
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	padding-bottom: 16px;
}
@media (min-width: 981px) {
	#page-container .cnep-bento__main {
		margin-bottom: 0;
		padding: 40px;
	}
	#page-container .cnep-bento__main h3 {
		font-size: 48px;
		line-height: 56px;
	}
}

/* Logo filigrane bas-droite (module image dans la colonne) */
#page-container .cnep-bento__main .cnep-bento__watermark {
	position: absolute;
	right: -5%;
	bottom: -10%;
	width: 280px;
	margin: 0;
	opacity: 0.08;
	filter: grayscale(1);
	pointer-events: none;
}

/* Petites cartes empilées (modules texte de la colonne 1/3) — sans bordure ;
   hover en TONAL SHIFT (fond → tier en creux, §0.6) au lieu du filet coloré */
#page-container .cnep-bento__card {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
	padding: 24px;
	margin-bottom: 24px;
	transition: background-color 300ms ease;
}
#page-container .cnep-bento__card:last-child {
	margin-bottom: 0;
}
#page-container .cnep-bento__card h3 {
	color: var(--entity-primary);
	padding-bottom: 8px;
}
#page-container .cnep-bento__card--upb h3 {
	color: var(--upb-primary);
}
#page-container .cnep-bento__card--upb .cnep-link-arrow {
	color: var(--upb-primary);
}

/* Hiérarchie des syndicats (réunion du 01/09) : l'UPB en focus, puis la
   FIEPPEC, puis l'UMM et l'UME en retrait. L'UPB est la seule entité dotée
   d'une représentativité reconnue, la hiérarchie visuelle le traduit. */
#page-container .cnep-bento__card--focus {
	padding: 32px;
}
#page-container .cnep-bento__card--focus h3 {
	font-size: 28px;
	line-height: 36px;
}
#page-container .cnep-bento__card--sm {
	padding: 20px 24px;
}
#page-container .cnep-bento__card--sm h3 {
	font-size: 18px;
	line-height: 24px;
}
#page-container .cnep-bento__card--sm p {
	font-size: 15px;
}

/* Survol « blanc lumineux » demandé en réunion. Les cartes étant déjà sur le
   tier le plus clair, l'effet se joue en halo et en élévation plutôt qu'en
   changement de fond : un tonal shift les aurait au contraire assombries. */
#page-container .cnep-bento__card {
	transition: box-shadow 300ms ease, transform 300ms ease;
}
#page-container .cnep-bento__card:hover,
#page-container .cnep-bento__card:focus-within {
	transform: translateY(-3px);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.9),
		0 0 32px rgba(255, 255, 255, 0.7),
		var(--cnep-shadow-soft-lg);
}
@media (prefers-reduced-motion: reduce) {
	#page-container .cnep-bento__card {
		transition: none;
	}
	#page-container .cnep-bento__card:hover,
	#page-container .cnep-bento__card:focus-within {
		transform: none;
	}
}
.cnep-bento__card .cnep-label {
	color: var(--cnep-ui-ink-soft);
	display: block;
	margin-bottom: 12px;
}

/* --- 10.3b Écosystème en organigramme (« trèfle ») ------------------------ */
/* Réunion du 01/09 : la CNEP au centre, les quatre entités autour, chacune
   avec son logo. Grille 3 colonnes où la colonne médiane porte la CNEP et les
   satellites occupent les quatre coins, ce qui dessine le trèfle sans
   positionnement absolu, donc sans casse au redimensionnement. */
.cnep-orbit {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	justify-items: center;
	margin-top: 8px;
}
@media (min-width: 981px) {
	.cnep-orbit {
		grid-template-columns: 1fr auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 48px;
		row-gap: 40px;
		/* Alignement en haut : centrer chaque cellule décalait les pastilles
		   dès qu'un descriptif tenait sur deux lignes plutôt qu'une. */
		align-items: start;
		max-width: 960px;
		margin-inline: auto;
	}
	.cnep-orbit__center {
		align-self: center;
	}
	.cnep-orbit__center {
		grid-column: 2;
		grid-row: 1 / 3;
	}
	.cnep-orbit__node--1 { grid-column: 1; grid-row: 1; }
	.cnep-orbit__node--2 { grid-column: 3; grid-row: 1; }
	.cnep-orbit__node--3 { grid-column: 1; grid-row: 2; }
	.cnep-orbit__node--4 { grid-column: 3; grid-row: 2; }
}

/* Pastilles : disque blanc, anneau à la couleur de l'entité, logo contenu */
.cnep-orbit__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	margin: 0 auto 14px;
	padding: 18px;
	background: var(--cnep-surface);
	border: 2px solid color-mix(in srgb, var(--cnep-primary) 22%, transparent);
	border-radius: 50%;
	box-shadow: var(--cnep-shadow-soft);
	transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}
.cnep-orbit__disc img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.cnep-orbit__center .cnep-orbit__disc {
	width: 196px;
	height: 196px;
	padding: 26px;
	border-width: 3px;
	border-color: color-mix(in srgb, var(--cnep-primary) 45%, transparent);
	box-shadow: var(--cnep-shadow-soft-lg);
}

/* Un nœud entier est cliquable : le lien porte la pastille et son libellé */
.cnep-orbit__node,
.cnep-orbit__center {
	display: block;
	max-width: 260px;
	text-align: center;
	text-decoration: none;
	color: var(--cnep-ink);
}
.cnep-orbit__name {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	color: var(--cnep-primary);
}
.cnep-orbit__center .cnep-orbit__name {
	font-size: 26px;
	line-height: 32px;
}
.cnep-orbit__desc {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	color: var(--cnep-ink-soft);
}

/* Couleur d'entité portée par l'anneau et le nom */
.cnep-orbit__node--upb .cnep-orbit__disc { border-color: color-mix(in srgb, var(--upb-primary) 35%, transparent); }
.cnep-orbit__node--upb .cnep-orbit__name { color: var(--upb-primary); }
.cnep-orbit__node--umm .cnep-orbit__disc { border-color: color-mix(in srgb, var(--umm-primary) 35%, transparent); }
.cnep-orbit__node--umm .cnep-orbit__name { color: var(--umm-primary); }
.cnep-orbit__node--ume .cnep-orbit__disc { border-color: color-mix(in srgb, var(--ume-primary) 35%, transparent); }
.cnep-orbit__node--ume .cnep-orbit__name { color: var(--ume-primary); }
/* La FIEPPEC n'a pas encore de couleur propre : anneau rouge CNEP, comme
   l'harmonisation provisoire évoquée en réunion. */
.cnep-orbit__node--fieppec .cnep-orbit__disc {
	border-color: color-mix(in srgb, var(--cnep-primary) 35%, transparent);
	/* Leur logo est un bloc très large (271x73) : on lui rend de la largeur
	   utile, sinon il devient illisible dans le disque. À remplacer dès que la
	   FIEPPEC fournit une version haute définition, idéalement plus compacte. */
	padding: 10px;
}

/* Survol lumineux, cohérent avec les cartes de l'écosystème */
.cnep-orbit__node:hover .cnep-orbit__disc,
.cnep-orbit__node:focus-visible .cnep-orbit__disc,
.cnep-orbit__center:hover .cnep-orbit__disc,
.cnep-orbit__center:focus-visible .cnep-orbit__disc {
	transform: translateY(-3px);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.9),
		0 0 32px rgba(255, 255, 255, 0.7),
		var(--cnep-shadow-soft-lg);
}
@media (prefers-reduced-motion: reduce) {
	.cnep-orbit__disc { transition: none; }
	.cnep-orbit__node:hover .cnep-orbit__disc,
	.cnep-orbit__center:hover .cnep-orbit__disc { transform: none; }
}

/* En dessous de 981 : la CNEP en tête, puis les quatre entités deux par deux */
@media (max-width: 980px) {
	.cnep-orbit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 32px;
	}
	.cnep-orbit__center {
		grid-column: 1 / -1;
		/* La CNEP passe en tête : l'UPB devient le deuxième bloc, comme demandé
		   pour la lecture mobile. */
		order: -1;
	}
	.cnep-orbit__disc {
		width: 104px;
		height: 104px;
		padding: 14px;
	}
	.cnep-orbit__center .cnep-orbit__disc {
		width: 148px;
		height: 148px;
		padding: 20px;
	}
}

/* --- 10.4 Focus UPB (bande brand) ----------------------------------------- */

/* v2 (delta §5.1) : le fond passe au dégradé signature --entity-gradient
   (hérité de .cnep-section--brand) — le motif de points série 1 disparaît */
#page-container .cnep-focus-upb {
	overflow: hidden;
}
.cnep-focus-upb .cnep-body-lg {
	color: rgba(255, 255, 255, 0.8);
}

/* Stats : 2 colonnes conservées jusqu'en mobile */
.cnep-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin: 32px 0;
}
.cnep-stats__value {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	/* Chiffres HÉROS (demande 02/08) : ils portent la preuve, ils dominent */
	font-size: clamp(36px, 4.5vw, 52px);
	line-height: 1.15;
	font-weight: 600;
	color: var(--entity-on-primary);
}
.cnep-stats__label {
	display: block;
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 4px;
}

/* Visuel rond bordé blanc (max 280px en mobile) */
#page-container .cnep-img-round {
	max-width: 280px;
	margin: 32px auto 0;
}
#page-container .cnep-img-round img {
	border-radius: 50%;
	border: 4px solid var(--cnep-ui-surface);
	box-shadow: var(--cnep-shadow-lg);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}
@media (min-width: 981px) {
	#page-container .cnep-img-round {
		max-width: 440px;
		margin-top: 0;
	}
}

/* Carte flottante « Label Excellence » — masquée ≤ 980 (spec §5.1-5) */
#page-container .cnep-float-card {
	display: none;
}
@media (min-width: 981px) {
	#page-container .cnep-float-card {
		display: block;
		position: absolute;
		top: 0;
		right: 24px;
		background: var(--cnep-ui-surface);
		border-radius: var(--cnep-ui-radius-xl);
		box-shadow: var(--cnep-shadow-lg);
		padding: 20px 24px;
		max-width: 220px;
	}
	.cnep-focus-upb .et_pb_column:last-child {
		position: relative;
	}
	.cnep-float-card .cnep-float-card__title {
		color: var(--cnep-primary);
		font-weight: 700;
		font-size: 14px;
	}
	.cnep-float-card .cnep-float-card__meta {
		color: var(--cnep-ui-ink-soft);
		font-size: 11px;
	}
}

/* --- 10.5 Actualités & Presse (module et_pb_blog en grille) -------------- */

#page-container .cnep-news {
	background-color: var(--cnep-ui-surface);
}
.cnep-news__head .cnep-headline-md + p {
	color: var(--cnep-ui-ink-soft);
	margin-top: 8px;
}
.cnep-news__all {
	text-align: left;
}
@media (min-width: 981px) {
	.cnep-news__head {
		display: flex;
		align-items: flex-end;
	}
	.cnep-news__all {
		text-align: right;
	}
}

/* Restyle des articles de la grille Divi en cartes maquette */
#page-container .cnep-news article.et_pb_post {
	background: var(--cnep-ui-surface);
	border: none;
	padding: 0;
	box-shadow: none;
}
#page-container .cnep-news article.et_pb_post .entry-featured-image-url {
	display: block;
	border-radius: var(--cnep-ui-radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
	aspect-ratio: 16 / 10;
}
#page-container .cnep-news article.et_pb_post .entry-featured-image-url img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}
#page-container .cnep-news article.et_pb_post:hover .entry-featured-image-url img {
	transform: scale(1.05);
}
/* Titre d'article : rôle Title (Manrope 600), survol couleur entité */
#page-container .cnep-news article.et_pb_post .entry-title {
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	padding-bottom: 8px;
}
#page-container .cnep-news article.et_pb_post .entry-title a {
	color: var(--cnep-ui-ink);
	transition: color 200ms ease;
}
#page-container .cnep-news article.et_pb_post .entry-title a:hover {
	color: var(--entity-primary);
}
/* Méta (date, catégories) en label-sm ; catégories couleur entité */
#page-container .cnep-news article.et_pb_post .post-meta {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cnep-ui-ink-soft);
}
#page-container .cnep-news article.et_pb_post .post-meta a {
	color: var(--entity-primary);
	font-weight: 600;
}
#page-container .cnep-news article.et_pb_post .post-content {
	color: var(--cnep-ui-ink-soft);
}
@media (min-width: 981px) {
	#page-container .cnep-news article.et_pb_post .entry-title {
		font-size: 20px;
		line-height: 28px;
	}
}

/* --- 10.6 Partenaires (placeholder sobre — vrais logos à venir) ---------- */

.cnep-partners__title {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--cnep-ui-ink-soft);
	margin-bottom: 40px;
}
.cnep-partners__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
}
/* Emplacement de logo : bloc neutre statique (pas d'animation de chargement).
   Pointillé en ghost border (attente d'asset — pas un séparateur de contenu) */
.cnep-partners__slot {
	display: inline-block;
	width: 128px;
	height: 48px;
	border-radius: var(--cnep-radius);
	background: var(--cnep-surface-low);
	border: 1px dashed color-mix(in srgb, var(--cnep-border) 60%, transparent);
}

/* Slot avec vrai logo partenaire (import_web/partenaires) : le cadre
   pointillé disparaît, le logo passe en niveaux de gris et se colore
   au survol (convention « bande de confiance » sobre). */
.cnep-partners__slot--logo {
	width: auto;
	height: 56px;
	border: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
}
.cnep-partners__slot--logo img {
	max-height: 56px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.cnep-partners__slot--logo:hover img {
	filter: none;
	opacity: 1;
}

/* Variante typographique (maquette Editorial Atelier) : noms de marques
   en capitales espacées, Noto Serif — pas de fichiers logo requis. */
.cnep-partners__row--noms {
	flex-wrap: wrap;
}
.cnep-partners__name {
	font-family: "Noto Serif", Georgia, serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cnep-ui-ink-soft);
	white-space: nowrap;
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.cnep-partners__name:hover {
	opacity: 1;
	color: var(--entity-primary);
}
@media (min-width: 981px) {
	.cnep-partners__row {
		gap: 64px;
	}
}

/* --- 10.7 Pré-footer newsletter ------------------------------------------ */

.cnep-newsletter .cnep-headline-md {
	padding-bottom: 8px;
}
.cnep-newsletter p {
	color: var(--cnep-ui-ink-soft);
}
@media (min-width: 981px) {
	.cnep-newsletter .cnep-newsletter__row {
		display: flex;
		align-items: center;
	}
	.cnep-newsletter .cnep-newsletter__cta {
		text-align: right;
	}
}

/* ==========================================================================
   11. Composants v2 « Editorial Atelier » (spec §4.9, §4.10)
   --------------------------------------------------------------------------
   Nouvelles classes de la série 2 — toutes sensibles à l'entité via les
   tokens --entity-*. Les classes se posent dans Divi (onglet Avancé →
   « Classe CSS » du module / de la ligne / de la colonne).
   ========================================================================== */

/* --- 11.1 Pastille d'icône carrée (variante série 2 de .cnep-icon-circle) - */
.cnep-icon-square .et-pb-icon,
span.cnep-icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--cnep-radius);
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-size: 22px;
	transition: background-color 200ms ease, color 200ms ease;
}
.cnep-icon-square:hover .et-pb-icon,
a:hover > span.cnep-icon-square {
	background: var(--entity-primary);
	color: var(--entity-on-primary);
}

/* --- 11.2 Navigation latérale de rubrique (« Collèges UPB ») -------------- */
/* Hôte : colonne gauche ¼ d'une section spécialité + et_pb_menu vertical */
#page-container .cnep-side-nav {
	background: var(--cnep-surface-mid);
	border-radius: var(--cnep-radius-lg);
	padding: 24px 0 24px 16px;
	/* Ombre latérale ambiante (spec §4.10) */
	box-shadow: 32px 0 64px rgba(29, 27, 32, 0.04);
}
.cnep-side-nav ul {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}
.cnep-side-nav ul li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--cnep-ink-soft);
	border-radius: var(--cnep-radius-pill) 0 0 var(--cnep-radius-pill);
	transition: transform 200ms ease, color 200ms ease;
}
.cnep-side-nav ul li a:hover {
	transform: translateX(4px);
	color: var(--entity-primary);
}
/* Item actif : « papier » clair détaché du fond + couleur d'entité */
.cnep-side-nav ul li.current-menu-item > a,
.cnep-side-nav ul li a.cnep-side-nav__actif {
	background: var(--cnep-surface);
	color: var(--entity-primary);
	font-weight: 600;
}
/* ≤ 980 : la sidebar devient une barre de chips horizontale scrollable */
@media (max-width: 980px) {
	#page-container .cnep-side-nav {
		padding: 12px 16px;
		border-radius: var(--cnep-radius-lg);
		box-shadow: none;
	}
	.cnep-side-nav ul {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cnep-side-nav ul li a,
	.cnep-side-nav ul li.current-menu-item > a {
		white-space: nowrap;
		border-radius: var(--cnep-radius-pill);
		padding: 6px 16px;
	}
	.cnep-side-nav ul li a:hover {
		transform: none;
	}
}

/* --- 11.3 Carte pilier (accueil v2, missions UMM) -------------------------- */
/* Numéro serif géant + titre serif + lien fléché ; fonds tonals ALTERNÉS
   entre cartes voisines (rythme éditorial), pas de bordure */
#page-container .cnep-card-pillar {
	background: var(--cnep-surface-low);
	border-radius: var(--cnep-radius-lg);
	padding: 40px;
	transition: background-color 300ms ease;
}
#page-container .cnep-card-pillar:nth-child(2n),
#page-container .cnep-card-pillar--mid {
	background: var(--cnep-surface-mid);
}
#page-container .cnep-card-pillar:hover {
	background: var(--cnep-surface-high); /* tonal shift */
}
.cnep-card-pillar .cnep-num {
	margin-bottom: 16px;
}

/* --- 11.4 Carte citation flottante (accueil v2) ---------------------------- */
/* Posée en surimpression d'une image ≥ 981 (marges négatives sur le module) */
#page-container .cnep-quote-card {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	padding: 32px;
	box-shadow: var(--cnep-shadow-soft-lg);
}
@media (min-width: 981px) {
	#page-container .cnep-quote-card--overlay {
		position: absolute;
		right: -24px;
		bottom: 32px;
		max-width: 320px;
		z-index: 2;
	}
}
@media (max-width: 980px) {
	#page-container .cnep-quote-card--overlay {
		display: none; /* masquée ≤ 980 (spec §4.10) */
	}
}

/* --- 11.5 Carte inverse (point focal d'une grille bento) ------------------- */
/* Pleine couleur d'entité, texte blanc — UN SEUL exemplaire par grille */
#page-container .cnep-card--inverse {
	background: var(--entity-gradient);
	border-radius: var(--cnep-radius-lg);
	color: var(--entity-on-primary);
	box-shadow: var(--cnep-shadow-soft);
}
#page-container .cnep-card--inverse h2,
#page-container .cnep-card--inverse h3,
#page-container .cnep-card--inverse h4,
#page-container .cnep-card--inverse p,
#page-container .cnep-card--inverse .cnep-label,
#page-container .cnep-card--inverse .cnep-link-arrow {
	color: var(--entity-on-primary);
}
#page-container .cnep-card--inverse p {
	color: rgba(255, 255, 255, 0.85);
}

/* Variante « inversion au survol » (missions UME) : carte tonale qui passe
   pleine couleur — transition lente 500ms */
#page-container .cnep-card--hover-invert {
	background: var(--cnep-surface-low);
	border-radius: var(--cnep-radius-lg);
	transition: background-color 500ms ease, color 500ms ease;
}
#page-container .cnep-card--hover-invert:hover {
	background: var(--entity-primary);
}
#page-container .cnep-card--hover-invert:hover h3,
#page-container .cnep-card--hover-invert:hover h4,
#page-container .cnep-card--hover-invert:hover p,
#page-container .cnep-card--hover-invert:hover .et-pb-icon {
	color: var(--entity-on-primary);
}

/* --- 11.6 Étape de processus (parcours d'adhésion) ------------------------- */
/* Pastille ronde numérotée + filet vertical fantôme reliant les étapes
   (exception no-line tolérée : élément de FLUX, pas un séparateur) */
.cnep-step {
	position: relative;
	padding-left: 72px;
	padding-bottom: 40px;
}
.cnep-step__num {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cnep-surface-high);
	border: 1px solid color-mix(in srgb, var(--entity-primary) 30%, transparent);
	color: var(--entity-primary);
	font-family: "Noto Serif", Georgia, serif;
	font-weight: 700;
	font-size: 18px;
}
/* Étape active/courante : pastille pleine couleur d'entité */
.cnep-step--active .cnep-step__num {
	background: var(--entity-primary);
	border-color: var(--entity-primary);
	color: var(--entity-on-primary);
}
/* Filet vertical fantôme entre les pastilles */
.cnep-step::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 48px;
	bottom: 0;
	width: 1px;
	background: var(--cnep-border-ghost);
}
.cnep-step:last-child::before {
	display: none;
}
.cnep-step:last-child {
	padding-bottom: 0;
}

/* --- 11.7 Rangée document / référentiel ------------------------------------ */
/* Pastille icône + titre bold + méta ; hover en tonal shift */
#page-container .cnep-doc-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	padding: 16px 20px;
	transition: background-color 200ms ease;
}
#page-container .cnep-doc-row:hover {
	background: var(--cnep-surface-high);
}
.cnep-doc-row__body {
	flex: 1 1 auto;
	min-width: 0;
}
.cnep-doc-row__titre {
	display: block;
	font-weight: 700;
	color: var(--cnep-ink);
}
.cnep-doc-row__meta {
	display: block;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.03em;
	color: var(--cnep-ink-soft);
}
.cnep-doc-row__action {
	flex: 0 0 auto;
	color: var(--cnep-ink-soft);
	transition: color 200ms ease;
}
#page-container .cnep-doc-row:hover .cnep-doc-row__action {
	color: var(--entity-primary);
}

/* --- 11.8 Collage éditorial (images décalées, UMM/UME) --------------------- */
/* 2 colonnes d'images aux ratios mixtes, la 2e décalée vers le bas */
.cnep-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.cnep-collage > *:nth-child(2n) {
	padding-top: 48px; /* décalage « editorial reveal » */
}
.cnep-collage img {
	width: 100%;
	border-radius: var(--cnep-radius-lg);
	display: block;
}

/* --- 11.9 Bloc question/réponse d'interview -------------------------------- */
.cnep-qa {
	margin-bottom: 40px;
}
.cnep-qa__question {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
/* Réponse en retrait, filet vertical fantôme (élément de flux) */
.cnep-qa__reponse {
	margin-top: 16px;
	padding-left: 24px;
	border-left: 2px solid var(--cnep-border-ghost);
}
@media (max-width: 767px) {
	.cnep-qa__reponse {
		padding-left: 0;
		border-left: 0; /* filet masqué en mobile (spec §5.11) */
	}
}

/* --- 11.10 Carrousel horizontal mobile (collèges / CQP) -------------------- */
/* Posé sur la ligne Divi : cartes min 280px, défilement scroll-snap natif */
@media (max-width: 767px) {
	#page-container .cnep-scroll-row {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}
	#page-container .cnep-scroll-row > .et_pb_column {
		flex: 0 0 280px;
		width: 280px;
		scroll-snap-align: start;
	}
}

/* --- 11.11 Colonne sticky (missions UMM, aside interview) ------------------ */
@media (min-width: 981px) {
	#page-container .cnep-sticky-col {
		position: sticky;
		top: 104px; /* header 80px + marge */
		align-self: flex-start;
	}
}

/* --- 11.12 Légende glassmorphism (encart sur image, hero UMM) -------------- */
/* Glassmorphism réservé au header + overlays (§0.5) — ceci est un overlay */
.cnep-glass-caption {
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: var(--cnep-radius-lg);
	padding: 16px 20px;
	box-shadow: var(--cnep-shadow-soft);
}
@media (max-width: 767px) {
	.cnep-glass-caption {
		display: none; /* encart masqué ≤ 767 (spec §5.6) */
	}
}

/* --- 11.13 Actualités : carte vedette + rangée compacte -------------------- */
/* Carte vedette : image de fond + voile dégradé encre bas + texte blanc */
#page-container .cnep-news-hero {
	position: relative;
	border-radius: var(--cnep-radius-lg);
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
}
.cnep-news-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(29, 27, 32, 0.75), transparent 60%);
}
.cnep-news-hero__body {
	position: relative;
	z-index: 1;
	padding: 32px;
	color: #ffffff;
}
#page-container .cnep-news-hero__body h2,
#page-container .cnep-news-hero__body h3,
#page-container .cnep-news-hero__body p {
	color: #ffffff;
}
/* Rangée article compacte : miniature 96×96 n&b + méta + titre */
.cnep-news-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}
.cnep-news-row img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--cnep-radius);
	filter: grayscale(1);
	transition: filter 300ms ease;
}
.cnep-news-row:hover img {
	filter: none;
}

/* --- 11.14 Carte personne (représentants, équipe) --------------------------- */
/* Portrait n&b → couleur au survol (geste éditorial §0.6) */
.cnep-card-person img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--cnep-radius-lg);
	filter: grayscale(1);
	transition: filter 400ms ease;
}
.cnep-card-person:hover img {
	filter: none;
}
.cnep-card-person .cnep-eyebrow {
	margin: 16px 0 4px;
}
.cnep-card-person__specialite {
	font-style: italic;
	color: var(--cnep-ink-soft);
}

/* --- 11.15 Carte offre d'entité (page Nous rejoindre) ----------------------- */
#page-container .cnep-card-offer {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	padding: 40px 32px;
	transition: transform 300ms ease;
}
#page-container .cnep-card-offer:hover {
	transform: translateY(-2px);
}
/* Sigle géant serif couleur d'entité */
.cnep-card-offer__sigle {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 48px;
	line-height: 1;
	font-weight: 700;
	color: var(--entity-primary);
	margin-bottom: 16px;
}

/* --- 11.16 Panneaux ---------------------------------------------------------- */
/* Grand panneau clair (commissions paritaires, CTA adhésion) */
#page-container .cnep-panel {
	background: var(--cnep-surface-low);
	border-radius: var(--cnep-radius-2xl);
	padding: 40px 32px;
}
/* Grand panneau sombre neutre (connexion UPB, contact collège) —
   ardoise --cnep-badge-bg, texte clair */
#page-container .cnep-panel-dark {
	background: var(--cnep-badge-bg);
	border-radius: var(--cnep-radius-2xl);
	padding: 40px 32px;
	color: rgba(255, 255, 255, 0.85);
}
#page-container .cnep-panel-dark h2,
#page-container .cnep-panel-dark h3,
#page-container .cnep-panel-dark h4,
#page-container .cnep-panel-dark .cnep-label {
	color: #ffffff;
}
#page-container .cnep-panel-dark p {
	color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 981px) {
	#page-container .cnep-panel,
	#page-container .cnep-panel-dark {
		padding: 64px 56px;
	}
}

/* --- 11.17 Carte ressource (bibliothèque réglementaire) --------------------- */
#page-container .cnep-card-resource {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	padding: 24px;
	transition: background-color 300ms ease;
}
#page-container .cnep-card-resource:hover {
	background: var(--cnep-surface-low); /* tonal shift */
}
/* Badge « Premium » : fond sable dérivé de --entity-light */
.cnep-card-resource__premium {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--cnep-radius-sm);
	background: color-mix(in srgb, var(--entity-light) 20%, #fff);
	color: color-mix(in srgb, var(--entity-light) 30%, var(--cnep-ink));
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- 11.18 Carte CTA dégradée (fin d'article, renouvellement) --------------- */
#page-container .cnep-card-gradient {
	background: var(--entity-gradient);
	border-radius: var(--cnep-radius-xl);
	padding: 40px 32px;
	color: var(--entity-on-primary);
}
#page-container .cnep-card-gradient h2,
#page-container .cnep-card-gradient h3,
#page-container .cnep-card-gradient p {
	color: var(--entity-on-primary);
}
#page-container .cnep-card-gradient p {
	color: rgba(255, 255, 255, 0.85);
}

/* --- 11.19 Templates article / interview ------------------------------------ */
/* Hero article : image à la une plein écran + voile papier bas */
#page-container .cnep-article-hero {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: flex-end;
}
.cnep-article-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--cnep-bg) 5%, transparent 60%);
	pointer-events: none;
}
.cnep-article-hero > * {
	position: relative;
	z-index: 1;
}
/* Aside métadonnées (tags, partage) */
.cnep-article-meta .cnep-chip {
	margin: 0 8px 8px 0;
}
/* Corps d'article : largeur de lecture + exergue signature */
#page-container .cnep-article-body {
	max-width: 70ch;
}
#page-container .cnep-article-body blockquote {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	/* Filet gauche décoratif 4px : exception actée par la spec (§5.10-3) */
	border-left: 4px solid var(--entity-primary);
	padding: 24px 32px;
	margin: 32px 0;
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--entity-primary);
}

/* --- 11.20 Cadres d'image éditoriaux ----------------------------------------- */
/* Cadre tonal légèrement pivoté derrière l'image (hero collège) */
.cnep-img-frame {
	position: relative;
}
.cnep-img-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--entity-surface-tint);
	border-radius: var(--cnep-radius-lg);
	transform: rotate(2deg);
	z-index: 0;
}
.cnep-img-frame img {
	position: relative;
	z-index: 1;
	border-radius: var(--cnep-radius-lg);
	display: block;
}
@media (max-width: 980px) {
	.cnep-img-frame::before {
		display: none; /* rotation supprimée ≤ 980 (spec §5.12) */
	}
}
/* « Editorial reveal » : découpe diagonale légère (hero UME, ≥ 981 seulement) */
@media (min-width: 981px) {
	.cnep-reveal img {
		clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
	}
}
@media (max-width: 980px) {
	#page-container .cnep-reveal {
		display: none; /* image masquée ≤ 980 (maquette hidden lg:block) */
	}
}

/* ==========================================================================
   12. Émojis SVG (Twemoji — assets/emoji/, décision client 13/07/2026)
   --------------------------------------------------------------------------
   « De gros émojis SVG » remplacent les pictos Font Awesome. L'image se pose
   via l'attribut image= du blurb Divi (URL du thème enfant) ou en <img>
   avec la classe .cnep-emoji. Conteneur .cnep-emoji-tile = pastille tonale.
   ========================================================================== */

/* Taille de base : 64px (80px ≥ 981px) */
img.cnep-emoji,
.cnep-emoji-tile .et_pb_image_wrap img,
.cnep-emoji-tile > img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
}
@media (min-width: 981px) {
	img.cnep-emoji,
	.cnep-emoji-tile .et_pb_image_wrap img,
	.cnep-emoji-tile > img {
		width: 80px;
		height: 80px;
	}
}
/* Variantes de taille (sur l'img ou sur le module hôte) */
img.cnep-emoji--sm,
.cnep-emoji-tile--sm .et_pb_image_wrap img,
.cnep-emoji-tile--sm > img {
	width: 40px;
	height: 40px;
}
img.cnep-emoji--xl,
.cnep-emoji-tile--xl .et_pb_image_wrap img,
.cnep-emoji-tile--xl > img {
	width: 104px;
	height: 104px;
}
@media (min-width: 981px) {
	img.cnep-emoji--sm,
	.cnep-emoji-tile--sm .et_pb_image_wrap img,
	.cnep-emoji-tile--sm > img {
		width: 40px;
		height: 40px;
	}
	img.cnep-emoji--xl,
	.cnep-emoji-tile--xl .et_pb_image_wrap img,
	.cnep-emoji-tile--xl > img {
		width: 104px;
		height: 104px;
	}
}

/* Pastille tonale : fond tint d'entité, rayon xl, padding généreux.
   Fonctionne en conteneur direct (<span class="cnep-emoji-tile">) comme en
   classe de module blurb Divi (cible alors le wrapper d'image interne). */
span.cnep-emoji-tile,
.cnep-emoji-tile .et_pb_image_wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--entity-primary-tint);
	border-radius: var(--cnep-radius-xl);
}

/* ==========================================================================
   13. Accessibilité & préférences utilisateur
   ========================================================================== */

/* Focus visible sur tous les éléments interactifs */
#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container .et_pb_button:focus-visible {
	outline: 2px solid var(--entity-primary);
	outline-offset: 2px;
}

/* Réduction de mouvement : on neutralise lifts, zooms, inversions lentes
   et transitions (v2 inclus) */
@media (prefers-reduced-motion: reduce) {
	#page-container .cnep-card,
	#page-container .cnep-card-cqp,
	#page-container .cnep-card-cqp img,
	#page-container .cnep-card-work,
	#page-container .cnep-card-pillar,
	#page-container .cnep-card-offer,
	#page-container .cnep-card-resource,
	#page-container .cnep-card--hover-invert,
	#page-container .cnep-doc-row,
	#page-container .cnep-bento__card,
	#page-container .cnep-btn.et_pb_button,
	.cnep-chip,
	.cnep-icon-circle .et-pb-icon,
	.cnep-icon-square .et-pb-icon,
	.cnep-side-nav ul li a,
	.cnep-card-person img,
	.cnep-news-row img,
	.cnep-link-arrow .cnep-link-arrow__icon,
	#page-container .cnep-news article.et_pb_post .entry-featured-image-url img {
		transition: none;
	}
	#page-container .cnep-card:hover,
	#page-container .cnep-card-cqp:hover,
	#page-container .cnep-card-cqp:hover img,
	#page-container .cnep-card-work:hover,
	#page-container .cnep-card-offer:hover,
	#page-container .cnep-btn.et_pb_button:hover,
	.cnep-side-nav ul li a:hover {
		transform: none;
	}
	.cnep-icon-circle:hover .et-pb-icon,
	#page-container .cnep-news article.et_pb_post:hover .entry-featured-image-url img {
		transform: none;
	}
	.cnep-link-arrow:hover .cnep-link-arrow__icon {
		transform: none;
	}
	/* L'inversion UME retombe sur un simple tonal shift (spec §5.7) */
	#page-container .cnep-card--hover-invert:hover {
		background: var(--cnep-surface-high);
	}
	#page-container .cnep-card--hover-invert:hover h3,
	#page-container .cnep-card--hover-invert:hover h4 {
		color: var(--cnep-ink);
	}
	#page-container .cnep-card--hover-invert:hover p {
		color: var(--cnep-ink-soft);
	}
	#page-container .cnep-card--hover-invert:hover .et-pb-icon {
		color: var(--entity-primary);
	}
}

/* ==========================================================================
   14. Pages — compléments spécifiques (passe CNEP, 13/07/2026)
   --------------------------------------------------------------------------
   Compléments STRICTEMENT nécessaires aux 4 pages CNEP (Qui sommes-nous,
   Actualités, Partenaires, Contact) : adaptation de classes v2 existantes au
   DOM réel des modules Divi (et_pb_blog, blurbs hors accueil, colonnes-cartes)
   + 3 petites classes manquantes. Aucune couleur en dur hors tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Module « Table des matières » (plugin divi-table-of-contents-maker),
   conservé sur Qui sommes-nous : rhabillage charte par-dessus le violet du
   plugin (bloc à remplacer par du natif à la suppression du plugin, D-8).
   Les !important répondent aux styles inline posés par le plugin.
   -------------------------------------------------------------------------- */
#page-container .pac_dtoc_main_container {
	background: var(--cnep-ui-surface);
	border: 0 !important;
	border-radius: var(--cnep-ui-radius-xl);
	box-shadow: var(--cnep-ui-shadow-soft);
	overflow: hidden;
}
#page-container .pac_dtoc_title_area {
	background: var(--entity-gradient, var(--entity-primary)) !important;
}
#page-container .pac_dtoc_title {
	font-family: "Noto Serif", Georgia, serif !important;
	color: var(--entity-on-primary) !important;
	letter-spacing: 0.02em;
}
#page-container .pac_dtoc_body_area {
	font-family: "Manrope", sans-serif !important;
	padding: 16px 24px;
}
#page-container .pac_dtoc_body_area a {
	color: var(--cnep-ui-ink-soft) !important;
}
#page-container .pac_dtoc_body_area a:hover {
	color: var(--entity-primary) !important;
}

/* Blurb-carte générique hors accueil : même padding que .cnep-missions
   (la règle 10.2 était scopée à la home ; les pages CNEP réutilisent le
   composant carte + émoji partout) */
#page-container .cnep-card.et_pb_blurb {
	padding: 32px 24px;
	height: 100%;
}
.cnep-card.et_pb_blurb .et_pb_main_blurb_image {
	margin-bottom: 24px;
}
.cnep-card.et_pb_blurb .et_pb_blurb_description {
	color: var(--cnep-ui-ink-soft);
}

/* Colonne-carte composée (image + texte dans une colonne .cnep-card ou
   .cnep-card--inverse) : padding interne, la classe seule n'en posait pas */
#page-container .et_pb_column.cnep-card,
#page-container .et_pb_column.cnep-card--inverse {
	padding: 32px 24px;
}
/* Liens lisibles sur carte inverse (coordonnées, encart « Vous êtes UPB ? ») */
#page-container .cnep-card--inverse a:not(.et_pb_button) {
	color: var(--entity-on-primary);
	text-decoration: underline;
}

/* Hub Actualités — logos d'entité dans les cartes de renvoi UPB/UMM/UME
   (hauteur FIXE : un max-height + width:auto laisse l'image lazy à 0px) */
#page-container .cnep-entity-logo img {
	height: 96px;
	width: auto;
}

/* Hub Actualités — carte vedette « À la une » : .cnep-news-hero posé sur un
   module et_pb_blog (1 post pleine largeur). L'image à la une devient le fond
   de la carte, le texte passe au-dessus du voile ::after existant. */
#page-container .cnep-news-hero > div {
	width: 100%;
}
#page-container .cnep-news-hero article.et_pb_post {
	position: static;
	margin: 0;
	padding: 32px;
	border: none;
	background: transparent;
}
#page-container .cnep-news-hero article.et_pb_post .entry-featured-image-url {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}
#page-container .cnep-news-hero article.et_pb_post .entry-featured-image-url img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page-container .cnep-news-hero article.et_pb_post .entry-title,
#page-container .cnep-news-hero article.et_pb_post .post-meta,
#page-container .cnep-news-hero article.et_pb_post .post-content {
	position: relative;
	z-index: 1;
}
#page-container .cnep-news-hero article.et_pb_post .entry-title {
	font-size: 26px;
	line-height: 34px;
	padding-bottom: 8px;
}
#page-container .cnep-news-hero article.et_pb_post .entry-title a,
#page-container .cnep-news-hero article.et_pb_post .post-meta,
#page-container .cnep-news-hero article.et_pb_post .post-content,
#page-container .cnep-news-hero article.et_pb_post .post-content p {
	color: #ffffff; /* texte sur voile encre (composant 11.13) */
}
@media (min-width: 981px) {
	#page-container .cnep-news-hero article.et_pb_post .entry-title {
		font-size: 32px;
		line-height: 40px;
	}
}
@media (max-width: 767px) {
	#page-container .cnep-news-hero article.et_pb_post .post-content {
		display: none; /* chapô masqué en mobile (spec §5.9-1) */
	}
}

/* Hub Actualités — flux compact : .cnep-news-row posé sur un module
   et_pb_blog pleine largeur ; chaque article devient une rangée
   miniature 96×96 n&b + date + titre (composant 11.13) */
#page-container .cnep-news-row.et_pb_module {
	display: block; /* neutralise le flex du composant posé sur le module */
	padding: 0;
}
#page-container .cnep-news-row article.et_pb_post {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
	padding: 12px 16px;
	border: none;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	transition: background-color 200ms ease;
}
#page-container .cnep-news-row article.et_pb_post:hover {
	background: var(--cnep-surface-high);
}
#page-container .cnep-news-row article.et_pb_post .entry-featured-image-url {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: var(--cnep-radius);
	overflow: hidden;
}
#page-container .cnep-news-row article.et_pb_post img {
	width: 96px;
	height: 96px;
	object-fit: cover;
}
#page-container .cnep-news-row article.et_pb_post .entry-title {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	padding-bottom: 4px;
}
#page-container .cnep-news-row article.et_pb_post .entry-title a {
	color: var(--cnep-ink);
	transition: color 200ms ease;
}
#page-container .cnep-news-row article.et_pb_post .entry-title a:hover {
	color: var(--entity-primary);
}
#page-container .cnep-news-row article.et_pb_post .post-meta {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}

/* Qui sommes-nous — encart chiffres sur panneau CLAIR : variante light de
   .cnep-stats (le composant 10.4 était écrit pour la section sombre) */
.cnep-stats--light {
	grid-template-columns: repeat(3, 1fr);
}
.cnep-stats--light .cnep-stats__value {
	color: var(--entity-primary);
}
.cnep-stats--light .cnep-stats__label {
	color: var(--cnep-ink-soft);
}
@media (max-width: 767px) {
	.cnep-stats--light {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Passe UPB cœur (13/07/2026) — compléments STRICTEMENT nécessaires aux
   5 pages UPB (pilier, Présentation, Collèges & métiers, Ressources,
   Commissions) : adaptation des classes v2 au DOM réel des modules Divi.
   Aucune couleur en dur hors tokens.
   -------------------------------------------------------------------------- */

/* Eyebrow lisible sur section brand (représentativité UPB, CTA finaux) */
#page-container .cnep-section--brand .cnep-eyebrow {
	color: var(--entity-on-primary);
}

/* Cartes posées sur une LIGNE Divi (commissions du pilier/de la page
   Commissions, cartes travaux) : la ligne-carte gagne un padding interne,
   les règles existantes ne paddaient que les colonnes */
#page-container .et_pb_row.cnep-card,
#page-container .et_pb_row.cnep-card-work {
	padding: 32px 24px;
}
/* Respiration entre lignes-cartes empilées (zigzag travaux, listes de
   commissions) : sans cette marge, les cartes se touchent bord à bord */
#page-container .et_pb_row.cnep-card + .et_pb_row.cnep-card,
#page-container .et_pb_row.cnep-card-work + .et_pb_row.cnep-card-work {
	margin-top: 32px;
}

/* Citation .cnep-quote en blockquote : neutralise le filet gauche par défaut
   de Divi (règle no-line §0.1) */
#page-container blockquote.cnep-quote {
	border: 0;
	padding: 0;
}

/* Rangée document utilisée comme LIEN (renvois ressources) : pas de
   soulignement, l'affordance vient du tonal shift + flèche */
#page-container a.cnep-doc-row {
	text-decoration: none;
	color: var(--cnep-ink);
	margin-bottom: 12px;
}
/* Pastille émoji compacte dans une rangée document */
#page-container .cnep-doc-row .cnep-emoji-tile,
#page-container .cnep-doc-row span.cnep-emoji-tile {
	padding: 12px;
	border-radius: var(--cnep-radius);
	flex: 0 0 auto;
}

/* Chips utilisées comme liens (« Je cherche… », badges métiers) */
#page-container a.cnep-chip {
	text-decoration: none;
	color: var(--cnep-ui-ink-soft);
}
#page-container a.cnep-chip:hover {
	color: var(--entity-primary);
}

/* Ancres internes (#famille-*) : compense le header sticky 80px */
#page-container .et_pb_module[id] {
	scroll-margin-top: 104px;
}

/* Pastille émoji inline en tête de carte pilier (hub Collèges, pilier UPB) */
#page-container .cnep-card-pillar span.cnep-emoji-tile {
	margin-bottom: 16px;
}

/* Membres du bureau UPB (et_pb_team_member en .cnep-card-person) :
   nom en couleur d'entité, fonction italique douce, module centré */
#page-container .cnep-card-person.et_pb_team_member {
	background: transparent;
	text-align: center;
}
#page-container .cnep-card-person.et_pb_team_member h4.et_pb_module_header {
	color: var(--entity-primary);
	padding-top: 12px;
	padding-bottom: 0;
}
#page-container .cnep-card-person .et_pb_member_position {
	font-style: italic;
	color: var(--cnep-ink-soft);
	font-size: 14px;
}
/* Le portrait du module équipe hérite du geste n&b → couleur (11.14) via
   .cnep-card-person img ; on borne juste la hauteur du wrapper Divi */
#page-container .cnep-card-person.et_pb_team_member .et_pb_team_member_image {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Passe UPB conversion (13/07/2026) — compléments STRICTEMENT nécessaires aux
   3 pages UPB (Nous rejoindre, Actualités UPB, Contact UPB) : adaptation des
   classes v2 au DOM réel des modules Divi. Aucune couleur en dur hors tokens.
   -------------------------------------------------------------------------- */

/* Flux Actualités UPB : les articles de la grille et_pb_blog deviennent de
   vraies cartes (image + date + extrait) posées sur la section tonale — la
   grille de l'accueil (.cnep-news__grid seule) reste, elle, sans fond */
#page-container .cnep-card-work.et_pb_blog_grid_wrapper article.et_pb_post {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	overflow: hidden;
	padding-bottom: 24px;
}
#page-container .cnep-card-work.et_pb_blog_grid_wrapper article.et_pb_post .entry-featured-image-url {
	border-radius: 0;
	margin-bottom: 20px;
}
#page-container .cnep-card-work.et_pb_blog_grid_wrapper article.et_pb_post .entry-title,
#page-container .cnep-card-work.et_pb_blog_grid_wrapper article.et_pb_post .post-meta,
#page-container .cnep-card-work.et_pb_blog_grid_wrapper article.et_pb_post .post-content {
	padding-left: 24px;
	padding-right: 24px;
}

/* Bandeau de filtres visuels (non fonctionnels à ce stade — chips en spans,
   pas de JS custom) : rangée de chips espacées */
.cnep-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* Cartes de profil d'adhésion (colonnes .cnep-card-offer) : pastille émoji
   du blurb espacée du titre, pied « bulletin 2026 » en méta douce */
#page-container .cnep-card-offer .cnep-emoji-tile .et_pb_main_blurb_image {
	margin-bottom: 16px;
}
#page-container .cnep-card-offer .cnep-label-sm {
	color: var(--cnep-ink-soft);
}

/* --------------------------------------------------------------------------
   Passe UMM/UME (13/07/2026) — compléments STRICTEMENT nécessaires aux
   2 pages piliers UMM et UME : adaptation des composants 11.8 (collage) et
   11.12 (légende glass) au DOM réel des modules Divi. Aucune couleur en dur
   hors tokens.
   -------------------------------------------------------------------------- */

/* Hero UMM — colonne média : ancre l'encart glass (11.12) en bas-droite de
   l'image (spec §5.6-2) ; l'encart reste masqué ≤ 767 par le composant */
#page-container .et_pb_column.cnep-hero-media {
	position: relative;
}
#page-container .cnep-hero-media .cnep-glass-caption {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 2;
	margin: 0;
	max-width: 75%;
}

/* Collage éditorial (11.8) posé sur une COLONNE Divi : les modules enfants
   deviennent les cellules de la grille — on neutralise leurs marges de flux */
#page-container .et_pb_column.cnep-collage > .et_pb_module {
	margin-bottom: 0;
}
/* Cellule-carte inverse du collage (stat/charte) : padding interne, la règle
   14 existante ne couvrait que les colonnes .cnep-card--inverse */
#page-container .cnep-collage > .cnep-card--inverse {
	padding: 24px;
	display: flex;
	align-items: center;
}
/* Les images du collage remplissent leur cellule (ratios mixtes maîtrisés) */
#page-container .cnep-collage > .et_pb_image .et_pb_image_wrap,
#page-container .cnep-collage > .et_pb_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Technique A (13/07/2026) — habillage v2 des rendus SHORTCODES des modules
   métier (upb-cqp-manager, upb-travaux-manager), pages /upb/cqp/ et
   /upb/travaux/. Les feuilles des plugins (dépendance cnep-core-tokens)
   posent la structure ; on n'écrase ici que le nécessaire :
   - les variables déjà consommées par leurs CSS (avec repli) sont mappées
     sur les tokens v2, scope limité aux wrappers des shortcodes ;
   - titres/boutons sur la couleur d'ENTITÉ courante (sur les pages hôtes
     UPB, identique à --upb-primary ; suit l'entité ailleurs).
   Aucune couleur en dur hors tokens.
   -------------------------------------------------------------------------- */

/* Variables consommées par upb-cqp-public.css / upb-travaux-public.css */
.upb-cqp,
.upb-travaux {
	--upb-card-bg: var(--cnep-surface);
	--surface-container: var(--cnep-surface-low);
	--surface-container-high: var(--cnep-surface-high);
	--on-surface-variant: var(--cnep-ink-soft);
	--cnep-muted: var(--cnep-ink-soft);
}

/* Cartes : rayons et ombre ambiante v2 (papier posé, règle no-line) */
#page-container .upb-cqp-card,
#page-container .upb-travaux-card {
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
}

/* Titres de carte : serif éditorial v2 + couleur d'entité */
#page-container .upb-cqp-card__title,
#page-container .upb-travaux-card__title {
	font-family: "Noto Serif", Georgia, serif;
	color: var(--entity-primary);
}

/* Bouton « Plus d'informations » : geste bouton v2 (dégradé signature,
   rayon resserré) */
#page-container .upb-cqp-btn,
#page-container .upb-travaux-btn {
	background: var(--entity-gradient, var(--entity-primary));
	color: var(--entity-on-primary);
	border-radius: var(--cnep-radius-sm);
}

/* Texte courant des cartes en encre douce */
#page-container .upb-cqp-card__excerpt,
#page-container .upb-travaux-card__excerpt {
	color: var(--cnep-ink-soft);
}

/* --- Habillage esthétique CQP « carte certificat » (19/07/2026) -------------
   Filet d'accent d'entité en tête, statut remonté près du titre (flex order),
   chips collèges teintés, extrait à hauteur homogène, bouton pleine largeur,
   survol qui soulève. Aucune couleur en dur (tokens charte). */
#page-container .upb-cqp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1.75rem 1.25rem 1.25rem; /* la réserve basse n'est plus utile */
	transition: transform 300ms ease, box-shadow 300ms ease;
}
/* Filet dégradé signature en haut de carte (repère « certification ») */
#page-container .upb-cqp-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--entity-gradient, var(--entity-primary));
}
#page-container .upb-cqp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cnep-shadow-soft-lg);
}
#page-container .upb-cqp-card__title {
	order: 1;
	text-align: left;
	font-size: 1.25rem;
	line-height: 1.3;
}
#page-container .upb-cqp-card__badges {
	order: 2;
	justify-content: flex-start;
}
/* Chips collèges : pastilles teintées d'entité (au lieu du badge sombre) */
#page-container .upb-cqp-card .upb-cqp-badge {
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-weight: 600;
}
/* Statut : remonté sous les chips, pastille pilule à point coloré */
#page-container .upb-cqp-status {
	position: static;
	order: 3;
	align-self: flex-start;
	margin: 0.15rem 0 0.35rem;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
#page-container .upb-cqp-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
/* Extrait : hauteur homogène entre cartes (line-clamp) + pousse le pied en bas */
#page-container .upb-cqp-card__excerpt {
	order: 4;
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#page-container .upb-cqp-card__replaced {
	order: 4;
	font-style: italic;
	color: var(--cnep-ink-soft);
}
/* Action : bouton pleine largeur, ancré en bas de carte */
#page-container .upb-cqp-card__action {
	order: 5;
	margin-top: 1rem;
}
#page-container .upb-cqp-btn {
	width: 100%;
	justify-content: center;
	padding: 0.6rem 1rem;
}

/* --------------------------------------------------------------------------
   Technique B (13/07/2026) — système d'actualités : habillage des templates
   Theme Builder « Article » (spec §5.10), « Interview » (§5.11) et
   « Archives » (catégories/étiquettes), + chips-filtres cliquables des hubs.
   Complète les composants 11.19 (.cnep-article-*) et 11.13 (.cnep-news-row).
   Aucune couleur en dur hors tokens.
   -------------------------------------------------------------------------- */

/* Hero article : le module Post Title porte l'image à la une en fond
   (featured_placement=background → classe Divi .et_pb_featured_bg).
   .cnep-article-hero (11.19) pose déjà min-height/flex/voile papier. */
#page-container .et_pb_post_title.cnep-article-hero {
	width: 100%;
	background-size: cover;
	/* Ancrage haut : le hero est très large (≈ 2,7:1) alors que les images à la
	   une sont souvent des portraits. Un cadrage centré décapitait le sujet
	   (cf. « Message de Régine Ferrère »). On garde le tiers supérieur, là où
	   se trouve le visage, et le voile papier ::after protège la lisibilité. */
	background-position: 50% 22%;
	padding: 0;
}
@media (min-width: 981px) {
	#page-container .et_pb_post_title.cnep-article-hero {
		min-height: 65vh; /* ~70vh spec, garde le pli lisible en 1350px */
		/* Format imposé (2:1) : sans lui la hauteur du hero suit celle de la
		   fenêtre, donc le rognage de l'image à la une change d'un écran à
		   l'autre (sur portable bas de gamme le sujet était décapité).
		   min-height reste le plancher : la plus grande des deux valeurs gagne. */
		aspect-ratio: 2 / 1;
	}
}
/* Contenu du hero calé sur la grille des pages (90 % / 1280px) */
#page-container .cnep-article-hero .et_pb_title_container {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 160px 0 48px;
}
/* H1 serif italique sur le voile papier (encre, comme la maquette) */
#page-container .cnep-article-hero h1.entry-title {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 32px; /* ≤ 767 (spec §5.10) */
	line-height: 1.2;
	color: var(--cnep-ink);
	padding-bottom: 12px;
}
@media (min-width: 981px) {
	#page-container .cnep-article-hero h1.entry-title {
		font-size: 48px;
	}
}
/* Ligne méta (catégorie + date) : étiquette Manrope, liens couleur d'entité */
#page-container .cnep-article-hero .et_pb_title_meta_container,
#page-container .cnep-interview-title .et_pb_title_meta_container {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-article-hero .et_pb_title_meta_container a,
#page-container .cnep-interview-title .et_pb_title_meta_container a {
	color: var(--entity-primary);
}

/* Titre d'interview : serif italique couleur primaire (spec §5.11-1) */
#page-container .cnep-interview-title h1.entry-title {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	color: var(--entity-primary);
	padding-bottom: 12px;
}
@media (min-width: 981px) {
	#page-container .cnep-interview-title h1.entry-title {
		font-size: 44px;
	}
}
/* Exergue d'interview (extrait réel du post) : citation .cnep-quote (§3)
   réduite + filet gauche ghost — prime sur la neutralisation générique des
   blockquotes .cnep-quote (passe UPB cœur) */
#page-container .cnep-interview-exergue blockquote.cnep-quote {
	border-left: 2px solid var(--cnep-border-ghost);
	padding: 0 0 0 24px;
	font-size: 18px;
	line-height: 1.6;
}

/* Titre d'archive (catégorie/étiquette) : registre display serif */
#page-container .cnep-archive-title h1.entry-title {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.2;
	color: var(--cnep-ink);
}
@media (min-width: 981px) {
	#page-container .cnep-archive-title h1.entry-title {
		font-size: 48px;
	}
}

/* Mots-clés dynamiques de l'aside : liens rendus par le champ dynamique
   post_tags (pas de classe possible sur chaque <a>) → geste chip (§4.2) */
#page-container .cnep-article-tags a {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 4px 14px;
	border-radius: var(--cnep-radius-pill);
	background: var(--cnep-surface-low);
	border: 1px solid var(--cnep-border-ghost);
	color: var(--cnep-ui-ink-soft);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}
#page-container .cnep-article-tags a:hover {
	background: var(--cnep-surface-high);
	color: var(--entity-primary);
}

/* Corps d'article : intertitres serif italiques (le reste vient de 11.19 :
   largeur 70ch + blockquote signature ; lettrine = classe .cnep-dropcap à
   poser dans le contenu) */
#page-container .cnep-article-body h2,
#page-container .cnep-article-body h3 {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	color: var(--cnep-ink);
	padding-top: 16px;
}

/* Navigation article précédent/suivant (module et_pb_post_nav) : boutons
   tonals, cohérents avec .cnep-pagination (§8) */
#page-container .cnep-post-nav {
	margin-bottom: 40px;
}
#page-container .cnep-post-nav span a {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--cnep-radius);
	background: var(--cnep-surface);
	color: var(--cnep-ink);
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	font-size: 14px;
	transition: background-color 200ms ease, color 200ms ease;
}
#page-container .cnep-post-nav span a:hover {
	background: var(--cnep-surface-high);
	color: var(--entity-primary);
}

/* Pagination native du Blog (archives + fils) : reprise du geste
   .cnep-pagination sur le rendu et_pb_blog (.pagination .alignleft/right) */
#page-container .cnep-news-row + .pagination a,
#page-container .cnep-news-row .pagination a,
#page-container .cnep-news__grid .pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: var(--cnep-radius);
	background: var(--cnep-surface-low);
	color: var(--cnep-ui-ink);
	font-weight: 600;
	transition: background-color 200ms ease, color 200ms ease;
}
#page-container .cnep-news-row + .pagination a:hover,
#page-container .cnep-news-row .pagination a:hover,
#page-container .cnep-news__grid .pagination a:hover {
	background: var(--entity-primary);
	color: var(--entity-on-primary);
}

/* Portrait d'interview (image à la une en aside) : cadre arrondi ; le geste
   n&b → couleur vient de .cnep-card-person (11.14) */
#page-container .cnep-sticky-col .cnep-card-person img {
	border-radius: var(--cnep-radius-lg);
	width: 100%;
}

/* Aside méta : sous la grille l'espacement redevient vertical ≤ 980
   (la colonne passe au-dessus/en-dessous selon le template, spec §5.10-2) */
@media (max-width: 980px) {
	#page-container .cnep-article-meta {
		margin-bottom: 24px;
	}
}

/* --------------------------------------------------------------------------
   Passe Base documentaire v2 (13/07/2026) — page UPB Ressources
   professionnelles (id 56), maquette « stitch-base-documentaire ».
   Layout Divi SPECIALTY : sidebar « Collèges UPB » sticky (1_4) + contenu
   (3_4). Réutilise .cnep-side-nav (11.2, chips scrollables ≤ 980),
   .cnep-sticky-col (11.11), .cnep-card-resource (11.17), .cnep-chip (§6),
   .cnep-panel/-dark (11.16), .cnep-doc-row (11.7), .cnep-field--underline
   (§8). Les rangées internes sont des .et_pb_row_inner : les règles :has()
   de §7.9 (scopées .et_pb_row) ne s'y appliquent pas — la grille des
   familles est un vrai display:grid (égalisation native par rangée).
   Aucune couleur en dur hors tokens.
   -------------------------------------------------------------------------- */

/* Le JS de Divi pose overflow-y:hidden EN INLINE sur #page-container, ce qui
   casse position:sticky (le sticky se cale alors sur un conteneur qui ne
   défile pas). !important requis pour battre le style inline ; scopé à la
   page 56 pour ne rien changer ailleurs. */
body.page-id-56 #page-container {
	overflow-y: visible !important;
}

/* Rangée hôte du specialty : gabarit contenu (90 % / 1280) + flex ≥ 981
   (align-items:flex-start requis pour le position:sticky de la sidebar) */
#page-container .cnep-docs-layout > .et_pb_row {
	width: 90%;
	max-width: 1280px;
}
@media (min-width: 981px) {
	#page-container .cnep-docs-layout > .et_pb_row {
		display: flex;
		align-items: flex-start;
	}
}
/* Les rangées internes occupent toute la colonne de contenu */
#page-container .cnep-docs-layout .et_pb_row_inner {
	width: 100%;
	max-width: none;
}

/* Sidebar : titre de panneau (pas d'item « actif » : on est sur la page
   Ressources, pas sur une page collège) */
#page-container .cnep-side-nav__titre {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--entity-primary);
	margin: 0 20px 2px;
}
#page-container .cnep-side-nav__sous-titre {
	display: block;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.03em;
	color: var(--cnep-ink-soft);
	margin: 0 20px 16px;
}
.cnep-side-nav__emoji {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}
@media (max-width: 980px) {
	#page-container .cnep-side-nav__sous-titre {
		display: none; /* mode chips : le sous-titre encombre */
	}
	#page-container .cnep-side-nav__titre {
		margin: 0 4px 8px;
		font-size: 16px;
	}
}

/* Barre de filtres : chips familles + champ mots-clés + compteur.
   Progressive enhancement : sans JS les chips restent de simples ancres. */
#page-container .cnep-filtres__legende {
	display: block;
	margin-bottom: 12px;
}
#page-container .cnep-filtres__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
#page-container .cnep-filtres .cnep-chip {
	font-size: 13px;
	padding: 6px 16px;
}
/* Chip active : couleur d'entité (repère « sur quel périmètre », charte §2) */
#page-container .cnep-filtres .cnep-chip--active {
	background: var(--entity-primary);
	border-color: var(--entity-primary);
	color: var(--entity-on-primary);
}
#page-container .cnep-filtres__champ {
	display: block;
	max-width: 360px;
}
.cnep-filtres__champ input[type="text"] {
	width: 100%;
}
#page-container .cnep-filtres__compteur {
	display: block;
	margin-top: 8px;
	min-height: 16px;
	color: var(--cnep-ink-soft);
}
/* Message « aucun résultat » (créé par JS, posé dans la grille) */
#page-container .cnep-filtres__vide {
	grid-column: 1 / -1;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	padding: 24px;
	color: var(--cnep-ink-soft);
	margin: 0;
}

/* Utilitaire a11y : libellé lisible par lecteur d'écran uniquement */
.cnep-visuallyhidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Ancres de familles : dégager le header sticky au scroll */
#page-container [id^="famille-"],
#page-container #familles {
	scroll-margin-top: 120px;
}

/* Lien uppercase souligné des cartes documentaires (geste maquette) */
.cnep-link-doc {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--entity-primary);
	text-decoration: none;
	padding-bottom: 2px;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--entity-primary) 30%, transparent);
	transition: box-shadow 200ms ease;
	white-space: nowrap;
}
#page-container .cnep-link-doc:hover {
	color: var(--entity-primary);
	box-shadow: inset 0 -1px 0 var(--entity-primary);
}
/* Pied de carte .cnep-link-doc calé en bas (complète §7.9-3) */
#page-container .et_pb_column.cnep-card .et_pb_text_inner > p:has(.cnep-link-doc):last-child {
	margin-top: auto;
	margin-bottom: 0;
}

/* Carte vedette Convention collective : image + voile entité + pied méta */
#page-container .cnep-featured-doc {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cnep-featured-doc__media {
	position: relative;
}
.cnep-featured-doc__media > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* Voile dégradé couleur d'entité (équivalent from-primary/80 maquette) */
.cnep-featured-doc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--entity-primary) 82%, transparent), transparent 62%);
}
.cnep-featured-doc__body {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	z-index: 1; /* au-dessus du voile ::after */
}
#page-container .cnep-featured-doc__body h2 {
	font-size: 26px;
	line-height: 34px;
	color: #ffffff;
	margin: 10px 0 6px;
}
#page-container .cnep-featured-doc__body p {
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 52ch;
}
#page-container .cnep-featured-doc__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 16px 24px;
	margin-top: auto; /* pied calé en bas quand la carte est étirée */
}
#page-container .cnep-featured-doc__pied .cnep-label-sm {
	margin: 0;
	color: var(--cnep-ink-soft);
}

/* Rangée vedette ≥ 981 : les deux cartes à la même hauteur (esprit §7.9),
   l'image de la vedette absorbe la différence */
@media (min-width: 981px) {
	#page-container .cnep-ligne-vedette {
		display: flex;
		align-items: stretch;
	}
	#page-container .cnep-ligne-vedette > .et_pb_column {
		display: flex;
		flex-direction: column;
	}
	#page-container .cnep-ligne-vedette > .et_pb_column > .et_pb_text {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}
	#page-container .cnep-ligne-vedette > .et_pb_column > .et_pb_text > .et_pb_text_inner {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}
	#page-container .cnep-ligne-vedette .cnep-featured-doc {
		flex: 1 1 auto;
	}
	#page-container .cnep-featured-doc__media {
		flex: 1 1 auto;
		min-height: 300px;
	}
	.cnep-featured-doc__media > img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* Grille des familles : 8 blurbs .cnep-card-resource, enfants directs de la
   colonne interne → display:grid (3 / 2 / 1 colonnes), hauteurs égalisées
   nativement par rangée, et le filtre JS (display:none) refait couler la
   grille sans trous */
#page-container .et_pb_column.cnep-grille-familles.cnep-grille-familles {
	/* classe doublée : bat le display:flex générique de §7.9 (:has, même
	   spécificité) quel que soit l'ordre d'évaluation */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
#page-container .cnep-grille-familles > .et_pb_module {
	margin-bottom: 0;
}
@media (max-width: 980px) {
	#page-container .et_pb_column.cnep-grille-familles.cnep-grille-familles {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 767px) {
	#page-container .et_pb_column.cnep-grille-familles.cnep-grille-familles {
		grid-template-columns: 1fr;
	}
}
/* Chip de statut calée en bas de chaque carte (pied, cf. §7.9-3) */
#page-container .cnep-grille-familles .cnep-card-resource .et_pb_blurb_content {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#page-container .cnep-grille-familles .cnep-card-resource .et_pb_blurb_container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#page-container .cnep-grille-familles .cnep-card-resource .et_pb_blurb_description {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#page-container .cnep-grille-familles .cnep-card-resource .et_pb_blurb_description > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 12px;
}

/* Panneau « Nos commissions paritaires » : sigle couleur entité + nom
   complet italique + description courte, en 2 colonnes (1 en mobile) */
.cnep-com-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
	margin-top: 24px;
}
@media (max-width: 767px) {
	.cnep-com-grid {
		grid-template-columns: 1fr;
	}
}
.cnep-com__sigle {
	display: block;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--entity-primary);
}
#page-container .cnep-com p {
	margin: 0 0 8px;
}
#page-container .cnep-com .cnep-com__nom {
	font-style: italic;
	color: var(--cnep-ink-soft);
	margin: 4px 0 8px;
}
#page-container .cnep-com p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   14 (suite). Technique C — Espace adhérent + pages légales (13/07/2026)
   --------------------------------------------------------------------------
   14.C1  Espace adhérent (/mon-compte/, page 209).
          CONSTAT DOM : la page ne rend PAS le shortcode [woocommerce_my_account]
          mais les shortcodes du plugin upb-espace-adherent 0.1.8
          ([upb_member_dashboard] + [upb_member_account]). Les classes
          WooCommerce .woocommerce-MyAccount-* n'existent donc pas dans le
          DOM ; on habille les classes RÉELLES du plugin (.upb-front,
          .upb-panel-front, .upb-btn…) par-dessus son public.css (chargé après
          ce fichier → on scope à body.woocommerce-account, spécificité
          supérieure ; !important uniquement là où le plugin en pose).
          La sidebar de la maquette espace_adh_rent (navigation Dashboard /
          Certifications / Documents…) n'a pas de DOM support côté plugin :
          reporté au Membership Module V2 (voir réponse de mission).
   14.C2  Pages légales (mentions-legales, politique-de-confidentialite) :
          bandeau brouillon + corps typographique.
   Aucune couleur en dur hors tokens.
   ========================================================================== */

/* --- 14.C1.a Boîte « Connexion requise » (rendu déconnecté) --------------- */
/* Les DEUX shortcodes rendent chacun la même boîte quand on est déconnecté :
   on masque le doublon du 2e module code (le 2e module ne rend une
   .upb-member-box QUE dans ce cas — connecté, il rend .upb-front). */
body.woocommerce-account .et_pb_code + .et_pb_code .upb-member-box {
	display: none;
}
/* Carte charte : surface papier, ombre ambiante, plus de bordure crème */
body.woocommerce-account .upb-member-box {
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 40px;
	text-align: center;
	background: var(--cnep-surface);
	border: 0;
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
}
body.woocommerce-account .upb-member-box h3 {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	color: var(--cnep-ink);
	margin: 0 0 12px;
}
body.woocommerce-account .upb-member-box p {
	color: var(--cnep-ink-soft);
	margin: 0 0 24px;
}

/* --- 14.C1.b Boutons du plugin → anatomie .cnep-btn (§4.1) ---------------- */
/* Primaire : dégradé signature d'entité, radius 4px (plus de pilule),
   Manrope 600 uppercase. Le plugin force color:#fff !important (compatible :
   nos dégradés d'entité sont vérifiés AA blanc, §1). */
body.woocommerce-account .upb-btn {
	padding: 12px 24px;
	border: 0;
	border-radius: var(--cnep-radius-sm);
	background: var(--entity-gradient);
	box-shadow: var(--cnep-shadow-soft);
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: filter 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
body.woocommerce-account .upb-btn:hover {
	filter: brightness(1.08);
}
/* Secondaire : fantôme (ghost ring 30 %) — !important pour battre le
   color:… !important du public.css du plugin */
body.woocommerce-account .upb-btn.secondary {
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--entity-primary) 30%, transparent);
	color: var(--entity-primary) !important;
}
body.woocommerce-account .upb-btn.secondary:hover {
	filter: none;
	background: var(--entity-primary-tint);
	box-shadow: inset 0 0 0 1px var(--entity-primary);
}

/* --- 14.C1.c Hero adhérent + carte référence ------------------------------ */
/* Remplace le dégradé crème/pêche du plugin par une carte papier charte */
body.woocommerce-account .upb-front-hero {
	background: var(--cnep-surface);
	border: 0;
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
}
body.woocommerce-account .upb-front-hero h2 {
	font-family: "Noto Serif", Georgia, serif;
	color: var(--cnep-ink);
}
body.woocommerce-account .upb-front-hero p {
	color: var(--cnep-ink-soft);
}
/* Kicker : label uppercase couleur d'entité (convention .cnep-eyebrow).
   p.upb-kicker : le kicker est un <p> DANS le hero — il faut égaler la
   spécificité de « .upb-front-hero p » ci-dessus (l'ordre fait le reste). */
body.woocommerce-account p.upb-kicker {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--entity-primary);
}
/* Référence adhérent (#UPB-2026-0001) : pastille tint d'entité (maquette
   « Identifiant »), plus de pilule blanche ombrée */
body.woocommerce-account .upb-member-ref {
	padding: 12px 20px;
	border-radius: var(--cnep-radius);
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: none;
}

/* --- 14.C1.d Cartes stats + panneaux --------------------------------------- */
/* Stats (Statut / Collège / Expiration) : cartes en creux (tonal low),
   la hiérarchie vient de la couche, plus de bordure ni d'ombre portée */
body.woocommerce-account .upb-front-card {
	background: var(--cnep-surface-low);
	border: 0;
	border-radius: var(--cnep-radius-lg);
	box-shadow: none;
	transition: background-color 300ms ease;
}
body.woocommerce-account .upb-front-card:hover {
	background: var(--cnep-surface-high); /* tonal shift */
}
body.woocommerce-account .upb-front-card span {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
body.woocommerce-account .upb-front-card strong {
	font-family: "Noto Serif", Georgia, serif;
	color: var(--cnep-ink);
}
/* Panneaux (Adhésion, Identité, Structure, commandes…) : cartes papier */
body.woocommerce-account .upb-panel-front {
	background: var(--cnep-surface);
	border: 0;
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
}
body.woocommerce-account .upb-panel-front h3 {
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	color: var(--cnep-ink);
}
body.woocommerce-account .upb-muted {
	color: var(--cnep-ink-soft);
}
body.woocommerce-account .upb-link {
	color: var(--entity-primary);
	font-weight: 600;
}
body.woocommerce-account .upb-link:hover {
	text-decoration: underline;
}

/* --- 14.C1.e Listes de documents / résumé du bulletin ---------------------- */
/* Rangées de ressources : convention .cnep-doc-row (fond tonal, hover shift) */
body.woocommerce-account .upb-doc-list a {
	background: var(--cnep-surface-low);
	border: 0;
	border-radius: var(--cnep-radius);
	transition: background-color 200ms ease;
}
body.woocommerce-account .upb-doc-list a:hover {
	background: var(--cnep-surface-high);
}
body.woocommerce-account .upb-doc-list span {
	font-weight: 600;
	color: var(--cnep-ink);
}
body.woocommerce-account .upb-doc-list small {
	color: var(--cnep-ink-soft);
}
/* Items du résumé « Mes réponses au bulletin » : mêmes creux tonals */
body.woocommerce-account .upb-summary-item {
	background: var(--cnep-surface-low);
	border: 0;
	border-radius: var(--cnep-radius);
}
body.woocommerce-account .upb-summary-item span {
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
/* Photo du représentant de collège */
body.woocommerce-account .rep-photo img {
	border-radius: var(--cnep-radius-lg);
}

/* --- 14.C1.f Tableau des commandes WooCommerce ----------------------------- */
body.woocommerce-account .upb-orders-table-wrap {
	background: var(--cnep-surface);
	border: 0;
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
}
body.woocommerce-account .upb-orders-table th {
	background: var(--cnep-surface-low);
	border-bottom: 0; /* la rupture tonale suffit (règle no-line) */
	font-family: "Manrope", sans-serif;
	color: var(--cnep-ink-soft);
}
body.woocommerce-account .upb-orders-table td {
	border-bottom: 1px solid var(--cnep-border-ghost); /* ghost border (§0.1) */
	color: var(--cnep-ink);
}
/* Statut de commande : pastille tint d'entité, uppercase Manrope
   (statut neutre — le vert/orange reste réservé aux .upb-alert ci-dessous) */
body.woocommerce-account .upb-order-status {
	border-radius: var(--cnep-radius-sm);
	background: var(--entity-primary-tint);
	color: var(--entity-primary);
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- 14.C1.g Alertes du plugin → conventions statuts (§6) ------------------ */
body.woocommerce-account .upb-alert {
	border: 0;
	border-radius: var(--cnep-radius);
	font-family: "Manrope", sans-serif;
	font-weight: 600;
}
body.woocommerce-account .upb-alert.success {
	background: var(--cnep-status-valid-bg);
	color: var(--cnep-status-valid-text);
}
body.woocommerce-account .upb-alert.warning {
	background: var(--cnep-status-progress-bg);
	color: var(--cnep-status-progress-text);
}
body.woocommerce-account .upb-alert.error {
	background: var(--cnep-status-expired-bg);
	color: var(--cnep-status-expired-text);
}

/* --- 14.C1.h Formulaire de facturation → champs ghost (conv. .cnep-field) -- */
body.woocommerce-account .upb-form label {
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	color: var(--cnep-ink);
}
body.woocommerce-account .upb-form input,
body.woocommerce-account .upb-form textarea,
body.woocommerce-account .upb-form select {
	background: var(--cnep-surface-low);
	border: 1px solid var(--cnep-border-ghost);
	border-radius: var(--cnep-radius);
	padding: 12px 16px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	color: var(--cnep-ink);
	font-weight: 400;
}
body.woocommerce-account .upb-form input:focus,
body.woocommerce-account .upb-form textarea:focus,
body.woocommerce-account .upb-form select:focus {
	border-color: var(--entity-primary);
	outline: 2px solid var(--entity-primary);
	outline-offset: 0;
}
/* Pied de formulaire : le filet plein devient ghost (règle no-line) */
body.woocommerce-account .upb-form-footer {
	border-top: 1px solid var(--cnep-border-ghost);
}
body.woocommerce-account .upb-form-footer p {
	color: var(--cnep-ink-soft);
}

/* --- 14.C1.i Notices WooCommerce natives (retours checkout/endpoints) ------ */
/* Peu probables sur cette page (pas de [woocommerce_my_account]) mais WP peut
   en afficher au retour d'une commande : mêmes conventions statuts */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	border: 0;
	border-radius: var(--cnep-radius);
	font-family: "Manrope", sans-serif;
}
body.woocommerce-account .woocommerce-message {
	background: var(--cnep-status-valid-bg);
	color: var(--cnep-status-valid-text);
}
body.woocommerce-account .woocommerce-info {
	background: var(--cnep-status-progress-bg);
	color: var(--cnep-status-progress-text);
}
body.woocommerce-account .woocommerce-error {
	background: var(--cnep-status-expired-bg);
	color: var(--cnep-status-expired-text);
}

/* --- 14.C2 Pages légales ---------------------------------------------------- */
/* Bandeau « Document de travail » : carte inverse discrète, compacte */
#page-container .cnep-draft-banner {
	background: var(--cnep-badge-bg);
	border-radius: var(--cnep-radius-lg);
	padding: 16px 24px;
}
#page-container .cnep-draft-banner p {
	margin: 0;
	color: var(--cnep-badge-text);
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
}
/* Emplacements « [À compléter par le client : …] » : statut orange visible
   (conv. .cnep-status--progress), en inline dans le corps de texte */
#page-container .cnep-article-body .cnep-status--progress {
	white-space: normal; /* les mentions à compléter peuvent être longues */
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 14px;
	line-height: 20px;
	vertical-align: baseline;
}
/* Corps légal : listes et blocs de coordonnées aérés dans .cnep-article-body */
#page-container .cnep-article-body ul {
	padding-left: 20px;
}
#page-container .cnep-article-body li {
	margin-bottom: 8px;
}

/* ==========================================================================
   15. Responsive & équilibre (Technique D) — passe du 13/07/2026
   ==========================================================================
   Audit JS complet (getBoundingClientRect / scrollWidth / getComputedStyle)
   des 27 gabarits du site aux 3 largeurs 375 / 768 / 1280 :
   - Rangées de cartes inégales : corrigées par les règles GÉNÉRIQUES §7.9
     (rangée Divi en flex stretch + colonne-carte en flex column + pieds de
     carte en margin-top:auto). 33 rangées fautives sur 16 pages → 0 après.
   - Débordement horizontal (scrollWidth > clientWidth) : aucun constaté.
   - Images à hauteur nulle : aucune constatée.
   - Textes tronqués (scrollHeight > clientHeight, hors line-clamp
     volontaire des extraits blog) : aucun constaté.
   Les grilles plugin (.upb-cqp-grid, .upb-travaux-list) s'égalisent déjà
   via leur display:grid natif — aucun correctif nécessaire.
   AUCUN correctif par page n'a été requis : ce bloc reste volontairement
   vide et sert de point d'ancrage pour d'éventuels cas résiduels futurs. */

/* ==========================================================================
   16. Héritage ancien site — page UPB (18/07/2026)
   ==========================================================================
   Reprise de la FORME de l'ancienne page UPB : bloc président dans le hero,
   section « Message du président », fiches du bureau en cartes complètes
   (société, bio, réseaux sociaux). Aucune couleur en dur : tokens charte. */

/* Bloc président du hero (colonne droite du .cnep-hero__row) */
#page-container .cnep-hero__president-img {
	text-align: center;
}
#page-container .cnep-hero__president-img img {
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
/* Bouton « Rejoignez-nous » centré sous le bloc président */
#page-container .cnep-hero__row .cnep-hero__president + .et_pb_button_module_wrapper,
#page-container .cnep-hero__row .et_pb_button_module_wrapper:last-child {
	text-align: center;
}
#page-container .cnep-hero__president {
	text-align: center;
}
#page-container .cnep-hero__president h2 {
	color: var(--entity-primary);
	margin-bottom: 4px;
}
#page-container .cnep-hero__president .cnep-eyebrow {
	display: block;
	margin: 4px 0 12px;
}

/* Photo latérale d'intro (« Qu'est-ce que l'UPB ») : carte photo portrait
   posée à droite du texte, arrondie et centrée verticalement. */
#page-container .cnep-side-photo {
	display: flex;
	align-items: center;
	height: 100%;
}
#page-container .cnep-side-photo img {
	width: 100%;
	/* Format naturel de la photo : le 16/9 imposé rognait 12 % de chaque côté,
	   donc les deux personnes des extrémités, dès que le visuel fourni était
	   plus panoramique. L'intention (tout le monde visible) est mieux servie
	   sans recadrage du tout. */
	height: auto;
	object-fit: contain;
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
	display: block;
}

/* Portrait du message du président : cadre arrondi + ombre ambiante */
#page-container .cnep-portrait-president {
	text-align: center;
}
#page-container .cnep-portrait-president img {
	max-width: 300px;
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft);
}
/* Signature sous le portrait : petites capitales à l'encre d'entité */
#page-container .cnep-signature p {
	text-align: center;
	color: var(--entity-primary);
	font-variant: small-caps;
	letter-spacing: 0.04em;
	font-weight: 700;
	font-size: 20px;
}

/* Fiches du bureau : le team member devient une vraie carte (v2 no-line :
   fond surface sur section --low, ombre ambiante, hover en élévation) */
#page-container .et_pb_team_member.cnep-card-person {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
	padding: 20px;
	transition: transform 300ms ease;
}
#page-container .et_pb_team_member.cnep-card-person:hover {
	transform: translateY(-2px);
}
#page-container .cnep-card-person h4.et_pb_module_header {
	color: var(--entity-primary);
}
#page-container .cnep-card-person .et_pb_member_position {
	color: var(--cnep-ink-soft);
}
#page-container .cnep-card-person .et_pb_member_social_links a {
	color: var(--entity-primary);
}

/* Médaillons photo (banque d'images IA, 18/07/2026 — IMAGES-SITE-PROMPTS.md) :
   remplacent les émojis des grandes tuiles. Recadrage rond (photos carrées,
   sujet centré) — choix client (les cartes collèges restent carrées). */
#page-container .et_pb_module.cnep-illus .et_pb_main_blurb_image img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--cnep-shadow-soft);
}
@media (min-width: 981px) {
	#page-container .et_pb_module.cnep-illus .et_pb_main_blurb_image img {
		width: 128px;
		height: 128px;
	}
}
/* Version inline (cartes collèges dans les textes) : image SANS arrondi
   propre. On neutralise aussi la pastille tonale rose (.cnep-emoji-tile) qui
   enrobait l'image (fond rosé + padding + rayon hérités de l'émoji). */
#page-container img.cnep-illus-inline {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}
#page-container span.cnep-emoji-tile:has(> img.cnep-illus-inline) {
	display: block;
	padding: 0;
	background: none;
	border-radius: 0;
	margin: 0;
}

/* En CARTE pilier (collèges UPB + hub Collèges) : l'image remplit le HAUT de
   la carte, bord à bord — elle déborde le padding (40px) de la carte, qui
   clippe ses coins arrondis (overflow hidden). Aspect large type en-tête. */
#page-container .cnep-card-pillar:has(img.cnep-illus-inline) {
	overflow: hidden;
}
#page-container .cnep-card-pillar span.cnep-emoji-tile:has(> img.cnep-illus-inline) {
	margin: -40px -40px 24px;
}
#page-container .cnep-card-pillar img.cnep-illus-inline {
	aspect-ratio: 3 / 2;
}

/* En PANNEAU large (bloc intro « Le collège Formation ») : image rectangulaire
   simple, non pleine largeur, sans débordement. */
#page-container .cnep-panel img.cnep-illus-inline {
	max-width: 420px;
	aspect-ratio: 3 / 2;
	margin: 0 0 24px;
}

/* ==========================================================================
   17. Lot visuel CNEP (19/07/2026) — accueil + qui-sommes-nous
   ========================================================================== */

/* --- 17.1 Cartes métiers façon collège (qui-sommes-nous) : image pleine
   en-tête au lieu du médaillon rond (.cnep-illus--cover) ------------------- */
#page-container .et_pb_module.cnep-illus--cover.cnep-card {
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
}
#page-container .cnep-illus--cover .et_pb_main_blurb_image {
	margin: 0;
}
#page-container .et_pb_module.cnep-illus--cover .et_pb_main_blurb_image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	max-width: none;
}
#page-container .cnep-illus--cover .et_pb_blurb_container {
	padding: 18px 24px 26px;
}

/* --- 17.2 Mot de la présidente (accueil) --------------------------------- */
@media (min-width: 981px) {
	#page-container .cnep-row-vcenter {
		display: flex;
		align-items: center;
	}
}
#page-container .cnep-president-msg h2 {
	color: var(--entity-primary);
	margin-bottom: 4px;
}
#page-container .cnep-president-msg .cnep-eyebrow {
	display: block;
	margin-bottom: 8px;
}
/* Nom de la présidente mis en avant */
#page-container .cnep-president-msg h2 {
	font-size: 40px;
	line-height: 1.15;
}
/* Extrait du message en pull-quote serif, guillemet décoratif d'entité */
#page-container .cnep-president-quote {
	position: relative;
	margin: 16px 0 24px;
	padding-left: 28px;
	font-family: "Noto Serif", Georgia, serif;
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--cnep-ink);
	max-width: 60ch;
}
#page-container .cnep-president-quote::before {
	content: "\201C";
	position: absolute;
	left: -6px;
	top: -10px;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 56px;
	line-height: 1;
	color: color-mix(in srgb, var(--entity-primary) 40%, transparent);
}
/* Portrait mis en avant (variante --lg) : plus grand, cadre franc */
#page-container .cnep-portrait-president--lg img {
	max-width: 380px;
	border-radius: var(--cnep-radius-2xl);
}

/* --- 17.3 Newsletter : bandeau dégradé d'entité, plus attractif ---------- */
#page-container .cnep-newsletter__row {
	background: var(--entity-gradient, var(--entity-primary));
	border-radius: var(--cnep-radius-2xl);
	padding: 40px 48px;
	box-shadow: var(--cnep-shadow-soft);
	align-items: center;
}
#page-container .cnep-newsletter__row .cnep-headline-md,
#page-container .cnep-newsletter__row p {
	color: var(--entity-on-primary);
}
#page-container .cnep-newsletter__cta {
	text-align: right;
}
@media (max-width: 980px) {
	#page-container .cnep-newsletter__cta {
		text-align: left;
		margin-top: 16px;
	}
}
/* Bouton inversé (blanc) lisible sur le dégradé */
body #page-container .cnep-newsletter__row .cnep-btn--primary.et_pb_button {
	background: var(--cnep-surface);
	color: var(--entity-primary);
}
body #page-container .cnep-newsletter__row .cnep-btn--primary.et_pb_button:hover {
	background: var(--cnep-surface-low);
	filter: none;
}

/* --- 17.4 Chiffres animés (« Le secteur en chiffres », « Focus UPB ») ---- */
/* Entrée montée + zoom léger, PUIS le JS (main.js) fait le décompte de
   .cnep-stats__value. La transform rend l'arrivée perceptible même quand le
   décompte est rapide. */
#page-container .cnep-stats__value {
	font-variant-numeric: tabular-nums;
	transition: opacity 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.cnep-stats__value.cnep-count-armed {
	opacity: 0;
	transform: translateY(18px) scale(0.94);
}
.cnep-stats__value.cnep-count-done {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	#page-container .cnep-stats__value {
		transition: none;
	}
	.cnep-stats__value.cnep-count-armed {
		transform: none;
	}
}

/* ==========================================================================
   18. Fonds de hero photographiques (19/07/2026)
   ==========================================================================
   Chaque page pose sa photo de hero (uploads/2026/07/heros/) EN FOND de la
   section .cnep-hero, atténuée par un voile crème dégradé (« fondu ») : le
   texte reste lisible à gauche, la photo est aperçue à droite. Image et voile
   sous le contenu (z-index). Fichiers déployés via git ; règles par page-id. */
#page-container .cnep-hero {
	position: relative;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}
#page-container .cnep-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		var(--cnep-bg) 20%,
		color-mix(in srgb, var(--cnep-bg) 80%, transparent) 62%,
		color-mix(in srgb, var(--cnep-bg) 60%, transparent) 100%
	);
}
#page-container .cnep-hero > .et_pb_row {
	position: relative;
	z-index: 1;
}
@media (max-width: 980px) {
	/* Mobile : le texte passe au-dessus de toute la largeur → voile plus couvrant */
	#page-container .cnep-hero::before {
		background: linear-gradient(
			180deg,
			var(--cnep-bg) 45%,
			color-mix(in srgb, var(--cnep-bg) 72%, transparent) 100%
		);
	}
}

/* --- 18.1 Image par page --------------------------------------------------- */
body.page-id-52 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-embellissement-des-ongles.jpg); }
body.page-id-39 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-presentation.jpg); }
body.page-id-60 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-nous-rejoindre.jpg); }
body.page-id-58 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-commissions.jpg); }
body.page-id-27 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-upb.jpg); }
body.page-id-29 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-umm.jpg); }
body.page-id-31 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-ume.jpg); }
body.page-id-44 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-institut.jpg); }
body.page-id-62 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-actualites-upb.jpg); }
body.page-id-54 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-dermopigmentation.jpg); }
body.page-id-42 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-colleges-metiers.jpg); }
body.page-id-35 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-contact.jpg); }
body.page-id-64 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-contact-upb.jpg); }
body.page-id-56 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-ressources-professionnelles.jpg); }
body.page-id-46 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-spa.jpg); }
body.page-id-37 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-actualites.jpg); }
body.page-id-48 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-bronzage-en-cabine.jpg); }
body.page-id-1148 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-cqp.jpg); }
body.page-id-24 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-qui-sommes-nous.jpg); }
body.page-id-50 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-embellissement-du-regard.jpg); }
body.page-id-33 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-partenaires.jpg); }
body.page-id-1149 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-travaux.jpg); }
body.page-id-21 #page-container .cnep-hero { background-image: url(/wp-content/uploads/2026/07/heros/hero-accueil.jpg); }

/* --- 17.5 Finition cartes illustrées (survol) — unification entités -------- */
#page-container .cnep-card.cnep-illus:hover {
	box-shadow: var(--cnep-shadow-soft-lg);
}

/* --- 19. Verrou base documentaire (adhérents) ------------------------------ */
/* v2 « teasing » (specs agents marketing + design, 01/08/2026) : le contenu
   des cartes reste net et lisible (on ne voile jamais ce qui vend). Le signal
   réservé = liseré dégradé d'entité 3px en tête de carte + badge texte
   « Accès adhérent » à cadenas, qui s'inverse en plein d'entité au survol.
   body.cnep-docs-locked est posé par inc/verrou-documentaire.php. */
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	/* Liseré signature : dégradé d'entité en bande de 3px via background-image ;
	   le fond de carte reste porté par background-color (tonal shift au hover). */
	background-color: var(--cnep-surface);
	background-image: var(--entity-gradient, linear-gradient(135deg, var(--cnep-primary), var(--cnep-secondary)));
	background-size: 100% 3px;
	background-repeat: no-repeat;
	background-position: top left;
	transition: background-color 300ms ease, box-shadow 300ms ease;
}
/* Badge texte « Accès adhérent » posé DANS LE FLUX du blurb, juste avant le
   titre (container::before) : même endroit sur toutes les cartes quel que
   soit le contenu. Anatomie .cnep-card-resource__premium, tint d'entité 8 %. */
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) .et_pb_blurb_container {
	position: relative;
}
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) .et_pb_blurb_container::before {
	content: "Accès adhérent";
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 12px 4px 30px; /* 30px à gauche : réserve du cadenas */
	border-radius: var(--cnep-radius-sm);
	background: var(--entity-primary-tint, color-mix(in srgb, var(--cnep-primary) 8%, #fff));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--entity-primary, var(--cnep-primary)) 25%, transparent);
	/* AA : primaire assombri de 15 % d'encre sur le tint, toutes entités */
	color: color-mix(in srgb, var(--entity-primary, var(--cnep-primary)) 85%, var(--cnep-ink));
	font-family: "Manrope", sans-serif;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
/* Cadenas 14px : SVG en mask, calé dans le badge (coin haut-gauche du
   container) ; teinte via background-color, déclinaison d'entité automatique. */
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) .et_pb_blurb_container::after {
	content: "";
	position: absolute;
	top: 5px;   /* (24px badge - 14px icône) / 2 */
	left: 10px;
	width: 14px;
	height: 14px;
	background-color: color-mix(in srgb, var(--entity-primary, var(--cnep-primary)) 85%, var(--cnep-ink));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	transition: background-color 200ms ease;
}
/* Survol / focus clavier : tonal shift (§11.17) + élévation (§17.5), et le
   badge s'inverse en plein d'entité (le cadenas passe en blanc). */
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):hover,
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):focus-visible {
	background-color: var(--cnep-surface-low);
	box-shadow: var(--cnep-shadow-soft-lg);
}
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):hover .et_pb_blurb_container::before,
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):focus-visible .et_pb_blurb_container::before {
	background: var(--entity-primary, var(--cnep-primary));
	color: var(--entity-on-primary, #fff);
	box-shadow: none;
}
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):hover .et_pb_blurb_container::after,
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):focus-visible .et_pb_blurb_container::after {
	background-color: var(--entity-on-primary, #fff);
}
body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre):focus-visible {
	outline: 2px solid var(--entity-primary, var(--cnep-primary));
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre),
	body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) .et_pb_blurb_container::before,
	body.cnep-docs-locked #page-container .et_pb_module.cnep-card-resource:not(.cnep-doc-libre) .et_pb_blurb_container::after {
		transition: none;
	}
}

/* Modale « Réservé aux adhérents » (construite par main.js). */
.cnep-verrou-modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* au-dessus du header fixe Divi */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.cnep-verrou-modal[hidden] {
	display: none;
}
.cnep-verrou-modal__voile {
	position: absolute;
	inset: 0;
	background: rgb(34 27 24 / 0.55);
	backdrop-filter: blur(2px);
}
.cnep-verrou-modal__boite {
	position: relative;
	z-index: 1;
	max-width: 480px;
	width: 100%;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl);
	box-shadow: var(--cnep-shadow-soft-lg);
	padding: 44px 40px 40px;
	text-align: center;
}
/* Pastille cadenas : dégradé signature d'entité (icône en 1re couche, dessus). */
.cnep-verrou-modal__cadenas {
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
		var(--entity-gradient, var(--cnep-primary));
}
/* Kicker : surtitre capitales couleur d'entité au-dessus du titre. */
.cnep-verrou-modal__kicker {
	margin: 0 0 8px;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--entity-primary, var(--cnep-primary));
}
/* Panneau bénéfices : 3 puces cochées dans un creux surface-low. */
.cnep-verrou-modal__benefices {
	list-style: none;
	margin: 0 auto 28px;
	padding: 16px 20px;
	max-width: 360px;
	text-align: left;
	display: grid;
	gap: 10px;
	background: var(--cnep-surface-low);
	border-radius: var(--cnep-radius);
}
.cnep-verrou-modal__benefices li {
	position: relative;
	padding-left: 26px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: var(--cnep-ink-soft);
}
.cnep-verrou-modal__benefices li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	background-color: var(--entity-primary, var(--cnep-primary));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cnep-verrou-modal__boite h2 {
	font-family: "Noto Serif", Georgia, "Times New Roman", serif;
	font-size: 26px;
	line-height: 32px;
	color: var(--cnep-ink);
	margin: 0 0 12px;
}
.cnep-verrou-modal__boite p {
	font-size: 15px;
	line-height: 24px;
	color: var(--cnep-ink-soft);
	margin: 0 0 20px;
}
.cnep-verrou-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.cnep-verrou-modal__fermer {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--cnep-surface-low);
	color: var(--cnep-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.cnep-verrou-modal__fermer:hover,
.cnep-verrou-modal__fermer:focus-visible {
	background: var(--cnep-surface-mid);
}
/* CTA de la modale : réplique des .cnep-btn (§5), qui sont scopés sous
   #page-container et ne s'appliquent donc pas à la modale appendue à body. */
.cnep-verrou-modal__actions a.cnep-btn {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--cnep-radius-sm);
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.cnep-verrou-modal__actions a.cnep-btn--primary {
	background: var(--entity-gradient, var(--cnep-primary));
	color: var(--entity-on-primary, #fff);
	box-shadow: var(--cnep-shadow-soft);
}
.cnep-verrou-modal__actions a.cnep-btn--primary:hover {
	filter: brightness(1.08);
}
.cnep-verrou-modal__actions a.cnep-btn--ghost {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--entity-primary, var(--cnep-primary)) 30%, transparent);
	color: var(--entity-primary, var(--cnep-primary));
}
.cnep-verrou-modal__actions a.cnep-btn--ghost:hover {
	background-color: var(--entity-primary-tint, var(--cnep-surface-low));
	box-shadow: inset 0 0 0 1px var(--entity-primary, var(--cnep-primary));
}
@media (max-width: 480px) {
	.cnep-verrou-modal { padding: 16px; }
	.cnep-verrou-modal__boite { padding: 32px 24px 28px; }
	.cnep-verrou-modal__boite h2 { font-size: 22px; line-height: 28px; }
	.cnep-verrou-modal__actions { flex-direction: column; }
	.cnep-verrou-modal__actions a.cnep-btn { width: 100%; text-align: center; }
}

/* --- 19.b Carte documentaire en ACCÈS LIBRE (.cnep-doc-libre) -------------- */
/* Variante non verrouillée : badge « Accès libre » vert statut, MÊME anatomie
   et MÊME position que le badge « Accès adhérent » (équilibre de la grille),
   coche au lieu du cadenas, pas de liseré ni de popup. Le CTA de bas de carte
   (.cnep-doc-libre__cta) est ancré en pied via la chaîne flex du blurb. */
#page-container .et_pb_module.cnep-card-resource.cnep-doc-libre {
	position: relative;
	cursor: pointer; /* toute la carte redirige vers le document (main.js) */
}
/* Badge « Accès libre » dans le flux, juste avant le titre : géométrie et
   position identiques au badge réservé (équilibre de la grille). */
#page-container .cnep-doc-libre .et_pb_blurb_container {
	position: relative;
}
#page-container .cnep-doc-libre .et_pb_blurb_container::before {
	content: "Accès libre";
	display: inline-block;
	align-self: flex-start; /* le container est en flex column (chaîne CTA) */
	margin: 0 0 10px;
	padding: 4px 12px 4px 30px; /* 30px à gauche : réserve de la coche */
	border-radius: var(--cnep-radius-sm);
	background: var(--cnep-status-valid-bg);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cnep-status-valid-text) 25%, transparent);
	color: var(--cnep-status-valid-text);
	font-family: "Manrope", sans-serif;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Coche 14px en mask, mêmes coordonnées que le cadenas du badge réservé. */
#page-container .cnep-doc-libre .et_pb_blurb_container::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 10px;
	width: 14px;
	height: 14px;
	background-color: var(--cnep-status-valid-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
/* Survol / focus : même élévation que les cartes réservées (affordance). */
#page-container .et_pb_module.cnep-card-resource.cnep-doc-libre:hover,
#page-container .et_pb_module.cnep-card-resource.cnep-doc-libre:focus-visible {
	background: var(--cnep-surface-low);
	box-shadow: var(--cnep-shadow-soft-lg);
}
#page-container .et_pb_module.cnep-card-resource.cnep-doc-libre:focus-visible {
	outline: 2px solid var(--cnep-status-valid-text);
	outline-offset: 3px;
}
/* Ancrage du CTA en pied de carte : chaîne flex à travers le DOM du blurb. */
#page-container .et_pb_module.cnep-card-resource.cnep-doc-libre,
#page-container .cnep-doc-libre .et_pb_blurb_content,
#page-container .cnep-doc-libre .et_pb_blurb_container,
#page-container .cnep-doc-libre .et_pb_blurb_description {
	display: flex;
	flex-direction: column;
}
#page-container .cnep-doc-libre .et_pb_blurb_content,
#page-container .cnep-doc-libre .et_pb_blurb_container,
#page-container .cnep-doc-libre .et_pb_blurb_description {
	flex: 1 1 auto;
}
#page-container .cnep-doc-libre .cnep-doc-libre__cta {
	margin-top: auto;
	padding-top: 16px;
}
/* Bouton CTA de carte : gamme .cnep-btn primaire, format compact. */
#page-container .cnep-doc-libre .cnep-btn-carte {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--cnep-radius-sm);
	background: var(--entity-gradient, var(--cnep-primary));
	color: var(--entity-on-primary, #fff);
	box-shadow: var(--cnep-shadow-soft);
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 200ms ease;
}
#page-container .cnep-doc-libre .cnep-btn-carte:hover,
#page-container .cnep-doc-libre .cnep-btn-carte:focus-visible {
	filter: brightness(1.08);
	color: var(--entity-on-primary, #fff);
}

/* --- 20. Responsive mobile : menu de navigation ----------------------------- */
/* Le déroulant mobile du header Theme Builder héritait de la largeur de la
   colonne qui porte le burger (109px) : on l'ancre au viewport, sous le
   header (64px), avec le vocabulaire de la DA (liseré d'entité, ombre douce,
   Manrope, séparateurs surface-low). */
@media (max-width: 980px) {
	/* ul.et_mobile_menu : l'élément de type bat, à classes égales, la règle
	   « fond transparent » du CSS critique du module Theme Builder
	   (.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu !important). */
	.et-l--header .et_pb_menu ul.et_mobile_menu,
	.et-l--header .et_pb_menu ul.et_mobile_menu ul {
		background-color: var(--cnep-surface, #FFFFFF) !important;
	}
	.et-l--header .et_pb_menu .et_mobile_menu {
		position: fixed !important;
		top: 64px;
		left: 0 !important;
		right: 0;
		width: auto !important;
		min-width: 0 !important;
		max-height: calc(100vh - 64px) !important;
		overflow-y: auto !important;
		margin: 0;
		padding: 8px 20px 20px;
		border-top: 3px solid var(--entity-primary, var(--cnep-primary));
		box-shadow: var(--cnep-shadow-soft-lg);
		z-index: 99999;
	}
	.et-l--header .et_mobile_menu li a {
		font-family: "Manrope", sans-serif;
		font-size: 15px;
		line-height: 22px;
		font-weight: 600;
		color: var(--cnep-ink) !important;
		padding: 12px 4px !important;
		border-bottom: 1px solid var(--cnep-surface-low);
	}
	.et-l--header .et_mobile_menu li:last-child a {
		border-bottom: 0;
	}
	.et-l--header .et_mobile_menu li a:hover,
	.et-l--header .et_mobile_menu li.current-menu-item > a,
	.et-l--header .et_mobile_menu li.current-menu-ancestor > a {
		color: var(--entity-primary, var(--cnep-primary)) !important;
		background: transparent;
	}
	/* Zone tactile confortable pour le burger. */
	.et-l--header .mobile_menu_bar {
		padding: 8px;
	}
}

/* ==========================================================================
   21. Passe design du 02/08/2026 — Accueil & Qui sommes-nous
   ========================================================================== */

/* --- 21.1 Accueil : air sous la grille écosystème ------------------------- */
/* Les cartes collaient à la bande brand « Focus sur l'UPB ». La section est
   marquée et_pb_section_sticky et Divi lui impose `padding-bottom: 0
   !important` (divi-dynamic-critical, ≥ 981) : seul un !important équivalent
   peut rétablir le rythme standard des sections (64 → 112 desktop). */
#page-container .cnep-section.cnep-bento {
	padding-bottom: 64px !important;
}
@media (min-width: 981px) {
	#page-container .cnep-section.cnep-bento {
		padding-bottom: 112px !important;
	}
}

/* --- 21.2 Qui sommes-nous : carte UMM (pilier 2n) visible ------------------ */
/* L'alternance tonale des piliers donne --cnep-surface-mid à la carte du
   milieu : la teinte EXACTE du fond de la section sur cette page, carte
   invisible. Elle passe en surface blanche (le lift naturel de la charte). */
body.page-id-24 #page-container .cnep-card-pillar:nth-child(2n) {
	background: var(--cnep-surface);
	box-shadow: var(--cnep-shadow-soft);
}
body.page-id-24 #page-container .cnep-card-pillar:nth-child(2n):hover {
	background: var(--cnep-surface-high);
}

/* --- 21.3 Qui sommes-nous : « Aller plus loin » en bandes entités ---------- */
/* Les 3 liens « Découvrir l'UPB / l'UMM / l'UME » deviennent des BANDES
   VERTICALES au dégradé de leur entité, logo présenté sur une plaque blanche
   arrondie — la section fait découvrir les marques, pas seulement naviguer.
   Zéro modification de layout Divi : la row est mise en grille, ses colonnes
   dissoutes (display:contents), les boutons stylés par [href]. Les 3 autres
   liens (Ressources / Nous rejoindre / Nous contacter) restent des boutons,
   rangés sous les bandes. */
body.page-id-24 #page-container .et_pb_row:has(a.cnep-btn[href$="/ume/"]) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
body.page-id-24 #page-container .et_pb_row:has(a.cnep-btn[href$="/ume/"]) > .et_pb_column {
	display: contents;
}
body.page-id-24 #page-container .et_pb_row:has(a.cnep-btn[href$="/ume/"]) .et_pb_button_module_wrapper {
	margin: 0;
	width: 100%;
}
@media (min-width: 981px) {
	body.page-id-24 #page-container .et_pb_row:has(a.cnep-btn[href$="/ume/"]) {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}
	/* L'ordre DOM (UPB, UMM, UME, Ressources, Rejoindre, Contacter) place
	   naturellement les 3 bandes en rang 1 et les 3 boutons en rang 2. */
}

/* La bande elle-même : colonne flex, plaque logo en tête, libellé en pied. */
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"],
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"],
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 300px;
	padding: 36px 24px 32px;
	border: 0;
	border-radius: var(--cnep-radius-xl, 16px);
	color: #FFFFFF;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: var(--cnep-shadow-soft);
	transition: transform 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"] {
	background: linear-gradient(165deg, var(--upb-primary), var(--upb-secondary));
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"] {
	background: linear-gradient(165deg, var(--umm-primary), var(--umm-secondary));
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"] {
	background: linear-gradient(165deg, var(--ume-primary), var(--ume-secondary));
}
/* Plaque blanche porte-logo (le logo est un PNG couleur sur transparent :
   la plaque garantit sa lisibilité sur le dégradé). */
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"]::before,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"]::before,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"]::before {
	content: "";
	display: block;
	/* Divi pose opacity:0 + position:absolute sur les ::before de bouton
	   (mécanique d'icône au survol) : on rétablit un bloc réel et visible. */
	position: static;
	opacity: 1;
	margin: auto auto 0; /* pousse la plaque au centre, le libellé reste en pied */
	width: 128px;
	height: 128px;
	line-height: 0;
	border-radius: 20px;
	background-color: #FFFFFF;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72%;
	box-shadow: 0 12px 28px rgba(29, 27, 32, 0.18);
}
/* main.css est dans themes/divi-cnep-child/assets/css/ : 4 niveaux pour
   remonter à wp-content/ puis redescendre dans uploads/ (même convention
   que login.css). */
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"]::before {
	background-image: url("../../../../uploads/2026/07/logo-upb-2026.png");
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"]::before {
	background-image: url("../../../../uploads/2026/07/logo-umm-2026.png");
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"]::before {
	background-image: url("../../../../uploads/2026/07/logo-ume-2026.png");
}
/* Le chevron Divi du bouton n'a pas sa place sur une bande. */
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"]::after,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"]::after,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"]::after {
	display: none;
}
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"]:hover,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"]:hover,
body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"]:hover {
	transform: translateY(-4px);
	box-shadow: var(--cnep-shadow-soft-lg);
	filter: brightness(1.06);
	color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"],
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"],
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"] {
		transition: none;
	}
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/upb/"]:hover,
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/umm/"]:hover,
	body.page-id-24 #page-container a.cnep-btn.cnep-btn--ghost[href$="/ume/"]:hover {
		transform: none;
	}
}

/* ==========================================================================
   22. Page Contact refondue (02/08/2026) — deux colonnes type agence
   ==========================================================================
   Formulaire en carte blanche (2/3) + colonne coordonnées/engagements (1/3).
   Les champs Instance (radio) et Collèges (checkbox, logique conditionnelle
   Divi : visible si Instance = UPB) sont rendus en CHIPS. Les module_class
   des et_pb_contact_field ne sont PAS imprimés par Divi : on cible les
   [data-id] stables du markup. */

/* --- 22.1 Cartes des deux colonnes ---------------------------------------- */
#page-container .cnep-contact-main {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl, 16px);
	box-shadow: var(--cnep-shadow-soft);
	padding: 40px;
}
#page-container .cnep-contact-aside .cnep-card {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl, 16px);
	box-shadow: var(--cnep-shadow-soft);
	padding: 28px;
	margin-bottom: 24px;
}
@media (max-width: 980px) {
	#page-container .cnep-contact-main {
		padding: 24px 20px;
	}
}

/* Coordonnées : items étiquette + valeur, séparés par un filet tonal */
#page-container .cnep-contact-coords .cnep-contact-coord {
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cnep-surface-low);
	font-size: 15px;
	line-height: 23px;
}
#page-container .cnep-contact-coords .cnep-contact-coord:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
#page-container .cnep-contact-coords .cnep-contact-coord strong {
	display: block;
	margin-bottom: 2px;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-contact-coords .cnep-contact-coord a {
	color: var(--cnep-primary);
	text-decoration: none;
}
#page-container .cnep-contact-coords .cnep-contact-coord a:hover {
	text-decoration: underline;
}

/* Engagements : liste cochée */
#page-container .cnep-contact-promises ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#page-container .cnep-contact-promises li {
	position: relative;
	padding: 0 0 0 30px;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 23px;
}
#page-container .cnep-contact-promises li:last-child {
	margin-bottom: 0;
}
#page-container .cnep-contact-promises li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cnep-status-valid-bg);
	color: var(--cnep-status-valid-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* --- 22.2 Chips instance / collèges ---------------------------------------- */
/* Divi imprime label + options_title : on garde le titre d'options seul */
#page-container .et_pb_contact_field[data-id="instance"] > .et_pb_contact_form_label,
#page-container .et_pb_contact_field[data-id="colleges"] > .et_pb_contact_form_label {
	display: none;
}
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_options_title,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_options_title {
	display: block;
	margin-bottom: 10px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_options_list,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_options_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_radio,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_checkbox {
	margin: 0;
}
/* L'input reste accessible (focus clavier) mais invisible : le chip = label */
#page-container .et_pb_contact_field[data-id="instance"] input[type="radio"],
#page-container .et_pb_contact_field[data-id="colleges"] input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_radio label,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_checkbox label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--cnep-surface-low);
	color: var(--cnep-ink);
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}
/* Le <i> d'icône radio/checkbox Divi n'a pas sa place dans un chip */
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_radio label i,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_checkbox label i {
	display: none;
}
#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_radio label:hover,
#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_checkbox label:hover {
	background: var(--cnep-surface-high);
}
#page-container .et_pb_contact_field[data-id="instance"] input:checked + label,
#page-container .et_pb_contact_field[data-id="colleges"] input:checked + label {
	/* Tokens d'entité : bordeaux sur les pages CNEP, framboise sur Contact UPB. */
	background: linear-gradient(135deg, var(--entity-primary), var(--entity-secondary));
	color: #FFFFFF;
}
#page-container .et_pb_contact_field[data-id="instance"] input:focus-visible + label,
#page-container .et_pb_contact_field[data-id="colleges"] input:focus-visible + label {
	outline: 2px solid var(--entity-primary);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	#page-container .et_pb_contact_field[data-id="instance"] .et_pb_contact_field_radio label,
	#page-container .et_pb_contact_field[data-id="colleges"] .et_pb_contact_field_checkbox label {
		transition: none;
	}
}

/* ==========================================================================
   23. Bouton d'adhésion flottant (02/08/2026) — toutes pages front
   ==========================================================================
   Imprimé par inc/adhesion-flottante.php en wp_footer. Libellé complet sur
   desktop, pictogramme rond seul en mobile, toujours en bas à droite.
   Fond aux couleurs de l'entité courante (body.entity-*) : dégradé AA
   plafonné --entity-gradient, ombre teintée --entity-primary. */
.cnep-join-fab {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 99990; /* sous le menu mobile déroulé (99999), au-dessus du reste */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border-radius: 10px;
	background: var(--entity-gradient, linear-gradient(135deg, var(--upb-primary, #D90D58), #B00B48));
	color: #FFFFFF;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--entity-primary, #D90D58) 35%, transparent);
	transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.cnep-join-fab:hover,
.cnep-join-fab:focus {
	color: #FFFFFF;
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--entity-primary, #D90D58) 40%, transparent);
}
.cnep-join-fab:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}
.cnep-join-fab__icon {
	display: none;
	line-height: 0;
}
.cnep-join-fab__icon svg {
	width: 24px;
	height: 24px;
}
/* Mobile : pictogramme rond seul, même ancrage bas-droite */
@media (max-width: 980px) {
	.cnep-join-fab {
		width: 56px;
		height: 56px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}
	.cnep-join-fab__icon {
		display: block;
	}
	.cnep-join-fab__label {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cnep-join-fab {
		transition: none;
	}
	.cnep-join-fab:hover,
	.cnep-join-fab:focus {
		transform: none;
	}
}

/* ==========================================================================
   24. Passe design du 02/08/2026 — lot 2 (UPB & boutons)
   ========================================================================== */

/* --- 24.1 Alignement réel des boutons Divi centrés ------------------------- */
/* Divi rend le wrapper en inline-block dimensionné au contenu : son
   text-align:center est alors sans effet. En bloc, le centrage s'applique
   (bouton « Rejoignez-nous ! » du hero UPB, et tout bouton centré à venir). */
#page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center {
	display: block;
	float: none;
	text-align: center;
}

/* --- 24.2 Hero UPB : photo du président agrandie --------------------------- */
/* Demande du 02/08 : « moyennement plus grande » — 320 → 420px. */
#page-container .cnep-hero__president-img img {
	max-width: 420px;
}

/* --- 24.3 Logo d'instance en tête des cartes « au sein de la CNEP » -------- */
/* Pages UMM et UME : chaque carte pilier UPB/UMM/UME/CNEP porte le logo de
   son instance, centré au-dessus du titre. */
#page-container .cnep-instance-logo {
	margin: 0 0 16px;
	text-align: center;
}
#page-container .cnep-instance-logo img {
	display: inline-block;
	height: 84px;
	width: auto;
}

/* ==========================================================================
   25. Carrousels partenaires (02/08/2026) — page Partenaires
   ==========================================================================
   Chaque famille défile en continu : petites cartes logo + nom. Le logo est
   un monogramme stylisé en attendant les vrais logos (un <img> posé dans
   .cnep-partner-card__logo prendra sa place sans retouche CSS). Le JS
   (main.js §marquee) duplique la piste pour une boucle sans couture et cale
   la durée sur la largeur ; pause au survol ; prefers-reduced-motion =
   défilement manuel (overflow-x). */
#page-container .cnep-partner-carousel {
	overflow: hidden;
	margin: 8px 0;
}
#page-container .cnep-partner-carousel__track {
	display: flex;
	width: max-content;
}
#page-container .cnep-partner-carousel--anime .cnep-partner-carousel__track {
	animation: cnep-marquee var(--cnep-marquee-duration, 30s) linear infinite;
}
#page-container .cnep-partner-carousel--anime:hover .cnep-partner-carousel__track {
	animation-play-state: paused;
}
#page-container .cnep-partner-carousel__group {
	display: flex;
	gap: 16px;
	padding-right: 16px; /* prolonge le gap entre la fin d'un groupe et le suivant */
}
@keyframes cnep-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	#page-container .cnep-partner-carousel {
		overflow-x: auto;
	}
	#page-container .cnep-partner-carousel--anime .cnep-partner-carousel__track {
		animation: none;
	}
}

/* La petite carte partenaire */
#page-container .cnep-partner-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	width: 148px;
	padding: 18px 12px 16px;
	background: var(--cnep-surface-low);
	border-radius: var(--cnep-radius-lg);
	transition: background-color 250ms ease;
}
#page-container .cnep-partner-card:hover {
	background: var(--cnep-surface-high);
}
#page-container .cnep-partner-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--cnep-surface);
	box-shadow: var(--cnep-shadow-soft);
	font-family: "Noto Serif", Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--entity-primary);
	letter-spacing: 0.02em;
	overflow: hidden;
}
#page-container .cnep-partner-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}
#page-container .cnep-partner-card__name {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
	text-align: center;
}

/* ==========================================================================
   26. Liste complète des actualités (02/08/2026) — page Actualités
   ==========================================================================
   Shortcode [cnep_liste_actualites] (inc/actualites-liste.php) : filtres en
   chips (instance, rubrique), tri par date, grille de cartes dans la DA. */
#page-container .cnep-actus__filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-bottom: 12px;
}
#page-container .cnep-actus__groupe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
#page-container .cnep-actus__legende {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
	margin-right: 2px;
}
#page-container .cnep-actus__chip {
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--cnep-surface);
	color: var(--cnep-ink);
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	cursor: pointer;
	box-shadow: var(--cnep-shadow-soft);
	transition: background-color 200ms ease, color 200ms ease;
}
#page-container .cnep-actus__chip:hover {
	background: var(--cnep-surface-high);
}
#page-container .cnep-actus__chip.est-actif {
	background: linear-gradient(135deg, var(--entity-primary), var(--entity-secondary));
	color: #FFFFFF;
}
#page-container .cnep-actus__chip:focus-visible {
	outline: 2px solid var(--entity-primary);
	outline-offset: 2px;
}
#page-container .cnep-actus__tri {
	border: 0;
	border-radius: 8px;
	background: var(--cnep-surface);
	box-shadow: var(--cnep-shadow-soft);
	padding: 8px 12px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	color: var(--cnep-ink);
}
#page-container .cnep-actus__compteur {
	margin: 0 0 20px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	color: var(--cnep-ink-soft);
}

/* Grille de cartes */
#page-container .cnep-actus__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 980px) {
	#page-container .cnep-actus__grille {
		grid-template-columns: 1fr;
	}
}
#page-container .cnep-actus__carte {
	display: flex;
	flex-direction: column;
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl, 16px);
	box-shadow: var(--cnep-shadow-soft);
	overflow: hidden;
	transition: box-shadow 250ms ease, transform 250ms ease;
}
#page-container .cnep-actus__carte:hover {
	transform: translateY(-3px);
	box-shadow: var(--cnep-shadow-soft-lg);
}
#page-container .cnep-actus__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
#page-container .cnep-actus__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page-container .cnep-actus__contenu {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}
#page-container .cnep-actus__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 8px;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-actus__rubrique {
	color: var(--entity-primary);
	font-weight: 700;
}
#page-container .cnep-actus__titre {
	margin: 0 0 8px;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 19px;
	line-height: 26px;
	font-weight: 700;
}
#page-container .cnep-actus__titre a {
	color: var(--cnep-ink);
	text-decoration: none;
	transition: color 200ms ease;
}
#page-container .cnep-actus__titre a:hover {
	color: var(--entity-primary);
}
#page-container .cnep-actus__extrait {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 22px;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-actus__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0; /* cale les badges en pied de carte */
}
#page-container .cnep-actus__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cnep-surface-low);
	font-family: "Manrope", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-actus__vide {
	margin: 24px 0 0;
	font-size: 15px;
	color: var(--cnep-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
	#page-container .cnep-actus__carte,
	#page-container .cnep-actus__chip {
		transition: none;
	}
	#page-container .cnep-actus__carte:hover {
		transform: none;
	}
}

/* ==========================================================================
   27. Gabarit collèges v2 (02/08/2026) — validé sur Embellissement des Ongles
   ==========================================================================
   Blocs communs aux 6 pages collèges : carte-portrait (représentant,
   vice-président — silhouette portrait-attente.svg en attendant les vraies
   photos), mot du représentant, emplacements pictos (picto-attente.svg). */

/* Carte portrait : photo 4/5, nom serif, rôle en étiquette */
#page-container .cnep-portrait-card {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl, 16px);
	box-shadow: var(--cnep-shadow-soft);
	padding: 16px 16px 20px;
	text-align: center;
}
#page-container .cnep-portrait-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--cnep-radius-lg, 12px);
	margin-bottom: 14px;
}
#page-container .cnep-portrait-card__nom {
	margin: 0 0 2px;
	font-family: "Noto Serif", Georgia, serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--cnep-ink);
}
#page-container .cnep-portrait-card__role {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--entity-primary);
}

/* Mot du représentant : panneau citation à côté du portrait */
#page-container .cnep-mot-representant {
	background: var(--cnep-surface);
	border-radius: var(--cnep-radius-xl, 16px);
	box-shadow: var(--cnep-shadow-soft);
	border-left: 4px solid var(--entity-primary);
	padding: 32px 36px;
	height: 100%;
	box-sizing: border-box;
}
#page-container .cnep-mot-representant blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: transparent;
}
#page-container .cnep-mot-representant blockquote p {
	font-family: "Noto Serif", Georgia, serif;
	font-size: 22px;
	line-height: 34px;
	font-style: italic;
	color: var(--cnep-ink);
}
#page-container .cnep-mot-representant__signature {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	color: var(--cnep-ink-soft);
}

/* Le portrait s'étire à la hauteur du panneau voisin (rangée flex) */
@media (min-width: 981px) {
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) {
		display: flex;
		align-items: stretch;
	}
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) > .et_pb_column {
		display: flex;
		flex-direction: column;
	}
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) > .et_pb_column > .et_pb_module {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   26. Bloc représentant v2 + rangées image/texte équilibrées (14/08/2026)
   ========================================================================== */
/* Les 2 CTA se posent côte à côte SOUS la citation : la colonne (mise en
   flex-column par la règle ci-dessus) repasse en rangée enveloppante, la
   citation occupe toute la largeur, les boutons suivent sur une ligne. */
@media (min-width: 981px) {
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) > .et_pb_column:has(> .cnep-mot-representant) {
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		column-gap: 16px;
	}
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) > .et_pb_column:has(> .cnep-mot-representant) > .cnep-mot-representant {
		flex: 0 0 100%;
		height: auto;
	}
	#page-container .et_pb_row:has(> .et_pb_column > .cnep-portrait-card) > .et_pb_column:has(> .cnep-mot-representant) > .et_pb_button_module_wrapper {
		flex: 0 0 auto;
		margin-right: 0;
	}
}

/* Rangées image + texte (hors hero) : centrage vertical des colonnes quand
   le visuel est plus haut que le texte : les grands collages fournis par
   les collèges ne laissent plus un vide sous le paragraphe voisin. */
@media (min-width: 981px) {
	#page-container .et_pb_section:not(.cnep-hero) .et_pb_row:has(> .et_pb_column > .et_pb_module.cnep-img-frame) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* ==========================================================================
   30. Articles importés de l'ancien site (20/10/2026)
   Le corps d'article est une carte blanche : la rangée document (11.7) et
   l'exergue y passent sur le fond tonal bas pour rester lisibles comme blocs.
   ========================================================================== */
#page-container .cnep-article-body a.cnep-doc-row,
#page-container .cnep-article-body blockquote {
	background: var(--cnep-surface-low);
}
#page-container .cnep-article-body a.cnep-doc-row:hover {
	background: var(--cnep-surface-high);
}
#page-container .cnep-article-body .cnep-panel {
	margin: 32px 0;
}
/* Figures d'images importées (communiqués, photos d'événements) : centrées,
   jamais agrandies au-delà de leur taille réelle, légende discrète. */
#page-container .cnep-article-body .cnep-article-figure {
	margin: 32px 0;
	text-align: center;
}
#page-container .cnep-article-body .cnep-article-figure__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: var(--cnep-radius-lg);
	box-shadow: var(--cnep-shadow-soft);
}
#page-container .cnep-article-body .cnep-article-figure figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--cnep-ink-soft);
}
#page-container .cnep-article-body .cnep-panel a.cnep-doc-row:last-child {
	margin-bottom: 0;
}