/*--------------------------------------------------------------
## FAQ

Reprend la maquette validée avec Léa : plus de cadres, un filet entre les
questions comme les colonnes du footer, un numéro dans le doré du header, et
un signe qui dit si la réponse est ouverte.

Le contenu et le comportement restent au module `faq-seo` du plugin
`bb-custom-module-mahii` : tout ce qui suit est du style. Le module écrit un
CSS par nœud chargé après cette feuille, avec des sélecteurs en
`.fl-node-xxx .fl-accordion-item` (0,2,0) ; la classe du module est donc
répétée pour passer devant.
--------------------------------------------------------------*/

:root {
	--faq-or: #BC8E4E;
	--faq-ink: #23252B;
	--faq-soft: rgba(35, 37, 43, .62);
	--faq-hair: rgba(35, 37, 43, .12);
	--faq-ease: cubic-bezier(.22, .61, .36, 1);
	/* largeur du numéro plus sa gouttière : la réponse s'aligne dessous */
	--faq-retrait: 46px;
}

/* ===== La liste ===== */

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion {
	counter-reset: faq;
	border-top: 1px solid var(--faq-hair);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-item {
	counter-increment: faq;
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--faq-hair);
	border-radius: 0;
}

/* Le module estompe les autres questions à 45% dès qu'on survole la liste.
   L'effet n'était pas dans la maquette et rend le bloc instable à la lecture. */
.fl-module-faq-seo.fl-module-faq-seo .fl-accordion:hover .fl-accordion-item,
.fl-module-faq-seo.fl-module-faq-seo .fl-accordion:hover .fl-accordion-button-icon-left,
.fl-module-faq-seo.fl-module-faq-seo .fl-accordion:hover .fl-accordion-button-icon-right {
	opacity: 1;
}

/* ===== La question ===== */

/* Le module la pose en `display: table` avec un filet dessous et 28px de
   marge : d'où le rectangle vide sous chaque question, ouverte ou non. */
.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 26px 0;
	border: 0;
	background: none;
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button:before {
	content: counter(faq, decimal-leading-zero);
	flex: 0 0 auto;
	width: 22px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .14em;
	color: var(--faq-or);
	transform: translateY(-2px);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button-label {
	display: block;
	flex: 1 1 auto;
	width: auto;
	font-family: 'Prata', serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--faq-ink);
	transition: color .3s var(--faq-ease);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-item:hover .fl-accordion-button-label {
	color: var(--faq-or);
}

/* ===== Le signe =====
Le module rend une icône dont le JS bascule la classe à l'ouverture. Elle cède
la place à deux traits : le vertical pivote, le signe se referme. */

.fl-module-faq-seo.fl-module-faq-seo a.fl-accordion-button-icon {
	display: block;
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	padding: 0;
	transform: translateY(-1px);
	color: var(--faq-ink);
}

.fl-module-faq-seo.fl-module-faq-seo a.fl-accordion-button-icon i {
	display: none;
}

.fl-module-faq-seo.fl-module-faq-seo a.fl-accordion-button-icon:before,
.fl-module-faq-seo.fl-module-faq-seo a.fl-accordion-button-icon:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 1px;
	background-color: currentColor;
	transition: transform .4s cubic-bezier(.45, .05, .55, .95);
}

.fl-module-faq-seo.fl-module-faq-seo a.fl-accordion-button-icon:after {
	transform: rotate(90deg);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-item-active a.fl-accordion-button-icon:after {
	transform: rotate(0);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-item:hover a.fl-accordion-button-icon {
	color: var(--faq-or);
}

/* ===== La réponse ===== */

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content {
	padding: 0 0 30px;
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content > div {
	padding-left: var(--faq-retrait);
}

/* La réponse occupe toute la largeur de la question.

   Une limite de 70ch la bornait à 544px, la mesure de confort de lecture
   habituelle : en Roboto Condensed, une police étroite, cela laissait 570px
   de vide à droite d'une question qui, elle, court sur 1160. Le trou se
   voyait plus que le gain. */
.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content p {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--faq-soft);
	margin: 0 0 12px;
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content p:last-child {
	margin-bottom: 0;
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content a {
	color: var(--faq-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .3s var(--faq-ease);
}

.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content a:hover {
	color: var(--faq-or);
}

/* ===== Responsive ===== */
@media screen and (max-width: 700px) {
	.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button {
		gap: 16px;
		padding: 22px 0;
	}

	.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button:before {
		display: none;
	}

	.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-button-label {
		font-size: 1.8rem;
	}

	.fl-module-faq-seo.fl-module-faq-seo .fl-accordion-content > div {
		padding-left: 0;
	}
}