/* modeles.css : retours Marie du 31/08 (05/10/2026). */

/* =========================================================================
   PAGE TAMPON : zone de contenu libre entre le héros et les tuiles
   -------------------------------------------------------------------------
   Fond blanc pleine largeur (les couleurs des blocs y sont pensées), décors
   floraux de la charte dans les marges, contenu centré à 900px.
   La typographie vient de `.mat-page-std__content` (règles scopées en enfant
   direct dans maternite.css) : AUCUNE règle de typo descendante ici, pour ne
   jamais repeindre l'intérieur des blocs.
   ========================================================================= */
.mat-arch--libre .mat-arch__hero { margin-bottom: 0; }

.mat-tampon-libre {
	position: relative;
	z-index: 1;
	background: #fff;
	padding: 72px var(--mat-container-pad, 24px) 80px;
	margin: 0 0 64px;
	overflow-x: clip;
}
.mat-tampon-libre__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}
.mat-tampon-libre__deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	display: block;
}
.mat-tampon-libre__deco img { display: block; width: 100%; height: auto; }
.mat-tampon-libre__deco--tl { top: 40px; left: calc(50% - 450px - 190px); width: 120px; }
.mat-tampon-libre__deco--mr { top: 45%; right: calc(50% - 450px - 170px); width: 84px; }
.mat-tampon-libre__deco--br { bottom: 32px; left: calc(50% - 450px - 180px); width: 110px; }

@media (max-width: 1260px) {
	.mat-tampon-libre__deco { display: none; }
}
@media (max-width: 700px) {
	/* .mat-arch a 16px de gouttière en mobile : la bande reste pleine largeur. */
	.mat-tampon-libre { margin: 0 -16px 48px; padding: 40px 16px 48px; }
}

/* =========================================================================
   PAGE PARENTE (templates/page-parent.php)
   ========================================================================= */
.mat-parent {
	color: var(--mat-bleu-fonce);
	overflow-x: clip;
}

/* ---- Héros ---- */
.mat-parent__hero {
	position: relative;
	background: var(--mat-rose-clair);
	padding: 40px var(--mat-container-pad, 24px) 110px;
}
.mat-parent__hero-inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.mat-parent:not(.mat-parent--image) .mat-parent__hero-inner { grid-template-columns: minmax(0, 1fr) 300px; }
.mat-parent__hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	min-width: 0;
}
.mat-parent__hero-text .mat-breadcrumb { margin: 0; }
.mat-parent__title {
	margin: 0;
	font-family: "Coniferous", var(--mat-font-script);
	font-weight: 600;
	font-size: 52px;
	line-height: 1.05;
	color: var(--mat-bleu-fonce);
}
.mat-parent__title-line {
	display: block;
	width: 139px;
	height: 2px;
	background: var(--mat-rose-blush);
}
.mat-parent__hero-media {
	position: relative;
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mat-parent__tache {
	position: absolute;
	z-index: 0;
	width: 92%;
	max-width: 520px;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -54%) rotate(-6deg);
	pointer-events: none;
}
.mat-parent__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Forme organique (galet) plutôt qu'un rectangle : reprend la courbure
	   des taches et des vagues de la charte. */
	border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
	box-shadow: 0 18px 50px rgba(158, 91, 92, .18);
	border: 6px solid #fff;
}
.mat-parent__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mat-parent__hero-media .mat-photo-credit--hero { z-index: 2; }
.mat-parent__fleur {
	position: absolute;
	z-index: 2;
	height: auto;
	pointer-events: none;
}
.mat-parent__fleur--a { width: 96px; right: -6px; bottom: -36px; }
.mat-parent__fleur--b { width: 82px; left: -10px; top: -26px; }
.mat-parent:not(.mat-parent--image) .mat-parent__fleur--a { right: 40px; bottom: 0; width: 120px; }
.mat-parent:not(.mat-parent--image) .mat-parent__fleur--b { left: 10px; top: 10px; width: 100px; }
.mat-parent__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 80px;
	display: block;
	pointer-events: none;
}

