/* ============================================================
   UJENAMI — BASE.CSS
   Reset, variables CSS, fond eau, mini radio, chrome global
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --black:#0a0a0a;
  --white:#f5f5f0;
  --gray-mid:#999990;
  --gray-dark:#333330;
  --gray-light:#e8e8e3;
  --bar-h:72px;
  --mini-h:56px;
}

html,body{
  width:100%;height:100%;min-height:100dvh;
  background:var(--white);
  font-family:'Georgia',serif;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ── WATER CANVAS ── */
#waterCanvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.045;
}

/* ── FREQ BAR ── */
#freqBar{
  position:fixed;
  top:var(--mini-h);            /* juste sous la mini barre radio en haut */
  left:0;right:0;
  height:88px;
  pointer-events:none;
  z-index:55;
  opacity:0;
  transition:opacity 0.6s ease, height 0.3s ease;
}
#freqBar.show{opacity:1;}
#freqCanvas{width:100%;height:100%;display:block;}

/* ── WAVE OVERLAY — canvas géré dynamiquement par nav.js ── */
#waveOv{
  position:fixed;inset:0;z-index:800;
  pointer-events:none;
  display:none;
}

/* ── BARRE DE NAVIGATION ── */
#navBar{
  position:fixed;
  bottom:20px;
  left:20px;
  width:auto;
  height:auto;
  background:rgba(250,250,248,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(10,10,10,0.12);
  border-radius:24px;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:0;
  z-index:200;
  padding:4px 0;
  box-shadow:0 6px 28px rgba(0,0,0,0.18);
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:box-shadow 0.2s;
}
#navBar:active{ cursor:grabbing; box-shadow:0 10px 36px rgba(0,0,0,0.25); }
#navBar.collapsed{ padding:6px; border-radius:50%; }

/* Collapse button — avatar circle at top */
.nav-collapse-btn{
  width:38px;height:38px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:2px;flex-shrink:0;
  transition:transform 0.2s;
}
.nav-collapse-btn:hover{ transform:scale(1.1); }
#navAvatarMini{ width:34px;height:34px;display:flex;align-items:center;justify-content:center; }

/* Expanded section */
.nav-expanded{
  display:flex;flex-direction:column;align-items:center;gap:0;
  overflow:hidden;
  transition:max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  max-height:300px;opacity:1;
}
#navBar.collapsed .nav-expanded{ max-height:0;opacity:0;pointer-events:none; }
#navBar.collapsed .nav-collapse-btn{ margin:0; }

/* Séparateur vertical entre les deux boutons */
.nav-divider{
  width:60%;height:1px;
  background:rgba(10,10,10,0.1);
  flex-shrink:0;
  margin:1px auto;
}

/* Bouton générique */
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  padding:10px 22px;
  transition:opacity 0.2s, background 0.15s;
  -webkit-tap-highlight-color:transparent;
  font-family:'Georgia',serif;
  border-radius:18px;
  width:100%;
}
.nav-btn:hover{ background:rgba(0,0,0,0.04); }
.nav-btn:active .nav-btn-inner{ transform:scale(0.85); }
.nav-btn:active{ background:rgba(0,0,0,0.04); }

