/***************
    RESET
**************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}


/**********/
/* FONT
**********/

@font-face {
    font-family: "NouvelR-Extrabold";
    src: url("../fonts/NouvelR-Extrabold.ttf") format("truetype"),
    	 url("../fonts/NouvelR-Extrabold.otf") format("openType"),
         url("../fonts/NouvelR-Extrabold.woff") format("woff"),
         url("../fonts/NouvelR-Extrabold.woff2") format("woff2");
}


@font-face {
	font-family: "NouvelR-Bold";
    src: url("../fonts/NouvelR-Bold.ttf") format("truetype"),
         url("../fonts/NouvelR-Bold.otf") format("openType"),
         url("../fonts/NouvelR-Bold.woff") format("woff"),
         url("../fonts/NouvelR-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "NouvelR-Light";
    src: url("../fonts/NouvelR-Light.ttf") format("truetype"),
         url("../fonts/NouvelR-Light.otf") format("openType"),
         url("../fonts/NouvelR-Light.woff") format("woff"),
         url("../fonts/NouvelR-Light.woff2") format("woff2");
}

@font-face {
    font-family: "NouvelR-Regular";
    src: url("../fonts/NouvelR-Regular.ttf") format("truetype"),
     	 url("../fonts/NouvelR-Regular.otf") format("openType"),
         url("../fonts/NouvelR-Regular.woff") format("woff"),
         url("../fonts/NouvelR-Regular.woff2") format("woff2");
}



/***********/
/*   GENERAL
/************/

:root{
    --background-body : #040404;
    --background-ligne: #2d2d2d;
    --color-primary:white;
    --color-link:#4d4d5a;
    --color-link-hover: #efdf00;

}
html{ scroll-behavior: smooth;}

body{
    margin:0;
    padding:0;
    background-color: var(--background-body);
    color: var( --color-primary);
    font-family: "NouvelR-Regular" , sans-serif;
    overflow-x: hidden;
}



a{text-decoration: none;color:var(--color-link)}
a .active{text-decoration: none;color:var(--color-link)}
ul{list-style: none;}




/******/

.ligne-full{
	width:1px;
	height:100%;
	position:fixed;
	left:20%;
	top:0;
  /*  background-color: var(--background-ligne);*/
    z-index: 0;
}


.ligne{
	width:1px;
	height:100%;
	position:fixed;
	right:20%;
	text-align:center;
	z-index:0;
  /*  background-color: var(--background-ligne);*/
}





/**********************/
/* BUTTON - Animation
***********************/

.btn-scroll{
    border: 2px solid white;
    color:var(--color-primary);
    height: 44px;
    background-color: transparent;
    font-size: 1.1875rem;
    line-height: 1.26315789;
    font-family: "NouvelR-Bold";
    text-transform: uppercase;
    padding: .4rem;
}

.scrollDown{
    position: absolute;
    left: 50%;
    bottom:250px;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
}


.scrollDown span{
    position: absolute;
    top:0;
    left:0;
    display: block;
    width:100%;
    height: 100%;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    animation: animate 900ms linear infinite;
    opacity: 0;
}

@keyframes animate{
    0%{top:-5px;left:-5px;opacity: 0;}
    25%{top:0px;left:0px;opacity: 1;}
    100%{top:5px;left:5px;opacity: 0;}  
}


.btn-goTo{
    height: 42px;
    border: 2px solid white;
    color: var(--color-primary); 
    text-transform: uppercase;
    font-family: "NouvelR-Bold";
    font-size: 1rem;
    padding: .5rem;
    background-color: transparent;
}

/**************/
/* Heading
***************/

.heading-home{color: var(--color-link-hover);text-align: center;font-size: 2rem;line-height: 2.2rem;margin-bottom:30px;text-transform: uppercase;}
.heading-home span{display: block;color: var(--color-primary);text-transform: uppercase;}

.heading-exp{color: var(--color-link-hover);text-align: center;font-size: 4rem;line-height: 4rem;margin-bottom:30px;text-transform: uppercase;font-family:'NouvelR-Bold';}
.heading-exp span{display: block;color: var(--color-primary);text-transform: uppercase;font-size: 3rem}

h2.date{text-transform:uppercase;font-size:1.875rem;text-align:center;line-height: 0.8;font-weight: normal;margin:10px 0;padding:0;}
.card-video-title{text-align: center;text-transform:uppercase;color : var(--color-primary);font-size:1.2rem;padding-top:5px;cursor: text;} /*font-size:2rem*/

/**************/
/* HEADER
***************/
header{
	display: flex;
	align-items: center;
	justify-content: space-between;
    height: 93px;  /*113px*/
    position: absolute; /*fixed*/
    top:0;
    z-index: 3;
    width:100%;
    background-color: var(--background-body);
    transition: .6s;
}

header.sticky{height: 50px;}

.navigtaion ul{display: flex;align-items: center;}
.navigtaion ul li{padding:0 20px;}
.navigtaion ul li a{font-family: "NouvelR-Bold";position: relative;padding-bottom: 5px;text-transform: uppercase;font-size: 1.1rem;line-height: 1;}
.navigtaion ul li a.active,.navigtaion ul li a:hover{color:var(--color-primary);transition: 500ms;}
.navigtaion ul li a::after{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    background-color: inherit;
    transition: 500ms;
    left:0;
}
.navigtaion ul li a.active::after,.navigtaion ul li a:hover::after{
    background-color: var(--color-link-hover);
    width: 100%;
    height: 2px;
}


.content-language{display:flex;justify-content:space-around;align-items:center;margin-left:15px;position: relative;}
.content-language a{text-transform: uppercase;color:var(--color-link);padding: 0 10px;transition: 500ms;}

.content-language a.active,.content-language a:hover{color:var(--color-link-hover);}

.dots{
    width: 6px;
    height: 6px;
    background-color: var(--color-link);
    border-radius: 100%; 
    transition: 500ms;
}
.dots.header-dots.dots-active{background-color:var(--color-link-hover);}



/**************/
/* FOOTER
***************/
footer{margin: 50px 0;}
.l-content-card{display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;margin:10px 0;}
footer .card{text-align: center;padding: 15px 0;}



/**************************************************************/
/*                          HOME
**************************************************************/

/**************/
/* SECTION 1
***************/
main{margin-top: 93px;} /*margin-top: 113px;*/
section{position: relative;z-index: 2;}

.section-talk{
    background-image: url("../images/bg-strategie.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width:100%;
    height: 788px;

}
.l-content-center{text-align: center;padding: 30px 0;}




/**************/
/* SECTION 2
***************/
.l-content-streaming{display: flex;flex-wrap: wrap;}
.section-streaming{padding-top:3%;}

/*A modifier si ifram**/
.video{width:85%} /*width:78%*/
.video img{width:100%}
.iframe-form{width:15%;padding:0 8px;} /*width:20%  padding:0 3px;*/
.iframe-form img{width: 100%;}
.iframe-form iframe{width:100%;height:400px;}
.iframeyoutube{width: 100%;height: 800px;}
/****/

/*language navigation**/
.languague-navigation{height: 62px;width: 100%;} /*height: 112px*/
.languague-navigation ul{display: flex;justify-content: flex-start;align-items: center;height: 100%;padding-left: 10px;}
.languague-navigation ul li{padding: 0 10px;}
.languague-navigation ul li a{text-transform: uppercase;transition: 500ms;position: relative;font-size: 1rem;line-height: 1.5rem;}
.languague-navigation ul li a:hover,.languague-navigation ul li a.active{color:var(--color-link-hover)}

.languague-navigation ul li a::after{
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--color-link);
    position: absolute;
    border-radius: 100%;
    top:50%;
    transform: translateY(-50%);
    margin-left: 8px;
}

.languague-navigation ul li a.active::after,.languague-navigation ul li a:hover::after{background-color:var(--color-link-hover)}
.link-info{color:var(--color-link);padding-left: 15px!important;font-size: 1rem;line-height: 1.5rem;}




.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 700ms;
  animation-duration: 700ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index:-1;
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;display:none;}
}
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;display:none;}
}


