/**
 * Page « Actualités » — bloc « À la une ».
 *
 * Même technique que les blocs d'introduction du Programme et du Hub : 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.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle sable  530 / 235  / Ø 947    anneau  centre 622,5 / 1185,5, Ø 482
 *   accroche      644 / 656  / l. 728   photo   Ø 385
 *   colonne       100 / 704  / l. 414   hauteur du bloc 798,5
 *
 * Emplacement : assets/css/components/actu-une.css
 */

.actu-une {
	overflow: hidden;   /* le cercle sable déborde à droite */
}

.actu-une__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 798.5;
}

/* ── Grand cercle sable ────────────────────────────────────── */

/* Le haut du cercle passe sous le bandeau photographique : d'où le décalage
   négatif, la scène commençant au bas de celui-ci. */
.actu-une__cercle {
	position: absolute;
	top: -27.292cqw;
	left: 36.806cqw;
	width: 65.764cqw;           /* Figma : 947 px */
	aspect-ratio: 1;
	background-color: var(--e4y-sand);
	border-radius: var(--radius-full);
}

/* ── Chapô dans le cercle ──────────────────────────────────── */

/* Figma donne une boîte de 728 px, ajustée à ses propres métriques. La nôtre
   est élargie de 4,5 % — l'écart connu entre Eigerdals et sa substitution — en
   conservant l'axe à 1008, faute de quoi chaque ligne se coupe un mot trop tôt
   et la dernière, devenue plus longue, vient buter dans l'anneau. */
.actu-une__accroche {
	position: absolute;
	top: 1.944cqw;
	left: 42.57cqw;
	width: 54.86cqw;            /* Figma : 728 px, élargi à 790 */
	margin: 0;
	font-family: var(--font-display);
	font-size: 3.333cqw;        /* Figma : 48 px */
	font-weight: var(--fw-bold);
	line-height: 1.19;
	color: var(--e4y-bronze);
	text-align: center;
}

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

/* left n'est pas la coordonnée Figma mais le bord gauche du conteneur, pour
   que la colonne s'aligne verticalement sur le logo — voir hub-intro.css, qui
   explique le calcul. */
.actu-une__colonne {
	position: absolute;
	top: 5.278cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 28.75cqw;            /* Figma : 414 px */
}

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

.actu-une__texte {
	margin-block-start: 0.42cqw;
	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. */
.actu-une__bouton {
	margin-block-start: 1.18cqw;
	min-height: 3.4cqw;         /* Figma : 49 px */
	padding: 0.6cqw 0.9cqw;
	gap: 0.6cqw;
	font-size: 1.111cqw;        /* Figma : 16 px */
}

.actu-une__bouton .btn__icon--arrow {
	width: 1.46cqw;
	height: auto;
}

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

.actu-une__medaillon {
	position: absolute;
	top: 21.979cqw;
	left: 26.493cqw;
	width: 33.472cqw;           /* Figma : 482 px */
}

.actu-une__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


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

   Même repli que les blocs d'introduction du Programme et du Hub, 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.

   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) {

	.actu-une__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. */
		--actu-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 sable est repris par le chapô lui-même : deux boîtes pour un
	   seul cercle ne pouvaient plus rester alignées une fois la position
	   absolue abandonnée. */
	.actu-une__cercle {
		display: none;
	}

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

	.actu-une__titre {
		font-size: var(--fs-h1);
	}

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

	.actu-une__bouton {
		margin-block-start: var(--space-5);
		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);
	}

	.actu-une__bouton .btn__icon--arrow {
		width: 21px;
	}

	/* Les coupures du chapô ont été saisies pour la boîte de 790 px de la
	   maquette. Reportées dans un disque de 360, elles s'ajoutaient au repli
	   naturel du texte : « la vie » et « informés des » se retrouvaient seuls
	   sur leur ligne. Elles sont neutralisées, le texte se replie de lui-même. */
	.actu-une__accroche br {
		display: none;
	}

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

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

}