/* =============================================================================
   aikeep.fr — feuille de style du site vitrine (#181)
   =============================================================================
   Charte : elle RÉCONCILIE les deux identités qui existaient déjà — le logo
   (dégradé indigo #4338CA → #6366F1) et l'interface du produit (accent bleu-violet
   #6d8bff). Le site s'affiche en CLAIR par défaut, avec une bascule vers le sombre ;
   les captures produit suivent le thème choisi (deux jeux servis depuis
   `assets/img/shots/{light,dark}/`), sans quoi elles auraient l'air d'appartenir à
   un autre logiciel.

   Contraintes assumées :
   - AUCUNE dépendance réseau (polices embarquées, pas de CDN) — c'est le discours
     du produit, il serait absurde que sa vitrine appelle trois serveurs tiers.
   - La politique de sécurité du proxy interdit le JS en ligne (`script-src 'self'`)
     → tout le comportement vit dans `site.js`.
   - Tout ce qui bouge respecte `prefers-reduced-motion`.
   ============================================================================= */

/* ----------------------------------------------------------------- Polices --- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

/* ------------------------------------------------------------- Variables --- */
/* Le thème CLAIR est le défaut (décision produit) ; le sombre est une bascule.
   Les deux jeux ne diffèrent que par ces variables — aucune règle plus bas ne
   code une couleur en dur, sans quoi un seul des deux thèmes serait juste. */
