/* Volny — Statistiques, réglages, récapitulatif d'un appel, SMS, installation, fiche contact, équipes, transfert. */
/* Statistiques */
.stats-outils{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stats-outils .titre-vue{margin:0}
.segments{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--trait);border-radius:12px;background:var(--surface)}
.segments button{border:0;background:none;height:var(--h-petit);padding:0 13px;border-radius:9px;font-weight:600;font-size:13px;color:var(--doux);cursor:pointer}
.segments button[aria-pressed="true"]{background:var(--encre);color:var(--surface)}
@media (prefers-color-scheme:dark){.segments button[aria-pressed="true"]{background:var(--accent);color:#fff}}
.tuiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tuile{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:14px 16px;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:2px}
.tuile-val{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tuile-lib{font-size:13px;font-weight:600;color:var(--doux)}
.tuile-sous{font-size:12px;color:var(--pale)}
.graphe{padding:4px 14px 12px}
.graphe svg{display:block;overflow:visible}
.grille-ligne{stroke:var(--trait);stroke-width:1}
.axe{fill:var(--pale);font-size:11px;font-family:inherit}
.legende{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--doux);font-weight:500}
.legende i,.infobulle i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.infobulle{position:fixed;z-index:60;pointer-events:none;background:var(--encre);color:var(--surface);font-size:13px;line-height:1.5;padding:9px 12px;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.tableau-stats{width:100%;border-collapse:collapse;font-size:14px}
.tableau-stats th{text-align:left;font-size:12px;font-weight:600;color:var(--pale);padding:6px 14px;border-bottom:1px solid var(--trait)}
.tableau-stats td{padding:11px 14px;border-bottom:1px solid var(--trait);font-variant-numeric:tabular-nums;vertical-align:middle}
.tableau-stats tr:last-child td{border-bottom:0}
.jauge-cell{width:30%}
.jauge{display:block;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.jauge span{display:block;height:100%;background:var(--serie-1);border-radius:6px}
.avatar-mini{display:inline-grid;width:26px;height:26px;font-size:12px;margin-right:9px;vertical-align:middle}

/* Réglages */
.reglage-corps{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px}
.reglage-corps h3{margin:8px 0 0;font-size:14px}
.reglage-actions{display:flex;justify-content:flex-end}
.jour-horaires{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--trait)}
.jour-horaires:last-child{border-bottom:0}
.jour-nom{width:84px;font-weight:600;font-size:14px;flex:none}
.plages{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.plage{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border-radius:10px;padding:4px 6px}
.plage input{font:500 14px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;font-family:inherit;color:var(--encre);background:var(--surface);border:1.5px solid var(--trait);border-radius:9px;height:var(--h-petit);padding:0 8px}
.ligne-form input{font:500 14px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;font-family:inherit;color:var(--encre);background:var(--surface);border:1.5px solid var(--trait);border-radius:var(--r-btn);height:var(--h-btn);padding:0 12px}
.plage input:disabled{background:transparent;border-color:transparent;padding:6px 2px}
.hm-jours{transition:opacity .2s}
.hm-jours.inactif{opacity:.45}
.hm-sous-titre{font-size:14px;font-weight:700;margin:6px 0 10px}
#hm-sonnerie .discret{margin-top:8px}
.interrupteur{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer}
.interrupteur input{position:absolute;opacity:0;width:1px;height:1px}
.interrupteur-piste{width:40px;height:24px;border-radius:999px;background:var(--trait);position:relative;flex:none;transition:background .2s}
.interrupteur-piste::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.interrupteur input:checked+.interrupteur-piste{background:var(--vert)}
.interrupteur input:checked+.interrupteur-piste::after{transform:translateX(16px)}
.interrupteur input:focus-visible+.interrupteur-piste{outline:2px solid var(--accent-2);outline-offset:2px}
.interrupteur input:disabled+.interrupteur-piste{opacity:.55}
ul.liste-simple{list-style:none;margin:0;padding:0}
.liste-simple li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait);font-size:14px}
.liste-simple li:last-child{border-bottom:0}
.ligne-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.ligne-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--doux)}
.ligne-form label.large{flex:1;min-width:180px}
.ligne-form label.large input{width:100%}
.champ-unite{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--doux)}
.champ-unite input{width:96px}
.annonce{margin:0;padding:14px 16px;border-radius:12px;background:var(--surface-2);border-left:3px solid var(--accent-2);font-size:14.5px;line-height:1.55}
.choix{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.choix label{flex-direction:row!important;align-items:center;gap:10px!important;font-size:14.5px!important;color:var(--encre)!important;font-weight:500!important}
.choix input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
.choix input[type=time]{width:auto;padding:6px 8px;font-size:14px}
@media (max-width:1020px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ouverture{margin-left:0;width:100%}.ouverture .btn{margin-left:auto}.jour-horaires{flex-wrap:wrap}.tableau-stats th,.tableau-stats td{padding:9px 8px}}

/* Récapitulatif d'un appel */
.ligne-appel{cursor:pointer}
.recap-tete{display:flex;align-items:center;gap:14px}
.recap-tete .avatar{width:48px;height:48px;font-size:18px}
.recap-tete h2{margin:0;font-size:20px}
.recap-sous{margin:3px 0 0;font-size:13px;color:var(--doux);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.resultat-ligne{display:flex;align-items:center;gap:8px}
.ico.ico-mini{width:26px;height:26px;border-radius:8px;flex:none}
.ico.ico-mini svg{width:14px;height:14px}
.badge-bloque{font-size:11px;font-weight:700;color:var(--rouge);background:var(--rouge-pale);border-radius:6px;padding:1px 7px}
.recap-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:2px 0 0}
.recap-faits>div{background:var(--surface-2);border-radius:12px;padding:10px 13px}
.recap-faits dt{font-size:11.5px;font-weight:600;color:var(--pale)}
.recap-faits dd{margin:2px 0 0;font-size:14px;font-weight:600}
.recap-bloc h3{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--doux)}
.recap-bloc .enreg-ligne{margin-top:0}
.recap-transcrire{margin-top:9px}
.recap-transcrire .btn svg{width:14px;height:14px;fill:currentColor}
ul.recap-sonneries,ul.recap-historique{list-style:none;margin:0;padding:0;border:1px solid var(--trait);border-radius:12px;overflow:hidden}
.recap-sonneries li{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px}
.recap-sonneries li+li,.recap-historique li+li{border-top:1px solid var(--trait)}
.recap-sonneries .avatar-mini{margin-right:0}
.sonnerie{margin-left:auto;font-size:13px;font-weight:600}
.sonnerie.ok{color:var(--vert)} .sonnerie.non{color:var(--rouge)} .sonnerie.neutre{color:var(--pale)}
.recap-historique button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 12px;text-align:left;cursor:pointer;font-size:13.5px}
.recap-historique button:hover{background:var(--surface-2)}
.recap-historique .ico{width:30px;height:30px;border-radius:9px}
.recap-historique .ico svg{width:15px;height:15px}
.recap-historique .discret{margin-left:auto}
#recap-corps{display:flex;flex-direction:column;gap:16px}
#dlg-appel{max-height:calc(100vh - 40px)}
.mini-rotation{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .8s linear infinite;vertical-align:-1px}
@keyframes tourne{to{transform:rotate(360deg)}}

