/*
Theme Name: Bricks Child - Formation Secourisme IDF
Theme URI: https://www.formation-secourisme-idf.fr
Description: Thème enfant de Bricks pour le site Formation Secourisme IDF (Séverine Fagard). Accueille le code personnalisé (fonctions, polices, hooks) afin qu'il survive aux mises à jour du thème parent Bricks.
Author: Ouinet.fr
Template: bricks
Version: 1.2.21
Text Domain: bricks-child
*/

/* -------------------------------------------------------------------------
   Règles de thème uniquement.
   Tout ce qui relève de la mise en page d'un élément Bricks se fait dans
   Bricks (controls natifs), PAS ici. Ne sont admises ici que (a) les
   propriétés CSS pour lesquelles Bricks n'expose aucun contrôle, et
   (b) l'habillage de plugins tiers / shortcodes PHP dont le balisage
   n'est pas un élément Bricks et n'a donc aucun control natif possible.
   ------------------------------------------------------------------------- */

/* Effet verre dépoli du header collant : Bricks n'a pas de contrôle
   « backdrop-filter » (il ne propose que « filter » via CSS Filters). */
#brx-header {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* -------------------------------------------------------------------------
   Menu du header : trait animé sous le lien survolé / actif.
   Le control natif "menuBorder" ne peut afficher qu'une bordure statique
   (apparaît/disparaît d'un coup) — aucun control Bricks ne permet une
   transition transform:scaleX (trait qui "grandit" depuis le centre).
   ------------------------------------------------------------------------- */
.bricks-nav-menu > li > a,
.bricks-nav-menu > li > .brx-submenu-toggle > a {
	position: relative;
}

.bricks-nav-menu > li > a::after,
.bricks-nav-menu > li > .brx-submenu-toggle > a::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 2px;
	height: 2px;
	background: #C2570F;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}

/* Actif aussi quand on consulte une page ENFANT du menu (« Les formations »
   → page d'une formation) : WordPress pose alors current-menu-parent /
   current-menu-ancestor sur l'item de premier niveau, dont le libellé est
   imbriqué dans .brx-submenu-toggle (et non un <a> direct). */
.bricks-nav-menu > li:hover > a::after,
.bricks-nav-menu > li:hover > .brx-submenu-toggle > a::after,
.bricks-nav-menu > .current-menu-item > a::after,
.bricks-nav-menu > .current-menu-parent > a::after,
.bricks-nav-menu > .current-menu-ancestor > a::after,
.bricks-nav-menu > .current-menu-item > .brx-submenu-toggle > a::after,
.bricks-nav-menu > .current-menu-parent > .brx-submenu-toggle > a::after,
.bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > a::after {
	transform: scaleX(1);
}

/* Sous-menu : l'entrée correspondant à la page consultée est mise en
   évidence (fond crème), en plus de la couleur héritée des controls Bricks. */
.bricks-nav-menu > li > .sub-menu {
	overflow: hidden;
}

.bricks-nav-menu .sub-menu > li.current-menu-item > a {
	background-color: #FFF3E6;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Formulaire de contact (Gravity Forms) — habillage aux couleurs du site.
   Gravity Forms n'est pas un élément Bricks : aucun control natif ne
   permet de le styler, d'où ce CSS scopé à .gform_wrapper uniquement.
   ------------------------------------------------------------------------- */
.gform_wrapper.gravity-theme {
	font-family: 'Libre Franklin', system-ui, sans-serif;
}

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #55351D;
	margin-bottom: 8px;
}

.gform_wrapper.gravity-theme .gfield_required {
	color: #C2570F;
}

.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme select {
	font-family: 'Libre Franklin', system-ui, sans-serif;
	font-size: 15px;
	color: #55351D;
	background: #FFFCF8;
	border: 1px solid #E4D3BE;
	border-radius: 12px;
	padding: 13px 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.gform_wrapper.gravity-theme textarea {
	border-radius: 16px;
}

.gform_wrapper.gravity-theme input[type=text]:focus,
.gform_wrapper.gravity-theme input[type=email]:focus,
.gform_wrapper.gravity-theme input[type=tel]:focus,
.gform_wrapper.gravity-theme input[type=url]:focus,
.gform_wrapper.gravity-theme input[type=number]:focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper.gravity-theme select:focus {
	border-color: #C2570F;
	box-shadow: 0 0 0 3px rgba(194,87,15,.12);
	outline: none;
}

.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
	color: #B7A995;
}

/* Espacement entre les champs, cohérent avec le rythme vertical du site */
.gform_wrapper.gravity-theme .gfield {
	margin-bottom: 4px;
}

.gform_wrapper.gravity-theme .top_label .gfield_label + .ginput_container {
	margin-top: 4px;
}

/* Choix "Vous êtes ?" (case à cocher) : pastilles cliquables cohérentes avec les CTA du site */
.gform_wrapper.gravity-theme .ginput_container_checkbox .gchoice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	background: #FFF3E8;
	color: #8A4418;
	margin: 0 8px 8px 0;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .ginput_container_checkbox input[type=checkbox] {
	accent-color: #C2570F;
}

/* Consentement RGPD */
.gform_wrapper.gravity-theme .gfield--type-consent label {
	font-size: 13.5px;
	color: #5C4A3C;
}

.gform_wrapper.gravity-theme .gfield--type-consent input[type=checkbox] {
	accent-color: #C2570F;
	margin-top: 3px;
}

/* Bouton d'envoi : même style que les CTA Bricks du site */
.gform_wrapper.gravity-theme .gform_footer {
	margin-top: 12px;
}

.gform_wrapper.gravity-theme .gform_button {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
	background: #C2570F;
	border: none;
	border-radius: 999px;
	padding: 15px 34px;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(194,87,15,.28);
	transition: transform .25s ease, box-shadow .25s ease;
}

.gform_wrapper.gravity-theme .gform_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(194,87,15,.36);
	background: #C2570F;
}

/* Messages de validation */
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .gfield_description.validation_message {
	font-size: 13px;
	color: #C02B0A;
	margin-top: 6px;
}

.gform_wrapper.gravity-theme .gform_confirmation_message {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	color: #5E7639;
	background: #E9F0D6;
	border-radius: 16px;
	padding: 24px;
}

