/* CSS Document */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'); body, html, a, ul, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;} a, button, a img, a:hover, button:hover, a:hover > img{transition : all 0.2s linear;} body{ font:14px/22px 'Montserrat', sans-serif; font-weight:300;color:#3c3e38;} a{ text-decoration:none;color:#3c3e38;}img{ border:0px;} body, html{ min-height:100%; float: left; min-width: 100%; height: 100%; width: 100%; display: block; position: relative;} a[data-txt], span[data-txt], button[data-txt], input[data-txt], td[data-txt], div[data-txt]{position: relative; display: inline-block;} a[data-txt]:hover::after, span[data-txt]:hover::after, button[data-txt]:hover::after, input[data-txt]:hover::after, td[data-txt]:hover::after , div[data-txt]:hover::after { content: attr(data-txt); text-align: center; position: absolute; right: 0; top: -44px; min-width: 120px; border: 1px #c89c7d solid; border-radius: 5px; background-color: #ffffff; padding: 5px; color: #3c3e38; font-size: 14px; z-index: 1; white-space: nowrap;} a[data-txt2], span[data-txt2], button[data-txt2], input[data-txt2], td[data-txt2], div[data-txt2], p[data-txt2]{position: relative; display: inline-block;} a[data-txt2]:hover::after, span[data-txt2]:hover::after, button[data-txt2]:hover::after, input[data-txt2]:hover::after, td[data-txt2]:hover::after , div[data-txt2]:hover::after, p[data-txt2]:hover::after { content: attr(data-txt2); text-align: center; position: absolute; right: 0; bottom: -35px; min-width: 120px; border: 1px #c89c7d solid; border-radius: 5px; background-color: #ffffff; padding: 5px; color: #3c3e38; font-size: 14px; z-index: 1; white-space: nowrap;} a[data-txt3], span[data-txt3], button[data-txt3], input[data-txt3], td[data-txt3], div[data-txt3]{position: relative; display: inline-block;} a[data-txt3]:hover::after, span[data-txt3]:hover::after, button[data-txt3]:hover::after, input[data-txt3]:hover::after, td[data-txt3]:hover::after , div[data-txt3]:hover::after { content: attr(data-txt3); text-align: center; position: absolute; left: 0; top: -44px; min-width: 120px; border: 1px #c89c7d solid; border-radius: 5px; background-color: #ffffff; padding: 5px; color: #3c3e38; font-size: 14px; z-index: 1; white-space: nowrap;} /* STRUCTURE*/ div#first{ width: 100%; display: block; text-align: center;} @media screen and (max-width: 1200px) { div#first{ float: left;} div#first div#second{ width: 100%; display: inline-block; text-align: left; } } @media screen and (min-width: 1200px) { div#first div#second{ width: 1200px; display: inline-block; text-align: left; } } @media screen and (min-width: 1400px) { div#first div#second{ width: 1400px; display: inline-block; text-align: left; } }/* @media screen and (min-width: 1920px) { div#first div#second{ width: 1920px; display: inline-block; text-align: left; } }*/ @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; overflow: hidden;}.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: 1200px) { .row{float: left; width: 100%;position: relative;} .row .case12, .row .case6, .row .case11, .row .case10, .row .case9, .row .case8, .row .case7{float: left; width: 100%;} } @media screen and (max-width: 1200px) { .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%;} } .hauteur100{width: 100%; height: 100%;} .padding10{ padding: 10px;} .margin10{ margin: 10px;} .padding10 div{width: calc(100% - 20px);} .row.margin10, .row.padding10{width: calc(100% - 20px);} .case6.padding10, .case4.padding10, .case3.padding10{width: auto; padding: 10px;} .case_table{display:table !important;height:100%; width: 100%;}.case_table .vertical_align{display:table-cell;vertical-align:middle; width: 100%;} /* Marges */ .PaddingTop60{padding-top: 60px;} /* Alignements*/ .txtcenter{text-align: center !important;} .txtleft{text-align: left !important;} .txtright{text-align: right !important;} /* Couleur */ .txtBeige{color:#c89c7d !important;} .txtBlanc{color:#FFFFFF !important;}.txtNoir{color:#3c3e38 !important;} /* Epaisseur*/ .w100{font-weight: 100;}.w300{font-weight: 300;}.w500{font-weight: 500;}.w700{font-weight: 700;}.w900{font-weight: 900;} .s16{font-size: 16px;}.s20{font-size: 20px;}.s30{font-size: 30px;}.s40{font-size: 40px;} /* * TITRE */ .titre1{color:#FFFFFF; font:36px/50px 'Montserrat', sans-serif; font-weight:700; position: relative;} .titre2{color:#3c3e38; font:24px/30px 'Montserrat', sans-serif; font-weight:700; position: relative;} @media screen and (max-width: 1200px) { .titre1{color:#FFFFFF; font:28px/40px 'Montserrat', sans-serif; font-weight:700; position: relative; display: block; width: 100%;} .titre2{color:#3c3e38; font:18px/30px 'Montserrat', sans-serif; font-weight:700; position: relative;} } @media screen and (max-width: 768px) { .titre1{color:#FFFFFF; font:20px/30px 'Montserrat', sans-serif; font-weight:700; position: relative; display: block; width: 100%;} .titre2{color:#3c3e38; font:16px/28px 'Montserrat', sans-serif; font-weight:700; position: relative;} } /* * Espacement */ @media screen and (min-width: 1200px) { .SautLigne1{display: block; margin-top: 80px;} } @media screen and (max-width: 1200px) { .SautLigne1{display: block; margin-top: 20px;} } /* * BOUTONS */ .btn1{border: 1px solid #FFFFFF; min-height: 46px; padding: 15px; font: 16px/46px 'Montserrat', sans-serif; font-weight:700; background: rgba(60,62,56,0.75); color:#FFFFFF; display: inline-block;} .btn1:hover, .btn1.on{background: #FFFFFF; color:#c89c7d;} .btn2{border: 1px solid #c89c7d; height: 46px; padding: 15px; font: 16px/46px 'Montserrat', sans-serif; font-weight:700; background: #c89c7d; color:#FFFFFF; display: inline-block; margin: 10px;} .btn2:hover, .btn2.on{background: #FFFFFF; color:#c89c7d;} .btn3{border: 1px solid #FFFFFF; height: auto !important; width: auto !important; padding: 15px; height: auto; font: 16px/46px 'Montserrat', sans-serif; font-weight:700; background: rgba(60,62,56,0.75); color:#FFFFFF; display: inline-block !important;} .btn3:hover, .btn3.on{background: #c89c7d; color:#FFFFFF;} @media screen and (max-width: 1200px) { .btn1{ min-height: 26px; padding: 5px; font: 16px/26px 'Montserrat', sans-serif;} } /* BACKGROUND */ .bgNoir{background: #3c3e38;} .bgVague{background: url("/charte/bg-vague.jpg");} .bgBeige{background:#c89c7d !important;}.bgGrisClair{background: #dfd4cc;}.bgBlanc{background: #ffffff;} .BgPralognan{width: 100%; height: 400px; background: url("/stations-ski/pralognan/pralognan-la-vanoise.jpeg") center center no-repeat; background-size: cover; background-attachment: fixed;} .BgChampagny{width: 100%; height: 400px; background: url("/stations-ski/champagny/champagy-le-haut.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;} .BgBozel{width: 100%; height: 400px; background: url("/stations-ski/bozel/vue-bozel.JPG") center center no-repeat; background-size: cover; background-attachment: fixed;} /* DECO */ .deco1::after{position: absolute; bottom: -60px; height: 120px; width: calc(50% + 100px); right: 0px; content: ""; background: url("../charte/deco1.jpg") center center no-repeat; background-size: cover;} .DecoTitre::after{ content: ""; width: 120px; height: 14px; margin: 10px; background: #c89c7d; display: inline-block;} .DecoTitre2::before{ content: ""; width: 120px; height: 14px; margin: 10px; background: #c89c7d; display: inline-block;} .DecoTitre3::after{ content: ""; width: 120px; height: 14px; background: #c89c7d; display: inline-block; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);} .DecoImg{position: relative;} .DecoImg::after{ content: ""; width: 90%; height: 40px; background: url("/charte/DecoImg.jpg") center center no-repeat; background-size: cover; position: absolute; bottom: -20px; left: -5%; z-index: -1;} .DecoCote::after{position: absolute; top: 10%; height: 80%; width: 30px; left:0px; z-index: 1; content:""; background: #c89c7d; } .DecoCote::before{position: absolute; top: 10%; height: 80%; width: 30px; right:0px; z-index: 1; content:""; background: #c89c7d; } .row.DecoCote{padding: 0px 40px 0px 40px; width: calc(100% - 80px);} @media screen and (max-width: 1200px) { .DecoTitre{position: relative;} .DecoTitre::after, .DecoTitre2::before{ content: ""; margin: 0px; width: 120px; height: 14px; position: absolute; left: 0px; bottom: -40px; background: #c89c7d; display: inline-block;} .DecoTitre.txtcenter::after, .DecoTitre2.txtcenter::before{ content: ""; margin: 0px; width: 120px; height: 14px; position: absolute; left: calc(50% - 60px); bottom: -30px; background: #c89c7d; display: inline-block;} .titre1.DecoTitre, .titre1.DecoTitre2, .titre2.DecoTitre, .titre2.DecoTitre2{margin-bottom: 80px;} .deco1::after{position: absolute; bottom: -45px; height: 90px; width: calc(50% + 100px); right: 0px; content: ""; background: url("../charte/deco1.jpg") center center no-repeat; background-size: cover;} } @media screen and (max-width: 768px) { .deco1::after{position: absolute; bottom: -30px; height: 60px; width: calc(50% + 100px); right: 0px; content: ""; background: url("../charte/deco1.jpg") center center no-repeat; background-size: cover;} } /* Liste */ ul.liste1{} ul.liste1 li{list-style-image: url("/charte/fleche-droite.svg"); margin-left: 15px;} ul.liste2{} ul.liste2 li{list-style-image: url("/charte/fleche-droite-b.svg"); color:#FFFFFF !important; margin-left: 15px;} /* on limite la taille */ .bloc_txt1{ width:600px; margin:auto; height: 100%;} @media screen and (max-width: 1200px) { .bloc_txt1{ width:580px; max-width: calc(100% - 20px); padding: 10px; margin:auto; height: 100%;} } @media screen and (max-width: 768px) { .bloc_txt1{ width:calc(100% - 20px); margin:auto; height: calc(100% - 20px); padding: 10px;} } /**/ .img100{max-width: 100%;} /* * ICONE */ a.IconeAction, span.IconeAction{ position: relative; display: inline-flex; width: 20px; height: 20px; text-align: left; background: none; border: none; margin: 2px;} a.IconeAction.Medium, span.IconeAction.Medium{ width: 30px; height: 30px; border-radius:30px;} a.IconeAction.Medium::before, span.IconeAction.Medium::before{width: 30px; height: 30px;} a.IconeAction.Big, span.IconeAction.Big{ width: 50px; height: 50px; border-radius:50px;} a.IconeAction.Big::before, span.IconeAction.Big::before{width: 40px; height: 40px;} a.IconeAction.Small, span.IconeAction.Small{ width: 10px; height: 10px; border-radius:10px;} a.IconeAction.Small::before,span.IconeAction.Small::before{width: 10px; height: 10px;} a.IconeAction.Diff, span.IconeAction.Diff{ width: 30px; height: 30px; border-radius:30px;} a.IconeAction.Diff::before, span.IconeAction.Diff::before{ width: 20px; height: 20px; border-radius:30px;} .IconeAction.ImgSdb{background: #ffffff; border-radius: 12px;} .IconeAction.ImgSdb::before{content: ""; -webkit-mask: url('../charte/icone-sdb.svg') no-repeat 50% 50%; mask: url('../charte/icone-sdb.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events:none;} .IconeAction.ImgSurface{background: #ffffff; border-radius: 12px;} .IconeAction.ImgSurface::before{content: ""; -webkit-mask: url('../charte/icone-size.svg') no-repeat 50% 50%; mask: url('../charte/icone-size.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgChambre{background: #ffffff; border-radius: 12px;} .IconeAction.ImgChambre::before{content: ""; -webkit-mask: url('../charte/icone-bed.svg') no-repeat 50% 50%; mask: url('../charte/icone-bed.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.Map{background: #ffffff; border-radius: 12px;} .IconeAction.Map::before{content: ""; -webkit-mask: url('../charte/icone-map.svg') no-repeat 50% 50%; mask: url('../charte/icone-map.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgPersonne{background: #ffffff; border-radius: 12px;} .IconeAction.ImgPersonne::before{content: ""; -webkit-mask: url('../charte/icone-personne.svg') no-repeat 50% 50%; mask: url('../charte/icone-personne.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgTypeLoc{background: #ffffff; border-radius: 12px;} .IconeAction.ImgTypeLoc::before{content: ""; -webkit-mask: url('../charte/icone-home.svg') no-repeat 50% 50%; mask: url('../charte/icone-home.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgClose{background: #ffffff; border-radius: 12px;} .IconeAction.ImgClose::before{content: ""; -webkit-mask: url('../charte/IconeClose.svg') no-repeat 50% 50%; mask: url('../charte/IconeClose.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgCheck{background: #ffffff; border-radius: 12px;} .IconeAction.ImgCheck::before{content: ""; -webkit-mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%; mask: url('../charte/IconeCheck.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgInfo{background: #ffffff; border-radius: 12px;} .IconeAction.ImgInfo::before{content: ""; -webkit-mask: url('../charte/IconeInfo.svg') no-repeat 50% 50%; mask: url('../charte/IconeInfo.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgContact{background: #ffffff; border-radius: 12px;} .IconeAction.ImgContact::before{content: ""; -webkit-mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgMedaille::before{content: ""; -webkit-mask: url('../charte/IconeMedaille.svg') no-repeat 50% 50%; mask: url('../charte/IconeMedaille.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #ffffff; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .IconeAction.ImgStar{background: #ffffff; border-radius: 12px;} .IconeAction.ImgStar::before{content: ""; -webkit-mask: url('../charte/IconeStar.svg') no-repeat 50% 50%; mask: url('../charte/IconeStar.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #c89c7d; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} /* Design IMG*/ .DesignImg1{width: 75%; z-index: 1; position: relative;} .DesignImg1::after{ content: ""; width: 90%; height: 20px; background: url("/charte/DecoImg.jpg") center center no-repeat; background-size: cover; position: absolute; top: -10px; right: -5%; z-index: -1;} .DesignImg2{width: 35%; z-index: 2; position: absolute; right: 0px; bottom: -30px;} .DesignImg2::after{ content: ""; width: 90%; height: 20px; background: url("/charte/DecoImg.jpg") center center no-repeat; background-size: cover; position: absolute; bottom: -10px; left: -5%; z-index: -1;} .DesignImg3{width: 75%; z-index: 1; position: absolute; top: 0px; right: 20px;} .DesignImg3::after{ content: ""; width: 90%; height: 20px; background: url("/charte/DecoImg.jpg") center center no-repeat; background-size: cover; position: absolute; top: -10px; right: -5%; z-index: -1;} .DesignImg1 img, .DesignImg2 img, .DesignImg3 img{max-width: 100%;} @media screen and (max-width: 1200px) { .DesignImg3{position: relative;} } /* * Fil d'arianne */ .FilArianne{padding-left: 25px; float: left; width: calc(100% - 25px);} /* * Entete */ .LinkHeader{font:12px/30px 'Montserrat', sans-serif; font-weight:300;color:#c89c7d; padding-left: 30px; margin: 0px 20px 0px 10px; position: relative; height:30px;} .LinkHeader.Client::before{content: ""; -webkit-mask: url('../charte/icone-cle.svg') no-repeat 50% 50%; mask: url('../charte/icone-cle.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .LinkHeader.Proprietaire::before{content: ""; -webkit-mask: url('../charte/icone-home.svg') no-repeat 50% 50%; mask: url('../charte/icone-home.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} @media screen and (max-width: 1200px) { .LinkHeader{margin: 0px 10px 0px 10px;} } /* * Footer */ .LinkFooter{font:12px/15px 'Montserrat', sans-serif; font-weight:300;color:#ffffff; padding: 0px 0px 20px 30px; margin: 0px 20px 0px 10px; position: relative; } .LinkFooter.Map::before{content: ""; -webkit-mask: url('../charte/icone-map.svg') no-repeat 50% 50%; mask: url('../charte/icone-map.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .LinkFooter.Contact::before{content: ""; -webkit-mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .LinkFooter.Tel::before{content: ""; -webkit-mask: url('../charte/icone-tel.svg') no-repeat 50% 50%; mask: url('../charte/icone-tel.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .LinkFooter.Horaires::before{content: ""; -webkit-mask: url('../charte/IconeHoraires.svg') no-repeat 50% 50%; mask: url('../charte/IconeHoraires.svg') no-repeat 50% 50%; position: absolute; width: 18px; height: 18px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} /* * HEADER */ .Header{position: absolute; z-index: 999999; top: 40px; width:100%;} .Header.scroll{top: 0px; background: rgba(60,62,56,0.75); position: fixed; height: 80px; border-bottom: 1px solid #c89c7d; z-index: 9998;} .Header .Logo{ height: 80px; position: absolute; top: 0px; left: 90px; display: flex; width: 200px;} .Header .Logo a{display: block; height: 100%; width: 100%;} .Menu.fixe{ height: 80px; position: fixed; top: 0px; right: 90px; z-index: 9999;} .Menu{ height: 80px; position: absolute; top: 30px; right: 90px; z-index: 9999;} .Menu ul{margin: 0px; padding: 0px; text-align: right;} .Menu ul li{margin: 0px; padding: 0px; display: inline-block; position: relative;} .Menu ul li a{padding: 20px 15px 20px 15px; color:#FFFFFF; position: relative; display: block; font:20px/40px 'Montserrat', sans-serif; font-weight:300;} .Menu ul li:hover a, .Menu ul li a.on{background: #FFFFFF; color:#c89c7d;} .Menu ul li ul.SousMenu{position: absolute; top: 80px; right: 0px; display: none; background: #FFFFFF;} .Menu ul li ul.SousMenu li{ display: block; padding: 2px; border-bottom: 1px dashed #c89c7d;} .Menu ul li ul.SousMenu li a{color:#3c3e38; display: block; padding-right: 10px; font:14px/24px 'Montserrat', sans-serif; font-weight:300; white-space: nowrap;} .Menu ul li ul.SousMenu li a:hover{ font-weight: 700;} .nav-icon { margin: 7px 7px 0px 7px; width: 30px; display: inline-block;float: none; text-align: center;} .nav-icon:after, .nav-icon:before, .nav-icon div { background-color: #c89c7d; border-radius: 3px; content: ''; display: block; height: 3px; margin: 4px 0; transition: all .2s ease-in-out;} .nav-icon.on::before { transform: translateY(8px) rotate(135deg);} .nav-icon.on::after { transform: translateY(-8px) rotate(-135deg);} .nav-icon.on div { transform: scale(0);} .nav-titre{font: 12px/12px'Montserrat', sans-serif; color:#ffffff; display: inline-block;} @media screen and (max-width: 1200px) { .Header{ top: 30px;} .iconemenu{ font: 12px/12px 'Montserrat', sans-serif; height: 50px; position: absolute; top: 30px; right: 10px; z-index: 9999999;} .iconemenu.fixe{position: fixed;top: 15px; right: 10px; z-index: 99991 } .iconemenu a{ color:#FFFFFF !important; display: block; height: 100%;} .Header .Logo{ left: 10px; max-width: 50%;} .Header .Logo img{width: 180px;} .Menu.fixe{ height: 100%; } .Menu{ width: 100% !important; position: fixed; z-index: 9999; top: 0px !important; left: 0px;background: #FFFFFF; display: none; height: 100%; z-index: 999999; padding-top: 60px; } .Menu ul{ width: 100%; height: 100%; background: url("../charte/bg-logo.jpg") bottom right no-repeat; background-size: contain;} .Menu ul li{ width: 100%; margin: 0px; padding: 0px; position: inherit} .Menu ul li a{display: block; text-align: left;margin: 0px; padding: 0px !important; background: #FFFFFF; color:#3c3e38 !important; width:100%; padding: 5px; border-bottom: 1px solid #c89c7d;} .Menu ul li a::before, .Menu ul li ul.SousMenu li a::before{ content: "» "; margin-left: 10px;} .Menu ul li:hover ul.SousMenu{ display:none;} .Menu ul li ul.SousMenu{ display:none; position: absolute; top: 0px; width: 100%; background: #FFFFFF; height: auto; z-index: 1; padding-top: 60px;} .Menu ul li ul.SousMenu li a{font:16px/30px 'Montserrat', sans-serif; border: 0px;} .Menu ul li ul.SousMenu li.retour a::before{ content: ' « ';} .Menu ul li ul.SousMenu li.retour a::after{ content: '';} .Menu ul li ul.SousMenu li{display: block; width: 100%; height: 30px; float: left; position: relative;margin-bottom: 1px solid #c89c7d;} } @media screen and (min-width: 1200px) { .iconemenu{display: none;} .Menu ul li.close, .Menu ul li ul.SousMenu li.retour{ display:none;} .Menu ul li:hover ul.SousMenu{display: block;} } /* * Header des pages */ .EntetePage{height: 220px; padding-top: 100px; background:rgba(60,62,56,0.75); position: relative; float: left; width: 100%;} .EntetePage::after{content: ""; position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; } .EntetePage.Vente::after{background: url("/img/parc-national-vanoise.jpg") top center no-repeat; background-size: cover;} .EntetePage.Vendre::after{background: url("/img/cle-immobilier.jpeg") center center no-repeat; background-size: cover;} .EntetePage.Estimation::after{background: url("/img/estimation.jpeg") center center no-repeat; background-size: cover;} .EntetePage.CoeurDeVillage::after{background: url("/immobilier/coeur-de-village/programme-neuf-pralognan-1.jpg") center center no-repeat; background-size: cover;} .EntetePage.LePetitChamois::after{background: url("/immobilier/petit-chamois/petit-chamois-immobilier-neuf.jpg") center center no-repeat; background-size: cover;} .EntetePage.CoeurDeVillageChalet::after{background: url("/immobilier/coeur-de-village-chalet/chalets.jpg") center center no-repeat; background-size: cover;} .EntetePage.Epilobe::after{background: url("/immobilier/epilobe-2023/epilobe-hiver.jpg") center center no-repeat; background-size: cover;} .EntetePage.Vente{height: 250px !important;} /* * Acces rapide */ .AccesRapide{position: fixed; right: 0px; z-index: 999; top: 50%; transform: translateY(-50%); width: 50px;} .AccesRapide a{ width: 50px; height: 50px; margin: 5px 0px 5px 0px; display: block; border: 1px solid #3c3e38; background: #c89c7d; position: relative;} .AccesRapide .Contact::before{content: ""; -webkit-mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; mask: url('../charte/icone-contact.svg') no-repeat 50% 50%; position: absolute; width: 32px; height: 32px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} .AccesRapide .Tel::before{content: ""; -webkit-mask: url('../charte/icone-tel.svg') no-repeat 50% 50%; mask: url('../charte/icone-tel.svg') no-repeat 50% 50%; position: absolute; width: 32px; height: 32px; background: #3c3e38; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;} /* * DIAPORAMA */ picture.cover img{width: 100%; height: 100%; object-fit: cover; object-position: center;} .Diaporama{width:100%; float: left; height: calc(100% - 120px); min-height: 700px; background:#3c3e38; position: relative;} .Diaporama .Diapo{position: absolute; top:0px; left: 0px; height: 100%; width: 100%; z-index: 1; overflow: hidden; display: none;} .Diaporama .Diapo.on{z-index: 2;} .Diaporama .Diapo img{/*position: absolute; top: 50%; left: 50%; z-index: 1; transform: translateX(-50%) translateY(-50%); */opacity: 0.4; width: 100%; height: 100%; object-fit: cover; object-position: center; } .DiaporamaNext, .DiaporamaPrevious{ height: 58px; width: 58px; position: absolute; z-index: 99; top: calc(50% - 29px);} .DiaporamaNext{right: 58px;} .DiaporamaPrevious{left: 58px;} .DiaporamaNext::before{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .DiaporamaPrevious::before{content: ""; -webkit-mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .DiaporamaNext:hover::before, .DiaporamaPrevious:hover::before{background:#c89c7d;transition : all 0.2s linear;} .DiaporamaNavigation{position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); z-index: 2;} .DiaporamaNavigation .Puce{width: 12px; height: 12px; margin: 2px; background: rgba(255,255,255,0.70); display: inline-block;} .DiaporamaNavigation .Puce.on{width: 34px; background:#FFFFFF;} .DiaporamaNavigation .Puce:hover{ background: rgba(255,255,255,1); } .DiaporamaContent{width: calc(100% - 300px); position: absolute; left: 150px; top: 50%; transform: translateY(-50%);z-index: 98;} .DiaporamaContent .DiaporamaTexte{} .DiaporamaContent .DiaporamaForm .ContentForm{background: #FFFFFF; display: inline-block; padding: 10px;} .DiaporamaContent .DiaporamaForm .ContentBtn{white-space: nowrap;} .DiaporamaContent .DiaporamaOffre{ background: rgba(255,255,255,0.80); display: inline-block; padding: 5px; margin-top: 10px;} @media screen and (min-width: 1024px) { .ContentForm{padding: 0px ; width: 100% ;} .ContentForm form.design1{display: inline-flex ;} .ContentForm.Accueil{padding: 0px ; width: auto ;} .ContentForm.Accueil form.design1{display: inline-block !important;} } @media screen and (max-width: 1024px) { .Diaporama{height: auto;} .DiaporamaNext{right: 5px;} .DiaporamaPrevious{left: 5px;} .DiaporamaNavigation{display: none;} .DiaporamaNext, .DiaporamaPrevious, .DiaporamaNext::before,.DiaporamaPrevious::before{ height: 30px; width: 30px; } .DiaporamaContent{width: calc(100% - 80px); left: 0px; top: 0px; transform: translateY(0); position: relative; float: left;margin: 70px 40px 0px 40px;} .DiaporamaContent .DiaporamaForm{width: 170px;} .DiaporamaContent .DiaporamaTexte{ width: 100%; } .ContentForm form.design1{width: 100%;} .ContentForm form.design1 label{width: calc(25% - 1px); float: left; max-width: none;} .ContentForm form.design1 label button{width: 100%; float: left; padding: 5px 0px 5px 0px;} .ContentForm form.design1 label select{width: 100%;} .ContentForm.Accueil form.design1 label{width: calc(100% - 1px); float: left; max-width: none; min-width: 200px;} } @media screen and (max-width: 870px) { .ContentForm form.design1 label{width: calc(50% - 1px); float: left; max-width: none;} .ContentForm.Accueil form.design1 label{width: calc(100% - 1px); float: left; max-width: none;} } /* * FORM */ form.design1{ display: inline-block; float: none; position: relative;} form.width100{width: 100% !important;} form.design1 label{display: inline-block; margin: 5px 0px 5px 0px; padding:5px 10px 5px 10px; border-left: 1px solid #e8e8e8; text-align: left; background: #FFFFFF; float: left; /*max-width: 210px;*/} form.width100 label{width: calc(100% - 20px) !important;} form.design1 label:first-child{border: 0px;} form.design1 select{appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; color: #2b2b2b; border:0px; border-bottom: 1px solid #c89c7d; padding: 5px 10px; width: 100%; height: 40px; border-radius:0px; font-size: 16px; padding-right: 20px; position: relative; background: #f7f2ef;} form.design1 input[type=text], form.design1 input[type=email], form.design1 textarea{width: 100%; border:0px; border-bottom: 1px solid #c89c7d; background: #f7f2ef; font:14px/24px 'Montserrat', sans-serif; font-weight:300; height: 24px; line-height: 24px; padding: 2px;} form.design1 textarea{height: 100px;} form.design1 .FlecheDesign{position: relative;} form.design1 .FlecheDesign::after{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 16px; height: 16px; z-index: 9; background: #c89c7d; top: 50%; right: 1px; pointer-events: none; transform: translateY(-50%)} form.design1 button{ appearance: none; display: inline-block; height: 62px; background: #3c3e38; color:#FFFFFF; font-weight: 700; font:20px/62px 'Montserrat', sans-serif; border: 0px; padding: 0px 5px 0px 5px !important; margin: 0px !important; } form.design1 button:hover{background: #c89c7d; color:#FFFFFF !important;} @media screen and (max-width: 1024px) { form.design1{text-align: center;} form.design1 label{margin:0px; padding: 0px; width: 220px; display: inline-block; float: none;} form.design1 label select{width: 200px;} form.design1 button{ width: 200px;} } /* * Galerie */ .Galerie{width: 90%; margin-left: 10%; overflow: hidden;} .Galerie .NavigationGalerie{width: 100%; text-align: right; margin-right: 58px; margin-top: 116px; float: left; height: 30px; margin-bottom: 58px; } .GalerieNext, .GaleriePrevious{ height: 30px; width: 30px; position: relative; z-index: 99; top: calc(50% - 29px); display: inline-block;} .GalerieNext{margin: 0px 58px 0px 58px;} .GalerieNext::before{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 30px; height: 30px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .GaleriePrevious::before{content: ""; -webkit-mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; position: absolute; width: 30px; height: 30px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .GalerieNext:hover::before, .GaleriePrevious:hover::before{background:#c89c7d;transition : all 0.2s linear;} .Galerie .ContentGalerie{ width: 200%; height: 350px; float: left;} .Galerie .ContentGalerie ul{ height: 350px;} .Galerie .ContentGalerie ul li{width: auto; height: 350px; margin-left: 10px; display: inline-block;} .Galerie .ContentGalerie ul li a{display: block; background: #3c3e38; position: relative; width: 100%; height: 100%;} .Galerie .ContentGalerie ul li a img{height: 350px;} .Galerie .ContentGalerie ul li a:hover img{ opacity: 0.3;transition : all 0.2s linear;} .Galerie .ContentGalerie ul li a::after{content: ""; -webkit-mask: url('../charte/icone-photo.svg') no-repeat 50% 50%; mask: url('../charte/icone-photo.svg') no-repeat 50% 50%; position: absolute; width: 80px; height: 80px; z-index: 9; background: #c89c7d; top: 50%; left: 50%; pointer-events: none; opacity: 0; transform: rotate(90deg) translateX(-50%) translateY(-50%);transition : all 0.2s linear; transform-origin: center center;} .Galerie .ContentGalerie ul li a:hover::after{opacity: 1; transform: rotate(0deg) translateX(-50%) translateY(-50%);transition : all 0.2s linear;} .Galerie .ContentGalerie.CaseDesign1 ul li{width: 300px; overflow: hidden; position: relative;} .Galerie .ContentGalerie.CaseDesign1 ul li a img{left: 50%; transform: translateX(-50%); position: absolute; top: 0px;} .Galerie .ContentGalerie.CaseDesign1 ul li a .Titre{position: absolute; top: 50%; left: 50%; z-index: 1; transform: translateX(-50%) translateY(-50%); z-index: 9; color:#FFFFFF; font-weight: 700; opacity:0; text-align: center;} .Galerie .ContentGalerie.CaseDesign1 ul li a:hover .Titre{opacity: 1;font:20px/40px 'Montserrat', sans-serif; } .Galerie .ContentGalerie.CaseDesign1 ul li a::after{display: none;} @media screen and (max-width: 1200px) { .Galerie .NavigationGalerie{margin-top: 20px; margin-bottom: 20px;} .Galerie .ContentGalerie, .Galerie .ContentGalerie ul, .Galerie .ContentGalerie ul li, .Galerie .ContentGalerie ul li a img{ height: 275px;} } @media screen and (max-width: 768px) { .Galerie .ContentGalerie, .Galerie .ContentGalerie ul, .Galerie .ContentGalerie ul li, .Galerie .ContentGalerie ul li a img{ height: 200px;} } /* * Slide des ventes */ .SlideVente{ width: 100%; position: relative; height: 540px; overflow: hidden;} .SlideVenteNext, .SlideVentePrevious{ height: 58px; width: 58px; position: absolute; z-index: 99; top: calc(50% - 29px);} .SlideVenteNext{right: 5px;} .SlideVentePrevious{left: 5px;} .SlideVenteNext::before{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #3c3e38; top: 0px; left: 0px; pointer-events: none;} .SlideVentePrevious::before{content: ""; -webkit-mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #3c3e38; top: 0px; left: 0px; pointer-events: none;} .SlideVenteNext:hover::before, .SlideVentePrevious:hover::before{background:#c89c7d;transition : all 0.2s linear;} .SlideVente .ContentSlide{ width:calc(100% - 136px); margin-left: 68px; overflow: hidden;} .SlideVente .ContentSlide ul{width: 300%; display: block;} ul.RechercheVente, ul.RechercheLocation{width: 100%;} .SlideVente .ContentSlide ul li, ul.RechercheVente li, ul.RechercheLocation li{width: 500px; height: 500px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background: #FFFFFF; float: left; margin: 25px;transition : all 0.2s linear; position: relative;} ul.RechercheVente li, ul.RechercheLocation li{width: calc(100% / 3 - 50px);} ul.RechercheLocation li{height: 460px;} .SlideVente .ContentSlide ul li.vendu a::after, ul.RechercheVente li.vendu a.UneVente::after{content: "VENDU"; position: absolute; top: 150px; left: 50%; color:#b54242; z-index: 1; transform: translateX(-50%) translateY(-50%) rotate(-15deg); font-size: 40px; font-weight: 900; filter: grayscale(0);} .SlideVente .ContentSlide ul li.vendu_uk a::after, ul.RechercheVente li.vendu_uk a.UneVente::after{content: "SOLD"; position: absolute; top: 150px; left: 50%; color:#b54242; z-index: 1; transform: translateX(-50%) translateY(-50%) rotate(-15deg); font-size: 40px; font-weight: 900; filter: grayscale(0);} .SlideVente .ContentSlide ul li.compromis a.UneVente::after, ul.RechercheVente li.compromis a.UneVente::after{content: "SOUS-COMPROMIS"; position: absolute; top: 150px; left: 50%; color:#d3a432; z-index: 1; transform: translateX(-50%) translateY(-50%) rotate(-15deg); font-size: 30px; font-weight: 900;filter: grayscale(0); white-space: nowrap;} .SlideVente .ContentSlide ul li.compromis_uk a.UneVente::after, ul.RechercheVente li.compromis_uk a.UneVente::after{content: "UNDER-COMPROMISE"; position: absolute; top: 150px; left: 50%; color:#d3a432; z-index: 1; transform: translateX(-50%) translateY(-50%) rotate(-15deg); font-size: 30px; font-weight: 900;filter: grayscale(0); white-space: nowrap;} ul li .Privilege{position: absolute !important; top:10px; right: 10px; z-index: 99; background: #c89c7d; height: 40px; width: 40px; border-radius: 20px; border: 1px solid #FFFFFF;} ul li .Privilege::after{background: #FFFFFF; } ul.RechercheLocation li .Classement{position: absolute; top:0px; right: 0px; z-index: 99;} ul.RechercheLocation li .Classement span{width: 18px; height: 18px; border-radius: 10; background: #c89c7d; z-index: 99; } ul.RechercheLocation li .Classement span::before{background: #FFFFFF; width: 14px; height: 14px } /*.tarif_promo { background: #fe4747; border-radius: 50px; padding: 5px; font-weight: 700; color:#FFFFFF; font-size: 24px;}*/ .tarif_promo { position: absolute; top: 18px; right: -29px; z-index: 999; transform: rotate(40deg); padding: 5px 50px; background-color: #e80c4d; color: #fff; text-shadow: 1px 1px 0px #000; cursor: default; font-weight: 900;} @media screen and (max-width: 1200px) { .SlideVente .ContentSlide ul li.compromis_uk a.UneVente::after, ul.RechercheVente li.compromis_uk a.UneVente::after, .SlideVente .ContentSlide ul li.compromis a.UneVente::after, ul.RechercheVente li.compromis a.UneVente::after{font-size: 16px;} } .SlideVente .ContentSlide ul li.vendu a .Photo , ul.RechercheVente li.vendu a .Photo , .SlideVente .ContentSlide ul li.compromis a .Photo , ul.RechercheVente li.compromis a .Photo, ul.RechercheVente li.compromis_uk a .Photo, ul.RechercheVente li.vendu_uk a .Photo{filter: grayscale(1);} /* image noir et blanc*/ .SlideVente .ContentSlide ul li:hover, ul.RechercheVente li:hover, ul.RechercheLocation li:hover{ box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px 0px;transition : all 0.2s linear; } .SlideVente .ContentSlide ul li a, ul.RechercheVente li a, ul.RechercheLocation li a{ display: block; position: relative;} .SlideVente .ContentSlide ul li a .Photo, ul.RechercheVente li a .Photo, ul.RechercheLocation li a .Photo{width: 100%; position: relative; height: 330px; overflow: hidden;} .SlideVente .ContentSlide ul li a .Photo .Type, ul.RechercheVente li a .Photo .Type, ul.RechercheLocation li a .Photo .Type{position: absolute; color:#FFFFFF; background: #c89c7d; padding: 2px 7px 2px 7px; text-transform: uppercase; top: 25px; left: 25px; z-index: 1;} .SlideVente .ContentSlide ul li a .Photo .Tarif, ul.RechercheVente li a .Photo .Tarif, ul.RechercheLocation li a .Photo .Tarif{ color:#FFFFFF; position: absolute; left: 25px; bottom: 25px; z-index: 2; font-size: 24px; font-weight: 700;} .SlideVente .ContentSlide ul li a .Photo .Lieu, ul.RechercheVente li a .Photo .Lieu, ul.RechercheLocation li a .Photo .Lieu{color:#FFFFFF; position: absolute; left: 25px; bottom: 5px; z-index: 2; font-size: 16px; font-weight: 300;} .SlideVente .ContentSlide ul li a .Photo .background, ul.RechercheVente li a .Photo .background, ul.RechercheLocation li a .Photo .background{position: absolute; bottom: 0px; left: 0px; height: 90px; width: 100%; display: block; z-index: 1; background: linear-gradient(0deg, rgba(60,62,56,0.8) 0%, rgba(60,62,56,0) 100%);} .SlideVente .ContentSlide ul li a .Photo img.ImgVente, ul.RechercheVente li a .Photo img.ImgVente, ul.RechercheLocation li a .Photo img.ImgVente{ width: 100%; height: 100%; object-fit: cover; object-position: center;} .SlideVente .ContentSlide ul li a .Content, ul.RechercheVente li a .Content{width: calc(100% - 50px); padding: 25px; height: 120px; position: relative;} ul.RechercheLocation li a .Content{width: calc(100% - 50px); padding: 25px; height: 80px; position: relative;} .SlideVente .ContentSlide ul li a .Content h3, ul.RechercheVente li a .Content h3, ul.RechercheLocation li a .Content h3{ padding: 0px; margin: 0px; font:20px/24px 'Montserrat', sans-serif; font-weight:300;color:#c89c7d;} .SlideVente .ContentSlide ul li a .Content .accroche, ul.RechercheVente li a .Content .accroche, ul.RechercheLocation li a .Content .accroche{} .SlideVente .ContentSlide ul li a .Content .Icone, ul.RechercheVente li a .Content .Icone, ul.RechercheLocation li a .Content .Icone{position: absolute; bottom: 5px; left: 25px; width: calc(100% - 50px); border-bottom: 1px solid #c89c7d; padding-bottom: 5px; z-index: 1;} .SlideVente .ContentSlide ul li a .Content .Icone .UneIcone, ul.RechercheVente li a .Content .Icone .UneIcone, ul.RechercheLocation li a .Content .Icone .UneIcone{width: calc(100% / 3 - 30px); float: left; display: block; position: relative; padding-left: 30px; font-size: 20px; font-weight: 500;} .SlideVente .ContentSlide ul li a .Content .Icone .UneIcone.Surface::after, ul.RechercheVente li a .Content .Icone .UneIcone.Surface::after, ul.RechercheLocation li a .Content .Icone .UneIcone.Surface::after{content: ""; -webkit-mask: url('../charte/icone-size.svg') no-repeat 50% 50%; mask: url('../charte/icone-size.svg') no-repeat 50% 50%; position: absolute; width: 24px; height: 24px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .SlideVente .ContentSlide ul li a .Content .Icone .UneIcone.Chambre::after, ul.RechercheVente li a .Content .Icone .UneIcone.Chambre::after, ul.RechercheLocation li a .Content .Icone .UneIcone.Chambre::after{content: ""; -webkit-mask: url('../charte/icone-bed.svg') no-repeat 50% 50%; mask: url('../charte/icone-bed.svg') no-repeat 50% 50%; position: absolute; width: 24px; height: 24px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .SlideVente .ContentSlide ul li a .Content .Icone .UneIcone.Sdb::after, ul.RechercheVente li a .Content .Icone .UneIcone.Sdb::after, ul.RechercheLocation li a .Content .Icone .UneIcone.Sdb::after{content: ""; -webkit-mask: url('../charte/icone-sdb.svg') no-repeat 50% 50%; mask: url('../charte/icone-sdb.svg') no-repeat 50% 50%; position: absolute; width: 24px; height: 24px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .SlideVente .ContentSlide ul li a .Content .Icone .UneIcone.Personne::after, ul.RechercheVente li a .Content .Icone .UneIcone.Personne::after, ul.RechercheLocation li a .Content .Icone .UneIcone.Personne::after{content: ""; -webkit-mask: url('../charte/icone-personne.svg') no-repeat 50% 50%; mask: url('../charte/icone-personne.svg') no-repeat 50% 50%; position: absolute; width: 24px; height: 24px; background: #c89c7d; top: 0px; left: 0px; pointer-events: none;} .TxtIcone{font-size: 40px; line-height: 60px;} @media screen and (max-width: 1200px) { .SlideVenteNext, .SlideVentePrevious{ height: 30px; width: 30px; position: absolute; z-index: 99; top: calc(50% - 29px);} .SlideVenteNext{right: 5px;} .SlideVentePrevious{left: 5px;} .SlideVenteNext::before{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 30px; height: 30px; background: #3c3e38; top: 0px; left: 0px; pointer-events: none;} .SlideVentePrevious::before{content: ""; -webkit-mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; position: absolute; width: 30px; height: 30px; background: #3c3e38; top: 0px; left: 0px; pointer-events: none;} .SlideVenteNext:hover::before, .SlideVentePrevious:hover::before{background:#c89c7d;transition : all 0.2s linear;} .SlideVente .ContentSlide ul li, ul.RechercheVente li{width: 400px; height: 450px;} .SlideVente{ width: 100%; position: relative; height: 450px;} ul.RechercheLocation li{height: 390px; width: calc(50% - 20px); float: left; margin: 10px;} ul.RechercheVente li a .Photo, ul.RechercheLocation li a .Photo{ height: 230px;} ul.RechercheVente li a .Photo{ height: 280px;} .SlideVente .ContentSlide{ width:calc(100% - 80px); margin-left: 40px; overflow: hidden;} ul.RechercheVente li{width: calc(50% - 20px); float: left; margin: 10px;} ul.RechercheVente li a .Content{padding: 5px; height: 140px;} .SlideVente .ContentSlide ul li a .Content .Icone, ul.RechercheVente li a .Content .Icone, ul.RechercheLocation li a .Content .Icone {left: 10px; width: calc(100% - 20px);} } @media screen and (max-width: 765px) { .SlideVente .ContentSlide ul li, ul.RechercheVente li, ul.RechercheLocation li{width: 285px; height: 350px} .SlideVente{ width: 100%; position: relative; height: 350px;} .SlideVente .ContentSlide ul li, ul.RechercheVente li, ul.RechercheLocation li{margin: 5px;} .SlideVente .ContentSlide ul li a .Photo, ul.RechercheVente li a .Photo, ul.RechercheLocation li a .Photo{height: 200px;} .SlideVente .ContentSlide ul li a .Content, ul.RechercheVente li a .Content, ul.RechercheLocation li a .Content{width: calc(100% - 10px); padding: 5px; height: 140px; position: relative;} ul.RechercheVente li, ul.RechercheLocation li{width: calc(100% - 10px);} .SlideVente .ContentSlide ul li.compromis a::after, ul.RechercheVente li.compromis a::after{font-size: 18px; top: 100px;left: calc(50% - 20px);} } /* Affichage chiffre des stats*/ .AfficheChiffre{ color:#FFFFFF; font:40px/40px 'Montserrat', sans-serif; font-weight:700; position: relative; margin-bottom: 20px;} .AfficheChiffre::after{content: ""; position: absolute; z-index: 0; bottom: 0px; left: 0px; width: 60px; height: 7px; background: #c89c7d;} .AfficheChiffre.Big{ font:80px/80px 'Montserrat', sans-serif; font-weight: 700;} /* * Case */ .DesignCase{ height: 600px; width:100%; position: relative;} .DesignCase::before{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; background: rgba(60,62,56,0.5); content:""; transition : all 0.2s linear;} .DesignCase:hover::before{ background: rgba(60,62,56,0.8); transition : all 0.2s linear;} .DesignCase.Pralognan{ background: url("/img/pralognan.JPG") center center no-repeat; background-size:cover;} .DesignCase.Champagny{ background: url("/img/champagny.jpg") center center no-repeat; background-size:cover;} .DesignCase.Bozel{ background: url("/img/bozel.jpg") center center no-repeat; background-size:cover;} .DesignCase a{ display: block; opacity: 1; width: 100%; height: 100%; position: relative; z-index: 2;} .DesignCase a .CaseTitre{ color:#FFFFFF; font:40px/54px 'Montserrat', sans-serif; font-weight:300; position: relative;position: absolute; z-index: 1;} .DesignCase.Pralognan a .CaseTitre{top:58px; left: 58px; margin: 0px; padding: 0px;} .DesignCase.Champagny a .CaseTitre{top:58px; right: 58px; text-align: right;} .DesignCase.Bozel a .CaseTitre{top:58px; left: 50%; transform: translateX(-50%); text-align: center;} .DesignCase a .CaseContent{ color:#FFFFFF; opacity:0; position: absolute; z-index: 1; max-width: 300px; transition : all 0.2s linear;} .DesignCase.Pralognan a .CaseContent{top:216px; left: 58px; z-index: 1} .DesignCase.Champagny a .CaseContent{top:216px; right: 58px; z-index: 1} .DesignCase.Bozel a .CaseContent{top:216px; left: 50%; transform: translateX(-50%); z-index: 1} .DesignCase a:hover .CaseContent{opacity: 1; transition : all 0.2s linear;} @media screen and (max-width: 1200px) { .DesignCase{ height: 450px;} } @media screen and (max-width: 768px) { .DesignCase{ height: 300px;} .DesignCase a .CaseTitre{font:30px/44px 'Montserrat', sans-serif;} .DesignCase.Pralognan a .CaseTitre, .DesignCase.Champagny a .CaseTitre,.DesignCase.Bozel a .CaseTitre{ top: 20px; left: 20px; right: inherit; transform: translateX(0); text-align: left !important;} .DesignCase a .CaseContent{ top: 0px !important; bottom: 20px !important; top:inherit !important; left: 20px !important; right: inherit !important; transform: translateX(0) !important; text-align: left !important;} } /* * Page vente listing */ .ChoixLocalite{text-align: center; height: 80px; float: left; width: 100%; } .ChoixLocalite a{ height: 80px; width: 100px; display: inline-block; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; background: #3c3e38; color:#FFFFFF; font-weight: 700; } .ChoixLocalite a.on{background:#c89c7d;} .ChoixLocalite a:hover{ background: #FFFFFF !important; color:#c89c7d;} @media screen and (max-width: 1024px) { .ChoixLocalite, .TitreLocalite{display: none;} } /* * galerie vente */ .UneGalerie{ width: 100%; height: 500px; position: relative; display: block; overflow: hidden; text-align: center;} .NextGalerieVente, .PreviousGalerieVente{ height: 58px; width: 58px; position: absolute; z-index: 99; top: calc(50% - 29px); background: rgba(60,62,56,0.50); border-radius: 58px;} .NextGalerieVente{right: 58px;} .PreviousGalerieVente{left: 58px;} .NextGalerieVente::before{content: ""; -webkit-mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; mask: url('../charte/fleche-droite.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .PreviousGalerieVente::before{content: ""; -webkit-mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; mask: url('../charte/fleche-gauche.svg') no-repeat 50% 50%; position: absolute; width: 58px; height: 58px; background: #FFFFFF; top: 0px; left: 0px; pointer-events: none;} .NextGalerieVente:hover::before, .PreviousGalerieVente:hover::before{background:#c89c7d;transition : all 0.2s linear;} @media screen and (max-width: 1200px) { .UneGalerie ul.LaGalerie, .UneGalerie ul.LaGalerie li.UnSlide{width: calc(100% - 116px);} } @media screen and (min-width: 1200px) { .UneGalerie{height: 500px; } .UneGalerie ul.LaGalerie, .UneGalerie ul.LaGalerie li.UnSlide{width: 1084px;} } @media screen and (min-width: 1400px) { .UneGalerie{height: 600px; } .UneGalerie ul.LaGalerie, .UneGalerie ul.LaGalerie li.UnSlide{width: 1284px;} } .UneGalerie ul.LaGalerie{display: inline-block; height: 100%; position: relative; z-index: 1;} .UneGalerie ul.LaGalerie li.UnSlide{ position: absolute; width: 100%; height: 100%;} .UneGalerie ul.LaGalerie li.UnSlide{left:300%;} .UneGalerie ul.LaGalerie li.UnSlide:first-child{left:-100% !important;} .UneGalerie ul.LaGalerie li.UnSlide:nth-child(2){left: 0px !important;} .UneGalerie ul.LaGalerie li.UnSlide:nth-child(3){left:100% !important;} .UneGalerie ul.LaGalerie li.UnSlide:nth-child(4){left:200% !important;} .UneGalerie ul.LaGalerie li.UnSlide a{display: block; position: relative; overflow: hidden;width: calc(100% - 20px); height: 100%; background: rgba(60,62,56,1); margin: 10px} .UneGalerie ul.LaGalerie li.UnSlide a img{opacity: 0.3;} .UneGalerie ul.LaGalerie li.UnSlide:nth-child(2) a img{opacity: 1 !important;} .UneGalerie ul.LaGalerie li.UnSlide a img{position: absolute; width: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 2} .UneGalerie ul.LaGalerie li.UnSlide a:hover img{ opacity: 0.3;transition : all 0.2s linear;} .UneGalerie ul.LaGalerie li.UnSlide a::after{content: ""; -webkit-mask: url('../charte/icone-photo.svg') no-repeat 50% 50%; mask: url('../charte/icone-photo.svg') no-repeat 50% 50%; position: absolute; width: 80px; height: 80px; z-index: 9; background: #c89c7d; top: 50%; left: 50%; pointer-events: none; opacity: 0; transform: rotate(90deg) translateX(-50%) translateY(-50%);transition : all 0.2s linear; transform-origin: center center;} .UneGalerie ul.LaGalerie li.UnSlide a:hover::after{opacity: 1; transform: rotate(0deg) translateX(-50%) translateY(-50%);transition : all 0.2s linear;} @media screen and (max-width: 1200px) { .UneGalerie{height: 300px;} } @media screen and (max-width: 768px) { .UneGalerie{height: 250px;} } /* * Info Vente */ .leprix{font-size:40px; line-height: 60px; font-weight: 700;} /* DPE */ .dpe1{width: calc(100% / 3 - 2px); border: 1px solid #000000; float: left; height: 30px;} .dpe2{width: calc(100% / 3 - 2px); border: 1px solid #000000;float: left; height: 30px;} .dpe_lettre{width: calc(100% / 3 - 2px); border: 1px solid #000000;float: left; height: 30px;} .lettre_A{background: rgba(0,128,0,1.00)} .lettre_B{background: rgba(0,255,0,1.00)} .lettre_C{background: rgba(128,255,0,1.00)} .lettre_D{background: rgba(255,255,0,1.00)} .lettre_E{background: rgba(255,128,0,1.00)} .lettre_F{background: rgba(255,128,64,1.00)} .lettre_G{background: rgba(255,0,0,1.00)} /* /* LOCATION */ .criteres{display: inline-block; margin: 5px 0px 5px 0px; padding:5px 10px 5px 10px; border-left: 1px solid #e8e8e8; text-align: left; background: #FFFFFF; float: left; width: auto; max-width: 210px;} .criteres a{line-height: 62px; height: 62px; text-align: center; display: block; } .btn_label{} .criteres .PlusCriteres{ display: none; position: absolute; top: 78px; left: 0px; width: 100%; background: #FFFFFF; z-index: 99;} .criteres .PlusCriteres label{ width: calc(100% - 20px) !important;} @media screen and (max-width: 1024px) { .ContentForm.Accueil .criteres{width: calc(100% - 21px) !important;} .criteres{width: calc(25% - 21px) !important; float: left; margin: 0px !important; line-height: 52px; max-width: none;} .criteres .PlusCriteres{position: relative; top: inherit;} .criteres .PlusCriteres label{ width: 100% !important;} .criteres a{line-height: 52px; height: 52px; text-align: center; } } @media screen and (max-width: 870px) { .criteres{width: calc(50% - 21px) !important; float: left; max-width: none;} } .CadreForm{background: #c89c7d; padding: 10px; max-width: 300px; margin: 10px; text-align: center;} .letarif, .lesdates{display: inline-block;} /* * Fenetre popup */ .fenetre_popup{width: 100%; height: 100%; background: rgba(0,0,0,0.60); position: fixed; top: 0px; left: 0px; z-index: 999999999; display: none;} .fenetre_popup .content_popup{width: calc(100% - 40px); max-width: 600px; height: auto; max-height: calc(100% - 40px); background: #ffffff; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; padding: 10px; z-index: 1; padding:20px; overflow: scroll;} .fenetre_popup .content_popup::after{content: ""; height: 20px; width: 240px; position: absolute; display: block; background:url("../charte/DecoImg.jpg") center center no-repeat; background-size:cover; top: -10px; left: -20px;} .fenetre_popup .content_popup .FenetreClose{position: absolute; top: 5px; right: 5px; z-index: 10; background: #FFFFFF; width: 40px; height: 40px; padding: 0px !important; display: block; border-radius: 20px;} .fenetre_popup .content_popup .LeContenu{width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px; overflow: scroll;} .fenetre_popup .content_popup .FenetreClose.Icone{width: 40px; height: 40px;} .fenetre_popup .content_popup .FenetreClose.Close::before{background: #c89c7d;width: 40px; height: 40px;} /* * utilisé dans les services */ div.CaseDesign{ display: flex; flex-direction: row;} div.CaseDesign .UneCase{width: calc(50% - 22px); margin: 5px; padding: 5px; border: 1px solid #FFFFFF; display: inline-block; max-width: 300px;} div.CaseDesign .UneCase.Grande{width: calc(100% - 20px); max-width: 620px;} div.CaseDesign .UneCase h3{font:20px/30px 'Montserrat', sans-serif; color:#c89c7d; font-weight: 300; text-align: center;} div.CaseDesign .UneCase .description{ color:#FFFFFF; text-align: center;} div.CaseDesign .UneCase .prix{ font:20px/30px 'Montserrat', sans-serif; color:#c89c7d; font-weight: 700; text-align: center;} div.CaseDesign .UneCase:hover{background:#FFFFFF; transition : all 0.2s linear;} div.CaseDesign .UneCase:hover > .description, div.CaseDesign .UneCase:hover > ul.liste2 li{color:#3c3e38 !important;} div.CaseDesign .UneCase:hover > ul.liste2 li{list-style-image: url("/charte/fleche-droite.svg");} div.CaseDesign .UneCase .TabTarifs{display: none; color:#FFFFFF;} div.CaseDesign .UneCase:hover .TabTarifs{color:#3c3e38;} @media screen and (max-width: 480px) { div.CaseDesign .UneCase{width: calc(100% - 22px);} } /* * Design Case */ .CaseDesignIcone{ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin: 20px; padding: 10px; width: calc(100% - 62px); height: calc(100% - 62px); position: relative;transform: scale(0.85); transition : all 0.2s linear; text-align: center;} .CaseDesignIcone.Vendre::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Vendre::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeVendre.svg') no-repeat 50% 50%; mask: url('../charte/IconeVendre.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Acheter::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Acheter::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeAcheter.svg') no-repeat 50% 50%; mask: url('../charte/IconeAcheter.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Estimer::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Estimer::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeEstimer.svg') no-repeat 50% 50%; mask: url('../charte/IconeEstimer.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Louer::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Louer::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeLouer.svg') no-repeat 50% 50%; mask: url('../charte/IconeLouer.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Location::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Location::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeLocation.svg') no-repeat 50% 50%; mask: url('../charte/IconeLocation.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Conciergerie::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Conciergerie::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeConciergerie.svg') no-repeat 50% 50%; mask: url('../charte/IconeConciergerie.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Gardiennage::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Gardiennage::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeGardiennage.svg') no-repeat 50% 50%; mask: url('../charte/IconeGardiennage.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Entretien::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Entretien::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeEntretien.svg') no-repeat 50% 50%; mask: url('../charte/IconeEntretien.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Menage::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Menage::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeMenage.svg') no-repeat 50% 50%; mask: url('../charte/IconeMenage.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone.Accueil::before{content: ""; position: absolute; top: -25px; left: calc(50% - 25px); z-index: 1; border-radius: 40px; padding: 10px; background: #3c3e38; height: 30px; width: 30px; transition : all 0.2s linear;} .CaseDesignIcone.Accueil::after{ position: absolute; top: -15px; left: calc(50% - 15px); z-index: 2; content: ""; -webkit-mask: url('../charte/IconeAccueil.svg') no-repeat 50% 50%; mask: url('../charte/IconeAccueil.svg') no-repeat 50% 50%; background: #ffffff; height: 30px; width: 30px;} .CaseDesignIcone a{display: block; height: 100%; width: 100%;} .CaseDesignIcone h2{color: #c89c7d;; font-weight: 300; text-align: center; font:20px/32px 'Montserrat', sans-serif;} .CaseDesignIcone:hover{transform: scale(1); transition : all 0.2s linear;} .CaseDesignIcone:hover::before{background:#c89c7d; transition : all 0.2s linear;} .CaseDesignIcone .prix{color: #c89c7d;; font-weight: 700 !important; text-align: center; font:16px/32px 'Montserrat', sans-serif; text-align: center;} /* * Classe smartphone */ @media screen and (max-width: 1024px) { .CaseIconeStats, .CaseIconeStats .txtright, .CaseIconeStats .txtleft{ text-align: center !important;} } /* * Tarifs complet locaiton */ .TarifsComplet{} .TarifsComplet .TitreTarifs::after{ content: " » "; cursor: pointer;} .TarifsComplet .LesTarifsComplets{display: none;} .case_dispo{ width: 100%; white-space: nowrap; border-bottom: 1px solid #FFFFFF; cursor: pointer;transition : all 0.2s linear;font:16px/30px 'Montserrat', sans-serif; font-weight:600;} .case_dispo:hover{background: #FFFFFF; color:#3c3e38;transition : all 0.2s linear;} .UnProgramme{height: 400px; width: calc(50% - 20px); max-width: calc(50% - 20px); margin: 10px; position: relative;} .UnProgramme a{display: block; width: 100%; height: 100%; overflow: hidden;} .UnProgramme a .Content{ position: absolute; bottom: 0px; height:auto; left: 0px; width: 100%; background:rgba(60,62,56,0.51); text-align: center; color:#FFFFFF; transition : all 0.2s linear;} .UnProgramme a .Content h2{color:#FFFFFF;} .UnProgramme a .Content .Description{margin:10px;} .UnProgramme a:hover .Content{background:rgba(60,62,56,1);} @media screen and (max-width: 460px) { .UnProgramme{ width: calc(100% - 20px); max-width: calc(100% - 20px); height: 300px;} } @media screen and (max-width: 768px) { .UnProgramme{ width: calc(100% - 20px); max-width: calc(100% - 20px);} } /* * Listing appartements dans le sprogrammes */ ul.ListeAppartement{position: relative; float: left; width:100%;} ul.ListeAppartement li{ margin-bottom: 15px; font-weight: 700;} ul.ListeAppartement li a{ display: block;background: #c89c7d; color:#FFFFFF; line-height: 20px; padding: 5px;} ul.ListeAppartement li a:hover{ color:#000000;;} ul.ListeAppartement li .DetailAppartement{ display: none; width: 100%;} ul.ListeAppartement li .DetailAppartement table{ width: 100%;} ul.ListeAppartement li .DetailAppartement table thead{font-weight: 700;} ul.ListeAppartement li .DetailAppartement table tbody{font-weight: 300;} ul.ListeAppartement li .DetailAppartement table tbody tr{position: relative;} ul.ListeAppartement li .DetailAppartement table tbody tr:nth-child(2n+1){background: #efefef;} ul.ListeAppartement li .DetailAppartement table tbody tr.vendu{opacity: 0.5;} ul.ListeAppartement li .DetailAppartement table tbody tr.vendu::after{content: "VENDU"; position: absolute; right: 10px; color:#BD0003; font-weight: 900; font-size: 20px; margin-top: 8px;} ul.ListeAppartement li .DetailAppartement table tbody tr.option{opacity: 0.5;} ul.ListeAppartement li .DetailAppartement table tbody tr.option::after{content: "OPTION"; position: absolute; top: 50%; right: 10px; color:#BA9407; font-weight: 900; font-size: 20px; margin-top: 8px;} ul.ListeAppartement li .DetailAppartement table tbody tr td, ul.ListeAppartement li .DetailAppartement table thead tr td {padding: 2px; margin: 0px;} @media screen and (max-width: 460px) { ul.ListeAppartement li .DetailAppartement table thead{display: none;} ul.ListeAppartement li .DetailAppartement table tbody tr{border-bottom: 1px solid #959595;} ul.ListeAppartement li .DetailAppartement table tbody tr td{display: block; width: calc(50% - 10px); float: left; padding: 5px;} ul.ListeAppartement li .DetailAppartement table tbody tr td::before{content: attr(data-titre);float: left;font-weight: bold; margin-right: 5px; display: block; position: relative;} ul.ListeAppartement li .DetailAppartement table tbody tr td a{ float: left; margin-top: -5px;} ul.ListeAppartement li .DetailAppartement table tbody tr td a[data-txt]:hover::after{ content: attr(data-txt); text-align: center; position: absolute; left: 0; top: -44px; min-width: 120px; border: 1px #c89c7d solid; border-radius: 5px; background-color: #ffffff; padding: 5px; color: #3c3e38; font-size: 14px; z-index: 1; white-space: nowrap;} }