@font-face {
  font-family: 'dancing script';
  src: url('/assets/dancing-script-v28-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'dancing script';
  src: url('/assets/dancing-script-v28-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'eb garamond';
  src: url('/assets/eb-garamond-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'eb garamond';
  src: url('/assets/eb-garamond-v31-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'eb garamond';
  src: url('/assets/eb-garamond-v31-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


#Contact {
    height: 100vh;
    display:flex;
    flex-direction:column;
    z-index: 10002;
}


#kaz-Contact {
    z-index:0;
    display: flex;
    position:relative;
    flex-direction: column;
    background: url(/assets/frog_ini.BwPYTpeH.webp) right;
    background-position: left 75% bottom 0% ;
    background-size: cover;
    border-radius: 12px;
    height: 100vh;
}


.chat-container {
    position: fixed ;
    top: 70% ;
    right: 20px ;
    z-index: 2000 ;
    /*display: inline-block;*/
    cursor: pointer;

    
    @media (max-width: 361px) {
	right: 0px;
    }

    opacity: 0 ;
}


.chat-container .tooltip-text {
    display: none ;
    @media (min-width: 600px) {
	display: block ;
	visibility: hidden;
	width: 120px;
	background-color: #333;
	color: goldenrod;
	text-align: center;
	padding: 6px 8px;
	border-radius: 6px;

	position: absolute;
	z-index: 1;
	bottom: -50% ;
	left: 50%;
	transform: translateX(-100%);

	opacity: 0;			
	transition: opacity 0.3s;
    }
}


.chat-container:hover .tooltip-text {
    display: none ;
    @media (min-width: 600px) {
	display: block ;
	visibility: visible;
	opacity: 1;
    }
}


#chat-icon {
    background: transparent;
    color: white;
    border: 2px solid goldenrod;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-image: url(/assets/contactus.DSotP_iY.webp);
    box-shadow: -4px 2px 20px 5px rgb(212, 183, 38);
    transform: translateY(0);
    width: 60px ;
    height: 60px ;

}


#chat-icon:hover {
    background-color: rgba(128, 128, 128, 0.394);
}


#chat-icon:active {
    transform: translateY(2px);
    /* effet d’enfoncement */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    /* ombre réduite */
}


@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1.1);
    }
}


.heartbeat {
    animation: heartbeat 0.8s ease-in-out;
}


#form-popup {
    position: relative;

    border-radius: 10px;
    width: 100% ;

    z-index: 5;

    ::placeholder {
        color: rgb(63, 63, 63);
    }

    @media (min-width: 600px) {
	display: flex;
	gap: 5% ;
	top: 30vh;
    }
    
    @media (max-width: 600px) {
	width: 99vw ;
	left:1vw ;
	top: 10vh ;
	height: 60vh ;
	width: 90%;
    }
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 600px;
        height: 250px;
        top: 20px;

    }
}


#contact-form {

    border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    
    padding: 10px;
    @media only screen and (min-width: 600px) {
	width: 50% ;
	margin-left:8%;
    }
    
}


#form-popup input,
#form-popup select,
#form-popup textarea {
    width: 100%;
    background-color: transparent ;
    color: black;
    font-weight: bolder ;
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        position: relative;
        width: 30%;
        left: 1cap;
    }
}


#form-popup textarea {

    height: 140px;
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 45%;
        position: absolute;
        top: 32px;
        left: unset;
        right: 40px;
        height: 140px;
    }
}


.fp-button {
    color: black;
    background: #5cc437;
    border: 3px solid #62571d;
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: bolder ;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(0);

    margin-top: 40px ;

}


.fp-button:hover {
    color: rgb(181, 176, 119);
    font-weight: bolder;
}


.fp-button:active {
    transform: translateY(2px);
    /* effet d’enfoncement */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    /* ombre réduite */
}


.contact-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}


.contact-field h3 {
    width: 30%;
    @media (min-width: 600px) {
	width: 35%;
    }
    font-size: 15px;
    color: gold;
    margin-block: 0;

    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 10%;
    }
}


.fade-message {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    padding: 15px;
    border-radius: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 10000;
}


.fade-message.show {
    display: block;
    opacity: 1;
}


.fade-message.success {
    background-color: #28a745;
}


.fade-message.error {
    background-color: #dc3545;
}


#ct-logo {
    width: 150px;
    top: 60px ;
    position: absolute;
    left: 50%;
    @media (max-width: 600px) {
	left: 100%;
    }
	      
    transform:translateX(-102%) ;
}


.contact-icons {
    display: flex;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-120%);
    font-size: 40px;
    color: gold;
    gap: 10%;
    justify-content: space-around;
    margin-top: 2% ;
    @media (max-width: 600px) {
	margin-top: 10vh ;
    }
    
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        color: gold ;
        font-size: 25px ;
        transform: translateY(-110%);

    }
    @media only screen and (min-width: 600px) {
	position: relative;
	flex-direction: column ;
	left: 0;
	transform: translateY(-120%);
	gap:0%;
    }
}


.c-icon {
    background-color: #ffffff29;
    color: #5cc437;
    padding: 14px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    @media only screen and (min-width: 600px) {
	height: 35px;
    }
}


.c-icon:hover {
    background-color: #58460d80;

}


.c-icon:active {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}


.contact-icons h2 {
    position: relative;
    font-size: 18px;
    margin-left: -60px;
    margin-top: 40px;
    font-family: 'Times New Roman', Times, serif;

    @media  (max-width: 600px) {
	display: none ;
    }
    
}


.close_char {
    font-size: 24px;
    position: absolute;
    top: -10px;
    left: 15px;
    display: none;
}


.gwada-wrapper {
    position: fixed;
    display: inline-block;
    opacity: 0.5;
    z-index: 1;

    width: 30%;
    top: 50%;
    left: 0;
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 20%;
        top: 0;
        transform: translateX(-100%);
    }
}


.gwada-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}


.sparkle {
    position: absolute;
    top: 50%;
    left: 6%;
    width: 30px;
    height: 30px;
    background: radial-gradient(white, rgba(255, 255, 255, 0.3));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: blink 1.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
}


@keyframes blink {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.7);
/*        box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);*/
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}


@media (min-width: 600px) {

    .gwada-wrapper {
	top: 100%;
	left: 99vw;
	transform: translate(-100%, -100%);
	width: 10%;
    }

}


.bordure-wraper {
    position: absolute;
    height: 100%;
        width: 10%;

}


.bordure {
    background: url("/assets/bordure.BIABa4n-.webp") left center / contain repeat-y;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}


.tableau {
    position: absolute;
    width: 20vw;
    max-width: 250px;


    aspect-ratio: 1;
    object-fit: cover;

    opacity: 1;
    box-shadow: 0px 0px 50px 30px rgba(80, 16, 16, 0.45), 0px 0px 50px 40px rgba(80, 16, 16, 0.45);
    border: 1vw solid rgb(147, 28, 28);

    top: 0;
    left: 100% ;
    transform: translate(-110%,30%);
    z-index: 4 ;

    @media (max-width: 600px) {
	width: 10% ;
	min-width: 100px ;
	top: -50% ;
    }
	    

}


.kaz-specs {
    display: flex;
    flex-flow: wrap;
    
    justify-content: center;
    z-index: 5;
        margin: 0;
    
        justify-content: center;
}


