/* =========================================================================
   ORVETA — orveta.fr
   Direction artistique : « la ligne de partage »
   Voir documentation/01-direction-artistique.md
   ========================================================================= */

/* ---------- Polices (auto-hébergées, latin) ------------------------------ */

@font-face {
	font-family: "Fraunces";
	src: url("../polices/fraunces.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("../polices/fraunces-italique.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	src: url("../polices/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Jetons -------------------------------------------------------- */

:root {
	/* couleurs — DA « Carbone & Rubis », validée le 30 août 2026.
	   Le site vit en noir charbon chaud ; les chapitres « clairs »
	   (approche, final) sont ses respirations. Deux rouges : le rubis
	   clair porte le texte sur carbone, le vermillon porte le texte
	   sur clair — le rouge profond #C9261F ne porte jamais de texte. */
	--carbone: #141210;
	--carbone-2: #1C1916;
	--ivoire: #EFE9DC;
	--ivoire-douce: #B5AC9D;
	--clair: #F2EDE3;
	--encre: #191510;
	--encre-douce: #5B5342;
	--rubis: #F0655A;
	--vermillon: #B3261E;
	--filet: rgba(239, 233, 220, 0.18);
	--filet-sur-clair: rgba(25, 21, 16, 0.16);

	/* typographies */
	--police-titre: "Fraunces", Georgia, "Times New Roman", serif;
	--police-texte: "Archivo", system-ui, "Segoe UI", sans-serif;

	/* échelle */
	--t-affiche: clamp(3.2rem, 9.5vw, 8.5rem);
	--t-chapitre: clamp(2.1rem, 5.5vw, 4.4rem);
	--t-projet: clamp(1.7rem, 4vw, 3rem);
	--t-corps: 1.0625rem;
	--t-contexte: 0.9375rem;
	--t-label: 0.72rem;

	/* mouvement : une seule courbe */
	--courbe: cubic-bezier(0.19, 1, 0.22, 1);
	--d-court: 0.7s;
	--d-rideau: 0.9s;

	/* rythme */
	--marge-section: clamp(5rem, 14vh, 10rem);
	--gouttiere: clamp(1.25rem, 5vw, 4rem);
}

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

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--carbone);
	color: var(--ivoire);
	font-family: var(--police-texte);
	font-size: var(--t-corps);
	line-height: 1.7;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }
svg { display: block; }

::selection { background: var(--rubis); color: var(--carbone); }

:focus-visible {
	outline: 2px solid var(--rubis);
	outline-offset: 3px;
	border-radius: 1px;
}
.chapitre-clair :focus-visible { outline-color: var(--vermillon); }

.acces-rapide {
	position: fixed;
	top: -100%;
	left: 1rem;
	z-index: 100;
	padding: 0.7em 1.2em;
	background: var(--ivoire);
	color: var(--carbone);
	text-decoration: none;
	font-size: var(--t-contexte);
	transition: top 0.2s;
}
.acces-rapide:focus { top: 1rem; }

.visuellement-cache {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Petits systèmes ----------------------------------------------- */

.interieur {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

/* le label technique : un trait vertical, des capitales espacées */
.label {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35em 0.9em;
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
	font-variant-numeric: tabular-nums;
}
.label::before {
	content: "";
	width: 1px;
	height: 1.15em;
	background: var(--rubis);
	flex: none;
	align-self: center;
}
.chapitre-clair .label { color: var(--encre-douce); }
.chapitre-clair .label::before { background: var(--vermillon); }

/* le lien : soulignement qui balaie */
.lien {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rubis), var(--rubis));
	background-size: 100% 1px, 0 1px;
	background-position: left 100%, left 100%;
	background-repeat: no-repeat;
	transition: background-size var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
	padding-bottom: 0.15em;
}
.lien:hover, .lien:focus-visible {
	background-size: 0 1px, 100% 1px;
	color: var(--rubis);
}
.chapitre-clair .lien:hover, .chapitre-clair .lien:focus-visible { color: var(--vermillon); }
.chapitre-clair .lien {
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--vermillon), var(--vermillon));
}

/* le bouton : remplissage depuis la ligne de gauche */
.bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	padding: 1em 1.6em;
	border: 1px solid var(--ivoire);
	border-radius: 2px;
	font-size: 0.9375rem;
	font-weight: 540;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--ivoire);
	overflow: hidden;
	transition: color var(--d-court) var(--courbe), border-color var(--d-court) var(--courbe), transform var(--d-court) var(--courbe);
}
.bouton::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ivoire);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--d-court) var(--courbe);
	z-index: 0;
}
.bouton > * { position: relative; z-index: 1; }
.bouton .fleche { transition: transform var(--d-court) var(--courbe); }
.bouton:hover, .bouton:focus-visible { color: var(--carbone); transform: translateY(-2px); }
.bouton:hover::before, .bouton:focus-visible::before { transform: scaleX(1); }
.bouton:hover .fleche, .bouton:focus-visible .fleche { transform: translateX(0.35em); }
.bouton:active { transform: translateY(1px); }
.diagnostic-reponses button:active { transform: translateY(1px); }

.chapitre-clair .bouton { border-color: var(--encre); color: var(--encre); }
.chapitre-clair .bouton::before { background: var(--encre); }
.chapitre-clair .bouton:hover, .chapitre-clair .bouton:focus-visible { color: var(--clair); }

/* le trait qui se trace sous les titres de section */
.trait {
	width: 100%;
	max-width: 6rem;
	height: 1px;
	background: var(--rubis);
	border: none;
	margin: 1.6rem 0 0;
	transform-origin: left center;
}
.chapitre-clair .trait { background: var(--vermillon); }

