:root{
  --bg: #fff;
  --text: #0f172a;
  --muted: #475569;
  --card: linear-gradient(135deg,#ffffff,#f1f5f9);
  --accent: linear-gradient(135deg,#6ee7b7,#3b82f6);
  --border: rgba(15,23,42,0.06);
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  --glass: rgba(255,255,255,0.6);
  --hover-bg: rgba(15, 23, 42, 0.04); 
  /* Dégradé pour la bordure/ombre de l'en-tête - Light */
  --header-border-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), inset 0 -1px 0 0 rgba(0,0,0,0.05);
  --header-border-image: linear-gradient(to right, #6ee7b7, #3b82f6);
}

/* Dark theme variables */
:root[data-theme="dark"]{
  --bg: #071124;
  --text: #e6eef8;
  --muted: #9fb3d1;
  --card: linear-gradient(135deg,#06203a,#0b1220);
  --accent: linear-gradient(135deg,#0ea5a4,#7c3aed);
  --border: rgba(255,255,255,0.06);
  --shadow: 0 8px 24px rgba(2,6,23,0.6);
  --glass: rgba(255,255,255,0.03);
  --hover-bg: rgba(230, 238, 248, 0.08); 
  /* Dégradé pour la bordure/ombre de l'en-tête - Dark */
  --header-border-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), inset 0 -1px 0 0 rgba(255,255,255,0.05);
  --header-border-image: linear-gradient(to right, #0ea5a4, #7c3aed);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
a{color:inherit; text-decoration:none}
/* Diminution de la marge du container pour remonter un peu le contenu sous l'en-tête */
.container{max-width:1100px;margin:20px auto;padding:0 20px;} 

/* Header Wrapper pour la pleine largeur et la bordure dégradée */
.header-wrapper {
    width: 100%;
    background-color: var(--bg); /* Assure que l'arrière-plan de l'en-tête est le bg */
    box-shadow: var(--header-border-shadow); /* Ajout de l'ombre */
    border-bottom: 2px solid transparent;
    /* Application du dégradé comme bordure inférieure */
    border-image: var(--header-border-image) 1;
    position: sticky; /* Pour le garder en haut */
    top: 0;
    z-index: 90;
    padding:0 40px;
}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0; position: relative;} 
.brand{font-weight:800;letter-spacing:2px;font-size:20px}
.brand span{background:linear-gradient(90deg,#06b6d4,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:18px;align-items:center;}
.nav a{padding:8px 12px;border-radius:8px;display:inline-block; transition: background-color 0.2s ease;}
.nav a:hover{background-color: var(--hover-bg);} 
.nav .dropdown{position:relative}
.dropdown-list{position:absolute;top:34px;right:0;background:var(--card);border-radius:10px;padding:8px;box-shadow:var(--shadow);border:1px solid var(--border);display:none;min-width:180px;z-index:50}
.dropdown-list a{display:block;padding:8px;border-radius:8px; transition: background-color 0.2s ease;}
.dropdown-list a:hover{background-color: var(--hover-bg);} 
.dropdown:hover .dropdown-list{display:block}

/* Mobile */
.menu-toggle{display:none;border:0;background:transparent;padding:8px;border-radius:8px; color: var(--text); font-size: 24px; line-height: 1; transition: background-color 0.2s ease;} 
.menu-toggle:hover{background-color: var(--hover-bg);} 
.mobile-nav{
    display:none;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border-radius:10px;
    background:var(--card);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    position: absolute; 
    top: 60px; 
    right: 0;
    min-width: 200px;
    margin-top: 35px;
    z-index: 100;
}
/* S'assurer que chaque lien mobile occupe toute la largeur pour être un élément par ligne */
.mobile-nav a{
    padding: 8px; 
    border-radius: 8px; 
    transition: background-color 0.2s ease;
    display: block; /* S'assurer qu'il prend toute la ligne disponible */
}
.mobile-nav a:hover{background-color: var(--hover-bg);} 

/* Sidebar */
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}
@media(max-width:880px){
    .layout{grid-template-columns:1fr}
    .sidebar{display:none}
    .menu-toggle{display:inline-flex} 
    .nav{display: none;} 
}

/* Card grid on home */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

/* Card */
.card{background:var(--card);border-radius:16px;padding:28px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 18px 40px rgba(2,6,23,0.28)}

/* Card colors adapt */
.card h3{margin:0 0 8px 0}
.card p{margin:0;color:var(--muted)}

/* Correction du slogan: Suppression du letter-spacing négatif et assurance de la police moderne */
.kv h1{
    margin:0;
    font-size:15px;
    /* Suppression de 'letter-spacing: -0.5px;' */
    letter-spacing: normal;
    font-family: inherit; /* Assure l'utilisation de la police moderne "Inter" définie sur le body */
}

/* Sidebar */
.sidebar{background:var(--card);padding:16px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);height:fit-content}
.sidebar h4{margin:0 0 10px 0}

/* Footer */
.footer{margin-top:40px;padding:24px 0;text-align:center;border-top:1px solid var(--border)}

/* Tables for years pages */
.table{width:100%;border-collapse:collapse;margin-bottom:28px}
.table th,.table td{border:1px solid var(--border);padding:10px;text-align:left;background:transparent;color:var(--text)}
.table th{font-weight:700}

/* Articles list */
.article-item{
    background:var(--card);
    padding:16px;
    border-radius:12px;
    border:1px solid var(--border);
    margin-bottom:12px;
    display:block; 
    /* Ajout des transitions pour l'effet de survol */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Effet de survol sur l'élément d'article (Sidebar) */
.article-item:hover{
    background-color: var(--hover-bg); 
    transform: translateY(-2px); /* Soulève légèrement */
    box-shadow: 0 8px 15px rgba(2,6,23,0.15); /* Ajout d'une ombre */
}

/* Article page */
.article-hero{padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:18px}

/* Utilities */
.kv{display:flex;align-items:center;gap:8px}
.icon-btn{
    background:transparent;
    border:0;
    padding:8px;
    border-radius:8px;
    cursor:pointer; 
    color: var(--text); 
    transition: background-color 0.2s ease;
    /* Assure la même police que le corps pour "Medoclass-Oujda" */
    font-family: inherit; 
} 
.icon-btn:hover{background-color: var(--hover-bg);} 
.small{font-size:13px;color:var(--muted)}

/* Theme toggle position */
.top-right{display:flex;align-items:center;gap:12px}

/* Footer small on mobile */
@media(max-width:420px){.brand{font-size:18px} .container{margin:20px auto;padding:0 14px} .header{padding:12px 0}}