/**
 * Section — Questions fréquentes.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px, frame « Frame 16 ») :
 *   fond        #F7F1E8, pleine largeur, 1077 de haut
 *   suptitre    y 122   titre y 171 (64px, 2 lignes)
 *   colonnes    x 183 → 983 et x 1046 → 1846, soit 800 + 63 d'écart
 *   question    36px, filet à 41 au-dessus, 26 en dessous
 *   pastille    37 × 37, contour clair
 */

.faq {
	background-color: var(--anidjar-creme-chaud);
	padding-block: clamp(3rem, 6.3542vw, 122px) clamp(3rem, 11.1979vw, 215px);
	margin-top: 5em;
}

.faq__inner {
	/* Figma place le bloc à 183 à gauche et 74 à droite : c'est décentré, et ça
	   saute aux yeux sous la section articles, elle centrée. On garde la largeur
	   de 1663 mais on centre. */
	width: min(1663px, 100% - 2 * var(--anidjar-gouttiere));
	margin-inline: auto;
}

.faq__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.faq__title {
	margin: 26px 0 0;
	max-width: 581px;
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

/* ---------------------------------------------------------------------------
 * Liste — remplie colonne par colonne, comme la maquette
 * ------------------------------------------------------------------------ */

.faq__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--faq-rows, 1), auto);
	grid-auto-flow: column;
	column-gap: 63px;
	margin: 91px 0 0; /* 418 − (171 + 156) */
	padding: 0;
	list-style: none;
}

.faq__item {
	border-top: 1px solid var(--anidjar-filet-fonce);
}

.faq__details {
	padding: 41px 7px 26px 24px;
}

.faq__question {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 37px;
	align-items: center;
	gap: var(--anidjar-espace-md);
	cursor: pointer;
	list-style: none;
}

/* Retire le triangle natif de <summary>. */
.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question-text {
	font-family: var(--anidjar-police-titre);
	font-size: clamp(1.375rem, 1.875vw, 2.25rem); /* 36px */
	font-weight: var(--anidjar-graisse-titre);
	line-height: normal;
	transition: color var(--anidjar-transition), transform var(--anidjar-transition);
}

/* Survol / ouverture : le titre passe à l'or et glisse légèrement. */
.faq__question:hover .faq__question-text {
	color: var(--anidjar-texte-accent);
	transform: translateX(8px);
}

.faq__details[open] .faq__question-text {
	color: var(--anidjar-texte-accent);
}

.faq__toggle {
	display: grid;
	place-items: center;
	width: 37px;
	height: 37px;
	border: 1px solid var(--anidjar-filet-clair);
	border-radius: 50%;
	color: var(--anidjar-texte);
	transition: transform var(--anidjar-transition), background-color var(--anidjar-transition),
		background-image var(--anidjar-transition), border-color var(--anidjar-transition),
		color var(--anidjar-transition);
}

.faq__toggle svg {
	width: 19px;
	height: 19px;
}

/* Survol : la pastille se teinte et grossit un peu. */
.faq__question:hover .faq__toggle {
	border-color: var(--anidjar-or);
	background-color: var(--anidjar-creme);
	transform: scale(1.08);
}

/* Le « + » devient « × » et la pastille se remplit d'or quand la réponse est ouverte. */
.faq__details[open] .faq__toggle {
	transform: rotate(45deg);
	background-image: var(--anidjar-degrade-or);
	border-color: transparent;
	color: var(--anidjar-texte-sur-or);
}

.faq__details[open] .faq__question:hover .faq__toggle {
	transform: rotate(45deg) scale(1.08);
}

.faq__question:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 4px;
}

.faq__answer {
	/* padding (et non margin) : ainsi l'espacement est inclus dans la hauteur
	   animée à l'ouverture/fermeture (voir animations.js). */
	padding-top: var(--anidjar-espace-md);
	max-width: 640px;
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

.faq__answer > :first-child {
	margin-top: 0;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

.faq__answer p {
	margin: 0 0 var(--anidjar-espace-sm);
}

.faq__answer a {
	color: var(--anidjar-texte-accent);
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.faq {
		padding-block: var(--anidjar-espace-2xl);
	}

	.faq__inner {
		padding-inline: var(--anidjar-gouttiere);
	}

	.faq__title {
		max-width: none;
	}

	/* Une seule colonne : le remplissage colonne par colonne n'a plus lieu d'être. */
	.faq__list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		margin-top: var(--anidjar-espace-2xl);
	}

	.faq__details {
		padding: var(--anidjar-espace-md) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq__toggle {
		transition: none;
	}
}