/* =========================================================================
   Clameurs Events, One-Page V3 (home.css)
   Chargé sur la page d'accueil seulement ; le coming soon vit dans style.css (.ce-cs).
   Convention : .ce-<section>__<élément>. Les états initiaux d'animation sont
   posés en JS, jamais ici : la page reste complète sans JS.
   Points de rupture : 782 px (WP) et 1 024 px (contextes gsap.matchMedia).
   Unité --u : 1 px de la maquette (cadre 1 440), en cqi de la section.
   ========================================================================= */

:root {
	/* V3 */
	--ce-nuit: var(--wp--preset--color--bleu-nuit);
	--ce-encre: var(--wp--preset--color--encre);
	--ce-or-fonce: var(--wp--preset--color--or-fonce);
	--ce-or-clair: var(--wp--preset--color--or-clair);
	--ce-titres: var(--wp--preset--font-family--titres);
	--ce-corps: var(--wp--preset--font-family--corps);
	--ce-gouttiere: 1rem; /* marges latérales de la maquette (x 16) */
	--ce-bleu: var(--wp--preset--color--bleu-profond);
	--ce-blanc: var(--wp--preset--color--blanc);
	/* pages internes */
	--ce-pad: clamp(1rem, 4vw, 2.5rem);
	--ce-section-pad: clamp(4rem, 10vw, 9rem);
}

body *,
body *::before,
body *::after {
	box-sizing: border-box;
}

body {
	background: var(--ce-blanc);
	color: var(--ce-encre);
	overflow-x: hidden;
}

/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

/* -------------------------------------------------------------------------
   En-tête en surimpression
   ------------------------------------------------------------------------- */
/* maquette 185:1795 (logo x 16, y 36, 159 × 110) et 185:1789 (menu x 1 209) */
.ce-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 10;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--ce-gouttiere) 0;
}

.ce-header__brand {
	display: block;
	text-decoration: none;
}

.ce-header__logo {
	display: block;
	width: clamp(112px, 12.9vw, 186px); /* +17 % sur la maquette (Jean-Paul via Pauline, 15/09) */
	height: auto;
}

.ce-header__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
	font-family: var(--ce-corps);
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1;
	text-transform: uppercase;
}

.ce-header__menu a {
	color: var(--ce-blanc);
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.ce-header__menu a:hover,
.ce-header__menu a:focus-visible {
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.ce-header__nav {
		position: absolute;
		top: clamp(1.25rem, 2.5vw, 2.25rem);
		left: calc(1209 / 1440 * 100%);
	}
}

/* tactile : zone de 44 px par entrée, sans changer le pas visuel */
@media (hover: none) {
	.ce-header__menu { gap: 0; }
	.ce-header__menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-block: -6px;
	}
}

/* lissage en niveaux de gris, comme le rendu de Figma : en sous-pixels, le blanc sur fond sombre s'épaissit
   (Steve, 15/09 : le menu paraissait plus gras que sur la maquette, le fichier Geist est bien la Regular 400) */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
   Hero, état final 185:2812 (photo 1 440 × 900, voile noir 45 %)
   ------------------------------------------------------------------------- */
.ce-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* accroche à y 325 sur 900 */
	padding: calc(325 / 900 * 100svh) var(--ce-gouttiere) 0;
	isolation: isolate;
	overflow: hidden;
	color: var(--ce-blanc);
	background: var(--ce-nuit);
}

.ce-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ce-hero__voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(0 0 0 / 0.45);
}

.ce-hero__contenu {
	position: relative;
	z-index: 2;
	text-align: center;
}

/* attente de l'ouverture animée : classe posée en tête de page (functions.php), levée par animations.js ou après 3 s */
.ce-attente .ce-hero__contenu { visibility: hidden; }
.ce-attente .ce-header { visibility: hidden; }
.ce-attente .ce-hero__photo { opacity: 0; } /* ouverture en trois temps : la photo apparaît du fond bleu nuit */

/* état initial de l'ouverture (185:1723, maquette du 14/09 au soir) : wordmark à y 366 sur 900, soit 26 px
   sous le centre du hero ; même calcul qu'animations.js (centre - haut du wordmark, haut = H - 260u + 49u) ;
   visible dès le premier rendu : c'est l'élément LCP */
.ce-attente .ce-hero__wordmark-texte {
	transform: translateY(calc(-0.5 * (100svh - 260 / 1440 * 100vw) - 34 / 1440 * 100vw));
}

.ce-hero__accroche {
	margin: 0;
	font-family: var(--ce-corps);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sous-titre);
	line-height: 1.3;
	text-transform: uppercase;
}

.ce-hero__sous-titres {
	margin: 1.625rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.3;
}

/* wordmark, proposition typographique 1 (page Font, 176:707 et 176:708) : texte Instrument Sans Bold 260 sur
   1 440, boîte de ligne de 260 à y 689 sur 900, donc 49 px sous le bas du hero, ligne de base à y 913 ; le mot
   fait 1 462 de large, centré, il déborde de 11 px de chaque côté (overflow du hero, pas du conteneur :
   l'ouverture le fait partir du centre). Version précédente : SVG de 1 440 × 220 à y 739 (V3, Jean-Paul) */
.ce-hero__wordmark {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	justify-content: center;
}

.ce-hero__wordmark-texte {
	display: block;
	flex: none;
	/* 11 px plus bas que la proposition 1 (boîte à y 700) : le haut des lettres reste à y 742, où Jean-Paul
	   l'avait fait descendre sur la V3 (Steve, 15/09 : garder ce rognage) ; ligne de base à y 924 */
	margin-bottom: calc(-60 / 1440 * 100vw);
	font-family: var(--ce-titres);
	font-size: calc(260 / 1440 * 100vw);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ce-blanc);
}

/* oméga du wordmark collé au L comme dans la maquette (encre du L à 7 px de l'oméga, 24 px avant le M ;
   les 0,06 em de côté des titres donnaient 27 et 29 px, Steve, 15/09 : « trop loin du L ») */
.ce-hero__wordmark-texte .ce-omega {
	padding: 0;
	margin: 0 0.04em 0 -0.015em;
}

.ce-hero__wordmark-texte .ce-omega::after { inset: 0.25em 0; }

/* -------------------------------------------------------------------------
   Renforçons
   ------------------------------------------------------------------------- */
/* 185:2814 : bande blanche de 736 px (y 900 à 1 636), phrase centrée */
.ce-intro {
	background: var(--ce-blanc);
	/* boîte de texte à y 267, 241 px dessous : 736 px à 1 440 */
	padding: max(4rem, calc(267 / 1440 * 100vw)) var(--ce-gouttiere) max(3.5rem, calc(241 / 1440 * 100vw));
}