.nav-btn-inner{
  width:46px;height:36px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-home-inner{
  background:rgba(41,182,246,0.18);
  border-radius:10px;
}
.nav-home svg{ stroke:#0288D1; }
.nav-profile-inner{
  background:rgba(38,166,154,0.18);
  border-radius:10px;
}
.nav-profile svg{ stroke:#26A69A; }
.nav-profile span{ color:#26A69A; }

.nav-btn span{
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gray-dark);
  font-weight:300;
}
.nav-home span{ color:#0288D1; }

.nav-btn[data-disabled="true"]{
  opacity:0.28;
  pointer-events:none;
}

/* ── MINI RADIO BAR ── */
#miniRadio{
  position:fixed;top:0;left:0;right:0;
  min-height:var(--mini-h);
  background:linear-gradient(90deg,#0a2a3a,#0d3d52);
  color:var(--white);
  display:none;align-items:center;
  justify-content:space-between;
  padding:0 14px;z-index:300;
  transition:background 0.6s ease, border-bottom 0.3s;
  overflow:hidden;
}
#miniRadio.show{display:flex;}
.mini-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.mini-flag{font-size:clamp(18px,3vw,26px);flex-shrink:0;}
.mini-name{
  font-size:clamp(9px,1.4vw,13px);
  letter-spacing:0.12em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini-freq{
  font-size:clamp(9px,1.3vw,12px);
  opacity:0.65;margin:0 10px;flex-shrink:0;
  font-family:monospace;
}
.mini-ctrls{display:flex;gap:6px;flex-shrink:0;}
.mcb{
  width:40px;height:40px;
  border:1.5px solid rgba(255,255,255,0.45);
  background:none;color:white;border-radius:50%;
  cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;flex-shrink:0;
}
.mcb:active{background:rgba(255,255,255,0.3);}
#mcStop{
  border-color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.08);
}
#mcCompact{
  font-size:11px;letter-spacing:0.1em;
  width:36px;opacity:0.7;
}

/* ── BREADCRUMB ── */
#breadcrumbBar{
  position:fixed;top:0;left:0;right:0;height:26px;
  background:rgba(10,10,10,0.055);
  display:flex;align-items:center;
  padding:0 14px;gap:10px;z-index:39;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gray-mid);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── REC INDICATOR ── */
#recIndicator{
  position:fixed;
  top:calc(var(--mini-h) + 10px);
  left:50%;transform:translateX(-50%);
  background:var(--black);color:var(--white);
  padding:7px 18px;border-radius:20px;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  z-index:400;display:none;align-items:center;gap:8px;
}
#recIndicator.show{display:flex;}
.rec-dot{
  width:7px;height:7px;background:white;
  border-radius:50%;animation:blink 0.9s ease infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* ── PAGE TITLE ── */
#pageTitle{
  position:fixed;
  top:calc(var(--mini-h) + 4px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(9px,1.4vw,11px);
  letter-spacing:0.4em;text-transform:uppercase;
  color:var(--gray-mid);font-weight:300;
  z-index:54;pointer-events:none;white-space:nowrap;
}

/* ── TOAST NOTIFICATION ── */
#gNotif{
  position:fixed;
  bottom:calc(var(--bar-h) + 16px);
  left:50%;transform:translateX(-50%);
  background:var(--black);color:var(--white);
  padding:10px 24px;border-radius:24px;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  z-index:700;transition:opacity 0.5s;
  pointer-events:none;white-space:nowrap;
  max-width:90vw;text-align:center;opacity:0;
}

/* ── APP WRAPPER ── */
#app{
  position:fixed;top:0;left:0;
  width:100%;height:100%;height:100dvh;z-index:1;
}

/* ── SPLASH / LOGIN ── */
/* ── SPLASH — ONDES EAU ── */
#splash{
  position:absolute;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 30% 60%, #0D1B4B 0%, #060D2E 60%, #020818 100%);
  z-index:100;
  transition:opacity 0.8s;
  overflow:hidden;
}
/* splashWaterCanvas subtle overlay */
#splashWaterCanvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;opacity:0.12;mix-blend-mode:screen;
}
@keyframes tapPulse{
  0%,100%{ opacity:0.35; transform:scale(1); }
  50%{ opacity:0.75; transform:scale(1.03); }
}
#splash.hidden{opacity:0;pointer-events:none;}

/* Canvas eau en fond du splash */
#splashWaterCanvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}

/* Conteneur des ondes */
.splash-waves{
  position:relative;
  width:clamp(140px,38vw,220px);height:clamp(140px,38vw,220px);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Chaque onde = cercle bleu transparent qui s'agrandit */
.wave-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(100,180,230,0.6);
  background:radial-gradient(circle, rgba(100,200,240,0.12) 0%, rgba(100,180,230,0.04) 60%, transparent 100%);
  animation:waterWave 3s ease-out infinite;
}
.wave-ring:nth-child(1){ width:20px;height:20px; animation-delay:0s; }
.wave-ring:nth-child(2){ width:20px;height:20px; animation-delay:0.8s; }
.wave-ring:nth-child(3){ width:20px;height:20px; animation-delay:1.6s; }
.wave-ring:nth-child(4){ width:20px;height:20px; animation-delay:2.4s; }

