/*!
Theme Name: theme agm2
Theme URI: http://underscores.me/
Author: Lamia OUMMAD
Description: Un thème WordPress personnalisé pour l'entreprise AGM2.
Version: 1.3.3
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theme-agm2
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
# Polices externes
--------------------------------------------------------------
Les polices Google (Cormorant Garamond, Inter) sont chargées par
wp_enqueue_style() dans functions.php (handle « agm2-fonts »).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	/* Couleurs — palette monochrome (aucun accent coloré) */
	--color-primary: #1a1b1f;        /* quasi-noir : boutons, liens actifs, titres */
	--color-primary-dark: #000000;   /* noir pur : hover / active */
	--color-secondary: #6c6e73;      /* gris moyen : rappel visuel discret */
	--color-text: #1a1b1f;
	--color-text-light: #6c6e73;
	--color-heading: #1a1b1f;
	--color-background: #fdfdfb;     /* blanc cassé légèrement chaud */
	--color-background-alt: #f5f4f1;
	--color-border: #e1e2e5;
	--color-dark-surface: #9f9f9f;   /* fonds sombres : manifeste, bandeau, footer */
	/* Texte posé SUR un fond sombre (manifeste, bandeau défilant).
	   À ne pas confondre avec --color-hero-* ci-dessous. */
	--color-on-dark: #ffffff;
	--color-on-dark-muted: rgba(253, 253, 251, 0.7);
	/* Texte du hero. Depuis le retrait du voile dégradé, il se pose sur
	   une image claire : il lui faut donc une encre sombre. Variable
	   distincte, sinon le bandeau défilant et le manifeste — qui sont
	   eux réellement sur fond noir — deviendraient illisibles. */
	--color-hero-text: #2f2c2c;
	--color-hero-text-muted: rgba(35, 35, 34, 0.7);
	--color-link: var(--color-primary);
	--color-link-visited: #4a4b4f;
	--color-link-hover: var(--color-primary-dark);
	--color-success: #2e7d32;
	--color-error: #c62828;

	/* Variables ajoutées pour le mode sombre : elles remplacent des couleurs
	   qui étaient écrites en dur plus bas dans la feuille. */
	--color-on-primary: #ffffff;                     /* texte posé sur --color-primary */
	--color-header-bg: rgba(253, 253, 251, 0.8);     /* en-tête translucide */
	--color-glass-bg: rgba(253, 253, 251, 0.85);     /* pastilles réseaux sociaux */
	--color-soft-border: rgba(225, 226, 229, 0.6);
	--color-outline: rgba(26, 27, 31, 0.8);          /* cadre filaire du bouton CONTACT */
	--color-marquee: rgba(26, 27, 31, 0.3);          /* texte du bandeau défilant */
	--color-overlay: rgba(26, 27, 31, 0.5);          /* voile derrière la photo projet */

	/* Indique au navigateur que le site gère les deux thèmes : barres de
	   défilement, champs, cases à cocher et menus natifs suivent le système. */
	color-scheme: light dark;

	/* Typographie */
	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-mono: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

	--heading-weight: 300;
	--heading-letter-spacing: -0.02em;

	/* Échelle typographique fluide */
	--fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	--fs-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
	--fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
	--fs-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
	--fs-h3: clamp(1.35rem, 1.15rem + 1.2vw, 1.875rem);
	--fs-h4: clamp(1.0625rem, 1rem + 0.5vw, 1.35rem);

	/* Espacements */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2.5rem;
	--spacing-xl: 4rem;

	/* Respiration verticale UNIQUE de toutes les sections (haut = bas).
	   Fluide : 3.5rem sur mobile -> 6rem sur grand écran, sans palier. */
	--section-space: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	/* Mise en page */
	--container-width: 1400px;
	--container-padding: 1.25rem;
	--header-height: 4rem; /* h-16 de la maquette ; passe à 5rem (h-20) dès 48em */
	/* Hauteur d'affichage du logo. C'est CETTE valeur qui pilote la taille
	   de l'image, jamais ses dimensions natives : un logo téléversé en
	   1200px de large ne doit pas pouvoir faire exploser la barre. */
	--logo-height: 2.25rem;
	--radius: 0.625rem;
	--transition: 0.2s ease-in-out;
	--transition-smooth: 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*--------------------------------------------------------------
# Mode sombre (suit le réglage du système : clair / sombre)
--------------------------------------------------------------
Aucun bouton : le navigateur transmet la préférence de l'appareil
et seules les variables ci-dessus changent de valeur. Le hero reste
inchangé (--color-hero-text), car il se pose sur une photo claire.
--------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
	:root {
		--color-primary: #f2f1ee;
		--color-primary-dark: #ffffff;
		--color-secondary: #a0a2a8;
		--color-text: #ecebe8;
		--color-text-light: #a0a2a8;
		--color-heading: #f5f4f1;
		--color-background: #121315;
		--color-background-alt: #1b1c1f;
		--color-border: #2e3035;
		--color-dark-surface: #2a2b30;
		--color-link-visited: #b9bbc0;
		--color-success: #66bb6a;
		--color-error: #ef5350;

		--color-on-primary: #121315;
		--color-header-bg: rgba(18, 19, 21, 0.8);
		--color-glass-bg: rgba(18, 19, 21, 0.85);
		--color-soft-border: rgba(46, 48, 53, 0.6);
		--color-outline: rgba(236, 235, 232, 0.8);
		--color-marquee: rgba(236, 235, 232, 0.3);
		--color-overlay: rgba(0, 0, 0, 0.6);
	}

	/* Photos légèrement atténuées pour ne pas éblouir sur fond sombre.
	   Le hero en est exclu : son texte sombre a besoin de l'image claire. */
	img:not(.hero img) {
		filter: brightness(0.9);
	}

	/* Logo (en-tête et pied de page) : rendu tout blanc sur fond sombre.
	   Le double sélecteur est voulu : il passe devant la règle img ci-dessus.
	   À retirer si un vrai logo clair est téléversé à la place. */
	.site-branding .custom-logo,
	.footer-logo .footer-logo-img {
		filter: brightness(0) invert(1);
	}
}

/*--------------------------------------------------------------
# Reset / Normalisation de base
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* CORRECTIF : overflow-x:hidden sur html crée un conteneur de
	   défilement qui casse position:sticky du header. `clip` bloque
	   le débordement horizontal sans créer ce conteneur. */
	overflow-x: clip;
	/* Les ancres (#atelier, #projets…) ne passent plus sous le header.
	   C'est LE SEUL endroit qui gère ce décalage (voir scroll-margin plus bas). */
	scroll-padding-top: calc(var(--header-height) + 1px);
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

main {
	display: block;
}

hr {
	box-sizing: content-box;
	height: 1px;
	overflow: visible;
	background-color: var(--color-border);
	border: 0;
	margin-bottom: var(--spacing-md);
}

img,
picture,
video,
canvas,
svg {
	border-style: none;
	display: block;
	max-width: 100%;
	height: auto;
}

/* Cibles d'ancrage : le décalage sous le header est déjà fourni par
   `scroll-padding-top` sur <html>. Ajouter un scroll-margin ici le
   cumulerait avec lui et créerait un grand vide au-dessus de la section. */
[id] {
	scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*--------------------------------------------------------------
# Typographie
--------------------------------------------------------------*/
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--heading-weight);
	letter-spacing: var(--heading-letter-spacing);
	line-height: 1.15;
	margin: 0 0 var(--spacing-sm);
	/* Évite les mots coupés hors écran sur les longs titres mobiles */
	overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }
h5 { font-size: 1rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
h6 { font-size: 0.9rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

p {
	margin: 0 0 var(--spacing-md);
	overflow-wrap: break-word;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 0 var(--spacing-md) var(--spacing-sm);
	padding-left: var(--spacing-sm);
	border-left: 3px solid var(--color-border);
	color: var(--color-text-light);
}

address {
	margin: 0 0 var(--spacing-md);
}

pre {
	background: var(--color-background-alt);
	font-family: var(--font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: var(--spacing-sm);
	border-radius: var(--radius);
}

code,
kbd,
tt,
var {
	font-family: var(--font-mono);
}

abbr,
acronym {
	border-bottom: 1px dotted var(--color-text-light);
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

small {
	font-size: var(--fs-sm);
}

/*--------------------------------------------------------------
# Éléments HTML de base
--------------------------------------------------------------*/
ul,
ol {
	margin: 0 0 var(--spacing-md) var(--spacing-md);
	padding: 0;
}

ul { list-style: disc; }
ol { list-style: decimal; }

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: var(--spacing-sm);
}

dt { font-weight: 700; }
dd { margin: 0 0 var(--spacing-sm) var(--spacing-sm); }

embed,
iframe,
object {
	max-width: 100%;
}

figure {
	margin: var(--spacing-sm) 0;
}

table {
	margin: 0 0 var(--spacing-md);
	width: 100%;
	border-collapse: collapse;
}

table td,
table th {
	padding: 0.5em 0.75em;
	border: 1px solid var(--color-border);
	text-align: left;
}

table th {
	background: var(--color-background-alt);
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--transition);
}

a:visited {
	color: var(--color-link-visited);
}

a:hover,
a:active {
	color: var(--color-link-hover);
}

/* CORRECTIF : :focus-visible plutôt que :focus, pour ne pas afficher
   le contour lors d'un simple clic souris. Le fallback :focus reste
   pour les navigateurs sans :focus-visible. */
a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

a:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# Formulaires
--------------------------------------------------------------*/
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	background: var(--color-primary);
	color: var(--color-on-primary);
	line-height: 1;
	padding: 0.7em 1.4em;
	font-weight: 500;
	transition: background var(--transition), border-color var(--transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	color: var(--color-text);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.6em 0.8em;
	width: 100%;
	max-width: 100%;
	/* CORRECTIF iOS : sous 16px, Safari zoome automatiquement au focus */
	font-size: max(1rem, var(--fs-base));
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
}

textarea {
	width: 100%;
	min-height: 8rem;
}

/*--------------------------------------------------------------
# Mise en page
--------------------------------------------------------------*/
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.site-content {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--spacing-lg) var(--container-padding);
	width: 100%;
	flex: 1 0 auto;
}

/* La home est en pleine largeur : si <main class="front-page"> est
   enveloppé dans .site-content (max-width + padding), on neutralise
   le conteneur pour laisser le hero et les sections respirer. */
.site-content:has(> .front-page) {
	max-width: none;
	padding: 0;
}

.site-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: var(--fs-h3);
	margin: 0;
}

