@font-face {
  font-family: 'dancing script';
  src: url('/assets/dancing-script-v28-latin-600._ukDC7V5.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.BP5iDl0p.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.C1AAleFQ.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.lxnGg8Pm.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.C1rTVEzU.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


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


#cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 12px auto;
}


#kaz-Contact {
    z-index:0;
    display: flex;
    position:relative;
    flex-direction: column;
    background: url(/assets/frog.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) {
	left:1vw ;
	top: 20vh ;
	height: 60vh ;
	width: 80%;
    }
    @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: 50vh ;
    opacity:0.4;
    position: absolute;
    left: 50%;
	      
    transform:translateX(-102%) ;
}


@media (max-width: 600px) {
    #ct-logo {
/*	left: 100%;*/
	position: unset;
	margin-left:120%;
	margin-top: -80%;
    }
}


.contact-icons {
    display: flex;
    position: absolute;
    top: 30vh;
    left: 65vw;
    font-size: 40px;
    color: gold;
    gap: 10%;
    justify-content: space-around;
    margin-top: 2% ;
}


@media (max-width: 600px) {
    .contact-icons {
	top: 80vh ;
	left: 50vw;
	transform: translateX(-50%) ;
    }
}


@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
    .contact-icons {
        color: gold ;
        font-size: 25px ;
        transform: translateY(-110%);

    }
}


@media only screen and (min-width: 600px) {
    .contact-icons {
	flex-direction: column ;
	gap:0%;
    }
}


.contact-section {
  display: flex;
  flex-direction: column;
  gap: 30px ;
  z-index: 6;

    @media (max-width: 600px) {
	flex-direction: row ;
    }
  
}


.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px ;

  font-size: 18px ;
  font-family: 'Times New Roman', Times, serif;
}


.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;
}


.c-icon svg {
  width: 30px;
  height: 30px;
}


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


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


.contact-text {
    color: inherit;
    text-decoration: none;
    @media  (max-width: 600px) {
        display: none ;
    }
}


.contact-text:hover {
  text-decoration: underline;
}


address {
  font-style: normal;
}


/*
.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;
}


.captcha-error {
  margin-top: 10px;
  color: #d8b46a;
  font-size: 0.95rem;
  line-height: 1.4;
}


.gwada-wrapper {
    opacity: 0.7;
    position: fixed;
    display: inline-block;

    width: 30%;
    top: 50%;
    left: 0;
    
    z-index: 0;
}


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


@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
    .gwada-wrapper {
        width: 20%;
        top: 0;
        transform: translateX(-100%);
    }
}


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


.sparkle {
    position: absolute;
    pointer-events: none;    
    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;

    z-index: 2;
}


@keyframes blink {
    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.7);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
}


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


@media (min-width: 600px) {
    .bordure-wraper {
	width: 100px;
    }
}


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


.tableau {
    opacity: 1;
    position: absolute;
    
    width: 20vw;
    top: 0;
    left: 100% ;
    transform: translate(-110%,30%);
    max-width: 250px;
    aspect-ratio: 1;
    
    object-fit: cover;
    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);

    z-index: 4 ;

}


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


@media (min-width: 600px) {
    .tableau {
	top: 0;
	left: 100%;
	transform: translate(-130%,-60%);
    }
}


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


@media (min-width: 600px) {
    .kaz-specs {
	margin-top: 2%;
	margin-left: 5%;
    }
}


.icons-wraper {
    display: flex;
    flex-direction: row;
    
    width: 100%;
    margin-left: 0;
    height: 60%;
    margin-top: 2%;
    align-items: center;
    justify-content: center;
    border-left: 0;
}


@media (min-width: 600px) {
    .kaz {
	--kaz-height: clamp(130px, 18vh, 190px);
	height: var(--kaz-height);
    }

    .bordure-wraper,kaz-xb {
	height: var(--kaz-height);
    }
    
    .kaz-wraper {
	height: calc(var(--kaz-height)*0.8);
    }

    .spec-icon {
	max-height: 30px;
    }
    
    .icons-wraper {
	height: calc(var(--kaz-height)*0.8);
	margin-top: unset;
	flex-direction: column;
	justify-content: unset;
	width: unset ;
	margin-left: unset ;
	border-left: unset ;
    }
    .icons-wraper:has(.spec-icon:nth-child(2):last-child) .spec-icon{
	height:48%;
    }
    .icons-wraper:has(.spec-icon:nth-child(3):last-child) .spec-icon{
	height:31%;
    }
    .icons-wraper:has(.spec-icon:nth-child(4):last-child) .spec-icon{
	height:23%;
    }
}


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

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


@media (min-width: 600px) {
    .spec-icon {
	/*	max-width: 50px;*/
	max-width: calc(var(--kaz-height)*0.3);
	width: auto;
	object-fit: contain;
	justify-content: unset ;
	margin: 3%;
    }
}


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


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


.strong-spec {
    display: inline-block;
    position: absolute ;
    
    top: -20% ;
    left: 2% ;
    width: auto;
    
    margin: 0;    
    background-color: rgb(18 18 15 / 50%);
    border: 2px solid red;
    padding: 4px 4px;
    color: #d7e023;
    border-radius: 10px;

    z-index: 5 ;
}


@media (min-width: 600px) {
    .strong-spec {
        top: -40% ;
        left: 12% ;
	
        font-size: 25px ;
    }
}


.specs {
    position: relative;
    flex-direction: column;
    display: flex;
    
    width: 100%;
    justify-content: center;
    gap: 3%;

    z-index: 5;
}


@media (min-width: 600px) {
    .specs {
	width: 80%;
	flex-direction: unset ;
	justify-content: unset ;
	gap: unset ;
    }
}


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


.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-bottom: 0;
    margin-top: 0;
    margin-right: 0px ;
    margin-inline-end: 4px ;
    margin-inline-start: 0px ;
    
    font-weight: lighter;
    color: white;
    white-space: nowrap;
}


@media (min-width: 600px) {
    /* IPAD */
    .spec {
        margin-bottom: 1%;
    }
    
    .spec.conf {
	height:  calc(var(--kaz-height)*0.16);
    }

    .spec img {
	height: calc(var(--kaz-height)*0.08);
        margin-right: 2px ;
    }

    .spec h4 {
	font-size: calc(var(--kaz-height)*0.07);	
	margin-right: 15px;
    }
}


@media (max-height: 700px) {
    .spec {
	display:none;
    }
    .spec.conf {
	display: block  ;
    }
}


#tbi {
    border: 10px solid rgba(109, 90, 16, 0.158);
}


@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
    #tbi {
        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) {
    #ttc {
        border: 5px solid rgba(196, 165, 10, 0.863);
    }
}


.kaz {
    position: absolute;
    display: flex;

    width: 100vw;
    top: 100%;
    transform: translateY(-100%);
    height: auto;

    z-index: 4;
}


@media (min-width: 600px) {
    .kaz {
	/*	min-height: 170px;*/
	height:clamp(130px,18vh,190px);
    }
}


.kaz .kaz-fond {
    opacity: 0.5;
    position: absolute;
    
    width: 100vw;
    height: 100%;
    object-fit: cover;
}


.frog {
    position: absolute;

    top: 0;
    transform: translateY(-50%);
    height: 55%;
    left: 20% ;
    
    z-index: 4;
}


.foufou {
    position: absolute;

    top: 0;
    transform: translateY(-100%);
    height: 65%;
    left: 5%;

    z-index: 4 ;
}


@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
    .foufou {
        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) {
    .iguane {
        height: 55%;
        left: 60%;
    }
}


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


@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
.colibriassis {
        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) {
    .belledame {
        height: 55%;
    }
}


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


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


@media (min-width: 600px) {
    .frog {
        height: 65%;
        left: 35%;
    }
    .foufou {
	left: 65%;
    }
    .iguane {
        height: 65%;
        left: 10%;
    }
    .colibriassis {
	height: 65%;
    }
    .belledame {
        height: 65%;
        left: 100%;
    }
    .chenille {
	height: 45%;
    }
}


.kaz-wraper {
    height: 100%;
}


@media (min-width: 600px) {
    .kaz-wraper {
	margin-left: 120px;
	flex-direction: unset ;
    }
}


@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 ;
	}
}


.presLodge {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}


.presLodge:hover {
    scrollbar-color: rgba(255,255,255,.25) transparent;
}


.presLodge::-webkit-scrollbar {
    width: 4px;
}


.presLodge::-webkit-scrollbar-track {
    background: transparent;
}


.presLodge::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background .2s;
}


.presLodge:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
}


.presLodge:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.45);
}


.footer,
.burger-footer{
    opacity:0;
    pointer-events:none;
}


body.intro-finished .footer,
body.intro-finished .burger-footer{
    opacity:1;
    pointer-events:auto;
}


.footer {
    display: flex ;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 50%;
    width: 50% ;
    transform: translateX(-50%);

    background-color: transparent;
    justify-content: center ;
    align-content: flex-end;
    flex-wrap: wrap ;
    gap: 4px ;
    
    /*    height: 6vw;*/
    z-index: 200;
}


.footer a {
    display: flex ;
    font-size:12px;
        

    color:#d4bc5c;
    text-align:center;
    opacity:.75;
    gap: 20px ;
    text-decoration:none;
/*    margin:0 6px;*/
}


.footer a:hover{
    color:#c7a55a;
}


/* Desktop */


@media (min-width:1000px){
    .footer{
        display:flex;
    }

    .burger-footer{
        display:none;
    }
}


/* Mobile */


@media (max-width:999px){
    .footer{
        display:none;
    }
    .burger-footer{
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-top:25px;
        padding-top:20px;
        border-top:1px solid rgba(212,188,92,.5);
        gap:12px;
    }

    .burger-footer a{
        color:#d4bc5c;
        text-decoration:none;
        font-size:14px;
    }
}


@media (max-width: 600px) {
    .footer {
	display: none;
	width: 92vw ;
	height: 40px ;
	left: 4vw ;
	margin-bottom: 30px ;
    }
}


@media (min-width: 600px) {
    .footer {
	min-height: 45px;
	margin-bottom: 4px ;
    }
}


.BoudhAnne {
    position: fixed;
    font-size: 15px;
    color: grey;
    transform: translate(-150%, -120%);
    width: max-content;
    left: 99vw;
    top: 100%;
    z-index: 100000;
}


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


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


.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: 1;
}


.h2_img_80 {
    top: 4vh ;
    left: 50%;
    margin:0;
    background-color: rgba(50, 50, 50, 0.65);
    border: 1px solid transparent;
    box-shadow: 0px 0px 50px 30px rgba(40, 40, 40, 0.7), 0px 0px 50px 40px rgba(40, 40, 40, 0.7);
    border-radius: 20px;
    position: relative;
    padding: 20px 8px;
    transform: translateX(-50%) ;
    align-self: flex-start;
}


.h2_img_80 img {
    display: block;
    width: auto;
    height: 43px
}


.h2_img_117 {
    top: 4vh ;
    left:  50%;
    margin:0;
    background-color: rgba(50, 50, 50, 0.65);
    border: 1px solid transparent;
    box-shadow: 0px 0px 50px 30px rgba(40, 40, 40, 0.7), 0px 0px 50px 40px rgba(40, 40, 40, 0.7);
    border-radius: 20px;
    position: relative;
    padding: 20px 8px 0px 8px;
    transform: translateX(-50%);
    align-self: flex-start;
}


.h2_img_117 img {
    display: block;
    width: auto;
    height: 59px;
    
}


.presLodge {
    position: relative;
    font-size: 20px;
    max-width: 80%;

    display: inline-block;
    width: auto;

    white-space: pre-line;

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

    box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.45), 0px 0px 50px 40px rgba(0, 0, 0, 0.45);
    display:  block ;
    overflow: visible;
 
}


/*
@media (max-width: 599px) {
    .presLodge {
 	font-size: 18px ;
	max-width: 90% ;
	margin-top: 15%;
	padding: 5px 5px ;
    }
}
*/


@media (max-width: 599px) {

    .presLodge {
	margin-top: 15% ;
        padding-bottom: 20px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
	padding: 5px 10px;
    }

    .presLodge + .read-more {
        position: relative;
        display: block;
        width: max-content;

        margin: -25px 7% 0 auto;

        z-index: 10;

        padding: 2px 5px;

        font-family: 'Times New Roman', Times, serif;
        font-size: 13px;
        font-style: italic;

        color: #dacb8d;
        background: rgba(0, 0, 0, .7);

        border: 0;
        cursor: pointer;
    }
}


.text-overlay {
  display: none;
  position: fixed;
/*  inset: 0;*/
  z-index: 200000;
  background: rgba(0,0,0,.82);
  padding: 50px 10px 30px;
  overflow-y: auto;
}


.text-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}


.text-overlay-box {
  position: relative;
  max-width: 720px;
  max-height: 78vh;
  overflow-y: auto;

  background: rgba(0,0,0,.88);
  color: #dacb8d;
  border: 1px solid #dacb8d;
  border-radius: 22px;
  padding: 4px 12px 4px;

  box-shadow: 0 0 40px rgba(218,203,141,.25);
}


.text-overlay-close {
  position: absolute;
  top: 12px;
  right: 14px;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  color: #dacb8d;
  background: rgba(0,0,0,.5);
  border: 1px solid #dacb8d;

  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}


.text-overlay-content {
  white-space: pre-line;
  font-size: 17px;
  line-height: 1.6;
}


/* Desktop : pas besoin du bouton */


@media (min-width: 601px) {
  .read-more,
  .text-overlay {
    display: none !important;
  }
}


/* Desktop : texte complet */


@media (min-width: 601px) {
    .presLodge {
	display: block;
	overflow: visible;
	
    }

}


/* Mobile : texte court + bouton */


@media (max-width: 600px) {
.presLodge {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
  }

  .read-more {
    display: inline-block;
    margin-bottom: 20px;
    color: #dacb8d;
    background: rgba(0,0,0,.45);
    border: 1px solid #dacb8d;
    border-radius: 20px;
    padding: 6px 14px;
  }

  .text-overlay-content {
      font-size: 14px;
  }

}


.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: white;
  font-size: clamp(14px, 1.5vw, 22px);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 2px 8px black;
  z-index: 5;
  pointer-events: none;
}


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

    position: relative;
    max-width: 80%;
    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;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.96);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


#lightbox.active {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}


#lightbox-video {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}


/*
.lightbox.active {
    display: flex;
    
}
*/


.lightbox-content {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.lightbox img,
.lightbox video {
    max-width: 100vw;
    max-height: 100dvh;
    width: auto;
    height: auto;
    object-fit: contain;
}


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


.lightbox-close {
    top: 18px;
    right: 24px;
}


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


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


.lightbox-desc {
    position: fixed;
    bottom: 20px;
    left: 10vw;
    right: 10vw;
    color: white;
    text-align: center;
    z-index: 100000;
}


/* Empêche les carrousels cachés de recevoir les clics */


.cSection {
    pointer-events: none;
}


.cSection.is-visible {
    pointer-events: auto;
}


/* Filtrage orientation */


@media (orientation: portrait) {
    .carousel-slide[data-orientation="landscape"] {
        display: none;
    }
}


@media (orientation: landscape) {
    .carousel-slide[data-orientation="portrait"] {
        display: none;
    }
}


@media (min-width: 600px) {

    .kaz-name {
	display: block ;
	flex-direction: unset ;
	align-items: unset ;
    }
    .kaz-name h2 {
	position: absolute;
	margin-bottom: unset ;
	/**/

	top:  6vh;
	left: 8%;
	transform: unset ;

	padding: unset ;
	display: block ;
	font-size: 100px ;

    }
    .h2_img_80 {
	position: absolute;
	top:  8vh;
	left: 8%;
	transform-origin: top left;
	transform: scale(0.8);
	width: auto;
	height:  85px;

	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;
    }
    .h2_img_80 img {
	display: block;
	width: auto;
	height: 85px;
	transform:  scale(0.8) ;
    }
    .h2_img_117 {
	position: absolute;
	top:  8vh;
	left: 8%;
	transform-origin: top left;
	transform: scale(0.8);
	width: auto;
	height:  117px;

	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;
    }
    .h2_img_117 img {
	display: block ;
	width: auto ;
	height: 117px;
	transform: scale(0.8);
    }
    .presLodge {
	top: 20vh;
	left: 6vw;
	max-width: 40vw;

	overflow: unset;

	position: absolute;
	width: auto ;
	padding: 2%;
    }
    .carousel {
	position: absolute;
	/*
	left: 8%;
	top: 20vh;
       */
	left:  100%;
	transform: translateX(-120%);
	top:25vh;
	max-width: 35vw;
	height: 30vh ;
    }
}


@media (min-aspect-ratio: 2/1) and (min-width: 1023px) {
.presLodge {
        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 ;
   }
.presLodge {
	top: 20%;
	left: 50%;
	max-width: 40%;
	position: absolute;
	width: auto ;
	z-index: 4 ;
    }
}


body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
    
}


