/*
Theme Name: Smart RSE
Theme URI: https://smart-rse.com
Author: Smart RSE
Description: Thème sur mesure Smart RSE — organisme de formation certifié Qualiopi. Reprend la charte du site React (teal #0A7A7A / orange #F97316), sans constructeur de page ni dépendance externe.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: smart-rse
*/

/* =========================================================================
   Polices — auto-hébergées (aucun appel à Google Fonts : conformité RGPD)
   ========================================================================= */

@font-face {
	font-family: 'Montserrat';
	src: url('assets/fonts/montserrat-variable.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('assets/fonts/open-sans-variable.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   Tokens
   ========================================================================= */

:root {
	--teal: #0A7A7A;
	--teal-dark: #065E5E;
	--teal-light: #E6F5F5;
	--orange: #F97316;
	--orange-dark: #EA580C;
	--dark: #1E293B;

	--bg: #F8FAFC;
	--surface: #FFFFFF;
	--text: #0F172A;
	--muted: #64748B;
	--border: #E2E8F0;

	--radius: 0.75rem;
	--radius-lg: 1rem;

	--shadow-card: 0 4px 24px -4px rgba(30, 41, 59, 0.08);
	--shadow-elevated: 0 12px 40px -8px rgba(30, 41, 59, 0.15);

	/* Dégradé des bandeaux pleine largeur : départ #073D3D au coin haut gauche,
	   teal de marque atteint à 40 % de la largeur de l'écran, puis aplat uni
	   jusqu'au bord droit.

	   Le repère est donné en vw, et non en pourcentage : un pourcentage de
	   dégradé se compte le long de l'axe, pas en largeur. À 135°, l'axe n'avance
	   que de 0,7071 px par pixel horizontal — d'où 40 × 0,7071 ≈ 28,28vw. */
	--gradient-hero: linear-gradient(135deg, #073D3D 0, #0A7A7A 28.28vw);

	/* Mêmes couleurs, mais étalées sur l'élément : pour les blocs qui ne font
	   pas la largeur de l'écran. Un repère en vw les laisserait dans le noir —
	   une pastille de 56 px n'atteindrait jamais les 28vw et resterait d'un
	   #073D3D uni. */
	--gradient-hero-tile: linear-gradient(135deg, #073D3D 0%, #0A7A7A 100%);
	--gradient-cta: linear-gradient(135deg, #F97316 0%, #EA580C 100%);

	--container: 1280px;
	--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Hauteur de l'en-tête collant, mesurée au navigateur. Tout ce qui se cale
	   sous lui — l'encadré latéral de la fiche formation, les ancres des
	   articles — doit partir de là : la valeur en dur de 6rem (96 px) faisait
	   passer les deux SOUS l'en-tête au défilement. */
	--header-h: 120px;
	--sticky-top: calc(var(--header-h) + 1rem);
}

/* Entre 1024 et 1279 px, .container plafonne à 1024 : le logo, la pastille de
   navigation et les actions ne tiennent plus sur une ligne, l'en-tête gagne
   quinze pixels. Au-delà, .container passe à 1280 et la ligne se recompose. */
@media (min-width: 1024px) { :root { --header-h: 140px; } }
@media (min-width: 1280px) { :root { --header-h: 125px; } }

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	color: var(--dark);
	line-height: 1.2;
	margin: 0 0 .75rem;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 700; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
}
/* --container-w reprend la max-width de la même ligne. Le cartouche des fiches
   formation en a besoin pour caler son illustration sur la colonne des tarifs :
   une largeur de container qui changerait sans la variable décalerait l'image.
   Les deux valeurs d'une même ligne doivent donc toujours rester identiques. */
@media (min-width: 640px)  { .container { max-width: 640px; }  :root { --container-w: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; }  :root { --container-w: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } :root { --container-w: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } :root { --container-w: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } :root { --container-w: 1536px; } }

/* Padding vertical seulement : ne pas écraser le padding horizontal de
   .container quand un élément porte les deux classes (class="container section"). */
.section { padding-top: 4rem; padding-bottom: 4rem; }
.section--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.lead { font-size: 1.15rem; color: var(--muted); }

/* =========================================================================
   Boutons
   ========================================================================= */

.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	padding: .85rem 1.75rem;
	border-radius: var(--radius);
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
	text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }

.btn--cta { background: var(--gradient-cta); color: #fff; }
.btn--cta:hover { color: #fff; opacity: .95; }

.btn--ghost {
	background: transparent;
	color: var(--teal);
	border: 1.5px solid var(--teal);
}
.btn--ghost:hover { background: var(--teal-light); color: var(--teal-dark); }

/* =========================================================================
   En-tête
   ========================================================================= */

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }

.site-header {
	background: rgba(255, 255, 255, .95);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Bandeau supérieur (coordonnées) */

.site-header__topbar { background: var(--dark); color: #fff; }
.site-header__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	padding: .5rem 1.5rem;
	font-size: .85rem;
}
.topbar-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #fff;
}
.topbar-link:hover { color: var(--teal-light); text-decoration: none; }
.topbar-link__text { display: none; }

@media (min-width: 640px) {
	.topbar-link__text { display: inline; }
}

/* Ligne principale */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
	position: relative;
}

.site-header__brand { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; min-width: 0; }

.site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; }
.site-logo span { color: var(--teal); }

/* max-width:none + flex-shrink:0 : le logo garde son ratio et ne se comprime
   jamais quand l'en-tête devient étroit. */
.site-logo__img { height: 48px; width: auto; max-width: none; flex-shrink: 0; display: block; }

.site-header__qualiopi {
	display: none;
	align-items: center;
	padding-left: 1rem;
	border-left: 1px solid var(--border);
}
.site-header__qualiopi img { height: 48px; width: auto; max-width: none; flex-shrink: 0; display: block; }

@media (min-width: 640px) {
	.site-header__qualiopi { display: flex; }
}

/* Navigation centrale (pastille) */

.main-nav {
	display: none;
}

.main-nav ul {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: .35rem;
	background: rgba(10, 122, 122, .05);
	border: 1px solid rgba(10, 122, 122, .15);
	border-radius: 999px;
}

/* position: static → les méga-menus se positionnent sur .site-header__inner
   (pleine largeur, sous l'en-tête) plutôt que sur l'élément de nav. */
.main-nav__item { position: static; }

.main-nav a,
.main-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--teal);
	padding: .5rem 1rem;
	border: 0;
	background: transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.main-nav a:hover,
.main-nav__trigger:hover { background: var(--teal); color: #fff; text-decoration: none; }
.main-nav__trigger .icon { width: 1rem; height: 1rem; transition: transform .2s ease; }

/* Ouverture au survol (et au focus clavier). */
.main-nav__item--dropdown:hover .main-nav__trigger,
.main-nav__item--dropdown:focus-within .main-nav__trigger {
	background: var(--teal);
	color: #fff;
}
.main-nav__item--dropdown:hover .main-nav__trigger .icon,
.main-nav__item--dropdown:focus-within .main-nav__trigger .icon { transform: rotate(180deg); }

@media (min-width: 768px) {
	.main-nav { display: block; }
}

/* Champ de recherche du méga-menu (filtre de catégories). */
.mega-menu__search {
	position: relative;
	max-width: 28rem;
	margin: 0 0 1.5rem;
}
.mega-menu__search .icon {
	position: absolute;
	left: .9rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1rem;
	height: 1.1rem;
	color: var(--teal);
	pointer-events: none;
}
.mega-menu__search input {
	width: 100%;
	padding: .8rem 1rem .8rem 2.75rem;
	border: 2px solid var(--teal);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(10, 122, 122, .12);
	font-family: var(--font-body);
	font-size: .95rem;
	color: var(--dark);
}
.mega-menu__search input::placeholder { color: #94A3B8; }
.mega-menu__search input:focus { outline: none; border-color: var(--teal-dark); box-shadow: 0 0 0 3px rgba(10, 122, 122, .25); }

/* Méga-menus (catégories / secteurs) */

.mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	transform: translateX(-50%);
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-elevated);
	padding: 1.5rem;
	z-index: 60;
	display: none;
}
/* Pont invisible qui comble l'espace en-tête → menu pour garder le survol.
   (Le méga-menu n'a PAS d'overflow, sinon ce pont serait rogné.) */
.mega-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 2.75rem;
}
.main-nav__item--dropdown:hover > .mega-menu,
.main-nav__item--dropdown:focus-within > .mega-menu { display: block; }

/* Conteneur centré partagé : la recherche et la grille ont le même bord gauche. */
.mega-menu__inner {
	max-width: var(--container);
	margin: 0 auto;
}
.mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .25rem 1.5rem;
	max-height: 55vh;
	overflow-y: auto;
}
.mega-menu__grid a {
	display: block;
	padding: .625rem .75rem;
	font-size: .875rem;
	font-weight: 400;
	color: #334155;
	border-radius: .375rem;
	border-bottom: 1px solid rgba(226, 232, 240, .4);
}
.mega-menu__grid a:hover { color: var(--teal); background: rgba(230, 245, 245, .4); text-decoration: none; }
.mega-menu__grid a[hidden] { display: none; }

.mega-menu__empty { text-align: center; color: var(--muted); font-size: .9rem; padding: 1rem 0; }

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

/* Actions à droite : recherche, devis, menu mobile */

.site-header__actions { display: flex; align-items: center; gap: .75rem; }

.header-search { position: relative; }
.header-search summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius);
	color: var(--dark);
	cursor: pointer;
	list-style: none;
}
.header-search summary::-webkit-details-marker { display: none; }
.header-search summary:hover { background: #F1F5F9; }
.header-search .icon { width: 1.25rem; height: 1.25rem; }

.header-search__panel { display: none; border-top: 1px solid var(--border); }
.site-header:has(.header-search[open]) .header-search__panel { display: block; }
.header-search__panel .container { padding: 1.25rem 1.5rem; }
.header-search__panel form { position: relative; max-width: 640px; margin: 0 auto; }
.header-search__panel .icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
}
.header-search__panel input {
	width: 100%;
	padding: .8rem 1rem .8rem 2.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: 1rem;
}
.header-search__panel input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }

