/**
 * Socialter — header, méga-menu, menu mobile, promo et footer.
 *
 * Maquette Figma « Socialter — site web 2026 ».
 * Mobile d'abord ; mise en page desktop à partir de 80rem (maquette 90rem).
 * Toutes les dimensions sont en rem (base 16px = 1rem) ; seuls les interlettrages
 * et la hauteur de ligne de la barre compacte restent en em (relatifs à la police).
 * Couleurs et police : presets du theme.json du thème enfant.
 */

:root {
	--stl-c-dark: var(--wp--preset--color--primary-alt-accent, #00264d);
	--stl-c-accent: var(--wp--preset--color--primary-alt, #80caff);
	--stl-c-light: var(--wp--preset--color--primary-accent, #ddf1ff);
	--stl-c-lighter: var(--wp--preset--color--accent-tres-clair, #f5fbff);
	--stl-c-sub: var(--wp--preset--color--abonnement, #fff047);
	--stl-c-white: var(--wp--preset--color--base, #fff);
	--stl-font: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);

	/* Marges latérales : 1.125rem (mobile 24.375rem) → 5.25rem (desktop 90rem). */
	--stl-gutter: clamp(1.125rem, 6.25vw - 0.4rem, 5.25rem);
	--stl-max: var(--wp--style--global--wide-size, 79.5rem);
	--stl-pad: max(var(--stl-gutter), (100% - var(--stl-max)) / 2);

	--stl-radius: 0.375rem;
	--stl-shadow-header: 0 0 0.375rem var(--stl-c-light);
	--stl-shadow-footer: 0.25rem -0.125rem 0.25rem rgba(0, 131, 224, 0.15);
	--stl-bar-h: 3.75rem;
	--stl-top: 0rem; /* Hauteur visible de la barre d'admin, mise à jour en JS. */
}

html {
	scroll-padding-top: calc(var(--stl-top) + var(--stl-bar-h) + 0.75rem);
}

html.stl-menu-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.stl-scope {
	color: var(--stl-c-dark);
	font-family: var(--stl-font);
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

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

.stl-scope :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Évite l'interligne ajouté sous les liens inline-flex. */
.stl-scope :where(.stl-list, .stl-tags, .stl-subnav__list, .stl-bar__list) > li {
	display: flex;
}

.stl-scope :where(p) {
	margin: 0;
}

.stl-scope :where(img) {
	display: block;
	max-width: none;
}

.stl-scope :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.stl-scope a {
	color: inherit;
	text-decoration: none;
}

.stl-scope[hidden],
.stl-scope [hidden] {
	display: none !important;
}

.stl-scope :focus-visible {
	outline: 0.125rem solid var(--stl-c-dark);
	outline-offset: 0.125rem;
}

.stl-icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.stl-icon--custom svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.stl-u {
	text-decoration: underline;
	text-underline-position: from-font;
}

/*
 * Styles de texte de la maquette : « Corps sans », « Bouton », « Catégorie ».
 * Les sélecteurs sont préfixés par .stl-scope pour passer devant le style global des liens du
 * theme.json (gras « hyperlien », taille et interlettrage propres), sans dépendre de l'ordre des feuilles.
 */
.stl-scope .stl-link {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.stl-scope :is(.stl-btn, .stl-link--strong) {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.stl-label,
.stl-tag {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

@supports (text-box: trim-both cap alphabetic) {
	.stl-label,
	.stl-tag {
		text-box: trim-both cap alphabetic;
	}
}

/* --------------------------------------------------------------------------
   Boutons, liens, étiquettes
   -------------------------------------------------------------------------- */

.stl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 2.75rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--stl-radius);
	white-space: nowrap;
	transition: background-color 0.15s ease, filter 0.15s ease;
}

.stl-btn--outline {
	gap: 0.5625rem;
	padding-inline: 1.125rem;
	border: 0.03125rem solid var(--stl-c-dark);
}

.stl-btn--outline:hover {
	background-color: var(--stl-c-light);
}

.stl-btn--sub {
	gap: 0.5625rem;
	padding-inline: 1.125rem;
}

.stl-btn--text {
	padding-inline: 0;
}

.stl-btn--h36 {
	height: 2.25rem;
}

.stl-btn--text:hover span,
.stl-account:hover .stl-account__name,
.stl-link:hover span,
.stl-link[aria-current="page"] span {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Bouton Menu : style « secondaire » de button.css (40px), mais 44px dans la maquette du header. */
.stl-scope .stl-menu-toggle.btn-secondaire {
	height: 2.75rem;
}

.stl-menu-toggle .stl-icon--close,
.stl-menu-toggle[aria-expanded="true"] .stl-icon--open {
	display: none;
}

.stl-menu-toggle[aria-expanded="true"] .stl-icon--close {
	display: block;
}

.stl-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.stl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.stl-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem;
	background-color: var(--stl-c-light);
	transition: background-color 0.15s ease;
}

.stl-tag:hover,
.stl-tag[aria-current="page"] {
	background-color: var(--stl-c-accent);
}

@supports not (text-box: trim-both cap alphabetic) {
	.stl-tag {
		padding-block: 0.25rem;
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.wp-site-blocks > .stl-header {
	margin-block-start: 0;
}

.stl-header {
	position: relative;
	padding-top: var(--stl-bar-h);
	background-color: var(--stl-c-white);
}

.stl-header__main {
	display: none;
}

.stl-header__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-inline: var(--stl-pad);
}

.stl-header__group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.stl-header__group--end {
	gap: 1.5rem;
}

.stl-account__name {
	max-width: 20ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stl-brand {
	position: absolute;
	top: calc(50% + 0.125rem);
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	transform: translate(-50%, -50%);
}

.stl-brand__tagline {
	white-space: nowrap;
}

.stl-subnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 2.0625rem;
	padding-inline: var(--stl-pad);
	border-block: 0.03125rem solid var(--stl-c-light);
	background-color: var(--stl-c-lighter);
}

.stl-subnav__list,
.stl-bar__list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.75rem;
}

.stl-subnav__list .stl-link {
	padding-block: 0.375rem;
}

/* Barre compacte : header mobile, et header desktop au défilement. */
.stl-bar {
	position: fixed;
	top: var(--stl-top);
	right: 0;
	left: 0;
	z-index: 1001;
	display: flex;
	align-items: center;
	height: var(--stl-bar-h);
	border-bottom: 0.0625rem solid var(--stl-c-light);
	background-color: var(--stl-c-white);
	box-shadow: var(--stl-shadow-header);
}

.stl-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding-inline: var(--stl-pad);
}

.stl-bar__start,
.stl-bar__end {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.stl-bar__end {
	flex: none;
	gap: 1.5rem;
}

.stl-bar__logo {
	flex: none;
}

.stl-bar__nav,
.stl-bar .stl-newsletter {
	display: none;
}

.stl-bar .stl-btn__label {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bannière */
.stl-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.25rem;
	background-color: var(--stl-c-accent);
	color: var(--stl-c-dark);
	text-align: center;
}

.stl-banner__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.stl-banner__link:hover .stl-u {
	text-decoration-thickness: 0.125rem;
}

.stl-banner__text--desktop,
.stl-banner__arrow--desktop,
.stl-banner__close {
	display: none;
}

.stl-banner__close {
	position: absolute;
	top: 50%;
	right: 0.875rem;
	transform: translateY(-50%);
}

/* Bannière collée sous la barre compacte au défilement (la hauteur est réservée par le header). */
.stl-header.is-banner-stuck {
	padding-bottom: var(--stl-banner-h, 0);
}

.stl-header.is-banner-stuck .stl-banner {
	position: fixed;
	top: calc(var(--stl-top) + var(--stl-bar-h));
	right: 0;
	left: 0;
	z-index: 1000;
}

/* Section 3 propre au mobile : une colonne par affichage, l'autre est masquée. */
@media (max-width: 79.9375rem) {
	.stl-panel__col--desk {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Panneau de menu (méga-menu desktop / menu mobile plein écran)
   -------------------------------------------------------------------------- */

.stl-menu {
	position: fixed;
	top: var(--stl-menu-top, var(--stl-bar-h));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.stl-menu__panel {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block: 0.03125rem solid var(--stl-c-light);
	background-color: var(--stl-c-lighter);
	animation: stl-menu-in 0.18s ease-out;
}

.stl-menu__backdrop {
	display: none;
}

@keyframes stl-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}
}

/* --------------------------------------------------------------------------
   Contenu partagé menu / footer — mise en page mobile
   -------------------------------------------------------------------------- */

.stl-panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3rem var(--stl-pad);
}

.stl-panel__col {
	display: contents;
}

.stl-panel__brand {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
}

.stl-panel__s1 {
	order: 2;
}

.stl-panel__issue {
	order: 3;
}

.stl-panel__s3 {
	order: 4;
}

.stl-panel__themes {
	order: 5;
}

.stl-panel__social {
	order: 6;
}

.stl-panel__news {
	order: 7;
	display: none;
}

.stl-panel__issue,
.stl-panel__s3,
.stl-panel__themes,
.stl-panel__social {
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--stl-c-light);
}

.stl-panel__themes,
.stl-panel__social {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.stl-list {
	display: grid;
}

.stl-list--s1 {
	gap: 0.375rem;
}

.stl-list--s1 .stl-link,
.stl-list--s3 .stl-link {
	min-height: 2.5rem;
}

.stl-list--s3,
.stl-list--themes {
	grid-template-rows: repeat(var(--stl-rows, 4), auto);
	grid-template-columns: repeat(2, minmax(0, 10.5rem));
	grid-auto-flow: column;
	gap: 0.375rem;
}

.stl-list--themes {
	gap: 0.75rem;
}

.stl-list--social {
	grid-template-columns: repeat(2, minmax(0, 10.5rem));
	column-gap: 1.125rem;
	row-gap: 1rem;
}

.stl-list--social .stl-link {
	gap: 0.5rem;
}

/* Numéro en kiosque */
.stl-issue {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
}

.stl-issue__cover {
	flex: none;
	width: 6.1875rem;
	height: 8.1875rem;
}

.stl-issue__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stl-issue__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.stl-issue__title {
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.stl-issue__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.stl-footer {
	border-block: 0.03125rem solid var(--stl-c-light);
	background-color: var(--stl-c-lighter);
	box-shadow: var(--stl-shadow-footer);
}

/* --------------------------------------------------------------------------
   Promo bas d'écran (toaster mobile / bannière desktop)
   -------------------------------------------------------------------------- */

.stl-promo {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 990;
	border-radius: var(--stl-radius) var(--stl-radius) 0 0;
	background-color: var(--stl-c-white);
	box-shadow: var(--stl-shadow-footer);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.stl-promo.is-visible {
	transform: none;
}

/* Contenu : blocs natifs (couleurs, marges et alignements viennent de l'éditeur). */
.stl-promo__content {
	overflow: hidden;
	border-radius: inherit;
}

.stl-promo__content > :first-child {
	margin-block-start: 0;
}

.stl-promo__content > :last-child {
	margin-block-end: 0;
}

.stl-promo__content a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.stl-promo__content a:hover {
	text-decoration-thickness: 0.125rem;
}

/* Poignée à faire glisser (mobile). */
.stl-promo__handle {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	z-index: 1;
	display: flex;
	transform: translateX(-50%);
	touch-action: none;
}

.stl-promo__close {
	display: none;
}

/* --------------------------------------------------------------------------
   Desktop (≥ 80rem)
   -------------------------------------------------------------------------- */

@media (min-width: 80rem) {
	.stl-header {
		padding-top: 0;
	}

	.stl-header__main {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding-top: 1.5rem;
		border-bottom: 0.0625rem solid var(--stl-c-light);
		background-color: var(--stl-c-white);
		box-shadow: var(--stl-shadow-header);
	}

	/* La barre compacte n'apparaît qu'une fois le header complet sorti de l'écran. */
	.stl-bar {
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.stl-header.is-scrolled .stl-bar {
		visibility: visible;
		transform: none;
		transition: transform 0.25s ease;
	}

	.stl-bar__start {
		gap: 1.5rem;
	}

	.stl-bar__nav {
		display: block;
		min-width: 0;
	}

	.stl-bar__list {
		height: 1.4em;
		overflow: hidden;
	}

	.stl-bar .stl-newsletter {
		display: inline-flex;
	}

	.stl-bar .stl-btn__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.stl-banner {
		padding-inline: 3.5rem;
		background-color: var(--stl-c-dark);
		color: var(--stl-c-white);
	}

	.stl-banner__text--desktop {
		display: inline;
	}

	.stl-banner__arrow--desktop {
		display: block;
	}

	.stl-banner__text--mobile,
	.stl-banner__arrow--mobile {
		display: none;
	}

	.stl-banner__close {
		display: flex;
	}

	/* Méga-menu */
	.stl-menu__panel {
		flex: 0 1 auto;
	}

	.stl-menu__backdrop {
		display: block;
		flex: 1 1 0;
	}

	.stl-panel--menu,
	.stl-panel--footer {
		flex-direction: row;
	}

	.stl-panel--menu .stl-panel__col,
	.stl-panel--footer .stl-panel__col {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.stl-panel--menu .stl-panel__col--mob {
		display: none;
	}

	.stl-panel--menu :is(.stl-panel__issue, .stl-panel__s3, .stl-panel__themes, .stl-panel__social),
	.stl-panel--footer :is(.stl-panel__issue, .stl-panel__s3, .stl-panel__themes, .stl-panel__social) {
		padding-top: 0;
		border-top: 0;
	}

	.stl-panel :is(.stl-list--s1, .stl-list--s3) {
		grid-template-rows: none;
		grid-template-columns: none;
		grid-auto-flow: row;
	}

	.stl-panel :is(.stl-list--s1, .stl-list--s3) .stl-link {
		min-height: 2.25rem;
		white-space: nowrap;
	}

	.stl-panel--menu {
		align-items: stretch;
		gap: 3rem;
	}

	.stl-panel--menu .stl-panel__col--a,
	.stl-panel--menu .stl-panel__col--b,
	.stl-panel--menu .stl-panel__col--c {
		flex: 0 1 12.5rem;
	}

	.stl-panel--menu .stl-panel__col--d {
		flex: 1 1 22.5rem;
		gap: 3rem;
		padding-left: 3rem;
		border-left: 0.0625rem solid var(--stl-c-light);
	}

	.stl-panel--menu .stl-panel__brand,
	.stl-panel--menu .stl-panel__social {
		display: none;
	}

	.stl-panel--menu .stl-panel__news {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.stl-panel--menu .stl-panel__themes {
		padding-block: 1.125rem;
	}

	.stl-panel--menu .stl-list--themes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Footer */
	.stl-panel--footer {
		align-items: flex-start;
		justify-content: center;
		gap: 1.5rem;
	}

	.stl-panel--footer .stl-panel__col--a {
		flex: 0 1 18.75rem;
		gap: 3rem;
	}

	.stl-panel--footer .stl-panel__col--b {
		flex: 0 1 12rem;
	}

	.stl-panel--footer .stl-panel__col--c {
		flex: 0 1 12.0625rem;
		padding-block: 1rem 0.75rem;
	}

	.stl-panel--footer .stl-panel__col--d {
		flex: 1 1 25rem;
		gap: 3rem;
	}

	.stl-panel--footer .stl-panel__logo-img {
		width: 18.6875rem;
		height: 3.12541rem;
	}

	.stl-panel--footer :is(.stl-list--s1, .stl-list--s3) {
		gap: 0.75rem;
	}

	.stl-panel--footer .stl-list--themes {
		grid-template-rows: none;
		grid-template-columns: none;
		grid-auto-flow: row;
	}

	.stl-panel--footer .stl-issue {
		align-items: center;
	}

	.stl-panel--footer .stl-list--social {
		grid-template-rows: repeat(2, auto);
		grid-template-columns: none;
		grid-auto-columns: max-content;
		grid-auto-flow: column;
		column-gap: 3rem;
		row-gap: 0.75rem;
	}

	/* Numéro en kiosque (méga-menu et footer) */
	.stl-panel .stl-issue {
		gap: 1.5rem;
	}

	.stl-panel .stl-issue__cover {
		width: 8.5rem;
		height: 11.1875rem;
	}

	.stl-panel .stl-issue__body {
		gap: 1.5rem;
	}

	.stl-panel .stl-issue__title {
		font-size: 1.625rem;
	}

	/* Promo : bannière pleine largeur */
	.stl-promo {
		border-radius: 0;
		box-shadow: none;
	}

	.stl-promo__handle {
		display: none;
	}

	.stl-promo__close {
		position: absolute;
		top: 0.25rem;
		right: 0.75rem;
		z-index: 1;
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Préférences et impression
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.stl-bar,
	.stl-promo,
	.stl-menu__panel {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.stl-bar,
	.stl-menu,
	.stl-banner,
	.stl-promo {
		display: none !important;
	}

	.stl-header {
		padding-top: 0;
	}
}

/* Aperçu du back-office : page assez longue pour tester l'état « au défilement ». */
html.stl-is-preview body {
	min-height: 250vh;
}

/* --------------------------------------------------------------------------
   Modale de recherche (bouton Rechercher du header)
   Maquette « Recherche » (2083:5748) : voile noir 50 % flouté de 2px, carte
   blanche de 838px (bordure 1px bleu clair, rayon 6px, padding 24px, ombre
   4px 4px 2px noire à 15 %) : loupe, champ, bouton Rechercher de 40px.
   Les suggestions (recherches fréquentes, articles) ne sont pas dans la
   maquette : même carte, séparées du champ par un filet.
   -------------------------------------------------------------------------- */

html.stl-search-open {
	overflow: hidden;
}

.stl-sr-only {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.stl-search-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
}

.stl-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0.5);
	-webkit-backdrop-filter: blur(0.125rem);
	backdrop-filter: blur(0.125rem);
	animation: stl-search-fade 0.18s ease-out;
}

.stl-search-modal__card {
	position: absolute;
	top: calc(var(--stl-top) + 5rem);
	left: 50%;
	width: min(52.375rem, 100% - 2 * var(--stl-gutter));
	max-height: calc(100dvh - var(--stl-top) - 6.5rem);
	display: flex;
	flex-direction: column;
	transform: translateX(-50%);
	border: 0.0625rem solid var(--stl-c-light);
	border-radius: var(--stl-radius);
	background-color: var(--stl-c-white);
	box-shadow: 0.25rem 0.25rem 0.125rem rgb(0 0 0 / 0.15);
	animation: stl-search-in 0.18s ease-out;
}

@keyframes stl-search-fade {
	from {
		opacity: 0;
	}
}

@keyframes stl-search-in {
	from {
		opacity: 0;
		transform: translate(-50%, -0.375rem);
	}
}

.stl-search-form {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem;
}

.stl-search-form__input {
	flex: 1 1 0;
	min-width: 0;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--stl-c-dark);
	font-family: var(--stl-font);
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
}

/* Aucune bordure ni contour sur le champ, focus compris : la carte tient lieu de cadre.
   Sélecteurs renforcés pour passer devant « .stl-scope :focus-visible » et les
   styles d'input du thème. */
.stl-scope .stl-search-form .stl-search-form__input,
.stl-scope .stl-search-form .stl-search-form__input:hover,
.stl-scope .stl-search-form .stl-search-form__input:focus,
.stl-scope .stl-search-form .stl-search-form__input:focus-visible {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.stl-search-form__input::placeholder {
	color: var(--wp--preset--color--secondary, #565656);
	opacity: 1;
}

.stl-search-form__input::-webkit-search-cancel-button,
.stl-search-form__input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

.stl-search-form__submit {
	flex: none;
	height: 2.5rem;
	padding: 0.375rem 1.125rem;
	border: 0.03125rem solid var(--stl-c-dark);
	border-radius: var(--stl-radius);
	background-color: var(--stl-c-accent);
	color: var(--stl-c-dark);
	font-family: var(--stl-font);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.stl-search-form__submit:hover {
	filter: brightness(0.95);
}

.stl-search-results {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: 0.375rem 0.75rem;
	border-top: 0.0625rem solid var(--stl-c-light);
}

.stl-search-results__title {
	padding: 0.75rem 1.5rem 0.375rem;
	color: var(--stl-c-dark);
}

.stl-search-results__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.625rem 1.5rem;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.stl-search-results__item:hover a,
.stl-search-results__item.is-active a {
	background-color: var(--stl-c-lighter);
}

.stl-search-results__text {
	min-width: 0;
}

.stl-search-results__tag {
	flex: none;
	color: var(--wp--preset--color--secondary, #565656);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

@media (min-width: 80rem) {
	.stl-search-modal__card {
		top: calc(var(--stl-top) + 10rem);
		max-height: calc(100dvh - var(--stl-top) - 12rem);
	}

	.stl-search-form {
		gap: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stl-search-modal__backdrop,
	.stl-search-modal__card {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   « Se déconnecter » : tout en bas du menu mobile (absent du méga-menu desktop)
   -------------------------------------------------------------------------- */

.stl-panel__logout {
	order: 8;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--stl-c-light);
}

.stl-logout {
	width: 100%;
}

.stl-logout:hover {
	background-color: var(--stl-c-light);
}

@media (min-width: 80rem) {
	.stl-panel--menu .stl-panel__logout {
		display: none;
	}
}