/* SMS */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sms-recu{cursor:pointer}
.extrait{color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.btn-sms svg{width:14px;height:14px;fill:currentColor}
.contact-sms{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.contact-sms:empty{display:none}
.fil-sms{display:flex;flex-direction:column;gap:8px;max-height:42vh;min-height:120px;overflow-y:auto;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--trait)}
.bulle{max-width:78%;display:flex;flex-direction:column;gap:3px}
.bulle p{margin:0;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-line;word-wrap:break-word}
.bulle.entrant{align-self:flex-start}
.bulle.entrant p{background:var(--surface);border:1px solid var(--trait);border-bottom-left-radius:5px}
.bulle.sortant{align-self:flex-end;align-items:flex-end}
.bulle.sortant p{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bulle-meta{font-size:11.5px;color:var(--pale);padding:0 4px}
.statut-sms.delivered{color:var(--vert);font-weight:600}
.statut-sms.failed,.statut-sms.undelivered{color:var(--rouge);font-weight:700}
.modeles-sms{display:flex;flex-wrap:wrap;gap:6px}
.modele{border:1px dashed var(--trait);background:none;border-radius:var(--r-petit);min-height:var(--h-petit);padding:0 12px;font:500 12.5px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;font-family:inherit;color:var(--doux);cursor:pointer;text-align:left}
.modele:hover{border-color:var(--accent-2);color:var(--accent)}
.compteur-sms{margin:-8px 0 0;font-size:12px;color:var(--pale);text-align:right;min-height:1em}
.compteur-sms.long{color:var(--ambre);font-weight:600}

/* Installer sur le téléphone */
/* onglet « Standard » de l'appli mobile : pas d'installation, la déconnexion se fait dans l'appli,
   pas d'export CSV (aucun téléchargement dans l'appli ; il reste sur le site) */
.dans-appli .bandeau-installer,.dans-appli [data-ouvrir="dlg-installer"],.dans-appli #deconnexion,.dans-appli #journal-csv{display:none!important}
.bandeau-installer{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre)}
.bandeau-installer img{border-radius:10px;flex:none}
.bandeau-installer p{margin:0;flex:1;display:flex;flex-direction:column;font-size:14px}
.bandeau-installer p span{font-size:12.5px;color:var(--doux)}
.fermer-bandeau{border:0;background:none;color:var(--pale);font-size:15px;cursor:pointer;padding:6px}
.icone-app{border-radius:12px;flex:none}
.alerte-ok{background:var(--vert-pale);color:var(--vert)}
ol.tuto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tuto li{display:flex;gap:14px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.tuto li>div{flex:1;min-width:0}
.tuto b{font-size:15px}
.tuto p{margin:3px 0 0;font-size:14px;color:var(--doux);line-height:1.5}
.tuto-num{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--encre);color:var(--surface);font-weight:800;font-size:14px}
@media (prefers-color-scheme:dark){.tuto-num{background:var(--accent);color:#fff}}
.tuto-direct{background:var(--vert-pale)!important}
.tuto-direct .tuto-num{background:var(--vert)}
.tuto-ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--trait);vertical-align:middle;margin:0 2px}
.tuto-ico svg{width:15px;height:15px;fill:#2B7BF2}
@media (max-width:640px){.bandeau-installer{flex-wrap:wrap}.bandeau-installer p{flex-basis:calc(100% - 90px)}}

/* Carte SMS */
.carte-action{margin-left:auto}
.carte-tete .pastille:not([hidden])+.carte-action{margin-left:8px}
.sms-recu.non-lu .element-titre{font-weight:800}
.badge-non-lu{margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:1px 7px;vertical-align:2px}
.sms-destinataire{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--doux)}
/* Fiche contact : historique */
.formulaire>.segments{align-self:flex-start}
.tuiles-fiche{grid-template-columns:repeat(3,minmax(0,1fr))}
.tuiles-fiche .tuile{box-shadow:none;background:var(--surface-2);border:0}
.tuiles-fiche .tuile-val{font-size:21px}
.contact-actions-rapides{display:flex;flex-wrap:wrap;gap:8px}
.contact-actions-rapides:empty{display:none}
ul.chronologie{max-height:46vh;overflow-y:auto;border:1px solid var(--trait);border-radius:14px;padding:4px}
.chronologie .jour-sep{padding:10px 12px 2px}
.evt-sms{cursor:pointer}
.evt-sms.sortant .element-titre{color:var(--doux)}
#contact-vue-fiche{display:flex;flex-direction:column;gap:16px}
#contact-vue-historique{display:flex;flex-direction:column;gap:14px}
@media (max-width:640px){.tuiles-fiche{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Statistiques : période libre, coûts */
/* « Du [date] au [date] [Afficher] » sur une seule ligne, à la hauteur des boutons de période */
.periode-libre{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.periode-libre label{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--doux)}
.periode-libre input{font:500 14px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--encre);background:var(--surface);border:1.5px solid var(--trait);border-radius:var(--r-petit);height:var(--h-petit);padding:0 8px}
.couts-entete{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:4px 14px 14px}
.couts-entete>div{background:var(--surface-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.couts-entete .tuile-val{font-size:22px}
.tableau-stats .num{text-align:right;white-space:nowrap;font-weight:600}
#stats-couts>.discret{padding:10px 14px 4px;margin:0}
/* Équipes */
.matrice{overflow-x:auto}
.matrice-table th.centre,.matrice-table td.centre{text-align:center}
.case{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.case:disabled{cursor:not-allowed}
.cases-services{display:flex;flex-wrap:wrap;gap:8px}
.case-service{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px!important;height:var(--h-petit);padding:0 12px 0 10px;border:1px solid var(--trait);border-radius:var(--r-petit);cursor:pointer}
.case-service input{width:16px!important;height:16px;accent-color:var(--accent);margin:0}
/* SMS : choix du destinataire */
.sms-destinataire{position:relative;display:flex;flex-direction:column;gap:7px}
.sms-destinataire label{font-size:13px;font-weight:600;color:var(--doux)}
ul.suggestions{list-style:none;margin:0;padding:4px;border:1px solid var(--trait);border-radius:var(--r-btn);background:var(--surface);box-shadow:0 14px 34px -14px rgba(0,0,0,.3)}
.suggestions button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:var(--r-petit);cursor:pointer;text-align:left;font-size:14px}
.suggestions button:hover,.suggestions button:focus-visible{background:var(--surface-2)}
.suggestions .discret{margin-left:auto}
.suggestions .avatar-mini{margin-right:0}
@media (max-width:640px){.couts-entete{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 4px 12px}}

/* Fiche contact : appartenance à l'équipe */
.bloc-membre{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--trait);border-radius:14px;background:var(--surface-2)}
.bloc-membre-tete{display:flex;align-items:center;gap:10px}
.bloc-membre-tete h3{margin:0;font-size:14px}
.bloc-membre-tete .discret{margin-left:auto}
.bloc-membre .discret{margin:0}
.bloc-membre .bloc-membre-tete .discret{margin-left:auto}
.formulaire label.interrupteur{flex-direction:row;align-items:center;gap:10px;font-size:14px;color:var(--encre)}
.formulaire label.interrupteur input{width:1px}
.membre-champs{display:flex;flex-direction:column;gap:12px}
.membre-champs select{width:100%;font:500 15px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--encre);background:var(--surface);border:1.5px solid var(--trait);border-radius:12px;height:46px;padding:0 12px}
.membre-champs input[type=email]{background:var(--surface)}
.membre-acces{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.membre-acces:empty{display:none}
.membre-boutons{display:flex;flex-wrap:wrap;gap:8px}
.bloc-membre .numeros{padding-top:4px;border-top:1px solid var(--trait)}

/* Transfert d'appel */
.btn-ligne svg{width:15px;height:15px;fill:currentColor}
ul.choix-membres{list-style:none;margin:0;padding:0;border:1px solid var(--trait);border-radius:14px;overflow:hidden}
.choix-membres li+li{border-top:1px solid var(--trait)}
.choix-membre{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;border:0;background:none;padding:12px 14px;text-align:left;cursor:pointer;font-size:14px}
.choix-membre:hover:not(:disabled){background:var(--surface-2)}
.choix-membre:disabled{cursor:not-allowed;opacity:.55}
.choix-membre .avatar-mini{margin-right:0}
.choix-membre .services{margin:0}
.etat-choix{margin-left:auto;font-size:13px;font-weight:600;color:var(--doux)}
.etat-choix.libre{color:var(--vert)} .etat-choix.indispo{color:var(--rouge)} .etat-choix.sonne{color:var(--ambre)}

/* Débogueur Twilio (administrateurs) */
.carte-alertes{margin-bottom:16px}
.liste-alertes li{align-items:flex-start}
.alerte-texte{min-width:0;flex:1}
.alerte-texte p{margin:4px 0 0;overflow-wrap:anywhere}
.alerte-requete{font-size:12.5px}
.alerte-twilio.nouvelle .alerte-texte>b{color:var(--rouge)}
.alerte-actions{display:flex;gap:6px;flex-shrink:0}
.bandeau-alertes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:10px 12px 10px 16px;border-radius:12px;background:var(--rouge-pale);color:var(--rouge);font-weight:600;font-size:14px}
@media (max-width:640px){.liste-alertes li{flex-wrap:wrap}}
.carte-alertes .reglage-actions{gap:8px;flex-wrap:wrap;margin-top:10px}
.liste-alertes.anciennes{opacity:.7;border-top:1px solid var(--trait)}
.transfert-mode{align-self:flex-start}