.icons-wraper {
    display: flex;

    margin-top: 2%;

    align-items: center;

        flex-direction: row;
        justify-content: center;
        width: 100%;
        margin-left: 0;
        height: 60%;
        border-left: 0;

}


#spec-icon {
       max-width: 150px;
        width: 8vw;
        justify-content: center;
        margin: 2vw;

    height: auto;




    border: 3px solid #857000;
    border-radius: 10px;

    @media (max-width: 361px) {
	    margin: 2% ;
    }


}


.all-specs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.strong-spec {
    display: inline-block;
    width: auto;
    background-color: rgb(18 18 15 / 50%);
    border: 2px solid red;
    padding: 4px 4px;

     	left: 2% ;
    color: #d7e023;
    border-radius: 10px;
    margin: 0;
    	position: absolute ;
	top: -20% ;
	z-index: 5 ;

}


.specs {
    position: relative;
    display: flex;
    z-index: 5;

            flex-direction: column;
        justify-content: center;
        gap: 3%;
        width: 100%;

}


.spec {
    background: transparent;
    border-radius: 10px;
    display: inline-flex;
    border: 1px solid white;
    align-items: center;
    height: fit-content;
    margin-left: 2%;
    margin-bottom: 2%;

}


.spec.conf {
    height: 18px ;
    padding: 0 10px;
    font-weight: 900;
    border: 3px solid #ccb017;

}


.spec img {
    height: 12px;
    margin-left: 10px;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 5px;

}


.spec h4 {
    font-size: 8px ;
    margin-right: 0px ;
    margin-inline-end: 4px ;
    margin-inline-start: 0px ;
    font-weight: lighter;
    color: white;

    white-space: nowrap;
    margin-bottom: 0;
    margin-top: 0;
}


#tbi {
    border: 10px solid rgba(109, 90, 16, 0.158);
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        border: 5px solid rgba(109, 90, 16, 0.158);
    }

}


#ttc {
    border: 1vw solid rgba(196, 165, 10, 0.863);
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        border: 5px solid rgba(196, 165, 10, 0.863);
    }

}


.kaz {
    position: absolute;

    display: flex;

    width: 99vw;
    top: 100%;
    transform: translateY(-100%);
    height: 30vh;
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {
	height: 45vh;
    }
    z-index: 4;

    }


.kaz .kaz-fond {

    object-fit: cover;
    position: absolute;
    width: 99vw;
    height: 100%;
    opacity: 0.5;
}


.frog {
    position: absolute;

    top: 0;
    transform: translateY(-50%);
        height: 55%;
        left: 20% ;
        z-index: 4;
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

    }

}


.foufou {
    position: absolute;

    top: 0;
    transform: translateY(-100%);
    z-index: 3;
    height: 65%;

        left: 5%;
        z-index: 4 ;

@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        height: 55%;
    }
}


.iguane {
    position: absolute;

    top: 0;
    transform: translate(0%, -100%);
        height: 45%;
        left: 0 ;
        z-index: 4;
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        height: 55%;
        left: 60%;
    }
}


.colibriassis {
    position: absolute;
    left: 25%;
    top: 0;
    transform: translateY(-70%);
    z-index: 3;



        height: 45%;

@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        height: 55%;
    }
}


.belledame {
    position: absolute;

    top: 0;
    transform: translate(-100%, -120%);

        height: 45%;
        left: 60% ;
        z-index: 4;

@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        height: 55%;
    }
}


.chenille {
    position: absolute;
    left: 0;
    top: -20%;
    transform: rotate(180deg);
    height: 45%;
    z-index: 4 ;

    @media (orientation: portrait) {
        height: 45%;
    }
}


@media (min-width: 600px) {

    .bordure-wraper {
    width: 100px;
    }

    .kaz-wraper {
	margin-left: 120px;
	flex-direction: unset ;
    }

    .tableau {
	top: 0;
	left: 100%;
	    transform: translate(-130%,-60%);
    }

    .kaz-specs {
    margin-top: 5%;
    margin-left: 5%;
    }

    .icons-wraper {
	flex-direction: column;
	justify-content: unset ;
	width: unset ;
	marging-left: unset ;
	height: unset ;
	border-left: unset ;
	
    }

    #spec-icon {

	max-width: 50px;
	width: 100%;
	justify-content: unset ;
	    margin: 3%;
    }
    .specs {
	width: 80%;
	flex-direction: unset ;
	justify-content: unsent ;
	gap: unset ;
    }

    .spec.conf {
	height: 28px ;
    }

    .spec img {
	height: 20px ;
	margin-right: 2px ;
    }

    .spec h4 {
    font-size: 13px;
    margin-right: 15px;
    }
    .frog {
	height: 65%;
	    left: 35%;
	
    }
    .foufou {
    left: 65%;
    }

    .iguane {
	height: 65%;
	    left: 10%;
    }

    .colibriassis {
    height: 65%;
    }

    .belledame {
	height: 65%;
	    left: 100%;
    }

    .chenille {
    height: 45%;
    }

    .strong-spec {
	top: -40% ;	
	    left: 12% ;
	font-size: 25px ;
    }

}


@media (min-aspect-ratio: 2/1) and (max-width: 1023px) {

	.kaz-wraper {
		margin-left: 50px ;
	}

	.specs {
		width: 90% ;
	}
	.strong-spec {
		top: -30% ;
	}


	.specs img {
		height: 10px ;
	}
	.tableau {
		top: -70% ;
	}
	.icons-wraper {
		flex-direction: row ;
	}
}


.sticky-wrapper {
    height: 320vh;
    width: 99vw ;
    margin-left: 1vw ;
}


#accueil {
    position: sticky;
    top: 0;
    left: 0;
    width: 99vw;
    left: 1vw ;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

}


#overlay {
    position: sticky;
    margin-top: -100vh;
    top: 0;
    left: 0;
    width: 99vw;
    left:1vw ;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    background: bottom right / cover no-repeat url(/assets/clair_de_lune.CHfLVwdZ.webp);
    background-size: cover;

    overflow-x: hidden;
}


#history {
    position: sticky;
    margin-top: -100vh;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    background: bottom right / cover no-repeat url(/assets/jardin.3YOni_VD.webp);
    background-size: cover;

    overflow-x: hidden;
}


video {
    width: 99vw;
    left: 1vw ;
    height: 100vh;

    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    object-fit: cover;
    top: 0;
    z-index: 0;

    left: 0;
}


#scrolldown {
	position: fixed ;
	top:100%;
	transform: translate(-50%,-150%) ;
	left: 50% ;
	height: 50px ;
	opacity: 0.5 ;
	cursor: pointer ;
	z-index: 5  ;
}


#logoovl {
    left: 100%;
    transform: translateX(-105%);
    top: 10vh;

    @media (max-width: 361px) {
	    left: unset ;
	    transform: unset ; 
    }

}


.logo {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
    top: 15vh;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none ;
}


#logoovl .logoPorte {
	display: none ;
    opacity: 0;
    width: 50% ;

    @media (max-width: 361px) {
	    width: unset ;
    }
}


.logo .logoPorte {
    opacity: 0.4;

    width: 45vh;
    max-width: 400px;
    pointer-events: none ;

}