/* -------------------------------------------------------------------------
   Maillage interne des pages locales (shortcodes fsi_breadcrumb_departement
   et fsi_villes_proximite, cf. functions.php). Sortie HTML générée en PHP
   (logique par-post, impossible en arbre Bricks statique partagé par les
   59 pages) : habillage volontairement sobre, discret — une liste utile,
   pas un bloc de liens tape-à-l'œil.
   ------------------------------------------------------------------------- */
.fsi-nearby {
	font-family: 'Libre Franklin', system-ui, sans-serif;
}

.fsi-nearby-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #55351D;
	margin: 0 0 10px;
}

.fsi-nearby-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.fsi-nearby-list li a {
	display: inline-block;
	font-size: 13.5px;
	color: #6A543F;
	background: #F5EDE3;
	border: 1px solid #F0E2D3;
	border-radius: 999px;
	padding: 6px 14px;
	text-decoration: none;
}

.fsi-nearby-list li a:hover {
	color: #C2570F;
	border-color: #C2570F;
}

.fsi-nearby-more a {
	font-size: 13.5px;
	font-weight: 600;
	color: #A94E0C;
}

/* Annuaire des villes (pages "hub" département uniquement, 337 et 366) */
.fsi-city-directory {
	column-count: 3;
	column-gap: 32px;
}

.fsi-city-directory a {
	display: block;
	font-size: 14px;
	color: #56514A;
	padding: 5px 0;
	text-decoration: none;
	break-inside: avoid;
}

.fsi-city-directory a:hover {
	color: #C2570F;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.fsi-city-directory {
		column-count: 2;
	}
}

/* Formulaire d'inscription affiché dans un popup Bricks :
   zone de message plus courte pour que le popup tienne à l'écran. */
.brx-popup .gform_wrapper.gravity-theme textarea {
	height: 110px;
	min-height: 110px;
}

/* Menu mobile off-canvas de Bricks : le panneau (300 px) reste dans le DOM,
   masqué par translateX(100%). Ce décalage est compté par le navigateur dans
   la largeur du document et provoque une barre de défilement horizontale sur
   TOUTES les pages, à toutes les largeurs. `overflow-x: clip` (et non hidden,
   qui casserait le header collant) supprime ce défilement parasite. */
body {
	overflow-x: clip;
}

/* ... et le panneau lui-même est en position fixed : il échappe donc au clip
   ci-dessus. Tant que le menu n'est pas ouvert (classe show-mobile-menu posée
   par Bricks sur .brxe-nav-menu), on le retire complètement du rendu. */
.brxe-nav-menu:not(.show-mobile-menu) .bricks-mobile-menu-wrapper {
	display: none;
}

/* -------------------------------------------------------------------------
   Animations décoratives (Bricks n'expose aucun control @keyframes).
   ------------------------------------------------------------------------- */

/* Bandeau des formations : défilement horizontal en boucle infinie.
   La piste contient QUATRE groupes identiques et l'animation ne translate que
   d'UN groupe (-25 %) : la boucle est donc invisible, et il reste toujours
   trois groupes de contenu à droite de l'écran (~3 300 px). Avec seulement
   deux groupes, un écran large atteignait la fin de la piste en fin de cycle
   et un vide apparaissait à droite (effet « discontinu »). */
.fsi-ticker {
	overflow: hidden;
}

.fsi-ticker .fsi-ticker-track {
	display: flex;
	width: max-content;
	max-width: none;
	animation: fsi-marquee 26s linear infinite;
	will-change: transform;
}

.fsi-ticker .fsi-ticker-group {
	flex: 0 0 auto;
	width: auto;
}

@keyframes fsi-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

/* Étiquettes flottantes de l'image d'accueil (avis Google, « Dans vos
   locaux ou en centre ») : léger flottement continu, comme la maquette. */
.fsi-floaty {
	animation: fsi-floaty 7s ease-in-out infinite;
}

.fsi-floaty2 {
	animation: fsi-floaty2 8s ease-in-out infinite;
}

@keyframes fsi-floaty {
	0%, 100% { transform: translateY(0) rotate(-1.5deg); }
	50%      { transform: translateY(-13px) rotate(1.5deg); }
}

@keyframes fsi-floaty2 {
	0%, 100% { transform: translateY(-8px); }
	50%      { transform: translateY(10px); }
}

@media (max-width: 767px) {
	.fsi-ticker .fsi-ticker-group {
		column-gap: 26px;
		padding-right: 26px;
	}
	.fsi-ticker .fsi-ticker-group .brxe-text-basic {
		font-size: 15px;
	}
}

/* Respect des préférences système : pas d'animation si l'utilisateur a
   demandé à réduire les mouvements. */
@media (prefers-reduced-motion: reduce) {
	.fsi-ticker .fsi-ticker-track,
	.fsi-floaty,
	.fsi-floaty2 {
		animation: none;
	}
}

/* =========================================================================
   RESPONSIVE — filet de sécurité global (tout le site)
   Bricks n'adapte RIEN automatiquement : une grille définie en 2 ou 3
   colonnes le reste à 390 px, et la deuxième colonne sort de l'écran.
   Ces règles s'appliquent à toutes les pages, y compris les pages locales.
   ========================================================================= */

/* Toute grille Bricks s'adapte : autant de colonnes que la largeur le
   permet, une seule en dessous d'environ 560 px.
   Exceptions : .fsi-keep-grid (gabarit volontairement conservé) et
   .fsi-hscroll (liste passée en défilement horizontal, voir plus bas). */
