/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  Cosmélyse V2 — cosmelyse_navbar.css                                  ║
   ║  Style de la navbar rose (header de toutes les pages)                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝

   Dépendance : cosmelyse.css (pour les :root vars + le composant .cosm-dot
   réutilisé par le dropdown de recherche).
   Compatible Bootstrap 5.3.x.
*/


/* ============================================
   1. NAVBAR PRINCIPALE
   ============================================ */

.navbar-cosmelyse {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--dark-pink) 100%);
    box-shadow: 0 5px 30px rgba(233, 30, 99, 0.25);
    padding: 1rem 0;
    position: relative;
    z-index: 1000;
}

.navbar-cosmelyse .container-fluid,
.navbar-cosmelyse .container {
    position: relative;
    z-index: 2;
}


/* ============================================
   2. BRAND / LOGO
   ============================================ */

.navbar-cosmelyse .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    transition: transform 0.3s ease;
}

.navbar-cosmelyse .navbar-brand:hover {
    transform: scale(1.05);
}

.navbar-brand-logo {
    background: white;
    width: 250px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}

.navbar-brand-logo img,
.navbar-brand-logo .cosm-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ============================================
   3. TOGGLER (mobile burger)
   ============================================ */

.navbar-cosmelyse .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.navbar-cosmelyse .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-cosmelyse .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.navbar-cosmelyse .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5rem;
    height: 1.5rem;
}


/* ============================================
   4. NAVIGATION LINKS
   ============================================ */

.navbar-cosmelyse .navbar-nav {
    gap: 0.5rem;
}

.navbar-cosmelyse .nav-item {
    position: relative;
    z-index: 1040;
}

.navbar-cosmelyse .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem !important;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-cosmelyse .nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white !important;
    transform: translateY(-2px);
}

.navbar-cosmelyse .nav-link.active {
    background: rgba(255, 255, 255, 0.25);
    color: white !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.navbar-cosmelyse .nav-link i {
    font-size: 1.1rem;
}


/* ============================================
   5. DROPDOWN MENU
   ============================================ */

.navbar-cosmelyse .dropdown-menu {
    background: white;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    margin-top: 0.5rem;
    z-index: 1050;
}

.navbar-cosmelyse .dropdown-item {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-cosmelyse .dropdown-item:hover {
    background: rgba(255, 107, 157, 0.1);
    color: var(--primary-pink);
}

.navbar-cosmelyse .dropdown-item i {
    font-size: 1.1rem;
    color: var(--primary-pink);
}

.navbar-cosmelyse .dropdown-divider {
    border-color: rgba(0, 0, 0, 0.08);
    margin: 0.5rem 0;
}


/* ============================================
   6. BOUTONS D'ACTION (droite de la navbar)
   ============================================ */

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
}

.navbar-btn:hover {
    background: white;
    color: var(--primary-pink);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.navbar-btn i {
    font-size: 1.1rem;
}

.navbar-btn-primary {
    background: white;
    color: var(--primary-pink);
    border-color: white;
}

.navbar-btn-primary:hover {
    background: var(--cream);
    color: var(--dark-pink);
    transform: scale(1.05);
}


/* ============================================
   7. RECHERCHE — CHAMP + TYPEAHEAD
   ============================================
   Le champ de recherche est un <form> (id #navbarSearch) qui pointe vers
   /recherche.php : il fonctionne sans JS (soumission classique). Le module
   cosmelyse-search.js l'enrichit du dropdown #navbarSearchResults.

   Le dropdown est hors flux (position:absolute) → il n'altère pas la
   hauteur du <form>, qui reste celle du seul champ.
*/

.navbar-search {
    position: relative;
    width: 300px;
    margin: 0;                  /* <form> : on neutralise toute marge UA */
}

.navbar-search input {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: white;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    width: 100%;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.navbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.navbar-search input:focus {
    background: white;
    color: var(--text-dark);
    outline: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.navbar-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;                   /* le dropdown étant hors flux, la hauteur du
                                   <form> = celle du champ → 50% le centre */
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    pointer-events: none;
}

.navbar-search input:focus + i {
    color: var(--primary-pink);
}


/* ── 7.1 Dropdown des suggestions (#navbarSearchResults) ──────────────── */

.navbar-search__results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    max-height: 70vh;
    overflow: hidden auto;       /* x: masqué, y: scroll si liste longue */
}

.navbar-search__results[hidden] {
    display: none;
}

.navbar-search__list {
    display: flex;
    flex-direction: column;
}


/* ── 7.2 Ligne de suggestion ─────────────────────────────────────────── */
/* Layout : [point sécurité] [nom (flex, ellipsis)] [meta nb formules]    */

.navbar-search__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar-search__item:last-child {
    border-bottom: none;
}

.navbar-search__item.is-active,
.navbar-search__item:hover {
    background: rgba(255, 107, 157, 0.08);
    color: var(--text-dark);
}

.navbar-search__item-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-search__item-meta {
    flex-shrink: 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}


/* ── 7.3 Message (chargement / aucun résultat) ───────────────────────── */

.navbar-search__msg {
    padding: 0.9rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* ── 7.4 Pied "Voir tous les résultats" ──────────────────────────────── */

.navbar-search__all {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 107, 157, 0.07);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--dark-pink);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.navbar-search__all.is-active,
.navbar-search__all:hover {
    background: rgba(255, 107, 157, 0.15);
    color: var(--dark-pink);
}


/* ============================================
   8. RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .navbar-cosmelyse {
        padding: 0.75rem 0;
    }

    .navbar-brand-logo {
        width: 200px;
        height: 50px;
    }

    .navbar-cosmelyse .navbar-collapse {
        background: linear-gradient(135deg, var(--dark-pink) 0%, var(--primary-pink) 100%);
        margin: 1rem -1rem -1rem -1rem;
        padding: 1.5rem 1rem;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .navbar-cosmelyse .navbar-nav {
        gap: 0.5rem;
    }

    .navbar-cosmelyse .nav-link {
        padding: 0.75rem 1rem !important;
    }

    .navbar-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
    }

    .navbar-btn {
        width: 100%;
        justify-content: center;
    }

    .navbar-search {
        width: 100%;
        margin: 1rem 0 0 0;
    }

    .navbar-cosmelyse .dropdown-menu {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }
}

@media (max-width: 576px) {
    .navbar-brand-logo {
        width: 180px;
        height: 45px;
    }
}


/* ============================================
   9. ANIMATIONS
   ============================================ */

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

.navbar-cosmelyse .dropdown-menu.show {
    animation: navbarSlideDown 0.3s ease;
}

/* ============================================
   9. TITRES DE SECTION DU DROPDOWN NAVBAR
   ============================================
   Nouveauté X.3b : le dropdown typeahead affiche 2 sections. Le reste
   du dropdown (.navbar-search__*) est stylé dans cosmelyse_navbar.css ;
   on n'ajoute ici que le titre de section, propre à la recherche.
*/

.navbar-search__section {
    padding: 0.5rem 0.9rem 0.25rem 0.9rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-disabled);
}

/* Icône produit dans une ligne de suggestion produit du dropdown. */
.navbar-search__item-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--primary-pink);
}