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

                    Site Internet TOM 2022
           Feuille de styles générique pour tout le site

*************************************************************
Arnaud Wilhelm
Novembre 2021
*/


/*------------------------------------------------
Chargement des polices personnalisées 
--------------------------------------------------*/
@font-face {
    font-family: 'overpassmonolight';
    src: url('../polices/overpass-mono-light/overpass-mono-light.eot');
    src: url('../polices/overpass-mono-light/overpass-mono-light.eot?#iefix') format('embedded-opentype'),
         url('../polices/overpass-mono-light/overpass-mono-light.woff') format('woff'),
         url('../polices/overpass-mono-light/overpass-mono-light.ttf') format('truetype'),
         url('../polices/overpass-mono-light/overpass-mono-light.svg#overpass-mono-light') format('svg');
    font-weight: normal;
    font-style: normal;
}                 /* Overpass Mono Thin*/

@font-face {
    font-family: 'avenirbook';
    src: url('../polices/avenir-book/avenir-book.eot');
    src: url('../polices/avenir-book/avenir-book.eot?#iefix') format('embedded-opentype'),
         url('../polices/avenir-book/avenir-book.woff') format('woff'),
         url('../polices/avenir-book/avenir-book.ttf') format('truetype'),
         url('../polices/avenir-book/avenir-book.svg#Avenir-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}               /*-- Avenir --*/

@font-face {
    font-family: 'kagedemoblack';
    src: url('../polices/kage-demo-black/kage-demo-black.eot');
    src: url('../polices/kage-demo-black/kage-demo-black.eot?#iefix') format('embedded-opentype'),
         url('../polices/kage-demo-black/kage-demo-black.woff') format('woff'),
         url('../polices/kage-demo-black/kage-demo-black.ttf') format('truetype'),
         url('../polices/kage-demo-black/kage-demo-black.svg#KAGE_DEMO_FONT-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}               /*-- Kage Demo Black --*/

/*------------------------------------------------
Style background et page
--------------------------------------------------*/
body {
    background: url("../images/Background.jpeg");
    background-color: #000000;
    background-size:     cover;
    font-family: 'avenirbook', Verdana, courier;   /* Definition police par defaut */
    margin-top: 0px;     /* pas de marge en haut ni en bas */
    margin-bottom: 0px;
}                       /* Page globale */

#bloc_page {
    width: 720px;                /* Taille de page fixe*/
    background-color: #000000;      /* couleur */
    margin: auto;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 30px;
}                 /* Page globale */

@media handheld , (max-width: 905px), (max-device-width: 905px){
    #bloc_page
    {
        width: 400px;
    }
}                 /* Page globale sur ecrans peu larges*/

@media handheld , (max-width: 468px), (max-device-width: 468px){
    #bloc_page
    {
        width: auto;
    }
}                 /* Page globale sur ecrans tous petits*/

/*------------------------------------------------
Bandeau boutons
--------------------------------------------------*/
#Bandeau_boutons {
    display: flex;                  /* Positionnement des boutons dans le bandeau*/
    justify-content: flex-end;
    padding: 15px;
}           /* Positionnement des blocs */


/*------------------------------------------------
Boutons langues
--------------------------------------------------*/
#Boutons_langues {
	background-color: #435461;      /* Fond */
    
    padding-left: 10px;             /* Marges */
    padding-right: 10px;

    display: flex;                  /* Positionnement des blocs */
    align-items: center;
}            /* Bloc boutons langues */

#Separateur {
    border: 0.5px solid black;
    height: 70%;
}                 /* Trait noir qui separe */

#Boutons_langues a {
    color: #feead3;                 /* Texte */
    font-size: 70%;
    text-decoration: none;
    
    display: flex;                  /* Position des images */

    margin: 3px;
}          /* Liens par défaut */

#Boutons_langues a:hover {
    color: #e68366;
}    /* Lien au survol */

#Boutons_langues img {
    margin: 2px;
}        /* Marges des drapeaux */


/*------------------------------------------------
Bouton Facebook
--------------------------------------------------*/
#Bouton_facebook {
    display: flex;
    align-items: center;
    margin-left: 10px;
}            /* Bouton facebook  */


/*------------------------------------------------
Menu
--------------------------------------------------*/
nav {
    margin-left: 2px;                  /* Les marges */
    margin-right: 2px;
    
    border-bottom: 4px dotted white;
}


nav ul {
    list-style-type: none;          /* Pas de puces pour la liste */
    
    display: flex;                  /* Positionnement des blocs */
    justify-content: center; /*space-around;*/
    flex-wrap: wrap;
    
    padding: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right:10px;
}     /* Positionnement des boutons */

nav .Point_milieu{
    color: white;                   /* Texte */
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 11px;
    padding-bottom: 2px;
    font-size: 10px;
}               /* Le point milieu */

nav a {
    display: block;                 /* Se comportent comme des blocs */
    
    color: white;                   /* Texte */
    text-decoration: none;
    font-family: 'kagedemoblack', Verdana, courier;   /* Police */
    font-size: 25px;
        
    margin: 0px;
    padding: 2px;
    margin-left: 10px;
    margin-right: 10px;
}                        /* Les boutons */