@media (max-width: 991px) {
	.brx-grid:not(.fsi-keep-grid):not(.fsi-hscroll) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
	}
	/* Blocs à empiler dès la tablette (hero, colonnes texte + image). */
	.fsi-stack-991.brx-grid {
		grid-template-columns: 1fr !important;
	}
	/* Aucun élément ne peut être plus large que l'écran. */
	.brxe-section,
	.brxe-container,
	.brxe-block,
	.brxe-div {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.brx-grid:not(.fsi-keep-grid):not(.fsi-hscroll):not(.fsi-grid-2-mobile) {
		grid-template-columns: 1fr !important;
	}
	/* Marges latérales plus sobres : on récupère 24 px de contenu. */
	.brxe-section > .brxe-block {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Le bandeau défilant ne doit jamais passer à la ligne : .brxe-block porte
   flex-wrap: wrap par défaut, ce qui cassait le marquee en mobile. */
.fsi-ticker .fsi-ticker-track,
.fsi-ticker .fsi-ticker-group {
	flex-wrap: nowrap !important;
}

/* Listes de cartes : défilement horizontal au doigt sous 767 px, plutôt
   qu'une colonne interminable. Aimantation sur chaque carte. */
@media (max-width: 767px) {
	.fsi-hscroll {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		gap: 14px;
		margin-left: -20px;
		margin-right: -20px;
		padding: 4px 20px 16px;
		-webkit-overflow-scrolling: touch;
	}

	.fsi-hscroll > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	/* Barre de défilement discrète mais visible : indique qu'on peut glisser. */
	.fsi-hscroll::-webkit-scrollbar {
		height: 4px;
	}

	.fsi-hscroll::-webkit-scrollbar-thumb {
		background: rgba(194, 87, 15, .35);
		border-radius: 4px;
	}
}

/* Un item de grille ne rétrécit pas en dessous de son contenu (min-width:auto) :
   un seul texte en « nowrap » suffit alors à faire déborder toute la colonne
   hors de l'écran. On lève les deux verrous en mobile. */
@media (max-width: 767px) {
	.brx-grid > * {
		min-width: 0;
	}

	.brxe-section :not(.fsi-ticker-group) > .brxe-text-basic,
	.brxe-section :not(.fsi-ticker-group) > .brxe-heading,
	.brxe-section :not(.fsi-ticker-group) > .brxe-text-link {
		white-space: normal !important;
	}

	.brxe-heading,
	.brxe-text-basic,
	.brxe-text {
		overflow-wrap: break-word;
	}
}

/* Titres : les tailles desktop (52 px pour un H1, 34 px pour un H2) sont
   ingérables sur un écran de 390 px. On les ramène à une échelle mobile. */
@media (max-width: 767px) {
	h1.brxe-heading {
		font-size: 33px !important;
		line-height: 1.12 !important;
	}

	h2.brxe-heading {
		font-size: 25px !important;
		line-height: 1.22 !important;
	}

	h3.brxe-heading {
		font-size: 18px !important;
	}

	/* Sous-titre coloré à l'intérieur d'un titre (deuxième ligne en accent) :
	   sa taille desktop (21-22 px) est trop proche du titre réduit en mobile. */
	h1.brxe-heading span[style*="font-size"],
	h2.brxe-heading span[style*="font-size"] {
		font-size: 17px !important;
		line-height: 1.3 !important;
	}
}


/* -------------------------------------------------------------------------
   Lignes « petit élément + texte » (pastille numérotée, puce de liste,
   icône d'une carte FAQ). .brxe-block porte flex-wrap: wrap et ses enfants
   texte font 100 % de large : dès que la place manque, le texte passe donc
   SOUS la pastille au lieu de rester à côté. On verrouille la ligne.
   ------------------------------------------------------------------------- */
.fsi-inline-row {
	flex-wrap: nowrap !important;
}

.fsi-inline-row > * {
	min-width: 0;
}

/* Ce qui donne le repère visuel garde sa taille... */
.fsi-inline-row > .brxe-icon,
.fsi-inline-row > .brxe-block {
	flex-shrink: 0;
}

/* ...et c'est le texte qui occupe la place restante et se replie. */
.fsi-inline-row > .brxe-text-basic,
.fsi-inline-row > .brxe-text,
.fsi-inline-row > .brxe-heading {
	flex: 1 1 auto;
	width: auto;
	white-space: normal !important;
}

/* En-tête d'un panneau d'accordéon (FAQ) : titre à gauche, chevron à droite.
   Sans cela, .brxe-block replie le chevron sous le titre en mobile. */
.brxe-block.accordion-title-wrapper {
	flex-wrap: nowrap !important;
}

.brxe-block.accordion-title-wrapper > * {
	min-width: 0;
}

.brxe-block.accordion-title-wrapper > .brxe-icon {
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Fiches techniques des pages formation (durée, effectif, lieu, validité) :
   quatre chiffres courts. Une seule colonne donnerait une bande interminable,
   deux colonnes tiennent parfaitement sur un écran de téléphone.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.brx-grid.fsi-grid-2-mobile:not(.fsi-keep-grid):not(.fsi-hscroll) {
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 14px !important;
		row-gap: 20px !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	/* Une donnée impaire en fin de fiche (ex. le lieu, plus long que les
	   autres) occupe la largeur entière plutôt qu'une demi-colonne. */
	.brx-grid.fsi-grid-2-mobile > *:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}


/* ==== FSI PAGES FORMATION (design A) — début =============================
   Ne contient QUE ce que Bricks ne sait pas exprimer sur un arbre généré :
   flottants superposés, colonne de sommaire collante, effets de survol,
   apparition au défilement et ajustements responsive fins.
   ======================================================================== */

/* --- Apparition douce au défilement -------------------------------------
   La classe .fsi-js n'est posée sur <html> que si JavaScript est actif :
   sans JS (et pour les moteurs de recherche), tout le contenu reste
   visible et lisible, aucun texte n'est masqué. */
html.fsi-js .fsi-rv {
	opacity: 0;
	transform: translateY(16px);
	will-change: opacity, transform;
	transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
	            transform .55s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--fsi-d, 0ms);
}

html.fsi-js .fsi-rv.is-in {
	opacity: 1;
	transform: none;
}

/* Cascade légère pour les enfants d'une grille révélée d'un bloc */
html.fsi-js .fsi-rv-stagger > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
	            transform .5s cubic-bezier(.22, .61, .36, 1);
}

html.fsi-js .fsi-rv-stagger.is-in > * {
	opacity: 1;
	transform: none;
}

html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(7) { transition-delay: 420ms; }
html.fsi-js .fsi-rv-stagger.is-in > *:nth-child(8) { transition-delay: 490ms; }

/* --- Visuel du hero : badge de certification posé sur la photo ----------- */
.fsi-fo-media {
	position: relative;
}

.fsi-fo-badge {
	position: absolute;
	left: -22px;
	bottom: 28px;
	z-index: 2;
	animation: fsi-fo-float 7s ease-in-out infinite;
}

@keyframes fsi-fo-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

/* Étiquette « avis Google » : flottement décalé de celui du badge de
   certification, étoiles et mot « Google » aux couleurs de Google. */
.fsi-fo-rev {
	animation: fsi-fo-float2 8s ease-in-out infinite;
}

@keyframes fsi-fo-float2 {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(9px); }
}

