/*!
Theme Name: Blocksy Child
Theme URI: https://studioeklipse.com/
Author: RL Studio
Author URI: https://studioeklipse.com/
Description: Thème enfant de Blocksy pour le site So Form.
Template: blocksy
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
Tags: blog, e-commerce, block-patterns, wide-blocks, block-styles, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, theme-options
*/

/* Texte courant : 16 px jusqu'à 1440 px de large (portables), 18 px dès 1600 px
   (grands écrans), fluide entre les deux (1,25vw − 2px vaut 16 à 1440, 18 à
   1600). Même valeur que CORPS dans .build/gen_head.py, pour les blocs
   Greenshift. La base Blocksy (--theme-font-size, réglée dans le Customizer)
   est surchargée ici : global.css se charge avant cette feuille. */
:root {
	--soform-corps: clamp(16px, 1.25vw - 2px, 18px);
	--theme-font-size: var(--soform-corps);
}

/* --------------------------------------------------------------------------
   Portée : uniquement l'archive du type de contenu « Formation »
   (archive-formation.php). Le reste du site est construit en blocs Greenshift,
   dont le design vit dans les attributs de blocs — rien ici ne le surcharge.
   Toutes les valeurs sont des jetons Blocksy : changer la palette dans le
   Customizer restyle cette page comme les autres.
   -------------------------------------------------------------------------- */

.soform-archive,
.soform-formation,
.soform-hero,
.soform-articles,
.soform-faq,
.soform-coord {
	--soform-encre: var(--theme-palette-color-1, #17120f);
	--soform-accent: var(--theme-palette-color-2, #6b5a4c);
	--soform-texte: var(--theme-palette-color-3, #3d342e);
	--soform-texte-2: var(--theme-palette-color-4, #8c7f74);
	--soform-sombre: var(--theme-palette-color-5, #b8aba0);
	--soform-sombre-fort: var(--theme-palette-color-6, #e3d8cd);
	--soform-section: var(--theme-palette-color-7, #ede3d9);
	--soform-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-carte: #ffffff;
	--soform-filet: rgba(23, 18, 15, 0.12);
}

.soform-archive {
	background-color: var(--soform-page);
}

/* --------------------------------------------------------------------------
   Le contenu passe AU-DESSUS du grain.

   Le grain de section est un `::before` en `z-index: 0` : dans l'ordre de
   peinture, il se place après les fonds ET le texte des descendants NON
   positionnés. Tout ce qui n'était pas explicitement positionné passait donc
   dessous — cartes blanches voilées et bruitées (mesuré : 249,1 au lieu de
   255,0 sur `.soform-info-card`), textes ternis.

   Un seul étage suffit : chaque section garde son fond au-dessous du grain (le
   grain doit le texturer), et remonte son conteneur de contenu au-dessus.
   C'est exactement la règle `.gspb_row > .gspb_row__content` des pages en
   blocs, transposée aux gabarits PHP.

   Placée ICI, avant les sections : à spécificité égale, les règles plus bas
   (`.soform-cta > .ct-container` en z-index 2) l'emportent volontairement.
   -------------------------------------------------------------------------- */

.soform-formation > * > .ct-container,
.soform-archive > * > .ct-container {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Hero des pages « formation » (archive + fiche) — template-parts/hero.php.

   Volontairement sobre : pas de photo, pas de nuages. Ce décor-là reste à
   l'accueil ; les pages internes se lisent. Il ne reste qu'un dégradé sable
   vers le crème de la page, le grain de section (`::before`, functions.php) et
   une hiérarchie typographique large. La carte blanche qui suit — méta de la
   fiche, filtres du catalogue — chevauche le bas du hero : c'est elle qui
   referme le bloc, comme la carte de recherche de l'accueil.

   Le hero n'impose aucune hauteur : il épouse son texte. Un titre sur deux
   lignes ou un chapeau plus long ne peuvent donc pas déborder.
   -------------------------------------------------------------------------- */

.soform-hero {
	position: relative;
	padding: clamp(80px, 7.5vw, 112px) 0 clamp(72px, 7vw, 104px);
	/* Crème aux DEUX bords, sable au milieu : le header et la section suivante
	   sont tous deux en `--soform-page`. Partir du sable — ce que faisait
	   l'ancien en-tête — posait une arête horizontale nette sous le header. */
	background-image: linear-gradient(180deg,
		var(--soform-page) 0%,
		color-mix(in oklab, var(--soform-page) 98.39%, var(--soform-section)) 5.75%,
		color-mix(in oklab, var(--soform-page) 89.65%, var(--soform-section)) 11.5%,
		color-mix(in oklab, var(--soform-page) 72.48%, var(--soform-section)) 17.25%,
		color-mix(in oklab, var(--soform-page) 50%, var(--soform-section)) 23%,
		color-mix(in oklab, var(--soform-page) 27.52%, var(--soform-section)) 28.75%,
		color-mix(in oklab, var(--soform-page) 10.35%, var(--soform-section)) 34.5%,
		color-mix(in oklab, var(--soform-page) 1.605%, var(--soform-section)) 40.25%,
		var(--soform-section) 46%,
		color-mix(in oklab, var(--soform-section) 98.39%, var(--soform-page)) 52.75%,
		color-mix(in oklab, var(--soform-section) 89.65%, var(--soform-page)) 59.5%,
		color-mix(in oklab, var(--soform-section) 72.48%, var(--soform-page)) 66.25%,
		color-mix(in oklab, var(--soform-section) 50%, var(--soform-page)) 73%,
		color-mix(in oklab, var(--soform-section) 27.52%, var(--soform-page)) 79.75%,
		color-mix(in oklab, var(--soform-section) 10.35%, var(--soform-page)) 86.5%,
		color-mix(in oklab, var(--soform-section) 1.605%, var(--soform-page)) 93.25%,
		var(--soform-page) 100%);
}

/* Au-dessus du grain de section (z-index 0). */
.soform-hero__inner {
	position: relative;
	z-index: 1;
}

/* `.soform-eyebrow` (déclaré plus bas, même spécificité) remet la marge à
   zéro : on qualifie le sélecteur pour garder l'air sous le fil d'Ariane. */
.soform-hero__inner .soform-hero__eyebrow {
	margin-top: 26px;
}

.soform-hero__title {
	margin: 14px 0 0;
	max-width: 18ch;
	font-size: clamp(32px, 4.2vw, 58px);
	line-height: 1.06;
}

.soform-hero__lead {
	margin: 24px 0 0;
	max-width: 620px;
	font-size: var(--soform-corps);
	line-height: 1.62;
	color: var(--soform-texte);
}

.soform-hero--catalogue .soform-hero__title {
	max-width: 22ch;
}

/* Carte blanche qui chevauche le bas du hero. */
.soform-hero__bar {
	position: relative;
	z-index: 5;
	margin-top: clamp(-64px, -4vw, -40px);
}

.soform-meta--bar {
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 0;
	border-radius: 16px;
	background-color: var(--soform-carte);
	box-shadow: 0 18px 44px rgba(23, 18, 15, 0.12);
}

.soform-meta--bar .soform-meta__item {
	padding: 26px 28px;
	border-left: 1px solid var(--soform-filet);
}

.soform-meta--bar .soform-meta__item:first-child {
	border-left: 0;
}

@media (max-width: 999.98px) {
	.soform-meta--bar .soform-meta__item:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 689.98px) {
	.soform-hero__title {
		max-width: none;
	}

	.soform-meta--bar .soform-meta__item {
		border-left: 0;
		border-top: 1px solid var(--soform-filet);
	}

	.soform-meta--bar .soform-meta__item:first-child {
		border-top: 0;
	}
}

/* Fil d'Ariane ----------------------------------------------------------- */

.soform-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte-2);
}

.soform-breadcrumb a {
	color: var(--soform-texte-2);
	text-decoration: none;
}

.soform-breadcrumb a:hover {
	color: var(--soform-encre);
}

.soform-breadcrumb span[aria-hidden] {
	opacity: 0.4;
}

.soform-breadcrumb .is-current {
	color: var(--soform-encre);
}

/* Filtres ---------------------------------------------------------------- */

/* La carte de filtres joue le rôle de la carte blanche du hero de l'accueil :
   elle chevauche le bas du hero au lieu d'être posée dessous. */
.soform-archive__filters {
	position: relative;
	z-index: 5;
	margin-top: clamp(-64px, -4vw, -40px);
}

.soform-archive__count {
	margin: 24px 0 0;
	font-size: 14px;
	color: var(--soform-encre);
}

/* --------------------------------------------------------------------------
   Champs de formulaire — primitive partagée.

   Libellé en capitales au-dessus, valeur sur un filet, chevron maison : le
   même dessin que les combos de la barre de filtres. Vit ici, dans la feuille
   chargée partout, parce que deux composants s'en servent — le formulaire de
   contact et le simulateur de rémunération du CFA.
   -------------------------------------------------------------------------- */

/* Champs ----------------------------------------------------------------- */

.soform-champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
}

.soform-champ label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

/* « facultatif » n'est pas un cri : même graisse, moins de contraste. */
.soform-champ__option {
	letter-spacing: 0.4px;
	text-transform: none;
	font-size: 12px;
	opacity: 0.72;
}

/* Blocksy habille les champs (fond, bordure, rayon, ombre) : on repart de zéro
   pour retrouver la ligne du site. Le `select` reçoit en plus `appearance` et
   une hauteur explicite — son intrinsèque vaut 40 px pour une ligne de 24. */
.soform-champ input,
.soform-champ textarea,
.soform-champ select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--soform-filet);
	border-radius: 0;
	background: transparent none;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--soform-encre);
	transition: border-color 0.25s ease;
}

.soform-champ select {
	height: 37px;
	padding-right: 24px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.soform-champ textarea {
	padding-bottom: 14px;
	resize: vertical;
	line-height: 1.62;
}

.soform-champ input:hover,
.soform-champ textarea:hover,
.soform-champ select:hover {
	border-bottom-color: var(--soform-accent);
}

.soform-champ input:focus,
.soform-champ textarea:focus,
.soform-champ select:focus {
	outline: 0;
	border-bottom-color: var(--soform-encre);
	box-shadow: 0 1px 0 0 var(--soform-encre);
}

.soform-champ input:focus-visible,
.soform-champ textarea:focus-visible,
.soform-champ select:focus-visible {
	outline: 2px solid var(--soform-accent);
	outline-offset: 6px;
}

.soform-champ__combo {
	position: relative;
	display: flex;
	align-items: center;
}

.soform-champ__chevron {
	position: absolute;
	right: 0;
	bottom: 18px;
	pointer-events: none;
	color: var(--soform-texte-2);
}

.soform-champ__aide {
	font-size: 13px;
	line-height: 1.5;
	color: var(--soform-texte-2);
}

.soform-champ__erreur {
	font-size: 13px;
	line-height: 1.5;
	color: var(--soform-alerte);
}

.soform-champ.is-erreur input,
.soform-champ.is-erreur textarea,
.soform-champ.is-erreur select {
	border-bottom-color: var(--soform-alerte);
}


/* Liste des actualités --------------------------------------------------- */

/* Elle réemploie les cartes du catalogue : rien à redéfinir, seulement l'état
   vide et la pagination. */
.soform-articles__vide {
	margin: 0;
	font-size: var(--soform-corps);
	line-height: 1.62;
	color: var(--soform-texte);
}

.soform-articles__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
}

.soform-articles__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14px;
	color: var(--soform-texte);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.soform-articles__pages .page-numbers:hover {
	background-color: var(--soform-carte);
	color: var(--soform-encre);
}

.soform-articles__pages .page-numbers.current {
	background-color: var(--soform-encre);
	color: var(--soform-page);
}

/* Grille ----------------------------------------------------------------- */

.soform-archive__body {
	padding: 32px 0 80px;
}

.soform-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.soform-card {
	margin: 0;
}

.soform-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--soform-carte);
	box-shadow: 0 10px 28px rgba(23, 18, 15, 0.06);
	color: inherit;
	text-decoration: none;
}

