/* ============================================================================
   NOQE — socle partagé (tokens, composants, thèmes)
   Chargé par toutes les pages. Les styles spécifiques restent dans chaque page.
   ========================================================================== */

/* ── Webfonts auto-hébergées (variable fonts, RGPD : aucune requête tierce) ── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/jetbrainsmono-var.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/spacegrotesk-600.woff2') format('woff2'); }

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  /* brand green (emerald) — dominant */
  --green-50:#ecfdf5; --green-100:#d1fae5; --green-200:#a7f3d0; --green-300:#6ee7b7;
  --green-400:#34d399; --green-500:#1fc795; --green-600:#059669; --green-700:#047857;
  --green-800:#065f46; --green-900:#064e3b;
  /* secondary accents */
  --indigo-300:#a5b4fc; --indigo-500:#6366f1; --indigo-600:#4f46e5;
  --accent-games:#d97706; --accent-games-deep:#b45309;
  /* neutrals (warm stone) */
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-800:#292524; --stone-900:#1c1917; --stone-950:#0c0a09;
  /* semantic (light, default) */
  --bg:#faf9f6; --bg-subtle:#f3f1ec; --surface:#ffffff; --surface-2:#fafaf9;
  --fg:var(--stone-900); --fg-strong:var(--stone-950); --fg-muted:var(--stone-600);
  --fg-subtle:var(--stone-500);
  --border:var(--stone-200); --border-strong:var(--stone-300);
  --primary:var(--green-500); --primary-hover:var(--green-600); --primary-press:var(--green-700);
  --primary-tint:var(--green-50);
  /* texte encre sur vert : AA (8.7:1) — le blanc d'origine était à 2.17:1 */
  --on-primary:#08130e;
  --ring:color-mix(in oklab, var(--green-500) 45%, transparent);
  --success:var(--green-600); --danger:#dc2626; --warning:#d97706; --info:var(--indigo-500);
  /* surfaces à thème */
  --glass:rgba(250,249,246,.85);
  --em-bg:var(--green-100);
  --hover-soft:var(--stone-100);
  --tint-web:var(--green-50); --tint-games:#fff7ed; --tint-ai:#eef2ff;
  --games-text:#b45309; --ai-text:#4f46e5;
  --cta-border:var(--green-200);
  /* type */
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --text-display:600 clamp(42px,7vw,78px)/1.04 var(--font-display);
  --text-h1:600 40px/1.08 var(--font-display);
  --text-h2:600 clamp(30px,4.5vw,48px)/1.14 var(--font-display);
  --text-h3:600 22px/1.28 var(--font-sans);
  --text-h4:600 18px/1.35 var(--font-sans);
  --text-body-lg:400 18px/1.62 var(--font-sans);
  --text-body:400 16px/1.6 var(--font-sans);
  --text-sm:400 14px/1.55 var(--font-sans);
  --text-caption:500 13px/1.45 var(--font-sans);
  --text-mono:400 13px/1.5 var(--font-mono);
  --text-label:500 12px/1 var(--font-mono);
  --tracking-tight:-0.03em; --tracking-snug:-0.015em; --tracking-label:0.12em;
  /* radii — maximally soft */
  --r-xs:14px; --r-sm:22px; --r-md:32px; --r-lg:44px; --r-xl:60px; --r-2xl:80px; --r-full:999px;
  /* shadows */
  --shadow-xs:0 1px 2px rgba(28,25,23,.06);
  --shadow-sm:0 1px 3px rgba(28,25,23,.08),0 1px 2px rgba(28,25,23,.04);
  --shadow-md:0 4px 14px rgba(28,25,23,.08);
  --shadow-lg:0 14px 36px rgba(28,25,23,.10);
  --shadow-green:0 6px 20px rgba(16,185,129,.30);
  --ring-shadow:0 0 0 3px var(--ring);
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms;
}