.fsi-fo-rev .fsi-stars {
	color: #FBBC04;
	letter-spacing: 1.5px;
}

.fsi-fo-rev .fsi-goog {
	font-weight: 600;
	letter-spacing: .1px;
}

.fsi-fo-rev a {
	color: inherit;
	text-decoration: none;
}

/* --- Colonne de sommaire collante --------------------------------------- */
.fsi-fo-toc {
	position: sticky;
	top: 104px;
	align-self: start;
}

.fsi-fo-toc a {
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.fsi-fo-toc a:hover {
	background-color: #fff;
	color: #55351D;
	transform: translateX(3px);
}

/* --- Cartes : léger soulèvement au survol -------------------------------- */
.fsi-fo-card,
.fsi-fo-zone {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.fsi-fo-card:hover,
.fsi-fo-zone:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(85, 53, 29, .10);
}

.fsi-fo-zone:hover {
	border-color: #C2570F;
}

/* Lignes du programme : surlignage discret au survol */
.fsi-fo-progrow {
	transition: background-color .2s ease;
	border-radius: 12px;
}

.fsi-fo-progrow:hover {
	background-color: #FFF8F1;
}

/* Boutons : même respiration partout */
.fsi-fo-btn {
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.fsi-fo-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(194, 87, 15, .28);
}

/* Ancrage : le titre visé ne passe pas sous le header collant */
.fsi-fo-anchor {
	scroll-margin-top: 150px;
}

html {
	scroll-behavior: smooth;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
	/* Le sommaire cesse d'être une colonne : il devient une barre de
	   raccourcis horizontale, défilable au doigt, posée avant le contenu. */
	.fsi-fo-toc {
		position: static;
	}

	.fsi-fo-toctitle,
	.fsi-fo-toccta {
		display: none;
	}

	/* Sans min-width:0, la largeur intrinsèque de la barre de raccourcis
	   (six libellés bout à bout) élargit toute la grille et fait défiler
	   la page latéralement. */
	.fsi-fo-toc,
	.fsi-fo-tocnav {
		min-width: 0;
		max-width: 100%;
	}

	.fsi-fo-tocnav {
		flex-direction: row !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.fsi-fo-tocnav::-webkit-scrollbar {
		display: none;
	}

	.fsi-fo-tocnav a {
		white-space: nowrap;
		flex: 0 0 auto;
		background-color: #fff;
		border: 1px solid #F0E2D3;
		border-radius: 999px;
		padding: 9px 15px !important;
		font-size: 13.5px;
	}
}

@media (max-width: 991px) {
	/* Le header mobile est plus haut : on décale davantage l'ancrage pour
	   que le titre visé ne se retrouve pas caché dessous. */
	.fsi-fo-anchor {
		scroll-margin-top: 200px;
	}

	.fsi-fo-badge {
		position: static;
		animation: none;
		margin-top: -26px;
		margin-left: 12px;
		display: inline-flex !important;
	}
}

/* Fiche technique : cellules jointives (maquette design A), 2 colonnes sur téléphone,
   la cellule tarif en entier sur la dernière ligne. */
@media (max-width: 767px) {
	.brx-grid.fsi-fo-stats:not(.fsi-keep-grid) {
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
	}

	.brx-grid.fsi-fo-stats > * {
		border-right: 1px solid #F0E2D3;
		border-bottom: 1px solid #F0E2D3;
	}

	.brx-grid.fsi-fo-stats > *:nth-child(2n) {
		border-right: 0 !important;
	}

	.brx-grid.fsi-fo-stats > *:last-child,
	.brx-grid.fsi-fo-stats > .fsi-fo-statwide {
		grid-column: 1 / -1;
		border-right: 0 !important;
		border-bottom: 0 !important;
	}
}

@media (max-width: 560px) {
	.brx-grid.fsi-fo-stats:not(.fsi-keep-grid) {
		grid-template-columns: 1fr !important;
	}

	.brx-grid.fsi-fo-stats > * {
		border-right: 0 !important;
	}
}

/* --- Accessibilité : mouvement réduit ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.fsi-js .fsi-rv,
	html.fsi-js .fsi-rv-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fsi-fo-badge,
	.fsi-fo-rev {
		animation: none;
	}

	.fsi-fo-card:hover,
	.fsi-fo-zone:hover,
	.fsi-fo-btn:hover,
	.fsi-fo-toc a:hover {
		transform: none;
	}
}

/* --- Fidélité à la maquette validée -------------------------------------
   Décors que Bricks ne sait pas exprimer sur un arbre généré : halos de
   fond du hero, pastilles décoratives débordantes, filets pointillés,
   étiquettes flottantes et numérotation du sommaire. */

/* Hero : deux halos superposés (crème orangé + vert très dilué) */
.fsi-fo-hero {
	position: relative;
}

.fsi-fo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 380px at 88% 18%, rgba(255, 226, 204, .85), transparent 65%),
		radial-gradient(700px 320px at 5% 90%, rgba(184, 204, 77, .20), transparent 60%);
}

.fsi-fo-hero > * {
	position: relative;
	z-index: 1;
}

/* Étiquette d'avis flottante, en haut à droite de la photo */
.fsi-fo-rev {
	position: absolute;
	right: -14px;
	top: 26px;
	z-index: 2;
}

@media (max-width: 991px) {
	.fsi-fo-rev { right: 10px; top: 14px; }
}

/* Cartes « objectif » : cercle vert débordant en haut à droite */
.fsi-fo-goal {
	position: relative;
	overflow: hidden;
}

.fsi-fo-goal::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: rgba(184, 204, 77, .14);
	pointer-events: none;
}

.fsi-fo-goal > * {
	position: relative;
	z-index: 1;
}

/* Bandeau final : cercle vert débordant en bas à droite */
.fsi-fo-final {
	position: relative;
	overflow: hidden;
}

.fsi-fo-final::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -90px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(184, 204, 77, .16);
	pointer-events: none;
}

.fsi-fo-final > * {
	position: relative;
	z-index: 1;
}

