/* ============================================================
   demo-app.css — App immersive Trackary
   Équivalent structurel de l'app immersive Prodecta :
   sidebar sombre + onglets + cartes d'espace + scène + topbar
   flottante + CTA permanent. Couleurs : charte Trackary.
   ============================================================ */

:root {
  --d-paper:   #071710;
  --d-surface: #0d2419;
  --d-panel:   #13251b;
  --d-deep:    #050f0a;
  --d-ink:     #edf7f0;
  --d-ink-2:   rgb(237 247 240 / 0.62);
  --d-ink-3:   rgb(237 247 240 / 0.4);
  --d-line:    rgb(226 246 232 / 0.14);
  --d-line-2:  rgb(226 246 232 / 0.08);
  --lime:      #c8ff00;
  --on-lime:   #102d20;
  --ok:        #3fb87a;
  --warn:      #e8b53a;
  --alert:     #e0714f;
  --ease:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sp:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --font:      "Inter", system-ui, sans-serif;
  --font-d:    "Manrope", "Inter", system-ui, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar:   408px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--d-paper); color: var(--d-ink);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100svh; }

/* ================= SIDEBAR ================= */
.side {
  background: var(--d-surface); border-right: 1px solid var(--d-line);
  display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 3;
}
.side__head { padding: 20px 22px 14px; display: flex; align-items: center; gap: 14px; }
.side__logo { flex: 1; }
.side__logo img { height: 26px; width: auto; }
.side__sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--d-ink-3); margin-top: 5px;
}
.side__close {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid var(--d-line); background: transparent;
  display: grid; place-items: center;
  transition: background 0.2s, transform 0.2s var(--ease-sp);
}
.side__close:hover { background: rgb(226 246 232 / 0.08); transform: rotate(90deg); }
.side__close svg { width: 16px; height: 16px; }

/* Onglets */
.tabs { display: flex; padding: 0 12px; border-bottom: 1px solid var(--d-line); gap: 2px; }
.tab {
  flex: 1; position: relative; background: none; border: 0;
  padding: 12px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--d-ink-3); transition: color 0.2s;
}
.tab svg { width: 19px; height: 19px; }
.tab span { font-size: 9.5px; font-weight: 720; letter-spacing: 0.09em; text-transform: uppercase; }
.tab::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
  background: var(--lime); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform 0.28s var(--ease);
}
.tab:hover { color: var(--d-ink-2); }
.tab.active { color: var(--lime); }
.tab.active::after { transform: scaleX(1); }
.tab i.dot {
  position: absolute; top: 9px; right: calc(50% - 17px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--alert);
  box-shadow: 0 0 0 3px rgb(224 113 79 / 0.22);
}

/* Titre de section */
.side__title {
  padding: 15px 22px 13px; border-bottom: 1px solid var(--d-line-2);
  display: flex; align-items: baseline; gap: 10px;
}
.side__title strong {
  font-family: var(--font-d); font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.side__title span { font-size: 12.5px; color: var(--d-ink-3); }

.side__body { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.side__body::-webkit-scrollbar { width: 6px; }
.side__body::-webkit-scrollbar-thumb { background: rgb(226 246 232 / 0.13); border-radius: 3px; }

/* --- Carte d'espace (≙ carte "VISITE 3D" Prodecta) --- */
.space {
  position: relative; width: 100%; text-align: left;
  border: 1px solid var(--d-line); border-radius: 15px;
  background: var(--d-panel); overflow: hidden; padding: 0;
  margin-bottom: 11px; display: block;
  transition: transform 0.24s var(--ease), border-color 0.24s, box-shadow 0.24s;
}
.space:hover { transform: translateY(-2px); border-color: rgb(200 255 0 / 0.34); box-shadow: 0 14px 34px rgb(0 0 0 / 0.4); }
.space.active { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 14px 34px rgb(0 0 0 / 0.45); }
.space__thumb { position: relative; display: block; height: 142px; overflow: hidden; }
.space__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(5 15 10 / 0.1) 0%, rgb(5 15 10 / 0.55) 52%, rgb(5 15 10 / 0.96) 100%);
}
.space__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.space__txt { position: relative; display: block; margin-top: -34px; padding: 0 15px 14px; z-index: 1; }
.space__txt h3 {
  margin: 0; font-family: var(--font-d); font-size: 15.5px; font-weight: 800;
  letter-spacing: -0.008em; text-transform: uppercase;
}
.space__kind {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 760; letter-spacing: 0.13em; text-transform: uppercase; color: var(--lime);
}
.space__desc { margin: 7px 0 0; font-size: 12.5px; color: var(--d-ink-2); line-height: 1.45; padding-right: 50px; }
.space__go {
  position: absolute; right: 14px; bottom: 13px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lime); color: var(--on-lime);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgb(200 255 0 / 0.3);
  transition: transform 0.24s var(--ease-sp);
}
.space:hover .space__go { transform: scale(1.12) translateX(2px); }
.space__go svg { width: 16px; height: 16px; }
.space__meta {
  position: absolute; top: 11px; left: 11px; display: flex; gap: 6px; z-index: 2;
}

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 100px;
  background: rgb(5 15 10 / 0.72); backdrop-filter: blur(9px);
  border: 1px solid var(--d-line);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--d-ink-2);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; }
