@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Outfit:wght@400;500;600&display=swap'); /*GENERAL*/ html { height: 100%; } * { box-sizing: border-box; /*outline: none;*/ /*-webkit-tap-highlight-color: rgba(255, 255, 255, 0);*/ } BODY { margin: 0; padding: 0; font-family: 'Outfit'; font-style: normal; font-weight: 400; /*font-size: 20px;*/ font-size: 14px; line-height: 30px; color: #5A5C5F; } h1 { margin: 10px 0; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 40px; line-height: 60px; color: #151B1D; } h2 { margin: 0; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 36px; line-height: 45px; color: #151B1D; } #page-agences-localite .header h2, #page-agences-localite .container > h2, #page-agences-localite .container > div > h2, #page-agences-departement h2, #page-immobilier-localite h2 { font-size: 24px; line-height: 30px; padding: 10px 0 20px; } h3 { margin: 10px 0; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 30px; line-height: 37px; color: #151B1D; } h1 > a, h2 > a, h3 > a { text-decoration: none; } p { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 30px; } p a { color: #008890; font-weight: 400; font-size: 16px; line-height: 26px; } table { border-spacing: 0; } table td { margin: 0; padding: 0; } div.round { position: relative; border-radius: 25px; overflow: hidden; } .image { position: relative; width: 480px; max-width: 100%; padding-top: 95%; } .image img { object-fit: cover; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } img.round { border-radius: 10px; } a img { border: 0; } a { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; text-decoration-line: none; color: #34393C; } small, small > a { font-family: 'Nunito'; font-size: 11px; } a:active, a:focus { color: #34393C; } a > i { color: #008890; } .block { display: block; } .left { text-align: left; } .right { text-align: right; } .pull-right { position: absolute!important; right: 0; padding: 20px 0; } .center { justify-content: center; text-align: center; } .middle { display: flex!important; align-items: center!important; } .middle.center { justify-content: center; } .bottom { display: flex!important; align-items: end!important; } .small { font-size: 11px!important; } .medium { font-size: 32px!important; } .big { font-size: 40px!important; } .bigger { font-size: 48px!important; } .disable { color: #BDBDBD; } .resume { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 24px; line-height: 36px; color: #151B1D; } .inline { display: inline-block!important; } .block { display: block!important; } li.middle { display: inline-flex!important; vertical-align: middle; } .ok { color: #1ABA16; } .nok { color: #BA1616; } .clear { clear: both; } .pagination { text-align: center; margin: 30px 0; font-size: 0; } .pagination > a { display: inline-block; vertical-align: middle; width: 36px; padding: 9px 0; background-color: #F5FAFA; border: 1px solid #F5FAFA; border-radius: 5px; font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: #34393C; margin: 5px; } .pagination > a.select { background-color: #008890; color: #FFF; } .pagination > a.disable { opacity: 0.25; } .pagination > a:first-child, .pagination > a:last-child { color: #BABDBE; border: 1px solid #BABDBE; background-color: #FFF; } .pagination > a:first-child i, .pagination > a:last-child i { color: #BABDBE; } .container { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0 20px; max-width: 1200px; } .container-small { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0 20px; max-width: 780px; } .container-fluid { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0 40px; } .row { margin: 0 -10px; padding: 0; font-size: 0; list-style: none; } .row.no-auto-width { display: inline-block; } .row > * { display: inline-block; margin: 0; padding: 0 10px; font-size: 15px; /*font default*/ vertical-align: top; } .row > .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .row > .col-1 { width: 8.333333%; } .row > .col-2 { width: 16.666667%; } .row > .col-3 { width: 25%; } .row > .col-4 { width: 33.33%; } .row > .col-5 { width: 41.666667%; } .row > .col-6 { width: 50%; } .row > .col-7 { width: 58.333333%; } .row > .col-8 { width: 66.66%; } .row > .col-9 { width: 75%; } .row > .col-10 { width: 83.333333%; } .row > .col-11 { width: 91.666667%; } .row > .col-12 { width: 100%; } .col-1-1 { display: grid!important; grid-template-columns: 1fr 1fr; } .col-1-2 { display: grid!important; grid-template-columns: 1fr 2fr; } .col-1-3 { display: grid!important; grid-template-columns: 1fr 3fr; } .col-2-1 { display: grid!important; grid-template-columns: 2fr 1fr; } .col-3-1 { display: grid!important; grid-template-columns: 3fr 1fr; } .col-4-1 { display: grid!important; grid-template-columns: 4fr 1fr; } .col-1-280 { display: grid!important; grid-template-columns: 1fr 280px; } .col-1-380 { display: grid!important; grid-template-columns: 1fr 380px; } .col-230-1 { display: grid!important; grid-template-columns: 230px 1fr; } .col-360-1 { display: grid!important; grid-template-columns: 360px 1fr; } .col-605-1 { display: grid!important; grid-template-columns: 605px 1fr; } .col-1-780-1 { display: grid!important; grid-template-columns: 1fr 780px 1fr; } .col-1-1-1 { display: grid!important; grid-template-columns: repeat(3, 1fr); } .col-1-1-1-1 { display: grid!important; grid-template-columns: repeat(4, 1fr); } .col-1-1-1-1-1 { display: grid!important; grid-template-columns: repeat(5, 1fr); } .col-1-1-1.col-center { display: grid!important; grid-template-columns: repeat(6, 1fr); } .col-1-1-1.col-center > a { grid-column: span 2; } .col-1-1-1.col-center > a:nth-last-child(1):nth-child(odd) { grid-column: 3 / span 2; } sup { line-height: 0; } span.highlight, h1.highlight, h2.highlight, h3.highlight, a.highlight, b.highlight, p.highlight { color: #008890!important; } span.highlightsmall, h1.highlightsmall, h2.highlightsmall, h3.highlightsmall, a.highlightsmall, b.highlightsmall, p.highlightsmall { color: #008890!important; font-size: 16px; } span.framboise, li.framboise { color: #E91286!important; } div.highlight, div.highlight-big { position: relative; z-index: 1; margin: 100px 0; } div.highlight-big { margin: 150px 0 100px; } div.highlight:before, div.highlight-big:before { content: ""; position: absolute; background: #F5FAFA; border-radius: 25px; top: -50px; left: -100px; width: calc(100% + 200px); height: calc(100% + 100px); z-index: 0; } div.highlight-big:before { top: -100px; height: calc(100% + 300px); } div.highlight-big + * { z-index: 1; } div.highlight > *, div.highlight-big > * { position: relative; z-index: 1; } /*div.highlight .pull-right { text-decoration: none; }*/ div.ombre1 { margin-top: 10%; } div.ombre1:before { content: ""; position: absolute; background: #BABDBE40; border-radius: 25px; top: -15%; left: -35%; width: 100%; height: 100%; z-index: 0; } div.ombre1 > * { position: relative; z-index: 1; } div.ombre2 { margin-top: 10%; } div.ombre2:before { content: ""; position: absolute; border: 2px solid #BABDBE40; border-radius: 25px; top: -15%; right: -35%; width: 100%; height: 100%; z-index: 0; } div.ombre2 > * { position: relative; z-index: 1; } div.separateur-degrade { position: relative; width: 100%; height: 300px; margin-top: -250px; background: linear-gradient(180deg, rgba(186, 189, 190, 0) 0%, rgba(186, 189, 190, 0.1) 100%); z-index: 0; pointer-events: none; } .badge { display: inline-block; padding: 0px 5px; font-size: 12px; border-radius: 5px; line-height: 20px; font-weight: 500; color: #FFF; } .badge.validation { background-color: #37bc9b; } .badge.information { background-color: #5D9CEC; } .badge.erreur { background-color: #F05050; } .badge.alert { background-color: #f0bd50; } .badge.autre { background-color: #7237BC; } .badge.divers { background-color: #E91388; } .badge.disable { background-color: #848484; } .ariane { line-height: none; margin: 30px 0; padding: 0; } .ariane > li { display: inline-block; margin: 0; padding: 10px 3px; vertical-align: middle; font-family: 'Nunito'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 14px; color: #86888B; } .ariane > li:not(:first-child) > i { color: #BABDBE; } .ariane a { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 14px; color: #34393C; text-decoration: none; } .carte { position: relative; padding: 40px; border-radius: 10px; height: 100%; text-decoration: none; } .carte-texte { margin: 50px 0; } .carte-vraiment-grande .carte-texte { margin: 10px 0 20px 0; font-size: 20px; line-height: 30px; } .carte-titre { margin: 0 0 20px; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 24px; line-height: 30px; color: #151B1D; } .carte-nom { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 20px; line-height: 30px; color: #151B1D; } .carte.carte-bordure { border: 1px solid #BABDBE40; } .carte.carte-liste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(286px, 1fr)); } .carte.carte-liste ul > li { margin: 0; padding: 0; } .carte.carte-liste ol { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 30px; padding-left: 21px; margin: 0; } .carte a:not(.bouton) { /*color: #5A5C5F;*/ text-decoration: none; vertical-align: middle; } .carte.carte-liste a:not(.bouton) { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 15px; } .carte a.bouton { /*display: block;*/ text-align: center; margin: 0; } .carte.carte-small { padding: 20px; } .carte.carte-liste { padding: 40px 50px; border: 1px solid #BABDBE40; border-top: 3px solid #008890; border-radius: 0px 0px 10px 10px; } .carte.carte-fond { overflow: hidden; background-size: cover; transition: 300ms ease-in-out background-size; background-position: 50% 50%; background-color: #BABDBE40; } .carte.carte-fond .highlight:not(div), .carte.carte-agences .highlight:not(div) { color: #8CC4CA!important; } .carte.carte-fond.carte-hover { background-size: 100%; } .carte.carte-fond:not(.carte-vraiment-grande,.carte-rejoindre):before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; /*transform: translateX(-50%);*/ transition: 300ms ease-in-out transform; /*background: linear-gradient(90deg, rgba(21, 27, 29, 0.75) 0%, rgba(21, 27, 29, 0) 100%);*/ background: linear-gradient(90deg, rgba(21, 27, 29, 0.75) 0%, rgba(21, 27, 29, 0) 100%) } .carte.carte-fond > * { position: relative; z-index: 2; } .carte.carte-hover.carte-fond:hover:before { transform: translateX(0); } .carte.carte-fond.carte-hover:hover { background-size: 110%; } .carte.carte-fond.carte-hover a.bouton { transition: 300ms ease-in-out margin; } .carte.carte-fond.carte-hover:hover a.bouton { margin: 10px 0!important; } .carte.carte-fond.carte-moyenne { height: 400px; } .carte.carte-fond.carte-grande { height: 500px; } .carte.carte-fond.carte-vraiment-grande { padding: 40px 100px; height: 670px; } .carte.carte-fond p, .carte.carte-couleur p { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 23px; letter-spacing: 0.02em; color: #FFFFFF; } .carte.carte-bouton { display: flex; align-items: center; cursor: pointer; /*margin: 10px 0;*/ padding: 30px; min-height: 150px; } .carte.carte-bouton > div { display: flex; align-items: center; width: 100%; } .carte.carte-bouton > div > div { width: 100%; } .carte.carte-ombre { box-shadow: 0px 15px 30px rgba(0, 55, 61, 0.15); } .carte.carte-fond .carte-titre, .carte.carte-couleur .carte-titre { color: #FFFFFF; max-width: 550px; } .carte.carte-fond.carte-vraiment-grande .carte-titre { max-width: 680px; } .carte.carte-couleur .carte-titre span { color: rgba(0,0,0,0.5); } .carte.carte-fond.carte-sombre .carte-titre, .carte.carte-couleur.carte-sombre .carte-titre, .carte.carte-sombre .carte-titre { color: #151B1D; } .carte.carte-sombre .carte-texte { color: #5A5C5F; } .carte.carte-fond .carte-nom, .carte.carte-couleur .carte-nom { color: #FFFFFF; max-width: 240px; } .carte .carte-titre.medium { line-height: 40px; } .carte .carte-titre.big { line-height: 50px; } .carte-vraiment-grande .carte-titre { line-height: 60px; } .carte.carte-bouton .carte-titre, .carte.carte-bouton p { margin: 0; } .carte.carte-bouton .carte-icone { color: #FFF; font-size: 45px; margin-right: 30px; } .carte.carte-fond .carte-contenu { color: #FFFFFF; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; margin: 10px 0; max-width: 550px; } .carte.carte-fond.carte-vraiment-grande .carte-contenu { max-width: 680px; } .carte.carte-fond a:not(.bouton) { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; display: flex; align-items: center; letter-spacing: 0.02em; color: #FFFFFF; } /*.carte.carte-fond a.bouton { background-color: #FFF; color: #151B1D; }*/ .carte.carte-fond i, .carte.carte-couleur i { color: #FFFFFF; } .carte.carte-couleur { background-color: #008890; } .carte.carte-compteurs { padding: 30px 10px; } .carte.carte-compteurs .carte-titre { max-width: initial; } .carte.carte-compteurs ul { list-style: none; margin: 0; padding: 0; } .carte.carte-compteurs ul > li { margin: 0; padding: 20px; text-align: center; } .carte.carte-compteurs .carte-compteur { color: #FFF; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 40px; line-height: 50px; white-space: nowrap; } .carte.carte-compteurs .carte-legende { color: #8CC4CA; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 30px; } .carte.carte-compteurs2 { padding: 30px 70px; background-color: #F5FAFA; } .carte.carte-compteurs2 .carte-titre { color: #151B1D; max-width: initial; font-size: 36px; line-height: 45px; } .carte.carte-compteurs2 ul { list-style: none; margin: 0; padding: 0; } .carte.carte-compteurs2 ul > li { margin: 0; padding: 20px; text-align: left; } .carte.carte-compteurs2 .carte-compteur { color: #008890; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 40px; line-height: 50px; white-space: nowrap; vertical-align: middle; } .carte.carte-compteurs2 .carte-legende { color: #8CC4CA; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 30px; } .carte.carte-agences { margin-bottom: 50px; padding: 75px 0 0 100px; } .carte.carte-agences * { z-index: 1; } .carte.carte-agences-simple { padding: 40px 0 0 50px; } .carte.carte-agences:before { content: ""; position: absolute; background: #151B1D; border-radius: 25px; top: 0; left: 0; width: calc(100% - 90px); height: calc(100% - 25px); z-index: 0; } .carte.carte-agences > div:first-child > div:first-child > div:first-child + div a { color: #FFF; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; } .carte.carte-agences .carte-titre { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 34px; line-height: 43px; color: #FFFFFF; } .carte.carte-agences .carte-contenu { margin: 0 0 75px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; color: #FFFFFF; } .carte.carte-agences > a:not(.bouton) { font-style: normal; font-weight: 500; color: #FFF; font-size: 18px; } .carte.carte-agences a:not(.bouton) i { color: #008890; } .carte.carte-adresse { margin: 20px 0; padding: 30px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 23px; } .carte.carte-adresse .carte-titre { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 20px; line-height: 23px; color: #151B1D; } .carte.carte-adresse .carte-contenu { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 23px; color: #34393C; } .carte.carte-adresse .carte-contenu a { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 23px; } .carte.carte-rejoindre { min-height: 330px; border-radius: 25px; background-position: 100% 0; padding: 37px 90px; } .carte.carte-rejoindre .fa-ul { margin-left: 28px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 34px; color: #FFF; } .carte.carte-rejoindre .fa-ul .fa-li i { color: #8CC4CA; } .carte.carte-rejoindre .carte-titre span { color: #8CC4CA; } .carte.carte-rejoindre a.bouton { display: inline-block; /*background-color: #151B1D;*/ /*color: #FFF;*/ font-size: 18px; font-weight: 500; padding: 20px 35px; letter-spacing: 0.02em; } .carte-agences .agence { position: relative; padding: 20px; width: 206px; height: 293px; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.02em; color: #FFFFFF; border-radius: 25px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .carte-agences .agence:before { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 0; content: ""; background: transparent linear-gradient(180deg, rgba(21, 27, 29, 0) 50.17%, rgba(21, 27, 29, 0.9) 100%); } .carte-agences .agence > div { position: absolute; bottom: 20px; z-index: 1; } .carte-agences .agence .agence-nom { margin-bottom: 20px; font-family: 'Nunito'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 22px; color: #FFFFFF; } .carte-hero { width: 100%; height: 600px; border-radius: 0; /*background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;*/ } .carte-hero .carte-titre { font-size: 35px; line-height: initial; } .couverture { position: relative; margin: -100px -100px 100px; padding: 100px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; height: 800px; border-radius: 0px 0px 25px 25px; } .couverture:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0 0 25px 25px; background-color: #151b1d33; z-index: 1; } .couverture > * { position: relative; z-index: 2; } .couverture > div:not(#recherche) { max-width: 733px; margin: 110px 0; height: 370px; } .couverture h1 { font-size: 48px; line-height: 60px; color: #FFF; } .couverture p { color: #FFF; font-size: 20px; line-height: 30px; } .couverture #recherche form > div > ul { display: grid; grid-template-columns: 1fr 1fr 1fr 180px; } .couverture #recherche form input, .couverture #recherche form select { width: 100%; } .contenu-article h2 { font-weight: 500; font-size: 36px; line-height: 45px; color: #008890; } /*.accordeon > li > div:first-child + div { display: none; } .accordeon > li > div:first-child > i:first-child:before { content: "\f067"; } .accordeon > li > div:first-child > i { padding: 5px 7px; background-color: #fff; color: #f3f2f3; border-radius: 5px; } .accordeon > li.select > div:first-child > i { padding: 5px 7px; background-color: #f3f2f3; color: #fff; border-radius: 5px; } .accordeon > li.select > div:first-child + div { display: block; } .accordeon > li.select > div:first-child > i:first-child:before { content: "\f068"; }*/ /*FORMULAIRE*/ /*#captchagc, #captchagc * { box-sizing: border-box; outline: none; } #captchagc { position: relative; background-color: #E7E7E7; border: 1px solid #D6D6D6; width: 250px; height: 70px; overflow: hidden; margin: 10px auto; } #captchagc > img:nth-of-type(1) { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; z-index: 2; margin: 0!important; } #captchagc > img:nth-of-type(2) { position: absolute; top: 40px; left: 25px; width: 25px; height: 25px; z-index: 3; margin: 0!important; animation: 3s ease-out 1s infinite running captchagc; } @keyframes captchagc { 0% { left: 25px; } 25% { left: 25px; } 50%{ left: 210px; } 100%{ left: 210px; } } #captchagc > img:nth-of-type(1) + div { position: absolute; top: 14px; right: 14px; border: 1px solid #535353; border-radius: 4px; width: 41px; height: 40px; background-color: #FFF; z-index: 1; } #captchagc > img:nth-of-type(1) + div.accept { border: 1px solid #F3990C; } #captchagc > img:nth-of-type(1) + div.hover { border: 1px solid #1CD129; } #captchagc:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ">>>>>>>>"; font-family: 'Open sans', sans-serif; font-size: 17px; } #captchagc.valid:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background-color: rgba(255,255,255,0.9); z-index: 3; } #captchagc > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; opacity: 0; transition: ease-in-out 200ms opacity, ease-in-out 200ms left; } #captchagc.valid > i:nth-of-type(1) { opacity: 1; left: 17%; } #captchagc > i:nth-of-type(1):before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; padding: 5px; color: #12D954; font-size: 30px; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #FFF; border: 2px solid #12D954; } #captchagc > i:nth-of-type(2) { position: absolute; top: 23px; left: 113px; z-index: 5; font-size: 25px; opacity: 1; } #captchagc.valid > img:nth-of-type(1) { top: 18px!important; left: 197px!important; } #captchagc.valid > img:nth-of-type(2) { display: none; }*/ /*FORMULAIRES*/ form { display: inline; } .bouton, .bouton:active, .bouton:focus { display: inline-block; margin: 10px; padding: 15px 25px; border: 0; border-radius: 10px; font-family: 'Outfit'; text-decoration: none; font-size: 16px; font-weight: 500; color: #FFF; line-height: 25px; background-color: #008890; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; cursor: pointer; } .bouton > i { margin-right: 5px; vertical-align: middle; } .bouton.sombre, .bouton.sombre:active, .bouton.sombre:focus { background-color: #151B1D; color: #FFFFFF; } .bouton.clair, .bouton.clair:active, .bouton.clair:focus { background-color: #FFFFFF; color: #151B1D; } .bouton:hover { text-decoration: none!important; background-color: #535353; color: #FFFFFF; } .bouton.bouton-ombre { padding: 11px; font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #00373D; background: #FFFFFF; box-shadow: 0px 5px 30px -10px rgba(0, 55, 61, 0.5); border-radius: 100px; } .bouton.bouton-ombre > i { font-size: 15px; vertical-align: text-bottom; color: #BABDBE; } .bouton.bouton-fixed { position: fixed; z-index: 2; } input[type='text'], input[type='password'], select, textarea { margin: 0; padding: 16px; border: 1px solid #BABDBE80; border-radius: 10px; outline: none; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #5A5C5F; } select { padding: 15px 16px; } input[type='text']:focus, input[type='password']:focus, select:focus, textarea:focus { border: 1px solid #008890; outline: none; } .input-append { position: relative; left: -20px; margin: -5px; } /*fieldset { margin: 0; padding: 0; border: 0; } fieldset > legend { text-align: center; font-size: 16px; font-weight: bold; } fieldset > ul { margin: 0; padding: 0; font-size: 0; list-style: none; } fieldset > ul > li { display: inline-block; width: 50%; margin: 0; padding: 0; font-size: 14px; vertical-align: middle; } fieldset > ul > li .row { margin: 0; } fieldset > ul > li .row > * { padding: 0; } fieldset > ul > li .input { display: block; width: 100%; padding: 5px; text-align: left; font-size: 0; } fieldset > ul > li .input > label { display: block; font-weight: 400; font-size: 16px; padding: 3px 0; } fieldset > ul > li .input > div > * { font-size: 14px; } fieldset > ul > li .input > div > input, fieldset > ul > li .input > div > select, fieldset > ul > li .input > div > textarea { display: inline-block; width: 100%; font-size: 14px; } fieldset > ul > li.double { width: 100%; }*/ .input { position: relative; } .input label { position: absolute; top: 13px; left: 17px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 14px; color: #5A5C5F; pointer-events: none; transition: 200ms ease-in-out; } .input input[type='text'], .input input[type='password'], .input textarea, .input select { padding: 20px 16px 12px 16px; background-color: #F5FAFA80; border-color: #BABDBE80; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; resize: none; width: 100%; color: #151B1D; line-height: 23px; } .input select { padding: 17px 16px 15px 16px; } .input input[type='text']:focus + label, .input input[type='text'].complet + label, .input input[type='password']:focus + label, .input input[type='password'].complet + label, .input textarea.complet + label, .input textarea:focus + label { color: #86888B; font-size: 10px; top: -3px; } .input textarea { height: 100%; } .input-checkbox { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 18px; color: #5A5C5F; } form .bouton.block, form .bouton.block:focus, form .bouton.block:active { margin: 0; display: block; width: 100%; text-align: center; } /*NOTIFICATIONS*/ .notification { margin: 10px; padding: 10px 20px; border-radius: 3px; text-align: left; color: #FFF; } .notification.small { margin: 0; } .notification:before { display: inline-block; margin: 0 10px 0 0; font-family: "Font Awesome 6 Pro"; font-size: 18px; vertical-align: middle; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notification > span { display: inline-block; width: calc(100% - 40px); vertical-align: middle; } .notification.closable:after { content: "\f00d"; position: absolute; top: 50%; right: 0; margin: 0 10px 0 0; font-family: "Font Awesome 6 Pro"; font-size: 18px; vertical-align: middle; transform: translateY(-50%); cursor: pointer; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notification.absolute { position: absolute; top: 0; right: 0; left: 0; } .notification.validation, .bouton.validation { background-color: #37bc9b; } .notification.validation:before { content: "\f00c"; } .notification.information, .bouton.information { background-color: #5D9CEC; } .notification.information:before { content: "\f05a"; } .notification.erreur, .bouton.erreur { background-color: #F05050; } .notification.erreur:before { content: "\f06a"; } .notification.alert, .bouton.alert { background-color: #f0bd50; } .notification.alert:before { content: "\f071"; } .notification.disable, .bouton.disable { background-color: #A2A2A2; } /*SITE*/ #site { position: relative; width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; } #page-blog-article #site { overflow-x: visible; } /*HEADER*/ #site > header { z-index: 55; position: fixed; top: 0; right: 0; left: 0; text-align: right; background-color: transparent; /*box-shadow: 0 2px 2px rgba(0,0,0,0.1);*/ transition: background-color 0.5s ease; } #site > header > .container { height: 100px; transition: height 0.5s ease; } #site > header.scroll { background-color: rgba(255,255,255,1) !important; box-shadow: 0 2px 2px rgba(0,0,0,0.1) !important; transition: background-color 0.5s ease; } #site > header.scroll > .container { height: 60px; } #site > header #logo { display: flex; position: absolute; align-items: center; height: 100%; } #site > header #logo > img { height: 90%; transition: width ease-in-out 0.15s; } .header { border-bottom: 1px solid #babdbe33; padding-bottom: 40px; margin-bottom: 40px; } /*MENU*/ #menu .burger, #menu .recherche { display: none; } #menu { padding: 0; height: 100%; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; text-align: right; letter-spacing: 0.02em; } #menu > ul { display: inline-block; margin: 0; padding: 0; list-style: none; height: 100%; } #menu > ul > li { display: inline-flex; align-items: center; position: relative; vertical-align: middle; height: 100%; } #menu > ul > li:first-child > a { padding: 7px 20px 8px; } #menu > ul > li > a { display: block; position: relative; padding: 10px 8px; overflow: hidden; text-decoration: none; font-size: 15px; color: #3b3b3b; font-weight: 600; } #menu > ul > li > a.bouton { padding: 8px 18px; border: 2px solid #00738140; background-color: initial!important; } /*#menu > ul > li.sous-menu > a { padding: 10px 20px 10px 10px; }*/ #menu > ul > li:first-child > a > i { line-height: 25px; } #menu > ul > li > a > .fa-angle-down { position: absolute; top: calc(50% - 2px); right: 4px; font-size: 17px; transition: top 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #menu > ul > li:hover > a > .fa-angle-down.down1 { top: 120%; } #menu > ul > li > a > .fa-angle-down.down2 { top: -20%; } #menu > ul > li:hover > a > .fa-angle-down.down2 { top: calc(50% - 2px); } #menu > ul > li > a:hover, #menu > ul > li.select > a:not(.bouton) { color: #008890; } #menu > ul > li > ul { z-index: 3; position: absolute; top: 100%; padding: 0 5px; max-height: 0; min-width: 100%; overflow: hidden; text-align: left; list-style: none; background-color: #fff; transition: max-height ease-in-out 0.4s; border-radius: 0 0 10px 10px; box-shadow: 0px 10px 30px -10px rgba(14, 128, 139, 0.25); } #menu > ul > li > ul > li { padding: 5px 0; } #menu > ul > li > ul > li:first-child { padding-top: 15px; } #menu > ul > li > ul > li:last-child { padding-bottom: 15px; } #menu > ul > li:hover ul { max-height: 500px; } #menu > ul > li > ul > li { white-space: nowrap; } #menu > ul > li > ul > li > a { display: block; padding: 5px; text-decoration: none; font-size: 15px; white-space: nowrap; color: #666; } #menu > ul > li > ul > li > a:hover, #menu > ul > li > ul > li > a.select { color: #008890; } #page-agence header:not(.scroll) #logo img { content: url(../img/logo-ladresse-light.png); background-size: contain; } /*#page-agence h2 { padding-right: 210px; }*/ @media screen and (min-width: 430px) { #page-agence header:not(.scroll) #menu a, #page-agence header:not(.scroll) #menu i { color: #FFF; } #page-agence header:not(.scroll) #menu .bouton { border-color: rgba(255,255,255,0.25); } } #page-blog-article .resume { margin: 50px 0; } #page-blog-article .bouton.bouton-fixed { transform: translateX(-20px); } .article { margin: 75px 0 0; } .article > div { margin: 15px 0 0; } .CJEditeur_body img, .article img { border-radius: 10px; max-width: 100%; height: initial; } .CJEditeur_body iframe, .article iframe { border-radius: 10px; width: 100%; max-width: 740px; height: 436px; margin: 10px 0; } .CJEditeur_body a, .article a { font-weight: 400; font-size: 20px; line-height: 30px; color: #008890; text-decoration: underline; } .partage-reseaux { position: sticky; top: 60px; height: 305px; } .partage-reseaux > ul { position: absolute; top: 30px; right: 0; list-style: none; margin: 0; padding: 15px 0; text-align: center; width: 60px; z-index: 2; background: #FFFFFF; box-shadow: 0px 10px 30px -10px rgba(0, 115, 129, 0.25); border-radius: 100px; } .partage-reseaux> ul > li { margin: 15px 0; padding: 0; width: 60px; text-align: center; } .partage-reseaux > ul > li i { color: #008890; } .partage-reseaux > ul > li:last-child { height: 60px; } .partage-reseaux > ul> li:last-child > span { position: relative; top: 20px; display: block; transform: rotate(-90deg); font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #34393C; text-align: center; } #contact-map { z-index: 1; height: 500px; border-radius: 25px; overflow: hidden; margin: 0; background-color: #BABDBE; } .coordonnees { width: 100%; border-top: 1px solid #babdbe40; border-bottom: 1px solid #babdbe40; padding: 30px 0; font-size: 16px; font-weight: 400; } .coordonnees a { font-weight: 400; font-size: 20px; } .coordonnees > div:first-child { font-size: 22px; } .coordonnees > div:first-child + div { font-size: 20px; } /*CONTENT*/ #content { position: relative; margin-top: 100px; min-height: 365px; } #content .content img { margin: 5px; } #content .content img[align='left'] { margin: 5px 20px 5px 0; } #content .content img[align='right'] { margin: 5px 0 5px 20px; } #content .content img[align='absmiddle'] { margin: 5px; } /*RECHERCHE*/ #recherche { white-space: nowrap; z-index: 3; position: relative; height: 189px; } #recherche.intension { padding-top: 15px; height: 137px; } #recherche > div { display: grid; position: absolute; width: 100%; } #recherche > div > div { display: inline-block; padding: 0 20px; background: #FFFFFF; box-shadow: 0px 10px 30px -5px rgba(0, 55, 61, 0.15); border-radius: 10px 10px 0 0; width: fit-content; } #recherche.intension > div > div { display: none; } #recherche > div > div > ul { list-style: none; margin: 0; padding: 0; font-size: 0; height: 52px; border-bottom: 1px solid #babdbe40; } #recherche > div > div > ul > li { display: inline-block; margin: 0 30px 0 0; padding: 15px 0 16px 0; border-bottom: 2px solid transparent; font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: 0.02em; cursor: pointer; } #recherche > div > div > ul > li:last-child { margin-right: 0; } #recherche > div > div > ul > li a { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: 0.02em; color: #5A5C5F; } #recherche form input { /*width: 100%;*/ } #recherche > div > div > ul > li.select, #recherche > div > div > ul > li:hover { padding: 15px 0 15px 0; font-weight: 500; color: #008890; border-bottom: 2px solid #008890; } #recherche form > div { background: #FFFFFF; box-shadow: 0px 10px 30px -5px rgba(0, 55, 61, 0.15); border-radius: 0 10px 10px 10px; /*display: grid;*/ /*grid-template-columns: 1fr 1fr 1fr 1fr;*/ } #recherche form > div > ul { display: flex; list-style: none; margin: 0; padding: 10px; } #recherche form > div > ul > li { vertical-align: middle; padding: 10px; } #recherche.intension form > div > ul > li { flex: auto; } #recherche.intension form input, #recherche.intension form select, #recherche.intension form button { width: 100%; } #recherche form > div > ul > li .bouton { margin: 0; padding: 15px 30px; border-radius: 10px; font-size: 20px; } #recherche form #recherche_criteres { display: none; /*width: 100%;*/ } #recherche form > a { display: block; margin: 10px 20px; font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; color: #34393C; cursor: pointer; } #recherche #recherche_criteres { width: calc(100% - 40px); margin: 0 20px; padding: 20px 0; border-top: 1px solid #BABDBE40; } #recherche #recherche_criteres label { display: inline-block; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 18px; margin: 10px 10px 10px 0; } #recherche #recherche_criteres > div:not(:last-child) { margin-bottom: 20px; } #recherche #recherche_criteres > div:not(:last-child) label { display: block; } #recherche #recherche_criteres > div:last-child { border-top: 1px solid #BABDBE40; padding: 20px 0 0 0; } #recherche #recherche_criteres a { display: inline-block; padding: 15px 30px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; text-align: right; color: #86888B; cursor: pointer; } #recherche #recherche_criteres button { margin: 0 0 0 20px; width: 240px; } #recherche #recherche_criteres select, #recherche #recherche_criteres input[type='text'] { width: 100%; max-width: 180px; } .checkbox { position: relative; display: inline-block; width: 30px; height: 30px; background: #f5fafa80; border: 1px solid #BABDBE80; border-radius: 10px; vertical-align: middle; margin: 0 10px 0 0; } .checkbox > span:after { content: "\f00c"; position: absolute; top: 50%; left: 50%; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #007381; transform: translate(-50%, -50%); font-size: 20px; } .checkbox > span, .checkbox > input { display: none; } .checkbox > input:checked + span { display: block; } /*.checkbox:required { border: 1px solid #FF0000; }*/ /*Accueil*/ #page-accueil h1 { font-size: 48px; } /*Liste biens*/ #page-annonces .biens { overflow: auto; height: 790px; } .biens > ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; grid-gap: 30px 20px; } #page-annonces .biens > ul { grid-template-columns: repeat(2, 1fr); } #page-annonces .bien { width: 100%; } .biens > ul > li { display: inline-block; } .biens::-webkit-scrollbar { width: 0; } /*Liste agences*/ .agences { margin: 10px 0 50px; } .agences > ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; list-style: none; margin: 0; padding: 0; grid-gap: 30px 20px; } .agences > ul > li { display: inline-block; } /*Spécial page annonces*/ #page-annonces h1 { font-size: 36px; margin-top: 0; line-height: 45px; } #page-annonces h1 .small { font-size: 24px!important; font-weight: 600; line-height: 30px; } #page-annonces .compteur { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 27px; color: #BABDBE; } #page-annonces .compteur > a { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; text-decoration-line: underline; } #annonces-map { height: 100%; border-radius: 25px; z-index: 1; outline: none; } .galerie-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1%; margin: 0; padding: 0; list-style: none; } .galerie-images > li { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 230px; } .galerie-images > li > a { display: block; } .galerie-images > li > a > img { width: 220px; height: 220px; margin: 0; padding: 0; object-fit: cover; object-position: top; vertical-align: middle; } /*SLIDER*/ .galerie-biens, .galerie-videos, .galerie-agences, .galerie-textes, .galerie-avis { position: relative; margin: 30px 0; } .galerie-biens > ul, .galerie-videos > ul, .galerie-agences > ul, .galerie-textes > ul, .galerie-avis > ul { list-style: none; margin: 0; padding: 0; display: inline-flex; transform: translateX(0); transition: 200ms ease-out transform; } .galerie-biens > ul:before, .galerie-videos > ul:before, .galerie-agences > ul:before, .galerie-textes > ul:before, .galerie-avis > ul:before { content: ""; position: absolute; left: -20px; width: 30px; height: 250px; top: 50%; transform: translateY(-50%); } .galerie-biens > ul > li, .galerie-videos > ul > li, .galerie-agences > ul > li, .galerie-textes > ul > li, .galerie-avis > ul > li { margin: 0; padding: 0 20px 0 0; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .galerie-textes > ul > li > div { display: block; padding: 20px; width: 310px; overflow: hidden; background-color: #FFFFFF; box-shadow: 0px 10px 30px -10px rgba(14, 128, 139, 0.25); border-radius: 10px; text-decoration: none; font-size: 14px; } .galerie-textes > ul > li > div .texte-titre, .galerie-textes > ul > li > div .texte-auteur { font-weight: 500; color: #000000; font-size: 16px; } .galerie-textes > ul > li > div .texte-message { margin: 10px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .galerie-biens > i.fa-angle-left, .galerie-biens > i.fa-angle-right, .galerie-videos > i.fa-angle-left, .galerie-videos > i.fa-angle-right, .galerie-agences > i.fa-angle-left, .galerie-agences > i.fa-angle-right, .galerie-textes > i.fa-angle-left, .galerie-textes > i.fa-angle-right, .galerie-avis > i.fa-angle-left, .galerie-avis > i.fa-angle-right { display: none; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 100%; font-size: 20px; color: #FFF; background-color: rgba(0,0,0,0.5); width: 40px; height: 40px; padding: 10px 15px; z-index: 2; cursor: pointer; } .galerie-biens:hover > i.fa-angle-left:not(.disable), .galerie-biens:hover > i.fa-angle-right:not(.disable), .galerie-videos:hover > i.fa-angle-left:not(.disable), .galerie-videos:hover > i.fa-angle-right:not(.disable), .galerie-agences:hover > i.fa-angle-left:not(.disable), .galerie-agences:hover > i.fa-angle-right:not(.disable), .galerie-textes:hover > i.fa-angle-left:not(.disable), .galerie-textes:hover > i.fa-angle-right:not(.disable), .galerie-avis:hover > i.fa-angle-left:not(.disable), .galerie-avis:hover > i.fa-angle-right:not(.disable) { display: block; } .galerie-biens > i.fa-angle-left, .galerie-videos > i.fa-angle-left, .galerie-agences > i.fa-angle-left, .galerie-textes > i.fa-angle-left, .galerie-avis > i.fa-angle-left { right: calc(52vw + 40%); } .galerie-biens > i.fa-angle-right, .galerie-videos > i.fa-angle-right, .galerie-agences > i.fa-angle-right, .galerie-textes > i.fa-angle-right, .galerie-avis > i.fa-angle-right { left: calc(52vw + 40%); } /*Vidéo*/ .video { display: block; } .video img { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; max-width: 490px; } /*Avis*/ .avis { position: relative; text-align: center; font-size: 17px; border: 1px solid #BABDBE80; border-radius: 10px; padding: 40px 20px; width: 350px; } .avis > img { position: absolute; right: 10px; top: 10px; } .avis > div:last-of-type { font-size: 17px; height: 122px; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box !important; } .avis .avis-note > i { color: #BABDBE; } .avis .avis-note, .avis .avis-note > i.select { color: #008890; } /*Bien*/ .bien { display: block; width: 275px; overflow: hidden; background-color: #FFFFFF; box-shadow: 0px 10px 30px -10px rgba(14, 128, 139, 0.25); border-radius: 10px; text-decoration: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } .bien .bien-photo { position: relative; width: 100%; height: 120px; border-radius: 10px; overflow: hidden; user-select: none; background-color: #F3F5F4; } .bien .bien-photo:before { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, rgba(21, 27, 29, 0) 50%, rgba(21, 27, 29, 0.5) 100%); } .bien .bien-photo img { object-fit: contain; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; width: 100%; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); } .bien .bien-photo .bien-geo { position: absolute; z-index: 3; bottom: 0; left: 0; padding: 5px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #FFF; } .bien .bien-exclusif { position: absolute; right: 5px; top: 5px; background-color: #E91388; display: inline-block; z-index: 2; color: #FFF; padding: 0px 5px; font-size: 12px; border-radius: 5px; } .bien .bien-detail { display: grid; grid-template-columns: 3fr 2fr; align-items: center; padding: 20px; margin: 0; font-size: 0; } .bien .bien-prix { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 25px; color: #008890; } .bien .bien-type { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 12px; text-align: right; color: #151B1D; } .bien .bien-description { border-top: 1px solid #BABDBE40; margin: 0 20px 0; padding: 20px 0; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; height: 117px; /*color: #008890;*/ } .bien .bouton { display: block; margin: 0 0 0 20px; max-width: initial; width: calc(100% - 20px); } /*Actualites*/ .actualites { text-align: center; } .actualites > ul { list-style: none; margin: 30px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px 60px; } .actualites > ul > li { margin: 0; padding: 0; text-align: left; } .actualites-categories > ul { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .actualites-categories > ul > li { margin: 0; padding: 0 5px 5px 0; white-space: nowrap; } /*Actualite*/ .actualite { display: block; text-decoration: none; font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 27px; } .actualite .actualite-photo { position: relative; width: 100%; height: 160px; border-radius: 10px; overflow: hidden; user-select: none; margin-bottom: 20px; } .actualite .actualite-photo .badge { position: absolute; bottom: 5px; left: 5px; } .actualite .actualite-photo img { object-fit: cover; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; width: 100%; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } /*Equipe*/ .equipe { position: relative; } .equipe:before { content: ""; position: absolute; background: #F5FAFA; border-radius: 25px; top: -50px; left: 100px; width: 100%; height: 500px; z-index: 0; background-image: url(../img/a-vert.png); background-position: calc(100% - 30px) 30px; background-repeat: no-repeat; } .equipe > * { position: relative; z-index: 1; } .equipe h3 { margin: 50px 0 40px 200px; font-size: 40px; line-height: 50px; } .equipe ul { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 40px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .equipe ul > li { margin: 0; padding: 0; width: 160px; } .agent { } .agent .agent-photo { position: relative; width: 160px; height: 160px; overflow: hidden; border-radius: 10px; margin-bottom: 20px; } .agent .agent-photo img { object-fit: cover; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .agent .agent-nom { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 23px; color: #151B1D; } .agent .agent-fonction { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 23px; color: #5A5C5F; } /*Agence*/ .agence { display: block; width: 275px; overflow: hidden; background-color: #FFFFFF; box-shadow: 0px 10px 30px -10px rgba(14, 128, 139, 0.25); border-radius: 10px; text-decoration: none; } .agence .agence-photo { position: relative; width: 100%; height: 160px; border-radius: 10px; overflow: hidden; user-select: none; background-color: #F3F5F4; } .agence .agence-photo:before { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #151b1d00 50%, #151b1d80 100%); } .agence .agence-photo img { object-fit: contain; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; width: 100%; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .agence .agence-photo .agence-geo { position: absolute; z-index: 3; bottom: 0; left: 0; padding: 5px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #FFF; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } .agence .agence-details { padding: 20px; } .agence .agence-nom { font-family: 'Outfit'; font-weight: 500; font-size: 19px; line-height: 23px; color: #151B1D; height: 46px; } .agence .agence-description { margin: 10px 0; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 23px; /*color: #008890;*/ height: 95px; } .agence .agence-description .highlight { font-size: 18px; line-height: 24px; font-weight: 400; } .agence a { text-decoration: none; } .agence .bouton { margin: 0!important; } /*#mentions { font-size: 0; } #mentions h2, #mentions h3 { margin: 0; padding: 0 0 10px; text-align: left; text-align: center; font-size: 16px; } #mentions > div { margin: 10px 0 10px; padding: 10px; font-size: 14px; background-color: #F6F6F6; } #mentions > div:first-child, #mentions > div:first-child + div { display: inline-block; width: calc(50% - 5px); margin: 10px 0 0; min-height: 280px; vertical-align: top; } #mentions > div:first-child { margin-right: 5px; } #mentions > div:first-child + div { margin-left: 5px; }*/ /*ANNONCE*/ #annonce { padding: 20px 0; } p, .contenu ul, .contenu ol { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; color: #5A5C5F; } #annonce h1 { font-size: 40px; line-height: 50px; } #annonce h2 { font-size: 24px; } #annonce .annonce-reference { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 19px; letter-spacing: 0.02em; } #annonce .annonce-caracteristiques { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; letter-spacing: 0.02em; color: #86888B; } #annonce .annonce-prix { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 40px; line-height: 50px; color: #0E808B; } #annonce .annonce-prix > span { font-size: 30px; } #annonce .annonce-essentiel { line-height: none; margin: 0; padding: 0; } #annonce .annonce-essentiel > li { margin: 0; padding: 0; display: inline-block; vertical-align: middle; width: 90px; height: 90px; } #annonce .annonce-essentiel > li > i { font-size: 34px; color: #008890; } #annonce .annonce-essentiel > li > span { display: block; margin-top: 5px; font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: 0.02em; } #annonce #annonce-resume .bien-exclusif { background-color: #E91388; display: inline-block; z-index: 2; color: #FFF; padding: 0px 5px; font-size: 12px; border-radius: 5px; line-height: 20px; } #annonce #annonce-resume .bouton { margin-left: 0; } #annonce-map { z-index: 1; height: 800px; border-radius: 25px; overflow: hidden; margin: 0px 50px; background-color: #BABDBE; outline: none; } .galerie-photos > a { display: block; position: relative; overflow: hidden; border-radius: 25px; padding-top: 95%; } .galerie-photos > a > i.fa-clone { position: absolute; bottom: 20px; right: 20px; color: #FFF; font-size: 20px; z-index: 3; cursor: pointer; } .galerie-photos > a > i.fa-angle-left, .galerie-photos > a > i.fa-angle-right { display: none; position: absolute; top: 50%; transform: translateY(-50%); color: #FFF; font-size: 30px; z-index: 2; text-shadow: 1px 1px 6px rgba(0,0,0,0.5); } .galerie-photos > a > i.fa-angle-left { left: 10px; } .galerie-photos > a > i.fa-angle-right { right: 10px; } .galerie-photos > a > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; object-fit: cover; } .galerie-photos > a > img:first-child { z-index: 2; opacity: 1; transition: 1s linear opacity; } .galerie-photos > a > img:first-child + img { z-index: 1; opacity: 1; transition: 1s linear opacity; } .show { animation: 0.2s linear show forwards; } .hide { animation: 0.2s linear hide forwards; } @keyframes show { from { opacity: 0; } to { opacity: 1; } } @keyframes hide { from { opacity: 1; } to { opacity: 0; } } .galerie-photos > a + div { position: relative; margin: 20px 0; } .galerie-photos > a + div > div { position: relative; overflow: hidden; } .galerie-photos > a + div > div > ul { list-style: none; margin: 0; padding: 0; font-size: 0; white-space: nowrap; transition: 200ms ease-in-out transform; transform: translateX(0); } .galerie-photos > a + div > div > ul > li { position: relative; display: inline-block; width: calc(20% - 16px); margin: 0 20px 0 0; padding: 0; padding-top: 16%; vertical-align: middle; border-radius: 10px; overflow: hidden; border: 1px solid transparent; background-color: #e9e9e9; } .galerie-photos > a + div > div > ul > li.select { border: 1px solid #008890; } .galerie-photos > a + div > div > ul > li img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; object-fit: cover; } .galerie-photos > a + div > i[class*='left'], .galerie-photos > a + div > i[class*='right'] { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; color: #BABDBE; } .galerie-photos > a + div > i[class*='left'] { left: -20px; } .galerie-photos > a + div > i[class*='right'] { right: -20px; } /*popbox*/ .popbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; background-color: rgba(0,0,0,0.8); opacity: 0; backdrop-filter: blur(4px); cursor: zoom-out; } .popbox-text { display: none; } .popbox > div { background-color: #FFF; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 10px; overflow: hidden; /*height: 100%;*/ /*max-height: 80%;*/ max-width: 80%; cursor: initial; } .popbox > div > .popbox-title { position: relative; background-color: #EFEFEF; padding: 15px; height: 60px; font-size: 20px; } .popbox > div > .popbox-title > .fa-times { position: absolute; top: 50%; right: 15px; padding: 5px; cursor: pointer; font-size: 20px; transform: translateY(-50%); } .popbox > div > .popbox-content { width: 100%; height: calc(100% - 60px); overflow: auto; padding: 15px; } .popbox > div > .popbox-content ul { padding-left: 16px; } .popbox i.fa-angle-left, .popbox i.fa-angle-right { /*display: none;*/ position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: #FFF; z-index: 2; padding: 30px; text-shadow: 1px 1px 6px rgba(0,0,0,0.5); cursor: pointer; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .popbox i.fa-angle-left { left: 20px; } .popbox i.fa-angle-right { right: 20px; } .popbox > img { border-radius: 10px; position: fixed; transform: translate(0,0); width: initial!important; height: initial!important; transition: 0.2s ease-out transform,0.2s ease-out top,0.2s ease-out left,0.2s ease-out max-width,0.2s ease-out max-height; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .popbox iframe { position: fixed; transform: translate(0,0); } .popbox img.centre, .popbox iframe.centre { top: 50%!important; left: 50%!important; transform: translate(-50%,-50%)!important; max-width: 90%!important; max-height: 90%!important; object-fit: contain; } #annonce #annonce-caracteristiques .carte-titre { color: #008890; } .accordeon { list-style: none; margin: 0; padding: 0; } .accordeon > li { margin: 0; padding: 0; } .accordeon > li > div:first-child { padding: 10px; border-radius: 10px; font-family: 'Outfit'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 19px; letter-spacing: 0.02em; } .accordeon.accordeon-fixe > li > div:first-child { background-color: #BABDBE; color: #FFFFFF; } .accordeon.accordeon-fixe > li > div:first-child + div { padding-bottom: 10px; } .accordeon:not(.accordeon-fixe) > li:not(.select) > div:first-child + div { display: none; } .accordeon > li > div:first-child i { font-size: 14px; color: #0E808B; } .accordeon.accordeon-highlight > li > div:first-child i { color: #8CC4CA; } .accordeon.accordeon-highlight .carte { border-radius: 10px 10px 25px 25px; } .accordeon.carte { border-radius: 25px; } .accordeon.carte:not(.accordeon-fixe) { padding: 10px 30px; height: initial; } .accordeon:not(.accordeon-fixe) > li > div:first-child { display: flex; padding: 0; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; color: #151B1D; cursor: pointer; } .accordeon.accordeon-highlight > li { margin: 0 0 10px; } .accordeon.accordeon-highlight > li > div:first-child { padding: 0 30px; background-color: #00373D; color: #FFF; border-radius: 10px; } .accordeon:not(.accordeon-fixe) > li > div:first-child > div { padding: 15px 0; } .accordeon:not(.accordeon-fixe) > li > div:first-child + div { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 25px; padding-bottom: 10px; } .accordeon:not(.accordeon-fixe,.accordeon-highlight) > li:not(:first-child) > div:first-child > div:first-child { border-top: 1px solid #babdbe40; } .accordeon:not(.accordeon-fixe) > li > div:first-child > div:first-child { width: 100%; } .accordeon:not(.accordeon-fixe) > li > div:first-child > div:first-child h2 { font-size: 18px; padding: 0; margin: 0; line-height: initial; } .completion + ul { position: absolute; overflow: auto; max-height: 220px; list-style: none; margin: 0; padding: 0; box-shadow: 0px 10px 30px -10px rgb(14 128 139 / 25%); background-color: #FFF; border: 1px solid #BABDBE80; z-index: 3; } .completion + ul > li { margin: 0; padding: 5px 10px; border-bottom: 1px solid #BABDBE80; cursor: default; } .completion + ul > li:hover { background-color: #F5FAFA; } .completion + ul > li:last-child { border: 0; } .completion + ul > li input { width: 100%; } .completion + ul > li a.bouton { width: 100%!important; margin: 0!important; } .completion.completion-budget { cursor: default; } .liste { list-style: none; margin: 0; padding: 0; font-size: 0; } .liste > li { vertical-align: top; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0.02em; color: #151B1D; } .liste > li:not(:last-child) { border-bottom: 1px solid #BABDBE40; } .liste:not(.liste-row) > li { display: inline-block; width: calc(33% - 10px); margin: 0 10px 0 0; padding: 10px; } .liste.liste-row { margin: 5px 30px; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; } .liste.liste-row > li.row { margin: 0; font-size: 0; } .liste.liste-row > li > div { padding: 15px 0; font-size: 16px; } /*FOOTER*/ #site > footer > div:first-child { padding: 100px 0 50px 0; border-radius: 25px 25px 0px 0px; background-color: #00373D; font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #8CC4CA; } #site > footer a { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #FFFFFF; text-decoration: none; } #site > footer .footer-titre { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; color: #0E808B; } #site > footer > div:first-child > div { display: grid; grid-template-columns: repeat(4, 1fr); } #site > footer > div:first-child > div > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } #site > footer > div:first-child > div > div:nth-child(2) { grid-area: 2 / 1 / 3 / 2; } #site > footer > div:first-child > div > div:nth-child(3) { grid-area: 1 / 2 / 3 / 3; } #site > footer > div:first-child > div > div:nth-child(4) { grid-area: 1 / 3 / 3 / 4; } #site > footer > div:first-child > div > div:nth-child(5) { grid-area: 1 / 4 / 3 / 5; } #site > footer ul { list-style: none; margin: 0 0 50px 0; padding: 0; } #site > footer ul > li { margin: 0; padding: 5px 0; } #site > footer ul.reseaux { margin: 70px 0; } #site > footer ul.reseaux > li { display: inline-block; } #site > footer ul.reseaux > li a { display: block; padding: 5px; } #site > footer ul.reseaux > li a > i { color: #8CC4CA; } #site > footer > div:first-child + div { padding: 15px 0; background-color: #151B1D; font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: 0.02em; color: #86888B; } .bilan-energie { height: initial; } .bilan-energie .bilan-energie-titre { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 23px; color: #0E808B; } .bilan-energie .bilan-energie-texte { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 24px; color: #0E808B; } .bilan-energie .dpe, .bilan-energie .ges { position: relative; } .bilan-energie .dpe img, .bilan-energie .ges img { height: 180px; } .bilan-energie .dpe span, .bilan-energie .ges span { position: absolute; font-size: 9px; font-weight: 700; display: block; width: 17%; text-align: center; } .bilan-energie .dpe > span:first-of-type { left: 2%; } .bilan-energie .dpe > span:first-of-type + span { left: 20%; } .bilan-energie .dpe-a > span { top: 5%; } .bilan-energie .dpe-b > span { top: 15%; } .bilan-energie .dpe-c > span { top: 25%; } .bilan-energie .dpe-d > span { top: 34%; } .bilan-energie .dpe-e > span { top: 43%; } .bilan-energie .dpe-f > span { top: 53%; } .bilan-energie .dpe-g > span { top: 62%; } .bilan-energie .ges > span { right: 20%; } .bilan-energie .ges-a > span { top: 6%; } .bilan-energie .ges-b > span { top: 16%; } .bilan-energie .ges-c > span { top: 26%; } .bilan-energie .ges-d > span { top: 36%; } .bilan-energie .ges-e > span { top: 45%; } .bilan-energie .ges-f > span { top: 53%; } .bilan-energie .ges-g > span { top: 63%; } .leaflet-default-icon-path { background-image: url(../img/map-marker-icon.png); } .leaflet-control-layers-toggle { background-image: url(../img/map-layers.png); } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(../img/map-layers-2x.png); } .leaflet-control-attribution, .leaflet-control-attribution a { font-size: 11px; color: #CCC; font-weight: 400; } .leaflet-icon { /*position: relative;*/ /*margin-left: -12px!important; margin-top: -35px!important; width: 25px!important; height: 41px!important;*/ } .leaflet-icon > span > span { display: block; padding: 0 5px; position: absolute; top: -12px; left: 12px; background-color: #FFF; white-space: nowrap; border-radius: 8px; } .leaflet-icon.select { z-index: 9999!important; } .leaflet-icon.select > span > span { background-color: #E91286; color: #FFF; } .leaflet-container .leaflet-marker-pane img { bottom: 0!important; position: absolute; left: 50%; transform: translateX(-50%); } .leaflet-popup-content > a { color: #151B1D; } .leaflet-popup-content > a.exclu .highlight { color: #e91388!important; } .leaflet-popup-content > a.exclu .bien-exclusif { background-color: #E91388; display: inline-block; z-index: 2; color: #FFF; padding: 0px 5px; font-size: 12px; border-radius: 5px; line-height: 20px; } .leaflet-popup-content > a img { object-fit: cover; width: 130px; height: 80px; } #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine { background-color : #000!important; } #captchagc, #captchagc * { box-sizing: border-box; outline: none; } #captchagc { position: relative; background-color: #E7E7E7; border: 1px solid #D6D6D6; width: 250px; height: 70px; overflow: hidden; margin: 10px auto; } #captchagc > img:nth-of-type(1) { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; z-index: 2; margin: 0!important; } #captchagc > img:nth-of-type(2) { position: absolute; top: 40px; left: 25px; width: 25px; height: 25px; z-index: 3; margin: 0!important; animation: 3s ease-out 1s infinite running captchagc; } @keyframes captchagc { 0% { left: 25px; } 25% { left: 25px; } 50%{ left: 210px; } 100%{ left: 210px; } } #captchagc > img:nth-of-type(1) + div { position: absolute; top: 14px; right: 14px; border: 1px solid #535353; border-radius: 4px; width: 41px; height: 40px; background-color: #FFF; z-index: 1; } #captchagc > img:nth-of-type(1) + div.accept { border: 1px solid #F3990C; } #captchagc > img:nth-of-type(1) + div.hover { border: 1px solid #1CD129; } #captchagc:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ">>>>>>>>"; font-family: 'Open sans', sans-serif; font-size: 17px; } #captchagc.valid:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background-color: rgba(255,255,255,0.9); z-index: 3; } #captchagc > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; opacity: 0; transition: ease-in-out 200ms opacity, ease-in-out 200ms left; } #captchagc.valid > i:nth-of-type(1) { opacity: 1; left: 17%; } #captchagc > i:nth-of-type(1):before { content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; padding: 5px; color: #12D954; font-size: 30px; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #FFF; border: 2px solid #12D954; } #captchagc > i:nth-of-type(2) { position: absolute; top: 23px; left: 113px; z-index: 5; font-size: 25px; opacity: 1; } #captchagc.valid > img:nth-of-type(1) { top: 18px!important; left: 197px!important; } #captchagc.valid > img:nth-of-type(2) { display: none; } .instantclick-bar { background-color: #008890!important; }