@charset "UTF-8";

/* FONTS */
/* Programme */
/* PX Grotesk */
@font-face {
    font-family: 'px_groteskbold';
    src: url('font/pxgrotesk-bold.woff2') format('woff2'),
    url('font/pxgrotesk-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

.conteneur_general {
    width:100vw;
    margin: 0 auto;
    padding:20% 5% 0% 5%;
    overflow:hidden;}

html * {cursor: url("img/pointer1.svg") 10 10, auto;}
a:hover, .topnav img:hover, .grille img:hover, .image-hover_1:hover, .image-hover_2:hover, .image-hover_3:hover, .image-hover_4:hover, .image-hover_5:hover, .image-hover_6:hover {cursor: url("img/pointer2.svg") 10 10, auto;}

body {
    color:#000000;
    margin:0px;
    padding:0px;}
body ul {list-style-type:none;}

/* RESPONSIVE */
@media (min-width: 0px){
    .conteneur_general {
        padding:0% 5% 0% 5%;}

    /* TEXTES */
    h1 {
        font-family:'px_groteskbold';
        font-size:48px;
        line-height:50px;}
    h2 {
        font-family:'px_groteskbold';
        font-size:18px;
        line-height:20px;}
    h3 {
        font-family:'px_groteskbold';
        font-size:24px;
        line-height:26px;}
    p, .lignes span {
        font-family: 'Almarai', sans-serif;
        font-size:18px;
        line-height:20px;}
    .topnav a {
        padding: 0px 0px 0px 0px;
        color: #000000;        
        font-family:'px_groteskbold';
        font-size:30px;
        text-decoration: none;
        text-align:end;}
    footer, .nav_bas a {
        font-family: 'px_groteskbold';
        font-size:30px;
        line-height:32px;
        text-align:end;}
    
    .topnav {
        padding:5% 5%;
        margin:auto;
        text-align: end;
        overflow:hidden;}
    .topnav a:hover, .topnav a.active {
        color:#000dff;}
    .lab .topnav a {
        position:inherit;
        right:0;
        bottom:0;
        z-index:10;}
    
    .anim_home {
        position:fixed;
        top:15%;
        left:0%;
        z-index:100;
        width:100vw;
        margin: 0 auto;}
    
    .grille {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        overflow:hidden;
        margin:0 auto;
        padding:20vh 0px;}
    .grille img {
        width:100%;
        padding-bottom:30px;}
    
    hr {
        padding:0px;
        margin:15px 0px;
        border:1px solid #000000;}
    .lignes {
        padding:0px 0px 0% 0px;
        text-align:right;
        overflow: hidden;
        text-overflow: ellipsis;}
    .lignes img {
        width:20%;
        height:auto;
        margin-left:10px;}
    .lignes h2 {
        line-height:18px;
        display:flex;
        justify-content:space-between;}
    .lignes a {height:50px;}

    .mail {
        padding:25% 0px;
        margin:0px;}
    footer {padding:0%;}
    .langue:link, .langue:visited, .footer a {
        color:#000dff;
        text-decoration:none;}
    footer a:active, footer a:hover, .langue:active, .langue:hover {
        color:#000000;}
    
    .lab_grille {
        height:100vh;
        margin: 0 auto;
        padding-top:0%;}
    div.col-12:nth-child(6) > img:nth-child(1) {padding-bottom:30%;}
    
    .titre {
        padding:20% 5%;}
    
    .nav_bas {
        display:flex;
        justify-content:space-between;
        position:fixed;
        z-index:0;
        bottom:3%;
        width:90vw;
        margin:0px auto;
        padding:0px;}
    .nav_bas a {padding:0px 0px;}
    .nav_bas a:link, .nav_bas a:visited {
        color:#000dff;
        text-decoration:none;}
    .nav_bas a:hover {color:#000000;}

    #myVideo {
        position:fixed;
        right: 0;
        bottom: 0;
        z-index:-1;
        width: 100%; 
        height: 100%;}
    
    .image-hover_1 img {
        width:100%;
        margin:10% 0%;}
    .image-hover_6 {margin-top:0%;}
    .image-hover_2 img {margin-top:15%;}
    .image-hover_5 img {margin-top:20%;}
    .image-hover_3 img, .image-hover_4 img, .image-hover_7 video {
        height:50vh;
        width:auto;
        margin:5% auto;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .topnav .col-4 > a:nth-child(2) {margin-left:10%;}
    
    .titre {padding:0% 5%;}

    .mail {
        padding:0px;
        margin:0px;}
    footer {padding:0%;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    h1 {
        font-size:54px;
        line-height:56px;}
    h2, p, .lignes span  {
        font-size:24px;
        line-height:26px;}
    h3 {
        font-size:30px;
        line-height:32px;}
    .topnav a, footer, .nav_bas {
        font-size:40px;
        line-height:42px;}
    .nav_bas a {
            font-size:40px;}
    
    footer .row {
                padding:0% 20% 10% 0%;}
    
    .lignes {
        padding:0px 0px 30% 0px;}
    
    .titre {padding:0% 3%;}
    
    .image-hover_1 img {
        margin:0% 0% 0% 10%;
        width:80%;}
    .image-hover_2 img, .image-hover_5 img {margin-top:5%;}
    .image-hover_3 img, .image-hover_4 img, .image-hover_7 video {
        height:60vh;
        width:auto;
        margin:0% auto;}
    
    .nav_bas {bottom:5%;}
    .nav_bas a:link, .nav_bas a:visited {padding:0px 25px;}
    
    inline a  {height:100px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .conteneur_general {padding:10% 3% 0% 3%;}
    .topnav {padding:3% 3% 0% 3%;}
    h1 {
        font-size:60px;
        line-height:50px;}
    h2, p, .lignes span  {
        font-size:30px;
        line-height:32px;}
    h3 {
        font-size:36px;
        line-height:38px;}
    .topnav a {font-size:40px;}
    footer, .nav_bas {
        font-size:40px;
        line-height:42px;}
    footer .row {padding:0% 5% 5% 0%;}
    
    .grille img {padding-bottom:30px;}
    
    .anim_home {
        width:60%;
        top:10%;
        left:18%;
        opacity:1;}
    
    .lab_grille {margin-top:-10%;}
    .lab {
        padding:17% 3%;        
        height:100vh;}
    
    .lignes {
        padding:0px 0px 20% 0px;}
    .lignes img {
        width:10%;}
    footer .row {
            padding:0% 8% 5% 0%;}
    
    .titre {
        padding:0% 1%;}  
    
    .image-hover_2, .image-hover_3, .image-hover_4, .image-hover_5 {
        margin:0% auto;}
    .image-hover_1 {
        width:100%;
        height:auto;}
    .image-hover_2 img, .image-hover_5 img {
        width:100%;
        height:auto;}
    .image-hover_3 img, .image-hover_4 img, .image-hover_7 video {
        width:50%;
        height:auto;
        margin:0% 30%;}
    
    .nav_bas {bottom:7%;}
    .nav_bas a {
        font-size:45px;}
    
}

@media (min-width: 1500px){
    .conteneur_general {padding:3% 3% 0% 3%;}
    .topnav {padding:3%;}
    .topnav img {
        padding:0%;
        margin:0%;
        width:100%;}
        
    h1 {
        font-size:80px;
        line-height:80px;}
    h2, p, .lignes span  {
        font-size:34px;
        line-height:38px;}
    h3 {
        font-size:48px;
        line-height:50px;}
    .topnav a {font-size:60px;}
    footer, .nav_bas {
        font-size:54px;
        line-height:58px;}
    footer .row {padding:0% 2% 10% 0%;}

    hr {border:1.5px solid #000000;}
    
    .grille {padding-top:25%;}
    .grille img {padding-bottom:5px;}
    
    .anim_home {
        width:60%;
        top:10%;
        left:18%;}
    
    .lab {
        padding:4% 3%;        
        height:100vh;}
    .lab_grille {margin:0px;}
    
    .lignes {
        padding:0px 0px 10% 0px;}
    .lignes h2:not(span) {margin-top:25px;}
    .lignes span {margin-top:-10px;}
    
    .titre {padding-top:5%;}
    .titre h1, .titre h3 {margin-bottom:3%;}
    
    .image-hover_2, .image-hover_3, .image-hover_4, .image-hover_5, .image-hover_6 {
        margin:0% auto;}
    .image-hover_1 img {
        width:90%;
        height:auto;
        margin:2% 0% 0% 10%;}
    .image-hover_2 img, .image-hover_5 img  {
        width:100%;
        height:auto;}
    .image-hover_3 img, .image-hover_4 img, .image-hover_7 video {
        width:40%;
        height:auto;
        margin:3% 30%;}
    
    .nav_bas {
        width:95vw;
        bottom:7%;}
    }

/* ROTATION */
    .rotate {
      animation: rotation 10s infinite linear;}
    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);}
    }

/* ANIMISTA */
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);}
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);}}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);}
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);}}