:root{
  --crust:#11111b; --mantle:#181825; --base:#1e1e2e;
  --surface0:#313244; --surface1:#45475a; --surface2:#585b70; --overlay0:#6c7086;
  --text:#cdd6f4; --subtext1:#bac2de; --subtext0:#a6adc8;
  --blue:#89b4fa; --mauve:#cba6f7; --green:#a6e3a1; --peach:#fab387;
  --red:#f38ba8; --yellow:#f9e2af; --teal:#94e2d5; --sky:#74c7ec; --pink:#f5c2e7;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
body.theme-light{
  --crust:#dce0e8; --mantle:#e6e9ef; --base:#eff1f5;
  --surface0:#ccd0da; --surface1:#bcc0cc; --surface2:#acb0be; --overlay0:#8c8fa1;
  /* Lot 3d — contraste AA : --subtext0 assombri #6c6f85 -> #63667c
     (4.37 -> 4.99 sur base, 4.06 -> 4.64 sur mantle ; passe AA >=4.5). */
  --text:#4c4f69; --subtext1:#5c5f77; --subtext0:#63667c;
  --blue:#1e66f5; --mauve:#8839ef; --green:#40a02b; --peach:#fe640b;
  --red:#d20f39; --yellow:#df8e1d; --teal:#179299; --sky:#04a5e5; --pink:#ea76cb;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Lot 3a — réserve en permanence la gouttière de la barre de défilement pour
   éviter le décalage horizontal (~10px) du contenu quand une modale pose
   body.scroll-locked et fait disparaître la barre (desktop/Chromium). */
html{scrollbar-gutter:stable;}
body{background:var(--crust);color:var(--text);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .2s, color .2s;}
/* Lot 3a — verrou de défilement : body figé quand une modale/tiroir est ouvert
   (top = -scrollY posé en inline par nav.js). Restaure la position à la levée. */
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
::selection{background:var(--mauve);color:var(--crust);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--mantle);}
::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--surface2);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* LOGIN */
#login-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 20%, rgba(137,180,250,0.08), transparent 45%),radial-gradient(circle at 85% 80%, rgba(203,166,247,0.08), transparent 45%),var(--crust);padding:24px;}
.login-card{width:100%;max-width:400px;background:var(--mantle);border:1px solid var(--surface0);border-radius:16px;padding:40px 36px;animation:rise .5s ease;}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.login-brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--mauve));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--crust);font-size:16px;}
.login-brand span{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.3px;}
.login-tagline{font-size:12px;color:var(--overlay0);font-style:italic;margin-bottom:26px;margin-left:44px;}
.login-step h1{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:6px;}
.login-step p{color:var(--subtext0);font-size:13px;margin-bottom:24px;line-height:1.5;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:var(--subtext0);margin-bottom:6px;font-weight:500;}
.field input, .field select, .field textarea{width:100%;padding:11px 13px;background:var(--surface0);border:1px solid var(--surface1);border-radius:8px;color:var(--text);font-size:14px;font-family:var(--font-body);transition:border-color .15s;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical;min-height:66px;}
.otp-boxes{display:flex;gap:8px;margin-bottom:24px;}
.otp-boxes input{width:100%;text-align:center;font-family:var(--font-mono);font-size:20px;font-weight:600;padding:12px 0;background:var(--surface0);border:1px solid var(--surface1);border-radius:8px;color:var(--text);}
.otp-boxes input:focus{border-color:var(--mauve);}
.btn-primary{width:100%;padding:12px;border-radius:8px;background:var(--blue);color:var(--crust);font-weight:600;font-size:14px;transition:filter .15s, transform .15s;}
/* Lot 3d — contraste AA : en thème clair, libellé blanc sur le bleu #1e66f5
   (crust 3.71 -> blanc 4.91 ; passe AA). Thème sombre inchangé (crust sombre
   sur bleu clair, déjà contrasté). */
body.theme-light .btn-primary{color:#fff;}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-danger{background:var(--red);color:var(--crust);padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;}
.btn-danger:hover{filter:brightness(1.1);}
.otp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--subtext0);}
.otp-meta a{color:var(--sky);}
.login-security-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--surface0);display:flex;gap:8px;font-size:11.5px;color:var(--overlay0);line-height:1.5;}