.ce-intro__phrase {
	margin: 0;
	color: var(--ce-encre);
	font-size: var(--wp--preset--font-size--titre);
	text-align: center;
}

.ce-intro__ligne { display: block; }

/* État initial 185:1740, mesuré par l'animation (Flip) puis retiré : une ligne vide
   entre les deux lignes, la première 79 px plus haut et la seconde 35 px plus bas
   qu'à l'état final (0,9 et 0,4 em à 88 px). Marges négatives : hauteur de section inchangée. */
.ce-intro__phrase.is-ouvert {
	margin-top: -0.9em;
	margin-bottom: -0.4em;
}

.ce-intro__phrase.is-ouvert .ce-intro__ligne + .ce-intro__ligne { margin-top: 1.3em; }

/* -------------------------------------------------------------------------
   Chiffres clés
   ------------------------------------------------------------------------- */
/* 185:2275 : 4 cartes 346 × 643 à x 16, 8 px d'écart, 17 px avant le Manifeste */
.ce-chiffres {
	background: var(--ce-blanc);
	padding: 0 var(--ce-gouttiere) 1.0625rem;
}

.ce-chiffres__cartes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}

@media (min-width: 782px) {
	.ce-chiffres__cartes { grid-template-columns: repeat(4, 1fr); }
}

.ce-chiffres__carte { position: relative; overflow: hidden; } /* la photo recule à l'entrée */

/* dégradé vertical #00475F : 10 % en haut, 0 % à 68 %, 50 % en bas */
.ce-chiffres__carte::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 71 95 / 0.1) 0%, rgb(0 71 95 / 0) 68%, rgb(0 71 95 / 0.5) 100%);
	pointer-events: none;
}

.ce-chiffres__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 346 / 643;
	object-fit: cover;
}

/* texte à 40 px du bord gauche, bas de boîte à 37 px du bas de la carte */
.ce-chiffres__texte {
	position: absolute;
	left: clamp(1rem, calc(40 / 1440 * 100vw), 2.5rem);
	right: 0.5rem;
	bottom: clamp(1rem, calc(37 / 1440 * 100vw), 2.3125rem);
	z-index: 1;
	margin: 0;
	color: var(--ce-blanc);
	font-size: var(--wp--preset--font-size--carte);
	line-height: 1.3;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Manifeste, 185:2266 (cadre 1 440 × 1 024) et états 185:3364 à 185:3418.
   Sans animation, les 7 étapes s'empilent ; en desktop chacune reprend la
   composition de l'état 1 (unité --u = 1 px de la maquette).
   ------------------------------------------------------------------------- */
.ce-manifeste {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	background: var(--ce-nuit);
	color: var(--ce-blanc);
}

.ce-manifeste__inner {
	position: relative;
	padding: 5rem var(--ce-gouttiere) 4rem;
}

.ce-manifeste__titre {
	margin: 0 0 2.5rem;
	font-size: var(--wp--preset--font-size--titre);
	line-height: 1;
}

.ce-manifeste__rail { display: none; }

.ce-manifeste__etapes {
	display: grid;
	gap: 4rem;
}

.ce-manifeste__etape {
	display: grid;
	gap: 2rem;
}

.ce-manifeste__texte {
	max-width: 32rem;
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.3;
}

.ce-manifeste__texte p { margin: 0 0 1.3em; }
.ce-manifeste__texte p:last-child { margin-bottom: 0; }

/* couple de photos : grande 573 × 849 à droite, petite 334 × 457 posée dessus, 322 px plus bas */
.ce-manifeste__photos {
	position: relative;
	width: 100%;
	max-width: 30rem;
	aspect-ratio: 692 / 849;
}

.ce-manifeste__photo {
	position: absolute;
	display: block;
	object-fit: cover;
}

.ce-manifeste__photo--grande {
	top: 0;
	right: 0;
	width: calc(573 / 692 * 100%);
	height: 100%;
}

.ce-manifeste__photo--petite {
	top: calc(322 / 849 * 100%);
	left: 0;
	width: calc(334 / 692 * 100%);
	height: calc(457 / 849 * 100%);
}

@media (min-width: 1024px) {
	.ce-manifeste__inner {
		padding: calc(96 * var(--u)) 0 calc(79 * var(--u));
	}

	.ce-manifeste__titre {
		position: absolute;
		top: calc(164 * var(--u));
		left: calc(136 * var(--u));
		margin: 0;
	}

	/* rail de 300 px (1 px, x 137) et segment de 7 px sur 60 px, à y 595 */
	.ce-manifeste__rail {
		display: block;
		position: absolute;
		top: calc(595 * var(--u));
		left: calc(131.5 * var(--u));
		width: 7px;
		height: calc(300 * var(--u));
	}

	.ce-manifeste__rail::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 3px;
		width: 1px;
		background: var(--ce-bleu);
	}

	.ce-manifeste__rail-segment {
		position: absolute;
		top: 0;
		left: 0;
		width: 7px;
		height: calc(60 * var(--u));
		background: var(--ce-bleu);
	}

	.ce-manifeste__etapes { display: block; }

	.ce-manifeste__etape {
		display: block;
		position: relative;
		height: calc(849 * var(--u));
	}

	.ce-manifeste__etape + .ce-manifeste__etape { margin-top: calc(96 * var(--u)); }

	.ce-manifeste__texte {
		position: absolute;
		top: calc(490 * var(--u));
		left: calc(200 * var(--u));
		width: max(16rem, calc(269 * var(--u)));
		max-width: none;
	}

	.ce-manifeste__photos {
		position: absolute;
		top: 0;
		left: calc(613 * var(--u));
		width: calc(692 * var(--u));
		max-width: none;
		height: 100%;
		aspect-ratio: auto;
	}

	/* Section figée, posée par l'animation (is-anime) : la composition de 1 440 × 1 024
	   occupe toute la fenêtre, les étapes se superposent, les textes se remplacent ligne
	   par ligne au même endroit (Mélanie, 14/09 au soir), au-dessus de la flèche.
	   Pleine largeur (Mélanie, 14/09) : x à l'échelle de la largeur (--ux), une colonne de
	   la grille de 12 de chaque côté (x 135 à 1 305) ; y à l'échelle de la hauteur (--u).
	   Avant, une seule échelle, la plus petite des deux : sur un écran de 1 440 × 800, la
	   composition réduite à 1 125 px laissait 157 px de blanc de plus de chaque côté. */
	/* tablette tactile : hauteur d'écran posée par animations.js (--ce-ecran-h), 100svh sinon */
	.ce-manifeste.is-anime {
		--u: calc(var(--ce-ecran-h, 100svh) / 1024);
		--ux: calc(100cqi / 1440);
		height: var(--ce-ecran-h, 100svh);
		overflow: hidden;
	}

	.ce-manifeste.is-anime .ce-manifeste__inner {
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
	}

	/* 88 px au plus, réduit avec la largeur (la grande photo commence à x 732) et avec la hauteur (fenêtre du texte à y 300) */
	.ce-manifeste.is-anime .ce-manifeste__titre {
		left: calc(136 * var(--ux));
		font-size: min(var(--wp--preset--font-size--titre), calc(88 * var(--ux)), calc(120 * var(--u)));
	}

	.ce-manifeste.is-anime .ce-manifeste__rail { left: calc(131.5 * var(--ux)); }

	.ce-manifeste.is-anime .ce-manifeste__etapes,
	.ce-manifeste.is-anime .ce-manifeste__etape {
		position: absolute;
		inset: 0;
		height: auto;
		margin: 0;
	}

	.ce-manifeste.is-anime .ce-manifeste__photos {
		top: calc(96 * var(--u));
		left: calc(613 * var(--ux));
		width: calc(692 * var(--ux));
		height: calc(849 * var(--u));
	}

	/* texte à y 586 (état dessiné) ; un texte long remonte (animations.js) pour finir au-dessus de y 830 */
	.ce-manifeste.is-anime .ce-manifeste__texte {
		top: calc(586 * var(--u));
		left: calc(200 * var(--ux));
		width: max(16rem, calc(269 * var(--ux)));
	}

	.ce-manifeste.is-anime .ce-manifeste__suivant {
		display: block;
		top: calc(872 * var(--u));
		left: calc(200 * var(--ux));
	}
}

