/* =========================================================================
   CIB Formation — couche de rafraichissement
   =========================================================================
   Ne modifie aucun contenu : uniquement mise en page, lisibilite, hierarchie
   et mouvement. Se superpose a Bricks et Core Framework, et s'appuie sur leurs
   variables existantes (--primary, --secondary, --space-*, --text-*, --radius-*)
   afin de rester coherent si la charte evolue.

   Pour tout retirer : supprimer le dossier mu-plugins/cib-refresh.
   ========================================================================= */

:root {
	/* Voile de contraste derive du violet de marque, pas un gris neutre :
	   les photos gardent ainsi une dominante coherente avec l'identite. */
	--cib-scrim-haut: rgba(31, 12, 44, 0.15);
	--cib-scrim-milieu: rgba(31, 12, 44, 0.52);
	--cib-scrim-bas: rgba(31, 12, 44, 0.74);

	--cib-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
	--cib-eleve: 0 10px 30px rgba(31, 12, 44, 0.28);
}

/* -------------------------------------------------------------------------
   1. BASE TYPOGRAPHIQUE
   Mesure : body est fixe a 15 px, et tous les paragraphes d'introduction en
   heritent. Or le jeton --text-m du systeme de design vaut clamp(1rem, ...,
   1.13rem), soit 16 a 18 px : la base contredisait la charte.

   Relever la base corrige d'un coup tous les textes herites, sans toucher aux
   blocs qui portent une taille explicite - ceux-la gardent la leur.
   ------------------------------------------------------------------------- */

/* Porte sur le contenu, pas sur body : appliquee globalement, l'augmentation
   emportait aussi la navigation de l'en-tete (dix entrees a 18 px) et les
   mentions du pied de page, ou 15 px reste la bonne echelle. */
main {
	font-size: var(--text-m, 1.0625rem);
}

/* -------------------------------------------------------------------------
   2. HEROS
   Trois problemes mesures : hauteur de 650 px qui repousse tout argument sous
   la ligne de flottaison, texte blanc sans voile sur photo claire, et bouton
   principal a 8 px de rembourrage vertical.
   ------------------------------------------------------------------------- */

/* Hauteur plafonnee : le visiteur atteint le premier argument sans scroller
   une fois et demie. Le clamp evite un heros ecrase sur petit ecran et
   demesure sur grand ecran. */
/*
 * Hauteur revue a la hausse sur demande, mais plafonnee par une contrainte
 * precise : le titre "Qui sommes-nous ?" qui suit immediatement doit rester
 * visible sans defiler. Le texte qui le suit, non.
 *
 * Calcul : en-tete 54 px + heros + marge haute de la section suivante (~48 px)
 * doit rester sous la hauteur de fenetre. A 74vh, sur une fenetre de 900 px,
 * cela donne 54 + 666 + 48 = 768 px : le titre apparait. Le plafond a 720 px
 * protege les tres grands ecrans, ou 74vh laisserait le titre hors champ.
 */
.brxe-efyvpm .brxe-slider-nested {
	height: clamp(420px, 64vh, 600px) !important;
}

@media (min-width: 768px) {
	.brxe-efyvpm .brxe-slider-nested {
		height: clamp(500px, 74vh, 720px) !important;
	}
}

/* Voile de contraste. Pose en pseudo-element pour ne pas ecraser l'image de
   fond posee par Bricks, et pour rester purement decoratif. */
.brxe-efyvpm .splide__slide {
	position: relative;
	isolation: isolate;
}

.brxe-efyvpm .splide__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		var(--cib-scrim-haut) 0%,
		var(--cib-scrim-milieu) 58%,
		var(--cib-scrim-bas) 100%
	);
}

/* Le contenu repasse au-dessus du voile. */
.brxe-efyvpm .splide__slide > * {
	position: relative;
	z-index: 1;
}

/* Titre : plus d'autorite, et l'ombre devient un simple appui puisque le
   voile fait desormais le travail de contraste. */
.brxe-efyvpm .brxe-heading {
	font-size: clamp(1.9rem, 4.4vw, 3.3rem) !important;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
	max-width: 20ch;
	margin-inline: auto;
}

/* Le minimum du clamp doit rester au-dessus de la taille d'origine (18,2 px
   sur mobile) : un clamp trop bas ferait retrecir le sous-titre au lieu de le
   renforcer. */
.brxe-efyvpm .brxe-text-basic {
	font-size: clamp(1.2rem, 1.9vw, 1.45rem) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
	max-width: 42ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   3. BOUTONS
   Cible tactile portee au-dessus de 44 px, et retour visuel au survol.
   ------------------------------------------------------------------------- */

/* Plancher de cible tactile. Mesure sur la page formation : un bouton
   descendait a 43 px, sous le seuil de 44 px recommande. Le minimum est pose
   sur la hauteur seule, sans imposer de rembourrage, pour ne pas deformer les
   boutons deja bien dimensionnes. */
.brxe-button,
.bricks-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition),
		background-color var(--cib-transition);
	will-change: transform;
}

.brxe-efyvpm .brxe-button {
	padding: 0.95em 2.4em !important;
	font-size: clamp(1rem, 1.5vw, 1.12rem) !important;
	font-weight: 700;
	letter-spacing: 0.015em;
	border-radius: var(--radius-full, 999rem);
	box-shadow: var(--cib-eleve);
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.brxe-button:hover,
.bricks-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(31, 12, 44, 0.34);
}

.brxe-button:active,
.bricks-button:active {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   4. RYTHME VERTICAL
   Constat mesure : 18 sections sur 19 portent exactement 79 px de rembourrage
   haut ET bas. L'espacement n'est donc pas irregulier, il est uniforme a
   l'exces. Deux consequences : deux sections voisines cumulent 158 px de vide,
   et un bandeau de titre respire autant qu'une section de 1400 px - donc rien
   ne se lit comme groupe.

   On introduit une hierarchie : l'ecart entre deux sections se resserre, et un
   bandeau de titre se rapproche du contenu qu'il annonce.
   ------------------------------------------------------------------------- */

/* Rembourrage fluide : 79 px fixes etaient disproportionnes sur mobile. */
main > .brxe-section {
	padding-block: clamp(2.25rem, 4.5vw, 4.5rem);
}

/* Sections consecutives : on evite l'addition des deux rembourrages.
   L'ecart passe d'environ 158 px a environ 110 px sur grand ecran. */
main > .brxe-section + .brxe-section {
	padding-top: clamp(1.25rem, 2.6vw, 2.5rem);
}

/* Le heros garde sa pleine hauteur : il n'a pas de rembourrage propre. */
main > .brxe-efyvpm {
	padding-block: 0;
}

/* Un bandeau qui ne contient qu'un titre annonce la section suivante :
   il doit s'en rapprocher nettement au lieu de flotter au milieu. */
main > section:has(> .brxe-heading:only-child),
main > section:has(> .brxe-container > .brxe-heading:only-child) {
	padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

/* ... et la section qui suit un tel bandeau ne doit pas rouvrir un grand
   ecart, sinon le titre reste orphelin. */
main > section:has(> .brxe-heading:only-child) + .brxe-section,
main > section:has(> .brxe-container > .brxe-heading:only-child) + .brxe-section {
	padding-top: clamp(0.5rem, 1.2vw, 1.25rem);
}

/* -------------------------------------------------------------------------
   5. BANDEAUX DE FORMATION
   Ce sont les blocs de conversion du site. Trois defauts mesures : titre blanc
   sans aucune ombre sur photo, trois appels a l'action de poids equivalent qui
   se neutralisent, et un troisieme bouton a 5 % d'opacite donc invisible.

   Le texte n'est pas touche : seuls la lisibilite et le poids visuel changent.
   Cible : les sections contenant un titre d'article, propres a ces bandeaux.
   ------------------------------------------------------------------------- */

main > section:has(.brxe-post-title) {
	position: relative;
	isolation: isolate;
}

/* Pas de voile ajoute ici : la mesure montre que Bricks applique deja un
   rgba(0,0,0,0.5) sur ces sections. En superposer un second assombrirait la
   photo sans gain de lisibilite. Seule l'ombre du titre est renforcee. */

main > section:has(.brxe-post-title) .brxe-post-title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Hierarchie des actions. L'achat est l'action commerciale : il prend le
   dessus par la taille et l'elevation, pas par la couleur - la charte reste
   inchangee. Le financement demeure lisible, le programme passe en tertiaire
   mais devient enfin visible sur photo. */
/* Unites absolues, pas em : le parent est a 15 px, donc un 1.05em aurait rendu
   le bouton d'achat plus petit que le bouton tertiaire a 18 px. */
main > section:has(.brxe-post-title) .btn.secondary {
	font-weight: 700;
	font-size: 1.2rem !important;
	padding: 0.85em 2.4em !important;
	min-height: 58px;
	box-shadow: 0 10px 26px rgba(31, 12, 44, 0.38);
}

/* Le bouton tertiaire redescend sous l'action commerciale. */
main > section:has(.brxe-post-title) .btn.light {
	font-size: 1rem !important;
}

main > section:has(.brxe-post-title) .btn.light {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	color: #fff !important;
	backdrop-filter: blur(3px);
}

main > section:has(.brxe-post-title) .btn.light:hover {
	background-color: rgba(255, 255, 255, 0.24) !important;
}

/* -------------------------------------------------------------------------
   6. CONTENU REDACTIONNEL
   S'applique aux articles, aux entrees de FAQ et aux formations, qui partagent
   tous l'element de contenu de Bricks.

   Deux defauts mesures sur le gabarit d'article : corps a 15 px, et lignes de
   102 caracteres alors que l'optimum de lisibilite se situe entre 60 et 75.
   Sur 352 articles, c'est le poste de confort de lecture le plus rentable.
   ------------------------------------------------------------------------- */

.brxe-post-content {
	font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.15rem);
	line-height: 1.7;
}

/* La mesure est posee sur les elements de texte, pas sur le conteneur : les
   images, tableaux et encadres conservent ainsi toute la largeur disponible. */
.brxe-post-content > p,
.brxe-post-content > ul,
.brxe-post-content > ol,
.brxe-post-content > blockquote,
.brxe-post-content > h2,
.brxe-post-content > h3,
.brxe-post-content > h4 {
	max-width: 68ch;
}

/* Hierarchie des intertitres : la sequence mesuree est plate (H1 suivi
   uniquement de H2), donc l'echelle doit faire le travail que la structure ne
   fait pas. */
.brxe-post-content > h2 {
	font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
	line-height: 1.25;
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}

.brxe-post-content > h3 {
	font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem);
	line-height: 1.3;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

/* Listes : l'aeration compte autant que la taille dans un texte long. */
.brxe-post-content li + li {
	margin-top: 0.4em;
}

/* Liens dans le corps : soulignes et distincts, sans dependre de la seule
   couleur - exigence d'accessibilite. */
.brxe-post-content a:not(.brxe-button) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

/* Pages construites dans Bricks : leurs blocs de texte ne passent pas par
   l'element de contenu, donc la regle ci-dessus ne les couvre pas. Mesure sur
   la page Financement : jusqu'a 175 caracteres par ligne sur 1313 px.

   Seule la mesure est contrainte, pas la taille de police : celle-ci est
   reglee au cas par cas dans le constructeur, et l'ecraser globalement
   reduirait les blocs deja portes a 18 px.

   La marge automatique recentre le bloc contraint, y compris dans les
   conteneurs flex utilises ici : aucun decalage visuel. */
main .brxe-text,
main .brxe-text-basic {
	max-width: 72ch;
	margin-inline: auto;
}

/* Les colonnes etroites sont deja sous la mesure : la regle ne les affecte
   pas. On protege seulement les cas ou le texte sert de legende courte. */
main .brxe-text:has(> :only-child:is(strong, em)) {
	max-width: none;
}

/* -------------------------------------------------------------------------
   7. APPEL A L'ACTION DE FIN DE FAQ
   Les 182 entrees se terminaient sans issue : un visiteur arrivant de Google
   sur une reponse n'avait aucun chemin vers l'offre. Le bloc est injecte par
   mu-plugins/cib-faq-cta.php.
   ------------------------------------------------------------------------- */

.cib-faq-cta {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--radius-l, 16px);
	background: linear-gradient(135deg, var(--primary, #582a7a) 0%, #3f1c59 100%);
	color: #fff;
	max-width: none;
}

.cib-faq-cta__titre {
	margin: 0 0 0.4em;
	font-size: clamp(1.35rem, 1.8vw + 1rem, 1.85rem);
	line-height: 1.2;
	color: #fff;
	max-width: none;
}

.cib-faq-cta__texte {
	margin: 0 0 1.5em;
	font-size: 1.0625rem;
	line-height: 1.6;
	opacity: 0.92;
	max-width: 52ch;
}

.cib-faq-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.1rem;
}

.cib-faq-cta__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.75em 1.9em;
	border-radius: var(--radius-full, 999rem);
	font-weight: 700;
	text-decoration: none;
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition),
		background-color var(--cib-transition);
}

/* Les couleurs sont forcees : une regle de lien du theme colore sinon tous
   les <a> en violet. Sur le bouton secondaire cela donnait du violet sur
   violet, soit un contraste de 1,00 - texte litteralement invisible.
   Valeurs mesurees apres correction : 6,04:1 et 12,6:1, au-dessus du seuil AA. */
