/* =========================================================================
 * Maternité — feuille de styles principale
 * ========================================================================= */

/* Tous les sauts d'ancre (#…) atterrissent sous le header sticky (~90px)
   au lieu d'être masqués derrière lui. Corrige le placement des ancres.

   scroll-behavior: le saut est ANIMÉ et non instantané (retour Marie KUSY du
   11/08/2026 : « on avait l'animation de la page qui descend, et pas juste un
   lien brut »). ⚠️ Les deux autres `scroll-behavior: smooth` de ce fichier
   portent sur des CARROUSELS horizontaux (.mat-agenda__viewport,
   .mat-atl-gal__viewport) : ils n'ont jamais eu d'effet sur le défilement du
   document, d'où le saut sec sur les ancres. */
/* -------------------------------------------------------------------------
   FILET CONTRE LE DÉFILEMENT HORIZONTAL (22/09/2026)
   -------------------------------------------------------------------------
   Retour de Thomas : « j'ai un scroll horizontal sur les pages ».

   🛑 Ce défaut est INVISIBLE depuis nos contrôles : le Chrome sans interface
   qui sert aux captures affiche ses barres de défilement EN SUPERPOSITION,
   elles ne retirent rien à `clientWidth` ni à `100vw`. Une largeur calculée
   sur la fenêtre tombe donc juste ici et déborde d'une quinzaine de pixels
   sur un poste qui affiche de vraies barres. Toutes les mesures « 0
   débordement » du 21 et du 22/09 sont justes… et ne prouvent rien sur ce
   point précis.

   `clip` et surtout PAS `hidden` : `hidden` ferait du `body` un conteneur de
   défilement et casserait le sommaire `position: sticky` des pages standard
   (c'est écrit dans le CLAUDE.md du projet depuis le 21/09). `clip` ne crée
   aucun conteneur de défilement — vérifié par témoin après coup.
   ⚠️ C'est un filet, pas un correctif : un élément qui déborde vraiment doit
   être corrigé à la source, sinon il reste coupé au lieu d'être visible. */
body { overflow-x: clip; }

html {
	/* La valeur est posée par assets/js/maternite.js, qui MESURE le header
	   (--mat-header-h). Le 114px d'origine avait été calé en juin sur un header
	   d'environ 90px ; il en fait 134 aujourd'hui, donc toute ancre atterrissait
	   20px SOUS le header (retour Marie KUSY du 11/08/2026). Le repli 134px sert
	   si le JS ne s'exécute pas. Voir le commentaire du module JS. */
	scroll-padding-top: calc(var(--mat-header-h, 134px) + 16px);
	scroll-behavior: smooth;
}

/* Accessibilité : on n'impose pas d'animation à qui a demandé à son système
   de les réduire (RGAA / WCAG 2.3.3). Le saut redevient instantané. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

:root {
	--mat-bleu-fonce: #14446B;
	--mat-rose-blush: #9E5B5C;
	--mat-rose-clair: #FFF5F3;
	--mat-jaune: #FCC75E;
	--mat-vert-bleu: #99C8CF;
	--mat-aplat-bleu-vert: #EFF6F7;
	--mat-orange: #F28E4B;
	--mat-orange-clair: #F8B378;
	--mat-urgences: #DA1500;
	--mat-blanc: #F8F8F8;
	--mat-gris-light: #94999F;
	--mat-gris-dark: #696969;
	--mat-gris-border: rgba(170, 99, 100, 0.36);
	--mat-gris-border-soft: rgba(170, 99, 100, 0.30);

	--mat-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mat-font-script: "Coniferous", "Caveat", "Brush Script MT", cursive;

	--mat-radius-pill: 30px;
	--mat-shadow-soft: 0 2px 12px rgba(20, 68, 107, 0.06);

	--mat-container-max: 1440px;
	--mat-container-pad: 24px;
}

/* =========================================================================
 * Skip link — « Aller au contenu principal » (RGAA 12.7 / 12.8)
 * Masqué hors écran par défaut, révélé au focus clavier. Cible le
 * <main id="main-content" tabindex="-1"> unique de chaque gabarit.
 * Émis par maternite_skip_link() sur wp_body_open (functions.php).
 * ========================================================================= */

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.5rem;
	background-color: var(--mat-bleu-fonce);
	color: #fff;
	font-family: var(--mat-font-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
	text-decoration: none;
	outline: 3px solid var(--mat-rose-blush);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.skip-link:focus { outline: 3px solid ButtonText; }
}

@media print {
	.skip-link { display: none !important; }
}

/* ----- Reset léger ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--mat-font-sans);
	color: var(--mat-bleu-fonce);
	background: #fff;
	line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }

/* =========================================================================
 * Header
 * ========================================================================= */

.mat-header {
	background: #fff;
	border-bottom: 1px solid var(--mat-gris-border-soft);
	position: sticky;
	top: 0;
	z-index: 100;
}
.mat-header__inner {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 16px var(--mat-container-pad);
	display: grid;
	grid-template-columns: 145px 1fr;
	gap: 24px;
	align-items: center;
}

/* Bouton burger — caché en desktop, visible en mobile */
.mat-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	gap: 5px;
	flex-direction: column;
}
.mat-nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2.5px;
	background: var(--mat-bleu-fonce);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.mat-header.is-open .mat-nav-toggle__bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}
.mat-header.is-open .mat-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.mat-header.is-open .mat-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

body.mat-nav-locked { overflow: hidden; }

/* Panneau mobile + actions : cachés en desktop, activés dans le media ≤1024px */
.mat-mobile-actions { display: none; }
.mat-mobile-menu,
.mat-mobile-overlay { display: none; }

.mat-header__logo img,
.mat-header__logo svg {
	max-height: 72px;
	width: auto;
	display: block;
}
.mat-nav__icon img { width: 100%; height: auto; }

.mat-header__right {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --- Barre haute --- */
.mat-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.mat-topbar__left,
.mat-topbar__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

.mat-link-strong {
	color: var(--mat-bleu-fonce);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.37;
}

.mat-divider-v {
	width: 1px;
	height: 18px;
	background: var(--mat-gris-border);
}

.mat-pill-pro {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	background: var(--mat-rose-clair);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill);
	font-weight: 700;
	font-size: 14px;
}
.mat-pill-pro__icon-img {
	width: 16px;
	height: 18px;
	display: inline-block;
}

.mat-flag {
	display: inline-flex;
	width: 22px;
	height: 14px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.mat-flag span { display: block; flex: 1; }
.mat-flag span:nth-child(1) { background: #1B3086; }
.mat-flag span:nth-child(2) { background: #fff; }
.mat-flag span:nth-child(3) { background: #E00022; }

.mat-hours {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	line-height: 1.2;
}
.mat-hours__schedule {
	color: var(--mat-gris-light);
	font-size: 14px;
	font-style: italic;
	font-weight: 600;
}
.mat-hours__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mat-rose-blush);
	font-size: 18px;
	font-weight: 700;
}
.mat-hours__phone svg,
.mat-hours__phone img { width: 16px; height: 16px; opacity: 0.8; }

.mat-btn-urgences {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px 14px 24px;
	background: var(--mat-urgences);
	color: var(--mat-blanc);
	border-radius: var(--mat-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.37;
}
.mat-btn-urgences:hover { text-decoration: none; filter: brightness(1.05); }
.mat-btn-urgences svg,
.mat-btn-urgences img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* --- Barre nav principale --- */
.mat-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.mat-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 48px;
}
.mat-nav__menu > li > a,
.mat-nav__menu > li > .mat-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mat-bleu-fonce);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.37;
}
.mat-nav__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
}
.mat-nav__icon svg, .mat-nav__icon img { max-width: 100%; max-height: 100%; }
.mat-nav__caret {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--mat-bleu-fonce);
	margin-left: 4px;
}
.mat-nav__chevron {
	width: 13px;
	height: auto;
	margin-left: 4px;
}

/* État actif (item courant) */
.mat-nav__menu > li.current-menu-item > a,
.mat-nav__menu > li.current-menu-parent > a,
.mat-nav__menu > li.current-menu-ancestor > a,
.mat-nav__menu > li.is-active > a,
.mat-nav__menu > li.current-menu-item > .mat-nav__toggle,
.mat-nav__menu > li.current-menu-parent > .mat-nav__toggle,
.mat-nav__menu > li.current-menu-ancestor > .mat-nav__toggle {
	text-decoration: underline;
	text-decoration-color: var(--mat-bleu-fonce);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --- Sous-menus déroulants --- */
.mat-nav__menu > li {
	position: relative;
}
.mat-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 280px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(20, 68, 107, 0.14);
	border: 1px solid var(--mat-gris-border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 100;
}
/* Ouverture : survol (desktop), clic sur la rubrique (.is-submenu-open, posé
   par maternite.js), ou focus clavier DANS le sous-menu. Pas de
   li:focus-within : la rubrique est un bouton qui garde le focus après un
   clic, le sous-menu ne pourrait plus se refermer au clic ni à Échap. */
.mat-nav__menu > li:hover > .sub-menu,
.mat-nav__menu > li.is-submenu-open > .sub-menu,
.mat-nav__menu .sub-menu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mat-nav__menu .sub-menu li {
	list-style: none;
}
.mat-nav__menu .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: var(--mat-bleu-fonce);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.mat-nav__menu .sub-menu a:hover,
.mat-nav__menu .sub-menu a:focus {
	background: var(--mat-rose-clair);
	color: var(--mat-bleu-fonce);
}
.mat-nav__menu .sub-menu .current-menu-item > a {
	background: var(--mat-rose-clair);
	font-weight: 700;
}
.mat-nav__menu > li.menu-item-has-children > a {
	cursor: pointer;
}
/* Rubrique à sous-menu = bouton sans lien (doc Marie KUSY du 31/08/2026) */
.mat-nav__toggle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.mat-nav__toggle .mat-nav__chevron { transition: transform .2s ease; }
.mat-nav__menu > li.is-submenu-open > .mat-nav__toggle .mat-nav__chevron { transform: rotate(180deg); }
.mat-nav__toggle:focus-visible {
	outline: 2px solid var(--mat-bleu-fonce);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- Recherche --- */
.mat-search {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 3px 3px 3px 16px;
	border: 1px solid var(--mat-gris-border);
	border-radius: var(--mat-radius-pill);
}
.mat-search input[type="search"] {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-style: italic;
	color: var(--mat-gris-dark);
	outline: none;
	min-width: 220px;
}
.mat-search__btn {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mat-search__btn svg,
.mat-search__btn img { width: 14px; height: 14px; }

/* =========================================================================
 * Hero accueil
 * ========================================================================= */

.mat-hero {
	position: relative;
	background: var(--mat-aplat-bleu-vert);
	overflow: visible;
	isolation: isolate;
	/* Hauteur proportionnelle au viewport, mais bornée pour éviter un hero démesuré sur grands écrans (>1920) */
	min-height: clamp(420px, calc(473 / 1440 * 100vw), 630px);
}
/* Clipping interne pour le fond (la grande forme rose) — sans empêcher Vector-12 de déborder */
.mat-hero__bg { overflow: hidden; }

/* Décorations SVG d'arrière-plan */
.mat-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* forme-svg-de-fond-hero (1440×492) : SVG inline, remplit tout le hero, étiré sans déformation marquée */
.mat-hero__bg-shape {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.mat-hero__bg-shape path {
	fill: var(--mat-rose-clair);
}

/* Group-99 (216×219) : à cheval entre le hero et la section suivante, collé bord droit viewport */
.mat-hero__bg-group {
	position: absolute;
	right: 0;
	bottom: -130px;
	width: 216px;
	height: auto;
	display: block;
	z-index: 3;
	pointer-events: none;
}

/* Illustration hero : proportions Figma 603 × 493 préservées, collée bord gauche viewport.
   À 1440 → 603×493 ; au-delà, scale proportionnel via vw ; aspect-ratio garantit le ratio. */
.mat-hero__visual {
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(420px, calc(603 / 1440 * 100vw), 800px);
	aspect-ratio: 603 / 493;
	z-index: 1;
}
.mat-hero__visual img {
	/* La photo remplit tout le cadre : sans ça, une image moins haute que le ratio
	   603/493 s'arrêtait au-dessus du bas du bandeau et laissait voir la vague rose
	   sous un bord droit (retour Coline GENAY, 23/09/2026).
	   « contain » calé en bas à gauche : la photo n'est jamais rognée, quel que soit son
	   ratio, et son bas touche toujours la vague. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
	display: block;
}
/* Découpe de la photo par la vague : voir le commentaire dans front-page.php. */
.mat-hero__wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
}
.mat-hero__wave path { fill: var(--mat-aplat-bleu-vert); }
/* Habillage du coin haut droit (retour Coline GENAY, 23/09/2026). Positions calées à
   droite du bandeau : à 1440px, le titre finit vers x=1205, les formes commencent après. */
.mat-hero__deco-tr {
	position: absolute;
	top: 0;
	right: 0;
	width: 260px;
	height: 300px;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
.mat-hero__deco-tr img { position: absolute; display: block; height: auto; }
.mat-hero__deco-tr-bleu    { right: -34px; top: -24px; width: 180px; }
.mat-hero__deco-tr-feuille { right: 100px; top: 110px; width: 58px; transform: rotate(-28deg); }
/* Sous 1440px le titre se rapproche du bord droit : la composition réduit pour ne jamais
   le toucher (recouvrement mesuré à 1280 et 1100px sans ces paliers), puis disparaît.
   Règle de calcul : le titre finit à 50vw + 483px, la forme la plus à gauche (la feuille)
   commence à environ 170px × échelle du bord droit ; on garde au moins 24px entre les deux. */
.mat-hero__deco-tr { transform-origin: top right; }
@media (max-width: 1439px) { .mat-hero__deco-tr { transform: scale(0.7); } }
@media (max-width: 1359px) { .mat-hero__deco-tr { transform: scale(0.55); } }
@media (max-width: 1279px) { .mat-hero__deco-tr { display: none; } }
.mat-hero__visual--placeholder {
	width: 100%;
	background: linear-gradient(135deg, #FFE7DD, #FCD0BA);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mat-rose-blush);
	font-style: italic;
	padding: 24px;
	text-align: center;
}

/* Container du contenu texte : reste dans le 1440 centré */
.mat-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 80px var(--mat-container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	min-height: clamp(420px, calc(473 / 1440 * 100vw), 630px);
}
.mat-hero__visual--placeholder {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #FFE7DD, #FCD0BA);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mat-rose-blush);
	font-style: italic;
}

.mat-hero__content {
	grid-column: 2;
	max-width: 561px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.mat-hero__title {
	font-family: var(--mat-font-script);
	font-size: 46px;
	line-height: 49.22px;
	color: var(--mat-bleu-fonce);
	margin: 0;
	font-weight: 600;
	max-width: 561px;
}
.mat-hero__lead {
	font-family: var(--mat-font-sans);
	font-size: 16px;
	line-height: 23.36px;
	color: var(--mat-bleu-fonce);
	font-weight: 700;
	opacity: 0.9;
	margin: 0;
	max-width: 513px;
}
.mat-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill);
	font-weight: 700;
	font-size: 16px;
	transition: filter 0.15s ease;
	align-self: flex-start;
	margin-top: 8px;
}
.mat-hero__cta:hover { text-decoration: none; filter: brightness(0.96); }
.mat-hero__cta svg { width: 18px; height: 18px; }

/* =========================================================================
 * Section RDV-tunnel (sélecteur de motif de rendez-vous)
 * ========================================================================= */

.mat-rdv-tunnel {
	background: var(--mat-aplat-bleu-vert);
	padding: 80px var(--mat-container-pad) 64px;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

/* Éléments décoratifs (feuille / fleur / points) — derrière la carte blanche */
.mat-rdv-tunnel__deco {
	position: absolute;
	inset: 0;
	max-width: var(--mat-container-max);
	margin: 0 auto;
	pointer-events: none;
	z-index: 0;
}
.mat-rdv-tunnel__deco > svg {
	position: absolute;
	display: block;
}
.mat-rdv-tunnel__deco-leaf {
	left: 6%;
	top: 35%;
	width: 274px;
	height: 209px;
}
.mat-rdv-tunnel__deco-flower {
	left: 18%;
	top: 22%;
	width: 95px;
	height: 102px;
}
.mat-rdv-tunnel__deco-dots {
	right: 5%;
	top: 18%;
	width: 216px;
	height: 219px;
}

.mat-rdv-tunnel__container {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 4px 45.6px rgba(177, 177, 177, 0.25);
	padding: 40px 48px;
	position: relative;
	z-index: 1;
}

.mat-rdv-tunnel__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-bottom: 36px;
}

/* Pill rose blush au-dessus du titre */
.mat-pill-blush {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--mat-rose-blush);
	border-radius: 20px;
	color: var(--mat-rose-blush);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}
.mat-pill-blush__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mat-rose-blush);
}

.mat-rdv-tunnel__title {
	margin: 0;
	color: var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}

/* Dropdown (native <details>) */
.mat-rdv-dropdown {
	width: 100%;
}
.mat-rdv-dropdown__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 8px 14px 24px;
	background: var(--mat-rose-clair);
	border: 1px solid #FFD6CF;
	border-radius: 12px;
	color: #626262;
	font-size: 15px;
	font-weight: 600;
	line-height: 20.52px;
	transition: background 0.15s ease;
}
.mat-rdv-dropdown__summary::-webkit-details-marker { display: none; }
.mat-rdv-dropdown__summary::marker { content: ""; }
.mat-rdv-dropdown__summary:hover { background: #FFEEE9; }

.mat-rdv-dropdown__placeholder { flex: 1; }

.mat-rdv-dropdown__toggle {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mat-vert-bleu);
	border-radius: 50%;
	transition: transform 0.2s ease;
}
/* Chevron pointe vers le bas quand fermé, vers le haut quand ouvert */
.mat-rdv-dropdown:not([open]) .mat-rdv-dropdown__toggle { transform: rotate(180deg); }

/* Liste déroulée : carte blanche flottante */
.mat-rdv-dropdown__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 33.3px rgba(161, 161, 161, 0.25);
	max-height: 360px;
	overflow-y: auto;
}
.mat-rdv-dropdown__item + .mat-rdv-dropdown__item {
	border-top: 1px solid #F4F4F4;
}
.mat-rdv-dropdown__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px 14px 24px;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}
.mat-rdv-dropdown__link:hover {
	background: var(--mat-rose-clair);
	text-decoration: none;
}
.mat-rdv-dropdown__dot {
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	border-radius: 50%;
	background: var(--mat-vert-bleu);
}
.mat-rdv-dropdown__label { flex: 1; }
.mat-rdv-dropdown__arrow {
	flex: 0 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.mat-rdv-tunnel__deco-leaf { left: -40px; }
	.mat-rdv-tunnel__deco-flower { left: 4%; }
	.mat-rdv-tunnel__deco-dots { right: -40px; }
}
@media (max-width: 768px) {
	.mat-rdv-tunnel { padding: 48px var(--mat-container-pad); }
	.mat-rdv-tunnel__container { padding: 32px 24px; border-radius: 20px; }
	.mat-rdv-tunnel__title { font-size: 20px; }
	.mat-rdv-dropdown__summary { padding-left: 16px; }
	.mat-rdv-dropdown__toggle { width: 36px; height: 36px; flex-basis: 36px; }
	.mat-rdv-dropdown__link { padding: 12px 16px; font-size: 15px; }
	.mat-rdv-tunnel__deco { display: none; }
}