/* APP SHELL */
/* Lot 3e — cadrage mobile : min-height en dvh (viewport dynamique) pour éviter
   qu'iOS Safari calcule 100vh en incluant la zone sous la barre d'adresse, ce
   qui décalait le rendu juste après connexion. Repli 100vh pour les vieux moteurs. */
#app{display:none;min-height:100vh;min-height:100dvh;grid-template-columns:230px 1fr;}
#app.active{display:grid;}
.sidebar{background:var(--mantle);border-right:1px solid var(--surface0);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 2px;}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--mauve));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--crust);font-size:14px;flex-shrink:0;}
.brand span{font-family:var(--font-display);font-weight:700;font-size:17px;}
.brand-tagline{font-size:10px;color:var(--overlay0);font-style:italic;padding:0 8px 18px 42px;}
.nav-group{margin-bottom:18px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--overlay0);padding:0 10px;margin-bottom:6px;font-weight:600;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;margin-bottom:2px;color:var(--subtext1);font-size:13.5px;font-weight:500;transition:background .12s, color .12s;width:100%;text-align:left;}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85;}
.nav-item:hover{background:var(--surface0);color:var(--text);}
.nav-item.active{background:var(--surface0);color:var(--text);}
.nav-item.active svg{stroke:var(--blue);opacity:1;}
.nav-badge{margin-left:auto;background:var(--surface1);color:var(--subtext0);font-size:10.5px;padding:1px 6px;border-radius:20px;font-family:var(--font-mono);}
.nav-badge.pulse{background:var(--red);color:#fff;}
.theme-toggle{display:flex;gap:4px;padding:4px;background:var(--surface0);border-radius:9px;margin:6px 0 10px;}
.theme-btn{flex:1;padding:6px 0;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--overlay0);}
.theme-btn svg{width:14px;height:14px;}
.theme-btn.active{background:var(--mantle);color:var(--blue);}
.sidebar-footer{margin-top:auto;padding:10px;border-top:1px solid var(--surface0);}
.footer-user{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;cursor:pointer;}
.footer-user:hover{background:var(--surface0);}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--peach),var(--red));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--crust);flex-shrink:0;}
.footer-user .who{line-height:1.3;overflow:hidden;}
.footer-user .who strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.footer-user .who small{color:var(--overlay0);font-size:11px;}

/* min-width:0 = correctif du bug Phase 4 : .main est un enfant du grid #app (piste 1fr) ;
   sans min-width:0, la largeur min-content du Kanban (5 colonnes de 270px) élargit la piste
   au-delà du viewport et fait déborder le body. Avec min-width:0, le défilement large reste
   INTERNE aux conteneurs overflow-x:auto (.kanban-board, .gantt-scroll, tables). */
.main{padding:26px 32px 60px;max-width:1400px;min-width:0;}
.view{display:none;animation:fadein .35s ease;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;gap:20px;flex-wrap:wrap;}
.topbar h1{font-family:var(--font-display);font-size:24px;font-weight:600;}
.topbar p{color:var(--subtext0);font-size:13px;margin-top:4px;}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.btn{padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:filter .15s, transform .15s;}
.btn svg{width:15px;height:15px;}
.btn-accent{background:var(--blue);color:var(--crust);}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-ghost{background:var(--surface0);color:var(--text);border:1px solid var(--surface1);}
.btn-ghost:hover{background:var(--surface1);}
select.sel-inline{background:var(--surface0);color:var(--text);border:1px solid var(--surface1);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;font-family:var(--font-body);}
.seg-control{display:flex;background:var(--surface0);border-radius:8px;padding:3px;gap:2px;}
.seg-btn{padding:7px 13px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--subtext0);display:flex;align-items:center;gap:6px;}
.seg-btn svg{width:14px;height:14px;}
.seg-btn.active{background:var(--mantle);color:var(--blue);}

.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--surface0);border:1px solid var(--surface0);border-radius:12px;overflow:hidden;margin-bottom:28px;}
.status-cell{background:var(--mantle);padding:18px 20px;}
.status-cell .label{font-size:11px;color:var(--overlay0);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.status-cell .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);}
.status-cell .value{font-family:var(--font-mono);font-size:26px;font-weight:600;}
.status-cell .delta{font-size:11.5px;color:var(--subtext0);margin-top:4px;}
.status-cell .delta.up{color:var(--green);}
.status-cell .delta.warn{color:var(--peach);}

