/* ---------------------------------------------------------------------------
 * cepe.css — overrides Bootstrap 5.3 + styles spécifiques CEPE
 * Chargé APRÈS bootstrap.min.css.
 *
 * Les couleurs d'univers (--univers-1..6) sont injectées par le layout
 * depuis la DB. --accent est défini quand on est sur une page liée à un
 * univers (fiche, listing par univers). Sinon --accent retombe sur --brand.
 * --------------------------------------------------------------------------- */

@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1375px;
	}
}

:root {
	/* Couleur de marque institutionnelle CEPE (top bar, accent brand "Cepe" dans logo).
	   Distincte des couleurs d'univers — c'est l'identité de l'école elle-même.
	   Reprise du legacy `.top-navbar` (cepe-v2.css ligne 844). */
	--brand: #5a415a; /* initiale = #584558 */

	/* Couleur d'accent — overridée par le layout selon le contexte d'univers.
	   Sinon retombe sur --brand pour rester cohérent sur les pages neutres. */
	--accent: var(--brand);

	/* Niveaux de gris */
	--ink-1: #1a1f28;  /* titres */
	--ink-2: #2f3741;  /* corps */
	--ink-3: #525a66;  /* secondaire */
	--ink-4: #6b7280;  /* labels uppercase */
	--ink-5: #9ba3af;  /* muted léger */
	--bg-soft: #f6f7f9;

	/* Bootstrap overrides */
	--bs-primary: var(--accent);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: color-mix(in srgb, var(--accent) 75%, black);
	--bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bs-body-color: var(--ink-2);
	--bs-body-bg: #ffffff;
	--bs-border-color: #e7eaef;
}

body {
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Inputs : bordure grise légèrement plus foncée que --bs-border-color (qui sert
   aussi aux cards/séparateurs et qu'on ne veut pas assombrir). */
.form-control,
.form-select,
.form-check-input {
	border-color: #cbd1db;
}

/* Liens : prune désaturé (--accent, qui retombe sur --brand sur les pages neutres),
   jamais le bleu Bootstrap par défaut. Style site-wide. */
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
}
.btn:hover, a.btn:hover { text-decoration: none; }

/* Gros boutons (submit « Enregistrer ces informations » & co) : police un peu
   plus petite que le 1.25rem par défaut de Bootstrap. */
.btn-lg {
	--bs-btn-font-size: 1.05rem;
}

/* Modals (tout le front) : séparateurs header/footer un peu plus foncés que le
   #dee2e6 Bootstrap par défaut. */
.modal-header {
	--bs-modal-header-border-color: #cfd5dd;
}
.modal-footer {
	--bs-modal-footer-border-color: #cfd5dd;
}
/* Modal signature électronique : largeur intermédiaire (entre le 500px par
   défaut et le 800px de modal-lg). */
.modal-docusign {
	--bs-modal-width: 650px;
}

/* Élément avec tooltip BS sur le lieu d'une session : indication visuelle. */
.lieu-tip { cursor: help; }

/* Tooltips BS5 — fond prune (cohérent avec utility bar + identité CEPE). */
.tooltip {
	--bs-tooltip-bg: var(--brand);
	--bs-tooltip-color: #fff;
	--bs-tooltip-opacity: 0.95;
	--bs-tooltip-max-width: 320px;
	--bs-tooltip-font-size: 0.82rem;
	--bs-tooltip-padding-x: 0.7rem;
	--bs-tooltip-padding-y: 0.45rem;
}
.tooltip .tooltip-inner {
	text-align: left;
}

/* btn-primary doit suivre --accent */
.btn-primary {
	--bs-btn-bg: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, black);
	--bs-btn-active-bg: color-mix(in srgb, var(--accent) 72%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--accent) 72%, black);
}
.btn-outline-primary {
	--bs-btn-color: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: var(--accent);
	--bs-btn-active-bg: var(--accent);
	--bs-btn-active-border-color: var(--accent);
	--bs-btn-active-color: #fff;
}

/* Boutons des pages compte (auth) : violet brand estompé (mix ~15% blanc),
   cohérent avec les boutons des mails transactionnels (EmailLayout::button).
   Le hover ramène au brand plein pour le feedback. */
.account-page .btn-primary {
	--bs-btn-bg: color-mix(in srgb, var(--accent) 85%, white);
	--bs-btn-border-color: color-mix(in srgb, var(--accent) 85%, white);
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: var(--accent);
	--bs-btn-active-bg: color-mix(in srgb, var(--accent) 72%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--accent) 72%, black);
}

/* Pages compte + flash global : alerte success éclaircie (border conservée) +
   padding réduit. */
.account-page .alert-success,
.site-flash.alert-success {
	background-color: color-mix(in srgb, var(--bs-success-bg-subtle, #d1e7dd) 55%, white);
	padding: 0.7rem 0.95rem;
}

/* Pages compte : sous-formulaires dépliables (contact facturation / signataire /
   adresse de facturation) — barre verticale gauche plus marquée (4px), couleur
   inchangée. */
.account-form .border-start {
	border-left-width: 4px !important;
}

/* Alerte info — partout sur le site : fond bleu pastel (le défaut Bootstrap
   #cff4fc « pique » un peu), bordure conservée un cran plus foncée pour rester
   lisible sur ce fond éclairci. */
.alert-info {
	background-color: color-mix(in srgb, var(--bs-info-bg-subtle, #cff4fc) 38%, white);
	border-color: color-mix(in srgb, var(--bs-info-border-subtle, #9eeaf9) 75%, var(--bs-info-text-emphasis, #055160));
}

/* Alerte warning — partout sur le site : même logique que l'info (fond éclairci,
   bordure conservée un cran plus foncée pour rester lisible). */
.alert-warning {
	background-color: color-mix(in srgb, var(--bs-warning-bg-subtle, #fff3cd) 38%, white);
	border-color: color-mix(in srgb, var(--bs-warning-border-subtle, #ffe69c) 75%, var(--bs-warning-text-emphasis, #664d03));
}

/* Alerte light — partout sur le site : le défaut Bootstrap (fond #fefefe,
   bordure #fdfdfe) est quasi invisible sur fond blanc. On fonce le fond et la
   bordure à la marge pour matérialiser le bloc sans le rendre lourd. */
.alert-light {
	background-color: #f9fafb;
	/* `.border` (utilitaire BS) pose border-color en !important → on doit suivre. */
	border-color: #d2d6dd !important;
}

/* Pages compte / flash : padding réduit (le fond/bordure vient des règles
   globales ci-dessus). */
.account-page .alert-info,
.site-flash.alert-info,
.account-page .alert-warning,
.site-flash.alert-warning {
	padding: 0.7rem 0.95rem;
}

/* Pages compte : alerte danger — même logique (fond un poil plus clair que la
   bordure). */
.account-page .alert-danger,
.site-flash.alert-danger {
	background-color: color-mix(in srgb, var(--bs-danger-bg-subtle, #f8d7da) 45%, white);
	border-color: color-mix(in srgb, var(--bs-danger-border-subtle, #f1aeb5) 75%, var(--bs-danger-text-emphasis, #58151c));
	padding: 0.7rem 0.95rem;
}

/* Pages compte : plus d'air sous les alertes + taille de police confortable
   (on neutralise un éventuel .small qui devient trop petit avec la base réduite). */
.account-page .alert {
	margin-bottom: 1.6rem;
	font-size: 0.9375rem;
}

/* Croix de fermeture des alertes dismissible : centrée verticalement.
   Bootstrap la cale en haut (padding fixe), ce qui la désaligne sur nos
   alertes à padding réduit. */
.account-page .alert-dismissible .btn-close,
.site-flash.alert-dismissible .btn-close {
	top: 50%;
	transform: translateY(-50%);
}

/* Pages compte : police légèrement réduite, de façon uniforme sur le contenu
   (header/footer du site non concernés). Exception : les cards « Vos entités »
   (.entity-card) qui ont déjà une typo plus petite — on les remet à 1rem pour
   ne pas les rétrécir davantage. */
.account-home,
.account-auth,
.account-form {
	font-size: 0.9375rem;
}
.account-home .entity-card {
	font-size: 1rem;
}

/* Formulaires compte : labels un peu plus grands (ils héritaient de la taille
   réduite), inputs un chouïa plus petits. */
.account-home .form-label,
.account-auth .form-label,
.account-form .form-label {
	font-size: 1rem;
}
.account-home .form-control,
.account-home .form-select,
.account-auth .form-control,
.account-auth .form-select,
.account-form .form-control,
.account-form .form-select {
	font-size: 0.9375rem;
}

/* Pages compte : cards transparentes (pas de fond gris), détachées par une
   ombre douce un peu plus marquée que le shadow-sm Bootstrap. On surcharge
   --bs-box-shadow-sm (utilisé par .shadow-sm sur les cards) plutôt que box-shadow
   pour éviter le !important de l'utilitaire. */
.account-page .account-card {
	--bs-card-bg: transparent;
	--bs-box-shadow-sm: 0 0.125rem 0.5rem rgba(40, 30, 50, 0.06);
}

/* Tableau de bord / pages compte avec contenu : liseré d'accent en haut des
   cards + léger soulèvement au survol (les cards d'auth, en .account-auth, ne
   sont pas concernées). */
.account-home .account-card,
.account-page .account-card-accent {
	border-top: 4px solid color-mix(in srgb, var(--accent) 55%, white);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.account-home .account-card:hover,
.account-page .account-card-accent:hover {
	transform: translateY(-2px);
	--bs-box-shadow-sm: 0 0.5rem 1.25rem rgba(40, 30, 50, 0.11);
}

/* Titres de section des pages compte en violet brand (au lieu du noir). */
.account-page .account-section-title {
	color: var(--accent);
}
.text-accent {
	color: var(--accent) !important;
}
/* Libellés de contact : icône légèrement estompée, alignée au texte. */
.account-page .contact-label .bi {
	opacity: 0.7;
}

/* Boutons de sélection (participant connu) : hover gris très pâle plutôt que
   le gris plein de .btn-outline-secondary. */
.account-page .account-pick-btn {
	--bs-btn-hover-bg: #f4f5f7;
	--bs-btn-hover-border-color: #ced4da;
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-active-bg: #eceef1;
	--bs-btn-active-border-color: #ced4da;
	--bs-btn-active-color: var(--bs-body-color);
}

/* Pages compte : libellés des contacts d'entité (facturation / signataire /
   signature) — gris un peu plus clair que .text-muted. */
.account-page .contact-label {
	color: #9aa1a9;
}

/* Pages compte : un peu plus d'air vertical partout (champs de formulaire +
   séparation alerte → contenu/bouton sur les pages message). */
.account-page .account-card .card-body .mb-3 {
	margin-bottom: 1.4rem !important;
}
.account-page .account-message-body {
	margin-top: 1.6rem;
}
.account-page .account-message-body > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Utility bar (top thin bar — institutionnel)
 * --------------------------------------------------------------------------- */

.utility-bar {
	background: #eeeef1;
	color: #404853;
	font-size: 0.82rem;
	padding: 0.20rem 0;
	border-bottom: 1px solid #dcdce1;
}
@media (max-width: 767.98px) {
	.utility-bar { display: none; }
}
.utility-bar .util-link {
	color: #404853;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0;
}
.utility-bar .util-link:hover {
	color: var(--brand);
	text-decoration: none;
}
.utility-bar .util-sep {
	color: var(--ink-5);
}

/* ---------------------------------------------------------------------------
 * Header / navbar
 * --------------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--bs-border-color);
	background: #fafbfc;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 30;
}
.site-header .navbar {
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
}
.navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.88rem;
	padding-right: 1.5rem;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand .brand-logo {
	height: 50px;
	width: auto;
	display: block;
}
.navbar-brand .brand-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	gap: 0.2rem;
}
.brand-mark {
	font-weight: 600;
	font-size: 1.17rem;
	letter-spacing: 0.02em;
	color: var(--ink-1);
}
.brand-sub {
	font-size: 0.89rem;
	color: var(--ink-3);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.site-header .nav-link {
	color: var(--ink-2);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.5rem 1.05rem !important;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus {
	background: #ede4ed;
	color: var(--ink-2);
	text-decoration: none;
}
.site-header .nav-link.active {
	background: #ede4ed;
	color: var(--ink-2);
}

/* Caret discret sur les triggers dropdown */
.site-header .nav-link.dropdown-toggle::after {
	margin-left: 0.35em;
	border-top-width: 4px;
	border-right-width: 4px;
	border-left-width: 4px;
	opacity: 0.55;
	vertical-align: 0.18em;
}

/* Panneau dropdown */
.site-header .nav-dropdown-menu {
	border: 1px solid var(--bs-border-color);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(40, 20, 50, 0.10);
	padding: 0.4rem;
	margin-top: 0.5rem;
	min-width: 19rem;
}
.site-header .nav-dropdown-menu .dropdown-item {
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	color: var(--ink-2);
	white-space: nowrap;
}
.site-header .nav-dropdown-menu .dropdown-item:hover,
.site-header .nav-dropdown-menu .dropdown-item:focus {
	background: #f4eef4;
	color: var(--ink-1, var(--ink-2));
	text-decoration: none;
}
.site-header .nav-dropdown-menu .dropdown-item.active {
	background: #ede4ed;
	color: var(--ink-1, var(--ink-2));
}

/* Item principal "Toutes nos…" / "Tous nos…" */
.site-header .nav-dropdown-menu .nav-dd-main {
	font-weight: 600;
}
.site-header .nav-dropdown-menu .nav-dd-main .bi {
	margin-right: 0.4rem;
	opacity: 0.7;
}

/* Items univers / certificats : pastille colorée à gauche */
.site-header .nav-dropdown-menu .nav-dd-univers {
	padding-left: 1.85rem;
	position: relative;
}
.site-header .nav-dropdown-menu .nav-dd-univers::before {
	content: "";
	position: absolute;
	left: 0.65rem;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pastille, var(--brand));
	transform: translateY(-50%);
}

/* Ouverture au hover sur desktop (lg+) */
@media (min-width: 992px) {
	.site-header .navbar-nav .nav-item.dropdown {
		position: relative;
	}
	.site-header .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
		display: block;
	}
	.site-header .navbar-nav .nav-item.dropdown > .dropdown-menu {
		margin-top: 0;
	}
	.site-header .navbar-nav .nav-item.dropdown::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 0.5rem;
		bottom: -0.5rem;
		pointer-events: auto;
	}
}

.btn-account {
	display: inline-flex;
	align-items: center;
	gap: 0.38rem;
	padding: 0.5rem 1.05rem;
	background: #eceff3;
	border: 1px solid var(--bs-border-color);
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: all .15s ease;
}
.btn-account:hover {
	border-color: var(--brand);
	color: var(--brand);
	text-decoration: none;
}

/* Navbar plus compacte en vue smartphone */
@media (max-width: 767.98px) {
	.site-header {
		border-bottom-color: #c9cdd6;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.11);
	}
	.site-header .navbar { padding-top: 0.55rem; padding-bottom: 0.55rem; }
	/* Descend le bloc logo + texte sans bouger le hamburger (nudge visuel,
	   pas de changement de hauteur de navbar). */
	.navbar-brand { gap: 0.55rem; padding-right: 0; position: relative; top: 2px; }
	.navbar-brand .brand-logo { height: 36px; }
	.brand-mark { font-size: 0.98rem; }
	.brand-sub { font-size: 0.76rem; }
	/* Hamburger custom : pas de bordure, 3 traits larges à bouts arrondis. */
	.navbar-toggler {
		padding: 0.35rem 0.15rem;
		border: 0;
	}
	.navbar-toggler:focus { box-shadow: none; }
	.navbar-toggler .navbar-toggler-icon {
		width: 30px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cg stroke='%231a1f28' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='2' y1='3' x2='28' y2='3'/%3E%3Cline x1='2' y1='10' x2='28' y2='10'/%3E%3Cline x1='2' y1='17' x2='28' y2='17'/%3E%3C/g%3E%3C/svg%3E");
	}
}

/* Menu hamburger déroulé (< lg = 992px) : divider sous le logo, et plus
   d'espace autour du bouton "Mon compte". */
@media (max-width: 991.98px) {
	.site-header .navbar-collapse {
		border-top: 1px solid #c4c8d0;
		margin-top: 0.6rem;
		padding-top: 0.5rem;
	}
	.site-header .navbar-nav .nav-item:has(.btn-account) {
		margin-top: 1rem;
		margin-bottom: 0.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	background:
		radial-gradient(100% 130% at 50% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 55%),
		linear-gradient(180deg, #59445a 0%, #423144 100%);
	color: #e6dfe6;
	font-size: 0.92rem;
	padding: 6.5rem 0 7.5rem;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--brand) 70%, white) 25%,
		color-mix(in srgb, var(--brand) 82%, white) 50%,
		color-mix(in srgb, var(--brand) 70%, white) 75%,
		transparent);
}
.site-footer a {
	color: #e6dfe6;
	transition: color .14s ease;
}
.site-footer a:hover {
	color: #ffffff;
	text-decoration: none;
}
.site-footer ul li { margin-bottom: 0.35rem; }
.site-footer hr {
	border-color: rgba(255, 255, 255, 0.2);
	opacity: 1;
}
.footer-brand {
	display: inline-block;
	max-width: 200px;
}
.footer-logo {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
}
.footer-social {
	text-align: center;
}
.footer-social a {
	display: inline-block;
	font-size: 1.4rem;
	margin: 0 0.45rem;
	color: #e6dfe6;
}
.footer-social a:hover { color: #ffffff; }

/* Bande certifications sous le footer principal (Qualiopi, Datadock). */
.footer-certifs {
	background: #fff;
	padding: 2.75rem 0 2.25rem;
	border-top: 1px solid var(--bs-border-color);
}
.footer-certifs img { height: auto; }
.footer-title {
	position: relative;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: #ffffff;
	padding-bottom: 0.6rem;
	margin-bottom: 0.95rem;
}
.footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--brand) 55%, white);
}
@media (max-width: 767.98px) {
	.site-footer {
		text-align: center;
		padding: 2.5rem 0 2.25rem;
		font-size: 0.85rem;
		line-height: 1.4;
	}
	.site-footer .row { --bs-gutter-y: 1.1rem; }
	.site-footer .footer-title { margin-top: 0.5rem; margin-bottom: 0.55rem; }
	.site-footer .footer-title::after { left: 50%; transform: translateX(-50%); }
	.site-footer ul li { margin-bottom: 0.2rem; }
	.site-footer p { margin-bottom: 0.6rem !important; }
	.site-footer .footer-brand { display: block; margin-left: auto; margin-right: auto; }
	.site-footer .footer-brand { max-width: 190px; }
	.site-footer .footer-logo {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0.8rem;
		max-width: 190px;
	}
	.footer-certifs { padding: 1.75rem 0 1.5rem; }
	.footer-certifs .d-flex {
		gap: 1.5rem !important;
		flex-wrap: nowrap !important;
	}
	.footer-certifs img { max-width: 100%; height: auto; }
	.footer-certifs img[alt^="Qualiopi"] { width: 130px; }
	.footer-certifs img[alt^="Datadock"] { width: 70px; }
}

/* ---------------------------------------------------------------------------
 * Breadcrumb
 * --------------------------------------------------------------------------- */

.breadcrumb {
	font-size: 0.78rem;
	--bs-breadcrumb-divider: '›';
	--bs-breadcrumb-divider-color: var(--ink-5);
	--bs-breadcrumb-item-active-color: var(--ink-4);
}
.breadcrumb a {
	color: var(--ink-4);
}
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }

/* Breadcrumb fiche : reste sur une ligne, le dernier item (titre formation) tronque
   avec ellipsis tout en gardant les séparateurs visibles. */
.fiche-breadcrumb { overflow: hidden; }
.fiche-breadcrumb .breadcrumb { flex-wrap: nowrap; min-width: 0; }
.fiche-breadcrumb .breadcrumb-item { white-space: nowrap; flex-shrink: 0; }
.fiche-breadcrumb .breadcrumb-item.active {
	min-width: 0;
	flex-shrink: 1;
	display: flex;
	align-items: baseline;
	overflow: hidden;
}
.fiche-breadcrumb .breadcrumb-title {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Fiche formation — Hero
 * --------------------------------------------------------------------------- */

.fiche-hero {
	padding: 1.25rem 0 2rem;
}

.univers-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1.4rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 6%, white);
}
.univers-tag:hover {
	background: color-mix(in srgb, var(--accent) 14%, white);
	color: var(--accent);
	text-decoration: none;
}
.univers-tag-sm {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	margin-bottom: 0;
	padding: 0.24rem 0.65rem;
}

.fiche-title {
	font-size: clamp(1.625rem, 1.7vw + 0.95rem, 2.2rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--accent);
}

/* Icône chapeau de diplômé en tête du sous-titre des fiches certificat — accent univers estompé */
.page-fiche-certificat .fiche-subtitle-icon {
	margin-right: 0.4em;
	color: var(--accent, currentColor);
	opacity: 0.55;
	font-size: 1em;
	vertical-align: baseline;
}

/* Séparateur horizontal sous le titre (couleur d'univers) — signature legacy */
.title-separator {
	display: block;
	width: 48px;
	height: 1px;
	border-radius: 2px;
	background: var(--accent);
	margin: 1.1rem 0 1.5rem;
}

.fiche-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 1.6rem;
	font-size: 1rem;
	color: var(--ink-3);
}
.meta-item i {
	color: var(--accent);
	margin-right: 0.3rem;
}
.meta-hours {
	color: var(--ink-5);
	font-size: 0.88em;
	margin-left: 0.2rem;
}
.meta-new {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	background: var(--accent);
	color: #fff;
	padding: 0.32rem 0.6rem 0.28rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Smartphone : prix visible dans .fiche-meta (sur desktop il reste dans la
   sidebar via .cta-price). */
.fiche-meta .meta-price { display: none; }
@media (max-width: 767.98px) {
	.fiche-meta .meta-price { display: inline-flex; align-items: center; }
	/* Note de satisfaction sous le titre : masquée sur mobile, on ne garde que
	   durée / niveau / prix. Reste visible sur desktop. */
	.fiche-meta .meta-rating { display: none; }
}

/* Smartphone : badge univers dans son propre wrapper sous le séparateur de
   titre (content-width, saut de ligne avant durée/niveau/prix). Sur desktop
   il reste dans .fiche-meta inline avec le reste. */
.fiche-univers-mobile { display: none; }
@media (max-width: 767.98px) {
	/* Ordre visuel : badge « Nouveau » remonté au-dessus du H1. */
	.fiche-hero { display: flex; flex-direction: column; padding-bottom: 1.75rem; }
	.fiche-hero .title-separator { margin-bottom: 1.15rem; }
	.fiche-univers-mobile {
		order: -1;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.45rem;
	}
	/* Badge univers masqué en vue mobile (le fil d'Ariane porte déjà l'info). */
	.fiche-univers-mobile .univers-tag { display: none; }
	.fiche-univers-mobile .meta-new-mobile {
		font-size: 0.6rem;
		padding: 0.22rem 0.5rem;
		margin-left: 0;
		margin-bottom: 0.7rem;
	}
	.fiche-hero .fiche-meta > .univers-tag { display: none; }
	/* Badge « Nouveau » déplacé à côté du pill univers : on masque le doublon
	   resté dans .fiche-meta. */
	.fiche-meta .meta-new { display: none; }
}

/* CTA "Prochaine session" en haut de fiche — smartphone uniquement. */
.fiche-hero-cta { display: none; }
.hero-cta-more { display: none; }
@media (max-width: 767.98px) {
	.fiche-breadcrumb { display: none; }
	/* Police un cran plus petite pour le CTA « Être prévenu » de la sidebar. */
	.cta-preinscription { font-size: 0.85rem; }
	.fiche-hero-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 1.25rem;
		padding: 0.75rem 0.9rem 0.75rem 1rem;
		border: 1px solid color-mix(in srgb, var(--accent) 25%, white);
		background: color-mix(in srgb, var(--accent) 5%, white);
		border-radius: 12px;
	}
	.hero-cta-info {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
	}
	.hero-cta-label {
		font-size: 0.66rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--ink-4);
	}
	.hero-cta-date {
		font-size: 0.95rem;
		font-weight: 600;
		color: var(--ink-1);
		line-height: 1.25;
	}
	/* Badge « Session garantie » sous la date : pill collée à gauche (pas
	   étirée par le stretch du flex-column), un cran plus petite qu'en sidebar.
	   Sélecteur à 2 classes pour l'emporter sur `.badge-garantie` (déclaré plus
	   bas, même spécificité sinon → il gagnerait par ordre source). */
	.fiche-hero-cta .hero-cta-badge {
		align-self: flex-start;
		margin: 0.25rem 0 0;
		padding: 0.34rem 0.22rem;
		font-size: 0.6rem;
		border-radius: 3px;
	}
	.hero-cta-btn {
		flex: 0 0 auto;
		padding: 0.45rem 0.85rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}

	/* Variante stacked : date pleine largeur + CTA full-width en dessous.
	   Utilisée sur les fiches certificat où la date est longue (début → fin). */
	.fiche-hero-cta-stacked {
		flex-direction: column;
		align-items: stretch;
		gap: 0.7rem;
	}
	.fiche-hero-cta-stacked .hero-cta-btn {
		width: 100%;
		padding: 0.6rem 0.85rem;
		white-space: normal;
	}
	/* Carte candidature certificat : CTA en lien simple semi-bold (allège le
	   bloc face aux pills de nav juste en dessous). */
	.hero-cta-link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-weight: 600;
		font-size: 0.92rem;
		color: var(--accent);
	}
	.hero-cta-link:hover { color: var(--accent); text-decoration: underline; }
	.hero-cta-link i { font-size: 1em; }
	.hero-cta-more {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.4rem;
		margin-top: 0.75rem;
		font-size: 0.85rem;
		font-weight: 500;
		color: var(--accent);
	}
	.hero-cta-more i { font-size: 1em; }
	.cta-card { scroll-margin-top: 0.75rem; }
}

/* Sections collapsibles (Programme détaillé, Pour aller plus loin) :
   accordéon replié par défaut en vue smartphone. Sur desktop, le <details>
   est forcé ouvert (l'attribut open est posé par le template) et le chevron
   / le curseur pointer sont neutralisés. */
.programme-details > .programme-summary,
.more-details > .more-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.programme-details > .programme-summary::-webkit-details-marker,
.more-details > .more-summary::-webkit-details-marker { display: none; }
.programme-details .section-title,
.more-details .section-title { flex: 1 1 auto; margin-bottom: 0; }
/* Titre multi-ligne : icône à gauche centrée verticalement (position absolue
   pour ne pas perturber l'inline-flow — sinon un <em> dans le titre devient
   une colonne flex à part). */
.more-details .section-title { padding-left: 1.4em; position: relative; }
.more-details .section-title > i:first-child {
	position: absolute;
	left: 0;
	top: calc(50% - 0.35em);
	transform: translateY(-50%);
	margin-right: 0;
}
.programme-details[open] > .programme-summary,
.more-details[open] > .more-summary { margin-bottom: 1.1rem; }
.programme-chevron,
.more-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
	font-size: 1.05rem;
	transition: transform .2s ease, background .15s ease;
}
.programme-details > .programme-summary:hover .programme-chevron,
.more-details > .more-summary:hover .more-chevron {
	background: color-mix(in srgb, var(--accent) 20%, white);
}
.programme-details[open] .programme-chevron,
.more-details[open] .more-chevron { transform: rotate(180deg); }
/* « Pour aller plus loin » replié (mobile) : pas de trait sous le titre tant
   que la section est fermée — il n'apparaît qu'au dépliage. On masque juste la
   couleur de la border (padding intact → la hauteur du titre ne change pas, donc
   l'icône centrée à gauche ne bouge pas à l'ouverture). Au dépliage, border +
   marge basse du summary reprennent → espacement titre/trait/contenu identique.
   (Le programme, lui, garde son trait en replié.) */
.more-details:not([open]) .section-title {
	border-bottom-color: transparent;
}
/* Le trait sous le titre du programme reste visible en replié, padding intact
   (sinon la border remonte se coller au texte). */
@media (min-width: 768px) {
	.programme-details > .programme-summary,
	.more-details > .more-summary { cursor: default; }
	.programme-chevron,
	.more-chevron { display: none; }
}

/* Smartphone : programme / « pour aller plus loin » plafonnés avec estompe en
   dégradé + bouton « Voir plus » (le <details> reste ouvert ; JS dans
   formation.php mesure ~10 lignes / ~8 lignes et pose .fiche-clamp). */
@media (max-width: 767.98px) {
	.programme-chevron,
	.more-chevron { display: none; }
	.fiche-clamp {
		position: relative;
		overflow: hidden;
	}
	/* `overflow: hidden` crée un contexte de formatage de bloc : la marge haute du
	   1er enfant ne fusionne plus hors du bloc et s'ajoute à la marge basse du
	   <summary>. Un programme démarrant par un titre décrochait ainsi ~1.1rem de
	   trop, résorbés au dépliage (overflow redevenant visible). On la neutralise :
	   l'écart au-dessus du 1er élément ne vient plus que du <summary>, identique
	   replié et déplié — et comme pour un contenu démarrant par un paragraphe.
	   Les deux classes sont chaînées (le JS pose .fiche-clamp sur le .rich-text
	   lui-même) : il faut 3 classes pour passer devant `.fiche-section-programme
	   .rich-text h3`, qui pèse 2 classes + 1 type. */
	.rich-text.fiche-clamp > *:first-child { margin-top: 0; }
	/* Programme démarrant par un chapitre : la marge que le titre vient de perdre
	   est reportée sur le bloc, où elle redevient une marge entre frères adjacents
	   et fusionne donc avec celle du <summary> (max) au lieu de s'y ajouter (somme).
	   L'écart au-dessus du 1er chapitre égale ainsi celui des suivants. Valeur à
	   garder alignée sur `.fiche-section-programme .rich-text h3` en mobile. */
	.fiche-section-programme .rich-text.fiche-clamp:has(> h3:first-child) {
		margin-top: 1.4rem;
	}
	.fiche-clamp::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 4em;
		pointer-events: none;
	}
	.fiche-section-programme .fiche-clamp::after {
		background: linear-gradient(to bottom, transparent, #fff);
	}
	.fiche-more .fiche-clamp::after {
		background: linear-gradient(to bottom, transparent, var(--bg-soft));
	}
	.fiche-clamp.is-expanded { overflow: visible; }
	.fiche-clamp.is-expanded::after { display: none; }
	.fiche-clamp-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		width: 100%;
		margin-top: 0.85rem;
		padding: 0.55rem 0.75rem;
		border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
		border-radius: 8px;
		color: var(--accent);
		font-size: 0.9rem;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
	}
	/* Teinte de fond distincte selon la section (identique repos / hover). */
	.fiche-section-programme .fiche-clamp-toggle,
	.fiche-section-programme .fiche-clamp-toggle:hover {
		background: color-mix(in srgb, var(--accent) 6%, white);
	}
	.fiche-more .fiche-clamp-toggle,
	.fiche-more .fiche-clamp-toggle:hover {
		background: color-mix(in srgb, var(--accent) 12%, white);
	}
	.fiche-more .fiche-clamp-toggle { margin-bottom: 0.5rem; }
	.fiche-clamp-toggle .bi {
		font-size: 0.95rem;
		transition: transform .2s ease;
	}
	.fiche-clamp-toggle.is-expanded .bi { transform: rotate(180deg); }
	/* « Voir moins » du programme déplié : un peu plus d'air au-dessus. */
	.fiche-section-programme .fiche-clamp-toggle.is-expanded { margin-top: 1.5rem; }
}

/* ---------------------------------------------------------------------------
 * Smartphone — réduction globale des tailles de police
 * --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	body { font-size: 15px; line-height: 1.6; }

	/* Marges latérales un peu plus aérées que le défaut Bootstrap (12px) */
	.container, .container-fluid, .container-sm, .container-md,
	.container-lg, .container-xl, .container-xxl {
		--bs-gutter-x: 2rem;
	}

	/* Hero fiche */
	.fiche-title { font-size: 1.7rem; line-height: 1.2; }
	.fiche-meta { font-size: 0.88rem; gap: 0.45rem 1.1rem; }
	.fiche-meta .meta-cpf { order: 99; }
	.meta-new { font-size: 0.62rem; }

	/* Sections */
	.section-title { font-size: 1.15rem; padding-bottom: 0.65rem; margin-bottom: 0.85rem; }
	.fiche-section.fiche-more { padding: 1.1rem 1.15rem 0.85rem; }
	.fiche-more .section-title { font-size: 1.15rem; }
	.rich-text h2 { font-size: 1.02rem; }
	.rich-text h3 { font-size: 0.95rem; }
	/* Titres décalés (cf. « Décalage Hn éditorial ») : mêmes tailles mobiles. */
	.fiche-section-programme .rich-text h3,
	.intra-section .rich-text h4 { font-size: 1.02rem; }
	.fiche-section-programme .rich-text h4,
	.intra-section .rich-text h5 { font-size: 0.95rem; }

	/* Pills péda */
	.pedago-label { font-size: 0.66rem; }
	.pill { font-size: 0.78rem; padding: 0.3rem 0.7rem; }

	/* Sidebar — quand elle drop sous le contenu en mobile */
	.fiche-sidebar { font-size: 0.88rem; }
	.cta-label, .sidebar-label { font-size: 0.66rem; }
	.cta-date { font-size: 1rem; }
	.fiche-sidebar dt { font-size: 0.65rem; }

	/* Espace blanc après "Moyens techniques" (dernier sidebar-block) */
	.fiche-sidebar .sidebar-block:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.fiche-body { padding-bottom: 1.5rem; }
	.voir-aussi { margin-top: 0.5rem; padding: 1.25rem 0 1.25rem; }
}

/* ---------------------------------------------------------------------------
 * Fiche formation — Layout body
 * --------------------------------------------------------------------------- */

.fiche-body { padding-bottom: 4rem; }
@media (min-width: 992px) {
	.fiche-body > .row { --bs-gutter-x: 3rem; }
}

/* Espacement vertical sur la col de gauche uniquement (la sidebar à droite
   reste collée en haut pour rester proche du breadcrumb). */
.fiche-main { padding-top: 0.4rem; }

.fiche-banner {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 2.5rem;
}

.fiche-section {
	margin-bottom: 3rem;
}

/* Logo langage (SAS, R, Python…) flotté à droite des objectifs sur les
   formations « Langages & logiciels ». Reprise du legacy. */
.langage-logo {
	float: right;
	margin: 0.75rem 0.5rem 1.75rem 2.25rem;
	max-width: 35%;
	height: auto;
}
@media (max-width: 575.98px) {
	.langage-logo { max-width: 90px; margin-left: 0.75rem; }
}
/* Plus d'espace au-dessus de chaque section (sauf la première du flux). */
.fiche-section + .fiche-section {
	margin-top: 0.5rem;
}
/* Première section : espace au-dessus selon qu'un visuel la précède (plus
   aéré) ou que le hero la précède directement (plus resserré). */
.fiche-hero + .fiche-section {
	margin-top: 1rem;
}
.fiche-banner + .fiche-section {
	margin-top: 2.5rem;
}

.section-title {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	margin-bottom: 1.1rem;
	color: var(--accent);
	padding-bottom: 0.65rem;
	border-bottom: 5px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.section-title i {
	margin-right: 0.5rem;
	font-size: 0.95em;
	vertical-align: -0.05em;
}

/* ---------------------------------------------------------------------------
 * Rich-text (rendu Markdown)
 * --------------------------------------------------------------------------- */

.rich-text {
	color: var(--ink-2);
}
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }
/* Exception : un H2/H3 en premier garde sa respiration au-dessus
   (cas « programme » qui démarre directement par un sous-titre). */
.rich-text > h2:first-child { margin-top: 2rem; }
.rich-text > h3:first-child { margin-top: 2rem; }
.rich-text p { margin-bottom: 1rem; }
/* Titre de module dans les listes programme (diplômes externes) : gras léger,
   la durée « (15 h) » restant en graisse normale hors du span. */
.rich-text .module-titre { font-weight: 600; }
.rich-text p.lead { font-size: 1.1rem; }
@media (max-width: 767.98px) {
	.rich-text p.lead { font-size: 0.9rem; }
	.fiche-more .rich-text p.lead { font-size: 0.99rem; }
}
.rich-text h2 {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 2rem;
	margin-bottom: 0.6rem;
	color: var(--ink-1);
}
.rich-text h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--ink-4);
}
/* Décalage Hn éditorial — restauration visuelle.
   Les titres du champ « programme » sont saisis en ##/### (H2/H3) mais rendus
   décalés d'un cran pour une hiérarchie Hn logique (cf. Markdown::renderShifted) :
   - fiche formation : sous « Programme détaillé » (H2) → chapitres H3, sous-items H4 ;
   - thème intra      : sous un thème (H3)            → chapitres H4, sous-items H5.
   On ré-applique ici l'apparence d'origine (chapitre = ancien .rich-text h2,
   sous-item = ancien .rich-text h3) pour un rendu strictement identique. */
