.header .logo { width: 100px;} @media (max-width:1200px) { .header .logo { width: 80px;} } @media (max-width:700px) { .header .logo { width: 50px;} } .sous_titre { color: #01c7d4;} /***** top page *****/ .top_page { position: relative; margin-bottom: 140px; margin: 160px 0 0 0; min-height: 330px;} .top_page .shape { position: absolute; top: -25%; right: -60%; z-index: -1; width: 540px; height: 540px;} @media (max-width:1500px) { .top_page .shape { top: -18%; right: -40%; } } @media (max-width:1200px) { .top_page { margin-bottom: 90px; margin: 130px 0 0 0; min-height: inherit;} .top_page .shape { top: 5%; right: -50%; } } @media (max-width:1000px) { .top_page { margin-bottom: 60px; margin: 120px 0 0 0;} .top_page .shape { top: 10%; right: -65%; } } @media (max-width:700px) { .top_page { margin-bottom: 50px; margin: 75px 0 0 0; background: linear-gradient(160deg, #01c7d4, #003585); color: #fff; box-shadow: none;} .top_page .titre, .top_page .sous_titre, .top_page .titre_main { color: #fff;} .top_page .shape { display: none;} } /***** breadcrumb *****/ .breadcrumb { line-height: 0; margin-bottom: 0; margin: 0 0 20px;} .breadcrumb li { display: inline-block; font: 400 13px/48px "Comfortaa"; margin-right: 35px; position: relative;} .breadcrumb li .active { color: #ffc436;} .breadcrumb li:after { width: 1px; height: 10px; content: ""; position: absolute; right: -18px; top: 19px; background: #0c356a;} .breadcrumb li:last-child:after { display: none;} .breadcrumb li a { color: #0c356a;} @media (min-width:1201px) { .breadcrumb li a:hover { color: #ffc436; } } @media (max-width:1200px) { } @media (max-width:700px) { .breadcrumb { display: none;} } /***** page content *****/ .page_content p { margin-bottom: 20px;} .page_content .ul_list a, .page_content p a { color: #ffc436; border-bottom: 1px solid transparent; padding-bottom: 2px;} @media (min-width:1201px) { .page_content .ul_list a:hover, .page_content p a:hover { border-color: #ffc436;} } @media (max-width:700px) { .page_content p { margin-bottom: 15px;} } /***** bloc texte *****/ .bloc_texte { margin: 100px auto; position: relative;} .bloc_texte :last-child { margin-bottom: 0;} .bloc_texte img { width: 100%; height: auto; display: block; line-height: 0;} @media (max-width:1200px) { .bloc_texte { margin: 80px auto;} } @media (max-width:1000px) { .bloc_texte { margin: 60px auto;} } @media (max-width:700px) { .bloc_texte { margin: 40px auto;} } .atouts { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;} .atouts .item { background-color: #fff; box-shadow: 0 0 20px 0px rgba(27,38,54,0.15); padding: 40px 50px; border-radius: 15px;} .atouts .item .titre { font-weight: 600; font-size: 15px; line-height: 50px; height: 50px; padding-left: 60px; background: url("../images/atouts_page.svg") 0 50% no-repeat;} @media (max-width:1200px) { .atouts { grid-gap: 20px;} .atouts .item { padding: 35px 40px; border-radius: 10px;} .atouts .item .titre { font-size: 14px; line-height: 24px; } } @media (max-width:1000px) { .atouts { grid-gap: 15px; grid-template-columns: 1fr;} .atouts .item { padding: 35px 5vw;} } @media (max-width:700px) { .atouts .item { padding: 35px 7.5vw;} .atouts .item .titre { font-size: 12px; line-height: 22px; } } /***** show hide *****/ .show_hide { position: relative; border: 2px solid #01c7d4; border-radius: 10px; overflow: hidden; margin: 25px 0;} .show_hide .item { border-bottom: 1px solid #01c7d4;} .show_hide .item:last-child { border-bottom: 0;} .show_hide .titre { position: relative; cursor: pointer; padding: 27px 80px 28px 80px; font: 800 18px/24px "Comfortaa"; letter-spacing: 0.4px; background: url("../images/check.svg") 40px 28px no-repeat #fff; color: #0c356a; margin: 0; transition: all 400ms ease-in-out;} .show_hide .titre:after { width: 20px; height: 100%; background: url("../images/plus.svg") 50% no-repeat; position: absolute; right: 40px; top: 0; transition: none; content: "";} .show_hide .item:last-child .titre { padding-bottom: 29px;} .show_hide .titre.active { background-color: #fff;} .show_hide .titre.active:after { transform: rotate(45deg)} .show_hide .hide { margin: 0; padding: 0 40px 38px 40px; background: #fff; color: #222; letter-spacing: 0.4px; display: none;} .show_hide .hide p { margin-bottom: 10px;} .show_hide .hide p a { color: #222; border-bottom: 1px solid #ccc; padding-bottom: 1px;} .show_hide .hide :last-child { margin-bottom: 0;} @media (min-width: 1201px){ .show_hide .hide p a:hover { color: #0081c8; border-color: #0081c8;} } @media (max-width: 1200px){ .show_hide { margin: 20px 0;} .show_hide .titre { padding: 18px 70px 18px 70px; font-size: 16px; border-radius: 8px; background: url("../images/check.svg") 30px 20px no-repeat #fff; } .show_hide .hide { padding: 20px 30px;} .show_hide .item:last-child .titre { padding-bottom: 18px;} } @media (max-width: 1000px){ .show_hide { margin: 20px 0;} .show_hide .titre { padding: 18px 80px 18px 70px; background-position: 30px 50%; } .show_hide .hide { padding: 20px 30px;} } @media (max-width: 700px){ .show_hide { margin: 15px 0;} .show_hide .titre { padding: 12px 80px 12px 60px; background-position: 20px 50%; font-size: 14px; border-radius: 8px;} .show_hide .titre:after { right: 20px;} .show_hide .hide { padding: 20px 7.5vw;} .show_hide .item:last-child .titre { padding-bottom: 12px;} } /* **** show hide **** .faq .sous_titre { display: grid; grid-template-columns: auto 1fr; grid-gap: 30px; align-items: center;} .faq .show_hide { background: #fff;} .faq .show_hide .titre { font-size: 16px; background-color: #fff;} @media (min-width: 1201px){ } @media (max-width: 1200px){ .faq .show_hide .titre { font-size: 14px; padding-left: 70px;} } @media (max-width: 700px){ .faq .show_hide .titre { font-size: 12px; padding-left: 7.5vw;} } */ #about .equipe .team { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px;} #about .equipe .team .nom { font-size: 17px; margin-top: 10px;} #about .equipe .team img { border-radius: 20px; } @media (max-width:1200px) { #about .equipe .team { grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;} #about .equipe .team .nom { font-size: 16px;} #about .equipe .team img { border-radius: 15px; } } @media (max-width:1000px) { #about .equipe .team { grid-template-columns: 1fr 1fr; grid-gap: 15px;} #about .equipe .team .nom { font-size: 15px;} #about .equipe .team img { border-radius: 10px; } } @media (max-width:700px) { #about .equipe .team .nom { font-size: 14px;} #about .equipe .team img { border-radius: 8px; } } #about .photo_equipe img { border-radius: 20px; max-width: 750px; margin: 0 auto;} @media (max-width:1200px) { #about .photo_equipe img { border-radius: 15px; } } @media (max-width:1000px) { #about .photo_equipe img { border-radius: 10px; } } @media (max-width:700px) { #about .photo_equipe img { border-radius: 8px; } } /***** page jobs *****/ #jobs .jobs { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px;} #jobs .offre_job { position: relative; background-color: #00204a; border-radius: 20px;} #jobs .offre_job>a { border-radius: 20px; padding: 20px 80px 20px 30px; display: block; color: #fff; font-size: 18px; line-height: 30px; letter-spacing: 0.4px; margin: 0; } #jobs .offre_job>a:after { width: 40px; height: 14px; background: url("../images/arrow.svg") 100% 50% no-repeat; position: absolute; right: 40px; top: 50%; margin-top: -7px; content: ""; transition: all 300ms ease-in-out;} #jobs .offre_job span { display: block; font-size: 14px; line-height: 24px; letter-spacing: 0.8px; margin-top: 5px; color: #01c7d4;} @media (min-width:1201px) { #jobs .offre_job>a:hover { background-color: #01c7d4;} #jobs .offre_job>a:hover span { color: #fff;} #jobs .offre_job>a:hover:after { right: 65px; } } @media (max-width:1200px) { #jobs .offre_job { border-radius: 15px;} #jobs .offre_job>a { border-radius: 15px; padding: 15px 80px 15px 30px; } } @media (max-width:1000px) { #jobs .jobs { grid-template-columns: 1fr; grid-gap: 20px;} #jobs .offre_job { border-radius: 10px;} #jobs .offre_job>a { border-radius: 10px; padding: 12px 80px 12px 30px; } } @media (max-width:700px) { #jobs .jobs { grid-gap: 10px;} #jobs .offre_job { border-radius: 8px;} #jobs .offre_job>a { border-radius: 8px; padding: 18px 7.5vw 18px 7.5vw; font-size: 16px; line-height: 24px;} #jobs .offre_job>a:after { position: static; display: block; margin-top: 15px;} #jobs .offre_job span { font-size: 12px; line-height: 22px;} } /***** Blog *****/ #blog .blocBlog { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin-top:60px; grid-gap:30px;} #blog .blocBlog .item { position: relative; height: max-content;} #blog .blocBlog .item a img { width: 100%; height: auto; display:block; border-radius: 15px 15px 0 0; } #blog .blocBlog .item a { position: relative; display: block; width: 100%; height: 100%; box-shadow: 0 0 25px 0px #1d8abd40; border-radius: 15px } #blog .blocBlog .item a .entree { display: grid; align-items: center; background: #fff; outline: none; position: relative; width: 100%; padding: 20px 30px; overflow: hidden; color: #00366e; transition: all 300ms ease-in-out; border-radius: 0 0 15px 15px ;} #blog .blocBlog.detail { display: grid; grid-template-columns:repeat(3,1fr); text-align: center; margin-top: 60px; margin-bottom: 40px; grid-gap: 40px;} #blog .details_blog h2 { font-weight: 500; font-size: 16px; line-height: 32px;} #blog .details_blog h3 { font: 600 22px/32px "Comfortaa"; letter-spacing: 0.6px; position: relative; margin-bottom: 20px; color: #1f1e34; margin-top: 50px;} #blog .details_blog h4 { font: 600 16px/26px "Comfortaa"; margin-top: 40px; margin-bottom: 20px; } #blog .details_blog img { display: block; margin: 50px auto; max-width: 600px; } #blog .details_blog ul { margin: -5px 0 20px 0;} #blog .details_blog ul li { padding: 5px 0 5px 25px; position: relative; background: url("../images/list.svg") left 14px no-repeat;} @media (min-width:1201px) { /*button:before (attr data-hover)*/ #blog .blocBlog .item a:hover .entree { background: #00366e; color: #fff;} #blog .blocBlog .item a:hover .entree:before { opacity: 1; transform: translate(0,0);} #blog .blocBlog .item a .entree:before { content: "Lire l'article"; position: absolute; left: 0; right: 0; width: 100%; text-transform: uppercase; letter-spacing: 1px; opacity: 0; transition: all .5s ease-in-out; } /*button div (button text before hover)*/ #blog .blocBlog .item a:hover .entree div { opacity: 0;} #blog .blocBlog .item a .entree div { letter-spacing: 1px; transition: all .5s ease-in-out;} } @media (max-width:1200px) { } @media (max-width:1000px) { #blog .blocBlog { grid-template-columns: 1fr 1fr; } } @media (max-width:700px) { #blog .blocBlog { grid-template-columns: 1fr; } #blog .details_blog h2 { font-size: 14px; line-height: 30px;} #blog .details_blog h3 { font-size: 16px; margin-top: 35px; margin-bottom: 15px; } #blog .details_blog h4 { font-size: 14px; margin-top: 25px; margin-bottom: 15px; } } /* #solutions .bloc_logo { display: inline-block; box-shadow: 0 0 20px 0px #1d8abd40; background-color: #fff; padding: 0 30px; border-radius: 25px} */ #solutions .bloc_logo img { display: block; height: auto; width: 150px;} /***** page equipe *****/ #case .case_studies { position: relative; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin-top:60px; grid-gap:30px;} #case .case_studies .item { position: relative; border-radius: 15px; overflow: hidden;} #case .case_studies .item a { position: relative; display: block; width: 100%; height: 100%;} #case .case_studies .item img { display: block; width: 100%; height: auto; transition: all 400ms ease-in-out; } #case .bloc_case .item a .titre { display: grid; justify-items: center; justify-content: center; align-content: center; grid-gap: 10px; align-items: center; background: #00366ea6; outline: none; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; padding: 15px 30px; overflow: hidden; color: #fff; transition: all 300ms ease-in-out; } @media (min-width:1201px) { #case .case_studies .item:hover img { filter: brightness(0.75);} /*button:before (attr data-hover)*/ #case .bloc_case .item a:hover .titre { background: #00366e; color: #fff; background-image: none;} #case .bloc_case .item a:hover .titre:before { opacity: 1; transform: translate(0,0);} #case .bloc_case .item a .titre:before { content: "En savoir plus"; position: absolute; left: 0; width: 100%; text-transform: uppercase; letter-spacing: 1px; opacity: 0; transition: all .5s ease-in-out; } /*button div (button text before hover)*/ #case .bloc_case .item a:hover .titre div { opacity: 0;} #case .bloc_case .item a .titre div { letter-spacing: 1px; transition: all .5s ease-in-out;} } @media (max-width:1200px) { #case .case_studies { margin-bottom: 80px;} #case .case_studies .item img { border-radius: 8px; } } @media (max-width:1000px) { #case .case_studies { grid-template-columns:repeat(2,1fr); grid-gap:20px; margin-bottom: -10px;} #case .case_studies .item:nth-child(odd) { top: auto;} #case .case_studies .contact { width: 100%; position: static; text-align: center; padding: 5px 0 0 0;} #case .case_studies .contact :last-child { margin-bottom: 0;} } @media (max-width:700px) { #case .case_studies { grid-template-columns: 1fr; margin: 50px auto;} #case .case_studies .item { margin: 0 15px 0 0;} #case .case_studies .item img { border-radius: 5px;} } /** case_studies_details detail **/ #case .case_studies_details { width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 250; display: none;} #case .case_studies_details ::-webkit-scrollbar { display: none;} #case .case_studies_details .close_bg { width: 100%; height: 100%; background: #1f1e34; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.8; cursor: url(../images/close.svg), auto;} #case .case_studies_details .infos { width: 60vw; height: 100%; background: #fff; position: absolute; top: 0; z-index: 20;} #case .case_studies_details .infos .close { position: absolute; top: 0; left: -50px; width: 50px; height: 50px; background: #ffc436; cursor: pointer; z-index: 50; border-radius: 0 0 0 8px; transition: background 300ms ease-in-out} #case .case_studies_details .infos .close:before { width: 12px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} #case .case_studies_details .infos .close:after { width: 2px; height: 12px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";} #case .case_studies_details .infos .row { width: auto; height: 100%; display: grid; align-items: center; overflow-y: auto; margin: 0 5vw;} #case .case_studies_details .infos .titre { margin-bottom: 5px; font-size: 28px; line-height: 36px; font-weight: 700;} #case .case_studies_details .infos .sous_titre { color: #000; font-size: 18px; font-weight: 700;} #case .case_studies_details .infos .row .wrap { padding: 60px 0 80px 0; position: relative;} #case .case_studies_details .infos .texte { background: #fff; margin-bottom: 40px;} #case .case_studies_details .infos img { border: 1px solid #ccc; max-height: 600px; height: auto; width: auto; max-width: 100%; display: block; margin-bottom: 30px;} /* open close animation */ #case .case_studies_details .infos { right: -60vw; transition: right 600ms ease-in-out 200ms;} #case .case_studies_details .infos.active { right: 0; transition-delay: 400ms;} #case .case_studies_details .infos .row { opacity: 0; transition: opacity 400ms ease-in-out 0ms;} #case .case_studies_details .infos.active .row { opacity: 1; transition-delay: 1000ms;} @media (min-width:1201px) { #case .case_studies_details .infos .close:hover { background: #01c7d4;} } @media (max-width:1800px) { #case .case_studies_details .infos { width: 70vw; right: -90vw;} #case .case_studies_details .infos .row { width: 70vw;} #case .case_studies_details .photos { width: 70vw;} } @media (max-width:1200px) { #case .case_studies_details .infos { width: 100vw; right: -100vw;} #case .case_studies_details .infos .close { left: auto; top: 0; right: 0; width: 50px; height: 50px; opacity: 0; transition: opacity 400ms ease-in-out 0ms;} #case .case_studies_details .infos .close:before { background: #fff;} #case .case_studies_details .infos .close:after { background: #fff;} #case .case_studies_details .infos .row { width: 95vw;} #case .case_studies_details .infos .row .wrap { padding: 50px 0;} #case .case_studies_details .infos .texte { margin-bottom: 30px;} #case .case_studies_details .infos .grid_custom img { border-radius: 8px; } #case .case_studies_details .photos { width: 95vw;} #case .case_studies_details .infos.active .close { opacity: 1; transition-delay: 1000ms;} } @media (max-width:1000px) { #case .case_studies_details .slider .slick-slide img { height: 60vw;} } @media (max-width:700px) { #case .case_studies_details .infos .close { top: 0; right: 0; border-radius: 0; width: 46px; height: 46px;} #case .case_studies_details .infos .row .wrap { padding: 5vw 0;} #case .case_studies_details .infos .texte { width: 80vw; margin: 10px 0 10px 5vw;} #case .case_studies_details .infos .sous_titre { font-size: 14px; line-height: 24px; margin: -5px 0 10px 0;} #case .case_studies_details .infos .grid_custom img { border-radius: 5px; } } .qlik_partner { display: grid; grid-template-columns: 140px 1fr; gap: 60px;} @media (max-width:1000px) { .qlik_partner { grid-template-columns: 1fr; gap: 30px;} .qlik_partner img { max-width: 150px; margin: 0 auto;} }