html,body{margin:0;height:100%;overflow:hidden;background:#02070a;font-family:Consolas,"Courier New",monospace;-webkit-text-size-adjust:none}
body{display:flex;justify-content:center;align-items:center}
.legacy-shell{width:min(95vw,900px);aspect-ratio:4/3;background:#07131a;border:18px solid #c8c0a0;box-shadow:inset 0 0 100px #000,0 0 60px #000;padding:20px;box-sizing:border-box;position:relative;overflow:hidden}
.legacy-shell:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(180,220,255,.04),rgba(180,220,255,.04) 1px,transparent 1px,transparent 4px);pointer-events:none}
.screen{position:relative;z-index:2;color:#d8f4ff;text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;font-size:17px;letter-spacing:1px;line-height:1.12;height:100%;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;font-weight:700}
.topbar{display:flex;justify-content:space-between;font-size:15px;margin-bottom:4px;font-weight:700}
.title{text-align:center;font-size:26px;margin-bottom:4px;font-weight:700}
.banner{border:1px solid #d8f4ff;padding:2px;margin-bottom:4px;text-align:center}
.line{margin:1px 0}
#content{flex:1;overflow:hidden;min-height:0}
.menu{display:grid;grid-template-columns:60px 1fr;gap:10px;margin:1px 0}
.num{border:1px solid #d8f4ff;text-align:center;padding:3px}
.label{padding:3px}
.input-zone{margin-top:2px;font-size:19px;font-weight:700}
input{background:transparent;border:none;color:#d8f4ff;font-family:inherit;font-size:21px;width:80px;outline:none;text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;caret-color:#d8f4ff;font-weight:700}
.message{margin-top:2px;min-height:12px}
.help{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:3;
  margin-top:8px;
  border-top:1px dashed #d8f4ff;
  padding-top:6px;
  font-size:14px;
  color:#d8f4ff;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  text-align:center;
}

@media(max-width:768px){
body{align-items:flex-start}
.legacy-shell{width:100vw;height:100vh;aspect-ratio:auto;border:none;padding:12px;border-radius:0}
.title{font-size:24px;margin-bottom:6px;font-weight:700}
.banner{font-size:14px;padding:4px}
.screen{font-size:15px;line-height:1.15;font-weight:700}
.menu{grid-template-columns:40px 1fr;gap:8px;margin:4px 0}
.num{padding:2px}
.input-zone{font-size:18px;background:#07131a;padding-top:8px}
input{font-size:18px;width:60px}
.help{
    font-size:11px;
    text-align:center;
    color:#d8f4ff;
    text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
    border-top:1px solid #d8f4ff;
    padding-top:4px;
}
.topbar{font-size:11px}
.keypad{left:10px;right:10px;bottom:42px;gap:8px}
.keypad button{height:64px;font-size:24px}
}

.help,
.help *{
  color:#d8f4ff !important;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
}

.keypad{
  display:block;
  margin-top:12px;
  width:100%;
}

.keypad-numbers{
  display:flex;
  justify-content:center;
  gap:6px;
  width:100%;
}

.keypad-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
}

.keypad button{
  background:#07131a;
  color:#d8f4ff;
  border:2px solid #d8f4ff;
  font-family:Consolas,"Courier New",monospace;
  font-weight:bold;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  cursor:pointer;
}

.keypad button:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}



.keypad-numbers button{
  flex:1;
  max-width:70px;
  min-width:0;
  height:38px;
  font-size:18px;
  padding:0;
}

.keypad-actions button{
  min-width:110px;
  height:36px;
  font-size:16px;
}

@media(max-width:1024px){
  .keypad-numbers button{
    max-width:none;
    height:42px;
    font-size:19px;
  }

  .keypad-actions button{
    height:40px;
    font-size:17px;
  }
}

@media(max-width:768px){
  .keypad{
    margin-top:10px;
  }

  .keypad-numbers{
    gap:4px;
  }

  .keypad-numbers button{
    height:42px;
    font-size:18px;
  }

  .keypad-actions button{
    min-width:105px;
    height:38px;
    font-size:16px;
  }
}


/* Clavier horizontal propre, sans chevauchement */
.keypad{
  display:block;
  margin-top:8px;
  width:100%;
  flex-shrink:0;
}

.keypad-numbers{
  display:flex;
  justify-content:center;
  gap:5px;
  width:100%;
}

.keypad-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:6px;
}

.keypad button{
  background:#07131a;
  color:#d8f4ff;
  border:1px solid #d8f4ff;
  font-family:Consolas,"Courier New",monospace;
  font-weight:bold;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  cursor:pointer;
}

.keypad button:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.keypad-numbers button{
  flex:1;
  max-width:58px;
  min-width:0;
  height:32px;
  font-size:16px;
  padding:0;
}

.keypad-actions button{
  min-width:92px;
  height:30px;
  font-size:14px;
}

@media(max-width:1024px){
  .keypad-numbers button{
    max-width:none;
    height:36px;
    font-size:17px;
  }

  .keypad-actions button{
    height:34px;
    font-size:15px;
  }
}

@media(max-width:768px){
  .keypad{
    margin-top:8px;
  }

  .keypad-numbers{
    gap:4px;
  }

  .keypad-numbers button{
    height:38px;
    font-size:17px;
  }

  .keypad-actions button{
    min-width:96px;
    height:36px;
    font-size:15px;
  }

  .help{
    margin-top:6px;
    font-size:10px;
  }
}


@media(min-width:769px) and (max-width:1366px){
  .legacy-shell{
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    border:none;
    padding:10px;
  }

  .screen{
    font-size:16px;
    line-height:1.08;
    font-weight:700;
  }

  .title{
    font-size:24px;
    margin-bottom:2px;
    font-weight:700;
  }

  .banner{
    margin-bottom:2px;
  }

  .input-zone{
    margin-top:0;
    font-size:18px;
    font-weight:700;
  }

  .keypad{
    margin-top:10px;
  }

  .keypad-numbers{
    gap:7px;
  }

  .keypad-numbers button{
    height:42px;
    font-size:20px;
    font-weight:700;
  }

  .keypad-actions{
    gap:14px;
    margin-top:8px;
  }

  .keypad-actions button{
    min-width:130px;
    height:38px;
    font-size:18px;
    font-weight:700;
  }

  .help{
    margin-top:3px;
    font-size:11px;
    font-weight:700;
  }
}


.cursor{
  display:inline-block;
  margin-left:2px;
  animation:blinkCursor 1s steps(1) infinite;
  color:#d8f4ff;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
}

@keyframes blinkCursor{
  50%{opacity:0;}
}


/* Mode listes longues : scroll interne dans l'écran */
#content{
  flex:1;
  overflow-y:auto !important;
  overflow-x:hidden;
  min-height:0;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#d8f4ff #07131a;
}

#content::-webkit-scrollbar{
  width:8px;
}

#content::-webkit-scrollbar-track{
  background:#07131a;
}

#content::-webkit-scrollbar-thumb{
  background:#d8f4ff;
  box-shadow:0 0 6px #9fe7ff;
}


/* Clavier alphanumérique : lettres à gauche, chiffres à droite */
.keypad{
  display:grid !important;
  grid-template-columns:1fr 210px;
  gap:10px;
  margin-top:8px;
  width:100%;
  flex-shrink:0;
}

.alpha-keys{
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:5px;
}

.num-keys{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.alpha-keys button,
.num-keys button{
  background:#07131a;
  color:#d8f4ff;
  border:1px solid #d8f4ff;
  font-family:Consolas,"Courier New",monospace;
  font-weight:700;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  cursor:pointer;
  min-height:34px;
  font-size:15px;
  padding:0;
}

.alpha-keys button:active,
.num-keys button:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.alpha-keys .wide{
  grid-column:span 6;
}

@media(min-width:769px) and (max-width:1366px){
  .keypad{
    grid-template-columns:1fr 220px;
    gap:10px;
    margin-top:8px;
  }

  .alpha-keys button,
  .num-keys button{
    min-height:38px;
    font-size:16px;
  }
}

@media(max-width:768px){
  .keypad{
    grid-template-columns:1fr 120px;
    gap:6px;
    margin-top:6px;
  }

  .alpha-keys{
    grid-template-columns:repeat(7,1fr);
    gap:4px;
  }

  .num-keys{
    gap:4px;
  }

  .alpha-keys button,
  .num-keys button{
    min-height:31px;
    font-size:12px;
  }

  .alpha-keys .wide{
    grid-column:span 7;
  }
}


/* Accueil en tuiles tactiles monochromes */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}

.tile{
  border:1px solid #d8f4ff;
  color:#d8f4ff;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  background:rgba(216,244,255,.03);
  min-height:76px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.tile:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.tile .ico{
  font-size:24px;
  line-height:1;
  margin-bottom:6px;
}

.tile .t{
  font-size:19px;
  font-weight:700;
}

.tile .s{
  font-size:12px;
  margin-top:5px;
  opacity:.9;
}

.player-shortcuts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:8px;
}

.player-shortcuts .tile{
  min-height:52px;
  padding:6px;
}

.player-shortcuts .tile .t{
  font-size:15px;
}

@media(min-width:769px){
  .tile-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .tile{
    min-height:94px;
  }

  .tile .ico{
    font-size:28px;
  }

  .tile .t{
    font-size:20px;
  }
}

@media(max-width:768px){
  .tile-grid{
    gap:7px;
  }

  .tile{
    min-height:70px;
    padding:7px;
  }

  .tile .ico{
    font-size:20px;
    margin-bottom:4px;
  }

  .tile .t{
    font-size:15px;
  }

  .tile .s{
    font-size:10px;
  }

  .player-shortcuts{
    gap:6px;
  }

  .player-shortcuts .tile{
    min-height:46px;
  }
}







/* Accueil tableau de bord façon Media Center / ancien terminal moderne */
.home-section-title{
  margin-top:10px;
  margin-bottom:6px;
  border-top:1px dashed currentColor;
  padding-top:6px;
  font-size:14px;
  letter-spacing:1px;
}

.home-live{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  margin-top:10px;
  box-sizing:border-box;
}

.home-live-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.home-live-title{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.home-main-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:8px;
}

.home-main-grid .tile{
  min-height:92px;
}

.home-main-grid .tile .ico{
  font-size:30px;
}

.home-main-grid .tile .t{
  font-size:18px;
}

.home-main-grid .tile .s{
  font-size:11px;
}

@media(max-width:768px){
  .home-main-grid{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }

  .home-main-grid .tile{
    min-height:76px;
    padding:7px;
  }

  .home-main-grid .tile .ico{
    font-size:24px;
  }

  .home-main-grid .tile .t{
    font-size:14px;
  }

  .home-main-grid .tile .s{
    font-size:10px;
  }

  .home-section-title{
    font-size:11px;
    margin-top:7px;
    margin-bottom:4px;
    padding-top:4px;
  }

  .home-live{
    margin-top:7px;
    padding:6px;
    font-size:12px;
  }
}


/* Correction tactile : clavier caché sauf recherche */
.screen .input-zone,
.screen .keypad,
.screen .help{
  display:none !important;
}

body.search-mode .screen .input-zone{
  display:block !important;
}

body.search-mode .screen .help{
  display:block !important;
}

body.search-mode .screen .keypad{
  display:grid !important;
}

body.search-mode input#code{
  width:min(72vw,520px) !important;
  min-width:220px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border, #d8f4ff);
  border-radius:12px;
  padding:6px 10px;
  box-sizing:border-box;
}

.search-live{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  border-radius:14px;
  padding:8px 10px;
  margin:8px 0;
  min-height:22px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.search-live-empty{
  opacity:.65;
}

/* Tuiles menus/appareils cliquables */
.menu{
  border:1px solid #d8f4ff;
  background:rgba(216,244,255,.03);
  min-height:58px;
  padding:8px;
  margin:6px 0;
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:8px;
  align-items:center;
}

.menu:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.menu:active .num,
.menu:active .label{
  color:#07131a;
  text-shadow:none;
  border-color:#07131a;
}

.num{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  line-height:1.05;
}

.label{
  font-size:16px;
  font-weight:700;
}

@media(min-width:769px){
  .menu{
    width:calc(50% - 8px);
    display:inline-grid;
    vertical-align:top;
    margin-right:6px;
    min-height:72px;
  }
}

@media(max-width:768px){
  .menu{
    min-height:58px;
    grid-template-columns:46px 1fr;
    margin:5px 0;
  }

  .label{
    font-size:14px;
  }
}



/* Raccourcis Retour / Sommaire accessibles partout */
#navButtons{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:9999;
  display:flex;
  gap:8px;
}

#backButton,
#homeButton{
  border:1px solid #d8f4ff;
  background:#07131a;
  color:#d8f4ff;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  font-family:Consolas,"Courier New",monospace;
  font-weight:700;
  font-size:13px;
  padding:8px 12px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

#backButton:active,
#homeButton:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

@media(max-width:768px){
  #navButtons{
    right:8px;
    bottom:8px;
    gap:6px;
  }

  #backButton,
  #homeButton{
    font-size:11px;
    padding:7px 9px;
  }
}


/* Lecteur style WMP */
.wmp-player{
  border:1px solid #d8f4ff;
  padding:10px;
  margin-bottom:10px;
}
.wmp-meta{
  margin:4px 0;
}
.wmp-controls{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.wmp-btn{
  border:1px solid #d8f4ff;
  padding:12px 8px;
  text-align:center;
  cursor:pointer;
  background:rgba(216,244,255,.03);
}
.wmp-btn:active{
  background:#d8f4ff;
  color:#07131a;
}


/* Titres de file d'attente cliquables */
.queue-track{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  border:1px solid rgba(216,244,255,.55);
  background:rgba(216,244,255,.03);
  padding:8px;
  margin:5px 0;
}

.queue-track:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}


/* Tuiles informations / météo */
.info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}

.info-tile{
  border:1px solid #d8f4ff;
  background:rgba(216,244,255,.03);
  color:#d8f4ff;
  text-shadow:0 0 4px #d8f4ff,0 0 8px #9fe7ff;
  min-height:88px;
  padding:10px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  align-items:center;
}

.info-tile .ico{
  font-size:30px;
  text-align:center;
  line-height:1;
}

.info-tile .info-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:6px;
}

.info-tile .info-data{
  font-size:15px;
  line-height:1.3;
}

@media(max-width:768px){
  .info-grid{
    grid-template-columns:1fr;
    gap:7px;
  }

  .info-tile{
    min-height:76px;
    grid-template-columns:40px 1fr;
    padding:8px;
  }

  .info-tile .ico{
    font-size:24px;
  }

  .info-tile .info-title{
    font-size:15px;
  }

  .info-tile .info-data{
    font-size:13px;
  }
}

/* Grille deux colonnes pour menus appareils */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}

.menu-grid .menu{
  width:auto !important;
  display:grid !important;
  margin:0 !important;
  min-height:72px;
}

@media(max-width:768px){
  .menu-grid{
    grid-template-columns:1fr;
    gap:7px;
  }
}

/* Lecteur : animation CD esprit ancien terminal */
.player-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.player-disc{
  width:46px;
  height:46px;
  border:2px solid currentColor;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  animation:playerDiscSpin 1.4s steps(8) infinite;
}

.player-disc:before{
  content:"o";
  font-size:20px;
}

@keyframes playerDiscSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.player-queue{
  margin-top:10px;
}

.player-queue-title{
  border-top:1px dashed currentColor;
  padding-top:6px;
  margin-bottom:6px;
}

.player-queue-list{
  max-height:190px;
  overflow-y:auto;
  padding-right:4px;
}

/* Controle volume */
.volume-panel{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  margin-top:8px;
}

.volume-title{
  margin-bottom:6px;
}

