/* =========================================================
   WEBASKY - feuille de style principale
   Style pixel art inspire du design system CatVenture :
   bordures 4px, ombre dure decalee, Pixelify Sans, palette creme/orange.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	/* Palette heritee de CatVenture (theme/Colors.kt) */
	--ink: #3A2417;
	--ink-soft: #6F513A;
	--frame: #4A2F1E;
	--outline-variant: #B7A89A;

	--bg: #FFF7EA;
	--surface: #FFFAF2;
	--surface-alt: #FDEBCD;

	--primary: #F5781F;
	--primary-soft: #FFF1DD;
	--secondary: #F5B81F;
	--secondary-soft: #FDF2D4;

	--success: #5FAE3A;
	--danger: #E8536B;
	--info: #5DB4D6;
	--violet: #8F7FE0;
	--pink: #F5A3B8;

	/* Ciel du hero */
	--sky-1: #7ED0EE;
	--sky-2: #A8E1F2;
	--sky-3: #CFEFF8;

	/* Couleur d'accent surchargee page par page (voir [data-accent]) */
	--accent: var(--primary);
	--accent-soft: var(--primary-soft);

	/* Typo */
	--font-pixel: "Pixelify Sans", "Courier New", monospace;
	--font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
	/* Astuce : pour un rendu 100 % pixel, mettre --font-body: var(--font-pixel); */

	/* Geometrie */
	--border: 4px;
	--shadow-offset: 6px;
	--radius: 0px;

	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 72px;

	--maxw: 1120px;
	--header-h: 76px;
}

