/* ============================================================
   CSM - MENU CHAVANNES-SUR-MOUDON
   Navigation custom Enfold
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {
    --csm-green-dark: #173c33;
    --csm-green: var(--enfold-main-color-secondary);
    --csm-muted: #756565;
    --csm-border: #ddd4d4;
    --csm-panel: var(--enfold-alternate-color-bg);
    --csm-white: var(--enfold-alternate-color-bg);


    /*
     * Valeur mise à jour automatiquement
     * par le JavaScript selon la hauteur du header.
     */
    --csm-menu-top: 82px;
}


/* ============================================================
   BOX SIZING
============================================================ */

.csm-navigation,
.csm-navigation *,
.csm-navigation *::before,
.csm-navigation *::after {
    box-sizing: border-box;
}

#header-top-bar {
    background: var(--enfold-socket-color-bg);
    color: var(--enfold-main-color-bg);
    font-size: 0.75rem;
}

#header-top-bar a {
    color: var(--enfold-footer-color-color);
    font-size: 0.75rem;
}

#header-top-bar a:hover {
    color: var(--enfold-main-color-bg);
}

#header-top-bar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1.5rem;
    height: auto !important;
    line-height: initial !important;
    padding-top: 10px;
    padding-bottom: 10px;
}


.top-bar__text {
    flex: 1 1 auto;
}

.top-bar__links {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar__links li {
    white-space: nowrap;
    margin: 0;
}

/* Tiret entre chaque lien */
.top-bar__links li + li::before {
    content: "-";
    margin-right: 0.75rem;
}

@media (max-width: 767px) {
    #header-top-bar .container {
        flex-direction: column-reverse;
        align-items: center;
      	gap: 5px;
    }

    .top-bar__text {
        text-align: center;
    }

    .top-bar__links {
        justify-content: center;
    }
  
  .top-bar__links li + li::before {
      content: "-";
      margin-right: 0.1rem;
  }
  .top-bar__links {
      gap: 0.25rem 0.15rem;
  }
}


/* ============================================================
   NAVIGATION PRINCIPALE
============================================================ */

.csm-navigation {
    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    width: auto;
    height: 100%;

    z-index: 100;
}


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

.csm-main-menu {
    display: flex;
    align-items: stretch;

    height: 100%;

    padding: 0;
    margin: 0;

    list-style: none;
}


.csm-main-item {
    position: relative;

    display: flex;
    align-items: stretch;

    padding: 0;
    margin: 0;
}


.csm-main-link {
    position: relative;

    display: flex;
    align-items: center;

    gap: 9px;

    height: 100%;

    padding: 0 14px;

    color: var(--csm-green-dark) !important;

    font-size: 14px;
    font-weight: 500;
    line-height: 1 !important;

    white-space: nowrap;
    text-decoration: none !important;

    transition: color .2s ease;
}


/* Trait sous rubrique */

.csm-main-link::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 0;

    height: 3px;

    background: var(--csm-green);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .2s ease;
}


.csm-main-item.is-open .csm-main-link,
.csm-main-item.is-current .csm-main-link {
    color: var(--csm-green) !important;
}


.csm-main-item.is-open .csm-main-link::after,
.csm-main-item.is-current .csm-main-link::after {
    transform: scaleX(1);
}


/* ============================================================
   CHEVRON DESKTOP
============================================================ */

.csm-chevron {
    display: block;

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    margin-top: -4px;

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


.csm-main-item.is-open .csm-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
}


/* ============================================================
   MEGA MENU DESKTOP
============================================================ */

.csm-mega-menu {
    position: fixed;

    top: var(--csm-menu-top);
    left: 0;
    right: 0;

    width: 100%;

    background: var(--csm-panel);

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .03);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index: 9998;
}


.csm-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ============================================================
   INTÉRIEUR DU MEGA MENU
============================================================ */

.csm-mega-inner {
    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap: 30px;

    width: 100%;

    min-height: 190px;

    padding: 28px 30px 32px;
}


/* ============================================================
   INTRO GAUCHE
============================================================ */