/* en-tête récurrent de section */
.section-entete { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.section-entete .label { margin-bottom: 1.4rem; }
.titre-chapitre {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: var(--t-chapitre);
	line-height: 1.05;
	letter-spacing: -0.01em;
	max-width: 18ch;
	text-wrap: balance;
}
.titre-chapitre em {
	font-style: italic;
	font-weight: 380;
	color: var(--rubis);
}
.chapitre-clair .titre-chapitre em { color: var(--vermillon); }

.texte-conduit {
	max-width: 58ch;
	color: var(--ivoire-douce);
}
.chapitre-clair .texte-conduit { color: var(--encre-douce); }

section { padding-block: var(--marge-section); }

/* ---------- Révélations au défilement -------------------------------------
   Même règle que le voile et le hero : l'état de REPOS est l'état visible.
   Le script pose `.a-reveler` (l'état caché) uniquement sur ce qui est sous
   l'écran, puis le RETIRE pour révéler — et une ceinture individuelle le
   retire de toute façon. Si le script ne tourne pas, rien n'est jamais
   caché : aucun bloc de contenu ne peut manquer. */

.js-actif [data-revele] {
	transition:
		opacity var(--d-court) var(--courbe),
		transform var(--d-court) var(--courbe),
		clip-path var(--d-rideau) var(--courbe);
	transition-delay: var(--r-delai, 0s);
}
.js-actif [data-revele="rideau"] { clip-path: inset(0 0 0 0); }

.js-actif .a-reveler[data-revele] {
	opacity: 0;
	transform: translateY(22px);
}
.js-actif .a-reveler[data-revele="rideau"] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 100% 0 0);
}
.js-actif .a-reveler[data-revele="trait"] {
	opacity: 1;
	transform: scaleX(0);
}

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

.entete {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	transition:
		background-color 0.4s var(--courbe),
		box-shadow 0.4s var(--courbe),
		padding 0.4s var(--courbe);
	padding-block: 1.15rem;
}
.entete.est-compacte {
	background: rgba(20, 18, 16, 0.94);
	box-shadow: 0 1px 0 var(--filet);
	padding-block: 0.6rem;
}
@supports (backdrop-filter: blur(4px)) {
	.entete.est-compacte { background: rgba(20, 18, 16, 0.86); backdrop-filter: blur(8px); }
}

.entete-interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.marque {
	display: inline-flex;
	align-items: center;
	gap: 0.28em;
	text-decoration: none;
	font-weight: 620;
	font-stretch: 118%;
	font-size: 0.98rem;
	letter-spacing: 0.16em;
	line-height: 1;
}
.marque svg { width: 0.98em; height: 0.98em; transform: translateY(-0.045em); }
.marque .o-droite { fill: var(--rubis); }

.nav-liens {
	display: flex;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	font-size: 0.875rem;
	font-weight: 480;
	letter-spacing: 0.04em;
}
.nav-liens a[aria-current] { color: var(--rubis); }
.nav-bouton {
	display: none;
	position: relative;
	z-index: 60;
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.6em 0.2em;
}

/* voile mobile */
.voile-nav {
	display: none;
}

@media (max-width: 56em) {
	.nav-bouton { display: inline-block; }
	.nav-liens { display: none; }

	.voile-nav {
		display: grid;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: var(--clair);
		color: var(--encre);
		place-content: center;
		gap: 1rem;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--courbe), visibility 0s linear 0.4s;
	}
	.nav-est-ouverte .voile-nav {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	.nav-est-ouverte { overflow: hidden; }
	.nav-est-ouverte .nav-bouton { color: var(--encre); }

	.voile-nav a {
		font-family: var(--police-titre);
		font-size: clamp(1.9rem, 8vw, 2.8rem);
		font-weight: 380;
		text-decoration: none;
		padding: 0.35em 0.5em;
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s var(--courbe), transform 0.5s var(--courbe);
	}
	.nav-est-ouverte .voile-nav a { opacity: 1; transform: none; }
	.nav-est-ouverte .voile-nav a:nth-child(1) { transition-delay: 0.06s; }
	.nav-est-ouverte .voile-nav a:nth-child(2) { transition-delay: 0.12s; }
	.nav-est-ouverte .voile-nav a:nth-child(3) { transition-delay: 0.18s; }
	.nav-est-ouverte .voile-nav a:nth-child(4) { transition-delay: 0.24s; }
	.nav-est-ouverte .voile-nav a:nth-child(5) { transition-delay: 0.3s; }
	.voile-nav a:hover, .voile-nav a:focus-visible { color: var(--vermillon); }
	.voile-nav a[aria-current] { color: var(--vermillon); }
}

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

.hero {
	min-height: 100svh;
	display: grid;
	place-items: center;
	position: relative;
	padding-block: 6rem 8rem;
	text-align: center;
}

/* le hero vit : au défilement il se lève et s'efface (variables posées en JS) */
.hero .interieur {
	transform: translateY(calc(var(--hero-y, 0) * 1px));
	opacity: var(--hero-o, 1);
}

.hero-titre { font-weight: 400; }