@keyframes waterWave{
  0%  { transform:scale(1);   opacity:0.8; border-color:rgba(100,180,230,0.7); }
  40% { opacity:0.5;           border-color:rgba(80,160,220,0.4); }
  100%{ transform:scale(9);   opacity:0;   border-color:rgba(100,180,230,0); }
}

/* Goutte centrale — petit cercle eau */
.splash-drop{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(160,220,255,0.9), rgba(80,170,230,0.8));
  box-shadow: 0 0 14px rgba(100,180,230,0.5), inset 0 1px 3px rgba(255,255,255,0.6);
  position:absolute;
  transition:transform 0.3s;
}
.splash-waves:active .splash-drop{ transform:scale(1.4); }

.splash-title{
  position:absolute;
  top:calc(50% + 108px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(13px,2.5vw,20px);
  letter-spacing:0.6em;color:rgba(80,150,200,0.7);
  font-weight:300;text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
}

/* Ancien .dot-origin — garde compatibilité mais invisible */
.dot-origin{ display:none; }

#splash .tao-input{
  font-size:15px;width:100%;max-width:290px;
  text-align:left;padding:10px 14px;
}
#splash .tao-btn{width:100%;max-width:290px;text-align:center;}

/* ── HOME SCREEN ── */
#homeScreen{
  position:absolute;width:100%;height:100%;
  opacity:0;pointer-events:none;transition:opacity 0.6s;
}
#homeScreen.active{opacity:1;pointer-events:all;}
#radialLayer{
  position:absolute;top:0;left:0;
  width:100%;height:calc(100% - var(--bar-h));
  pointer-events:none;z-index:20;
}
#contentLayer{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:10;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--mini-h) + clamp(60px,10vh,100px) + clamp(50px,7vh,80px) + 12px) var(--side-pad) clamp(100px,15vh,140px) var(--side-pad);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  transform-origin:center center;
  will-change:transform,opacity;
  box-sizing:border-box;
}
.center-dot{display:none !important;}
.center-label{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,calc(-50% + 26px));
  font-size:clamp(9px,1.5vw,13px);
  letter-spacing:0.4em;color:var(--gray-dark);
  text-transform:uppercase;font-weight:300;
  opacity:0;animation:fadeL 1s 0.5s forwards;
  pointer-events:none;white-space:nowrap;z-index:22;
}
@keyframes fadeL{to{opacity:0.4;}}

/* ── MINI RADIO FLOTTANTE ── */
#miniRadio.bar-floating{
  /* Position et taille gérées par JS */
  border-radius:28px !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  right:auto !important;
  transition:box-shadow 0.2s;
  cursor:grab;
  padding:0 12px;
}
#miniRadio.bar-floating:active{ cursor:grabbing; }
#miniRadio.bar-floating .mini-freq{ display:none; }
#miniRadio.bar-floating #mcVolD,
#miniRadio.bar-floating #mcVolU{ display:none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — adapts to any screen
   Phone (320-480px) / Tablet (481-1024px) / Desktop / Car screen (1024px+)
   ════════════════════════════════════════════════════════════ */

/* ── CSS variables that scale with screen ── */
:root {
  --content-max: 560px;
  --side-pad: clamp(14px, 4vw, 48px);
  --font-base: clamp(13px, 1.6vw, 16px);
  --font-lg: clamp(18px, 2.8vw, 32px);
  --tile-min: clamp(130px, 28vw, 240px);
  --card-radius: clamp(12px, 2vw, 20px);
  --nav-scale: 1;
}

/* ── TABLET — side-by-side layout ── */
@media (min-width: 600px) {
  :root {
    --content-max: 720px;
    --font-base: clamp(14px, 1.4vw, 17px);
    --font-lg: clamp(22px, 3vw, 36px);
  }
  #contentLayer {
    align-items: flex-start;
    padding-left: clamp(32px, 6vw, 80px);
    padding-right: clamp(32px, 6vw, 80px);
  }
  .scroll-wrapper {
    max-width: var(--content-max);
  }
  .home-tiles {
    gap: 16px;
  }
  .home-tile {
    min-height: 160px;
    padding: 24px 16px 18px;
  }
}

