/**
 * Maternité — Archives (événements + articles)
 *
 * Reprend pixel-for-pixel le système CHRU (hero plein, filtres ligne,
 * grille 2/3 cols, cards article/event, pagination cercles) en remplaçant
 * uniquement les tokens couleurs par la palette Maternité.
 */

/* ========== CONTAINER UTILITY ========== */
.mat-container {
	max-width: var(--mat-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad, 24px);
}

/* ========== GRID ========== */
.mat-grid { display: grid; gap: 24px; }
.mat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .mat-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .mat-grid--2, .mat-grid--3 { grid-template-columns: 1fr; } }

/* =====================================================
   HERO ARCHIVE — bandeau rose-clair (spec Figma Maternité)
   ===================================================== */
.mat-hero-archive {
	background: var(--mat-rose-clair, #FFF5F3);
	color: #2D4356;
	text-align: center;
	padding: 56px 0 48px;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}
.mat-hero-archive .mat-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 2;
}
.mat-hero-archive__breadcrumb {
	font-size: 16px;
	font-weight: 600;
	color: #2D4356;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.mat-hero-archive__breadcrumb a {
	color: #2D4356;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-hero-archive__breadcrumb a:hover { text-decoration: none; }
.mat-hero-archive__breadcrumb strong { font-weight: 700; }

.mat-hero-archive__title {
	font-family: var(--mat-font-sans, "Open Sans", system-ui, sans-serif);
	font-size: 45px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
	line-height: 1.1;
	position: relative;
}
.mat-hero-archive__title::after {
	content: '';
	display: block;
	width: 120px;
	height: 3px;
	background: var(--mat-vert-bleu, #99C8CF);
	margin: 14px auto 0;
	border-radius: 2px;
}

/* Décors floraux gauche/droite (positionnés en absolu) */
.mat-hero-archive__decor {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 140px;
	height: 140px;
	pointer-events: none;
	z-index: 1;
	opacity: 0.85;
}
.mat-hero-archive__decor--left  { left: 6%; }
.mat-hero-archive__decor--right { right: 6%; }
.mat-hero-archive__decor svg { width: 100%; height: 100%; }

@media (max-width: 1024px) {
	.mat-hero-archive__decor { width: 100px; height: 100px; opacity: 0.45; }
}
@media (max-width: 720px) {
	.mat-hero-archive { padding: 36px 0 32px; }
	.mat-hero-archive__title { font-size: 32px; }
	.mat-hero-archive__decor { display: none; }
}

/* =====================================================
   FILTRES (spec Figma : centré, divider, carrés)
   ===================================================== */
.mat-filters {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 32px 0;
	margin: 0 0 16px;
}
.mat-filters__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #2D4356;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
}
.mat-filters__label svg {
	color: #2D4356;
	flex-shrink: 0;
}
.mat-filters__divider {
	width: 100%;
	max-width: 1182px;
	height: 1px;
	background: var(--mat-bleu-fonce, #14446B);
	opacity: 0.20;
}
.mat-filters__group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 64px;
	max-width: 1156px;
}
.mat-filters__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 23.36px;
	color: #2D4356;
}
.mat-filters__checkbox input {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #2D4356;
	border-radius: 2px;
	background: #fff;
	position: relative;
	flex-shrink: 0;
}
.mat-filters__checkbox input:checked {
	background: #2D4356;
}
.mat-filters__checkbox input:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.mat-filters__checkbox:hover input { border-color: var(--mat-rose-blush, #9E5B5C); }

/* =====================================================
   CARD ARTICLE (style CHRU pixel-for-pixel)
   image gauche ~34% + content droite ~66%, bordure pill 30px
   ===================================================== */
.mat-card-article {
	display: flex;
	border-radius: var(--mat-radius-pill, 30px);
	overflow: hidden;
	background: #fff;
	min-height: 220px;
}
.mat-card-article__link {
	display: flex;
	width: 100%;
	text-decoration: none;
	color: inherit;
}
.mat-card-article__image {
	width: 34.4%;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--mat-rose-clair, #FFF5F3);
}
.mat-card-article__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mat-card-article__image-placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(45deg, var(--mat-rose-clair, #FFF5F3) 25%, transparent 25%, transparent 50%, var(--mat-rose-clair, #FFF5F3) 50%, var(--mat-rose-clair, #FFF5F3) 75%, transparent 75%, transparent),
		var(--mat-aplat-bleu-vert, #EFF6F7);
	background-size: 14px 14px;
}
.mat-card-article__content {
	width: 65.6%;
	border: 1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	border-left: none;
	border-radius: 0 var(--mat-radius-pill, 30px) var(--mat-radius-pill, 30px) 0;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}
.mat-card-article__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mat-card-article__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	padding: 5px 14px;
	border-radius: var(--mat-radius-pill, 30px);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	/* Le gabarit passe la couleur de la catégorie mais aucune règle ne la
	   peignait : texte blanc sur fond blanc, catégorie invisible (doc 31/08). */
	background: var(--mat-cat-color, #9E5B5C);
	width: fit-content;
	letter-spacing: 0;
}
.mat-card-article__tag::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}
.mat-card-article__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
	line-height: 1.3;
}
.mat-card-article__excerpt {
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0.85;
}
.mat-card-article__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.mat-card-article__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-gris-light, #94999F);
}
.mat-card-article__read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-card-article__link:hover .mat-card-article__read-more,
.mat-card-article__link:focus .mat-card-article__read-more {
	color: var(--mat-rose-blush, #9E5B5C);
	font-weight: 700;
}
.mat-card-article__link:hover .mat-card-article__read-more-icon path {
	stroke: var(--mat-rose-blush, #9E5B5C);
}
.mat-card-article__read-more-icon { flex-shrink: 0; }

@media (max-width: 720px) {
	.mat-card-article__link { flex-direction: column; min-height: 0; }
	.mat-card-article__image { width: 100%; aspect-ratio: 16/9; }
	.mat-card-article__content {
		width: 100%;
		border-left: 1px solid var(--mat-gris-border-soft);
		border-radius: 0 0 var(--mat-radius-pill, 30px) var(--mat-radius-pill, 30px);
	}
}

/* =====================================================
   PAGINATION cercles (style CHRU)
   ===================================================== */
.mat-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 48px 0;
	flex-wrap: wrap;
}
.mat-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 15px;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border: 1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	text-decoration: none;
	transition: all 150ms ease;
}
.mat-pagination__item:hover {
	background: var(--mat-rose-clair, #FFF5F3);
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-pagination__item--current {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-archive-empty {
	padding: 64px 0;
	text-align: center;
	color: var(--mat-gris-dark, #696969);
	font-style: italic;
}

/* =====================================================
   ARCHIVE ÉVÉNEMENTS — hero photo + filtres dropdown
   (système CHRU `chru-archive-hero` + `chru-archive-filters`)
   ===================================================== */
.mat-archive-hero {
	width: 100%;
	margin: 0 0 0;
}
.mat-archive-hero__image {
	height: 360px;
	overflow: hidden;
	position: relative;
	background: var(--mat-bleu-fonce, #14446B);
}
.mat-archive-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mat-archive-hero__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mat-rose-clair, #FFF5F3) 0%, rgba(170, 99, 100, 0.30) 100%);
}
.mat-archive-hero__below {
	text-align: center;
	padding: 32px 0 24px;
}
.mat-archive-hero__below .mat-archive-hero__breadcrumb {
	justify-content: center;
	margin-bottom: 8px;
}
.mat-archive-hero__breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--mat-bleu-fonce, #14446B);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 18px;
}
.mat-archive-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.mat-archive-hero__breadcrumb a:hover { text-decoration: underline; }
.mat-archive-hero__breadcrumb strong { font-weight: 700; }
.mat-archive-hero__title {
	font-family: var(--mat-font-sans, "Open Sans", system-ui, sans-serif);
	font-size: 45px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
}
.mat-archive-hero__title-accent { color: var(--mat-rose-blush, #9E5B5C); }

/* Filtres dropdown événements */
.mat-archive-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	margin-bottom: 32px;
	position: relative;
}
.mat-archive-filters__left {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-archive-filters__icon { color: var(--mat-rose-blush, #9E5B5C); }
.mat-archive-filters__label {
	font-weight: 700;
	font-size: 15px;
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-archive-filters__group { display: flex; gap: 12px; flex-wrap: wrap; }
.mat-archive-filters__dropdown { position: relative; }
.mat-archive-filters__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--mat-bleu-fonce, #14446B);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--mat-radius-pill, 30px);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 150ms ease;
}
.mat-archive-filters__btn:hover,
.mat-archive-filters__btn[aria-expanded="true"] {
	background: var(--mat-rose-blush, #9E5B5C);
}
.mat-archive-filters__chevron { transition: transform 200ms ease; }
.mat-archive-filters__btn[aria-expanded="true"] .mat-archive-filters__chevron { transform: rotate(180deg); }
.mat-archive-filters__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: #fff;
	border: 1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: 0 6px 20px rgba(20, 68, 107, 0.12);
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mat-archive-filters__checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	cursor: pointer;
	padding: 4px 0;
}
.mat-archive-filters__checkbox input {
	accent-color: var(--mat-rose-blush, #9E5B5C);
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.mat-archive-filters__empty {
	margin: 0;
	color: var(--mat-gris-dark, #696969);
	font-size: 14px;
	font-style: italic;
}
.mat-archive-filters__submit {
	background: var(--mat-bleu-fonce, #14446B);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--mat-radius-pill, 30px);
	font-weight: 600;
	cursor: pointer;
}

.mat-archive-events { padding-bottom: 64px; }
.mat-archive-events__empty {
	text-align: center;
	padding: 64px 0;
	color: var(--mat-gris-dark, #696969);
	font-style: italic;
}

/* =====================================================
   CARD EVENT (style CHRU pixel-for-pixel)
   ===================================================== */
.mat-card-event {
	position: relative;
	border-radius: 24px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(170, 99, 100, 0.10);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.mat-card-event:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(170, 99, 100, 0.18);
}
.mat-card-event__link { display: block; text-decoration: none; color: inherit; }
.mat-card-event__image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mat-rose-clair, #FFF5F3);
}
.mat-card-event__image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.mat-card-event__image-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(20, 68, 107, 0.25) 0%, rgba(20, 68, 107, 0) 60%);
	pointer-events: none;
}
.mat-card-event__date {
	position: absolute;
	top: 16px; left: 16px;
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	padding: 10px 14px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 2px 8px rgba(20, 68, 107, 0.20);
	z-index: 2;
}
.mat-card-event__date-icon { color: #fff; flex-shrink: 0; }
.mat-card-event__date-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.5); }
.mat-card-event__date-text { display: flex; flex-direction: column; line-height: 1.05; }
.mat-card-event__date-day { font-weight: 700; font-size: 15px; letter-spacing: 0.5px; }
.mat-card-event__date-year { font-size: 12px; opacity: 0.85; font-weight: 600; }
.mat-card-event__content {
	padding: 18px 20px 22px;
	display: flex; flex-direction: column; gap: 10px;
}
.mat-card-event__category {
	font-size: 13px;
	font-weight: 700;
	color: var(--mat-rose-blush, #9E5B5C);
	text-transform: lowercase;
	letter-spacing: 0.3px;
}
.mat-card-event__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
	line-height: 1.25;
	min-height: 2.5em;
}
.mat-card-event__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	gap: 10px;
}
.mat-card-event__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mat-gris-dark, #696969);
}
.mat-card-event__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-card-event__link:hover .mat-card-event__more { color: var(--mat-rose-blush, #9E5B5C); }

/* =====================================================
   SINGLE ARTICLE (single.php)
   ===================================================== */
.mat-single { background: #fff; }

.mat-single__hero {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	padding: 40px 0 48px;
}
.mat-single__hero .mat-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.mat-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	max-width: 900px;
}
.mat-single__breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-single__breadcrumb a:hover { color: #fff; text-decoration: none; }
.mat-single__breadcrumb strong { color: #fff; font-weight: 700; }
.mat-single__cat-pill {
	background: var(--mat-cat-color, #9E5B5C);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: var(--mat-radius-pill, 30px);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.2px;
}
.mat-single__cat-pill::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}
.mat-single__cat-pill:hover { opacity: 0.9; }
.mat-single__title {
	font-family: var(--mat-font-sans, "Open Sans", system-ui, sans-serif);
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.2;
	max-width: 900px;
}
.mat-single__meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 600;
}
.mat-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mat-single__meta-sep {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.45);
}

.mat-single__hero-img {
	max-width: var(--mat-container-max, 1440px);
	margin: -32px auto 32px;
	padding: 0 var(--mat-container-pad, 24px);
	position: relative;
	z-index: 2;
}
.mat-single__hero-img img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
	border-radius: 20px;
	box-shadow: 0 8px 28px rgba(20, 68, 107, 0.12);
}

.mat-single__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	padding: 16px 24px 64px;
}
@media (max-width: 960px) {
	.mat-single__layout { grid-template-columns: 1fr; gap: 24px; }
}

.mat-single__sidebar {
	position: sticky;
	/* Meme ecart sous le header que le sommaire des pages standard (retour
	   Thomas du 21/09/2026, valeur reprise du CHRU : header + 20px). Le 24px
	   d'origine glissait le sommaire SOUS le header des qu'on defilait. */
	top: calc(var(--mat-header-h, 134px) + 20px);
	max-height: calc(100vh - var(--mat-header-h, 134px) - 40px);
	overflow-y: auto;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Sous 960px la mise en page passe en une colonne : le sommaire se place au
   dessus du texte et ne doit plus coller au défilement (retour Marie KUSY du
   22/09/2026, il recouvrait la lecture en mobile). */
@media (max-width: 960px) {
	.mat-single__sidebar { position: static; max-height: none; overflow: visible; }
}
.mat-single__toc {
	background: var(--mat-rose-clair, #FFF5F3);
	border-radius: 18px;
	padding: 18px 20px 20px;
}
.mat-single__toc-head { margin-bottom: 8px; }
.mat-single__toc-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-single__toc-rule {
	display: block;
	width: 40%;
	height: 2px;
	background: var(--mat-rose-blush, #9E5B5C);
	opacity: 0.4;
	margin-top: 8px;
	border-radius: 2px;
}
.mat-single__toc-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mat-single__toc-list a {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--mat-bleu-fonce, #14446B);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 4px 0;
	border-radius: 4px;
}
.mat-single__toc-marker {
	flex-shrink: 0;
	display: inline-flex;
	width: 14px;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-single__toc-list a:hover,
.mat-single__toc-list a.is-active {
	color: var(--mat-rose-blush, #9E5B5C);
	font-weight: 700;
}
.mat-single__toc-list a.is-active {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.mat-single__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-single__back:hover { color: var(--mat-rose-blush, #9E5B5C); }

.mat-single__content {
	color: var(--mat-bleu-fonce, #14446B);
	font-size: 16px;
	line-height: 1.65;
	max-width: 760px;
}
/* ⚠️ Typo éditoriale : ne doit JAMAIS atteindre l'intérieur d'un bloc
   `maternite/*` — un sélecteur descendant (0,1,1) bat les classes du plugin
   (0,1,0) et repeint la typo interne du bloc. Même défaut que celui trouvé
   le 13/08/2026 sur `.mat-evt__content` (bloc « Information utile » à titre
   bleu sur son aplat rose, signalé par Marie KUSY) et que celui corrigé le
   08/07/2026 sur `.mat-page-std__content`.
   Ici il était LATENT : aucun article publié ne porte encore de bloc, donc
   rien ne se voyait — il serait apparu au premier bloc inséré dans une
   actualité. Corrigé avant, pas après.
   L'exclusion (plutôt qu'un scoping en enfant direct `>`) préserve
   l'éditorial imbriqué dans un `wp:columns` / `wp:group`. */
.mat-single__content h2:not(:is([class*="maternite-"] *)) {
	font-size: 28px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 32px 0 12px;
	scroll-margin-top: 80px;
}
.mat-single__content h3:not(:is([class*="maternite-"] *)) {
	font-size: 22px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 24px 0 10px;
}
/* Titres d'article en mobile (retour Marie KUSY du 22/09/2026). H2 aligné sur
   les pages standard, mesurées à 24px et 48px 0 16px. */
@media (max-width: 720px) {
	.mat-single__title { font-size: 30px; }
	.mat-single__content h2:not(:is([class*="maternite-"] *)) {
		font-size: 24px;
		margin: 48px 0 16px;
	}
	.mat-single__content .maternite-chapo { font-size: 19px; }
}
.mat-single__content p:not(:is([class*="maternite-"] *)) { margin: 0 0 16px; }
.mat-single__content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="__btn"]):not([class*="__cta"]):not([class*="-button"]):not([class*="-btn"]):not(.mat-res-card):not([class*="maternite-"]):not(:is([class*="maternite-"] *)) {
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-single__content ul:not(:is([class*="maternite-"] *)),
.mat-single__content ol:not(:is([class*="maternite-"] *)) { margin: 0 0 16px 24px; padding: 0; }
.mat-single__content li:not(:is([class*="maternite-"] *)) { margin: 0 0 6px; }
.mat-single__content blockquote {
	border-left: 4px solid var(--mat-rose-blush, #9E5B5C);
	background: var(--mat-rose-clair, #FFF5F3);
	margin: 24px 0;
	padding: 16px 20px;
	font-style: italic;
	border-radius: 0 12px 12px 0;
}

.mat-single__related {
	background: var(--mat-rose-clair, #FFF5F3);
	padding: 48px 0 56px;
	margin-top: 32px;
}
.mat-single__related-title {
	font-family: var(--mat-font-sans, "Open Sans", sans-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0 0 24px;
}
.mat-single__related-accent {
	color: var(--mat-rose-blush, #9E5B5C);
	margin-left: 4px;
}

/* Alias rétrocompat (mat-archive-pagination utilisé sur events) */
.mat-archive-pagination { display:flex; justify-content:center; align-items:center; gap:10px; padding:32px 0 64px; flex-wrap:wrap; }
.mat-archive-pagination__item {
	display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:50%;
	font-weight:700; font-size:14px;
	color: var(--mat-bleu-fonce, #14446B);
	background:#fff;
	border:1px solid var(--mat-gris-border-soft, rgba(170,99,100,0.30));
	text-decoration:none; transition: all 150ms ease;
}
.mat-archive-pagination__item:hover {
	background: var(--mat-rose-clair, #FFF5F3);
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-archive-pagination__item--current {
	background: var(--mat-rose-blush, #9E5B5C);
	color:#fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}
/* =====================================================
   ARCHIVE ÉVÉNEMENTS V2 (mai 2026) — refonte complète
   Hero photo + vague + fleurs / body rose-clair / filtres rose-blush
   ===================================================== */

.mat-events { background: #FFF5F3; }

/* ---------- HERO ---------- */
.mat-events__hero {
	position: relative;
	width: 100%;
	/* pas d'overflow hidden ici : on veut que les fleurs débordent sur le rose */
}
.mat-events__hero-image {
	width: 100%;
	height: 420px;
	overflow: hidden;
	background: var(--mat-bleu-fonce, #14446B);
}
.mat-events__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Vague de transition #FFF5F3 collée en bas de l'image */
.mat-events__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 90px;
	display: block;
	pointer-events: none;
}

/* Fleurs à cheval entre image et fond rose */
.mat-events__flower {
	position: absolute;
	bottom: -40px;
	width: 180px;
	height: auto;
	pointer-events: none;
	z-index: 3;
}
.mat-events__flower--left  { left: 4%; transform: rotate(-8deg); }
.mat-events__flower--right { right: 4%; transform: scaleX(-1) rotate(-8deg); }

@media (max-width: 1024px) {
	.mat-events__hero-image { height: 320px; }
	.mat-events__flower { width: 130px; bottom: -28px; }
	.mat-events__wave { height: 60px; }
}
@media (max-width: 720px) {
	.mat-events__hero-image { height: 220px; }
	.mat-events__flower { display: none; }
	.mat-events__wave { height: 40px; }
}

/* ---------- BODY ---------- */
.mat-events__body {
	background: #FFF5F3;
	padding: 24px 0 80px;
}

/* Bloc titre + breadcrumb : colonne centrée, gap 24px */
.mat-events__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 16px 0 40px;
	text-align: center;
}

/* Breadcrumb : "Accueil" (600) puis "> Événements" (700), rose-blush */
.mat-events__breadcrumb {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-events__breadcrumb a {
	color: var(--mat-rose-blush, #9E5B5C);
	font-weight: 600;
	text-decoration: none;
}
.mat-events__breadcrumb a:hover { text-decoration: underline; }
.mat-events__breadcrumb-sep {
	font-weight: 700;
}

/* Titre : tout en Coniferous (script) bleu-foncé, 46/600, line-height 49.22px */
.mat-events__title {
	align-self: stretch;
	text-align: center;
	font-family: "Coniferous", "Caveat", cursive;
	font-size: 46px;
	font-weight: 600;
	line-height: 49.22px;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
}
@media (max-width: 720px) {
	.mat-events__title { font-size: 34px; line-height: 1.1; }
}

/* ---------- BARRE DE FILTRES (rose-blush pleine largeur) ---------- */
.mat-events__filters {
	width: 100%;
	background: var(--mat-rose-blush, #9E5B5C);
	border-radius: 14px;
	padding: 19px 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin: 0 0 48px;
	position: relative;
	color: #fff;
	box-sizing: border-box;
}
.mat-events__filters-left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
}
.mat-events__filters-icon { color: #fff; flex-shrink: 0; }
.mat-events__filters-label {
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}
.mat-events__filters-group {
	display: flex;
	align-items: center;
	gap: 128px;
}

/* Boutons dropdowns : texte blanc + chevron blanc, pas de fond */
.mat-events__dropdown { position: relative; }
.mat-events__dropdown-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: #fff;
	border: none;
	padding: 4px 0;
	cursor: pointer;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 23.36px;
}
.mat-events__dropdown-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 4px;
}
.mat-events__dropdown-chevron {
	color: #fff;
	transition: transform 200ms ease;
}
.mat-events__dropdown-btn[aria-expanded="true"] .mat-events__dropdown-chevron {
	transform: rotate(180deg);
}

/* Panneau déroulant sous le bouton — masqué par défaut via attribut HTML [hidden] */
.mat-events__dropdown-panel {
	position: absolute;
	top: calc(100% + 14px);
	left: -16px;
	background: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	box-shadow: 0 8px 24px rgba(20, 68, 107, 0.18);
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mat-events__dropdown-panel[hidden] { display: none !important; }
.mat-events__dropdown-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	cursor: pointer;
}
.mat-events__dropdown-check input {
	accent-color: var(--mat-rose-blush, #9E5B5C);
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
.mat-events__dropdown-empty {
	margin: 0;
	color: var(--mat-gris-dark, #696969);
	font-size: 14px;
	font-style: italic;
}
.mat-events__filters-submit {
	background: var(--mat-bleu-fonce, #14446B);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--mat-radius-pill, 30px);
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 900px) {
	.mat-events__filters {
		padding: 18px 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.mat-events__filters-group { gap: 32px; flex-wrap: wrap; }
}

/* ---------- GRILLE & PAGINATION ---------- */
.mat-events__grid { margin-bottom: 48px; }
/* Désactive le max-width 380px hérité de la version slider home pour qu'en grille
   les cards occupent toute la cellule. */
.mat-events__grid .mat-event-card { flex: initial; max-width: none; width: 100%; }

.mat-events__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 24px 0 0;
	flex-wrap: wrap;
}
.mat-events__pagination-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 11px 12px;
	border-radius: 22px;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--mat-bleu-fonce, #14446B);
	background: transparent;
	border: none;
	text-decoration: none;
	transition: background 150ms ease;
}
.mat-events__pagination-item:hover {
	background: var(--mat-vert-bleu, #99C8CF);
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-events__pagination-item--current {
	background: var(--mat-vert-bleu, #99C8CF);
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-events__empty {
	text-align: center;
	padding: 64px 0;
	color: var(--mat-gris-dark, #696969);
	font-style: italic;
}

/* Tuiles article : pas de soulignement au survol (doc Marie KUSY du 31/08/2026).
   `a:hover { text-decoration: underline }` soulignait tout le texte de la tuile.
   « Lire l'article » garde son soulignement propre. */
.mat-card-article__link,
.mat-card-article__link:hover,
.mat-card-article__link:focus { text-decoration: none; }

/* =====================================================
   PAGES ARTICLES : retours Marie KUSY (doc du 17/08/2026), 05/10/2026
   Bloc ajouté en fin de fichier : il surcharge les règles .mat-single*
   ci-dessus (même spécificité, placé après). Sauvegarde du fichier
   d'avant : archives.css.bak-marie-20261005.
   ===================================================== */

/* 1. Entête : identité Maternité (fond rose clair, titre script Coniferous
   + filet rose comme les pages standard, décors floraux de la charte). */
.mat-single__hero {
	position: relative;
	overflow: hidden;
	background: var(--mat-rose-clair, #FFF5F3);
	color: var(--mat-bleu-fonce, #14446B);
	padding: 40px 0 72px;
}
.mat-single__hero .mat-container { position: relative; z-index: 2; gap: 20px; }
.mat-single__breadcrumb,
.mat-single__breadcrumb a { color: var(--mat-bleu-fonce, #14446B); }
.mat-single__breadcrumb a:hover { color: var(--mat-rose-blush, #9E5B5C); }
.mat-single__breadcrumb strong { color: var(--mat-bleu-fonce, #14446B); }
.mat-single__title {
	font-family: "Coniferous", var(--mat-font-script, cursive);
	font-size: 46px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-single__title-line {
	display: block;
	width: 139px;
	height: 2px;
	background: var(--mat-rose-blush, #9E5B5C);
}
.mat-single__cat-pill { color: #fff; }
.mat-single__cat-pill:hover { opacity: 1; filter: brightness(0.92); }
.mat-single__meta { color: var(--mat-bleu-fonce, #14446B); }
.mat-single__meta-sep { background: rgba(20, 68, 107, 0.35); }

.mat-single__hero-decor {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: block;
	height: auto;
}
.mat-single__hero-decor--left  { left: 4%;  bottom: 24px; width: 110px; }
.mat-single__hero-decor--right { right: 3%; top: 20px;    width: 140px; }
.mat-single__hero-decor--leaf  { left: 11%; top: 28px;    width: 64px; opacity: .9; }
/* Sous 1280px la marge latérale ne suffit plus : les décors passeraient
   sous le titre (centré, 900px max). */
@media (max-width: 1279px) {
	.mat-single__hero-decor { display: none; }
}

/* Image mise en avant : alignée sur la largeur de la mise en page. */
.mat-single__hero-img { max-width: calc(1096px + 2 * var(--mat-container-pad, 24px)); }

/* 2. Mise en page : sommaire + colonne de lecture centrés dans la fenêtre,
   au lieu d'une colonne collée à gauche avec un grand vide à droite.
   280 + 56 + 760 = 1096px ; texte courant limité à ~80 caractères. */
.mat-single__layout {
	max-width: calc(1096px + 48px);
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 56px;
}
.mat-single__content { max-width: 760px; }
@media (max-width: 960px) {
	.mat-single__layout { grid-template-columns: 1fr; gap: 24px; }
	.mat-single__content { max-width: none; }
}
@media (max-width: 720px) {
	.mat-single__hero { padding: 32px 0 56px; }
	.mat-single__title { font-size: 34px; }
}

/* 3. « À lire aussi » : aucun soulignement, image de remplacement propre. */
.mat-single__related .mat-card-article__link,
.mat-single__related .mat-card-article__link *,
.mat-single__related .mat-card-article__read-more { text-decoration: none; }
.mat-single__related .mat-card-article__link:hover .mat-card-article__title { color: var(--mat-rose-blush, #9E5B5C); }
/* 05/10 : étendu à toutes les cartes article (Actualités, accueil), plus de rayures. */
.mat-card-article .mat-card-article__image-placeholder,
.mat-single__related .mat-card-article__image-placeholder {
	background:
		url("../img/feuille-bleue-points.svg") center / 46% auto no-repeat,
		var(--mat-aplat-bleu-vert, #EFF6F7);
}
.mat-single__related-accent { margin-left: 0; }