/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}

/* ========= PALETTE (NOUVELLE) ========= */
:root{
  /* primaires (bleu → cyan) */
  --primary-50:#eef8ff;
  --primary-100:#d9efff;
  --primary-200:#b7e1ff;
  --primary-300:#8fd0ff;
  --primary-400:#64bfff;
  --primary-500:#38aaff;
  --primary-600:#1f95f0;
  --primary-700:#1479c7;
  --primary-800:#0f5e9a;
  --primary-900:#0c4471;
  --primary-rgb:56,170,255; /* pour les glows */

  /* surfaces (froids / “space”) */
  --bg:#0a1423;
  --surface-0:#091225;
  --surface-1:rgba(12,23,39,.92);
  --surface-2:#0b1b30;
  --surface-3:#0c213a;

  /* bords / lignes */
  --border:#123555;
  --border-strong:#164a73;

  /* texte */
  --text:#e6f2ff;
  --muted:#9ec2e6;

  /* accents HUD */
  --hud-1:#0b3860;
  --hud-2:#0d2a4d;

  /* danger on garde rouge */
  --danger-500:#dc2626;
  --danger-600:#b91c1c;

  /* effets */
  --glow-outer: 0 10px 24px rgba(var(--primary-rgb),.28);
  --glow-press: 0 8px 20px rgba(var(--primary-rgb),.4);
}

/* Fond day/night via pseudo (sous le contenu) */
body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--text)}
body.theme-day::before, body.theme-night::before{
  content:"";position:fixed;inset:0;z-index:-1;background:center/cover no-repeat fixed;opacity:.36
}
body.theme-day::before{ background-image:url('/assets/bg-day.jpg') }
body.theme-night::before{ background-image:url('/assets/bg-night.jpg') }

/* Layout */
.app{max-width:1300px;margin:24px auto;padding:0 16px}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:14px;margin:12px 0}
.small{font-size:12px}.dim{opacity:.75}

/* Boutons (bleu) */
.btn{cursor:pointer;font-weight:700;letter-spacing:.2px;transition:transform .08s, box-shadow .2s}
.btn-violet{
  /* devient la primaire bleue */
  background:linear-gradient(180deg,var(--primary-500),var(--primary-700));
  border:1px solid var(--primary-600);color:#fff;border-radius:10px;padding:0 12px;
  box-shadow:var(--glow-outer), inset 0 1px 0 rgba(255,255,255,.06)
}
.btn-violet:hover{transform:translateY(-1px);box-shadow:var(--glow-press)}

.btn-danger{
  background:linear-gradient(180deg,var(--danger-500),var(--danger-600));
  border:1px solid var(--danger-600);color:#fff;border-radius:10px;padding:0 12px;
  box-shadow:0 10px 20px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.06)
}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(220,38,38,.5)}

.btn-ghost{
  background:rgba(12,22,36,.7);color:#fff;border:1px solid var(--border);border-radius:10px;padding:0 12px
}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(18,53,85,.35)}

/* Inputs */
:root{ --ctl-h: 38px; }
input{
  height:var(--ctl-h);line-height:var(--ctl-h);
  padding:0 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text)
}

/* Barre d’accueil (UNE ligne, alignée) */
.home-bar{
  display:flex !important; align-items:center !important; gap:10px;
  flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; min-height:var(--ctl-h);
}
.home-bar>*{ flex:0 0 auto !important; }
.home-bar input,.home-bar button{ height:var(--ctl-h); line-height:var(--ctl-h); display:inline-flex; align-items:center; justify-content:center }
#name{ width:220px; min-width:220px }
#code{ width:140px; min-width:140px }
.logo{
  height:var(--ctl-h); display:block; object-fit:contain;
  border-radius:8px;border:1px solid var(--border);padding:4px;background:var(--surface-0)
}

/* Liste publiques */
.inner{margin-top:10px}
.public-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-0);margin-top:8px
}
.public-item .small{opacity:.75}
.public-item button{
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:rgba(12,22,36,.85);color:var(--text);cursor:pointer
}

/* Outils flottants */
.floating-tools{position:fixed;top:10px;right:10px;display:flex;gap:8px;z-index:1000}
.fab{
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:rgba(12,22,36,.9);color:#fff;cursor:pointer;backdrop-filter:blur(8px)
}
.vol-wrap{position:relative}
.vol-popover{
  position:absolute;top:42px;right:0;background:var(--surface-1);border:1px solid var(--border);
  padding:8px;border-radius:10px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1100
}
.vol-popover.show{display:block}
.vol-popover input[type="range"]{width:160px}

/* Modals (Avatar / Cartes) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1050}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6)}
.modal-card{
  position:relative;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;min-width:320px;max-width:90vw;padding:10px;z-index:1
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-body{max-height:70vh;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;margin-top:8px}

/* Carrousel compact */
.picker{display:flex;align-items:center;gap:8px;justify-content:center}
.picker button{
  width:28px;height:28px;padding:0;border-radius:8px;border:1px solid var(--border);
  background:rgba(12,22,36,.9);color:var(--text);cursor:pointer;line-height:1;font-size:16px
}
#avatarCurrent,#backCurrent{
  width:72px;height:72px;border-radius:10px;border:1px solid var(--border);object-fit:cover;display:block
}