.hero-marque {
	display: flex;
	justify-content: center;
	align-items: baseline;
	font-family: var(--police-titre);
	font-size: var(--t-affiche);
	line-height: 1;
	letter-spacing: 0.045em;
	color: var(--ivoire);
}
.hero-marque .lettre {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
.hero-marque .lettre-int { display: inline-block; }
.hero-marque svg {
	/* le O se comporte comme une lettre : la hauteur des capitales, posé
	   sur leur ligne — pas un badge qui flotte */
	width: 0.76em;
	height: 0.74em;
	margin-right: 0.05em;
	align-self: center;
	/* le cercle suit très légèrement le curseur (variables posées en JS) */
	transform: translate(calc(var(--vise-x, 0) * 1px), calc(var(--vise-y, 0) * 1px)) translateY(0.13em);
	transition: transform 0.25s ease-out;
}
.hero-marque .o-gauche { stroke: var(--ivoire); }
.hero-marque .o-droite { fill: var(--rubis); }

.hero-slogan {
	display: block;
	margin-top: 2.2rem;
	font-family: var(--police-titre);
	font-weight: 340;
	font-size: clamp(1.25rem, 2.6vw, 1.85rem);
	line-height: 1.35;
	letter-spacing: 0.005em;
}
.hero-slogan em { font-style: italic; color: var(--rubis); }

.hero-sous {
	margin-top: 1.4rem;
	margin-inline: auto;
	max-width: 44ch;
	font-size: var(--t-contexte);
	color: var(--ivoire-douce);
}

.hero-actions {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.4rem 2.2rem;
}
.lien-discret {
	font-size: var(--t-contexte);
	color: var(--ivoire-douce);
}
.chapitre-clair .lien-discret { color: var(--encre-douce); }

.hero-ligne {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: clamp(3.5rem, 9vh, 6rem);
	background: linear-gradient(var(--ivoire), rgba(239, 233, 220, 0));
	transform-origin: top center;
}

/* séquence d'ouverture — uniquement quand le script est là.
   RÈGLE D'ARCHITECTURE (correction du « gros C ») : l'état de repos d'un
   élément est toujours son état FINAL. Les états de départ vivent dans les
   `from{}` des animations, servis par `fill-mode: both` pendant les délais.
   Si les animations ne s'exécutent pas (onglet en arrière-plan, aperçu sans
   compositeur), tout est simplement visible — jamais de lettre manquante,
   jamais de O amputé. */
.js-actif .hero-marque .lettre-int {
	animation: lever-lettre 0.9s var(--courbe) both;
	animation-delay: calc(0.15s + var(--l-index, 0) * 0.07s);
}
.js-actif .hero-marque svg {
	animation: paraitre 0.9s var(--courbe) 0.15s both;
}
/* pendant le hero, la moitié « après » du O dérive imperceptiblement */
.js-actif .hero-marque .o-droite {
	transform-origin: 50% 50%;
	animation: deriver 11s ease-in-out 3s infinite alternate;
}
.js-actif .hero-slogan {
	animation: rideau var(--d-rideau) var(--courbe) 0.95s both;
}
.js-actif .hero-sous,
.js-actif .hero-actions {
	animation: lever var(--d-court) var(--courbe) 1.4s both;
}
.js-actif .hero-actions { animation-delay: 1.55s; }
.js-actif .hero-ligne {
	transform-origin: top center;
	animation: tracer-bas 0.8s var(--courbe) 1.9s both;
}

@keyframes lever-lettre { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes paraitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes deriver { from { transform: rotate(0deg); } to { transform: rotate(5deg); } }
@keyframes rideau { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes lever { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tracer-bas { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Le constat ----------------------------------------------------- */

.constat-grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.constat-question {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: var(--t-chapitre);
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: 16ch;
}
.constat-question .q2 {
	display: block;
	font-style: italic;
	font-weight: 350;
	color: var(--rubis);
	margin-top: 0.2em;
}
.constat-texte { margin-top: 2rem; }
.constat-actions {
	margin-top: 2.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2.2rem;
}

/* le spécimen : une page vieillissante que la ligne répare */
.specimen {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 26rem;
	margin-left: auto;
	border: 1px solid var(--filet);
	background: var(--carbone-2);
	overflow: hidden;
	container-type: inline-size;
	cursor: pointer;
}
.specimen-face {
	position: absolute;
	inset: 0;
	padding: clamp(1rem, 8cqw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.specimen .barre {
	height: 0.55rem;
	background: var(--s-encre, #9A958B);
	opacity: 0.8;
}
.specimen-avant { --s-encre: #8E8A80; background: #DDD9CF; }
.specimen-avant .barre { border-radius: 99px; }
.specimen-avant .b-nav { display: flex; gap: 4cqw; margin-bottom: 6cqw; }
.specimen-avant .b-nav .barre { flex: 1; height: 0.4rem; }
.specimen-avant .b-titre { width: 55%; height: 1rem; transform: rotate(-0.5deg); }
.specimen-avant .b-t2 { width: 80%; }
.specimen-avant .b-t3 { width: 72%; margin-left: 6%; transform: rotate(0.4deg); }
.specimen-avant .b-t4 { width: 64%; }
.specimen-avant .b-image {
	flex: 1;
	background: repeating-linear-gradient(-45deg, #C9C4B8 0 6px, #D6D2C7 6px 12px);
	display: grid;
	place-items: center;
}
.specimen-avant .b-image span {
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6F6A5F;
	background: #DDD9CF;
	padding: 0.3em 0.8em;
}
.specimen-avant .b-pied { width: 40%; height: 0.4rem; margin-top: auto; }

.specimen-apres {
	background: var(--carbone);
	clip-path: inset(0 100% 0 0);
}
.specimen-apres .a-label {
	font-size: 0.58rem;
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
	border-left: 1px solid var(--rubis);
	padding-left: 0.8em;
}
.specimen-apres .a-titre {
	font-family: var(--police-titre);
	font-size: clamp(1.1rem, 9cqw, 1.7rem);
	line-height: 1.1;
	margin-top: 0.4rem;
}
.specimen-apres .barre { height: 0.45rem; background: var(--ivoire); opacity: 0.16; }
.specimen-apres .a-t1 { width: 86%; }
.specimen-apres .a-t2 { width: 74%; }
.specimen-apres .a-colonne {
	flex: 1;
	margin-top: 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
}
.specimen-apres .a-carte {
	border: 1px solid var(--filet);
	padding: 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.specimen-apres .a-carte i {
	font-style: normal;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--rubis);
	font-variant-numeric: tabular-nums;
}
.specimen-apres .a-carte .barre { height: 0.35rem; }
.specimen-apres .a-pied { width: 34%; height: 0.35rem; margin-top: auto; background: var(--rubis); opacity: 1; }

.specimen-ligne {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--rubis);
	transform: translateX(-2px);
}
.specimen-legende {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.6rem;
	display: flex;
	justify-content: space-between;
	padding-inline: 0.8rem;
	font-size: 0.58rem;
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
	pointer-events: none;
}

.js-actif .specimen.est-joue .specimen-apres {
	clip-path: inset(0);
	transition: clip-path 1.6s var(--courbe) 0.3s;
}
.js-actif .specimen.est-joue .specimen-ligne {
	transform: translateX(100cqw);
	transition: transform 1.6s var(--courbe) 0.3s;
}
.specimen-note {
	margin-top: 0.9rem;
	max-width: 26rem;
	margin-left: auto;
	font-size: 0.8125rem;
	color: var(--ivoire-douce);
	text-align: right;
}

/* ---------- La transformation (comparateur) -------------------------------- */

.transformation { background: var(--carbone-2); }

.comparateur { --pos: 50%; }
.comparateur-scene {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--filet);
	background: var(--carbone);
	overflow: hidden;
	container-type: inline-size;
}
.comparateur-scene:has(.comparateur-curseur:focus-visible) {
	outline: 2px solid var(--rubis);
	outline-offset: 4px;
}

.panneau { position: absolute; inset: 0; overflow: hidden; }
.panneau-apres { clip-path: inset(0 0 0 var(--pos)); }

.comparateur-ligne {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: var(--rubis);
	pointer-events: none;
}
.comparateur-poignee {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: var(--rubis);
	color: var(--carbone);
	display: grid;
	place-items: center;
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	text-indent: 0.12em;
}

.comparateur-curseur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
}

.comparateur-legende {
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
}
.comparateur-legende .apres { color: var(--rubis); }

/* les maquettes : primitives communes */
.maquette {
	position: absolute;
	inset: 0;
	padding: clamp(0.9rem, 4cqw, 2.4rem);
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 1.6cqw, 1rem);
	background: var(--m-fond, var(--carbone));
	color: var(--m-encre, var(--ivoire));
	font-size: clamp(0.55rem, 1.7cqw, 0.85rem);
	line-height: 1.4;
}
.m-nav {
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding-bottom: 0.8em;
	font-size: 0.85em;
}
.m-nom { font-weight: 640; letter-spacing: 0.08em; margin-right: auto; }
.m-note {
	display: inline-block;
	width: fit-content;
	font-size: 0.78em;
	letter-spacing: 0.08em;
	padding: 0.35em 0.8em;
	border: 1px solid currentColor;
	border-radius: 99px;
	opacity: 0.85;
}
.m-chiffre { font-variant-numeric: tabular-nums; }

/* — l'avant : gabarit 2013 — */
.maquette-avant {
	--m-fond: #E3E1DA;
	--m-encre: #57554E;
	font-family: Arial, Helvetica, sans-serif;
}
.maquette-avant .m-nav { border-bottom: 1px solid #C6C3BA; flex-wrap: wrap; row-gap: 0.3em; }
.maquette-avant .m-nav span:not(.m-nom) { opacity: 0.75; }
.maquette-avant .m-h1 {
	font-size: 0.72em;
	font-weight: 700;
	color: #7A776E;
}
.maquette-avant .m-cyan { color: #00AEF4; }
.maquette-avant .m-image {
	flex: 1;
	min-height: 0;
	background: repeating-linear-gradient(-45deg, #CFCCC2 0 7px, #DAD7CE 7px 14px);
	border: 1px solid #C6C3BA;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1em;
}
.maquette-avant .m-image .m-note { background: #E3E1DA; }
.maquette-avant .m-pied {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	font-size: 0.85em;
}

/* — l'après : la refonte, dans sa propre identité — */
.maquette-apres {
	--m-fond: #FBFAF7;
	--m-encre: #1A1B1E;
	font-family: Georgia, "Times New Roman", serif;
}
.maquette-apres .m-nav {
	font-family: var(--police-texte);
	border-bottom: 1px solid var(--m-lien, var(--rubis));
}
.maquette-apres .m-h1 {
	font-size: clamp(1rem, 6cqw, 2.4rem);
	line-height: 1.08;
	font-weight: 500;
	text-align: center;
	margin-inline: auto;
	padding-block: 0.4em;
}
.maquette-apres .m-h1 em { font-style: italic; color: var(--m-lien, var(--rubis)); }
.maquette .m-texte {
	display: grid;
	gap: 0.7em;
	margin-block: auto;
}
.maquette .m-texte i {
	display: block;
	height: 0.5em;
	background: currentColor;
	opacity: 0.14;
	margin-inline: auto;
}
.maquette-apres .m-portes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6em;
	margin-top: auto;
	font-family: var(--police-texte);
}
.maquette-apres .m-porte {
	border: 1px solid rgba(26, 27, 30, 0.18);
	padding: 0.7em 0.6em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	font-size: 0.82em;
}
.maquette-apres .m-porte i {
	font-style: normal;
	color: var(--m-lien, var(--rubis));
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	font-size: 0.85em;
}
.maquette-apres .m-pied {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	justify-content: space-between;
	font-family: var(--police-texte);
	font-size: 0.85em;
}
.maquette-apres .m-pied .m-note {
	border-color: var(--m-lien, var(--rubis));
	color: var(--m-lien, var(--rubis));
	opacity: 1;
}

/* ---------- Les réalisations ------------------------------------------------ */

.realisations .section-entete { max-width: 46rem; }

.projet-numero {
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	color: var(--rubis);
	font-variant-numeric: tabular-nums;
}
.projet-secteur {
	font-family: var(--police-titre);
	font-weight: 420;
	font-size: var(--t-projet);
	line-height: 1.08;
	margin-top: 0.6rem;
	max-width: 14ch;
}
.projet-code {
	margin-top: 0.9rem;
	font-size: var(--t-label);
	font-weight: 540;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
}
.projet-intention {
	margin-top: 1.6rem;
	color: var(--ivoire-douce);
	max-width: 44ch;
}
.projet-faits {
	margin-top: 1.8rem;
	display: grid;
	gap: 0.65rem;
	font-size: var(--t-contexte);
}
.projet-faits li {
	position: relative;
	padding-left: 2em;
}
.projet-faits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.78em;
	width: 1.1em;
	height: 1px;
	background: var(--rubis);
}
/* le statut d'une réalisation — toujours dit, jamais laissé deviner */
.statut {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	width: fit-content;
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 114%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
	border: 1px dashed var(--filet);
	border-radius: 99px;
	padding: 0.5em 1.1em;
	font-variant-numeric: tabular-nums;
}
.statut::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--rubis);
}
.chapitre-clair .statut { color: var(--encre-douce); border-color: var(--filet-sur-clair); }
.chapitre-clair .statut::before { background: var(--vermillon); }

/* identités propres aux trois refontes */
.maquette-climasud {
	--m-fond: #F2F6F9;
	--m-encre: #0C1C2A;
	--m-lien: #0D7AA9;
	font-family: var(--police-texte);
}
.maquette-climasud .m-h1 { font-family: var(--police-texte); font-weight: 640; }
.maquette-climasud .m-froid { color: #0D7AA9; }
.maquette-climasud .m-chaud { color: #C9261F; }
.maquette-climasud .m-pilules { display: flex; gap: 0.6em; flex-wrap: wrap; font-family: var(--police-texte); }
.maquette-climasud .m-pilules .m-note { border-radius: 99px; }

.maquette-koya {
	--m-fond: #0E0F12;
	--m-encre: #F4F1EA;
	--m-lien: #D4B369;
	font-family: Georgia, serif;
}
.maquette-koya .m-nav { border-bottom-color: #B5934C; }
.maquette-koya .m-filet-or { width: 3.5em; height: 1px; background: #B5934C; }
.maquette-koya .m-porte { border-color: rgba(244, 241, 234, 0.22); }
.maquette-koya .m-porte i { color: #D4B369; }
.maquette-koya .m-pied .m-note { border-color: #D4B369; color: #D4B369; }

.maquette-cauquil-mini {
	--m-fond: #FBFAF7;
	--m-encre: #1A1B1E;
	--m-lien: #0B6E97;
}

/* avant génériques par projet.
   ClimaSud : les couleurs ci-dessous sont la palette RÉELLE relevée dans le
   kit Elementor du site d'origine (post-642.css) — les valeurs d'usine du
   gabarit : primaire #6EC1E4, accent #61CE70, texte #7A7A7A, orange #ED8B02. */
.maquette-avant-elementor {
	--m-fond: #FFFFFF;
	--m-encre: #7A7A7A;
	font-family: Roboto, Arial, sans-serif;
}
.maquette-avant-elementor .m-bandeau {
	flex: 1;
	min-height: 0;
	background: #6EC1E4;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6em;
	padding: 1.2em;
}
.maquette-avant-elementor .m-bandeau strong { font-size: 1.3em; line-height: 1.2; }
.maquette-avant-elementor .m-boutons { display: flex; gap: 0.6em; }
.maquette-avant-elementor .m-btn {
	background: #61CE70;
	color: #FFFFFF;
	padding: 0.45em 1em;
	border-radius: 4px;
	font-size: 0.85em;
}
.maquette-avant-elementor .m-btn.secondaire { background: #ED8B02; }

.maquette-avant-koya {
	--m-fond: #F5F4F0;
	--m-encre: #4A4A46;
	font-family: Arial, sans-serif;
}
.maquette-avant-koya .m-or { color: #B5934C; }
.maquette-avant-koya .m-bloc {
	flex: 1;
	min-height: 0;
	border: 1px solid #DDDAD2;
	background: #FFFFFF;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* ---------- L'approche (chapitre clair) -------------------------------------- */

.chapitre-clair {
	background: var(--clair);
	color: var(--encre);
}
.chapitre-clair ::selection { background: var(--vermillon); color: var(--clair); }

.principes { margin-top: clamp(2rem, 6vh, 4rem); }
.principe {
	border-top: 1px solid var(--filet-sur-clair);
	padding-block: clamp(2.2rem, 6vh, 3.8rem);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.principe-numero {
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	color: var(--vermillon);
	font-variant-numeric: tabular-nums;
	margin-bottom: 1rem;
}
.principe-titre {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.15;
	max-width: 16ch;
}
.principe-texte { color: var(--encre-douce); max-width: 52ch; }
.principe-texte strong { color: var(--encre); font-weight: 540; }

/* ---------- Le diagnostic ---------------------------------------------------- */

.diagnostic-grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

.diagnostic-boitier {
	border: 1px solid var(--filet);
	background: var(--carbone);
	padding: clamp(1.6rem, 4vw, 2.8rem);
	position: relative;
}
.diagnostic-progres {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--filet);
}
.diagnostic-progres span {
	display: block;
	height: 100%;
	background: var(--rubis);
	transform: scaleX(var(--progres, 0));
	transform-origin: left center;
	transition: transform var(--d-court) var(--courbe);
}

.diagnostic-repere {
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
	font-variant-numeric: tabular-nums;
	min-height: 1.2em;
}
.diagnostic-question {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
	line-height: 1.25;
	margin-top: 1.1rem;
	min-height: 3.4em;
	text-wrap: balance;
}
.diagnostic-reponses {
	margin-top: 1.8rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.diagnostic-reponses button {
	border: 1px solid var(--ivoire);
	border-radius: 2px;
	padding: 0.75em 1.5em;
	font-size: var(--t-contexte);
	font-weight: 520;
	letter-spacing: 0.03em;
	transition: background-color var(--d-court) var(--courbe), color var(--d-court) var(--courbe), border-color var(--d-court) var(--courbe);
}
.diagnostic-reponses button:hover,
.diagnostic-reponses button:focus-visible {
	background: var(--ivoire);
	color: var(--carbone);
}

.diagnostic-conclusion .diagnostic-question { min-height: 0; }
.diagnostic-conclusion .bouton { margin-top: 1.8rem; }
.diagnostic-refaire {
	margin-top: 1.4rem;
	font-size: 0.8125rem;
	color: var(--ivoire-douce);
}
.diagnostic-note {
	margin-top: 1.4rem;
	font-size: 0.8125rem;
	color: var(--ivoire-douce);
}

[hidden] { display: none !important; }

/* ---------- La philosophie ---------------------------------------------------- */

.philosophie { padding-block: 0; }
.philosophie-piste { height: 240vh; }
.philosophie-scene {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: grid;
	place-items: center;
	padding-inline: var(--gouttiere);
}
.philosophie-phrase {
	font-family: var(--police-titre);
	font-weight: 380;
	font-size: clamp(1.9rem, 5vw, 4rem);
	line-height: 1.22;
	letter-spacing: -0.005em;
	max-width: 22ch;
	text-align: center;
	text-wrap: balance;
}
.philosophie-phrase em { font-style: italic; color: var(--rubis); }
.js-actif .philosophie-phrase .mot { opacity: 0.13; transition: opacity 0.25s linear; }
.js-actif .philosophie-phrase .mot.est-lu { opacity: 1; }

/* ---------- Conversion finale -------------------------------------------------- */

.final { padding-block: clamp(7rem, 20vh, 12rem); }
.final .interieur { text-align: center; }
.final-titre {
	font-family: var(--police-titre);
	font-weight: 380;
	font-size: clamp(2rem, 5.5vw, 4.2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	max-width: 22ch;
	margin-inline: auto;
	text-wrap: balance;
}
.final-titre em { font-style: italic; color: var(--vermillon); }
.final-actions {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.4rem 2.4rem;
}
.final-adresse {
	margin-top: 2.6rem;
	font-size: var(--t-contexte);
	color: var(--encre-douce);
}

/* ---------- Le voile de page (chargement et transitions) -------------------------- */

/* Sans script, le voile n'existe pas : le contenu est immédiatement là.
   L'arrivée est décidée dans l'en-tête de chaque page (avant la première
   peinture) ; orveta.js ne fait que lever le voile et jouer les départs. */
.voile-page { display: none; }
.js-actif .voile-page {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--carbone);
	transform: translateY(103%);
	visibility: hidden;
	/* le voile est un décor : quoi qu'il arrive, il ne bloque jamais rien */
	pointer-events: none;
}
.voile-coeur { display: grid; justify-items: center; gap: 1.2rem; }
.voile-coeur svg { width: clamp(3.2rem, 8vw, 4.6rem); height: auto; }
.voile-coeur .o-gauche { stroke: var(--ivoire); }
.voile-coeur .o-droite { fill: var(--rubis); }
.voile-marque {
	font-weight: 620;
	font-stretch: 118%;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	font-size: 0.8rem;
	color: var(--ivoire);
}

/* arrivée : le voile couvre la page dès la première peinture.
   Même règle que le hero : l'état de repos du cœur est le O COMPLET avec la
   marque ORVETA — les états de départ vivent dans les `from{}`. Sans
   animations, le voile montre l'identité entière, jamais un arc seul. */
.voile-entree .voile-page,
.voile-entree-courte .voile-page {
	transform: translateY(0);
	visibility: visible;
}
.voile-entree .voile-coeur .o-gauche {
	animation: voile-tracer 0.7s var(--courbe) 0.1s both;
}
.voile-entree .voile-coeur .o-droite {
	transform-origin: 50% 50%;
	animation: voile-poser 0.6s var(--courbe) 0.35s both;
}
.voile-entree .voile-marque { animation: paraitre 0.5s var(--courbe) 0.5s both; }
.voile-entree-courte .voile-coeur .o-droite {
	transform-origin: 50% 50%;
	animation: voile-poser 0.45s var(--courbe) both;
}
@keyframes voile-tracer {
	from { stroke-dasharray: 100; stroke-dashoffset: 100; }
	to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@keyframes voile-poser { from { opacity: 0; transform: rotate(-70deg); } to { opacity: 1; transform: rotate(0); } }

/* la page est prête : le cercle s'ouvre, le voile se lève */
.voile-fini .voile-page {
	transform: translateY(-103%);
	visibility: hidden;
	transition: transform 0.55s var(--courbe), visibility 0s linear 0.55s;
}
.voile-fini .voile-coeur {
	opacity: 0;
	transform: scale(1.16);
	transition: opacity 0.4s var(--courbe), transform 0.55s var(--courbe);
}

/* départ vers une autre page : le voile monte depuis le bas */
.voile-sortie .voile-page {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.32s var(--courbe);
}
.voile-sortie .voile-coeur .o-gauche { stroke-dashoffset: 0; }

/* ---------- Bandeau des pages intérieures ------------------------------------------ */

.bandeau-page {
	padding-top: calc(clamp(4rem, 10vh, 6rem) + 4rem);
	padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.bandeau-page .label { margin-bottom: 1.3rem; }
.titre-page {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: clamp(2.4rem, 6.5vw, 5.2rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	max-width: 16ch;
	text-wrap: balance;
}
.titre-page em { font-style: italic; font-weight: 370; color: var(--rubis); }
.bandeau-page .texte-conduit { margin-top: 1.8rem; }
.bandeau-page .etude-chips { margin-top: 1.8rem; }

/* ---------- Liste des réalisations -------------------------------------------------- */

.liste-projets { border-top: 1px solid var(--filet); }
.rangee-projet {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem clamp(1.2rem, 3.5vw, 3rem);
	padding-block: clamp(1.8rem, 5vh, 2.8rem);
	border-bottom: 1px solid var(--filet);
	text-decoration: none;
	transition: background-color var(--d-court) var(--courbe);
}
.rangee-projet:hover, .rangee-projet:focus-visible { background: var(--carbone-2); }
.rangee-numero {
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.18em;
	color: var(--rubis);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.rangee-titre {
	font-family: var(--police-titre);
	font-weight: 420;
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	line-height: 1.1;
}
.rangee-code {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--police-texte);
	font-size: var(--t-label);
	font-weight: 540;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
}
.rangee-recit {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--police-texte);
	font-size: var(--t-contexte);
	font-weight: 400;
	font-stretch: 100%;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.55;
	color: var(--ivoire-douce);
	max-width: 54ch;
}
.rangee-fleche {
	font-size: 1.4rem;
	color: var(--ivoire-douce);
	transition: transform var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
}
.rangee-projet:hover .rangee-fleche, .rangee-projet:focus-visible .rangee-fleche {
	transform: translateX(0.35em);
	color: var(--rubis);
}
.liste-projets-suite { margin-top: clamp(2rem, 6vh, 3.5rem); }

/* ---------- Étude de cas (page d'une réalisation) ------------------------------------ */

.etude-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.etude-section {
	border-top: 1px solid var(--filet);
	padding-block: clamp(2.5rem, 7vh, 4.5rem);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 1.6rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.etude-section > h2 {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.15;
	max-width: 14ch;
}
.etude-section .projet-faits { margin-top: 0; }
.etude-corps > p + p { margin-top: 0.9rem; }
.etude-corps .texte-conduit { max-width: 60ch; }

.etude-comparateur { padding-block: clamp(2.5rem, 7vh, 4.5rem); border-top: 1px solid var(--filet); }
.etude-comparateur > .label { margin-bottom: 1.6rem; }

.etude-suite {
	border-top: 1px solid var(--filet);
	padding-block: clamp(2.5rem, 6vh, 4rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2rem;
}

/* ---------- Les avant-goûts de la page d'accueil ------------------------------------- */

.grille-regles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.4rem, 3vw, 2.5rem);
	margin-block: clamp(2rem, 6vh, 3.5rem);
}
.regle-carte { border-top: 1px solid var(--filet-sur-clair); padding-top: 1.2rem; }
.regle-carte .principe-numero { margin-bottom: 0.7rem; }
.regle-carte p {
	font-family: var(--police-titre);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.2;
}

.teaser-diagnostic-lignes {
	font-family: var(--police-titre);
	font-weight: 380;
	font-size: clamp(1.6rem, 4vw, 2.8rem);
	line-height: 1.3;
	margin-block: 1.8rem 2.4rem;
}
.teaser-diagnostic-lignes em { font-style: italic; color: var(--rubis); }

/* ---------- Le formulaire de contact --------------------------------------------------- */

.formulaire { display: grid; gap: 1.5rem; max-width: 40rem; }
.champ { display: grid; gap: 0.55rem; }
.champ label {
	font-size: var(--t-label);
	font-weight: 560;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ivoire-douce);
}
.champ input, .champ textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--ivoire);
	background: var(--carbone-2);
	border: 1px solid var(--filet);
	border-radius: 2px;
	padding: 0.9em 1em;
	transition: border-color var(--d-court) var(--courbe);
}
.champ input:focus-visible, .champ textarea:focus-visible {
	outline: none;
	border-color: var(--rubis);
}
.champ textarea { min-height: 9.5rem; resize: vertical; }
.formulaire-note { font-size: 0.8125rem; color: var(--ivoire-douce); max-width: 52ch; }
.formulaire .bouton { justify-self: start; }

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

.pied-signature {
	border-top: 1px solid var(--filet);
	padding-block: clamp(4.5rem, 12vh, 8rem) 2rem;
}
/* le pied occupe toute la largeur de l'écran, avec de larges gouttières —
   pas le conteneur éditorial de 76 rem */
.pied-cadre {
	padding-inline: clamp(1.5rem, 5vw, 5.5rem);
}

/* les liens du pied : pas de soulignement, une élévation au survol */
.lien-pied {
	display: inline-block;
	text-decoration: none;
	color: var(--ivoire-douce);
	transition: transform var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
}
.lien-pied:hover, .lien-pied:focus-visible {
	color: var(--ivoire);
	transform: translateY(-2px);
}

/* 1 — la grande conclusion */
.pied-conclusion {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem clamp(2rem, 5vw, 4rem);
	margin-bottom: clamp(3.5rem, 9vh, 6rem);
}
.pied-conclusion-texte {
	font-family: var(--police-titre);
	font-weight: 380;
	font-size: clamp(2rem, 5.5vw, 4.4rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.pied-conclusion-texte em { font-style: italic; color: var(--rubis); }

/* 2, 3, 4 — identité · navigation · contact */
.pied-grille {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
	gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	border-top: 1px solid var(--filet);
	padding-block: clamp(2.5rem, 6vh, 3.5rem);
	font-size: var(--t-contexte);
}
/* la colonne contact se pose sur la marge droite, en regard du CTA */
.pied-contact { justify-self: end; }
.pied-marque {
	display: inline-flex;
	align-items: center;
	gap: 0.28em;
	font-weight: 620;
	font-stretch: 118%;
	letter-spacing: 0.16em;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ivoire);
}
.pied-o { width: 1.05em; height: 1.05em; flex: none; transform: translateY(-0.045em); }
.pied-o .o-gauche { stroke: var(--ivoire); }
.pied-o .o-droite { fill: var(--rubis); }
.pied-texte { color: var(--ivoire-douce); margin-top: 1.2rem; max-width: 36ch; }
.pied-liens-colonne { display: grid; gap: 0.6rem; margin-top: 1.1rem; justify-items: start; }
.pied-contact-titre {
	font-family: var(--police-titre);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin-bottom: 1.1rem;
}
.pied-contact-titre em { font-style: italic; color: var(--rubis); }

/* 5 — la ligne légale, discrète */
.pied-bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 2rem;
	border-top: 1px solid var(--filet);
	padding-top: 1.6rem;
	font-size: 0.8125rem;
	color: var(--ivoire-douce);
}
.pied-bas-liens { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* le cercle qui revient : révélation en signature */
.js-actif [data-revele="cercle"] {
	transition: opacity var(--d-court) var(--courbe), transform 1s var(--courbe);
	transition-delay: var(--r-delai, 0s);
}
.js-actif .a-reveler[data-revele="cercle"] {
	opacity: 0;
	transform: scale(0.55) rotate(-80deg);
}

/* ---------- Page introuvable (404) ------------------------------------------------ */

.page-absente {
	padding-top: calc(clamp(4rem, 10vh, 6rem) + 4rem);
	padding-bottom: clamp(4rem, 10vh, 7rem);
	min-height: 72vh;
}
.absente-code {
	display: flex;
	align-items: center;
	gap: 0.08em;
	font-family: var(--police-titre);
	font-size: clamp(5rem, 16vw, 10rem);
	line-height: 1;
	color: var(--ivoire);
	margin-bottom: 1.2rem;
}
.absente-code svg { width: 0.72em; height: 0.72em; flex: none; }
.absente-code .o-gauche { stroke: var(--ivoire); }
.absente-code .o-droite { fill: var(--rubis); }

/* ---------- Pages intérieures (mentions légales) --------------------------------- */

.page-simple { padding-top: clamp(8rem, 18vh, 11rem); min-height: 70vh; }
.page-simple .titre-chapitre { margin-bottom: 2.5rem; }
.page-simple h2 {
	font-family: var(--police-titre);
	font-weight: 420;
	font-size: 1.45rem;
	margin: 2.6rem 0 0.8rem;
}
.page-simple p { max-width: 62ch; margin-bottom: 0.8rem; }
.page-simple .a-completer {
	background: var(--carbone-2);
	border: 1px dashed var(--filet);
	padding: 0.1em 0.5em;
	font-size: 0.9em;
}

/* ---------- Responsive ------------------------------------------------------------ */

@media (max-width: 56em) {
	html { scroll-padding-top: 4.5rem; }

	.constat-grille { grid-template-columns: 1fr; }
	.specimen { margin-left: 0; }
	.specimen-note { margin-left: 0; text-align: left; }

	.rangee-projet {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0.6rem;
	}
	.rangee-numero { grid-column: 1 / -1; }
	.rangee-statut-cellule { grid-column: 1 / -1; order: 3; }

	.etude-section { grid-template-columns: 1fr; }
	.grille-regles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pied-grille { grid-template-columns: 1fr; }
	.pied-conclusion { flex-direction: column; align-items: flex-start; }

	.principe { grid-template-columns: 1fr; }
	.principe-titre { max-width: none; }

	.diagnostic-grille { grid-template-columns: 1fr; }

	.comparateur-scene { aspect-ratio: 4 / 5; }
	.maquette-apres .m-portes { grid-template-columns: repeat(2, 1fr); }
	.maquette .m-nav span:nth-child(n+5):not(.m-nom) { display: none; }
}

@media (max-width: 40em) {
	.hero-marque { letter-spacing: 0.03em; }
	.diagnostic-reponses button { flex: 1 1 auto; text-align: center; }
	.grille-regles { grid-template-columns: 1fr; }
	.rangee-titre { font-size: 1.35rem; }
	.etude-suite { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mouvement réduit ------------------------------------------------------- */

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

	.js-actif [data-revele],
	.js-actif [data-revele="rideau"],
	.js-actif [data-revele="trait"] {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
	.js-actif .hero-marque .lettre-int,
	.js-actif .hero-marque svg,
	.js-actif .hero-marque .o-droite,
	.js-actif .hero-slogan,
	.js-actif .hero-sous,
	.js-actif .hero-actions,
	.js-actif .hero-ligne {
		animation: none;
		opacity: 1;
		transform: none;
		clip-path: none;
	}
	.js-actif .specimen .specimen-apres,
	.js-actif .specimen .specimen-ligne,
	.bouton,
	.bouton::before,
	.bouton .fleche,
	.lien,
	.lien-pied,
	.rangee-projet,
	.rangee-fleche {
		transition: none !important;
		transform: none !important;
	}
	.js-actif .philosophie-phrase .mot { opacity: 1; transition: none; }
	.philosophie-piste { height: auto; }
	.philosophie-scene { position: static; height: auto; padding-block: var(--marge-section); }
	.voile-nav, .voile-nav a { transition: none !important; }

	/* pas de voile : la navigation est directe, le contenu immédiat */
	.js-actif .voile-page { display: none; }
	.hero .interieur { transform: none; opacity: 1; }
	.hero-marque svg { transition: none; }
}