/* Accents par application */
[data-accent="catventure"] { --accent: #F5781F; --accent-soft: #FFF1DD; }
[data-accent="memorieyes"] { --accent: #8F7FE0; --accent-soft: #EFECFC; }
[data-accent="lab"]        { --accent: #5DB4D6; --accent-soft: #E4F4FB; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
	margin: 0;
	background-color: var(--bg);
	/* Damier tres leger, facon fond de jeu retro */
	background-image:
		linear-gradient(45deg, rgba(58, 36, 23, .025) 25%, transparent 25%, transparent 75%, rgba(58, 36, 23, .025) 75%),
		linear-gradient(45deg, rgba(58, 36, 23, .025) 25%, transparent 25%, transparent 75%, rgba(58, 36, 23, .025) 75%);
	background-size: 32px 32px;
	background-position: 0 0, 16px 16px;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
	font-family: var(--font-pixel);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--space-sm);
	letter-spacing: .5px;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
p  { margin: 0 0 var(--space-sm); }

::selection { background: var(--accent); color: #fff; }

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

/* ---------- 3. Utilitaires ---------- */
.wrap { width: min(100% - 2 * var(--space-md), var(--maxw)); margin-inline: auto; }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
/* Modificateurs de rythme vertical : rapprocher deux sections liees
   (ex. telechargement + communaute, communaute + liens legaux). */
.section--flush-top { padding-top: var(--space-sm); }
.section--flush-bottom { padding-bottom: var(--space-sm); }
.section__head { max-width: 62ch; margin-bottom: var(--space-lg); }
.section__head--center { margin-inline: auto; text-align: center; }

.lede { font-size: 1.15rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
	font-family: var(--font-pixel);
	font-size: .95rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-xs);
	display: block;
}

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ---------- 4. Brique pixel (equivalent CatPixelContainer) ---------- */
.pixel-box {
	position: relative;
	background: var(--surface);
	border: var(--border) solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	padding: var(--space-md);
}

/* Variante a double cadre interne (innerFrame = true cote Compose) */
.pixel-box--frame {
	box-shadow:
		inset 0 0 0 8px var(--frame),
		inset 0 0 0 12px var(--ink),
		var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	padding: calc(var(--space-md) + 12px);
}

.pixel-box--flat { box-shadow: none; }
.pixel-box--alt { background: var(--surface-alt); }
.pixel-box--accent { background: var(--accent-soft); }

/* ---------- 5. Boutons ---------- */
.btn {
	--btn-bg: var(--accent);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-pixel);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 12px 22px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform .06s steps(2), box-shadow .06s steps(2), background-color .15s;
}
.btn:hover { color: var(--btn-fg); filter: brightness(1.06); }
.btn:active {
	transform: translate(var(--shadow-offset), var(--shadow-offset));
	box-shadow: 0 0 0 0 var(--ink);
}
.btn--ghost { --btn-bg: var(--surface); --btn-fg: var(--ink); }
.btn--dark { --btn-bg: var(--frame); --btn-fg: #fff; }
.btn--sm { font-size: .95rem; padding: 8px 16px; --shadow-offset: 4px; }
.btn--block { display: flex; justify-content: center; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* ---------- 6. Badges et tags ---------- */
.tag {
	display: inline-block;
	font-family: var(--font-pixel);
	font-size: .8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 10px;
	background: var(--surface-alt);
	border: 3px solid var(--ink);
	color: var(--ink);
}
.tag--accent { background: var(--accent); color: #fff; }
.tag--soon { background: var(--secondary); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

.status-dot {
	display: inline-block; width: 10px; height: 10px;
	background: var(--success); border: 2px solid var(--ink); margin-right: 6px;
}
.status-dot--soon { background: var(--secondary); }

/* Plateformes : badge avec le logo de la marque en tete (leading icon).
   REGLE : on n'affiche un badge QUE si l'application est reellement publiee sur
   la plateforme. Pas de badge grise "bientot" — l'absence vaut reponse.
   L'icone Apple existe deja (assets/img/decor/apple-icon.svg) pour le jour ou
   une application sortira sur iOS. */
.plat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-pixel);
	font-size: .78rem;
	letter-spacing: 1px;
	padding: 3px 9px;
	background: var(--surface-alt);
	border: 3px solid var(--ink);
	color: var(--ink);
	line-height: 1.4;
}
.plat img { width: 14px; height: 14px; image-rendering: pixelated; flex: none; }

/* ---------- 7. En-tete ---------- */
.header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: var(--border) solid var(--ink);
}
.header__inner {
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Logo Webasky — un seul fichier (assets/img/logos/webasky.png), jamais recadre.
   PAS de image-rendering: pixelated ici : le logo est dessine en formes rondes
   et lissees, le pixeliser le degraderait. La bordure de 3 px le raccorde au
   reste du design system. */
.brand__logo {
	height: 52px;
	width: auto;
	border: 3px solid var(--ink);
	flex: none;
}
.brand__name {
	font-family: var(--font-pixel);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 1px;
}
.brand__name b { color: var(--accent); font-weight: 700; }

/* Dans les pieds de page, le bloc de marque est plus discret */
.footer .brand__logo { height: 44px; }
.footer .brand__name { font-size: 1.25rem; }

.nav { display: flex; align-items: center; gap: var(--space-sm); }
.nav a {
	font-family: var(--font-pixel);
	font-size: 1.05rem;
	text-decoration: none;
	padding: 6px 4px;
	border-bottom: 4px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.burger {
	display: none;
	background: var(--surface);
	border: var(--border) solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	width: 46px; height: 42px;
	cursor: pointer;
	padding: 9px 10px;
}
.burger span { display: block; height: 4px; background: var(--ink); margin-bottom: 5px; }
.burger span:last-child { margin-bottom: 0; }

/* ---------- 8. Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	border-bottom: var(--border) solid var(--ink);
	background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
	padding-block: var(--space-xl) 0;
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--space-lg);
	align-items: center;
	padding-bottom: 96px;
}
.hero--simple .hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero h1 { text-shadow: 4px 4px 0 rgba(58, 36, 23, .18); }
.hero .lede { color: var(--ink); max-width: 52ch; }

/* Nuages pixel */
.cloud {
	position: absolute;
	z-index: 1;
	image-rendering: pixelated;
	opacity: .95;
	animation: drift linear infinite;
}
.cloud--1 { top: 12%; left: -160px; width: 150px; animation-duration: 68s; animation-delay: -18s; }
.cloud--2 { top: 34%; left: -260px; width: 96px;  animation-duration: 95s; animation-delay: -55s; opacity: .75; }
.cloud--3 { top: 6%;  left: -420px; width: 190px; animation-duration: 120s; animation-delay: -95s; opacity: .6; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 460px)); } }

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

/* Sol pixel en bas du hero */
.hero__ground {
	position: absolute;
	inset: auto 0 0 0;
	height: 72px;
	z-index: 1;
	background: repeating-linear-gradient(90deg, #6FA83A 0 16px, #7FBB45 16px 32px);
	border-top: var(--border) solid var(--ink);
}
.hero__ground::after {
	content: "";
	position: absolute;
	inset: 24px 0 0 0;
	background: repeating-linear-gradient(90deg, #8B5E3C 0 16px, #7A5133 16px 32px);
	border-top: var(--border) solid var(--ink);
}

/* ---------- 9. Device pixel (mockup telephone) ---------- */
.device {
	--device-w: 260px;
	width: var(--device-w);
	background: var(--frame);
	border: var(--border) solid var(--ink);
	box-shadow: 8px 8px 0 0 var(--ink);
	padding: 12px 10px 26px;
	position: relative;
	margin-inline: auto;
}
.device::before { /* encoche */
	content: "";
	position: absolute;
	top: 4px; left: 50%;
	transform: translateX(-50%);
	width: 64px; height: 8px;
	background: var(--ink);
}
.device::after { /* barre home */
	content: "";
	position: absolute;
	bottom: 10px; left: 50%;
	transform: translateX(-50%);
	width: 72px; height: 6px;
	background: var(--secondary);
	border: 2px solid var(--ink);
}
.device__screen {
	position: relative;
	aspect-ratio: 9 / 19.5;
	background: var(--surface-alt);
	border: var(--border) solid var(--ink);
	overflow: hidden;
}
.device__screen img {
	width: 100%; height: 100%;
	object-fit: cover;
	image-rendering: pixelated;
}
/* Leger effet CRT / scanlines sur l'ecran */
.device__screen::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 4px);
	mix-blend-mode: multiply;
}
.device--lg { --device-w: 300px; }
.device--sm { --device-w: 200px; }
.device--tilt { transform: rotate(-3deg); }
.device--tilt-r { transform: rotate(3deg); }

.device-stage {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.device-caption {
	font-family: var(--font-pixel);
	font-size: .95rem;
	text-align: center;
	margin-top: 12px;
	color: var(--ink-soft);
}

/* ---------- 10. Carte application ---------- */
.app-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-decoration: none;
	color: inherit;
	transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.app-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 0 var(--ink);
	color: inherit;
}
.app-card__top { display: flex; align-items: center; gap: var(--space-sm); }
.app-card__logo {
	width: 64px; height: 64px;
	border: var(--border) solid var(--ink);
	background: var(--surface-alt);
	flex: none;
}
.app-card__title { margin: 0; font-size: 1.4rem; }
.app-card__sub { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.app-card__body { margin: 0; flex: 1; }
.app-card__cta {
	font-family: var(--font-pixel);
	color: var(--accent);
	font-size: 1.05rem;
}
.app-card--soon { opacity: .85; }

/* ---------- 11. Blocs de contenu ---------- */
.feature { display: flex; gap: var(--space-sm); align-items: flex-start; }
.feature__icon {
	flex: none;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	background: var(--accent-soft);
	border: var(--border) solid var(--ink);
	font-size: 1.4rem;
}
.feature h3 { margin-bottom: 4px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
}
.split--reverse > :first-child { order: 2; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist li::before {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	margin-top: 7px;
	background: var(--accent);
	border: 3px solid var(--ink);
}

.stat { text-align: center; }
.stat__value { font-family: var(--font-pixel); font-size: 2.2rem; color: var(--accent); display: block; }
.stat__label { font-size: .9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- 11 bis. Carrousel de fonctionnalites ---------- */
.showcase { position: relative; }

.showcase__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Aucun padding lateral : il ferait deborder le debut du slide suivant
	   dans la zone visible (une bande de quelques pixels collee au panneau).
	   L'espace pour l'ombre dure est pris dans le padding du slide lui-meme. */
	padding: 6px 0 12px;
}
.showcase__viewport::-webkit-scrollbar { display: none; }

.showcase__track { display: flex; }

.showcase__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Reserve pour l'ombre dure (6px) du panneau. Avec box-sizing: border-box,
	   le slide occupe exactement la largeur du viewport : le suivant demarre
	   pile au bord droit, donc invisible tant qu'on n'a pas fait defiler. */
	padding-right: 10px;
}

.showcase__panel {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-lg);
	align-items: center;
	min-height: 100%;
}
.showcase__panel h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.showcase .device { --device-w: 215px; }
.showcase__index {
	font-family: var(--font-pixel);
	color: var(--accent);
	letter-spacing: 2px;
	display: block;
	margin-bottom: var(--space-xs);
}

.showcase__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}
.showcase__btn {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--surface);
	color: var(--ink);
	border: var(--border) solid var(--ink);
	box-shadow: 4px 4px 0 0 var(--ink);
	font-family: var(--font-pixel);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.showcase__btn:hover { background: var(--accent-soft); }
