/* ════════════════════════════════════════════════════════════════════
   Mavelyx — « Mirror Hall » (section GetLayers) : les sept familles d'outils
   dressées en anneau au-dessus d'une eau noire qui les reflète.
   Habillage Mavelyx (bleu nuit) ; la mécanique vient de GetLayers.
   Sans WebGL ou sans JavaScript : la grille .gl-hall-fallback reste visible.
   ════════════════════════════════════════════════════════════════════ */
.gl-hall{--accent:#9dbcff;--night:#060b17;position:relative;isolation:isolate;display:block;width:100%;color:#eaf1fb;background:var(--night);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.gl-hall *,.gl-hall *::before,.gl-hall *::after{box-sizing:border-box}
.gl-hall p,.gl-hall h2,.gl-hall h3{margin:0}
.gl-hall-stage{position:relative;height:min(92vh,860px);min-height:520px;width:100%}
.gl-hall-canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;touch-action:pan-y;cursor:grab}
.gl-hall-canvas.-dragging{cursor:grabbing}
.gl-hall-css3d{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.gl-hall-label{white-space:nowrap;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;text-shadow:0 1px 12px rgba(0,0,0,.7);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* HUD — surcouche nette au-dessus du WebGL */
.gl-hall-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.gl-hall-hud .vignette{position:absolute;inset:0;background:radial-gradient(130% 90% at 50% 42%,transparent 52%,rgba(2,4,9,.55) 100%),linear-gradient(to bottom,rgba(2,4,9,.42) 0%,transparent 20%,transparent 62%,rgba(2,4,9,.62) 100%)}
.gl-hall-hud .frame{position:absolute;inset:clamp(14px,2.4vh,26px);border:1px solid rgba(160,200,255,.11);border-radius:3px;box-shadow:inset 0 0 60px rgba(3,6,14,.5);opacity:0;transition:opacity 1.6s ease}
.gl-hall-hud .frame::before,.gl-hall-hud .frame::after{content:"";position:absolute;width:9px;height:9px;border:1px solid rgba(180,214,255,.5)}
.gl-hall-hud .frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.gl-hall-hud .frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.gl-hall-hud .mast{position:absolute;top:clamp(30px,6.6vh,66px);left:50%;transform:translateX(-50%) translateY(-12px);width:92%;text-align:center;opacity:0;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)}
.gl-hall-hud .kicker{font-size:clamp(9px,.95vw,11px);letter-spacing:.42em;text-transform:uppercase;color:rgba(180,206,244,.6);margin-bottom:15px;font-weight:700}
.gl-hall-hud .kicker b{color:var(--accent);font-weight:700}
.gl-hall-hud h2{font-weight:300;font-size:clamp(30px,5.2vw,62px);line-height:1;letter-spacing:.01em;color:#f2f7ff;text-shadow:0 2px 44px rgba(70,140,220,.4),0 1px 3px rgba(0,0,0,.55)}
.gl-hall-hud h2 strong{font-weight:700}
.gl-hall-hud .sub{margin-top:16px;font-size:clamp(12px,1.25vw,15px);letter-spacing:.03em;color:rgba(206,222,246,.72);max-width:60ch;margin-inline:auto;line-height:1.5}
.gl-hall-hud .focus{position:absolute;bottom:clamp(30px,6vh,64px);left:50%;transform:translateX(-50%) translateY(14px);width:92%;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)}
.gl-hall-hud .counter{display:flex;align-items:baseline;gap:7px;font:700 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.16em}
.gl-hall-hud .counter .num{color:var(--accent);font-size:14px;text-shadow:0 0 16px rgba(157,188,255,.5)}
.gl-hall-hud .counter i{color:rgba(190,214,246,.34);font-style:normal}
.gl-hall-hud .counter .total{color:rgba(190,214,246,.5)}
.gl-hall-hud .name{font-weight:300;font-size:clamp(20px,3.2vw,34px);letter-spacing:.12em;text-transform:uppercase;color:#eef4ff;text-shadow:0 2px 30px rgba(50,120,200,.4),0 1px 2px rgba(0,0,0,.6);will-change:transform,opacity,filter;text-align:center}
.gl-hall-hud .desc{font-size:clamp(13px,1.1vw,15px);color:rgba(206,222,246,.78);max-width:52ch;text-align:center;line-height:1.5}
@keyframes glFocusSwap{from{opacity:0;transform:translateY(9px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.gl-hall-hud .name.-swap,.gl-hall-hud .desc.-swap{animation:glFocusSwap .5s cubic-bezier(.22,.61,.36,1) both}
.gl-hall-hud .dots{display:flex;align-items:center;gap:9px;margin-top:2px}
.gl-hall-hud .dots i{width:5px;height:5px;border-radius:4px;background:rgba(176,204,244,.26);transition:width .5s cubic-bezier(.22,.61,.36,1),background .5s ease,box-shadow .5s ease}
.gl-hall-hud .dots i.-on{width:22px;background:var(--accent);box-shadow:0 0 12px rgba(157,188,255,.65)}
.gl-hall-hud .go{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:9px;background:#fff;color:#202936;font-weight:700;text-decoration:none;font-size:15px;transition:transform .2s,background .2s;margin-top:4px}
.gl-hall-hud .go:hover{transform:translateY(-2px);background:#e8f0fd}
.gl-hall-hud .hint{position:absolute;bottom:clamp(34px,7vh,74px);right:clamp(26px,4vw,58px);display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(196,218,248,.55);opacity:0;transition:opacity .8s ease}
.gl-hall-hud .hint::before{content:"";width:22px;height:1px;background:rgba(196,218,248,.4);animation:glHint 2.4s ease-in-out infinite}
@keyframes glHint{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(6px);opacity:.9}}
.gl-hall-hud .arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;padding:0 clamp(18px,3vw,48px);transform:translateY(-50%)}
.gl-hall-hud .arrows button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(6,11,23,.55);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.gl-hall-hud .arrows button:hover{background:rgba(52,113,219,.6);border-color:var(--accent)}
.gl-hall.-ready .gl-hall-hud .mast,.gl-hall.-ready .gl-hall-hud .focus{opacity:1;transform:translateX(-50%) translateY(0)}
.gl-hall.-ready .gl-hall-hud .hint,.gl-hall.-ready .gl-hall-hud .frame{opacity:1}
.gl-hall.-nudged .gl-hall-hud .hint{opacity:0!important}

/* Repli (sans WebGL / sans JS) : les sept cartes en grille, vraies cibles de navigation */
.gl-hall-fallback{position:relative;z-index:2;width:85%;max-width:1400px;margin:0 auto;padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px)}
.gl-hall-fallback header{text-align:center;max-width:760px;margin:0 auto 40px}
.gl-hall-fallback .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.gl-hall-fallback h2{font-size:clamp(30px,3.8vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:300;color:#fff}
.gl-hall-fallback h2 strong{font-weight:700}
.gl-hall-fallback .sub{margin-top:14px;color:rgba(255,255,255,.72);font-size:17px;line-height:1.55}
.gl-hall-fallback ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.gl-hall-fallback a{display:block;color:#fff;text-decoration:none;border-radius:14px;overflow:hidden;background:#0d1526;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .3s,box-shadow .3s}
.gl-hall-fallback a:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(157,188,255,.6),0 30px 60px -30px rgba(52,113,219,.6)}
.gl-hall-fallback img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gl-hall-fallback span{display:block;padding:14px 16px 16px}
.gl-hall-fallback strong{display:block;font-size:17px;margin-bottom:4px}
.gl-hall-fallback small{color:rgba(255,255,255,.7);font-size:13px;line-height:1.45}
.gl-hall.-live .gl-hall-fallback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gl-hall:not(.-live) .gl-hall-stage{display:none}
.gl-hall .hm-note{text-align:center;padding:22px 0 30px;position:relative;z-index:2}
.gl-hall .hm-note a{color:var(--accent)!important;font-weight:700;text-decoration:none}
.gl-hall .hm-note a:hover{text-decoration:underline}

@media (max-width:800px){
  .gl-hall-stage{height:min(78vh,620px);min-height:440px}
  .gl-hall-hud .hint,.gl-hall-hud .desc{display:none}
  .gl-hall-hud .arrows{top:auto;bottom:160px;transform:none}
  .gl-hall-hud .focus{bottom:22px}
}
html.calm .gl-hall-hud .hint::before{animation:none}html.calm .gl-hall-hud .name.-swap,html.calm .gl-hall-hud .desc.-swap{animation:none}