/* ===== HEADER ET NAVIGATION ===== */
#header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#header .container {
    max-width: 1140px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.rtl #header .container { flex-direction: row-reverse; }
#header .logo img { height: 60px; object-fit: contain; }
main { padding-top: 80px; }
#header nav { display: flex; gap: 25px; }
body.rtl #header nav { justify-content: flex-start; }
#header nav a {
    color: #333; font-weight: 500; font-size: 15px;
    text-transform: uppercase; text-decoration: none; transition: color 0.3s;
}
#header nav a:hover { color: #f39c12; }
.burger {
    display: none; flex-direction: column; gap: 5px; cursor: pointer; margin-left: 15px;
}
body.rtl .burger { margin-left: 0; margin-right: 15px; }
.burger div { width: 25px; height: 3px; background-color: #333; transition: 0.3s; }
.msidebar {
    position: fixed; top: 0; left: -250px; width: 220px; height: 100%;
    background-color: #fff; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2); overflow-y: auto; padding: 60px 20px;
    transition: left 0.3s ease-in-out; z-index: 1090;
}
body.rtl .msidebar { left: auto; right: -250px; }
body.rtl .msidebar.open { right: 0; }
.msidebar.open { left: 0; }
.msidebar a {
    display: block; padding: 12px 10px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; font-weight: 500;
}
.msidebar a:hover { background-color: #f5f5f5; }
#header nav .has-submenu { position: relative; }
#header nav .has-submenu:hover .submenu { display: block; }
.submenu {
    display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border: 1px solid #ddd;
    min-width: 180px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000;
}
body.rtl .submenu { left: auto; right: 0; }
.submenu a {
    padding: 10px 15px; display: block; white-space: nowrap; border-bottom: 1px solid #eee; font-size: 14px; text-transform: none;
}
.submenu a:hover { background-color: #f5f5f5; }
.msidebar .has-submenu > a::after { content: '▼'; float: right; font-size: 12px; }
.msidebar .submenu {
    display: none; padding-left: 15px; background-color: #fafafa;
}
body.rtl .msidebar .submenu { padding-left: 0; padding-right: 15px; }
.msidebar .has-submenu.open .submenu { display: block; }
.msidebar .submenu a { border: none; font-size: 14px; padding: 8px 10px; }