/* =========================================================================
 * Section 4 — Agenda événements
 * ========================================================================= */

.mat-agenda {
	background: var(--mat-aplat-bleu-vert);
	padding: 145px var(--mat-container-pad) 225px;
	position: relative;
	overflow: hidden;
}
.mat-agenda__bg {
	position: absolute;
	left: 360px;
	top: 50%;
	transform: translate(-25%, -50%);
	width: 420px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}
.mat-agenda__container {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.mat-agenda__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.mat-agenda__title {
	margin: 0;
	color: var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}
.mat-agenda__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 37px;
	height: 44px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: 30px;
	font-size: 15px;
	font-weight: 700;
	line-height: 20.52px;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.mat-agenda__cta:hover { text-decoration: none; filter: brightness(0.96); }

.mat-agenda__slider { position: relative; min-width: 0; }
.mat-agenda__viewport {
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Bleed à droite jusqu'au bord d'écran pour afficher autant de cards que possible */
	/* ⚠️ `--mat-vw` et pas `100vw` : `100vw` INCLUT la barre de défilement, donc
	   cette marge négative dépassait d'une demi-barre (7 à 8px) sur tout
	   navigateur qui affiche des barres classiques. Invisible en recette : le
	   Chrome sans interface des captures met ses barres en superposition et
	   n'en retire rien à `100vw`. */
	margin-right: calc(-1 * max(0px, (var(--mat-vw, 100vw) - var(--mat-container-max)) / 2) - var(--mat-container-pad));
}
.mat-agenda__viewport::-webkit-scrollbar { display: none; }
.mat-agenda__track {
	list-style: none;
	margin: 0;
	padding: 16px 0 24px;
	display: flex;
	gap: 20px;
}

.mat-event-card {
	flex: 0 0 413px;
	max-width: 413px;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--mat-rose-clair);
	border-radius: 30px;
	box-shadow: 0 4px 42.9px rgba(198, 129, 122, 0.10);
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mat-event-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 48px rgba(198, 129, 122, 0.15);
}
.mat-event-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.mat-event-card__link:hover { text-decoration: none; }

.mat-event-card__image {
	height: 200px;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}
.mat-event-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mat-event-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
	pointer-events: none;
}
.mat-event-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mat-vert-bleu), var(--mat-rose-blush));
}

/* Badge date — collé au bas de l'image */
.mat-event-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	background: var(--mat-rose-blush);
	border-top-right-radius: 14px;
	color: #fff;
	z-index: 2;
}
.mat-event-card__date-icon {
	width: 24px;
	height: 24px;
	opacity: 0.85;
}
.mat-event-card__date-sep {
	width: 1px;
	height: 38px;
	background: rgba(255, 255, 255, 0.8);
}
.mat-event-card__date-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}
.mat-event-card__date-day {
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
}
.mat-event-card__date-year {
	font-size: 18px;
	font-weight: 400;
}

.mat-event-card__body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mat-event-card__title {
	margin: 0;
	color: var(--mat-rose-blush);
	font-size: 18px;
	font-weight: 700;
}
.mat-event-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 14px;
	gap: 12px;
}
.mat-event-card__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mat-rose-blush);
	font-size: 15px;
	font-weight: 700;
	line-height: 20.52px;
}
.mat-event-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	line-height: 21.88px;
}

/* Boutons navigation slider : groupés en bas à droite, sous les cartes */
.mat-agenda__nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	z-index: 5;
}
.mat-agenda__btn {
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 4px 12px rgba(20, 68, 107, 0.18));
}
.mat-agenda__btn svg.mat-agenda__btn-state--default { display: block; }
.mat-agenda__btn svg.mat-agenda__btn-state--hover { display: none; }
.mat-agenda__btn-state--flip { transform: rotate(180deg); }
.mat-agenda__btn:hover svg.mat-agenda__btn-state--default,
.mat-agenda__btn:focus-visible svg.mat-agenda__btn-state--default { display: none; }
.mat-agenda__btn:hover svg.mat-agenda__btn-state--hover,
.mat-agenda__btn:focus-visible svg.mat-agenda__btn-state--hover { display: block; }
.mat-agenda__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mat-agenda__btn:disabled:hover svg.mat-agenda__btn-state--default { display: block; }
.mat-agenda__btn:disabled:hover svg.mat-agenda__btn-state--hover { display: none; }

/* Tablet large : container 2 colonnes mais plus compact */
@media (max-width: 1280px) {
	.mat-agenda { padding: 96px var(--mat-container-pad) 160px; }
	.mat-agenda__container {
		grid-template-columns: 320px 1fr;
		gap: 40px;
	}
	.mat-agenda__bg { left: 280px; width: 340px; }
	.mat-event-card { flex: 0 0 380px; max-width: 380px; }
}

/* Tablet : passe en 1 colonne, intro au-dessus du slider */
@media (max-width: 1024px) {
	.mat-agenda { padding: 64px var(--mat-container-pad) 96px; }
	.mat-agenda__container {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.mat-agenda__bg {
		left: auto;
		right: 0;
		top: 80px;
		transform: none;
		width: 280px;
		opacity: 0.6;
	}
	.mat-agenda__title { font-size: 22px; }
	.mat-event-card { flex: 0 0 360px; max-width: 360px; }
	.mat-event-card__image { height: 180px; }
}

/* Mobile : cards full-width snap, intro condensée */
@media (max-width: 640px) {
	.mat-agenda { padding: 48px 0 64px; }
	.mat-agenda__container { padding: 0 var(--mat-container-pad); gap: 24px; }
	.mat-agenda__bg { width: 200px; top: 40px; opacity: 0.45; }
	.mat-agenda__title { font-size: 20px; line-height: 1.3; }
	.mat-agenda__cta { padding: 11px 24px; font-size: 14px; }
	.mat-agenda__slider { margin: 0 calc(-1 * var(--mat-container-pad)); }
	.mat-agenda__viewport { padding: 0 var(--mat-container-pad); }
	.mat-event-card {
		flex: 0 0 calc(100vw - 64px);
		max-width: calc(100vw - 64px);
	}
	.mat-event-card__image { height: 160px; }
	.mat-event-card__date { padding: 8px 16px; gap: 10px; }
	.mat-event-card__date-day { font-size: 19px; }
	.mat-event-card__date-year { font-size: 16px; }
	.mat-event-card__date-sep { height: 32px; }
	.mat-event-card__title { font-size: 16px; }
	.mat-event-card__footer { flex-wrap: wrap; gap: 8px; }
	.mat-event-card__location { font-size: 14px; }
	.mat-event-card__cta { font-size: 15px; }
	.mat-agenda__nav { padding-right: var(--mat-container-pad); margin-top: 16px; gap: 8px; }
	.mat-agenda__btn { width: 38px; height: 38px; }
	.mat-agenda__btn svg { width: 38px; height: 38px; }
}

/* Très petits écrans */
@media (max-width: 380px) {
	.mat-event-card { flex: 0 0 calc(100vw - 48px); max-width: calc(100vw - 48px); }
}

/* =========================================================================
 * Section "Votre parcours maternité"
 * ========================================================================= */

.mat-parcours {
	background: #fff;
	padding: 106px var(--mat-container-pad) 96px;
	position: relative;
	overflow: hidden;
}
.mat-parcours__container {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	position: relative;
}
.mat-parcours__header,
.mat-parcours__grid {
	position: relative;
	z-index: 1;
}

/* Feuilles décoratives : derrière les cards (z-index 0), débordent des bords du container 1440 */
.mat-parcours__leaves {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.mat-parcours__leaf-left,
.mat-parcours__leaf-right {
	position: absolute;
	display: block;
	height: auto;
}
.mat-parcours__leaf-left {
	width: 219px;
	left: -60px;
	bottom: -150px; /* 50% de 219 sous le container */
}
.mat-parcours__leaf-right {
	width: 321px;
	right: -90px;
	top: -80px; /* 50% de 321 au-dessus du grid */
}

.mat-parcours__header {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	margin: 0 0 64px;
}
.mat-parcours__title {
	margin: 0;
	color: var(--mat-rose-blush);
	font-family: "Poppins", var(--mat-font-sans);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

.mat-parcours__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mat-card {
	background: #fff;
	border: 1px solid var(--mat-rose-clair);
	border-radius: 30px;
	box-shadow: 0 4px 42.9px rgba(198, 129, 122, 0.10);
	padding-bottom: 36px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 48px rgba(198, 129, 122, 0.15);
}
.mat-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.mat-card__link:hover { text-decoration: none; }

.mat-card__image {
	height: 160px;
	overflow: hidden;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}
.mat-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mat-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mat-rose-clair), var(--mat-vert-bleu));
}

.mat-card__body {
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mat-card__icon {
	width: 42px;
	height: auto;
	margin-bottom: 8px;
}
.mat-card__title {
	margin: 0;
	color: var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-size: 18px;
	font-weight: 700;
}
.mat-card__text {
	margin: 0;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.46;
}
.mat-card__text strong {
	font-weight: 700;
}
.mat-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 16px;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	line-height: 21.88px;
}
.mat-card__cta svg { display: inline-block; }

@media (max-width: 1024px) {
	.mat-parcours { padding: 48px var(--mat-container-pad) 96px; }
	.mat-parcours__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.mat-parcours__title { font-size: 22px; }
	.mat-parcours__leaf-left  { width: 130px; }
	.mat-parcours__leaf-right { width: 180px; }
}
@media (max-width: 640px) {
	.mat-parcours__leaf-left,
	.mat-parcours__leaf-right { display: none; }
}

/* =========================================================================
 * Pages CPT / templates Maternité
 * ========================================================================= */

.mat-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 48px var(--mat-container-pad);
}
.mat-page .entry-header { margin-bottom: 24px; }
.mat-page .entry-title { color: var(--mat-bleu-fonce); margin: 0 0 12px; }

.mat-pill {
	display: inline-block;
	padding: 4px 12px;
	background: var(--mat-rose-clair);
	color: var(--mat-rose-blush);
	border-radius: var(--mat-radius-pill);
	font-size: 13px;
	font-weight: 700;
}
.mat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.mat-pill--invasif { background: #fdecec; color: #b23a3a; }
.mat-pill--imagerie { background: #e8f1ff; color: #2a4a8a; }

.mat-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	background: var(--mat-rose-clair);
	border-radius: 12px;
	padding: 20px;
	margin: 24px 0;
}
.mat-meta-grid strong { color: var(--mat-rose-blush); }

.mat-notice { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.mat-notice--warn { background: #FFF4E5; border-left: 4px solid var(--mat-jaune); }

.mat-cta { margin-top: 32px; }
.mat-cta .button-primary {
	display: inline-block;
	padding: 14px 28px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill);
	font-weight: 700;
	border: none;
}

.mat-list { padding-left: 20px; }
.mat-list--ok li::marker { color: #4a9d6c; }
.mat-list--ko li::marker { color: #b23a3a; }
.mat-list--links li { word-break: break-all; }

.mat-resume {
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	padding: 16px 20px;
	border-radius: 8px;
	margin: 24px 0;
}

/* =========================================================================
 * Footer
 * ========================================================================= */

.site-footer {
	background: var(--mat-bleu-fonce);
	color: #fff;
	padding: 32px var(--mat-container-pad);
	text-align: center;
	margin-top: 64px;
}
.site-footer a { color: #fff; }

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

/* =========================================================================
 * Responsive (≤ 1024px) — menu mobile
 * ========================================================================= */

@media (max-width: 1024px) {

	/* Header : logo à gauche, actions (recherche + burger) à droite */
	.mat-header__inner {
		grid-template-columns: 1fr auto;
		gap: 16px;
		padding: 12px var(--mat-container-pad);
	}
	.mat-header__logo img { max-height: 56px; }

	/* Le bloc droit desktop (topbar + nav + recherche inline) est masqué :
	   c'est le panneau latéral qui le remplace en mobile. */
	.mat-header__right { display: none; }

	/* Actions mobiles dans la barre du header */
	.mat-mobile-actions {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.mat-nav-toggle { display: inline-flex; }
	.mat-mobile-search-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: var(--mat-bleu-fonce);
		cursor: pointer;
	}
	.mat-mobile-search-btn svg { width: 22px; height: 22px; }
	.mat-mobile-search-btn:hover { background: var(--mat-rose-clair); }

	/* ----- Panneau latéral (slide-in droite, façon CHRU) ----- */
	.mat-mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(20, 68, 107, 0.45);
		z-index: 998;
	}
	.mat-mobile-overlay[hidden] { display: none; }

	.mat-mobile-menu {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 86%;
		max-width: 360px;
		background: #fff;
		z-index: 999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	/* Ombre posée seulement menu ouvert : fermé, le panneau est translaté hors
	   écran mais son ombre débordait à gauche sur tout le site (retour Marie
	   KUSY du 22/09/2026). */
	.mat-mobile-menu.is-open {
		transform: translateX(0);
		box-shadow: -8px 0 24px rgba(20, 68, 107, 0.12);
	}

	.mat-mobile-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid var(--mat-gris-border-soft);
	}
	.mat-mobile-menu__logo img { max-height: 48px; width: auto; }
	.mat-mobile-menu__close {
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--mat-bleu-fonce);
		padding: 8px;
		border-radius: 8px;
	}
	.mat-mobile-menu__close:hover { background: var(--mat-rose-clair); }
	.mat-mobile-menu__close svg { width: 24px; height: 24px; }

	.mat-mobile-menu__body { padding: 18px; }

	.mat-mobile-menu__section { margin-bottom: 22px; }
	.mat-mobile-menu__section-title {
		font-size: 0.6875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--mat-rose-blush);
		margin-bottom: 8px;
	}

	/* Liens simples (La maternité / Professionnels) */
	.mat-mobile-menu__links {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mat-mobile-menu__links li { border-bottom: 1px solid var(--mat-gris-border-soft); }
	.mat-mobile-menu__links a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 0;
		color: var(--mat-bleu-fonce);
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
	}
	.mat-mobile-menu__links a:hover { color: var(--mat-rose-blush); text-decoration: none; }
	.mat-mobile-menu__pro img { width: 18px; height: 18px; }

	/* Navigation principale dans le panneau (icônes fleurs + accordéon) */
	.mat-mobile-menu__nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mat-mobile-menu__nav > li { border-bottom: 1px solid var(--mat-gris-border-soft); }
	.mat-mobile-menu__nav > li > a,
	.mat-mobile-menu__nav > li > .mat-nav__toggle {
		display: flex;
		width: 100%;
		align-items: center;
		gap: 10px;
		padding: 13px 0;
		color: var(--mat-bleu-fonce);
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
	}
	.mat-mobile-menu__nav > li > a:hover,
	.mat-mobile-menu__nav > li > .mat-nav__toggle:hover { color: var(--mat-rose-blush); text-decoration: none; }
	.mat-mobile-menu__nav .mat-nav__icon img { width: 22px; height: 22px; }

	/* Chevron = bouton d'accordéon (zone de tap large) */
	.mat-mobile-menu__nav .mat-nav__chevron {
		margin-left: auto;
		padding: 8px;
		box-sizing: content-box;
		transition: transform 0.2s ease;
	}
	.mat-mobile-menu__nav > li.is-submenu-open > a .mat-nav__chevron,
	.mat-mobile-menu__nav > li.is-submenu-open > .mat-nav__toggle .mat-nav__chevron { transform: rotate(180deg); }

	/* Sous-menus : repliés par défaut, ouverts au clic sur le chevron */
	.mat-mobile-menu__nav .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0 0 0 32px;
		display: none;
		/* Neutralise le déroulant desktop (absolu, ombre, opacité) : dans le
		   panneau, le sous-menu est un accordéon dans le flux. */
		position: static;
		min-width: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.mat-mobile-menu__nav > li.is-submenu-open > .sub-menu {
		display: block;
		padding: 0 0 10px 32px;
	}
	.mat-mobile-menu__nav .sub-menu a {
		display: block;
		padding: 9px 0;
		font-size: 0.875rem;
		font-weight: 400;
		color: var(--mat-bleu-fonce);
	}
	.mat-mobile-menu__nav .sub-menu a:hover { color: var(--mat-rose-blush); text-decoration: none; }

	/* Téléphone */
	.mat-mobile-menu__phone {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 0;
		border-top: 1px solid var(--mat-gris-border-soft);
		color: var(--mat-bleu-fonce);
	}
	.mat-mobile-menu__phone > img { width: 22px; height: auto; flex-shrink: 0; }
	.mat-mobile-menu__phone-label {
		display: block;
		font-size: 0.75rem;
		color: var(--mat-gris-texte, #929292);
	}
	.mat-mobile-menu__phone-number {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--mat-rose-blush);
		text-decoration: none;
	}

	/* Bouton Urgences */
	.mat-mobile-menu__urgences {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: #DA1500;
		color: #fff;
		text-decoration: none;
		font-weight: 700;
		padding: 14px;
		border-radius: 30px;
		margin-top: 6px;
	}
	.mat-mobile-menu__urgences:hover { background: #b81200; text-decoration: none; }
	.mat-mobile-menu__urgences img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

	/* Hero : illustration au-dessus, contenu en flow */
	.mat-hero { min-height: auto; }
	.mat-hero__inner {
		grid-template-columns: 1fr;
		padding: 32px var(--mat-container-pad) 40px;
		min-height: auto;
	}
	.mat-hero__content { grid-column: 1; max-width: 100%; order: 2; }
	.mat-hero__visual {
		position: relative;
		width: 100%;
		height: auto;
		left: auto; top: auto; bottom: auto;
		aspect-ratio: 603 / 493;
		order: 1;
		margin-bottom: 24px;
	}
	.mat-hero__bg-shape { opacity: 0.6; }
	.mat-hero__bg-group { display: none; }
	/* En colonne, la photo est dans le flux au-dessus du texte : pas de découpe. */
	.mat-hero__wave { display: none; }
	/* Le coin haut droit recouvrirait la photo, passée au-dessus du texte. */
	.mat-hero__deco-tr { display: none; }
}

@media (max-width: 768px) {
	.mat-search input[type="search"] { font-size: 14px; }
}

/* =========================================================================
 * Page Histoire (.mat-histoire)
 * ========================================================================= */

.mat-histoire { background: #fff; color: var(--mat-bleu-fonce); }

/* Wrapper interne réutilisable pour caler le contenu à 1440px max. */
.mat-hh-wrap {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
}

/* ----- Hero bannière -------------------------------------------------- */

.mat-hh-hero {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.mat-hh-hero__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1440 / 380;
	background: var(--mat-rose-clair);
}
.mat-hh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* vague décorative en bas de bannière — courbe sinusoïdale fillée à la couleur du bloc rose */
.mat-hh-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 90px;
	display: block;
	pointer-events: none;
}
.mat-hh-hero__content {
	width: 100%;
	margin: 0;
	padding: 56px var(--mat-container-pad) 225px; /* bas = chevauchement slider (100px) + gap CTA→slider (125px) */
	background: var(--mat-rose-clair);
	text-align: center;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}
.mat-hh-hero__decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.mat-hh-hero__decor--l { left: 5%; top: 40%; width: 90px; transform: rotate(-12deg); }
.mat-hh-hero__decor--r { right: 0; top: 28%; width: 130px; }
.mat-hh-hero__head,
.mat-hh-hero__cta { position: relative; z-index: 1; }
.mat-hh-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.mat-hh-hero__title {
	font-family: var(--mat-font-script);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.07;
	color: var(--mat-bleu-fonce);
	margin: 0;
}
.mat-hh-hero__lead {
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--mat-bleu-fonce);
	opacity: 0.9;
	max-width: 941px;
	margin: 0 auto;
}
.mat-hh-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 37px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill);
	font-weight: 700;
	font-size: 15px;
	line-height: 20.52px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mat-hh-hero__cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--mat-shadow-soft); }
