/*==========================================
            ADMINISTRATION
==========================================*/

:root{

    --admin-bg:#f3f3f1;
    --admin-card:#ffffff;
    --admin-border:#ddddda;

    --admin-text:#222222;
    --admin-text2:#666666;

    --admin-dark:#111111;
    --admin-dark2:#1b222c;

    --admin-orange:#ff7a00;

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--admin-bg);

    color:var(--admin-text);

    font-family:Arial,Helvetica,sans-serif;

    min-height:100vh;

}


/*==========================================
            TOPBAR
==========================================*/

.admin-topbar{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:75px;

    background:#111;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    border-bottom:1px solid #2b313c;

    z-index:1000;

}

.admin-logo{

    display:flex;

    align-items:center;

    gap:15px;

    color:#fff;

    text-decoration:none;

}

.admin-logo img{

    width:45px;

    height:45px;

    object-fit:contain;

}

.admin-logo span{

    font-size:20px;

    font-weight:700;

    color:var(--admin-orange);

}

.admin-user{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-weight:600;

}

.admin-user i{

    color:var(--admin-orange);

}


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

.admin-sidebar{

    position:fixed;

    top:75px;

    left:0;

    width:270px;

    height:calc(100vh - 75px);

    background:#111;

    border-right:1px solid #2b313c;

    overflow-y:auto;

    z-index:999;

}

.sidebar-header{

    padding:30px;

    text-align:center;

}

.sidebar-header img{

    width:90px;

    margin-bottom:15px;

}

.sidebar-header h3{

    color:var(--admin-orange);

}

.admin-sidebar ul{

    list-style:none;

}

.admin-sidebar ul li{

    margin:8px 15px;

}

.admin-sidebar ul li a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    border-radius:15px;

    text-decoration:none;

    color:#ddd;

    transition:.35s;

}

.admin-sidebar ul li a:hover{

    background:rgba(255,122,0,.12);

    color:#fff;

}

.admin-sidebar ul li a i{

    width:25px;

    text-align:center;

    color:var(--admin-orange);

}

.logout{

    color:#ff4d4d !important;

}


/*==========================================
            CONTENU PRINCIPAL
==========================================*/

.admin-content{

    margin-left:270px;

    margin-top:75px;

    padding:40px;

    background:var(--admin-bg);

    min-height:calc(100vh - 75px);

}

.page-header{

    margin-bottom:40px;

}

.page-header h1{

    margin-bottom:10px;

    color:var(--admin-orange);

}

.page-header p{

    color:var(--admin-text2);

}

/*==========================================
            CARTES DASHBOARD
==========================================*/

.dashboard-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(230px,1fr));

    gap:25px;

}

.dashboard-card{

    background:var(--admin-card);

    border:1px solid var(--admin-border);

    border-radius:20px;

    padding:30px;

    text-align:center;

    color:var(--admin-text);

    transition:.35s;

}

.dashboard-card:hover{

    transform:translateY(-5px);

    border-color:var(--admin-orange);

    box-shadow:0 8px 25px rgba(0,0,0,.07);

}

.dashboard-card i{

    font-size:42px;

    color:var(--admin-orange);

    margin-bottom:20px;

}

.dashboard-card h2{

    font-size:38px;

    margin-bottom:10px;

    color:#222;

}

.dashboard-card p{

    color:var(--admin-text2);

    margin-bottom:20px;

}

.dashboard-card a{

    display:inline-block;

    padding:10px 25px;

    border-radius:30px;

    background:var(--admin-orange);

    color:#fff;

    text-decoration:none;

}


/*==========================================
            SECTIONS
==========================================*/

.dashboard-section{

    margin-top:50px;

    background:var(--admin-card);

    border:1px solid var(--admin-border);

    border-radius:20px;

    padding:30px;

    color:var(--admin-text);

    box-shadow:0 3px 15px rgba(0,0,0,.03);

}

.dashboard-section h2{

    margin-bottom:25px;

    color:var(--admin-orange);

}


/*==========================================
            RACCOURCIS
==========================================*/