html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


.btn-reserver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12dvh;
    left: 100%;
    transform: translateX(-140%);
    font-size: 2vw;
    width: max-content;
    font-family: auto;
    text-align: center;
/*    font-size: max(min(3vw, 24px), 16px);*/
    font-style: italic;
    font-weight: 600;
    color: goldenrod;
    white-space: pre-line;
    text-shadow: 0 0 2px black, 0 0 6px rgba(0, 0, 0, .8);
    gap: 14px;
    min-width: 150px;
    padding: 12px 22px;
    letter-spacing: .06em;
    text-decoration: wavy;
    background: linear-gradient(135deg, rgb(34 24 9), rgb(62 44 12 / 60%));
    border: 3px solid rgba(255, 225, 150, .55);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}


.btn-reserver:hover {
  transform: translate(-140%,-2px);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, .27),
    inset 0 1px 0 rgba(255, 255, 255, .25);

  filter: brightness(1.08);
}


.btn-reserver:hover .btn-reserver__arrow {
  transform: translateX(-161%);
}


.btn-reserver:active {
  transform: translate(-140%,0);
}


@media (max-width: 600px) {
    .btn-reserver {
	position: unset;
	margin-top: 1dvh;
	font-size: 25px ;
	margin-bottom: 2dvh;
	width: auto;
	transform: unset;

    }
    .btn-reserver:hover {
	transform: translateY(-2px);
    }
    .btn-reserver:hover .btn-reserver__arrow {
	transform: translateX(4px);
}

.btn-reserver:active {
  transform: translateY(0);
}
}


.btn-reserver__arrow {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;

  transition: transform .2s ease;
}


.panel-dots {
    position: fixed;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 12px;

    z-index: 1000;
}


.panel-dots span {
    width: 12px;
    height: 12px;

    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition: all .25s ease;
}


.panel-dots span.active {
    background: rgba(218,165,32,0.5);

    box-shadow:
        0 0 4px black,
        0 0 8px goldenrod;
}


body {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


#accueil {
    opacity: 1;
    pointer-events: auto;
    z-index: 200;
}


#video-accueil {
    width: 100vw;
    height: 100dvh;
    object-fit: cover;
}


#overlay {
    transition: opacity 1.2s ease;
    background: bottom right / cover no-repeat
		url("/assets/clairdelune_mobile.B4vg4rgN.webp");

    z-index: 2;
}


@media (min-width: 1024px) {
    #overlay {
	background: bottom right / cover no-repeat
		    url("/assets/clairdelune_desktop.BrX-njVx.webp");
    }
}


body.intro-finished #accueil {
    opacity: 0;
    pointer-events: none;
    
    z-index: 0;
}


.cSection {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    
    inset: 0;
    width: 100vw;
    height: 100dvh;
    
    filter: brightness(0.85);
    transition:
	opacity 1200ms ease,
	transform 1200ms ease,
	filter 1200ms ease;
    
    z-index: 1;
}


.cSection.is-visible {
    opacity: 1;
    pointer-events: auto;
    
    filter: brightness(1);
    
    z-index: 100;
}


.single-lodge-page .cSection{
    min-height:100dvh;
    opacity:1;
}


#Boisdinde { z-index: 3; }


#Flamboyant { z-index: 4; }


#Ticoco { z-index: 5; }


#Maracudja { z-index: 6; }


#Manguier { z-index: 7; }


#Calebassier { z-index: 8; }


#Disponibilites { z-index: 9; }


#Contact { z-index: 10; }


/* Fleche a integrer dans chaque panel*/


#scrolldown,
#scrollup {
    position: fixed;
    left: 95vw;
    width: 40px;
    opacity: 0.8;
    cursor: pointer;
    background: rgba(255,255,255,0.5);
    border: 3px solid goldenrod ;
    z-index: 10200;
}


#scrolldown {
    transform: scaleY(-1);
    top: 6.3dvh;
}


#scrollup {
    top: 2dvh;
}


#logodr {
    opacity: 0;
    position: fixed;

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

    z-index: 4;
}


#logodr .logoPorte {
    opacity: 0.4;
}


@media (min-width: 600px) {
    #logodr {
	left: 100%;
	top: 100%;
	transform: translate(-110%, -100%);
    }
    #logodr .logoPorte {
	opacity: 0;
    }
    #logodr .logoTitle {
        opacity: 0.4;
    }
}


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

}


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


#logoovl h1 {
    color: #909232;
}


@media (max-width: 361px) {
    #logoovl {
	left: none ;
	transform: none ; 
    }
    #logoovl .logoPorte {
	width: unset ;
    }
    #logoovl .logoTitre {
 	margin-top: -60dvh;
    }
}


@media (min-width: 600px) {

    #logoovl {
        left: 18%;
        top: 28dvh;
	transform: unset ;
    }
    #logoovl h1 {
	white-space: pre-line;
    }	

    #logoovl .logoPorte {
        opacity: 1;
    }

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

}


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


.logo {
    position: absolute;

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

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


.logo .logoPorte {
    opacity: 0.4;

    width: 45dvh;
    max-width: 400px;
    pointer-events: none ;
}


.logo .logoTitre {

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


.logo-subtitle {

    text-align: center;

    font-size: max(min(3vw, 24px), 16px);
    font-style: italic;
    font-weight: 600;

    color:white;
    white-space: pre-line;
    text-shadow:
	0 0 2px black,
	0 0 6px rgba(0,0,0,.8);
}


#h1small {
    font-size: max(min(2vw, 20px), 12px);
    width: 36vw;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    color:white;
    white-space: pre-line;
    text-shadow:
	0 0 2px black,
	0 0 6px rgba(0,0,0,.8);
}


#skip-intro {
    opacity:.75;
    position:absolute;
    
    top:2dvh;
    left:50%;
    transform: translateX(-50%);

    padding:12px 22px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:30px;
    background:rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
    color:white;
    font-size:0.95rem;
    cursor:pointer;
    animation: skipPulse 2.5s infinite;
    transition:
	opacity .3s ease,
	transform .3s ease;
    
    z-index:1000;
}


#skip-intro:hover {
    opacity:1;
    
    transform: translateX(-50%) scale(1.06);
    
    animation-play-state: paused;

}


@keyframes skipPulse {
    0% {
	opacity:0.55;
	transform: translateX(-50%)  scale(1);
    }
    50% {
	opacity:1;
	transform:translateX(-50%) scale(1.04);
    }
    100% {
	opacity:0.55;
	transform:translateX(-50%) scale(1);
    }
}


#replay-intro {
    position:absolute;

    left:3vw;
    bottom:3dvh;
    
    color:rgba(255,255,255,.75);
    text-decoration:none;
    font-size:.9rem;
    transition:.3s;
    cursor:pointer;
    
    z-index:5000;
}


#replay-intro:hover {
    transform:translateX(4px);
    color:white;
}


.page-section-link {
    position: absolute;
    left:-9999px;
}


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


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


#presentation {
    display: none;
    position: absolute;

}


#presentation.active {
    display: block;
    z-index: 3;
    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%);


}


@media (min-width: 600px) {
        #presentation.active {
        top: 10dvh;
        left: 55vw;
        width: 40%;
	transform: unset ;
    }
}


.menu {

    background: transparent;
  color: white;

  padding:1rem 0;

  position:fixed;

  top:-10px;

  width:99vw;
  left:1vw;

  overflow:auto;

  opacity:0;

  z-index:5000;

  transition:opacity .5s ease;
  
}


.menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: url("/assets/bordureh.DRB2CzDz.webp");
    background-repeat: repeat-x;     /* répétition horizontale uniquement */
    background-position: left center;
    background-size: auto 100%;      /* hauteur = hauteur du menu */

    opacity: 0.25;
    pointer-events: none;
}


.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 ;
  pointer-events: auto ;
  z-index: 10000;
}


/* RESPONSIVE MOBILE */


@media (max-width: 1000px) {
  #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: 10000;
    pointer-events: auto;
    width: max-content;
  }

  .menu.active {
      display: flex;
      opacity:1
  }

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

  .menu li {
    margin: 0;
  }
}


.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;
	}
    }


#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;
    }


}


#Disponibilites {
  position: relative;
}


.promo-drawer {
  --drawer-width: min(390px, calc(100vw - 50px));
  --drawer-tab-width: 46px;

  position: fixed;
  top: 50%;
  right: 0;
  z-index: 12000;

  display: flex;
  width: var(--drawer-width);
  max-height: min(620px, calc(100dvh - 40px));

  color: #e3c675;
  background:
    linear-gradient(
      145deg,
      rgba(13, 13, 11, 0.97),
      rgba(30, 27, 18, 0.96)
    );

  border: 1px solid rgba(218, 180, 86, 0.75);
  border-right: 0;
  border-radius: 16px 0 0 16px;

  box-shadow:
    -12px 12px 35px rgba(0, 0, 0, 0.45),
    inset 0 0 20px rgba(218, 180, 86, 0.04);

  transform: translateY(-50%);
  transition:
    transform 350ms ease,
    box-shadow 350ms ease;

  overflow: visible;
}


.promo-drawer.is-collapsed {
  transform:
    translateX(calc(100% - var(--drawer-tab-width)))
    translateY(-50%);

  box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.35);
}


.promo-drawer__toggle {
  position: absolute;
  top: 50%;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--drawer-tab-width);
  height: 86px;
  padding: 0;

  color: #111;
  background: #d9b456;
  border: 0;
  border-radius: 12px 0 0 12px;

  font: inherit;
  cursor: pointer;

  transform: translate(-100%, -50%);
  box-shadow: -6px 5px 18px rgba(0, 0, 0, 0.3);

  transition:
    background-color 180ms ease,
    width 250ms ease;
}


.promo-drawer__toggle:hover,
.promo-drawer__toggle:focus-visible {
  background: #efd47f;
}


.promo-drawer__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}


.promo-drawer__arrow {
  display: block;

  font-family: Arial, sans-serif;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;

  transition: transform 350ms ease;
}


.promo-drawer.is-collapsed .promo-drawer__arrow {
  transform: rotate(180deg);
}


.promo-drawer__content {
  width: 100%;
  padding: 24px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.promo-drawer__header {
  padding-bottom: 17px;
  margin-bottom: 17px;

  border-bottom: 1px solid rgba(218, 180, 86, 0.25);
}


.promo-drawer__eyebrow {
  display: block;
  margin-bottom: 5px;

  color: #d9b456;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.promo-drawer__header h2 {
  margin: 0;

  color: #f5e4ae;

  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.2;
}


.promo-offer {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 14px;

  padding: 17px 0;
}


.promo-offer + .promo-offer {
  border-top: 1px solid rgba(218, 180, 86, 0.18);
}


.promo-offer__badge {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 63px;
  padding: 8px;

  color: #16130b;
  background: #d9b456;
  border-radius: 50%;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;

  aspect-ratio: 1;
}


.promo-offer__body h3 {
  margin: 0 0 7px;

  color: #f5e4ae;

  font-size: 17px;
  font-weight: 600;
}


.promo-offer__body p {
  margin: 0 0 8px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 14px;
  line-height: 1.45;
}


.promo-offer__condition {
  display: block;

  color: rgba(227, 198, 117, 0.78);

  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
}


.promo-drawer__mobile-label {
  display: none;
}


// Le tiroir ne doit pas apparaître hors de Disponibilites 

body:not(.show-promo-drawer) .promo-drawer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


@media (max-width: 700px) {
  .promo-drawer {
    --drawer-width: calc(100vw - 46px);
    --drawer-tab-width: 42px;

    top: auto;
    right: 0;
    bottom: max(18px, env(safe-area-inset-bottom));

    max-height: min(75dvh, 580px);

    border-radius: 14px 0 0 14px;

    transform: none;
  }

  .promo-drawer.is-collapsed {
    transform: translateX(calc(100% - var(--drawer-tab-width)));
  }

  .promo-drawer__toggle {
    height: 100px;
  }

  .promo-drawer__content {
    padding: 18px 15px;
  }

  .promo-offer {
    grid-template-columns: 61px 1fr;
    gap: 11px;
  }

  .promo-offer__badge {
    min-height: 54px;
    font-size: 13px;
  }
}


/*
.promo-drawer {
  --promo-height: min(330px, 65dvh);
  --promo-tab-height: 48px;

  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 12000;

  width: min(900px, calc(100vw - 30px));
  height: var(--promo-height);

  color: #f1dfaa;
  background: rgba(12, 12, 10, 0.97);

  border: 1px solid rgba(217, 180, 86, 0.85);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;

  box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.45);

  transform:
    translateX(-50%)
    translateY(calc(100% - var(--promo-tab-height)));

  transition:
    transform 350ms ease,
    opacity 250ms ease,
    visibility 250ms ease;
}

// Ouvert 

.promo-drawer.is-open {
  transform:
    translateX(-50%)
    translateY(0);
}

// Onglet

.promo-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  height: var(--promo-tab-height);
  padding: 0 20px;

  color: #17130a;
  background: #d9b456;

  border: 0;
  border-radius: 17px 17px 0 0;

  font: inherit;
  font-size: 15px;
  font-weight: 700;

  cursor: pointer;
}

.promo-drawer__toggle:hover,
.promo-drawer__toggle:focus-visible {
  background: #efd47f;
}

.promo-drawer__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.promo-drawer__arrow {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;

  transition: transform 350ms ease;
}

.promo-drawer.is-open .promo-drawer__arrow {
  transform: rotate(180deg);
}

// Contenu 

.promo-drawer__content {
  height: calc(100% - var(--promo-tab-height));
  padding: 22px;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.promo-offer {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  align-items: center;

  padding: 18px 0;
}

.promo-offer + .promo-offer {
  border-top: 1px solid rgba(217, 180, 86, 0.22);
}

.promo-offer strong {
  display: grid;
  place-items: center;

  min-height: 72px;
  padding: 10px;

  color: #17130a;
  background: #d9b456;
  border-radius: 50%;

  text-align: center;
  line-height: 1.1;

  aspect-ratio: 1;
}

.promo-offer h3 {
  margin: 0 0 7px;

  color: #f4e5b8;
  font-size: 18px;
}

.promo-offer p {
  margin: 0;

  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.45;
}

// Caché hors du panneau Disponibilites 

body:not(.show-promo-drawer) .promo-drawer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 700px) {
  .promo-drawer {
    --promo-height: min(420px, 72dvh);
    --promo-tab-height: 46px;

    width: calc(100vw - 14px);
  }

  .promo-drawer__content {
    padding: 14px;
  }

  .promo-offer {
    grid-template-columns: 65px 1fr;
    gap: 12px;
  }

  .promo-offer strong {
    min-height: 58px;
    font-size: 13px;
  }

  .promo-offer h3 {
    font-size: 16px;
  }

  .promo-offer p {
    font-size: 13px;
  }
}
*/


.reviews-link{
    font-size:0.85rem;
    opacity:.8;
    text-align:center;
    margin-top:0.5rem;
    color: goldenrod;
}


.reviews-link a{
    color:inherit;
    text-decoration:underline;
}


#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: 14px ;
    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;
    }
}


.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;
}


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


.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;
}


