/* ============================================
 * Single École — Figma CHRU_Formation_IFAP
 * ============================================ */

/* ============================================
 * 1. HERO : image de fond + carte blanche
 * ============================================ */

.chru-hero-ecole {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Hauteur fixe pour l'image — la carte dépasse en bas */
	height: 440px;
	margin-bottom: 240px; /* espace pour la partie de la carte qui dépasse */
}

.chru-hero-ecole__breadcrumb {
	padding-top: 24px;
	padding-bottom: 24px;
}

.chru-hero-ecole__breadcrumb .chru-breadcrumb,
.chru-hero-ecole__breadcrumb .chru-breadcrumb a,
.chru-hero-ecole__breadcrumb .chru-breadcrumb span {
	color: var(--chru-blue-service, #14446B);
}

.chru-hero-ecole__inner {
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	bottom: -200px; /* la carte chevauche image + contenu */
	width: 100%;
	max-width: var(--container-max, 1440px);
	padding: 0 var(--container-padding, 45px);
	display: flex;
	justify-content: center;
}

.chru-hero-ecole__card {
	background: var(--chru-white, #FFFFFF);
	border: 1px solid rgba(20, 68, 107, 0.36);
	border-radius: var(--radius-pill, 30px);
	padding: 52px 155px;
	text-align: center;
	max-width: 969px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(20, 68, 107, 0.08);
}

.chru-hero-ecole__subtitle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 8px;
}

.chru-hero-ecole__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chru-blue-service, #14446B);
	flex-shrink: 0;
}

.chru-hero-ecole__title {
	font-size: 45px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 8px;
}

.chru-hero-ecole__chapo {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--chru-blue-service, #14446B);
	opacity: 0.9;
	margin: 0 0 36px;
}

/* Ces 36px servent à séparer le chapô du bouton. Quand la fiche n'a pas de
 * bouton (cas des 7 écoles), ils ne séparaient plus rien et laissaient un vide
 * en bas de la carte. */
.chru-hero-ecole__chapo:last-child {
	margin-bottom: 0;
}

/* Sans chapô, le bouton se retrouvait à 8px du H1 (retour Clémence 29/07,
 * page /formation/devenir-aide-soignant/). L'espace ne peut pas venir du chapô
 * puisqu'il est absent : on le pose sur le bouton, mais UNIQUEMENT quand il
 * suit directement le titre ou le sur-titre (sinon il s'ajouterait aux 36px
 * du chapô, qui est inline-level et ne collapse donc pas). */
.chru-hero-ecole__title + .chru-hero-ecole__cta,
.chru-hero-ecole__subtitle + .chru-hero-ecole__cta {
	margin-top: 28px;
}

.chru-hero-ecole__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	padding: 11px 37px;
	border-radius: var(--radius-pill, 30px);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: var(--transition-base, 250ms ease);
}

