/**
 * Page « Le Programme » — appel final « Construisons ensemble ».
 *
 * Composition à l'échelle, sur le même principe que le bloc d'introduction :
 * scène plafonnée à la largeur de maquette, tout exprimé en cqw.
 *
 * Repères Figma, origine au haut du cercle or (y = 3818) :
 *   cercle or  437 / 3818 / Ø 694     anneau   centre 346,5 / 4174, Ø 486,7
 *   pastilles  941 / 3844 / Ø 296     citation centrée sur 782,5, y = 3981
 *              927 / 4284 / Ø 214     bouton   694 / 4349     hauteur 693
 *
 * Emplacement : assets/css/components/pgm-appel.css
 */

.pgm-appel {
	overflow: hidden;
}

.pgm-appel__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 693;
}

/* ── Grand cercle or ───────────────────────────────────────── */

.pgm-appel__cercle {
	position: absolute;
	top: 0;
	left: 30.35cqw;
	width: 48.19cqw;              /* Figma : 694 px */
	aspect-ratio: 1;
	background-color: var(--e4y-gold);
	border-radius: var(--radius-full);
}

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

.pgm-appel__anneau {
	position: absolute;
	top: 7.86cqw;
	left: 7.16cqw;
	width: 33.80cqw;              /* Figma : 486,7 px */
}

.pgm-appel__photo-anneau {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Pastilles photo flottantes ────────────────────────────── */

.pgm-appel__pastille {
	position: absolute;
	overflow: hidden;
	border-radius: var(--radius-full);
}

.pgm-appel__pastille--haut {
	top: 1.81cqw;
	left: 65.35cqw;
	width: 20.56cqw;              /* Figma : 296 px */
	aspect-ratio: 1;
}

.pgm-appel__pastille--bas {
	top: 32.36cqw;
	left: 64.38cqw;
	width: 14.86cqw;              /* Figma : 214 px */
	aspect-ratio: 1;
}

.pgm-appel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Citation ──────────────────────────────────────────────── */

/* Blanche et plus petite qu'ailleurs : 36 px au lieu de 48, sur fond or. */
.pgm-appel__citation {
	position: absolute;
	top: 11.32cqw;
	left: 43.34cqw;
	width: 22cqw;
}

.pgm-appel__citation .citation__texte {
	font-size: 2.5cqw;            /* Figma : 36 px */
	color: var(--color-text-inverse);
}

/* Figma : guillemet ouvrant à 64 px pour un texte de 36, soit 1,78 em et non
   les 2 em de la citation verte de l'accueil. */
.pgm-appel__citation .citation__texte::before {
	font-size: 1.78em;
}

/* ── Bouton ────────────────────────────────────────────────── */

.pgm-appel__bouton {
	position: absolute;
	top: 36.88cqw;
	left: 48.19cqw;
	min-height: 3.4cqw;           /* Figma : 49 px */
	padding: 0.6cqw 0.9cqw;
	gap: 0.6cqw;
	font-size: 1.389cqw;          /* Figma : 20 px */
}

.pgm-appel__bouton .btn__icon--arrow {
	width: 1.46cqw;
	height: auto;
}


/* ============================================================
   Sous 1200px — la composition se déplie

   Même raison qu'aux deux blocs précédents : à 402 px, la citation tombait à
   10 px et le bouton à 5,6. La grille reprend l'agencement de la maquette —
   l'anneau à gauche, les deux portraits empilés à sa droite — puis pose la
   citation et le bouton en dessous, sur toute la largeur.

   Le grand cercle or ne peut pas suivre : il porte la citation et le bouton,
   qui ne sont pas ses enfants, et rien ne pouvait plus les tenir alignés une
   fois la position absolue abandonnée. C'est la scène qui prend l'or, d'un
   bord à l'autre de l'écran.
   ============================================================ */

@media (max-width: 1199px) {

	/* isolation plutôt qu'un z-index : le calque de couleur est posé en
	   z-index négatif sous le contenu, et sans contexte d'empilement il
	   passerait derrière le fond de la page. */
	.pgm-appel {
		isolation: isolate;
		/* Le panneau remonte de la flèche de son propre arc : posé au ras du
		   bas de la zone teintée, il n'y touchait qu'en son sommet et laissait
		   deux croissants blancs sur les côtés. */
		margin-block-start: calc(-1 * var(--courbe-fleche-mob));
	}

	.pgm-appel__scene {
		position: relative;
		overflow: hidden;
		display: grid;
		grid-template-columns: auto auto;
		grid-template-areas:
			'anneau haut'
			'anneau bas'
			'citation citation'
			'bouton   bouton';
		gap: var(--space-5);
		align-items: center;
		justify-content: center;
		aspect-ratio: auto;
		max-width: none;
		padding: var(--space-9) var(--gutter) var(--space-8);
	}

	/* L'or ne vient pas d'un fond posé sur la scène mais d'un calque courbe :
	   le panneau s'ouvre sur le même arc que les autres sections de la page.
	   Il déborde latéralement puis est rogné — calé sur la largeur de l'écran,
	   l'arc se redresserait net sur les bords au lieu d'y arriver en pente
	   douce. Absolu, il n'est pas placé par la grille. */
	.pgm-appel__scene::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset-block: 0;
		inset-inline-start: 50%;
		width: var(--courbe-largeur);
		background-color: var(--e4y-gold);
		border-radius: 50% 50% 0 0 / var(--courbe-rayon-mob) var(--courbe-rayon-mob) 0 0;
		transform: translateX(-50%);
	}

	.pgm-appel__cercle {
		display: none;
	}

	.pgm-appel__anneau {
		position: static;
		grid-area: anneau;
		width: 200px;
	}

	.pgm-appel__pastille {
		position: static;
	}

	.pgm-appel__pastille--haut {
		grid-area: haut;
		width: 120px;
	}

	.pgm-appel__pastille--bas {
		grid-area: bas;
		width: 95px;
	}

	.pgm-appel__citation {
		position: static;
		grid-area: citation;
		width: auto;
		margin-block-start: var(--space-4);
	}

	.pgm-appel__citation .citation__texte {
		font-size: var(--fs-h2);
	}

	.pgm-appel__bouton {
		position: static;
		grid-area: bouton;
		justify-self: center;
		gap: var(--space-3);
		min-height: 49px;
		padding: var(--space-3) var(--space-5);
		font-size: var(--fs-body);
	}

	.pgm-appel__bouton .btn__icon--arrow {
		width: 21px;
	}

}