/* ============================================================
   MON FEU DE CAMP NUMÉRIQUE — CHROME PUBLIC V80.2
   Rail d'icônes à gauche + barre du haut + contenu + panneau
   Gardien à droite + barre du bas. Reproduit les maquettes.
   Réutilise admin-v802.css pour les cards/boutons/pills.
   ============================================================ */

:root {
  --pub-rail-w: 96px;
  --pub-night-0: #060c18;
  --pub-night-1: #0a1322;
  --pub-night-2: #0e1a2e;
}

/* Cache l'ancienne topbar/bottom-nav d'origine si présentes (on a notre chrome) */
.pub-body .topbar { display: none !important; }

/* body.pub-body (spécificité 0,1,1) + !important : bat les anciennes règles
   body.page-dashboard/page-moments/... { fond ivoire } de style.css & premium-ia.css */
html { background: #0a1322; }
body.pub-body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background:
    radial-gradient(1100px 600px at 12% -5%, rgba(61,169,252,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(123,104,238,0.07), transparent 55%),
    var(--pub-night-1) !important;
  color: var(--ink, #e9eff8) !important;
  min-height: 100vh;
}

/* ============================================================
   SHELL
============================================================ */
.pub-shell { display: grid; grid-template-columns: var(--pub-rail-w) 1fr; min-height: 100vh; }

/* ============================================================
   RAIL GAUCHE
============================================================ */
.pub-rail {
  background: linear-gradient(180deg, var(--pub-night-2) 0%, var(--pub-night-0) 100%);
  border-right: 1px solid rgba(61,169,252,0.12);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  gap: 4px;
}
.pub-rail::-webkit-scrollbar { width: 0; }

.pub-rail-brand {
  width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; margin-bottom: 12px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 38%, rgba(61,169,252,0.28), rgba(6,12,24,0.6));
  box-shadow: 0 0 20px rgba(61,169,252,0.35), inset 0 0 0 1px rgba(61,169,252,0.3);
}
.pub-rail-brand video, .pub-rail-brand img { width: 100%; height: 100%; object-fit: cover; }
.pub-rail-brand video { mix-blend-mode: screen; }

.pub-rail-nav { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: stretch; flex: 1; }
.pub-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px; border-radius: 12px;
  color: var(--ink-soft, #aebbd0); text-decoration: none;
  font-size: 9.5px; font-weight: 500; text-align: center; line-height: 1.1;
  transition: background .15s, color .15s;
}
.pub-rail-item svg { width: 21px; height: 21px; }
.pub-rail-item span { display: block; max-width: 86px; line-height: 1.08; white-space: normal; word-break: break-word; }
.pub-rail-item:hover { background: rgba(61,169,252,0.08); color: #fff; }
.pub-rail-item.is-active {
  background: linear-gradient(180deg, rgba(61,169,252,0.22), rgba(61,169,252,0.05));
  color: var(--cyan, #3DA9FC);
  box-shadow: inset 0 0 18px rgba(61,169,252,0.10);
}
.pub-rail-item.is-active svg { filter: drop-shadow(0 0 6px rgba(61,169,252,0.5)); }

.pub-rail-foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(61,169,252,0.12); }
.pub-rail-weather { font-size: 11px; color: var(--ink-soft, #aebbd0); text-align: center; }
.pub-rail-weather b { display: block; font-size: 15px; color: #fff; }
.pub-rail-gardien { width: 44px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 10px var(--gardien-halo, rgba(61,169,252,0.4))); }

/* ============================================================
   MAIN (colonne droite)
============================================================ */
.pub-main { min-width: 0; display: flex; flex-direction: column; }

/* Barre du haut : nav horizontale + recherche + actions + profil */
.pub-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(61,169,252,0.10);
  background: rgba(8,16,30,0.6);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.pub-topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pub-topnav a {
  padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft, #aebbd0); text-decoration: none;
}
.pub-topnav a:hover { background: rgba(61,169,252,0.08); color: #fff; }
.pub-topnav a.is-active { background: rgba(61,169,252,0.14); color: var(--cyan, #3DA9FC); }

.pub-search {
  flex: 1; max-width: 460px; min-width: 120px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 11px;
  background: rgba(6,12,24,0.5); border: 1px solid rgba(61,169,252,0.18);
}
.pub-search svg { color: var(--ink-dim, #74849e); flex-shrink: 0; }
.pub-search input { flex: 1; border: 0; background: none; outline: none; color: var(--ink, #e9eff8); font: inherit; font-size: 13.5px; }
.pub-search input::placeholder { color: var(--ink-dim, #74849e); }

.pub-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pub-icon-btn {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(61,169,252,0.15);
  color: var(--ink-soft, #aebbd0); position: relative; text-decoration: none;
}
.pub-icon-btn:hover { border-color: var(--cyan, #3DA9FC); color: var(--cyan, #3DA9FC); background: rgba(61,169,252,0.1); }
.pub-icon-btn .dot {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--cyan, #3DA9FC); color: #04101f; border-radius: 100px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--pub-night-0);
}
.pub-phare {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  background: rgba(61,169,252,0.1); border: 1px solid rgba(61,169,252,0.3); color: var(--cyan, #3DA9FC);
}
.pub-phare.is-phare-on { background: linear-gradient(135deg, var(--cyan, #3DA9FC), var(--cyan-deep, #1B6FB8)); color: #fff; box-shadow: 0 0 18px rgba(61,169,252,0.4); }
.pub-phare:hover { filter: brightness(1.08); }

.pub-profile { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 5px 8px; border-radius: 11px; }
.pub-profile:hover { background: rgba(255,255,255,0.04); }
.pub-profile .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan-deep,#1B6FB8), var(--cyan,#3DA9FC)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.pub-profile .nm { font-size: 13px; font-weight: 600; color: var(--ink, #e9eff8); }
.pub-profile .nm small { display: block; font-size: 11px; color: var(--ink-dim, #74849e); font-weight: 400; }

.pub-btn-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 11px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  background: linear-gradient(135deg, var(--cyan,#3DA9FC), var(--cyan-deep,#1B6FB8)); color: #fff;
  box-shadow: 0 4px 16px rgba(27,111,184,0.4);
}
.pub-btn-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pub-btn-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  background: rgba(61,169,252,0.06); border: 1px solid rgba(61,169,252,0.3); color: var(--cyan,#3DA9FC);
}
.pub-btn-outline:hover { background: rgba(61,169,252,0.14); }

/* Contenu */
.pub-content { padding: 22px; max-width: 1500px; width: 100%; margin: 0 auto; }
.pub-content > .container { max-width: none; padding: 0; margin: 0; background: none; }

/* En-tête de page public (titre + sous-titre) */
.pub-pagehead { margin-bottom: 20px; }
.pub-pagetitle { font-size: 30px; font-weight: 800; color: var(--ink, #e9eff8); letter-spacing: .3px; }
.pub-pagesub { color: var(--ink-soft, #aebbd0); font-size: 14.5px; margin-top: 6px; max-width: 700px; }

/* Panneau Gardien à droite (réutilisable) */
.pub-gardien-panel {
  background: linear-gradient(160deg, rgba(61,169,252,0.10), rgba(12,22,40,0.7));
  border: 1px solid rgba(61,169,252,0.22); border-radius: 18px; padding: 18px; text-align: center;
}
.pub-gardien-panel .orb { width: 120px; height: 138px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 0 22px var(--gardien-halo, rgba(61,169,252,0.45))); }
.pub-gardien-panel .nm { font-size: 12px; font-weight: 700; color: var(--cyan,#3DA9FC); text-transform: uppercase; letter-spacing: .08em; }
.pub-gardien-panel .msg { font-size: 13px; color: var(--ink-soft,#aebbd0); margin-top: 8px; line-height: 1.55; }

/* ============================================================
   RESPONSIVE — rail → bottom nav sur mobile
============================================================ */
@media (max-width: 900px) {
  .pub-shell { grid-template-columns: 1fr; }
  .pub-rail { display: none; }
  .pub-topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .pub-topnav { display: none; }
  .pub-content { padding: 14px; padding-bottom: 90px; }
}

/* Garde la bottom-nav mobile existante visible sur petit écran */
@media (min-width: 901px) { .bottom-nav { display: none !important; } }

/* Suivi construction — titre public ROUGE quand terminé (provisoire) */
body.page-done .pub-pagetitle { color:#ff5a5a !important; }
body.page-done .pub-pagetitle::after { content:" ✓ terminé"; font-size:13px; font-weight:700; color:#fff;
  background:#e03b3b; padding:2px 9px; border-radius:999px; margin-left:12px; vertical-align:middle; letter-spacing:.03em; }