.soform-card__media {
	position: relative;
	display: block;
	height: 240px;
	background-image: linear-gradient(149deg, #8c7f74 0%, #2b231d 71%);
}

.soform-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.soform-card__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(23, 18, 15, 0) 40%, rgba(23, 18, 15, 0.55) 100%);
}

.soform-card__duration {
	position: absolute;
	/* Au-dessus du grain de la vignette (::after, z-index 2 — functions.php). */
	z-index: 3;
	right: 20px;
	bottom: 20px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.2);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.soform-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px 28px 24px;
}

.soform-card__badge {
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--soform-section);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-card__title {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--soform-encre);
}

.soform-card__subtitle {
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

.soform-card__level {
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-card__rule {
	width: 100%;
	height: 1px;
	background-color: rgba(23, 18, 15, 0.1);
}

.soform-card__footer {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.soform-card__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.soform-card__price-label {
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-card__price-value {
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-encre);
}

.soform-card__go {
	display: flex;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--soform-encre);
	color: var(--soform-page);
	transition: transform 0.25s ease;
}

.soform-card__link:hover .soform-card__go {
	transform: translateX(3px);
}

.soform-archive__empty {
	font-size: var(--soform-corps);
	color: var(--soform-texte);
}

.soform-archive .navigation.pagination {
	margin-top: 56px;
}

@media (max-width: 999.98px) {
	.soform-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	.soform-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Fiche formation (single-formation.php) — même système de jetons que
   l'archive : rien ici ne touche aux pages construites en blocs Greenshift.
   -------------------------------------------------------------------------- */

.soform-formation {
	margin: 0;
	background-color: var(--soform-page);
}

.soform-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.soform-badges li {
	padding: 6px 14px;
	border: 1px solid var(--soform-filet);
	border-radius: 999px;
	background-color: var(--soform-carte);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 36px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--soform-filet);
}

.soform-meta dt,
.soform-details dt {
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

.soform-meta dd,
.soform-details dd {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-encre);
}

/* Corps ------------------------------------------------------------------ */

/* Rythme vertical de la fiche — deux valeurs, pas une.
   Toutes les sections portaient 100px en haut ET en bas : chaque frontière
   valait 200px, qu'elle sépare deux blocs d'un même chapitre ou qu'elle ouvre
   un chapitre entier. À rythme égal partout, la page n'a plus de structure.
   Désormais : 112px là où le FOND CHANGE (nouveau chapitre), 72px entre deux
   sections de même fond, qui se lisent alors comme un seul bloc. Les clamp
   descendent à 80/56 sur petit écran, d'où la suppression de la surcharge
   `@media` qui imposait 80px partout. */
.soform-formation__body {
	padding: clamp(80px, 7.8vw, 112px) 0 clamp(56px, 5vw, 72px);
}

.soform-columns {
	display: grid;
	/* Maquette : la colonne principale prend la place restante, l'encart fait
	   400 px fixes et la gouttière 80. En proportions (7fr / 5fr) l'encart
	   grossissait avec l'écran et le tarif se retrouvait perdu au milieu. */
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 80px;
	align-items: start;
}

@media (max-width: 1199.98px) {
	.soform-columns {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 48px;
	}
}

/* `align-items: start` ramenait la colonne à la hauteur du panneau : le
   `position: sticky` de celui-ci n'avait alors AUCUNE course et ne bougeait
   jamais. La colonne reprend toute la hauteur de la grille, le panneau y
   glisse. */
.soform-columns__aside {
	align-self: stretch;
}

.soform-columns__main > h2 {
	margin: 0 0 24px;
}

.soform-programme__title {
	margin-top: 56px !important;
}

/* Contenu libre de la fiche (sections éditoriales + FAQ) -------------------
   Ce bloc n'avait aucune règle : ses titres héritaient des valeurs par défaut
   de Blocksy — 0 px au-dessus du PREMIER (WordPress annule la marge du premier
   enfant d'un conteneur `is-layout-constrained`), 33 px au-dessus des suivants,
   16,6 px en dessous. Le premier titre se retrouvait donc collé à la dernière
   ligne de l'accordéon du programme, et chaque titre de section suivant collé
   au paragraphe précédent.

   On reprend le rythme déjà posé juste au-dessus par `.soform-programme__title` :
   56 px avant un titre de section, 24 px après. La séparation d'avec le
   programme est portée par le CONTENEUR et non par le premier titre, dont la
   marge est annulée par WordPress. */

.soform-formation__free {
	margin-top: 56px;
}

.soform-formation__free > h2 {
	margin-top: 56px;
	margin-bottom: 24px;
}

/* Le premier titre garde sa marge nulle : c'est le conteneur qui l'écarte du
   programme. Sans ça, 112 px s'accumuleraient à cet endroit précis. */
.soform-formation__free > h2:first-child {
	margin-top: 0;
}

.soform-objectifs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.soform-objectifs li {
	display: flex;
	gap: 14px;
	padding: 0 0 16px;
	font-size: var(--soform-corps);
	line-height: 1.6;
	color: var(--soform-texte);
}

.soform-objectifs li:last-child {
	padding-bottom: 0;
}

/* La coche vient de la maquette (node 88:50). Elle était auparavant dessinée
   en bordures pivotées : le trait n'avait ni la même épaisseur ni les mêmes
   extrémités arrondies. */
.soform-objectifs__coche {
	flex: 0 0 auto;
	margin-top: 5px;
	color: var(--soform-texte-2);
}

/* --------------------------------------------------------------------------
   Programme jour par jour — accordéon.

   `<details>` natif : ouverture sans JavaScript, accessible au clavier par
   construction, et le contenu replié reste lisible par un moteur de recherche.
   Le marqueur est un « + » qui pivote en « − », dessiné en masque plutôt qu'en
   caractère : le signe moins typographique et le plus n'ont ni la même chasse
   ni la même hauteur, et le titre sautait d'un ou deux pixels à l'ouverture.
   -------------------------------------------------------------------------- */

.soform-programme__step {
	padding: 24px 0;
	border-top: 1px solid var(--soform-filet);
}

.soform-programme__step:last-child {
	border-bottom: 1px solid var(--soform-filet);
}

.soform-programme__step > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	list-style: none;
	cursor: pointer;
}

.soform-programme__step > summary::-webkit-details-marker {
	display: none;
}

.soform-programme__step > summary::marker {
	content: "";
}

.soform-programme__step > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: var(--soform-texte-2);
	transition: transform 0.3s ease, background-color 0.25s ease;
	-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	-webkit-mask-size: 12px 1.4px, 1.4px 12px;
	mask-size: 12px 1.4px, 1.4px 12px;
	-webkit-mask-position: center, center;
	mask-position: center, center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Ouvert : la barre verticale disparaît, il ne reste que le trait horizontal
   du « − ». Une rotation ferait tourner les deux barres pour rien. */
.soform-programme__step[open] > summary::after {
	-webkit-mask-image: linear-gradient(#000 0 0);
	mask-image: linear-gradient(#000 0 0);
	-webkit-mask-size: 12px 1.4px;
	mask-size: 12px 1.4px;
}

.soform-programme__step > summary:hover::after,
.soform-programme__step > summary:focus-visible::after {
	background-color: var(--soform-encre);
}

.soform-programme__step > summary:focus-visible {
	outline: 2px solid var(--soform-encre);
	outline-offset: 6px;
}

.soform-programme__libelle {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.soform-programme__day {
	flex: 0 0 56px;
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-programme__titre {
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-encre);
}

.soform-programme__step p {
	max-width: 560px;
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

/* Une étape sans texte n'a pas de poignée : elle garde la même ligne, sans le
   signe qui promettrait un dépliage. */
.soform-programme__step--fixe {
	display: flex;
	align-items: center;
}

/* Encart d'inscription --------------------------------------------------- */

.soform-panel {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border-radius: 16px;
	background-color: var(--soform-carte);
	box-shadow: 0 16px 40px rgba(23, 18, 15, 0.1);
}

.soform-panel p {
	margin: 0;
}

.soform-panel__label {
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

/* Le bloc tarif est une seule respiration : intitulé, montant, précision. */
.soform-panel__label + .soform-panel__price {
	margin-top: -18px;
}

.soform-panel__price {
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-encre);
}

/* La précision du tarif se lit, la mention d'accessibilité s'archive : la
   première est en corps de texte, la seconde en micro. */
.soform-panel__price + .soform-panel__note {
	margin-top: -18px;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

.soform-panel__note {
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

/* Intitulé à gauche, valeur à droite, sur une seule ligne. */
.soform-panel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	font-size: 14px;
	line-height: 1.58;
}

.soform-panel__row + .soform-panel__row {
	margin-top: -10px;
}

.soform-panel__row .soform-panel__label {
	text-transform: none;
	letter-spacing: 0;
}

.soform-panel__value {
	font-size: 14px;
	line-height: 1.58;
	text-align: right;
	color: var(--soform-encre);
}

.soform-panel__rule {
	height: 1px;
	background-color: var(--soform-filet);
}

.soform-panel .soform-button {
	justify-content: center;
	width: 100%;
	border-radius: 12px;
	padding: 18px 20px;
	text-align: center;
}

/* Écran bas de plafond : le panneau mesure ~560 px. Collé à 96 px du haut, il
   dépasserait du bas de la fenêtre et sa fin (les deux boutons) deviendrait
   inatteignable — le `sticky` la garderait hors champ en permanence. En
   dessous de 700 px de hauteur utile, il redevient un bloc qui défile. */
@media (min-width: 1000px) and (max-height: 700px) {
	.soform-panel {
		position: static;
	}
}

/* Boutons ---------------------------------------------------------------- */

.soform-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px 28px;
	border-radius: 999px;
	/* 13 px : la taille du bouton « Nous contacter » du header, pour que les
	   deux boutons du site se lisent pareil. */
	font-size: 13px;
	font-weight: 500;
	/* Pas d'interlettrage : à 13 px, les 0,6 px d'écart hachaient le libellé
	   au lieu de l'aérer. */
	letter-spacing: normal;
	text-decoration: none;
	transition: transform 0.25s ease;
}

.soform-button--solid {
	background-color: var(--soform-encre);
	color: var(--soform-page);
}

.soform-button--ghost {
	border: 1px solid var(--soform-filet);
	color: var(--soform-encre);
}

.soform-button--pill {
	background-color: var(--soform-carte);
	color: var(--soform-encre);
	padding: 14px 28px;
}

.soform-button--cta {
	padding: 6px 32px 6px 6px;
	background-color: var(--soform-page);
	color: var(--soform-encre);
}

.soform-button__disc {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--soform-encre);
	color: var(--soform-page);
}

.soform-button:hover {
	transform: translateY(-1px);
}

/* La couleur du texte ne bouge PAS au survol.

   Les boutons sont des `<a>`, et Blocksy pose `a:hover { color:
   var(--theme-link-hover-color) }`. Cette règle vaut 0-1-1 en spécificité,
   contre 0-1-0 pour `.soform-button--solid` : elle l'emportait donc au survol,
   et le libellé changeait de couleur — blanc qui vire, encre qui se délave.
   On la fige sur les trois états, avec 0-2-0 pour passer devant.

   Même correctif que sur les cartes du rail et `.soform-card__link`, dont les
   titres se délavaient sur la photo. Sur ce site, tout `<a>` habillé en bouton
   ou en carte doit figer sa couleur. */
.soform-button--solid:hover,
.soform-button--solid:focus,
.soform-button--solid:active {
	color: var(--soform-page);
}

.soform-button--ghost:hover,
.soform-button--ghost:focus,
.soform-button--ghost:active,
.soform-button--pill:hover,
.soform-button--pill:focus,
.soform-button--pill:active,
.soform-button--cta:hover,
.soform-button--cta:focus,
.soform-button--cta:active {
	color: var(--soform-encre);
}

/* Formatrice ------------------------------------------------------------- */

/* Même fond crème que le corps qui la précède : serrée en haut, large en bas
   pour ouvrir sur la section sable des informations pratiques. */
.soform-formation__formatrice {
	padding: clamp(56px, 5vw, 72px) 0 clamp(80px, 7.8vw, 112px);
}

/* La grille de l'équipe, posée sous le texte de la section. Elle vient du CFA,
   où elle ouvre sa propre section ; ici elle prolonge un propos, d'où un écart
   plus mesuré que les 48 px de son en-tête. */
.soform-formation__formatrice .soform-equipe {
	margin-top: clamp(40px, 4vw, 56px);
}

.soform-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	align-items: center;
}

.soform-duo__media {
	height: 420px;
	border-radius: 16px;
	background-image: linear-gradient(140deg, #e3d8cd 0%, #b8aba0 35%, #2b231d 71%);
}

.soform-duo__text > h2 {
	margin: 12px 0 20px;
}

.soform-duo__text > p {
	margin: 0;
	font-size: var(--soform-corps);
	line-height: 1.62;
	color: var(--soform-texte);
}

.soform-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

.soform-details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--soform-filet);
}

.soform-details div {
	margin: 0;
}

/* Informations & financement --------------------------------------------- */

/* La seule section sable de la fiche : c'est elle qui découpe la page en
   chapitres, elle garde donc ses deux frontières larges. */
.soform-formation__reglementaire {
	padding: clamp(80px, 7.8vw, 112px) 0;
}

/* Crème, suivie des formations associées, également crème : large en haut
   (on sort du sable), serrée en bas. */
.soform-formation__financement {
	padding: clamp(80px, 7.8vw, 112px) 0 clamp(56px, 5vw, 72px);
}

.soform-formation__reglementaire h2,
.soform-formation__financement h2,
.soform-formation__related h2 {
	margin: 0 0 40px;
}

.soform-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* Quatre cartes (financement d'une fiche éligible au CPF) : une rangée de
   quatre plutôt qu'une carte orpheline sous trois. */
@media (min-width: 1000px) {
	.soform-cards:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.soform-info-card {
	padding: 28px;
	border: 1px solid var(--soform-filet);
	border-radius: 10px;
	background-color: var(--soform-carte);
}

.soform-info-card h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--soform-encre);
}

.soform-info-card p {
	margin: 0;
	font-size: var(--soform-corps);
	line-height: 1.6;
	color: var(--soform-texte);
}

.soform-info-card__num {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	letter-spacing: 2px;
	color: var(--soform-accent) !important;
}

.soform-info-card__key {
	margin-top: 10px !important;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2) !important;
}

.soform-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--soform-filet);
}

