/* =====================================================================================================================
   Mes appareils (01/10/2026) — bulle Compagnon ouverte (bas à gauche) + fenêtre « Réglages » d'un appareil (assets/appareils.js).
   Identité Volt : vert --id, fond uni, bulles mates sans trait pleine largeur. Pas de :has(). Téléphone : la fenêtre devient une
   feuille qui monte du bas. Retour arrière : retirer la ligne appareils.css d'index.html.
   ===================================================================================================================== */
/* ---- la bulle ouverte ---- */
#compBulle .comp-pop.apx-pop{width:min(368px,calc(100vw - 36px));max-height:calc(100vh - 110px);display:flex;flex-direction:column;padding:14px 14px 12px;border-radius:22px;
  background:var(--panel,#18191b);border:1px solid var(--line,rgba(255,255,255,.12));box-shadow:0 30px 70px -20px rgba(0,0,0,.85);transform-origin:12px calc(100% + 30px);animation:apxEntre .18s cubic-bezier(.2,.8,.2,1)}
#compBulle .comp-pop.apx-pop[hidden]{display:none}
#compBulle .comp-pop.apx-sort{animation:apxSort .14s ease-in forwards}
@keyframes apxEntre{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes apxSort{to{opacity:0;transform:translateY(6px) scale(.98)}}
.apx-t{display:flex;align-items:center;gap:10px;padding:0 2px 10px}
.apx-t img{width:28px;height:28px;border-radius:9px;flex:none}
.apx-t > div{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.apx-t b{font-size:15px;font-weight:700}
.apx-n{font-size:12px;color:var(--dim,#a9ada9);display:inline-flex;align-items:center;gap:5px}
.apx-n i{width:7px;height:7px;border-radius:50%;background:var(--id,#c6f500)}
.apx-n.on{color:var(--muted,#e6e8e6)}
.apx-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--dim,#a9ada9);cursor:pointer;padding:0}
.apx-x:hover{background:var(--glass,rgba(255,255,255,.07));color:var(--txt,#fff)}
.apx-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.apx-c{padding:10px 10px 8px 10px;border-radius:16px;background:var(--glass,rgba(255,255,255,.06))}
.apx-c.def{background:color-mix(in srgb,var(--id,#c6f500) 7%,var(--glass,rgba(255,255,255,.06)))}
.apx-c-h{display:flex;align-items:center;gap:10px}
.apx-ic{position:relative;flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--key,#28292c);color:var(--muted,#e6e8e6)}
.apx-ic.grand{width:48px;height:48px;border-radius:15px}
.apx-ic.grand svg{width:24px;height:24px}
.apx-pt{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--dim,#6d716d);box-shadow:0 0 0 2.5px var(--panel,#18191b)}
.on > .apx-c-h .apx-pt,.apx-m .apx-ic.on .apx-pt,.apx-c.on .apx-pt{background:var(--id,#c6f500)}
.apx-c-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.apx-c-t b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx-c-t u{text-decoration:none;font-size:12px;color:var(--dim,#a9ada9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx-on{color:var(--id,#c6f500);font-weight:600}
.apx-reg{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:12px;background:var(--key,#28292c);color:var(--muted,#e6e8e6);cursor:pointer;padding:0;transition:background .15s,color .15s,transform .2s}
.apx-reg:hover{background:var(--key2,#333438);color:var(--txt,#fff)}
.apx-reg:hover svg{transform:rotate(30deg)}
.apx-reg svg{transition:transform .25s}
.apx-c-m{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0 0 48px}
.apx-jeu{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px 3px 7px;border-radius:999px;font-size:11.5px;color:var(--muted,#e6e8e6);background:color-mix(in srgb,var(--cyan,#00e5ff) 12%,transparent)}
.apx-jeu svg{color:var(--cyan,#00e5ff);flex:none}
.apx-jeu b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx-def{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--id-ink,#0c0d0e);background:var(--id,#c6f500)}
.apx-def-b{border:0;background:transparent;color:var(--dim,#a9ada9);font:inherit;font-size:11.5px;padding:3px 6px;border-radius:999px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.apx-def-b:hover{color:var(--txt,#fff)}
.apx-maj{font-size:11.5px;color:var(--warn,#ffb347);font-weight:600}
.apx-c-r{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 48px}
.apx-fb{margin:4px 0 0 48px;font-size:11.5px;color:var(--id,#c6f500);min-height:0}
.apx-fb:empty{display:none}
/* interrupteur */
.apx-sw{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--txt,#fff);font:inherit;font-size:13px;text-align:left;cursor:pointer;padding:0}
.apx-sw > i{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:var(--key2,#333438);transition:background .18s}
.apx-sw > i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--muted,#e6e8e6);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.apx-sw.on > i{background:var(--id,#c6f500)}
.apx-sw.on > i::after{transform:translateX(14px);background:var(--id-ink,#0c0d0e)}
.apx-sw[disabled]{cursor:not-allowed;opacity:.5}
.apx-sw > span{display:flex;flex-direction:column;min-width:0}
.apx-sw small,.apx-r small{display:block;font-size:11.5px;color:var(--dim,#a9ada9);font-weight:400;margin-top:2px;line-height:1.35}
.apx-sw.compact{gap:7px;font-size:12px;padding:5px 10px 5px 6px;border-radius:999px;background:var(--key,#28292c)}
.apx-sw.compact > i{width:26px;height:16px}
.apx-sw.compact > i::after{width:10px;height:10px}
.apx-sw.compact.on > i::after{transform:translateX(10px)}
.apx-att{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;color:var(--warn,#ffb347);background:color-mix(in srgb,var(--warn,#ffb347) 14%,transparent);white-space:nowrap}
/* liaison, pied */
.apx-plus{margin-top:8px}
.apx-plus > summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--dim,#a9ada9);padding:6px 4px;border-radius:10px}
.apx-plus > summary::-webkit-details-marker{display:none}
.apx-plus > summary::before{content:"+ "}
.apx-plus[open] > summary::before{content:"− "}
.apx-plus > summary:hover{color:var(--txt,#fff)}
.apx-lier{margin-top:4px}
.apx-lier label{display:block;font-size:12px;color:var(--dim,#a9ada9);margin-bottom:6px}
.apx-pied{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 4px 0;font-size:12.5px}
.apx-pied a{color:var(--muted,#e6e8e6);text-decoration:none;font-weight:600}
.apx-pied a:hover{color:var(--id,#c6f500)}
.apx-pied a:last-child{color:var(--dim,#a9ada9);font-weight:500}
/* état vide */
.apx-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px 14px}
.apx-vide-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--glass,rgba(255,255,255,.07));color:var(--id,#c6f500);margin-bottom:4px}
.apx-vide b{font-size:15px}
.apx-vide p{margin:0;font-size:12.5px;color:var(--dim,#a9ada9);max-width:290px;line-height:1.45}
.apx-vide-a{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px}
.apx-store{display:inline-flex;border-radius:8px;line-height:0}
.apx-store img{height:40px;width:auto}
.apx-vide-a .bt{height:40px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.apx-vide-a .bt svg{width:16px;height:16px}

/* ---- la fenêtre « Réglages » ---- */
html.apx-bloque{overflow:hidden}
.apx-fond{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.55);animation:apxFondE .18s ease}
.apx-fond[hidden]{display:none}
.apx-fond.apx-sort{animation:apxFondS .17s ease forwards}
.apx-fond.apx-sort .apx-m{animation:apxSort .17s ease-in forwards}
@keyframes apxFondE{from{opacity:0}}
@keyframes apxFondS{to{opacity:0}}
.apx-m{width:min(520px,100%);max-height:min(760px,calc(100vh - 48px));display:flex;flex-direction:column;border-radius:24px;background:var(--panel,#18191b);border:1px solid var(--line,rgba(255,255,255,.12));
  box-shadow:0 40px 90px -24px rgba(0,0,0,.9);animation:apxEntre .2s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.apx-m-t{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 6px}
.apx-m-n{flex:1;min-width:0}
.apx-m-n h2{margin:0;font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx-m-n p{margin:3px 0 6px;font-size:12.5px;color:var(--dim,#a9ada9)}
.apx-m-fb{margin:0 20px 4px 82px}
.apx-m-c{overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px;scrollbar-width:thin}
.apx-s{padding:12px 0 4px}
.apx-s + .apx-s{margin-top:6px}
.apx-s h3{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim,#a9ada9)}
.apx-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:14px;background:var(--glass,rgba(255,255,255,.06))}
.apx-r + .apx-r,.apx-r + .apx-raison + .apx-r{margin-top:6px}
.apx-r > label,.apx-r-l{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.apx-r > .apx-sw{flex:1;justify-content:space-between;flex-direction:row-reverse;font-weight:600;font-size:13.5px}
.apx-raison{display:block;margin:5px 14px 0;font-size:11.5px;color:var(--warn,#ffb347)}
.apx-nom{display:flex;gap:6px;align-items:center;flex:0 1 auto;min-width:0}
.apx-nom input{width:180px;min-width:0;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.12));background:var(--bg-2,#121314);color:var(--txt,#fff);font:inherit;font-size:13px}
.apx-nom .bt svg{width:14px;height:14px}
.apx-sel{display:flex;align-items:center;gap:8px;flex:none}
.apx-sel select{height:34px;padding:0 30px 0 10px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.12));background-color:var(--bg-2,#121314);color:var(--txt,#fff);font:inherit;font-size:13px}
.apx-sel select[disabled]{opacity:.5}
.apx-note{margin:6px 2px 0;font-size:12px;color:var(--dim,#a9ada9);line-height:1.45}
.apx-local{margin:0;padding:11px 14px;border-radius:14px;background:var(--glass,rgba(255,255,255,.06))}
.apx-danger .apx-del{color:var(--bad,#ff6b6b)}
.apx-danger .apx-del:hover{background:color-mix(in srgb,var(--bad,#ff6b6b) 14%,transparent)}
.apx-m .bt.sm{height:32px;padding:0 12px;white-space:nowrap}

/* ---- Paramètres → Appareils : bouton ⚙ ---- */
.ap-l .apx-reg{width:32px;height:32px;border-radius:10px}

/* ---- téléphone : feuille qui monte du bas ---- */
@media (max-width:760px){
  .apx-fond{place-items:end stretch;padding:0}
  .apx-m{width:100%;max-height:88vh;max-height:88dvh;border-radius:24px 24px 0 0;border-bottom:0;animation:apxMonte .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
  .apx-fond.apx-sort .apx-m{animation:apxDescend .17s ease-in forwards}
  .apx-m::before{content:"";display:block;width:38px;height:4px;border-radius:999px;background:var(--line2,rgba(255,255,255,.24));margin:8px auto 0;flex:none}
  .apx-m-t{padding:12px 16px 4px}
  .apx-m-c{padding:2px 16px 18px}
  .apx-m-fb{margin:0 16px 4px 78px}
  .apx-r{flex-wrap:wrap}
  .apx-nom{flex:1 1 100%}
  .apx-nom input{flex:1;width:auto}
}
@keyframes apxMonte{from{transform:translateY(100%)}to{transform:none}}
@keyframes apxDescend{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){ .apx-pop,.apx-sort,.apx-fond,.apx-m,.apx-sw > i,.apx-sw > i::after{animation:none !important;transition:none !important} }

/* ---- thème Clair ---- */
html[data-theme="clair"] .apx-m,html[data-theme="clair"] #compBulle .comp-pop.apx-pop{box-shadow:0 30px 70px -24px rgba(20,30,20,.35)}
html[data-theme="clair"] .apx-fond{background:rgba(20,30,20,.35)}
/* 01/10/2026 : lien ?lier= du QR code du Compagnon — ordinateur à lier + temps restant (5 min), ou code refusé (lierPreRemplir, app.js) */
.comp-lier-info{display:flex;flex-direction:column;gap:3px;margin:2px 0 8px;padding:10px 12px;border-radius:14px;background:rgba(var(--id-rgb,198,245,0),.10)}
.comp-lier-info b{font-size:14px;color:var(--txt,#fff);overflow-wrap:anywhere}
.comp-lier-info b span{font-weight:500;color:var(--dim,#a9ada9)}
.comp-lier-info small{font-size:12px;color:var(--dim,#a9ada9);line-height:1.35}
.comp-lier-info .comp-lier-reste{color:var(--id,#c6f500);font-variant-numeric:tabular-nums;font-weight:600}
.comp-lier-info.non{background:rgba(255,107,107,.12)}
.comp-lier-info.non b{color:#ff8a8a}
/* lien ?lier= ouvert sur téléphone : la bulle (cachée < 761 px) est montrée au-dessus du dock, sa fenêtre en pleine largeur */
@media(max-width:760px){
  .comp-bulle.comp-bulle-lien{display:block;bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .comp-bulle.comp-bulle-lien .comp-pop{position:fixed;left:12px;right:12px;bottom:calc(160px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;max-height:calc(100dvh - 200px);overflow:auto}
}