/* ============================================================
   layout.css - structure et composants.

   Règle absolue : ce fichier ne contient aucune valeur littérale
   de couleur, de police ou de taille. Il ne consomme que les
   variables définies par tokens.css (ou par un thème qui en
   respecte le contrat). scripts/audit-tokens.mjs le vérifie.
   ============================================================ */

/* --- Socle --------------------------------------------------- */

body {
	background-color: var(--couleur-fond);
	color: var(--couleur-texte);
	font-family: var(--police-corps);
	font-size: var(--taille-m);
	font-weight: var(--graisse-normale);
	line-height: var(--interligne-normal);
	display: flex;
	flex-direction: column;
}

.conteneur {
	width: 100%;
	max-width: var(--largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--gouttiere-page, clamp(1.25rem, 4.5vw, 3rem));
	box-sizing: border-box;
}

/* --- Accessibilité ------------------------------------------ */

.lien-evitement {
	position: absolute;
	inset-block-start: var(--espace-2xs);
	inset-inline-start: var(--espace-2xs);
	z-index: 100;
	padding: var(--espace-2xs) var(--espace-s);
	background-color: var(--couleur-accent);
	color: var(--couleur-accent-contraste);
	border-radius: var(--rayon-s);
	transform: translateY(-200%);
	transition: transform var(--transition-rapide);
}

.lien-evitement:focus-visible {
	transform: translateY(0);
}

:focus-visible {
	outline: var(--epaisseur-focus) solid var(--couleur-focus);
	outline-offset: var(--espace-3xs);
	border-radius: var(--rayon-xs);
}

.visuellement-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- En-tête et navigation ---------------------------------- */

.entete {
	position: sticky;
	inset-block-start: 0;
	z-index: 10;
	background-color: var(--couleur-fond);
	border-block-end: var(--epaisseur-trait) solid var(--couleur-bordure);
}

.entete__interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-2xs) var(--espace-m);
	padding-block: var(--espace-xs);
}

.entete__marque {
	font-family: var(--police-titres);
	font-size: clamp(0.95rem, 0.8rem + 0.7vw, var(--taille-l));
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
	text-decoration: none;
	max-width: min(100%, 28rem);
}

.entete__marque:hover {
	color: var(--couleur-accent);
}

/* Navigation d'ancres qui passe simplement à la ligne sur petit
   écran : pas de menu déroulant, donc aucun JavaScript. */
.nav__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espace-2xs) var(--espace-m);
	list-style: none;
	padding: 0;
}

.nav__lien {
	display: inline-block;
	padding-block: var(--espace-3xs);
	font-size: var(--taille-s);
	font-weight: var(--graisse-moyenne);
	color: var(--couleur-texte-doux);
	text-decoration: none;
	border-block-end: var(--epaisseur-focus) solid transparent;
	transition: color var(--transition-rapide);
}

.nav__lien:hover,
.nav__lien:focus-visible {
	color: var(--couleur-accent);
}

.nav__lien[aria-current="page"] {
	color: var(--couleur-titre);
	border-block-end-color: var(--couleur-accent);
}

/* --- Sections ------------------------------------------------ */

.contenu-principal {
	flex: 1 0 auto;
}

.section {
	padding-block: var(--espace-2xl);
}

.section--alt {
	background-color: var(--couleur-fond-alt);
}

.section--compacte {
	padding-block: var(--espace-xl);
}

.section__entete {
	max-width: none;
	margin-block-end: var(--espace-l);
}

.section__titre {
	font-family: var(--police-titres);
	font-size: var(--taille-2xl);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
}

.section__intro {
	margin-block-start: var(--espace-xs);
	font-size: var(--taille-l);
	color: var(--couleur-texte-doux);
}

/* --- Hero ---------------------------------------------------- */

.hero {
	padding-block: clamp(2rem, 4vw, var(--espace-3xl));
	background-color: var(--couleur-fond-alt);
	border-block-end: var(--epaisseur-trait) solid var(--couleur-bordure);
}

.hero__intro {
	max-width: 48rem;
	margin-block-end: var(--espace-l);
}

.hero--avec-carte .hero__intro {
	max-width: none;
	margin-block-end: var(--espace-m);
}

.hero--avec-carte .hero__titre {
	max-width: 42rem;
}

.hero__grille {
	display: block;
}

.hero__grille--carte {
	display: grid;
	gap: var(--espace-l);
	align-items: stretch;
}

@media (min-width: 56rem) {
	.hero__grille--carte {
		grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.35fr);
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
		align-items: stretch;
	}
}

.hero__interieur {
	max-width: var(--largeur-texte);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--espace-s);
	min-width: 0;
}

