/* ═══════════════════════════════════════════════════════════
   AGENCE 360° · Design System (issu de la maquette validée)
   ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Fond des boutons pleins : #6e6bff + texte blanc = 4,03:1 (sous le seuil AA 4,5:1).
     Ce violet plus dense atteint 5,09:1 ; --acc reste utilisé pour les accents. */
  --acc-solid:#5b57f5;--acc-solid-hover:#4f4bd6;
  /* ── Thème sombre (par défaut) ── */
  --bg:#09090f;--bg2:#111119;--bg3:#1a1a26;--bg4:#222230;
  --b:#ffffff0d;--b2:#ffffff18;--b3:#ffffff25;
  --t:#eeeef5;--t2:#8888aa;--t3:#4a4a66;
  --acc:#6e6bff;--acc2:#a78bfa;--acc3:#34d399;
  --red:#f87171;--amb:#fbbf24;--blu:#60a5fa;--pnk:#f472b6;
  --r:10px;--r2:6px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  /* ── Thème clair ──
     Mêmes teintes de marque (violet #6e6bff), surfaces et textes inversés,
     accents légèrement approfondis pour rester lisibles (WCAG AA) sur fond blanc. */
  --bg:#f7f7fb;--bg2:#ffffff;--bg3:#f1f1f7;--bg4:#e8e8f2;
  --b:#00000010;--b2:#0000001a;--b3:#00000029;
  --t:#16161f;--t2:#5c5c78;--t3:#9393ab;
  --acc:#6e6bff;--acc2:#7c5cf0;--acc3:#059669;
  --red:#dc2626;--amb:#d97706;--blu:#2563eb;--pnk:#db2777;
  color-scheme:light;
}

/* Avant que le JS de préférence ne s'applique, respecte la préférence système
   pour éviter un flash de mauvais thème (voir script anti-FOUC dans le layout) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f7fb;--bg2:#ffffff;--bg3:#f1f1f7;--bg4:#e8e8f2;
    --b:#00000010;--b2:#0000001a;--b3:#00000029;
    --t:#16161f;--t2:#5c5c78;--t3:#9393ab;
    --acc:#6e6bff;--acc2:#7c5cf0;--acc3:#059669;
    --red:#dc2626;--amb:#d97706;--blu:#2563eb;--pnk:#db2777;
    color-scheme:light;
  }
}
html,body{height:100%;overflow:hidden}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--t);font-size:14px;line-height:1.5}
a{color:inherit}

/* ── AUTH ── */
#auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100;
  background-image:radial-gradient(ellipse 80% 50% at 50% -20%,#6e6bff18,transparent);overflow-y:auto}
.auth-card{background:var(--bg2);border:1px solid var(--b2);border-radius:16px;padding:40px 44px;width:420px;max-width:94vw;
  box-shadow:0 32px 80px #00000060}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.auth-logo-icon{width:40px;height:40px;flex-shrink:0;display:block}
.auth-logo-txt{font-size:16px;font-weight:600}
.auth-logo-sub{font-size:11px;color:var(--t3);letter-spacing:.06em;text-transform:uppercase}
.auth-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--t2);margin-bottom:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:6px;letter-spacing:.03em}
.field input{width:100%;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r2);
  padding:10px 14px;color:var(--t);font-family:inherit;font-size:14px;outline:none;transition:border .15s}
.field input:focus{border-color:var(--acc)}
.field input::placeholder{color:var(--t3)}
.btn-primary{width:100%;background:var(--acc-solid);color:#fff;border:none;border-radius:var(--r2);
  padding:11px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;
  transition:opacity .15s,transform .1s;margin-top:4px}
.btn-primary:hover{background:var(--acc-solid-hover)}.btn-primary:active{scale:.96}
.auth-footer{text-align:center;margin-top:20px;font-size:12px;color:var(--t3)}
.auth-footer a{color:var(--acc2);text-decoration:none}
.otp-boxes{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-box{width:52px;height:56px;background:var(--bg3);border:1px solid var(--b2);border-radius:8px;
  text-align:center;font-size:22px;font-weight:600;color:var(--t);font-family:'DM Mono',monospace;
  outline:none;transition:border .15s}
.otp-box:focus{border-color:var(--acc)}
.security-badge{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#34d39910;
  border:1px solid #34d39925;border-radius:var(--r2);margin-bottom:20px;font-size:12px;color:#34d399}
.form-error{font-size:12px;color:var(--red);margin-top:6px}
.form-message{font-size:12px;color:var(--acc3);margin-top:6px}

/* ── LAYOUT ── */
#app{display:flex;height:100vh;flex-direction:column}
.topbar{height:52px;min-height:52px;background:var(--bg2);border-bottom:1px solid var(--b);
  display:flex;align-items:center;padding:0 20px;gap:16px;z-index:50}
.tb-logo{display:flex;align-items:center;gap:8px;margin-right:8px;text-decoration:none}
.tb-logo-icon{width:28px;height:28px;flex-shrink:0;display:block}
.tb-logo-name{font-size:13px;font-weight:600}
.tb-search{flex:1;max-width:320px;position:relative}
.tb-search input{width:100%;background:var(--bg3);border:1px solid var(--b);border-radius:6px;
  padding:6px 12px 6px 32px;font-size:13px;color:var(--t);font-family:inherit;outline:none}
.tb-search input::placeholder{color:var(--t3)}
.tb-search input:focus{border-color:var(--acc)}
.tb-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:14px}
.tb-search-results{position:absolute;top:calc(100% + 6px);left:0;width:420px;max-width:80vw;background:var(--bg2);
  border:1px solid var(--b2);border-radius:10px;box-shadow:0 20px 50px #00000070;z-index:200;
  max-height:420px;overflow-y:auto;display:none}
.tb-search-results.open{display:block}
.sr-group{padding:8px 0;border-bottom:1px solid var(--b)}
.sr-group:last-child{border-bottom:none}
.sr-label{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:4px 14px}
.sr-item{display:block;padding:7px 14px;font-size:13px;color:var(--t2);text-decoration:none;cursor:pointer}
.sr-item:hover{background:var(--bg3);color:var(--t)}
.sr-empty{padding:16px;font-size:13px;color:var(--t3);text-align:center}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-date{font-size:12px;color:var(--t3)}
.tb-notif{width:34px;height:34px;border-radius:8px;background:none;border:1px solid var(--b);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);
  position:relative;font-size:16px;transition:background .15s}
.tb-notif:hover{background:var(--bg3)}
.notif-dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg2)}
.tb-user-name{font-size:12px;font-weight:500;color:var(--t2)}
.tb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6e6bff,#a78bfa);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;cursor:pointer;
  text-decoration:none;overflow:hidden}
