/*
 * Hero et bandeau tricolore.
 */

.aspacam-hero {
	/*
	 * Ramenée à ~32px (repli : elle valait 4rem/64px, calquée par erreur sur
	 * une comparaison entre deux captures prises à des largeurs différentes
	 * — voir le rapport de session). C'est elle la vraie responsable de la
	 * hauteur excessive de la bande, pas le titre seul.
	 */
	padding-block: 2rem;
	background-color: var(--aspacam-theme-color-blue-tint);
	text-align: center;
}

/*
 * Le critère est un résultat (le nombre de lignes), pas une valeur de
 * police : la taille s'ajuste en continu avec la largeur de fenêtre
 * (clamp + vw), vérifiée à la mesure à chaque palier plutôt que fixée à
 * l'œil. Deux formules, calibrées pour se raccorder sans saut à 700px :
 *
 * - jusqu'à 700px : de 20px (320px de large) à 32px (700px de large,
 *   rendu jugé parfait, inchangé) ;
 * - au-delà de 900px : de 32px à 36px (1400px et plus), sans jamais
 *   retrouver les 44px précédents — décision de Nicolas, la maquette
 *   n'existe qu'à ~750px et ne dit rien au-delà. Entre 700 et 900px, la
 *   première formule plafonne déjà à 32px : rien à ajouter.
 *
 * --aspacam-theme-font-size-hero-title porte la valeur courante ; le
 * sous-titre s'y réfère (calc ci-dessous) pour suivre le titre dans la
 * même proportion à chaque largeur, au lieu de rester figé.
 */
.aspacam-hero {
	--aspacam-theme-font-size-hero-title: clamp(20px, 3.1579vw + 9.895px, 32px);
}

@media (min-width: 900px) {
	.aspacam-hero {
		--aspacam-theme-font-size-hero-title: clamp(32px, 0.8vw + 24.8px, 36px);
	}
}

.aspacam-hero__title {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--aspacam-theme-space-sm);
	font-size: var(--aspacam-theme-font-size-hero-title);
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 900px) {
	/* La colonne s'élargit avec le titre, de quelques dizaines de pixels. */
	.aspacam-hero__title {
		max-width: 700px;
	}
}

.aspacam-hero__subtitle {
	/*
	 * Moitié de la taille du titre, à chaque largeur : 16px à 700px (32÷2),
	 * jamais moins à cette largeur puisque le titre n'y descend jamais sous
	 * 32px. En dessous de 700px, il suit le titre plus bas, avec un plancher
	 * à 11,5px : sans lui, il tombait à 10,9px à 380px et 10px à 320px,
	 * trop petit pour être lu. La proportion elle-même ne change pas.
	 */
	font-size: max(11.5px, calc(var(--aspacam-theme-font-size-hero-title) * 0.5));
	/* La couleur vient de .aspacam-text-dense (front-page.php), pas d'ici :
	   meme gris que tous les autres petits textes de la page. */
	margin-bottom: 0;
}

/* Bande de 4 pixels, trois segments égaux : seul autre usage direct des trois couleurs (SITE.md). */
.aspacam-tricolor-bar {
	display: flex;
	height: 4px;
}

.aspacam-tricolor-bar__segment {
	flex: 1;
}

.aspacam-tricolor-bar__segment--blue {
	background-color: var(--aspacam-theme-color-blue);
}

.aspacam-tricolor-bar__segment--red {
	background-color: var(--aspacam-theme-color-red);
}

.aspacam-tricolor-bar__segment--yellow {
	background-color: var(--aspacam-theme-color-yellow);
}