/* ============================================================
   QYLINE — Espace client & admin · MISE EN PAGE
   ------------------------------------------------------------
   Cette feuille porte la STRUCTURE : grilles, positions,
   dimensions, comportements responsive.

   Le DESSIN (couleurs, bordures, ombres, angles, typographie)
   est défini dans assets/theme.css, chargée juste après elle
   sur toutes les pages. Pour changer l'allure du site, c'est
   theme.css qu'il faut ouvrir, pas ce fichier.

   Les jetons ci-dessous ne sont que des valeurs de REPLI, aux
   couleurs de la charte « papier, bleu, jaune » : ils servent
   si theme.css venait à manquer.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#F4F6FA;--bg2:#DCE4F5;--surface:#ffffff;--surface2:#EEF2FA;
  --border:#C3CEEA;--border2:#8C99C2;
  --text:#121A33;--muted:#56628A;--muted2:#3A4666;
  --primary:#24459A;--primary-dark:#1B347A;--primary-light:#E3E9F8;
  --cyan:#24459A;--cyan-dim:#E3E9F8;--cyan-glow:transparent;
  --accent:#1B347A;--accent-light:#E3E9F8;
  --success:#17703F;--error:#C5281C;--warn:#8F5B00;--info:#24459A;
  --sidebar:264px;--radius:4px;--radius-sm:3px;
  --shadow-sm:3px 3px 0 #C3CEEA;
  --shadow-md:5px 5px 0 #C3CEEA;
}
:root[data-theme="dark"]{
  --bg:#0B1124;--bg2:#222E58;--surface:#121A33;--surface2:#1A2445;
  --border:#2A3763;--border2:#4A5A94;
  --text:#F4F6FA;--muted:#A7B2D6;--muted2:#D5DCF0;
  --primary:#93ABF5;--primary-dark:#24459A;--primary-light:rgba(147,171,245,.15);
  --cyan:#93ABF5;--cyan-dim:rgba(147,171,245,.15);--cyan-glow:transparent;
  --accent:#6C89E0;--accent-light:rgba(108,137,224,.16);
  --success:#5AD19A;--error:#FF8479;--warn:#F2BB4A;--info:#93ABF5;
  --shadow-sm:3px 3px 0 #060A18;
  --shadow-md:5px 5px 0 #060A18;
}
/* Lien d'accessibilité "aller au contenu" */
.skip-link{position:absolute;left:-999px;top:8px;z-index:9999;background:var(--primary);color:#fff;padding:8px 16px;border-radius:3px;text-decoration:none;font-size:13px;}
.skip-link:focus{left:8px;}

/* ===== SALONS VOCAUX ===== */
.salon-card{display:flex;align-items:center;gap:14px;}
.salon-card .salon-ic{font-size:26px;flex-shrink:0;}
.salon-card .salon-nom{font-weight:700;color:var(--text);}
.salon-card .salon-desc{font-size:13px;color:var(--muted);}
.salon-card .salon-nb{background:var(--primary-light);color:var(--primary);font-weight:700;font-size:12px;padding:4px 10px;border-radius:100px;white-space:nowrap;}
.salon-card.attente{border-color:var(--primary);}
.salon-card:hover{border-color:var(--primary);}
.rtc-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.rtc-btn{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:12px;border:1px solid var(--border2);border-radius:14px;background:var(--surface);color:var(--text);cursor:pointer;font-size:20px;transition:.15s;}
.rtc-btn span{font-size:11px;color:var(--muted);}
.rtc-btn:hover{border-color:var(--primary);}
.rtc-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.rtc-btn.active span{color:rgba(255,255,255,.85);}
.rtc-btn.danger:hover{border-color:var(--error);color:var(--error);}
.rtc-btn.off{background:var(--error);color:#fff;border-color:var(--error);}
.rtc-btn.off span{color:rgba(255,255,255,.85);}
.rtc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px;}
.rtc-tile{position:relative;background:#0d1117;border:1px solid var(--border);border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.rtc-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1117;z-index:2;}
.rtc-tile video.hidden{display:none;}
.rtc-ava{position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;}
.rtc-name{position:absolute;z-index:4;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
.rtc-name .badge-adm{background:var(--accent);color:#04231d;font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px;}
.rtc-mod{position:absolute;z-index:4;right:6px;top:6px;display:flex;gap:5px;}
.rtc-mod button{background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:6px;padding:4px 7px;font-size:11px;cursor:pointer;}
.rtc-mod button:hover{background:var(--error);}
.rtc-tools{position:absolute;z-index:4;top:6px;left:6px;display:flex;gap:5px;opacity:0;transition:.15s;}
.rtc-tile:hover .rtc-tools,.rtc-tile.rtc-big .rtc-tools{opacity:1;}
.rtc-tools button{background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:6px;padding:4px 9px;font-size:14px;cursor:pointer;line-height:1;}
.rtc-tools button:hover{background:var(--primary);}
.rtc-tile.rtc-big{grid-column:1 / -1;aspect-ratio:16/9;max-height:70vh;}
.rtc-tile video:fullscreen{object-fit:contain;background:#000;}

/* ===== SALONS v2 : barre d'outils, chat, projecteur, réactions ===== */
.rtc-topbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.rtc-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted2);background:var(--surface2);border:1px solid var(--border);padding:6px 11px;border-radius:100px;white-space:nowrap;}
.rtc-chip b{color:var(--text);}
.rtc-chip.live{color:var(--error);}
.rtc-chip.live .dot{width:8px;height:8px;border-radius:50%;background:var(--error);animation:recPulse 1.1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.rtc-spacer{flex:1;}
.rtc-tool{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border2);padding:8px 12px;border-radius:10px;cursor:pointer;transition:.15s;line-height:1;}
.rtc-tool:hover{border-color:var(--primary);}
.rtc-tool.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.rtc-tool.danger.active{background:var(--error);border-color:var(--error);}
.rtc-tool select{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:none;}
.rtc-badge{background:var(--error);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;padding:0 4px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;}

/* Disposition principale + panneau de chat */
.rtc-main{display:flex;gap:14px;align-items:flex-start;margin-top:16px;}
.rtc-main .rtc-grid{flex:1;margin-top:0;min-width:0;}
.rtc-chat{width:320px;flex-shrink:0;display:none;flex-direction:column;height:min(70vh,560px);background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.rtc-chat.open{display:flex;}
.rtc-chat-head{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;}
.rtc-chat-head button{border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1;}
.rtc-chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{font-size:14px;line-height:1.45;}
.chat-msg .who{font-weight:700;color:var(--primary);font-size:12px;}
.chat-msg .who .badge-adm{background:var(--accent);color:#04231d;font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px;margin-left:4px;}
.chat-msg .when{color:var(--muted);font-size:11px;margin-left:6px;}
.chat-msg .body{color:var(--text);word-wrap:break-word;overflow-wrap:anywhere;}
.chat-msg.mine .who{color:var(--accent);}
.rtc-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);}
.rtc-chat-form input{flex:1;border:1px solid var(--border2);border-radius:10px;padding:9px 11px;font:inherit;background:var(--surface2);color:var(--text);outline:none;}
.rtc-chat-form input:focus{border-color:var(--primary);}
.rtc-chat-form button{border:0;background:var(--primary);color:#fff;border-radius:10px;padding:0 14px;font-size:16px;cursor:pointer;}
@media(max-width:760px){.rtc-main{flex-direction:column;}.rtc-chat{width:100%;height:340px;}}

/* Personne qui parle + main levée + qualité réseau */
.rtc-tile.speaking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 16px var(--cyan-glow);}
.rtc-hand{position:absolute;z-index:5;top:8px;right:8px;font-size:20px;background:rgba(0,0,0,.55);border-radius:50%;width:32px;height:32px;display:none;align-items:center;justify-content:center;animation:handWob 1s ease-in-out infinite;}
.rtc-hand.up{display:flex;}
@keyframes handWob{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}}
.rtc-net{position:absolute;z-index:4;right:8px;bottom:8px;display:flex;align-items:flex-end;gap:2px;height:14px;background:rgba(0,0,0,.5);padding:3px 5px;border-radius:6px;}
.rtc-net i{width:3px;background:#5b6673;border-radius:1px;display:block;}
.rtc-net i:nth-child(1){height:5px;}.rtc-net i:nth-child(2){height:8px;}.rtc-net i:nth-child(3){height:11px;}
.rtc-net.q1 i:nth-child(1){background:var(--error);}
.rtc-net.q2 i:nth-child(1),.rtc-net.q2 i:nth-child(2){background:var(--warn);}
.rtc-net.q3 i{background:var(--success);}
.rtc-mic-off{position:absolute;z-index:5;left:8px;top:8px;font-size:13px;background:var(--error);color:#fff;width:26px;height:26px;border-radius:50%;display:none;align-items:center;justify-content:center;}
.rtc-mic-off.on{display:flex;}

/* Disposition Projecteur (spotlight) — flexbox + ordre, sans déplacer le DOM */
.rtc-grid.spotlight{display:flex;flex-wrap:wrap;gap:10px;}
.rtc-grid.spotlight .rtc-tile{width:148px;aspect-ratio:4/3;order:2;}
.rtc-grid.spotlight .rtc-tile.rtc-feature{width:100%;aspect-ratio:16/9;max-height:64vh;order:1;}
.rtc-tile.pinned{outline:2px solid var(--primary);outline-offset:-2px;}

/* Réactions flottantes */
#reactLayer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden;}
.react-float{position:absolute;font-size:38px;animation:reactUp 2.4s ease-out forwards;}
@keyframes reactUp{0%{transform:translateY(0) scale(.5);opacity:0;}15%{transform:translateY(-10px) scale(1.2);opacity:1;}100%{transform:translateY(-160px) scale(1);opacity:0;}}
.react-bar{display:flex;gap:6px;flex-wrap:wrap;}
.react-bar button{border:1px solid var(--border2);background:var(--surface);border-radius:10px;font-size:20px;padding:6px 9px;cursor:pointer;line-height:1;transition:.12s;}
.react-bar button:hover{transform:scale(1.15);border-color:var(--primary);}

/* Push-to-talk : bouton "maintenir pour parler" */
.ptt-hold{display:none;width:100%;margin-top:12px;padding:16px;border:2px dashed var(--primary);border-radius:14px;background:var(--surface2);color:var(--primary);font-weight:700;font-size:15px;text-align:center;cursor:pointer;user-select:none;}
.ptt-hold.show{display:block;}
.ptt-hold.talking{background:var(--primary);color:#fff;border-style:solid;}

/* ===== SALONS v2 — habillage premium (surcharge visuelle) ===== */
.rtc-topbar,.react-bar{border-radius:14px;box-shadow:var(--shadow-sm);}
.rtc-controls{position:sticky;bottom:12px;z-index:20;gap:12px;padding:14px 16px;border-radius:20px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:0 10px 30px rgba(0,0,0,.18);}
.rtc-btn{min-width:0;width:62px;height:62px;border-radius:20px;justify-content:center;gap:3px;font-size:22px;transition:transform .16s,box-shadow .16s,background .16s;}
.rtc-btn span{font-size:10px;}
.rtc-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.14);}
.rtc-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;box-shadow:0 8px 22px var(--cyan-glow);}
.rtc-btn.off{background:linear-gradient(135deg,var(--error),#b91c1c);}
.rtc-grid{gap:16px;}
.rtc-tile{border-radius:20px;border-color:#1b2432;background:radial-gradient(130% 130% at 50% 0%,#18202f 0%,#0b0f17 70%);
  box-shadow:0 10px 26px rgba(0,0,0,.30);transition:transform .18s,box-shadow .18s;animation:tileIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes tileIn{from{opacity:0;transform:scale(.95) translateY(6px);}to{opacity:1;transform:none;}}
.rtc-tile:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.42);}
.rtc-ava{width:78px;height:78px;font-size:28px;box-shadow:0 0 0 4px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.45);}
.rtc-name{bottom:10px;left:10px;font-weight:600;background:rgba(9,14,22,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.rtc-tile.speaking{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),0 0 28px rgba(47,217,184,.5);}
.rtc-tile.rtc-feature{box-shadow:0 20px 50px rgba(0,0,0,.5);}
.rtc-chip{padding:7px 13px;}
.rtc-tool{border-radius:14px;padding:9px 13px;}
#joinBox{background:radial-gradient(120% 120% at 50% -10%,var(--surface) 0%,var(--surface2) 100%);}
.react-float{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}

/* ===== DRIVE — partage de fichiers & dossiers ===== */
.drive-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
/* Le fil d'Ariane se distinguait par l'ancienne police de titrage ;
   il tient désormais sa présence de sa graisse. */
.drive-crumbs{display:flex;gap:7px;align-items:center;font-size:15px;font-weight:600;flex-wrap:wrap;}
.drive-crumbs a{color:var(--primary);text-decoration:none;}
.drive-crumbs a:hover{text-decoration:underline;}
.drive-crumbs .sep{color:var(--muted);}
.drive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:6px;}
.drive-item{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px;transition:.15s;}
.drive-item:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.drive-item .ic{font-size:36px;line-height:1;}
.drive-item.folder .ic{filter:drop-shadow(0 3px 5px var(--cyan-glow));}
.drive-item .nm{font-weight:700;color:var(--text);margin-top:10px;word-break:break-word;font-size:15px;}
.drive-item .meta{font-size:12px;color:var(--muted);margin-top:3px;}
.drive-item .thumb{width:100%;height:110px;object-fit:cover;border-radius:10px;margin-bottom:4px;background:var(--surface2);}
.drive-item .row-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.drive-item .row-actions .btn{padding:5px 10px;font-size:12px;}
.drive-open{position:absolute;inset:0;border-radius:14px;}
.drive-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.drive-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;}
.drive-badge.view{background:var(--surface2);color:var(--muted2);border:1px solid var(--border);}
.drive-badge.dl{background:var(--primary-light);color:var(--primary);}
.drive-badge.edit{background:var(--accent-light);color:var(--accent);}
.drive-badge.owner{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;}
.drive-empty{text-align:center;padding:40px 16px;color:var(--muted);}
.drive-empty .ei{font-size:44px;margin-bottom:8px;}
/* Modal de partage */
.drive-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;}
.drive-modal.open{display:flex;}
.drive-modal .box{background:var(--surface);border:1px solid var(--border);border-radius:20px;max-width:600px;width:100%;max-height:88vh;overflow:auto;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.4);}
.drive-modal .box h3{margin-bottom:4px;}
.drive-acl{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.drive-acl .arow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--border);border-radius:10px;padding:11px;}
.drive-acl .arow .who{flex:1;min-width:150px;font-size:14px;}
.drive-acl .arow .who .em{color:var(--muted);font-size:12px;}
.drive-acl label.opt{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted2);cursor:pointer;}