.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: pointer;
    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: #4e1a1a;
    border-width: 2px;
    border-style: inset;
    border-color: light-dark(#FFC107, #FF9800);
    border-image: initial;
    padding: 10px;
    padding-top:0 ;
    position: absolute;
    left: 50%;transform: translateX(-50%);
    border-radius: 5px;
}


#childages {
    display: flex;
    flex-direction: column  ;
    margin-bottom: 10px ;
    align-items: center ;
}


.child-age {
    display: flex ;
    margin-left: 10px ;
}


.child-age h3 {
    width: 115px ;
    margin-block: 0 ;
}


.child-agev {
    position: relative;
    height: 20px ;
}


#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;
    cursor: pointer ;
    pointer-events: none ;
    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 ;
    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;
    cursor: default ;
    @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 {
	max-width: 94%;
	left:2%;
	top:20% ;
	/*	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 select:has(option:checked:disabled),
#selchildren select:has(option:checked:disabled),
#seladults option:disabled,
#selchildren option:disabled {
  color: #aaa;
}


#seladults option,
#selchildren option {
    color: darkorange ;
    font-weight: bolder ;
}


#seladults,
#selchildren {
    display: block;
    margin: 0 auto;
    padding: 5px ;
    min-width: 26px;
    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;
    }
    @media (max-height: 668px){
	margin-top: 0.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:40px;
    cursor: pointer;
    @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 ;
    }
    
}


#di_instruction {
    position: relative;
    margin-top: 30px;
    left: 50px ;
    max-width: 90vw ;
    top: 15%;
    color: goldenrod;
    font-size: 12px;


}


@media (max-width: 600px) {
    #di_instruction {
	margin-top: 10%;
	left: unset ;
	top: 0;
    }
}


@media (max-height: 668px){
    #di_instruction {
	font-size: 10px;
    }
}


#booking-params {
    display:flex;
    flex-direction: column;
    position:relative;
/*    margin-top: 60px;*/
    left: 50px;
    top: 18% ;
    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: 1vh;
	left: unset ;
	top: 0;
    }
}


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


#dropdown-content {
  z-index: 10001;
  pointer-events: auto;
}


#dropdown-content.active {
  display: block;
  pointer-events: auto;
}


#dropdown-content li {
  pointer-events: auto;
  cursor: pointer;
}


.dropdown {
    left: 10px;
    top: 10px ;
    position: fixed;
    z-index: 10001;
}


.dropdown button {
    background-color: transparent;
/*  min-width: 130px;*/
  width: max-content;
  height: 40px;
  border-radius: 5px;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  justify-content: space-evenly;
}


.dropdown button img {
  margin: 0 5px 0 0;
}


.dropdown button img,
.dropdown-content li img {
  width: 28px;
}


.dropdown button,
.dropdown-content li {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}


.arrow-down {
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: middle;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: #fff transparent transparent transparent;
  margin: 0 0 0 5px;
}


.dropdown button:hover {
    cursor: pointer;
    background-color: rgba(120,120,120,0.5) ;
}


/* Style for the dropdown content */


.dropdown-content {
  display: none;
  position: absolute;
  margin: 1px 0 0 0;
  padding: 0;
  background-color:rgba(120,120,120,0.5) ;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/*  z-index: 1;*/
  border-radius: 5px;
  overflow-y: scroll;
  max-height: 315px;
}


/* Style for the dropdown content items */


.dropdown-content li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  justify-content: end;
}


.dropdown-content li img {
  margin: 0 20px 0px 20px;
}


/* Style for the dropdown content items on hover */


.dropdown-content li:hover {
  background-color: #f1f1f1;
  cursor: pointer;
  color: blue;
  border-radius: 5px;
}


/* Show the dropdown content when the dropdown button is clicked */


/*.dropdown:focus-within .dropdown-content,*/


.dropdown-content.active {
  display: block;
}


/* Animate the dropdown content */


@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.dropdown-content {
  animation: slideIn 0.3s ease-out;
}


/* Scrollbar styles */


::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}


::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #c2c9d2;
}


.availability-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #00a86b, #007a50);
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 12px 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 4;
}


.availability-banner.show {
/*    
  opacity: 1;
*/
    opacity: 0;
  transform: translateY(0);
}


.banner-btn {
  background: white;
  color: #00a86b;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}


/*
 * Rêve Et Alizé — Réservation
 *
 * Point d'entrée CSS à partir de la v265.
 *
 * IMPORTANT :
 * - reserver-v265-legacy.css contient désormais le legacy hors cards lodges.
 * - toutes les nouvelles corrections doivent aller dans reserver-overrides.css.
 * - les règles seront progressivement migrées du legacy vers des modules propres.
 *
 * L'ordre des imports est volontaire : le fichier overrides doit rester en dernier
 * pour conserver exactement le principe de cascade utilisé par la v265.
 */


/* Module de réservation Rêve Et Alizé */


#Reservez {
  --booking-gold: #d7b15a;
  --booking-gold-soft: rgba(215, 177, 90, 0.18);
  --booking-ink: #f7f1e7;
  --booking-muted: #b9b2a7;
  --booking-panel: rgba(15, 18, 16, 0.94);
  --booking-line: rgba(215, 177, 90, 0.22);
  --booking-green: #2f7d55;
  --booking-orange: #8d6732;
  --booking-red: #653737;
  --booking-header-space: 0px;
  --booking-footer-space: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 44px);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--booking-ink);
  background: linear-gradient(145deg, #090b0a, #111612 55%, #080908);
}


#Reservez,
#Reservez *,
#Reservez *::before,
#Reservez *::after { box-sizing: border-box; }


/*
#Reservez button,
#Reservez select { color: inherit; font: inherit; }
*/


#Reservez h2,
#Reservez h3,
#Reservez p { margin-top: 0; }


.booking-calendar__reset {
  border: 0;
  color: var(--booking-gold);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}


@media (max-width: 760px) {
  #Reservez { padding: 12px; }
  /*1
@media (max-width: 760px) {
      .booking-heading,
  .booking-calendar__header { display: grid; }

}
*/  
  
}


@media (max-width: 760px) {
  #Reservez {
    padding-inline: 10px;
  }

}


.booking-day.is-preview-range,
.booking-day.is-preview-range:disabled,
.booking-day.is-outside-month:is(.is-selected, .is-range, .is-preview-range),
.booking-day.is-outside-month:is(.is-selected, .is-range, .is-preview-range):disabled {
  opacity: 1 !important;
  filter: none !important;
  color: var(--booking-ink) !important;
  border-color: var(--booking-gold) !important;
  background: var(--booking-gold-soft) !important;
}


.booking-day.is-outside-month:is(.is-selected, .is-range, .is-preview-range) > *,
.booking-day.is-outside-month:is(.is-selected, .is-range, .is-preview-range):disabled > *,
.booking-day.is-outside-month:is(.is-selected, .is-range, .is-preview-range)
  .booking-day__availability i {
  opacity: 1 !important;
  filter: none !important;
  color: inherit !important;
}


html.booking-modal-open,
html.booking-modal-open body {
  overflow: hidden;
}


/* Compteurs voyageurs adaptatifs aux capacités de location.json */


/* Blocage de saisie sans modification de l'apparence de disponibilité. */


.booking-reset-modal[hidden] { display: none; }


.booking-reset-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}


.booking-reset-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}


.booking-reset-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 26px;
  border: 1px solid rgba(218, 165, 32, 0.42);
  border-radius: 14px;
  color: #f5f0e2;
  background: rgba(10, 17, 13, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
}


.booking-reset-modal__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  place-items: center;
  border: 1px solid rgba(218, 165, 32, 0.6);
  border-radius: 50%;
  color: goldenrod;
  font-size: 24px;
  font-weight: 700;
}


.booking-reset-modal__dialog h3 {
  margin: 0 0 10px;
  color: goldenrod;
  font-size: 20px;
}


.booking-reset-modal__dialog p {
  margin: 0;
  color: rgba(245, 240, 226, 0.86);
  line-height: 1.5;
}


.booking-reset-modal__confirm {
  min-width: 150px;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid rgba(218, 165, 32, 0.5);
  border-radius: 8px;
  color: #17130a;
  background: goldenrod;
  font-weight: 700;
  cursor: pointer;
}


/* ==========================================================
   v140 — Compression verticale desktop d'environ 50 px
   Réduction portée par le calendrier, sans scale/transform
   sur l'interface et sans modification de la logique JS.
   ========================================================== */


/* ==========================================================
   v146 — Dimensions fixes en 2 colonnes, bascule directe
   en colonne dès que l'ensemble ne tient plus dans la vue.
   Base stricte : v140.
   ========================================================== */


/* Référence desktop v140 à pleine largeur :
   938 px panneau réservation + 18 px gap + 484 px panneau lodges
   = 1440 px. Aucun des deux panneaux ne se compresse. */


/* Dès que 1440 px + les marges de la section ne tiennent plus,
   on ne réduit rien : passage immédiat en une seule colonne. */


/* ==========================================================
   v152 — Sélection des lodges dans le panneau des cards
   ========================================================== */


/* ==========================================================
   v153 — États verts : minimum de séjour / départ uniquement
   ========================================================== */


/* ==========================================================
   v165 — Filtre lodge toujours visible
   ========================================================== */


/* ==========================================================
   v168 — Interface plein écran responsive sans scroll de page
   Desktop/tablette : 2 panneaux fluides.
   Mobile : calendrier plein écran + lodges en panneau superposé.
   ========================================================== */


@media (min-width: 761px) {
  #Reservez {
    height: 100dvh;
    min-height: 0;
    padding:
      calc(var(--booking-header-space) + clamp(8px, 1.2vh, 16px))
      clamp(10px, 1.4vw, 22px)
      calc(var(--booking-footer-space) + clamp(8px, 1.2vh, 16px));
    overflow: hidden;
  }


  

  
}


/* Tablette et petit laptop : on conserve les deux colonnes au lieu d'empiler. */


/*1
@media (min-width: 761px) and (max-width: 1100px) {

  .booking-heading p,
  .booking-heading__eyebrow {
    display: none;
  }
}
*/


/* Écrans bas : on gagne de la hauteur sans changer le fonctionnement. */


/*1
@media (min-width: 761px) and (max-height: 760px) {
  .booking-heading p,
  .booking-heading__eyebrow,
  .booking-calendar__eyebrow {
    display: none;
  }

  .booking-heading h2,
  .booking-calendar__header h3 {
    margin: 0;
  }
  
  
}
*/


/* Mobile : aucune accumulation verticale. Les lodges deviennent un overlay. */


@media (max-width: 760px) {

  #Reservez {
    height: 100dvh;
    min-height: 0;
    padding:
      calc(var(--booking-header-space) + 6px)
      6px
      calc(var(--booking-footer-space) + 6px) !important;
    overflow: hidden;
  }

  

  
  
  
  
  

}


/* ==========================================================
   v170 — Correctif MOBILE basé strictement sur la v168
   - aucun changement desktop/tablette > 760px
   - calendrier moins envahissant
   - bouton lodges toujours visible
   - panneau lodges en overlay FIXED, donc indépendant du layout
   ========================================================== */


@media (max-width: 760px) {
  #Reservez {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  /* En mobile le calendrier ne doit plus absorber tout l'espace restant. */

  

  /* Le bouton reste toujours dans la zone visible, juste sous le calendrier/promo. */

  /*
     IMPORTANT : fixed au lieu de absolute.
     Ainsi le panneau n'est plus dépendant de la hauteur/overflow de
     .booking-layout ou .booking-main et apparaît toujours au téléphone.
  */
}


/* ==========================================================
   v171 — Mobile : lodges visibles directement sous calendrier
   Base v168/v170. Desktop >= 761px inchangé.
   Ordre mobile : critères -> calendrier -> lodges -> offre.
   ========================================================== */


@media (max-width: 760px) {

  #Reservez {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 6px !important;
  }

  /* Le conteneur principal devient la grille verticale de tout l'écran. */

  /* Permet de réordonner les enfants de booking-main avec booking-results. */

  /* Dimensions du calendrier conservées de la v170. */

  /* Plus aucun bouton / overlay pour afficher les lodges. */

  /* Les lodges sont toujours visibles, directement sous le calendrier. */

  /* Le résumé prend trop de hauteur sur mobile : son information est déjà visible dans les dates. */

  /* L'offre est toujours la dernière ligne, tout en bas de l'écran. */
  

  
}


/* Téléphones peu hauts : on garde la taille de calendrier validée par v170. */


@media (max-width: 760px) and (max-height: 590px) {

  /* Contrairement à v170, l'offre reste visible tout en bas. */
  

  

  
}


/* ==========================================================
   v173 — Calendrier plein : libre vert / occupé rouge
   ========================================================== */


#Reservez {
  --booking-calendar-free: #315f46;
  --booking-calendar-free-hover: #386b50;
  --booking-calendar-busy: #6a3b3b;
  --booking-calendar-busy-hover: #734242;
}


/* La cellule entière indique désormais l'état. */


/* Transition libre -> occupé. */


/* Transition occupé -> libre. */


/* Les anciennes jauges/barres ne sont plus nécessaires visuellement. */


/* On conserve l'information textuelle courte seulement si elle existe déjà,
   mais elle reste discrète ; les tooltips gardent le détail complet. */


/* Les jours libres non cliquables comme arrivée restent verts :
   l'impossibilité d'action est expliquée par le tooltip. */


/* Évite le grisage qui masquait complètement le code couleur. */


/* La sélection reste prioritaire et lisible par-dessus le code couleur. */


/* ==========================================================
   v174 — transitions ICS exactes + lisibilité demandée
   ========================================================== */


#Reservez {
  --booking-calendar-free: #1f4432;
  --booking-calendar-free-hover: #28523d;
  --booking-calendar-busy: #4b2929;
  --booking-calendar-busy-hover: #583030;
}


/* Une arrivée impossible ne change pas l'état libre de la nuit :
   seul le numéro devient sombre. */


/* Les jours passés ont exactement le même retrait visuel que les jours
   affichés hors du mois courant. */


/* Les diagonales doivent rester visibles même si la cellule est techniquement
   classée open/full par l'agrégation des lodges. */


/* Conserve les tooltips au-dessus de toutes les cellules et évite qu'un parent
   du calendrier ne les coupe visuellement. */


/* ==========================================================
   v175 — passé rouge + transitions unanimité des lodges filtrées
   ========================================================== */


/* Un jour passé est toujours rouge sombre, quelle qu'ait été sa disponibilité.
   Il garde la même atténuation que les jours hors mois. */


/* Aucun texte d'action ne doit apparaître sur les jours passés. */


/* ==========================================================
   v178 — départ uniquement : pas de curseur sens interdit
   ========================================================== */


/* ==========================================================
   v182b — Ajustements UI MOBILE uniquement, base stricte v181
   Aucun impact desktop/tablette > 760px.
   ========================================================== */


@media (max-width: 760px) {
  /* Le fallback image occupe exactement la même ligne que le bandeau promo. */
  

  /* Navigation du mois : largeur stable et flèches ancrées.
     Le libellé conserve toujours la même largeur, quel que soit le mois. */

  /* Cartes : mêmes colonnes sur les 6 lodges. */

  /* Prix contenus dans leur colonne : réduction à gauche du prix,
     textes secondaires tronqués proprement au lieu de sortir de la carte. */
}


/* ==========================================================
   v183 — Ajustements MOBILE uniquement
   - statuts 40px plus à gauche
   - sélecteurs 20px plus à gauche
   - texte "n nuits remisées" contenu dans la carte
   - zone mois élargie, flèches fixes
   ========================================================== */


@media (max-width: 760px) {
  /* Le nom du mois garde une zone centrale plus large ; les flèches restent
     strictement ancrées aux deux extrémités de cette zone. */

  /* Décalages demandés, sans modifier la grille de la carte ni le desktop. */

  /* La ligne du nombre de nuits remisées reste dans la colonne prix.
     Elle peut passer sur deux lignes sur les écrans étroits. */
}


/* ==========================================================
   v184 — Ajustements MOBILE uniquement
   - badge promotion davantage à gauche
   - prix barré conservé avec un prix final à 4 chiffres
   - "n nuits remisées" sur une seule ligne
   ========================================================== */