.showcase__btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--ink); }
.showcase__btn[disabled] { opacity: .4; cursor: default; box-shadow: 4px 4px 0 0 var(--ink); }

.showcase__dots { display: flex; gap: 8px; }
.showcase__dot {
	width: 16px;
	height: 16px;
	padding: 0;
	background: var(--surface);
	border: 3px solid var(--ink);
	cursor: pointer;
}
.showcase__dot[aria-current="true"] { background: var(--accent); }

@media (max-width: 900px) {
	.showcase__panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.showcase__panel .checklist { text-align: left; }
}

/* Badges de store */
.store-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	background: var(--frame);
	color: #fff;
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	text-decoration: none;
	font-family: var(--font-pixel);
	line-height: 1.1;
	transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.store-badge img { width: 26px; height: 26px; }
.store-badge span { font-size: 1.2rem; }
.store-badge small { display: block; font-size: .7rem; opacity: .8; letter-spacing: 1px; }
.store-badge:hover { color: #fff; filter: brightness(1.15); }
.store-badge:active {
	transform: translate(var(--shadow-offset), var(--shadow-offset));
	box-shadow: 0 0 0 0 var(--ink);
}

/* Bloc de telechargement : badge + QR code */
.download {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}
.qr {
	display: inline-block;
	background: var(--surface);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	padding: 10px;
}
.qr img { width: 148px; height: 148px; image-rendering: pixelated; }
.qr-caption {
	font-family: var(--font-pixel);
	font-size: .9rem;
	color: var(--ink-soft);
	letter-spacing: 1px;
}

/* Liens legaux d'une application (bloc conditionnel : absent si l'app n'en a pas) */
.legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	font-size: .92rem;
}
.legal-links a { color: var(--ink-soft); }

