:root {
            --bulle:  #436268;
            --abyss:  #00333d;
            --perle:  #65d4d6;
            --perle-light: #e0f8f8;
            --neige:  #f4f5f4;
            --white:  #ffffff;
            --text:   #1a2d30;
            --muted:  #5a7478;
            --muted-light: #8fa5a7;
            --border: #d4e2e3;
            --border-strong: #b8cfd1;
            --shadow-lg: 0 16px 48px rgba(0,51,61,.12);
            --r-xl: 20px; --r-lg: 14px; --r-md: 10px;
            --bg-card: #f4f5f4;
            --bg: #ffffff;
            --danger: #b91c1c;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { min-height:100vh; background:var(--neige); font-family:'Nunito',system-ui,sans-serif; color:var(--text); padding:28px; }
        button, input, select { font-family: inherit; } button { cursor: pointer; }
        .app { width:100%; max-width:1100px; margin:0 auto; }

        .topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
        .brand-label { font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--perle); margin-bottom:6px; }
        .brand-title { font-size:clamp(30px,5vw,50px); font-weight:900; letter-spacing:-.04em; color:var(--abyss); line-height:1; }
        .date-pill { background:var(--white); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:12px; font-weight:700; color:var(--muted); }

        .main-card { background:var(--white); border:1px solid var(--border); border-top:4px solid var(--bulle); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:36px; min-height:620px; display:flex; flex-direction:column; position:relative; overflow:hidden; }

        .state { display:none; }
        .state.active { display:flex; flex-direction:column; flex:1; }
        #etat-2.active { justify-content:flex-start; align-items:flex-start; }

        /* Login split */
        #etat-1.active { position:absolute; inset:0; flex-direction:row; border-radius:calc(var(--r-xl) - 1px); overflow:hidden; }
        .login-panel { width:380px; flex-shrink:0; background:var(--abyss); padding:52px 44px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
        .login-panel::before { content:''; position:absolute; right:0; top:0; bottom:0; width:4px; background:var(--perle); }
        .login-panel::after  { content:''; position:absolute; right:-110px; bottom:-110px; width:320px; height:320px; border-radius:50%; border:1px solid rgba(101,212,214,.12); }
        .login-kicker  { font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--perle); margin-bottom:16px; position:relative; z-index:1; }
        .login-logo    { font-size:54px; font-weight:900; letter-spacing:-.04em; color:var(--white); line-height:1; position:relative; z-index:1; }
        .login-logo span { color:var(--perle); }
        .login-bottom  { position:relative; z-index:1; border-top:1px solid rgba(101,212,214,.18); padding-top:22px; }
        .login-tagline { font-size:13px; font-weight:800; color:var(--white); margin-bottom:4px; }
        .login-sub     { font-size:12px; color:rgba(255,255,255,.4); }
        .login-form-panel { flex:1; display:flex; flex-direction:column; justify-content:center; padding:52px 56px; position:relative; }
        @media(max-width:760px) { #etat-1.active{flex-direction:column;position:relative;inset:auto;} .login-panel{width:100%;min-height:130px;padding:24px 28px;} .login-logo{font-size:36px;} .login-bottom{display:none;} .login-form-panel{padding:24px;} }

        .section-label { font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--perle); margin-bottom:12px; }
        .page-title    { font-size:30px; font-weight:900; letter-spacing:-.03em; margin-bottom:8px; }
        .page-subtitle { font-size:14px; color:var(--muted); margin-bottom:26px; line-height:1.5; }
        .muted         { color:var(--muted); font-size:13px; }
        #login-error   { display:none; color:#b91c1c; font-size:13px; margin-bottom:12px; }

        input[type=text], input[type=password], input[type=number], select.styled {
            width:100%; max-width:500px; padding:14px 16px;
            border:1.5px solid var(--border-strong); border-radius:var(--r-md);
            background:var(--white); color:var(--text); font-size:15px; outline:none;
            transition:.18s; margin-bottom:14px; font-family:inherit;
        }
        input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select.styled:focus { border-color:var(--bulle); box-shadow:0 0 0 4px rgba(67,98,104,.09); }
        input[type=number] { text-align:center; font-size:28px; font-weight:800; max-width:200px; }
        select.styled { appearance:none; cursor:pointer; }

        .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-link {
            border-radius:var(--r-md); padding:13px 18px; font-size:14px; font-weight:800;
            transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:8px;
        }
        .btn-primary  { border:none; background:var(--bulle); color:var(--white); }
        .btn-primary:hover  { background:var(--abyss); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,51,61,.22); }
        .btn-secondary { border:1px solid var(--border); background:var(--white); color:var(--text); }
        .btn-add { padding:12px 16px; border:none; border-radius:var(--r-md); background:var(--bulle); color:var(--white); font-size:14px; font-weight:800; transition:.15s; font-family:inherit; cursor:pointer; }
        .btn-add:hover { background:var(--abyss); }
        .btn-secondary:hover { background:var(--neige); }
        .btn-ghost  { border:1px solid var(--border); background:var(--white); color:var(--muted); }
        .btn-ghost:hover { background:var(--neige); color:var(--text); }
        .btn-danger { width:100%; border:1px solid #fecdd3; background:#fff1f2; color:#b91c1c; margin-top:16px; }
        .btn-danger:hover { background:#ffe4e6; }
        .btn-link   { border:none; background:transparent; color:var(--bulle); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
        .full { width:100%; max-width:500px; }

        .activity-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; width:100%; min-width:0; }
        .activity-button { min-height:106px; border:1px solid var(--border); border-left:4px solid var(--border); background:var(--white); border-radius:var(--r-lg); padding:20px 18px; text-align:left; transition:.18s; display:flex; align-items:center; gap:13px; }
        .activity-button:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,51,61,.10); border-color:var(--border-strong); }
        .activity-icon { display:none; }
        .activity-name { font-size:15px; font-weight:700; color:var(--text); }

        .current-card { background:var(--abyss); border-radius:var(--r-xl); padding:30px; margin-bottom:22px; position:relative; overflow:hidden; }
        .current-card::after { content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; border:1px solid rgba(101,212,214,.12); }
        .status-pill { display:inline-flex; align-items:center; gap:7px; background:rgba(101,212,214,.15); color:var(--perle); border:1px solid rgba(101,212,214,.3); border-radius:999px; padding:5px 12px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; position:relative; z-index:1; }
        .status-dot    { width:7px; height:7px; border-radius:50%; background:var(--perle); }
        .current-label { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:5px; position:relative; z-index:1; }
        .current-activity { font-size:clamp(20px,3vw,32px); font-weight:800; color:var(--white); margin-bottom:18px; position:relative; z-index:1; }
        .chrono { font-size:clamp(62px,9vw,98px); line-height:1; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--perle); position:relative; z-index:1; }

        .actions-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
        .actions-title   { font-size:28px; font-weight:900; letter-spacing:-.03em; margin-bottom:3px; }
        .actions-subtitle { color:var(--muted); font-size:13px; }
        .actions-grid    { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
        .folder-button   { min-height:84px; border:1px solid var(--border); border-left:4px solid var(--perle); background:var(--white); border-radius:var(--r-lg); padding:15px; text-align:left; transition:.15s; }
        .folder-button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,51,61,.09); }
        .folder-label { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-bottom:7px; }
        .folder-name  { font-size:14px; font-weight:800; line-height:1.25; }
        .panel { border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; background:var(--white); }

        .recap-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr); gap:20px; align-items:start; }
        .recap-title { font-size:28px; font-weight:900; letter-spacing:-.03em; margin-bottom:4px; }
        .recap-date  { color:var(--muted); font-size:13px; margin-bottom:20px; }
        .timeline-table { width:100%; border-collapse:collapse; }
        .timeline-table th { font-size:11px; font-weight:700; color:var(--muted); text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); background:var(--neige); }
        .timeline-table td { font-size:13px; padding:11px 10px; border-bottom:1px solid #eef4f4; vertical-align:middle; }
        .timeline-table tr:last-child td { border-bottom:none; }
        .td-activite { display:flex; align-items:center; gap:8px; font-weight:700; flex-wrap:wrap; }
        .td-dot      { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
        /* Tableau du jour (équipe) — repris à l'identique du tableau de bord admin */
        .agent-row { border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--white); transition:border-left-color .2s; margin-bottom:10px; }
        .agent-row-header { display:flex; justify-content:space-between; align-items:center; padding:14px 17px; cursor:pointer; transition:.15s; gap:10px; flex-wrap:wrap; }
        .agent-row-header:hover { background:var(--neige); }
        .agent-row.open .agent-row-header { background:var(--perle-light); border-bottom:1px solid #b8e8e9; }
        .agent-left { display:flex; gap:12px; align-items:center; }
        .agent-name-big { font-size:14px; font-weight:800; }
        .agent-status-txt { font-size:12px; color:var(--muted); margin-top:2px; }
        .agent-right { display:flex; gap:10px; align-items:center; }
        .agent-total { font-size:13px; font-weight:800; color:var(--bulle); }
        .badge { font-size:11px; padding:4px 10px; border-radius:999px; font-weight:800; }
        .badge-ok      { background:#d1fae5; color:#065f46; }
        .badge-live    { background:var(--perle-light); color:var(--bulle); }
        .badge-abs-ok  { background:#dcfce7; color:#166534; }
        .badge-abs-ko  { background:#fef3c7; color:#92400e; }
        .chevron { font-size:12px; color:var(--muted); transition:transform .2s; }
        .agent-row.open .chevron { transform:rotate(90deg); }
        .agent-timeline { display:none; padding:14px 18px; background:#f8fdfd; }
        .agent-row.open .agent-timeline { display:block; }
        .tl-table { width:100%; border-collapse:collapse; }
        .tl-table th { font-size:11px; font-weight:700; color:var(--muted); text-align:left; padding:8px 9px; border-bottom:1px solid var(--border); background:var(--white); }
        .tl-table td { font-size:12px; padding:9px 9px; border-bottom:1px solid #eef4f4; vertical-align:middle; }
        .tl-table tr:last-child td { border-bottom:none; }
        .td-act { display:flex; align-items:center; gap:7px; font-weight:700; }
        .summary-row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
        .summary-chip { background:var(--white); border:1px solid var(--border); border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; }
        .edit-top-btn { background:none; border:none; padding:2px; font-size:16px; line-height:1; cursor:pointer; transition:transform .15s; }
        .edit-top-btn:hover { transform:scale(1.15); }
        .total-card  { background:var(--abyss); color:var(--white); border-radius:var(--r-lg); padding:18px; margin-bottom:11px; }
        .total-label { font-size:11px; opacity:.6; margin-bottom:5px; }
        .total-value { font-size:36px; font-weight:900; letter-spacing:-.04em; color:var(--perle); }
        .pause-card  { display:flex; justify-content:space-between; align-items:center; background:#f0fafa; border:1px solid #b8e8e9; border-radius:var(--r-md); padding:11px 14px; margin-bottom:14px; color:var(--bulle); font-weight:800; font-size:13px; }
        .resume-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #eef4f4; }
        .resume-item:last-child { border-bottom:none; }
        .resume-left { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }
        .recap-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }

        .histo-jour { border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; }
        .histo-jour-header { display:flex; justify-content:space-between; align-items:center; padding:13px 17px; background:var(--white); cursor:pointer; }
        .histo-jour-header:hover { background:var(--neige); }
        .histo-jour.open .histo-jour-header { background:var(--perle-light); border-bottom:1px solid #b8e8e9; }
        .histo-jour-body { display:none; padding:13px 17px; background:#f8fdfd; }
        .histo-jour.open .histo-jour-body { display:block; }

        .confirmation { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
        .confirmation-icon  { width:70px; height:70px; border-radius:999px; background:var(--perle-light); color:var(--bulle); display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:16px; }
        .confirmation-title { font-size:28px; font-weight:900; letter-spacing:-.03em; margin-bottom:5px; }
        .confirmation-sub   { color:var(--muted); font-size:14px; }

        @media(max-width:900px) { body{padding:16px;} .actions-grid{grid-template-columns:repeat(2,1fr);} .recap-grid{grid-template-columns:1fr;} }
        @media(max-width:580px) { body{padding:10px;} .main-card{padding:20px;} .actions-toolbar{flex-direction:column;} .recap-actions{grid-template-columns:1fr;} }

        /* ── Cabinet cards ───────────────────────────────────────────── */
        .cabinets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
        .cabinet-card {
            position:relative; background:var(--white); border:1.5px solid var(--border);
            border-radius:var(--r-xl); padding:24px 20px 20px; text-align:left;
            cursor:pointer; transition:.2s; overflow:hidden; border-left:none;
        }
        .cabinet-card::before {
            content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
            border-radius:var(--r-xl) 0 0 var(--r-xl);
            background:var(--cab-color, var(--bulle));
        }
        .cabinet-card:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,51,61,.11); border-color:var(--border-strong); }
        .cabinet-card:hover .cabinet-arrow { opacity:.85; transform:translateX(3px); }
        .cabinet-name  { font-size:17px; font-weight:800; color:var(--text); margin-bottom:3px; }
        .cabinet-sub   { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
        .cabinet-arrow { position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; opacity:.22; transition:.2s; color:var(--text); }

        /* ── Semaine pointages ───────────────────────────────────────── */
        .semaine-prog  { background:var(--neige); border-radius:var(--r-lg); padding:16px; margin-bottom:16px; }
        .semaine-jour  { border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; }
        .semaine-jour-header { display:flex; justify-content:space-between; align-items:center; padding:13px 17px; background:var(--white); cursor:pointer; gap:12px; }
        .semaine-jour-header:hover { background:var(--neige); }
        .semaine-jour.open .semaine-jour-header { background:var(--perle-light); border-bottom:1px solid #b8e8e9; }
        .semaine-jour-body { display:none; padding:12px 16px; background:#f8fdfd; }
        .semaine-jour.open .semaine-jour-body { display:block; }
        .semaine-cal-box {
            width:38px; height:38px; border-radius:9px;
            background:var(--neige); display:flex; flex-direction:column;
            align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--border);
        }
        .semaine-cal-mois { font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
        .semaine-cal-jour { font-size:16px; font-weight:900; color:var(--text); line-height:1.1; }
        .semaine-jour.open .semaine-cal-box { background:var(--perle); border-color:var(--perle); }
        .semaine-jour.open .semaine-cal-mois,
        .semaine-jour.open .semaine-cal-jour { color:var(--white); }
        .pointage-row { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid #eef4f4; }
        .pointage-row:last-child { border-bottom:none; }
        .p-time { font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums; }
        .p-time.debut { background:#dcfce7; color:#166534; }   /* vert = clock-in */
        .p-time.fin   { background:#fee2e2; color:#991b1b; }   /* rouge = clock-out */
        .p-arr  { color:var(--muted); font-size:11px; flex-shrink:0; }
        .p-label { font-size:13px; font-weight:700; flex:1; min-width:0; }
        .p-cab  { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.7; }
        .p-dos  { font-size:11px; opacity:.65; }

        /* ── Toast notifications ─────────────────────────────────────── */
        #toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; width:min(420px,90vw); }
        .toast { background:var(--abyss); color:var(--white); border-radius:14px; padding:14px 18px; font-size:13px; font-weight:700; box-shadow:0 8px 32px rgba(0,0,0,.25); display:flex; align-items:flex-start; gap:10px; opacity:0; transform:translateY(12px); transition:.25s; pointer-events:auto; }
        .toast.visible { opacity:1; transform:translateY(0); }
        .toast.warn { background:#92400e; }
        .toast.ok   { background:#065f46; }
        .toast.err  { background:#991b1b; }
        .toast-icon { font-size:16px; flex-shrink:0; }
        .toast-msg  { flex:1; line-height:1.45; }

        /* ── Alerte pause courte ─────────────────────────────────────── */
        #alerte-pause { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; align-items:center; justify-content:center; }
        #alerte-pause.open { display:flex; }
        .alerte-pause-box { background:var(--white); border-radius:20px; padding:32px 28px; max-width:380px; width:90%; box-shadow:0 24px 60px rgba(0,0,0,.25); text-align:center; }
        .alerte-pause-icon { font-size:40px; margin-bottom:12px; }
        .alerte-pause-titre { font-size:18px; font-weight:900; color:var(--text); margin-bottom:8px; }
        .alerte-pause-msg   { font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:20px; }
        .alerte-pause-heure { font-size:32px; font-weight:900; color:var(--bulle); margin:12px 0; }
        .alerte-pause-btn   { width:100%; padding:14px; border:none; border-radius:12px; background:var(--bulle); color:var(--white); font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
        .alerte-pause-btn:hover { background:var(--abyss); }

        /* ── Jauge h/jour + h/semaine ────────────────────────────────── */
        .jauge-stats { display:none; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
        .jauge-stats.visible { display:grid; }
        .jauge-chip { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 16px; display:flex; flex-direction:column; gap:3px; }
        .jauge-chip-sem { border-color:var(--perle); background:var(--perle-light); }
        .jauge-chip-label { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
        .jauge-chip-val   { font-size:20px; font-weight:900; color:var(--bulle); font-variant-numeric:tabular-nums; line-height:1; }
        .jauge-chip-val.alert { color:#dc2626; }
        .jauge-chip-target { font-size:11px; color:var(--muted); }

        /* ── Alerte "trop tôt" ──────────────────────────────────────── */
        #alerte-trop-tot { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; align-items:center; justify-content:center; }
        #alerte-trop-tot.open { display:flex; }
        #alerte-trop-tard { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; align-items:center; justify-content:center; }
        #alerte-trop-tard.open { display:flex; }
        .alerte-tot-box { background:var(--white); border-radius:20px; padding:32px 28px; max-width:360px; width:90%; box-shadow:0 24px 60px rgba(0,0,0,.25); text-align:center; }

        /* ── Info progressif semaine ─────────────────────────────────── */
        .progressif-ok   { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:12px 14px; font-size:13px; color:#166534; margin-top:14px; }
        .progressif-warn { background:#fefce8; border:1px solid #fde68a; border-radius:12px; padding:12px 14px; font-size:13px; color:#854d0e; margin-top:14px; }
        .progressif-crit { background:#fff1f2; border:1px solid #fecaca; border-radius:12px; padding:12px 14px; font-size:13px; color:#991b1b; margin-top:14px; font-weight:700; }

        /* ── Boutons navigation agent (Ma semaine / Mes absences) ────────── */
        .btn-nav-agent {
            flex: 1; padding: 13px 16px;
            border: 1.5px solid var(--border); border-radius: var(--r-md);
            background: var(--white); color: var(--bulle);
            font-family: inherit; font-size: 14px; font-weight: 800;
            cursor: pointer; transition: .15s;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .btn-nav-agent:hover { background: var(--perle-light); border-color: var(--perle); }
        .avatar { width:36px; height:36px; border-radius:50%; background:var(--perle-light); color:var(--bulle); font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .agent-mgmt-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--white); margin-bottom:8px; flex-wrap:wrap; transition:.15s; }
        .agent-mgmt-row:hover { border-color:var(--border-strong); }
        .agent-mgmt-info { flex:1; min-width:160px; }
        .agent-mgmt-name { font-size:14px; font-weight:800; color:var(--text); margin-bottom:2px; }
        .agent-mgmt-meta { font-size:11px; color:var(--muted); }
        .agent-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
        .act-btn { border:1px solid var(--border); background:var(--white); color:var(--text); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:.15s; }
        .act-btn:hover { background:var(--neige); border-color:var(--border-strong); }
        .act-btn.danger { color:#ef4444; border-color:#fecdd3; }
        .act-btn.danger:hover { background:#fee2e2; }
        .empty-state { font-size:12px; color:var(--muted); padding:16px; text-align:center; }
        .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
        .modal-overlay.open { display:flex; }
        .modal-box { background:var(--white); border-radius:var(--r-xl); padding:32px; width:92%; max-width:480px; max-height:80vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.3); position:relative; }
        .modal-title { font-size:20px; font-weight:900; margin-bottom:20px; }
        .modal-close { position:absolute; top:18px; right:18px; border:none; background:none; font-size:20px; color:var(--muted); cursor:pointer; }
        .modal-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
        .modal-label { font-size:12px; font-weight:800; color:var(--bulle); }
        .modal-input { padding:11px 13px; border:1.5px solid var(--border-strong); border-radius:var(--r-md); font-size:14px; font-family:inherit; background:var(--white); color:var(--text); outline:none; }
        .modal-footer { display:flex; gap:8px; margin-top:20px; }
        .modal-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

        /* ── Agent chip topbar ───────────────────────────────────────── */
        .agent-chip { display:none; align-items:center; gap:9px; background:var(--white); border:1px solid var(--border); border-radius:999px; padding:6px 14px 6px 7px; }
        .agent-chip.visible { display:flex; }
        .agent-chip-av { width:28px; height:28px; border-radius:50%; background:var(--abyss); color:var(--perle); font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .agent-chip-nom { font-size:12px; font-weight:800; color:var(--text); }