/* ============================================
   CHRU Nancy — Single Événement
   Figma: 162:1734
   ============================================ */

/* ── Wrapper ── */

.chru-evt {
	color: var(--color-text);
}

/* ── Hero ── */

/* Fond bleu très clair sur toute la zone d'en-tête (maquette Marie KUSY du
   14/08/2026, « maquette_evement_chru.jpg ») : la bande couvre le fil d'Ariane,
   le titre, la carte de date, les mentions et le bouton d'inscription, puis
   s'arrête net au début du contenu, qui reste blanc.
   Le ton est celui que le site emploie déjà pour ses aplats bleu très clair
   (bloc « Mise en avant », chapô des structures) ; sa maquette mesure très
   exactement #F2FAFD. Texte marine dessus : 9,66:1. */
.chru-evt__hero {
	background-color: #F2FAFD;
	color: var(--chru-secondary);
	padding: var(--space-xl) 0 var(--space-2xl);
}

.chru-evt__hero-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* Le fil d'Ariane occupe sa propre ligne, en pleine largeur : la rangée
   titre + image démarre donc SOUS lui, ce qui aligne le haut de l'image sur le
   haut du titre (A10/A11, retours Marie KUSY du 31/08/2026). */
.chru-evt__hero-top {
	margin-bottom: var(--space-sm);
}

.chru-evt__hero-row {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
}

.chru-evt__hero-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Hero image (right side)
   Largeur portée de 420px à ~la moitié du conteneur (A10 : « l'image doit
   prendre la moitié de la largeur et pas qu'un tiers »). Mesure sur la maquette
   de Marie : image 607px pour un contenu de 1400px, soit 43 %. */
.chru-evt__hero-image {
	flex: 0 0 44%;
	max-width: 600px;
	border-radius: 20px;
	overflow: hidden;
}

/* Hauteur calée sur la maquette : image 607 × 528 px, soit un ratio ~0,87.
   À 594 px de large, la hauteur devient ~440 px (elle était de 300 px). */
.chru-evt__hero-image img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	display: block;
}

.chru-evt__hero-image-placeholder {
	width: 100%;
	height: 440px;
	background: var(--chru-grey);
	border-radius: 20px;
}


/* ── Breadcrumb (inside hero) ── */

.chru-evt__breadcrumb {
	margin-bottom: var(--space-xs);
}

.chru-evt__breadcrumb p {
	font-size: var(--body-size);
	color: var(--chru-gray-text);
	margin: 0;
}

/* Breadcrumb événement : style de base dans components.css. Ici : couleurs propres au contexte. */
.chru-evt__breadcrumb .chru-breadcrumb__link {
	color: var(--chru-gray-text);
}

.chru-evt__breadcrumb .chru-breadcrumb__link:hover,
.chru-evt__breadcrumb .chru-breadcrumb__link:focus {
	color: var(--chru-secondary);
}

.chru-evt__breadcrumb span[aria-current="page"] {
	color: var(--chru-secondary);
}


/* ── Campaign Tag ── */

.chru-evt__campaign-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tag-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
}


/* ── Decorative Dots ── */

.chru-evt__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--chru-etp);
	flex-shrink: 0;
}

.chru-evt__dot--accent {
	background-color: var(--chru-etp);
}


/* ── Title ── */

.chru-evt__title {
	font-size: var(--h1-size);
	font-weight: var(--weight-bold);
	line-height: 1.15;
	color: var(--chru-secondary);
	margin: 0;
}


/* ── Meta badges ── */

.chru-evt__meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

/* Bordure bleu foncé et non plus grise (A17, retour Marie KUSY du 31/08/2026 :
   « passer les bordures des catégories en bleu foncé (au lieu du gris) »). */
.chru-evt__meta-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	background-color: transparent;
	border: 1px solid var(--chru-secondary);
	border-radius: 30px;
	font-size: var(--tag-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
}

.chru-evt__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