.site-header__cta {
	display: none;
	background: var(--orange);
	border-radius: 999px;
	padding: .65rem 1.5rem;
	font-size: .9rem;
}
.site-header__cta:hover { background: var(--orange-dark); transform: scale(1.05); }

@media (min-width: 1024px) {
	.site-header__cta { display: inline-block; }
}

/* Menu mobile (sans JavaScript : bascule via <details>/<summary>) */

.mobile-menu { position: static; }
.mobile-menu__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
	list-style: none;
}
.mobile-menu__toggle::-webkit-details-marker { display: none; }
.mobile-menu__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--dark);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu[open] .mobile-menu__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu[open] .mobile-menu__bar:nth-child(2) { opacity: 0; }
.mobile-menu[open] .mobile-menu__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-elevated);
	padding: 1.25rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	z-index: 60;
}
.mobile-menu__panel > a {
	padding: .7rem .25rem;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--dark);
	border-bottom: 1px solid var(--border);
}
.mobile-menu__panel > a:hover { color: var(--teal); text-decoration: none; }

.mobile-menu__search { position: relative; margin-bottom: .5rem; }
.mobile-menu__search .icon {
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
}
.mobile-menu__search input {
	width: 100%;
	padding: .65rem .75rem .65rem 2.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: .9rem;
}

.mobile-menu__group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .7rem .25rem;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--dark);
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	list-style: none;
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group[open] summary .icon { transform: rotate(180deg); }

.mobile-menu__sublist { display: flex; flex-direction: column; padding: .4rem 0 .6rem .75rem; }
.mobile-menu__sublist a { padding: .5rem .25rem; font-size: .9rem; color: var(--muted); }
.mobile-menu__sublist a:hover { color: var(--teal); text-decoration: none; }

.mobile-menu__cta { text-align: center; margin-top: .75rem; }

@media (min-width: 768px) {
	.mobile-menu { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
	background: var(--gradient-hero);
	color: #fff;
	padding: 5rem 0;
}
.hero h1 { color: #fff; max-width: 22ch; }
.hero p {
	font-size: 1.2rem;
	max-width: 60ch;
	opacity: .92;
	margin-bottom: 2rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero--compact { padding: 3.5rem 0; }
.hero--compact h1 { max-width: none; }
.hero--compact p { margin-bottom: 0; }

/* =========================================================================
   Accueil — Hero
   ========================================================================= */

.hero-home {
	position: relative;
	overflow: hidden;
	background: var(--gradient-hero);
	padding: 2.5rem 0 7rem;
}
/* Masque le liseré teal de sous-pixel au ras du bas de l'onde. */
.hero-home::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--bg);
	z-index: 1;
}

.hero-home__wave {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	line-height: 0;
}
.hero-home__wave svg { width: 100%; height: auto; display: block; }

.hero-home__inner { position: relative; z-index: 2; }

.hero-home__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.hero-home__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: .375rem 1rem;
	color: #fff;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.hero-home__badge-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--orange);
	flex-shrink: 0;
}

.hero-home__title {
	color: #fff;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 1rem;
}
.hero-home__title span { color: var(--orange); }

.hero-home__lead {
	color: rgba(255, 255, 255, .8);
	font-size: 1rem;
	max-width: 32rem;
	line-height: 1.625;
	margin-bottom: 2rem;
}

.hero-home__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 2rem;
}

.hero-home__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.25rem;
	padding: .75rem 1.5rem;
	border-radius: 1rem;
	transition: transform .15s ease, background .15s ease;
}
.hero-home__btn:hover { text-decoration: none; transform: translateY(-1px) scale(1.03); }
.hero-home__btn .icon { width: 1rem; height: 1rem; }

.hero-home__btn--primary {
	background: var(--orange);
	color: #fff;
	box-shadow: var(--shadow-elevated);
}
.hero-home__btn--primary:hover { background: var(--orange-dark); color: #fff; }

.hero-home__btn--ghost {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
}
.hero-home__btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.hero-home__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}
.hero-home__stat { display: flex; align-items: center; gap: .65rem; }
.hero-home__stat-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .7);
	flex-shrink: 0;
}
.hero-home__stat-icon .icon { width: 1rem; height: 1rem; }
.hero-home__stat-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
	line-height: 1.75rem;
}
.hero-home__stat-label { color: rgba(255, 255, 255, .6); font-size: .75rem; line-height: 1rem; }

.hero-home__media { position: relative; display: none; }

.hero-home__image-wrap {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-elevated);
}
.hero-home__image { width: 100%; height: 380px; object-fit: cover; display: block; }

.hero-home__floating-card {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: .75rem 1.25rem;
}
.hero-home__floating-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	background: var(--teal-light);
	color: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hero-home__floating-icon .icon { width: 1.25rem; height: 1.25rem; }
.hero-home__floating-label { color: var(--muted); font-size: .75rem; line-height: 1rem; }
.hero-home__floating-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--dark);
}

@media (min-width: 768px) {
	.hero-home__title { font-size: 2.25rem; }
	.hero-home__lead { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
	.hero-home { padding: 3rem 0 8rem; }
	.hero-home__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
	.hero-home__media { display: block; }
	.hero-home__title { font-size: 3.25rem; }
	.hero-home__stats { gap: 2rem; }
}

/* =========================================================================
   Statistiques
   ========================================================================= */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
}
.stat {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	text-align: center;
}
.stat__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.25rem;
	color: var(--teal);
	line-height: 1;
}
.stat__label { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

/* =========================================================================
   Grilles et cartes
   ========================================================================= */

.grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-elevated);
}

.card__title {
	font-size: 1.1rem;
	margin-bottom: .5rem;
}
.card__title a { color: var(--dark); }
.card__title a:hover { color: var(--teal); text-decoration: none; }

.card__excerpt {
	color: var(--muted);
	font-size: .92rem;
	margin: 0 0 1.25rem;
	flex: 1;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.card--category { text-align: left; }
.card--category .card__count {
	color: var(--teal);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .85rem;
}

/* Puces / badges */

.chip {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	font-family: var(--font-display);
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--teal-light);
	color: var(--teal-dark);
	white-space: nowrap;
}
.chip--orange { background: #FFF1E6; color: var(--orange-dark); }
.chip--muted { background: #F1F5F9; color: var(--muted); }

/* Carte formation — reproduit FormationCard.tsx */

.formation-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.formation-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-elevated);
	text-decoration: none;
}

.formation-card__media {
	position: relative;
	height: 13rem;
	overflow: hidden;
}
.formation-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.formation-card:hover .formation-card__img { transform: scale(1.05); }

.formation-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-hero-tile);
}
.formation-card__placeholder .icon {
	width: 3.5rem;
	height: 3.5rem;
	color: rgba(255, 255, 255, .35);
}

.formation-card__badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.formation-card__badge {
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-size: .7rem;
	font-weight: 700;
	padding: .25rem .75rem;
	border-radius: 999px;
}
.formation-card__duree {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #fff;
	font-size: .85rem;
	font-weight: 500;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.formation-card__duree svg { width: 1rem; height: 1rem; }

.formation-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}
/* Durée + badges dans le corps (cartes sans image). */
.formation-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.formation-card__meta-duree { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 500; color: var(--muted); }
.formation-card__meta-duree .icon { width: 1rem; height: 1rem; color: var(--teal); }
.formation-card__meta-badge { background: var(--orange); color: #fff; font-family: var(--font-display); font-size: .7rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; }
.formation-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--dark);
	margin: 0 0 .75rem;
	transition: color .2s;
}
.formation-card:hover .formation-card__title { color: var(--teal); }

.formation-card__excerpt {
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
	flex: 1;
}

.formation-card__formats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.25rem;
}
.formation-card__format {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 500;
	padding: .25rem .75rem;
	border-radius: 999px;
	border: 1px solid rgba(10, 122, 122, .3);
	color: var(--teal);
}
.formation-card__dot {
	width: .375rem;
	height: .375rem;
	border-radius: 999px;
	background: var(--teal);
}

.formation-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #F1F5F9;
}
.formation-card__price {
	font-weight: 600;
	font-size: .875rem;
	color: var(--dark);
}
.formation-card__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--teal);
	font-weight: 600;
	font-size: .875rem;
	transition: gap .2s;
}
.formation-card:hover .formation-card__more { gap: .6rem; }
.formation-card__more svg { width: 1rem; height: 1rem; }

/* =========================================================================
   Fiche formation — reproduit FormationDetail.tsx
   ========================================================================= */

/* Hero */
.formation-hero {
	background: var(--gradient-hero);
	color: #fff;
	/* Cartouche volontairement compact : il occupait 459 px sur les 810 px de
	   page visible, et repoussait le premier tarif et le bouton de devis sous
	   la ligne de flottaison. Mesuré avant/après, voir HISTORIQUE.md (24/08/2026). */
	padding: 1.6rem 0 1.5rem;
	position: relative;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.formation-hero { padding: 2rem 0 1.75rem; }
	/* Les fiches illustrées respirent davantage : à 2 rem / 1,75 rem, la bande
	   d'image tombait à 4,9:1 sur un écran de 2560 px et le visuel devenait
	   illisible. Vingt pour cent de hauteur en plus, soit vingt-quatre pixels
	   de chaque côté. Les fiches sans illustration — six sur sept — gardent le
	   cartouche court. */
	.formation-hero--has-media { padding: 3.5rem 0 3.25rem; }
}

/* Hero : contenu à gauche ; illustration pleine hauteur collée à droite (desktop). */
.formation-hero__content { min-width: 0; }
/* Porteur du tracé de découpe : hors flux, sans dimension, jamais visible. */
.formation-hero__clip { position: absolute; width: 0; height: 0; overflow: hidden; }
.formation-hero__media { display: none; }
.formation-hero__figure { margin: 0; overflow: hidden; background: var(--teal-light); }
.formation-hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.formation-hero__figure--placeholder { display: flex; align-items: center; justify-content: center; }