.csm-mega-intro {
    padding-right: 30px;

    border-right: 1px solid var(--csm-border);
}


.csm-mega-title {
    margin: 0 0 9px;

    color: var(--csm-green-dark);

    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
}


.csm-mega-description {
    max-width: 175px;

    color: var(--csm-muted);

    font-size: 14px;
    line-height: 1.5;
}


/* ============================================================
   COLONNES DU MEGA MENU
============================================================ */

.csm-mega-content {
    display: grid;

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

    column-gap: 30px;

    min-width: 0;
}


.csm-mega-column {
    min-width: 0;
}


.csm-mega-entry {
    border-bottom: 1px solid var(--csm-border);
}


/* ============================================================
   LIENS DU MEGA MENU
============================================================ */

.csm-mega-link {
    display: flex;

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

    gap: 20px;

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

    padding: 12px 4px;

    color: var(--csm-green-dark) !important;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3 !important;

    text-decoration: none !important;

    transition:
        color .15s ease,
        padding-left .15s ease;
}


.csm-mega-link:hover,
.csm-mega-entry.is-current .csm-mega-link {
    color: var(--csm-green) !important;
}


.csm-mega-link:hover {
    padding-left: 8px;
}


/* Flèche */

.csm-arrow {
    flex: 0 0 auto;

    margin-left: auto;

    color: #758780;

    font-size: 17px;

    transition: transform .15s ease;
}


.csm-mega-link:hover .csm-arrow {
    transform: translateX(3px);
}


/* ============================================================
   TROISIÈME NIVEAU DESKTOP
============================================================ */

.csm-third-level {
    list-style: none;

    margin: -2px 0 7px;
    padding: 0 0 0 17px;
}


.csm-third-level li {
    margin: 0;
    padding: 0;
}


.csm-third-level a {
    display: block;

    padding: 6px 0;

    color: var(--csm-muted) !important;

    font-size: 14px;
    line-height: 1.35 !important;

    text-decoration: none !important;
}


.csm-third-level a:hover {
    color: var(--csm-green) !important;
}


/* ============================================================
   MOBILE CACHÉ SUR DESKTOP
============================================================ */

.csm-mobile-toggle,
.csm-mobile-menu {
    display: none;
}


/* ============================================================
   PETITS DESKTOPS
============================================================ */

@media only screen
and (min-width: 990px)
and (max-width: 1250px) {

    .csm-main-link {
        padding-left: 10px;
        padding-right: 10px;

        font-size: 13px;
    }

    .csm-main-link::after {
        left: 10px;
        right: 10px;
    }

    .csm-mega-inner {
        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap: 24px;

        padding-left: 24px;
        padding-right: 24px;
    }
}


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