/* Drive v2 : barre d'outils, sélection, glisser-déposer, vue liste */
.drive-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.drive-controls input,.drive-controls select{padding:8px 11px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2);color:var(--text);font:inherit;}
.drive-drop{margin-top:12px;border:2px dashed var(--border2);border-radius:14px;padding:18px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;transition:.15s;}
.drive-drop.over{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.drive-bulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:12px;}
.drive-check{position:absolute;top:10px;left:10px;z-index:3;width:18px;height:18px;cursor:pointer;}
.drive-star{position:absolute;top:8px;right:10px;z-index:3;font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.drive-lock{position:absolute;top:8px;right:32px;z-index:3;font-size:14px;}
/* Vue liste */
body.drive-liste .drive-grid{display:flex;flex-direction:column;gap:8px;}
body.drive-liste .drive-item{display:flex;align-items:center;gap:14px;padding:10px 14px;}
body.drive-liste .drive-item .ic{font-size:26px;margin:0;flex-shrink:0;}
body.drive-liste .drive-item .thumb{width:46px;height:46px;margin:0;flex-shrink:0;}
body.drive-liste .drive-item .nm{margin:0;flex:1;min-width:0;}
body.drive-liste .drive-item .meta{margin:0;white-space:nowrap;}
body.drive-liste .drive-item .row-actions{margin:0;flex-shrink:0;}
body.drive-liste .drive-item .drive-check{position:static;}

/* Bouton de thème */
.theme-toggle{width:40px;height:40px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);cursor:pointer;font-size:16px;flex-shrink:0;line-height:1;}
.theme-toggle:hover{border-color:var(--primary);}
.theme-toggle .ic-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:inline;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{max-width:100%;overflow-x:hidden;}
body{font-family:'Bricolage Grotesque','Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;}
.grain,.orb{display:none;}

/* ===== APP SHELL ===== */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;min-height:100dvh;}

