/**
 * Jetons de la maquette d'accueil.
 *
 * Fichier produit par tools/porter-jetons.mjs, qui les lit dans la source
 * de la maquette : ne pas modifier à la main, relancer l'outil.
 *
 * Deux familles. `--nx-*` porte les couleurs, qui changent avec le thème.
 * `--nl-*` porte la mise en page, qui change avec la largeur.
 *
 * Le thème est posé par un attribut `data-theme` sur la racine, écrit avant
 * le premier rendu pour qu'aucune page ne s'affiche dans le mauvais thème
 * avant de basculer.
 *
 * Le sombre est le défaut absolu : il ne dépend ni du système du visiteur,
 * ni de l'heure, ni de la maquette dont l'export ordinateur s'ouvre en
 * clair. Le clair ne s'applique que si le visiteur l'a demandé, et ce choix
 * est retenu. D'où l'absence de règle `prefers-color-scheme` : une telle
 * règle ferait du système la décision, ce qu'il n'est pas.
 */

/* --- Thème sombre : le défaut, sans condition ------------------------- */
:root {
	--nx-bg: #0A0A0B;
	--nx-surface: #141415;
	--nx-surface2: #1B1B1D;
	--nx-field: #1A1A1C;
	--nx-chip: rgba(20,20,21,0.8);
	--nx-ink: #F3F1ED;
	--nx-ink2: #C4C0B9;
	--nx-muted: #938F88;
	--nx-line: #1F1F21;
	--nx-line-strong: #2E2D2C;
	--nx-card-line: #1F1F21;
	--nx-accent: #C88B5B;
	--nx-accent-ink: #D39A6B;
	--nx-accent-soft: #6E4B32;
	--nx-on-accent: #0A0A0B;
	--nx-swatch-edge: rgba(255,255,255,0.18);
	--nx-btn-bg: #C88B5B;
	--nx-btn-ink: #0A0A0B;
	--nx-btn-hover: #D9A073;
	--nx-header-bg: rgba(10,10,11,0.82);
	--nx-hero-bg: radial-gradient(60% 80% at 72% 50%, rgba(200,139,91,0.16), rgba(200,139,91,0) 70%), #0E0D0C;
	--nx-hero-ink: #F6F4F0;
	--nx-hero-ink2: #BDB8B0;
	--nx-hero-line: #3A3734;
	--nx-card-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
	--nx-band-bg: #15110E;
	--nx-band-accent: #D39A6B;
	--nx-foot-bg: #070707;
	color-scheme: dark;
}

/* --- Thème clair : uniquement sur choix du visiteur ------------------- */
:root[data-theme="light"] {
	--nx-bg: #F4F3F0;
	--nx-surface: #FFFFFF;
	--nx-surface2: #ECEAE6;
	--nx-field: #ECEAE6;
	--nx-chip: rgba(255,255,255,0.88);
	--nx-ink: #0F0F10;
	--nx-ink2: #45433F;
	--nx-muted: #6B6863;
	--nx-line: #E4E1DC;
	--nx-line-strong: #D3CFC8;
	--nx-card-line: #E7E4DF;
	--nx-accent: #A8683A;
	--nx-accent-ink: #8A5229;
	--nx-accent-soft: #C9A184;
	--nx-on-accent: #FFFFFF;
	--nx-swatch-edge: rgba(0,0,0,0.12);
	--nx-btn-bg: #0F0F10;
	--nx-btn-ink: #FFFFFF;
	--nx-btn-hover: #2A2927;
	--nx-header-bg: rgba(244,243,240,0.86);
	--nx-hero-bg: #E8E6E1;
	--nx-hero-ink: #0F0F10;
	--nx-hero-ink2: #45433F;
	--nx-hero-line: #BDB8B0;
	--nx-card-shadow: none;
	--nx-band-bg: #121213;
	--nx-band-accent: #D09A6C;
	--nx-foot-bg: #FFFFFF;
	color-scheme: light;
}

/* --- Mise en page : téléphone, la base -------------------------------- */
:root {
	--nl-w: 390px;
	--nl-pad: 20px;
	--nl-nav-gap: 0;
	--nl-sy: 64px;
	--nl-head-gap: 24px;
	--nl-h1: 44px;
	--nl-h2: 28px;
	--nl-h2big: 34px;
	--nl-lead: 16px;
	--nl-hero-outer: 8px 8px 0;
	--nl-hero-radius: 20px;
	--nl-hero-cols: minmax(0,1fr);
	--nl-hero-gap: 24px;
	--nl-hero-pad: 8px 16px 28px;
	--nl-hero-h: 0;
	--nl-hero-text-gap: 14px;
	--nl-hero-img-order: 0;
	--nl-hero-img-h: 360px;
	--nl-hero-img-radius: 14px;
	--nl-cta-dir: column;
	--nl-h1-min: 2em;
	--nl-ctrl-top: 0;
	--nl-pill-cols: minmax(0,1fr);
	--nl-pill-gap: 10px;
	--nl-pill-pad: 24px 20px 0;
	--nl-cat-flow: column;
	--nl-cat-cols: none;
	--nl-cat-auto: 128px;
	--nl-cat-gap: 12px;
	--nl-cat-font: 14px;
	--nl-prod-cols: repeat(2, minmax(0,1fr));
	--nl-prod-gap: 10px;
	--nl-card-pad: 8px;
	--nl-card-body-pad: 12px 4px 10px;
	--nl-p-name: 14px;
	--nl-p-price: 15px;
	--nl-band-cols: minmax(0,1fr);
	--nl-band-gap: 32px;
	--nl-band-pad: 24px 20px 56px;
	--nl-band-img-order: 0;
	--nl-band-img-h: 340px;
	--nl-feat-flow: column;
	--nl-feat-cols: none;
	--nl-feat-auto: 270px;
	--nl-feat-pad: 22px;
	--nl-trust-cols: repeat(2, 1fr);
	--nl-trust-dir: column;
	--nl-trust-pad: 24px 12px 24px 0;
	--nl-foot-pad: 48px 20px 32px;
	--nl-foot-top: minmax(0,1fr);
	--nl-foot-cols: minmax(0,1fr);
	--nl-legal-pad: 24px 20px 32px;
	--nl-legal-dir: column;
	--nl-legal-align: flex-start;
}

