/* TARS — couche DÉMO (vitrine publique). Chargée uniquement sur /demo. */

/* Bandeau fixe en haut → on réserve la place sans recouvrir l'app */
#demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:600;height:34px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:#16243f;color:#fff;
  font:600 13px/1 "Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:-.2px;
  box-shadow:0 1px 6px rgba(0,0,0,.25);padding:0 12px;text-align:center;
}
#demo-banner a{color:#19c3b2;text-decoration:none;font-weight:700;white-space:nowrap}
#demo-banner a:hover{text-decoration:underline}
#demo-banner .demo-ml-link{color:rgba(255,255,255,.5);font-weight:400;font-size:11px}
body.has-demo-banner .layout{margin-top:34px;height:calc(100vh - 34px);height:calc(100dvh - 34px)}

/* En démo, on cache le widget de quota (tokens/alertes chiffrés) — sans intérêt pour un visiteur */
#usage-widget{display:none !important}

@media (max-width:600px){
  #demo-banner{font-size:11.5px;gap:8px}
}

/* Mobile : le bandeau démo occupe le haut → on descend le bouton ☰ juste en dessous
   pour qu'il reste cliquable (sinon le bandeau le recouvre). */
@media (max-width:820px){
  body.has-demo-banner #mobile-menu-btn{top:43px}
}

/* Modales démo (panneaux verrouillés, email-gate, mentions légales) */
.demo-modal-bg{
  position:fixed;inset:0;z-index:900;background:rgba(15,23,40,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:demo-fade .15s ease;
}
@keyframes demo-fade{from{opacity:0}to{opacity:1}}
.demo-modal{
  position:relative;background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:30px 28px 24px;box-shadow:0 18px 50px rgba(16,33,60,.3);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:#1f2d3d;
}
.demo-modal-x{
  position:absolute;top:12px;right:14px;background:none;border:none;font-size:18px;
  color:#9aa7b4;cursor:pointer;line-height:1;padding:4px;
}
.demo-modal-x:hover{color:#1f2d3d}
.demo-modal-title{font-size:19px;font-weight:600;color:#16243f;margin-bottom:12px;padding-right:18px}
.demo-modal-body{font-size:14.5px;line-height:1.55;color:#3b4858}
.demo-modal-body p{margin:0 0 12px}
.demo-modal-foot{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.demo-foot-note{font-size:12px;color:#8a98a6;margin:0}
.demo-foot-note a{color:#1a6fbd;text-decoration:none}
.demo-input{
  width:100%;border:1px solid #cfd6dd;border-radius:9px;padding:13px 14px;
  font-size:16px;color:#1f2d3d;font-family:inherit;outline:none;margin-top:4px;
}
.demo-input:focus{border-color:#1a6fbd}
.demo-err{color:#d32f2f;font-size:13px;min-height:16px;margin-top:6px}
.demo-cta{
  display:inline-block;text-align:center;background:#16243f;color:#fff;border:none;
  border-radius:24px;padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;
  text-decoration:none;font-family:inherit;transition:opacity .15s;
}
.demo-cta:hover{opacity:.92}