@font-face{font-family:'FontAwesome';src:url('/src/applications/news/css/police/fontawesome-webfont.eot?v=4.4.0');src:url('/src/applications/news/css/police/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('/src/applications/news/css/police/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('/src/applications/news/css/police/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('/src/applications/news/css/police/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('/src/applications/news/css/police/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;font-display:block}

:root {
    --light-color: #08629C;
    --dark-color: #20496a;
    --max-width: 1136px;
}
*{margin:0;padding:0;border:0;outline:0;font-family: 'Open Sans', sans-serif;}
body {color:#000;background-color:#fff;font-size:20px;line-height:30px}
h1{font-size:1.77em}
h2{line-height:40px;font-size:28px;padding:21px 0 35px}
a{color:#004d81;text-decoration:none}
a:hover{text-decoration:underline}
ul,li{list-style-type:none;display: inline;}
p{margin: 0 0 21px;}
.container{max-width:var(--max-width);margin:auto;position:relative}

header{position:fixed;left: 14px;right:14px;top: 14px;z-index:101}
header .logo{display: block;height:50px}
.page--contact header{position:relative}
.header-blur {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
/*-webkit-transition: -webkit-transform.2s,background-color.4s;
-moz-transition: -moz-transform.2s,background-color.4s;
-o-transition: -o-transform.2s,background-color.4s;
transition: -webkit-transform.2s,background-color.4s;
transition: -moz-transform.2s,background-color.4s;
transition: -o-transform.2s,background-color.4s;
transition: transform.2s,background-color.4s;
-webkit-transition-delay: .1s;-moz-transition-delay: .1s;-o-transition-delay: .1s;transition-delay: .1s;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);*/
    border: 1px solid hsla(0,0%,100%,.6);
    border-radius: 8px;
    background-color: hsla(0,0%,100%,.6);
    backdrop-filter: blur(7px);}
header .container{padding: 21px 0}

nav{position:absolute;bottom:33px;right:0}
nav ul li a{padding:5px 10px;font-size:16px;color:#000;margin-right:7px;font-weight:700}
nav ul li a:hover{background-color:var(--dark-color);text-decoration:none;color:#fff;border-radius:2px;-webkit-transition-property:background-color;-webkit-transition-duration:.30s;-moz-transition-property:background-color;-moz-transition-duration:.30s;transition-property:background-color;transition-duration:.30s}

#tophome{    background: url(https://www.infodustrie.com/images/infodustrie-fond.jpg);
    background-position: center;
    z-index: 1;/*background: #08629c;
    background: -moz-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0,var(--dark-color)),color-stop(100%,var(--light-color)));
    background: -webkit-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -o-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -ms-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: linear-gradient(135deg,var(--dark-color) 0,var(--light-color) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--dark-color)',endColorstr='var(--light-color)',GradientType=1);
   */ color: #fff;text-align:center;padding-top:250px;position: relative;height:400px}
/*#tophome .container div{color:#F5F5F5;background: rgba(255,255,255,0.1);padding: 21px;line-height: 25px;border-radius:8px}*/
#tophome .container h1{padding: 14px 0 28px}
#tophome .container p{font-weight: 300;line-height:41px;font-size:1.3em}
.page--activite #tophome{height:150px;background-size: cover;}
.nautisme #tophome{background-image: url(https://www.infodustrie.com/images/fond-nautisme.jpg)}
.peche #tophome{background-image: url(https://www.infodustrie.com/images/fond-peche.jpg)}
.industries-graphiques #tophome{background-image: url(https://www.infodustrie.com/images/fond-industries-graphiques.jpg)}
.page--emploi #tophome{background-image: url(https://www.infodustrie.com/images/fond-emploi.jpg);background-position: 0px 0;}
.page--activite h1{    position: relative;
    background: #fff;
    width: 200px;
    margin: -50px auto -60px;
    padding: 40px 40px 45px;
    display: block;
    z-index: 101;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    align-items: center;}
/*#tophome .container div{color:#F5F5F5;background: rgba(255,255,255,0.1);padding: 21px;line-height: 25px;border-radius:8px}*/

.actu{text-align: center}
.actu h2{padding: 21px 0 0;}
.actu--content{padding:28px;margin:0 auto;max-width:var(--max-width)}
.actu--content h3{color:var(--dark-color);font-size: 30px;margin:0 0 50px 0;}
.actu--content p{font-weight:300;line-height: 41px;margin:0;font-size:.8em}
.actu--content:nth-child(odd) {background:#f5f5f5}
.actu--site{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 35px;margin:0 auto;max-width:var(--max-width);}
.page--activite .actu--site,.page--emploi .actu{margin:100px auto 0}
.actu--site a.site{padding:14px;border-radius:8px;background:#FFF;display:block}
.actu--site a.site:hover,.actu--content:nth-child(odd) .actu--site a.site:hover{ box-shadow: 0 0 15px rgb(0 0 0 / 20%);text-decoration:none;color:#fff;
    background: #08629c;
    background: -moz-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0,var(--dark-color)),color-stop(100%,var(--light-color)));
    background: -webkit-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -o-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: -ms-linear-gradient(-45deg,var(--dark-color) 0,var(--light-color) 100%);
    background: linear-gradient(135deg,var(--dark-color) 0,var(--light-color) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--dark-color)',endColorstr='var(--light-color)',GradientType=1);
}
.actu--content:nth-child(odd) .actu--site a.site{background:#F5f5f5}

a.site{position:relative;z-index: 1}
a.site strong{display: block;font-size:1.3em;color:#000;text-align:left;font-weight:400;padding:0 0 21px}
a.site .overlay{position:absolute;top:51px;border-radius:8px;left:0;right:0;bottom:8px;z-index:2;background-color:#000;opacity:0;transition:opacity .3s ease-in-out;}
a.site:hover .overlay{opacity:.4;transition:opacity .3s ease-in-out}
a.site img{width:100%;border-radius:8px;box-shadow:0 0 20px #c2c1c1}
a.site:hover{text-decoration:none}
a.site .brands,a.site .discover{position:absolute;display:block;z-index:2;opacity:0}
a.site .brands{top:20%;left:0;right:0}
a.site .brands .com{font-weight:300;font-size:.5em}
a.site:hover .brands{color:#fff;font-weight:700;font-size: 1.6em;text-shadow:0 0 3px #666;opacity:1;transition: opacity .3s ease-in-out}

a.site .discover{bottom:10%;left:25%;right:25%}
a.site:hover .discover{color:#fff;padding:7px 14px;background-color:var(--light-color);border-radius:5px;opacity: 1;transition: opacity .3s ease-in-out;}
.actu--site a.site p{color:#000}
.actu--site a.site:hover p{color:#fff}

.actu--univers{display: grid;grid-template-columns:repeat(1, 1fr);gap:100px 0;margin: 50px auto 0}
#chiffre,.contact{background-color: #f5f5f5;padding: 28px 0}
.chiffre{font-weight:300;display: grid;grid-template-columns:repeat(1, 1fr);gap: 35px 0;margin:0 auto;}
.chiffre p{color: #849198;text-align: center;box-shadow:0 0 50px #0a1d3929;border-radius: 8px;padding: 21px;}
.chiffre p span {color:var(--dark-color);font-weight:400;padding:28px 0 14px;display:block;text-align:center;align-items:center;vertical-align:middle;margin:0 auto 21px;font-size:37px}
.chiffre p strong {color:var(--dark-color);font-weight:400;display: block}
.support span:hover div {font-size:14px;display:block;text-align:center;position:absolute;bottom:0;width:160px;color:#fff;padding:10px;background:rgba(0,0,0,0.7);text-decoration:none}

#offre{color: rgba(255,255,255,.7);padding:14px 0 50px;margin:0 0 30px;background: url(/images/wave--bot.png) 0 100%;background-color:var(--dark-color);background-repeat: no-repeat !important;transform-origin: center bottom;background-size: 100% 50px}
#offre h3{margin:0 0 42px}
#offre p{font-weight:300}
.expertises{display: grid;grid-template-columns: repeat(1, 1fr);gap:35px 0}
#offre h2,#offre h3,.expertises .fa,.expertises p span{color: #fff;}
.expertises p{text-align: center;padding:21px;margin:0; border-bottom:1px solid rgba(255,255,255,.4)}
.expertises .fa{  margin-bottom: 14px; display: block; font-size: 77px}
.expertises .fa:before{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.expertises .fa-data:before{content:"\f2be"}
.expertises .fa-marque:before{content:"\f2be"}
.expertises .fa-reseau:before{content:"\f2be"}
.expertises .fa-influence:before{content:"\f2be"}
.expertises .fa-performance:before{content:"\f2be"}
.expertises .fa-creation:before{content:"\f2be"}
.expertises .fa-transparence:before{content:"\f2be"}
.expertises p span{display: block;font-weight: 400;padding: 14px 0; font-size: 1.5em;}

#rejoindre{background:var(--dark-color);color:#fff}
#rejoindre .container div{display: grid;grid-template-columns: 1fr 1fr;gap: 35px;}
#rejoindre .container div p{margin:0}
#rejoindre a{background: #fff;border-radius: 20px;color:var(--dark-color);padding:7px 21px;    width: fit-content;}
#rejoindre,.contact{padding: 0 0 42px}
.offre--content{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 35px;}
.offre--content div{font-size:20px;position:relative;color:#fff;height:315px;text-align:center;background:rgba(250,250,250,.2);border-radius:18px;padding:10px}
.offre--content div span{display:block;font-size:16px;margin: 14px 0 0;}

.stats--content {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 35px;}
.stats--content div{color:#3D8EB9;font-size:30px}
.stats--content div span{display:block;font-weight:300;font-size:12px;color:#999;padding:5px 0 0}
.stats--content div:before{content:"";background-color:var(--light-color);display: inline-block;background-repeat:no-repeat;border:50px solid transparent;border-radius:50px;background-size:65px;margin-left: -113px;margin-top: -33px;position:absolute;background-position:-33px -32px}

/* */


.log{background:url('/images/home.jpg') no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}

nav a.connexion{background:#000;padding:10px 20px;color:#fff;font-size:16px;-webkit-box-shadow: inset 0 1px 0 #2e2f31;-moz-box-shadow: inset 0 1px 0 #2e2f31;-o-box-shadow: inset 0 1px 0 #2e2f31;box-shadow: inset 0 1px 0 #2e2f31;-webkit-box-shadow: 0 1px 0 #58595b;-moz-box-shadow: 0 1px 0 #58595b;-o-box-shadow: 0 1px 0 #58595b;box-shadow: 0 1px 0 #58595b;margin-top:2px;border-radius:2px}
nav a.connexion:hover{background:rgba(14,83,151,1);color:#f5f5f5;-webkit-transition-property:background-color;-webkit-transition-duration:.30s;-moz-transition-property:background-color;-moz-transition-duration:.30s;transition-property:background-color;transition-duration:.30s}


.formcontact h2{margin:0 0 0 20px;background:url('/images/mail.png') no-repeat 0 26px;background-size:50px;padding:30px 0 20px 65px}
.source{font-size:10px;color:#999;margin-left:70px}

a.url{font-size:18px;margin:0 20px 20px;background: url('images/link.png') no-repeat;padding:0 0 0 27px;background-size:19px;display:block}


form{text-align:center}

.formcontact form{width:535px;margin:20px 0 0 62px;display:inline-block}
.formcontact .adresse{display:inline-block;vertical-align:top;margin-left:50px}
.formcontact .adresse img{width:250px}
.formcontact .adresse .icon{margin-left:22px;background-size:30px;width:165px;background-repeat:no-repeat;font-size:16px;padding:0 0 10px 40px;border-bottom:1px solid #dadada;margin-bottom:10px}
.formcontact .adresse .location{background-image:url(/images/location.png);background-position:0 5px}
.formcontact .adresse .tel{background-image:url(/images/telephone.png);background-position:2px -3px}
.formcontact input[type=text]{width:191px;display:inline-block;margin:5px}
.formcontact textarea{width:414px}
.formcontact input[type=submit]{width:434px;margin:6px 0 0}
input[type=text],input[type=password],textarea{font-size:13px;border:1px solid #dadada;width:450px;display:block;padding:10px;margin:15px auto;border-radius:3px}
input[type=submit]{background:#3D8EB9;width:470px;font-size:21px;border-radius:3px;color:#fff;padding:20px;cursor:pointer;margin:15px 0 0}
input[type=submit]:hover {background:#053566}
.connexion-compte {text-align:center;margin:100px auto;width:600px;padding:20px 0 40px;border-radius:3px;box-shadow:0 0 10px #777;background:rgba(250,250,250,0.8)}
.connexion-compte input[type=text],.connexion-compte input[type=password]{margin:5px auto 10px;font-size: 15px}
.gfw-form-label-col{vertical-align:top;text-align:right}
.contact{padding-top:20px;font-size:16px;font-weight:700}
.merci {text-align:center;margin:100px auto;width:600px;padding:20px 0 40px;border-radius:3px;box-shadow:0 0 10px #777;background:rgba(250,250,250,0.8)}
.merci h1{font-size:30px;margin-bottom:22px;color:#555}
.merci p{padding:0}


footer{text-align:center;background:var(--dark-color);padding:15px 0;font-size:15px;color:#FFF}
footer span{display:block;font-size:12px}





.waveWrapper {
    position: absolute;
    left: 0;
    right: 0;
height:650px;
    top:0;
    margin: auto;
    overflow: hidden;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    height: calc(100% - 0vh);
    top: 0;
    overflow: hidden;
    /*background-image: linear-gradient(to top, var(--light-color) 20%, var(--dark-color) 80%);*/
}
.top {
    opacity: 0.5;
    z-index: 15;
}
.mid {
    opacity: 0.75;
    z-index: 10;
}
.bottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat !important;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveTop {
    background-size: 50% 100px;
    animation: wave 20s;
    animation-delay: 5s;
}
@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.50);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}
.waveMid {
    background-size: 50% 120px;
    animation: wave 40s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
    animation: wave 30s linear infinite;
}





@media screen and (min-width:520px) {
    .actu--univers,.chiffre{grid-template-columns:repeat(2, 1fr);gap:35px}

    .expertises{grid-template-columns:repeat(2, 1fr)}
    .expertises p {border-bottom: 0}
    .expertises p:nth-child(even) {border-left: 1px solid rgba(255,255,255,.4)}
}



@media screen and (min-width:1024px) {
    .actu--univers,.chiffre{grid-template-columns:repeat(4, 1fr)}
    a.site strong{font-size:1em}
}