.site-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.site-description {
	color: var(--color-text-light);
	margin: 0.25em 0 0;
	font-size: var(--fs-sm);
}

/*--------------------------------------------------------------
# En-tête du site (header.php)
--------------------------------------------------------------*/
/* La barre reste en `sticky` (et non `fixed` comme sur la maquette) :
   elle occupe ainsi sa place dans le flux, ce dont dépend le calcul
   `min-height: calc(100svh - var(--header-height))` du hero. Le rendu
   visuel est identique, sans avoir à compenser par un padding-top. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--color-header-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-soft-border);
}

/* Repli si backdrop-filter n'est pas supporté : fond opaque */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	.site-header {
		background: var(--color-background);
	}
}

/* Hauteur fixe plutôt qu'un padding vertical : la barre garde la même
   hauteur quel que soit le contenu, et --header-height reste exact. */
.site-header-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	height: var(--header-height);
	padding: 0 var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap; /* le logo ne doit jamais renvoyer le menu à la ligne */
	gap: var(--spacing-sm);
}

.site-logo {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 1.5rem;   /* text-2xl */
	line-height: 1.3333; /* rapport text-2xl de la maquette */
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	text-decoration: none;
}

/* Le « m² » du logo : plus petit et remonté (align-super + text-sm) */
.site-logo-sup {
	vertical-align: super;
	font-size: 0.875rem;
	line-height: 1.4286;
}

.site-logo:visited {
	color: var(--color-heading);
}

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-width: 0;
	/* Le logo ne dépasse jamais la barre, quelle que soit l'image
	   téléversée dans Personnaliser > Identité du site. */
	max-height: 100%;
}

/* Logo téléversé depuis WordPress (the_custom_logo)
--------------------------------------------------------------
WordPress sort un <img class="custom-logo"> aux dimensions natives
du fichier. Sans les règles ci-dessous, une image de 1200x768
s'affiche à sa taille réelle et déborde de la barre : c'est ce qui
décalait tout l'en-tête.

`height` est fixé et `width` calculé automatiquement : le rapport
d'aspect est préservé sans avoir à connaître les dimensions du
fichier. `max-width` évite qu'un logo très panoramique ne pousse
le menu hors de l'écran sur mobile.
-------------------------------------------------------------- */
.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0; /* supprime l'espace fantôme sous l'image */
	text-decoration: none;
}

.site-branding .custom-logo {
	display: block;
	height: var(--logo-height);
	width: auto;
	max-width: 60vw;
	object-fit: contain;
}

/* Cadre filaire qui se remplit au survol (bg-foreground / text-background).
   La transition dure 0.5s — volontairement lente, c'est le duration-500
   de la maquette. */
.btn-header-cta {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid var(--color-outline);
	border-radius: 0;
	color: var(--color-text);
	font-size: 0.75rem; /* 12px */
	line-height: 1.3333;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-header-cta:visited {
	color: var(--color-text);
}

.btn-header-cta:hover,
.btn-header-cta:focus-visible {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-background);
}

/*--------------------------------------------------------------
# Section contact (footer.php)
--------------------------------------------------------------*/
.site-contact {
	background: var(--color-background-alt);
	padding: var(--section-space) var(--container-padding);
}

.contact-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	text-align: left;
}

.section-eyebrow {
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-xs);
}

.section-title {
	margin-bottom: var(--spacing-sm);
}

.section-lead {
	max-width: 40em;
	margin: 0 auto var(--spacing-lg);
	color: var(--color-text-light);
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	align-items: center;
}

.contact-item {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

/* Lien "souligné animé" — motif réutilisé dans tout le thème */
.contact-item a,
.contact-coord-item a {
	position: relative;
	display: inline-block;
	color: var(--color-heading);
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: var(--fs-h4);
	overflow-wrap: anywhere; /* les e-mails longs ne débordent plus */
}

.contact-item a:visited,
.contact-coord-item a:visited {
	color: var(--color-heading);
}

.contact-item a::after,
.contact-coord-item a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.contact-item a:hover,
.contact-item a:focus,
.contact-coord-item a:hover,
.contact-coord-item a:focus {
	color: var(--color-primary);
}

.contact-item a:hover::after,
.contact-item a:focus::after,
.contact-coord-item a:hover::after,
.contact-coord-item a:focus::after {
	transform: scaleX(1);
	transform-origin: 0;
}

.contact-label {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-light);
}

/*--------------------------------------------------------------
# Pied de page (footer.php)
--------------------------------------------------------------
Les règles du pied de page sont regroupées en fin de feuille,
section « # Pied de page — bandeau horizontal ».
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Composants
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Menu principal : masqué par défaut (mobile). Sur mobile, le menu est
   affiché dans le panneau plein écran créé par agm2-menu.js. */
.main-navigation ul#primary-menu {
	display: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation#site-navigation a {
	position: relative;
	display: inline-block;
	padding: 0.4em 0;
	color: var(--color-text);
	font-size: 0.8125rem; /* 13px */
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-decoration: none;
}

.main-navigation#site-navigation a:visited {
	color: var(--color-text);
}

.main-navigation#site-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	/* -0.18em : sans ça le filet dépasse à droite, la chasse ajoutée
	   par letter-spacing étant comptée après la dernière lettre. */
	margin-right: -0.18em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

/* Le filet n'apparaît qu'au survol (ou au focus CLAVIER), comme le
   soulignement de .hero-cta : il se dessine de gauche à droite puis
   repart par la droite. Deux causes de filet « figé » ont été retirées :
   - :focus, qui restait actif après un clic sur un lien d'ancre ;
   - .current-menu-item, qui soulignait en permanence l'entrée active. */
.main-navigation#site-navigation a:hover::after,
.main-navigation#site-navigation a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

/* Lien de la section actuellement affichée (classe posée par le script
   de suivi de défilement de front-page.php) : le filet reste tracé. */
.main-navigation#site-navigation a.is-active::after {
	transform: scaleX(1);
	transform-origin: 0;
}

/* Sous-menus (desktop uniquement, voir media query ≥48em) */
.main-navigation ul ul {
	display: none;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(26, 27, 31, 0.08);
	padding: var(--spacing-xs) 0;
}

.main-navigation ul ul a {
	display: block;
	min-width: 200px;
	padding: 0.5em 1em;
}

/* Bouton hamburger */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 0.55em 1em;
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	min-height: 44px; /* cible tactile confortable */
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: var(--color-background-alt);
	border-color: var(--color-secondary);
	color: var(--color-text);
}

/* Navigations d'articles
--------------------------------------------- */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 var(--spacing-md);
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 1 45%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	flex: 1 1 45%;
	text-align: end;
}

/* Articles et pages
--------------------------------------------- */
.sticky { display: block; }

.post,
.page {
	margin: 0 0 var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
}

.updated:not(.published) { display: none; }

.page-content,
.entry-content,
.entry-summary {
	margin: var(--spacing-md) 0 0;
}

.entry-title { margin-bottom: 0.3em; }

.entry-meta {
	color: var(--color-text-light);
	font-size: var(--fs-sm);
}

.page-links {
	clear: both;
	margin: 0 0 var(--spacing-md);
}

/* Commentaires
--------------------------------------------- */
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--color-background-alt);
	border-radius: var(--radius);
}

.widget select { max-width: 100%; }

.widget-title {
	font-size: var(--fs-h4);
	margin-bottom: var(--spacing-sm);
}