.chru-evt__meta-item svg {
	flex-shrink: 0;
	stroke: var(--color-text);
}

.chru-evt__meta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Survol : on RESTE en bleu marine (le trait s'épaissit pour signaler l'état).
 * L'ancien `--chru-etp` (#0096D6) ne donne que 3,3:1 sur blanc, sous le seuil
 * AA de 4,5:1 — et de toute façon la règle globale `a:hover` reprenait la main
 * (cf. liste d'exclusion de style.css). */
.chru-evt__meta-link:hover,
.chru-evt__meta-link:focus {
	color: var(--chru-secondary);
	text-decoration-thickness: 2px;
}

.chru-evt__meta-link svg {
	flex-shrink: 0;
	stroke: currentColor;
}

/* Organisateur cliquable (meta `organisateur_url`) : le picto « user » est un
 * tracé stroke, pas un aplat — il doit suivre la couleur du libellé. */
.chru-evt__meta-link--organisateur svg {
	stroke: currentColor;
	fill: none;
}


/* ── Price ── */

.chru-evt__price {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
}

.chru-evt__price-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	/* Le tarif peut tenir sur plusieurs lignes (A1) : la pastille reste alignée
	   sur la PREMIÈRE ligne, d'où le calage vertical explicite. */
	margin-top: 0.45em;
}

.chru-evt__price-dot--free {
	background-color: #3FA535;
}

/* Tarif renseigné et non gratuit (meta `tarif`) : pastille ROUGE #b01f1f, la
 * valeur donnée par Marie KUSY le 31/08/2026 (A12). Elle était marine depuis le
 * 28/07 — le vert « feu vert » induirait en erreur sur un événement payant, et
 * le marine ne se distinguait pas assez du texte. */
.chru-evt__price-dot--paid {
	background-color: #b01f1f;
}

.chru-evt__price-label {
	color: var(--chru-secondary);
}


/* ── Mentions du hero (public, tarif, organisateurs) ──
   Bloc introduit le 31/08/2026 : les mentions passent SOUS la carte de date,
   conformément à la maquette de Marie KUSY, et chacune occupe sa ligne. */

.chru-evt__mentions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: var(--space-sm);
}

.chru-evt__mention {
	margin: 0;
	align-items: flex-start;
}

/* Pictos des mentions : bleu clair et trait fin (A6, « picto public et
   organisateur : les passer en bleu clair » / « les pictos sont trop gras »). */
/* ⚠️ Deux classes : `.chru-evt__meta-item svg` (0,1,1) force `stroke:
   var(--color-text)` et battrait un sélecteur à une seule classe. */
.chru-evt__mentions .chru-evt__mention-icon,
.chru-evt__orgas-label .chru-evt__mention-icon {
	flex-shrink: 0;
	color: var(--chru-etp);
	stroke: var(--chru-etp);
	margin-top: 1px;
}

