/**
 * Section « LE PROGRAMME » — page d'accueil.
 *
 * Taille de l'anneau : pilotée par le CSS (min(86vw, 1236px)), jamais en dur.
 * Chevauchement hero : 40 % du diamètre de l'anneau à partir de 900px.
 *   Figma : 493 px cachés sous le hero sur 1236 px de diamètre = 39,9 %.
 *   Indexé sur le diamètre et non sur vw, sinon le chevauchement continue
 *   de croître une fois l'anneau plafonné à 1236 px (au-delà de 1437 px).
 *   Le fond est transparent sur cette zone : le hero reste visible derrière.
 *
 * Emplacement : assets/css/components/section-programme.css
 */

/* ============================================================
   Socle — mobile first
   ============================================================ */

.section-programme {
	position: relative;
	z-index: 2;
	background: var(--color-bg);
	padding-block-end: var(--space-9);
}

/* Anneau centré, taille max Figma = 1236 px = 86 % du viewport à 1440 px */
.section-programme__anneau {
	margin-inline: auto;
	width: min(86vw, 1236px);
}

/* ── Cercle vert (contenu passé à l'anneau) ────────────────── */

.section-programme__cercle {
	position: absolute;
	inset: 0;
	background: var(--e4y-green);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-4);
	text-align: center;
}

/* Titre « LE PROGRAMME » */
.section-programme__titre {
	font-family: var(--font-display);
	font-size: var(--fs-h1);        /* réduit sur mobile, fs-hero sur desktop */
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-tight);
	color: var(--color-text-inverse);
}

/* Paragraphe de présentation */
.section-programme__texte {
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--color-text-inverse);
}

/* Boutons */
.section-programme__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);
}

/* Icône végétale */
.section-programme__icone img {
	display: block;
	max-width: min(123px, 33vw);
	max-height: min(134px, 36vw);
	object-fit: contain;
}

/* Boutons : mêmes proportions que dans le hero — 16 px bold, libellé sur 2 lignes,
   icône hors du flux du texte (Figma : 167 × 49 et 191 × 49). */
.section-programme .btn {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	white-space: normal;      /* annule le nowrap global — 2 lignes voulues */
	line-height: 1.1;
	min-height: 49px;
	padding-block: var(--space-1);
	padding-inline: var(--space-3);
	max-width: 190px;
	justify-content: flex-start;
	text-align: left;
}

/* Boutons en contexte vert : contour et texte blanc */
.section-programme .btn--ghost {
	color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
}

.section-programme .btn--ghost:hover,
.section-programme .btn--ghost:focus-visible {
	color: var(--color-text-inverse);
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--color-text-inverse);
}


/* ============================================================
   Mobile < 900px — la même composition circulaire, mais débordante

   Relevé sur 01_MOB_E4Y_Accueil : le cercle vert y fait 700 px de diamètre
   pour une page de 402, l'anneau 830. On ne voit donc que sa
   partie basse — un aplat vert d'un bord à l'autre, refermé par un arc, et
   la couronne colorée qui affleure en dessous. C'est bien le dispositif du
   desktop, seulement grandi : rien à reconstruire, deux mesures suffisent.
   ============================================================ */