.fiche-section-programme .rich-text h3,
.intra-section .rich-text h4 {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 2rem;
	margin-bottom: 0.6rem;
	color: var(--ink-1);
}
.fiche-section-programme .rich-text h4,
.intra-section .rich-text h5 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--ink-4);
}
/* Chapitres du programme : un peu moins d'air au-dessus en mobile. Placé APRÈS
   la règle de base (même spécificité → l'ordre source tranche). */
@media (max-width: 767.98px) {
	.fiche-section-programme .rich-text h3 { margin-top: 1.4rem; }
}
/* Parité print : Bootstrap n'applique `page-break-after: avoid` + orphans/widows
   qu'aux h2/h3 ; les niveaux décalés (h4/h5) le perdraient → on le réapplique pour
   garder le même comportement de saut de page qu'avant le décalage. Inerte à l'écran. */
.fiche-section-programme .rich-text h3,
.fiche-section-programme .rich-text h4,
.intra-section .rich-text h4,
.intra-section .rich-text h5 {
	break-after: avoid;
	page-break-after: avoid;
	orphans: 3;
	widows: 3;
}
.rich-text ul, .rich-text ol {
	padding-left: 1.4rem;
	margin-bottom: 1rem;
}
.rich-text li { margin-bottom: 0.3rem; }
.rich-text a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.rich-text a:hover { text-decoration-thickness: 2px; }
.rich-text u {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Badge durée (extension MD custom : `(2h)` en fin de H2/H3).
   .duree-bind enveloppe "dernier mot + badge" pour garantir qu'ils restent
   toujours sur la même ligne en cas de wrap du titre. */
.rich-text .duree-bind { white-space: nowrap; }
.rich-text .duree {
	display: inline-block;
	font-size: 0.77rem;
	font-weight: 500;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, white);
	border-radius: 999px;
	padding: 0.13rem 0.6rem;
	margin-left: 0.5rem;
	vertical-align: middle;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * Pills (moyens / méthodes péda)
 * --------------------------------------------------------------------------- */

.pedago-group {
	margin-bottom: 1.5rem;
}
.pedago-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-4);
	font-weight: 700;
	margin-bottom: 0.7rem;
}
.pedago-label i { color: var(--accent); margin-right: 0.35rem; }
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
}
.pill {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 500;
	background: #f3f5f8;
	color: #354051;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	line-height: 1.3;
}
.pill-info {
	background: color-mix(in srgb, var(--accent) 8%, white);
	color: var(--accent);
}
.pill-info:hover { background: color-mix(in srgb, var(--accent) 14%, white); }

/* ---------------------------------------------------------------------------
 * Indicateurs de satisfaction (étoiles + section dédiée)
 * --------------------------------------------------------------------------- */

/* Étoiles : superposition d'une rangée de fond (gris) et d'une rangée de
   premier plan (couleur univers) clippée en largeur par --fill (0-100). */
.rating-stars {
	position: relative;
	display: inline-block;
	font-family: Arial, sans-serif; /* glyphes ★ uniformes cross-OS */
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.rating-stars-bg {
	color: #d8dde4;
}
.rating-stars-fg {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: var(--fill, 0%);
	color: var(--accent);
}

/* Variante meta (ligne entête fiche formation). */
.meta-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--ink-3);
}
.meta-rating:hover { color: var(--accent); }
.meta-rating:hover .rating-value { color: var(--accent); }
.meta-rating .rating-stars { font-size: 1.05em; }
.meta-rating .rating-value { font-weight: 600; color: var(--ink-2); font-size: 0.98em; }
.meta-rating .rating-value .sur5 { font-weight: 400; }
.meta-rating .rating-count { color: var(--ink-4); font-size: 0.85em; }

/* Variante grande (note globale dans la section dédiée). */
.rating-stars-lg { font-size: 1.85rem; }

/* Variante moyenne (note globale sidebar certif). */
.rating-stars-md { font-size: 1.4rem; }

/* Bloc satisfaction dans la sidebar des fiches certificat.
   Note globale très visible en haut, détail par critère en accordéon. */
.satisfaction-side-global {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.65rem;
	margin-bottom: 0.55rem;
}
.satisfaction-side-value { color: var(--ink-2); font-size: 1.05rem; line-height: 1; }
.satisfaction-side-value strong { color: var(--accent); font-size: 1.15rem; font-weight: 600; }
.satisfaction-side-value .sur5 { color: var(--ink-4); font-size: 0.85rem; margin-left: 0.1rem; font-weight: 400; }
.satisfaction-side-count {
	color: var(--ink-4);
	font-size: 0.82rem;
}
.satisfaction-side-details > summary {
	cursor: pointer;
	list-style: none;
	color: var(--ink-3);
	font-size: 0.85rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0;
	user-select: none;
}
.satisfaction-side-details > summary::-webkit-details-marker { display: none; }
.satisfaction-side-details > summary:hover { color: var(--accent); }
.satisfaction-side-details > summary .bi { transition: transform 0.2s ease; }
.satisfaction-side-details[open] > summary .bi { transform: rotate(180deg); }
.satisfaction-side-intro {
	margin: 0.6rem 0 1.05rem;
	color: var(--ink-3);
	font-size: 0.82rem;
	line-height: 1.45;
}
.satisfaction-side-intro strong { color: var(--ink-2); font-weight: 600; }
.satisfaction-side-list {
	margin: 0.5rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.75rem;
	font-size: 0.88rem;
}
/* Alignement par la baseline : les uppercase labels et le glyphe ★ Arial
   ne sont pas centrés au même endroit dans leur bounding box (le ★ sit bas,
   les caps sit haut). Aligner sur la baseline donne un rendu cohérent. */
.satisfaction-side-list { align-items: baseline; }
.satisfaction-side-list dt {
	color: var(--ink-3);
	font-weight: 500;
}
.satisfaction-side-list dd {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	justify-self: end;
}
.satisfaction-side-list dd .rating-stars { font-size: 0.92rem; }
.satisfaction-side-list dd .rating-value { color: var(--ink-2); font-weight: 600; font-size: 0.88rem; }
.satisfaction-side-list dd .rating-value .sur5 { font-weight: 400; color: var(--ink-4); }

/* Section "Indicateurs de satisfaction" dans le main content. */
.fiche-satisfaction .satisfaction-intro {
	color: var(--ink-3);
	margin-bottom: 1.5rem;
}

.satisfaction-global {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.25rem;
	padding: 1.1rem 1.4rem;
	background: color-mix(in srgb, var(--accent) 5%, white);
	border-radius: 10px;
	margin-bottom: 1.5rem;
}
.satisfaction-global-label {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-4);
	font-weight: 600;
	flex: 1 1 100%;
}
.satisfaction-global-stars { line-height: 1; }
.satisfaction-global-value { font-size: 1.4rem; color: var(--ink-2); }
.satisfaction-global-value strong { color: var(--accent); font-size: 1.6rem; font-weight: 700; }
.satisfaction-global-value .sur5 { color: var(--ink-4); font-size: 1rem; margin-left: 0.1rem; }

.satisfaction-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem 1.5rem;
}
@media (max-width: 575.98px) {
	.satisfaction-grid { gap: 0.6rem 1rem; }
}
.satisfaction-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem 0;
}
.satisfaction-card-label {
	font-size: 0.92rem;
	color: var(--ink-3);
}
.satisfaction-card-stars {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.satisfaction-card .rating-stars { font-size: 1.05rem; }
.satisfaction-card .rating-value { color: var(--ink-2); font-weight: 600; font-size: 0.95rem; }
.satisfaction-card .rating-value .sur5 { font-weight: 400; }

/* Icône info-circle accolée aux labels (tooltip Bootstrap). Partagée par la
   section fiche formation et le bloc sidebar certificat. Le `cursor: help` est
   posé sur le wrapper [data-bs-toggle="tooltip"] pour que tout le label (texte
   + icône) déclenche le curseur "?". */
[data-bs-toggle="tooltip"] { cursor: help; }
.satisfaction-info,
.satisfaction-side-info {
	font-size: 0.85em;
	color: var(--ink-4);
	margin-left: 0.3rem;
	vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
 * Sidebar
 * --------------------------------------------------------------------------- */

.fiche-sidebar { font-size: 0.93rem; }

/* Conteneur sticky : englobe la box sidebar ET le cross-sell « Découvrez aussi »
   posé en dessous, pour qu'ils défilent ensemble (sinon le cross-sell, hors du
   flux sticky, est masqué par la box épinglée au scroll). */
.sidebar-sticky-wrap {
	position: sticky;
	top: 1.25rem;
	margin-top: 2.5rem;
}
@media (max-width: 991.98px) {
	.sidebar-sticky-wrap { position: static; }
}

.sidebar-sticky {
	padding: 0 1.25rem 1.7rem;
	background: color-mix(in srgb, var(--accent) 2.5%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 16%, white);
	border-top: 3px solid var(--accent);
	border-radius: 0.55rem;
}

/* CTA card épurée : pas de fond coloré, juste hiérarchie typographique.
   La border accent du haut est portée par le container `.sidebar-sticky`. */
.cta-card {
	padding: 1.25rem 0 1.25rem;
	margin-bottom: 0.75rem;
}
.cta-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-4);
	font-weight: 700;
	margin-bottom: 0.45rem;
}
.cta-date {
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ink-1);
	line-height: 1.35;
	margin-bottom: 0.55rem;
}
.cta-date i { color: var(--accent); margin-right: 0.25rem; }
/* Volume horaire des diplômes externes (DiFiQ/DipAM) : durée en couleur d'univers. */
.cta-date-volume { color: var(--accent); }
.cta-meta {
	font-size: 0.88rem;
	color: var(--ink-3);
}
.cta-meta i { color: var(--accent); margin-right: 0.2rem; }
/* Lignes meta de la cta-card (lieu / calendrier / session complète) : même
   espacement vertical entre elles. */
.cta-meta + .cta-meta,
.cta-meta + .cta-complete,
.cta-date + .cta-complete { margin-top: 0.35rem; }
.cta-deadline {
	margin-top: 0.8rem;
	font-size: 0.82rem;
	color: var(--ink-3);
	line-height: 1.4;
}
.cta-deadline > i { color: var(--accent); margin-right: 0.25rem; }
.cta-deadline strong { color: var(--accent); font-weight: 600; }
.cta-deadline-info { margin-left: 0.35rem; color: var(--ink-4); cursor: help; font-size: 0.9em; }
.cta-deadline-info:hover { color: var(--accent); }
.cta-card .btn {
	padding-top: 0.52rem;
	padding-bottom: 0.52rem;
}
/* Prix dans le CTA card — style mutualisé fiches formation & certificat
   (taille + couleur accent). Le label « (non soumis à la TVA) » reste discret
   sur sa propre ligne. */
.cta-price {
	margin-top: 1.75rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--accent);
	line-height: 1.2;
}
.cta-price strong {
	color: var(--ink-1);
	font-weight: 600;
	font-size: 1.05rem;
}
/* Préfixé `.fiche-sidebar` pour battre `.fiche-sidebar .small` (1.190). */
.fiche-sidebar .cta-price .small {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.83rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--accent) 65%, white) !important;
}
/* Diplômes externes : 2 paliers de tarif sous le label « Tarifs ». Le prix reprend
   exactement le look .cta-price des formations courtes (accent univers, 1.05rem,
   weight 500) ; descriptif en italique discret au-dessus. */
.diplome-tarif { margin-bottom: 0; line-height: 1.3; }
.diplome-tarif-note {
	display: block;
	font-size: 0.83rem;
	font-style: italic;
	color: var(--ink-3);
}
.diplome-tarif-prix {
	display: block;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--accent);
}

/* Cross-sell « Découvrez aussi » à la suite de la sidebar (diplômes externes →
   ALM), hors conteneur sticky : version compacte du card grille — mini-visuel +
   corps texte + lien fléché. */
.cross-sell { margin-top: 2.5rem; }
.cross-sell-eyebrow {
	display: block;
	padding: 0.85rem 1.1rem;
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-4);
	border-bottom: 1px solid #d6dae2;
}
.cross-sell-card {
	display: block;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(20, 30, 55, 0.06), 0 10px 24px -18px rgba(20, 30, 55, 0.4);
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.cross-sell-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent) 40%, #dcdfe6);
	box-shadow: 0 2px 4px rgba(20, 30, 55, 0.1), 0 12px 26px -16px rgba(20, 30, 55, 0.55);
}
.cross-sell-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: color-mix(in srgb, var(--accent) 10%, #fff);
	/* Filet d'accent entre visuel et corps, comme les cartes de /certificats. */
	border-bottom: 3px solid var(--accent);
}
.cross-sell-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cross-sell-media-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--accent) 55%, #fff);
	font-size: 2rem;
}
.cross-sell-body { display: block; padding: 0.95rem 1rem 1rem; }
.cross-sell-univers {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}
.cross-sell-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--accent);
}
.cross-sell-title {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink-1);
}
.cross-sell-hook {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.84rem;
	line-height: 1.35;
	color: var(--ink-3);
}
.cross-sell-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.65rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--accent);
}
.cross-sell-card:hover .cross-sell-cta i { transform: translateX(3px); }
.cross-sell-cta i { transition: transform 0.2s ease; }
/* Spécifique certificat : quand une date limite de candidature est affichée
   au-dessus du prix, elle porte le séparateur visuel et son padding suffit. */
.page-fiche-certificat .cta-deadline {
	padding-bottom: 0.95rem;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, white);
}

/* Bandeau « Réunion d'information » (sous le hero + rappel en bas de fiche).
   Palette verte fixe, identique sur tous les certificats et INDÉPENDANTE de
   --accent (univers) : le CTA doit se détacher de l'accroche et des autres
   éléments accentués. Vert tendre, pas flashy. Masqué à l'impression. */
.reunion-banner {
	--reunion-green: #3f8f5f;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1.75rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--reunion-green) 30%, white);
	border-left: 3px solid var(--reunion-green);
	border-radius: 7px;
	background: color-mix(in srgb, var(--reunion-green) 9%, white);
}
.reunion-banner-text {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink-2);
	font-size: 0.98rem;
}
.reunion-banner-text strong { color: var(--ink-1); }
.reunion-banner-icon { color: var(--reunion-green); font-size: 1.15rem; }
/* Séparateur « — » entre l'intitulé et la date, en inline (desktop). Retiré sur
   mobile où titre et date passent chacun sur leur ligne (cf. media query). */
.reunion-banner-when::before { content: "\2014\00a0"; }
/* Le jour de semaine cède la place à une icône calendrier en smartphone, pour
   que la date tienne sur une ligne à côté du lien S'inscrire. Les deux variantes
   sont dans le HTML du bandeau haut de fiche, on bascule en CSS pour garder
   « lundi » au desktop, où la place ne manque pas. */
.reunion-banner-weekday-alt {
	display: none;
	/* S'ajoute à l'espace typographique qui suit l'icône dans le HTML. */
	margin-right: 0.2rem;
	color: var(--reunion-green);
	font-size: 0.92em;
}
.reunion-banner-btn {
	white-space: nowrap;
	flex-shrink: 0;
	--bs-btn-bg: var(--reunion-green);
	--bs-btn-border-color: var(--reunion-green);
	--bs-btn-hover-bg: color-mix(in srgb, var(--reunion-green) 85%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--reunion-green) 85%, black);
	--bs-btn-active-bg: color-mix(in srgb, var(--reunion-green) 72%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--reunion-green) 72%, black);
}
/* Smartphone : bandeau réunion empilé (icône masquée, intitulé + date sur deux
   lignes). Le texte hérite de l'alignement du conteneur — gauche en haut de
   fiche, centré pour le rappel bas de fiche (.certif-calendly-reunion applique
   déjà text-align:center en mobile).
   En haut de fiche seulement, le bandeau devient une carte cliquable calquée sur
   le CTA « Prochaine session » juste au-dessus : bordure uniforme (le filet
   épais à gauche disparaît) et bouton dépouillé en simple lien. Ces trois blocs
   empilés — CTA session, réunion, pills de nav — saturent sinon le haut de page.
   Le rappel de bas de fiche garde son bouton plein. */
