*, * html, body, html{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; outline:0; margin: 0; padding: 0}
::selection { color: white; background: black;}

:root{
  --c-size : 20px ;
  --gap : 40px;
  --font-color : black;
  --link_color : black;
  --color_terra : #CE8379;
  --color_terra_clair: #f5bab2;
  --color_terra_extra_clair: #FFDFDA;

  
}

.cursor { z-index: 9999; top: 50%;  left: 50%;  position: fixed; 	display: block; width: var(--c-size);  height: var(--c-size);  margin-top: calc(var(--c-size) / -2);  margin-left: calc(var(--c-size) / -2); border-radius: 50px;  pointer-events: none; transition: transform 0.2s ease, background-color 0.6s ease, opacity 0.2s ease; overflow: visible;  }
.cursor { background-color: var(--color_terra);  opacity: 1;   mix-blend-mode: difference; filter: invert(); transform: scale(1); cursor: pointer}
.cursor.hover { opacity:1; transform: scale(2);  mix-blend-mode: difference; filter: blur(0.5px) invert();; }
.cursor.hide {opacity: 0;}
.cursor.sleep {transform: scale(0.1);}
.cursor.load {transform: scale(2);}
.cursor.down { opacity: 1; transform: scale(3); } 

.wp-block-image {filter: brightness(0.6) contrast(1.5); opacity: 1;  transition: all .4s ease;}
.lazy {filter: brightness(0.5) contrast(1.7); opacity: 0;  transition: all .4s ease;}
.effects { filter: brightness(1) contrast(1); opacity: 1;  transition: all .8s ease;}

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: var(--wp--preset--spacing--10) 0; line-height: 1.2; margin-inline-start: 0px; margin-inline-end: 0px; }
p {  padding: var(--wp--preset--spacing--10) 0 0; }

body{font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); line-height: 1.4; color: var(--font-color); cursor: default; }
.container{ position: relative; display: grid; grid-template-areas: "header" "main" "footer" ;  margin: 0 auto;  overflow: hidden}
header, main, footer{ position: relative; margin: 0;  display: block; z-index: 555; }
header{grid-area: header; z-index: 888} main{grid-area: main; z-index: 444} footer{grid-area: footer}
.header-content, .footer-content, .main-content { position: relative;  margin: 0 auto ;  z-index: 444 }

/* HEADER */
header {background:var(--color_terra); }
.header-main{float: left; width: 100%; padding: var(--wp--preset--spacing--20) 0; margin: 0}
.header-main-content{position: relative; max-width: var(--wp--style--global--wide-size); margin: 0 auto; /*display: flex; justify-content: space-between; */ }
.logo { margin: auto; width: 140px;}
.logo img{float: left; width: 100%; height: auto}


.menu { /*margin-top: 60px;*/ float: left; width: 100%; margin: 10px 0; font-family: var(--wp--preset--font-family--heading); text-align: center }
.menu ul li { display: inline-block; text-align: center ;  margin: 5px 2px; list-style: none ;  }
.menu ul li:not(:last-child) { padding-right: var(--gap); }
.menu ul li a { color: var(--color_terra_extra_clair); text-decoration: none; position: relative; padding: 10px; transition: .225s ease-in-out;  }
.menu ul li a:hover { }
.menu ul li a::after { content: ""; display: block; position: absolute; bottom: -3px; left: 0px; width: 0%; height: 3px; background:  var(--color_terra_extra_clair); z-index: 999; transition: .225s ease-in-out; }
.menu ul li a:hover::after { width: calc(100%);  background: var(--color_terra_extra_clair)}
.menu ul li.on-page a::after  { content: ""; display: block; position: absolute; bottom: -3px; left: 00px; height: 3px; width: calc(100%);  background: var(--color_terra_extra_clair); z-index: 999; transition: .225s ease-in-out; }
a.active{ border-bottom: 3px solid var(--color_terra_extra_clair); transition: .225s ease-in-out; }



/* MAIN */
main {min-height: calc(100vh - 320px)}
.sous-titre em { border-bottom : 2px solid var(--color_terra_extra_clair); padding: 5px; font-style: normal}
/*.engagement .wp-block-column:before {
    content: '';
    width: 2rem;
    height: 2rem;
    background: transparent url('/images/site/rond-terra.png'); background-size: contain; 
    display: block;
     margin: -15px 0 0 -15px; z-index: 0;

}*/

.sprite_image {
    --spriteWidth: 15.2rem;
    position: relative;
    z-index: 3;
    display: inline-block;
    width: var(--spriteWidth);
    aspect-ratio: 152 / 154;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    animation: sprite steps(7, end) infinite;
    animation-duration: calc(7* .2s);
}
@keyframes sprite {
    to {
        background-position: calc(15.2rem * 7 * -1) 0
    }
}

/* FOOTER */
.footer-main{float: left; width: 100%;  margin: 0; background-color: var(--color_terra); padding: var(--wp--preset--spacing--20) 0; color: white;}
.footer-main-content{position: relative; max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; justify-content: space-between;  align-items: center;  }
.footer-main-content .logo {float: left; width: 100px; }
.footer-main-content .copy {float: left;  margin-left:  var(--wp--preset--spacing--20); }
.footer-main-content .copy a {color: white; text-decoration: none; border-bottom: 0px solid white; transition: .225s ease-in-out; }
.footer-main-content .copy a:hover { border-bottom: 2px solid white; transition: .225s ease-in-out; }

/* LOCO */
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}

@media screen and (max-width:1402px) {   
/*body{
  --wp--preset--font-size--xx-large : 2.5rem ;
  --wp--preset--font-size--x-large : 1.85rem;
  --wp--preset--font-size--large : 1.25rem;
  --wp--preset--font-size--medium : 1rem;
  --wp--preset--font-size--small : 0.8rem;
  font-size: var(--wp--preset--font-size--medium);
}
.logo { width: 80px;}
.footer-main-content .logo {width: 60px}
.menu {display: none}
#menu-burger {display: block }  */
}


