/*
Theme Name: Twenty Twenty-Two Enfant
Description: Theme enfant de Twenty Twenty-Two.
Author: decagraf
Author URI: https://decagraf.fr
Template: twentytwentytwo
Version: 1.0
*/

/* style site en français */
:lang(fr)

/* Couleur fond wastewi = #b3b3c2 */
/* Couleur texte wastewi = #7e6f4b */
.rotationMessage{
    position: absolute;
    z-index: 200;
    text-align: center;
    width: 100vw;
    margin: 0 auto;
    /* background-color: red; */
    top: 15vh;
    display: none;
    font-family: 'Source Sans Pro', sans-serif;
    color: rgb(126, 110, 75);
    font-size: 2em;
    line-height: 1em;
    padding: 1em;
}
.rotationMessage img{
    transform: scaleX(-1);
    width: 100%;
}
.cacher{
    display: none;
}
.montrer{
    display: block;
}
.opacity{
    opacity: 0;
}
::-webkit-scrollbar{
    /* width: 0px; */
}
/*----------------------||--------------- commun à toutes les pages */
body{
    max-width: 1280px;
    width: 100vw;
    /* min-height: 100%; */
    margin: 0 auto;
    /* overflow: hidden; */
}
/*------------------------------------- HEADER */
.header{
/* opacity: 0.3; */
}
/* espace entre header et main */
.stickyHeader{
    position: fixed;
    top: 0;
    background-color: #ffffff;
    z-index: 100;
    width: 100%;
    height: 70px;
    max-width: 1280px;
    padding: 0;
}
.navigation a{
    text-decoration: none !important;
}
.navigationGras{
    font-weight: 600;
}
/*------------------------------------- MAIN */
.wp-site-blocks{
    min-height: 100vh;
    /* background-color: #b3b3c2; */
    padding: 0 !important;
    
}
.contenuDeLaPublication, .contenuDeLaPublicationCreations{
    /* background-color: #b3b3c2; */
    /* margin: 10px; */
    justify-items: center;
    min-height: 100vh;
    background-color:rgb(247, 250, 250);
    /* scrollbar-width: none; */
}
.contenuDeLaPublicationLangue{
    margin: 0;
    justify-items: center;
    min-height: 100vh;
    background-color:rgb(247, 250, 250);
}
h1 {
    font-family: 'Source Sans Pro', sans-serif;
    /* color: #3B3A3A; */
    color: rgb(126, 110, 75);
    font-size: 3em;
    line-height: 1em;
    text-transform:uppercase;
    margin-bottom: 0.3em;
    text-align: end;
}
h2 {
    font-family: 'Source Sans Pro', sans-serif;
    color: rgb(126, 110, 75);
    font-size: 1.5em;
    text-transform:uppercase;
    text-align: end;
}
.citation{
    font-style: normal;
    font-weight: 600;
    font-size: 1.5em;
    color: rgb(126, 110, 75);
    text-align: end;
}
.pousseCitation{
    display: none;
}
.citationAccueil{
    font-style: normal;
    font-weight: 600;
    font-size: 1.5em;
    color: rgb(126, 110, 75);
    text-align: end;
    margin-bottom:0;
}
.citationAccueil p{
    margin-bottom:0;
    line-height: 1.2em;
    text-transform: none !important;
}
.lesDeuxColonnes{
    /* height: 100vh; */
}
.colonneGaucheAccueil{
    position: relative;
    /* padding: 1em 2em; */
    /* width: 40% !important; */
    margin: 0 0 0 30px !important;
}
.colonneGaucheAccueil p{
    color: rgb(126, 110, 75);
    text-align: justify;
    text-transform: capitalize;
}
.colonneGaucheAccueil .kt-inside-inner-col{
    position: relative;
}
.fixed{
    position: fixed;
    /* max-width: 23.5%; */
}
.colonneDroiteAccueil{
    width: 60% !important;
    padding: 2.5em 2em 0 0;
}
.colonneDroiteCreation{
    width: 60% !important;
    /* padding: 1.5em 2em 0 0; */
    padding: 0 2em 0 0;
}