/* Section figée en mobile, posée par l'animation (is-anime) : titre, couple de photos sur la hauteur
   restante, zone de texte à la hauteur du plus long texte (variable posée par animations.js), flèche.
   Si les photos tombent sous 140 px, l'animation renonce et les étapes restent empilées.
   Hauteur et marge basse suivent la barre du navigateur (--ce-ecran-h, --ce-ecran-masque : animations.js). */
@media (max-width: 1023.98px) {
	.ce-manifeste.is-anime {
		height: var(--ce-ecran-h, 100svh);
		overflow: hidden;
	}

	.ce-manifeste.is-anime .ce-manifeste__inner {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 1.5rem var(--ce-gouttiere) calc(1.25rem + var(--ce-ecran-masque, 0px));
		overflow: hidden;
	}

	.ce-manifeste.is-anime .ce-manifeste__titre {
		flex: none;
		margin: 0 0 1rem;
	}

	.ce-manifeste.is-anime .ce-manifeste__etapes {
		position: relative;
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		order: 1;
	}

	.ce-manifeste.is-anime .ce-manifeste__etape {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.ce-manifeste.is-anime .ce-manifeste__photos {
		order: -1;
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	.ce-manifeste.is-anime .ce-manifeste__texte {
		flex: none;
		max-width: none;
		height: var(--ce-manifeste-texte-h, auto);
	}

	.ce-manifeste.is-anime .ce-manifeste__suivant {
		display: block;
		position: static;
		flex: none;
		order: 2;
		margin-top: 0.75rem;
	}
}

/* icône de défilement 185:3384 (32 px, trait #00475F) : bouton fixe, seulement sous la section figée */
.ce-manifeste__suivant {
	display: none;
	position: absolute;
	z-index: 2;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ce-blanc); /* Pauline, 15/09 : flèche en blanc, comme le texte */
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

.ce-manifeste__suivant svg { display: block; }

.ce-manifeste__suivant:hover { color: var(--ce-or-clair); transform: translateY(2px); }

.ce-manifeste__suivant:focus-visible { outline: 2px solid var(--ce-blanc); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   Nos cinq lieux, titre 185:1744 et cartes 1 440 × 900 (185:1742, 185:3294
   à 185:3297). Sans animation, cartes empilées ; la piste horizontale est une
   classe posée par l'animation (is-anime).
   ------------------------------------------------------------------------- */
.ce-lieux {
	background: var(--ce-blanc);
	color: var(--ce-encre);
}

/* titre 182 px sous le Manifeste, cartes 146 px sous sa boîte */
.ce-lieux__titre {
	margin: 0;
	padding: max(4rem, calc(182 / 1440 * 100vw)) var(--ce-gouttiere) max(3rem, calc(146 / 1440 * 100vw));
	font-size: var(--wp--preset--font-size--hero);
	text-align: center;
}

/* Titres courts à la largeur de l'écran, « comme le Clameurs du header » (Jean-Paul via Pauline, 15/09) :
   Nos cinq lieux et Nos valeurs ; pas Fondé par des passionnés, 24 lettres qui tomberaient à 72 px. --ce-fit est posée par animations.js à partir de
   1 024 px (mesure canvas de la ligne) ; en dessous, et sans JS, l'échelle hero de la maquette reste. */
h2.ce-titre-pleine-largeur {
	font-size: var(--ce-fit, var(--wp--preset--font-size--hero));
	line-height: 1.1;
	letter-spacing: 0;
}

@media (min-width: 1024px) {
	.ce-titre-pleine-largeur { white-space: nowrap; }
}

/* Le A des gros titres dessiné comme celui du wordmark, un oméga (Jean-Paul via Pauline, 15/09) : la lettre
   reste dans le DOM (lecture, recherche, SplitText), rendue transparente, et l'oméga se pose dessus en
   currentColor par un masque. Proportions calées sur la hauteur de capitale d'Instrument Sans (0,7 em). */
.ce-omega__mot { white-space: nowrap; }

.ce-omega {
	position: relative;
	display: inline; /* pas inline-block : une boîte atomique offre une coupure de ligne au milieu du mot */
	padding: 0 0.06em; /* blanc de chaque côté : collé au P de « par » sans (Steve, 15/09) */
	-webkit-text-fill-color: transparent;
}

/* Métriques mesurées d'Instrument Sans 700 (canvas, 15/09) : ascendante 0,97 em, descendante 0,25 em,
   capitale 0,72 em, chasse du A 0,736 em. L'oméga (rapport 1,01) occupe donc la hauteur de capitale,
   du haut des capitales à la ligne de base, dans la chasse du A. */
.ce-omega::after {
	content: "";
	position: absolute;
	inset: 0.25em 0.06em 0.25em;
	background: currentColor;
	transform: rotate(-90deg); /* orientation du wordmark et du logo : pieds à droite (Steve, 15/09) */
	-webkit-mask: url(../images/omega-or.svg) center / contain no-repeat;
	mask: url(../images/omega-or.svg) center / contain no-repeat;
}

.ce-lieux__viewport { position: relative; }

.ce-lieux__progression { display: none; }

.ce-lieux__track { display: block; }

.ce-lieux__panel {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: max(32rem, calc(900 / 1440 * 100vw));
	isolation: isolate;
	overflow: hidden;
	color: var(--ce-blanc);
}

/* photo seule, sans voile */
.ce-lieux__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* textes à 6 px du bord droit, bouton à 15 px, 15 px sous le bouton */
.ce-lieux__infos {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 0 0.375rem 0.9375rem;
	text-align: right;
}

/* taille fluide plafonnée à 120 px : « La Celle-Saint-Cloud » tient dans la carte (écart assumé) */
.ce-lieux__ville {
	margin: 0 0 0.15em; /* Pauline, 15/09 : un peu d'air sous la ville */
	color: var(--ce-blanc);
	font-size: min(7.5rem, 8.3cqi);
}

.ce-lieux__nom {
	margin: 0;
	font-size: var(--wp--preset--font-size--carte);
	line-height: 1.3;
	text-transform: uppercase;
}

/* bouton 185:3346 : cercle de 48 px, pilule au survol (Smart Animate, ease-out, 0,8 s) */
.ce-lieux__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	margin: 0.75rem 0.5625rem 0 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--ce-blanc);
	font-size: var(--wp--preset--font-size--description);
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: padding 0.8s cubic-bezier(0, 0, 0.58, 1);
}

.ce-lieux__cta span {
	display: block;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.8s cubic-bezier(0, 0, 0.58, 1), opacity 0.8s cubic-bezier(0, 0, 0.58, 1);
}

.ce-lieux__cta:hover,
.ce-lieux__cta:focus-visible {
	padding: 0 2.1875rem;
}

.ce-lieux__cta:hover span,
.ce-lieux__cta:focus-visible span {
	max-width: 13rem;
	opacity: 1;
}

/* tactile : pas de survol, pilule d'emblée */
@media (hover: none) {
	.ce-lieux__cta { padding: 0 2.1875rem; }
	.ce-lieux__cta span { max-width: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ce-lieux__cta,
	.ce-lieux__cta span { transition: none; }
}

@media (max-width: 1023.98px) {
	.ce-lieux__infos { padding: 0 var(--ce-gouttiere) var(--ce-gouttiere); }
	/* gouttières de 16 px : « La Celle-Saint-Cloud » reste sur une ligne en 375 px */
	.ce-lieux__ville { font-size: 7.6cqi; }
	/* sous-titres plus petits (Mélanie, 14/09) */
	.ce-lieux__nom { font-size: var(--wp--preset--font-size--description); }
	.ce-lieux__cta { margin-right: 0; }
	/* piste figée : textes remontés de la part qui peut passer sous la barre du navigateur dépliée */
	.ce-lieux.is-anime .ce-lieux__infos { padding-bottom: calc(var(--ce-gouttiere) + var(--ce-ecran-masque, 0px)); }

	/* dégradé noir de 20 % sous les textes, lisibles sur les photos claires (Mélanie, 14/09) ;
	   après la photo dans le même plan (z-index -1), donc peint par-dessus */
	.ce-lieux__panel::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: -1;
		height: 60%;
		background: linear-gradient(to top, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0));
		pointer-events: none;
	}
}

