/* ==========================================================
   NAVBAR
   ========================================================== */

.campaign-nav {

    position: relative;
    z-index: 1000;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #29251f 0%,
            #211e19 100%
        );

    border-bottom: 1px solid rgba(190, 160, 95, .20);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .22);
}


/* ==========================================================
   INNER
   ========================================================== */

.campaign-nav-inner {

    max-width: 1400px;

    min-height: 68px;

    margin: 0 auto;

    padding: 0 28px;

    display: flex;

    align-items: center;

    gap: 30px;
}


/* ==========================================================
   LOGO
   ========================================================== */

.campaign-nav-brand {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}


.campaign-nav-logo {

    display: block;

    width: 230px;

    height: auto;

    object-fit: contain;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.campaign-nav-brand:hover .campaign-nav-logo {

    opacity: .92;

    transform: translateY(-1px);
}


/* ==========================================================
   LIENS
   ========================================================== */

.campaign-nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex: 1;
}


.campaign-nav-link {

    position: relative;

    padding: 10px 14px;

    color: #aaa196;

    text-decoration: none;

    border-radius: 7px;

    font-family: "Cinzel", serif;

    font-size: .86rem;

    letter-spacing: .02em;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease;
}


.campaign-nav-link:hover {

    color: #eee5d7;

    background: rgba(190, 160, 95, .05);
}


.campaign-nav-link.is-active {

    color: #bea05f;

    background: rgba(190, 160, 95, .07);
}


.campaign-nav-link.is-active::after {

    content: "";

    position: absolute;

    left: 14px;
    right: 14px;

    bottom: 4px;

    height: 1px;

    background: #bea05f;
}


/* ==========================================================
   COMPTE
   ========================================================== */

.campaign-nav-account {

    position: relative;

    flex-shrink: 0;

    margin-left: auto;
}


/* ==========================================================
   BOUTON PROFIL
   ========================================================== */

.campaign-nav-profile {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding: 4px 8px 4px 6px;

    border: 1px solid transparent;

    border-radius: 8px;

    background: transparent;

    color: #d7cdbc;

    font-family: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.campaign-nav-profile:hover,
.campaign-nav-profile[aria-expanded="true"] {

    background: rgba(190, 160, 95, .07);

    border-color: rgba(190, 160, 95, .18);
}


/* ==========================================================
   AVATAR
   ========================================================== */

.campaign-nav-avatar {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(190, 160, 95, .38);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(190, 160, 95, .16),
            rgba(190, 160, 95, .04)
        );

    color: #bea05f;

    font-family: "Cinzel", serif;

    font-size: .82rem;

    font-weight: 600;

    text-transform: uppercase;
}


.campaign-nav-profile-name {

    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #d7cdbc;

    font-family: "Cinzel", serif;

    font-size: .80rem;

    font-weight: 400;
}


.campaign-nav-profile-chevron {

    width: 16px;
    height: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #81796f;

    transition:
        transform .2s ease,
        color .2s ease;
}


.campaign-nav-profile-chevron svg {

    width: 15px;
    height: 15px;
}


.campaign-nav-profile[aria-expanded="true"]
.campaign-nav-profile-chevron {

    transform: rotate(180deg);

    color: #bea05f;
}


/* ==========================================================
   MENU DÉROULANT
   ========================================================== */

.campaign-nav-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: 270px;

    padding: 8px;

    background:
        linear-gradient(
            180deg,
            #2a2722 0%,
            #201d19 100%
        );

    border: 1px solid rgba(190, 160, 95, .22);

    border-radius: 10px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .42),
        0 4px 12px rgba(0, 0, 0, .20);

    transform-origin: top right;

    animation: campaign-nav-dropdown-in .16s ease-out;
}


