/*!
 * FAQ Microlide — feuille de style front-office.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * Tout est préfixé .mlfaq : la FAQ s'insère dans le contenu d'une page, elle
 * ne doit pas déteindre sur le thème — ni le thème sur elle. Les couleurs
 * reprennent les jetons du widget d'assistance (spec §4) pour que les deux
 * surfaces se ressemblent.
 *
 * PARTI PRIS : 143 questions, ça se parcourt, ça ne se lit pas. La mise en
 * page sert donc d'abord le repérage — barre d'outils qui reste sous la main,
 * chaque rubrique formant un bloc qui CONTIENT ses questions plutôt qu'un
 * titre suivi de cartes flottantes, et un état ouvert impossible à confondre
 * avec l'état fermé.
 *
 * PAS DE THÈME SOMBRE : la FAQ vit à l'intérieur d'une page du site, qui est
 * claire. Réagir à prefers-color-scheme donnerait un bloc sombre au milieu
 * d'une page blanche chez les visiteurs dont le système est en sombre. On
 * peint donc explicitement, en clair, sans jamais hériter du fond de l'hôte.
 * ────────────────────────────────────────────────────────────────────────────
 */

.mlfaq {
	/* ── Jetons ──────────────────────────────────────────────────────────
	 * Le bleu de marque #0197D5 ne tient que 3,3 de contraste sur blanc :
	 * insuffisant pour du texte. Il est donc assombri pour tout ce qui porte
	 * des mots (--mlf-blue) et conservé intact pour les aplats et les filets
	 * (--mlf-blue-vif), où le contraste n'est pas en jeu.
	 */
	--mlf-blue: #017AAD;
	--mlf-blue-vif: #0197D5;
	--mlf-blue-hover: #015C82;
	--mlf-blue-pale: #EAF6FC;
	--mlf-navy: #1C2B5E;
	--mlf-amber: #F2B01E;

	--mlf-text: #414B57;
	--mlf-strong: #16213F;
	--mlf-muted: #697580;

	--mlf-page: #FFFFFF;
	--mlf-soft: #F4F7FA;
	--mlf-line: #E2E9EF;
	--mlf-line-soft: #EEF3F7;
	--mlf-code-bg: #F1F5F8;

	--mlf-radius: 14px;
	--mlf-radius-sm: 10px;

	--mlf-shadow: 0 1px 2px rgba(28, 43, 94, .04), 0 2px 8px rgba(28, 43, 94, .05);
	--mlf-shadow-hover: 0 2px 4px rgba(28, 43, 94, .06), 0 8px 20px rgba(28, 43, 94, .09);

	/* Décalage de la barre collante. À augmenter si le thème a un en-tête
	   fixe : .mlfaq { --mlf-top: 90px; } dans le CSS additionnel. */
	--mlf-top: 0px;

	color: var(--mlf-text);
	line-height: 1.65;

	/*
	 * Tout le dimensionnement du bloc part d'ici, en `em` et jamais en `rem` :
	 * `rem` se calcule sur la racine du document, donc sur un réglage du
	 * thème. Un thème qui pose html { font-size: 62.5% } — c'est courant —
	 * rétrécirait toute la FAQ sans qu'on comprenne pourquoi.
	 */
	font-size: 17px;
}

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

.mlfaq-intro {
	margin: 0 0 1.75em;
	font-size: 1.05em;
	color: var(--mlf-text);
}

/* ── Barre d'outils ─────────────────────────────────────────────────────
 * Collante : sur 143 questions, remonter en haut pour relancer une recherche
 * est le premier irritant. Le fond est opaque, pas translucide — un flou
 * d'arrière-plan coûte cher au défilement sur mobile pour un gain nul ici.
 */

.mlfaq-toolbar {
	position: sticky;
	top: var(--mlf-top);
	z-index: 20;
	margin: 0 0 1.75em;
	padding: 1em 0 .75em;
	background: var(--mlf-page);
}

/* Le filet n'apparaît qu'une fois la barre décollée : au repos, il ferait
   une ligne de trop sous le champ de recherche. */
.mlfaq-toolbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--mlf-line);
	opacity: 0;
	transition: opacity .2s ease;
}

.mlfaq-toolbar.is-stuck::after {
	opacity: 1;
}

/* ── Recherche ──────────────────────────────────────────────────────── */

.mlfaq-search {
	position: relative;
	display: flex;
	align-items: center;
}