.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;}
.panel{background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;padding:20px;}
.panel h2{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.panel h2 .see-all{font-size:12px;color:var(--sky);font-weight:500;font-family:var(--font-body);cursor:pointer;}

.project-row{display:flex;align-items:center;gap:14px;padding:12px 8px;border-radius:8px;border-bottom:1px solid var(--surface0);cursor:pointer;}
.project-row:last-child{border-bottom:none;}
.project-row:hover{background:var(--surface0);}
.p-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--crust);flex-shrink:0;}
.p-info{flex:1;min-width:0;}
.p-info .name{font-weight:600;font-size:13.5px;}
.p-info .client{font-size:11.5px;color:var(--subtext0);}
.p-progress{width:110px;flex-shrink:0;}
.p-bar-track{height:5px;background:var(--surface0);border-radius:3px;overflow:hidden;margin-bottom:4px;}
.p-bar-fill{height:100%;border-radius:3px;}
.p-progress .pct{font-size:10.5px;color:var(--overlay0);font-family:var(--font-mono);}
.tag{font-size:10.5px;padding:3px 8px;border-radius:20px;font-weight:600;font-family:var(--font-mono);white-space:nowrap;}
.tag-active{background:rgba(166,227,161,.15);color:var(--green);}
.tag-risk{background:rgba(250,179,135,.15);color:var(--peach);}
.tag-done{background:rgba(137,180,250,.15);color:var(--blue);}
.tag-paused{background:rgba(108,112,134,.2);color:var(--overlay0);}

.activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--surface0);}
.activity-item:last-child{border-bottom:none;padding-bottom:0;}
.activity-item .a-dot{width:26px;height:26px;border-radius:50%;background:var(--surface0);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.activity-item .a-dot svg{width:13px;height:13px;}
.activity-item .a-text{font-size:12.5px;line-height:1.5;color:var(--subtext1);}
.activity-item .a-text b{color:var(--text);}
.activity-item .a-time{font-size:10.5px;color:var(--overlay0);font-family:var(--font-mono);margin-top:2px;}

.filters-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.chip{padding:7px 13px;border-radius:20px;font-size:12.5px;font-weight:500;background:var(--surface0);color:var(--subtext0);border:1px solid transparent;}
.chip.active{background:rgba(137,180,250,.15);color:var(--blue);border-color:rgba(137,180,250,.3);}
.filter-clear{display:inline-flex;align-items:center;gap:8px;background:rgba(137,180,250,.15);color:var(--blue);padding:7px 13px;border-radius:20px;font-size:12.5px;margin-bottom:16px;font-weight:600;}
.filter-clear svg{width:13px;height:13px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.pcard{background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;padding:18px;transition:border-color .15s, transform .15s;cursor:pointer;}
.pcard:hover{border-color:var(--surface2);transform:translateY(-2px);}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.pcard-top .name{font-weight:600;font-size:14.5px;font-family:var(--font-display);}
.pcard-top .client{font-size:11.5px;color:var(--subtext0);margin-top:2px;}
.pcard-phases{display:flex;gap:4px;margin:14px 0;}
.phase-seg{height:6px;flex:1;border-radius:3px;background:var(--surface0);}
.phase-seg.filled{background:var(--blue);}
.phase-seg.current{background:var(--peach);}
.pcard-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--subtext0);margin-top:12px;padding-top:12px;border-top:1px solid var(--surface0);}
.pcard-meta .hours{font-family:var(--font-mono);color:var(--text);}
.avatars-stack{display:flex;}
.avatars-stack .avatar{width:24px;height:24px;font-size:10px;margin-left:-7px;border:2px solid var(--mantle);}
.avatars-stack .avatar:first-child{margin-left:0;}
.empty-state{padding:50px 20px;text-align:center;color:var(--overlay0);font-size:13px;}

