/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/

/* Déclarer les fontes et leur path*/
@font-face {
    font-family: "Agency";
    src: url('../fontes/agencyr.ttf'); 
}

@font-face {
    font-family: "Agency";
    font-weight: bold;
    src: url('../fontes/agencyb.ttf');
}

@font-face {
    font-family: "D3Euronism";
    src: url('../fontes/D3Euronism.ttf');
}

@font-face {
    font-family: "D3Euronism";
    font-style: italic;
    src: url('../fontes/D3Euronism_i.ttf');
}

@font-face {
    font-family: "D3Euronism";
    font-weight: bold;
    src: url('../fontes/D3Euronism_b.ttf');
}

html {
    height: 100%;
    font-size: 100%;
}
/*
Mais pourquoi ce font-size: 100% sur l'élément html, alors que cela devrait être inutile ? Il s'agit en fait d'un correctif pour un bug d'Internet Explorer Windows, bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur. Il a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentages ne les précède. Avec ce font-size: 100% sur l'élément html, nous sommes désormais à l'abri.
*/

body {
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 300px;
	/*width: 1300px;empeche d'avoir des pages etroites.*/
  	max-width: 1300px;
    border: 0;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;    
    /*color: #fff;*/
	color: #eee;
/*background: blue;
width: 80%;
max-width: 1300px;*/
    background-color: #111;
    font-family: D3Euronism, Arial, Agency, Helvetica, sans-serif;
    font-size: 0.8em; /*IMPORTANT : Ceci est l'element parent pour les fontes. */
}

#page {
	/*display: table;*/
	width: 80%;
	height: 100%;
/*background: gold;*/
/*width: 80%;
max-width: 1300px;*/
    padding: 0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;  
    /*background-color: #222;*/
    /*border: 5px solid blue;*/
}

a:link {
    text-decoration: none;
}

a:link {
    color: #fff;
}

a:visited {
    color: #fff;
}

a:active {
    color: #fe9;
}

p.small {
    line-height: 18%;
}

p.big {
    line-height: 200%;
}

ul {
    list-style-type: none;
    padding: 2px;
    margin: 0px;
}

ul li {
    list-style-type: square;
    padding: 2px;
    padding-left: 2px;
}

#site-header,
#site-footer,
#site-content {
	display: table-row;
}

#site-header {
    position: relative; /* absolute deplace le site-content*/
    top: 0%;
    padding: 0;
    margin: 0;
    /*border: 5px solid green; */ /*ne fonctionne pas sur header pourquoi???*/
}

/*wrapper1 contient les info width et height et l'image de cyphien*/
#site-content {
    position: relative;
    width: 80%;
    height: 70%;
    padding: 3% 0 0 0; /*de la page*/
    /*border: 5px solid green;*/
}
@media (max-width: 700px) {
    #site-content {
        position: relative;
        top: 10%;
        height: auto;
        /*display: none;
        height: 0;*/
    }
}

/*si position:relative le bottom: 1px n'est pas applique*/
#site-footer {
    position: absolute;
    width: 80%;
    height: 12%;
    padding: 0 0 0 0;
    bottom: 1px;
	color: $aaa;
    /*border: 1px solid red;*/
    z-index: 170;
}
@media (max-width: 700px) {
    #site-footer {
        position: absolute;
        bottom: 1px;
        left: 0%;
        width: 100%;
        float: left;
        z-index: 40;
    }
}

/*ajuster cette hauteur si le design change. Le but c'est de garder le footer en bas des options quand l'ecran ne peut pas tout montrer. L'usager va draguer la page pour voir ce qui est en bas. C'est le cas des tel mobiles.*/
@media (max-height: 660px) { 
    #site-footer {
        position: relative;
        left: 0%;
        width: 100%;
        float: left;
        z-index: 40;
    }
}
/*passera par-dessus max-height:500px des que la largeur sera au-dessus de 700px. Le css est toujours applique sequentiellement, les commandes sont appliquees dans l'ordre de leur ecriture.*/
@media (min-width: 700px){ 
       #site-footer {
        position: absolute;
        bottom: 1px;
        left: 0%;
        width: 100%;
        float: left;
        z-index: 40;
    } 
}

.row{
   /* border: 3px solid blue;*/
}

/* Clear floats after the columns. Le table est termine. */
.row:after {
  content: "";
 /* display: table;*/
  clear: both; /*  	No floating elements allowed on either the left or the right side  Ref: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_class-clear*/
}

/*
* {
    box-sizing: border-box;
} */
/*The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
ref  https://www.w3schools.com/css/css3_box-sizing.asp*/