.mlfaq-search-icon {
	position: absolute;
	left: 18px;
	width: 20px;
	height: 20px;
	color: var(--mlf-muted);
	pointer-events: none;
}

.mlfaq-search-field {
	width: 100%;
	height: 54px;
	padding: 0 3.25em;
	font: inherit;
	font-size: 1.0625em;
	color: var(--mlf-strong);
	background: var(--mlf-soft);
	border: 1px solid transparent;
	border-radius: var(--mlf-radius);
	appearance: none;
	-webkit-appearance: none;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.mlfaq-search-field::placeholder {
	color: var(--mlf-muted);
	opacity: 1;
}

.mlfaq-search-field:focus {
	outline: none;
	background: var(--mlf-page);
	border-color: var(--mlf-blue-vif);
	box-shadow: 0 0 0 4px rgba(1, 151, 213, .15);
}

/* Croix native de Safari et Chrome : la nôtre suffit. */
.mlfaq-search-field::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
}

.mlfaq-search-clear {
	position: absolute;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--mlf-muted);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}

.mlfaq-search-clear svg {
	width: 16px;
	height: 16px;
}

.mlfaq-search-clear:hover {
	color: var(--mlf-strong);
	background: var(--mlf-line-soft);
}

/* ── Filtres par rubrique ───────────────────────────────────────────── */

.mlfaq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: .9em 0 0;
}

/*
 * Une rubrique sans résultat est retirée de la liste pendant une recherche.
 * La règle est indispensable, pas décorative : `display: inline-flex` ci-dessous
 * l'emporte sur le `[hidden] { display: none }` de la feuille du navigateur, qui
 * n'a qu'une specificité d'attribut. Sans cette ligne, le script masquerait sans
 * que rien ne disparaisse — comme pour .mlfaq-group[hidden] et .mlfaq-item[hidden].
 */
.mlfaq-filter[hidden] {
	display: none;
}