/* Programme : filet pointillé entre les lignes, étiquette de catégorie */
.fsi-fo-progrow + .fsi-fo-progrow {
	border-top: 1px dashed #F0E2D3;
}

/* La règle générique .fsi-inline-row étire le dernier texte : l'étiquette,
   elle, doit rester à la largeur de son libellé. */
.fsi-inline-row > .brxe-text-basic.fsi-fo-pill,
.fsi-fo-pill {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
	align-self: center;
	white-space: nowrap !important;
}

/* En mobile la ligne est déjà dense : l'étiquette passe sous le texte */
@media (max-width: 767px) {
	.fsi-inline-row > .brxe-text-basic.fsi-fo-pill,
	.fsi-fo-pill {
		margin-left: 0;
		align-self: flex-start;
	}

	.fsi-fo-progrow {
		flex-wrap: wrap;
	}
}

/* Sommaire : numéro d'étape et repérage de la section en cours de lecture */
.fsi-fo-tocn {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11.5px;
	color: #C2570F;
	margin-right: 9px;
}

.fsi-fo-tocnav a {
	border-left: 2px solid transparent;
}

.fsi-fo-tocnav a.is-cur {
	background: #fff;
	border-left-color: #C2570F;
	color: #55351D;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(85, 53, 29, .06);
}

@media (max-width: 1100px) {
	.fsi-fo-tocnav a { border-left: 0; border-bottom: 2px solid transparent; }
	.fsi-fo-tocnav a.is-cur { border-left: 0; border-bottom-color: #C2570F; }
}

/* ==== FSI PAGES FORMATION (design A) — fin ============================== */

/* ==== FSI QUI SUIS-JE (design A) — début ================================
   Page « Qui suis-je ? » (post 46). Ne contient QUE ce que Bricks ne sait
   pas exprimer sur un arbre généré : halos de fond, éléments flottants
   superposés, frise chronologique (filet + pastilles), accordéons natifs
   <details>, pastilles décoratives et ajustements responsive fins.
   Tout le reste (couleurs, espacements, grilles) vit dans l'arbre Bricks.
   ======================================================================= */

/* --- Hero : deux halos décoratifs superposés ---------------------------- */
.fsi-qsj-hero {
	position: relative;
	overflow: hidden;
}

.fsi-qsj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 380px at 88% 14%, rgba(255, 226, 204, .9), transparent 65%),
		radial-gradient(700px 320px at 3% 92%, rgba(184, 204, 77, .22), transparent 60%);
}

.fsi-qsj-hero > * {
	position: relative;
	z-index: 1;
}

/* --- Visuel du hero : photo + badge SST + pastille avis ----------------- */
.fsi-qsj-media {
	position: relative;
	width: 100%;
	max-width: 262px;
	margin-left: auto;
}

.fsi-qsj-ph {
	aspect-ratio: 4 / 5;
}

/* Cadrage haut : le visage reste dans le cadre quelle que soit la hauteur. */
.fsi-qsj-ph img {
	object-position: top center;
}

.fsi-qsj-badge {
	position: absolute;
	left: -16px;
	bottom: 16px;
	width: 64px;
	z-index: 2;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .2));
}

.fsi-qsj-badgep {
	bottom: 92px;
}

.fsi-qsj-rev {
	position: absolute;
	right: -14px;
	bottom: -16px;
	z-index: 2;
}

.fsi-qsj-rev .fsi-stars {
	color: #FBBC04;
	letter-spacing: 1.5px;
}

.fsi-qsj-rev .fsi-goog {
	font-weight: 600;
}

.fsi-qsj-rev a {
	color: inherit;
	text-decoration: none;
}

/* Flottement continu, identique à la maquette (translation seule). */
.fsi-qsj-float  { animation: fsi-qsj-fl 7s ease-in-out infinite; }
.fsi-qsj-float2 { animation: fsi-qsj-fl2 8s ease-in-out infinite; }

@keyframes fsi-qsj-fl {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes fsi-qsj-fl2 {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(9px); }
}

/* Le visuel se recentre dès que le hero passe sur une seule colonne. */
@media (max-width: 991px) {
	.fsi-qsj-media {
		margin: 0 auto;
		max-width: 230px;
	}
}

/* --- Lien téléphone du hero -------------------------------------------- */
.fsi-qsj-tel {
	border-bottom: 2px solid rgba(194, 87, 15, .28);
	padding-bottom: 2px;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

.fsi-qsj-tel:hover {
	color: #C2570F;
	border-bottom-color: #C2570F;
}

/* --- Bande de repères : elle chevauche le bas du hero -------------------- */
.fsi-qsj-statsw {
	position: relative;
	z-index: 3;
}

/* --- Numéro de section dans les titres ---------------------------------- */
.fsi-qsj-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: #55351D;
	color: #fff;
	font: 700 15px "Bricolage Grotesque", sans-serif;
	margin-right: 12px;
	vertical-align: 3px;
}

/* --- Corps : sommaire à gauche, contenu à droite ------------------------ */
@media (max-width: 1100px) {
	.brx-grid.fsi-qsj-body {
		grid-template-columns: 1fr !important;
	}
}

/* Le sommaire de cette page reprend l'état actif de la maquette : pastille
   blanche bordée, plutôt que le filet latéral des pages formation. */
.fsi-qsj-tocnav a {
	border-left: 0 !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.fsi-qsj-tocnav a:hover {
	background-color: #FFF3E8;
	transform: translateX(3px);
}

.fsi-qsj-tocnav a.is-cur {
	background: #fff;
	border: 1px solid #F0E2D3;
	color: #55351D;
	font-weight: 700;
	box-shadow: none;
}

.fsi-qsj-tocn {
	font-weight: 700;
	font-size: 12px;
	color: #C2570F;
	margin-right: 11px;
}

@media (max-width: 1100px) {
	.fsi-qsj-tocnav a:hover {
		transform: none;
	}

	.fsi-qsj-tocnav a.is-cur {
		border-bottom: 2px solid #C2570F;
	}
}

/* --- Frise chronologique du parcours ------------------------------------ */
.fsi-qsj-tl {
	position: relative;
	padding-left: 26px;
	margin-top: 22px;
}

/* Filet gris de fond, sur toute la hauteur de la frise. */
.fsi-qsj-tl::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: #F0E2D3;
}