/* ---- Sidebar ---- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;transition:transform .3s cubic-bezier(.2,.9,.1,1);}
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px;border-bottom:1px solid var(--border);text-decoration:none;flex-shrink:0;}
/* contain et non cover : cover recadrait le logo, ce qui coupe le tracé
   dès qu il n est pas carré. Voir la même correction dans accueil.css. */
.sb-brand img{height:34px;width:auto;max-width:130px;border-radius:10px;
              aspect-ratio:auto;object-fit:contain;flex-shrink:0;}
.sb-brand .n{font-weight:800;font-size:17px;letter-spacing:3px;color:var(--text);}
.sb-brand .r{display:block;font-size:9px;letter-spacing:2px;color:var(--primary);margin-top:2px;text-transform:uppercase;font-weight:600;}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px;-webkit-overflow-scrolling:touch;}
.sb-group{margin-bottom:18px;}
.sb-group h5{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:0 12px 8px;font-weight:700;}
.sb-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--muted2);font-size:14px;font-weight:500;transition:.18s;margin-bottom:2px;position:relative;}
.sb-link .ic{width:20px;text-align:center;font-size:15px;flex-shrink:0;}
.sb-link:hover{background:var(--bg2);color:var(--text);}
.sb-link.is-active{background:var(--primary-light);color:var(--primary);font-weight:600;}
.sb-link.is-active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:4px;background:var(--primary);}
.sb-link .cnt{margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:100px;font-size:10px;font-weight:700;flex-shrink:0;}
.sb-user{border-top:1px solid var(--border);padding:13px 14px;display:flex;align-items:center;gap:11px;flex-shrink:0;}
.avatar{width:38px;height:38px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;}
.sb-user>div{min-width:0;}
.sb-user .u-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user .u-mail{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user a.u-out{margin-left:auto;color:var(--muted);font-size:17px;text-decoration:none;padding:6px 8px;border-radius:6px;flex-shrink:0;}
.sb-user a.u-out:hover{color:var(--error);background:rgba(220,38,38,.08);}

/* ---- Contenu ---- */
.content{grid-column:2;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;padding:12px 26px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);min-height:60px;}
:root[data-theme="dark"] .topbar{background:rgba(13,17,23,.9);}
.burger{display:none;background:none;border:1px solid var(--border2);color:var(--text);width:40px;height:40px;border-radius:10px;font-size:17px;cursor:pointer;flex-shrink:0;}
.tb-title{font-weight:700;font-size:16px;letter-spacing:.2px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-spacer{flex:1;min-width:8px;}
.tb-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0;}
.tb-btn:hover{border-color:var(--primary);color:var(--primary);}
.tb-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.tb-btn-primary:hover{background:var(--primary-dark);color:#fff;}

/* Notifications */
.notif{position:relative;flex-shrink:0;}
.notif-toggle{position:relative;width:40px;height:40px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;}
.notif-toggle:hover{border-color:var(--primary);}
.notif-dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:var(--error);color:#fff;border-radius:100px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:330px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border2);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden;display:none;max-height:70vh;overflow-y:auto;}
.notif-panel.open{display:block;}
.notif-panel h6{padding:14px 16px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);}
.notif-item{display:block;padding:12px 16px;border-bottom:1px solid var(--border);text-decoration:none;font-size:13px;color:var(--muted2);transition:.15s;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--bg2);color:var(--text);}
.notif-item.unread{background:var(--primary-light);}
.notif-item .t{display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.notif-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;}