.hero__grille--carte .hero__interieur {
	max-width: none;
}

.hero__carte {
	min-width: 0;
	width: 100%;
}

.hero__carte .carte-hub__carte {
	height: clamp(16rem, 50vw, 22rem);
}

@media (min-width: 56rem) {
	.hero__carte .carte-hub__cadre {
		height: 100%;
		min-height: 24rem;
		display: flex;
		flex-direction: column;
	}

	.hero__carte .carte-hub__carte {
		flex: 1 1 auto;
		height: auto;
		min-height: 20rem;
		max-height: none;
	}
}

.hero__surtitre {
	display: block;
	margin-block-end: var(--espace-2xs);
	font-size: var(--taille-s);
	font-weight: var(--graisse-moyenne);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--couleur-accent);
}

.hero__titre {
	font-family: var(--police-titres);
	font-size: clamp(1.45rem, 1rem + 2.2vw, 2.35rem);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
	text-wrap: balance;
}

.hero__accroche {
	margin-block-start: var(--espace-s);
	font-size: var(--taille-l);
	line-height: var(--interligne-large);
	color: var(--couleur-texte-doux);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-xs);
	margin-block-start: 0;
}

.hero__grille--carte .chiffres {
	margin-block-start: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 28rem) {
	.hero__grille--carte .chiffres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Boutons ------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2xs);
	padding: var(--espace-2xs) var(--espace-m);
	min-height: 2.75rem;
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
	line-height: var(--interligne-serre);
	text-align: center;
	text-decoration: none;
	border-radius: var(--rayon-m);
	border: var(--epaisseur-trait) solid transparent;
	transition:
		background-color var(--transition-rapide),
		color var(--transition-rapide),
		border-color var(--transition-rapide);
}

.bouton--primaire {
	background-color: var(--couleur-accent);
	color: var(--couleur-accent-contraste);
}

.bouton--primaire:hover {
	background-color: var(--couleur-accent-survol);
}

.bouton--secondaire {
	background-color: transparent;
	color: var(--couleur-accent);
	border-color: var(--couleur-bordure);
}

.bouton--secondaire:hover {
	border-color: var(--couleur-accent);
	background-color: var(--couleur-surface);
}

/* --- Cartes -------------------------------------------------- */

/* auto-fit + minmax : le nombre de colonnes s'adapte seul, sans
   media query et sans valeur de rupture à maintenir. */
.grille-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--espace-m);
	list-style: none;
	padding: 0;
}

.carte {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--espace-2xs);
	height: 100%;
	padding: var(--espace-m);
	background-color: var(--couleur-surface);
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	box-shadow: var(--ombre-s);
}

.carte__titre {
	font-family: var(--police-titres);
	font-size: var(--taille-l);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
}

.carte__texte {
	color: var(--couleur-texte-doux);
}

.carte__texte > * + * {
	margin-block-start: var(--espace-2xs);
}

/* Container query : une carte large respire davantage, quel que
   soit le nombre de colonnes de la grille. */
@container (min-width: 26rem) {
	.carte {
		padding: var(--espace-l);
		gap: var(--espace-xs);
	}
}

/* --- Chiffres clés ------------------------------------------ */

.chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: var(--espace-m);
	margin-block-start: var(--espace-l);
	list-style: none;
	padding: 0;
}

.chiffre {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3xs);
	padding-inline-start: var(--espace-s);
	border-inline-start: var(--epaisseur-focus) solid var(--couleur-accent);
}

.chiffre__valeur {
	font-family: var(--police-titres);
	font-size: var(--taille-3xl);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
	font-variant-numeric: tabular-nums;
}

.chiffre__libelle {
	font-size: var(--taille-s);
	color: var(--couleur-texte-doux);
	text-wrap: balance;
}

/* --- Listes de référence longues ---------------------------- */

/* `columns` plutôt qu'une grille : le texte se répartit en
   colonnes de largeur minimale et le nombre de colonnes suit la
   place disponible, sans media query. */
.liste-reference {
	columns: 22rem auto;
	column-gap: var(--espace-l);
	list-style: none;
	padding: 0;
	counter-reset: reference;
}

.liste-reference__item {
	break-inside: avoid;
	padding-block: var(--espace-2xs);
	border-block-end: var(--epaisseur-trait) solid var(--couleur-bordure);
	display: flex;
	gap: var(--espace-2xs);
	align-items: baseline;
}

.liste-reference__rang {
	flex: 0 0 auto;
	min-width: 2.25rem;
	font-size: var(--taille-s);
	font-variant-numeric: tabular-nums;
	color: var(--couleur-texte-doux);
}

