@charset "UTF-8";

/* VARIABLES */
:root {
    
    --colorLight: rgba(255, 255, 255, 1);
    --colorLightMedium: rgba(255, 255, 255, 0.9);
    --colorLightExtra: rgba(255, 255, 255, 0.3);
    --colorDark: rgba(0, 0, 0, 1);
    --colorDarkLight: rgba(0, 0, 0, 0.4);

	/* --couleurPrimaire: #f3b63a; pour l'utiliser -> var(--couleurPrimaire); */
}





/* POLICES */
@font-face{
	font-family: 'nom_que_on_veut_donner_police';
	src: url('../fonts/police.ttf') format('truetype'),
	     url('../fonts/police.eot') format('eot'),
	     url('../fonts/police.svg') format('svg');/* ça doit être le même nom de police avec des extensions différentes */
}

/* EMPECHERA LES CONTENEURS DE PRENDRE EN CONSIDÉRATION LES MARGES DANS LEUR DIMENSION */
* {
	box-sizing: border-box;
}

/* BALISSES */

html {

    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  
	min-height: 100%;
}

body {
    
    margin:0;
    background-color: black;
}

header video {
    
    display:block;
}

header span {
    
    color: var(--colorLight); 
    font-size:3em; 
    font-weight:400;
}

header p {
    
    color: var(--colorLightMedium); 
    font-size: 1.1em; 
    margin-top: 25px
}

nav {
    
    width:250px;
    
    position: fixed;
    right: 75px;
    top: 35%;
    
    text-align: center;
}

nav li {
    
    padding-top: 20px;
    
    list-style-type: none;
}

section {
    
    width: 100%;
    
    position: relative;  
    margin-top: 0px;  
    
    background: var(--colorLight);
}

/* ID'S */

header #logo {
    
    position: absolute;
    top: 50px;
    left: 100px;
}



#header_text{
    
    position: absolute;
    top: 400px;
    left: 300px;
}

#menu_actif {
    
    font-size: 0.8em;
    
    color: var(--colorLightMedium);
}

#menu_inactif {
    
    font-size: 0.9em;
    text-decoration: none; 
    
    color: var(--colorLightExtra);
}

#menu_inactif:hover {
    
    font-size: 0.8em;
    color: var(--colorLight);
}

#info_img {
    
    position: absolute; 
    top: 100px; 
    left: 100px;
}

#info_img img {
    
    width: 500px;
}

#a_propos_text {
    
    width: 1200px;
    
    padding-top: 200px; 
    padding-bottom: 200px; 
    padding-left: 650px;  
}

#a_propos_text h1 {
    
    font-size: 2.5em;
}

#a_propos_text p {
    
    color: rgba(0, 0, 0, 0.5);
    font-weight: 100;
}

#apps {
    
    height: 100%;
    
    background: url(../img/apps_landscape.png);  
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

#apps .sections_sous_en_tete{
    
    background: var(--colorLightExtra);
}

.sections_en_tete{
    
    margin-top: 0; 
    padding-top: 100px; 
    
    text-align: center; 
    font-size: 2.7em;
    font-weight: 550;
}

.sections_sous_en_tete{
    
    margin-top: -15px;
    
    text-align:center; 
    color: var(--colorDarkLight);
    
}

.letter_space_min {
    
    letter-spacing: 0.5px;
}













.test1{
    margin: 40px;
    background-color:black;
}

#video_gif {
    
    display:none;
}







#lang{
    
    position: absolute;
top: 50px;
right: 50px;
}

.video_background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;

}





/* BALISSES */

footer {
    
    background: var(--colorDark);
    
    width: 100%; 
    
    padding-top: 75px;
    
    text-align: center; 
}

footer #logo, #contact {
    
    display: inline-block;
}

/* ID'S */

#clients_logo {
    
    display: flex;
    
    background: var(--colorLightMedium);
    
    width: 100%;
    height: 200px;  
    
    justify-content: center;
    align-items: center;
}

#clients_logo div {
    
    display: inline-block;
}

#clients_logo img {
    
   height: 50px;
}

#clients_logo img {
    
    
   margin-left:100px;
        margin-right: 100px;
       
}

#contact {
    
    margin-left: 150px; 
    
    text-align: left;
    color: var(--colorLight);
    
}

#contact p {
    
   margin-top: 25px;
   margin-bottom: 75px;
}

#contact a {
    
   color: white; 
   text-decoration: none;
}

#copyright {
    
    margin-bottom: 25px;
    
    font-size: 0.8em;
    color: var(--colorLightExtra);
}

#logo_img, #logo_name {
    
    display: block;
    width: 176px;
}

#logo_name {
    
    height: 31px;
}

/* CLASSES */

.letter_space_max {
    
    letter-spacing: 1px;
}




/* MEDIA */
@media all and (max-width: 1200px) {
    
    /* BALISSES */
    
    footer #logo, #contact {
    
        display: block;
        text-align: center; 
    }

    footer img {
        
        margin-left:auto;
        margin-right: auto;
    }
    
    /* ID'S */
    
     #clients_logo {
    
        height:auto;
    }

    #clients_logo img {
        
        display: block;
        
        margin-left:auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    #contact {
        
        margin-top: 50px;
        margin-left: 0px; 
    }
    
    
    
    
    #info_img {
    
    position: static; 
    width:100%;
    
}

#info_img img {
    
    display:block;
    margin-left:auto; 
    margin-right:auto; 
    
    width: 300px;
}

#a_propos_text {
    
 
    
    width: 75%;
    
    padding-top: 0px; 
    padding-bottom: 25px; 
     padding-left: 0px; 
    padding-right: 0px; 
    margin-left: auto; 
    margin-right:auto; 
}

#a_propos_text h1 {
    
    font-size: 1.5em;
    text-align:center;
}


   


  #header_text{
    
    position: absolute;
    left: 0px;
    top: 175px;
    
    text-align:center;
}  
    
    
    header span {
    
    
    font-size:1.5em; 
    font-weight:400;
}

header p {
    
    
    font-size: 1em; 
    margin-top: 25px
}
    
    
    header #logo {
    
    position: absolute;
    top: 25px;
    left: 50px;
}

    
    
    #apps {
    
   
    
   
    
}
    
    
    
    
    
    

    header video {
    
        display:none;
    }
    
    #video_gif {
    
        display:block;
    }
}