/**
 * Page « E4Y Hub » — bloc « Notre écosystème ».
 *
 * Même technique que le bloc d'introduction du Programme : scène plafonnée à
 * la largeur de maquette, tout exprimé en cqw (1cqw = 14,4 px à 1440).
 * Les coordonnées diffèrent presque toutes, d'où un fichier distinct plutôt
 * qu'un composant commun piloté par une dizaine de variables.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle orange 501 / 235 / Ø 947    anneau  centre 703,5 / 1138,5, Ø 486,7
 *   accroche      704 / 727 / l. 574   photo   Ø 385
 *   colonne        97 / 693            hauteur du bloc 754
 *
 * Emplacement : assets/css/components/hub-intro.css
 */

.hub-intro {
	overflow: hidden;   /* le cercle orange déborde à droite */
}

.hub-intro__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 754;
}

/* ── Grand cercle orange ───────────────────────────────────── */

.hub-intro__cercle {
	position: absolute;
	top: -27.29cqw;
	left: 34.79cqw;
	width: 65.76cqw;            /* Figma : 947 px */
	aspect-ratio: 1;
	background-color: var(--e4y-orange);
	border-radius: var(--radius-full);
}

/* ── Accroche dans le cercle ───────────────────────────────── */

/* Figma donne une boîte de 574 px, ajustée au plus juste sur son propre rendu.
   Le nôtre est légèrement plus large et « faire grandir les projets. » y passe
   à la ligne. On élargit à 648 px en conservant l'axe (centre à 991), pour
   garder les deux lignes de la maquette. */
.hub-intro__accroche {
	position: absolute;
	top: 6.88cqw;
	left: 46.32cqw;
	width: 45cqw;
	margin: 0;
	font-family: var(--font-display);
	font-size: 3.333cqw;        /* Figma : 48 px */
	font-weight: var(--fw-bold);
	line-height: 1.366;
	color: var(--color-text-inverse);
	text-align: center;
}

/* ── Colonne de texte ──────────────────────────────────────── */

/* Les boutons sont empilés et alignés à gauche, d'où la colonne flex.
 *
 * left n'est pas la coordonnée Figma (6,74cqw) mais le bord gauche du
 * conteneur, pour que la colonne s'aligne verticalement sur le logo. Les deux
 * origines diffèrent : la scène est plafonnée à 1440 et centrée, le conteneur
 * suit --container-max et porte sa gouttière. L'expression ramène le bord du
 * conteneur dans le repère de la scène ; au-delà de 1440 elle vaut
 * gouttière + 5 px, en dessous simplement la gouttière.
 */
.hub-intro__colonne {
	position: absolute;
	top: 4.51cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 27.5cqw;
}

.hub-intro__titre {
	margin: 0;
	font-size: 3.333cqw;        /* Figma : 48 px */
	line-height: 1.27;
	text-transform: uppercase;
	color: var(--e4y-orange);
}

.hub-intro__texte {
	margin-block-start: 1.25cqw;
	font-size: 1.389cqw;        /* Figma : 20 px */
	line-height: 1.25;
	color: var(--color-text);
}

/* Les boutons suivent l'échelle de la scène, sinon ils paraîtraient démesurés
   une fois la composition réduite. */
.hub-intro__bouton {
	margin-block-start: 1.25cqw;
	min-height: 3.4cqw;         /* Figma : 49 px */
	padding: 0.6cqw 0.9cqw;
	gap: 0.6cqw;
	font-size: 1.111cqw;        /* Figma : 16 px */
}

.hub-intro__bouton .btn__icon--arrow {
	width: 1.46cqw;
	height: auto;
}

/* Contour orange et non vert : --ghost est vert par défaut, comme dans le
   hero où il est repris en blanc. */
.hub-intro .btn--ghost {
	color: var(--e4y-orange);
	border-color: var(--e4y-orange);
}

.hub-intro .btn--ghost:hover,
.hub-intro .btn--ghost:focus-visible {
	color: var(--e4y-orange);
	background-color: transparent;
	border-color: var(--e4y-orange);
}

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

.hub-intro__medaillon {
	position: absolute;
	top: 18.55cqw;
	left: 31.95cqw;
	width: 33.80cqw;            /* Figma : 486,7 px */
}

.hub-intro__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


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

   Même repli que le bloc d'introduction du Programme, dont cette scène reprend
   la technique : tout est en cqw, et à 402 px un cqw ne vaut plus que 4 px —
   titre à 13 px, texte à 5,6, boutons illisibles. La composition à l'échelle
   n'a de sens qu'aux abords de la maquette.

   Le fichier Figma ne propose pas de maquette mobile pour cette page ; c'est
   la grammaire de l'accueil qui sert de règle, comme ailleurs.
   ============================================================ */

@media (max-width: 1199px) {

	.hub-intro__scene {
		/* Le diamètre sert aussi de repère au retrait et au chevauchement :
		   en pourcentage, ils se seraient calculés sur la scène. */
		--hub-disque: min(360px, 92vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		/* Peu d'air en bas : l'anneau déborde déjà du disque et la section
		   suivante apporte son propre écart. */
		padding-block: var(--space-7) var(--space-3);
	}

	/* Le disque orange est repris par l'accroche elle-même : deux boîtes pour
	   un seul cercle ne pouvaient plus rester alignées une fois la position
	   absolue abandonnée. */
	.hub-intro__cercle {
		display: none;
	}

	.hub-intro__colonne {
		position: static;
		order: 1;
		width: 100%;
		max-width: var(--container-narrow);
		padding-inline: var(--gutter);
	}

	.hub-intro__titre {
		font-size: var(--fs-h1);
	}

	.hub-intro__texte {
		margin-block-start: var(--space-3);
		font-size: var(--fs-body);
	}

	.hub-intro__bouton {
		margin-block-start: var(--space-4);
		gap: var(--space-3);
		min-height: 49px;               /* Figma : 49 px, en dur cette fois */
		padding: var(--space-3) var(--space-5);
		font-size: var(--fs-body);
	}

	.hub-intro__bouton .btn__icon--arrow {
		width: 21px;
	}

	.hub-intro__accroche {
		position: static;
		order: 2;
		display: grid;
		place-items: center;
		width: var(--hub-disque);
		aspect-ratio: 1;
		margin-block-start: var(--space-7);
		padding-inline: calc(var(--hub-disque) * 0.11);
		font-size: var(--fs-h3);
		background-color: var(--e4y-orange);
		border-radius: var(--radius-full);
	}

	/* Chevauche le bas du disque, comme en desktop. */
	.hub-intro__medaillon {
		position: static;
		order: 3;
		width: min(280px, 72vw);
		margin-block-start: calc(var(--hub-disque) * -0.18);
	}

}