/* =================== v5 : polices choisies par Romain =================== */
/* Quantico partout (titres, textes, boutons, fiches). Le nom « Demare AI » a sa propre police futuriste,
   et la phrase « La solution, tout simplement. » est écrite « à la main ». Les deux sont encore en proposition :
   voir polices.html. */
:root{
  --font-title:"Quantico",system-ui,sans-serif;
  --font-body:"Quantico",system-ui,sans-serif;
  --font-brand:"Orbitron","Quantico",system-ui,sans-serif; --brand-w:700;
  --font-hand:"Nothing You Could Do","Quantico",cursive;
}
body,button,input{font-family:var(--font-body)}
/* Quantico n'existe qu'en 400 et 700 : on évite les faux gras et on resserre un peu */
.panel-card h2,.room-title h1,.endwall h2{letter-spacing:-.005em}
.topnav button{font-weight:700;letter-spacing:.01em}

/* le nom : police futuriste */
.brand,.wall-logo b,.brandrow b{font-family:var(--font-brand);font-weight:var(--brand-w);letter-spacing:.01em}
.hud .brand{font-size:20px}
.wall-logo b{font-size:50px}
.brandrow b{font-size:48px}
@media (max-width:700px){.brandrow b{font-size:28px}}

/* la phrase écrite à la main */
.hand,.wall-logo span,.brandrow span{font-family:var(--font-hand);font-weight:400;font-style:normal;letter-spacing:.01em;text-transform:none;color:#d6e2f6}
.wall-logo span{font-size:34px;line-height:1.1;color:#e9f1ff}
.brandrow span{font-size:34px;line-height:1.1;color:#e9f1ff}
.hand{font-weight:400}
.room-title small .hand{font-size:1.6em;letter-spacing:0;vertical-align:-.1em;color:#e9f1ff}
.chip{white-space:nowrap}


@media (max-width:900px){.hud .brand span{display:inline}}

/* l'écran survolé s'affiche en grand, au centre */
.zoomcard{position:fixed;left:50%;top:48%;z-index:30;transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;flex-direction:column;align-items:center;gap:10px}
.zoomcard.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.zc-screen{border-radius:14px;overflow:hidden;border:2px solid rgba(56,225,255,.7);box-shadow:0 0 0 8px rgba(8,13,28,.65),0 0 90px rgba(56,225,255,.45),0 30px 80px rgba(0,0,0,.6);background:#070d1c;line-height:0}
.zc-screen img,.zc-screen video{display:block}
.zc-ui{position:relative;overflow:hidden;line-height:normal}
.zc-cap{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 18px;border-radius:12px;background:rgba(8,13,28,.82);backdrop-filter:blur(6px)}
.zc-cap b{font:700 18px var(--font-title);color:#fff}
.zc-cap span{font:600 13px var(--font-body);color:var(--cyan)}

/* images d'illustration dans les fiches */
.panel-card li.has-th{flex-direction:row;align-items:center;gap:14px}
.li-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.th{position:relative;flex:none;width:190px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid rgba(56,225,255,.4);background:#070d1c;cursor:zoom-in;transition:border-color .2s,box-shadow .2s}
.th:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(56,225,255,.45)}
.th img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.th-in{position:absolute;left:0;top:0;width:480px;height:300px;transform:scale(.396);transform-origin:0 0}
.th::after{content:"Survoler pour agrandir";position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font:600 10px var(--font-body);color:#fff;background:linear-gradient(0deg,rgba(5,8,15,.85),transparent);opacity:0;transition:opacity .2s;text-align:center}
.th:hover::after{opacity:1}
@media (max-width:560px){.panel-card li.has-th{flex-direction:column;align-items:stretch}.th{width:100%}.th-in{transform:scale(.7)}}

/* aide : comment se déplacer */
.help{position:fixed;right:26px;top:70px;z-index:14;width:min(400px,calc(100vw - 32px));padding:18px 20px 16px;border-radius:16px;background:rgba(8,13,28,.94);backdrop-filter:blur(10px);border:1px solid rgba(56,225,255,.5);box-shadow:0 0 50px rgba(37,99,235,.35)}
.help[hidden]{display:none}
.help>b{display:block;font:700 18px var(--font-title);margin-bottom:10px}
.help dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
.help dt{font:700 13px var(--font-title);color:var(--cyan);white-space:nowrap}
.help dd{margin:0;font-size:13.5px;line-height:1.45;color:#d3deef}
.help kbd{display:inline-block;min-width:22px;padding:0 6px;text-align:center;border-radius:6px;border:1px solid rgba(138,155,184,.6);background:rgba(255,255,255,.07);font:700 12px var(--font-body);color:#fff}
@media (max-width:760px){.help{right:16px;left:16px;width:auto;top:64px}.help dl{grid-template-columns:1fr;gap:2px}.help dd{margin-bottom:8px}}
.hint{max-width:calc(100vw - 32px)}
@media (max-width:1100px){.hud-right{flex-wrap:wrap;justify-content:flex-end}}

/* grande image en haut d'une fiche */
.p-hero{margin:0 0 16px;border-radius:12px;overflow:hidden;border:1px solid rgba(56,225,255,.4);line-height:0}
.p-hero img{width:100%;height:auto;display:block}