@charset "utf-8";

header, section, nav, footer {
position: relative;
z-index: 100;
background-color: #F7F9FB;
}
aside {
position: relative;
z-index: 100;
padding: 20px 0 20px 0;
background-color: #FFF6;
border-top: 1px solid #747474;
border-bottom: 1px solid #747474;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
p {
margin: 0 8% 60px 8%;
font-size: 1.4rem;
line-height: 1.8;
color: #222;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
}
figcaption {
font-style: italic;
text-align: center;
}
a {
color: #009;
font-weight: bold;
text-decoration: none;
}

/* DIVS ____________________________ */
.divwebcam, .divcompare, .flexcontainer {
margin: 0 8% 20px 8%;
}
.divvillas {
position: relative;
margin: 0 0 120px 0;
}
.divide {
position: relative;
z-index: 100;
height: 120px;
background-color: #F7F9FB;
}
.bkgdark {
background-color: #ECECF2;
border-top: 1px solid #747474;
}

/* TXT _______________________________ */
.txt-petit {
font-size: 1rem;
font-style: italic;
}
.large {
font-size: 1.3rem;
letter-spacing: -6px;
color: #08F;
}
.txt-hand {
color: #000;
font-family: 'Chalkboard SE', Chalkboard, 'Comic Sans MS', 'Segoe Script', cursive;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
text-wrap: balance;
}

/* IMG_________________________________ */
.img1col {
width: 22%; height: auto;
}
.img2col {
width: 48%; height: auto;
}
.img3col, .img5col {
width: 100%; height: auto;
}
.agauche {
float: left;
margin: 6px 4% 10px 0;
}
.adroite {
float: right;
margin: 6px 0 10px 4%;
}

.imgvillas {
width: 100%; height: auto;
}
.imgbloem {
width: 100px; height: auto;
margin-top: 50px;
}

/* GRAND MENU PRINCIPAL ____________ */ 
.flexcontainer {
align-items: flex-start;
align-content: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
}
.flexcontainer div {
width: auto; height: auto;
margin: 5px; padding: 10px;
background-color: #ECECF2;
border: 1px solid #666;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-stretch: semi-condensed;
line-height: 1.6;
}

/* WEBCAM _________________________ */
.divwebcam {
position: relative;
aspect-ratio: 2.2/1;
}
.divdufond {
width: 200%; height: 100%;
animation: pano 16s ease infinite;
background-image: url(../webp-autres/webcam-fond.webp);
background-repeat: no-repeat;
background-size: auto 100%;
}
@keyframes pano {
  0% {transform: translateX(0);}
 40% {transform: translateX(-40%);}
 50% {transform: translateX(-40%);}
 90% {transform: translateX(0);}
100% {transform: translateX(0);}
}
.divrain {
position : absolute;
inset: 0;
background:url("../webp-autres/pluie.webp") repeat 0px 0px;
animation: dropFlowParticles 0.25s linear infinite;
mix-blend-mode: screen;
opacity: 0.3;
}
@keyframes dropFlowParticles {
from { background-position: 0 0; }
to { background-position: 0 225px; }
}

/* COMPARE _____________________________ */
.divcompare {
position: relative;
--value: 50%;
aspect-ratio: 2.2/1;
overflow: hidden;
}
.compare__left, .compare__right {
position: absolute;
width: 100%; height: 100%;
object-fit: cover;
object-position: center bottom;
}
.compare__left {
clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
}
.compare__right {
clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
}
.compare__range {
position: relative;
width: 100%; height: 100%;
appearance: none;
background-color: transparent;
color: #000;
cursor: ew-resize;
opacity: 0;
}

.losange {
position: absolute;
z-index: 112;
width: 50px; height: auto;
inset: 47% 0 0 0;
margin-inline: auto;
opacity: 0.4;
pointer-events: none;
}

.moulin {
position: absolute;
z-index: 111;
inset: 67% 0 0 16.5%;
width: 7%; height: auto;
animation: mou 0.6s linear infinite;
}
@keyframes mou {
100% {transform: rotate(-360deg);}
}

/* HORLOGE________________________________ */
#clock {
position: absolute;
z-index: 111;
inset: 21.4% 0 0 3.8%;
width: 8%;
color: #F2FDA0;
font-family: monospace;
font-size: 1.4vw;
line-height: 1.1;
text-shadow: 0px 0px 3px #46472B;
text-align: center;
}

/* SMOKE ______________________ */
#smoke2 {
position: absolute;
z-index: 122;
top: 0; left: 80%; 
width: 1.6%; height: 40%;
background-image: url(../webp-pictos/smoke1.webp), url(../webp-pictos/smoke2.webp);
background-size: 300px 300px;
border-radius: 50%;
filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0.5;
animation: smok 4s linear infinite;
}
@keyframes smok {
100% {background-position: -300px -300px, 300px -300px;}
}

/* HALO VERT ______________________ */
#halovert {
position: absolute;
z-index: 122;
inset: 0 0 0 80%;
width: 5%; height: 26%;
background-image: url(../webp-pictos/noise3.webp), url(../webp-pictos/noise4.webp);
background-size: 400px 400px;
border-radius: 50%;
filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0.5;
animation: feu 6s linear infinite;
}
@keyframes feu {
100% {background-position: -400px -400px, 400px -400px;}
}

/* CHEMINEE MONTAGNE ______________________ */
.flamme {
position: absolute;
z-index: 122;
inset: 50% 0 0 23.2%;
width: 4%; height: auto;
filter: hue-rotate(60deg);
mix-blend-mode: screen;
}

/* ETINCELLES HALL _______________________ */
#sparkles {
position: absolute;
z-index: 122;
inset: 53% 0 0 66.6%;
width: 3.6%; height: 7.2%;
background-image: url(../webp-pictos/spk3.webp), url(../webp-pictos/spk3.webp);
background-size: 100px 100px;
border-radius: 50%;
animation: spik 1s linear infinite;
}
@keyframes spik {
100% {background-position: -100px -100px, 100px -100px;}
}

/* PHONE PADS VERTIC ____________________ */
@media screen and (orientation: portrait) {

}

/* XL ____________________________________ */
@media screen and (min-width: 961px) {
p {
margin: 0 16% 60px 16%;
}
.divwebcam, .divcompare, .flexcontainer {
margin: 0 16% 20px 16%;
}
.divvillas {
margin: 0 50px 120px 50px;
}
.agauche {
margin: 6px 5% 10px 0;
}
.adroite {
margin: 6px 0 10px 5%;
}
.img1col {
width: 16%; height: auto;
}
.img2col {
width: 37%; height: auto;
}
.img3col {
width: 58%; height: auto;
}
.img5col {
width: 100%; height: auto;
}
}

/* XXL ____________________________________ */
@media screen and (min-width: 1441px) {

}