/* ── DESKTOP / LARGE TABLET (1024px+) ── */
@media (min-width: 1024px) {
  :root {
    --content-max: 860px;
    --font-base: 16px;
    --font-lg: 38px;
    --tile-min: 200px;
  }
  #app {
    display: flex;
    align-items: stretch;
  }
  /* Left sidebar for nav on large screens */
  #navBar {
    position: fixed;
    left: 24px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 0;
    border-radius: 28px;
    padding: 6px 0;
  }
  .nav-divider {
    width: 60%;
    height: 1px;
    margin: 2px auto;
  }
  .nav-btn {
    padding: 14px 22px;
    width: 100%;
  }
  #contentLayer {
    padding-left: clamp(80px, 10vw, 140px);
    padding-right: clamp(32px, 5vw, 64px);
  }
  /* Home grid: 2x2 stays but bigger */
  .home-tiles {
    max-width: 680px;
    gap: 20px;
  }
  .home-tile {
    min-height: 200px;
    padding: 28px 20px 22px;
  }
  .ht-icon { width: 100px; height: 90px; }
  .ht-label { font-size: 14px; }
  /* Cards bigger */
  .radio-card {
    width: clamp(180px, 20vw, 260px) !important;
    height: clamp(180px, 20vw, 255px) !important;
  }
  .room-card {
    width: clamp(200px, 22vw, 280px) !important;
    height: clamp(190px, 20vw, 260px) !important;
  }
  /* Mini radio bar bigger */
  #miniRadio { min-height: 64px; }
  .mini-name { font-size: 14px; }
}

/* ── CAR SCREEN / LANDSCAPE TABLET (wider than tall) ── */
@media (min-width: 700px) and (orientation: landscape) {
  :root { --content-max: 900px; }
  #navBar {
    position: fixed;
    left: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    border-radius: 28px;
    padding: 6px 0;
  }
  .nav-divider { width: 60%; height: 1px; margin: 2px auto; }
  .nav-btn { padding: 16px 22px; }
  /* Landscape: home grid becomes 4 in a row */
  .home-tiles {
    grid-template-columns: repeat(4, 1fr);
    max-width: 860px;
    gap: 14px;
  }
  .home-tile { min-height: 140px; }
  #contentLayer {
    padding-left: clamp(80px, 9vw, 120px);
    padding-right: clamp(24px, 4vw, 48px);
    padding-top: calc(var(--mini-h) + 16px) !important;
  }
  /* Horizontal scroll cards bigger in landscape */
  .h-scroll { gap: 12px; }
}

/* ── SMALL PHONE (< 360px) — Samsung Galaxy A series etc ── */
@media (max-width: 359px) {
  :root { --font-base: 12px; }
  .home-tile { min-height: 110px; padding: 14px 8px 10px; }
  .ht-icon { width: 60px; height: 56px; }
  .ht-label { font-size: 9px; letter-spacing: 0.12em; }
  .nav-btn { padding: 10px 16px; }
  #miniRadio .mini-name { font-size: 11px; }
  .radio-card { min-width: 130px !important; }
}

/* ── TOUCH SCREEN SPECIFIC (phones & tablets & car) ── */
@media (pointer: coarse) {
  /* Bigger tap targets */
  .tao-btn { min-height: 48px; }
  .ra-btn { min-height: 48px; padding: 12px 20px; }
  input, select { font-size: 16px !important; } /* prevents zoom on iOS */
  /* Scrollbars hidden on touch */
  .h-scroll::-webkit-scrollbar { display: none; }
  .h-scroll { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ── MOUSE/DESKTOP — show scrollbars, hover effects ── */
@media (pointer: fine) {
  .home-tile:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
  .radio-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  .room-card:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  .nav-btn:hover .nav-btn-inner { background: rgba(0,0,0,0.06); }
  .h-scroll::-webkit-scrollbar { height: 4px; }
  .h-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
}

/* ── HIGH DPR SCREENS (Retina, 4K car displays) ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Already handled by canvas DPR scaling in JS */
  .relax-img { image-rendering: -webkit-optimize-contrast; }
}

/* ── DARK MODE ── */
@media (prefers-color-scheme: dark) {
  :root {
    --black: #f0f0eb;
    --white: #111110;
    --gray-mid: #777770;
    --gray-dark: #ccccC8;
    --gray-light: #2a2a28;
  }
  #miniRadio { background: linear-gradient(90deg, #060f14, #091e28); }
  .qr-panel  { background: #1a1a18; }
}