/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
	--CouleurBleu:#0b1b33;
	--CouleurBleuClair:#274064;
	--CouleurBleuGris:#f5f7fa;
	--CouleurJaune:#fecb37;
	--CouleurHover:#d45417;
}

body, html, a, ul, ol, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none;}
a, button, a img, a:hover, button:hover, a:hover > img, label, li, ::after, :hover:after{transition : all 0.2s linear;}
body{ font:14px/22px 'Roboto', sans-serif; font-weight:300;color:var(--CouleurBleu);}
a{ color:var(--CouleurBleu);}img{ border:0px;}
body, html{ min-height:100%; float: left; min-width: 100%; height: 100%; width: 100%; display: block; position: relative; max-width: 100%;  box-sizing: border-box;}
/*
html { box-sizing:border-box; height:100%; scrollbar-gutter: stable; }
body { min-height:100%; margin:0; overflow-x:hidden; }*/



/* STRUCTURE*/
div#first{ width: 100%; display: block; text-align: center; float: left;}

@media screen and (max-width: 1024px) 
{
	div#first div#second{ width:  calc(100% - 20px);padding:10px; display: inline-block; text-align: left;  }
	div.CaseLimite{width: calc(100% - 20px); padding: 20px 10px; display: inline-block;}
}
@media screen and (min-width: 1024px) 
{
	div#first div#second{ width: 944px; display: inline-block; text-align: left;  }
	div.CaseLimite{width: 50%; display: inline-block;}
}
@media screen and (min-width: 1200px) 
{
	div#first div#second{ width: 1120px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 400px; width: calc(100% - 100px); display: inline-block;padding: 50px;}
}
@media screen and (min-width: 1400px) 
{
	div#first div#second{ width: 1320px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 500px; width: calc(100% - 100px); display: inline-block; padding: 50px;}
}

@media screen and (min-width: 1024px) 
{
	.row{width: 100%; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none; display: inline-block; position: relative;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative;}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; position: relative; }.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%; max-width: 100% !important; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
	.column.column100{height: 100%;}
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; flex-direction: column; max-width: 100% !important;  }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	
}
@media screen and (max-width: 1024px) 
{
	.row{float: left; width: 100%;position: relative;}
	.row .case12, .row .case6, .row .case11, .row .case10, .row .case9, .row .case8, .row .case7, .row .case5, .row .case4, .row .case3, .row .case2, .row .case1{float: left; width: 100%;}
	.case12.padding10, .case11.padding10, .case10.padding10, .case9.padding10, .case8.padding10, .case7.padding10, .case6.padding10, .case5.padding10, .case4.padding10, .case3.padding10, .case2.padding10, .case1.padding10{width: calc(100% - 20px);}	
}

.padding10{padding: 10px;}
@media (max-width: 768px) 
{
	.padding10{padding: 10px; width: calc(100% - 20px);}
}
.case_table{display:table !important;height:100%; width: 100%;}.case_table .vertical_align{display:table-cell;vertical-align:middle; width: 100%;}

/*
* Weight
*/
.w100{font-weight: 100;} .w300{font-weight: 300;} .w500{font-weight: 500;} .w700{font-weight: 700;} .w900{font-weight: 900;} 
/*
* Aligenment
*/
.txtcenter{text-align: center;} .txtleft{text-align: left;} .txtright, .txtrightPC{text-align: right;}
/*
* Background
*/
.bgbleu{background: var(--CouleurBleu);}
.bgjaune{background: var(--CouleurJaune);}
/*
* Titre
*/
h1.titre1, h2.titre1, h3.titre1, h4.titre1{ padding: 0px; margin: 0px; display: block; font-weight: 700; font: 30px/45px 'Roboto', sans-serif; color:var(--CouleurBleu); }
h1.titre2, h2.titre2, h3.titre2, h4.titre2{ padding: 0px; margin: 0px; display: block; font-weight: 300 !important; font: 25px/45px 'Roboto', sans-serif; color:var(--CouleurBleu); text-transform: uppercase;}
/*
* Couleur
*/
.txtBlanc{color:#FFFFFF !important;}
/*
* Les boutons
*/
.Btn1{color:var(--CouleurJaune); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 50px 0px 10px; display: inline-block;  background: var(--CouleurBleu); position: relative; text-decoration: none; border: 1px solid var(--CouleurJaune); border-radius:5px;}
.Btn1::after{content: ""; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); right: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}

.Btn1:hover{background:#FFFFFF; color:var(--CouleurBleu);}
.Btn1:hover::after{background:var(--CouleurBleu); }

.BtnRetour{color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 10px 0px 50px; display: inline-block;  position: relative; text-decoration: none;  border-radius:5px;}
.BtnRetour::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); left: 15px; background: var(--CouleurBleu);-webkit-mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}
.BtnRetour:hover{background:var(--CouleurJaune);}

.BtnNext{color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 50px 0px 10px; display: inline-block;  position: relative; text-decoration: none;  border-radius:5px;}
.BtnNext::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); right: 15px; background: var(--CouleurBleu);-webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}
.BtnNext:hover{background:var(--CouleurJaune);}
.BtnNext2{color:#FFFFFF; font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 50px 0px 10px; display: inline-block;  position: relative; text-decoration: none;  border-radius:5px;}
.BtnNext2::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); right: 15px; background: #FFFFFF;-webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}
.BtnNext2:hover{background:var(--CouleurJaune);}

.Btn2{color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 10px 0px 10px; display: inline-block;  background: var(--CouleurJaune); position: relative; text-decoration: none; border: 1px solid var(--CouleurBleu); border-radius:5px;}
.Btn2:hover{background:#FFFFFF; color:var(--CouleurBleu);}

.Btn3{ max-width: 370px; width: calc(100% - 20px); background: #FFFFFF; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; position: relative; border-radius: 10px; margin: auto; margin-top: 20px; font: 20px/40px 'Roboto', sans-serif; font-weight: 300; text-transform: uppercase; padding: 10px; text-decoration: none; display: block;}
.Btn3:hover{ background:var(--CouleurJaune);}

.BtnIcone{-webkit-appearance: none; -moz-appearance: none; appearance: none; color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 10px 0px 50px; display: inline-block; width: calc(100% - 20px); background: var(--CouleurJaune); border-radius: 5px; border: 0px; position: relative; cursor: pointer;}
.BtnIcone2{-webkit-appearance: none; -moz-appearance: none; appearance: none; color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 10px 0px 50px; display: inline-block; width:auto; background: var(--CouleurJaune); border-radius: 5px; border: 0px; position: relative; cursor: pointer; margin: 10px;}
.BtnIcone3{-webkit-appearance: none; -moz-appearance: none; appearance: none; color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Roboto', sans-serif; padding: 0px 50px 0px 10px; display: inline-block; width:auto; background: var(--CouleurJaune); border-radius: 5px; border: 0px; position: relative; cursor: pointer; margin: 10px;}

.BtnIcone:hover, .BtnIcone2:hover, .BtnIcone3:hover{background: var(--CouleurHover); color:#FFFFFF;}
.BtnIcone:hover::after, .BtnIcone2:hover::after, .BtnIcone3:hover::after{background:#FFFFFF; }
/*
* Icone
*/
.IconeSearch::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeSearch.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSearch.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}
.IconeMail2::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}

.IconeEte2::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeSoleil.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSoleil.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}
.IconeHiver2::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeFlocon.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFlocon.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}
.IconePouce2::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconePouce.svg') no-repeat 50% 50%;  mask: url('../charte/IconePouce.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}