.volume-controls{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.volume-btn{
  border:1px solid currentColor;
  padding:10px 6px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.volume-btn:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

/* Lecteur : file d'attente en colonne droite */
.player-layout{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  gap:12px;
  align-items:start;
}

.player-left,
.player-right{
  min-width:0;
}

.player-layout .player-queue{
  margin-top:0;
  height:100%;
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  box-sizing:border-box;
}

.player-layout .player-queue-title{
  border-top:none;
  padding-top:0;
}

.player-layout .player-queue-list{
  max-height:430px;
  overflow-y:auto;
}

@media(max-width:768px){
  .player-layout{
    grid-template-columns:1fr;
  }

  .player-layout .player-queue-list{
    max-height:190px;
  }
}

/* File d'attente : selection et deplacement */
.queue-tools{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:6px 0 8px 0;
}

.queue-tool{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:7px 4px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.queue-tool:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.queue-track.selected{
  outline:2px solid currentColor;
  background:rgba(216,244,255,.16);
}

.queue-track .queue-index{
  display:inline-block;
  min-width:30px;
}

.queue-track .queue-check{
  display:inline-block;
  min-width:22px;
}


/* Pages Maison modernisées en tuiles */
.page-intro{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  margin:8px 0;
  box-sizing:border-box;
}

.page-intro-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:4px;
}

.page-intro-text{
  font-size:13px;
  line-height:1.3;
}

.action-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}

.action-tile{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  min-height:86px;
  padding:10px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.action-tile:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.action-tile .ico{
  font-size:28px;
  text-align:center;
  line-height:1;
}

.action-tile .action-title{
  font-size:17px;
  font-weight:700;
  margin-bottom:5px;
}

.action-tile .action-data{
  font-size:13px;
  line-height:1.3;
}

.status-ok{
  border-style:solid;
}

.status-warn{
  border-style:dashed;
}

@media(max-width:768px){
  .action-grid{
    grid-template-columns:1fr;
    gap:7px;
  }

  .action-tile{
    min-height:72px;
    grid-template-columns:38px 1fr;
    padding:8px;
  }

  .action-tile .ico{
    font-size:23px;
  }

  .action-tile .action-title{
    font-size:15px;
  }

  .action-tile .action-data{
    font-size:12px;
  }

  .page-intro-title{
    font-size:15px;
  }
}


/* Nettoyage interface : topbar/horloge supprimées */
.topbar{display:none !important;}
.title{margin-top:4px;margin-bottom:10px;}
.separator-hidden{display:none !important;}


/* Menus sans chiffres visibles : code conservé en data-code pour le clic */
.menu .num{
  font-size:24px;
  line-height:1;
}

@media(max-width:768px){
  .menu .num{
    font-size:21px;
  }
}


/* Bibliothèque MPD : sélection multiple en tuiles */
.browse-tools{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:8px 0;
}

.browse-tool{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px 4px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.browse-tool:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.browse-item.selected{
  outline:2px solid currentColor;
  background:rgba(216,244,255,.16);
}

.browse-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

@media(max-width:768px){
  .browse-tools{
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }

  .browse-tool{
    padding:8px 4px;
    font-size:12px;
  }
}


/* Correctif Chrome Android / S21 : bas d'écran non rogné */
html,
body{
  min-height:100%;
  min-height:100dvh;
}

body{
  overflow:hidden;
}

.legacy-shell{
  height:100dvh;
  max-height:100dvh;
}

.screen{
  min-height:0;
  padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
}

#content{
  padding-bottom:calc(65px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom:calc(65px + env(safe-area-inset-bottom, 0px));
}

#navButtons{
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

@media(max-width:768px){
  .legacy-shell{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .screen{
    height:100%;
    padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #content{
    padding-bottom:calc(65px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #navButtons{
    left:8px;
    right:8px;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content:flex-end;
  }

  #backButton,
  #homeButton{
    padding:9px 12px;
    font-size:12px;
  }
}

/* Jellyfin : intégration type musique, sans refonte */
.jelly-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}

.jelly-card{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  min-height:68px;
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.jelly-card:active{
  background:#d8f4ff;
  color:#07131a;
  text-shadow:none;
}

.jelly-card-title{
  font-weight:700;
  margin-bottom:5px;
}

.jelly-card-meta{
  font-size:12px;
  line-height:1.25;
}

@media(max-width:768px){
  .jelly-actions{
    grid-template-columns:1fr;
    gap:7px;
  }
}

/* Lecteur Jellyfin */
.jelly-player-layout{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  gap:12px;
  align-items:start;
}

.jelly-player-left,
.jelly-player-right{
  min-width:0;
}

.jelly-device{
  border:1px solid currentColor;
  background:rgba(216,244,255,.03);
  padding:8px;
  margin-bottom:8px;
  box-sizing:border-box;
}

@media(max-width:768px){
  .jelly-player-layout{
    grid-template-columns:1fr;
  }
}


/* MODE TABLETTE - NAVIGATION TUILES */
@media (min-width:769px) and (max-width:1366px){
  .legacy-shell{width:100vw;height:100dvh;max-height:100dvh;border:0;padding:18px;}
  .screen{font-size:18px;line-height:1.18;}
  .title{font-size:30px;margin-bottom:12px;}
  .banner{font-size:20px;padding:8px;margin-bottom:12px;}
  #content{padding:4px 6px 90px 6px !important;}
  .home-main-grid,.tile-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  .tile{min-height:126px;border-width:2px;padding:14px;}
  .tile .ico{font-size:38px;margin-bottom:10px;}
  .tile .t{font-size:21px;}
  .tile .s{font-size:14px;}
  .menu-grid,.info-grid,.action-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .menu{min-height:96px !important;border-width:2px;padding:14px;grid-template-columns:64px 1fr;}
  .menu .num{font-size:30px;min-height:52px;}
  .menu .label{font-size:19px;}
  .wmp-btn,.volume-btn,.queue-tool,.browse-tool{min-height:68px;font-size:18px;border-width:2px;}
  .player-layout,.jelly-player-layout{grid-template-columns:minmax(0,55%) minmax(0,45%);gap:16px;}
  .player-queue-list{max-height:calc(100dvh - 260px) !important;}
  .queue-track{min-height:54px;padding:12px;font-size:17px;}
  .info-tile,.action-tile{min-height:108px;border-width:2px;}
  #navButtons{right:18px;bottom:18px !important;gap:12px;}
  #backButton,#homeButton{font-size:17px;padding:14px 20px;border-width:2px;}
}


/* VERSION COULEUR TABLETTE - DASHBOARD MODERNE */
:root{
  --bg:#0f172a;
  --panel:#111827;
  --card:#1f2937;
  --card2:#273449;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --blue:#38bdf8;
  --green:#22c55e;
  --yellow:#facc15;
  --red:#f87171;
  --purple:#a78bfa;
  --orange:#fb923c;
  --border:rgba(255,255,255,.16);
}

html,
body{
  background:linear-gradient(135deg,#020617,#0f172a 55%,#111827) !important;
  color:var(--text) !important;
}

.legacy-shell{
  background:rgba(15,23,42,.92) !important;
  border:0 !important;
  border-radius:24px !important;
  box-shadow:0 25px 80px rgba(0,0,0,.45) !important;
}

.legacy-shell:before{
  display:none !important;
}

.screen{
  color:var(--text) !important;
  text-shadow:none !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:0 !important;
}

.title{
  color:var(--text) !important;
  text-shadow:none !important;
  font-weight:900 !important;
}

.banner{
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,rgba(56,189,248,.26),rgba(167,139,250,.20)) !important;
  color:var(--text) !important;
  text-shadow:none !important;
}

.line,
.label,
.num,
.message,
.help,
.help *{
  color:var(--text) !important;
  text-shadow:none !important;
}

.tile,
.menu,
.info-tile,
.action-tile,
.wmp-player,
.volume-panel,
.jelly-device,
.player-layout .player-queue,
.queue-track,
.queue-tool,
.browse-tool,
.wmp-btn,
.volume-btn{
  background:linear-gradient(135deg,var(--card),var(--card2)) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  color:var(--text) !important;
  text-shadow:none !important;
  box-shadow:0 12px 26px rgba(0,0,0,.22) !important;
}

.tile:active,
.menu:active,
.info-tile:active,
.action-tile:active,
.wmp-btn:active,
.volume-btn:active,
.queue-tool:active,
.browse-tool:active,
.queue-track:active{
  transform:scale(.98);
  background:linear-gradient(135deg,#334155,#475569) !important;
  color:var(--text) !important;
}

.tile .ico,
.action-tile .ico,
.info-tile .ico,
.menu .num{
  border:0 !important;
  color:var(--blue) !important;
  text-shadow:none !important;
}

.tile:nth-child(1) .ico{color:var(--blue) !important;}
.tile:nth-child(2) .ico{color:var(--green) !important;}
.tile:nth-child(3) .ico{color:var(--red) !important;}
.tile:nth-child(4) .ico{color:var(--purple) !important;}
.tile:nth-child(5) .ico{color:var(--yellow) !important;}
.tile:nth-child(6) .ico{color:var(--orange) !important;}

.tile .s,
.jelly-card-meta,
.action-data,
.info-data,
.page-intro-text{
  color:var(--muted) !important;
}

.home-section-title{
  color:var(--blue) !important;
  border-top:1px solid var(--border) !important;
  text-shadow:none !important;
}

.home-live{
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(56,189,248,.16)) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  color:var(--text) !important;
  text-shadow:none !important;
}

.page-intro{
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(167,139,250,.16)) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  color:var(--text) !important;
  text-shadow:none !important;
}

.page-intro-title{
  color:var(--text) !important;
  text-shadow:none !important;
}

.queue-track.current,
.queue-track.selected,
.browse-item.selected{
  background:linear-gradient(135deg,rgba(34,197,94,.35),rgba(56,189,248,.25)) !important;
  outline:2px solid var(--green) !important;
}

#backButton,
#homeButton{
  background:rgba(15,23,42,.92) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
  text-shadow:none !important;
  box-shadow:0 10px 30px rgba(0,0,0,.3) !important;
}

#backButton:active,
#homeButton:active{
  background:#334155 !important;
  color:var(--text) !important;
}

input{
  color:var(--text) !important;
  text-shadow:none !important;
  caret-color:var(--blue) !important;
}

.keypad button{
  background:var(--card) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  text-shadow:none !important;
}

.keypad button:active{
  background:var(--blue) !important;
  color:#020617 !important;
}

#content::-webkit-scrollbar-track{
  background:rgba(15,23,42,.5) !important;
}

#content::-webkit-scrollbar-thumb{
  background:var(--blue) !important;
  border-radius:999px !important;
  box-shadow:none !important;
}


/* Pictogrammes couleur lisibles */
.tile .ico,.menu .num,.info-tile .ico,.action-tile .ico,.wmp-btn,.volume-btn{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif !important;}
.menu .num,.tile .ico,.info-tile .ico,.action-tile .ico{line-height:1 !important;}
@media (min-width:769px){.menu .num{font-size:34px !important;}.tile .ico{font-size:42px !important;}.info-tile .ico,.action-tile .ico{font-size:38px !important;}}


/* Musique : titre en cours de lecture mis en évidence */
.queue-track.current,
.playlist-track.current{
  background:linear-gradient(135deg,rgba(34,197,94,.55),rgba(56,189,248,.35)) !important;
  border:2px solid #22c55e !important;
  color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.35),0 12px 26px rgba(0,0,0,.28) !important;
}

.queue-track.current .queue-index,
.playlist-track.current .queue-index{
  color:#ffffff !important;
  font-weight:900 !important;
}


/* Correction titre courant playlist/file */
.queue-track.current,
.playlist-track.current{
  background:#22c55e !important;
  color:#ffffff !important;
  border:3px solid #bbf7d0 !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.45),0 12px 26px rgba(0,0,0,.35) !important;
}

.queue-track.current *,
.playlist-track.current *{
  color:#ffffff !important;
  font-weight:900 !important;
}


/* FORCE : titre en cours toujours en haut et en couleur */
.queue-track.current,
.playlist-track.current{
  background:#16a34a !important;
  color:#ffffff !important;
  border:4px solid #bbf7d0 !important;
  box-shadow:0 0 0 4px rgba(22,163,74,.45),0 14px 30px rgba(0,0,0,.35) !important;
}

.queue-track.current *,
.playlist-track.current *{
  color:#ffffff !important;
  font-weight:900 !important;
}

.queue-now-label{
  display:inline-block;
  margin-right:8px;
  padding:2px 8px;
  border-radius:999px;
  background:#ffffff;
  color:#16a34a !important;
  font-weight:900 !important;
}



/* =========================================================
   REFONTE CHEZJEMS LOCAL - Dashboard moderne / responsive
   Objectif : conserver les API et fonctions, refaire la structure visuelle.
   ========================================================= */
:root{
  --app-bg:#07111f;
  --app-bg2:#0f172a;
  --surface:rgba(15,23,42,.78);
  --surface2:rgba(30,41,59,.82);
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#f8fafc;
  --muted:#aebacd;
  --blue:#38bdf8;
  --green:#34d399;
  --violet:#a78bfa;
  --red:#fb7185;
  --orange:#fb923c;
  --yellow:#facc15;
  --radius:24px;
}
html,body{
  margin:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100dvh !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,.18), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(167,139,250,.16), transparent 34%),
    linear-gradient(145deg,#020617,#0f172a 54%,#111827) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--text) !important;
}
body{display:block !important;overflow:hidden !important;}
.legacy-shell{
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  aspect-ratio:auto !important;
  border:0 !important;
  border-radius:0 !important;
  padding:clamp(10px,2vw,24px) !important;
  background:transparent !important;
  box-shadow:none !important;
}
.legacy-shell:before{display:none !important;}
.screen{
  height:100% !important;
  width:min(1280px,100%) !important;
  margin:0 auto !important;
  color:var(--text) !important;
  text-shadow:none !important;
  letter-spacing:0 !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  font-family:inherit !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
}
.title{
  display:none !important;
}
.banner{
  flex:0 0 auto !important;
  border:1px solid var(--stroke) !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.54) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.18) !important;
  width:max-content !important;
  max-width:100% !important;
  padding:8px 14px !important;
  margin:0 0 14px 0 !important;
  color:var(--muted) !important;
  font-size:13px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
}
#content{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  padding:0 2px calc(96px + env(safe-area-inset-bottom,0px)) 2px !important;
  scroll-padding-bottom:120px !important;
  scrollbar-color:rgba(56,189,248,.55) transparent !important;
}
#content::-webkit-scrollbar{width:8px !important;}
#content::-webkit-scrollbar-track{background:transparent !important;}
#content::-webkit-scrollbar-thumb{background:rgba(56,189,248,.5) !important;border-radius:99px !important;}
.line{display:none !important;}
.dash-hero{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(167,139,250,.13) 50%,rgba(34,197,94,.08));
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  padding:clamp(18px,3vw,32px);
  margin-bottom:16px;
  overflow:hidden;
  position:relative;
}
.dash-hero:after{
  content:"";
  position:absolute;
  right:-80px;top:-80px;
  width:220px;height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
.small-hero{padding:22px;margin-bottom:14px;}
.dash-kicker,.section-kicker,.now-label{
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.dash-title{font-size:clamp(30px,5vw,58px);font-weight:950;line-height:.95;margin-top:8px;}
.small-hero .dash-title{font-size:clamp(30px,4vw,46px);}
.dash-subtitle{color:var(--muted);font-size:clamp(14px,2vw,18px);margin-top:12px;max-width:680px;}
.dash-clock{
  align-self:flex-start;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:12px 16px;
  font-size:clamp(20px,3vw,34px);
  font-weight:900;
  z-index:1;
}
.now-card,.dash-section,.volume-panel,.wmp-player,.jelly-device,.player-layout .player-queue,.page-intro{
  border:1px solid var(--stroke) !important;
  border-radius:var(--radius) !important;
  background:linear-gradient(135deg,rgba(15,23,42,.84),rgba(30,41,59,.74)) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  color:var(--text) !important;
  text-shadow:none !important;
}
.now-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:16px;
  margin-bottom:16px;
}
.now-left{display:flex;align-items:center;gap:14px;min-width:0;}
.now-disc{
  width:64px;height:64px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#020617;font-weight:950;font-size:34px;
  box-shadow:0 12px 30px rgba(56,189,248,.22);
  flex:0 0 auto;
}
.now-meta{min-width:0;}
.now-title{font-size:clamp(18px,2.4vw,26px);font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.now-progress{display:block !important;color:var(--muted);font-size:13px;margin-top:5px;font-family:ui-monospace,monospace;}
.now-actions{display:flex;gap:8px;}
.now-actions button,.quick-card,.app-card,.status-strip button,.menu,.tile,.action-tile,.info-tile,.wmp-btn,.volume-btn,.queue-tool,.browse-tool,.queue-track,.jelly-card{
  border:1px solid var(--stroke) !important;
  color:var(--text) !important;
  text-shadow:none !important;
  box-shadow:0 14px 32px rgba(0,0,0,.18) !important;
  transition:transform .12s ease, border-color .12s ease, background .12s ease !important;
  font-family:inherit !important;
}
.now-actions button{
  appearance:none;border-radius:16px;background:rgba(255,255,255,.08);padding:12px 14px;font-size:18px;font-weight:900;cursor:pointer;
}
.now-vu{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;}
.dash-section{padding:16px;margin-bottom:16px;}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px;}
.section-head h2{margin:3px 0 0 0;font-size:clamp(20px,3vw,30px);line-height:1;font-weight:950;}
.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.maison-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.app-card{
  appearance:none;
  min-height:148px;
  border-radius:24px !important;
  background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.72)) !important;
  padding:18px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.app-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--blue);opacity:.95;}
