/**
 * Page « Le Programme » — arbre, citation et appel à inscription.
 *
 * Figma : l'arbre (281 × 351) chevauche le bas du parcours de 74 px, puis la
 * citation sur 1194 px de large et le bouton or centré.
 *
 * Emplacement : assets/css/components/pgm-citation.css
 */

/* Pas de marge basse : l'écart avec la section suivante est porté par elle
   seule. Les deux additionnaient leur --section-gap, soit 192 px là où la
   maquette en prévoit 77. */
.pgm-citation {
	padding-block-end: 0;
	text-align: center;
}

/* La marge négative reproduit le chevauchement avec la dernière rangée de
   pastilles. position: relative suffit à le faire passer devant ; y ajouter un
   z-index créerait un contexte d'empilement qui isolerait le fondu ci-dessous
   et le rendrait sans effet. */
/* Figma place le haut de l'arbre 209 px au-dessus du point le plus bas de la
   zone crème. En pourcentage — donc calculé sur la largeur du conteneur — le
   décalage suit l'échelle de la page au lieu de se figer en pixels. */
.pgm-citation__arbre {
	position: relative;
	width: 281px;
	max-width: 25%;
	margin-inline: auto;
	margin-block-start: -15.3%;
}

/* Le fichier a un fond blanc opaque, sans transparence. Figma le neutralise
   par un fondu « obscurcir » : chaque pixel blanc prend la couleur de ce qu'il
   recouvre, que ce soit le crème de la zone ou une pastille du parcours. */
.pgm-citation__img {
	width: 100%;
	height: auto;
	mix-blend-mode: darken;
}

.pgm-citation__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-8);   /* Figma : 60 px sous la citation */
}


/* ============================================================
   Mobile — l'arbre reprend du corps

   Le quart de la largeur du conteneur fait 86 px sur un écran de 402 : trop
   peu pour qu'on distingue la main sous l'arbre. Le plafond passe donc en
   pixels, et le chevauchement avec la dernière pastille se réduit d'autant —
   les pastilles sont désormais empilées, la queue de l'ellipse crème est plus
   courte qu'en desktop.
   ============================================================ */

@media (max-width: 767px) {

	.pgm-citation__arbre {
		max-width: 150px;
		margin-block-start: calc(-1 * var(--space-6));
	}

	.pgm-citation__actions {
		margin-block-start: var(--space-6);
	}

	/* Le socle ne pose aucun écart en bas — la section suivante le portait.
	   Sous l'ellipse teintée, cet écart est passé de l'autre côté de l'arc :
	   le bouton se retrouvait au ras du sommet de la courbe. */
	.pgm-citation {
		padding-block-end: var(--space-8);
	}

}