@import url('variables.css');

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   GLOBAL
========================= */

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-normal);
    color:var(--text-color);
    background:var(--secondary-color);
}

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

/* =========================
   TITRES
========================= */

h1{
    font-size:var(--font-title);
    margin-bottom:24px;
}

h2{
    font-size:24px;
    margin-bottom:15px;
}

h3{
    font-size:20px;
}

/* =========================
   CONTAINERS
========================= */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   BOUTONS GLOBAUX
========================= */

.btn{
    display:inline-block;
    padding:12px 20px;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:0.3s;
}

.btn-primary{
    background:var(--primary-color);
    color:var(--white);
}

.btn-primary:hover{
    background:var(--primary-hover);
}

/* =========================
   FORMULAIRES GLOBAUX
========================= */

.form-group{
    margin-bottom:15px;
}

.form-group label{
    display:block;
    margin-bottom:5px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px;
    border:1px solid var(--border-color);
    border-radius:var(--radius);
}

.alert-success{
    background:#d1e7dd;
    color:#0f5132;
    border:1px solid #badbcc;
}


.alert{
    padding:12px;
    border-radius:var(--radius);
    margin-bottom:15px;
    font-size:var(--font-small);
}

.alert-danger{
    background:#f8d7da;
    color:#842029;
    border:1px solid #f5c2c7;
}


.table{
    width:100%;
    border-collapse:collapse;
    background:var(--white);
}

.table th,
.table td{
    padding:12px;
    border:1px solid var(--border-color);
    text-align:left;
}

.table th{
    background:var(--primary-color);
    color:var(--white);
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:20px;
}

.dashboard-card{
    background:var(--white);
    padding:20px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.dashboard-card h3{
    margin-bottom:10px;
    color:var(--text-light);
}

.dashboard-card p{
    font-size:32px;
    font-weight:bold;
    color:var(--primary-color);
}


@media print{
    .btn{
        display:none;
    }

    body{
        background:#ffffff;
    }

    .container{
        width:100%;
        max-width:100%;
    }
}



.app-header{
    background:var(--white);
    padding:15px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:var(--shadow);
    margin-bottom:30px;
}

.app-logo{
    font-size:22px;
    font-weight:bold;
    color:var(--primary-color);
}

.app-nav{
    display:flex;
    gap:20px;
}

.app-nav a{
    color:var(--text-color);
    font-weight:500;
}

.app-nav a:hover{
    color:var(--primary-color);
}

.app-header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.btn-small{
    padding:8px 12px;
    font-size:var(--font-small);
}

.app-footer{
    margin-top:40px;
    padding:20px;
    text-align:center;
    color:var(--text-light);
}

.login-logo{
    text-align:center;
    margin-bottom:20px;
}

.login-logo img{
    width:180px;
    max-width:100%;
    margin:auto;
}


/* =========================
   LAYOUT SIDEBAR
========================= */

.app-layout{
    min-height:100vh;
    display:flex;
}

.sidebar{
    width:250px;
    background:var(--primary-color);
    color:var(--white);

    display:flex;
    flex-direction:column;

    position:fixed;
    top:0;
    left:0;
    bottom:0;
}

.sidebar-logo{
    padding:20px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.2);
    font-weight:bold;
    border-bottom:1px solid rgba(255,255,255,0.2);
}

.sidebar-logo-image{
    width:140px;
    max-width:100%;
    margin:auto;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    padding:20px;
    gap:10px;
    margin-top:10px;
}

.sidebar-nav a{
    color:var(--white);
    padding:12px 15px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    gap:10px;
}

.sidebar-nav a:hover{
    background:rgba(255,255,255,0.15);
}

.sidebar-nav i{
    width:20px;
    text-align:center;
}

.sidebar-footer{
    padding:20px;
    border-top:1px solid rgba(255,255,255,0.2);
    margin-top:auto;
}

.sidebar-footer p{
    margin-bottom:10px;
    font-weight:bold;
}

.sidebar-footer a{
    color:var(--white);
    font-size:var(--font-small);
}

.main-content{
    margin-left:250px;
    width:calc(100% - 250px);
    padding:30px;
}

.page-header{
    margin-bottom:25px;
}

.page-header h1{
    margin-bottom:5px;
}

.page-header p{
    color:var(--text-light);
}


/* =========================
   BADGES
========================= */

.badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-draft{
    background:#e9ecef;
    color:#495057;
}

.badge-progress{
    background:#fff3cd;
    color:#856404;
}

.badge-submitted{
    background:#cfe2ff;
    color:#084298;
}

.badge-reviewed{
    background:#d1e7dd;
    color:#0f5132;
}

