/**
 * Conteneurs, grilles et rythme vertical.
 */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

/* Conteneur dont la *largeur de contenu* vaut --container-max : la gouttière
   s'ajoute autour au lieu d'être prise dessus. À 1440 px, le contenu fait
   1300 px et démarre à x = 70 — le calage des cartes du consortium (Figma).
   Le .container standard, lui, retombe à 1168 px de contenu. */
.container--large {
	max-width: calc(var(--container-max) + 2 * var(--gutter));
}

/* La citation tient sur 1315 px avec des marges de 62 px (Figma) : plus large
   que le contenu d'un .container--large, qui retombe à 1232 px une fois la
   gouttière de 104 px déduite. On rétrécit donc la gouttière pour ce seul bloc,
   sans jamais la supprimer — le texte ne doit pas toucher les bords en mobile. */
.container--citation {
	max-width: calc(var(--container-citation) + 2 * var(--space-6));
	padding-inline: var(--space-6);
}

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

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

/* Grille auto-responsive : les colonnes s'empilent seules
   quand la largeur disponible passe sous le minimum. */
.grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.stack > * + * { margin-block-start: var(--space-4); }

/* ------------------------------------------------------------
   Zone crème

   Figma pose une grande ellipse crème derrière le haut de page, du hero
   jusqu'à la fin du consortium ; c'est son bord bas qui dessine la courbe.
   On la reproduit par un rayon elliptique sur les deux coins bas : le blanc
   du body apparaît dans les découpes, plus creusées sur les côtés qu'au
   centre. Seul le fond est mis en forme, les enfants ne sont pas rognés.
   ------------------------------------------------------------ */

.zone-creme {
	position: relative;
	overflow: hidden;   /* rogne le débord latéral du fond */
}

/* Le fond déborde latéralement puis est rogné : sans cela, l'ellipse serait
   calée sur la largeur de la page et se redresserait net sur les bords, au
   lieu d'y arriver encore en pente douce comme dans la maquette.
   La courbe étant ici en bas, l'élément doit rester calé sur les deux bords :
   pas de height comme dans .zone-teinte, qui décalerait l'arc hors du cadre.
   Cette zone dépasse largement --courbe-rayon en hauteur, donc aucun rabotage. */
.zone-creme::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block: 0;
	inset-inline-start: 50%;
	width: var(--courbe-largeur);
	background-color: var(--color-bg);
	border-radius: 0 0 50% 50% / 0 0 var(--courbe-rayon) var(--courbe-rayon);
	transform: translateX(-50%);
}

/* Même ellipse, remplie du vert de marque : les pages pays l'emploient sous le
   bandeau, avec du texte en blanc par-dessus.
   Le crème derrière l'ellipse ne se pose pas ici mais sur .fond-creme, qui
   enveloppe la zone : le fond d'un élément peint par-dessus ses enfants en
   z-index négatif, et masquerait donc le vert. */
.zone-creme--verte::before {
	background-color: var(--color-bg-inverse);
}

/* Enveloppe des pages pays. Elle ne peint rien : son seul rôle est de créer un
   contexte d'empilement, sans lequel les ellipses de .zone-creme — posées en
   z-index -1 — passeraient derrière le fond du premier ancêtre qui en a un.
   Les deux zones crème qu'elle contient s'empilent ensuite dans l'ordre du
   document : la grande d'abord, l'ellipse verte par-dessus. */
.fond-creme {
	position: relative;
	z-index: 0;
}

/* ------------------------------------------------------------
   Zone teintée

   Même ellipse que .zone-creme, retournée : Figma la repose plus bas dans la
   page, remplie du vert de marque à 10 %, et on n'en voit cette fois que l'arc
   haut. Mêmes tokens de géométrie, seuls les coins arrondis changent de côté.
   ------------------------------------------------------------ */

.zone-teinte {
	position: relative;
	overflow: hidden;
}

/* height: max(...) n'est pas cosmétique. Si la hauteur de la boîte est
   inférieure au rayon vertical, le navigateur rabote *tous* les rayons au
   prorata : l'arc s'aplatit et un segment plat apparaît au sommet. Cette
   section ne fait que ~950 px, bien moins que le rayon. Le surplus est rogné
   par overflow, la teinte s'arrête donc au bas de la zone. */
.zone-teinte::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block-start: 0;
	inset-inline-start: 50%;
	width: var(--courbe-largeur);
	height: max(100%, var(--courbe-rayon));
	background-color: var(--color-bg-tint);
	border-radius: 50% 50% 0 0 / var(--courbe-rayon) var(--courbe-rayon) 0 0;
	transform: translateX(-50%);
}