/* Cartes communaute : une carte = un reseau */
.social-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-sm);
	margin-top: var(--space-md);
}
/* Carte unique : elle garde la largeur qu'elle aurait a deux et reste centree,
   plutot que de s'etirer sur toute la ligne. Annule sous 720px (voir 14. Responsive). */
.social-row > :only-child {
	width: 100%;
	max-width: calc(50% - var(--space-sm) / 2);
	margin-inline: auto;
}
.social-card {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--surface);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink);
	color: var(--ink);
	text-decoration: none;
	text-align: left;
	transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.social-card:hover { background: var(--accent-soft); }
.social-card:active {
	transform: translate(var(--shadow-offset), var(--shadow-offset));
	box-shadow: 0 0 0 0 var(--ink);
}
/* Logo officiel Discord : ni pixelise ni etire (le symbole n'est pas carre,
   ratio 126.644x96). La boite reste carree, l'image est centree dedans. */
.social-card__icon {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: contain;
	border: 3px solid var(--ink);
	background: var(--surface-alt);
	padding: 5px;
}
.social-card__name {
	display: block;
	font-family: var(--font-pixel);
	font-size: 1.3rem;
	line-height: 1.1;
}
.social-card__desc {
	display: block;
	margin-top: 4px;
	font-size: .92rem;
	color: var(--ink-soft);
}
/* Marqueur des elements provisoires (a supprimer une fois renseignes) */
.todo {
	display: inline-block;
	font-family: var(--font-pixel);
	font-size: .72rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 2px 8px;
	margin-left: 8px;
	background: #E01B24;
	color: #fff;
	border: 3px solid var(--ink);
	vertical-align: middle;
}
.todo--block { display: block; width: fit-content; margin: 0 auto var(--space-sm); }

/* ---------- 12. Pied de page ---------- */
.footer {
	border-top: var(--border) solid var(--ink);
	background: var(--surface);
	padding-block: var(--space-lg);
	margin-top: var(--space-sm);
}
.footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-lg);
}
.footer h4 { font-family: var(--font-pixel); font-size: 1.05rem; margin-bottom: 10px; letter-spacing: 1px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__bottom {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 3px dashed var(--outline-variant);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: .9rem;
	color: var(--ink-soft);
}

/* ---------- 13. Apparition au scroll ---------- */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }

/* ---------- 14. Responsive ---------- */
@media (max-width: 900px) {
	.hero__inner, .split { grid-template-columns: 1fr; }
	.split--reverse > :first-child { order: 0; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	:root { --space-xl: 48px; }
	.burger { display: block; }
	.nav {
		display: none;
		position: absolute;
		top: var(--header-h);
		left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--surface);
		border-bottom: var(--border) solid var(--ink);
		padding: var(--space-sm);
	}
	.nav.is-open { display: flex; }
	.nav a { padding: 12px 4px; border-bottom: 3px dashed var(--outline-variant); }
	.nav a:last-child { border-bottom: none; }
	.hero__inner { padding-bottom: 84px; }
	.footer__grid { grid-template-columns: 1fr; }
	.social-row > :only-child { max-width: none; }
}