.mat-hh-hero__cta svg { transform: translateY(1px); }

/* ----- Avant / après ------------------------------------------------- */

.mat-hh-ba {
	padding: 0 var(--mat-container-pad) 64px;
	margin-top: -100px; /* chevauche le bloc rose au dessus */
	position: relative;
	z-index: 2;
}
.mat-hh-ba__inner { max-width: 900px; margin: 0 auto; }
.mat-hh-ba__tag { display: none; } /* étiquettes hier / aujourd'hui masquées */
.mat-hh-ba__compare {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	user-select: none;
	box-shadow: var(--mat-shadow-soft);
	background: var(--mat-rose-clair);
	cursor: ew-resize;
}
.mat-hh-ba__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.mat-hh-ba__layer img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.mat-hh-ba__layer--after {
	clip-path: inset(0 0 0 50%);
	transition: clip-path 0s;
}
.mat-hh-ba__tag {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: var(--mat-radius-pill);
	background: rgba(20, 68, 107, 0.85);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.mat-hh-ba__tag--left { left: 16px; }
.mat-hh-ba__tag--right { right: 16px; }

.mat-hh-ba__handle {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	background: #fff;
	border: 0;
	padding: 0;
	cursor: ew-resize;
	z-index: 3;
	box-shadow: 0 0 0 1px rgba(20, 68, 107, 0.15);
}
.mat-hh-ba__handle img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	max-width: none; /* surcharge la règle globale img { max-width: 100% } qui clampait à 4px (largeur du handle) */
	transform: translate(-50%, -50%);
	pointer-events: none;
	filter: drop-shadow(0 6px 16px rgba(20, 68, 107, 0.35));
	z-index: 4;
}

/* ----- Bloc intro --------------------------------------------------- */

.mat-hh-intro {
	position: relative;
	padding: 0 var(--mat-container-pad) 72px;
	background: #fff;
}
.mat-hh-intro__inner {
	max-width: 1054px;
	margin: 0 auto;
	text-align: center;
	color: var(--mat-bleu-fonce);
	font-family: var(--mat-font-sans);
	font-size: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mat-hh-intro__p1 {
	font-weight: 600;
	margin: 0;
}
.mat-hh-intro__p2 {
	font-weight: 700;
	line-height: 23.36px;
	margin: 0;
}

/* ----- Frise chronologique ------------------------------------------ */

.mat-hh-tl {
	background: var(--mat-aplat-bleu-vert);
	padding: 56px var(--mat-container-pad) 72px;
}
.mat-hh-tl__heading {
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 24px;
	color: var(--mat-rose-blush);
	text-align: center;
	margin: 0 0 77px;
}
.mat-hh-tl__rail {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	position: relative;
	padding: 0 0 32px;
	overflow: visible;
}
.mat-hh-tl__items {
	display: flex;
	gap: 32px;
	padding: 0 8px;
	margin: 0 0 28px;
	list-style: none;
	min-width: max-content;
	justify-content: space-between;
	align-items: flex-end;
}
.mat-hh-tl__line {
	position: relative;
	height: 0;
	border-top: 1px solid var(--mat-rose-blush);
	opacity: 0.9;
	margin: 0;
}
.mat-hh-tl__leaf {
	position: absolute;
	bottom: 22px;
	left: 8%;
	width: 64px;
	height: auto;
	max-width: none;
	pointer-events: none;
	transform: translateY(50%);
}
.mat-hh-tl__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--mat-font-sans);
}
.mat-hh-tl__year {
	font-family: var(--mat-font-script);
	font-weight: 700;
	font-size: 30px;
	color: var(--mat-rose-blush);
	line-height: 1;
	transition: opacity 0.2s ease;
	opacity: 0.85;
}
.mat-hh-tl__thumb {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mat-rose-clair);
	box-shadow: none;
	border: 0;
	box-sizing: content-box;
	padding: 0;
	transition: padding 0.2s ease, outline 0.2s ease;
}
.mat-hh-tl__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
	max-width: none;
}
/* Active : cercle outline 3px rose à 5px de l'image (boîte 120px) */
.mat-hh-tl__item.is-active .mat-hh-tl__thumb {
	padding: 5px;
	outline: 3px solid var(--mat-rose-blush);
	outline-offset: 0;
	background: transparent;
}
.mat-hh-tl__item.is-active .mat-hh-tl__year { opacity: 1; }
.mat-hh-tl__btn:hover .mat-hh-tl__year { opacity: 1; }

/* Panneau année actif */
.mat-hh-tl__panels {
	max-width: var(--mat-container-max);
	margin: 32px auto 0;
}
.mat-hh-year {
	position: relative;
	padding: 24px 0;
}
.mat-hh-year[hidden] { display: none; }
.mat-hh-year__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 60px;
	align-items: start;
}
.mat-hh-year__media { grid-column: 1; grid-row: 1; margin: 0; }
.mat-hh-year__body  { grid-column: 2; grid-row: 1; margin: 0; max-width: 540px; }
.mat-hh-year__extra {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce);
	line-height: 1.5;
}
.mat-hh-year__extra p { margin: 0; }
.mat-hh-year__extra strong { font-weight: 700; line-height: 23.36px; }
.mat-hh-year__side  { grid-column: 2; grid-row: 2; margin: 0; max-width: 460px; justify-self: end; }
.mat-hh-year__media img,
.mat-hh-year__side img {
	width: 100%;
	border-radius: 4px;
	display: block;
}
.mat-hh-year__media figcaption,
.mat-hh-year__side figcaption {
	margin-top: 12px;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	font-style: italic;
	color: var(--mat-bleu-fonce);
	line-height: 1.4;
}
.mat-hh-year__body {
	font-family: var(--mat-font-sans);
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mat-hh-year__year {
	font-family: var(--mat-font-script);
	font-size: clamp(36px, 4vw, 56px);
	color: var(--mat-rose-blush);
	margin: 0;
	line-height: 1;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--mat-rose-blush);
}
.mat-hh-year__title {
	font-family: "Poppins", var(--mat-font-sans);
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-rose-blush);
	margin: 14px 0 0;
}
.mat-hh-year__body p { margin: 0; }
.mat-hh-year__body strong { font-weight: 700; line-height: 23.36px; }

/* ----- Navigation chevrons (style aligné carrousel agenda) ---------- */

.mat-hh-nav {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
	max-width: var(--mat-container-max);
	margin: 24px auto 0;
	padding: 0 var(--mat-container-pad);
}
.mat-hh-nav__btn {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	transition: transform 0.2s ease;
}
.mat-hh-nav__btn svg { display: block; }
.mat-hh-nav__btn:hover { transform: scale(1.06); }
.mat-hh-tl__nav { margin-top: 16px; }

/* ----- Fondateurs --------------------------------------------------- */

.mat-hh-founders {
	position: relative;
	padding: 64px var(--mat-container-pad);
	background: #fff;
	overflow: hidden;
}
.mat-hh-founders__decor {
	position: absolute;
	pointer-events: none;
	opacity: 0.85;
}
.mat-hh-founders__decor--l { left: 2%; top: 18%; width: 70px; transform: rotate(-15deg); }
.mat-hh-founders__decor--r { right: 2%; top: 50%; width: 100px; }
.mat-hh-founders__heading {
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 24px;
	color: var(--mat-rose-blush);
	max-width: var(--mat-container-max);
	margin: 0 auto 32px;
	padding: 0 var(--mat-container-pad);
}
.mat-hh-founders__viewport {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	overflow: hidden;
}
.mat-hh-founders__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.35s ease;
}
.mat-hh-card {
	background: #fff;
	outline: 1px solid rgba(170, 99, 100, 0.24);
	outline-offset: -1px;
	box-shadow: 0 4px 63.4px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 0 0 36px;
	overflow: hidden;
}
.mat-hh-card__media { margin: 0; width: 100%; aspect-ratio: 468 / 366; overflow: hidden; background: var(--mat-rose-clair); }
.mat-hh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-hh-card__body {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}
.mat-hh-card__name {
	font-family: var(--mat-font-sans);
	font-size: 24px;
	font-weight: 700;
	color: var(--mat-rose-blush);
	margin: 0;
}
.mat-hh-card__role {
	font-family: var(--mat-font-sans);
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-rose-blush);
	margin: 0;
	line-height: 1.2;
}
.mat-hh-card__text {
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce);
	margin: 0;
}
.mat-hh-card__text strong { font-weight: 700; line-height: 23.36px; }
.mat-hh-founders__nav { margin-top: 32px; }

/* ----- Responsive --------------------------------------------------- */

/* Tablette (≤ 1024px) -------------------------------------------------*/
@media (max-width: 1024px) {
	.mat-hh-hero__content { padding: 48px 20px 180px; gap: 28px; }
	.mat-hh-hero__decor--l { width: 70px; }
	.mat-hh-hero__decor--r { width: 100px; }

	.mat-hh-ba { margin-top: -80px; padding: 0 20px 48px; }

	.mat-hh-tl__items { gap: 20px; padding: 0; }
	.mat-hh-tl__thumb { width: 88px; height: 88px; }
	.mat-hh-tl__item.is-active .mat-hh-tl__thumb { padding: 4px; outline-width: 2px; }
	.mat-hh-tl__year { font-size: 24px; }
	.mat-hh-tl__leaf { width: 48px; }

	.mat-hh-year__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.mat-hh-year__body  { grid-column: 1; grid-row: 2; max-width: 100%; }
	.mat-hh-year__extra { grid-column: 1; grid-row: 3; }
	.mat-hh-year__side  { grid-column: 1; grid-row: 4; justify-self: start; max-width: 340px; }

	.mat-hh-founders__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

/* Mobile (≤ 720px) ----------------------------------------------------*/
@media (max-width: 720px) {
	.mat-hh-hero__media { aspect-ratio: 4 / 3; }
	.mat-hh-hero__content {
		padding: 36px 18px 150px;
		gap: 24px;
	}
	.mat-hh-hero__title { font-size: 28px; line-height: 1.1; }
	.mat-hh-hero__lead { font-size: 14px; }
	.mat-hh-hero__cta { font-size: 13px; padding: 0 24px; height: 40px; }
	.mat-hh-hero__decor { display: none; } /* fleurs masquées en mobile */

	.mat-hh-ba { margin-top: -60px; padding: 0 16px 32px; }
	.mat-hh-ba__compare { aspect-ratio: 4 / 3; }
	.mat-hh-ba__handle img { width: 60px; height: 60px; }

	.mat-hh-intro { padding: 0 16px 48px; }
	.mat-hh-intro__inner { font-size: 14px; }

	.mat-hh-tl { padding: 40px 16px 56px; }
	.mat-hh-tl__heading { font-size: 18px; margin-bottom: 40px; }
	/* La frise devient un scroll horizontal */
	.mat-hh-tl__rail { overflow-x: auto; padding-bottom: 24px; -webkit-overflow-scrolling: touch; }
	.mat-hh-tl__items {
		justify-content: flex-start;
		gap: 16px;
		min-width: max-content;
		margin-bottom: 20px;
	}
	.mat-hh-tl__thumb { width: 72px; height: 72px; }
	.mat-hh-tl__year { font-size: 20px; }
	.mat-hh-tl__leaf { width: 40px; left: 4%; }

	.mat-hh-year__year { font-size: 36px; }
	.mat-hh-year__title { font-size: 18px; }
	.mat-hh-year__body,
	.mat-hh-year__extra { font-size: 15px; }

	.mat-hh-founders { padding: 48px 16px; overflow: visible; }
	.mat-hh-founders__heading { font-size: 18px; }
	.mat-hh-founders__track { grid-auto-columns: 100%; gap: 16px; }
	.mat-hh-card__body { padding: 0 18px; }
	.mat-hh-card__name { font-size: 20px; }
	.mat-hh-card__role { font-size: 17px; }
	.mat-hh-card__text { font-size: 15px; }

	.mat-hh-nav { padding: 0 16px; }
	.mat-hh-nav__btn svg { width: 38px; height: 38px; }
}

/* Petit mobile (≤ 480px) ---------------------------------------------*/
@media (max-width: 480px) {
	.mat-hh-hero__title { font-size: 24px; }
	.mat-hh-hero__content { padding-bottom: 130px; }
	.mat-hh-tl__thumb { width: 64px; height: 64px; }
	.mat-hh-tl__year { font-size: 18px; }
	.mat-hh-ba__handle img { width: 52px; height: 52px; }
}


/* =========================================================================
   Footer — Maternité
   ========================================================================= */
.mat-footer {
	position: relative;
	background: #D6E9EC;
	color: var(--mat-bleu-fonce);
	padding: 60px 0 32px;
	overflow: hidden;
	font-family: var(--mat-font-sans);
}

.mat-footer__inner {
	position: relative;
	z-index: 2;
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 80px;
}

/* Décor SVG bas-gauche */
.mat-footer__deco {
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(220px, 22vw, 320px);
	height: auto;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

/* Bloc top : grille 3 colonnes x 2 rangées */
.mat-footer__top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 48px;
	align-items: start;
}

.mat-footer__brand {
	display: flex;
	align-items: flex-end;
	gap: 36px;
}
.mat-footer__logo img {
	display: block;
	max-width: 166px;
	height: auto;
}
.mat-footer__partner {
	display: block;
	max-width: 87px;
	height: auto;
}

.mat-footer__col { min-width: 0; }

.mat-footer__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.mat-footer__row--phone { align-items: center; }
.mat-footer__row-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mat-footer__icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
}

.mat-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--mat-bleu-fonce);
	text-decoration: underline;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}
.mat-footer__link:hover { text-decoration: none; }
.mat-footer__arrow { flex-shrink: 0; }