@media (max-width: 760px) {
  /* On gagne 14px pour la zone tarif sans changer la largeur de la carte. */

  /* Le sigle de réduction déborde volontairement vers la gauche,
     sans prendre de place supplémentaire au prix. */

  /* Réserve réellement la place des deux prix sur la même ligne. */
}


/* ==========================================================
   v185 — Ajustements MOBILE uniquement
   - "n nuits remisées" ~2 caractères vers la gauche
   - bloc navigation mois (flèches + libellé) 10px vers la gauche
   ========================================================== */


/* ==========================================================
   v190 — MOBILE uniquement
   Correction des surimpressions avec le vrai header/menu du site.
   - aucun champ de réservation en position fixed
   - espace réservé sous le header
   - Arrivée / Départ sur la première ligne
   - Adultes / Enfants sur la deuxième ligne
   - aucun changement desktop
   ========================================================== */


@media (max-width: 760px) {
  /* Réserve une vraie zone sous le header fixe du site. */
  #Reservez {
    box-sizing: border-box !important;
    padding-top: 46px !important;
  }

  /* On annule toute tentative de positionnement fixe des champs. */

  /*
   * Grille mobile claire :
   * ligne 1 = Arrivée | Départ
   * ligne 2 = Adultes | Enfants
   */

  /* Les champs date retrouvent leur aspect de carte de la v185. */
}


/* Ecrans très étroits : même structure, juste un peu plus compacte. */


@media (max-width: 380px) {
  #Reservez {
    padding-top: 44px !important;
  }
}


/* ==========================================================
   v193 — MOBILE uniquement
   2 lodges par ligne pour améliorer la lisibilité.
   Base : v190. Aucun changement desktop.
   ========================================================== */


/* ==========================================================
   v195 — MOBILE uniquement
   2 cartes par ligne, sans chevauchement.
   Photo fixe + contenu entièrement contenu dans sa propre carte.
   ========================================================== */


@media (max-width: 760px) {

  /* Photo : dimensions fixes, jamais étirée par la hauteur de la carte. */

  /* Tout le texte haut/milieu reste strictement dans la colonne de droite. */

  /* Bloc prix séparé en bas : il ne peut plus passer dans la carte voisine. */
}


/* ==========================================================
   v196 — MOBILE uniquement
   Correction du flux vertical des cartes en grille 2 colonnes.
   La ligne suivante commence au bottom réel de la carte la plus haute,
   jamais au bottom de la photo.
   ========================================================== */


@media (max-width: 760px) {

  /*
   * Tous les enfants restent dans le flux de LA carte.
   * On neutralise les anciens positionnements absolus éventuels
   * sauf la coche, volontairement ancrée dans son heading.
   */

  /*
   * Répartition interne fixe :
   * photo + textes en haut,
   * zone raison au milieu,
   * tarif ancré dans la dernière ligne de la grille interne.
   */
}


/* ==========================================================
   v197 — MOBILE uniquement
   6 lodges = 2 colonnes x 3 rangées FIXES.
   La hauteur disponible de .booking-lodges est divisée exactement par 3.
   Chaque carte remplit sa rangée ; aucune rangée ne dépend de la photo.
   ========================================================== */


@media (max-width: 760px) {

  /*
   * Affectation explicite :
   * 1-2 = rangée 1
   * 3-4 = rangée 2
   * 5-6 = rangée 3
   */

  /*
   * La carte prend 100 % de SA rangée.
   * On supprime les anciennes hauteurs fixes (150/154 px)
   * qui empêchaient la grille de calculer correctement les 3 niveaux.
   */

  /*
   * Structure interne : la photo garde sa taille fixe.
   * Le contenu texte utilise le reste de la hauteur de la carte.
   */
}


/* Très petits écrans : même logique 3 rangées, photo légèrement réduite seulement
   pour préserver la place du texte sans modifier la hauteur des rangées. */


/* ==========================================================
   v198 — MOBILE uniquement
   Taxe de séjour sur la même ligne que "Choisissez votre lodge".
   Les 3 rangées de cartes conservent toute la hauteur restante.
   ========================================================== */


/* Même disposition sur les mobiles peu hauts :
   la taxe reste visible à côté du titre au lieu d'être supprimée. */


/* ==========================================================
   v209 — MOBILE uniquement
   Les 2 vrais booking-field--date restent dans le DOM d'origine,
   mais sont déplacés visuellement entre langue et burger.
   Base stricte : v198.
   ========================================================== */


@media (max-width: 760px) {
  /*
   * On réserve volontairement une zone de sécurité de chaque côté :
   * gauche = sélecteur de langue
   * droite = burger
   */

  /*
   * Les deux dates étant retirées visuellement du flux,
   * Adultes / Enfants occupent seuls la grille du formulaire.
   */
}


/* Très petits écrans : marges de sécurité légèrement réduites,
   sans jamais passer sous langue ou burger. */


/* ==========================================================
   v212 — indication discrète du filtre calendrier
   Aucun impact sur la hauteur des cartes.
   ========================================================== */


/* Sur mobile, le libellé reste très discret et n'occupe aucune place dans la grille. */


/* Sur écrans très étroits, on garde uniquement la coche pour éviter toute collision. */


/* v213 — "Afficher" uniquement pour les lodges non sélectionnés */


/* ==========================================================
   v214 — "Afficher" reste visuellement actif même si la lodge
   est masquée du calendrier.
   ========================================================== */


/* Si l'opacité est appliquée à toute la carte, on la compense sur le libellé. */


/* ==========================================================
   v215 — correction réelle du masque.
   Ne jamais atténuer le parent entier : sinon ses enfants restent
   forcément ombragés. On atténue le contenu, sauf le toggle/Afficher.
   ========================================================== */


/* Reproduit visuellement le masque uniquement sur le contenu de la carte. */


/* Le contrôle calendrier reste totalement hors du masque. */


/* ==========================================================
   v216 — DESKTOP uniquement
   Statut au-dessus du nom de la lodge.
   Mobile inchangé.
   ========================================================== */


/* ==========================================================
   v217 — DESKTOP uniquement
   Check calendrier figé, indépendant du statut/nom.
   Libellé : Sélectionner / Désélectionner.
   ========================================================== */


/* ==========================================================
   v218 — DESKTOP uniquement
   Check ancré à la CARTE, jamais au heading.
   Même position quelle que soit la hauteur/longueur du statut.
   ========================================================== */


@media (min-width: 761px) {

  /* Le heading ne doit plus servir de containing block au toggle. */

  /* Neutralise tous les anciens déplacements conditionnels. */
}


/* ==========================================================
   v219 — DESKTOP uniquement
   Check = enfant direct de la carte, figé en haut à droite.
   Badge promo = à gauche du prix barré sur la même ligne.
   ========================================================== */


/* ==========================================================
   v220 — DESKTOP uniquement
   - pavé prix 10px vers la gauche
   - Sélectionner/Désélectionner remonté de 5px
   - réduction seule, sans nombre de nuits remisées
   ========================================================== */


/* ==========================================================
   v237 — Tout sélectionner
   Visible uniquement si au moins une lodge est désélectionnée.
   ========================================================== */


.booking-selection-reset-modal[hidden] { display:none !important; }


.booking-selection-reset-modal {
  position:fixed;
  inset:0;
  z-index:2147483300;
}


.booking-selection-reset-modal__backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.58);
}


.booking-selection-reset-modal__dialog {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 28px));
  padding:18px;
  border:1px solid rgba(215,177,90,.28);
  border-radius:14px;
  background:rgba(13,18,15,.985);
  color:var(--booking-ink);
  box-shadow:0 24px 70px rgba(0,0,0,.58);
}


.booking-selection-reset-modal__close {
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.75);
  font-size:20px;
}


.booking-selection-reset-modal__eyebrow {
  display:block;
  margin-bottom:5px;
  color:var(--booking-gold);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}


.booking-selection-reset-modal__dialog h3 {
  margin:0 28px 8px 0;
  font-size:18px;
}


.booking-selection-reset-modal__dialog p {
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:rgba(245,240,226,.84);
}


.booking-selection-reset-modal__confirm {
  width:100%;
  min-height:36px;
  margin-top:14px;
  border:1px solid rgba(215,177,90,.38);
  border-radius:9px;
  background:rgba(215,177,90,.11);
  color:var(--booking-gold);
  font-weight:700;
}


/* v249 — Réassurance Eviivo + assurance Chapka */


/* ==========================================================
   v253 — Desktop : promo et image/assurance même hauteur
   + alternance automatique toutes les 10 secondes.
   ========================================================== */


/* ==========================================================
   v254 — Slot fixe promo / assurance
   Aucun changement de flux pendant l'alternance.
   ========================================================== */


/* Mobile : conserver le comportement précédent, sans imposer le slot fixe. */


/* ==========================================================
   v255 — Alternance promo / assurance aussi sur mobile
   ========================================================== */


/* Rêve Et Alizé — layout global réservation */


.booking-layout {
    width: min(1440px, 94%);
    height:100% ;
  margin: auto;
  display: grid;
  /*  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);*/
  grid-template-columns: clamp(100px, 40vw, 700px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}


.booking-main,
.booking-results {
    min-width: 0;
    /*
  max-width: 100%;
   */
    width: 100%;
}


.booking-main {
  padding: clamp(18px, 2.7vw, 34px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--booking-line);
  border-radius: 24px;
  background: var(--booking-panel);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}


/*
@media (min-width: 1529px) {
  .booking-layout {
    width: 1440px;
    max-width: none;
    grid-template-columns: 938px 484px;
    gap: 18px;
  }
}
*/


/*
@media (min-width: 761px) and (max-width: 1528px) {
  .booking-layout {
    width: min(1440px, 94%);
    max-width: 1440px;
  }
}
*/


@media (min-width: 761px) {
    /*
  .booking-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .78fr);
    gap: clamp(8px, 1vw, 16px);
    align-items: stretch;
  }
*/

  .booking-main {
    position: relative;
    width: auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: clamp(10px, 1.35vh, 20px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(6px, .75vh, 12px);
    border-radius: clamp(14px, 1.4vw, 22px);
  }

}


/*
@media (min-width: 761px) and (max-width: 1100px) {
  .booking-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(265px, .75fr);
  }

  .booking-main {
    padding: 10px;
  }
}
*/


/* ==========================================================================
   Mobile — architecture unique
   Le main est aplati pour que Search, Calendar, Results et Promo soient
   quatre items directs d'une seule grille explicite.
   ========================================================================== */


@media (max-width: 760px) {
  .booking-layout {
    width: 94%;
    height: 100%;
    min-height: 0;
    margin-left: 1%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "search"
      "calendar"
      "results"
      "promo";
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 4px;
    overflow: hidden;
  }

  .booking-main {
    display: contents;
  }

  .booking-heading,
  .booking-mobile-results-trigger {
    display: none !important;
  }

  .booking-search {
    grid-area: search;
  }

  .booking-calendar {
    grid-area: calendar;
  }

  .booking-results,
  .booking-results.is-mobile-open {
    grid-area: results;
  }

  .booking-promo-slot {
    grid-area: promo;
    align-self: end;
  }
}


/* Mobile — accès direct à une lodge via ?lodge=<nom>.
   Une seule grille pilote la répartition verticale : calendrier agrandi,
   puis panneau résultats occupant tout l'espace restant qui lui est réservé. */


@media (max-width: 760px) {
  #Reservez.is-single-lodge-mobile .booking-layout {
    grid-template-rows: auto minmax(0, 1.55fr) minmax(0, .65fr) auto;
  }
}


.booking-heading,
.booking-heading > *,
.booking-search,
.booking-fields,
.booking-field,
.booking-child-ages,
.booking-calendar,
.booking-calendar__header,
.booking-calendar__header > *,
.booking-calendar__actions,
.booking-calendar__footer {
    min-width: 0;
    max-width: 100%;
}


.booking-heading {
    min-height: 0;
    gap: 12px;
}


.booking-heading h2 {
    /*
    margin-bottom: 3px;

    font-size: clamp(20px, 2.1vh, 30px);
    line-height: 1.05;
   */
    margin-bottom: 0;
    font-size: clamp(17px, 1.9vh, 23px);
}


.booking-heading p {
    /*
    font-size: clamp(10px, 1.25vh, 13px);
    line-height: 1.2;
    margin-bottom: 0;
   */
    margin: 5px 0 0 ;;
    font-size: 12px;
}


/*1*/


@media (max-width: 760px) {
      .booking-heading,
  .booking-calendar__header { display: grid; }

}


/* Tablette et petit laptop : on conserve les deux colonnes au lieu d'empiler. */


@media (min-width: 761px) and (max-width: 1100px) {

  .booking-heading__eyebrow {
    display: none;
  }
}


/* Écrans bas : on gagne de la hauteur sans changer le fonctionnement. */


@media (min-width: 761px) and (max-height: 760px) {
  .booking-heading__eyebrow,
  .booking-calendar__eyebrow {
    display: none;
  }

  .booking-heading h2,
  .booking-calendar__header h3 {
    margin: 0;
  }
  
  
}


.booking-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}


.booking-heading p { color: var(--booking-muted); }


