/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* CONSTANTES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

:root{
    
    /* Arrière-plan Header */
    --couleur-1: 1,1,1; 
    --couleur-2: 15, 15, 15;
    /* Entêtes */
    --couleur-3: 204, 140, 31;
    /* Textes */
    --couleur-4: 1, 1, 1; 
    /* Fond */
    --couleur-5: 255, 255, 255; 
}

html, body{
    margin: 0;
    padding: 0;
    overflow-x : hidden;
}

html, textarea{
    color: rgb(var(--couleur-1));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
    background-color: rgb(var(--couleur-5));
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

* {
    font-family : "Jost";
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* GENERAL */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

a{
    text-decoration: none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* CLASSES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

.italic{
    font-style: italic;
}

.bold{
    font-weight: bold;
}

.entete{
    font-size: 26pt;
    margin: 50px 0;
    color: rgb(var(--couleur-3));
    text-align: center;
}

.flex_col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h2 {
    width : 100%;
    text-align: center;
    color : rgb(var(--couleur-3));
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* HEADER */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

header{
    grid-template-columns: 1fr 3fr 1fr;
    column-gap: 10px;
    padding: 15px;
    /*
    background-color: rgb(var(--couleur-1));
    background-image: url("../images/header_bois.jpg");
    */
    background: linear-gradient(90deg, rgba(60,60,60,1) 20%, rgba(1,1,1,1) 80%);
    display: grid;
}

header #gauche{
    display: flex;
    align-items: center;
    justify-content: center;
}

header #gauche img{
    max-height: 80px;
    width: auto;
}

header #centre{
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header #centre #nom{
    margin: 0;
    font-size: 32pt;
    color: rgb(var(--couleur-3));
    text-align: center;

}

header #centre #label{
    margin: 0;
    color: rgb(var(--couleur-4));
    font-weight: bold;
}

header #droite{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header #droite a{
    text-decoration: none;
}

header #droite a:hover{
    text-decoration: underline;
}

header #droite table{
    border-collapse: collapse;
}

header #droite table tr td img{
    width: 20px;
    height: 20px;
}

header #droite table tr td{
    text-align: end;
    color: white;
}


header #droite table tr td:last-child{
    width: 4%;
    padding-left: 10px;
}

header #droite table tr:nth-child(1) td a, header #droite :nth-child(2) td a{
    color: rgb(var(--couleur-3));
}

header #droite table tr:nth-child(3) td a{
    /*color: rgb(var(--couleur-4));*/
    color: white;
    font-weight: bold;
} 


/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* SOUS-MENU */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#menus{
    top: 0;
    z-index: 8;
    background-color: rgb(var(--couleur-2));
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
    position: sticky;
}

#ss_menu{
    height: 50px;
    background-color: rgb(var(--couleur-2));
}

#ss_menu ul, #partenaires ul{
    margin: 0;
    padding: 0;
    height: 100%;
    color: rgb(var(--couleur-3));
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: default;
}

#ss_menu ul li{
    margin: 0;
    padding: 15px 10px;
    margin: 0 5px;
    color: rgb(var(--couleur-5));
    text-transform: uppercase;
}

#ss_menu ul li:hover, #partenaires ul li:hover{
    color: rgb(var(--couleur-3));
    cursor: pointer;
}


#partenaires{
    top: -50px;
    z-index: 5;
    background-color: rgb(var(--couleur-2), 1.5);
    position: sticky;

    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

@-webkit-keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    }
    @keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
} 

#partenaires ul li{
    margin: 0;
    padding: 10px 10px;
    margin: 0 5px;
    font-size: 10pt;
    color: rgb(var(--couleur-5));
    text-transform: uppercase;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* FOOTER */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

footer{
    padding: 30px 20%;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(var(--couleur-2));
    display: grid;
}

#footer_gauche{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer_gauche p{
    color: rgb(var(--couleur-5));
    text-align: center;
}

#entete_gauche_footer{
    font-size: 16pt;
    margin-top: 0;
    color: rgb(var(--couleur-3)) !important;
}

#footer_gauche a{
    color: rgb(var(--couleur-5));
    text-decoration: underline;
}

#footer_droite{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer_droite table{
    color: rgb(var(--couleur-5));
    border-collapse: collapse;
}

#footer_droite tr th{
    font-size: 20pt;
    padding-bottom: 20px;
    text-align: left;
}

#footer_droite tr td:first-child{
    width: 40%;
}

#footer_droite tr td{
    font-size: 14pt;
    padding: 5px 0;
    vertical-align: top;
}

#footer_droite tr td a{
    color: rgb(var(--couleur-5));
    text-decoration: underline;
}

#footer_droite tr td a:hover{
    text-decoration: underline;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* BANNIERES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

.banniere{
    padding: 20px 50px;
    background-color: rgb(var(--couleur-2));
    position: relative;
    display : flex;
    flex-direction: column;
    width : 100%;
    justify-content: center;
    align-items: center;
    padding : 20px auto;
}

.banniere > div {
    display : flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.banniere > div > p {
    color : rgb(var(--couleur-5));
}

.contenu_banniere{
    opacity: 0.9;
}

.fond_banniere{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    position: absolute;
}

.texte_banniere, .banniere > div > p{
    font-size: 14pt;
    color: rgb(var(--couleur-5));
    text-align: center;
    width : 40%;
}

.img_banniere_1{
    background-image: url('../images/am_2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}   

.img_banniere_2{
    background-image: url('../images/tp_1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}   

.img_banniere_3{
    background-image: url('../images/form.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}   

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* RESPONSIVE */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* TAILLE 1 : Ordinateur et Tablette (paysage) 960px -> 1599px */

@media screen and (max-width: 1599px){

    /* MENU */
    #ss_menu ul li{
        font-size: 10pt;
    }

    #partenaires ul a li{
        font-size: 8pt;
    }

    /* FOOTER */

    footer{
        padding: 30px 5%;
    }
    
    #footer_droite tr td{
        font-size: 12pt;
        padding: 5px 0;
        vertical-align: top;
    }
}

/* TAILLE 2 : Tablette (portrait) 768px -> 959px */

@media screen and (max-width: 959px){

    /* MENU */
    #ss_menu ul li{
        font-size: 8pt;
    }
 
    /* HEADER */

    header #gauche img{
        max-height: 60px;
        width: auto;
    }
    
    header #droite .reseaux a, header #droite #num a{
        font-size: 10pt;
    }

    header #droite img{
        height: 20px;
        width: auto;
    }
}

/* TAILLE 3 : Mobile max 767px */

@media screen and (max-width: 767px){

   /* HEADER */

    header{
        padding: 30px 20px;
    
        grid-template-columns: 0.5fr 3fr 0.5fr;
    }

    header #centre #nom{
        font-size: 18pt;
    }

    header #droite .reseaux a{
        font-size: 8pt;
    }

    header #droite #num a{
        font-size: 8pt;
    }

    header #droite .reseaux img, header #droite #num img{
        height: 20px;
        margin-left: 10px;
        width: auto;
    }
    
    header #gauche img{
        max-width: 100px;
        width: auto;
    }

    header #droite table tr td img{
        width: 15px;
        height: 15px;
    }

    header #droite table tr td{
        font-size: 10pt;
    }
    
    /* SOUS MENU */

    #ss_menu, #partenaires{
        height: auto;
    }

    #ss_menu ul, #partenaires ul{
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    /* FOOTER */

    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }

    #footer_droite{
        width: 100%;
    }

    #footer_droite table{
        width: 90%;
    }

}