/* NEXUS - cadeau d'anniversaire de Sonia Kefi, 07/11/2026 */

:root{
  --nuit:#05060e;
  --abysse:#0a1026;
  --cristal:#7fd4ff;
  --or:#f3c87e;
  --violet:#9b86e8;
  --vegetal:#9ecb63;
  --sable:#e0bb86;
  --texte:#eceef6;
  --doux:rgba(236,238,246,.62);
  --faible:rgba(236,238,246,.34);
  --trait:rgba(236,238,246,.14);
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --marge:clamp(16px,5vw,64px);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--nuit); color:var(--texte);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}

#scene{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
#vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 95% at 50% 42%,transparent 38%,rgba(2,3,10,.82) 100%);
  transition:background .6s;
}
body.paysage #vignette{
  background:
    linear-gradient(100deg,rgba(3,4,11,.93) 0%,rgba(3,4,11,.86) 30%,rgba(3,4,11,.3) 56%,rgba(3,4,11,.12) 78%),
    radial-gradient(135% 100% at 50% 40%,transparent 30%,rgba(2,3,10,.74) 100%);
}

/* ---------- ecrans ---------- */
#deck{position:fixed; inset:0; z-index:2}
.screen{
  position:absolute; inset:0;
  padding-block:var(--marge);
  padding-left:max(var(--marge),env(safe-area-inset-left,0px));
  padding-right:max(var(--marge),env(safe-area-inset-right,0px));
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, visibility .5s;
}
.screen.actif{opacity:1; visibility:visible; pointer-events:auto}
.screen--large{justify-content:flex-start; padding-top:clamp(28px,7vh,72px)}

.panel{max-width:620px; pointer-events:auto; position:relative}
.panel::before{
  content:""; position:absolute; inset:-28px -48px -34px -48px; z-index:-1;
  background:radial-gradient(58% 62% at 36% 48%,rgba(4,5,12,.84),transparent 72%);
  pointer-events:none;
}
.panel--center::before{background:radial-gradient(56% 60% at 50% 50%,rgba(4,5,12,.8),transparent 74%)}
.atelier__commandes{position:relative}
.atelier__commandes::before{
  content:""; position:absolute; inset:-20px -36px -24px -36px; z-index:-1;
  background:radial-gradient(70% 70% at 40% 50%,rgba(4,5,12,.82),transparent 76%);
}
.panel--center{margin:0 auto; text-align:center; max-width:760px}
.panel--gauche{margin-right:auto}
.panel--haut{margin:0 auto 0 0; max-width:760px}
.screen--large .panel--haut{margin-bottom:clamp(14px,2.4vh,30px)}

[data-anim]{opacity:0}

/* ---------- typographie ---------- */
.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--or); margin:0 0 14px; font-weight:600;
}
.titre-geant{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(64px,14vw,170px); line-height:.92; margin:0 0 20px;
  letter-spacing:-.02em;
  background:linear-gradient(176deg,#fff 10%,var(--or) 58%,#c98b43 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.titre-grand{font-size:clamp(38px,6vw,74px)}
h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(30px,4.6vw,56px); line-height:1.08; margin:0 0 18px;
}
.chapo{font-family:var(--serif); font-size:clamp(19px,2.3vw,27px); line-height:1.45; margin:0 0 28px; color:var(--texte)}
.corps{font-size:clamp(15px,1.25vw,18px); color:var(--doux); margin:0 0 16px; max-width:56ch}
.corps--court{max-width:50ch}
.murmure{font-size:14px; color:var(--faible); line-height:1.7; margin:36px 0 0}
.appui{
  margin:22px 0 0; padding-left:16px; border-left:2px solid var(--or);
  font-size:15px; color:var(--texte);
}
.voeu{
  font-family:var(--serif); font-size:clamp(20px,2.6vw,30px);
  color:var(--or); margin:38px 0 0;
}

/* ---------- chiffres ---------- */
.chiffres{list-style:none; display:flex; flex-wrap:wrap; gap:clamp(18px,3.4vw,44px); padding:0; margin:30px 0 0}
.chiffres li{display:flex; flex-direction:column}
.chiffres b{font-family:var(--serif); font-size:clamp(26px,3.3vw,40px); font-weight:400; color:var(--cristal); line-height:1}
.chiffres span{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faible); margin-top:7px}

