/**
 * Front Page — Homepage CHRU Nancy
 * Design reproduit depuis la maquette Elementor (chrunancy.dev-commpagnie.com)
 *
 * @since 2.9.0
 */

/* ============================================
   COMMON
   ============================================ */
.chru-front-page {
	overflow-x: hidden;
}

/* Largeur max globale pour tout le contenu — aligné sur le header */
.chru-fp-hero__inner,
.chru-fp-parcours__inner,
.chru-fp-hopitaux__inner,
.chru-fp-events__inner,
.chru-fp-focus__inner,
.chru-fp-newhospital__inner {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding, 45px);
	padding-right: var(--container-padding, 45px);
	box-sizing: border-box;
}

/* Cards CTA : max-width alignée sur le cadre 1440 (− 2×45 de gouttière) */
.chru-fp-recrutement__card,
.chru-fp-recherche__card {
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   1. HERO
   ============================================ */
.chru-fp-hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--chru-blue-service, #14446B);
	color: #fff;
	padding: 80px 0 60px;
}

/* ── Couleur des textes du hero ──────────────────────────────────────────
   Le voile bleu marine qui couvrait la photo (posé le 20/07/2026) est retiré
   le 14/08/2026 à la demande de Marie KUSY : « on préfère que tu enlèves le
   fond bleu et que tu laisses le flou transparent autour du formulaire de
   recherche ». Les textes reposent donc directement sur la photo, et leur
   couleur se règle en back-office (Réglages → Page d'accueil → Hero).

   ⚠️ Le contraste dépend désormais de la PHOTO : il n'est plus garanti par le
   site. À revérifier à chaque changement d'image de fond — c'est exactement
   la raison d'être du réglage. */