#logoovl .logoTitre {

	@media (max-width: 361px) {
    margin-top: -60vh;
    }

}


.logo .logoTitre {

    width: 25vw;
    min-width: 250px;
    max-width: 500px;
    margin-top: -10%;
}


#logoovl h2 {
    color: #909232;
}


#h2small {
    font-size: max(min(2vw, 20px), 12px);
    width: 36vw;

}


.logo h2 {

    text-align: center;

/*    font-family: 'Raleway';
    font-size: max(min(2vw, 24px), 16px);
*/
    font-size: max(min(3vw, 24px), 16px);
    font-style: italic;
    font-weight: 600;
    color: #3b3410;
}


#presentation {
    display: none;
    position: absolute;

}


#presentation.active {
    display: block;
    z-index: 3;
/*
    font-family: 'Times New Roman', Times, serif;
*/
    font-family: 'EB Garamond', serif;
    font-weight: normal;
    font-size: 20px;
    color: #dacb8d;

    background-color: rgba(0, 0, 0, 0.4);
    border: 20px solid transparent;
    box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.45), 0px 0px 50px 40px rgba(0, 0, 0, 0.45);

    top: 100%;
    left: 50%;
    width: 80%;


    transform: translate(-50%, -150%);


}


#Boisdinde {
    opacity: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 4;

    background-color: transparent;
}


@media (min-width: 600px) {

    #logoovl {
        left: 18%;
        top: 28vh;
	transform: unset ;

    }

    #logoovl .logoPorte {
        opacity: 1;
    }

    #logoovl .logoTitre {
        margin-top: 0;
    }

    #presentation.active {
        top: 10vh;
        left: 55vw;
        width: 40%;
	transform: unset ;
    }


}


@media (min-aspect-ratio: 2/1) {
    #logoovl {
	top: 10vh;
	left: 10% ;
    }
}


.footer {
    display: none ;
    opacity: 0;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: transparent;
    text-align: center;
    /*    height: 6vw;*/
    @media (max-width: 600px) {
	width: 92vw ;
	height: 40px ;
	left: 4vw ;
	margin-bottom: 30px ;
    }

    @media (min-width: 600px) {
	min-height: 45px;
	margin-bottom: 10px ;
	width: 99vw ;
	left:1vw ;
    }
    z-index: 10000;
}


.booking_button {

    cursor: pointer  ;

    @media (min-width: 600px) {
	bottom: 0;
	position: absolute;
        height: 6vh;
        left: 30%;
        width: 40%;
	min-height: 60px;
    }

    @media (max-width: 600px) {
	padding:0 ;
	flex:1 ;
    }


    z-index: 10001;

    background-position: left 100% bottom 65%;
    background-size: 100%;
    border-radius: 12px;
    border: 3px solid #ccba56;
    background-image: url("/assets/frog_footer.CPST4Hj3.webp");


    display: flex;
    align-items: center;

    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        height: 6vh;
        left: 30%;
        width: 40%;
    }

}


@media (hover: none) and (pointer: coarse) {
.booking-summary {
    display: none;
  }
}


#empty_footer {
	height:25vh ;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}


.booking_button h2 {
    font-size: max(min(1.6vw, 20px), 12px);
    color: white;
    /*

    font-family: 'Times New Roman', Times, serif;    
   */
    font-family: 'EB Garamond', serif;
    font-weight: bold;
    margin-left: 14%;
    @media (max-width: 600px) {
	margin-left: 8% ;
    }

}


.booking_button,
.booking_button h2,
.booking_button:visited {
    color: white;
    text-decoration: none;
}


.cal_icon {
    height: 4vh;
    margin-left: 10px;
    @media (max-width: 361px) {
	margin-left: 50px;
    }
}


.social {
    display: flex;
    position: absolute;
    height: 20px;
    gap: 10px;
    font-size: 20px;
    transform: translateX(-200%) translateY(-100%);
    color: blue;
    bottom: 0;
    left: 20%;

}


#addr1 {
}


#addr2 {
}


#addr3 {
}


#empty_footer h3 {
	    color: #8f8469;
    font-weight: lighter;
    font-size: 16px;
}


#empty_footer .c-icon {
	max-height: 1em;
	    color: #8f8469;
	    z-index: 99 ;
}


.addr_wraper h3  {
    display: flex;
    margin: 2px ;
}


#ef1,
#ef2,
#ef3 {
    display: flex;
    gap: 10px;
    margin: 20px;
}


.addr_wraper {
    display: flex ;
    flex-direction: column  ;
}


.BoudhAnne {
    position: absolute;
    font-size: 15px;
    color: grey;
    transform: translate(-110%, -150%);
    left: 99vw;
    top: 100%;
    z-index: 100000;

    @media (max-width: 600px) {
        top: 0;
        transform: translate(-110%, -150%);
    }
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        top: 0;
        transform: translate(-110%, 0%);
    }
}


@media (max-width: 600px) {

#empty_footer {
    align-items: flex-start;
    justify-content: center;
}

#empty_footer h3 {
	display: none ;
}

}


.cSection {
    width: 99vw ;
    left: 0vw ;
}


.kaz-name {
    position: absolute;

    width: 100%;
    height: 70vh;
    top: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;

@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
        display: flex;
    }

}


#bi-name {
    opacity: 0;
}


.kaz-name h2 {
    

    
    top: 2vh;

    margin: 0;
    white-space: nowrap;

    
    color: #dacb8d;
    font-family: "Dancing Script", serif;
    font-weight: 400 ;
    background-color: rgba(50, 50, 50, 0.65);
    border: 1px solid transparent;
    box-shadow: 0px 0px 50px 30px rgba(40, 40, 40, 0.45), 0px 0px 50px 40px rgba(40, 40, 40, 0.45);
    border-radius: 20px;

    position: relative;
    margin-bottom: 1vh;
    left: unset;
    padding: 4px 8px;
    display: inline-block;
    font-size: 60px;
}


.kaz-name #bipres {
    position: relative;
    font-size: 20px;
    max-width: 80%;

    display: inline-block;
    width: auto;



    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 20px;
    color: #dacb8d;
    background-color: rgba(0, 0, 0, 0.4);

    box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.45), 0px 0px 50px 40px rgba(0, 0, 0, 0.45);
 
    @media (max-width: 600px) {
 	font-size: 18px ;
	max-width: 90% ;
 }

}


.carousel {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    border: 10px solid #857000;
    z-index: 6;

    position: relative;
    max-width: 90%;
    height:50vw ;
}


.video-thumb-slide {
  position: relative;
  cursor: pointer;
}


.video-thumb-slide .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s;
}


.video-thumb-slide .play-button:hover {
  background: rgba(0,0,0,0.8);
}


.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}


.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}


.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}


.buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}


.buttons button {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: unset;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
}


.dots {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    z-index: 1;
}


.dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}


.dot.active {
    background: white;
}


.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.lightbox.active {
    display: flex;
}


.lightbox-content {
    width: 90vw;
    max-width: 900px;
    aspect-ratio: 16 / 9;
}


.lightbox img,
.lightbox video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
}


.lightbox-close {
    top: 20px;
    right: 30px;
    @media (min-width: 600px) {
	right:unset ;
	left: 30px ;
    }
}


