/* =============================================================================
   Qui Veut Rafraîchir Sa Ville : site public
   Feuille de style unique. Charte stricte : Montserrat (titres) + Inter (corps),
   bleu #377EED, vert #62D652, bleu profond #0F56A5, orange #E95722.

   Les valeurs de texte sont dérivées des couleurs de marque pour atteindre le
   contraste WCAG AA (4.5:1) : le bleu et le vert de marque servent d'aplats et
   de grands caractères, jamais de texte courant.

   Sommaire
     01. Jetons (couleurs, typo, espacement, ombres)
     02. Socle (reset, typographie, conteneurs)
     03. Matière (grain, courbes de niveau, dégradés)
     04. En-tête et navigation
     05. Boutons et liens
     06. Sections et titres
     07. Héros
     08. Composants : cartes, statistiques, étapes, preuves, FAQ, avant/après
     09. Pied de page
     10. Mouvement (apparitions, compteurs) + prefers-reduced-motion
     11. Responsive
   ========================================================================== */

/* == 01. JETONS ============================================================ */
:root {
	/* --- couleurs de marque (intangibles) --- */
	--bleu:            #377EED;
	--vert:            #62D652;
	--bleu-profond:    #0F56A5;
	--orange:          #E95722;

	/* --- dérivées, calées sur le contraste AA --- */
	--bleu-lien:       #0B4C93;   /* 8.50:1 sur blanc */
	--bleu-nuit:       #0A1830;   /* fond sombre, blanc à 17.7:1 */
	--bleu-nuit-2:     #071630;
	--vert-texte:      #1B6E10;   /* 6.39:1, chiffres et accents lisibles */
	--vert-fonce:      #4CBF3E;   /* survol des aplats verts */
	--orange-texte:    #A83C15;   /* 6.32:1 */
	--encre:           #0E1B2E;   /* texte courant, 17.3:1 */
	--encre-douce:     #4A5B70;   /* texte secondaire, 6.95:1 */
	--encre-tres-douce:#7C8BA0;   /* légendes, crédits */

	/* --- surfaces --- */
	--blanc:           #FFFFFF;
	--brume:           #F5F8FC;   /* section alternée */
	--brume-2:         #EDF3FA;
	--trait:           #DFE7F0;   /* filets et bordures */
	--trait-fort:      #C6D5E6;

	/* --- teintes translucides de marque (aplats doux) --- */
	--voile-bleu:      rgba(55, 126, 237, 0.08);
	--voile-vert:      rgba(98, 214, 82, 0.14);
	--voile-orange:    rgba(233, 87, 34, 0.09);

	/* --- typographie --- */
	--titre: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--corps: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* échelle fluide, ratio ~1.25 resserré sur mobile */
	--t-xs:   0.8125rem;                          /* 13px  */
	--t-sm:   0.9375rem;                          /* 15px  */
	--t-base: 1.0625rem;                          /* 17px  */
	--t-md:   clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
	--t-lg:   clamp(1.1875rem, 1.06rem + 0.62vw, 1.4375rem);
	--t-xl:   clamp(1.375rem, 1.19rem + 0.9vw, 1.75rem);
	--t-2xl:  clamp(1.625rem, 1.32rem + 1.5vw, 2.25rem);
	--t-3xl:  clamp(1.9375rem, 1.44rem + 2.4vw, 3rem);
	--t-4xl:  clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
	--t-5xl:  clamp(2.5rem, 1.42rem + 5.2vw, 5rem);

	/* --- espacement (base 4) --- */
	--e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
	--e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
	--e-9: 6rem;
	--section-y: clamp(4rem, 7vw, 7.5rem);

	/* --- rayons --- */
	--r-sm: 10px;  --r: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

	/* --- ombres : multi-couches, teintées de bleu de marque --- */
	--ombre-xs: 0 1px 2px rgba(11, 34, 66, 0.05);
	--ombre-sm: 0 1px 2px rgba(11, 34, 66, 0.05),
	            0 3px 8px rgba(11, 34, 66, 0.05);
	--ombre:    0 1px 2px rgba(11, 34, 66, 0.05),
	            0 6px 16px rgba(11, 34, 66, 0.07),
	            0 12px 32px rgba(15, 86, 165, 0.05);
	--ombre-lg: 0 2px 4px rgba(11, 34, 66, 0.05),
	            0 12px 28px rgba(11, 34, 66, 0.09),
	            0 28px 64px rgba(15, 86, 165, 0.10);
	--ombre-xl: 0 4px 8px rgba(11, 34, 66, 0.06),
	            0 20px 48px rgba(11, 34, 66, 0.12),
	            0 48px 96px rgba(15, 86, 165, 0.14);

	--transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-lent: 560ms cubic-bezier(0.22, 1, 0.36, 1);

	--largeur: 1180px;
	--largeur-large: 1320px;
	--largeur-texte: 68ch;
	--nav-h: 74px;
}

/* == 02. SOCLE ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--corps);
	font-size: var(--t-base);
	line-height: 1.65;
	color: var(--encre);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4, h5 {
	font-family: var(--titre);
	color: var(--bleu-profond);
	line-height: 1.1;
	letter-spacing: -0.018em;
	margin: 0;
	text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--vert); color: #062B10; }

:focus-visible {
	outline: 3px solid var(--bleu);
	outline-offset: 3px;
	border-radius: 6px;
}

/* accès clavier : le lien d'évitement */
.saut {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--bleu-profond); color: #fff;
	padding: 0.85rem 1.4rem; border-radius: 0 0 var(--r-sm) 0;
	font-weight: 700;
}
.saut:focus { left: 0; }

