/* ============================================
 * Single Formation — complément au modèle École
 * (hero, layout, sidebar, carte contact = single-ecole.css)
 * En-tête (présentation / chiffres / statuts / projet péda) + onglets.
 * ============================================ */

/* Offset d'ancrage pour la barre d'onglets (cible du scroll depuis le sommaire). */
.chru-formation-tabs {
	scroll-margin-top: calc(var(--header-height, 120px) + 20px);
}

/* Plus d'air au-dessus de la carte contact en bas de page (retour client). */
.chru-ecole-main > .chru-ecole-contact-card {
	margin-top: 40px;
}

/* Encart « école rattachée » dans la sidebar formation
 * Retours V3 (C) : plus de titre/barre — encart bleu autonome, intro discrète,
 * nom de l'école en grand, lien « Découvrir l'école ». */
/* Retour Marie (20/07/2026) : ~40px d'air au-dessus ET en dessous de l'encart
 * école, qui était collé au sommaire et au bloc « Suivez-nous ». */
.chru-formation-sidebar__ecole {
	margin-top: 40px;
	margin-bottom: 40px;
}

.chru-formation-sidebar__ecole-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
	background: var(--chru-gray-light, #EFF2F5);
	border-radius: var(--radius-md, 14px);
	text-decoration: none !important;
	color: var(--chru-blue-text, #2D4356);
	transition: background var(--transition-fast, 150ms ease);
}

.chru-formation-sidebar__ecole-card:hover,
.chru-formation-sidebar__ecole-card:focus-visible {
	background: #E4ECF2;
}

.chru-formation-sidebar__ecole-thumb {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.chru-formation-sidebar__ecole-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.chru-formation-sidebar__ecole-intro {
	font-size: 12px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.chru-formation-sidebar__ecole-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.3;
}

.chru-formation-sidebar__ecole-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--chru-blue-light, #0096D6);
}

/* ============================================
 * Contenu Gutenberg libre (post_content)
 * Placé après les onglets et avant la carte contact. Permet au client
 * d'ajouter blocs maison (bloc-important, encart-école, ressource-kit,
 * texte-image, etc.) avec liens/gras/italique/titres libres.
 * ============================================ */
.chru-formation-content {
	margin-top: 32px;
}

.chru-formation-content > *:first-child {
	margin-top: 0;
}

.chru-formation-content > * + * {
	margin-top: 24px;
}

/* Retour Marie (20/07/2026) : « pas assez d'espace entre les blocs ». Les blocs
 * maison sont des cartes pleine largeur (encart école, mise en avant, kit de
 * ressources, texte+image…) : 24px les collent les unes aux autres. On passe à
 * 40px dès qu'un bloc CHRU est en jeu, le rythme du texte courant reste à 24px. */
.chru-formation-content > [class*="wp-block-chru-"] + *,
.chru-formation-content > * + [class*="wp-block-chru-"] {
	margin-top: 40px;
}

/* Les H2 du contenu (cibles d'ancrage du sommaire) doivent s'aligner sur la
 * convention CHRU et respecter le scroll-margin du header sticky. */
/* ⚠️ `:not([class*="__"])` (Marie 13/08/2026 10:06) : comme pour les MARGES
 * ci-dessous, la TYPO ne vaut que pour les H2 éditoriaux. Sans l'exclusion, ce
 * gabarit repoussait le titre du bloc « Fichiers et documents » de ses 18px à
 * 24px — alors que les pages service et examen, qui n'ont aucune règle `h2` de
 * gabarit, l'affichaient bien à 18px (mesuré sur les 2 gabarits). */
.chru-formation-content h2:not([class*="__"]) {
	/* ⚠️ `var(--h2-size)` et NON 24px en dur : le token descend à 20px en mobile.
	 * Tant que ce sélecteur valait (0,1,1) il perdait contre la règle canonique
	 * de components.css (0,2,1) et le mobile marchait par accident ; l'ajout du
	 * `:not()` le fait passer à (0,2,1), donc il gagne (fichier chargé après) et
	 * le 24px en dur ressortait tel quel sur mobile. Mesuré : 24px à 390px au
	 * lieu de 20px. */
	font-size: var(--h2-size, 24px);
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	/* 1.25 → 1.2 (Marie 13/08/2026) : interligne unique des H2 éditoriaux du
	 * site, cf. components.css. Cette règle est à spécificité égale (0,2,1) avec
	 * la règle canonique et chargée après elle : elle doit porter la valeur. */
	line-height: 1.2;
}

/* Les MARGES ne valent que pour les H2 éditoriaux. Les titres INTERNES des
 * blocs (`chru-contacter__title`, `chru-documents-list__title`…) gèrent les
 * leurs : les 32px du gabarit s'ajoutaient au padding de la carte, soit 64px
 * de vide au-dessus du titre au lieu de 32 sur les pages service (retour Marie
 * 28/07/2026). Même exclusion que pour les H3 ci-dessous. */
.chru-formation-content h2:not([class*="__"]) {
	margin: 32px 0 16px;
}

.chru-formation-content h2[id] {
	scroll-margin-top: calc(var(--header-height, 120px) + 20px);
}

/* H3 éditoriaux uniquement : les titres INTERNES des blocs (cartes
 * `chru-pages-cards__card-title`, encarts `chru-encart-ecole__title`…) sont
 * exclus, sinon ils passaient tous en bleu clair au lieu du bleu marine des
 * pages CHRU (retours Marie 21/07, « titres des tuiles »). */
.chru-formation-content h3:not([class*="__"]) {
	font-size: 20px;
	font-weight: 700;
	color: var(--chru-blue-canard, #0A91A8);
	line-height: 1.3;
	margin: 24px 0 12px;
}

/* Retour Marie (03/08/2026) : « marges du bloc Mise en avant pas correctes,
 * trop en haut et pas assez en bas ». Même cause que le retour du 28/07
 * ci-dessus, un cran plus bas : dans un encadré CHRU, le titre est un H2/H3
 * Gutenberg ORDINAIRE (`wp-block-heading`, donc sans `__`), et les 32px de
 * marge de flux s'ajoutaient aux 24px de padding de l'encadré → 56px au-dessus
 * du titre contre 24px sous le dernier élément. Les encadrés gèrent leur propre
 * gouttière interne : on annule la marge de flux sur leur premier / dernier
 * enfant. Spécificité identique aux deux règles ci-dessus (0,3,1) → c'est
 * l'ordre source qui tranche : NE PAS remonter ce bloc au-dessus d'elles. */
.chru-formation-content [class*="wp-block-chru-"] > h2:first-child,
.chru-formation-content [class*="wp-block-chru-"] > h3:first-child {
	margin-top: 0;
}

.chru-formation-content [class*="wp-block-chru-"] > h2:last-child,
.chru-formation-content [class*="wp-block-chru-"] > h3:last-child {
	margin-bottom: 0;
}

.chru-formation-content p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
}

/* Les liens « inline » sont déjà bien stylés par le système RGAA global
 * (.chru-content a). On NEUTRALISE uniquement les éléments à apparence
 * bouton, que la règle RGAA souligne à tort à cause de sa spécificité. */
.chru-formation-content .chru-btn,
.chru-formation-content .wp-block-button__link,
.chru-formation-content a[class*="__button"],
.chru-formation-content a[class*="__cta"] {
	text-decoration: none !important;
	text-decoration-thickness: 0 !important;
}

/* Extrait du hero formation : italique, plus petit, plus fin, plus d'air au-dessus
 * (retour client point 35 de Retours V2). Spécificité 0,1,2 pour battre single-ecole. */
.single-formation .chru-hero-ecole__chapo {
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	margin: 18px 0 28px;
	opacity: 1;
}

/* ---- En-tête : titres de section partagés ---- */
.chru-formation-section-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 16px;
	line-height: 1.25;
}