@media (max-width: 575.98px) {
	/* Carte en grille : l'intitulé occupe la 1re ligne, la date et le lien se
	   partagent la 2de, alignés sur leur ligne de base. */
	.reunion-banner {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: 0.3rem 0.75rem;
		padding: 0.75rem 0.9rem 0.75rem 1rem;
		border-left-width: 1px;
		border-left-color: color-mix(in srgb, var(--reunion-green) 30%, white);
		border-radius: 12px;
	}
	.reunion-banner-icon { display: none; }
	.reunion-banner-text {
		display: block;
		line-height: 1.4;
	}
	.reunion-banner-title,
	.reunion-banner-when { display: block; }
	.reunion-banner-when::before { content: none; }
	.reunion-banner-weekday { display: none; }
	.reunion-banner-weekday-alt { display: inline-block; }
	/* `display: contents` sort .reunion-banner-text du flux pour que ses enfants
	   deviennent des cases de la grille du bandeau (il ne transmet plus que ses
	   styles hérités : couleur, corps, interlignage). */
	.reunion-banner .reunion-banner-text { display: contents; }
	.reunion-banner .reunion-banner-title { grid-column: 1 / -1; }
	.reunion-banner .reunion-banner-when { grid-column: 1; }
	.reunion-banner .reunion-banner-btn {
		grid-column: 2;
		padding: 0;
		font-size: 0.92rem;
		font-weight: 600;
		--bs-btn-border-width: 0;
		--bs-btn-color: var(--reunion-green);
		--bs-btn-bg: transparent;
		--bs-btn-border-color: transparent;
		--bs-btn-hover-color: var(--reunion-green);
		--bs-btn-hover-bg: transparent;
		--bs-btn-hover-border-color: transparent;
		--bs-btn-active-color: var(--reunion-green);
		--bs-btn-active-bg: transparent;
		--bs-btn-active-border-color: transparent;
	}
	/* Toute la carte ouvre la modale : le ::after du bouton la recouvre et lui
	   renvoie le clic (principe de .stretched-link Bootstrap). */
	.reunion-banner .reunion-banner-btn::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}

.sidebar-block {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--bs-border-color);
}
.sidebar-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
/* Smartphone : pas de « Télécharger en PDF » sur la fiche formation (la classe
   n'est posée que là — les certificats gardent le leur). Le bloc étant le dernier
   de la sidebar, c'est son prédécesseur qui porte le filet du dessus : il faut le
   lui retirer, sinon un séparateur reste suspendu dans le vide. */
@media (max-width: 767.98px) {
	.fiche-sidebar .sidebar-block-pdf { display: none; }
	/* Le filet part, mais pas tout l'espace : ce bloc termine la sidebar une fois
	   le PDF masqué, il lui faut de quoi respirer avant la suite de la page. */
	.fiche-sidebar .sidebar-block:has(+ .sidebar-block-pdf) {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 1.25rem;
	}
}
.sidebar-block-no-divider { border-bottom: none; }
.sidebar-block-divider-top { border-top: 1px solid var(--bs-border-color); padding-top: 1.5rem; }
/* Évite le double filet si le bloc précédent a déjà un border-bottom. */
.sidebar-block:not(.sidebar-block-no-divider) + .sidebar-block-divider-top { border-top: none; padding-top: 0; }
/* Fiches certificat : sidebar sans séparateurs (l'espacement vertical des
   blocs suffit à les distinguer, plus aérien sans les filets gris). */
.page-fiche-certificat .sidebar-block { border-bottom: none; }

/* Bootstrap `.small` = 0.875em — un poil trop court pour le confort de lecture
   dans la sidebar (intervenants, logiciels, biblio, infos pratiques). Remonté
   légèrement, scoped à la sidebar pour ne pas affecter le reste du site. */
.fiche-sidebar .small { font-size: 0.93em; }

.sidebar-label {
	font-size: 0.73rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-4);
	font-weight: 700;
	margin-bottom: 0.65rem;
}
.sidebar-label-badge {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 7%, #f5f5f5);
	color: var(--ink-2);
	margin-bottom: 1.1rem;
}
/* Sidebar « Informations pratiques » : en smartphone, la pilule devient le
   bouton d'un accordéon (le bloc est long et repousse le CTA PDF loin sous le
   pli). Sur desktop le <details> reste figé ouvert — la pilule n'est qu'un
   intitulé, d'où le chevron masqué et le marqueur natif neutralisé partout. */
.infos-summary { list-style: none; }
.infos-summary::-webkit-details-marker { display: none; }
.infos-chevron { display: none; }
@media (max-width: 767.98px) {
	.infos-details > .infos-summary {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		cursor: pointer;
		font-size: 0.78rem;
		padding: 0.45rem 0.9rem;
	}
	/* Replié : pas de marge basse en suspens sous la pilule. */
	.infos-details:not([open]) > .infos-summary { margin-bottom: 0; }
	.infos-chevron {
		display: inline-block;
		font-size: 0.9em;
		color: var(--ink-4);
		transition: transform .2s ease;
	}
	.infos-details[open] .infos-chevron { transform: rotate(180deg); }
}

/* Badge "Session garantie" (vert) */
.badge-garantie {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.15rem;
	margin-bottom: 0.5rem;
	padding: 0.32rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1f6f4a;
	background: #e7f6ed;
	border-radius: 999px;
	line-height: 1;
}
.badge-garantie i { color: #1f6f4a; margin: 0; }
.badge-garantie-sm {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 0.62rem;
	padding: 0.22rem 0.45rem;
}

/* État "session complète" dans le CTA : sous les dates, même taille que le
   lieu (cta-meta), couleur rouge atténuée. */
.cta-complete {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: #c0392b;
}
.cta-complete i { color: #c0392b; }

/* Certificats — mini-cards pour "Autres sessions" dans la sidebar. Reprend
   le vocabulaire du `.cta-card` (date en gras, lieu/calendrier en meta, lien
   candidature) avec un encadré plus léger. État `is-complete` : grisé +
   barré + tag remplaçant le CTA. */
.sessions-mini-cards {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.sessions-mini-card {
	position: relative;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
	border-radius: 0.5rem;
	padding: 0.75rem 0.9rem;
	background: #fff;
}
/* Badge "Garantie" (formation courte) positionné en haut-droite, aligné
   verticalement avec la ligne date. La date reçoit un padding-right pour
   éviter qu'elle ne passe sous le badge sur les libellés longs. */
.sessions-mini-card-badge {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	margin: 0;
}
.sessions-mini-card:has(.sessions-mini-card-badge) .sessions-mini-card-date {
	padding-right: 4.5rem;
}
.sessions-mini-card-date {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink-1);
}
.sessions-mini-card-date i { color: var(--accent); margin-right: 0.25rem; }
.sessions-mini-card-meta {
	font-size: 0.83rem;
	color: var(--ink-3);
	margin-top: 0.2rem;
}
.sessions-mini-card-meta i { color: var(--ink-4); margin-right: 0.25rem; }
.sessions-mini-card-deadline { color: var(--ink-4); }
.sessions-mini-card-deadline strong { color: var(--ink-3); font-weight: 600; }
.sessions-mini-card-meta a { color: var(--ink-2); }
.sessions-mini-card-meta a:hover { color: var(--accent); }
.sessions-mini-card-calendrier i,
.sessions-mini-card-calendrier a { color: var(--accent); }
.sessions-mini-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
}
.sessions-mini-card-cta:hover { text-decoration: underline; color: var(--accent); }
.sessions-mini-card-complete {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #c0392b;
}
.sessions-mini-card-complete i { color: #c0392b; }
.sessions-mini-card.is-complete {
	background: #f3f4f8;
	border-color: #e0e3ea;
}
.sessions-mini-card.is-complete .sessions-mini-card-date {
	color: var(--ink-4);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.sessions-mini-card.is-complete .sessions-mini-card-date i { opacity: 0.5; }

/* Détails session (texte free-form, ex : "8 février journée + 9 février matin") */
.session-details {
	margin-top: 0.4rem;
	color: var(--ink-3);
	font-style: italic;
	font-size: 0.85rem;
}
.session-details p { margin-bottom: 0.3rem; }
.session-details p:last-child { margin-bottom: 0; }

.intervenant + .intervenant {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--bs-border-color);
}
.intervenant-name {
	font-weight: 600;
	color: var(--ink-1);
	margin-bottom: 0.2rem;
}
.intervenant-bio {
	font-size: 0.85rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
}
.intervenant-bio > p { display: inline; margin: 0; }
.intervenant-bio > p + p::before { content: ' '; }
.intervenant-bio.expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}
.intervenant-bio.expanded > p {
	display: block;
	margin-bottom: 0.4rem;
}
.intervenant-bio.expanded > p:last-of-type {
	display: inline;
	margin-bottom: 0;
}
.intervenant-bio-toggle {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 0 0 2rem;
	font-size: 0.78rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--accent);
	cursor: pointer;
	background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 2.5%, white) 30%);
	border: 0;
}
.intervenant-bio.expanded .intervenant-bio-toggle {
	position: static;
	display: inline;
	padding-left: 0;
	background: none;
}
.intervenant-bio-toggle:hover {
	color: color-mix(in srgb, var(--accent) 75%, black);
	text-decoration: underline;
}

.fiche-sidebar dl { margin-bottom: 0; }
.fiche-sidebar dt {
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-4);
	margin-top: 0.85rem;
}
.fiche-sidebar dt:first-child { margin-top: 0; }
.fiche-sidebar dd { margin-bottom: 0; color: var(--ink-3); }

/* ---------------------------------------------------------------------------
 * "more" — bloc encadré subtil
 * --------------------------------------------------------------------------- */

.fiche-more {
	background: var(--bg-soft);
	border-radius: 12px;
	padding: 1.75rem 1.75rem 1.25rem;
}
/* Smartphone : les deux blocs à fond teinté de la fiche formation (satisfaction
   globale plus haut, « pour aller plus loin » ici) prennent un filet gris. Le
   fond seul suffisait au desktop, où la marge blanche autour les posait ; sur un
   écran étroit ils vont d'un bord à l'autre et leurs limites se perdent.
   Gris d'un cran plus foncé que --bs-border-color, en dur : ce token sert aux
   cards et séparateurs de tout le site, qu'on ne veut pas assombrir. */
@media (max-width: 767.98px) {
	.satisfaction-global,
	.fiche-more { border: 1px solid #dee2e9; }
}
.fiche-more .section-title { margin-top: 0; }
.fiche-more .section-title i { margin-right: 0.25rem; }
/* Liste : puces alignées au bord gauche du bloc (comme les paragraphes),
   texte indenté après la puce, lignes wrappées alignées sous la 1re ligne. */
.fiche-more .rich-text ul,
.fiche-more .rich-text ol {
	list-style: none;
	padding-left: 0;
}
.fiche-more .rich-text li {
	position: relative;
	padding-left: 1.1em;
}
.fiche-more .rich-text ul > li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}
.fiche-more .rich-text ol { counter-reset: more-li; }
.fiche-more .rich-text ol > li { counter-increment: more-li; }
.fiche-more .rich-text ol > li::before {
	content: counter(more-li) ".";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 600;
}
.fiche-more .rich-text li > p { margin: 0 0 0.3rem; }

/* ---------------------------------------------------------------------------
 * Listing univers — hero band + sections sous-univers + lignes-cards
 * --------------------------------------------------------------------------- */

.univers-hero {
	background-color: color-mix(in srgb, var(--accent) 92%, black);
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
		radial-gradient(ellipse 120% 140% at 10% -10%,
			color-mix(in srgb, var(--accent) 88%, white) 0%,
			transparent 60%),
		linear-gradient(135deg,
			var(--accent) 0%,
			color-mix(in srgb, var(--accent) 88%, black) 60%,
			color-mix(in srgb, var(--accent) 75%, black) 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 70%, black);
	padding: 1.5rem 0 2.7rem;
	margin-bottom: 2.25rem;
	color: #fff;
}
.univers-breadcrumb { margin-bottom: 1.85rem; }
.univers-hero .breadcrumb {
	--bs-breadcrumb-divider-color: rgba(255,255,255,0.55);
	--bs-breadcrumb-item-active-color: rgba(255,255,255,0.85);
}
.univers-hero .breadcrumb a {
	color: rgba(255,255,255,0.75);
}
.univers-hero .breadcrumb a:hover {
	color: #fff;
}
.univers-title {
	font-size: clamp(1.775rem, 1.55vw + 1.125rem, 2.275rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin-bottom: 0;
	color: #fff;
}
.univers-title-prefix {
	font-weight: 300;
	color: rgba(255,255,255,0.55);
}
.univers-hero .title-separator {
	margin: 0.9rem 0 1.1rem;
	background: rgba(255,255,255,0.7);
}
.univers-desc {
	font-size: 1.22rem;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255,255,255,0.92);
	max-width: 56rem;
	margin-bottom: 0;
}
.univers-desc > :first-child { margin-top: 0; }
.univers-desc > :last-child  { margin-bottom: 0; }
@media (max-width: 575px) {
	.univers-desc { font-size: 1.07rem; }
}

.univers-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.45rem;
	margin-top: 1.8rem;
	margin-bottom: 0.6rem;
}
.univers-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 500;
	color: #fff;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.35);
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	transition: all .15s ease;
}
.univers-chip:hover {
	background: #fff;
	color: var(--accent);
	border-color: #fff;
	text-decoration: none;
}

/* Chip "X thèmes en intra" — différenciée : remplie blanc, icône + flèche */
.univers-chip-intra {
	background: #fff;
	color: var(--accent);
	border-color: #fff;
	padding-left: 0.65rem;
	padding-right: 0.65rem;
	gap: 0.35rem;
	font-weight: 600;
	box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
.univers-chip-intra > i.bi-buildings {
	font-size: 0.95rem;
	margin-right: 0.1rem;
	opacity: 0.9;
}
.univers-chip-intra .intra-chip-arrow {
	font-size: 0.85rem;
	margin-left: 0.15rem;
	transition: transform .15s ease;
}
.univers-chip-intra:hover {
	background: #fff;
	color: var(--accent);
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}
.univers-chip-intra:hover .intra-chip-arrow {
	transform: translateX(3px);
}

.univers-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.8rem;
	margin-bottom: 0.6rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: #fff;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.35);
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	transition: all .15s ease;
}
.univers-back:hover {
	background: #fff;
	color: var(--accent);
	border-color: #fff;
	text-decoration: none;
}

/* Encart certificat associé */
.certif-cards { margin-bottom: 3.5rem; }
/* Espace hero ↔ bandeaux : padding (pas margin, qui collapse avec la marge
   basse du hero et resterait sans effet). S'ajoute aux 2.25rem du hero. */
.container:has(> .certif-cards) { padding-top: 1rem; }
.certif-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 767px) {
	.certif-cards-grid { grid-template-columns: 1fr; }
}
/* Bandeau certifiant : décline le style des cartes éditoriales à visuel
   (cf. .home-une-card) en format horizontal — visuel à gauche, contenu à droite.
   Solo => pleine largeur (visuel plus discret) ; à deux => grille côte à côte. */
.certif-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 144px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--accent) 22%, #dcdfe6);
	box-shadow: 0 1px 2px rgba(20, 30, 55, 0.06), 0 14px 32px -22px rgba(20, 30, 55, 0.4);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	--card-accent: var(--accent);
}
.certif-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent) 38%, #dcdfe6);
	box-shadow: 0 2px 4px rgba(20, 30, 55, 0.1), 0 22px 46px -24px color-mix(in srgb, var(--accent) 60%, rgba(20, 30, 55, 0.5));
}
.certif-card-wide { min-height: 168px; }

/* Visuel à gauche : crop centré, filet d'accent vertical à la jonction avec le texte. */
.certif-card-media {
	position: relative;
	flex: 0 0 30%;
	overflow: hidden;
	background: var(--bg-soft);
}
.certif-card-wide .certif-card-media { flex-basis: 24%; }
.certif-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform .45s ease;
}
.certif-card:hover .certif-card-img { transform: scale(1.045); }
.certif-card-media::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 3px;
	background: var(--accent);
}

.certif-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.95rem 1.4rem;
}
.certif-card-head {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}
.certif-card-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: color-mix(in srgb, var(--accent) 70%, black);
}
.certif-card-label .bi { font-size: 0.9rem; }
.certif-card-body .certif-card-title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.005em;
	color: var(--ink-1);
	transition: color .2s ease;
}
.certif-card:hover .certif-card-title { color: var(--accent); }
.certif-card-pitch {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ink-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.certif-card-body .certif-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.certif-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.certif-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--accent) 78%, black);
	background: color-mix(in srgb, var(--accent) 7%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 20%, white);
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}
.certif-pill .bi { font-size: 0.85rem; opacity: 0.85; }
.certif-card-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #fff;
	background: var(--accent);
	font-weight: 600;
	font-size: 0.88rem;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: gap .14s ease, background .14s ease;
}
.certif-card:hover .certif-card-cta {
	gap: 0.6rem;
	background: color-mix(in srgb, var(--accent) 86%, black);
}
@media (max-width: 575px) {
	/* Visuel masqué en mobile : on ne garde que le corps de la card. */
	.certif-card, .certif-card-wide { flex-direction: column; min-height: 0; }
	.certif-card-media, .certif-card-wide .certif-card-media { display: none; }
	.certif-card-body { padding: 1.2rem 1.25rem 1.3rem; }
	.certif-card-body .certif-card-title { font-size: 1.14rem; }
	.certif-card-cta { width: 100%; justify-content: center; }
}

.univers-body { padding-top: 2rem; padding-bottom: 4rem; }
.container:has(> .certif-cards) + .univers-body { padding-top: 0; }

/* Section par sous-univers */
.su-section { margin-bottom: 3rem; }
.su-section:last-child { margin-bottom: 0; }
.su-header {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding-bottom: 0.6rem;
	margin-bottom: 0.4rem;
	border-bottom: 2px solid color-mix(in srgb, var(--accent) 35%, white);
}
.su-header:has(.su-logo) {
	min-height: 90px;
	padding-bottom: 1.2rem;
}
.su-header:has(.su-badge) {
	gap: 0.85rem;
}
.su-title { flex: 1 1 auto; min-width: 0; }
.su-count {
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-4);
	font-variant-numeric: tabular-nums;
}
.su-badge {
	flex: 0 0 auto;
	min-width: 52px;
	height: 52px;
	padding: 0 0.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--accent);
	background: #f1f3f5;
	border-radius: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.su-badge-icon {
	width: 52px;
	min-width: 0;
	padding: 0;
	font-size: 1.25rem;
}
.su-title {
	font-size: 1.32rem;
	font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.01em;
	margin: 0;
}
.su-title i {
	opacity: 0.7;
	margin-right: 0.35rem;
	font-size: 0.92em;
}
@media (max-width: 575px) {
	.su-badge { min-width: 38px; height: 38px; font-size: 0.95rem; border-radius: 8px; }
	.su-header:has(.su-badge) { gap: 0.65rem; }
	/* Bandeau sous-univers épuré en mobile : on masque le compteur de formations. */
	.su-count { display: none; }
}
.su-logo {
	height: auto;
	display: block;
}

/* En-tête « bandeau accent plein » — variante numérotée (univers sans logos).
   Scopé via .su-header-banded : n'affecte jamais les univers à logos (langages-
   logiciels & co), qui gardent l'en-tête sobre logo / badge-icône. */
.su-header.su-header-banded {
	gap: 1rem;
	min-height: 0;
	padding: 0.75rem 1.1rem 0.75rem 0.85rem;
	margin-bottom: 1.15rem;
	border-bottom: 0;
	border-radius: 14px;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--accent) 14%, white),
		color-mix(in srgb, var(--accent) 5%, white));
	border: 1px solid color-mix(in srgb, var(--accent) 20%, white);
}
.su-header-banded .su-badge {
	color: #fff;
	background: var(--accent);
	box-shadow: 0 6px 15px -8px color-mix(in srgb, var(--accent) 85%, transparent);
}
.su-header-banded .su-title {
	color: color-mix(in srgb, var(--accent) 84%, black);
}
.su-header-banded .su-count {
	color: color-mix(in srgb, var(--accent) 62%, black);
	background: color-mix(in srgb, var(--accent) 9%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 22%, white);
	padding: 0.24rem 0.62rem;
	border-radius: 999px;
}

/* Liste de formations (lignes-cards) */
.formations-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.formation-row {
	border-bottom: 1px solid #d9dde3;
}
.formation-row:last-child { border-bottom: none; }
.formation-row-link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 1.5rem;
	padding: 0.95rem 0.5rem 0.95rem 0.85rem;
	border-left: 3px solid transparent;
	color: var(--ink-2);
	transition: all .12s ease;
}
.formation-row-link:hover {
	background: color-mix(in srgb, var(--accent) 5%, white);
	border-left-color: var(--accent);
	text-decoration: none;
}
.formation-row-main { min-width: 0; }
.formation-row-title {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--ink-1);
	line-height: 1.3;
	margin-bottom: 0.3rem;
}
.formation-row-link:hover .formation-row-title { color: var(--accent); }
.formation-row-new {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
	border-radius: 4px;
	padding: 0.08rem 0.35rem;
	margin-left: 0.45rem;
	vertical-align: middle;
}
.formation-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: 0.9rem;
	color: var(--ink-4);
}
.formation-row-meta i {
	color: var(--accent);
	margin-right: 0.2rem;
	opacity: 0.85;
}
.formation-row-sessions {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-align: right;
}
.session-line {
	font-size: 0.92rem;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.session-line i {
	color: var(--accent);
	margin-right: 0.25rem;
}
.session-line.is-muted { color: var(--ink-5); font-style: italic; }
.session-line.is-muted i { opacity: 0.5; }
.session-line.is-complete { color: #c0392b; }
.session-line.is-complete i { color: #c0392b; }
.session-line.is-garantie { color: #1f6f4a; }
.session-line.is-garantie i { color: #1f6f4a; }

@media (max-width: 575px) {
	.formation-row-link {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
	.formation-row-sessions { text-align: left; }
	.certif-cards-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Page "Thèmes en intra-entreprise"
 * --------------------------------------------------------------------------- */

.univers-desc-link {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.45);
	text-underline-offset: 3px;
}
.univers-desc-link:hover {
	color: #fff;
	text-decoration-color: #fff;
}

/* CTA "formation sur-mesure" */
.intra-cta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 1.75rem;
	margin-bottom: 2.5rem;
	background: color-mix(in srgb, var(--accent) 6%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 28%, white);
	border-radius: 14px;
}
.intra-cta-icon {
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.85rem;
	color: var(--accent);
	background: #fff;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
}
.intra-cta-body { min-width: 0; }
.intra-cta-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--ink-4);
	margin-bottom: 0.2rem;
}
.intra-cta-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink-1);
	line-height: 1.25;
	margin-bottom: 0.35rem;
}
.intra-cta-text {
	font-size: 0.95rem;
	color: var(--ink-3);
	line-height: 1.5;
}
.intra-cta-actions {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.intra-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: all .15s ease;
}
.intra-cta-btn:hover {
	background: color-mix(in srgb, var(--accent) 85%, black);
	border-color: color-mix(in srgb, var(--accent) 85%, black);
	color: #fff;
	text-decoration: none;
}
.intra-cta-btn-ghost {
	background: transparent;
	color: var(--accent);
}
.intra-cta-btn-ghost:hover {
	background: color-mix(in srgb, var(--accent) 12%, white);
	color: var(--accent);
}

@media (max-width: 767px) {
	.intra-cta {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.intra-cta-icon { justify-self: center; }
	.intra-cta-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* Teaser intra en bas de page univers */
.intra-teaser {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.15rem 1.5rem;
	margin-top: 2.5rem;
	background: color-mix(in srgb, var(--accent) 4%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 22%, white);
	border-radius: 14px;
	color: var(--ink-1);
	transition: all .15s ease;
}
.intra-teaser:hover {
	background: color-mix(in srgb, var(--accent) 8%, white);
	border-color: color-mix(in srgb, var(--accent) 40%, white);
	text-decoration: none;
}
.intra-teaser-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.45rem;
	color: var(--accent);
	background: #fff;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--accent) 28%, white);
}
.intra-teaser-body { flex: 1 1 auto; min-width: 0; }
.intra-teaser-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--ink-4);
	margin-bottom: 0.15rem;
}
.intra-teaser-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink-1);
	line-height: 1.3;
}
.intra-teaser-pitch {
	font-size: 0.9rem;
	color: var(--ink-3);
	margin-top: 0.15rem;
}
.intra-teaser-cta {
	flex: 0 0 auto;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}
@media (max-width: 575px) {
	.intra-teaser { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}

/* Accordéons thèmes intra */
.intra-list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 1.1rem;
}
.intra-item {
	--intra-bg: #f4f5f7;
	--intra-bg-active: #e9ebef;
	background: var(--intra-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 10px;
	overflow: hidden;
	transition: background .12s ease, border-color .15s ease, box-shadow .15s ease;
	scroll-margin-top: 1.2rem;
}
.intra-item:hover {
	background: var(--intra-bg-active);
}
.intra-item:has(.intra-item-toggle:not(.collapsed)) {
	border-color: color-mix(in srgb, var(--accent) 45%, white);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 15%, white);
}
.intra-item-header { margin: 0; }
.intra-item-toggle {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.95rem 1.15rem;
	background: transparent;
	border: 0;
	text-align: left;
	color: var(--ink-1);
	font: inherit;
	cursor: pointer;
}
.intra-item-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.intra-item-titre {
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink-1);
}
.intra-item-toggle:not(.collapsed) .intra-item-titre { color: var(--accent); }
.intra-item-duree {
	font-size: 0.95rem;
	color: var(--ink-4);
	white-space: nowrap;
}
.intra-item-duree i { margin-right: 0.25rem; opacity: 0.7; }
.intra-item-chevron {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--accent);
	background: var(--intra-bg);
	transition: transform .2s ease, background .12s ease;
}
.intra-item:hover .intra-item-chevron { background: var(--intra-bg-active); }
.intra-item-toggle:not(.collapsed) .intra-item-chevron {
	transform: rotate(180deg);
}
.intra-item-body-wrap {
	border-top: 1px solid var(--bs-border-color);
	background: #fff;
}
.intra-item-body {
	padding: 1.25rem 1.5rem 1.5rem;
}
.intra-section + .intra-section { margin-top: 1.5rem; }
.intra-section-label {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 0.65rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, white);
}