.enveloppe { width: min(92%, var(--largeur)); margin-inline: auto; }
.enveloppe--large { width: min(94%, var(--largeur-large)); margin-inline: auto; }
.enveloppe--etroit { width: min(92%, 860px); margin-inline: auto; }

.centre { text-align: center; }
.mesure { max-width: var(--largeur-texte); }
.centre .mesure { margin-inline: auto; }

/* utile aux lecteurs d'écran uniquement */
.lecteur-seul {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* == 03. MATIÈRE =========================================================== */
/* Grain très fin : casse le côté « aplat numérique » des grandes surfaces
   colorées, sans coût réseau (SVG en ligne, ~0,3 Ko). */
.grain::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	opacity: 0.5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Courbes de niveau : le motif de marque. Évoque l'eau qui s'infiltre et les
   lignes topographiques d'un terrain. Purement décoratif, en CSS pur. */
.courbes { position: relative; overflow: hidden; }
.courbes::before {
	content: ''; position: absolute; inset: -10% -5%; pointer-events: none;
	background-image:
		radial-gradient(ellipse 62% 44% at 18% 22%, transparent 39%, var(--voile-bleu) 40%, transparent 41.6%),
		radial-gradient(ellipse 62% 44% at 18% 22%, transparent 52%, var(--voile-bleu) 53%, transparent 54.6%),
		radial-gradient(ellipse 62% 44% at 18% 22%, transparent 65%, var(--voile-bleu) 66%, transparent 67.6%),
		radial-gradient(ellipse 54% 40% at 86% 78%, transparent 43%, var(--voile-vert) 44%, transparent 45.6%),
		radial-gradient(ellipse 54% 40% at 86% 78%, transparent 58%, var(--voile-vert) 59%, transparent 60.6%);
	opacity: 0.85;
}
.courbes > * { position: relative; z-index: 1; }

/* == 04. EN-TÊTE ET NAVIGATION ============================================ */
.entete {
	position: sticky; top: 0; z-index: 900;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition),
	            background var(--transition);
}
.entete.est-defile {
	border-bottom-color: var(--trait);
	box-shadow: 0 1px 0 rgba(11, 34, 66, 0.03), 0 8px 28px rgba(11, 34, 66, 0.06);
	background: rgba(255, 255, 255, 0.93);
}

.entete-interne {
	width: min(94%, var(--largeur-large)); margin-inline: auto;
	min-height: var(--nav-h);
	display: flex; align-items: center; gap: var(--e-5);
}

.marque { display: flex; align-items: center; flex: none; }
.marque img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-lien {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 0.6rem 0.9rem; border-radius: var(--r-sm);
	font-weight: 600; font-size: var(--t-sm); color: var(--encre);
	white-space: nowrap; cursor: pointer; background: none; border: 0;
	position: relative; transition: color var(--transition);
}
/* soulignement qui se déploie depuis le centre */
.nav-lien::after {
	content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
	height: 2px; border-radius: 2px; background: var(--bleu);
	transform: scaleX(0); transform-origin: center;
	transition: transform var(--transition);
}
.nav-lien:hover, .nav-lien[aria-expanded="true"] { color: var(--bleu-profond); }
.nav-lien:hover::after, .nav-lien[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-lien.est-actif { color: var(--bleu-profond); }
.nav-lien.est-actif::after { transform: scaleX(1); background: var(--vert); }

.chevron {
	width: 7px; height: 7px; flex: none; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); opacity: 0.55;
	transition: transform var(--transition);
}
.nav-lien[aria-expanded="true"] .chevron { transform: rotate(-135deg); margin-top: 2px; }

.nav-groupe { position: relative; }
.nav-volet {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 20;
	min-width: 330px; padding: var(--e-2);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--trait); border-radius: var(--r-lg);
	box-shadow: var(--ombre-xl);
	opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.985);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.nav-groupe:hover > .nav-volet,
.nav-groupe:focus-within > .nav-volet,
.nav-volet.est-ouvert { opacity: 1; visibility: visible; transform: none; }

.nav-volet a {
	display: block; padding: 0.7rem 0.85rem; border-radius: var(--r-sm);
	transition: background var(--transition);
}
.nav-volet a:hover { background: var(--brume); }
.nav-volet b {
	display: block; font-family: var(--titre); font-weight: 700;
	font-size: var(--t-sm); color: var(--bleu-profond); margin-bottom: 1px;
}
.nav-volet small { color: var(--encre-douce); font-size: var(--t-xs); line-height: 1.45; display: block; }

.nav-cta { margin-left: var(--e-3); }

/* bouton burger : trois traits qui deviennent une croix */
.burger {
	display: none; margin-left: auto; background: none; border: 0;
	cursor: pointer; padding: 0.6rem; border-radius: var(--r-sm);
}
.burger span {
	display: block; width: 24px; height: 2px; border-radius: 2px;
	background: var(--bleu-profond); margin: 5px 0;
	transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* fil de progression de lecture */
.progression {
	position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
	transform: scaleX(0); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--bleu), var(--vert));
	transition: transform 90ms linear;
}