.booking-heading__eyebrow,
.booking-calendar__eyebrow {
  display: block;
  color: var(--booking-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.booking-heading p,
.booking-calendar__footer p {
    overflow-wrap: anywhere;
}


.booking-calendar__navigation {
    display: flex;
    align-items: center;
    gap: 2px;
}


.booking-counter button,
.booking-calendar__navigation button {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    color: var(--booking-ink);
}


.booking-search { margin-top: 28px; left:72px;}


.booking-fields {
  display: grid;
  /*  grid-template-columns: repeat(2, minmax(170px, 1fr)) repeat(2, minmax(145px, 0.68fr));*/
  grid-template-columns: repeat(2, minmax(10px, 1fr)) repeat(2, minmax(10px, 0.68fr));
  gap: clamp(5px, .55vw, 9px);
}


.booking-field {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
/*  min-height: clamp(48px, 7vh, 62px) ;*/
  padding: clamp(6px, .8vh, 9px) clamp(8px, .7vw, 12px) ;
  border-radius: 11px;
}


.booking-field.is-active { border-color: var(--booking-gold); }


.booking-field > span {
  display: block;
  color: var(--booking-muted);
  text-transform: uppercase;
  margin-bottom: 5px ;
  font-size: 10px;
}


.booking-field strong {
    overflow-wrap: anywhere;
    color: var(--booking-ink);
}


.booking-field--counter {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.booking-field--counter > span { margin: 0; }


.booking-counter {
        display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px ;
}


.booking-counter output {
  min-width: 18px;
  text-align: center;
  font-weight: 800;
  font-size: 12px ;
}


/*
.booking-child-ages {
  height: 72px;
  margin-top: 10px;
  padding: 10px 15px;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(215, 177, 90, 0.15);
  border-radius: 15px;
  background: rgba(215, 177, 90, 0.07);
}
*/


.booking-child-ages {
  height: 44px;
  margin-top: 4px;
  padding: 0px 10px;
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(215, 177, 90, 0.15);
  border-radius: 15px;
  background: rgba(215, 177, 90, 0.07);
}


.booking-child-ages.is-empty > * { visibility: hidden; }


/*
.booking-child-ages__label span {
  display: block;
  margin-top: 3px;
  color: var(--booking-muted);
  font-size: 12px;
}
*/


.booking-child-ages__label span {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.05;
  color: var(--booking-muted);
}


@media (max-width: 900px) {
    .booking-child-ages {
	grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.5fr);
    }
    .booking-child-ages__label span {
	display: none;
    }
}


.booking-child-ages__fields {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  max-width: 100% ;
  margin-left: 2px ;
  justify-content: flex-end;
}


.booking-child-ages__label {
    line-height: 1.05;
}


.booking-child-ages__label strong {
    font-size: 12px;
}


.booking-child-ages__label,
.booking-child-ages__fields,
.booking-child-age {
  min-width: 0;
  max-width: 100%;
}


/*
.booking-child-age {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  color: var(--booking-muted);
  font-size: 11px;
  white-space: nowrap;
}
*/


.booking-child-age {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  color: var(--booking-muted);
  font-size: 9px;
  white-space: nowrap;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin-left: 2px;
}


/*
.booking-child-age select {
  height: 34px;
  min-width: 96px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #1d221f;
}
*/


.booking-child-age select {
  height: 25px;
  padding: 3px 24px 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  width: 71px ;
  font-size: 11px;
  color: wheat;
  background: #1d221f;
}


.booking-summary {
  height: 62px;
  margin: 16px 0;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1.35;
}


.booking-tax {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--booking-line);
  font-size: 10px;
  line-height: 1.2;
}


.booking-tax span,
.booking-tax small { display: block; }


.booking-tax strong {
  display: block;
  margin: 1px 0;
  color: var(--booking-gold);
  font-size: 11px;
  line-height: 1.15;
}


.booking-tax small {
  font-size: 9px;
  line-height: 1.1;
}


/*
@media (min-width: 1051px) {
*/


@media (min-width: 1051px) {
  .booking-search { margin-top: 16px; }


  /*
  .booking-child-ages {
    height: 40px;
    margin-top: 4px;
    padding: 4px 10px;
    grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.5fr);
    gap: 10px;
  }
 */
  /*
  .booking-child-ages__label {
    line-height: 1.05;
  }
*/
/*
  .booking-child-ages__label strong {
    font-size: 12px;
  }
*/
/*
  .booking-child-ages__label span {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.05;
  }
*/
  
  /*
  .booking-child-ages__fields {
    gap: 6px;
  }
 */
  /*
  .booking-child-age select {
    height: 28px;
    min-width: 82px;
    padding: 3px 24px 3px 8px;
    border-radius: 8px;
    font-size: 11px;
  }
*/
}


@media (max-width: 760px) {

  .booking-child-ages {
    height: 116px;
    padding: 10px 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    align-items: start;
    gap: 8px;
  }

  .booking-child-ages__label {
    min-width: 0;
    line-height: 1.2;
  }

  .booking-child-ages__label span {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .booking-child-ages__fields {
    width: 100%;
    max-width: 100%;
    padding-bottom: 2px;
    overscroll-behavior-inline: contain;
  }

  .booking-child-age select {
    min-width: 82px;
    max-width: 92px;
    padding-inline: 8px 22px;
  }


  .booking-field--counter {
    gap: 5px;
  }

  .booking-counter {
    flex: 0 1 auto;
    min-width: 0;
    gap: 4px;
  }

  .booking-counter button {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  } }


@media (max-width: 430px) {
  .booking-child-ages {
    height: 122px;
    padding-inline: 10px;
  }

  .booking-child-ages__label strong {
    font-size: 13px;
  }

  .booking-child-ages__label span {
    font-size: 10px;
  }

  .booking-child-age {
    font-size: 10px;
  }

  .booking-child-age select {
    height: 32px;
    min-width: 76px;
    max-width: 84px;
    font-size: 12px;
  }

}


@media (min-width: 1051px) {

  .booking-tax {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 4px;
    font-size: 9px;
    line-height: 1.05;
  }

  .booking-tax strong {
    margin: 0;
    font-size: 10px;
    line-height: 1.05;
  }

  .booking-tax small {
    font-size: 8px;
    line-height: 1;
  } }


.booking-counter button:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


@media (min-width: 761px) {

  .booking-search {
    margin-top: 0 !important;
  }




/*
  .booking-child-ages {
    height: clamp(32px, 5vh, 40px) !important;
    margin-top: 4px;
  }
*/
  .booking-summary {
    height: auto;
    min-height: 42px;
    max-height: 52px;
    margin: clamp(6px, .8vh, 10px) 0;
    padding: 7px 10px;
    font-size: 11px;
  }

  .booking-tax {
    margin-top: 5px !important;
    padding-top: 4px !important;
  } }


@media (min-width: 761px) and (max-height: 760px) {

  .booking-summary { min-height: 34px; max-height: 40px; margin: 4px 0; } }


@media (max-width: 760px) {

  .booking-heading {
    display: flex !important;
    align-items: center;
    gap: 7px;
  }

  .booking-heading__eyebrow,
  .booking-heading p {
    display: none;
  }

  .booking-heading h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1;
  }

  .booking-search {
      position: absolute;
      top:0;
      
      margin-top: 0;
      padding: 5px;
      grid-area: search;
  }

  .booking-fields {
      height:40px ;
      width:86vw ;
      display: flex ;
      gap:4px 6px ;
      display: flex;
  }

  .booking-field > span {
    font-size: 8px;
  }

  .booking-field strong { font-size: 11px; }
  .booking-counter button { width: 27px; height: 27px; flex-basis: 27px; }
  .booking-counter { gap: 3px; }

  .booking-child-ages,
  .booking-child-ages.is-empty {
    height: 28px !important;
    min-height: 28px;
    margin-top: 3px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
  }

  .booking-child-ages.is-empty { visibility: hidden; }
  .booking-child-ages__label { display: none; }
  .booking-child-ages__fields { height: 24px; gap: 4px; overflow-x: auto; }
  .booking-child-age { flex-direction: row; gap: 2px; font-size: 8px; }
  .booking-child-age select { height: 23px; min-width: 62px; max-width: 70px; padding: 2px 16px 2px 4px; font-size: 9px; }

  .booking-summary {
    height: auto;
    min-height: 36px;
    max-height: 44px;
    margin: 5px 0;
    padding: 5px 8px;
    font-size: 10px;
  }
  .booking-calendar__header h3 {
      display: none;
  }
  
  .booking-tax { margin-top: 4px; padding-top: 3px; } }


@media (max-width: 760px) and (max-height: 650px) {
  .booking-heading { display: none !important; }
  .booking-child-ages,
  .booking-child-ages.is-empty { height: 24px !important; min-height: 24px; }
  .booking-field { min-height: 38px; } }


@media (max-width: 760px) and (max-height: 700px) {
  .booking-heading {
    display: none !important;
  } }


@media (max-width: 760px) and (max-height: 590px) {

  .booking-child-ages,
  .booking-child-ages.is-empty {
    height: 22px !important;
    min-height: 22px !important;
  } }


@media (max-width: 760px) {

  .booking-heading {
    display: none !important;
  }



  .booking-tax {
    min-height: 15px !important;
    padding: 2px 2px 0 !important;
    line-height: 8px !important;
  } }


@media (max-width: 760px) and (max-height: 700px) {

  .booking-tax {
    display: none !important;
  } }


@media (max-width: 760px) {
  .booking-fields > .booking-field--counter {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .booking-fields > [data-date-field="arrival"] {
      grid-area: arrival ;
  }

  .booking-fields > [data-date-field="departure"] {
      grid-area: departure ;
  }

  .booking-fields > .booking-field--counter:nth-of-type(3) {
      grid-area: adults ;
  }

  .booking-fields > .booking-field--counter:nth-of-type(4) {
      grid-area: children ;
  }

  .booking-fields > [data-date-field="arrival"] > span,
  .booking-fields > [data-date-field="departure"] > span,
  .booking-fields > [data-date-field="arrival"] > strong,
  .booking-fields > [data-date-field="departure"] > strong {
      text-align: left !important;
  }


/* ==========================================================
   v210
 — MOBILE uniquement
   Résumé compact voyageurs + popover flottant.
   Desktop inchangé.
   ========================================================== */
.booking-travellers-summary,
.booking-travellers-popover {
  display: none;
}

@media (max-width: 760px) {
  /* On masque les contrôles voyageurs dans le flux principal. */

  .booking-travellers-summary {
      display: grid ;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;

      border: 1px solid rgba(255,255,255,.08) ;
      border-radius: 8px !important;
      background: rgba(255,255,255,.035) ;
      color: var(--booking-ink) ;
  }

  .booking-travellers-summary__icon {
      display: none;
  }

  .booking-travellers-summary__text {
    font-size: 10px;
    font-weight: 650;
  }

  .booking-travellers-summary__action {
    font-size: 9px !important;
    line-height: 1 !important;
    color: var(--booking-gold) !important;
    white-space: nowrap !important;
  }

  .booking-travellers-popover[hidden] {
    display: none !important;
  }

  .booking-travellers-popover:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483200 !important;
    display: block !important;
  }

  .booking-travellers-popover__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.52) !important;
  }

  .booking-travellers-popover__panel {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    max-height: min(76vh, 430px) !important;
    overflow: auto !important;
    padding: 12px !important;

    border: 1px solid rgba(215,177,90,.28) !important;
    border-radius: 14px !important;
    background: rgba(13,18,15,.985) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
  }

  .booking-travellers-popover__row {
    min-height: 48px !important;
  }

  .booking-travellers-popover__row .booking-field--counter {
    width: 100% !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    display: flex !important;
  }

  .booking-travellers-popover__ages {
    margin-top: 7px !important;
  }

  .booking-travellers-popover__ages .booking-child-ages {
    display: grid !important;
    height: auto !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  .booking-travellers-popover__done {
    width: 100% !important;
    min-height: 36px !important;
    margin-top: 10px !important;
    border: 1px solid rgba(215,177,90,.38) !important;
    border-radius: 9px !important;
    background: rgba(215,177,90,.11) !important;
    color: var(--booking-gold) !important;
    font-weight: 700 !important;
  }
}


  

}


@media (max-width: 380px) {

  .booking-fields {
    gap: 3px 5px !important;
  } }


@media (max-width: 760px) {

  .booking-tax {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: center !important;
    justify-self: end !important;

    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 4px !important;

    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 2px 2px 0 !important;
    border: 0 !important;

    font-size: 7px !important;
    line-height: 9px !important;
    white-space: nowrap !important;
  }

  .booking-tax span,
  .booking-tax strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .booking-tax span {
    font-size: 7px !important;
  }

  .booking-tax strong {
    font-size: 9px !important;
    line-height: 10px !important;
  }

  .booking-tax small {
    display: none !important;
  }

  .booking-summary {
    display: none !important;
  } }


@media (max-width: 760px) and (max-height: 700px) {
  .booking-tax {
    display: flex !important;
  } }


@media (max-width: 760px) {
  .booking-fields > [data-date-field="arrival"],
  .booking-fields > [data-date-field="departure"] {

    z-index: 5001;
    background: transparent;
  }

  .booking-fields > [data-date-field="arrival"] > span,
  .booking-fields > [data-date-field="departure"] > span {
    opacity: .72 ;
  }



  .booking-fields > [data-date-field].is-active > strong {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  .booking-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  } }


@media (max-width: 380px) {
  .booking-fields > [data-date-field="arrival"],
  .booking-fields > [data-date-field="departure"] {
    width: calc((100vw - 132px) / 2) !important;
  }

  .booking-fields > [data-date-field="arrival"] {
    left: 60px !important;
  }

  .booking-fields > [data-date-field="departure"] {
    right: 60px !important;
  }

  .booking-fields > [data-date-field="arrival"] > strong,
  .booking-fields > [data-date-field="departure"] > strong {
    font-size: 9px !important;
  } }


@media (max-width: 760px) {
  .booking-search > .booking-fields > .booking-field--counter,
  .booking-search > .booking-child-ages {
    display: none !important;
  } }


.booking-calendar {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.18);
}


.booking-calendar__header {
    display: flex;
    flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}


.booking-calendar__actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between ;
    width: 100%;
    gap: 12px;
}


.booking-calendar__navigation {
  display: flex;
  align-items: center;
}


.booking-calendar__navigation { gap: 10px; }


.booking-calendar__navigation strong {
  min-width: 145px;
  text-align: center;
  text-transform: capitalize;
}


.booking-calendar__days-wrapper {
    container-type: size;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    --gap: 2px;
    --weekday-height: 24px;
    --weekday-margin-top: 18px;
    --weekday-margin-bottom: 6px;

    --cell-size: min(
        calc((100cqw - 6 * var(--gap)) / 7),
        calc(
            (
                100cqh
                - var(--weekday-height)
                - var(--weekday-margin-top)
                - var(--weekday-margin-bottom)
                - 5 * var(--gap)
            ) / 6
        )
    );
}


.booking-calendar__weekdays {
    width: calc(7 * var(--cell-size) + 6 * var(--gap));
    height: var(--weekday-height);

    margin:
        var(--weekday-margin-top)
        auto
        var(--weekday-margin-bottom);

    display: grid;
    grid-template-columns: repeat(7, var(--cell-size));
    column-gap: var(--gap);

    align-items: center;

    color: var(--booking-muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    text-align: center;
}


.booking-calendar__weekdays > span {
    min-width: 0;
    text-align: center;
}


.booking-calendar__grid {
    width: calc(7 * var(--cell-size) + 6 * var(--gap));
    height: calc(6 * var(--cell-size) + 5 * var(--gap));

    margin-inline: auto;

    display: grid;
    grid-template-columns: repeat(7, var(--cell-size));
    grid-template-rows: repeat(6, var(--cell-size));
    gap: var(--gap);

    align-content: start;
    justify-content: start;

    min-width: 0;
    min-height: 0;
    overflow: visible;
}


.booking-day {
    position: relative;

    box-sizing: border-box;
    width: var(--cell-size);
    height: var(--cell-size);
    min-width: 0;
    min-height: 0;

    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}


.booking-day.is-outside-month {
    color: rgba(245, 240, 226, 0.26);
    background: rgba(255, 255, 255, 0.008);
    border-color: rgba(255, 255, 255, 0.025);
}


.booking-day.is-outside-month:not(.is-selected):not(.is-range) {
    opacity: 0.26;
}


.booking-day.is-empty-calendar-cell {
    visibility: hidden;
    pointer-events: none;
}


.booking-day.is-selected,
.booking-day.is-range {
    background: var(--booking-gold-soft);
}


.booking-day__availability {
  position: absolute;
  right: 9px;
  left: 9px;
  display: block;
}


.booking-day__availability i,
.booking-calendar__legend i {
  border-radius: 99px;
  background: var(--booking-green);
}


.booking-day__availability i { display: block; width: 100%; height: 3px; }


.booking-calendar__legend i { width: 14px; height: 4px; }


.booking-day.is-low i,
.booking-calendar__legend i.is-low { background: var(--booking-green); }


.booking-day.is-full i,
.booking-calendar__legend i.is-full { background: var(--booking-red); }


.booking-calendar__footer {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}


.booking-calendar__footer p {
    height: 30px;
  margin: 0;
  color: var(--booking-gold);
  font-size: 13px;
}


.booking-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--booking-muted);
  font-size: 11px;
}


.booking-calendar__legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}


.booking-calendar__reset {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(215, 177, 90, 0.32);
  border-radius: 10px;
  background: rgba(215, 177, 90, 0.07);
}


.booking-calendar__reset:hover {
  background: rgba(215, 177, 90, 0.14);
}


@media (min-width: 1051px) {
  .booking-calendar { margin-top: 12px; padding: 14px; }
  .booking-day { padding: 7px; }
  .booking-calendar__footer { margin-top: 10px; }
}


.booking-day:disabled:not(.is-selected):not(.is-range):not(.is-preview-range) {
  opacity: 0.3;
  filter: grayscale(0.75);
  cursor: not-allowed;
}


.booking-day.is-explained-disabled {
  cursor: not-allowed;
}