.colonneDroiteAccueilJC{
    width: 60%;
    padding: 1.5em 2em 0 0;
}
.colonneDroiteAccueil p{
    color: rgb(126, 110, 75);
    text-align: justify;
    /* scroll-margin-top: 100px !important; */
}
.footerFR{
    position: fixed;
    width: 100vw;
    max-width: 1280px;
    bottom: 0;
    background-color:rgb(247, 250, 250);
    z-index: 100;
}
.footerFR a{
    text-decoration: none;
}

/*------------------------------------- MAIN */

/*------------------------------------- FOOTER */
.footerAccueil{
    position: fixed;
    width: 100vw;
    max-width: 1280px;
    bottom: 0;
    background-color:rgb(247, 250, 250);
    z-index: 100;
}
.footerAccueil a{
    text-decoration: none;
}
.grecaptcha-badge{
    bottom: 60px !important;
}
/*----------------------||------ page mentions légales    */
.contenuMensionsLegales{
    padding: 30px; 
}
.contenuMensionsLegales h2{
    text-align: center; 
}
.titreMentionsLegales{
    text-align: center;
}

/*----------------------||------ page CREATIONS contenant les sous-galerie contenant des séries */
/* (voir page CREATIONS) */
figcaption{
    color: red;
}

/*----------------------||------ pages sous-galerie contenant des séries */
/* (voir page MODEL GALERIE) */
.colonneGaucheGaleries{
    position: relative;
    padding: 1em 2em;
    /* width: 40vw; */
}
.kt-inside-inner-col .titre{
    /* width: 33%; */
}
.titreGalerie .kt-inside-inner-col{
    /* width: 100%; */
}
.titreGalerie{
    background-color:rgb(247, 250, 250);
    top: 3em;
    max-width: 446px;
    width: 33%;
    /* height: 100vh; */
}
.colonneGaucheGaleries .tousLesParagraphes{
    /* padding-top: 110px !important; */
    /* scroll-behavior: auto; */
    /* overscroll-behavior: contain; */
}
.colonneGaucheGaleries p{
    color: rgb(126, 110, 75);
    text-align: justify;
}
/* .overflow{
    overflow:auto;
} */
/*----------------------||---------- pages ACCUEIL choix langue */
/*-------------------------- MAIN */
.titrePageAccueilLangue{
    opacity: 0;
}
.conteneurSliderPageAccueil{
height: 100vh;
overflow: hidden;
background-color:rgb(247, 250, 250);
}
.sliderPageAccueil{
height: 10vh;
}

/* gallery */
/* seulement pour gallerie en page d'"acceuil langue" les img des galleries font 100vh */
.sliderPageAccueil .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic{
    height: 100vh;
}

.premierParagraphe{
    /* margin-top: 60px !important; */
}
.paragraphes{
    /* margin: 0; */
}
.titrePublication{
    /* font-size: 2.5em;
    margin: 10px 0 0 0 ; */
}
.paragraphes h2{
    
}
.paragraphes p{
    /* color: #7e6f4b;
    font-size: 1.3em; */
}
.lienAncre a{
    /* color: #7e6f4b; */
}
p:target {
    padding-top: 100px; 
    margin-top: -100px;
}
#exposition p{
    /* padding: 0 !important;  */
    margin: 18px 0 18px 0 !important;
}
div:target{
    padding-top: 75px; 
    /* margin-top: -100px; */
    /* padding-bottom: 1000px; */
    height: 100vh;
    /* opacity: 0.5;
background-color: red; */
}
.opacityZero{
/* opacity: 0.5;
background-color: red; */
}
.pInvisible figcaption{
    color: red !important;
    opacity: 0 !important;
}
.sliderTitresEnleves .kadence-blocks-gallery-item__caption{
    color: red !important;
    opacity: 0 !important;
}
/* hr:target {
    padding-top: 155px; 
    margin-top: -155px; 
} */
.margeHautMainGalerie{
    /* margin-top: 20px; */
}
.margeBasGalerie{
/* margin-bottom: 2em !important; */
}
.wp-block-kadence-advancedgallery.kb-gallery-wrap-id-_1f6d1e-88{
    margin: 0 !important;
}
.wp-block-kadence-advancedgallery.kb-gallery-wrap-id-_834c5e-7a{
    margin: 0 !important;
}
/* ancres */
.colonneDroiteCreation p:first-child {
    padding-top: 28px;
}
.ancreEnd{
    /* background-color: red; */
}
.ancreEnd:target{
    padding-top: 146px !important;
    /* background-color: green; */
}
.ancreEnd2:target{
    margin: 30px 0 0 0 !important;
    /* background-color: rgb(0, 4, 128); */
}
.colonneDroiteAccueil p:first-child {
    padding-top: 15px;
}
.ancreEnd3:target{
    padding: 130px 0 0 0 !important;
    /* background-color: rgb(0, 4, 128); */
}
.ancreEnd4:target{
    padding: 110px 0 0 0 !important;
    /* background-color: rgb(0, 4, 128); */
}


