:root{
  /* Palette alignée à la page existante (gris + accent highlighted) */
  --bg:#0a0a0b;
  --fg:#e9eef4;
  --muted:#a8b3c7;
  --brand:#1b1b1b;          /* teinte sombre dominante des boutons */
  --brand2:#8b8c8e;         /* teinte hover douce */
  --highlight1:#fc9024;     /* gradient spécial pour la séquence N°1 */
  --highlight2:#f11e61;
  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.12);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, #032926 0%, transparent 40%),
    radial-gradient(1000px 500px at 110% 10%, #0b2e46 0%, transparent 45%),
    var(--bg);
  overflow-x:hidden;
}

/* Loader */
.loader-overlay{
  position: fixed; inset:0; z-index: 1000;
  background: radial-gradient(1000px 500px at 50% -20%, rgba(255,255,255,.06), transparent 40%), #0a0a0b;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .45s ease;
}
body.is-ready .loader-overlay{ opacity:0; pointer-events:none; }
.loader-card{
  width:min(420px, 90vw);
  padding:22px;
  border-radius:18px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--glass) 85%, transparent);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(140%);
  text-align:center;
}
.loader-logo{ width:68px; height:68px; border-radius:50%; display:block; margin:0 auto 10px; box-shadow: var(--shadow); }
.loader-title{ font-family: Rajdhani, Manrope, sans-serif; font-weight:800; letter-spacing:.5px; margin-bottom:12px; font-size: clamp(18px, 2.2vw, 24px); }
.loader-bar{ height:10px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; }
.loader-fill{ height:100%; width:100%; transform: scaleX(0); transform-origin:left; background: linear-gradient(90deg, var(--brand), var(--brand2)); transition: transform .25s ease; }

/* Fond Spline derrière tout */
#spline-container{ position:fixed; inset:0; z-index:-2; }
#spline-container spline-viewer{
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important;
  z-index:-2 !important; pointer-events:none !important; /* menu toujours cliquable */
}

/* Particules */
#fx-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; transition: opacity .25s ease; }

/* Dock de contrôle + FPS */
.control-dock{
  position:fixed; left:12px; bottom:12px; z-index:60;
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; border-radius:14px;
  background: color-mix(in oklab, var(--glass) 70%, transparent);
  border:1px solid var(--border); box-shadow: var(--shadow);
}
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.switch input{ display:none; }
.switch .track{ position:relative; width:64px; height:34px; border-radius:999px; background: rgba(255,255,255,.1); border:1px solid var(--border); box-shadow: inset 0 2px 8px rgba(0,0,0,.35); transition: background .25s ease, border-color .25s ease; }
.switch .knob{ position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background: linear-gradient(90deg, var(--brand), var(--brand2)); box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .25s ease; }
.switch input:checked + .track{ background: rgba(0,0,0,.35); border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); }
.switch input:checked + .track .knob{ transform: translateX(30px); }
.switch .switch-text{ font-weight:800; letter-spacing:.2px; }

.hud-fps-inline{
  display:inline-block; font-family: JetBrains Mono, ui-monospace, monospace;
  font-size:12px; color:var(--muted);
  padding:2px 6px; border:1px solid var(--border); border-radius:8px;
  background: color-mix(in oklab, var(--glass) 65%, transparent);
}

/* Header minimal */
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:flex-start;
  padding:10px 16px; z-index:80;
  backdrop-filter:saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(10,10,11,0.65), rgba(10,10,11,0.15) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); }