.chru-evt__orgas {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chru-evt__orgas-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

.chru-evt__orgas-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.chru-evt__orgas-item {
	font-size: var(--body-size);
	line-height: 1.5;
	color: var(--color-text);
}

/* Organisateur cliquable : PAS de soulignement, une flèche au bout (A8, retour
   Marie KUSY du 31/08/2026). RGAA 10.6 reste satisfait : ces liens ne sont pas
   « au fil du texte » — ils forment une liste dédiée, chaque item porte sa
   flèche, et le survol/focus les distingue par la couleur ET le mouvement de la
   flèche (`.chru-arrow-icon`, rgaa.css). */
.chru-evt__orgas-item .chru-evt__meta-link,
.chru-evt__orgas-item .chru-evt__meta-link:hover,
.chru-evt__orgas-item .chru-evt__meta-link:focus {
	text-decoration: none;
}

.chru-evt__orgas-item .chru-evt__meta-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La flèche suit le DERNIER MOT, elle ne se cale pas à droite du bloc.
   En `inline-flex`, un libellé qui passe sur deux lignes pousse la flèche
   contre le bord droit, à distance du texte — très visible en mobile
   (relevé par l'évaluateur QA le 01/09/2026). En `inline`, elle reste
   accrochée au texte quelle que soit la longueur du nom. */
.chru-evt__orgas-item .chru-evt__meta-link {
	display: inline;
}

.chru-evt__orgas-item .chru-evt__meta-link .chru-arrow-icon {
	display: inline-block;
	vertical-align: -1px;
	margin-left: 6px;
}

/* Bouton « S'y rendre » dans la carte de date (A3). Le style vient du design
   system (`.chru-btn--outline-white`), jamais redéfini ici — cf. la règle des
   boutons à source unique (components.css). */
.chru-evt__datecard-cta {
	flex-shrink: 0;
	margin-left: auto;
}


/* ── Date Card ── */

.chru-evt__datecard {
	background-color: var(--chru-secondary);
	border: none;
	border-radius: 14px;
	padding: 16px 20px;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 480px;
}

.chru-evt__datecard-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
}

.chru-evt__datecard-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
}

.chru-evt__datecard-svg {
	stroke: white;
	color: white;
}

.chru-evt__datecard-sep-v {
	display: block;
	width: 1px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

.chru-evt__datecard-sep-v--light {
	background-color: rgba(255, 255, 255, 0.2);
}

.chru-evt__datecard-info {
	display: flex;
	flex-direction: column;
}

.chru-evt__datecard-date {
	font-size: 18px;
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.chru-evt__datecard-year {
	font-size: var(--body-size);
	font-weight: var(--weight-regular);
	opacity: 0.8;
}

.chru-evt__datecard-times {
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	line-height: 1.5;
}

.chru-evt__datecard-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.15);
}

.chru-evt__datecard-location {
	display: flex;
	flex-direction: column;
}

