/* ============================================================
   VGC HEADER NAVIGATION
   Harmonisation avec homepage VGC
   ============================================================ */


/* ------------------------------------------------------------
   PAGE DE PREVISUALISATION
   ------------------------------------------------------------ */

.vgc-preview-page {
    min-height: 620px;
    padding-top: 18px;
    background: #fff;
}

.vgc-preview-info {
    width: min(1180px, calc(100% - 40px));
    box-sizing: border-box;

    margin: 0 auto 9px;
    padding: 8px 2px 10px;

    display: flex;
    align-items: center;
    gap: 24px;

    border-bottom: 1px solid #ded2ca;

    background: transparent;

    color: #9a8880;
    font-size: 11px;
    line-height: 1.3;
}

.vgc-preview-info strong {
    color: #72182b;
    font-weight: 500;
}

.vgc-preview-note {
    display: none;
}


/* ------------------------------------------------------------
   BARRE PRINCIPALE
   ------------------------------------------------------------ */

.vgc-mega-nav {
    position: relative;
    z-index: 100;

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;

    background: #fffdfc;

    border-top: 1px solid #ded2ca;
    border-bottom: 1px solid #ded2ca;

    box-shadow: none;
}

.vgc-mega-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: stretch;
}

.vgc-mega-root {
    position: static;
    min-width: 0;
    flex: 1 1 0;
}

/* ------------------------------------------------------------
   LIENS NIVEAU 1
   ------------------------------------------------------------ */

.vgc-mega-root-link {
    position: relative;

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

    min-height: 56px;
    box-sizing: border-box;

    padding: 8px 10px;

    border: 0;
    background: transparent;

    color: #332823;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    line-height: 1.28;

    font-weight: 500;

    text-align: center;
    text-decoration: none;

    text-transform: uppercase;
    letter-spacing: .055em;

    cursor: pointer;

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


/* petit trait actif façon VGC */

.vgc-mega-root-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 0;
    height: 1px;

    background: #a65348;

    transform: translateX(-50%);

    transition: width .18s ease;
}


.vgc-mega-root:hover >
.vgc-mega-root-link,

.vgc-mega-root:focus-within >
.vgc-mega-root-link {
    color: #72182b;

    background:
        rgba(114, 24, 43, .018);
}


.vgc-mega-root:hover >
.vgc-mega-root-link::after,

.vgc-mega-root:focus-within >
.vgc-mega-root-link::after {
    width: 38px;
}


/*
 * Les deux rubriques éditoriales / commerciales
 * restent légèrement plus présentes.
 */




/* ------------------------------------------------------------
   MEGA PANEL
   ------------------------------------------------------------ */

.vgc-mega-dropdown {
    display: none;

    position: absolute;

    left: 0;
    right: 0;
    top: 100%;

    box-sizing: border-box;

    background: #fffdfc;

    border-top: 1px solid #ded2ca;
    border-bottom: 1px solid #ded2ca;

    box-shadow:
        0 15px 30px
        rgba(60, 30, 20, .07);
}


.vgc-mega-root:hover
.vgc-mega-dropdown,

.vgc-mega-root:focus-within
.vgc-mega-dropdown {
    display: block;
}


.vgc-mega-dropdown-inner {
    width: 100%;
    max-width: none;

    box-sizing: border-box;

    margin: 0;
    padding: 27px 30px 22px;
}


/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */

.vgc-mega-sections {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(245px, 1fr)
        );

    gap: 32px 46px;
}


.vgc-mega-section {
    min-width: 0;
}


/*
 * Titres inspirés exactement de ceux de la homepage
 */

.vgc-mega-section-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 15px;
    padding: 0;

    color: #72182b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;
    line-height: 1.15;

    font-style: normal;
    font-weight: 400;

    text-transform: none;
    letter-spacing: 0;
}


.vgc-mega-section-title::after {
    content: "";

    width: 34px;
    height: 1px;

    flex: 0 0 34px;

    background: #a65348;
}


/* ------------------------------------------------------------
   LIENS
   ------------------------------------------------------------ */

.vgc-mega-links {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 30px;
    row-gap: 1px;
}