.main-inner{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:30px 26px 70px;}

/* ===== TITRES ===== */
.page-tag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--primary);margin-bottom:10px;font-weight:700;}
.page-title{font-size:clamp(23px,4.5vw,34px);font-weight:800;letter-spacing:-.5px;line-height:1.15;margin-bottom:8px;color:var(--text);overflow-wrap:break-word;}
.page-title em{font-style:normal;color:var(--primary);}
.page-sub{color:var(--muted2);font-size:clamp(13.5px,2.4vw,15px);margin-bottom:28px;max-width:680px;}

/* ===== CARTES ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(18px,3.5vw,28px);position:relative;min-width:0;box-shadow:var(--shadow-sm);}
.card + .card{margin-top:20px;}
.card-title{font-size:clamp(15px,3vw,17px);font-weight:700;margin-bottom:5px;color:var(--text);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.card-sub{font-size:13px;color:var(--muted);margin-bottom:22px;}
.card-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;}

/* ===== STAT ===== */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,3vw,22px) clamp(16px,3vw,24px);transition:.25s;min-width:0;box-shadow:var(--shadow-sm);}
.stat:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat .si{font-size:20px;margin-bottom:9px;}
.stat .num{font-variant-numeric:tabular-nums;letter-spacing:-.5px;font-size:clamp(24px,5vw,32px);font-weight:800;color:var(--text);line-height:1;overflow-wrap:break-word;}
.stat .num.accent{color:var(--primary);}
.stat .lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:8px;}

/* ===== ACCÈS RAPIDE ===== */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px;}
.quick a{display:block;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:.25s;box-shadow:var(--shadow-sm);}
.quick a:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.quick .qi{font-size:24px;margin-bottom:9px;}
.quick .qt{font-weight:700;color:var(--text);font-size:15px;margin-bottom:3px;}
.quick .qd{font-size:13px;color:var(--muted);}

/* ===== FORMULAIRES ===== */
.field{display:flex;flex-direction:column;margin-bottom:16px;min-width:0;}
.field label{font-weight:600;color:var(--text);font-size:12px;letter-spacing:.3px;margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;max-width:100%;padding:12px 14px;background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:inherit;font-size:16px;border-radius:var(--radius-sm);transition:.2s;}
@media(min-width:640px){.field input,.field select,.field textarea{font-size:14px;}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
/* Menus déroulants : toujours texte noir sur fond blanc */
select,option{color:var(--text);background:var(--surface);}
/* Cohérence des champs hors .field (recherches inline, etc.) — surtout en mode sombre */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=date],input[type=time],input[type=url],input:not([type]),textarea,select{background:var(--surface);color:var(--text);border-color:var(--border2);}
input::placeholder,textarea::placeholder{color:var(--muted);}
::selection{background:var(--primary-light);color:var(--text);}
.field textarea{resize:vertical;min-height:110px;}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.field-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.check{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.check input{width:auto;flex-shrink:0;margin-top:3px;}
.check label{margin:0;font-weight:400;font-size:14px;color:var(--muted2);letter-spacing:0;}

.dropzone{border:1.5px dashed var(--border2);border-radius:14px;padding:clamp(18px,4vw,26px);text-align:center;color:var(--muted2);transition:.2s;cursor:pointer;display:block;}
.dropzone:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}
.dropzone .di{font-size:28px;margin-bottom:8px;}
.dropzone input{display:none;}
.file-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.file-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted2);max-width:100%;overflow-wrap:anywhere;}

/* ===== BOUTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-weight:700;font-size:12px;letter-spacing:.4px;border-radius:var(--radius-sm);text-decoration:none;border:1px solid var(--border2);background:var(--surface);color:var(--text);cursor:pointer;transition:.2s;white-space:nowrap;}
.btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}
.btn-filled{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-filled:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:11px;}
.btn-danger{border-color:rgba(220,38,38,.4);color:var(--error);background:var(--surface);}
.btn-danger:hover{background:var(--error);color:#fff;border-color:var(--error);}
.btn:disabled{opacity:.55;cursor:wait;}

/* ===== ALERTES ===== */
.alert{padding:13px 16px;border-radius:10px;font-size:14px;font-weight:500;margin-bottom:20px;overflow-wrap:break-word;}
.alert-success{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:var(--success);}
.alert-error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.3);color:var(--error);}
.alert-info{background:var(--primary-light);border:1px solid rgba(0,102,204,.25);color:var(--primary);}

/* ===== LISTES ===== */
.list{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.list-row{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border);transition:.15s;text-decoration:none;color:inherit;background:var(--surface);}
.list-row:last-child{border-bottom:none;}
.list-row:hover{background:var(--bg2);}
.list-row .main{flex:1;min-width:0;}
.list-row .rt{font-weight:600;color:var(--text);font-size:15px;overflow-wrap:break-word;}
.list-row .rd{font-size:13px;color:var(--muted2);margin-top:3px;overflow-wrap:break-word;}
.empty{text-align:center;padding:44px 20px;color:var(--muted);}
.empty .ei{font-size:34px;opacity:.5;margin-bottom:12px;}

/* ===== BADGES / STATUTS ===== */
.tag{display:inline-block;padding:4px 11px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;border-radius:100px;font-size:10px;font-weight:700;}
.tag-nouveau{background:var(--primary-light);color:var(--primary);}
.tag-en_cours{background:rgba(217,119,6,.12);color:var(--warn);}
.tag-termine{background:rgba(22,163,74,.12);color:var(--success);}
.tag-annule{background:rgba(220,38,38,.1);color:var(--error);}
.tag-envoye{background:var(--primary-light);color:var(--primary);}
.tag-accepte{background:rgba(22,163,74,.12);color:var(--success);}
.tag-refuse{background:rgba(220,38,38,.1);color:var(--error);}
.tag-expire{background:var(--bg2);color:var(--muted2);}
.tag-brouillon{background:var(--bg2);color:var(--muted2);}
.tag-basse{background:var(--bg2);color:var(--muted2);}
.tag-normale{background:var(--primary-light);color:var(--primary);}
.tag-haute{background:rgba(220,38,38,.1);color:var(--error);}