/**************************************************************/
/*                     EXPERIENCE
**************************************************************/
.section-follow-card-video,.section-video-start{margin: 100px 0 200px 0;}

.card-video{width:auto;height: auto;cursor: pointer;margin:0 10px;outline-style:none;}
.poster{
   /* height: 211px;width: 100%;*/
   
    width: 364px;
    height:204px;
    background-repeat: no-repeat;
    background-size: 364px;
  	
    filter: grayscale(1);
    cursor: pointer;
}
.poster:hover{filter: grayscale(0); transition: 500ms;}

.card-video.active .poster{filter: grayscale(0); transition: 500ms}

.etech{background-image: url('../images/1-E-TECH.png');}
.itw{background-image: url('../images/2-Pilotes.png');}
.arkana{background-image: url('../images/3-Arkana.png');}

.keymessage{background-image: url('../images/4-Key_Messages.png');}

.keymessage2{background-image: url('../images/5-Key_Messages2.png');}

.counter{cursor:text;}


.l-container-social{display: flex;justify-content: space-between;align-items: center;margin: 15px 0;}
.social{display: flex;/*justify-content: space-around;*/width: 60%}
.icone-reseau{width:50%;}

.l-container-social-video{display: flex;justify-content: center;align-items: center;margin-top:20px;}
.social-video{display: flex;justify-content: center;margin-right: 50px;}