.vgc-mega-links a {
    display: block;

    padding: 5px 0;

    color: #4a3c36;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 400;

    text-decoration: none;

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


.vgc-mega-links a:hover {
    color: #72182b;
    text-decoration: none;

    transform: translateX(2px);
}


/*
 * Sélections commerciales / SEO
 */

.vgc-mega-links a.is-featured {
    color: #72182b;
    font-weight: 600;
}


/* ------------------------------------------------------------
   LIEN VOIR TOUT
   ------------------------------------------------------------ */

.vgc-mega-footer {
    margin-top: 22px;
    padding-top: 15px;

    border-top: 1px solid #ded2ca;
}


.vgc-mega-footer a {
    color: #a65348;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;
    font-weight: 400;

    text-decoration: none;
}


.vgc-mega-footer a:hover {
    color: #72182b;
}


/* ------------------------------------------------------------
   AUTRES
   ------------------------------------------------------------ */

/*
 * Sur Autres nous avons quatre familles :
 * régions / domaines / monde / spiritueux.
 */

.vgc-mega-root--autres-vins
.vgc-mega-sections {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 34px 58px;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1050px) {

    .vgc-mega-root-link {
        padding-left: 6px;
        padding-right: 6px;

        font-size: 10px;
    }

    .vgc-mega-dropdown-inner {
        padding-left: 22px;
        padding-right: 22px;
    }

    .vgc-mega-links {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767px) {

    .vgc-preview-page {
        padding-top: 0;
    }

    .vgc-preview-info {
        width: calc(100% - 30px);

        display: block;

        margin-bottom: 12px;
    }

    .vgc-preview-info span {
        display: block;
        margin-top: 4px;
    }

    .vgc-mega-nav {
        width: 100%;

        border-left: 0;
        border-right: 0;
    }

    .vgc-mega-inner {
        display: block;
    }

    .vgc-mega-root-link {
        justify-content: flex-start;

        width: 100%;
        min-height: 48px;

        padding: 13px 20px;

        text-align: left;

        border-bottom:
            1px solid #ded2ca;
    }

    .vgc-mega-root-link::after {
        display: none;
    }

    .vgc-mega-dropdown {
        position: static;

        display: block;

        border: 0;
        box-shadow: none;
    }

    .vgc-mega-dropdown-inner {
        padding: 18px 24px 25px;
    }

    .vgc-mega-sections,
    .vgc-mega-root--autres-vins
    .vgc-mega-sections {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .vgc-mega-links {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SEO PROTECTED - LIENS SECONDAIRES
   ============================================================ */

.vgc-seo-more-wrap {
    width: min(1180px, calc(100% - 40px));
    box-sizing: border-box;

    margin: -1px auto 0;

    background: #fffdfc;

    border-bottom: 1px solid #ded2ca;
}


.vgc-seo-more {
    margin: 0;
    padding: 0;
}


.vgc-seo-more-summary {
    box-sizing: border-box;

    min-height: 39px;

    padding: 10px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    list-style: none;

    cursor: pointer;

    color: #75655e;

    font-size: 12px;
    line-height: 1.3;
}


.vgc-seo-more-summary::-webkit-details-marker {
    display: none;
}


.vgc-seo-more-title {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: #72182b;

    font-size: 13px;
}


.vgc-seo-more-action {
    position: relative;

    padding-right: 18px;

    color: #9a8880;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .05em;
}


.vgc-seo-more-action::after {
    content: "+";

    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-52%);

    color: #a65348;

    font-size: 17px;
    font-weight: 300;
}


.vgc-seo-more[open]
.vgc-seo-more-action::after {
    content: "−";
}


.vgc-seo-more-panel {
    padding: 18px 22px 24px;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 24px 42px;

    border-top: 1px solid #eee5df;
}


.vgc-seo-more-group-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 10px;
    padding: 0;

    color: #72182b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 400;
}


.vgc-seo-more-group-title::after {
    content: "";

    width: 28px;
    height: 1px;

    background: #a65348;
}


.vgc-seo-more-links {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 28px;
    row-gap: 1px;
}


.vgc-seo-more-links a {
    display: block;

    padding: 5px 0;

    color: #594b45;

    font-size: 12px;
    line-height: 1.3;

    text-decoration: none;
}


.vgc-seo-more-links a:hover,
.vgc-seo-more-links a:focus {
    color: #72182b;

    text-decoration: underline;
    text-underline-offset: 2px;
}


@media (max-width: 767px) {

    .vgc-seo-more-wrap {
        width: 100%;
    }

    .vgc-seo-more-summary {
        padding:
            12px 20px;
    }

    .vgc-seo-more-panel {
        grid-template-columns:
            1fr;

        padding:
            17px 24px 22px;
    }

    .vgc-seo-more-links {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   VGC SEO REGIONAL V2
   ============================================================ */


/*
 * Conteneur fallback :
 * visible uniquement si le JS n'a pas pu déplacer les blocs.
 */

.vgc-seo-regional-mount {
    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    background: #fffdfc;
}


/*
 * Une fois injecté dans le mega-menu régional.
 */

.vgc-seo-regional-source.is-mounted {
    margin-top: 18px;
    padding-top: 13px;

    border-top: 1px solid #ded2ca;
}


.vgc-seo-more--regional {
    margin: 0;
    padding: 0;
}


.vgc-seo-more--regional
.vgc-seo-more-summary {
    min-height: 32px;

    padding: 0;

    background: transparent;
}


.vgc-seo-more--regional
.vgc-seo-more-title {
    color: #a65348;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;
    font-weight: 400;
}


.vgc-seo-more--regional
.vgc-seo-more-action {
    margin-left: auto;

    color: #9a8880;

    font-size: 9px;
}


.vgc-seo-more--regional
.vgc-seo-more-panel {
    margin-top: 9px;
    padding: 12px 0 3px;

    border-top:
        1px solid #eee5df;

    display: block;
}


.vgc-seo-more-links--regional {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    column-gap: 30px;
    row-gap: 1px;
}


.vgc-seo-more-links--regional a {
    display: block;

    padding: 5px 0;

    color: #4a3c36;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 400;

    text-decoration: none;
}


.vgc-seo-more-links--regional a:hover,
.vgc-seo-more-links--regional a:focus {
    color: #72182b;

    text-decoration: none;
}


/*
 * Le footer "Voir tout..." garde de l'espace
 * après l'accordéon régional.
 */

.vgc-seo-regional-source.is-mounted
+ .vgc-mega-footer {
    margin-top: 15px;
}


/* ------------------------------------------------------------
   TABLETTE
   ------------------------------------------------------------ */

@media (max-width: 1050px) {

    .vgc-seo-more-links--regional {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .vgc-seo-regional-mount {
        width: 100%;
    }

    .vgc-seo-regional-source.is-mounted {
        margin:
            12px 24px 0;

        padding-top: 12px;
    }

    .vgc-seo-more-links--regional {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   VGC REAL HEADER INTEGRATION V1
   Le template preview.phtml est reutilise dans le vrai header.
   On neutralise uniquement les elements propres a la preview.
   ============================================================ */


/*
 * Le conteneur Magento du vrai bandeau.
 */

.page-header .bottom-container {
    position: relative;
    overflow: visible;
}


/*
 * preview.phtml possede un wrapper utilise sur la page de test.
 * Dans le vrai header il ne doit creer ni hauteur ni espacement.
 */

.page-header
.bottom-container
.vgc-preview-page {
    min-height: 0;
    padding-top: 0;
    margin: 0;

    background: transparent;
}


/*
 * Informations visibles uniquement sur la page de preview.
 */

.page-header
.bottom-container
.vgc-preview-info,

.page-header
.bottom-container
.vgc-preview-note {
    display: none !important;
}


/*
 * Alignement du bandeau avec le header actuel.
 */

.page-header
.bottom-container
.vgc-mega-nav {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}


/*
 * Le bloc SEO est rendu cote serveur puis deplace
 * par seo-regional.js dans Bordeaux/Bourgogne/Rhone.
 */

.page-header
.bottom-container
.vgc-seo-regional-mount {
    width: min(1180px, calc(100% - 40px));

    margin-left: auto;
    margin-right: auto;
}


/*
 * Le mega-menu doit passer devant le contenu de page.
 */

.page-header
.bottom-container
.vgc-mega-nav,
.page-header
.bottom-container
.vgc-mega-dropdown {
    z-index: 999;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .page-header
    .bottom-container
    .vgc-mega-nav,

    .page-header
    .bottom-container
    .vgc-seo-regional-mount {
        width: 100%;
        max-width: none;
    }
}


/* ============================================================
   VGC HEADER COMPACT V2
   ============================================================ */


/* ------------------------------------------------------------
   1. Le fallback SEO ne doit jamais apparaitre sous le bandeau
   ------------------------------------------------------------ */

.page-header
.bottom-container
> .vgc-seo-regional-mount {
    display: none !important;
}


/*
 * Une fois déplacé par JS dans son menu régional,
 * le bloc redevient visible.
 */

.page-header
.vgc-mega-dropdown
.vgc-seo-regional-source.is-mounted {
    display: block !important;
}


/* ------------------------------------------------------------
   2. CONTENEUR HEADER
   ------------------------------------------------------------ */

.page-header
.bottom-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    min-height: 0 !important;
}


/* ------------------------------------------------------------
   3. BARRE PRINCIPALE PLUS COMPACTE
   ------------------------------------------------------------ */

.page-header
.bottom-container
.vgc-mega-root-link {
    min-height: 44px;

    padding:
        5px 8px;

    font-size: 10.5px;

    line-height: 1.15;
}


.page-header
.bottom-container
.vgc-mega-root-link::after {
    bottom: 5px;
}


/* ------------------------------------------------------------
   4. PANNEAUX PLUS DENSES
   ------------------------------------------------------------ */

.page-header
.bottom-container
.vgc-mega-dropdown-inner {
    padding:
        17px 24px 15px;
}


.page-header
.bottom-container
.vgc-mega-sections {
    gap:
        22px 38px;
}


.page-header
.bottom-container
.vgc-mega-section-title {
    margin-bottom: 9px;

    gap: 9px;

    font-size: 15px;
}


.page-header
.bottom-container
.vgc-mega-section-title::after {
    width: 27px;
    flex-basis: 27px;
}


/* ------------------------------------------------------------
   5. LIENS PLUS SERRES
   ------------------------------------------------------------ */

.page-header
.bottom-container
.vgc-mega-links {
    column-gap: 24px;
}


.page-header
.bottom-container
.vgc-mega-links a {
    padding:
        3px 0;

    font-size: 12px;

    line-height: 1.25;
}


/* ------------------------------------------------------------
   6. COMPLEMENTS SEO REGIONAUX
   ------------------------------------------------------------ */

.page-header
.bottom-container
.vgc-seo-regional-source.is-mounted {
    margin-top: 10px;

    padding-top: 8px;
}


.page-header
.bottom-container
.vgc-seo-more--regional
.vgc-seo-more-summary {
    min-height: 25px;
}


.page-header
.bottom-container
.vgc-seo-more--regional
.vgc-seo-more-title {
    font-size: 12px;
}


.page-header
.bottom-container
.vgc-seo-more--regional
.vgc-seo-more-action {
    font-size: 8px;
}


.page-header
.bottom-container
.vgc-seo-more--regional
.vgc-seo-more-panel {
    margin-top: 6px;

    padding:
        8px 0 1px;
}


.page-header
.bottom-container
.vgc-seo-more-links--regional a {
    padding:
        3px 0;

    font-size: 11px;
}


/* ------------------------------------------------------------
   7. VOIR TOUT
   ------------------------------------------------------------ */

.page-header
.bottom-container
.vgc-mega-footer {
    margin-top: 12px;

    padding-top: 9px;
}


.page-header
.bottom-container
.vgc-mega-footer a {
    font-size: 13px;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .page-header
    .bottom-container
    .vgc-mega-root-link {
        min-height: 42px;

        padding:
            10px 18px;
    }


    .page-header
    .bottom-container
    .vgc-mega-dropdown-inner {
        padding:
            12px 20px 16px;
    }
}


/* ============================================================
   VGC BANDEAU HEADER V3
   Plus compact + plus premium + hierarchie plus nette
   ============================================================ */

@media (min-width: 768px) {

    /*
     * Bandeau général
     */
    .page-header
    .bottom-container
    .vgc-mega-nav {
        width: min(1260px, calc(100% - 54px));
        max-width: 1260px;

        margin: 0 auto;

        background: #fffdfb;

        border-top: 0;
        border-bottom: 1px solid #d9c3b8;

        box-shadow: none;
    }


    /*
     * On abandonne les 7 colonnes identiques.
     * Les entrées prennent seulement la largeur dont elles ont besoin.
     */
    .page-header
    .bottom-container
    .vgc-mega-inner {
        display: flex;

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

        gap: 5px;

        width: 100%;
    }


    .page-header
    .bottom-container
    .vgc-mega-root {
        flex: 0 0 auto;
    }


    /*
     * Niveau 1
     */
    .page-header
    .bottom-container
    .vgc-mega-root-link {
        min-height: 46px;

        padding:
            0 16px;

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

        white-space: nowrap;

        color: #3d302c;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 12px;
        line-height: 1;

        font-weight: 600;

        letter-spacing: .045em;

        text-transform: uppercase;
    }


    /*
     * Les 5 vraies entrées catalogue ressortent davantage.
     */
    


    /*
     * Séparation visuelle :
     * catalogue à gauche / commercial + éditorial à droite.
     */
    


    /*
     * Vendez / Informations
     */
    


    /*
     * Plus de retour ligne sur Informations sur le vin.
     */
    .page-header
    .bottom-container
    .vgc-mega-root:last-child
    > .vgc-mega-root-link {
        white-space: nowrap;
    }


    /*
     * Soulignement au hover :
     * plus visible mais toujours fin.
     */
    .page-header
    .bottom-container
    .vgc-mega-root-link::after {
        bottom: 0;

        height: 2px;

        background: #a65348;
    }


    .page-header
    .bottom-container
    .vgc-mega-root:hover
    > .vgc-mega-root-link::after,

    .page-header
    .bottom-container
    .vgc-mega-root:focus-within
    > .vgc-mega-root-link::after {
        width: 54px;
    }


    /*
     * Hover très léger.
     */
    .page-header
    .bottom-container
    .vgc-mega-root:hover
    > .vgc-mega-root-link,

    .page-header
    .bottom-container
    .vgc-mega-root:focus-within
    > .vgc-mega-root-link {
        color: #72182b;

        background:
            rgba(114, 24, 43, .025);
    }
}


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

@media (min-width: 768px) and (max-width: 1100px) {

    .page-header
    .bottom-container
    .vgc-mega-inner {
        gap: 0;
    }

    .page-header
    .bottom-container
    .vgc-mega-root-link {
        padding:
            0 9px;

        font-size: 10.5px;
    }

    

    

    
}

/* ============================================================
   VGC - ARCHITECTURE SEMANTIQUE DU MENU
   Catalogue :
   Bordeaux / Bourgogne / Rhône / Champagne /
   Autres vins / Grands millésimes

   Utility :
   Vendez vos vins / Informations sur le vin
   ============================================================ */

@media (min-width: 768px) {

    .page-header
    .bottom-container
    .vgc-mega-root--group-catalogue
    > .vgc-mega-root-link {
        color: #44262b;
        font-size: 12.5px;
        font-weight: 600;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--group-utility
    > .vgc-mega-root-link {
        color: #72182b;
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: .04em;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--grands-millesimes {
        border-left: 1px solid #dfd0c8;
        margin-left: 22px;
        padding-left: 22px;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--utility-start {
        border-left: 1px solid #dfd0c8;
        margin-left: 22px;
        padding-left: 22px;
    }
}

@media (min-width: 768px) and (max-width: 1050px) {

    .page-header
    .bottom-container
    .vgc-mega-root--group-catalogue
    > .vgc-mega-root-link {
        font-size: 11px;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--group-utility
    > .vgc-mega-root-link {
        font-size: 10px;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--grands-millesimes {
        margin-left: 9px;
        padding-left: 9px;
    }

    .page-header
    .bottom-container
    .vgc-mega-root--utility-start {
        margin-left: 9px;
        padding-left: 9px;
    }
}