.kanban-board{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;}
.kcol{background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;min-width:270px;max-width:270px;display:flex;flex-direction:column;max-height:calc(100vh - 240px);}
.kcol-head{padding:14px 14px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--surface0);flex-shrink:0;}
.kcol-head .title{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;}
.kcol-head .dot{width:7px;height:7px;border-radius:50%;}
.kcol-head .count{font-family:var(--font-mono);font-size:11px;color:var(--overlay0);background:var(--surface0);padding:1px 7px;border-radius:20px;}
.kcol-body{padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.kcard{background:var(--surface0);border-radius:9px;padding:12px 13px;border:1px solid var(--surface0);cursor:grab;transition:border-color .15s;}
.kcard:hover{border-color:var(--surface2);}
.kcard.dragging{opacity:.4;}
.kcard .k-client{font-size:10px;color:var(--overlay0);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.kcard .k-title{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:10px;}
.kcard .k-foot{display:flex;justify-content:space-between;align-items:center;}
.kcard .k-hours{font-family:var(--font-mono);font-size:10.5px;color:var(--subtext0);display:flex;align-items:center;gap:3px;}
.kcard .k-hours svg{width:11px;height:11px;}
.priority-bar{width:3px;height:14px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle;}
.log-hour-btn{width:18px;height:18px;border-radius:5px;background:var(--surface1);display:inline-flex;align-items:center;justify-content:center;margin-left:4px;flex-shrink:0;}
.log-hour-btn:hover{background:var(--surface2);}
.log-hour-btn svg{width:10px;height:10px;stroke:var(--green);}
.add-task-btn{margin:0 12px 12px;padding:9px;border-radius:8px;border:1px dashed var(--surface2);color:var(--subtext0);font-size:12px;text-align:center;flex-shrink:0;}
.add-task-btn:hover{border-color:var(--blue);color:var(--blue);}

.list-table{width:100%;border-collapse:collapse;background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;overflow:hidden;}
.list-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--overlay0);padding:12px 14px;background:var(--surface0);font-weight:600;}
.list-table tbody td{padding:12px 14px;border-bottom:1px solid var(--surface0);font-size:13px;vertical-align:middle;}
.list-table tbody tr:last-child td{border-bottom:none;}
.list-table tbody tr:hover{background:var(--surface0);}
.list-table .lt-title{cursor:pointer;font-weight:500;}
.list-table .lt-title:hover{color:var(--blue);}
.col-select{background:var(--surface0);border:1px solid var(--surface1);border-radius:6px;padding:5px 8px;font-size:11.5px;color:var(--text);font-family:var(--font-body);}

.gantt-wrap{background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;overflow:hidden;}
.gantt-scroll{overflow-x:auto;}
.gantt-grid{display:grid;grid-template-columns:220px repeat(8,minmax(60px,1fr));min-width:700px;}
.g-cell{padding:10px 8px;border-bottom:1px solid var(--surface0);border-right:1px solid var(--surface0);font-size:11px;}
.g-head{background:var(--surface0);font-weight:600;color:var(--subtext0);position:sticky;top:0;font-family:var(--font-mono);text-align:center;}
.g-head.label-col{text-align:left;}
.g-label-col{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--surface0);border-right:1px solid var(--surface0);cursor:pointer;}
.g-label-col:hover{background:var(--surface0);}
.g-label-col .phase-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.g-label-col .txt{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g-row-cells{position:relative;grid-column:span 8;border-bottom:1px solid var(--surface0);display:grid;grid-template-columns:repeat(8,1fr);}
.g-row-cells .gc{border-right:1px solid var(--surface0);height:38px;}
.g-bar{position:absolute;top:6px;height:26px;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;font-weight:600;color:var(--crust);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;cursor:pointer;}
.gantt-hint{padding:12px 16px;font-size:11.5px;color:var(--overlay0);border-top:1px solid var(--surface0);}

.clients-table{width:100%;border-collapse:collapse;background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;overflow:hidden;}
.clients-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--overlay0);padding:13px 16px;background:var(--surface0);font-weight:600;}
.clients-table tbody td{padding:14px 16px;border-bottom:1px solid var(--surface0);font-size:13px;}
.clients-table tbody tr:last-child td{border-bottom:none;}
.clients-table tbody tr{cursor:pointer;}
.clients-table tbody tr:hover{background:var(--surface0);}
.client-name-cell{display:flex;align-items:center;gap:10px;}
.client-name-cell .c-mark{width:32px;height:32px;border-radius:8px;background:var(--surface1);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:12px;flex-shrink:0;}
.client-name-cell strong{font-size:13px;display:block;}
.client-name-cell small{color:var(--overlay0);font-size:11px;}
.projects-pill{font-family:var(--font-mono);font-size:11px;background:var(--surface0);padding:2px 8px;border-radius:20px;color:var(--subtext0);}

