@charset "utf-8";

h2 {
text-align: center;
color: #420;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 10px;
}
h3 {
color: #420;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
}
figcaption {
font-style: italic;
text-align: center;
}
header, section, nav, aside, footer {
padding: 20px 30px 60px 30px;
}
header, section, nav {
position: relative;
z-index: 100;
background-color: #FFF3E6;
border-top: 3px solid #fff;
border-bottom: 4px solid #fff;
}
aside, footer {
position: sticky;
z-index: 100;
top: 0;
min-height: 200px;
background-color: #fff;
background-image: url("../webp-cover/fondfloubleu.webp");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
font-weight: 300;
}
p {
font-size: 1.3rem;
font-weight: 200;
font-stretch: condensed;
line-height: 1.6;
display: flow-root;
}
a {
color: #00d;
font-weight: 400;
text-decoration: none;
}
q {
font-weight: 400;
font-style: italic;
}
small {
font-style: italic;
}

/* LES BLOCS */
p, h2, h3, .divwebcam, .divcompare, .divmenu {
margin: 20px 0 20px 0;
}

/* GRAND MENU ____________________________ */
.divmenu {
text-align: center;
}
.divsmenu {
display: inline-block;
height: auto;
padding: 5px; margin: 5px;
background-color: #fbf9f0;
border: 1px solid #666;
border-radius: 10px;
font-weight: normal;
font-stretch: condensed;
}

/* VILLAS __________________________ */
.divvillas {
position: relative;
z-index: 100;
width: 100%;
margin: 30px 0 30px 0;
}
.imgvillas {
width: 100%; height: auto;
}
.skrol {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
/* État final : visible (classe ajoutée par JavaScript scrollage) */
.skrol.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* TXT _______________________________ */
.txt-hand {
font-family: 'Comic Sans', 'Comic Sans MS', Mistral, 'Comic Sans', 'Bradley Hand', 'Segoe Script', Chilanka, TSCu_Comic, casual, cursive;
font-size: 1.5rem;
font-weight: bold;
font-style: italic;
color: #000;
}

/* IMG _________________________________ */
.img1col {
width: 22%; height: auto;
float: left;
margin: 15px 4% 15px 0;
}
.img2col {
width: 48%; height: auto;
float: right;
margin: 15px 0 15px 4%;
}
.img3col {
width: 48%; height: auto;
float: left;
margin: 15px 4% 15px 0;
}
.img5col {
width: 100%; height: auto;
margin: 15px 0 15px 0;
}
.imgbloem {
width: 90px; height: auto;
}

/* PROMO BANDEAU __________________________ */
.bigpromo {
text-align: center;
font-family: system-ui, sans-serif;
font-size: 2.8rem;
line-height: 1;
letter-spacing: 2px;
font-weight: 800;
margin-bottom: 40px;
color: #fc0;
    -webkit-text-stroke: 5px #000;
    -webkit-text-fill-color: #fc0;
    paint-order: stroke fill;
animation: cligno 5s linear infinite;
}
@keyframes cligno {
0% {opacity: 1;}
10% {opacity: 1;}
10.1% {opacity: 0;}
20% {opacity: 0;}
20.1% {opacity: 1;}
30% {opacity: 1;}
30.1% {opacity: 0;}
40% {opacity: 0;}
40.1% {opacity: 1;}
100% {opacity: 1;}
}
.txtpromo {
text-align: center;
bottom: 20px;
font-size: 0.6rem;
font-stretch: condensed;
line-height: 1.2;
font-style: italic;
font-weight: 200;
color: #555;
}

/* WEBCAM _________________________ */
.divwebcam {
position: relative;
aspect-ratio: 2.2/1;
background-color: #fff;
}
.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;
}
.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);}
}

/* ANIM LAC XHATIFF________________________________ */
#clock {
position: absolute;
z-index: 111;
inset: 21.3% 0 0 3.8%;
width: 8%;
color: #F2FDA0;
font-family: monospace;
font-size: 1.4vw; 
text-shadow: 0px 0px 3px #46472B;
text-align: center;
}
#smoke2 {
position: absolute;
z-index: 122;
top: 0; left: 72%; 
width: 20%; height: 40%;
background-image: url(../webp-pictos/smoke1.webp), url(../webp-pictos/smoke2.webp);
background-size: 300px 300px;
border-radius: 50%;
filter: blur(15px);
opacity: 0.5;
animation: smok 4s linear infinite;
}
@keyframes smok {
100% {background-position: -300px -300px, 300px -300px;}
}

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

/* FLAMME VERTE MONTAGNE _________________ */
.flamme {
position: absolute;
z-index: 122;
inset: 34% 0 0 14.4%;
width: 7%; height: auto;
mix-blend-mode: screen;
filter: blur(4px) hue-rotate(30deg);
opacity: 0.8;
}

/* ETINCELLES HALL RECEPTION _____________ */
#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;}
}



/* MEDIA================================== */

/* XL ____________________________________ */
@media screen and (min-width: 961px) {
aside, footer {
background-attachment: fixed;
position: sticky;
}
p {
font-stretch: normal;
}
p, h2, h3, .divwebcam, .divcompare, .divmenu {
margin: 20px 12% 20px 12%;
}
header, section, nav, aside, footer {
padding: 20px 50px 60px 50px;
}
.img1col {
width: 16%; height: auto;
margin: 15px 5% 15px 0;
}
.img2col {
width: 37%; height: auto;
margin: 15px 0 15px 5%;
}
.img3col {
width: 58%; height: auto;
margin: 15px 5% 15px 0;
}
}


/* DARK MODE ============================== */
@media (prefers-color-scheme: dark) {
header, section, nav {
background-color: #EDE1D4;
}
aside, footer {
background-image: url("../webp-cover/fondflouvert.webp");
}
p {
font-weight: 300;
}
.darkmodeactif {
visibility: visible;
}
}