@charset "utf-8";

html {
    font-size: 100%;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
}
body {
    background-color: lavender;
    color: #222;
    line-height: 1.4;
    font-family: system-ui, sans-serif;
    font-weight: 200;
    text-wrap: pretty;
}

@font-face {
    font-family: 'ViaodaLibre';
    src: url('../font/ViaodaLibre-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0; padding: 0;
    overflow-x: hidden;
}

h1, h2, h3 {
    color: #030;
    font-family: 'ViaodaLibre', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni MT', Cambria, 'Noto Serif Display', serif;
    font-weight: normal;
    line-height: 1.1;
    font-size: 2rem;
}

h1 {
    margin: 0 20px 20px 45px;
    text-align: center;
}

h2 {
    margin: 0 20px 40px 45px;
    padding-bottom: 20px;
    border-bottom: 1px solid #555;
    text-align: center;
}

h3 {
    margin: 0 20px 20px 45px;
}

header, section, nav, footer {
    position: relative;
    z-index: 100;
    padding-bottom: 200px;
    background-color: #fff;
    overflow-x: hidden;
}

aside {
    position: relative;
    z-index: 100;
    padding: 20px 0 200px 0;
    background-color: #fff6;
    backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    overflow-x: hidden;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

figcaption {
    font-style: italic;
    text-align: center;
}

p {
    margin: 0 20px 60px 45px;
    font-size: 1.3rem;
}

q {
    font-weight: 400;
}

a {
    color: #00b;
    text-decoration: none;
}



/* DIVS ____________________________ */

.divtopgauche {
    position: fixed;
    z-index: 150;
    top: 20px; left: 5px;
    width: auto; height: auto;
    filter: saturate(0);
}

.divvillas {
    position: relative;
    margin: 0 0 120px 0;
}



/* TXT _______________________________ */

.txt-hand {
    color: #000;
    font-family: 'Bradley Hand', 'Comic Sans MS', cursive;
    font-size: 2.2rem;
    font-weight: bold;
    font-style: italic;
    line-height: 1.4;
}

.txt-petit {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
}

.lettrine {
    color: #030;
    font-family: 'ViaodaLibre', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni MT', 'Noto Serif Display', serif;
    font-weight: normal;
    line-height: 1.2;
    font-size: 2rem;
    margin-right: 2px;
}



/* IMG_________________________________ */

.imgvillas {
    width: 100%; height: auto;
}

.img-icones {
    width: 35px; height: auto;
    padding-top: 2px;
}

.img1col {
    width: 16%; height: auto;
    margin: 6px 5% 10px 0;
    float: left;
}

.img2col {
    width: 37%; height: auto;
    margin: 6px 0 10px 5%;
    float: right;
}

.img3col {
    width: 58%; height: auto;
    margin: 6px 5% 10px 0;
    float: left;
}

.img5col {
    width: 100%; height: auto;
    margin: 0 0 10px 0;
}

.imgbloem {
    width: 120px; height: auto;
}



/* GRAND MENU PRINCIPAL ____________ */ 

.flexcontainer {
    margin: 0 20px 0 45px;
    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: 5px;
    background-color: #eee;
    border: 1px solid #555;
    border-radius: 10px;
    text-align: center;
    font-stretch: condensed;
}



/* AUTRES ____________________________________ */

.aumilieu {
    text-align: center;
}



/* WEBCAM _________________________ */

.divwebcam {
    position: relative;
    aspect-ratio: 2.2/1;
    margin: 0 20px 20px 45px;
}

.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;
    height: auto;
    margin: 0 20px 20px 45px;
    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;
}

.divlosange {
    position: absolute;
    z-index: 222;
    inset: 47% 0 0 0;
    width: fit-content;
    margin-inline: auto;
    font-size: 3rem;
    color: #ab9;
    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: #cfc;
    font-family: monospace;
    font-size: 1.4vw;
    line-height: 1;
    text-shadow: 0px 0px 5px #0d0;
    text-align: center;
}



/* SMOKE ______________________ */

#smoke1, #smoke2, #smoke4 {
    position: absolute;
    z-index: 122;
    top: 0;
    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.8;

    animation: smok 4s linear infinite;
    }

    @keyframes smok {
    100% {background-position: -300px -300px, 300px -300px;}
}
#smoke1 {left: 74%; width: 1%;}
#smoke2 {left: 80%; width: 1.6%; animation-delay: 0.9s}
#smoke4 {left: 90%; width: 1%; animation-delay: 1.7s}



/* HALO VERT ______________________ */

#halovert {
    position: absolute;
    z-index: 122;
    inset: 0 0 0 73%;
    width: 5%; height: 52%;
    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: 41% 0 0 22.1%;
    width: 6.5%; height: auto;
    filter: hue-rotate(60deg);
    mix-blend-mode: screen;
}



/* ETINCELLES HALL _______________________ */

#sparkles {
    position: absolute;
    z-index: 122;
    inset: 52% 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;}
}








/* NE PAS AFFICHER SUR MOBILE ____________ */

@media screen and (max-width: 960px) {

.cache {
    display: none;
}

}



/* PHONE PADS VERTIC ____________________ */

@media screen and (orientation: portrait) {

.img1col {
    width: 40%;
    margin: 6px 30% 10px 30%;
}

.img2col, .img3col {
    width: 100%;
    margin: 6px 0 10px 0;
    float: none;
}

}



/* XL ____________________________________ */

@media screen and (min-width: 961px) {

html {
    font-size: 120%;
}

body {
    font-stretch: normal;
    font-weight: 200;
    line-height: 2;
}

p, h2 {
    margin: 0 18% 60px 18%;
}

h1, h3, .divwebcam, .divcompare, .flexcontainer {
    margin: 0 18% 20px 18%;
}

.divvillas {
    margin: 0 50px 120px 50px;
}

}