.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.member-card{background:var(--mantle);border:1px solid var(--surface0);border-radius:12px;padding:18px;text-align:center;cursor:pointer;transition:border-color .15s;position:relative;}
.member-card:hover{border-color:var(--surface2);}
.member-card .avatar{width:56px;height:56px;font-size:18px;margin:0 auto 12px;}
.member-card .m-name{font-weight:600;font-size:14px;}
.member-card .m-role{font-size:11.5px;color:var(--subtext0);margin-top:2px;margin-bottom:10px;}
.role-pill{display:inline-block;font-size:10px;padding:2px 9px;border-radius:20px;font-weight:600;background:var(--surface0);color:var(--mauve);margin-bottom:10px;font-family:var(--font-mono);}
.member-card .m-stats{display:flex;justify-content:space-around;padding-top:14px;border-top:1px solid var(--surface0);}
.member-card .m-stats div{text-align:center;}
.member-card .m-stats .num{font-family:var(--font-mono);font-weight:600;font-size:16px;}
.member-card .m-stats .lbl{font-size:10px;color:var(--overlay0);text-transform:uppercase;margin-top:2px;}
.online-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--green);margin-top:8px;}
.online-badge .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);}
.suspended-badge{position:absolute;top:14px;right:14px;font-size:9.5px;background:rgba(243,139,168,.15);color:var(--red);padding:2px 8px;border-radius:20px;font-weight:700;font-family:var(--font-mono);}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(17,17,27,.72);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--mantle);border:1px solid var(--surface0);border-radius:14px;padding:26px 26px 24px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;animation:rise .25s ease;}
.modal-box.wide{max-width:580px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h3{font-family:var(--font-display);font-size:17px;font-weight:600;}
.modal-close{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--subtext0);flex-shrink:0;}
.modal-close svg{width:16px;height:16px;}
.modal-close:hover{background:var(--surface0);color:var(--text);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.checkbox-list{display:flex;flex-wrap:wrap;gap:8px;}
.check-pill{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;background:var(--surface0);border:1px solid var(--surface1);font-size:12.5px;cursor:pointer;}
.check-pill input{accent-color:var(--blue);}
.phase-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.phase-row input[type=text]{flex:1;}
.phase-row input[type=number]{width:70px;flex-shrink:0;}
.phase-row select{width:100px;flex-shrink:0;padding:11px 6px;}
.remove-row-btn{width:38px;height:38px;flex-shrink:0;border-radius:8px;background:var(--surface0);color:var(--red);display:flex;align-items:center;justify-content:center;}
.remove-row-btn:hover{background:var(--surface1);}
.remove-row-btn svg{width:15px;height:15px;}
.add-row-link{font-size:12.5px;color:var(--sky);font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-top:2px;margin-bottom:16px;}
.modal-actions{display:flex;gap:10px;margin-top:22px;}
.modal-actions .btn-primary{flex:1;}
.notif-list{max-height:420px;overflow-y:auto;}
.notif-item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--surface0);}
.notif-item:last-child{border-bottom:none;}
.notif-item .n-dot{width:28px;height:28px;border-radius:50%;background:var(--surface0);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif-item .n-dot svg{width:14px;height:14px;}
.notif-item .n-text{font-size:12.5px;line-height:1.5;color:var(--subtext1);}
.notif-item .n-time{font-size:10.5px;color:var(--overlay0);font-family:var(--font-mono);margin-top:2px;}
.detail-task-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--surface0);font-size:12.5px;}
.detail-task-row:last-child{border-bottom:none;}
.detail-task-row .proj{color:var(--overlay0);font-size:11px;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.detail-field{background:var(--surface0);border-radius:8px;padding:10px 12px;}
.detail-field .dl{font-size:10.5px;color:var(--overlay0);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600;}
.detail-field .dv{font-size:13px;font-weight:500;}
.detail-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--overlay0);font-weight:600;margin:18px 0 10px;}
.modal-btn-row{display:flex;gap:8px;margin-top:20px;}
.modal-btn-row .btn{flex:1;justify-content:center;}
.modal-btn-row .btn-danger{flex:none;padding:9px 14px;}

