:root{
  --fond:#f4f6fc; --carte:#ffffff; --encre:#14143a; --doux:#6b7280; --tres-doux:#9aa3b8;
  --bord:#e7eaf3; --primaire:#4b3ff0; --primaire-2:#7b5bff; --primaire-fonce:#2a2f74;
  --nuit:#14143a; --nuit-2:#2a2f74; --ok:#16a34a; --ko:#e11d48; --rayon:16px;
  --ombre:0 18px 40px -24px rgba(30,30,90,.35); --ombre-douce:0 2px 10px rgba(30,30,90,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--encre);background:var(--fond);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
a{color:var(--primaire);text-decoration:none}
.doux{color:var(--doux);font-size:12px}
.btn{border:none;border-radius:12px;padding:10px 16px;font-weight:650;font-size:13px;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s;letter-spacing:.1px}
.btn:active{transform:translateY(1px)}
.btn.plein{background:linear-gradient(135deg,var(--primaire),var(--primaire-2));color:#fff;box-shadow:0 8px 20px -8px rgba(75,63,240,.55)}
.btn.plein:hover{box-shadow:0 12px 26px -8px rgba(75,63,240,.7)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff}
main .btn.ghost,.modale .btn.ghost{background:#eef1fb;color:var(--primaire)}
main .btn.ghost:hover,.modale .btn.ghost:hover{background:#e4e8fa}
.btn.danger{background:#fff;color:var(--ko);border:1px solid #f6cdd6}
.btn.petit{padding:6px 11px;font-size:12px;border-radius:9px}

/* ===== en-tête ===== */
header{display:flex;align-items:center;gap:14px;padding:12px 22px;background:linear-gradient(120deg,var(--nuit),var(--nuit-2));color:#fff;box-shadow:0 6px 24px -14px rgba(0,0,0,.6);z-index:5}
.logo{font-size:18px;font-weight:800;display:flex;align-items:center;gap:9px;letter-spacing:.2px}
.pastille{background:linear-gradient(135deg,#9bc9ff,#c9b6ff);color:#001d35;border-radius:9px;padding:3px 9px;font-size:13px;font-weight:800}
.etat{flex:1;font-size:12.5px}
.etat .ok{color:#7ef0a8}.etat .ko{color:#ffb4c2}
#moi{color:rgba(255,255,255,.75);font-size:12.5px}

/* ===== mise en page ===== */
#app{flex:1;display:flex;flex-direction:column;min-height:0}
main{flex:1;display:flex;min-height:0}
aside{width:296px;background:var(--carte);border-right:1px solid var(--bord);padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.liste{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1px solid var(--bord);border-radius:14px;padding:9px 11px;cursor:pointer;transition:transform .14s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.item:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce)}
.item.actif{border-color:transparent;box-shadow:0 10px 24px -14px rgba(75,63,240,.5)}
.item.actif:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:9px;background:linear-gradient(var(--primaire),var(--primaire-2))}
.item-av{width:40px;height:40px;border-radius:11px;object-fit:cover;flex:none;background:#eef1fb}
.item-txt{min-width:0}.item-txt b{font-size:13.5px}.item-txt .doux{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aide{font-size:11.5px;color:var(--tres-doux);margin-top:auto;line-height:1.5}

/* ===== chat ===== */
.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:radial-gradient(1200px 500px at 60% -10%,#eef0ff 0%,var(--fond) 60%)}
.chat-tete{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--bord);background:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.chat-tete b{font-size:16px}
.chat-tete .actions{display:flex;gap:8px}
.banniere{background:#fff6e5;border:1px solid #f3dca6;color:#7a5a12;padding:11px 15px;margin:14px 22px 0;border-radius:12px;font-size:13px}

/* avatar robot */
.avatar-zone{display:flex;justify-content:center;padding:18px 0 4px;transition:padding .3s}
.avatar{position:relative;width:120px;height:120px;border-radius:26px;overflow:hidden;isolation:isolate;background:#0b0b1a;box-shadow:0 20px 44px -20px rgba(75,63,240,.55);animation:flotte 5s ease-in-out infinite}
.avatar__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.avatar__video.est-actif{opacity:1}
.avatar__halo{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;transition:box-shadow .5s ease;box-shadow:inset 0 0 0 0 rgba(75,63,240,0)}
#avatar[data-etat="ecoute"] .avatar__halo{box-shadow:inset 0 0 0 3px #16a34a,inset 0 0 26px rgba(22,163,74,.4)}
#avatar[data-etat="reflexion"] .avatar__halo{box-shadow:inset 0 0 0 3px #7b5bff,inset 0 0 26px rgba(123,91,255,.45);animation:halo-reflexion 1.6s ease-in-out infinite}
#avatar[data-etat="parole"] .avatar__halo{box-shadow:inset 0 0 0 3px var(--primaire),inset 0 0 26px rgba(75,63,240,.4)}
@keyframes halo-reflexion{50%{box-shadow:inset 0 0 0 3px #c23cff,inset 0 0 34px rgba(194,60,255,.5)}}
.avatar-zone:after{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(123,91,255,.25),transparent);filter:blur(6px);z-index:-1}
.chat.vide .avatar{width:188px;height:188px;border-radius:34px}
.chat.vide .avatar-zone{padding:40px 0 10px}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.messages{flex:1;overflow:auto;padding:16px 22px 10px;display:flex;flex-direction:column;gap:12px}
.hero{text-align:center;margin:6px auto;max-width:640px}
.hero-titre{font-size:26px;font-weight:800;margin:6px 0 6px;background:linear-gradient(120deg,var(--encre),var(--primaire));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sous{color:var(--doux);font-size:14.5px;line-height:1.6;margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:#fff;border:1px solid var(--bord);color:var(--primaire);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce);background:#f6f7ff}

.msg{display:flex;animation:montee .35s cubic-bezier(.2,.8,.2,1) both}
.msg.user{justify-content:flex-end}.msg.assistant{justify-content:flex-start}
@keyframes montee{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bulle{max-width:74%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.55;word-break:break-word;box-shadow:var(--ombre-douce)}
.msg.user .bulle{background:linear-gradient(135deg,var(--primaire),var(--primaire-2));color:#fff;border-bottom-right-radius:5px}
.msg.assistant .bulle{background:#fff;border:1px solid var(--bord);border-bottom-left-radius:5px}
.bulle.doux{color:var(--doux);display:inline-flex;gap:5px;align-items:center}
.bulle.doux:after{content:'';width:34px;height:8px;border-radius:9px;background:
  radial-gradient(circle 3px at 6px 50%,var(--primaire) 95%,transparent) 0/12px 100% no-repeat,
  radial-gradient(circle 3px at 6px 50%,var(--primaire) 95%,transparent) 11px/12px 100% no-repeat,
  radial-gradient(circle 3px at 6px 50%,var(--primaire) 95%,transparent) 22px/12px 100% no-repeat;animation:pts 1s infinite}
@keyframes pts{0%,100%{opacity:.3}50%{opacity:1}}
.modele{font-size:10.5px;color:var(--tres-doux);margin-top:4px}

.saisie{display:flex;gap:10px;padding:14px 22px 18px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border-top:1px solid var(--bord)}
.saisie textarea{flex:1;border:1.6px solid var(--bord);border-radius:14px;padding:13px 15px;font-size:14px;resize:none;font-family:inherit;max-height:150px;transition:border-color .2s,box-shadow .2s;background:#fff}
.saisie textarea:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 4px rgba(75,63,240,.12)}

/* ===== login ===== */
.login{position:fixed;inset:0;background:radial-gradient(900px 500px at 70% -10%,#3a2fb0,transparent),linear-gradient(135deg,var(--nuit),var(--nuit-2));display:flex;justify-content:center;align-items:center}
.carte-login{background:#fff;border-radius:22px;padding:34px 30px;width:min(390px,92%);text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.carte-login .logo{justify-content:center;color:var(--encre);margin-bottom:6px;font-size:20px}
.btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;border:1.6px solid #dadce0;padding:12px;border-radius:12px;font-weight:700;margin-top:14px;transition:box-shadow .2s}
.btn.google:hover{box-shadow:0 6px 16px -8px rgba(0,0,0,.3)}
.btn.google:before{content:'';width:18px;height:18px;background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);border-radius:50%;-webkit-mask:radial-gradient(circle 5px,transparent 95%,#000);mask:radial-gradient(circle 5px,transparent 95%,#000)}
.sep{color:var(--tres-doux);font-size:12px;margin:14px 0;position:relative}
.erreur{color:var(--ko);font-size:12.5px;min-height:16px;margin-top:10px}

/* ===== modales ===== */
.modale{position:fixed;inset:0;background:rgba(10,14,34,.5);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:34px 14px;z-index:60;animation:fondu .2s both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.carte{background:#fff;border-radius:20px;width:min(640px,100%);padding:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45);animation:pop .22s cubic-bezier(.2,.8,.2,1) both}
.carte.large{width:min(840px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modale-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px}
.modale-tete .x{border:none;background:#eef1fb;border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--doux)}
.section{border-top:1px solid var(--bord);padding-top:16px;margin-top:14px}.section h3{margin:0 0 4px;font-size:15px}
.carte label{display:block;font-size:12.5px;color:var(--doux);margin-top:12px;font-weight:600}
.carte input,.carte textarea,.carte select{width:100%;border:1.6px solid var(--bord);border-radius:11px;padding:10px 12px;font-size:14px;margin-top:5px;font-family:inherit;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.carte input:focus,.carte textarea:focus,.carte select:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 3px rgba(75,63,240,.12)}
.modale-pied{display:flex;align-items:center;gap:8px;margin-top:18px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.interrupteur{display:flex;align-items:center;gap:9px;font-size:13px;color:#3b3e5c;margin-top:14px;font-weight:500}
.interrupteur input{width:auto;margin:0}
.ligne{display:flex;gap:8px}.ligne input{flex:1}.ligne select{border:1.6px solid var(--bord);border-radius:11px;padding:10px}
.guide{font-size:13px;color:#3b3e5c;line-height:1.7;padding-left:20px}
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--bord);margin:8px 0 14px}
.ong{border:none;background:none;padding:11px 15px;font-weight:700;font-size:13px;color:var(--doux);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .2s,border-color .2s}
.ong.actif{color:var(--primaire);border-bottom-color:var(--primaire)}

/* connecteurs / comptes / tables */
.connecteurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:12px}
.conn{border:1px solid var(--bord);border-radius:14px;padding:13px;transition:border-color .2s,background .2s}
.conn.on{border-color:#c3d0fb;background:#f7f9ff}
.conn-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag{font-size:11px;font-weight:800;color:#166534;background:#dcfce7;padding:2px 9px;border-radius:999px}
.ok{color:var(--ok);font-size:12px}.ko{color:var(--ko);font-size:12px}
.conn-champs{display:grid;gap:7px;margin-top:9px}.conn-champs input{width:100%;border:1.4px solid var(--bord);border-radius:9px;padding:8px 10px;font-size:13px}
.switch{position:relative;display:inline-block;width:42px;height:23px}.switch input{display:none}
.switch span{position:absolute;inset:0;background:#cfd4e4;border-radius:999px;transition:.2s}.switch span:before{content:'';position:absolute;width:19px;height:19px;left:2px;top:2px;background:#fff;border-radius:999px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:linear-gradient(135deg,var(--primaire),var(--primaire-2))}.switch input:checked+span:before{transform:translateX(19px)}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}.puce{font-size:12.5px;display:inline-flex;align-items:center;gap:6px;background:#eef1fb;padding:6px 11px;border-radius:999px;cursor:pointer}
.tab{width:100%;border-collapse:collapse;font-size:13px}.tab th{text-align:left;color:var(--doux);font-weight:700;padding:7px 8px;border-bottom:1px solid var(--bord)}
.tab td{padding:8px;border-bottom:1px solid #f1f3fa;vertical-align:top}.tab select,.tab input{border:1px solid var(--bord);border-radius:8px;padding:5px 8px;font-size:12.5px}
code{background:#eef1fb;padding:1px 6px;border-radius:6px;font-size:12.5px}

/* scenes video */
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px;margin-top:6px}
.scene{border:1px solid var(--bord);border-radius:12px;padding:9px;background:#fbfcff}
.scene-apercu{width:100%;height:88px;border-radius:9px;object-fit:cover;background:#0b0b1a}
.scene-info{margin-top:7px}.scene-info b{font-size:12.5px}
#ma-videos-bloc>label{margin-top:14px;display:block}
.btn.ghost.petit input{display:none}

/* responsive */
/* barre de dépôt / tiroir des assistants */
.aside-tete{display:none}
.aside-fond{display:none}
@media(max-width:820px){
  /* la liste des assistants devient un TIROIR qui glisse depuis la gauche */
  aside{display:flex!important;position:fixed;top:0;left:0;bottom:0;width:min(84%,330px);z-index:90;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 50px rgba(0,0,0,.45);padding-top:14px;overflow-y:auto}
  body.aside-ouvert aside{transform:none}
  .aside-fond{display:block;position:fixed;inset:0;background:rgba(5,6,16,.5);z-index:89;opacity:0;pointer-events:none;transition:opacity .28s}
  body.aside-ouvert .aside-fond{opacity:1;pointer-events:auto}
  .aside-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .aside-tete b{font-family:'Sora','Inter',sans-serif;font-size:16px}
  .aside-x{border:none;background:#eef1fb;color:var(--doux);width:34px;height:34px;border-radius:999px;font-size:20px;cursor:pointer;line-height:1}
  .btn-assistants{display:grid}
  /* en-tête global compacté */
  header{gap:8px;padding:10px 12px}
  header .etat,header #moi{display:none}
  .logo{font-size:16px}
}

.champ-login{width:100%;border:1.6px solid var(--bord);border-radius:11px;padding:11px 13px;font-size:14px;margin-top:10px;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.champ-login:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 3px rgba(75,63,240,.12)}

/* ── panneau Configurer assistant (onglets) ──────────────────────────────── */
.conf-carte{width:min(880px,100%);display:flex;flex-direction:column;max-height:90vh;padding:20px 22px}
.ma-tete{align-items:center;margin-bottom:0}
.ma-tete-id{display:flex;align-items:center;gap:12px}
.ma-avatar-mini{width:48px;height:48px;border-radius:13px;object-fit:cover;background:#0b0b1a;box-shadow:0 6px 16px -6px rgba(75,63,240,.6)}
.ma-tete-id b{font-size:16px}
.conf-onglets{display:flex;gap:2px;border-bottom:1px solid var(--bord);margin:16px -4px 0;padding:0 4px;overflow-x:auto}
.conf-tab{border:none;background:none;padding:11px 14px;font-weight:700;font-size:13px;color:var(--doux);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.conf-tab:hover{color:var(--encre)}
.conf-tab.actif{color:var(--primaire);border-bottom-color:var(--primaire)}
.conf-corps{overflow-y:auto;flex:1;min-height:200px;padding:2px 4px 4px}
.conf-corps>.conf-pan>label:first-child{margin-top:8px}
.conf-intro{font-size:13px;color:var(--doux);margin:12px 0 10px;line-height:1.55}
/* scènes enrichies */
.scenes{grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:14px}
.scene{border:1.5px solid var(--bord);border-radius:14px;padding:10px;background:#fbfcff;transition:border-color .2s,box-shadow .2s}
.scene.perso{border-color:var(--primaire);box-shadow:0 8px 22px -14px rgba(75,63,240,.5)}
.scene-apercu{width:100%;height:118px;border-radius:10px;object-fit:cover;background:#0b0b1a}
.scene-info{margin-top:8px}.scene-info b{font-size:13px}
.scene-etat{font-size:11.5px;margin-top:3px;color:var(--tres-doux);font-weight:600}
.scene-etat.ok{color:var(--primaire)}

/* ── connecteurs par assistant (cartes) ──────────────────────────────────── */
#ma-connecteurs{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.conn-carte{border:1.5px solid var(--bord);border-radius:16px;padding:14px 16px;background:#fbfcff;transition:border-color .2s,box-shadow .2s,background .2s}
.conn-carte.on{border-color:#c3d0fb;background:#fff;box-shadow:0 10px 26px -18px rgba(75,63,240,.5)}
.conn-carte-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.conn-id{display:flex;align-items:center;gap:12px;min-width:0}
.conn-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;background:var(--ac);box-shadow:0 6px 16px -6px var(--ac)}
.conn-txt{min-width:0}.conn-txt b{font-size:14px}.conn-txt .doux{margin-top:1px}
.conn-config{margin-top:12px;padding-top:12px;border-top:1px dashed var(--bord)}
.conn-config[hidden]{display:none}
.conn-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.conn-grille label{margin-top:0;font-size:12px}
.conn-statut{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--tres-doux)}
.conn-statut.ok{color:var(--primaire)}
@media(max-width:560px){.conn-grille{grid-template-columns:1fr}}

/* ── WhatsApp (QR code) dans la carte connecteur ─────────────────────────── */
.wa-bloc{margin-top:2px}
.wa-qr{display:flex;justify-content:center;padding:10px;background:#fff;border:1px solid var(--bord);border-radius:14px;margin-bottom:8px}
.wa-qr img{border-radius:8px;display:block}
.wa-ok{font-weight:800;color:#16a34a;font-size:14px}
.wa-etat{padding:4px 0}

/* ── boîte « comment connecter » ─────────────────────────────────────────── */
.conn-aide{margin:2px 0 12px;border:1px solid #e0e7ff;background:#f5f7ff;border-radius:12px;padding:2px 12px}
.conn-aide summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--primaire);padding:9px 0;list-style:none}
.conn-aide summary::-webkit-details-marker{display:none}
.conn-aide summary:before{content:'\203A';display:inline-block;margin-right:8px;transition:transform .2s;font-weight:800}
.conn-aide[open] summary:before{transform:rotate(90deg)}
.conn-aide ol{margin:2px 0 10px;padding-left:20px}
.conn-aide li{font-size:12.5px;color:#4b4f6b;line-height:1.6;margin-bottom:5px}
.conn-aide a{word-break:break-all}

/* ── onglet Utilisateurs (centre de gestion) ─────────────────────────────── */
.u-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:2px 0 16px}
.u-stat{background:linear-gradient(180deg,#f7f9ff,#fff);border:1px solid var(--bord);border-radius:14px;padding:12px 14px;text-align:center}
.u-stat-n{font-size:22px;font-weight:800;color:var(--primaire)}
.u-stat-l{font-size:11.5px;color:var(--doux);font-weight:600;margin-top:2px}
.u-inviter{border:1.5px dashed #c3d0fb;background:#f7f9ff;border-radius:16px;padding:14px 16px}
.u-inviter-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.u-inviter-tete b{font-size:14px}
.u-inviter-champs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.u-inviter-champs input,.u-inviter-champs select{border:1.6px solid var(--bord);border-radius:10px;padding:9px 11px;font-size:13px;flex:1;min-width:120px}
.u-inviter-champs #inv-quota{max-width:130px;flex:none}.u-inviter-champs #inv-mdp{max-width:150px;flex:none}
.u-carte{border:1px solid var(--bord);border-radius:18px;padding:16px;background:#fff;margin-bottom:14px;box-shadow:var(--ombre-douce);animation:u-entree .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes u-entree{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.u-tete{display:flex;align-items:center;gap:12px}
.u-av{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 6px 16px -6px rgba(75,63,240,.5)}
.u-id{flex:1;min-width:0}.u-id b{font-size:14.5px}
.u-badge{font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;background:#eef1fb;color:var(--primaire)}
.u-badge.admin{background:#e9fbef;color:#16a34a}
.u-jauge-bloc{margin-top:14px}
.u-jauge-tete{display:flex;justify-content:space-between;font-size:12px;color:var(--doux);font-weight:600;margin-bottom:5px}
.jauge{height:9px;border-radius:999px;background:#eef1fb;overflow:hidden}
.jauge-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primaire),var(--primaire-2));transition:width 1s cubic-bezier(.2,.8,.2,1)}
.jauge-fill.orange{background:linear-gradient(90deg,#f59e0b,#f97316)}
.jauge-fill.rouge{background:linear-gradient(90deg,#ef4444,#dc2626)}
.u-reglages{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.u-reglages label{font-size:12px;color:var(--doux);font-weight:600;display:block}
.u-reglages select,.u-reglages input{width:100%;border:1.6px solid var(--bord);border-radius:10px;padding:9px 11px;font-size:13px;margin-top:4px}
.u-switchs{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.u-assistants{margin-top:14px}
.u-chips{display:flex;flex-wrap:wrap;gap:7px}
.u-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:#eef1fb;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.u-chip.on{background:linear-gradient(135deg,var(--primaire),var(--primaire-2));color:#fff}
.u-chip input{margin:0}
.u-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--bord)}
.u-invits{margin-top:10px;font-size:12.5px;color:var(--doux);background:#fff8ec;border:1px solid #fde8c4;border-radius:10px;padding:9px 12px}
@media(max-width:640px){.u-stats{grid-template-columns:repeat(2,1fr)}.u-reglages{grid-template-columns:1fr}}
.u-capacite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--bord);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:13px}
.u-capacite input{border:1.6px solid var(--bord);border-radius:10px;padding:8px 11px;font-size:13px;max-width:140px}
.msg-img{max-width:100%;border-radius:12px;margin-top:8px;border:1px solid var(--bord);box-shadow:0 8px 24px -14px rgba(30,30,90,.4);display:block}
.msg-video{max-width:100%;border-radius:12px;margin-top:8px;border:1px solid var(--bord);box-shadow:0 8px 24px -14px rgba(30,30,90,.4);display:block;background:#000}

/* ── overlay de chargement (avatar plein écran progressif) ───────────────── */
.charge{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(14,16,40,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;pointer-events:none;transition:opacity .5s ease,background .5s ease,backdrop-filter .5s ease}
.charge.actif{opacity:1;pointer-events:all;background:rgba(14,16,40,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.charge-av{position:relative;width:150px;height:150px;border-radius:34px;overflow:hidden;transform:scale(.5);transition:transform .65s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 90px -20px rgba(75,63,240,.75)}
.charge.actif .charge-av{transform:scale(2.1)}
.charge-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;display:block}
.charge-vid.est-actif{opacity:1}
.charge-halo{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(123,91,255,.65),inset 0 0 44px rgba(123,91,255,.45);animation:halo-reflexion 1.6s ease-in-out infinite}
.charge-txt{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px;margin-top:120px;opacity:0;transform:translateY(8px);transition:opacity .4s ease .25s,transform .4s ease .25s;text-align:center;padding:0 20px}
.charge.actif .charge-txt{opacity:1;transform:none}
.charge-points{display:flex;gap:7px}
.charge-points i{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.5;animation:charge-pt 1s infinite}
.charge-points i:nth-child(2){animation-delay:.15s}.charge-points i:nth-child(3){animation-delay:.3s}
@keyframes charge-pt{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.bulle a{color:var(--primaire);font-weight:600;text-decoration:underline;word-break:break-word}
.bulle a:hover{color:var(--primaire-2)}
.valid-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn-val{border:0;border-radius:10px;padding:9px 16px;font-size:.92rem;font-weight:700;cursor:pointer;transition:transform .08s ease,filter .15s ease;color:#fff}
.btn-val:hover{filter:brightness(1.07)}
.btn-val:active{transform:translateY(1px)}
.btn-val.oui{background:linear-gradient(135deg,#16a34a,#15803d)}
.btn-val.non{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.btn-val.autre{background:linear-gradient(135deg,#6b7280,#4b5563)}
.liste-fichiers{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-top:6px}
.fich-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bord,#e5e7eb);border-radius:10px;background:#fff}
.fich-ic{font-size:1.15rem;flex:0 0 auto}
.fich-nom{flex:1;font-weight:600;color:var(--primaire);text-decoration:none;word-break:break-word}
.fich-nom:hover{text-decoration:underline}
.fich-taille{flex:0 0 auto;font-size:.82rem;color:#6b7280}
#btn-joindre{flex:0 0 auto;font-size:1.2rem;padding:0 12px}
.conv-bar{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--bord,#e5e7eb);background:#fafafb;flex-wrap:wrap}
.conv-lbl{font-size:.82rem;color:#6b7280}
#conv-select{flex:1;min-width:140px;max-width:420px;padding:6px 10px;border:1px solid var(--bord,#e5e7eb);border-radius:8px;background:#fff;font-size:.9rem}
.btn.petit{padding:5px 10px;font-size:.84rem}
.jauge{height:12px;border-radius:7px;background:#eceef2;overflow:hidden;margin:6px 0}
.jauge-barre{height:100%;border-radius:7px;transition:width .3s ease}
.etat-bloc{border:1px solid var(--bord,#e5e7eb);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fff}
.etat-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.etat-tete span{color:#6b7280;font-size:.88rem}
.etat-grille{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.etat-grille>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed #eef0f3}
.etat-grille>div:last-child{border-bottom:0}
.etat-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.88rem}
.etat-table th,.etat-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eef0f3}
.etat-table th{color:#6b7280;font-weight:600}
.etat-table td:not(:first-child),.etat-table th:not(:first-child){text-align:right}
.etat-conseils{border:1px solid #fcd34d;background:#fffbeb;color:#92400e;border-radius:12px;padding:12px 14px;line-height:1.5}
.etat-ok{border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46;border-radius:12px;padding:12px 14px}

/* ====================================================================== */
/* ===============  REFONTE 2026 — design moderne & ergonomique  ========= */
/* ====================================================================== */
:root{
  --fond:#f4f5fb; --carte:#ffffff; --encre:#0f1430; --doux:#6b7390; --tres-doux:#a2a9bf;
  --bord:#eceef7; --bord-fort:#e2e5f1;
  --primaire:#5b4bf5; --primaire-2:#8b5cf6; --primaire-fonce:#241b63; --accent:#06b6d4;
  --nuit:#14163a; --nuit-2:#241a5e; --ok:#16a34a; --ko:#e11d48; --rayon:18px;
  --ombre:0 24px 50px -28px rgba(27,24,99,.42); --ombre-douce:0 6px 20px -12px rgba(27,24,99,.16);
  --ombre-nette:0 2px 6px rgba(20,22,58,.05);
}
body{font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:
  radial-gradient(900px 420px at 88% -8%,rgba(139,92,246,.14),transparent 60%),
  radial-gradient(760px 420px at 6% 2%,rgba(6,182,212,.10),transparent 55%),
  var(--fond);-webkit-font-smoothing:antialiased;letter-spacing:.1px}
.logo,.hero-titre,.ma-tete-id b,.modale-tete b{font-family:'Sora','Inter',sans-serif;letter-spacing:-.2px}

/* boutons : icônes SVG + finitions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:650;transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .2s,color .2s,filter .2s}
.btn svg{width:18px;height:18px;flex:none;stroke-width:2}
.btn:hover{transform:translateY(-1px)}
.btn.plein{background:linear-gradient(135deg,var(--primaire),var(--primaire-2));box-shadow:0 10px 24px -10px rgba(91,75,245,.6)}
.btn.plein:hover{box-shadow:0 16px 32px -12px rgba(91,75,245,.72);filter:brightness(1.03)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(4px)}
header .btn.ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
main .btn.ghost,.modale .btn.ghost{background:#eef0fb;color:var(--primaire);border:1px solid transparent}
main .btn.ghost:hover,.modale .btn.ghost:hover{background:#fff;border-color:var(--bord-fort);box-shadow:var(--ombre-douce)}
.btn.icone{padding:10px;width:40px;height:40px;border-radius:12px}
.btn.icone.petit{width:34px;height:34px;padding:7px}
.btn.icone svg{width:19px;height:19px}

/* en-tête */
header{position:relative;background:linear-gradient(115deg,#14163a 0%,#241a5e 55%,#3a2a7a 100%);padding:13px 24px;box-shadow:0 10px 30px -18px rgba(10,10,40,.8)}
header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--primaire),var(--primaire-2),var(--accent));background-size:300% 100%;animation:fluo 6s linear infinite;opacity:.9}
@keyframes fluo{0%{background-position:0% 0}100%{background-position:300% 0}}
.pastille{background:linear-gradient(135deg,#a9d4ff,#cdb6ff);color:#141038;box-shadow:0 4px 12px -4px rgba(168,180,255,.8)}
.logo{font-weight:800}

/* mise en page — entrée animée */
#app{animation:apparait .5s ease both}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
aside{width:300px;background:linear-gradient(180deg,#ffffff,#fbfcff);border-right:1px solid var(--bord);padding:18px 16px}
.item{border:1px solid var(--bord);border-radius:16px;padding:10px 12px;box-shadow:var(--ombre-nette)}
.item:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce);border-color:var(--bord-fort)}
.item.actif{border-color:transparent;background:linear-gradient(135deg,#f3f1ff,#fff);box-shadow:0 14px 30px -18px rgba(91,75,245,.55)}
.item.actif:before{width:4px;background:linear-gradient(var(--primaire),var(--primaire-2))}
.item-av{width:42px;height:42px;border-radius:13px;box-shadow:0 6px 14px -8px rgba(91,75,245,.6)}

/* chat */
.chat{background:radial-gradient(1200px 520px at 65% -12%,rgba(139,92,246,.09),transparent 60%),var(--fond)}
.chat-tete{padding:15px 24px;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--bord)}
.chat-tete b{font-size:16px;font-weight:800;font-family:'Sora','Inter',sans-serif}
.chat-tete .actions{gap:9px}
.conv-bar{padding:8px 18px;background:rgba(248,249,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--bord)}
#conv-select{border-radius:10px;border-color:var(--bord-fort);font-weight:600;color:var(--encre);cursor:pointer}
#conv-select:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 3px rgba(91,75,245,.14)}

/* bulles & chips */
.bulle{border-radius:18px;box-shadow:var(--ombre-douce)}
.msg.user .bulle{box-shadow:0 12px 26px -14px rgba(91,75,245,.55)}
.msg.assistant .bulle{border-color:var(--bord)}
.hero-titre{font-size:28px}
.chip{border-radius:999px;border-color:var(--bord-fort);box-shadow:var(--ombre-nette);transition:transform .14s,box-shadow .2s,background .2s,border-color .2s}
.chip:hover{transform:translateY(-2px);border-color:transparent;background:linear-gradient(135deg,#f1efff,#fff);box-shadow:0 12px 24px -14px rgba(91,75,245,.5)}

/* barre de saisie façon pilule */
.saisie{gap:10px;padding:14px 22px 20px;align-items:flex-end;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9) 40%);backdrop-filter:blur(8px);border-top:1px solid var(--bord)}
.saisie textarea{border-radius:16px;border-width:1.6px;border-color:var(--bord-fort);padding:14px 16px;box-shadow:var(--ombre-nette)}
.saisie textarea:focus{border-color:var(--primaire);box-shadow:0 0 0 4px rgba(91,75,245,.13)}
#btn-joindre{width:46px;height:46px;border-radius:14px;font-size:0;flex:none;padding:0}
#btn-joindre svg{width:20px;height:20px}
.icone-envoi{border-radius:14px;padding:0 20px;height:46px;font-weight:700}
.icone-envoi svg{width:19px;height:19px}
.icone-envoi:hover svg{animation:envol .5s ease}
@keyframes envol{40%{transform:translate(3px,-3px)}100%{transform:none}}

/* onglets modernisés */
.ong,.conf-tab{border-radius:10px 10px 0 0}
.ong.actif,.conf-tab.actif{color:var(--primaire)}
.onglets{gap:2px}

/* modales plus douces */
.carte{border-radius:22px;box-shadow:0 50px 100px -40px rgba(10,10,40,.5);border:1px solid rgba(255,255,255,.6)}
.modale{background:rgba(12,14,36,.55);backdrop-filter:blur(5px)}
.modale-tete .x{transition:background .2s,transform .2s}.modale-tete .x:hover{background:#e3e7fb;transform:rotate(90deg)}
.tete-ic{width:20px;height:20px;vertical-align:-4px;color:var(--primaire)}

/* icônes dans les petits boutons de la barre conversation */
.conv-bar .btn.petit{border-radius:10px}
.conv-bar .btn.petit svg{width:16px;height:16px}

/* login raffiné */
.carte-login{border-radius:26px;box-shadow:0 50px 100px -30px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5)}
.login{background:radial-gradient(1000px 560px at 72% -12%,#4635c8,transparent 60%),radial-gradient(700px 500px at 10% 110%,#1b9bbf55,transparent),linear-gradient(135deg,var(--nuit),var(--nuit-2))}

/* liste fichiers : cartes plus nettes */
.fich-item{border-radius:13px;border-color:var(--bord);box-shadow:var(--ombre-nette);transition:transform .14s,box-shadow .2s,border-color .2s}
.fich-item:hover{transform:translateY(-1px);box-shadow:var(--ombre-douce);border-color:var(--bord-fort)}

@media(max-width:820px){
  header .btn.ghost span{display:none}
  header .btn.ghost{padding:10px;width:40px;height:40px}
}

/* ===== mockups vidéo (met la vidéo en valeur : écran d'ordi / téléphone) ===== */
.msg.assistant .bulle:has(.mockup){max-width:88%}
.mockup{margin:14px auto 6px;display:flex;flex-direction:column;align-items:center;width:100%;animation:mockup-pop .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes mockup-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.mockup .msg-video{margin:0;border:none;box-shadow:none;background:#000;display:block;width:100%}
/* --- ordinateur portable (paysage) --- */
.mockup.pc{max-width:560px}
.mockup.pc .mockup-ecran{position:relative;width:100%;background:#0b0b18;border:13px solid #1a1b30;border-bottom:none;border-radius:18px 18px 6px 6px;box-shadow:0 30px 56px -26px rgba(20,20,60,.6)}
.mockup.pc .mockup-ecran:before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#3a3b55;box-shadow:inset 0 0 0 1px #0c0c18}
.mockup.pc .mockup-ecran video{border-radius:4px}
.mockup.pc .mockup-socle{width:116%;height:14px;background:linear-gradient(#e3e6f0,#b7bdce);border-radius:0 0 13px 13px;position:relative;box-shadow:0 16px 22px -14px rgba(20,20,60,.5)}
.mockup.pc .mockup-socle:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:6px;background:#a9afc3;border-radius:0 0 9px 9px}
/* --- téléphone (portrait, façon visio) --- */
.mockup.tel{max-width:252px}
.mockup.tel .mockup-ecran{position:relative;width:100%;background:#0b0b18;border:11px solid #141529;border-radius:38px;box-shadow:0 28px 54px -22px rgba(20,20,60,.7)}
.mockup.tel .mockup-ecran video{border-radius:27px}
.mockup.tel .mockup-ecran:before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:52px;height:7px;background:#141529;border-radius:0 0 10px 10px;z-index:2}
.mockup.tel .mockup-ecran:after{content:'';position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:84px;height:5px;border-radius:999px;background:rgba(255,255,255,.7);z-index:2}
.mockup.tel .mockup-socle{display:none}
.mockup.tel .mockup-ecran img{display:block;width:100%;border-radius:27px}
/* --- tablette (photo paysage / carrée) --- */
.mockup.tab{max-width:440px}
.mockup.tab .mockup-ecran{position:relative;background:#0b0b18;border:14px solid #15162a;border-radius:26px;box-shadow:0 28px 52px -26px rgba(20,20,60,.6)}
.mockup.tab .mockup-ecran:before{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#3a3b55;z-index:2}
.mockup.tab .mockup-ecran>*{display:block;width:100%;border-radius:9px}
.mockup.tab .mockup-socle{display:none}
.mockup .msg-img{margin:0;border:none;box-shadow:none;width:100%;display:block}
/* photo seule (hors mockup) : plus petite pour ne pas écraser le chat */
.msg-img{max-width:min(100%,360px)}

/* ============== MODE LIVE (type live TikTok : avatar plein écran + commentaires) ============== */
.live-tete,.live-coeurs{display:none}
body.mode-live .chat{position:relative;overflow:hidden;background:#07070f}
body.mode-live .banniere{display:none}
/* on GARDE les actions (Live/Fichiers/Configurer/vider + barre conversation), habillées pour le fond sombre */
body.mode-live .chat-tete,body.mode-live .conv-bar{position:relative;z-index:4;background:rgba(10,11,24,.52);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid rgba(255,255,255,.12)}
body.mode-live .chat-tete b,body.mode-live .chat-tete .doux,body.mode-live .conv-lbl{color:#fff}
body.mode-live .chat-tete .doux,body.mode-live .conv-lbl{opacity:.8}
body.mode-live main .btn.ghost{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
body.mode-live main .btn.ghost:hover{background:rgba(255,255,255,.28)}
body.mode-live #btn-live.actif{background:#ff3b5c;color:#fff}
body.mode-live #conv-select{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
body.mode-live #conv-select option{color:#111}
.live-badge{display:none}
body.mode-live .live-badge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:11px;font-weight:800;color:#fff;background:#ff3b5c;padding:3px 9px;border-radius:999px;vertical-align:middle;box-shadow:0 2px 8px rgba(255,59,92,.5)}
body.mode-live .live-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:live-clignote 1.2s infinite}
/* avatar en fond plein écran */
body.mode-live .avatar-zone{position:absolute;inset:0;padding:0;margin:0;z-index:0}
body.mode-live .avatar{width:100%;height:100%;border-radius:0;box-shadow:none;animation:none}
body.mode-live .avatar__video{object-fit:cover}
body.mode-live .avatar__halo,body.mode-live .avatar-zone:after{display:none}
/* voile sombre bas pour lisibilité */
body.mode-live .chat:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 32%,rgba(0,0,0,0) 58%)}
/* flux de commentaires en bas */
body.mode-live .messages{position:absolute;left:0;right:0;bottom:84px;top:auto;max-height:58%;z-index:2;padding:0 12px;gap:9px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%);mask-image:linear-gradient(to bottom,transparent 0,#000 8%);scrollbar-width:none}
body.mode-live .messages>:first-child{margin-top:auto}
body.mode-live .messages::-webkit-scrollbar{width:0;height:0}
body.mode-live .messages .hero{display:none}
.live-com{display:flex;align-items:flex-start;gap:8px;max-width:90%;animation:live-entre .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes live-entre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.live-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#8b5cf6;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.5)}
.live-av.user{background:linear-gradient(135deg,#06b6d4,#5b4bf5)}
.live-bulle{background:rgba(15,15,30,.46);backdrop-filter:blur(6px);color:#fff;border-radius:16px;padding:8px 13px;font-size:13.5px;line-height:1.45;box-shadow:0 2px 12px rgba(0,0,0,.35);word-break:break-word}
.live-nom{font-weight:800;color:#ffd166;margin-right:6px;font-size:12.5px}
.live-com.user .live-nom{color:#86e0ff}
.live-bulle a{color:#9fd0ff}
.live-bulle b{color:#fff}
.live-bulle .mockup{max-width:210px;margin:8px 0 2px}
.doux-live{opacity:.75;font-style:italic}
/* en-tête du live */
body.mode-live .live-tete{display:none}
.live-tete-av{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.5)}
.live-tete-txt{display:flex;flex-direction:column;color:#fff;min-width:0}
.live-tete-txt b{font-size:14.5px;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.live-direct{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.live-direct i{width:8px;height:8px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 9px #ff3b5c;animation:live-clignote 1.2s infinite}
@keyframes live-clignote{50%{opacity:.25}}
.live-fermer{margin-left:auto;background:rgba(0,0,0,.45);color:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:21px;cursor:pointer;backdrop-filter:blur(6px);line-height:1;transition:background .2s,transform .2s}
.live-fermer:hover{background:rgba(0,0,0,.65);transform:scale(1.06)}
/* cœurs qui montent */
body.mode-live .live-coeurs{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.live-coeur{position:absolute;bottom:92px;width:30px;height:30px;animation:coeur-monte var(--d,3s) ease-in forwards}
.live-coeur svg{width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
@keyframes coeur-monte{0%{opacity:0;transform:translateY(0) translateX(0) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translateY(-360px) translateX(var(--x,20px)) scale(1.15)}}
/* barre de saisie en mode live */
body.mode-live .saisie{position:absolute;left:0;right:0;bottom:0;z-index:3;background:transparent;border:none;backdrop-filter:none;padding:14px 12px 18px}
body.mode-live .saisie textarea{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(8px);box-shadow:none}
body.mode-live .saisie textarea::placeholder{color:rgba(255,255,255,.82)}
body.mode-live #btn-joindre{background:rgba(255,255,255,.16);color:#fff}
body.mode-live #btn-live.actif{background:#ff3b5c;color:#fff}
#btn-live.actif{background:#ff3b5c;color:#fff}

/* ===== boutons flottants ===== */
.chat{position:relative}
.btn-rond{position:absolute;top:12px;z-index:30;width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;display:grid;place-items:center;background:rgba(18,20,42,.5);color:#fff;backdrop-filter:blur(8px);box-shadow:0 5px 16px rgba(0,0,0,.3);transition:background .2s,transform .2s}
.btn-rond:hover{background:rgba(18,20,42,.72);transform:translateY(-1px)}
.btn-rond svg{width:21px;height:21px}
.btn-menu{right:12px}
body.menu-ouvert .btn-menu{background:linear-gradient(135deg,var(--primaire),var(--primaire-2))}
.btn-assistants{left:12px}
body.aside-ouvert .btn-assistants{background:linear-gradient(135deg,var(--primaire),var(--primaire-2))}
/* ORDINATEUR : on ne cache rien, le menu reste toujours visible, pas de boutons flottants */
@media(min-width:821px){ .btn-menu,.btn-assistants{display:none} }
/* MOBILE : on garde toujours les infos (nom + EN DIRECT + description + bouton Chat classique) ;
   le reste (Fichiers, Configurer, vider, conversations) est caché derrière le bouton ☰ */
@media(max-width:820px){
  .chat-tete{display:flex!important;flex-wrap:wrap;padding:12px 56px 12px 14px;gap:8px}
  .chat-tete>div:first-child{flex:1 1 100%}
  .btn-menu{top:12px}
  body:not(.menu-ouvert) #btn-fichiers,
  body:not(.menu-ouvert) #btn-config-a,
  body:not(.menu-ouvert) #btn-effacer{display:none!important}
}

/* ===== avatar du live : moins zoomé sur grand écran (colonne centrée façon vertical) ===== */
@media(min-width:821px){
  body.mode-live .avatar-zone{left:50%;right:auto;width:min(100%,500px);transform:translateX(-50%)}
}

/* ===== zone de saisie non masquée par la barre du navigateur (iOS/Android) ===== */
@supports(padding:max(0px)){
  .saisie{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  body.mode-live .saisie{padding-bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px))}
  body.mode-live .messages{bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px))}
  body.mode-live .live-coeur{bottom:max(92px,calc(env(safe-area-inset-bottom) + 84px))}
}

/* ===== mobile : donner plus de place au fil de messages, moins d'espace perdu ===== */
@media(max-width:820px){
  body.mode-live .messages{max-height:66%}
  .chat-tete .doux{font-size:11.5px;line-height:1.3}
  #a-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* chat classique : bulles un peu plus larges pour profiter de l'écran */
  body:not(.mode-live) .bulle{max-width:88%}
  .messages{padding:14px 12px 10px}
}

/* les boutons d'action reviennent à la ligne au lieu d'être coupés */
.chat-tete{flex-wrap:wrap;row-gap:8px}
.chat-tete .actions{flex-wrap:wrap;justify-content:flex-end}

/* bandeau appel téléphonique en direct */
.appel-direct{display:none;align-items:center;gap:9px;margin:12px 18px 0;padding:9px 14px;border-radius:12px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-weight:700;font-size:13px;box-shadow:0 10px 24px -14px rgba(22,163,74,.6)}
.appel-direct .pulse{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse-appel 1.3s infinite}
@keyframes pulse-appel{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ===== galerie de modèles d'assistants ===== */
#modale-modeles .carte{width:min(1000px,100%)}
.modeles-liste{display:flex;flex-direction:column;gap:18px;max-height:72vh;overflow:auto;padding:2px}
.mod-sec-tete{display:flex;flex-direction:column;gap:2px;margin:4px 0 10px;position:sticky;top:0;background:#fff;padding:6px 0;z-index:1}
.mod-sec-tete b{font-size:15px;font-family:'Sora','Inter',sans-serif}
.mod-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mod-carte{border:1px solid var(--bord);border-radius:16px;padding:13px 14px;background:#fff;display:flex;flex-direction:column;gap:7px;transition:transform .14s,box-shadow .2s,border-color .2s}
.mod-carte:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce);border-color:var(--bord-fort)}
.mod-carte.pret{border-top:3px solid #16a34a}
.mod-carte.reserves{border-top:3px solid #f59e0b}
.mod-carte.limite{border-top:3px solid #ef4444}
.mod-haut{display:flex;align-items:center;justify-content:space-between}
.mod-emoji{font-size:1.5rem}
.mod-cat{font-size:10.5px;font-weight:700;color:var(--doux);background:#eef1fb;padding:2px 8px;border-radius:999px}
.mod-nom{font-size:14.5px}
.mod-desc{font-size:12.5px;color:#4b4f6b;line-height:1.4}
.mod-note{font-size:11.5px;color:var(--doux);line-height:1.4;background:#f7f8fc;border-radius:9px;padding:7px 9px;flex:1}
.mod-carte .btn.petit{margin-top:2px}

/* croix de suppression de modèle (admin) */
.mod-carte{position:relative}
.mod-x{position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;border-radius:50%;border:none;background:#fff;color:#ef4444;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background .15s,transform .15s}
.mod-x:hover{background:#ef4444;color:#fff;transform:scale(1.1)}

/* galerie modèles v2 : barre d'outils + vue liste */
.mod-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--bord)}
.mod-filtre{font-size:12px;color:var(--doux);font-weight:700;display:flex;align-items:center;gap:7px}
.mod-select{border:1.6px solid var(--bord-fort);border-radius:10px;padding:8px 11px;font-size:13px;font-weight:600;color:var(--encre);background:#fff;cursor:pointer;min-width:230px}
.mod-select:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 3px rgba(91,75,245,.14)}
.mod-vue{display:inline-flex;background:#eef0fb;border-radius:10px;padding:3px;gap:2px}
.mod-vue button{border:none;background:none;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--doux);cursor:pointer;transition:background .15s,color .15s}
.mod-vue button.actif{background:#fff;color:var(--primaire);box-shadow:var(--ombre-nette)}
.mod-rangs{display:flex;flex-direction:column;gap:8px}
.mod-ligne{position:relative;display:flex;align-items:center;gap:13px;border:1px solid var(--bord);border-left:4px solid #16a34a;border-radius:12px;padding:10px 14px;background:#fff;transition:box-shadow .2s,transform .12s}
.mod-ligne.reserves{border-left-color:#f59e0b}.mod-ligne.limite{border-left-color:#ef4444}
.mod-ligne:hover{box-shadow:var(--ombre-douce);transform:translateY(-1px)}
.mod-ligne .mod-emoji{font-size:1.5rem;flex:none}
.mod-ltxt{flex:1;min-width:0}
.mod-lnom{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.mod-lnom b{font-size:14px}
.mod-ligne .mod-desc{margin-top:2px}
.mod-ligne .btn.petit{flex:none;order:4}
.mod-ligne .mod-x{position:static;order:5;flex:none;box-shadow:none;background:#fef2f2}

/* filtre audience (Pros / Particuliers) */
.mod-aud{display:inline-flex;background:#eef0fb;border-radius:10px;padding:3px;gap:2px}
.mod-aud button{border:none;background:none;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--doux);cursor:pointer;transition:background .15s,color .15s}
.mod-aud button.actif{background:linear-gradient(135deg,var(--primaire),var(--primaire-2));color:#fff;box-shadow:0 6px 14px -8px rgba(91,75,245,.6)}

/* ===================== PARCOURS CRÉATION ASSISTANT (wizard) ===================== */
.wiz-carte{width:min(920px,100%);overflow:hidden}
.wiz-back{border:none;background:#eef1fb;color:var(--primaire);width:36px;height:36px;border-radius:999px;font-size:18px;cursor:pointer;font-weight:800;transition:background .2s,transform .2s;flex:none}
.wiz-back:hover{background:#e3e7fb;transform:translateX(-2px)}
.wiz-carte .modale-tete{gap:12px}
.wiz-carte .modale-tete b{flex:1;text-align:center;font-family:'Sora','Inter',sans-serif}
.wiz-fil{display:none;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin:2px 0 16px}
.wiz-pt{font-size:11.5px;font-weight:700;color:var(--tres-doux);background:#f1f3fa;padding:5px 12px;border-radius:999px;transition:all .3s}
.wiz-pt.actif{color:#fff;background:linear-gradient(135deg,var(--primaire),var(--primaire-2));box-shadow:0 6px 14px -8px rgba(91,75,245,.6)}
.wiz-pt.fait{color:var(--primaire);background:#e9ecfd}
.wiz-sep{color:var(--tres-doux);font-weight:800}
.wiz-corps{position:relative;min-height:300px}
.wiz-pane[hidden]{display:none}
.wiz-pane.entre{animation:wiz-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes wiz-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.wiz-intro{text-align:center;font-size:17px;font-weight:700;color:var(--encre);margin:6px 0 20px;font-family:'Sora','Inter',sans-serif}
/* grandes cartes de choix */
.wiz-deux{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:0 auto}
.wiz-grande{position:relative;overflow:hidden;border:1.5px solid var(--bord);border-radius:22px;padding:28px 22px 24px;background:linear-gradient(170deg,#fbfcff,#f4f6ff);cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;min-height:190px}
.wiz-grande:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(91,75,245,.5);border-color:transparent}
.wiz-grande.vio{background:linear-gradient(170deg,#f5f1ff,#efeaff)}
.wiz-grande b{font-size:17px;font-family:'Sora','Inter',sans-serif;z-index:1}
.wiz-grande span{font-size:13px;color:var(--doux);line-height:1.5;max-width:230px;z-index:1}
.wiz-ic{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:36px;background:#fff;box-shadow:0 12px 26px -12px rgba(91,75,245,.5);z-index:1;animation:wiz-flotte 4s ease-in-out infinite}
.wiz-grande.vio .wiz-ic{animation-delay:.6s}
@keyframes wiz-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.wiz-grande:before{content:'';position:absolute;top:-60%;left:-20%;width:60%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:rotate(18deg) translateX(-120%);transition:transform .7s}
.wiz-grande:hover:before{transform:rotate(18deg) translateX(320%)}
.wiz-robot{position:absolute;width:150px;height:150px;border-radius:50%;filter:blur(22px);opacity:.5;z-index:0;bottom:-50px;right:-40px}
.wiz-robot.r1{background:radial-gradient(closest-side,rgba(6,182,212,.5),transparent)}
.wiz-robot.r2{background:radial-gradient(closest-side,rgba(139,92,246,.5),transparent)}
/* cartes d'activité */
.wiz-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px;max-width:800px;margin:0 auto}
.wiz-cat{border:1.5px solid var(--bord);border-radius:16px;padding:18px 14px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .16s,box-shadow .2s,border-color .2s;animation:wiz-in .4s both}
.wiz-cat:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(91,75,245,.5);border-color:transparent}
.wiz-cat-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:27px;background:linear-gradient(135deg,#eef1fb,#f6f1ff)}
.wiz-cat b{font-size:13.5px;font-family:'Sora','Inter',sans-serif;line-height:1.25}
@media(max-width:620px){.wiz-deux{grid-template-columns:1fr}}

/* mémoire apprise (auto-apprentissage) */
.acquis-item{display:flex;align-items:center;gap:8px;justify-content:space-between;background:#f7f8fc;border:1px solid var(--bord);border-radius:9px;padding:6px 10px;margin-top:5px;font-size:12.5px}
.acquis-item span{line-height:1.35}

/* corrections affichage mode live */
body.mode-live .chat.vide .avatar{width:100%;height:100%;border-radius:0;box-shadow:none;animation:none}
body.mode-live .chat.vide .avatar-zone{padding:0}
body.mode-live .appel-direct{position:relative;z-index:6;margin:10px 14px 0}

/* bouton ☰ « Assistants » dans l'en-tête (à côté du logo), mobile seulement */
.h-menu{display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff;border:none;width:40px;height:40px;border-radius:11px;cursor:pointer;flex:none;transition:background .2s,transform .2s}
.h-menu:hover{background:rgba(255,255,255,.26)}
.h-menu svg{width:22px;height:22px}
body.aside-ouvert .h-menu{background:linear-gradient(135deg,var(--primaire),var(--primaire-2))}
@media(max-width:820px){ .h-menu{display:inline-flex} }

/* ===== en-tête du chat réorganisé : nom + conversation en cours + bascule live ===== */
.chat-tete .ct-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ct-l1{display:flex;align-items:center;gap:9px;min-width:0}
.ct-l1 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bouton de bascule d'affichage (ex « Chat classique ») réduit à une icône discrète à côté de EN DIRECT */
.ct-mode{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--bord,#e5e7eb);border-radius:9px;background:#fff;color:var(--encre,#374151);cursor:pointer;transition:all .15s;flex:0 0 auto}
.ct-mode svg{width:16px;height:16px}
.ct-mode:hover{border-color:var(--primaire,#5b4bf5);color:var(--primaire,#5b4bf5);background:rgba(91,75,245,.07)}
/* la ligne « conversation en cours » remplace l'ancienne description, posée sous le nom */
.chat-tete .ct-l2{display:flex;align-items:center;gap:5px;padding:0;margin:0;border:0;background:none;backdrop-filter:none;flex-wrap:nowrap;min-width:0}
.ct-conv{flex:0 1 auto;max-width:320px;min-width:0;padding:2px 4px;border:0;background:transparent;color:#6b7280;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:7px;text-overflow:ellipsis;transition:background .15s,color .15s}
.ct-conv:hover{background:rgba(91,75,245,.08);color:var(--primaire,#5b4bf5)}
.ct-conv:focus{outline:none;background:rgba(91,75,245,.1)}
.ct-conv option{color:#111;font-weight:500}
.ct-nouv{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:transparent;color:#9aa0ae;cursor:pointer;transition:all .15s;flex:0 0 auto}
.ct-nouv svg{width:15px;height:15px}
.ct-nouv:hover{background:rgba(91,75,245,.1);color:var(--primaire,#5b4bf5)}
.ct-del:hover{background:rgba(239,68,68,.12);color:#ef4444}

/* mode live : tout en clair, pas de boîte sombre autour de la ligne conversation */
body.mode-live .chat-tete .ct-l2{background:none;border:0;z-index:4}
body.mode-live .ct-conv{color:rgba(255,255,255,.82)}
body.mode-live .ct-conv:hover,body.mode-live .ct-conv:focus{background:rgba(255,255,255,.16);color:#fff}
body.mode-live .ct-mode{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff}
body.mode-live .ct-mode:hover{background:rgba(255,255,255,.22)}
body.mode-live .ct-nouv{color:rgba(255,255,255,.7)}
body.mode-live .ct-nouv:hover{background:rgba(255,255,255,.18);color:#fff}

@media(max-width:820px){
  .chat-tete .ct-id{flex:1 1 100%}
  .ct-conv{max-width:60vw}
}

/* petit libellé « Conversation en cours » devant le sélecteur */
.ct-lbl{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#9aa0ae;white-space:nowrap;flex:0 0 auto}
.ct-lbl svg{width:13px;height:13px;opacity:.85}
body.mode-live .ct-lbl{color:rgba(255,255,255,.62)}
@media(max-width:820px){ .ct-lbl{display:none} }

/* =========================================================================
   BARRE DU HAUT — refonte premium (groupe d'outils en verre, icônes + tooltips)
   ========================================================================= */
.h-gauche{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.logo-txt{white-space:nowrap}

/* puce de statut (comptes Claude Max) */
.etat{display:inline-flex;align-items:center;flex:0 0 auto}
.etat .ok,.etat .ko{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;line-height:1;padding:6px 12px;border-radius:999px;border:1px solid;white-space:nowrap}
.etat .ok{color:#86efac;background:rgba(34,197,94,.12);border-color:rgba(74,222,128,.28)}
.etat .ko{color:#fca5a5;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28)}
.etat .pt{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.etat .ok .pt{animation:etat-pulse 1.9s ease-out infinite}
@keyframes etat-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* groupe d'outils (verre dépoli) */
.h-outils{margin-left:auto;display:flex;align-items:center;gap:5px;padding:5px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -18px rgba(0,0,0,.9)}

/* boutons-icônes uniformes */
.h-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-radius:11px;background:transparent;color:rgba(255,255,255,.82);cursor:pointer;flex:0 0 auto;text-decoration:none;transition:background .18s,color .18s,transform .14s,box-shadow .18s}
.h-btn svg{width:18px;height:18px;position:relative}
.h-btn:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-1px)}
.h-btn:active{transform:translateY(0) scale(.93)}
.h-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(91,75,245,.65)}
/* accents */
.h-appel{color:#4ade80}
.h-appel:hover{background:rgba(34,197,94,.22);color:#bbf7d0;box-shadow:0 8px 18px -8px rgba(34,197,94,.65)}
.h-deco:hover{background:rgba(239,68,68,.2);color:#fca5a5}

/* séparateur + bloc utilisateur */
.h-sep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 3px;flex:0 0 auto}
.h-user{display:flex;align-items:center;gap:9px;padding:0 8px 0 3px;min-width:0}
.h-ava{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--primaire),var(--primaire-2));color:#fff;font-weight:800;font-size:13px;flex:0 0 auto;box-shadow:0 4px 12px -4px rgba(91,75,245,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.h-moi{color:rgba(255,255,255,.8);font-size:13px;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tooltips élégants au survol (ordinateur) */
.h-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:#101233;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08);z-index:30}
.h-btn[data-tip]::before{content:'';position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#101233;opacity:0;transition:opacity .16s;z-index:30}
.h-btn[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.h-btn[data-tip]:hover::before{opacity:1}

/* icône animée du bouton d'affichage : œil fixe au centre + flèche circulaire qui tourne autour */
.h-mode .oeil-switch{display:none}
.oeil-switch{position:relative;width:22px;height:22px;flex:0 0 auto}
.oeil-switch .os-oeil{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%)}
.oeil-switch .os-fleche{position:absolute;left:0;top:0;width:22px;height:22px;transform-origin:50% 50%;animation:tourne-autour 2.4s linear infinite;opacity:.9}
@keyframes tourne-autour{to{transform:rotate(360deg)}}

/* ------- MOBILE ------- */
@media(max-width:820px){
  .h-outils{margin-left:auto;gap:2px;padding:3px;background:transparent;border:none;backdrop-filter:none;box-shadow:none}
  .h-btn{width:40px;height:40px}
  .h-user,.h-sep{display:none}
  .h-mode svg.ico-desk{display:none}
  .h-mode .oeil-switch{display:inline-flex;align-items:center;justify-content:center}
  .h-btn[data-tip]::after,.h-btn[data-tip]::before{display:none}
}
@media(max-width:520px){ .logo-txt{display:none} }

/* état « aucun assistant attribué » : overlay centré avec appel à créer (collaborateur sans assistant) */
.vide-creation{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:30px;background:radial-gradient(120% 120% at 50% 0%,#1a1c42 0%,#0c0d22 70%);color:#fff}
.vide-creation .vc-emoji{font-size:40px;filter:drop-shadow(0 6px 18px rgba(124,108,255,.6));animation:vc-flotte 3s ease-in-out infinite}
@keyframes vc-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.vide-creation h2{margin:0;font-family:'Sora','Inter',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.3px}
.vide-creation p{margin:0;max-width:440px;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6}
.vide-creation .vc-creer{margin-top:8px;font-size:15px;padding:13px 26px;border-radius:13px;box-shadow:0 14px 30px -12px rgba(91,75,245,.8)}

#btn-voix.actif,#micro-app.actif{background:#ff3b5c!important;color:#fff!important}

/* Moyens de paiement (reglages admin) */
.pay-gw{border:1px solid var(--bord,#e5e7eb);border-radius:14px;padding:16px;margin-bottom:14px;background:#fff}
.pay-gw-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pay-gw-tete b{font-size:15px}
.pay-etat{font-size:12.5px;font-weight:600;color:#94a3b8}
.pay-etat.ok{color:#16a34a}
.pay-lbl{display:block;font-size:12.5px;font-weight:600;color:#475569;margin:8px 0 6px}
.pay-gw .ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay-gw .ligne input{flex:1;min-width:180px}
.pay-offres{border:1px solid var(--bord,#e5e7eb);border-radius:14px;padding:16px;background:#fafbff;margin-top:6px}
.pay-offres h4{margin:0 0 4px}
.pay-offre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #eef0f3}
.pay-offre:last-of-type{border-bottom:0}
.pay-offre select{padding:7px 10px;border:1px solid var(--bord,#e5e7eb);border-radius:9px}