.lightbox-prev {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-next {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-desc {
    color: white;
    margin-top: 1em;
    font-size: 16px;
    text-align: center;
}


@media (min-width: 600px) {

    .kaz-name {
	display: block ;
	flex-direction: unset ;
	align-items: unset ;
    }
    .kaz-name h2 {
	position: absolute;
	margin-bottom: unset ;
	left: 8%;
	padding: unset ;
	display: block ;
	font-size: 100px ;
	transform: unset ;
    }

    .kaz-name #bipres {
	top: 30vh;
	left: 55vw;
	max-width: 35vw;
	position: absolute;
	width: auto ;
    }
    .carousel {
	position: absolute;
	left: 8%;
	top: 20vh;

	max-width: 35vw;
	height: 30vh ;
    }
}


@media (min-aspect-ratio: 2/1) and (min-width: 1023px) {
    .kaz-name #bipres {
        top: 25%;
        left: 55%;
        max-width: 40%;
        position: absolute;
        width: auto ;
        z-index: 4 ;
    }

 }


@media (min-aspect-ratio: 2/1) and (max-width: 1023px) {

  .kaz-name h2 { 
        font-size: 50px;
    }
   .carousel {
	min-width: unset ;
   }
    .kaz-name #bipres {
	top: 20%;
	left: 50%;
	max-width: 40%;
	position: absolute;
	width: auto ;
	z-index: 4 ;
    }
}


/*
* {
    outline: 1px solid red ;
}
 */


body,
html {
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    background-repeat: repeat-y;

    background-color: black;

    @media (min-width: 600px) {
	overflow-x: hidden ;
    }

}


body {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* system-ui : police système standardisée
     -apple-system : Safari/macOS
     BlinkMacSystemFont : Chrome/macOS
     "Segoe UI" : Windows
     Roboto : Android/Google
     Helvetica, Arial : polices de secours très courantes
     sans-serif : fallback générique */
}


#transition-wrapper {
    position: absolute;

    width: 99vw;
    top: 0;
}


#logodr {
    opacity: 0;
    position: fixed;

    z-index: 4;


        left: 50%;
        top: 15vh;
        transform: translate(-50%);


}


#logodr .logoPorte {

        opacity: 0.4;


}


section {
    position: relative;
    width: 99vw;
    height: 100vh;
}


.bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
}


#biabs {
    position: absolute;
}


.bg {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    z-index: 3;
}


@media (min-width: 600px) {

    #logodr {

    left: 100%;
    top: 100%;
    transform: translate(-110%, -100%);
    }
    #logodr .logoPorte {
	opacity: 0;
    }
    #logodr .logoTitle {

          opacity: 0.4;

    }

    .bg-wrap {
        clip: rect(0, auto, auto, 0);
        opacity: 1;
    }

    #contenu {
 
        opacity: 1;
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        z-index: 2;
        background: center / cover no-repeat url(/assets/BoisDInde-Case_cr%C3%A9ole_immerg%C3%A9e_dans_la_nature.Y0H1iP9f.webp);
    }
 }


.klimtl {
    width: 0 ;
    height: 0 ;
}


.menu {

  background: transparent ;
  color: white ;
  padding: 1rem 0;
  position: fixed;
  /**/
  top: -10px;
  
  left: 0;
  width: 99vw;
  left:1vw;
  overflow: auto;
  opacity: 0 ;
  z-index:-1 ;
}


.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex ;
  justify-content: center;
  gap: 2% ;
}


.menu li {
  margin: 1rem 0;
  text-align: center;
}


.menu a {
  color: white;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  transition: color 0.3s;
}


.menu a:hover {
  color: #f0a500;
}


.menu a.active {
  color: #f0a500;
  background: #333;
  border-radius: 0.5rem;
}


/* BOUTON BURGER */


#burger {
  display: none;
  font-size: 3rem;
  background: none;
  border: none;
  padding: 0 ;
  color: white;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 86vw;
  width: 10vw ;
  padding-right: 10px ;

  z-index: 2000;
}


/* RESPONSIVE MOBILE */


@media (max-width: 700px) {
  #burger {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    padding-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 1500;
    width: max-content;
  }

  .menu.active {
    display: flex;
  }

  .menu ul {
    flex-direction: column;
    gap: 2rem;
  }

  .menu li {
    margin: 0;
  }
}


#Disponibilites {
    height: 100vh;
    display:flex;
    flex-direction:column;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
	height: 100vh;
    }


}


#kaz-dispo {
    height: 100vh;
}


#body-back {
    width: 99vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: right top / cover no-repeat url(/assets/sunset_1.C5FMy3hn.jpg);
    background-size: 100% 100%;	    
}


.calendar-wrapper {
    position: relative;
    overflow: hidden;
    width: 99vw ;


    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
	top: -1% ;
	margin-top: 5vh ;
    }

}


/* scrollables avec largeur limitée */


.header-scroll {
    display: flex;
    overflow: hidden;
    width: 99vw ;
}


#calendar-header {
    position: absolute;
    top: 0;
    background: black;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100% ;
}


#cache-line {
    position: absolute;
    top: 0;
    height: 40px;
    background: linear-gradient(90deg, black, black 30%, transparent 90%, transparent);
    width: 150px;
    z-index: 11;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        opacity: 0;
    }

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 40px;
    }
}


#month-line {
    display: flex;
    height: 25px;
    font-size: 12px;
    width: 100% ;
}


#day-line {
    display: flex;
    height: 15px;
    font-size: 12px;
    width: 100% ;
}


.month-cell {
    width: 24px;
    text-align: center;
    line-height: 25px;
    flex-shrink: 0;
    font-size: 18px ;
    font-weight: bolder ;
    color: goldenrod;
    background: linear-gradient(90deg, black, #2a0707 15%, #2a0707 85%, black);
}


.day-cell {
    width: 25px;
    text-align: center;
    flex-shrink: 0;
    color: goldenrod;
}


#mouseUsage {
    position : absolute;
    top: 30% ;
    z-index: 15;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: bolder ;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
    1px  1px 0 black;
    pointer-events: none;
}


#calendar-scroll {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    text-align: center;

    position: relative;
    -webkit-overflow-scrolling: touch;
    height: 180px;
    background-color: #164816;
    touch-action: pan-x;
    user-select: none;
    top: 45px ;
    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {

    }

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 150px;
    }
}


#calendar-scroll::-webkit-scrollbar {
    display: none;
}


.villa-row {
    display: flex;
    height: 30px;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 25px;
    }
}


.cell {
    width: 25px;
    height: 30px;
    flex-shrink: 0;
    box-sizing: border-box;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 25px;
    }
}


.free {
    cursor: pointer;
    box-sizing: border-box;
    border: 0.1px solid #0e170d;
    border-radius: 6px 6px 6px 6px;
    background: #045704;

    &:hover {
        background: rgb(0, 117, 21);
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;
        color: black;
    }
}


.sunday {
    border-left: 1px solid #807120;
}


.busy {
    pointer-events: none;
    cursor: not-allowed;
    box-sizing: border-box;
    border-radius: 3px;
    border: 0.1px solid rgba(80, 40, 40, 1);
    border-radius: 2px;
    background: rgba(61, 6, 6, 1);
}