/* PROFILE MODAL TABS */
.profile-tabs{display:flex;gap:4px;background:var(--surface0);border-radius:9px;padding:4px;margin-bottom:20px;}
.profile-tab{flex:1;padding:8px 6px;border-radius:6px;font-size:12px;font-weight:600;color:var(--subtext0);text-align:center;}
.profile-tab.active{background:var(--mantle);color:var(--blue);}
.profile-panel{display:none;}
.profile-panel.active{display:block;}
.profile-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.profile-avatar-row .avatar{width:52px;height:52px;font-size:17px;}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--surface0);}
.toggle-row:last-child{border-bottom:none;}
.toggle-row .tr-label{font-size:13px;font-weight:500;}
.toggle-row .tr-desc{font-size:11.5px;color:var(--overlay0);margin-top:2px;}
.switch{position:relative;width:40px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--surface2);border-radius:20px;transition:.2s;cursor:pointer;}
.switch .slider:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text);border-radius:50%;transition:.2s;}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider:before{transform:translateX(18px);background:var(--crust);}
.device-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--surface0);}
.device-row:last-child{border-bottom:none;}
.device-row .d-icon{width:34px;height:34px;border-radius:8px;background:var(--surface0);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.device-row .d-icon svg{width:16px;height:16px;}
.device-row .d-info{flex:1;min-width:0;}
.device-row .d-name{font-size:12.5px;font-weight:600;}
.device-row .d-meta{font-size:11px;color:var(--overlay0);}
.device-row .d-current{font-size:9.5px;background:rgba(166,227,161,.15);color:var(--green);padding:2px 7px;border-radius:20px;font-weight:700;margin-left:6px;}
.history-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--surface0);font-size:12px;}
.history-row:last-child{border-bottom:none;}
.history-row .h-status{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700;font-family:var(--font-mono);}
.h-status.success{background:rgba(166,227,161,.15);color:var(--green);}
.h-status.failed{background:rgba(243,139,168,.15);color:var(--red);}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface0);border:1px solid var(--surface2);color:var(--text);padding:11px 18px;border-radius:9px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:250;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;display:flex;align-items:center;gap:8px;max-width:90vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:15px;height:15px;stroke:var(--green);flex-shrink:0;}

/* Responsive : l'échelle complète des points de rupture (Phase 6 — spec 09 §6/§7)
   est regroupée en FIN de fichier pour primer sur toutes les règles de base. */

/* ============================= Phase 4 — socle API (W1) ============================= */
/* Toast d'erreur (lisible dans les deux thèmes via les variables --red) */
.toast.error{border-color:var(--red);background:color-mix(in srgb, var(--red) 18%, var(--surface0));}
.toast.error svg{stroke:var(--red);}
/* Petit texte d'erreur de formulaire (login / OTP) */
.form-error{color:var(--red);font-size:12.5px;margin:2px 0 12px;line-height:1.4;}
/* Bandeau discret du code OTP en mode dev */
#dev-otp-banner{background:var(--surface0);border:1px dashed var(--surface2);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--subtext0);margin-bottom:12px;}
#dev-otp-banner b{font-family:var(--font-mono);color:var(--text);letter-spacing:2px;}
/* Bouton de déconnexion du footer sidebar */
.footer-user-row{display:flex;align-items:center;gap:4px;}
.footer-user-row .footer-user{flex:1;min-width:0;}
.logout-btn{background:none;border:none;color:var(--overlay0);padding:8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s, color .15s;}
.logout-btn:hover{background:var(--surface0);color:var(--red);}
.logout-btn svg{width:16px;height:16px;}

/* ============================================================================
   Phase 6 — PWA responsive (W3) — échelle complète des points de rupture
   Spec : exact-specs/09-PWA-RESPONSIVE.md §6 & §7 + 04-DESIGN-SYSTEM.md §7.
   Approche DESKTOP-FIRST : les règles de base du fichier = desktop (≥1025px,
   inchangé) ; chaque @media (max-width) ci-dessous affine en descendant.
   Règle transverse : JAMAIS de défilement horizontal du body — le contenu
   large défile en interne (.kanban-board, .gantt-scroll, tables) grâce au
   min-width:0 posé sur .main (voir le commentaire du correctif plus haut).
   ========================================================================== */

/* ---------- 881–1024px — tablette paysage / petit laptop ----------
   Sidebar verticale CONSERVÉE ; grilles de cartes resserrées en 2-3 colonnes. */
@media (max-width:1024px){
  .main{padding:22px 24px 60px;}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
  .grid-2{grid-template-columns:1.2fr 1fr;}
}

/* Lot 3b — barre supérieure mobile et overlay du tiroir : présents dans le DOM en
   permanence mais masqués par défaut ; rendus visibles UNIQUEMENT ≤880px ci-dessous.
   Le >880px force aussi leur masquage plus bas (ceinture + bretelles). */
