.banner { position: relative; padding-top: 155px; grid-gap: 0;} .banner .photo { margin-left: -280px; box-shadow: 0px 25px 50px 0px rgba(0, 157, 256, 0.25)} .banner .texte .row { position: relative; z-index: 1;} .banner .texte { background-color: rgba(0, 157, 255, 0.9); padding: 60px 70px 60px 55px; z-index: 100; overflow: hidden; color: #fff; margin-right: 80px; box-shadow: 0px 25px 50px 0px rgba(0, 157, 256, 0.25);} .banner video { display: block; width: 100%; height: 100%; object-fit: cover;} .banner .texte:before { content: ""; width: 100%; height: 100%; top: 0; left: 0;background: linear-gradient(90deg, rgba(7,115,183,0.5) 0%, rgba(12,13,82,0.5) 52%);opacity: 0.75; z-index: 1; position: absolute;} .banner .titre_main { font-size: 40px; line-height: 48px; } @media (min-width:1201px) { .banner video { min-height: 645px;} } @media (max-width:1535px) { .banner .texte { margin-right: -50px;} } @media (max-width:1300px) { .banner .texte { padding: 40px 50px;} } @media (max-width:1200px) { .banner { padding-top: 80px; margin: 0 -5vw 25px -5vw;} .banner .texte { padding: 60px 5vw; min-height: inherit; margin: 0;} .banner .titre_main { font-size: 32px; line-height: 40px;} .banner .photo { margin: 0; height: 100%;} .banner .photo img { display: block; height: 100%; object-fit: cover; } } @media (max-width:1000px) { .banner .photo img { height: auto; max-height: 450px; object-position: 50%;} .banner .texte { padding: 40px 5vw 50px;} .banner .texte p { max-width: none;} .banner .texte p br { display: block;} } @media (max-width:700px) { .banner { margin: 0 -7vw;} .banner .texte { padding: 30px 7vw 40px 7vw; box-shadow: none; text-align: center;} .banner .texte .titre_main { font-size: 24px; line-height: 30px; margin: 0;} .banner .texte p { display: none;} } .link_phone { background: url(../images/mobile.svg) no-repeat left 30px top 25px #0c1a60; padding: 20px 40px 35px 90px; color: #fff; display: inline-block; font: 400 12px/20px "poppins"; letter-spacing: 0.3px; margin-top: 5px;} .link_phone strong { display: block; font: 500 20px/40px "poppins"; letter-spacing: 0;} @media (min-width:1201px) { .link_phone:hover { background-color: #009cff;} } @media (max-width:700px) { .link_phone { text-align: left; margin-top: 20px; padding: 15px 30px 15px 60px; background-size: 20px; background-position: top 20px left 20px;} .link_phone strong { font-size: 16px; line-height: 26px; } } /* nouveaute */ .nouveaute { margin: 50px 0 110px;} .nouveaute .titre { display: inline-block; padding: 10px 20px; background: linear-gradient(90deg, rgba(34,154,228,1) 0%, rgba(36,115,190,1) 40%); color: #fff; font-family: "Fake Serif"; font-size: 25px; letter-spacing: 1.6px;} .nouveaute .link { display: block; background-color: #0b0d53; text-transform: none; font-weight: 400; padding: 25px 100px 25px 30px; line-height: 25px; height: auto;} .nouveaute .link:before { content:""; position: absolute;background: url(../images/link_blue.svg) no-repeat center right 40px; width: 100%; height: 100%; left: 0; top: 0;} @media (min-width:1200px) { .nouveaute .link:hover:before { background-image: url(../images/link.svg) ;} .nouveaute .link:hover { background-color: #009cff ;} } @media (max-width:1000px) { .nouveaute { margin: 50px 0;} .nouveaute .link { padding: 14px 70px 14px 25px ; } .nouveaute .link:before { background-position: center right 25px; } } @media (max-width:600px) { .nouveaute { margin: 40px 0;} } .arrownav_next { width: 50px; height: 50px; background: url(../images/arrow_next.svg) no-repeat center; cursor: pointer; position: absolute; right: 0; bottom: 30px;} .arrownav_prev { width: 50px; height: 50px; background: url(../images/arrow_prev.svg) no-repeat center; cursor: pointer; position: absolute; right: 50px; bottom: 30px;} @media (max-width:700px) { .arrownav_next, .arrownav_prev { display: none;} } .types { width: 1800px; margin: -60px -60px -60px -20px; margin-right: 0; padding: 60px 0 60px 20px;} .types .item { background-color: #fff;box-shadow: 0px 0px 50px 0px rgba(0, 156, 255, 0.15); padding: 60px 50px 45px; width: 380px;} .types .item .icone { height: 80px; display: grid; align-items: end; margin-bottom: 10px;} .types_content { padding-right: 175px; margin-bottom: 25px;} @media (max-width:1200px) { .types { width: 100vw;} } @media (max-width:1000px) { .types .item { padding: 30px 30px 15px;} .types { margin-bottom: 60px;} } @media (max-width:700px) { .types { width: 100%; margin:0 0 40px; padding: 0; overflow: visible;} .types .swiper-wrapper { display: grid; gap: 10px;} .types .item { margin: 0; box-shadow: 0px 0px 50px 0px rgba(0, 156, 255, 0.15); display: grid; grid-template-columns: 50px 1fr; gap:0 25px; align-items: center; padding: 5px 70px 5px 5vw; width: auto;} .types .item p { display: none;} .types_content { padding: 0;} .types .item .icone { max-height: 50px; position: relative; margin: 5px 0; align-items: center;} .types .item .icone img { display: block; object-fit: scale-down; height: 100%; width: 100%; max-height: 42px; max-width: 50px; } } .plus { display: block; width: 100%; height: 50px; background: url(../images/link_blue.svg) no-repeat center left; margin-top: 5px;} @media (min-width:1201px) { .plus:hover { background-position: center left 20px;} } @media (max-width:700px) { .plus { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; background-position: center right 30px; } } /* Produits */ .produit { margin: 100px 0; position: relative; } .produit_two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; } .produit_two .item { position: relative; background-color: rgba(0, 157, 255, 0.9); color: #fff; padding: 60px 50px; box-shadow: 0px 25px 50px 0px rgba(0, 157, 256, 0.25)} .produit_two .item:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(7,115,183,0.5) 0%, rgba(12,13,82,0.5) 52%);opacity: 0.75; z-index: 1; position: absolute;} .produit_two .item .content { position: relative; z-index: 10;} .produit_two .titre_image { display: grid; grid-template-columns: min-content auto; gap: 30px; align-items: center; margin-bottom: 20px;} .produit_two .icone img { display: block; } .produit_two .stitre { color: #fff;} @media (min-width:1200px) { .produit_two .item:hover .link_arrow { left: 20px;} } @media (max-width:1000px) { .produit { margin: 60px 0;} .produit_two { margin-top: 30px;} .produit_two .item { padding: 30px;} } @media (max-width:700px) { .produit { margin:40px 0} .produit_two { grid-template-columns: 1fr; gap: 10px;} .produit p { display: none;} } @media (max-width:700px) { .produit_two .titre_image { grid-template-columns: 40px 1fr; gap: 25px; margin-bottom: 0;} .produit_two .titre_image .icone { display: block; object-fit: scale-down; height: 100%; width: 100%; max-height: 42px; max-width: 50px; } .produit_two .titre_image img { display: block; object-fit: scale-down; height: 100%; width: 100%; max-height: 42px; max-width: 50px; } .produit_two .item { padding: 0;} .link_arrow { margin-top: 15px;} .produit_two { margin-top: 20px;} .produit_two .item p { display: none;} .produit_two .icone { margin: 5px 0;} .link_arrow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin:0; background-position: center right 30px; background-image: url(../images/link_white_m.svg);} .produit_two .item .content { padding: 5px 60px 5px 30px;} } @media (max-width:500px) { .produit_two .item .content { padding: 5px 25px;} } .link_arrow { width: 100%; height: 20px; display: block; background: url(../images/link_white.svg) no-repeat center left; margin-top: 25px; position: relative; left: 0; transition: all ease-in-out 400ms; } @media (max-width:700px) { .link_arrow { margin-top: 15px; position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin:0; background-position: center right 30px; background-image: url(../images/link_white_m.svg);} } /* LeftSmall */ @media (min-width:1000px) { .gridleft_small { grid-template-columns: 400px 1fr; margin: 100px 0;} } /* Localisation */ .local { position: relative; padding: 70px 70px 50px; margin: 145px 0 130px; background-color: rgba(0, 157, 255, 0.8); color: #fff; box-shadow: 0px 25px 50px 0px rgba(0, 157, 256, 0.25);} .local::after { content: ""; width: 100%; height: 100%; top: 0; left: 0;background: linear-gradient(90deg, rgba(7,115,183,0.5) 0%, rgba(12,13,82,0.5) 52%);opacity: 0.75; z-index: 1; position: absolute;} .local .content { position: relative; grid-template-columns: 1fr auto; display: grid; z-index: 10; } .local .points { padding-right: 55px;} .local .points .link { margin-top: 20px;} .local .link { background-color: #fff; color: #009cff; margin-top: 30px; display: inline-block;} @media (min-width:1201px) { .local .link:hover { background-color: #0b0d53; color: #fff;} } @media (max-width:1200px) { .local { padding: 50px;} .local .points { padding-right: 40px;} } @media (max-width:1000px) { .local { margin: 50px 0; padding: 40px 40px 50px;} .local .content { grid-template-columns: 1fr; gap: 30px;} .local .points { padding-right: 0;} .local::before { display: none;} } @media (max-width:700px) { .local { margin: 50px -7vw 0; padding: 40px 7vw 50px;} .local .link { background: url(../images/link_blue.svg) right 30px center no-repeat #fff; width: 100%;} } .localisation { color: #fff; background: url(../images/localisation.svg) no-repeat left center; padding-left:50px; display: block; line-height: 50px; margin-bottom: 15px;} @media (max-width:700px) { .localisation { background-size: 15px; padding-left: 30px; line-height: 30px; margin-bottom: 10px;} } .partenaire { position: relative; center; padding-left: 80px;} .partenaire .part_content { display: grid; grid-template-columns: 1fr; gap: 0; } .partenaire .part { display: grid; background-color: #fff; align-items: center; justify-content: center; } .partenaire .part img { display: block; width: 100%; object-fit: cover;} .partenaire::before { content: ""; position: absolute; width: 2px; height: 100px; background-color: #daf2fc; top: 50%; left: 0; transform: translateX(-50%) translateY(-50%); z-index: 10;} @media (max-width:1200px) { .partenaire { padding-left: 50px;} } @media (max-width:1000px) { .partenaire { padding-left: 0; text-align: left;} .partenaire::before { display: none;} } @media (max-width:700px) { .partenaire .part_content { gap: 10px;} } .propos .ul_list li { color: #009cff; font-size: 15px;}