/* ---- Bandes de contenu à fond alterné ---- */
.mat-parent__band {
	position: relative;
	padding: 64px var(--mat-container-pad, 24px);
}
.mat-parent__band--blanc { background: #fff; }
.mat-parent__band--rose { background: var(--mat-rose-clair); }
.mat-parent__band--bleu { background: var(--mat-aplat-bleu-vert); }
.mat-parent__band + .mat-parent__band--blanc { padding-top: 64px; }
.mat-parent__band-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}
/* Le H2 qui ouvre une bande : filet rose au-dessus, comme le titre de page.
   Visé en enfant direct ET premier enfant seulement (titre éditorial). */
.mat-parent__band-inner > h2.wp-block-heading:first-child::before {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 0 0 14px;
	border-radius: 2px;
	background: var(--mat-rose-blush);
}
.mat-parent__band-deco {
	position: absolute;
	z-index: 0;
	top: 32px;
	width: 96px;
	height: auto;
	pointer-events: none;
}
.mat-parent__band-deco--l { left: calc(50% - 450px - 170px); }
.mat-parent__band-deco--r { right: calc(50% - 450px - 170px); }

/* ---- Cartes des sous-pages ---- */
.mat-parent__cartes {
	padding: 72px 0 80px;
}
.mat-parent__cartes-title {
	margin: 0 auto 40px;
	padding: 0 var(--mat-container-pad, 24px);
	max-width: 900px;
	text-align: center;
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 26px;
	color: var(--mat-bleu-fonce);
}

@media (max-width: 1260px) {
	.mat-parent__band-deco { display: none; }
}
@media (max-width: 900px) {
	.mat-parent__hero { padding-bottom: 80px; }
	.mat-parent__hero-inner,
	.mat-parent:not(.mat-parent--image) .mat-parent__hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mat-parent__hero-text { align-items: center; text-align: center; }
	.mat-parent__title { font-size: 38px; }
	.mat-parent:not(.mat-parent--image) .mat-parent__hero-media { display: none; }
	.mat-parent__photo { max-width: 420px; }
	.mat-parent__fleur--a { width: 70px; right: 4px; bottom: -24px; }
	.mat-parent__fleur--b { width: 60px; left: 4px; top: -18px; }
	.mat-parent__wave { height: 44px; }
	.mat-parent__band { padding: 44px 16px; }
	.mat-parent__cartes { padding: 48px 16px 56px; }
}

/* =========================================================================
   URGENCES (templates/page-urgences.php)
   ========================================================================= */