/* Mobile : illustration hors du hero, affichée sous le cartouche des tarifs. */
.formation-media-mobile { margin-bottom: 1.5rem; }
.formation-media-mobile .formation-hero__figure { border-radius: 1rem; aspect-ratio: 16 / 10; box-shadow: var(--shadow-card); }
.formation-media-mobile .formation-hero__figure--placeholder .icon { width: 3.25rem; height: 3.25rem; color: var(--teal); }

@media (min-width: 1024px) {
	/* L'illustration se cale sur un repère vertical : cent pixels à gauche de
	   l'aplomb de l'encadré des tarifs, qui commence plus bas dans la page. Elle
	   file ensuite jusqu'au bord droit de l'écran, quelle que soit sa largeur.
	   Sans ce repère, elle restait une bande de 480 px collée à droite, séparée
	   du texte par un aplat teal vide de six cents pixels sur un écran de 2560.

	   Le calcul reproduit la géométrie du corps de fiche : marge extérieure du
	   container, son rembourrage, la colonne principale (deux parts sur trois,
	   gouttière déduite), la gouttière, moins les cent pixels du repère. Le
	   « 100 % » est celui du cartouche, large comme le document — et non 100vw,
	   qui compterait la barre de défilement en trop et décalerait l'image.

	   La colonne de texte s'arrête vingt-quatre pixels avant l'image : sans quoi
	   un titre long passerait dessous. */
	.formation-hero--has-media .formation-hero__content {
		width: calc((var(--container-w) - 6rem) * 2 / 3 + 3rem - 100px - 1.5rem);
	}
	.formation-hero__media {
		display: block;
		position: absolute; top: 0; right: 0; bottom: 0;
		/* Le bord gauche suit une courbe en S au lieu de s'arrêter net. Le tracé
		   est dans single-formation.php, posé seulement sur les fiches
		   illustrées. Sous 1024 px l'illustration du bandeau n'est pas affichée,
		   d'où la règle placée ici. */
		clip-path: url(#srse-hero-wave);
		left: calc(
			(100% - var(--container-w)) / 2
			+ 1.5rem
			+ (var(--container-w) - 6rem) * 2 / 3
			+ 3rem
			- 100px
		);
	}
	.formation-hero__media .formation-hero__figure { height: 100%; }
	.formation-media-mobile { display: none; }
}
.formation-hero__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .7);
	margin-bottom: .6rem;
}
.formation-hero__crumb a { color: rgba(255, 255, 255, .7); }
.formation-hero__crumb a:hover { color: #fff; text-decoration: none; }
.formation-hero__crumb .icon { width: 1rem; height: 1rem; opacity: .6; }
.formation-hero__title {
	color: #fff;
	font-size: clamp(1.5rem, 2.3vw, 2.1rem);
	font-weight: 800;
	line-height: 1.22;
	/* 20ch cassait les titres longs en quatre lignes de 48 px, six sur mobile. */
	max-width: 36ch;
	margin: 0;
}
.formation-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .9rem;
}
.formation-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .15);
	padding: .5rem 1rem;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 500;
}
.formation-hero__pill .icon { width: 1rem; height: 1rem; }
.formation-hero__pill--badge {
	background: var(--orange);
	font-family: var(--font-display);
	font-weight: 700;
}
.formation-hero__pill--soft {
	background: rgba(255, 255, 255, .1);
	font-size: .8rem;
	padding: .35rem .85rem;
}

/* Resserrage mobile. Ce bloc doit rester APRÈS les règles de pastille qu'il
   corrige : une media query n'ajoute pas de spécificité, seul l'ordre du
   fichier départage. Placé plus haut, il était intégralement écrasé par
   .formation-hero__pill, et les pastilles retombaient sur trois rangs. */
@media (max-width: 640px) {
	.formation-hero__crumb { margin-bottom: .5rem; }
	.formation-hero__meta { gap: .4rem; }
	.formation-hero__pill { font-size: .78rem; padding: .3rem .7rem; }
	.formation-hero__pill--soft { font-size: .72rem; padding: .25rem .6rem; }
}

/* Grille contenu / colonne latérale : 2/3 – 1/3 (comme lg:grid-cols-3). */
.formation-detail {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 3rem;
}
@media (max-width: 1024px) {
	.formation-detail { grid-template-columns: 1fr; }
	/* Sur mobile/tablette, la carte passe au-dessus du contenu (order-first). */
	.formation-detail__aside { order: -1; }
}

/* La fiche n'a plus besoin des 4 rem du haut : le cartouche joue déjà ce rôle. */
.single-formation .container.section { padding-top: 2.25rem; }

.formation-detail__main > .formation-section:first-child { margin-top: 0; }

.formation-section { margin-top: 2.75rem; }
.formation-section:first-child { margin-top: 0; }
.formation-section__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1.1rem;
}
.formation-section__titletext {
	display: flex;
	align-items: center;
	gap: .6rem;
}
.formation-section__titletext .icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--teal);
	flex-shrink: 0;
}
/* Chevron d'accordéon : masqué au-dessus de 1024px. */
.formation-section__title > .icon--chevron {
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--teal);
	flex-shrink: 0;
	transition: transform .3s ease;
}
.formation-section .lead { color: var(--muted); }

/* Accordéons mobile / tablette (≤ 1024px) — contenu toujours dans le DOM. */
@media (max-width: 1024px) {
	.formation-section.is-accordion { margin-top: 0; }
	.formation-section.is-accordion + .formation-section.is-accordion { margin-top: 0; }
	.formation-section.is-accordion .formation-section__title {
		cursor: pointer;
		margin-bottom: 0;
		padding: 1.15rem 0;
		border-bottom: 1px solid var(--border);
		outline: none;
	}
	.formation-section.is-accordion .formation-section__title:focus-visible {
		color: var(--teal);
	}
	.formation-section.is-accordion .formation-section__title > .icon--chevron {
		display: inline-flex;
	}
	.formation-section.is-accordion.is-open .formation-section__title > .icon--chevron {
		transform: rotate(180deg);
	}
	.formation-section.is-accordion .formation-section__content {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		transition: grid-template-rows .3s ease, opacity .3s ease;
	}
	.formation-section.is-accordion.is-open .formation-section__content {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.formation-section.is-accordion .formation-section__inner {
		min-height: 0;
		overflow: hidden;
		padding-top: 1.15rem;
	}
}

.formation-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.formation-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: .7rem;
}
.formation-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55rem;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--teal);
}

.formation-list--numbered { counter-reset: item; }
.formation-list--numbered li { padding-left: 2.5rem; }
.formation-list--numbered li::before {
	counter-increment: item;
	content: counter(item);
	top: .1rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius);
	background: var(--teal-light);
	color: var(--teal-dark);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Programme — cartes de modules (reproduit ProgramRenderer.tsx) */

.programme { display: flex; flex-direction: column; gap: 1.5rem; }
.programme__intro { display: flex; flex-direction: column; gap: .5rem; }
.programme__intro p { color: var(--muted); margin: 0; }

.programme-module {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow .3s ease;
}
.programme-module:hover { box-shadow: var(--shadow-elevated); }
.programme-module__accent {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: .375rem;
	background: linear-gradient(to bottom, var(--teal), var(--orange));
}
.programme-module__inner { padding: 1.5rem 1.5rem 1.5rem 2rem; }
.programme-module__header { margin-bottom: 1rem; }
.programme-module__heading {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .75rem;
}
.programme-module__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: 999px;
	background: rgba(10, 122, 122, .1);
	color: var(--teal);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .875rem;
}
.programme-module__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--teal);
	line-height: 1.25;
	margin: 0;
}
.programme-module__subtitle {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--dark);
	margin: .5rem 0 0;
}

.programme-list,
.programme-simple {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.programme-list li,
.programme-simple li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	color: var(--muted);
	line-height: 1.6;
}
.programme-list .icon,
.programme-simple .icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: .15rem;
}
.programme-list .icon { color: var(--orange); }
.programme-simple .icon { color: var(--teal); }

/* Encadré latéral (carte collante) */

.formation-sidebar {
	position: sticky;
	top: var(--sticky-top);
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.35rem;
}
@media (max-width: 1024px) {
	.formation-sidebar { position: static; }
}
/* Bureau : le bouton de devis remonte sous les tarifs, au lieu d'attendre après
   la durée, les formats et le délai d'accès — il tombait à 1 044 px. Sous
   1024 px, la barre collante de bas d'écran porte déjà l'appel à l'action :
   l'ordre du gabarit reste inchangé. */
@media (min-width: 1024px) {
	.formation-sidebar > * { order: 3; }
	.formation-sidebar > .formation-sidebar__row:first-child { order: 1; }
	.formation-sidebar > .formation-sidebar__cta,
	.formation-sidebar > .formation-sidebar__reassure { order: 2; }
	.formation-sidebar > .formation-sidebar__custom { order: 4; }
}
.formation-sidebar__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.formation-sidebar__label {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--teal);
	padding-top: .15rem;
}
.formation-sidebar__value {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	color: var(--dark);
	text-align: right;
}
.formation-sidebar__value .icon { width: 1rem; height: 1rem; color: var(--teal); }
.formation-sidebar__value--links {
	display: block;
	line-height: 1.5;
}
.formation-sidebar__value--links a { color: var(--teal); }
.formation-sidebar__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--dark);
	text-align: right;
}