.booking-day[data-disabled-reason]::after {
  content: attr(data-disabled-reason);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid rgba(218, 165, 32, 0.28);
  border-radius: 7px;
  color: #f5f0e2;
  background: rgba(8, 12, 10, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, 3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}


.booking-day[data-disabled-reason]:hover::after,
.booking-day[data-disabled-reason]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


.booking-day.is-unavailable-date:not(.is-selected):not(.is-range):not(.is-preview-range) {
  color: rgba(245, 240, 226, 0.34);
  cursor: not-allowed;
}


.booking-day.is-unavailable-date:not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__number {
  color: inherit;
  opacity: 0.72;
}


.booking-day.is-unavailable-date:not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__availability {
  opacity: 0.28;
  filter: grayscale(1);
}


.booking-day__action-blocked {
  position: absolute;
  right: 5px;
  left: 5px;
  overflow: hidden;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}


@media (max-width: 480px) {
  .booking-day__action-blocked {
    font-size: 6px;
  }
}


@media (min-width: 1051px) {
  .booking-calendar__weekdays {
    margin-top: 10px;
  }
/*
  .booking-calendar__grid {
    height: 299px;
    grid-template-rows: repeat(6, 44px);
  }
*/
  .booking-day {
    height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .booking-day__availability {
    bottom: 6px;
  }
}


.booking-day.is-minimum-departure-blocked:not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__availability,
.booking-day.is-departure-only:not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__availability {
  opacity: 1;
  filter: none;
}


.booking-day.is-minimum-departure-blocked .booking-day__availability i,
.booking-day.is-departure-only .booking-day__availability i {
  background: var(--booking-green);
}


.booking-day__gauge {
  position: absolute;
  right: 5px;
  bottom: 9px;
  left: 5px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 3px;
  pointer-events: none;
}


.booking-day__gauge > i {
  flex: 1 1 0;
  max-width: 8px;
  height: 3px;
  border: 1px solid rgba(120,180,125,.42);
  border-radius: 2px;
  background: transparent !important;
}


.booking-day__gauge > i.is-filled {
  border-color: rgba(120,210,130,.85);
  background: var(--booking-green) !important;
}


.booking-day__availability { bottom: 3px; }


@media (min-width: 761px) {

  .booking-calendar {
    min-height: 0;
    height: 100%;
    margin-top: 0 !important;
    padding: clamp(8px, 1vh, 13px) !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .booking-calendar__header {
    min-height: 0;
  }

  .booking-calendar__header h3 {
    margin-bottom: 0;
    font-size: clamp(16px, 1.8vh, 22px);
  }

/*
  .booking-calendar__grid {
    height: auto !important;
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  }
*/
  .booking-day {
    height: auto !important;
    min-height: 0;
    padding: clamp(3px, .6vh, 7px) !important;
  }

  .booking-calendar__footer {
    margin-top: clamp(5px, .7vh, 9px) !important;
  }
}


.booking-day.is-open:not(.is-selected):not(.is-range):not(.is-preview-range) {
  background: var(--booking-calendar-free);
  border-color: rgba(189, 216, 195, 0.20);
  color: #f7f1e7;
}


.booking-day.is-full:not(.is-selected):not(.is-range):not(.is-preview-range) {
  background: var(--booking-calendar-busy);
  border-color: rgba(222, 184, 184, 0.18);
  color: rgba(247, 241, 231, 0.88);
}


.booking-day__availability,
.booking-day__gauge {
  display: none !important;
}


.booking-day__action-blocked {
  bottom: 5px;
  color: rgba(247, 241, 231, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}


.booking-day.is-open.is-unavailable-date:not(.is-selected):not(.is-range):not(.is-preview-range),
.booking-day.is-open.is-action-blocked:not(.is-selected):not(.is-range):not(.is-preview-range) {
  color: rgba(247, 241, 231, 0.90);
  background-color: var(--booking-calendar-free);
}


.booking-day.is-open:disabled:not(.is-selected):not(.is-range):not(.is-preview-range),
.booking-day.is-full:disabled:not(.is-selected):not(.is-range):not(.is-preview-range) {
  opacity: 0.62;
  filter: none;
}


@media (hover: hover) {
  .booking-day.is-open:not(.is-selected):not(.is-range):not(.is-preview-range):hover {
    background-color: var(--booking-calendar-free-hover);
  }

  .booking-day.is-full:not(.is-selected):not(.is-range):not(.is-preview-range):hover {
    background-color: var(--booking-calendar-busy-hover);
  }
}


.booking-day.is-selected,
.booking-day.is-range,
.booking-day.is-preview-range {
  border-color: var(--booking-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(215, 177, 90, 0.72);
}


.booking-day.is-arrival-guest-blocked:not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__number,
.booking-day.is-action-blocked.is-open:not(.is-departure-only):not(.is-selected):not(.is-range):not(.is-preview-range)
  .booking-day__number {
  color: rgba(8, 18, 13, 0.62) !important;
  text-shadow: none !important;
}


.booking-day.is-transition-free-busy:not(.is-selected):not(.is-range):not(.is-preview-range) {
  background: linear-gradient(
    135deg,
    var(--booking-calendar-free) 0%,
    var(--booking-calendar-free) 49.5%,
    var(--booking-calendar-busy) 50.5%,
    var(--booking-calendar-busy) 100%
  ) !important;
}


.booking-day.is-transition-busy-free:not(.is-selected):not(.is-range):not(.is-preview-range) {
  background: linear-gradient(
    135deg,
    var(--booking-calendar-busy) 0%,
    var(--booking-calendar-busy) 49.5%,
    var(--booking-calendar-free) 50.5%,
    var(--booking-calendar-free) 100%
  ) !important;
}


.booking-calendar,
.booking-calendar__grid {
  overflow: visible;
}


.booking-day.is-past-date:not(.is-selected):not(.is-range):not(.is-preview-range) {
  background: var(--booking-calendar-busy) !important;
  opacity: 0.26 !important;
  filter: none !important;
  color: rgba(245, 240, 226, 0.26) !important;
}


.booking-day.is-past-date .booking-day__action-blocked {
  display: none !important;
}


.booking-day.is-departure-only,
.booking-day.is-departure-only.is-explained-disabled,
.booking-day.is-departure-only[aria-disabled="true"] {
  cursor: pointer !important;
}


/* ==========================================================================
   MOBILE CALENDAR — consolidated from final Chrome computed styles
   ========================================================================== */


@media (max-width: 760px) {
  .booking-calendar {
      width: 100%;
      /*
    height: min(43dvh, 342px);
    min-height: 250px;
    max-height: 342px;
     */
      height:min(45dvh, 450px) ;
    margin: 0;
    padding: 5px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 12px;
    flex: none;
  }

  .booking-calendar__header {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
  }

  .booking-calendar__header > div:first-child {
    min-width: 0;
    overflow: hidden;
  }

  .booking-calendar__eyebrow {
    display: none;
  }

  .booking-calendar__header h3 {
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .booking-calendar__actions {
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .booking-calendar__navigation {
    position: relative;
    flex: 0 0 180px;
    width: 180px;
    height: 27px;
    min-width: 0;
    display: block;
    transform: translateX(-10px);
  }

  .booking-calendar__navigation button {
    position: absolute;
    top: 0;
    width: 27px;
    height: 27px;
    margin: 0;
  }

  .booking-calendar__navigation [data-calendar-previous] { left: 0; }
  .booking-calendar__navigation [data-calendar-next] { right: 0; }

  .booking-calendar__navigation strong {
    position: absolute;
    inset: 0 29px;
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    white-space: nowrap;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
  }

  .booking-calendar__reset {
    flex: 0 0 auto;
    min-height: 27px;
    padding: 0 6px;
    font-size: 9px;
  }

  .booking-calendar__weekdays {
/*    margin: 3px 0 2px;*/
    font-size: 9px;
  }

  .booking-calendar__grid {
    height: 100%;
    min-height: 0;
    max-height: none;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }

  .booking-day {
    height: auto;
    min-height: 0;
    padding: 2px;
    border-radius: 6px;
  }

  .booking-day__number {
    font-size: 11px;
  }

  .booking-calendar__footer {
    display: flex;
    min-height: 15px;
    margin-top: 2px;
    gap: 5px;
  }

  .booking-calendar__legend {
    min-width: 0;
    gap: 6px;
    font-size: 8px;
  }

  .booking-calendar__footer p {
    margin: 0;
    font-size: 8px;
    line-height: 1.1;
  }
}


@media (max-width: 760px) and (max-height: 700px) {
  .booking-calendar {
    height: min(42dvh, 280px);
    min-height: 220px;
  }
}


@media (max-width: 760px) and (max-height: 650px) {
  .booking-calendar__footer {
    display: none;
  }
}


@media (max-width: 760px) and (max-height: 590px) {
  .booking-calendar {
    height: min(44dvh, 245px);
    min-height: 195px;
  }
}


/* Mobile — calendrier agrandi lorsqu'une lodge est imposée par l'URL. */


@media (max-width: 760px) {
  #Reservez.is-single-lodge-mobile .booking-calendar {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}


/* ==========================================================================
   Rêve Et Alizé — Promo / Assurance
   Styles consolidés. Les règles promo/assurance ne doivent plus vivre dans legacy.
   ========================================================================== */


.booking-promo[hidden],
.booking-promo-fallback[hidden],
.booking-promo-modal[hidden] {
  display: none !important;
}


.booking-promo {
  width: 100%;
  min-height: 74px;
/*  padding: 13px 16px;*/
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--booking-line);
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(215, 177, 90, 0.16), rgba(33, 65, 48, 0.25));
}


.booking-promo__icon {
  color: var(--booking-gold);
  font-size: 30px;
}


.booking-promo__content {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 12px;
}


.booking-promo__eyebrow {
  display: block;
  color: var(--booking-gold);
  font-size: 0.8vw;

  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


bookingPromoTitle {
    font-size: 1vw;
}


.booking-promo__content > span:last-child {
    font-size: 0.7vw;
    color: var(--booking-muted);
}


.booking-promo__content span {
  overflow-wrap: anywhere;
}


.booking-promo__button {
  border: 0;
  color: var(--booking-gold);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}


.booking-promo__button:hover,
.booking-promo__button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}


.booking-promo-fallback {
  position: relative;
  width: 100%;
  min-height: 74px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--booking-line);
  border-radius: 18px;
  background: url('/assets/frog_footer.CPST4Hj3.webp') right 30% / cover no-repeat;
}


.booking-promo-fallback::before {
  content: \"\";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 18, 13, .94) 0%, rgba(8, 18, 13, .82) 58%, rgba(8, 18, 13, .22) 100%);
  pointer-events: none;
}


.booking-promo-fallback__insurance {
  position: relative;
  z-index: 1;
/*  width: min(820px, 82%);*/
  height: 100%;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}


.booking-promo-fallback__insurance-icon {
  flex: 0 0 auto;
  color: var(--booking-gold);
  font-size: 24px;
  line-height: 1;
}


.booking-promo-fallback__insurance p {
  flex: 1 1 auto;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  line-height: 1.35;
}


.booking-promo-fallback__insurance p strong {
  color: #fff;
  font-weight: 800;
}


.booking-promo-fallback__insurance-link {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(215, 177, 90, .48);
  border-radius: 999px;
  background: rgba(215, 177, 90, .10);
  color: var(--booking-gold);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}


.booking-promo-fallback__insurance-link:hover {
  background: rgba(215, 177, 90, .18);
  border-color: rgba(215, 177, 90, .72);
  transform: translateY(-1px);
}


.booking-insurance-text--mobile {
  display: none;
}


/* Desktop / tablette : slot fixe, aucun déplacement pendant l'alternance. */


@media (min-width: 761px) {
  .booking-promo-slot {
    position: relative;
    width: 100%;
    height: 74px;
    min-height: 74px;
    margin-top: 18px;
    overflow: hidden;
  }

  .booking-promo-slot > .booking-promo,
  .booking-promo-slot > .booking-promo-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: opacity .55s ease, visibility .55s ease;
  }

  .booking-promo-slot > .booking-promo.is-rotating-hidden,
  .booking-promo-slot > .booking-promo-fallback.is-rotating-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .booking-promo-slot > .booking-promo:not(.is-rotating-hidden),
  .booking-promo-slot > .booking-promo-fallback:not(.is-rotating-hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
}


.booking-promo-modal[hidden] {
  display: none;
}


.booking-promo-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
}


.booking-promo-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(5, 12, 9, 0.74);
  backdrop-filter: blur(4px);
  cursor: pointer;
}


.booking-promo-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(215, 177, 90, 0.58);
  border-radius: 22px;
  background: linear-gradient(150deg, #183526, #10251b 72%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  color: var(--booking-ink);
}


.booking-promo-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--booking-ink);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}


.booking-promo-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}


.booking-promo-modal__eyebrow {
  display: block;
  padding-right: 42px;
  color: var(--booking-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.booking-promo-modal h3 {
  margin: 8px 42px 10px 0;
  color: #fff2c9;
  font-size: clamp(23px, 4vw, 31px);
  line-height: 1.12;
}


.booking-promo-modal__lead {
  margin: 0 0 18px;
  color: var(--booking-muted);
  line-height: 1.55;
}


.booking-promo-modal__highlight {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  padding: 15px 17px;
  border: 1px solid rgba(215, 177, 90, 0.42);
  border-radius: 15px;
  background: rgba(215, 177, 90, 0.1);
}


.booking-promo-modal__highlight strong {
  color: #ffe3a0;
  font-size: 17px;
}


.booking-promo-modal__highlight span,
.booking-promo-modal__note {
  color: var(--booking-muted);
  font-size: 13px;
  line-height: 1.45;
}


.booking-promo-modal h4 {
  margin: 0 0 8px;
  color: var(--booking-ink);
  font-size: 14px;
}


.booking-promo-modal ul {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--booking-muted);
  font-size: 13px;
  line-height: 1.55;
}


.booking-promo-modal li + li {
  margin-top: 5px;
}


.booking-promo-modal__note {
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--booking-line);
}


.booking-promo-modal__confirm {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(215, 177, 90, 0.72);
  border-radius: 13px;
  background: rgba(215, 177, 90, 0.16);
  color: #ffe3a0;
  cursor: pointer;
  font-weight: 800;
}


.booking-promo-modal__confirm:hover {
  background: rgba(215, 177, 90, 0.25);
}


html.booking-modal-open,
html.booking-modal-open body {
  overflow: hidden;
}


@media (max-width: 560px) {
  .booking-promo-modal { padding: 10px; }
  .booking-promo-modal__dialog {
    max-height: calc(100vh - 20px);
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
}


/* Mobile — valeurs consolidées d'après le rendu Chrome fourni. */


@media (max-width: 760px) {
  .booking-promo-slot {
      position: relative ;
      display: block ;
    width: 100%;
    height: 74px;
    min-height: 74px;
    margin-top: 18px;
    overflow: hidden;
  }

  .booking-promo-slot > .booking-promo,
  .booking-promo-slot > .booking-promo-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: opacity .55s ease, visibility .55s ease;
  }

  .booking-promo-slot > .booking-promo.is-rotating-hidden,
  .booking-promo-slot > .booking-promo-fallback.is-rotating-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .booking-promo-slot > .booking-promo:not(.is-rotating-hidden),
  .booking-promo-slot > .booking-promo-fallback:not(.is-rotating-hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  .booking-promo {
    padding: 3px 6px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    border-radius: 9px !important;
  }

  .booking-promo__icon { font-size: 15px; }

  .booking-promo__content {
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }

  .booking-promo__eyebrow,
  .booking-promo__content > span:last-child { display: none; }

  .booking-promo__content strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }

  .booking-promo__button {
    grid-column: auto !important;
    font-size: 9px;
    white-space: nowrap;
  }

  .booking-promo-fallback {
    padding: 0 !important;
    display: flex;
    align-items: center;
    overflow: hidden !important;
    border-radius: 9px !important;
    background-position: right 30% !important;
    background-size: cover !important;
  }

  .booking-promo-fallback__insurance {
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    gap: 8px;
  }

  .booking-promo-fallback__insurance-icon { font-size: 18px; }

  .booking-promo-fallback__insurance p {
    min-width: 0;
    font-size: 10px;
    line-height: 1.25;
  }

  .booking-insurance-text--desktop { display: none; }
  .booking-insurance-text--mobile { display: inline; }

  .booking-promo-fallback__insurance-link {
    padding: 6px 8px;
    font-size: 9px;
  }
}


@media (max-height:  800px) and (max-width: 420px) {
    .booking-promo-slot  {
	display: none;
    }
}


/*
 * Rêve Et Alizé — Panel résultats / layout des lodges
 * Consolidé depuis la v274.
 * Périmètre : .booking-results et ses sous-composants uniquement.
 * Les règles mixtes avec booking-main restent dans le legacy.
 */


