:root{
  --bg1:#1b1b2f; --bg2:#13132a; --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10); --accent:#f5c542; --play:#3ddc84;
  --stop:#ff5b67; --text:#ececf5; --dim:#9aa0b5;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-user-select:none; user-select:none;}
html,body{min-height:100%;}
body{
  font-family:"Segoe UI",system-ui,sans-serif; color:var(--text);
  background:radial-gradient(1200px 600px at 50% -10%, #2a2a4a 0%, var(--bg1) 45%, var(--bg2) 100%);
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:78px 0 16px;
}
/* Lecteur : hauteur figée = pas de scroll de page, l'historique remplit jusqu'en bas */
body.player-page{height:100vh; overflow:hidden;}
a{color:inherit; text-decoration:none;}

/* ---- Bandeau fixe ---- */
.topbar{position:fixed; top:0; left:0; right:0; height:58px; z-index:50;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:rgba(18,18,32,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--stroke);}
.brand{display:flex; align-items:center; gap:10px;}
.flag{display:flex; gap:5px;}
.flag i{width:8px; height:20px; border-radius:2px; display:block;}
.flag i:nth-child(1){background:#111;} .flag i:nth-child(2){background:var(--accent);} .flag i:nth-child(3){background:var(--stop);}
.brand h1{font-size:18px; font-weight:700; letter-spacing:.3px;}
.brand .ver,.login-brand .ver{font-size:11px; color:var(--dim); margin-left:5px; align-self:flex-end; padding-bottom:3px;}
.brand .shop{font-size:13px; color:var(--dim); margin-left:8px; padding-left:10px; border-left:1px solid var(--stroke);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topnav{display:flex; align-items:center; gap:8px;}
.topbtn{display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--stroke);
  border-radius:11px; cursor:pointer; background:var(--card); color:var(--accent);
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.5px; transition:.2s; white-space:nowrap;}
.topbtn:hover{background:rgba(245,197,66,.16);}
.topbtn .ico{font-size:15px;}
/* Page de connexion */
.login-body{justify-content:center; padding:18px;}
.login-card{width:100%; max-width:360px; background:#1e1e38; border:1px solid var(--stroke);
  border-radius:20px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.5);}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:2px;}
.login-brand h1{font-size:20px; font-weight:700;}

/* ---- Disc ---- */
.disc-wrap{margin:18px 0 6px; position:relative;}
.disc{width:190px; height:190px; border-radius:50%;
  background:conic-gradient(from 0deg,#23233f,#33335c,#23233f,#33335c,#23233f);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.03);
  animation:spin 8s linear infinite; animation-play-state:paused;}
.disc.spin{animation-play-state:running;}
.disc::after{content:""; position:absolute; width:46px; height:46px; border-radius:50%;
  background:var(--bg2); box-shadow:inset 0 0 0 6px rgba(255,255,255,.08);}
.disc .ico{font-size:54px; z-index:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
@keyframes spin{to{transform:rotate(360deg);}}
.ring{position:absolute; inset:-10px; border-radius:50%; border:2px solid transparent;}
.disc-wrap.live .ring{border-color:rgba(61,220,132,.5); animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.18);opacity:0}}

/* ---- Player (nouveau design) ---- */
.player{width:90%; max-width:1280px; background:var(--card); border:1px solid var(--stroke);
  border-radius:20px; padding:18px 20px; margin-top:4px;}
.p-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.clock{font-size:23px; font-weight:700; letter-spacing:1px; color:var(--accent); font-variant-numeric:tabular-nums;}
.p-radio{width:auto; max-width:230px; margin:0; padding:10px 34px 10px 12px; font-size:14px;}
.p-mid{display:flex; flex-direction:column; align-items:center; gap:14px; margin:14px 0;}
/* Indicateur de lecture : 3 styles (aiguille / LED / barres) */
.viz{width:300px; max-width:82%; height:70px; position:relative;}
.viz .vz{position:absolute; inset:0; display:none;}
.viz[data-style="needle"] .vz-needle{display:block;}
.viz[data-style="led"] .vz-led{display:flex;}
.viz[data-style="bars"] .vz-bars{display:flex;}
/* aiguille */
.vz-needle svg{width:100%; height:100%;}
.vz-needle .arc{fill:none; stroke:var(--stroke); stroke-width:2.5;}
.vz-needle .arc-red{fill:none; stroke:var(--stop); stroke-width:2.5;}
.vz-needle .ticks line{stroke:var(--dim); stroke-width:1.2;}
.vz-needle .needle{stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;}
.vz-needle .hub{fill:var(--accent);}
/* LED */
.vz-led{gap:5px; align-items:stretch; justify-content:center;}
.vz-led .col{display:flex; flex-direction:column-reverse; gap:2px; width:11px;}
.vz-led .seg{flex:1; border-radius:2px; background:rgba(255,255,255,.06);}
.vz-led .seg.g.on{background:var(--play); box-shadow:0 0 5px var(--play);}
.vz-led .seg.y.on{background:var(--accent); box-shadow:0 0 5px var(--accent);}
.vz-led .seg.r.on{background:var(--stop); box-shadow:0 0 6px var(--stop);}
/* barres */
.vz-bars{gap:4px; align-items:flex-end; justify-content:center;}
.vz-bars .bar{width:9px; height:6%; background:linear-gradient(to top, var(--play), var(--accent)); border-radius:3px 3px 0 0;}
.p-controls{display:flex; align-items:center; gap:22px;}
.radiolog{width:100%; text-align:center; font-size:13px; line-height:1.55; margin-top:2px;}
.radiolog div{color:var(--stop);}
.radiolog div.info{color:var(--accent);}
.radiolog div.ok{color:var(--play);}
.p-bot{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.p-now{display:flex; flex-direction:column; gap:2px; min-width:0;}
.p-now b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px;}
.p-now .status{font-size:12px; color:var(--dim);}
.player .vol{width:200px; max-width:50%; margin:0; flex-shrink:0;}
.player .vols{display:flex; flex-direction:column; gap:8px; width:200px; max-width:50%; flex-shrink:0;}
.player .vols .vol{width:100%; max-width:none; margin:0;}
/* ---- Pads d'annonces ---- */
.pads{width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
@media (min-width:1280px){ .player, .padbox, .histbox{ width:1280px; } }
.padbox, .histbox{width:90%; max-width:1280px; border:1px solid var(--stroke); border-radius:14px;
  background:var(--card); padding:10px 12px;}
.padbox{margin-top:16px;}
.histbox{margin-top:16px; display:flex; flex-direction:column; overflow:hidden; flex:1 1 0; min-height:0;}
.box-head{display:flex; justify-content:flex-end; align-items:center; margin-bottom:8px; min-height:22px;}
.size-ctrl{display:flex; align-items:center; gap:8px; width:200px; max-width:50%;}
.size-ctrl input[type=range]{flex:1;}
.sz-ico{display:inline-flex; align-items:flex-end; line-height:.9; color:var(--dim); font-weight:700; flex-shrink:0;}
.sz-ico .a-s{font-size:11px;}
.sz-ico .a-b{font-size:18px;}
/* Mode Raspberry / kiosque : LOGOUT caché (sortie par appui long de 1,5 s sur l'horloge) */
body.kiosk #btnLogout{ display:none; }
body.kiosk.unlock #btnLogout{ display:inline-flex; }
.histlist{flex:1 1 auto; overflow:hidden;}
.histrow{display:flex; gap:12px; align-items:baseline; padding:6px 2px; border-bottom:1px solid rgba(255,255,255,.05); font-size:var(--hist-font,20px);}
.histrow .ht{color:var(--accent); font-variant-numeric:tabular-nums; flex-shrink:0;}
.histrow .hby{font-size:.33em; font-weight:700; border-radius:999px; padding:.25em 1em;
  letter-spacing:.4px; text-transform:uppercase; flex-shrink:0; align-self:center;
  white-space:nowrap; text-align:center;}
.histrow .hby.k-player{background:var(--play);   color:#0b1f12;}   /* Player : vert  */
.histrow .hby.k-auto{  background:var(--dim);    color:#11131c;}   /* Auto   : gris  */
.histrow .hby.k-caisse{background:var(--accent); color:#3a2c00;}   /* Caisse : jaune */
.histrow .hby.k-remote{background:#3d8bff;       color:#fff;}      /* Remote : bleu  */
.histrow .hby.k-manager{background:#b07cff;      color:#1a0e33;}   /* Manager : violet */
/* Pastilles d'administration (rôle / nom de shop) */
.ubadge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px; vertical-align:middle;}
/* Toute pastille de RÔLE est écrite en noir sur fond clair : lisible quel que
   soit le rôle, y compris un rôle inconnu ou ajouté plus tard. */
.ubadge[class*="r-"]{background:#e6e6f0; color:#000;}
.ubadge.shopname{background:rgba(255,255,255,.14); color:var(--text); text-transform:none;}
.ubadge.r-administrateur{background:var(--dim);  color:#000;}
.ubadge.r-magasin{background:var(--play);   color:#000;}
.ubadge.r-manager{background:#b07cff;       color:#000;}
.ubadge.r-caisse{background:var(--accent);  color:#000;}
.ubadge.r-remote{background:#3d8bff;        color:#000;}
.ubadge.r-manager_tel{background:linear-gradient(90deg,#b07cff 0%,#b07cff 50%,#3d8bff 50%,#3d8bff 100%);
  color:#000;}                              /* Manager + téléphone : les deux couleurs */
/* Boutons icônes de la liste des annonces (Play / Crayon / Poubelle) */
.ann-ico{font-size:17px; padding:6px 11px; line-height:1;}
/* Journal des actions (logfile) : liste scrollable */
.logscroll{max-height:60vh; overflow-y:auto; margin:8px 0 12px; border:1px solid var(--stroke); border-radius:10px; padding:2px 10px;}
.logscroll .histrow:last-child{border-bottom:none;}
.histrow .hl{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Entrées "panne de flux" : tout en rouge */
.histrow .hmsg{flex:1; color:var(--stop);}
.histrow.err .ht{color:var(--stop);}
.pad{position:relative; padding:12px 6px; border:1px solid var(--stroke); border-radius:12px; cursor:pointer;
  background:var(--card); color:var(--text); font-family:inherit; font-size:var(--pad-font,22px); font-weight:700; min-height:110px;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:.15s; overflow:hidden;}
.pad:hover{background:rgba(245,197,66,.14);}
.pad.empty{color:var(--dim); border-style:dashed; font-size:20px;}
.pad.filled{background:linear-gradient(145deg,rgba(61,220,132,.18),rgba(255,255,255,.03)); border-color:rgba(61,220,132,.4);}
/* Annonce déclenchée : vert plein pendant 1 s */
.pad.pad-fired,
.pad.pad-fired:hover{background-image:none !important; background-color:var(--play) !important; border-color:var(--play); color:#0b1f12;}
.pad .pad-lbl{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; padding:0 2px;}
.pad .pad-x{position:absolute; top:1px; right:6px; font-size:16px; color:var(--dim); line-height:1; padding:2px;}
.pad .pad-x:hover{color:var(--stop);}
.choose-item{display:block; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px; border:1px solid var(--stroke);
  border-radius:12px; background:var(--card); color:var(--text); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;}
.choose-item:hover{background:rgba(245,197,66,.14);}
/* Page télécommande annonces */
.annlist{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.annbtn{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:16px 16px; border:1px solid var(--stroke); touch-action:none;
  border-radius:14px; background:linear-gradient(145deg,rgba(245,197,66,.14),rgba(255,255,255,.03)); color:var(--text);
  font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .15s;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.annbtn:hover{background:rgba(245,197,66,.22);}
.annbtn.dragging{opacity:.55; outline:2px dashed var(--accent);}
.annbtn .ah{cursor:grab; color:var(--dim); font-size:20px; line-height:1; flex-shrink:0; touch-action:none; padding:2px 4px;}
.annbtn .ah:active{cursor:grabbing;}
.annbtn .lbl{flex:1;}

/* ---- Now playing ---- */
.now{margin-top:14px; text-align:center; height:24px;}
.now b{font-size:17px;}
.status{margin-top:4px; font-size:13px; color:var(--dim); height:18px;}

/* ---- Selects généraux ---- */
.field{width:100%; max-width:380px; margin-top:18px;}
.field label{font-size:12px; color:var(--dim); margin-left:4px;}
select{width:100%; margin-top:6px; padding:13px 14px; font-size:15px; font-family:inherit;
  color:var(--text); background:var(--card); border:1px solid var(--stroke);
  border-radius:14px; cursor:pointer; appearance:none; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%239aa0b5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;}
select option{background:#23233f; color:var(--text);}
select optgroup{background:#1b1b2f; color:var(--accent); font-weight:700;}

/* ---- Controls ---- */
.controls{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:24px;}
.btn-stop{width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--card); color:var(--stop); font-size:20px; transition:.2s;}
.btn-stop:hover{background:rgba(255,91,103,.18); transform:scale(1.06);}
.btn-play{width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(145deg,var(--play),#2cb96e); color:#06250f; font-size:34px;
  box-shadow:0 12px 30px rgba(61,220,132,.35); transition:.2s; display:flex; align-items:center; justify-content:center;}
.btn-play:hover{transform:scale(1.06);}
.btn-play:active{transform:scale(.97);}

/* ---- Volume ---- */
.vol{width:100%; max-width:380px; margin-top:26px; display:flex; align-items:center; gap:12px;}
.vol span{font-size:16px; color:var(--dim);}
input[type=range]{flex:1; -webkit-appearance:none; height:6px; border-radius:5px;
  background:rgba(255,255,255,.14); outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4);}

/* ---- Annonce vocale ---- */
.announce{width:100%; max-width:380px; margin-top:22px;}
.ann-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.ann-head label{font-size:12px; color:var(--dim); margin-left:4px;}
.ann-voice{width:auto; margin:0; padding:6px 28px 6px 10px; font-size:12px; border-radius:10px; background-position:right 9px center;}
.ann-row{display:flex; gap:8px;}
.ann-row input[type=text]{flex:1; padding:12px 14px; font-size:14px; font-family:inherit; color:var(--text);
  background:var(--card); border:1px solid var(--stroke); border-radius:13px; outline:none;
  -webkit-user-select:text; user-select:text;}
.ann-row input[type=text]:focus{border-color:var(--accent);}
.ann-row input[type=text]::placeholder{color:var(--dim);}
.btn-ann{padding:0 16px; border:none; border-radius:13px; cursor:pointer; white-space:nowrap;
  background:linear-gradient(145deg,var(--accent),#e0a92e); color:#2a2207; font-weight:700;
  font-size:13px; font-family:inherit; transition:.2s;}
.btn-ann:hover{transform:scale(1.04);}
.btn-ann:disabled{opacity:.6; cursor:default; transform:none;}

/* ---- Page (titres, conteneurs) ---- */
.page{width:100%; max-width:680px;}
.page-title{font-size:22px; font-weight:700; color:var(--accent); margin-bottom:4px;}
.page-sub{font-size:13px; color:var(--dim); margin-bottom:20px;}

/* ---- Grands boutons SETTINGS ---- */
.btn-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:30px 12px; border:1px solid var(--stroke); border-radius:18px; cursor:pointer;
  background:var(--card); color:var(--text); font-family:inherit; transition:.2s;}
.tile:hover{background:rgba(245,197,66,.16); transform:translateY(-2px);}
.tile.disabled{opacity:.4; cursor:default; pointer-events:none;}
.tile .t-ico{font-size:34px;}
.tile .t-lbl{font-size:15px; font-weight:700; letter-spacing:.4px; text-align:center;}
.tile .t-lbl small{display:block; font-weight:400; font-size:11px; color:var(--dim); letter-spacing:0;}

/* ---- Tableau horaires ---- */
.tablewrap{width:100%; overflow-x:auto;}
table.horaires{border-collapse:collapse; width:100%; min-width:560px;}
table.horaires th{font-size:12px; color:var(--accent); font-weight:700; padding:8px 6px; text-align:center; white-space:nowrap;}
table.horaires th.jour{text-align:left;}
table.horaires td{padding:8px 6px; border-top:1px solid rgba(255,255,255,.07); text-align:center;}
table.horaires td.jour{text-align:left; font-weight:700; white-space:nowrap;}
table.horaires input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent); cursor:pointer;}
.tpick{display:inline-flex; align-items:center; gap:4px;}
.tpick select{width:auto; margin:0; padding:7px 5px; font-size:14px; border-radius:9px;
  background-image:none; text-align:center; text-align-last:center;}
.tpick .sep{color:var(--dim); font-weight:700;}

/* ---- Boutons d'action / retour ---- */
.actions{display:flex; gap:10px; margin-top:22px;}
.actions a, .actions button{flex:1; text-align:center; padding:14px; border:none; border-radius:12px;
  cursor:pointer; font-size:15px; font-weight:700; font-family:inherit;}
.btn-save{background:linear-gradient(145deg,var(--play),#2cb96e); color:#06250f;
  padding:16px; font-size:18px; font-weight:700; font-family:inherit; border:none; border-radius:12px; cursor:pointer;}
.btn-back{background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; gap:8px;}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--play); color:#06250f; padding:12px 20px; border-radius:12px; font-weight:700;
  opacity:0; transition:.3s; pointer-events:none; z-index:200;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- Fenêtres filles (modales) ---- */
.overlay{position:fixed; inset:0; background:rgba(8,8,18,.65); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:18px; z-index:100;}
.overlay.show{display:flex;}
.modal{width:100%; max-width:420px; background:#1e1e38; border:1px solid var(--stroke);
  border-radius:20px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.6); max-height:92vh; overflow:auto;}
.modal-wide{max-width:620px;}
.modal h2{font-size:18px; margin-bottom:4px; color:var(--accent);}
.modal .sub{font-size:13px; color:var(--dim); margin-bottom:16px;}
.ghost{background:none; color:var(--dim); margin-top:14px; width:100%; border:none; cursor:pointer; font-size:14px; font-family:inherit;}
.row-actions{display:flex; gap:10px; margin-top:18px;}
.row-actions button{flex:1; padding:13px; border:none; border-radius:12px; cursor:pointer; font-size:15px; font-weight:700; font-family:inherit;}
.save{background:linear-gradient(145deg,var(--play),#2cb96e); color:#06250f;}
.cancel{background:var(--card); color:var(--text);}
/* Boutons .save utilisés SEULS (hors .row-actions) : sans ça ils restent carrés
   et collés au texte, faute d'hériter des règles de .row-actions button. */
.modal > .save{
  display:block; width:100%; padding:13px 16px; border:none; border-radius:12px;
  cursor:pointer; font-size:15px; font-weight:700; font-family:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,.28);}
.modal > .save:hover{filter:brightness(1.06);}
.modal > .save:active{transform:translateY(1px);}

/* ---- Formulaires admin / gestion users ---- */
.fld-lbl{font-size:12px; color:var(--dim); margin-left:4px;}
.fld{width:100%; margin:6px 0 12px; padding:12px 14px; font-size:16px; font-family:inherit; color:var(--text);
  background:var(--card); border:1px solid var(--stroke); border-radius:12px; outline:none;
  -webkit-user-select:text; user-select:text;}
.fld:focus{border-color:var(--accent);}
.fld::placeholder{color:var(--dim);}
textarea.fld{resize:vertical; min-height:72px; line-height:1.45; background-image:none;}
.ann-select{margin:0; width:auto; flex:1;}
.opt-row{display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--stroke);
  border-radius:14px; cursor:pointer; background:var(--card);}
.opt-row input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); cursor:pointer; margin-top:1px; flex-shrink:0;}
.opt-row .opt-txt{display:flex; flex-direction:column; gap:3px;}
.opt-row .opt-txt b{font-size:14px;}
.opt-row .opt-txt small{font-size:12px; color:var(--dim); line-height:1.4;}
.opt-block{margin-top:14px; transition:opacity .2s;}
.opt-block.off{opacity:.45;}
.opt-block .opt-lbl{font-size:13px; color:var(--dim); margin:0 0 8px 2px;}
.seg{display:flex; gap:6px;}
.seg button{flex:1; padding:11px 8px; border:1px solid var(--stroke); border-radius:11px; cursor:pointer;
  background:var(--card); color:var(--text); font-family:inherit; font-size:13px; font-weight:700; transition:.15s;}
.seg button:hover{background:rgba(245,197,66,.12);}
.seg button.active{background:linear-gradient(145deg,var(--accent),#e0a92e); color:#2a2207; border-color:transparent;}
.err{color:var(--stop); font-size:13px; min-height:18px;}
.msg{font-size:13px; min-height:18px;}
.msg.ok{color:var(--play);} .msg.ko{color:var(--stop);}
.list-title{font-size:14px; color:var(--accent); margin:18px 0 8px;}
.ulist{display:flex; flex-direction:column; gap:8px;}
.uitem{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  background:var(--card); border:1px solid var(--stroke); border-radius:12px;}
.uitem .uinfo b{font-size:14px;}
.uitem .uinfo span{display:block; font-size:12px; color:var(--dim);}
/* ...sauf les PASTILLES : la règle ci-dessus (plus spécifique que .ubadge)
   les rendait grises et pleine largeur. On rétablit la pastille noire. */
.uitem .uinfo span.ubadge{display:inline-block; font-size:11px; color:#000;}
.uitem .uinfo span.ubadge.shopname{color:var(--text);}
.apill{display:inline-block; font-size:11px; font-weight:700; color:#fff !important; padding:3px 10px; border-radius:999px; letter-spacing:.4px; vertical-align:middle; align-self:center; margin-right:4px;}
/* Vue LIVE : une carte par magasin, boule verte/rouge */
.livegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:10px;}
.livecard{border:1px solid var(--stroke); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,.04);}
.livecard b{display:flex; align-items:center; gap:9px; font-size:14px;}
.livecard .lname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.liveupd{flex-shrink:0; border:1px solid var(--stroke); background:rgba(255,255,255,.08); color:var(--text);
  border-radius:8px; padding:2px 8px; font-size:13px; cursor:pointer; font-family:inherit;}
.liveupd:hover{background:var(--accent); color:#000;}
.livereb{flex-shrink:0; border:1px solid var(--stroke); background:rgba(255,255,255,.08); color:var(--text);
  border-radius:8px; padding:2px 8px; font-size:13px; cursor:pointer; font-family:inherit;}
.livereb:hover{background:var(--stop); color:#fff;}
.rebpill{display:inline-block; flex-shrink:0; background:#c0392b; color:#fff; font-size:11px;
  font-weight:700; padding:1px 8px; border-radius:999px; white-space:nowrap; margin-left:8px;
  vertical-align:middle;}   /* affichee a cote de la VERSION du poste */
.livecard span{display:block; font-size:12px; color:var(--dim); margin-top:5px;}
.dot{width:13px; height:13px; border-radius:50%; flex-shrink:0; display:inline-block;}
.dot.on{background:#2cb96e; box-shadow:0 0 9px rgba(44,185,110,.9);}
.dot.off{background:#c0392b; box-shadow:0 0 9px rgba(192,57,43,.9);}
.dot.warn{background:#f5c542; box-shadow:0 0 9px rgba(245,197,66,.9);}
.dbtable{border-collapse:collapse; font-size:12px; width:100%;}
.dbtable th,.dbtable td{border:1px solid rgba(255,255,255,.14); padding:4px 8px; text-align:left; white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis;}
.dbtable th{background:rgba(255,255,255,.08); position:sticky; top:0;}
.dbtable tbody tr:nth-child(even){background:rgba(255,255,255,.03);}
.apill-open{background:#1f9d57;}
.apill-close{background:#c0392b;}
.uitem .uact{display:flex; gap:6px; flex-shrink:0; align-items:center;}
.uitem .udel,.uitem .uedit{border:none; border-radius:9px; padding:7px 11px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13px;}
.uitem .udel{background:rgba(255,91,103,.15); color:var(--stop);}
.uitem .udel:hover{background:rgba(255,91,103,.28);}
.uitem .uedit{background:rgba(245,197,66,.15); color:var(--accent);}
.uitem .uedit:hover{background:rgba(245,197,66,.28);}

/* ---- Boutons presets WiiM (mode entrée externe) ---- */
.wiim-presets{ display:none; grid-template-columns:repeat(5,1fr); gap:7px; padding:10px 14px 2px; }
.wiim-preset{
  background:var(--card); color:var(--text); border:1px solid var(--stroke);
  border-radius:10px; padding:9px 7px; font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wiim-preset:hover{ border-color:var(--accent); color:var(--accent); }
.wiim-preset:active{ transform:scale(.97); }
@media (max-width:700px){ .wiim-presets{ grid-template-columns:repeat(2,1fr); } }
.wiim-preset.on{ border-color:var(--play); color:var(--play); background:rgba(61,220,132,.12); }
.wiim-preset.on:hover{ border-color:var(--play); color:var(--play); }

/* ---- Onglets de la fenêtre Config Shelly ---- */
.sh-tab{
  flex:1; background:var(--card); color:var(--text); border:1px solid var(--stroke);
  border-radius:14px; padding:14px 10px; font-family:inherit; font-size:15px;
  font-weight:800; letter-spacing:.5px; cursor:pointer; line-height:1.5;
}
.sh-tab:hover{ border-color:var(--accent); color:var(--accent); }
.sh-tab.on{ border-color:var(--accent); color:var(--accent); background:rgba(245,197,66,.10); }
.sh-last{ color:var(--play); font-weight:700; }

/* ---- Barre de rafraîchissement du mode Détecter ---- */
.sh-refresh{ height:4px; background:var(--card); border-radius:2px; overflow:hidden; margin:8px 0 6px; }
.sh-refresh i{ display:block; height:100%; width:0; background:var(--accent); border-radius:2px; }

/* ---- Grand bouton d'action de la fenêtre Config Shelly ---- */
.sh-go{
  width:100%; margin-top:8px; background:rgba(61,220,132,.14); color:var(--play);
  border:1px solid rgba(61,220,132,.45); border-radius:14px; padding:15px 10px;
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.6px; cursor:pointer;
}
.sh-go:hover{ background:rgba(61,220,132,.26); }
.sh-go:active{ transform:scale(.99); }
.sh-go:disabled{ opacity:.5; cursor:default; }
.sh-go.alt{ background:rgba(245,197,66,.12); color:var(--accent); border-color:rgba(245,197,66,.45); }
.sh-go.alt:hover{ background:rgba(245,197,66,.24); }

/* ---- Annonces récurrentes (pads) ---- */
.pad .pad-rec{ position:absolute; top:1px; left:6px; font-size:14px; color:var(--dim);
  line-height:1; padding:2px 3px; cursor:pointer; }
.pad .pad-rec:hover{ color:var(--accent); }
.pad .pad-rec.on{ color:var(--play); font-weight:800; }
/* pad avec récurrence : le titre garde sa place normale, les réglages sont plaqués au fond du pad */
.pad .pad-recbox{ position:absolute; left:6px; right:6px; bottom:4px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; color:var(--dim); }
.pad .pad-recbox span{ display:inline-flex; align-items:center; }
.pad .pad-recbox .pad-next{ margin-left:auto; gap:3px; color:var(--play); font-weight:800; font-size:12px; }
.choose-item.hiddenann{ opacity:.55; font-style:italic; }

/* Fenetres d'ALERTE : elles doivent passer AU-DESSUS de la fenetre qui les
   ouvre. Sans cela, deux .overlay ayant le meme plan, c'est la derniere ecrite
   dans la page qui masque l'autre — la demande de confirmation restait invisible
   derriere la fenetre de copie. */
#ovConfirm{ z-index:140; }
/* ---- Statistiques d'appui des télécommandes ---- */
/* La fenêtre des statistiques prend la largeur de l'écran : plus l'écran est
   large, plus de télécommandes tiennent côte à côte. */
.modal-stats{max-width:none; width:min(96vw, 1500px);}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:16px;
  max-height:62vh; overflow-y:auto; padding:2px;
  align-items:stretch; grid-auto-rows:1fr;}   /* tous les cadres à la même hauteur */
.stats-dev{display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:10px 8px;}
.stats-dev .st-photo{margin:auto;}          /* le visuel se centre dans le cadre */
.stats-dev .st-name{font-size:13px; font-weight:800; color:var(--accent); letter-spacing:.4px;
  text-align:center; text-transform:uppercase; word-break:break-word;}
.stats-dev .st-svg{width:100%; height:auto; display:block;}
/* photo de l'appareil + pastilles de comptage posées dessus (coordonnées en %) */
.stats-dev .st-photo{position:relative; max-width:100%; overflow:visible;}
.stats-dev .st-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  border-radius:8px;}
/* pastille posée sur le bouton : « appuis simples / double-clics » */
.stats-dev .st-pin{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center;
  gap:3px; padding:3px 9px; border-radius:999px; background:var(--accent); color:#0d1020;
  border:2px solid #0d1020; box-shadow:0 2px 8px rgba(0,0,0,.45); line-height:1; white-space:nowrap;}
.stats-dev .st-pin b{font-size:15px; font-weight:800;}
.stats-dev .st-pin i{font-style:normal; font-size:12px; opacity:.55;}
.stats-dev .st-pin em{font-style:normal; font-size:13px; font-weight:700; opacity:.8;}
/* Carte filaire : même gabarit que les cartes photo (largeur identique, hauteur
   libre selon le nombre d'entrées). */
.stats-dev .st-filaire{max-width:150px;}
.stats-dev .st-filaire .st-svg{height:100%; width:auto; max-width:150px; display:block;}
.stats-dev .st-vide{display:flex; align-items:center; justify-content:center; min-height:70px;
  font-size:12px; color:var(--dim); border:1px dashed var(--stroke); border-radius:10px; width:100%;}
.stats-dev .st-pin.vide{background:rgba(255,255,255,.88); color:#5a5f70; border-color:#8d93a6;}
.stats-dev .st-total{font-size:12px; color:var(--dim);}
.st-per.active{background:var(--accent); color:#000;}

/* =========== INTERFACE TÉLÉPHONE V2 (grille personnelle, sans défilement) =========== */
body.v2-body{height:100vh; overflow:hidden; padding:66px 0 0; justify-content:flex-start;}
/* nom du magasin dans la barre du haut : jaune, gras, bien lisible */
.topbar .shop.v2-shop{color:var(--accent); font-weight:800; font-size:15px;
  letter-spacing:.4px; max-width:60vw;}
.v2-grid{width:100%; display:grid; gap:8px; padding:10px 10px 0;}
.v2pad{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:6px 8px; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent;}
.v2pad.filled{background:linear-gradient(145deg,rgba(245,197,66,.18),rgba(245,197,66,.07)); }
.v2pad.empty{background:rgba(255,255,255,.04); border-style:dashed;}
.v2lbl{font-size:15px; font-weight:800; line-height:1.15; word-break:break-word;
  text-transform:uppercase; letter-spacing:.3px;}
.v2plus{font-size:30px; font-weight:300; color:var(--dim);}
/* remplissage pendant l'appui, éclair à l'envoi, refus si trop court */
.v2pad::after{content:""; position:absolute; left:0; bottom:0; height:5px; width:0; background:var(--accent);}
.v2pad.arming::after{animation:armfill .5s linear forwards;}
/* barre ROUGE en haut : elle avance de 0,5 s à 3 s -> au bout, on propose de libérer */
.v2pad::before{content:""; position:absolute; left:0; top:0; height:5px; width:0; background:var(--stop);}
.v2pad.arming::before{animation:armfill 2.5s linear .5s forwards;}
/* Barre jaune arrivée à droite : le bouton PASSE ENTIÈREMENT EN JAUNE et le
   reste tant que le doigt est posé -> on voit que l'annonce partira au
   relâchement (et le vert « envoyé » prend le relais ensuite). */
.v2pad.ready{background:var(--accent) !important; border-color:var(--accent);
  box-shadow:0 0 18px rgba(245,197,66,.55); animation:readypulse 1.1s ease-in-out infinite;}
.v2pad.ready .v2lbl{color:#231a00;}
.annbtn.ready{background:var(--accent) !important; color:#231a00; border-color:var(--accent);
  animation:readypulse 1.1s ease-in-out infinite;}
@keyframes readypulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.14); }
}
.v2pad.sent{animation:sentflash .42s ease-out;}
.v2pad.tooshort{animation:tooshort .4s ease;}
/* barre du bas : AUTRES ANNONCES + roue crantée */
.v2-bottom{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:0;}
.v2-other{flex:1; border:none; padding:16px 10px; font-family:inherit; font-size:15px; font-weight:800;
  letter-spacing:.4px; cursor:pointer; background:linear-gradient(145deg,var(--play),#2cb96e); color:#06250f;}
.v2-gear{width:64px; border:none; cursor:pointer; font-size:22px;
  background:linear-gradient(145deg,#4a4a72,#33334f); color:var(--accent);}
.v2-gear:active,.v2-other:active{filter:brightness(.92);}

/* ---- Téléphone : l'annonce part après 0,5 s d'appui ---- */
.annbtn{ position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
  touch-action:none; }
/* pendant l'appui : une barre se remplit en 0,5 s */
.annbtn::after{ content:""; position:absolute; left:0; bottom:0; height:4px; width:0;
  background:var(--accent); border-radius:0 3px 3px 0; }
.annbtn.arming::after{ animation:armfill .5s linear forwards; }
@keyframes armfill{ from{width:0} to{width:100%} }
/* c'est parti : éclair vert bref */
.annbtn.sent{ animation:sentflash .42s ease-out; }
@keyframes sentflash{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(61,220,132,.85); }
  35%{ transform:scale(1.04); box-shadow:0 0 0 10px rgba(61,220,132,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(61,220,132,0); }
}
/* relâché trop tôt : petit refus */
.annbtn.tooshort{ animation:tooshort .4s ease; }
@keyframes tooshort{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
#ovWait{ z-index:160; }          /* attente : au-dessus de tout le reste */
/* Roue d'attente + points animés (copie de configuration en cours) */
.wait-spin{width:54px; height:54px; margin:6px auto 0; border-radius:50%;
  border:5px solid rgba(255,255,255,.12); border-top-color:var(--accent);
  animation:waitspin 1s linear infinite;}
@keyframes waitspin{to{transform:rotate(360deg);}}
.wait-dots{display:flex; gap:7px; justify-content:center; margin-top:16px;}
.wait-dots i{width:9px; height:9px; border-radius:50%; background:var(--play);
  opacity:.25; animation:waitdot 1.2s ease-in-out infinite;}
.wait-dots i:nth-child(2){animation-delay:.2s;}
.wait-dots i:nth-child(3){animation-delay:.4s;}
@keyframes waitdot{0%,80%,100%{opacity:.25; transform:scale(.8);} 40%{opacity:1; transform:scale(1.15);}}
#ovLogout{ z-index:150; }
#ovDelAnn{ z-index:140; }
.pad .pad-recbox select{ width:auto; background:var(--card); color:var(--text); border:1px solid var(--stroke);
  border-radius:7px; padding:3px 5px; margin:0; font-family:inherit; font-size:14px; }