.busy-start {

    cursor: pointer;
    background: linear-gradient(to bottom right, #045704, #045704 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));
    width: 25px;
    cursor: pointer;
    color: transparent;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right, rgb(0, 117, 21), rgb(0, 117, 21) 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;
        color: white;

    }
}


.busy-end {

    cursor: pointer;
    background: linear-gradient(to bottom right,
				rgba(61, 6, 6, 1),
				rgba(61, 6, 6, 1) 50%,
				#045704 50%,
				#045704);

    border-radius: 2px 6px 2px 2px;
    width: 25px;

    &:hover {
        background: linear-gradient(to bottom right,
				    rgba(61, 6, 6, 1),
				    rgba(61, 6, 6, 1) 50%,
				    rgb(0, 117, 21) 50%,
				    rgb(0, 117, 21));
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;
        color: black;
    }
}


.selected {
    background-color: goldenrod;
    border-top: 2px solid rgb(219, 142, 75);
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 0.1px solid white;
    border-radius: 0px;
}


.selected.start,
.selected.end {
    transform: none;
}


.selected.notenough,
.free.selected.start.notenough,
.free.selected.end.notenough {
    background-color: #024202;
    border-top-color: red;
    border-bottom-color: red;
    border-left-color: black;
}


.notenough-text {
    position: absolute;
    pointer-events: none;
    display: none;
    font-size: 11px;
    line-height: 30px;
    min-width: max-content;
    color: white;
}


.busy-start.selected {
    background: linear-gradient(to bottom right, goldenrod 50%, rgba(61, 6, 6, 1) 50%);
    cursor: pointer;
    border-bottom: 2px solid rgb(219, 142, 75);
    border-right: 2px solid rgb(219, 142, 75);
    border-radius: 0 50% 50% 0;
}


.busy-start.selected.notenough {
    background: linear-gradient(to bottom right, #024202 50%, rgba(61, 6, 6, 1) 50%);
    border-color: red;


}


.busy-end.selected {
    background: linear-gradient(to bottom right, rgba(61, 6, 6, 1) 50%, goldenrod 50%);
    border-top: 2px solid rgb(219, 142, 75);
    border-radius: 50% 0 0% 50%;
    cursor: pointer;
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 2px solid rgb(219, 142, 75);
}


.busy-end.selected.notenough {
    background: linear-gradient(to bottom right, rgba(61, 6, 6, 1) 50%, #024202 50%);
    border-right: 0.1px solid black;
    border-color: red;
}


.free.selected.end {
    background: linear-gradient(to bottom right, goldenrod 50%, #045704 50%);
    border-radius: 0 50% 50% 0;
    border-right: 2px solid rgb(219, 142, 75);
}


.free.selected.end.notenough {
    background: linear-gradient(to bottom right, #024202 50%, #045704 50%);
    border-left-color: black;
    border-right-color: red;
}


.free.selected.start {
    background: linear-gradient(to bottom right, #045704 50%, goldenrod 50%);
    border-top: 2px solid rgb(219, 142, 75);
    border-left: 2px solid rgb(219, 142, 75);
    border-radius: 50% 0% 0% 50%;
    border-bottom: 2px solid rgb(219, 142, 75);
}


.free.selected.start.notenough {
    background: linear-gradient(to bottom right, #045704 50%, #024202 50%);
    border-left-color: red;
    border-right-color: black;
}


.free.selected.start.end {
    border-radius: 0;
}


.notenough {
    background-color: #024202;
}


.arrow {
    width: 32px;
    height: 220px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 10;
    position: absolute;
    background-color: transparent;
    top: 0;
    transform: scaleX(-1) translate(5px);
    right: 0;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 180px;
    }
}


.arrow.left {
    left: 5px;
    right: unset;
    transform: unset;
}


.arrow:hover,
.arrow:active {
    background: rgba(218, 165, 32, 0.3);
}


.arrow-icon {
    font-size: 24px;
    color: #333;
    transition: transform 0.2s ease;
}


.arrow:hover .arrow-icon {
    transform: scale(1.2);
}


.arrow.active {
    background-color: rgba(218, 165, 32, 0.2);
}


.villa-labels {
    background: linear-gradient(90deg, black, black 5%, transparent 20%, transparent);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 45px;
    width: 100%;
    font-size: 18px;
    z-index: 12;
    cursor: default;
    pointer-events: none ;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        background: none;
        font-size: 14px;
        cursor: pointer;
    }
}


#calendar-people {
    display: flex;
    position: absolute;
    top: 60px;

    z-index: 5;
    color: white;
    padding: 10px;
    font-size: 12px;
}


#calendar-adults {
}


#calendar-kids {
}


#reservation-popup {
    display: flex;
    position: absolute;
    top: 230px;

    z-index: 1000;
    color: white;
    padding: 10px;
    font-size: 12px;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        width: 90vw;
        min-height: 127px;
        top: 360px;
    }

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        top: 230px;
    }

}


#reservation-form {
    display: flex;
    gap: 10px;
    width: 90vw;
    margin-left: 30vw;
    max-width: 500px;
    justify-content: center;

    @media screen and (max-width: 900px) and (hover: hover) and (pointer: fine) {

        flex-direction: column;
        align-content: center;
        max-width: 250px;
    }

    @media screen and (max-width: 600px) and (hover: hover) and (pointer: fine) {

        flex-direction: column;
        align-content: unset;
        max-width: 250px;
        margin-left: unset;
    }


    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        flex-direction: column;
        justify-content: unset;
        margin-left: 20px;
    }

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        margin-left: 50px;
    }
}


#reservation-dates {
    display: flex;
    gap: 10px;
}


#reservation-form label {
    gap: 6px;
}


#reservation-form input::placeholder {
    color: grey;
    opacity: 0.5;
}


#reservation-form h3 {
    font-size: 12px;
    margin: 0;
}


#reservation-form input:invalid {
    background: rgba(242, 235, 235, 0.829);
    outline: 3px solid red;
}


#reservation-form input {
    color: #26502e;
    background: #eefff0;
    font-weight: bolder;
    box-sizing: border-box;
    outline: 3px solid green;
    width: 105px;
}


#reservation-dates label {
    display: flex;
    flex-direction: column;
    width: fit-content;
}


@media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
    #reservation-dates input {
        width: 105px;
    }
}


#reservation-guests {
    display: flex;
    flex-direction: column;
}


#reservation-g-number {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}


#reservation-g-number label {
    display: flex;
    flex-direction: column;
}


#reservation-g-number input {

    width: 105px;
}


#childrenAge {
    display: none;
    flex-direction: column;
    gap: 0px;
    font-size: 10px;
    z-index: 20;
    color: goldenrod;
    background: black;
    border: 1px solid goldenrod;
    position: absolute;
    left: 50%;transform: translateX(-50%);
    border-radius: 5px;
}


#children-ages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


#children-ages label {
    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        max-width: 100px;
        margin-left: -20%;
    }
}


#children-ages input {
    margin-top: 5px;
    width: 50px;
}