/* ---------- ecran 3, atelier ---------- */
.atelier{
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,460px);
  gap:clamp(18px,3vw,44px); align-items:end;
  margin-top:auto; padding-bottom:clamp(54px,8vh,86px);
}
.atelier__commandes{max-width:430px}
.reglage{display:block}
.reglage__titre{
  display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faible); margin-bottom:10px;
}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#4a3320,var(--vegetal)); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--sable); border:2px solid #241a10; cursor:grab;
  box-shadow:0 0 0 5px rgba(224,187,134,.16), 0 3px 10px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--sable);
  border:2px solid #241a10; cursor:grab;
}
#pluieVal{
  display:inline-block; margin-top:9px; font-family:var(--mono); font-size:13px;
  color:var(--sable);
}
.etat{margin:14px 0 0; font-size:15px; color:var(--doux)}
.etat b{color:var(--vegetal); font-weight:600}
.boutons{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.bouton{
  font:inherit; font-size:13.5px; padding:9px 17px; cursor:pointer;
  color:var(--texte); background:rgba(236,238,246,.07);
  border:1px solid var(--trait); border-radius:999px;
  transition:background .2s, border-color .2s, transform .1s;
}
.bouton:hover{background:rgba(236,238,246,.14); border-color:rgba(236,238,246,.3)}
.bouton:active{transform:translateY(1px)}
.bouton--fin{color:var(--doux)}
.bouton[disabled]{opacity:.45; cursor:default}
.legende{font-size:13px; color:var(--faible); margin:14px 0 0; max-width:40ch; line-height:1.6}
.legende.vif{color:var(--or)}

.atelier__graphe{margin:0}
.atelier__graphe canvas{
  width:100%; height:auto; display:block; border-radius:10px;
  background:rgba(5,6,14,.52); border:1px solid var(--trait);
}
.atelier__graphe figcaption{font-size:12px; color:var(--faible); margin-top:9px; line-height:1.5}

/* ---------- ecran 4, avatars ---------- */
.avatars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:clamp(12px,1.6vw,22px); margin-top:auto; padding-bottom:clamp(78px,9vh,94px);
}
.avatar{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  background:rgba(10,16,38,.6); border:1px solid var(--trait);
  transition:border-color .25s, transform .25s;
}
.avatar:hover{border-color:rgba(243,200,126,.45); transform:translateY(-3px)}
.avatar:not(.parlante){cursor:default}
.avatar:not(.parlante):hover{transform:none}
.avatar__media{position:relative; aspect-ratio:1/1; background:#0a1026}
.avatar__media img,.avatar__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.avatar__media video{opacity:0; transition:opacity .3s}
.avatar.joue video{opacity:1}
.avatar.joue img{opacity:0}
.avatar__media img{transition:opacity .3s}
.avatar__vide{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:52px; color:rgba(243,200,126,.35);
}
.avatar__play{
  position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(5,6,14,.68); backdrop-filter:blur(6px);
  display:grid; place-items:center; font-size:13px; color:var(--or);
  border:1px solid rgba(243,200,126,.35);
}
.avatar__texte{padding:13px 15px 16px}
.avatar__role{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--or); margin:0 0 6px; font-weight:600;
}
.avatar__titre{font-family:var(--serif); font-size:17px; margin:0 0 7px; line-height:1.25}
.avatar__ligne{font-size:13px; color:var(--doux); margin:0; line-height:1.5}

/* ---------- ecrans 5 et 6, cartes ---------- */
.cartes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:clamp(10px,1.3vw,18px); margin-top:auto; padding-bottom:clamp(80px,9vh,96px);
  max-height:66vh; overflow:auto;
}
.carte{
  padding:17px 18px; border-radius:12px;
  background:linear-gradient(170deg,rgba(155,134,232,.09),rgba(10,16,38,.5));
  border:1px solid var(--trait);
}
.carte h3{font-family:var(--serif); font-weight:400; font-size:19px; margin:0 0 8px; color:var(--texte)}
.carte p{font-size:13.5px; color:var(--doux); margin:0 0 10px; line-height:1.55}
.carte .gain{font-size:12.5px; color:var(--cristal); margin:0}

.catalogue{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:9px; margin-top:auto; padding-bottom:clamp(80px,9vh,96px);
  max-height:64vh; overflow:auto;
}
.logiciel{
  text-align:left; font:inherit; cursor:pointer; color:var(--texte);
  padding:13px 14px; border-radius:10px;
  background:rgba(10,16,38,.5); border:1px solid var(--trait);
  transition:border-color .2s, background .2s;
}
.logiciel:hover{border-color:rgba(127,212,255,.4); background:rgba(127,212,255,.07)}
.logiciel__nom{font-weight:600; font-size:14.5px; display:block; margin-bottom:4px}
.logiciel__quoi{font-size:12.5px; color:var(--doux); display:block; line-height:1.45; margin-bottom:9px}
.logiciel__cmd{
  font-family:var(--mono); font-size:11px; color:var(--faible);
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logiciel.copie{border-color:var(--vegetal)}
.logiciel.copie .logiciel__cmd{color:var(--vegetal)}
.famille{
  grid-column:1/-1; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); margin:14px 0 2px; font-weight:600;
}
.famille:first-child{margin-top:0}