/* piste horizontale, activée par l'animation, desktop et mobile (Mélanie, 14/09 au soir) ;
   mobile : hauteur d'écran posée par animations.js (--ce-ecran-h), 100svh sinon ; cartes à la hauteur
   de la piste et non de la fenêtre, sinon texte et bouton coupés quand la barre du navigateur se replie
   (iPhone, 15/09) */
.ce-lieux.is-anime .ce-lieux__viewport {
	height: var(--ce-ecran-h, 100svh);
	overflow: hidden;
}

.ce-lieux.is-anime .ce-lieux__track {
	display: flex;
	width: max-content;
	height: 100%;
}

.ce-lieux.is-anime .ce-lieux__panel {
	width: 100vw;
	height: 100%;
	min-height: 0;
	flex: 0 0 auto;
}

/* tablette tactile en paysage : textes remontés de la part cachée par la barre du navigateur dépliée */
@media (min-width: 1024px) {
	.ce-lieux.is-anime .ce-lieux__infos { padding-bottom: calc(0.9375rem + var(--ce-ecran-masque, 0px)); }
}

/* 2 px en haut de la piste, gouttières de 16 px ; remplissage piloté par l'animation */
.ce-lieux.is-anime .ce-lieux__progression {
	display: block;
	position: absolute;
	z-index: 2;
	top: var(--ce-gouttiere);
	left: var(--ce-gouttiere);
	right: var(--ce-gouttiere);
	height: 2px;
	background: rgb(255 255 255 / 0.35);
}

.ce-lieux.is-anime .ce-lieux__progression span {
	display: block;
	height: 100%;
	background: var(--ce-blanc);
	transform-origin: left center;
}

/* -------------------------------------------------------------------------
   Développer le local, fond 185:1725 (1 440 × 1 669) : titre, intro à filet
   doré, cinq engagements en quinconce, un tous les 192 px
   ------------------------------------------------------------------------- */
.ce-developper {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	background: var(--ce-nuit);
	color: var(--ce-blanc);
}

.ce-developper__inner {
	padding: 5rem var(--ce-gouttiere) 4.5rem;
}

.ce-developper__titre {
	margin: 0;
	color: var(--ce-blanc);
	font-size: var(--wp--preset--font-size--titre);
}

/* filet vertical #C6A15B de 109 px, 24 px à gauche du texte, 11 px au-dessus */
.ce-developper__intro {
	position: relative;
	max-width: calc(24px + 37.25rem);
	min-height: 109px;
	margin: 3rem 0 0;
	padding: 11px 0 0 24px;
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.3;
}

.ce-developper__intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 109px;
	background: var(--ce-or-fonce); /* or du logo (Pauline, 15/09 : plus de jaune) */
	/* --filet : tracé du filet, animé de 0 à 1 ; 1 sans animation */
	transform: scaleY(var(--filet, 1));
	transform-origin: top center;
}

.ce-developper__liste {
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2rem;
}

.ce-developper__item {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	align-items: center;
	column-gap: 1rem;
}

.ce-developper__numero {
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--titre);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap; /* chiffres du rouleau en inline-block : pas de retour entre eux (01 cassé, 15/09) */
}

.ce-developper__texte {
	margin: 0;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.3;
}

/* compteur à rouleau du numéro (animations.js) : un masque par chiffre, colonne de 0 à la valeur */
.ce-roue {
	display: inline-block;
	overflow: hidden;
	height: 1.3em;
	vertical-align: top;
}

.ce-roue__col { display: flex; flex-direction: column; }