.icone-like{width:16px;cursor:pointer;}
.like{display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;}
.like span{font-size: .7rem;padding-left: 5px;}

.section-video-start{text-align: center;padding: 0 5px;}

video{width:99%}

.is-inactive{display: none;}


.jssocials{margin: 0em 0.6em 0em 0;}

/**************************************************************/
/*                   RESPONSIVE
**************************************************************/


@media (min-width: 2000px){
    header{height: 120px;}
    main{width:1920px;margin-left:auto;margin-right:auto;}
     .navigtaion ul li a,.content-language a{font-size: 2rem;}
     .dots{width:10px;height: 10px;}
   /* .poster{height: 300px;}*/
    .social{width:auto}
    .section-talk{height: 100vh;padding-top: 3%;}
    h2.date{font-size: 5rem;margin:50px}
    .logo{width: 10%;}
    .logo-color{width:50%;}
    .btn-scroll{font-size: 4rem;padding: .5rem;border: 3px solid white;}
    .scrollDown{bottom: 100px;width:100px;height: 100px;} /*bottom: 600px*/
    .l-content-center{margin:15px 0;}
     .section-streaming{padding-top:5%;}

}




@media (min-width: 1900px){
    .section-streaming{padding-top:10px;}  /*padding-top:30px;*/
}

@media screen and (min-width: 1281px) and (max-width: 1500px) {
   /* .poster{height: 150px;} */ /*padding-top:30px;*/
    .iframeyoutube{width: 100%;height: 500px;}
}

@media screen and (min-width: 1131px) and (max-width:  1280px) {
  /*  .poster{height: 150px;} */ /*padding-top:30px;*/
    .iframeyoutube{width: 100%;height: 500px;}
}

@media screen and (min-width: 1062px) and (max-width:  1130px) {
   /* .poster{height: 150px;} */ /*padding-top:30px;*/
    .iframeyoutube{width: 100%;height: 500px;}
}

@media screen and (min-width: 900px) and (max-width:  1061px) {
	 /*A modifier si ifram**/
    .video{width:100%}
    .video img{width:100%}
    .iframe-form{width:100%;padding:0 5px;}
    .iframe-form img{width: 100%;}
    /****/ 
    
   /* .poster{height: 150px;}*/  /*padding-top:30px;*/
    .iframeyoutube{width: 100%;height: 500px;}
}