@keyframes shake {
    0% {
        transform: translateX(0);
        box-shadow:
            0 4px 6px rgba(179, 14, 14, 0.3),
            /* ombre portée */
            inset 0 2px 4px rgba(241, 37, 37, 0.3);
    }

    25% {
        transform: translateX(-5px);
        box-shadow:
            0 4px 6px rgba(179, 14, 14, 0.3),
            /* ombre portée */
            inset 0 2px 4px rgba(241, 37, 37, 0.3);
    }

    50% {
        transform: translateX(5px);
        box-shadow:
            0 4px 6px rgba(179, 14, 14, 0.3),
            /* ombre portée */
            inset 0 2px 4px rgba(241, 37, 37, 0.3);
    }

    75% {
        transform: translateX(-5px);
        box-shadow:
            0 4px 6px rgba(179, 14, 14, 0.3),
            /* ombre portée */
            inset 0 2px 4px rgba(241, 37, 37, 0.3);
    }

    100% {
        transform: translateX(0);
        box-shadow:
            0 4px 6px rgba(179, 14, 14, 0.3),
            /* ombre portée */
            inset 0 2px 4px rgba(241, 37, 37, 0.3);
    }
}


.shake {
    animation: shake 0.4s ease;
}


#submit-btn {
    background: url('/assets/frog1.CisVxamJ.png') center/contain no-repeat;
    color: white;
    text-align: center;
    height: 100px;
    width: 100px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.5),
        inset 0 3px 6px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    position: absolute;
    left: 100%;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        left: 260px;
        top: 20px;
    }

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        top: 20px;
    }
}


button[type="submit"] .submit-txt {
    color: #d6ad68;
    display: block;
    margin-top: 60%;
    font-weight: bolder;
    position: relative;
    font-size: 16px;
}


#submit-btn:hover {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}


@media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
    #reservation-form button {
        position: fixed;
        left: 100%;
        transform: translateX(-105%);
        top: 5%;
        height: 90%;
        width: 130px;
    }
}


@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@media (max-width: 600px) {

    .month-cell,
    .day-cell,
    .cell {
        width: 25px;
    }
}


/*
.calendar-wrapper {
    position: relative;
    overflow: hidden;
    z-index: 6 ; 

    top: -1%;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        top: 30px;
    }

}
*/


#calendar-container {
    height: 225px;
    /* espace pour les flèches */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100% ;
    text-align: center;
    margin-bottom: 5%;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
        height: 235px;
        margin: unset;
	position: relative ;
    }
}


.villa-name {
    position: relative;
    width: 100%;
    text-align: left;
    flex-shrink: 0;
    height: 30px;
    color: goldenrod;
    text-shadow:
        1px 1px 1px #000,
        /* lumière haute */
        -1px -1px 1px #ccc;

    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 25px;
    }
}


.villa-mask {
    position: absolute;
    top:0px ;
    pointer-events: none ;
    width: 100% ;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    font-size: 14px;
    color: rgb(190, 180, 61);
    line-height: 30px;
    text-align: center;
    display: none;
    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
        height: 25px;
    }
}


.cell.free.busy-end.selected.start,
.cell.free.sunday.busy-end.selected.start {
    background: linear-gradient(to bottom right, rgba(61, 6, 6, 1) 50%, goldenrod 50%);
    border-top: 2px solid rgb(219, 142, 75);
    border-radius: 50% 0 0% 50%;
    cursor: pointer;
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 2px solid rgb(219, 142, 75);
}


#custom-calendar {
    position: absolute;
    top: -100px;
    left: -30px;
    background: black ;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    opacity: 0;
    top: -100px;
    width: 0px;
    height: 0px;
}


.calendar-grid {
    display: grid;
    grid-template-columns: repeat(14, 2em);
    gap: 4px;
}


.calendar-cell {
    padding: 0.5em;
    background: black;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}


.calendar-cell.disabled {
    background: #ccc;
    pointer-events: none;
    opacity: 0.5;
}


.calendar-cell.in-range {
    background: #fdd835;
}


.calendar-cell.range-start,
.calendar-cell.range-end {
    background: #fbc02d;
    font-weight: bold;
}


@media (min-width: 600px) {
    .calendar-wrapper {
	top:25% ;
	/*	top: 180px ;*/
    }
    #reservation-popup {
	top: 400px ; 
    }
}


.button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 20px;
    margin: 10px auto;
}


/* style de base */


.adults-btn,
child-btn {
    padding: 12px 0;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, #f9f9f9, #dcdcdc);
    color: #333;
    cursor: pointer;
    box-shadow:
	0 6px 0 #aaa,
	0 6px 10px rgba(0,0,0,0.3);
    transition: all 0.15s ease-in-out;
    font-weight: 600;
}


/* survol */


.adults-btn:hover {
    background: linear-gradient(to bottom, #fff, #e2e2e2);
}


.child-btn:hover {
    background: linear-gradient(to bottom, #fff, #e2e2e2);
}


/* actif */


.adults-btn.active,
.child-btn.active {
    background: linear-gradient(to bottom, #4CAF50, #2e7d32);
    color: white;
    box-shadow:
	inset 0 4px 6px rgba(0,0,0,0.3),
	0 2px 0 #2e7d32;
    transform: translateY(4px);
}


#seladults,
#selchildren {
    display: block;
    margin: 0 auto;
    padding: 5px ;
    font-size: 14px;
    border: 1px;
    border-radius: 4px ;
    background: linear-gradient(to bottom, #2e1b1b, #352828);
    color: #cddc24;
    cursor: pointer;
    box-shadow: 
	-3px 2px 7px #aaa,
	0 6px 10px rgba(0,0,0,0.3);
    transition: all 0.15s ease-in-out;
    font-weight: 600;
    appearance: none; /* enlève la flèche par défaut */
    text-align: center;
}


/* ajoute une flèche personnalisée */


#seladults::after,
#selchildren::after {
    content: "▼";
    position: absolute;
    right: 4px;
    pointer-events: none;
}


/* effet au focus ou sélectionné */


#selchildren:focus ,
#seladults:focus {
    outline: none;
    background: linear-gradient(to bottom, #2e1b1b, #352828);
    color: #cddc24;
    box-shadow: 
	inset 0 4px 6px rgba(0,0,0,0.3),
	0 2px 0 #2e7d32;
    transform: translateY(3px);
}


#booking-dates {
    display:flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    height:130px ;
    margin-top: 5%;

    @media (max-width: 600px) {
	margin-top: 5vh;
    }

}


.dbooking_button {

    cursor: pointer  ;
    margin-top: 10px;
    margin-bottom: 10px ;
    @media (min-width: 600px) {
	bottom: 0;
	height: 93px;
        margin-left: 50%;
	transform: translate(-50%);
        width: 60%;
	max-width: 600px ;
    }

    @media (max-width: 600px) {
	padding:0 ;
	flex:1 ;
	width: 98% ;
	margin-left: 1%;
    }

    z-index: 10001;

    background-position: left 100% bottom 65%;
    background-size: 100%;
    border-radius: 12px;
    outline: 3px solid #ccba56;
    background-image: url("/assets/colibrir1.DirR3HQ-.webp");


    display: flex;
    flex-direction: column;
    align-items: center;

}


.dbooking_button h2 {
    font-size: 20px;
    color: black;
    font-family: "Dancing Script", serif;
    font-weight: bold;
    margin-bottom: 0 ;
    margin-left : 5% ;
    z-index: 1;
}


.dbooking_button,
.dbooking_button h2,
.dbooking_button:visited {
    color: white;
    text-decoration: none;

}


.dbooking_button:hover {
    border: 6px solid #ccba56;
}


.dcal_icon {
    height: 4vh;
    margin-left: 10px;
    @media (max-width: 361px) {
	margin-left: 50px;
    }
}


#minNights {
    color: white;
    font-weight: bolder ;
     text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
    z-index:2 ;
    text-align: center ;
    margin-top:10px;
    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
	margin-left: 2%;
	margin-bottom: 5px ;
    }
    
}