.mat-footer__address {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.mat-footer__parking-text {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}
.mat-footer__parking-text strong { font-weight: 700; }

.mat-footer__phone {
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	text-decoration: none;
}
.mat-footer__phone-label {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.mat-footer__phone-hours {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.mat-footer__news-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.mat-footer__news-handle {
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.mat-footer__news-handle:hover { text-decoration: underline; }

.mat-footer__divider {
	border: 0;
	border-top: 1px solid rgba(20, 68, 107, 0.20);
	margin: 32px 0;
}

/* Nav 3 colonnes */
.mat-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 48px;
}
.mat-footer__nav-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mat-footer__nav-col a {
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
}
.mat-footer__nav-col a:hover { text-decoration: none; }

/* Bottom : accessibilité | éco | mentions */
.mat-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}
.mat-footer__bottom > * { flex: 0 0 auto; min-width: 0; }
.mat-footer__eco { flex: 0 1 auto; }
.mat-footer__accessibility {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}
.mat-footer__eco {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}
.mat-footer__eco a {
	color: var(--mat-bleu-fonce);
	text-decoration: underline;
}
.mat-footer__leaf { flex-shrink: 0; }

.mat-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mat-footer__legal a {
	color: var(--mat-bleu-fonce);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}
.mat-footer__legal a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1024px) {
	.mat-footer__inner { padding: 0 40px; }
	.mat-footer__top,
	.mat-footer__nav { grid-template-columns: repeat(2, 1fr); }
	.mat-footer__bottom { flex-direction: column; align-items: flex-start; }
	.mat-footer__eco { justify-content: flex-start; }
	.mat-footer__legal { justify-content: flex-start; }
}
@media (max-width: 640px) {
	.mat-footer { padding: 40px 0 24px; }
	.mat-footer__inner { padding: 0 20px; }
	.mat-footer__top,
	.mat-footer__nav { grid-template-columns: 1fr; }
	.mat-footer__deco { display: none; }
}

/* =========================================================================
 * Template "page-default" — Page standard (modèle par défaut)
 *
 * Specs Figma :
 *   - Hero : 1280 × 340 fixe (object-fit cover)
 *   - Titre : Coniferous 46/600 bleu-foncé, filet rose 139×2
 *   - Breadcrumb : Open Sans 16/600 rose-blush (current : 700)
 *   - Sommaire : titre 20/700 rose-blush + chevron, items 16/600 bleu-foncé,
 *               actif 18/700 rose-blush souligné + pin
 *   - Card ressource : 354×~101 fond #FFF5F3, border #FFD6CF, pastille 40 rose-blush
 *   - Gaps tête : breadcrumb → titre 24px, titre → filet 24px
 * ========================================================================= */

.mat-page-std {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
	color: var(--mat-bleu-fonce);
}

/* ---- En-tête : breadcrumb + titre + filet ---- */
.mat-page-std__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-top: 39px;
	text-align: center;
}

.mat-breadcrumb { margin: 0; }
.mat-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mat-rose-blush);
}
.mat-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.mat-breadcrumb__item a,
.mat-breadcrumb__item span { color: inherit; text-decoration: none; }
.mat-breadcrumb__item a:hover { text-decoration: underline; }
.mat-breadcrumb__item.is-current { font-weight: 700; }
.mat-breadcrumb__sep { margin: 0 6px; }

.mat-page-std__title {
	margin: 0;
	font-family: "Coniferous", var(--mat-font-script);
	font-weight: 600;
	font-size: 46px;
	line-height: 1;
	color: var(--mat-bleu-fonce);
}
.mat-page-std__title-line {
	display: block;
	width: 139px;
	height: 2px;
	background: var(--mat-rose-blush);
}

/* ---- Hero ---- */
.mat-page-std__hero {
	position: relative;
	margin: 48px 0 0;
	/* Retour Marie KUSY du 11/08/2026 : « l'image doit aller jusqu'a la meme
	   limite que les blocs du corps de texte pour que tout soit aligne ».
	   Le max-width de 1280px la rentrait de 56px de chaque cote par rapport a
	   la grille (.mat-page-std__body fait 1392px dans un conteneur de 1440).
	   On la laisse remplir le conteneur : c'est lui qui porte deja la marge. */
}
.mat-page-std__hero-img {
	display: block;
	width: 100%;
	/* Retour Marie KUSY du 11/08/2026 (16h37) : « je fais le test avec une photo
	   lambda et elle est systematiquement rognee ».
	   Mesure sur sa photo (2560x1707, ratio 1,50) : la boite faisait 1392x340,
	   soit un ratio de 4,09 — `object-fit: cover` n'en laissait voir que
	   36,6 %, une bande horizontale au milieu du sujet. Le probleme est
	   ANTERIEUR a l'elargissement du hero (39,9 % avant), il etait juste moins
	   voyant.
	   On passe d'une HAUTEUR FIXE a un RATIO : la banniere reste une banniere,
	   mais montre 50 % de la photo (464px de haut a 1392 de large), et sur
	   mobile elle se rapproche du cadrage d'origine.
	   ⚠️ C'est le seul reglage a toucher si le rendu doit etre plus haut ou
	   plus plat : 3/1 = 50 % visible, 2,6/1 = 58 %, 4/1 = 37 % (l'ancien). */
	aspect-ratio: 3 / 1;
	height: auto;
	min-height: 200px;
	max-height: 520px;
	object-fit: cover;
}
.mat-page-std__hero-decor {
	position: absolute;
	/* Décalé à gauche du crédit photo, qui occupe le coin bas droit de l'image
	   (doc Marie KUSY du 31/08/2026 : le décor passait dessus). */
	right: calc(8% + 120px);
	bottom: -18px;
	pointer-events: none;
}
/* Aucune taille n'était posée : le SVG sortait à 220px, en plein sur la photo. */
.mat-page-std__hero-decor-img {
	display: block;
	width: 104px;
	height: auto;
}

/* ---- Layout 2 colonnes ---- */
.mat-page-std__body {
	display: grid;
	grid-template-columns: 354px 1fr;
	gap: 64px;
	margin: 61px 0 80px;
	align-items: start;
}

/* ---- Variante sans sommaire : contenu pleine largeur centré ---- */
.mat-page-std__body--simple {
	display: block;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.mat-page-std__body--simple .mat-page-std__content { min-width: 0; }

/* ---- Sidebar : conteneur transparent (les blocs internes ont leur propre fond) ---- */
.mat-page-std__sidebar {
	min-width: 0; /* évite le débordement horizontal des grid-items (min-width:auto par défaut) */
	position: sticky;
	/* Ecart sous le header, repris du CHRU (retour Thomas du 21/09/2026 :
	   « gap sommaire header incorrect, base toi sur le chru »).
	   `chru-nancy/assets/css/components.css` :
	       top: calc(var(--header-height, 150px) + 20px)
	   Ici la hauteur du header est MESUREE par `maternite.js` (--mat-header-h,
	   134px aujourd'hui) plutot que codee en dur : le 114px d'origine avait ete
	   cale en juin sur un header de ~90px, le sommaire passait donc SOUS le
	   header au defilement. Meme correction que le `scroll-padding-top` des
	   ancres le 11/08. */
	top: calc(var(--mat-header-h, 134px) + 20px);
	/* si le sommaire est plus haut que le viewport, il scrolle proprement au lieu d'être coupé */
	max-height: calc(100vh - var(--mat-header-h, 134px) - 40px);
	overflow-y: auto;
	background: transparent;
	padding: 0;
}

/* ---- Bloc Sommaire (carte rose-clair indépendante) ---- */
.mat-page-std__toc {
	background: var(--mat-rose-clair);
	padding: 32px 32px 36px;
	/* Arrondi demande par Thomas le 21/09/2026. Le CHRU est a 14px
	   (`--radius-md`) ; ici on prend la variable de carte du site, posee le
	   11/08 pour unifier les arrondis a la demande de Marie — le sommaire est
	   une carte comme les autres. */
	border-radius: var(--mat-card-radius, 20px);
}

.mat-page-std__toc-head { margin-bottom: 36px; }
.mat-page-std__toc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 27px;
	color: var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
}
.mat-page-std__toc-icon {
	display: inline-flex;
	color: var(--mat-rose-blush);
}
.mat-page-std__toc-rule {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--mat-rose-blush);
	opacity: 0.4;
}

.mat-page-std__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* 10px = valeur mesuree sur .chru-sommaire__list (retour Marie KUSY du
	   11/08/2026 : « le meme espace que sur les sommaires du CHRU »). */
	gap: 10px;
}
.mat-page-std__toc-list a {
	display: inline-flex;
	/* flex-start et non center : sur un item qui passe a la ligne, le chevron
	   se retrouvait a mi-hauteur du bloc de texte, ce qui cassait le rythme
	   vertical de la liste (c'est ce que montre la capture du retour). */
	align-items: flex-start;
	gap: 6px;
	color: var(--mat-bleu-fonce);
	text-decoration: none;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.15s ease;
}
.mat-page-std__toc-list a:hover { color: var(--mat-rose-blush); }

/* Chevrons visibles sur TOUS les items + item actif = changement de couleur
   seul (pas de soulignement, pas de saut de taille) — aligné sur le
   comportement du sommaire CHRU (.chru-sommaire), retour Marie 2026-07-08. */
.mat-page-std__toc-marker {
	display: inline-flex;
	width: 10px;
	height: 14px;
	margin-top: 3px; /* recale le chevron sur la 1re ligne de texte */
	color: var(--mat-rose-blush);
	flex: 0 0 auto;
}
.mat-page-std__toc-list a.is-active {
	color: var(--mat-rose-blush);
	font-weight: 700;
}

/* ---- Bloc Ressources (label + cards) ---- */
.mat-page-std__ressources { margin-top: 32px; }
.mat-page-std__ressources-title {
	margin: 0 0 32px;
	padding-left: 10px;
	border-left: 3px solid var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-size: 18px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	line-height: 1.3;
}
.mat-page-std__ressources-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---- Card "Ressource à télécharger" (mutualisée template + Gutenberg) ----
   Parité CHRU 2026-07-10 : la carte reprend le design du bloc documents-list
   du site principal (carte blanche arrondie + ombre, icône document bleu
   foncé, séparateur vertical, méta grise, action à droite). Seul l'accent
   hover passe en rose blush (palette Maté). */