.soform-stat p {
	margin: 0;
}

.soform-stat__value {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.18;
	color: var(--soform-encre);
}

.soform-stat__label {
	margin-top: 6px !important;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte-2);
}

.soform-footnote {
	margin-top: 24px;
	font-size: 12px;
	line-height: 1.42;
	color: var(--soform-texte-2);
}

/* Formations associées & CTA --------------------------------------------- */

.soform-formation__related {
	padding: clamp(56px, 5vw, 72px) 0 clamp(80px, 7.8vw, 112px);
}

.soform-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.soform-section-head h2 {
	margin: 0;
}

.soform-cta {
	position: relative;
	padding: 200px 0;
	text-align: center;
	/* La descente la plus longue du site — c'est elle qu'on regarde. Courbe
	   `smootherstep` échantillonnée sur neuf arrêts, biaisée à 1,35 pour que
	   la section reste claire plus longtemps avant de plonger : c'est le
	   caractère de la polyligne d'origine, mais sans ses quatre ruptures de
	   pente.

	   L'encre est atteinte à 90 % et non à 100 % : la section borde le pied de
	   page, qui est plat. En finissant sur un palier, la pente est nulle des
	   deux côtés de la frontière — sinon le dégradé descend encore au moment
	   de la rencontre et l'œil lit une ligne horizontale (bande de Mach). */
	background-image: linear-gradient(180deg,
		var(--soform-page) 0%,
		color-mix(in oklab, var(--soform-page) 98.39%, var(--soform-encre)) 11%,
		color-mix(in oklab, var(--soform-page) 89.65%, var(--soform-encre)) 22%,
		color-mix(in oklab, var(--soform-page) 72.48%, var(--soform-encre)) 33%,
		color-mix(in oklab, var(--soform-page) 50%, var(--soform-encre)) 44%,
		color-mix(in oklab, var(--soform-page) 27.52%, var(--soform-encre)) 55%,
		color-mix(in oklab, var(--soform-page) 10.35%, var(--soform-encre)) 66%,
		color-mix(in oklab, var(--soform-page) 1.605%, var(--soform-encre)) 77%,
		var(--soform-encre) 88%,
		var(--soform-encre) 100%);
}


/* Étages du CTA : nuages (::before) 0 · grain (::after, functions.php) 1 ·
   contenu 2. */
.soform-cta > .ct-container {
	position: relative;
	z-index: 2;
}

.soform-cta h2 {
	max-width: 900px;
	margin: 0 auto;
	color: var(--soform-encre);
}

.soform-cta p {
	max-width: 620px;
	margin: 24px auto 40px;
	font-size: var(--soform-corps);
	line-height: 1.62;
	color: var(--soform-page);
}

@media (max-width: 999.98px) {
	.soform-columns,
	.soform-duo {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.soform-panel {
		position: static;
	}

	.soform-cards,
	.soform-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.soform-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Les paddings des sections de fiche sont en `clamp()` : ils descendent
	   seuls et gardent leur hiérarchie. Les écraser ici à 80px partout
	   remettait le rythme à plat sous 1000px. */

	.soform-cta {
		padding: 150px 0;
	}
}

@media (max-width: 689.98px) {
	.soform-cards,
	.soform-stats,
	.soform-meta {
		grid-template-columns: 1fr;
	}

	.soform-cta {
		padding: 110px 0;
	}
}

/* Bande de nuages du CTA (gabarits PHP) : même calque que sur les pages en blocs. */
.soform-cta::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	left: 0;
	height: 300px;
	background-image: var(--soform-cloud, none);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.7;
	pointer-events: none;
}

@media (max-width: 689.98px) {
	.soform-cta::before {
		height: 180px;
	}
}

/* --------------------------------------------------------------------------
   Finitions transverses : focus clavier visible, ancres dégagées du header,
   survol des cartes du catalogue.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--theme-palette-color-2, #6b5a4c);
	outline-offset: 3px;
	border-radius: 4px;
}

:target,
[id^="gspb_"] {
	scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

.soform-card__link {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.soform-card__link:hover,
.soform-card__link:focus,
.soform-card__link:focus-visible {
	/* Même raison que sur le rail : la carte est un lien, la couleur de survol
	   du thème délavait le titre. */
	color: inherit;
}