/* ---- Présentation ---- */
.chru-formation-presentation {
	margin-bottom: 32px;
}

.chru-formation-presentation__content p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
}

.chru-formation-presentation__content p:last-child {
	margin-bottom: 0;
}

.chru-formation-presentation__content ul,
.chru-formation-infos__content ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.chru-formation-presentation__content li,
.chru-formation-infos__content li {
	margin-bottom: 6px;
	line-height: 1.5;
	color: var(--chru-blue-text, #2D4356);
}

/* ---- 3 données (chiffres-clés) ---- */
.chru-formation-chiffres-wrap {
	margin-bottom: 32px;
}

.chru-formation-chiffres {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Retours V3 — s'adapte au nombre de cartes (2/3/4) sur une seule ligne. */
	grid-template-columns: repeat(var(--chru-chiffres-count, 3), minmax(0, 1fr));
	gap: 16px;
}

/* Variante sans icône (utilisée par les pages école — pas d'icône en meta). */
.chru-formation-chiffres--no-icon .chru-formation-chiffres__icon {
	display: none;
}

.chru-formation-chiffres__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--chru-gray-light, #EFF2F5);
	border-radius: var(--radius-md, 14px);
	padding: 24px 20px;
}

.chru-formation-chiffres__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chru-formation-chiffres__icon svg {
	width: 24px;
	height: 24px;
}