/*------------------------------------- Galerie */
.kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic{
    display: flex;
    justify-content: center;
}
.kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic img{
    /* display: flex; */
    /* justify-content: center; */
    max-height: 100%;
    left: auto;
    width: auto;
}


.galerieVigettesINT{
    position: absolute;
    top:100px;
    z-index: 20;
    opacity: 1;
    width: 90%;
    height: 100vh;
}
.galerieVigettesINT li{
    padding: 0 10px !important;
}
.galerieVigettesINTCacher{
    position: absolute;
    top: 0;
    opacity: 0;
    z-index: 0;
    width: 52%;
}
.sliderGaleries{
    position: absolute;
    top:70px;
    z-index: 20;
    opacity: 1;
    /* width: 52%; */
    width: 95%;
}
.sliderGaleriesCacher{
    position: absolute;
    top: 0;
    opacity: 0;
    z-index: 0;
    /* width: 52%; */
    width: 95%;
}
#croix{
    width: 30px;
    height: 30px;
    background-color: rgb(159, 157, 157, 0.5);
    color: rgb(33, 33, 33);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    position: absolute;
    top: 83px;
    right: 47px;
    z-index: 1000;
}
#croixCacher{
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.35);
    color: white;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    position: absolute;
    top: 83px;
    right: 47px;
    z-index: 1000;
    opacity: 0.5;
}


/*============================================================= Page accueil choix langue ============================ */
/*------------------------------------- Header choix langue */
.enTeteChoixLangue{
    margin-bottom: 0;
}
/* ---------------- position chevron slider */
.kt-blocks-carousel .slick-prev, .kt-blocks-carousel .slick-next{
/* top: 10%; */
}
/*============================================================= Page accueil FR =====*/
.contenuDeLaPublication{
    width: 100%;
}
.imageGaucheAccueilFr{
    transform: translateY(255px);
    width: 32vw;
    max-width: 446px;
}
/* imageDemarche */
.imageDemarche{
    width: 99,5%;
}
.imageGaucheAccueilFr figcaption{
    display: none;
}
.wp-block-image{
    margin: 0;
}

/* a trier */
.imgAccueil{
    /* display: none; */
    padding: 39px 39px 0 39px;
}

/*============================================================= Page CONTACT =====*/
.titreFormulaire a{
    text-decoration: none;
    color: rgb(126, 110, 75);
}
.titreFormulaire{
    background-color:rgb(247, 250, 250);
    top: 3em;
    max-width: 446px;
    width: 33%;
}

.lienINSTA{
    /* font-weight: 300; */
    font-size: 1.2em;
    text-transform: lowercase;
}
.formulaireWastewi{
    margin-top: 63px;
}
.kb-form .kadence-blocks-form-field .kb-text-style-field{
    padding: 0 10px;
    min-height: 30px;
}
textarea{
    max-height: 25vh;
}



.ancreCreationsMenu a{
    text-decoration: none !important;
    color: rgb(126, 110, 75);
}



/* Slider sur Mobile */

/* slider */
#sliderMobile {
    position: relative;
    /* width: 1200px; */
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
#sliderMobile img{
    height: 100vh;
}

#precedent,
#suivant {
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0.5;
    position: absolute;
    font-size: 3.5em;
    color: #ffffff;
    background-color: #000000;
    padding: 0 10px 15px 10px;
    top: 45vh;
}

#precedent {
    left: 0;
}

#suivant {
    right: 0;
}

#sliderMobile:hover #precedent,
#sliderMobile:hover #suivant {
    opacity: 0.5;
}

@-webkit-keyframes animationFonduImgSlider {
    from { opacity: 1;}
    to { opacity: 0;}
}
@keyframes animationFonduImgSlider {
    from { opacity: 1;}
    to { opacity: 0;}
}