.chru-hero-ecole__cta:hover {
	background: transparent;
	color: var(--chru-blue-service, #14446B);
	outline: 2px solid var(--chru-blue-service, #14446B);
}

.chru-hero-ecole__cta svg {
	width: 15px;
	height: 12px;
}

/* ============================================
 * 2. LAYOUT : sidebar 370px + contenu
 * ============================================ */

.chru-ecole-layout {
	display: grid;
	grid-template-columns: 370px 1fr;
	gap: 60px;
	padding: 48px 0 80px;
	align-items: start;
}

/* ============================================
 * 3. SIDEBAR
 * ============================================ */

.chru-ecole-sidebar {
	position: sticky;
	/* Retours V3 — laisser respirer le sommaire en haut (40px au lieu de 20). */
	top: calc(var(--header-height, 120px) + 40px);
	padding: 0 45px 0 0;

	/* Retour Marie 21/07/2026 : « le sommaire est long et nécessite un scroll ;
	 * ce scroll ne fonctionne que sur la partie de droite, on n'arrive pas à
	 * atteindre le bas du sommaire (les réseaux sociaux) ». En sticky sans
	 * hauteur maximale, tout ce qui dépasse la fenêtre devient inatteignable :
	 * on borne la hauteur et on rend la colonne défilable pour elle-même.
	 * `overscroll-behavior` évite que la molette parte sur la page dès qu'on
	 * atteint le bas du sommaire. */
	max-height: calc(100vh - var(--header-height, 120px) - 60px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Barre de défilement discrète (WebKit) — le sommaire reste léger visuellement. */
.chru-ecole-sidebar::-webkit-scrollbar { width: 6px; }
.chru-ecole-sidebar::-webkit-scrollbar-thumb {
	background: rgba(20, 68, 107, .25);
	border-radius: 3px;
}
.chru-ecole-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(20, 68, 107, .45); }

/* Mobile : la sidebar repasse dans le flux, pas de hauteur bornée. */
@media (max-width: 1024px) {
	.chru-ecole-sidebar {
		max-height: none;
		overflow-y: visible;
	}
}

/* Offset d'ancrage : les sections visées par le sommaire ne passent plus
 * sous le header sticky (école + formation partagent .chru-ecole-layout).
 * Retours V3 — augmenté à 40px pour caler les titres bien sous le header. */
.chru-ecole-layout [id],
.chru-section[id] {
	scroll-margin-top: calc(var(--header-height, 120px) + 40px);
}

.chru-ecole-sidebar__section {
	margin-bottom: 24px;
}

.chru-ecole-sidebar__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--chru-blue-service, #14446B);
	margin: 0;
}

.chru-ecole-sidebar__accent {
	color: var(--chru-blue-light, #0096D6);
}

.chru-ecole-sidebar__sep {
	width: 273px;
	height: 1px;
	background: var(--chru-blue-service, #14446B);
	margin-top: 6px;
}

.chru-ecole-sidebar__institute {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 14px;
}

.chru-ecole-sidebar__institute svg {
	flex-shrink: 0;
	margin-top: 3px;
}

.chru-ecole-sidebar__institute span {
	font-size: 18px;
	font-weight: 700;
	color: var(--chru-blue-text, #2D4356);
	line-height: 1.4;
}

.chru-ecole-sidebar__links {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.chru-ecole-sidebar__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	text-decoration: none;
	text-underline-offset: 2px;
	transition: color var(--transition-fast, 150ms ease);
}

/* Retour Marie 06/08/2026 — « liens du sommaire soulignés au survol » : le trait
 * est retiré au survol (le chevron et la couleur signalent déjà l'état) et
 * conservé au focus CLAVIER, où il double le contour de focus. Même arbitrage
 * que `.chru-sommaire__link` dans components.css — les deux sommaires du site
 * doivent se comporter pareil. */
.chru-ecole-sidebar__links a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Chevron « arc de flèche » placé EN PREMIER (cohérent avec sommaire CHRU prod).
 * Technique mask-image → couleur héritée de background-color, change au hover. */
.chru-ecole-sidebar__links a::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 14px;
	background-color: var(--chru-blue-light, #009FE3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	flex-shrink: 0;
	transition: background-color var(--transition-fast, 150ms ease);
}

.chru-ecole-sidebar__links a:hover,
.chru-ecole-sidebar__links a:focus-visible {
	color: var(--chru-blue-service, #14446B);
}

.chru-ecole-sidebar__links a:hover::before,
.chru-ecole-sidebar__links a:focus-visible::before {
	background-color: var(--chru-blue-service, #14446B);
}

/* Section en cours de lecture (posée par assets/js/sidebar-toc.js).
 *
 * Bleu clair gras, comme l'item actif du sommaire des pages service
 * (`.chru-sommaire__item.is-active` dans components.css) : même token
 * `--chru-accent`, même chevron laissé en bleu clair. C'est la demande de
 * Marie du 31/07/2026 (« il doit apparaître en bleu clair et non en bleu
 * foncé »), pour que les sommaires écoles/formations soient identiques à
 * ceux du reste du site.
 *
 * ⚠️ Ce bleu fait 3,3:1 sur blanc, sous le seuil AA — c'est la
 * non-conformité 3.2 de l'audit ARA, ASSUMÉE ET ARBITRÉE PAR THOMAS le
 * 31/07/2026 (« tant pis pour le RGAA ») au profit de la cohérence de
 * charte. Le marine posé ici le 27/07 était conforme mais isolé : les
 * pages service, elles, étaient restées en bleu clair.
 * → Ne pas « re-corriger » ce point sans nouvel arbitrage ; s'il est un
 *   jour rouvert, il doit l'être POUR TOUT LE SITE d'un coup (sommaires
 *   service inclus + compteur #009FE3 de /nos-services/). */
.chru-ecole-sidebar__links li.is-active > a {
	font-weight: 700;
	color: var(--chru-accent, #0096D6);
}

/* Retours V3 — lien sous sommaire transformé en bouton encadré, espace
 * augmenté entre sommaire et bouton pour l'aligner sur l'espace bouton ↔ RS. */
.chru-ecole-sidebar__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	text-decoration: none;
	background: transparent;
	border: 1.5px solid var(--chru-blue-service, #14446B);
	border-radius: 30px;
	padding: 10px 20px;
	margin-top: 32px;
	margin-bottom: 40px;
	line-height: 1.4;
	transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.chru-ecole-sidebar__back svg {
	flex-shrink: 0;
	margin-top: 0;
}

.chru-ecole-sidebar__back:hover,
.chru-ecole-sidebar__back:focus-visible {
	/* Pattern Marie : outline natif → garder outline au hover, juste shift de couleur. */
	background: transparent;
	color: var(--chru-blue-light, #0096D6);
	border-color: var(--chru-blue-light, #0096D6);
	text-decoration: none;
}

.chru-ecole-sidebar__back:hover svg path,
.chru-ecole-sidebar__back:focus-visible svg path {
	stroke: var(--chru-blue-light, #0096D6);
}

/* Retours V3 — titre RS sur 2 lignes : « Suivez-nous » / « sur les RS ». */
.chru-ecole-sidebar__social-section .chru-ecole-sidebar__accent {
	display: block;
}

.chru-ecole-sidebar__social-section {
	margin-top: 24px;
}

.chru-ecole-sidebar__social {
	list-style: none;
	padding: 0;
	margin: 16px 0 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chru-ecole-sidebar__social-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	text-decoration: none;
	transition: color var(--transition-fast, 150ms ease);
}

.chru-ecole-sidebar__social-link:hover {
	color: var(--chru-blue-service, #14446B);
}

.chru-ecole-sidebar__social-link svg {
	flex-shrink: 0;
}

/* ============================================
 * 4. CONTENU PRINCIPAL
 * ============================================ */

.chru-ecole-main {
	min-width: 0;
}

.chru-ecole-sep {
	border: none;
	border-top: 1px solid var(--chru-gray-border, #E9E9E9);
	margin: 48px 0;
}

/* ============================================
 * 5. CARTE CONTACT (fond bleu)
 * ============================================ */

.chru-ecole-contact-card {
	background: var(--chru-blue-service, #14446B);
	border-radius: var(--radius-md, 14px);
	color: #fff;
	padding: 36px 54px;
	/* Le <hr> de séparation portait l'espace sous la carte (marge 48px). Il a
	 * été retiré le 20/07 (« un trait se balade ») → on reporte l'espace ici,
	 * sinon le bloc suivant vient coller la carte (retour Marie 14:54). */
	margin-bottom: 48px;
}

.chru-ecole-contact-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.chru-ecole-contact-card__header h2 {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.chru-ecole-contact-card__header svg {
	color: #fff;
	flex-shrink: 0;
}

.chru-ecole-contact-card__name {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 24px;
}

.chru-ecole-contact-card__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 46px;
	/* Aligné sur le titre « Adresse et contact » (largeur icône 24px + gap 10px) */
	padding-left: 34px;
	margin-top: 20px;
}

.chru-ecole-contact-card__col address {
	font-style: normal;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 10px;
}

.chru-ecole-contact-card__directions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 14px 0 0;
}

.chru-ecole-contact-card__directions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.chru-ecole-contact-card__pmr {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin: 14px 0 0;
}

.chru-ecole-contact-card__opening {
	margin-bottom: 10px;
}

.chru-ecole-contact-card__opening strong {
	font-size: 16px;
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
}

.chru-ecole-contact-card__opening p {
	display: flex;
	align-items: center;
	/* Même gouttière que les lignes téléphone / e-mail (retour Clémence 29/07 :
	 * les trois lignes de la colonne droite ne s'alignaient pas). */
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.chru-ecole-contact-card__dot-green {
	width: 12px;
	height: 12px;
	/* La pastille est deux fois plus petite que les icônes 24px : les 6px de
	 * marge de chaque côté lui font occuper la même colonne, centre sur centre,
	 * donc les libellés des 3 lignes démarrent au même x. */
	margin: 0 6px;
	border-radius: 50%;
	background: #4caf50;
	flex-shrink: 0;
}

.chru-ecole-contact-card__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}

.chru-ecole-contact-card__phone svg {
	flex-shrink: 0;
	color: #fff;
}

.chru-ecole-contact-card__phone a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}

.chru-ecole-contact-card__phone-desc {
	font-size: 16px;
	font-style: italic;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.4;
}

.chru-ecole-contact-card__email {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.chru-ecole-contact-card__email svg {
	flex-shrink: 0;
	color: #fff;
}

.chru-ecole-contact-card__email a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}

/* Retour Marie 27/07/2026 : « les liens apparaissent en bleu (pétant), pas
 * accessible » sur les cartes Contact école et formation. Cause : la règle
 * générique des liens éditoriaux (style.css) fait passer TOUT lien en bleu
 * clair #0096D6 au survol ET au focus — sur le fond bleu marine de la carte,
 * ce bleu tombe à ~1,9:1, illisible. Ces liens redéfinissent donc leurs états
 * eux-mêmes : ils restent blancs (contraste 9,6:1) et c'est le soulignement
 * qui signale le survol. */
.chru-ecole-contact-card__link {
	color: #fff;
}

.chru-ecole-contact-card__link:hover,
.chru-ecole-contact-card__link:focus,
.chru-ecole-contact-card__link:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ============================================
 * 6. CONTENU GUTENBERG
 * ============================================ */

/* ⚠️ `:not([class*="__"])` (Marie 13/08/2026 10:06) : typo ET marges réservées
 * aux H2 ÉDITORIAUX. Les titres internes des blocs maison gèrent les leurs —
 * sans l'exclusion, ce gabarit imposait 24px et sa marge au titre du bloc
 * « Fichiers et documents », qui se dessine à 18px chez lui. */
.chru-ecole-content h2:not([class*="__"]) {
	/* ⚠️ `var(--h2-size)` et NON 24px en dur : le token descend à 20px en mobile.
	 * Même piège que sur les formations — avec le `:not()`, ce sélecteur passe à
	 * (0,2,1) et l'emporte sur la règle canonique de components.css, donc le
	 * 24px en dur ressortait sur mobile. */
	font-size: var(--h2-size, 24px);
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 20px;
	/* 1.3 → 1.2 (Marie 13/08/2026) : interligne unique des H2 éditoriaux du
	 * site, cf. components.css. */
	line-height: 1.2;
}

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

.chru-ecole-content ul,
.chru-ecole-content ol {
	margin: 0 0 20px 24px;
	color: var(--chru-blue-text, #2D4356);
	line-height: 1.6;
}

/* Liens dans le contenu — ÉCOLE. Exclut explicitement les éléments à
 * apparence bouton (sinon la règle 0,2,0 écrase la couleur native du bouton
 * qui est en 0,1,0). Le garde-fou universel ci-dessous dans components.css
 * empêche aussi text-decoration:underline sur les boutons. */
.chru-ecole-content a:not(.chru-btn):not(.wp-block-button__link):not([class*="__button"]):not([class*="__cta"]):not([class*="__link"]) {
	color: var(--chru-blue-service, #14446B);
	text-decoration: underline;
}

/* ============================================
 * 7. CHIFFRES CLÉS (capacité / Qualiopi)
 * ============================================ */

/* Titres de section (Chiffres clés, Démarche qualité) — espace au-dessus + accent.
 * Retours V3 — l'espace au-dessus était trop grand (56→24px). */
.chru-ecole-section-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.3;
	margin: 24px 0 16px;
	display: inline-block;
}

/* Titre bicolore, comme le reste du site (retour Marie 20/07). */
.chru-ecole-section-title__accent {
	color: var(--chru-blue-light, #0096D6);
}

/* ============================================
 * Chiffres clés — design unifié avec les pages formation (Retours V3).
 * Les classes .chru-formation-chiffres* sont définies dans single-formation.css
 * qui n'est PAS chargé sur les fiches école. On duplique ici pour les
 * pages école, à l'identique, avec une variante --no-icon.
 * ============================================ */
.chru-formation-chiffres {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--chru-chiffres-count, 3), minmax(0, 1fr));
	gap: 16px;
}

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

.chru-formation-chiffres--no-icon .chru-formation-chiffres__item {
	padding: 32px 20px;
}

/* Pictos (retour Marie 20/07) — repris à l'identique des pages formation. */
.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--no-icon .chru-formation-chiffres__icon {
	display: none;
}

.chru-formation-chiffres__value {
	font-size: 36px;
	font-weight: 800;
	line-height: 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);
	line-height: 1.3;
}

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

.chru-ecole-fiche,
.chru-ecole-indicators {
	margin-bottom: 8px;
}

/* Retours Marie 21/07 (E1) : les chiffres clés vivent désormais JUSTE SOUS la
 * présentation, « avec un peu d'espace autour que ce soit aéré ». */
.chru-ecole-fiche--v3 {
	margin: 48px 0;
}

/* Retours Marie 21/07 (E3) : tableau étroit (1-2 colonnes de données) +
 * documents en téléchargement → côte à côte plutôt qu'empilés. Empilé en
 * dessous de 900px (et disposition historique quand le tableau est large). */
@media (min-width: 900px) {
	.chru-ecole-indicators__body--side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
		gap: 28px;
		align-items: start;
	}
	.chru-ecole-indicators__body--side .chru-ecole-indicators__docs {
		margin-top: 0;
	}
	.chru-ecole-indicators__body--side .chru-ecole-indicators__docs .chru-documents-list__items {
		grid-template-columns: 1fr;
	}

	/* Retour Marie 27/07/2026 : « ajuste la mise en page, il ne faut pas un
	 * énorme espace entre les deux — le tableau prendrait la moitié gauche ».
	 * En côte à côte, le tableau gardait la largeur réduite prévue pour la
	 * disposition empilée (50 % pour 2 colonnes, 75 % pour 3) : il n'occupait
	 * donc que la moitié de sa propre colonne, d'où le grand vide central.
	 * Dans cette disposition, il remplit sa colonne. */
	.chru-ecole-indicators__body--side .chru-ecole-indicators__wrap[data-cols="2"] .chru-ecole-indicators__table--auto,
	.chru-ecole-indicators__body--side .chru-ecole-indicators__wrap[data-cols="3"] .chru-ecole-indicators__table--auto {
		width: 100%;
	}
}

.chru-ecole-fiche__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 4px;
}

.chru-ecole-fiche__card {
	background: var(--chru-gray-light, #EFF2F5);
	padding: 36px 32px;
	border-radius: var(--radius-md, 14px);
	border: none;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease);
}

.chru-ecole-fiche__card:hover {
	box-shadow: 0 8px 24px rgba(20, 68, 107, 0.12);
	transform: translateY(-2px);
}

.chru-ecole-fiche__value {
	font-size: 56px;
	font-weight: 800;
	color: var(--chru-blue-service, #14446B);
	line-height: 1;
}

.chru-ecole-fiche__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
}

/* Texte libre sous la capacité d'accueil (pleine largeur, italique non gras) */
.chru-ecole-fiche__note {
	margin-top: 20px;
	font-style: italic;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
}

.chru-ecole-fiche__note p {
	margin: 0 0 8px;
}

.chru-ecole-fiche__note p:last-child {
	margin-bottom: 0;
}

/* Retour client « Retours V2 » : les italiques ne doivent jamais être en gras. */
.chru-ecole-fiche__note strong,
.chru-ecole-fiche__note b,
.chru-ecole-fiche__note em {
	font-weight: 400;
}

/* ============================================
 * 8. INDICATEURS (tableau)
 * ============================================ */

.chru-ecole-indicators__wrap {
	overflow-x: auto;
	margin-top: 20px;
}

/* Documents téléchargeables sous le tableau démarche qualité. */
.chru-ecole-indicators__docs {
	margin-top: 20px;
}

.chru-ecole-indicators__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--radius-md, 14px);
	overflow: hidden;
	box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* Retours V3 — quand une colonne d'année est vide partout, on la masque.
 * Le tableau ne s'étire pas pour combler : la largeur des colonnes
 * restantes reste calibrée comme pour 4 colonnes, le tableau rétrécit. */
.chru-ecole-indicators__wrap[data-cols="3"] .chru-ecole-indicators__table--auto {
	width: 75%;
}
.chru-ecole-indicators__wrap[data-cols="2"] .chru-ecole-indicators__table--auto {
	width: 50%;
}
@media (max-width: 768px) {
	.chru-ecole-indicators__wrap[data-cols="3"] .chru-ecole-indicators__table--auto,
	.chru-ecole-indicators__wrap[data-cols="2"] .chru-ecole-indicators__table--auto {
		width: 100%;
	}
}

.chru-ecole-indicators__table th,
.chru-ecole-indicators__table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--chru-gray-border, #E9E9E9);
	font-size: 15px;
}

.chru-ecole-indicators__table thead th {
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	font-weight: 700;
}

.chru-ecole-indicators__table tbody th {
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
}

.chru-ecole-indicators__table tbody td {
	color: var(--chru-blue-text, #2D4356);
}

/* ============================================
 * 9. FORMATIONS LIÉES
 * ============================================ */

.chru-formation-ecoles {
	margin: 60px 0;
}

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

/* ============================================
 * 10. RESPONSIVE
 * ============================================ */

@media (max-width: 1024px) {
	.chru-hero-ecole__card {
		padding: 40px 60px;
	}

	.chru-hero-ecole__title {
		font-size: 36px;
	}

	.chru-hero-ecole__chapo {
		font-size: 20px;
	}

	.chru-ecole-layout {
		grid-template-columns: 300px 1fr;
		gap: 40px;
	}

	.chru-ecole-contact-card {
		padding: 28px 36px;
	}
}

@media (max-width: 900px) {
	.chru-hero-ecole {
		height: 350px;
		margin-bottom: 280px;
	}

	.chru-hero-ecole__inner {
		bottom: -250px;
	}

	.chru-hero-ecole__card {
		padding: 32px 28px;
	}

	.chru-hero-ecole__title {
		font-size: 28px;
	}

	.chru-hero-ecole__chapo {
		font-size: 18px;
	}

	.chru-ecole-layout {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 0 60px;
	}

	.chru-ecole-sidebar {
		position: static;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 16px 32px;
		border-bottom: 1px solid var(--chru-gray-border, #E9E9E9);
		padding-bottom: 24px;
	}

	.chru-ecole-sidebar__section {
		width: 100%;
	}

	.chru-ecole-sidebar__institute {
		width: 100%;
	}

	.chru-ecole-sidebar__nav {
		width: 100%;
	}

	.chru-ecole-sidebar__links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 20px;
	}

	.chru-ecole-sidebar__back {
		width: 100%;
		margin-bottom: 16px;
	}

	.chru-ecole-sidebar__social-section {
		width: 100%;
		margin-top: 0;
	}

	.chru-ecole-sidebar__social {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 20px;
	}

	/* Retour Marie 27/07/2026 (capture « souci avec les lignes ») : sous
	 * 1024px la sidebar devient une rangée flex. Les traits de séparation et
	 * la liste des réseaux sociaux, qui sont ses enfants DIRECTS, devenaient
	 * donc des éléments de cette rangée : avec un seul réseau renseigné, le
	 * trait de fin venait se placer À CÔTÉ de « Tiktok », au milieu du vide.
	 * On force ces enfants sur toute la largeur : chacun reprend sa ligne. */
	.chru-ecole-sidebar > .chru-ecole-sidebar__sep,
	.chru-ecole-sidebar > .chru-ecole-sidebar__social {
		width: 100%;
	}

	/* Le trait est calibré pour la colonne de 273px du bureau : en pleine
	 * largeur mobile il s'arrêtait au tiers de l'écran. */
	.chru-ecole-sidebar__sep {
		width: auto;
	}

	.chru-ecole-contact-card__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.chru-hero-ecole {
		height: 280px;
		margin-bottom: 320px;
	}

	.chru-hero-ecole__inner {
		bottom: -300px;
	}

	.chru-hero-ecole__card {
		padding: 24px 20px;
		border-radius: 20px;
	}

	.chru-hero-ecole__title {
		font-size: 24px;
	}

	.chru-hero-ecole__chapo {
		font-size: 16px;
	}

	/* Le CTA du hero (libellé long, ex. « Candidature et inscription à la
	 * formation ») débordait du viewport mobile (+55px de scroll horizontal,
	 * audit 24/07) : on l'autorise à passer sur 2 lignes. */
	.chru-hero-ecole__cta {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	.chru-ecole-contact-card {
		padding: 24px 20px;
		border-radius: 12px;
	}

	.chru-ecole-fiche__grid {
		grid-template-columns: 1fr;
	}

	.chru-ecole-sep {
		margin: 32px 0;
	}

	/* Retour Marie 19/07 : sur téléphone, le sommaire en ligne (wrap) est
	   illisible → retour à une liste verticale, un item par ligne.
	   Retour Marie 21/07 : espaces resserrés (gap 12→8, marges de sections
	   réduites) — « les espaces me semblent un peu trop importants ». */
	.chru-ecole-sidebar__links {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 8px;
	}

	.chru-ecole-sidebar__section {
		margin-bottom: 8px;
	}

	.chru-ecole-sidebar__sep {
		margin: 10px 0;
	}

	/* Retour Marie 27/07/2026 : « les espaces entre les différents éléments du
	 * sommaire mobile me semblent un peu trop importants ». Les blancs
	 * s'additionnaient (marge de la liste + gouttière de la rangée flex +
	 * marge du bloc suivant) : jusqu'à ~80px entre deux encarts. On resserre
	 * la gouttière de la colonne et les marges des encarts qui suivent. */
	.chru-ecole-sidebar {
		gap: 8px 32px;
		padding-bottom: 16px;
	}

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

	.chru-ecole-sidebar__social {
		margin: 8px 0 8px;
	}

	.chru-ecole-sidebar__back {
		margin-top: 12px;
		margin-bottom: 8px;
	}
}

/* ============================================
 * 11. HERO SANS PHOTO
 * --------------------------------------------
 * Retour Clémence 29/07/2026 : « écart énorme avant l'encart » sur /ecole/ifas/
 * et /formation/devenir-aide-soignant/.
 *
 * Le hero normal est une bande photo de 440px dont la carte blanche déborde de
 * 200px vers le bas (d'où le margin-bottom de 240px). Quand la fiche n'a PAS
 * d'image mise en avant — c'est le cas de 29 des 47 écoles/formations publiées,
 * dont les 7 écoles — la bande reste là mais vide : une colonne de blanc de
 * 440px entre le fil d'Ariane et la carte.
 *
 * On bascule alors sur un hero « à plat » : plus de bande, plus de
 * chevauchement, la carte suit simplement le fil d'Ariane. Dès qu'une image
 * est renseignée en back-office, le hero d'origine revient sans rien changer
 * d'autre.
 *
 * Ce bloc est volontairement en FIN de fichier : à spécificité égale avec les
 * règles des @media ci-dessus (une media query n'ajoute pas de spécificité),
 * c'est l'ordre source qui tranche.
 * ============================================ */

.chru-hero-ecole--no-image {
	height: auto;
	min-height: 0;
	background-image: none !important;
	margin-bottom: 40px;
}

.chru-hero-ecole--no-image .chru-hero-ecole__inner {
	position: static;
	transform: none;
	bottom: auto;
	left: auto;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.chru-hero-ecole--no-image {
		height: auto;
		margin-bottom: 32px;
	}

	.chru-hero-ecole--no-image .chru-hero-ecole__inner {
		bottom: auto;
	}
}