.liste-reference__nom {
	font-weight: var(--graisse-moyenne);
	color: var(--couleur-titre);
}

.liste-reference__meta {
	display: block;
	font-size: var(--taille-s);
	color: var(--couleur-texte-doux);
}

.liste-reference__marque {
	font-weight: var(--graisse-moyenne);
	color: var(--couleur-accent);
}

/* --- Regroupements dépliables (HTML natif, sans JS) --------- */

.groupe {
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	background-color: var(--couleur-surface);
}

.groupe + .groupe {
	margin-block-start: var(--espace-2xs);
}

.groupe__titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-s);
	padding: var(--espace-2xs) var(--espace-s);
	font-family: var(--police-titres);
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
	color: var(--couleur-titre);
	cursor: pointer;
}

.groupe__corps {
	padding: 0 var(--espace-s) var(--espace-s);
}

.compteur {
	flex: 0 0 auto;
	padding: 0 var(--espace-2xs);
	font-size: var(--taille-xs);
	font-variant-numeric: tabular-nums;
	color: var(--couleur-texte-doux);
	background-color: var(--couleur-fond-alt);
	border-radius: var(--rayon-pilule);
}

/* --- Contenu rédactionnel (Markdown) ------------------------ */

.prose {
	/* Full width of the padded shell; long lines still wrap with the gutter. */
	max-width: none;
	width: 100%;
}

.prose > * + * {
	margin-block-start: var(--espace-s);
}

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--police-titres);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	color: var(--couleur-titre);
	margin-block-start: var(--espace-l);
}

.prose h2 {
	font-size: var(--taille-xl);
}

.prose h3 {
	font-size: var(--taille-l);
}

.prose h4 {
	font-size: var(--taille-m);
}

.prose a {
	color: var(--couleur-accent);
	text-decoration-thickness: var(--epaisseur-trait);
	text-underline-offset: 0.15em;
}

.prose a:hover {
	color: var(--couleur-accent-survol);
}

.prose ul,
.prose ol {
	padding-inline-start: var(--espace-m);
}

.prose li + li {
	margin-block-start: var(--espace-3xs);
}

.prose strong {
	font-weight: var(--graisse-forte);
	color: var(--couleur-titre);
}

.prose blockquote {
	padding-inline-start: var(--espace-s);
	border-inline-start: var(--epaisseur-focus) solid var(--couleur-accent);
	color: var(--couleur-texte-doux);
	font-style: italic;
}

.prose code {
	font-family: var(--police-mono);
	font-size: var(--taille-s);
	padding: 0 var(--espace-3xs);
	background-color: var(--couleur-fond-alt);
	border-radius: var(--rayon-xs);
}

.prose pre {
	padding: var(--espace-s);
	overflow-x: auto;
	background-color: var(--couleur-fond-alt);
	border-radius: var(--rayon-m);
}

.prose pre code {
	padding: 0;
	background: none;
}

.prose table {
	display: block;
	overflow-x: auto;
	font-size: var(--taille-s);
}

.prose th,
.prose td {
	padding: var(--espace-2xs);
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	text-align: start;
}

.prose img {
	border-radius: var(--rayon-m);
}

/* --- Contact ------------------------------------------------- */

.contact {
	display: grid;
	gap: var(--espace-l);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	align-items: start;
}

.contact__liste {
	display: flex;
	flex-direction: column;
	gap: var(--espace-s);
	list-style: none;
	padding: 0;
}

.contact__intitule {
	display: block;
	font-size: var(--taille-xs);
	font-weight: var(--graisse-moyenne);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--couleur-texte-doux);
}

.contact__valeur {
	font-size: var(--taille-l);
	color: var(--couleur-accent);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact__valeur:hover {
	text-decoration: underline;
}

/* Substitut d'iframe : une image locale et un lien sortant
   explicite, jamais de carte ni de lecteur tiers embarqué. */
.media-statique {
	display: block;
	margin: 0;
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	overflow: hidden;
	background-color: var(--couleur-fond-alt);
}

.media-statique--large {
	max-width: var(--largeur-contenu);
}

.media-statique--large img {
	width: 100%;
	height: auto;
}

/* --- Carte interactive (style UPPA PartnerMap, assets locaux) --- */

.carte-hub {
	display: block;
}

.carte-hub__cadre {
	overflow: hidden;
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	background-color: #f5f4f1;
	box-shadow: var(--ombre-s);
}

.carte-hub__filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	padding: 0.65rem 0.75rem;
	background-color: rgba(255, 255, 255, 0.94);
	border-block-end: var(--epaisseur-trait) solid var(--couleur-bordure);
}

