/**
 * Page « FAQ » — bloc unique.
 *
 * Deux mises en page. Sous 768 px, tout s'empile : le panneau porte un
 * accordéon, c'est-à-dire du texte à lire et des zones à toucher, que la
 * réduction proportionnelle de la scène rendrait inutilisables. Au-dessus, la
 * composition de la maquette reprend ses droits — mais seuls le placement et
 * les formes sont en cqw : la typographie du panneau reste en rem, pour rester
 * lisible quelle que soit la largeur.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle ambre 530 / 235 / Ø 947    anneau  centre 1081,4 / 1254,4, Ø 484
 *   accroche     739 / 709 / l. 574   photo   Ø 385
 *   panneau       97 / 806 / 636 × 745
 *
 * Emplacement : assets/css/components/faq-page.css
 */

.faq-page {
	padding-block: var(--section-gap);
}

/* ── Mobile : tout s'empile ────────────────────────────────── */

.faq-page__scene {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.faq-page__cercle,
.faq-page__medaillon {
	display: none;   /* décor : rien à montrer quand la place manque */
}

.faq-page__titre {
	order: -2;
	margin: 0;
	font-size: var(--fs-h1);
	text-transform: uppercase;
	color: var(--color-text);
}

.faq-page__accroche {
	order: -1;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.19;
	color: var(--color-text);
}

/* ── Panneau or ────────────────────────────────────────────── */

.faq-page__carte {
	padding: var(--space-6);
	color: var(--color-text-inverse);
	background-color: var(--e4y-gold);
	border-radius: var(--radius-lg);
}

/* La couleur est reprise ici : les titres héritent du vert par base.css, qui
   l'emporterait sur le blanc posé par la carte. */
.faq-page__carte-titre {
	margin-block-end: var(--space-6);
	font-size: var(--fs-h2);
	color: var(--color-text-inverse);
}

.faq-page__intro {
	padding-block-end: var(--space-4);
	border-block-end: 1.5px solid var(--e4y-overlay-light);
}

.faq-page__intro-titre {
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
}

.faq-page__intro-texte {
	margin-block-start: var(--space-2);
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
}

.faq-page__pied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	margin-block-start: var(--space-6);
}

.faq-page__note {
	font-size: var(--fs-body);
}

.faq-page__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================================================
   768 px — la composition de la maquette
   ============================================================ */