@media (max-width: 575px) {
	.intra-item-toggle {
		grid-template-columns: 1fr auto;
		gap: 0.6rem 1rem;
	}
	.intra-item-duree { grid-column: 1 / 2; grid-row: 2; }
	.intra-item-chevron { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------------------------------------------------------------------------
 * Voir aussi — bas de fiche formation
 * --------------------------------------------------------------------------- */

.voir-aussi {
	background: var(--bg-soft);
	border-top: 1px solid #e2e5ea;
	padding: 3.2rem 0 6.5rem;
	margin-top: 3rem;
}
body:has(.voir-aussi) .site-footer { margin-top: 0 !important; }
/* Cards éditoriales reprises de la home « préférées » (.home-cards) ; sans
   footer prix/session, on ancre la méta en bas du corps pour aligner les
   lignes de base entre cartes. */
.voir-aussi .formation-card-meta { margin-top: auto; }
/* Moins d'air sous la méta (durée/niveau) jusqu'au bas de la carte.
   Sélecteur en .home-cards pour passer devant `.home-cards .formation-card-body`. */
.voir-aussi .home-cards .formation-card-body { padding-bottom: 0.5rem; }
/* Titre + lede en couleur d'univers (accent), titre un cran plus petit que les
   en-têtes de section home. */
.voir-aussi .section-head-title {
	font-size: clamp(1.35rem, 0.6vw + 1.15rem, 1.6rem);
	color: var(--accent);
}
.voir-aussi .section-head-title-prefix { color: color-mix(in srgb, var(--accent) 62%, white); }
.voir-aussi .section-head-lede { color: var(--accent); }
/* Nom du sous-univers dans le lede : un cran au-dessus du normal, pas plein gras. */
.voir-aussi .section-head-lede strong { font-weight: 600; }
/* Mobile : titre « Voir aussi » nettement plus gros. Placé après la règle de base
   ci-dessus (même spécificité) pour l'emporter. */
@media (max-width: 767.98px) {
	.voir-aussi .section-head-title { font-size: 1.75rem; }
	/* Moins d'air sous le carousel en mobile (la règle de base impose 6.5rem). */
	.voir-aussi { padding-bottom: 4rem; }
}

/* ============================================================
   Catalogue /formations — hero panorama, toolbar, cards animées
   ============================================================ */

/* Page blanche, bandeau d'en-tête (hero + toolbar) gris clair, cartes blanches
   détourées par bordure + ombre accentuée. */
body.page-catalog { background: #fff; }

.catalog-hero {
	position: relative;
	background: #f6f7f9;
	color: var(--ink-2);
	padding: 1.6rem 0 1.4rem;
	margin-bottom: 0;
	overflow: hidden;
}
.catalog-breadcrumb { margin-bottom: 1.6rem; }
.catalog-hero .breadcrumb {
	--bs-breadcrumb-divider-color: var(--ink-5);
	--bs-breadcrumb-item-active-color: var(--ink-3);
}
.catalog-hero .breadcrumb a { color: var(--ink-4); }
.catalog-hero .breadcrumb a:hover { color: var(--ink-1); }

.catalog-title {
	font-size: clamp(1.85rem, 1.6vw + 1.2rem, 2.4rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 0.85rem;
	color: #5e3d5b;
}
.catalog-title-prefix {
	font-weight: 300;
	color: #8a6e85;
}
.catalog-lede {
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--ink-3);
	max-width: 52rem;
	margin: 0;
}

.catalog-toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(246, 247, 249, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid #c9cfd9;
	padding: 1rem 0 1.5rem;
	margin-bottom: 2.4rem;
}
.catalog-toolbar .container {
	display: grid;
	gap: 0.85rem;
}

.catalog-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 0.4rem;
}
.catalog-search > i.bi-search {
	position: absolute;
	left: 1rem;
	color: var(--ink-4);
	font-size: 1.05rem;
	pointer-events: none;
}
#catalog-q {
	width: 100%;
	height: 50px;
	border: 1px solid #d9dde3;
	border-radius: 12px;
	padding: 0 3rem 0 2.85rem;
	font-size: 1rem;
	background: #fff;
	color: var(--ink-1);
	transition: border-color .12s ease, box-shadow .12s ease;
}
#catalog-q:focus {
	outline: none;
	border-color: #99a3b3;
	box-shadow: 0 0 0 4px rgba(80,100,140,0.12);
}
#catalog-q::-webkit-search-cancel-button { display: none; }
.catalog-search-clear {
	position: absolute;
	right: 0.6rem;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: #eef0f4;
	color: var(--ink-3);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
	transition: all .12s ease;
}
.catalog-search-clear.is-visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}
.catalog-search-clear:hover { background: #e0e3ea; color: var(--ink-1); }

.catalog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.65rem;
}
/* Pills univers — même signature que les pastilles de la page /offre :
   tint doux + pastille colorée au repos, remplissage plein + pastille
   blanche à l'état actif. La pastille est rendue en ::before (pas de markup). */
.catalog-chip {
	--chip-accent: #5b6b87;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--chip-accent) 32%, white);
	background: color-mix(in srgb, var(--chip-accent) 17%, white);
	color: color-mix(in srgb, var(--chip-accent) 80%, black);
	font-size: 0.86rem;
	font-weight: 500;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.catalog-chip::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--chip-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-accent) 18%, transparent);
	transition: background .14s ease, box-shadow .14s ease;
}
.catalog-chip[data-univers="0"] {
	--chip-accent: #5b3d57;
}
.catalog-chip:hover {
	background: color-mix(in srgb, var(--chip-accent) 20%, white);
	border-color: color-mix(in srgb, var(--chip-accent) 45%, white);
	color: color-mix(in srgb, var(--chip-accent) 85%, black);
	transform: translateY(-1px);
}
.catalog-chip.is-active {
	background: var(--chip-accent);
	color: #fff;
	border-color: var(--chip-accent);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--chip-accent) 60%, transparent);
}
.catalog-chip.is-active::before {
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, white 35%, transparent);
}

.catalog-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin-top: 0.4rem;
}
.catalog-check {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	color: var(--ink-2);
	cursor: pointer;
	user-select: none;
	margin: 0;
	padding: 0.3rem 0.1rem;
}
.catalog-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.catalog-check-box {
	width: 20px;
	height: 20px;
	border: 1.5px solid #b6bcc7;
	border-radius: 5px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	transition: all .12s ease;
	flex-shrink: 0;
}
.catalog-check-box i {
	transform: scale(0.6);
	opacity: 0;
	transition: all .12s ease;
}
.catalog-check:hover .catalog-check-box {
	border-color: #1f2a3d;
}
.catalog-check input:checked + .catalog-check-box {
	background: #1f2a3d;
	border-color: #1f2a3d;
}
.catalog-check input:checked + .catalog-check-box i {
	transform: scale(1);
	opacity: 1;
}
.catalog-check input:focus-visible + .catalog-check-box {
	box-shadow: 0 0 0 3px rgba(80, 100, 140, 0.25);
}
.catalog-check-label { line-height: 1.2; }

.catalog-sort {
	position: relative;
}
#catalog-sort {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #d9dde3;
	background: #fff;
	border-radius: 999px;
	padding: 0.45rem 2.25rem 0.45rem 1rem;
	font-size: 0.85rem;
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color .12s ease;
}
#catalog-sort:hover { border-color: #b6bcc7; }
.catalog-sort-caret {
	position: absolute;
	right: 0.8rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--ink-4);
	font-size: 0.85rem;
}
.catalog-reset {
	border: none;
	background: transparent;
	color: var(--ink-4);
	font-size: 0.85rem;
	padding: 0.4rem 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	border-radius: 8px;
	transition: all .12s ease;
}
.catalog-reset:hover { color: var(--ink-1); background: #eef0f4; }

.catalog-summary {
	font-size: 0.82rem;
	color: var(--ink-4);
	letter-spacing: 0.02em;
}
.catalog-summary #catalog-count {
	color: var(--ink-1);
	font-weight: 600;
}
.catalog-summary-total { opacity: 0.65; }

@media (max-width: 575px) {
	/* Header de filtre non collant en mobile : sticky il mangeait trop de hauteur
	   et masquait les cards. Le scroll-hint « remonter » suffit pour y revenir. */
	.catalog-toolbar { position: static; }
	/* Toolbar en flux libre : la recherche prend sa ligne, puis pills + checkbox
	   « Avec session planifiée » coulent ensemble (display:contents → la checkbox
	   devient un item-frère des pills et suit la dernière). */
	.catalog-toolbar .container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 0.35rem;
	}
	.catalog-search { flex: 0 0 100%; margin-bottom: 0.35rem; }
	.catalog-chips,
	.catalog-controls { display: contents; }
	/* Un peu d'air entre la dernière pill et la checkbox. */
	.catalog-check { margin-left: 0.5rem; }
	.catalog-summary { flex: 0 0 100%; margin-top: 0.2rem; }
	/* Accroche « X formations pour monter… » masquée en mobile : on resserre alors
	   l'espace titre → toolbar (sinon trop d'air sans le lede).
	   Exclut /certificats, qui a sa propre accroche courte dédiée au mobile. */
	.page-catalog .catalog-lede,
	.page-intervenants .catalog-lede { display: none; }
	.page-catalog .catalog-title,
	.page-intervenants .catalog-title { margin-bottom: 0; }
	.page-catalog .catalog-hero,
	.page-intervenants .catalog-hero { padding-bottom: 0.8rem; }
	/* /certificats garde son accroche : on resserre juste l'espace sous le hero.
	   `body.` pour passer devant les règles non-média placées plus bas (spécificité). */
	body.page-listing-certificats .catalog-hero { padding-bottom: 2.2rem; }
	body.page-listing-certificats .catalog-body { padding-top: 2.2rem; }
}
@media (max-width: 767.98px) {
	/* Tri + réinitialiser masqués en mobile/tablette portrait (le tri reste « par domaine »). */
	.catalog-sort,
	.catalog-reset { display: none; }
}
@media (min-width: 768px) {
	/* Desktop : « X formations sur Y » remontée à droite, à hauteur de la rangée
	   Tri/Réinitialiser (sortie du flux → on économise une ligne verticale). */
	.catalog-toolbar .container { position: relative; }
	.catalog-summary {
		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0;
		line-height: 2rem;
	}
	/* Réserve d'espace à droite pour que « Réinitialiser » ne passe pas sous le compteur. */
	.catalog-controls { padding-right: 10rem; }
}

.catalog-body { padding-bottom: 4rem; }
.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.1rem;
}

.formation-card {
	--card-accent: #5b6b87;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity .35s ease,
		transform .35s ease;
	transition-delay: var(--enter-delay, 0ms);
}
.formation-card.is-in {
	opacity: 1;
	transform: translateY(0);
}
.formation-card.is-out {
	opacity: 0;
	transform: translateY(-6px) scale(0.985);
	transition-duration: .16s;
	transition-delay: 0ms;
}

.formation-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 14px;
	overflow: hidden;
	padding: 1.1rem 1.15rem 1rem;
	color: var(--ink-2);
	transition:
		transform .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
	position: relative;
}
.formation-card-link:hover {
	border-color: color-mix(in srgb, var(--card-accent) 40%, white);
	box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--card-accent) 55%, transparent),
	            0 2px 6px rgba(20,25,35,0.04);
	transform: translateY(-3px);
	text-decoration: none;
}
.formation-card-univers {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--card-accent);
	gap: 0.25rem;
}
.formation-card-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--card-accent);
	margin-right: 0.45rem;
	display: inline-block;
}
.formation-card-su {
	color: var(--ink-4);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 0.74rem;
}
.formation-card-su i {
	font-size: 0.7em;
	margin: 0 0.05rem;
	opacity: 0.6;
}
.formation-card-garantie {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1f6f4a;
	background: #e8f4ee;
	border: 1px solid #cfe5d8;
	border-radius: 3px;
	padding: 0.05rem 0.32rem;
	white-space: nowrap;
	line-height: 1.4;
}

.formation-card-title {
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--ink-1);
	line-height: 1.3;
	margin: 0 0 0.85rem;
	letter-spacing: -0.005em;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.formation-card-link:hover .formation-card-title { color: var(--card-accent); }

.formation-card-meta {
	list-style: none;
	padding: 0;
	margin: 0 0 0.95rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.95rem;
	font-size: 0.83rem;
	color: var(--ink-3);
}
.formation-card-meta li { display: inline-flex; align-items: center; gap: 0.3rem; }
.formation-card-meta i {
	color: var(--card-accent);
	opacity: 0.85;
}

.formation-card-foot {
	margin-top: auto;
	padding-top: 0.7rem;
	border-top: 1px dashed #e6e9ee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}
.formation-card-prix {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
}
.formation-card-prix-val {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ink-1);
	font-variant-numeric: tabular-nums;
}
.formation-card-prix-tbd {
	font-size: 0.85rem;
	color: var(--ink-4);
	font-style: italic;
}
.formation-card-session {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	max-width: 65%;
}
.formation-card-session-date i { margin-right: 0.25rem; }
.formation-card-session i {
	font-size: 0.85em;
	color: var(--card-accent);
}
.formation-card-session.is-complete { color: #c0392b; }
.formation-card-session.is-complete i { color: #c0392b; }
.formation-card-session.is-tbd { color: var(--ink-5); font-style: italic; }
.formation-card-session.is-tbd i { color: var(--ink-5); opacity: 0.7; }

/* Listing certifs : espace hero ↔ cards + grille plafonnée à 3 colonnes */
.page-listing-certificats .catalog-hero {
	padding-bottom: 3.4rem;
	border-bottom: 1px solid #c9cfd9;
}
.page-listing-certificats .catalog-lede,
.page-catalog .catalog-lede,
.page-intervenants .catalog-lede {
	font-size: 1.18rem;
	line-height: 1.55;
	max-width: 68rem;
}
.page-listing-certificats .catalog-lede strong,
.page-catalog .catalog-lede strong,
.page-intervenants .catalog-lede strong { font-weight: 600; }
.page-listing-certificats .catalog-body { padding-top: 3.4rem; }
.page-listing-certificats .catalog-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.4rem 2.2rem;
}
/* Cartes éditoriales du listing : même bordure détourée que sur la home. */
.page-listing-certificats .home-une-card { border: 1px solid #dcdfe6; }
.page-listing-certificats .home-une-card-title { font-size: 1.28rem; }
/* Méta poussée en bas du corps (juste au-dessus du footer), pas collée au
   paragraphe descriptif ; le footer suit ensuite (son margin-top:auto est neutralisé). */
.page-listing-certificats .home-une-card .formation-card-meta { font-size: 0.89rem; margin-top: auto; }
.page-listing-certificats .home-une-card-foot { margin-top: 0; }
/* Respiration entre le paragraphe descriptif et la méta (utile quand le texte
   est long et que le margin-top:auto de la méta est entièrement consommé). */
.page-listing-certificats .home-une-card-teaser { margin-bottom: 0.6rem; }
@media (max-width: 992px) {
	.page-listing-certificats .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.page-listing-certificats .catalog-grid { grid-template-columns: 1fr; }
}
/* Cartes éditoriales à visuel, mutualisées entre le catalogue /formations
   (.page-catalog) et la home « préférées » (.home-cards). Style « À la une » :
   carte blanche, média 16/9, détourage par l'ombre douce (assombrie au hover
   sans s'étendre). Seule différence : /formations ajoute une fine bordure (cartes
   sur fond blanc), la home s'en passe (fond gris). 4 cartes/ligne, même gap. */
.page-catalog .catalog-grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.7rem 1.6rem;
}
.page-catalog .catalog-body { padding-bottom: 3.5rem; }
.home-cards { gap: 1.7rem 1.6rem; }
/* Espace sous le tapis « préférées » avant le CTA, identique au viewport certifs
   (.home-une-viewport). Sur mobile le bloc carousel ≤640px repose la même valeur. */
.home-cards-viewport { padding-bottom: 1.75rem; }

/* L'article n'est plus la boîte : c'est le lien (carte blanche). */
.page-catalog .formation-card,
.home-cards .formation-card { padding: 0; background: none; border: 0; border-radius: 0; }

.page-catalog .formation-card-link,
.home-cards .formation-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	color: var(--ink-2);
	box-shadow: 0 1px 2px rgba(20, 30, 55, 0.06), 0 14px 32px -20px rgba(20, 30, 55, 0.4);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* /formations : cartes sur fond blanc → fine bordure pour les détourer. */
.page-catalog .formation-card-link { border: 1px solid #dcdfe6; }

.page-catalog .formation-card-link:hover,
.home-cards .formation-card-link:hover {
	transform: translateY(-4px);
	/* même étendue qu'au repos, juste assombrie (cf. .home-une-card). */
	box-shadow: 0 2px 4px rgba(20, 30, 55, 0.1), 0 14px 32px -20px rgba(20, 30, 55, 0.62);
	text-decoration: none;
}
.page-catalog .formation-card-link:hover { border-color: color-mix(in srgb, var(--card-accent) 40%, #dcdfe6); }

/* Média : visuel ou placeholder, ratio constant. */
.page-catalog .formation-card-media,
.home-cards .formation-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-soft);
}
.page-catalog .formation-card-img,
.home-cards .formation-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
	transition: transform .45s ease;
}
.page-catalog .formation-card-link:hover .formation-card-img,
.home-cards .formation-card-link:hover .formation-card-img { transform: scale(1.045); }
.page-catalog .formation-card-media::after,
.home-cards .formation-card-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--card-accent, #5b6b87);
}

/* Placeholder créatif (pas de visuel) : dégradé dans la couleur du domaine,
   trame de points + grand pictogramme translucide. */
.formation-card-media-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(110% 110% at 18% 12%, color-mix(in srgb, var(--card-accent) 24%, #fff) 0%, transparent 55%),
		linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 92%, #14233a) 0%, color-mix(in srgb, var(--card-accent) 58%, #0a0f1a) 100%);
}
.formation-card-media-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 14px 14px;
	opacity: .55;
}
.formation-card-media-ph i {
	position: relative;
	font-size: 2.8rem;
	color: rgba(255, 255, 255, 0.5);
}

/* Badges en surimpression sur le média. */
.formation-card-flag {
	position: absolute;
	top: .6rem;
	z-index: 2;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .22rem .5rem;
	border-radius: 5px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(20, 30, 55, 0.18);
}
.formation-card-flag-new { left: .6rem; color: #fff; background: var(--card-accent); }

/* Corps de carte. */
.page-catalog .formation-card-body,
.home-cards .formation-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.15rem 1.1rem;
}
.page-catalog .formation-card-title,
.home-cards .formation-card-title {
	min-height: 0;
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
	margin: .5rem 0 .7rem;
	font-size: 1.13rem;
	font-weight: 600;
}
.page-catalog .formation-card-session,
.home-cards .formation-card-session { font-size: .85rem; }
.page-catalog .formation-card-univers,
.home-cards .formation-card-univers { font-size: .68rem; }
.page-catalog .formation-card-su,
.home-cards .formation-card-su { font-size: .7rem; }
@media (max-width: 575px) {
	.page-catalog .formation-card-body,
	.home-cards .formation-card-body { padding: .9rem 1rem 1rem; }
}

/* Cartes .home-cards en carousel UNIQUEMENT en mobile (≤640px), en réutilisant
   l'infra [data-carousel] (cf. partials/carousel-script.php). Mutualisé entre la
   home « préférées de nos apprenants » et le « Voir aussi » des fiches formation.
   Les cards desktop (grille) restent strictement inchangées : flèches masquées,
   viewport sans overflow, grille native. */
/* Double-classe pour la spécificité : sinon `.home-une-nav-group { display: flex }`
   (défini plus bas) écrase ce masquage et les flèches s'affichent en desktop. */
.home-une-nav-group.home-cards-nav { display: none; }

@media (max-width: 640px) {
	.home-une-nav-group.home-cards-nav { display: flex; }
	/* Viewport tapis roulant (cf. .home-une-viewport) : borne le débord latéral. */
	.home-cards-viewport { overflow: hidden; padding: 0 1px 1.75rem; margin: 0 -1px; }
	/* La grille devient un tapis flex, 1 carte plein écran (cf. .home-une-track). */
	.home-cards-viewport .home-cards.catalog-grid { display: flex; gap: 1.6rem; }
	.home-cards-viewport .home-cards.catalog-grid > .formation-card { flex: 0 0 100%; min-width: 0; }
}

.catalog-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 4rem 1rem;
	color: var(--ink-4);
}
.catalog-empty i {
	font-size: 2.5rem;
	color: var(--ink-5);
	margin-bottom: 1rem;
	display: block;
}
.catalog-empty p {
	font-size: 1.05rem;
	margin-bottom: 1.2rem;
}
.catalog-reset-inline {
	border: 1px solid #d9dde3;
	background: #fff;
	color: var(--ink-2);
	padding: 0.55rem 1.2rem;
	border-radius: 999px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all .12s ease;
}
.catalog-reset-inline:hover {
	background: #1f2a3d;
	color: #fff;
	border-color: #1f2a3d;
}