/* Deux tarifs (inter / intra) avec info-bulle — reproduit FormationDetail.tsx */
.formation-prices {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	text-align: right;
}
.formation-price + .formation-price {
	padding-top: .75rem;
	border-top: 1px solid #F1F5F9;
}
.formation-price__value {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--dark);
}
.formation-price__sub {
	display: block;
	font-size: .72rem;
	color: var(--muted);
	margin-top: .1rem;
}
.price-info {
	position: relative;
	display: inline-flex;
	justify-content: flex-end;
	margin-bottom: .15rem;
}
.price-info__label {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: help;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--orange);
}
.price-info__label .icon { width: .85rem; height: .85rem; }
.price-info__tip {
	position: absolute;
	right: 0;
	top: calc(100% + .5rem);
	z-index: 20;
	width: 16rem;
	max-width: 74vw;
	background: var(--teal);
	color: #fff;
	text-align: left;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	padding: .9rem 1rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevated);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.25rem);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.price-info__tip strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	margin-bottom: .3rem;
}
.price-info:hover .price-info__tip,
.price-info__label:focus + .price-info__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Sur mobile/tablette, l'info-bulle CSS est remplacée par une modale (JS). */
@media (max-width: 1024px) {
	.price-info__tip { display: none; }
	.price-info__label { cursor: pointer; }
}

/* Modale d'info tarif (mobile/tablette) — reproduit InfoModal.tsx */
.price-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, .5);
}
.price-modal[hidden] { display: none; }
.price-modal__box {
	position: relative;
	width: 100%;
	max-width: 28rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: 1.5rem;
}
.price-modal__close {
	position: absolute;
	right: .75rem;
	top: .5rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
}
.price-modal__close:hover { color: var(--dark); }
.price-modal__title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--dark);
	margin: 0 1.5rem .6rem 0;
}
.price-modal__text {
	color: var(--muted);
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
}
body.price-modal-open { overflow: hidden; }
.formation-sidebar__formats {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem;
}
.formation-sidebar__format {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 500;
	padding: .3rem .75rem;
	border-radius: 999px;
	border: 1px solid rgba(10, 122, 122, .3);
	color: var(--teal);
}
.formation-sidebar__dot {
	width: .375rem;
	height: .375rem;
	border-radius: 999px;
	background: var(--teal);
}
.formation-sidebar__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	padding: .95rem 1.5rem;
	border-radius: 999px;
	transition: background-color .2s, transform .2s;
}
.formation-sidebar__cta:hover {
	background: var(--orange-dark);
	color: #fff;
	text-decoration: none;
	transform: scale(1.02);
}
.formation-sidebar__cta .icon { width: 1.15rem; height: 1.15rem; }
.formation-sidebar__reassure {
	text-align: center;
	font-size: .78rem;
	color: var(--muted);
	margin: 0;
}
.formation-sidebar__custom {
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.formation-sidebar__custom p {
	font-size: .875rem;
	color: var(--muted);
	margin: .5rem 0 .5rem;
}
.formation-sidebar__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--orange);
}
.formation-sidebar__link:hover { color: var(--orange-dark); text-decoration: none; }
.formation-sidebar__link .icon { width: 1rem; height: 1rem; }
.formation-sidebar__handicap {
	font-size: .78rem;
	color: var(--muted);
	text-align: center;
	margin: 0;
}

.formation-related { border-top: 1px solid var(--border); }

/* CTA bas de fiche */
.formation-cta {
	background: var(--gradient-cta);
	color: #fff;
	text-align: center;
	padding: 4.5rem 0;
	margin-top: 1rem;
}
.formation-cta h2 { color: #fff; }
.formation-cta p {
	opacity: .92;
	max-width: 52ch;
	margin: 0 auto 1.75rem;
}
.formation-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	color: var(--orange);
	font-family: var(--font-display);
	font-weight: 700;
	padding: .95rem 2rem;
	border-radius: 999px;
	transition: transform .2s;
}
.formation-cta__btn:hover { color: var(--orange); text-decoration: none; transform: scale(1.04); }
.formation-cta__btn .icon { width: 1.15rem; height: 1.15rem; }

/* =========================================================================
   Filtres du catalogue (PHP, pas de JS : chaque filtre = une URL crawlable)
   ========================================================================= */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 2.5rem;
}
.filters a {
	font-family: var(--font-display);
	font-size: .85rem;
	font-weight: 600;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--muted);
}
.filters a:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.filters a.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

.search-form { display: flex; gap: .6rem; margin-bottom: 2rem; }
.search-form input[type=search] {
	flex: 1;
	padding: .8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
	background: var(--surface);
}
.search-form input[type=search]:focus {
	outline: 2px solid var(--teal);
	border-color: var(--teal);
}

/* =========================================================================
   Barre d'outils du catalogue : recherche à suggestions + filtre déroulant
   ========================================================================= */

.catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	margin-bottom: 2.5rem;
}
.catalog-search { flex: 1 1 320px; min-width: 240px; margin: 0; }
.catalog-search__box {
	position: relative;
	display: flex;
	gap: .6rem;
}
.catalog-search__field {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}
.catalog-search__field > .icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.15rem;
	height: 1.15rem;
	color: #94A3B8;
	pointer-events: none;
}
.catalog-search__input {
	width: 100%;
	padding: .8rem 2.5rem .8rem 2.9rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--dark);
}
.catalog-search__input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.catalog-search__submit {
	flex-shrink: 0;
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--teal);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .2s;
}
.catalog-search__submit:hover { background: var(--teal-dark); }
/* Le panneau de suggestions (rempli par search-suggest.js) se superpose. */
.catalog-search__box .home-search__results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: .4rem;
	z-index: 40;
}

/* Filtre catégorie en menu déroulant natif (<details>) — liens crawlables. */
.filter-dropdown { position: relative; flex: 0 0 auto; }
.filter-dropdown__summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	height: 100%;
	padding: .8rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--dark);
	white-space: nowrap;
}
.filter-dropdown__summary::-webkit-details-marker { display: none; }
.filter-dropdown__summary .icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--muted);
	transition: transform .2s ease;
}
.filter-dropdown[open] .filter-dropdown__summary .icon { transform: rotate(180deg); }
.filter-dropdown__label { color: var(--muted); font-weight: 600; }
.filter-dropdown__menu {
	position: absolute;
	right: 0;
	top: calc(100% + .4rem);
	z-index: 50;
	min-width: 16rem;
	max-height: 60vh;
	overflow: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevated);
	padding: .4rem;
}
.filter-dropdown__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .75rem;
	border-radius: .5rem;
	color: var(--dark);
	font-size: .9rem;
	font-weight: 500;
}
.filter-dropdown__menu a:hover { background: var(--bg); color: var(--teal); text-decoration: none; }
.filter-dropdown__menu a.is-active { background: var(--teal-light); color: var(--teal-dark); font-weight: 700; }
.filter-dropdown__count { color: var(--muted); font-size: .8rem; }
.filter-dropdown__menu a.is-active .filter-dropdown__count { color: var(--teal-dark); }

.catalog-count { margin: 0 0 1.5rem; color: var(--muted); font-size: .9rem; }
.catalog-empty { padding: 3rem 0; text-align: center; color: var(--muted); }

@media (max-width: 560px) {
	.catalog-search, .filter-dropdown { flex-basis: 100%; }
	.filter-dropdown__summary { width: 100%; justify-content: space-between; }
	.filter-dropdown__menu { left: 0; right: auto; min-width: 100%; }
}

/* =========================================================================
   Barre de recherche (accueil)
   Reproduit reference-react/src/components/SearchBar.tsx
   ========================================================================= */

.home-search {
	position: relative;
	z-index: 3;
	margin-top: -0.25rem;
	padding-bottom: 1rem;
}
.home-search__inner {
	max-width: 820px;
	margin: 0 auto;
}
.home-search__box {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: .6rem;
}
.home-search__field {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}
.home-search__field .icon {
	position: absolute;
	left: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.35rem;
	height: 1.35rem;
	color: #94A3B8;
	pointer-events: none;
}
.home-search__input {
	width: 100%;
	padding: 1.05rem 1rem 1.05rem 3.35rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--dark);
}
.home-search__input::placeholder { color: #94A3B8; }
.home-search__input:focus { outline: none; }
.home-search__submit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	padding: 1.05rem 1.9rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.02rem;
	cursor: pointer;
	transition: background-color .2s;
}
.home-search__submit .icon { width: 1rem; height: 1rem; }
.home-search__submit:hover { background: var(--orange-dark); }
.home-search__clear {
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #94A3B8;
	cursor: pointer;
	border-radius: 999px;
	transition: color .2s, background-color .2s;
}
.home-search__clear svg { width: 1rem; height: 1rem; }
.home-search__clear:hover { color: var(--muted); background: var(--bg); }
.home-search__input { padding-right: 2.75rem; }

/* Dropdown de suggestions */
.home-search__results {
	margin-top: .5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevated);
	overflow: hidden;
}
.home-search__msg {
	padding: 1rem;
	text-align: center;
	font-size: .875rem;
	color: #94A3B8;
}
.home-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-search__result {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem 1rem;
	color: inherit;
	transition: background-color .2s;
}
.home-search__result:hover {
	background: var(--bg);
	text-decoration: none;
}
.home-search__result-body { flex: 1; min-width: 0; }
.home-search__result-title {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .2s;
}
.home-search__result:hover .home-search__result-title { color: var(--teal); }
.home-search__result-meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .15rem;
	font-size: .75rem;
	color: #94A3B8;
}
.home-search__dot { color: #CBD5E1; }
.home-search__arrow {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: #CBD5E1;
	transition: color .2s;
}
.home-search__result:hover .home-search__arrow { color: var(--teal); }

.home-search__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin-top: 1.25rem;
}
.home-search__tag {
	padding: .5rem 1rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted);
	font-size: .875rem;
	font-weight: 500;
	transition: color .2s, border-color .2s;
}
.home-search__tag:hover {
	color: var(--teal);
	border-color: var(--teal);
	text-decoration: none;
}
@media (max-width: 560px) {
	.home-search__box { flex-wrap: wrap; }
	.home-search__field { flex-basis: 100%; }
	.home-search__submit { flex: 1; justify-content: center; }
}

/* =========================================================================
   Sections de la page d'accueil (reproduites de Index.tsx)
   ========================================================================= */

.section--white { background: var(--surface); padding-top: 5rem; padding-bottom: 5rem; }