.soform-card__link:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(23, 18, 15, 0.12);
}

.soform-card__image {
	transition: transform 0.6s ease;
}

/* `--zoom` vaut 1 partout sauf sur les cartes du catalogue, où il porte le
   cadrage propre à la fiche : le survol s'y ajoute au lieu de l'annuler. */
.soform-card__link:hover .soform-card__image {
	transform: scale(calc(var(--zoom, 1) * 1.04));
}

.soform-info-card {
	transition: transform 0.3s ease;
}

.soform-info-card:hover {
	transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Dérive des nuages — ambiance lente, jamais un mouvement qu'on regarde.
   Les calques débordent de 4 % de chaque côté : la translation ne peut donc
   pas découvrir de bord. Coupée si l'utilisateur limite les animations
   (règle prefers-reduced-motion plus haut).
   -------------------------------------------------------------------------- */

/* Dérive des nuages. Amplitude PLAFONNÉE par le débordement des calques :
   ils dépassent de 4 % de chaque côté, donc ±3,5 % de leur propre largeur
   (≈ 3,8 % de la section) ne découvre jamais de bord. Ancienne version :
   ±1,6 % en 54 s, soit une vingtaine de pixels par minute — invisible. */
@keyframes soform-derive-haute {
	0%   { transform: translate3d(-3.5%, 0, 0) scale(1.04); }
	50%  { transform: translate3d(0, -1.6%, 0) scale(1.06); }
	100% { transform: translate3d(3.5%, 0.4%, 0) scale(1.04); }
}

@keyframes soform-derive-basse {
	0%   { transform: translate3d(3.2%, 0, 0) scale(1.05); }
	50%  { transform: translate3d(0, 1.4%, 0) scale(1.02); }
	100% { transform: translate3d(-3.2%, -0.4%, 0) scale(1.05); }
}

/* Le calque du CTA déborde moins (≈ 43 px de chaque côté contre 100 pour le
   hero) : amplitude réduite et échelle constante, sinon son bord apparaît. */
@keyframes soform-derive-cta {
	0%   { transform: translate3d(-1.8%, 0, 0) scale(1.06); }
	50%  { transform: translate3d(0, -1.2%, 0) scale(1.06); }
	100% { transform: translate3d(1.8%, 0.3%, 0) scale(1.06); }
}

@keyframes soform-respiration {
	from { opacity: 0.68; }
	to   { opacity: 1; }
}

.soform-nuage {
	will-change: transform, opacity;
}

/* Durées premières entre elles : les deux bandes ne se retrouvent jamais
   dans la même phase, le ciel ne « boucle » pas à l'œil.

   Par défaut, la dérive DOUCE (soform-derive-cta, ±1,8 %) : les calques des
   pages internes et du CTA ne débordent que d'environ 43 px de chaque côté.
   L'accueil, dont les calques débordent d'une centaine de pixels, a droit à
   la grande dérive (±3,5 %). Marges mesurées sur tout le cycle : 34 px au
   plus serré sur l'accueil, 17 px ailleurs — aucun bord découvert. */
.soform-nuage--haut {
	animation: soform-derive-cta 26s ease-in-out infinite alternate,
		soform-respiration 13s ease-in-out infinite alternate;
}

.soform-nuage--bas {
	animation: soform-derive-cta 34s ease-in-out infinite alternate-reverse,
		soform-respiration 17s ease-in-out -6s infinite alternate;
}

.home .soform-nuage--haut {
	animation-name: soform-derive-haute, soform-respiration;
}

.home .soform-nuage--bas {
	animation-name: soform-derive-basse, soform-respiration;
	animation-direction: alternate;
}

.soform-nuage--cta {
	animation: soform-derive-cta 38s ease-in-out infinite alternate,
		soform-respiration 19s ease-in-out -4s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.soform-nuage {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Avis (accueil, section « Ce que disent nos élèves ») — fondu latéral.

   Les deux bandes défilent en continu et se coupaient net au bord de l'écran.
   Un masque dégradé les fait naître et disparaître dans le fond de la section
   au lieu de buter sur un bord franc. La zone de fondu suit la largeur de
   l'écran : 24 px au minimum sur mobile, 160 px au plus sur grand écran.
   -------------------------------------------------------------------------- */

/* Étage 4 : les nuages de l'appel à l'action (étage 2) et son calque de grain
   (étage 3) remontent de 260 px dans la section précédente. Depuis que la
   section Instagram est masquée (08/10/2026), c'est celle des avis : sans
   étage, les cartes passaient sous les nuages. Les nuages restent visibles sur
   le fond de la section, derrière les cartes. */
.soform-avis .gs-swiper {
	position: relative;
	z-index: 4;
	--soform-avis-fondu: clamp(24px, 8vw, 160px);

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--soform-avis-fondu),
		#000 calc(100% - var(--soform-avis-fondu)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--soform-avis-fondu),
		#000 calc(100% - var(--soform-avis-fondu)),
		transparent 100%
	);
}

/* Toutes les cartes à la MÊME hauteur.

   Swiper pose `align-items: flex-start` sur sa piste : chaque diapo prenait
   donc la hauteur de son texte. Mesuré sur l'accueil : 236 px pour les avis de
   deux lignes, 206 px pour « C'était super, on a pratiqué » — une carte plus
   courte que ses voisines au milieu d'une bande qui défile, et le bas de la
   rangée ondulait.

   La piste s'étire, la carte remplit sa diapo. Portée `.soform-avis` : il y a
   DEUX carrousels sur l'accueil, et l'autre n'a rien demandé. */
.soform-avis .swiper-wrapper {
	align-items: stretch;
}

.soform-avis .swiper-slide-inner {
	height: 100%;
}

/* Et surtout : la carte VISIBLE, qui est un arrière-petit-enfant.

   Étirer la diapo ne suffisait pas. Le fond blanc est porté par le Box
   Container de Greenshift, trois niveaux plus bas, qui gardait la hauteur de
   son texte : mesuré 236 px partout sauf 206 pour l'avis d'une seule ligne.
   Les trois conteneurs au-dessus s'étiraient, celui qu'on regarde non.

   On passe la zone en colonne flex et la carte prend la place restante. En
   flex plutôt qu'en `height: 100%` parce que Greenshift compile ses styles sur
   des sélecteurs d'IDENTIFIANT (`#gspb_container-id-…`), qui battraient une
   règle de classe — `flex` ne se trouve pas sur leur chemin. */
.soform-avis .slider-content-zone {
	/* La zone se dimensionnait sur son contenu : 300 px pour l'avis d'une
	   ligne, 421 pour les autres — dans des diapos toutes larges de 421. La
	   carte suivait sa zone (elle est en `min-width: 100%`), d'où une carte
	   visiblement plus étroite que ses voisines. La contrainte était au-dessus
	   d'elle, pas sur elle. */
	width: 100%;
	display: flex;
	flex-direction: column;
}

.soform-avis .slider-content-zone > * {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Boutons « disque + libellé » de l'accueil — `.soform-bouton`.

   Le lien vit désormais sur le conteneur du bouton et non plus sur le seul
   disque : l'attribut `containerLink` fait poser par Greenshift un
   `<a class="gspb-containerlink">` en `inset: 0`, qui couvre donc le disque ET
   le libellé, et `linkName` lui donne son nom accessible. Avant, l'ancre était
   vide, n'entourait que le disque, et n'avait aucun nom.

   NB : ne pas nommer cette classe `soform-cta` — c'est déjà la section CTA des
   gabarits PHP (padding 200px, dégradé, nuages en ::before).

   Le conteneur s'étirait sur toute la largeur de la colonne : la zone
   cliquable débordait alors de 400 px à droite du libellé. On le ramène à la
   largeur de son contenu ; le centrage éventuel reste géré par le parent.
   -------------------------------------------------------------------------- */

.soform-bouton {
	flex: 0 0 auto;
	width: fit-content;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Hero avec visuel — fiche formation.

   Une fiche s'ouvrait sur six cents pixels de crème : titre, chapeau, badges,
   puis la barre de méta. L'image mise en avant existait pourtant déjà (la
   grille du catalogue l'utilise) mais n'apparaissait nulle part sur la page
   qu'elle illustre. Elle prend maintenant la colonne de droite du hero.

   Placement explicite en colonne 1 pour le texte : sans lui, le placement
   automatique de la grille répartirait le surtitre et le titre côte à côte.
   -------------------------------------------------------------------------- */

.soform-hero__media {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 16px;
	background-image: linear-gradient(149deg, #8c7f74 0%, #2b231d 71%);
}

.soform-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1000px) {
	.soform-hero--media .soform-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
		column-gap: clamp(40px, 5vw, 72px);
		align-items: start;
	}

	.soform-hero--media .soform-hero__inner > * {
		grid-column: 1;
	}

	.soform-hero--media .soform-breadcrumb {
		grid-column: 1 / -1;
	}

	.soform-hero--media .soform-hero__media {
		grid-column: 2;
		/* `-1` désignerait la dernière ligne EXPLICITE de la grille — il n'y en
		   a aucune ici, toutes les rangées sont implicites, et le visuel se
		   retrouvait posé sur la première rangée, au-dessus du fil d'Ariane.
		   Un span large couvre toutes les rangées de texte : celles qui
		   n'existent pas s'écrasent à zéro. */
		grid-row: 2 / span 20;
		align-self: stretch;
		min-height: 340px;
	}

	.soform-hero--media .soform-hero__image {
		position: absolute;
		inset: 0;
	}

	/* La colonne s'est resserrée : le titre casserait sur quatre lignes. */
	.soform-hero--media .soform-hero__title {
		max-width: 15ch;
	}

	.soform-hero--media .soform-hero__lead {
		max-width: 46ch;
	}
}

@media (max-width: 999.98px) {
	.soform-hero__media {
		margin-top: 40px;
		aspect-ratio: 16 / 9;
	}
}

/* Le titre d'un article est une phrase, pas un nom de page : à la taille du
   hero il cassait sur quatre lignes. */
.soform-hero--article .soform-hero__title {
	max-width: 26ch;
	font-size: clamp(28px, 3.2vw, 44px);
}

/* --------------------------------------------------------------------------
   Portrait des formatrices.

   `.soform-duo__media` était un `<div aria-hidden>` sans contenu, habillé d'un
   dégradé : à l'écran, un aplat gris de 420 px de haut, que l'œil lit comme
   une image qui n'a pas chargé. Il ne s'affiche plus que s'il y a réellement
   une photo (option `soform_formatrice_id`) ; sinon la section passe sur une
   seule colonne, ce qui se lit comme une intention et non comme un manque.
   -------------------------------------------------------------------------- */

.soform-duo__media {
	position: relative;
	overflow: hidden;
	height: 420px;
	margin: 0;
}

.soform-duo__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.soform-duo--sans-media {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.soform-duo--sans-media .soform-duo__text {
	max-width: 780px;
}

.soform-duo--sans-media .soform-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 899.98px) {
	.soform-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.soform-duo__media {
		height: 300px;
	}

	.soform-duo--sans-media .soform-details {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   Onglets — primitive partagée.

   Le dessin vivait dans `assets/carte/carte.css` sous `.soform-carte__onglet`,
   donc il n'existait que sur /institut/. Les rubriques des actualités s'en
   servent aussi : la primitive monte ici, comme `.soform-champ` avant elle.
   -------------------------------------------------------------------------- */

.soform-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.soform-onglet {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--soform-filet);
	border-radius: 999px;
	background-color: transparent;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.6px;
	color: var(--soform-texte);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.soform-onglet:hover,
.soform-onglet:focus-visible {
	border-color: var(--soform-encre);
	color: var(--soform-encre);
}

.soform-onglet.is-actif {
	border-color: var(--soform-encre);
	background-color: var(--soform-encre);
	color: var(--soform-page);
}

/* --------------------------------------------------------------------------
   Carte « on choisit avec vous » — dernière cellule de la grille du catalogue.

   Sept formations sur trois colonnes laissaient deux cellules vides en bas de
   page : la grille se terminait sur un trou, juste avant le pied de page.
   Cette carte l'occupe et n'a pas de vignette — c'est ce qui la distingue.
   -------------------------------------------------------------------------- */

.soform-card--aide .soform-card__link {
	justify-content: center;
	background-color: var(--soform-section);
	box-shadow: none;
	border: 1px solid var(--soform-filet);
}

.soform-card--aide .soform-card__body {
	padding: 36px 28px 30px;
}

.soform-card--aide .soform-card__subtitle {
	color: var(--soform-texte);
}

.soform-card--aide .soform-card__link:hover {
	box-shadow: 0 18px 40px rgba(23, 18, 15, 0.1);
}

/* --------------------------------------------------------------------------
   Article d'actualité (single.php).

   Sans gabarit dédié, un article tombait sur celui de Blocksy : titre nu,
   texte pleine largeur, formulaire de commentaires. Le corps se lit ici sur
   une mesure courte, comme n'importe quel texte long du site.
   -------------------------------------------------------------------------- */

.soform-article__meta {
	/* Pas de `background-color` : il repeindrait le fond de page PAR-DESSUS
	   le grain de l'article, qui est en z-index 0. Le `z-index` suffit à
	   passer le contenu au-dessus de la texture. */
	position: relative;
	z-index: 1;
	padding: 8px 0 0;
}

.soform-article__date {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

.soform-article__cover {
	/* Pas de `background-color` : il repeindrait le fond de page PAR-DESSUS
	   le grain de l'article, qui est en z-index 0. Le `z-index` suffit à
	   passer le contenu au-dessus de la texture. */
	position: relative;
	z-index: 1;
	margin: 40px 0 0;
}

.soform-article__frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 16 / 7;
	background-image: linear-gradient(149deg, #8c7f74 0%, #2b231d 71%);
}

.soform-article__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.soform-article__body {
	/* Pas de `background-color` : il repeindrait le fond de page PAR-DESSUS
	   le grain de l'article, qui est en z-index 0. Le `z-index` suffit à
	   passer le contenu au-dessus de la texture. */
	position: relative;
	z-index: 1;
	padding: 64px 0 96px;
}

.soform-article__prose {
	max-width: 68ch;
	margin: 0 auto;
	font-size: var(--soform-corps);
	line-height: 1.72;
	color: var(--soform-texte);
}

.soform-article__prose > * + * {
	margin-top: 24px;
}

/* Le h2 du corps sortait à la taille d'un titre de section : dans un texte
   suivi, il doit se lire comme une respiration, pas comme un nouveau départ. */
.soform-article__prose h2 {
	margin-top: 56px;
	margin-bottom: 0;
	font-size: 26px;
	line-height: 1.24;
	letter-spacing: 0;
	text-transform: none;
	color: var(--soform-encre);
}

.soform-article__prose h3 {
	margin-top: 40px;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--soform-encre);
}

.soform-article__prose ul,
.soform-article__prose ol {
	padding-left: 22px;
}

.soform-article__prose li + li {
	margin-top: 8px;
}

.soform-article__prose blockquote {
	margin: 40px 0;
	padding-left: 24px;
	border-left: 2px solid var(--soform-filet);
	font-size: 20px;
	line-height: 1.5;
	color: var(--soform-encre);
}

.soform-article__prose img {
	border-radius: 12px;
}

.soform-article__retour {
	max-width: 68ch;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--soform-filet);
}

.soform-articles__onglets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

@media (max-width: 689.98px) {
	.soform-article__body {
		padding: 48px 0 72px;
	}

	.soform-article__prose {
		font-size: var(--soform-corps);
	}

	.soform-article__prose h2 {
		margin-top: 40px;
		font-size: 23px;
	}
}

/* --------------------------------------------------------------------------
   Questions fréquentes — `.soform-faq`.

   Les questions sont des `<details>` natifs : le dépliage fonctionne sans
   JavaScript, il est accessible au clavier par construction, et le balisage
   `FAQPage` du thème (inc/seo.php) sait relire le même markup. Reste à les
   habiller — sans habillage, le navigateur sort son triangle gris et un corps
   de texte par défaut au milieu d'une page dessinée.
   -------------------------------------------------------------------------- */

.soform-faq .wp-block-details {
	border-top: 1px solid var(--soform-filet);
}

/* Dans un `.entry-content` (contenu libre des fiches formation), Blocksy
   pose sa marge de contenu sur chaque enfant : 27 px sous l'intitulé et
   24 px sous chaque question, soit un vide de 50 px sous chaque question
   FERMÉE. Le rythme vient du padding de l'intitulé, pas des marges. */
.soform-faq .wp-block-details,
.soform-faq .wp-block-details > summary {
	margin-block: 0;
}

.soform-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--soform-filet);
}

.soform-faq .wp-block-details > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	padding: 24px 0;
	font-size: var(--soform-corps);
	line-height: 1.5;
	color: var(--soform-encre);
	cursor: pointer;
	list-style: none;
	transition: color 0.25s ease;
}