:root {
	--bg: #ffffff;
	--bg-soft: #f5f7fc;
	--surface: #ffffff;
	--surface-2: #f2f5fb;
	--border: #dfe4ee;
	--border-soft: #e9edf5;
	--text: #131824;
	--muted: #576076;
	--faint: #858da1;

	--indigo: #4338ca;
	--indigo-2: #6366f1;
	/* Sur fond blanc, l'accent de l'application (#6d8bff) manque de contraste :
	   on descend vers l'indigo du logo, qui reste la même famille. */
	--accent: #4f46e5;
	--accent-soft: #4338ca;
	--success: #12905e;
	--warn: #b8791a;

	--grad: linear-gradient(135deg, #4338ca 0%, #5b52e8 45%, #6d8bff 100%);
	--grad-text: linear-gradient(120deg, #4338ca 0%, #5b52e8 45%, #6d8bff 100%);

	--r-sm: 8px;
	--r: 14px;
	--r-lg: 20px;
	--r-xl: 28px;

	--shadow: 0 22px 55px -24px rgba(19, 24, 36, 0.32);
	--shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.1), 0 36px 80px -32px rgba(67, 56, 202, 0.42);

	--nav-bg: rgba(255, 255, 255, 0.76);
	--nav-bg-stuck: rgba(255, 255, 255, 0.94);
	--hover-tint: rgba(19, 24, 36, 0.05);
	--field-bg: #ffffff;
	--grid-line: rgba(19, 24, 36, 0.055);
	--aurora-opacity: 0.4;
	--card-top: #ffffff;
	--card-bottom: #fafbfe;
	--border-strong: #c6cede;
	--accent-tint: rgba(79, 70, 229, 0.08);
	--accent-line: rgba(79, 70, 229, 0.22);
	--accent-ink: #4338ca;
	--accent-ghost: rgba(79, 70, 229, 0.13);
	--panel-bg: linear-gradient(150deg, rgba(99, 102, 241, 0.09), rgba(255, 255, 255, 0.9) 62%);
	--dot: #c3cad9;

	--ease: cubic-bezier(0.32, 0.72, 0, 1);
	--col: min(100% - 40px, 1240px);
}

:root[data-theme="dark"] {
	--bg: #06080f;
	--bg-soft: #0a0d17;
	--surface: #10141f;
	--surface-2: #151a27;
	--border: #222839;
	--border-soft: #1a1f2d;
	--text: #eef0f5;
	--muted: #98a1b6;
	--faint: #6b7488;

	--accent: #6d8bff;
	--accent-soft: #829bff;
	--success: #3ecf8e;
	--warn: #f2b34a;

	--grad-text: linear-gradient(120deg, #8ea6ff 0%, #a5b4fc 40%, #6d8bff 100%);

	--shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
	--shadow-glow: 0 0 0 1px rgba(109, 139, 255, 0.14), 0 40px 90px -30px rgba(67, 56, 202, 0.7);

	--nav-bg: rgba(6, 8, 15, 0.72);
	--nav-bg-stuck: rgba(6, 8, 15, 0.92);
	--hover-tint: rgba(255, 255, 255, 0.045);
	--field-bg: rgba(6, 8, 15, 0.6);
	--grid-line: rgba(255, 255, 255, 0.028);
	--aurora-opacity: 0.66;
	--card-top: var(--surface);
	--card-bottom: rgba(16, 20, 31, 0.55);
	--border-strong: #2c364d;
	--accent-tint: rgba(109, 139, 255, 0.12);
	--accent-line: rgba(109, 139, 255, 0.24);
	--accent-ink: #b8c5ff;
	--accent-ghost: rgba(109, 139, 255, 0.14);
	--panel-bg: linear-gradient(150deg, rgba(67, 56, 202, 0.18), rgba(10, 13, 23, 0.9) 60%);
	--dot: #3a4256;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
picture {
	max-width: 100%;
	display: block;
}
/* ⛔ INDISPENSABLE. Nos images portent `width`/`height` en attributs (pour réserver
   la place et éviter que la page ne saute au chargement). Ces attributs posent une
   hauteur EN PIXELS : quand `max-width` réduit la largeur, la hauteur, elle, ne
   bouge pas — et la capture est étirée verticalement. `height: auto` rend la
   hauteur au ratio réel tout en gardant le bénéfice des attributs. */
img[width][height] {
	height: auto;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.18s var(--ease);
}
a:hover {
	color: var(--accent-soft);
}

h1,
h2,
h3,
h4 {
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	width: var(--col);
	margin-inline: auto;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--surface);
	padding: 12px 18px;
	border-radius: var(--r-sm);
	z-index: 200;
}
.skip:focus {
	left: 16px;
	top: 16px;
}

/* ---------------------------------------------------------------- En-tête --- */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	backdrop-filter: blur(14px);
	background: var(--nav-bg);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-stuck {
	border-bottom-color: var(--border-soft);
	background: var(--nav-bg-stuck);
}
.nav-inner {
	width: var(--col);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 28px;
	height: 72px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	flex: 0 0 auto;
}
.brand img {
	width: 32px;
	height: 32px;
}
.brand span i {
	font-style: normal;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.nav-links {
	display: flex;
	gap: 4px;
	margin-left: auto;
	list-style: none;
	padding: 0;
	margin-block: 0;
}
.nav-links a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--r-sm);
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
	transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-links a:hover {
	color: var(--text);
	background: var(--hover-tint);
}
.nav-cta {
	flex: 0 0 auto;
}
/* Bascule clair/sombre. Les deux icônes vivent dans le bouton ; le CSS montre
   celle qui correspond au thème COURANT — pas de manipulation de DOM à faire. */
.theme-toggle {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--hover-tint);
	color: var(--muted);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.theme-toggle:hover {
	color: var(--text);
	border-color: var(--border-strong);
}
.theme-toggle svg {
	width: 18px;
	height: 18px;
}
.theme-toggle .icon-moon {
	display: block;
}
.theme-toggle .icon-sun {
	display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
	display: block;
}

.nav-burger {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	width: 42px;
	height: 42px;
	color: var(--text);
	cursor: pointer;
	margin-left: auto;
	align-items: center;
	justify-content: center;
}
.nav-burger svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------- Boutons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
		background 0.2s var(--ease), border-color 0.2s var(--ease);
	font-family: inherit;
}
.btn svg {
	width: 17px;
	height: 17px;
}
.btn-primary {
	background: var(--grad);
	color: #fff;
	box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.8);
}
.btn-primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 44px -12px rgba(109, 139, 255, 0.9);
}
.btn-ghost {
	background: var(--hover-tint);
	border-color: var(--border);
	color: var(--text);
}
.btn-ghost:hover {
	color: var(--text);
	border-color: var(--border-strong);
	background: var(--accent-ghost);
	transform: translateY(-2px);
}
.btn-lg {
	padding: 16px 30px;
	font-size: 16.5px;
}

