/** 
 * SIMPLESL v1.0.4 - style.css
 * Base CSS centralisé pour SimpleSL (hd, mn, mnl, mnr, ct, ft)
 * © joyz.pro 2025
 *
 * Remarque : Les styles de navigation utilisent désormais des <ol>
 */
/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{font-family:sans-serif;background:#f7f9fa;color:#222;min-height:100vh;padding-bottom: 60px;}
/* HEADER */
.hd,header.hd{
background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);
color:#fff;
max-width: 98%;
margin:0 auto 2px;
box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.hd h1,.hd h2{margin:0;color:#ecf0f1;text-shadow:0 1px 2px rgba(0,0,0,0.2);}
.hd .site-title{font-size:1.5rem;font-weight:700;}
.hd img{height:64px;width:auto;border-radius:4px;vertical-align:middle;margin:9px 15px;border:solid 1px #313538;box-shadow: 0 2px 2px rgba(248, 246, 246, 0.945);}
/* NAVIGATION */
.mn,nav.mn{
display:block;
background:#333;
font-size:0;
border:solid 1px #0056b3;
border-radius:4px;
max-width: 96%;
max-height: 48px;
margin:0 auto 2px;
}
.mn ol{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.mn li{
position:relative;
}
.mn a,
.mn label{
display:block;
padding:0.75em 1em;
font-size:1rem;
color:#fff;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
transition:background 0.2s;
}
.mn a:hover,
.mn a:focus,
.mn label:hover{
background:#444;
}
.mn ol ol{
position:absolute;
top:100%;
left:0;
display:none;
background:#444;
min-width:150px;
z-index:10;
}
.mn ol ol li{
width:100%;
}
.mn ol ol a{
padding:0.5em 1em;
font-size:0.95rem;
}
.mn li:hover > ol,
.mn li:focus-within > ol{
display:block;
}
.mn > ol > li > label::after{
content:' ▼';
font-size:0.7em;
margin-left:0.3em;
}
.mn > ol > li:not(:hover) > label::after{
opacity:0.5;
}
@media(max-width:600px){
.mn ol{
flex-direction:column;
align-items:stretch;
}
.mn ol ol{
position:static;
}
}
/* MAIN CONTENT */
.ct,main.ct{
display:flex;
width:96%;
align-items:flex-start;
gap:10px;
padding:10px 0;
margin:0 auto;
justify-content:space-evenly;
}
section,article{
flex:1;
border:1px solid #e0e0e0;
max-width:98%;
margin:0.5em 0;
background:#fff;
border-radius:6px;
box-shadow:0 1px 3px rgba(0,0,0,0.04);
padding:1.2em;
}
.ct>section[id]{display:none;}
/* Affichage conditionnel par id (exemple) */
#nav_home:checked~main.ct section#home,
#nav_main:checked~main.ct section#main,
#nav_about:checked~main.ct section#about,
#nav_contact:checked~main.ct section#contact{display:block;}

/* MENUS ASIDE */
/* .mnl (menu latéral gauche) */
.mnl,
aside.mnl
{
order:0;
min-width:250px;
max-width:280px;
background:#f8f9fa;
border:1px solid #dee2e6;
border-radius:4px;
padding:1rem;
margin:0.5rem 1.5rem 0.5rem 0; /* marge à droite pour coller à gauche */
box-shadow:0 2px 4px rgba(0,0,0,0.08);
overflow-y:auto;
max-height:calc(100vh - 2rem);
float:left; /* affiche à gauche */
clear:left;
}
.mnl h3
{
color:#2c3e50;
font-size:1.1rem;
font-weight:700;
margin:0 0 1rem 0;
padding:0.75rem 0;
border-bottom:3px solid #007bff;
}
.mnl h4
{
color:#34495e;
font-size:0.95rem;
font-weight:600;
margin:1rem 0 0.75rem 0;
padding:0.5rem 0 0.5rem 0.75rem;
border-left:3px solid #007bff;
}
.mnl p
{
color:#5a6c7d;
margin:0.75rem 0;
font-size:0.9rem;
line-height:1.6;
padding:0.5rem;
background:rgba(255,255,255,0.7);
border-radius:4px;
border-left:2px solid #007bff;
}
.mnl ol
{
list-style:none;
padding:0;
margin:0.75rem 0;
background:rgba(255,255,255,0.5);
border-radius:6px;
border:1px solid rgba(0,123,255,0.1);
}
.mnl li
{
padding:0.6rem 0.75rem;
border-bottom:1px solid rgba(0,123,255,0.1);
}
.mnl li:last-child
{
border-bottom:none;
}
.mnl a
{
color:#2c3e50;
text-decoration:none;
font-size:0.9rem;
font-weight:500;
display:block;
padding:0.25rem 0;
}

/* .mnr (menu latéral droit) */
.mnr,
aside.mnr
{
order:1;
width:190px;
background:#f8f9fa;
border:1px solid #dee2e6;
border-radius:4px;
padding:1rem;
margin:0.5rem 0 0.5rem 1.5rem; /* marge à gauche pour coller à droite */
box-shadow:0 2px 4px rgba(0,0,0,0.08);
float:right; /* affiche à droite */
clear:right;
}
.mnr h3
{
color:#2c3e50;
font-size:1.1rem;
font-weight:700;
margin:0 0 1rem 0;
padding:0.75rem 0;
border-bottom:3px solid #28a745;
}
.mnr h4
{
color:#34495e;
font-size:0.95rem;
font-weight:600;
margin:1rem 0 0.75rem 0;
padding:0.5rem 0 0.5rem 0.75rem;
border-left:3px solid #28a745;
}
.mnr p
{
color:#5a6c7d;
margin:0.75rem 0;
font-size:0.9rem;
line-height:1.6;
padding:0.5rem;
background:rgba(255,255,255,0.7);
border-radius:4px;
border-left:2px solid #28a745;
}
.mnr ol
{
list-style:none;
padding:0;
margin:0.75rem 0;
background:rgba(255,255,255,0.5);
border-radius:6px;
border:1px solid rgba(40,167,69,0.1);
}
.mnr li
{
padding:0.6rem 0.75rem;
border-bottom:1px solid rgba(40,167,69,0.1);
font-size:0.85rem;
}
.mnr li:last-child
{
border-bottom:none;
}
.mnr a
{
color:#2c3e50;
text-decoration:none;
font-size:0.9rem;
font-weight:500;
display:block;
padding:0.25rem 0;
}
.mnl,aside.mnl{
order:0;
min-width:250px;
max-width:280px;
background:#f8f9fa;
border:1px solid #dee2e6;
border-radius:4px;
padding:1rem;
margin:0.5rem;
box-shadow:0 2px 4px rgba(0,0,0,0.08);
overflow-y:auto;
max-height:calc(100vh - 2rem);
}
.mnl h3{color:#2c3e50;font-size:1.1rem;font-weight:700;margin:0 0 1rem 0;padding:0.75rem 0;border-bottom:3px solid #007bff;}
.mnl h4{color:#34495e;font-size:0.95rem;font-weight:600;margin:1rem 0 0.75rem 0;padding:0.5rem 0 0.5rem 0.75rem;border-left:3px solid #007bff;}
.mnl p{color:#5a6c7d;margin:0.75rem 0;font-size:0.9rem;line-height:1.6;padding:0.5rem;background:rgba(255,255,255,0.7);border-radius:4px;border-left:2px solid #007bff;}
.mnl ol{list-style:none;padding:0;margin:0.75rem 0;background:rgba(255,255,255,0.5);border-radius:6px;border:1px solid rgba(0,123,255,0.1);}
.mnl li{padding:0.6rem 0.75rem;border-bottom:1px solid rgba(0,123,255,0.1);}
.mnl li:last-child{border-bottom:none;}
.mnl a{color:#2c3e50;text-decoration:none;font-size:0.9rem;font-weight:500;display:block;padding:0.25rem 0;}

.mnr,aside.mnr{
    order:1;
    width: 190px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.mnr h3{color:#2c3e50;font-size:1.1rem;font-weight:700;margin:0 0 1rem 0;padding:0.75rem 0;border-bottom:3px solid #28a745;}
.mnr h4{color:#34495e;font-size:0.95rem;font-weight:600;margin:1rem 0 0.75rem 0;padding:0.5rem 0 0.5rem 0.75rem;border-left:3px solid #28a745;}
.mnr p{color:#5a6c7d;margin:0.75rem 0;font-size:0.9rem;line-height:1.6;padding:0.5rem;background:rgba(255,255,255,0.7);border-radius:4px;border-left:2px solid #28a745;}
.mnr ol{list-style:none;padding:0;margin:0.75rem 0;background:rgba(255,255,255,0.5);border-radius:6px;border:1px solid rgba(40,167,69,0.1);}
.mnr li{padding:0.6rem 0.75rem;border-bottom:1px solid rgba(40,167,69,0.1);font-size:0.85rem;}
.mnr li:last-child{border-bottom:none;}
.mnr a{color:#2c3e50;text-decoration:none;font-size:0.9rem;font-weight:500;display:block;padding:0.25rem 0;}

/* FOOTER */
.ft,footer.ft{
    background-color:#f0f0f0;
    color:#222;
    padding:1rem 0.5rem;
    text-align:center;
    font-size:0.95rem;
    border-radius:0;
position: fixed;
bottom: 0;
left: 0;
width: 100%; /* ou une largeur spécifique */
padding: 10px; /* Exemple de padding */
}
.ft a{color:#fff;text-decoration:underline;}
.ft a:hover{color:#ffd700;}

/* TABLES */
table{width:100%;border-collapse:collapse;margin:1em 0;}
th,td{padding:0.6em 0.8em;border-bottom:1px solid #e0e0e0;text-align:left;}
th{background:#f0f0f0;font-weight:600;}
tr:nth-child(even){background:#fafbfc;}
tr:hover{background:#f5f7fa;}

/* FORMULAIRES */
form{margin:1em 0;}
input,select,textarea,button{
font-family:inherit;
font-size:1rem;
padding:0.5em 0.7em;
border:1px solid #ccc;
border-radius:4px;
background:#fff;
margin-bottom:0.7em;
}
input:focus,select:focus,textarea:focus{outline:2px solid #007bff;}
button{background:#007bff;color:#fff;border:none;cursor:pointer;}
button:hover{background:#0056b3;}

/* ADMIN */
.admin-kpis{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 margin:1rem 0;
}
.admin-layout{ display:flex; width:100%; align-items:flex-start; gap:10px; }
.admin-menu{ flex:0 0 220px; }
.admin-main{ flex:1; min-width:0; }
.manage-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:10px;
}
.manage-block{
 background:#fff;
 border:1px solid #e0e0e0;
 border-radius:6px;
 padding:0.8rem;
}
.manage-block h3{ margin:0 0 0.5rem 0; }
.admin-kpis .kpi{
 background:#f8f9fa;
 border:1px solid #e0e0e0;
 border-radius:6px;
 padding:0.8rem 1rem;
 min-width:130px;
}
.admin-kpis .kpi .val{ font-size:1.3rem; font-weight:700; margin-top:0.3rem;}
.panel{ margin:1rem 0; padding:1rem; background:#fff; border:1px solid #e0e0e0; border-radius:6px;}
.panel .list{ list-style:none; padding:0; margin:0.5rem 0 0 0;}
.panel .list li{ padding:0.4rem 0.2rem; border-bottom:1px solid #f0f0f0;}
.panel .list li:last-child{ border-bottom:none;}
.admin-logout{ float:right; margin:0 0 1rem 1rem;}
/* ADMIN DARK LAYOUT (UXPilot-like) */
.uxp-admin{display:flex;min-height:100vh;background:#0f172a;color:#e5e7eb}
.uxp-sidebar{width:260px;background:#111827;border-right:1px solid #1f2937;padding:16px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow:auto}
.uxp-brand{color:#fff;font-weight:700;margin:8px 0 16px 0}
.uxp-menu .uxp-section-title{color:#9ca3af;font-size:.85rem;margin:14px 0 6px 0;text-transform:uppercase}
.uxp-menu ol{list-style:none;margin:0;padding:0}
.uxp-menu li{margin:2px 0}
.uxp-menu a{display:block;color:#e5e7eb;text-decoration:none;padding:10px 12px;border-radius:6px}
.uxp-menu a:hover,.uxp-menu a:focus{background:#1f2937}
.uxp-main{flex:1;display:flex;flex-direction:column;min-width:0}
.uxp-topbar{display:flex;justify-content:space-between;align-items:center;background:#0b1220;border-bottom:1px solid #1f2937;padding:12px 16px;position:sticky;top:0;z-index:5}
.uxp-content{padding:16px}
.uxp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:10px 0}
.uxp-card{background:#0b1220;border:1px solid #1f2937;border-radius:8px;padding:14px}
.uxp-card h3{margin:0 0 6px 0;color:#9ca3af;font-size:.95rem}
.uxp-card .val{font-size:1.4rem;color:#fff}
.uxp-panel{background:#0b1220;border:1px solid #1f2937;border-radius:8px;padding:16px;margin:12px 0}
.uxp-panel h2{color:#e5e7eb}

/* TYPOGRAPHIE */
h1{font-size:2rem;margin:0.7em 0;}
h2{font-size:1.5rem;margin:0.6em 0;text-decoration: underline;}
h3{font-size:1.2rem;margin:0.5em 0;}
h4{font-size:1rem;margin:0.4em 0;}
h5,h6{font-size:0.95rem;margin:0.3em 0;}
em{font-style:italic;}
strong{font-weight:700;}
small{font-size:0.85em;}
blockquote{
margin:1em 0;
padding:0.7em 1em;
background:#f4f6fa;
border-left:4px solid #007bff;
color:#444;
border-radius:4px;
}
a{color:#007bff;text-decoration:none;}
a:hover,a:focus{color:#edc953e8;text-decoration:underline;}
span{display:inline;}
div{box-sizing:border-box;}
article{margin:1em 0;}
section{margin:1em 0;}
/* UTILITAIRES */
.ok{color:#28a745;}
.fail{color:#dc3545;}
.info{color:#007bff;}
.section{margin:1.5em 0;padding:1em;background:#f8f9fa;border-radius:6px;border:1px solid #e9ecef;}
/* RESPONSIVE */
/*
@media(max-width:1024px){
.ct,main.ct{flex-direction:column;align-items:stretch;width:99%;}
.mnl,.mnr,aside.mnl,aside.mnr{max-width:190px;width:10%;margin:0.25rem 0;}
}
@media(max-width:768px){
.hd,header.hd{padding:0.7rem;}
.mn,nav.mn{font-size:0.95rem;}
.ct,main.ct{flex-direction:column;gap:0.5em;}
.mnl,.mnr,aside.mnl,aside.mnr{width:100%;min-width:0;max-width:100%;padding:0.75rem;}
}
@media(max-width:480px){
.hd,header.hd{font-size:0.95rem;}
.mn,nav.mn{font-size:0.9rem;}
.ct,main.ct{padding:0.2em;}
.mnl,.mnr,aside.mnl,aside.mnr{padding:0.5rem;}
}
*/
/* ADMIN.PHP */
.admin-wrap{display:grid;grid-template-columns:260px 1fr;gap:10px;width:96%;margin:0 auto}
.admin-aside{background:#f9fbfd;border:1px solid #e0e0e0;border-radius:6px;padding:12px}
.admin-aside h3{margin:0 0 8px 0}
.admin-aside ol{list-style:none;margin:0;padding:0}
.admin-aside li{margin:4px 0}
.admin-aside a{text-decoration:none}
.admin-main{min-width:0}
.adm-crumbs{margin:6px 0 10px 0;color:#666}
.admin-header h1{margin:6px 0 12px 0}
.admin-content{background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:12px}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th, table.tbl td{padding:.5rem;border-bottom:1px solid #eee}
table.tbl tr:nth-child(even){background:#fafafa}
table.tbl th{position:sticky;top:0;background:#f7f7f7;z-index:1}
.tbl-actions a{margin-right:8px}
.form-row{display:flex;flex-direction:column;margin:8px 0}
.form-actions{margin-top:10px}



/* FIN SIMPLESL v1.0.3 CSS */
.ct>section.is-visible{display:block;}