/* En-tête de section centré + trait orange.
   Le titre occupe toute la largeur (pas de max-width) pour tenir sur une seule
   ligne quand l'écran le permet ; seul le paragraphe est contraint en largeur. */
.section-head { text-align: center; margin: 0 auto 3.5rem; }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.section-head p { color: var(--muted); font-size: 1.125rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.section-head__rule {
	display: block;
	width: 4rem;
	height: .25rem;
	margin: 1.5rem auto 0;
	border-radius: 999px;
	background: var(--orange);
}

.section-cta { text-align: center; margin-top: 3rem; }
.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 2px solid var(--teal);
	color: var(--teal);
	font-family: var(--font-display);
	font-weight: 600;
	padding: .85rem 2rem;
	border-radius: 999px;
	transition: background-color .2s, color .2s, transform .2s;
}
.btn-outline:hover { background: var(--teal); color: #fff; text-decoration: none; transform: scale(1.03); }
.btn-outline .icon { width: 1.15rem; height: 1.15rem; }

/* Chiffres */
.stats-band { background: var(--teal-light); padding: 5rem 0; }
.statcards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
@media (min-width: 1024px) { .statcards { grid-template-columns: repeat(4, 1fr); } }
.statcard {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2rem;
	text-align: center;
	transition: transform .3s ease;
}
.statcard:hover { transform: translateY(-4px); }
.statcard__icon {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	border-radius: var(--radius-lg);
	background: #F1F5F9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.statcard__icon .icon { width: 1.75rem; height: 1.75rem; color: var(--teal); }
.statcard__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3rem);
	color: var(--dark);
	line-height: 1.1;
	margin-bottom: .35rem;
}
.statcard__label { color: var(--muted); font-size: .9rem; }

/* Domaines d'expertise — tuiles */
.exp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 768px) { .exp-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.exp-tile {
	display: block;
	text-align: center;
	background: var(--bg);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.exp-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); text-decoration: none; }
.exp-tile__icon {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s ease;
}
.exp-tile:hover .exp-tile__icon { transform: scale(1.1); }
.exp-tile__icon .icon { width: 1.75rem; height: 1.75rem; }
.exp-tile__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .95rem;
	color: var(--dark);
	line-height: 1.25;
	transition: color .2s;
}
.exp-tile:hover .exp-tile__name { color: var(--teal); }
/* Palette des tuiles */
.exp-tile--1 .exp-tile__icon { background: #ECFDF5; } .exp-tile--1 .exp-tile__icon .icon { color: #059669; }
.exp-tile--2 .exp-tile__icon { background: #EFF6FF; } .exp-tile--2 .exp-tile__icon .icon { color: #0284C7; }
.exp-tile--3 .exp-tile__icon { background: #EEF2FF; } .exp-tile--3 .exp-tile__icon .icon { color: #4F46E5; }
.exp-tile--4 .exp-tile__icon { background: #FFFBEB; } .exp-tile--4 .exp-tile__icon .icon { color: #D97706; }
.exp-tile--5 .exp-tile__icon { background: #FFF1F2; } .exp-tile--5 .exp-tile__icon .icon { color: #E11D48; }
.exp-tile--6 .exp-tile__icon { background: #FDF2F8; } .exp-tile--6 .exp-tile__icon .icon { color: #DB2777; }
.exp-tile--7 .exp-tile__icon { background: #ECFEFF; } .exp-tile--7 .exp-tile__icon .icon { color: #0891B2; }
.exp-tile--8 .exp-tile__icon { background: #F5F3FF; } .exp-tile--8 .exp-tile__icon .icon { color: #7C3AED; }

/* Diagnostic RSE */
.diagnostic { background: var(--gradient-hero); color: #fff; padding: 5rem 0; }
.diagnostic__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) { .diagnostic__grid { grid-template-columns: 1fr 1fr; } }
.diagnostic__tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-weight: 600;
	font-size: .875rem;
	padding: .4rem 1rem;
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.diagnostic__tag .icon { width: 1rem; height: 1rem; }
.diagnostic h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }
.diagnostic h2 span { color: var(--orange); }
.diagnostic__content > p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin: 0 0 2rem; max-width: 34rem; }
.diagnostic__list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.diagnostic__list li { display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.diagnostic__list .icon { width: 1.25rem; height: 1.25rem; color: var(--orange); flex-shrink: 0; }
.diagnostic__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.diagnostic__btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: #fff;
	color: var(--teal);
	font-family: var(--font-display);
	font-weight: 700;
	padding: .95rem 1.75rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevated);
	transition: transform .2s;
}
.diagnostic__btn:hover { color: var(--teal); text-decoration: none; transform: scale(1.04); }
.diagnostic__btn .icon { width: 1.15rem; height: 1.15rem; }
.diagnostic__time { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.7); font-size: .9rem; }
.diagnostic__time .icon { width: 1rem; height: 1rem; }
.diagnostic__media { position: relative; }
.diagnostic__frame { background: #fff; padding: 1rem; border-radius: 1.5rem; box-shadow: var(--shadow-elevated); }
.diagnostic__frame img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.diagnostic__floating {
	position: absolute;
	right: 1.5rem;
	bottom: -1.25rem;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: .75rem;
}
.diagnostic__floating-icon {
	width: 2.5rem; height: 2.5rem;
	border-radius: 999px;
	background: var(--teal-light);
	display: flex; align-items: center; justify-content: center;
}
.diagnostic__floating-icon .icon { width: 1.25rem; height: 1.25rem; color: var(--orange); }
.diagnostic__floating-value { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--dark); line-height: 1; }
.diagnostic__floating-label { color: var(--muted); font-size: .8rem; }

/* Logos clients — marquee */
.clients { padding: 5rem 0; background: var(--bg); overflow: hidden; }
.clients__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
	display: flex;
	align-items: center;
	gap: 5rem;
	width: max-content;
	animation: clients-marquee 30s linear infinite;
}
.clients__item { flex-shrink: 0; height: 5rem; display: flex; align-items: center; }
.clients__item img { max-height: 4rem; width: auto; object-fit: contain; mix-blend-mode: multiply; }
@keyframes clients-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

/* CTA sur mesure */
.cta-mesure { background: var(--gradient-hero); color: #fff; padding: 5rem 0; }
.cta-mesure__inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.cta-mesure__inner h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.25rem; }
.cta-mesure__inner > p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin: 0 auto 3rem; max-width: 34rem; }
.cta-mesure__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) { .cta-mesure__steps { flex-direction: row; justify-content: center; align-items: flex-start; gap: 2rem; } }
.cta-mesure__step { display: flex; align-items: center; gap: 1rem; text-align: left; }
.cta-mesure__step > span:last-child { color: rgba(255,255,255,.9); font-weight: 500; }
.cta-mesure__num {
	width: 3rem; height: 3rem;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--orange);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff;
}
.cta-mesure__btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	padding: 1rem 2.5rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevated);
	transition: background-color .2s, transform .2s;
}
.cta-mesure__btn:hover { background: var(--orange-dark); color: #fff; text-decoration: none; transform: scale(1.04); }
.cta-mesure__btn .icon { width: 1.15rem; height: 1.15rem; }
.cta-mesure__note { color: rgba(255,255,255,.5); font-size: .875rem; margin: 1rem 0 0; }

/* Bannière formateur */
.banner-formateur {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	color: inherit;
	transition: box-shadow .3s ease;
}
.banner-formateur:hover { box-shadow: var(--shadow-elevated); text-decoration: none; }
@media (min-width: 768px) { .banner-formateur { flex-direction: row; } }
.banner-formateur__media { overflow: hidden; }
.banner-formateur__media img { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; display: block; transition: transform .5s ease; }
.banner-formateur:hover .banner-formateur__media img { transform: scale(1.05); }
@media (min-width: 768px) { .banner-formateur__media { flex: 0 0 40%; } }
.banner-formateur__content {
	flex: 1;
	background: linear-gradient(180deg, #1E293B 0%, #334155 100%);
	color: #fff;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.banner-formateur__content h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1rem; }
.banner-formateur__content p { color: rgba(255,255,255,.8); margin: 0 0 1.5rem; max-width: 34rem; }
.banner-formateur__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	padding: .8rem 1.5rem;
	border-radius: 999px;
	transition: gap .2s, background-color .2s;
}
.banner-formateur:hover .banner-formateur__btn { gap: .8rem; background: var(--orange-dark); }
.banner-formateur__btn .icon { width: 1.15rem; height: 1.15rem; }

/* Certifications */
.certs { padding: 5rem 0; background: var(--bg); }
.certs__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}
.certs__item { display: flex; align-items: center; justify-content: center; height: 8rem; padding: 1rem; }
.certs__item img { max-height: 6rem; width: auto; object-fit: contain; }

/* =========================================================================
   Page Contact — reproduit Contact.tsx
   ========================================================================= */

.contact-hero {
	background: var(--gradient-hero);
	color: #fff;
	padding: 2.5rem 0 3rem;
}

/* Le formulaire vit dans la bannière : c'est l'action principale de la page,
   elle doit être visible sans défiler. L'ancienne mise en page empilait un
   grand hero, un bandeau de coordonnées puis un panneau d'informations avant
   d'y arriver — et répétait trois fois le téléphone et l'e-mail. */
.contact-hero__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
@media (min-width: 1024px) {
	.contact-hero { padding: 3rem 0 4rem; }
	.contact-hero__grid {
		display: grid;
		grid-template-columns: 5fr 6fr;
		grid-template-areas:
			"intro form"
			"coords form";
		align-items: start;
		column-gap: 3rem;
		row-gap: 2rem;
	}
	.contact-hero__intro { grid-area: intro; }
	/* Alignée en bas, la colonne de coordonnées suit le pied de la carte du
	   formulaire au lieu de laisser un vide au milieu du dégradé. */
	.contact-hero__coords { grid-area: coords; align-self: end; }
	.contact-hero .contact-form-wrap { grid-area: form; }
}

.contact-hero__badge {
	align-self: flex-start;
	display: inline-block;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-weight: 600;
	font-size: .875rem;
	padding: .35rem 1rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.contact-hero h1 {
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	margin-bottom: .75rem;
}
.contact-hero h1 span { color: var(--orange); }
.contact-hero__lead {
	color: rgba(255, 255, 255, .85);
	font-size: 1.05rem;
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

.contact-hero__proof {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	font-weight: 600;
}
.contact-hero__proof li { display: flex; align-items: center; gap: .55rem; }
.contact-hero__proof .icon { width: 1.05rem; height: 1.05rem; color: var(--orange); flex-shrink: 0; }

/* Sur mobile les coordonnées passent sous le formulaire (ordre 3 dans la
   colonne flex) : elles sont utiles, mais jamais au prix de repousser les
   champs sous la ligne de flottaison. */
.contact-hero__coords {
	order: 3;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
@media (min-width: 640px) { .contact-hero__coords { grid-template-columns: 1fr 1fr; } }
.contact-hero__row { display: flex; align-items: flex-start; gap: .75rem; }
.contact-hero__row .icon { width: 1.15rem; height: 1.15rem; color: var(--orange); flex-shrink: 0; margin-top: .15rem; }
.contact-hero__k {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .65);
	margin: 0 0 .15rem;
}
.contact-hero__v { font-weight: 600; color: #fff; margin: 0; line-height: 1.45; }
a.contact-hero__v:hover { color: var(--orange); text-decoration: none; }
.contact-hero__muted { color: rgba(255, 255, 255, .7); font-weight: 400; }

.contact-form-wrap {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: 1.5rem;
}
@media (min-width: 640px)  { .contact-form-wrap { padding: 2rem; } }
.contact-form-wrap > h2 { margin-bottom: .25rem; font-size: 1.35rem; }
.contact-form-wrap__hint { color: var(--muted); font-size: .875rem; margin: 0 0 1.25rem; }
.contact-form-wrap__hint span, .contact-form label span { color: var(--orange); }

.contact-alert {
	display: flex; align-items: center; gap: .6rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	font-size: .9rem;
	margin-bottom: 1.5rem;
}
.contact-alert .icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.contact-alert--ok { background: var(--teal-light); color: var(--teal-dark); }
.contact-alert--err { background: #FEF2F2; color: #B91C1C; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form label {
	display: block;
	font-size: .875rem;
	font-weight: 500;
	color: var(--dark);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	margin-top: .4rem;
	padding: .8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--dark);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(10, 122, 122, .15);
	background: #fff;
}
.contact-form__rgpd { font-size: .75rem; color: var(--muted); margin: 0; line-height: 1.5; }
.contact-form__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	padding: .95rem 2rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.contact-form__submit:hover { background: var(--orange-dark); transform: scale(1.02); }
.contact-form__submit .icon { width: 1.15rem; height: 1.15rem; }

.contact-centres { background: var(--bg); }
.contact-centres__tag {
	display: inline-block;
	background: rgba(10, 122, 122, .1);
	color: var(--teal);
	font-weight: 600;
	font-size: .875rem;
	padding: .35rem 1rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.contact-centres__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .contact-centres__grid { grid-template-columns: repeat(3, 1fr); } }
.contact-centre {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	transition: transform .3s ease, box-shadow .3s ease;
}
.contact-centre:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.contact-centre__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.contact-centre__icon {
	width: 3rem; height: 3rem;
	border-radius: var(--radius);
	background: rgba(10, 122, 122, .1);
	display: flex; align-items: center; justify-content: center;
}
.contact-centre__icon .icon { width: 1.5rem; height: 1.5rem; color: var(--teal); }
.contact-centre__hq {
	font-size: .72rem; font-weight: 700;
	color: var(--orange);
	background: rgba(249, 115, 22, .1);
	padding: .25rem .75rem;
	border-radius: 999px;
}
.contact-centre h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.contact-centre__addr { font-weight: 500; color: var(--dark); font-size: .9rem; margin: 0 0 .75rem; line-height: 1.5; }
.contact-centre__rooms { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.6; }

/* =========================================================================
   Pages légales
   ========================================================================= */

.legal { max-width: 820px; }
.legal__updated { color: var(--muted); font-size: .875rem; margin: 0 0 2rem; }
.legal h2 {
	font-size: 1.4rem;
	margin: 2.5rem 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--teal-light);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.legal p { margin: 0 0 1rem; line-height: 1.75; }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .5rem; line-height: 1.7; }
.legal a { color: var(--teal); text-decoration: underline; }
.legal a:hover { color: var(--teal-dark); }
.legal__todo {
	background: #FFF7ED;
	border-left: 3px solid var(--orange);
	color: #9A3412;
	padding: .15rem .4rem;
	border-radius: .25rem;
	font-weight: 600;
	font-size: .95em;
}
.legal__note {
	margin-top: 2.5rem;
	padding: 1rem 1.25rem;
	background: var(--teal-light);
	border-radius: var(--radius);
	color: var(--teal-dark);
	font-size: .9rem;
}
.legal__qualiopi-logo {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin: .5rem 0 1.5rem;
}
.legal__qualiopi-logo img { height: 5rem; width: auto; }

/* =========================================================================
   Formateurs
   ========================================================================= */

.fmt-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: var(--teal);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	flex-shrink: 0;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1px var(--border);
}
.fmt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmt-avatar__ini { font-size: 1.5rem; line-height: 1; }

.fmt-tag {
	display: inline-block;
	background: var(--teal-light);
	color: var(--teal-dark);
	font-size: .75rem;
	font-weight: 600;
	padding: .2rem .7rem;
	border-radius: 999px;
	margin: .25rem .25rem 0 0;
}

/* Liste « Nos formateurs » — cartes 2 par ligne */
.fmt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .fmt-grid { grid-template-columns: 1fr 1fr; } }