/* --- Tablette (768px et plus) ---------------------------------------- */
@media (min-width: 768px) {
	:root {
		--nl-w: 834px;
		--nl-pad: 40px;
		--nl-nav-gap: 24px;
		--nl-sy: 88px;
		--nl-head-gap: 32px;
		--nl-h1: 60px;
		--nl-h2: 34px;
		--nl-h2big: 44px;
		--nl-lead: 17px;
		--nl-hero-outer: 12px 16px 0;
		--nl-hero-radius: 24px;
		--nl-hero-cols: minmax(0,1fr) minmax(0,1fr);
		--nl-hero-gap: 24px;
		--nl-hero-pad: 32px 24px 32px 40px;
		--nl-hero-h: 520px;
		--nl-hero-text-gap: 18px;
		--nl-hero-img-order: 2;
		--nl-hero-img-h: 456px;
		--nl-hero-img-radius: 18px;
		--nl-cta-dir: column;
		--nl-h1-min: 2em;
		--nl-ctrl-top: 4px;
		--nl-pill-cols: repeat(3, 1fr);
		--nl-pill-gap: 16px;
		--nl-pill-pad: 24px 40px 0;
		--nl-cat-flow: row;
		--nl-cat-cols: repeat(5, minmax(0,1fr));
		--nl-cat-auto: auto;
		--nl-cat-gap: 12px;
		--nl-cat-font: 14px;
		--nl-prod-cols: repeat(2, minmax(0,1fr));
		--nl-prod-gap: 16px;
		--nl-card-pad: 12px;
		--nl-card-body-pad: 16px 6px 12px;
		--nl-p-name: 16px;
		--nl-p-price: 17px;
		--nl-band-cols: minmax(0,1fr);
		--nl-band-gap: 40px;
		--nl-band-pad: 72px 40px;
		--nl-band-img-order: 0;
		--nl-band-img-h: 440px;
		--nl-feat-flow: row;
		--nl-feat-cols: repeat(2, minmax(0,1fr));
		--nl-feat-auto: auto;
		--nl-feat-pad: 24px;
		--nl-trust-cols: repeat(4, 1fr);
		--nl-trust-dir: column;
		--nl-trust-pad: 28px 16px 28px 0;
		--nl-foot-pad: 56px 40px 40px;
		--nl-foot-top: minmax(0,1fr);
		--nl-foot-cols: repeat(2, 1fr);
		--nl-legal-pad: 24px 40px;
		--nl-legal-dir: row;
		--nl-legal-align: center;
	}
}

/* --- Ordinateur (1200px et plus) ------------------------------------- */
@media (min-width: 1200px) {
	:root {
		--nl-w: 1440px;
		--nl-pad: 64px;
		--nl-nav-gap: 32px;
		--nl-sy: 120px;
		--nl-head-gap: 40px;
		--nl-h1: 84px;
		--nl-h2: 40px;
		--nl-h2big: 56px;
		--nl-lead: 18px;
		--nl-hero-outer: 16px 24px 0;
		--nl-hero-radius: 28px;
		--nl-hero-cols: minmax(0,5fr) minmax(0,7fr);
		--nl-hero-gap: 48px;
		--nl-hero-pad: 40px 40px 40px 72px;
		--nl-hero-h: 660px;
		--nl-hero-text-gap: 22px;
		--nl-hero-img-order: 2;
		--nl-hero-img-h: 580px;
		--nl-hero-img-radius: 20px;
		--nl-cta-dir: row;
		--nl-h1-min: 2em;
		--nl-ctrl-top: 16px;
		--nl-pill-cols: repeat(3, 1fr);
		--nl-pill-gap: 24px;
		--nl-pill-pad: 28px 64px 0;
		--nl-cat-flow: row;
		--nl-cat-cols: repeat(5, minmax(0,1fr));
		--nl-cat-auto: auto;
		--nl-cat-gap: 20px;
		--nl-cat-font: 16px;
		--nl-prod-cols: repeat(4, minmax(0,1fr));
		--nl-prod-gap: 20px;
		--nl-card-pad: 12px;
		--nl-card-body-pad: 18px 8px 14px;
		--nl-p-name: 16px;
		--nl-p-price: 17px;
		--nl-band-cols: minmax(0,7fr) minmax(0,5fr);
		--nl-band-gap: 80px;
		--nl-band-pad: 96px 64px;
		--nl-band-img-order: 0;
		--nl-band-img-h: 620px;
		--nl-feat-flow: row;
		--nl-feat-cols: repeat(4, minmax(0,1fr));
		--nl-feat-auto: auto;
		--nl-feat-pad: 28px;
		--nl-trust-cols: repeat(4, 1fr);
		--nl-trust-dir: row;
		--nl-trust-pad: 36px 24px 36px 0;
		--nl-foot-pad: 64px 64px 48px;
		--nl-foot-top: minmax(0,1fr) minmax(0,480px);
		--nl-foot-cols: repeat(4, 1fr);
		--nl-legal-pad: 24px 64px;
		--nl-legal-dir: row;
		--nl-legal-align: center;
	}
}