/*
 Theme Name:   Blocksy Child Libea
 Theme URI:    https://libea.net
 Description:  Thème enfant pour le site de l'association Libéa basé sur Blocksy
 Author:       Équipe Dev
 Template:     blocksy
 Version:      1.0.0
*/

@import url("../blocksy/style.css");

/* Custom styles ici */
.offcanvas-menu {
    background-color: #fef4e8 !important;
}

.container {
    margin: 0 auto;
    padding: 40px 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mobile-title {
    width: 90%;
    margin: 0 auto;
}

.text-intro p {
    margin: 0 auto;
    width: 90%;
    margin-bottom: 20px !important;
}

.btn {
    background-color: #C6E6E0;
    color: #2D2216;
    padding: 10px;
    width: 150px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    background-color: #F4CFA3;
    color: #2D2216;
}

.mini-gallery .thumb {
    flex: 0 0 auto;
    overflow: hidden;
}

.mini-gallery .thumb a {
    display: block;
    transform: none !important;
    transition: none !important;
}

.mini-gallery .thumb img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transform: none !important;
    transition: none !important;
}

.mini-gallery {
    overflow-x: auto;
    max-width: 100%;
}

body {
    scrollbar-gutter: stable;
}

/* ======================================================
   FOOTER TOP – MOBILE FIRST
   ====================================================== */
.libea-footer-top {
    background-color: #4a3928;
    padding: 40px 20px;
    color: #FFFEFC;
}

.libea-footer-top .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 1) Newsletter : pleine largeur, centrée */
.libea-footer-top .footer-newsletter {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 20px;
}

/* 2) Conteneur des champs MC4WP en inline-flex pour aligner champ + bouton */
.libea-footer-top .footer-newsletter form.mc4wp-form .mc4wp-form-fields {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    /* même espacement horizontal qu’avant */
}

/* 3) Input email – style « pill » identique à .tnp-email */
.libea-footer-top .footer-newsletter form.mc4wp-form input[type="email"] {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    width: 100%;
    max-width: 350px;
    background: #FFFEFC;
    color: #2D2216;
    box-sizing: border-box;
}