.tb-avatar img{width:100%;height:100%;object-fit:cover}
.main-layout{display:flex;flex:1;min-height:0}
.sidebar{width:220px;min-width:220px;background:var(--bg2);border-right:1px solid var(--b);
  padding:16px 10px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.nav-grp{margin-bottom:20px}
.nav-lbl{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.08em;
  text-transform:uppercase;padding:0 8px;margin-bottom:5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;
  cursor:pointer;font-size:13px;color:var(--t2);transition:background-color .12s,color .12s,border-color .12s;margin-bottom:1px;
  border:none;background:none;width:100%;text-align:left;font-family:inherit;text-decoration:none;
  border-left:2px solid transparent}
.nav-item:hover{background:var(--bg3);color:var(--t)}
.nav-item.active{background:#6e6bff12;color:var(--acc2);font-weight:500;border-left-color:var(--acc)}
.nav-icon{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:10px;
  background:var(--acc-solid);color:#fff;font-weight:600}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--b)}
.content{flex:1;overflow-y:auto;background:var(--bg)}
.page{padding:28px 32px;min-height:100%}

/* ── COMPONENTS ── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.page-title{font-size:20px;font-weight:600;letter-spacing:-.02em}
.page-sub{font-size:13px;color:var(--t2);margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;
  font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:none;text-decoration:none;
  transition:background-color .12s,color .12s,border-color .12s,opacity .12s,scale .12s}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-acc{background:var(--acc-solid);color:#fff}.btn-acc:hover{background:var(--acc-solid-hover)}
.btn-ghost{background:none;color:var(--t2);border:1px solid var(--b2)}.btn-ghost:hover{background:var(--bg3);color:var(--t)}
.btn-danger{background:#f8717118;color:var(--red);border:1px solid #f8717128}
.btn-danger:hover{background:#f8717128}
.btn-green{background:#34d39918;color:var(--acc3);border:1px solid #34d39928}
.btn-green:hover{background:#34d39928}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.card-sm{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r2);padding:14px 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.stat-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:16px 20px}
.stat-label{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.stat-val{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-bottom:2px}
.stat-change{font-size:12px;color:var(--t3)}
.stat-change.up{color:var(--acc3)}
.stat-change.down{color:var(--red)}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px;gap:4px}
.b-purple{background:#6e6bff18;color:var(--acc2);border:1px solid #6e6bff28}
.b-green{background:#34d39918;color:var(--acc3);border:1px solid #34d39928}
.b-red{background:#f8717118;color:var(--red);border:1px solid #f8717128}
.b-amber{background:#fbbf2418;color:var(--amb);border:1px solid #fbbf2428}
.b-blue{background:#60a5fa18;color:var(--blu);border:1px solid #60a5fa28}
.b-pink{background:#f472b618;color:var(--pnk);border:1px solid #f472b628}
.b-gray{background:var(--bg3);color:var(--t2);border:1px solid var(--b2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 12px;border-bottom:1px solid var(--b2);color:var(--t3);
  font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
td{padding:10px 12px;border-bottom:1px solid var(--b);color:var(--t2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg3)}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.av-sm{width:24px;height:24px;font-size:10px}
.avatar-grp{display:flex}
.avatar-grp .avatar{margin-left:-8px;border:2px solid var(--bg2)}
.avatar-grp .avatar:first-child{margin-left:0}
.progress-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:2px;background:var(--acc)}
.divider{border:none;border-top:1px solid var(--b);margin:20px 0}
/* Chiffres : police du texte en chasse tabulaire (colonnes alignées, sans les
   espaces démesurés d'une police à chasse fixe dans « 15 000 € ») */
.mono{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:-.005em}

/* ── KANBAN ── */
.kanban-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;min-height:500px}
.kan-col{flex:1 1 0;min-width:184px;max-width:320px}
.kan-col-header{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:10px}
.kan-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kan-col-name{font-size:12px;font-weight:600;color:var(--t2)}
.kan-col-count{margin-left:auto;font-size:11px;color:var(--t3);background:var(--bg3);
  padding:1px 7px;border-radius:10px}
.kan-col-body{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);
  padding:10px;min-height:400px;transition:background .15s}
.kan-col-body.drag-over{background:#6e6bff10;border-color:#6e6bff40}
.kan-card{background:var(--bg3);border:1px solid var(--b2);border-radius:8px;padding:12px 14px;
  margin-bottom:8px;cursor:grab;transition:border-color .15s,transform .15s;user-select:none}
.kan-card:hover{border-color:var(--b3);transform:translateY(-1px)}
.kan-card.dragging{opacity:.5;cursor:grabbing}
.kan-card-title{font-size:13px;font-weight:500;color:var(--t);margin-bottom:8px;line-height:1.4}
.kan-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kan-card-tag{font-size:10px;padding:2px 7px;border-radius:4px}
.kan-card-date{font-size:11px;color:var(--t3);margin-left:auto}
.kan-add{width:100%;background:none;border:1px dashed var(--b2);border-radius:8px;padding:8px;
  color:var(--t3);font-size:12px;cursor:pointer;margin-top:6px;font-family:inherit;transition:border-color .15s,color .15s}
.kan-add:hover{border-color:var(--acc);color:var(--acc)}

/* ── CALENDAR ── */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-btn{background:var(--bg3);border:1px solid var(--b2);border-radius:6px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t2);font-size:16px;transition:background .12s}
.cal-btn:hover{background:var(--bg4)}
.cal-month{font-size:16px;font-weight:600;min-width:160px;text-align:center}
.cal-filters{display:flex;gap:8px;flex-wrap:wrap}
.cal-pill{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid;cursor:pointer;transition:opacity .15s,background-color .15s,border-color .15s}
.cal-pill.off{opacity:.35}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--b)}
.cal-day-hdr{background:var(--bg2);padding:8px 10px;font-size:11px;font-weight:600;
  color:var(--t3);text-align:center;letter-spacing:.04em;text-transform:uppercase}
.cal-cell{background:var(--bg2);min-height:110px;padding:8px;position:relative;cursor:pointer;transition:background .12s}
.cal-cell:hover{background:var(--bg3)}
.cal-cell.other-month{background:var(--bg)}
.cal-cell.today .cal-day-num{background:var(--acc-solid);color:#fff;border-radius:50%}
.cal-day-num{font-size:12px;font-weight:500;color:var(--t2);margin-bottom:4px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center}
.cal-event{font-size:10px;padding:3px 6px;border-radius:4px;margin-bottom:3px;cursor:pointer;
  font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── GALLERY ── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.photo-card{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;
  background:var(--bg3);border:1px solid var(--b);transition:transform .15s,border-color .15s}
.photo-card:hover{transform:translateY(-2px);border-color:var(--b3)}
.photo-card.selected{border:2px solid var(--acc3)}
.photo-card.rejected{opacity:.4}
.photo-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg3)}
.photo-thumb-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;
  justify-content:center;font-size:32px;background:var(--bg4)}
.photo-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,#000c,transparent);
  display:flex;align-items:flex-end;padding:10px;opacity:0;transition:opacity .15s}