#detectResolutionEcran{
    /* display: none; */
    position: absolute;
    bottom: 65px;
    z-index: 30;
    margin-left: 25px;
}
#btnResolutionEcran{
    height: 50px;
    width: 200px;
}


.messageEcranHorizontalMobile{
    display: none;
    width: 90vw;
    height: 68vh;
    position: fixed;
    z-index: 100;
    top: -20px;
    left: 0;
    background-color: rgb(255, 255, 255, 0.95);
    padding: 50px;
    margin: auto;
}





/*-------------------////////////////////////////////////////// */
/*-------------------////////////////////////////////////////// */

/*----------------------||---------- media queries */
@media screen and (max-width: 1440px) and (orientation: landscape){
    .imageGaucheAccueilFr {
        transform: translateY(215px);
    }

}



/* (inférieure ou égale à 1366px) */
@media screen and (max-width: 1366px) {
    .stickyHeader {
        /* background-color: red !important; */
        padding: 0 20px !important;
    }
    /* .is-layout-flow.wp-block-column.is-vertically-aligned-center{
position: absolute;
    } */

}

/* ------------------------------------------------ */
/*-------------------////////////// Tablette Portrait */
/* ------------------------------------------------ */
/* (inférieure ou égale à 1024px) */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .stickyHeader {
        /* background-color: yellow !important; */
    }
    .sliderPageAccueil{
        display: none;
    }
    #sliderMobile{
        display: block;
    }
    h1 {
        font-size: 2.5em;
    }
    .colonneGaucheAccueil p{
        text-align: end;
    }
    .imageGaucheAccueilFr{
        width: 87%;
        margin: 0 0 0 2px;
        transform: translateY(340px);
    }
    .galerieVigettesINT li{
        width: 97% !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 10%!important;
    }
}

/* ------------------------------------------------ */
/*-------------------////////////// Tablette Paysage */
/* ------------------------------------------------ */
/* (inférieure ou égale à 1024px) */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .galerieVigettesINT li{
        width: 100% !important;
    }
    .imageDemarche{
        width: 99,5%;
    }
    .tousLesParagraphes{
        width: 96%;
    }
}



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

/* Si [la largeur de l'appareil] est (inférieure ou égale à 720px) et (l'écran est orienté portrait) alors faites {…} */
@media screen and (max-width: 720px) and (orientation: portrait) {
    .stickyHeader {
        /* background-color: green !important; */
    }
    .titre{
        font-size: 3em;
    }

}

/* Si [la largeur de l'appareil] est (inférieure ou égale à 412px) et (l'écran est orienté portrait) alors faites {…} */
@media screen and (max-width: 412px) and (orientation: portrait) {
    .stickyHeader {
        /* background-color: rgb(4, 0, 128) !important; */
        width: 100vw;
    }
    .wp-block-navigation__responsive-container {
        /* right: 0px; */
    }

    #modal-2 {
        /* right: 35px; */
    }

    /* place le menu burger */
    .wp-block-navigation.wp-container-3 {
        /* justify-content: flex-end;
        position: absolute;
        top: 20px;
        right: 20px; */
    }

    .contenuDeLaPublication, .contenuDeLaPublicationCreations{
        margin-top: 45px;
        height: auto !important;
        overflow: auto;
    }
    h1 {
        /* padding-left: 0.5em; */
        /* text-align: start; */
    }
    .titreGalerie{
        position: relative;
        width: 90vw;
        /* height: 180px; */
        top: 0;
        margin: auto;
    }
    .titreGalerie h2{
       font-size: 1.3em !important; 
    }
    .imageGaucheAccueilFr{
        display: none;
    }
    .titre{
        width: 84vw;
    }
    .separateurSousGalerie{
        width: 84vw;
        margin: 0;
    }

    .colonneGaucheAccueil{
        padding: 0 20px 0 0;
        margin: auto !important;
        width: 87vw !important;
    }
    .colonneDroiteAccueil{
        padding: 0 0 90px 0;
        margin: auto !important;
        width: 87vw !important;
    }
    /* ------------------- page créations ----------------- */
    .ancreEnd:target{
        padding-top: 0;
    }
    .colonneGaucheGaleries{
        width: 87vw !important;
        padding: 5vw;
        margin: 0 !important;
    }
    .colonneGaucheGaleries .tousLesParagraphes{
        padding-top: 0px !important;
    }
    .galerieVigettesINT img{
        padding: 0 30px !important;
    }
    .wp-block-kadence-column.kadence-column_c93d58-a1 > .kt-inside-inner-col {
        margin-top: 30px !important;
    }
    /* page créations */
    .colonneDroiteCreation{
        margin: auto !important;
        width: 90vw !important;
        padding: 0 0 0 0;
        transform: translateY(-35px);
    }
    .colonneDroiteCreation p:first-child {
        padding-top: 0;
    }
    .margeBasGalerie{
        padding-bottom: 60px;
    }
    .sliderGaleries{
        /* display: none; */
    }
    .galerieVigettesINT{
        /* display: block; */
        position: absolute;
        width: 100vw;
        height: auto;
        padding-bottom: 110px ;
    }


    .lesDeuxColonnes{
        padding-bottom: 80px;
    }

    /* ------------------- page contact ----------------- */
    .titreFormulaire{
        width: 90%;
    }
    .lienINSTA{
        /* font-weight: 300; */
        font-size: 1.2em !important;
        text-transform: lowercase;
    }
    .formulaireWastewi{
        margin-top: 130px;
    }
    .grecaptcha-badge{
        z-index: 10;
    }
}

