/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');

:root{
  --navy:#191f31;
  --cream:#f5f2ea;
  --paper:#fbfaf6;
  --gold:#bd9d5a;
	--goldhover:#dcb057;
  --ink:#1c2430;
  --white:#fff;
  --line:rgba(12,26,42,.15);
  --serif:"Libre Bodoni", serif;
  --sans:"Montserrat", Arial, sans-serif;
  --max:1280px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{appearance: none; -webkit-appearance: none; border:none; background:none;}
/*.section{width:min(calc(100% - 48px),var(--max));margin:auto;padding:110px 0}*/
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 10px;font-weight:600}
.eyebrow.gold{color:var(--gold)}
h1,h2, h3{font-family:var(--serif);font-weight:600;line-height:.92;margin:0}
h2{font-size:clamp(46px,5vw,74px);color:var(--navy)}
section{float: left; width: 100%;}
main{overflow-x: hidden;}
/*
* Structure
*/

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

.CaseLimite{padding: 10px; margin: auto; max-width: 600px;}
.CaseDesign1{ background: rgba(255,255,255,0.75); border-radius: 5px; padding: 10px;}
.CaseDesign2{ background: rgba(255,255,255,1); border-radius: 5px; padding: 10px; margin: 20px;}

.CaseRonde{height: 34px; width: 34px; border-radius: 25px; background: var(--gold); color:#FFFFFF; font-size: 20px; line-height: 34px; text-align: center; display: inline-block; margin-right: 20px;}

img.BigImg{width: 100%;  height: 100%;	object-fit: cover; object-position: center; display: block; min-height: 650px;}
@media screen and (max-width: 1200px) 
{
	img.BigImg{ min-height: 350px;}
}
.CentreVertical{  display: flex !important;  justify-content: center;  align-items: center; }
.CentreVertical2{  display: flex !important;  align-items: center; }
.CentreVertical3{  display: flex !important;  justify-content: right;  align-items: center; }

/*
* HEADER
*/
header.SiteHeader{position: absolute; top: 80px; height: 80px; width: 100%; left: 0px; z-index: 9999; background: #FFFFFF;transition : all 0.2s linear;}
header.SiteHeader .Logo{position: absolute; top: -40px; left: 0px; margin-left: 15px; width: 215px; height: 160px;}
header.SiteHeader .Logo img{height: 152px; z-index: 99; margin: 4px;}
header.SiteHeader .Logo::after{position: absolute; top: -2px; height: 164px; width: 164px; left: -2px; content:""; background: #FFFFFF; z-index: -1; border-radius: 100px; }
@media screen and (max-width: 1200px) 
{
	header.SiteHeader .Logo{position: absolute; top: -20px; left: 0px; margin-left: 15px; width: 190px; height: 140px; z-index: 9999;}
	header.SiteHeader .Logo img{height: 132px;}
	header.SiteHeader .Logo::after{height: 144px; width: 144px;}
}

header.SiteHeader .Menu{ height: 80px; display: inline-block; margin-left: 190px;}
header.SiteHeader .Menu ul{ height: 80px; float: left; margin: 0px;}
header.SiteHeader .Menu ul li{list-style: none; float: left; padding: 0px 0px 0px 5px;}
header.SiteHeader .Menu ul li::after{ content: "•"; color:var(--gold); margin: 0px 5px 0px 10px; display: inline-block;}
header.SiteHeader .Menu ul li a{font: 16px / 80px var(--serif);font-weight:400; line-height: 80px;transition : all 0.2s linear; color:var(--navy); position: relative; line-height: 80px; display: inline-block;}
header.SiteHeader .Menu ul li a::after{ width: 0px; opacity: 0; position: absolute; top: 60px; left: 0px; height: 5px; border-radius: 10px; background: var(--gold); content: ""; transition : all 0.2s linear;}
header.SiteHeader .Menu ul li a:hover::after, header.SiteHeader .Menu ul li a.on::after{ width: 100%; opacity: 1; position: absolute; top: 60px; left: 0px; height: 5px; border-radius: 10px; background: var(--gold); content: ""; transition : all 0.2s linear;}

header.SiteHeader .Reseau{height: 50px; float: right; margin-top: 19px;}

header.SiteHeader.fixe{position: fixed; top: 0px;transition : all 0.2s linear; border-bottom: 1px solid var(--gold);}
header.SiteHeader.fixe .Logo{top: 0px; height: 80px;}
header.SiteHeader.fixe .Logo::after{display: none;}
header.SiteHeader.fixe .Logo img{height: 72px;}

.MenuIcone{display: none; width: 80px; position: absolute; top: 40px; line-height: 40px; text-align: center; right: 0px; width: calc(100% - 200px); text-transform: uppercase;}

.MenuBulle { position: relative;  display: inline-flex; align-items: center; padding-left: 35px; text-decoration: none;  color: #222; }

/* Les deux barres */
.MenuBulle::before, .MenuBulle::after {content: ""; position: absolute; left: 0; width: 22px; height: 2px; background-color: var(--gold); border-radius: 2px;  transition: top 0.3s ease, transform 0.3s ease; }

/* Barre du haut */
.MenuBulle::before { top: calc(50% - 5px); }

/* Barre du bas */
.MenuBulle::after { top: calc(50% + 5px); }

/* Transformation en croix */
.MenuIcone.on .MenuBulle::before { top: 50%;  transform: rotate(45deg); }
.MenuIcone.on .MenuBulle::after { top: 50%; transform: rotate(-45deg); }


@media screen and (max-width: 1200px) 
{
	header.SiteHeader .Menu{display: none;transition : all 0.2s linear; width: 100%;  text-align: center;}
	.MenuIcone{display: block; text-align: center;}
	header.SiteHeader .Reseau{height: 50px; float: right; margin-top: 5px;}
	
	header.SiteHeader .Menu.on{display: block !important;  transition : all 0.2s linear; position: fixed; left: 0px; width: 100%; height: calc(100% - 180px); top: 160px; background: #FFFFFF; z-index: 9998; margin: 0px;; padding-top: 20px;}
	header.SiteHeader.fixe .Menu.on{transition : all 0.2s linear; height: calc(100% - 100px); top: 80px;}
	
	header.SiteHeader .Menu ul{ height: 100%; padding: 0px; margin: 0px; width: 100%; height: auto; float: left; display: block; }
	header.SiteHeader .Menu ul li{ margin:0px; padding: 0px !important; width: 100%; height: 40px; display: block; float: left; position: relative;}
	header.SiteHeader .Menu ul li::after{content: ""; position: absolute; top: 40px; height: 1px; background: var(--gold); width: 80px; left: calc(50% - 40px); z-index: 1}
	header.SiteHeader .Menu ul li::after{ content: ""; margin: 0px;}
	header.SiteHeader .Menu ul li a{font: 16px/40px var(--serif) !important; font-weight:400; line-height: 40px !important;transition : all 0.2s linear; color:var(--navy); display: block; text-align: center; height: 40px; width: 100%; display: block; padding: 0px; margin: 0px;}
	header.SiteHeader .Menu ul li a::after{ display:none;}
	
}
@media screen and (max-width: 1400px) 
{
	header.SiteHeader .Menu ul li{ padding: 0px 0px 0px 2px;}
	header.SiteHeader .Menu ul li a{font: 14px / 80px var(--serif);}
	header.SiteHeader .Menu ul li::after{ margin: 0px 2px 0px 4px;}
}

/*
* FOOTER
*/
.site-footer{background:var(--navy);color:#fff;padding:18px 30px}
.footer-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.footer-inner img{width:50px;filter:brightness(0) invert(1)}
.footer-inner>div:last-child{text-align:right}
.footer-inner a{color:rgba(255,255,255,.75)}

/*
* LISTE
*/

ul.design1{margin: 10px 0px 10px 5px; font:14px/22px 'Roboto', sans-serif; font-weight:300; font-weight: 300; list-style: none; padding-left: 10px;}
ul.design1 li::before{content:""; width: 20px; height: 20px; -webkit-mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%;  mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%; display: inline-block; line-height: 24px; z-index: 1; background: var(--gold); margin-right:10px;}


/*
* ICONE
*/

.Icone{width: 40px; height: 40px; border: 1px solid var(--gold); line-height: 50px; display: inline-block; position: relative; margin-right: 5px; border-radius: 30px;}

.Icone.Fb::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconeFB.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFB.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Mail::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconeMail.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMail.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Resa::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconeCalendrier.svg') no-repeat 50% 50%;  mask: url('../charte/IconeCalendrier.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Tel::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconeTel.svg') no-repeat 50% 50%;  mask: url('../charte/IconeTel.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Map::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconeMap.svg') no-repeat 50% 50%;  mask: url('../charte/IconeMap.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.PMR::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconePMR.svg') no-repeat 50% 50%;  mask: url('../charte/IconePMR.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Pers::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url('../charte/IconePers.svg') no-repeat 50% 50%;  mask: url('../charte/IconePers.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Chambre::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSejourner.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSejourner.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Champagne::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeReunir.svg") no-repeat 50% 50%;  mask: url('../charte/IconeReunir.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Traiteur::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSavourer.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSavourer.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Mariage::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeMariage.svg") no-repeat 50% 50%;  mask: url('../charte/IconeMariage.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Wifi::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeWifi.svg") no-repeat 50% 50%;  mask: url('../charte/IconeWifi.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Cloche::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeCloche.svg") no-repeat 50% 50%;  mask: url('../charte/IconeCloche.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Croissant::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeCroissant.svg") no-repeat 50% 50%;  mask: url('../charte/IconeCroissant.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Valise::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeValise.svg") no-repeat 50% 50%;  mask: url('../charte/IconeValise.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Montagne::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeMontagne2.svg") no-repeat 50% 50%;  mask: url('../charte/IconeMontagne2.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.SDB::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSDB.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSDB.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.TV::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeTV.svg") no-repeat 50% 50%;  mask: url('../charte/IconeTV.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.SecheCheveux::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSecheCheveux.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSecheCheveux.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Nature::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeNature.svg") no-repeat 50% 50%;  mask: url('../charte/IconeNature.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Groupe::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeGroupe.svg") no-repeat 50% 50%;  mask: url('../charte/IconeGroupe.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Restaurant::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeRestaurant.svg") no-repeat 50% 50%;  mask: url('../charte/IconeRestaurant.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Sac::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSac.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSac.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Calendrier::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeCalendrier.svg") no-repeat 50% 50%;  mask: url('../charte/IconeCalendrier.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Sapin::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSapin.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSapin.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Coeur::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeCoeur.svg") no-repeat 50% 50%;  mask: url('../charte/IconeCoeur.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Jumelle::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeJumelle.svg") no-repeat 50% 50%;  mask: url('../charte/IconeJumelle.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Hiver::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeHiver.svg") no-repeat 50% 50%;  mask: url('../charte/IconeHiver.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Ete::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeEte.svg") no-repeat 50% 50%;  mask: url('../charte/IconeEte.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Rando::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeRando.svg") no-repeat 50% 50%;  mask: url('../charte/IconeRando.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Home::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeHome.svg") no-repeat 50% 50%;  mask: url('../charte/IconeHome.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Skieur::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeSkieur.svg") no-repeat 50% 50%;  mask: url('../charte/IconeSkieur.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Horloge::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeHorloge.svg") no-repeat 50% 50%;  mask: url('../charte/IconeHorloge.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Voiture::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeVoiture.svg") no-repeat 50% 50%;  mask: url('../charte/IconeVoiture.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}
.Icone.Reserver::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; ;-webkit-mask: url("../charte/IconeReserver.svg") no-repeat 50% 50%;  mask: url('../charte/IconeReserver.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold);}

.Icone.Small{width:30px; height: 30px;}
.Icone.Small::before{width: 20px; height: 20px;}

.Icone.Big{width:60px; height: 60px;}
.Icone.Big::before{width: 40px; height: 40px;}

.Icone.LangueFR::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; background: url('../charte/IconeFR.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}

.Icone.LangueUK::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); left: 50%; background: url('../charte/IconeUK.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}

.Icone:hover{background: var(--goldhover);transition : all 0.2s linear;}
.Icone:hover::before{background:var(--navy);transition : all 0.2s linear;}
.Icone.LangueFR:hover::before{background: url('../charte/IconeFR.svg') no-repeat 50% 50%;transition : all 0.2s linear;}
.Icone.LangueUK:hover::before{background: url('../charte/IconeUK.svg') no-repeat 50% 50%;transition : all 0.2s linear;}
@media screen and (max-width: 1200px) 
{
	.Icone{width:30px; height: 30px;}
	.Icone::before{width: 20px; height: 20px;}
}
/*
* HERO
*/
.hero, .hero2{height:min(780px,100vh);min-height:610px;position:relative;overflow:hidden;background:var(--navy);}
.hero-slide, .hero-slide2{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity 1s ease,transform 7s ease}
.hero-slide img, .hero-slide2 img{	width: 100%;  height: 100%;	object-fit: cover; object-position: center; display: block;}
.hero-slide.is-active, .hero-slide2.is-active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,17,31,.82) 0%,rgba(4,17,31,.38) 45%,rgba(4,17,31,.05) 80%),linear-gradient(0deg,rgba(4,17,31,.38),transparent 45%); z-index: 9997;}
.hero-content{position:absolute;left:max(6vw,55px);top:50%;transform:translateY(-30%);color:#fff;max-width:640px; z-index: 9998;}
.hero-content h1{font-size:clamp(38px,1.8vw,65px);margin-bottom:22px}
.hero-content h1 em{color:#fff;font-style:normal}
.hero-copy{font-size:16px;max-width:450px;margin:0 0 26px;color:rgba(255,255,255,.86)}
.hero-dots{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:9998;}
.dot{border:0;background:#fff;width:8px;height:8px;border-radius:50%;padding:0;opacity:.8;cursor:pointer}
.dot.is-active{width:31px;border-radius:10px;background:var(--gold)}
.hero-scroll{position:absolute;right:28px;bottom:32px;color:#fff;font-size:9px;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;z-index:3}
.hero-scroll span{font-size:18px;margin-top:10px}


/*
* Case des activités
*/
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream);border-bottom:1px solid var(--line)}
.feature-strip a{padding:90px 25px 20px 25px ;text-align:center;border-right:1px solid var(--line);transition:.25s; position: relative;}


.ListingCase3{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream);border-bottom:1px solid var(--line)}
.ListingCase3 div{padding:20px 25px 20px 25px ;text-align:center;border-right:1px solid var(--line);transition:.25s; position: relative;}

@media screen and (max-width: 900px) 
{
	.feature-strip{grid-template-columns:repeat(2,1fr);}
	.ListingCase3{grid-template-columns:repeat(2,1fr);}
}

.feature-strip a.CaseSejourner::before{content: ""; top: 20px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%); left: 50%; -webkit-mask: url('../charte/IconeSejourner.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSejourner.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold); }
.feature-strip a.CaseReunir::before{content: ""; top: 20px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%); left: 50%; -webkit-mask: url('../charte/IconeReunir.svg') no-repeat 50% 50%;  mask: url('../charte/IconeReunir.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold); }
.feature-strip a.CaseSavourer::before{content: ""; top: 20px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%); left: 50%; -webkit-mask: url('../charte/IconeSavourer.svg') no-repeat 50% 50%;  mask: url('../charte/IconeSavourer.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold); }
.feature-strip a.CaseDeguster::before{content: ""; top: 20px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%); left: 50%; -webkit-mask: url('../charte/IconeDeguster.svg') no-repeat 50% 50%;  mask: url('../charte/IconeDeguster.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute; background: var(--gold); }
.feature-strip a:last-child{border:0}
.feature-strip a:hover{background:#fff}
.feature-strip strong{display:block;font-family:var(--serif);font-size:17px;color:var(--navy);margin-bottom:5px}
.feature-strip span{font-size:9px;line-height:1.55;color:#5c6066}
.feature-strip h2{font-size:20px; text-transform: uppercase; font-weight: 400;}


.BlocHeroPage{}
.BlocHeroPage .ContentHeroPage{padding-top: 200px;}
/*
* Bloc Card
*/
.cards{padding-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px; padding: 20px; background: var(--cream);}

@media screen and (max-width: 900px) 
{
	.cards{grid-template-columns:repeat(1,1fr);}
}
.visual-card{height:385px;position:relative;overflow:hidden;background:var(--navy);color:#fff}
.visual-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.visual-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,15,27,.86),transparent 62%);}
.visual-card:hover img{transform:scale(1.06)}

.visual-card .ContentCard{position:absolute;z-index:2;left:28px;right:25px;bottom:25px; color:#FFFFFF;}
.visual-card .ContentCard h3{color:#FFFFFF;}
.visual-card .ContentCard p{display: none;}
.visual-card:hover .ContentCard p{display: block; transition : all 0.2s linear;}

/*
* Bloc lounge
*/
.lounge{position:relative;height:620px;background:var(--navy);overflow:hidden;color:#fff}
.lounge-image{position:absolute;inset:0;background:url("/img/salle-bar-petit-dejeuner.webp") center/cover no-repeat;opacity:.82}
.lounge:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,17,29,.82),rgba(5,17,29,.1))}
.lounge-content{position:relative;z-index:2;width:min(calc(100% - 48px),var(--max));height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center}
.lounge-content h2{color:#fff;}
.lounge-content p:last-child{max-width:430px;font-size:12px;color:rgba(255,255,255,.8)}


/*
* Bloc situation
*/
.Situation{background: url("../charte/BgDeco.jpg"); padding: 50px;}

.CadreSituation {   position: relative;    width: 100%;    height: 650px;    float: left;    overflow: hidden; background: var(--navy);}


/* ==========================================
   ZONE ÉTÉ
   ========================================== */

.SituationEte {    position: absolute;    inset: 0;    display: block;    width: 100%;    height: 100%;    z-index: 1; 
    clip-path: polygon(
        0% 0%,
        89% 0%,
        83.8% 2.3%,
        80% 9.3%,
        72% 12%,
        61.5% 24.6%,
        56% 21.5%,
        20% 100%,
        0% 100%
    );}
.ContentEte{padding-left: 40px;}

.SituationEte::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background: url("../img/chartreuse-paysage-ete.webp")
                center center / cover no-repeat;

    opacity: 0.6;
    z-index: -1;
}

/* ==========================================
   ZONE HIVER
   ========================================== */

.SituationHiver {  text-align: right;  position: absolute;    inset: 0;    display: block;    width: 100%;    height: 100%;
    z-index: 2;      clip-path: polygon(
        89% 0%,
        100% 0%,
        100% 100%,
        20% 100%,
        56% 21.5%,
        61.5% 24.6%,
        72% 12%,
        80% 9.3%,
        83.8% 2.3%  );}
.ContentHiver{padding-right: 40px;}
.SituationHiver::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background: url("../img/saint-pierre-entremont.webp")
                center center / cover no-repeat;

    opacity: 0.6;
    z-index: -1;
}
.SituationEte:hover::before, .SituationHiver:hover::before{opacity: 0.4;transition : all 0.2s linear;}

/* ==========================================
   LIGNE DE SÉPARATION
   ========================================== */

.Separation {   position: absolute;    inset: 0;    width: 100%;    height: 100%;    z-index: 10;    overflow: visible;    pointer-events: none;}

.Separation polyline {    fill: none;    stroke: var(--gold); stroke-width: 10px;    stroke-linecap: round;    stroke-linejoin: round;    vector-effect: non-scaling-stroke;}

@media screen and (max-width: 1200px) 
{
	.SituationHiver, .SituationEte{height: 50%; float: left; clip-path:none; position: relative; float: left;}
	.Separation{display: none;}
}

/*
* Contact
*/
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;padding:50px;}

.contact-details{display:grid;gap:4px;margin-top:28px;font-size:12px}
.contact-details a:first-child{font-family:var(--serif);font-size:24px;color:var(--navy)}
.contact-details a, .contact-details .ContentIcone{line-height: 30px; margin-bottom: 15px;}
.contact-details .Icone{float: left; margin-right: 20px;}
.contact-form{border-left:1px solid var(--gold);padding-left:40px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form label{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#686b6e;margin-bottom:12px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #cfd0cd;background:transparent;padding:8px;margin-top:7px;outline:none;color:var(--ink);font-size:12px;}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold)}
.contact-form textarea{resize:vertical}
.contact-form .button{margin-top:2px}

@media screen and (max-width: 1200px) 
{
	.contact{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;}
	.contact-form{border: 0px;}
}
/*
* Align
*/
.TxtCenter{text-align: center;} .TxtLeft{text-align: left;} .TxtRight{text-align: right;}
/*
* Couleur
*/
.TxtBlanc{color:#FFFFFF !important;}
.BgCreme{background:var(--cream);}
.BgOr{background:var(--gold);}
.BgNavy{background:var(--navy);}
.BgDeco{background: url("../charte/BgDeco.jpg");}

.BgEvenement{background: url(/img/BgTraiteur.webp) center center; background-size:cover;}

/*
* BOUTONS
*/

.BtnResa{ border-radius: 5px; background: var(--gold); margin: 15px; display: inline-block; color:#FFFFFF; font: 16px / 50px var(--serif);font-weight:400; line-height: 50px; padding: 0px 40px 0px 10px;transition : all 0.2s linear; position: relative;}
.BtnResa::after{content: ""; width: 20px; height: 20px; position: absolute; top:15px; right:5px; background:#FFFFFF; margin: 0px 5px 0px 5px; display: inline-block;-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;transition : all 0.2s linear;}

.BtnResa:hover{background: var(--goldhover);transition : all 0.2s linear;}
.BtnResa:hover::after{ right: 2px; transition : all 0.2s linear;}

.Btn1{ width: auto; border-radius: 5px; background: var(--gold); margin: 15px 15px 0px 0px; display: inline-block; color:#FFFFFF; font: 18px / 40px var(--serif);font-weight:400; line-height: 40px; padding: 0px 10px 0px 10px;transition : all 0.2s linear; position: relative;}
.Btn1:hover{background: var(--goldhover);transition : all 0.2s linear;}

.Btn2{ width: auto; border-radius: 5px; background: var(--gold);  display: inline-block; color:#FFFFFF; font: 18px / 30px var(--serif);font-weight:400; line-height: 30px; padding: 0px 10px 0px 10px;transition : all 0.2s linear; position: relative;}
.Btn2:hover{background: var(--goldhover);transition : all 0.2s linear;}

.Btn3{ background:#FFFFFF; border-radius: 5px; margin: 15px 0px 0px 0px; display: inline-block; color:var(--gold); font: 20px / 50px var(--serif);font-weight:400; line-height: 50px; padding: 0px 50px 0px 10px;transition : all 0.2s linear; position: relative; border: 1px solid var(--gold)}
.Btn3::after{content: ""; width: 30px; height: 30px; position: absolute; top:10px; right:5px; background:var(--gold); margin: 0px 10px 0px 10px; display: inline-block;-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;transition : all 0.2s linear;}

.Btn3:hover{background: var(--goldhover); color:#FFFFFF;transition : all 0.2s linear;}
.Btn3:hover::after{ right: 2px; transition : all 0.2s linear; background: #FFFFFF;}


.Btn4{ border-radius: 5px; margin: 15px 0px 0px 0px; display: inline-block; color:var(--navy); font: 20px / 50px var(--serif);font-weight:400; line-height: 50px; padding: 0px 50px 0px 10px;transition : all 0.2s linear; position: relative; border: 1px solid var(--gold); background: #FFFFFF;}
.Btn4::after{content: ""; width: 30px; height: 30px; position: absolute; top:10px; right:5px; background:var(--navy); margin: 0px 10px 0px 10px; display: inline-block;-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;transition : all 0.2s linear;}
.Btn4:hover{background: var(--goldhover);transition : all 0.2s linear;}


.Btn5{ width: auto; background:transparent; border-radius: 5px; margin: 15px 0px 0px 0px; display: inline-block; color:var(--gold); ont: 18px / 40px var(--serif); font-weight:400; line-height: 40px; padding: 0px 50px 0px 10px;transition : all 0.2s linear; position: relative; border: 1px solid var(--gold)}
.Btn5::after{content: ""; width: 30px; height: 30px; position: absolute; top:5px; right:5px; background:var(--gold); margin: 0px 10px 0px 10px; display: inline-block;-webkit-mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;  mask: url('../charte/IconeFleche.svg') no-repeat 50% 50%;transition : all 0.2s linear;}

.Btn5:hover{background: var(--goldhover); color:#FFFFFF;transition : all 0.2s linear;}
.Btn5:hover::after{ right: 2px; transition : all 0.2s linear; background: #FFFFFF;}

/*
* Titre
*/ 
.Titre1{font-size:48px;margin-bottom:22px; color:var(--navy); position: relative; width: 100%; padding: 20px 0px; line-height: 60px;}
.Titre1_2{font-size:48px; color:var(--navy); position: relative; width: 100%; padding: 20px 0px;}
.Titre1::after{ width: 130px; height: 1px; content: ""; position: absolute; bottom: -10px; left: 0px; z-index: 1;  background:var(--gold); }
.Titre1.TxtCenter::after{left: 50%; transform: translateX(-50%);}
.Titre1.TxtRight::after{right: 0px; left: auto;}

.Titre2{font-size:clamp(28px,1vw,35px);margin-bottom:22px; color:var(--navy); position: relative; width: 100%; display: block; float: left; padding: 20px 0px;}
.Titre2::after{ width: 130px; height: 1px; content: ""; position: absolute; bottom: -10px; left: 0px; z-index: 1;  background:var(--gold); }
.Titre2.TxtRight::after{ right: 0px; left: auto; }
.Titre2.TxtCenter::after{ left: 50%; transform: translateX(-50%); }

.Txt1{font-size: 20px; font-family:var(--serif);}
.Txt2{font-size: 16px; font-family:var(--serif);}

@media screen and (max-width: 1200px) 
{
	.Titre1{font-size:38px; line-height: 50px;}
}
/*
* Déco
*/
.Deco1{overflow: hidden;}
.Deco1::before{ content:""; position: absolute; right: -20px; top: 50px; z-index: -1; background: url("../charte/IconeMontagne.svg") no-repeat top right; background-size: contain; width: 242px; height: 96px;}
@media screen and (max-width: 1200px) 
{
	.Deco1::before{display: none;}
}
/*
* Ligne
*/
hr.Ligne1{border-top: 1px solid var(--gold); width: 100%; height: 1px; display: block; margin-top: 10px; margin-bottom: 20px;}

/*
* Pop COOKIES
*/
.pop_cookie{position: fixed; bottom: 0px; left: 0px; width: 100%; background: rgba(255,255,255,0.80); z-index: 999999999; border-top: 2px solid var(--gold); /*height: 60px;*/ line-height: 50px; padding: 5px;}

/*
* Galerie
*/
/* =========================================
   GALERIE LE GRAND SOM
   GRID EDITORIAL — SANS TROU
   ========================================= */

.hotel-gallery {
    --gallery-bg: #f7f5ef;
    --gallery-gap: 12px;

    padding: 100px 0;
    background: var(--gallery-bg);
}

.hotel-gallery .gallery-container {
    width: min(1400px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================
   INTRODUCTION
   ========================================= */

.gallery-header {
    max-width: 800px;
    margin-bottom: 45px;
}

.gallery-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;

    color: #b99042;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.gallery-eyebrow::before {
    content: "";

    width: 45px;
    height: 1px;

    background: #b99042;
}


.gallery-title {
    margin: 0 0 18px;

    color: #10233d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.025em;
}


.gallery-description {
    max-width: 680px;

    margin: 0;

    color: #657080;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   GRILLE
   ========================================= */

.gallery-grid {

    display: grid;

    /*
       4 colonnes / 4 lignes
       Les zones remplissent exactement
       toute la surface.
    */

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    grid-template-rows:
        repeat(4, 180px);

    grid-template-areas:

        "photo1 photo1 photo2 photo3"
        "photo1 photo1 photo2 photo3"
        "photo4 photo5 photo6 photo7"
        "photo4 photo5 photo8 photo8";

    gap: var(--gallery-gap);

    width: 100%;
}


/* =========================================
   PLACEMENT DES PHOTOS
   ========================================= */

.gallery-item:nth-child(1) {
    grid-area: photo1;
}

.gallery-item:nth-child(2) {
    grid-area: photo2;
}

.gallery-item:nth-child(3) {
    grid-area: photo3;
}

.gallery-item:nth-child(4) {
    grid-area: photo4;
}

.gallery-item:nth-child(5) {
    grid-area: photo5;
}

.gallery-item:nth-child(6) {
    grid-area: photo6;
}

.gallery-item:nth-child(7) {
    grid-area: photo7;
}

.gallery-item:nth-child(8) {
    grid-area: photo8;
}


/* =========================================
   IMAGE
   ========================================= */

.gallery-item {

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ddd;

    text-decoration: none;
}


.gallery-item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .65, .2, 1);
}


/* =========================================
   OVERLAY
   ========================================= */

.gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(10, 25, 43, .45) 100%
        );

    opacity: 0;

    transition: opacity .35s ease;

    pointer-events: none;
}


/* =========================================
   ICÔNE
   ========================================= */

.gallery-item::before {

    content: "↗";

    position: absolute;

    z-index: 2;

    right: 18px;
    bottom: 18px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: rgba(255,255,255,.95);

    color: #10233d;

    font-family: Arial, sans-serif;
    font-size: 17px;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* =========================================
   HOVER
   ========================================= */

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item:hover::before {
    opacity: 1;
    transform: translateY(0);}


/* =========================================
   LÉGENDE
   ========================================= */

.gallery-caption {    position: absolute;    z-index: 3;    left: 20px;   bottom: 20px;    color: white;    font-family: "Montserrat", sans-serif;    font-size: 11px;    font-weight: 500;    letter-spacing: .12em;    text-transform: uppercase;
    opacity: 0;    transform: translateY(8px);    transition:        opacity .3s ease,		transform .3s ease;}


.gallery-item:hover .gallery-caption {   opacity: 1;   transform: translateY(0);}


/* =========================================
   TABLETTE
   ========================================= */

@media (max-width: 900px) {
    .hotel-gallery {       padding: 75px 0;    }
    .hotel-gallery .gallery-container {        width: calc(100% - 40px);    }
    .gallery-grid {        grid-template-columns: 1fr 1fr;        grid-template-rows:        repeat(5, 220px);        
		grid-template-areas:
            "photo1 photo1"
            "photo2 photo3"
            "photo4 photo4"
            "photo5 photo6"
            "photo7 photo8";
        gap: 10px;    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {
    .hotel-gallery {        padding: 60px 0;   }
    .hotel-gallery .gallery-container {        width: calc(100% - 30px);    }
    .gallery-header {        margin-bottom: 30px;    }
    .gallery-title {      font-size: 44px;    }
    .gallery-description {     font-size: 14px;        line-height: 1.7;    }
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  repeat(5, 150px);
        grid-template-areas:
            "photo1 photo1"
            "photo2 photo3"
            "photo4 photo4"
            "photo5 photo6"
            "photo7 photo8";        gap: 7px;   }
    .gallery-item::before {        right: 10px;        bottom: 10px;        width: 34px;        height: 34px;        opacity: 1;        transform: none;        font-size: 14px;    }
    .gallery-caption {        display: none;    }
}


/* =========================================
   ACCESSIBILITÉ
   ========================================= */
.gallery-item:focus-visible {    outline: 2px solid #b99042;    outline-offset: 3px;}


/* =========================================
   RÉDUCTION DES ANIMATIONS
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .gallery-item img,    .gallery-item::before,   .gallery-item::after,    .gallery-caption {        transition: none;    }
}

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

/*
* Case Evenement
*/
.CaseEvenement{max-width: 400px; display: inline-block; margin: 10px; text-align: left; border-radius: 5px; border: 1px solid var(--gold); height: calc(100% - 22px); background: #FFFFFF;}
.CaseEvenement .EventImg{height: 300px; overflow: hidden;}
.CaseEvenement .EventContent{padding: 10px;}
.CaseEvenement .EventImg img{object-fit: cover; object-position: center; display: block;width: 100%;
    height: 100%;}

/*
* CaseSituation
*/
.CaseSituation{min-height: 500px; position: relative; margin: 10px;}
.CaseSituation .BgImage{position: absolute; top: 0px; left: 0px; z-index: 1; width: 100%; height: 100%; overflow: none;}
.CaseSituation .ContentSituation{position: absolute; z-index:2; background: #FFFFFF; max-width: 50%; padding: 10px; border-radius: 5px; bottom: 10px; left: 10px; }
.CaseSituation .ContentSituation .IconeHiver, .CaseSituation .ContentSituation .IconeEte{position: absolute; z-index: 3; top: -25px; left: 10px; height: 40px; width: 40px;  border-radius: 50px; background: var(--gold); text-align: center;}
.CaseSituation .ContentSituation .IconeHiver .Icone::before, .CaseSituation .ContentSituation .IconeEte .Icone::before{background: #FFFFFF;}
.CaseSituation .BgImage img{width: 100%;  height: 100%;	object-fit: cover; object-position: center; display: block;}