/* ----------------------------------------------------------------- Décor --- */
/* Aurore : trois halos qui dérivent lentement. Purement décoratif, retiré si
   l'utilisateur a demandé moins d'animation. */
.aurora {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 900px;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.aurora i {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(100px);
	opacity: var(--aurora-opacity);
	animation: drift 24s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) {
	width: 760px;
	height: 760px;
	left: -2%;
	top: 2%;
	background: radial-gradient(circle, rgba(67, 56, 202, 0.95), transparent 66%);
}
.aurora i:nth-child(2) {
	width: 680px;
	height: 680px;
	right: -4%;
	top: -6%;
	background: radial-gradient(circle, rgba(109, 139, 255, 0.68), transparent 66%);
	animation-delay: -8s;
}
.aurora i:nth-child(3) {
	width: 560px;
	height: 560px;
	left: 40%;
	top: 30%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.6), transparent 68%);
	animation-delay: -15s;
}
@keyframes drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(40px, -30px, 0) scale(1.12);
	}
}

.grid-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* ------------------------------------------------------------------ Hero --- */
.hero {
	position: relative;
	/* Espacement resserré : entre le titre et la première section, le regard ne doit
	   pas traverser un écran de vide. */
	padding: 128px 0 56px;
	overflow: hidden;
}
.hero-inner {
	position: relative;
	z-index: 1;
	width: var(--col);
	margin-inline: auto;
	display: grid;
	/* La capture est l'argument : elle prend plus de largeur que le texte. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 52px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px 7px 9px;
	border-radius: 999px;
	border: 1px solid var(--accent-line);
	background: var(--accent-tint);
	color: var(--accent-ink);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 26px;
}
.eyebrow b {
	background: var(--grad);
	color: #fff;
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hero h1 {
	font-size: clamp(2.05rem, 3.3vw, 2.85rem);
	letter-spacing: -0.035em;
	margin-bottom: 22px;
}
.hero h1 em {
	font-style: normal;
	position: relative;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-sub {
	font-size: 18.5px;
	color: var(--muted);
	max-width: 34em;
	margin-bottom: 30px;
}
.hero-sub strong {
	color: var(--text);
	font-weight: 600;
}
.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}
.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--muted);
	font-size: 14.5px;
}
.hero-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-trust svg {
	width: 16px;
	height: 16px;
	color: var(--success);
	flex: 0 0 auto;
}

/* Fenêtre d'application : le cadre qui met la capture en scène. */
.appframe-wrap {
	position: relative;
}
/* Halo posé DERRIÈRE le cadre : c'est lui qui décolle la capture du fond. */
.appframe-wrap::before {
	content: "";
	position: absolute;
	inset: 6% -8% -10% -8%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.5), transparent 66%);
	filter: blur(70px);
	z-index: 0;
	pointer-events: none;
}
.appframe {
	position: relative;
	z-index: 1;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-glow);
	overflow: hidden;
	/* ⚠ Aucune inclinaison 3D : une capture d'interface vue en perspective se lit
	   comme une capture DÉFORMÉE, pas comme un effet de style. Le relief vient du
	   halo et de l'ombre, qui ne touchent pas aux proportions. */
	transition: box-shadow 0.4s var(--ease);
}
.appframe-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border-soft);
}
.appframe-bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dot);
	display: block;
}
.appframe-bar span {
	margin-left: 10px;
	font-size: 12px;
	color: var(--faint);
	font-family: "JetBrains Mono", ui-monospace, monospace;
}
.appframe img {
	width: 100%;
	height: auto;
	display: block;
}

/* Emblème posé sur la capture : la marque s'affirme sans masquer l'interface.
   Sœur du cadre, jamais enfant — `.appframe` masque ce qui dépasse. La rotation est
   déclenchée au survol du BLOC entier (`.appframe-wrap`) : un disque de 120 px au
   milieu d'une capture est une cible minuscule, exiger de le viser rendrait l'effet
   invisible pour la plupart des visiteurs. */