/*--------------------------------------------------------------
# Médias
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin: 0;
	padding: 0;
	display: inline;
}

.custom-logo-link {
	display: inline-block;
}

.wp-caption {
	margin-bottom: var(--spacing-md);
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8em 0;
	font-size: var(--fs-sm);
	color: var(--color-text-light);
}

.wp-caption-text { text-align: center; }

.gallery {
	margin-bottom: var(--spacing-md);
	display: grid;
	gap: var(--spacing-sm);
	grid-template-columns: repeat(2, 1fr);
}

.gallery-item {
	text-align: center;
	width: 100%;
}

.gallery-caption { display: block; }

/* Jetpack infinite scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }

/*--------------------------------------------------------------
# Homepage — Hero
--------------------------------------------------------------
Structure attendue (front-page.php) :

  .hero
    .hero-media                  image plein cadre + voile dégradé
    .hero-content                colonne alignée en bas
      .hero-eyebrow .reveal      surtitre
      .hero-title .rise          titre, mots animés un par un
      .hero-footer .reveal       chapeau + CTA (en ligne dès 48em)
    .hero-marquee                bandeau défilant, EN FLUX

Le bandeau est le dernier enfant en flux du hero (flex column,
justify-content:flex-end) : il ne peut donc plus recouvrir la
section « 01 — L'Atelier » comme le faisait l'ancien position:absolute.

Les ajustements responsive du hero sont regroupés ICI (et non dans
les blocs Media Queries en fin de feuille) : une seule source de
vérité pour les tailles de titre et le placement du CTA.
--------------------------------------------------------------*/
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 100svh : évite le saut lié à la barre d'URL mobile.
	   On retranche le header, qui est en flux au-dessus du hero. */
	min-height: calc(100vh - var(--header-height));
	min-height: calc(100svh - var(--header-height));
	overflow: hidden;
	color: var(--color-hero-text);
	isolation: isolate;
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.06);
	animation: hero-zoom 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes hero-zoom {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ----- Conteneur du texte ----- */
.hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--container-width);
	margin: auto; /* pousse le bloc en bas du hero */
	padding: var(--spacing-xl) var(--container-padding) var(--spacing-lg);
}

/* ----- Surtitre ----- */
.hero-eyebrow {
	font-size: 0.6875rem; /* 11px */
	text-transform: uppercase;
	letter-spacing: 0.35em;
	color: var(--color-hero-text-muted);
	margin: 0 0 var(--spacing-md);
}

/* ----- Titre -----
   Taille en paliers (3rem / 6rem / 8rem), comme la maquette de
   référence. Pour un titre plus compact sur grand écran, remplacer
   les trois déclarations par une seule :
     font-size: clamp(2.5rem, 1rem + 6vw, 5rem);
   -------------------------------------------------------------- */
.hero-title {
	font-family: var(--font-heading);
	font-weight: var(--heading-weight);
	letter-spacing: var(--heading-letter-spacing);
	font-size: 3rem;
	line-height: 0.95;
	max-width: 64rem;
	margin: 0;
	color: var(--color-hero-text);
	text-wrap: balance;
}

.hero-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--color-hero-text);
}

/* ----- Chapeau + CTA -----
   Empilés en mobile, sur une même ligne (texte à gauche, lien à
   droite) dès 48em : le CTA n'a plus besoin d'être en absolu. */
.hero-footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}

.hero-lead {
	max-width: 34em;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
	line-height: 1.625;
	color: var(--color-hero-text-muted);
	margin: 0;
}

.hero-cta {
	position: relative;
	display: inline-block;
	align-self: flex-start;
	color: var(--color-hero-text);
	text-decoration: none;
	font-size: 0.75rem; /* 12px */
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.hero-cta:visited,
.hero-cta:hover,
.hero-cta:focus {
	color: var(--color-hero-text);
}

/* Soulignement balayé : disparaît par la droite, réapparaît par la gauche */
.hero-cta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.hero-cta:hover::after,
.hero-cta:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

/* ----- Bandeau défilant : en flux, au bas du hero -----
   Mise en forme reprise de la maquette : fond CLAIR, filets haut et
   bas, grand serif à 30 % d'opacité. Équivalences des utilitaires
   Tailwind d'origine :
     py-6              → padding-block: 1.5rem
     border-y          → 1px sur les deux bords
     border-border/60  → bordure à 60 % d'opacité
     bg-background     → fond de page

   Le comportement d'apparition (masqué à l'arrivée, révélé au premier
   défilement par la classe .in) est conservé : on joue sur opacity +
   translateY, jamais sur display ni height, pour que le hero ne se
   réorganise pas au moment de l'apparition. */
.hero-marquee {
	/* STICKY : le bandeau est placé APRÈS le hero (frère, pas enfant).
	   Il suit le défilement tant qu'il est sous le header, puis reste
	   collé juste en dessous, sur toute la hauteur de la page d'accueil.
	   Au chargement, il est sous la ligne de flottaison : on ne voit
	   que le hero. */
	position: sticky;
	top: calc(var(--header-height) + 1px); /* + filet bas du header */
	z-index: 998; /* sous le header (999), au-dessus du contenu */
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--marquee-height); /* hauteur exacte, pilotée par la variable */
	overflow: hidden;
	border-block: 4px solid var(--color-soft-border);
	background: var(--color-background);
	/* Plus d'état masqué/révélé : il est hors écran au chargement. */
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.hero-marquee-track {
	flex-shrink: 0;
}

/* Sans JavaScript, le bandeau reste visible : mieux vaut l'afficher
   d'emblée que de le perdre définitivement. */
@media (scripting: none) {
	.hero-marquee {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Équivalences : font-display → Cormorant 300 à -0.02em,
   text-4xl → 2.25rem, md:text-6xl → 3.75rem,
   text-foreground/30 → encre à 30 % d'opacité. */
.hero-marquee-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	font-family: var(--font-heading);
	font-weight: 300;
	letter-spacing: -0.02em;
	font-size: 2.25rem;
	line-height: 1.1111;
	color: var(--color-marquee);
	animation: marquee 45s linear infinite;
}

/* Les deux groupes sont identiques : l'animation décale de -50 %,
   soit exactement la largeur de l'un d'eux, d'où la boucle sans
   raccord visible.

   L'espacement de fin (padding-right) est porté par le GROUPE, pas
   par un `gap` sur la piste. Avec un gap sur la piste, -50 % ne
   tomberait qu'à la moitié de cet écart et la boucle sauterait de
   2rem à chaque cycle — c'est le défaut de la maquette d'origine. */
.hero-marquee-group {
	display: flex;
	flex-shrink: 0;
	gap: 4rem;          /* gap-16 */
	padding-right: 4rem;
}

@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ----- Animation des mots du titre -----
   Les délais sont portés par un style inline sur chaque <span>
   dans front-page.php (0, 150, 250, 350, 450, 550 ms). */
@keyframes rise {
	from { opacity: 0; transform: translateY(40%); }
	to   { opacity: 1; transform: none; }
}

.rise > * {
	display: inline-block;
	opacity: 0;
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

/* Sans JavaScript, les mots s'animent quand même : l'animation CSS
   se déclenche au chargement, aucune classe n'est nécessaire. */
@media (prefers-reduced-motion: reduce) {
	.hero-media img,
	.hero-marquee-track,
	.rise > * {
		animation: none;
	}

	/* Apparition sans glissement : le bandeau se contente d'un fondu */
	.hero-marquee {
		transform: none;
		transition: opacity 0.4s linear;
	}

	.hero-media img {
		transform: none;
	}

	.rise > * {
		opacity: 1;
	}
}

/* ----- Hero : tablette (48em / 768px) ----- */
@media screen and (min-width: 48em) {
	.hero-title {
		font-size: 6rem;
	}

	.hero-marquee-track {
		font-size: 3.75rem; /* md:text-6xl */
		line-height: 1;
	}

	.hero-footer {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--spacing-lg);
		margin-top: calc(var(--spacing-lg) + 1rem);
	}

	.hero-cta {
		align-self: auto;
		flex-shrink: 0;
	}
}

/* ----- Hero : desktop (64em / 1024px) ----- */
@media screen and (min-width: 64em) {
	.hero-title {
		font-size: 8rem;
	}
}

/* ----- Hero : mobile en paysage (hauteur réduite) ----- */
@media screen and (max-height: 30em) and (orientation: landscape) {
	.hero {
		min-height: 34rem;
	}

	.hero-content {
		padding-top: var(--spacing-lg);
		padding-bottom: var(--spacing-md);
	}

	.hero-title {
		font-size: 2.5rem;
	}
}

/*--------------------------------------------------------------
# Homepage — Sections génériques
--------------------------------------------------------------*/
.section {
	padding: var(--section-space) 0;
}

.section-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.section-text {
	color: var(--color-text-light);
}

/* Les titres de section tiennent sur une seule ligne dès qu'il y a la
   place : la limite de 20 caractères qui les bridait a été retirée.
   `text-wrap: balance` reste utile en dessous de 768px, où le repli
   sur plusieurs lignes est inévitable — il répartit alors les lignes
   au lieu de laisser un mot isolé en bas. */
.section-title {
	text-wrap: balance;
}

/* Atelier et Projets partagent la même en-tête : numéro de section
   à gauche, titre et chapeau à droite, séparés par un filet. Les
   sélecteurs sont mutualisés pour que les deux ne puissent pas
   diverger au fil des retouches. */
.section-atelier .section-text,
.section-projets .section-text,
.section-fondateurs .section-text,
.section-contact-home .section-text {
	max-width: 42em;
}

.section-atelier .section-eyebrow,
.section-projets .section-eyebrow,
.section-fondateurs .section-eyebrow,
.section-contact-home .section-eyebrow {
	position: relative;
	margin-bottom: var(--spacing-sm);
}

.section-atelier .section-eyebrow::after,
.section-projets .section-eyebrow::after,
.section-fondateurs .section-eyebrow::after,
.section-contact-home .section-eyebrow::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin-top: 0.75rem;
	background: var(--color-border);
}

.section-header-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.section-link {
	position: relative;
	display: inline-block;
	color: var(--color-primary);
	font-size: var(--fs-sm);
	text-decoration: none;
	white-space: nowrap;
}

.section-link:visited {
	color: var(--color-primary);
}

.section-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.section-link:hover,
.section-link:focus {
	color: var(--color-primary-dark);
}

.section-link:hover::after,
.section-link:focus::after {
	transform: scaleX(1);
	transform-origin: 0;
}

/*--------------------------------------------------------------
# Homepage — Projets (grille de catégories)
--------------------------------------------------------------
CORRECTIF : l'échelle des images était incohérente — état de repos
scale(1.18), état « révélé » scale(1.18), survol scale(1.06). Le
survol produisait donc un DÉ-zoom, et l'image restait recadrée en
permanence. Nouvelle logique, lisible et progressive :
   repos / révélé : scale(1)  →  survol : scale(1.06)
   entrée au scroll : de scale(1.12) vers scale(1)
--------------------------------------------------------------*/
.categories-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

/* Cadre, coin arrondi et ombre portée ont été retirés : c'étaient les
   seuls éléments du site à en porter, et ils alourdissaient une page
   par ailleurs entièrement filaire. La carte se réduit à une image et
   un texte, séparés par un filet — traitement éditorial, cohérent avec
   le reste de la charte. */
.categorie-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-heading);
	background: none;
	border: none;
	border-radius: 0;
}