@media only screen and (max-width: 989px) {

    /*
     * Navigation principale :
     * seul le bouton burger reste visible.
     */

    .csm-navigation {
        align-items: center;

        width: auto;
        height: 100%;
    }


    .csm-main-menu,
    .csm-mega-menus {
        display: none !important;
    }


    /* ========================================================
       BURGER
    ======================================================== */

    .csm-mobile-toggle {
        display: flex;

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

        gap: 9px;

        padding: 14px 4px;
        margin: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        color: var(--csm-green-dark);

        cursor: pointer;

        font: inherit;

        appearance: none;
    }


    .csm-mobile-toggle:hover,
    .csm-mobile-toggle:focus-visible {
        color: var(--csm-green);

        background: transparent;
    }


    .csm-mobile-toggle-label {
        font-size: 13px;
        font-weight: 600;

        line-height: 1;

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


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

    .csm-mobile-toggle-icon {
        position: relative;

        display: block;

        width: 25px;
        height: 18px;

        flex: 0 0 25px;
    }


    .csm-mobile-toggle-icon span {
        position: absolute;
        left: 0;

        display: block;

        width: 100%;
        height: 2px;

        background: currentColor;

        border-radius: 2px;

        transition:
            top .25s ease,
            opacity .25s ease,
            transform .25s ease;
    }


    .csm-mobile-toggle-icon span:nth-child(1) {
        top: 0;
    }


    .csm-mobile-toggle-icon span:nth-child(2) {
        top: 8px;
    }


    .csm-mobile-toggle-icon span:nth-child(3) {
        top: 16px;
    }


    /* Burger -> croix */

    .csm-mobile-toggle.is-open
    .csm-mobile-toggle-icon span:nth-child(1) {
        top: 8px;

        transform: rotate(45deg);
    }


    .csm-mobile-toggle.is-open
    .csm-mobile-toggle-icon span:nth-child(2) {
        opacity: 0;
    }


    .csm-mobile-toggle.is-open
    .csm-mobile-toggle-icon span:nth-child(3) {
        top: 8px;

        transform: rotate(-45deg);
    }


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

    .csm-mobile-menu {
        position: fixed;

        display: block;

        top: var(--csm-menu-top);
        left: 0;

        width: 100%;

        height:
            calc(
                100dvh -
                var(--csm-menu-top)
            );

        background: var(--csm-panel);

        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-6px);

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;

        z-index: 99999;
    }


    .csm-mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    .csm-mobile-shell,
    .csm-mobile-panels {
        position: relative;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }


    /* ========================================================
       PANNEAUX DRILL-DOWN
    ======================================================== */

    .csm-mobile-panel {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        background: var(--csm-panel);

        opacity: 0;
        pointer-events: none;

        transform: translateX(100%);

        transition:
            transform .30s cubic-bezier(.4, 0, .2, 1),
            opacity .25s ease;

        z-index: 1;
    }


    .csm-mobile-panel.is-active {
        opacity: 1;
        pointer-events: auto;

        transform: translateX(0);

        z-index: 3;
    }


    .csm-mobile-panel.is-left {
        opacity: 0;
        pointer-events: none;

        transform: translateX(-25%);
    }


    .csm-mobile-panel-inner {
        width: 100%;
        max-width: 720px;
        min-height: 100%;

        padding: 24px 24px 50px;

        margin: 0 auto;
    }


    /* ========================================================
       TITRE RACINE
    ======================================================== */

    .csm-mobile-root-title {
        margin: 0 0 18px;

        color: var(--csm-green-dark);

        font-size: 21px;
        font-weight: 600;
        line-height: 1.2;
    }


    /* ========================================================
       LISTES
    ======================================================== */

    .csm-mobile-list {
        list-style: none;

        padding: 0;
        margin: 0;
    }


    .csm-mobile-list-item {
        padding: 0;
        margin: 0;

        border-bottom:
            1px solid
            var(--csm-border);
    }


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

    .csm-mobile-drill-link,
    .csm-mobile-page-link {
        display: flex;

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

        gap: 20px;

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

        padding: 14px 0;
        margin: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        color: var(--csm-green-dark) !important;

        font-family: inherit;
        font-size: 16px;
        font-weight: 500;

        line-height: 1.35 !important;

        text-align: left;
        text-decoration: none !important;

        cursor: pointer;

        appearance: none;
    }


    .csm-mobile-drill-link:hover,
    .csm-mobile-page-link:hover,
    .csm-mobile-list-item.is-current
    > .csm-mobile-drill-link,
    .csm-mobile-list-item.is-current
    > .csm-mobile-page-link {
        color: var(--csm-green) !important;
    }


    .csm-mobile-item-label {
        flex: 1;
    }


    .csm-mobile-item-arrow {
        flex: 0 0 auto;

        color: #72837d;

        font-size: 19px;
        font-weight: 300;

        transition: transform .15s ease;
    }


    .csm-mobile-drill-link:hover
    .csm-mobile-item-arrow,
    .csm-mobile-page-link:hover
    .csm-mobile-item-arrow {
        transform: translateX(3px);
    }


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

    .csm-mobile-back {
        display: inline-flex;

        align-items: center;

        gap: 9px;

        padding: 0;
        margin: 0 0 25px;

        border: 0;

        background: transparent;
        box-shadow: none;

        color: var(--csm-green);

        font-family: inherit;
        font-size: 14px;
        font-weight: 500;

        cursor: pointer;

        appearance: none;
    }


    .csm-mobile-back:hover {
        color: var(--csm-green-dark);
    }


    .csm-mobile-back-arrow {
        font-size: 18px;

        transition: transform .15s ease;
    }


    .csm-mobile-back:hover
    .csm-mobile-back-arrow {
        transform: translateX(-3px);
    }


    /* ========================================================
       TITRE DU SOUS-NIVEAU
    ======================================================== */

    .csm-mobile-panel-title {
        margin: 0 0 10px;

        color: var(--csm-green-dark);

        font-size: 22px;
        font-weight: 600;

        line-height: 1.2;
    }


    .csm-mobile-panel-description {
        max-width: 440px;

        margin: 0 0 22px;

        color: var(--csm-muted);

        font-size: 14px;
        line-height: 1.5;
    }


    /* ========================================================
       VOIR LA RUBRIQUE
    ======================================================== */

    .csm-mobile-overview-link {
        display: flex;

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

        gap: 20px;

        width: 100%;

        padding: 14px 0;
        margin: 0 0 8px;

        border-top:
            1px solid
            var(--csm-border);

        border-bottom:
            1px solid
            var(--csm-border);

        color: var(--csm-green) !important;

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

        line-height: 1.35 !important;

        text-decoration: none !important;
    }


    /* ========================================================
       BLOQUE LE SCROLL DE LA PAGE
    ======================================================== */

    /*
     * Sur html et non sur body : un overflow:hidden sur body en ferait
     * un conteneur de scroll → le #header sticky décroche et part hors
     * écran avec le burger (voir le bloc sticky en fin de fichier).
     */
    html:has(body.csm-menu-open) {
        overflow: hidden;
    }
}


