*{box-sizing:border-box;margin:0;padding:0}
        body{font-family:'Segoe UI',Tahoma,sans-serif;background:#f0f2f5;color:#333}

        /* LOGIN */
        .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a73e8,#0d47a1)}
        .login-card{background:#fff;padding:40px;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.25);width:360px}
        .login-logo{text-align:center;margin-bottom:28px}
        .login-logo .brand-logo{width:56px;height:56px;margin-bottom:12px;border-radius:14px;box-shadow:0 4px 12px rgba(26,115,232,.3)}
        .login-logo h1{font-size:26px;color:#1a73e8;margin-bottom:4px}
        .login-logo p{color:#888;font-size:13px}

        /* FORMS */
        .fg{margin-bottom:14px}
        .fg label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.4px}
        .fg input,.fg select,.fg textarea{width:100%;padding:10px 13px;border:1.5px solid #ddd;border-radius:8px;font-size:15px;transition:border-color .2s;font-family:inherit}
        .fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:#1a73e8}
        .err{color:#ea4335;font-size:12px;margin-top:6px}

        /* BUTTONS */
        .btn{padding:9px 18px;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;transition:all .15s;white-space:nowrap}
        .btn-primary{background:#1a73e8;color:#fff}.btn-primary:hover{background:#1557b0}
        .btn-success{background:#34a853;color:#fff}.btn-success:hover{background:#2d8a46}
        .btn-danger{background:#ea4335;color:#fff}.btn-danger:hover{background:#c5221f}
        .btn-secondary{background:#e8eaed;color:#333}.btn-secondary:hover{background:#d2d4d7}
        .btn-warning{background:#fbbc04;color:#333}.btn-warning:hover{background:#f9a825}
        .btn-full{width:100%;padding:12px}
        .btn-sm{padding:5px 11px;font-size:12px}

        /* HEADER */
        .header{background:#fff;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.1);position:sticky;top:0;z-index:100}
        .header-logo{font-size:19px;font-weight:800;color:#1a73e8}
        .header-user{font-size:13px;color:#666;margin-left:12px}
        .header-right{display:flex;align-items:center;gap:8px}

        /* DOCUMENT GÉNÉRÉ (contrat, certificat) — même thème que le reste de l'appli */
        #contractPreview .doc-letterhead{background:#e8f0fe;color:#1a73e8;padding:16px 32px;border-radius:10px 10px 0 0;margin:0 -32px 22px;border-bottom:2px solid #1a73e8;display:flex;align-items:center;justify-content:space-between}
        #contractPreview .doc-letterhead .doc-company{font-size:18px;font-weight:800;letter-spacing:.3px}
        #contractPreview .doc-letterhead .doc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
        #contractPreview h2{color:#1a73e8;font-size:17px;font-weight:800;text-align:center;margin:0 0 18px}
        #contractPreview h3{color:#1a73e8;font-size:13px;font-weight:800;margin:20px 0 8px;padding-bottom:4px;border-bottom:2px solid #e8eaed;text-transform:uppercase;letter-spacing:.3px}
        #contractPreview h4{color:#1a73e8;font-size:12.5px;font-weight:700;margin:12px 0 6px}
        #contractPreview p{margin-bottom:8px}
        #contractPreview p[style*="margin-top:30px"],#contractPreview p[style*="margin-top:40px"],#contractPreview p[style*="margin-top:50px"]{border-top:1.5px solid #e8eaed;padding-top:16px}

        /* LAYOUT */
        .page{padding:22px;max-width:1200px;margin:0 auto}

        /* MONTH NAV */
        .month-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:18px}
        .month-nav h2{font-size:21px;min-width:220px;text-align:center}
        .nav-btn{background:#fff;border:1.5px solid #ddd;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s}
        .nav-btn:hover{background:#1a73e8;color:#fff;border-color:#1a73e8}

        /* SUMMARY CARDS */
        .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
        .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
        .s-card{background:#fff;border-radius:10px;padding:14px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.07)}
        .s-card .val{font-size:26px;font-weight:800}
        .s-card .lbl{font-size:11px;color:#888;margin-top:3px;text-transform:uppercase;letter-spacing:.3px}

        /* DASHBOARD DONUT */
        .donut-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
        .donut-card .dc-title{width:100%;font-size:15px;font-weight:700;margin-bottom:2px}
        .donut{width:140px;height:140px;border-radius:50%;position:relative;flex-shrink:0;transition:background 1s}
        .donut-hole{position:absolute;inset:16px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
        .donut-hole .donut-val{font-size:22px;font-weight:800;color:#333;line-height:1.1}
        .donut-hole .donut-lbl{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
        .donut-legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:150px}
        .donut-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}
        .donut-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
        .donut-legend-item .dl-val{margin-left:auto;font-weight:700}
        .balance-box{background:#f8f9fa;border-radius:10px;padding:14px 18px;text-align:center;min-width:140px}
        .balance-box .val{font-size:26px;font-weight:800;color:#1a73e8}
        .balance-box .lbl{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
        .balance-edit{display:flex;gap:6px;align-items:center;margin-top:10px;justify-content:center}
        .balance-edit input{width:72px;padding:6px 8px;border:1.5px solid #ddd;border-radius:6px;font-size:14px;text-align:center}
        .bal-input{width:64px;padding:6px 7px;border:1.5px solid #ddd;border-radius:6px;font-size:13px;text-align:center}
        @media(max-width:600px){
            .donut-card{padding:14px;gap:12px;flex-direction:column;align-items:center;text-align:center}
            .donut{width:130px;height:130px}
            .donut-hole{inset:16px}
            .donut-legend{width:100%;max-width:260px;min-width:0;text-align:left}
            .balance-box{width:100%;max-width:260px}
        }

        /* COMPTABILITÉ */
        .acc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
        .acc-kpi-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
        .acc-kpi-lbl{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.3px;font-weight:700;margin-bottom:6px}
        .acc-kpi-val{font-size:28px;font-weight:800;color:#222}
        .acc-kpi-sub{margin-top:12px;display:flex;flex-direction:column;gap:6px}
        .acc-kpi-sub div{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#666}
        .acc-kpi-sub strong{color:#333;font-weight:700;white-space:nowrap}
        .acc-chart-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:16px}
        .acc-chart-title{font-size:14px;font-weight:700;margin-bottom:10px;color:#333}
        .acc-chart-legend{display:flex;gap:16px;margin-bottom:10px;flex-wrap:wrap}
        .acc-chart-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:#666}
        .acc-chart-legend i{width:9px;height:9px;display:inline-block;border-radius:2px}
        .acc-two-col{display:grid;grid-template-columns:2fr 1fr;gap:14px}
        .acc-tva-cards{display:flex;flex-direction:column;gap:14px}
        .acc-doc-list{display:flex;flex-direction:column;gap:10px}
        .acc-doc-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 18px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
        .acc-doc-icon{width:38px;height:38px;border-radius:50%;background:#e8f0fe;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
        .acc-doc-name{font-weight:700;color:#222;flex:1}
        .acc-doc-actions{display:flex;gap:8px;align-items:center}
        @media(max-width:900px){
            .acc-two-col{grid-template-columns:1fr}
            .acc-kpi-val{font-size:24px}
        }
        @media(max-width:520px){
            .acc-doc-card{flex-wrap:wrap}
        }

        /* CALENDAR */
        .cal-wrap{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
        .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
        .cal-hdr{text-align:center;font-size:11px;font-weight:700;color:#999;padding:8px 0;text-transform:uppercase}
        .cal-day{border-radius:8px;padding:7px;min-height:76px;cursor:pointer;transition:border .15s;border:2px solid transparent;position:relative}
        .cal-day:hover{border-color:#1a73e8}
        .cal-day.empty{cursor:default;pointer-events:none}
        .cal-day.today{border-color:#1a73e8!important}
        .cal-day.weekend{background:#fafafa}
        .cal-day.ferie{background:#fff8e1}
        .cal-day.ferie .dn{color:#e65100!important}
        .cal-day .ferie-lbl{font-size:9px;color:#e65100;font-weight:700;line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .cal-day .dn{font-size:13px;font-weight:700;margin-bottom:3px}
        .cal-day .ds{font-size:10px;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:3px;font-weight:600}
        .cal-day .dt{font-size:10px;color:#888;margin-top:2px}

        /* STATUS COLORS */
        .bg-present{background:#e8f5e9}.s-present{background:#c8e6c9;color:#1b5e20}
        .bg-absent{background:#ffebee}.s-absent{background:#ffcdd2;color:#b71c1c}
        .bg-conge{background:#e3f2fd}.s-conge{background:#bbdefb;color:#0d47a1}
        .bg-maladie{background:#fff3e0}.s-maladie{background:#ffe0b2;color:#bf360c}
        .bg-teletravail{background:#f3e5f5}.s-teletravail{background:#e1bee7;color:#4a148c}
        .bg-ferie_travaille{background:#fff8e1}.s-ferie_travaille{background:#ffe082;color:#e65100}

        /* MODAL */
        .overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
        .modal{background:#fff;border-radius:14px;padding:26px;width:440px;max-width:100%}
        .modal h3{margin-bottom:18px;font-size:17px}
        .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
        .radio-grp{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
        .radio-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:2px solid #eee;cursor:pointer;transition:all .15s;font-size:14px}
        .radio-opt:hover{border-color:#1a73e8}
        .radio-opt.sel{border-color:#1a73e8;background:#e8f0fe}
        .radio-opt input{display:none}
        .time-row{display:flex;gap:10px;margin-bottom:12px}
        .time-row .fg{flex:1;margin-bottom:0}

        /* ADMIN TABS */
        .tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:2px solid #eee}
        .tab{padding:10px 20px;cursor:pointer;font-weight:700;color:#999;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;font-size:14px}
        .tab.active{color:#1a73e8;border-bottom-color:#1a73e8}

        /* TABLE */
        .tbl-wrap{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07)}
        table{width:100%;border-collapse:collapse}
        th{background:#f8f9fa;padding:11px 14px;text-align:left;font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.4px}
        td{padding:11px 14px;border-top:1px solid #f0f0f0;font-size:13px}
        tr:hover td{background:#f8faff}

        /* BADGES */
        .badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
        .badge-admin{background:#fce8e6;color:#c5221f}
        .badge-emp{background:#e8f0fe;color:#1a73e8}
        .badge-accountant{background:#fef3e0;color:#b26a00}

        /* EXPENSE NOTES */
        .expense-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
        .expense-panel{background:#fff;border-radius:14px;width:640px;max-width:100%;max-height:92vh;overflow-y:auto;padding:24px}
        .expense-form{background:#f8f9fa;border-radius:10px;padding:16px;margin-bottom:20px}
        .expense-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .expense-list{display:flex;flex-direction:column;gap:10px}
        .expense-card{background:#fff;border:1.5px solid #eee;border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px}
        .expense-card .exp-icon{font-size:28px;flex-shrink:0}
        .expense-card .exp-info{flex:1;min-width:0}
        .expense-card .exp-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .expense-card .exp-meta{font-size:11px;color:#888;margin-top:2px}
        .expense-card .exp-amount{font-size:18px;font-weight:800;color:#1a73e8;flex-shrink:0}
        .expense-card .exp-actions{display:flex;gap:6px;flex-shrink:0}
        .expense-empty{text-align:center;color:#bbb;padding:30px;font-size:14px}
        @media(max-width:600px){
            .expense-form .form-row{grid-template-columns:1fr}
            .expense-panel{padding:16px}
        }

        /* ANNONCES */
        .announce-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
        .announce{border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;border:1.5px solid}
        .announce-info{background:#e8f0fe;border-color:#c5d9f8;color:#1a56c4}
        .announce-warning{background:#fff8e1;border-color:#ffe082;color:#795500}
        .announce-urgent{background:#fce8e6;border-color:#f5c6c2;color:#c5221f}
        .announce .ann-icon{font-size:18px;flex-shrink:0}
        .announce .ann-msg{flex:1}
        .announce .ann-exp{font-size:11px;opacity:.7;margin-top:2px;font-weight:400}

        /* VALIDATED MONTH */
        .validated-banner{background:#e8f5e9;border:1.5px solid #a5d6a7;border-radius:10px;padding:10px 14px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#2e7d32;font-weight:600}
        .cal-day.locked{opacity:.6;cursor:default}
        .cal-day.locked:hover{border-color:transparent}

        /* TOAST */
        .toast{position:fixed;bottom:20px;right:20px;padding:12px 18px;border-radius:8px;background:#333;color:#fff;font-size:13px;z-index:400;animation:sIn .25s ease;box-shadow:0 4px 12px rgba(0,0,0,.2)}
        .toast.ok{background:#34a853}.toast.err{background:#ea4335}
        @keyframes sIn{from{transform:translateX(80px);opacity:0}to{transform:translateX(0);opacity:1}}

        /* UTILS */
        .hidden{display:none!important}
        .flex{display:flex}.gap8{gap:8px}.mt16{margin-top:16px}.mb16{margin-bottom:16px}
        .sec-title{font-size:17px;font-weight:700;margin-bottom:14px}

        @media(max-width:600px){
            /* Layout */
            .page{padding:10px}
            .login-card{width:calc(100% - 32px);padding:28px 20px}

            /* Header */
            .header{padding:8px 10px;gap:6px}
            .header-logo{font-size:15px}
            .header-user{display:none}
            .header-right{gap:4px}
            .btn-txt{display:none}
            .btn-sm{padding:8px 10px;font-size:16px;min-width:38px;text-align:center}

            /* Month nav */
            .month-nav h2{font-size:16px;min-width:140px}

            /* Summary cards — 3 colonnes fixes */
            .summary-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
            .s-card{padding:10px 4px}
            .s-card .val{font-size:19px}
            .s-card .lbl{font-size:8px}

            /* Calendar */
            .cal-wrap{padding:8px 4px}
            .cal-grid{gap:2px}
            .cal-hdr{font-size:9px;padding:5px 0}
            .cal-day{min-height:48px;padding:4px 3px;border-radius:6px;border-width:1.5px}
            .cal-day .dn{font-size:11px;margin-bottom:1px}
            .cal-day .ds{font-size:8px;padding:1px 3px;margin-top:2px}
            .cal-day .dt{display:none}
            .cal-day .ferie-lbl{display:none}

            /* Validated banner */
            .validated-banner{flex-direction:column;gap:8px;text-align:center}

            /* Tabs */
            .tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
            .tabs::-webkit-scrollbar{display:none}
            .tab{padding:9px 14px;font-size:13px}

            /* Tables */
            .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
            th,td{padding:8px 10px;font-size:12px;white-space:nowrap}

            /* Modals */
            .overlay{padding:10px;align-items:flex-end}
            .modal{width:100%;border-radius:14px 14px 0 0;padding:20px 16px;max-height:92vh;overflow-y:auto}
            .modal-actions{flex-wrap:wrap;gap:6px}
            .modal-actions .btn{flex:1;min-width:80px;text-align:center}

            /* Toast en haut sur mobile (clavier peut couvrir le bas) */
            .toast{bottom:auto;top:16px;right:12px;left:12px;text-align:center}
        }