@keyframes campaign-nav-dropdown-in {

    from {

        opacity: 0;

        transform:
            translateY(-5px)
            scale(.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ==========================================================
   EN-TÊTE DU MENU
   ========================================================== */

.campaign-nav-dropdown-header {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px 9px 12px;
}


.campaign-nav-dropdown-avatar {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(190, 160, 95, .40);

    border-radius: 50%;

    background: rgba(190, 160, 95, .08);

    color: #bea05f;

    font-family: "Cinzel", serif;

    font-size: .9rem;

    font-weight: 600;
}


.campaign-nav-dropdown-user {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.campaign-nav-dropdown-user strong {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #e2d9cb;

    font-family: "Cinzel", serif;

    font-size: .82rem;

    font-weight: 500;
}


.campaign-nav-dropdown-user span {

    color: #756e65;

    font-size: .68rem;

    letter-spacing: .04em;
}


/* ==========================================================
   SÉPARATEUR
   ========================================================== */

.campaign-nav-dropdown-separator {

    height: 1px;

    margin: 3px 4px 6px;

    background: rgba(190, 160, 95, .12);
}


/* ==========================================================
   ÉLÉMENTS DU MENU
   ========================================================== */

.campaign-nav-dropdown-item {

    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 9px;

    border-radius: 7px;

    color: #b7aea2;

    text-decoration: none;

    transition:
        color .18s ease,
        background .18s ease;
}


.campaign-nav-dropdown-item:hover {

    background: rgba(190, 160, 95, .07);

    color: #eee5d7;
}


/* ==========================================================
   ICÔNES
   ========================================================== */

.campaign-nav-dropdown-icon {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(190, 160, 95, .12);

    border-radius: 6px;

    background: rgba(190, 160, 95, .035);

    color: #9c8a68;
}


.campaign-nav-dropdown-icon svg {

    width: 17px;
    height: 17px;
}


/* ==========================================================
   CONTENU ÉLÉMENT
   ========================================================== */

.campaign-nav-dropdown-item-content {

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.campaign-nav-dropdown-item-content strong {

    color: inherit;

    font-family: "Cinzel", serif;

    font-size: .74rem;

    font-weight: 400;
}


.campaign-nav-dropdown-item-content small {

    color: #69635b;

    font-size: .62rem;
}


/* ==========================================================
   DÉCONNEXION
   ========================================================== */

.campaign-nav-dropdown-logout {

    color: #a8736b;
}


.campaign-nav-dropdown-logout .campaign-nav-dropdown-icon {

    color: #a8736b;

    border-color: rgba(170, 90, 80, .14);
}


.campaign-nav-dropdown-logout:hover {

    color: #d49a91;

    background: rgba(170, 90, 80, .08);
}


/* ==========================================================
   VISITEUR
   ========================================================== */

.campaign-nav-guest {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;
}


.campaign-nav-guest-login,
.campaign-nav-guest-register {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 14px;

    border-radius: 7px;

    font-family: "Cinzel", serif;

    font-size: .74rem;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;
}


.campaign-nav-guest-login {

    border: 1px solid rgba(190, 160, 95, .20);

    color: #aaa196;

    background: transparent;
}


.campaign-nav-guest-login:hover {

    color: #eee5d7;

    border-color: rgba(190, 160, 95, .40);

    background: rgba(190, 160, 95, .05);
}


.campaign-nav-guest-register {

    border: 1px solid rgba(190, 160, 95, .55);

    background: rgba(190, 160, 95, .08);

    color: #bea05f;
}


.campaign-nav-guest-register:hover {

    background: #bea05f;

    color: #1b1814;

    transform: translateY(-1px);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1000px) {

    .campaign-nav-inner {

        gap: 16px;

        padding: 0 18px;
    }

    .campaign-nav-profile-name {

        display: none;
    }

}


/* ==========================================================
   PETIT ÉCRAN
   ========================================================== */

@media (max-width: 800px) {

    .campaign-nav-logo {

        width: 180px;
    }

    .campaign-nav-links {

        gap: 2px;
    }

    .campaign-nav-link {

        padding: 8px 9px;

        font-size: .74rem;
    }

}


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

@media (max-width: 620px) {

    .campaign-nav-inner {

        min-height: 62px;

        padding: 0 12px;
    }

    .campaign-nav-logo {

        width: 145px;
    }

    .campaign-nav-link {

        padding: 7px;

        font-size: .67rem;
    }

    .campaign-nav-link:nth-child(2),
    .campaign-nav-link:nth-child(3) {

        display: none;
    }

    .campaign-nav-dropdown {

        position: fixed;

        top: 67px;

        right: 10px;

        width: min(270px, calc(100vw - 20px));
    }

}


/* ==========================================================
   VISITEUR MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .campaign-nav-guest {

        gap: 6px;
    }

    .campaign-nav-guest-login,
    .campaign-nav-guest-register {

        min-height: 36px;

        padding: 0 9px;

        font-size: .65rem;
    }

}

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */

.campaign-nav-notifications {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.campaign-nav-notifications-button {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;

    border-radius: 8px;

    background: transparent;

    color: #aaa196;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.campaign-nav-notifications-button:hover,
.campaign-nav-notifications-button[aria-expanded="true"] {

    color: #eee5d7;

    background: rgba(190, 160, 95, .07);

    border-color: rgba(190, 160, 95, .18);
}


.campaign-nav-notifications-button svg {

    width: 21px;
    height: 21px;

    display: block;
}


/* ==========================================================
   BADGE
   ========================================================== */

.campaign-nav-notifications-badge {

    position: absolute;

    top: 3px;
    right: 2px;

    min-width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid #211e19;

    border-radius: 999px;

    background: #bea05f;

    color: #211e19;

    font-family: Inter, sans-serif;

    font-size: .58rem;

    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   MENU
   ========================================================== */

.campaign-nav-notifications-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    z-index: 1001;

    width: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #2a2722 0%,
            #201d19 100%
        );

    border: 1px solid rgba(190, 160, 95, .22);

    border-radius: 10px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .42);

}


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

@media (max-width: 900px) {

    .campaign-nav-notifications-button {

        width: 38px;
        height: 38px;

    }

}


@media (max-width: 620px) {

    .campaign-nav-notifications-dropdown {

        position: fixed;

        top: 67px;

        right: 10px;

        width: min(360px, calc(100vw - 20px));

    }

}

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */

.campaign-nav-notifications {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


/* ==========================================================
   BOUTON
   ========================================================== */

.campaign-nav-notifications-button {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;

    border-radius: 8px;

    background: transparent;

    color: #aaa196;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.campaign-nav-notifications-button:hover,
.campaign-nav-notifications-button[aria-expanded="true"] {

    color: #eee5d7;

    background: rgba(190, 160, 95, .07);

    border-color: rgba(190, 160, 95, .18);
}


.campaign-nav-notifications-button svg {

    width: 21px;
    height: 21px;

    display: block;
}


/* ==========================================================
   BADGE
   ========================================================== */

.campaign-nav-notifications-badge {

    position: absolute;

    top: 3px;
    right: 2px;

    min-width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid #211e19;

    border-radius: 999px;

    background: #bea05f;

    color: #211e19;

    font-family: Inter, sans-serif;

    font-size: .58rem;

    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   MENU
   ========================================================== */

.campaign-nav-notifications-dropdown {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    z-index: 1001;

    width: 360px;

    max-width: calc(100vw - 30px);

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #2a2722 0%,
            #201d19 100%
        );

    border: 1px solid rgba(190, 160, 95, .22);

    border-radius: 10px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .42);
}


/* ==========================================================
   EN-TÊTE
   ========================================================== */

.campaign-nav-notifications-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 54px;

    padding: 14px 17px;

    border-bottom: 1px solid #39332f;
}


.campaign-nav-notifications-header strong {

    color: #eee8df;

    font-family: "Cinzel", serif;

    font-size: .84rem;

    font-weight: 500;
}


.campaign-nav-notifications-header-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}


.campaign-nav-notifications-header-actions form {

    margin: 0;
}


.campaign-nav-notifications-count {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    border: 1px solid rgba(190, 160, 95, .25);

    border-radius: 999px;

    background: rgba(190, 160, 95, .08);

    color: #bea05f !important;

    font-family: Inter, sans-serif;

    font-size: .62rem !important;

    font-weight: 600;
}


.campaign-nav-notifications-read-all {

    padding: 4px 0;

    border: 0;

    background: transparent;

    color: #a8957d;

    font-family: "Cinzel", serif;

    font-size: .62rem;

    cursor: pointer;

    transition:
        color .15s ease;
}


.campaign-nav-notifications-read-all:hover {

    color: #d0ae78;
}


/* ==========================================================
   CORPS DES NOTIFICATIONS
   ========================================================== */

.campaign-nav-notifications-body {

    /*
     * Le menu reste compact même avec beaucoup
     * de notifications.
     */
    max-height: 380px;

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(190, 160, 95, .35)
        transparent;
}


/* ==========================================================
   SCROLLBAR CHROME / EDGE / SAFARI
   ========================================================== */

.campaign-nav-notifications-body::-webkit-scrollbar {

    width: 6px;
}


.campaign-nav-notifications-body::-webkit-scrollbar-track {

    background: transparent;
}


.campaign-nav-notifications-body::-webkit-scrollbar-thumb {

    background: rgba(190, 160, 95, .28);

    border-radius: 999px;
}


.campaign-nav-notifications-body::-webkit-scrollbar-thumb:hover {

    background: rgba(190, 160, 95, .48);
}


/* ==========================================================
   FORMULAIRE NOTIFICATION
   ========================================================== */

.campaign-nav-notification-form {

    margin: 0;

    padding: 0;

    border: 0;
}


/* ==========================================================
   NOTIFICATION
   ========================================================== */

.campaign-nav-notification {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: 100%;

    padding: 14px 17px;

    border: 0;

    border-bottom: 1px solid #302b27;

    background: transparent;

    color: inherit;

    font: inherit;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease;
}


.campaign-nav-notification:hover {

    background: #292522;
}


.campaign-nav-notification.is-unread {

    background: rgba(145, 115, 70, .10);
}


.campaign-nav-notification.is-unread:hover {

    background: rgba(145, 115, 70, .16);
}


/* ==========================================================
   ICÔNE
   ========================================================== */

.campaign-nav-notification-icon {

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    background: #2a2521;

    border: 1px solid #453d36;

    border-radius: 50%;

    color: #c1ad88;

    font-size: 15px;
}


/* ==========================================================
   CONTENU
   ========================================================== */

.campaign-nav-notification-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

    padding-right: 8px;
}


.campaign-nav-notification-content strong {

    display: block;

    margin: 0;

    color: #eee8df;

    font-family: "Cinzel", serif;

    font-size: .72rem;

    font-weight: 500;

    line-height: 1.3;
}


.campaign-nav-notification-content span {

    display: block;

    color: #aaa199;

    font-size: .72rem;

    line-height: 1.45;
}


.campaign-nav-notification-content small {

    display: block;

    margin-top: 1px;

    color: #756e68;

    font-size: .60rem;

    line-height: 1.2;
}


/* ==========================================================
   POINT NON LU
   ========================================================== */

.campaign-nav-notification-unread-dot {

    position: absolute;

    top: 18px;
    right: 11px;

    width: 7px;
    height: 7px;

    background: #b89562;

    border-radius: 50%;

    box-shadow:
        0 0 0 2px rgba(184, 149, 98, .08);
}


/* ==========================================================
   AUCUNE NOTIFICATION
   ========================================================== */

.campaign-nav-notifications-empty {

    padding: 30px 20px;

    text-align: center;
}


.campaign-nav-notifications-empty span {

    display: block;

    margin-bottom: 8px;

    color: #b89562;

    font-size: 24px;

    opacity: .5;
}


.campaign-nav-notifications-empty strong {

    display: block;

    margin-bottom: 5px;

    color: #aaa199;

    font-family: "Cinzel", serif;

    font-size: .72rem;

    font-weight: 400;
}


.campaign-nav-notifications-empty small {

    display: block;

    color: #756e68;

    font-size: .62rem;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.campaign-nav-notifications-footer {

    border-top: 1px solid #39332f;

    background: rgba(0, 0, 0, .08);
}


.campaign-nav-notifications-footer a {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 17px;

    color: #b89562;

    font-family: "Cinzel", serif;

    font-size: .64rem;

    text-decoration: none;

    transition:
        color .15s ease,
        background .15s ease;
}


.campaign-nav-notifications-footer a:hover {

    background: #292522;

    color: #d0ae78;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .campaign-nav-notifications-button {

        width: 38px;
        height: 38px;
    }

}


@media (max-width: 620px) {

    .campaign-nav-notifications-dropdown {

        position: fixed;

        top: 67px;

        right: 10px;

        width: min(360px, calc(100vw - 20px));
    }

    .campaign-nav-notifications-body {

        max-height: calc(100vh - 160px);
    }

}