.chru-formation-chiffres__value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--chru-blue-service, #14446B);
}

.chru-formation-chiffres__label {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--chru-blue-light, #0096D6);
}

/* ---- Statuts & diplôme / Projet pédagogique ---- */
.chru-formation-infos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 36px;
}

.chru-formation-infos__block {
	background: var(--chru-gray-light, #EFF2F5);
	border-left: 4px solid var(--chru-blue-light, #0096D6);
	border-radius: var(--radius-md, 14px);
	padding: 22px 26px;
}

.chru-formation-infos__diplome {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--chru-blue-service, #14446B);
}

.chru-formation-infos__content p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--chru-blue-text, #2D4356);
}

.chru-formation-infos__content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.chru-formation-chiffres { grid-template-columns: 1fr; }
	.chru-formation-infos { grid-template-columns: 1fr; }
}

/* ============================================
 * (legacy) bloc « Informations clés »
 * ============================================ */

.chru-formation-keyinfos {
	margin-bottom: 40px;
}

.chru-formation-keyinfos__heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 20px;
}

.chru-formation-keyinfos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.chru-formation-keyinfos__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--chru-gray-light, #EFF2F5);
	border-radius: var(--radius-md, 14px);
	padding: 20px 24px;
}

.chru-formation-keyinfos__label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--chru-blue-light, #0096D6);
}

.chru-formation-keyinfos__value {
	font-size: 20px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.2;
}

