/* Sénat Header Pro — Public CSS v1.7
   Les couleurs sont appliquées en inline style sur les éléments HTML.
   Ce fichier gère : layout, hover, dropdown show/hide, animations, responsive.
*/
#senat-hdr, #senat-hdr * { box-sizing: border-box; }
#senat-hdr a { text-decoration: none; }

/* ---- Social bar ---- */
.sh-social-bar { width: 100%; }

/* ---- Middle ---- */
.sh-mid { position: relative; z-index: 1; }
.sh-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sh-contacts { flex-wrap: wrap; }
.sh-brand-sep { display: block; }

/* ---- Nav ---- */
.sh-nav { position: relative; z-index: 2; }

.sh-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.sh-nav-item { position: relative; list-style: none !important; }

/* Caret rotation */
.sh-caret { transition: transform .18s; }

/* =====================================================
   DESKTOP — dropdown géré par CSS :hover uniquement
   (préfixe #senat-hdr pour battre les CSS de thème)
   ===================================================== */
#senat-hdr .sh-dropdown {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    animation: sh-dd-in .15s ease;
}

/* Ouverture hover desktop */
#senat-hdr .sh-nav-item:hover > .sh-dropdown   { display: block !important; }
#senat-hdr .sh-nav-item:hover > .sh-nav-link .sh-caret { transform: rotate(180deg); }

/* Sub-dropdown */
#senat-hdr .sh-dropdown .sh-dropdown {
    top: 0;
    left: 100%;
    border-top: none !important;
}
#senat-hdr .sh-dropdown .sh-nav-link {
    display: flex !important;
    width: 100% !important;
}

/* =====================================================
   MOBILE — dropdown géré par JS (.sh-dd-open)
   Règles définies ICI (hors media query) pour être
   disponibles à toutes les tailles via la classe JS.
   La désactivation du :hover est dans le media query.
   ===================================================== */
#senat-hdr .sh-dropdown.sh-dd-open { display: block !important; }
#senat-hdr .sh-nav-item.sh-item-open > .sh-dropdown { display: block !important; }
#senat-hdr .sh-nav-item.sh-item-open > .sh-nav-link .sh-caret { transform: rotate(180deg); }

/* Hamburger */
.sh-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    margin-left: auto;
    /* FIX CHROME : élimine le délai de 300 ms sur les taps */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* FIX CHROME : touch-action sur tous les liens de navigation */
.sh-nav-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes sh-dd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/*
 * FIX DROPDOWN CACHÉ :
 * overflow-x:hidden sur #senat-hdr forçait le navigateur à calculer
 * overflow-y:auto sur le même élément → les dropdowns absolus
 * qui dépassent en bas du header étaient coupés.
 * Solution : overflow visible sur le header, overflow-x:clip sur
 * un pseudo-élément pour bloquer le scroll horizontal sans créer
 * de contexte de formatage qui coupe les enfants absolus.
 */
#senat-hdr {
    max-width: 100% !important;
    overflow: visible !important;
}
/* Empêcher le débordement horizontal sans affecter les positionnés absolus */
#senat-hdr .sh-social-bar,
#senat-hdr .sh-mid,
#senat-hdr .sh-nav {
    max-width: 100% !important;
}

#senat-hdr .sh-container {
    max-width: 100% !important;
}

/* ---- Tablette ≤ 1024 px ---- */
@media (max-width: 1024px) {
    .sh-contacts { display: none !important; }
}

/* ---- Mobile ≤ 768 px ---- */
@media (max-width: 768px) {

    .sh-bar-side,
    .sh-nav-side { display: none !important; }

    .sh-mid .sh-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 12px !important;
        align-items: center !important;
    }

    .sh-brand {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        gap: 10px !important;
    }
    .sh-brand img { height: 58px !important; }
    .sh-brand .sh-brand-sep,
    .sh-brand > div[style*="width:3px"] { height: 48px !important; }
    .sh-brand span:first-child { font-size: 2rem !important; }

    .sh-contacts { display: none !important; }

    .sh-esenat-btn {
        margin-left: auto !important;
        padding: 9px 13px !important;
        font-size: 11px !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }
    .sh-esenat-btn svg { width: 13px !important; height: 13px !important; }

    /*
     * FIX MENU MOBILE :
     * Le .sh-container de la nav est un flex-row sans wrap.
     * Quand .sh-nav-menu s'ouvre (width:100%), il ne peut pas
     * passer à la ligne → il est écrasé et invisible.
     * Solution : flex-wrap:wrap + order:-1 sur le hamburger
     * pour qu'il apparaisse en haut à droite et que le menu
     * se déploie sur la ligne suivante (width:100%).
     */
    .sh-nav .sh-container {
        flex-wrap: wrap !important;
        align-items: center !important;
        /* FIX CHROME : flex:1 sur le container parent empêche
           flex-wrap de fonctionner → on le réinitialise */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* FIX CHROME : forcer le parent flex à laisser la place au wrap */
    .sh-nav > div[style*="flex:1"] {
        flex-wrap: wrap !important;
    }

    /* Hamburger visible sur mobile
     * FIX CHROME : on cible aussi avec l'attribut pour contrer
     * l'inline style="display:none" que Chrome peut faire primer */
    .sh-hamburger,
    button.sh-hamburger,
    #senat-hdr .sh-hamburger {
        display: flex !important;
        order: -1 !important;
    }

    /* Menu principal vertical, caché jusqu'à .sh-open */
    .sh-nav-menu {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .sh-nav-menu.sh-open { display: flex !important; }

    .sh-nav-link  {
        width: 100% !important;
        /* FIX CHROME : white-space:nowrap inline déborde sur mobile */
        white-space: normal !important;
        word-break: break-word;
    }
    .sh-nav-item  { width: 100% !important; }

    /* Dropdown : position statique sur mobile */
    #senat-hdr .sh-dropdown,
    #senat-hdr ul.sh-dropdown {
        display: none !important;
        position: static !important;
        box-shadow: none !important;
        border-top: none !important;
        border-left: none !important;
        animation: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Désactiver le :hover sur mobile (inutile au toucher) */
    #senat-hdr .sh-nav-item:hover > .sh-dropdown { display: none !important; }

    /* Ouverture via classe JS
     * FIX CHROME : double sélecteur pour surpasser l'inline style="display:none" */
    #senat-hdr .sh-dropdown.sh-dd-open,
    #senat-hdr ul.sh-dropdown.sh-dd-open,
    #senat-hdr .sh-nav-item.sh-item-open > .sh-dropdown,
    #senat-hdr .sh-nav-item.sh-item-open > ul.sh-dropdown { display: block !important; }

    /* Indentation des sous-niveaux */
    .sh-nav-menu > .sh-nav-item > .sh-dropdown > .sh-nav-item > .sh-nav-link {
        padding-left: 28px !important;
    }
    .sh-nav-menu > .sh-nav-item > .sh-dropdown > .sh-nav-item > .sh-dropdown > .sh-nav-item > .sh-nav-link {
        padding-left: 44px !important;
    }
}

/* ---- Très petit mobile ≤ 420 px ---- */
@media (max-width: 420px) {
    .sh-brand img    { height: 44px !important; }
    .sh-brand span:first-child { font-size: 1.6rem !important; }
    .sh-esenat-btn span,
    .sh-esenat-btn   { font-size: 10px !important; padding: 8px 10px !important; }
    .sh-social-bar > div { gap: 8px !important; padding: 4px 10px !important; }
}