/* 4) Bouton submit – même hauteur, aligné à droite, sans marge haute */
.libea-footer-top .footer-newsletter form.mc4wp-form input[type="submit"] {
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background-color: #efc89b !important;
    color: #4a3928 !important;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* 2) Ligne du milieu : contact à gauche, social à droite, séparés par un trait */
.libea-footer-top .footer-contact,
.libea-footer-top .footer-social {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0;
    box-sizing: border-box;
}

/* Trait vertical entre contact & social */
.libea-footer-top .footer-contact {
    padding-right: 20px;
    border-right: 1px solid #FFFEFC;
}

.libea-footer-top .footer-social {
    padding-left: 20px;
}

/* Titres et icônes */
.libea-footer-top h4 {
    color: #FFFEFC;
    margin-bottom: 12px;
    font-size: 14px;
}

.libea-footer-top .footer-contact p,
.libea-footer-top .footer-contact a,
.libea-footer-top .footer-social a {
    color: #FFFEFC;
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 10px;
}

.libea-footer-top .footer-contact i {
    margin-right: 8px;
}

.libea-footer-top .footer-social .social-icons {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.libea-footer-top .footer-social a {
    font-size: 1.5rem;
}

/* ============= ALIGNEMENT CHAMP + BOUTON NEWSLETTER ============= */
/* 1) Wrapper du formulaire MC4WP en flex identique à .tnp-fieldset */
.libea-footer-top .footer-newsletter form.mc4wp-form .mc4wp-form-fields {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    /* même espacement horizontal */
}

/* 2) Chaque champ (<p> autour des inputs) sans marge ni padding */
.libea-footer-top .footer-newsletter form.mc4wp-form .mc4wp-form-fields p {
    margin: 0;
    padding: 0;
}

/* 3) Le bouton submit sans marge (même que .tnp-field-button) */
.libea-footer-top .footer-newsletter form.mc4wp-form input[type="submit"] {
    margin: 0 !important;
}

/* 4) Cacher le label “E-mail” s’il existe (parfois ajouté selon la config) */
.libea-footer-top .footer-newsletter form.mc4wp-form label[for="mc4wp_email"] {
    display: none !important;
}

/* 5) Si vous voulez cibler précisément votre formulaire (ID 614) */
.libea-footer-top .footer-newsletter #mc4wp-form-1 .mc4wp-form-fields {
    /* mêmes règles que plus haut, redondant mais plus spécifique */
    display: inline-flex;
    gap: 8px;
}

/* 6) (Optionnel) placeholder plus visible, pour matcher vos anciens champs */
.libea-footer-top .footer-newsletter form.mc4wp-form input[type="email"]::placeholder {
    opacity: 1;
    /* ou la valeur que vous aviez */
}

/* passe toute la liste des langues en flex row */
.mobile-menu .lang-item {
    display: inline-flex !important;
    margin: 0 .5rem .5rem 0;
    /* espacement entre les drapeaux */
    width: auto !important;
    /* pour éviter qu’ils prennent toute la largeur */
}

/* agrandit les icônes de drapeau */
.mobile-menu .lang-item a img {
    width: 24px !important;
    height: auto !important;
    display: block;
}

@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 70px 0;
    }

    .text-intro p {
        width: 100%;
        margin-bottom: 40px !important;
    }

    .btn {
        width: 200px;
    }

    .libea-footer-top .footer-wrapper {
        flex-wrap: nowrap;
        justify-content: center;
        text-align: left;
        max-width: 1200px;
        margin: 0 auto;
        align-items: flex-start;
        gap: 60px;
    }

    /* Contact : plus petit et aligné à gauche */
    .libea-footer-top .footer-contact {
        flex: 0 0 auto;
        order: 1;
        border-right: none;
        padding-right: 0;
    }

    /* Newsletter : centré dans le milieu, séparé par deux traits */
    .libea-footer-top .footer-newsletter {
        flex: 0 0 auto;
        order: 2;
        text-align: center;
        border-left: 1px solid #FFFEFC;
        border-right: 1px solid #FFFEFC;
        padding: 0 60px;
        padding-bottom: 20px;
        margin-bottom: 0;
    }

    /* Social : aligné à droite */
    .libea-footer-top .footer-social {
        flex: 0 0 auto;
        order: 3;
        border-left: none;
        padding-left: 0;
    }

    .libea-footer-top .footer-contact p,
    .libea-footer-top .footer-contact a {
        font-size: 14px;
    }

    .libea-footer-top h4 {
        font-size: 16px;
    }

    /* 1) Le bouton déclencheur (le drapeau cliquable) */
    .pll-parent-menu-item>a.ct-menu-link {
        width: 50px !important;
        height: 34px !important;
        padding: .2em .4em !important;
        border-radius: 10px;
        border: 1px solid #2D2216;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* 2) Le dropdown Polylang */
    .pll-parent-menu-item>ul.sub-menu {
        width: 50px !important;
        /* largeur fixe */
        min-width: 50px !important;
        /* empêche d’être plus petit */
        max-width: 50px !important;
        /* empêche d’être plus grand */
        white-space: nowrap;
        /* pas de retour à la ligne */
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #2D2216;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* 3) Centrer le contenu (les drapeaux) */
    .pll-parent-menu-item>ul.sub-menu li a {
        display: block;
        text-align: center !important;
        padding: .25em .35em !important;
    }

    .pll-parent-menu-item>a.ct-menu-link:hover {
        background-color: #E9F5F2;
    }

    .pll-parent-menu-item>ul.sub-menu li a:hover {
        background-color: #E9F5F2;
    }

    /* 4) Flèche du dropdown en couleur foncée au hover */
    /* Sur le lien principal */
    .pll-parent-menu-item>a.ct-menu-link .ct-toggle-dropdown-desktop {
        display: none;
    }

    /* 1) Cible le sous-menu du header principal */
    .header-menu-1 li.menu-item-has-children>ul.sub-menu {
        /* empêche d’être plus grand */
        white-space: nowrap;
        /* pas de retour à la ligne */
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #2D2216;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Survol */
    .header-menu-1 li.menu-item-has-children>ul.sub-menu li a:hover {
        background-color: #E9F5F2;
        color: #2D2216;
    }

    /* État “actif” (au clic) */
    .header-menu-1 li.menu-item-has-children>ul.sub-menu li a:active,
    .header-menu-1 li.menu-item-has-children>ul.sub-menu li.current-menu-item a {
        background-color: #E9F5F2;
        color: #2D2216;
    }

    /* 2) Centrer et padder les items */
    .header-menu-1 li.menu-item-has-children>ul.sub-menu li a {
        display: block;
        text-align: center !important;
    }
}