/***** Banner *****/ banner.full { width: 100%; height: 70vh; display: block;} banner.full picture img { width: 100%; height: 70vh; object-fit: cover; display: block;} banner.full:before { content: ''; width: 100%; height: 720px; z-index: 10; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, rgba(21,20,42,1) 0%, rgba(255,255,255,0) 50%);} banner.full .titre {position: absolute;z-index: 10;color: #ffffff;left: 5vw;top: 50%;transform: translateY(-50%);} banner.full h1 { text-shadow: 1px 1px 2px #000000; } banner.full .titre h1 { border-bottom: 1px solid #ffffff; padding-bottom: 10px;} /***** breadcrumb *****/ /* .breadcrumb { line-height: 0; width: 90vw; max-width: 1200px; margin: 220px auto 0 auto; display: block;} .breadcrumb a { color: var(--colorBody);} .breadcrumb li { display: inline-block; line-height: 30px; letter-spacing: 1.2px; margin-right: 30px; position: relative;} .breadcrumb li:after { width: 1px; height: 9px; position: absolute; right: -16px; top: 11px; background: var(--colorBody); content: "";} .breadcrumb li:last-child a { color: var(--colorBodyLink);} .breadcrumb li:last-child:after { display: none;} #liste .breadcrumb { margin: 60px auto 60px auto;} @media (min-width:1201px) { .breadcrumb li a:hover { color:var(--colorBodyLink);} } @media (max-width:1200px) { .breadcrumb { display: none;} } */ /***** Tag, Id, class *****/ h1 { margin-bottom: 25px;} .anchor { top: -200px; position: relative;} .link { background: var(--colorBody); padding: 20px 30px; color: #ffffff; display: inline-block; border-radius: 5px;} .table_plus { margin-top: 40px;} .arrow-hdr { display: flex; column-gap: 10px;} ul.ul_list { margin: 20px 0;} ul.ul_list li:first-child { margin-top: 0;} ul.ul_list li { padding-left: 25px; background: url("../images/li-stars.svg") left 5px no-repeat; margin: 10px 0; display: block;} ol { counter-reset: li; list-style: none; margin-bottom: 25px;} ol li { display: block; overflow: hidden; padding-left: 50px; min-height: 35px; margin: 10px 0px; padding-top: 4px;} ol li:before { position: absolute; top: 0px; left: 0px; background-color: var(--colorBodyLink); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 12px; color: #ffffff; content: counter(li); counter-increment: li;} body.page .bloc_texte.first { margin-top: 240px;} .moving_gal { margin-bottom: 80px;} @media (min-width:1201px) { .link:hover { background: var(--colorBodyLink); } } @media (max-width:1200px) { body.page .bloc_texte.first { margin-top: 140px;} } /***** Bloc & Grid *****/ .bloc_texte { width: 90vw; max-width: 1200px; margin: var(--marginBloc); } .bloc_texte h3 { margin-bottom: 25px;} .bloc_texte.first { margin-top: 60px;} .bloc_texte.intro { background: var(--colorBody); color: #ffffff; padding: 40px 40px 40px 0; max-width: 800px;} .bloc_texte.intro:before { content: ''; background: var(--colorBody); width: 100vw; height: 100%; display: block; position: absolute; z-index: -1; top: 0; right: 0;} .bloc_grid { width: 90vw; max-width: 1200px; margin: var(--marginBloc); display: grid; grid-template-columns: repeat(2,1fr); align-items: center; grid-gap: 0 80px;} .bloc_grid.full { max-width: 1620px;} .bloc_grid.full .photo:before { content: ""; position: absolute; top: 100px; right: 90%; width: 200vw; height: 100%; background: var(--colorBody); z-index: -1;} .bloc_grid.full .texte { padding-right: 210px;} .bloc_grid .photo { line-height: 0; font-size: 0;} .bloc_grid .photo img { max-width: 100%; width: 100%; height: auto;} .bloc_grid .texte h3 { margin-bottom: 25px;} .bloc_grid .texte p { margin-bottom: 20px;} .bloc_grid.reverse { max-width: 1200px;} .bloc_grid.reverse .texte { grid-area: 1 / 1; padding-right: 0;} .bloc_grid.reverse .photo { grid-area: 1 / 2;} .bloc_grid-services { width: 90vw; max-width: 1620px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 40px 40px; margin: var(--marginBloc);} .bloc_grid-services .item { text-align: center;} .bloc_grid-services .item img { width: 100%; max-width: 100%; height: auto;} .bloc_grid-services .item img.picto { position: absolute; left: 50%; top: calc(50% - 40px); transform: translate(-50%,-50%); z-index: 1; width: inherit;} .bloc_grid-services .item span { margin: 20px 0; display: block;} .bloc_grid-services .item { overflow: hidden;} .bloc_grid-services .item .beforeAfter img { width: 100%; height: auto; position: absolute;} .bloc_grid-services .item .beforeAfter img + img { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);} .bloc_grid-services .item .beforeAfter input[type=range] { position: relative; -webkit-appearance: none; width: calc(100% + 82px); height: 100%; margin-left: -41px; background-color: transparent; outline: none;} .bloc_grid-services .item .beforeAfter input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; height: 500px; width: 82px; background: url("../images/arrow-after-before-line.svg") 50% 50% no-repeat; background-size: contain; cursor: ew-resize;} /*.bloc_grid-services .item .beforeAfter input[type=range]::-webkit-slider-thumb:before { content: ''; background: #ffffff; height: 100%; width: 2px; position: absolute; left: calc(50% + 1px);}*/ .bloc_grid-services .item a { display: block; color: var(--colorBody);} .bloc_grid-localite { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px 10px; margin-top: 70px;} .bloc_grid-localite .dispo { position: absolute; right: 0; top: -40px; background: url(../images/li-stars.svg) 0 45% no-repeat; padding-left: 30px; color: var(--colorBody); } .bloc_grid-localite a { display: grid; grid-template-columns: 60px 1fr 15px; grid-gap: 20px; align-items: center; background: var(--colorBody); color: #ffffff; padding: 12px 25px; border-radius: 5px;} .bloc_grid-localite a span { color:var(--colorBodyLink); } .bloc_grid-localite a b { font-weight: 500; } .bloc_grid-localite a img { transition: all 200ms ease-in-out;} .bloc_grid-equipe { max-width: 1200px; width: 90vw; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0 30px; margin: var(--marginBloc); text-align: center;} .bloc_grid-equipe img { max-width: 100%; width: 100%; height: auto; margin-bottom: 20px;} .bloc_grid-equipe h3 { margin-bottom: 25px;} .bloc_grid-equipe a[href^="tel:"] { color:var(--colorBody);} @media (min-width:1201px) { .bloc_grid-localite a:hover { color:var(--colorBodyLink);} .bloc_grid-localite a:hover img { transform: rotate(72deg) scale(1.1);} .bloc_grid-localite a:hover span { color: #ffffff;} } @media (max-width:1366px) { .bloc_grid { align-items: start; grid-gap: 60px;} .bloc_grid.full .texte { padding-right: 40px;} } @media (max-width:1200px) { .bloc_grid-services { grid-gap: 20px;} .bloc_grid { grid-gap: 40px;} .bloc_grid-localite a { grid-template-columns: 30px 1fr 15px; padding: 10px 20px;} } @media (max-width:1000px) { .bloc_grid-services { grid-template-columns: repeat(2,1fr);} .bloc_grid-localite { grid-template-columns: repeat(2,1fr);} .bloc_grid-equipe { grid-gap: 0 10px;} } @media (max-width:800px) { .bloc_grid, .bloc_grid.reverse { grid-template-columns: 1fr; grid-gap: 40px 0;} .bloc_grid.reverse .photo {grid-area: 1 / 1;} .bloc_grid.reverse .texte {grid-area: 2 / 1;} .bloc_grid.full .texte { padding-right: 0;} .bloc_grid.full .photo:before { top:-20px;} .bloc_grid-localite { grid-template-columns:1fr;} } @media (max-width:700px) { .bloc_grid-equipe { grid-template-columns: 1fr; grid-gap: 40px 0; } .bloc_grid-equipe img { max-width: 500px;} .bloc_grid-equipe strong { display: block;} body.page header:after { content: ""; position: absolute; top: 65px; left: 0; width: 100vw; height: 80px; background: #15142a; z-index: -1; opacity: 0; transition: all 300ms ease-in-out;} } @media (max-width:600px) { body.page header { background: #ffffff;} body.page header:after { opacity: 1;} body.page.sticky header:after { opacity: 0; } body.page .bloc_texte.first { margin-top: 180px;} } /** Popup photo **/ .photo_hdr { width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 250; display: none;} .photo_hdr ::-webkit-scrollbar { display: none;} .photo_hdr .close_bg { width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.7; cursor: url(../images/close.svg), auto;} .photo_hdr .infos { width: 80vw; height: 100vh; background: #fff; position: absolute; top: 0; z-index: 20;} .photo_hdr .infos .close { position: absolute; top: 0; left: -60px; width: 60px; height: 60px; background: #ffffff; background: #fff; cursor: pointer; z-index: 50;} .photo_hdr .infos .close:before { width: 24px; height: 2px; background: #000000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} .photo_hdr .infos .close:after { width: 2px; height: 24px; background: #000000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} .photo_hdr .infos .row { height: 100%; overflow-y: auto; display: grid; align-items: center;} .photo_hdr .infos .titre { margin-bottom: 5px} .photo_hdr .infos .row .wrap { padding: 60px 0 80px 0; position: relative;} .photo_hdr .infos .texte { background: #fff; margin-bottom: 40px; max-width: 80vw; padding-right: 200px;} .photo_hdr .infos .texte h4 { margin-bottom: 25px;} .photo_hdr .photos { height: 60vh; max-height: 800px; position: relative; margin-bottom: 60px;} .photo_hdr .slider { width: 100vw; margin: 30px 0 60px 0;} .photo_hdr .slider img { height: 600px; width: auto; margin-right: 30px;} /* open close animation */ .photo_hdr .infos { right: -80vw; transition: right 600ms ease-in-out 200ms;} .photo_hdr .infos.active { right: 0; transition-delay: 400ms;} .photo_hdr .infos .row { opacity: 0; transition: opacity 400ms ease-in-out 0ms; padding: 0 100px;} .photo_hdr .infos.active .row { opacity: 1; transition-delay: 1000ms;} /* Page blog listing */ .blog { position: relative;} .blog .grid { display: grid; grid-template-columns:repeat(3,1fr); grid-gap: 40px 40px; position: relative; max-width: 1600px; width: 90vw; margin: 80px auto;} .blog .item { position: relative; overflow: hidden; font-size: 0; line-height: 0; background: #000000; border-radius: 10px} .blog .item .sous_titre { padding-right: 60px;} .blog .item .sous_titre span { display: block; font-size: 14px; margin-top: 10px;} .blog .item a { display: block;} .blog .item a:after { width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); z-index: 5; content: ""; } .blog .item img { max-width: 100%; height: auto; transition: all 400ms ease-in-out; opacity: .8;} .blog .item .sous_titre { color: #fff; margin: 0; position: absolute; left: 30px; bottom: 25px; width: calc(100% - 60px); z-index: 10;} .blog .item .titre_cap { display: block; font: 400 11px/30px "Open Sans"; letter-spacing: 1.7px; text-transform: uppercase; color: #fff;} .blog .item .sous_titre:after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 40px; height: 15px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,");} @media (min-width:1201px) { .blog .item a:hover img { filter: brightness(0.7);transform: scale(1.1);} .blog .item a:hover .sous_titre:after { right: 0; opacity: 1;} } @media (max-width:1366px) { .blog .grid { grid-gap: 30px 30px;} } @media (max-width:1200px) { .blog .grid { grid-template-columns:repeat(2,1fr);} } @media (max-width:800px) { .blog .grid { grid-template-columns:1fr; grid-gap: 30px 0;} } @media (max-width:400px) { .blog .item .sous_titre { left: 15px; width: calc(100% - 30px);} } /***** blog *****/ .dynamique img { max-width: 100%; height: auto; margin: 40px auto; } .dynamique h1, .dynamique h2, .dynamique h3, .dynamique h4, .dynamique h5, .dynamique h6 { font-size: 1.8rem; font-family: var(--fontBody); position: relative; margin-bottom: 15px; } .bloc_texte.dynamique img { margin-bottom: 40px; max-width: 100%; height: auto;} .dynamique ul { margin: 20px 0; } .dynamique ul li { padding-left: 25px; background: url(../images/li-stars.svg) left 5px no-repeat; margin: 10px 0; display: block; } /***** danilith *****/ #construction banner .danilith { position: absolute; z-index: 10; color: #ffffff; left: 5vw; top: 50%; transform: translateY(-50%); width: 90vw; max-width: 1200px; display: grid; grid-template-columns:auto 1fr; grid-gap: 0 40px; align-items: center;} #construction banner .danilith .logo-danilith { border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #ffffff; padding: 40px 60px 40px 0; display: block; margin-bottom: 20px; width: max-content; } #construction banner .danilith .logo-danilith::before { content: ''; position: absolute; top: 0; left: -5vw; width: 100%; height: 100%; background:#ffffff;} #construction banner .danilith .logo-danilith img { max-width: 250px; height: auto; display: block; } #construction banner .danilith h1 { text-shadow: 1px 1px 2px #000000; }