@media (prefers-reduced-motion: reduce) {
	.formation-card { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   Print — fiche formation (CTRL+P / Enregistrer en PDF)
   ============================================================ */

.print-only { display: none; }

@media print {
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	@page {
		size: A4;
		margin: 14mm 20mm 16mm 20mm;
		@bottom-center {
			content: "© ENSAE-ENSAI Formation continue — Page " counter(page) " / " counter(pages);
			font-family: Inter, Arial, sans-serif;
			font-size: 9pt;
			color: #888;
		}
	}

	html, body {
		background: #fff !important;
		color: #222 !important;
		font-size: 11pt;
	}

	.no-print { display: none !important; }
	.print-only { display: block !important; }

	main { display: block; }

	/* Masquer le bloc "Pour aller plus loin" en print */
	.fiche-more { display: none !important; }

	/* Bord-à-bord : on neutralise le container Bootstrap et la gouttière du row */
	.fiche-body.container,
	.fiche-body .container {
		max-width: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Layout 1 colonne : la sidebar passe sous l'article */
	.fiche-body .row {
		display: block !important;
		--bs-gutter-x: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.fiche-main, .fiche-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		padding: 0 !important;
	}
	.sidebar-sticky-wrap {
		position: static !important;
		top: auto !important;
		margin-top: 0 !important;
	}
	.sidebar-sticky {
		position: static !important;
		top: auto !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
	}

	/* Hero */
	.fiche-title {
		font-size: 22pt !important;
		color: var(--accent, #772176) !important;
		margin-bottom: .3em;
	}
	.title-separator { display: none !important; }
	.fiche-meta {
		font-size: 10pt !important;
		gap: .3rem 1rem !important;
		margin-bottom: 1rem;
	}
	.fiche-meta .meta-item { background: none !important; padding: 0 !important; }
	.fiche-meta .meta-item .bi { color: var(--accent, #772176) !important; }
	.univers-tag {
		background: none !important;
		color: var(--accent, #772176) !important;
		padding: 0 !important;
		border: none !important;
	}
	/* Étoiles satisfaction dans le hero : la note suffit, on cache les étoiles cliquables */
	.fiche-meta .meta-rating .rating-stars { display: none !important; }
	.fiche-meta .meta-rating { color: #222 !important; text-decoration: none !important; }

	/* Sections principales : pas de break-inside avoid (le programme est trop long
	   et forçait des sauts de page disgracieux). Plus d'air au-dessus. */
	.fiche-section {
		margin: 2.2rem 0 .8rem !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
	}
	/* La 1re section (Objectifs) suit directement le hero : pas besoin de top margin */
	.fiche-main > .fiche-section:first-of-type {
		margin-top: .3rem !important;
	}
	.section-title {
		color: var(--accent, #772176) !important;
		font-size: 13pt !important;
		text-transform: uppercase;
		letter-spacing: .02em;
		border-bottom: 1px solid #ccc;
		padding-bottom: .4em;
		/* Pas de !important : laisse `.programme-details .section-title { margin-bottom: 0 }`
		   (le titre est dans un <summary> qui porte déjà sa marge basse) reprendre la main
		   pour le programme, sinon double espace au-dessus du 1er paragraphe. Les autres
		   sections gardent .9em (cette règle l'emporte par ordre de source sur l'écran). */
		margin-bottom: .9em;
		break-after: avoid;
		page-break-after: avoid;
	}
	.section-title .bi { color: var(--accent, #772176) !important; }

	/* Forcer les <details> ouverts en print (programme, satisfaction) */
	details { display: block !important; }
	details > summary {
		list-style: none !important;
		cursor: default !important;
	}
	details > summary::-webkit-details-marker { display: none !important; }
	details > *:not(summary) { display: block !important; }
	.programme-chevron, .more-chevron { display: none !important; }

	.rich-text { font-size: 10.5pt !important; }
	.rich-text ul, .rich-text ol { padding-left: 1.4em; }
	.rich-text li { break-inside: avoid; page-break-inside: avoid; }

	/* Programme détaillé : resserrer l'aération en print (l'écran est plus aéré).
	   Interligne entre paragraphes + marge au-dessus des chapitres (h3) / sous-items (h4). */
	.fiche-section-programme .rich-text p { margin-bottom: .55rem; }
	.fiche-section-programme .rich-text h3 { margin-top: 1.1rem; font-size: 1.05rem; }
	.fiche-section-programme .rich-text h4 { margin-top: .8rem; }

	/* Sidebar rich-text (Logiciels, Bibliographie) : plus petit que le contenu principal */
	.fiche-sidebar .sidebar-block .rich-text,
	.fiche-sidebar .sidebar-block .rich-text p,
	.fiche-sidebar .sidebar-block .rich-text li {
		font-size: 9pt !important;
	}

	/* Pédagogie — pills teintées avec couleur univers pâlie */
	.pill, .pill-info {
		background: color-mix(in srgb, var(--accent, #772176) 12%, white) !important;
		color: var(--accent, #5e2557) !important;
		border: 1px solid color-mix(in srgb, var(--accent, #772176) 25%, white) !important;
		padding: 1px 6px !important;
		font-size: 9pt !important;
	}
	.pedago-label { font-weight: 600; color: #555 !important; }

	/* Satisfaction : pas de break-inside avoid (forçait un saut de page après Pédago) */
	.satisfaction-global,
	.satisfaction-grid,
	.satisfaction-card { break-inside: avoid; page-break-inside: avoid; }

	/* Note rating dans le hero : masquée en print */
	.meta-rating { display: none !important; }

	/* Icônes (i) tooltip (satisfaction, pédagogie) : inutiles sur papier */
	.satisfaction-info,
	.pill-info .bi-info-circle { display: none !important; }

	/* Logo langage à droite des objectifs : plus petit */
	.langage-logo { max-width: 70px; height: auto; }

	/* Sidebar -> blocs neutres, plus d'air au-dessus de chaque titre.
	   Pas de break-inside avoid sur le bloc lui-même (sinon Intervenants pousse
	   tout le bloc à la page suivante alors qu'il y a la place de couper) ;
	   on garde break-inside avoid sur chaque .intervenant individuel. */
	.fiche-sidebar .cta-card,
	.fiche-sidebar .sidebar-block {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 1.6rem 0 0 !important;
	}
	/* Pas de prix dans le bloc "Prochaine session" en print */
	.cta-price { display: none !important; }
	/* Mini-cards "Autres sessions" en print : on aplatit en liste simple */
	.sessions-mini-cards { gap: .2em; }
	.sessions-mini-card {
		border: none !important;
		background: none !important;
		padding: 0 !important;
	}
	.sessions-mini-card-date { font-size: 10pt; font-weight: 600; }
	.sessions-mini-card-meta { font-size: 9pt; }
	.sessions-mini-card-cta { display: none !important; }
	.badge-garantie { display: none !important; }
	.cta-card .cta-label,
	.sidebar-block .sidebar-label {
		color: var(--accent, #772176) !important;
		font-size: 11pt !important;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .02em;
		border-bottom: 1px solid #ccc;
		padding-bottom: .4em;
		margin-bottom: .9em;
		background: none !important;
	}
	/* Badge "Informations pratiques" : on garde le look badge, plus petit */
	.sidebar-block .sidebar-label-badge {
		display: inline-block !important;
		background: color-mix(in srgb, var(--accent, #772176) 12%, white) !important;
		color: var(--accent, #5e2557) !important;
		border: none !important;
		border-radius: 999px !important;
		padding: 2px 10px !important;
		font-size: 9pt !important;
		letter-spacing: .04em;
		margin-bottom: 1em;
	}
	.sidebar-block .sidebar-label-badge .bi {
		color: var(--accent, #772176) !important;
		font-size: 9pt !important;
	}

	/* Intervenants */
	.intervenant { break-inside: avoid; page-break-inside: avoid; margin-bottom: .6em; }
	.intervenant-name { font-weight: bold; color: #444 !important; }
	.intervenant-bio {
		display: block !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
		max-height: none !important;
		overflow: visible !important;
		color: #555 !important;
	}
	.intervenant-bio-toggle { display: none !important; }

	/* Logo CEPE en haut à droite — répété sur chaque page (position:fixed est
	   relancé par Chrome à chaque page imprimée). */
	/* Logo CEPE : en haut à gauche au-dessus du titre + de nouveau à la fin du doc */
	.fiche-print-logo {
		display: block;
		width: 42mm;
		height: auto;
		margin: 0 0 1rem;
	}
	.fiche-print-logo-end {
		margin: 1.5rem 0 0;
	}

	/* Footer fiche print-only */
	.fiche-print-footer {
		margin-top: 1.5rem;
		padding-top: .8rem;
		border-top: 1px solid #ccc;
		font-size: 10pt;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.fiche-print-last-update { color: #888; font-size: 9pt; margin-top: .8rem; }

	/* Fiche certificat : onglets aplatis en sections successives.
	   Tous les panes « plaquette » sont dépliés ; les onglets décochés
	   « Présent dans la plaquette » portent .no-print et restent masqués. */
	.certif-tab-content .tab-pane:not(.no-print) {
		display: block !important;
		opacity: 1 !important;
		margin-top: 1.6rem;
	}
	.certif-print-tab-title {
		color: var(--accent, #772176) !important;
		font-size: 13pt !important;
		text-transform: uppercase;
		letter-spacing: .02em;
		border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, white) !important;
		padding-bottom: .45em;
		margin: 0 0 1.1em !important;
		break-after: avoid;
		page-break-after: avoid;
	}

	/* Well « Pourquoi choisir… » : ne pas le couper en deux pages */
	.rich-text .well { break-inside: avoid; page-break-inside: avoid; }

	/* Pas de filet sous la date limite de candidature */
	.page-fiche-certificat .cta-deadline {
		border-bottom: none !important;
		padding-bottom: 0 !important;
	}

	/* Vidéo YouTube (ALM) et séparateurs <hr> : inutiles en PDF */
	.certif-tab-content .ratio,
	.certif-tab-content iframe { display: none !important; }
	.certif-tab-content .rich-text hr { display: none !important; }

	/* Modules : on garde chaque module solidaire */
	.certif-module { break-inside: avoid; page-break-inside: avoid; }
	/* Objectifs des modules liés : affichés intégralement (pas de clamp) + lien
	   vers le module conservé */
	.certif-module-snippet {
		display: block !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
		overflow: visible !important;
	}
	.certif-module-snippet-toggle { display: none !important; }
	.certif-module-cta { display: inline-block !important; }

	/* FAQ ancrée : on ouvre toutes les réponses et on neutralise les chevrons */
	.certif-faq .collapse { display: block !important; height: auto !important; }
	.certif-faq-toggle {
		pointer-events: none;
		background: none !important;
	}
	.certif-faq-toggle .intra-item-chevron { display: none !important; }
	.certif-faq .intra-item { break-inside: avoid; page-break-inside: avoid; }

	/* Hero : un peu d'air sous le sous-titre, accroche resserrée */
	.fiche-subtitle {
		font-size: 13pt !important;
		margin: .2rem 0 1rem !important;
	}
	.fiche-meta { margin-bottom: .2rem !important; }
	.fiche-accroche {
		margin: 0 0 .2rem !important;
		padding: .4rem .85rem !important;
		font-size: 10pt !important;
	}

	/* Plus d'air au-dessus du titre de chaque onglet aplati… */
	.certif-print-tab-title { margin-top: 2.6rem !important; }
	.certif-tab-content .tab-pane:not(.no-print) { margin-top: 0; }
	/* …sauf le premier, collé à l'accroche : on retire le padding du conteneur
	   et la grosse marge haute du titre pour resserrer le haut de page. */
	.certif-tab-content { padding-top: 0 !important; }
	.certif-tab-content .tab-pane:first-child .certif-print-tab-title { margin-top: 1rem !important; }

	/* Titres éditoriaux dans les onglets : plus compacts en print */
	.certif-tab-content .rich-text .certif-rich-h {
		font-size: 12pt !important;
		margin-top: 1.5rem !important;
		gap: .5rem;
		border-bottom-width: 1px !important;
	}
	.certif-rich-h-icon {
		width: 1.7rem !important;
		height: 1.7rem !important;
		font-size: .85rem !important;
	}

	/* Lien « Voir le détail des modules » : redondant dans un PDF linéaire
	   (les modules figurent dans le même document) */
	.certif-section-link-wrap { display: none !important; }

	/* Icônes tooltip (i) : inutiles sur papier */
	.cta-deadline-info,
	.satisfaction-side-info { display: none !important; }

	/* Financement : on garde les liens, logo CPF réduit */
	.sidebar-financement .financement-cpf img { max-width: 90px !important; }

	/* Satisfaction : on remplace le résumé + <details> repliable par la liste
	   complète dépliée (intro + 4 indicateurs), sans le bloc global dupliqué. */
	.sidebar-satisfaction .satisfaction-side-global { display: none !important; }
	.satisfaction-side-details > summary { display: none !important; }
	.satisfaction-side-intro {
		font-size: 9.5pt !important;
		margin: .2rem 0 .9rem !important;
	}
	.satisfaction-side-list {
		display: block !important;
		font-size: 10pt !important;
	}
	.satisfaction-side-list dt {
		margin-top: .3em;
		color: #444 !important;
		font-weight: 600;
	}
	.satisfaction-side-list dd {
		justify-content: flex-start;
		align-items: center;
		margin-top: 0;
	}
	.satisfaction-side-list dd .rating-value { align-self: center; }

	a { color: var(--accent, #772176) !important; text-decoration: none !important; }
}

/* ---------------------------------------------------------------------------
 * Fiche certificat
 * --------------------------------------------------------------------------- */

.fiche-subtitle {
	color: var(--accent);
	font-size: 1.35rem;
	font-weight: 200;
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0.7rem 0 0;
}
@media (max-width: 767.98px) {
	.fiche-subtitle { font-size: 1.1rem; }
}

.fiche-accroche {
	font-size: 1.08rem;
	color: var(--ink-2);
	margin: 1rem 0 2.75rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 4%, white);
	border-radius: 7px;
}
.fiche-accroche p:last-child { margin-bottom: 0; }
.fiche-accroche strong { font-weight: 600; }
/* Smartphone : l'accroche remonte en haut de page, entre les méta (durée, prix)
   et les CTA. Elle est rendue à deux endroits du DOM — CSS ne sait pas la
   reparenter du 1er onglet vers le <header> — et un seul est affiché à la fois,
   `display: none` la retirant aussi de l'arbre d'accessibilité. La copie du haut
   est `no-print` : c'est celle de l'onglet qui part au PDF. */
.fiche-accroche-hero { display: none; }
@media (max-width: 767.98px) {
	.fiche-accroche { margin-top: 0.85rem; padding: 1rem 1.1rem; font-size: 1rem; }
	.fiche-accroche-hero {
		display: block;
		margin-top: 1.25rem;
		/* 0.5rem + les 1.25rem de margin-top du CTA qui suit = 1.75rem, soit
		   l'écart entre le CTA session et le bandeau réunion (padding-bottom du
		   hero). Le <header> est en flex-column : les marges ne fusionnent pas,
		   elles s'additionnent — d'où le complément et non la valeur pleine. */
		margin-bottom: 0.5rem;
	}
	/* Pas de CTA session (aucune session à venir) : l'accroche termine le hero et
	   son complément s'ajouterait au padding-bottom de celui-ci — 2.25rem au lieu
	   des 1.75rem visés. Le padding seul fait déjà le compte. */
	.fiche-accroche-hero:last-child { margin-bottom: 0; }
	.fiche-accroche:not(.fiche-accroche-hero) { display: none; }
}

.fiche-banner {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	border-radius: 10px;
}

/* Onglets certif */
.certif-tabs {
	margin-top: 1rem;
	border-bottom: 2px solid color-mix(in srgb, var(--accent) 20%, white);
}
.certif-tabs .nav-link {
	color: var(--ink-3);
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.75rem 1.1rem;
	font-weight: 500;
	background: none;
}
.certif-tabs .nav-link:hover { color: var(--accent); border-color: transparent; }
.certif-tabs .nav-link.active {
	color: var(--accent);
	background: none;
	border-bottom-color: var(--accent);
	font-weight: 600;
}

/* Mobile : pills full-width empilées verticalement (forward-compat : nombre
   d'onglets variable selon les certifs, on évite le cramp horizontal). */
@media (max-width: 767.98px) {
	.certif-tabs {
		border-bottom: 0;
		margin-top: 0rem;
		flex-direction: column;
		gap: 0.4rem;
	}
	.certif-tabs .nav-item {
		width: 100%;
	}
	.certif-tabs .nav-link {
		width: 100%;
		padding: 0.65rem 1rem;
		font-size: 0.92rem;
		text-align: center;
		border-radius: 999px;
		background: color-mix(in srgb, var(--brand) 8%, white);
		color: var(--brand);
		border: 0;
		margin-bottom: 0;
	}
	.certif-tabs .nav-link.active {
		background: color-mix(in srgb, var(--brand) 80%, white);
		color: #fff;
	}
}

.certif-tab-content { padding: 2rem 0; }

.certif-visuel { border-radius: 10px; margin-top: 0.5rem !important; }
/* Smartphone : le visuel remonte en haut de page, entre les méta et l'accroche —
   même mécanique de double rendu que .fiche-accroche-hero (CSS ne reparente pas
   un bloc). La copie du haut ne porte pas `my-4` : ses marges sont posées ici,
   en `!important` pour passer devant `.certif-visuel { margin-top }`. L'écart
   avec l'accroche qui suit vient du margin-top de celle-ci. */
.certif-visuel-hero { display: none; }
@media (max-width: 767.98px) {
	/* 0.5rem sous le visuel + les 1.25rem de margin-top de l'accroche = 1.75rem,
	   soit l'écart accroche → CTA (même construction, cf. .fiche-accroche-hero).
	   Porté par le visuel et non par l'accroche : celle-ci garde ainsi ses 1.25rem
	   sous les méta sur les fiches sans visuel. */
	.certif-visuel-hero { display: block; margin: 1.25rem 0 0.5rem !important; }
	/* Fiche sans accroche ni CTA session : le visuel termine le hero, même
	   correction que .fiche-accroche-hero:last-child. */
	.certif-visuel-hero:last-child { margin-bottom: 0 !important; }
	.certif-visuel:not(.certif-visuel-hero) { display: none; }
}

.certif-tab-content .rich-text h2 {
	color: var(--accent);
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: 2rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.certif-tab-content .rich-text h2:first-child { margin-top: 0; }
/* Smartphone : le 1er onglet n'a plus ni visuel ni accroche au-dessus de son
   contenu (remontés en haut de page), et démarre parfois par un .well ou un
   .certif-rich-h — que le reset ci-dessus, limité aux h2, ne couvre pas. Leur
   marge haute décalait le contenu par rapport aux autres onglets. On neutralise
   celle du 1er enfant quel qu'il soit : l'écart ne vient plus que du padding-top
   de .certif-tab-content, identique pour tous. Il faut 4 classes pour passer
   devant `.certif-tab-content .rich-text .certif-rich-h`, qui en pèse 3. */
@media (max-width: 767.98px) {
	.certif-tab-content .tab-pane > .rich-text > *:first-child { margin-top: 0; }
}
.certif-tab-content .rich-text h3 {
	color: var(--accent);
	font-size: 1.15rem;
	font-weight: 400;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}
.certif-tab-content .rich-text hr {
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
}

/* Classes éditoriales (well + checklist) — héritage BS3 conservé pour le
   contenu rédactionnel des onglets `rich_html`. */
.rich-text .well {
	background: var(--ink-9, #f6f6f8);
	border: 1px solid var(--ink-8, #e6e6ea);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}
.rich-text .well > h2 {
	padding-bottom: 0.7rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, white);
}
.rich-text .checklist ul {
	list-style: none;
	padding-left: 0;
}
.rich-text .checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}
.rich-text .checklist li::before {
	content: '\F26B'; /* bi-check-lg */
	font-family: 'bootstrap-icons';
	color: var(--accent);
	position: absolute;
	left: 0;
	top: 0.05em;
	font-weight: 700;
}

/* Titres éditoriaux dans les onglets rich_html : icône bubble en accent
   pour donner du rythme aux sections entre les wells. */
.certif-tab-content .rich-text .certif-rich-h {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 3rem;
	border-bottom-width: 5px;
	border-bottom-color: color-mix(in srgb, var(--accent) 15%, transparent);
	padding-bottom: 0.6rem;
}
.certif-rich-h-icon {
	display: inline-flex;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 12%, white);
	color: var(--accent);
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	flex: 0 0 auto;
}

/* Lien éditorial en fin de section vers un autre onglet (« Voir le détail… »). */
.certif-section-link-wrap {
	text-align: left;
	margin: 0.5rem 0 0;
}
.certif-section-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--accent);
	text-decoration: none;
}
.certif-section-link:hover { color: var(--accent); }
.certif-section-link:hover span { text-decoration: underline; }
.certif-section-link i { transition: transform 0.15s; }
.certif-section-link:hover i { transform: translateX(3px); }

/* Bloc Certification : deux mini-cards (examen / soutenance) côte à côte. */
.certif-cert-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1.25rem 0 4rem;
}
.certif-cert-mode {
	border: 1px solid color-mix(in srgb, var(--accent) 25%, white);
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	background: #fff;
}
.certif-cert-mode-icon {
	display: inline-flex;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 12%, white);
	color: var(--accent);
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin-bottom: 0;
}
.certif-cert-mode-titre {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0 0 0.4rem;
}
.certif-cert-mode p,
.certif-cert-validation p {
	color: var(--ink-3);
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.5;
}
@media (max-width: 575px) {
	.certif-cert-modes { grid-template-columns: 1fr; }
}
/* Card de validation (même border que les cards .certif-cert-mode ci-dessus). */
.certif-cert-modes:has(+ .certif-cert-validation) { margin-bottom: 1rem; }
.certif-cert-validation {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--accent) 25%, white);
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	background: #fff;
	margin: 0 0 4rem;
}
.certif-cert-validation .certif-cert-mode-icon {
	grid-column: 1;
	grid-row: 1 / span 99;
	align-self: center;
	margin: 0;
}
.certif-cert-validation p { grid-column: 2; }
.certif-cert-validation p + p { margin-top: 0.5rem; }

/* Modules */
.certif-modules {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 2rem;
}
.certif-module {
	border: 1px solid color-mix(in srgb, var(--accent) 40%, white);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	background: color-mix(in srgb, var(--accent) 3%, white);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.15s, border-color 0.15s;
}
.certif-module:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.certif-module-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.certif-module-num {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 16%, white);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
}

/* Pastille de numérotation par entrée FAQ — variante compacte du pattern modules. */
.certif-faq-toggle { grid-template-columns: 1fr auto; }
.certif-faq-titre-wrap {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}
.certif-faq-num {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background:color-mix(in srgb, var(--accent) 4%, white);
	color: var(--accent);
	border: 1px solid color-mix(in srgb, var(--accent) 40%, white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1;
}
.certif-module-titre-wrap { flex: 1 1 auto; min-width: 0; }
.certif-module-titre {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}
.certif-module-titre a { color: var(--ink-1); }
.certif-module-titre a:hover { color: var(--accent); }
.certif-module-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-size: 0.92rem;
	color: var(--ink-4);
}
.certif-module-meta i { color: var(--accent); margin-right: 0.25rem; }
.certif-module-snippet {
	position: relative;
	margin: 0.75rem 0 0.5rem 3.25rem;
	color: var(--ink-3);
	font-size: 0.94rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.certif-module-snippet.expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}
.certif-module-snippet-toggle {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 0 0 2.5rem;
	font-size: 0.85rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--accent);
	cursor: pointer;
	background: linear-gradient(to right, transparent, #fff 30%);
	border: 0;
}
.certif-module-snippet.expanded .certif-module-snippet-toggle {
	position: static;
	display: inline;
	margin-left: 0.25rem;
	padding-left: 0;
	background: none;
}
.certif-module-snippet-toggle:hover {
	color: color-mix(in srgb, var(--accent) 75%, black);
	text-decoration: underline;
}
.certif-module-cta {
	display: inline-block;
	margin-left: 3.25rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--accent);
	text-decoration: none;
}
.certif-module-cta:hover { text-decoration: none; }
.certif-module-cta:hover span { text-decoration: underline; }
.certif-module-cta i { margin-left: 0.5rem; transition: transform 0.15s; }
.certif-module-cta:hover i { transform: translate(2px, -2px); }
/* CTA « En savoir plus » des modules libres : un peu d'air sous la description. */
.certif-module-libre-content + .certif-module-cta-article { margin-top: 0.6rem; }

/* Contenu inline complet pour les modules libres (DA / DS / IA — pas de page externe à lier). */
.certif-module-libre-content { margin: 0.4rem 0 0 3.25rem; color: var(--ink-3); line-height: 1.55; font-size: 0.9rem; }
.certif-module-libre-content strong { font-weight: 550; color: var(--ink-2); }
.certif-tab-content .rich-text .lead { font-size: 1.13rem; }
.certif-tab-content .rich-text .lead strong { font-weight: 500; color: var(--ink-2); }
.certif-tab-content .rich-text p strong { font-weight: 600; }
@media (max-width: 767.98px) {
	.certif-tab-content .rich-text .lead { font-size: 0.99rem; }
}

/* Onglet Programme — grosse icône « parcours » en pastille accent à gauche du
   chapô, pour rompre la monotonie de la liste de modules qui suit. L'icône
   flotte à gauche et le texte du chapô l'entoure ; flow-root contient le float
   pour que les cards en dessous ne remontent pas. */
.certif-programme-intro {
	display: flow-root;
}
.certif-programme-intro .rich-text { display: contents; }
.certif-programme-icon {
	float: left;
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	/* 3.5rem (icône) + 1.25rem (margin) = 4.75rem : les lignes qui longent l'icône
	   s'alignent sur le texte des titres/contenus des cards (padding 1.5rem +
	   pastille n° 2.25rem + gap 1rem). */
	margin-top: -0.25rem;
	margin-right: 1.25rem;
	margin-bottom: 0.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 12%, white);
	color: var(--accent);
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
}
.certif-programme-intro .rich-text > .lead:first-child { margin-top: 0; }
@media (max-width: 575px) {
	.certif-programme-icon { width: 54px; height: 54px; font-size: 1.5rem; margin-right: 1rem; }
}
.certif-module-libre-content > *:last-child { margin-bottom: 0; }

/* Modules — mobile : badge n° en haut, contenu pleine largeur, padding resserré */
@media (max-width: 767.98px) {
	.certif-module { padding: 0.85rem 1rem; }
	.certif-module-libre-content { margin-left: 0; }
	.certif-module-head { flex-direction: column; gap: 0.5rem; }
	.certif-module-num {
		width: auto;
		height: auto;
		padding: 0.25rem 0.8rem;
		border-radius: 999px;
		font-size: 0.85rem;
		font-weight: 500;
		align-self: flex-start;
		margin-bottom: 0.4rem;
	}
	.certif-module-num::before { content: 'Module\00a0'; }
	.certif-module-snippet { margin-left: 0; }
	.certif-module-snippet-toggle { padding-left: 1.5rem; }
	.certif-module-cta { margin-left: 0; }
}

/* CTA Calendly bas de fiche certificat */
.certif-calendly {
	margin: 3rem 0 1rem;
	padding: 1.25rem 1.5rem;
	background: color-mix(in srgb, var(--accent) 5%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
	border-radius: 0.75rem;
}
/* Ligne principale (texte + bouton « Prendre rendez-vous »). */
.certif-calendly-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
/* Sous-bloc « Réunion d'information » intégré sous le Calendly, séparé par un
   filet. Bouton/icône en vert fixe (--reunion-green) pour distinguer ce CTA. */
.certif-calendly-reunion {
	--reunion-green: #3f8f5f;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid color-mix(in srgb, var(--accent) 22%, white);
}
.certif-calendly-text { min-width: 0; }
.certif-calendly-title {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink-1);
	margin-bottom: 0.15rem;
}
.certif-calendly-title .bi { color: var(--accent); margin-right: 0.3rem; }
.certif-calendly-sub {
	font-size: 0.92rem;
	color: var(--ink-3);
}
.certif-calendly-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 575.98px) {
	.certif-calendly { padding: 1rem 1.1rem; }
	.certif-calendly-main,
	.certif-calendly-reunion {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 0.85rem;
	}
}

/* Onglet Certification — habillage */
.tab-certif-hero {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin: 0.5rem 0 1.5rem;
}
.tab-certif-hero-icon {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.8rem;
	line-height: 1;
}
.tab-certif-hero-text { flex: 1 1 auto; }
.tab-certif-hero-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0;
	line-height: 1.3;
}
.tab-certif-hero-sub {
	color: var(--ink-4);
	font-size: 0.95rem;
	margin: 0.25rem 0 0;
}
.tab-certif-validation {
	background: color-mix(in srgb, var(--accent) 6%, transparent);
	border-left: 3px solid var(--accent);
	border-radius: 0 0.5rem 0.5rem 0;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.tab-certif-validation-title {
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 0.5rem;
}
.tab-certif-validation-title i { margin-right: 0.3rem; }
.tab-certif-validation ul { margin: 0; padding-left: 1.2rem; }
.tab-certif-validation li { margin-bottom: 0.2rem; }
.tab-certif-validation li:last-child { margin-bottom: 0; }
.tab-certif-cosign {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
	border-radius: 0.5rem;
	background: #fff;
}

/* Témoignages : onglet « verbatims » (grille de cartes) + « interview » (Q/R
   multi-voix, une teinte d'avatar par intervenant). Sélecteurs enracinés à
   `.certif-tab-content .certif-temoins` (3 classes) pour battre les règles
   d'élément `.certif-tab-content .rich-text h2|p` (2 classes + 1 type). */
.certif-temoins { margin-top: 1.5rem; }
.certif-temoins:first-child,
.certif-print-tab-title + .certif-temoins { margin-top: 0; }
.certif-tab-content .certif-temoins .ct-section + .ct-section { margin-top: 3.25rem; }
.certif-tab-content .certif-temoins .ct-sep {
	margin: 2.75rem 0; border: 0; opacity: 1;
	border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bs-border-color));
}
.certif-tab-content .certif-temoins .ct-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.35rem; }
.certif-tab-content .certif-temoins .ct-head-icon {
	flex: none; width: 46px; height: 46px; border-radius: 13px;
	display: grid; place-items: center; font-size: 1.35rem; color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 24%, white);
}
.certif-tab-content .certif-temoins .ct-kicker {
	display: block; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--accent); font-weight: 600; margin-bottom: 0.15rem;
}
.certif-tab-content .certif-temoins .ct-title {
	margin: 0; padding: 0; border: 0; font-size: 1.4rem; line-height: 1.2;
	color: var(--accent); font-weight: 400;
}
.certif-tab-content .certif-temoins .ct-lead {
	max-width: 70ch; color: var(--ink-3); font-size: 1.02rem; margin: 0.9rem 0 1.6rem;
}
.certif-tab-content .certif-temoins .ct-lead strong { color: var(--ink-2); font-weight: 600; }

/* Verbatims — grille masonry */
.certif-tab-content .certif-temoins .ct-quotes { columns: 2; column-gap: 1.25rem; }
.certif-tab-content .certif-temoins .ct-quote {
	break-inside: avoid; margin: 0 0 1.25rem; padding: 1.35rem 1.35rem 1.1rem;
	background: #fff; border: 1px solid var(--bs-border-color); border-radius: 14px;
	position: relative; box-shadow: 0 1px 2px rgba(20, 25, 35, 0.03);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.certif-tab-content .certif-temoins .ct-quote:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(20, 25, 35, 0.04), 0 8px 24px -14px rgba(20, 25, 35, 0.18);
	border-color: color-mix(in srgb, var(--accent) 35%, white);
}
.certif-tab-content .certif-temoins .ct-quote::before {
	content: "\201C"; position: absolute; top: 0.4rem; left: 1rem;
	font-family: Georgia, 'Times New Roman', serif; font-size: 4.4rem; line-height: 1;
	color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.certif-tab-content .certif-temoins .ct-quote-text { margin: 2.1rem 0 1rem; color: var(--ink-2); font-size: 0.97rem; }
.certif-tab-content .certif-temoins .ct-quote-foot {
	display: flex; align-items: center; gap: 0.7rem;
	padding-top: 0.8rem; border-top: 1px solid var(--bs-border-color);
}
.certif-tab-content .certif-temoins .ct-av {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
	color: #fff; background: var(--accent);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, white);
}
.certif-tab-content .certif-temoins .ct-who { line-height: 1.3; }
.certif-tab-content .certif-temoins .ct-who b { display: block; color: var(--ink-1); font-size: 0.9rem; }
.certif-tab-content .certif-temoins .ct-who span { color: var(--ink-4); font-size: 0.8rem; }

/* Interview — questions / réponses multi-voix */
.certif-tab-content .certif-temoins .ct-people { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 1.75rem; }
.certif-tab-content .certif-temoins .ct-person {
	display: flex; align-items: center; gap: 0.65rem;
	padding: 0.5rem 1rem 0.5rem 0.6rem; background: var(--bg-soft);
	border: 1px solid var(--bs-border-color); border-radius: 999px;
}
.certif-tab-content .certif-temoins .ct-person .ct-av { width: 34px; height: 34px; font-size: 0.74rem; }
.certif-tab-content .certif-temoins .ct-person div b { color: var(--ink-1); font-size: 0.88rem; display: block; line-height: 1.2; }
.certif-tab-content .certif-temoins .ct-person div span { color: var(--ink-4); font-size: 0.76rem; }
.certif-tab-content .certif-temoins .ct-qa {
	position: relative; margin: 0 0 0.9rem; padding: 1.35rem 1.5rem;
	background: #fff; border: 1px solid var(--bs-border-color); border-radius: 14px;
}
.certif-tab-content .certif-temoins .ct-qa::before {
	content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 3px;
	border-radius: 3px; background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.certif-tab-content .certif-temoins .ct-q { display: flex; gap: 0.75rem; align-items: baseline; margin: 0 0 1rem; }
.certif-tab-content .certif-temoins .ct-q-num {
	flex: none; font-size: 0.78rem; font-weight: 700; color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, white); border-radius: 7px;
	padding: 0.1rem 0.5rem; font-variant-numeric: tabular-nums;
}
.certif-tab-content .certif-temoins .ct-q-text {
	margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink-1); letter-spacing: -0.005em;
}
.certif-tab-content .certif-temoins .ct-a { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px dashed var(--bs-border-color); }
.certif-tab-content .certif-temoins .ct-a:first-of-type { border-top: 0; padding-top: 0; }
.certif-tab-content .certif-temoins .ct-a .ct-av { margin-top: 2px; }
.certif-tab-content .certif-temoins .ct-a-body { flex: 1; }
.certif-tab-content .certif-temoins .ct-a-name { font-weight: 700; font-size: 0.86rem; margin-right: 0.4rem; }
.certif-tab-content .certif-temoins .ct-a-text { color: var(--ink-2); font-size: 0.96rem; }

/* Teintes d'avatar par intervenant : accent (sp-a), rose (sp-b), teal (sp-c).
   Sobres — chaque teinte est fortement mélangée à l'accent (~45 %) pour rester
   dans la famille de l'univers ; juste assez pour distinguer les voix, sans
   marron. Initiales toujours en blanc. */
.certif-tab-content .certif-temoins .sp-b .ct-av { background: color-mix(in srgb, var(--accent) 45%, #bd6486); box-shadow: inset 0 0 0 2px color-mix(in srgb, #bd6486 45%, white); }
.certif-tab-content .certif-temoins .sp-c .ct-av { background: color-mix(in srgb, var(--accent) 45%, #46988b); box-shadow: inset 0 0 0 2px color-mix(in srgb, #46988b 45%, white); }
.certif-tab-content .certif-temoins .sp-a .ct-a-name { color: color-mix(in srgb, var(--accent) 78%, var(--ink-1)); }
.certif-tab-content .certif-temoins .sp-b .ct-a-name { color: #8a4a63; }
.certif-tab-content .certif-temoins .sp-c .ct-a-name { color: #2f6d63; }

@media (max-width: 720px) {
	.certif-tab-content .certif-temoins .ct-quotes { columns: 1; }
}

/* Intervenants */
.certif-intervenants {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.5rem;
}
/* Sans chapeau au-dessus : pas de margin-top, c'est le padding de l'onglet
   qui gère l'espacement avec la barre d'onglets. Le titre d'onglet print-only
   est toujours le 1er enfant du DOM, donc :first-child ne suffit pas — on cible
   aussi le cas où les cartes suivent directement ce titre (pas de chapeau). */
.certif-intervenants:first-child,
.certif-print-tab-title + .certif-intervenants { margin-top: 0; }
.certif-intervenant {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	padding: 1.25rem 1.5rem 1.25rem;
	background: #fff;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.certif-intervenant:hover {
	border-color: color-mix(in srgb, var(--accent) 50%, white);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.certif-intervenant-photo {
	flex: 0 0 auto;
	width: 100px;
	height: auto;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
	object-fit: contain;
}
@media (max-width: 575.98px) {
	.certif-intervenant-photo { width: 80px; }
}
.certif-intervenant-body { flex: 1 1 auto; min-width: 0; }
.certif-intervenant-name { font-weight: 600; color: var(--ink-1); }
.certif-intervenant-role {
	font-size: 0.82rem;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.15rem;
}
.certif-intervenant-bio { line-height: 1.5; }

/* Marges des <p> Markdown neutralisées pour équilibrer le padding — mêmes
   espacements haut/bas que la carte ait une photo ou non. */
.certif-intervenant-bio p:first-child { margin-top: 0; }
.certif-intervenant-bio p:last-child  { margin-bottom: 0; }

/* FAQ */
.certif-faq { margin-top: 2.5rem; }
.certif-faq .accordion-button:not(.collapsed) {
	background: color-mix(in srgb, var(--accent) 6%, white);
	color: var(--accent);
}
.certif-faq .accordion-button:focus { box-shadow: none; }

.duree-heures {
	opacity: 0.6;
}
.meta-pill-tag {
	display: inline-block;
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--accent);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.12rem 0.5rem;
	margin-right: 0.3rem;
	border-radius: 999px;
}

/* Page /financement-formations : 7 dispositifs en accordéons (réutilise .intra-item). */
.page-financement .intra-list { margin-top: 2rem; }
.page-financement .fin-item-icon {
	color: var(--accent);
	margin-right: 0.55rem;
	font-size: 1.1em;
	vertical-align: -0.05em;
}
.page-financement .fin-item-soustitre {
	color: var(--ink-4);
	font-size: 0.92rem;
	font-style: italic;
	margin-bottom: 0.85rem;
}
.page-financement .intra-item-body { line-height: 1.6; }
.page-financement .intra-item-body p { margin-bottom: 0.85rem; }
.page-financement .intra-item-body p:last-child { margin-bottom: 0; }
.page-financement .dispositif-meta {
	margin: 0;
	padding: 0.7rem 1.5rem;
	background: var(--bg-soft);
	border-top: 1px solid var(--bs-border-color);
	font-size: 0.9em;
	line-height: 1.5;
}
.page-financement .dispositif-meta dt {
	display: inline;
	color: var(--ink-4);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.74rem;
	margin: 0 0.4rem 0 0;
}
.page-financement .dispositif-meta dd {
	display: inline;
	color: var(--ink-2);
	margin: 0 1.75rem 0 0;
}
.page-financement .dispositif-meta dd:last-of-type { margin-right: 0; }

/* Sidebar fiche certificat — bloc Financement (logo CPF + lien financement). */
.sidebar-financement .financement-cpf {
	display: block;
	margin: 0.4rem 0 0.85rem;
}
.sidebar-financement .financement-cpf img {
	max-width: 140px;
	width: 100%;
	height: auto;
	transition: opacity 0.15s ease;
}
.sidebar-financement .financement-cpf:hover img { opacity: 0.8; }
.sidebar-financement .financement-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.93em;
	text-decoration: none;
	color: var(--accent);
}
.sidebar-financement .financement-link:hover { text-decoration: underline; }
.sidebar-financement .financement-link .bi { font-size: 0.85em; }

/* Lien financement inline sous le prix (certifs non éligibles CPF : pas de bloc Financement dédié). */
.financement-link-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.85rem;
	font-size: 0.93em;
	text-decoration: none;
	color: var(--accent);
}
.financement-link-inline:hover { text-decoration: underline; }
.financement-link-inline .bi { font-size: 0.85em; }

/* ---------------------------------------------------------------------------
 * Articles « autour de la data » (listing + fiche) & Glossaire
 * --------------------------------------------------------------------------- */

/* Style H1 + séparateur unifié pour les pages éditoriales data
   (listing /articles, fiche article, glossaire). */
.page-article .fiche-title,
.page-articles .fiche-title,
.page-glossaire .fiche-title {
	font-size: clamp(1.7rem, 1.7vw + 0.95rem, 2.2rem);
	margin-top: 2.4rem !important;
}
.page-article .title-separator,
.page-articles .title-separator,
.page-glossaire .title-separator {
	margin: 1.1rem 0 1.5rem;
}

/* Listing /articles */
.article-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 2rem;
}
.article-card {
	position: relative;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: 1.1rem;
	border: 1px solid #e4e6ec;
	border-radius: 16px;
	background: #fff;
	transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.article-card:hover {
	border-color: color-mix(in srgb, var(--accent) 35%, white);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}
.article-card-tag {
	--tag: var(--accent);
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.16rem 0.5rem;
	border-radius: 999px;
	color: color-mix(in srgb, var(--tag) 78%, black);
	background: color-mix(in srgb, var(--tag) 13%, white);
	border: 1px solid color-mix(in srgb, var(--tag) 24%, white);
}
.article-card-media {
	display: block;
	border-radius: 0.6rem;
	overflow: hidden;
	background: var(--bg-soft);
}
.article-card-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.article-card:hover .article-card-media img { transform: scale(1.04); }
.article-card-title {
	font-size: 1.45rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0.55rem 0 0.5rem;
}
.article-card-title a {
	color: var(--accent);
	text-decoration: none;
}
.article-card-title a:hover { color: color-mix(in srgb, var(--accent) 75%, black); }
.article-card-desc {
	color: var(--ink-3);
	font-size: 0.92rem;
	margin-bottom: 0.6rem;
}
.article-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--accent);
	text-decoration: none;
}
.article-card:hover .article-card-more { gap: 0.55rem; }
@media (max-width: 575.98px) {
	.article-card { grid-template-columns: 1fr; gap: 0.9rem; }
	.article-card-title { font-size: 1.15rem; }
}

/* Fiche article : clear des images flottées en fin de contenu */
.article-content::after { content: ''; display: block; clear: both; }

/* Titres d'article un cran plus gros que le rich-text par défaut (lecture longue) */
.article-content h2 { font-size: 1.4rem; color: var(--ink-2); }
.article-content h3 { font-size: 1.15rem; }
@media (max-width: 767.98px) {
	.article-content h2 { font-size: 1.25rem; }
	.article-content h3 { font-size: 1.08rem; }
}

/* Accordéons d'article (port des panneaux repliables legacy) */
.article-accordion {
	margin: 1.75rem 0 2.25rem;
	--bs-accordion-border-color: var(--bs-border-color);
	--bs-accordion-btn-bg: #fbfbfc;
	--bs-accordion-active-bg: color-mix(in srgb, var(--accent) 9%, white);
	--bs-accordion-active-color: var(--accent);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 20%, transparent);
	--bs-accordion-btn-color: var(--ink-1);
	--bs-accordion-border-radius: 0.5rem;
}
.article-accordion .accordion-button {
	font-weight: 500;
	font-size: 1.05rem;
	gap: 0.85rem;
}
.article-accordion .accordion-header { margin: 0; }
/* Pastille de numérotation dans le header d'accordéon (pattern modules/certificats). */
.article-accordion .acc-num {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 12%, white);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
}
.article-accordion .accordion-button:not(.collapsed) .acc-num { background: #fff; }
.article-accordion .accordion-body { color: var(--ink-2); }
.article-accordion .accordion-body > *:first-child { margin-top: 0; }
.article-accordion .accordion-body > *:last-child  { margin-bottom: 0; }

/* Fiche article : visuels propres dans le flux .rich-text */
.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}
.article-content figure { margin: 1.5rem 0; }
.article-content figure img { display: block; }
.article-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.88rem;
	color: var(--ink-4);
	text-align: center;
}
.article-img-center {
	display: block;
	margin: 1.5rem auto;
}
/* Coins arrondis sur les visuels d'article (image de tête le cas échéant + inline).
   Même radius que la bannière des fiches formation et les visuels certificat (10px). */
.article-content img { border-radius: 10px; }
/* Visuel full-width en tête d'article : un peu d'air avant l'image.
   margin-top (et non padding-top) sinon le padding décale le bitmap dans l'image
   et masque le border-radius des coins du haut. Ce sélecteur est plus spécifique
   que le reset .rich-text > *:first-child { margin-top: 0 }, la marge s'applique. */
.article-content > img:first-child[style*="100%"] { margin-top: 1.10rem; }
.article-content blockquote {
	margin: 1.75rem 0;
	padding: 0.4rem 0 0.4rem 1.4rem;
	border-left: 3px solid color-mix(in srgb, var(--accent) 55%, white);
	color: var(--ink-3);
	font-style: italic;
	font-size: 1.05rem;
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-size: 0.9rem;
	color: var(--ink-4);
}

/* Callout « Lire aussi » (renvois inter-articles) */
.article-content .article-readmore {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	background: color-mix(in srgb, var(--accent) 6%, white);
	border-left: 3px solid color-mix(in srgb, var(--accent) 45%, white);
	border-radius: 0.35rem;
	font-size: 0.95rem;
}
.article-content .article-readmore .bi { color: var(--accent); }
.article-content .article-readmore strong { color: var(--ink-2); }
.article-content .article-readmore a { text-decoration: none; font-weight: 500; }
.article-content .article-readmore a:hover { text-decoration: underline; }
.article-img-left  { float: left;  margin: 0.3rem 1.75rem 1rem 0; max-width: 50%; }
.article-img-right { float: right; margin: 0.3rem 0 1rem 1.75rem; max-width: 50%; }
@media (max-width: 575.98px) {
	.article-img-left, .article-img-right { float: none; max-width: 100%; margin: 1.25rem auto; }
}

/* CTA bas de fiche article (reprend le ton de .certif-calendly) */
.article-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 3rem 0 1rem;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--accent) 9%, white);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
	border-radius: 0.75rem;
}
.article-cta-title { font-weight: 600; color: var(--ink-1); }
.article-cta-sub { color: var(--ink-3); font-size: 0.95rem; }
.article-cta-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
	.article-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.article-cta-actions { flex-direction: column; }
}

/* Glossaire : index de tous les termes + entrées groupées par lettre */
.glossaire-index {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 2rem 0 2.75rem;
	padding: 1.35rem 1.5rem;
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
		var(--bg-soft);
	border: 1px solid var(--bs-border-color);
	border-radius: 1rem;
}
.glossaire-index a {
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	padding: 0.22rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--bs-border-color);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.glossaire-index a:hover {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}

.glossaire-list { display: flex; flex-direction: column; gap: 2.5rem; }
.glossaire-group {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.5rem;
	scroll-margin-top: 5rem;
}
.glossaire-letter {
	position: sticky;
	top: 4.5rem;
	align-self: start;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	color: color-mix(in srgb, var(--accent) 28%, white);
	text-align: center;
	padding-top: 0.1rem;
	border-top: 3px solid color-mix(in srgb, var(--accent) 35%, white);
}
.glossaire-group-body { min-width: 0; display: flex; flex-direction: column; }
.glossaire-entry {
	scroll-margin-top: 5rem;
	padding: 0 0 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--bs-border-color);
}
.glossaire-group-body .glossaire-entry:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.glossaire-entry:target {
	scroll-margin-top: 5.5rem;
}
.glossaire-entry:target .glossaire-terme { color: var(--accent); }

/* Flash de surbrillance au clic (index ou xref) — piloté en JS via .is-highlighted */
@keyframes glossaireFlash {
	0%   { background-color: var(--flash); box-shadow: 0 0 0 0.6rem var(--flash); }
	80%  { background-color: var(--flash); box-shadow: 0 0 0 0.6rem var(--flash); }
	100% { background-color: transparent; box-shadow: 0 0 0 0.6rem transparent; }
}
.glossaire-entry.is-highlighted {
	--flash: color-mix(in srgb, var(--accent) 14%, transparent);
	border-radius: 0.4rem;
	animation: glossaireFlash 2.8s ease-out;
}
.glossaire-entry.is-highlighted .glossaire-terme { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
	.glossaire-entry.is-highlighted { animation: none; }
}
.glossaire-terme {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0 0 0.5rem;
	scroll-margin-top: 5rem;
}
.glossaire-anchor {
	margin-left: 0.35rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--accent) 55%, white);
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.glossaire-terme:hover .glossaire-anchor { opacity: 1; }
.glossaire-anchor:hover { color: var(--accent); }

@media (max-width: 575.98px) {
	.glossaire-group {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.glossaire-letter {
		position: static;
		font-size: 1.6rem;
		text-align: left;
		display: inline-block;
		padding: 0 0 0.15rem;
		border-top: 0;
		border-bottom: 3px solid color-mix(in srgb, var(--accent) 35%, white);
	}
}

/* Lien inter-glossaire (xref) : depuis une définition ou un article */
.glossaire-xref {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, white);
}
.glossaire-xref:hover {
	color: color-mix(in srgb, var(--accent) 75%, black);
	border-bottom-style: solid;
}

/* ============================================================
   Page « Types de formations proposés » (/offre)
   ============================================================ */
/* Même respiration au-dessus du H1 que les pages « autour de la data ». */
.page-offre .fiche-title,
.page-financement .fiche-title,
.page-contact .fiche-title,
.page-centre .fiche-title,
.page-candidature .fiche-title {
	margin-top: 2.4rem !important;
}
.page-offre .offre-section {
	margin-top: 3rem;
	padding-top: 2.6rem;
	border-top: 1px solid #e6e8ee;
}
.page-offre #formations-inter {
	border-top: 0;
	padding-top: 0;
	margin-top: 2.4rem;
}
.offre-section-title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0 0 1.4rem;
	letter-spacing: -0.01em;
}
.offre-section-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 1.15rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, white);
}

/* Brochure — vignette de couverture + accroche */
.offre-brochure {
	display: flex;
	align-items: stretch;
	gap: 1.4rem;
	margin: 2rem 0 0.5rem;
	padding: 1.4rem;
	border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
	border-radius: 16px;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 10%, white), transparent 60%),
		color-mix(in srgb, var(--brand) 4%, white);
}
.offre-brochure-cover {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	border-radius: 9px;
	overflow: hidden;
	box-shadow: 0 10px 26px -10px rgba(40, 25, 45, 0.45), 0 2px 6px rgba(40, 25, 45, 0.12);
	transition: transform .16s ease, box-shadow .16s ease;
}
.offre-brochure-cover img {
	display: block;
	width: 120px;
	height: auto;
	border-radius: 9px;
}
.offre-brochure-cover:hover {
	transform: translateY(-3px) rotate(-0.6deg);
	box-shadow: 0 16px 34px -10px rgba(40, 25, 45, 0.5), 0 3px 8px rgba(40, 25, 45, 0.16);
}
.offre-brochure-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	line-height: 1.35;
}
.offre-brochure-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--brand);
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brand) 12%, white);
}
.offre-brochure-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink-1);
}
.offre-brochure-sub { font-size: 0.9rem; color: var(--ink-3); }
.offre-brochure-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.7rem;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-weight: 500;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background .14s ease, transform .14s ease;
}
.offre-brochure-btn:hover {
	background: color-mix(in srgb, var(--brand) 86%, black);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

/* En savoir plus (collapse) */
.offre-collapse-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	padding: 0;
	margin-top: 0.25rem;
	color: var(--brand);
	font-weight: 500;
	font-size: 0.92rem;
	cursor: pointer;
}
.offre-collapse-toggle:hover { text-decoration: underline; }
.offre-collapse-toggle .bi { transition: transform .18s ease; }
.offre-collapse-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.offre-collapse-toggle .offre-collapse-less { display: none; }
.offre-collapse-toggle[aria-expanded="true"] .offre-collapse-more { display: none; }
.offre-collapse-toggle[aria-expanded="true"] .offre-collapse-less { display: inline; }