.app-icon{font-size:38px;line-height:1;}
.app-title{display:block;font-size:22px;font-weight:950;margin-top:14px;}
.app-sub{display:block;color:var(--muted);font-size:13px;margin-top:6px;line-height:1.25;}
.accent-home:before,.accent-ha:before{background:var(--green);}.accent-music:before,.accent-player:before{background:var(--violet);}.accent-video:before{background:var(--red);}.accent-light:before{background:var(--yellow);}.accent-plug:before{background:var(--orange);}.accent-security:before{background:var(--green);}.accent-camera:before{background:var(--blue);}.accent-weather:before{background:var(--blue);}.accent-energy:before{background:var(--yellow);}.accent-tag:before{background:var(--violet);}.accent-routine:before{background:var(--muted);}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.quick-card{
  appearance:none;
  border-radius:18px !important;
  background:rgba(255,255,255,.055) !important;
  padding:14px;
  text-align:left;
  cursor:pointer;
  min-height:78px;
}
.quick-card b{display:block;font-size:16px;margin-bottom:6px;}
.quick-card span{display:block;color:var(--muted);font-size:12px;}
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.status-strip button{appearance:none;border-radius:18px !important;background:rgba(255,255,255,.055) !important;padding:14px;cursor:pointer;text-align:left;display:grid;gap:5px;}
.status-strip span{font-size:24px}.status-strip b{font-size:14px}.status-strip small{color:var(--muted)}
.app-card:active,.quick-card:active,.status-strip button:active,.now-actions button:active,.menu:active,.tile:active,.action-tile:active,.info-tile:active,.wmp-btn:active,.volume-btn:active,.queue-tool:active,.browse-tool:active,.queue-track:active,.jelly-card:active{transform:scale(.985) !important;background:rgba(71,85,105,.72) !important;color:var(--text) !important;}
.menu-grid,.home-main-grid,.tile-grid,.action-grid,.info-grid,.jelly-actions{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important;margin-top:12px !important;}
.menu,.tile,.action-tile,.info-tile,.jelly-card{
  width:auto !important;
  min-height:104px !important;
  display:grid !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,rgba(30,41,59,.9),rgba(15,23,42,.75)) !important;
  padding:14px !important;
  margin:0 !important;
  cursor:pointer !important;
}
.menu{grid-template-columns:48px 1fr !important;align-items:center !important;}
.menu .num,.tile .ico,.action-tile .ico,.info-tile .ico{border:0 !important;color:var(--blue) !important;font-size:30px !important;display:flex;align-items:center;justify-content:center;text-shadow:none !important;}
.menu .label,.tile .t,.action-title,.info-title{font-size:17px !important;font-weight:900 !important;color:var(--text) !important;text-shadow:none !important;}
.tile .s,.action-data,.info-data,.jelly-card-meta,.page-intro-text{color:var(--muted) !important;text-shadow:none !important;}
.page-intro{padding:16px !important;margin:0 0 14px 0 !important;}
.page-intro-title{font-size:22px !important;font-weight:950 !important;margin-bottom:6px !important;color:var(--text) !important;text-shadow:none !important;}
.volume-panel{padding:16px !important;margin:0 0 16px 0 !important;}
.volume-title{font-weight:950;color:var(--blue);text-transform:uppercase;letter-spacing:.12em;font-size:12px;}
.volume-controls{gap:10px !important;}.volume-btn,.wmp-btn,.queue-tool,.browse-tool{border-radius:16px !important;background:rgba(255,255,255,.055) !important;}
#navButtons{
  left:50% !important;right:auto !important;bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;transform:translateX(-50%) !important;
  display:flex !important;gap:10px !important;z-index:9999 !important;
  padding:8px !important;border:1px solid var(--stroke) !important;border-radius:999px !important;background:rgba(2,6,23,.72) !important;backdrop-filter:blur(16px) !important;
}
#backButton,#homeButton{
  border:0 !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;color:var(--text) !important;box-shadow:none !important;text-shadow:none !important;
  padding:12px 16px !important;font-size:14px !important;font-weight:900 !important;
}
.screen .input-zone,.screen .keypad,.screen .help{display:none !important;}
body.search-mode .screen .input-zone{display:block !important;background:transparent !important;color:var(--text) !important;text-shadow:none !important;margin:8px 0 !important;}
body.search-mode .screen .keypad{display:grid !important;}
body.search-mode .screen .help{display:block !important;color:var(--muted) !important;text-shadow:none !important;border-top:1px solid var(--stroke) !important;}
input#code{font-family:inherit !important;color:var(--text) !important;text-shadow:none !important;background:rgba(255,255,255,.08) !important;border:1px solid var(--stroke) !important;border-radius:16px !important;}
.keypad button{border-radius:14px !important;background:rgba(255,255,255,.08) !important;color:var(--text) !important;text-shadow:none !important;border:1px solid var(--stroke) !important;font-family:inherit !important;}
@media(max-width:1000px){
  .app-grid,.maison-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quick-grid,.status-strip,.menu-grid,.home-main-grid,.tile-grid,.action-grid,.info-grid,.jelly-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .now-card{grid-template-columns:1fr;}.now-actions{width:100%;}.now-actions button{flex:1;}
}
@media(max-width:640px){
  .legacy-shell{padding:10px !important;}
  .screen{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;}
  .banner{font-size:11px !important;padding:7px 11px !important;margin-bottom:10px !important;}
  .dash-hero{padding:18px;border-radius:22px;display:block;}
  .dash-clock{margin-top:14px;width:max-content;font-size:22px;}
  .now-card{padding:12px;border-radius:22px;}
  .now-disc{width:52px;height:52px;border-radius:16px;font-size:28px;}
  .app-grid,.maison-grid,.quick-grid,.status-strip,.menu-grid,.home-main-grid,.tile-grid,.action-grid,.info-grid,.jelly-actions{grid-template-columns:1fr !important;gap:10px !important;}
  .app-card{min-height:118px;border-radius:20px !important;padding:16px;}
  .app-icon{font-size:32px;}.app-title{font-size:20px;}
  .quick-card{min-height:68px;}
  .menu,.tile,.action-tile,.info-tile,.jelly-card{min-height:84px !important;border-radius:18px !important;}
  #navButtons{width:calc(100vw - 24px) !important;justify-content:space-between !important;bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;}
  #backButton,#homeButton{flex:1;text-align:center;font-size:13px !important;padding:12px 10px !important;}
}

/* Commandes audio intégrées dans la tuile Bonjour */
.hero-audio-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  position:relative;
  z-index:2;
}
.hero-audio-controls button{
  appearance:none;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:rgba(255,255,255,.09);
  color:var(--text);
  padding:12px 14px;
  min-width:52px;
  font-size:18px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .12s ease, background .12s ease;
}
.hero-audio-controls button:active{
  transform:scale(.97);
  background:rgba(56,189,248,.24);
}
.hero-audio-controls .hero-volume-info{
  min-width:72px;
  font-size:14px;
}
@media(max-width:640px){
  .hero-audio-controls{gap:8px;margin-top:16px;}
  .hero-audio-controls button{flex:1;min-width:0;padding:11px 8px;font-size:16px;}
  .hero-audio-controls .hero-volume-info{flex-basis:100%;}
}


/* Accueil : la tuile principale devient directement le lecteur */
.player-hero{align-items:center;}
.player-hero-main{min-width:0;position:relative;z-index:2;flex:1;}
.hero-now-left{align-items:flex-start;}
.hero-now-left .now-disc{width:82px;height:82px;border-radius:26px;font-size:42px;}
.hero-now-title{margin-top:8px;max-width:min(760px,72vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-now-progress{font-size:14px;margin-top:10px;}
.hero-now-vu{display:block;margin-top:8px;}
.player-hero .hero-audio-controls button{min-width:64px;}
@media(max-width:640px){
  .hero-now-left{display:block;}
  .hero-now-left .now-disc{width:62px;height:62px;border-radius:20px;font-size:32px;margin-bottom:12px;}
  .hero-now-title{max-width:100%;white-space:normal;font-size:28px;}
  .player-hero .dash-clock{display:none;}
}



/* Recherche intégrée au lecteur : Local / YouTube dans la même zone */
.player-search{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(15,23,42,.84),rgba(30,41,59,.74));
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  padding:14px;
}
.player-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.player-search-title{
  color:var(--blue);
  font-size:13px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.player-source-switch{
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:rgba(255,255,255,.05);
}
.player-source-switch button,
.player-search-submit,
.player-result-action{
  appearance:none;
  border:1px solid var(--stroke);
  color:var(--text);
  background:rgba(255,255,255,.07);
  border-radius:999px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  text-shadow:none;
}
.player-source-switch button{
  padding:8px 12px;
  font-size:12px;
}
.player-source-switch button.active{
  background:linear-gradient(135deg,rgba(56,189,248,.35),rgba(167,139,250,.22));
  border-color:rgba(56,189,248,.55);
}
.player-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.player-search-input{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box;
  border:1px solid var(--stroke) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
  text-shadow:none !important;
  font-family:inherit !important;
  font-size:16px !important;
  padding:12px 14px !important;
}
.player-search-submit{
  border-radius:16px;
  padding:0 16px;
  font-size:14px;
}
.player-search-results{
  margin-top:12px;
  max-height:310px;
  overflow:auto;
  padding-right:4px;
}
.player-result{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.09);
}
.player-result-icon{font-size:18px;opacity:.95;}
.player-result-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:850;}
.player-result-meta{color:var(--muted);font-size:12px;margin-top:2px;}
.player-result-action{padding:8px 10px;font-size:12px;}
.player-result-action:active,.player-search-submit:active,.player-source-switch button:active{transform:scale(.97);background:rgba(56,189,248,.24);}
.player-search-empty{color:var(--muted);font-size:13px;padding:10px 0;}
@media(max-width:900px){
  .player-search-row{grid-template-columns:1fr;}
  .player-search-submit{padding:12px;}
  .player-search-head{align-items:flex-start;flex-direction:column;}
  .player-source-switch{width:100%;display:grid;grid-template-columns:1fr 1fr;}
  .player-result{grid-template-columns:auto minmax(0,1fr);}
  .player-result-action{grid-column:span 1;}
}



/* Correctif file d'attente : ne pas cacher les titres qui portent aussi la classe .line */
.player-queue-list .queue-track,
.player-queue-list .playlist-track,
#musicList .queue-track,
#musicList .playlist-track{
  display:grid !important;
  grid-template-columns:auto auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
}
.player-queue-list .queue-track span:last-child,
#musicList .queue-track span:last-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.volume-controls-with-player{
  grid-template-columns:repeat(4,1fr) !important;
}
@media(max-width:640px){
  .volume-controls-with-player{
    grid-template-columns:repeat(2,1fr) !important;
  }
}


/* =========================================================
   MODULE CARILLON
   ========================================================= */

/* =========================================================
   HABILLAGE CHEZJEMS.FR — 2026-07
   Graphisme uniquement : aucune fonction ni structure JS modifiée.
   ========================================================= */
:root{
  --cj-bg:#f4f4f2;
  --cj-surface:#ffffff;
  --cj-surface-soft:#ececea;
  --cj-ink:#171717;
  --cj-muted:#696969;
  --cj-line:rgba(23,23,23,.12);
  --cj-accent:#151515;
  --cj-shadow:0 18px 48px rgba(0,0,0,.10);
  --cj-radius:22px;
  --text:var(--cj-ink);
  --muted:var(--cj-muted);
  --blue:#171717;
  --green:#171717;
  --violet:#171717;
  --red:#171717;
  --orange:#171717;
  --yellow:#171717;
  --stroke:var(--cj-line);
}

html,body{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,255,255,.92),transparent 34%),
    linear-gradient(145deg,#eeeeeb,#f8f8f6 52%,#e7e7e3) !important;
  color:var(--cj-ink) !important;
}

.legacy-shell{
  background:transparent !important;
  padding:clamp(10px,2vw,24px) !important;
}

.screen{
  width:min(1260px,100%) !important;
  color:var(--cj-ink) !important;
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
}

/* En-tête visuel inspiré de chezjems.fr, sans toucher au HTML */
.screen::before{
  content:"CHEZJEMS   ·   MON UNIVERS NUMÉRIQUE";
  display:flex;
  align-items:center;
  min-height:68px;
  box-sizing:border-box;
  padding:12px 18px 12px 84px;
  margin-bottom:14px;
  border:1px solid var(--cj-line);
  border-radius:24px;
  background:
    url("../assets/chezjems-logo.jpg") 14px 50%/54px 54px no-repeat,
    rgba(255,255,255,.82);
  color:var(--cj-ink);
  box-shadow:var(--cj-shadow);
  font-size:clamp(14px,2vw,18px);
  font-weight:900;
  letter-spacing:.09em;
  backdrop-filter:blur(16px);
}

.title{display:none !important;}

.banner{
  width:auto !important;
  max-width:none !important;
  margin:0 0 16px !important;
  padding:9px 14px !important;
  border:0 !important;
  border-radius:14px !important;
  background:var(--cj-ink) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:12px !important;
  letter-spacing:.11em !important;
}

#content{
  padding:0 2px calc(106px + env(safe-area-inset-bottom,0px)) !important;
  scrollbar-color:#999 transparent !important;
}
#content::-webkit-scrollbar-thumb{background:#a2a2a2 !important;}

.dash-hero,.small-hero,.player-hero{
  border:1px solid var(--cj-line) !important;
  border-radius:28px !important;
  background:var(--cj-surface) !important;
  color:var(--cj-ink) !important;
  box-shadow:var(--cj-shadow) !important;
}
.dash-hero::after{
  background:radial-gradient(circle,rgba(0,0,0,.07),transparent 68%) !important;
}
.dash-kicker,.section-kicker,.now-label,.home-section-title,.player-search-title,.volume-title{
  color:var(--cj-muted) !important;
  letter-spacing:.14em !important;
}
.dash-title,.page-intro-title,.app-title,.quick-title,.now-title,.hero-now-title{
  color:var(--cj-ink) !important;
}
.dash-subtitle,.app-sub,.quick-sub,.now-meta,.page-intro-text,.tile .s,.action-data,.info-data,.jelly-card-meta{
  color:var(--cj-muted) !important;
}
.dash-clock{
  border:1px solid var(--cj-line) !important;
  background:var(--cj-surface-soft) !important;
  color:var(--cj-ink) !important;
}

/* Cartes : même langage visuel que les tuiles de chezjems.fr */
.app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card,
.now-card,.home-live,.status-strip > *,
.volume-panel,.wmp-player,.jelly-device,.player-queue,.player-search,
.queue-track,.playlist-track,.browse-item,.queue-tool,.browse-tool,
.wmp-btn,.volume-btn,.player-result{
  border:1px solid var(--cj-line) !important;
  border-radius:var(--cj-radius) !important;
  background:var(--cj-surface) !important;
  color:var(--cj-ink) !important;
  text-shadow:none !important;
  box-shadow:0 10px 28px rgba(0,0,0,.065) !important;
}

.app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
}
.app-card:hover,.quick-card:hover,.menu:hover,.tile:hover,.action-tile:hover,.info-tile:hover,.jelly-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.11) !important;
  border-color:rgba(23,23,23,.25) !important;
}
.app-card:active,.quick-card:active,.menu:active,.tile:active,.action-tile:active,.info-tile:active,.jelly-card:active{
  transform:scale(.985) !important;
  background:#e8e8e5 !important;
}

.app-icon,.menu .num,.tile .ico,.action-tile .ico,.info-tile .ico{
  color:var(--cj-ink) !important;
  background:var(--cj-surface-soft) !important;
  border:1px solid var(--cj-line) !important;
  border-radius:18px !important;
  text-shadow:none !important;
}
.menu .num,.tile .ico,.action-tile .ico,.info-tile .ico{
  min-width:52px;
  min-height:52px;
}

.home-section-title{
  border-top:1px solid var(--cj-line) !important;
}
.status-ok,.status-warn{color:var(--cj-ink) !important;}

