/* ═══════════════════════════════════════════════════════════════════════════
   34 — MARQUE PRIVÉE : LES QUESTIONS QUI REVIENNENT

   Même mécanique que la foire aux questions de l'accueil — des `<details>`
   natifs, mêmes classes `.fmt-faq__*` — mais un autre dessin : une liste, pas
   des cartes, avec un « + » qui pivote à l'ouverture.

   Bande ivoire. Les filets qui séparaient les questions ont disparu : le
   client ne veut pas de traits là où l'espace suffit. Les questions sont donc
   séparées par l'espacement, et la question ouverte se teinte de lin
   (`--surface-contenant`) pour tenir ensemble avec sa réponse. Le « + » est
   un rond lin, pétrole plein quand le panneau est ouvert.

   CETTE FEUILLE SE SUFFIT À ELLE-MÊME. Elle ne suppose pas que `07-faq.css`
   soit servi sur la page — il ne l'est pas, functions.php le réserve à la
   marque blanche — et tout y est donc écrit en entier plutôt qu'en écart.
   Chaque règle est portée par `.fmt-privee-faq` : si les deux feuilles se
   rencontrent un jour, celle-ci l'emporte par sa spécificité, et la foire aux
   questions de la marque blanche n'est jamais touchée.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-faq > * {
	margin-block: 0;
}

/* La barre de navigation est collante : l'ancre doit s'arrêter dessous. */
.fmt-privee-faq {
	scroll-margin-block-start: calc(var(--fmt-nav-h) + var(--space-24));
}

/* ═══════════════════════════════════════════════════════════════ LA GRILLE */

/* core/columns pose une marge basse de 1,75 em : dans une bande, seul le
   rembourrage de la bande doit compter. */
.fmt-privee-faq .fmt-faq__grille.wp-block-columns {
	gap: var(--space-32) var(--space-64);
	align-items: flex-start;
	margin-block: 0;
}

/* Colonne de titre à largeur fixe. On l'écrit ici plutôt que dans l'attribut
   `width` du bloc : WordPress y répondrait par un style en ligne. Le repli
   mobile de core/columns reste prioritaire (flex-basis: 100% !important). */
.fmt-privee-faq .fmt-faq__grille > .fmt-faq__intro {
	flex-basis: 400px;
	flex-grow: 0;
}

/* Titre de section du kit : 30 px au téléphone, 48 px au bureau. */
.fmt-privee-faq .fmt-faq__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* L'espacement remplace les filets : 4 px entre deux questions fermées, qui
   s'ajoutent aux 16 px de rembourrage de chaque question. */
.fmt-privee-faq .fmt-faq__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.fmt-privee-faq .fmt-faq__liste > * {
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════ UN PANNEAU

   Fermé, un panneau n'a pas de fond : la liste reste une liste. Ouvert, il
   prend la teinte du contenant de la bande, rayon 4 px, sans contour — la
   question et sa réponse se lisent d'un seul tenant. Le rembourrage latéral
   est posé dans les deux états : l'ouverture ne déplace aucun mot.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-faq .fmt-faq__item {
	border-radius: var(--radius-4);
	background: transparent;
	transition: background-color var(--dur-ui) var(--ease-soft);
}

.fmt-privee-faq .fmt-faq__item[open] {
	background: var(--surface-contenant);
}

.fmt-privee-faq .fmt-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	padding: var(--space-16) var(--space-24);
	border-radius: var(--radius-4);
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
	letter-spacing: var(--track-subsection);
	line-height: var(--lh-subsection);
	color: var(--petrole);
	cursor: pointer;
	list-style: none;
}

/* Ouvert, la question se rapproche de sa réponse : le rembourrage du bas
   deviendrait un trou entre deux textes qui se répondent. */
.fmt-privee-faq .fmt-faq__item[open] > summary {
	padding-block-end: var(--space-8);
}

/* 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-privee-faq .fmt-faq__item > summary::marker {
	content: "";
}

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

/*
 * Le « + » dans son rond lin : un repère rond, il le reste. `margin: 0` et
 * `transform: none` neutralisent par avance le chevron que `07-faq.css`
 * dessinerait sur le MÊME pseudo-élément si la feuille venait à être servie
 * ici ; la spécificité de trois classes tranche, quel que soit l'ordre des
 * feuilles.
 *
 * Le signe est écrit deux fois : la seconde déclaration, avec son
 * alternative vide après la barre oblique, le retire de ce que lit un lecteur
 * d'écran — l'état ouvert ou fermé est déjà annoncé par `<details>`. Un
 * navigateur qui ne connaît pas cette syntaxe ignore la seconde ligne et
 * garde la première.
 */
.fmt-privee-faq .fmt-faq__item > summary::after {
	content: "+";
	content: "+" / "";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	margin: 0;
	transform: none;
	border-radius: var(--radius-pill);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1;
	transition:
		transform var(--dur-ui) var(--ease-soft),
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

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

/* Un huitième de tour : le « + » devient une croix de fermeture, et le rond
   passe en pétrole plein. Deux signaux pour un seul état — un état choisi se
   marque par un aplat pétrole, jamais par un contour. */
.fmt-privee-faq .fmt-faq__item[open] > summary::after {
	transform: rotate(45deg);
	background: var(--petrole);
	color: var(--text-on-inverse);
}

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

/* Le halo cuivre du système, tenu à l'intérieur du panneau pour ne pas
   déborder sur la question voisine. */
.fmt-privee-faq .fmt-faq__item > summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

/* Texte discret : 4,81:1 sur le lin du panneau ouvert, au-dessus des 4,5:1
   dus au texte courant. */
.fmt-privee-faq .fmt-faq__reponse {
	margin: 0;
	padding: 0 var(--space-24) var(--space-24);
	max-inline-size: 40rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-body);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════ ADAPTATION */

@media (max-width: 781px) {
	.fmt-privee-faq .fmt-faq__item > summary {
		gap: var(--space-16);
		padding-inline: var(--space-16);
		font-size: var(--wp--preset--font-size--large);
	}

	.fmt-privee-faq .fmt-faq__item > summary::after {
		inline-size: 28px;
		block-size: 28px;
		font-size: var(--wp--preset--font-size--medium);
	}

	.fmt-privee-faq .fmt-faq__reponse {
		padding: 0 var(--space-16) var(--space-16);
		font-size: var(--wp--preset--font-size--small);
	}
}