.chru-fp-hero--text-dark {
	color: var(--chru-blue-service, #14446B);
}

.chru-fp-hero--text-dark .chru-fp-hero__subtitle,
.chru-fp-hero--text-dark .chru-fp-hero__title,
.chru-fp-hero--text-dark .chru-fp-hero__desc,
.chru-fp-hero--text-dark .chru-fp-hero__chips-label,
.chru-fp-hero--text-dark .chru-fp-hero__switch-label {
	color: var(--chru-blue-service, #14446B);
}

/* Les commandes de la zone de recherche sont dessinées pour un fond sombre :
   en thème « bleu », il faut les inverser, sinon elles rendent blanc sur clair.
   Sélecteurs préfixés `.chru-front-page` pour passer devant les règles de base,
   qui le sont déjà (voir plus bas, § switch et puces). */
.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__switch {
	background: rgba(20, 68, 107, 0.08);
}
.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__searchbox .chru-fp-hero__switch-btn {
	color: var(--chru-blue-service, #14446B);
}
.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__searchbox .chru-fp-hero__switch-btn.is-active {
	background: var(--chru-blue-service, #14446B);
	color: #fff;
}
/* ⚠️ Les ACCÈS RAPIDES n'ont volontairement PLUS de variante par thème depuis le
   14/08/2026 : Marie KUSY les a fixés en bouton plein #003761 à libellé blanc,
   lisible sur photo claire comme sur photo sombre. Leur style unique est défini
   plus bas (§ Accès rapides). Ne pas réintroduire d'override `--text-dark` ici :
   il gagnerait en spécificité (0,4,0 contre 0,3,0) et rouvrirait un écart entre
   les deux thèmes. */

/* ── Pas de voile sur la photo du hero ────────────────────────────────────
   Le 01/09/2026 un aplat vert (#8FC5A5, échantillonné dans `accueil-8.jpg`)
   était posé en `::before` sur la moitié gauche, pour donner l'illusion d'une
   photo décalée vers la droite. RETIRÉ le 01/09 au soir sur retour de David
   KUSY relayé par Marie : « un voile de couleur est revenu sur l'image de la
   page d'accueil, on peut l'enlever ».

   ⚠️ Ne pas le remettre « pour le contraste » : il n'apporte rien. Mesuré sur
   les rectangles réels du titre (Range.getClientRects), photo NUE, texte bleu
   #14446B : contraste minimum 3,27:1 pour un H1 de 45px/800, donc au-dessus du
   seuil AA du grand texte (3:1) ; moyennes de 5,04 à 5,43:1 sur la colonne de
   texte, soit exactement ce que donnait l'aplat (5,17:1). Il ne gagnait donc
   aucune lisibilité, et son fondu courait jusqu'à 74 % de la largeur, c'est-à-
   dire par-dessus une zone de la photo qui n'est plus verte (rgb(127,127,97)
   mesuré à 74 %) : c'est ce qui se voyait comme un voile.

   ⚠️ Si l'image de fond change en back-office, REMESURER le contraste du titre
   sur la nouvelle photo — depuis le retrait du voile, la lisibilité dépend de
   l'image et n'est plus garantie par le site. Le champ « Couleur des textes »
   (Réglages → Page d'accueil → Hero) permet de basculer en blanc. */

.chru-fp-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.chru-fp-hero__subtitle {
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	opacity: 1;
}

.chru-fp-hero__title {
	font-size: clamp(32px, 5vw, 45px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 20px;
	color: #fff;
}

.chru-fp-hero__desc {
	font-size: 16px;
	line-height: 1.6;
	/* RGAA : texte 16px → 4.5:1 requis, pas d'opacité réduite. */
	opacity: 1;
	margin-bottom: 32px;
	max-width: 680px;
}

.chru-fp-hero__search {
	display: flex;
	align-items: center;
	max-width: 680px;
	background: #fff;
	border-radius: 50px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	padding: 6px 6px 6px 0;
}

/* Outil de recherche unifié (#13) : switch public (au-dessus) + recherche + accès
   rapides, regroupés dans un panneau pour se lire comme UN seul ensemble.
   NB : on préfixe les boutons par .chru-front-page …__searchbox pour battre la
   règle globale `body:not(.elementor-page) [type="button"]` (components.css). */
.chru-fp-hero__searchbox {
	max-width: 720px;
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	/* Voile blanc à 30 % — demande de Marie KUSY du 14/08/2026 (« mettre
	   l'opacité à 0.30 »), après la suppression du voile bleu du hero : le
	   panneau doit se détacher davantage de la photo. C'est bien le FOND qui
	   est à 0,30 et non le bloc entier (un `opacity` global rendrait aussi le
	   texte translucide). */
	background: rgba(255, 255, 255, 0.30);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 22px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* La barre de recherche remplit toute la largeur du panneau. */
.chru-fp-hero__searchbox .chru-fp-hero__search {
	max-width: none;
}

/* ── Ligne switch (au-dessus de la recherche) avec libellé explicite ── */
.chru-fp-hero__switch-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.chru-fp-hero__switch-label {
	/* 16px / 800 — demande de Marie KUSY du 14/08/2026. */
	font-size: 16px;
	font-weight: 800;
	color: #fff;
}
.chru-fp-hero__switch {
	display: inline-flex;
	background: rgba(8, 30, 52, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 999px;
	padding: 4px;
	gap: 3px;
}
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__switch-btn {
	border: none;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 20px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__switch-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__switch-btn.is-active {
	background: #fff;
	color: var(--chru-blue-service, #14446B);
}

/* ── Accès rapides (chips) ── */
.chru-fp-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.chru-fp-hero__chips-label {
	/* 14px — demande de Marie KUSY du 14/08/2026. */
	font-size: 14px;
	color: #fff;
	/* RGAA : 13px → 4.5:1 requis, pas d'opacité réduite. */
	opacity: 1;
	white-space: nowrap;
}
/* Boutons pleins bleu accent, libellé blanc, sans soulignement — demande de
   Marie KUSY du 14/08/2026. Style UNIQUE : il vaut pour les deux thèmes de
   texte du hero et pour le mobile (cf. l'avertissement en tête de fichier).
   La bordure reprend la couleur du fond : elle ne sert qu'à conserver la même
   géométrie qu'avant, pas à dessiner un liseré. */
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__chip {
	border: 1px solid var(--chru-blue-accent, #003761);
	background: var(--chru-blue-accent, #003761);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__chip:hover,
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__chip:focus-visible {
	background: rgba(255, 255, 255, 0.5);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--chru-blue-accent, #003761);
	text-decoration: none;
}
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__switch-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
/* ⚠️ Le halo de focus des accès rapides est DOUBLE (blanc puis marine) depuis
   que le bouton est plein : un simple halo blanc disparaissait sur une photo
   claire, et un halo marine sur une photo sombre. Deux anneaux contrastés
   entre eux restent visibles quel que soit le fond (RGAA 10.7). */
.chru-front-page .chru-fp-hero__searchbox .chru-fp-hero__chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
	            0 0 0 5px var(--chru-blue-accent, #003761);
}

/* Dropdown suggestions (sibling du form) */
.chru-fp-hero__suggestions {
	position: absolute;
	/* left / top / width calculés en JS pour s'aligner précisément sur le form */
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	max-height: 480px;
	overflow-y: auto;
	display: none;
	z-index: 20;
	color: var(--chru-blue-text, #2D4356);
	text-align: left;
}
.chru-fp-hero__suggestions.is-open { display: block; }
.chru-fp-hero__sugg-group { padding: 8px 0; border-bottom: 1px solid #f0f2f5; }
.chru-fp-hero__sugg-group:last-of-type { border-bottom: 0; }
.chru-fp-hero__sugg-label {
	padding: 10px 20px 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--chru-blue-service, #14446B);
}
.chru-fp-hero__sugg-item {
	display: block;
	padding: 10px 20px;
	color: var(--chru-blue-text, #2D4356);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
}
.chru-fp-hero__sugg-item:hover,
.chru-fp-hero__sugg-item:focus {
	background: var(--chru-gray-light, #EFF2F5);
	color: var(--chru-blue-accent, #003761);
	outline: none;
}
.chru-fp-hero__sugg-more {
	display: block;
	padding: 14px 20px;
	background: var(--chru-gray-light, #EFF2F5);
	color: var(--chru-blue-accent, #003761);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	border-top: 1px solid #e1e4e8;
}
.chru-fp-hero__sugg-more:hover { background: #e1e7ed; }
.chru-fp-hero__sugg-empty {
	padding: 24px 20px;
	text-align: center;
	color: var(--chru-gray-text, #929292);
	font-size: 14px;
}

.chru-fp-hero__search-input {
	flex: 1;
	border: none !important;
	padding: 12px 28px !important;
	font-size: 16px;
	color: var(--chru-blue-text, #2D4356);
	background: transparent !important;
	outline: none;
}

.chru-fp-hero__search-input::placeholder {
	color: #aaa;
	font-size: 16px;
}

.chru-fp-hero__search-btn {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 14px 32px !important;
	border: none !important;
	background: var(--chru-blue-accent, #003761) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 50px !important;
	transition: background 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.chru-fp-hero__search-btn:hover {
	background: var(--chru-blue-service, #14446B) !important;
}

.chru-fp-hero__search-btn .chru-icon {
	width: 18px;
	height: 18px;
}

/* ============================================
   2. PARCOURS DE SOINS
   ============================================ */
.chru-fp-parcours {
	background: var(--chru-gray-light, #EFF2F5);
	padding: 60px 0;
}

.chru-fp-parcours__inner {
	text-align: center;
}

/* Sur-titre « Votre parcours de soins ».

   ⚠️ Il portait une GÉLULE blanche (fond #fff, radius 20px, padding 6/16) là où
   les trois autres sur-titres de l'accueil (« Nos hôpitaux… », « Nos événements »,
   « Le nouvel hôpital… ») ne rendent qu'une pastille suivie du texte. Marie KUSY
   l'a remonté le 01/09/2026 : « on a parfois une gélule et parfois non ».
   Uniformisé sur la PASTILLE SEULE, décision de Thomas le même jour.

   ⚠️ Uniformiser dans l'autre sens était impossible : « Nous trouver » et « Le
   nouvel hôpital » sont sur fond BLANC, une gélule blanche y serait invisible.
   C'est ce que disait déjà le commentaire de la section « Uniformisation des
   sur-titres » plus bas dans ce fichier. Ne pas réintroduire de fond ici. */
.chru-fp-parcours__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	margin-bottom: 12px;
}

.chru-fp-parcours__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chru-blue-light, #009FE3);
}

.chru-fp-parcours__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 32px;
}

.chru-fp-parcours__title-accent {
	color: var(--chru-blue-light, #009FE3);
}

.chru-fp-parcours__carousel {
	position: relative;
}

.chru-fp-parcours__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.chru-fp-parcours__nav {
	display: none;
}

.chru-fp-parcours__nav-btn,
.chru-fp-events__nav-btn,
.chru-fp-hopitaux__nav {
	-webkit-tap-highlight-color: transparent;
}

.chru-fp-parcours__nav-btn:focus,
.chru-fp-parcours__nav-btn:active,
.chru-fp-events__nav-btn:focus,
.chru-fp-events__nav-btn:active,
.chru-fp-hopitaux__nav:focus,
.chru-fp-hopitaux__nav:active {
	background: #fff;
	color: var(--chru-blue-service, #14446B);
	outline: none;
}

.chru-fp-parcours__nav-btn:focus-visible,
.chru-fp-events__nav-btn:focus-visible,
.chru-fp-hopitaux__nav:focus-visible {
	outline: 2px solid var(--chru-blue-light, #009FE3);
	outline-offset: 2px;
}

.chru-fp-parcours__nav-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--chru-blue-service, #14446B);
	background: #fff;
	color: var(--chru-blue-service, #14446B);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, opacity 0.2s;
	padding: 0;
}

@media (hover: hover) {
	.chru-fp-parcours__nav-btn:hover {
		background: var(--chru-blue-service, #14446B);
		color: #fff;
	}
}

.chru-fp-parcours__card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--chru-gray-border, #E1E1E1);
	border-radius: 12px;
	padding: 16px 20px;
	text-decoration: none;
	color: var(--chru-blue-text, #2D4356);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.chru-fp-parcours__card:hover {
	border-color: var(--chru-blue-light, #009FE3);
	/* Ombre portée retirée (retour client) — on conserve la bordure bleue au survol. */
}

.chru-fp-parcours__card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chru-fp-parcours__card-icon img,
.chru-fp-parcours__card-icon svg {
	width: 40px;
	height: 40px;
}

.chru-fp-parcours__card-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.chru-fp-parcours__card-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.3;
}

/* Contraste (RGAA 3.2, remonté par Lighthouse le 02/09/2026) : le bleu clair de
   charte #0096D6 sur le fond blanc de la carte ne fait que 3,32:1, sous le seuil
   AA de 4,5 pour ce libellé de 13px. Assombri ici, et ICI SEULEMENT (arbitrage
   Thomas du 02/09) : le bleu de charte reste inchangé partout ailleurs.
   #0077AB = 4,97:1, écart visuel à peine perceptible. */
.chru-fp-parcours__card-link {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #0077AB;
	margin-top: 4px;
}

.chru-fp-parcours__card-link .chru-icon {
	width: 14px;
	height: 14px;
	color: #0077AB;
}

/* Carte CTA « Préparez votre venue » — fond bleu foncé, sans icône (retour client) */
.chru-fp-parcours__card--cta {
	background: var(--chru-blue-service, #14446B);
	border-color: var(--chru-blue-service, #14446B);
}

.chru-fp-parcours__card--cta:hover {
	border-color: var(--chru-blue-light, #009FE3);
	background: var(--chru-blue-accent, #003761);
}

.chru-fp-parcours__card--cta .chru-fp-parcours__card-label {
	color: #fff;
}

.chru-fp-parcours__card--cta .chru-fp-parcours__card-link,
.chru-fp-parcours__card--cta .chru-fp-parcours__card-link .chru-icon {
	color: #fff;
}

/* ============================================
   3. HÔPITAUX — Carrousel
   ============================================ */
.chru-fp-hopitaux {
	padding: 60px 0;
	background: #fff;
}

.chru-fp-hopitaux__inner {
}

.chru-fp-hopitaux__header {
	/* Retour David 06/2026 : l'intro « se perdait à droite » (flex space-between).
	   On empile titre puis intro, alignés à gauche. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 40px;
}

.chru-fp-hopitaux__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-light, #009FE3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.chru-fp-hopitaux__title {
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0;
}

.chru-fp-hopitaux__desc {
	max-width: 680px;
	font-size: 15px;
	color: var(--chru-blue-text, #2D4356);
	line-height: 1.6;
	margin: 0;
	text-align: left;
}

/* Bouton « Tous nos sites » sous le carrousel (retour David 06/2026). */
.chru-fp-hopitaux__footer {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}
.chru-fp-hopitaux__all {
	gap: 8px;
}

.chru-fp-hopitaux__carousel {
	position: relative;
}

/* Fondu des bords du carrousel : la carte qui sort du cadre s'estompe au lieu
   d'être tranchée net. Les deux largeurs sont pilotées par les classes posées
   par front-page.js (is-scrolled / is-end) → pas de fondu du côté où il n'y a
   plus rien à révéler. Déclarées en @property pour être animables. */
@property --chru-fade-start {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --chru-fade-end {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

.chru-fp-hopitaux__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: none;

	--chru-fade-start: 0px;
	--chru-fade-end: 72px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--chru-fade-start), #000 calc(100% - var(--chru-fade-end)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--chru-fade-start), #000 calc(100% - var(--chru-fade-end)), transparent 100%);
	transition: --chru-fade-start 0.25s ease, --chru-fade-end 0.25s ease;
}

/* Défilement entamé → on estompe aussi le bord gauche. */
.chru-fp-hopitaux__track.is-scrolled {
	--chru-fade-start: 72px;
}

/* Dernière carte atteinte (ou aucun défilement possible) → bord droit net. */
.chru-fp-hopitaux__track.is-end {
	--chru-fade-end: 0px;
}

@media (prefers-reduced-motion: reduce) {
	.chru-fp-hopitaux__track {
		transition: none;
	}
}

.chru-fp-hopitaux__track::-webkit-scrollbar {
	display: none;
}

.chru-fp-hopitaux__slide {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.chru-fp-hopitaux__card {
	display: block;
	text-decoration: none;
	color: var(--chru-blue-text, #2D4356);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s, transform 0.2s;
	background: #fff;
}

.chru-fp-hopitaux__card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

.chru-fp-hopitaux__card-img {
	width: 100%;
	height: 180px;
	overflow: hidden;
}

.chru-fp-hopitaux__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.chru-fp-hopitaux__card:hover .chru-fp-hopitaux__card-img img {
	transform: scale(1.05);
}

.chru-fp-hopitaux__card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--chru-gray-light, #EFF2F5);
	color: var(--chru-blue-pastel, #7CA1CC);
}

.chru-fp-hopitaux__card-body {
	padding: 20px;
	text-align: center;
}

.chru-fp-hopitaux__card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 12px;
	line-height: 1.3;
}

.chru-fp-hopitaux__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-light, #009FE3);
}

/* Nav buttons */
.chru-fp-hopitaux__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--chru-blue-service, #14446B);
	background: #fff;
	color: var(--chru-blue-service, #14446B);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
	z-index: 2;
}

@media (hover: hover) {
	.chru-fp-hopitaux__nav:hover {
		background: var(--chru-blue-service, #14446B);
		color: #fff;
	}
}

.chru-fp-hopitaux__nav--prev {
	left: -24px;
}

.chru-fp-hopitaux__nav--next {
	right: -24px;
}

/* ============================================
   4. ÉVÉNEMENTS (2 colonnes : titre+nav | cards)
   ============================================ */
.chru-fp-events {
	padding: 60px 0;
	background: var(--chru-gray, #F6F6F6);
}

.chru-fp-events__inner {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	/* Bleed vers le bord droit : on casse la contrainte max-width,
	   la colonne gauche reste alignée sur le container 1440px */
	max-width: none;
	padding-right: 0;
	padding-left: max(var(--container-padding, 45px), calc((100vw - 1440px) / 2 + var(--container-padding, 45px)));
}

/* Colonne gauche : titre + nav */
.chru-fp-events__left {
	flex-shrink: 0;
	width: 280px;
	padding-top: 20px;
}

.chru-fp-events__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	margin-bottom: 12px;
}

.chru-fp-events__label::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chru-blue-light, #009FE3);
}

.chru-fp-events__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: var(--chru-blue-light, #009FE3);
	margin: 0 0 20px;
}

.chru-fp-events__nav {
	display: flex;
	gap: 8px;
}

.chru-fp-events__nav-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--chru-blue-service, #14446B);
	background: transparent;
	color: var(--chru-blue-service, #14446B);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
	padding: 0;
}

@media (hover: hover) {
	.chru-fp-events__nav-btn:hover {
		background: var(--chru-blue-service, #14446B);
		color: #fff;
	}
}

/* Colonne droite : cards */
.chru-fp-events__right {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.chru-fp-events__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.chru-fp-events__track::-webkit-scrollbar {
	display: none;
}

/* Cards événements : fond blanc */
.chru-fp-events .chru-card-event {
	flex: 0 0 300px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.chru-fp-events .chru-card-event__image {
	border-radius: 16px 16px 0 0;
}

.chru-fp-events .chru-card-event__title {
	color: var(--chru-blue-service, #14446B);
}

.chru-fp-events__empty {
	font-size: 16px;
	color: var(--chru-gray-text, #929292);
	padding: 40px 0;
}

/* ============================================
   5. FOCUS — Article mis en avant
   ============================================ */
.chru-fp-focus {
	padding: 80px 0;
	background: #fff;
}

.chru-fp-focus__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.chru-fp-focus__image {
	border-radius: 16px;
	overflow: hidden;
}

.chru-fp-focus__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4/3;
	display: block;
}

.chru-fp-focus__badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--chru-blue-light, #009FE3);
	margin-bottom: 12px;
}

.chru-fp-focus__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 16px;
	line-height: 1.3;
}

.chru-fp-focus__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--chru-blue-text, #2D4356);
	margin-bottom: 24px;
}

/* ============================================
   6. RECRUTEMENT (card 2 colonnes)
   ============================================ */
.chru-fp-recrutement {
	padding: 40px 0;
}

.chru-fp-recrutement__card {
	display: grid;
	grid-template-columns: 320px 1fr;
	background: var(--chru-blue-service, #14446B);
	border-radius: 20px;
	overflow: hidden;
	color: #fff;
	min-height: 320px;
}

.chru-fp-recrutement__image {
	position: relative;
	overflow: hidden;
}

.chru-fp-recrutement__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.chru-fp-recrutement__content {
	padding: 48px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.chru-fp-recrutement__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
	background: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 16px;
	width: fit-content;
}

.chru-fp-recrutement__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chru-blue-light, #009FE3);
}

.chru-fp-recrutement__title {
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1.2;
}

.chru-fp-recrutement__desc {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.85;
	margin-bottom: 28px;
	max-width: 520px;
}

/* Override outline button for white context */
.chru-fp-recrutement .chru-btn--outline {
	color: var(--chru-blue-service, #14446B);
	border-color: var(--chru-blue-service, #14446B);
	background: #fff;
	width: fit-content;
}

.chru-fp-recrutement .chru-btn--outline:hover,
.chru-fp-recrutement .chru-btn--outline:focus-visible {
	/* Design system : au hover, bouton « ghost » sur le fond bleu de la carte
	   → fond transparent, bordure + texte (et flèche, via currentColor) blancs.
	   Le bord blanc de 1px existe déjà au repos (transparent) → pas de saut. */
	background: transparent !important;
	border-color: #fff !important;
	color: #fff !important;
}

/* ============================================
   7. RECHERCHE (card full-width image bg)
   ============================================ */
.chru-fp-recherche {
	padding: 0 0 40px;
}

.chru-fp-recherche__card {
	background-size: cover;
	background-position: center;
	border-radius: 20px;
	overflow: hidden;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	padding: 48px 56px;
	position: relative;
}

.chru-fp-recherche__content {
	position: relative;
	z-index: 2;
	color: #fff;
}

.chru-fp-recherche__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
	background: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 16px;
	width: fit-content;
}

.chru-fp-recherche__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chru-blue-light, #009FE3);
}

.chru-fp-recherche__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 24px;
	line-height: 1.2;
}

/* Bouton blanc pour section recherche — sur fond violet/dégradé.
   Au repos : fond blanc + bord blanc invisible + texte bleu foncé.
   Au hover : fond TRANSPARENT + bord blanc visible + texte blanc (inversion). */
.chru-fp-recherche__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 30px;
	background: #fff;
	color: var(--chru-blue-service, #14446B);
	border: 2px solid #fff;
	box-sizing: border-box;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chru-fp-recherche__btn:hover,
.chru-fp-recherche__btn:focus-visible {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.chru-fp-recherche__btn .chru-icon {
	width: 14px;
	height: 14px;
}

/* ============================================
   8. NOUVEL HÔPITAL
   ============================================ */
/* ── Vitrine « Nouvel hôpital » : contenu à gauche + mosaïque de plusieurs visuels ── */
.chru-fp-newhospital {
	position: relative;
	padding: 90px 0;
	background: var(--chru-gray, #F6F6F6);
	overflow: hidden;
}
/* Cercle bleu décoratif retiré (retour David 06/2026). */

.chru-fp-newhospital__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: 64px;
	align-items: center;
}

.chru-fp-newhospital__content {
	max-width: 520px;
}
.chru-fp-newhospital__title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	color: var(--chru-blue-service, #14446B);
	margin: 0 0 20px;
	line-height: 1.15;
}
.chru-fp-newhospital__desc {
	font-size: 17px;
	line-height: 1.65;
	color: var(--chru-blue-text, #2D4356);
	margin-bottom: 32px;
}

/* Mosaïque de visuels */
.chru-fp-newhospital__gallery {
	display: grid;
	gap: 16px;
}
.chru-fp-newhospital__tile {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px -22px rgba(20, 68, 107, 0.45);
}
.chru-fp-newhospital__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 3 visuels : un grand à gauche (pleine hauteur) + deux empilés à droite */
.chru-fp-newhospital__gallery--3 {
	grid-template-columns: 1.25fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 4 / 3.4;
}
.chru-fp-newhospital__gallery--3 .chru-fp-newhospital__tile--0 {
	grid-row: 1 / 3;
}

/* 2 visuels : un grand + un */
.chru-fp-newhospital__gallery--2 {
	grid-template-columns: 1.2fr 1fr;
	aspect-ratio: 4 / 2.7;
}

/* 1 visuel : image unique */
.chru-fp-newhospital__gallery--1 {
	aspect-ratio: 16 / 11;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.chru-fp-parcours__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.chru-fp-focus__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Mosaïque sous le texte */
	.chru-fp-newhospital__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.chru-fp-newhospital__content {
		max-width: 640px;
	}

	.chru-fp-hopitaux__header {
		flex-direction: column;
		gap: 16px;
	}

	.chru-fp-hopitaux__nav--prev {
		left: 8px;
	}

	.chru-fp-hopitaux__nav--next {
		right: 8px;
	}
}

@media (max-width: 768px) {
	/* Retour Marie 19/07 : la photo de fond rend mal en mobile →
	   aplat bleu marine (réf. CHU de Nantes), photo désactivée. */
	.chru-fp-hero {
		min-height: 450px;
		padding: 60px 0 40px;
		background-image: none !important;
		background-color: var(--chru-blue-service, #14446B);
	}

	/* Le hero mobile est un APLAT bleu marine, sans photo : le réglage de couleur
	   des textes n'y a pas de sens et un texte bleu y serait invisible. On force
	   donc le thème clair, quel que soit le choix fait en back-office. */
	.chru-fp-hero--text-dark,
	.chru-fp-hero--text-dark .chru-fp-hero__subtitle,
	.chru-fp-hero--text-dark .chru-fp-hero__title,
	.chru-fp-hero--text-dark .chru-fp-hero__desc,
	.chru-fp-hero--text-dark .chru-fp-hero__chips-label,
	.chru-fp-hero--text-dark .chru-fp-hero__switch-label {
		color: #fff;
	}
	.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__switch {
		background: rgba(8, 30, 52, 0.42);
	}
	.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__searchbox .chru-fp-hero__switch-btn {
		color: #fff;
	}
	.chru-front-page .chru-fp-hero--text-dark .chru-fp-hero__searchbox .chru-fp-hero__switch-btn.is-active {
		background: #fff;
		color: var(--chru-blue-service, #14446B);
	}
	/* Pas d'override des accès rapides en mobile : ils gardent leur bouton plein
	   #003761 à libellé blanc, qui se détache du panneau (aplat marine + voile
	   blanc 30 %). Voir l'avertissement en tête de fichier. */

	.chru-fp-newhospital {
		padding: 56px 0;
	}
	/* Mosaïque réorganisée : grand visuel en haut pleine largeur, deux dessous */
	.chru-fp-newhospital__gallery--3 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		aspect-ratio: auto;
	}
	.chru-fp-newhospital__gallery--3 .chru-fp-newhospital__tile--0 {
		grid-column: 1 / 3;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}
	.chru-fp-newhospital__gallery--3 .chru-fp-newhospital__tile--1,
	.chru-fp-newhospital__gallery--3 .chru-fp-newhospital__tile--2 {
		aspect-ratio: 4 / 3;
	}

	.chru-fp-hero__search {
		flex-direction: column;
		border-radius: 16px;
		padding: 8px;
		gap: 8px;
		background: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
		overflow: visible;
	}

	.chru-fp-hero__search-input {
		width: 100%;
		padding: 14px 18px !important;
		font-size: 16px; /* >=16px pour éviter le zoom iOS */
		border-radius: 10px !important;
		background: var(--chru-gray-light, #EFF2F5) !important;
		min-height: 48px;
	}

	.chru-fp-hero__search-btn {
		width: 100%;
		min-height: 48px;
		border-radius: 10px !important;
		justify-content: center;
		padding: 14px 20px !important;
		font-size: 16px;
	}

	/* Dropdown suggestions — pleine largeur écran, hauteur maîtrisée */
	.chru-fp-hero__suggestions {
		border-radius: 12px;
		max-height: 60vh;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	}
	.chru-fp-hero__sugg-item {
		padding: 14px 18px;
		min-height: 48px;
		font-size: 15px;
		display: flex;
		align-items: center;
	}
	.chru-fp-hero__sugg-label {
		padding: 10px 18px 4px;
		font-size: 10px;
	}
	.chru-fp-hero__sugg-more {
		padding: 16px 18px;
		min-height: 48px;
	}

	/* Parcours en slider horizontal sur mobile — bord à bord + flèches affichées */
	.chru-fp-parcours__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.chru-fp-parcours__badge,
	.chru-fp-parcours__title {
		padding-left: var(--container-padding, 20px);
		padding-right: var(--container-padding, 20px);
	}

	.chru-fp-parcours__grid {
		/* Largeur de carte, reprise par le padding de centrage ci-dessous.
		   Une seule valeur à changer si la carte doit grossir/rétrécir. */
		--chru-parcours-card: min(280px, 78vw);
		grid-template-columns: none;
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		/* Carte centrée dans le viewport : le padding vaut la moitié de
		   l'espace restant de chaque côté, on aperçoit les voisines. */
		padding-left: calc((100% - var(--chru-parcours-card)) / 2);
		padding-right: calc((100% - var(--chru-parcours-card)) / 2);
		scroll-padding-left: calc((100% - var(--chru-parcours-card)) / 2);
	}

	.chru-fp-parcours__grid::-webkit-scrollbar {
		display: none;
	}

	.chru-fp-parcours__card {
		flex: 0 0 var(--chru-parcours-card, min(280px, 78vw));
		scroll-snap-align: center;
	}

	.chru-fp-parcours__nav {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 20px;
	}

	/* Events : colonnes empilées + cards en carrousel bord à bord */
	.chru-fp-events__inner {
		flex-direction: column;
		gap: 24px;
		padding-left: 0;
		padding-right: 0;
	}

	.chru-fp-events__left {
		width: 100%;
		padding: 0 var(--container-padding, 20px);
	}

	.chru-fp-events__right {
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.chru-fp-events__track {
		gap: calc(var(--container-padding, 20px) * 2);
		padding-left: var(--container-padding, 20px);
		padding-right: 0;
		scroll-padding-left: var(--container-padding, 20px);
	}

	.chru-fp-events .chru-card-event {
		flex: 0 0 calc(100vw - (var(--container-padding, 20px) * 2));
		width: calc(100vw - (var(--container-padding, 20px) * 2));
	}

	/* Hôpitaux : flèches sous les cards + carrousel bord à bord */
	.chru-fp-hopitaux__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.chru-fp-hopitaux__header {
		padding: 0 var(--container-padding, 20px);
	}

	.chru-fp-hopitaux__carousel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		row-gap: 20px;
	}

	.chru-fp-hopitaux__track {
		grid-column: 1 / -1;
		padding-left: var(--container-padding, 20px);
		padding-right: var(--container-padding, 20px);
		scroll-padding-left: var(--container-padding, 20px);
		/* Fondu plus court : les cartes occupent presque tout l'écran. */
		--chru-fade-end: 40px;
	}

	.chru-fp-hopitaux__track.is-scrolled {
		--chru-fade-start: 40px;
	}

	.chru-fp-hopitaux__track.is-end {
		--chru-fade-end: 0px;
	}

	.chru-fp-hopitaux__nav {
		position: static;
		transform: none;
	}

	.chru-fp-hopitaux__nav--prev {
		left: auto;
		justify-self: end;
	}

	.chru-fp-hopitaux__nav--next {
		right: auto;
		justify-self: start;
	}

	/* Sections recrutement + recherche : padding horizontal + card empilée */
	.chru-fp-recrutement,
	.chru-fp-recherche {
		padding-left: var(--container-padding, 20px);
		padding-right: var(--container-padding, 20px);
	}

	/* La section « Formation + Recrutement » cumule SON padding et celui de
	   `.chru-fp-formrec__row` (2 x --container-padding). La carte Recherche,
	   elle, n'en avait qu'un : ses marges latérales étaient deux fois plus
	   fines que celles de la carte juste au-dessus. On l'aligne dessus. */
	.chru-fp-recherche {
		padding-left: calc(var(--container-padding, 20px) * 2);
		padding-right: calc(var(--container-padding, 20px) * 2);
	}

	/* `.chru-btn` est en `white-space: nowrap` et hauteur fixe (44px) : un
	   libellé long (« En savoir plus nos activités de recherche ») sortait de
	   la carte. Ici il passe sur plusieurs lignes et la hauteur suit. */
	.chru-btn.chru-fp-recherche__btn {
		white-space: normal;
		text-align: center;
		height: auto;
		min-height: 44px;
		max-width: 100%;
		padding: 12px 24px;
	}

	.chru-fp-recrutement__card {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.chru-fp-recrutement__image img {
		height: auto;
		object-fit: contain;
	}

	.chru-fp-recrutement__content {
		padding: 28px 24px;
	}

	.chru-fp-recherche__card {
		padding: 32px 24px;
		min-height: 320px;
	}

	.chru-fp-cta__inner--right {
		align-items: flex-start;
		text-align: left;
	}
}

/* Boutons "Tous nos événements" / "Tous nos articles" (accueil) */
.chru-fp-events__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	align-self: flex-start;
}
.chru-fp-focus__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	margin-top: 8px;
}

/* Le bouton « Tous nos articles » de cette section porte `.chru-btn--secondary`,
   désormais définie dans components.css (source unique) avec les deux autres
   boutons « Tous nos … » de l'accueil. Ne pas redéfinir la variante ici : c'est
   ce scope-là qui privait les deux autres boutons de tout style jusqu'au
   01/09/2026. */

/* =============================================================
 * Uniformisation des sur-titres d'accueil (retour client)
 * Calqué sur « Votre parcours de soins » : pastille bleu clair + texte
 * 14px/600 bleu-texte, sans capitales. (On garde la pastille seule plutôt
 * que le pill blanc, qui serait invisible sur les sections à fond blanc.)
 * ============================================================= */
.chru-fp-hopitaux__label,
.chru-fp-newhospital__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 12px;
}
.chru-fp-hopitaux__label::before,
.chru-fp-newhospital__label::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chru-blue-light, #009FE3);
	flex-shrink: 0;
}

/* =============================================================
 * Formation + Recrutement côte à côte (accueil)
 * Deux cartes verticales (image en haut, contenu en bas) sur une rangée 2 col.
 * ============================================================= */
.chru-fp-formrec__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--container-padding, 45px);
	box-sizing: border-box;
}
/* ── Image à gauche + panneau de couleur pleine à droite (style institutionnel) ── */
.chru-fp-formrec__card {
	display: grid;
	grid-template-columns: 230px 1fr;
	min-height: 320px;
	padding: 0;
	border-radius: 24px;
	overflow: hidden;
	/* Empêche le contenu (ex. bouton long « nowrap ») d'élargir la colonne 1fr :
	   garantit deux cartes de largeur strictement égale. */
	min-width: 0;
}
/* Photo : colonne de gauche, non teintée */
.chru-fp-formrec__card .chru-fp-recrutement__image {
	position: static;
	height: 100%;
}
.chru-fp-formrec__card .chru-fp-recrutement__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
/* Contenu : panneau de couleur, badges/titres alignés en haut, bouton calé en bas */
.chru-fp-formrec__card .chru-fp-recrutement__content {
	padding: 40px 44px;
	justify-content: flex-start;
	color: #fff;
	min-width: 0;
}
/* Bouton autorisé à passer sur 2 lignes (sinon son texte « nowrap » déborde le panneau) */
.chru-fp-formrec__card .chru-btn {
	white-space: normal;
	text-align: center;
}
.chru-fp-formrec__card .chru-fp-recrutement__title {
	font-size: clamp(24px, 2.2vw, 32px);
}
.chru-fp-formrec__card .chru-fp-recrutement__desc {
	opacity: 0.9;
	margin-bottom: 28px;
}
/* Le bouton se cale en bas → alignement garanti entre les 2 cartes */
.chru-fp-formrec__card .chru-fp-recrutement__content .chru-btn {
	margin-top: auto;
}

/* Panneaux de couleur distincts par destination (formation ≠ recrutement) */
.chru-fp-formrec__card--formation {
	background: var(--chru-blue-canard, #0096D6);
}
.chru-fp-formrec__card--recrutement {
	background: var(--chru-blue-service, #14446B);
}

@media (max-width: 900px) {
	.chru-fp-formrec__row {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.chru-fp-formrec__card {
		grid-template-columns: 1fr;
	}
	.chru-fp-formrec__card .chru-fp-recrutement__image {
		height: 220px;
	}
	/* Le bloc 768px passe les photos en `contain` + `height:auto` (utile pour
	   la grande carte Recrutement pleine largeur), ce qui laissait ici des
	   bandes de couleur autour du portrait et un cadrage flottant.
	   Les cartes formrec reprennent un cadrage plein, visage dans le tiers haut. */
	.chru-fp-formrec__card .chru-fp-recrutement__image img {
		height: 100%;
		object-fit: cover;
		object-position: center 25%;
	}
	.chru-fp-formrec__card .chru-fp-recrutement__content .chru-btn {
		margin-top: 8px;
	}
}