.cellule {
    /*min-height: 1em;*/
    display: table-cell;
    /*border: 3px solid red;*/
}

.contenu-cellule {
    /*  vertical-align: middle;*/
    /*   border: 3px solid white;*/
    /* display: flex; /* contexte sur le parent */
    /*flex-direction: column; /* direction d'affichage verticale */
    /*justify-content: center; /* alignement vertical */
}

/* Create columns that float next to each other */
.column-logo {
    float: left;
    top: 0;
    width: 17%; /* determine la largeur du logo en % de la largeur de #page*/
    /*padding: 0 0 0 7%; /* pousse l'image a droite dans la cellule*/
    margin: -1% 0 0 8%; /* pousse la cellule du logo vers la droite. Comme le menu est float left, i.e. qu'il se colle a gauche sur l'image, le menu sera aussi poussé vers la droite. Alors je peux me servir de ce margin pour finaliser la disposition de toute la ligne du logo et du menu. J'ai du mettre une margin -1% sur le logo pour le remonter et du coup, j'ai du ajuster les padding des column-options1 a 2.3% au lieu de 3.3%. */
}
@media (max-width:700px) {
    .column-logo {
        width: 40%; /*de la largeur de la page*/
        padding: 0 0 0% 30%;
        margin: -4% 0 0 1%;
    }
}

/* IMPORTANT : le padding sert a aligner le texte des options avec le texte du logo pour chaque grandeur*/    
.column-options1 {
    float: left;
    width: 68%; /*de la largeur de #page*/
    padding: 2.3% 0 0 0;
    margin: 0 0 0 6%; /*sert a pousser le menu des options vers la droite*/
    z-index: 200;
}
@media (max-width:1600px) {
    .column-options1 { 
        width: 68%;
        padding: 2.3% 0 0 0;
        margin: 0 0 0 6%;
    }
}
@media (max-width:1500px) {
    .column-options1 { 
        width: 66%;
        padding: 2.3% 0 0 0;
        margin: 0 0 0 6%;
    }
}
@media (max-width:1400px) {
    .column-options1 { 
        width: 65%;
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:1300px) {
    .column-options1 { 
        width: 64%;/*de la largeur du div page*/
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:1200px) {
    .column-options1 { 
        width: 64%; /*de la largeur du div page*/
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:1100px) {
    .column-options1 { 
        width: 64%; /*de la largeur du div page*/
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:1000px) {
    .column-options1 { 
        width: 66%; /*de la largeur du div page*/
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:900px) {
    .column-options1 { 
        width: 66%; /*de la largeur du div page*/
        padding: 2.3% 0 0 0;
        margin: 0 0 0 8%;
    }
}
@media (max-width:800px) {
    .column-options1 { 
        width: 67%; /*de la largeur du div page*/
        padding: 2.3% 0% 0 0%;
        margin: 0 0 0 8%;
    }
}
/*@media (max-width:700px) {
    .column-options1 { 
        width: 80%;
        padding: 1.7% 0 0 11%;
    }
}*/
@media (max-width: 700px) {
    .column-options1 {
        display: none;
        width: 0;
        height: 0;
    }
}

/*boutons mobiles a partir de 699px*/
.mb {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #a1a1a1;
    border-radius: 25px;
    padding: 10px 2px;
}

#column_options1_m {
    position: relative;
    top: 4px;
    left: 20%;
    width: 60%;
    padding: 0px;
    margin: 0;
    z-index: 200;
}
@media (min-width: 700px) {
    #column_options1_m {
        display: none;
        height: 0;
    }
}
@media (max-width: 699px) {
    #column_options1_m {
        display: block;
        height: auto;
        float: left;
    }
}

#options1_m {
    width: 100%;
    padding: 0px;
    margin: 0;
    text-align: center;
}

.column-options2{
  float: left;
  width: 80%; /*de la largeur de #page*/   
  padding: 1% 10% 0% 10%; /* IMPORTANT : sert a aligner le contenu */
  vertical-align: bottom;
  text-align: center;
}

.centrer { /*Ne fonctionne pas pour les table-cell*/
    margin-right: auto;
    margin-left: auto;
}

/* img pour logo, image de Cyphien, carte Google, etc 
Ne pas setter les details de chaque img ici. Utiliser les div qui les contiennent.*/
img {
    width: 100%; /*de la cellule*/
    height: auto; /* pour que l'image ne change pas de hauteur quand je change la hauteur de la page, il faut que le height soit auto dans la balise img et non dans les contenants*/
    margin: 0;
    /*margin-left: 0%;
    margin-right: 0%;/*voir margin-top pour la deuxieme column*/
}