.quick-links{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.quick-links a{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:#222;

    background:#fff;

    border:1px solid var(--admin-border);

    border-radius:15px;

    padding:20px;

    transition:.35s;

}

.quick-links a:hover{

    transform:translateY(-5px);

    border-color:var(--admin-orange);

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.quick-links a i{

    font-size:28px;

    color:var(--admin-orange);

}


/*==========================================
            TABLEAUX
==========================================*/

.table-responsive{

    overflow-x:auto;

}

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

    background:#fff;

}

table th{

    background:#f0f0ed;

    color:#222;

    padding:18px;

    text-align:left;

    font-weight:700;

    border-bottom:2px solid var(--admin-border);

}

table td{

    padding:16px;

    border-bottom:1px solid var(--admin-border);

    color:#333;

    vertical-align:middle;

}

table tr:hover{

    background:#fff8f1;

}


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

.badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:#2e7d32;

    color:#fff;

}

.badge-warning{

    background:#ff9800;

    color:#fff;

}

.badge-danger{

    background:#d32f2f;

    color:#fff;

}

.badge-info{

    background:#1565c0;

    color:#fff;

}


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

.form-group{

    margin-bottom:25px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#222;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:15px 18px;

    border-radius:12px;

    border:1px solid #cccccc;

    background:#fff;

    color:#222;

    outline:none;

    transition:.35s;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#999;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:var(--admin-orange);

    box-shadow:

        0 0 15px

        rgba(255,122,0,.15);

}

.form-group input[type="file"]{

    padding:12px;

    cursor:pointer;

}

.form-group input[readonly]{

    background:#eeeeeb;

    color:#666;

    cursor:not-allowed;

}


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

.admin-content h1,

.admin-content h2,

.admin-content h3{

    color:var(--admin-orange);

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 25px;

    border:none;

    border-radius:12px;

    background:var(--admin-orange);

    color:#fff;

    cursor:pointer;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

    opacity:.95;

}

.btn-danger{

    background:#d32f2f;

}

.btn-success{

    background:#2e7d32;

}

.btn-info{

    background:#1565c0;

}


/*==========================================
            ALERTES
==========================================*/

.alert-success{

    padding:18px;

    border-radius:12px;

    background:#e8f5e9;

    color:#1b5e20;

    border:1px solid #a5d6a7;

    margin-bottom:25px;

}

.alert-danger{

    padding:18px;

    border-radius:12px;

    background:#ffebee;

    color:#b71c1c;

    border:1px solid #ef9a9a;

    margin-bottom:25px;

}


/*==========================================
            TABLEAUX DE DÉTAILS
==========================================*/

.table-details{

    width:100%;

}

.table-details th{

    width:250px;

    background:#f0f0ed;

    color:#222;

}

.table-details td{

    background:#fff;

    color:#333;

}


/*==========================================
            FOOTER
==========================================*/

.admin-footer{

    margin-left:270px;

    margin-top:0;

    text-align:center;

    color:#666;

    background:var(--admin-bg);

    padding:30px;

    border-top:1px solid var(--admin-border);

}

.admin-footer p{

    color:#666;

}


/*==========================================
            SCROLLBAR SIDEBAR
==========================================*/

.admin-sidebar::-webkit-scrollbar{

    width:6px;

}

.admin-sidebar::-webkit-scrollbar-track{

    background:#111;

}

.admin-sidebar::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:10px;

}

.admin-sidebar::-webkit-scrollbar-thumb:hover{

    background:var(--admin-orange);

}


/*==========================================
            RESPONSIVE
==========================================*/

@media(max-width:992px){

    .admin-sidebar{

        width:90px;

    }

    .admin-sidebar h3,

    .admin-sidebar a span{

        display:none;

    }

    .admin-content{

        margin-left:90px;

    }

    .admin-footer{

        margin-left:90px;

    }

}


@media(max-width:768px){

    .admin-topbar{

        padding:0 20px;

    }

    .admin-logo span{

        display:none;

    }

    .admin-sidebar{

        display:none;

    }

    .admin-content{

        margin-left:0;

        padding:25px;

    }

    .admin-footer{

        margin-left:0;

    }

    .dashboard-grid,

    .quick-links{

        grid-template-columns:1fr;

    }

    .page-header{

        margin-bottom:25px;

    }

    .dashboard-section{

        padding:20px;

    }

    table{

        min-width:700px;

    }

}


