@charset "utf-8";
/* CSS Document */

:root {
    --main-color-bleu: #0073ae;
    --main-color-turquoise: #6de2e2;
    
    --main-bloc-padding: 6vw;
    
    --main-side-margin: 12%;
}


* {margin: 0; padding: 0; border: 0;}

img {display: block;}

html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}

body {font-family: "Roboto", sans-serif; line-height: 1.3;}

#contenu {overflow: hidden;}
.home #contenu {overflow: visible;}

.div-inner {padding-left: var(--main-side-margin); padding-right: var(--main-side-margin);}

.cols {display: flex; gap: 6vw; padding-bottom: 4vw;}
.col {width: calc(50% - 3vw);}

.btn-carre, .gform_button {display: inline-block; text-decoration: none; padding: 20px 30px; font-size: 22px; border: 1px solid var(--main-color-bleu); color: var(--main-color-bleu); cursor: pointer; background-color: transparent;}
.btn-carre:hover, .gform_button:hover {background-color: var(--main-color-turquoise); color: var(--main-color-bleu) !important; border-color: var(--main-color-turquoise) !important;}

header {position: fixed; width: 100%; padding: 40px 0; z-index: 99;}
header .div-inner {display: flex; align-items: center;}
.header-scroll {background-color: rgba(255,255,255,0.8); backdrop-filter: blur(7px); padding: 20px 0;}
.header-scroll #header-logo img {width: 200px;}

#header-logo {width: 30%;}
#header-logo img {width: 70%; height: auto; align-items: center;}
#header-menu {width: 70%; display: flex;}



/* === Desktop Menu Styles === */
@media screen and (min-width: 1100px) {
    .menu-toggle {
        display: none;
    }
    
    #site-navigation {margin-left: auto;}
    #main-menu, #primary-menu {display: flex; list-style: none; margin-left: auto; align-items: center; border-right: 1px solid rgba(0,0,0,0.2); padding: 20px 0; margin-right: 1vw; padding-right: 1vw;}
    #main-menu li, #primary-menu li {margin-right: 2vw;}
    #main-menu li:last-child, #primary-menu li:last-child {margin-right: 0;}
    #main-menu a, #primary-menu a {text-decoration: none; font-size: 22px; color: #000; padding: 10px; letter-spacing: 0.1em;}
    #main-menu a:hover, #primary-menu a:hover {color: var(--main-color-bleu);}

}


/* === Mobile Menu Styles === */
@media screen and (max-width: 1099px) {

    #menumain {position: absolute; width: 50px; z-index: 2; cursor: pointer;}
    #menumain::before {content: "menu"; line-height: 1.1; text-transform: uppercase; top: 0; letter-spacing: 4px; transition: 0.5s; position: relative; z-index: 1; font-size: 14px; color: var(--main-color-bleu);}

    #menumain::after,
    #menumain #menu-graph {
      background-color: var(--main-color-bleu); z-index: 1; position: relative;
      content: "";
      display: block;
      height: 3px;
      margin: 10px 0;
      transition: 0.5s;
      border-radius: 3px;
    }

    .toggled #menumain::after {transform: translateY(-26px) rotate(135deg); background-color: var(--main-color-bleu) !important;}
    .toggled #menumain::before {opacity: 0; color: #000 !important;}
    .toggled #menumain #menu-graph {transform: translateY(-13px) rotate(-135deg); background-color: var(--main-color-bleu) !important;}

    .menu-toggle {text-indent: -9999px; line-height: 0; width: 60px; height: 60px; border: 0; background: none; position: absolute; z-index: 3; cursor: pointer;}
    .menu-toggle, #menumain {top: 20px; right: 30px; position: absolute;}

    .menu-principal-container, .menu-main-container {opacity: 0;  max-height: 0; height: 0; overflow: hidden; width: 100%; background-color: #fff; background-size: 100% auto; position: fixed; top: 0; right: 0; overflow-y: auto !important; box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);}
    .toggled .menu-principal-container, .toggled .menu-main-container {opacity: 1; overflow: hidden; max-height: 100vh; height: 100vh;}
    #primary-menu {padding: 130px 80px 0 80px; list-style: none;}
    #primary-menu li {margin-right: 0;}
    #primary-menu a {text-decoration: none; color: var(--main-color-bleu); font-size: 28px !important; padding: 5px 0 !important; font-weight: bold; text-align: right; display: block;}

    #menumain #menu-bg {position: absolute; content: ""; height: 170%; aspect-ratio: 1 / 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.4); border-radius: 50%; z-index: 0; opacity: 0;}
    #menumain.header-scroll #menu-bg {opacity: 1;}
    .toggled #menumain #menu-bg {opacity: 0;}
    
    #header-extras {position: absolute; top: 30px; right: 100px;}
   
}


