/*
 * En-tête : logo, nom, navigation, bouton Adhérer.
 *
 * Trois zones nommées : le logo à gauche, la navigation au centre, le
 * bouton Adhérer à droite, sur une seule ligne en fenêtre large. Sous
 * 640px, la navigation passe sur une seconde ligne, mais reste sur une
 * seule ligne elle-même, toujours entièrement visible : pas de menu à
 * ouvrir, rien de cette navigation n'est jamais caché derrière un geste
 * (METHODE.md, « le reste en retrait et visible en permanence »).
 */

.aspacam-header {
	border-bottom: 1px solid var(--aspacam-theme-color-border);
}

.aspacam-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "brand nav actions";
	align-items: center;
	gap: var(--aspacam-theme-space-sm);
	padding-block: var(--aspacam-theme-space-sm);
}

.aspacam-header__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	gap: var(--aspacam-theme-space-xs);
	justify-self: start;
}

.aspacam-header__name {
	font-size: var(--aspacam-theme-font-size-large);
	font-weight: bold;
	color: var(--aspacam-theme-color-text);
	text-decoration: none;
}

/* Le logo réel, ou l'espace neutre qui le remplace tant qu'il n'est pas réglé. */
.aspacam-header__logo {
	display: block;
	width: 48px;
	height: 48px;
}

.aspacam-header__logo img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.aspacam-header__logo--placeholder {
	border-radius: 50%;
	background-color: var(--aspacam-theme-color-border);
}

.aspacam-header__nav {
	grid-area: nav;
	justify-self: center;
}

.aspacam-header__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aspacam-theme-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aspacam-header__nav a {
	color: var(--aspacam-theme-color-text);
	text-decoration: none;
}

.aspacam-header__nav a:hover,
.aspacam-header__nav a:focus {
	text-decoration: underline;
}

.aspacam-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: var(--aspacam-theme-space-sm);
	justify-self: end;
}

@media (max-width: 640px) {

	/* Logo et Adhérer sur la première ligne, navigation sur la seconde,
	   sous peine que le bouton de menu retiré à la session précédente ne
	   manque à quiconque : les trois liens restent tout le temps visibles. */
	.aspacam-header__inner {
		/* "minmax(0, 1fr)" et pas seulement "1fr" : une colonne "1fr" a une
		   largeur minimale implicite égale à son contenu, ce qui peut forcer
		   toute la grille à déborder. "minmax(0, 1fr)" retire ce plancher. */
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand actions"
			"nav nav";
	}

	.aspacam-header__nav {
		justify-self: stretch;
	}

	.aspacam-header__nav ul {
		justify-content: center;
		/* Resserré par rapport à l'écart large : les trois liens doivent
		   tenir sur une seule ligne jusqu'à 320px, sans réduire leur taille
		   de police (METHODE.md, lisibilité). */
		gap: var(--aspacam-theme-space-xs);
	}
}