/*
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.7
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 ============================== */