/* == 05. BOUTONS ET LIENS ================================================== */
.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	font-family: var(--corps); font-weight: 700; font-size: var(--t-sm);
	letter-spacing: -0.005em;
	padding: 0.95rem 1.7rem; border-radius: var(--r-pill);
	border: 2px solid transparent; cursor: pointer; text-align: center;
	position: relative; overflow: hidden; isolation: isolate;
	transition: transform var(--transition), box-shadow var(--transition),
	            background-color var(--transition), color var(--transition),
	            border-color var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

/* voile lumineux qui traverse le bouton au survol */
.bouton::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, transparent 32%,
	            rgba(255, 255, 255, 0.4) 46%, transparent 60%);
	transform: translateX(-110%);
	transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bouton:hover::before { transform: translateX(110%); }

.bouton--primaire {
	background: var(--vert); color: #062B10;
	box-shadow: 0 2px 6px rgba(15, 86, 165, 0.10), 0 8px 22px rgba(98, 214, 82, 0.30);
}
.bouton--primaire:hover {
	background: var(--vert-fonce);
	box-shadow: 0 4px 10px rgba(15, 86, 165, 0.12), 0 14px 34px rgba(98, 214, 82, 0.40);
}

.bouton--bleu {
	background: var(--bleu-profond); color: #fff;
	box-shadow: 0 2px 6px rgba(11, 34, 66, 0.12), 0 8px 22px rgba(15, 86, 165, 0.26);
}
.bouton--bleu:hover { background: #0C4988; box-shadow: var(--ombre-lg); }

.bouton--contour {
	background: transparent; color: var(--bleu-profond); border-color: var(--trait-fort);
}
.bouton--contour:hover { border-color: var(--bleu); background: var(--voile-bleu); }

.bouton--clair { background: #fff; color: var(--bleu-profond); }
.bouton--clair:hover { box-shadow: var(--ombre-lg); }

.bouton--fantome {
	background: rgba(255, 255, 255, 0.10); color: #fff;
	border-color: rgba(255, 255, 255, 0.40);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bouton--fantome:hover { background: rgba(255, 255, 255, 0.20); border-color: #fff; }

.bouton--sm { padding: 0.62rem 1.15rem; font-size: var(--t-xs); }
.bouton--lg { padding: 1.1rem 2.1rem; font-size: var(--t-base); }

/* la flèche glisse quand on survole */
.bouton .fleche { transition: transform var(--transition); }
.bouton:hover .fleche { transform: translateX(4px); }

.rangee-cta { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.centre .rangee-cta { justify-content: center; }

/* lien texte : soulignement qui se dessine */
.lien {
	color: var(--bleu-lien); font-weight: 600;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px; background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--transition);
}
.lien:hover { background-size: 100% 1.5px; }

/* == 06. SECTIONS ET TITRES =============================================== */
.section { padding-block: var(--section-y); position: relative; }
.section--serree { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.section--brume { background: var(--brume); }
.section--nuit {
	background:
		radial-gradient(ellipse 90% 70% at 12% -10%, rgba(55, 126, 237, 0.32), transparent 62%),
		radial-gradient(ellipse 70% 60% at 92% 108%, rgba(98, 214, 82, 0.18), transparent 60%),
		linear-gradient(168deg, var(--bleu-nuit), var(--bleu-nuit-2));
	color: rgba(255, 255, 255, 0.90);
	position: relative; overflow: hidden;
}
.section--nuit h1, .section--nuit h2, .section--nuit h3, .section--nuit h4 { color: #fff; }
.section--nuit .accroche { color: rgba(255, 255, 255, 0.82); }
.section--nuit .sourdine { color: rgba(255, 255, 255, 0.62); }

.section--bleu {
	background: linear-gradient(150deg, var(--bleu-profond) 0%, #1663BE 52%, var(--bleu) 100%);
	color: rgba(255, 255, 255, 0.92);
	position: relative; overflow: hidden;
}
.section--bleu h2, .section--bleu h3 { color: #fff; }
.section--bleu .accroche { color: rgba(255, 255, 255, 0.90); }

/* surtitre : petite capitale précédée d'un filet */
.surtitre {
	display: inline-flex; align-items: center; gap: 0.7rem;
	font-family: var(--corps); font-weight: 700; font-size: var(--t-xs);
	letter-spacing: 0.14em; text-transform: uppercase;
	/* --bleu-lien, pas --bleu : ce surtitre est du petit texte (13 px), donc
	   soumis au seuil AA de 4.5:1. Le bleu de marque n'atteint que 3.9:1 sur
	   blanc ; c'est exactement le cas que le sommaire de cette feuille annonce,
	   « le bleu et le vert de marque servent d'aplats et de grands caractères,
	   jamais de texte courant ». */
	color: var(--bleu-lien); margin: 0 0 var(--e-4);
}
.surtitre::before {
	content: ''; width: 28px; height: 2px; border-radius: 2px;
	background: currentColor; flex: none;
}
.centre .surtitre { justify-content: center; }
.section--nuit .surtitre, .section--bleu .surtitre { color: #8FC4FF; }
.surtitre--vert { color: var(--vert-texte); }
.surtitre--orange { color: var(--orange-texte); }

.titre-1 { font-size: var(--t-5xl); font-weight: 800; letter-spacing: -0.03em; }
.titre-2 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.025em; }
.titre-3 { font-size: var(--t-xl); font-weight: 700; }
.titre-4 { font-size: var(--t-lg); font-weight: 700; }

.accroche {
	font-size: var(--t-lg); line-height: 1.55; font-weight: 400;
	color: var(--encre-douce); margin-top: var(--e-4);
}
.sourdine { color: var(--encre-douce); font-size: var(--t-sm); }
.credit { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--encre-tres-douce); }

.chapeau { margin-bottom: clamp(2rem, 3.6vw, 3.5rem); }
.centre .chapeau { max-width: 820px; margin-inline: auto; }

/* définition mise en exergue : le bloc que les moteurs génératifs citent */
.definition {
	border-left: 4px solid var(--vert);
	background: linear-gradient(100deg, var(--voile-vert), transparent 72%);
	padding: var(--e-5) var(--e-6);
	border-radius: 0 var(--r) var(--r) 0;
	max-width: 78ch;
}
.definition p { font-size: var(--t-md); }
.definition p:first-child { margin-top: 0; }
.definition strong { color: var(--bleu-profond); }

/* == 07. HÉROS ============================================================= */
.heros {
	position: relative; overflow: hidden; isolation: isolate;
	color: #fff; background: var(--bleu-nuit);
	padding-block: clamp(4.5rem, 11vw, 9rem) clamp(3.5rem, 8vw, 7rem);
	display: flex; align-items: center; min-height: min(84vh, 780px);
}
.heros--court { min-height: min(58vh, 560px); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); }

.heros-image {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06);
	animation: heros-derive 26s ease-in-out infinite alternate;
}
@keyframes heros-derive {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
}

/* voile en deux couches : un dégradé vertical pour la lisibilité, un halo
   bleu de marque pour l'ancrage chromatique. */
.heros-voile {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(7, 20, 43, 0.72) 0%, rgba(7, 20, 43, 0.52) 42%, rgba(7, 20, 43, 0.86) 100%),
		radial-gradient(ellipse 85% 65% at 22% 30%, rgba(15, 86, 165, 0.50), transparent 66%);
}

.heros-contenu { position: relative; max-width: 940px; }
.heros h1 {
	color: #fff; font-size: var(--t-5xl); font-weight: 800;
	letter-spacing: -0.035em; line-height: 1.03;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.42);
	max-width: 19ch;
}
.heros--court h1 { font-size: var(--t-4xl); max-width: 24ch; }
.heros .accroche {
	color: rgba(255, 255, 255, 0.93); max-width: 62ch;
	margin-top: var(--e-5); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.38);
}
.heros .rangee-cta { margin-top: var(--e-6); }

/* signature de marque, discrète, sous le héros */
.signature {
	display: inline-flex; align-items: center; gap: 0.7rem;
	margin-top: var(--e-6); font-family: var(--titre); font-weight: 600;
	font-size: var(--t-sm); letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.78);
}
.signature::before {
	content: ''; width: 34px; height: 2px; background: var(--vert);
	border-radius: 2px; flex: none;
}

/* bandeau de réassurance collé sous le héros */
.reassurance {
	display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6);
	justify-content: center; align-items: center;
	padding-block: var(--e-5);
	border-bottom: 1px solid var(--trait);
	background: var(--blanc);
}
.reassurance span {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: var(--t-xs); font-weight: 600; color: var(--encre-douce);
	letter-spacing: 0.01em;
}
.reassurance span::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--vert); flex: none;
}