/* ===== TIMELINE ===== */
.timeline{display:flex;margin:10px 0 4px;}
.tl-step{flex:1;text-align:center;position:relative;font-size:clamp(10px,2.3vw,12px);color:var(--muted);padding:0 2px;}
.tl-step::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--border2);z-index:0;}
.tl-step:first-child::before{display:none;}
.tl-dot{width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--border2);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:11px;position:relative;z-index:1;color:var(--muted);}
.tl-step.done .tl-dot{background:var(--primary);border-color:var(--primary);color:#fff;}
.tl-step.done{color:var(--primary);}
.tl-step.done::before{background:var(--primary);}

/* ===== MESSAGERIE ===== */
.thread{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;max-height:480px;overflow-y:auto;padding-right:6px;-webkit-overflow-scrolling:touch;}
.msg{max-width:80%;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.55;overflow-wrap:anywhere;}
.msg .meta{display:block;font-size:11px;color:var(--muted);margin-top:6px;}
.msg-client{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.msg-client .meta{color:rgba(255,255,255,.75);}
.msg-qyline{align-self:flex-start;background:var(--bg2);border:1px solid var(--border);border-bottom-left-radius:4px;}
.msg-ref{display:inline-block;margin-bottom:6px;padding:2px 9px;border-radius:100px;background:rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:700;}
.msg-qyline .msg-ref{background:var(--primary-light);color:var(--primary);}
.msg-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.msg-file{display:block;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--border2);background:var(--surface);text-decoration:none;flex-shrink:0;}
.msg-file img{width:100%;height:100%;object-fit:cover;}
.msg-file.doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;color:var(--muted2);padding:5px;text-align:center;overflow-wrap:anywhere;}
.msg-del{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:12px;margin-left:6px;padding:2px 5px;border-radius:6px;}
.msg-qyline .msg-del{color:var(--muted);}
.msg-del:hover{color:#fff;background:rgba(255,255,255,.2);}
.msg-qyline .msg-del:hover{color:var(--error);background:rgba(220,38,38,.1);}
.msg{position:relative;box-shadow:0 1px 2px rgba(15,23,42,.05);animation:msgIn .22s ease;}
@keyframes msgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.msg-link{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600;overflow-wrap:anywhere;}
.msg-qyline .msg-link{color:var(--primary);}
.msg-status{margin-left:8px;font-weight:600;opacity:.9;}

/* Fil : entête + séparateurs de date + recherche */
.chat .chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.chat-peer{display:flex;align-items:center;gap:11px;}
.chat-ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent,#0A2E6B));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;}
.chat-name{font-weight:700;font-size:15px;color:var(--text);}
.chat-sub{font-size:12px;color:var(--muted);}
.chat-search input{padding:8px 12px;font-size:13px;border:1px solid var(--border2);border-radius:100px;background:var(--surface);color:var(--text);min-width:170px;}
.date-sep{align-self:center;margin:4px 0;}
.date-sep span{background:var(--bg2);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;padding:3px 12px;border-radius:100px;}
.thread-empty-search{align-self:center;color:var(--muted);font-size:13px;padding:14px;}

/* Barre de composition */
.msg-compose{display:flex;flex-direction:column;gap:10px;}
.msg-compose .cline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.char-count{position:absolute;right:8px;bottom:8px;font-size:11px;color:var(--muted);pointer-events:none;}
.attach-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:9px 14px;border:1px solid var(--border2);border-radius:100px;font-size:13px;color:var(--text);background:var(--surface);transition:.15s;}
.attach-btn:hover{border-color:var(--primary);color:var(--primary);}
.compose-hint{font-size:11px;color:var(--muted);margin-left:auto;}
.file-chips{display:flex;flex-wrap:wrap;gap:6px;}
.file-chip{background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px;overflow-wrap:anywhere;}
.quick-replies{display:flex;flex-wrap:wrap;gap:6px;}
.qr{background:var(--surface);border:1px solid var(--border2);color:var(--muted2);font-size:12px;padding:6px 12px;border-radius:100px;cursor:pointer;transition:.15s;}
.qr:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}

/* ===== CHAT — visuel amélioré ===== */
.chat{background:linear-gradient(180deg,var(--surface),var(--surface));}
.chat-full .thread{max-height:min(58vh,620px);}
.thread{scroll-behavior:smooth;padding:6px 8px 8px;background:
  radial-gradient(circle at 12% 8%,var(--primary-light),transparent 42%),
  radial-gradient(circle at 88% 92%,var(--accent-light),transparent 40%);border-radius:14px;}
.msg{max-width:74%;box-shadow:0 2px 8px rgba(15,23,42,.06);border-radius:14px;}
.msg-client{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-bottom-right-radius:5px;}
.msg-qyline{border-bottom-left-radius:5px;box-shadow:0 2px 10px rgba(15,23,42,.05);}
.msg .meta{opacity:.85;}
.msg-del{opacity:.45;transition:.15s;}
.msg:hover .msg-del{opacity:1;}

/* Barre de saisie moderne (pilule) */
.compose-bar-wrap{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:6px 6px 6px 12px;transition:.15s;}
.compose-bar-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
.compose-bar-wrap textarea{flex:1;border:none!important;background:transparent!important;resize:none;padding:8px 4px!important;min-height:24px;max-height:140px;font-size:15px;box-shadow:none!important;}
.compose-bar-wrap textarea:focus{outline:none;}
.compose-bar-wrap .attach-btn{border:none;background:transparent;padding:8px;font-size:20px;border-radius:50%;flex-shrink:0;}
.compose-bar-wrap .attach-btn:hover{background:var(--bg2);color:var(--primary);}
.send-btn{flex-shrink:0;width:42px;height:42px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:17px;cursor:pointer;box-shadow:0 4px 14px var(--cyan-glow);transition:.15s;}
.send-btn:hover{transform:scale(1.06);}
.send-btn:active{transform:scale(.95);}