/* Le marqueur natif diffère d'un navigateur à l'autre : on le retire des deux
   façons qui existent, puis on dessine le nôtre. */
.soform-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.soform-faq .wp-block-details > summary::marker {
	content: "";
}

.soform-faq .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	background-color: currentColor;
	transition: transform 0.3s ease;
	/* Un « + » dessiné en masque : deux barres, aucune ressource à charger. */
	-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	-webkit-mask-size: 12px 1.5px, 1.5px 12px;
	mask-size: 12px 1.5px, 1.5px 12px;
	-webkit-mask-position: center, center;
	mask-position: center, center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.soform-faq .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.soform-faq .wp-block-details > summary:hover,
.soform-faq .wp-block-details > summary:focus-visible {
	color: var(--soform-accent);
}

.soform-faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--soform-encre);
	outline-offset: 4px;
}

.soform-faq .wp-block-details p {
	max-width: 74ch;
	margin: 0 0 26px;
	padding-right: 44px;
	font-size: var(--soform-corps);
	line-height: 1.7;
	color: var(--soform-texte);
}

@media (max-width: 689.98px) {
	.soform-faq .wp-block-details > summary {
		gap: 20px;
		font-size: 17px;
	}

	.soform-faq .wp-block-details p {
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Coordonnées cliquables — `.soform-coord`.

   Le numéro de téléphone et l'adresse e-mail étaient du texte inerte : sur
   mobile, on ne pouvait ni composer ni écrire d'un doigt. Ce sont maintenant
   de vrais liens, qui doivent se lire comme le texte qui les porte plutôt que
   comme les liens bleus par défaut du thème.
   -------------------------------------------------------------------------- */

.soform-coord a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--soform-filet);
	transition: border-color 0.25s ease;
}

.soform-coord a:hover,
.soform-coord a:focus-visible {
	color: inherit;
	border-bottom-color: var(--soform-encre);
}

/* --------------------------------------------------------------------------
   Page introuvable et archives de rubrique.

   Les deux réemploient les briques existantes ; il ne reste ici que ce qui
   leur est propre : une carte d'information devenue lien, et le retour vers
   la liste complète.
   -------------------------------------------------------------------------- */

.soform-erreur .soform-archive__body {
	padding: 56px 0 96px;
}

.soform-info-card--lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

.soform-info-card--lien:hover,
.soform-info-card--lien:focus-visible {
	color: inherit;
}

.soform-info-card--lien h2 {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--soform-encre);
}