.chru-formation-keyinfos__conditions {
	background: var(--chru-gray-light, #EFF2F5);
	border-left: 4px solid var(--chru-blue-light, #0096D6);
	border-radius: var(--radius-md, 14px);
	padding: 20px 24px;
}

.chru-formation-keyinfos__conditions .chru-formation-keyinfos__label {
	display: block;
	margin-bottom: 8px;
}

.chru-formation-keyinfos__conditions p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--chru-blue-text, #2D4356);
}

@media (max-width: 768px) {
	.chru-formation-keyinfos__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================
 * Certifications Qualiopi (encart)
 * ============================================ */

.chru-formation-qualiopi {
	margin: 40px 0;
}

.chru-formation-qualiopi__header {
	margin-bottom: 20px;
}

.chru-formation-qualiopi__logo {
	display: block;
	max-width: 280px;
	height: auto;
	margin: 0 0 14px;
}

.chru-formation-qualiopi__mention {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--chru-blue-service, #14446B);
}

.chru-formation-qualiopi__mention strong {
	color: var(--chru-red, #E6321F);
	font-weight: 700;
}

/* Cartes documents : stylées par chru-documents-list-style (handle du bloc),
   chargé sur les fiches formation. */

/* ============================================
 * Onglets de contenu (fixes prédéfinis)
 * ============================================ */

.chru-formation-tabs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 8px 0 28px;
	padding: 6px;
	background: #EFF2F5;
	border-radius: var(--radius-pill, 30px);
	/* Labels longs (ex. « Documentation réglementaire ») : on défile au lieu
	 * de rogner les onglets. */
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

/* Retours V3 (G) : fade-out droit appliqué UNIQUEMENT si la barre déborde
 * réellement (classe ajoutée par chru-formation-tabs.js). Sinon, le client le
 * perçoit comme un bug d'affichage (la barre semble s'effacer à droite). */
.chru-formation-tabs.is-scrollable {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 56px), transparent 100%);
}

/* ============================================
 * Affordance de défilement des onglets (retours Marie 21/07)
 *
 * « De base, on dirait qu'il n'y a que deux onglets » : quand la barre
 * déborde, un chevron rond, posé HORS de la zone scrollable (sur le wrapper),
 * indique qu'il reste des onglets à droite. Il disparaît en fin de piste.
 * Cliquable : fait défiler la barre d'environ 70 % de sa largeur.
 * ============================================ */
.chru-formation-tabs-wrap {
	position: relative;
}

.chru-formation-tabs-wrap__more {
	display: none;
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(20, 68, 107, 0.35);
	padding: 0;
	transition: opacity var(--transition-fast, 150ms ease);
}

.chru-formation-tabs-wrap.is-scrollable:not(.is-at-end) .chru-formation-tabs-wrap__more {
	display: inline-flex;
}

.chru-formation-tabs::-webkit-scrollbar {
	display: none;
}

/* Boutons : pas de shrink pour préserver leur largeur de label intégrale. */
.chru-formation-tabs .chru-formation-tabs__btn {
	flex-shrink: 0;
}

/* Pastille glissante (indicateur de l'onglet actif) */
.chru-formation-tabs__slider {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 6px;
	width: 0;
	background: var(--chru-blue-light, #0096D6);
	border-radius: var(--radius-pill, 30px);
	transition: left .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1);
	z-index: 0;
	pointer-events: none;
}

.chru-formation-tabs .chru-formation-tabs__btn {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: max-content;
	padding: 12px 24px;
	border: none;
	background: transparent !important;
	border-radius: var(--radius-pill, 30px);
	font-size: 16px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	cursor: pointer;
	transition: color .25s ease;
	white-space: nowrap;
}

.chru-formation-tabs .chru-formation-tabs__btn:hover {
	color: var(--chru-blue-light, #0096D6);
}

.chru-formation-tabs .chru-formation-tabs__btn.is-active,
.chru-formation-tabs .chru-formation-tabs__btn.is-active:hover {
	color: #fff !important;
}

/* ============================================
 * Timeline (déroulé d'un onglet)
 * ============================================ */

.chru-formation-panels {
	margin-bottom: 8px;
}

.chru-formation-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.chru-formation-timeline__step {
	position: relative;
	display: flex;
	gap: 24px;
	padding-bottom: 36px;
}

.chru-formation-timeline__step:last-child {
	padding-bottom: 0;
}

/* trait vertical reliant les marqueurs */
.chru-formation-timeline__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 52px;
	bottom: -4px;
	width: 2px;
	background: var(--chru-blue-pastel, #7CA1CC);
	opacity: .45;
}

.chru-formation-timeline__marker {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 6px rgba(20, 68, 107, .08);
}

.chru-formation-timeline__marker svg {
	width: 24px;
	height: 24px;
}

.chru-formation-timeline__body {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.chru-formation-timeline__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--chru-blue-canard, #0A91A8);
	margin: 0 0 12px;
	line-height: 1.25;
}

.chru-formation-timeline__content p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
}

.chru-formation-timeline__content p:last-child {
	margin-bottom: 0;
}

.chru-formation-timeline__list {
	margin: 0 0 12px;
	/* Puces davantage en retrait pour le niveau de lecture (retour client). */
	padding-left: 32px;
}

.chru-formation-timeline__list li {
	margin-bottom: 6px;
	line-height: 1.5;
	color: var(--chru-blue-text, #2D4356);
}

/* Média d'une étape (image et/ou document téléchargeable) */
.chru-formation-timeline__media {
	margin-top: 14px;
}

.chru-formation-timeline__figure {
	margin: 0 0 14px;
}

.chru-formation-timeline__figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 14px);
}

.chru-formation-timeline__media .chru-documents-list__items {
	margin: 0;
}

@media (max-width: 600px) {
	.chru-formation-timeline__step { gap: 14px; }
	.chru-formation-timeline__marker { width: 40px; height: 40px; }
	.chru-formation-timeline__marker svg { width: 20px; height: 20px; }
	.chru-formation-timeline__step:not(:last-child)::before { left: 19px; top: 44px; }
	.chru-formation-timeline__title { font-size: 20px; }
}

/* Le H2 qui sert de libellé d'onglet est masqué (remplacé par le bouton). */
.chru-formation-tabpanel__h2 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.chru-formation-tabpanel[hidden] {
	display: none;
}

/* Contenu rich text (WYSIWYG) à l'intérieur d'un onglet — héritage du style RGAA
 * .chru-content via la classe sur le wrapper. On force les titres aux couleurs CHRU. */
.chru-formation-tabpanel__content h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--chru-blue-canard, #0A91A8);
	line-height: 1.3;
	margin: 24px 0 12px;
}

.chru-formation-tabpanel__content h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 20px 0 10px;
}

.chru-formation-tabpanel__content p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
}

.chru-formation-tabpanel__content ul,
.chru-formation-tabpanel__content ol {
	margin: 0 0 12px;
	padding-left: 32px;
}

.chru-formation-tabpanel__content li {
	margin-bottom: 6px;
	line-height: 1.5;
	color: var(--chru-blue-text, #2D4356);
}

.chru-formation-tabpanel__content figure {
	margin: 16px 0;
}

.chru-formation-tabpanel__content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 14px);
}

