/***** breadcrumb *****/ .breadcrumb { line-height: 0; position: relative; margin: 0;} .breadcrumb li { display: inline; font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0.6px; margin-right: 30px; position: relative;} .breadcrumb li a { color: #fff;} .breadcrumb li:after { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 52% / contain no-repeat; position: absolute; top: 0; right: -20px; transform: rotate(-90deg); content: "";} .breadcrumb li:last-child { margin: 0;} .breadcrumb li:last-child:after { display: none;} @media (min-width:1201px) { .breadcrumb a:hover { color: var(--red);} } @media (max-width:1200px) { } @media (max-width:1000px) { } @media (max-width:700px) { .breadcrumb { display: none;} } /***** link content page *****/ main ul:not(.breadcrumb) a, main p a { border-bottom: 1px solid var(--red); padding-bottom: 2px;} @media (min-width:1201px) { main ul:not(.breadcrumb) a:hover, main p a:hover { color: var(--red);} } /***** top page *****/ .top_page { position: relative; padding-top: 160px; padding-bottom: calc(2vw + 20px); background: var(--bgColorDark);} .top_page.no_img .content { display: block; min-height: inherit; } /* .top_page .bloc_txt_img:before { left: 60%;} .top_page .bloc_txt_img .container { grid-template-columns: 1fr 30%;} .top_page .bloc_txt_img .container .txt .wrap { max-width: 1000px;} .top_page .bloc_txt_img .container .img { padding-right: 40px;} .top_page .bloc_txt_img .container .img img { aspect-ratio: 1/1; object-position: center 10%;} */ @media (max-width:2000px) { .top_page { padding-top: 120px;} .top_page .bloc_txt_img:before { left: 63%;} } @media (max-width:1600px) { .top_page .bloc_txt_img:before { left: 65%;} } @media (max-width:1200px) { .top_page { padding-top: 90px; padding-bottom: calc(0.5vw + 20px);} } @media (max-width:700px) { .top_page { padding-top: 50px; padding-bottom: calc(0.5vw + 20px);} } .top_page .content { min-height: 50vh; display: grid; align-content: center; color: #fff; position: relative; z-index: 20; padding: calc(2vw + 20px) 0;} .top_page .content .wrap { max-width: 600px;} .top_page .content .titre_main:first-letter { color: var(--red);} .top_page .content .chapo { padding-top: 10px;} .top_page .banner { position: absolute; left: 40%; top: 0; right: 0; bottom: 0; overflow: hidden;} .top_page .banner:before { width: 25%; height: 100vh; left: -5%; top: 0; position: absolute; background: var(--bgColorDark); transform: skewX(10deg); z-index: 10; content: "";} .top_page .banner picture { width: 100%; height: 100%; position: absolute; top: 0; right: 0; opacity: 0.8} .top_page .banner picture img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; object-fit: cover; object-position: 70%;} .top_page .banner .item { position: relative;} .top_page .only_txt { min-height: 40vh;} .top_page .only_txt .wrap { max-width: none;} @media (max-width:1200px) { .top_page .content { min-height: 45vh; padding: calc(1vw + 20px) 0;} .top_page .content .wrap { max-width: 50%;} .top_page .banner { left: 50%; } } @media (max-width:1000px) { .top_page .content .wrap { max-width: 100%;} .top_page .content { min-height: inherit; } .top_page .banner { position: relative; left: inherit; top: 0; right: inherit; bottom: 0; } .top_page .banner:before { width: 100%; height: 15%; left: 0; top: 50%; } .top_page .banner picture { width: 100%; height: 100%; position: absolute; top: 0; right: 0;} .top_page .banner picture img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; object-fit: cover; object-position: 70%;} .top_page .banner .item { position: relative;} } @media (max-width:700px) { } .bloc_txt_img .parallax .item:nth-child(1) { right: 95%; top: -10%;} .bloc_txt_img .parallax .item:nth-child(2) { left: 90%; top: 70%;} .bloc_gray { background: var(--darkgray); color: #fff; padding: clamp(20px, 4vw, 75px) clamp(20px, 4vw, 80px); margin: clamp(15px, 3vw, 30px) 0;} .bloc_gray ul a, .bloc_gray p a { color: #fff;} .bloc_gray.inner_small { padding: clamp(20px, 3vw, 65px) clamp(20px, 3vw, 60px);} @media (min-width:1201px) { .bloc_gray ul a:hover, .bloc_gray p a:hover { color: var(--red);} } .advantages_tech .item { margin: 0; padding: clamp(20px, 4vw, 75px) clamp(20px, 4vw, 80px);} .advantages_tech .item :last-child { margin-bottom: 0;} .advantages_tech .item .titre_cap { margin: 0 0 10px 0;} #about .histoire .slider { width: 100vw; padding-top: clamp(10px, 2vw, 15px);} #about .histoire .slider .slick-list { overflow: visible;} #about .histoire .slider .item { width: 620px; margin-right: clamp(10px, 2.2vw, 40px); background: #fff; padding: clamp(35px, 3vw, 60px); position: relative; box-shadow: 0 0 60px 0 rgba(0, 0, 0, 8%);} #about .histoire .nav_slider { position: absolute; right: -12px; top: -5px;} #about .offres .container { padding-top: clamp(20px, 4vw, 40px);} #about .offres .item { color: #fff; background: var(--darkgray); padding: clamp(35px, 3vw, 60px); position: relative; /*box-shadow: 0 0 60px 0 rgba(0, 0, 0, 8%);*/} #about .offres .item ul li a { color: #fff; padding-right: 20px; background: url("../images/arrow_link.svg") 100% 70% no-repeat; background-size: 10px auto;} @media (max-width:1200px) { } @media (max-width:1000px) { } @media (max-width:700px) { #about .histoire .slider .item { width: 85vw;} #about .histoire .sous_titre { padding-right: 60px;} } @media (max-width:1200px) { #agence .wrapper { width: 90vw;} #tab_philosophie .item_sticky { position: absolute; right: 0; top: 0; width: 40%;} #tab_philosophie .item_sticky picture { position: static; width: 100%;} #tab_philosophie .intro { max-width: 45%;} #tab_equipe .chapo { width: 80vw; margin-right: auto; margin-left: auto;} #tab_histoire .slider .bloc_white .num { font-size: 18px; line-height: 40px; padding: 0 12px; top: -20px;} #tab_histoire .slider .bloc_white .sous_titre { padding-top: 5px;} #tab_histoire .nav_slider { top: 10px;} #tab_histoire .gallery img { height: auto;} #tab_histoire .gallery .square.yellow { right: 200%;} #tab_histoire .gallery .square.green { left: 160%; bottom: 95%;} #tab_histoire .gallery .square.blue { display: none;} #tab_histoire .gallery .container { grid-template-columns: 40vw auto;} #tab_histoire .gallery .item { margin-bottom: 0;} #tab_histoire .gallery .item:first-child { width: 20vw; grid-area: 2/2; display: block;} #tab_histoire .gallery .item:first-child img { display: none;} #tab_histoire .gallery .item .bloc_darkblue { width: 100%;} #tab_histoire .gallery .item:last-child { align-self: start; margin-top: 8vw;} #tab_histoire .gallery .item:nth-child(2) { grid-row: span 2;} } @media (max-width:1000px) { #tab_engagements:before { height: 20vw; border-radius: 0;} #tab_engagements .video .play_pause { background-size: auto 26px; border-radius: var(--radiusL);} #tab_equipe { border-radius: 0;} #tab_histoire .slider .bloc_white { width: clamp(200px, 80vw, 450px);} #tab_histoire .nav_slider { top: 5px;} } @media (max-width:700px) { #tab_philosophie .item_sticky { position: static; width: 100%; max-width: 400px; margin: 0 auto;grid-area: 2;} #tab_philosophie .intro { max-width: none;} #tab_engagements .container { grid-gap: 4vw; margin-bottom: -2vw; padding-top: 2vw;} #tab_engagements .item { color: var(--txtColor); border-radius: 0; padding: 2vw; background: transparent;} #tab_engagements .item .sous_titre { padding: 0 0 4px 30px;} #tab_engagements .item .sous_titre:before { width: 20px; background-position: 0 25%;} #tab_engagements .video .play_pause { background-size: auto 18px; border-radius: 3.5vw;} #tab_histoire .slider { padding-top: clamp(5px, 1vw, 15px); margin: 0;} #tab_histoire .slider .slick-list { overflow: hidden;} #tab_histoire .slider .bloc_white { width: 90vw; margin-right: 5vw; margin-bottom: 5px;} #tab_histoire .slider .bloc_white .num { position: static; display: inline-block; font-size: 15px; line-height: 32px; width: 65px; text-align: center; height: 30px; border-radius: var(--radiusXS); margin-bottom: 10px;} #tab_histoire .nav_slider { top: -5px; right: -5px;} } @media (max-width:500px) { #tab_histoire .gallery .container { grid-template-columns: 1fr;} #tab_histoire .gallery .item:first-child { width: 100%; grid-area: auto;} #tab_histoire .gallery .item:last-child { margin-top: 0;} #tab_histoire .gallery .item .bloc_darkblue { display: none;} } #autres_s .bloc_txt_img .wrap { max-width: 700px;} #autres_s .bloc_txt_img .bloc_gray p b { font-weight: 500; font-size: clamp(16px, 1.4vw, 22px);} /***** page mod *****/ #mod .top_page { padding-bottom: 0;} #mod .bloc_txt h2, #mod .bloc_txt h3, #mod .bloc_txt h4 { font: 500 clamp(16px, 1.8vw, 25px)/140% "Montserrat"; letter-spacing: 0; position: relative; margin-bottom: clamp(10px, 2vw, 15px); margin-top: clamp(30px, 8vw, 60px);} #mod .bloc_txt h2 { font-size: clamp(18px, 2.1vw, 28px); line-height: 120%;} #mod .bloc_txt ul { margin: clamp(10px, 2vw, 15px);} #mod .bloc_txt ul li { position: relative; padding-left: 20px; margin-bottom: 12px; line-height: 170%;} #mod .bloc_txt ul li:before { width: 6px; height: 6px; position: absolute; left: 0; top: 10px; background: #000; content: "";} #mod .bloc_txt ul li:last-child { margin-bottom: 0;} @media (max-width:1000px) { #mod .bloc_txt h2, #mod .bloc_txt h3, #mod .bloc_txt h4 { font-size: clamp(18px, 2.6vw, 25px);} #mod .bloc_txt h2 { font-size: clamp(18px, 3vw, 28px);} } @media (max-width:700px) { #mod .bloc_txt ul li { padding-left: 18px; margin-bottom: 10px;} #mod .bloc_txt ul li:before { top: 8px;} } #galerie .grid_bloc.col_4 { margin: clamp(40px, 2.5vw, 90px) auto; } #galerie .grid_bloc.col_4 .container { gap: 60px 40px; } #galerie .grid_bloc.col_4 .item { padding: 0; } #galerie .grid_bloc.col_4 .item img { aspect-ratio: 1/1; object-fit: cover;} #galerie .grid_bloc.col_4 .item .link_arrow { height: 60px; } #galerie .grid_bloc.col_4 .item .link_arrow:after { width: 60px; } @media (max-width:700px) { #galerie .grid_bloc.col_4 .item .link_arrow span { color: #fff;} #galerie .top_page .chapo { display: none;} }