.fmt-card {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.fmt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); text-decoration: none; }
.fmt-card .fmt-avatar { width: 96px; height: 96px; }
.fmt-card__body { min-width: 0; }
.fmt-card__name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin: 0; }
.fmt-card__role { color: var(--teal); font-weight: 600; font-size: .85rem; margin: .15rem 0 .5rem; }
.fmt-card__resume { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.fmt-card__more {
	display: inline-block;
	margin-top: .6rem;
	color: var(--orange);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .875rem;
}
.fmt-card:hover .fmt-card__more { color: var(--orange-dark); }

/* Fiche formateur */
.fmt-hero { background: var(--gradient-hero); color: #fff; padding: 3rem 0; }
.fmt-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
@media (min-width: 768px) { .fmt-hero__inner { flex-direction: row; text-align: left; gap: 1.75rem; } }
.fmt-hero .fmt-avatar { width: 132px; height: 132px; background: var(--teal-dark); border-color: rgba(255,255,255,.25); box-shadow: none; }
.fmt-hero .fmt-avatar__ini { font-size: 2.4rem; }
.fmt-hero h1 { color: #fff; margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
.fmt-hero__role { color: rgba(255,255,255,.9); font-weight: 600; margin: .35rem 0 1rem; }
.fmt-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; }
@media (min-width: 768px) { .fmt-hero__actions { justify-content: flex-start; } }
.fmt-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	padding: .7rem 1.5rem;
	border-radius: 999px;
	transition: background-color .2s;
}
.fmt-hero__cta:hover { background: var(--orange-dark); color: #fff; text-decoration: none; }
.fmt-social { display: inline-flex; gap: .5rem; }
.fmt-social a {
	width: 2.4rem; height: 2.4rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
	color: #fff;
}
.fmt-social a:hover { background: rgba(255,255,255,.28); }
.fmt-social .icon { width: 1.1rem; height: 1.1rem; }

.fmt-bio { max-width: 760px; }
.fmt-bio h2 { font-size: 1.4rem; padding-bottom: .5rem; border-bottom: 2px solid var(--teal-light); margin-bottom: 1rem; }
.fmt-bio p { color: var(--text); line-height: 1.8; }
.fmt-bio__expertise { margin-top: .5rem; }
.fmt-bio__sub { font-size: 1rem; margin: 1.5rem 0 .25rem; color: var(--dark); }
.fmt-tag--link:hover { background: var(--teal); color: #fff; text-decoration: none; }
.fmt-bio__contact { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--muted); }
.fmt-bio__contact .icon { width: 1.1rem; height: 1.1rem; color: var(--teal); }
.fmt-bio__contact a { color: var(--teal); }

/* Bloc formateur(s) sur une fiche formation (carousel si plusieurs) */
.fmt-carousel-section { margin-top: 2.75rem; }
.fmt-carousel-head { text-align: center; max-width: 34rem; margin: 0 auto 1.5rem; }
.fmt-carousel-head h2 {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.6rem;
	justify-content: center;
}
.fmt-carousel-head h2 .icon { width: 1.6rem; height: 1.6rem; color: var(--teal); }
.fmt-carousel-head p { color: var(--muted); margin: .4rem 0 0; }

.fmt-carousel__viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--gradient-hero);
	box-shadow: var(--shadow-elevated);
}
.fmt-carousel__track { display: flex; transition: transform .45s ease; }
.fmt-carousel__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	padding: 2.25rem 3.5rem;
	color: #fff;
}
.fmt-carousel__pic {
	width: 132px;
	height: 132px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.1rem;
	color: #fff;
}
.fmt-carousel__pic img { width: 100%; height: 100%; object-fit: cover; }
.fmt-carousel__name { font-size: 1.9rem; font-weight: 800; color: var(--orange); margin: 0; }
.fmt-carousel__role { color: rgba(255, 255, 255, .9); font-weight: 600; margin: .25rem 0 .6rem; }
.fmt-carousel__bio { color: rgba(255, 255, 255, .92); margin: 0; line-height: 1.7; }
.fmt-carousel__tags { margin-top: .5rem; }
.fmt-carousel__tag {
	display: inline-block;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	padding: .2rem .7rem;
	border-radius: 999px;
	margin: .4rem .3rem 0 0;
}
.fmt-carousel__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .9rem;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	border-bottom: 2px solid rgba(255, 255, 255, .55);
	padding-bottom: 2px;
}
.fmt-carousel__link:hover { color: var(--orange); border-color: var(--orange); text-decoration: none; }
.fmt-carousel__link .icon { width: 1rem; height: 1rem; }
.fmt-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	cursor: pointer;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.fmt-carousel__nav .icon { width: 2.25rem; height: 2.25rem; }
.fmt-carousel__nav--prev { left: .9rem; }
.fmt-carousel__nav--next { right: .9rem; }
.fmt-carousel__dots { display: flex; gap: .55rem; justify-content: center; margin-top: 1.1rem; }
.fmt-carousel__dot { width: 11px; height: 11px; border-radius: 999px; background: #CBD5E1; cursor: pointer; transition: all .25s; }
.fmt-carousel__dot.is-on { width: 28px; background: var(--orange); }
@media (max-width: 640px) {
	.fmt-carousel__slide { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1.25rem; }
	.fmt-carousel__nav { display: none; }
}

/* =========================================================================
   Bandeau CTA
   ========================================================================= */

.cta-band {
	background: var(--gradient-hero);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 3rem;
	text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { opacity: .92; max-width: 55ch; margin: 0 auto 1.75rem; }

/* =========================================================================
   Pagination
   ========================================================================= */

.pagination {
	display: flex;
	justify-content: center;
	gap: .4rem;
	margin-top: 3rem;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .6rem;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--border);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--muted);
}
.pagination .page-numbers.current {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}
.pagination a.page-numbers:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }

