/* ═══════════════════════════════════════════════════════════════════════════
   14 — AVANT DE COMMANDER

   Bande lin (`.fmt-section--lin`) : le panneau creusé qui portait la section
   est devenu la bande elle-même. Titre et relance à gauche, cinq questions en
   accordéon à droite. Les panneaux sont des `<details>` natifs partageant le
   même attribut `name` : le navigateur n'en laisse qu'un ouvert, sans une ligne
   de JavaScript.

   Aucun séparateur : chaque question est une case en surface relevée (le
   `--surface-contenant` de la bande lin), un beige plus clair que la bande, et
   c'est l'espace entre les cases qui les distingue.

   `.fmt-section` et `.fmt-section--lin` viennent de style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le pied de page pointe `/#questions` : la bande ne doit pas s'arrêter collée
   sous la barre de navigation. */
.fmt-accueil-faq {
	scroll-margin-block-start: var(--fmt-nav-h);
}

.fmt-accueil-faq > *,
.fmt-accueil-faq .wp-block-group > * {
	margin-block: 0;
}

/* ─── Grille ─────────────────────────────────────────────────────────────── */

/*
 * Une seule colonne jusqu'à 1024 px. En dessous, une colonne de titre de
 * 380 px laisse moins de 260 px aux questions : chacune tiendrait sur trois
 * lignes, avec le signe « + » perdu au bout. Empilé, l'ensemble se lit sans
 * effort. La colonne de titre reprend ses 380 px à partir de 1180 px.
 */
.fmt-accueil-faq .fmt-accueil-faq__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-32);
}

@media (min-width: 1024px) {
	.fmt-accueil-faq .fmt-accueil-faq__grille {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--space-48);
	}
}

@media (min-width: 1180px) {
	.fmt-accueil-faq .fmt-accueil-faq__grille {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: var(--space-64);
	}
}

/* ─── Colonne de titre ───────────────────────────────────────────────────── */

.fmt-accueil-faq .fmt-accueil-faq__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.fmt-accueil-faq .fmt-accueil-faq__titre {
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* Texte discret sur lin : 4,81:1. Le lien « Écrivez-nous » reçoit le
   soulignement des liens de texte courant (style.css). */
.fmt-accueil-faq .fmt-accueil-faq__relance {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-body);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ─── La liste d'accordéons ──────────────────────────────────────────────── */

.fmt-accueil-faq .fmt-accueil-faq__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* Une case par question : surface relevée sur la bande lin, rayon 8 px, sans
   trait. Au survol de la question, la case s'éclaircit d'un cran. */
.fmt-accueil-faq .fmt-accueil-faq__item {
	border-radius: var(--radius-8);
	background: var(--surface-contenant);
	transition: background-color var(--dur-quick) var(--ease-soft);
}

.fmt-accueil-faq .fmt-accueil-faq__item:has(> summary:hover) {
	background: var(--surface-contenant-survol);
}

/* La question porte tout le rembourrage : c'est toute la largeur de la case
   qui répond au clic, pas seulement le texte. */
.fmt-accueil-faq .fmt-accueil-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16);
	border-radius: var(--radius-8);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	line-height: var(--lh-ui);
	color: var(--text-heading);
	cursor: pointer;
	list-style: none;
}

/* Le triangle par défaut du navigateur : masqué des deux façons qui existent.
   Les deux règles restent séparées — un sélecteur inconnu invalide la règle
   entière, et `::-webkit-details-marker` n'existe pas hors de WebKit. */
.fmt-accueil-faq .fmt-accueil-faq__item > summary::marker {
	content: "";
}

.fmt-accueil-faq .fmt-accueil-faq__item > summary::-webkit-details-marker {
	display: none;
}

/*
 * Le signe « + » dans sa pastille ronde (un repère : il reste rond). Les deux
 * traits sont dessinés par deux dégradés de 1,5 px d'épaisseur, la graisse de
 * l'icône `plus` du kit, dans la couleur du texte de la pastille. Fermée : lin
 * sur la case claire. Ouverte : pétrole plein, signe ivoire, et un quart de
 * tour qui en fait un « × ». Deux indices simultanés — la rotation et le
 * contraste — plutôt que la seule couleur.
 */
.fmt-accueil-faq .fmt-accueil-faq__item > summary::after {
	content: "";
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--radius-pill);
	background-color: var(--lin);
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-position: center, center;
	background-size: 12px 1.5px, 1.5px 12px;
	background-repeat: no-repeat;
	color: var(--petrole);
	transition:
		transform var(--dur-ui) var(--ease-soft),
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

.fmt-accueil-faq .fmt-accueil-faq__item > summary:hover::after {
	background-color: var(--lin-survol);
}

.fmt-accueil-faq .fmt-accueil-faq__item[open] > summary::after {
	transform: rotate(45deg);
	background-color: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-accueil-faq .fmt-accueil-faq__item[open] > summary:hover::after {
	background-color: var(--petrole-survol);
}

/* La réponse est un enfant direct de `<details>`, qui n'est pas un groupe : la
   neutralisation des marges de flux déclarée en tête de feuille ne l'atteint
   pas, elle est donc reposée ici. */
.fmt-accueil-faq .fmt-accueil-faq__reponse {
	margin-block: 0;
	padding: 0 var(--space-16) var(--space-16);
	max-inline-size: 44rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-body);
	text-wrap: pretty;
}

@media (min-width: 783px) {
	.fmt-accueil-faq .fmt-accueil-faq__item > summary {
		padding: var(--space-24);
		font-size: var(--wp--preset--font-size--large);
	}

	.fmt-accueil-faq .fmt-accueil-faq__reponse {
		padding: 0 var(--space-24) var(--space-24);
		font-size: var(--wp--preset--font-size--medium);
	}
}