/* Filet coloré qui se remplit quand la frise entre à l'écran. */
.fsi-qsj-tlfill {
	position: absolute;
	left: 6px;
	top: 6px;
	width: 2px;
	height: 0;
	background: linear-gradient(180deg, #C2570F, #B8CC4D);
	transition: height 1.6s ease;
}

.fsi-qsj-tl.is-in .fsi-qsj-tlfill {
	height: calc(100% - 12px);
}

.fsi-qsj-tli {
	position: relative;
}

.fsi-qsj-tli::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #C2570F;
}

.fsi-qsj-tli a {
	color: #A94E0C;
	font-weight: 600;
}

/* --- Cartes, zones et raccourcis : soulèvement au survol ----------------- */
.fsi-qsj-card,
.fsi-qsj-zone,
.fsi-qsj-fo {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.fsi-qsj-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(85, 53, 29, .10);
}

.fsi-qsj-zone:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(85, 53, 29, .10);
	border-color: #C2570F;
}

.fsi-qsj-fo:hover {
	transform: translateY(-3px);
	border-color: #C2570F;
}

/* Étiquettes de liens du bloc PSSM */
.fsi-qsj-lnk a {
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.fsi-qsj-lnk a:hover {
	border-color: #C2570F;
	color: #C2570F;
	transform: translateY(-2px);
}

/* Étiquette « nouveau » du bloc PSSM */
.fsi-qsj-new {
	display: inline-block;
	font: 600 10.5px Inter, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A3B00;
	background: #FFE9D6;
	border: 1px solid #F3C79E;
	border-radius: 999px;
	padding: 4px 10px;
	margin-left: 8px;
	vertical-align: 3px;
}

/* --- FAQ : accordéons natifs <details>, lisibles sans JavaScript ---------
   Le bloc parent est une colonne flex : sans width:100%, chaque accordéon
   se réduirait à la largeur de sa question. */
.fsi-qsj-faq > *,
.fsi-qsj-faq details {
	width: 100%;
}

.fsi-qsj-faq details {
	border: 1px solid #F0E2D3;
	border-radius: 14px;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}

.fsi-qsj-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 18px;
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: #55351D;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.fsi-qsj-faq summary::-webkit-details-marker {
	display: none;
}

.fsi-qsj-faq summary::after {
	content: "+";
	color: #C2570F;
	font-size: 20px;
	line-height: 1;
	flex: 0 0 auto;
}

.fsi-qsj-faq details[open] summary::after {
	content: "\2013"; /* en dash, en echappement CSS : evite tout risque de mojibake si le fichier est un jour servi sans charset UTF-8 */
}

.fsi-qsj-faq p {
	margin: 0;
	padding: 0 18px 16px;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5C4A3C;
}

.fsi-qsj-faq a {
	color: #A94E0C;
	font-weight: 600;
}

/* --- Accessibilité : mouvement réduit ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fsi-qsj-float,
	.fsi-qsj-float2 {
		animation: none;
	}

	.fsi-qsj-tlfill,
	.fsi-qsj-tl.is-in .fsi-qsj-tlfill {
		transition: none;
	}

	.fsi-qsj-card:hover,
	.fsi-qsj-zone:hover,
	.fsi-qsj-fo:hover,
	.fsi-qsj-lnk a:hover,
	.fsi-qsj-tocnav a:hover {
		transform: none;
	}
}

/* ==== FSI QUI SUIS-JE (design A) — fin ================================== */

/* ==== FSI PAGE-LOCALE — gabarit PHP « design D » (single-page-locale.php)
   ========================================================================
   Le HTML est écrit à la main dans template-parts/page-locale-design-d.php ;
   fsi_pagelocale_design_d_ids() décide quelles pages l'utilisent (Anet 431
   pour l'instant). CSS complet de la mise en page, aucun arbre Bricks ici.
   L'ancien bloc « FSI PAGES LOCALES (profil sticky) », qui habillait le tout
   premier essai en arbre Bricks (template 445), a été retiré du CSS en même
   temps que la suppression de ce template : ne pas le recréer. ============ */

.fsi-pl-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px 72px;
}

.fsi-pl-bc-wrap {
	padding: 18px 0 0;
	font-size: 13.5px;
}

.fsi-pl-split {
	display: grid;
	grid-template-columns: 380px 1fr;
	column-gap: 40px;
	align-items: start;
	padding-top: 20px;
}

.fsi-pl-split > * {
	min-width: 0;
}

/* --- panneau identité collant -------------------------------------------- */
.fsi-pl-profile {
	/* Sticky bidirectionnel, panneau plus haut que l'ecran (photo + reperes
	   + tableau + 2 boutons + sommaire) : pas de plafond de hauteur, pas
	   de scroll interne. `top` et `bottom` fixes ensemble ne suffisent
	   PAS ici : le navigateur ne bascule sur `bottom` qu'en arrivant pres
	   de la FIN du conteneur (donc en bas de tout l'article, tres long),
	   pas des que le panneau lui-meme deborde de l'ecran. Il faut donc
	   calculer le seuil a partir de la VRAIE hauteur du panneau : c'est
	   le role de --fsi-pl-h (mesuree en JS, assets/fsi-reveal.js, au
	   chargement + resize seulement, jamais au scroll). Si le panneau
	   tient dans l'ecran, 100vh - hauteur - 20px > 20px -> min() choisit
	   20px (sticky top classique). S'il deborde, ce calcul est NEGATIF ->
	   min() le choisit : le panneau ne se fige qu'une fois son bas a
	   20px du bas d'ecran, et reste alors fige (bas visible, page qui
	   continue derriere) jusqu'a la fin du conteneur. */
	position: sticky;
	top: min(20px, calc(100vh - var(--fsi-pl-h, 0px) - 20px));
	align-self: start;
	background: linear-gradient(170deg, #FFFFFF, #FDEEE1);
	border: 1px solid #F0E2D3;
	border-radius: 22px;
	padding: 24px;
	box-shadow: 0 20px 44px rgba(85, 53, 29, .08);
	font-family: 'Libre Franklin', system-ui, sans-serif;
}


.fsi-pl-pimg {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-bottom: 4px;
}

.fsi-pl-pimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fsi-pl-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	padding: 6px 12px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	color: #A94E0C;
}

.fsi-pl-title-dup {
	display: none;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: #55351D;
	margin: 18px 0 6px;
}