/* ===== INBOX (boîte de réception) ===== */
.inbox{display:flex;flex-direction:column;}
.inbox-row{display:flex;align-items:center;gap:14px;padding:15px 20px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);transition:.15s;position:relative;}
.inbox-row:last-child{border-bottom:none;}
.inbox-row:hover{background:var(--bg2);}
.inbox-row.unread{background:var(--primary-light);}
.inbox-ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;}
.inbox-body{flex:1;min-width:0;}
.inbox-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.inbox-name{font-weight:700;color:var(--text);font-size:15px;}
.inbox-row.unread .inbox-name{font-weight:800;}
.inbox-time{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.inbox-prev{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.inbox-row.unread .inbox-prev{color:var(--muted2);font-weight:500;}
.inbox-badge{background:var(--primary);color:#fff;font-size:11px;font-weight:700;min-width:22px;height:22px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0;}

/* ===== GALERIE ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:6px;}
.gallery a{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg2);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted2);font-size:12px;transition:.2s;}
.gallery a:hover{border-color:var(--primary);}
.gallery img{width:100%;height:100%;object-fit:cover;}
.gallery .doc{display:flex;flex-direction:column;gap:6px;padding:10px;text-align:center;overflow-wrap:anywhere;}
.gallery .doc .gi{font-size:26px;}

/* ===== AVIS ===== */
.stars{color:var(--accent);letter-spacing:2px;font-size:16px;}
.rate{display:inline-flex;flex-direction:row-reverse;gap:4px;}
.rate input{display:none;}
.rate label{font-size:28px;color:var(--border2);cursor:pointer;transition:.15s;line-height:1;}
.rate input:checked ~ label,.rate label:hover,.rate label:hover ~ label{color:var(--accent);}
.rate2{display:inline-flex;align-items:center;gap:6px;}
.rate2 .star{font-size:32px;line-height:1;color:var(--border2);cursor:pointer;transition:.12s;user-select:none;}
.rate2 .star:hover{transform:scale(1.15);}
.rate2 .star.on{color:var(--accent);}
.rate-val{margin-left:10px;font-weight:700;color:var(--primary);font-size:15px;}

/* ===== AUTH ===== */
.auth-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:linear-gradient(135deg,var(--primary-light),var(--accent-light));}
.auth-card{max-width:430px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(28px,6vw,42px) clamp(22px,5vw,38px);position:relative;overflow:hidden;box-shadow:var(--shadow-md);}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px;text-decoration:none;}
.auth-brand img{height:32px;width:auto;max-width:130px;border-radius:10px;
                aspect-ratio:auto;object-fit:contain;}
.auth-brand span{font-weight:800;letter-spacing:3px;color:var(--text);}
.auth-switch{text-align:center;margin-top:20px;font-size:14px;color:var(--muted2);}
.auth-switch a{color:var(--primary);text-decoration:none;font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}
.pw-meter{height:6px;border-radius:4px;background:var(--bg2);overflow:hidden;margin-top:8px;}
.pw-meter i{display:block;height:100%;width:0;transition:.3s;}

/* ===== TABLEAUX ===== */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;padding:11px 14px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--border);white-space:nowrap;font-weight:700;}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--muted2);}
.tbl tr:hover td{background:var(--bg2);}

/* ===== OVERLAY MOBILE ===== */
.sb-overlay{position:fixed;inset:0;background:rgba(20,26,32,.4);z-index:150;opacity:0;visibility:hidden;transition:.3s;}
.sb-overlay.open{opacity:1;visibility:visible;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--primary);}

/* ===== RESPONSIVE ===== */
@media(min-width:1500px){.main-inner{max-width:1320px;}}
@media(max-width:1200px){:root{--sidebar:230px;}.main-inner{padding:28px 22px 60px;}}
@media(max-width:960px){
  .app{grid-template-columns:1fr;}
  .content{grid-column:1;}
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-md);width:min(280px,84vw);}
  .sidebar.open{transform:translateX(0);}
  .burger{display:inline-flex;align-items:center;justify-content:center;}
}
@media(max-width:760px){
  .grid-2{grid-template-columns:1fr;}
  .field-row-3{grid-template-columns:1fr;}
  .main-inner{padding:24px 16px 56px;}
  .topbar{padding:11px 16px;gap:10px;}
  .msg{max-width:88%;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .field-row{grid-template-columns:1fr;}
  .card + .card{margin-top:16px;}
  .tb-title{font-size:15px;}
  .tb-btn{padding:9px 12px;font-size:12px;}
  .list-row{padding:14px;gap:12px;}
  .quick{grid-template-columns:1fr;}
}
@media(max-width:400px){
  .grid-4,.grid-3{grid-template-columns:1fr;}
  .main-inner{padding:20px 13px 50px;}
  .btn{padding:11px 16px;}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
}

/* ===== IMPRESSION ===== */
@media print{
  .sidebar,.topbar,.sb-overlay,.no-print,.btn{display:none!important;}
  .app{grid-template-columns:1fr;}
  .content{grid-column:1;}
  body{background:#fff;}
  .card{border:1px solid #ccc;break-inside:avoid;box-shadow:none;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* ============================================================
   ✨ REFONTE VISUELLE v3 — polish global (client · admin · auth)
   Couche additive : n'altère pas la structure, s'appuie sur les
   tokens existants (compatible thème clair & sombre).
   ============================================================ */

/* Fond légèrement travaillé (halos très doux, fixes) */
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--cyan-dim), transparent 52%),
    radial-gradient(1000px 520px at -10% 110%, var(--accent-light), transparent 48%),
    var(--bg);
  background-attachment:fixed;
}

/* Cartes : rayon plus doux, ombre affinée, survol qui respire */
.card,.stat{border-radius:14px;transition:box-shadow .25s ease,transform .2s ease,border-color .2s ease;}
.card:hover{box-shadow:var(--shadow-md);}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}

/* Boutons : profondeur, dégradé sur le bouton plein, retour tactile, focus accessible */
.btn{border-radius:10px;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,background .2s ease,border-color .2s ease,color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-filled{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:var(--primary-dark);box-shadow:0 4px 14px -5px var(--cyan-glow);}
.btn-filled:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 24px -8px var(--cyan-glow);}
.btn-sm{border-radius:10px;}
:where(a,button,.btn,.sb-link,input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* Navigation latérale : micro-interaction + pastille active plus nette */
.sb-link{transition:background .18s,color .18s,transform .18s;}
.sb-link:hover{transform:translateX(2px);}
.sb-link.is-active{background:linear-gradient(90deg,var(--primary-light),transparent 90%);box-shadow:inset 0 0 0 1px var(--border);}
.sb-brand{transition:opacity .2s;}
.sb-brand:hover{opacity:.85;}

/* Barre supérieure : légère élévation vitrée */
.topbar{box-shadow:0 1px 0 var(--border),0 10px 24px -22px rgba(0,0,0,.5);}

/* Statistiques : chiffre accent en dégradé */
.stat:hover{transform:translateY(-3px);}
.stat .num.accent{background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary);}