/* Lecteur */
.now-disc,.hero-now-left .now-disc,.player-disc{
  background:var(--cj-ink) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.18) !important;
}
.hero-audio-controls button,.now-actions button,
.player-source-switch button,.player-search-submit,.player-result-action{
  border:1px solid var(--cj-line) !important;
  background:var(--cj-surface-soft) !important;
  color:var(--cj-ink) !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
.hero-audio-controls button:active,.now-actions button:active,
.player-source-switch button:active,.player-search-submit:active,.player-result-action:active{
  background:var(--cj-ink) !important;
  color:#fff !important;
}
.player-source-switch button.active{
  background:var(--cj-ink) !important;
  color:#fff !important;
  border-color:var(--cj-ink) !important;
}
.player-search-input,input#code{
  border:1px solid var(--cj-line) !important;
  background:#f1f1ef !important;
  color:var(--cj-ink) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04) !important;
}
.queue-track.current,.playlist-track.current{
  background:var(--cj-ink) !important;
  border:2px solid var(--cj-ink) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
}
.queue-track.current *,.playlist-track.current *{color:#fff !important;}
.queue-now-label{background:#fff !important;color:var(--cj-ink) !important;}

/* Clavier et navigation : mêmes boutons, nouvel habillage */
.keypad button{
  border:1px solid var(--cj-line) !important;
  border-radius:14px !important;
  background:var(--cj-surface) !important;
  color:var(--cj-ink) !important;
  box-shadow:0 6px 15px rgba(0,0,0,.06) !important;
}
.keypad button:active{background:var(--cj-ink) !important;color:#fff !important;}

#navButtons{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(20,20,20,.91) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.22) !important;
}
#backButton,#homeButton{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border:0 !important;
}
#backButton:active,#homeButton:active{background:#fff !important;color:#111 !important;}

.help,.help *{color:var(--cj-muted) !important;}

@media(max-width:640px){
  .legacy-shell{padding:8px !important;}
  .screen::before{
    min-height:60px;
    padding:9px 10px 9px 68px;
    background-size:44px 44px,auto;
    background-position:10px 50%,0 0;
    border-radius:19px;
    font-size:12px;
    letter-spacing:.055em;
    margin-bottom:10px;
  }
  .banner{margin-bottom:10px !important;border-radius:12px !important;}
  .dash-hero,.small-hero,.player-hero{border-radius:22px !important;}
  .app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card,
  .now-card,.home-live,.volume-panel,.wmp-player,.jelly-device,.player-queue,.player-search{
    border-radius:18px !important;
  }
  .app-icon,.menu .num,.tile .ico,.action-tile .ico,.info-tile .ico{border-radius:15px !important;}
}

@media(prefers-color-scheme:dark){
  :root{
    --cj-bg:#101010;
    --cj-surface:#191919;
    --cj-surface-soft:#252525;
    --cj-ink:#f5f5f3;
    --cj-muted:#aaa9a5;
    --cj-line:rgba(255,255,255,.11);
    --cj-shadow:0 18px 48px rgba(0,0,0,.30);
  }
  html,body{
    background:radial-gradient(circle at 8% 0%,#292929,transparent 34%),linear-gradient(145deg,#0b0b0b,#151515 55%,#090909) !important;
  }
  .screen::before{background:url("../assets/chezjems-logo.jpg") 14px 50%/54px 54px no-repeat,rgba(25,25,25,.88);}
  .banner{background:#f5f5f3 !important;color:#111 !important;}
  .player-search-input,input#code{background:#222 !important;}
}

/* =========================================================
   CHEZJEMS COLORÉ — correctif 2026-07
   Surcharge purement graphique, sans modifier HTML ni JavaScript.
   ========================================================= */
:root{
  --cj-bg:#eef4ff;
  --cj-surface:rgba(255,255,255,.90);
  --cj-surface-soft:#f2f6ff;
  --cj-ink:#18213c;
  --cj-muted:#66708d;
  --cj-line:rgba(74,91,145,.16);
  --cj-blue:#4388ff;
  --cj-cyan:#22b8cf;
  --cj-violet:#845ef7;
  --cj-pink:#ec5f9e;
  --cj-orange:#ff922b;
  --cj-yellow:#f5b942;
  --cj-green:#38b27b;
  --cj-red:#ef5b5b;
  --cj-shadow:0 18px 45px rgba(50,72,130,.15);
  --blue:var(--cj-blue);
  --green:var(--cj-green);
  --violet:var(--cj-violet);
  --red:var(--cj-red);
  --orange:var(--cj-orange);
  --yellow:var(--cj-yellow);
}

html,body{
  background:
    radial-gradient(circle at 4% 4%,rgba(67,136,255,.28),transparent 25%),
    radial-gradient(circle at 96% 3%,rgba(236,95,158,.20),transparent 24%),
    radial-gradient(circle at 86% 92%,rgba(255,146,43,.20),transparent 28%),
    radial-gradient(circle at 8% 94%,rgba(56,178,123,.17),transparent 25%),
    linear-gradient(145deg,#edf5ff 0%,#f7f3ff 48%,#fff4ed 100%) !important;
  background-attachment:fixed !important;
}

.screen::before{
  border-color:rgba(255,255,255,.75) !important;
  background:
    url("../assets/chezjems-logo.jpg") 14px 50%/54px 54px no-repeat,
    linear-gradient(115deg,rgba(255,255,255,.95),rgba(240,245,255,.92) 55%,rgba(255,240,247,.92)) !important;
  box-shadow:0 18px 46px rgba(70,91,150,.18) !important;
}

.banner{
  background:linear-gradient(100deg,#3f7cf5,#7558e8 52%,#dd5a99) !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(91,83,211,.24) !important;
}

.dash-hero,.small-hero,.player-hero{
  border-color:rgba(255,255,255,.8) !important;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.40),transparent 30%),
    linear-gradient(125deg,rgba(63,124,245,.97),rgba(117,88,232,.94) 54%,rgba(221,90,153,.90)) !important;
  color:#fff !important;
  box-shadow:0 22px 48px rgba(87,75,194,.26) !important;
}
.dash-hero .dash-title,.dash-hero .dash-subtitle,.dash-hero .dash-kicker,
.small-hero .page-intro-title,.small-hero .page-intro-text,.small-hero .section-kicker,
.player-hero .hero-now-title,.player-hero .now-label,.player-hero .now-meta{
  color:#fff !important;
}
.dash-hero .dash-subtitle,.small-hero .page-intro-text,.player-hero .now-meta{opacity:.82 !important;}
.dash-clock{
  border-color:rgba(255,255,255,.32) !important;
  background:rgba(255,255,255,.17) !important;
  color:#fff !important;
  backdrop-filter:blur(12px);
}

/* Cartes blanches avec liseré et profondeur colorés */
.app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card,
.now-card,.home-live,.status-strip > *,.volume-panel,.wmp-player,
.jelly-device,.player-queue,.player-search,.queue-track,.playlist-track,
.browse-item,.queue-tool,.browse-tool,.wmp-btn,.volume-btn,.player-result{
  background:rgba(255,255,255,.91) !important;
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:0 12px 30px rgba(61,81,139,.13) !important;
}

/* Couleurs alternées des tuiles, sans dépendre de leur contenu */
.app-card:nth-child(8n+1),.quick-card:nth-child(8n+1),.menu:nth-child(8n+1),.tile:nth-child(8n+1),.action-tile:nth-child(8n+1),.info-tile:nth-child(8n+1),.jelly-card:nth-child(8n+1){border-top:5px solid var(--cj-blue) !important;}
.app-card:nth-child(8n+2),.quick-card:nth-child(8n+2),.menu:nth-child(8n+2),.tile:nth-child(8n+2),.action-tile:nth-child(8n+2),.info-tile:nth-child(8n+2),.jelly-card:nth-child(8n+2){border-top:5px solid var(--cj-violet) !important;}
.app-card:nth-child(8n+3),.quick-card:nth-child(8n+3),.menu:nth-child(8n+3),.tile:nth-child(8n+3),.action-tile:nth-child(8n+3),.info-tile:nth-child(8n+3),.jelly-card:nth-child(8n+3){border-top:5px solid var(--cj-pink) !important;}
.app-card:nth-child(8n+4),.quick-card:nth-child(8n+4),.menu:nth-child(8n+4),.tile:nth-child(8n+4),.action-tile:nth-child(8n+4),.info-tile:nth-child(8n+4),.jelly-card:nth-child(8n+4){border-top:5px solid var(--cj-orange) !important;}
.app-card:nth-child(8n+5),.quick-card:nth-child(8n+5),.menu:nth-child(8n+5),.tile:nth-child(8n+5),.action-tile:nth-child(8n+5),.info-tile:nth-child(8n+5),.jelly-card:nth-child(8n+5){border-top:5px solid var(--cj-green) !important;}
.app-card:nth-child(8n+6),.quick-card:nth-child(8n+6),.menu:nth-child(8n+6),.tile:nth-child(8n+6),.action-tile:nth-child(8n+6),.info-tile:nth-child(8n+6),.jelly-card:nth-child(8n+6){border-top:5px solid var(--cj-cyan) !important;}
.app-card:nth-child(8n+7),.quick-card:nth-child(8n+7),.menu:nth-child(8n+7),.tile:nth-child(8n+7),.action-tile:nth-child(8n+7),.info-tile:nth-child(8n+7),.jelly-card:nth-child(8n+7){border-top:5px solid var(--cj-yellow) !important;}
.app-card:nth-child(8n),.quick-card:nth-child(8n),.menu:nth-child(8n),.tile:nth-child(8n),.action-tile:nth-child(8n),.info-tile:nth-child(8n),.jelly-card:nth-child(8n){border-top:5px solid var(--cj-red) !important;}

.app-card:nth-child(8n+1) .app-icon,.menu:nth-child(8n+1) .num,.tile:nth-child(8n+1) .ico,.action-tile:nth-child(8n+1) .ico,.info-tile:nth-child(8n+1) .ico{background:rgba(67,136,255,.14) !important;color:#286ee6 !important;}
.app-card:nth-child(8n+2) .app-icon,.menu:nth-child(8n+2) .num,.tile:nth-child(8n+2) .ico,.action-tile:nth-child(8n+2) .ico,.info-tile:nth-child(8n+2) .ico{background:rgba(132,94,247,.14) !important;color:#7047e7 !important;}
.app-card:nth-child(8n+3) .app-icon,.menu:nth-child(8n+3) .num,.tile:nth-child(8n+3) .ico,.action-tile:nth-child(8n+3) .ico,.info-tile:nth-child(8n+3) .ico{background:rgba(236,95,158,.14) !important;color:#d94789 !important;}
.app-card:nth-child(8n+4) .app-icon,.menu:nth-child(8n+4) .num,.tile:nth-child(8n+4) .ico,.action-tile:nth-child(8n+4) .ico,.info-tile:nth-child(8n+4) .ico{background:rgba(255,146,43,.16) !important;color:#e5780b !important;}
.app-card:nth-child(8n+5) .app-icon,.menu:nth-child(8n+5) .num,.tile:nth-child(8n+5) .ico,.action-tile:nth-child(8n+5) .ico,.info-tile:nth-child(8n+5) .ico{background:rgba(56,178,123,.15) !important;color:#249562 !important;}
.app-card:nth-child(8n+6) .app-icon,.menu:nth-child(8n+6) .num,.tile:nth-child(8n+6) .ico,.action-tile:nth-child(8n+6) .ico,.info-tile:nth-child(8n+6) .ico{background:rgba(34,184,207,.15) !important;color:#1098ad !important;}
.app-card:nth-child(8n+7) .app-icon,.menu:nth-child(8n+7) .num,.tile:nth-child(8n+7) .ico,.action-tile:nth-child(8n+7) .ico,.info-tile:nth-child(8n+7) .ico{background:rgba(245,185,66,.18) !important;color:#c98908 !important;}
.app-card:nth-child(8n) .app-icon,.menu:nth-child(8n) .num,.tile:nth-child(8n) .ico,.action-tile:nth-child(8n) .ico,.info-tile:nth-child(8n) .ico{background:rgba(239,91,91,.14) !important;color:#d94343 !important;}

.app-card:hover,.quick-card:hover,.menu:hover,.tile:hover,.action-tile:hover,.info-tile:hover,.jelly-card:hover{
  box-shadow:0 20px 42px rgba(73,79,168,.22) !important;
  border-color:rgba(255,255,255,.95) !important;
}
.app-card:active,.quick-card:active,.menu:active,.tile:active,.action-tile:active,.info-tile:active,.jelly-card:active{
  background:#f4f0ff !important;
}

.home-section-title{
  color:#4f5c7e !important;
  border-top-color:rgba(94,110,164,.18) !important;
}

.now-disc,.hero-now-left .now-disc,.player-disc{
  background:linear-gradient(145deg,#3f7cf5,#8258e8 55%,#e0589c) !important;
  box-shadow:0 15px 34px rgba(93,75,199,.30) !important;
}
.hero-audio-controls button,.now-actions button,.player-source-switch button,
.player-search-submit,.player-result-action{
  background:linear-gradient(135deg,#eef4ff,#f5efff) !important;
  color:#4a4f8f !important;
  border-color:rgba(99,90,191,.17) !important;
}
.hero-audio-controls button:active,.now-actions button:active,
.player-source-switch button:active,.player-search-submit:active,.player-result-action:active,
.player-source-switch button.active{
  background:linear-gradient(100deg,#3f7cf5,#7558e8 55%,#dd5a99) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.queue-track.current,.playlist-track.current{
  background:linear-gradient(100deg,#3f7cf5,#7558e8 55%,#dd5a99) !important;
  border-color:transparent !important;
}

.keypad button{
  background:linear-gradient(145deg,#ffffff,#f0f4ff) !important;
  color:#455078 !important;
  border-color:rgba(81,99,158,.16) !important;
}
.keypad button:nth-child(3n+1){box-shadow:inset 0 -3px 0 rgba(67,136,255,.24),0 6px 15px rgba(0,0,0,.06) !important;}
.keypad button:nth-child(3n+2){box-shadow:inset 0 -3px 0 rgba(132,94,247,.24),0 6px 15px rgba(0,0,0,.06) !important;}
.keypad button:nth-child(3n){box-shadow:inset 0 -3px 0 rgba(236,95,158,.24),0 6px 15px rgba(0,0,0,.06) !important;}
.keypad button:active{background:linear-gradient(100deg,#3f7cf5,#7558e8,#dd5a99) !important;color:#fff !important;}

#navButtons{
  background:linear-gradient(100deg,rgba(34,49,92,.95),rgba(75,54,133,.95)) !important;
  border-color:rgba(255,255,255,.22) !important;
}

@media(prefers-color-scheme:dark){
  :root{
    --cj-bg:#11152b;
    --cj-surface:rgba(28,33,61,.94);
    --cj-surface-soft:#272e55;
    --cj-ink:#f5f7ff;
    --cj-muted:#b9c0db;
    --cj-line:rgba(255,255,255,.12);
  }
  html,body{
    background:
      radial-gradient(circle at 4% 4%,rgba(67,136,255,.28),transparent 28%),
      radial-gradient(circle at 96% 2%,rgba(236,95,158,.20),transparent 25%),
      radial-gradient(circle at 88% 92%,rgba(255,146,43,.17),transparent 27%),
      linear-gradient(145deg,#10152d,#181433 54%,#25162a) !important;
  }
  .screen::before{
    background:url("../assets/chezjems-logo.jpg") 14px 50%/54px 54px no-repeat,linear-gradient(115deg,rgba(27,34,67,.96),rgba(45,34,77,.95),rgba(69,31,65,.94)) !important;
  }
  .app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card,
  .now-card,.home-live,.status-strip > *,.volume-panel,.wmp-player,
  .jelly-device,.player-queue,.player-search,.queue-track,.playlist-track,
  .browse-item,.queue-tool,.browse-tool,.wmp-btn,.volume-btn,.player-result{
    background:rgba(28,33,61,.93) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  .player-search-input,input#code{background:#222a4b !important;color:#fff !important;}
  .keypad button{background:linear-gradient(145deg,#293054,#202746) !important;color:#edf0ff !important;}
  .app-title,.quick-title,.now-title,.jelly-card-title{color:#f7f8ff !important;}
  .app-sub,.quick-sub,.now-meta,.tile .s,.action-data,.info-data,.jelly-card-meta{color:#b8c0dc !important;}
}

/* ========================================================================== 
   HARMONISATION DES LECTEURS — STYLE PLAYER.CHEZJEMS.FR
   Graphisme uniquement : aucun identifiant, onclick ou comportement modifié.
   ========================================================================== */

:root{
  --cj-player-bg:#07111f;
  --cj-player-panel:#111c2f;
  --cj-player-panel-2:#1a2940;
  --cj-player-text:#f8fafc;
  --cj-player-muted:#aebacd;
  --cj-player-blue:#38bdf8;
  --cj-player-purple:#a78bfa;
  --cj-player-green:#34d399;
  --cj-player-stroke:rgba(255,255,255,.13);
  --cj-player-shadow:0 20px 55px rgba(0,0,0,.25);
}

/* Colonnes et cartes principales */
.player-layout,
.jelly-player-layout{
  gap:16px !important;
  align-items:start !important;
}

.player-layout .player-left,
.player-layout .player-right,
.jelly-player-layout .jelly-player-left,
.jelly-player-layout .jelly-player-right{
  min-width:0;
}

.wmp-player,
.jelly-device,
.player-layout .player-queue,
.player-search{
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,rgba(17,28,47,.97),rgba(26,41,64,.88)) !important;
  box-shadow:var(--cj-player-shadow) !important;
  padding:18px !important;
  overflow:hidden;
}

/* En-tête « titre en cours » */
.wmp-player .player-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.wmp-player .player-disc{
  width:64px;
  height:64px;
  border:0 !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,var(--cj-player-blue),var(--cj-player-purple)) !important;
  color:#020617 !important;
  box-shadow:0 12px 30px rgba(56,189,248,.22);
  animation:playerDiscSpin 3.6s linear infinite;
}

.wmp-player .player-disc::before{
  content:"♪" !important;
  font-size:32px !important;
  font-weight:950;
}

.wmp-player .wmp-meta{
  color:var(--cj-player-muted) !important;
  text-shadow:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:13px;
  line-height:1.45;
  margin:5px 0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wmp-player #player-title,
.wmp-player > .wmp-meta:nth-of-type(1){
  color:var(--cj-player-text) !important;
  font-size:clamp(18px,2.4vw,26px) !important;
  font-weight:850;
  margin-top:10px;
  white-space:nowrap;
}

.wmp-player #player-state,
.wmp-player #player-time{
  color:var(--cj-player-blue) !important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.wmp-player .muted{
  color:var(--cj-player-muted) !important;
  opacity:.9;
  margin-top:14px !important;
}

/* Barres de progression */
.wmp-player input[type="range"]{
  width:100%;
  min-width:0;
  accent-color:var(--cj-player-blue);
  cursor:pointer;
}

.wmp-player input[type="range"]:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#mpdSeekElapsed,#mpdSeekDuration,
#deviceElapsed,#deviceDuration{
  color:var(--cj-player-muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* Commandes principales : mêmes cartes que player.chezjems.fr */
.wmp-controls{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:10px 0 0;
}

.wmp-btn,
.volume-btn,
.queue-tool,
.browse-tool{
  min-width:0;
  min-height:66px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.07) !important;
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:13px !important;
  font-weight:800;
  line-height:1.25;
  padding:11px 8px !important;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}

.wmp-btn:hover,
.volume-btn:hover,
.queue-tool:hover,
.browse-tool:hover{
  background:rgba(56,189,248,.13) !important;
  border-color:rgba(56,189,248,.42) !important;
}

.wmp-btn:active,
.volume-btn:active,
.queue-tool:active,
.browse-tool:active{
  transform:scale(.98) !important;
  background:rgba(56,189,248,.23) !important;
  color:var(--cj-player-text) !important;
}

/* Les deux boutons de saut temporel, plus compacts */
.wmp-player .wmp-btn{
  min-height:50px;
}

/* Volume */
.volume-panel{
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,rgba(17,28,47,.97),rgba(26,41,64,.88)) !important;
  box-shadow:var(--cj-player-shadow) !important;
  padding:16px !important;
  margin-top:16px !important;
}

.volume-title,
.player-queue-title,
.player-search-title{
  color:var(--cj-player-blue) !important;
  text-shadow:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.06em;
  border:0 !important;
  padding:0 !important;
  margin:0 0 12px !important;
}

.volume-controls{
  gap:8px !important;
}

/* File d'attente */
.player-layout .player-queue{
  margin-top:0 !important;
  height:auto !important;
}

.player-queue-list{
  max-height:430px !important;
  padding-right:4px;
  scrollbar-color:rgba(56,189,248,.55) rgba(255,255,255,.04);
}

.queue-track,
.playlist-track{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.055) !important;
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  padding:11px !important;
  margin:8px 0 !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}

.queue-track:hover,
.playlist-track:hover{
  border-color:rgba(56,189,248,.38) !important;
  background:rgba(56,189,248,.10) !important;
}

.queue-track:active,
.playlist-track:active{
  transform:scale(.99);
}

.queue-track.current,
.playlist-track.current{
  border-color:var(--cj-player-green) !important;
  background:rgba(52,211,153,.15) !important;
}

.queue-track.selected,
.playlist-track.selected{
  border-color:var(--cj-player-purple) !important;
  background:rgba(167,139,250,.15) !important;
}

.queue-index{
  color:var(--cj-player-blue) !important;
  font-weight:900;
}

.queue-check{
  color:var(--cj-player-purple) !important;
  font-weight:900;
}

.queue-now-label{
  display:inline-flex;
  margin-right:8px;
  padding:3px 7px;
  border-radius:999px;
  background:var(--cj-player-green);
  color:#022c22 !important;
  font-size:10px;
  font-weight:950;
  text-shadow:none !important;
}

.queue-tools,
.browse-tools{
  gap:7px !important;
  margin:8px 0 12px !important;
}

.queue-tool,
.browse-tool{
  min-height:42px;
  font-size:11px !important;
}

/* Recherche, onglets et résultats */
.player-search{
  margin-top:16px !important;
}

.player-search-head{
  gap:12px !important;
  margin-bottom:12px;
}

.player-source-switch{
  gap:8px !important;
}

.player-source-switch button,
.player-search-submit,
.player-result-action{
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.07) !important;
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:800 !important;
}

.player-source-switch button.active{
  background:var(--cj-player-blue) !important;
  border-color:var(--cj-player-blue) !important;
  color:#020617 !important;
}

.player-search-input{
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.06) !important;
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  padding:12px !important;
}

.player-search-input::placeholder{
  color:var(--cj-player-muted) !important;
}

.player-result{
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
  padding:11px !important;
  margin-top:8px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
}

.player-result-meta,
.player-search-empty{
  color:var(--cj-player-muted) !important;
  text-shadow:none !important;
}

/* Jellyfin : reprend exactement le même langage visuel */
.jelly-player-layout .jelly-device,
.jelly-player-layout .player-queue,
.jelly-player-layout .jelly-card{
  color:var(--cj-player-text) !important;
  text-shadow:none !important;
}

.jelly-player-layout .jelly-card{
  border:1px solid var(--cj-player-stroke) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.055) !important;
}

/* Adaptation tablette et mobile */
@media(max-width:820px){
  .player-layout,
  .jelly-player-layout{
    grid-template-columns:1fr !important;
  }

  .player-layout .player-left,
  .player-layout .player-right,
  .jelly-player-layout .jelly-player-left,
  .jelly-player-layout .jelly-player-right{
    width:100%;
  }

  .player-queue-list{
    max-height:280px !important;
  }
}

@media(max-width:520px){
  .wmp-player,
  .jelly-device,
  .player-layout .player-queue,
  .player-search,
  .volume-panel{
    border-radius:18px !important;
    padding:14px !important;
  }

  .wmp-player .player-disc{
    width:54px;
    height:54px;
    border-radius:18px !important;
  }

  .wmp-controls{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .wmp-btn,
  .volume-btn{
    min-height:58px;
    font-size:11px !important;
    padding:9px 4px !important;
  }

  .queue-tools,
  .browse-tools{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .player-search-row{
    grid-template-columns:1fr !important;
  }

  .player-search-submit{
    width:100%;
    padding:12px !important;
  }

  .player-result{
    grid-template-columns:auto minmax(0,1fr) !important;
  }

  .player-result-action{
    grid-column:span 1;
  }
}


/* =========================================================
   CHEZJEMS LOCAL — COQUE DE SITE MULTIPAGE
   ========================================================= */
:root{
  --site-bg:#f4f6fb;--surface:#fff;--surface-soft:#f7f8fc;--text:#182033;
  --muted:#667085;--line:#e4e7ec;--brand:#6d4aff;--brand-2:#ec4899;
  --shadow:0 18px 50px rgba(30,41,59,.10);--radius:22px;
}
html{height:auto!important;min-height:100%;overflow-y:auto!important;overflow-x:hidden!important;background:var(--site-bg)!important;scroll-behavior:smooth}
body{display:block!important;height:auto!important;min-height:100vh!important;overflow:visible!important;margin:0!important;background:linear-gradient(135deg,#f8f7ff 0%,#eff8ff 45%,#fff3f8 100%)!important;color:var(--text)!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;text-shadow:none!important;letter-spacing:normal!important}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.site-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:28px;min-height:76px;padding:10px clamp(16px,3vw,42px);background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,231,236,.9);box-shadow:0 8px 30px rgba(15,23,42,.06)}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);white-space:nowrap}
.site-brand img{width:48px;height:48px;border-radius:14px;object-fit:cover;box-shadow:0 8px 20px rgba(109,74,255,.2)}
.site-brand span{display:grid}.site-brand strong{font-size:19px}.site-brand small{font-size:12px;color:var(--muted);font-weight:700}
.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:12px;color:#475467;text-decoration:none;font-size:14px;font-weight:800;transition:.2s ease}
.site-nav a:hover{background:#f2f0ff;color:var(--brand);transform:translateY(-1px)}
.site-nav a.active{background:linear-gradient(135deg,var(--brand),#8b5cf6);color:#fff;box-shadow:0 8px 18px rgba(109,74,255,.25)}
.mobile-menu-button{display:none;margin-left:auto;border:0;background:#f2f0ff;color:var(--brand);border-radius:12px;padding:10px 13px;font-size:22px;font-weight:900}
.context-search{position:sticky;top:77px;z-index:900;padding:14px clamp(16px,4vw,64px);background:rgba(244,246,251,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.context-search label{display:block;max-width:900px;margin:0 auto 6px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.context-search-row{display:flex;max-width:900px;margin:auto;gap:10px}.context-search input{flex:1;min-width:0;padding:13px 16px;border:1px solid #d0d5dd;border-radius:14px;background:#fff;color:var(--text);font:inherit;box-shadow:0 4px 16px rgba(15,23,42,.05)}
.context-search button{border:0;border-radius:14px;padding:0 18px;background:var(--brand);color:#fff;font-weight:900;cursor:pointer}
.site-main{width:min(1500px,100%);box-sizing:border-box;flex:1;margin:0 auto;padding:clamp(18px,3vw,42px);overflow:visible!important;min-height:0!important}
.page-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-bottom:18px}
.page-toolbar h1{margin:0;text-align:center;font-size:clamp(24px,4vw,40px);color:var(--text);text-shadow:none!important;letter-spacing:-.03em}
.page-toolbar button,.page-toolbar a{border:1px solid var(--line);background:rgba(255,255,255,.9);color:#344054;text-decoration:none;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:0 5px 15px rgba(15,23,42,.05)}
#content{height:auto!important;min-height:0!important;overflow:visible!important;display:block!important;color:var(--text)!important;text-shadow:none!important;font-size:16px!important;letter-spacing:normal!important;line-height:1.5!important}
.message{min-height:0!important;margin:0 0 12px;color:var(--brand)!important;text-shadow:none!important;font-weight:800}
.message:empty{display:none}
.site-footer{padding:20px;text-align:center;color:var(--muted);font-size:13px}
/* Neutralisation complète de l'ancienne coque plein écran */
.legacy-shell,.screen{width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important;border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.legacy-shell:before,.screen:before,.keypad,.input-zone,.help,#navButtons,.title{display:none!important}
.banner{display:none!important}
.line.separator-hidden{display:none!important}
.menu-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px!important;margin:18px 0!important}
.menu{appearance:none;display:flex!important;align-items:center!important;gap:14px!important;width:100%;min-height:92px;padding:18px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:var(--surface)!important;color:var(--text)!important;text-align:left!important;cursor:pointer;box-shadow:var(--shadow)!important;transition:.2s ease}
.menu:hover{transform:translateY(-3px);border-color:#c4b5fd!important}.menu .num{font-size:30px!important}.menu .label{font-weight:900!important;color:var(--text)!important;text-shadow:none!important}
/* Toutes les cartes deviennent compatibles avec la hauteur naturelle */
.dash-hero,.dash-section,.wmp-player,.volume-panel,.jelly-card,.action-panel,.player-search-panel{height:auto!important;max-height:none!important;overflow:visible!important}
.tile-grid,.app-grid,.quick-grid,.player-shortcuts{height:auto!important;overflow:visible!important}
@media(max-width:1050px){
  .mobile-menu-button{display:block}.site-header{flex-wrap:wrap;gap:10px}.site-nav{display:none;width:100%;order:3;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:8px}.site-nav.open{display:grid}.site-nav a{justify-content:flex-start}
}
@media(max-width:650px){
  .site-header{min-height:64px;padding:8px 12px}.site-brand img{width:42px;height:42px}.site-brand small{display:none}.context-search{top:65px;padding:10px 12px}.context-search-row{flex-direction:column}.context-search button{min-height:44px}.site-main{padding:14px 10px 28px}.page-toolbar{grid-template-columns:auto 1fr}.page-toolbar a{display:none}.page-toolbar h1{text-align:right;font-size:24px}.page-toolbar button{padding:9px 11px}.menu-grid{grid-template-columns:1fr!important}.site-nav{grid-template-columns:1fr 1fr}.site-nav a{font-size:13px;padding:9px}.dash-hero{border-radius:18px!important}.app-grid,.quick-grid,.tile-grid{grid-template-columns:1fr!important}}
@media(prefers-color-scheme:dark){
  :root{--site-bg:#0d1120;--surface:#161b2d;--surface-soft:#111627;--text:#f4f5f7;--muted:#a8b0c2;--line:#2b3248;--shadow:0 18px 50px rgba(0,0,0,.25)}
  body{background:linear-gradient(135deg,#0b1020,#14112a 50%,#21101d)!important}.site-header{background:rgba(16,21,37,.92)}.site-nav a{color:#c5cada}.context-search{background:rgba(13,17,32,.95)}.context-search input,.page-toolbar button,.page-toolbar a{background:#161b2d;color:#f4f5f7;border-color:var(--line)}
}

/* =========================================================
   CHEZJEMS LOCAL — IDENTITÉ VISUELLE EXACTE DU PORTAIL
   Référence : index ChezJems sombre bleu / violet
   ========================================================= */
:root{
  --site-bg:#06101c;
  --surface:#0b192d;
  --surface-soft:#0d2038;
  --text:#f8fbff;
  --muted:#aab7cc;
  --line:rgba(255,255,255,.12);
  --brand:#61b7ff;
  --brand-2:#c76cff;
  --cyan:#4be5d0;
  --shadow:0 22px 60px rgba(0,0,0,.34);
  --radius:25px;
}
html{background:#06101c!important;color-scheme:dark}
body{
  color:var(--text)!important;
  background:
    radial-gradient(circle at 15% 8%,rgba(50,118,255,.23),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(187,53,255,.18),transparent 29%),
    radial-gradient(circle at 50% 100%,rgba(62,72,210,.15),transparent 36%),
    linear-gradient(150deg,#030b17 0%,#06101c 48%,#0a1730 100%)!important;
  background-attachment:fixed!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(125,164,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(208,101,255,.75) 0 1px,transparent 1.5px);
  background-size:120px 120px,170px 170px;
  background-position:0 0,40px 75px;opacity:.24;
}
body::after{
  content:"";position:fixed;left:-8%;right:-8%;top:150px;height:250px;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 45%,rgba(0,133,255,.23),transparent 42%),
    radial-gradient(ellipse at 82% 45%,rgba(215,43,255,.21),transparent 42%);
  filter:blur(22px);
}
.site-shell{position:relative;z-index:1}
.site-header{
  background:rgba(3,11,23,.78)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(20px) saturate(130%);
}
.site-brand{color:#f8fbff!important}
.site-brand img{
  border-radius:50%!important;padding:2px;
  background:linear-gradient(135deg,#61b7ff,#c76cff);
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 24px rgba(80,168,255,.35),0 0 42px rgba(187,76,255,.18)!important;
}
.site-brand strong{
  color:transparent!important;background:linear-gradient(90deg,#40b8ff,#7fa6ff 48%,#dd69ed);
  -webkit-background-clip:text;background-clip:text;
}
.site-brand small{color:#aab7cc!important}
.site-nav a{color:#d7deeb!important;border:1px solid transparent}
.site-nav a:hover{
  color:#fff!important;background:rgba(97,183,255,.10)!important;
  border-color:rgba(97,183,255,.28)!important;
  box-shadow:0 0 22px rgba(97,183,255,.10);
}
.site-nav a.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(38,132,222,.72),rgba(141,66,210,.72))!important;
  border-color:rgba(178,151,255,.55)!important;
  box-shadow:0 0 22px rgba(97,183,255,.20),0 0 30px rgba(199,108,255,.12)!important;
}
.mobile-menu-button{
  color:#e6edff!important;background:rgba(15,32,58,.88)!important;
  border:1px solid rgba(97,183,255,.30)!important;
}
.context-search{
  background:rgba(5,14,28,.88)!important;border-bottom-color:rgba(255,255,255,.10)!important;
}
.context-search label{color:#aab7cc!important}
.context-search input{
  color:#f8fbff!important;background:rgba(10,25,46,.92)!important;
  border-color:rgba(97,183,255,.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.22)!important;
}
.context-search input::placeholder{color:#8492aa}
.context-search button{
  background:linear-gradient(135deg,#238dd5,#8a4fd2)!important;
  border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 0 20px rgba(97,183,255,.18);
}
.site-main{position:relative;z-index:1}
.page-toolbar{
  padding:24px clamp(18px,3vw,34px);border:1px solid rgba(116,96,255,.34);
  border-left-color:rgba(67,161,255,.68);border-right-color:rgba(205,82,255,.48);
  border-radius:25px;background:linear-gradient(125deg,rgba(8,28,57,.91),rgba(24,10,48,.84));
  box-shadow:0 22px 62px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);
}
.page-toolbar h1{
  color:transparent!important;background:linear-gradient(90deg,#40b8ff 10%,#7fa6ff 48%,#dd69ed 90%);
  -webkit-background-clip:text;background-clip:text;font-size:clamp(30px,5vw,52px)!important;
  line-height:1;letter-spacing:-.055em!important;
}
.page-toolbar button,.page-toolbar a{
  color:#e9f2ff!important;background:rgba(0,0,0,.16)!important;
  border-color:rgba(97,183,255,.34)!important;box-shadow:none!important;
}
.page-toolbar button:hover,.page-toolbar a:hover{border-color:#61b7ff!important;box-shadow:0 0 18px rgba(97,183,255,.16)!important}
.message{color:#61b7ff!important}
.site-footer{color:#aab7cc!important}

/* Cartes et boutons fonctionnels : même langage que les cartes du portail */
.menu,.tile,.dash-tile,.app-card,.quick-card,.jelly-card,.action-panel,.player-search-panel,.volume-panel,.wmp-player,
.player-layout .player-left,.player-layout .player-right,.jelly-player-layout .jelly-player-left,.jelly-player-layout .jelly-player-right,
.section-card,.panel,.card{
  border:1px solid rgba(97,183,255,.26)!important;
  border-radius:25px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(97,183,255,.10),transparent 42%),
    linear-gradient(155deg,rgba(15,32,58,.92),rgba(6,15,30,.95))!important;
  color:#f8fbff!important;
  box-shadow:0 22px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.menu:nth-child(3n+2),.tile:nth-child(3n+2),.dash-tile:nth-child(3n+2),.app-card:nth-child(3n+2),.quick-card:nth-child(3n+2){
  border-color:rgba(199,108,255,.35)!important;
  background:radial-gradient(circle at 50% 0%,rgba(199,108,255,.12),transparent 42%),linear-gradient(155deg,rgba(22,25,57,.94),rgba(11,9,32,.96))!important;
}
.menu:nth-child(3n+3),.tile:nth-child(3n+3),.dash-tile:nth-child(3n+3),.app-card:nth-child(3n+3),.quick-card:nth-child(3n+3){
  border-color:rgba(75,229,208,.32)!important;
  background:radial-gradient(circle at 50% 0%,rgba(75,229,208,.10),transparent 42%),linear-gradient(155deg,rgba(10,35,48,.94),rgba(5,18,29,.96))!important;
}
.menu:hover,.tile:hover,.dash-tile:hover,.app-card:hover,.quick-card:hover,.jelly-card:hover{
  transform:translateY(-6px)!important;border-color:rgba(133,190,255,.72)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 28px rgba(97,183,255,.16)!important;
}
.menu .label,.tile-title,.card-title,.dash-title,.section-title{color:#f8fbff!important;text-shadow:none!important}
.menu .num,.tile-icon,.dash-icon,.app-icon{filter:drop-shadow(0 0 12px rgba(97,183,255,.24))}

/* Contrôles et champs */
button,input,select,textarea{font-family:inherit}
#content input,#content select,#content textarea{
  color:#f8fbff!important;background:rgba(3,12,25,.72)!important;border-color:rgba(255,255,255,.16)!important;
}
#content button,.wmp-btn,.volume-btn,.player-search-submit,.player-result-action{
  color:#f8fbff!important;border-color:rgba(97,183,255,.34)!important;
  background:linear-gradient(145deg,rgba(18,49,82,.96),rgba(14,21,48,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.22)!important;
}
#content button:hover,.wmp-btn:hover,.volume-btn:hover,.player-search-submit:hover,.player-result-action:hover{
  border-color:#61b7ff!important;box-shadow:0 0 22px rgba(97,183,255,.18)!important;
}
.wmp-btn.primary,.player-search-submit,.is-playing,.active-action{
  background:linear-gradient(135deg,#167fc7,#8a47ce)!important;
}

/* Texte secondaire */
#content,.site-main p,.site-main small,.meta,.subtitle,.muted,.player-meta,.queue-meta{color:#d8dfeb}
.site-main small,.meta,.subtitle,.muted,.player-meta,.queue-meta{color:#aab7cc!important}

@media(max-width:650px){
  .page-toolbar{padding:18px 14px;border-radius:20px}
  .page-toolbar h1{font-size:clamp(27px,10vw,38px)!important}
  .site-header{background:rgba(3,11,23,.92)!important}
}

/* Le site de référence est toujours sombre : pas de bascule automatique claire */
@media(prefers-color-scheme:light){
  :root{--site-bg:#06101c;--surface:#0b192d;--surface-soft:#0d2038;--text:#f8fbff;--muted:#aab7cc;--line:rgba(255,255,255,.12)}
}

/* ========================================================================
   CHEZJEMS LOCAL — REFONTE SITE 2026
   Surcouche purement graphique. Aucun identifiant ni comportement modifié.
   ======================================================================== */

:root {
  --cj-bg: #030b17;
  --cj-bg-2: #071426;
  --cj-panel: rgba(10, 25, 48, .88);
  --cj-panel-strong: rgba(8, 20, 40, .96);
  --cj-line: rgba(255, 255, 255, .11);
  --cj-text: #f7f9ff;
  --cj-muted: #aab7cc;
  --cj-blue: #4dbdff;
  --cj-violet: #aa6bff;
  --cj-pink: #e869ee;
  --cj-cyan: #4be5d0;
  --cj-radius: 25px;
  --cj-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--cj-bg);
  overflow-y: auto !important;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--cj-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(50, 118, 255, .23), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(187, 53, 255, .18), transparent 29%),
    radial-gradient(circle at 50% 100%, rgba(62, 72, 210, .15), transparent 36%),
    linear-gradient(150deg, #030b17 0%, #06101c 48%, #0a1730 100%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(125, 164, 255, .9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(208, 101, 255, .75) 0 1px, transparent 1.5px);
  background-size: 120px 120px, 170px 170px;
  background-position: 0 0, 40px 75px;
  opacity: .2;
}

body::after {
  content: "";
  position: fixed;
  left: -8%;
  right: -8%;
  top: 120px;
  height: 280px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 45%, rgba(0, 133, 255, .22), transparent 42%),
    radial-gradient(ellipse at 82% 45%, rgba(215, 43, 255, .2), transparent 42%);
  filter: blur(24px);
}

.site-shell {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

/* En-tête de vrai site, volontairement plus léger que le contenu */
.site-header {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: auto !important;
  margin: 0;
  padding: 42px 0 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
  color: var(--cj-text) !important;
}

.site-brand img {
  width: 100px !important;
  height: 100px !important;
  padding: 4px;
  border-radius: 50% !important;
  object-fit: cover;
  background: linear-gradient(135deg, var(--cj-blue), var(--cj-violet));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 30px rgba(80,168,255,.42),
    0 0 56px rgba(187,76,255,.22) !important;
}

.site-brand span {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.site-brand strong {
  font-size: clamp(2rem, 5vw, 3.15rem) !important;
  line-height: 1;
  letter-spacing: -.055em;
  color: transparent !important;
  background: linear-gradient(90deg, #40b8ff 10%, #7fa6ff 48%, #dd69ed 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.site-brand small {
  color: #dfe6f5 !important;
  font-size: .98rem !important;
  font-weight: 500;
  letter-spacing: .02em;
}

.site-nav {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100%;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  background: rgba(5, 15, 31, .66) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px);
  overflow: visible !important;
}

.site-nav a {
  min-height: 42px !important;
  padding: 10px 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #cdd6e8 !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: .22s ease;
}

.site-nav a:hover {
  color: #fff !important;
  border-color: rgba(97,183,255,.3) !important;
  background: rgba(97,183,255,.09) !important;
  transform: translateY(-1px);
}

.site-nav a.active {
  color: #fff !important;
  border-color: rgba(138,146,255,.58) !important;
  background: linear-gradient(135deg, rgba(54,130,255,.88), rgba(142,78,225,.88)) !important;
  box-shadow: 0 0 22px rgba(102,105,255,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.mobile-menu-button { display: none !important; }

.context-search {
  position: relative !important;
  inset: auto !important;
  width: min(760px, 100%);
  margin: 0 auto 24px;
  padding: 18px !important;
  border: 1px solid rgba(97,183,255,.28) !important;
  border-radius: 22px !important;
  background: rgba(7,21,42,.9) !important;
  box-shadow: var(--cj-shadow);
}

.context-search label { color: #f5f8ff !important; }
.context-search input {
  color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(0,0,0,.23) !important;
}
.context-search button {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #268fff, #9158df) !important;
}

.site-main {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1;
  padding: 0 0 42px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.page-toolbar {
  width: min(1080px, 100%);
  margin: 0 auto 20px !important;
  padding: 0 4px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-toolbar h1 {
  margin: 0;
  color: #eef3ff !important;
  font-size: .85rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  opacity: .64;
}

.page-toolbar button,
.page-toolbar a {
  width: max-content;
  min-height: 38px;
  padding: 9px 14px !important;
  color: #dce6f7 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 999px !important;
  background: rgba(5,15,31,.58) !important;
  box-shadow: none !important;
}
.page-toolbar a { justify-self: end; }
.page-toolbar button:hover,
.page-toolbar a:hover { border-color: rgba(97,183,255,.4) !important; color:#fff !important; }

#content {
  width: min(1120px, 100%);
  min-height: 0 !important;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--cj-text) !important;
}

.message {
  width: min(760px, 100%);
  min-height: 0 !important;
  margin: 0 auto 14px !important;
  color: var(--cj-cyan) !important;
  text-align: center;
}
.message:empty { display: none; }

/* Héros de page : beaucoup d'espace, hiérarchie et profondeur */
.dash-hero,
.small-hero,
.player-hero {
  position: relative;
  min-height: 220px !important;
  margin: 0 0 34px !important;
  padding: clamp(30px, 6vw, 56px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  overflow: hidden;
  border: 1px solid rgba(115,126,255,.42) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(36,151,255,.24), transparent 35%),
    radial-gradient(circle at 88% 25%, rgba(208,87,255,.2), transparent 38%),
    linear-gradient(125deg, rgba(8,28,57,.95), rgba(24,10,48,.91)) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.dash-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -130px;
  bottom: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(205,87,255,.24), transparent 68%);
  pointer-events: none;
}

.dash-kicker,
.section-kicker {
  color: var(--cj-cyan) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.dash-title,
.small-hero .dash-title {
  margin: 7px 0 0 !important;
  color: transparent !important;
  background: linear-gradient(90deg, #43baff 0%, #8aa0ff 48%, #dd69ed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(2.8rem, 7vw, 5.3rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-shadow: none !important;
}

.dash-subtitle {
  max-width: 680px;
  margin-top: 16px !important;
  color: #d7dfed !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

.dash-clock {
  color: rgba(255,255,255,.9) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -.05em;
}

/* Sections éditoriales */
.dash-section { margin: 0 0 44px !important; }
.section-head {
  margin: 0 0 20px !important;
  padding: 0 6px !important;
}
.section-head h2 {
  margin: 5px 0 0 !important;
  color: #f7f9ff !important;
  font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
  letter-spacing: -.035em;
}

/* Cartes principales — même langage que chezjems.fr */
.app-grid,
.tile-grid,
.menu-grid,
.quick-grid,
.player-shortcuts {
  gap: 22px !important;
}

.app-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.app-card,
.tile,
.quick-card,
.menu,
.status-strip button {
  position: relative;
  overflow: hidden;
  color: var(--cj-text) !important;
  border: 1px solid color-mix(in srgb, var(--brand, #61b7ff) 55%, rgba(255,255,255,.08)) !important;
  border-radius: var(--cj-radius) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand, #61b7ff) 14%, transparent), transparent 44%),
    linear-gradient(155deg, rgba(15,32,58,.92), rgba(6,15,30,.96)) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease !important;
}

.app-card {
  min-height: 275px !important;
  padding: 32px 25px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
}

.app-card:hover,
.tile:hover,
.quick-card:hover,
.menu:hover,
.status-strip button:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 30px 78px rgba(0,0,0,.4), 0 0 28px color-mix(in srgb, var(--brand, #61b7ff) 22%, transparent) !important;
}

.app-icon {
  width: 92px !important;
  height: 92px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 5px !important;
  font-size: 3.8rem !important;
  line-height: 1 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand, #61b7ff) 18%, transparent), transparent 67%) !important;
  box-shadow: none !important;
}

.app-title {
  color: var(--brand, var(--cj-blue)) !important;
  font-size: 1.38rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
}

.app-sub {
  max-width: 230px;
  color: #d6deec !important;
  font-size: .96rem !important;
  line-height: 1.6 !important;
}

/* Affectation des couleurs sans toucher au HTML */
.accent-home, .accent-ha { --brand:#4be5d0; }
.accent-music { --brand:#4cc6ff; }
.accent-video { --brand:#cf62ff; }
.accent-light { --brand:#ffd45a; }
.accent-plug { --brand:#ff944d; }
.accent-security { --brand:#63d9c8; }
.accent-camera { --brand:#ff709d; }
.accent-weather { --brand:#5ddfd3; }
.accent-energy { --brand:#ffc447; }
.accent-tag { --brand:#ffbc68; }
.accent-routine { --brand:#b783ff; }

.quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
.quick-card {
  min-height: 130px !important;
  padding: 23px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  --brand: #61b7ff;
}
.quick-card b { color:#fff !important; font-size:1.06rem !important; }
.quick-card span { margin-top:7px !important; color:var(--cj-muted) !important; }

.tile-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.tile {
  min-height: 190px !important;
  padding: 28px 22px !important;
  text-align: center !important;
}
.tile .ico { font-size: 3.2rem !important; }
.tile .t { margin-top: 12px !important; color:#fff !important; font-size:1.2rem !important; }
.tile .s { margin-top:8px !important; color:var(--cj-muted) !important; line-height:1.5 !important; }

.menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.menu {
  min-height: 124px !important;
  padding: 22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}
.menu .num { font-size:2.3rem !important; }
.menu .label { color:#eef3ff !important; text-align:center !important; }

.status-strip {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
  border:0 !important;
  background:transparent !important;
}
.status-strip button {
  min-height: 120px !important;
  padding: 20px !important;
  --brand:#6f9dff;
}
.status-strip button span { font-size:2rem !important; }
.status-strip button b { color:#fff !important; }
.status-strip button small { color:var(--cj-muted) !important; }

/* Lecteurs : fonction inchangée, habillage cohérent */
.player-shell,
.player-card,
.now-playing,
.volume-panel,
.queue-panel,
.music-panel,
.jelly-player,
.browser-player,
.audio-player,
.video-player {
  color: var(--cj-text) !important;
  border-color: rgba(104,146,255,.28) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(42,157,255,.14), transparent 35%),
    linear-gradient(155deg, rgba(13,29,55,.96), rgba(5,14,28,.97)) !important;
  box-shadow: var(--cj-shadow) !important;
}

button,
.btn,
.control-btn,
.player-controls button,
.hero-audio-controls button,
.volume-btn {
  color: #fff !important;
}

.hero-audio-controls button,
.player-controls button,
.control-btn,
.volume-btn {
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(2,11,24,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.hero-audio-controls button:hover,
.player-controls button:hover,
.control-btn:hover,
.volume-btn:hover {
  border-color: rgba(97,183,255,.5) !important;
  background: rgba(34,106,184,.25) !important;
}

input, select, textarea {
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.24) !important;
}

.site-footer {
  margin-top: auto !important;
  padding: 18px 0 42px !important;
  color: var(--cj-muted) !important;
  text-align: center;
  border:0 !important;
  background:transparent !important;
}

/* Les vieux séparateurs texte ne doivent jamais réapparaître visuellement */
.separator-hidden { display:none !important; }

@media (max-width: 900px) {
  .site-shell { width:min(100% - 22px,1240px); }
  .site-header { padding-top:30px !important; }
  .site-nav { border-radius:24px !important; }
  .site-nav a { flex:1 1 145px; }
  .app-grid, .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .status-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dash-hero { min-height:200px !important; }
}

@media (max-width: 620px) {
  .site-shell { width:min(100% - 16px,1240px); }
  .site-header { gap:18px !important; padding:24px 0 18px !important; }
  .site-brand img { width:82px !important; height:82px !important; }
  .site-brand strong { font-size:2.15rem !important; }

  .mobile-menu-button {
    display: inline-flex !important;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:50% !important;
    background:rgba(5,15,31,.78) !important;
  }

  .site-nav {
    display:none !important;
    width:100% !important;
    padding:10px !important;
    border-radius:24px !important;
  }
  .site-nav.open { display:flex !important; }
  .site-nav a { flex:1 1 calc(50% - 8px); }

  .page-toolbar { grid-template-columns:auto 1fr auto; }
  .page-toolbar h1 { font-size:.68rem !important; letter-spacing:.08em !important; }
  .page-toolbar button, .page-toolbar a { padding:8px 10px !important; font-size:.78rem !important; }

  .dash-hero,
  .small-hero,
  .player-hero {
    min-height:0 !important;
    padding:30px 22px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    border-radius:25px !important;
  }
  .dash-title, .small-hero .dash-title { font-size:clamp(2.5rem,14vw,4rem) !important; }
  .dash-clock { align-self:flex-end; }

  .app-grid,
  .tile-grid,
  .quick-grid,
  .menu-grid,
  .status-strip { grid-template-columns:1fr !important; }

  .app-card { min-height:260px !important; }
  .tile { min-height:175px !important; }
  .quick-card { min-height:115px !important; }
  .status-strip button { min-height:105px !important; }

  .context-search-row { flex-direction:column !important; }
  .context-search-row button { width:100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}

/* ======================================================================
   CORRECTIF FINAL — TUILES SOMBRES HARMONISÉES SUR TOUT LE SITE
   Conserve intégralement le HTML, le JavaScript, les IDs et les API.
   ====================================================================== */

:root{
  --tile-bg-a: rgba(13,31,58,.97);
  --tile-bg-b: rgba(5,14,29,.98);
  --tile-text: #f8fbff;
  --tile-muted: #b8c7df;
  --tile-line: rgba(255,255,255,.10);
  --tile-shadow: 0 20px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

/* Toutes les familles de cartes/tuiles dynamiques */
.app-card,
.quick-card,
.menu,
.tile,
.action-tile,
.info-tile,
.jelly-card,
.dash-tile,
.energy-card,
.energy-tile,
.device-card,
.tag-card,
.routine-card,
.camera-card,
.sensor-card,
.entity-card,
.stat-card,
.card,
.panel,
.section-card,
.action-panel,
.player-search-panel,
.volume-panel,
.queue-panel,
.music-panel,
.now-playing,
.player-card,
.player-shell,
.wmp-player,
.queue-track,
.browse-item,
.media-card,
.library-card,
.result-card,
.status-card,
.home-card,
.service-card {
  color: var(--tile-text) !important;
  border-color: color-mix(in srgb, var(--brand, #61b7ff) 58%, rgba(255,255,255,.08)) !important;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand, #61b7ff) 13%, transparent), transparent 40%),
    linear-gradient(155deg, var(--tile-bg-a), var(--tile-bg-b)) !important;
  box-shadow: var(--tile-shadow) !important;
  text-shadow: none !important;
}

/* Supprime toute surface blanche/grise héritée */
.app-card::before,
.quick-card::before,
.menu::before,
.tile::before,
.action-tile::before,
.info-tile::before,
.jelly-card::before,
.dash-tile::before,
.energy-card::before,
.device-card::before,
.tag-card::before {
  opacity: .95;
}

/* Titres : contraste maximal */
.app-title,
.quick-title,
.menu .label,
.tile .t,
.tile-title,
.action-title,
.info-title,
.jelly-card-title,
.card-title,
.dash-title-small,
.energy-title,
.device-title,
.tag-title,
.routine-title,
.camera-title,
.sensor-title,
.entity-title,
.stat-title,
.card h2,
.card h3,
.panel h2,
.panel h3,
.section-card h2,
.section-card h3 {
  color: var(--tile-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Sous-titres et valeurs secondaires */
.app-sub,
.quick-sub,
.tile .s,
.action-data,
.info-data,
.jelly-card-meta,
.energy-value,
.energy-meta,
.device-meta,
.tag-meta,
.routine-meta,
.camera-meta,
.sensor-meta,
.entity-meta,
.stat-meta,
.card p,
.panel p,
.section-card p,
.card small,
.panel small,
.section-card small {
  color: var(--tile-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Valeurs importantes (énergie, température, états) */
.action-data strong,
.info-data strong,
.energy-value strong,
.energy-card strong,
.device-card strong,
.sensor-card strong,
.stat-card strong,
.card .value,
.card .state,
.card .current,
.card .power,
.card .consumption {
  color: #ffffff !important;
}

/* Icônes : fond sombre coloré, jamais pastel blanc */
.app-icon,
.menu .num,
.tile .ico,
.action-tile .ico,
.info-tile .ico,
.dash-icon,
.energy-icon,
.device-icon,
.tag-icon,
.routine-icon,
.camera-icon,
.sensor-icon,
.entity-icon,
.stat-icon,
.card .icon,
.card .ico {
  color: var(--brand, #61b7ff) !important;
  background: color-mix(in srgb, var(--brand, #61b7ff) 14%, rgba(5,15,31,.88)) !important;
  border: 1px solid color-mix(in srgb, var(--brand, #61b7ff) 38%, rgba(255,255,255,.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 22px color-mix(in srgb, var(--brand, #61b7ff) 12%, transparent) !important;
  text-shadow: none !important;
}

/* Les emojis restent lisibles et colorés */
.tile .ico,
.menu .num,
.action-tile .ico,
.info-tile .ico,
.card .icon,
.card .ico {
  filter: saturate(1.05) drop-shadow(0 2px 5px rgba(0,0,0,.28));
}

/* Survol cohérent, sans flash blanc */
.app-card:hover,
.quick-card:hover,
.menu:hover,
.tile:hover,
.action-tile:hover,
.info-tile:hover,
.jelly-card:hover,
.dash-tile:hover,
.energy-card:hover,
.energy-tile:hover,
.device-card:hover,
.tag-card:hover,
.routine-card:hover,
.camera-card:hover,
.sensor-card:hover,
.entity-card:hover,
.stat-card:hover,
.card:hover {
  color: var(--tile-text) !important;
  border-color: color-mix(in srgb, var(--brand, #61b7ff) 82%, white 8%) !important;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand, #61b7ff) 20%, transparent), transparent 42%),
    linear-gradient(155deg, rgba(18,40,72,.98), rgba(7,17,34,.99)) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 0 28px color-mix(in srgb, var(--brand, #61b7ff) 20%, transparent) !important;
}

/* Clic : reste sombre */
.app-card:active,
.quick-card:active,
.menu:active,
.tile:active,
.action-tile:active,
.info-tile:active,
.jelly-card:active,
.dash-tile:active,
.energy-card:active,
.energy-tile:active,
.device-card:active,
.tag-card:active,
.routine-card:active,
.camera-card:active,
.sensor-card:active,
.entity-card:active,
.stat-card:active,
.card:active {
  color: var(--tile-text) !important;
  background: linear-gradient(155deg, rgba(20,43,76,.99), rgba(8,18,36,.99)) !important;
}

/* Boutons inclus dans les cartes */
.card button,
.tile button,
.action-tile button,
.info-tile button,
.energy-card button,
.device-card button,
.tag-card button,
.panel button,
.section-card button {
  color: #f8fbff !important;
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(3,12,26,.64) !important;
}
.card button:hover,
.tile button:hover,
.action-tile button:hover,
.info-tile button:hover,
.energy-card button:hover,
.device-card button:hover,
.tag-card button:hover,
.panel button:hover,
.section-card button:hover {
  background: rgba(45,109,190,.28) !important;
  border-color: rgba(97,183,255,.52) !important;
}

/* Champs dans les panneaux sombres */
.card input,
.card select,
.card textarea,
.panel input,
.panel select,
.panel textarea,
.section-card input,
.section-card select,
.section-card textarea {
  color: #f8fbff !important;
  background: rgba(0,0,0,.30) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Liens contenus dans les cartes */
.app-card a,
.quick-card a,
.menu a,
.tile a,
.action-tile a,
.info-tile a,
.jelly-card a,
.card a,
.panel a,
.section-card a {
  color: inherit !important;
}

/* Harmonisation spécifique des cartes d'énergie créées dynamiquement */
.action-grid,
.info-grid,
.energy-grid,
.stats-grid,
.device-grid,
.tag-grid,
.routine-grid {
  gap: 18px !important;
}

.action-tile,
.info-tile,
.energy-card,
.energy-tile,
.device-card,
.tag-card,
.routine-card,
.sensor-card,
.stat-card {
  min-height: 118px;
  border-radius: 23px !important;
}

/* Accessibilité clavier */
.app-card:focus-visible,
.quick-card:focus-visible,
.menu:focus-visible,
.tile:focus-visible,
.action-tile:focus-visible,
.info-tile:focus-visible,
.jelly-card:focus-visible,
.card:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(97,183,255,.78) !important;
  outline-offset: 3px !important;
}

@media (max-width: 620px){
  .action-tile,
  .info-tile,
  .energy-card,
  .energy-tile,
  .device-card,
  .tag-card,
  .routine-card,
  .sensor-card,
  .stat-card {
    min-height: 104px;
  }
}

/* ======================================================================
   CORRECTIF MINIMAL — LECTEUR DE L’ACCUEIL
   Ne modifie ni la structure générale, ni les commandes Home Assistant.
   ====================================================================== */

.player-hero,
.player-hero-main,
.player-hero .hero-now-left,
.player-hero .now-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.player-hero .hero-now-title {
  max-width: 100% !important;
  color: #f8fbff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.25rem, 4vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.player-hero .hero-now-progress,
.player-hero .hero-now-vu {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.player-hero .hero-audio-controls {
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.player-hero .hero-audio-controls > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 620px) {
  .player-hero .hero-now-title {
    font-size: clamp(1.15rem, 5.5vw, 1.65rem) !important;
  }

  .player-hero .hero-audio-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .player-hero .hero-audio-controls > * {
    min-height: 48px !important;
    padding: 10px 6px !important;
  }
}

@media (max-width: 390px) {
  .player-hero .hero-now-title {
    font-size: 1.1rem !important;
  }
}


/* Raccourci intégré vers le lecteur chaîne depuis la tuile d’accueil */
.player-hero .hero-audio-controls .hero-player-link {
  grid-column: 1 / -1 !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(98,86,255,.22), rgba(42,187,255,.12)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
}

.player-hero .hero-audio-controls .hero-player-link:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, rgba(98,86,255,.32), rgba(42,187,255,.18)) !important;
}

.player-hero .hero-audio-controls .hero-player-link:active {
  transform: translateY(0) scale(.99) !important;
}

/* Correctif recherche YouTube : titres visibles sur desktop + pagination */
.player-result-info{
  min-width:0 !important;
  overflow:hidden !important;
}
.player-result-title{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  color:var(--cj-player-text,#f8fbff) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.player-search-pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
}
.player-search-pagination .player-result-action{
  min-width:190px;
}
@media (min-width:901px){
  .player-result{
    grid-template-columns:auto minmax(180px,1fr) auto auto auto !important;
  }
}
@media (max-width:900px){
  .player-search-pagination .player-result-action{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   CORRECTIF YOUTUBE MOBILE / DESKTOP — 2026-07-22
   Même affichage des titres et de la pagination sur tous supports.
   ========================================================= */
.player-search-results{
  overflow-x:hidden !important;
}
.player-result{
  min-width:0 !important;
}
.player-result-info{
  display:block !important;
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}
.player-result-title{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  color:inherit !important;
  opacity:1 !important;
  visibility:visible !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.3 !important;
  word-break:break-word !important;
}
.player-search-pagination{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  clear:both !important;
}

@media (max-width:900px){
  .player-search-results{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  .player-result{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:start !important;
  }
  .player-result-icon{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .player-result-info{
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .player-result > .player-result-action{
    grid-column:1 / -1 !important;
    width:100% !important;
    display:block !important;
  }
  .player-search-pagination{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:16px !important;
  }
  .player-search-pagination .player-result-action{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
}

/* =========================================================
   SURVEILLANCE SYSTÈME — même identité graphique ChezJems
   ========================================================= */
.sys-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:clamp(18px,3vw,30px);margin-bottom:18px;border:1px solid rgba(116,100,255,.24);border-radius:24px;background:radial-gradient(circle at 88% 18%,rgba(42,187,255,.20),transparent 34%),linear-gradient(135deg,rgba(98,86,255,.22),rgba(18,23,48,.96));box-shadow:0 18px 45px rgba(12,16,36,.22)}
.sys-hero h2{margin:4px 0 6px;font-size:clamp(24px,4vw,38px)}.sys-hero p{margin:0;opacity:.72}.sys-live{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(20,211,151,.12);border:1px solid rgba(20,211,151,.28);font-size:12px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.sys-live i{width:9px;height:9px;border-radius:50%;background:#23d69b;box-shadow:0 0 0 5px rgba(35,214,155,.13);animation:sysPulse 1.5s infinite}@keyframes sysPulse{50%{box-shadow:0 0 0 9px rgba(35,214,155,0)}}
.sys-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.sys-summary article{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:16px;border-radius:19px;background:var(--panel,rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.09)}.sys-summary article>span{grid-row:1/3;font-size:28px}.sys-summary small{opacity:.63}.sys-summary b{font-size:16px}.sys-panel{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(14,20,43,.52)}
.sys-refresh{border:1px solid rgba(116,100,255,.28);border-radius:12px;padding:9px 12px;background:rgba(116,100,255,.13);color:inherit;font:inherit;font-weight:800;cursor:pointer}.sys-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.sys-metric{padding:15px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.sys-metric-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:11px}.sys-metric small{display:block;margin-top:9px;opacity:.65}.sys-progress{height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.09)}.sys-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6e5cff,#29bafa)}.warning .sys-progress i,.sys-metric.warning .sys-progress i,.sys-disk.warning .sys-progress i{background:linear-gradient(90deg,#ffb73d,#ff7b39)}.danger .sys-progress i,.sys-metric.danger .sys-progress i,.sys-disk.danger .sys-progress i{background:linear-gradient(90deg,#ff637d,#ff3e58)}
.sys-disks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sys-disk{padding:15px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.sys-disk-main{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.sys-disk-main>div{display:flex;flex-direction:column}.sys-disk-main small,.sys-disk-foot{opacity:.62}.sys-disk-icon{font-size:22px;margin-bottom:7px}.sys-disk-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px}
.sys-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sys-service{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075)}.sys-service i{width:10px;height:10px;border-radius:50%;background:#ff536f;box-shadow:0 0 0 4px rgba(255,83,111,.11)}.sys-service.good i{background:#24d39b;box-shadow:0 0 0 4px rgba(36,211,155,.11)}.sys-service.warning i{background:#ffb441}.sys-service>div{display:flex;flex-direction:column;min-width:0}.sys-service small{opacity:.58;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sys-service>span{text-transform:uppercase;font-size:11px;font-weight:900;opacity:.72}.sys-counter{padding:7px 10px;border-radius:999px;background:rgba(36,211,155,.1);font-size:12px;font-weight:800}
.sys-maintenance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sys-maintenance article{padding:13px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);display:flex;flex-direction:column;gap:5px}.sys-maintenance small{opacity:.6}.sys-log{margin-top:13px;border-radius:15px;background:rgba(5,9,24,.46);border:1px solid rgba(255,255,255,.07)}.sys-log summary{padding:13px 15px;cursor:pointer;font-weight:800}.sys-log pre{margin:0;padding:0 15px 15px;white-space:pre-wrap;overflow:auto;max-height:300px;font-size:12px;line-height:1.5;opacity:.78}.sys-error{text-align:center;padding:45px 20px;border-radius:22px;background:rgba(255,76,105,.08);border:1px solid rgba(255,76,105,.2)}.sys-error>span{font-size:42px}.sys-error button{margin-top:16px;padding:10px 15px;border:0;border-radius:12px;font:inherit;font-weight:800;cursor:pointer}.sys-loading{display:flex;justify-content:center;gap:8px;padding:50px}.sys-loading span{width:12px;height:12px;border-radius:50%;background:#7364ff;animation:sysLoad .9s infinite alternate}.sys-loading span:nth-child(2){animation-delay:.15s}.sys-loading span:nth-child(3){animation-delay:.3s}@keyframes sysLoad{to{transform:translateY(-9px);opacity:.45}}.good{color:inherit}.sys-summary .good,.sys-maintenance .good{border-color:rgba(36,211,155,.25)}.sys-summary .danger{border-color:rgba(255,83,111,.3)}
@media(max-width:900px){.sys-summary,.sys-maintenance{grid-template-columns:repeat(2,minmax(0,1fr))}.sys-metrics{grid-template-columns:1fr}.sys-services,.sys-disks{grid-template-columns:1fr}}
@media(max-width:560px){.sys-hero{align-items:flex-start;flex-direction:column}.sys-summary{grid-template-columns:1fr 1fr}.sys-summary article{grid-template-columns:auto 1fr;padding:13px}.sys-maintenance{grid-template-columns:1fr}.sys-panel{padding:14px}.sys-service{grid-template-columns:auto minmax(0,1fr)}.sys-service>span{grid-column:2}.sys-disk-foot{flex-direction:column;gap:2px}}

/* Pagination Recherche NAS */
.nas-pagination{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.nas-pagination button{
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(97,183,255,.28);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(98,86,255,.22),rgba(42,187,255,.12));
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.nas-pagination button:first-child{
  justify-self:start;
}

.nas-pagination button:last-child{
  justify-self:end;
}

.nas-pagination > span{
  color:var(--cj-muted);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.nas-pagination button:hover{
  border-color:rgba(97,183,255,.55);
  background:linear-gradient(135deg,rgba(98,86,255,.34),rgba(42,187,255,.20));
}

@media(max-width:620px){
  .nas-pagination{
    grid-template-columns:1fr 1fr;
  }

  .nas-pagination > span{
    grid-column:1 / -1;
    grid-row:1;
  }

  .nas-pagination button{
    width:100%;
  }
}

/* Recherche NAS — grande barre centrale type moteur de recherche */
.nas-search-hero{
  text-align:center !important;
  max-width:1000px !important;
  margin:30px auto 38px !important;
}

.nas-search-hero h2{
  margin-bottom:8px !important;
}

.nas-search-hero p{
  margin-bottom:28px !important;
}

.nas-search-form{
  width:min(760px,92%) !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  padding:6px !important;
  background:#fff !important;
  border:1px solid #dfe1e5 !important;
  border-radius:28px !important;
  box-shadow:0 4px 18px rgba(0,0,0,.20) !important;
}

.nas-search-form:focus-within{
  box-shadow:0 5px 24px rgba(0,0,0,.28) !important;
}

.nas-search-form input{
  flex:1 !important;
  width:auto !important;
  min-width:0 !important;
  height:48px !important;
  padding:0 20px !important;
  border:0 !important;
  outline:0 !important;
  background:#fff !important;
  color:#202124 !important;
  font-family:Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  text-shadow:none !important;
}

.nas-search-form input::placeholder{
  color:#80868b !important;
}

.nas-search-form button{
  flex:none !important;
  height:46px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:23px !important;
  background:#6d4aff !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

@media(max-width:600px){
  .nas-search-form{
    width:94% !important;
  }

  .nas-search-form input{
    font-size:16px !important;
    padding:0 12px !important;
  }

  .nas-search-form button{
    padding:0 15px !important;
  }
}

/* =========================================================
   RECHERCHE NAS — BARRE + FILTRES
   ========================================================= */

.nas-search-hero{
  width:min(1100px,100%) !important;
  box-sizing:border-box !important;
  margin:28px auto 36px !important;
  text-align:center !important;
}

.nas-search-form{
  width:min(800px,94%) !important;
  margin:28px auto 22px !important;
  display:flex !important;
  align-items:center !important;
  padding:6px !important;
  background:#fff !important;
  border:1px solid #dfe1e5 !important;
  border-radius:32px !important;
  box-shadow:0 5px 24px rgba(0,0,0,.25) !important;
}

.nas-search-form:focus-within{
  box-shadow:0 7px 30px rgba(0,0,0,.34) !important;
}

.nas-search-form input{
  flex:1 !important;
  width:auto !important;
  min-width:0 !important;
  height:52px !important;
  padding:0 22px !important;
  border:0 !important;
  outline:0 !important;
  background:#fff !important;
  color:#202124 !important;
  font-family:Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  text-shadow:none !important;
}

.nas-search-form input::placeholder{
  color:#80868b !important;
}

.nas-search-form button{
  flex:none !important;
  height:48px !important;
  padding:0 24px !important;
  border:0 !important;
  border-radius:25px !important;
  background:linear-gradient(135deg,#6d4aff,#8b5cf6) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.nas-filters{
  width:min(1000px,96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:
    repeat(5,minmax(140px,1fr));
  gap:10px;
}

.nas-filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}

.nas-filters label > span{
  padding-left:4px;
  color:var(--cj-muted,#aab7cc);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.nas-filters select{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:12px;
  outline:none;
  background:rgba(4,13,28,.82) !important;
  color:#fff !important;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.nas-filters select:focus{
  border-color:#61b7ff !important;
  box-shadow:0 0 0 3px rgba(97,183,255,.12);
}

.nas-result-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}

.nas-result-head b{
  color:#fff;
  font-size:17px;
}

.nas-result-head span{
  color:var(--cj-muted,#aab7cc);
  font-size:13px;
}

@media(max-width:1000px){
  .nas-filters{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }
}

@media(max-width:700px){

  .nas-search-form{
    width:96% !important;
  }

  .nas-search-form input{
    padding:0 13px !important;
    font-size:16px !important;
  }

  .nas-search-form button{
    padding:0 15px !important;
  }

  .nas-filters{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media(max-width:430px){

  .nas-filters{
    grid-template-columns:1fr;
  }

}

/* Recherche NAS : barre blanche propre */
.nas-search-form{
    background:#ffffff !important;
    background-image:none !important;
    border:1px solid #dfe1e5 !important;
    box-shadow:0 4px 18px rgba(0,0,0,.18) !important;
}

.nas-search-form input,
.nas-search-form input[type="search"]{
    background:#ffffff !important;
    background-image:none !important;
    color:#202124 !important;
    border:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    outline:none !important;
}

.nas-search-form input:focus,
.nas-search-form input[type="search"]:focus{
    background:#ffffff !important;
    box-shadow:none !important;
    outline:none !important;
}


/* Recherche NAS — supprimer le gros panneau autour */
.nas-search-hero{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:20px 0 10px !important;
}

.nas-search-form{
    background:#fff !important;
    border:1px solid #dfe1e5 !important;
    border-radius:32px !important;
    box-shadow:0 4px 20px rgba(0,0,0,.22) !important;
}

.nas-search-form input,
.nas-search-form input[type="search"]{
    background:#fff !important;
    color:#202124 !important;
}

/* Résultats Recherche NAS cliquables */
.nas-result-card{
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.nas-result-card:hover{
  transform:translateY(-2px);
  border-color:rgba(97,183,255,.55)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30)!important;
}

.nas-result-card:focus-visible{
  outline:3px solid rgba(97,183,255,.7);
  outline-offset:3px;
}

/* =========================================================
   RECHERCHE NAS + ASSISTANT CHEZJEMS UNIFIES
   ========================================================= */

.nas-unified-help{
  margin:10px auto 20px;
  color:#8fa0b8;
  font-size:12px;
  text-align:center;
}

.nas-assistant-answer{
  width:min(900px,100%);
  box-sizing:border-box;
  margin:22px auto;
  padding:22px 24px;
  border:1px solid rgba(97,183,255,.24);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(14,27,48,.92),
      rgba(7,16,31,.96)
    );
  box-shadow:0 16px 42px rgba(0,0,0,.24);
  color:#f5f7fa;
  text-align:left;
}

.nas-assistant-label{
  margin-bottom:10px;
  color:#61b7ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.nas-assistant-text{
  font-size:16px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.nas-assistant-loading{
  color:#aab7cc;
}

.nas-assistant-error{
  border-color:rgba(239,91,91,.40);
  color:#ffb5b5;
}

/* =========================================================
   ASSISTANT CHEZJEMS
   ========================================================= */

.assistant-page{
  width:100%;
}

.assistant-hero{
  width:min(950px,100%);
  box-sizing:border-box;
  margin:20px auto;
  padding:34px;
  border:1px solid rgba(97,183,255,.18);
  border-radius:26px;
  background:
    linear-gradient(
      145deg,
      rgba(14,27,48,.90),
      rgba(7,16,31,.96)
    );
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  text-align:center;
}

.assistant-hero h2{
  margin:7px 0 8px;
  color:#fff;
  font-size:clamp(28px,4vw,42px);
}

.assistant-hero > p{
  margin:0 0 26px;
  color:#aab7cc;
}

.assistant-main-form{
  display:flex;
  width:min(800px,100%);
  box-sizing:border-box;
  margin:0 auto;
  padding:6px;
  border:1px solid #dfe1e5;
  border-radius:32px;
  background:#fff!important;
  box-shadow:0 6px 26px rgba(0,0,0,.30);
}

.assistant-main-form input,
.assistant-main-form input[type="text"]{
  flex:1;
  min-width:0;
  height:52px;
  padding:0 20px!important;
  border:0!important;
  outline:0!important;
  background:#fff!important;
  color:#202124!important;
  font-family:Arial,sans-serif!important;
  font-size:17px!important;
  font-weight:400!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

.assistant-main-form input::placeholder{
  color:#80868b!important;
}

.assistant-main-form button{
  flex:none;
  height:50px;
  padding:0 24px;
  border:0;
  border-radius:25px;
  background:linear-gradient(135deg,#6d4aff,#4388ff);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.assistant-shortcuts{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.assistant-shortcuts button{
  padding:8px 13px;
  border:1px solid rgba(97,183,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#c8d5e8;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.assistant-shortcuts button:hover{
  border-color:rgba(97,183,255,.5);
  color:#fff;
}

.assistant-response{
  margin:26px auto 0;
  padding:20px 22px;
  border:1px solid rgba(97,183,255,.24);
  border-radius:16px;
  background:rgba(3,11,24,.70);
  color:#f5f7fa;
  font-size:16px;
  line-height:1.6;
  text-align:left;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.assistant-response-loading{
  color:#aab7cc;
}

.assistant-response-error{
  border-color:rgba(239,91,91,.40);
  color:#ffb4b4;
}

@media(max-width:650px){
  .assistant-hero{
    padding:22px 12px;
  }

  .assistant-main-form{
    padding:5px;
  }

  .assistant-main-form input{
    padding:0 12px!important;
    font-size:15px!important;
  }

  .assistant-main-form button{
    padding:0 14px;
  }
}

/* =========================================================
   RECOLL + ASSISTANT IA — DEUX ZONES
   ========================================================= */

.nas-dual-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:24px 0;
}

.nas-tool-box{
  box-sizing:border-box;
  padding:22px;
  border:1px solid rgba(97,183,255,.18);
  border-radius:20px;
  background:rgba(7,16,31,.62);
  text-align:left;
}

.nas-tool-box h3{
  margin:4px 0 15px;
  color:#fff;
  font-size:20px;
}

.nas-tool-kicker{
  color:#61b7ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.nas-ai-box{
  border-color:rgba(139,92,246,.28);
}

.nas-ai-response{
  margin-top:16px;
}

.nas-ai-response .nas-assistant-answer{
  margin:0;
  width:100%;
}

@media(max-width:800px){
  .nas-dual-tools{
    grid-template-columns:1fr;
  }
}

/* ===== Recherche Recoll + Assistant IA séparés ===== */

.nas-dual-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:24px 0 20px;
}

.nas-tool-box{
  min-width:0;
  padding:20px;
  box-sizing:border-box;
  border:1px solid rgba(97,183,255,.20);
  border-radius:20px;
  background:rgba(7,16,31,.65);
}

.nas-ai-box{
  border-color:rgba(139,92,246,.32);
}

.nas-tool-box h3{
  margin:4px 0 14px;
  color:#fff;
  font-size:20px;
}

.nas-tool-kicker{
  color:#61b7ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.nas-ai-response{
  margin-top:15px;
}

.nas-ai-response .nas-assistant-answer{
  width:100%;
  box-sizing:border-box;
  margin:0;
}

@media(max-width:800px){
  .nas-dual-tools{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FIX VISUEL - RECOLL + ASSISTANT IA
   ========================================================= */

/* Les deux barres ont exactement le même rendu */
.nas-tool-box .nas-search-form{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  box-sizing:border-box !important;

  padding:6px !important;
  margin:0 !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:30px !important;

  background:#ffffff !important;
  background-image:none !important;

  box-shadow:
    0 6px 22px rgba(0,0,0,.22) !important;

  overflow:hidden !important;
}

/* Supprime tout ancien décor parasite */
.nas-tool-box .nas-search-form::before,
.nas-tool-box .nas-search-form::after{
  content:none !important;
  display:none !important;
}

/* INPUT RECOLL + INPUT IA */
.nas-tool-box .nas-search-form input,
.nas-tool-box .nas-search-form input[type="search"],
.nas-tool-box .nas-search-form input[type="text"]{
  appearance:none !important;
  -webkit-appearance:none !important;

  flex:1 1 auto !important;
  min-width:0 !important;
  height:48px !important;

  margin:0 !important;
  padding:0 18px !important;

  border:0 !important;
  border-radius:24px 0 0 24px !important;

  outline:0 !important;

  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;

  color:#202124 !important;
  -webkit-text-fill-color:#202124 !important;

  font-family:Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;

  box-shadow:none !important;
  text-shadow:none !important;
}

/* Placeholder identique */
.nas-tool-box .nas-search-form input::placeholder{
  color:#80868b !important;
  opacity:1 !important;
}

/* enlève les décorations natives du champ search */
.nas-tool-box input[type="search"]::-webkit-search-decoration,
.nas-tool-box input[type="search"]::-webkit-search-cancel-button,
.nas-tool-box input[type="search"]::-webkit-search-results-button,
.nas-tool-box input[type="search"]::-webkit-search-results-decoration{
  display:none !important;
  -webkit-appearance:none !important;
}

/* Boutons */
.nas-tool-box .nas-search-form button{
  flex:0 0 auto !important;
  height:48px !important;

  margin:0 !important;
  padding:0 22px !important;

  border:0 !important;
  border-radius:24px !important;

  background:#17385e !important;
  color:#ffffff !important;

  font:inherit !important;
  font-weight:800 !important;

  box-shadow:none !important;
  cursor:pointer !important;
}

/* Variante IA */
.nas-ai-box .nas-search-form button{
  background:linear-gradient(135deg,#514bd9,#804ed7) !important;
}

/* Les deux cartes restent propres et symétriques */
.nas-tool-box{
  overflow:hidden !important;
}


/* FIX FINAL : champ Assistant IA identique à Recoll */
#aiQuery,
#aiQuery:hover,
#aiQuery:focus,
#aiQuery:active{
  appearance:none !important;
  -webkit-appearance:none !important;

  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;

  color:#202124 !important;
  -webkit-text-fill-color:#202124 !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;

  opacity:1 !important;
}

#aiQuery::placeholder{
  color:#80868b !important;
  -webkit-text-fill-color:#80868b !important;
  opacity:1 !important;
}

.nas-ai-box .nas-search-form{
  background:#ffffff !important;
  background-image:none !important;
  overflow:hidden !important;
}

/* ===== Réponses Assistant ChezJems ===== */

.nas-assistant-text{
  line-height:1.65;
  white-space:pre-wrap;
}

.nas-assistant-text a{
  color:#61b7ff;
  text-decoration:none;
  overflow-wrap:anywhere;
}

.nas-assistant-text a:hover{
  text-decoration:underline;
}

.nas-assistant-text strong{
  color:#fff;
  font-weight:750;
}

.nas-ai-section{
  display:block;
  margin-top:18px;
  margin-bottom:5px;
  color:#61b7ff !important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ===== Correction cartes fichiers Assistant IA ===== */

.nas-assistant-text .nas-ai-file-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin:10px 0 0 !important;
}

.nas-assistant-text .nas-ai-file-grid .nas-result-card{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  padding:12px 14px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

.nas-assistant-text .nas-result-body{
  min-width:0;
  padding:0 !important;
}

.nas-assistant-text .nas-result-path{
  margin-top:3px !important;
  line-height:1.3 !important;
}

.nas-assistant-text .nas-result-meta{
  margin-top:6px !important;
}

.nas-assistant-text .nas-result-icon{
  flex:0 0 auto;
  margin-right:12px;
}

/* ===== Cartes fichiers Assistant IA compactes ===== */

.nas-assistant-text .nas-ai-file-list{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  white-space:normal !important;
}

.nas-assistant-text .nas-ai-file-card{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  width:100% !important;
  min-height:0 !important;
  height:auto !important;

  margin:0 !important;
  padding:12px 14px !important;

  box-sizing:border-box !important;

  border:1px solid rgba(97,183,255,.22) !important;
  border-radius:12px !important;

  background:rgba(5,18,36,.72) !important;

  cursor:pointer !important;
  white-space:normal !important;
}

.nas-assistant-text .nas-ai-file-card:hover{
  border-color:rgba(97,183,255,.60) !important;
  background:rgba(10,29,54,.85) !important;
}

.nas-ai-file-icon{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:9px !important;
  background:rgba(97,183,255,.10) !important;
  color:#61b7ff !important;
}

.nas-ai-file-body{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
}

.nas-ai-file-body strong{
  display:block !important;
  margin:0 0 3px !important;

  font-size:14px !important;
  line-height:1.3 !important;
  text-align:left !important;
}

.nas-ai-file-path{
  margin:0 !important;

  color:#9eabc0 !important;
  font-size:12px !important;
  line-height:1.3 !important;

  overflow-wrap:anywhere !important;
  text-align:left !important;
  white-space:normal !important;
}

.nas-ai-file-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px 12px !important;

  margin-top:5px !important;

  color:#61b7ff !important;
  font-size:11px !important;
  line-height:1.2 !important;

  text-align:left !important;
  white-space:normal !important;
}

/* ===== IA ponctuelle ===== */

.nas-ai-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
  white-space:normal !important;
}

.nas-ai-actions button{
  padding:9px 14px;
  border:1px solid rgba(139,92,246,.45);
  border-radius:999px;

  background:rgba(109,74,255,.12);
  color:#cfc5ff;

  font:inherit;
  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

.nas-ai-actions button:hover{
  background:rgba(109,74,255,.22);
  border-color:rgba(139,92,246,.75);
  color:#fff;
}

.nas-ai-summary{
  margin-top:14px;
  padding:15px 16px;

  border:1px solid rgba(139,92,246,.28);
  border-radius:13px;

  background:rgba(25,15,54,.42);

  color:#f5f7fa;

  white-space:normal !important;
}

.nas-ai-summary .nas-assistant-text{
  white-space:pre-wrap !important;
}

/* ===== Recherche NAS Recoll uniquement ===== */

.nas-recoll-only{
  width:min(900px,100%) !important;
  margin:24px auto 20px !important;
  box-sizing:border-box !important;
}

.nas-recoll-only .nas-search-form{
  width:100% !important;
  margin:0 !important;
}
/* === 3615 - LISIBILITE GENERALE === */
:root{--cj-readable-text:#f8faff;--cj-readable-muted:#cbd3e8}

.dash-title,.page-intro-title,.section-head h2,.app-title,.quick-title,.now-title{
  color:var(--cj-readable-text)!important;
  text-shadow:none!important;
  letter-spacing:-.02em;
}

.dash-subtitle,.app-sub,.quick-sub,.now-meta,.page-intro-text,.tile .s,.action-data,.info-data,.jelly-card-meta,.status-strip small{
  color:var(--cj-readable-muted)!important;
  opacity:1!important;
}

.app-card,.quick-card,.menu,.tile,.action-tile,.info-tile,.jelly-card,.status-strip>*{
  background:rgba(24,29,45,.92)!important;
}

.app-title{
  font-size:22px!important;
  line-height:1.15!important;
  font-weight:800!important;
}

.app-sub{
  font-size:14px!important;
  line-height:1.4!important;
}

.section-head{margin-bottom:16px!important}
.section-head h2{line-height:1.15!important}

@media(max-width:900px){
  .app-title{font-size:21px!important}
  .app-sub,.quick-sub{font-size:14px!important;line-height:1.4!important}
  .dash-subtitle{font-size:16px!important;line-height:1.45!important}
}

/* === 3615 - TUILES COMPACTES === */

.app-grid,
.quick-grid,
.tile-grid,
.menu-grid,
.action-grid,
.info-grid{
  gap:9px !important;
}

.app-card,
.quick-card,
.menu,
.tile,
.action-tile,
.info-tile,
.jelly-card{
  min-height:0 !important;
  padding:12px !important;
  border-radius:15px !important;
}

.app-card{
  min-height:90px !important;
}

.app-icon,
.tile .ico,
.action-tile .ico,
.info-tile .ico{
  font-size:28px !important;
}

.app-title{
  margin-top:8px !important;
  font-size:19px !important;
}

.app-sub{
  margin-top:4px !important;
  font-size:13px !important;
}

.quick-card{
  min-height:54px !important;
}

.quick-card b{
  font-size:15px !important;
  margin-bottom:3px !important;
}

.status-strip button{
  padding:10px !important;
  border-radius:14px !important;
}

/* Même principe sur tablette et téléphone */
@media(max-width:900px){
  .app-grid,
  .quick-grid,
  .tile-grid{
    gap:8px !important;
  }

  .app-card{
    min-height:82px !important;
    padding:11px !important;
  }

  .app-title{
    font-size:18px !important;
  }
}

/* === 3615 - PALETTE ANTHRACITE / CUIVRE === */

:root{
  --cj-blue:#d88745 !important;
  --cj-violet:#b86f3d !important;
  --cj-pink:#d49a6a !important;
  --cj-orange:#e28b43 !important;
  --cj-green:#8fa77a !important;
  --cj-cyan:#c28b62 !important;
  --cj-yellow:#d6aa68 !important;
  --cj-red:#b96e55 !important;
}

/* Fond général */
body,
.site-main{
  background:#111316 !important;
}

/* Cartes anthracite */
.app-card,
.quick-card,
.menu,
.tile,
.action-tile,
.info-tile,
.jelly-card,
.status-strip > *,
.now-card,
.home-live{
  background:#1c1f23 !important;
  border-color:#34383d !important;
}

/* Accent cuivre uniforme */
.app-card,
.quick-card,
.menu,
.tile,
.action-tile,
.info-tile,
.jelly-card{
  border-top-color:#d88745 !important;
}

/* Icônes */
.app-icon,
.menu .num,
.tile .ico,
.action-tile .ico,
.info-tile .ico{
  color:#e39a5c !important;
  background:rgba(216,135,69,.13) !important;
}

/* Textes */
.app-title,
.quick-title,
.tile-title,
.section-head h2{
  color:#f5f2ed !important;
}

.app-sub,
.quick-sub,
.tile .s,
.action-data,
.info-data{
  color:#c9c4bc !important;
}

/* Accueil : centrer Musique + Domotique */
.home-centered-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    justify-content: center !important;
    width: 100% !important;
}

@media (max-width: 700px) {
    .home-centered-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}