/* Domaines de formation */
.offre-domaines-title {
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--ink-2);
	margin: 2rem 0 1rem;
}
.offre-domaines-title strong { font-weight: 600; color: var(--ink-1); }
.offre-domaines { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.offre-domaine {
	--pastille: var(--brand);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.05rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--pastille) 30%, white);
	background: color-mix(in srgb, var(--pastille) 12%, white);
	color: color-mix(in srgb, var(--pastille) 80%, black);
	font-weight: 500;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.offre-domaine-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pastille);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pastille) 18%, transparent);
}
.offre-domaine:hover {
	background: var(--pastille);
	border-color: var(--pastille);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pastille) 60%, transparent);
}
.offre-domaine:hover .offre-domaine-dot {
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, white 35%, transparent);
}
.offre-domaine--all {
	border-style: dashed;
	border-color: #c4cad4;
	background: #fff;
	color: var(--ink-3);
}
.offre-domaine--all:hover {
	background: #f3f4f7;
	border-color: #aab2bf;
	color: var(--ink-1);
	box-shadow: none;
}
.offre-domaine--all:hover .offre-domaine-dot { background: var(--pastille); }

/* Clients (mur de tags) */
.offre-clients-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 2.2rem 0 1.1rem;
}
.offre-clients-group + .offre-clients-group { margin-top: 1.4rem; }
.offre-clients-label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-4);
	font-weight: 600;
	margin-bottom: 0.65rem;
}
.offre-clients-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.offre-clients-tags li {
	padding: 0.32rem 0.75rem;
	border-radius: 7px;
	background: #f1f2f5;
	border: 1px solid #e4e6ec;
	color: var(--ink-2);
	font-size: 0.84rem;
}

/* CTA sur-mesure */
.offre-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--brand) 6%, white);
	border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
}
.offre-cta-title { font-weight: 600; color: var(--ink-1); }
.offre-cta-title .bi { color: var(--brand); margin-right: 0.3rem; }
.offre-cta-sub { font-size: 0.9rem; color: var(--ink-3); }
.offre-cta-btn { flex: 0 0 auto; white-space: nowrap; }

/* Liste des cursus certifiants */
.offre-certifs {
	list-style: none;
	margin: 1.4rem 0 1.6rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.offre-certifs a {
	--pastille: var(--brand);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem 0.9rem 1.3rem;
	border-radius: 10px;
	border: 1px solid #e4e6ec;
	background: #f7f8fa;
	text-decoration: none;
	color: var(--ink-1);
	overflow: hidden;
	transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.offre-certifs a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--pastille);
}
.offre-certifs a:hover {
	border-color: color-mix(in srgb, var(--pastille) 45%, white);
	background: color-mix(in srgb, var(--pastille) 6%, white);
	text-decoration: none;
	transform: translateX(2px);
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--pastille) 70%, transparent);
}
.offre-certif-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--pastille);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pastille) 16%, transparent);
	flex: 0 0 auto;
}
.offre-certif-titre { flex: 1 1 auto; font-weight: 500; }
.offre-certif-arrow {
	color: var(--pastille);
	opacity: 0.7;
	transition: transform .14s ease, opacity .14s ease;
}
.offre-certifs a:hover .offre-certif-arrow { opacity: 1; transform: translateX(3px); }
.offre-certifs-all { margin-top: 0.2rem; }

/* ============================================================
   Page « Nous contacter » (/nous-contacter) — infos + formulaire
   ============================================================ */

/* Méthodes de contact — cartes cliquables (e-mail, téléphone) */
.page-contact .contact-methods {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.page-contact .contact-method {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	border-radius: 14px;
	border: 1px solid #e4e6ec;
	background: #fff;
	color: var(--ink-1);
	text-decoration: none;
	transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.page-contact .contact-method:hover {
	border-color: color-mix(in srgb, var(--brand) 38%, white);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--brand) 75%, transparent);
	text-decoration: none;
	color: var(--ink-1);
}
.page-contact .contact-method-ico {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 1.15rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, white);
}
.page-contact .contact-method-body {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.page-contact .contact-method-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-4);
}
.page-contact .contact-method-value {
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--ink-1);
}
.page-contact .contact-method-arrow {
	margin-left: auto;
	color: var(--brand);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .14s ease, transform .14s ease;
}
.page-contact .contact-method:hover .contact-method-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Carte RDV — gradient façon brochure /offre */
.page-contact .contact-rdv {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.4rem;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 10%, white), transparent 60%),
		color-mix(in srgb, var(--brand) 4%, white);
}
.page-contact .contact-rdv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--brand);
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brand) 12%, white);
}
.page-contact .contact-rdv-title {
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--ink-1);
	margin-top: 0.25rem;
}
.page-contact .contact-rdv-sub {
	font-size: 0.9rem;
	color: var(--ink-3);
	line-height: 1.4;
}
.page-contact .contact-rdv-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.8rem;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-weight: 500;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background .14s ease, transform .14s ease;
}
.page-contact .contact-rdv-btn:hover {
	background: color-mix(in srgb, var(--brand) 86%, black);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

/* Carte formulaire */
.page-contact .contact-form-card {
	padding: 1.75rem 1.8rem 1.85rem;
	border-radius: 16px;
	border: 1px solid #e4e6ec;
	background: #fff;
	box-shadow: 0 16px 44px -30px rgba(40, 25, 45, 0.40);
}
.page-contact .contact-form-title {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0 0 1.1rem;
}
.page-contact .contact-form-title--mt { margin-top: 1.9rem; }
.page-contact .contact-form-ico {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-size: 1rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, white);
}
.page-contact .contact-form .form-label {
	font-weight: 500;
	font-size: 0.9rem;
}
.page-contact .contact-form .form-control,
.page-contact .contact-form .form-select {
	border-color: #ced2da;
}
.page-contact .contact-form .form-control:focus,
.page-contact .contact-form .form-select:focus {
	border-color: color-mix(in srgb, var(--brand) 55%, white);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 16%, transparent);
}

/* ============================================================
   Page « Notre centre de formation » (/notre-centre-de-formation)
   ============================================================ */

/* Étiquette pilule en tête de carte (réutilisée dans toute la page). */
.page-centre .centre-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--brand);
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brand) 12%, white);
}