.pill--ok    { color: #7fe0ab; } .pill--ok i    { background: var(--ok); }
.pill--warn  { color: #f0cf7d; } .pill--warn i  { background: var(--warn); }
.pill--alert { color: #f0967a; } .pill--alert i { background: var(--alert); }

/* Liste générique (onglets Planning / Conformité / Infos) */
.list { display: flex; flex-direction: column; gap: 9px; }
.item {
  border: 1px solid var(--d-line); border-radius: 13px; background: var(--d-panel);
  padding: 13px 15px; display: flex; gap: 12px; align-items: flex-start;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.item:hover { border-color: rgb(200 255 0 / 0.3); transform: translateX(2px); }
.item__ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: rgb(226 246 232 / 0.07);
}
.item__ico svg { width: 17px; height: 17px; color: var(--lime); }
.item__b { flex: 1; min-width: 0; }
.item__t { font-size: 13.5px; font-weight: 640; }
.item__s { font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
.item__v { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; }

.grp-title {
  font-size: 10px; font-weight: 740; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--d-ink-3); margin: 16px 4px 9px;
}
.grp-title:first-child { margin-top: 4px; }

/* Sélecteur de formule / offres */
.plan {
  border: 1px solid var(--d-line); border-radius: 15px; background: var(--d-panel);
  padding: 16px; margin-bottom: 11px; transition: border-color 0.2s, transform 0.2s var(--ease);
}
.plan.reco { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan__name { font-family: var(--font-d); font-size: 15px; font-weight: 780; }
.plan__price { font-family: var(--font-d); font-size: 15px; font-weight: 780; }
.plan__price small { font-family: var(--font); font-size: 11px; font-weight: 500; color: var(--d-ink-3); }
.plan ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.plan li { display: flex; gap: 8px; font-size: 12.5px; color: var(--d-ink-2); }
.plan li svg { width: 14px; height: 14px; flex: none; color: var(--ok); margin-top: 2px; }

/* ================= SCÈNE ================= */
.stage { position: relative; overflow: hidden; background: var(--d-deep); }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Topbar flottante */
.topbar {
  position: absolute; top: 18px; left: 18px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 12px; border-radius: 100px;
  background: rgb(7 23 16 / 0.76); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--d-line); box-shadow: 0 14px 40px rgb(0 0 0 / 0.4);
}
.topbar__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--lime); display: grid; place-items: center; flex: none; }
.topbar__mark svg { width: 17px; height: 17px; color: var(--on-lime); }
.topbar__sep { width: 1px; height: 22px; background: var(--d-line); }
.tb-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--d-ink-2);
  transition: background 0.2s, color 0.2s;
}
.tb-btn:hover { background: rgb(226 246 232 / 0.1); color: var(--d-ink); }
.tb-btn svg { width: 17px; height: 17px; }
.tb-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 100px; background: rgb(226 246 232 / 0.07);
  border: 1px solid var(--d-line); font-size: 12px; color: var(--d-ink-2);
}
.tb-live b { color: var(--d-ink); font-weight: 650; }
.tb-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgb(63 184 122 / 0.4); animation: liveP 2.1s var(--ease) infinite;
}
.tb-live.is-warn i { background: var(--warn); animation: none; }
@keyframes liveP { 0%,100% { box-shadow: 0 0 0 0 rgb(63 184 122 / 0.45); } 50% { box-shadow: 0 0 0 8px rgb(63 184 122 / 0); } }