@media(max-width:480px){

    .admin-content{

        padding:18px;

    }

    .admin-topbar{

        height:65px;

    }

    .admin-sidebar{

        top:65px;

        height:calc(100vh - 65px);

    }

    .admin-content{

        margin-top:65px;

    }

    .dashboard-card{

        padding:22px;

    }

    .btn{

        width:100%;

    }

}

/*==========================================
        CARTES FORMATIONS
==========================================*/

.formations-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.formation-admin-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.formation-admin-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.formation-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.formation-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,122,0,.12);

    color:#ff7a00;

    font-size:28px;

}

.formation-card-header h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:21px;

}

.formation-id{

    color:#999;

    font-size:13px;

}

.formation-card-body{

    padding:25px;

}

.formation-description{

    color:#d0d4d8;

    line-height:1.7;

    min-height:80px;

}

.formation-infos{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.formation-infos div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#ddd;

}

.formation-infos i{

    color:#ff7a00;

}

.formation-infos strong{

    color:#fff;

}

.formation-formateur{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:22px;

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.formation-formateur img,

.formateur-placeholder{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

}

.formateur-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#252b33;

    color:#ff7a00;

    font-size:20px;

}

.formation-formateur div:last-child{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.formation-formateur small{

    color:#999;

}

.formation-formateur strong{

    color:#fff;

}

.formation-card-footer{

    display:flex;

    gap:10px;

    padding:20px 25px;

    border-top:1px solid #2b313c;

    flex-wrap:wrap;

}

.formation-card-footer .btn{

    flex:1;

    min-width:110px;

}

@media(max-width:600px){

    .formations-grid{

        grid-template-columns:1fr;

    }

    .formation-card-footer{

        flex-direction:column;

    }

    .formation-card-footer .btn{

        width:100%;

    }

}

/*==========================================
        CARTES APPRENANTS
==========================================*/

.apprenants-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.apprenant-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.apprenant-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.apprenant-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.apprenant-photo,
.apprenant-photo-placeholder{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

.apprenant-photo-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#252b33;

    color:#ff7a00;

    font-size:28px;

}

.apprenant-identite h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:20px;

}

.apprenant-identite span{

    color:#999;

    font-size:13px;

}

.apprenant-body{

    padding:25px;

}

.apprenant-info{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:#ddd;

    word-break:break-word;

}

.apprenant-info i{

    color:#ff7a00;

    width:20px;

}

.apprenant-progression{

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.progression-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:#ddd;

}

.progression-top strong{

    color:#ff7a00;

}

.progression-bar{

    height:8px;

    background:#292f38;

    border-radius:20px;

    overflow:hidden;

}

.progression-bar span{

    display:block;

    height:100%;

    background:#ff7a00;

    border-radius:20px;

}

.apprenant-footer{

    display:flex;

    gap:10px;

    padding:20px 25px;

    border-top:1px solid #2b313c;

}

.apprenant-footer .btn{

    flex:1;

}

.empty-state{

    text-align:center;

    padding:60px 30px;

}

.empty-state > i{

    font-size:50px;

    color:#ff7a00;

    margin-bottom:20px;

}

.empty-state h2{

    margin-bottom:10px;

}

.empty-state p{

    color:#666;

}

@media(max-width:600px){

    .apprenants-grid{

        grid-template-columns:1fr;

    }

    .apprenant-footer{

        flex-direction:column;

    }

    .apprenant-footer .btn{

        width:100%;

    }

}

/*==========================================
        CARTES INSCRIPTIONS
==========================================*/

.inscriptions-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.inscription-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.inscription-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.inscription-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.inscription-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,122,0,.12);

    color:#ff7a00;

    font-size:25px;

    flex-shrink:0;

}

.inscription-card-header h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:20px;

}

.inscription-card-header span{

    color:#999;

    font-size:13px;

}

.inscription-card-body{

    padding:25px;

}

.inscription-info{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}

.inscription-info > i{

    width:22px;

    color:#ff7a00;

    font-size:18px;

}

.inscription-info div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.inscription-info small{

    color:#999;

}

.inscription-info strong{

    color:#fff;

    font-weight:600;

}

