/* =====================================================================================================================
   Appels vocaux entre amis (28/09/2026) — styles de assets/voix.js. Identité « Volt » (jetons --id*, --panel, --line… d'app.css),
   bulles mates flottantes, aucun trait collé aux bords, pas de :has() (règle du 25/09), rien qui clignote : les animations
   (ondes de sonnerie, compte à rebours) sont posées une fois et coupées si l'appareil demande moins de mouvement.
   Places : sonnerie en haut au milieu ; appel en haut à droite (PC) ou en haut sur toute la largeur (téléphone) ;
   le panneau Amis (bas droite), la barre « partie en cours » (bas milieu) et le Compagnon (bas gauche) restent libres.
   ===================================================================================================================== */
#voixSonne[hidden],#voixAppel[hidden],#voixRegl[hidden],#voixAppel [hidden],#voixRegl [hidden]{display:none !important}
.voix-sonne,.voix-appel,.voix-regl .vr-p{
  --vx-fond:var(--flottant,linear-gradient(180deg,#1f2022,#18191b));--vx-bord:var(--line2,rgba(235,245,235,.18));
  --vx-touche:var(--key,#28292c);--vx-touche2:var(--key2,#333438);--vx-vert:var(--id,#c6f500);--vx-encre:var(--id-ink,#0b0d00);
  --vx-rouge:#d3323f;--vx-ambre:#f5b841;
  color:var(--txt,#fff);font-family:inherit}
.vx-ic{width:18px;height:18px;flex:none;display:block;max-width:none}   /* app.css : img,svg{max-width:100%} les écrasait dans une grille */
.vx-lab{font-size:11px;font-weight:600;color:var(--muted,#e6e8e6);line-height:1.2;white-space:nowrap}

/* boutons */
.vx-rond{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--txt,#fff);font:inherit}
.vx-rond > .vx-ic{box-sizing:content-box;width:20px;height:20px;padding:13px;border-radius:50%;background:var(--vx-touche);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px -10px rgba(0,0,0,.7);transition:background .15s,transform .15s}
.vx-rond:hover > .vx-ic{background:var(--vx-touche2)}
.vx-rond:active > .vx-ic{transform:scale(.94)}
.vx-rond:disabled{opacity:.42;cursor:default}
.vx-rond.vx-rouge > .vx-ic{background:var(--vx-rouge);color:#fff}
.vx-rond.vx-rouge:hover > .vx-ic{background:#b92632}
.vx-rond.vx-vert > .vx-ic{background:var(--vx-vert);color:var(--vx-encre)}
.vx-rond.vx-vert:hover > .vx-ic{filter:brightness(1.06)}
.vx-rond.coupe > .vx-ic{background:var(--txt,#fff);color:#141414}
.vx-rond:focus-visible > .vx-ic,.vx-mini:focus-visible,.vx-bouton:focus-visible,.voix-ami:focus-visible,.voix-ong:focus-visible{outline:2px solid var(--cyan,#00e5ff);outline-offset:2px}
.vx-mini{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--muted,#e6e8e6);transition:background .15s,color .15s}
.vx-mini:hover{background:var(--glass-2,rgba(235,245,235,.11));color:var(--txt,#fff)}
.vx-mini .vx-ic{width:16px;height:16px}
.vx-mini.vx-rouge{background:var(--vx-rouge);color:#fff}
.vx-mini.coupe{background:var(--txt,#fff);color:#141414}
.vx-bouton{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-size:13px;
  font-weight:600;background:var(--vx-touche);color:var(--txt,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.vx-bouton:hover{background:var(--vx-touche2)}
.vx-bouton.vx-vert{background:var(--vx-vert);color:var(--vx-encre)}
.vx-bouton .vx-ic{width:16px;height:16px}
html[data-theme="clair"] :is(.vx-rond.vx-vert > .vx-ic,.vx-bouton.vx-vert){color:#fff}
html[data-theme="clair"] :is(.vx-rond.coupe > .vx-ic,.vx-mini.coupe){background:#141a3a;color:#fff}

/* ---------------------------------------------------------------- sonnerie (en haut au milieu) ---- */
.voix-sonne{position:fixed;z-index:260;top:84px;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px 22px;
  background:var(--vx-fond);border:1px solid var(--vx-bord);border-radius:22px;box-shadow:var(--sh,0 24px 48px -28px rgba(0,0,0,.75)),0 18px 50px -18px rgba(0,0,0,.6);
  animation:voix-arrive .28s cubic-bezier(.2,.9,.3,1.2) both}
.vs-av{position:relative;width:52px;height:52px;flex:none}
.vs-img,.vs-img .av{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;position:relative;z-index:1}
.vs-img .av{display:grid;place-items:center;background:var(--vx-touche);font-size:20px;font-weight:700;color:var(--muted,#e6e8e6)}
.vs-onde{position:absolute;inset:0;border-radius:50%;border:2px solid var(--vx-vert);opacity:0;animation:voix-onde 1.8s ease-out infinite}
.vs-onde2{animation-delay:.9s}
.vs-t{display:flex;flex-direction:column;min-width:0;gap:2px}
.vs-quoi{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-vert)}
html[data-theme="clair"] .vs-quoi{color:var(--id-lo,#3f6212)}
.vs-nom{font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-plus{font-style:normal;font-size:12px;color:var(--muted,#e6e8e6);line-height:1.35}
.vs-plus:empty{display:none}
.vs-b{display:flex;gap:14px}
.vs-temps{position:absolute;left:18px;right:18px;bottom:9px;height:3px;border-radius:3px;background:var(--glass-2,rgba(235,245,235,.11));overflow:hidden}
.vs-temps i{position:absolute;inset:0;background:var(--vx-vert);transform-origin:left center;border-radius:3px}
@keyframes voix-temps{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes voix-onde{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.75);opacity:0}}
@keyframes voix-arrive{from{opacity:0;transform:translate(-50%,-10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ---------------------------------------------------------------- panneau d'appel (haut droite) --- */
.voix-appel{position:fixed;z-index:76;top:84px;right:calc(16px + var(--vx-decale, 0px));transition:right .2s ease;width:340px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;
  background:var(--vx-fond);border:1px solid var(--vx-bord);border-radius:20px;box-shadow:var(--sh,0 24px 48px -28px rgba(0,0,0,.75)),0 16px 44px -20px rgba(0,0,0,.6);
  max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px)}
.va-tete{display:flex;align-items:center;gap:8px;padding:12px 10px 10px 14px}
.va-pt{width:9px;height:9px;border-radius:50%;flex:none;background:var(--vx-ambre)}
.va-pt.ok{background:var(--vx-vert)}
.va-pt.ko{background:var(--loss,#ff5f6d)}
.va-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.va-titre{font-size:14px}
.va-sous{font-style:normal;font-size:12px;color:var(--muted,#e6e8e6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-duree{font-size:12px;font-weight:600;color:var(--muted,#e6e8e6);font-variant-numeric:tabular-nums;flex:none}
.va-duree:empty{display:none}
.va-mini{display:none}
.va-corps{padding:0 12px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.va-gens{display:flex;flex-direction:column;gap:4px;max-height:252px;overflow-y:auto;overscroll-behavior:contain}   /* 5 personnes visibles, le reste défile */
.va-l{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:14px;background:var(--glass,rgba(235,245,235,.07))}
.va-l.attend{opacity:.72}
.va-av{position:relative;width:36px;height:36px;flex:none;border-radius:50%;transition:box-shadow .15s}
.va-img,.va-img .av{display:block;width:36px;height:36px;border-radius:50%;object-fit:cover}
.va-img .av{display:grid;place-items:center;background:var(--vx-touche);font-size:14px;font-weight:700;color:var(--muted,#e6e8e6)}
.va-l.parle .va-av{box-shadow:0 0 0 2px var(--panel,#18191b),0 0 0 4px var(--vx-vert)}
.va-l.sonne .va-av::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--vx-vert);animation:voix-onde 1.8s ease-out infinite}
.va-muet{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;display:none;place-items:center;background:var(--vx-rouge);color:#fff;
  box-shadow:0 0 0 2px var(--panel,#18191b)}
.va-muet .vx-ic{width:11px;height:11px}
.va-l.muet .va-muet{display:grid}
.va-n{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.va-n b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-n i{font-style:normal;font-size:11.5px;color:var(--muted,#e6e8e6)}
.va-n i:empty{display:none}
.va-vol{width:84px;accent-color:var(--vx-vert);cursor:pointer}
.va-son,.va-reprise{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:10px 2px 2px;padding:12px;border-radius:14px;background:var(--glass,rgba(235,245,235,.07))}
.va-son p,.va-reprise p{font-size:12.5px;color:var(--muted,#e6e8e6);line-height:1.4}
.va-ajout{margin:10px 0 2px;padding:10px;border-radius:14px;background:var(--creux,rgba(0,0,0,.28))}
.va-ajout-t{font-size:12px;font-weight:600;color:var(--muted,#e6e8e6);margin:0 2px 8px}
.va-ajout-l{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;overscroll-behavior:contain}
.va-ajout-a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;border:0;cursor:pointer;
  background:transparent;color:var(--txt,#fff);font:inherit;text-align:left}
.va-ajout-a:hover{background:var(--glass-2,rgba(235,245,235,.11))}
.va-ajout-a .va-av,.va-ajout-a .va-av .av{width:30px;height:30px}
.va-ajout-a > .vx-ic{color:var(--vx-vert)}
html[data-theme="clair"] .va-ajout-a > .vx-ic{color:var(--id-lo,#3f6212)}
.va-actions{display:flex;justify-content:center;gap:22px;padding:12px 12px 14px}
/* réduit : une pastille (état, durée, micro, raccrocher, agrandir) */
.voix-appel.plie{width:auto;min-width:0;border-radius:999px}
.voix-appel.plie .va-corps,.voix-appel.plie .va-actions{display:none}
.voix-appel.plie .va-tete{padding:7px 8px 7px 14px;gap:6px}
.voix-appel.plie .va-mini{display:inline-flex}
.voix-appel.plie .va-t{max-width:190px}
.voix-appel.reprise .va-actions [data-voix="micro"],.voix-appel.reprise .va-actions [data-voix="ajouter"],.voix-appel.reprise .va-mini[data-voix="micro"]{display:none}

/* ---------------------------------------------------------------- panneau Amis : boutons ajoutés --- */
.voix-ami .vx-ic{width:14px;height:14px;margin:auto}
.voix-ami:hover{color:var(--vx-vert,var(--id,#c6f500)) !important}
html[data-theme="clair"] .voix-ami:hover{color:var(--id-lo,#3f6212) !important}
.voix-ami:disabled{opacity:.4;cursor:default}
.voix-ong{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0 !important;border-radius:50% !important;flex:none}
.voix-ong .vx-ic{width:16px;height:16px}

/* ---------------------------------------------------------------- réglages ------------------------- */
.voix-regl{position:fixed;inset:0;z-index:310;display:grid;place-items:start center;padding:12vh 16px 16px;background:rgba(3,4,12,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-y:auto}
.vr-p{width:min(460px,100%);display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;background:var(--vx-fond);border:1px solid var(--vx-bord);
  border-radius:22px;box-shadow:var(--sh,0 24px 48px -28px rgba(0,0,0,.75))}
.vr-tete{display:flex;align-items:center;gap:10px}
.vr-tete > .vx-ic{color:var(--vx-vert)}
html[data-theme="clair"] .vr-tete > .vx-ic{color:var(--id-lo,#3f6212)}
.vr-tete h3{flex:1;font-size:17px}
.vr-champ{display:flex;flex-direction:column;gap:6px}
.vr-l{font-size:12.5px;font-weight:600;color:var(--muted,#e6e8e6)}
.vr-champ select{width:100%;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line2,rgba(235,245,235,.18));
  background:var(--vx-touche);color:var(--txt,#fff);font:inherit;font-size:14px;text-overflow:ellipsis}
.vr-test{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vr-niveau{flex:1;min-width:120px;height:10px;border-radius:10px;background:var(--creux,rgba(0,0,0,.28));overflow:hidden;position:relative}
.vr-niveau i{position:absolute;inset:0;background:var(--vx-vert);transform:scaleX(0);transform-origin:left center;transition:transform 70ms linear;border-radius:10px}
.vr-aide,.vr-autoriser p{font-size:12.5px;color:var(--muted,#e6e8e6);line-height:1.45}
.vr-aide:empty{display:none}
.vr-autoriser{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:14px;background:var(--glass,rgba(235,245,235,.07))}
.vr-case{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.vr-case input{width:18px;height:18px;accent-color:var(--vx-vert);flex:none}
.vr-prive{font-size:12px;color:var(--dim,#a9ada9);line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--glass,rgba(235,245,235,.07))}
html[data-theme="clair"] .vr-prive{color:var(--muted,#3d4670)}

/* ---------------------------------------------------------------- tablette et téléphone ------------ */
@media (max-width:760px){
  .voix-sonne{top:76px;width:calc(100vw - 32px);gap:10px;padding:14px 14px 20px;grid-template-columns:auto minmax(0,1fr)}
  .vs-b{grid-column:1 / -1;justify-content:space-around}
  .vs-av,.vs-img,.vs-img .av{width:44px;height:44px}
  .voix-appel{top:76px;left:16px;right:16px;width:auto;max-width:none;max-height:calc(100dvh - 190px)}
  .voix-appel.plie{left:16px;right:16px;width:auto}
  .voix-appel.plie .va-t{max-width:none}
  .voix-regl{padding:76px 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .voix-sonne{animation:none}
  .vs-onde,.va-l.sonne .va-av::after{animation:none;opacity:.5}
}