/* ── Mode sombre (canvas indigo-ink, vert → menthe) ───────────────────────── */
[data-theme="dark"] {
  --bg:#14141f; --bg-subtle:#1a1a2e; --surface:#20202f; --surface-2:#262638;
  --fg:#f5f5f4; --fg-strong:#ffffff; --fg-muted:#b8b4ad; --fg-subtle:#8a8780;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --primary:var(--green-400); --primary-hover:var(--green-300); --primary-press:var(--green-400);
  --primary-tint:rgba(16,185,129,.14);
  --on-primary:#08130e;
  --glass:rgba(20,20,31,.82);
  --em-bg:rgba(52,211,153,.20);
  --hover-soft:var(--surface-2);
  --tint-web:rgba(31,199,149,.12); --tint-games:rgba(217,119,6,.14); --tint-ai:rgba(99,102,241,.16);
  --games-text:#f59e0b; --ai-text:var(--indigo-300);
  --cta-border:rgba(52,211,153,.30);
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:0 18px 44px rgba(0,0,0,.55);
  --shadow-green:0 6px 20px rgba(16,185,129,.22);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
/* touch-action:manipulation — supprime le zoom double-tap mobile (le pinch
   reste possible) : indispensable au double-tap « B A » du code Konami */
html { scroll-behavior:smooth; touch-action:manipulation; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--fg); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
::selection { background:var(--green-200); color:var(--stone-900); }
svg { display:block; }
a { color:var(--primary-press); }

.wrap { max-width:1120px; margin:0 auto; padding:0 28px; }
.eyebrow { font:var(--text-label); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--primary-press); }
.mono-meta { font-family:var(--font-mono); font-size:12px; color:var(--fg-subtle); letter-spacing:.08em; }
.line-accent { display:inline-block; width:32px; height:3px; background:var(--primary); border-radius:var(--r-full); margin:18px 0 22px; }
.ghost-num { position:absolute; top:-34px; left:-12px; font:600 clamp(110px,16vw,190px)/1 var(--font-display); letter-spacing:var(--tracking-tight); color:var(--fg-strong); opacity:.05; pointer-events:none; user-select:none; z-index:0; }
.section-meta { position:absolute; top:8px; right:28px; font:400 11px var(--font-mono); letter-spacing:.08em; color:var(--fg-subtle); }
.sep-mark { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:min(1064px, calc(100% - 56px)); display:flex; align-items:center; gap:18px; pointer-events:none; }
.sep-mark::before, .sep-mark::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Accessibilité ────────────────────────────────────────────────────────── */
.skip-link { position:fixed; top:10px; left:10px; z-index:300; transform:translateY(-200%); font:600 14px var(--font-sans); background:var(--primary); color:var(--on-primary); border-radius:var(--r-full); padding:12px 22px; text-decoration:none; transition:transform var(--dur) var(--ease); }
.skip-link:focus-visible { transform:none; outline:none; box-shadow:var(--ring-shadow); }
.nav-link:focus-visible, .logo:focus-visible, .scroll-cue:focus-visible, .theme-toggle:focus-visible,
.hamburger:focus-visible, .btn:focus-visible, a:focus-visible {
  outline:none; box-shadow:var(--ring-shadow); border-radius:var(--r-full);
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn { font-family:var(--font-sans); font-weight:600; font-size:15px; border-radius:var(--r-full); padding:13px 26px; border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all var(--dur) var(--ease); text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-green); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-primary:active { background:var(--primary-press); transform:scale(.98); }
.btn-secondary { background:var(--surface); color:var(--fg); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--fg-subtle); background:var(--surface-2); }
.btn-ghost { background:transparent; color:var(--fg); }
.btn-ghost:hover { background:var(--hover-soft); }