.photo-card:hover .photo-overlay{opacity:1}
.photo-actions{display:flex;gap:6px;flex-wrap:wrap}
.photo-action-btn{background:#fff2;backdrop-filter:blur(4px);border:none;border-radius:6px;
  padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;color:#fff;transition:background .12s}
.photo-action-btn.ok:hover{background:#34d39980}
.photo-action-btn.no:hover{background:#f8717180}
/* Pastilles sur photo : fond plein pour rester lisibles quelle que soit l'image */
.photo-status{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;
  font-size:10.5px;font-weight:600;color:#fff;box-shadow:0 2px 8px #0000003d}
.photo-status .ico{width:11px;height:11px}
.photo-status.selected{background:#0f8a5f}
.photo-status.rejected{background:#c2343f}
.photo-name{padding:8px 10px;font-size:11px;color:var(--t2);border-top:1px solid var(--b);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── REPORTING ── */
.chart-wrap{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:20px;margin-bottom:14px}
.chart-title{font-size:14px;font-weight:600;margin-bottom:16px}
.chart-canvas-wrap{position:relative;height:220px}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:#000a;z-index:200;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-bg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--b2);border-radius:14px;
  padding:28px 32px;width:480px;max-width:94vw;max-height:90vh;overflow-y:auto}
.modal-lg{width:640px}
.modal-title{font-size:17px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.modal-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:20px;padding:2px}
.modal-close:hover{color:var(--t)}
.m-field{margin-bottom:16px}
.m-field label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:5px}
.m-field input,.m-field select,.m-field textarea{width:100%;background:var(--bg3);border:1px solid var(--b2);
  border-radius:6px;padding:9px 12px;color:var(--t);font-family:inherit;font-size:13px;outline:none;transition:border .15s}
.m-field input:focus,.m-field select:focus,.m-field textarea:focus{border-color:var(--acc)}
.m-field textarea{resize:vertical;min-height:80px}
.m-field select option{background:var(--bg3)}
.m-field input[type=color]{padding:3px;height:38px;cursor:pointer}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-error{font-size:12px;color:var(--red);margin-top:10px;display:none}
.modal-error.show{display:block}

/* ── NOTIFICATIONS PANEL ── */
.notif-panel{position:fixed;top:52px;right:0;width:360px;height:calc(100vh - 52px);
  background:var(--bg2);border-left:1px solid var(--b2);z-index:100;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.notif-panel.open{transform:translateX(0)}
.notif-header{padding:18px 20px;border-bottom:1px solid var(--b);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between}
.notif-header button{font-size:12px;color:var(--acc2);background:none;border:none;cursor:pointer;font-family:inherit}
.notif-item{padding:14px 20px;border-bottom:1px solid var(--b);cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--bg3)}
.notif-item.unread{border-left:2px solid var(--acc)}
.notif-item{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start}
.notif-item .notif-icon{grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--bg3);color:var(--t2);margin:0}
.notif-item .notif-icon .ico{width:17px;height:17px}
.notif-item.unread .notif-icon{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc2)}
.notif-icon{font-size:18px;margin-bottom:4px}
.notif-text{font-size:13px;color:var(--t);margin-bottom:3px}
.notif-time{font-size:11px;color:var(--t3)}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg2);border:1px solid var(--b2);
  border-radius:10px;padding:14px 18px;z-index:300;transform:translateY(120px);
  transition:transform .3s cubic-bezier(.4,0,.2,1);min-width:300px;box-shadow:0 20px 40px #00000060}
.toast.show{transform:translateY(0)}
.toast-icon{font-size:20px;margin-bottom:4px}
.toast-title{font-size:13px;font-weight:600}
.toast-msg{font-size:12px;color:var(--t2);margin-top:2px}

/* ── MISC ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title{font-size:14px;font-weight:600}
.empty{text-align:center;padding:40px;color:var(--t3);font-size:13px}
.pill-tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.pill-tab{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;
  color:var(--t2);background:none;border:1px solid transparent;transition:background-color .12s,color .12s,border-color .12s;font-family:inherit}
.pill-tabs a.pill-tab{text-decoration:none}
.pill-tab.active{background:var(--bg3);color:var(--t);border-color:var(--b2)}
.pill-tab:hover:not(.active){color:var(--t)}
.time-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:4px 0}
.time-fill{height:100%;border-radius:3px}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
  border:1px solid var(--b);background:var(--bg3);margin-bottom:8px}
.filter-chip{cursor:pointer;padding:5px 12px}
.filter-chip.dim{opacity:.5}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.toggle{width:36px;height:20px;border-radius:10px;border:1px solid var(--b2);cursor:pointer;
  position:relative;transition:background .2s;background:var(--bg4);flex-shrink:0}
.toggle.on{background:var(--acc)}
.toggle-knob{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s}
.toggle.on .toggle-knob{left:calc(100% - 16px)}
.drop-zone{border:2px dashed var(--b2);border-radius:10px;padding:32px;text-align:center;color:var(--t3);
  font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s;margin-bottom:16px}
.drop-zone:hover,.drop-zone.over{border-color:var(--acc);color:var(--acc2);background:#6e6bff08}
.check-mark{color:var(--acc3)}
.cross-mark{color:var(--t3)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:10px}

/* ── RESPONSIVE MOBILE ── */
.hamburger-btn{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;background:none;border:1px solid var(--b);border-radius:8px;
  cursor:pointer;flex-shrink:0}
.hamburger-btn span{display:block;width:16px;height:2px;background:var(--t2);margin:0 auto;border-radius:2px}
.sidebar-backdrop{display:none}

@media (max-width:860px){
  .tb-search{display:none}
}

@media (max-width:768px){
  .hamburger-btn{display:flex}
  .tb-date{display:none}

  .sidebar{position:fixed;top:52px;left:0;bottom:0;z-index:80;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
  .sidebar.open{transform:translateX(0);box-shadow:20px 0 40px #00000060}

  .sidebar-backdrop{display:block;position:fixed;inset:52px 0 0 0;background:#000000a0;
    z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}

  .grid4,.grid3,.grid2{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════
   AGENCE 360° · Ajouts CSS
   Ajouts fonctionnalites (palette, icones, vue liste, annotations)
   ═══════════════════════════════════════════════════════════ */

/* ══════════ COMMAND PALETTE ⌘K ══════════ */
.cmdk-overlay{position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;z-index:9999;padding-top:12vh}
.cmdk-overlay.open{display:flex}
.cmdk-box{width:600px;max-width:92vw;background:var(--bg2,#111119);border:1px solid var(--b2,#ffffff18);
  border-radius:14px;box-shadow:0 24px 60px #000a;overflow:hidden;animation:cmdkIn .12s ease}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cmdk-input{width:100%;background:none;border:none;border-bottom:1px solid var(--b,#ffffff0d);
  padding:16px 18px;font-size:15px;color:var(--t,#eee);outline:none;font-family:inherit}
.cmdk-input:focus-visible{outline:none}
.cmdk-input::placeholder{color:var(--t3,#4a4a66)}
.cmdk-results{max-height:52vh;overflow-y:auto;padding:6px}
.cmdk-group-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3,#4a4a66);
  padding:8px 12px 4px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer}
.cmdk-item.active{background:var(--acc,#6e6bff)1f}
.cmdk-item-icon{font-size:15px;width:22px;text-align:center}
.cmdk-item-label{font-size:13px;color:var(--t,#eee)}
.cmdk-empty{padding:24px;text-align:center;color:var(--t3,#4a4a66);font-size:13px}
.cmdk-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--b,#ffffff0d);
  font-size:11px;color:var(--t3,#4a4a66)}
.cmdk-foot kbd{background:var(--bg3,#1a1a26);border:1px solid var(--b2,#ffffff18);border-radius:4px;
  padding:1px 5px;font-family:inherit;font-size:10px;margin-right:2px}

/* ══════════ BADGE NOTIFICATION ══════════ */
#notif-count{position:absolute;top:-4px;right:-4px;background:var(--red,#f87171);color:#fff;
  font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:none;
  align-items:center;justify-content:center;padding:0 3px;line-height:1}

/* ══════════ VUE LISTE DES TÂCHES ══════════ */
.view-toggle{display:inline-flex;background:var(--bg3,#1a1a26);border:1px solid var(--b2,#ffffff18);
  border-radius:8px;overflow:hidden}
.view-toggle button{background:none;border:none;color:var(--t3,#4a4a66);padding:6px 12px;
  font-size:12px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px}
.view-toggle button.active{background:var(--acc,#6e6bff)22;color:var(--acc2,#a78bfa)}
.task-table{width:100%;border-collapse:collapse}
.task-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--t3,#4a4a66);padding:8px 12px;border-bottom:1px solid var(--b2,#ffffff18)}
.task-table td{padding:10px 12px;border-bottom:1px solid var(--b,#ffffff0d);font-size:13px;color:var(--t2,#8888aa)}
.task-table tr{cursor:pointer}
.task-table tr:hover td{background:var(--bg3,#1a1a26)}
.task-table .t-title{color:var(--t,#eee);font-weight:500}

/* ══════════ @MENTIONS dans commentaires ══════════ */
.mention{color:var(--acc2,#a78bfa);font-weight:600;background:var(--acc,#6e6bff)15;
  padding:0 3px;border-radius:3px}
.mention-menu{position:absolute;background:var(--bg2,#111119);border:1px solid var(--b2,#ffffff18);
  border-radius:8px;box-shadow:0 8px 24px #0008;z-index:100;max-height:180px;overflow-y:auto;min-width:180px}
.mention-menu-item{padding:8px 12px;font-size:13px;color:var(--t2,#8888aa);cursor:pointer;display:flex;align-items:center;gap:8px}
.mention-menu-item.active,.mention-menu-item:hover{background:var(--acc,#6e6bff)1f;color:var(--t,#eee)}

/* -- Drag & drop calendrier -- */
.cal-event[draggable="true"]{cursor:grab}
.cal-event.dragging{opacity:.4}
.cal-cell.cal-drop{background:#6e6bff18;outline:2px dashed #6e6bff;outline-offset:-2px}

/* ══════════ SYSTÈME D'ICÔNES SVG ══════════ */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0;
  stroke-width:2;color:inherit}
.ico-sm{width:.875em;height:.875em}
.ico-lg{width:1.25em;height:1.25em}
.ico-xl{width:2em;height:2em}
.ico-2xl{width:2.75em;height:2.75em}
/* Espacement optique après une icône (sans toucher aux conteneurs flex) */
.ico + span:not([class]){margin-left:.15em}
/* Pastilles de priorite (indicateur couleur) */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;vertical-align:middle;flex-shrink:0}
.dot-urgent{background:var(--red)}
.dot-high{background:var(--amb)}
.dot-medium{background:var(--blu)}
.dot-low{background:var(--t2)}
/* Icônes colorées par statut */
.ico-ok{color:var(--acc3)}
.ico-warn{color:var(--amb)}
.ico-err{color:var(--red)}
.ico-muted{color:var(--t3,#4a4a66)}
/* Icônes de navigation légèrement plus grandes */
.nav-icon .ico{width:1.15em;height:1.15em}
.tb-search-icon .ico{width:1em;height:1em;color:var(--t3,#4a4a66)}

/* Centrage robuste des icônes (nav, boutons, pastilles) */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.nav-icon .ico{width:18px;height:18px;vertical-align:middle}
.btn .ico,.pill-tab .ico{vertical-align:-.15em}
.notif-icon{display:inline-flex;align-items:center;justify-content:center}

/* Sélecteur de rôle dans la liste de l'équipe, même apparence que les badges,
   mais cliquable pour ouvrir le choix de rôle (natif, sans JS supplémentaire) */
.role-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:inline-flex; align-items:center;
  font-family:inherit; font-size:11px; font-weight:500;
  padding:2px 22px 2px 10px; border-radius:20px; cursor:pointer; outline:none;
  background-repeat:no-repeat; background-position:right 7px center; background-size:9px;
}
.role-select:hover{filter:brightness(1.15)}
.role-select:focus{box-shadow:0 0 0 2px var(--acc)55}
.role-select:disabled{opacity:.5;cursor:wait}

/* Couleurs reprenant exactement celles des anciens badges (b-purple/b-blue/b-pink) */
.role-select.role-admin{
  background-color:#6e6bff18; color:var(--acc2); border:1px solid #6e6bff28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.role-select.role-collaborator{
  background-color:#60a5fa18; color:var(--blu); border:1px solid #60a5fa28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.role-select.role-client{
  background-color:#f472b618; color:var(--pnk); border:1px solid #f472b628;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Les <option> du menu déroulant restent lisibles (le navigateur impose son propre style) */
.role-select option{background:var(--bg2,#111119); color:var(--t,#eee)}

/* Sélecteur de thème (Paramètres → Apparence) */
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme-option{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px;border-radius:var(--r2);border:1px solid var(--b2);background:var(--bg3);
  color:var(--t2);cursor:pointer;font-family:inherit;font-size:12px;transition:border-color .12s,color .12s}
.theme-option:hover{border-color:var(--b3);color:var(--t)}
.theme-option.active{border-color:var(--acc);color:var(--acc2);background:#6e6bff12}

/* ══════════════════════════════════════════════════════════
   PAGE DE CONNEXION · mise en scène split-screen + orbite animée
   Classes isolées de .auth-card/.auth-logo (réutilisées telles
   quelles par 2FA / mot de passe oublié / réinitialisation).
   ══════════════════════════════════════════════════════════ */

.auth-shell{position:fixed;inset:0;display:flex;background:var(--bg2)}

/* ── Panneau gauche : mise en scène de marque (masqué en mobile) ── */
.auth-visual{
  position:relative;flex:1 1 58%;min-width:0;background:var(--bg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:56px 64px;overflow:hidden;
}
.auth-visual::before{
  /* Vignette très subtile pour donner de la profondeur au panneau sombre */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 30% 20%, #6e6bff14, transparent 60%);
}
.auth-brand{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.auth-brand img{width:30px;height:30px}
.auth-brand-name{font-size:14px;font-weight:600;color:var(--t)}

.auth-hero{position:relative;z-index:1;max-width:460px}
.auth-hero h1{
  font-size:38px;line-height:1.12;font-weight:600;letter-spacing:-.025em;
  color:var(--t);margin-bottom:16px;
}
.auth-hero h1 em{color:var(--acc2);font-style:normal}
.auth-hero p{font-size:14.5px;line-height:1.6;color:var(--t2);max-width:400px}

.auth-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;position:relative;z-index:1}
.auth-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);
  padding:6px 12px 6px 10px;border:1px solid var(--b2);border-radius:20px;background:var(--bg2);
}
.auth-pill .ico{width:14px;height:14px;color:var(--acc2)}

.auth-foot-meta{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--t3);letter-spacing:.02em;
}

/* ── Système orbital : signature visuelle de la page ── */
.auth-orbit{
  position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:560px;height:560px;pointer-events:none;z-index:0;
}
.orbit-ring{
  position:absolute;border:1px solid var(--b2);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.orbit-ring.r1{width:560px;height:560px}
.orbit-ring.r2{width:420px;height:420px;border-color:var(--b)}
.orbit-ring.r3{width:290px;height:290px}
.orbit-track{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;
}
.orbit-track.t1{width:560px;height:560px;animation:orbitSpin 46s linear infinite}
.orbit-track.t2{width:420px;height:420px;animation:orbitSpin 30s linear infinite reverse}
.orbit-track.t3{width:290px;height:290px;animation:orbitSpin 20s linear infinite}
.orbit-dot{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 16px 2px #6e6bff88;
}
.orbit-dot.alt{width:7px;height:7px;background:var(--acc2);box-shadow:0 0 12px 1px #a78bfa77}
.orbit-dot.alt2{width:6px;height:6px;background:var(--acc3);box-shadow:0 0 10px 1px #34d39966}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;filter:drop-shadow(0 0 40px #6e6bff40);
}

@media (prefers-reduced-motion: reduce){
  .orbit-track{animation:none}
}

/* ── Panneau droit : formulaire ── */
.auth-panel{
  flex:1 1 42%;min-width:380px;display:flex;align-items:center;justify-content:center;
  padding:32px;position:relative;
}
.auth-form-wrap{width:100%;max-width:372px}
.auth-mobile-brand{display:none}
.auth-form-eyebrow{
  font-size:11px;font-weight:600;color:var(--acc2);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:10px;
}
.auth-form-title{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--t);margin-bottom:6px}
.auth-form-sub{font-size:13px;color:var(--t2);margin-bottom:28px}

.auth-flash{
  display:flex;align-items:flex-start;gap:8px;padding:11px 14px;border-radius:var(--r2);
  background:#34d39912;border:1px solid #34d39928;color:var(--acc3);font-size:12.5px;
  line-height:1.5;margin-bottom:18px;
}
.auth-flash .ico{flex-shrink:0;margin-top:1px}
.auth-error-banner{
  display:flex;align-items:flex-start;gap:8px;padding:11px 14px;border-radius:var(--r2);
  background:#f8717112;border:1px solid #f8717128;color:var(--red);font-size:12.5px;
  line-height:1.5;margin-bottom:18px;
}
.auth-error-banner .ico{flex-shrink:0;margin-top:1px}

.pw-field{position:relative}
.pw-field input{padding-right:42px}
.pw-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--t3);cursor:pointer;border-radius:6px;
}
.pw-toggle:hover{color:var(--t2);background:var(--bg4)}
.pw-toggle .ico{width:16px;height:16px}

.capslock-hint{
  display:flex;align-items:center;gap:5px;font-size:11px;color:var(--amb);margin-top:6px;
}
/* Sans cette règle, [hidden] (posé/retiré par le JS) a la même spécificité que
   .capslock-hint{display:flex} ci-dessus et perd systématiquement face à elle
   (notre feuille de style se charge après celle du navigateur) : l'indice
   restait donc affiché en permanence, même sans verrouillage majuscules. */
.capslock-hint[hidden]{display:none}
.capslock-hint .ico{width:12px;height:12px}

.auth-row-between{display:flex;align-items:center;justify-content:space-between;margin:18px 0 20px}
.auth-checkbox{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t2);cursor:pointer;user-select:none}
.auth-checkbox input{
  width:15px;height:15px;accent-color:var(--acc);cursor:pointer;margin:0;
}

.btn-primary{position:relative;overflow:hidden}
.btn-primary.loading{color:transparent;pointer-events:none}
.btn-primary .btn-spinner{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
}
.btn-primary.loading .btn-spinner{display:flex}
.btn-spinner .ico{width:16px;height:16px;color:#fff;animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

.auth-panel-foot{text-align:center;margin-top:26px;font-size:12px;color:var(--t3)}
.auth-panel-foot a{color:var(--acc2);text-decoration:none}
.auth-panel-foot a:hover{text-decoration:underline}

/* ── Responsive : le panneau de marque disparaît sous ~993px ── */
@media (max-width: 992px){
  .auth-visual{display:none}
  .auth-mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:40px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--t)}
  .auth-mobile-brand img{width:40px;height:40px;filter:drop-shadow(0 6px 18px #6e6bff55)}
  .auth-panel{background:radial-gradient(ellipse 120% 50% at 50% -10%,#6e6bff14,transparent 70%),var(--bg2)}
  .auth-panel{min-width:0;flex-basis:100%}
}
@media (max-width: 480px){
  .auth-panel{padding:20px}
}

/* ══════════════════════════════════════════════════════════
   VISITE GUIDÉE · spotlight + bulle d'aide, multi-pages
   ══════════════════════════════════════════════════════════ */
.tour-overlay{
  position:fixed;inset:0;z-index:2000;pointer-events:none;
}
.tour-spotlight{
  position:fixed;border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.68);
  border:2px solid var(--acc);
  transition:top .32s cubic-bezier(.4,0,.2,1),left .32s cubic-bezier(.4,0,.2,1),
             width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:2001;
}
.tour-spotlight.tour-center{
  box-shadow:0 0 0 9999px rgba(0,0,0,.68);border:none;
}
.tour-card{
  position:fixed;z-index:2002;width:328px;max-width:88vw;
  background:var(--bg2);border:1px solid var(--b2);border-radius:14px;
  padding:20px 22px;box-shadow:0 24px 60px #000a;pointer-events:auto;
  transition:top .32s cubic-bezier(.4,0,.2,1),left .32s cubic-bezier(.4,0,.2,1);
}
.tour-card.tour-center-card{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:380px;text-align:center;
}
.tour-step-count{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--acc2);
  letter-spacing:.04em;margin-bottom:8px;
}
.tour-title{font-size:16px;font-weight:600;color:var(--t);margin-bottom:8px;letter-spacing:-.01em}
.tour-body{font-size:13px;line-height:1.55;color:var(--t2);margin-bottom:18px}
.tour-progress{display:flex;gap:4px;margin-bottom:16px}
.tour-progress span{flex:1;height:3px;border-radius:2px;background:var(--b2)}
.tour-progress span.done{background:var(--acc)}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-skip{background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;font-family:inherit;padding:6px 0}
.tour-skip:hover{color:var(--t2)}
.tour-nav{display:flex;gap:8px}
.tour-btn{font-family:inherit;font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:7px;
  cursor:pointer;border:1px solid var(--b2);background:var(--bg3);color:var(--t2)}
.tour-btn:hover{color:var(--t);border-color:var(--b3)}
.tour-btn.tour-primary{background:var(--acc-solid);border-color:var(--acc-solid);color:#fff}
.tour-btn.tour-primary:hover{background:var(--acc-solid-hover);border-color:var(--acc-solid-hover)}
.tour-arrow{
  position:fixed;width:12px;height:12px;background:var(--bg2);border:1px solid var(--b2);
  transform:rotate(45deg);z-index:2001;
}
.tour-arrow.top{border-bottom:none;border-right:none}
.tour-arrow.bottom{border-top:none;border-left:none}
.tour-arrow.left{border-top:none;border-right:none}
.tour-arrow.right{border-bottom:none;border-left:none}

/* Bouton "Visite guidée" dans la barre latérale */
.tour-relaunch{color:var(--t2)}
.tour-relaunch:hover{color:var(--t)}

@media (max-width: 560px){
  .tour-card{width:90vw;padding:16px 18px}
}

/* ═══════════════════════════════════════════════════════════
   PAGES D'ERREUR (404, 403, 419, 500…)
   Reprend le motif orbital de la page de connexion, en sourdine,
   pour rester dans l'identité de la plateforme.
   ═══════════════════════════════════════════════════════════ */

.err-shell{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:32px 24px;overflow:auto;
}
.err-shell::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% -10%, #6e6bff14, transparent 70%);
}

/* Motif orbital centré, très discret : signature de marque sans bruit visuel */
.err-orbit{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:620px;height:620px;pointer-events:none;opacity:.5;
}

.err-card{
  position:relative;z-index:1;width:100%;max-width:480px;text-align:center;
  animation:errRise .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes errRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.err-brand{
  /* flex (et non inline-flex) : occupe toute la largeur, sinon la pastille
     du code d'erreur remonte sur la même ligne que le nom de la marque. */
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-bottom:34px;text-decoration:none;
}
.err-brand img{width:26px;height:26px}
.err-brand span{font-size:13px;font-weight:600;color:var(--t2);letter-spacing:.01em}

/* Le code d'erreur : présent mais jamais criard : c'est le titre qui porte le sens */
.err-code{
  font-family:'DM Mono',monospace;font-size:13px;font-weight:500;
  color:var(--acc2);letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:20px;
  background:#6e6bff12;border:1px solid #6e6bff24;
  margin-bottom:20px;
}
.err-code .ico{font-size:13px}

.err-title{
  font-size:26px;font-weight:600;letter-spacing:-.025em;color:var(--t);
  line-height:1.25;margin-bottom:12px;
}
.err-text{
  font-size:14px;line-height:1.65;color:var(--t2);
  max-width:400px;margin:0 auto 10px;
}
.err-hint{
  font-size:13px;line-height:1.6;color:var(--t3);
  max-width:400px;margin:0 auto;
}

.err-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;
}
.err-actions .btn{padding:9px 18px;font-size:13px}

/* Détail technique : replié par défaut, pour ne pas inquiéter l'utilisateur
   non technique, mais accessible si besoin de le transmettre au support. */
.err-details{margin-top:30px;text-align:left}
.err-details summary{
  cursor:pointer;font-size:12px;color:var(--t3);text-align:center;
  list-style:none;transition:color .12s;
}
.err-details summary::-webkit-details-marker{display:none}
.err-details summary:hover{color:var(--t2)}
.err-details pre{
  margin-top:12px;padding:12px 14px;border-radius:var(--r2);
  background:var(--bg2);border:1px solid var(--b);
  font-family:'DM Mono',monospace;font-size:11px;line-height:1.6;
  color:var(--t3);white-space:pre-wrap;word-break:break-word;
  max-height:180px;overflow:auto;
}

.err-foot{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-size:11px;color:var(--t3);
}

@media (max-width:560px){
  .err-orbit{width:420px;height:420px}
  .err-title{font-size:22px}
  .err-actions{flex-direction:column}
  .err-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .err-card{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITÉ : socle commun
   ═══════════════════════════════════════════════════════════ */

/* ── Focus visible ──
   Un seul anneau, cohérent sur toute l'application, visible sur les fonds
   sombres comme clairs. :focus-visible plutôt que :focus → l'anneau apparaît
   au clavier sans polluer le clic souris. Les champs de saisie avaient
   "outline:none" avec pour seul repère un changement de bordure de 1px :
   insuffisant, on rétablit un anneau de 2px par-dessus. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:var(--r2);
}
/* Le cadre de la modale et les zones déjà arrondies gardent leur propre rayon */
.modal:focus-visible,.card:focus-visible{border-radius:var(--r)}

/* Mode contraste forcé (Windows) : ne jamais perdre l'indicateur système */
@media (forced-colors: active){
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline:2px solid Highlight;
  }
}

/* ── Interrupteur accessible ──
   Remplace les <div onclick> : un vrai <button role="switch"> conserve
   l'apparence d'origine tout en étant focusable, activable au clavier
   (Entrée/Espace) et annoncé avec son état par les lecteurs d'écran. */
button.toggle{
  -webkit-appearance:none;appearance:none;
  padding:0;font:inherit;cursor:pointer;
}

/* ── Cible tactile minimale (WCAG 2.5.8) ──
   Les petites icônes-boutons gardent leur taille visuelle mais reçoivent
   une zone cliquable d'au moins 24px via un pseudo-élément. */
.icon-hit{position:relative}
.icon-hit::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(100%,24px);height:max(100%,24px);
}

/* ── Mouvement réduit ──
   Garde globale : toute animation ou transition de transform est neutralisée,
   les fondus d'opacité (non vestibulaires) sont conservés. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Exception : le spinner de chargement reste lisible comme indicateur d'attente */
  .btn-spinner .ico{animation-duration:.7s !important;animation-iteration-count:infinite !important}
}

/* Cases oui/non du tableau des notifications : un <button> qui occupe toute
   la cellule et n'ajoute aucun décor : l'état est porté par l'icône. */
.notif-pref-btn{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;cursor:pointer;
  width:100%;padding:10px 12px;font:inherit;color:inherit;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);transition:background .12s;
}
@media (hover:hover){
  .notif-pref-btn:hover{background:var(--bg3)}
}

/* Pastilles de filtre (calendrier, shootings) devenues des <button> :
   on neutralise le style natif, l'apparence reste celle des pastilles. */
button.cal-pill,button.filter-chip{
  -webkit-appearance:none;appearance:none;
  font:inherit;cursor:pointer;
}

/* Titre de tâche en vue liste : un vrai <button> pour rendre la ligne
   atteignable au clavier (la ligne entière reste cliquable à la souris). */
.t-title-btn{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
@media (hover:hover){
  .t-title-btn:hover{text-decoration:underline}
}

/* ═══════════════════════════════════════════════════════════
   ÉTAT VIDE
   Un écran vide doit expliquer ce qui manque et proposer l'action
   qui le remplit : pas seulement constater l'absence.
   ═══════════════════════════════════════════════════════════ */

.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:52px 24px;gap:4px;
}
.empty-state-icon{
  width:48px;height:48px;border-radius:14px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);border:1px solid var(--b2);color:var(--t3);
}
.empty-state-icon .ico{width:22px;height:22px}
.empty-state-title{font-size:15px;font-weight:600;color:var(--t);letter-spacing:-.01em}
.empty-state-text{
  font-size:13px;line-height:1.6;color:var(--t2);
  max-width:330px;margin-top:2px;
}
.empty-state-action{margin-top:18px}

/* Dans un tableau, la cellule ne doit pas réintroduire ses marges */
td > .empty-state{padding:44px 24px}

@media (max-width:560px){
  .empty-state{padding:36px 18px}
}

/* ── Retour tactile au clic ──
   scale(0.96) exactement : en dessous l'effet paraît exagéré. Appliqué aux
   boutons d'action, pas aux liens de navigation (où il distrairait). */
.btn:active,button.toggle:active,.cal-pill:active,.filter-chip:active{scale:.96}

/* Le scale ne doit jamais écraser l'anneau de focus */
.btn:focus-visible{scale:1}

/* ── Bascule de thème ──
   Sans ça, changer de thème fait transitionner couleur, fond, bordure et ombre
   sur toute la page en même temps : le basculement bave au lieu de claquer.
   La classe est posée le temps du swap puis retirée à la frame suivante. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after{transition:none !important}

/* ── Bouton en attente ──
   Trois points qui pulsent, posés à la place du libellé le temps de la requête.
   Largeur figée en JS pour que la mise en page ne saute pas. */
.btn-busy-dots{display:inline-flex;align-items:center;gap:4px}
.btn-busy-dots i{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  opacity:.35;animation:btnDots 1s ease-in-out infinite;
}
.btn-busy-dots i:nth-child(2){animation-delay:.15s}
.btn-busy-dots i:nth-child(3){animation-delay:.3s}
@keyframes btnDots{0%,100%{opacity:.25}50%{opacity:1}}

button[aria-busy="true"],.btn[aria-busy="true"]{cursor:progress;opacity:.85}

/* Sous mouvement réduit : les points restent lisibles mais ne clignotent plus */
@media (prefers-reduced-motion: reduce){
  .btn-busy-dots i{animation:none;opacity:.6}
}

/* ── Échéances ──
   Le retard est porté par le libellé « En retard » + une icône, la couleur ne
   fait que renforcer (jamais la seule information). */
.due{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);white-space:nowrap}
.due .ico{width:12px;height:12px;flex-shrink:0}
.due-late{color:var(--red);font-weight:600}
.due-today{color:var(--amb);font-weight:600}
.due-soon{color:var(--t2);font-weight:500}

/* Bandeau d'information (action requise avant de pouvoir continuer) */
.notice-warn{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--t);background:#fbbf2410;border:1px solid #fbbf2433}
.notice-warn .ico{flex-shrink:0;color:var(--amb)}
@media (max-width:640px){.notice-warn{flex-wrap:wrap}}

/* ══════════ ACTIONS GROUPÉES (vue Liste des tâches) ══════════ */
.task-table .t-check{width:36px;padding-right:0;cursor:default}
.task-table .t-check input{width:16px;height:16px;accent-color:var(--acc-solid);cursor:pointer;vertical-align:middle}
.task-table tr.selected td{background:color-mix(in srgb,var(--acc) 8%,transparent)}
.bulk-bar{position:sticky;bottom:16px;z-index:30;margin:14px auto 0;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px 8px 16px;
  background:var(--bg2);border:1px solid var(--b2);border-radius:12px;box-shadow:0 12px 32px #0000002e}
.bulk-bar[hidden]{display:none}
.bulk-count{font-size:13px;font-weight:600;color:var(--t);margin-right:6px;white-space:nowrap}
.bulk-ctl{height:30px;padding:0 8px;font:inherit;font-size:12px;color:var(--t);background:var(--bg3);
  border:1px solid var(--b2);border-radius:8px;cursor:pointer}
.bulk-ctl:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.bulk-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
@media (max-width:640px){.bulk-bar{width:auto;left:0;right:0;bottom:8px}}

/* ══════════ IMAGE DE MARQUE (Paramètres › Agence) ══════════ */
.brand-logo-row{display:flex;align-items:center;gap:16px}
.brand-logo-box{width:72px;height:72px;border-radius:14px;border:1px dashed var(--b2);background:var(--bg3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.brand-logo-box img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.brand-logo-box span{font-size:20px;font-weight:700;color:var(--t2)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--sw);border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px #0000001a;transition:transform .15s ease}
.swatch:hover{transform:scale(1.08)}
.swatch.active{border-color:var(--bg2);box-shadow:0 0 0 2px var(--t)}
.swatch:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.swatch-custom{position:relative;overflow:hidden;background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e)}
.swatch-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
/* Aperçu : toujours sur fond clair, comme un vrai document */
.brand-preview{display:grid;gap:14px;background:#eef0f5;border-radius:12px;padding:18px}
.bp-doc,.bp-mail{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;color:#1d1d2b;overflow:hidden}
.bp-doc{padding:16px 18px}
.bp-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bp-id{display:flex;align-items:center;gap:10px;min-width:0}
.bp-logo{width:34px;height:34px;border-radius:8px;background:#f1f1f6;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.bp-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bp-logo span{font-size:12px;font-weight:700;color:#55556a}
.bp-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-title{font-weight:800;font-size:15px;letter-spacing:.04em}
.bp-rule{height:3px;margin:12px 0 14px;border-radius:2px}
.bp-lines{display:grid;gap:6px}
.bp-lines span{display:block;height:6px;border-radius:3px;background:#ececf3}
.bp-total{display:flex;justify-content:flex-end;gap:10px;align-items:baseline;margin-top:12px;font-size:11px;color:#6b6b80}
.bp-total strong{font-size:14px}
.bp-mail-rule{height:3px}
.bp-mail-body{padding:14px 18px 16px}
.bp-mail-h{font-weight:700;font-size:13px;margin-bottom:10px}
.bp-btn{display:inline-block;margin-top:12px;color:#fff;font-size:11px;font-weight:600;padding:7px 12px;border-radius:7px}
/* Logo de l'agence (espace client, rapport partagé) */
.tb-brand-logo{height:30px;max-width:140px;object-fit:contain;display:block}
.tb-brand-initials{width:30px;height:30px;border-radius:8px;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-logo-suffix{font-weight:400;color:var(--t3);margin-left:8px;padding-left:8px;border-left:1px solid var(--b2)}

/* ══════════ FICHE CLIENT 360° ══════════ */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);text-decoration:none;margin-bottom:14px}
.back-link:hover{color:var(--t)}
.row-link{font-weight:500;color:var(--t);text-decoration:none}
.row-link:hover{text-decoration:underline}
.btn-icon{padding-left:8px;padding-right:8px}
.cs-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cs-id{display:flex;align-items:center;gap:16px;min-width:0}
.cs-avatar{width:56px;height:56px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cc) 26%,transparent)}
.cs-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-name{margin:0}
.cs-contact{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:5px;font-size:12.5px;color:var(--t2)}
.cs-contact a,.cs-contact span{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none}
.cs-contact a:hover{color:var(--t);text-decoration:underline}
.cs-contact .ico{width:13px;height:13px;color:var(--t3)}
.cs-actions{display:flex;gap:8px;flex-wrap:wrap}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cs-main,.cs-side{display:grid;gap:18px;min-width:0}
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cs-card{padding:18px 18px 8px}
.cs-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cs-card-title{font-size:14px;font-weight:600;color:var(--t);margin:0}
.cs-more{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t3);text-decoration:none}
.cs-more:hover{color:var(--t)}
.cs-more .ico{width:12px;height:12px}
.cs-row{display:flex;align-items:center;gap:10px;padding:10px 8px;margin:0 -8px;border-radius:8px;
  border-bottom:1px solid var(--b);text-decoration:none;color:var(--t2);font-size:13px;transition:background .15s ease}
.cs-row:last-child{border-bottom:0}
a.cs-row:hover{background:var(--bg3)}
.cs-row-main{flex:1;min-width:0;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-sub{display:block;font-size:11px;color:var(--t3);margin-top:1px;font-family:inherit}
.cs-progress{display:flex;align-items:center;gap:8px;width:130px;flex-shrink:0;font-size:11px;color:var(--t2)}
.cs-progress .progress-bar{flex:1;display:block}
.cs-empty{font-size:12.5px;color:var(--t3);padding:10px 0 12px}
.cs-foot{font-size:12px;color:var(--t3);padding:10px 0 6px}
.cs-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 10px;font-size:12.5px}
.cs-dl dt{color:var(--t3)}
.cs-dl dd{margin:0;color:var(--t);text-align:right}
.cs-missing{color:var(--amb)}
.cs-notes{font-size:12.5px;color:var(--t2);white-space:pre-wrap;background:var(--bg3);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.cs-person{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t);padding:5px 0}
.cs-bars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-bottom:10px}
.cs-bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}
.cs-bar-fill{width:100%;max-width:30px;border-radius:6px 6px 3px 3px;background:var(--bg4, var(--b2));transition:height .5s cubic-bezier(.2,.8,.2,1)}
.cs-bar.current .cs-bar-fill{background:var(--cc, var(--acc-solid))}
.cs-bar-val{font-size:10.5px;color:var(--t2);font-variant-numeric:tabular-nums;min-height:13px}
.cs-bar-lbl{font-size:10.5px;color:var(--t3)}
@media (max-width:1100px){.cs-grid{grid-template-columns:1fr}}
@media (max-width:760px){.cs-split{grid-template-columns:1fr}.cs-progress{display:none}}
.cs-progress .progress-fill{display:block;height:100%}
.cs-progress .progress-bar{margin-top:0}
.inv-meta{font-size:11px;color:var(--t3);margin-top:3px;white-space:nowrap}

/* ══════════ TABLEAU DE BORD : PILOTAGE ══════════ */
.dash-pilot{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;margin-bottom:22px}
.dash-card{padding:20px}
.dash-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.dash-card-title{font-size:14px;font-weight:600;color:var(--t);margin:0}
.dash-card-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.dash-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2)}
.dash-legend-line{width:18px;border-top:2px dashed var(--t3)}
.rev-chart{--rev-h:170px;position:relative;display:flex;gap:14px;align-items:flex-end;height:calc(var(--rev-h) + 44px)}
.rev-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.rev-bar{display:block;width:100%;max-width:54px;height:calc(var(--h) * var(--rev-h) / 100);border-radius:8px 8px 4px 4px;
  background:color-mix(in srgb,var(--acc) 26%,transparent);transform-origin:bottom;animation:barGrow .7s cubic-bezier(.2,.8,.2,1) both}
.rev-col.current .rev-bar{background:linear-gradient(180deg,var(--acc2,#a78bfa),var(--acc-solid))}
.rev-col:hover .rev-bar{filter:brightness(1.12)}
.rev-val{font-size:11px;font-variant-numeric:tabular-nums;color:var(--t2);white-space:nowrap;min-height:14px}
.rev-col.current .rev-val{color:var(--t);font-weight:600}
.rev-lbl{font-size:11px;color:var(--t3);height:16px}
.rev-col.current .rev-lbl{color:var(--t);font-weight:600}
.rev-target{position:absolute;left:0;right:0;bottom:calc(var(--tg) * var(--rev-h) / 100 + 22px);border-top:2px dashed color-mix(in srgb,var(--t3) 70%,transparent);pointer-events:none;z-index:1}
.dash-cash{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--b)}
.dash-cash-item{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:6px 8px;margin:-6px -8px;border-radius:8px;transition:background .15s}
.dash-cash-item:hover{background:var(--bg3)}
.dash-cash-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em}
.dash-cash-val{font-size:18px;font-weight:600;color:var(--t);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dash-cash-val.is-late{color:var(--red)}
.dash-cash-val.is-ok{color:var(--acc3)}
.load-list{display:grid;gap:14px}
.load-row{display:flex;gap:12px;align-items:flex-start}
.load-main{flex:1;min-width:0}
.load-top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:6px}
.load-name{color:var(--t);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.load-nums{color:var(--t3);white-space:nowrap;font-size:11.5px}
.load-track{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.load-fill{display:block;height:100%;width:var(--w);border-radius:3px;animation:barWide .7s cubic-bezier(.2,.8,.2,1) both}
.load-late{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--red);margin-top:5px}
.load-late .ico{width:11px;height:11px}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes barWide{from{width:0}to{width:var(--w)}}
@media (prefers-reduced-motion:reduce){.rev-bar,.load-fill{animation:none}}
@media (max-width:1100px){.dash-pilot{grid-template-columns:1fr}}
@media (max-width:520px){.rev-chart{gap:6px}.rev-val{font-size:9.5px}.dash-cash{grid-template-columns:1fr;gap:12px}}

/* ══════════ RACCOURCIS CLAVIER ══════════ */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  font:500 11px/1 'DM Mono',monospace;color:var(--t);background:var(--bg3);border:1px solid var(--b2);
  border-bottom-width:2px;border-radius:6px}
.kbd-then{font-size:10.5px;color:var(--t3);margin:0 5px}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.sc-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin:2px 0 8px}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;color:var(--t2);border-bottom:1px solid var(--b)}
.sc-row:last-child{border-bottom:0}
.sc-keys{display:flex;align-items:center;flex-shrink:0}
.sc-hint{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:400;display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:12.5px;color:var(--t);background:var(--bg2);border:1px solid var(--b2);border-radius:10px;
  box-shadow:0 10px 30px #00000030;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.sc-hint.show{opacity:1;transform:translate(-50%,0)}
.sc-hint-sub{color:var(--t3);font-size:11.5px;margin-left:4px}
.nav-kbd{margin-left:auto;opacity:.7}
@media (max-width:640px){.sc-grid{grid-template-columns:1fr}}
@media (hover:none){.nav-shortcuts{display:none}}

/* ══════════ MOUVEMENT : discret, rapide, jamais bloquant ══════════ */
.page{animation:pageIn .32s cubic-bezier(.2,.8,.2,1) both}
.modal-bg.open{animation:fadeIn .16s ease-out both}
.modal-bg.open .modal{animation:modalIn .22s cubic-bezier(.2,.8,.2,1) both}
.btn{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .08s ease,box-shadow .15s ease}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.stat-card,.card-sm,.kan-card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
a.card-sm:hover{border-color:var(--b2);box-shadow:0 6px 18px #0000000f;transform:translateY(-1px)}
.kan-card:hover{box-shadow:0 6px 18px #0000000f}
.stat-card:hover{border-color:var(--b2)}
.nav-item{transition:background-color .15s ease,color .15s ease}
.badge{transition:background-color .15s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .page,.modal-bg.open,.modal-bg.open .modal{animation:none}
  .btn:active:not(:disabled),a.card-sm:hover,.kan-card:hover{transform:none}
}
.modal:focus,.modal:focus-visible{outline:none}

/* ══════════ MÉDIATHÈQUE : recherche + fenêtre de détail (façon CMS) ══════════ */
.media-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.media-search{position:relative;display:flex;align-items:center}
.media-search .ico{position:absolute;left:11px;width:14px;height:14px;color:var(--t3);pointer-events:none}
.media-search input{width:260px;height:34px;padding:0 12px 0 32px;font:inherit;font-size:13px;color:var(--t);
  background:var(--bg2);border:1px solid var(--b2);border-radius:8px}
.media-search input:focus{outline:none;border-color:var(--acc)}
.media-search-info{font-size:12.5px;color:var(--t2);margin:-6px 0 14px}
.media-search-info a{color:var(--acc2)}
.media-card{cursor:pointer}
.media-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.media-modal{width:min(1180px,96vw);max-width:96vw;height:min(760px,90vh);padding:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;overflow:hidden}
.mm-stage{position:relative;background:#0b0b12;display:flex;align-items:center;justify-content:center;min-height:0}
.mm-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:28px 64px}
.mm-preview img,.mm-preview video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px #0008}
.mm-loading{color:#9a9ab5;font-size:13px}
.mm-file{display:flex;flex-direction:column;align-items:center;gap:14px;color:#c9c9de}
.mm-file .ico-lg{width:64px;height:64px}
.mm-ext{font-weight:700;letter-spacing:.08em;font-size:13px;padding:4px 10px;border-radius:6px;background:#ffffff14}
.mm-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid #ffffff26;
  background:#ffffff14;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.mm-nav:hover:not(:disabled){background:#ffffff2e}
.mm-nav:disabled{opacity:.25;cursor:default}
.mm-prev{left:14px}.mm-next{right:14px}
.mm-counter{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:11.5px;color:#9a9ab5;font-variant-numeric:tabular-nums}
.mm-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--b2);background:var(--bg2)}
.mm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px 22px 12px;border-bottom:1px solid var(--b)}
.mm-head .modal-title{font-size:15px;word-break:break-all}
.mm-body{padding:16px 22px 22px;overflow-y:auto}
.mm-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:12.5px}
.mm-dl dt{color:var(--t3)}
.mm-dl dd{margin:0;color:var(--t);text-align:right;word-break:break-word}
.mm-dl a{color:var(--acc2);text-decoration:none}
.mm-dl a:hover{text-decoration:underline}
.mm-sep{height:1px;background:var(--b);margin:16px 0}
.mm-url{display:flex;gap:6px}
.mm-url input{flex:1;min-width:0;font-size:12px}
.mm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:860px){
  .media-modal{grid-template-columns:1fr;grid-template-rows:42vh minmax(0,1fr);height:92vh}
  .mm-side{border-left:0;border-top:1px solid var(--b2)}
  .mm-preview{padding:16px 52px}
  .media-search input{width:100%}.media-search{flex:1}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE : l'application comme une app native
   Barre d'onglets en bas, tiroir de navigation, fenêtres en
   feuilles glissées du bas, tableaux en cartes, cibles tactiles
   de 44px, zones de sécurité (encoche, barre d'accueil).
   ═══════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
#app{height:100vh;height:100dvh}
a,button,.btn,.kan-card,.cal-cell,.photo-card{touch-action:manipulation}
.tabbar,.drawer-head,.tb-search-btn,.notif-close,.cal-agenda{display:none}

/* Écrans tactiles : pas d'effets de survol « collants » après un tap */
@media (hover:none){
  .kan-card:hover,.photo-card:hover,a.card-sm:hover{transform:none;box-shadow:none}
  .photo-overlay{opacity:1;padding:8px;background:linear-gradient(to top,#00000099,transparent 50%)}
  /* Sur tactile : actions en pastilles rondes, sans le nom du fichier par-dessus la photo */
  .photo-overlay > div > div:not(.photo-actions){display:none}
  .photo-actions{gap:6px;flex-wrap:nowrap}
  .photo-action-btn{font-size:0;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0000004d}
  .photo-action-btn .ico{width:17px;height:17px}
  .photo-action-btn.ok{background:#0f8a5fcc}
  .photo-action-btn.no{background:#c2343fcc}
  /* Médiathèque : un tap ouvre la fiche détaillée, qui porte déjà ces actions */
  .media-card .photo-overlay{display:none}
}
@media (hover:none) and (max-width:768px){.drop-zone{display:none}}

@media (max-width:768px){
  :root{--tabbar-h:58px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--gutter:16px}

  /* ── En-tête ── */
  .topbar{height:calc(56px + var(--safe-t));min-height:calc(56px + var(--safe-t));gap:10px;
    padding:var(--safe-t) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
    background:color-mix(in srgb,var(--bg2) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
  .hamburger-btn,.tb-user-name{display:none}
  .tb-logo{margin-right:0;min-width:0}
  .tb-logo-name{font-size:15px;white-space:nowrap;letter-spacing:-.01em}
  .tb-right{gap:6px}
  .tb-notif{width:38px;height:38px;border-radius:11px;font-size:17px}
  .tb-search-btn{display:flex}
  .tb-avatar{width:34px;height:34px;margin-left:2px}

  /* ── Contenu : marge basse pour ne jamais passer sous la barre d'onglets ── */
  .content{overscroll-behavior-y:contain}
  .page{padding:20px var(--gutter) calc(var(--tabbar-h) + var(--safe-b) + 32px)}

  /* ── Barre d'onglets ── */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(var(--tabbar-h) + var(--safe-b));padding:0 env(safe-area-inset-right) var(--safe-b) env(safe-area-inset-left);
    background:color-mix(in srgb,var(--bg2) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);
    border-top:1px solid var(--b2)}
  .tab-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-family:inherit;font-size:10.5px;font-weight:500;letter-spacing:.01em;color:var(--t3);text-decoration:none;
    background:none;border:0;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1}
  .tab-item span{display:block;line-height:12px}
  .tab-item .ico{width:23px;height:23px;stroke-width:1.8;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
  .tab-item.active{color:var(--acc2)}
  .tab-item.active .ico{stroke-width:2.2}
  .tab-item.active::before{content:'';position:absolute;top:-1px;left:50%;width:24px;height:3px;border-radius:0 0 3px 3px;
    background:var(--acc);transform:translateX(-50%)}
  .tab-item:active .ico{transform:scale(.86)}
  .tab-badge{position:absolute;top:6px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--acc-solid);color:#fff;font-size:10px;font-weight:700;line-height:14px;text-align:center;border:2px solid var(--bg2)}

  /* ── Tiroir de navigation ── */
  .sidebar{top:0;z-index:95;width:min(86vw,320px);min-width:0;border-right:1px solid var(--b2);
    padding:calc(14px + var(--safe-t)) 12px calc(18px + var(--safe-b));
    transform:translateX(-102%);transition:transform .34s cubic-bezier(.32,.72,0,1),box-shadow .34s ease}
  .sidebar.open{box-shadow:24px 0 64px #00000052}
  .sidebar-backdrop{inset:0;z-index:90;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 16px;margin-bottom:14px;border-bottom:1px solid var(--b)}
  .drawer-user{display:flex;gap:12px;align-items:center;min-width:0}
  .drawer-name{font-size:15px;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drawer-role{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drawer-close{width:36px;height:36px;flex-shrink:0;border-radius:10px;border:1px solid var(--b2);background:var(--bg3);color:var(--t2);
    display:flex;align-items:center;justify-content:center;cursor:pointer}
  .nav-grp{margin-bottom:18px}
  .nav-lbl{font-size:10.5px;margin-bottom:6px}
  .nav-item{padding:11px 10px;font-size:15px;gap:12px;border-radius:10px;border-left:0}
  .nav-item.active{background:color-mix(in srgb,var(--acc) 12%,transparent)}
  .nav-icon .ico{width:20px;height:20px}
  .sidebar-footer .user-row{display:none}
  .sidebar-footer form{margin-top:0 !important}

  /* ── Panneau des notifications : plein écran ── */
  .notif-panel{top:0;width:100%;height:100vh;height:100dvh;z-index:120;border-left:0;padding-bottom:var(--safe-b);
    transition:transform .34s cubic-bezier(.32,.72,0,1)}
  .notif-header{position:sticky;top:0;z-index:1;background:var(--bg2);padding:calc(14px + var(--safe-t)) var(--gutter) 14px;font-size:17px}
  .notif-header button{font-size:13px}
  .notif-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--b2) !important;background:var(--bg3) !important;color:var(--t2) !important;margin-left:6px}
  .notif-item{padding:14px var(--gutter)}

  /* ── Toast au-dessus de la barre d'onglets ── */
  .toast{left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);min-width:0;border-radius:14px;
    opacity:0;transform:translateY(24px);transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .2s ease}
  .toast.show{opacity:1;transform:none}

  /* ── En-têtes de page : titre et action principale sur une ligne ── */
  .page-header{flex-direction:row;align-items:center;margin-bottom:20px;gap:12px}
  .page-header > div:first-child{flex:1 1 180px;min-width:0}
  .page-header > div:last-child:has(> :nth-child(2)){flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px}
  .page-header > div:last-child:has(> :nth-child(2)) > *{flex:1 1 auto;justify-content:center}
  .page-title{font-size:24px;letter-spacing:-.028em;line-height:1.2}
  .page-sub{font-size:13px;margin-top:3px}
  .back-link{margin-bottom:12px;font-size:13px}

  /* ── Cibles tactiles et champs (16px : iOS ne zoome plus au focus) ── */
  .btn{min-height:40px;padding:8px 14px;border-radius:10px}
  .btn-sm{min-height:36px;padding:6px 12px;font-size:13px}
  .btn-icon{min-width:36px;justify-content:center}
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not(.otp-box),select,textarea{font-size:16px !important}
  .m-field input,.m-field select,.m-field textarea{padding:11px 13px;border-radius:10px}
  .pill-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1) 18px;padding:2px var(--gutter);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent)}
  .pill-tabs::-webkit-scrollbar{display:none}
  .pill-tab{flex-shrink:0;white-space:nowrap;padding:8px 14px}

  /* ── Grilles : chiffres clés deux par deux ── */
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid3:has(> .stat-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid3:has(> .stat-card) > .stat-card:last-child:nth-child(odd),
  .grid4 > .stat-card:last-child:nth-child(odd){grid-column:1/-1}
  .grid3:has(> .card-sm){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .grid3:has(> .card-sm) > .card-sm{padding:10px 11px;min-width:0}
  .grid3:has(> .card-sm) > .card-sm > div{overflow:hidden;text-overflow:ellipsis}
  .card{padding:16px;border-radius:14px}
  .stat-card{padding:14px;border-radius:14px;min-width:0}
  .stat-label{font-size:10px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat-val{font-size:23px;white-space:nowrap}
  .stat-change{font-size:11.5px}
  .section-header{flex-wrap:wrap;gap:8px}

  /* ── Fenêtres : feuilles qui montent du bas ── */
  .modal-bg{align-items:flex-end}
  .modal{width:100% !important;max-width:100% !important;border-radius:22px 22px 0 0;border-bottom:0;
    padding:8px 18px calc(18px + var(--safe-b));max-height:calc(100dvh - var(--safe-t) - 18px);overscroll-behavior:contain}
  .modal::before{content:'';display:block;width:38px;height:5px;border-radius:3px;background:var(--b3);margin:0 auto 14px}
  .modal-bg.open .modal{animation:sheetIn .38s cubic-bezier(.32,.72,0,1) both}
  .modal-title{font-size:18px;gap:10px}
  .modal-close{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
  .modal-footer{position:sticky;bottom:calc(-18px - var(--safe-b));z-index:2;background:var(--bg2);flex-wrap:wrap;
    margin:18px -18px calc(-18px - var(--safe-b));padding:12px 18px calc(12px + var(--safe-b));border-top:1px solid var(--b)}
  .modal-footer .btn{flex:1 1 0;justify-content:center;min-height:46px;font-size:14px}
  /* Médiathèque : visionneuse plein écran */
  .modal.media-modal{height:100dvh;max-height:100dvh;border-radius:0;padding:0;grid-template-rows:44dvh minmax(0,1fr)}
  .modal.media-modal::before{display:none}
  .mm-stage{padding-top:var(--safe-t)}
  .mm-body{padding-bottom:calc(22px + var(--safe-b))}
  .mm-nav{width:44px;height:44px}
  .mm-prev{left:8px}.mm-next{right:8px}

  /* ── Palette de recherche ── */
  .cmdk-overlay{padding:calc(10px + var(--safe-t)) 10px 0}
  .cmdk-box{width:100%;max-width:100%;border-radius:16px}
  .cmdk-results{max-height:62dvh}
  .cmdk-item{padding:12px}
  .cmdk-foot{display:none}

  /* ── Kanban : une colonne par écran, on glisse de l'une à l'autre ── */
  .kanban-board{margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;gap:12px;min-height:0;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .kanban-board::-webkit-scrollbar{display:none}
  .kan-col{flex:0 0 84%;min-width:0;max-width:none;scroll-snap-align:start}
  .kan-col-header{padding:8px 4px}
  .kan-col-body{min-height:160px;border-radius:14px}
  .kan-card{cursor:pointer;border-radius:12px;padding:14px}
  .kan-add{padding:11px}

  /* ── Actions groupées au-dessus de la barre d'onglets ── */
  .bulk-bar{bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);border-radius:16px}
  .sc-hint{display:none}
  .rtable td[data-label=""] .btn-icon{flex:0 0 46px}

  /* Tâches : bascule Kanban/Liste + création, puis les deux filtres côte à côte */
  .page-header > .task-toolbar{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
  .task-toolbar .view-toggle{grid-column:1}
  .task-toolbar .view-toggle button{flex:1;justify-content:center;padding:9px 8px;font-size:13px}
  .task-toolbar #tour-add-task{grid-column:2;grid-row:1}
  .task-toolbar select{min-width:0;width:100%}
  .view-toggle{display:flex;border-radius:10px}

  /* ── Photos : deux par ligne ── */
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .photo-card{border-radius:12px}

  /* ── Visite guidée : bulle pleine largeur ── */
  .tour-card{width:calc(100vw - 24px) !important;max-width:none}
  .tour-card.tour-center-card{width:calc(100vw - 32px) !important}
  .tour-arrow{display:none !important}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.modal-bg.open .modal{animation:none}}

/* ── Tableaux en cartes (téléphone) ── */
@media (max-width:640px){
  .rtable,.rtable tbody,.rtable tfoot{display:block}
  .rtable thead{display:none}
  .rtable tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:15px 16px;border-bottom:1px solid var(--b)}
  .rtable tbody tr:last-child{border-bottom:0}
  .rtable tbody tr:hover td{background:none}
  .rtable tfoot tr{background:var(--bg3);border-top:1px solid var(--b2) !important}
  .rtable td{display:block;padding:0;border:0;min-width:0;font-size:13.5px;text-align:left !important}
  .rtable td::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
  .rtable td:first-child,.rtable td[data-label=""]{grid-column:1/-1}
  .rtable td:first-child::before,.rtable td[data-label=""]::before{display:none}
  .rtable td:first-child{font-size:15px}
  .rtable td[data-label=""] > div{justify-content:flex-start !important;flex-wrap:wrap}
  .rtable td[data-label=""] .btn{flex:1 1 auto;justify-content:center}
  .rtable td:empty{display:none}
  .rtable tr:has(> td.rt-full){display:block;padding:0}
  .rtable td > div[style*="min-width"]{min-width:0 !important}
  /* Vue Liste des tâches : case à cocher + titre, puis les détails */
  .task-table.rtable tr{grid-template-columns:26px repeat(2,minmax(0,1fr));gap:10px 12px}
  .task-table.rtable td.t-check{grid-column:1;grid-row:1;width:auto;padding-top:1px}
  .task-table.rtable td.t-check::before,.task-table.rtable td.t-title::before{display:none}
  .task-table.rtable td.t-title{grid-column:2/-1;grid-row:1;font-size:15px}
  .task-table.rtable td:nth-child(3),.task-table.rtable td:nth-child(5){grid-column:2}
  .task-table.rtable td:nth-child(4),.task-table.rtable td:nth-child(6){grid-column:3}
  .task-table.rtable td:nth-child(7){grid-column:2/-1}
  .task-table.rtable td.rt-full{grid-column:1/-1}
}

/* ── Calendrier sur téléphone : grille compacte + programme du jour ── */
@media (max-width:640px){
  .cal-header{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;margin-bottom:14px}
  .cal-nav{justify-content:space-between}
  .cal-btn{width:40px;height:40px;border-radius:12px;font-size:20px}
  .cal-month{min-width:0;font-size:17px}
  .cal-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter);scrollbar-width:none}
  .cal-filters::-webkit-scrollbar{display:none}
  .cal-pill{flex-shrink:0;padding:7px 12px;font-size:12px}
  .cal-card{border-radius:16px}
  .cal-grid{gap:0;background:var(--bg2)}
  .cal-day-hdr{padding:10px 0 6px;font-size:10.5px;background:var(--bg2)}
  button.cal-cell{min-height:50px;padding:4px 0 6px;border:0;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--bg2)}
  .cal-cell:hover{background:var(--bg2)}
  .cal-cell.other-month{background:var(--bg2)}
  .cal-cell.other-month .cal-day-num{color:var(--t3);opacity:.6}
  .cal-day-num{width:32px;height:32px;margin:0;font-size:14px;border-radius:50%;transition:background-color .15s,color .15s}
  .cal-cell.today .cal-day-num{background:none;color:var(--acc2);font-weight:700}
  .cal-cell.selected .cal-day-num{background:var(--acc-solid);color:#fff;font-weight:600}
  .cal-dots{display:flex;gap:3px;height:6px;align-items:center}
  .cal-dots i{width:5px;height:5px;border-radius:50%}
  .cal-dots b{font-size:9px;line-height:1;color:var(--t3)}
  .cal-agenda{display:block;margin-top:18px}
  .cal-agenda-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .cal-agenda-head h2{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}
  .cal-agenda-item{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;text-align:left;font:inherit;color:inherit;cursor:pointer;
    background:var(--bg2);border:1px solid var(--b);border-left:3px solid var(--pc);border-radius:12px}
  .cal-agenda-item:active{background:var(--bg3)}
  .cal-agenda-time{font-size:13px;font-weight:600;color:var(--t);font-variant-numeric:tabular-nums;flex-shrink:0}
  .cal-agenda-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .cal-agenda-caption{font-size:14px;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cal-agenda-meta{font-size:12px;color:var(--t3)}
  .cal-agenda-status{flex-shrink:0;color:var(--t3)}
  .cal-agenda-empty{padding:22px;text-align:center;font-size:13px;color:var(--t3);background:var(--bg2);border:1px dashed var(--b2);border-radius:12px}
}

/* ── Espace client et rapport partagé (pages hors application) ── */
@media (max-width:768px){
  .portal-wrap{padding:20px var(--gutter) calc(32px + var(--safe-b)) !important}
  body > .topbar{position:sticky;top:0;z-index:50}
  .topbar .btn-sm{min-height:36px}
  .tb-logo-suffix{display:none}
  .auth-panel{padding:calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b))}
  .auth-form-title{font-size:26px}
  .otp-boxes{gap:8px}
  .otp-box{width:min(48px,13vw);height:54px}
}