@media screen and (min-width: 763px) and (max-width:  899px) {
	 /*A modifier si ifram**/
    .video{width:100%}
    .video img{width:100%}
    .iframe-form{width:100%;padding:0 5px;}
    .iframe-form img{width: 100%;}
    /****/
    
  /*  .poster{height: 150px;} */ /*padding-top:30px;*/
    .iframeyoutube{width: 100%;height: 500px;}
}

@media screen and (min-width: 415px) and (max-width:  762px) {
	 /*A modifier si ifram**/
    .video{width:100%}
    .video img{width:100%}
    .iframe-form{width:100%;padding:0 5px;}
    .iframe-form img{width: 100%;}
    /****/
    
    .iframeyoutube{width: 100%;height: 500px;}
}

/**iphone 8 ,samsung s8**/
@media (max-width: 414px) {
    /*************
        HEADER
    ************/
    .navigtaion ul li a{font-size: .8rem;} /*.9rem*/
    .logo-color{width:80%;}
    .btn-scroll{font-size: 1rem;line-height: 1rem;}

   /*************
    HOME
    ************/
    
    /*A modifier si ifram**/
    .video{width:100%}
    .video img{width:100%}
    .iframe-form{width:100%;padding:0 5px;}
    .iframe-form img{width: 100%;}
    /****/

 
    .link-info{font-size: 1rem;line-height: .9rem;}
    .l-content-card{margin: 50px 0;}
    .heading-home{font-size: 1.5rem;line-height: 2rem;margin: 30px 0;}


    /*************
    EXPERIENCE
    ************/
    .heading-exp{margin: 50px 0;}
    .heading-exp {font-size: 3.9rem;}
    .heading-exp span {font-size: 2.8rem;}
    .section-video-start {padding: 0;}


    main {margin-top: 130px;}
    
    .iframeyoutube{width: 100%;height: 300px;}
    .iframe-form iframe{width:100%;height:300px;}



}


/**iphone  < 8 , samsung < s8**/
@media (max-width: 375px) {
      /*************
        HEADER
    ************/
    .navigtaion ul li a ,.content-language a{font-size: .6rem;}/*.7rem*/;
    .link-info{font-size: .8rem;line-height: .7rem;}
    .logo-color{width:70%;}
    .logo{width:15%;}
    .scrollDown{bottom:300px;}
    
    /*************
        HOME
    ************/
    .heading-home{font-size: 1.3rem;line-height: 2.5rem;}
    .iframe-form{width:100%;padding:0 5px;}


    /*************
        EXPERIENCE
    ************/
    main {margin-top: 113px;}
    .heading-exp {font-size: 3rem;line-height: 4rem;}
    .heading-exp span {font-size: 2rem;}
    .section-follow-card-video{margin: 20px 0 200px 0;}
    
    .iframeyoutube{width: 100%;height: 300px;}
    .iframe-form iframe{width:100%;height:300px;}

   
}



/**iphone 5**/
@media (max-width: 320px) {
      /*************
        HEADER
    ************/
    .navigtaion ul li a ,.content-language a{font-size: .5rem;}
    .link-info{font-size: .6rem;line-height: .7rem;}
    .languague-navigation ul li a {font-size: .8rem;}
    .scrollDown{bottom:350px;}
    header{height: 80px;}

      /*************
        HOME
    ************/
    main{margin-top: 80px}
    .iframe-form{width:100%;padding:0 5px;}

    /*************
        EXPERIENCE
    ************/
    .main-exp{margin-top: 100px;}
    .heading-exp {font-size: 2.5rem;line-height: 3rem;margin:0;}
    .heading-exp span {font-size: 1.8rem;}
    .section-follow-card-video{margin: 20px 0 200px 0;}
    video {width: 100%;}
    
    .iframeyoutube{width: 100%;height: 300px;}
    .iframe-form iframe{width:100%;height:300px;}


}