.brand-logo{ width:44px; height:44px; border-radius:50%; box-shadow: var(--shadow); display:block; }
.brand-title{
  font-weight:800; letter-spacing:.2px; font-size:18px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Shell */
.shell{
  position:relative; z-index:45; padding: calc(64px + 12px) clamp(16px, 5vw, 48px) 64px;
  max-width:1200px; margin:0 auto;
}
.reveal-root{ opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
body.is-ready .reveal-root{ opacity: 1; transform: none; }

/* Glass block */
.glass{
  background: color-mix(in oklab, var(--glass) 70%, transparent);
  border:1px solid var(--border); border-radius:24px; box-shadow: var(--shadow);
}

/* Hero */
.hero{ padding:24px; }
.hero-title{
  position: relative; overflow: hidden;
  font-family: Rajdhani, Manrope, sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height:1.05; letter-spacing:.5px; margin:6px 0 10px;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}
.hero-sub{ color:var(--muted); margin:0 0 8px; font-size: clamp(14px, 1.3vw, 18px); }
.hero-title .reveal-mask{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0) 12%, rgba(10,10,11,1) 13%, rgba(10,10,11,1) 87%, rgba(10,10,11,0) 88%, rgba(10,10,11,0) 100%);
  mix-blend-mode: multiply; pointer-events:none; transform: translateX(-110%);
  animation: typebar 1.3s cubic-bezier(.22,.61,.36,1) .2s both;
}
.hero-title .shine{
  position:absolute; inset:0; background: radial-gradient(600px 60px at 0% 50%, rgba(255,255,255,0.25), transparent 70%);
  mix-blend-mode: screen; transform: translateX(-120%); animation: titleshine 2s ease .15s both;
}
@keyframes typebar{ 0%{ transform: translateX(-110%);} 100%{ transform: translateX(110%);} }
@keyframes titleshine{ 0%{ transform: translateX(-120%); opacity: .0;} 20%{ opacity: 1;} 100%{ transform: translateX(120%); opacity:.0;} }

/* Cards (menu modernisé) */
.cards{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;
}
.card{
  position:relative; padding:18px; border-radius:20px; text-decoration:none; color:var(--fg);
  border:1px solid var(--border); min-height:120px;
  transform-style: preserve-3d; transition: transform .15s ease;
  background:
    radial-gradient(600px 200px at -10% -10%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(600px 200px at 110% 110%, rgba(255,255,255,0.04), transparent 35%),
    color-mix(in oklab, #0f1113 80%, transparent);
  overflow:hidden;
}
.card:hover{ outline:1px solid color-mix(in oklab, var(--brand2) 60%, transparent); }
.card-badge{
  position:absolute; top:12px; right:12px;
  font-family: Rajdhani, Manrope, sans-serif; font-weight:800; letter-spacing:.5px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--glass) 70%, transparent);
}
.card-title{ margin-top:10px; font-size:22px; font-weight:800; }
.card-sub{ color:var(--muted); margin-top:6px; font-weight:600; }

/* Mise en avant de la N°1 (ancien #highlighted) */
.card.actif{
  background:
    linear-gradient(90deg, var(--highlight1), var(--highlight2)) border-box,
    color-mix(in oklab, #0f1113 80%, transparent) padding-box;
  border: 2px solid transparent;
}
.card.actif::after{
  content: ""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(34,34,34,0.8), transparent);
  animation: scanner 2s linear infinite; mix-blend-mode: soft-light;
}
@keyframes scanner{ 0%{ transform: translateX(-50%);} 100%{ transform: translateX(100%);} }

/* Terminal */
.terminal{ margin-top:18px; padding:0; overflow:hidden; }
.term-header{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background: linear-gradient(180deg, rgba(0,0,0,.3), transparent); }
.term-title{ color:var(--muted); font-weight:700; font-family: JetBrains Mono, ui-monospace, monospace; }
.dot{ width:10px; height:10px; border-radius:50%; }
.red{ background:#ff5f56; } .yellow{ background:#ffbd2e; } .green{ background:#27c93f; }
.term-body{ font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height:1.6; padding:16px; min-height:120px; white-space:pre-wrap; background: radial-gradient(800px 200px at 0% 0%, rgba(255,255,255,.08), transparent 40%); text-shadow: 0 0 1px rgba(0,0,0,.3); }

/* Footer */
.site-footer{ position:fixed; bottom:0; width:100%; z-index:45; padding:18px; text-align:center; color:var(--muted); }

/* Focus */
:focus-visible{ outline: 2px solid var(--highlight2); outline-offset: 2px; border-radius: 8px; }

/* Responsive */
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){
  .brand-title{ display:none; }
  .hero{ padding:16px; }
  .cards{ grid-template-columns: 1fr; }
  .control-dock{ left:50%; transform:translateX(-50%); bottom:10px; }
}

/* Réduction motion */
@media (prefers-reduced-motion: reduce){
  .tilt{ transform: none !important; }
  .hero-title .reveal-mask, .hero-title .shine{ animation: none !important; }
}

.hero-title .text {
  color: var(--fg);
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}


/* === Readability tweaks === */
.hero-title{
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.6);
}
.hero.glass{
  background: color-mix(in oklab, var(--glass) 85%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--border);
}

/* Reduce shine intensity on title to avoid washing text */
.hero-title .shine{ opacity: 0.65; }
.hero-title .reveal-mask{ opacity: 0.85; }