.chru-evt__datecard-city {
	font-size: var(--body-size);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.chru-evt__datecard-details {
	font-size: var(--tag-size);
	font-weight: var(--weight-regular);
	opacity: 0.8;
	line-height: 1.4;
}


/* ── Hero Actions Row ── */

.chru-evt__hero-actions-row {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin-top: var(--space-sm);
}


/* ── Back Link ── */

.chru-evt__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.chru-evt__back-link svg {
	flex-shrink: 0;
	stroke: currentColor;
}

.chru-evt__hero .chru-evt__back-link {
	color: var(--chru-secondary);
}

.chru-evt__hero .chru-evt__back-link:hover,
.chru-evt__hero .chru-evt__back-link:focus {
	color: var(--chru-etp);
}

/* S'inscrire button in hero */
.chru-evt__hero .chru-btn--primary {
	background-color: var(--chru-secondary);
	color: white;
	border-color: var(--chru-secondary);
}

.chru-evt__hero .chru-btn--primary:hover,
.chru-evt__hero .chru-btn--primary:focus {
	background-color: transparent;
	color: var(--chru-secondary);
	border-color: var(--chru-secondary);
}

.chru-evt__hero .chru-btn--primary .chru-btn__icon {
	stroke: currentColor;
}


/* ── Body (2 columns) ── */

.chru-evt__body {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.chru-evt__body-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
}

.chru-evt__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.chru-evt__separator {
	display: block;
	width: 1px;
	background-color: #e1e1e1;
	flex-shrink: 0;
	align-self: stretch;
}

.chru-evt__sidebar {
	flex-shrink: 0;
	width: 360px;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.chru-evt__sidebar-title {
	font-size: 20px;
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	margin: 0 0 var(--space-sm);
	line-height: 1.4;
}


/* ── Content area ── */

.chru-evt__content {
	color: var(--color-text);
	line-height: 1.6;
}

/* Retour Marie (13/08/2026) : « les H2 ne sont pas assez gros et ne sont pas à
 * la même taille que les autres modèles de page ». Ce gabarit était le seul,
 * avec la campagne, à rendre ses H2 éditoriaux en `--h3-size` (20px) : H2 et H3
 * sortaient donc à la MÊME taille, la hiérarchie de titres était invisible.
 * Valeur canonique du site = `--h2-size` (24px desktop / 20px mobile) +
 * interligne 1.2 — cf. le bloc « H2 éditoriaux » de components.css.
 * Cette règle est à spécificité égale (0,2,1) avec la règle canonique et est
 * chargée APRÈS elle : elle doit donc porter les mêmes valeurs, pas les subir.
 *
 * ⚠️ `:not([class*="__"])` — retour Marie du même jour, 10:06 : « on peut aussi
 * baisser la taille du titre du bloc Fichiers et documents ». Cause : cette
 * règle visait TOUS les `h2` du contenu, donc aussi les titres INTERNES des
 * blocs maison. `chru-documents-list__title` se dessine à 18px chez lui ; le
 * gabarit le repoussait à 20px avant ce matin, et à 24px après. Mesuré : 18px
 * sur les pages service / examen (aucune règle de gabarit ne fuit), 24px sur
 * événement et formation. Chaque bloc gère sa propre typo — même parade que
 * `p:not([class*="__"])` sur les structures et `h3:not([class*="__"])` sur les
 * formations. */
.chru-evt__content h2:not([class*="__"]) {
	font-size: var(--h2-size);
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	line-height: 1.2;
	margin-top: 0;
}

.chru-evt__content p {
	margin-bottom: var(--space-sm);
}

.chru-evt__content a {
	color: var(--chru-secondary);
	text-decoration: underline;
}


/* ── Accent spans ── */

.chru-evt__accent {
	color: var(--chru-etp);
}


/* ── Campaign CTA ── */

.chru-evt__campaign-cta {
	display: flex;
	gap: var(--space-lg);
	background-color: var(--chru-grey);
	border-radius: 20px;
	padding: var(--space-lg);
	align-items: center;
}

.chru-evt__campaign-cta-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.chru-evt__campaign-cta-title {
	font-size: 20px;
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	margin: 0;
	line-height: 1.4;
}

.chru-evt__campaign-cta-text {
	font-size: var(--body-size);
	color: var(--color-text);
	margin: 0;
	line-height: 1.5;
}

.chru-evt__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.chru-evt__link:hover,
.chru-evt__link:focus {
	color: var(--chru-etp);
}

.chru-evt__link svg {
	flex-shrink: 0;
	stroke: currentColor;
}

.chru-evt__campaign-cta-image {
	flex-shrink: 0;
	width: 200px;
	border-radius: 14px;
	overflow: hidden;
}

.chru-evt__campaign-cta-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ── Pour aller plus loin ── */

.chru-evt__further {
	border: 1px solid #e1e1e1;
	border-radius: 20px;
	padding: var(--space-lg);
}

.chru-evt__further-title {
	font-size: 20px;
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	margin: 0 0 var(--space-md);
	line-height: 1.4;
}

.chru-evt__further-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.chru-evt__further-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	background-color: var(--chru-grey);
	border-radius: 14px;
	padding: 13px 24px 13px 20px;
	text-decoration: none;
	transition: background-color var(--transition-fast);
}

.chru-evt__further-item:hover,
.chru-evt__further-item:focus {
	background-color: #eef1f4;
}

.chru-evt__further-item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chru-evt__further-item-title {
	font-size: var(--body-size);
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	line-height: 1.4;
}

.chru-evt__further-item-domain {
	font-size: var(--tag-size);
	font-weight: var(--weight-bold);
	color: #6c6c6c;
}

.chru-evt__further-item svg {
	flex-shrink: 0;
	stroke: var(--chru-secondary);
}


/* Back link in body */
.chru-evt__body .chru-evt__back-link {
	color: var(--chru-secondary);
}

.chru-evt__body .chru-evt__back-link:hover,
.chru-evt__body .chru-evt__back-link:focus {
	color: var(--chru-etp);
}


/* ── Next Events Section ── */

.chru-evt__next-events {
	background-color: var(--chru-grey);
	padding: var(--space-3xl) 0;
}

.chru-evt__next-events-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.chru-evt__next-events-grid {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
}

.chru-evt__next-events-header {
	flex-shrink: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.chru-evt__next-events-subtitle {
	font-size: var(--body-size);
	font-weight: var(--weight-semibold);
	color: var(--chru-secondary);
}

.chru-evt__next-events-title {
	font-size: var(--h2-size);
	font-weight: var(--weight-bold);
	color: var(--chru-secondary);
	line-height: 1.25;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.chru-evt__next-events-carousel {
	flex: 1;
	min-width: 0;
	position: relative;
}

.chru-evt__next-events-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-sm);
	scrollbar-width: none;
}

.chru-evt__next-events-track::-webkit-scrollbar {
	display: none;
}

.chru-evt__next-events-track .chru-card-event {
	flex-shrink: 0;
	width: 320px;
	scroll-snap-align: start;
}


/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
	/* 🔴 Régression corrigée le 01/09/2026, trouvée par l'évaluateur QA.
	   Le 31/08, le flex du héros a été déplacé de `__hero-inner` vers
	   `__hero-row` (pour sortir le fil d'Ariane de la colonne de texte), mais
	   CETTE règle est restée sur `__hero-inner`, qui n'est plus un conteneur
	   flex : elle était donc INERTE, et le héros ne s'empilait plus à aucune
	   largeur, jusqu'à 320px. Résultat mesuré à 390px : colonne de texte de
	   148px à côté d'une vignette, titre sur six lignes, gélules de catégorie
	   coupées en deux. C'est le piège « modifier le DOM sans reporter les
	   sélecteurs qui en dépendent ».
	   ⚠️ `flex-basis` doit être neutralisé explicitement : `width: 100%` ne
	   suffit pas contre le `flex: 0 0 44%` posé en desktop. */
	.chru-evt__hero-row {
		flex-direction: column;
	}

	.chru-evt__hero-image {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.chru-evt__hero-image img {
		height: 240px;
	}

	.chru-evt__body-inner {
		flex-direction: column;
	}

	.chru-evt__separator {
		display: none;
	}

	.chru-evt__sidebar {
		width: 100%;
	}

	.chru-evt__next-events-grid {
		flex-direction: column;
	}

	.chru-evt__next-events-header {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.chru-evt__campaign-cta {
		flex-direction: column;
	}

	.chru-evt__campaign-cta-image {
		width: 100%;
		max-height: 200px;
	}
}

@media (max-width: 768px) {
	.chru-evt__hero {
		padding: var(--space-lg) 0 var(--space-xl);
	}

	.chru-evt__datecard {
		max-width: 100%;
	}

	.chru-evt__datecard-row {
		gap: 10px;
		flex-wrap: wrap;
	}

	/* Le bouton « S'y rendre » repasse sous l'adresse plutôt que de la comprimer. */
	.chru-evt__datecard-cta {
		margin-left: 46px;
	}

	.chru-evt__hero-image img {
		height: 200px;
	}

	.chru-evt__hero-actions-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.chru-evt__body {
		padding: var(--space-xl) 0 var(--space-2xl);
	}

	.chru-evt__further {
		padding: var(--space-md);
		border-radius: 14px;
	}

	.chru-evt__next-events {
		padding: var(--space-2xl) 0;
	}

	.chru-evt__next-events-track .chru-card-event {
		width: 280px;
	}

	/* Retour Marie 19/07 : en mobile, pas de cartes « autres événements » —
	   on garde uniquement le bouton « Voir l'agenda » du bloc Prochains événements. */
	.chru-evt__sidebar {
		display: none;
	}

	.chru-evt__next-events-carousel {
		display: none;
	}
}