#header-extras {display: flex; align-items: center;}
#header-social {display: flex; align-items: center;}
#header-social a {margin-right: 20px;}
#header-social img {width: 25px; height: auto;}
/* #header-social a:last-child {text-decoration: none; color: var(--main-color-bleu); border: 1px solid var(--main-color-bleu); display: inline-block; padding: 6px; font-weight: bold;}
#header-social a:last-child hover {background-color: var(--main-color-turquoise); border-color: var(--main-color-turquoise);} */
#header-langue {}
#header-langue a {color: var(--main-color-bleu); text-decoration: none; font-size: 18px; margin-left: 5px;}
#header-langue a:hover {color: var(--main-color-turquoise);}

#zone-top { padding-top: 25vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; position: relative;}
#zone-top .div-inner {}
#zone-top-contenu {width: 45%; position: relative; z-index: 1; padding-bottom:var(--main-bloc-padding);}
#zone-top h1, #zone-top h2 {color: var(--main-color-bleu);}
#zone-top h1 {font-weight: bold; font-size: 55px; text-transform: uppercase; margin-bottom: 40px;}
#zone-top h2 {font-weight: 300; font-size: 45px; padding-right: 20%; margin-bottom: 60px;}
#zone-top-contenu img {width: 30%; height: auto; display: block;}
#zone-top-bg { position: absolute; top: 10%; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}


.bandeau-bleu {position: relative; overflow: hidden; padding: var(--main-bloc-padding) 0;}
.bandeau-bleu::before, .bandeau-bleu::after {position: absolute; content: "";}
.bandeau-bleu::before {top: 0; left: 0; width: 100%; height: 10%; background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); z-index: 2; opacity: 0.3;}
.bandeau-bleu::after {z-index: 1; width: 100%; height: 100%; background-color: var(--main-color-bleu); top: 0; left: 0; opacity: 0.85;}
.bandeau-bleu .div-inner {position: relative; z-index: 3;}


#usimet-cta {background-size: cover; background-repeat: no-repeat; color: #fff;}
#usimet-cta .div-inner {display: flex; gap: 8vw;}
#cta-gauche, #cta-droit {width: calc(50% - 4vw);}
#cta-gauche {text-align: right;}
#cta-droit p {font-weight: 300;}
#cta-droit p:last-of-type {padding-bottom: 0;}
#cta-droit p strong {font-weight: bold;}
#usimet-cta .btn-carre { border: 1px solid #fff; color: #fff; margin-top: 40px;}
#usimet-cta h3 {color: var(--main-color-turquoise);}



footer { padding: var(--main-bloc-padding) 0; font-size: 24px;}
footer .div-inner {display: flex; align-items: center;}
footer a {color: var(--main-color-bleu); }
#footer-gauche, #footer-droit {width: 45%}
#footer-gauche p {color: var(--main-color-bleu); }
#footer-gauche p:first-child {margin-bottom: 30px;}
#footer-gauche p a:hover, #footer-droit ul a:hover {text-decoration: none; background-color: var(--main-color-turquoise); color: #fff; border-radius: 5px;}
#footer-mid {width: 10%;}
#footer-mid a {display: block;}
#footer-mid img {}
#footer-droit {text-align: right;}
#footer-droit ul {list-style: none;}
#footer-droit ul a {text-decoration: none;}
#footer-gauche {order: 1;}
#footer-mid {order: 2;}
#footer-droit {order: 3;}

h1, h2, h3 {line-height: 1.1; letter-spacing: 0.05em;}

h2 {font-size: 65px; font-weight: 300; text-transform: uppercase; margin-bottom: 50px;}
h3 {font-size: 40px; margin-bottom: 25px;}

