/***** banner *****/ .banner { position: relative; padding-top: 140px; margin: var(--marginTB); margin-top: 0;} .banner:before { position: absolute; left: 50%; right: 0; bottom: 30%; top: -80px; background: var(--bgColorLight); z-index: -1; transition: none; content: ""; border-radius: 0;} .banner .container { display: grid; grid-template-columns: 1fr 60%; grid-gap: 60px; align-items: center;} .banner .img { position: relative; z-index: 5; } .banner .img img { width:100%; height: auto; display: block; object-fit: cover; position: relative; display: block; aspect-ratio:10/7; border-radius: var(--allImgBR);} .link.devis { display: block; max-width: 400px; height: 80px; font-size: 20px; line-height: 78px; padding: 0 0 0 20px; text-align: left; margin: 10px 0 0 0; } .link.devis span {display: inline-block; padding-left: 50px; background: url("../images/calculatrice.svg") 0 50% no-repeat;} .banner .txt { position: relative; padding-bottom: 10px; z-index: 50} .banner .txt .wrap { max-width: 580px;} .banner .txt p { font-size: 18px; margin: 20px 0 30px 0; max-width: 480px;} .banner .txt .wrap .bee { position: absolute; bottom: -140px; right:0; width: 250px; height: 250px; transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; z-index: 200} @media (max-width:1400px) { .banner .img .img_2 { display: none;} .banner .container { grid-template-columns: 1fr 50%; grid-gap: 40px; align-items: center;} } @media (max-width:1200px) { .banner { padding-top: 120px;} .banner .container { grid-gap: 40px;} } @media (max-width:1000px) { .banner { padding-top: 100px;} .banner:before { display: none} .banner .txt .wrap .bee { width: 160px; height: 160px} .banner .container { grid-template-columns: 1fr;} .banner .img { grid-area: 1;} .banner .txt .wrap { text-align: center; max-width: 100%} .banner .txt p { max-width: 100%;} .banner .txt .wrap .bee { bottom: -100px; right:0; width: 200px; height: 200px;} .link.devis { margin: 0 auto;} } @media (max-width:700px) { .banner { padding-top: 70px;} .banner .container { grid-gap: 30px;} .banner .txt:before { width: 100vw; left: -5vw; bottom: 30px;} .banner .txt .wrap .bee { bottom: -70px; right:-50px; width: 150px; height: 150px;} } @media (max-width:400px) { .link.devis { font-size: 16px;} } /***** INTRO *****/ .intro { margin: 75px 0 0; position: relative; z-index: 1;} .intro:before { position: absolute; left: -10%; bottom: 30%; right:50%; top: -200px; background: url("../images/pattern.svg"); background-repeat: no-repeat; z-index: -80; transition: none; content: ""; height: 800px} .intro .wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center;} .intro .txt { padding: 0 80px 0 0} .intro .chapo { position: relative; margin-top: 20px; background:var(--bgColorLight); padding:60px 80px; border-radius: 40px} @media (max-width:1000px) { .intro { margin:50px 0;} .intro:before { display: none} .intro .wrapper { grid-template-columns: 1fr;} .intro .txt { display: none;} } @media (max-width:700px) { .intro { display: none;} } /***** services *****/ .card_item_v2 { display: grid; place-content: center; position: relative; overflow: hidden; clip-path: polygon(72.38% 4%,72.38% 4%,72.938% 4.034%,73.483% 4.133%,74.012% 4.296%,74.521% 4.519%,75.007% 4.8%,75.464% 5.136%,75.889% 5.525%,76.279% 5.964%,76.63% 6.449%,76.937% 6.98%,99.299% 44.48%,99.299% 44.48%,99.555% 45.05%,99.753% 45.642%,99.895% 46.249%,99.98% 46.867%,100.009% 47.49%,99.98% 48.113%,99.895% 48.731%,99.753% 49.338%,99.555% 49.93%,99.299% 50.5%,76.937% 90%,76.937% 90%,76.63% 90.535%,76.279% 91.024%,75.889% 91.464%,75.464% 91.852%,75.007% 92.188%,74.521% 92.467%,74.012% 92.688%,73.483% 92.849%,72.938% 92.947%,72.38% 92.98%,27.62% 92.98%,27.62% 92.98%,27.062% 92.946%,26.517% 92.847%,25.988% 92.684%,25.479% 92.461%,24.993% 92.18%,24.536% 91.844%,24.111% 91.455%,23.721% 91.016%,23.37% 90.531%,23.063% 90%,0.701% 50.5%,0.701% 50.5%,0.445% 49.93%,0.247% 49.338%,0.105% 48.731%,0.02% 48.113%,-0.009% 47.49%,0.02% 46.867%,0.105% 46.249%,0.247% 45.642%,0.445% 45.05%,0.701% 44.48%,23.063% 6.98%,23.063% 6.98%,23.37% 6.449%,23.721% 5.964%,24.111% 5.525%,24.536% 5.136%,24.993% 4.8%,25.479% 4.519%,25.988% 4.296%,26.517% 4.133%,27.062% 4.034%,27.62% 4%,72.38% 4%); cursor: pointer} .card_item_v2 img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; filter: brightness(0.90);} .card_item_v2:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to top, rgba(8, 34, 77, 70%) 0%, rgba(8, 34, 77, 20%) 100%); transition: none; z-index: 1; content: ""; z-index: 1;} .card_item_v2 .wrap { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 5; padding: 0;} .card_item_v2 .sous_titre { font-size: 25px; line-height: 30px; color: #fff; margin:0; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%)} .card_item_v2 .sous_titre span { display: block; color: #fff; text-transform: uppercase; margin-top: -20px; font-weight: 600; letter-spacing: 1.2px} .card_item_v2 .hover_show { position: absolute; left: 0; top: 0; color: #fff; background: var(--mainColor2); width: 100%; height: 100%; padding: 40px; display: none; z-index: 50} .card_item_v2 .hover_show p { margin: 20% 80px} .card_item_v2 .hover_show p a { color: var(--mainColor3);} .card_item_v2 .hover_show .link { z-index: 50; display: block; margin: 20px auto 0 auto; width: 180px; border-bottom: none; color: #fff; background: var(--mainColor1)} .grid_bloc_mixed.noPicture .card_item_v2 { cursor: default;} .grid_bloc_mixed.noPicture .card_item_v2:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #08224d; transition: none; z-index: 1; content: ""; z-index: 1;} .grid_bloc_mixed.noPicture .card_item_v2 .wrap { width: 80%; z-index: 5; padding: 0; font-size: 25px; line-height: 30px; color: #fff; margin:0; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%)} .grid_bloc_mixed.noPicture .card_item_v2 .wrap .sous_titre { color: #ffd532; width: 80%;} .grid_bloc_mixed.noPicture .card_item_v2 .wrap .sous_titre em { display: block; margin-top: 20px;} .grid_bloc_mixed.noPicture .card_item_v2 .wrap div.sous_titre { color: #ffffff; width: 80%; font-size: 24px;} .grid_bloc_mixed.noPicture .card_item_v2 .wrap img { width: initial; max-width: 100%; height: auto; margin: 30px auto 10px auto;} .grid_bloc_mixed.noPicture .card_item_v2 .wrap div.sous_titre :first-child { margin-top: 0;} @media (min-width:1201px) { .card_item_v2 .hover_show { display: block; opacity: 0; visibility: hidden; transition: all 300ms ease-in-out;} .card_item_v2:hover .hover_show { opacity: 1; visibility: visible;} } @media (max-width:1200px) { .card_item_v2 .sous_titre { font-size: 20px;} } @media (max-width:700px) { .card_item_v2 { clip-path: none; border-radius: 10px;} .card_item_v2 .wrap { padding: 20px;} .card_item_v2 .sous_titre { width: 100%;} .card_item_v2 .sous_titre span { margin-top: 0;} } /***** services *****/ .grid_bloc_mixed { position: relative;} .grid_bloc_mixed .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0 ; margin: -3% 0; padding: 0 2%; text-align: center; } .grid_bloc_mixed .item { margin: -3% -11%; grid-row-end: span 2;} .grid_bloc_mixed .item:nth-child(1) { grid-column-start: 2; grid-row-start: 1;} .grid_bloc_mixed .item:nth-child(2) { grid-column-start: 1; grid-row-start: 2;} .grid_bloc_mixed .item:nth-child(3) { grid-column-start: 3; grid-row-start: 2;} .grid_bloc_mixed .bee { position: absolute; top: 0; left:0; width: 250px; height: 250px; z-index: 200} .grid_bloc_mixed.noPicture { position: relative;} .grid_bloc_mixed.noPicture .container { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 60px auto; text-align: center; max-width: 1200px; } .grid_bloc_mixed.noPicture .item { margin: -3% -11%; grid-row-end: span 2; height: 500px; position: relative;} @media (max-width:1000px) { .grid_bloc_mixed .container { grid-template-columns: 1fr 1fr; grid-gap: 0 30px; margin: -15px 0;} .grid_bloc_mixed .item:nth-child(1) { grid-column-start: 1; grid-row-start: 1;} .grid_bloc_mixed .item:nth-child(2) { grid-column-start: 2; grid-row-start: 2;} .grid_bloc_mixed .item:nth-child(3) { grid-column-start: auto; grid-row-start: auto;} .grid_bloc_mixed .bee { display: none;} .grid_bloc_mixed.noPicture .item { height: 400px;} } @media (max-width:700px) { .grid_bloc_mixed .container { grid-template-columns: 1fr; grid-gap: 10px;} .grid_bloc_mixed .item:nth-child(1) { grid-column-start: auto; grid-row-start: auto;} .grid_bloc_mixed .item:nth-child(2) { grid-column-start: auto; grid-row-start: auto;} .grid_bloc_mixed .item:nth-child(3) { grid-column-start: auto; grid-row-start: auto;} .grid_bloc_mixed .item { margin: 10px auto; padding: 0; max-height: 150px} } /***** Bloc comparaison *****/ .bloc-comparaison { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; background: #08224d; color: #ffffff; font: 400 22px / 30px "Onest"; padding: 60px; text-align: center; letter-spacing: 3px; border-radius: var(--allImgBR); position: relative; overflow: hidden;} .bloc-comparaison .sous_titre { color: #ffd532; font-weight: 500;} .bloc-comparaison .bloc-3 { display: grid; grid-template-columns: 1fr 170px 170px; gap: 20px; font-size: 16px; font-weight: 500; position: relative;} .bloc-comparaison .bloc-3:before { content: ''; position: absolute; left: -20%; top: -50%; width: 100%; height: 800px; display: block; background: url(../images/pattern-white.svg); background-repeat: no-repeat; opacity: 0.2;} .bloc-comparaison .bloc-3 .align_left { text-align: left;} .bloc-comparaison .bloc-3 img { width: 20px; height: auto;} .bloc-comparaison .bloc-3 div.color { border-radius: 5px; padding: 7px; background: #ffd532; color: #08224d; font-weight: 600;} .bloc-comparaison .bloc-3 div.color.align_left { padding-left: 15px;} @media (max-width:1000px) { .bloc-comparaison { padding: 30px; width: 100vw; border-radius: 0; margin-top: 0;} .bloc-comparaison .bloc-3:before { content: none;} .bloc-comparaison .sous_titre { font-size: 25px;} } @media (max-width:800px) { .bloc-comparaison { padding: 20px 10px; width: 100%;} .bloc-comparaison .bloc-3 { font-size: 14px; align-items: center; line-height: initial; gap: 10px;} .bloc-comparaison .sous_titre { font-size: 18px; line-height: initial;} } @media (max-width:600px) { .bloc-comparaison .bloc-3 { font-size: 12px; gap: 5px; grid-template-columns: 1fr 1fr 1fr;} } @media (max-width:500px) { .bloc-comparaison .bloc-3 { min-width: 500px;} .bloc-comparaison>div { overflow-x: scroll; padding-bottom: 20px;} } /***** a propos *****/ .apropos { position: relative;} .apropos:before { position: absolute; right: 0; bottom: 30%; left:50%; top: 0; background: url("../images/pattern.svg"); background-repeat: no-repeat; z-index: -20; transition: none; content: ""; height: 800px; transform: scaleX(-1); filter: FlipV; -ms-filter: "FlipV";} .apropos .container { display: grid; grid-template-columns: 580px 1fr; grid-gap: 0 80px; align-items: center; position: relative;} .apropos .container>.item { position: relative;} .apropos .container .txt .wrap { display: inline-block; text-align: left; max-width: 520px;} .apropos .container p { margin-bottom: 15px;} .apropos .container .link { margin-top: 10px;} @media (max-width:1000px) { .apropos:before { display: none;} } /* before after img */ .apropos .before_after_img { display: grid; place-content: center; position: relative; overflow: hidden; --position: 50%; clip-path: polygon(72.38% 4%,72.38% 4%,72.938% 4.034%,73.483% 4.133%,74.012% 4.296%,74.521% 4.519%,75.007% 4.8%,75.464% 5.136%,75.889% 5.525%,76.279% 5.964%,76.63% 6.449%,76.937% 6.98%,99.299% 44.48%,99.299% 44.48%,99.555% 45.05%,99.753% 45.642%,99.895% 46.249%,99.98% 46.867%,100.009% 47.49%,99.98% 48.113%,99.895% 48.731%,99.753% 49.338%,99.555% 49.93%,99.299% 50.5%,76.937% 90%,76.937% 90%,76.63% 90.535%,76.279% 91.024%,75.889% 91.464%,75.464% 91.852%,75.007% 92.188%,74.521% 92.467%,74.012% 92.688%,73.483% 92.849%,72.938% 92.947%,72.38% 92.98%,27.62% 92.98%,27.62% 92.98%,27.062% 92.946%,26.517% 92.847%,25.988% 92.684%,25.479% 92.461%,24.993% 92.18%,24.536% 91.844%,24.111% 91.455%,23.721% 91.016%,23.37% 90.531%,23.063% 90%,0.701% 50.5%,0.701% 50.5%,0.445% 49.93%,0.247% 49.338%,0.105% 48.731%,0.02% 48.113%,-0.009% 47.49%,0.02% 46.867%,0.105% 46.249%,0.247% 45.642%,0.445% 45.05%,0.701% 44.48%,23.063% 6.98%,23.063% 6.98%,23.37% 6.449%,23.721% 5.964%,24.111% 5.525%,24.536% 5.136%,24.993% 4.8%,25.479% 4.519%,25.988% 4.296%,26.517% 4.133%,27.062% 4.034%,27.62% 4%,72.38% 4%);} .apropos .before_after_img img { width: 100%; height: 100%; object-fit: cover; object-position: left; z-index: inherit; position: initial; aspect-ratio: 1/1; } .apropos .before_after_img img.image_before { position: absolute; inset: 0; width: var(--position);} .apropos .before_after_img .range { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: grab;} .apropos .before_after_img .range:active { cursor: grabbing;} .apropos .before_after_img .range_line { position: absolute; inset: 0; width: 4px; height: 100%; background-color: #fff; left: var(--position); transform: translateX(-50%); pointer-events: none;} .apropos .before_after_img .range_button { position: absolute; background: #fff; display: grid; top: 50%; left: var(--position); transform: translate(-50%,-50%); pointer-events: none; width: 80px; grid-template-columns: 1fr 1fr; align-items: center;} .apropos .before_after_img .range_button span { background: url("../images/arrow_slider.svg") 55% 50% no-repeat; display: block; height: 50px;} .apropos .before_after_img .range_button span:first-child { transform: rotate(180deg);} @media (max-width:1000px) { .apropos .container { grid-template-columns: 1fr;} .apropos .bloc_txt_img .container>.item .before_after_img { margin: 0 auto;} } @media (max-width:700px) { .apropos .before_after_img .range_line { width: 2px;} .apropos .before_after_img .range_button { width: 60px;} .apropos .before_after_img .range_button span { height: 40px;} } /***** interventions *****/ .interventions { position: relative; background:var(--bgColorLight); border-radius: 50px; padding: 100px 0; max-width: 1600px;} .interventions .container { display: grid; grid-template-columns: 50% 1fr; grid-gap: 0 80px; align-items: center; position: relative;} .interventions .container>.item { position: relative;} .interventions .container>.item :last-child { margin-bottom: 0;} .interventions .container .txt .wrap { display: inline-block; text-align: left;} .interventions .container img { width: 100%; height: auto; object-fit: cover; display: block; position: relative; z-index: 10; border-radius: var(--allImgBR);} .interventions .container p { margin-bottom: 15px;} .interventions .container .link { margin-top: 10px;} .interventions .bee { position: absolute; top: -100px; right:150px; width: 250px; height: 250px; z-index: 200; transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";} .interventions .container .img_grid_3 { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-items: stretch;} .interventions .container .img_grid_3 .photo_1 { grid-row: span 2;} .interventions .container .img_grid_3 .photo_3 { text-align: center; background: var(--mainColor2); border-radius: var(--allImgBR); position: relative; display: grid; align-items: center; justify-content: center;} .interventions .container .img_grid_3 .photo_3 p { color: #fff; display: block; position: relative; font-size: 18px; line-height: 140%; max-width:340px; padding: 20px 30px} @media (max-width:1200px) { .interventions .container { grid-gap: 0 60px;} .interventions .container .img_grid_3 .photo_3 p { font-size: 20px;} } @media (max-width:1000px) { .interventions { border-radius: 0; margin-bottom: 0;} .interventions .container { grid-template-columns: 1fr; grid-gap: 40px;} .interventions .container .txt .wrap { max-width: none;} .interventions .bee { display: none;} .interventions .container .img.img_grid_3 { display: grid; grid-gap: 20px; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: stretch; } .interventions .container .img.img_grid_3 .photo_1 { display:none;} .interventions .container .img.img_grid_3 .photo_2 { grid-area: 1 / 2 / 2 / 1; width: 100%; object-fit: cover;} .interventions .container .img.img_grid_3 .photo_3 { grid-area: 2 / 1; padding: 30px 0; width: 100%; margin: 0 auto; } } @media (max-width:700px) { .interventions { padding: 50px 0;} .interventions .container { grid-gap: 30px;} .interventions .container p { margin-bottom: 10px;} .interventions .container .multi_links { grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 20px;} .interventions .container .img.img_grid_3 .photo_3 { display: none} } /***** partners *****/ .partners { position: relative;} .partners .container { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 20px; position: relative; padding-top: 30px;} .partners .titre { text-align: left;} .partners .item .icon { border-radius: var(--linkRadius); display: grid; align-items: center; background:var(--bgColorLight)} .partners .item .icon img { display: block; margin: 0 auto; width: 130px; height: auto;} .partners .item .icon a img { transition: all 300ms ease-in-out;} @media (max-width: 1200px){ .partners .container { grid-template-columns: repeat(3, 1fr);} } @media (max-width: 700px){ .partners .container { grid-gap: 10px;grid-template-columns: repeat(2, 1fr);} .partners .item .icon img { width: 100px;} } /***** Atouts *****/ .atouts { margin: 120px 0 160px 0; z-index: 10} .atouts .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 30px; align-items: center; align-items: start; } .atouts .grid .item { position: relative; display: block; text-align: center; } .atouts .grid .item img { position: relative; display: block; margin: 15px auto 0 auto; width: 70px} .atouts .grid .img:before { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--mainColor1); transition: none; z-index: -1; content: "";} .atouts .grid .item span { font-size: 18px; position: relative; display: block; line-height: 20px; text-align: center; color: var(--mainColor2); margin: 40px auto 20px auto;} @media (max-width:1200px) { .atouts { margin: 90px 0 100px; } .atouts .grid { grid-template-columns: repeat(3, 1fr);} } @media (max-width:1000px) { .atouts { margin: 70px 0 80px; } .atouts .grid { grid-gap: 10px; } .atouts .grid .item img { width: 50px; margin: 5px auto; } .atouts .grid .img:before { width: 90px; height: 90px;} .atouts .grid .item span { margin: 30px auto 20px auto; font-size: 16px;} } @media (max-width:700px) { .atouts { margin: 40px 0 60px; } .atouts .grid { grid-template-columns: repeat(2, 1fr);} }