/* =========================
   BASE
   ========================= */


/* Structure visuelle du panneau résultats, sortie du legacy en v298. */


.booking-results {
    height: 100%;
    padding: clamp(10px, 1.3vh, 18px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid var(--booking-line);
    border-radius: 24px;
    background: var(--booking-panel);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}


.booking-results__header {
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 10px ;
}


.booking-results__header > *,
.booking-tax {
  min-width: 0;
  max-width: 100%;
}


.booking-results__eyebrow {
  display: block;
  color: var(--booking-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.booking-summary {
    display: none;
}


.booking-results__count,
.booking-summary,
.booking-tax span,
.booking-tax small {
  color: var(--booking-muted);
}


.booking-summary,
.booking-results__header h3 {
    white-space: nowrap ;
}


.booking-results__divtrust{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: flex-end;
}


.booking-results__header h3 {
    margin-bottom: 0;
    font-size: clamp(17px, 1.9vh, 23px);
}


.booking-mobile-results-trigger,
.booking-results__mobile-close {
  display: none;
}


.booking-results__headerdiv {
    flex: 1 0 35%;
}


.booking-results__trust {
  color: var(--booking-gold);
  font-size: 13px;
  white-space: nowrap;
}


@media (min-width: 761px) and (max-height: 760px) {

    .booking-results__trust { font-size: 10px; }
}


@media (max-width: 760px) {
    .booking-results__trust {
	display: none;
    }
}


.booking-results__trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.booking-results__trust-icon {
  font-size: 14px;
  line-height: 1;
}


@media (max-height:  800px) and (max-width: 420px) {
    .booking-results__trust  {
        display: none;
    }
}


.booking-results__header {
  position: relative !important;
}


.booking-results__count {
  margin: 5px 0 0;
  font-size: 12px;
}


.booking-results__select-all {
  z-index: 30;
  padding: 3px 8px;
  border: 1px solid rgba(215,177,90,.28);
  border-radius: 999px;
  background: rgba(215,177,90,.07);
  color: rgba(245,240,226,.9);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  width: max-content;
}


.booking-results__select-all:hover,
.booking-results__select-all:focus-visible {
  background: rgba(215,177,90,.14);
  border-color: rgba(215,177,90,.48);
  color: #fff;
}


.booking-results__select-all[hidden] {
  display: none !important;
}


/* =========================
   TABLETTE + DESKTOP
   ========================= */


@media (min-width: 761px) {
    /*
  .booking-results {
    position: static !important;
    align-self: stretch !important;
    width: auto !important;
    height: 100%;
    min-height: 0;
    max-height: none !important;
    padding: clamp(10px, 1.3vh, 18px) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden !important;
    border-radius: clamp(14px, 1.4vw, 22px);
  }
*/
}


@media (min-width: 761px) and (max-width: 1050px) {
    /*
  .booking-results {
    max-height: none;
  }
*/
}


@media (min-width: 761px) and (max-width: 1100px) {
    /*
  .booking-results {
    padding: 10px !important;
  }
*/
}


@media (min-width: 1051px) and (max-width: 1528px) {
    /*
  .booking-results {
    align-self: stretch !important;
    max-height: none;
    overflow: visible;
  }
*/
}


@media (min-width: 1529px) {
    /*
  .booking-results {
    width: 484px;
    min-width: 0;
    max-height: none;
    overflow: hidden;
  }
*/
}


/* =========================
   MOBILE — MODE STATIQUE
   Les anciennes variantes popup/fixed ont été consolidées ici.
   ========================= */


@media (max-width: 760px) {
  html.booking-results-open,
  html.booking-results-open body {
    overflow: hidden !important;
  }

  .booking-results,
  .booking-results.is-mobile-open {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: rgba(10, 14, 11, 0.995) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
  }

  .booking-results__header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
  }

  .booking-results__header h3 {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .booking-results__eyebrow {
    display: none !important;
  }

  .booking-results__count {
    margin: 1px 0 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .booking-results__mobile-close {
    display: none !important;
  }


  .booking-results__select-all {
    right: 34px;
    top: 4px;
    font-size: 8px;
    padding: 3px 7px;
  }
}


@media (max-width: 760px) and (max-height: 700px) {
  .booking-results,
  .booking-results.is-mobile-open {
    padding: 4px !important;
  }

  .booking-results__header {
    min-height: 18px !important;
  }

  .booking-results__header h3 {
    font-size: 11px !important;
  }
}


/* Mobile — panneau résultats dédié à la lodge demandée dans l'URL. */


@media (max-width: 760px) {
  #Reservez.is-single-lodge-mobile .booking-results,
  #Reservez.is-single-lodge-mobile .booking-results.is-mobile-open {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  #Reservez.is-single-lodge-mobile .booking-results__select-all {
    display: none !important;
  }
}


/*
 * Rêve Et Alizé — Cards lodges
 * Consolidation v292.
 * Une seule architecture par breakpoint, sans correctifs contradictoires.
 */


.booking-lodges,
.booking-lodge-card,
.booking-lodge-card > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


.booking-lodges {
  display: grid;
  gap: 7px;
}


.booking-lodge-card {
  position: relative;
  width: 100%;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  padding: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(105px, auto) 18px;
  align-items: stretch;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(215, 177, 90, 0.26);
  border-radius: 11px;
  color: var(--booking-ink);
  background: linear-gradient(135deg, rgba(32, 42, 36, 0.96), rgba(14, 20, 17, 0.98));
  text-align: left;
}


.booking-lodge-card__photo {
  position: relative;
  min-height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


.booking-lodge-card__lock {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  font-style: normal;
}


.booking-lodge-card__body {
  min-width: 0;
  padding: 4px 0;
  display: grid;
  grid-template-rows: auto auto 27px;
  align-content: center;
  gap: 1px;
  overflow: hidden;
}


.booking-lodge-card__heading {
  position: relative;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}


.booking-lodge-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.booking-lodge-card__state {
  width: 100%;
  min-width: 0;
  color: #94d99e;
  font-size: 10px;
  white-space: nowrap;
}


.booking-lodge-card__state-default,
.booking-lodge-card__state-stay {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.booking-lodge-card__state-stay {
  display: none;
}


.booking-lodge-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  overflow: hidden;
  color: var(--booking-muted);
  font-size: 9px;
  line-height: 1.05;
  white-space: nowrap;
}


.booking-lodge-card__reason {
  position: relative;
  min-width: 0;
  height: 27px;
  overflow: visible;
  color: #d4c9b9;
  font-size: 10px;
  line-height: 13px;
  white-space: normal;
}


.booking-lodge-card[data-status-reason] .booking-lodge-card__reason {
  color: rgba(247, 241, 231, 0.72);
  font-weight: 500;
  letter-spacing: 0.01em;
}


.booking-lodge-card__reason-line {
  display: block;
  min-width: 0;
  height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.booking-lodge-card__amount {
  align-self: center;
  display: grid;
  justify-items: end;
  gap: 0;
  max-height: 76px;
  overflow: hidden;
  text-align: right;
  line-height: 1.05;
}


.booking-lodge-card__amount small {
  color: var(--booking-muted);
  font-size: 8px;
}


.booking-lodge-card__amount.is-hidden {
  visibility: hidden;
}


.booking-lodge-card__price-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}


.booking-lodge-card__stay-dates {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--booking-muted);
  font-size: 8px;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.booking-lodge-card__price-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}


.booking-lodge-card__promo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 1px 6px;
  border: 1px solid rgba(215, 177, 90, 0.7);
  border-radius: 999px;
  background: rgba(215, 177, 90, 0.14);
  color: #ffe3a0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}


.booking-lodge-card__old-price {
  color: rgba(247, 241, 231, 0.58);
  font-size: 9px;
  line-height: 1;
  text-decoration-thickness: 1px;
}


.booking-lodge-card__price {
  color: var(--booking-gold);
  font-size: 18px;
  line-height: 1;
}


.booking-lodge-card__price-caption,
.booking-lodge-card__promo-name,
.booking-lodge-card__saving {
  display: block;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.booking-lodge-card__promo-name {
  margin-top: 1px;
  color: #f5d98f !important;
  font-size: 8px !important;
  font-weight: 700;
}


.booking-lodge-card__saving {
  margin-top: 1px;
  color: #9bd8a4 !important;
  font-size: 8px !important;
  font-weight: 700;
}


.booking-lodge-card__arrow {
  align-self: center;
  color: var(--booking-gold);
  font-size: 26px;
}


.booking-lodge-card__filter-toggle {
  position: absolute;
  z-index: 20;
  top: -2px;
  right: 2px;
  width: 22px;
  height: 22px;
  display: inline-grid !important;
  place-items: center;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer !important;
  user-select: none;
  filter: none !important;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}


.booking-lodge-card__filter-toggle.is-active {
  color: #f3d56a;
  border-color: rgba(218, 165, 32, 0.75);
  background: rgba(25, 56, 29, 0.82);
}


.booking-lodge-card__filter-symbol {
  display: inline-block;
  line-height: 1;
}


.booking-lodge-card__filter-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.88);
  font-size: 7.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  pointer-events: none;
}


.booking-lodge-card.is-available {
  border-color: var(--booking-green);
}


.booking-lodge-card.has-promotion {
  border-color: rgba(215, 177, 90, 0.78);
}


.booking-lodge-card.is-unavailable {
  opacity: 0.58;
}


.booking-lodge-card.is-unavailable .booking-lodge-card__photo {
  filter: grayscale(1);
}


.booking-lodge-card.is-unavailable .booking-lodge-card__state,
.booking-lodge-card.is-unavailable .booking-lodge-card__reason {
  opacity: 0.58;
}


.booking-lodge-card.is-minimum-stay {
  opacity: 0.84;
  border-color: rgba(215, 177, 90, 0.72);
  background: linear-gradient(135deg, rgba(37, 43, 38, 0.95), rgba(18, 23, 20, 0.97));
}


.booking-lodge-card.is-minimum-stay .booking-lodge-card__photo {
  filter: grayscale(0.35) brightness(0.88);
}


.booking-lodge-card.is-minimum-stay .booking-lodge-card__state {
  color: #f0c96d;
  font-weight: 700;
}


.booking-lodge-card.is-minimum-stay .booking-lodge-card__reason {
  color: #ffe09a;
  font-weight: 800;
  opacity: 1;
}


.booking-lodge-card.is-calendar-filtered-out {
  opacity: .42;
}


.booking-lodge-card.is-calendar-filtered-out .booking-lodge-card__filter-toggle,
.booking-lodge-card.is-calendar-filtered-out .booking-lodge-card__filter-symbol,
.booking-lodge-card.is-calendar-filtered-out .booking-lodge-card__filter-label {
  opacity: 1 !important;
  filter: none !important;
}


button.booking-lodge-card.is-available {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
  will-change: transform;
}


button.booking-lodge-card.is-available > * {
  cursor: inherit;
}


@media (hover: hover) and (pointer: fine) {
  button.booking-lodge-card.is-available:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24);
    border-color: rgba(91, 194, 104, 0.9);
    filter: brightness(1.025);
  }

  .booking-lodge-card__filter-toggle:hover,
  .booking-lodge-card__filter-toggle:focus-visible {
    outline: 2px solid rgba(218, 165, 32, 0.75);
    outline-offset: 2px;
  }

  .booking-lodge-card__reason[data-tooltip]:hover::after,
  .booking-lodge-card__reason[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: fixed;
    z-index: 10000;
    left: var(--tooltip-x, 50%);
    top: var(--tooltip-y, 50%);
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    padding: 8px 10px;
    border: 1px solid rgba(215, 177, 90, 0.42);
    border-radius: 8px;
    background: rgba(12, 18, 15, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
    color: #f7f1e7;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
  }
}


button.booking-lodge-card.is-available:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  filter: brightness(0.97);
}