@media (max-width: 899px) {

	.section-programme {
		/* Contrairement au desktop, le cercle ne passe presque pas sous le
		   hero : la maquette fait démarrer le vert au bord même du bandeau, et
		   c'est ce qui donne à la bande verte sa hauteur. La remontée ne vaut
		   donc que le retrait de l'anneau — juste de quoi caler le haut du
		   disque sur le bas du hero, en gardant les 66 px qu'il faut pour que
		   le vert occupe déjà toute la largeur à cette hauteur — sans quoi
		   deux coins crème apparaîtraient sous le bandeau. */
		margin-block-start: calc(-0.158 * var(--prog-anneau));
		padding-block-end: var(--space-8);
	}

	/* Diamètre fixe et non proportionnel à l'écran : c'est la seule mesure qui
	   tienne à toutes les largeurs. Indexé sur vw, l'anneau rétrécissait quand
	   l'écran rétrécissait — alors que le texte, lui, s'allonge. En dessous de
	   360 px la bande verte visible passait sous la hauteur du texte et l'arc
	   rognait le pictogramme. À diamètre fixe, l'arc s'aplatit un peu sur les petits
	   écrans et se creuse sur les grands, ce qui va dans le bon sens.
	   Diamètre déduit de deux mesures prises hors du texte, sur les colonnes
	   x = 8 et x = 30 de la maquette : le vert s'y arrête 576 et 590 px sous
	   sa ligne pleine, ce qui ne se résout que par un disque de 700 px caché
	   de 66 sous le bandeau. L'anneau, lui, fait 830 : le disque n'en occupe
	   que 84,3 %, le reste étant le trait et la bande de crème. */
	.section-programme {
		--prog-anneau: 830px;
	}

	/* margin-inline: auto ne centre pas une boîte plus large que son parent —
	   les marges automatiques tombent alors à zéro et tout déborde à droite.
	   D'où le calcul explicite, qui rend une marge négative. */
	.section-programme__anneau {
		width: var(--prog-anneau);
		margin-inline: calc((100vw - var(--prog-anneau)) / 2);
	}

	/* Retrait porté à 7,85 % contre 8,9 par défaut : le disque y gagne la
	   place qu'il faut au contenu — à 82,2 %, la bande verte visible tombait à
	   571 px pour 540 px de texte, et l'arc rognait le pictogramme dès que
	   l'écran rétrécissait. Surtout, il laisse 32 px de crème entre le disque
	   et la couronne, là où le réglage par défaut n'en laisse que 5. */
	.section-programme .anneau__contenu {
		inset: 7.85%;
	}

	/* Le contenu se cale sous la ligne du hero et non au centre du disque, qui
	   est hors écran : 16,7 % le placent 51 px sous cette ligne, comme la
	   maquette. */
	.section-programme__cercle {
		justify-content: flex-start;
		padding-block-start: 16.7%;
		padding-inline: 6%;
		/* 28 px : l'échelle n'a pas ce palier, mais c'est lui qui place les
		   trois écarts sur ceux de la maquette — 39, 34 et 30 px d'encre. */
		gap: calc(var(--space-5) + var(--space-1));
	}

	/* Le texte est plus serré que sur desktop : c'est ce qui lui permet de
	   tenir dans la partie visible du cercle, comme dans la maquette. */
	.section-programme__texte {
		font-size: var(--fs-body);        /* Figma mobile : ~16 px */
		line-height: var(--lh-heading);
	}

	.section-programme__icone img {
		max-height: 18vw;                 /* Figma : ~75 px sur 402 */
	}

	/* Le texte se replie sur la largeur de l'écran, pas sur celle du cercle. */
	.section-programme__titre,
	.section-programme__texte,
	.section-programme__actions,
	.section-programme__icone {
		max-width: 100vw;
		padding-inline: var(--gutter);
	}

	.section-programme__actions {
		flex-direction: column;
	}

}


/* Sous 380 px, le texte gagne deux lignes et le contenu ne tient plus dans la
   partie visible du disque : les écarts internes et le pictogramme reprennent
   les mesures d'avant, celles de la maquette étant calées sur 402. */
@media (max-width: 379px) {

	.section-programme__cercle {
		gap: var(--space-4);
	}

	.section-programme__icone img {
		max-height: 15vw;
	}

}


/* ============================================================
   Desktop ≥ 900px — composition circulaire complète + chevauchement
   ============================================================ */

@media (min-width: 900px) {

	/* La section remonte dans le hero de 40 % du diamètre de l'anneau
	   (Figma : 493 px cachés sur 1236 px). Le calcul est indexé sur le
	   diamètre, pas sur vw : au-delà de 1437 px l'anneau plafonne à 1236 px
	   et un chevauchement en vw continuerait de croître, ce qui repasse le
	   titre sous le hero.
	   Le fond est transparent sur toute la section ; un pseudo-élément porte
	   var(--color-bg) depuis la moitié du cercle jusqu'au bas de la section —
	   stable quelle que soit la hauteur du contenu. */
	.section-programme {
		margin-block-start: calc(min(86vw, 1236px) * -0.4);
		background: transparent;
	}

	.section-programme::before {
		content: '';
		position: absolute;
		/* top = moitié du cercle */
		inset: calc(min(86vw, 1236px) * 0.5) 0 0;
		background: var(--color-bg);
		z-index: -1;
	}

	.section-programme__cercle {
		gap: var(--space-5);
		padding: var(--space-7);
		/* Place le titre à 42,6 % du diamètre depuis le haut de l'anneau, soit
		   ~2,6 % sous la limite du hero (Figma : 32 px sur 1236 px).
		   41 % × largeur du cercle (82,2 % du diamètre) = 33,7 %, + 8,9 % de retrait. */
		padding-block-start: 41%;
		justify-content: flex-start;
	}

	.section-programme__titre {
		font-size: var(--fs-hero);
	}

	.section-programme__texte {
		max-width: 88%; /* ~833 px à 1236 px, conforme Figma — réduit le retour à la ligne */
	}

	.section-programme__actions {
		gap: var(--space-5);
	}

	.section-programme__icone img {
		max-width: 123px;
		max-height: 134px;
	}

}