.csm-mega-menu.is-switching {
    transition: none !important;
    transform: translateY(0) !important;
}


/* ============================================================
   PETITS MOBILES
============================================================ */

@media only screen and (max-width: 479px) {

    .csm-mobile-panel-inner {
        padding:
            22px
            20px
            45px;
    }


    .csm-mobile-panel-title {
        font-size: 20px;
    }


    .csm-mobile-drill-link,
    .csm-mobile-page-link {
        min-height: 56px;

        font-size: 15px;
    }
}


/* ============================================================
   ACCESSIBILITÉ
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .csm-mega-menu,
    .csm-mobile-menu,
    .csm-mobile-panel,
    .csm-mobile-toggle-icon span {
        transition: none !important;
    }
}

/* =========================================================
   CHAVANNES-SUR-MOUDON
   Compensation Top Bar + Header Enfold
   ========================================================= */

@media only screen and (min-width: 990px) {

    /* Top bar = 38px
       Header principal = 88px
       Total = 126px
    */

    html.html_header_top.html_header_sticky #main {
        padding-top: 125px !important;
    }

}


/* Mobile / tablette */
@media only screen and (max-width: 989px) {

    html.html_header_top #main {
        padding-top: 0 !important;
    }

    /*
     * Header sticky en mobile.
     * Enfold repasse #header en position:relative sous 990px, et
     * #wrap_all {overflow:hidden} bloque tout position:sticky :
     * overflow:clip coupe pareil sans créer de conteneur de scroll.
     * Tout le header colle (barre du haut + logo/burger) ; le top
     * (calculé en JS) compense la barre admin WP quand elle est fixe.
     */
    html.responsive #wrap_all {
        overflow: clip;
    }

    /*
     * Idem pour html + body (#top) : Enfold leur met à tous deux
     * overflow-x:hidden, ce qui fait de body un conteneur de scroll
     * (qui ne défile jamais) → le sticky s'y accroche et ne colle pas.
     */
    html.responsive,
    html.responsive body,
    html.responsive #top {
        overflow-x: clip;
    }

    html.responsive.html_header_top #header {
        position: sticky !important;
        top: var(--csm-header-sticky-top, 0px);
        z-index: 500;
    }

}