.hero-emblem {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	width: 128px;
	height: 128px;
	margin: -64px 0 0 -64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
	box-shadow: 0 0 0 1px var(--accent-line), 0 18px 50px -12px rgba(67, 56, 202, 0.55);
	backdrop-filter: blur(6px);
	transition: transform 0.9s var(--ease), box-shadow 0.5s var(--ease);
	pointer-events: none;
}
:root[data-theme="dark"] .hero-emblem {
	background: radial-gradient(circle at 50% 40%, rgba(21, 26, 39, 0.96), rgba(16, 20, 31, 0.86));
}
/* ⚠ Seul l'ANNEAU DE PERLES tourne ; le disque « AI » reste droit. C'est le
   comportement de l'avatar en réflexion du chat, et c'est ce qui distingue un
   emblème vivant d'un logo qui pivote bêtement. `transform-box: fill-box` fixe le
   centre de rotation sur la boîte du groupe et non sur celle du SVG entier —
   sans cela, l'anneau décrit une orbite excentrée. */
@keyframes aikeep-spin {
	to {
		transform: rotate(360deg);
	}
}
.hero-emblem .logo-ring {
	transform-box: fill-box;
	transform-origin: center;
}
.appframe-wrap:hover .hero-emblem .logo-ring {
	animation: aikeep-spin 2.4s linear infinite;
}
.appframe-wrap:hover .hero-emblem {
	transform: scale(1.06);
	box-shadow: 0 0 0 1px var(--accent), 0 26px 70px -14px rgba(67, 56, 202, 0.75);
}

/* ---------------------------------------------------------------- Sections --- */
section {
	position: relative;
	padding: 62px 0;
}
.section-head {
	max-width: 46rem;
	margin: 0 auto 38px;
	text-align: center;
}
.section-head.left {
	margin-inline: 0;
	text-align: left;
}
.kicker {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}
.section-head h2 {
	font-size: clamp(1.85rem, 3.1vw, 2.6rem);
	margin-bottom: 16px;
}
.section-head p {
	color: var(--muted);
	font-size: 17.5px;
	margin: 0;
}

.alt {
	background: linear-gradient(180deg, transparent, var(--bg-soft) 12%, var(--bg-soft) 88%, transparent);
}

/* Cartes ------------------------------------------------------------------ */
.cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
/* Six capacités : on impose 3 colonnes (donc 2 rangées de 3). En `auto-fit`, un
   écran large en aurait fait 4 + 2, une rangée bancale. */
.cards.trio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
	.cards.trio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.cards.trio {
		grid-template-columns: minmax(0, 1fr);
	}
}
.card {
	position: relative;
	padding: 28px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border-soft);
	background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover {
	border-color: var(--border-strong);
	transform: translateY(-3px);
}
.card h3 {
	font-size: 19px;
	margin-bottom: 10px;
}
.card p {
	color: var(--muted);
	font-size: 15.5px;
	margin: 0;
	/* Demande CEO : texte justifié. `hyphens` évite les « rivières » de blanc que
	   la justification creuse dans une colonne étroite. */
	text-align: justify;
	hyphens: auto;
}
.card p + p {
	margin-top: 0.8em;
}
.card-icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: var(--accent-tint);
	border: 1px solid var(--accent-line);
	margin-bottom: 18px;
	color: var(--accent);
}
.card-icon svg {
	width: 22px;
	height: 22px;
}

/* Les 3 preuves : cartes plus fortes, numérotées. */
.proofs .card {
	padding-top: 34px;
}
.proofs .card::before {
	content: attr(data-n);
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: "JetBrains Mono", monospace;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-ghost);
}

/* Grille de domaines ------------------------------------------------------ */
/* Seize tuiles compactes : c'est l'ampleur qui doit se lire d'un coup d'œil, pas
   chaque libellé pris isolément. Une grille de cartes bavardes aurait produit
   l'effet inverse — trois paragraphes lus, treize ignorés. */
