/*
Theme Name: Futurio Child
Theme URI: https://futuriowp.com/
Author: Pauline GRUNEWALD UHA
Author URI: https://futuriowp.com/about/
Description: Futurio child is a lightweight, fast and customizable free multi-purpose and WooCommerce WordPress theme, suitable for business, portfolio, creative, and photography sites, eCommerce shops, landing pages, blogs or WooCommerce storefronts. Futurio works perfectly with all page builders, like Elementor, Beaver Builder, King Composer, Brizy, Visual Composer, SiteOrigin, Divi or Gutenberg, and supports most free and premium WordPress plugins, like WooCommerce, Jetpack, Contact Form 7, Yoast SEO and many more. Futurio is responsive, SEO friendly, WPML, translation and RTL ready, and comes with a 1-click-demo-import feature. Demos ready for download: https://futuriowp.com/demos/
Version: 1.5.2
Tested up to: 6.3
Requires PHP: 5.6
Template: futurio
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, right-sidebar, left-sidebar, custom-background, custom-header, full-width-template, rtl-language-support, custom-menu, editor-style, featured-images, translation-ready, custom-logo, threaded-comments, footer-widgets, blog, e-commerce
Text Domain: futurio-child
*/

/* The bootstrap.css file is auto-enqueued in functions.php */



  

/*************************************/
/* Style bandeau menu UHA header */
/*************************************/
.main-menu{
    display: none;
}

.container-menu{
    max-width: 1140px;   
    margin-left: auto;
    margin-right: auto;
    padding: 12px 0;
    margin-bottom: 12px;
}
.menu-header_link-container{
    width: 100%;
}

#menu-header_link,
#menu-header_link_de,
#menu-header_link_en{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#menu-header_link a,
#menu-header_link_de a,
#menu-header_link_en a{
    color: white;
    text-decoration: none;
    font-weight: 600;
}

#menu-header_link a:hover,
#menu-header_link_de a:hover,
#menu-header_link_en a:hover{
    text-decoration: underline;
}

.top-header{
    background-color: var(--couleur-principale);
}

.top-header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-fixed{
    /* position: fixed; */
    position: static;
    z-index: 20;
    width: 100%;
    background: white;
    transition: all 0.5s ease-in-out;
}

.menu-fixed.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    /* height: 210px; */
    /* transition: height 0.5s ease-in-out; */
    background-color: white;
}

.menu_logo{
    margin-top: 4vh;
    margin-bottom: 4vh;
    max-width: 1140px;   
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom_logo{
    width: 100%;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.custom-logo.small {
    width: 30%; /* Taille réduite du logo */
}

/* .content-adjust{
    margin-top: 210px;
} */

#menu-menu_principal,
#menu-menu_principal_de,
#menu-menu_principal_en{
    display: flex;
    justify-content: space-between;
}

.menu_navigation_custom{
    border-top: solid 1px black;
}

.menu_navigation_custom ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.parent{
    position: relative;
}

.menu-item{
    position: relative;
}

.parent.current-page-parent::before,
.parent.current_page_parent::before,
.parent.current-menu-item::before,
.current-menu-parent::before,
.menu_seul.current-menu-item::before{
    position: absolute;
    content: '';
    top: -14px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--couleur-moyenne);
}

.menu_navigation_custom a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--couleur-principale);
}

.menu_navigation_custom a:hover{
    color: var(--couleur-moyenne);
}


.menu_navigation_custom .sub-menu{
    display: none;
    position: absolute;
    z-index: 1000;
    background-color: white;
    padding: 8px;
    width: 220px;
}

.menu_navigation_custom .sub-menu a{
    font-size: 16px !important;
}

.search-results{
    background-color: white !important;
}

#searchform{
    display: flex;
    border-bottom: solid 2px var(--couleur-foncee);
}

#searchform input{
    border: none;
}

#searchsubmit{
    border: none;
}


.select-langues{
    position: relative;
}

.select-langues .sub-menu{
    display: none;
    position: absolute;
    background-color: var(--couleur-tres-claire);
    width: 100%;
    padding: 6px 0px 6px 6px;
}

.select-langues:hover .sub-menu{
    display: block;
}

.select-langues .sub-menu a,
.select-langues .sub-menu a span{
    color: var(--couleur-principale) !important;
}

.menu_mobile{
    display: none;
}

/* Formulaire de contact */

#formulaire_contact label,
.form-temoignage label{
    color: white !important;
}

#formulaire_contact input,
#formulaire_contact textarea{
    color: black;
}

#formulaire_contact a{
    color: var(--couleur-claire) !important;
    text-decoration: underline;
}

#formulaire_contact a:hover{
    color: var(--couleur-moyenne) !important;
}

#formulaire_contact .wpcf7-submit,
.form-temoignage .wpcf7-submit{
    background-color: var(--couleur-claire);
    border: solid 1px var(--couleur-foncee);
    color: var(--couleur-foncee);
    font-weight: bold;
}

