/*Notre feuille de style CSS */
/*Ces réglages s'appliqueront à l'ensemble de la page par défaut*/

body{
    background: rgb(43, 62, 79); /*Mise en place de la couleur d'arrière-plan*/
    width: 100%; /*Mise en place de la taille de la page par rapport au navigateur*/
    -webkit-font-smoothing: antialiased; /*Cette ligne permet à Google Chrome d'appliquer les poids de police*/
    font-family: 'Roboto', Arial, sans-serif; /*On défini la police par défaut, et d'autres polices au cas où la police ne serait pas prise en charge (par exemple si pas de réseau internet)*/
    font-weight: 400; /*Voici le poids de notre police*/
    font-size: 100%; /*Voici la taille de notre police*/
    color: white; /*Voici la couleur de notre police*/
    text-align: justify; /*Le texte est justifié*/
}
    /*Voici les réglages de l'intérieur de la page*/
.conteneur{
    background: rgb(51, 73, 92);
    width: 80%;  
    margin-left: 10%; /*Ces réglages permettent de déterminer la largeur des marges autour du conteneur*/
    margin-right: 10%;
    margin-bottom: 0px;
    margin-top: 0%;
}
    /*Voici les réglages d'un aute conteneur de la page dans lequel on écrira notre texte*/
.contenu_page {
    margin-left: 10%;
    margin-right: 10%;
}
    /*Voici les propriétés de la ligne que l'on peut apercevoir sur plusieurs pages*/
.ligne {
    border-bottom: 1px solid white;
}

.OSS117{
    width: 30%;
}
.imageOSS{
    width: 80%;
    margin: 0%;
}
.image{
    width: 50%;
    margin: 0%;
}
table{
    margin: -3%;
}
iframe{
    width: 100%;
}
    /*Voici les propriétés de notre super image faite par Grégoire avec Illustrator*/
img{
    width: 80%;
    margin-left: 10%;
}
.moyenne{
    width: 50%;
    margin-left: 25%;
}

    /*Dans cette partie du code, nous allons régler les polices de nos titres*/
h1{ /*Caractéristiques du titre h1*/
    font-family: 'EB Garamond', Arial, sans-serif;
    color: white;
    font-size: 250%;  
    text-align: center;
        /*Voici le code pour faire une petite animation très sympa*/
    animation-name: entreefracassante; /*Nom de notre animation*/
    animation-duration: 1s; /*Durée de cette animation*/
    -webkit-animation-name: entreefracassante; /*Pour Chrome, Safari et Opéra*/
    -webkit-animation-duration: 1s;
    -moz-animation-name: entreefracassante; /*Pour Firefox*/
    -moz-animation-duration: 1s;
}
    /*Voici le code qui va permettre de transformer notre titre*/
@keyframes entreefracassante {
  from { /*Au début de l'animation*/
    opacity: 0; /*L'opacité de notre titre est à 0 afin de réaliser un fondu*/
    -webkit-transform: translate3d(-2000px, 0, 0); /*Position initiale de notre titre*/
    transform: translate3d(-2000px, 0, 0);
  }

  to { /*A la fin de notre animation*/
    opacity: 1; /*Opacité finale*/
    -webkit-transform: none; /*La position finale est celle stipulée dans les réglages de notre titre*/
    transform: none;
  }
}

h2{ /*Caractéristiques du titre h2*/
    -webkit-font-smoothing: antialiased;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 200%;
    text-align: center; /*On aligne le texte au centre*/
    color:white;
    font-weight: 400;
    display: inline; /*Par défaut, aucun retour à la ligne ne sera effectué*/
}

h2.rouge{ /*Caractéristiques de la partie rouge de notre titre h2*/
    -webkit-font-smoothing: antialiased;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 200%;
    position:relative;
    text-align: center;
    font-weight: 400;    
    color: rgb(236, 74, 65);
    display: inline;
}

.titre{ /*Caractéristiques du conteneur de notre titre h2 de la premièe page*/
    text-align: center;
}

h4{ /*Caractéristiques du titre h4*/
    font-family: 'EB Garamond', Arial, sans-serif;
    font-size: 200%;
}

.pied_page{ /*Caractéristiques du pied de page*/
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 100%;
    text-align: right;
    color: rgb(236,74,65);
}

    /* Ici seront placés les caractéristiques de notre menu*/
#menu ul {
	list-style:none; /*On évite de prendre un style de liste qu'aurait mis le navigateur par défaut*/
	position:fixed; /*On fait en sorte que lorsque la page est scrollée, le titre reste fixe*/
	margin:0;
	padding:0; /*Pas de marges intérieurs*/
    left:17%; /*Poisition dans le conteneur*/
    top: 1%;
    background:rgb(189, 194, 199);
}

#menu ul a {
    -webkit-font-smoothing: antialiased;
	display:block;
	color:white;
	text-decoration:none;
	font-weight:400;
	font-size:20px;
	line-height:32px;
	padding:0 15px;
	font-family:"Roboto"; Arial, sans-serif;
}

#menu ul li {
	position:relative;
	float:left;
	margin:0;
	padding:0  
}

#menu .pageactuelle {
	background:rgb(126, 140, 141)
}

#menu :hover { /*Au passage de la souris, voici les caractéristiques que va prendre la case survolée*/
	color:rgb(148, 165, 166);
}

/* Créée par Clément Redivo et Grégoire Thibaud*/