/* =========================================================================
   Pied de page
   ========================================================================= */

.site-footer {
	background: var(--dark);
	color: #CBD5E1;
	padding: 3.5rem 0 1.5rem;
	margin-top: 5rem;
}
.site-footer a { color: #CBD5E1; }
.site-footer a:hover { color: #fff; }

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem;
	margin-bottom: 2.5rem;
}
.site-footer h3 {
	color: #fff;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .92rem; }

.site-footer__bottom {
	border-top: 1px solid #334155;
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: .85rem;
	color: #94A3B8;
}
.site-footer__bottom > span:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

/* Colonne marque : encart logo Qualiopi (fond blanc). */
.footer-qualiopi {
	display: inline-flex;
	align-items: center;
	margin-top: 1.25rem;
	background: #fff;
	border-radius: var(--radius);
	padding: .6rem .75rem;
}
.footer-qualiopi img { height: 3.5rem; width: auto; display: block; }

/* Colonne contact : icône teal + texte. */
.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-bottom: .9rem;
}
.footer-contact .icon {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--teal);
	flex-shrink: 0;
	margin-top: .15rem;
}

.qualiopi-note {
	background: rgba(255,255,255,.06);
	border-left: 3px solid var(--orange);
	padding: .9rem 1.1rem;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: .85rem;
	line-height: 1.5;
}

/* =========================================================================
   Barre d'action fixe (mobile / tablette) — reproduit MobileActionBar.tsx
   ========================================================================= */

.mobile-actionbar { display: none; }

@media (max-width: 1024px) {
	.mobile-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		gap: .75rem;
		background: #fff;
		border-top: 1px solid var(--border);
		box-shadow: 0 -4px 20px -4px rgba(30, 41, 59, .1);
		padding: .6rem 1rem;
		padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
	}
	/* Empêche la barre de masquer le bas du contenu. */
	body { padding-bottom: 4.75rem; }
}

.mobile-actionbar__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .875rem;
	padding: .65rem 1rem;
	border-radius: 999px;
	transition: transform .1s ease;
}
.mobile-actionbar__btn:active { transform: scale(.95); }
.mobile-actionbar__btn--primary { background: var(--orange); color: #fff; }
.mobile-actionbar__btn--primary:hover { color: #fff; text-decoration: none; }
.mobile-actionbar__btn--outline {
	border: 2px solid var(--orange);
	color: var(--orange);
	background: #fff;
}
.mobile-actionbar__btn--outline:hover { color: var(--orange); text-decoration: none; }

/* =========================================================================
   Contenu éditorial (articles, pages)
   ========================================================================= */

/* Colonne de lecture : largeur limitée ET centrée. Sans le centrage, le texte
   se colle à gauche d'un conteneur de 1280px — c'est ce qui donnait une page
   « cassée » sur grand écran. 72ch ≈ 70-75 caractères par ligne, l'optimum de
   lisibilité ; le plafond en px évite les lignes trop longues en très grande
   taille de police. */
.prose {
	max-width: min(72ch, 760px);
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--dark);
}

/* Rythme vertical : de l'air AVANT les titres, peu après. Le style global des
   titres n'a pas de marge haute, d'où des titres collés au paragraphe précédent. */
.prose > h2,
.prose > h3,
.prose > h4 {
	margin-top: 2.5em;
	margin-bottom: .6em;
	line-height: 1.25;
	scroll-margin-top: var(--sticky-top); /* ancres : compense l'en-tête collant */
}
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

/* Titres calibrés pour la lecture d'article (plus sobres que les titres de
   section de la page d'accueil). */
.prose > h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem); font-weight: 700; }
.prose > h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.35rem); font-weight: 700; }
.prose > h4 { font-size: 1.075rem; font-weight: 700; }

.prose p { margin: 0 0 1.25em; }
.prose > p > strong { color: var(--dark); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: .2em; }

.prose ul,
.prose ol { margin: 0 0 1.25em; padding-left: 1.35rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--teal); }
.prose li > ul,
.prose li > ol { margin: .5em 0 0; }

.prose img,
.prose figure { border-radius: var(--radius-lg); }
.prose img { display: block; margin: 2rem auto; }
.prose figure { margin: 2rem 0; }
.prose figcaption {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--muted);
	text-align: center;
}

.prose blockquote {
	margin: 2rem 0;
	padding: 1rem 1.5rem;
	border-left: 3px solid var(--teal);
	background: var(--teal-light);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.05rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Tableaux : indispensables pour les articles réglementaires (seuils CSRD,
   échéances…), et très volontiers repris par les moteurs IA. */
.prose .table-scroll { overflow-x: auto; margin: 2rem 0; }
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: .95rem;
}
.prose thead th {
	background: var(--teal-light);
	color: var(--teal-dark);
	font-family: var(--font-display);
	font-weight: 700;
	text-align: left;
}
.prose th,
.prose td {
	padding: .7rem .9rem;
	border: 1px solid var(--border);
	vertical-align: top;
}
.prose tbody tr:nth-child(even) { background: var(--bg); }

.prose hr {
	margin: 3rem 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.prose code {
	padding: .15em .4em;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .9em;
}
.prose pre {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	background: var(--dark);
	color: #E2E8F0;
	border-radius: var(--radius);
}
.prose pre code { background: none; border: 0; color: inherit; padding: 0; }

/* Mobile : on resserre l'interlignage et les marges de titres. */
@media (max-width: 640px) {
	.prose { font-size: 1rem; line-height: 1.7; }
	.prose > h2, .prose > h3, .prose > h4 { margin-top: 2em; }
	.prose img { margin: 1.5rem auto; }
	.prose blockquote { padding: .85rem 1.15rem; }
	.prose table { font-size: .875rem; }
	.prose th, .prose td { padding: .55rem .65rem; }
}

/* =========================================================================
   Contenu éditorial des pages catégorie et secteur

   Texte de fond affiché sous la liste des formations. Réutilise `.prose`
   pour la typographie ; on n'ajoute ici que le liseré de séparation
   d'avec la grille de cartes et l'espacement propre au bloc.
   ========================================================================= */

.taxonomie-contenu {
	border-top: 1px solid var(--teal-light);
	padding-top: 3.5rem;
}

.taxonomie-contenu__corps > h2:first-child,
.taxonomie-contenu__corps > h3:first-child {
	margin-top: 0;
}

/* Lisibilité : sur ces pages de hub, on assume la couleur. Le simple bouton
   « gras » de l'éditeur suffit à mettre un terme en avant dans le teal de la
   charte — pas besoin d'apprendre à poser une classe. Le double sélecteur de
   classe passe devant `.prose > p > strong` (qui, lui, reste sombre). */
.taxonomie-contenu .prose strong {
	color: var(--teal-dark);
	font-weight: 700;
}

/* Surlignage optionnel d'un membre de phrase : balise <mark> en onglet Texte. */
.taxonomie-contenu .prose mark {
	background: var(--teal-light);
	color: var(--teal-dark);
	padding: .05em .3em;
	border-radius: .25em;
}

/* Liens plus francs que dans un article : c'est une page qui doit mener au
   catalogue. */
.taxonomie-contenu .prose a {
	font-weight: 600;
	color: var(--teal);
}
.taxonomie-contenu .prose a:hover { color: var(--teal-dark); }

/* Puces à coche : une liste sur un hub énumère ce que l'on propose, la coche
   le dit mieux qu'un point. Les listes numérotées gardent leurs chiffres. */
.taxonomie-contenu .prose ul {
	list-style: none;
	margin: 1.5em 0;
	padding-left: 0;
}
.taxonomie-contenu .prose ul li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .6em;
}
.taxonomie-contenu .prose ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--teal);
	font-weight: 800;
}