/* Tags : contour léger pour plus de netteté */
.tag{box-shadow:inset 0 0 0 1px rgba(125,138,155,.16);}

/* Alertes : accent latéral + coins doux */
.alert{border-radius:14px;border-left-width:4px;}

/* Lignes de liste : indicateur au survol */
.list-row{transition:background .15s ease,box-shadow .15s ease;}
.list-row:hover{box-shadow:inset 3px 0 0 var(--primary);}

/* Champs : survol discret */
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--primary);}

/* Entrées animées (respecte prefers-reduced-motion défini plus haut) */
.main-inner{animation:pageIn .4s ease both;}
.auth-card{animation:pageIn .5s cubic-bezier(.2,.8,.2,1) both;}
@keyframes pageIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.drive-modal.open .box,.drive-modal.open>div{animation:modalIn .24s ease both;}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:none;}}

/* Barre de défilement plus fine et harmonisée (Firefox) */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}

/* Touche pro : mot mis en avant des titres en dégradé de marque */
.page-title em{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary);}
.card-title{gap:8px;}
.empty .ei,.drive-empty .ei{filter:drop-shadow(0 6px 10px var(--cyan-glow));}
.card-head-row .page-tag{display:inline-block;background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:10px;}

/* ============================================================
   ✨ REFONTE VISUELLE v4 — espace client & administration
   Toutes les icônes sont désormais des SVG du thème (qy_icon) :
   on peut donc leur donner un vrai contenant, cohérent partout.
   Couche additive : aucune structure HTML modifiée.
   ============================================================ */

/* ---- Pastille d'icône commune (statistiques, tuiles, états vides) ---- */
.stat .si,.quick .qi,.empty .ei,.drive-empty .ei{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--primary-light),var(--accent-light));
  box-shadow:inset 0 0 0 1px var(--border);
  line-height:0;
}
.stat .si{width:40px;height:40px;border-radius:14px;margin-bottom:14px;}
.quick .qi{width:46px;height:46px;border-radius:14px;margin-bottom:13px;}
.empty .ei,.drive-empty .ei{width:76px;height:76px;border-radius:20px;margin:0 auto 16px;opacity:1;}

/* ---- Statistiques : hiérarchie plus nette ---- */
.stat{position:relative;overflow:hidden;}
.stat::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));opacity:0;transition:opacity .25s;}
.stat:hover::before{opacity:1;}
.stat .lab{font-weight:600;}
a.stat{display:block;text-decoration:none;color:inherit;}
a.stat::after{content:'→';position:absolute;top:16px;right:18px;color:var(--primary);
  font-size:15px;opacity:0;transform:translateX(-4px);transition:.22s;}
a.stat:hover::after{opacity:1;transform:none;}

/* ---- Accès rapide : affordance de clic ---- */
.quick a{position:relative;overflow:hidden;}
.quick a::after{content:'→';position:absolute;top:20px;right:20px;color:var(--primary);
  font-size:16px;opacity:0;transform:translateX(-5px);transition:.22s;}
.quick a:hover::after{opacity:1;transform:none;}
.quick a:hover .qi{transform:scale(1.06);}
.quick .qi{transition:transform .22s cubic-bezier(.2,.8,.2,1);}

/* ---- États vides : plus aérés, moins tristes ---- */
.empty,.drive-empty{color:var(--muted);font-size:14px;line-height:1.6;}
.empty .ei,.drive-empty .ei{filter:none;}

/* ---- Cartes : entête séparée du contenu ----
   Uniquement DANS une carte : le même bloc sert aussi d'en-tête de page
   (compte/demandes.php, admin/clients.php…) où un trait serait déplacé. */
.card-title{padding-bottom:2px;}
.card > .card-head-row{padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--border);}
.card > .card-head-row .card-title{margin-bottom:0;}

/* ---- Barre latérale : repères plus lisibles ---- */
.sb-brand{position:sticky;top:0;background:var(--surface);z-index:2;}
.sb-group h5{display:flex;align-items:center;gap:8px;}
.sb-group h5::after{content:'';flex:1;height:1px;background:var(--border);}
.sb-link.is-active{box-shadow:inset 0 0 0 1px var(--border),0 2px 8px -4px var(--cyan-glow);}
.sb-link.is-active .ic{filter:drop-shadow(0 2px 4px var(--cyan-glow));}
.sb-link .cnt{box-shadow:0 2px 6px -2px var(--cyan-glow);}
.sb-user{background:var(--surface2);}
.avatar{background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 3px 10px -3px var(--cyan-glow);}

/* ---- Barre supérieure ---- */
.tb-btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color:var(--primary-dark);box-shadow:0 4px 14px -6px var(--cyan-glow);}
.tb-btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--primary),var(--primary-dark));}
.notif-toggle,.theme-toggle,.burger{transition:border-color .2s,background .2s,transform .15s;}
.notif-toggle:hover,.theme-toggle:hover,.burger:hover{background:var(--primary-light);}
.notif-toggle:active,.theme-toggle:active{transform:scale(.94);}
.notif-dot{box-shadow:0 0 0 2px var(--surface);}
.notif-panel{border-radius:14px;box-shadow:0 18px 44px -18px rgba(15,23,42,.35);}

/* ---- Listes : indication de navigation ---- */
a.list-row{position:relative;padding-right:38px;}
a.list-row::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:20px;line-height:1;opacity:.45;transition:.18s;}
a.list-row:hover::after{opacity:1;color:var(--primary);right:12px;}