#contenu p, #contenu ul {font-size: 24px; padding-bottom: 40px; font-weight: 300;}
#contenu ul { list-style: none;}
#contenu ul li {padding-left: 50px; position: relative; margin-bottom: 10px;}
#contenu ul li:last-child {margin-bottom: 0;}
#contenu ul li::after {content: ""; position: absolute; width: 20px; height: 13px; background: url("../images/icons/fleche.svg") no-repeat; background-size: cover; top: 8px; left: 13px;}
#contenu p a, #contenu ul a {color: var(--main-color-bleu); text-decoration:  underline;}
#contenu p a:hover, #contenu ul a:hover {background-color: var(--main-color-turquoise); text-decoration: none; border-radius: 5px; color: #fff;}


/****************** ACCUEIL ***********************/

.home #zone-top { height: 80vh;}
.home #zone-top h1 {}
.home #zone-top h2 {text-transform: none;}

#accueil-services, #apropos-atelier {background: url("../images/backgrounds/accueil-services.webp") center center no-repeat; background-size: cover; }
#accueil-services h2 {color: #fff;}

#slider-services {position: relative; z-index: 3; padding-left: var(--main-bloc-padding);}
.slider-services-element {width: 40%; text-decoration: none; border-right: 1px solid rgba(255,255,255,0.6);}
.slider-services-element-inner {padding: 3vw; padding-bottom: 0; text-align: center;}
.slider-services-element img {position: relative; left: 50%; transform: translateX(-50%); width: 50%; margin-bottom: 150px;}
.slider-services-element h3, .slider-services-element p { position: absolute; left: 50%; transform: translateX(-50%); width: 80%;}
.slider-services-element h3 {color: #fff; margin-bottom: 0; font-weight: normal; text-transform: uppercase; bottom: 0;}
.slider-services-element p {color: var(--main-color-turquoise); opacity: 0; visibility: hidden; padding-bottom: 0 !important; display: block; bottom: 10%; font-size: 26px !important;}

.slider-services-element:hover h3 {bottom: 30%; text-shadow: 0 0 10px rgba(0,0,0,0.5);}
.slider-services-element:hover img {opacity: 0.3;}
.slider-services-element:hover p {opacity: 1; visibility: visible;}

.flickity-button {color: var(--main-color-bleu) !important;}
#slider-services .flickity-prev-next-button {top: -80px;}
#slider-services .flickity-prev-next-button.previous {right: calc(12% + 60px); left: auto !important;}
#slider-services .flickity-prev-next-button.next {right: 12% !important;}


#accueil-secteurs {padding: var(--main-bloc-padding) 0; position: relative;}
#accueil-secteurs .div-inner { display: flex; gap: 6vw;}
#accueil-secteurs-gauche, #accueil-secteurs-droit {width: calc(50% - 3vw);}
#accueil-secteurs-gauche {
    position: relative; z-index: 1;
}

#accueil-secteurs-gauche-float{
    position: sticky;
    top: calc(50vh - var(--float-half-height));
}

#accueil-secteurs-gauche h2 {color: var(--main-color-bleu);}
#accueil-secteurs-gauche span, #apropos-equipe .bloc-texte-photo-texte h2 span {display: block; font-size: 50px;}
#accueil-secteurs-gauche p {font-size: 34px !important; font-weight: 300;}

.accueil-secteurs-droit-element {aspect-ratio: 5 / 2; overflow: hidden; position: relative; display: block; text-decoration: none; margin-bottom: 1.5vw;}
.accueil-secteurs-droit-element::after, .accueil-secteurs-droit-element::before {position: absolute; content: "";}
.accueil-secteurs-droit-element::before {background-color: var(--main-color-bleu); width: 100%; height: 100%; z-index: 2; opacity: 0;}
.accueil-secteurs-droit-element::after {  bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); z-index: 3; opacity: 0.7;}
.accueil-secteurs-droit-element-inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%; position: relative; z-index: 4;
}
.accueil-secteurs-droit-element h3{ color: #fff; margin-bottom: 0; white-space: nowrap;
    flex-shrink: 0;
    display:flex;
    align-items:center;
    gap:1.5vw;
    justify-content:flex-start;
    transition:all .6s ease;
}

.accueil-secteurs-droit-element h3::before,
.accueil-secteurs-droit-element h3::after{
    min-width:0;
}