nav .Menu_actuel a {
    color: #e68366;
}           /* Le bouton selectionne */

#menu-icon {
	visibility: hidden;
	width: 40px;
	height: 40px;
	background: url("../images/menu_icon.png") center;
    margin: -25px;      /* Marges negatives pour cacher completement l'element*/
}     /* Icone menu pour smartphones */

/* Pour smartphones ********************************************************** */
@media handheld , (max-width: 905px), (max-device-width: 905px){
    #menu-icon {
        visibility: visible;
        margin: 5px;
	}        /* On affiche l'icone menu */
    nav ul, nav:active ul { 
		display: none;
    }        /* On enleve les boutons */
    nav a {
        text-align: center;
    }        /* On centre le texte */
    nav:hover ul {
		display: block;
	}        /* On affiche les boutons seulement si passage de la souris */
    nav {    
        border-bottom: none;
    }
    nav .Point_milieu{
        line-height: 0px;
        color: black;
        margin: 0px;
        padding: 0px;
    }       /* Cacher le point milieu*/

}                 /* Menu sur ecrans peu larges*/

/*------------------------------------------------
Main
--------------------------------------------------*/
main {
    color: white;                  /* Couleur texte par defaut */
    text-align: justify;
    
    padding: 30px;                  /* Les marges */
    padding-bottom: 100px;
    
    /*
    background-image: url('../images/logo_rond.png');  
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 150px; */ /* Le logo en bas */
}               /* Style du bloc principal */

main h1{
    text-align: center;
    
    font-family: 'kagedemoblack', Verdana, courier;   /* Police */
    font-size: 45px;                
    
    color: #e68366;                 /* Couleur  ea4e4e */
    
}               /* Les titres 1 dans le main */

main h2{
    font-size: 19px;  
    
    margin-bottom: 10px;
}               /* Les titres 2 dans le main */

main h3{
    margin-bottom: 10px;
}               /* Les titres 3 dans le main */

main p {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

main a{    
    color: #53bec8;                 /* Couleur */
}               /* Les liens */

#Informations{
    font-size: 45px;                /* Police */
    font-weight: 400;    
}                /* La phrase d'information */

#Informations2 {
    margin-bottom: 40px;            /* Positionnement*/
    font-size: 20px;                /* Police */
    
    text-align: center;
}

/* Pour smartphones ************/
@media handheld , (max-width: 905px), (max-device-width: 905px){

    
    main{
        padding-bottom: 150px;
    }                /* Le logo un peu plus bas */
}

/*------------------------------------------------
Pied de page
--------------------------------------------------*/
footer {
    margin-top: 30px;               /* Marge sous le texte */

    /*  padding-top: 15px;
    border-top: 1px solid #feead3;*/   /* bordure haute */

    
    display: flex;                  /* Positionnement des blocs */
    justify-content: space-between;
    align-items: center;
    
    font-size: 12px;                /* Police  */
    
    color: white;                  /* Couleur texte par defaut */
}

#LogoCopyright{
    display: flex;
    flex-direction: column;
    align-items: center;
}                /* Centrage du logo */

#LogoCopyright img {
    width: 150px;
}           /* Taille du logo */

#LogoCopyright p {
    margin: 0;                      /* Marges  */
    margin-top: 10px;
    
    text-align: justify;
    text-align-last: justify;
}             /* Police copyright */

#Contact h4{
    margin: 0px;
    
    font-weight: 600;
    font-size: 17px;
    text-align: center;
}                   /* Contact : Titre et taille */

#Contact div{
    display: flex;
}                 /* Placement texte */

#liste_contact ul{
    margin-top: 5px;
}               /* placement liste */

#contact_liens{
    padding-right: 25px;
    border-right: 4px dotted white;
}               /* Barre de separation */

#contact_liens{
    padding-left: 10px;
}               /* placement liste */

#contact_liens li{
    padding-bottom: 8px;
}               /* placement liste */

#Contact a{
    color: inherit;
}             /* Format liens */

#contact_num{
    list-style-type: none;          /* Pas de puces pour la liste */
    padding-left: 15px;
    
    font-family: 'overpassmonolight'; /* Police monospaced  */
    letter-spacing: -2px;             /* On resserre les chiffres sinon c'est moche  */
}                 /* Format numeros */
#contact_num li{
    padding-bottom: 10px;
}               /* placement liste */

/* Pour smartphones ********************************************************** */
@media handheld , (max-width: 905px), (max-device-width: 905px){
    footer {
        flex-direction: column;
        align-items: center;
    }           /* Positionnement des blocs */
    #LogoCopyright{
        order: 2;
    }           /* Logo a la fin */
    #liste_contact{
        flex-direction: column;
        align-items: left;
    }          /* Mails et num tel l'un au dessus de l'autre */
    #contact_noms{
        padding-left:10px;
        padding-bottom:0px;
    }           /* Marge moins grande */
    #contact_num{
        padding-bottom:0px;
    }           /* Marge moins grande */
    #contact_liens{
        order:2;
        border: none;
        margin-top: 0px;
    }          /* Mails en deuxieme et on enleve la bordure */
}                 /* Menu sur ecrans peu larges*/