.commande{
  font-family:var(--mono); font-size:clamp(15px,1.8vw,21px);
  background:rgba(10,16,38,.66); border:1px solid var(--trait);
  padding:15px 20px; border-radius:10px; display:inline-block; margin:6px 0 22px;
  color:var(--cristal);
}

/* ---------- navigation ---------- */
#dock{
  position:fixed; left:50%; bottom:calc(clamp(14px,2.6vh,28px) + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  z-index:5; display:flex; align-items:center; gap:14px;
  padding:7px 10px; border-radius:999px;
  background:rgba(5,6,14,.5); backdrop-filter:blur(10px);
  border:1px solid var(--trait);
}
#points{list-style:none; display:flex; gap:9px; margin:0; padding:0}
#points li{
  width:7px; height:7px; border-radius:50%; background:rgba(236,238,246,.22);
  cursor:pointer; transition:background .25s, transform .25s;
}
#points li:hover{background:rgba(236,238,246,.5)}
#points li.actif{background:var(--or); transform:scale(1.45)}
.nav-fleche{
  font:inherit; font-size:21px; line-height:1; width:30px; height:30px;
  display:grid; place-items:center; cursor:pointer; color:var(--doux);
  background:none; border:none; border-radius:50%; transition:color .2s, background .2s;
}
.nav-fleche:hover{color:var(--texte); background:rgba(236,238,246,.1)}

#aide{
  position:fixed; right:max(var(--marge),env(safe-area-inset-right,0px)); bottom:calc(clamp(16px,2.8vh,30px) + env(safe-area-inset-bottom,0px)); z-index:5;
  font-size:11.5px; color:var(--faible); letter-spacing:.03em;
  transition:opacity .6s; pointer-events:none;
}
#aide.efface{opacity:0}
#aide b{color:var(--doux); font-weight:600}

#chargement{
  position:fixed; inset:0; z-index:9; background:var(--nuit);
  display:grid; place-items:center; transition:opacity .7s, visibility .7s;
}
#chargement.parti{opacity:0; visibility:hidden}
#chargement span{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(243,200,126,.2); border-top-color:var(--or);
  animation:tourne 1s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- petits ecrans ---------- */
@media (max-width:860px){
  body{font-size:16px}
  .atelier{grid-template-columns:1fr; align-items:start; gap:18px}
  .atelier__graphe{max-width:460px}
  .cartes,.catalogue,.avatars{max-height:none; padding-bottom:78px}
  .screen{overflow-y:auto; justify-content:flex-start; padding-top:clamp(40px,10vh,80px)}
  .screen--large{padding-top:clamp(28px,6vh,60px)}
  .panel--center{padding-top:8vh}
  #aide{display:none}
  .chiffres{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- jauges d'alerte precoce (ecran 3) ---------- */
.jauges{margin:16px 0 0}
.jauge{display:grid; grid-template-columns:1fr 92px 42px; align-items:center; gap:10px; margin-bottom:7px}
.jauge__nom{font-size:12px; color:var(--doux)}
.jauge__nom sup{font-size:9px}
.jauge__barre{height:4px; border-radius:3px; background:rgba(236,238,246,.12); overflow:hidden}
.jauge__barre i{display:block; height:100%; width:0; border-radius:3px; background:var(--cristal); transition:width .25s linear, background .3s}
.jauge.alerte .jauge__barre i{background:#ff9a5b}
.jauge.alerte .jauge__val{color:#ff9a5b}
.jauge__val{font-family:var(--mono); font-size:11.5px; color:var(--faible); text-align:right}
.jauge__note{font-size:11px; color:var(--faible); margin:8px 0 0}
.jauge__note code{font-family:var(--mono); font-size:10.5px; color:var(--doux)}

.corps--centre{margin-left:auto; margin-right:auto}

#souffle{
  position:fixed; left:50%; top:26px; transform:translate(-50%,-12px); z-index:7;
  padding:8px 16px; border-radius:999px; font-size:13px; color:var(--texte);
  background:rgba(10,16,38,.86); border:1px solid var(--trait);
  backdrop-filter:blur(8px); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
#souffle.visible{opacity:1; transform:translate(-50%,0)}