.IconeResa::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconePanier.svg') no-repeat 50% 50%;  mask: url('../charte/IconePanier.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}
.IconeEte::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeSoleil.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSoleil.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}
.IconeHiver::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeFlocon.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFlocon.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}

.IconeNextRight::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; background: var(--CouleurJaune);-webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1; background: var(--CouleurBleu);}

.IconeFamille::after{content: "";-webkit-mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%; width: calc(100% - 20px); height:calc(100% - 20px); z-index: 1; background: var(--CouleurBleu);}

.IconeCentre::after{top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}

.IconeMail::after{content: ""; -webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; width: calc(100% - 20px); height:calc(100% - 20px); z-index: 1; background: var(--CouleurBleu);}

.IconeAnimaux::after{content: ""; -webkit-mask: url('../charte/IconeAnimaux.svg') no-repeat 50% 50%;  mask: url('../charte/IconeAnimaux.svg') no-repeat 50% 50%; width: calc(100% - 20px); height:calc(100% - 20px); z-index: 1; background: var(--CouleurBleu);}
.IconeBalais::after{content: ""; -webkit-mask: url('../charte/IconeBalais.svg') no-repeat 50% 50%;  mask: url('../charte/IconeBalais.svg') no-repeat 50% 50%;  z-index: 1; background: var(--CouleurJaune);}
.IconeDraps::after{content: ""; -webkit-mask: url('../charte/IconeDraps.svg') no-repeat 50% 50%;  mask: url('../charte/IconeDraps.svg') no-repeat 50% 50%;  z-index: 1; background: var(--CouleurJaune);}
.IconePousette::after{content: ""; -webkit-mask: url('../charte/IconePousette.svg') no-repeat 50% 50%;  mask: url('../charte/IconePousette.svg') no-repeat 50% 50%;  z-index: 1; background: var(--CouleurJaune);}