.fsi-pl-sub {
	font-size: 13.5px;
	line-height: 1.5;
	color: #6E665D;
	margin: 0 0 18px;
}

.fsi-pl-facts-label {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #A94E0C;
	margin: 0 0 10px;
}

/* --- grille de repères (validité / durée / effectif / prérequis) -------- */
.fsi-pl-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #E4D3BE;
	border-bottom: 1px solid #E4D3BE;
	margin-bottom: 18px;
}

.fsi-pl-facts > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	min-width: 0;
}

.fsi-pl-facts > div:nth-child(odd) {
	padding-right: 14px;
	border-right: 1px solid #E4D3BE;
}

.fsi-pl-facts > div:nth-child(even) {
	padding-left: 14px;
}

.fsi-pl-fl {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6E665D;
}

.fsi-pl-fv {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #55351D;
}

/* --- tableau d'infos pratiques (public / lieu / tarif), jointif --------- */
.fsi-pl-infotable {
	border: 1px solid #F0E2D3;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 16px;
}

.fsi-pl-row {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: center;
	border-top: 1px solid #F0E2D3;
	min-width: 0;
}

.fsi-pl-row:first-child {
	border-top: 0;
}

.fsi-pl-row:nth-child(even) {
	background: #FFF7F0;
}

.fsi-pl-cell {
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.5;
	color: #56514A;
	min-width: 0;
}

.fsi-pl-cell:first-child {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6E665D;
}

.fsi-pl-cell a {
	color: #A94E0C;
	font-weight: 600;
}

/* --- boutons du panneau --------------------------------------------------- */
.fsi-pl-btn {
	display: flex;
	width: 100%;
	justify-content: center;
	background: #C2570F;
	color: #FFFFFF;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 13px 20px;
	border-radius: 999px;
	margin-bottom: 10px;
	text-decoration: none;
}

.fsi-pl-btn:hover {
	opacity: .92;
}

.fsi-pl-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid #F0E2D3;
	border-radius: 999px;
	padding: 13px 20px;
	margin-bottom: 4px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #55351D;
	text-decoration: none;
}

/* --- mini-sommaire (scrollspy géré par assets/fsi-reveal.js) ------------- */
.fsi-pl-nav {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #E4D3BE;
}


.fsi-pl-nav a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: 9px;
	font-size: 13px;
	color: #56514A;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.fsi-pl-nav a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #E4D3BE;
	flex: 0 0 auto;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.fsi-pl-nav a:hover {
	background: #FFE9D6;
}

.fsi-pl-nav a.is-cur {
	color: #55351D;
	font-weight: 700;
}

.fsi-pl-nav a.is-cur::before {
	background: #C2570F;
	box-shadow: 0 0 0 4px rgba(194, 87, 15, .15);
}

/* --- colonne de contenu éditorial ----------------------------------------- */
.fsi-pl-content {
	font-family: 'Libre Franklin', system-ui, sans-serif;
	min-width: 0;
}

.fsi-pl-title-main {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 1.18;
	letter-spacing: -.03em;
	color: #55351D;
	margin: 0 0 20px;
}

.fsi-pl-section {
	margin-bottom: 40px;
}

.fsi-pl-section h2 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 23px;
	line-height: 1.25;
	color: #55351D;
	margin: 0 0 14px;
}

.fsi-pl-intro p,
.fsi-pl-section p {
	font-size: 15.5px;
	line-height: 1.75;
	color: #56514A;
	margin: 0 0 14px;
}

.fsi-pl-intro p:last-child,
.fsi-pl-section > p:last-child {
	margin-bottom: 0;
}

.fsi-pl-content a {
	color: #A94E0C;
}

/* Encadré réglementaire : n'importe quelle citation dans le contenu
   éditorial (bloc "Citation" natif Gutenberg) devient un encadré visuel,
   sans qu'un rédacteur ait besoin d'un champ ou d'un bloc spécial. */
.fsi-pl-content blockquote {
	background: #FFF7F0;
	border: 1px dashed #E4D3BE;
	border-radius: 14px;
	padding: 15px 18px;
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: #56514A;
}

.fsi-pl-content blockquote p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* --- cartes de comparaison (section à exactement 2 <h3>, ex. intra/inter) */
.fsi-pl-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
}

.fsi-pl-cmp {
	background: #FFFFFF;
	border: 1px solid #F0E2D3;
	border-radius: 14px;
	padding: 18px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.fsi-pl-cmp:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(85, 53, 29, .08);
}

.fsi-pl-cmp-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: #55351D;
	margin: 0 0 6px;
}

.fsi-pl-cmp p {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
}

/* --- FAQ : accordéons natifs <details>, lisibles sans JavaScript --------- */
.fsi-pl-faq details {
	border: 1px solid #F0E2D3;
	border-radius: 12px;
	background: #FFFFFF;
	overflow: hidden;
	margin-bottom: 8px;
}

.fsi-pl-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 13px 16px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: #55351D;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.fsi-pl-faq summary::-webkit-details-marker {
	display: none;
}

.fsi-pl-faq summary::after {
	content: "→";
	color: #C2570F;
	transform: rotate(90deg);
	transition: transform .2s ease;
	flex: 0 0 auto;
}

.fsi-pl-faq details[open] summary::after {
	transform: rotate(-90deg);
}

.fsi-pl-faq-a {
	padding: 0 16px 14px;
}

.fsi-pl-faq-a p {
	margin: 0;
	font-size: 13.5px !important;
	line-height: 1.65 !important;
	color: #56514A;
}

/* --- bandeau CTA final ----------------------------------------------------- */
.fsi-pl-ctawrap {
	padding-top: 20px;
}