.accueil-secteurs-droit-element h3::before{
    content:"";
    height:2px;
    width:0;
    background:var(--main-color-turquoise);
    transition:width .6s ease;
}

.accueil-secteurs-droit-element h3::after{
    content:"";
    height:2px;
    flex-grow:1;
    background:var(--main-color-turquoise);
    transition:flex-grow .6s ease;
}

.accueil-secteurs-droit-element img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}

.accueil-secteurs-droit-element:hover::before {opacity: 0.7;}
.accueil-secteurs-droit-element p{ color: var(--main-color-turquoise); padding: 0 1.5vw; text-align: right;
    max-height:0;
    opacity:0;
    transform:translateY(10px);
    transition:all .4s ease;
}
.accueil-secteurs-droit-element:hover h3{
    justify-content:flex-end;
}

.accueil-secteurs-droit-element:hover h3::after{
    flex-grow:0;
}

.accueil-secteurs-droit-element:hover h3::before{
    width:100%;
}

.accueil-secteurs-droit-element:hover p{
    max-height:100px; padding-top: 20px;
    opacity:1;
    transform:translateY(0);
}

#accueil-secteurs-bg {position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
#accueil-secteurs-bg img {width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.3; margin-top: -10vw;}

.home #cta-droit p, .secteurs #cta-droit p {font-size: 40px !important;}


/****************** À PROPOS ***********************/

.bloc-texte-photo {position: relative; z-index: 3; display: flex; gap: 6vw; align-items: center;}
.bloc-texte-photo-photo img {width: 50vw; height: auto;}
.bloc-texte-photo-texte h2 {position: relative;}
.bloc-texte-photo-texte h2::after {position: absolute; content: ""; top: 50%; width: 15vw; height: 2px; background-color: var(--main-color-turquoise);}

#apropos-atelier {}
#apropos-atelier .bloc-texte-photo-texte {color: #fff;}
#apropos-atelier .bloc-texte-photo-texte {padding-right: var(--main-side-margin);}
#apropos-atelier .bloc-texte-photo-texte h2::after { transform: translateX(calc(-100% - 40px)); left: 0; }

#apropos-equipe {padding: var(--main-bloc-padding) 0; position: relative;}
#apropos-equipe .bloc-texte-photo-texte {padding-left: var(--main-side-margin); z-index: 2;}
#apropos-equipe .bloc-texte-photo-texte h2 {color: var(--main-color-bleu);}
#apropos-equipe .bloc-texte-photo-texte h2::after {right: 0; transform: translateX(calc(100%));}


.apropos #usimet-cta {background-image: url("../images/cta/cta-apropos.webp");}



/****************** USIMET SLIDER *****************/

#titre-standard {padding-top: 10vw; margin-bottom: 2vw;}
#titre-standard h1 {font-size: 60px; font-weight: 300; text-transform: uppercase; width: 100%; position: relative; padding-left: var(--main-side-margin);}
#titre-standard h1 span {display: inline-block; background-color: #fff; position: relative; z-index: 1; padding: 0 40px; margin-left: -40px;}
#titre-standard h1::before {position: absolute; content: ""; height: 2px; width: 100vw; background-color: var(--main-color-turquoise); top: 50%; left: 0; z-index: 0;}

.slider-usimet {position: relative;}
.slider-usimet-element {width: 100%; display: flex; align-items: center; height: 75vh; min-height: 600px;}
.slider-usimet-contenu {padding-right: var(--main-side-margin); position: relative; z-index: 1;}
.slider-usimet-contenu p {padding-bottom: 0;}

.slider-usimet-image img {width: 100%; height: 100%; object-fit: cover; object-position: center center; position: relative; z-index: 1;}

.slider-usimet .flickity-prev-next-button {top: 80px;}
.slider-usimet .flickity-page-dots { bottom: 60px; width: auto;}
.slider-usimet .flickity-page-dots .dot {background-color: var(--main-color-turquoise);}