.inscription-status{

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.inscription-card-footer{

    padding:20px 25px;

    border-top:1px solid #2b313c;

}

.inscription-card-footer .btn{

    width:100%;

}

@media(max-width:600px){

    .inscriptions-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================
        CARTES PAIEMENTS
==========================================*/

.paiements-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.paiement-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.paiement-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.paiement-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.paiement-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,122,0,.12);

    color:#ff7a00;

    font-size:25px;

    flex-shrink:0;

}

.paiement-card-header h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:20px;

}

.paiement-card-header span{

    color:#999;

    font-size:13px;

}

.paiement-card-body{

    padding:25px;

}

.paiement-info{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}

.paiement-info > i{

    width:22px;

    color:#ff7a00;

    font-size:18px;

}

.paiement-info div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.paiement-info small{

    color:#999;

}

.paiement-info strong{

    color:#fff;

    font-weight:600;

    word-break:break-word;

}

.paiement-status{

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.paiement-card-footer{

    padding:20px 25px;

    border-top:1px solid #2b313c;

}

.paiement-card-footer .btn{

    width:100%;

}

@media(max-width:600px){

    .paiements-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================
            CARTES MESSAGES
==========================================*/

.messages-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.message-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.message-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.message-card.message-non-lu{

    border-left:4px solid #ff7a00;

}

.message-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.message-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,122,0,.12);

    color:#ff7a00;

    font-size:25px;

    flex-shrink:0;

}

.message-card-header h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:20px;

}

.message-card-header span{

    color:#999;

    font-size:13px;

}

.message-card-body{

    padding:25px;

}

.message-info{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.message-info > i{

    width:22px;

    color:#ff7a00;

}

.message-info div{

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;

}

.message-info small{

    color:#999;

}

.message-info strong{

    color:#fff;

    word-break:break-word;

}

.message-preview{

    margin-top:20px;

    padding:18px;

    background:#1d232b;

    border-radius:12px;

    color:#cfd3d8;

    line-height:1.6;

}

.message-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.message-meta > span:first-child{

    color:#999;

    font-size:13px;

}

.message-meta i{

    color:#ff7a00;

    margin-right:5px;

}

.message-card-footer{

    display:flex;

    gap:10px;

    padding:20px 25px;

    border-top:1px solid #2b313c;

}

.message-card-footer .btn{

    flex:1;

}

@media(max-width:600px){

    .messages-grid{

        grid-template-columns:1fr;

    }

    .message-card-footer{

        flex-direction:column;

    }

    .message-card-footer .btn{

        width:100%;

    }

}

/*==========================================
        CARTES NOTIFICATIONS
==========================================*/

.notifications-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.notification-card{

    background:#161b22;

    border:1px solid #2b313c;

    border-radius:20px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

}

.notification-card:hover{

    transform:translateY(-6px);

    border-color:#ff7a00;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.notification-card.notification-non-lue{

    border-left:4px solid #ff7a00;

}

.notification-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-bottom:1px solid #2b313c;

}

.notification-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,122,0,.12);

    color:#ff7a00;

    font-size:25px;

    flex-shrink:0;

}

.notification-card-header h2{

    margin:0 0 6px;

    color:#ff7a00;

    font-size:20px;

}

.notification-card-header span{

    color:#999;

    font-size:13px;

}

.notification-card-body{

    padding:25px;

}

.notification-info{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}

.notification-info > i{

    width:22px;

    color:#ff7a00;

}

.notification-info div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.notification-info small{

    color:#999;

}

.notification-info strong{

    color:#fff;

}

.notification-message{

    padding:18px;

    background:#1d232b;

    border-radius:12px;

    color:#cfd3d8;

    line-height:1.7;

}

.notification-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #2b313c;

}

.notification-meta span:first-child{

    color:#999;

    font-size:13px;

}

.notification-meta i{

    color:#ff7a00;

    margin-right:5px;

}

.notification-card-footer{

    display:flex;

    gap:10px;

    padding:20px 25px;

    border-top:1px solid #2b313c;

}

.notification-card-footer .btn{

    flex:1;

}

@media(max-width:600px){

    .notifications-grid{

        grid-template-columns:1fr;

    }

    .notification-card-footer{

        flex-direction:column;

    }

    .notification-card-footer .btn{

        width:100%;

    }

}