.carte-hub__champ {
	margin: 0;
	padding: 0.45rem 0.65rem;
	min-height: 2.35rem;
	font: inherit;
	font-size: var(--taille-s);
	color: var(--couleur-texte);
	background-color: var(--couleur-surface);
	border: var(--epaisseur-trait) solid var(--couleur-bordure);
	border-radius: var(--rayon-s);
}

.carte-hub__champ:focus {
	outline: var(--epaisseur-focus) solid var(--couleur-focus);
	outline-offset: 1px;
	border-color: var(--couleur-accent);
}

.carte-hub__champ--search {
	flex: 1 1 12rem;
	min-width: 0;
}

.carte-hub__champ--pays {
	flex: 0 1 11.5rem;
	max-width: 100%;
	cursor: pointer;
}

.carte-hub__carte {
	width: 100%;
	height: clamp(22rem, 55vh, 36rem);
	border: 0;
	border-radius: 0;
	background-color: #f5f4f1;
	overflow: hidden;
	z-index: 0;
}

.carte-hub__carte .leaflet-container {
	width: 100%;
	height: 100%;
	font: inherit;
	background: #f5f4f1;
}

.carte-hub__carte .leaflet-control-zoom {
	border: var(--epaisseur-trait) solid var(--couleur-bordure) !important;
	border-radius: var(--rayon-s) !important;
	overflow: hidden;
	box-shadow: none !important;
}

.carte-hub__carte .leaflet-bar a {
	width: 1.85rem;
	height: 1.85rem;
	line-height: 1.85rem;
	color: var(--couleur-titre);
	background: #fff;
	border-bottom-color: var(--couleur-bordure);
}

.carte-hub__carte .leaflet-bar a:hover,
.carte-hub__carte .leaflet-bar a:focus {
	color: var(--couleur-accent);
	background: #fff;
}

.carte-hub__carte .leaflet-control-attribution {
	margin: 0;
	padding: 0.15rem 0.4rem;
	font-size: 0.65rem;
	color: var(--couleur-texte-doux);
	background: rgba(245, 244, 241, 0.88);
	border: 0;
	box-shadow: none;
}

.carte-hub__carte .leaflet-control-attribution a {
	color: inherit;
}

.carte-dans-liste {
	margin-block-end: var(--espace-xl);
}

.carte-hub__carte .carte__erreur {
	padding: var(--espace-m);
	color: var(--couleur-texte-doux);
}

.carte-leaflet-popup .leaflet-popup-content-wrapper {
	border-radius: var(--rayon-s);
	box-shadow: var(--ombre-m);
}

.carte-leaflet-popup .leaflet-popup-content {
	margin: 0.55rem 0.7rem;
	line-height: 1.3;
}

.carte-popup strong {
	display: block;
	font-size: var(--taille-s);
	line-height: 1.25;
	color: var(--couleur-titre);
}

.carte-popup__lieu {
	margin: 0.2rem 0 0;
	font-size: var(--taille-xs);
	color: var(--couleur-texte-doux);
}

.carte-popup__alliance {
	margin: 0.35rem 0 0;
}

.carte-popup__alliance span {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	font-size: var(--taille-xs);
	font-weight: var(--graisse-forte);
	color: var(--couleur-accent);
	background-color: var(--couleur-fond-alt);
	border-radius: var(--rayon-pilule);
}

.media-statique__legende {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2xs) var(--espace-s);
	justify-content: space-between;
	align-items: center;
	padding: var(--espace-2xs) var(--espace-s);
	font-size: var(--taille-s);
	color: var(--couleur-texte-doux);
}

/* --- Pied de page -------------------------------------------- */

.pied {
	padding-block: var(--espace-l);
	background-color: var(--couleur-fond-alt);
	border-block-start: var(--epaisseur-trait) solid var(--couleur-bordure);
	font-size: var(--taille-s);
	color: var(--couleur-texte-doux);
}

.pied__interieur {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2xs) var(--espace-m);
	justify-content: space-between;
	align-items: center;
}

.pied__liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2xs) var(--espace-m);
	list-style: none;
	padding: 0;
}

.pied__liens a {
	color: var(--couleur-texte-doux);
	text-decoration-thickness: var(--epaisseur-trait);
	text-underline-offset: 0.15em;
}

.pied__liens a:hover {
	color: var(--couleur-accent);
}

.pied__note {
	max-width: var(--largeur-texte);
	margin-block-start: var(--espace-s);
	font-size: var(--taille-xs);
}

/* --- Impression ---------------------------------------------- */

@media print {
	.entete,
	.lien-evitement,
	.nav {
		display: none;
	}

	.section,
	.hero {
		padding-block: var(--espace-s);
		background: none;
	}
}