.cib-faq-cta__bouton--principal {
	background: var(--secondary, #cc3);
	color: var(--primary, #582a7a) !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.cib-faq-cta__bouton--secondaire,
.cib-faq-cta__tel {
	color: #fff !important;
}

.cib-faq-cta__bouton--secondaire {
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid rgba(255, 255, 255, 0.6);
}

.cib-faq-cta__bouton:hover {
	transform: translateY(-2px);
}

.cib-faq-cta__bouton--secondaire:hover {
	background: rgba(255, 255, 255, 0.22);
}

.cib-faq-cta__tel {
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   8. FORMULAIRES
   Dernier maillon avant la conversion, et le plus neglige : champs a 41 px
   (sous le seuil tactile de 44), libelles a 12 px, et un bouton d'envoi en
   gris clair alors qu'il porte l'action commerciale du site.

   Aucun libelle n'est reecrit : seuls la taille, le confort et le poids
   visuel changent.
   ------------------------------------------------------------------------- */

.forminator-ui .forminator-input,
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui select,
.forminator-ui textarea {
	min-height: 50px !important;
	font-size: 1rem !important;
	border-radius: var(--radius-s, 6px) !important;
	border-color: rgba(31, 12, 44, 0.28) !important;
	transition: border-color var(--cib-transition), box-shadow var(--cib-transition);
}

.forminator-ui textarea {
	min-height: 130px !important;
}

/* Etat de saisie : sans retour visuel, l'utilisateur perd le fil dans un
   formulaire long. */
.forminator-ui .forminator-input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
	border-color: var(--primary, #582a7a) !important;
	box-shadow: 0 0 0 3px rgba(88, 42, 122, 0.16) !important;
	outline: none;
}

/* Libelles : 12 px etait sous le seuil de confort, surtout pour un public
   professionnel qui remplit ces formulaires sur mobile. */
.forminator-ui .forminator-label {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	margin-bottom: 0.4em !important;
	color: var(--text-title, #333) !important;
}

/* Le bouton d'envoi porte la conversion : il prend la couleur de marque et
   une taille a la hauteur de son role. */
.forminator-ui .forminator-button-submit {
	background-color: var(--primary, #582a7a) !important;
	color: #fff !important;
	min-height: 54px !important;
	font-size: 1.075rem !important;
	font-weight: 700 !important;
	padding-inline: 2.4em !important;
	border-radius: var(--radius-full, 999rem) !important;
	box-shadow: 0 8px 22px rgba(31, 12, 44, 0.28);
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition),
		background-color var(--cib-transition);
}

.forminator-ui .forminator-button-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(31, 12, 44, 0.34);
}

/* Messages d'erreur : lisibles sans dependre uniquement de la couleur. */
.forminator-ui .forminator-error-message {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   9. LIENS AUTONOMES
   L'element text-link de Bricks sert aux listes de liens (plan du site de la
   404, colonnes du pied de page). Mesure : 40 liens a 18 px de haut, soit une
   cible tactile tres inferieure au seuil de 44 px.

   Cible volontairement limitee a cet element : les liens en pleine prose ne
   doivent surtout pas etre espaces, ils casseraient l'interligne du texte.
   ------------------------------------------------------------------------- */

.brxe-text-link {
	min-height: 44px;
	padding-block: 0.3em;
	align-items: center;
}

/* -------------------------------------------------------------------------
   10. PAGE D'ACCUEIL - RETOUCHES
   ------------------------------------------------------------------------- */

/* --- Soulignement anime au defilement ---------------------------------- */

/*
 * Applique a tous les titres de niveau section - 12 sur la page d'accueil :
 * Qui sommes-nous, Nos Formations IOBSP-IAS, Les formations complementaires,
 * Un parcours en 4 etapes, Ce que pensent les etudiants, Un Centre de
 * formation, Nos points forts, Les autres Formations, Plusieurs possibilites
 * de financement, Newsletter, Envoyez-nous votre demande.
 *
 * Les titres du heros (dans le slider) sont exclus par construction : ils sont
 * imbriques plus profondement et ne repondent pas a ces selecteurs.
 *
 * Mesure prealable : la boite de ces titres epouse deja exactement leur texte
 * (287 px pour « Qui sommes-nous ? », 920 px pour le plus long). Un trait pose
 * de bord a bord couvre donc precisement le texte, sans largeur arbitraire.
 */
main h2.brxe-heading:not(.brxe-efyvpm *):not(.brxe-post-content *):not(.splide__slide *):not(aside *) {
	position: relative;
	padding-bottom: 0.4em;
}

/* Exception : « Les plus de CIB Formation » remplit son conteneur (593 px pour
   376 px de texte). On ramene sa boite au texte, en preservant son centrage. */
.brxe-dnovhr {
	width: fit-content;
	margin-inline: auto;
}

main h2.brxe-heading:not(.brxe-efyvpm *):not(.brxe-post-content *):not(.splide__slide *):not(aside *)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--primary, #582a7a) 0%,
		var(--tertiary, #fd890b) 100%
	);

	/*
	 * Etat par defaut : trait VISIBLE et complet.
	 *
	 * C'est volontaire. Si l'animation au defilement n'est pas prise en charge,
	 * un etat initial a scaleX(0) laisserait un soulignement invisible pour
	 * toujours. On part donc du rendu final, et seul le bloc @supports
	 * ci-dessous introduit le mouvement.
	 */
	transform: scaleX(1);
	/* Le trait se deploie depuis le centre vers les deux extremites. */
	transform-origin: center;
}

@keyframes cib-souligner {
	from {
		transform: scaleX(0);
		opacity: 0.4;
	}
	to {
		transform: scaleX(1);
		opacity: 1;
	}
}

@supports (animation-timeline: view()) {
	main h2.brxe-heading:not(.brxe-efyvpm *):not(.brxe-post-content *):not(.splide__slide *):not(aside *)::after {
		animation: cib-souligner linear both;
		animation-timeline: view();

		/*
		 * Plage calee sur la bande centrale de l'ecran.
		 *
		 * La version precedente (entry 15% -> cover 32%) achevait le trait
		 * autour de 600 px du haut sur une fenetre de 900 : le titre etait
		 * encore dans le tiers bas, zone que l'on traverse vite, et le
		 * mouvement passait inapercu.
		 *
		 * cover 22% -> cover 55% le fait courir pendant que le titre monte
		 * d'environ 700 px a 400 px du haut, soit en plein champ de lecture,
		 * et sur une course plus longue donc plus lisible.
		 */
		animation-range: cover 22% cover 55%;
	}
}

@media (prefers-reduced-motion: reduce) {
	main h2.brxe-heading:not(.brxe-efyvpm *):not(.brxe-post-content *):not(.splide__slide *):not(aside *)::after {
		animation: none !important;
		transform: scaleX(1) !important;
	}
}

/* --- Video du centre de formation a hauteur du texte -------------------- */

/*
 * La video occupait 180 px de haut dans une cellule de grille de 466 px,
 * laissant un vide sous elle a cote du texte. On l'etire sur toute la hauteur
 * disponible.
 */
.brxe-atwdhk > .brxe-video {
	align-self: stretch;
	height: 100%;
}

.brxe-atwdhk > .brxe-video iframe,
.brxe-atwdhk > .brxe-video .bricks-video-wrapper,
.brxe-atwdhk > .brxe-video > * {
	height: 100%;
	min-height: 100%;
}

/* --- Mention de panel alignee a droite ---------------------------------- */

/* Note de bas de bloc (« Sur un panel de 990 stagiaires pour l'an 2022 ») :
   une mention de source se lit mieux calee a droite, sous le contenu qu'elle
   qualifie. */
.brxe-qaqpht {
	text-align: right;
}

/* --- Rangee de boutons de formation ------------------------------------- */

/*
 * Les trois actions faisaient 419, 464 et 421 px pour des hauteurs de 52, 67
 * et 50 px : une rangee irreguliere. On egalise largeur et hauteur pour la
 * tenue visuelle, et la dominance de l'action commerciale passe desormais par
 * la couleur, la graisse et l'elevation - pas par la taille.
 */
.brxe-odpsyz {
	align-items: stretch;
}

/*
 * Selecteur aligne sur celui de la section 5 : a specificite inferieure, la
 * regle perdait et le bouton d'achat conservait sa police de 19,2 px et son
 * rembourrage de 2,4em, d'ou 50 px de largeur en trop. Constate a la mesure.
 */
/*
 * Egalisation reservee aux ecrans larges.
 *
 * Appliquee sans condition, elle ecrasait les trois boutons a 43 px de large
 * sur mobile pour un contenu reclamant 64 a 77 px : le texte debordait. Trois
 * actions ne tiennent pas cote a cote sur 375 px.
 */
@media (min-width: 782px) {
	main > section:has(.brxe-post-title) .brxe-odpsyz > .brxe-button {
		flex: 1 1 0;
		width: 0;
		min-width: 0;
		min-height: 60px !important;
		font-size: 1.0625rem !important;
		padding-inline: 1.25em !important;
		text-align: center;
		line-height: 1.25;
	}
}

/* Sous ce seuil, les actions s'empilent et occupent toute la largeur : chacune
   garde sa lisibilite et une cible tactile confortable. */
@media (max-width: 781px) {
	main > section:has(.brxe-post-title) .brxe-odpsyz {
		flex-direction: column;
		align-items: stretch;
	}

	main > section:has(.brxe-post-title) .brxe-odpsyz > .brxe-button {
		width: 100%;
		min-width: 0;
		min-height: 52px !important;
		font-size: 1.0625rem !important;
		padding-inline: 1.25em !important;
		text-align: center;
		line-height: 1.3;
	}
}

/* --- Espace sous le bouton d'envoi -------------------------------------- */

/* « Enregistrer comme brouillon » collait au bouton d'envoi : deux actions de
   nature differente demandent une separation nette, pour eviter le clic par
   erreur. */
.forminator-save-draft-link {
	display: inline-block;
	margin-top: 1.25rem !important;
}

/* --- Bloc de modalites en pleine largeur -------------------------------- */

/*
 * Correction d'une regression que j'ai introduite : la mesure de ligne posee
 * sur .brxe-text (section 6) resserrait ce bloc a 552 px alors que son
 * conteneur en fait 1313, juste apres des sections pleine largeur.
 *
 * Il s'agit d'une liste de modalites (duree, rythme, delais), pas d'un
 * paragraphe courant : la contrainte de confort de lecture n'a pas lieu d'etre.
 */
main .brxe-kiyrue {
	max-width: none;
}

/* --- Blocs de formation centres sur grand ecran ------------------------- */

/*
 * « Formation IOBSP niveau 1 - 150 H » et « Formation IAS niveau 1 - 150 H »,
 * avec le texte qui les suit. Centres uniquement a partir de 992 px : sur
 * mobile, un texte de plusieurs lignes centre devient penible a lire.
 */
@media (min-width: 992px) {
	.brxe-veqrgd,
	.brxe-jcodzd {
		text-align: center;
		margin-inline: auto;
	}

	/* Les blocs de texte internes portent une mesure : sans marge automatique,
	   ils resteraient cales a gauche malgre le centrage du texte. */
	.brxe-veqrgd > *,
	.brxe-jcodzd > * {
		margin-inline: auto;
	}
}

/* -------------------------------------------------------------------------
   11. LISTING DU BLOG
   Mesures relevees sur /blog-formation-iobsp-ias/ :
   - un bloc d'en-tete vide occupait 126 px, soit 28 % de la carte, sans
     contenu, sans fond et sans image ;
   - les titres variaient de 86 a 173 px (3 a 6 lignes), decalant le resume
     d'une carte a l'autre ;
   - la somme des enfants atteignait 496 px dans une carte figee a 450 px,
     que le flex comprimait silencieusement.
   ------------------------------------------------------------------------- */

/*
 * Correction d'une erreur de la version precedente : ce bloc avait ete masque
 * comme "vide". Il ne l'etait pas. Bricks lui affecte bien l'image mise en
 * avant, mais par une regle generee a part, du type
 * `.brxe-mmzbnq[data-query-loop-index="0"]{background-image:url(...)}`.
 * Le bloc etait donc vide dans le balisage et rempli par la feuille de style :
 * le masquer supprimait l'image de toutes les cartes.
 *
 * La hauteur en pourcentage est remplacee par un rapport d'image : en
 * disposition mosaique la carte n'a plus de hauteur definie, et 40 % de
 * "auto" vaut zero - l'image disparaitrait.
 */
.brxe-dtwlxv > .brxe-mmzbnq {
	display: block;
	height: auto !important;
	aspect-ratio: 16 / 9;
	width: 100%;
	background-color: rgba(88, 42, 122, 0.06);
	overflow: hidden;
}

/* 4 articles sur 352 n'ont pas d'image mise en avant. Le fond de marque pose
   ci-dessus reste alors visible : pas de rectangle blanc, pas d'image cassee. */

/* Leger zoom au survol : le mouvement designe la carte survolee sans deplacer
   quoi que ce soit autour. */
.brxe-dtwlxv > .brxe-mmzbnq {
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brxe-dtwlxv:hover > .brxe-mmzbnq {
	transform: scale(1.04);
}

/* La carte reprend une hauteur libre. La grille etire deja les cartes d'une
   meme rangee a la hauteur de la plus haute : le 450 px fige ne servait qu'a
   comprimer le contenu. */
.brxe-dtwlxv {
	height: auto !important;
	min-height: 0 !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(31, 12, 44, 0.08);
	border-radius: var(--radius-m, 12px);
	box-shadow: 0 2px 10px rgba(31, 12, 44, 0.07);
	transition:
		translate var(--cib-transition),
		box-shadow var(--cib-transition),
		border-color var(--cib-transition);
}

.brxe-dtwlxv:hover {
	/* Propriete "translate" et non "transform" : Isotope utilise transform
	   pour placer et animer les cartes de la mosaique. */
	translate: 0 -4px;
	box-shadow: 0 14px 32px rgba(31, 12, 44, 0.16);
	border-color: rgba(88, 42, 122, 0.25);
}

/* Le bloc de contenu prend la hauteur restante, ce qui permet de plaquer le
   bouton en bas de carte. */
.brxe-dtwlxv > .brxe-wqjifi {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(1.1rem, 1.6vw, 1.5rem) !important;
	gap: 0.7rem;
}

/* La date remonte au-dessus du titre : une metadonnee annonce le contenu, elle
   ne s'intercale pas entre le titre et son resume. Reordonnee en CSS, le texte
   n'est pas touche. */
.brxe-dtwlxv .brxe-nzxinc {
	order: -1;
	font-size: 0.8125rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* 60 % d'opacite, pas 55 % : 4,87:1 sur blanc au lieu de 4,13:1
	   (seuil AA 4,5:1). Voir section 39. */
	color: rgba(31, 12, 44, 0.6) !important;
	margin: 0 !important;
}

/* Titre affiche en entier. C'est lui qui fait varier la hauteur des cartes,
   donc c'est lui qui fait exister la mosaique : le tronquer les ramenait
   toutes a la meme hauteur, et un titre coupe en milieu de phrase donne une
   mauvaise idee de l'article. */
.brxe-dtwlxv .brxe-gsscvy {
	font-size: clamp(1.15rem, 1.3vw, 1.3rem) !important;
	line-height: 1.28 !important;
	margin: 0 !important;
	color: var(--text-title, #333);
	transition: color var(--cib-transition);
}

.brxe-dtwlxv:hover .brxe-gsscvy {
	color: var(--primary, #582a7a);
}

/* Resume porte a 6 lignes a la demande du client : la carte donne assez de
   matiere pour choisir un article sans l'ouvrir. Le nombre de lignes est fixe
   pour toutes les cartes, donc les hauteurs restent comparables. */
.brxe-dtwlxv .brxe-ogpqry {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1rem !important;
	line-height: 1.55 !important;
	color: rgba(31, 12, 44, 0.72);
	margin: 0 !important;
}

/*
 * Le bouton etait deja concu par le client comme un bandeau pleine largeur
 * colle au bas de la carte : `.brxe-dtwlxv .brxe-xjrmyn.brxe-button` lui donne
 * `position: absolute; bottom: 0; width: 100%` et le rayon des deux coins bas.
 * Rien a refaire de ce cote - les marges que la version precedente ajoutait
 * defaisaient ce reglage.
 *
 * Seule la hauteur en pourcentage pose probleme : `height: 10%` d'une carte
 * dont la hauteur varie desormais avec le titre donne un bandeau de hauteur
 * variable d'une carte a l'autre.
 */
.brxe-dtwlxv .brxe-xjrmyn.brxe-button {
	height: auto !important;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* En flux normal, margin-top: auto plaque le bandeau en bas de la carte. */
	position: static !important;
	bottom: auto !important;
	margin-top: auto;
	will-change: auto;
}

/*
 * La carte entiere est un lien vers l article : dans Bricks, le bloc de la
 * boucle est passe en balise <a> avec l adresse de l article, et le bouton
 * "Lire l article" est devenu un simple libelle (un lien ne peut pas en
 * contenir un autre). Clic, clic milieu et "ouvrir dans un nouvel onglet"
 * fonctionnent donc sur toute la surface.
 */
a.brxe-dtwlxv {
	position: relative;
	color: inherit;
	text-decoration: none;
}

a.brxe-dtwlxv:focus-visible {
	outline: 3px solid var(--secondary, #cc3);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   12. AVIS
   Le rendu autonome est abandonne : le client veut le widget fourni par
   l'extension, via le shortcode [trustindex no-registration=google]. Le
   fichier mu-plugins/cib-avis.php ne remplace donc plus rien - il se contente
   de restituer le conteneur Anotea, absent de la construction Bricks.

   Condition posee : les avis ne dependent d'aucun consentement. Les domaines
   cdn.trustindex.io, *.trustindex.io et googleusercontent.com sont passes de
   la categorie "Experience" a la categorie "Necessaire" dans les listes de la
   politique de securite, au meme titre qu'Anotea et Trustpilot.
   ------------------------------------------------------------------------- */

/* Le widget arrive avec sa propre feuille de style. On ne la contredit pas :
   on l'insere seulement dans le rythme de la page. */
.ti-widget {
	margin-block: clamp(0.5rem, 1.5vw, 1rem);
	/*
	 * Confinement. Mesure a 375 px : des elements du carrousel d'avis
	 * s'etendaient jusqu'a 422 px, provoquant un defilement horizontal sur
	 * toute la page. Le widget est borne a la largeur dont il dispose.
	 *
	 * `clip` plutot que `hidden` : `hidden` cree un conteneur de defilement,
	 * ce qui rognerait les infobulles du widget. Repli en `hidden` pour les
	 * navigateurs qui ignorent `clip`.
	 */
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* Conteneur Anotea : meme respiration que le bloc d'avis Google qui le
   precede, et une largeur bornee pour que le carrousel ne s'etire pas. */
.cib-anotea {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	width: 100%;
}

.cib-anotea .anotea-widget {
	min-height: 1px;
}

/* Le widget France Travail s'affiche parfois avant que sa feuille de style
   n'arrive : on evite le saut de mise en page en reservant la hauteur. */
.cib-anotea .anotea-widget:empty {
	display: block;
	min-height: 220px;
}

/* -------------------------------------------------------------------------
   13. MISE AUX NORMES MOBILE
   Releve sur 375 px : 49 cibles tactiles sur 76 sous le seuil de 44 px
   recommande. Les plus penalisantes sont les commandes du carrousel et les
   bascules, trop petites pour un pouce.

   Le principe applique ici : on agrandit la ZONE CLIQUABLE sans grossir le
   visuel, via un pseudo-element etendu. Le design ne change pas, seule la
   surface atteignable augmente.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Fleches et puces du carrousel : 27x27 et 10x10 mesures. */
	/* Correctif : les fleches Splide sont positionnees en absolu sur le
	   carrousel. Les repasser en relative (version precedente) les sortait du
	   carrousel et les empilait au-dessus. Une fleche en absolu sert deja de
	   reference a son pseudo-element : seules les puces ont besoin de relative. */
	.splide__pagination__page {
		position: relative;
	}

	.splide__arrow::after,
	.splide__pagination__page::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
		/* Purement fonctionnel : aucune trace visuelle. */
		background: transparent;
	}

	/* Les puces restent visuellement fines mais s'espacent, pour eviter les
	   zones cliquables qui se chevauchent. */
	.splide__pagination {
		gap: 0.5rem;
	}

	/* Bascules et accordeons : 40x24 mesures sur l'element de bascule. */
	.brxe-toggle,
	.brxe-accordion-nested .brxe-toggle {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Liens autonomes : deja portes a 44 px en section 9, on s'assure qu'ils
	   ne se chevauchent pas une fois empiles. */
	.brxe-text-link {
		padding-block: 0.45em;
	}

	/* --- Menu mobile --------------------------------------------------- */

	/*
	 * Boutons d'ouverture des sous-menus : 15x15 px mesures, pour sept
	 * occurrences dans un menu a trois niveaux. C'est l'element le plus
	 * manipule du menu et le plus petit du site.
	 *
	 * La fleche garde sa taille ; c'est la zone atteignable qui s'etend.
	 */
	.brx-submenu-toggle > button,
	.brx-nav-nested-items button[aria-expanded] {
		position: relative;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Lignes de menu : certaines tombaient a 26 px de haut. */
	.brx-nav-nested-items .brx-submenu-toggle,
	.brx-nav-nested-items > li > a,
	.brx-nav-nested-items a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Separation entre entrees : sans elle, des cibles de 44 px accolees
	   deviennent impossibles a distinguer au toucher. */
	.brx-nav-nested-items > li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Interrupteurs de la fenetre de consentement : 20 px de haut, sous le
	   seuil, alors qu'ils portent un choix reglementaire. */
	.modal-cacsp-toggle {
		min-height: 28px;
		min-width: 52px;
	}

	.modal-cacsp-toggle-switch-handle {
		min-height: 24px;
		min-width: 24px;
	}
}

/* -------------------------------------------------------------------------
   14. PAGES FORMATION
   Les 5 pages parentes - IOBSP, IAS, continue, credit consommation, loi ALUR -
   n'ont aucun element Bricks propre : elles partagent toutes le template 13359
   et ne different que par leur contenu Gutenberg. Styliser ce template les
   uniformise donc d'un seul geste.

   Ecarts mesures entre elles : de 8 371 a 17 522 caracteres, de 0 a 9 titres
   H2 (la page Loi ALUR n'en a aucun), de 1 a 7 images. Le style ne peut pas
   creer de structure la ou il n'y en a pas, mais il peut donner le meme
   vocabulaire visuel aux cinq.
   ------------------------------------------------------------------------- */

/* --- Interligne des listes : le defaut le plus penalisant ---------------- */

/*
 * Mesure : 19,2 px d'interligne pour un texte de 18,4 px, soit un ratio de
 * 1,04 - les lignes se touchent. Avec 110 elements de liste sur ces pages,
 * c'est le poste de lisibilite le plus couteux.
 *
 * Correction portee sur tout le contenu redactionnel, pas seulement ces pages :
 * le defaut vient du theme et touche aussi les articles.
 */
.brxe-post-content li {
	line-height: 1.55 !important;
}

.brxe-post-content ul,
.brxe-post-content ol {
	padding-left: 1.9em;
}

/* Le marqueur existe deja sous forme de coche : on le met a la couleur de
   marque et on l'aligne sur la premiere ligne. */
.brxe-post-content li::before {
	color: var(--secondary, #cc3);
	font-weight: 700;
}

/* --- Heros des 5 pages parentes ------------------------------------------ */

/*
 * Correction importante. La regle precedente visait `.single-formations-iobsp-ias`,
 * c'est-a-dire les 25 publications du type de contenu. Or deux gabarits Bricks
 * coexistent :
 *
 *   - 13359 "Page", affecte a 9 identifiants precis, dont les 5 pages parentes ;
 *   - 10387 "Formations", affecte a tout le type de contenu.
 *
 * Une condition par identifiant l'emporte sur une condition par type : les
 * 5 pages parentes utilisent 13359, les 20 pages de formation utilisent 10387,
 * dont la mise en page est entierement differente. Le bandeau s'y posait donc
 * par-dessus une structure qui ne l'attendait pas.
 *
 * Le ciblage se fait desormais par identifiant de publication, ce qui suit
 * exactement la condition du gabarit.
 */

/* Couleur propre a chaque page parente : le visiteur distingue d'un coup d'oeil
   dans quelle famille de formation il se trouve.

   Les trois teintes sont relevees dans le logo de l'entreprise :
   violet #682890, vert #c0d000, orange #f84800. Chaque degrade est assombri
   jusqu'a garantir un contraste d'au moins 4,5:1 avec le titre en blanc. */

/* Les trois premieres pages vont du plus clair au plus sombre, dans la meme teinte. */
body.postid-13341 { --cib-heros-1: #7b3da6; --cib-heros-2: #532a73; } /* IOBSP - violet clair */
body.postid-13344 { --cib-heros-1: #582a7a; --cib-heros-2: #3f1c59; } /* IAS - violet de marque */
body.postid-13357 { --cib-heros-1: #3d1c55; --cib-heros-2: #241033; } /* Continue - violet profond */
body.postid-13373 { --cib-heros-1: #6f7c05; --cib-heros-2: #3f4700; } /* Credit conso - vert de marque */
body.postid-13378 { --cib-heros-1: #c4520a; --cib-heros-2: #8a2f00; } /* Loi ALUR - orange de marque */

/*
 * La section mesure plus de 3 600 px : un fond de marque sur toute sa hauteur
 * serait ecrasant. Le degrade est donc pose en bandeau haut via un
 * pseudo-element, et la carte de contenu blanche vient le chevaucher.
 *
 * Le pseudo-element sert aussi a contourner une declaration de fond plus
 * specifique du theme, qui remettait la section en blanc.
 *
 * Le chevauchement est le meme sur les 5 pages. Un bandeau de hauteur fixe
 * s'arretait toujours au meme endroit alors que la carte descend avec la
 * longueur du titre : 117 px de chevauchement pour « Formation IOBSP », 15 px
 * pour « Formation Loi ALUR ». Le bandeau est donc volontairement trop haut, et
 * un cache blanc accroche a la carte (voir plus bas) le coupe a une distance
 * fixe sous le haut de la carte.
 */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	main > section:first-of-type {
	--cib-bande-h: clamp(420px, 36vw, 520px);
	--cib-chevauchement: clamp(3.5rem, 9vw, 7.5rem);
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}

body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	main > section:first-of-type::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--cib-bande-h);
	z-index: -1;
	background: linear-gradient(135deg, var(--cib-heros-1, #582a7a) 0%, var(--cib-heros-2, #3f1c59) 100%);
}

/* Titre sur une ligne quand la largeur le permet ; sinon, lignes equilibrees
   plutot qu'un mot isole sur la derniere. */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	.brxe-post-title {
	color: #fff !important;
	font-size: clamp(2rem, 3.6vw, 3.1rem) !important;
	line-height: 1.12;
	letter-spacing: -0.015em;
	max-width: none;
	text-wrap: balance;
}

/* Filet d'accent sous le titre, rappel du soulignement des titres de section. */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	.brxe-post-title::after {
	content: "";
	display: block;
	width: min(180px, 45%);
	height: 4px;
	margin-top: 0.5em;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--secondary, #cc3), var(--tertiary, #fd890b));
}

/* Le contenu remonte sur le heros : la page se lit comme un bloc, pas comme
   deux zones juxtaposees. */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	main > section:first-of-type .brxe-post-content {
	--cib-carte-pad: clamp(1.5rem, 3.5vw, 3rem);
	background: #fff;
	border-radius: var(--radius-l, 16px);
	padding: var(--cib-carte-pad);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 14px 40px rgba(31, 12, 44, 0.16);
}

/*
 * Cache blanc qui termine le bandeau. Sans top, il se place au debut du contenu
 * de la carte, donc suit la longueur du titre ; left et right, eux, se
 * rapportent a la section (premier ancetre positionne) : il couvre toute la
 * largeur. Dans le meme contexte d'empilement que le bandeau, il est peint
 * apres lui, mais reste sous la carte et son ombre.
 */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	main > section:first-of-type .brxe-post-content::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--cib-bande-h);
	margin-top: calc(var(--cib-chevauchement) - var(--cib-carte-pad));
	z-index: -1;
	background: #fff;
	pointer-events: none;
}

/*
 * Titres « Ajuster le texte » de l'editeur (classe has-fit-text) : WordPress les
 * met sur une ligne (nowrap !important) et compte sur un script pour reduire la
 * police. Le script ne calcule aucune taille ici : sur mobile, « Formation
 * IOBSP – Niveau 1, Niveau 2 et Niveau 3 » depassait de 300 px et faisait
 * defiler la page de cote. Le titre peut revenir a la ligne s'il ne tient pas.
 */
.brxe-post-content .has-fit-text {
	white-space: normal !important;
	text-wrap: balance;
}

/* --- Attaque de page ----------------------------------------------------- */

/* Le premier paragraphe fait office de chapo : il annonce l'offre et merite
   d'etre distingue du corps. */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	.brxe-post-content > p:first-of-type {
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--text-title, #333);
}

/* --- Rythme des intertitres --------------------------------------------- */

/* 96,8 px de marge haute isolaient chaque titre de la section qu'il ouvre.
   Le filet reprend la couleur de la page, pas un violet fixe. */
body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	.brxe-post-content > h2 {
	font-size: clamp(1.6rem, 2.2vw, 2.1rem) !important;
	margin-top: clamp(2rem, 3.5vw, 2.8rem) !important;
	margin-bottom: 0.5em !important;
	padding-left: 0.7em;
	border-left: 5px solid var(--cib-heros-1, var(--primary, #582a7a));
	line-height: 1.2;
}

body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378)
	.brxe-post-content > h3 {
	color: var(--cib-heros-1, var(--primary, #582a7a));
	margin-top: 1.9em !important;
}

/* --- Images et citations ------------------------------------------------ */

.brxe-post-content img,
.brxe-post-content figure img {
	border-radius: var(--radius-m, 12px);
	box-shadow: 0 6px 22px rgba(31, 12, 44, 0.14);
}

.brxe-post-content blockquote {
	border-left: 5px solid var(--tertiary, #fd890b) !important;
	background: rgba(253, 137, 11, 0.06);
	border-radius: 0 var(--radius-s, 8px) var(--radius-s, 8px) 0;
	padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 2.4vw, 1.6rem) !important;
	font-size: 1.05em;
}

/* -------------------------------------------------------------------------
   15. ACCESSIBILITE
   Un anneau de focus visible, absent aujourd'hui : indispensable pour la
   navigation au clavier.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--secondary, #cc3);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   16. MOUVEMENT
   Regle de prudence : l'apparition progressive n'est activee que si le
   navigateur sait animer au defilement. Sans ce garde-fou, un navigateur non
   compatible afficherait des sections restees invisibles.
   ------------------------------------------------------------------------- */

@keyframes cib-apparition {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Contenu du heros : anime au chargement, sans dependre du defilement. */
.brxe-efyvpm .splide__slide.is-active > * {
	animation: cib-apparition 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.brxe-efyvpm .splide__slide.is-active > *:nth-child(1) { animation-delay: 60ms; }
.brxe-efyvpm .splide__slide.is-active > *:nth-child(2) { animation-delay: 140ms; }
.brxe-efyvpm .splide__slide.is-active > *:nth-child(3) { animation-delay: 220ms; }
.brxe-efyvpm .splide__slide.is-active > *:nth-child(4) { animation-delay: 300ms; }

/* Revelation au defilement, uniquement si le navigateur la prend en charge. */
/* Le conteneur des sections est <main>, pas .brx-body : le selecteur precedent
   ne correspondait a rien et la revelation au defilement n'a jamais eu lieu.
   Constate en inspectant une section : animation-name valait "none". */
/*
 * Deux corrections apres constat d'un voile opaque des le chargement :
 *
 * 1. La plage etait exprimee en pourcentage de la hauteur de l'element
 *    (`cover 22%`). Sur une section de 3 635 px - cas des pages formation -
 *    22 % represente 800 px de defilement : la section visible d'emblee restait
 *    a 0,82 d'opacite tant que l'on n'avait pas fait defiler. Une longueur fixe
 *    rend la plage independante de la hauteur de l'element.
 *
 * 2. La premiere section est visible avant tout defilement : il n'y a rien a
 *    reveler, et l'animer ne pouvait produire qu'un voile. Elle est exclue.
 *
 * Ne subsiste donc que ce que l'utilisateur decouvre en defilant.
 */
@supports (animation-timeline: view()) {
	main > section:not(.brxe-efyvpm):not(:first-of-type),
	main > div:not(.brxe-efyvpm):not(:first-of-type) {
		animation: cib-apparition linear both;
		animation-timeline: view();
		animation-range: entry 0 entry 240px;
	}
}

/* La FAQ est une page de consultation : on y vient pour lire une reponse
   precise, souvent arrive par un moteur de recherche. Toute apparition
   progressive y retarde la lecture sans rien apporter. */
/* Le ciblage par slug ne fonctionne pas ici : WordPress ne met le slug dans
   les classes du body que pour les publications uniques, pas pour les pages.
   Releve sur place : `page page-id-557`. */
body.page-id-557 main > section,
body.page-id-557 main > div,
body.single-faq main > section,
body.single-faq main > div {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Respect du reglage systeme : plus aucun mouvement. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.brxe-button:hover,
	.bricks-button:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   17. LISTING DU BLOG - MOSAIQUE
   La mosaique est desormais celle de Bricks (Isotope), reglee dans le
   constructeur sur le conteneur de la boucle : 3 colonnes a partir de 991 px,
   2 a partir de 767 px, 1 sur telephone, 9 articles puis infinite scroll.
   L ancienne version en colonnes CSS est retiree : elle reorganisait toute la
   grille a chaque ajout d articles, et sa regle "> a" etalait les cartes sur
   toute la largeur depuis qu elles sont devenues des liens.
   ------------------------------------------------------------------------- */

/*
 * Le style global de Bricks ajoute a tous les conteneurs une marge interieure
 * de 26,7 px a gauche et a droite a partir de 767 px. Isotope calcule la
 * largeur des cartes sur la boite complete mais les place dans la boite
 * interieure : 3 cartes de 388 px et 2 gouttieres ne tenaient plus, et la
 * mosaique retombait a 2 colonnes. La marge laterale est retiree sur ce seul
 * conteneur ; la section qui l entoure garde la sienne.
 */
#brxe-vxztpm.bricks-masonry {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
   18. PAGE D'ACCUEIL - REACTION AU SURVOL
   Le survol ne decore pas : il confirme au visiteur que l'element repond, et
   designe celui qu'il vise. Partout la meme grammaire - une legere elevation,
   une ombre qui s'ouvre - pour que le site reagisse d'une seule voix.
   ------------------------------------------------------------------------- */

/* --- "Un parcours en 4 etapes simples" ----------------------------------- */

.brxe-wgofqt .brxe-div.shadow-m {
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition),
		border-color var(--cib-transition);
	border: 1px solid transparent;
}

.brxe-wgofqt .brxe-div.shadow-m:hover,
.brxe-wgofqt .brxe-div.shadow-m:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(31, 12, 44, 0.18);
	border-color: rgba(88, 42, 122, 0.22);
}

/* Le pictogramme accompagne le mouvement, sans partir de son cote. */
.brxe-wgofqt .brxe-div.shadow-m .brxe-image {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brxe-wgofqt .brxe-div.shadow-m:hover .brxe-image {
	transform: scale(1.08) rotate(-3deg);
}

/* --- Carrousel "L'actualite des formations" ------------------------------ */

/* La carte est une colonne : image, puis contenu. Le contenu s'etire pour que
   toutes les cartes d'une meme vue finissent a la meme hauteur. */
.brxe-hkcjya {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-m, 12px);
	background: var(--bg-surface, #fff);
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-hkcjya:hover,
.brxe-hkcjya:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(31, 12, 44, 0.2);
}

.brxe-hkcjya .brxe-gxzbbq {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* L'image mise en avant est posee par Bricks en fond de ce bloc. Le zoom au
   survol est contenu par le `overflow: hidden` de la carte. */
.brxe-hkcjya .brxe-qfhrtq {
	flex: 0 0 auto;
	height: 42% !important;
	min-height: 150px;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brxe-hkcjya:hover .brxe-qfhrtq {
	transform: scale(1.06);
}

/*
 * Le bloc de texte devient une grille : c'est le seul moyen, sans toucher au
 * balisage, de placer l'auteur et la date cote a cote alors qu'ils sont deux
 * elements freres empiles.
 *
 *   titre   titre
 *   auteur  date      <- la cartouche
 *   resume  resume
 */
.brxe-hkcjya .brxe-rohajs {
	display: grid;
	/*
	 * Une troisieme colonne souple est indispensable. Sans elle, le titre et
	 * le resume - qui traversent la grille - imposaient leur propre largeur
	 * aux deux colonnes en `max-content` : mesure a 324 px et 303 px dans une
	 * carte de 309 px, donc un debordement. Une colonne en `1fr` absorbe la
	 * largeur des elements traversants et laisse les deux pastilles a leur
	 * taille reelle.
	 */
	grid-template-areas:
		"titre  titre titre"
		"auteur date  ."
		"resume resume resume";
	grid-template-columns: max-content max-content 1fr;
	align-content: start;
	row-gap: 0.6rem;
	height: auto !important;
	flex: 1 1 auto;
	padding: clamp(0.9rem, 1.6vw, 1.25rem);
}

/* Titre ramene a 3 lignes, avec la hauteur reservee meme pour les titres
   courts : sans cela, la cartouche et le resume remonteraient d'une carte a
   l'autre et l'alignement serait perdu. */
.brxe-hkcjya .brxe-64ec16 {
	grid-area: titre;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	font-size: clamp(1.05rem, 1.15vw, 1.2rem) !important;
	line-height: 1.3 !important;
	min-height: calc(3 * 1.3em);
}

/* La carte entiere est le lien vers l article (balise <a> dans Bricks) ; le
   titre n est plus un lien a part. */
a.brxe-hkcjya {
	color: inherit;
	text-decoration: none;
}

a.brxe-hkcjya:focus-visible {
	outline: 3px solid var(--secondary, #cc3);
	outline-offset: 3px;
}

.brxe-hkcjya .brxe-64ec16 {
	transition: color var(--cib-transition);
}

.brxe-hkcjya:hover .brxe-64ec16 {
	color: var(--primary, #582a7a);
}

/* La cartouche : deux elements freres, deux demi-pastilles jointives, une
   seule forme percue. */
.brxe-hkcjya .brxw-article-card-01__author,
.brxe-hkcjya .brxw-article-card-01__date {
	margin: 0 !important;
	font-size: 0.8125rem !important;
	line-height: 1.4;
	color: var(--primary, #582a7a) !important;
	background: rgba(88, 42, 122, 0.09);
	white-space: nowrap;
	align-self: start;
}

.brxe-hkcjya .brxw-article-card-01__author {
	grid-area: auteur;
	padding: 0.35em 0.15em 0.35em 0.8em;
	border-radius: 999px 0 0 999px;
	font-weight: 600;
}

.brxe-hkcjya .brxw-article-card-01__date {
	grid-area: date;
	padding: 0.35em 0.8em 0.35em 0.15em;
	border-radius: 0 999px 999px 0;
}

/* Resume : 3 lignes, hauteur reservee, pour que les cartes se terminent au
   meme endroit. */
.brxe-hkcjya .brxe-arzlga {
	grid-area: resume;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	color: rgba(31, 12, 44, 0.7) !important;
	min-height: calc(3 * 1.5em);
}

/* --- Encart "Les plus de CIB Formation" ---------------------------------- */

/* Le bloc violet a la citation. */
.brxe-cftbcn .brxe-iwizlf {
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-cftbcn .brxe-iwizlf:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 46px rgba(31, 12, 44, 0.26);
}

/* Les deux guillemets s'ecartent legerement : le bloc respire au survol. */
.brxe-cftbcn .brxe-iwizlf .brxe-icon {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brxe-cftbcn .brxe-iwizlf:hover .brxe-eknzzy {
	transform: translate(-4px, -4px) rotate(-8deg);
}

.brxe-cftbcn .brxe-iwizlf:hover .brxe-metlzs {
	transform: translate(4px, 4px) rotate(8deg);
}

/* Le portrait de Pascal Cherin. */
.brxe-cftbcn .brxe-cftvfv {
	overflow: hidden;
	border-radius: var(--radius-m, 12px);
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-cftbcn .brxe-cftvfv:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 46px rgba(31, 12, 44, 0.26);
}

.brxe-cftbcn .brxe-guiyoa {
	display: block;
	transition:
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 420ms ease;
	filter: saturate(0.92);
}

.brxe-cftbcn .brxe-cftvfv:hover .brxe-guiyoa {
	transform: scale(1.06);
	filter: saturate(1.05);
}

/* -------------------------------------------------------------------------
   19. GABARIT DES 20 PAGES DE FORMATION (template 10387)
   A distinguer des 5 pages parentes, traitees en section 14. Ces pages-ci
   ont un vrai heros : une photo de fond, le titre, l'argumentaire et trois
   actions. Les defauts mesures portent sur le contraste et sur les boutons.
   ------------------------------------------------------------------------- */

/*
 * Voile du heros. Bricks en posait un, uniforme, a 50 % de noir. Le texte
 * occupe la moitie gauche : un voile uniforme eclaircit donc trop a gauche
 * (ou il faut lire) et assombrit inutilement a droite (ou se trouve la photo).
 *
 * Le degrade dirige le contraste la ou il sert, et laisse la photo respirer.
 * Teinte violet-nuit plutot que noir pur : le heros reste dans la marque.
 */
.brxe-cefpmv::before {
	background-image: linear-gradient(
		105deg,
		rgba(24, 10, 36, 0.92) 0%,
		rgba(24, 10, 36, 0.8) 40%,
		rgba(24, 10, 36, 0.5) 72%,
		rgba(24, 10, 36, 0.32) 100%
	) !important;
}

@media (max-width: 781px) {
	/* Sur une colonne unique, le texte occupe toute la largeur : le voile
	   redevient uniforme, sinon le bas de la liste passe sur la zone claire. */
	.brxe-cefpmv::before {
		background-image: linear-gradient(
			180deg,
			rgba(24, 10, 36, 0.88) 0%,
			rgba(24, 10, 36, 0.84) 100%
		) !important;
	}
}

/* --- Accroche commerciale ------------------------------------------------ */

/* Le vert de marque sur photo restait fragile meme voile. Un demi-ton plus
   clair et une graisse superieure le rendent net sans changer la couleur. */
.brxe-cefpmv .brxe-flgcia {
	font-weight: 600;
	color: #dbe04e !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* --- Les trois actions --------------------------------------------------- */

/*
 * Mesure avant correction : trois boutons de 292, 340 et 294 px, dont un de
 * 100 px de haut contre 50 px pour les deux autres - son libelle passait a la
 * ligne, faute de place, parce que la rangee etait en "nowrap".
 *
 * Ils partagent desormais la largeur et peuvent passer a la ligne.
 */
.brxe-cefpmv .brxe-oxnije {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/*
	 * `align-content` est indispensable des lors que la rangee peut passer a
	 * la ligne. Sa valeur initiale, `stretch`, repartit la hauteur du
	 * conteneur entre les lignes : a 375 px les trois boutons passaient chacun
	 * sur sa propre ligne et mesuraient 240 px de haut au lieu de 56.
	 */
	align-content: flex-start;
	gap: 0.75rem 1rem;
}

.brxe-cefpmv .brxe-oxnije > .brxe-button {
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.25;
	font-size: 1rem !important;
}

/*
 * Le partage de largeur ne vaut que lorsque la rangee est horizontale. Bricks
 * bascule ce conteneur en `flex-direction: column` sur mobile : `flex-basis`
 * s'y applique alors a la hauteur, et `15rem` donnait des boutons de 240 px de
 * haut au lieu de 56 - mesure sur un ecran de 375 px.
 */
@media (min-width: 782px) {
	.brxe-cefpmv .brxe-oxnije > .brxe-button {
		flex: 1 1 15rem;
	}
}

@media (max-width: 781px) {
	.brxe-cefpmv .brxe-oxnije > .brxe-button {
		flex: 0 0 auto;
		width: 100%;
	}
}

/*
 * Correction de contraste. Le bouton principal affichait du blanc sur le vert
 * de marque : 1,9:1, tres en dessous du minimum de 4,5:1. C'etait l'action la
 * plus importante de la page, et la moins lisible.
 *
 * L'encre passe au vert tres fonce de la meme famille : environ 10:1, et la
 * couleur de marque est conservee.
 */
.brxe-cefpmv .brxe-oxnije > .brxe-mrtbwo {
	color: #24230f !important;
	box-shadow: 0 10px 26px rgba(204, 204, 51, 0.32);
}

.brxe-cefpmv .brxe-oxnije > .brxe-mrtbwo:hover {
	box-shadow: 0 14px 32px rgba(204, 204, 51, 0.45);
}

/* Le bouton translucide manquait de tenue sur les zones claires de la photo. */
.brxe-cefpmv .brxe-oxnije > .brxe-ublvdp {
	border: 1px solid rgba(255, 255, 255, 0.55);
}

/* -------------------------------------------------------------------------
   20. CARROUSEL "LES FORMATIONS IOBSP-IAS COMPLEMENTAIRES"
   Deux defauts signales : le dernier bouton colle au bas du carrousel, et la
   hauteur de carte sans rapport avec la longueur du texte.
   ------------------------------------------------------------------------- */

/* Les cartes d'une meme vue s'etirent a la meme hauteur. */
.brxe-yznkzj .splide__list {
	align-items: stretch;
}

.brxe-yznkzj .splide__slide {
	height: auto;
}

.brxe-zrofou {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* La marge basse manquante : les boutons ne touchent plus le bord. */
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Le descriptif occupe l'espace disponible ; les boutons sont plaques en bas,
   donc alignes d'une carte a l'autre quelle que soit la longueur du texte. */
.brxe-zrofou > .brxe-rnctha {
	/*
	 * Zone du descriptif : elle prend la place laissee par le titre et les
	 * boutons, et coupe ce qui depasse. Les cartes ont une hauteur commune
	 * (664 px releves en desktop) : un descriptif plus long que cette place
	 * passait sous les boutons, mesure jusqu a 150 px de chevauchement.
	 * Le texte est donc tronque avant les boutons, jamais par-dessus.
	 */
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden !important;
	/*
	 * Fondu sur les deux dernieres lignes de la zone. Quand le texte est court,
	 * cette bande est vide et le fondu ne touche rien ; quand il est long, il
	 * signale la coupure au lieu de trancher une ligne en deux.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent 100%);
}

/* Bricks empile deja ces boutons en colonne et pose `justify-content:
   space-between` sur la carte, ce qui les maintient en bas. On n'ajoute que la
   respiration qui manquait au-dessus. */
.brxe-zrofou > .brxe-zxnekg {
	padding-top: 0.9rem;
}

/*
 * Le descriptif s'affiche en entier : ni hauteur maximale, ni fondu. Un texte
 * qui s'efface laisse croire a un defaut d'affichage, et prive le visiteur
 * d'arguments juste au moment ou il compare deux formations.
 *
 * Toutes les cartes prennent la hauteur de la plus haute (etirement ci-dessus)
 * et les boutons restent plaques en bas : l'espace disponible se reporte sur
 * le descriptif plutot que de laisser un vide sous le bouton.
 */
.brxe-zrofou .brxe-cqiqrd {
	/*
	 * Cause du texte superpose. Le descriptif porte dans Bricks une troncature
	 * (display: -webkit-box et -webkit-line-clamp 10, ou 12 sous 1279 px).
	 * Appliquee a un bloc qui contient des listes, Chrome ramene la hauteur
	 * de chaque puce a une seule ligne : un intitule sur deux lignes deborde
	 * alors sur la puce suivante. Mesure : puce de 19 px pour 38 px de texte.
	 * Le descriptif devant etre lu en entier, la troncature est retiree.
	 */
	display: block !important;
	-webkit-line-clamp: unset !important;
	line-clamp: none !important;
	-webkit-box-orient: unset !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Interligne fixe de 1.2rem (Core Framework) trop serre pour un texte de
   14 a 17 px : les lignes d une meme puce se touchaient. */
.brxe-zrofou .liste ul li,
.brxe-zrofou .liste ul li p {
	line-height: 1.45 !important;
}

/* --- Reaction au survol ------------------------------------------------- */

.brxe-zrofou {
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-yznkzj .splide__slide:hover .brxe-zrofou,
.brxe-zrofou:hover,
.brxe-zrofou:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(31, 12, 44, 0.18);
}

.brxe-zrofou .brxe-ufrdlj {
	transition: color var(--cib-transition);
}

.brxe-zrofou:hover .brxe-ufrdlj {
	color: var(--primary, #582a7a);
}

/* -------------------------------------------------------------------------
   21. GABARIT D'ARTICLE
   Defauts d'alignement mesures dans l'en-tete :
   - la date est centree (x = 460) alors que le temps de lecture est a gauche
     (x = 24), dans un conteneur pourtant en colonne alignee a gauche ;
   - meme ecart pour le partage : le libelle a 429, les icones a 24 ;
   - le nom de l'auteur est un h2 de 28 px, plus gros que les intertitres de
     l'article ;
   - les icones de partage mesurent 30 px, sous le seuil tactile de 44 px.
   ------------------------------------------------------------------------- */

/* --- Date et temps de lecture sur une seule ligne ------------------------ */

.brxw-article-hero-02__date-wrapper {
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	width: 100%;
}

.brxw-article-hero-02__date-wrapper > * {
	margin: 0 !important;
	/* La cause du decalage : un alignement centre herite. */
	text-align: left !important;
	font-size: 0.9375rem !important;
	color: rgba(31, 12, 44, 0.6) !important;
}

/* Separateur entre la date et le temps de lecture, purement decoratif. */
.brxw-article-hero-02__date-wrapper > * + *::before {
	content: "\00b7";
	margin-right: 0.85rem;
	color: rgba(31, 12, 44, 0.35);
}

/* --- Signature de l'auteur ----------------------------------------------- */

.brxw-article-02 .brxe-post-author {
	align-items: center !important;
	gap: 1rem;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	padding: clamp(0.9rem, 1.8vw, 1.2rem);
	border: 1px solid rgba(31, 12, 44, 0.1);
	border-radius: var(--radius-m, 12px);
	background: rgba(88, 42, 122, 0.035);
	max-width: 62rem;
}

.brxw-article-02 .brxe-post-author .avatar {
	flex: none;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(31, 12, 44, 0.18);
}

/* Le nom redescend a l'echelle d'une signature : il annonce un auteur, il
   n'ouvre pas une section. La balise h2 reste inchangee. */
.brxw-article-02 .brxe-post-author .author-name {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 0.2em !important;
}

.brxw-article-02 .brxe-post-author .author-bio {
	margin: 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	color: rgba(31, 12, 44, 0.7) !important;
	max-width: 68ch;
}

/* --- Partage ------------------------------------------------------------- */

.brxw-article-hero-02__sharing-wrapper {
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	width: 100%;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

.brxw-article-hero-02__label {
	margin: 0 !important;
	text-align: left !important;
	font-size: 0.9375rem !important;
	color: rgba(31, 12, 44, 0.6) !important;
}

.brxw-article-02 .brxe-post-sharing {
	display: flex;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Cible tactile portee de 30 a 44 px, minimum recommande. */
.brxw-article-02 .brxe-post-sharing li {
	width: auto;
	height: auto;
}

.brxw-article-02 .brxe-post-sharing li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(88, 42, 122, 0.08);
	transition:
		background-color var(--cib-transition),
		transform var(--cib-transition);
}

.brxw-article-02 .brxe-post-sharing li > a:hover {
	background: var(--primary, #582a7a);
	transform: translateY(-2px);
}

.brxw-article-02 .brxe-post-sharing svg {
	width: 18px;
	height: 18px;
	fill: var(--primary, #582a7a);
	transition: fill var(--cib-transition);
}

.brxw-article-02 .brxe-post-sharing li > a:hover svg {
	fill: #fff;
}

/* --- Titre et largeur de lecture ----------------------------------------- */

.brxw-article-hero-02__title {
	line-height: 1.15 !important;
	letter-spacing: -0.015em;
	max-width: 24ch;
	margin-bottom: 0.6em !important;
}

/*
 * Le corps de l'article occupait toute la largeur du conteneur, soit environ
 * 120 caracteres par ligne. Au-dela de 75, l'oeil perd la ligne suivante en
 * revenant a la marge. La largeur est ramenee dans la fourchette de lecture.
 */
.brxw-article-02 .brxe-post-content {
	max-width: 72ch;
}

/* L'image d'en-tete reste pleine largeur : c'est elle qui pose le sujet. */
.brxw-article-hero-02__media-wrapper img {
	width: 100%;
	border-radius: var(--radius-m, 12px);
}

/* -------------------------------------------------------------------------
   22. RETOUCHES DU 15/09/2026
   ------------------------------------------------------------------------- */

/* --- Listing du blog : le texte s arrete avant le bouton ----------------- */

.brxe-dtwlxv > .brxe-wqjifi {
	height: auto !important;
	padding-bottom: clamp(1rem, 1.6vw, 1.35rem) !important;
}

/* --- Carrousels de formation au premier plan ----------------------------- */

/*
 * La piste Splide coupe tout ce qui depasse (overflow hidden, necessaire au
 * defilement horizontal). Une carte soulevee au survol perdait donc son haut
 * et son ombre. Une marge interieure donne a l animation la place de se
 * produire dans la zone visible.
 */
.brxe-yznkzj {
	position: relative;
	z-index: 1;
	/* Le carrousel portait un fond gris (#e6e7e8) dans une section blanche :
	   la marge ajoutee pour l animation le rendait visible en bande au-dessus
	   et au-dessous des cartes. Il prend desormais le fond de sa section. */
	background-color: transparent !important;
	background-image: none !important;
}

.brxe-yznkzj .splide__track {
	padding-block: 14px 34px !important;
}

/*
 * Meme correction pour le carrousel « L'actualite des formations » de
 * l'accueil. Sa piste (overflow: hidden) epousait exactement la hauteur des
 * cartes : au survol, la carte qui monte de 6 px avait le haut et l'ombre
 * rognes, comme si elle passait sous la section. La piste recoit la marge de
 * l'animation, et le carrousel perd son fond gris, qui aurait dessine deux
 * bandes plus foncees que la page autour des cartes. Les cartes gardent leur
 * hauteur : elle est fixee sur chaque diapositive, pas sur la piste.
 */
.brxe-lwosvr {
	background-color: transparent !important;
}

.brxe-lwosvr .splide__track {
	padding-block: 14px 34px !important;
}

/* --- Boutons Acheter et Financer strictement identiques ------------------ */

body .brxe-cefpmv .brxe-oxnije > a.brxe-button.bricks-button,
body .brxe-zrofou .brxe-zxnekg > a.brxe-button.bricks-button {
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	padding: 0.75em 1em !important;
	min-height: 52px;
	letter-spacing: 0.02em;
}

body .brxe-zrofou .brxe-zxnekg > a.brxe-button.bricks-button {
	font-size: 0.875rem !important;
	min-height: 46px;
	width: 100%;
}

/* --- Points forts : reaction au survol ----------------------------------- */

.brxe-wkjcvp .card {
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-wkjcvp .card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(31, 12, 44, 0.18);
}

.brxe-wkjcvp .card .brxe-counter {
	transition: color var(--cib-transition), transform var(--cib-transition);
	display: inline-block;
}

.brxe-wkjcvp .card .brxe-text-basic {
	transition: color var(--cib-transition), transform var(--cib-transition);
	display: inline-block;
}

/* Derniere carte : le "24 H" est un texte simple, pas un compteur. */
.brxe-wkjcvp .card:hover .brxe-text-basic,
.brxe-wkjcvp .card:hover .brxe-counter {
	/* Orange assombri #a05400 : l'orange de marque ne donnait que 2,40:1 sur
	   blanc. Voir section 39. */
	color: #a05400 !important;
	transform: scale(1.06);
}

/* --- Cartes "1. Les objectifs" : liens vers les pages parentes ----------- */

.brxe-atfcbn > a.brxe-div {
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--cib-transition),
		box-shadow var(--cib-transition);
}

.brxe-atfcbn > a.brxe-div:hover,
.brxe-atfcbn > a.brxe-div:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(31, 12, 44, 0.18);
}

.brxe-atfcbn > a.brxe-div:hover .brxe-heading {
	color: var(--primary, #582a7a);
}

/* --- Logos des organismes : survol ---------------------------------------- */

.brxe-sikygy .brxe-image,
.brxe-sikygy a.brxe-image {
	transition:
		transform var(--cib-transition),
		filter var(--cib-transition);
	filter: grayscale(0.25);
}

.brxe-sikygy .brxe-image:hover,
.brxe-sikygy a.brxe-image:focus-visible {
	transform: translateY(-4px) scale(1.05);
	filter: grayscale(0);
}

/* --- Images du texte principal : survol ----------------------------------- */

.single-formations-iobsp-ias main .brxe-post-content img,
.single-formations-iobsp-ias main .brxe-text img {
	transition:
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Seules les images cliquables reagissent au survol : une image sans lien
   qui grossit laisse croire a un lien (constate le 16/09 sur la page IOBSP). */
.single-formations-iobsp-ias main .brxe-post-content a img:hover,
.single-formations-iobsp-ias main .brxe-text a img:hover {
	transform: scale(1.025);
	box-shadow: 0 16px 36px rgba(31, 12, 44, 0.22);
}

/* --- Menu mobile ----------------------------------------------------------- */

@media (max-width: 1279px) {
	/* Le menu collait au bord gauche de l ecran. */
	.brx-nav-nested-items {
		padding-inline: clamp(1rem, 5vw, 1.75rem) !important;
	}

	/* Les fleches des sous-menus remplissaient toute la zone tactile de
	   44 px. La zone reste a 44 px, le pictogramme revient a 14 px. */
	.brx-nav-nested-items .brx-submenu-toggle > button svg,
	.brx-nav-nested-items .brx-submenu-toggle > button i,
	.brx-nav-nested-items .brx-submenu-toggle > button .brxe-icon {
		width: 14px !important;
		height: 14px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		font-size: 14px !important;
	}
}

/* --- FAQ : table des matieres en tete sur tablette et mobile ------------- */

/*
 * En desktop, la table des matieres est une colonne laterale collante, placee
 * a gauche par la grille (order: -1). Sous 992 px, Bricks repasse le conteneur
 * en colonne simple et la table retombait apres les 180 questions : mesure a
 * 12 673 px de haut, contre 221 px pour la premiere question.
 */
@media (max-width: 991px) {
	body.page-id-557 .brxw-article-body-02__sidebar {
		order: -1 !important;
		position: static !important;
		margin-bottom: clamp(1.25rem, 3vw, 2rem);
	}
}

/* --- Formations complementaires : contraste carte / section --------------- */

/*
 * Les cartes sont blanches, et la section qui les porte aussi : les cartes ne
 * se detachaient plus du fond depuis que le carrousel a perdu son gris. La
 * section reprend ce gris (#e6e7e8, la teinte choisie a l origine pour le
 * carrousel), sur toute sa hauteur : plus de bande visible, et des cartes
 * nettement lisibles.
 */
.single-formations-iobsp-ias main > section:has(.brxe-yznkzj) {
	background-color: #e6e7e8 !important;
}

/* --- 23. Page auteur : Pascal Cherin (modele Bricks 14912, page 14902) ---- */

/*
 * Reprend les codes du site : violet #582a7a et le degrade des heros de
 * formation, orange #fd890b pour les dates et le filet degrade des titres,
 * vert-jaune #cc3 pour l action principale, boutons pilule en capitales,
 * cartes blanches arrondies sur fond gris clair, titres de contenu soulignes
 * d une barre violette a gauche. Le texte vient de WordPress (titre, champs
 * Page auteur, editeur) : les regles visent des balises generiques pour que
 * les modifications du client restent mises en forme.
 */

/* Heros */
.cib-auteur-heros {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(55% 70% at 88% 18%, rgba(253, 137, 11, 0.2) 0%, rgba(253, 137, 11, 0) 70%),
		radial-gradient(45% 60% at 6% 100%, rgba(204, 204, 51, 0.13) 0%, rgba(204, 204, 51, 0) 70%),
		linear-gradient(135deg, #582a7a 0%, #3f1c59 100%);
	padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(6.5rem, 12vw, 9rem) !important;
}

.cib-auteur-heros .cib-auteur-heros__grille {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 767px) {
	.cib-auteur-heros .cib-auteur-heros__grille {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}
}

.cib-auteur-heros .cib-auteur-heros__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
	gap: 1rem;
	text-align: left !important;
}

.cib-auteur-heros .cib-auteur-heros__texte > * {
	margin: 0 !important;
	text-align: left !important;
}

.cib-auteur-heros .cib-auteur-surtitre {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgba(204, 204, 51, 0.45);
	border-radius: 999px;
	background-color: rgba(204, 204, 51, 0.12);
	color: #ecec9a;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cib-auteur-surtitre::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #cc3;
}

.cib-auteur-heros h1 {
	position: relative;
	padding-bottom: 1.15rem;
	color: #fff;
	font-size: var(--text-3xl, clamp(1.6rem, calc(2.89vw + 1.02rem), 3.55rem));
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.08;
	text-wrap: balance;
}

/* Le filet degrade des titres du site, passe a orange / vert-jaune sur le violet. */
.cib-auteur-heros h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 88px;
	height: 4px;
	border-radius: 2px;
	background-image: linear-gradient(90deg, #fd890b 0%, #cc3 100%);
}

.cib-auteur-heros .cib-auteur-role {
	max-width: 36ch;
	color: rgba(255, 255, 255, 0.96);
	font-size: var(--text-l, 1.25rem);
	font-weight: 600;
	line-height: 1.4;
	text-wrap: balance;
}

.cib-auteur-heros .cib-auteur-intro,
.cib-auteur-heros .cib-auteur-intro p {
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.84);
	font-size: var(--text-m, 1.05rem);
	line-height: 1.7;
}

.cib-auteur-intro p + p {
	margin-top: 0.75rem;
}

.cib-auteur-heros .cib-auteur-actions {
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 0.6rem !important;
}

/* Boutons pilule en capitales, comme les appels a l action du site. */
.cib-auteur-heros .cib-auteur-actions .bricks-button,
.cib-auteur-corps .cib-auteur-cta .bricks-button,
.cib-auteur-articles > .brxe-container > .bricks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.9rem !important;
	border-radius: 999px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cib-auteur-articles > .brxe-container > .bricks-button {
	background-color: #582a7a !important;
	border-color: #472461 !important;
	color: #fff !important;
	box-shadow: 0 10px 30px rgba(31, 12, 44, 0.28);
	transition: translate 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 280ms ease;
}

.cib-auteur-articles > .brxe-container > .bricks-button:hover,
.cib-auteur-articles > .brxe-container > .bricks-button:focus-visible {
	background-color: #472461 !important;
	translate: 0 -2px;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button,
.cib-auteur-cta .bricks-button {
	transition:
		translate 280ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 280ms ease,
		color 280ms ease,
		box-shadow 280ms ease;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button:not(.outline) {
	background-color: #cc3 !important;
	border-color: #cc3 !important;
	color: #2d1640 !important;
	box-shadow: 0 10px 30px rgba(20, 6, 32, 0.35) !important;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button.outline {
	background-color: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button:hover,
.cib-auteur-heros .cib-auteur-actions .bricks-button:focus-visible,
.cib-auteur-cta .bricks-button:hover,
.cib-auteur-cta .bricks-button:focus-visible {
	translate: 0 -2px;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button:not(.outline):hover {
	background-color: #dada4f !important;
}

.cib-auteur-heros .cib-auteur-actions .bricks-button.outline:hover,
.cib-auteur-heros .cib-auteur-actions .bricks-button.outline:focus-visible {
	background-color: #fff !important;
	color: #3f1c59 !important;
}

/* Portrait dans un anneau degrade, avec un halo discret. */
.cib-auteur-heros .cib-auteur-portrait {
	position: relative;
	justify-self: center;
	width: min(320px, 70vw) !important;
	aspect-ratio: 1;
	padding: 7px;
	border-radius: 50%;
	background-image: linear-gradient(140deg, #fd890b 0%, #cc3 45%, #795194 100%);
	box-shadow: 0 30px 60px rgba(20, 6, 32, 0.45);
}

.cib-auteur-portrait::after {
	content: "";
	position: absolute;
	inset: -22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.cib-auteur-heros .cib-auteur-photo {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 5px solid #3f1c59;
	border-radius: 50%;
}

@media (max-width: 766px) {
	.cib-auteur-heros .cib-auteur-portrait {
		order: -1;
		justify-self: start;
		width: min(180px, 50vw) !important;
		padding: 5px;
	}

	.cib-auteur-portrait::after {
		inset: -14px;
	}

	.cib-auteur-heros .cib-auteur-actions .bricks-button {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Parcours en dates : une frise blanche qui chevauche le heros. */
.cib-auteur-etapes {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * clamp(4.5rem, 9vw, 6.5rem));
	padding-block: 0 !important;
	background: transparent !important;
}

.cib-auteur-etapes .cib-auteur-etapes__grille {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	margin: 0;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	list-style: none;
	border-radius: var(--radius-l, 1.25rem);
	background-color: #fff;
	box-shadow: 0 18px 44px rgba(31, 12, 44, 0.14);
	counter-reset: none;
}

@media (min-width: 767px) {
	.cib-auteur-etapes .cib-auteur-etapes__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 0.5rem;
	}
}

@media (min-width: 991px) {
	.cib-auteur-etapes .cib-auteur-etapes__grille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cib-auteur-etapes .cib-auteur-etape {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0.9rem 1.1rem 0.9rem 2.35rem;
}

.cib-auteur-etape::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 1.45rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: #fd890b;
	box-shadow: 0 0 0 4px rgba(253, 137, 11, 0.18);
}

/* Mobile : les points sont relies par un trait vertical. */
.cib-auteur-etape::after {
	content: "";
	position: absolute;
	left: calc(0.75rem + 5px);
	top: 2.6rem;
	bottom: -1.2rem;
	width: 1px;
	background-color: #e3dfe8;
}

.cib-auteur-etape:last-child::after {
	display: none;
}

@media (min-width: 767px) {
	.cib-auteur-etape::after {
		display: none;
	}

	.cib-auteur-etape:nth-child(even) {
		border-left: 1px solid #ecebef;
	}
}

@media (min-width: 991px) {
	.cib-auteur-etape:nth-child(n + 2) {
		border-left: 1px solid #ecebef;
	}
}

.cib-auteur-etapes .cib-auteur-etape__annee {
	margin: 0;
	color: #fd890b;
	font-size: clamp(1.6rem, calc(1.6vw + 1.1rem), 2.25rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
}

.cib-auteur-etapes .cib-auteur-etape__texte {
	margin: 0;
	color: #404040;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Contenu et colonne laterale */
.cib-auteur-corps {
	background-color: var(--bg-body, #f5f5f5);
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem) !important;
}

/* La frise chevauche le heros : pas de marge de section supplementaire dessous. */
.cib-auteur-etapes + .cib-auteur-corps {
	margin-top: 0 !important;
}

.cib-auteur-corps .cib-auteur-corps__grille {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: start;
}

@media (min-width: 991px) {
	.cib-auteur-corps .cib-auteur-corps__grille {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.cib-auteur-corps .cib-auteur-carte {
	padding: clamp(1.4rem, 4vw, 3rem);
	border-radius: var(--radius-l, 1.25rem);
	background-color: #fff;
	box-shadow: var(--shadow-m, 0 2px 6px rgba(0, 0, 0, 0.15));
}

.cib-auteur-corps .cib-auteur-corps__colonne {
	width: 100%;
	max-width: 72ch;
	color: #404040;
	font-size: var(--text-m, 1.05rem);
	line-height: 1.75;
}

.cib-auteur-corps__colonne > * {
	margin-block: 0;
}

.cib-auteur-corps__colonne > * + * {
	margin-top: 1rem;
}

.cib-auteur-corps .cib-auteur-corps__colonne > h2 {
	padding-left: 1rem;
	border-left: 4px solid #582a7a;
	color: #363636;
	font-size: var(--text-xl, 1.6rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
	scroll-margin-top: 130px;
}

.cib-auteur-corps__colonne > * + h2 {
	margin-top: 2.6rem;
}

.cib-auteur-corps__colonne > h2 + * {
	margin-top: 1.1rem;
}

.cib-auteur-corps__colonne strong {
	color: #363636;
}

.cib-auteur-corps__colonne a {
	color: #582a7a;
	text-decoration: underline;
	text-decoration-color: rgba(88, 42, 122, 0.35);
	text-underline-offset: 3px;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.cib-auteur-corps__colonne a:hover,
.cib-auteur-corps__colonne a:focus-visible {
	color: #c4520a;
	text-decoration-color: currentColor;
}

.cib-auteur-corps .cib-auteur-corps__colonne ul {
	display: grid;
	gap: 0.6rem;
	padding-left: 0;
	list-style: none;
}

.cib-auteur-corps__colonne ul > li {
	position: relative;
	padding-left: 2rem;
}

/* Coches vert-jaune, comme les listes d avantages du site. */
.cib-auteur-corps__colonne ul > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.22em;
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background-color: rgba(204, 204, 51, 0.24);
	color: #5f6a04;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

/* Liste composee uniquement de liens (les sources) : plus discrete. */
.cib-auteur-corps .cib-auteur-corps__colonne ul:has(> li > a:only-child) {
	gap: 0.35rem;
	font-size: 0.92rem;
}

.cib-auteur-corps__colonne ul:has(> li > a:only-child) > li::before {
	content: "";
	top: 0.72em;
	left: 0.45rem;
	width: 6px;
	height: 6px;
	background-color: #795194;
}

.cib-auteur-corps .cib-auteur-aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media (min-width: 991px) {
	.cib-auteur-corps .cib-auteur-aside {
		position: sticky !important;
		top: 120px;
	}
}

.cib-auteur-corps .cib-auteur-sommaire {
	padding: 1.4rem 1.5rem;
	border-radius: var(--radius-m, 0.75rem);
	background-color: #fff;
	box-shadow: var(--shadow-m, 0 2px 6px rgba(0, 0, 0, 0.15));
}

@media (max-width: 990px) {
	.cib-auteur-corps .cib-auteur-sommaire {
		display: none !important;
	}
}

.cib-auteur-aside .cib-auteur-aside__label {
	margin: 0 0 0.75rem;
	color: #582a7a;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cib-auteur-sommaire .toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cib-auteur-sommaire .toc-list-item {
	margin: 0;
	padding: 0;
}

.cib-auteur-sommaire .toc-list-item::before,
.cib-auteur-sommaire .toc-link::before {
	display: none !important;
}

.cib-auteur-sommaire .toc-link {
	display: block;
	padding: 0.42rem 0 0.42rem 0.85rem;
	border-left: 2px solid #ecebef;
	color: #404040;
	font-size: 0.92rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}

.cib-auteur-sommaire .toc-link:hover,
.cib-auteur-sommaire .toc-link:focus-visible,
.cib-auteur-sommaire .is-active-link {
	border-left-color: #fd890b;
	color: #582a7a;
}

.cib-auteur-sommaire .is-active-link {
	font-weight: 600;
}

.cib-auteur-corps .cib-auteur-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1.6rem 1.5rem;
	border-radius: var(--radius-m, 0.75rem);
	background-color: #582a7a;
	color: #fff;
}

.cib-auteur-cta::after {
	content: "";
	position: absolute;
	top: -46px;
	right: -46px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-image: radial-gradient(circle, rgba(253, 137, 11, 0.35) 0%, rgba(253, 137, 11, 0) 70%);
	pointer-events: none;
}

.cib-auteur-cta .cib-auteur-cta__titre {
	margin: 0;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.cib-auteur-cta .cib-auteur-cta__texte {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.93rem;
	line-height: 1.6;
}

.cib-auteur-corps .cib-auteur-cta .bricks-button {
	position: relative;
	z-index: 1;
	margin-top: 0.3rem;
	padding: 0.85rem 1.4rem !important;
	background-color: #cc3 !important;
	border-color: #cc3 !important;
	color: #2d1640 !important;
	font-size: 0.82rem !important;
}

.cib-auteur-corps .cib-auteur-cta .bricks-button:hover {
	background-color: #dada4f !important;
}

/* Derniers articles */
.cib-auteur-articles {
	background-color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem) !important;
}

.cib-auteur-articles > .brxe-container {
	align-items: center !important;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}

.cib-auteur-articles h2.cib-auteur-titre {
	position: relative;
	margin: 0;
	padding-bottom: 1rem;
	color: #363636;
	font-size: var(--text-2xl, 2rem);
	font-weight: 600;
	text-align: center;
	text-wrap: balance;
}

/* Meme filet que les titres de section du site. */
.cib-auteur-titre::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 96px;
	height: 4px;
	border-radius: 2px;
	translate: -50% 0;
	background-image: linear-gradient(90deg, #582a7a 0%, #fd890b 100%);
}

.cib-auteur-articles .cib-auteur-articles__grille {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	width: 100%;
}

a.cib-auteur-article {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-m, 0.75rem);
	background-color: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--shadow-m, 0 2px 6px rgba(0, 0, 0, 0.15));
	transition:
		translate 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.cib-auteur-article:hover,
a.cib-auteur-article:focus-visible {
	translate: 0 -5px;
	box-shadow: 0 18px 40px rgba(31, 12, 44, 0.18);
}

a.cib-auteur-article:focus-visible {
	outline: 3px solid #fd890b;
	outline-offset: 3px;
}

.cib-auteur-articles .cib-auteur-article__visuel {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.cib-auteur-article:hover .cib-auteur-article__visuel {
	scale: 1.05;
}

.cib-auteur-articles .cib-auteur-article__corps {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1.2rem 1.35rem 1.5rem;
	background-color: #fff;
}

.cib-auteur-articles .cib-auteur-article__date {
	display: inline-flex;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-color: #f3eff6;
	color: #582a7a;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cib-auteur-articles .cib-auteur-article h3 {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #363636;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color 200ms ease;
}

a.cib-auteur-article:hover h3 {
	color: #582a7a;
}

@media (prefers-reduced-motion: reduce) {
	.cib-auteur-heros .cib-auteur-actions .bricks-button,
	.cib-auteur-cta .bricks-button,
	a.cib-auteur-article,
	.cib-auteur-article__visuel {
		transition: none;
	}

	a.cib-auteur-article:hover,
	a.cib-auteur-article:hover .cib-auteur-article__visuel {
		translate: none;
		scale: none;
	}
}

/* --- 24. Articles : dates de publication, de mise a jour, contenu ancien --- */

/* Ligne de dates du gabarit article (element 12f722), completee par cib-dates.php. */
.cib-article-dates .cib-article-maj {
	white-space: nowrap;
}

/* Avertissement place en tete des articles anciens. */
.cib-article-ancien {
	margin: 0 0 1.75rem;
	padding: 0.95rem 1.15rem;
	border: 1px solid #f0cf9f;
	border-radius: 10px;
	background-color: #fff7ea;
	color: #4a3217;
	font-size: 0.95rem;
	line-height: 1.55;
}

.cib-article-ancien strong {
	color: #8a4b08;
}

@media (prefers-reduced-motion: reduce) {
	.cib-auteur-actions .bricks-button,
	a.cib-auteur-article {
		transition: none;
	}
}

/* --- 25. Carrousels de formations : trois actions strictement identiques -- */

/*
 * Les trois boutons d une carte (programme, financement, achat) partagent
 * desormais la meme boite : meme largeur, meme hauteur, meme corps de texte.
 * Les libelles sont de longueurs tres differentes ; ils restent sur une ligne
 * et leur taille s adapte a la largeur de la carte plutot que de passer a la
 * ligne, ce qui creait des boutons de hauteurs differentes.
 */
.brxe-zrofou > .brxe-zxnekg {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: stretch;
}

body .brxe-zrofou > .brxe-zxnekg > a.brxe-button.bricks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 0.75rem !important;
	font-size: clamp(0.68rem, 1.05vw + 0.34rem, 0.8rem) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	line-height: 1.2 !important;
	white-space: nowrap;
	text-align: center;
}

/* --- 26. Pages de financement : cartes et visuels ------------------------ */

/*
 * Les quatre pages de financement (plus la variante IAS) presentent leurs
 * etapes dans des cartes blanches. Elles reagissent maintenant au survol,
 * comme les cartes de la page d accueil, et les visuels partenaires sont
 * cliquables.
 */
body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card {
	transition:
		transform var(--cib-transition, 320ms cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--cib-transition, 320ms cubic-bezier(0.22, 1, 0.36, 1));
}

body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 12, 44, 0.16);
}

/* La pastille ronde de la carte (numero ou pictogramme) accompagne le mouvement. */
body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card .radius-full {
	transition: transform var(--cib-transition, 320ms cubic-bezier(0.22, 1, 0.36, 1));
}

body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card:hover .radius-full {
	transform: scale(1.06);
}

/* Visuels devenus cliquables : le survol doit le montrer. */
body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) a > img,
body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) a.brxe-image img {
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) a:hover > img,
body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) a.brxe-image:hover img {
	transform: scale(1.02);
	box-shadow: 0 14px 30px rgba(31, 12, 44, 0.16);
}

/* Image des notes Trustpilot, en remplacement du widget payant. */
.cib-trustpilot-note {
	display: block;
	width: min(340px, 100%) !important;
	margin-inline: auto;
}

/* --- 27. Articles : soulignement anime des titres de section ------------- */

/*
 * Meme trait degrade que sur la page d accueil, applique aux titres du corps
 * des articles. L etat par defaut est le trait complet : si l animation au
 * defilement n est pas prise en charge, le soulignement reste visible.
 */
body.single-post .brxe-post-content h2 {
	position: relative;
	padding-bottom: 0.35em;
}

body.single-post .brxe-post-content h2::after {
	content: "";
	position: absolute;
	/* Trait sur toute la largeur du titre, comme sur la page d accueil. */
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--primary, #582a7a) 0%, var(--tertiary, #fd890b) 100%);
	transform: scaleX(1);
	transform-origin: left center;
}

@supports (animation-timeline: view()) {
	body.single-post .brxe-post-content h2::after {
		animation: cib-souligner linear both;
		animation-timeline: view();
		animation-range: cover 18% cover 48%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-post .brxe-post-content h2::after {
		animation: none !important;
		transform: scaleX(1) !important;
	}

	body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card,
	body:is(.page-id-1984, .page-id-6310, .page-id-6521, .page-id-7291, .page-id-14827) .card .radius-full {
		transition: none;
	}
}

/* --- 28. Accueil : actions des cartes de formation (section xgdomh) ------ */

/*
 * "Financer via mon CPF" et "Acheter cette formation" partagent une grille a
 * deux colonnes egales : meme largeur, et meme hauteur meme si un libelle
 * passe a la ligne. Sur mobile, les deux boutons s empilent sur toute la
 * largeur.
 */
#brxe-xgdomh .brxe-pmeidy {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 0.75rem 1rem;
	width: min(100%, 40rem);
}

@media (max-width: 766px) {
	#brxe-xgdomh .brxe-pmeidy {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}
}

#brxe-xgdomh .brxe-pmeidy > a.brxe-button.bricks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 0.8em 1.2em !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.02em;
	text-align: center;
}

/* --- 29. Articles : navigation article precedent / suivant ---------------- */

/*
 * Deux cartes cote a cote, fleche dans une pastille, libelle en capitales et
 * titre de l article. L article precedent reste a gauche, le suivant a droite,
 * y compris quand l un des deux manque (premier ou dernier article).
 */
body.single-post .brxw-article-footer-01 {
	background-color: var(--bg-body, #f5f5f5) !important;
	box-shadow: none !important;
	padding-block: clamp(2rem, 5vw, 3.5rem) !important;
}

body.single-post .brxw-post-nav-01.brxe-post-navigation {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	width: 100%;
}

@media (min-width: 767px) {
	body.single-post .brxw-post-nav-01.brxe-post-navigation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	body.single-post .brxw-post-nav-01 .next-post {
		grid-column: 2;
	}
}

body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post) {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 1rem;
	height: 100%;
	margin: 0 !important;
	padding: 1.25rem 1.5rem !important;
	border: 1px solid #ecebef;
	border-radius: var(--radius-m, 0.75rem);
	background-color: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(31, 12, 44, 0.06);
	transition:
		translate 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 280ms ease;
}

body.single-post .brxw-post-nav-01 .next-post {
	flex-direction: row-reverse;
	text-align: right;
}

/* Pastille flechee. */
body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post)::before {
	content: "";
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: #f3eff6;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
	transition:
		background-color 280ms ease,
		translate 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.single-post .brxw-post-nav-01 .prev-post::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23582a7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}

body.single-post .brxw-post-nav-01 .next-post::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23582a7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

body.single-post .brxw-post-nav-01 .content {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

body.single-post .brxw-post-nav-01 .label {
	color: #7b3da6;
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.single-post .brxw-post-nav-01 .title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #363636;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 200ms ease;
}

body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):hover,
body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):focus-visible {
	translate: 0 -3px;
	border-color: rgba(88, 42, 122, 0.35);
	box-shadow: 0 14px 30px rgba(31, 12, 44, 0.14);
}

body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):focus-visible {
	outline: 3px solid #fd890b;
	outline-offset: 3px;
}

body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):hover .title {
	color: #582a7a;
}

body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):hover::before {
	background-color: #582a7a;
}

body.single-post .brxw-post-nav-01 .prev-post:hover::before {
	translate: -3px 0;
	background-image: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}

body.single-post .brxw-post-nav-01 .next-post:hover::before {
	translate: 3px 0;
	background-image: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post),
	body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post)::before {
		transition: none;
	}

	body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):hover,
	body.single-post .brxw-post-nav-01 :is(.prev-post, .next-post):hover::before {
		translate: none;
	}
}

/* --- 30. Blog : pagination numerotee ----------------------------------------- */

/*
 * Le defilement infini et le bouton « Voir plus » restent le mode de lecture
 * principal. Cette pagination donne aux robots des liens HTML vers chaque page
 * du blog, et aux visiteurs un acces direct aux articles plus anciens.
 */
.cib-blog-pagination {
	width: 100%;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.cib-blog-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cib-blog-pagination ul.page-numbers li {
	margin: 0;
}

.cib-blog-pagination a.page-numbers,
.cib-blog-pagination span.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.65rem;
	border: 1px solid #e3dfe8;
	border-radius: 999px;
	background-color: #fff;
	color: #582a7a;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		color 200ms ease;
}

.cib-blog-pagination a.page-numbers:hover,
.cib-blog-pagination a.page-numbers:focus-visible,
.cib-blog-pagination span.page-numbers.current {
	border-color: #582a7a;
	background-color: #582a7a;
	color: #fff;
}

.cib-blog-pagination a.page-numbers:focus-visible {
	outline: 3px solid #fd890b;
	outline-offset: 2px;
}

.cib-blog-pagination span.page-numbers.dots {
	min-width: 1.5rem;
	border-color: transparent;
	background-color: transparent;
	color: #7a7085;
}

@media (prefers-reduced-motion: reduce) {
	.cib-blog-pagination a.page-numbers {
		transition: none;
	}
}

/* --- 31. Pages legales : CGV, confidentialite, accessibilite --------------- */

.cib-page-legale > h2 {
	margin-top: 2rem;
	margin-bottom: 0.6rem;
	color: #363636;
	font-size: var(--text-l, 1.35rem);
	text-wrap: balance;
}

.cib-page-legale > h2:first-of-type {
	margin-top: 1.25rem;
}

.cib-page-legale ul,
.cib-page-legale ol {
	display: grid;
	gap: 0.45rem;
	margin-block: 0.6rem 1rem;
}

/* Informations que seul l'organisme peut fournir : impossibles a manquer. */
mark.cib-a-completer {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background-color: #fff1c7;
	color: #6b4700;
	font-weight: 600;
}

/* Document a telecharger (bloc Fichier) : le bouton par defaut ecrivait en
   violet sur fond gris fonce, un contraste insuffisant. */
.cib-page-legale .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-block: 1rem 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #e3dfe8;
	border-radius: 10px;
	background-color: #faf8fc;
}

.cib-page-legale .wp-block-file > a:not(.wp-block-file__button) {
	color: #582a7a;
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.cib-page-legale .wp-block-file .wp-block-file__button {
	margin: 0;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	background-color: #582a7a;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.cib-page-legale .wp-block-file .wp-block-file__button:hover,
.cib-page-legale .wp-block-file .wp-block-file__button:focus-visible {
	background-color: #3f1c59;
	color: #fff;
}

.cib-page-legale .wp-block-file a:focus-visible {
	outline: 3px solid #fd890b;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cib-page-legale .wp-block-file .wp-block-file__button {
		transition: none;
	}
}

/* Tableaux des pages legales (cookies, traitements de donnees) : defilement
   horizontal dans leur propre cadre sur mobile, jamais sur toute la page. */
.cib-page-legale .wp-block-table {
	margin-block: 0.75rem 1.5rem;
	overflow-x: auto;
	border: 1px solid #e3dfe8;
	border-radius: 10px;
	-webkit-overflow-scrolling: touch;
}

.cib-page-legale .wp-block-table table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.9rem;
	line-height: 1.45;
}

.cib-page-legale .wp-block-table th,
.cib-page-legale .wp-block-table td {
	padding: 0.65rem 0.8rem;
	border: 0;
	border-bottom: 1px solid #ece8f1;
	text-align: left;
	vertical-align: top;
}

.cib-page-legale .wp-block-table thead th {
	background-color: #582a7a;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

.cib-page-legale .wp-block-table tbody tr:nth-child(even) {
	background-color: #faf8fc;
}

.cib-page-legale .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.cib-page-legale .wp-block-table code {
	padding: 0.05em 0.3em;
	border-radius: 4px;
	background-color: #f1ecf6;
	color: #3f1d59;
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

/* --- 32. Pages de formation : corps de texte aligne sur les pages parentes -- */

/*
 * Les 20 pages de formation (gabarit 10387) affichent leur contenu Gutenberg
 * dans un element Texte de Bricks (section #wordpress-content), et non dans
 * l'element Contenu utilise par les pages parentes : les regles des sections 6
 * et 14 ne les atteignaient pas. Mesures avant correction : intertitres H2
 * sans marge haute, colles au paragraphe precedent, sans filet ; listes a
 * 19,2 px d'interligne pour un texte de 17 px.
 *
 * Mise en forme reprise de la page parente IOBSP (13341) : tailles,
 * interlignes, filet des H2 et couleur des H3 dans son violet, chapo, listes,
 * images et citations. La largeur de la colonne, elle, ne change pas.
 */
body.single-formations-iobsp-ias #wordpress-content .brxe-text {
	--cib-texte-accent: #7b3da6;
	font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.15rem);
	line-height: 1.7;
}

/* Le premier paragraphe fait office de chapo, comme sur la page parente. */
body.single-formations-iobsp-ias #wordpress-content .brxe-text > p:first-of-type {
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--text-title, #333);
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text > h2 {
	font-size: clamp(1.6rem, 2.2vw, 2.1rem) !important;
	line-height: 1.2;
	margin-top: clamp(2rem, 3.5vw, 2.8rem) !important;
	margin-bottom: 0.5em !important;
	padding-left: 0.7em;
	border-left: 5px solid var(--cib-texte-accent);
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text > h3 {
	font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem);
	line-height: 1.3;
	color: var(--cib-texte-accent);
	margin-top: 1.9em !important;
	margin-bottom: 0.5em !important;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text li {
	line-height: 1.55 !important;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text li + li {
	margin-top: 0.4em;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text ul,
body.single-formations-iobsp-ias #wordpress-content .brxe-text ol {
	padding-left: 1.9em;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text li::before {
	color: var(--secondary, #cc3);
	font-weight: 700;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text a:not(.brxe-button) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text img {
	border-radius: var(--radius-m, 12px);
	box-shadow: 0 6px 22px rgba(31, 12, 44, 0.14);
}

body.single-formations-iobsp-ias #wordpress-content .brxe-text blockquote {
	border-left: 5px solid var(--tertiary, #fd890b) !important;
	background: rgba(253, 137, 11, 0.06);
	border-radius: 0 var(--radius-s, 8px) var(--radius-s, 8px) 0;
	padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 2.4vw, 1.6rem) !important;
	font-size: 1.05em;
}

/* --- 33. Texte justifie : corps des pages seulement (18/09/2026) ----------- */

/*
 * Demande du 18/09/2026 : seul le corps des pages est justifie. Tete de page,
 * intro, cartes, encarts, temoignages, appels a l'action, formulaires et pied
 * de page ne le sont pas. Remplace la regle du 16/09/2026, qui justifiait les
 * paragraphes, textes simples et listes de tout le contenu et du pied de page.
 *
 * Corps de page = texte courant long de l'article ou de la page :
 *   - element Contenu de Bricks (.brxe-post-content) : articles, pages
 *     parentes de formation, confidentialite, accessibilite, colonne de la
 *     page auteur. Le Contenu de l'accueil ne porte que le formulaire de la
 *     lettre d'information, exclu comme tout formulaire ;
 *   - fiches formation : presentation (#wordpress-content .brxe-text, bloc que
 *     reprend aussi la page Mentions legales) et programme (#brxe-tsgevz) ;
 *   - reponses des FAQ en accordeon (page FAQ et fiches formation) ;
 *   - textes longs de pages Bricks : Financement (#brxe-blddcc, #brxe-xzxocw),
 *     Financement OPCO (#brxe-pncwyf), A propos / Centre de formation
 *     (#brxe-juijql, #brxe-gzfguh, #brxe-kqozxo) ;
 *   - tout element auquel on donne la classe cib-texte-justifie dans Bricks.
 *
 * Dans ces blocs, seuls les paragraphes et les elements de liste sont
 * justifies. Ne le sont pas : intertitres (meme places dans un element de
 * liste), chapo (premier paragraphe mis en
 * valeur des fiches et des pages parentes, sections 14 et 32), avertissement
 * des articles anciens, et ce qui est insere dans le texte : citations
 * encadrees, tableaux, formulaires, sommaires, encadres (aside), blocs
 * Bricks (encart promotionnel des articles, onglets de devis...) et cartes
 * de l'extension Service Box (classes wpsm_..., un article). Un element
 * Texte de Bricks place dans un bloc du corps (page Financement) reste du
 * corps.
 *
 * La regle vise les paragraphes eux-memes, avec une specificite nulle
 * (:where). La classe globale Bricks « liste », qui aligne a gauche en Bureau
 * les blocs du corps qui la portent, ne l'emporte donc pas ; un alignement
 * pose sur le paragraphe (bouton d'alignement de l'editeur : classe
 * has-text-align-..., style en ligne) garde la main, et un paragraphe place
 * dans un bloc centre ou aligne a droite (classe has-text-align-center ou
 * -right, style en ligne) suit son bloc. Ces paragraphes alignes n'ont pas
 * de cesure. Un bloc aligne a gauche ne compte pas : c'est la valeur par
 * defaut que l'ancien constructeur SiteOrigin pose sur l'enveloppe de tout
 * le texte de 6 articles anciens (style="text-align: left;"), et ce texte
 * est du corps. En revanche, un alignement choisi dans Bricks pour tout un
 * bloc du corps ne descend pas jusqu'a ses paragraphes : pour centrer un
 * texte du corps, utiliser le bouton d'alignement de l'editeur sur ses
 * paragraphes.
 *
 * La derniere ligne de chaque paragraphe justifie (et chaque ligne suivie
 * d'un retour a la ligne force) reste alignee a gauche : c'est le
 * comportement par defaut (text-align-last: auto). Ne pas poser
 * text-align-last ici : la propriete s'herite et decalerait a gauche la
 * derniere ligne des textes centres places dans le corps (encart des
 * videos en attente du consentement, texte centre dans Bricks).
 */
:where(
	.brxe-post-content,
	#wordpress-content .brxe-text,
	#brxe-tsgevz,
	.accordion-content-wrapper .brxe-text,
	#brxe-blddcc,
	#brxe-xzxocw,
	#brxe-pncwyf,
	#brxe-juijql,
	#brxe-gzfguh,
	#brxe-kqozxo,
	.cib-texte-justifie
) :where(p, li):where(:not(
	[class*="has-text-align-"]:not(.has-text-align-justify),
	[style*="text-align"]:not([style*="justify"]),
	.cib-article-ancien,
	body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378) .brxe-post-content > p:first-of-type,
	body.single-formations-iobsp-ias #wordpress-content .brxe-text > p:first-of-type,
	:where(.brxe-post-content, #wordpress-content .brxe-text, #brxe-tsgevz, .accordion-content-wrapper .brxe-text, #brxe-blddcc, #brxe-xzxocw, #brxe-pncwyf, #brxe-juijql, #brxe-gzfguh, #brxe-kqozxo, .cib-texte-justifie) :where(blockquote, table, form, nav, aside, [class*="brxe-"]:not(.brxe-text), [class*="wpsm_"], .has-text-align-center, .has-text-align-right, [style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"]) *
)) {
	text-align: justify;
}

/* Intertitre place directement dans un element de liste justifie (listes
   numerotees d'intertitres, 10 articles) : sans cette regle, il heriterait
   de la justification et de la cesure de l'element de liste. Il reprend
   l'alignement de depart, comme tout intertitre. Memes exclusions que
   ci-dessus : un element de liste non justifie transmet son alignement. */
:where(
	.brxe-post-content,
	#wordpress-content .brxe-text,
	#brxe-tsgevz,
	.accordion-content-wrapper .brxe-text,
	#brxe-blddcc,
	#brxe-xzxocw,
	#brxe-pncwyf,
	#brxe-juijql,
	#brxe-gzfguh,
	#brxe-kqozxo,
	.cib-texte-justifie
) :where(li):where(:not(
	[class*="has-text-align-"]:not(.has-text-align-justify),
	[style*="text-align"]:not([style*="justify"]),
	:where(.brxe-post-content, #wordpress-content .brxe-text, #brxe-tsgevz, .accordion-content-wrapper .brxe-text, #brxe-blddcc, #brxe-xzxocw, #brxe-pncwyf, #brxe-juijql, #brxe-gzfguh, #brxe-kqozxo, .cib-texte-justifie) :where(blockquote, table, form, nav, aside, [class*="brxe-"]:not(.brxe-text), [class*="wpsm_"], .has-text-align-center, .has-text-align-right, [style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"]) *
)) > :where(h1, h2, h3, h4, h5, h6) {
	text-align: start;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Colonnes etroites : la cesure automatique (langue fr-FR de la page) evite
   les blancs trop larges entre les mots. Meme perimetre que la justification. */
@media (max-width: 767px) {
	:where(
		.brxe-post-content,
		#wordpress-content .brxe-text,
		#brxe-tsgevz,
		.accordion-content-wrapper .brxe-text,
		#brxe-blddcc,
		#brxe-xzxocw,
		#brxe-pncwyf,
		#brxe-juijql,
		#brxe-gzfguh,
		#brxe-kqozxo,
		.cib-texte-justifie
	) :where(p, li):where(:not(
		[class*="has-text-align-"]:not(.has-text-align-justify),
		[style*="text-align"]:not([style*="justify"]),
		.cib-article-ancien,
		body:is(.postid-13341, .postid-13344, .postid-13357, .postid-13373, .postid-13378) .brxe-post-content > p:first-of-type,
		body.single-formations-iobsp-ias #wordpress-content .brxe-text > p:first-of-type,
		:where(.brxe-post-content, #wordpress-content .brxe-text, #brxe-tsgevz, .accordion-content-wrapper .brxe-text, #brxe-blddcc, #brxe-xzxocw, #brxe-pncwyf, #brxe-juijql, #brxe-gzfguh, #brxe-kqozxo, .cib-texte-justifie) :where(blockquote, table, form, nav, aside, [class*="brxe-"]:not(.brxe-text), [class*="wpsm_"], .has-text-align-center, .has-text-align-right, [style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"]) *
	)) {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/*
 * Reglages « Justifie » poses dans Bricks sur des elements qui ne sont pas du
 * corps, neutralises en attendant leur retrait dans Bricks (Typographie >
 * Alignement du texte de chaque element, au point de rupture de base
 * « Mobile portrait », qui vaut pour tous les ecrans ; aussi en « Bureau »
 * pour arzlga) :
 *   - bio de l'auteur sous le titre des articles (#brxe-zmnjxk, modele
 *     « Articles », typographie de la bio) ;
 *   - composant « Mot du president », encart « Le e-learning, oui mais pas
 *     que... » (accueil, pages de formation, A propos) : citation (dxvqdr),
 *     texte « Les plus de CIB Formation » (bazrgs) et note de bas d'encart
 *     (kiyrue) ;
 *   - composant « le centre + video » (accueil, fiches formation) : texte a
 *     cote de la video (zwuyjn) ;
 *   - extraits des cartes d'articles : carrousel de l'accueil (arzlga) et
 *     page Blog (ogpqry).
 * Meme traitement pour les reponses des FAQ en accordeon qui portent ce
 * reglage : FAQ des fiches formation (mcvqfu, composant « FAQ ») et FAQ de la
 * page Financement (uxxxyw, affichee sur aucune page aujourd'hui). Elles
 * font partie du corps, mais le reglage Bricks justifiait tout le bloc,
 * intertitres et tableaux compris ; la regle du corps ci-dessus justifie
 * deja leurs paragraphes et leurs listes.
 * Deux autres elements portent ce reglage sans etre affiches sur aucune page
 * (verifie sur les 399 pages le 19/09/2026) : rprdeh, element orphelin du
 * composant « Mot du president », et uuzxjk, texte du composant
 * « Actualite » (modele « Accueil »). Le selecteur que Bricks leur donnerait
 * depend de l'endroit ou ils seraient affiches : ils ne sont pas neutralises
 * ici, leur reglage est a retirer dans Bricks.
 *
 * inherit reproduit l'etat sans le reglage : le retirer dans Bricks ne change
 * donc rien a l'affichage (verifie en ligne le 19/09/2026 sur les 16 pages
 * types). Les regles « ... a » que Bricks genere avec ce reglage ne sont pas
 * neutralisees : elles visent des liens sur une ligne, sans effet visible,
 * et disparaitront avec le reglage. Chaque selecteur depasse d'un cran la
 * specificite de la regle generee par Bricks, quel que soit l'ordre des
 * feuilles. Tant que ce bloc est en place, tout autre alignement choisi dans
 * Bricks pour ces elements serait neutralise lui aussi : il pourra etre
 * retire une fois les reglages supprimes dans Bricks.
 */
body #brxe-zmnjxk .author-bio,
body .brxe-dxvqdr,
body .brxe-bazrgs,
body .brxe-kiyrue,
body .brxe-zwuyjn,
body .brxe-arzlga,
body .brxe-dtwlxv .brxe-ogpqry.brxe-text,
body .brxe-mcvqfu,
body .brxe-czogqf .brxe-uxxxyw.brxe-text {
	text-align: inherit;
}

/* --- 34. Page contact : place reservee aux formulaires --------------------- */

/*
 * Forminator charge ses formulaires en AJAX apres l'affichage (compatibilite
 * avec le cache de page) : la coquille vide ne mesure que quelques pixels,
 * puis le formulaire « Obtenir un devis », ouvert par defaut, pousse le bloc
 * Contact de 1 800 a 2 500 px vers le bas. Mesure Lighthouse du 16/09/2026 :
 * decalage de mise en page (CLS) de 0,60 sur mobile, pour un seuil de 0,1.
 *
 * Hauteurs relevees formulaires charges, de 360 a 1920 px de large. Chaque
 * minimum reste sous la plus petite hauteur de sa plage : aucun blanc ne
 * s'ajoute, et le bloc Contact demarre deja sous le premier ecran. Forminator
 * passe ses champs en colonnes a partir de 783 px.
 *
 * Limite a la page contact : ailleurs, les memes formulaires sont places dans
 * des colonnes d'autres largeurs.
 */
/*
 * Premiere cause, mesuree ensuite : les onglets. Bricks n'ouvre l'onglet par
 * defaut (« Obtenir un devis », le second) qu'une fois son JavaScript execute ;
 * d'ici la, les deux panneaux sont masques et le bloc Contact s'affiche en
 * haut de l'ecran, avant d'etre repousse. Le panneau par defaut est donc
 * affiche des le premier rendu, tant qu'aucun onglet n'est ouvert.
 *
 * Declaration placee dans la couche « bricks » : Bricks masque les panneaux
 * par un !important dans cette couche, qu'aucune regle hors couche ne peut
 * surpasser.
 */
@layer bricks {
	body.page-id-653 .brxe-yinpmj:not(:has(.brx-open)) .brxe-mewxxc {
		display: block !important;
	}
}

body.page-id-653 .forminator-custom-form-9504 {
	min-height: 2400px;
}

body.page-id-653 .forminator-custom-form-11104 {
	min-height: 750px;
}

@media (min-width: 480px) {
	body.page-id-653 .forminator-custom-form-9504 {
		min-height: 2300px;
	}
}

@media (min-width: 783px) {
	body.page-id-653 .forminator-custom-form-9504 {
		min-height: 1800px;
	}

	body.page-id-653 .forminator-custom-form-11104 {
		min-height: 710px;
	}
}

/* --- 35. Mobile : debordements horizontaux (17/09/2026) --------------------- */

/*
 * Constat : sur mobile, la page s'elargissait vers la droite. Releve sur
 * 35 pages types, de 320 a 412 px, au chargement, apres defilement, apres un
 * toucher dans un formulaire et menu ouvert, puis sur tablette. Cinq causes
 * independantes.
 */

/*
 * 1. Badge reCAPTCHA et revelation au defilement (cause principale).
 *
 * La revelation des sections (section 16) animait `transform`. Tant que
 * l'animation s'applique (fill both), la section garde un transform calcule,
 * meme neutre, et devient le bloc conteneur de ses descendants en position
 * fixe. Or reCAPTCHA pose son badge en `position: fixed; right: -186px;
 * width: 256px` dans le formulaire « Nous contacter » : au premier toucher
 * dans ce formulaire, le badge se placait par rapport a la section et non a
 * l'ecran, et la page s'elargissait de 186 px (375 -> 561 px).
 *
 * La revelation devient un simple fondu : l'opacite ne cree pas de bloc
 * conteneur, le badge redevient fixe a l'ecran, sur toutes les pages.
 */
@keyframes cib-apparition-fondu {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@supports (animation-timeline: view()) {
	main > section:not(.brxe-efyvpm):not(:first-of-type),
	main > div:not(.brxe-efyvpm):not(:first-of-type) {
		animation-name: cib-apparition-fondu;
	}
}

/* Le fondu laisse malgre tout la section en contexte d'empilement : le badge
   fixe y restait enferme et passait sous les sections suivantes et le pied
   de page. Des que reCAPTCHA pose un badge flottant dans une section, cette
   section n'est plus animee (elle est deja a l'ecran quand on touche le
   formulaire, le fondu est termine). */
@supports (animation-timeline: view()) {
	main > section:not(.brxe-efyvpm):not(:first-of-type):has(.grecaptcha-badge:not([data-style="inline"])),
	main > div:not(.brxe-efyvpm):not(:first-of-type):has(.grecaptcha-badge:not([data-style="inline"])) {
		animation: none;
	}
}

/* Redevenu fixe, le badge tombait sous la barre d'appel du pied de page
   (#brxe-lmykjl, 69 a 84 px de haut, z-index 100) : la mention reCAPTCHA,
   que Google demande de laisser visible, etait masquee. On le remonte
   au-dessus de la barre. */
.grecaptcha-badge:not([data-style="inline"]) {
	bottom: 98px !important;
}

/*
 * 2. Menu legal du pied de page (#brxe-scqtst).
 * Sous 767 px, Bricks le met en ligne flex sans retour a la ligne : a 320 et
 * 360 px, les six liens et leurs gouttieres (361 px) depassent la colonne
 * (309 px) et « Politique de confidentialite » elargit la page (320 -> 367).
 */
@media (max-width: 766.98px) {
	#brxe-scqtst .bricks-nav-menu {
		flex-wrap: wrap;
	}
}

/*
 * 3. Pagination du carrousel « L'actualite des formations ».
 * 12 puces a pas de 28 px (puce, marges, gap de la section 13), sans retour a
 * la ligne (CSS de l'element brxe-lwosvr) : 328 px pour un carrousel de 309 px
 * a 320 px. La liste est plafonnee a la largeur du carrousel ; sans effet des
 * que la place suffit. Les marges des puces (5 px de chaque cote) depassaient
 * encore des emplacements reduits : ce surplus invisible est rogne, a
 * l'horizontale seulement.
 */
@media (max-width: 781px) {
	.splide__pagination {
		max-width: 100%;
		overflow-x: clip;
	}

	.splide__pagination > li {
		min-width: 0;
	}
}

/*
 * 4. Avis Google (Trustindex).
 * Sous 1024 px, l'extension decale la rangee d'avis de 8 px de chaque cote
 * (.ti-reviews-container-wrapper { margin: 0 -8px }) et compte sur l'overflow
 * du widget pour rogner ce surplus, qu'elle annule ensuite elle-meme
 * (.ti-widget.ti-goog { overflow: visible !important }), ce qui neutralise
 * aussi la regle .ti-widget de la section 12. La rangee depassait l'ecran de
 * 3 px. On rogne le parent direct de la rangee, a l'horizontale seulement.
 */
@media (max-width: 1023px) {
	.ti-widget.ti-goog .ti-reviews-container {
		overflow-x: hidden;
		overflow-x: clip;
	}
}

/*
 * 5. Bloc contact des pages formation (tablette).
 * Entre 767 et 810 px, la colonne « Par mail » est plus etroite que l'adresse
 * contact@cibformation.fr, qui ne se coupe pas : elle depassait de l'ecran de
 * 5 px (768 -> 773). La taille de l'adresse suit la largeur de sa colonne et
 * ne descend qu'au besoin (15,6 px au lieu de 16,8 px a 768 px) ; ailleurs,
 * rien ne change.
 */
.brxe-nybnuy:has(> .brxe-pfpimn a[href^="mailto:"]) {
	container-type: inline-size;
}

.brxe-pfpimn a[href^="mailto:"] {
	font-size: min(1em, calc((100cqi + 2rem) / 10.9));
}

/* --- 36. Carte du pied de page en attente du consentement (17/09/2026) ------ */

/*
 * Tant que le visiteur n'a pas accepte les cookies « Experience », le module
 * cib-bandeau-cookies.php remplace l'iframe Google Maps par cet encart. Aucun
 * appel a Google : fond de plan dessine en CSS, repere en SVG.
 *
 * L'encart garde la hauteur de la carte (300 px) mais peut grandir : colonne
 * etroite du pied de page entre 991 et 1017 px, police agrandie par le
 * visiteur ou espacement du texte augmente (WCAG 1.4.12). Le focus clavier
 * reprend l'anneau du site (section 15).
 */
.brxe-map.brxe-map:has(> .cib-carte) {
	height: auto;
	min-height: 300px;
	overflow: visible;
	container-type: inline-size;
}

.brxe-map .cib-carte {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	gap: 0.6rem;
	width: 100%;
	min-height: 300px;
	padding: 1.25rem 1rem;
	color: #fff;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.07);
	background-image:
		linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.07) 49%, transparent 49%),
		linear-gradient(24deg, transparent 63%, rgba(255, 255, 255, 0.05) 63%, rgba(255, 255, 255, 0.05) 65%, transparent 65%),
		linear-gradient(rgba(255, 255, 255, 0.04) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 2px, transparent 2px);
	background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
}

.brxe-map .cib-carte p {
	margin: 0;
	max-width: 32ch;
	text-align: center;
	text-wrap: balance;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.brxe-map .cib-carte__repere {
	flex: none;
	color: #fd890b;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.brxe-map .cib-carte__adresse {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4;
}

.brxe-map .cib-carte__info {
	font-size: 0.875em;
	line-height: 1.45;
}

.brxe-map .cib-carte__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	margin-top: 0.25rem;
}

.brxe-map .cib-carte__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.4em 1.2em;
	color: #582a7a;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	background: #fff;
	border-radius: 999px;
	transition: background-color 0.15s;
}

.brxe-map .cib-carte__bouton:hover {
	background: #cc3;
}

.brxe-map .cib-carte__lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.5em;
	color: #fff;
	font-size: 0.875em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.brxe-map .cib-carte__lien:hover {
	text-decoration-thickness: 2px;
}

.brxe-map .cib-carte .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Colonne etroite (pied de page sur trois colonnes, 991 a 1017 px). */
@container (max-width: 220px) {
	.brxe-map .cib-carte {
		gap: 0.45rem;
		padding: 1rem 0.6rem;
	}

	.brxe-map .cib-carte__bouton {
		padding-inline: 0.6em;
		white-space: nowrap;
	}
}

/* Colonne ecrasee par une police agrandie ou un espacement du texte augmente :
   la carte y serait invisible ; l'encart ne doit pas deborder sur les blocs
   voisins. */
@container (max-width: 120px) {
	.brxe-map .cib-carte {
		visibility: hidden;
	}
}

/* Reglages du bandeau : l'extension retire le contour de focus de ses
   interrupteurs ; le bouton « Autoriser la carte » y place le focus. */
.modal-cacsp-position .modal-cacsp-box.modal-cacsp-box-settings .modal-cacsp-box-settings-list ul li a.modal-cacsp-toggle-switch:focus-visible {
	outline: 3px solid #582a7a;
	outline-offset: -3px;
}

/* --- 37. Temps de lecture des articles : place reservee avant le calcul --- */
/* Bricks remplit ce bloc en JavaScript, apres le premier affichage. En mobile,
   le texte ajoute passait alors a la ligne et poussait le bloc auteur de 33 px
   (decalage de mise en page 0,155 sur les articles). Un texte invisible de
   meme largeur occupe la place tant que le bloc est vide. */
.brxe-post-reading-time:empty::after {
	content: attr(data-prefix) "0" attr(data-suffix);
	visibility: hidden;
}

/* --- 38. Videos YouTube en attente du consentement (18/09/2026) ------------ */

/*
 * Tant que le visiteur n'a pas accepte les cookies « Experience », le module
 * cib-bandeau-cookies.php (1.3.0) remplace chaque video YouTube par cet
 * encart. Aucun appel a YouTube, pas meme la vignette : icone en SVG, fond en
 * CSS.
 *
 * L'encart occupe exactement la boite de la video, sans decalage :
 * - element Video de Bricks : il couvre l'element, comme l'iframe (16/9, ou
 *   etire a la hauteur du texte, section « Video du centre de formation ») ;
 * - iframe collee dans le contenu des articles : il reprend sa largeur et sa
 *   hauteur (attributs width et height transmis en variables), se limite
 *   comme elle a la largeur du texte et s'aligne sur la meme ligne de base.
 * Le contenu se resserre selon la place (requetes de conteneur) et defile au
 * lieu de deborder si la police est tres agrandie (WCAG 1.4.4 et 1.4.12). Le
 * focus clavier reprend l'anneau du site (section 15).
 */
.cib-video {
	box-sizing: border-box;
	display: block;
	overflow: auto;
	overscroll-behavior: contain;
	container-type: size;
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: center;
	text-indent: 0;
	-webkit-hyphens: manual;
	hyphens: manual;
	background-color: #2b1438;
	background-image:
		radial-gradient(ellipse 70% 60% at 50% 38%, rgba(88, 42, 122, 0.95), rgba(88, 42, 122, 0) 72%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%);
	border-radius: 6px;
}

/* Element Video de Bricks : meme place que l'iframe (position absolue). */
.brxe-video > .cib-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* Iframe du contenu : meme boite et meme alignement dans la ligne. */
.cib-video.cib-video--libre {
	display: inline-block;
	vertical-align: baseline;
	width: var(--cib-video-l, 300px);
	height: var(--cib-video-h, 150px);
	max-width: 100%;
}

/* Video de l'editeur de blocs a proportions fixes (aucune au 18/09/2026) :
   WordPress y place l'iframe en position absolue ; l'encart fait de meme. */
.wp-embed-responsive .wp-has-aspect-ratio .cib-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.cib-video__corps {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	gap: 0.5rem;
	min-height: 100%;
	padding: 1rem 1.25rem;
}

.cib-video__icone {
	flex: none;
	color: #fd890b;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.cib-video__surtitre {
	display: block;
	color: #e7d6f3;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cib-video__titre {
	display: -webkit-box;
	max-width: 34ch;
	overflow: hidden;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cib-video__info {
	display: block;
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.875em;
	line-height: 1.45;
	text-wrap: balance;
}

.cib-video__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	margin-top: 0.25rem;
}

/* Liens de l'encart : proteges des styles de liens du contenu des articles. */
.cib-video .cib-video__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.4em 1.2em;
	color: #582a7a;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	background: #fff;
	border-radius: 999px;
	transition: background-color 0.15s;
}

.cib-video .cib-video__bouton:hover {
	color: #582a7a;
	background: #cc3;
}

.cib-video .cib-video__lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.5em;
	color: #fff;
	font-size: 0.875em;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cib-video .cib-video__lien:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

.cib-video .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Place reduite : l'icone, puis le surtitre et l'explication s'effacent ;
   titre et actions restent. */
@container (max-height: 279px) {
	.cib-video__icone {
		display: none;
	}

	.cib-video__corps {
		gap: 0.4rem;
		padding: 0.75rem 1rem;
	}
}

@container (max-height: 219px) {
	.cib-video__surtitre {
		display: none;
	}

	.cib-video__titre {
		-webkit-line-clamp: 1;
	}

	.cib-video__info {
		font-size: 0.8125em;
	}
}

/* Telephone de 320 px (video de 174 px de haut) : les deux liens passent sur
   deux lignes ; l'explication n'est plus affichee mais reste lue par les
   lecteurs d'ecran. */
@container (max-height: 189px) {
	.cib-video__info {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

@container (max-width: 360px) {
	.cib-video__corps {
		padding-inline: 0.75rem;
	}

	.cib-video__titre {
		font-size: 1em;
	}

	.cib-video .cib-video__bouton {
		padding-inline: 0.9em;
	}
}

/* --- 39. Contrastes des couleurs : niveau WCAG AA (19/09/2026) ------------- */

/*
 * Constat : Lighthouse (7 pages types, mobile et ordinateur) relevait des
 * textes en contraste insuffisant sur toutes les pages types, et 2 liens
 * indiscernables du texte. Un balayage des 399 pages, un controle apres
 * defilement complet et un audit des etats survol et focus en ajoutent
 * d'autres, que Lighthouse ne voit pas : il ne controle ni les survols, ni le
 * contenu des sections encore invisibles avant defilement (section 16).
 *
 * Seuils : 4,5:1 pour le texte courant, 3:1 pour le texte large (24 px, ou
 * 18,66 px en gras).
 *
 * Principe : la meme teinte, assombrie juste ce qu'il faut. Les fonds et les
 * couleurs de marque ne changent pas ; les textes du client non plus, seule
 * leur mise en forme. Les rapports indiques ont ete mesures dans la page.
 */

/*
 * 1. Boutons vert-jaune (.btn.secondary de Core Framework).
 * Texte blanc sur #cc3 : 1,71:1, et 2,81:1 au survol (#9f9f2d). Concerne la
 * barre d'appel fixe du pied de page, sur toutes les pages (« Besoin d'aide ? »
 * sur mobile, « Demandez un devis pour votre formation » sur ordinateur),
 * « Acheter cette formation » dans les carrousels de formations et dans les
 * deux blocs de formation de l'accueil. Meme remede que le bouton d'achat des
 * pages formation (section 19) : l'encre passe au vert tres fonce de la meme
 * famille, le vert-jaune reste.
 * #24230f : 9,27:1 sur #cc3, 5,65:1 sur #9f9f2d (survol).
 */
.btn.secondary {
	color: #24230f;
}

/* La barre d'appel pose son propre blanc sur le texte et l'icone (regles par
   identifiant de Bricks). L'ombre portee ne servait qu'a detacher le texte
   blanc : sous une encre foncee, elle salit le trait. */
#brxe-lmykjl .btn.secondary,
#brxe-lmykjl .btn.secondary .brxe-text,
#brxe-lmykjl .btn.secondary .brxe-text a,
#brxe-lmykjl .btn.secondary .brxe-icon {
	color: #24230f;
	text-shadow: none;
}

/*
 * 2. Boutons orange (.btn.tertiary) : « Programme de la formation » dans les
 * carrousels. Orange #fd890b sur #fff9f3 : 2,29:1. Meme orange assombri,
 * #a05400 : 5,34:1.
 * Au survol, Core Framework remplit le bouton d'orange et passe le texte en
 * blanc : 2,40:1. Le remplissage prend le meme orange assombri : 5,58:1.
 * Selecteurs a.btn : la feuille de Core Framework est chargee apres
 * refresh.css ; a specificite egale, elle l'emporterait.
 */
a.btn.tertiary {
	color: #a05400;
}

a.btn.tertiary:hover {
	background: #a05400;
	color: #fff;
}

/*
 * 3. Titres des cartes de formation (carrousels, accueil et 20 pages
 * formation) : blanc sur le bandeau lilas #bca6c9 (--primary-l-3), 2,23:1.
 * Le titre prend le violet de marque, la couleur qu'il affichait deja au
 * survol (section 20) : 4,65:1. Au survol et au focus clavier, violet fonce
 * (--primary-d-2) : 6,58:1, la carte garde sa reaction.
 */
.brxe-zrofou .brxe-ufrdlj {
	color: var(--primary, #582a7a);
}

.brxe-zrofou:hover .brxe-ufrdlj,
.brxe-zrofou:focus-within .brxe-ufrdlj {
	color: var(--primary-d-2, #371d49);
}

/*
 * 4. Cartes du blog.
 * Date « Derniere modification » : violet tres sombre a 55 % d'opacite sur
 * blanc, 4,13:1 a 13 px. Corrige dans la section 11 elle-meme (0.55 devient
 * 0.6, 4,87:1) : sa regle est en !important, la surcharger ici en
 * demanderait un autre.
 *
 * « Lire l'article » : orange #fd890b sur #ffe7d1, 2,01:1. Meme orange
 * assombri que les boutons orange : 4,68:1. Aucun etat de survol propre, la
 * carte entiere est le lien.
 */
a.brxe-dtwlxv .brxe-xjrmyn.brxe-button {
	color: #a05400;
}

/*
 * 5. Chiffres cles de l'accueil : au survol d'une carte, le chiffre passait a
 * l'orange de marque, 2,40:1 sur blanc. Sur mobile, « 24 H » descend a 21 px,
 * sous le seuil du texte large : il faut 4,5:1. Corrige dans la section 18
 * elle-meme (meme orange assombri, #a05400 : 5,58:1), pour la meme raison
 * qu'au point 4.
 */

/*
 * 6. Formulaires.
 * Libelles des cases a cocher et des boutons radio de Forminator : ils
 * heritaient du gris clair que Bricks donne a tout <label> (#9e9e9e),
 * 2,46:1 sur le fond #f5f5f5 des formulaires d'articles, 2,68:1 sur blanc.
 * Gris « attenue » du theme (--bricks-text-muted), meme famille : 5,68:1 et
 * 6,19:1. Les intitules des questions gardent leur couleur (section 8).
 */
.forminator-ui .forminator-checkbox,
.forminator-ui .forminator-radio {
	color: var(--bricks-text-muted, #616161);
}

/* Formulaire des articles (Forminator 9504) : l'asterisque des champs
   obligatoires et les messages d'erreur sont en rouge #e51919, 4,30:1 sur le
   fond gris des articles. Meme rouge assombri, #d41616 : 4,91:1 (5,35:1 sur
   blanc). Forminator ecrit ces couleurs avec l'identifiant du formulaire et
   quatre classes, dans une feuille chargee apres refresh.css : une classe de
   plus suffit a passer devant, sans !important. */
#forminator-module-9504.forminator-custom-form-9504.forminator-custom-form.forminator-ui .forminator-label .forminator-required,
#forminator-module-9504.forminator-custom-form-9504.forminator-custom-form.forminator-ui .forminator-error-message {
	color: #d41616;
}

/* Champ e-mail de la lettre d'information (accueil) : MailPoet ecrit la
   saisie et l'indication en #abb8c3 sur #eeeeee, 1,74:1. Faute de libelle
   visible, l'indication tient lieu de libelle. Meme gris bleute assombri,
   #5a6d7e : 4,61:1. !important : la couleur de saisie est un style en ligne
   pose par MailPoet ; l'indication, elle, n'en a pas besoin. */
.mailpoet_form .mailpoet_text {
	color: #5a6d7e !important;
}

.mailpoet_form .mailpoet_text::placeholder {
	color: #5a6d7e;
}

/*
 * 7. Legendes des images d'articles (47 articles) : gris clair de Bricks
 * #9e9e9e, 2,68:1 sur blanc, 2,46:1 sur #f5f5f5. Meme gris attenue que les
 * libelles : 6,19:1 et 5,68:1. Les legendes posees sur une image (galeries)
 * gardent le blanc de WordPress, qui a une regle plus precise.
 */
.wp-caption-text,
.wp-element-caption {
	color: var(--bricks-text-muted, #616161);
}

/*
 * 8. Couleurs posees par le client dans ses textes. Le texte ne change pas,
 * seule sa couleur est assombrie.
 *
 * Numeros « 1. 2. 3. » de « Qui sommes-nous ? » (accueil) : style en ligne
 * « color: #fd890b !important », 2,40:1 sur blanc, 2,20:1 sur #f5f5f5
 * (mobile). Un style en ligne marque !important l'emporte sur toute feuille
 * de style, meme en !important : seule la propriete -webkit-text-fill-color,
 * qui prime sur color pour peindre le texte (tous les navigateurs actuels),
 * permet de l'assombrir, sans !important. Meme orange assombri, #a05400 :
 * 5,58:1 et 5,12:1.
 */
main span[style*="color: #fd890b" i]:not([style*="background" i]) {
	-webkit-text-fill-color: #a05400;
}

/* Rouge vif #ff0000, pose en gras dans 60 articles. Les mises en garde en
   taille normale (8 passages, 4 articles) : 3,67:1 sur le fond #f5f5f5 des
   articles, 3,50:1 dans une citation, seuil 4,5:1. Les numeros de telephone
   en 14 pt gras (texte large, seuil 3:1) passaient deja : ils suivent, pour
   garder un seul rouge. Meme rouge assombri, #d80000 : 4,91:1 et 4,69:1.
   !important : la couleur est un style en ligne. */
main [style*="color: #ff0000" i]:not([style*="background" i]) {
	color: #d80000 !important;
}

/* Bouton « En savoir plus » et son signe + (extension WP Service Box, seul
   encadre du site, n° 794, article « Lanceur d'alerte ») : #dd9527 sur
   #f5f5f5, 2,29:1 a 22 px ; #dd8d16 au survol, 2,44:1. Meme orange assombri :
   #966418, 4,66:1 ; au survol #9b630f, 4,60:1. !important au survol :
   l'extension ecrit sa couleur de survol en !important dans la page. */
.wpsm_serviceBox_794 a.wpsm_read_more,
.wpsm_serviceBox_794 a.wpsm_read_more i {
	color: #966418;
}

.wpsm_serviceBox_794 a.wpsm_read_more:hover,
.wpsm_serviceBox_794 a.wpsm_read_more:hover i {
	color: #9b630f !important;
}

/* Annees du parcours de la page auteur (section 23) : orange #fd890b sur
   blanc, 2,40:1. Texte large (25,6 a 36 px en gras, seuil 3:1) : l'orange
   n'est assombri que jusqu'a #d67002, 3,40:1. */
.cib-auteur-etapes .cib-auteur-etape__annee {
	color: #d67002;
}

/*
 * 9. Menu de l'en-tete (toutes les pages).
 * Sur ordinateur, les sous-menus sont des panneaux orange (#fd890b) aux liens
 * blancs : 2,40:1 ; ceux du menu « Formations IOBSP-IAS » ouvrent a leur
 * tour des panneaux vert-jaune (#cc3) : 1,71:1. Les panneaux gardent leurs
 * couleurs ; l'encre passe au ton tres fonce de la meme famille, comme pour
 * les boutons vert-jaune : orange tres fonce de la palette (--tertiary-d-4)
 * sur l'orange, 6,45:1 ; vert tres fonce sur le vert-jaune, 9,27:1.
 * Meme borne que les regles de Bricks (1279 px) ; le prefixe #brx-header les
 * fait passer devant sans !important.
 */
@media (min-width: 1279px) {
	#brx-header #brxe-cibsm1,
	#brx-header #brxe-nmtdiy,
	#brx-header #brxe-qgpqeg {
		color: var(--tertiary-d-4, #34200e);
	}

	#brx-header #brxe-nmtdiy .brx-dropdown-content {
		color: #24230f;
	}
}

/* Jusqu'a 1279 px, le menu s'ouvre en plein ecran sur fond blanc, mais ses
   liens gardent le vert-jaune prevu pour la barre violette : 1,71:1. Meme
   vert-jaune assombri (--secondary-d-2) : 4,97:1. Les fleches des sous-menus
   suivent la meme couleur. */
@media (max-width: 1279px) {
	#brxe-siuhjh .brx-nav-nested-items > li > a,
	#brxe-siuhjh .brx-nav-nested-items > li > .brx-submenu-toggle > * {
		color: var(--secondary-d-2, #747325);
	}
}

/*
 * 10. Liens dans le texte courant : soulignes.
 * La section 6 voulait des liens « soulignes et distincts », mais ne posait
 * que l'epaisseur et le decalage du trait : le soulignement lui-meme restait
 * desactive par Bricks (:where(a) { text-decoration: none }). Sur
 * ordinateur, le violet des liens ne se distingue du texte que par 1,16:1
 * (3:1 exige sans soulignement) ; sous 1279 px, les liens ont exactement la
 * couleur du texte et sont invisibles. Lighthouse n'en relevait que 2 : il
 * considere a tort l'epaisseur seule comme un soulignement, et ne signale pas
 * un lien de la meme couleur que le texte (verifie avec axe-core 4.13).
 * Portee : contenu des articles et blocs de texte Bricks du contenu principal.
 * Les boutons et les liens d'image ne sont pas concernes.
 * [href] : seuls les vrais liens sont soulignes. Dans 23 articles, 32
 * balises <a> sans adresse (texte colle depuis d'autres outils) ne sont pas
 * cliquables : soulignees, elles passeraient pour des liens.
 * Exclusions dans :where() : la regle garde la force d'une classe, d'un
 * attribut et d'une balise (0,2,1), juste de quoi passer devant la remise a
 * zero de Bricks. Un composant qui regle son soulignement avec un seul
 * niveau de classe (0,2,0) perdrait contre elle : ses boutons sont donc
 * exclus nommement (boutons de la FAQ, boutons « Autoriser » des encarts
 * video et carte en attente du consentement, section 38).
 */
.brxe-post-content a[href]:where(:not(.brxe-button, .bricks-button, .wp-block-button__link, .wp-block-file__button, .wpsm_read_more, .cib-faq-cta__bouton, .cib-video__bouton, .cib-carte__bouton, :has(img))),
main .brxe-text a[href]:where(:not(.brxe-button, .bricks-button, .cib-video__bouton, .cib-carte__bouton, :has(img))) {
	text-decoration-line: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

/*
 * 11. Avis Google (extension Trustindex, 24 pages : accueil, pages formation,
 * page des avis). « Lire la suite », sous les avis longs, est ecrit en noir a
 * 50 % d'opacite sur le fond #f4f4f4 des avis, soit #7a7a7a : 3,90:1 a
 * 13,5 px. Meme noir a 60 % : #626262, 5,55:1. Au survol, Trustindex le passe
 * deja a 100 %. Sa feuille est chargee apres refresh.css : la classe
 * .ti-review-item donne a la regle la precision necessaire, sans !important,
 * et laisse gagner la regle de survol de Trustindex.
 */
.ti-widget.ti-goog .ti-review-item .ti-read-more span {
	opacity: 0.6;
}

/* --- 39 bis (option). Apparition au defilement : section deja a l'ecran --- */

/*
 * La section qui suit le heros depasse souvent deja en bas de l'ecran au
 * chargement. L'apparition au defilement (sections 16 et 35) la laisse alors
 * voilee tant que l'on n'a pas fait defiler : son opacite suit la part deja
 * entree dans l'ecran, sur 240 px. Releves au chargement :
 * - accueil (« Qui sommes-nous ? ») : a l'ecran de 320 x 568 a 1920 x 1080 ;
 *   voilee a 43 % d'opacite a 320 x 568, de 73 a 82 % sur les telephones de
 *   360 a 375 px, de 33 a 78 % sur ordinateur (1024 x 768 a 1536 x 864) ;
 * - page formation IOBSP niveau 1 : voilee a 36 % a 1350 x 940 (texte a
 *   2,08:1, 154 echecs de contraste comptes par Lighthouse), a 69 % sur
 *   tablette en portrait (768 x 1024), a 72 % a 1920 x 1080 ; sur
 *   telephone, elle commence sous le bas de l'ecran (45 px plus bas a
 *   412 x 823) ;
 * - page e-learning, page de financement : sous le bas de l'ecran, sauf
 *   a 1920 x 1080 pour la seconde (19 %, cachee par la barre d'appel).
 * La barre d'appel fixe du pied de page (69 a 85 px) en masque une partie.
 * Le voile depend de la hauteur de la page et de celle de l'ecran, pas de
 * la largeur : la regle vaut pour toutes les tailles d'ecran. Comme pour la
 * premiere section (section 16, point 2), la deuxieme n'est plus animee.
 * Contrepartie : la ou elle est sous la ligne de flottaison (page formation
 * sur telephone, page e-learning, par exemple), elle s'affiche sans fondu
 * quand on y arrive.
 * Les sections suivantes gardent l'effet.
 * Meme specificite que les regles des sections 16 et 35 : placee apres
 * elles, cette regle l'emporte sans !important.
 *
 * Section facultative. Pour rendre le fondu a cette deuxieme section :
 * supprimer tout ce bloc, de son titre « 39 bis » jusqu'a l'accolade qui
 * ferme le @supports ci-dessous, puis vider le cache (WP Fastest Cache,
 * bouton « Vider le cache et les CSS/JS minifies »).
 */
@supports (animation-timeline: view()) {
	main > section:not(.brxe-efyvpm):nth-child(2),
	main > div:not(.brxe-efyvpm):nth-child(2) {
		animation: none;
	}
}

/* --- 40. Articles : bloc « À lire aussi » (19/09/2026) --------------------- */

/*
 * Bloc ajoute par mu-plugins/cib-a-lire-aussi.php juste apres l element de
 * contenu de chaque article (.brxe-post-content), en dehors de lui : le temps
 * de lecture de Bricks, qui compte le texte de cet element, ne change pas.
 * En ligne, il se place entre le texte et l encart promotionnel du gabarit,
 * dans la meme colonne.
 *
 * Hors de l element de contenu, il n en herite plus la typographie : la
 * taille et l interligne du texte des articles (section 6) sont repris ici.
 * Le bloc qui l entoure en ligne n etire pas ses enfants : la largeur est
 * donc posee (100 %), puis plafonnee comme avant.
 *
 * Encadre sobre dans l esprit de la signature de l auteur (fond violet a
 * 3,5 %, filet fin), avec un filet de marque a gauche. Sa largeur suit la
 * mesure des paragraphes (68ch) : il ne deborde pas de la colonne de texte.
 */
.cib-lire-aussi {
	box-sizing: border-box;
	width: 100%;
	max-width: 68ch;
	/* Marge basse : en ligne, l encart promotionnel du gabarit (formulaire de
	   devis) suit immediatement le bloc. */
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.75rem);
	border: 1px solid rgba(31, 12, 44, 0.1);
	border-left: 4px solid var(--primary, #582a7a);
	border-radius: var(--radius-m, 0.75rem);
	background-color: rgba(88, 42, 122, 0.035);
	font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.15rem);
	line-height: 1.7;
}

/* Intertitre a l echelle d un h3 du texte : il annonce une annexe, pas une
   nouvelle partie de l article. La balise h2 reste, pour la structure. */
.cib-lire-aussi .cib-lire-aussi__titre {
	position: static;
	max-width: none;
	margin: 0 0 0.8rem;
	padding: 0;
	color: var(--primary, #582a7a);
	font-size: clamp(1.2rem, 0.8vw + 1rem, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
}

/* Pas de trait degrade sous ce titre, meme si la regle des intertitres
   d articles (section 27) venait a le viser. */
.cib-lire-aussi .cib-lire-aussi__titre::after {
	content: none;
}

.cib-lire-aussi .cib-lire-aussi__liste {
	display: grid;
	gap: 0.65rem;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cib-lire-aussi .cib-lire-aussi__element {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	/* Titres courts : ni justification ni cesure. Interligne des listes du
	   contenu (1,55). */
	line-height: 1.55;
	text-align: left;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Fleche de la navigation « article suivant » (section 29), en violet. */
.cib-lire-aussi .cib-lire-aussi__element::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23582a7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cib-lire-aussi .cib-lire-aussi__lien {
	color: var(--primary, #582a7a);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(88, 42, 122, 0.35);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	/* Un mot tres long ne doit pas elargir la page sur un ecran de 320 px. */
	overflow-wrap: anywhere;
	transition: text-decoration-color 200ms ease;
}

.cib-lire-aussi .cib-lire-aussi__lien:hover,
.cib-lire-aussi .cib-lire-aussi__lien:focus-visible {
	text-decoration-color: currentColor;
}

.cib-lire-aussi .cib-lire-aussi__lien:focus-visible {
	outline: 3px solid var(--tertiary, #fd890b);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cib-lire-aussi .cib-lire-aussi__lien {
		transition: none;
	}
}

/* Filet pour un gabarit sans le bloc qui entoure le texte en ligne, ou
   l element de contenu est pose directement dans le conteneur du gabarit
   (c est le cas de la copie locale du 11/09). Ce conteneur est une colonne
   inversee (la table des matieres s affiche en premier), puis une grille a
   deux colonnes a partir de 1279 px. Sans ces regles, le bloc s y afficherait
   au-dessus du texte, ou sous la table des matieres. Sans effet en ligne, ou
   le bloc n est pas un enfant direct de ce conteneur.
   A surveiller : si le gabarit Articles en ligne etait un jour reconstruit
   avec l element de contenu en enfant direct de cette grille, order: -1
   ferait remonter le bloc au-dessus du texte sous 1279 px. Il faudrait alors
   retirer ces deux regles. */
.brxw-article-body-02__content-grid > .cib-lire-aussi {
	order: -1;
}

@media (min-width: 1279px) {
	.brxw-article-body-02__content-grid > .cib-lire-aussi {
		order: 0;
		grid-column: -2;
	}
}


/* --- 41. Gabarits : niveaux de titres et photo de la bio (19/09/2026) ----- */
/*
 * Compagnon du module mu-plugins/cib-gabarits.php, qui change au rendu la
 * balise de trois titres de gabarit (audit Lighthouse « heading-order ») et
 * fait de la photo de Pascal Cherin un lien vers sa page auteur. Chaque regle
 * rend a l'element le style exact de son ancienne balise, verifie propriete
 * par propriete de 320 a 1366 px. Elles visent la nouvelle balise ou le
 * nouveau lien : sans le module, elles ne s'appliquent a rien.
 */

/* Cartes de la page Blog : titre h3 devenu h2. Graisse des h3 (Core
   Framework donne 600 aux h2), et pas du trait degrade des intertitres de
   section (section 10, regle plus specifique, d'ou les !important, comme
   pour la taille du titre en section 11). */
.brxe-dtwlxv h2.brxe-gsscvy {
	position: static !important;
	padding-bottom: 0 !important;
	font-weight: 500;
}

.brxe-dtwlxv h2.brxe-gsscvy::after {
	content: none !important;
}

/* Questions de la FAQ des fiches formation : h4 devenu h3. Graisse et
   interligne des h4 de Core Framework. */
h3.brxe-gcsvgq {
	font-weight: 400;
	line-height: 1.1;
}

/* Liens « Article precedent / suivant » : titre h5 devenu span. Proprietes
   que le h5 recevait de Bricks, du style de theme et du navigateur : le
   texte revient a la ligne comme avant (deux lignes au plus, section 29) au
   lieu de rester sur une seule ligne (white-space: nowrap de Bricks). */
.brxe-post-navigation span.title {
	text-rendering: optimizeLegibility;
	text-wrap: pretty;
	unicode-bidi: isolate;
}

/* Photo de la bio devenue lien (a.cib-lien-bio, pose par le module autour de
   l'image) : l'anneau de focus de la section 15 est trace autour de la photo
   et non autour du lien, plus large et plus haut qu'elle sur ordinateur. */
.brxe-cftbcn .cib-lien-bio:focus-visible {
	outline: none;
}

.brxe-cftbcn .cib-lien-bio:focus-visible .brxe-guiyoa {
	outline: 3px solid var(--secondary, #cc3);
	outline-offset: 3px;
}