.mat-res-card {
	position: relative;
	width: 100%;
	max-width: 540px;
	box-sizing: border-box;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(20, 67, 106, 0.12);
	border-radius: 8px;
	box-shadow: 0 4px 35px rgba(191, 191, 191, 0.25);
	display: flex;
	align-items: center;
	gap: 14px;
}
.mat-res-card__icon {
	position: static;
	flex-shrink: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--mat-bleu-fonce, #14446B);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-right: 14px;
	border-right: 1px solid rgba(14, 45, 148, 0.12); /* séparateur vertical façon CHRU */
}
.mat-res-card__icon img,
.mat-res-card__icon svg {
	width: 27px;
	height: 33px;
	filter: none;
}
.mat-res-card__body {
	min-width: 0;
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
	row-gap: 6px;
}
.mat-res-card__title {
	grid-column: 1;
	margin: 0;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 21.76px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mat-res-card__meta {
	grid-column: 1;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #6F6F6F; /* ≈5.1:1 sur blanc (AA), aligné CHRU */
	font-family: var(--mat-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 17.78px;
}
.mat-res-card__sep {
	display: inline-block;
	width: 1px;
	height: 13px;
	background: rgba(20, 67, 106, 0.12);
	opacity: 1;
}
.mat-res-card__actions {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 18px;
}
.mat-res-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6F6F6F;
	text-decoration: none;
	font-family: var(--mat-font-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 17.78px;
	transition: color 200ms ease;
}
.mat-res-card__action:hover,
.mat-res-card__action:focus-visible { color: var(--mat-rose-blush); }
.mat-res-card__action-icon { display: inline-flex; color: currentColor; }

/* Card insérée comme bloc Gutenberg dans le flux (pleine largeur du contenu) */
.mat-page-std__content .mat-res-card,
.wp-block-maternite-ressource .mat-res-card { width: 100%; max-width: 540px; }

/* ---- Contenu ---- */
.mat-page-std__content {
	min-width: 0; /* évite le débordement horizontal des grid-items (min-width:auto par défaut) */
	font-size: 16px;
	line-height: 1.65;
	color: var(--mat-bleu-fonce);
}
.mat-page-std__content > *:first-child { margin-top: 0; }
.mat-page-std__content > h2 {
	margin: 48px 0 16px;
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 24px;
	color: var(--mat-bleu-fonce);
	scroll-margin-top: 24px;
}
.mat-page-std__content > h2:first-child,
.mat-page-std__content > *:first-child + h2:first-of-type { margin-top: 0; }
.mat-page-std__content > h3 {
	margin: 32px 0 12px;
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 20px;
	color: var(--mat-bleu-fonce);
}

/* ── H3 ÉDITORIAUX À 20px — parité avec le site du CHRU ──────────────────
   Demande de Marie KUSY du 14/08/2026 : « sur le site de la maternité, est-ce
   que tu peux passer les H3 à 20px (comme sur le site du CHRU) ».

   Mesuré avant correction sur 12 pages couvrant les 8 gabarits : le bloc Titre
   du rédacteur rendait TROIS tailles selon son emplacement — 18px quand il est
   enfant direct du contenu (règle ci-dessus), 18,72px dès qu'il est dans une
   colonne ou un groupe (aucune règle ne l'atteignait, il retombait sur le
   défaut du navigateur), et 20px sur les fiches événement, seul gabarit déjà
   aligné (`single-evenement.css`). La règle ci-dessous ramène les trois cas à
   la même valeur.

   ⚠️ Portée volontairement étroite : `h3.wp-block-heading` = le bloc Titre de
   Gutenberg, donc CE QUE LE RÉDACTEUR ÉCRIT. Les titres internes des blocs
   maison (`maternite-kit__title`, `maternite-timeline-step__title`,
   `mat-hh-card__name`…) n'ont pas cette classe et ne bougent pas — c'est le
   piège vécu côté CHRU le 13/08/2026, où une règle `h2` de gabarit avait fait
   grossir le titre du bloc « Fichiers et documents ».
   Le `:not(:is([class*="maternite-"] *))` reprend le patron du gabarit
   événement : il neutralise la règle si un bloc maison venait à imbriquer un
   bloc Titre.

   ⚠️ Pas de variante mobile, à la différence du CHRU (qui descend à 18px sous
   768px via `--h3-size`) : une variante n'existe sur AUCUN gabarit Maternité
   aujourd'hui, et en introduire une ici ferait diverger les pages des fiches
   événement, qui restent à 20px fixes. */
h3.wp-block-heading:not(:is([class*="maternite-"] *)) {
	font-size: 20px;
}
.mat-page-std__content > p { margin: 0 0 16px; }
.mat-page-std__content > ul,
.mat-page-std__content > ol { margin: 0 0 16px 22px; }
.mat-page-std__content > :is(p,ul,ol,h2,h3,h4) a { color: var(--mat-rose-blush); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.mat-page-std__body { grid-template-columns: 240px 1fr; gap: 40px; }
}
@media (max-width: 820px) {
	.mat-page-std__body { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
	.mat-page-std__sidebar { position: static; }
	.mat-page-std__hero-decor { right: calc(4% + 130px); transform: scale(0.75); transform-origin: bottom right; }
}
@media (max-width: 480px) {
	.mat-page-std__head { padding-top: 24px; }
	.mat-breadcrumb { margin-bottom: 24px; font-size: 12px; }
	.mat-page-std__sidebar { padding: 22px 20px; }
}

/* ---- Admin : repeater Ressources utiles ---- */
.mat-ressources-repeater__list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	min-height: 40px;
	background: #fff;
}
.mat-ressources-repeater__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f1;
}
.mat-ressources-repeater__item:last-child { border-bottom: 0; }
.mat-ressources-repeater__handle { cursor: move; color: #8c8f94; }
.mat-ressources-repeater__title { flex: 1; font-weight: 600; }
.mat-ressources-repeater__meta { color: #646970; font-size: 12px; }
.mat-ressources-repeater__remove { color: #b32d2e !important; }
.mat-ressources-repeater__placeholder { height: 44px; background: #f6f7f7; border: 1px dashed #c3c4c7; }

/* =========================================================
   Archive / Liste de services (templates/page-archive-services.php)
   ========================================================= */
.mat-arch {
	max-width: none;
	margin: 0;
	padding: 0 0 80px;
	color: var(--mat-bleu-fonce);
	background: #FFF5F3;
}
.mat-arch__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	max-width: 941px;
	margin: 0 auto;
	padding: 48px var(--mat-container-pad) 36px;
	background: #FFF5F3;
}
.mat-arch__head .mat-breadcrumb { align-self: center; }
.mat-arch__title {
	font-family: var(--mat-font-script);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.07;
	color: var(--mat-bleu-fonce);
	margin: 0;
}
.mat-arch__intro {
	opacity: 0.9;
	font-size: 16px;
	line-height: 1.46;
	font-weight: 600;
}
.mat-arch__intro p { margin: 0; }
.mat-arch__intro p + p { margin-top: 0.6em; }
.mat-arch__intro strong { font-weight: 700; }
.mat-arch__cta-wrap { margin: 0; }
.mat-arch__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 37px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.37;
	text-decoration: none;
	transition: filter .15s ease, transform .15s ease;
}
.mat-arch__cta:hover { filter: brightness(0.95); transform: translateY(-1px); }
.mat-arch__cta-icon { display: inline-block; width: 14px; height: 14px; }
.mat-arch__cta--icon-down .mat-arch__cta-icon { transform: rotate(90deg); }

.mat-arch__hero {
	position: relative;
	margin: 0 0 64px;
	width: 100%;
	max-width: none;
	overflow: hidden;
	background: var(--mat-bleu-fonce);
}
.mat-arch__hero-img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 0;
}
.mat-arch__hero-wave {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	width: 100%;
	height: 90px;
	display: block;
	pointer-events: none;
	z-index: 2;
}
.mat-arch__hero-flower {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	display: block;
	height: auto;
}
.mat-arch__hero-flower--left {
	top: -36px;
	left: 24px;
	width: 110px;
}
.mat-arch__hero-flower--right {
	top: -28px;
	right: 0;
	width: 150px;
}
@media (max-width: 960px) {
	.mat-arch__hero-img { height: 320px; }
	.mat-arch__hero-wave { height: 60px; }
	.mat-arch__hero-flower--left  { width: 80px; top: -24px; }
	.mat-arch__hero-flower--right { width: 110px; top: -20px; right: 0; }
}
@media (max-width: 720px) {
	.mat-arch__hero-img { height: 220px; }
	.mat-arch__hero-wave { height: 40px; }
	.mat-arch__hero-flower { display: none; }
}

/* Grille (revient à la grille avec padding container) */
.mat-arch__grid-wrap {
	position: relative;
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
}
.mat-arch__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 1080px) {
	.mat-arch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.mat-arch__grid { grid-template-columns: 1fr; }
}

/* Card */
.mat-arch-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--mat-rose-blush);
	border-color: #FFDED8;
	border-radius: 30px;
	box-shadow: 0 4px 42.9px rgba(198, 129, 122, 0.04);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 36px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.mat-arch-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(198, 129, 122, 0.12);
}
.mat-arch-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-indent: -9999px;
	overflow: hidden;
}
.mat-arch-card__media {
	height: 160px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.mat-arch-card--bg-rose .mat-arch-card__media { background: var(--mat-rose-clair); }
.mat-arch-card--bg-bleu .mat-arch-card__media { background: var(--mat-aplat-bleu-vert); }
.mat-arch-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mat-arch-card__decor { display: block; }

.mat-arch-card__body {
	padding: 24px 24px 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	z-index: 2;
	pointer-events: none;
}
.mat-arch-card__body > * { pointer-events: auto; }

.mat-arch-card__title {
	color: var(--mat-rose-blush);
	font-family: var(--mat-font-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.mat-arch-card__excerpt {
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}

/* Sous-liens (card "Votre arrivée" / "L'anesthésie...") */
.mat-arch-card__sublinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mat-arch-card__sublinks li { margin: 0; }
.mat-arch-card__sublinks a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.37;
	transition: color .15s ease;
}
.mat-arch-card__sublinks a:hover { color: var(--mat-rose-blush); }
.mat-arch-card__sub-bullet {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	display: inline-block;
	background: transparent;
	border: 0;
}

/* "En savoir plus →" (cards sans sous-liens) */
.mat-arch-card__more {
	margin: 0;
	text-align: right;
}
.mat-arch-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.37;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-arch-card__more a:hover { color: var(--mat-rose-blush); }
.mat-arch-card__more-icon { display: inline-flex; }

/* Contenu libre (rare) sous la grille */
.mat-arch__free {
	max-width: 820px;
	margin: 56px auto 0;
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	line-height: 1.6;
}

/* Mobile */
@media (max-width: 700px) {
	.mat-arch { padding: 24px 16px 56px; }
	.mat-arch__title { font-size: 36px; }
	.mat-arch__hero-img { height: 220px; }
}

/* =========================================================================
   SECTION INFOS PRATIQUES (accueil — Votre séjour à la Maternité)
   ========================================================================= */
.mat-infos {
	position: relative;
	margin: 128px 0 194px;
	padding: 0;
	background: transparent;
}
.mat-infos__leaf {
	position: absolute;
	top: -38px;
	right: 32px;
	width: 150px; /* 110 → 150 : « un peu trop petite » (doc Marie KUSY du 31/08/2026) */
	height: auto;
	pointer-events: none;
	z-index: 1;
}
.mat-infos__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}
.mat-infos__card {
	display: flex;
	align-items: stretch;
	background: #FFFFFF;
	border-radius: 30px;
	outline: 1px solid #FFDED8;
	outline-offset: -1px;
	box-shadow: 0 4px 42px rgba(198, 198, 198, 0.25);
	overflow: hidden;
}
.mat-infos__left {
	flex: 0 0 49%;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0 0 40px 0;
	gap: 36px;
}
/* L'image occupe tout le haut de la carte, comme le bandeau de la maquette (630×180).
   Le padding + object-fit: contain d'avant réduisait toute photo saisie en back-office
   à une vignette (524×90 mesurés, retour Coline GENAY, 23/09/2026). Les coins
   suivent l'arrondi de la carte (overflow: hidden). */
.mat-infos__media {
	height: 180px;
	padding: 0;
	box-sizing: border-box;
}
.mat-infos__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.mat-infos__intro-block {
	padding: 0 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.mat-infos__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #FFFFFF;
	border: 1px solid var(--mat-rose-blush, #9E5B5C);
	border-radius: 20px;
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}
.mat-infos__pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mat-rose-blush, #9E5B5C);
}
.mat-infos__title {
	margin: 0;
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
.mat-infos__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	line-height: 21.88px;
}
.mat-infos__cta:hover { opacity: 0.85; }
.mat-infos__cta svg { flex: 0 0 auto; }

.mat-infos__right {
	flex: 1 1 auto;
	background: var(--mat-rose-clair, #FFF5F3);
	padding: 35px 53px 35px 48px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.mat-infos__lead {
	margin: 0;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}
.mat-infos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mat-infos__item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mat-infos__bullet {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mat-vert-bleu, #99C8CF);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mat-infos__bullet img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}
.mat-infos__item-label {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	line-height: 23.36px;
}
a.mat-infos__item-label:hover { color: var(--mat-rose-blush, #9E5B5C); }

/* Tablette */
@media (max-width: 1080px) {
	.mat-infos__container { padding: 0 20px; }
	.mat-infos__left { flex-basis: 46%; }
	.mat-infos__right { padding: 28px 32px; }
}

/* Mobile : passe en colonne */
@media (max-width: 820px) {
	.mat-infos { margin: 64px 0 96px; }
	.mat-infos__leaf { width: 90px; top: -22px; right: 16px; }
	.mat-infos__card { flex-direction: column; border-radius: 24px; }
	.mat-infos__left { flex: 1 1 auto; padding-bottom: 28px; gap: 24px; }
	.mat-infos__media { height: 180px; padding: 0; }
	.mat-infos__intro-block { padding: 0 24px; }
	.mat-infos__right { padding: 28px 24px; }
}

/* =========================================================================
   SECTION SPÉCIALITÉS (accueil — Nos spécialités médicales et chirurgicales)
   ========================================================================= */
.mat-specs {
	background: #EFF6F7;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	padding: 48px 0;
}
.mat-specs__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 88px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}
.mat-specs__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.mat-specs__title {
	margin: 0;
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
.mat-specs__lead {
	margin: 0;
	max-width: 894px;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.46;
}
.mat-specs__lead-intro { font-weight: 600; }
.mat-specs__lead-strong { font-weight: 700; display: block; } /* 2e champ sur sa propre ligne (doc 31/08) */

.mat-specs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
}
.mat-specs__item { display: block; }
.mat-specs__card {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: 80px;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid var(--mat-rose-clair, #FFF5F3);
	border-radius: 12px;
	box-shadow: 0 4px 44px rgba(171, 171, 171, 0.25);
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
	overflow: hidden;
}
a.mat-specs__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 48px rgba(171, 171, 171, 0.32);
}
.mat-specs__card-label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	padding: 14px 14px 14px 36px;
}
.mat-specs__card-rail {
	flex: 0 0 89px;
	display: block;
	align-self: stretch;
	font-size: 0;
}
.mat-specs__card-rail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* Tablette */
@media (max-width: 1080px) {
	.mat-specs__container { padding: 0 32px; gap: 48px; }
	.mat-specs__card { padding-left: 24px; }
	.mat-specs__card-label { font-size: 16px; }
	.mat-specs__card-rail { flex-basis: 72px; }
}

/* Mobile : une colonne */
@media (max-width: 720px) {
	.mat-specs { padding: 36px 0; border-top-left-radius: 24px; border-top-right-radius: 24px; }
	.mat-specs__container { padding: 0 20px; gap: 32px; }
	.mat-specs__head { gap: 16px; }
	.mat-specs__title { font-size: 22px; }
	.mat-specs__grid { grid-template-columns: 1fr; gap: 12px; }
	.mat-specs__card { min-height: 70px; padding-left: 20px; }
	.mat-specs__card-rail { flex-basis: 60px; }
}

/* =========================================================================
   SECTION ARTICLES (accueil — S'informer avec les experts)
   ========================================================================= */
.mat-articles {
	background: var(--mat-rose-clair, #FFF5F3);
	padding: 96px 0 68px;
}
.mat-articles__container {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}
.mat-articles__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	max-width: 679px;
}
.mat-articles__title {
	margin: 0;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.mat-articles__slider {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}
.mat-articles__viewport {
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mat-articles__viewport::-webkit-scrollbar { display: none; }
.mat-articles__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}
.mat-articles__item {
	flex: 0 0 calc((100% - 20px) / 2);
	max-width: 631px;
	scroll-snap-align: start;
}

/* Override carte article dans le contexte home : date en rose-blush comme Figma */
.mat-articles .mat-card-article { min-height: 303px; }
.mat-articles .mat-card-article__image { width: 217px; flex: 0 0 217px; }
.mat-articles .mat-card-article__content { width: auto; flex: 1 1 auto; }
.mat-articles .mat-card-article__date { color: var(--mat-rose-blush, #9E5B5C); }
.mat-articles .mat-card-article__title { color: var(--mat-rose-blush, #9E5B5C); }

.mat-articles__nav {
	display: inline-flex;
	gap: 12px;
}
.mat-articles__btn {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: transform .15s ease;
}
.mat-articles__btn:hover { transform: translateY(-1px); }
.mat-articles__btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mat-articles__btn svg { display: block; }

/* Mobile : 1 carte par vue */
@media (max-width: 900px) {
	.mat-articles { padding: 56px 0 48px; }
	.mat-articles__container { gap: 40px; padding: 0 20px; }
	.mat-articles__title { font-size: 22px; }
	.mat-articles__item { flex-basis: 100%; }
}
@media (max-width: 600px) {
	.mat-articles .mat-card-article__link { flex-direction: column; }
	.mat-articles .mat-card-article__image { width: 100%; flex: 0 0 auto; aspect-ratio: 16/9; }
}

/* =============================================================================
 * Container utility (max 1440px, padding latéral 24px) — utilisable partout.
 * ============================================================================= */
.mat-container {
	max-width: var(--mat-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad, 24px);
}

/* =============================================================================
 * Template "Atelier" (page-atelier.php)
 * ============================================================================= */

.mat-atl { background: #fff; }

/* --- Hero ----------------------------------------------------------------- */
.mat-atl-hero { padding: 24px 0 56px; }
.mat-atl-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: flex-start;
}
.mat-atl-hero__media {
	position: relative;
	border-radius: 24px;
	overflow: visible;
}
/* ⚠️ `:not(.mat-atl-hero__deco)` — sans cette exclusion, la règle attrapait
   aussi les DEUX FLEURS décoratives, qui sont des `<img>` dans le même
   conteneur : elles sortaient à 688x420 au lieu de 70x… c'est-à-dire en
   pleine page, par-dessus la photo. Mesuré le 21/09/2026 sur les pages
   ateliers créées par Marie (Allaitement, Autohypnose, Portage…), toutes
   touchées. Le sélecteur descendant (0,1,1) battait `.mat-atl-hero__deco--tl`
   (0,1,0) : le même mécanisme que la typo de gabarit qui repeint les blocs. */
.mat-atl-hero__media img:not(.mat-atl-hero__deco) {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 24px;
}
.mat-atl-hero__media-placeholder {
	width: 100%;
	height: 420px;
	border-radius: 24px;
	background: linear-gradient(135deg, #FFF5F3, #EFF6F7);
}
.mat-atl-hero__deco {
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.mat-atl-hero__deco--tl { top: -18px;  left: -28px;  width: 70px;  transform: rotate(-10deg); }
.mat-atl-hero__deco--br { bottom: 32px; right: -24px; width: 60px;  transform: rotate(20deg); }
/* Les deux décors débordent volontairement du cadre de la photo (-28px et
   -24px). Sur une colonne pleine largeur, celui de droite sortait alors de
   l'écran et créait 10px de défilement horizontal (mesuré à 390, 768 et
   1024px le 21/09). `clip` et non `hidden` : il ne doit pas créer de
   conteneur de défilement. */
.mat-atl-hero { overflow-x: clip; }

.mat-atl-hero__content { padding-top: 8px; }
.mat-atl-hero__title {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'coniferous', 'Caveat', cursive;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.07;
	margin: 14px 0 18px;
}
.mat-atl-hero__lead {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	margin: 0 0 24px;
}

/* Carte infos (hero) : CSS déplacé dans assets/css/blocs-reutilisables.css le 23/09/2026
   (élément partagé avec un bloc réutilisable, servi aussi dans l'éditeur). */

/* --- Carte objectifs ------------------------------------------------------ */
.mat-atl-obj { padding: 40px 0 56px; }
/* Carte objectifs, sauf la section .mat-atl-obj : CSS déplacé dans assets/css/blocs-reutilisables.css le 23/09/2026
   (élément partagé avec un bloc réutilisable, servi aussi dans l'éditeur). */

.mat-atl-obj__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* --- CTA pill (réutilisée bas de page aussi) ------------------------------ */
.mat-atl-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #99C8CF;
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
	box-shadow: 0 1px 4px rgba(20,68,107,0.08);
}
.mat-atl-cta-pill:hover {
	background: #8bbac1;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(20,68,107,0.18);
}
.mat-atl-cta-pill--wide { padding: 14px 32px; font-size: 16px; }

/* --- Section déroulé (timeline) ------------------------------------------- */
.mat-atl-deroule {
	background: var(--mat-rose-clair, #FFF5F3);
	padding: 64px 0 80px;
	position: relative;
	overflow: hidden;
}
.mat-atl-deroule__deco {
	position: absolute;
	pointer-events: none;
}
.mat-atl-deroule__deco--l { left: 32px;  bottom: 80px; width: 90px;  transform: rotate(-12deg); opacity: 0.95; }
.mat-atl-deroule__deco--r { right: 32px; top: 110px;   width: 110px; opacity: 0.95; }

.mat-atl-deroule__card {
	background: #fff;
	border: 1px solid #FFD6CF;
	border-radius: 30px;
	box-shadow: 0 2px 86px rgba(232,232,232,0.28);
	padding: 40px 56px;
	max-width: 920px;
	margin: 0 auto;
}
.mat-atl-deroule__title {
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
}
.mat-atl-deroule__intro {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 32px;
}

/* Déroulé en champ libre (retours client 15/06) */
.mat-atl-deroule__corps {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mat-atl-deroule__corps p { margin: 0; }
.mat-atl-deroule__corps strong { font-weight: 700; }
.mat-atl-deroule__corps ul,
.mat-atl-deroule__corps ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }

/* Fil d'Ariane pleine largeur (retours client 15/06) */
.mat-atl-breadcrumb { padding-top: 24px; }
.mat-atl-deroule__note {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin: 28px 0 0;
	line-height: 1.5;
}

/* Timeline : le composant est écrit UNE fois, plus bas dans ce fichier
   (« LE DÉROULÉ (timeline) — UN SEUL COMPOSANT, TROIS SURFACES », 21/09/2026).
   Les règles qui vivaient ici en doublon ont été retirées ce jour-là. */

/* --- Galerie -------------------------------------------------------------- */
.mat-atl-gal { padding: 56px 0 40px; }
/* Galerie, sauf le fond de section .mat-atl-gal : CSS déplacé dans assets/css/blocs-reutilisables.css le 23/09/2026
   (élément partagé avec un bloc réutilisable, servi aussi dans l'éditeur). */

/* --- CTA bas -------------------------------------------------------------- */
.mat-atl-cta-bas {
	padding: 24px 0 80px;
	text-align: center;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.mat-atl-hero__inner { grid-template-columns: 1fr; gap: 28px; }
	/* `:not(.mat-atl-hero__deco)` ici AUSSI : la règle de base a été corrigée le
	   21/09 mais pas ses deux copies responsive, si bien que les fleurs
	   reprenaient 320px de haut sous 1024px et 240px sous 720px. Conséquence
	   mesurée à 390px : la fleur de droite finissait à x=429 pour un écran de
	   390, et le bouton « retour en haut », en `position: fixed`, se calait sur
	   cette zone élargie et sortait de l'écran de 23px. */
	.mat-atl-hero__media img:not(.mat-atl-hero__deco),
	.mat-atl-hero__media-placeholder { height: 320px; }
	.mat-atl-deroule__card { padding: 32px 28px; }
}
@media (max-width: 720px) {
	.mat-atl-hero { padding-bottom: 32px; }
	.mat-atl-hero__title { font-size: 36px; }
	.mat-atl-hero__media img:not(.mat-atl-hero__deco),
	.mat-atl-hero__media-placeholder { height: 240px; }
	.mat-atl-deroule { padding: 40px 0 56px; }
	.mat-atl-deroule__deco--l,
	.mat-atl-deroule__deco--r { display: none; }
	.mat-atl-deroule__card { padding: 24px 20px; }
}

/* =========================================================================
   UNIFORMISATION DES BOUTONS (blocs Gutenberg du plugin maternite-blocs)
   -------------------------------------------------------------------------
   Charte unique : pill vert-bleu (--mat-vert-bleu #99C8CF) + texte
   bleu-foncé (--mat-bleu-fonce #14446B), border-radius 30px.
   Les blocs hérités du thème CHRU rendaient des boutons bleu-foncé pleins
   (« Voir le programme » = .maternite-texte-image__button, .maternite-fiche-ecole__btn)
   ou rose-blush (.maternite-infos-pratiques__cta). On les ré-aligne ici
   (override front-office, !important car le plugin force certaines règles).
   ========================================================================= */
/* Préfixe `body` partout : le plugin force color/stroke #fff en !important sur
   les mêmes classes — on augmente la spécificité pour gagner indépendamment de
   l'ordre de chargement des feuilles de style. */
body .maternite-texte-image__button,
body .maternite-fiche-ecole__btn,
body .maternite-infos-pratiques__cta,
body .wp-block-button__link:not(.has-background):not(.has-text-color) {
	background: var(--mat-vert-bleu, #99C8CF) !important;
	border: 1px solid var(--mat-vert-bleu, #99C8CF) !important;
	color: var(--mat-bleu-fonce, #14446B) !important;
	border-radius: 30px !important;
	font-weight: 700 !important;
}
/* Flèche / icône SVG des boutons → bleu-foncé (= couleur du label).
   fill ET stroke à la couleur : gère les flèches pleines (plugin) ET filaires. */
body .maternite-texte-image__button svg,
body .maternite-fiche-ecole__btn svg { color: var(--mat-bleu-fonce, #14446B) !important; }
body .maternite-texte-image__button svg path,
body .maternite-fiche-ecole__btn svg path {
	stroke: var(--mat-bleu-fonce, #14446B) !important;
	fill: var(--mat-bleu-fonce, #14446B) !important;
}
/* Hover : on garde le pill vert-bleu + léger lift (cohérent avec les CTA du thème) */
body .maternite-texte-image__button:hover,
body .maternite-texte-image__button:focus-visible,
body .maternite-fiche-ecole__btn:hover,
body .maternite-fiche-ecole__btn:focus-visible,
body .maternite-infos-pratiques__cta:hover,
body .maternite-infos-pratiques__cta:focus-visible {
	background: var(--mat-vert-bleu, #99C8CF) !important;
	border-color: var(--mat-vert-bleu, #99C8CF) !important;
	color: var(--mat-bleu-fonce, #14446B) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 68, 107, 0.15);
}
body .maternite-texte-image__button:hover svg path,
body .maternite-texte-image__button:focus-visible svg path,
body .maternite-fiche-ecole__btn:hover svg path,
body .maternite-fiche-ecole__btn:focus-visible svg path {
	stroke: var(--mat-bleu-fonce, #14446B) !important;
	fill: var(--mat-bleu-fonce, #14446B) !important;
}

/* =========================================================================
   CORRECTIONS BLOCS — retours client 15/06/2026 (front-office)
   Overrides côté thème : l'éditeur Gutenberg ne charge pas maternite.css,
   donc on aligne le FRONT sur le rendu admin (jugé meilleur par la cliente).
   ========================================================================= */

/* ---- Bloc « Kit de ressources » : zone de téléchargement en cartes ressource ----
   Le render dynamique transforme les liens vers un fichier en .mat-res-card
   (picto + nom + type + poids). On empile les cartes et on les élargit au kit. */
body .maternite-kit__downloads {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body .maternite-kit__downloads .mat-res-card {
	width: 100%;
	max-width: 460px;
	background: #fff; /* tranche sur le fond rose-clair du kit */
}
body .maternite-kit__downloads + .maternite-kit__links { margin-top: 6px; }

/* ---- Bloc « Texte + image » : border-bottom + coins arrondis quand pas d'image ----
   Le bloc ajoute lui-même la classe .maternite-texte-image--no-media quand aucune
   image n'est choisie (fallback :has() pour les anciens contenus).
   ⚠️ Cette règle a une spécificité de 0,2,1 : elle BAT les deux règles
   d'harmonisation de chru-blocks-mat-override.css (0,1,0) qui posent le liseré
   rose et l'arrondi commun. Elle doit donc consommer LES MÊMES VARIABLES,
   sinon ce bloc dérive seul à chaque évolution de la charte — vécu deux fois :
   liseré bas resté gris CHRU #e1e1e1 (signalé par Marie le 14/08) et arrondi
   resté à 30px après le passage général à 20px du 11/08. */
body .maternite-texte-image--no-media .maternite-texte-image__content,
body .maternite-texte-image:not(:has(.maternite-texte-image__media)) .maternite-texte-image__content {
	border-bottom: 1px solid var(--mat-rose-outline, #FFD6CF) !important;
	border-radius: var(--mat-card-radius, 20px) !important;
}

/* ---- Bloc « Information utile » : caler la largeur sur l'admin (max 803px) ---- */
/* body .maternite-info-utile { max-width: 803px; } — retiré 08/07 : match CHRU (pleine largeur colonne) */

/* ---- Bloc « Liens externes / Pour aller plus loin » ----
   1) caler la largeur sur l'admin ; 2) hover rose (était gris #eaeaea = look CHRU). */
/* body .maternite-liens-externes { max-width: 803px; } — retiré 08/07 : match CHRU (pleine largeur colonne) */
body .maternite-liens-externes__link:hover,
body .maternite-liens-externes__link:focus-visible {
	background: #FFE3DD !important;
}

/* ---- Bloc « Accordéon » : adoucir le fond flashy (#FFD6CF → rose-clair) +
   nettoyer la bordure du panneau (le liseré de 1px qui dépassait). ---- */
body .maternite-accordeon__item { background: var(--mat-rose-clair, #FFF5F3) !important; }
body .maternite-accordeon__panel {
	margin: 0 !important;
	border-radius: 0 0 14px 14px !important;
}

/* ---- Bloc « Parcours examen » (examen-detail) ----
   1) fond d'onglet flashy #FFD6CF → rose-clair (pictos rose-blush + titres bleus
      ressortent enfin) ; 2) border-radius cohérent (était 14/14/30/30). */
body .maternite-examen-detail__section {
	background: var(--mat-rose-clair, #FFF5F3) !important;
	border-radius: 14px !important;
}
body .maternite-examen-detail__section-header:hover { background: #FFE3DD !important; }
body .maternite-examen-detail__section-content { border-radius: 0 0 14px 14px !important; }
/* Chevron des onglets = chevron standard du site (cercle vert-bleu), comme les
   timelines atelier/consultation. On masque le caret du plugin et on injecte le
   chevron commun en ::after (pivote à l'ouverture). */
body .maternite-examen-detail__chevron { display: none !important; }
body .maternite-examen-detail__section-header::after {
	content: "";
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mat-vert-bleu, #99C8CF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='12' viewBox='0 0 23 12' fill='none'%3E%3Cpath d='M21.6045 9.30078C21.5992 9.12124 21.5577 8.94436 21.4824 8.78125C21.4072 8.61822 21.3001 8.47209 21.167 8.35156L21.1592 8.34473L21.1523 8.33691L15.874 3.15039L15.8711 3.14746C15.6935 2.96991 15.4662 2.75524 15.209 2.51856L14.3652 1.75781C13.4526 0.946794 12.2736 0.499254 11.0527 0.500001L11.0518 0.500001C9.83263 0.49884 8.65521 0.944129 7.74219 1.75196C7.1432 2.285 6.58457 2.79535 6.22363 3.15625L6.2207 3.16016L0.953125 8.33692L0.946289 8.34473L0.938476 8.35157C0.805356 8.47211 0.697297 8.61817 0.62207 8.78125C0.54692 8.94428 0.505276 9.12135 0.5 9.30078C0.494786 9.48018 0.526327 9.65907 0.591797 9.82617C0.657319 9.99331 0.756072 10.1453 0.881836 10.2734C1.00768 10.4016 1.1582 10.5037 1.32422 10.5723C1.49009 10.6407 1.66821 10.6748 1.84766 10.6729C2.02721 10.6709 2.20472 10.6327 2.36914 10.5605C2.53346 10.4884 2.68176 10.3837 2.80469 10.2529L2.81152 10.2451L2.81934 10.2383L8.09863 5.05176L8.09961 5.05274C8.45529 4.69912 8.97682 4.22542 9.50879 3.75195L9.50976 3.75C9.93603 3.37401 10.4853 3.16699 11.0537 3.16699C11.6219 3.16703 12.1705 3.37416 12.5967 3.75L12.5986 3.75098L13.3682 4.44434C13.4884 4.55465 13.6021 4.6616 13.708 4.76172L13.9971 5.04102L19.2861 10.2383L19.2939 10.2451L19.3008 10.2529C19.4237 10.3836 19.572 10.4884 19.7363 10.5605C19.9007 10.6327 20.0783 10.6709 20.2578 10.6729C20.4373 10.6748 20.6154 10.6408 20.7812 10.5723C20.9473 10.5037 21.0978 10.4016 21.2236 10.2734C21.3494 10.1453 21.4482 9.99329 21.5137 9.82617C21.5791 9.65906 21.6097 9.48018 21.6045 9.30078Z' fill='%2314446B' stroke='%2399C8CF'/%3E%3C/svg%3E") center / 22px auto no-repeat;
	transform: rotate(180deg);
	transition: transform .2s ease;
}
body .maternite-examen-detail__section[open] .maternite-examen-detail__section-header::after { transform: rotate(0deg); }
@media (max-width: 600px) { body .maternite-examen-detail__section-header::after { width: 36px; height: 36px; background-size: 18px auto; } }
/* Pictos des onglets en bleu-foncé (mieux contrastés que le rose-blush sur fond
   rose-clair) ; contre-indications/important gardent leur couleur (spécificité plugin). */
body .maternite-examen-detail__section-icon { color: var(--mat-bleu-fonce, #14446B) !important; }

/* Label des boutons texte+image / fiche-école : forcer bleu-foncé. Le plugin force
   color:#fff via `.maternite-texte-image a.…__button` (0,2,1) → on préfixe le wrapper
   + `body` (0,2,2) pour gagner. Les flèches (currentColor) héritent alors du label. */
body .maternite-texte-image a.maternite-texte-image__button,
body .maternite-texte-image a.maternite-texte-image__button:hover,
body .maternite-texte-image a.maternite-texte-image__button:focus-visible,
body .maternite-fiche-ecole a.maternite-fiche-ecole__btn,
body .maternite-fiche-ecole a.maternite-fiche-ecole__btn:hover,
body .maternite-fiche-ecole a.maternite-fiche-ecole__btn:focus-visible { color: var(--mat-bleu-fonce, #14446B) !important; }

/* ---- Kit ressources : liens de téléchargement (fichier) → icône download ↓ ----
   Distingue une action de téléchargement (PDF/doc/zip ou attribut download) d'un
   simple lien de consultation (qui garde la flèche). */
.maternite-kit__link[href$=".pdf"] svg,
.maternite-kit__link[href$=".doc"] svg,
.maternite-kit__link[href$=".docx"] svg,
.maternite-kit__link[href$=".zip"] svg,
.maternite-kit__link[download] svg { display: none !important; }
.maternite-kit__link[href$=".pdf"]::after,
.maternite-kit__link[href$=".doc"]::after,
.maternite-kit__link[href$=".docx"]::after,
.maternite-kit__link[href$=".zip"]::after,
.maternite-kit__link[download]::after {
	content: "";
	display: inline-block;
	vertical-align: -2px;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E5B5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Bloc « Le saviez-vous ? » : teal → bleu clair du footer (#D6E9EC) ----
   Le fond passe en bleu clair → texte/badge/titre repassés en bleu-foncé pour
   rester lisibles (le rond du badge reste blanc, son picto devient bleu-foncé). */
body .maternite-saviez-vous { color: var(--mat-bleu-fonce, #14446B) !important; }
body .maternite-saviez-vous__shape svg path { fill: #D6E9EC !important; }
body .maternite-saviez-vous__badge span { color: var(--mat-bleu-fonce, #14446B) !important; }
/* loupe saviez-vous : gérée en outline dans l'override (front+éditeur) */
body .maternite-saviez-vous__content,
body .maternite-saviez-vous__content *,
body .maternite-saviez-vous__content a { color: var(--mat-bleu-fonce, #14446B) !important; }
body .maternite-saviez-vous__content li::marker { color: var(--mat-bleu-fonce, #14446B) !important; }

/* ---- Gap cohérent entre blocs custom dans le contenu éditorial (page-default) ----
   Important n'avait aucune marge, saviez-vous annulait son décrochage → blocs serrés. */
.mat-page-std__content .maternite-important,
.mat-page-std__content .maternite-a-retenir,
.mat-page-std__content .maternite-info-utile { margin: 32px 0 !important; }
.mat-page-std__content .maternite-saviez-vous { margin-top: 73px !important; margin-bottom: 32px !important; }


/* ---- FIX info-utile (08/07/2026) : carte rose-blush, texte blanc, anti-bleed ---- */
.mat-page-std__content .maternite-info-utile__title,
.mat-page-std__content .maternite-info-utile__content,
.mat-page-std__content .maternite-info-utile__content :where(p,li,strong,h2,h3,h4,ol,ul),
.mat-page-std__content .maternite-info-utile__link { color:#fff !important; }
.mat-page-std__content .maternite-info-utile__link:hover,
.mat-page-std__content .maternite-info-utile__link:focus-visible { color:var(--mat-rose-clair) !important; }


/* ============================================================
 * PARITÉ CHRU — retours Marie 2026-07-08
 * ============================================================ */

/* --- Surbrillance « Accent bleu » (format RichText span.maternite-accent).
   Le format (maternite-blocs, format-chru-accent.js) pose la classe mais
   aucune règle ne la colorait → surbrillance invisible. Équivalent CHRU :
   .chru-accent { color: var(--chru-accent) }. Sur Maternité, la palette du
   fork mappe l'accent sur le rose blush (chru-blocks-mat-override.css). */
.maternite-accent {
	color: var(--chru-accent, #9E5B5C);
}

/* --- Bloc « Contacter le service » : icônes (tél/mail) en rose, comme les
   liens (retour Marie 2026-07-08). Par défaut le bloc les met en bleu service
   (.maternite-contacter__icon → var(--chru-blue-service)). */
.maternite-contacter__icon {
	color: var(--chru-blue-light, #9E5B5C);
}

/* --- Liens de contenu : gras + soulignés, comme le CHRU (style.css `a` +
   rgaa.css RGAA 6.1). La base Maternité `a { color:inherit; none }` reste
   pour le chrome (nav, cartes, footer) ; dans les zones de contenu
   (.entry-content = pages standard + articles), les liens textuels
   redeviennent identifiables. Boutons et cartes exclus (même liste que le
   CHRU pour éviter l'effet « boutons soulignés »).
   `:not(:is(.mat-blk *))` (23/09/2026) : les blocs réutilisables issus des
   gabarits Atelier / Consultation gardent le rendu de leurs liens tel qu'il
   est dans ces gabarits (téléphone, lien de RDV, tuiles, liens du bandeau),
   au lieu d'hériter du gras souligné du fil éditorial. */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="__btn"]):not([class*="__cta"]):not([class*="-button"]):not([class*="-btn"]):not(.maternite-liens-externes__link):not(.maternite-kit__link):not(.maternite-ressource-card__link):not(.maternite-mise-en-avant__link):not(.maternite-card-event__link):not(.maternite-card-post__link):not(.maternite-card-service__link):not(.maternite-points-forts__card):not(.mat-res-card):not(:is(.mat-blk *)) {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="__btn"]):not([class*="__cta"]):not([class*="-button"]):not([class*="-btn"]):not(.maternite-liens-externes__link):not(.maternite-kit__link):not(.maternite-ressource-card__link):not(.maternite-mise-en-avant__link):not(.maternite-card-event__link):not(.maternite-card-post__link):not(.maternite-card-service__link):not(.maternite-points-forts__card):not(.mat-res-card):not(:is(.mat-blk *)):hover {
	text-decoration-thickness: 2px;
}

/* =========================================================================
   RETOURS MARIE KUSY — 11/08/2026 (doc « Retours Maternité - 10082026 »)
   -------------------------------------------------------------------------
   Un bloc par point du document, dans son ordre. Les points traites ailleurs
   dans ce fichier (ancres, sommaire, image d'entete) sont corriges a leur
   emplacement d'origine plutot qu'ici, pour ne pas eparpiller la regle.
   ========================================================================= */

/* --- Premier bloc du contenu : plus de decrochage vertical -----------------
   Le bloc Important ouvrant la page « Urgences » demarrait 32px SOUS le haut
   du sommaire (mesure : sommaire a 740px, bloc a 772px). C'est la regle de
   gap inter-blocs plus bas dans ce fichier — posee en `!important` — qui
   ecrasait `.mat-page-std__content > *:first-child { margin-top: 0 }`.
   On retablit la priorite pour le PREMIER enfant seulement : le gap entre
   blocs reste inchange. */
.mat-page-std__content > *:first-child { margin-top: 0 !important; }

/* --- Couleur des liens de contenu : rose partout --------------------------
   « Sur certaines pages les liens sont bleus, sur d'autres roses. »
   Ce n'etait pas le modele de page (les deux exemples cites passent par le
   meme gabarit) : la regle de couleur ne visait que les enfants DIRECTS de
   .mat-page-std__content (`> :is(p,ul,ol,…) a`). Des qu'une liste est posee
   dans un bloc de mise en page core — colonnes, groupe — elle n'est plus
   enfant direct, donc ses liens restaient bleus. C'est le cas de
   /urgences-maternite/ (liens dans `.wp-block-columns > .wp-block-column > ul`).

   On applique donc la couleur a toute profondeur, avec la MEME liste
   d'exclusions que la regle gras/souligne juste au-dessus (boutons et cartes
   gardent leur rendu), plus une exclusion des blocs `maternite-*` : leurs
   liens ont leur propre couleur, pensee avec le fond du bloc — le lien blanc
   sur l'aplat rose de « Information utile » ne doit pas repasser en rose.
   Si le navigateur ne sait pas lire `:not()` avec un combinateur descendant,
   la regle est ignoree en entier : on retombe sur l'etat actuel, jamais sur
   un rendu casse. */
.entry-content :is(p,ul,ol,h2,h3,h4,h5,figcaption,dd,dt,td,th) a:not(.wp-block-button__link):not(.wp-element-button):not([class*="__btn"]):not([class*="__cta"]):not([class*="-button"]):not([class*="-btn"]):not([class*="maternite-"]):not(.mat-res-card):not(:is([class*="maternite-"] *)) {
	color: var(--mat-rose-blush);
}

/* --- Italique : ce n'est pas un probleme de CSS ---------------------------
   « Lorsqu'un texte est en italique, il est aussi en gras. »
   La cause est le CHARGEMENT de la police, pas une regle de style : le
   `font-weight` calcule vaut bien 400, mais la seule graisse italique
   demandee a Google Fonts etait `1,600` (voir functions.php). Faute d'italique
   400, le navigateur peignait le texte avec la fonte italique 600 disponible.
   Corrige dans functions.php en ajoutant 1,400 et 1,700 a la requete.
   Garde-fou ici : on n'autorise aucune synthese de graisse sur <em>/<i>, pour
   que la regression se voie tout de suite si la requete de police change. */
.entry-content em,
.entry-content i,
.mat-page-std__content em,
.mat-page-std__content i {
	font-weight: inherit;
	font-style: italic;
}

/* --- Boutons : un survol qui se voit ---------------------------------------
   « Peut-on travailler un peu le hover ? » Les CTA pilule changeaient de fond
   de… rien du tout (meme couleur au repos et au survol, seul un `translateY`
   de 2px ou un `filter: brightness(.96)` a peine perceptible). On pose une
   teinte de survol unique, declaree une fois, et on l'applique a tous les
   boutons pilule du thème comme des blocs. */
:root {
	/* #86BCC4 et pas plus fonce : sous le libelle des boutons (#14446B, 700,
	   15-16px, donc « texte normal » au sens WCAG), le contraste doit rester
	   >= 4,5:1. Mesure : repos #99C8CF = 5,57:1 ; #86BCC4 = 4,84:1 ; le
	   #7CB4BD essaye d'abord tombait a 4,41:1, c'est-a-dire une regression
	   d'accessibilite introduite en repondant a une demande de style. */
	--mat-vert-bleu-hover: #86BCC4;
}

body .maternite-texte-image__button:hover,
body .maternite-texte-image__button:focus-visible,
body .maternite-fiche-ecole__btn:hover,
body .maternite-fiche-ecole__btn:focus-visible,
body .maternite-infos-pratiques__cta:hover,
body .maternite-infos-pratiques__cta:focus-visible {
	background: var(--mat-vert-bleu-hover) !important;
	border-color: var(--mat-vert-bleu-hover) !important;
}

/* --- Boutons AJOUTES A LA MAIN dans le contenu : survol en contour --------
   Retour Marie du 14/08/2026 : « Est-ce qu'on peut avoir un hover comme ca
   (sans sursaut) sur les boutons que j'ajoute ? (pas ceux qui sont par defaut
   dans les modeles de page) », avec la capture d'un bouton blanc a filet
   vert-bleu et libelle souligne.

   Ce qu'elle voyait : le survol existait, mais il passait de #99C8CF a
   #86BCC4 — deux verts-bleus a peine distinguables. Un survol qu'on ne voit
   pas est un survol absent, et c'est mesurable : 5,57:1 contre 4,84:1, soit
   un ecart de teinte sous le seuil de perception a cette saturation.

   Le survol s'inverse donc franchement : fond blanc, filet vert-bleu
   conserve, libelle souligne. Aucune translation ni ombre — c'est le
   « sursaut » qu'elle ne veut pas, et le filet reste a 1px pour que la boite
   ne bouge pas d'un pixel. Contraste du libelle #14446B sur blanc : 11,2:1.
   ⚠️ Ne vise QUE `.wp-block-button__link` : les CTA des gabarits
   (`.mat-hero__cta`, `.mat-agenda__cta`…) gardent leur survol avec lift,
   c'est explicitement « ceux qui sont par defaut dans les modeles de page ». */
body .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
body .wp-block-button__link:not(.has-background):not(.has-text-color):focus-visible {
	background: #fff !important;
	border-color: var(--mat-vert-bleu, #99C8CF) !important;
	color: var(--mat-bleu-fonce, #14446B) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transform: none !important;
	box-shadow: none !important;
}
.mat-hero__cta:hover,
.mat-agenda__cta:hover,
.mat-arch__cta:hover,
.mat-atl-cta-pill:hover,
.mat-cs-cta-pill:hover,
.mat-hero__cta:focus-visible,
.mat-agenda__cta:focus-visible,
.mat-arch__cta:focus-visible {
	background: var(--mat-vert-bleu-hover);
	filter: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 68, 107, 0.15);
}
.mat-infos__cta:hover,
.mat-infos__cta:focus-visible { opacity: 1; color: var(--mat-rose-blush); }

/* --- Kit de ressources : la fleche de telechargement etait invisible -------
   « En mode mobile, la fleche ne s'affiche pas dans le bouton. »
   Elle ne s'affichait nulle part : l'icone de telechargement qui remplace la
   fleche native sur les liens de fichier etait peinte en rose (#9E5B5C) dans
   son data-URI… sur un bouton dont le fond est ce meme rose. Rose sur rose.
   On passe par un `mask` pour que l'icone prenne `currentColor` : blanche sur
   le bouton plein, rose au survol quand le fond devient transparent. */
.maternite-kit__link[href$=".pdf"]::after,
.maternite-kit__link[href$=".doc"]::after,
.maternite-kit__link[href$=".docx"]::after,
.maternite-kit__link[href$=".zip"]::after,
.maternite-kit__link[download]::after {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Kit de ressources : un lien EXTERNE avait perdu sa fleche ------------
   Retour Marie du 14/08/2026 : « Lorsqu'il s'agit d'un lien externe, on ne
   voit plus la fleche. »

   Ce n'etait pas une fleche masquee : le bloc rend, pour un lien externe, un
   PICTO DE LIEN SORTANT (cadre + fleche diagonale, viewBox 24x24) a la place
   de la fleche. Or le CSS du bloc contraint tout `svg` du lien a 15x12 — un
   carre de 24 ecrase dans un rectangle de 15x12 devient un gribouillis de
   quelques pixels. Releve sur `/addictologie/` : le lien « Acceder a
   l'annuaire » portait bien un `<svg>`, simplement illisible.

   On masque ce picto et on repose la fleche du site, en `mask` +
   `currentColor` pour qu'elle suive la couleur du libelle (blanche sur le
   bouton plein, rose quand le survol vide le fond) — meme technique que
   l'icone de telechargement ci-dessus.
   ⚠️ Les liens de FICHIER sont exclus : ils ont deja leur propre `::after`
   (fleche descendante), et c'est cette regle-ci qui passerait par-dessus. */
.maternite-kit__link[target="_blank"]:not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"]):not([href$=".zip"]):not([download]) svg {
	display: none !important;
}
.maternite-kit__link[target="_blank"]:not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"]):not([href$=".zip"]):not([download])::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 15px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 1l5 5-5 5M14 6H1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 1l5 5-5 5M14 6H1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Credits photo (inc/photo-credit.php) ---------------------------------
   « Les credits ne s'affichent pas sur les images en general et celles des
   entetes. » Source de la donnee : champ « Description » du media. */
.mat-photo-credit {
	display: block;
	margin-top: 6px;
	font-family: var(--mat-font-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mat-gris-dark, #696969);
}
/* Sur une image de bloc, le credit se pose EN INCRUSTATION en bas a droite :
   il n'y a pas de place dans le flux, et le pousser dessous decalerait la
   mise en page du bloc. */
.mat-photo-credit--on-media {
	position: absolute;
	right: 8px;
	bottom: 8px;
	margin: 0;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--mat-rose-blush);
	color: #fff;
	font-size: 11px;
}
.maternite-texte-image__media,
.maternite-kit__image,
.maternite-ressource-card__media { position: relative; }

.mat-page-std__hero { /* ancre de positionnement du credit d'entete */ }
.mat-page-std__hero .mat-photo-credit--hero {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 4px;
	/* Fond rose blush et non bleu (retour Marie du 11/08, 16h37 : « meme
	   principe pour la couleur de fond des credits photo »). Blanc sur
	   #9E5B5C = 5,1:1, conforme AA. */
	background: var(--mat-rose-blush);
	color: #fff;
	font-size: 12px;
}

/* --- Lightbox (assets/js/media.js) ---------------------------------------- */
.mat-zoomable { cursor: zoom-in; }
.mat-has-lightbox { cursor: zoom-in; display: inline-block; }
.mat-zoomable:focus-visible {
	outline: 3px solid var(--mat-rose-blush);
	outline-offset: 2px;
}
body.mat-lightbox-open { overflow: hidden; }
.mat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	/* Retour Marie du 11/08 (16h37) : « ca serait plus coherent de changer la
	   couleur de fond ». Le voile etait bleu foncé ; il est passe dans la
	   famille rose de la charte.
	   Retour Marie du 14/08/2026 : valeur imposee, `rgba(255,245,243,0.96)` —
	   le voile devient CLAIR. ⚠️ La legende passe donc obligatoirement en bleu
	   fonce (voir `.mat-lightbox__caption`) : elle etait blanche, elle serait
	   devenue invisible sur ce fond. C'est le piege documente en Regle N°1,
	   rose clair sous texte blanc. */
	background: rgba(255, 245, 243, 0.96);
}
.mat-lightbox[hidden] { display: none; }
.mat-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}
.mat-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #fff;
}
.mat-lightbox__caption {
	margin: 0;
	max-width: 900px;
	text-align: center;
	font-family: var(--mat-font-sans);
	font-size: 14px;
	line-height: 1.5;
	/* Bleu fonce depuis le 14/08/2026 : le voile est clair, le blanc d'avant
	   ne se lisait plus. 12,1:1 sur `rgba(255,245,243,.96)`. */
	color: var(--mat-bleu-fonce, #14446B);
}
.mat-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	cursor: pointer;
	transition: background 0.15s ease;
}
.mat-lightbox__close:hover,
.mat-lightbox__close:focus-visible { background: var(--mat-vert-bleu-hover); }

/* --- Bouton « Retour en haut de page » (markup dans footer.php) ------------ */
.mat-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	box-shadow: 0 4px 14px rgba(20, 68, 107, 0.28);
	cursor: pointer;
	opacity: 0;
	transform: translateY(16px);
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, visibility 0.25s;
}
.mat-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}
.mat-to-top:hover,
.mat-to-top:focus-visible { background: var(--mat-vert-bleu-hover); }
@media (max-width: 720px) {
	.mat-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.mat-to-top { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
}

/* « Ces pages pourraient vous intéresser » (.mat-related) : CSS déplacé dans assets/css/blocs-reutilisables.css le 23/09/2026
   (élément partagé avec un bloc réutilisable, servi aussi dans l'éditeur). */

/* --- Décors végétaux de la page tampon (21/09/2026) -----------------------
   Positions du modèle Figma « ENTRÉES DE PAGES ». Masqués sous 1200px, où ils
   passeraient sur le texte. */
.mat-arch--deco { position: relative; overflow-x: clip; }
.mat-arch__leaf {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.mat-arch__leaf img { display: block; width: 100%; height: auto; }
.mat-arch__leaf--mid { left: -30px; top: 900px; width: 104px; }
/* Sans image, le bandeau n'a plus de hauteur propre : on lui en donne juste
   assez pour que les deux fleurs restent dans le cadre au lieu de remonter
   sur le bouton du bandeau de titre. */
.mat-arch__hero--sans-image { min-height: 72px; }
@media (max-width: 1200px) {
	.mat-arch__leaf { display: none; }
}
.mat-arch__head,
.mat-arch__hero,
.mat-arch__grid-wrap { position: relative; z-index: 1; }

/* --- Décor végétal du corps des pages standard (21/09/2026) ---------------
   Posé hors flux, à droite, au niveau du début du contenu — position du
   modèle « LE SUIVI » dans le Figma. `overflow: clip` sur le conteneur pour
   qu'il ne crée jamais de scroll horizontal ; `clip` et pas `hidden` parce
   que `hidden` casserait le sommaire `position: sticky` de ces pages. */
.mat-page-std--deco { position: relative; }
/*
 * ⚠️ Retour Thomas du 21/09/2026 : « attention à ne pas placer les pictos sur
 * du contenu ». La premiere pose (`right:-18px; top:210px`) tombait sur le
 * premier paragraphe : mesure a 1440px, decor de x=1362 a 1458 contre un
 * paragraphe de 470 a 1388, soit 26px de recouvrement. Un decor derriere du
 * texte reste un decor sur du texte.
 *
 * Le Figma le pose dans la MARGE laterale ; le site, lui, sert son contenu a
 * 24px du bord et n'a pas cette marge. On le met donc la ou la mesure montre
 * du vide, et nulle part ailleurs :
 *   - page a sommaire : colonne de gauche, SOUS le sommaire (354px de large,
 *     vide sur toute la hauteur du contenu) ;
 *   - page sans sommaire : le contenu est centre a 900px dans 1392, il reste
 *     246px de marge de chaque cote.
 * Le gabarit ne rend le decor de la colonne que si la page a de quoi la
 * remplir (cf. `maternite_page_std_leaf()`), sinon il toucherait le sommaire.
 */
.mat-page-std__body { position: relative; }
.mat-page-std__leaf {
	position: absolute;
	left: 0;
	width: 96px;
	pointer-events: none;
	z-index: 0;
}
.mat-page-std__leaf img { display: block; width: 100%; height: auto; }

/* Positions le long du corps. En POURCENTAGE de sa hauteur, jamais en pixels :
   c'est ce qui garde les decors sous le sommaire quelle que soit la page. Le
   gabarit n'en rend deux ou trois que si le contenu est assez long (helper
   `maternite_page_std_leaf()`). */
.mat-page-std__leaf--1 { top: 42%; }
.mat-page-std__leaf--2 { top: 70%; }
.mat-page-std__leaf--3 { bottom: 48px; }

/* Page sans sommaire : le contenu est centre a 900px, il reste 246px de marge
   de chaque cote — on alterne droite / gauche. -120px et pas davantage : a
   1201px de large (juste au-dessus du seuil de masquage), la marge ne fait
   plus que 126px. */
.mat-page-std__body--simple .mat-page-std__leaf--1 { left: auto; right: -120px; top: 38%; }
.mat-page-std__body--simple .mat-page-std__leaf--2 { left: -130px; top: 66%; }
.mat-page-std__body--simple .mat-page-std__leaf--3 { left: auto; right: -130px; bottom: 72px; }

@media (max-width: 1200px) {
	.mat-page-std__leaf { display: none; }
}

/* =========================================================================
   ALIGNEMENTS « LARGE » ET « PLEINE LARGEUR » (21/09/2026)
   -------------------------------------------------------------------------
   Le thème déclare `align-wide` depuis le 21/09 ; ces règles donnent l'effet
   côté rendu. Sans elles, l'option apparaît dans l'éditeur et ne fait rien.

   ⚠️ `width: 100vw` inclut la barre de défilement et produit un débordement
   horizontal de ~15px sur toute la page. On utilise `--mat-vw`, posée par
   `maternite.js` depuis `clientWidth` (barre exclue), avec `100vw` en repli
   si le JS n'a pas tourné. L'autre contournement répandu — `overflow-x:
   hidden` sur le body — est EXCLU ici : il annulerait le sommaire sticky des
   pages standard.
   ========================================================================= */
.mat-page-std__content > .alignfull,
.mat-page-std__body--simple > .alignfull,
.entry-content > .alignfull,
.mat-evt__content > .alignfull,
.mat-single__content > .alignfull {
	/* ⚠️ PAS `calc(50% - 50vw)` : ce centrage suppose la colonne centrée dans
	   la fenêtre, ce qui n'est vrai que du gabarit sans sommaire. Sur une page
	   à deux colonnes, le bloc sortait de 209px à droite de l'écran (mesuré le
	   21/09).
	   `--mat-cl` et `--mat-cr` portent les distances réelles du conteneur aux
	   deux bords de la fenêtre, posées par `maternite.js` au chargement, au
	   resize et une fois les polices chargées.
	   🔑 La largeur s'écrit `100% + gauche + droite` plutôt que `var(--mat-vw)`
	   pour que la formule SE DÉGRADE : sans JS les deux variables valent 0, la
	   largeur retombe à 100 % et le bloc reste dans sa colonne. Avec
	   `var(--mat-vw, 100vw)`, il gardait la largeur de la fenêtre et une marge
	   nulle, donc 352px de défilement horizontal sur un article. */
	width: calc(100% + var(--mat-cl, 0px) + var(--mat-cr, 0px));
	max-width: none;
	margin-left: calc(-1 * var(--mat-cl, 0px));
	margin-right: calc(-1 * var(--mat-cr, 0px));
}

/* « Large » : le bloc déborde de sa colonne jusqu'à 120px de chaque côté, sans
   jamais sortir du conteneur — utile dans la colonne étroite des pages à
   sommaire, où la pleine largeur serait brutale. */
.mat-page-std__content > .alignwide,
.mat-page-std__body--simple > .alignwide,
.entry-content > .alignwide,
.mat-evt__content > .alignwide,
.mat-single__content > .alignwide {
	width: auto;
	max-width: none;
	margin-left: -60px;
	margin-right: -60px;
}
@media (max-width: 1100px) {
	.mat-page-std__content > .alignwide,
	.mat-page-std__body--simple > .alignwide,
	.entry-content > .alignwide,
	.mat-evt__content > .alignwide,
	.mat-single__content > .alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}

/* =========================================================================
   BLOC « Déroulé (timeline Maternité) » — inc/block-timeline.php
   -------------------------------------------------------------------------
   Même dessin que le déroulé des gabarits « Atelier » et « Consultation
   spécialisée » (chevron en pastille vert-bleu, cartes alternées rose clair
   et blanc, filet rose) : un lecteur ne doit pas voir deux déroulés
   différents selon que la page vient d'un gabarit ou d'un bloc.
   ========================================================================= */
.mat-tlb { margin: 32px 0; }
.mat-tlb--fond-rose { background: var(--mat-rose-clair, #FFF5F3); }
.mat-tlb--fond-bleuvert { background: var(--mat-aplat-bleu-vert, #EFF6F7); }
.mat-tlb--fond-aucun { background: transparent; }
/* Le fond ne s'étend au-delà du texte que si le bloc est aligné : sinon il
   collerait au texte sans respiration. */
.mat-tlb--fond-rose,
.mat-tlb--fond-bleuvert { padding: 32px 0; border-radius: var(--mat-card-radius, 20px); }
.mat-tlb.alignfull.mat-tlb--fond-rose,
.mat-tlb.alignfull.mat-tlb--fond-bleuvert { padding: 56px 0; border-radius: 0; }

.mat-tlb__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 24px;
}
.mat-tlb.alignfull .mat-tlb__inner { max-width: 940px; }

/* Les mêmes motifs floraux que sur le déroulé du plugin (22/09/2026), sur le
   bloc du thème dès qu'il porte un fond : sans aplat, ils flotteraient sur le
   blanc de la page sans rien encadrer. Positions par rapport à la boîte de
   contenu, donc dans la gouttière et jamais sous le sommaire. */
.mat-tlb--fond-rose,
.mat-tlb--fond-bleuvert { position: relative; }
.mat-tlb--fond-rose::before,
.mat-tlb--fond-bleuvert::before,
.mat-tlb--fond-rose::after,
.mat-tlb--fond-bleuvert::after {
	/* ⚠️ Motifs PETITS et calés sur la gouttière réellement disponible, mesurée
	   sur chaque gabarit : entre la fin du sommaire et la pastille du déroulé,
	   il reste 49px sur un article et 106px sur une page standard. Un motif de
	   90px y touchait la pastille — un contrôle qui ne mesure que les LIGNES DE
	   TEXTE ne le voit pas, la pastille n'est pas du texte.
	   🛑 Et surtout PAS `z-index: -1` pour « passer derrière » : le pseudo-élément
	   repasse alors derrière le FOND de la section, qui est opaque, et le motif
	   disparaît purement et simplement (essayé le 22/09). */
	content: "";
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
/* ⚠️ Deux cas, et c'est la mesure qui a tranché : un pseudo-élément absolu se
   cale sur le bord du BLOC. Quand le bloc est dans la colonne, ce bord EST
   celui de la colonne, et `-64px` suffit ; quand il est en pleine largeur, son
   bord est celui de la fenêtre, et il faut y ajouter la distance mesurée par
   le JS. Avec la même formule pour les deux, le motif de gauche atterrissait
   au MILIEU du bloc (mesuré à x=820 sur la démo). */
.mat-tlb--fond-rose::before,
.mat-tlb--fond-bleuvert::before {
	left: -48px;
	top: 16%;
	width: 44px;
	height: 48px;
	background-image: url("../img/feuille-rose-plume.svg");
}
.mat-tlb--fond-rose::after,
.mat-tlb--fond-bleuvert::after {
	right: -10px;
	bottom: 14%;
	width: 56px;
	height: 60px;
	background-image: url("../img/fleur-jaune-tige.svg");
}
/* Bloc en pleine largeur : son bord est celui de la fenêtre. */
.mat-tlb.alignfull::before { left: calc(var(--mat-cl, 24px) - 48px); }
/* En pleine largeur sur une page à sommaire, la gouttière droite ne fait que
   24px : le motif se cale au bord de la fenêtre et devient TANGENT à la
   dernière ligne de texte (mesuré au pixel). Il rétrécit alors un peu pour
   garder de l'air. */
/* En pleine largeur, le bloc occupe toute la fenêtre et sa gouttière droite se
   réduit à 24px : le motif descend alors dans le padding bas, où il ne croise
   plus aucune carte (mesuré : sinon il en mordait une de 8px). */
.mat-tlb.alignfull::after  { right: max(0px, calc(var(--mat-cr, 24px) - 70px)); bottom: 8px; }
@media (max-width: 1200px) {
	.mat-tlb--fond-rose::before,
	.mat-tlb--fond-bleuvert::before,
	.mat-tlb--fond-rose::after,
	.mat-tlb--fond-bleuvert::after { display: none; }
}
/*
 * ⚠️ Un bloc PLEINE LARGEUR dans une page A SOMMAIRE passait sur le sommaire
 * (retour Thomas du 21/09/2026, capture à l'appui) : le bloc s'étend d'un bord
 * à l'autre, la colonne de gauche est occupée par un sommaire `sticky`, et les
 * pastilles du déroulé se retrouvaient par-dessus ses liens.
 *
 * Le fond continue de traverser toute la fenêtre — c'est l'intérêt de
 * l'alignement — mais le CONTENU du bloc revient dans la colonne de lecture,
 * en reprenant les distances aux bords que `maternite.js` a mesurées. Et le
 * sommaire passe au-dessus de l'aplat, qu'il reste lisible quand il défile.
 */
.mat-page-std__body:not(.mat-page-std__body--simple) .mat-tlb.alignfull .mat-tlb__inner {
	max-width: none;
	margin: 0;
	padding-left: var(--mat-cl, 24px);
	padding-right: var(--mat-cr, 24px);
}
.mat-page-std__sidebar { z-index: 2; }

/* En-tête : sur-titre en pastille, titre rose-blush, intro — centrés, aux
   valeurs de la maquette (pill 15/600, titre 24/700, intro 16/600). */
.mat-tlb__head { text-align: center; margin: 0 0 28px; }
.mat-tlb__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--mat-rose-blush);
	border-radius: 20px;
	padding: 4px 12px;
	color: var(--mat-rose-blush);
	font-size: 15px;
	font-weight: 600;
}
.mat-tlb__pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mat-rose-blush);
}
.mat-tlb__heading {
	margin: 18px 0 14px;
	font-family: var(--mat-font-sans);
	font-size: 24px;
	font-weight: 700;
	color: var(--mat-rose-blush);
}
.mat-tlb__heading em {
	font-family: var(--mat-font-script);
	font-style: normal;
	font-size: 30px;
	color: var(--mat-rose-blush);
}
.mat-tlb__intro {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.36;
	color: var(--mat-bleu-fonce);
}
/* -------------------------------------------------------------------------
   LE DÉROULÉ (timeline) — UN SEUL COMPOSANT, TROIS SURFACES
   -------------------------------------------------------------------------
   Retour Thomas du 21/09/2026 : « fais en sorte que la timeline rende
   exactement comme ça mais en bloc », maquette à l'appui (Figma
   zYhpNUulnjdiH0WQ737sOt, nœud 1:572, page Consultation spécialisée).

   Les valeurs sont RELEVÉES sur ce nœud, pas approchées :
     · cartes 828 de large, padding 36, AUCUN arrondi, bordure #FFD6CF à 40 %,
       ombre 0 2px 86px rgba(233,233,233,.28) ;
     · l'étape ACTIVE est en rose clair #FFF5F3, les autres blanches — ce
       n'est pas une alternance, c'est une progression ;
     · pastille 44×44 #99C8CF à 18px de la carte, rail continu de 2px de la
       même couleur, l'un et l'autre à 30 % hors de l'étape active ;
     · titre 16/700 et texte 16/600 en #14446B, 24px entre les deux,
       24px entre deux cartes.

   Le markup porte les classes `mat-tl*` sur les TROIS surfaces (bloc
   `.mat-tlb`, gabarit Consultation spécialisée, gabarit Atelier) : une seule
   écriture, une seule animation. Les classes historiques `mat-cs-tl*` /
   `mat-atl-tl*` restent dans le HTML mais plus aucune règle ne s'y adosse. */
.mat-tl {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.mat-cs-tl,
.mat-atl-tl { max-width: 890px; margin: 0 auto; }

.mat-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 18px;
	align-items: stretch;
}

/* --- Le rail : UN SEUL trait, et un front de progression ------------------
   ⚠️ Première version, corrigée le soir même : le rail était découpé en
   segments, un par étape, et chacun s'allumait seul. Retour de Thomas, capture
   à l'appui : « trait de progression coupé, ce n'est pas le comportement voulu
   d'une timeline ». Il a raison, une timeline montre un trait continu que la
   lecture REMPLIT ; un segment allumé au milieu de segments éteints se lit
   comme un trait cassé.
   Donc deux traits superposés sur la liste : le rail pâle sur toute la
   hauteur, et par-dessus la progression, dont la hauteur suit le défilement.
   `--mat-tl-top` (centre de la première pastille) et `--mat-tl-fill` sont
   posées par `maternite.js` ; sans lui, le trait reste pâle et entier. */
.mat-tl { position: relative; }
.mat-tl::before,
.mat-tl::after {
	content: "";
	position: absolute;
	left: 21px; /* centre de la colonne de 44px, pour un trait de 2px */
	width: 2px;
	top: var(--mat-tl-top, 82px);
	background: var(--mat-vert-bleu, #99C8CF);
	pointer-events: none;
}
.mat-tl::before { bottom: 0; opacity: 0.3; }
.mat-tl::after { height: var(--mat-tl-fill, 0px); }

.mat-tl__chevron {
	position: relative; /* au-dessus du rail */
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.3;
	transition: opacity 0.35s ease;
}
.mat-tl__chevron svg { width: 44px; height: 44px; }

.mat-tl__body {
	background: #fff;
	border: 1px solid rgba(255, 214, 207, 0.4);
	border-radius: 0;
	padding: 36px;
	box-shadow: 0 2px 86px rgba(233, 233, 233, 0.28);
	transition: background-color 0.35s ease;
}

/* --- Les étapes atteintes et l'étape courante ------------------------------
   Sans JavaScript, la première étape est allumée : l'état exact de la
   maquette. Le script pose `is-js` sur la liste dès qu'il prend la main, et
   les règles passent alors à `.is-reached` (pastille dépassée par le front) et
   `.is-active` (l'étape en cours de lecture, la seule carte rose). Écrit dans
   ce sens, le repli est la maquette et non un déroulé entièrement éteint. */
.mat-tl__item:first-child .mat-tl__chevron { opacity: 1; }
.mat-tl__item:first-child .mat-tl__body { background: var(--mat-rose-clair, #FFF5F3); }

.mat-tl.is-js .mat-tl__item:first-child .mat-tl__chevron { opacity: 0.3; }
.mat-tl.is-js .mat-tl__item:first-child .mat-tl__body { background: #fff; }

.mat-tl.is-js .mat-tl__item.is-reached .mat-tl__chevron { opacity: 1; }
.mat-tl.is-js .mat-tl__item.is-active .mat-tl__body { background: var(--mat-rose-clair, #FFF5F3); }

/* Sur un fond de section rose, la carte rose se fondrait dans son fond : la
   hiérarchie s'inverse, l'étape active passe en blanc plein et les autres en
   blanc translucide. */
.mat-tlb--fond-rose .mat-tl__body { background: rgba(255, 255, 255, 0.55); }
.mat-tlb--fond-rose .mat-tl__item:first-child .mat-tl__body { background: #fff; }
.mat-tlb--fond-rose .mat-tl.is-js .mat-tl__item:first-child .mat-tl__body { background: rgba(255, 255, 255, 0.55); }
.mat-tlb--fond-rose .mat-tl.is-js .mat-tl__item.is-active .mat-tl__body { background: #fff; }

.mat-tl__title {
	color: var(--mat-bleu-fonce, #14446B);
	/* 20px et non les 16px du Figma : demande Marie KUSY du 22/09/2026,
	   alignement sur le CHRU. Même valeur dans chru-blocks-mat-override.css. */
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 24px;
}
.mat-tl__desc {
	color: var(--mat-bleu-fonce, #14446B);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.36;
}
.mat-tl__desc p { margin: 0 0 8px; }
.mat-tl__desc p:last-child { margin-bottom: 0; }

/* Qui a demandé moins d'animations n'en reçoit pas : l'étape active change
   toujours, mais sans fondu (RGAA / WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	.mat-tl__chevron,
	.mat-tl__body { transition: none; }
}

.mat-tlb__note {
	margin: 18px 0 0;
	font-size: 15px;
	font-style: italic;
	color: var(--mat-bleu-fonce);
}

@media (max-width: 720px) {
	.mat-tl__item { grid-template-columns: 34px 1fr; gap: 12px; }
	.mat-tl__chevron svg { width: 34px; height: 34px; }
	.mat-tl::before,
	.mat-tl::after { left: 16px; top: var(--mat-tl-top, 62px); }
	.mat-tl__body { padding: 20px 18px; }
	.mat-tl__title { margin-bottom: 14px; }
}

/* --- Prochains événements en bas des pages standard (inc/events-feed.php) --
   Retour Marie du 14/08/2026 : remontée AUTOMATIQUE, sans sélection. */
.mat-page-events {
	background: var(--mat-aplat-bleu-vert, #EFF6F7);
	padding: 56px 0 64px;
	/*
	 * Fond PLEINE LARGEUR (demande Thomas du 21/09/2026). La section est
	 * rendue dans `<main class="mat-page-std">`, un conteneur de 1392px
	 * centre : son aplat s'arretait donc aux bords de la colonne.
	 *
	 * Meme formule que les blocs `alignfull` (et pour la meme raison) :
	 * `maternite.js` pose sur le conteneur la distance reelle a chaque bord
	 * de fenetre, et la largeur s'ecrit `100% + gauche + droite`. Elle se
	 * degrade toute seule — sans JS les deux valent 0, la section retombe a
	 * 100% et reste dans le conteneur, au lieu de deborder de 15px comme le
	 * ferait `100vw` (barre de defilement comprise).
	 */
	width: calc(100% + var(--mat-cl, 0px) + var(--mat-cr, 0px));
	max-width: none;
	margin: 0 calc(-1 * var(--mat-cr, 0px)) -1px calc(-1 * var(--mat-cl, 0px));
}
.mat-page-events__inner {
	max-width: var(--mat-container-max, 1392px);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad, 24px);
}
.mat-page-events__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}
.mat-page-events__title {
	margin: 0;
	font-family: var(--mat-font-sans);
	font-size: 24px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
}
.mat-page-events__accent {
	font-family: var(--mat-font-script);
	font-weight: 600;
	font-size: 30px;
	color: var(--mat-rose-blush);
}
.mat-page-events__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border-radius: var(--mat-radius-pill, 30px);
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 150ms ease;
}
.mat-page-events__cta:hover,
.mat-page-events__cta:focus-visible {
	background: var(--mat-vert-bleu-hover);
	color: var(--mat-bleu-fonce);
	text-decoration: none;
}
.mat-page-events__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1000px) {
	.mat-page-events__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.mat-page-events__grid { grid-template-columns: 1fr; }
}

/* --- Page 404 (404.php) --------------------------------------------------- */
.mat-404 {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad) 96px;
	color: var(--mat-bleu-fonce);
}
.mat-404__breadcrumb { padding-top: 39px; }
.mat-404__breadcrumb .mat-breadcrumb__list { justify-content: center; }
.mat-404__inner {
	max-width: 780px;
	margin: 0 auto;
	padding-top: 40px;
	text-align: center;
}
.mat-404__code {
	margin: 0;
	font-family: "Coniferous", var(--mat-font-script);
	font-size: 96px;
	line-height: 1;
	color: var(--mat-vert-bleu);
}
.mat-404__title {
	margin: 8px 0 0;
	font-family: "Coniferous", var(--mat-font-script);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.1;
	color: var(--mat-bleu-fonce);
}
.mat-404__title-line {
	display: block;
	width: 139px;
	height: 2px;
	margin: 20px auto 0;
	background: var(--mat-rose-blush);
}
.mat-404__text {
	margin: 24px auto 32px;
	max-width: 620px;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	line-height: 1.65;
}
.mat-404__search {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto 20px;
}
.mat-404__search-input {
	flex: 1;
	min-width: 0;
	padding: 13px 20px;
	border: 1px solid var(--mat-rose-outline, #FFD6CF);
	border-radius: 30px;
	background: #fff;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	color: var(--mat-bleu-fonce);
}
.mat-404__search-input:focus-visible {
	outline: 2px solid var(--mat-rose-blush);
	outline-offset: 1px;
}
.mat-404__search-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border: none;
	border-radius: 30px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	font-family: var(--mat-font-sans);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.mat-404__search-submit:hover,
.mat-404__search-submit:focus-visible { background: var(--mat-vert-bleu-hover); }
.mat-404__home {
	display: inline-block;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-rose-blush);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mat-404__shortcuts-title {
	margin: 56px 0 20px;
	font-family: var(--mat-font-sans);
	font-size: 18px;
	font-weight: 700;
	color: var(--mat-rose-blush);
}
.mat-404__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	text-align: left;
}
.mat-404__grid a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 18px 22px;
	border: 1px solid var(--mat-rose-outline, #FFD6CF);
	border-radius: 14px;
	background: var(--mat-rose-clair);
	color: var(--mat-bleu-fonce);
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.mat-404__grid a:hover,
.mat-404__grid a:focus-visible {
	background: #FFE3DD;
	transform: translateY(-2px);
	text-decoration: none;
}
.mat-404__grid-arrow { color: var(--mat-rose-blush); display: inline-flex; }
@media (max-width: 720px) {
	.mat-404__code { font-size: 68px; }
	.mat-404__title { font-size: 34px; }
	.mat-404__search { flex-direction: column; }
	.mat-404__search-submit { justify-content: center; }
}

/* ============================================================
 * Italique : jamais gras (parité CHRU, retour Marie 13/08/2026)
 * ============================================================
 * « et l'italic est toujours en gras ». Mesuré sur la fiche événement
 * « Conférence sur les cancers gynécologiques » : le <em> du sous-titre sortait
 * en 700 parce qu'il HÉRITE de la graisse de son parent (ici un H2). Sur le
 * CHRU la même page rend 400 — le thème y pose cette règle depuis le 30/06.
 * L'intersection gras + italique reste, elle, en gras : c'est une intention
 * d'écriture, pas un héritage subi. */
em, i {
	font-weight: 400;
	font-style: italic;
}

strong em, strong i, b em, b i,
em strong, em b, i strong, i b {
	font-weight: 700;
}

/* =========================================================================
   ACCUEIL — retours du doc Marie KUSY du 31/08/2026
   ========================================================================= */

/* Section articles : décor de fond (principe de l'agenda) + bouton « Tous nos articles » */
.mat-articles { position: relative; overflow-x: clip; }
.mat-articles__container { position: relative; z-index: 1; }
.mat-articles__deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mat-articles__deco img { position: absolute; height: auto; }
.mat-articles__deco-tache  { top: 56px;  left: calc(50% - 700px); width: 230px; opacity: .55; }
.mat-articles__deco-jaunes { top: 150px; left: calc(50% - 610px); width: 92px; }
.mat-articles__deco-bleue  { bottom: 40px; right: calc(50% - 690px); width: 120px; }
@media (max-width: 1279px) {
	.mat-articles__deco { display: none; }
}
.mat-articles__cta { align-self: center; margin-top: -24px; }

/* Accueil mobile (doc Marie KUSY du 31/08/2026) --------------------------- */

/* Tuile événement : quand les tuiles d'une rangée prennent la même hauteur, le
   lieu se cale en bas au lieu de flotter sous un titre court. Composant
   partagé : accueil, agenda, pages service, colonne d'un événement. */
.mat-event-card__body { flex: 1 1 auto; }
.mat-event-card__footer { margin-top: auto; }

@media (max-width: 720px) {
	/* Spécialités : 20px de carte + 36px de libellé = 56px de vide à gauche,
	   et 70px de haut pour une ligne. */
	.mat-specs__card { min-height: 56px; padding-left: 0; }
	.mat-specs__card-label { padding: 12px 12px 12px 20px; }
	.mat-specs__card-rail { flex-basis: 56px; }
	/* Décor de l'agenda : plus de transparence (il était à 45 %). */
	.mat-agenda__bg { opacity: 1; }
}