/* Liste documents (onglet Documentation réglementaire) — version compacte
 * sur les fiches formation (retour client point 70 : « réduire la hauteur du
 * bloc gris + TELECHARGER à droite »). On ne touche pas le composant ailleurs. */
.chru-formation-tabpanel .chru-documents-list__link,
.chru-formation-tabpanel .chru-formation-content .chru-documents-list__link {
	padding: 10px 16px !important;
	gap: 12px;
}

.chru-formation-tabpanel .chru-documents-list__icon svg {
	width: 22px;
	height: 26px;
}

.chru-formation-tabpanel .chru-documents-list__separator {
	height: 32px;
}

.chru-formation-tabpanel .chru-documents-list__info {
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.chru-formation-tabpanel .chru-documents-list__name {
	flex: 1;
	font-size: 15px;
	line-height: 1.3;
}

.chru-formation-tabpanel .chru-documents-list__meta {
	flex-shrink: 0;
}

/* École rattachée unique : centrée + largeur contrainte, plus de bandeau vide.
 * (Retour client point 56 : « inutile de prendre tout le bas de page pour
 * n'afficher qu'une tuile ».) */
.chru-cards-ecoles--single {
	grid-template-columns: minmax(280px, 480px) !important;
	justify-content: center;
}

/* Sommaire latéral : l'état actif est décrit une seule fois, dans
 * single-ecole.css (école et formation partagent ce sommaire). */

@media (max-width: 600px) {
	.chru-formation-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.chru-formation-tabs::-webkit-scrollbar {
		display: none;
	}
	.chru-formation-tabs__btn {
		flex: 0 0 auto;
	}
}

/* ============================================
 * Retours V3 — Timeline visuelle dans les onglets verticaux (H)
 *
 * Les onglets contenu sont du HTML rich-text libre. Pour restaurer la
 * structure timeline (ligne verticale + puces par h3) sans changer le
 * modèle data, on stylise les h3 comme des étapes via pseudo-éléments.
 * ============================================ */
.chru-formation-tabpanel__content {
	position: relative;
	padding-left: 36px;
}
.chru-formation-tabpanel__content::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: var(--chru-blue-light-bg, #E0EEF7);
	border-radius: 1px;
}
.chru-formation-tabpanel__content h3 {
	position: relative;
	margin-top: 32px;
	color: var(--chru-blue-service, #14446B);
	font-size: 18px;
	font-weight: 700;
}
.chru-formation-tabpanel__content > h3:first-child { margin-top: 4px; }
.chru-formation-tabpanel__content h3::before {
	content: '';
	position: absolute;
	left: -36px;
	top: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--chru-blue-light, #0096D6);
	border: 4px solid #fff;
	box-shadow: 0 0 0 1px var(--chru-blue-light, #0096D6);
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.chru-formation-tabpanel__content { padding-left: 28px; }
	.chru-formation-tabpanel__content::before { left: 6px; }
	.chru-formation-tabpanel__content h3::before { left: -28px; width: 18px; height: 18px; }
}

/* ============================================
 * Retours V3 — Bloc Important haut de page (A)
 * ============================================ */
.chru-formation-bloc-important {
	margin: 0 0 32px;
}
.chru-formation-bloc-important > *:first-child { margin-top: 0; }
.chru-formation-bloc-important > *:last-child { margin-bottom: 0; }

/* ============================================
 * Retours V3 — Onglet Documentation : liste simple (F)
 * (remplace le rendu Qualiopi qui n'est plus utilisé sur les formations)
 * ============================================ */
.chru-formation-documents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.chru-formation-documents__item {
	margin: 0;
	padding: 0;
}
.chru-formation-documents__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--chru-gray-light, #EFF2F5);
	border-radius: var(--radius-md, 14px);
	color: var(--chru-blue-service, #14446B);
	text-decoration: none !important;
	font-weight: 600;
	transition: background var(--transition-fast, 150ms ease);
}
.chru-formation-documents__link:hover,
.chru-formation-documents__link:focus-visible {
	background: #E4ECF2;
}
.chru-formation-documents__link svg {
	flex-shrink: 0;
	color: var(--chru-blue-light, #0096D6);
}
.chru-formation-documents__label {
	flex: 1;
	font-size: 15px;
}
.chru-formation-documents__size {
	color: #6F6F6F;
	font-size: 13px;
	font-weight: 500;
}