.ce-roue__col > span {
	display: block;
	height: 1.3em;
	line-height: 1.3;
}

@media (min-width: 1024px) {
	.ce-developper__inner {
		/* dernier engagement fini à y 1 558, section de 1 669 */
		padding: calc(169 * var(--u)) 0 calc(111 * var(--u));
	}

	.ce-developper__titre { margin-left: calc(135 * var(--u)); }

	.ce-developper__intro {
		max-width: calc(24px + 596 * var(--u));
		/* maquette du 14/09 au soir : filet à y 465, 67 px sous la boîte du titre (13 le matin) */
		margin: calc(67 * var(--u)) 0 0 calc(231 * var(--u));
	}

	.ce-developper__liste {
		/* engagement 01 à y 686, puis un tous les 192 px, sauf 182 entre 03 et 04 */
		margin-top: calc(112 * var(--u));
		gap: calc(78 * var(--u));
	}

	.ce-developper__item:nth-child(4) { margin-top: calc(-10 * var(--u)); }

	/* x du numéro, décalage du texte, largeur du texte : valeurs de la maquette */
	.ce-developper__item {
		display: flex;
		align-items: center;
		column-gap: 0;
		min-height: calc(114 * var(--u));
		margin-left: calc(var(--x) * var(--u));
	}

	.ce-developper__numero { flex: 0 0 calc(var(--t) * var(--u)); }

	.ce-developper__texte {
		position: relative;
		top: 3px;
		width: max(16rem, calc(var(--w) * var(--u)));
	}

	.ce-developper__item:nth-child(1) { --x: 732; --t: 120; --w: 413; }
	.ce-developper__item:nth-child(2) { --x: 493; --t: 146; --w: 427; }
	.ce-developper__item:nth-child(3) { --x: 719; --t: 146; --w: 463; }
	.ce-developper__item:nth-child(4) { --x: 493; --t: 146; --w: 463; }
	.ce-developper__item:nth-child(5) { --x: 732; --t: 146; --w: 463; }
}

/* -------------------------------------------------------------------------
   Photo du territoire, 185:1743 (1 440 × 900)
   ------------------------------------------------------------------------- */
.ce-territoire {
	margin: 0;
	overflow: hidden; /* zoom de la photo au scroll, contenu dans la figure */
	background: var(--ce-nuit);
}

.ce-territoire__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 900;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   Notre rôle, 185:1741 : boîte de 1 169 px centrée, 157 px sous la photo,
   199 px au-dessus de Nos valeurs
   ------------------------------------------------------------------------- */
.ce-role {
	background: var(--ce-blanc);
	/* placé entre Développer et la photo depuis le 15/09 (Pauline et Steve : la phrase se lit avec Développer) */
	padding: max(4rem, calc(157 / 1440 * 100vw)) var(--ce-gouttiere) max(4rem, calc(157 / 1440 * 100vw));
}

.ce-role__phrase {
	max-width: 1169px;
	margin: 0 auto;
	color: var(--ce-encre);
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--sous-titre); /* phrase, pas un titre : casse normale, un cran de moins (Pauline et Steve, 15/09) */
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.ce-role__accent { color: var(--ce-or-fonce); }

/* -------------------------------------------------------------------------
   Nos valeurs, titre 185:1748 et blocs 185:2260, 185:1781, 185:1751, 185:1785.
   Desktop : chaque bloc reprend les positions de la maquette (unité --u),
   photos rognées au bord droit (écart assumé). IAgility aligné sur 135 px.
   ------------------------------------------------------------------------- */
.ce-approche {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	background: var(--ce-blanc);
	color: var(--ce-encre);
	padding: 0 var(--ce-gouttiere) 4rem;
	overflow: hidden;
}

.ce-approche__titre {
	margin: 0 0 2.5rem;
	color: var(--ce-encre);
	font-size: var(--wp--preset--font-size--hero);
}

.ce-approche__bloc {
	margin: 0 0 3.5rem;
	display: grid;
	gap: 1.5rem;
}

.ce-approche__bloc:last-child { margin-bottom: 0; }

.ce-approche__media { margin: 0; overflow: hidden; } /* la photo recule à l'entrée */

.ce-approche__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* filet #C6A15B de 215 px, 31 px au-dessus de l'intitulé */
.ce-approche__pilier {
	position: relative;
	margin: 0 0 1rem;
	padding-top: 1.9375rem;
	color: var(--ce-encre);
	font-size: var(--wp--preset--font-size--section);
}

.ce-approche__pilier::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(215px, 60%);
	height: 1px;
	background: var(--ce-or-clair);
}

.ce-approche__texte p {
	max-width: 32rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.3;
}

@media (min-width: 1024px) {
	.ce-approche {
		padding: 0 0 calc(230 / 1440 * 100vw);
	}

	/* pleine largeur depuis le 15/09 : de gouttière à gouttière, centré, même respiration que Nos cinq lieux
	   (la marge de 136 px de la maquette plaçait un titre de 120 px et laissait tout le blanc à gauche) */
	.ce-approche__titre {
		margin: 0 var(--ce-gouttiere);
		padding: max(4rem, calc(182 / 1440 * 100vw)) 0 max(2rem, calc(96 / 1440 * 100vw));
		text-align: center;
	}

	.ce-approche__bloc {
		display: block;
		position: relative;
		height: calc(var(--h) * var(--u));
		margin: calc(var(--haut) * var(--u)) 0 0;
	}

	.ce-approche__bloc:last-child { margin-bottom: 0; }

	.ce-approche__media {
		position: absolute;
		top: 0;
		left: calc(var(--px) * var(--u));
		width: calc(var(--pw) * var(--u));
		height: 100%;
	}

	.ce-approche__media img { height: 100%; }

	/* taille à l'échelle de la mise en page (64 px à 1 440, plafond du thème au-delà) : avec la taille fluide
	   seule, « Générosité opérationnelle » recouvrait sa photo de 79 px sur iPad 1 180 et 93 px à 1 024, contre
	   53 px dessinés à 1 440 ; le recouvrement garde la proportion de la maquette (Steve, 15/09) */
	.ce-approche__pilier {
		position: absolute;
		top: calc(var(--iy) * var(--u));
		left: calc(var(--ix) * var(--u));
		width: calc(var(--iw) * var(--u));
		margin: 0;
		padding: 0;
		font-size: min(var(--wp--preset--font-size--section), calc(64 * var(--u)));
	}

	.ce-approche__pilier::before {
		top: calc(-31 * var(--u));
		left: -1px;
		width: 215px;
	}

	.ce-approche__texte p {
		position: absolute;
		top: calc(var(--ty) * var(--u));
		left: calc(var(--tx) * var(--u));
		width: max(15rem, calc(333 * var(--u)));
		max-width: none;
	}

	/* hauteur, marge au-dessus, photo (x, largeur), intitulé (x, y, largeur), texte (x, y) */
	/* Générosité : photo à x 732 au lieu de 655, bord droit inchangé (1 509) : l'intitulé ne passe plus dessus
	   (53 px dessinés à 1 440, 79 px sur iPad ; Steve, 15/09 : « on ne veut pas »), aligné sur l'intitulé suivant */
	.ce-approche__bloc--generosite { --h: 556; --haut: 112; --px: 732; --pw: 777; --ix: 136; --iy: 147; --iw: 660; --tx: 256; --ty: 339; }
	.ce-approche__bloc--entrepreneurial { --h: 600; --haut: 235; --px: 0; --pw: 708; --ix: 732; --iy: 149; --iw: 667; --tx: 972; --ty: 366; }
	/* IAgility : intitulé à x 16 et texte à x 135 comme dans la maquette ; alignés sur 135 et 255 (décision 14),
	   le texte recouvrait la photo, plus large et plus à gauche que les autres, de 53 px (14/09) */
	.ce-approche__bloc--iagility { --h: 588; --haut: 72; --px: 535; --pw: 947; --ix: 16; --iy: 257; --iw: 660; --tx: 135; --ty: 386; }
	.ce-approche__bloc--joie { --h: 600; --haut: 203; --px: 0; --pw: 708; --ix: 851; --iy: 93; --iw: 533; --tx: 970; --ty: 311; }
}