/* CORRECTIF de spécificité : `a:visited` (0,1,1) l'emportait sur
   `.categorie-card` (0,1,0) — les cartes visitées viraient au gris. */
.categorie-card:visited {
	color: var(--color-heading);
}

.categorie-card:hover,
.categorie-card:focus-visible {
	color: var(--color-heading);
}

.categorie-card:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 6px;
}

/* Cadrage paysage 3/2. Le portrait 4/5 donnait des visuels d'environ
   500px de haut sur une grille de trois colonnes — la section occupait
   alors deux écrans. Pour des images un peu plus hautes sans revenir au
   portrait : 4 / 3. */
.categorie-media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-background-alt);
}

.categorie-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Entrée au scroll : l'image démarre légèrement zoomée puis se pose */
.categorie-card.reveal .categorie-media img {
	transform: scale(1.12);
}

.categorie-card.reveal.in .categorie-media img {
	transform: scale(1);
}

/* Survol : zoom discret, prioritaire sur l'état révélé */
.categorie-card:hover .categorie-media img,
.categorie-card:focus-visible .categorie-media img,
.categorie-card.reveal.in:hover .categorie-media img,
.categorie-card.reveal.in:focus-visible .categorie-media img {
	transform: scale(1.06);
}

.categorie-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	padding: var(--spacing-sm) 0 0;
	border-top: 1px solid var(--color-border);
	margin-top: var(--spacing-sm);
	flex: 1 1 auto; /* hauteurs de cartes homogènes */
	transition: border-color var(--transition);
}

.categorie-card:hover .categorie-content,
.categorie-card:focus-visible .categorie-content {
	border-color: var(--color-text);
}

.categorie-title {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: 1.15;
	letter-spacing: var(--heading-letter-spacing);
	margin: 0;
}

.categorie-text {
	color: var(--color-text-light);
	font-size: var(--fs-sm);
	margin: 0;
	flex: 1 1 auto;
}

.categorie-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.5em;
	padding-bottom: 0.2em;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em; /* même chasse que les boutons de l'en-tête */
	color: var(--color-primary);
}

.categorie-btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.categorie-btn span {
	display: inline-block;
	transition: transform var(--transition);
}

.categorie-card:hover .categorie-btn::after,
.categorie-card:focus-visible .categorie-btn::after {
	transform: scaleX(1);
	transform-origin: 0;
}

.categorie-card:hover .categorie-btn span,
.categorie-card:focus-visible .categorie-btn span {
	transform: translateX(4px);
}

/*--------------------------------------------------------------
# Homepage — Manifeste
--------------------------------------------------------------*/
.section-manifesto {
	background: var(--color-dark-surface);
	color: var(--color-on-dark);
	text-align: center;
}

.manifesto-quote {
	max-width: 42em;
	margin: 0 auto var(--spacing-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--heading-weight);
	font-style: normal;
	line-height: 1.4;
	border: none;
	padding: 0;
	color: var(--color-on-dark);
	text-wrap: pretty;
}

.manifesto-quote em {
	color: var(--color-on-dark);
	font-style: italic;
}

.manifesto-source {
	display: block;
	font-style: normal;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-sm);
}

/*--------------------------------------------------------------
# Homepage — Fondateurs
--------------------------------------------------------------*/
/* Fiches fondateurs — traitement épuré.
   Aucun cadre ni aplat : un simple filet en tête de fiche, comme les
   cartes de la section Projets. La hiérarchie repose entièrement sur
   la typographie et sur les blancs. */
.fondateurs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-md);
}

.fondateur-item {
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
}

/* Le diplôme sert d'intitulé : petite capitale très espacée, même
   registre que les surtitres de section. */
.fondateur-diplome {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	line-height: 1.6;
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-xs);
}

.fondateur-nom {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: 1.15;
	letter-spacing: var(--heading-letter-spacing);
	margin: 0 0 var(--spacing-sm);
}

/* Interlignage un peu plus ouvert que le corps courant, sans excès :
   sur un paragraphe court, 1,8 délitait le bloc. */
.fondateur-bio {
	color: var(--color-text-light);
	max-width: 34em;
	line-height: 1.7;
	margin-bottom: var(--spacing-sm);
}

.fondateur-bio:last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Page — En construction
--------------------------------------------------------------*/
.section-construction {
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.section-construction .section-title {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Page — Contact
--------------------------------------------------------------*/
.section-contact-hero {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-sm);
}

.section-contact-hero .section-title {
	font-size: var(--fs-h2);
}

.section-contact-hero .section-eyebrow {
	margin-bottom: var(--spacing-xs);
}

.section-contact-hero .section-lead {
	margin: 0;
	max-width: 40em;
}

.section-contact-main {
	padding-top: var(--spacing-md);
	padding-bottom: calc(var(--spacing-xl) * 1.2);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.contact-col-eyebrow {
	position: relative;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-md);
	padding-bottom: var(--spacing-sm);
}

.contact-col-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background: var(--color-text);
}

/* ---------- Colonne gauche : localisation ---------- */
.contact-map-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.contact-map-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	filter: grayscale(0.85) contrast(1.02);
	transition: filter var(--transition-smooth);
}

.contact-map-wrapper:hover,
.contact-map-wrapper:focus-within {
	filter: grayscale(0) contrast(1.02);
}

.contact-map-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.contact-address {
	margin: var(--spacing-md) 0 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: var(--fs-h4);
	line-height: 1.4;
}

.contact-coords {
	margin-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.contact-coord-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
}

.contact-coord-item .contact-label {
	flex: 0 0 auto;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
}

/* ---------- Colonne droite : prise de rendez-vous ---------- */
.contact-form-col {
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	min-width: 0;
}

.contact-form-title {
	margin-bottom: var(--spacing-sm);
}

.contact-form-lead {
	color: var(--color-text-light);
	max-width: 32em;
	margin-bottom: var(--spacing-lg);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	min-width: 0;
}

.form-group label {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
}

.form-group input,
.form-group select {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	padding: 0.5em 0;
	transition: border-color var(--transition);
}

.form-group select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--color-text-light) 50%),
		linear-gradient(135deg, var(--color-text-light) 50%, transparent 50%);
	background-position: right 0.4em top 1em, right 0.75em top 1em;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 1.5em;
}

.form-group textarea {
	background: transparent;
	border: none;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	padding: 0.8em 0;
	resize: vertical;
	transition: border-color var(--transition);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
	border-color: var(--color-secondary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--color-primary);
	box-shadow: none;
}

.form-group-full { width: 100%; }

.contact-form-footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.contact-form-note {
	margin: 0;
	color: var(--color-text-light);
	font-size: var(--fs-sm);
	max-width: 34em;
}

.btn-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.85em 2em;
	min-height: 48px;
	border-radius: 2px;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: transform var(--transition), background var(--transition), letter-spacing var(--transition);
}

.btn-submit:hover {
	transform: translateY(-2px);
	letter-spacing: 0.12em;
}

/*--------------------------------------------------------------
# Utilitaires
--------------------------------------------------------------*/

/* Accessibilité
--------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-background-alt);
	border-radius: var(--radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4);
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignements
--------------------------------------------- */
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-md);
}