/* Si [la largeur de l'appareil] est (inférieure ou égale à 360px) et (l'écran est orienté portrait) alors faites {…} */
@media screen and (max-width: 361px) and (orientation: portrait) {
    .stickyHeader {
        /* background-color: rgb(128, 0, 119) !important; */
    }
    /* menu burger haut */
    #modal-2{
        height: 100vh !important;
        /* width: 20vw; */
        left: auto !important;
        right: 0px;
        font-family: 'Source Sans Pro', sans-serif;
        color: rgb(126, 110, 75);
        font-size: 1em;
        text-transform: uppercase;
        background: linear-gradient(180deg, rgba(255,255,255,1) 20vh, rgba(255,255,255,0.5) 30vh, rgba(255,255,255,0) 50vh);
    }
    /* place le menu burger */
    .wp-block-navigation.wp-container-3 {
        justify-content: flex-end;
        /* background-color: red; */
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .contenuDeLaPublication{
        margin-top: 50px;
    }
    h1 {
        font-size: 2.6em !important;
    }
    .titreGalerie{
        position: relative;
        width: 90vw;
        /* height: 180px; */
        top: 0;
    }
    .titreGalerie h2{
        font-size: 1.2em !important; 
     }
    .imageGaucheAccueilFr{
        display: none;
    }
    .colonneDroiteAccueil{
        padding: 0;
        margin: auto !important;
        width: 87vw !important;
    }
    .wp-block-kadence-column.kadence-column_c93d58-a1 > .kt-inside-inner-col {
        margin-top: 30px !important;
    }

    /* ------------------- page contact ----------------- */
    .formulaireWastewi{
        margin-top: 110px;
    }
    .grecaptcha-badge{
        z-index: 10;
    }
}


/* ------------------------------------------------ */
/*-------------------////////////// MOBILE Paysage */
/* ------------------------------------------------ */
/* Si [la largeur de l'appareil] est (inférieure ou égale à 100px) et (l'écran est orienté paysage) alors faites {…} */
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .messageEcranHorizontalMobile{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .messageEcranHorizontalMobile span{
        font-weight: 900;
    }

    
}


/*-------------------////////////// MOBILE Paysage*/
/* Si [la largeur de l'appareil] est (inférieure ou égale à 720px) et (l'écran est orienté paysage) alors faites {…} */

@media screen and (max-width: 640px) and (orientation: landscape) {
    .menuHCoteG{
        /* width: 30%; */
    }
    .menuHCoteD{
        /* width: 70%; */
    }
}





/*-------------------////////////// MOBILE Portrait*/
/* juste pour assurer transition "menu trad" vers "menu burger" à 600px */
@media screen and (max-width: 599px) and (orientation: portrait) {
    /* menu burger haut */
    #modal-2{
        height: 100vh;
        left: auto !important;
        font-family: 'Source Sans Pro', sans-serif;
        color: rgb(126, 110, 75);
        font-size: 1em;
        text-transform: uppercase;
        background: linear-gradient(180deg, rgba(255,255,255,1) 20vh, rgba(255,255,255,1) 30vh, rgba(255,255,255,0) 50vh);
    }
}