.mat-urg-alerte {
	max-width: 1100px;
	margin: 36px auto 0;
}
.mat-urg-alerte__card {
	display: flex;
	background: #fff;
	border: 2px solid var(--mat-urgences, #DA1500);
	border-radius: var(--mat-card-radius, 20px);
	overflow: hidden;
	box-shadow: 0 12px 36px rgba(218, 21, 0, .10);
}
.mat-urg-alerte__card > * { flex: 1 1 0; padding: 24px 28px; min-width: 0; }
.mat-urg-alerte__card > :first-child { border-left: 0 !important; }
.mat-urg-alerte__main {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #FDECEA;
}
.mat-urg-alerte__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mat-urgences, #DA1500);
	color: #fff;
}
.mat-urg-alerte__title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: #A31000;
}
.mat-urg-alerte__text { font-size: 16px; line-height: 1.5; color: var(--mat-bleu-fonce); }
.mat-urg-alerte__text p { margin: 0 0 8px; }
.mat-urg-alerte__text p:last-child { margin-bottom: 0; }
.mat-urg-alerte__tel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	background: #FDECEA;
	border-left: 1px solid var(--mat-rose-outline, #FFD6CF);
}
.mat-urg-alerte__label { font-size: 14px; font-weight: 700; color: var(--mat-bleu-fonce); }
.mat-urg-alerte__tel-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: var(--mat-radius-pill, 30px);
	background: var(--mat-urgences, #DA1500);
	color: #fff !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.mat-urg-alerte__tel-link:hover,
.mat-urg-alerte__tel-link:focus-visible { background: #A31000; }
.mat-urg-alerte__lieu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	border-left: 1px solid var(--mat-rose-outline, #FFD6CF);
	font-size: 15px;
	line-height: 1.5;
}
.mat-urg-alerte__lieu p { margin: 0; }
.mat-urg-alerte__horaires { font-weight: 700; color: var(--mat-rose-blush); }
.mat-urg-alerte__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 9px 22px;
	border-radius: var(--mat-radius-pill, 30px);
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce) !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
}
.mat-urg-alerte__btn:hover,
.mat-urg-alerte__btn:focus-visible { background: var(--mat-vert-bleu-hover, #86BCC4); }

/* Contenu : même colonne centrée que la page standard sans sommaire, avec
   des titres H2 plus espacés et soulignés d'un filet (titres éditoriaux en
   enfant direct uniquement). */
.mat-urg .mat-page-std__hero { margin-top: 40px; }
.mat-urg__body { margin-top: 48px; }
.mat-urg .mat-page-std__content > h2.wp-block-heading {
	margin-top: 56px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mat-rose-outline, #FFD6CF);
}
.mat-urg .mat-page-std__content > h2.wp-block-heading:first-child { margin-top: 0; }

@media (max-width: 900px) {
	.mat-urg-alerte__card { flex-direction: column; }
	.mat-urg-alerte__tel,
	.mat-urg-alerte__lieu { border-left: 0; border-top: 1px solid var(--mat-rose-outline, #FFD6CF); }
	.mat-urg-alerte__card > :first-child { border-top: 0; }
	.mat-urg-alerte__card > * { padding: 20px; }
}
@media (max-width: 420px) {
	.mat-urg-alerte__tel-link { font-size: 19px; padding: 11px 18px; }
}

/* ==========================================================================
   Carrousel d'événements (05/10/2026, demande de Thomas : « les événements
   sont toujours au nombre de 6 sur 2 lignes partout, faire un carrousel comme
   sur le CHRU »). Bande horizontale aimantée sur les cartes, boutons de
   l'agenda de l'accueil (template-parts/slider-nav.php), slider générique
   [data-mat-slider] de maternite.js. Sert en bas des pages standard
   (inc/events-feed.php) et sur la fiche événement (« Prochains événements »).
   ========================================================================== */
.mat-evslider { position: relative; min-width: 0; }
.mat-evslider__viewport {
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* l'ombre des cartes déborde : on lui laisse de la place sans rogner */
	padding: 8px 4px 20px;
	margin: -8px -4px 0;
}
.mat-evslider__viewport::-webkit-scrollbar { display: none; }
.mat-evslider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
.mat-evslider__track > .mat-event-card {
	flex: 0 0 calc((100% - 48px) / 3);
	max-width: none;
	scroll-snap-align: start;
}
.mat-evslider__nav { margin-top: 8px; }
/* Tout tient à l'écran : les deux flèches sont désactivées, on les masque. */
.mat-evslider__nav:has(.mat-agenda__btn--prev:disabled):has(.mat-agenda__btn--next:disabled) { display: none; }
@media (prefers-reduced-motion: reduce) {
	.mat-evslider__viewport { scroll-behavior: auto; }
}
@media (max-width: 1000px) {
	.mat-evslider__track > .mat-event-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 680px) {
	.mat-evslider__track { gap: 16px; }
	.mat-evslider__track > .mat-event-card { flex-basis: 86%; }
}
/* La bande qui défile rogne l'ombre large des cartes (42px de flou) et
   dessine un halo rectangulaire : ombre resserrée dans le carrousel. */
.mat-evslider .mat-event-card { box-shadow: 0 4px 14px rgba(198, 129, 122, 0.12); }
/* Mobile : la bande file jusqu'au bord de l'écran, comme l'agenda de l'accueil. */
@media (max-width: 680px) {
	.mat-evslider__viewport {
		margin-left: calc(-1 * var(--mat-container-pad, 24px));
		margin-right: calc(-1 * var(--mat-container-pad, 24px));
		padding-left: var(--mat-container-pad, 24px);
		padding-right: var(--mat-container-pad, 24px);
		scroll-padding-inline: var(--mat-container-pad, 24px);
	}
}