.domain-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.domain {
	padding: 18px 16px;
	border-radius: var(--r);
	border: 1px solid var(--border-soft);
	background: var(--surface);
	transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
		box-shadow 0.22s var(--ease);
}
.domain:hover {
	border-color: var(--accent-line);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -16px rgba(67, 56, 202, 0.5);
}
.domain-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--accent-tint);
	border: 1px solid var(--accent-line);
	color: var(--accent);
	margin-bottom: 12px;
}
.domain-icon svg {
	width: 19px;
	height: 19px;
}
.domain b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 3px;
}
.domain > span:last-child {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--muted);
}
.domain-more {
	margin: 22px 0 0;
	text-align: center;
	font-size: 16px;
	color: var(--muted);
}
.domain-more b {
	color: var(--text);
	font-weight: 600;
}

@media (max-width: 1040px) {
	.domain-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 720px) {
	.domain-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.domain {
		padding: 15px 13px;
	}
}

/* Étapes ------------------------------------------------------------------ */
.steps {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	counter-reset: step;
}
.step {
	padding: 24px;
	border-radius: var(--r);
	border: 1px solid var(--border-soft);
	background: var(--surface);
}
.step-n {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--grad);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}
.step h3 {
	font-size: 17px;
	margin-bottom: 8px;
}
.step p {
	color: var(--muted);
	font-size: 15px;
	margin: 0;
}

/* Galerie de captures ----------------------------------------------------- */
.shots-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 26px;
}
.shot-tab {
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--hover-tint);
	color: var(--muted);
	font-size: 14.5px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s var(--ease);
}
.shot-tab:hover {
	color: var(--text);
	border-color: var(--border-strong);
}
.shot-tab[aria-selected="true"] {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
}
.shot-stage {
	position: relative;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.shot-panel {
	display: none;
}
.shot-panel.is-active {
	display: block;
	animation: fade 0.4s var(--ease);
}
@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.shot-caption {
	margin-top: 16px;
	text-align: center;
	color: var(--muted);
	font-size: 15px;
}

/* Bandeau sécurité -------------------------------------------------------- */
.secure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.secure-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 18px;
}
.secure-list li {
	display: flex;
	gap: 14px;
}
.secure-list svg {
	width: 21px;
	height: 21px;
	color: var(--accent);
	flex: 0 0 auto;
	margin-top: 3px;
}
/* Le TITRE de l'item est un <strong> ; les <b> internes sont des mises en
   évidence dans la phrase. Mettre `display: block` sur `b` faisait passer chaque
   terme technique à la ligne, au milieu du texte courant. */
.secure-list strong {
	display: block;
	margin-bottom: 3px;
	font-size: 16.5px;
}
.secure-list span {
	color: var(--muted);
	font-size: 15.5px;
}
.callout {
	padding: 26px 28px;
	border-radius: var(--r-lg);
	border: 1px solid var(--accent-line);
	background: var(--panel-bg);
}
.callout h3 {
	font-size: 18px;
	margin-bottom: 10px;
}
.callout p {
	color: var(--muted);
	font-size: 15.5px;
	margin-bottom: 0.8em;
}
.callout p:last-child {
	margin-bottom: 0;
}
/* Second encadré de la colonne : même famille, moins appuyé, pour qu'il se lise
   comme une précision et non comme un second argument principal. */
.callout-soft {
	margin-top: 18px;
	background: var(--surface);
	border-color: var(--border-soft);
}
.callout-soft h3 {
	font-size: 16.5px;
}
.callout-soft p {
	font-size: 15px;
}

/* Cadre contractuel de l'inférence --------------------------------------- */
/* Bloc pleine largeur sous la grille sécurité : c'est une information juridique
   dense, qui se lit mieux en trois colonnes courtes qu'empilée dans la colonne
   de droite. */
.vertex {
	margin-top: 34px;
	padding: 30px 32px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface);
}
.vertex-head {
	max-width: 46rem;
	margin-bottom: 26px;
}
.vertex-head h3 {
	font-size: 21px;
	margin-bottom: 10px;
}
.vertex-head p {
	color: var(--muted);
	font-size: 16px;
	margin: 0;
}
.vertex-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--border-soft);
}
.vertex-grid h4 {
	font-size: 15px;
	margin-bottom: 10px;
	color: var(--accent);
	letter-spacing: 0;
}
.vertex-grid p {
	color: var(--muted);
	font-size: 15px;
	text-align: justify;
	hyphens: auto;
}
.vertex-grid p:last-child {
	margin-bottom: 0;
}
.vertex-grid b {
	color: var(--text);
}
.vertex-note {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
	color: var(--faint);
	font-size: 14.5px;
}

