/***** banner *****/ .banner { position: relative; margin-bottom: 90px;} .banner .wrapper { max-width: 1800px; text-align: right; font-size: 0; line-height: 0;} .banner .photos { position: relative; display: inline-block; width: 1200px;} .banner .photos img { width: 100%; height: auto; object-fit: cover; position: relative; display: block;} .banner .texte { max-width: 550px; text-align: left; z-index: 10; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding-bottom: 80px;} .banner .texte .titre_main { margin-bottom: 30px;} .banner .texte .chapo { font-weight: 500; margin-bottom: 40px;} @media (max-width:1920px) { .banner .photos { width: calc(94vw - 535px);} } @media (max-width:1600px) { .banner .photos { width: calc(90vw - 535px);} .banner .texte { padding-bottom: 80px;} } @media (max-width:1500px) { .banner .photos { width: calc(90vw - 395px);} } @media (max-width:1200px) { .banner .photos { width: calc(90vw - 325px);} .banner .texte { padding-bottom: 60px;} } @media (max-width:1000px) { .banner { margin-bottom: 60px; padding-top: 70px;} .banner:before { display: none;} .banner .wrapper { width: 100%} .banner .photos { width: 100%;} .banner .texte { position: relative; top: auto; left: auto; transform: none; padding: 30px 0; background-color: var(--second-color); color: #FFF; max-width: initial; text-align: center;} .banner .texte .titre_main { margin: 0 auto; max-width: 14em; width: 90vw;} } @media (max-width:700px) { .banner { margin-bottom: 40px;} } @media (min-width:1001px) and (max-width:1201px) { .banner:before { bottom: 60px; left: 38%;} .banner .texte { max-width: 430px;} } @media (min-width:1001px) and (max-width:1400px) { .banner .photos img { min-height: 530px;} } @media (min-width:1201px) and (max-width:1401px) { .banner:before { left: 40%; bottom: 90px;} .banner .texte { max-width: 520px;} } @media (min-width:1401px) { .banner:before { bottom: 150px;} } @media (min-width:1501px) { .banner .texte { max-width: 680px;} .banner .texte .titre_main { font-size: 50px; line-height: 60px;} } /***** services *****/ .services { margin-block: 50px;} .services_slider img { max-width: 100%; margin-inline: 10px;} .services_slider:not(.slick-slider) img:not(:first-child) { display: none;} .services_slider_wrapper { margin-inline: -10px; position: relative; z-index: 0;} .services .slick-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);} .services .item:not(:last-child) { margin-bottom: 60px;} .services .row { transition: all 400ms ease-in-out;} .services-item__header { display: flex; align-items: center; gap: 24px;} .services-item__img { width: 80px;} .services .row .sous_titre { margin-bottom: 0;} .services-item__link { background-color: var(--main-color); display: flex; justify-content: center; align-items: center; align-self: normal; min-width: 50px; width: 50px; margin-left: auto; transition: all 400ms ease-in-out;} .services-item__link:after { width: 12px; height: 20px; background: url("../images/arrow_link_black.svg") 50% / contain no-repeat; content: "";} @media (max-width:1000px) { .services_slider_wrapper, .services .item:not(:last-child) { margin-bottom: 10px;} .services_slider img { height: auto; aspect-ratio: 1 / 1; object-fit: cover;} .services-item__header { background-color: var(--second-color); color: #FFF; justify-content: space-between; padding-left: 18px;} .services .item .sous_titre { font: 700 13px / 21px var(--font-family); text-transform: uppercase; padding-block: 18px;} .services-item__img, .services-item__body { display: none;} .services .slick-dots { bottom: 30px;} } @media (min-width:1001px) { .services { position: relative; display: grid; grid-template-columns: 50% 50%; margin-block: 100px; align-items: flex-start;} .services_slider_wrapper { padding-right: 80px;} .services_slider_wrapper::before { content: ''; position: absolute; top: 100px; z-index: -1; right: calc(50% - 120px); width: 100vw; height: 100%; background-color: var(--second-color);} .services-item__header { margin-bottom: 24px;} } @media (min-width:1201px) { .services-item__link:hover { background-color: var(--second-color);} .services-item__link:hover:after { background-image: url("../images/arrow_link.svg");} } /***** FAQ *****/ .home_faq { --_top-offset: 100px; margin-bottom: 60px; align-items: flex-start;} .home_faq .faq { margin-block: 0;} .home_faq .photo { padding-left: 80px; position: relative; z-index: 0;} .home_faq .photo::before { content: ''; position: absolute; width: 100vw; height: 100%; left: 45%; top: var(--_top-offset); background-color: var(--second-color); z-index: -1;} .home_faq .photo img { max-width: 100%;} .home_faq__description { margin-block: 20px 30px;} @media (max-width: 1000px) { .home_faq { margin-bottom: 45px;} .home_faq .titre_main { margin-bottom: 30px;} } @media (min-width: 1001px) { .home_faq { display: grid; grid-template-columns: 50% 50%; padding-bottom: var(--_top-offset);} .home_faq .show_hide_wrapper { padding-top: 60px;} } .societe p a { border-bottom: 1px solid var(--second-color); } /* .quote { text-align:center; font: italic 30px/40px var(--title-font-family); background: var(--second-color); padding-block:120px 420px; letter-spacing: 0.007em; margin-bottom: -340px;} .quote p { max-width:16.9em; margin:0 auto;} .about_and_job { --white-space: 80px; margin-bottom: 100px; z-index: 1;} .home-about__link { margin-top: 20px;} .home-about__logo { position: absolute; bottom: 10px; right: 0; height: 90%; z-index: -1;} .jobs__link { margin-top: 20px;} @media (min-width: 701px) { .about_and_job { padding-top: var(--white-space);} .about_and_job:before, .about_and_job:after { content: ''; position: absolute; z-index: -1; top: 0; width: 100vw;} .about_and_job:before { height: calc(260px + var(--white-space)); background-color: var(--second-color); left: 50%; transform: translateX(-50%);} .about_and_job:after { height: 100%; left: 30%; background-color: #fff;} } @media (max-width:1200px) { .quote { font-size: 24px; line-height: 36px; background: var(--second-color); padding-block: 80px 380px;} } @media (max-width:700px) { .photo_texte__top_texte { margin-bottom: 30px;} } */