/* ── Cartes — toute carte naît en capsule (pills first) ───────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease); }
.card.hover-lift:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }

/* ── Motif layers (+ construction animée) ─────────────────────────────────── */
.layers { position:relative; display:inline-block; }
.layers span { position:absolute; border-radius:6px; background:var(--primary); opacity:var(--lo,1); }
.layers .l3 { display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-sans); font-weight:500; }
.layers.anim span { opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.layers.anim span:nth-child(2) { transition-delay:90ms; }
.layers.anim span:nth-child(3) { transition-delay:180ms; }
.layers.anim.built span { opacity:var(--lo,1); transform:none; }
.layers.breathe.built span:nth-child(1) { animation:breathe-a 6s ease-in-out 1.4s infinite; }
.layers.breathe.built span:nth-child(2) { animation:breathe-b 6s ease-in-out 1.4s infinite; }
@keyframes breathe-a { 50% { transform:translateY(3px); } }
@keyframes breathe-b { 50% { transform:translateY(-3px); } }
.watermark-lay { position:absolute; opacity:.05; pointer-events:none; }

/* ── Header (île-capsule au scroll) ───────────────────────────────────────── */
header { position:sticky; top:0; z-index:30; background:transparent; border-bottom:1px solid transparent; transition:all var(--dur-slow) var(--ease); }
.header-inner { height:70px; display:flex; align-items:center; justify-content:space-between; transition:all var(--dur-slow) var(--ease); }
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.logo img { width:28px; height:28px; }
.logo .wordmark { font-family:var(--font-sans); font-weight:500; font-size:20px; letter-spacing:.06em; color:var(--fg-strong); }
.nav-desktop { display:flex; align-items:center; gap:30px; }
.nav-link { font:var(--text-sm); font-weight:500; color:var(--fg-muted); text-decoration:none; transition:color var(--dur) var(--ease); }
.nav-link:hover { color:var(--fg-strong); }
.nav-link.active { color:var(--fg-strong); }
.nav-link.active::before { content:'./'; font-family:var(--font-mono); font-size:11px; color:var(--primary-press); margin-right:3px; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid var(--border-strong); border-radius:var(--r-full); background:var(--surface); color:var(--fg-muted); cursor:pointer; transition:all var(--dur) var(--ease); padding:0; }
.theme-toggle:hover { border-color:var(--primary); color:var(--primary-press); }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
.lang-switch { display:inline-flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:var(--r-full); overflow:hidden; }
.lang-switch a { font:600 11px var(--font-mono); letter-spacing:.1em; padding:8px 12px; text-decoration:none; color:var(--fg-subtle); transition:all var(--dur) var(--ease); }
.lang-switch a[aria-current] { background:var(--primary); color:var(--on-primary); }
.lang-switch a:not([aria-current]):hover { color:var(--fg-strong); background:var(--hover-soft); }
.hamburger { display:none; border:none; background:transparent; cursor:pointer; padding:8px; color:var(--fg); border-radius:var(--r-full); }
.hamburger:hover { background:var(--hover-soft); }
.mobile-menu { display:none; flex-direction:column; gap:14px; padding-bottom:18px; }
.mobile-menu.open { display:flex; }
.mobile-menu .nav-link { font-size:16px; }
@media (min-width:1081px) {
  header.scrolled { background:transparent; border-bottom-color:transparent; }
  header.scrolled .header-inner {
    max-width:980px; height:56px; margin:10px auto 0; padding:0 10px 0 22px;
    background:var(--glass); backdrop-filter:blur(12px);
    border:1px solid var(--border); border-radius:var(--r-full); box-shadow:var(--shadow-md);
  }
  header.scrolled .nav-desktop { gap:22px; }
  header.scrolled .logo .wordmark { font-size:18px; }
}
/* Sous 1080px, le header passe en mode compact : la rangée complète
   (5 liens + FR/EN + thème + CTA) ne tient pas dans une capsule.
   Seul le FR/EN des accueils (marqué hide-mobile) disparaît : sur les
   pages produit, le header léger garde le sélecteur de langue. */
@media (max-width:1080px) {
  header .nav-desktop, header .nav-actions .btn, header .lang-switch.hide-mobile { display:none !important; }
  .hamburger { display:inline-flex; }
  header.scrolled { background:var(--glass); backdrop-filter:blur(12px); border-bottom-color:var(--border); }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border); padding:40px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-brand { display:inline-flex; align-items:center; gap:9px; }
.footer-brand img { width:24px; height:24px; }
.footer-brand span { font-family:var(--font-sans); font-weight:500; font-size:17px; letter-spacing:.06em; color:var(--fg-strong); }
.footer-links { display:inline-flex; gap:18px; align-items:center; }

/* ── Curseur-mesure (pointeur fin, généralisé) ────────────────────────────── */
@media (pointer:fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button { cursor:none; }
  .cur-dot { position:fixed; z-index:200; width:6px; height:6px; border-radius:var(--r-full); background:var(--primary); pointer-events:none; transform:translate(-50%,-50%); left:0; top:0; }
  .cur-ring { position:fixed; z-index:199; width:30px; height:30px; border-radius:var(--r-full); border:1.5px solid var(--border-strong); pointer-events:none; transform:translate(-50%,-50%); left:0; top:0; display:flex; align-items:center; justify-content:center; transition:width var(--dur) var(--ease), height var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
  .cur-ring b { font:500 9px var(--font-mono); letter-spacing:.26em; color:var(--primary-press); opacity:0; transition:opacity var(--dur-fast) var(--ease); padding-left:.26em; white-space:nowrap; }
  .cur-ring.hov { width:44px; height:44px; border-color:var(--primary); }
  .cur-ring.on { width:78px; height:30px; border-color:var(--primary); background:var(--glass); }
  .cur-ring.on b { opacity:1; }
}

/* ── MODE ARCADE (code Konami — reskin CRT complet) ───────────────────────── */
body.arcade {
  --bg:#0d0d17; --bg-subtle:#12121e; --surface:#171724; --surface-2:#1d1d2c;
  --fg:#c9f7e6; --fg-strong:#6ee7b7; --fg-muted:#8fd9c0; --fg-subtle:#5fa98f;
  --border:rgba(52,211,153,.18); --border-strong:rgba(52,211,153,.30);
  --primary:#34d399; --primary-hover:#6ee7b7; --primary-press:#34d399;
  --primary-tint:rgba(52,211,153,.12); --on-primary:#08130e;
  --glass:rgba(13,13,23,.85);
  --em-bg:rgba(52,211,153,.22);
  --hover-soft:rgba(52,211,153,.10);
  --tint-web:rgba(52,211,153,.12); --tint-games:rgba(217,119,6,.16); --tint-ai:rgba(99,102,241,.18);
  --games-text:#fbbf24; --ai-text:#a5b4fc;
  --cta-border:rgba(52,211,153,.35);
  --shadow-xs:0 0 8px rgba(52,211,153,.08);
  --shadow-sm:0 0 12px rgba(52,211,153,.10);
  --shadow-md:0 0 22px rgba(52,211,153,.14);
  --shadow-lg:0 0 40px rgba(52,211,153,.16);
  --shadow-green:0 0 24px rgba(52,211,153,.35);
  background:var(--bg);
}
body.arcade::before { /* vignette CRT */
  content:''; position:fixed; inset:0; z-index:150; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42));
}
body.arcade::after { /* scanlines */
  content:''; position:fixed; inset:0; z-index:151; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
body.arcade h1, body.arcade h2, body.arcade h3, body.arcade .h2 { text-shadow:0 0 18px rgba(52,211,153,.35); }
body.arcade .display em { color:#6ee7b7; }
body.arcade .logo img, body.arcade .footer-brand img { filter:drop-shadow(0 0 8px rgba(52,211,153,.5)); }
body.arcade .ghost-num { opacity:.08; }

/* HUD du jeu */
.arcade-hud {
  position:fixed; top:14px; right:16px; z-index:210;
  display:inline-flex; gap:14px; align-items:center;
  font:600 12px var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  color:#6ee7b7; background:rgba(13,13,23,.92);
  border:1.5px solid rgba(52,211,153,.4); border-radius:var(--r-full);
  padding:10px 20px; box-shadow:0 0 24px rgba(52,211,153,.25); white-space:nowrap;
}
.arcade-hud .blink { animation:hud-blink 1.1s steps(2,start) infinite; }
.arcade-hud .hud-x { all:unset; cursor:pointer; font:600 12px var(--font-mono); color:#6ee7b7; border:1.5px solid rgba(52,211,153,.4); border-radius:var(--r-full); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
.arcade-hud .hud-x:hover { background:rgba(52,211,153,.15); }
@media (max-width:760px) {
  .arcade-hud { left:10px; right:10px; justify-content:space-between; font-size:10px; letter-spacing:.1em; padding:9px 12px; gap:8px; }
}
@keyframes hud-blink { to { visibility:hidden; } }
#arcade-canvas { position:fixed; inset:0; z-index:160; pointer-events:none; }
/* pas d'overflow:hidden pendant la partie : le défilement est piloté par le jeu */
.brick-out { visibility:hidden !important; }
.brick-rebuild { visibility:visible !important; opacity:0; animation:brick-in .32s var(--ease) forwards; }
@keyframes brick-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── Produits : tuiles d'apps (accueil) ───────────────────────────────────── */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; margin-top:8px; }
/* pill assumé : rayon plein, padding gonflé pour dégager le contenu des courbes */
.app-tile { display:flex; align-items:center; gap:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); padding:30px 42px 30px 36px; text-decoration:none; transition:all var(--dur) var(--ease); }
.app-tile:hover { border-color:var(--cta-border); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.app-tile img { width:72px; height:72px; border-radius:20px; flex:none; }
.app-tile h3 { font:var(--text-h3); color:var(--fg-strong); margin:0 0 3px; }
.app-tile p { font:var(--text-sm); color:var(--fg-muted); margin:0 0 9px; line-height:1.5; }
.app-status { font:500 11px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; border-radius:var(--r-full); padding:5px 12px; display:inline-block; }
.app-status.wip { color:var(--fg-subtle); background:var(--surface); border:1px dashed var(--border-strong); }
.app-status.live { color:var(--primary-press); background:var(--primary-tint); border:1px solid var(--cta-border); }
.app-tile.ghost { border-style:dashed; }
.app-tile.ghost:hover { box-shadow:var(--shadow-sm); }

/* ── Utilitaires ──────────────────────────────────────────────────────────── */
@media (max-width:760px) {
  .hide-mobile { display:none !important; }
  .ghost-num, .section-meta { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important; }
  html { scroll-behavior:auto; }
  .layers.anim span { opacity:var(--lo,1); transform:none; }
}