@media (max-width: 900px) {
	.vertex-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.vertex {
		padding: 24px 20px;
	}
}

/* FAQ --------------------------------------------------------------------- */
.faq {
	max-width: 50rem;
	margin-inline: auto;
	display: grid;
	gap: 12px;
}
.faq details {
	border: 1px solid var(--border-soft);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.2s var(--ease);
}
.faq details[open] {
	border-color: var(--border-strong);
}
.faq summary {
	cursor: pointer;
	padding: 19px 22px;
	font-weight: 600;
	font-size: 16.5px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg);
	flex: 0 0 auto;
	transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
	transform: rotate(-135deg);
}
.faq .faq-body {
	padding: 0 22px 20px;
	color: var(--muted);
	font-size: 15.5px;
}
.faq .faq-body p:last-child {
	margin-bottom: 0;
}

/* Formulaire de démo ------------------------------------------------------ */
.demo {
	position: relative;
	overflow: hidden;
}
.demo-box {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: 52px;
	padding: 46px;
	border-radius: var(--r-xl);
	border: 1px solid var(--border);
	background: var(--panel-bg);
	box-shadow: var(--shadow);
}
.demo-box h2 {
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	margin-bottom: 14px;
}
.demo-box > div > p {
	color: var(--muted);
	font-size: 16.5px;
}
.demo-points {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: grid;
	gap: 11px;
	color: var(--muted);
	font-size: 15.5px;
}
.demo-points li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.demo-points svg {
	width: 17px;
	height: 17px;
	color: var(--success);
	flex: 0 0 auto;
	margin-top: 4px;
}

form.demo-form {
	display: grid;
	gap: 14px;
	align-content: start;
}
.field-row {
	display: grid;
	gap: 6px;
}
.field-row label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.field-row label span {
	color: var(--faint);
	font-weight: 400;
}
input,
textarea,
select {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	background: var(--field-bg);
	color: var(--text);
	font-family: inherit;
	font-size: 15.5px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input::placeholder,
textarea::placeholder {
	color: var(--faint);
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(109, 139, 255, 0.16);
}
textarea {
	min-height: 96px;
	resize: vertical;
}
.form-note {
	font-size: 13px;
	color: var(--faint);
	margin: 0;
}
.form-note a {
	color: var(--muted);
	text-decoration: underline;
}
/* Piège à robots : invisible pour un humain, rempli par un automate. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form-msg {
	display: none;
	padding: 13px 16px;
	border-radius: var(--r-sm);
	font-size: 15px;
	border: 1px solid transparent;
}
.form-msg.is-ok {
	display: block;
	background: rgba(62, 207, 142, 0.1);
	border-color: rgba(62, 207, 142, 0.35);
	color: #8ce8bd;
}
.form-msg.is-err {
	display: block;
	background: rgba(245, 101, 101, 0.1);
	border-color: rgba(245, 101, 101, 0.35);
	color: #ffb3b3;
}

/* Pied de page ------------------------------------------------------------ */
footer {
	border-top: 1px solid var(--border-soft);
	padding: 56px 0 34px;
	background: var(--bg-soft);
}
.foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-bottom: 42px;
}
.foot-grid h4 {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 16px;
}
.foot-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}
.foot-grid a {
	color: var(--muted);
	font-size: 15px;
}
.foot-grid a:hover {
	color: var(--text);
}
.foot-about p {
	color: var(--muted);
	font-size: 15px;
	max-width: 30em;
	margin: 14px 0 0;
}
.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: center;
	padding-top: 26px;
	border-top: 1px solid var(--border-soft);
	color: var(--faint);
	font-size: 14px;
}