.fsi-pl-ctaband {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 24px;
	flex-wrap: wrap;
	background: linear-gradient(155deg, #FFE9D6, #FFE2CC);
	border-radius: 24px;
	padding: 36px 40px;
}

.fsi-pl-ctaband p {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: #55351D;
	margin: 0;
}

.fsi-pl-ctabtn {
	width: auto;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	margin-bottom: 0;
}

/* --- responsive : sous 1100px, panneau non collant, sommaire masqué ------ */
@media (max-width: 1100px) {
	.fsi-pl-split {
		grid-template-columns: 1fr;
		/* En 1 colonne, column-gap ne cree aucun espace entre le panneau
		   empile et le contenu qui suit (le grid n'a pas de row-gap) :
		   sans cette marge, le bouton telephone du panneau touche
		   directement le titre "Anet en bref" qui suit. */
		row-gap: 32px;
	}

	.fsi-pl-profile {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.fsi-pl-nav {
		display: none;
	}

	.fsi-pl-title-main {
		display: none;
	}

	.fsi-pl-title-dup {
		display: block;
	}
}

@media (max-width: 640px) {
	.fsi-pl-cards {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.fsi-pl-ctaband {
		padding: 28px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fsi-pl-cmp:hover {
		transform: none;
	}
}

/* ==== FSI PAGE-LOCALE — gabarit PHP « design D » — fin =================== */

/* -------------------------------------------------------------------------
   Menu MOBILE (panneau off-canvas) : texte du SOUS-menu invisible.
   Bricks ne stylise le sous-menu (fond blanc, couleur #56514A) que pour le
   menu DESKTOP, via le sélecteur .bricks-nav-menu .sub-menu. Le panneau
   mobile utilise une autre liste, .bricks-mobile-menu .sub-menu, qui ne
   reçoit donc AUCUNE des couleurs réglées dans Bricks et hérite du blanc
   par défaut du cœur Bricks (pensé pour un fond sombre) -> texte blanc sur
   fond crème, illisible. Cf. mémoire "menu mobile bug complètement".
   ------------------------------------------------------------------------- */
#brxe-hnavmenu .bricks-mobile-menu .sub-menu > li > a,
#brxe-hnavmenu .bricks-mobile-menu .sub-menu > li > .brx-submenu-toggle > * {
	color: #56514A;
}

#brxe-hnavmenu .bricks-mobile-menu .sub-menu > li:hover > a,
#brxe-hnavmenu .bricks-mobile-menu .sub-menu > li:hover > .brx-submenu-toggle > *,
#brxe-hnavmenu .bricks-mobile-menu .sub-menu > li.current-menu-item > a {
	color: #C2570F;
}

/* Menu MOBILE : le fond derrière le panneau ne s'assombrit jamais.
   Cause : #brx-header a un backdrop-filter (juste au-dessus, effet verre
   dépoli) -> un élément avec backdrop-filter/filter devient un
   "containing block" pour ses descendants position:fixed (comme un
   transform). Le panneau off-canvas est niché DANS #brx-header : le
   réglage natif Bricks "mobileMenuOverlay" génère bien la bonne couleur
   (cf. plus bas dans ce fichier de style, généré par settings du header),
   et la classe show-mobile-menu bascule bien opacity/visibility -- mais
   .bricks-mobile-menu-overlay n'a AUCUNE hauteur explicite (seulement
   top/right/bottom/left:0), donc sa hauteur se calcule par rapport à ce
   containing block réduit (la boîte du bandeau header, ~90px) au lieu du
   viewport entier : l'assombrissement existe mais tient sur une bande de
   90px invisible derrière le header, jamais sur le reste de la page.
   Le panneau lui-même y échappe car Bricks lui donne une hauteur EXPLICITE
   (100vh / --bricks-vh) au lieu de compter sur top+bottom ; on applique la
   même parade à l'overlay. */
#brxe-hnavmenu .bricks-mobile-menu-overlay {
	height: 100vh;
	height: calc(var(--bricks-vh, 1vh) * 100);
	/* Le bandeau cookies Complianz (z-index 99999, cf. body.cmplz-banner-active)
	   passe au-dessus de TOUT le header (z-index 998, cf. #brx-header.brx-sticky)
	   avant que le visiteur ait répondu au bandeau -- l'assombrissement du panneau
	   mobile, plus bas dans cette même pile, disparaît alors totalement derrière,
	   invisible mais toujours présent (confirmé par test : un z-index très élevé
	   sur ce seul élément rétablit l'assombrissement même bandeau cookies affiché).
	   z-index volontairement au-dessus de Complianz (99999) mais en-dessous du
	   panneau lui-même (voir plus bas mobileMenuBoxShadow / le panneau reste au
	   -dessus car il est size-fixe lui aussi et sa propre valeur est déjà forcée
	   par Bricks). */
	z-index: 100000 !important;
}


/* Le panneau lui-même doit rester AU-DESSUS de l'assombrissement remonté
   ci-dessus (sinon le panneau se retrouverait sous sa propre pénombre). */
#brxe-hnavmenu .bricks-mobile-menu-wrapper {
	z-index: 100001 !important;
}

/* Menu MOBILE : espace en haut du panneau (sous le bandeau header + bouton de
   fermeture). Le control Bricks « mobileMenuPadding » n'espace PAS le panneau
   mais chaque lien de premier niveau (#brxe-hnavmenu .bricks-mobile-menu > li > a) :
   un padding-top y creusait ~100px entre CHAQUE entrée. Le décalage du haut se
   règle donc ici, sur la liste, une seule fois. */
#brxe-hnavmenu .bricks-mobile-menu {
	padding-top: 25px;
	padding-bottom: 24px;
}

/* Cartes formations (accueil) : l'icône « i » doit suivre le titre, pas se
   plaquer à droite de la carte. La règle générique .fsi-inline-row donne
   flex:1 1 auto au titre (utile ailleurs pour que le texte occupe la place
   restante) ; sur ces en-têtes-là, on laisse le titre à sa largeur réelle
   pour que l'icône se colle juste après (column-gap de 7px du bloc Bricks). */
.fsi-inline-row:has(> .fsi-info-icon) {
	display: block !important;
}

.fsi-inline-row:has(> .fsi-info-icon) > .brxe-heading {
	display: inline;
}

.fsi-inline-row > .fsi-info-icon {
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
}

/* Titre H1 de la page Contact/Devis : la phrase "Une question, un
   renseignement, besoin de devis" doit tenir sur une seule ligne quelle
   que soit la largeur d'écran. Aucun control Bricks ne permet une taille
   de police fluide (uniquement des tailles fixes par breakpoint) : on la
   fait rétrécir en continu avec la largeur de la fenêtre (clamp), plafonnée
   à la taille de base (36px) réglée dans Bricks. */
.fsi-contact-title-line {
	display: inline-block;
	white-space: nowrap;
	font-size: clamp(15px, 4.0vw, 36px) !important;
}