.badge-rejected{
    background:#f8d7da;
    color:#842029;
}

.btn-danger{
    background:#dc3545;
    color:#fff;
    border:none;
}

.btn-danger:hover{
    background:#bb2d3b;
}


.sidebar-nav a.active-menu{
    background:rgba(255,255,255,.20);

    border-left:4px solid #ffffff;

    font-weight:700;
}

.sidebar-nav a.active-menu i{
    transform:scale(1.1);
}
/* STE Africa — lisibilité et adaptation mobile */
body{line-height:1.55;color:#20334a;background:#f3f6fa}
button,input,select,textarea{font:inherit}button{line-height:1.3}
input,select,textarea{max-width:100%;background:#fff;color:#20334a}
textarea{resize:vertical;min-height:100px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.table-scroll:focus-visible{outline:3px solid #e0a627;outline-offset:3px}
.container{width:100%;max-width:1180px}
h1{font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-.5px}h2{font-size:24px}
.sidebar{overflow-y:auto;background:#183b5a}
.sidebar-nav{gap:4px}.sidebar-nav a{font-size:15px;min-height:46px}
.main-content{min-width:0;padding:40px}
.page-header{margin-bottom:30px}
.btn{border:1px solid #cbd5e1;background:#fff;color:#243c55;font-weight:600;min-height:44px;margin:3px 2px;vertical-align:middle}
.btn:hover{background:#edf2f8}.btn-primary{background:#1f4e79;color:#fff;border-color:#1f4e79}.btn-primary:hover{background:#163a5b}
.btn-danger{background:#b42332;color:#fff;border-color:#b42332}.btn-danger:hover{background:#881c29}
.inline-form{display:inline-block;margin:0;padding:0;border:0;box-shadow:none;background:none}
.form-group{margin-bottom:22px}.form-group label{font-weight:600;margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{padding:12px;min-height:46px}
.form-group:has(input[type=file])::after{content:'PDF, JPG ou PNG • 5 Mo maximum par fichier';display:block;color:#526579;font-size:13px;margin-top:6px}
.main-content .container>form:not(.inline-form){background:#fff;padding:28px;border:1px solid #dbe3ec;border-radius:16px}
.table-scroll{overflow-x:auto;border:1px solid #dbe3ec;border-radius:12px;margin:16px 0;background:white}
.table th,.table td{border:0;border-bottom:1px solid #e4eaf0;padding:14px 16px;vertical-align:top}
.table th{background:#e8eef5;color:#243c55;font-size:14px}.table tbody tr:nth-child(even){background:#f8fafc}.table td{overflow-wrap:anywhere}
.table td .btn{font-size:14px;padding:9px 13px}.table td a:not(.btn){color:#1f4e79;text-decoration:underline;text-underline-offset:3px}
.table-search{display:block;max-width:460px;font-weight:600;margin:20px 0 5px}.table-search input{display:block;width:100%;padding:11px 14px;margin-top:8px;border:1px solid #cbd5e1;border-radius:10px}.table-count{font-size:14px;color:#526579}
.dashboard-card{border:1px solid #dbe3ec;box-shadow:none;border-radius:16px;padding:24px}.dashboard-card h3{font-size:15px}.dashboard-card p{font-size:36px}
.alert{font-size:15px;padding:15px 18px}.alert-warning{background:#fff3cd;color:#664d03;border:1px solid #e7cc7d}
.skip-link{position:absolute;left:12px;top:-100px;background:#fff;padding:12px;z-index:10}.skip-link:focus{top:12px}
@media(max-width:850px){.app-layout{display:block}.sidebar{position:static;width:100%;height:auto}.sidebar-logo{padding:16px}.sidebar-logo-image{width:110px}.sidebar-nav{display:flex;flex-direction:row;flex-wrap:wrap;padding:12px;margin:0;gap:6px}.sidebar-nav a{padding:10px 12px;flex:1 1 auto;justify-content:center}.sidebar-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px}.sidebar-footer p{margin:0}.main-content{margin:0;width:100%;padding:24px 16px}.main-content .container>form:not(.inline-form){padding:20px 16px}.table{min-width:620px}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dashboard-card{padding:16px}.dashboard-card h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.sidebar,.skip-link,.table-search,.table-count,.alert,.inline-form{display:none!important}.app-layout{display:block}.main-content{margin:0;width:100%;padding:0}.table-scroll{overflow:visible;border:0}.table{min-width:0;width:100%;font-size:10pt}.table th,.table td{padding:7px;border:1px solid #bbb}.table tr{break-inside:avoid}thead{display:table-header-group}h1,h2{break-after:avoid}}