@charset "utf-8";

/*
===================================================================
    HEADER
    Desktop : 2 étages - logo + liens utilitaires, puis la barre des
              rubriques à sous-menus, séparée par un liseré bleu.
    Mobile  : logo + burger, menu en offcanvas Bootstrap.
===================================================================
*/

.site-header {
    background: #FFF;
    position: relative;
    z-index: var(--zindex-header);
}

/* ===============================
 *  ETAGE 1 : LOGO + UTILITAIRES
=============================== */
.header-top {
    padding: var(--space-3) 0;
}

.header-logo img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

/* Mon compte, téléphone et favoris, alignés à droite du logo */
.header-utility {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-utility a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--neutral-2x-dark);
    white-space: nowrap;
}

.header-utility a:hover,
.header-utility a:focus {
    color: var(--primary-main);
}

.header-utility img {
    width: 18px;
    height: 18px;
    filter: var(--fill-svg-primary-main);
}

/* RESEAUX SOCIAUX */
.header-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Sans flex, l'icone se pose sur la ligne de base et decale le bloc vers le bas */
.header-social a {
    display: inline-flex;
    align-items: center;
}

.header-social img {
    width: 19px;
    height: 19px;
    filter: var(--fill-svg-primary-main);
    transition: filter var(--transition-base);
}

.header-social a:hover img {
    filter: var(--fill-svg-primary-dark);
}

/* FAVORIS : compteur */
.nav-favori {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.nav-favori img {
    width: 20px;
    height: 20px;
    filter: var(--fill-svg-neutral-mid);
    transition: filter var(--transition-base);
}

.nav-favori.has-favoris img,
.nav-favori:hover img {
    filter: var(--fill-svg-red);
}

/* FAVORIS : coeur anime (Lottie) superpose a l'icone, joue a l'ajout d'un favori */
.favori-icon-wrapper {
    position: relative;
    display: inline-flex;
}

.lottie-heart-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    pointer-events: none;
    filter: var(--fill-svg-red);
}

.favori-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: var(--radius-xl);
    background: var(--primary-main);
    color: #FFF;
    font-size: .688rem;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.favori-badge.is-empty {
    background: var(--neutral-main);
}

/* ===============================
 *  ETAGE 2 : RUBRIQUES
=============================== */
/* Le lisere s'arrete aux marges du container, comme l'ancien site */
.header-main > .container {
    border-top: 1px solid var(--primary-main);
}

/* Rubriques reparties sur toute la largeur du container, comme l'ancien site */
.header-rubriques {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-rubriques > li {
    display: flex;
    align-items: center;
}

.header-rubriques > li > a,
.header-rubriques > li > button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .4rem;
    font-size: 1rem;
    font-weight: var(--fw-normal);
    text-transform: uppercase;
    color: var(--neutral-2x-dark);
    background: none;
    border: 0;
    transition: color var(--transition-base);
}

.header-rubriques > li > a:hover,
.header-rubriques > li > a:focus,
.header-rubriques > li > button:hover,
.header-rubriques > li > button:focus,
.header-rubriques > li > button.show {
    color: var(--primary-main);
}

/* Rubrique courante : gras */
.header-rubriques > li > .is-active {
    font-weight: var(--fw-bold);
}

/* Rubriques annonces toujours mises en avant, comme la classe `feature`
   de l'ancien site. Placée après `is-active` pour rester en 900 sur la page courante. */
.header-rubriques > li > .is-feature {
    font-weight: var(--fw-black);
}

/* SOUS-MENUS (desktop et offcanvas) */
.site-header .dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-color: var(--neutral-light);
    --bs-dropdown-box-shadow: var(--shadow-md);
    --bs-dropdown-font-size: .938rem;
    --bs-dropdown-link-color: var(--neutral-2x-dark);
    --bs-dropdown-link-hover-color: var(--primary-main);
    --bs-dropdown-link-hover-bg: var(--primary-2x-light);
    --bs-dropdown-link-active-color: var(--primary-main);
    --bs-dropdown-link-active-bg: var(--primary-2x-light);
    --bs-dropdown-item-padding-y: .5rem;
}

/* `a:link` de base.css (0,1,1) l'emporte sur le `.dropdown-item` de Bootstrap (0,1,0) */
.site-header .dropdown-item:link,
.site-header .dropdown-item:visited {
    color: var(--bs-dropdown-link-color);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
}

.header-rubriques .dropdown-menu {
    border-top: 2px solid var(--primary-main);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.header-rubriques .rubrique-home img {
    width: 18px;
    height: 18px;
    filter: var(--fill-svg-neutral-2x-dark);
}

.header-rubriques .rubrique-home:hover img {
    filter: var(--fill-svg-primary-main);
}

/* ===============================
 *  BURGER + OFFCANVAS (mobile)
=============================== */
.navbar-toggler {
    border: 0;
    padding: 0;
    line-height: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler img {
    width: 32px;
    height: 32px;
    filter: var(--fill-svg-primary-main);
}

.offcanvas {
    background: #FFF;
}

.offcanvas-header {
    border-bottom: 1px solid var(--primary-main);
}

.offcanvas-header .header-logo img {
    height: 38px;
}

.offcanvas-body {
    padding: var(--space-4) var(--space-4) var(--space-6);
}

.offcanvas .nav-rubriques,
.offcanvas .nav-utility {
    list-style: none;
    margin: 0;
    padding: 0;
}

.offcanvas .nav-rubriques > li > a,
.offcanvas .nav-rubriques > li > button,
.offcanvas .nav-utility > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--neutral-light);
    color: var(--neutral-2x-dark);
}

.offcanvas .nav-rubriques > li > a,
.offcanvas .nav-rubriques > li > button {
    font-size: 1.125rem;
    text-transform: uppercase;
}

/* Le chevron du sous-menu se cale à droite */
.offcanvas .nav-rubriques > li > button {
    justify-content: space-between;
}

.offcanvas .nav-rubriques > li > .is-active {
    color: var(--primary-main);
    font-weight: var(--fw-bold);
}

/* Sous-menu en accordéon : il pousse les rubriques suivantes au lieu de les recouvrir */
.offcanvas .dropdown-menu {
    position: static;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
}

.offcanvas .dropdown-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-light);
    white-space: normal;
}

.offcanvas .nav-utility {
    margin-top: var(--space-4);
}

.offcanvas .nav-utility > li > a {
    font-size: 1rem;
    color: var(--neutral-dark);
}

.offcanvas .nav-rubriques img,
.offcanvas .nav-utility img {
    width: 20px;
    height: 20px;
    filter: var(--fill-svg-primary-main);
}

/* Le coeur garde son code couleur : gris a vide, rouge des qu'il y a un favori */
.offcanvas .nav-favori img {
    filter: var(--fill-svg-neutral-mid);
}

.offcanvas .nav-favori.has-favoris img,
.offcanvas .nav-favori:hover img {
    filter: var(--fill-svg-red);
}

.offcanvas .header-social {
    margin-top: var(--space-4);
    justify-content: center;
    gap: var(--space-4);
}

.offcanvas .header-social img {
    width: 24px;
    height: 24px;
}

.offcanvas .btn-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
}

/*
===================================================================
    Large devices (desktop, 992px and up)
===================================================================
*/
@media (min-width: 992px) {
    .header-logo img {
        height: 93px;
    }

    .header-top {
        padding: var(--space-4) 0 var(--space-3);
    }
}