/* Cartes adresse / contact */
.page-centre .centre-card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.7rem 1.7rem;
	border-radius: 16px;
	border: 1px solid #e4e6ec;
	background: #fff;
	box-shadow: 0 16px 44px -32px rgba(40, 25, 45, 0.36);
}
.page-centre .centre-address {
	margin: 1rem 0 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--ink-2);
}
.page-centre .centre-address strong {
	display: block;
	font-size: 1.08rem;
	color: var(--ink-1);
	margin-bottom: 0.2rem;
}
.page-centre .centre-pmr {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin: 1.1rem 0 0;
	padding: 0.4rem 0.8rem;
	border-radius: 10px;
	font-size: 0.88rem;
	color: color-mix(in srgb, var(--accent-success, #2e7d4f) 88%, black);
	background: color-mix(in srgb, #2e7d4f 9%, white);
	border: 1px solid color-mix(in srgb, #2e7d4f 22%, white);
}
.page-centre .centre-pmr i { font-size: 1rem; }
.page-centre .centre-maps-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.3rem;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--brand);
	text-decoration: none;
}
.page-centre .centre-maps-link:hover {
	color: color-mix(in srgb, var(--brand) 84%, black);
	text-decoration: none;
}
.page-centre .centre-maps-link-arrow {
	font-size: 0.85rem;
	opacity: 0.55;
	transition: transform .14s ease, opacity .14s ease;
}
.page-centre .centre-maps-link:hover .centre-maps-link-arrow {
	transform: translate(2px, -2px);
	opacity: 1;
}

/* Lignes de contact (téléphone / e-mail) */
.page-centre .centre-contact-rows {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 1rem;
}
.page-centre .centre-contact-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.9rem;
	border-radius: 12px;
	border: 1px solid #e8eaef;
	background: #fbfbfd;
	color: var(--ink-1);
	text-decoration: none;
	transition: border-color .14s ease, background .14s ease;
}
.page-centre .centre-contact-row:hover {
	border-color: color-mix(in srgb, var(--brand) 35%, white);
	background: color-mix(in srgb, var(--brand) 4%, white);
	color: var(--ink-1);
	text-decoration: none;
}
.page-centre .centre-contact-ico {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 1.05rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, white);
}
.page-centre .centre-contact-body {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.page-centre .centre-contact-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-4);
}
.page-centre .centre-contact-value {
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-1);
}
.page-centre .centre-hours {
	display: flex;
	gap: 0.85rem;
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid #edeef2;
}
.page-centre .centre-hours-ico {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 1.05rem;
	color: var(--ink-3);
	background: #f1f2f5;
}
.page-centre .centre-hours-line {
	margin: 0 0 0.25rem;
	font-size: 0.94rem;
	color: var(--ink-2);
	line-height: 1.45;
}

/* Sections (Comment venir / plan / chiffres) */
.page-centre .centre-section {
	margin-top: 3rem;
	padding-top: 2.6rem;
	border-top: 1px solid #e6e8ee;
}
.page-centre .centre-section-title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.45rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0 0 0.4rem;
}
.page-centre .centre-section-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 1.15rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 12%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, white);
}
.page-centre .centre-section-sub {
	color: var(--ink-3);
	font-size: 0.98rem;
	margin: 0 0 1.5rem;
}

/* Grille des moyens d'accès */
.page-centre .centre-access {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0.9rem;
}
.page-centre .centre-access-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
	border-radius: 13px;
	border: 1px solid #e6e8ee;
	background: #fff;
}
.page-centre .centre-access-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 1.15rem;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 10%, white);
}
.page-centre .centre-access-body {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.page-centre .centre-access-mode {
	font-weight: 600;
	color: var(--ink-1);
	font-size: 0.98rem;
}
.page-centre .centre-access-detail {
	color: var(--ink-3);
	font-size: 0.9rem;
	margin-top: 0.15rem;
}

/* Plan Google Maps encadré */
.page-centre .centre-map {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #e0e2e9;
	box-shadow: 0 18px 50px -34px rgba(40, 25, 45, 0.40);
	line-height: 0;
}
.page-centre .centre-map iframe { display: block; }

/* Bande de chiffres clés */
.page-centre .centre-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 1rem;
	margin-top: 1.7rem;
}
.page-centre .centre-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem 1.4rem;
	border-radius: 15px;
	border: 1px solid color-mix(in srgb, var(--brand) 16%, white);
	background:
		radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--brand) 9%, white), transparent 62%),
		color-mix(in srgb, var(--brand) 3.5%, white);
}
.page-centre .centre-stat-num {
	font-size: 2.1rem;
	font-weight: 500;
	line-height: 1;
	color: var(--brand);
	letter-spacing: -0.01em;
}
.page-centre .centre-stat-unit {
	font-size: 1.15rem;
	font-weight: 400;
	margin-left: 0.12rem;
}
.page-centre .centre-stat-label {
	font-size: 0.92rem;
	color: var(--ink-2);
	line-height: 1.4;
}

/* CTA bas de page */
.page-centre .centre-cta {
	margin-top: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.5rem 1.8rem;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--brand) 20%, white);
	background:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--brand) 10%, white), transparent 60%),
		color-mix(in srgb, var(--brand) 4%, white);
}
.page-centre .centre-cta-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--ink-1);
}
.page-centre .centre-cta-sub {
	font-size: 0.94rem;
	color: var(--ink-3);
	margin-top: 0.25rem;
}
.page-centre .centre-cta-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.page-centre .centre-section-title { font-size: 1.25rem; }
	.page-centre .centre-stat-num { font-size: 1.85rem; }
}

/* ============================================================
   Page « Nos intervenants » (/intervenants) — annuaire filtrable
   ============================================================ */
.interv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1.25rem;
	padding-top: 0.5rem;
}
.interv-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.35rem 1.4rem;
	border: 1px solid #cdd2db;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
}
.interv-card-name {
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ink-1);
	margin: 0;
}
.interv-card-bio {
	color: var(--ink-3);
	margin: 0;
}
.interv-card-bio.intervenant-bio {
	-webkit-line-clamp: 5;
	line-clamp: 5;
}
.interv-card-courses {
	margin-top: auto;
	padding-top: 0.4rem;
}
.interv-card-courses-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-5);
	font-weight: 500;
	margin-bottom: 0.5rem;
}
.interv-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.interv-tag {
	--tag-accent: #5b6b87;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.28rem 0.65rem;
	border-radius: 7px;
	background: color-mix(in srgb, var(--tag-accent) 6%, #f3f4f7);
	border: 1px solid color-mix(in srgb, var(--tag-accent) 20%, white);
	color: color-mix(in srgb, var(--tag-accent) 80%, black);
	font-size: 0.8rem;
	text-decoration: none;
	line-height: 1.3;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.interv-tag:hover {
	background: color-mix(in srgb, var(--tag-accent) 16%, white);
	border-color: color-mix(in srgb, var(--tag-accent) 40%, white);
	color: color-mix(in srgb, var(--tag-accent) 92%, black);
	text-decoration: none;
}
.interv-tag--certif { font-weight: 500; }
.interv-tag--certif .bi { opacity: 0.85; }
.interv-tags.is-clipped li[data-clip] { display: none; }
.interv-more-toggle {
	margin-top: 0.55rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--brand);
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
}
.interv-more-toggle:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
	.interv-grid { grid-template-columns: 1fr; gap: 1rem; }
	.offre-cta { flex-direction: column; align-items: flex-start; }
	.offre-cta-btn { width: 100%; text-align: center; }
	.offre-brochure { flex-direction: column; align-items: center; text-align: center; }
	.offre-brochure-text { align-items: center; }
	.offre-brochure-eyebrow,
	.offre-brochure-btn { align-self: center; }
	.offre-section-title { font-size: 1.3rem; }
}

/* ===========================================================================
 * Home (/) — HomeController + Views/site/home.php
 * Réutilise les composants du site : .catalog-chip (domaines), .certif-card,
 * .formation-card, .catalog-grid. Le CSS ci-dessous = liant + sections propres.
 * ======================================================================== */

/* --- Rythme des sections (fonds alternés blanc / gris doux) --- */
.home-section { padding: 3.2rem 0; }
.home-une { background: var(--bg-soft); }
.home-certifs { background: #fff; }
.home-incontournables { background: var(--bg-soft); }
.home-chiffres { background: #fff; padding: 5.5rem 0; }
.home-prochaines { background: #fff; }

/* Mobile : fin filet gris pour mieux séparer les sections (les fonds alternés
   se distinguent peu sur petit écran). */
@media (max-width: 640px) {
	.home-section,
	.home-apropos { border-top: 1px solid #d5dae2; }
}

/* En-têtes de section homogènes. */
.section-head { margin-bottom: 2rem; max-width: 52rem; }
/* Titres de section home : même esthétique que .catalog-title (h1 des listings)
   mais classes distinctes, pour pouvoir ajuster la taille indépendamment. */
.section-head-title {
	font-size: clamp(1.6rem, 1.1vw + 1.25rem, 2.1rem);
	font-weight: 400; color: #5e3d5b; letter-spacing: -0.015em; margin: 0; line-height: 1.2;
}
.section-head-title-prefix { font-weight: 300; color: #8a6e85; }
.section-head-title-prefix > .bi { margin-right: 0.4rem; }
.section-head-lede { color: var(--ink-3); margin: 0.5rem 0 0; font-size: 1.1rem; }
.section-cta { margin: 2rem 0 0; font-weight: 600; text-align: right; }
.section-cta a { display: inline-flex; align-items: center; gap: 0.4rem; }
.section-cta a i { transition: transform .15s ease; }
.section-cta a:hover { text-decoration: none; }

/* --- Carousel de cartes éditoriales avec visuel (« À la une » + certifiants) --- */
/* overflow-x: clip borne le débord latéral du viewport (cf. .home-une-viewport)
   au bord de l'écran, sans scroll horizontal ; l'axe vertical reste visible
   (hover + ombre basse des cartes). */
.home-une, .home-certifs { --une-gap: 1.6rem; --une-visible: 3; overflow-x: clip; }

/* En-tête : titre/lede à gauche, flèches du carousel à droite. */
.home-une-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	max-width: none;
}
.home-une-head-text { max-width: 52rem; }
.home-une-nav-group { display: flex; gap: 0.5rem; flex-shrink: 0; }
.home-une-nav {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* Repris du bouton « Rechercher » du hero : teinte brand estompée + texte
	   brand foncé, bordure brand plus marquée pour détacher la flèche. */
	border: 1.5px solid color-mix(in srgb, var(--brand) 25%, white);
	background: color-mix(in srgb, var(--brand) 12%, white);
	color: color-mix(in srgb, var(--brand) 55%, black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.home-une-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.home-une-nav:active { transform: scale(0.94); }

/* Viewport + tapis roulant. Le padding-bottom dégage l'ombre des cartes (sinon
   rognée par overflow:hidden) et aère sous le carousel. */
/* Le padding latéral dégage l'ombre/bordure des cartes de bord (sinon rognées
   par overflow:hidden) ; la marge négative égale ramène le tapis à fleur du
   conteneur (≤ gouttière Bootstrap → pas de scroll horizontal). Le padding-bottom
   dégage l'ombre du bas et aère sous le carousel. */
.home-une-viewport { overflow: hidden; padding: 0 1px 1.75rem; margin: 0 -1px; }
.home-une-track {
	display: flex;
	gap: var(--une-gap);
	will-change: transform;
}
.home-une-track > .home-une-card {
	flex: 0 0 calc((100% - (var(--une-visible) - 1) * var(--une-gap)) / var(--une-visible));
	min-width: 0;
}
.home-une-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 55, 0.06), 0 14px 32px -20px rgba(20, 30, 55, 0.4);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.home-une-card:hover {
	transform: translateY(-4px);
	/* même étendue qu'au repos, juste assombrie (pas d'expansion). */
	box-shadow: 0 2px 4px rgba(20, 30, 55, 0.1), 0 14px 32px -20px rgba(20, 30, 55, 0.62);
}
.home-une-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.home-une-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-soft);
}
.home-une-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Les visuels sont des bandeaux larges, souvent avec le contenu calé à gauche
	   et du blanc à droite (réservé au texte sur la fiche) : on cadre à gauche
	   pour que la carte montre le graphisme, pas le vide. */
	object-position: left center;
	display: block;
	transition: transform 0.45s ease;
}
.home-une-card:hover .home-une-card-img { transform: scale(1.045); }
/* filet d'accent en bas du visuel + léger fondu vers le blanc de la carte */
.home-une-card-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--card-accent, #5b6b87);
}
.home-une-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.15rem 1.25rem 1.3rem;
	flex: 1;
}
.home-une-card-title {
	font-size: 1.14rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.005em;
	color: var(--ink-1);
	margin: 0;
	transition: color 0.2s ease;
}
.home-une-card-link:hover { text-decoration: none; }
.home-une-card-link:hover .home-une-card-title { color: var(--card-accent); }
.home-une-card .formation-card-meta { margin: 0; }
/* Texte de présentation (cartes certifiants /certificats), affiché en entier. */
.home-une-card-teaser {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ink-3);
}
.home-une-card-teaser strong,
.home-une-card-teaser b { font-weight: 500; color: var(--ink-1); }
.home-une-card-cta {
	margin-top: auto;
	padding-top: 0.4rem;
	font-weight: 600;
	color: var(--card-accent, var(--brand));
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.home-une-card-cta i { transition: transform 0.2s ease; }
.home-une-card-link:hover .home-une-card-cta i { transform: translateX(3px); }

/* Pied de carte certifiant : prochaine session à gauche, CTA poussé à droite. */
.home-une-card-foot {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid #e7eaef;
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
}
.home-une-card-session {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
.home-une-card-session-date { display: inline-flex; align-items: center; gap: 0.3rem; }
.home-une-card-session i { color: var(--card-accent); font-size: 0.9em; }
.home-une-card-session.is-complete { color: #c0392b; }
.home-une-card-session.is-complete i { color: #c0392b; }

@media (max-width: 992px) {
	.home-une, .home-certifs { --une-visible: 2; }
}
@media (max-width: 640px) {
	.home-une, .home-certifs { --une-visible: 1; }
	/* En-tête de carousel en mobile : titre pleine largeur (sinon le bloc flèches
	   rogne la ligne et force des retours), puis lede à gauche + flèches à droite.
	   Les flèches sortent du flux (absolute bas-droite) ; le lede réserve la place
	   à droite. Espacements verticaux inchangés (flux naturel du header). */
	.home-une-head { display: block; position: relative; }
	.home-une-head .section-head-lede { padding-right: 7rem; }
	.home-une-head .home-une-nav-group { position: absolute; right: 0; bottom: 0; }
}

/* Drapeau « Double diplôme » en surimpression sur le média d'une carte certif. */
.home-une-card-flag-ext { left: .6rem; color: #fff; background: color-mix(in srgb, var(--card-accent) 80%, #14233a); }
/* Cartes certifiants : même bordure détourée que les cartes /formations. */
.home-certifs .home-une-card { border: 1px solid #dcdfe6; }
.section-cta a:hover i { transform: translateX(3px); }

/* --- Hero (inversé : texte clair sur fond brand foncé texturé) --- */
/* Recette texture des pages univers, poussée d'un cran : double spotlight
   (lumière haut-gauche + assombrissement bas-droite) + grain SVG noir.
   Volontairement monochrome brand — la couleur vient des pastilles domaines. */
.home-hero {
	position: relative;
	background-color: color-mix(in srgb, var(--brand) 90%, black);
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
		radial-gradient(ellipse 95% 130% at 12% -20%,
			color-mix(in srgb, var(--brand) 70%, white) 0%,
			transparent 55%),
		radial-gradient(ellipse 90% 120% at 105% 125%,
			color-mix(in srgb, var(--brand) 60%, black) 0%,
			transparent 55%),
		linear-gradient(135deg,
			var(--brand) 0%,
			color-mix(in srgb, var(--brand) 85%, black) 55%,
			color-mix(in srgb, var(--brand) 70%, black) 100%);
	color: #fff;
	padding: 2.9rem 0 4.1rem;
}
/* Hero pleine largeur du conteneur (texte compris). */
.home-hero-inner { position: relative; z-index: 1; max-width: none; }
/* Eyebrow = petit badge verre dépoli. */
.home-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.71rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	color: rgba(255,255,255,0.92);
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 0.42rem 0.9rem; border-radius: 999px;
	margin: 0 0 1.9rem; backdrop-filter: blur(3px);
}
.home-hero-eyebrow .bi { font-size: 0.95rem; color: color-mix(in srgb, var(--brand) 45%, white); }
.home-hero-title {
	font-size: clamp(1.75rem, 1.7vw + 1rem, 2.45rem);
	font-weight: 300; line-height: 1.12; letter-spacing: -0.02em;
	color: #fff; margin: 0 0 1.5rem;
}
.home-hero-title-soft { font-weight: 300; color: rgba(255,255,255,0.55); }
/* Lede : seul bloc du hero borné en largeur (confort de lecture). */
.home-hero-lede { font-size: 1.22rem; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 0 2.5rem; max-width: 50rem; font-weight: 300; }
.home-hero-lede strong { font-weight: 600; color: #fff; }

/* Domaines = pills .catalog-chip restylées pour le fond sombre : au repos, pill
   pleine couleur du domaine + pastille blanche, à plat ; au survol, lift + halo. */
.home-domaines { display: flex; flex-wrap: wrap; gap: 0.55rem 0.65rem; margin-bottom: 2.3rem; }
.home-domaines .catalog-chip {
	text-decoration: none;
	background: var(--chip-accent);
	border-color: var(--chip-accent);
	color: #fff;
	padding: 0.5rem 1.05rem;
}
.home-domaines .catalog-chip::before {
	background: #fff;
	box-shadow: none;
}
.home-domaines .catalog-chip:hover {
	transform: translateY(-2px);
	box-shadow:
		0 10px 26px -8px color-mix(in srgb, var(--chip-accent) 75%, transparent),
		0 0 0 4px color-mix(in srgb, var(--chip-accent) 22%, transparent);
}
.home-domaines .catalog-chip:hover::before {
	box-shadow: 0 0 0 3px color-mix(in srgb, white 35%, transparent);
}

/* CTA « Toutes nos formations courtes » — mobile uniquement (en desktop ce lien
   vit dans les accès rapides). Aplat blanc plein pour trancher avec les pills
   domaines colorées, même forme pill + pleine largeur pour rester harmonieux. */
.home-hero-cta { display: none; }

/* Recherche — barre blanche qui « flotte » sur le hero sombre (ombre portée). */
.home-search {
	position: relative; display: flex; align-items: stretch; max-width: 51rem; margin-bottom: 2.1rem;
	border-radius: 14px;
	box-shadow: 0 16px 38px -18px rgba(0,0,0,0.55);
}
.home-search > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 1.05rem; pointer-events: none; z-index: 1; }
.home-search input {
	flex: 1 1 auto; min-width: 0; height: 54px;
	border: 1px solid transparent; border-right: 0; border-radius: 14px 0 0 14px;
	padding: 0 1rem 0 2.85rem; font-size: 1rem; background: #fff; color: var(--ink-1);
	transition: box-shadow .12s ease;
}
.home-search input::-webkit-search-cancel-button { display: none; }
.home-search input:focus { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, white); }
.home-search-btn {
	--search-btn: color-mix(in srgb, var(--brand) 28%, white);
	flex: 0 0 auto; border: 1px solid var(--search-btn); background: var(--search-btn);
	color: color-mix(in srgb, var(--brand) 55%, black);
	border-radius: 0 14px 14px 0; padding: 0 1.5rem; font-weight: 600; font-size: 0.95rem; cursor: pointer;
	transition: filter .12s ease;
}
.home-search-btn:hover { filter: brightness(1.06); }

/* Autocomplétion : panneau de suggestions sous le champ hero. */
.home-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	background: #fff;
	border: 1px solid #d9dde3;
	border-radius: 12px;
	box-shadow: 0 18px 40px -18px rgba(20,30,50,0.35);
	padding: 0.35rem;
	max-height: 22rem;
	overflow-y: auto;
}
.home-suggest-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	color: var(--ink-1);
	text-decoration: none;
}
.home-suggest-item:hover,
.home-suggest-item.is-active {
	background: var(--bg-soft);
	text-decoration: none;
}
.home-suggest-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dom, var(--brand));
}
.home-suggest-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.home-suggest-line { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.home-suggest-title { font-weight: 500; font-size: 0.97rem; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-suggest-title mark { background: rgba(175, 131, 181, 0.22); color: inherit; padding: 0; border-radius: 3px; }
.home-suggest-dom { font-size: 0.8rem; color: va	r(--ink-4); }
.home-suggest-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	color: var(--dom, var(--brand));
	background: color-mix(in srgb, var(--dom, var(--brand)) 14%, transparent);
}
.home-suggest-badge .bi { font-size: 0.85em; }

/* Liens rapides — discrets, en ligne (texte clair sur fond sombre). */
.home-quicklinks { display: flex; flex-wrap: wrap; gap: 0.45rem 1.5rem; }
.home-quicklinks a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.82); }
.home-quicklinks a:hover { color: #fff; text-decoration: none; }
.home-quicklinks .bi { color: color-mix(in srgb, var(--brand) 42%, white); opacity: 1; transition: color .12s ease; }
.home-quicklinks a:hover .bi { color: #fff; }

/* --- Chiffres-clés --- */
.home-chiffres-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.home-chiffre { padding-left: 1.1rem; border-left: 3px solid color-mix(in srgb, var(--brand) 55%, white); }
.home-chiffre-num { display: block; font-size: 2.2rem; font-weight: 600; color: var(--brand); line-height: 1; letter-spacing: -0.02em; }
.home-chiffre-unit { font-size: 0.95rem; font-weight: 600; margin-left: 0.15rem; color: color-mix(in srgb, var(--brand) 70%, var(--ink-4)); }
.home-chiffre-label { display: block; margin-top: 0.55rem; color: var(--ink-3); font-size: 0.95rem; line-height: 1.4; }

/* --- Qui sommes-nous — bandeau pleine largeur repris à l'identique du legacy :
   photo du bâtiment ENSAE sur fond ardoise #484b56, séparateur magenta, logos
   blancs. Seule différence : la police (celle du new site, via le body). --- */
.home-apropos {
	background-color: #524858;
	background-image: url("../img/fond-home-a-propos.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	color: #fff;
	padding: 5.2rem 0 5.4rem;
}
@media (max-width: 767.98px) {
	.home-apropos { background-image: url("../img/fond-home-a-propos-xs.jpg"); }
}
.home-apropos-title { font-size: 2.25rem; font-weight: 200; color: #fff; margin: 0; line-height: 1.15; display: flex; align-items: center; gap: 0.75rem; }
.home-apropos-icon { flex: 0 0 auto; font-size: 1.9rem; line-height: 1; opacity: 0.9; color: #c6abc6; }
.home-apropos-sep { width: 40px; height: 1px; background-color: #ffffff; margin: 1.25rem 0 2.5rem; }
.home-apropos-lead { font-size: 1.4rem; font-weight: 300; color: #d0d0d0; line-height: 1.45; margin: 0 0 1.2rem; }
.home-apropos-text { font-size: 1.18rem; font-weight: 300; color: #d0d0d0; line-height: 1.5; margin: 0 0 3rem; }
.home-apropos-lead strong, .home-apropos-text strong { font-weight: 500; color: #fff; }
.home-apropos a { color: #fff; text-decoration: none; font-weight: 400; }
.home-apropos a:hover { text-decoration: underline; }
.home-partenaires { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem 3.5rem; }
.home-partenaires img { height: 96px; width: auto; opacity: 0.85; transition: opacity .15s ease; }
.home-partenaires a:hover img { opacity: 1; }
@media (max-width: 767.98px) {
	.home-apropos { padding: 3rem 0; }
	.home-apropos .container { padding-left: 1.6rem; padding-right: 1.6rem; }
	.home-apropos-title { font-size: 1.7rem; }
	.home-apropos-lead { font-size: 1.25rem; }
	.home-apropos-text { font-size: 1.1rem; }
	.home-partenaires { gap: 1.4rem 2rem; }
	.home-partenaires img { height: 60px; }
}

/* --- Prochaines formations (cartes-liens compactes) --- */
.home-sessions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.2rem; }
.home-session {
	--dom: var(--brand);
	display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: start;
	padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--bs-border-color) 95%, #000); border-radius: 10px; background: #fff;
	transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.home-session:hover {
	text-decoration: none; transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--dom) 45%, var(--bs-border-color));
	box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--dom) 50%, transparent);
}
.home-session-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dom); margin-top: 0.4rem; grid-row: 1 / span 2; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dom) 16%, transparent); }
.home-session-titre { grid-column: 2; font-weight: 600; color: var(--ink-1); line-height: 1.35; }
.home-session:hover .home-session-titre { color: var(--dom); }
.home-session-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.home-session-dates { font-size: 0.88rem; color: var(--ink-3); }
.home-session-dates .bi { color: var(--dom); margin-right: 0.15rem; }
.home-session-garantie {
	font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: #1f6f4a; background: #e8f4ee; border: 1px solid #cfe5d8; border-radius: 3px; padding: 0.05rem 0.32rem; line-height: 1.4;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
	.home-chiffres-grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.2rem; }
	.home-sessions { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
	.home-section { padding: 2.4rem 0; }
	.home-chiffres { padding: 4rem 0; }
	/* Liens « Voir tous… » resserrés contre leur section en mobile (alignés à droite via la règle de base). */
	.section-cta { margin-top: 1rem; }
	.home-hero { padding: 1.4rem 0 2.6rem; }
	/* Eyebrow dé-pillé en mobile (trop de pills sinon) : simple label, sans fond. */
	.home-hero-eyebrow {
		margin-bottom: 1.4rem; font-size: 0.65rem;
		justify-content: flex-start; text-align: left;
		background: none; border: 0; padding: 0; backdrop-filter: none;
	}
	.home-hero-title { font-size: 1.78rem; margin-bottom: 0; }
	/* Hero mobile épuré : on ne garde que l'eyebrow, le titre et les domaines.
	   Lede, recherche et accès rapides masqués (trop dense sur petit écran). */
	.home-hero-lede,
	.home-search,
	.home-quicklinks { display: none; }
	/* Domaines en pleine largeur, un par ligne. */
	.home-domaines { flex-direction: column; gap: 0.55rem; margin: 1.8rem 0 0; }
	.home-domaines .catalog-chip { width: 100%; }
	/* CTA sous les domaines — aplat blanc (action principale), mais au gabarit
	   d'une pill : padding/font-size/bordure identiques → même hauteur. Texte
	   aligné à gauche, flèche poussée à droite. */
	.home-hero-cta {
		display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem;
		width: 100%; margin-top: 1.1rem; padding: 0.58rem 1.05rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--brand) 10%, white);
		border: 1px solid color-mix(in srgb, var(--brand) 10%, white);
		color: color-mix(in srgb, var(--brand) 62%, black);
		font-weight: 600; font-size: 0.86rem; text-decoration: none;
		transition: filter .14s ease;
	}
	.home-hero-cta:hover { text-decoration: none; filter: brightness(0.96); }
	.home-hero-cta .bi { color: color-mix(in srgb, var(--brand) 55%, black); }
	.home-hero-cta-arrow { margin-left: auto; }
}

/* ============================================================
   Questionnaire amont (formulaire participant + report formateur)
   ============================================================ */

/* En-tête des questionnaires (form/synthèse chaud + amont). Marge haute pilotée
   ici (valeur intermédiaire entre les paliers Bootstrap mt-4/mt-5) → un seul
   réglage partagé par toutes les vues, qui ne portent plus d'utilitaire mt. */
.amont-head { margin-top: 2.25rem; }
.amont-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 1.4rem;
}
/* Seule l'icône est agrandie et éclaircie, pas le texte (alignement vertical
   géré par le flex de l'eyebrow). */