.soform-erreur .soform-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 899.98px) {
	.soform-erreur .soform-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.soform-archive__retour {
	margin: 56px 0 0;
}

/* Évite les lignes orphelines d'un seul mot sur les titres et les questions —
   en français, un « ? » resté seul en bas d'une question se remarque. */
.soform-hero__title,
.soform-hero__lead,
.soform-faq .wp-block-details > summary,
.soform-card__title,
.soform-info-card h3 {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Le ciel du hero — commun à tout le site.

   Les pages construites en blocs posent leurs nuages en calques Greenshift
   (voir `hero_page()` dans .build/gen_inner.py). Les gabarits PHP, eux,
   n'avaient qu'un dégradé : même typographie, même palette, mais un fond nu —
   un troisième système d'en-tête, qu'on repérait au premier coup d'œil en
   passant du catalogue à l'institut.

   La bande est ici un `::after` plutôt qu'un calque : rien à ajouter dans le
   markup, et le `::before` de la section reste pris par le grain.
   -------------------------------------------------------------------------- */

.soform-hero {
	/* La bande déborde de 4 % de chaque côté pour que sa dérive ne découvre
	   jamais de bord : sans découpe, elle ferait défiler la page en largeur. */
	overflow: hidden;
}

.soform-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: -4%;
	bottom: 0;
	left: -4%;
	/* Assez basse pour se lire comme un horizon sous le texte : à 380 px elle
	   remontait derrière le chapeau et les étiquettes, et leur mangeait le
	   contraste. Le masque la fait naître au lieu de la poser d'un bloc. */
	height: clamp(150px, 17vw, 240px);
	background-image: var(--soform-cloud, none);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
	opacity: 0.5;
	/* Le nuage naît ET se dissout : sans le fondu du bas, sa partie la plus
	   claire butait sur le bord inférieur du hero, que `overflow: hidden`
	   coupe net — une ligne mesurée à 4,6 unités de luminance. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52%, #000 76%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 52%, #000 76%, transparent 100%);
	pointer-events: none;
	animation: soform-derive-haute 64s ease-in-out infinite alternate;
	will-change: transform;
}

/* Le contenu repasse au-dessus du ciel (le grain de section est en 0). */
.soform-hero__inner {
	z-index: 2;
}

/* Pages formation : pas de ciel. On vient y lire un programme, un tarif et des
   dates — le décor imagé reste à l'accueil et aux pages qui racontent le lieu.
   La règle retire l'élément plutôt que de compter sur `--soform-cloud` absent :
   l'intention se lit dans la feuille, pas dans une variable manquante. */
.soform-hero--sans-ciel::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.soform-hero::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Fonds de section de la fiche formation.

   La maquette pose des APLATS FRANCS, pas des fondus : « Informations
   pratiques » est un bloc sable posé bord à bord entre deux sections crème,
   et la frontière se voit — c'est le rythme voulu, il découpe la page en
   chapitres. Un fondu à cet endroit dissout justement ce qui fait la
   structure.

   Les deux seuls dégradés de la fiche sont ceux que la maquette dessine
   elle-même : l'en-tête (sable → crème, node 88:3) et l'appel à l'action
   (crème → encre, node 89:112). Ils ne séparent pas deux sections, ils font
   entrer dans la page et en sortir.

   Le fondu `smootherstep` reste en place sur les pages construites en blocs
   (voir `fondu_entre_sections()` dans .build/gen_head.py) — il n'a été retiré
   que de la fiche.
   -------------------------------------------------------------------------- */

.soform-formation__reglementaire {
	background-color: var(--soform-section);
}

@supports not (background-image: linear-gradient(#000, color-mix(in oklab, #000 50%, #fff))) {
	.gspb_row.soform-fond--creme { background-image: none; background-color: var(--theme-palette-color-8, #f6f0ea); }
	.gspb_row.soform-fond--sable { background-image: none; background-color: var(--theme-palette-color-7, #ede3d9); }
	.gspb_row.soform-fond--sable-fonce { background-image: none; background-color: var(--theme-palette-color-6, #e3d8cd); }
	.gspb_row.soform-fond--encre { background-image: none; background-color: var(--theme-palette-color-1, #17120f); }
}

/* --------------------------------------------------------------------------
   Fiche formation — alignement sur la maquette (Figma node 88:2).

   L'en-tête enchaîne fil d'Ariane, étiquettes, titre, chapeau, puis la ligne
   durée / effectif / lieu / niveau. Les métadonnées étaient jusqu'ici dans une
   carte blanche qui chevauchait le bas du hero ; la maquette les pose dans le
   flux, en quatre colonnes de texte nu, et ouvre ensuite sur une bande photo.
   -------------------------------------------------------------------------- */

.soform-hero--fiche {
	padding-bottom: clamp(56px, 5vw, 72px);
	/* Sable en haut, crème en bas : la bande photo qui suit est sur le crème. */
	background-image: linear-gradient(180deg, var(--soform-section) 0%, var(--soform-page) 100%);
}

.soform-hero--fiche .soform-hero__title {
	max-width: 20ch;
	margin-top: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.soform-hero--fiche .soform-hero__lead {
	max-width: 700px;
	margin-top: 18px;
}

/* Les étiquettes passent AVANT le titre : elles le qualifient avant qu'on le
   lise, et la maquette les pose là. */
.soform-hero--fiche .soform-badges {
	margin-top: 26px;
}

.soform-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 44px 0 0;
	padding: 0;
	border: 0;
}

.soform-hero__meta .soform-meta__item {
	padding: 0;
	border: 0;
}

.soform-hero__meta dt {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

.soform-hero__meta dd {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-encre);
}

/* 02 — Visuel ------------------------------------------------------------ */

.soform-formation__visuel {
	position: relative;
	z-index: 1;
	margin: 0;
	/* PAS de `background-color` ici. Le `z-index: 1` fait passer cette bande
	   au-dessus du grain de la fiche (`.soform-formation::before`, z-index 0) :
	   lui redonner une couleur de fond repeignait par-dessus la texture, et la
	   section de la photo sortait lisse au milieu d'une page grainée. Le parent
	   porte déjà `--soform-page`, la couleur était donc en trop. Même piège que
	   les trois blocs de l'article, corrigé le 02/09. */
}

.soform-formation__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1279 / 520;
	/* Rayon et dégradé de secours relevés sur la maquette (node 88:42) : 15 px,
	   et un fondu encre plutôt que le brun clair des vignettes de carte. */
	border-radius: 15px;
	background-image: linear-gradient(157.87deg, #4a3e35 0%, #17120f 71.43%);
}

.soform-formation__legende {
	position: absolute;
	top: clamp(20px, 3vw, 40px);
	left: clamp(20px, 5.5vw, 80px);
	z-index: 3;
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.42);
}

.soform-formation__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Titres de section ------------------------------------------------------ */

.soform-formation__body h2,
.soform-formation__reglementaire h2,
.soform-formation__financement h2,
.soform-formation__related h2 {
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-encre);
}

/* En-tête de section avec chapeau : la maquette pose une phrase sous le titre
   du bloc financement, qui n'en avait pas. */
.soform-section-intro {
	margin-bottom: 48px;
}

.soform-section-intro h2 {
	margin: 0 0 16px;
}

.soform-section-intro p {
	max-width: 640px;
	margin: 0;
	font-size: var(--soform-corps);
	line-height: 1.6;
	color: var(--soform-texte);
}

/* Guide de choix du catalogue (archive-formation.php) -------------------- */

.soform-guide {
	padding-block: 24px 140px;
}

.soform-guide__grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 80px;
	align-items: start;
}

.soform-guide h2 {
	margin: 0 0 20px;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-encre);
}

.soform-guide h3 {
	margin: 36px 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--soform-encre);
}

.soform-guide p {
	max-width: 62ch;
	margin: 0;
	font-size: var(--soform-corps);
	line-height: 1.65;
	color: var(--soform-texte);
}

.soform-guide .soform-guide__chapeau {
	font-size: var(--soform-corps);
	line-height: 1.55;
	color: var(--soform-encre);
}

@media (max-width: 999px) {
	.soform-guide__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 64px;
	}
}

/* Cartes de dispositif de financement ------------------------------------ */

.soform-formation__financement .soform-info-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border: 0;
	border-radius: 16px;
	background-color: var(--soform-section);
}

.soform-formation__financement .soform-info-card__num {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.6px;
	color: var(--soform-accent);
}

.soform-formation__financement .soform-info-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--soform-encre);
}

.soform-formation__financement .soform-info-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

/* La « clé » est une pastille, pas une ligne de texte : c'est ce qu'on retient
   de la carte, la maquette la détache sur fond blanc. */
.soform-info-card__key {
	margin: 0;
	line-height: 0;
}

.soform-info-card__key span {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	background-color: var(--soform-carte);
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

/* Le contour du bouton secondaire du panneau est plus marqué que le filet
   courant : c'est un bouton, il doit se voir comme tel. */
.soform-panel .soform-button--ghost {
	border-color: rgba(23, 18, 15, 0.2);
}

@media (max-width: 899.98px) {
	.soform-hero__meta {
		gap: 20px 32px;
	}

	.soform-formation__frame {
		aspect-ratio: 4 / 3;
	}
}

/* Étiquettes de la fiche : fond sable et pas de contour, comme la maquette.
   Ailleurs (catalogue, article) le hero passe par le crème en son milieu, où
   une pastille sable disparaîtrait — elles y restent blanches à filet. */
.soform-hero--fiche .soform-badges li {
	padding: 7px 14px;
	border: 0;
	background-color: var(--soform-section);
}

/* --------------------------------------------------------------------------
   Informations pratiques — colonnes à filet, pas cartes.

   La maquette (node 89:4) pose trois colonnes séparées par un filet HAUT, sans
   fond ni contour : le bloc se lit comme une notice, pas comme trois offres à
   comparer. Elles sortaient jusqu'ici avec le dessin de carte blanche du bloc
   financement, qui lui en a bien besoin.
   -------------------------------------------------------------------------- */

.soform-formation__reglementaire .soform-cards {
	gap: 40px;
}

.soform-formation__reglementaire .soform-info-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 0 0;
	border: 0;
	border-top: 1px solid rgba(23, 18, 15, 0.15);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.soform-formation__reglementaire .soform-info-card:hover {
	transform: none;
}

.soform-formation__reglementaire .soform-info-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--soform-encre);
}

.soform-formation__reglementaire .soform-info-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

/* Les colonnes portent déjà leur filet : un second trait au-dessus des
   indicateurs ferait deux règles à quelques pixels l'une de l'autre. */
.soform-formation__reglementaire .soform-stats {
	margin-top: 56px;
	padding-top: 0;
	border-top: 0;
}

/* Formatrice : portrait à gauche, 400 px comme la maquette (node 91:22), et
   non deux colonnes égales — un portrait sur 640 px de large se lirait comme
   une bannière. Sans photo, la section reste sur une colonne (voir plus haut). */
@media (min-width: 900px) {
	.soform-formation__formatrice .soform-duo:not(.soform-duo--sans-media) {
		grid-template-columns: 400px minmax(0, 1fr);
		gap: 72px;
	}

	.soform-formation__formatrice .soform-duo__media {
		height: 480px;
	}
}

/* --------------------------------------------------------------------------
   Fiche formation — le header prolonge le hero.

   Dans la maquette (node 88:3) la barre de navigation est DANS la section
   d'en-tête : elle flotte sur le sable du haut de dégradé. Sur le site, le
   header de Blocksy est un bloc à part, transparent, qui laisse voir le fond
   du body — crème. On avait donc 104 px de crème posés sur un hero qui démarre
   en sable, soit exactement l'arête que la maquette n'a pas.

   Peindre le body en sable sur ces pages suffit : le header transparent laisse
   passer la teinte, le hero démarre sur la même, et la descente vers le crème
   se fait d'un seul tenant. Les sections qui suivent ont toutes un fond opaque,
   le body ne se voit nulle part ailleurs.
   -------------------------------------------------------------------------- */

body.single-formation {
	background-color: var(--theme-palette-color-7, #ede3d9);
}

/* La rangée du header porte son propre fond crème, posé par le Customizer :
   elle recouvrait le sable du body. On la rend transparente sur ces pages
   seulement — le header n'a alors plus de couleur propre et laisse passer
   celle du body, comme la nav de la maquette flotte sur le dégradé. */
body.single-formation .ct-header [data-row="middle"] {
	background-color: transparent;
}

/* Titre d'appel à l'action — maquette node 89:116 : deux lignes centrées en
   42 px, la seconde en italique, capitales, `letter-spacing: 1px`. Les deux
   lignes se serrent (`-6px`) pour se lire comme un seul bloc. */
.soform-cta h2 {
	max-width: 900px;
	margin: 0 auto;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--soform-encre);
}

/* Seconde ligne du titre : à la ligne, mais plus en italique (Romain,
   23/09/2026 : « sur le titre du bas je ne veux pas de texte en italic »). */
.soform-cta__ligne {
	display: block;
}

/* --------------------------------------------------------------------------
   Signature du portrait — « Votre formatrice ».

   Le portrait vient maintenant du type de contenu Formatrice, désigné par la
   formation. Il porte donc un nom : sans lui, la page montrerait un visage
   anonyme et la promesse — « votre formatrice » — resterait aussi vague
   qu'avec l'ancien texte au pluriel.

   Le cartouche est posé DANS le cadre, en bas : le nom se lit avec le visage,
   pas à côté.
   -------------------------------------------------------------------------- */

.soform-duo__signature {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 56px 28px 24px;
	/* Le dégradé porte le texte sans assombrir tout le portrait. */
	background-image: linear-gradient(180deg, rgba(23, 18, 15, 0) 0%, rgba(23, 18, 15, 0.72) 100%);
	color: #ffffff;
}

.soform-duo__nom {
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}

.soform-duo__role {
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.72);
}

