/* Page de choix des consoles d'admin. Mêmes repères que le Key System : noir pur, fumée WebGL,
   panneaux en dégradé à coins ronds, Inter très gras, JetBrains Mono, rouge #ff1f3a, bouton blanc en relief.
   La 3D est dans admin.js (fumée, objets) et ici (inclinaison des portes, lettres du titre). */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000;
  --panel:linear-gradient(165deg,rgba(22,22,22,.94) 0%,rgba(10,10,10,.94) 60%,rgba(5,5,5,.96) 100%);
  --line:rgba(255,255,255,.09);
  --grey:#9a9a9a;
  --red:#ff1f3a;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{background:var(--bg)}
body{background:var(--bg);color:#fff;font-family:'Inter',system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
kbd{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.07);color:#cfcfcf}

/* ---- fond : fumée WebGL (#gl), lueurs en repli, grain ---- */
.bgfx{position:fixed;pointer-events:none;z-index:0}
.glow{border-radius:50%;filter:blur(120px)}
.glow1{width:620px;height:620px;background:#fff;opacity:.06;top:-320px;right:-160px}
.glow2{width:520px;height:520px;background:var(--red);opacity:.08;bottom:-300px;left:120px}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.grain{inset:0;z-index:6;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---- intro du logo ---- */
.intro{position:fixed;inset:0;z-index:20;background:#000;pointer-events:none;display:flex;align-items:center;justify-content:center;animation:introOut 1.2s var(--ease) forwards}
.intro::before{content:'';width:min(60vmin,340px);aspect-ratio:2/1;background:url(/img/logo.png) center/contain no-repeat;animation:introLogo 1.2s var(--ease) forwards}
@keyframes introOut{0%,60%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes introLogo{0%{opacity:0;transform:scale(.7);filter:blur(14px)}35%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 30px rgba(255,255,255,.6))}100%{opacity:0;transform:scale(2.6)}}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* ---- haut et bas ---- */
.haut,.bas{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,4vw,40px)}
.marque{display:flex;gap:12px;align-items:center}
.tuile{width:44px;height:44px;border-radius:13px;flex-shrink:0;background:#000 url(/img/logo.png) center/80% no-repeat;border:1px solid rgba(255,255,255,.16);animation:breathe 3.5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 18px rgba(255,255,255,.1)}50%{box-shadow:0 0 34px rgba(255,255,255,.3)}}
.marque strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.2px}
.marque small{font-family:var(--mono);font-size:11px;color:var(--grey)}
.marque small b{color:var(--red);font-weight:600}
.horloge{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.5);font-family:var(--mono);font-size:11px;color:#c4c4c4}
.horloge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.bas{margin-top:auto;border-top:1px solid var(--line);background:rgba(4,4,4,.6);font-size:12.5px;color:var(--grey)}
.bas a{font-weight:600;color:#c4c4c4;transition:color .2s}
.bas a:hover{color:#fff}

/* ---- titre : chaque lettre se relève ---- */
main{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;padding:clamp(14px,4vh,44px) clamp(18px,4vw,40px) 44px}
.sur{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);animation:rise .8s var(--ease) backwards;animation-delay:1s}
h1{font-size:clamp(32px,5.4vw,58px);font-weight:900;letter-spacing:-1.6px;line-height:1.04;margin:12px 0;text-shadow:0 0 40px rgba(255,255,255,.25);perspective:600px}
h1 .r{color:var(--red);text-shadow:0 0 26px rgba(255,31,58,.55)}
h1 .w{display:inline-block;white-space:nowrap}
h1 .c{display:inline-block;transform-origin:50% 100%;animation:letter .6s var(--ease) backwards;animation-delay:calc(1s + var(--i) * 26ms)}
@keyframes letter{from{opacity:0;transform:translateY(14px) rotateX(-90deg)}to{opacity:1;transform:none}}
.intro-texte{color:#b0b0b0;font-size:15px;max-width:48ch;animation:rise .8s var(--ease) backwards;animation-delay:1.3s}

/* ---- les trois portes ---- */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(24px,5vh,48px)}
.porte{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--a:0deg;position:relative;display:flex;flex-direction:column;gap:10px;min-height:420px;padding:22px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s,opacity .3s;
  animation:rise .9s var(--ease) backwards;animation-delay:calc(1.35s + var(--d) * 110ms)}
.porte:nth-child(1){--d:0}.porte:nth-child(2){--d:1}.porte:nth-child(3){--d:2}
/* reflet qui suit le pointeur */
.porte::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(255,255,255,.1),transparent 60%)}
/* filet lumineux qui tourne autour de la porte visée */
.porte::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--a),rgba(255,255,255,.08) 0 62%,var(--red) 78%,#fff 88%,rgba(255,255,255,.08) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tourne 5s linear infinite}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes tourne{to{--a:360deg}}
.porte:hover,.porte:focus-visible{border-color:rgba(255,255,255,.24);box-shadow:0 26px 54px rgba(0,0,0,.75),0 0 44px rgba(255,255,255,.07)}
.porte:hover::after,.porte:hover::before,.porte:focus-visible::after,.porte:focus-visible::before{opacity:1}
@media (hover:hover){.portes:hover .porte:not(:hover){opacity:.6}}
.porte.suivi{transition:transform .08s linear,border-color .3s,box-shadow .3s,opacity .3s}
.num{align-self:flex-start;font-family:var(--mono);font-size:10.5px;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.07);color:#cfcfcf;transform:translateZ(18px)}
.objet{display:block;height:170px;margin:0 -8px;transform:translateZ(40px)}
.porte h2{font-size:26px;font-weight:900;letter-spacing:-.6px;transform:translateZ(34px);text-shadow:0 0 26px rgba(255,255,255,.2)}
.porte p{color:#b0b0b0;font-size:14px;max-width:30ch;transform:translateZ(22px)}
.porte ul{list-style:none;display:grid;gap:6px;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--grey);transform:translateZ(14px)}
.porte li{display:flex;align-items:center;gap:9px}
.porte li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);flex-shrink:0}
/* bouton blanc en relief, comme « Générer une key » */
.aller{position:relative;overflow:hidden;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;height:44px;border-radius:12px;
  background:linear-gradient(180deg,#fff,#d4d4d4);color:#000;font-weight:800;font-size:14px;
  box-shadow:0 5px 0 #6f6f6f,0 14px 30px rgba(255,255,255,.14);transform:translateZ(26px);transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.aller::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,31,58,.35),transparent);transform:skewX(-20deg);animation:sweep 3.4s 2s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}45%,100%{left:140%}}
.aller kbd{background:rgba(0,0,0,.1);color:#333}
.porte:hover .aller,.porte:focus-visible .aller{translate:0 -2px;box-shadow:0 7px 0 #6f6f6f,0 22px 44px rgba(255,255,255,.26)}
.porte:active .aller{translate:0 4px;box-shadow:0 1px 0 #6f6f6f,0 6px 14px rgba(255,255,255,.16)}

/* ---- sortie : la page s'éloigne, un volet noir se ferme ---- */
.rideau{position:fixed;inset:0;z-index:30;pointer-events:none;background:#000;opacity:0;transition:opacity .4s ease}
.rideau.ferme{opacity:1;pointer-events:auto}
body.part main{transition:transform .45s var(--ease),filter .45s;transform:scale(1.06);filter:blur(6px)}

@media (max-width:860px){
  .portes{grid-template-columns:1fr}
  .porte{min-height:0;transform:none}
  .objet{height:130px}
  .horloge,.bas span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
  .porte{transform:none}
}