@media (min-width: 768px) {

	.faq-page {
		padding-block: 0;
		overflow: hidden;   /* le cercle ambre déborde à droite */
	}

	/* La hauteur vient du contenu et non d'un aspect-ratio : le panneau porte
	   du texte saisi par l'équipe, dont la longueur n'est pas connue d'avance.
	   min-height reprend la hauteur de la maquette pour que le cercle et
	   l'anneau aient la place de se déployer même sur une FAQ très courte. */
	.faq-page__scene {
		container-type: inline-size;
		position: relative;
		display: block;
		max-width: 1440px;
		min-height: 64.1cqw;   /* Figma : 923 px */
		padding-inline: 0;
	}

	.faq-page__cercle,
	.faq-page__medaillon {
		display: block;
	}

	/* ── Grand cercle ambre ────────────────────────────────── */

	/* Le haut du cercle passe sous le bandeau photographique : d'où le décalage
	   négatif, la scène commençant au bas de celui-ci. */
	.faq-page__cercle {
		position: absolute;
		top: -27.292cqw;
		left: 36.806cqw;
		width: 65.764cqw;           /* Figma : 947 px */
		aspect-ratio: 1;
		background-color: var(--e4y-amber);
		border-radius: var(--radius-full);
	}

	/* ── Accroche dans le cercle ───────────────────────────── */

	.faq-page__accroche {
		position: absolute;
		top: 5.625cqw;
		left: 51.319cqw;
		width: 39.861cqw;           /* Figma : 574 px */
		font-size: 3.333cqw;        /* Figma : 48 px */
		text-align: center;
	}

	/* ── Titre et panneau ──────────────────────────────────── */

	/* --bord : le bord gauche du conteneur, pour s'aligner sur le logo — voir
	   hub-intro.css, qui détaille le calcul. */
	.faq-page__scene {
		--bord: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	}

	.faq-page__titre {
		position: absolute;
		left: var(--bord);
		top: 4.514cqw;
		font-size: 3.333cqw;        /* Figma : 48 px */
	}

	/* Le panneau reste dans le flux, à la différence du cercle, de l'accroche,
	   du titre et de l'anneau, qui ne portent rien de variable. Lui porte un
	   accordéon : déplié, il grandit. En absolu il ne poussait pas la scène,
	   et le bas de la réponse disparaissait sous l'overflow: hidden de la
	   section. Les marges reprennent les décalages de la maquette, et
	   min-height garde au cercle la place de se déployer quand la FAQ est
	   courte. */
	.faq-page__carte {
		/* position + z-index : sorti de l'absolu, le panneau redevient un
		   élément de flux, que le cercle ambre — absolu et antérieur dans le
		   balisage — recouvrait. Positionné, il reprend son rang. */
		position: relative;
		z-index: 1;
		margin-block: 12.361cqw 6.25cqw;
		margin-inline-start: var(--bord);
		width: 44.167cqw;           /* Figma : 636 px */
	}

	/* text-wrap: wrap annule le balance que base.css pose sur tous les titres :
	   il égalisait les deux lignes et coupait « pouvons-nous » sur son trait
	   d'union, alors que le mot entier tient (523 px pour 572 disponibles).
	   La maquette coupe après « nous », c'est-à-dire au plus long. */
	.faq-page__carte-titre {
		font-size: 3.333cqw;        /* Figma : 48 px */
		text-wrap: wrap;
	}

	/* ── Anneau photographique ─────────────────────────────── */

	.faq-page__medaillon {
		position: absolute;
		top: 26.694cqw;
		left: 58.292cqw;
		width: 33.611cqw;           /* Figma : 484 px */
	}

}


/* ============================================================
   Mobile — le disque et l'anneau reviennent

   Le socle les retirait faute de place. Mais toutes les autres pages
   internes gardent en mobile leur disque de couleur et leur anneau
   photographique, et l'accueil repose le sien sous la carte de la FAQ : sans
   eux, cette page-ci n'a plus qu'un aplat or sur du blanc.

   Le disque n'est pas rétréci, il déborde — c'est la règle posée sur
   l'accueil. Et l'anneau ferme la section sous la carte, comme là-bas.
   ============================================================ */

@media (max-width: 767px) {

	.faq-page__scene {
		/* Le diamètre sert aussi de repère au retrait : en pourcentage, il se
		   serait calculé sur la scène. */
		--faq-disque: min(360px, 92vw);
		align-items: center;
	}

	/* Le titre et la carte gardent la largeur de la colonne, que le centrage
	   de la scène leur retirerait. */
	.faq-page__titre,
	.faq-page__carte {
		align-self: stretch;
	}

	/* L'accroche reprend le disque ambre : deux boîtes pour un seul cercle ne
	   pouvaient pas rester alignées sans position absolue. */
	.faq-page__accroche {
		display: grid;
		place-items: center;
		width: var(--faq-disque);
		aspect-ratio: 1;
		padding-inline: calc(var(--faq-disque) * 0.11);
		font-size: var(--fs-h3);
		text-align: center;
		background-color: var(--e4y-amber);
		border-radius: var(--radius-full);
	}

	/* Les coupures ont été saisies pour la boîte de 574 px de la maquette :
	   dans un disque de 360, elles s'ajoutaient au repli naturel du texte. */
	.faq-page__accroche br {
		display: none;
	}

	.faq-page__medaillon {
		display: block;
		order: 1;                  /* le balisage le place après la carte */
		width: min(280px, 72vw);
	}

}