/***** top page *****/ .top_page { position: relative; padding-top: 180px;} .top_page:before { width: 200vw; position: absolute; left: -50vw; top: 0; bottom: 0; background: var(--darkBlue); content: "";} .top_page .bloc_grid { margin: 0; grid-gap: 0;} .top_page .texte { padding: 80px 80px 120px 0;} .top_page .titre_cap { color: var(--red);} .top_page .titre_cap span { color: #fff; margin: 0;} .top_page .titre_main { color: #fff;} .top_page .titre_main span { font-size: 25px; line-height: 35px;} .top_page .chapo { color: #fff; padding-top: 5px;} .top_page .link { margin-top: 15px; background-image: linear-gradient(to top, var(--blue) 0% 50%, #fff 50% 100%);} .top_page p { margin: 15px 0 0 0;} .top_page .cta_tel { position: relative; width: 50%; padding: 40px 80px 0 0; margin-top: -80px;} .top_page .cta_tel:before { width: 200vw; position: absolute; left: -50vw; top: 0; bottom: 0; background: #fff; content: "";} .top_page .cta_tel .titre_main { color: var(--darkBlue); padding-left: 70px;} .top_page .cta_tel .titre_main:before { width: 10px; height: 84%; background: var(--red); position: absolute; left: 0; top: 8%; content: "";} .top_page .cta_tel .titre_main a { color: var(--blue); padding: 0; border: none;} @media (min-width:1201px) { .top_page .link:hover { color: var(--darkBlue);} .top_page .link_dwnld:hover:before { filter: invert(1); opacity: 0.65;} } @media (max-width:1600px) { .top_page { padding-top: 160px;} .top_page .cta_tel .titre_main { padding-left: 50px;} } @media (max-width:1200px) { .top_page { padding-top: 140px;} .top_page .texte { padding: 80px 60px 80px 0;} .top_page .chapo { padding-top: 0;} .top_page .cta_tel { display: none;} } @media (max-width:1000px) { .top_page { padding-top: 160px;} .top_page .bloc_grid .photo { max-width: none;} .top_page .bloc_grid .photo img { max-height: 60vw;} .top_page .texte { padding: 40px 0 60px 0;} } @media (max-width:700px) { .top_page { padding-top: 110px;} .top_page .bloc_grid .photo img { max-height: none;} .top_page .texte { padding: 30px 0 40px 0;} } /***** breadcrumb *****/ .breadcrumb { position: absolute; left: 0; top: 40px; z-index: 50; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--red);} .breadcrumb li { display: inline; margin-right: 30px; letter-spacing: 0.8px; position: relative;} .breadcrumb li:after { width: 1px; height: 10px; position: absolute; right: -16px; top: 3px; background: #fff; content: "";} .breadcrumb li:last-child:after { display: none;} .breadcrumb li a { color: #fff;} .breadcrumb li a.active { color: var(--red);} @media (max-width:1200px) { .breadcrumb { top: 20px;} } @media (max-width:1000px) { .breadcrumb { position: static; margin-bottom: 25px;} } @media (max-width:700px) { .breadcrumb { margin-bottom: 20px; font-size: 12px;} .breadcrumb li { margin-right: 20px;} .breadcrumb li:after { height: 8px; right: -12px;} } /***** moving txt *****/ .moving_txt { width: 100vw; left: 45%; position: absolute; bottom: -130px; overflow: hidden;} .moving_txt:before { width: 300px; height: 60px; position: absolute; left: 0; top: 0; background: linear-gradient(to right, rgba(0, 41, 86, 1) 0%, rgba(0, 41, 86, 0) 100%); z-index: 50; content: "";} .moving_txt:after { width: 300px; height: 130px; position: absolute; left: 0; bottom: 0; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); z-index: 50; content: "";} .moving_txt .row { width: auto; display: flex;} .moving_txt .row .grid { width: auto; display: flex; animation: moving_txt 100s linear infinite;} .moving_txt .row .grid div { padding: 0 4vw; font: 700 250px/190px "Raleway"; text-transform: uppercase; letter-spacing: 1px; color: var(--blue); opacity: 0.15; filter: saturate(0.5);} @keyframes moving_txt { 0% { transform: translate(0, 0);} 100% { transform: translate(-100%, 0);} } @media (max-width:1600px) { .moving_txt .row .grid div { font-size: 220px;} } @media (max-width:1400px) { .moving_txt { bottom: -120px;} .moving_txt:before { height: 70px;} .moving_txt:after { height: 120px;} .moving_txt .row .grid div { font-size: 200px;} } @media (max-width:1200px) { .moving_txt { display: none;} } /***** bloc col txt *****/ .bloc_col_txt { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 100px; align-items: start; margin: var(--marginBloc);} .bloc_col_txt .item:last-of-type { margin-top: 180px;} .bloc_col_txt .item .photo { position: relative; margin-top: 80px;} .bloc_col_txt .item .photo img { width: 100%; height: auto; display: block; transition: all 300ms ease-in-out;} .bloc_col_txt .item .photo.shape:before { width: 50vw; height: 100%; background: var(--blue); position: absolute; right: 25%; top: 15%; z-index: -1; content: "";} .bloc_col_txt.align_top .item:last-of-type { margin-top: 0;} @media (min-width:1201px) { .bloc_col_txt .item:hover .photo img { transform: scale(0.95);} } @media (max-width:1600px) { .bloc_col_txt .item:last-of-type { margin-top: 140px;} } @media (max-width:1400px) { .bloc_col_txt { grid-gap: 80px;} .bloc_col_txt .item:last-of-type { margin-top: 120px;} .bloc_col_txt .item .photo { margin-top: 60px;} } @media (max-width:1200px) { .bloc_col_txt { grid-gap: 60px;} .bloc_col_txt .item .photo { margin-top: 40px;} .bloc_col_txt .item:last-of-type { margin-top: 80px; margin: 0;} } @media (max-width:1000px) { .bloc_col_txt { grid-template-columns: 1fr;} .bloc_col_txt .item { display: grid;} .bloc_col_txt .item .photo { grid-area: 1; margin: 0 0 45px 0;} .bloc_col_txt .item .photo { max-width: 450px;} .bloc_col_txt .item .photo:before { width: 50vw; height: 100%; background: #f2f2f2; background: var(--blue); position: absolute; left: 100%; top: 0; margin-left: 15px; z-index: -1; content: "";} .bloc_col_txt .item .photo.shape:before { right: auto; top: 0;} } @media (max-width:700px) { .bloc_col_txt { grid-gap: 30px;} .bloc_col_txt .item .photo { margin: 0 0 30px 0;} .bloc_col_txt .item .photo:before { margin-left: 10px;} } @media (max-width:500px) { .bloc_col_txt .item .photo:before { display: none;} .bloc_col_txt .item .photo.shape:before { display: none;} } /***** space bloc *****/ .space_bloc-40 { height: 40px;} .space_bloc-60 { height: 60px;} .space_bloc-80 { height: 80px;} .space_bloc-100 { height: 100px;} @media (max-width:1200px) { .space_bloc-40 { height: 20px;} .space_bloc-60 { height: 40px;} .space_bloc-80 { height: 60px;} .space_bloc-100 { display: none;} } @media (max-width:1000px) { .space_bloc-40 { height: 40px;} .space_bloc-60 { height: 40px;} .space_bloc-80 { height: 40px;} } @media (max-width:700px) { .space_bloc-40 { height: 30px;} .space_bloc-60 { height: 30px;} .space_bloc-80 { height: 30px;} } /***** page content *****/ .page { position: relative;} .page p { margin-bottom: 15px;} .page .ul_list a, .page p a { border-bottom: 1px solid #ccc; padding-bottom: 2px;} .page .ul_list { margin: 20px 0;} .page .ul_list li { padding: 0 0 0 20px; position: relative; margin-top: 10px; background: url("../images/list_red.svg") 0 9px no-repeat;} .page .ul_check { margin: 20px 0;} .page .ul_check li { padding: 0 0 0 35px; position: relative; margin-top: 10px; background: url("../images/check_red.svg") 0 6px no-repeat;} @media (min-width:1201px) { .page .ul_list a:hover, .page p a:hover { color: var(--blue); border-color: var(--blue);} } @media (max-width:1200px) { } @media (max-width:700px) { .page p { margin-bottom: 10px;} .page .ul_list { margin: 15px 0;} .page .ul_list li { padding-left: 18px; margin-top: 8px; background-position: 0 7px;} .page .ul_check { margin: 15px 0;} .page .ul_check li { padding: 0 0 0 28px; margin-top: 8px; background-size: 16px auto;} } /***** bloc texte *****/ .bloc_texte { margin: var(--marginBloc); position: relative;} .bloc_texte :last-child { margin-bottom: 0;} .bloc_texte img, .bloc_texte video { width: 100%; height: auto; display: block;} /***** bloc columns *****/ .bloc_columns { position: relative; margin: var(--marginBloc);} .bloc_columns .grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; padding-top: 10px;} .bloc_columns .item { position: relative; background: var(--darkBlue); text-align: center; color: #fff; padding: 40px; min-height: 320px; display: grid; align-items: center; transition: all 300ms ease-in-out;} .bloc_columns .item p { max-width: 350px; margin-left: auto; margin-right: auto;} .bloc_columns .nbr .titre_cap span { font-size: 100px; margin: 0 0 25px 0;} .bloc_columns .nbr p { font-size: 20px; letter-spacing: 0.6px;} .bloc_columns.cta_links .item { background: none; padding: 0; min-height: inherit;} .bloc_columns.cta_links .item img { width: 100%; height: auto; display: block;} .bloc_columns.cta_links .item .link { display: block; text-align: center;} @media (min-width:1201px) { .bloc_columns .grid:hover>:not(:hover) { transform: scale(0.9);} .bloc_columns.cta_links .item:hover .link { background-position: 0 0;} } @media (max-width:1600px) { .bloc_columns .grid { grid-gap: 20px;} .bloc_columns .item { min-height: 280px;} .bloc_columns .nbr .titre_cap span { font-size: 80px; margin: 0 0 20px 0;} .bloc_columns .nbr p { font-size: 18px;} } @media (max-width:1400px) { .bloc_columns .item { min-height: 240px;} .bloc_columns .nbr .titre_cap span { font-size: 60px; line-height: 60px; margin: 0;} } @media (max-width:1200px) { .bloc_columns .item { padding: 30px;} } @media (max-width:1000px) { .bloc_columns .grid { grid-template-columns: 1fr; grid-gap: 15px;} .bloc_columns .item { min-height: 180px;} .bloc_columns .item p { margin-bottom: 0;} .bloc_columns .nbr .titre_cap span { font-size: 40px; line-height: 40px;} .bloc_columns .nbr p { font-size: 16px;} } @media (max-width:700px) { .bloc_columns .item { min-height: 120px;} .bloc_columns .grid { grid-template-columns: 1fr; grid-gap: 10px;} .bloc_columns .item { padding: 25px 20px;} .bloc_columns .nbr .titre_cap span { font-size: 35px; line-height: 35px; margin-bottom: 10px;} } /***** valeurs *****/ #about .valeurs { position: relative; text-align: center; padding: 160px 0; background: var(--darkBlue); color: #fff;} #about .valeurs .titre_main { display: none;} #about .valeurs ul { position: relative;} #about .valeurs li { display: inline-block; font-size: 20px; line-height: 30px; letter-spacing: 1px; margin-right: 50px; position: relative;} #about .valeurs li:after { width: 3px; height: 20px; position: absolute; right: -28px; top: 4px; background: var(--red); content: "";} #about .valeurs li:last-child { margin: 0;} #about .valeurs li:last-child:after { display: none;} #about .valeurs .moving_text { width: 100vw; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 140px; overflow: hidden;} #about .valeurs .moving_text .row { display: flex;} #about .valeurs .moving_text .row .item { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw; white-space: nowrap; font: 900 150px/140px "Raleway"; text-transform: uppercase; letter-spacing: 15px; color: var(--blue); opacity: 8%; padding-left: 5vw; animation: moving_text_valeurs 35s linear infinite;} @keyframes moving_text_valeurs { 0% { transform: translate(-100%, 0);} 100% { transform: translate(0%, 0);} } #about .bloc_ora_groupe { grid-template-columns: 1fr auto; padding-top: 120px; border-top: 2px solid var(--red);} #about .bloc_ora_groupe img { display: block; height: auto; border: 1px solid #ddd; width: 180px;} #about .bloc_ora_groupe .grid_logos { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;} @media (max-width:1600px) { #about .valeurs { padding: 140px 0;} #about .valeurs li { font-size: 18px;} #about .valeurs .moving_text { height: 130px;} #about .valeurs .moving_text .row .item { font-size: 140px; line-height: 130px;} #about .bloc_ora_groupe img { width: 160px;} } @media (max-width:1400px) { #about .bloc_ora_groupe { padding-top: 100px;} } @media (max-width:1400px) { #about .valeurs { padding: 120px 0;} #about .valeurs .moving_text { height: 110px;} #about .valeurs .moving_text .row .item { font-size: 120px; line-height: 110px;} #about .bloc_ora_groupe img { width: 140px;} } @media (max-width:1200px) { #about .valeurs { padding: 100px 0;} #about .valeurs li { font-size: 16px;} #about .valeurs li:after { height: 16px; top: 6px;} #about .valeurs .moving_text { height: 90px;} #about .valeurs .moving_text .row .item { font-size: 100px; line-height: 90px;} #about .bloc_ora_groupe { padding-top: 80px;} } @media (max-width:1000px) { #about .bloc_columns .grid { grid-template-columns: 1fr 1fr 1fr;} #about .bloc_ora_groupe { grid-template-columns: 1fr;} #about .bloc_ora_groupe img { width: 100%;} } @media (max-width:700px) { #about .valeurs { padding: 45px 0; text-align: left;} #about .valeurs ul { column-count: 2; padding: 0 20px;} #about .valeurs li { display: block; margin: 0 0 5px 0; font-size: 14px; background: url("../images/check_red.svg") 0 8px no-repeat; padding: 0 0 0 28px; background-size: 16px auto;} #about .valeurs li:after { display: none;} #about .valeurs .moving_text { height: 80px;} #about .valeurs .moving_text .row .item { font-size: 60px; line-height: 80px;} #about .bloc_columns .grid { grid-template-columns: 1fr;} #about .bloc_columns.cta_links .grid { grid-template-columns: 1fr 1fr;} #about .bloc_ora_groupe { padding-top: 35px; grid-gap: 25px;} #about .bloc_ora_groupe .grid_logos { grid-gap: 10px;} #about .bloc_ora_groupe img { object-fit: contain; aspect-ratio: 1.25/1;} } @media (max-width:500px) { #about .bloc_columns.cta_links .grid { grid-template-columns: 1fr;} } /***** page generale services *****/ #services .list_services { position: relative; display: grid; padding-right: 40%;} #services .list_services .item { border-bottom: 1px solid #ddd;} #services .list_services .item .icon { width: 120px; padding: 30px; background: var(--red); border-radius: 50% 50% 50% 0; margin-bottom: 25px;} #services .list_services .sous_titre { display: grid; align-items: center; margin: 0; background: url("../images/arrow_link_red.svg") right center no-repeat; font-size: 22px; line-height: 30px; padding-right: 40px; min-height: 90px;} #services .list_services .sous_titre .icon { display: none;} #services .list_services .texte { position: absolute; right: 0; top: 0; max-width: 520px; width: 40%; padding-left: 80px; opacity: 0; visibility: hidden;} #services .list_services .link { float: right; width: 100%; height: 90px; margin-top: -90px; opacity: 0;} @media (min-width:1201px) { #services .list_services .item:last-child { border-bottom: none;} #services .list_services .sous_titre { transition: color 300ms ease-in-out;} #services .list_services .item.active .sous_titre { color: var(--red);} #services .list_services .item.active .texte { opacity: 1; visibility: visible;} } @media (max-width:1200px) { #services .list_services { padding-right: 0; grid-gap: 20px;} #services .list_services .item { padding: 40px; border: 1px solid #ddd; position: relative;} #services .list_services .sous_titre { margin: 0 0 20px 0; grid-template-columns: auto 1fr; grid-gap: 20px;} #services .list_services .sous_titre .icon { display: block; width: 90px; padding: 22px; background: var(--blue); border-radius: 50%; margin: 0;} #services .list_services .texte { position: relative; right: auto; top: auto; max-width: none; width: 100%; padding-left: 0; opacity: 1; visibility: visible;} #services .list_services .texte .icon { display: none;} #services .list_services .link { float: none; margin: 0; position: absolute; left: 0; top: 40px;} } @media (max-width:1000px) { #services .top_page .bloc_grid .photo img { object-position: center bottom;} } @media (max-width:700px) { #services .list_services { grid-gap: 30px;} #services .list_services .item { padding: 0 0 30px 0; border: none; border-bottom: 1px solid #ddd;} #services .list_services .item:last-of-type { padding: 0; border-bottom: 0;} #services .list_services .sous_titre { margin: 0 0 15px 0; grid-template-columns: auto 1fr; grid-gap: 15px; font-size: 16px; line-height: 24px; min-height: 60px;} #services .list_services .sous_titre .icon { width: 60px; padding: 15px;} #services .list_services .link { height: 60px; top: 0;} #services .moving_img { padding-bottom: 50px;} } /***** page service *****/ #service .intro { padding: 120px 0 120px 200px; max-width: 80%; position: relative;} #service .intro img { width: 120px; height: auto; display: block; position: absolute; left: 0; top: 50%; margin-top: -80px;} #service .intro .chapo { font-size: 20px; line-height: 36px;} @media (max-width:1600px) { #service .intro .chapo { font-size: 18px; line-height: 34px;} } @media (max-width:1400px) { #service .intro { padding: 120px 0 100px 180px; max-width: none;} #service .intro img { width: 100px; margin-top: -60px;} } @media (max-width:1200px) { #service .intro { padding: 100px 0 80px 140px;} #service .intro img { width: 80px; margin-top: -50px;} #service .intro .chapo { font-size: 16px; line-height: 32px;} } @media (max-width:1000px) { #service .intro { padding: 30px 0 60px 0;} #service .intro img { width: 80px; position: static; margin: 0 0 20px 0;} } @media (max-width:700px) { #service .intro { padding: 5px 0 30px 0;} #service .intro img { width: 60px;} #service .intro .chapo { font-size: 14px; line-height: 28px;} } /***** page generale jobs *****/ #jobs .list_jobs { position: relative;} #jobs .list_jobs .item { position: relative; padding: 30px 0; border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr auto; grid-gap: 30px; align-items: center;} #jobs .list_jobs .item:last-child { border-bottom: none;} #jobs .list_jobs .item .sous_titre { margin: 0; font-size: 26px; line-height: 34px;} #jobs .list_jobs .item .sous_titre span { font-size: 15px; line-height: 20px; font-weight: 500; display: block; color: var(--darkBlue); margin-top: 5px;} #jobs .list_jobs .item .link { min-width: 150px; text-align: center;} #jobs .list_jobs.cs { margin-top: 60px; padding-top: 45px; border-top: 5px solid var(--red);} #jobs .link.cs { margin-top: 40px; width: 100%; font-size: 18px; line-height: 24px; padding: 30px 70px 30px 50px; height: auto;} #jobs .link.cs:after { width:12px; height: 100%; position: absolute; right: 40px; top: 0; background: url("../images/arrow_link_red.svg") center no-repeat; filter: brightness(0) invert(1); content: "";} /***** page cases studies *****/ #cases .top_page .texte { padding: 60px 0 100px 0; max-width: 80%; position: relative;} #cases .top_page .texte .chapo { margin: 0;} #cases .cases { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; width: 90vw; max-width: 2000px;} #cases .cases .item a { display: block; text-align: center;} #cases .cases .item a img { margin-bottom: 15px; transition: all 300ms ease-in-out;} #cases .cases .item a h3 { transition: all 300ms ease-in-out;} @media (min-width: 1201px){ #cases .cases .item a:hover img { transform: scale(0.95);} #cases .cases .item a:hover h3.titre_cap { color: var(--red);} } @media (max-width:2000px) { #cases .cases { grid-template-columns: repeat(4, 1fr);} } /** case detail **/ .case { width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 999; display: none;} .case ::-webkit-scrollbar { display: none;} .case .close_bg { width: 100%; height: 100%; background: var(--darkBlue); position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.7; cursor: url(../images/close.svg), auto;} .case .infos { width: 75vw; height: 100%; background: #fff; position: absolute; top: 0; z-index: 20;} .case .infos .close { position: absolute; top: 20px; right: 20px; width: 60px; height: 60px; background: var(--darkBlue); cursor: pointer; z-index: 50; transition: all 300ms ease-in-out;} .case .infos .close:before { width: 24px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} .case .infos .close:after { width: 2px; height: 24px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} .case .infos .row { height: 100%; display: grid; align-items: center; overflow-y: auto; margin: 0 auto 0 5vw;} .case .infos .row .wrap { padding: 20px 0; position: relative;} .case .infos .row .wrap .texte { max-width: 1000px; margin-bottom: 40px; margin-right: 5vw;} .case .photos { width: 70vw; position: relative;} .case .photos .slider { width: 70vw;} .case .photos .slider .slick-slide { margin-right: 20px;} .case .photos .slider .slick-slide img { width: auto; height: 55vh; max-height: 600px; display: block;} .case .photos .slider .slick-slide iframe { height: 55vh; max-height: 600px; width: auto; aspect-ratio: 16/9;} .case .photos .nav_slider { width: 100%; height: 0; position: absolute; left: 0; top: 50%; margin-top: -40px; padding: 0 20px;} .case .photos .slick-next { float: right;} /* open close animation */ .case .infos { right: -80vw; transition: right 600ms ease-in-out 200ms;} .case .infos.active { right: 0; transition-delay: 400ms;} .case .infos .row { opacity: 0; transition: opacity 400ms ease-in-out 0ms;} .case .infos.active .row { opacity: 1; transition-delay: 1000ms;} @media (min-width:1201px) { .case .infos .close:hover { background: var(--blue);} } @media (max-width:1600px) { .case .infos { width: 100vw; right: -90vw;} .case .infos .row { width: 100vw;} .case .photos { width: 100vw;} } @media (max-width:1200px) { .case .infos { width: 100vw; right: -100vw;} .case .infos .close { left: auto; top: 25px; right: 25px; width: 50px; height: 50px; background: #000; opacity: 0; transition: opacity 400ms ease-in-out 0ms;} .case .infos .close:before { background: #fff;} .case .infos .close:after { background: #fff;} .case .infos .row { width: 95vw;} .case .infos .row .wrap { padding: 50px 0;} .case .infos .texte { margin-bottom: 30px;} .case .photos { width: 95vw;} .case .slider .slick-slide img { height: 40vw;} .case .infos.active .close { opacity: 1; transition-delay: 1000ms;} .case .slick-next { right: 0;} } @media (max-width:1000px) { .case .slider .slick-slide img { height: 60vw;} } @media (max-width:600px) { .case .infos .close { top: 0; right: 0; width: 46px; height: 46px;} .case .infos .row .wrap { padding: 5vw 0;} .case .infos .texte { width: 80vw; margin: 10px 0 10px 5vw;} .case .infos .sous_titre { font-size: 14px; line-height: 24px; margin: -5px 0 10px 0;} .case .slider .item img { width: 90vw; height: auto; display: block; margin-top: 15px;} }