.breadcrumb {
	font-size: .85rem;
	color: var(--muted);
	margin-bottom: 1rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================================
   Page Recrutement formateurs
   ========================================================================= */

.recrut-hero { background: var(--gradient-hero); color: #fff; padding: 4rem 0; }
.recrut-hero__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .recrut-hero__inner { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.recrut-hero__crumbs { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255, 255, 255, .7); margin-bottom: 1.5rem; }
.recrut-hero__crumbs a { color: rgba(255, 255, 255, .8); }
.recrut-hero__crumbs a:hover { color: #fff; text-decoration: none; }
.recrut-hero__crumbs .icon { width: 1rem; height: 1rem; }
.recrut-hero__crumbs span { color: #fff; }
.recrut-hero__text h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 1.5rem; color: #fff; }
.recrut-hero__text p { font-size: 1.125rem; line-height: 1.7; color: rgba(255, 255, 255, .85); max-width: 34rem; margin: 0 0 2rem; }
.recrut-hero__cta { display: inline-flex; align-items: center; gap: .6rem; }
.recrut-hero__cta .icon { width: 1.15rem; height: 1.15rem; }
.recrut-hero__media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); display: block; }

.recrut-domains { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 640px) { .recrut-domains { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .recrut-domains { grid-template-columns: repeat(3, 1fr); } }
.recrut-domain {
	display: flex; align-items: center; gap: .75rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 1rem 1.15rem;
}
.recrut-domain .icon { width: 1.25rem; height: 1.25rem; color: var(--teal); flex-shrink: 0; }
.recrut-domain span { font-weight: 500; color: var(--dark); font-size: .9rem; }

.recrut-advantages { background: var(--bg); }
.recrut-advantages__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .recrut-advantages__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .recrut-advantages__grid { grid-template-columns: repeat(4, 1fr); } }
.recrut-advantage {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease;
}
.recrut-advantage:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.recrut-advantage__icon {
	width: 3.5rem; height: 3.5rem;
	border-radius: var(--radius);
	background: var(--gradient-hero-tile);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
}
.recrut-advantage__icon .icon { width: 1.6rem; height: 1.6rem; color: #fff; }
.recrut-advantage h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.recrut-advantage p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }

.recrut-apply__inner { max-width: 44rem; margin: 0 auto; }
.recrut-form {
	display: flex; flex-direction: column; gap: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2rem;
}
.recrut-form label { display: block; font-size: .875rem; font-weight: 500; color: var(--dark); }
.recrut-form label span { color: var(--orange); }
.recrut-form input[type="text"],
.recrut-form input[type="email"],
.recrut-form input[type="tel"],
.recrut-form input[type="number"],
.recrut-form select,
.recrut-form textarea {
	width: 100%;
	margin-top: .4rem;
	padding: .8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--dark);
}
.recrut-form textarea { resize: vertical; }
.recrut-form input:focus,
.recrut-form select:focus,
.recrut-form textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(10, 122, 122, .15);
	background: #fff;
}
.recrut-form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .recrut-form__row { grid-template-columns: 1fr 1fr; } }
.recrut-form__civilite { border: 0; padding: 0; margin: 0; }
.recrut-form__civilite legend { font-size: .875rem; font-weight: 500; color: var(--dark); padding: 0; margin-bottom: .5rem; }
.recrut-form__radios { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.recrut-form__radio { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--muted); cursor: pointer; }
.recrut-form__radio input { accent-color: var(--teal); }
.recrut-form__file input { display: block; margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.recrut-form__file input::file-selector-button {
	margin-right: 1rem;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--teal-light);
	color: var(--teal-dark);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.recrut-form__file input::file-selector-button:hover { background: var(--teal); color: #fff; }
.recrut-form__consent { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; }
.recrut-form__consent input { margin-top: .25rem; accent-color: var(--teal); flex-shrink: 0; }
.recrut-form__consent span { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.recrut-form__submit {
	align-self: stretch;
	display: inline-flex; align-items: center; justify-content: center;
	gap: .6rem;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	padding: .95rem 2rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.recrut-form__submit:hover { background: var(--orange-dark); transform: scale(1.01); }
.recrut-form__submit .icon { width: 1.15rem; height: 1.15rem; }

/* =========================================================================
   Page Diagnostic RSE
   ========================================================================= */

.diag-hero { background: var(--gradient-hero); color: #fff; padding: 4rem 0; text-align: center; }
.diag-hero__badge {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-weight: 600;
	font-size: .875rem;
	padding: .4rem 1rem;
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.diag-hero__badge .icon { width: 1rem; height: 1rem; }
.diag-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; margin-bottom: 1rem; }
.diag-hero h1 span { color: var(--orange); }
.diag-hero p { font-size: 1.125rem; color: rgba(255, 255, 255, .85); max-width: 38rem; margin: 0 auto; }

.diag-body__inner { max-width: 46rem; margin: 0 auto; }
.diag-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	padding: 2.5rem;
}
@media (min-width: 768px) { .diag-card { padding: 3rem; } }

.diag-intro { text-align: center; }
.diag-intro__icon {
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 1.25rem;
}
.diag-intro__icon .icon { width: 3.5rem; height: 3.5rem; color: var(--teal); }
.diag-intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.diag-intro p { color: var(--muted); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.7; }
.diag-intro__piliers { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }

.diag-chip {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--bg);
	padding: .5rem 1rem;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 500;
	color: var(--dark);
}
.diag-chip .icon { width: 1rem; height: 1rem; color: var(--teal); }

.diag-questions { display: flex; flex-direction: column; gap: 1.5rem; }
/* L'attribut [hidden] doit l'emporter sur le display:flex ci-dessus (bascule JS). */
.diag-intro[hidden],
.diag-questions[hidden],
.diag-quiz__submit[hidden] { display: none; }
.diag-question { border: 0; margin: 0; padding: 2.5rem; }
.diag-question__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.diag-question__count { font-size: .875rem; font-weight: 500; color: var(--muted); }
.diag-question__bar { width: 100%; height: .5rem; background: var(--bg); border-radius: 999px; margin-bottom: 1.75rem; overflow: hidden; }
.diag-question__bar span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.diag-question__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--dark); line-height: 1.4; margin-bottom: 1.5rem; padding: 0; }
@media (min-width: 768px) { .diag-question__title { font-size: 1.4rem; } }
.diag-question__options { display: flex; flex-direction: column; gap: .75rem; }
.diag-option {
	display: flex; align-items: center; gap: .85rem;
	padding: .9rem 1.25rem;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	font-weight: 500;
	color: var(--dark);
	transition: border-color .2s, background-color .2s;
}
.diag-option:hover { border-color: var(--teal); background: var(--teal-light); }
.diag-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.diag-option__letter {
	width: 2rem; height: 2rem; flex-shrink: 0;
	border: 2px solid var(--border);
	border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .85rem; font-weight: 700;
	color: var(--muted);
	transition: border-color .2s, color .2s, background-color .2s;
}
.diag-option:hover .diag-option__letter { border-color: var(--teal); color: var(--teal); }
.diag-option input:checked ~ .diag-option__letter,
.diag-option:has(input:checked) .diag-option__letter { border-color: var(--teal); background: var(--teal); color: #fff; }
.diag-option:has(input:checked) { border-color: var(--teal); background: var(--teal-light); }
.diag-option input:focus-visible ~ .diag-option__letter { box-shadow: 0 0 0 3px rgba(10, 122, 122, .3); }
.diag-question__back {
	margin-top: 1.5rem;
	display: inline-flex; align-items: center; gap: .4rem;
	background: none; border: 0; padding: 0;
	color: var(--muted); font-size: .9rem; cursor: pointer;
}
.diag-question__back:hover { color: var(--dark); }
.diag-question__back .icon { width: 1rem; height: 1rem; }

.diag-quiz__submit { margin-top: 1.5rem; text-align: center; }
.diag-quiz__submit .btn { display: inline-flex; align-items: center; gap: .6rem; }
.diag-quiz__submit .icon { width: 1.15rem; height: 1.15rem; }

.diag-result__head { text-align: center; margin-bottom: 2.5rem; }
.diag-result__check .icon { width: 3.5rem; height: 3.5rem; color: var(--teal); }
.diag-result__head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 1rem 0 .5rem; }
.diag-result__level.is-low { color: #DC2626; }
.diag-result__level.is-mid { color: var(--orange); }
.diag-result__level.is-high,
.diag-result__level.is-top { color: var(--teal); }
.diag-result__head p { color: var(--muted); max-width: 34rem; margin: 0 auto; line-height: 1.7; }
.diag-result__score { margin-top: 1rem; font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--teal); }
.diag-result__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .diag-result__grid { grid-template-columns: 1fr 1fr; } }
.diag-pilier { background: var(--bg); border-radius: var(--radius); padding: 1.25rem; }
.diag-pilier__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.diag-pilier__name { font-weight: 600; color: var(--dark); }
.diag-pilier__pct { font-size: .875rem; font-weight: 700; color: var(--teal); }
.diag-pilier__bar { width: 100%; height: .6rem; background: var(--surface); border-radius: 999px; overflow: hidden; }
.diag-pilier__bar span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.diag-pilier__pts { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }
.diag-result__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .diag-result__actions { flex-direction: row; } }
.diag-result__actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.diag-result__actions .icon { width: 1.1rem; height: 1.1rem; }

/* =========================================================================
   Article de blog : signature, résumé « L'essentiel », étiquettes
   ========================================================================= */

/* En-tête d'article : on aligne la colonne du titre sur celle du texte,
   pour que titre, chapô et contenu partagent le même axe de lecture. */
.article-hero .container > * { max-width: min(72ch, 760px); margin-inline: auto; }
.article-hero h1 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); }

.article-hero__cat { margin: 0 0 .85rem; }
.article-hero__cat a {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--teal-light);
	color: var(--teal-dark);
	font-family: var(--font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.article-hero__cat a:hover { background: var(--teal); color: #fff; text-decoration: none; }

.article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--muted);
}
.article-byline__sep { opacity: .5; }

/* Image de couverture : format paysage maîtrisé, comme sur l'ancien site. */
.article-cover {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin: 0 0 2.5rem;
}

/* Pied d'article : même colonne que le texte. */
.article-footer {
	max-width: min(72ch, 760px);
	margin: 3.5rem auto 0;
}
.article-back { margin-top: 2rem; }
.article-back a { font-weight: 600; }

/* Bloc résumé placé en tête d'article : premier élément lu par les moteurs IA. */
.article-tldr {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--teal-light);
	border-left: 4px solid var(--teal);
	border-radius: var(--radius);
}
.article-tldr__label {
	margin: 0 0 .5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal-dark);
}
.article-tldr__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--dark);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}