.mlfaq-filter {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .45em .9em;
	font: inherit;
	font-size: .9375em;
	line-height: 1.3;
	color: var(--mlf-navy);
	background: var(--mlf-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mlfaq-filter:hover {
	border-color: var(--mlf-blue-vif);
}

.mlfaq-filter.is-active {
	color: #fff;
	background: var(--mlf-navy);
	border-color: var(--mlf-navy);
}

.mlfaq-filter-n {
	font-size: .8125em;
	font-variant-numeric: tabular-nums;
	color: var(--mlf-muted);
}

.mlfaq-filter.is-active .mlfaq-filter-n {
	color: rgba(255, 255, 255, .72);
}

/* ── Ligne de compte ────────────────────────────────────────────────── */

/* Le compteur est VIDE tant qu'il n'y a ni recherche ni filtre (faq.js), et un
   bloc sans contenu n'a pas de hauteur : rien ne doit donc lui réserver de
   place. Ni `min-height`, ni conteneur, ni marge inconditionnelle — la barre
   d'outils étant collante, le moindre blanc réservé ici resterait sous les
   filtres pendant tout le défilement. La marge n'arrive qu'avec le texte. */
.mlfaq-count {
	margin: 0;
	font-size: .875em;
	color: var(--mlf-muted);
}

.mlfaq-count:not(:empty) {
	margin: .9em 0 0;
}

/* ── Rubriques : chacune est un bloc qui contient ses questions ──────── */

.mlfaq-list {
	display: flex;
	flex-direction: column;
}

/* L'écart se règle par marge et non par `gap`, pour pouvoir le resserrer
   quand le bloc est replié : dix rubriques fermées forment un sommaire, et un
   sommaire aéré de 2 em par ligne se parcourt mal. */
.mlfaq-group {
	margin-bottom: 2em;
	overflow: hidden;
	background: var(--mlf-page);
	border: 1px solid var(--mlf-line);
	border-radius: var(--mlf-radius);
	box-shadow: var(--mlf-shadow);
	scroll-margin-top: calc(var(--mlf-top) + 1em);
}

details.mlfaq-group:not([open]) {
	margin-bottom: .6em;
}

.mlfaq-group:last-child {
	margin-bottom: 0;
}

.mlfaq-group[hidden] {
	display: none;
}

/* Bandeau plein : c'est le repère le plus fort de la page, on doit savoir
   dans quelle rubrique on lit sans remonter. */
.mlfaq-group-title {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: 0;
	padding: .8em 1em;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	background: var(--mlf-navy);
	cursor: pointer;
	list-style: none;
	transition: background .15s ease;
}

.mlfaq-group-title::-webkit-details-marker { display: none; }
.mlfaq-group-title::marker { content: ""; }

.mlfaq-group-title:hover {
	background: #24397A;
}

.mlfaq-group-title:focus-visible {
	outline: 3px solid var(--mlf-blue-vif);
	outline-offset: -3px;
}

/* Le titre reste un h2 pour le plan du document, mais il ne doit pas
   introduire ses propres marges dans le bandeau. */
.mlfaq-group-label {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.mlfaq-group-chevron {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border-radius: 50%;
	transition: transform .2s ease, background .15s ease;
}

.mlfaq-group-chevron svg {
	width: .85em;
	height: .85em;
}

.mlfaq-group[open] > .mlfaq-group-title .mlfaq-group-chevron {
	transform: rotate(180deg);
}

.mlfaq-group-title:hover .mlfaq-group-chevron {
	background: rgba(255, 255, 255, .24);
}

.mlfaq-group-n {
	flex: 0 0 auto;
	font-size: .62em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: rgba(255, 255, 255, .78);
}

.mlfaq-group-body {
	padding: .35em 0;
}

/* ── Questions ──────────────────────────────────────────────────────── */

/* Les questions sont des lignes du bloc, séparées par un filet — plus des
   cartes flottantes. C'est ce qui fait qu'on lit « 27 questions DANS
   Produit » et non « 27 cartes posées sous un titre ». */
.mlfaq-item {
	border-top: 1px solid var(--mlf-line-soft);
	scroll-margin-top: calc(var(--mlf-top) + 5em);
}

.mlfaq-item:first-child,
.mlfaq-item[hidden] + .mlfaq-item {
	border-top: 0;
}

.mlfaq-item[hidden] {
	display: none;
}

.mlfaq-item[open] {
	background: var(--mlf-blue-pale);
	box-shadow: inset 3px 0 0 0 var(--mlf-blue-vif);
	border-top-color: transparent;
}

.mlfaq-item:target {
	background: var(--mlf-blue-pale);
	box-shadow: inset 3px 0 0 0 var(--mlf-blue-vif);
}

.mlfaq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .85em 1.05em;
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mlf-navy);
	cursor: pointer;
	list-style: none;
	transition: color .15s ease, background .15s ease;
}

.mlfaq-item:not([open]) .mlfaq-q:hover {
	background: var(--mlf-soft);
}

/* Le triangle par défaut de <summary>, sur les deux moteurs. */
.mlfaq-q::-webkit-details-marker { display: none; }
.mlfaq-q::marker { content: ""; }

.mlfaq-q:hover {
	color: var(--mlf-blue-hover);
}

.mlfaq-q:focus-visible {
	outline: 2px solid var(--mlf-blue-vif);
	outline-offset: -3px;
}

.mlfaq-q-text {
	flex: 1 1 auto;
}

.mlfaq-chevron {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	color: var(--mlf-blue);
	background: var(--mlf-soft);
	border-radius: 50%;
	transition: transform .2s ease, background .15s ease, color .15s ease;
}

.mlfaq-chevron svg {
	width: .95em;
	height: .95em;
}

.mlfaq-q:hover .mlfaq-chevron {
	background: #E3EDF4;
}

.mlfaq-item[open] .mlfaq-chevron {
	color: #fff;
	background: var(--mlf-blue-vif);
	transform: rotate(180deg);
}

/* ── Réponse ────────────────────────────────────────────────────────── */

.mlfaq-a {
	padding: .25em 1.25em 1.5em;
	/* La colonne de lecture reste étroite même si le thème est large :
	   au-delà d'environ 78 caractères l'œil perd la ligne. */
	max-width: 78ch;
}

.mlfaq-a > *:first-child { margin-top: 0; }
.mlfaq-a > *:last-child { margin-bottom: 0; }

.mlfaq-a p {
	margin: 0 0 .9em;
}

.mlfaq-a h3,
.mlfaq-a h4,
.mlfaq-a h5,
.mlfaq-a h6 {
	margin: 1.5em 0 .6em;
	color: var(--mlf-strong);
	line-height: 1.35;
}

.mlfaq-a h3 { font-size: 1.05em; }
.mlfaq-a h4 { font-size: 1em; }
.mlfaq-a h5,
.mlfaq-a h6 { font-size: .95em; }

.mlfaq-a ul,
.mlfaq-a ol {
	margin: 0 0 .9em;
	padding-left: 1.35em;
}

.mlfaq-a li {
	margin: 0 0 .4em;
}

.mlfaq-a li::marker {
	color: var(--mlf-blue);
}

.mlfaq-a li > ul,
.mlfaq-a li > ol {
	margin: .4em 0;
}

.mlfaq-a a {
	color: var(--mlf-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.mlfaq-a a:hover {
	color: var(--mlf-blue-hover);
}

.mlfaq-a code {
	padding: .12em .4em;
	font-size: .9em;
	color: var(--mlf-strong);
	background: var(--mlf-code-bg);
	border-radius: 4px;
}

.mlfaq-code {
	margin: 0 0 .9em;
	padding: .9em 1.1em;
	overflow-x: auto;
	font-size: .875em;
	background: var(--mlf-code-bg);
	border-radius: var(--mlf-radius-sm);
}

.mlfaq-code code {
	padding: 0;
	background: none;
}

.mlfaq-a blockquote {
	margin: 0 0 .9em;
	padding: .5em 0 .5em 1.1em;
	color: var(--mlf-text);
	border-left: 3px solid var(--mlf-amber);
}

.mlfaq-a hr {
	margin: 1.35em 0;
	border: 0;
	border-top: 1px solid var(--mlf-line-soft);
}

/* Un tableau plus large que la colonne défile dans son propre cadre : la
   page, elle, ne doit jamais défiler horizontalement. */
.mlfaq-table-wrap {
	margin: 0 0 .9em;
	overflow-x: auto;
	border: 1px solid var(--mlf-line);
	border-radius: var(--mlf-radius-sm);
}

.mlfaq-a table {
	width: 100%;
	border-collapse: collapse;
	font-size: .925em;
}

.mlfaq-a th,
.mlfaq-a td {
	padding: .6em .85em;
	text-align: left;
	border-bottom: 1px solid var(--mlf-line-soft);
}

.mlfaq-a tr:last-child td {
	border-bottom: 0;
}

.mlfaq-a th {
	color: var(--mlf-navy);
	background: var(--mlf-soft);
	font-weight: 600;
	white-space: nowrap;
}

/* ── Renvois « Voir aussi » ─────────────────────────────────────────── */

.mlfaq-a p:last-of-type strong:first-child {
	color: var(--mlf-navy);
}

/* ── États ──────────────────────────────────────────────────────────── */

.mlfaq-empty {
	margin: 0;
	padding: 3em 1.5em;
	color: var(--mlf-muted);
	text-align: center;
	background: var(--mlf-soft);
	border-radius: var(--mlf-radius);
}

.mlfaq-void {
	padding: 1.35em;
	background: #FFF7E6;
	border: 1px solid #F5D584;
	border-radius: var(--mlf-radius);
}

.mlfaq mark {
	padding: 0 .12em;
	color: inherit;
	background: rgba(242, 176, 30, .38);
	border-radius: 3px;
}

/* Utilitaire d'accessibilité : présent dans WordPress, redéfini ici au cas
   où le thème ne le fournirait pas. */
.mlfaq .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Écrans étroits ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
	/* On réduit la base plutôt que chaque règle : tout suit, y compris les
	   titres, puisque le bloc est dimensionné en `em`. */
	.mlfaq {
		font-size: 16px;
	}

	.mlfaq-search-field {
		height: 3em;
	}

	.mlfaq-group-title {
		flex-wrap: wrap;
		gap: .1em .6em;
		font-size: 1.2em;
	}

	.mlfaq-group-label {
		/* Le nom prend toute la largeur, le compte et le chevron se placent
		   dessous — un intitulé long ne doit pas écraser le chevron. */
		flex: 1 0 100%;
		order: 1;
	}

	.mlfaq-group-n { order: 2; }

	.mlfaq-group-chevron {
		order: 3;
		margin-left: auto;
	}

	.mlfaq-q {
		padding: .8em .9em;
		font-size: 1.075em;
	}

	.mlfaq-a {
		padding: .25em .9em 1.2em;
	}

	.mlfaq-filters {
		/* Les rubriques défilent sur une ligne plutôt que d'occuper cinq
		   lignes au-dessus du contenu. */
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: .35em;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.mlfaq-filter {
		flex: 0 0 auto;
	}

	.mlfaq-list {
		gap: 2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlfaq *,
	.mlfaq *::before,
	.mlfaq *::after {
		transition: none !important;
		animation: none !important;
	}

	.mlfaq-item:hover {
		transform: none;
	}
}