button.booking-lodge-card.is-available:focus-visible {
  outline: 2px solid var(--booking-gold);
  outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {
  button.booking-lodge-card.is-available {
    transition: none;
  }
}


/* Desktop / tablette */


@media (min-width: 761px) {
  .booking-lodge-card.has-valid-stay .booking-lodge-card__state-default {
    display: none;
  }

  .booking-lodge-card.has-valid-stay .booking-lodge-card__state-stay {
    display: block;
  }

  .booking-lodge-card__stay-dates {
    display: none;
  }
}


@media (min-width: 761px) {
  .booking-lodges {
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(3px, .55vh, 7px);
  }

  .booking-lodge-card {
    height: 100%;
    min-height: 0;
    max-height: none;
    grid-template-columns: clamp(58px, 6vw, 82px) minmax(0, 1fr) minmax(76px, auto) 14px;
    gap: clamp(5px, .6vw, 10px);
  }

  .booking-lodge-card__photo {
    min-height: 100%;
  }

  .booking-lodge-card__body {
    padding: 2px 0;
    grid-template-rows: auto auto minmax(20px, 26px);
  }

  .booking-lodge-card__name {
    font-size: clamp(11px, .9vw, 14px);
  }

  .booking-lodge-card__reason {
    height: 22px;
    font-size: 9px;
    line-height: 11px;
  }

  .booking-lodge-card__reason-line {
    height: 11px;
  }

  .booking-lodge-card__price {
    font-size: clamp(14px, 1.15vw, 18px);
  }
}


@media (min-width: 761px) and (max-width: 1100px) {
  .booking-lodge-card {
    grid-template-columns: 54px minmax(0, 1fr) minmax(66px, auto) 10px;
  }

  .booking-lodge-card__meta {
    display: none;
  }
}


/* Mobile : 2 colonnes × 3 lignes, une seule géométrie de card. */


@media (max-width: 760px) {
  .booking-lodge-card__state-stay {
    display: none;
  }

  .booking-lodge-card__state-default {
    display: block;
  }

  .booking-lodge-card__stay-dates {
    display: block;
  }
}


@media (max-width: 760px) {
  .booking-lodges {
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
    align-content: stretch;
    overflow: hidden;
  }

  .booking-lodge-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 6px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "photo body"
      "amount amount";
    column-gap: 7px;
    row-gap: 3px;
    align-items: start;
    overflow: hidden;
    border-radius: 7px;
  }

  .booking-lodge-card__photo {
    grid-area: photo;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    align-self: start;
    border-radius: 7px;
  }

  .booking-lodge-card__lock {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .booking-lodge-card__body {
    grid-area: body;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: hidden;
  }

  .booking-lodge-card__heading {
    width: 100%;
    min-width: 0;
    padding-right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    overflow: hidden;
  }

  .booking-lodge-card__state {
    width: 100%;
    min-width: 0;
    font-size: 8px;
    line-height: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-lodge-card__name {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-lodge-card__meta {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
    font-size: 8px;
    line-height: 10px;
    white-space: nowrap;
  }

  .booking-lodge-card__reason {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 10px;
    overflow: hidden;
    font-size: 8px;
    line-height: 10px;
  }

  .booking-lodge-card__reason-line {
    width: 100%;
    height: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-lodge-card__filter-toggle {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .booking-lodge-card__filter-label {
    display: none;
  }

  .booking-lodge-card__amount {
    grid-area: amount;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding-top: 3px;
    align-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 1px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08);
    justify-items: end;
    text-align: right;
  }

  .booking-lodge-card__price-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    overflow: hidden;
  }

  .booking-lodge-card__stay-dates {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 6.5px !important;
    line-height: 8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-lodge-card__price-line {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 3px;
    overflow: hidden;
    white-space: nowrap;
  }

  .booking-lodge-card__promo-badge {
    flex: 0 0 auto;
    min-height: 13px;
    padding: 1px 3px;
    font-size: 7px;
    line-height: 9px;
  }

  .booking-lodge-card__old-price {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 7px;
    white-space: nowrap;
  }

  .booking-lodge-card__price {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .booking-lodge-card__price-caption,
  .booking-lodge-card__promo-name,
  .booking-lodge-card__saving {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7px !important;
    line-height: 8px;
  }

  .booking-lodge-card__promo-name {
    color: #f5d98f !important;
  }

  .booking-lodge-card__saving {
    color: #9bd8a4 !important;
  }

  .booking-lodge-card__arrow {
    display: none;
  }
}


@media (max-width: 380px) {
  .booking-lodges {
    gap: 4px;
  }

  .booking-lodge-card {
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 5px;
    padding: 5px;
  }

  .booking-lodge-card__photo {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .booking-lodge-card__name {
    font-size: 11px;
  }

  .booking-lodge-card__price {
    font-size: 11px;
  }
}


/* Mobile — une seule lodge : la card utilise tout le panneau results. */


@media (max-width: 760px) {
  #Reservez.is-single-lodge-mobile .booking-lodges {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 8px;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "photo body"
      "amount amount";
    column-gap: 10px;
    row-gap: 5px;
    border-radius: 10px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__photo {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    border-radius: 9px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__body {
    justify-content: center;
    gap: 3px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__heading {
    padding-right: 0;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__state {
    font-size: 9px;
    line-height: 11px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__name {
    font-size: 15px;
    line-height: 17px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__meta,
  #Reservez.is-single-lodge-mobile .booking-lodge-card__reason {
    font-size: 9px;
    line-height: 11px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__reason-line {
    height: 11px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__filter-toggle {
    display: none !important;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__amount {
    padding-top: 5px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__price {
    font-size: 16px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__stay-dates {
    font-size: 9px !important;
    line-height: 11px;
  }

  #Reservez.is-single-lodge-mobile .booking-lodge-card__old-price,
  #Reservez.is-single-lodge-mobile .booking-lodge-card__promo-badge,
  #Reservez.is-single-lodge-mobile .booking-lodge-card__price-caption,
  #Reservez.is-single-lodge-mobile .booking-lodge-card__promo-name,
  #Reservez.is-single-lodge-mobile .booking-lodge-card__saving {
    font-size: 8px !important;
    line-height: 10px;
  }
}


@media (max-width: 380px) {
  #Reservez.is-single-lodge-mobile .booking-lodge-card {
    grid-template-columns: minmax(78px, 32%) minmax(0, 1fr);
    padding: 6px;
    column-gap: 8px;
  }
}


/*
 * Correctifs post-v265 uniquement.
 *
 * RÈGLES DE MAINTENANCE
 * 1. Ne jamais ajouter un correctif dans reserver-v265-legacy.css.
 * 2. Un sélecteur ne doit être défini qu'une seule fois dans ce fichier,
 *    sauf séparation explicite desktop/mobile par @media.
 * 3. Éviter !important. L'utiliser uniquement si une règle legacy impossible
 *    à migrer immédiatement l'exige, avec un commentaire expliquant pourquoi.
 * 4. Regrouper les règles par composant : layout, formulaire, calendrier,
 *    lodges, promotion/assurance, responsive.
 * 5. Lorsqu'un composant est entièrement migré, supprimer ses anciennes règles
 *    du legacy seulement après comparaison visuelle desktop/tablette/mobile.
 */


/* =========================
   01. LAYOUT
   ========================= */


/* =========================
   02. FORMULAIRE / VOYAGEURS
   ========================= */


/* =========================
   03. CALENDRIER
   ========================= */


/* =========================
   04. LODGES / CARDS
   ========================= */


/* =========================
   05. PROMOTION / ASSURANCE
   ========================= */


/* =========================
   06. RESPONSIVE MOBILE
   ========================= */


/* v279 — garde-fou affichage des photos des cards lodges.
   Ces règles ne définissent aucune image : l'URL reste fournie inline par le JS. */


.booking-lodge-card__photo {
  display: grid;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}


@media (max-width: 760px) {
  .booking-lodge-card__photo {
    grid-area: photo !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-self: start !important;
    overflow: hidden !important;
  }
}


@media (max-width: 380px) {
  .booking-lodge-card__photo {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}


.hero-banner-wrapper {
        width: min(1100px,100%);
        display: flex;
        justify-content: center;
        margin-bottom: 28px;
    }


.hero-banner {
        width: min(900px,100%);
    }


.hero-banner img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }


.hero-banner span {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        color: white;
        font-size: clamp(20px,2vw,34px);
        font-weight: 700;
        text-shadow: 0 3px 12px rgba(0,0,0,.8);
        text-align: center;
        padding: 20px;
    }


.link-cards-section {
      min-height: 100dvh;
      padding: clamp(18px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: black;
      width: auto;
      height: auto;
    }


.link-cards-wrapper {
      width: min(1100px, 100%);
    display: grid;
       grid-template-columns:
      repeat(auto-fit,minmax(180px,1fr));

    gap:24px;
    /*
      grid-template-columns: repeat(5, 1fr);
    gap: clamp(14px, 2vw, 24px);
    */
    }


.link-card {
      position: relative;
      height: clamp(190px, 22vw, 280px);
      overflow: hidden;
      border-radius: 22px;
      text-decoration: none;
      color: white;
      box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }


.link-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }


.link-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.62),
        rgba(0, 0, 0, 0.12)
      );
    }


.link-card span {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 20px;
      z-index: 2;
      font-size: clamp(1rem, 1.8vw, 1.7rem);
      font-weight: 700;
      text-align: center;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }


.link-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 22px 45px rgba(0, 0, 0, 0.25);
    }


.link-card:hover img {
      transform: scale(1.08);
    }


.banners-wrapper {
      width: min(1100px, 100%);
      margin-top: clamp(18px, 3vw, 30px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: clamp(14px, 2vw, 22px);
    }


.link-banner {
        position: relative;
        display: block;
        width: min(600px,100%);
        overflow: hidden;
        border-radius: 16px;
        background: black;
        text-decoration: none;
        box-shadow: 0 16px 35px rgba(0,0,0,.18);
        transition:
            transform .35s ease,
            box-shadow .35s ease;
    }


.link-banner img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        transition: transform .5s ease;
    }


.link-banner:hover {
        transform:
            perspective(1200px)
            rotateX(4deg)
            rotateY(-4deg)
            translateY(-8px);

        box-shadow:
            0 25px 50px rgba(0,0,0,.35);
    }


.link-banner:hover img {

        transform: scale(1.03);
    }


@media (max-width: 900px) {
      .link-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
      }

      .link-card:first-child {
        grid-column: span 2;
      }
    }


@media (max-width: 560px) {
      .link-cards-section {
        justify-content: flex-start;
        padding: 28px 18px 32px;
      }

      .link-cards-wrapper {
        grid-template-columns: 1fr;
      }

      .link-card,
      .link-card:first-child {
        grid-column: auto;
      }

      .link-card {
        height: 190px;
        border-radius: 18px;
      }

      .banners-wrapper {
        flex-direction: column;
        width: 100%;
      }

      .link-banner {
        width: 100%;
      }
    }


.visit-box{

    width:min(1100px,100%);

    margin-top:40px;

    padding:32px;

    border:1px solid rgba(199,165,90,.5);

    border-radius:22px;

    background:linear-gradient(
        180deg,
        #15110b,
        #090909
    );

    box-shadow:
        0 12px 30px rgba(0,0,0,.35);

}


.visit-box h2{

    color:#c7a55a;

    text-align:center;

    font-size:clamp(24px,2vw,36px);

    margin-top:0;

    margin-bottom:22px;

}


.visit-box p{

    color:#d8d0bc;

    line-height:1.9;

    font-size:1.08rem;

    text-align:justify;

}


.visit-box strong{

    color:#c7a55a;

}


@media(max-width:700px){

   .visit-box{

      padding:24px;

      margin-top:30px;

   }

   .visit-box p{

      text-align:left;

   }

}


/* =========================================================
   Le parent doit permettre le positionnement absolu
========================================================= */


#overlay {
  position: relative;
}


/* =========================================================
   CARROUSEL
========================================================= */


.story-carousel {
  --story-width: clamp(330px, 31vw, 510px);
  --story-radius: 18px;

  position: absolute;
  left: clamp(16px, 3vw, 52px);
  bottom: clamp(18px, 4vh, 48px);
  z-index: 20;

  width: var(--story-width);

  color: #fff;

  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* =========================================================
   CARTE PRINCIPALE
========================================================= */


.story-carousel__main {
  position: relative;
  display: block;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--story-radius);

  color: #fff;
  text-decoration: none;

  background: rgba(10, 20, 18, 0.55);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  isolation: isolate;
}


/* =========================================================
   IMAGE
========================================================= */


.story-carousel__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.001);

  transition:
    opacity 0.32s ease,
    transform 0.8s ease;
}


.story-carousel__main:hover .story-carousel__image {
  transform: scale(1.045);
}


.story-carousel.is-changing .story-carousel__image {
  opacity: 0;
}


/* =========================================================
   DÉGRADÉ
========================================================= */


.story-carousel__shade {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 10%,
      rgba(0, 0, 0, 0.12) 40%,
      rgba(5, 15, 12, 0.88) 100%
    );

  pointer-events: none;
}


/* =========================================================
   COMPTEUR
========================================================= */


.story-carousel__counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;
  padding: 5px 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;

  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   CONTENU
========================================================= */


.story-carousel__content {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.story-carousel__eyebrow {
  margin-bottom: 7px;

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;

  opacity: 0.78;
}


.story-carousel__title {
  display: block;
  margin: 0;

  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}


.story-carousel__description {
  display: block;
  max-width: 46ch;
  margin-top: 8px;

  font-size: clamp(0.76rem, 1vw, 0.9rem);
  line-height: 1.4;

  opacity: 0.9;
}


.story-carousel__discover {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-top: 12px;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}


.story-carousel__discover span {
  transition: transform 0.2s ease;
}


.story-carousel__main:hover .story-carousel__discover span {
  transform: translateX(4px);
}


/* =========================================================
   NAVIGATION
========================================================= */


.story-carousel__navigation {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 10px;

  margin-top: 10px;
}


.story-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;

  color: #fff;
  font-family: inherit;
  font-size: 1.45rem;
  line-height: 1;

  background: rgba(5, 16, 13, 0.42);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}


.story-carousel__arrow:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.06);
}


.story-carousel__arrow:focus-visible,
.story-carousel__pill:focus-visible,
.story-carousel__dot:focus-visible,
.story-carousel__main:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/* =========================================================
   POINTS DE PROGRESSION
========================================================= */


.story-carousel__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}


.story-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.42);

  cursor: pointer;

  transition:
    width 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}


.story-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}


.story-carousel__dot.is-active {
  width: 25px;
  background: #fff;
}


/* =========================================================
   TROIS PASTILLES CONTEXTUELLES
========================================================= */


.story-carousel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 10px;
}


.story-carousel__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 31px;
  padding: 6px 11px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;

  color: #fff;
  text-decoration: none;

  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;

  background: rgba(5, 16, 13, 0.4);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.story-carousel__pill:hover {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}


.story-carousel__pill-icon {
  font-size: 0.85rem;
  line-height: 1;
}


/* =========================================================
   TABLETTE
========================================================= */


@media (max-width: 1000px) {
  .story-carousel {
    --story-width: clamp(320px, 43vw, 440px);

    left: 20px;
    bottom: 24px;
  }

  .story-carousel__description {
    display: none;
  }
}


/* =========================================================
   MOBILE
========================================================= */


@media (max-width: 700px) {
  .story-carousel {
    --story-width: calc(100vw - 24px);

    right: 12px;
    bottom: 12px;
    left: 12px;

    width: auto;
  }

  .story-carousel__main {
    aspect-ratio: 2 / 1;
    border-radius: 14px;
  }

  .story-carousel__content {
    right: 15px;
    bottom: 14px;
    left: 15px;
  }

  .story-carousel__eyebrow {
    margin-bottom: 4px;
    font-size: 0.55rem;
  }

  .story-carousel__title {
    font-size: 1.12rem;
  }

  .story-carousel__description {
    display: none;
  }

  .story-carousel__discover {
    margin-top: 7px;
    font-size: 0.7rem;
  }

  .story-carousel__counter {
    top: 10px;
    right: 10px;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.6rem;
  }

  .story-carousel__navigation {
    grid-template-columns: 30px 1fr 30px;
    margin-top: 7px;
  }

  .story-carousel__arrow {
    width: 30px;
    height: 30px;
    font-size: 1.25rem;
  }

  .story-carousel__pills {
    gap: 5px;
    margin-top: 7px;

    flex-wrap: nowrap;
    overflow-x: auto;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .story-carousel__pills::-webkit-scrollbar {
    display: none;
  }

  .story-carousel__pill {
    flex: 0 0 auto;
    min-height: 29px;
    padding: 5px 9px;
    font-size: 0.64rem;
  }
}


/* =========================================================
   PETITS ÉCRANS EN HAUTEUR
========================================================= */


@media (max-height: 650px) and (min-width: 701px) {
  .story-carousel {
    --story-width: 390px;

    bottom: 14px;
  }

  .story-carousel__main {
    aspect-ratio: 2 / 1;
  }

  .story-carousel__description {
    display: none;
  }
}


/* =========================================================
   ACCESSIBILITÉ : ANIMATIONS RÉDUITES
========================================================= */


@media (prefers-reduced-motion: reduce) {
  .story-carousel,
  .story-carousel *,
  .story-carousel *::before,
  .story-carousel *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.menu {

    background: transparent;
  color: white;

  padding:1rem 0;

  position:fixed;

  top:-10px;

  width:99vw;
  left:1vw;

  overflow:auto;

  opacity:0;

  z-index:5000;

  transition:opacity .5s ease;
  
}
.menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: url("/assets/bordureh.DRB2CzDz.webp");
    background-repeat: repeat-x;     /* répétition horizontale uniquement */
    background-position: left center;
    background-size: auto 100%;      /* hauteur = hauteur du menu */

    opacity: 0.25;
    pointer-events: none;
}
.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 ;
  pointer-events: auto ;
  z-index: 10000;
}

/* RESPONSIVE MOBILE */
@media (max-width: 1000px) {
  #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: 10000;
    pointer-events: auto;
    width: max-content;
  }

  .menu.active {
      display: flex;
      opacity:1
  }

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

  .menu li {
    margin: 0;
  }
}

#Contact {
    height: 100vh;
    display:flex;
    flex-direction:column;
    z-index: 10002;
}
#cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 12px auto;
}


#kaz-Contact {
    z-index:0;
    display: flex;
    position:relative;
    flex-direction: column;
    background: url(/assets/frog.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) {
	left:1vw ;
	top: 20vh ;
	height: 60vh ;
	width: 80%;
    }
    @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: 50vh ;
    opacity:0.4;
    position: absolute;
    left: 50%;
	      
    transform:translateX(-102%) ;
}

@media (max-width: 600px) {
    #ct-logo {
/*	left: 100%;*/
	position: unset;
	margin-left:120%;
	margin-top: -80%;
    }
}


.contact-icons {
    display: flex;
    position: absolute;
    top: 30vh;
    left: 65vw;
    font-size: 40px;
    color: gold;
    gap: 10%;
    justify-content: space-around;
    margin-top: 2% ;
}

@media (max-width: 600px) {
    .contact-icons {
	top: 80vh ;
	left: 50vw;
	transform: translateX(-50%) ;
    }
}
@media only screen and (max-device-width: 430px)  and (orientation: landscape) {
    .contact-icons {
        color: gold ;
        font-size: 25px ;
        transform: translateY(-110%);

    }
}
@media only screen and (min-width: 600px) {
    .contact-icons {
	flex-direction: column ;
	gap:0%;
    }
}


.contact-section {
  display: flex;
  flex-direction: column;
  gap: 30px ;
  z-index: 6;

    @media (max-width: 600px) {
	flex-direction: row ;
    }
  
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px ;

  font-size: 18px ;
  font-family: 'Times New Roman', Times, serif;
}

.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;
}

.c-icon svg {
  width: 30px;
  height: 30px;
}

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

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

.contact-text {
    color: inherit;
    text-decoration: none;
    @media  (max-width: 600px) {
        display: none ;
    }
}

.contact-text:hover {
  text-decoration: underline;
}

address {
  font-style: normal;
}
/*
.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;
}



.captcha-error {
  margin-top: 10px;
  color: #d8b46a;
  font-size: 0.95rem;
  line-height: 1.4;
}