/* Animations au scroll
--------------------------------------------------------------
.in est ajoutée par l'IntersectionObserver inline de front-page.php.
Fallback : si le JS est désactivé, on force l'affichage.
--------------------------------------------------------------*/
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in {
	opacity: 1;
	transform: none;
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@media (scripting: none) {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# Media Queries — Mobile (max-width)
--------------------------------------------------------------
La feuille est écrite en mobile-first : les blocs ci-dessous ne
contiennent que les ajustements propres aux petits écrans, ceux
qui ne peuvent pas s'exprimer en min-width.
--------------------------------------------------------------*/

/* ----- Jusqu'à 767px : mise en page de l'en-tête mobile ----- */
@media screen and (max-width: 47.9375em) {

	/* Barre mobile : logo à gauche, bouton MENU à droite, sur une seule
	   ligne. L'ancien montage sur deux lignes (nav en flex 1 1 100%)
	   est supprimé : il est remplacé par le menu plein écran (v4). */
	.site-branding { order: 0; }

	.main-navigation#site-navigation {
		order: 1;
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* Hero : le bloc texte respire un peu moins en haut */
	.hero-content {
		padding-top: var(--spacing-lg);
	}

	.categories-grid {
		margin-top: var(--spacing-md);
	}

	/* Colonne unique : la carte fait toute la largeur de l'écran.
	   Un cadrage plus large évite qu'une seule image occupe la
	   moitié de la hauteur visible. */
	.categorie-media {
		aspect-ratio: 16 / 10;
	}

	/* Contact : la carte Google Maps devient un peu plus haute
	   pour rester lisible sur un écran étroit */
	.contact-map-wrapper {
		aspect-ratio: 1 / 1;
	}

	.btn-submit {
		align-self: stretch;
		width: 100%;
	}

	/* Footer : centrage des coordonnées (téléphone, e-mail) et des
	   icônes de réseaux.
	   Le préfixe .site-footer est indispensable : les règles de base de
	   .footer-list sont déclarées plus bas dans la feuille, et seule une
	   spécificité supérieure permet de passer devant.
	   - .footer-list est en colonne : align-items centre horizontalement.
	   - .footer-social est en ligne : justify-content centre les icônes. */
	.site-footer .footer-list {
		align-items: center;
	}

	.site-footer .footer-social {
		justify-content: center;
	}
}

/* ----- Petits mobiles (jusqu'à 480px) ----- */
@media screen and (max-width: 30em) {

	:root {
		--container-padding: 1rem;
		--spacing-xl: 3rem;
		--spacing-lg: 2rem;
		--logo-height: 2rem;
	}

	.site-logo {
		font-size: 1.25rem;
	}

	/* Manifeste : citation plus compacte et alignée à gauche,
	   plus confortable à lire sur une colonne étroite */
	.section-manifesto {
		text-align: left;
	}

	.manifesto-quote {
		font-size: var(--fs-h4);
		line-height: 1.5;
	}

	.gallery {
		grid-template-columns: 1fr;
	}
}

/* ----- Coordonnées empilées sur écrans très étroits ----- */
@media screen and (max-width: 26em) {
	.contact-coord-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3em;
	}
}

/*--------------------------------------------------------------
# Media Queries — Tablette et desktop (min-width)
--------------------------------------------------------------*/

/* ----- 600px et plus ----- */
@media screen and (min-width: 37.5em) {

	.contact-details {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--spacing-xl);
	}

	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
	.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
	.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
	.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ----- 768px et plus : navigation complète, fin du hamburger ----- */
@media screen and (min-width: 48em) {

	:root {
		--container-padding: 2rem;
		--header-height: 5rem;
		--logo-height: 2.75rem;
	}

	.menu-toggle {
		display: none;
	}

	.site-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		flex-wrap: nowrap;
	}

	.site-branding {
		grid-column: 1;
		justify-self: start;
	}

	.site-logo {
		font-size: 1.875rem; /* text-3xl */
		line-height: 1.2;
	}

	.main-navigation#site-navigation {
		grid-column: 2;
		justify-self: center;
		display: flex;
		justify-content: center;
	}

	.main-navigation ul#primary-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 2.5rem;
		width: auto;
		padding: 0;
		border-top: none;
		margin-top: 0;
	}

	/* Sous-menus flottants au survol / focus clavier */
	.main-navigation ul ul {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99999;
		min-width: 200px;
	}

	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul {
		display: block;
	}

	.btn-header-cta {
		grid-column: 3;
		justify-self: end;
	}

	/* Hero : le CTA est désormais dans .hero-footer (voir section Hero) */
	.hero-content {
		padding-bottom: calc(var(--spacing-lg) + 1.5rem);
	}

	/* Atelier et Projets : numéro en colonne latérale */
	.section-atelier .section-inner,
	.section-projets .section-inner,
	.section-fondateurs .section-inner,
	.section-contact-home .section-inner {
		display: grid;
		grid-template-columns: minmax(160px, 220px) 1fr;
		column-gap: var(--spacing-lg);
		align-items: start;
	}

	.section-atelier .section-eyebrow,
	.section-projets .section-eyebrow,
	.section-fondateurs .section-eyebrow,
	.section-contact-home .section-eyebrow {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.section-atelier .section-eyebrow::after,
	.section-projets .section-eyebrow::after,
	.section-fondateurs .section-eyebrow::after,
	.section-contact-home .section-eyebrow::after {
		width: 1px;
		height: 3rem;
	}

	.section-atelier .section-title,
	.section-projets .section-title,
	.section-fondateurs .section-title,
	.section-contact-home .section-title {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.section-atelier .section-text,
	.section-projets .section-text,
	.section-fondateurs .section-text,
	.section-contact-home .section-text {
		grid-column: 2;
	}

	/* La grille de cartes, elle, reprend toute la largeur : la
	   contraindre à la colonne 2 amputerait les visuels d'un cinquième
	   de la page pour aligner un filet. */
	.section-projets .categories-grid,
	.section-fondateurs .fondateurs-grid,
	.section-contact-home .contact-blocks {
		grid-column: 1 / -1;
		margin-top: var(--spacing-lg);
	}

	.section-header-row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.fondateurs-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--spacing-xl);
		row-gap: var(--spacing-lg);
	}

	/* Page contact : deux colonnes séparées par un filet vertical */
	.contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		column-gap: clamp(3rem, 6vw, 6rem);
	}

	.contact-form-col {
		padding-top: 0;
		padding-left: var(--spacing-lg);
		border-top: none;
		border-left: 1px solid var(--color-border);
	}

	.form-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* ----- 896px et plus : grille projets sur 3 colonnes ----- */
@media screen and (min-width: 56em) {
	.categories-grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--spacing-lg);
		row-gap: calc(var(--spacing-xl) * 1.1);
	}
}

/* ----- 1024px et plus ----- */
@media screen and (min-width: 64em) {

	.site-content {
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
	}

	.hero-content {
		padding-bottom: calc(var(--spacing-xl) + 1rem);
	}

}

/* ----- 1440px et plus ----- */
@media screen and (min-width: 90em) {
	:root {
		--container-padding: 3rem;
		--logo-height: 3rem;
	}
}

/*--------------------------------------------------------------
# Impression
--------------------------------------------------------------*/
@media print {

	body {
		background: #fff;
		color: #000;
	}

	.site-header,
	.site-contact,
	.site-footer,
	.main-navigation,
	.hero-marquee,
	.widget {
		display: none;
	}

	.hero {
		min-height: 0;
		color: #000;
	}

	.hero-media {
		display: none;
	}

	.reveal,
	.rise > *,
	.hero-marquee {
		opacity: 1;
		transform: none;
		animation: none;
	}

	a {
		text-decoration: underline;
		color: #000;
	}
}

/*--------------------------------------------------------------
# Menu mobile AGm² — plein écran, fond clair (v4)
--------------------------------------------------------------
Le panneau est créé par agm2-menu.js directement dans <body>. Il
recouvre toute la page ; le bouton fermer prend la place exacte du
bouton MENU de l'en-tête. Les liens sont centrés, en grand.

Ce bloc remplace l'ancien fichier css/agm2-menu.css : ne plus le
charger (voir functions.php), sinon ses règles écraseraient celles-ci.

Les !important ne visent que la barre d'en-tête mobile : ils
garantissent que le menu d'origine reste masqué au profit du panneau.
--------------------------------------------------------------*/

/* ==============================================================
   1. Barre d'en-tête en mobile : logo à gauche, bouton CONTACT à droite
   Le menu (bouton MENU + liste de liens) est entièrement masqué :
   seul le bouton CONTACT reste dans la barre.
   ============================================================== */
@media screen and (max-width: 47.9375em) {

	.site-header-inner {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 1rem !important;
	}

	.site-branding {
		order: 0 !important;
		flex: 0 1 auto !important;
		min-width: 0;
	}

	/* Navigation masquée : ni bouton MENU, ni liste de liens */
	.main-navigation,
	.main-navigation#site-navigation {
		display: none !important;
	}

	/* Le bouton Contact reste dans la barre, à droite */
	.site-header .btn-header-cta {
		display: inline-block !important;
		order: 1;
		margin-left: auto;
	}
}