#mobile-topbar{display:none;}
#drawer-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s ease;}

/* ---------- ≤880px — tablette portrait et mobile ----------
   Lot 3b : la sidebar devient un TIROIR qui glisse depuis la gauche (position:fixed,
   translateX), ouvert par le bouton ☰ de la barre supérieure mobile #mobile-topbar.
   Remplace l'ancienne barre horizontale sticky (04-DESIGN-SYSTEM §7 « nav toujours
   visible ») — changement de spec assumé, voir le compte-rendu de la mission.
   Le tiroir garde la mise en page VERTICALE du desktop (brand, groupes, footer) :
   on ne réécrit donc que le positionnement/l'ouverture, pas le contenu interne.
   Grilles de cartes 2 colonnes, stats 2 colonnes (hérité). */
@media (max-width:880px){
  #app.active{grid-template-columns:1fr;}

  /* Barre supérieure : ☰ + nom de l'app, sticky en haut, safe-area iOS/Android. */
  #mobile-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:120;
    background:var(--mantle);border-bottom:1px solid var(--surface0);
    padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));}
  #drawer-toggle{width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;color:var(--text);flex-shrink:0;transition:background .12s;}
  #drawer-toggle:hover{background:var(--surface0);}
  #drawer-toggle svg{width:22px;height:22px;}
  #mobile-topbar-title{font-family:var(--font-display);font-weight:700;font-size:16px;}

  /* Overlay sombre : visible seulement quand le tiroir est ouvert. */
  body.drawer-open #drawer-overlay{opacity:1;visibility:visible;pointer-events:auto;}

  /* Le tiroir lui-même : hors flux (fixed), caché par translateX, glisse au clic sur ☰. */
  .sidebar{position:fixed;top:0;left:0;z-index:200;
    width:min(82vw,320px);height:100vh;height:100dvh;
    transform:translateX(-100%);transition:transform .25s ease;
    overflow-x:hidden;overflow-y:auto;
    border-right:1px solid var(--surface0);border-bottom:none;
    /* env(safe-area-inset-*) : encoche / Dynamic Island (09-PWA §7) */
    padding-top:calc(20px + env(safe-area-inset-top));
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  body.drawer-open .sidebar{transform:translateX(0);}

  /* padding-bottom : dégage la barre de geste iOS/Android */
  .main{padding:18px 16px calc(60px + env(safe-area-inset-bottom));}
  .grid-2{grid-template-columns:1fr;}
  .status-strip{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .field-row, .detail-grid{grid-template-columns:1fr;}
  /* Tables : défilement horizontal interne (le body ne bouge jamais) */
  .list-table, .clients-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Toast au-dessus de la barre de geste */
  .toast{bottom:calc(22px + env(safe-area-inset-bottom));}

  /* --- Cibles tactiles ≥44×44px (09-PWA §7) ---
     Le texte courant reste ≥14px (body:14px inchangé) ; seuls les petits
     labels/badges méta conservent leurs tailles réduites. */
  .nav-item{flex-direction:row;white-space:nowrap;padding:10px 14px;min-height:44px;}
  .btn{min-height:44px;padding:10px 16px;}
  .btn-primary{min-height:44px;}
  .btn-danger{min-height:44px;padding:10px 16px;}
  .seg-btn{min-height:44px;padding:0 14px;}
  select.sel-inline{min-height:44px;}
  .chip, .filter-clear{min-height:44px;display:inline-flex;align-items:center;}
  .field input, .field select, .field textarea{min-height:44px;}
  .otp-boxes input{min-height:48px;}
  .check-pill{min-height:44px;}
  .profile-tab{min-height:44px;}
  .theme-btn{min-height:44px;}
  .modal-close{width:44px;height:44px;}
  .remove-row-btn{width:44px;height:44px;}
  .logout-btn{min-width:44px;min-height:44px;}
  .log-hour-btn{min-width:44px;min-height:44px;border-radius:8px;}
  .log-hour-btn svg{width:14px;height:14px;}
  .add-task-btn{min-height:44px;}
  .add-row-link{min-height:44px;display:inline-flex;align-items:center;}
  .col-select{min-height:44px;padding:8px 10px;font-size:13px;}
  .panel h2 .see-all{padding:14px 8px;margin:-14px -8px;}
  .g-label-col{min-height:44px;}
  .g-row-cells .gc{height:56px;}
  .g-bar{height:44px;top:6px;}
  /* Interrupteurs : zone tactile élargie à ~48×44px sans toucher au visuel
     (le label .switch capte le tap et bascule la case) */
  .switch::after{content:'';position:absolute;top:-11px;bottom:-11px;left:-4px;right:-4px;}
}

/* Lot 3b — ceinture + bretelles : desktop (>880px) STRICTEMENT inchangé. Même si un
   bug JS laissait body.drawer-open posé par erreur, la barre ☰ et l'overlay du tiroir
   restent masqués et la sidebar reste statique en colonne à gauche comme aujourd'hui. */
@media (min-width:881px){
  #mobile-topbar, #drawer-overlay{display:none !important;}
  .sidebar{position:sticky !important;transform:none !important;}
}

/* ---------- 481–600px — grand smartphone / phablette ----------
   Marges latérales légèrement augmentées (spec §6), grilles 1 colonne. */
@media (max-width:600px){
  .main{padding-left:20px;padding-right:20px;}
  .card-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
}

/* ---------- 381–480px — smartphone standard ----------
   Stats : toujours 2 colonnes (héritées) ; Kanban : défilement horizontal
   classique (hérité) ; MODALS PLEIN ÉCRAN, header sticky, contenu scrollable. */
@media (max-width:480px){
  .main{padding-left:16px;padding-right:16px;}
  .modal-overlay{padding:0;align-items:stretch;justify-content:stretch;}
  .modal-box, .modal-box.wide{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;border:none;
    animation:none;padding:0 18px calc(24px + env(safe-area-inset-bottom));}
  .modal-head{position:sticky;top:0;z-index:5;background:var(--mantle);
    padding:calc(16px + env(safe-area-inset-top)) 0 12px;margin-bottom:16px;border-bottom:1px solid var(--surface0);}
}

/* ---------- ≤380px — petits smartphones (iPhone SE, Android compacts) ----------
   Stats 1 colonne, boutons principaux pleine largeur, Kanban en carrousel :
   colonnes 85vw, une carte visible, accrochage au défilement (scroll-snap). */
@media (max-width:380px){
  .status-strip{grid-template-columns:1fr;}
  .topbar{flex-direction:column;align-items:stretch;}
  .topbar-actions{width:100%;}
  .topbar .btn{width:100%;justify-content:center;}
  .topbar-actions .sel-inline{width:100%;}
  .seg-control{width:100%;}
  .seg-btn{flex:1;justify-content:center;}
  .modal-btn-row{flex-direction:column;}
  .modal-btn-row .btn-danger{width:100%;}
  .kanban-board{scroll-snap-type:x mandatory;scroll-padding-left:4px;}
  .kcol{min-width:85vw;max-width:85vw;scroll-snap-align:start;}
}

/* ============================================================
   Phase 6 — W4 Kanban Pointer Events
   Drag & drop unifié souris + tactile (views-tasks.js).
   Ajouts uniquement — aucune règle existante modifiée.
   ============================================================ */
/* Fantôme qui suit le pointeur. pointer-events:none est CRITIQUE :
   sans lui, elementFromPoint renverrait le fantôme lui-même. */
.kcard-ghost{position:fixed;left:0;top:0;z-index:900;pointer-events:none;
  margin:0;will-change:transform;opacity:.95;cursor:grabbing;
  border-color:var(--blue);box-shadow:0 14px 32px rgba(0,0,0,.4);}
/* Carte d'origine pendant le drag = placeholder d'insertion
   (complète .kcard.dragging existante : opacité .4 conservée). */
body.kdnd-active .kcard.dragging{border-style:dashed;border-color:var(--surface2);}
/* Colonne survolée pendant le drag */
.kcol-body.drop-target{outline:1.5px dashed var(--blue);outline-offset:-5px;border-radius:0 0 12px 12px;}
/* État global pendant un drag : pas de sélection de texte, curseur "saisi",
   et on suspend le scroll-snap du carrousel ≤380px (sinon l'auto-scroll
   horizontal se fait réaccrocher à chaque frame). */
body.kdnd-active{user-select:none;-webkit-user-select:none;cursor:grabbing;}
body.kdnd-active .kcard{cursor:grabbing;}
body.kdnd-active .kanban-board{scroll-snap-type:none;}