/* ---- Tableaux : contenant net, lignes alternées, entête collante ---- */
.tbl-wrap{border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.tbl th{position:sticky;top:0;z-index:1;background:var(--surface2);border-bottom:1px solid var(--border);}
.tbl tbody tr:nth-child(even) td{background:var(--surface2);}
.tbl tbody tr:hover td{background:var(--primary-light);}
.tbl tr:last-child td{border-bottom:none;}
.tbl th:first-child{border-top-left-radius:13px;}
.tbl th:last-child{border-top-right-radius:13px;}

/* ---- Étiquettes de statut : pastille de couleur ---- */
.tag{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge,.inbox-badge{box-shadow:0 2px 6px -2px var(--cyan-glow);}

/* ---- Fil d'avancement ---- */
.tl-dot{box-shadow:0 0 0 4px var(--surface);transition:.25s;}
.tl-step.done .tl-dot{box-shadow:0 0 0 4px var(--surface),0 4px 12px -3px var(--cyan-glow);}
.tl-step.done{font-weight:600;}

/* ---- Formulaires : intitulés et champs plus lisibles ---- */
.field label{color:var(--muted2);text-transform:uppercase;font-size:11px;letter-spacing:.7px;}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px var(--primary-light);}
.dropzone{border-radius:14px;}
.dropzone .di{font-size:26px;}

/* ---- Alertes : icône implicite via la barre latérale colorée ---- */
.alert-success{border-left-color:var(--success);}
.alert-error{border-left-color:var(--error);}
.alert-info{border-left-color:var(--primary);}

/* ---- Page de connexion : fond plus travaillé ---- */
.auth-page{background:
  radial-gradient(900px 500px at 15% 0%,var(--primary-light),transparent 55%),
  radial-gradient(800px 460px at 85% 100%,var(--accent-light),transparent 55%),
  var(--bg);}
.auth-card{border-radius:20px;box-shadow:0 24px 60px -28px rgba(15,23,42,.4);}

/* ---- Cartes du Drive ---- */
.drive-item{border-radius:14px;}
.drive-item:hover{transform:translateY(-3px);}

/* ---- Confort de lecture ---- */
.page-sub{line-height:1.7;}
.card + .card{margin-top:22px;}

/* ---- Mobile : pastilles un peu plus compactes ---- */
@media(max-width:560px){
  .stat .si{width:36px;height:36px;border-radius:10px;margin-bottom:11px;}
  .quick .qi{width:42px;height:42px;border-radius:14px;}
  .empty .ei,.drive-empty .ei{width:64px;height:64px;border-radius:20px;}
  .card-head-row{padding-bottom:12px;}
}

/* ---- Impression : on retire les décorations ---- */
@media print{
  .stat::before,a.stat::after,.quick a::after,a.list-row::after{display:none!important;}
  .stat .si,.quick .qi,.empty .ei{background:none;box-shadow:none;}
  .auth-page,body{background:#fff!important;}
}

/* ============================================================
   FINITIONS v5 — typographie & cohérence
   ------------------------------------------------------------
   Cette couche ne change aucune mise en page : elle corrige ce
   qui se voit sans se nommer — veuves dans les titres, chiffres
   qui dansent d'une ligne à l'autre, contrôles de formulaire au
   bleu du système, rayons pris au hasard.

   Échelle de rayons, désormais unique sur tout le site :
     6 px  contrôles fins (puces, badges)
     10 px boutons, champs
     14 px cartes
     20 px grandes surfaces, modales
     100px pilules
   ============================================================ */
:root{
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:100px;
  /* Les deux anciens noms restent valides : ils pointent vers l'échelle. */
  --radius:var(--r-md); --radius-sm:var(--r-sm);
}

/* ---- Titres : plus de mot orphelin en fin de ligne ----
   text-wrap:balance répartit les mots sur les lignes d'un titre
   au lieu de laisser le dernier tout seul. Ignoré si non géré. */
:where(h1,h2,h3,.page-title,.card-title,.stat .sv,.empty strong){text-wrap:balance;}
/* pretty ne corrige que la dernière ligne : parfait pour du texte courant */
:where(p,.page-sub,.card-sub,.hint,.list-row .lr-sub){text-wrap:pretty;}

/* ---- Correction optique : plus le texte est gros, plus il faut le resserrer ---- */
.page-title{letter-spacing:-.6px;}
.card-title{letter-spacing:-.2px;}
/* …et inversement, les petites capitales ont besoin d'air */
.page-tag,.field label,.tag,.sb-group{letter-spacing:.7px;}

/* ---- Chiffres : même largeur, donc colonnes alignées ----
   Sans cela, un « 1 » est plus étroit qu'un « 8 » et les montants
   d'un tableau ne s'alignent jamais verticalement. */
.tbl td,.tbl th,.stat .sv,.fin-row .fm,.ck .v,.dl-split strong,
.montant,.mono,time,.rd{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}

/* ---- Cases à cocher et curseurs aux couleurs de la marque ----
   Une ligne, et les contrôles natifs cessent d'être bleu système. */
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--primary);}

/* ---- Sélection de texte ---- */
::selection{background:var(--primary-light);color:var(--text);}

/* ---- Anneau de focus : identique partout, jamais masqué ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-xs);
}

/* ---- Images : jamais déformées, jamais débordantes ---- */
img,svg,video{max-width:100%;height:auto;}
.img-slot img,.rtc-tile video{height:100%;}

/* ---- Tableaux larges : on fait défiler la table, pas la page ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ============================================================
   BOUTONS À ICÔNE — alignement et respiration
   ------------------------------------------------------------
   Une icône SVG n'a pas de ligne de base : posée à côté d'un
   texte, elle le décale d'un ou deux pixels et se colle à lui.
   Ces règles centrent le couple icône + texte une fois pour
   toutes, sur TOUTES les pages de l'espace client et de
   l'administration — sans avoir à styler chaque bouton.
   ============================================================ */
.btn{line-height:1.15;gap:8px;}
.btn > svg,.btn > .qy-i,.btn > .qy-ic{flex:0 0 auto;display:block;}
/* Bouton réduit à une seule icône : carré, icône parfaitement centrée */
.btn.btn-ic{padding:9px;min-width:38px;gap:0;}
.btn-sm{gap:7px;}
.btn-sm > svg,.btn-sm > .qy-i{width:14px;height:14px;}

/* Groupes de boutons : un espacement unique, et jamais de
   débordement horizontal sur mobile. */
.btn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn-row > form{margin:0;}
.card-head-row .btn-row{justify-content:flex-end;}
@media(max-width:560px){
  .btn-row{gap:8px;}
  .btn-row > .btn,.btn-row > form > .btn{flex:1 1 auto;justify-content:center;}
}

/* Titres de cartes et d'états vides : l'icône ne colle plus au texte */
.card-title > svg,.card-title > .qy-i{flex:0 0 auto;}
.list-row .btn + .btn,.list-row form + form,.list-row .btn + form{margin-left:0;}

/* Champs : un peu plus d'air entre les blocs de formulaire */
.field + .field{margin-top:2px;}
.field-row,.field-row-3{margin-bottom:16px;}
.card form > .btn:last-child,.card form > .btn-row:last-child{margin-top:6px;}