/* Au-dessus de 768px : le panneau n'existe pas */
@media screen and (min-width: 48em) {
	.agm2-menu {
		display: none !important;
	}
}

/* ==============================================================
   2. Le menu plein écran (enfant direct de <body>)
   Ouverture / fermeture en fondu. « visibility » est retardée à la
   fermeture pour que le fondu ait le temps de se jouer.
   ============================================================== */
.agm2-menu {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.4s;
}

.agm2-menu.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Plus de voile sombre : le panneau couvre tout l'écran */
.agm2-menu__backdrop {
	display: none;
}

.agm2-menu__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	min-width: 0;
	max-width: none;
	padding: calc(var(--header-height, 4rem) + env(safe-area-inset-top, 0px))
		var(--container-padding, 1.5rem)
		calc(1.75rem + env(safe-area-inset-bottom, 0px));
	background: var(--color-background, #fdfdfb);
	border: none;
	box-shadow: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: none;
	transition: none;
	text-align: center;
}

/* Bouton fermer : exactement à la place du bouton MENU de l'en-tête */
.agm2-menu__close {
	position: absolute;
	top: calc((var(--header-height, 4rem) - 44px) / 2 + env(safe-area-inset-top, 0px));
	right: var(--container-padding, 1rem);
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border, #e1e2e5);
	border-radius: var(--radius, 0.625rem);
	color: var(--color-text, #1a1b1f);
	cursor: pointer;
	transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.agm2-menu__close:hover,
.agm2-menu__close:focus-visible {
	background: var(--color-background-alt, #f5f4f1);
	border-color: var(--color-secondary, #6c6e73);
}

.agm2-menu__close::before,
.agm2-menu__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.05rem;
	height: 1px;
	margin: -0.5px 0 0 -0.525rem;
	background: currentColor;
}

.agm2-menu__close::before { transform: rotate(45deg); }
.agm2-menu__close::after  { transform: rotate(-45deg); }

/* ==============================================================
   3. Liens : grands, centrés, en police d'accroche
   ============================================================== */

/* Marges automatiques : la liste est centrée verticalement entre le
   haut de l'écran et le bouton Contact. */
.agm2-menu__nav {
	flex: 0 0 auto;
	width: 100%;
	margin: auto 0;
}

.agm2-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Apparition en cascade : chaque lien monte légèrement en fondu */
.agm2-menu__nav > ul > li {
	border: none;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.agm2-menu.is-open .agm2-menu__nav > ul > li {
	opacity: 1;
	transform: none;
}

.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(1) { transition-delay: 0.12s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(2) { transition-delay: 0.18s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(3) { transition-delay: 0.24s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(4) { transition-delay: 0.30s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(5) { transition-delay: 0.36s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(6) { transition-delay: 0.42s; }
.agm2-menu.is-open .agm2-menu__nav > ul > li:nth-child(n + 7) { transition-delay: 0.48s; }

.agm2-menu__nav a {
	display: block;
	padding: 0.28em 0;
	color: var(--color-text, #1a1b1f);
	font-family: var(--font-heading, Georgia, serif);
	font-size: clamp(2.25rem, 11vw, 3.5rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
}

.agm2-menu__nav a:hover,
.agm2-menu__nav a:focus-visible {
	color: var(--color-text-light, #6c6e73);
}

/* Page courante : italique, comme le « lieu. » du titre d'accueil */
.agm2-menu__nav .current-menu-item > a {
	font-style: italic;
	font-weight: 300;
}

/* Sous-menus : plus petits, centrés sous leur parent */
.agm2-menu__nav ul ul {
	margin: 0 0 0.6em;
	padding: 0;
	border: none;
}

.agm2-menu__nav ul ul a {
	padding: 0.3em 0;
	font-family: var(--font-body, sans-serif);
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light, #6c6e73);
}

/* ==============================================================
   4. Bouton Contact, en bas de l'écran
   ============================================================== */
.agm2-menu__cta {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	max-width: 22rem;
	margin: 0;
	padding-top: 1.5rem;
}

.agm2-menu__cta .btn-header-cta,
.agm2-menu__cta > a {
	display: block !important;
	width: 100%;
	padding: 1.05em 1.4em;
	background: var(--color-primary, #1a1b1f);
	color: var(--color-on-primary, #fff) !important;
	border-radius: var(--radius, 0.625rem);
	font-size: var(--fs-sm, 0.875rem);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	transition: background 0.2s ease-in-out;
}

.agm2-menu__cta > a:hover,
.agm2-menu__cta > a:focus-visible {
	background: var(--color-primary-dark, #000);
}

/* ==============================================================
   5. Divers
   ============================================================== */
html.agm2-menu-open,
html.agm2-menu-open body {
	overflow: hidden;
}

/* Mouvement réduit : pas de glissement, fondu seul */
@media (prefers-reduced-motion: reduce) {
	.agm2-menu__nav > ul > li {
		transform: none !important;
		transition-delay: 0s !important;
	}
}

/*--------------------------------------------------------------
# Pied de page — bandeau horizontal
--------------------------------------------------------------
Mise en page inspirée du modèle fourni : un filet noir court en
haut à gauche, puis une seule ligne où se succèdent le logo,
l'adresse, les coordonnées et les réseaux, très espacés.

Le pied de page passe sur fond CLAIR (il était sombre) : c'est ce
qui donne au modèle sa légèreté. Les couleurs --color-on-dark ne
sont donc plus utilisées ici.

Les éléments secondaires (menu, mentions légales, copyright) sont
relégués dans un bandeau bas discret : ils restent accessibles
sans encombrer la ligne principale.
--------------------------------------------------------------*/
/* Respiration resserrée : le pied de page ouvrait sur 5rem de blanc et
   se terminait sur 2,5rem. Un pied de page n'a pas besoin d'autant
   d'air — c'est une zone de service, pas une section de contenu. */
.site-footer {
	background: var(--color-background);
	color: var(--color-text);
	padding: var(--spacing-lg) var(--container-padding) var(--spacing-md);
	font-size: var(--fs-sm);
	margin-top: auto;
	border-top: 1px solid var(--color-border);
}

.site-footer .site-footer-inner {
	display: block;
	max-width: var(--container-width);
	margin: 0 auto;
	text-align: center;
}

/* ---------- Ligne principale : quatre colonnes ----------
   Logo, adresse, coordonnées, réseaux, sur une seule ligne.

   `space-between` plutôt qu'un `column-gap` fixe : il répartit tout
   l'espace disponible en intervalles ÉGAUX entre les quatre blocs, quelle
   que soit leur largeur respective. Un gap fixe laisserait au contraire
   un vide résiduel à droite, et le `margin-left: auto` d'origine sur les
   réseaux creusait un écart bien plus large que les deux autres.

   `align-items: center` centre chaque bloc sur la hauteur de la ligne :
   avec une image de logo, l'alignement sur la ligne de base tomberait au
   bas de l'image et décalerait les textes voisins vers le bas. */
.footer-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--spacing-md);
	row-gap: var(--spacing-md);
}

.footer-col {
	min-width: 0;
}

/* ---------- Identité ---------- */
/* Le lien reste en inline-block : sa ligne de base est le bas de la
   boîte, donc le logo s'aligne sur celle des textes voisins, comme
   dans le modèle. Un display:flex ferait dériver cet alignement. */
.footer-logo {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	line-height: 1;
	color: var(--color-heading);
	text-decoration: none;
}

/* Image de logo : la hauteur de l'en-tête, majorée de 40 %. Elle reste
   indexée sur --logo-height, donc les quatre paliers responsive suivent
   automatiquement (2rem, 2,25rem, 2,75rem, 3rem × 1,4). */
.footer-logo-img {
	display: block;
	height: calc(var(--logo-height) * 1.4);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.footer-logo:visited,
.footer-logo:hover,
.footer-logo:focus {
	color: var(--color-heading);
}

.footer-logo sup {
	font-size: 0.55em;
	vertical-align: super;
}

.footer-tagline {
	margin: 0.5em 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

/* ---------- Adresse et coordonnées ---------- */
.footer-address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	color: var(--color-text);
}

.footer-heading {
	margin: 0 0 0.45em;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-text);
}

.footer-heading-social {
	margin-top: 0;
}

.footer-menu,
.footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1em;
}

/* ---------- Liens : soulignement animé, comme ailleurs ---------- */
.site-footer .footer-menu a,
.site-footer .footer-list a,
.site-footer .footer-link,
.site-footer .footer-legal a {
	position: relative;
	display: inline-block;
	padding: 0.25em 0;
	color: var(--color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.site-footer .footer-menu a:visited,
.site-footer .footer-list a:visited,
.site-footer .footer-link:visited,
.site-footer .footer-legal a:visited {
	color: var(--color-text);
}

.site-footer .footer-menu a::after,
.site-footer .footer-list a::after,
.site-footer .footer-link::after,
.site-footer .footer-legal a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.1em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.site-footer .footer-menu a:hover::after,
.site-footer .footer-menu a:focus-visible::after,
.site-footer .footer-list a:hover::after,
.site-footer .footer-list a:focus-visible::after,
.site-footer .footer-link:hover::after,
.site-footer .footer-link:focus-visible::after,
.site-footer .footer-legal a:hover::after,
.site-footer .footer-legal a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

.site-footer .footer-menu .current-menu-item > a {
	font-weight: 500;
}

/* ---------- Réseaux : icônes seules ----------
   Le soulignement animé est neutralisé ici : sur une icône, un filet
   de la largeur du lien passerait sous le dessin sans rien souligner.
   L'état de survol est porté par la couleur. */
.footer-social {
	flex-direction: row;
	gap: 0.85rem;
}

/* Flèche de retour à l'accueil : disque cerné de noir, qui se remplit
   au survol — même bascule que le bouton de l'en-tête. Placée en dernier
   dans le bandeau bas, elle en occupe l'extrémité droite. */
.site-footer .footer-top {
	flex-shrink: 0;
	order: 99;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.site-footer .footer-top:visited {
	color: var(--color-text);
}

.site-footer .footer-top:hover,
.site-footer .footer-top:focus-visible {
	background: var(--color-text);
	color: var(--color-background);
}

.footer-top svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.site-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	color: var(--color-text);
	transition: color var(--transition), opacity var(--transition);
}

.site-footer .footer-social a::after {
	content: none;
}

.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible {
	color: var(--color-primary-dark);
	opacity: 0.6;
}

.footer-social svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.site-footer .footer-link {
	margin-top: 0.4em;
	color: var(--color-text-light);
	font-size: 0.8125rem;
}

/* ---------- Bandeau bas : retour accueil, copyright, mentions ----------
   Rapproché de la ligne principale : le pied de page doit se lire comme
   un seul bloc, pas comme deux zones séparées. */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem var(--spacing-md);
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-light);
	font-size: 0.8125rem;
}

/* Les mentions légales se collent au bord droit */
.footer-legal {
	margin-left: auto;
}

.footer-copyright,
.footer-legal {
	margin-block: 0;
}

.footer-legal span {
	margin: 0 0.4em;
	opacity: 0.5;
}

/* ---------- Focus clavier ---------- */
.site-footer a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* ---------- 768px et plus ---------- */
@media screen and (min-width: 48em) {

	/*.site-footer {
		padding-top: var(--spacing-xl);
	}*/

}

/* ---------- Jusqu'à 767px : la ligne se replie proprement ----------
   En dessous de cette largeur, quatre colonnes côte à côte deviennent
   illisibles : chaque bloc reprend toute la largeur. */
@media screen and (max-width: 47.9375em) {

	.footer-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	/* Le bandeau bas s'empile : trois blocs sur une ligne ne tiennent
	   pas sous 768px sans césures disgracieuses. */
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.7em;
	}

	.footer-legal {
		margin-left: 0;
	}
}

/* ---------- Impression : le pied de page disparaît ---------- */
@media print {
	.site-footer {
		display: none;
	}
}

/*--------------------------------------------------------------
# Page — Contact (modèle centré)
--------------------------------------------------------------
Reprise de la mise en page du modèle : titre centré, quatre blocs
de coordonnées sur deux colonnes, chacun précédé d'une pastille
ronde, puis un plan pleine largeur.

Écart assumé sur les pastilles : le modèle les affiche en bleu vif.
La charte du thème est strictement monochrome (« aucun accent
coloré ») — un aplat bleu jurerait avec le hero, le manifeste et le
pied de page. Elles reprennent donc le noir de la charte. Pour
revenir au bleu du modèle, une seule déclaration à changer :
   .contact-block-icon { background: #29a3dc; }

Ces règles ne touchent pas aux classes .contact-grid,
.contact-map-col ni .section-contact-hero, qui restent utilisées
par la section contact de la page d'accueil.
--------------------------------------------------------------*/
/* La page est une colonne flexible. Le plan porte `flex: 1` : il
   absorbe la hauteur restante au lieu de laisser un vide entre lui
   et le pied de page, que `margin-top: auto` repoussait en bas de
   la fenêtre sur les pages courtes. */
.contact-page {
	position: relative; /* référence de placement de .side-social */
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.contact-intro {
	flex: 0 0 auto;
	background: var(--color-background-alt);
	padding: var(--spacing-lg) 0 calc(var(--spacing-lg) * 1.2);
}

.contact-intro-title {
	margin: 0 0 var(--spacing-lg);
	font-size: var(--fs-h3);
	font-weight: var(--heading-weight);
	color: var(--color-text-light);
	text-align: center;
	text-wrap: balance;
}

/* ---------- Les quatre blocs ---------- */
.contact-blocks {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 56rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md);
}

/* Chaque bloc tient sur une ligne : l'icône et le texte sont donc
   centrés l'un par rapport à l'autre, et non calés en haut. */
.contact-block {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* Pastille ronde. `flex-shrink: 0` est indispensable : sans lui, le
   cercle s'écrase en ovale dès que le texte à côté s'allonge. */
.contact-block-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-background);
}

.contact-block-icon svg {
	width: 1.3rem;
	height: 1.3rem;
}

.contact-block-body {
	min-width: 0;
}

/* Adresse : même corps et même graisse que les autres coordonnées,
   sur une seule ligne. `text-wrap: balance` répartit la césure si la
   colonne devient trop étroite, plutôt que de laisser un mot seul. */
.contact-block-address {
	margin: 0;
	font-style: normal;
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	line-height: 1.3;
	color: var(--color-text);
	text-wrap: balance;
}

/* Coordonnée mise en avant, composée dans le serif du thème.
   Le préfixe `.contact-page` a été retiré : ces blocs servent aussi
   à la section 04 de la page d'accueil. La classe seule (0,1,0)
   l'emporte de toute façon sur la règle générique `a` (0,0,1). */
.contact-block-strong {
	position: relative;
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: var(--fs-h4);
	color: var(--color-heading);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact-block-strong:visited {
	color: var(--color-heading);
}

.contact-block-links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
}

.contact-block-links a {
	position: relative;
	display: inline-block;
	color: var(--color-text);
	text-decoration: none;
}

.contact-block-links span {
	color: var(--color-text-light);
}

/* Soulignement animé, motif commun à tout le thème */
.contact-block-strong::after,
.contact-block-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.contact-block-strong:hover::after,
.contact-block-strong:focus-visible::after,
.contact-block-links a:hover::after,
.contact-block-links a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

/* ---------- Plan pleine largeur ----------
   Le plan sort du conteneur : il occupe toute la largeur de la
   fenêtre, comme dans le modèle. Filtre gris désaturé au repos,
   couleur au survol — cohérent avec la carte de la page d'accueil. */
/* Dernier élément de la page : un filet le sépare du pied de page,
   qui est lui aussi sur fond clair — sans quoi les deux se confondent.

   La carte n'est plus tout à fait à fond perdu : elle laisse une marge
   de chaque côté (voir la media query ≥48em plus bas) pour que la barre
   de réseaux se détache sur le fond de page. Un plan Google est trop
   chargé pour qu'une pastille translucide y reste lisible. */
.contact-map-full {
	position: relative;
	width: 100%;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	/* `flex: 1` ne joue que dans .contact-page, qui est une colonne
	   flexible ; sur la page d'accueil la déclaration est ignorée et
	   c'est min-height qui fixe la hauteur. */
	flex: 1 1 auto;
	min-height: clamp(18rem, 40vh, 30rem);
	overflow: hidden;
	background: var(--color-background-alt);
	filter: grayscale(0.9) contrast(1.02);
	transition: filter var(--transition-smooth);
}

.contact-map-full:hover,
.contact-map-full:focus-within {
	filter: grayscale(0) contrast(1.02);
}

.contact-map-full iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- 768px et plus : deux colonnes de blocs ---------- */
@media screen and (min-width: 48em) {

	/* Les trois blocs tiennent sur une seule ligne. `auto` plutôt que
	   `1fr` : l'adresse est bien plus longue que les deux autres, des
	   colonnes égales la couperaient en deux tout en laissant du vide
	   à côté du téléphone. `justify-content: center` + un column-gap
	   fixe donnent un écart IDENTIQUE entre les blocs — ce que
	   `space-between` ne fait pas, puisqu'il répartit un reste variable. */
	/* Réserve à droite : la barre de réseaux ne doit pas venir
	   chevaucher les blocs sur un écran de largeur moyenne. */
	.contact-intro .section-inner {
		padding-right: calc(var(--container-padding) + 4rem);
	}

	.contact-blocks {
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: center;
	}

	.contact-block-icon {
		width: 3.25rem;
		height: 3.25rem;
	}

	.contact-block-icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* ---------- Réseaux : barre verticale au bord droit ----------
   `absolute` et non `fixed` : la barre reste dans le bandeau clair du
   haut de page au lieu de se centrer sur la fenêtre, où elle passait
   par-dessus le plan et devenait illisible. Elle défile donc avec la
   page, ce qui règle le problème à la source — la carte peut rester
   d'un bord à l'autre.

   `pointer-events` reste actif uniquement sur les liens : le
   conteneur ne doit pas intercepter les clics alentour. */
.side-social {
	position: absolute;
	top: var(--spacing-lg);
	right: clamp(0.75rem, 2vw, 2rem);
	z-index: 900;
	display: none;
	flex-direction: column;
	gap: var(--spacing-xs);
	pointer-events: none;
}

.side-social-link {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	background: var(--color-glass-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.side-social-link:visited {
	color: var(--color-text);
}

.side-social-link:hover,
.side-social-link:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-background);
}

.side-social-link svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* Sous 768px la barre recouvrirait le contenu : les réseaux restent
   accessibles dans le pied de page. */
@media screen and (min-width: 48em) {
	.side-social {
		display: flex;
	}
}

@media print {
	.side-social {
		display: none;
	}
}

/*--------------------------------------------------------------
# Défilement par section (scroll snap)
--------------------------------------------------------------
Le défilement s'aligne sur le haut de chaque section, pour ne plus
s'arrêter au milieu de l'une d'elles.

`proximity` et NON `mandatory` : avec `mandatory`, toute section plus
haute que la fenêtre — la grille Projets, les fiches Fondateurs — voit
son bas devenir inatteignable, le navigateur ramenant sans cesse le
défilement sur le point d'accroche le plus proche. `proximity` n'aligne
que lorsque l'utilisateur s'arrête déjà près d'une limite, et laisse
défiler librement à l'intérieur des sections longues.

Pour un verrouillage strict — au risque décrit ci-dessus — remplacer
`proximity` par `mandatory`.

`scroll-margin-top` compense la barre d'en-tête : sans lui, les
premières lignes de chaque section passeraient dessous, l'en-tête
étant collant.

Désactivé sous 768px : sur un écran étroit, les sections dépassent
presque toutes la hauteur de la fenêtre, et l'accroche gênerait plus
qu'elle n'aiderait. Désactivé aussi si l'utilisateur a demandé moins
d'animations — le défilement piloté est une source classique de gêne.
--------------------------------------------------------------*/
@media screen and (min-width: 48em) and (prefers-reduced-motion: no-preference) {

	html {
		scroll-snap-type: y proximity;
	}

	.front-page > section,
	.contact-page > section {
		scroll-snap-align: start;
		scroll-margin-top: 0; /* le décalage vient de scroll-padding-top sur html */
	}

	/* Le hero occupe déjà toute la hauteur utile : il s'aligne sur le
	   tout début du document, sans compensation. */
	.front-page > .hero {
		scroll-margin-top: 0;
	}
}

/*--------------------------------------------------------------
# Page d'un domaine — liste des projets
--------------------------------------------------------------
Gabarit fourni par l'extension « AGm² — Domaines et projets ».

Liste horizontale : un numéro, le nom du projet, sa description à
droite, et le lien « Voir plus » à l'extrémité. Chaque ligne est
séparée par un filet — même vocabulaire que les fiches Fondateurs
et les cartes de la section Projets.
--------------------------------------------------------------*/
.section-domaine-hero {
	padding-bottom: var(--spacing-md);
}

.domaine-retour {
	margin-bottom: var(--spacing-md);
}

.section-domaine-hero .domaine-retour a {
	position: relative;
	display: inline-block;
	color: var(--color-text-light);
	text-decoration: none;
	letter-spacing: 0.08em;
}

.section-domaine-hero .domaine-retour a:hover,
.section-domaine-hero .domaine-retour a:focus-visible {
	color: var(--color-text);
}

.section-domaine-hero .section-text {
	max-width: 42em;
	margin-bottom: 0;
}

.section-projets-list {
	padding-top: var(--spacing-md);
}

/* Le compteur remplace des numéros écrits en dur : supprimer ou
   réordonner un projet renumérote la liste toute seule.
   `decimal-leading-zero` produit 01, 02… au lieu de 1, 2. */
.projets-list {
	counter-reset: projet;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
	/* Établit un contexte d'empilement propre à la liste : le voile
	   flouté et la photo (tous deux position:fixed, ci-dessous) sont
	   ainsi comparés entre eux par leur z-index, sans dépendre de
	   l'ordre d'empilement du reste de la page (header sticky à 999,
	   panneau de menu mobile à 100000, etc.). */
	position: relative;
	isolation: isolate;
}

.projet-row {
	counter-increment: projet;
	border-bottom: 1px solid var(--color-border);
}

/* Toute la ligne est cliquable, pas seulement le titre : une cible de
   la largeur de l'écran est autrement plus confortable qu'un lien de
   trois mots, à la souris comme au doigt. */
.projet-row-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	padding: var(--spacing-md) 0;
	color: var(--color-heading);
	text-decoration: none;
	transition: background-color var(--transition);
}

.projet-row-inner:visited {
	color: var(--color-heading);
}

.projet-row-inner:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.projet-index::before {
	content: counter(projet, decimal-leading-zero);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: var(--color-text-light);
}

.projet-title {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: 1.15;
	letter-spacing: var(--heading-letter-spacing);
	margin: 0;
	color: inherit;
}

.projet-text {
	margin: 0;
	color: var(--color-text-light);
	line-height: 1.7;
	max-width: 40em;
}

.projet-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-bottom: 0.2em;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-primary);
	white-space: nowrap;
}

.projet-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth);
}

.projet-link span {
	display: inline-block;
	transition: transform var(--transition);
}

.projet-row-inner:hover .projet-link::after,
.projet-row-inner:focus-visible .projet-link::after {
	transform: scaleX(1);
	transform-origin: 0;
}

.projet-row-inner:hover .projet-link span,
.projet-row-inner:focus-visible .projet-link span {
	transform: translateX(4px);
}

/* ---------- 768px et plus : la ligne se déploie ---------- */
@media screen and (min-width: 48em) {

	/* Quatre colonnes : numéro, nom, description, lien. Le nom et la
	   description partagent l'espace disponible ; `minmax(0, …)` empêche
	   un mot long de faire déborder sa colonne. */
	.projet-row-inner {
		grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
		align-items: center;
		column-gap: var(--spacing-lg);
		padding: var(--spacing-lg) 0;
	}

	.projet-index::before {
		display: block;
		padding-top: 0.4em;
	}

	/* Léger retrait au survol : la ligne avance vers le lecteur sans
	   qu'aucun aplat ne vienne alourdir la page. */
	.projet-row-inner {
		transition: padding-left var(--transition-smooth);
	}

	.projet-row-inner:hover,
	.projet-row-inner:focus-visible {
		padding-left: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.projet-row-inner:hover,
	.projet-row-inner:focus-visible {
		padding-left: 0;
	}
}

/* ---------- Survol d'un projet : fond flouté, photo centrée ----------
   Même vocabulaire que le reste du thème : backdrop-filter (header,
   .side-social-link), pas de coin arrondi ni d'ombre portée, filet fin
   au lieu d'un cadre.

   La photo (span.projet-photo-wrap) est ajoutée par le plugin AGm² —
   Domaines et projets dans le balisage de chaque ligne, seulement si
   le projet a une image mise en avant. Sans image mise en avant sur
   le projet, il n'y a rien à révéler ici, quel que soit le CSS.

   Ordre d'empilement : `.projets-list` porte `isolation: isolate`
   (voir plus haut), donc le voile (z-index 1) et la photo (z-index 2)
   ne sont comparés qu'entre eux, jamais avec le reste du site — la
   photo passe systématiquement au-dessus de son propre voile.
   Nécessite le sélecteur :has() (Chrome, Edge, Safari et Firefox
   récents) ; sans lui, la photo reste simplement masquée —
   dégradation silencieuse, rien ne casse. */
.projet-photo-wrap {
	position: fixed;
	inset: 0;
	margin: auto;
	width: 50vw;
	height: 50vh;
	z-index: 2;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-background-alt);
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
	transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.projet-photo-wrap .projet-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.projet-row:hover .projet-photo-wrap,
.projet-row:focus-within .projet-photo-wrap {
	opacity: 1;
	transform: scale(1);
}

/* Voile flouté derrière la photo, sur toute la fenêtre */
.projets-list:has(.projet-row:hover)::before,
.projets-list:has(.projet-row:focus-within)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	background: var(--color-overlay);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.projet-photo-wrap {
		transition: opacity 0.2s linear;
		transform: none !important;
	}
}

/*--------------------------------------------------------------
# Bandeau défilant fixe + ancres des sections
--------------------------------------------------------------
Le bandeau reste collé sous le header : chaque section de la page
d'accueil doit donc s'arrêter SOUS lui quand on clique sur un lien du
menu. --marquee-height est à la fois la hauteur réelle du bandeau
(voir .hero-marquee) et le décalage des ancres : une seule valeur à
changer pour l'agrandir ou le réduire.
--------------------------------------------------------------*/
:root {
	--marquee-height: 6rem;
}

@media screen and (min-width: 48em) {
	:root {
		--marquee-height: 7.25rem;
	}
}

/* Spécificité (0,2,1) : l'emporte sur `.front-page > section` (snap)
   et sur `[id]`. Le hero est exclu : il reste calé tout en haut. */
.front-page > section:not(.hero) {
	scroll-margin-top: calc(var(--marquee-height) - 2rem);
}