/* Base */
:root{
  --bg:#0d0f12;
  --panel:#101419;
  --muted:#9aa6b2;
  --text:#e8eef5;
  --accent:#6ee7ff;
  --accent-2:#ffd36e;
  --header-h: 56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;
  background: radial-gradient(1200px 600px at 60% -20%, #1b2230 0%, #0e1116 60%, #07090c 100%);
  color:var(--text);
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

a{color:var(--accent)}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(7,9,12,.9), rgba(7,9,12,.5) 60%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.logo-globe:hover{
  transform: scale(1.08);
  box-shadow:0 6px 18px rgba(110,231,255,.5);
}

.top-nav a{margin-right:12px;text-decoration:none;color:#cfe6ff;opacity:.85}
.top-nav a:hover{opacity:1;text-decoration:underline}
.app{min-height:80vh;max-width:1100px;margin:24px auto;padding:0 18px 120px}

/* Plein écran quand l'app a la classe full-bleed */
.app.full-bleed{
  position:fixed;
  top:var(--header-h);
  left:0; right:0; bottom:0;
  width:100vw;
  height:calc(100svh - var(--header-h));
  max-width:none;
  margin:0; padding:0; min-height:0;
  overflow:hidden;
  z-index:0;
}

/* Cards */
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Globe Flottant */
.globe{
  position:fixed; left:0; top:0;
  width:120px; height:120px;
  background:url('assets/globe.gif') center/cover no-repeat;
  border-radius:50%;
  box-shadow:0 10px 40px rgba(0, 200, 255, .35),
             inset 0 -8px 18px rgba(0,0,0,.5);
  z-index:30;
  cursor:pointer; user-select:none;
  outline:2px solid rgba(110,231,255,.18);
  transition: box-shadow .2s ease, transform .15s ease, opacity .3s ease;
  transform: translateZ(0);
  will-change: left, top, transform;
}
.globe:hover{ transform: scale(1.06); }
.globe.hidden{ opacity:0; pointer-events:none; }

/* HUD overlay */
.hud{position:fixed;inset:0;background:rgba(10,12,16,.65);backdrop-filter:blur(8px);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh}
.hud.hidden{display:none}
.hud-box{width:min(900px,92vw);}
.hud-field{position:relative}
.hud-field input{
  width:100%;font-size:28px;line-height:56px;padding:14px 58px 14px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  color:var(--text);background:rgba(0,0,0,.45);outline:none;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.sitemap-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  height:40px;width:40px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);color:#e8eef5;font-weight:700;cursor:pointer;
}
.hud-results{margin-top:16px;display:grid;gap:10px}
.hud-row{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.sitemap{margin-top:14px;padding:16px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}

/* Hero holographique */
.hero-holo{
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2332 0%, #0f1419 50%, #0a0c10 100%);
}

.hero-holo > * {
  position: absolute;
  inset: 0;
}

.holo-back {
  background: url('assets/lab.jpg') center/cover no-repeat;
  filter: blur(3px) brightness(.95) saturate(1.02);
  z-index: 0;
  width: 100%;
  height: 100%;
}

.holo-mid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: transparent;
  z-index: 1;
  will-change: transform;
  min-width: 100%;
  min-height: 100%;
}

.holo-glass {
  z-index: 2;
  pointer-events: none;
  opacity: .85;
  background: linear-gradient(105deg, transparent 40%, rgba(140,220,255,.14) 50%, transparent 60%);
  mix-blend-mode: screen;
  animation: glassShimmer 8s ease-in-out infinite;
}

.holo-sparks {
  z-index: 3;
  pointer-events: none;
}

@keyframes glassShimmer {
  0%, 100% {
    background: linear-gradient(105deg, transparent 40%, rgba(140,220,255,.14) 50%, transparent 60%);
  }
  50% {
    background: linear-gradient(105deg, transparent 35%, rgba(140,220,255,.18) 50%, transparent 65%);
  }
}

@media (max-height: 500px) {
  .holo-mid {
    object-position: center top;
  }
}

@media (min-aspect-ratio: 21/9) {
  .holo-mid {
    object-position: center center;
  }
}

/* Eau */
.univers { padding: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* Footer */
footer{opacity:.6;text-align:center;padding:36px 0}
/* Logo Globe Miniature - CORRECTION RATIO */
.logo-globe{
  height:50px;
  width:50px;
  cursor:pointer;
  border-radius:50%;
  object-fit: cover; /* Maintient le ratio sans déformation */
  box-shadow:0 4px 12px rgba(110,231,255,.3), 
             0 0 20px rgba(110,231,255,.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Amélioration visuelle */
  border: 2px solid rgba(110,231,255,.2);
}
.logo-globe:hover{
  transform: scale(1.1);
  box-shadow:0 6px 18px rgba(110,231,255,.5),
             0 0 30px rgba(110,231,255,.25);
  border-color: rgba(110,231,255,.4);
}