#booking-params {
    display:flex;
    flex-direction: column;
    position:relative;
    margin-top: 60px;
    left: 50px;
    top: 20% ;
    max-width: 80vw ;
    /*    @media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: coarse) and (hover: none) and (orientation: portrait) {*/
    @media (max-width: 600px) {

	margin-top: 5vh;
	left: unset ;
	top: 0;
    }
}


#booking-guests {
    display: flex;
    position: relative;
    flex-direction: row;
    font-size: 12px;
    align-items: center;
}


.calendar-popup {
    position: absolute;
    top: 550px;
    left: 50% ;
    transform: translateX(-50%) ;
    background: black;
    border: 1px solid #746964;
    display: none;
    padding: 10px;
    box-shadow: 10px 10px 10px rgba(0,0,0,1);
    z-index: 20000;
    max-width: 100vw;
}


.cal-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


.month-selector {
    cursor: pointer;
    color: white ;
    background : black ;
    padding: 5px 10px;
}


.month-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: black;
    color: white ;
    border: 1px solid goldenrod;
    z-index: 1001;
    max-height: 200px;
    overflow-y: auto;
}


.month-list div {
    padding: 5px 10px;
    cursor: pointer;
}


.month-list div:hover {
    background: #eee;
}


.calendar-body {
    display: flex;
    flex-wrap: wrap;
}


.calendar {
    margin: 10px;
    color: goldenrod ;
}


.calendar table {
    border-collapse: collapse;
}


.calendar th, .calendar td {
    width: 20px;
    height: 25px;
    font-size: 14px ;

    text-align: center;
    cursor: pointer;
}


.calendar .vide{
    cursor: none ;
    pointer-events: none ;
}


.calendar td:hover {
    background: #eee;
}


.available.start {
    cursor: pointer;
    background: linear-gradient(to bottom right, #045704, #045704 50%,goldenrod 50%, goldenrod);
    width: 20px;
    cursor: pointer;


    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;
}


.noentry.end {
    background: linear-gradient(to bottom right, goldenrod, goldenrod 50%,  #047704 50%, #047704 );
}


.available.end,
.available.afternoentry.selected.end,
.noentry.end {
    cursor: pointer;
    background: linear-gradient(to bottom right, goldenrod, goldenrod 50%,  #047704 50%, #047704 );
    width: 20px;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;    
}


.available.in-range,
.available.afternoentry.selectedc.in-range,
.noentry.in-range,
.noentry.afteravail.in-range {
    background: goldenrod ;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;        
}


.available.afternoentry.start {
    background: linear-gradient(to bottom right,#242312 , #242312 50%, goldenrod 50%, goldenrod ) ;
}


.disabled.afternoentry.selectedc.end {
    background: linear-gradient(to bottom right, goldenrod, goldenrod 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));

}


.available.afterbusy.start {
    background: linear-gradient(to bottom right,rgba(61, 6, 6, 1) , rgba(61, 6, 6, 1) 50%, goldenrod 50%, goldenrod ) ;
}


.available.afterbusy {
    cursor: pointer;
    background: linear-gradient(to bottom right,rgba(61, 6, 6, 1) , rgba(61, 6, 6, 1) 50%, #045704 50%, #045704 ) ;
    
    width: 20px;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right,rgba(61, 6, 6, 1) , rgba(61, 6, 6, 1) 50%,  rgb(0, 117, 21) 50%, rgb(0, 117, 21) ) ;

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;

    }
}


.available.afternoentry {
    cursor: pointer;
    background: linear-gradient(to bottom right,#047704, #047704 50%, #045704 50%, #045704 ) ;
    
    width: 20px;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right,#045704 , #045704 50%,  rgb(0, 117, 21) 50%, rgb(0, 117, 21) ) ;

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;


    }
}


.mini {
    border: 2px solid #242312;
}


.noentry.afteravail.selected.end {
    background: linear-gradient(to bottom right, goldenrod, goldenrod 50%, #047704 50%, #047704);
}


.noentry.afteravail {
    cursor: pointer;

    background: linear-gradient(to bottom right, #045704, #045704 50%, #047704 50%, #047704);
    width: 20px;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right, rgb(0, 117, 21), rgb(0, 117, 21) 50%, #047704 50%, #047704);

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;
        color: white;

    }
}


.disabled.afteravail {
    cursor: pointer;
    background: linear-gradient(to bottom right, #045704, #045704 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));
    width: 20px;
    cursor: pointer;
    color: white;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right, rgb(0, 117, 21), rgb(0, 117, 21) 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;

    }
}


.disabled.afternoentry {
    cursor: pointer;
    background: linear-gradient(to bottom right, #047704, #047704 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));
    width: 20px;
    cursor: pointer;
    color: #ff7575;
    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right, #047704, #047704 50%, rgba(61, 6, 6, 1) 50%, rgba(61, 6, 6, 1));

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;

    }
}


.noentry.beforeavail {
    cursor: pointer;
    background: linear-gradient(to bottom right, #047704, #047704 50%,#045704 50%, #045704 ) ;
    width: 20px;
    cursor: pointer;

    border: 0.1px solid #242312;
    border-radius: 6px 2px 2px 2px;

    &:hover {
        background: linear-gradient(to bottom right, #047704, #047704 50%, rgb(0, 117, 21) 50%, rgb(0, 117, 21) ) ;

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;

    }
}


.afterbusy.selectedc {
    background: linear-gradient(to bottom right, rgba(61, 6, 6, 1) 50%, goldenrod 50%);
    border-top: 2px solid rgb(219, 142, 75);
    border-radius: 50% 0 0% 50%;
    cursor: pointer;
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 2px solid rgb(219, 142, 75);

}


.selectedc {
    box-sizing: border-box;
    background-color: goldenrod;
    border-top: 2px solid rgb(219, 142, 75);
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 0.1px solid white;
    border-radius: 0px;
    color: black;
}


.available {
    box-sizing: border-box;
    border: 0.1px solid #0e170d;
    border-radius: 6px 6px 6px 6px;
    background: #045704;
    color: white ;

    &:hover {
        background: rgb(0, 117, 21);
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 3px rgba(10, 10, 10, 0.3);
        transform: translateY(-0.5px);
        transition-duration: 0.1s;
    }
}


.in-range .beforebusy {
    background: linear-gradient(to bottom right, goldenrod 50%, rgba(61, 6, 6, 1) 50%);
    cursor: pointer;
    border-bottom: 2px solid rgb(219, 142, 75);
    border-right: 2px solid rgb(219, 142, 75);
    border-radius: 0 50% 50% 0;
}


.in-range {
    box-sizing: border-box;
    background-color: goldenrod;
    border-top: 2px solid rgb(219, 142, 75);
    border-bottom: 2px solid rgb(219, 142, 75);
    border-left: 0.1px solid white;
    border-radius: 0px;
}


.disabled {
    box-sizing: border-box;
    pointer-events: none;
    cursor: not-allowed;
    box-sizing: border-box;
    border-radius: 3px;
    border: 0.1px solid rgba(80, 40, 40, 1);
    border-radius: 2px;
    background: rgba(61, 6, 6, 1);
    color: grey ; 
}


.noentry {
    box-sizing: border-box;
    background-color: #047704;
    color: #ff7575;
}


.unselectable {
    filter: brightness(0.5) ;
    cursor: none ;
    pointer-events: none ;
}


#ok-btn {
	margin-top: 10px;
	padding: 5px 10px;
}


@media (max-width: 600px) {
	.calendar-body {
            flex-direction: column;
	}
    }
.menu {

  background: transparent ;
  color: white ;
  padding: 1rem 0;
  position: fixed;
  /**/
  top: -10px;
  
  left: 0;
  width: 99vw;
  left:1vw;
  overflow: auto;
  opacity: 0 ;
  z-index:-1 ;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex ;
  justify-content: center;
  gap: 2% ;
}

.menu li {
  margin: 1rem 0;
  text-align: center;
}

.menu a {
  color: white;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  transition: color 0.3s;
}

.menu a:hover {
  color: #f0a500;
}
.menu a.active {
  color: #f0a500;
  background: #333;
  border-radius: 0.5rem;
}

/* BOUTON BURGER */
#burger {
  display: none;
  font-size: 3rem;
  background: none;
  border: none;
  padding: 0 ;
  color: white;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 86vw;
  width: 10vw ;
  padding-right: 10px ;

  z-index: 2000;
}

/* RESPONSIVE MOBILE */
@media (max-width: 700px) {
  #burger {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    padding-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 1500;
    width: max-content;
  }

  .menu.active {
    display: flex;
  }

  .menu ul {
    flex-direction: column;
    gap: 2rem;
  }

  .menu li {
    margin: 0;
  }
}

#Contact {
    height: 100vh;
    display:flex;
    flex-direction:column;
    z-index: 10002;
}

#kaz-Contact {
    z-index:0;
    display: flex;
    position:relative;
    flex-direction: column;
    background: url(/assets/frog_ini.BwPYTpeH.webp) right;
    background-position: left 75% bottom 0% ;
    background-size: cover;
    border-radius: 12px;
    height: 100vh;
}

