/**
 * Maternité — page de résultats de recherche + autocomplete header.
 *
 * Palette :
 *   --mat-bleu-fonce  → texte / hero title / badges
 *   --mat-rose-blush  → accents (breadcrumb hover, pin, focus)
 *   --mat-rose-clair  → fond hero / hover items
 *   --mat-vert-bleu   → filet accent
 *   --mat-orange      → highlight CTA
 */

/* ============================================
 * HERO
 * ============================================ */
.mat-search-hero {
	position: relative;
	background: #FFF5F3;
	padding: 70px 0 60px;
	overflow: hidden;
}

.mat-search-hero .mat-container {
	position: relative;
	z-index: 2;
	text-align: center;
}

.mat-search-hero__decor {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.55;
	pointer-events: none;
	z-index: 1;
}
.mat-search-hero__decor img {
	display: block;
	width: 120px;
	height: auto;
}
.mat-search-hero__decor--left  { left: 3vw; }
.mat-search-hero__decor--right { right: 3vw; transform: translateY(-50%) scaleX(-1); }

.mat-search-hero__breadcrumb {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	margin-bottom: 22px;
}
.mat-search-hero__breadcrumb a {
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: none;
}
.mat-search-hero__breadcrumb a:hover,
.mat-search-hero__breadcrumb a:focus {
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: underline;
}
.mat-search-hero__breadcrumb span {
	color: var(--mat-rose-blush, #9E5B5C);
	margin: 0 6px;
}
.mat-search-hero__breadcrumb strong {
	font-weight: 700;
	color: var(--mat-rose-blush, #9E5B5C);
}

.mat-search-hero__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
}
.mat-search-hero__query {
	font-family: 'Coniferous', 'Caveat', cursive;
	font-weight: 600;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search-hero__count {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--mat-bleu-fonce, #14446B);
	opacity: 0.7;
	margin: 12px 0 0;
}

.mat-search-hero__form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 640px;
	margin: 32px auto 0;
	padding: 6px 6px 6px 22px;
	background: #fff;
	border: 2px solid var(--mat-rose-clair-border, #FFD6CF);
	border-radius: 32px;
	transition: border-color 200ms, box-shadow 200ms;
}
.mat-search-hero__form:focus-within {
	border-color: var(--mat-rose-blush, #9E5B5C);
	box-shadow: 0 0 0 4px rgba(170, 99, 100, 0.10);
}
.mat-search-hero__input {
	flex: 1;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--mat-bleu-fonce, #14446B);
	border: none;
	outline: none;
	background: transparent;
	padding: 12px 0;
}
.mat-search-hero__input::placeholder {
	color: #8C9AA8;
	font-weight: 400;
}
.mat-search-hero__submit {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 150ms;
}
.mat-search-hero__submit:hover,
.mat-search-hero__submit:focus { background: var(--mat-bleu-fonce, #14446B); }
.mat-search-hero__submit:focus-visible {
	outline: 3px solid var(--mat-vert-bleu, #99C8CF);
	outline-offset: 2px;
}

/* ============================================
 * ONGLETS
 * ============================================ */
.mat-search-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 32px 0 24px;
	border-bottom: 1px solid #FFE3DD;
	margin-bottom: 32px;
}
.mat-search-tabs__tab {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border: 1.5px solid #FFD6CF;
	border-radius: 30px;
	text-decoration: none;
	transition: all 150ms;
	cursor: pointer;
	white-space: nowrap;
}
.mat-search-tabs__tab:hover {
	background: #FFF5F3;
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search-tabs__tab:focus-visible {
	outline: 3px solid var(--mat-vert-bleu, #99C8CF);
	outline-offset: 2px;
}
.mat-search-tabs__tab.is-active {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}

/* ============================================
 * RÉSULTATS — groupes
 * ============================================ */
.mat-search-results { padding-bottom: 60px; }

.mat-search-group { margin-bottom: 48px; }
.mat-search-group__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mat-rose-blush, #9E5B5C);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.mat-search-group__count {
	font-weight: 400;
	font-size: 15px;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mat-search-group__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.mat-search-group__more:hover,
.mat-search-group__more:focus { color: var(--mat-bleu-fonce, #14446B); }

/* ============================================
 * RÉSULTATS — item
 * ============================================ */
.mat-search-item {
	border-bottom: 1px solid #FFE3DD;
}
.mat-search-item:last-child { border-bottom: none; }

.mat-search-item__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 14px;
	text-decoration: none;
	border-radius: 12px;
	transition: background 150ms;
}
.mat-search-item__link:hover,
.mat-search-item__link:focus { background: #FFF5F3; }
.mat-search-item__link:focus-visible {
	outline: 3px solid var(--mat-vert-bleu, #99C8CF);
	outline-offset: -3px;
}

.mat-search-item__badge {
	flex-shrink: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--mat-rose-blush, #9E5B5C);
	padding: 4px 10px;
	border-radius: 12px;
	letter-spacing: 0.04em;
	margin-top: 4px;
}

.mat-search-item__body { flex: 1; min-width: 0; }
.mat-search-item__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0;
	line-height: 1.3;
}
.mat-search-item__acronyme {
	font-weight: 400;
	color: var(--mat-rose-blush, #9E5B5C);
	font-size: 15px;
	margin-left: 6px;
}
.mat-search-item__excerpt {
	margin: 6px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #4A5A6E;
	line-height: 1.5;
}
.mat-search-item__url {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #8C9AA8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* ⚠️ `min-width: 0` sur le corps du résultat, sinon l'URL (une seule chaîne
   insécable, du type `/votre-grossesse/suivi-medical-de-grossesse/…`) impose
   sa largeur au flex-item : `text-overflow: ellipsis` ne peut pas jouer et le
   résultat pousse la page à 675px de large en mobile. Mesuré le 21/09/2026 sur
   `?s=grossesse` à 390px — le seul débordement horizontal du site. */
.mat-search-item__body { min-width: 0; width: 100%; max-width: 100%; }
.mat-search-item__url { max-width: 100%; }
@media (max-width: 720px) {
	/* En colonne étroite, la troncature par `ellipsis` ne suffit pas : on
	   laisse l'URL se couper. Un chemin sur deux lignes se lit ; une page qui
	   défile latéralement, non. */
	.mat-search-item__url {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* ============================================
 * PAGINATION
 * ============================================ */
.mat-search-pagination {
	display: flex;
	justify-content: center;
	/* `wrap` : la recherche rend une pastille PAR PAGE, sans ellipse. À dix
	   pages (« grossesse » en compte 96 résultats), la rangée mesurait 420px
	   et faisait défiler la page latéralement en mobile. Mesuré le
	   21/09/2026. */
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
}
.mat-search-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border: 1.5px solid #FFD6CF;
	border-radius: 50%;
	text-decoration: none;
	transition: all 150ms;
}
.mat-search-pagination__item:hover {
	background: #FFF5F3;
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search-pagination__item.is-current {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}

/* ============================================
 * ÉTAT VIDE
 * ============================================ */
.mat-search-empty { padding: 60px 0 80px; }
.mat-search-empty__content {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.mat-search-empty__icon {
	color: var(--mat-rose-blush, #9E5B5C);
	opacity: 0.5;
	margin-bottom: 18px;
}
.mat-search-empty__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0 0 8px;
}
.mat-search-empty__text {
	font-size: 16px;
	color: #4A5A6E;
	margin: 0 0 28px;
}
.mat-search-empty__suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.mat-search-empty__suggestions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border: 1.5px solid #FFD6CF;
	border-radius: 30px;
	text-decoration: none;
	transition: all 150ms;
	min-width: 220px;
}
.mat-search-empty__suggestions a:hover,
.mat-search-empty__suggestions a:focus {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}

/* La barre .mat-search du header conserve son style d'origine (defini dans maternite.css),
 * mais l'input est readonly et un clic dessus déclenche l'overlay (gestion en JS). */
.mat-search input[type="search"][readonly] { cursor: pointer; background: inherit; }

/* ============================================
 * OVERLAY RECHERCHE (panel plein écran)
 * ============================================ */
.mat-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.mat-search-overlay[hidden] { display: none; }

.mat-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 68, 107, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: matSearchFadeIn 200ms ease-out;
}

.mat-search-overlay__content {
	position: relative;
	width: 100%;
	max-width: 820px;
	/* Retour Marie du 14/08/2026, valeurs imposees : fond
	   `rgba(245,235,233,0.96)` et ombre `rgba(158,91,92,0.22)` — l'ombre
	   quitte le bleu pour le rose blush de la charte. */
	background: rgba(245, 235, 233, 0.96);
	margin: 0 auto;
	padding: 56px 32px 48px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	animation: matSearchPopIn 220ms ease-out;
	border-radius: 32px;
	box-shadow: 0 24px 60px rgba(158, 91, 92, 0.22);
}

@keyframes matSearchFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes matSearchPopIn {
	from { transform: scale(0.96) translateY(10px); opacity: 0; }
	to   { transform: scale(1) translateY(0); opacity: 1; }
}

.mat-search-overlay__close {
	position: absolute;
	top: 22px;
	right: 28px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--mat-rose-blush, #9E5B5C);
	border: 1.5px solid #FFD6CF;
	border-radius: 50%;
	cursor: pointer;
	transition: all 150ms;
}
.mat-search-overlay__close:hover,
.mat-search-overlay__close:focus {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border-color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search-overlay__close:focus-visible {
	outline: 3px solid var(--mat-vert-bleu, #99C8CF);
	outline-offset: 2px;
}

.mat-search-overlay__inner {
	max-width: 720px;
	margin: 0 auto;
}

.mat-search-overlay__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0 0 24px;
	text-align: center;
}
.mat-search-overlay__title-accent {
	font: inherit;
	color: inherit;
}

.mat-search-overlay__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 24px;
	background: #fff;
	border: 2px solid var(--mat-rose-blush, #9E5B5C);
	border-radius: 40px;
	box-shadow: 0 6px 24px rgba(170, 99, 100, 0.12);
}
.mat-search-overlay__input {
	flex: 1;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--mat-bleu-fonce, #14446B);
	border: none;
	outline: none;
	background: transparent;
	padding: 14px 0;
	min-width: 0;
}
.mat-search-overlay__input::placeholder {
	color: #8C9AA8;
	font-weight: 400;
}
.mat-search-overlay__submit {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 150ms;
}
.mat-search-overlay__submit:hover,
.mat-search-overlay__submit:focus { background: var(--mat-bleu-fonce, #14446B); }

.mat-search-overlay__results {
	margin-top: 24px;
	min-height: 40px;
}

.mat-search-overlay__group {
	margin-top: 22px;
}
/* Liste plate de l'overlay (14/08/2026 : plus d'en-tetes de type). */
.mat-search-overlay__list {
	margin-top: 22px;
}
.mat-search-overlay__group-label {
	display: block;
	margin: 0 0 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mat-rose-blush, #9E5B5C);
	padding-bottom: 6px;
	border-bottom: 1px solid #FFD6CF;
}
.mat-search-overlay__item {
	display: block;
	padding: 12px 16px;
	margin: 4px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border-radius: 14px;
	text-decoration: none;
	line-height: 1.4;
	transition: all 120ms;
}
.mat-search-overlay__item:hover,
.mat-search-overlay__item.is-focused {
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	transform: translateX(4px);
}
.mat-search-overlay__item-acr {
	font-weight: 400;
	opacity: 0.8;
	margin-left: 6px;
	font-size: 14px;
}
.mat-search-overlay__loading,
.mat-search-overlay__empty,
.mat-search-overlay__hint {
	padding: 22px 16px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #8C9AA8;
	text-align: center;
}
.mat-search-overlay__suggestion {
	margin-top: 8px;
	padding: 14px 16px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: var(--mat-bleu-fonce, #14446B);
	background: #fff;
	border: 1.5px dashed var(--mat-rose-blush, #9E5B5C);
	border-radius: 14px;
}
.mat-search-overlay__suggestion a {
	color: var(--mat-rose-blush, #9E5B5C);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-search-overlay__suggestion a:hover,
.mat-search-overlay__suggestion a:focus { color: var(--mat-bleu-fonce, #14446B); }

.mat-search-empty__suggest {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	color: var(--mat-bleu-fonce, #14446B);
	margin: 0 0 28px;
}
.mat-search-empty__suggest a {
	color: var(--mat-rose-blush, #9E5B5C);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mat-search-empty__suggest a:hover,
.mat-search-empty__suggest a:focus { color: var(--mat-bleu-fonce, #14446B); }

.mat-search-overlay__footer {
	margin-top: 22px;
	text-align: center;
}
.mat-search-overlay__footer a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	border-radius: 30px;
	text-decoration: none;
	transition: background 150ms;
}
.mat-search-overlay__footer a:hover,
.mat-search-overlay__footer a:focus { background: var(--mat-bleu-fonce, #14446B); }

body.mat-search-overlay-open { overflow: hidden; }

@media (max-width: 768px) {
	.mat-search-overlay { padding: 16px; }
	.mat-search-overlay__content { padding: 50px 18px 36px; border-radius: 24px; max-height: calc(100vh - 32px); }
	.mat-search-overlay__title { font-size: 22px; }
	.mat-search-overlay__input { font-size: 16px; padding: 10px 0; }
	.mat-search-overlay__submit { width: 44px; height: 44px; }
	.mat-search-overlay__close { top: 14px; right: 14px; width: 40px; height: 40px; }
}

/* ============================================
 * AUTOCOMPLETE (header)
 * ============================================ */
.mat-search { position: relative; }
.mat-search__autocomplete {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1.5px solid #FFD6CF;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(20, 68, 107, 0.12);
	z-index: 999;
	max-height: 480px;
	overflow-y: auto;
	display: none;
	padding: 8px 0;
}
.mat-search__autocomplete.is-open { display: block; }
.mat-search__ac-loading,
.mat-search__ac-empty {
	padding: 18px 22px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #8C9AA8;
	text-align: center;
}
.mat-search__ac-group {
	padding: 8px 0;
	border-bottom: 1px solid #FFF0EC;
}
.mat-search__ac-group:last-child { border-bottom: none; }
.mat-search__ac-group-label {
	display: block;
	padding: 6px 22px 4px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search__ac-item {
	display: block;
	padding: 8px 22px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: none;
	line-height: 1.4;
	transition: background 120ms;
}
.mat-search__ac-item:hover,
.mat-search__ac-item.is-focused {
	background: #FFF5F3;
	color: var(--mat-rose-blush, #9E5B5C);
}
.mat-search__ac-item-acr {
	color: #8C9AA8;
	font-weight: 400;
	margin-left: 4px;
}
.mat-search__ac-footer {
	padding: 10px 22px;
	border-top: 1px solid #FFF0EC;
	text-align: center;
}
.mat-search__ac-footer a {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================
 * RESPONSIVE
 * ============================================ */
@media (max-width: 768px) {
	.mat-search-hero { padding: 40px 0 32px; }
	.mat-search-hero__decor { display: none; }
	.mat-search-hero__title { font-size: 28px; }
	.mat-search-hero__form { margin-top: 20px; padding: 4px 4px 4px 18px; }
	.mat-search-hero__input { font-size: 15px; padding: 10px 0; }
	.mat-search-hero__submit { width: 42px; height: 42px; }
	.mat-search-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 20px 0 18px;
	}
	.mat-search-tabs::-webkit-scrollbar { display: none; }
	.mat-search-item__link { flex-direction: column; gap: 8px; }
	.mat-search-item__badge { margin-top: 0; }
}

/* ==========================================================================
   05/10/2026, retours Marie du 31/08 (« Remarque globale ») : la loupe était
   bleue dans l'entête et rose foncé sur la page Recherche et dans la lightbox.
   Toutes les loupes passent au bleu foncé de l'entête ; le survol inverse
   en rose-blush (blanc sur #9E5B5C = 5,1:1, AA).
   ========================================================================== */
.mat-search-hero__submit,
.mat-search-overlay__submit {
	background: var(--mat-bleu-fonce, #14446B);
	color: #fff;
}
.mat-search-hero__submit:hover,
.mat-search-hero__submit:focus,
.mat-search-overlay__submit:hover,
.mat-search-overlay__submit:focus {
	background: var(--mat-rose-blush, #9E5B5C);
}