/* Détails de la formatrice — maquette node 91:28 : intitulé sur 140 px à
   gauche, valeur à droite sur la place restante, 24 px de gouttière et 12 px
   entre les lignes. Ils s'empilaient jusqu'ici (intitulé au-dessus de la
   valeur), ce qui doublait la hauteur du bloc et rompait l'alignement des
   trois valeurs. */
.soform-formation__formatrice .soform-details {
	gap: 12px;
	border-top-color: rgba(23, 18, 15, 0.1);
}

.soform-formation__formatrice .soform-details div {
	display: flex;
	gap: 24px;
	align-items: baseline;
}

.soform-formation__formatrice .soform-details dt {
	flex: 0 0 140px;
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	text-transform: none;
}

.soform-formation__formatrice .soform-details dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.58;
}

@media (max-width: 599.98px) {
	.soform-formation__formatrice .soform-details div {
		flex-direction: column;
		gap: 2px;
	}

	.soform-formation__formatrice .soform-details dt {
		flex-basis: auto;
	}
}

/* --------------------------------------------------------------------------
   En-tête transparent — la couleur du menu suit ce qu'il survole.

   Le header est transparent sur tout le site : il flotte au-dessus du hero au
   lieu de poser une barre crème avant lui. Le Customizer ne connaît qu'une
   seule couleur de menu pour cet état, et c'est le blanc — juste, puisque
   l'accueil, l'institut et le CFA s'ouvrent sur une photo assombrie par un
   dégradé. Partout ailleurs le hero démarre en crème (#f6f0ea) : le blanc s'y
   diluait en beige et la navigation devenait illisible.

   `soform_entete_sur_photo()` (functions.php) regarde si la première row de la
   page porte une image de fond, et pose `soform-entete-sable` quand ce n'est
   pas le cas. Ici, on rend alors le menu à l'encre — les mêmes couleurs que le
   menu non transparent du Customizer, pour qu'il n'y ait qu'un seul menu sombre
   sur le site.

   La spécificité doit dépasser celle de la règle de Blocksy dans global.css
   (`[data-header*="type-1"] .ct-header [data-transparent-row="yes"] …`) : le
   `body.soform-entete-sable` de tête s'en charge.
   -------------------------------------------------------------------------- */