.chat-container {
    position: fixed ;
    top: 70% ;
    right: 20px ;
    z-index: 2000 ;
    /*display: inline-block;*/
    cursor: pointer;

    
    @media (max-width: 361px) {
	right: 0px;
    }

    opacity: 0 ;
}


.chat-container .tooltip-text {
    display: none ;
    @media (min-width: 600px) {
	display: block ;
	visibility: hidden;
	width: 120px;
	background-color: #333;
	color: goldenrod;
	text-align: center;
	padding: 6px 8px;
	border-radius: 6px;

	position: absolute;
	z-index: 1;
	bottom: -50% ;
	left: 50%;
	transform: translateX(-100%);

	opacity: 0;			
	transition: opacity 0.3s;
    }
}

.chat-container:hover .tooltip-text {
    display: none ;
    @media (min-width: 600px) {
	display: block ;
	visibility: visible;
	opacity: 1;
    }
}

#chat-icon {
    background: transparent;
    color: white;
    border: 2px solid goldenrod;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-image: url(/assets/contactus.DSotP_iY.webp);
    box-shadow: -4px 2px 20px 5px rgb(212, 183, 38);
    transform: translateY(0);
    width: 60px ;
    height: 60px ;

}

#chat-icon:hover {
    background-color: rgba(128, 128, 128, 0.394);
}

#chat-icon:active {
    transform: translateY(2px);
    /* effet d’enfoncement */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    /* ombre réduite */
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1.1);
    }
}

.heartbeat {
    animation: heartbeat 0.8s ease-in-out;
}

#form-popup {
    position: relative;

    border-radius: 10px;
    width: 100% ;

    z-index: 5;

    ::placeholder {
        color: rgb(63, 63, 63);
    }

    @media (min-width: 600px) {
	display: flex;
	gap: 5% ;
	top: 30vh;
    }
    
    @media (max-width: 600px) {
	width: 99vw ;
	left:1vw ;
	top: 10vh ;
	height: 60vh ;
	width: 90%;
    }
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 600px;
        height: 250px;
        top: 20px;

    }
}

#contact-form {

    border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    
    padding: 10px;
    @media only screen and (min-width: 600px) {
	width: 50% ;
	margin-left:8%;
    }
    
}

#form-popup input,
#form-popup select,
#form-popup textarea {
    width: 100%;
    background-color: transparent ;
    color: black;
    font-weight: bolder ;
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        position: relative;
        width: 30%;
        left: 1cap;
    }
}

#form-popup textarea {

    height: 140px;
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 45%;
        position: absolute;
        top: 32px;
        left: unset;
        right: 40px;
        height: 140px;
    }
}

.fp-button {
    color: black;
    background: #5cc437;
    border: 3px solid #62571d;
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: bolder ;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(0);

    margin-top: 40px ;

}

.fp-button:hover {
    color: rgb(181, 176, 119);
    font-weight: bolder;
}

.fp-button:active {
    transform: translateY(2px);
    /* effet d’enfoncement */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    /* ombre réduite */
}

.contact-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.contact-field h3 {
    width: 30%;
    @media (min-width: 600px) {
	width: 35%;
    }
    font-size: 15px;
    color: gold;
    margin-block: 0;

    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        width: 10%;
    }
}


.fade-message {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    padding: 15px;
    border-radius: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 10000;
}

.fade-message.show {
    display: block;
    opacity: 1;
}

.fade-message.success {
    background-color: #28a745;
}

.fade-message.error {
    background-color: #dc3545;
}

#ct-logo {
    width: 150px;
    top: 60px ;
    position: absolute;
    left: 50%;
    @media (max-width: 600px) {
	left: 100%;
    }
	      
    transform:translateX(-102%) ;
}

.contact-icons {
    display: flex;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-120%);
    font-size: 40px;
    color: gold;
    gap: 10%;
    justify-content: space-around;
    margin-top: 2% ;
    @media (max-width: 600px) {
	margin-top: 10vh ;
    }
    
    @media only screen and (max-device-width: 430px)  and (orientation: landscape) {

        color: gold ;
        font-size: 25px ;
        transform: translateY(-110%);

    }
    @media only screen and (min-width: 600px) {
	position: relative;
	flex-direction: column ;
	left: 0;
	transform: translateY(-120%);
	gap:0%;
    }
}


.c-icon {
    background-color: #ffffff29;
    color: #5cc437;
    padding: 14px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    @media only screen and (min-width: 600px) {
	height: 35px;
    }
}

.c-icon:hover {
    background-color: #58460d80;

}

.c-icon:active {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.contact-icons h2 {
    position: relative;
    font-size: 18px;
    margin-left: -60px;
    margin-top: 40px;
    font-family: 'Times New Roman', Times, serif;

    @media  (max-width: 600px) {
	display: none ;
    }
    
}

.close_char {
    font-size: 24px;
    position: absolute;
    top: -10px;
    left: 15px;
    display: none;
}