@font-face {
  font-family: "OrpheusPro";
  src: url(../resources/font/Orpheus_Pro.otf);
}

nav a{
    color:inherit;
}
/* Navigation */
nav {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

nav.dark{
   background:rgba(24, 24, 24, 0.95);
}

nav.shrink{
    padding:12px 0;
}

nav.shrink .logo{
    font-size:24px;
}
nav.shrink .menu-button {
    font-size:16px;
}


nav .nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo{
    color:#181818;
    font-family: "OrpheusPro";
    transition: font-size 0.3s ease;
    font-size: 32px;
}

nav.dark .logo{
   color: #ffffff;
}

 nav .nav-menu {
    position: relative;
}

nav .menu-button {
    font-family: "OrpheusPro";
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #181818;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size:16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

nav.dark .menu-button{
   border: 1px solid rgba(256, 256, 256, 0.3);
   color: #ffffff;
}

nav .menu-button:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.15);
}

nav.dark .menu-button:hover{
    background: none;
   border: 1px solid rgba(256, 256, 256, 0.5);
}

nav .menu-button::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.3s ease;
}

nav .menu-button.active::after {
    transform: rotate(180deg);
}

nav .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 20px;
    display: none;
    z-index: 1000;
    right: 20px;
    left: 20px;
}

nav .dropdown-menu.active {
    display: block;
    animation: slideDown 0.3s ease;
    overflow-y: scroll;
    height: auto;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav .menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

nav .menu-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

nav .menu-category {
    height:40px;
    display: flex;
    padding: 8px 12px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #1a1a1a;
    border-bottom: 1px solid #ececec;
    flex-direction: column;
    justify-content: flex-end;
}

nav .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

nav .dropdown-menu a:hover {
    background: #f8f9fa;
    border-left-color: var(--menu-color);
}

nav .menu-color-dot {
    width: 40px;
    height: 40px;
    border-radius: 15%;
    background: var(--menu-color);
    flex-shrink: 0;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .menu-color-dot img {
    width: 20px;
    height: 20px;
}

/* Couleurs du menu */
nav .dropdown-menu a[data-category="#coran"] { --menu-color: #3e5c2e; }
nav .dropdown-menu a[data-category="#dictionnaire"] { --menu-color: #8b6914; }
nav .dropdown-menu a[data-category="#raison"] { --menu-color: #1a5f7a; }
nav .dropdown-menu a[data-category="#sunna"] { --menu-color: #0f5e4a; }
nav .dropdown-menu a[data-category="#dalail"] { --menu-color: #c44569; }
nav .dropdown-menu a[data-category="#alasmaalhusna"] { --menu-color: #181818; }
nav .dropdown-menu a[data-category="#bibliotheque"] { --menu-color: #2e4a7a; }
nav .dropdown-menu a[data-category="#videotheque"] { --menu-color: #a73737; }
nav .dropdown-menu a[data-category="#blog"] { --menu-color: #3f4849; }
nav .dropdown-menu a[data-category="#hadiths"] { --menu-color: #7a5a3e; }
nav .dropdown-menu a[data-category="#figures"] { --menu-color: #605c3c; }
nav .dropdown-menu a[data-category="#webographie"] { --menu-color: #a83279; }
nav .dropdown-menu a[data-category="#mathnawi"] { --menu-color: #5a3e63; }
nav .dropdown-menu a[data-category="#citations"] { --menu-color: #45b649; }
nav .dropdown-menu a[data-category="#boutique"] { --menu-color: #00b894; }
nav .dropdown-menu a[data-category="#contact"] { --menu-color: #d35400; }
nav .dropdown-menu a[data-category="#musique"] { --menu-color: #6c5ce7; }

@media (max-width: 1200px) {
    nav .dropdown-menu.active {
        height: calc(100vh - 120px);
    }
    nav .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    nav .nav-content {
        padding: 0 20px;
    }

    nav .dropdown-menu {
        right: 20px;
        left: 20px;
        width: auto;
    }

    nav .menu-grid {
        grid-template-columns: 1fr;
    }

    nav .nav-content {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
  /* Petits smartphones */
    nav .logo{
        font-size: 24px;
    }
    
    nav .menu-button {
        font-size: 14px;
        padding:8px 16px;
    }
}