.ks-container{
    display:flex;
    gap:20px;
    min-height:350px;
    padding:20px;
    border-radius:0px;
}

.ks-menu{
    width:300px;

    max-height:330px;

    overflow-y:auto;

    display:flex;
    flex-direction:column;
    gap:12px;

    padding-right:8px;
}

.ks-button{
    font-family: "Nunito", "Aptos", "Segoe UI", Arial, sans-serif;
    background:#ffffff;
    color:#1f497d;
    border:none;
    border-radius:14px;
    padding:15px 20px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;

    text-align:left;
    display:flex;
    align-items:center;
}
.ks-button:hover{
    background:#FFD54F;
    color:#000;
    transform:translateX(4px);
}

.ks-detail{
    flex:1;
    display:flex;
    align-items:stretch;
}

.ks-fiche{
    display:none;
    width:100%;
    height:100%;
}

.ks-titre{
    font-family: "Nunito", "Aptos", "Segoe UI", Arial, sans-serif;
    color:#ffffff;
    font-size:34px;
    font-weight:500;
    margin-bottom:20px;

    text-align:center;
}

.ks-contenu{
    font-family: "Nunito", "Aptos", "Segoe UI", Arial, sans-serif;
    background:#ffffff;
    border-radius:25px;
    padding:20px;
    height:calc(100% - 70px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}


.ks-fiche h2{
    font-family: "Nunito", "Aptos", "Segoe UI", Arial, sans-serif;
    text-align:center;
    color:#1F497D;
    font-size:10px;
    margin-bottom:30px;
}

.ks-fiche h3{
        font-family: "Nunito", "Aptos", "Segoe UI", Arial, sans-serif;
color:#4A90E2;
    margin-top:0px;
}

/* THEMES */

.theme-cpe{
    background:linear-gradient(135deg,#012a4a,#014f86,#61a5c2);
}

.theme-bleu{
    background:linear-gradient(135deg,#0D47A1,#42A5F5);
}

.theme-vert{
    background:linear-gradient(135deg,#2E7D32,#66BB6A);
}

.theme-orange{
    background:linear-gradient(135deg,#EF6C00,#FFA726);
}

.theme-rouge{
    background:linear-gradient(135deg,#B71C1C,#EF5350);
}

.theme-violet{
    background:linear-gradient(135deg,#6A1B9A,#BA68C8);
}

.ks-menu::-webkit-scrollbar{
    width:10px;
}

.ks-menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.20);
    border-radius:20px;
}

.ks-menu::-webkit-scrollbar-thumb{
    background:#FFD54F;
    border-radius:20px;
    border:2px solid rgba(255,255,255,0.30);
}

.ks-menu::-webkit-scrollbar-thumb:hover{
    background:#FFC107;
}

.ks-responsable{

    color:#000000;

    font-size:18px;

    font-weight:600;

    margin-bottom:5px;
}

.ks-description{
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;

    color:#333333;

    font-size:15px;

    line-height:1.8;

    text-align:justify;
}

@media (max-width:768px){

    .ks-menu{

        height:180px;

        max-height:180px;
    }

    .ks-button{

        min-height:55px;

        padding:10px 15px;

        font-size:14px;

        border-radius:12px;
    }

    .ks-titre{

        font-size:22px;

        margin-bottom:8px;
    }

    .ks-fiche h3{

        font-size:15px;

        margin-top:10px;

        margin-bottom:5px;
    }

    .ks-responsable{

        font-size:14px;
    }

    .ks-description{

        font-size:13px;

        line-height:1.5;
    }

    .ks-contenu{

        padding:15px;
    }

}

@media (max-width:768px){

    .ks-menu::-webkit-scrollbar{
        width:6px;
    }

    .ks-button{
        font-weight:600;
    }

}

@media (max-width:768px){

    .ks-container{
        flex-direction:column !important;
    }

    .ks-menu{
        width:100% !important;

        height:180px;

        max-height:180px;

        overflow-y:auto;

        overflow-x:hidden;

        flex-direction:column;

        gap:8px;
    }

    .ks-detail{
        width:100%;
        display:block;
    }

    .ks-fiche{
        width:100%;
    }

.ks-button{

    min-height:45px;

    padding:8px 12px;

    font-size:13px;

    border-radius:10px;
}

 .ks-titre{

    font-size:18px;

    font-weight:700;

    margin-top:5px;

    margin-bottom:8px;
}


    .ks-contenu{

        padding:15px;
    }

    .ks-fiche h3{

        font-size:16px;

        margin-top:10px;

        margin-bottom:5px;
    }

    .ks-responsable{

        font-size:15px;
    }

    .ks-description{

        font-size:14px;

        line-height:1.5;
    }

}

@media (max-width:768px){

    .ks-contenu{

        min-height:270px;

        padding:15px 14px;
    }

    .ks-fiche h3{

        font-size:14px;

        margin-top:6px;

        margin-bottom:4px;
    }

    .ks-responsable{

        font-size:14px;

        margin-top:-15px;

        margin-bottom:0px;
    }

    .ks-description{

        font-size:13px;

        line-height:1.35;

        margin-top:-10px;
    }

    .ks-contenu p{

        margin-bottom:8px;
    }

}

.ks-admin-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.ks-admin-table th,
.ks-admin-table td{
    padding:12px;
    border:1px solid #ddd;
}

.ks-btn-save{
    background:#e52424;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
}

.ks-btn-edit{
    background:#2563eb;
    color:white;
    padding:8px 15px;
    text-decoration:none;
    border-radius:8px;
    margin-right:8px;
}

.ks-btn-delete{
    background:#e52424;
    color:white;
    padding:8px 15px;
    text-decoration:none;
    border-radius:8px;
}

.ks-admin-front input,
.ks-admin-front textarea{
    width:100%;
    padding:10px;
    margin-bottom:10px;
}

.ks-admin-front textarea{
    min-height:120px;
}