/* -------------------------------------------------------------------------
   Fondateurs, cadre 185:3916 (1 440 × 2 882) : fond #00475F, titre, intro à
   filet blanc, constellation de 5 portraits et citation. Desktop : galerie au
   ratio du cadre, positions de la maquette (unité --u).
   ------------------------------------------------------------------------- */
.ce-fondateurs {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	background: var(--ce-bleu);
	color: var(--ce-blanc);
	padding: 5rem var(--ce-gouttiere) 4rem;
}

.ce-fondateurs__titre {
	margin: 0;
	color: var(--ce-blanc);
	font-size: var(--wp--preset--font-size--hero);
}

/* filet blanc de 214 px, texte 27 px dessous */
.ce-fondateurs__intro {
	position: relative;
	max-width: 334px;
	margin: 2rem 0 3rem;
	padding-top: 27px;
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.3;
}

.ce-fondateurs__intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: min(214px, 64%);
	height: 1px;
	background: var(--ce-blanc);
}

.ce-fondateurs__galerie {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1rem;
}

.ce-fondateurs__portrait { margin: 0; }

.ce-fondateurs__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 334 / 455;
	object-fit: cover;
}

/* LinkedIn au survol de la photo (Pauline, 15/09) : toute la photo est le lien, l'icône apparaît au survol
   ou au focus ; sans survol (tactile), elle reste visible. */
.ce-fondateurs__lien {
	position: relative;
	display: block;
	overflow: hidden; /* la photo recule à l'entrée */
	color: inherit;
	text-decoration: none;
}

.ce-fondateurs__linkedin {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ce-blanc);
	color: var(--ce-bleu);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ce-fondateurs__linkedin svg { width: 20px; height: 20px; }

.ce-fondateurs__lien:hover .ce-fondateurs__linkedin,
.ce-fondateurs__lien:focus-visible .ce-fondateurs__linkedin { opacity: 1; }

.ce-fondateurs__lien:focus-visible { outline: 2px solid var(--ce-blanc); outline-offset: 3px; }

@media (hover: none) {
	.ce-fondateurs__linkedin { opacity: 1; }
}

/* légende 23 px sous la photo : nom Geist 24 en capitales, fonction Geist 20 */
.ce-fondateurs__portrait figcaption {
	display: grid;
	margin-top: 23px;
}

.ce-fondateurs__nom {
	font-size: var(--wp--preset--font-size--carte);
	line-height: 1.3;
	text-transform: uppercase;
}

.ce-fondateurs__fonction {
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.3;
}

.ce-fondateurs__citation {
	grid-column: 1 / -1;
	margin: 1rem 0;
	padding: 0;
	border: 0;
}

.ce-fondateurs__citation p {
	margin: 0;
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--sous-titre); /* « trop gros, pas épuré » (Pauline, 15/09) : un cran de moins, casse normale */
	font-weight: 700;
	line-height: 1.3;
}

.ce-fondateurs__accent { color: var(--ce-or-clair); }

/* mobile : Vincent Rautureau avant la citation (Mélanie, 14/09) ; en desktop, positions absolues */
@media (max-width: 1023.98px) {
	.ce-fondateurs__citation { order: 1; }
}

@media (min-width: 1024px) {
	.ce-fondateurs {
		display: grid;
		padding: 0;
	}

	.ce-fondateurs__entete,
	.ce-fondateurs__galerie { grid-area: 1 / 1; }

	.ce-fondateurs__entete {
		position: relative;
		padding: calc(203 * var(--u)) 0 0 calc(135 * var(--u));
	}

	.ce-fondateurs__titre { max-width: calc(1159 * var(--u)); }

	.ce-fondateurs__intro {
		position: absolute;
		top: calc(592 * var(--u));
		left: calc(374 * var(--u));
		width: max(15rem, calc(334 * var(--u)));
		margin: 0;
	}

	.ce-fondateurs__intro::before { width: 214px; }

	.ce-fondateurs__galerie {
		display: block;
		position: relative;
		aspect-ratio: 1440 / 2882;
		pointer-events: none;
	}

	.ce-fondateurs__portrait,
	.ce-fondateurs__citation {
		position: absolute;
		pointer-events: auto;
	}

	.ce-fondateurs__portrait { width: calc(334 * var(--u)); }

	.ce-fondateurs__portrait--omeny { left: calc(960 * var(--u)); top: calc(734 * var(--u)); }
	.ce-fondateurs__portrait--amar { left: calc(135 * var(--u)); top: calc(1001 * var(--u)); }
	.ce-fondateurs__portrait--lienard { left: calc(493 * var(--u)); top: calc(1182 * var(--u)); }
	.ce-fondateurs__portrait--graziani { left: calc(960 * var(--u)); top: calc(1449 * var(--u)); }
	.ce-fondateurs__portrait--rautureau { left: calc(851 * var(--u)); top: calc(2111 * var(--u)); }

	.ce-fondateurs__citation {
		left: calc(135 * var(--u));
		top: calc(1867 * var(--u));
		width: calc(573 * var(--u));
		margin: 0;
	}
}

