.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:30px;
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;
font-size:17px;
margin-top:0px;
margin-bottom:-2px;
} .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:15px;
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:10px;
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:10px;
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;
}