@import 'form.css';
@import 'helpers.css';
@import 'menu-principal.css';
@import 'pagination.css';
/* GSAP Scroll Animation Helpers */

* {
    box-sizing: border-box;
}

html,body{
    font-size: 14px;
}

h1,h2,h3,h4,h5,h6{
    padding:0px;
    margin:0px;
    font-weight:normal;
}

.marges{
    /* background:blue !important; */

}

@media screen and (max-width:475px){
    .marges{
        padding-left:15px  !important;
        padding-right:15px  !important;
    }
    
    .conteneur-flexible{
        width: 100%;
    }
}

@media screen and (min-width:475px){
    .conteneur-flexible{
        width: 75%;
        margin-left:0 !important;
        margin-right:auto !important;
    }
}


p,ul{
    line-height:1.6;
}

.gradient-title{
    /* Gradient text from golden-1 (left) to golden-2 (right) */
    background: linear-gradient(90deg, var(--wp--preset--color--golden-1), var(--wp--preset--color--golden-2));
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text !important;
    color: transparent;
}

.text-shadow{
    text-shadow:0px 4px 4px rgba(0,0,0,0.25);
}



@media screen and (min-width:1024px){
    .grille-prestations{
        grid-template-columns: repeat(2, minmax(300px, 400px));
        /* background:orange; */
    }
}

.prestation{
    height:100%;
    border:1px solid transparent;
    justify-content:space-between;
}

.prestation__contenu{
    flex:1;
}





/* 
    Appliquer .gradient-text à un élément de texte pour lui donner un effet.
    Il faut au préalable lui définir son background avec un dégradé.
*/

.gradient-text{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text !important;
    color: transparent;
}

/* 
    Petit code magique qui empêche les grilles
    de WordPress d'exploser mon layout en mobile
*/
@media screen and (max-width: 1024px){
    .is-layout-grid{
        grid-template-columns: repeat(auto-fill,minmax(100%,1fr));
    }
    .is-layout-grid >*{
        grid-column: auto;
    }
}


/* Pour éviter le padding systématique sur les éléments sur lesquels on applique une couleur de fond */
:where(.wp-block-columns.has-background) {
    padding: 0px;
}



.espacement-variable{
    height:300px;
}

@media screen and (min-width:1024px){
    .espacement-variable{
        height:600px !important;
    }
}
@media screen and (min-width:1921px){
    .espacement-variable{
        height:0px !important;
    }
    .deco-bg-components{
        display:none;
    }
}

.photo-deco img{
    border-radius:10px;
    display:block;
    box-shadow:8px 8px 16px 0px rgba(0,0,0,0.25);
    
}

.rotate-3deg{
    transform:rotate(3deg);
}

.rotate--3deg{
    transform:rotate(-3deg);
}

.espacement-desktop{
    display:none;
}
/* 782 valeur wordpress... */
@media screen and (min-width:782px){
    .espacement-desktop{
        display:block;
    }
}




/*
.btn.btn-sp{
  display:inline-block;
  border:2px solid var(--wp--preset--color--golden-1);
  background-color:transparent;
  padding:var(--wp--preset--spacing--medium);
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--raleway);
  font-size: var(--wp--preset--font-size--medium);
  color:var(--wp--preset--color--golden-1);
  transition:color 1s, background-color 1s; 
}

.btn.btn-sp:hover{
    background-color:var(--wp--preset--color--golden-1);
    color:var(--wp--preset--color--dark-1);
}

.btn-sp.btn--small{
    font-size: var(--wp--preset--font-size--small);
    padding:var(--wp--preset--spacing--small);
}

.btn-sp.btn--x-small{
    font-size: var(--wp--preset--font-size--x-small);
    padding:var(--wp--preset--spacing--x-small);
}

.btn-sp.btn--large{
    font-size: var(--wp--preset--font-size--large);
    padding:var(--wp--preset--spacing--large);
}

.btn-sp.btn--x-large{
    font-size: var(--wp--preset--font-size--x-large);
    padding:var(--wp--preset--spacing--x-large);
}

.btn-sp .btn__icon{
    border-right:2px solid var(--wp--preset--color--golden-1);
}
*/



.wp-block-post-featured-image :where(img) {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    /* vertical-align: bottom; */
    /* width: 100%; */
}




img.extra-featured-image{
    padding:0px;
    object-fit:cover;
    object-position:center center;
    width: 100%;
    height:100%;
    max-width:100% !important;
    display:block;
    /* aspect-ratio:16/9; */
    aspect-ratio:21/9;
        

}




@media screen and (max-width:1024px){
    .grille-prestation{
        grid-template-columns: 1fr !important;
    }
}
.grille-prestation{
    grid-template-columns:2fr 1fr;
}