/* b) Make .actif very obvious */
.card.actif{
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, var(--highlight1), var(--highlight2)) border-box,
    color-mix(in oklab, #0f1113 80%, transparent) padding-box !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(241,30,97,0.25);
}
.card.actif::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(34,34,34,0.6), transparent);
  animation: scanner 2s linear infinite;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.card.actif .card-badge{
  background: linear-gradient(90deg, var(--highlight1), var(--highlight2));
  color: #111;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(241,30,97,0.25);
}


/* --- Stronger readability for hero --- */
.hero.hero-strong{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)),
    color-mix(in oklab, var(--glass) 90%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(150%);
}
.hero.hero-strong .hero-title,
.hero.hero-strong .hero-sub{
  color: var(--fg);
  text-shadow: 0 3px 10px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.7);
}
.hero.hero-strong .reveal-mask{ opacity: 0.9; }
.hero.hero-strong .shine{ opacity: 0.6; }

/* --- Home icon button in header --- */
.home-btn{
  margin-left: auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:
    radial-gradient(120px 60px at 30% 0%, rgba(0,170,255,.20), transparent 60%),
    color-mix(in oklab, var(--glass) 75%, transparent);
  color: var(--fg);
  text-decoration:none;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.home-btn:hover{
  transform: translateY(-1px) scale(1.05);
  border-color: color-mix(in oklab, var(--brand2) 40%, var(--border));
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 16px rgba(255,0,255,.18);
}
.home-btn:active{ transform: translateY(0) scale(0.98); }
.home-btn .home-icn{ display:block; width:20px; height:20px; filter: drop-shadow(0 0 3px rgba(0,0,0,0.4)); }

@media (max-width: 620px){
  .home-btn{ width:34px; height:34px; border-radius:10px; }
}


/* --- Terminal readability --- */
.term-body{
  color: #e0e6f0; /* softer white */
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(0,0,0,0.5), transparent 40%),
    radial-gradient(800px 200px at 100% 100%, rgba(0,0,0,0.35), transparent 40%),
    rgba(10,10,11,0.6);
  backdrop-filter: blur(6px) saturate(140%);
}

/* --- Accueil card style --- */
.card.accueil-card{
  background:
    linear-gradient(135deg, rgba(0,170,255,0.2), rgba(255,0,255,0.2)) padding-box,
    color-mix(in oklab, #0f1113 85%, transparent) border-box;
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.card.accueil-card .card-badge{
  background: color-mix(in oklab, var(--glass) 85%, transparent);
  color: var(--fg);
}
.card.accueil-card:hover{
  outline:1px solid color-mix(in oklab, var(--brand) 50%, transparent);
  transform: scale(1.02);
}


/* --- Terminal text matches hero-sub --- */
.term-body{
  color: var(--muted);
  font-weight: 600;
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(0,0,0,0.25), transparent 40%),
    radial-gradient(800px 200px at 100% 100%, rgba(0,0,0,0.2), transparent 40%),
    rgba(10,10,11,0.4);
  backdrop-filter: blur(4px) saturate(140%);
}


/* --- Terminal: match hero-sub style, no heavy shadow/blur --- */
.term-body{
  color: var(--muted);
  background: radial-gradient(800px 200px at 0% 0%, rgba(255,255,255,0.06), transparent 40%);
  backdrop-filter: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* --- Breadcrumbs (alternative "Accueil") --- */
.breadcrumbs{
  margin: 8px 0 10px;
  font-weight: 600;
  color: var(--muted);
}
.breadcrumbs ul{
  margin: 0; padding: 0;
  list-style: none;
  display: inline-flex; gap: 8px; align-items: center;
}
.breadcrumbs a{
  text-decoration: none;
  color: var(--fg);
  background: color-mix(in oklab, var(--glass) 65%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.breadcrumbs a:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand2) 40%, var(--border));
}
.breadcrumbs .sep{ opacity:.6; }

/* Optional footer link appearance stays default (no special styles needed) */


/* Breadcrumbs: black text for high contrast */
.breadcrumbs{
  color: #000;
}
.breadcrumbs a{
  color: #000;
  background: color-mix(in oklab, var(--glass) 65%, white);
  border-color: rgba(0,0,0,0.2);
}
.breadcrumbs a:hover{
  border-color: rgba(0,0,0,0.5);
}
.breadcrumbs .sep{ color: #000; }
.home-icn{
  vertical-align: middle;
}