/* Pages légales ----------------------------------------------------------- */
.legal {
	padding: 130px 0 80px;
}
.legal .wrap {
	max-width: 54rem;
}
.legal h1 {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	margin-bottom: 10px;
}
.legal .legal-meta {
	color: var(--faint);
	font-size: 14.5px;
	margin-bottom: 44px;
	font-family: "JetBrains Mono", monospace;
}
.legal section {
	padding: 0;
	margin-bottom: 38px;
}
.legal h2 {
	font-size: 20px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-soft);
}
.legal p {
	color: var(--muted);
	font-size: 16px;
}
.legal ul {
	color: var(--muted);
	font-size: 16px;
	padding-left: 22px;
	margin: 0 0 1em;
}
.legal li {
	margin-bottom: 8px;
}
.legal .toc {
	padding: 22px 26px;
	border-radius: var(--r);
	border: 1px solid var(--border-soft);
	background: var(--surface);
	margin-bottom: 44px;
}
.legal .toc ul {
	list-style: none;
	padding: 0;
	columns: 2;
	column-gap: 32px;
	margin: 0;
}
.legal .toc a {
	font-size: 15px;
}

/* Animation d'entrée ------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------- Responsive --- */
@media (max-width: 1000px) {
	.hero-inner,
	.secure,
	.demo-box {
		grid-template-columns: minmax(0, 1fr);
	}
	.hero {
		padding-top: 112px;
	}
	.appframe {
		transform: none;
	}
	.appframe:hover {
		transform: none;
	}
	.demo-box {
		padding: 32px 26px;
		gap: 34px;
	}
	.foot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
	/* Menu déplié : le panneau est fait de vrais éléments de flux qui passent à la
	   ligne (`flex-wrap`). Une superposition en `position: absolute` obligerait à
	   connaître la hauteur du bloc de liens pour placer le bouton en dessous —
	   valeur qu'on ne peut que deviner, donc qui finit par être fausse. */
	.nav-inner {
		flex-wrap: wrap;
		height: auto;
		min-height: 72px;
		gap: 0 20px;
		padding-block: 14px;
	}
	.nav-links,
	.nav-cta {
		display: none;
	}
	.nav-burger {
		display: flex;
		margin-left: 0;
	}
	/* ⚠ ORDRE EXPLICITE. Dans le flux du document, la liste de liens précède la
	   bascule de thème et le bouton de menu. Une fois dépliée, elle occupe une
	   ligne entière et repousse donc TOUT ce qui la suit sous elle : la bascule
	   semblait « sauter » quelque part dans le menu. On fige ici l'ordre visuel —
	   marque, bascule, bouton sur la première ligne ; panneau en dessous. */
	.brand {
		order: 1;
	}
	.theme-toggle {
		order: 2;
		margin-left: auto;
	}
	.nav-burger {
		order: 3;
	}
	.nav.is-open .nav-links {
		order: 4;
	}
	.nav.is-open .nav-cta {
		order: 5;
	}
	/* Le bouton devient une croix : ouvrir sans pouvoir refermer d'un même geste
	   oblige à viser un lien ou à recharger la page. */
	.nav-burger .icon-close {
		display: none;
	}
	.nav.is-open .nav-burger .icon-burger {
		display: none;
	}
	.nav.is-open .nav-burger .icon-close {
		display: block;
	}
	.nav.is-open {
		background: var(--bg);
		border-bottom-color: var(--border-soft);
	}
	.nav.is-open .nav-links {
		display: grid;
		flex: 1 0 100%;
		gap: 2px;
		margin: 10px 0 4px;
		padding-top: 10px;
		border-top: 1px solid var(--border-soft);
	}
	.nav.is-open .nav-links a {
		padding: 13px 12px;
		font-size: 16.5px;
	}
	.nav.is-open .nav-cta {
		display: block;
		flex: 1 0 100%;
		padding-bottom: 6px;
	}
	.nav.is-open .nav-cta .btn {
		width: 100%;
	}
	.legal .toc ul {
		columns: 1;
	}
}

@media (max-width: 620px) {
	body {
		font-size: 16px;
	}
	section {
		padding: 48px 0;
	}
	.hero {
		padding: 100px 0 40px;
	}
	.hero-cta .btn {
		width: 100%;
	}
	.card,
	.step {
		padding: 22px;
	}
	.foot-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.shots-tabs {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 6px;
	}
	.shot-tab {
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
	}
}