#section-secteurs {}
#section-secteurs .slider-usimet-image {position: absolute; width: 100%; height: 100%; z-index: 0;}
#section-secteurs .slider-usimet-contenu {padding-left: 70%;}
#section-secteurs .flickity-page-dots {left: 70%;}
#section-secteurs .flickity-prev-next-button.previous {left: 70%;}
#section-secteurs .flickity-prev-next-button.next {right: auto; left: calc(70% + 60px);}
#section-secteurs .slider-usimet-image::after {background: linear-gradient(to left, rgba(5, 40, 62, 1), rgba(5, 40, 62, 0)); position: absolute; content: ""; width: 100%; height: 100%; z-index: 2; top: 0; right: 0;}
#section-secteurs .slider-usimet-contenu p {color: #fff;}
#section-secteurs .slider-usimet-contenu h3 {color: var(--main-color-turquoise);}

#section-services {margin-bottom: var(--main-bloc-padding);}
#section-services .slider-usimet-image {width: 50%; height: 100%; position: relative;}
#section-services .section-services-image {position: absolute; top: 0; left: 0; right: auto;}
#section-services .slider-usimet-contenu {width: calc(45% - var(--main-side-margin)); padding-left: 5%;}
#section-services .slider-usimet-contenu h3 {color: var(--main-color-bleu);}
.slider-service-icon {background-color: var(--main-color-bleu); height: 40%; aspect-ratio: 1 / 1; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 0 30px rgba(0,0,0,0.5);}
.slider-service-icon img {width: 70%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#section-services .flickity-page-dots {left: 55%;}
#section-services .flickity-prev-next-button.previous {left: 55%;}
#section-services .flickity-prev-next-button.next {right: auto; left: calc(55% + 60px);}


.secteurs #usimet-cta {background-image: url("../images/cta/cta-accueil.webp");}
.services #usimet-cta {background-image: url("../images/secteurs/full/1-haute-technologie.webp");}



/* EMPLOI */

#contenu p.intro {color: var(--main-color-bleu); font-size: 30px; font-weight: normal;}
#carriere-images {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;            /* space between images */
  padding: 4vw 0;}
#carriere-images img {
  flex: 1 1 auto;   /* change here */
  width: 0;         /* key trick for equal distribution */
  height: auto;
  object-fit: contain;
}



/******************* JOINDRE ****************/

.joindre-adresse, .joindre-tel, .joindre-courriel {padding-left: 50px; position: relative;}
.joindre-adresse:after, .joindre-tel:after, .joindre-courriel:after {content: ""; position: absolute; height: 30px; width: 30px; font-size: 20px; top: 0; left: 0; background-size: contain; background-repeat: no-repeat;}
.joindre-adresse:after { background-image: url("../images/icons/pointer.svg");}
.joindre-tel:after { background-image: url("../images/icons/lettre.svg")}
.joindre-courriel:after { background-image: url("../images/icons/phone.svg")}

#map-joindre {display: block; width: 100%; height: 500px;}


.ginput_container_checkbox label, .ginput_container_radio label {margin-top: 5px;}
.ginput_container_text input, .ginput_container_phone input, .ginput_container_email input, .ginput_container_textarea textarea {background-color: #F4F4F4; padding: 15px !important; width: calc(100% - 30px) !important;}
.ginput_container_text input:focus, .ginput_container_phone input:focus, .ginput_container_email input:focus, .ginput_container_textarea textarea:focus {outline: 0; background-color: #e2fdfd;}
.ginput_container_textarea textarea {font-family: "Roboto", sans-serif;}



/***************** TRANSITIONS ******************/

/* rapide */

a, a *, a::before, a::after, header img, .slider-services-element img, .slider-services-element h3, .slider-services-element p, .menu-principal-container, button, button * {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}


/* lente */

header {
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}




/***************** FILTRES ******************/

/* filtre bleu */
#header-social a img, .joindre-adresse:after, .joindre-tel:after, .joindre-courriel:after, #carriere-images img {filter: brightness(0) saturate(100%) invert(24%) sepia(53%) saturate(3509%) hue-rotate(182deg) brightness(99%) contrast(101%);}

/* filtre turquoise */
#header-social a:hover img, .slider-services-element img, .slider-service-icon img, #contenu ul li::after {filter: brightness(0) saturate(100%) invert(85%) sepia(47%) saturate(450%) hue-rotate(120deg) brightness(94%) contrast(89%);}

/* filtre blanc */
.slider-services-element:hover img {filter: brightness(0) saturate(100%) invert(100%) sepia(48%) saturate(0%) hue-rotate(235deg) brightness(110%) contrast(100%);}