/* Variante des pages pays : l'ellipse n'est pas coupée, on la voit entière —
   un arc en haut, un arc en bas, d'où une teinte en forme de lentille (node
   51:348, 2342 × 2191). Les rayons valent la moitié de la boîte, comme dans
   toute ellipse : la flèche des arcs découle donc de la hauteur de la zone, et
   c'est bien ainsi que Figma la dessine — 2191 px de haut pour 231 de flèche
   sur les bords d'une page de 1440. Les deux sections qu'elle contient font
   cette hauteur ; avec une seule, l'ellipse s'aplatirait.
   La teinte y est aussi plus appuyée qu'ailleurs — 20 % du vert, contre 10. */
.zone-teinte--ellipse::before {
	height: 100%;
	background-color: var(--color-bg-tint-fort);
	border-radius: 50% / 50%;
}


/* Variante réservée au mobile.

   La maquette desktop de la page Programme ne pose aucune teinte ; dépliée en
   colonne, cette page enchaînait pourtant trois blocs sur fond blanc, là où
   l'accueil courbe ses transitions. L'ellipse n'apparaît donc que sous 768 px,
   et le rognage avec elle : sur les écrans larges, la zone ne doit rien
   changer au flux ni à ce qui dépasse. */

.zone-teinte--mob {
	overflow: visible;
}

.zone-teinte--mob::before {
	content: none;
}


/* Mobile — l'arc de la zone teintée s'aplatit.

   La même ellipse qu'en desktop, ramenée à 402 px de large, fait un dôme :
   65 px de creux sur les bords. Figma 01_MOB n'en montre qu'une trentaine.
   Seule la zone teintée est concernée ; la zone crème des pages pays garde
   son rayon tant que leur maquette mobile n'a pas été relevée.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

	/* :not() n'est pas décoratif : la variante lentille des pages pays est
	   aussi une .zone-teinte, et cette règle, déclarée après elle, lui
	   reprendrait sa hauteur et ses rayons. */
	.zone-teinte:not(.zone-teinte--ellipse)::before {
		height: max(100%, var(--courbe-rayon-mob));
		border-radius: 50% 50% 0 0 / var(--courbe-rayon-mob) var(--courbe-rayon-mob) 0 0;
	}

	/* La lentille suit la même règle, avec ses deux arcs. En desktop ses rayons
	   valent la moitié de la boîte, ce qui donne une flèche de 231 px sur une
	   page de 1440 : la proportion est juste à cette largeur. Ramenée à 402 px
	   pour une zone de 4 000 de haut, la même formule dresse un dôme de 200 px
	   qui traversait le titre du coup de cœur. */
	.zone-teinte--ellipse::before {
		border-radius: 50% / var(--courbe-rayon-mob);
	}

	.zone-teinte--mob {
		overflow: hidden;
		/* La courbe basse a besoin de place sous le dernier élément : sans
		   elle, la teinte s'arrêtait net au ras du bouton. */
		padding-block-end: var(--space-8);
	}

	/* Deux arcs et non un seul : cette zone n'est pas coupée par la suivante,
	   elle se referme d'elle-même. D'où une hauteur exacte — au-delà de 100 %,
	   l'arc bas passerait sous le bord et le rognage l'avalerait.
	   Le sélecteur double la classe pour repasser devant la règle générale
	   ci-dessus, qui redresse les coins bas. */
	.zone-teinte.zone-teinte--mob::before {
		content: '';
		height: 100%;
		border-radius: 50% / var(--courbe-rayon-mob);
	}

	/* Variante à fond plat, pour les zones que suit un bloc portant sa propre
	   courbe. Deux arcs face à face ouvrent entre eux un croissant blanc :
	   tangents au milieu, ils s'écartent de 110 px sur les bords. Le fond
	   redevient droit et le bloc suivant fait naître son arc à même la teinte. */
	.zone-teinte.zone-teinte--mob-plate {
		padding-block-end: var(--space-8);
	}

	.zone-teinte.zone-teinte--mob-plate::before {
		border-radius: 50% 50% 0 0 / var(--courbe-rayon-mob) var(--courbe-rayon-mob) 0 0;
	}

	/* Même variante côté crème, et pour la même raison. L'arc crème est le plus
	   creux des deux — son rayon vertical vaut 332 px en mobile contre 145 —
	   d'où 92 px de blanc sur les bords contre 1 au milieu quand l'arc teinté
	   lui faisait face. */
	.zone-creme--mob-plate::before {
		border-radius: 0;
	}

	/* Soudée au bloc qui précède : la zone remonte de la flèche de son propre
	   arc, pour que ses extrémités affleurent exactement le bord droit
	   d'au-dessus. L'arc naît alors de la couleur précédente, sans croissant. */
	.zone-teinte--mob-soudee {
		margin-block-start: calc(-1 * var(--courbe-fleche-mob));
	}

	/* Teinte opaque, et non les 10 % de vert sur fond transparent : là où la
	   zone chevauche celle du dessus, le crème transparaissait et dessinait un
	   croissant plus chaud le long de l'arc — le chevauchement se voyait. La
	   version pleine donne exactement la même couleur sur blanc. */
	.zone-teinte.zone-teinte--mob-soudee::before {
		background-color: var(--color-bg-tint-plein);
	}

}