/* -------------------------------------------------------------------------
   Chaque lieu, 185:1794 : boîte de 1 408 px, 249 px sous les Fondateurs,
   246 px au-dessus de Discutons
   ------------------------------------------------------------------------- */
.ce-emotion {
	background: var(--ce-blanc);
	padding: max(4rem, calc(249 / 1440 * 100vw)) var(--ce-gouttiere) max(4rem, calc(246 / 1440 * 100vw));
}

.ce-emotion__texte {
	max-width: 1408px;
	margin: 0 auto;
	color: var(--ce-encre);
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--section); /* phrase, pas un titre : casse normale, un cran de moins (15/09) */
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.ce-emotion__accent { color: var(--ce-or-fonce); }

/* -------------------------------------------------------------------------
   Discutons : photo 185:1724 voilée à 40 %, titre 185:1750 à droite, carte
   blanche 185:2769 (572 × 824 à x 851) qui déborde de 85 px sur le footer
   ------------------------------------------------------------------------- */
.ce-contact {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	position: relative;
	z-index: 2;
	padding: 4rem var(--ce-gouttiere) 0;
	color: var(--ce-blanc);
}

.ce-contact__bgwrap {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--ce-nuit);
}

.ce-contact__bgwrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.4);
}

/* recadrage : zone visible de la maquette en haut de l'image */
.ce-contact__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.ce-contact__inner {
	position: relative;
	max-width: 36rem;
	margin-left: auto;
}

/* bas des lettres 6 px sous le haut de la carte, qui passe devant */
.ce-contact__titre {
	position: relative;
	margin: 0 0 -0.3455em;
	padding-left: 24px;
	color: var(--ce-blanc);
	font-size: var(--wp--preset--font-size--titre);
}

.ce-contact__form {
	position: relative;
	z-index: 1;
	margin-bottom: -3rem;
	padding: 2.5rem 1.25rem;
	background: var(--ce-blanc);
	color: var(--ce-encre);
}

@media (min-width: 1024px) {
	/* propriété de la section elle-même : cqi n'y a pas de conteneur ancêtre, d'où vw */
	.ce-contact { padding: calc(120 / 1440 * 100vw) 0 0; }

	.ce-contact__inner {
		width: calc(572 * var(--u));
		max-width: none;
		margin-left: calc(851 * var(--u));
	}

	.ce-contact__titre { padding-left: calc(24 * var(--u)); }

	.ce-contact__form {
		margin-bottom: -85px;
		padding: 90px calc(58 * var(--u)) 89px;
	}
}

/* Gravity Forms (thème Orbit) : libellés Geist 16, champs à contour 1 px #1C1C1C sans rayon */
.ce-contact .gform_wrapper {
	--gf-color-primary: var(--ce-or-fonce);
	--gf-ctrl-border-color: var(--ce-encre);
	--gf-ctrl-radius: 0;
	--gf-ctrl-shadow: none;
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-bg-color-primary: var(--ce-or-fonce);
	--gf-ctrl-btn-bg-color-hover-primary: var(--ce-or-fonce);
	--gf-ctrl-btn-border-color-primary: var(--ce-or-fonce);
	--gf-ctrl-btn-color-primary: var(--ce-encre);
	--gf-ctrl-btn-color-hover-primary: var(--ce-encre);
	/* bouton « Envoyer » 132 × 42, Geist 18 */
	--gf-ctrl-btn-font-family: var(--ce-corps);
	--gf-ctrl-btn-font-size: var(--wp--preset--font-size--texte);
	--gf-ctrl-btn-font-weight: 400;
	--gf-ctrl-btn-line-height: 1.3;
	--gf-ctrl-btn-letter-spacing: 0;
	--gf-ctrl-btn-text-transform: none;
	--gf-ctrl-btn-padding-x: 0;
	--gf-ctrl-btn-size: 42px;
	margin: 0;
	font-family: var(--ce-corps);
}

/* mention « (obligatoire) » discrète ; la légende « * » est redondante avec elle */
.ce-contact .gform_wrapper .gfield_required {
	margin-left: 0.25em;
	color: inherit;
	font-size: 0.875em;
	font-weight: 400; /* Geist n'est chargée qu'en 400 : Orbit met 500, donc un gras synthétique */
}

.ce-contact .gform_wrapper .gform_required_legend { display: none; }

.ce-contact .gform_wrapper .gform_fields {
	row-gap: 14px;
}

.ce-contact .gform_wrapper .gfield_label,
.ce-contact .gform_wrapper .gform-field-label--type-inline {
	margin: 0;
	color: var(--ce-encre);
	font-family: var(--ce-corps);
	font-size: var(--wp--preset--font-size--description);
	font-weight: 400;
	line-height: 1.3;
}

.ce-contact .gform_wrapper .gfield_label { margin-bottom: 13px; }

.ce-contact .gform_wrapper input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]),
.ce-contact .gform_wrapper textarea {
	width: 100%;
	height: 48px;
	padding: 0 0.75rem;
	border: 1px solid var(--ce-encre);
	border-radius: 0;
	box-shadow: none;
	background: var(--ce-blanc);
	color: var(--ce-encre);
	font-family: var(--ce-corps);
	font-size: var(--wp--preset--font-size--description);
}

.ce-contact .gform_wrapper.gform-theme--framework textarea.textarea {
	height: 129px;
	min-block-size: 129px;
	max-block-size: none;
	padding: 0.75rem;
	resize: vertical;
}

.ce-contact .gform_wrapper .gfield--type-checkbox { margin-top: 17px; }

.ce-contact .gform_wrapper .gfield_checkbox {
	display: grid;
	gap: 14px;
}

.ce-contact .gform_wrapper .gchoice,
.ce-contact .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ce-contact .gform_wrapper input[type="checkbox"] {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--ce-encre);
	border-radius: 0;
	box-shadow: none;
}

/* bouton centré dans la carte (Mélanie, 14/09 : décalé à gauche dans la maquette par erreur) */
.ce-contact .gform_wrapper .gform_footer {
	display: flex;
	justify-content: center;
	margin: 20px 0 0;
	padding: 0;
}

.ce-contact #gform_wrapper_1 .gform_footer .gform_button {
	/* sélecteur à identifiant : les règles du thème Orbit enchaînent assez de classes pour battre une règle à classes seules */
	--gf-local-font-family: var(--ce-corps);
	--gf-local-font-size: var(--wp--preset--font-size--texte);
	--gf-local-font-weight: 400;
	--gf-local-line-height: 1.3;
	--gf-local-height: 42px;
	--gf-local-min-height: 42px;
	--gf-local-min-width: 132px;
	--gf-local-padding-x: 0;
	--gf-local-padding-y: 0;
	width: 132px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ce-or-fonce);
	color: var(--ce-encre);
	font-family: var(--ce-corps);
	font-size: var(--wp--preset--font-size--texte);
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.ce-contact #gform_wrapper_1 .gform_footer .gform_button:hover,
.ce-contact #gform_wrapper_1 .gform_footer .gform_button:focus-visible {
	filter: brightness(1.08);
}