.PetiteIcone{display: inline-block; position: relative; width: 20px; height: 20px;}
.PetiteIcone::after{width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.MoyenneIcone{display: inline-block; position: relative; width: 40px; height: 40px;}
.MoyenneIcone::after{width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.GrandeIcone{display: inline-block; position: relative; width: 60px; height: 60px;}
.GrandeIcone::after{width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/*
* Décoration
*/
.bgTrait{position: relative; z-index: 1; padding:20px;}
.bgTrait::after{content: ""; border-top: 1px solid var(--CouleurJaune); position: absolute; width: 100%; height: 1px; top: 50%; left: 0px; z-index: -1; display: block;}

.RondAngleGauche{position: absolute; height: 40px; width: 40px; padding: 10px; background: #FFFFFF; z-index: 999; display: block; top: 30px; left: -30px; border-radius: 50px;}
@media (max-width: 768px) 
{
	.RondAngleGauche{display: none;}
}

/*
* Formulaires
*/
form.Design1{}
form.Design1 label{float: left; width: 100%; position: relative; font-weight: 700;}
form.Design1 input, form.Design1 select, form.Design1 textarea{border: 1px solid var(--CouleurJaune); text-align: center; font: 14px/20px 'Roboto', sans-serif; border-radius:5px; width: calc(100% - 32px); margin: 10px; padding: 5px; display: inline-block; position: relative;}
form.Design1 textarea{text-align: left;}
form.Design1 select{width: calc(100% - 20px); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;}
form.Design1 .DesignSelect::after{content: ""; background: var(--CouleurBleu);-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; width: 14px; height:14px; top: 50%; transform: translateY(-50%); right: 15px; -webkit-appearance: none; -moz-appearance: none;appearance: none; position: absolute; z-index: -1; }

form.Design1 input[type=number]{width: calc(100% - 132px); float: left;-webkit-appearance: none; -moz-appearance: none; appearance: none; }
a.BtnMoins, a.BtnPlus{display: inline-block; width: 40px; height: 40px; background: var(--CouleurJaune); border-radius:20px; position: relative; float: left;}
a.BtnMoins{margin: 0px 0px 0px 10px;}
a.BtnPlus{margin: 0px 10px 0px 0px;}

a.BtnPlus::after{position: absolute; content: "+"; top: 50%; left: 50%; transform: translate(-50%, -50%);font: 20px/20px 'Roboto', sans-serif;}
a.BtnMoins::after{position: absolute; content: "-"; top: 50%; left: 50%; transform: translate(-50%, -50%);font: 20px/20px 'Roboto', sans-serif;}

a.BtnPlus:hover, a.BtnMoins:hover{background: var(--CouleurHover); color:#FFFFFF;}
a.BtnPlus:hover::after, a.BtnMoins:hover::after{color: #FFFFFF;}

button.BtnEnvoyer{ background: var(--CouleurJaune); border-radius: 5px; width: calc(100% - 24px); height: calc(100% - 24px); text-align: center; border: 0px; margin: 10px; font-size:20px; text-transform: uppercase; cursor: pointer; }
button.BtnEnvoyer::before{content: ""; background: var(--CouleurBleu);-webkit-mask: url('../charte/IconeSend.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSend.svg') no-repeat 50% 50%; width: 60%; height:60%; top: 20%; left:20%; -webkit-appearance: none; -moz-appearance: none;appearance: none; position: absolute; z-index: 1; opacity:0.1; }
button.BtnEnvoyer:hover{background: #FFFFFF;}
/*
* Header
*/
.Header{width: 100%; height: 48px; background: var(--CouleurBleu); position: absolute; top: 0px; left: 0px; z-index: 999; display: block;}

a.HeaderBtnReserve{background: var(--CouleurJaune); width: auto; height: 50px; display: block;position: absolute; top: 54px; right: 10px; border-radius: 10px; color:var(--CouleurBleu); text-transform: uppercase; font-weight: 300; font: 20px/40px 'Roboto', sans-serif; padding: 50px 15px 0px 15px; text-decoration: none; }

.home a.HeaderBtnReserve{background: var(--CouleurJaune); width: auto; height: 50px; display: block;position: absolute; top: 24px; left: 50%; right: initial; transform: translateX(-50%); border-radius: 10px; color:var(--CouleurBleu); text-transform: uppercase; font-weight: 300; font: 20px/40px 'Roboto', sans-serif; padding: 50px 15px 0px 15px; text-decoration: none; }

a.HeaderBtnReserve::after{content: ""; width: 40px; height: 40px; position: absolute; top: 10px; left: calc(50% - 20px);-webkit-mask: url('../charte/IconePanier.svg') no-repeat 50% 50%;  mask: url('../charte/IconePanier.svg') no-repeat 50% 50%; background:var(--CouleurBleu); z-index: 2;}
a.HeaderBtnReserve:hover{background: var(--CouleurHover); color:#FFFFFF;}
a.HeaderBtnReserve:hover::after{background: #FFFFFF;}

@media (max-width: 768px) 
{
	a.HeaderBtnReserve, .home a.HeaderBtnReserve{ font-size: 0px; right: 20px; top: 58px; left: auto; transform: translateX(0%); padding: 0px; width: 50px; height: 50px;}
	a.HeaderBtnReserve::after, .home a.HeaderBtnReserve::after{ top: 5px; left: 5px;}
}

.HeaderContent{width: auto; height: 48px; position: relative;  float: right; display: block;}
.HeaderContent .LienMap, .HeaderContent .LienMail, .HeaderContent .LienTel{font:12px/48px 'Roboto', sans-serif; font-weight: 500; letter-spacing: 1px; color:#FFFFFF; text-decoration: none; text-transform: uppercase; padding: 0px 10px 0px 40px; height: 48px; float: left; border-right: 1px solid var(--CouleurBleuClair); position: relative; position: relative;}
.HeaderContent .LienMap::before{content: ""; position: absolute; top: 12px; left: 8px; width: 24px; height: 24px; background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;}
.HeaderContent .LienMail::before{content: ""; position: absolute; top: 12px; left: 8px; width: 24px; height: 24px; background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; }
.HeaderContent .LienTel::before{content: ""; position: absolute; top: 12px; left: 8px; width: 24px; height: 24px; background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeTel.svg') no-repeat 50% 50%;  mask: url('../charte/IconeTel.svg') no-repeat 50% 50%; }
.HeaderContent .LienReseauFb{height: 48px; width: 48px; float: left; display: block; border-right: 1px solid var(--CouleurBleuClair); position: relative;}
.HeaderContent .LienReseauFb::before{content: ""; position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFb.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFb.svg') no-repeat 50% 50%; }

@media (max-width: 768px) 
{
	.HeaderContent .LienMap, .HeaderContent .LienMail, .HeaderContent .LienTel{font-size: 0; padding: 0px 0px 0px 40px;}
	.LienMap::after, .LienMail::after, .LienTel::after {    content: attr(data-txt);    position: absolute;    top: 120%;    left: 50%;    transform: translateX(-50%);    background: rgba(0, 0, 0, 0.8);    color: #fff;    padding: 4px 8px;    font-size: 14px;    border-radius: 4px;    white-space: nowrap;    opacity: 0;    pointer-events: none;    transition: opacity 0.2s ease;  }

  .LienMap:hover::after, .LienMap:focus::after ,
	.LienMail:hover::after, .LienMail:focus::after ,
	.LienTel:hover::after, .LienTel:focus::after {   opacity: 1;  }
	
}

.HeaderContent .ChoixLangue{ height: 48px; width: 80px; position: relative; display: block; float: left;}
.HeaderContent .ChoixLangue::after{content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: #FFFFFF; -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; z-index: 2;}
.HeaderContent .ChoixLangue:hover::after{transform: rotate(90deg);}

.HeaderContent .ChoixLangue .LangueOn{height: 48px; width: 80px; position: relative; z-index: 10;}
.HeaderContent .ChoixLangue .LangueOn img{ padding: 9px; }

.HeaderContent .ChoixLangue .SelectChoixLangue{display: none; position: absolute; z-index: 1; top: 0px; left: 0px; width: 80px; padding-top: 48px; background: var(--CouleurBleuClair); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: center;}
.HeaderContent .ChoixLangue:hover .SelectChoixLangue{display: block;}

/*
* Diaporama
*/
.diaporama{width: 100%; z-index: 1; position: relative; margin: 48px 0px 0px 0px; height: calc(100% - 148px); display: block; overflow: hidden; min-height: 500px;}
.diaporama .diapo{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; display: none;}
.diaporama .diapo:first-child{ display: block;}
.diaporama .diapo img{width: 100%;  height: 100%;/*position: absolute; z-index:1; top:50%; left: 50%; transform: translate(-50%, -50%);*/
	object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}
.diaporama .Titre{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #0b1b33CC; z-index: 2; padding: 10px; text-align: center}
/*
* Colonne de gauche
*/
.ContentLeft{ width: 400px; height: calc(100% - 148px); position: absolute; top: 48px; left: 0px; z-index: 98; background: linear-gradient(90deg,rgba(11, 27, 51, 1) 0%, rgba(11, 27, 51, 0) 100%);}
.ContentLeft .Logo{width: 220px; position: relative; height: 39%;}
.ContentLeft .Logo img{ width:180px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ContentLeft .Accroche{width: 220px; height: 18%; position: relative; display: block; }
.ContentLeft .Accroche::after{content: ""; display: block; z-index: 1; height: 33%; width: 1px; left: calc(50% - 1px); top: 0px; border-right: 1px solid var(--CouleurJaune); position: absolute;}
.ContentLeft .Accroche::before{content: ""; display: block; z-index: 1; height: 33%; width: 1px; left: calc(50% - 1px); bottom: 0px; border-right: 1px solid var(--CouleurJaune); position: absolute;}
.ContentLeft .Accroche .Phrase{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#FFFFFF; font: 12px/20px 'Roboto', sans-serif; text-align: center; width: 100%;}

.ContentLeft .MenuIcone{width: 220px; height: 43%; position: relative; display: block;}
.ContentLeft .MenuIcone .MenuBulle{ width: 100px; height: 45px; padding-top: 50px; border-radius: 50px; background: var(--CouleurJaune); color:var(--CouleurBleu); text-transform: uppercase; text-decoration: none; font: 16px/35px 'Roboto', sans-serif; position: absolute; top: 20px; left: 60px; text-align: center; padding-bottom: 5px;}
.ContentLeft .MenuIcone .MenuBulle::before{ content: ""; position: absolute; top: 5px; left: calc(50% - 20px); background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeMenu.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMenu.svg') no-repeat 50% 50%; width: 40px; height: 40px;}
.ContentLeft .MenuIcone .MenuBulle:hover{background: var(--CouleurHover); color:#FFFFFF;}
.ContentLeft .MenuIcone .MenuBulle:hover::before{background:#FFFFFF;}

.ContentLeft .MenuIcone::after{content: ""; display: block; position: absolute; z-index: 1; height: calc(100% - 100px); width: 1px; left: calc(50% - 1px); bottom: -40px; border-right: 1px solid var(--CouleurJaune);}

	/* Si ON */	
	.ContentLeft.on{position: fixed; background: var(--CouleurBleu); width: 80px; height: 100%; top: 0px; left: 0px;}
	.ContentLeft.on .Logo{width: 70px; margin-left: 5px;}
	.ContentLeft.on .Logo img{width:100%;}
	.ContentLeft.on .Accroche{width: 80px; font-size: 12px;}
	.ContentLeft.on .MenuIcone{width:80px;}
	.ContentLeft.on .MenuIcone .MenuBulle{width: 70px; height: 35px; padding-top: 30px; left: 5px;font: 16px/35px 'Roboto', sans-serif;}
	.ContentLeft.on .MenuIcone .MenuBulle::before{  width: 30px; height: 30px;left: calc(50% - 15px);}

@media (max-width: 768px) 
{
	.ContentLeft.on.depart{position: relative; top: 48px; left: 0px; z-index: 99;}
	
	.ContentLeft{width: 50%;}
	.ContentLeft .Logo, .ContentLeft .Accroche, .ContentLeft .MenuIcone{width: 110px;}
	.ContentLeft .Logo img{width: 95%;}
	.ContentLeft .Accroche .Phrase{font: 12px/14px 'Roboto', sans-serif; line-height: 14px;}
	.ContentLeft .MenuIcone .MenuBulle{left: 20px; top: 35px; width: 70px; height: 15px; font-size: 0px;}
	.ContentLeft .MenuIcone .MenuBulle::before{top: 15px;}
	
	/* Si ON */	
	.ContentLeft.on{position: fixed; background: var(--CouleurBleu); width: 100%; height: 80px; top: 0px; left: 0px; z-index: 999999999;}
	.ContentLeft.on .Logo{height: 70px; margin: 5px; float: left; width: calc(50% - 10px);}
	.ContentLeft.on .Logo img{width:auto; height: 100%;}
	.ContentLeft.on .Accroche{display: none;}
	.ContentLeft.on .MenuIcone{width:50%; height: 80px; float: left; }
	.ContentLeft.on .MenuIcone .MenuBulle{width: 70px; height: 35px; padding-top: 30px; left: calc(50% - 35px); top:5px;font: 16px/35px 'Roboto', sans-serif;}
	.ContentLeft.on.depart .MenuIcone .MenuBulle{left:0px;}
	.ContentLeft.on .MenuIcone .MenuBulle::before{  width: 30px; height: 30px;left: calc(50% - 15px);}	
}

.Menu{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--CouleurJaune); z-index: -1;  opacity:0; transition : all 0.2s linear;}
.Menu.on{z-index: 9999999999; opacity:1; transition : all 0.2s linear;}
.Menu ul{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.Menu ul li{ min-width: 400px; padding: 0px; margin: 0px; border: 0px; border-bottom: 2px solid var(--CouleurBleu); border-bottom: 2px solid var(--CouleurBleu); position: relative; white-space: nowrap;}
.Menu ul li a{ font: 40px/70px 'Roboto', sans-serif; font-weight: 900; display: block; width: calc(100% - 90px); height: 80px; text-decoration: none; padding-left: 20px;}
.Menu ul li a:hover{background:#FFFFFF;}
.Menu ul li .IconeSSmenu{position: absolute; width: 70px; height: 70px; top: 0px; right: 0px; z-index: 99; display: block; }
.Menu ul li .IconeSSmenu::before{content: ""; position: absolute; top: 10px; left: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; width: 50px; height: 50px;transition : all 0.2s linear;}
.Menu ul li.on .IconeSSmenu::before{transform: rotate(90deg);transition : all 0.2s linear;}
.Menu ul li.on ul.ssmenu{ display: block;  scale:1; transition : all 0.2s linear;}

.Menu ul li ul.ssmenu{ display: none; position: relative; top: inherit !important; left: inherit !important; transform: translate(0,0); scale:0; transition : all 0.2s linear;}

.Menu ul li ul.ssmenu li{border: 0px; min-width: inherit; }
.Menu ul li ul.ssmenu li a{height: 30px; font: 16px/30px 'Roboto', sans-serif; font-weight: 900; display: block; width: 100%; height: 30px; text-decoration: none; padding-left: 50px;}

.Menu .CloseMenu{ position: absolute; top: 0px; right: 0px; background: var(--CouleurBleu); height: 100px; width: 100px;}
.Menu .CloseMenu::before{content: ""; position: absolute; top: 10px; left: 10px; background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeClose.svg') no-repeat 50% 50%;  mask: url('../charte/IconeClose.svg') no-repeat 50% 50%; width: 80px; height: 80px;}
.Menu::before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--CouleurBleu); -webkit-mask: url("../charte/residence-vacances-alpes-roc.svg") no-repeat 50% 50%;  mask: url('../charte/residence-vacances-alpes-roc.svg') no-repeat 50% 50%; width: 400px; height: 400px; opacity: 0.05;}

.Menu::after{content: ""; position: absolute; top: 10px; left: 10px; background: var(--CouleurBleu); -webkit-mask: url("../charte/residence-vacances-alpes-roc.svg") no-repeat 50% 50%;  mask: url('../charte/residence-vacances-alpes-roc.svg') no-repeat 50% 50%; width: 80px; height: 80px;}

@media (max-width: 768px) 
{
	.Menu ul li a{font: 24px/40px 'Roboto', sans-serif; font-weight: 900; height: 40px;}
	.Menu ul li ul.ssmenu li a{font: 14px/25px 'Roboto', sans-serif; font-weight: 900; }
	.Menu ul li .IconeSSmenu{width: 60px; height: 40px;}
	.Menu ul li .IconeSSmenu::before{content: ""; position: absolute; top: 5px; left: 5px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; width: 30px; height: 30px;transition : all 0.2s linear;}
}

/*
* Décalage du menu
*/
.Decalage{width: calc(100% - 80px); margin-left: 80px; position: relative; display: block;}
.Decalage::before{background: var(--CouleurBleu); content: ""; width: 80px; height: 100%; position: absolute; top: 0px; left: -80px; display: block; z-index: -1;}
.Decalage.DecaleTop{margin-top: 48px;}
@media (max-width: 768px) 
{
	.Decalage{width: 100%; margin-left:0px;}
	.Decalage::before{background: var(--CouleurBleu); content: ""; width: 0px; height: 0px; position: absolute; top: 0px; left: 0px; display: none; z-index: -1;}
}
/*
* Conteneur slide appartement et services 
*/
.ConteneurSlide{background: url("/img/chambre-enfant.webp") no-repeat center center; background-size: cover; background-attachment: fixed; float: left; width: 100%;}
/*
* Slide appartements
*/
.SlideAppt{width: 100%; height: 600px; overflow: hidden; position: relative; display: block;}
.SlideAppt .SlideNavigation{position: absolute; z-index: 10; left: 0px; top: 75px; width: 150px; height: 450px; background: var(--CouleurJaune); text-align: center;
clip-path: polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 0 0);}
.SlideAppt .SlideNavigation .NumActif{font: 20px/30px "Roboto", sans-serif; color:var(--CouleurBleu);}
.SlideAppt .SlideNavigation .Total{font: 14px/30px "Roboto", sans-serif; color:var(--CouleurBleu);}
.SlideAppt .SlideNavigation .NextSlide, .SlideAppt .SlideNavigation .PreviousSlide{ width: 60px; height: 60px; display: inline-block; position: relative;}
.SlideAppt .SlideNavigation .PreviousSlide::after{content: ""; position: absolute; top: 50%; left: 50%; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%; width: 50px; height: 50px; transform: translate(-50%, -50%);}
.SlideAppt .SlideNavigation .NextSlide::after{content: ""; position: absolute; top: 50%; left: 50%; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; width: 50px; height: 50px;transform: translate(-50%, -50%);}
.SlideAppt .SlideNavigation .NextSlide:hover::after, .SlideAppt .SlideNavigation .PreviousSlide:hover::after{background: #FFFFFF;}
.SlideAppt .LesSlides{width: auto; margin-left: 100px; z-index: 1; position: relative; display: flex;flex-wrap: nowrap;  transition: transform 0.3s ease-in-out;}
.SlideAppt .LesSlides .UnSlide{ display: flex; width: 450px; height: 450px; flex-shrink: 0; margin: 75px 10px 0px 10px; position: relative;opacity: 0.8; overflow: hidden;}

.SlideAppt .LesSlides .UnSlide img{
	width: 100%;  height: 100%;
	object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */
  display: block;
}

.SlideAppt .LesSlides .UnSlide .NumAppt{position: absolute; top: 0px; left: 50%; z-index: 1; transform: translate(-50%); height: 40px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: var(--CouleurJaune); padding: 0px 10px 0px 10px; font: 16px/40px "Roboto", sans-serif; color:var(--CouleurBleu); white-space:nowrap;}
.SlideAppt .LesSlides .UnSlide .DetailAppt{position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; background: #fecb37CC; height: 40px; color:var(--CouleurBleu);}
.SlideAppt .LesSlides .UnSlide .DetailAppt .NbPers, .SlideAppt .LesSlides .UnSlide .DetailAppt .NbCh, .SlideAppt .LesSlides .UnSlide .DetailAppt .Surface, .SlideAppt .LesSlides .UnSlide .DetailAppt .NbSdb{ width: auto; padding-left: 40px; text-align: left; font: 16px/40px "Roboto", sans-serif; position: relative; float: left; padding-right: 8px;}

.SlideAppt .LesSlides .UnSlide .DetailAppt .NbPers::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%; width: 25px; height: 25px; z-index: 1;}
.SlideAppt .LesSlides .UnSlide .DetailAppt .NbCh::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeLit.svg') no-repeat 50% 50%;  mask: url('../charte/IconeLit.svg') no-repeat 50% 50%; width: 25px; height: 25px; z-index: 1;}
.SlideAppt .LesSlides .UnSlide .DetailAppt .Surface::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%; width: 25px; height: 25px; z-index: 1;}
.SlideAppt .LesSlides .UnSlide .DetailAppt .NbSdb::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeSdb.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSdb.svg') no-repeat 50% 50%; width: 25px; height: 25px; z-index: 1;}

.SlideAppt .LesSlides .UnSlide:hover{opacity: 1;}

@media (max-width: 768px) 
{
	.SlideAppt{width: 100%; height: 375px;}
	.SlideAppt .LesSlides .UnSlide{ width: 350px; height: 350px;}
	
	.SlideAppt .SlideNavigation{position: absolute; z-index: 10; left: 0px; top: 0px; width: 75px; height: 375px; clip-path: polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 0 0);}
	.SlideAppt .SlideNavigation h2{display: none;}
	.SlideAppt .SlideNavigation .NumActif{display: none}
	.SlideAppt .SlideNavigation .Total{display: none;}
	.SlideAppt .SlideNavigation .NextSlide, .SlideAppt .SlideNavigation .PreviousSlide{ width: 40px; height:40px;}
	.SlideAppt .SlideNavigation .PreviousSlide::after{ width: 30px; height: 30px;}
	.SlideAppt .SlideNavigation .NextSlide::after{width: 30px; height: 30px;}
	
.SlideAppt .LesSlides{ margin-left: 50px;}
.SlideAppt .LesSlides .UnSlide{ display: flex; width: 305px; height: 325px; flex-shrink: 0; margin: 25px 10px 0px 10px; position: relative;opacity: 0.8; overflow: hidden;}
	
}

hr.Design1{ width: 200px; border-bottom: 1px solid var(--CouleurJaune); }

.ChoixService{height: 450px; float: left; width: 100%; margin-bottom: 75px; background: var(--CouleurBleu)}
.ChoixService .SelectService{ width: 300px; height: 410px; float: left; padding: 20px 0px 20px 0px;}
.ChoixService .SelectService .ClicService{ padding-left: 30px; width: calc(100% - 30px); background: var(--CouleurBleuClair); margin: 10px 0px 10px 0px; color:#FFFFFF; display: block; text-decoration: none; font: 16px/30px "Roboto", sans-serif; position: relative;}

.ChoixService .SelectService .ClicService.on, .ChoixService .SelectService .ClicService:hover{ background: #FFFFFF; color:var(--CouleurBleu); padding-right: 20px; z-index: 999;transition : all 0.2s linear;}
.ChoixService .SelectService .ClicService.on::after, .ChoixService .SelectService .ClicService:hover::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; width: 25px; height: 25px; z-index: 1;transition : all 0.2s linear;}

.ChoixService .LesServices{ width: calc(100% - 300px); height: 450px; float: left; background: var(--CouleurBleuClair); color:#FFFFFF; position: relative;}
.ChoixService .LesServices .UnService{position: absolute; top: 0px; left: 0px; z-index: 1; opacity: 0; width: 100%; height: 450px; display: block;transition : all 0.2s linear;}
.ChoixService .LesServices .UnService.on{opacity: 1; z-index: 99;transition : all 0.2s linear;}
.ChoixService .LesServices .UnService > .row{height:100%;}
.ChoixService .LesServices .UnService .ServiceContent{max-width:60%; margin:auto; text-align: left !important;}
.ChoixService .LesServices .UnService .icone{position: absolute; top: 0px; left: -30px; width: 60px; height: 60px; z-index: 999; background: var(--CouleurBleuClair); border-radius: 30px;}
.ChoixService .LesServices .UnService .iconePouce::after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  background: #FFFFFF; -webkit-mask: url('../charte/IconePouce.svg') no-repeat 50% 50%;  mask: url('../charte/IconePouce.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}

@media (max-width:768px){
.ChoixService{height:auto;display:flex;flex-direction:column;}
.ChoixService .SelectService{width:100%;height:auto;padding:0px; float: left;}
.ChoixService .LesServices{width:100%;height:200px;; min-height:auto; float: left}
.ChoixService .LesServices .UnService{height:200px;min-height:auto;}
.ChoixService .LesServices .UnService .ServiceContent{max-width:90%;padding:15px;}
.ChoixService .LesServices .UnService .icone{display: none;}
	
.ChoixService .SelectService .ClicService{ padding:5px; width: calc(100% / 3 - 20px); background: var(--CouleurBleuClair); margin: 5px; min-height: 120px; color:#FFFFFF; display: block; text-decoration: none; font: 16px/30px "Roboto", sans-serif; position: relative; float: left; text-align: center;}
.ChoixService .SelectService .ClicService.on, .ChoixService .SelectService .ClicService:hover{padding-bottom: 20px; padding-right: 5px;}
	.ChoixService .SelectService .ClicService.on::after, .ChoixService .SelectService .ClicService:hover::after{ right: initial; top: initial; bottom: 10px; transform: rotate(90deg); transform-origin: center center;}
	
}



/*
* Pour la partie village
*/
.EncartVillage{width: 100%; float: left; height: 450px; background: var(--CouleurBleu); position: relative; display: block;}
.EncartVillage .TitreVillage{padding: 20px; background: #FFFFFF; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}

.EncartVillage .TitreVillage::after{content: ""; position: absolute; top:-60px; left: 50%; transform: translateX(-50%);  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 2;}

.EncartVillage .TitreVillage::before{content: ""; position: absolute; top:-70px; left: 50%; transform: translateX(-50%);  background: #FFFFFF; border-radius: 30px; width: 60px; height: 60px; z-index: 1;}

.EncartVillage .UnVillage{float: left; width: 50%; height: 450px; display: block; position: relative;}
.EncartVillage .UnVillage .ContentVillage{opacity: 0; transition : all 0.2s linear; max-width: 350px; height: auto; z-index: 999; color:#FFFFFF; margin: auto; position: relative; z-index: 9999;}
.EncartVillage .UnVillage:hover .ContentVillage{opacity: 1; transition : all 0.2s linear;}
.EncartVillage .UnVillage:hover::after{content:"";position: absolute; top: 0px; left: 0px;width: 100%; height: 100%; z-index: 99; display: block; background:#0b1b33CC;}

.EncartVillage .UnVillage .ContentVillage.Ete{position: absolute; top: 50%; right:180px; text-align: right; transform: translateY(-50%); }
.EncartVillage .UnVillage .ContentVillage.Hiver{left:180px; position: absolute; top: 50%; transform: translateY(-50%); }

@media (max-width:768px)
{
	.EncartVillage{height: auto;}
	.EncartVillage .TitreVillage{position: relative; width: calc(100% - 40px); float: left; top:iniitial; left:initial; transform:initial;}
	.EncartVillage .UnVillage{width: 100%; height: 250px;}
	.EncartVillage .UnVillage .ContentVillage.Ete, .EncartVillage .UnVillage .ContentVillage.Hiver{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; right: inherit; text-align: left;}
.EncartVillage .UnVillage:focus .ContentVillage{opacity: 1; transition : all 0.2s linear;}
.EncartVillage .UnVillage:focus::after{content:"";position: absolute; top: 0px; left: 0px;width: 100%; height: 100%; z-index: 99; display: block; background:#0b1b33CC;}
}
/*
* Footer
*/

.Coordonnees{color:#FFFFFF; font-size: 14px; padding-left: 20px; display: block; margin: 10px; position: relative;}

.Coordonnees.Adresse::before{content: ""; position: absolute; top:3px; left: 3px;  background: #FFFFFF; -webkit-mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%; width: 14px; height: 14px; z-index: 2;}
.Coordonnees.Email::before{content: ""; position: absolute; top:3px; left: 3px;  background: #FFFFFF; -webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; width: 14px; height: 14px; z-index: 2;}
.Coordonnees.Tel::before{content: ""; position: absolute; top:3px; left: 3px;  background: #FFFFFF; -webkit-mask: url('../charte/IconeTel.svg') no-repeat 50% 50%;  mask: url('../charte/IconeTel.svg') no-repeat 50% 50%; width: 14px; height: 14px; z-index: 2;}

.Coordonnees2{ font-size: 20px; padding-left: 30px; display: block; margin: 10px; position: relative;}

.Coordonnees2.Adresse::before{content: ""; position: absolute; top:3px; left: 3px;  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 2;}
.Coordonnees2.Email::before{content: ""; position: absolute; top:3px; left: 3px;  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 2;}
.Coordonnees2.Tel::before{content: ""; position: absolute; top:3px; left: 3px;  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeTel.svg') no-repeat 50% 50%;  mask: url('../charte/IconeTel.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 2;}

.Reseaux{width: 30px; height: 30px; margin: 10px; display: inline-block; position: relative;}
.Reseaux.Facebook::before{content: ""; position: absolute; top:0px; left: 0px;  background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFacebook.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFacebook.svg') no-repeat 50% 50%; width: 30px; height: 30px; z-index: 2;}

a.LinkFooter{color:#FFFFFF; font-size: 14px; padding-left: 20px; position: relative;}
a.LinkFooter::before{content: ""; position: absolute; top:3px; left: 3px;  background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; width: 14px; height: 14px; z-index: 2;}

a.FooterBtnReserver{ position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: var(--CouleurJaune); padding-right: 70px; padding-left: 50px; color:var(--CouleurBleu); height: 40px; font: 20px/40px 'Roboto', sans-serif; text-transform: uppercase; border-bottom-left-radius: 5px; border-top-left-radius: 5px; text-decoration: none;}
a.FooterBtnReserver:hover{background: #FFFFFF;}
a.FooterBtnReserver::before{content: ""; position: absolute; top:5px; left: 5px;  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconePanier.svg') no-repeat 50% 50%;  mask: url('../charte/IconePanier.svg') no-repeat 50% 50%; width: 30px; height: 30px; z-index: 2;}

@media (max-width:768px)
{	
	a.FooterBtnReserver{ position: relative; right: initial; top: initial; transform: initial; background: var(--CouleurJaune); padding-right: 10px; padding-left: 50px; color:var(--CouleurBleu); height: 40px; font: 20px/40px 'Roboto', sans-serif; text-transform: uppercase; border-radius: 5px; text-decoration: none; float: left; display:block;}
}

/*
* Fil d'Ariane
*/
.FilAriane{display: block; padding: 10px; background: var(--CouleurBleuGris); float: left; width: calc(100% - 20px);}
.FilAriane nav{display: block;}
.FilAriane nav ol{ display: block;}
.FilAriane nav ol li{ padding-right: 20px; color:var(--CouleurBleu); display: inline-block; float: left;}
.FilAriane nav ol li::before{content: ">"; padding: 0px 5px 0px 5px; }
.FilAriane nav ol li a{}

/*
* Formulaire de recherche page listing des appartements
*/
form.Search{background: var(--CouleurJaune); border-radius:5px; height: 48px; float: left; width: calc(100% - 20px); padding: 5px 10px 5px 10px; text-align: center;}
form.Search .ContentForm{margin: auto; display: inline-block;}
form.Search label{float: left; position: relative; font-weight: 700; line-height: 48px; z-index: 1;}
form.Search input, form.Search select{border: 1px solid var(--CouleurBleu); text-align: center; font: 14px/20px 'Roboto', sans-serif; border-radius:5px; width: 50px; margin: 10px; padding: 5px; display: inline-block; position: relative; background: transparent;}
form.Search select{width: 100px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;}
form.Search .DesignSelect::after{content: ""; background: var(--CouleurBleu);-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%; width: 14px; height:14px; top: 50%; transform: translateY(-50%); right: 15px; -webkit-appearance: none; -moz-appearance: none;appearance: none; position: absolute; z-index: -1; }

form.Search input[type=number]{width:50px; float: left;-webkit-appearance: none; -moz-appearance: none; appearance: none; }
form.Search a.BtnMoins, form.Search a.BtnPlus{display: inline-block; width: 30px; height: 30px; background: #FFFFFF; border-radius:20px; position: relative; float: left;}
form.Search a.BtnMoins{margin: 10px 0px 0px 10px;}
form.Search a.BtnPlus{margin: 10px 10px 0px 0px;}

form.Search a.BtnPlus::after{position: absolute; content: "+"; top: 50%; left: 50%; transform: translate(-50%, -50%);font: 20px/20px 'Roboto', sans-serif;}
form.Search a.BtnMoins::after{position: absolute; content: "-"; top: 50%; left: 50%; transform: translate(-50%, -50%);font: 20px/20px 'Roboto', sans-serif;}

form.Search .separation{ height:30px; margin: 9px 18px 9px 18px; border-left: 1px solid var(--CouleurBleu); display: inline-block; float:left;}

form.Search button.BtnSearch{height: 48px; width: 48px; display: inline-block; position: relative; border: 0px; background:none;appearance:none; cursor: pointer;}
form.Search button.BtnSearch::before{content: ""; position: absolute; top:9px; left: 9px;  background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeSearch.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSearch.svg') no-repeat 50% 50%; width: 30px; height: 30px; z-index: 2;}

@media (max-width: 768px) 
{
	form.Search{background: var(--CouleurJaune); border-radius:5px; height: auto; float: left; width: calc(100% - 20px); padding: 5px 10px 5px 10px; text-align: center;}
	form.Search label{width: 50%; text-align: center;}
	form.Search .separation{height: 1px; width: calc(100% - 36px); border-left: 0px;border-bottom: 1px solid var(--CouleurBleu); float: left; }
	form.Search select{width:calc(100% - 25px);}
}
/*
* Listing appartements
*/
@media (max-width: 768px) 
{
	.result{float: left; width: 100%}
}
.ListingAppt{display: flex;  flex-wrap: wrap;  /* permet de passer à la ligne */justify-content: center;}
.UnAppt{ overflow: hidden; width: 380px; height: 380px; display: block; border-radius: 5px;  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; margin: 10px;border: 1px solid rgba(0, 0, 0, 0.16);}
.UnAppt:hover{border: 1px solid var(--CouleurJaune); background:var(--CouleurJaune);}

.UnAppt .AppartImage{ width: 400px; height: 300px; float: left; display: block; overflow: hidden; flex: none;}
.UnAppt .AppartImage img {  width: 100%;  height: 100%;
  object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */
  display: block;
}
.UnAppt .AppartInfo{ width: 100%; height: 80px; float: left; overflow: hidden; display: block; flex: none; float: left;}
.UnAppt .AppartInfo .UneInfo{ display: block;  text-align: center; padding-top: 50px; line-height: 30px; position: relative; font-weight: 700; width: calc(100% / 3); float: left;}

.UnAppt .AppartInfo .UneInfo.NbPers::before{content: ""; position: absolute; top: 5px; left: calc(50% - 20px); background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}
.UnAppt .AppartInfo .UneInfo.NbCh::before{content: ""; position: absolute; top: 5px; left: calc(50% - 20px); background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeLit.svg') no-repeat 50% 50%;  mask: url('../charte/IconeLit.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}
.UnAppt .AppartInfo .UneInfo.Surface::before{content: ""; position: absolute; top: 5px; left: calc(50% - 20px); background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}

@media (max-width: 768px) 
{
	.UnAppt{ overflow: hidden; width: calc(100% - 20px); height: 320px; }
	.UnAppt .AppartImage{width:100%; height: 260px;}
	.UnAppt .AppartInfo{height: 60px;}
	.UnAppt .AppartInfo .UneInfo{padding-top: 30px;}
	.UnAppt .AppartInfo .UneInfo.NbPers::before, 
	.UnAppt .AppartInfo .UneInfo.NbCh::before, 
	.UnAppt .AppartInfo .UneInfo.Surface::before{ width: 24px; height: 24px;left: calc(50% - 12px); top: 3px;}
}

.CaseIcone{ display: inline-flex;  text-align: center; padding-left: 50px; padding-right: 20px; line-height: 50px; font-size: 20px; font-weight: 500; position: relative; font-weight: 700; width: auto; }

.CaseIcone.NbPers::before{content: ""; position: absolute; top: 5px; left: 5px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}
.CaseIcone.NbCh::before{content: ""; position: absolute; top: 5px; left: 5px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeLit.svg') no-repeat 50% 50%;  mask: url('../charte/IconeLit.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}
.CaseIcone.Surface::before{content: ""; position: absolute; top: 5px; left:5px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSurface.svg') no-repeat 50% 50%; width: 40px; height: 40px; z-index: 1;}

@media (max-width: 768px) 
{
	.CaseIcone{ display: inline-flex;  text-align: center; padding-left: 40px; padding-right: 15px; line-height: 50px; font-size: 18px; font-weight: 500; position: relative; font-weight: 700; width: auto; }
	.CaseIcone.NbPers::before, 
	.CaseIcone.NbCh::before,
	.CaseIcone.Surface::before{height: 30px; width: 30px; }
}
/*
* Galerie photo
*/
.photo-gallery {  display: flex;  gap: 1rem;   margin: auto; height: 600px; position: relative;}

.main-photo {  flex: 1; /* prend 50% de l’espace */  height: 100%;}

.main-photo img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 8px;}

.grid-4-photos {  flex: 1;  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr;  gap: 0.5rem; height: 100%;}
.grid-4-photos div {  width: 100%;  overflow: hidden;  border-radius: 6px;}
.grid-4-photos img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 6px;}

.photo-gallery a.SelectGalerie{background: var(--CouleurBleu); position: relative; object-fit: cover; display: block; height: 100%;border-radius: 6px;}
.photo-gallery a.SelectGalerie:hover img{ opacity: 0.5;}
.photo-gallery a.SelectGalerie:hover::before{content: ""; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); background: var(--CouleurJaune); -webkit-mask: url('../charte/IconePhoto.svg') no-repeat 50% 50%;  mask: url('../charte/IconePhoto.svg') no-repeat 50% 50%; width: 60px; height: 60px; z-index: 1;}


@media (max-width: 1024px) {
  .photo-gallery {    flex-direction: column;    height: auto;  }

  .main-photo {    height: 300px;  }

  .grid-4-photos {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    height: auto;
  }

  .grid-4-photos div {
    height: 150px;
  }
}

@media (max-width: 768px) {
  .grid-4-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4-photos div {
    height: 120px;
  }
}

.BtnGalerie{ position: absolute; bottom: -20px; left: 87%; transform: translateX(-50%); z-index: 1; height: 40px; background: var(--CouleurJaune); border-radius: 5px; padding: 0px 10px 0px 40px; color:var(--CouleurBleu); line-height: 40px; font-weight: 700;  }
.BtnGalerie::before{content: ""; position: absolute; top: 10px; left:10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconePhoto.svg') no-repeat 50% 50%;  mask: url('../charte/IconePhoto.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1;}

@media (max-width: 768px) {
	.BtnGalerie{left: 50%; }
}


.PopGalerie{position: fixed; top: 0px; left: 0px; z-index: 999999999; background: rgba(0,0,0,0.80); width: 100%; height: 100%; display: none;}
.CloseGalerie{position: fixed; z-index: 9999; top: 0px; right: 0px; height: 80px; width:80px; background: var(--CouleurBleu);}
.CloseGalerie::before{content: ""; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeClose.svg') no-repeat 50% 50%;  mask: url('../charte/IconeClose.svg') no-repeat 50% 50%; width: 50px; height: 50px; z-index: 1;}
.NextGalerie{position: fixed; top: calc(50% - 40px); right: 0px; height: 80px; width:80px; background: var(--CouleurBleu); z-index: 9999;}
.NextGalerie::before{content: ""; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2.svg') no-repeat 50% 50%; width: 50px; height: 50px; z-index: 1;}
.PreviousGalerie{position: fixed; top: calc(50% - 40px); left: 0px; height: 80px; width:80px; background: var(--CouleurBleu); z-index: 9999;}
.PreviousGalerie::before{content: ""; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); background: var(--CouleurJaune); -webkit-mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche2-bis.svg') no-repeat 50% 50%; width: 50px; height: 50px; z-index: 1;}

.PopGalerie ul{ width: calc(100% - 160px); height: calc(100% - 160px); position: absolute; top: 80px; left: 80px; display: block;}
.PopGalerie ul li{display: none;position: absolute;  top: 0;  left: 0;  opacity: 0;  transition: transform 0.5s ease, opacity 0.5s ease;  width: 100%;  height: 100%;  overflow: hidden; display: block;}
.PopGalerie ul li.on{display: block; opacity: 1;}
.PopGalerie ul li img{width: 80%;  height: 80%; position: absolute; top: 10%; left: 10%; object-fit: contain;   display: block; object-position: center center;}
.slide-in-right {
  transform: translateX(100%);
  animation: slideInFromRight 0.5s forwards;
}
.slide-in-left {
  transform: translateX(-100%);
  animation: slideInFromLeft 0.5s forwards;
}
.slide-out-left {
  animation: slideOutToLeft 0.5s forwards;
}
.slide-out-right {
  animation: slideOutToRight 0.5s forwards;
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.UnContentTxt{ margin: auto; max-width: 600px; border-bottom: 1px solid var(--CouleurJaune); padding: 10px;text-align: left; }

/*
* Bons plans
*/
.BonPlan{ max-width: 350px; background: var(--CouleurJaune); padding: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; position: relative; border-radius: 10px; margin: auto; margin-top: 20px;}
.BonPlan .UnBonPlan{text-align: left; padding: 10px 10px 10px 50px; line-height: 30px; font: 18px/30px 'Roboto', sans-serif; position: relative;}
.BonPlan .UnBonPlan::before{content: ""; position: absolute; top: 10px; left:10px; background: var(--CouleurBleu); -webkit-mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%;  mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%; width: 30px; height: 30px; z-index: 1;}

/*
* Form resa
*/
.ResaSearch{ max-width: 350px; background: #FFFFFF; padding: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; position: relative; border-radius: 10px; margin: auto; margin-top: 20px;}

/*
* Google
*/
.GoogleMap{ max-width: 370px; background: #FFFFFF; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; position: relative; border-radius: 10px; margin: auto; margin-top: 20px; height: 350px;}

/*
* Liste
*/

ul.design1{margin: 10px 0px 10px 5px; font:14px/22px 'Roboto', sans-serif; font-weight:300; font-weight: 300;}
ul.design1 li::before{content:"•"; padding:0px 5px 0px 0px; color:var(--CouleurBleu); font:14px/24px 'Roboto', sans-serif; font-weight: 900;}
ul.design2{margin: 10px 0px 10px 5px; font:14px/22px 'Roboto', sans-serif; font-weight:300; font-weight: 300;}
ul.design2 li::before{content:"•"; padding:0px 5px 0px 0px; color:#FFFFFF; font:14px/24px 'Roboto', sans-serif; font-weight: 900;}


picture.cover img{width: 100%;  height: 100%; object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}

/*
* Page Résidence 
*/
.Icone{display: inline-block; width: 60px; height: 60px; padding: 10px; border: 4px solid var(--CouleurBleu); border-radius: 120px;}
.Icone .UneIcone{fill: var(--CouleurBleu);}
.IconeTxt{ width: calc(100% - 20px); text-align: center; font-weight: 500; padding: 5px 10px 5px 10px;}
.Icone:hover{border: 4px solid var(--CouleurJaune);}
.Icone:hover .UneIcone{fill: var(--CouleurJaune);}

/*
* case Résidence
*/
.CaseAppt{height:300px; width:calc(100% - 24px); margin: 12px; display: block; position: relative;}
.CaseAppt img{z-index: 1;width: 100%;  height: 100%; object-fit: cover; object-position: center;}

.CaseAppt .NbPers{position: absolute; z-index: 3; line-height: 30px;top: calc(50% - 34px); left: -15px; padding-left: 40px; padding-right: 10px; background:rgba(255,255,255,0.80); font-weight: 700; font-size: 20px;}
.CaseAppt .NbPers::after{content: ""; z-index: 3;  position: absolute; top: 4px; left:4px; background: #FFFFFF; -webkit-mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFamille.svg') no-repeat 50% 50%; width: 20px; height: 22px;}

.CaseAppt .TypeAppt{position: absolute; z-index: 3; line-height: 30px;top: calc(50% + 4px); left: -15px; padding-left: 40px; background:rgba(255,255,255,0.80);padding-right: 10px; font-weight: 700; font-size: 20px;}
.CaseAppt .TypeAppt::after{content: ""; z-index: 3;  position: absolute; top: 4px; left:4px; background: #FFFFFF; -webkit-mask: url('../charte/IconeHome.svg') no-repeat 50% 50%;  mask: url('../charte/IconeHome.svg') no-repeat 50% 50%; width: 20px; height: 20px;}

.CaseAppt .NbPers::before, .CaseAppt .TypeAppt::before{position: absolute; top: 0px; left: 0px; z-index: 2; width: 30px; height: 30px; border-radius: 15px; background: var(--CouleurBleu); content: "";}

/*
* LEs Avis
*/
.reviews {box-sizing:border-box !important;}

.reviews {display:flex;flex-wrap:nowrap;align-items:stretch;width:calc(100% - 30px);overflow-x:auto;padding:15px 15px;}

.review {flex:4;display:flex;align-items:flex-start;gap:12px;border:1px solid #e6e6e6;border-radius:8px;padding:10px 14px; margin: 4px; background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04); cursor: pointer;}

.review-avatar {width:40px;height:40px;border-radius:50%;background:#f2f2f2;overflow:hidden;flex:none;}

.review-content {flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}

.review-header {align-items:center;gap:8px;min-width:0;}

.review-author {font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.review-meta {display:flex;align-items:center;gap:6px;font-size:12px;color:#666;white-space:nowrap;flex:none;}

.review-text {font-size:14px;line-height:1.4;color:#222;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height: 3em;transition: max-height 0.4s ease;}
.review-text.expanded {-webkit-line-clamp:unset;white-space:normal;max-height: 500px;}

.review-toggle {background:none;border:none;color:#0073e6;padding:0;margin-top:4px;font-size:13px;cursor:pointer;align-self:flex-start;}

.stars {--star-size:14px;--star-color:#ddd;--star-fill:#f5a623;--rating:0;position:relative;display:inline-block;inline-size:calc(var(--star-size) * 5);block-size:var(--star-size);background:linear-gradient(90deg,var(--star-color) 0 0) no-repeat;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><symbol id="s"><polygon points="10,1 12.9,7.1 19.6,7.6 14.1,11.9 15.9,18.4 10,14.7 4.1,18.4 5.9,11.9 0.4,7.6 7.1,7.1"/></symbol></defs><use href="%23s" x="0"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></svg>') center/100% 100%;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><symbol id="s"><polygon points="10,1 12.9,7.1 19.6,7.6 14.1,11.9 15.9,18.4 10,14.7 4.1,18.4 5.9,11.9 0.4,7.6 7.1,7.1"/></symbol></defs><use href="%23s" x="0"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></svg>') center/100% 100%;}

.stars::before {content:"";position:absolute;inset:0;inline-size:calc(var(--rating)/5*100%);background:var(--star-fill);}

@media (max-width:600px) {.reviews {flex-wrap:wrap;padding:0;}.review {flex:1 1 100%;}}


.pop_cookie{position: fixed; bottom: 0px; left: 0px; width: 100%; background: rgba(255,255,255,0.80); z-index: 999999999; border-top: 2px solid #73a7c6; height: 50px; line-height: 50px;}