/* #region Header */

/* zone prio */
#modal-1-content .wp-block-navigation-item__label {
    color: var(--color-text) !important; 
} 

#modal-1-content .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--color-bg) !important;
}

#modal-1-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--color-bg) !important;
}


/* #region Structure */

.site-header {

    background: var(--color-bg);

    padding: 8px 35px;

    display: flex;

    align-items: center;

    gap: 25px;

    border-bottom: 1px solid var(--color-primary);

}


.header-center {

    flex: 1;

    display: flex;

    justify-content: center;

    min-width: 0;

}

/* #endregion */


/* #region Logo */


.brand {

    display: flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    min-width: 0;

    flex-shrink: 0;

}


.site-logo {

    width: 55px;

    height: 55px;

    object-fit: contain;

    display: block;

}


.brand-name {

    color: var(--color-title);

    font-size: 20px;

    line-height: .95;

    font-weight: 800;

    text-transform: uppercase;

    white-space: nowrap;

}

/* #endregion */


/* #region Navigation */


.site-header .wp-block-navigation {

    gap: 0;

}


.main-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    min-width: 0;

}


.main-navigation .wp-block-navigation {

    display: flex;

    align-items: center;

}



/* Liste principale */

.main-navigation .wp-block-navigation__container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin: 0;

    padding: 0;

    list-style: none;

    flex-wrap: nowrap;

}



/* Items */

.main-navigation .wp-block-navigation-item {

    position: relative;

    flex-shrink: 1;

}



/* Boutons navigation */

.main-navigation .wp-block-navigation-item__content {

    display: flex;

    align-items: center;

    padding: 8px 14px;

    color: var(--color-text);

    border-radius: 50px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    white-space: nowrap;

    transition: .25s;

}


/* Hover */

.main-navigation .wp-block-navigation-item__content:hover {

    background: var(--color-primary);

    color: var(--color-index);

}



/* Page active */

.main-navigation .current-menu-item > .wp-block-navigation-item__content,
.main-navigation .current-menu-ancestor > .wp-block-navigation-item__content {

    background: transparent;

    color: var(--color-text);

}

/* Page active + Hover */

.main-navigation .current-menu-item > .wp-block-navigation-item__content:hover,
.main-navigation .current-menu-ancestor > .wp-block-navigation-item__content:hover {

    background: var(--color-primary);

    color: var(--color-index);

}



/* Flèche */

.main-navigation .wp-block-navigation__submenu-icon {

    border: none;

    background: transparent;

    padding: 0;

    margin-left: 5px;

}


.main-navigation .wp-block-navigation__submenu-icon svg {

    width: 12px;

    height: 12px;

}



/* Sous menus */

.main-navigation .wp-block-navigation__submenu-container {

    background: var(--color-bg);

    border-radius: 12px;

    padding: 12px;

    min-width: 240px;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);

}



/* Items sous menus */

.main-navigation .wp-block-navigation__submenu-container 
.wp-block-navigation-item__content {

    display: flex;

    padding: 10px 15px;

    background: rgba(58,70,239,.10);

    color: var(--color-text);

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    transition: .25s;

}



/* Hover sous menus */

.main-navigation .wp-block-navigation__submenu-container 
.wp-block-navigation-item__content:hover {

    background: var(--color-primary);

    color: var(--color-bg);

}



/* Espacement */

.main-navigation .wp-block-navigation__submenu-container 
.wp-block-navigation-item {

    margin-bottom: 8px;

}


.main-navigation .wp-block-navigation__submenu-container 
.wp-block-navigation-item:last-child {

    margin-bottom: 0;

}


/* #endregion */


/* #region Actions */


.header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    margin-left: auto;

}



.register-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 22px;

    background: var(--color-primary);

    color: var(--color-index) !important;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

    text-transform: uppercase;

    transition: .25s;

}


/* Texte du bouton */

.register-button,
.register-button:visited,
.register-button:hover,
.register-button:focus {

    color: var(--color-index) !important;

}


/* Hover */

.register-button:hover {

    background: color-mix(in srgb, var(--color-primary) 90%, white);

}



/* ==========================
   Recherche WordPress
========================== */


.header-actions .wp-block-search {

    margin: 0;

}



.header-actions .wp-block-search__inside-wrapper {

    display: flex;

    align-items: center;

}



/* Label caché */

.header-actions .wp-block-search__label {

    display: none;

}



/* Champ */

.header-actions .wp-block-search__input {

    width: 0;

    opacity: 0;

    padding: 0;

    height: 40px;

    border: none;

    border-radius: 999px;

    font-size: 14px;

    transition: .3s;

}



/* Ouverture */

.header-actions .wp-block-search:focus-within 
.wp-block-search__input {

    width: 180px;

    opacity: 1;

    padding: 0 15px;

    border: 1px solid rgba(0,0,0,.12);

}



/* Bouton recherche */

.header-actions .wp-block-search__button {

    width: 40px;

    height: 40px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--color-secondary);

    cursor: pointer;

    font-size: 0;

    transition: .25s;

}



/* Icône */

.header-actions .wp-block-search__button::before {

    content: "🔍";

    font-size: 20px;

}



/* Hover */

.header-actions .wp-block-search__button:hover {

    background: rgba(58,70,239,.08);

    color: var(--color-primary);

}


/* #endregion */


/* #region theme toggle button */

.theme-toggle {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: var(--color-primary);

    color: var(--color-index);

    cursor: pointer;

    font-size: 20px;

    transition: .25s;

}


.theme-toggle:hover {

    transform: scale(1.08);

}

/* #endregion theme toggle button */


/* #endregion Header */

/* =================================================
   HEADER MOBILE
   ================================================= */

@media (max-width: 767px) {

    /* Masque le nom du site sur mobile */
    .brand-name {
        display: none !important;
    }


    /* Menu principal */

    .main-navigation .wp-block-navigation__container {

        margin-left: 20px !important;

        padding: 0 !important;

        gap: 10px !important;

    }


    /* Chaque élément du menu */

    .main-navigation .wp-block-navigation__container >
    .wp-block-navigation-item {

        margin: 0 !important;

        padding: 0 !important;

    }


    /* Boutons / liens du menu */

    .main-navigation .wp-block-navigation__container >
    .wp-block-navigation-item >
    .wp-block-navigation-item__content {

        padding: 5px !important;

        margin: 0 !important;

    }


    /* =================================================
       SOUS-MENU
       ================================================= */

    .main-navigation .wp-block-navigation__submenu-container {

        margin-left: 20px !important;

        padding: 0 !important;

        gap: 10px !important;

    }


    /* Éléments du sous-menu */

    .main-navigation .wp-block-navigation__submenu-container
    .wp-block-navigation-item {

        margin: 0 0 10px 0 !important;

        padding: 0 !important;

    }


    /* Dernier élément */

    .main-navigation .wp-block-navigation__submenu-container
    .wp-block-navigation-item:last-child {

        margin-bottom: 0 !important;

    }


    /* Boutons du sous-menu */

    .main-navigation .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {

        padding: 5px !important;

        margin: 0 !important;

    }

}