/* CTA permanent */
.cta-fixed {
  position: absolute; top: 18px; right: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 22px; border: 0; border-radius: 100px;
  background: var(--lime); color: var(--on-lime);
  font-family: var(--font-d); font-size: 14.5px; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 12px 34px rgb(200 255 0 / 0.28);
  transition: transform 0.22s var(--ease-sp), box-shadow 0.22s;
}
.cta-fixed:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgb(200 255 0 / 0.4); }
.cta-fixed svg { width: 17px; height: 17px; }

/* Bouton flottant secondaire (bas droite) */
.float-btn {
  position: absolute; right: 18px; bottom: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 22px; border: 1px solid var(--d-line); border-radius: 100px;
  background: rgb(7 23 16 / 0.82); backdrop-filter: blur(14px);
  font-family: var(--font-d); font-size: 14px; font-weight: 760;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.44);
  transition: transform 0.22s var(--ease-sp), border-color 0.22s;
}
.float-btn:hover { transform: translateY(-2px); border-color: var(--lime); }
.float-btn svg { width: 17px; height: 17px; color: var(--lime); }

/* Bulle ronde promo */
.bubble {
  position: absolute; right: 24px; top: 84px; z-index: 6;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgb(7 23 16 / 0.86); border: 1px solid var(--d-line);
  backdrop-filter: blur(12px); display: grid; place-items: center;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.4);
  animation: floaty 4.4s ease-in-out infinite;
}
.bubble svg { width: 22px; height: 22px; color: var(--lime); }
.bubble__x {
  position: absolute; right: -4px; bottom: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--d-panel); border: 1px solid var(--d-line);
  display: grid; place-items: center; font-size: 11px; color: var(--d-ink-3);
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Mentions bas */
.stage__foot {
  position: absolute; right: 18px; bottom: 78px; z-index: 5;
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--d-ink-3);
}
.stage__foot a { padding: 5px 11px; border-radius: 100px; background: rgb(7 23 16 / 0.7); border: 1px solid var(--d-line-2); }
.stage__by {
  position: absolute; left: 18px; bottom: 18px; z-index: 5;
  font-size: 10px; font-weight: 740; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-ink-3);
}
.stage__by b { color: var(--lime); }

/* Hotspots sur la scène */
.hotspot {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: rgb(200 255 0 / 0.16); backdrop-filter: blur(5px);
  display: grid; place-items: center;
}
.hotspot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--lime); animation: hsP 2.4s var(--ease) infinite;
}
.hotspot i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.hotspot:hover { background: rgb(200 255 0 / 0.3); }
@keyframes hsP { 0% { transform: scale(0.82); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.hotspot__label {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 12px; border-radius: 100px;
  background: rgb(7 23 16 / 0.9); border: 1px solid var(--d-line);
  font-size: 11.5px; font-weight: 620; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease);
}
.hotspot:hover .hotspot__label { opacity: 1; transform: translateX(-50%) translateY(-3px); }

/* Panneau d'information (point d'intérêt ouvert) */
.info-panel {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 7; width: min(560px, calc(100% - 40px));
  border: 1px solid var(--d-line); border-radius: 20px;
  background: rgb(7 23 16 / 0.9); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
  padding: 18px 20px; display: none;
}
.info-panel.open { display: block; animation: ipIn 0.42s var(--ease) both; }
@keyframes ipIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%); } }
.info-panel__head { display: flex; align-items: flex-start; gap: 12px; }
.info-panel h4 { margin: 0; font-family: var(--font-d); font-size: 16px; font-weight: 800; }
.info-panel p { margin: 6px 0 0; font-size: 13px; color: var(--d-ink-2); line-height: 1.5; }
.info-panel__x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--d-line); background: transparent; display: grid; place-items: center; flex: none; }
.info-panel__x svg { width: 14px; height: 14px; }
.info-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.kv { border: 1px solid var(--d-line-2); border-radius: 11px; padding: 9px 11px; background: rgb(226 246 232 / 0.04); }
.kv span { display: block; font-size: 9.5px; font-weight: 740; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-ink-3); }
.kv b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 14px; font-weight: 700; }