/* == 08. COMPOSANTS ======================================================= */

/* --- grilles --- */
.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--texte-image { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.grille--aside { grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* --- carte --- */
.carte {
	position: relative; background: var(--blanc);
	border: 1px solid var(--trait); border-radius: var(--r-lg);
	padding: clamp(1.5rem, 2.6vw, 2.1rem);
	box-shadow: var(--ombre-sm);
	transition: transform var(--transition), box-shadow var(--transition),
	            border-color var(--transition);
}
.carte h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.carte p { color: var(--encre-douce); font-size: var(--t-sm); }
.carte--survol:hover {
	transform: translateY(-5px); box-shadow: var(--ombre-lg);
	border-color: var(--trait-fort);
}
/* filet d'accent qui se remplit au survol */
.carte--survol::after {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: linear-gradient(90deg, var(--bleu), var(--vert));
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform var(--transition-lent);
}
.carte--survol:hover::after { transform: scaleX(1); }

.carte--vitre {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	color: rgba(255, 255, 255, 0.88);
}
.carte--vitre h3 { color: #fff; }
.carte--vitre p { color: rgba(255, 255, 255, 0.78); }

/* pictogramme carré en tête de carte */
.pictogramme {
	width: 50px; height: 50px; border-radius: 14px; flex: none;
	display: grid; place-items: center; margin-bottom: var(--e-4);
	color: #fff;
}
.pictogramme svg { width: 26px; height: 26px; }
.pictogramme--bleu   { background: linear-gradient(140deg, var(--bleu-profond), var(--bleu)); }
.pictogramme--vert   { background: linear-gradient(140deg, #2E9E22, var(--vert)); }
.pictogramme--orange { background: linear-gradient(140deg, #C8431A, #FF7D4D); }

/* --- listes à coche --- */
.coches { list-style: none; margin: 0; padding: 0; }
.coches li {
	position: relative; padding: 0.55rem 0 0.55rem 2rem;
	font-size: var(--t-sm); color: var(--encre);
}
.coches li::before {
	content: ''; position: absolute; left: 2px; top: 1.02rem;
	width: 14px; height: 7px;
	border-left: 2.5px solid var(--vert-texte); border-bottom: 2.5px solid var(--vert-texte);
	transform: rotate(-45deg);
}
.coches--filets li { border-bottom: 1px solid var(--trait); padding-block: 0.85rem; }
.coches--filets li:last-child { border-bottom: 0; }
.coches li strong { display: block; font-weight: 700; color: var(--encre); }
.coches li small { display: block; color: var(--encre-douce); font-size: var(--t-xs); margin-top: 2px; line-height: 1.5; }
.section--nuit .coches li, .section--bleu .coches li { color: rgba(255, 255, 255, 0.88); }
.section--nuit .coches li::before, .section--bleu .coches li::before { border-color: var(--vert); }

/* --- statistiques et compteurs --- */
.chiffre {
	font-family: var(--titre); font-weight: 800; line-height: 0.95;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.04em;
}
.chiffre--xl { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.chiffre--lg { font-size: clamp(2rem, 3.6vw, 3rem); }
.chiffre--md { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.chiffre--vert   { color: var(--vert-texte); }
.chiffre--bleu   { color: var(--bleu-profond); }
.chiffre--orange { color: var(--orange-texte); }
.section--nuit .chiffre--vert, .section--bleu .chiffre--vert { color: var(--vert); }
.section--nuit .chiffre--bleu, .section--bleu .chiffre--bleu { color: #fff; }

.stat { text-align: center; }
.stat .libelle {
	font-weight: 700; color: var(--bleu-profond);
	margin-top: var(--e-3); font-size: var(--t-sm);
}
.stat p { color: var(--encre-douce); font-size: var(--t-xs); margin-top: var(--e-2); line-height: 1.55; }
.section--nuit .stat .libelle, .section--bleu .stat .libelle { color: #fff; }
.section--nuit .stat p, .section--bleu .stat p { color: rgba(255, 255, 255, 0.72); }

/* bandeau de chiffres séparés par des filets */
.bandeau-chiffres {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--trait); border-radius: var(--r-lg);
	overflow: hidden; background: var(--blanc);
}
.bandeau-chiffres > * {
	padding: clamp(1.5rem, 3vw, 2.4rem) var(--e-4); text-align: center;
	border-right: 1px solid var(--trait);
}
.bandeau-chiffres > *:last-child { border-right: 0; }
.section--nuit .bandeau-chiffres, .section--bleu .bandeau-chiffres {
	background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.section--nuit .bandeau-chiffres > *, .section--bleu .bandeau-chiffres > * {
	border-right-color: rgba(255, 255, 255, 0.14);
}

/* --- le geste en trois temps --- */
.geste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6); counter-reset: pas; }
.geste article { position: relative; text-align: center; }
.geste .vignette {
	position: relative; border-radius: var(--r-lg); overflow: hidden;
	background: var(--brume-2); border: 1px solid var(--trait);
	box-shadow: var(--ombre-sm); margin-bottom: var(--e-5);
	transition: transform var(--transition), box-shadow var(--transition);
}
.geste article:hover .vignette { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.geste .rang {
	counter-increment: pas;
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	width: 40px; height: 40px; border-radius: 50%; z-index: 2;
	display: grid; place-items: center;
	background: linear-gradient(140deg, var(--bleu-profond), var(--bleu));
	color: #fff; font-family: var(--titre); font-weight: 800; font-size: var(--t-sm);
	box-shadow: 0 6px 18px rgba(15, 86, 165, 0.35);
	border: 3px solid #fff;
}
.geste .rang::before { content: counter(pas); }
.geste h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.geste p { color: var(--encre-douce); font-size: var(--t-sm); }

/* --- figure illustrée --- */
.figure {
	margin: 0; background: var(--blanc);
	border: 1px solid var(--trait); border-radius: var(--r-lg);
	padding: clamp(0.75rem, 1.6vw, 1.15rem);
	box-shadow: var(--ombre);
}
.figure img { width: 100%; border-radius: var(--r); }
.figure figcaption {
	margin: var(--e-3) var(--e-2) var(--e-1);
	font-size: var(--t-xs); color: var(--encre-douce);
	text-align: center; line-height: 1.55;
}
.figure--centree { margin-inline: auto; }

/* --- comparateur avant / après (glisser pour révéler) --- */
.comparateur {
	position: relative; overflow: hidden; border-radius: var(--r-lg);
	box-shadow: var(--ombre-lg); border: 1px solid var(--trait);
	touch-action: pan-y; user-select: none; cursor: ew-resize;
	background: var(--brume-2);
}
.comparateur img { width: 100%; display: block; pointer-events: none; }
.comparateur .apres {
	position: absolute; inset: 0;
	clip-path: inset(0 0 0 var(--curseur, 50%));
}
.comparateur .apres img { height: 100%; object-fit: cover; }
.comparateur .poignee {
	position: absolute; top: 0; bottom: 0; left: var(--curseur, 50%);
	width: 3px; background: #fff; transform: translateX(-50%);
	box-shadow: 0 0 0 1px rgba(11, 34, 66, 0.18), 0 0 22px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.comparateur .poignee::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	width: 46px; height: 46px; transform: translate(-50%, -50%);
	border-radius: 50%; background: #fff;
	box-shadow: 0 4px 18px rgba(11, 34, 66, 0.28);
	background-image:
		linear-gradient(90deg, transparent 34%, var(--bleu-profond) 34%, var(--bleu-profond) 38%, transparent 38%),
		linear-gradient(90deg, transparent 62%, var(--bleu-profond) 62%, var(--bleu-profond) 66%, transparent 66%);
}
.comparateur .etiquette {
	position: absolute; top: var(--e-4); z-index: 3;
	padding: 0.34rem 0.85rem; border-radius: var(--r-pill);
	font-family: var(--titre); font-weight: 700; font-size: var(--t-xs);
	letter-spacing: 0.08em; text-transform: uppercase;
	background: rgba(7, 20, 43, 0.72); color: #fff;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	pointer-events: none;
}
.comparateur .etiquette--avant { left: var(--e-4); }
.comparateur .etiquette--apres { right: var(--e-4); background: rgba(27, 110, 16, 0.82); }
.comparateur input[type="range"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; margin: 0; cursor: ew-resize;
}
.comparateur input[type="range"]:focus-visible { opacity: 0.001; outline: 3px solid var(--bleu); outline-offset: 3px; }

/* --- réalisation (fiche chantier) --- */
.realisation {
	background: var(--blanc); border: 1px solid var(--trait);
	border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-sm);
	display: flex; flex-direction: column;
	transition: transform var(--transition), box-shadow var(--transition);
}
.realisation:hover { transform: translateY(-5px); box-shadow: var(--ombre-lg); }
.realisation > img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.realisation .corps { padding: var(--e-5); flex: 1; display: flex; flex-direction: column; }
.realisation .lieu {
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: var(--bleu); font-weight: 700; font-size: var(--t-xs);
	letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--e-2);
}
.realisation h3 { font-size: var(--t-md); margin-bottom: var(--e-3); }
.realisation .mesures {
	margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3);
	margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--trait);
}
.realisation .mesures div { text-align: center; }
.realisation .mesures dt {
	font-family: var(--titre); font-weight: 800; font-size: var(--t-md);
	color: var(--vert-texte); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.realisation .mesures dd { margin: 2px 0 0; font-size: 0.7rem; color: var(--encre-douce); line-height: 1.35; }

/* --- étude en ligne (carte cliquable) --- */
.etude {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--blanc); border: 1px solid var(--trait);
	border-radius: var(--r-lg); box-shadow: var(--ombre-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
.etude:hover { transform: translateY(-5px); box-shadow: var(--ombre-lg); }
.etude .banniere {
	height: 88px; display: grid; place-items: center; position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--bleu-profond), var(--bleu));
	color: #fff; font-family: var(--titre); font-weight: 800;
	font-size: var(--t-xs); letter-spacing: 0.14em;
}
.etude .banniere::after {
	content: ''; position: absolute; inset: 0;
	background-image:
		radial-gradient(ellipse 60% 120% at 20% 120%, transparent 46%, rgba(255,255,255,0.16) 47%, transparent 48.5%),
		radial-gradient(ellipse 60% 120% at 20% 120%, transparent 62%, rgba(255,255,255,0.13) 63%, transparent 64.5%),
		radial-gradient(ellipse 60% 120% at 20% 120%, transparent 78%, rgba(255,255,255,0.10) 79%, transparent 80.5%);
}
.etude .banniere span { position: relative; z-index: 1; }
.etude .corps { padding: var(--e-5); flex: 1; display: flex; flex-direction: column; }
.etude h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.etude p { color: var(--encre-douce); font-size: var(--t-sm); flex: 1; }
.etude .ouvrir { color: var(--bleu-lien); font-weight: 700; font-size: var(--t-sm); margin-top: var(--e-4); }
.etude:hover .ouvrir .fleche { transform: translateX(4px); }
.etude .fleche { display: inline-block; transition: transform var(--transition); }

/* --- étapes numérotées --- */
.etapes { counter-reset: etape; display: grid; gap: var(--e-4); }
.etapes .etape {
	display: flex; gap: var(--e-5); align-items: flex-start;
	background: var(--blanc); border: 1px solid var(--trait);
	border-radius: var(--r); padding: var(--e-5);
	box-shadow: var(--ombre-xs);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.etapes .etape:hover { transform: translateX(4px); box-shadow: var(--ombre); border-color: var(--trait-fort); }
.etapes .etape::before {
	counter-increment: etape; content: counter(etape, decimal-leading-zero);
	flex: none; font-family: var(--titre); font-weight: 800;
	font-size: var(--t-xl); color: var(--vert-texte);
	line-height: 1; min-width: 2.4ch; letter-spacing: -0.04em;
}
.etapes h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.etapes p { color: var(--encre-douce); font-size: var(--t-sm); }

/* --- bloc réglementaire (loi APER) --- */
.reglement {
	background: var(--blanc);
	border: 1px solid var(--trait); border-left: 5px solid var(--orange);
	border-radius: 0 var(--r-lg) var(--r-lg) 0;
	padding: clamp(1.6rem, 3.4vw, 2.8rem);
	box-shadow: var(--ombre);
}
.reglement > h3 { color: var(--orange-texte); font-size: var(--t-xl); margin-bottom: var(--e-3); }
.seuils { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: var(--e-5); }
.seuil {
	background: var(--brume); border: 1px solid var(--trait);
	border-top: 3px solid var(--orange); border-radius: var(--r);
	padding: var(--e-5);
}
.seuil .valeur {
	font-family: var(--titre); font-weight: 800; font-size: var(--t-xl);
	color: var(--orange-texte); letter-spacing: -0.03em; line-height: 1.05;
}
.seuil h4 { font-size: var(--t-sm); margin: var(--e-3) 0 var(--e-2); }
.seuil p { font-size: var(--t-xs); color: var(--encre-douce); line-height: 1.55; }

/* frise des échéances */
.echeances { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.echeance {
	display: flex; gap: var(--e-4); align-items: center;
	padding: var(--e-4) var(--e-5); border-radius: var(--r);
	background: var(--brume); border: 1px solid var(--trait);
}
.echeance .date {
	font-family: var(--titre); font-weight: 800; font-size: var(--t-md);
	color: var(--orange-texte); flex: none; min-width: 9.5ch; letter-spacing: -0.02em;
}
.echeance p { font-size: var(--t-sm); color: var(--encre-douce); margin: 0; }

/* --- FAQ --- */
.faq { max-width: 880px; margin-inline: auto; }
.faq-bloc {
	border: 1px solid var(--trait); border-radius: var(--r);
	background: var(--blanc); margin-bottom: var(--e-3); overflow: hidden;
	box-shadow: var(--ombre-xs); transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-bloc.est-ouvert { box-shadow: var(--ombre); border-color: var(--trait-fort); }
.faq-q {
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: var(--e-5); display: flex; justify-content: space-between;
	align-items: center; gap: var(--e-4);
	font-family: var(--titre); font-weight: 700; font-size: var(--t-md);
	color: var(--bleu-profond); line-height: 1.35;
}
.faq-q .signe {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	background: var(--voile-bleu); position: relative;
	transition: background var(--transition), transform var(--transition);
}
.faq-q .signe::before, .faq-q .signe::after {
	content: ''; position: absolute; top: 50%; left: 50%; background: var(--bleu-profond);
	transform: translate(-50%, -50%); border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}
.faq-q .signe::before { width: 11px; height: 2px; }
.faq-q .signe::after  { width: 2px; height: 11px; }
.faq-bloc.est-ouvert .signe { background: var(--vert); transform: rotate(180deg); }
.faq-bloc.est-ouvert .signe::after { opacity: 0; }
.faq-bloc.est-ouvert .signe::before { background: #062B10; }
.faq-r { height: 0; overflow: hidden; transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.faq-r-interne { padding: 0 var(--e-5) var(--e-5); color: var(--encre-douce); font-size: var(--t-sm); }
.faq-r-interne p { margin-bottom: 0.7em; }

/* --- pastilles de réassurance --- */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }
.pastille {
	background: var(--blanc); border: 1px solid var(--trait);
	border-radius: var(--r-pill); padding: 0.55rem 1.15rem;
	font-weight: 600; font-size: var(--t-xs); color: var(--bleu-profond);
	box-shadow: var(--ombre-xs);
	transition: transform var(--transition), box-shadow var(--transition);
}
.pastille:hover { transform: translateY(-2px); box-shadow: var(--ombre-sm); }

/* --- mur de logos des opérateurs --- */
.logos-ot {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--e-4); align-items: center;
}
.logos-ot img {
	width: 100%; height: 62px; object-fit: contain;
	filter: grayscale(1); opacity: 0.62;
	transition: filter var(--transition), opacity var(--transition), transform var(--transition);
}
.logos-ot img:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* --- encart d'aparté --- */
.aparte {
	background: linear-gradient(150deg, var(--bleu-profond), var(--bleu));
	color: #fff; border-radius: var(--r-lg);
	padding: clamp(1.75rem, 3.2vw, 2.5rem);
	box-shadow: var(--ombre-lg); position: relative; overflow: hidden;
}
.aparte h3 { color: #fff; font-size: var(--t-lg); margin-bottom: var(--e-3); }
.aparte p { color: rgba(255, 255, 255, 0.90); font-size: var(--t-sm); }
.aparte .devise {
	display: inline-block; margin-top: var(--e-4);
	background: rgba(255, 255, 255, 0.16); border-radius: var(--r-pill);
	padding: 0.4rem 1rem; font-weight: 700; font-size: var(--t-xs);
}

/* --- appel à l'action final --- */
.cta-final { text-align: center; position: relative; z-index: 1; }
.cta-final h2 { margin-bottom: var(--e-4); }
.cta-final p { max-width: 62ch; margin-inline: auto; margin-bottom: var(--e-6); }

/* --- formulaire embarqué --- */
.cadre-formulaire {
	max-width: 740px; margin-inline: auto;
	border-radius: var(--r-lg); overflow: hidden;
	box-shadow: var(--ombre-lg); background: var(--blanc);
	border: 1px solid var(--trait);
}
.cadre-formulaire iframe { width: 100%; border: 0; display: block; min-height: 460px; background: #fff; }

/* --- fiche contact --- */
.coordonnees { display: grid; gap: var(--e-4); }
.coordonnee { display: flex; gap: var(--e-4); align-items: flex-start; }
.coordonnee .pictogramme { width: 42px; height: 42px; border-radius: 12px; margin: 0; }
.coordonnee .pictogramme svg { width: 20px; height: 20px; }
.coordonnee h3 { font-size: var(--t-sm); margin-bottom: 2px; }
.coordonnee p, .coordonnee a { font-size: var(--t-sm); color: var(--encre-douce); margin: 0; }
.coordonnee a:hover { color: var(--bleu-lien); }

/* --- fil d'Ariane --- */
.ariane {
	font-size: var(--t-xs); color: var(--encre-douce);
	padding-block: var(--e-4); border-bottom: 1px solid var(--trait);
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.ariane li::after { content: '›'; margin-left: 0.5rem; opacity: 0.5; }
.ariane li:last-child::after { content: ''; }
.ariane a:hover { color: var(--bleu-lien); }

/* == 09. PIED DE PAGE ===================================================== */
.pied {
	background: var(--bleu-nuit); color: rgba(255, 255, 255, 0.72);
	padding-block: var(--e-8) var(--e-6); position: relative; overflow: hidden;
}
.pied::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(55, 126, 237, 0.20), transparent 62%);
}
.pied > * { position: relative; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e-6); }
.pied h3 {
	color: #fff; font-size: var(--t-xs); letter-spacing: 0.12em;
	text-transform: uppercase; margin-bottom: var(--e-4);
}
.pied a { display: block; color: rgba(255, 255, 255, 0.70); padding-block: 0.32rem; font-size: var(--t-sm); }
.pied a:hover { color: #fff; }
.pied-marque { display: inline-flex; background: #fff; border-radius: 12px; padding: 0.6rem 1rem; margin-bottom: var(--e-4); }
.pied-marque img { height: 30px; width: auto; }
.pied-note { color: rgba(255, 255, 255, 0.58); font-size: var(--t-xs); max-width: 40ch; line-height: 1.6; }
.pied-bas {
	border-top: 1px solid rgba(255, 255, 255, 0.13); margin-top: var(--e-7);
	padding-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-3);
	justify-content: space-between; font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.52);
}
.pied-bas a { display: inline; color: rgba(255, 255, 255, 0.62); }

/* == 10. MOUVEMENT ======================================================== */
/* Amélioration progressive : la classe .pre n'est posée que par site.js, donc
   sans JavaScript rien n'est jamais masqué. */
.apparait { transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                        transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.apparait.pre { opacity: 0; transform: translateY(26px); }
.apparait.pre.est-vu { opacity: 1; transform: none; }
.apparait[data-d="1"] { transition-delay: 90ms; }
.apparait[data-d="2"] { transition-delay: 180ms; }
.apparait[data-d="3"] { transition-delay: 270ms; }
.apparait[data-d="4"] { transition-delay: 360ms; }
.apparait[data-d="5"] { transition-delay: 450ms; }

@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;
	}
	.apparait, .apparait.pre { opacity: 1 !important; transform: none !important; }
	.heros-image { animation: none; transform: scale(1.02); }
	.bouton:hover { transform: none; }
}

/* == 11. RESPONSIVE ======================================================= */
@media (max-width: 1080px) {
	.grille--4 { grid-template-columns: repeat(2, 1fr); }
	.pied-grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 940px) {
	.marque img { height: 36px; }
	.burger { display: block; }
	.nav {
		position: fixed; inset: var(--nav-h) 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 2px;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--trait);
		padding: var(--e-4) 4% var(--e-6);
		max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
		box-shadow: var(--ombre-xl);
		transform: translateY(-10px); opacity: 0; visibility: hidden;
		transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
	}
	.nav.est-ouvert { transform: none; opacity: 1; visibility: visible; }
	.nav-lien { padding: 0.75rem 0.5rem; font-size: var(--t-base); }
	.nav-lien::after { display: none; }
	.nav-volet {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--trait);
		border-radius: 0; margin: 0 0 var(--e-3) var(--e-3);
		padding: 0 0 0 var(--e-3); min-width: 0; background: none;
		backdrop-filter: none; -webkit-backdrop-filter: none;
		display: none;
	}
	.nav-volet.est-ouvert { display: block; }
	.nav-cta { margin: var(--e-3) 0 0; }
	.grille--texte-image, .grille--aside { grid-template-columns: 1fr; }
	.bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }
	.bandeau-chiffres > *:nth-child(2) { border-right: 0; }
	.bandeau-chiffres > *:nth-child(-n+2) { border-bottom: 1px solid var(--trait); }
	.section--nuit .bandeau-chiffres > *:nth-child(-n+2),
	.section--bleu .bandeau-chiffres > *:nth-child(-n+2) { border-bottom-color: rgba(255,255,255,0.14); }
}

@media (max-width: 820px) {
	.grille--3, .geste, .seuils { grid-template-columns: 1fr; }
	.grille--2 { grid-template-columns: 1fr; }
	.geste { gap: var(--e-7); }
	.pied-grille { grid-template-columns: 1fr 1fr; }
	.heros { min-height: auto; }
}

@media (max-width: 560px) {
	.grille--4 { grid-template-columns: 1fr; }
	.pied-grille { grid-template-columns: 1fr; }
	.reassurance { gap: var(--e-2) var(--e-4); }
	.etapes .etape { flex-direction: column; gap: var(--e-3); }
	.echeance { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
	.realisation .mesures {
	margin: 0; grid-template-columns: 1fr; gap: var(--e-2); text-align: left; }
	.realisation .mesures div { display: flex; align-items: baseline; gap: 0.5rem; text-align: left; }
	.comparateur .etiquette { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
}

/* == IMPRESSION =========================================================== */
@media print {
	.entete, .pied, .burger, .rangee-cta, .cadre-formulaire { display: none; }
	body { font-size: 11pt; color: #000; }
	.section { padding-block: 1rem; }
	.apparait, .apparait.pre { opacity: 1 !important; transform: none !important; }
}