/**
 * Section FAQ — photo sombre en fond, anneau décoratif à gauche, carte à droite.
 *
 * Figma : anneau 615 px sans contenu (les mains appartiennent à la photo),
 * carte or de 636 px, rayon 20 px.
 *
 * Emplacement : assets/css/components/section-faq.css
 */

.section-faq {
	position: relative;
	isolation: isolate;        /* garde la photo sous le contenu, sans z-index négatif */
	padding-block: var(--section-gap);
	color: var(--color-text-inverse);
}

/* ── Photo de fond ─────────────────────────────────────────── */

.section-faq__fond {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
}

.section-faq__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-faq__titre {
	margin-block-end: var(--space-7);
	font-size: var(--fs-h1);   /* Figma : 48 px */
	color: var(--color-text-inverse);
	text-align: center;
}

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

.section-faq__grille {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

/* L'anneau se retire par défaut ; la maquette mobile le remet sous la carte,
   voir le bloc en bas de fichier. */
.section-faq__media {
	display: none;
}

.section-faq__anneau {
	width: 100%;
	max-width: 615px;          /* diamètre Figma */
	margin-inline: auto;
}


/* ── Carte ─────────────────────────────────────────────────── */

.section-faq__carte {
	padding: var(--space-6) var(--space-6) var(--space-7);
	background-color: var(--e4y-gold);
	border-radius: var(--radius-xl);   /* Figma : 20 px */
}

.section-faq__carte-titre {
	margin-block-end: var(--space-6);
	font-size: var(--fs-h2);
	color: var(--color-text-inverse);
}

/* ── Introduction, hors accordéon ──────────────────────────── */

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

.section-faq__intro-titre {
	margin-block-end: var(--space-3);
	font-size: var(--fs-lead);   /* Figma : 20 px, comme les questions */
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
}

.section-faq__intro-texte {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* ── Pied de carte ─────────────────────────────────────────── */

.section-faq__pied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: center;
	margin-block-start: var(--space-6);
}

.section-faq__note {
	font-size: var(--fs-body);
}

.btn__icon--diag {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}


/* ============================================================
   Desktop 900px — anneau à gauche, carte à droite
   ============================================================ */

@media (min-width: 900px) {

	/* La section occupe une hauteur d'écran, contenu centré. svh plutôt que vh :
	   sur mobile, vh intègre la barre du navigateur et provoque des sauts au
	   défilement. min-height et non height, pour qu'un volet déplié puisse
	   déborder plutôt que d'être tronqué. */
	.section-faq {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		min-height: 100svh;
		padding-block: var(--space-6);
	}

	.section-faq__titre {
		margin-block-end: var(--space-5);
	}

	.section-faq__media {
		display: block;
	}

	/* 48 / 52 : proportions Figma (615 px et 636 px). */
	.section-faq__grille {
		grid-template-columns: 48fr 52fr;
	}

	/* Plafonné en hauteur de viewport : c'est l'anneau qui dicte la hauteur de
	   la section sur les écrans peu hauts. */
	.section-faq__anneau {
		max-width: min(615px, 52svh);
	}

	.section-faq__carte {
		padding: var(--space-6);
	}

}


/* ============================================================
   Mobile — texte resserré et anneau sous la carte

   Figma 01_MOB descend toute la typographie de la carte d'un cran : les
   questions y tiennent sur une ligne, ce qui n'était pas le cas à 17 px
   dans un cadre de 346. Et il repose l'anneau sous la carte, là où le socle
   le retirait faute de place en largeur — sur une photo de fond qui lui est
   propre, verticale, où les mains sont déjà à la bonne hauteur.
   ============================================================ */

@media (max-width: 767px) {

	/* La terre ne commence pas sur une arête : la zone teintée se referme sur
	   l'arc bas de son ellipse (node 85:1030), qui descend plus bas au milieu
	   que sur les côtés — mesuré à 27 px sur la maquette.
	   La courbe ne peut pas venir d'un border-radius posé sur la photo : un
	   angle arrondi bombe vers le haut, l'inverse de ce qu'il faut. C'est donc
	   une calotte teintée qui mord sur la photo, remontée de sa propre hauteur
	   moins la flèche pour que son bord affleure le haut de la section sur les
	   côtés. Opaque, sans quoi la terre transparaîtrait. */
	.section-faq {
		--faq-arc: 28px;   /* Figma : 27 px de flèche sur les bords de l'écran */
		/* La calotte remonte de 117 px au-dessus de la section : sans rognage,
		   elle recouvrait le bouton « Voir toutes nos actions ». Seule sa
		   lisière basse doit se voir. */
		overflow: hidden;
		/* Figma : 82 px entre la courbe et le titre, 134 sous l'anneau. */
		padding-block: var(--space-9) var(--space-11);
	}

	.section-faq::before {
		content: '';
		position: absolute;
		z-index: 1;
		inset-block-start: calc(var(--faq-arc) - var(--courbe-rayon-mob));
		inset-inline-start: 50%;
		width: var(--courbe-largeur);
		height: var(--courbe-rayon-mob);
		background-color: var(--color-bg-tint-plein);
		border-radius: 0 0 50% 50% / 0 0 var(--courbe-rayon-mob) var(--courbe-rayon-mob);
		transform: translateX(-50%);
	}

	/* Le contenu repasse au-dessus de la calotte, qui est positionnée. */
	.section-faq__inner {
		position: relative;
		z-index: 2;
	}

	.section-faq__media {
		display: block;
		order: 1;                  /* le balisage le place avant la carte */
		/* La grille apporte déjà 32 px : Figma en laisse 56 sous la carte. */
		margin-block-start: var(--space-5);
	}

	/* La prise de vue verticale place les mains en bas ; 79 % amènent la
	   plantule au centre de l'anneau. Le fichier est déjà recadré sur la
	   fenêtre de la maquette, ce qui donne aux mains leur taille — un cadrage
	   en cover sur l image entière les rendait deux fois trop petites. */
	.section-faq__img {
		object-position: 50% 79%;
	}

	.section-faq__anneau {
		max-width: 340px;          /* Figma : ~355 px sur une page de 402 */
	}

	.section-faq__carte {
		padding: var(--space-5);
	}

	.section-faq__carte-titre {
		margin-block-end: var(--space-5);
		font-size: var(--fs-h3);
	}

	.section-faq__intro-titre {
		font-size: var(--fs-body);
	}

	.section-faq__intro-texte,
	.section-faq__note {
		font-size: var(--fs-small);
	}

	/* Les questions ne sont pas en gras dans la maquette mobile : seuls le
	   titre de la carte et l'intitulé « Mieux comprendre E4Y » le sont. */
	.section-faq .accordeon__question {
		font-size: var(--fs-small);
		font-weight: var(--fw-regular);
	}

	.section-faq .accordeon__reponse {
		font-size: var(--fs-small);
	}

}