@media (min-width: 1024px) {
	/* bouton à 139 px du bord gauche des champs */
	.ce-contact .gform_wrapper .gform_footer { padding-left: 0; }
}

/* -------------------------------------------------------------------------
   Footer 185:1727 (1 440 × 1 016), état final 185:3428 : logo centré à y 61,
   lieux et réseaux à y 271, liens à y 424, wordmark à y 813 rogné de 17 px
   ------------------------------------------------------------------------- */
.ce-footer {
	--u: calc(100cqi / 1440);
	container-type: inline-size;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: calc(3rem + 2.5rem) var(--ce-gouttiere) 0;
	background: var(--ce-nuit);
	color: var(--ce-blanc);
}

.ce-footer a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.ce-footer a:hover,
.ce-footer a:focus-visible { text-decoration: underline; }

.ce-footer__brand {
	display: flex;
	justify-content: center;
}

.ce-footer__brand img {
	display: block;
	width: clamp(120px, 14.93vw, 215px);
	height: auto;
}

.ce-footer__grid {
	display: grid;
	gap: 3rem;
	margin-top: 3rem;
}

/* titres en Geist capitales (décision 7) */
.ce-footer__heading {
	max-width: 304px;
	margin: 0 0 2rem;
	color: var(--ce-blanc);
	font-family: var(--ce-corps);
	font-size: clamp(1.5rem, 1.33rem + 0.75vw, 2rem);
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
}

.ce-footer__colonnes {
	display: grid;
	gap: 1.3em 13px;
}

/* une ligne vide entre deux liens */
.ce-footer__list {
	display: grid;
	gap: 1.3em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--description);
	line-height: 1.3;
}

.ce-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin: 3rem 0 2rem;
	font-size: var(--wp--preset--font-size--description);
	line-height: 1.3;
}

.ce-footer__legal p { margin: 0; }

.ce-footer__wordmark {
	margin: auto calc(-1 * var(--ce-gouttiere)) 0;
	line-height: 0;
}

/* même texte et même corps que le wordmark du hero (260 sur 1 440), ligne de base rognée sous le pli
   comme l'image de la maquette (17 px sur 220), l'oméga collé au L */
.ce-footer__wordmark {
	overflow: hidden;
	text-align: center;
}

.ce-footer__wordmark-texte {
	display: block;
	margin: 0 auto calc(-64 / 1440 * 100%);
	font-family: var(--ce-titres);
	font-size: calc(260 * var(--u));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ce-blanc);
}

.ce-footer__wordmark-texte .ce-omega {
	padding: 0;
	margin: 0 0.04em 0 -0.015em;
}

.ce-footer__wordmark-texte .ce-omega::after { inset: 0.25em 0; }

@media (min-width: 1024px) {
	/* toute la hauteur de l'écran, contenu entier visible (Mélanie, 14/09) : espacements de la maquette
	   à 1 440 × 900, resserrés par la hauteur quand l'écran est plus bas ; le wordmark reste au pied */
	.ce-footer {
		min-height: 100svh;
		padding: min(calc(61 / 1440 * 100vw), 6.8svh) 0 0;
	}

	.ce-footer__brand img {
		width: auto;
		height: min(152px, calc(152 / 1440 * 100vw), 16.9svh);
	}

	.ce-footer__grid {
		grid-template-columns: calc(1072 * var(--u)) calc(304 * var(--u));
		gap: 0;
		margin-top: min(calc(58 * var(--u)), 6.4svh); /* logo V1 de 152 px, 150 dans la maquette */
		padding-left: calc(18 * var(--u));
	}

	.ce-footer__heading {
		max-width: none;
		width: calc(304 * var(--u));
		margin-bottom: min(calc(69 * var(--u)), 7.7svh);
	}

	.ce-footer__colonnes {
		grid-template-columns: calc(211 * var(--u)) calc(213 * var(--u)) calc(213 * var(--u));
		column-gap: calc(13 * var(--u));
	}

	.ce-footer__legal {
		margin: min(calc(40 * var(--u)), 4.4svh) 0 min(2rem, 3svh) calc(18 * var(--u));
	}

	.ce-footer__wordmark { margin: auto 0 0; }
}

/* -------------------------------------------------------------------------
   Pages internes (mentions légales, 404) : bandeau bleu nuit sous l'en-tête en surimpression,
   titre en capitales avec l'oméga, texte sur une colonne de lecture (contentSize 720)
   ------------------------------------------------------------------------- */
.ce-page__entete {
	padding: calc(clamp(1.25rem, 2.5vw, 2.25rem) + 10.5rem) var(--ce-gouttiere) clamp(2.5rem, 6vw, 5rem);
	background: var(--ce-nuit);
	color: var(--ce-blanc);
}

.ce-page__titre {
	max-width: 1120px;
	margin: 0 auto;
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ce-page__contenu {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--ce-gouttiere) clamp(4rem, 8vw, 7rem);
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.5;
	color: var(--ce-encre);
}

.ce-page__contenu > * { margin: 0 0 1.25em; }

.ce-page__contenu h2 {
	margin: 2.5em 0 0.75em;
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--carte);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ce-bleu);
}

.ce-page__contenu h2:first-child { margin-top: 0; }

.ce-page__contenu h3 {
	margin: 1.75em 0 0.5em;
	font-size: var(--wp--preset--font-size--intro);
	font-weight: 700;
	line-height: 1.3;
}

.ce-page__contenu ul,
.ce-page__contenu ol { padding-left: 1.25em; }

.ce-page__contenu li { margin-bottom: 0.4em; }

.ce-page__contenu a {
	color: var(--ce-bleu);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ce-page__contenu a:hover,
.ce-page__contenu a:focus-visible { color: var(--ce-or-fonce); }

.ce-page__contenu strong { font-weight: 700; }

/* 404 */
.ce-404 .ce-page__contenu { text-align: center; }

.ce-404__code {
	margin: 0 0 1rem;
	font-family: var(--ce-titres);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1;
	color: var(--ce-or-fonce);
}

.ce-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	min-height: 42px;
	padding: 0 1.5rem;
	background: var(--ce-or-fonce);
	color: var(--ce-encre);
	font-family: var(--ce-corps);
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.3;
	text-decoration: none;
}

.ce-page__contenu a.ce-bouton { color: var(--ce-encre); text-decoration: none; }

.ce-bouton:hover,
.ce-bouton:focus-visible { filter: brightness(1.08); }