/* ══════════════════════════════════════════════════════════
   Prépa — Entraînement · mêmes tokens que enzo.bellenguez.fr
   ══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --ink:        #0e0a06;
  --ink-deep:   #080604;
  --amber:      #e07800;
  --amber-hot:  #ffaa00;
  --amber-pale: rgba(224,120,0,.12);
  --cream:      #ffdfc0;
  --dim:        rgba(255,223,192,.45);
  --line:       rgba(255,223,192,.10);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  --mx: 50%; --my: 40%;
}
.f-title, h1, h2, h3 {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400;
}
::selection { background: var(--amber); color: var(--ink); }
a { color: inherit; text-decoration: none; }
.pad-inline { padding-inline: clamp(24px, 5vw, 72px); }

/* ── Grille de fond ── */
.hero-grid { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-grid-base, .hero-grid-active {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(to right,  rgba(255,223,192,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,223,192,.085) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: gridDrift 9.2s linear infinite;
}
@keyframes gridDrift { to { background-position: 46px 46px; } }
.hero-grid-active {
  background-image:
    linear-gradient(to right,  rgba(224,120,0,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(224,120,0,.55) 1px, transparent 1px);
  opacity: 0; transition: opacity .4s ease;
  -webkit-mask-image: radial-gradient(circle 305px at var(--mx) var(--my), #000 0%, transparent 68%);
  mask-image: radial-gradient(circle 305px at var(--mx) var(--my), #000 0%, transparent 68%);
}
.hero-grid-glow {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(circle 535px at var(--mx) var(--my),
    rgba(224,120,0,.16), rgba(224,120,0,.05) 42%, transparent 70%);
}
body.grid-hot .hero-grid-active, body.grid-hot .hero-grid-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-grid-base, .hero-grid-active { animation: none; } }

/* ── Nav ── */
nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(24px, 5vw, 72px);
  background: rgba(14,10,6,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,223,192,.05);
}
.nav-logo { font-family: 'Sorren', Georgia, serif; font-size: 1rem; letter-spacing: .1em; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: .65rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--dim); transition: color .2s;
}
.nav-links a:hover { color: var(--cream); }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--cream); transition: .25s; }
#mob-menu {
  position: fixed; inset: 0; z-index: 99; background: rgba(8,6,4,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
#mob-menu.open { opacity: 1; pointer-events: auto; }
#mob-menu a { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cream); }

/* ── Hero ── */
#hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block-start: 120px;
  padding-block-end: clamp(50px, 7vw, 90px);
  padding-inline: clamp(24px, 5vw, 72px);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--amber); }
h1.hero-name {
  font-size: clamp(2.9rem, 8.4vw, 7rem);
  line-height: .9; letter-spacing: -.01em; color: var(--cream); margin-bottom: 28px;
}
.hero-sub {
  font-size: clamp(.82rem, 1.2vw, .95rem);
  color: var(--dim); line-height: 2; max-width: 460px; margin-bottom: 40px;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 26px; border: 1px solid rgba(255,223,192,.15); border-radius: 100px;
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
  transition: border-color .25s, background .25s;
}
.btn-outline:hover { border-color: rgba(224,120,0,.5); background: var(--amber-pale); }
.btn-outline svg { width: 13px; height: 13px; flex-shrink: 0; }

.hero-stats { display: flex; gap: clamp(30px, 6vw, 80px); margin-top: clamp(48px, 8vw, 90px); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .n { font-family: 'Sorren', Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--amber-hot); line-height: 1; }
.stat .l { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }

.divider { border: none; border-top: 1px solid rgba(255,223,192,.06); }

/* ── Sections ── */
section#sites, section#suite {
  padding-block: clamp(80px, 10vw, 140px);
  max-width: 1200px; margin-inline: auto;
}
.section-label {
  display: flex; align-items: center; gap: 14px;
  font-size: .58rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
.section-label::before { content: ''; flex-shrink: 0; width: 28px; height: 1px; background: var(--amber); }
.sec-title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; color: var(--cream); text-align: center; }
.sec-title--left { text-align: left; margin-bottom: clamp(40px, 6vw, 64px); }

/* ── Cartes des sites ── */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 34px); }
.card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  background: rgba(8,6,4,.55);
  backdrop-filter: blur(2px);
  transition: border-color .3s, transform .3s, background .3s;
  position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0; transition: opacity .35s;
}
.card:hover { border-color: rgba(224,120,0,.4); transform: translateY(-4px); background: rgba(8,6,4,.8); }
.card:hover::after { opacity: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.card-sigil {
  font-family: 'Sorren', Georgia, serif; font-size: 2.2rem; color: var(--amber);
  line-height: 1; width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid rgba(224,120,0,.3); border-radius: 50%;
}
.card-sigil--mono { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: -.05em; }
.card-tag {
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px;
}
.card-title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--cream); margin-bottom: 16px; line-height: 1; }
.card-desc { font-size: .8rem; line-height: 2; color: var(--dim); margin-bottom: 26px; }
.card-desc b { color: var(--cream); font-weight: 400; }
.card-facts { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.card-facts li {
  font-size: .68rem; letter-spacing: .04em; color: var(--dim);
  padding-left: 18px; position: relative; line-height: 1.7;
}
.card-facts li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 7px; height: 1px; background: var(--amber);
}
.card-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--amber-hot);
}
.card-go svg { width: 12px; height: 12px; transition: transform .25s; }
.card:hover .card-go svg { transform: translate(2px, -2px); }

/* ── La suite ── */
.soon { display: flex; flex-direction: column; }
.soon-item {
  display: grid; grid-template-columns: 60px 260px 1fr; align-items: baseline; gap: 20px;
  padding-block: 22px; border-top: 1px solid var(--line); opacity: .55;
}
.soon-item:last-child { border-bottom: 1px solid var(--line); }
.soon-n { font-family: ui-monospace, Menlo, monospace; font-size: .7rem; color: var(--amber); letter-spacing: .1em; }
.soon-t { font-family: 'Sorren', Georgia, serif; font-size: 1.05rem; color: var(--cream); }
.soon-d { font-size: .7rem; color: var(--dim); line-height: 1.8; }

/* ── Footer ── */
footer { width: 100%; border-top: 1px solid rgba(255,223,192,.06); }
.foot-inner {
  max-width: 1200px; margin-inline: auto;
  padding-block: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); flex-wrap: wrap;
}
.foot-links { display: flex; gap: 26px; }
.foot-links a { transition: color .2s; }
.foot-links a:hover { color: var(--amber-hot); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .soon-item { grid-template-columns: 40px 1fr; }
  .soon-d { grid-column: 2; }
}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .hero-stats { gap: 28px; }
  h1.hero-name { font-size: clamp(2.4rem, 11vw, 4rem); }
}