body.soform-entete-sable .ct-header [data-transparent-row="yes"] [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--theme-palette-color-1, #17120f);
	--theme-link-hover-color: var(--theme-palette-color-2, #6b5a4c);
	--theme-link-active-color: var(--theme-palette-color-2, #6b5a4c);
}

/* Le trait de l'indicateur de menu (`menu_indicator_effect: type-1`) reprend la
   couleur du lien : rien à faire de plus. Le bouton « Nous contacter », lui,
   garde son fond encre dans les deux cas — il se lit sur la photo comme sur le
   crème. */

/* --------------------------------------------------------------------------
   Catalogue : la photo porte le titre.

   L'institut ne dispose que de sept visuels pour trente et une formations : une
   même image sert plusieurs fiches d'un même domaine. Le texte monte donc SUR
   la photo — domaine et durée en exergue, titre en bas — parce que le titre est
   la seule donnée qui diffère d'une carte à l'autre : c'est lui qui les
   distingue quand l'image se répète.

   `--fuite` et `--zoom` donnent à chaque fiche son cadrage (posés par
   `.build/photos-formations.php`) : deux voisines qui partagent une image n'en
   montrent pas le même morceau. Faire varier le seul point de fuite ne suffisait
   pas — il faut aussi l'échelle pour que trois cartes de la même photo se lisent
   comme trois images. `--teinte` sert de fond tant que la photo
   n'est pas chargée, et de repli pour une fiche qui n'en aurait pas.
   -------------------------------------------------------------------------- */

.soform-card--index .soform-card__entete {
	--teinte: var(--theme-palette-color-6, #e3d8cd);
	--fuite: center 45%;
	--zoom: 1;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 250px;
	padding: 24px 26px 26px;
	overflow: hidden;
	background-image: linear-gradient(158deg, var(--theme-palette-color-7, #ede3d9) 0%, var(--teinte) 100%);
}

.soform-card--index .soform-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fuite);
	transform: scale(var(--zoom));
	transform-origin: var(--fuite);
}

/* Le voile : sombre en bas, où se pose le titre ; presque nul en haut, pour ne
   pas éteindre la photo. L'exergue tient sans lui, il est en petites capitales
   sur la partie la plus claire — d'où l'ombre portée ci-dessous plutôt qu'un
   second dégradé qui aurait grisé toute l'image. */
.soform-card--index .soform-card__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		176deg,
		rgba(23, 18, 15, 0.34) 0%,
		rgba(23, 18, 15, 0.1) 34%,
		rgba(23, 18, 15, 0.58) 78%,
		rgba(23, 18, 15, 0.82) 100%
	);
}

.soform-card--index .soform-card__exergue {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	font-family: "Jost", var(--theme-font-family, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 8px rgba(23, 18, 15, 0.55);
}

/* La durée ne se coupe pas, même derrière un nom de domaine long. */
.soform-card--index .soform-card__duree {
	flex: none;
	letter-spacing: 1.6px;
	color: #ffffff;
}

.soform-card--index .soform-card__title {
	position: relative;
	margin-top: auto;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ffffff;
	text-shadow: 0 2px 18px rgba(23, 18, 15, 0.5);
}

/* Le corps ne porte plus le titre : il commence à l'étiquette. */
.soform-card--index .soform-card__body {
	gap: 12px;
	padding-top: 24px;
}

/* --------------------------------------------------------------------------
   Parcours certifiants — carte encre.

   Trois fiches sur trente et une délivrent un titre inscrit au répertoire
   national (RNCP39030, RS6676, RS6702). À plat dans la grille, le CAP à
   5 075 € et ses 1 491 heures pesait exactement autant qu'une journée à
   1 290 € : le catalogue ne disait plus ce qui était un diplôme. Le fond encre
   le dit sans ajouter un mot.
   -------------------------------------------------------------------------- */

.soform-card--certifiante .soform-card__link {
	background-color: var(--soform-encre, #17120f);
	color: var(--theme-palette-color-8, #f6f0ea);
}

/* La photo reste, un cran plus sombre : la carte doit se lire comme un bloc
   d'encre du haut du visuel jusqu'au tarif. */
.soform-card--certifiante .soform-card__veil {
	background-image: linear-gradient(
		176deg,
		rgba(23, 18, 15, 0.48) 0%,
		rgba(23, 18, 15, 0.3) 34%,
		rgba(23, 18, 15, 0.78) 78%,
		var(--soform-encre, #17120f) 100%
	);
}

.soform-card--certifiante .soform-card__level {
	color: color-mix(in oklab, var(--theme-palette-color-8, #f6f0ea) 62%, transparent);
}

.soform-card--certifiante .soform-card__subtitle,
.soform-card--certifiante .soform-card__price-value {
	color: var(--theme-palette-color-8, #f6f0ea);
}

.soform-card--certifiante .soform-card__rule {
	background-color: color-mix(in oklab, var(--theme-palette-color-8, #f6f0ea) 28%, transparent);
}

.soform-card--certifiante .soform-card__price-label {
	color: color-mix(in oklab, var(--theme-palette-color-8, #f6f0ea) 55%, transparent);
}

.soform-card--certifiante .soform-card__badge {
	border-color: color-mix(in oklab, var(--theme-palette-color-8, #f6f0ea) 30%, transparent);
	background-color: color-mix(in oklab, var(--theme-palette-color-8, #f6f0ea) 10%, transparent);
	color: var(--theme-palette-color-8, #f6f0ea);
}

.soform-card--certifiante .soform-card__go {
	border-color: transparent;
	background-color: var(--theme-palette-color-8, #f6f0ea);
	color: var(--soform-encre, #17120f);
}

/* Les deux certifications RS6676 et RS6702 n'ont aucun tarif publié : le pied
   de carte le dit plutôt que de rester vide. */
.soform-card--index .soform-card__price-value--devis {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Nuages — retirés sur la page institut seulement.

   Le motif est posé à trois endroits : le ciel des en-têtes des gabarits PHP
   (`.soform-hero::after`), la bande de la section d'appel à l'action
   (`.soform-cta::before`) et, sur les pages construites en blocs, des calques
   Greenshift `.soform-nuage` placés dans le contenu — jusqu'à treize sur cette
   page-là. Il reste partout ailleurs.

   Les calques Greenshift vivent dans le contenu, régénéré par `.build/gen.py` :
   les masquer ici évite de réécrire la page et survit à la prochaine
   génération. `display: none` empêche aussi le téléchargement de l'image de
   fond, donc la page ne paie plus les nuages qu'elle n'affiche pas.

   La classe vient de `soform_classe_de_page()` (functions.php).
   -------------------------------------------------------------------------- */

.soform-page-institut .soform-nuage,
.soform-page-institut .soform-hero::after,
.soform-page-institut .soform-cta::before {
	display: none;
}

/* Encart encre des pages en blocs : le grain se pose en ::before (z-index 0,
   functions.php), le contenu remonte au-dessus. */
.soform-encart-sombre {
	position: relative;
	overflow: hidden;
}

.soform-encart-sombre > * {
	position: relative;
	z-index: 1;
}


/* Logo Qualiopi du pied de page (widget « Pied 1 ») : le fichier officiel est
   sur fond blanc, on l'assume en pastille arrondie sur le fond encre. */
.soform-pied-qualiopi {
	margin-block: 20px 8px;
}

.soform-pied-qualiopi img {
	display: block;
	border-radius: 8px;
}

.soform-pied-qualiopi + p a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Calques décoratifs des pages en blocs (nuages, grain plein cadre, fondu du
   hero) : ils débordent volontairement sur la section voisine — les nuages du
   CTA remontent de 330 px. Sans ceci ils captaient les clics : la dernière
   question de la FAQ au-dessus du CTA n'était plus cliquable. */
.soform-nuage,
.soform-grain-layer,
.soform-fondu {
	pointer-events: none;
}

/* Avis de l'accueil : `.swiper` rogne tout ce qui dépasse (overflow hidden,
   indispensable au défilement), et l'ombre des cartes descend de 44 px — elle
   était coupée net sous chaque carte. Marge intérieure verticale, compensée à
   l'extérieur : la place de l'ombre sans décaler la mise en page. Seulement
   en hauteur, pour ne pas changer la largeur que Swiper mesure. */
.soform-avis .swiper {
	padding-block: 16px 56px;
}

/* La compensation va sur le PARENT : `.gs-swiper` porte le masque du fondu
   latéral, et un masque rogne tout ce qui sort de la boîte de son élément.
   Posée sur `.swiper`, la marge négative faisait sortir le bas de la bande de
   cette boîte — l'ombre était coupée 56 px plus bas, mais coupée quand même. */
.soform-avis .gs-swiper {
	margin-block: -16px -56px;
}

/* Fondu enchaîné du grain au-dessus du CTA des pages en blocs.
   Le calque de grain du CTA remonte de 330 px (pour couvrir ses nuages) et y
   NAÎT sur 380 px (300 tablette, 220 mobile — soform_grain_layer_fade_css()).
   La section du dessus garde pourtant son propre grain : dans ces 330 px, les
   deux s'additionnaient, puis le sien s'arrêtait net à la frontière — marche
   de 3,5 de luminance mesurée sur /institut/. Son grain MEURT donc exactement
   pendant que celui du CTA naît : la somme reste à un grain partout.
   À la frontière, le CTA est à 330/380 = 87 % : il reste 13 % au-dessus. */
:is(.gspb_row, .soform-zoom, .soform-rail, .pin-spacer):has(+ .gspb_row .soform-nuage--cta)::before {
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 330px), rgba(0, 0, 0, 0.13) 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 330px), rgba(0, 0, 0, 0.13) 100%);
}

@media (max-width: 999.98px) {
	:is(.gspb_row, .soform-zoom, .soform-rail, .pin-spacer):has(+ .gspb_row .soform-nuage--cta)::before {
		-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent calc(100% - 30px));
		mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent calc(100% - 30px));
	}
}

@media (max-width: 689.98px) {
	:is(.gspb_row, .soform-zoom, .soform-rail, .pin-spacer):has(+ .gspb_row .soform-nuage--cta)::before {
		-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent calc(100% - 110px));
		mask-image: linear-gradient(180deg, #000 calc(100% - 330px), transparent calc(100% - 110px));
	}
}


/* ==========================================================================
   Garde-fous responsive (audit du 07/10/2026)
   Rien de décoratif ici : des tailles de cible, des recadrages et des
   débordements, mesurés page par page de 360 à 1440 px.
   ========================================================================== */

/* Une image Greenshift à ratio imposé (aspect-ratio 1/1…) était étirée quand
   le fichier n'avait pas ce ratio : « Notre histoire » comprimait un 3:2 en
   carré. Sans ratio imposé, `cover` ne change rien. */
.gspb_image img {
	object-fit: cover;
}

/* Bouton du menu mobile : 18 × 18 px mesurés. Zone portée à 44 px, sans
   déplacer l'icône (marges négatives). */
.ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	margin: -13px;
	padding: 13px;
	justify-content: center;
}

/* Icônes sociales du pied de page : 24 px sur l'accueil, 16 px ailleurs (la
   règle typographique globale de Blocksy l'emportait). Même taille partout,
   et une zone de 44 px. */
.ct-footer .wp-block-social-links.is-style-logos-only {
	gap: 4px;
	font-size: 24px;
}

.ct-footer .wp-block-social-links .wp-social-link svg {
	width: 24px;
	height: 24px;
}

.ct-footer .wp-block-social-links .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/* Liens des menus du pied de page : resserrés au rythme de la colonne
   Contact (Romain, 07/10/2026 : « la navigation est trop éloignée »). La zone
   tactile s'agrandit sans écarter les lignes : padding sur l'élément en ligne,
   compensé par une marge négative. */
.ct-footer .widget-menu li {
	margin-block: 0 !important;
	padding-block: 0 !important;
	line-height: 1.6;
}

.ct-footer .widget-menu a {
	display: inline-block;
}

.ct-footer .widget-menu li + li {
	margin-top: 2px !important;
}

/* Sur un petit téléphone, un mot long dans un titre de 32 px (« interlocutrice, »)
   était coupé en deux. */
@media (max-width: 400px) {
	h2.gspb_heading {
		font-size: min(28px, 7.6vw) !important;
	}
}

/* --- Détails visuels (audit responsive, 07/10/2026) --------------------- */

/* « Dans le même domaine » : trois cartes sur deux colonnes en tablette
   laissaient une orpheline. Deux suffisent à cette largeur. */
@media (min-width: 690px) and (max-width: 999.98px) {
	.soform-formation__related .soform-grid > :nth-child(3) {
		display: none;
	}
}

/* Dispositifs du financement : la dernière carte VISIBLE, si elle est seule
   sur sa rangée, la prend entière. Le filtre masque des cartes (`hidden`) :
   `:last-child` visait une carte cachée et ne changeait rien. */
@media (min-width: 690px) {
	.soform-finance__liste > :nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])) {
		grid-column: 1 / -1;
	}
}

/* Pied de page en tablette : Blocksy empilait les quatre colonnes (une seule
   colonne, la moitié droite vide). Deux par rangée. */
@media (min-width: 690px) and (max-width: 999.98px) {
	footer.ct-footer [data-row*="middle"] > .ct-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 48px;
	}
}

/* Avis en mobile : le fondu latéral de 24 px mordait sur des cartes qui
   occupent presque tout l'écran. */
@media (max-width: 689.98px) {
	.soform-avis .gs-swiper {
		--soform-avis-fondu: 12px;
	}
}

/* Cibles tactiles : liens en ligne (fil d'Ariane, pied de page, coordonnées
   des fiches, formations concernées des résultats). Zone agrandie par un
   pseudo-élément invisible, PAS par du padding : un padding repoussait la
   bordure basse des liens du contact sous la ligne suivante (3e passe de
   l'audit). L'agrandissement (6 px) reste dans l'interligne : les zones de
   deux lignes voisines ne se recouvrent pas. */
.gspb_text a,
.soform-hero a,
.ct-footer .ct-widget p a,
.ct-footer-copyright a,
.soform-panel a,
.soform-info-card a,
.soform-resultat__pied a,
.soform-resultats__lien a,
.soform-liens-externes a,
.soform-formation__free a,
.soform-footnote a {
	position: relative;
}

.gspb_text a::after,
.soform-hero a::after,
.ct-footer .ct-widget p a::after,
.ct-footer-copyright a::after,
.soform-panel a::after,
.soform-info-card a::after,
.soform-resultat__pied a::after,
.soform-resultats__lien a::after,
.soform-liens-externes a::after,
.soform-formation__free a::after,
.soform-footnote a::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

/* Menus déroulants des formulaires (contact, financement, rémunération) :
   37 px de haut mesurés. */
.soform-demande__form select,
select[data-finance],
select[data-remu] {
	min-height: 44px;
}

#soform-consentement {
	width: 22px;
	height: 22px;
}

/* Fil d'Ariane des gabarits PHP entre 1000 et ~1100 px : l'en-tête Blocksy
   (rangée de 104 px, liens sur toute sa hauteur) recouvre le haut du héros,
   dont le retrait suit la largeur (7,5 vw = 77 px à 1024). Le fil passait
   sous les liens du menu et ne répondait plus au clic. Plancher de 112 px. */
@media (min-width: 1000px) {
	.soform-hero {
		padding-top: max(clamp(80px, 7.5vw, 112px), 112px);
	}
}