.amont-eyebrow .bi {
	font-size: 1.5em;
	color: #9c8c9c;
	color: color-mix(in srgb, var(--accent) 60%, #fff);
}
/* Même style H1 que les fiches formation (.fiche-title), couleur brand. */
.amont-title {
	font-size: clamp(1.5rem, 1.4vw + 0.9rem, 1.95rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.025em;
	color: var(--brand);
	margin: 0;
}
.amont-session { margin-top: 1.15rem; }
.amont-dates { color: var(--ink-3); font-size: 0.95rem; }
.amont-intro { font-size: 1rem; margin-bottom: 1.75rem; }
.amont-req { color: #c0392b; font-weight: 600; }

/* Honeypot anti-bot — hors flux, invisible */
.amont-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

.amont-section { margin-bottom: 2.25rem; }
.amont-section-title {
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--ink-1);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid #b9aeb9;
	border-bottom: 5px solid color-mix(in srgb, var(--accent) 20%, #fff);
}
.amont-section-hint { font-size: 0.9rem; margin-top: -0.5rem; margin-bottom: 1.1rem; }

/* Borders des champs des formulaires frontend (candidature, réunion,
   préinscription, questionnaire amont) : le défaut Bootstrap est trop pâle.
   - text/textarea/select : #bcc2c8 (un poil plus clair que les modals, mais
     plus foncé que le défaut Bootstrap #dee2e6)
   - checkbox/radio : un peu plus marqué (#868e96) ; état coché inchangé
     (Bootstrap applique sa propre border via .form-check-input:checked). */
.page-candidature .form-control,
.page-candidature .form-select,
.page-amont .form-control,
.page-amont .form-select,
.page-eval .form-control,
.page-eval .form-select,
#reunion-modal .form-control,
#preinscription-modal .form-control {
	border-color: #bcc2c8;
}
.page-candidature .form-check-input,
.page-amont .form-check-input,
.page-eval .form-check-input,
#reunion-modal .form-check-input,
#preinscription-modal .form-check-input {
	border-color: #868e96;
}

/* Titres de section du formulaire de candidature certif — calqués sur les
   titres du questionnaire amont (filet bas estompé en couleur accent). */
.candidature-section-title {
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--ink-1);
	padding-bottom: 0.5rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid #b9aeb9;
	border-bottom: 5px solid color-mix(in srgb, var(--accent) 20%, #fff);
}

/* En-tête de candidature : intitulé du certif plus appuyé, session plus discrète. */
.candidature-certif-titre {
	font-size: 1.4rem;
}
.candidature-session-label {
	font-size: 1rem;
}
.candidature-session-dates {
	color: var(--ink-1);
}

/* Carte « partie de programme » (mobile-first : tout empilé) */
.amont-part-card {
	border: 1px solid #e6e8ec;
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	padding: 1.1rem 1.25rem 1.25rem;
	margin-bottom: 1.1rem;
	background: color-mix(in srgb, var(--brand) 3%, #fff);
}
.amont-part-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.amont-part-num {
	flex: 0 0 auto;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	display: inline-flex; align-items: center; justify-content: center;
}
.amont-part-titre { font-weight: 600; font-size: 1.12rem; color: var(--ink-1); line-height: 1.35; padding-top: 2px; }
.amont-part-points {
	margin: 0.65rem 0 0.25rem 2.4rem;
	padding-left: 1rem;
	color: var(--ink-2);
	font-size: 1rem;
}
.amont-part-points li { margin-bottom: 0.15rem; }

.amont-choice-group { margin-top: 1rem; }
/* Éval à chaud formation courte ET évals à froid : questions plus aérées. La mb du
   groupe est avalée par le margin-collapsing (mt de la question suivante, plus grand)
   → on espace via le mt du groupe + un gap label→pills qui « descend » les pills.
   (Mutualisé court/froid : même charte de formulaire « questionnaire à plat ».) */
.page-eval-court .amont-choice-group,
.page-eval-froid .amont-choice-group { margin-top: 1.9rem; }
.page-eval-court .amont-choice-label,
.page-eval-froid .amont-choice-label { margin-bottom: 0.7rem; }
/* Première question de chaque section : un poil moins d'air sous le titre. */
.page-eval-court .amont-section-title + .amont-choice-group,
.page-eval-froid .amont-section-title + .amont-choice-group { margin-top: 1.4rem; }
.amont-choice-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.4rem;
}
/* Texte saisi dans les commentaires un peu plus discret (page éval). */
.page-eval textarea.form-control { font-size: 0.92rem; }

/* --- Synthèse d'évaluation (page publique, lien signé) -------------------- */
.eval-synth-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2.1rem;
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--ink-3);
}
.eval-synth-meta .bi { color: var(--ink-4); margin-right: 0.25rem; }
.eval-synth-certif {
	margin-top: 0.6rem;
	margin-bottom: 0.5rem;
	font-size: 1.08rem;
	color: var(--ink-3);
}
.eval-synth-q { margin-bottom: 1.6rem; }
.eval-synth-q-label {
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 0.7rem;
}
.eval-synth-comments {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.eval-synth-comments li {
	position: relative;
	padding: 0.45rem 0.9rem;
	margin-bottom: 0.4rem;
	background: color-mix(in srgb, var(--accent) 6%, #fff);
	border-left: 3px solid color-mix(in srgb, var(--accent) 45%, #fff);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	font-size: 0.9rem;
	color: var(--ink-2);
}
/* Barre de distribution d'une modalité (remplace les statbar-* BS3 du legacy). */
.eval-stat { margin-bottom: 0.55rem; }
.eval-stat-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 0.92rem;
	margin-bottom: 0.2rem;
}
.eval-stat-label { color: var(--ink-2); }
.eval-stat-end { color: var(--ink-4); font-size: 0.85em; font-weight: 400; margin-left: 0.15rem; }
/* Pastille ronde numérotée des modules d'une séquence multi-module (formulaire +
   synthèse), en remplacement de l'ancienne numérotation « I/ II/ » en romain. */
.amont-section-title:has(.eval-mod-num) { display: flex; align-items: center; text-transform: uppercase; color: var(--accent); }
/* Formulaires d'évaluation (hors synthèses) : les sections thématiques (non
   numérotées) reprennent la couleur accent des modules numérotés — parité visuelle
   des titres de section sur tous les formulaires participant. */
.page-eval:not(.page-eval-synthese) .amont-section-title { color: var(--accent); }
.eval-mod-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 1.7rem;
	height: 1.7rem;
	padding-top: 1px;
	margin-right: 0.6rem;
	vertical-align: middle;
	transform: translateY(-2px);
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 90%, #fff);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
}
.eval-stat-val { white-space: nowrap; }
.eval-stat-val strong { color: var(--ink-1); }
.eval-stat-track {
	height: 8px;
	background: #edeef0;
	border-radius: 6px;
	overflow: hidden;
}
.eval-stat-fill {
	height: 100%;
	background: color-mix(in srgb, var(--accent) 75%, #fff);
	border-radius: 6px;
}
/* Synthèse : titres de section soulignés d'un filet accent fin, précédés d'une
   icône (couleur accent) propre à chaque section pour rompre la monotonie. */
.page-eval-synthese main { padding-bottom: 3rem; }
.page-eval-synthese .amont-section-title {
	margin-top: 2.75rem;
	padding-bottom:0.5rem;
	border-bottom: 1px solid var(--accent);
	color: var(--accent);
}
.page-eval .eval-synth-modsep {
	height: 0;
	margin: 2.25rem 0 1.5rem;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.15;
}
.page-eval .amont-section-icon,
.page-amont .amont-section-icon,
.page-amont-report .amont-section-icon {
	margin-right: 0.55rem;
	color: color-mix(in srgb, var(--accent) 60%, #fff);
	font-size: 0.95em;
}
/* Bouton « Télécharger en PDF » — flotte à droite, sur la ligne de l'eyebrow.
   Inutile sur smartphone (impression non pertinente) → masqué sous sm. */
.eval-synth-print { float: right; margin-left: 1rem; }
@media (max-width: 575.98px) { .eval-synth-print { display: none; } }

/* ── Éval certif : grille de notes 1-5 (formulaire) ── */
.eval-rating-row .eval-rating-pill {
	min-width: 3rem;
	text-align: center;
}
/* ── Éval certif : étoiles cliquables (questions rating5) ──
   Radios masqués (.btn-check) + labels étoiles. DOM 5→1 + flex row-reverse pour un
   affichage 1→5 : le combinateur ~ remplit alors l'étoile choisie ET toutes les
   précédentes (numéros inférieurs). Remplissage au clic via :checked, désactivé en
   survol (:not(:hover)) pour laisser l'aperçu au survol — évite tout conflit de
   spécificité entre les deux états. */
.amont-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 0.35rem;
	font-size: 2.3rem;
	line-height: 1;
}
.amont-stars .amont-star {
	/* Parité opinion scale : accent clair au repos, accent plein si sélectionné. */
	color: color-mix(in srgb, var(--brand) 20%, #fff);
	cursor: pointer;
	line-height: 1;
	transition: color 0.12s ease;
}
.amont-stars:not(:hover) .btn-check:checked ~ .amont-star { color: var(--brand); }
.amont-stars .amont-star:hover,
.amont-stars .amont-star:hover ~ .amont-star { color: var(--brand); }
/* Petit « pop » au clic (JS pose .star-pop sur les étoiles retenues) pour matérialiser
   la prise en compte du choix. */
@keyframes amont-star-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}
.amont-stars .amont-star.star-pop { animation: amont-star-pop 0.32s ease; }
@media (prefers-reduced-motion: reduce) {
	.amont-stars .amont-star.star-pop { animation: none; }
}
.amont-stars .btn-check:focus-visible + .amont-star {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 3px;
}
/* Largeur calée sur la rangée de pills (5 × min-width 3rem + 4 × gap 0.5rem) pour
   que le libellé d'extrémité haute tombe sous la pastille « 5 » et non au bord du
   layout. max-width: 100% pour ne pas déborder quand les pills wrappent (mobile). */
.eval-scale-ends {
	margin-top: 0.35rem;
	width: calc(5 * 3rem + 4 * 0.5rem);
	max-width: 100%;
}
/* Description sous le libellé d'une question d'éval certif : un cran plus clair
   que text-muted (muted léger). */
.eval-q-desc { color: var(--ink-4); }
/* Petite flèche bas → haut, centrée entre les deux libellés d'extrémité. */
.eval-scale-arrow {
	flex: 0 0 auto;
	margin: 0 0.7rem;
	opacity: 0.5;
	transform: scaleX(1.8);
}
/* ── Éval certif : moyenne /5 (synthèse) ── */
.eval-synth-avg {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.eval-synth-avg-val { font-size: 1.15rem; }
.eval-synth-avg-val strong { color: var(--brand); }
.eval-synth-stars { letter-spacing: 0.05em; }

/* Impression de la synthèse (CTRL+P / Enregistrer en PDF). Les règles génériques
   (.no-print, .print-only, @page, logo/footer .fiche-print-*) sont définies dans
   le bloc @media print de la fiche formation ; ici on ne traite que la mise en
   page propre à la synthèse (1 colonne pleine largeur, couleurs, sauts de page). */
@media print {
	.page-eval-synthese .container {
		max-width: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.page-eval-synthese .row {
		--bs-gutter-x: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.page-eval-synthese .col-lg-8 {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		padding: 0 !important;
	}
	.page-eval-synthese .amont-head { margin-top: 0 !important; }
	.page-eval-synthese .amont-eyebrow { color: var(--accent) !important; }
	.page-eval-synthese .amont-title {
		color: var(--brand) !important;
		font-size: 20pt !important;
	}
	.page-eval-synthese .amont-section {
		margin-bottom: 1.4rem !important;
	}
	.page-eval-synthese .amont-section-title {
		margin-top: 2.6rem !important;
		font-size: 13pt !important;
		break-after: avoid;
		page-break-after: avoid;
	}
	/* Pas de break-inside avoid sur tout le .eval-synth-q : une question à
	   commentaires peut dépasser une page. On garde le label solidaire du
	   début de son contenu, et on protège chaque élément atomique. */
	.page-eval-synthese .eval-synth-q-label {
		break-after: avoid;
		page-break-after: avoid;
	}
	.page-eval-synthese .eval-stat,
	.page-eval-synthese .eval-synth-comments li {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.page-eval-synthese .eval-stat-track { border: 1px solid #ddd; }
}

/* Impression de la synthèse quiz : même traitement que la synthèse d'éval (1 colonne
   pleine largeur), avec un retrait latéral/haut supplémentaire pour aérer la page.
   Les règles génériques (.no-print, @page, footer) viennent du bloc fiche formation. */
@media print {
	.page-quiz-synthese .container {
		max-width: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.page-quiz-synthese .row {
		--bs-gutter-x: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.page-quiz-synthese .col-lg-9 {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		padding: 0 !important;
	}
	.page-quiz-synthese .amont-head { margin-top: 6mm !important; }
	/* Ne pas couper une carte question (ni le bloc global) entre deux pages. */
	.page-quiz-synthese .quiz-question,
	.page-quiz-synthese .quiz-global {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}
.amont-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.amont-pill {
	/* Bordure transparente (pas de border visible) mais conservée à 1px : la pill
	   sélectionnée garde sa bordure brand, donc géométrie identique au repos. */
	border: 1px solid transparent;
	border-radius: 999px;
	/* Même fond au repos que le hover/active des liens de la navbar du site. */
	background: #ede4ed;
	color: var(--ink-2);
	font-size: 0.9rem;
	padding: 0.4rem 1rem;
	font-weight: 500;
}
/* Spécificité volontairement haute (.amont-choices …) + background-color
   explicite : sinon le `.btn-check + .btn:hover` de Bootstrap (qui met
   --bs-btn-hover-bg: transparent) repasse devant et la pill devient
   transparente au survol. Hover = même fond, juste un peu plus dense ; ni la
   bordure ni la couleur du texte ne changent. */
.amont-choices .amont-pill:hover,
.amont-choices .btn-check + .amont-pill:hover {
	border-color: transparent;
	color: var(--ink-2);
	background-color: color-mix(in srgb, var(--brand) 10%, #ede4ed);
}
/* La pill sélectionnée reste pleine (brand + texte blanc), même au survol. */
.amont-choices .btn-check:checked + .amont-pill,
.amont-choices .btn-check:checked + .amont-pill:hover {
	background-color: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
/* Icône check : masquée par défaut, révélée sur la pill sélectionnée. */
.amont-pill .amont-check { display: none; }
.amont-choices .btn-check:checked + .amont-pill .amont-check {
	display: inline-block;
	margin-right: 0.3rem;
	font-size: 0.95em;
	vertical-align: -1px;
}
.btn-check:checked + .amont-pill {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn-check:focus-visible + .amont-pill { box-shadow: 0 0 0 0.2rem rgba(90, 65, 90, 0.25); }

/* Micro-anim « pop » au clic sur une pill de choix (JS pose .pill-pop sur la pill
   retenue) : la pastille rebondit et l'icône check entre en scène (scale + rotate).
   Pendant logique de l'anim « étoiles » des évals certif. */
@keyframes amont-pill-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.09); }
	100% { transform: scale(1); }
}
@keyframes amont-pill-check-in {
	0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
	55%  { transform: scale(1.35) rotate(0); opacity: 1; }
	100% { transform: scale(1) rotate(0); }
}
.amont-choices .amont-pill.pill-pop {
	animation: amont-pill-pop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.amont-choices .amont-pill.pill-pop .amont-check {
	transform-origin: center;
	animation: amont-pill-check-in 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) 0.03s both;
}
@media (prefers-reduced-motion: reduce) {
	.amont-choices .amont-pill.pill-pop,
	.amont-choices .amont-pill.pill-pop .amont-check { animation: none; }
}

/* Surbrillance d'un champ requis manquant au moment de l'envoi (ajoutée en JS
   sur les events `invalid` natifs, jamais au chargement). Champs texte : bordure
   + halo rouge ; groupes de pastilles : cadre englobant titre + pills. */
.amont-form .form-control.amont-invalid {
	border-color: #e7a1a8;
	background-color: color-mix(in srgb, #dc3545 9%, #fff);
}
/* Cadre crimson (fond transparent) englobant titre + pills. Marges négatives =
   le cadre déborde dans la carte sans décaler le contenu. Style partagé par tous
   les questionnaires du même type (amont, évals, futurs forms). */
.amont-choice-group.amont-invalid {
	background: transparent;
	border: 1px solid crimson;
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	margin-left: -0.9rem;
	margin-right: -0.9rem;
}

.amont-actions { margin-top: 1.5rem; margin-bottom: 3rem; }
.amont-actions .btn { padding: 0.65rem 1.6rem; font-size: 1.1rem; }

/* Écran de remerciement */
.amont-thanks { border-radius: 16px; border: 1px solid var(--accent); margin-bottom: 4rem; }
.amont-thanks-icon { font-size: 3rem; color: #2e7d52; line-height: 1; }

/* ---- Report formateur ---- */
/* Compteur inscrits/réponses + bouton « Écrire aux participants » sur une ligne,
   bouton aligné à droite. */
.amont-report-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-top: 1rem;
}
.amont-report-count { color: var(--ink-3); font-size: 0.95rem; margin: 0; }
.amont-mail-btn { flex: 0 0 auto; margin: 0; }
/* Mention « INTRA · client » en tête de report (parité legacy). Ton brand léger,
   comme les tags de priorité. */
.amont-intra {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.55rem;
	vertical-align: middle;
	padding: 0.4rem 0.75rem;
	background: #f1eaf1;
	color: var(--brand);
	font-weight: 500;
	font-size: 0.82rem;
	line-height: 1;
	letter-spacing: 0.02em;
	border-radius: 999px;
}
/* Rappel des puces de niveau 1 sous le titre de partie (le formateur n'a pas
   toujours le détail du programme en tête). */
.amont-report-points {
	margin: 0.35rem 0 0.5rem 2.4rem;
	padding-left: 1rem;
	color: var(--ink-4);
	font-size: 0.85rem;
}
.amont-report-points li { margin-bottom: 0.1rem; }
/* Border des cards participant un peu plus foncée que le défaut Bootstrap,
   + fond très légèrement teinté brand (mix 4 % blanc). */
.amont-report-participant {
	border: 1px solid #c9ced6;
	background: #fdfdfd;
	background: color-mix(in srgb, var(--brand) 1%, #fff);
}
/* Nom du participant : un cran de gras de plus que le .h6 Bootstrap (500 → 600),
   souligné d'un filet léger. */
.amont-participant-name {
	font-weight: 600;
	padding-bottom: 0.5rem;
	margin-bottom: 0.65rem;
	border-bottom: 1px solid #e6e8ec;
}
.amont-report-section { margin-bottom: 2.5rem; }
/* Respiration en bas de page avant le footer. */
.amont-report { padding-bottom: 4rem; }
/* Chaque partie dans une card identique à celles de « Détail par participant ». */
.amont-report-part {
	background: #fdfdfd;
	background: color-mix(in srgb, var(--brand) 1%, #fff);
	border: 1px solid #c9ced6;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.amont-dist-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}
.amont-dist-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.amont-dist-name { flex: 0 0 9.5rem; font-size: 0.85rem; color: var(--ink-2); }
.amont-dist-bar {
	flex: 1 1 auto;
	height: 10px;
	background: #eef0f3;
	border-radius: 999px;
	overflow: hidden;
}
.amont-dist-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.amont-dist-count { flex: 0 0 1.5rem; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--ink-3); }

/* Teintes maîtrise (rouge→vert) / priorité */
.amont-fill-m-inconnu  { background: #d98a8a; }
.amont-fill-m-notions  { background: #e3b96b; }
.amont-fill-m-maitrise { background: #6fae86; }
.amont-fill-p-secondaire  { background: #9aa3af; }
.amont-fill-p-prioritaire { background: color-mix(in srgb, var(--accent) 75%, #fff); }

/* Profil en tableau : chaque info = une colonne dont la largeur s'ajuste au
   contenu (table-layout auto), libellés en tête, valeurs en dessous. Les champs
   longs (« Formations proches »…) prennent la place nécessaire → moins de retours
   à la ligne qu'avec des colonnes de largeur égale. */
.amont-profile {
	width: 100%;
	margin-top: 0.5rem;
	border-collapse: collapse;
}
.amont-profile th {
	font-size: 0.8rem;
	color: var(--ink-5);
	font-weight: 600;
	text-align: left;
	vertical-align: bottom;
	white-space: nowrap;
	padding: 0 1.5rem 0.15rem 0;
}
.amont-profile td {
	font-size: 0.88rem;
	color: var(--ink-2);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	padding: 0 1.5rem 0 0;
}
.amont-profile th:last-child,
.amont-profile td:last-child { padding-right: 0; }

.amont-quote {
	margin-top: 0.9rem;
	padding: 0.7rem 0.9rem;
	background: var(--bg-soft);
	border-radius: 10px;
}
.amont-quote-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.2rem;
}
/* Réponse du participant : même rendu que le commentaire d'inscription du roster
   (.amont-roster-comment-text) — plus petit, gris clair, italique. */
.amont-quote p {
	font-size: 0.88rem;
	color: var(--ink-3);
	font-style: italic;
	margin: 0;
}

.amont-participant-grid { margin-top: 1rem; }
.amont-pg-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.35rem 0;
	border-top: 1px dashed #e6e8ec;
}
.amont-pg-titre { font-size: 0.88rem; color: var(--ink-2); }
.amont-pg-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 0 0 auto; }
.amont-tag {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}
.amont-tag-m-inconnu  { background: #f7e3e3; color: #a04444; }
.amont-tag-m-notions  { background: #f7eed8; color: #8a6516; }
.amont-tag-m-maitrise { background: #dcefe3; color: #2e7d52; }
.amont-tag-p-secondaire  { background: #eef0f3; color: var(--ink-3); }
.amont-tag-p-prioritaire { background: #ece3ec; color: var(--brand); }

/* Tableau « Tous les participants » (roster live Dendreo, répondants ou non) */
/* Filet léger tout autour + petit rayon : porté par le conteneur (overflow
   hidden) car la table est en border-collapse → un border-radius sur la table
   ne clipperait pas les coins. */
.amont-roster-wrap {
	border: 1px solid #c2c8d2;
	border-radius: 10px;
	overflow: hidden;
}
.amont-roster-table { margin-bottom: 0; }
.amont-roster-table thead th {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 2px solid #bcc2cc;
}
.amont-roster-table td { font-size: 0.92rem; color: var(--ink-2); }
/* Séparateur entre participants : 1px plus foncé que le défaut Bootstrap, avec
   un peu d'air au-dessus. (Sélecteurs scopés sous .amont-roster-table pour
   passer devant `.table > :not(caption) > * > *` de Bootstrap.) */
.amont-roster-table .amont-roster-row > td,
.amont-roster-table .amont-roster-comment > td { border-bottom: 1px solid #c2c8d2; }
/* De l'air au-dessus (padding-bottom du bas de bloc) ET en dessous (padding-top
   de la ligne de nom = haut du bloc suivant) de chaque séparateur. */
.amont-roster-table .amont-roster-row > td { padding-top: 0.95rem; padding-bottom: 1.15rem; }
/* Ligne de nom suivie d'un commentaire : groupée avec lui (pas de séparateur ni
   d'espace en bas) — c'est la sous-ligne commentaire qui clôt le bloc. */
.amont-roster-table .amont-roster-row-lead > td { border-bottom: 0; padding-bottom: 0.15rem; }
.amont-roster-table .amont-roster-comment > td { padding-top: 0.5rem; padding-bottom: 1.15rem; }
/* Dernière ligne : pas de séparateur (le filet du conteneur ferme le tableau). */
.amont-roster-table tbody tr:last-child > td { border-bottom: 0; }
/* Marge intérieure aux extrémités : le contenu ne colle pas au filet du conteneur. */
.amont-roster-table th:first-child,
.amont-roster-table td:first-child { padding-left: 1.1rem; }
.amont-roster-table th:last-child,
.amont-roster-table td:last-child { padding-right: 1.1rem; }
/* Conteneur teinté : label + texte du commentaire d'inscription ensemble.
   Mêmes fond / rayon / padding que les blocs attentes-commentaires (.amont-quote)
   du « Détail par participant ». */
.amont-roster-comment-box {
	padding: 0.7rem 0.9rem;
	background: var(--bg-soft);
	border-radius: 10px;
}
.amont-roster-comment-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.2rem;
}
.amont-roster-comment-text {
	display: block;
	font-size: 0.88rem;
	color: var(--ink-3);
	font-style: italic;
}
.amont-badge-rep {
	background: color-mix(in srgb, #2e7d52 14%, #fff);
	color: #2e7d52;
	font-weight: 600;
}
.amont-badge-wait { background: #eef0f3; color: var(--ink-4); font-weight: 500; }

@media (min-width: 768px) {
	.amont-part-card { padding: 1.25rem 1.5rem 1.5rem; }
}

/* Bouton « remonter en haut » sticky (formations + accueil). Masqué tant qu'on
   n'a pas scrollé, révélé via .is-visible posé par le JS du layout. */
.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1030;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff);
	border-radius: 50%;
	background: #fff;
	color: color-mix(in srgb, var(--brand) 55%, #fff);
	font-size: 1.35rem;
	line-height: 1;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	animation: back-to-top-beat 3.6s ease-in-out infinite;
}
/* Hover réservé aux appareils à pointeur fin : sur tactile, le `:hover` reste
   collé après un tap (le bouton restait violet une fois cliqué). */
@media (hover: hover) {
	.back-to-top:hover {
		background: var(--brand);
		color: #fff;
		animation-play-state: paused;
	}
}
/* Heartbeat doux : une montée/descente progressive et discrète, en boucle. */
@keyframes back-to-top-beat {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.back-to-top.is-visible { animation: none; }
}
@media (max-width: 575.98px) {
	.back-to-top { right: 1rem; bottom: 1rem; }
}

/* ===== Bandeau de consentement cookies ===================================== */
.cookie-consent {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1040;
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem 1.15rem;
	border-radius: .65rem;
	background: color-mix(in srgb, var(--brand) 78%, black);
	color: #f3f1f4;
	box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .35);
	font-size: .9rem;
	line-height: 1.45;
}
.cookie-consent__text {
	margin: 0;
}
.cookie-consent__text a {
	color: #fff;
	text-decoration: underline;
}
.cookie-consent__actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}
.cookie-consent__btn {
	border: 1px solid transparent;
	border-radius: .4rem;
	padding: .4rem .9rem;
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.cookie-consent__btn--solid {
	background: #fff;
	color: var(--ink-1);
}
.cookie-consent__btn--solid:hover {
	background: #e6e3e8;
}
.cookie-consent__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #f3f1f4;
}
.cookie-consent__btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
}