/* Page d'accueil UFO Atlas (/ et /en/) : statique et lisible par les moteurs de recherche. Palette et typo du jeu. */
:root{
  --night-0:#050a1a; --night-1:#0a1430; --night-2:#0c1733; --line:#2a3d66; --fog:#1a2a52;
  --holo:#4de8e0; --signal:#b8ff5c; --earth:#e89a64; --cream:#f4ecdc; --mist:#8ea0c4;
  --lab-hydro:#4de8e0; --lab-pyro:#ffb86b; --lab-litho:#7ee08a;
  --font-title:'Chakra Petch',system-ui,sans-serif; --font-body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--night-0)}
body{margin:0;background:var(--night-0);color:var(--cream);font:400 17px/1.6 var(--font-body)}
a{color:var(--holo)}a:hover{color:var(--signal)}
img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--font-title);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,36px);margin-top:0}
h3{font-size:21px}
p{margin:0 0 1em}
.tag{font:700 14px var(--font-title);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* en-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;font:700 22px var(--font-title);color:var(--cream);text-decoration:none}
.brand svg{width:44px;height:44px}
.top nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.top nav a{font:600 15px var(--font-body);text-decoration:none;color:var(--mist)}
.top nav a:hover{color:var(--cream)}

/* touches (même esprit que la console du jeu : tranche visible, enfoncement) */
.key{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:10px;
  font:700 18px var(--font-title);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--signal);color:var(--night-0);border:2px solid var(--signal);border-bottom:6px solid #050a1a;transition:transform .08s}
.key:hover{color:var(--night-0);transform:translateY(-1px)}
.key:active{transform:translateY(3px);border-bottom-width:3px}
.key.ghost{background:var(--night-2);color:var(--cream);border-color:var(--line);border-bottom-color:#050a1a}
.key.ghost:hover{color:var(--signal)}

/* héros */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px 0 60px}
.hero .lead{font-size:20px;color:var(--cream)}
.hero .sub{color:var(--mist)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 10px}
.hero .note{font-size:15px;color:var(--mist)}
.shot{border:3px solid var(--line);border-radius:18px;overflow:hidden;background:var(--night-1)}

/* plaques (sections) */
section.plate{background:var(--night-1);border:2px solid var(--line);border-radius:16px;padding:36px clamp(20px,4vw,44px);margin:0 0 28px;position:relative}
section.plate::before,section.plate::after{content:"";position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:var(--line)}
section.plate::before{left:12px}section.plate::after{right:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{background:var(--night-2);border:2px solid var(--line);border-radius:12px;padding:22px}
.card p:last-child{margin-bottom:0}
.step{font:700 15px var(--font-title);color:var(--signal);letter-spacing:.12em}
.sci{display:flex;gap:16px;align-items:flex-start}
.sci img{width:96px;height:96px;flex:none;background:var(--night-0);border:2px solid var(--c,var(--line));border-radius:12px}
.sci h3{color:var(--c)}
.riddle{font:600 18px/1.5 var(--font-title);margin-bottom:12px}
details{margin-top:8px}
summary{cursor:pointer;color:var(--holo);font-weight:700;min-height:44px;display:flex;align-items:center}
.modes li{margin-bottom:10px}
.modes b{color:var(--cream)}
.faq h3{margin-top:1.2em}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.stats li{font:700 15px var(--font-title);color:var(--mist);letter-spacing:.08em;text-transform:uppercase}
.stats b{display:block;font-size:34px;color:var(--earth);letter-spacing:0}

footer{border-top:2px solid var(--line);margin-top:40px;padding:26px 0 40px;color:var(--mist);font-size:15px}
footer .row{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:16px}
  .grid3,.grid2{grid-template-columns:1fr}
  .top nav .hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){.key{transition:none}}