#formulaire_contact .wpcf7-response-output,
.form-temoignage .wpcf7-response-output{
    background-color: var(--couleur-tres-claire);
    color: #06A77D;
    border: solid 4px #06A77D;
    font-weight: 800;
}

.contact_infos a{
    color: white !important;
}

.contact_infos a:hover{
    color: var(--couleur-claire) !important;
    text-decoration: underline;
}
/*************************************/
/* Style page Liste des formations pour le système de filtre */
/*************************************/

.top-formation {
    background-image: linear-gradient(to bottom,  var(--couleur-principale), rgba(0, 73, 150, 0.2)), url("/wp-content/uploads/formations.jpg");
    height: 400px;
    display: flex;
    align-items: center;
    background-size: cover; /* Couvre entièrement la zone sans perdre les proportions */
    background-position: center;
    background-attachment: fixed;
}

.formations-list,
.projets-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 30px;
    margin-bottom: 30px;
    grid-gap: 20px;
}

.max-size{
    max-width: 1270px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.max-size h1{
    color: white;
}

.selecteur{
    background-color: var(--couleur-principale);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.selecteur h2{
    color: white !important;
    padding: 0;
    margin-top: 0;
    text-align: center;
}

.search{
    background-color: white;
    border-radius: 8px;
    color: var(--couleur-principale);
    margin-top: 10px;
}

.container-fluid.archive-page-header{
    background-color: var(--couleur-principale);
}

.formations, 
.ausbildung{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projets-list img,
.formations img,
.ausbildung img{
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.infos-formations{
    padding : 0 12px 12px 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--couleur-tres-claire);
    border-radius: 0 0 20px 20px;
}

.infos-formations h3{
    text-align: center;
}


.btn-formation{
    padding: 12px;
    background-color: var(--couleur-principale);
    color: white !important;
    text-decoration: none ;
    font-weight: bold ;
    border-radius: 12px;
}

.btn-formation:hover{
    background-color: var(--couleur-moyenne);
    color: var(--couleur-foncee) ;
    text-decoration: none;
}


/* afficher 3 articles sur la page accueil */

.articles-home{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.article{
    margin: 12px;
    padding: 20px;
    background-color: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article img{
    border-radius: 12px;
}

.article a{
    color: var(--couleur-principale);
    text-decoration: underline;
    font-weight: bold;
    width: 100%;
}

.article a:hover{
    color: var(--couleur-moyenne);
}

.date_article{
    font-size: 12px;
}

.slider-btn-prev,
.slider-btn-next{
    display: none;
}

/*************************************/
/* afficher les évènements page accueil*/
/*************************************/

.evenement_custom{
    background: white;
    display: flex;
    position: relative;
    border-radius: 20px;
    margin-bottom: 5vh;
}

.date_event{
    position: absolute;
    background: var(--couleur-claire);
    padding: 10px 20px;
    border-radius: 12px;
    right: 6vw;
    top: -2.5vh;
}

.date_event p{
    margin-bottom: 0;
    font-weight: bold;
    color: var(--couleur-principale);
}

.evenement_custom img{
    border-radius: 20px 0 0 20px;
}

.infos_event{
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.infos_event a{
    text-align: right;
    font-weight: bold;
    color: var(--couleur-principale);
    text-decoration: underline;
}

.infos_event a:hover{
    color: var(--couleur-moyenne);
}

#blog .col-md-12{
    position: relative;
}

#blog h1{
    text-align: center;
}
.featured-post-background {
    width: 100vw;
    height: 600px; /* Vous pouvez ajuster la hauteur selon vos besoins */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* Centrer le contenu verticalement */
    justify-content: center; /* Centrer le contenu horizontalement */
    color: white; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.flux_principal_blog{
    margin-top: 650px;
}

.article_important{
    width: 30vw;
    margin-left: auto;
    margin-top: 12vh;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
}

.article_important h2,
.article_important .entry-summary{
    color: black;
}

.read-more-button {
    display: inline-block;
    background-color: var(--couleur-principale); 
    color: white !important; 
    padding: 10px 20px; 
    text-decoration: none; 
    border-radius: 12px; 
    font-weight: bold;
}

.read-more-button:hover{
    background-color: var(--couleur-moyenne);
    color: var(--couleur-foncee) !important;
    text-decoration: none;
}

.articles_standards{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4vh;
}

.articles_standards img{
    width: 24vw;
    border-radius: 20px;
}

.articles_standards .entry-title{
    margin-top: 0;
}

.articles_standards .contenu_article{
    margin-left: 2vw;
}

/****************************************/
/* Témoignages */
/****************************************/

.testimony{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 12px;
}

.testimony_banner{
    background-image: linear-gradient(to top,  var(--couleur-principale), rgba(0, 73, 150, 0.2)), url("/wp-content/uploads/temoignage.jpg");
    height: 400px;
    display: flex;
    align-items: center;
    background-size: cover; /* Couvre entièrement la zone sans perdre les proportions */
    background-position: center;
    justify-content: center;
    background-attachment: fixed;
}

.testimony .portrait{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    margin-right: 10px;
}

.testimony .flex-between,
.selecteur .flex-between{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.testimony .testimony_img_1{
    width : 60px;
}

.testimony .testimony_img_2{
    width: 40px;
    transform: scaleX(-1);
}

.selecteur select{
    width: 200px;
}


.testimony a{
    text-decoration: underline;
    font-weight: bold;
}

.testimony a:hover{
    color: var(--couleur-moyenne);
}


.container-testimony{
    max-width: 1270px;
    margin-left: auto;
    margin-right: auto;
    
}

.testimony-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}


.tags{
    background-color: var(--couleur-claire);
    border-radius: 12px;
    text-align: center;
}

.tags a{
    text-decoration: none;
    color : var(--couleur-foncee);
}

.tags:hover{
    background-color: var(--couleur-moyenne);
}

.tags:hover a{
    text-decoration: underline;
    color: var(--couleur-foncee);
}

/*****************************************/
/* Page 404 */
/*****************************************/
.page_404{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

/*****************************************/
/* Footer */
/*****************************************/

footer a{
    color: white !important;
}

footer a:hover{
    color: var(--couleur-claire) !important;
    text-decoration: underline;
}

#content-footer-section{
    display: none;
}

footer .elementor-button .elementor-button-text{
    color: var(--couleur-foncee) !important;
}

/******************************************/
/* Responsive mobile */
/******************************************/

@media screen and (max-width : 767px) {
    .menu_mobile{
        display: block;
        position: relative;
    }

    .affiche_menu_mobile{
        display: none;
    }

    .mobile-first{
        display: flex;
        width: 90%;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        align-items: center;
    }

    .mobile-first a{
        width: 80%;
    }

    .mobile-first #open_menu,
    #close-menu{
        width: 30px !important;
        height: 30px;
    }

   .open-menu{
        background-color: var(--couleur-tres-claire);
        display: block;
        padding: 20px;
        position: absolute;
        top: 0;
        z-index: 5000;
        width: 100vw;
        height: 100vh;
    }

    /* .affiche_menu_mobile .parent_mobile{
        pointer-events: none;
    } */

    .affiche_menu_mobile .sub-menu{
        display: none;
        padding-left: 20px;
    }

    .subMenu-open{
        display: block !important;
        
    }

    .affiche_menu_mobile input{
        background-color: var(--couleur-tres-claire);
    }

    .container-menu a{
        color: var(--couleur-principale);
    }

    .container-menu ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .container-menu ul a{
       text-transform: uppercase;
    }

    .menu-ordi{
        display: none;
    }

    .articles-home, .mes_evenements{
        grid-template-columns: 1fr;
        align-items: center;
    }

    .article{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slider-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slides{
        width: 80%;
        margin: 12px;
    }

    .slides .link_img{
        display: flex;
        justify-content: center;
    }

    .slides h3{
        text-align: center;
    }

    .slides a{
        display: flex;
        justify-content: center;
    }



    .article p{
        text-align: center;
    }

    .slider-btn-prev,
    .slider-btn-next{
        display: block;
    }

    .evenement_custom{
        flex-direction: column;
    }

    .evenement_custom img{
        border-radius: 20px 20px 0 0;
    }
  


    #colophon .elementor-container.elementor-column-gap-default{
        flex-direction: column;
    }

    #colophon .elementor-container.elementor-column-gap-default .elementor-col-33{
        width: 100%;
    }


    .elementor-31 .elementor-element.elementor-element-70289af9 > .elementor-element-populated{
        margin: 0 !important;
    }

    .elementor-element-populated,
    .elementor-31 .elementor-element.elementor-element-44a8c7a9,
    .elementor-31 .elementor-element.elementor-element-3effa8df{
        padding: 15px 0 15px 0 !important;
    }


    .home .link_page_home .e-con-inner{
        flex-direction: row !important;
        align-items: center !important;
    }
    /***************************************/
    /* Page principale du blog */

    .menu{
        flex-wrap: wrap;
    }
    .article_important {
        width: 90vw;
        margin-top: 0;
        margin-bottom: -30vh;
    }

    .articles_standards{
        flex-wrap: wrap;
    }

    .articles_standards img{
        width: 100%;
    }

    .contenu_article{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenu_article h2,
    .contenu_article p{
        text-align: center;
    }


    /* Liste des formations */
    .top-formation h1{
        margin-top: 0;
    }

    .formations-list{
        display: grid;
        grid-template-columns: 1fr;
    }

    .selecteur{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .titre_filter{
        color: white !important;
    }

    .selecteur .flex-between{
        flex-direction: column;
        align-items: center;
    }

    .selecteur select{
        margin-bottom: 10px;
    }

    .search{
        margin-top: 0;
    }


    .testimony-grid{
        grid-template-columns: 1fr;
    }

}