/* Visite guidée */
.tour {
  position: absolute; left: 18px; bottom: 60px; z-index: 6;
  width: min(310px, calc(100% - 36px));
  border: 1px solid var(--d-line); border-radius: 18px;
  background: rgb(7 23 16 / 0.88); backdrop-filter: blur(16px);
  padding: 15px 17px; box-shadow: 0 20px 54px rgb(0 0 0 / 0.5);
}
.tour__tag { font-size: 9.5px; font-weight: 760; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lime); }
.tour h4 { margin: 6px 0 0; font-family: var(--font-d); font-size: 15.5px; font-weight: 800; }
.tour p { margin: 6px 0 0; font-size: 12.5px; color: var(--d-ink-2); line-height: 1.5; }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.tour__count { font-family: var(--mono); font-size: 11.5px; color: var(--d-ink-3); }
.tour__btns { display: flex; gap: 6px; }
.tour__btn {
  height: 34px; min-width: 34px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--d-line);
  background: transparent; font-size: 12.5px; font-weight: 640;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.tour__btn svg { width: 15px; height: 15px; }
.tour__btn:hover { background: rgb(226 246 232 / 0.09); }
.tour__btn--go { background: var(--lime); color: var(--on-lime); border-color: var(--lime); font-weight: 740; }
.tour__bar { height: 3px; border-radius: 2px; background: rgb(226 246 232 / 0.12); margin-top: 12px; overflow: hidden; }
.tour__bar i { display: block; height: 100%; background: var(--lime); border-radius: 2px; transition: width 0.4s var(--ease); }

/* Loader */
.loader { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; background: var(--d-deep); transition: opacity 0.5s; }
.loader.gone { opacity: 0; pointer-events: none; }
.loader__ring { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgb(226 246 232 / 0.14); border-top-color: var(--lime); animation: spin 0.85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= Responsive ================= */
@media (max-width: 1080px) { :root { --sidebar: 348px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 46svh 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--d-line); }
  .tour { display: none; }
  .bubble { display: none; }
  .stage__foot { display: none; }
  /* la topbar et le CTA ne peuvent pas cohabiter sur une ligne de 393px */
  .topbar { top: 12px; left: 12px; right: 12px; padding: 6px 8px 6px 10px; }
  .topbar .tb-live { flex: 1; min-width: 0; justify-content: center; font-size: 11.5px; }
  .topbar .tb-live b { white-space: nowrap; }
  .topbar .tb-btn:nth-of-type(n+3) { display: none; }
  .cta-fixed {
    top: auto; bottom: 14px; left: 12px; right: 12px;
    height: 50px; padding: 0 18px; font-size: 14.5px; justify-content: center;
  }
  .float-btn { display: none; }
  .stage__by { bottom: 74px; font-size: 9px; }
  .info-panel {
    left: 12px; right: 12px; transform: none; width: auto;
    bottom: 74px; max-height: 58svh; overflow-y: auto; padding: 15px 16px;
  }
  .info-panel.open { animation: ipInM 0.4s var(--ease) both; }
  @keyframes ipInM { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .info-panel__grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .kv b { font-size: 12.5px; }
  .kv span { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 460px) {
  .tab span { font-size: 8.5px; letter-spacing: 0.05em; }
  .side__head { padding: 14px 16px 10px; }
  .side__body { padding: 11px; }
  .info-panel__grid { grid-template-columns: 1fr 1fr; }
}