/* Définition des polices personnalisées */
@font-face
{
    font-family: 'AmbleRegular';
    src: url('../polices/amble.eot');
    src: url('../polices/amble.eot?#iefix') format('embedded-opentype'),
         url('../polices/amble.woff') format('woff'),
         url('../polices/amble.ttf') format('truetype'),
         url('../polices/amble.svg#AmbleRegular') format('svg');
    font-weight: normal;																	/* Police normal, non gras */
    font-style: normal;																		/* Police normal, non italique */
}

@font-face
{
    font-family: 'WindsongRegular';
    src: url('../polices/Windsong.eot');
    src: url('../polices/Windsong.eot?#iefix') format('embedded-opentype'),
         url('../polices/Windsong.woff') format('woff'),
         url('../polices/Windsong.ttf') format('truetype'),
         url('../polices/Windsong.svg#WindsongRegular') format('svg');
    font-weight: normal;																	/* Police normal, non gras */
    font-style: normal;																		/* Police normal, non italique */
}

/* Eléments principaux de la page */
body
{
	background: #ffffff;																	/* Notre fond blanc */
	font-family: 'AmbleRegular', Arial, sans-serif;
    color: #334455;																			/* Notre couleur gris foncé */
}

#bloc_page
{
	width: 1200px;																			/* Notre zone de texte de 1200px */																					
	margin: auto;																			/* Margin de chaque côté du site web */
}
	
/* Header */
header
{
	background: url('../images/separationgc.png') repeat-x bottom;							/* L'image se répète horizontalement */
    display: flex;																			/* Les blocs "balises (div et nav)" du conteneur header se placent l'un à côté de l'autre */ 
    justify-content: space-between;															/* Les blocs div et nav laissent de l'espace entre les 2, div tout à gauche et nav tout à droite */
    align-items: center;																	/* Les blocs div et nav s'alignent par le centre */
	position: fixed;																		/* Fixe la balise header cependant sa position et sa largeur doivent être redéfinies */
	width: 1200px;																			/* Largeur de header doit être redéfinie */
	top: 0px;																				/* Prend effet pour les éléments positionnés. Si l'on ne met pas de top, il y a un bord entre le navigateur et la balise header */
	z-index: 2;																				/* Quel élément doit apparaître au dessus, plus le chiffre est grand plus la balise est dessus. 2 pour header et 1 pour section */
	background-color: #ffffff;																/* Donne une couleur de fond à la balise header sinon elle est transparente et l'on voit passer le texte de la balise section */
	/*background-color: green;	*/															/* Donne une couleur de fond à la balise header sinon elle est transparente et l'on voit passer le texte de la balise section */
}	

#titre_logo
{
	display: flex;																			/* Les blocs "balises (img et div)" du conteneur header se placent l'un à côté de l'autre */
	/*background-color: green;*/
}

#titre_logo img
{
	width: 100px;																			/* Largeur du logo principal */
	height: 100px;																			/* hauteur du logo principal à définir à cause du flex sur #titre_logo sinon il reprend sa vraie hauteur de 500px */
}

#prenomnom
{
	display: flex;																			/* les blocs Prénom et Nom sont l'un à côté de l'autre */
	margin: 0 0 0 50px;																		/* Taille de la marge Haut, Droite, Bas, Gauche */
}

#job
{
	display: flex;																			/* les blocs Technicien et informatique sont l'un à côté de l'autre */
	margin: 0 0 0 96px;																		/* Taille de la marge Haut, Droite, Bas, Gauche */
}

header h1
{
	font-family: 'WindsongRegular', Arial, sans-serif;
    font-size: 2.5em;
	font-weight: normal;																	/* Avec font-size à 2.5em cela apparait en gras, on revient à la normale avec cette option */ 
	margin: 10px 0 0 10px;																	/* Taille de la marge Haut, Droite, Bas, Gauche */
}

header h2
{
	font-family: 'AmbleRegular', Arial, sans-serif;
	font-size: 0.7em;
	font-weight: bold;																		/* En gras */	
	margin: 0 0 0 2px;																		/* Taille de la marge Haut, Droite, Bas, Gauche */
	color: #c92a39;																			/* Notre couleur rouge */
}

/* Navigation */
nav
{
	display: flex;																			/* Les blocs ul et ol se placent l'un à côté de l'autre */																																
	/*background-color: red;*/
}

nav ul
{
	list-style-type: none;																	/* Suppression des puces */														
	display: flex;																			/* Les blocs li se placent l'un à côté de l'autre */
	padding: 0 0 0 0;																		/* Les blocs ul et ol sont fort séparés */
	/*background-color: blue;*/
}

nav ol
{
	list-style-type: none;																	/* Suppression des puces */														
	display: flex;																			/* Les blocs li se placent l'un à côté de l'autre */														
	padding: 0 0 0 0;																		/* Les blocs ul et ol sont fort séparés */
	/*background-color: yellow;*/
}

nav li
{
	margin-right: 20px;																		/* 20px entre les blocs li Menu */
}

nav a 
{
	font-family: 'AmbleRegular', Arial, sans-serif;
    font-weight: normal;																	/* Police normal, non gras */
    text-transform: uppercase;																/* En majuscules */
	font-size: 1.1em;																		/* Taille de la police */
	color: #b7c6c9;																			/* Notre couleur gris clair */
	text-decoration: none;																	/* Suppression du trait sous le texte */
	font-weight: bold;																		/* En gras */	
}

nav a:hover
{
	color: #c92a39;																			/* Au passage de la souris sur le menu, il prend la couleur rouge */
	border-bottom: 3px solid #c92a39;														/* Au passage de la souris sur le menu, un souligné de couleur rouge */
}

/* Corps */
#absolute
{
	position: absolute;																		/* Positionne la balise section cependant sa position et sa largeur doivent être redéfinies */
	top: 100px;																				/* Prend effet pour les éléments positionnés. 100px du bord du navigateur car il y a la hauteur de la balise header */
	width: 1200px;																			/* Largeur de section redéfinie */
	z-index: 1;																				/* Quel élément doit apparaître au dessus, plus le chiffre est grand plus la balise est dessus. 2 pour header et 1 pour section */
	/*background-color: blue;	*/
}

#apropos:target																				/* target cible de l'ancre apropos */
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */
	margin-top: -100px;																		/* Lorsque l'on navigue dans les menus et l'on revient sur le menu à propos, il reste le top de 100px appliqué sur le bloc absolute */
}

#competences:target																			/* target cible de l'ancre competences */
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */

}

#experiences:target																			/* target cible de l'ancre experiences */
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */
}
	
#formations:target																			/* target cible de l'ancre formations */
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */
}
	
#interets:target																			/* target cible de l'ancre interets*/
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */
}
	
#contacts:target																			/* target cible de l'ancre contacts */
{
	padding-top: 100px;																		/* Marge intérieure par rapport au bord du navigateur */
}
		
section h1
{
	font-size: 1.6em;																		/* Taille de la police */
	font-weight: bold;																		/* Avec font-size à 1.6em cela apparait en gras, on revient à la normale avec cette option */ 
	color: #334455;																			/* Couleur police gris foncé */
	margin: 0 0 0 30px;																		/* Taille de la marge Haut, Droite, Bas, Gauche */
}

/* Général */
.titre_menu
{
	display: flex;																			/* Les blocs div et h1 du conteneur formations se placent l'un à côté de l'autre */ 
    align-items: center;																	/* Les blocs div et h1 s'alignent par le centre */
	background: url('../images/separationgc.png') repeat-x bottom;							/* L'image se répète horizontalement */
}

.date
{
	flex: 0.9;																				/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin-top: 10px;																		/* Marge extérieure des 3 blocs flex */
	padding-top: 20px;																		/* Alignement de la date avec le texte du bloc corps */
	/*background-color: green;*/
}

.logo
{
	flex: 0.4;																				/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin-top: 10px;																		/* Marge extérieure des 3 blocs flex */
	padding-top: 20px;																		/* Alignement du logo avec le texte du bloc corps */
	display: flex;																			/* Les éléménts du bloc logo deviennent flottants */
	flex-direction: column;																	/* Les éléments du bloc logo se placent l'un en dessous de l'autre */
	/*background-color: blue;*/
}

.separationl
{
	width: 7px;																				/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo sinon ce code non présent on n'arrive pas à centrer cette image */
	background: url('../images/separationl.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	flex-grow: 1;																			/* Etends jusqu'en bas du bloc logo */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

.corps
{
	flex: 3;																				/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin-top: 10px;																		/* Marge extérieure des 3 blocs flex */
	background-color: #d4dcde;																/* Remplissage du fond avec le gris clair modifié */
	padding: 20px 20px 14px 20px;															/* marge intérieure pour le remplissage autour des lettres du bloc corps */
	border-radius: 5px;																		/* Arrondir le fond gris */
}

.moisannee
{
	text-align: right;																		/* Le texte se place à droite du bloc: pour aligner les chiffres année */
	padding-right: 30px;																	/* Décalage à gauche de la droite */
	font-size: 0.8em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #b7c6c9;																			/* Couleur police gris clair */
	word-spacing: 10px;																		/* Espace entre le mois et l'année, il faut faire un espace dans le code HTML sinon cela ne fonctionne pas */
}

.annee
{
	font-size: 2.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #33639c;																			/* Couleur police en bleu */
	vertical-align: sub;																	/* Aligne le mois avec l'année */
}

.fonction
{
	font-size: 1.5em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #334455;																			/* Couleur police gris foncé */
	padding: 0 0 3px 0;																		/* Espace entre le bloc fonction et le bloc lieu */
}

.lieu1
{
	font-size: 1.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #c92a39;																			/* Couleur police en rouge */
	background: url('../images/separationgf.png') repeat-x bottom;							/* L'image se répète horizontalement */
	padding: 0 0 8px 0;																		/* Expace entre le bloc lieu et le trait de séparation de 8px*/																
}

.lieu2
{
	font-size: 1.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #c92a39;																			/* Couleur police en rouge */
	background: url('../images/separationgf.png') repeat-x bottom;							/* L'image se répète horizontalement */
	padding: 10px 0 8px 0;																	/* Expace entre le bloc lieu et le trait de séparation de 8px, séparation de 10px entre la séparation et le texte */																
}

ol.puce
{
	font-size: 0.8em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #334455;																			/* Couleur police gris foncé */
	padding: 0 0 0 20px;																	/* Expace 0px entre les blocs p et 20px avec le bord gauche du bloc corps */																
	list-style-type: circle;																/* Puce ronde devant les textes */
	margin: -10px 0 0 0;
}

li
{
	margin-bottom: 4px;																		/* Sépare les lignes texte de 4px pour les puces */
}

.fleche_bulle
{
	width: 12px;																			/* Largeur du bloc bulle */
	height: 20px;																			/* Hauteur du bloc bulle */
	background: url('../images/bulle.png') no-repeat;										/* Image bulle */
	position: relative;																		/* Position relative par rapport au bloc où l'image se trouve */	
	top: -48px;																				/* Décalage de -48 px vers le haut du bloc */
	left: -32px;																			/* Décalage de -32 px vers la gauche du bloc */
}

.space
{
	height: 20px;																			/* Espace de 20px entre par exemple sous chapitre Microsoft et Linux */
}

/* À propos */
#apropos
{
	margin: 0 0 100px 0;																	/* Marge de 100px entre chaque Menu */
}

#logo_apropos_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/aproposm.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#paragraphe
{
	padding-top: 70px;																		/* Décale de 70px par rapport au paragraphe A propos */
	width: 900px;																			/* Largeur du paragraphe */
	margin-left: auto;																		/* Centrage du bloc */
	margin-right: auto;																		/* Centrage du bloc */
}

p
{
	padding-top: 10px;																		/* Espace de 10px entre les blocs p */
	text-align: justify;																	/* Justifie le texte */
	font-size: 1.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #334455;																			/* Couleur de la police */
}

/* Compétences */
#competences
{
	margin: 0 0 100px 0;																	/* Marge de 100px entre chaque Menu */
}

#logo_competences_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/competencesm.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#systemes
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_systemes
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/systemescg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_systemes:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/systemescr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#reseaux
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_reseaux
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/reseauxcg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_reseaux:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/reseauxcr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#securite
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_securite
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/securitecg.png') no-repeat;						/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_securite:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/securitecr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#telephonie
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_telephonie
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/telephoniecg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_telephonie:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/telephoniecr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#support
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_support
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/supportcg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_support:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/supportcr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#supervision
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_supervision
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/supervisioncg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_supervision:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/supervisioncr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#applications
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_applications
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/applicationscg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_applications:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/applicationscr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#web
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_web
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/webcg.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_web:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/webcr.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#developpement
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_developpement
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/developpementcg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_developpement:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/developpementcr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#bureautique
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_bureautique
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/bureautiquecg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_bureautique:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/bureautiquecr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#administratif
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_administratif
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/administratifcg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_administratif:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/administratifcr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#photographie
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_competences_photographie
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/photographiecg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_competences_photographie:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/photographiecr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

/* Expériences */
#experiences
{
	margin: 0 0 100px 0;																	/* Marge de 100px entre chaque Menu */
}

#logo_experiences_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/experiencesm.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#premiereligne
{
	display: flex;																			/* Les blocs de chaque ligne se mettent l'un à côté de l'autre */
}

#cdg
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc cdg59 */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc cdg59 */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc cdg59 */
	border: 2px solid #334455;																/* Bordure autour du bloc cdg59 en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc cdg59 */
	/*background-color: green;*/
}

#deuxiemeligne
{
	display: flex;																			/* Les blocs de chaque ligne se mettent l'un à côté de l'autre */
}

#abej
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc abej */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc abej */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc abej */
	border: 2px solid #334455;																/* Bordure autour du bloc abej en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc abej */
	/*background-color: green;*/
}

.fonction_experiences
{
	font-size: 1.5em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #334455;																			/* Couleur police gris foncé */
	padding: 10px 0 3px 0;																	/* Espace entre le bloc fonction_experiences et le bloc titre_experiences */
}

.titre_experiences
{
	font-size: 1.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #c92a39;																			/* Couleur police en rouge */
	background: url('../images/separationgf.png') repeat-x bottom;							/* L'image se répète horizontalement */
	padding: 0 0 8px 0;																		/* Espace entre titre_experiences et la séparation */
}

.moisannee_experiences
{
	font-size: 0.8em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #b7c6c9;																			/* Couleur police gris clair */
	word-spacing: 10px;																		/* Espace entre le mois et l'année, il faut faire un espace dans le code HTML sinon cela ne fonctionne pas */
	margin: 5px 0 5px 0;
}

.annee_experiences
{
	font-size: 1.8em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #33639c;																			/* Couleur police en bleu*/
	vertical-align: sub;																	/* Aligne le mois avec l'année */
}

#departement
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc departement */
	margin: 20px 8px 10px 8px;																/* Marge extérieure tout autour du bloc departement Ici on met 8px pour ne pas faire sortir les 3 blocs flex de la largeur de 1200px */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc departement */
	border: 2px solid #334455;																/* Bordure autour du bloc departement en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc departement */
	/*background-color: yellow;*/
}

#pictime
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc pictime */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc pictime */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc pictime */
	border: 2px solid #334455;																/* Bordure autour du bloc pictime en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc pictime */
	/*background-color: blue;*/
}

#troisiemeligne
{
	display: flex;																			/* Les blocs de chaque ligne se mettent l'un à côté de l'autre */
}

#toyotomi
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc toyotomi */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc toyotomi */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc toyotomi */
	border: 2px solid #334455;																/* Bordure autour du bloc toyotomi en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc toyotomi */
	/*background-color: blue;*/
}

#orange
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc orange */
	margin: 20px 8px 10px 8px;																/* Marge extérieure tout autour du bloc orange Ici on met 8px pour ne pas faire sortir les 3 blocs flex de la largeur de 1200px */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc orange */
	border: 2px solid #334455;																/* Bordure autour du bloc orange en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc orange */
	/*background-color: yellow;*/
}

#uvhc
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc uvhc */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc uvhc */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc uvhc */
	border: 2px solid #334455;																/* Bordure autour du bloc uvhc en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc uvhc */
	/*background-color: blue;*/
}

#quatriemeligne
{
	display: flex;																			/* Les blocs de chaque ligne se mettent l'un à côté de l'autre */
}

#lyreco
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc lyreco */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc lyreco */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc lyreco */
	border: 2px solid #334455;																/* Bordure autour du bloc lyreco en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc lyreco */
	/*background-color: blue;*/
}

#rodier
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc rodier */
	margin: 20px 8px 10px 8px;																/* Marge extérieure tout autour du bloc rodier Ici on met 8px pour ne pas faire sortir les 3 blocs flex de la largeur de 1200px */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc rodier */
	border: 2px solid #334455;																/* Bordure autour du bloc rodier en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc rodier */
	/*background-color: yellow;*/
}

#norauto
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc norauto */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc norauto */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc norauto */
	border: 2px solid #334455;																/* Bordure autour du bloc norauto en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc norauto */
	/*background-color: blue;*/
}

/*#cinquiemeligne
{
	display: flex;																			Les blocs de chaque ligne se mettent l'un à côté de l'autre 
}*/

#ami
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc ami */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc ami */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc ami */
	border: 2px solid #334455;																/* Bordure autour du bloc ami en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc ami */
	/*background-color: blue;*/
}

#armee
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc armee */
	margin: 20px 8px 10px 8px;																/* Marge extérieure tout autour du bloc armee Ici on met 8px pour ne pas faire sortir les 3 blocs flex de la largeur de 1200px */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc armee */
	border: 2px solid #334455;																/* Bordure autour du bloc armee en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc armee */
	/*background-color: yellow;*/
}

#laposte
{
	flex: 1;																				/* Les 3 blocs de chaque ligne prennent la même taille de 1 */
	text-align: center;																		/* Alignement des blocs à l'intérieur du bloc laposte */
	margin: 20px 0 10px 0;																	/* Marge extérieure tout autour du bloc laposte */
	padding: 0 20px 0 20px;																	/* Marge intérieure tout autour du bloc laposte */
	border: 2px solid #334455;																/* Bordure autour du bloc laposte en gris foncé */
	border-radius: 5px;																		/* Arrondu aux quatres coins du bloc laposte */
	/*background-color: blue;*/
}

/* Formations */
#formations
{
	margin: 0 0 100px 0;																	/* Marge de 100px entre chaque Menu */
}

#logo_formations_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/formationsm.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#licence
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_formations_licence
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/licencecg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_formations_licence:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/licencecr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#iut
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_formations_iut
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/iutcg.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_formations_iut:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/iutcr.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

/* Intérêts */
#interets
{
	margin: 0 0 100px 0;																	/* Marge de 100px entre chaque Menu */
}

#logo_interets_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/interetsm.png') no-repeat;		 							/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#sport
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#autresdates
{
	font-size: 2.1em;																		/* Taille de la police */
	font-weight: normal;																	/* Police normal, non gras */ 
	color: #33639c;																			/* Couleur police en bleu */
	vertical-align: sub;																	/* Aligne le mois avec l'année */
}
	
#logo_interets_sport
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/sportcg.png') no-repeat;				 						/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_interets_sport:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/sportcr.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#photo
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_interets_photo
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/photographiecg.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_interets_photo:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/photographiecr.png') no-repeat;								/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#athletisme
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_interets_athletisme
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/athletismecg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_interets_athletisme:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/athletismecr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

/* Contacts */
#logo_contacts_titre
{
	width: 40px;																			/* Largeur du bloc logo */
	height: 40px;																			/* Hauteur du bloc logo */
	background: url('../logos/contactsm.png') no-repeat;		 							/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	margin: 0 0 5px 0;																		/* Taille de la marge Bas 5px en dessous du titre des chapitres */ 
}

#telephone
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_contacts_telephone
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/smartphonecg.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_contacts_telephone:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/smartphonecr.png') no-repeat;									/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

#corps_contacts
{
	flex: 3;																				/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin-top: 28px;																		/* Marge extérieure des blocs contacts */
	background-color: #d4dcde;																/* Remplissage du fond avec le gris clair modifié */
	padding: 10px 20px 14px 20px;															/* marge intérieure pour le remplissage autour des lettres du bloc corps */
	border-radius: 5px;																		/* Arrondir le fond gris */
}

#fleche_bulle_contacts
{
	width: 12px;																			/* Largeur du bloc bulle */
	height: 20px;																			/* Hauteur du bloc bulle */
	background: url('../images/bulle.png') no-repeat;										/* Image bulle */
	position: relative;																		/* Position relative par rapport au bloc où l'image se trouve */	
	top: 8px;																				/* Décalage de +8 px vers le haut du bloc */
	left: -32px;																			/* Décalage de -32 px vers la gauche du bloc */
}

#mail
{
	display: flex;																			/* Les blocs date, logo et corps se placent l'un à côté de l'autre */
	margin: 0 0 20px 0;																		/* Marge de 20px en-dessous de chaque bloc corps à ajouter au 100px des blocs Menu */
}

#logo_contacts_mail
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/mailcg.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
	border-radius: 40px 40px 40px 40px;														/* Suppression des 4 coins de l'image pour l'action du bloc hover qu'au niveau du logo avec la souris */
	margin-left: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
	margin-right: auto;																		/* Marge automatique à gauche et à droite du bloc pour le centrer */ 
}

#logo_contacts_mail:hover
{
	width: 50px;																			/* Largeur du bloc logo */
	height: 50px;																			/* Hauteur du bloc logo */
	background: url('../logos/mailcr.png') no-repeat;										/* Image de fond dans ce bloc, 1 seule sans être répétée */
	background-size: cover;																	/* Image redimensionnée à la taille du bloc et gardant les proportions */
}

/* Footer */
footer
{
	height: 3840px;																			/* Espace en bas de la page pour remonter les menus interets et contacts lorque l'on clique dessus */
}																							/* Les écrans résolution 1280 à 1920 en largeur peuvent avoir en résolution hauteur maximum de 3840 */

@media all and (min-width: 960px) and (max-width: 1280px)									/* je commente uniquement les lignes que je modifie */
{
	#bloc_page
	{
		width: 920px;																		/* De 1200px à 920px */																																						
		margin: auto;																			
	}
	header
	{
		background: url('../images/separationgc.png') repeat-x bottom;					
		display: flex;																			
		justify-content: space-between;															
		align-items: center;																	
		position: fixed;																		
		width: 920px;																		/* De 1200px à 920px */																		
		top: 0px;																				
		z-index: 2;																				
		background-color: #ffffff;																
	}
	#prenomnom
	{
		display: flex;																			
		margin: 0 0 0 0;																	/* Marge gauche passe 50px à 0px */															
	}
	#job
	{
		display: flex;																			
		margin: 0 0 0 0;																	/* Marge gauche passe 96px à 0px */	
		padding: 0 0 0 30px;																/* Déplacement sur la droite du bloc job (informaticien) */
	}
	header h1
	{
		font-family: 'WindsongRegular', Arial, sans-serif;
		font-size: 2em;																		/* Taille de la police passe 2.5em à 2em */
		font-weight: normal;																	
		margin: 10px 0 0 10px;																	
	}

	header h2
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-size: 0.7em;
		font-weight: bold;																		
		margin: 0 0 0 8px;																	/* Marge gauche passe 2px à 8px */																		
		color: #c92a39;																			
	}
	nav a 
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-weight: normal;																	
		text-transform: uppercase;																
		font-size: 0.9em;																	/* Taille de la police passe 1.1em à 0.9em */																	
		color: #b7c6c9;																			
		text-decoration: none;																	
		font-weight: bold;																		
	}
	#absolute
	{
		position: absolute;																		
		top: 100px;																				
		width: 920px;																		/* De 1200px à 920px */																		
		z-index: 1;																				
		/*background-color: blue;	*/
	}
	footer
	{
		height: 2560px;																		/* Les écrans résolution 960 à 1279 en largeur peuvent avoir en résolution hauteur maximum de 2560 */																		
	}
}

@media all and (min-width: 1921px) and (max-width: 2559px)									/* je commente uniquement les lignes que je modifie */
{
	#bloc_page
	{
		width: 1800px;																		/* De 1200px à 1800px */																																						
		margin: auto;																			
	}
	header
	{
		background: url('../images/separationgc.png') repeat-x bottom;					
		display: flex;																			
		justify-content: space-between;															
		align-items: center;																	
		position: fixed;																		
		width: 1800px;																		/* De 1200px à 1800px */																		
		top: 0px;																				
		z-index: 2;																				
		background-color: #ffffff;																
	}
	nav a 
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-weight: normal;																	
		text-transform: uppercase;																
		font-size: 1.3em;																	/* Taille de la police passe 1.1em à 1.3em */																	
		color: #b7c6c9;																			
		text-decoration: none;																	
		font-weight: bold;																		
	}
	#absolute
	{
		position: absolute;																		
		top: 100px;																				
		width: 1800px;																		/* De 1200px à 1800px */																		
		z-index: 1;																				
		/*background-color: blue;	*/
	}
	footer
	{
		height: 3840px;																		/* Les écrans résolution 1921 à 2559 en largeur peuvent avoir en résolution hauteur maximum de 3840 */																		
	}
}

@media all and (min-width: 2560px)															/* je commente uniquement les lignes que je modifie */
{
	#bloc_page
	{
		width: 2400px;																		/* De 1200px à 2400px */																																						
		margin: auto;																			
	}
	header
	{
		background: url('../images/separationgc.png') repeat-x bottom;					
		display: flex;																			
		justify-content: space-between;															
		align-items: center;																	
		position: fixed;																		
		width: 2400px;																		/* De 1200px à 2400px */																		
		top: 0px;																				
		z-index: 2;																				
		background-color: #ffffff;																
	}
	nav a 
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-weight: normal;																	
		text-transform: uppercase;																
		font-size: 1.5em;																	/* Taille de la police passe 1.1em à 1.3em */																	
		color: #b7c6c9;																			
		text-decoration: none;																	
		font-weight: bold;																		
	}
	#absolute
	{
		position: absolute;																		
		top: 100px;																				
		width: 2400px;																		/* De 1200px à 2400px */																		
		z-index: 1;																				
		/*background-color: blue;*/
	}
	footer
	{
		height: 3840px;																		/* Les écrans résolution supérieur à 2560 en largeur peuvent avoir en résolution hauteur maximum de 3840 */																		
	}
}

@media all and (min-width: 640px) and (max-width: 959px)									/* je commente uniquement les lignes que je modifie */
{
	#bloc_page
	{
		width: 600px;																		/* De 1200px à 600px */																																						
		margin: auto;																			
	}
	header
	{
		background: url('../images/separationgc.png') repeat-x bottom;				
		display: flex;																		
		flex-direction: column;																/* Le menu passe en dessous du logo car si on supprime le flex le menu  ne repasse pas en dessous du logo */														
		position: fixed;																	
		width: 600px;																		/* De 1200px à 600px */																	
		top: 0px;																			
		z-index: 2;																			
		background-color: #ffffff;															
		/*background-color: blue;	*/														
	}
	#prenomnom
	{
		display: flex;																			
		margin: 0 0 0 0;																	/* Marge gauche passe 50px à 0px */															
	}
	#job
	{
		display: flex;																			
		margin: 0 0 0 0;																	/* Marge gauche passe 96px à 0px */		
		padding: 0 0 0 30px;																/* Déplacement sur la droite du bloc job (informaticien) */
	}
	header h1
	{
		font-family: 'WindsongRegular', Arial, sans-serif;
		font-size: 2em;																		/* Taille de la police passe 2.5em à 2em */
		font-weight: normal;																	
		margin: 10px 0 0 10px;																	
	}

	header h2
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-size: 0.7em;
		font-weight: bold;																		
		margin: 0 0 0 8px;																	/* Marge gauche passe 2px à 8px */																		
		color: #c92a39;																			
	}
	nav a 
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-weight: normal;																	
		text-transform: uppercase;																
		font-size: 0.8em;																	/* Taille de la police passe 1.1em à 0.8em */																	
		color: #b7c6c9;																			
		text-decoration: none;																	
		font-weight: bold;																		
	}
	#absolute
	{
		position: absolute;																		
		top: 156px;																				
		width: 600px;																		/* De 1200px à 600px */																		
		z-index: 1;																				
		/*background-color: blue;*/
	}	
	#apropos:target																			
	{
		padding-top: 156px;																		
		margin-top: -156px;																		
	}

	#competences:target																			
	{
		padding-top: 156px;																		

	}

	#experiences:target																			
	{
		padding-top: 156px;																		
	}
		
	#formations:target																			
	{
		padding-top: 156px;																		
	}
		
	#interets:target																			
	{
		padding-top: 156px;																		
	}
		
	#contacts:target																			
	{
		padding-top: 156px;																		
	}
	#apropos
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#paragraphe
	{
		padding-top: 20px;																		/* Décale par rapport au paragraphe A propos passe 70px à 20px */
		width: 580px;																			/* Largeur du paragraphe passe de 900px à 580px */
		margin-left: auto;																		
		margin-right: auto;																		
	}
	.date
	{
		flex: 0;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																			
	}
	.logo
	{
		flex: 0;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																			
	}
	.separationl
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	.corps
	{
		flex: 1;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																		
		margin-top: 2px;																		/* La marge extérieure entre les blocs est réduite au maximum passe de 10px à 2px */
		background-color: #d4dcde;																
		padding: 20px 20px 14px 20px;															
		border-radius: 5px;																		
	}
	.fleche_bulle
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#competences
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_competences_systemes
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_reseaux
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_securite
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_telephonie
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_support
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_supervision
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_applications
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_web
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_developpement
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_bureautique
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_administratif
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_photographie
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#experiences
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#premiereligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#deuxiemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#troisiemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#quatriemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#abej
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#departement
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#pictime
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#toyotomi
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#orange
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */																
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#uvhc
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#lyreco
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#rodier
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */																
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#norauto
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#ami
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#armee
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */															
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#laposte
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 20px 0 20px;																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#formations
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_formations_licence
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#logo_formations_iut
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}	
	#interets
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_interets_sport
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_interets_photo
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_interets_athletisme
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#autresdates
	{
		font-size: 1.6em;																		/* passe de 2.1em à 1.6 em pour aligner les blocs interest */																																
		font-weight: normal;																	
		color: #c92a39;																			
		vertical-align: sub;																	
	}
	#telephone
	{
		display: flex;
		margin: 0 0 0 0;																		/* Marge en dessous passe de 20px à 0px */
	}
	#logo_contacts_telephone
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#logo_contacts_mail
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#fleche_bulle_contacts
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	footer
	{
		height: 1920px;																			/* Les écrans résolution 640 à 959 en largeur peuvent avoir en résolution hauteur maximum de 1920 */																		
	}
}

@media all and (min-width: 318px) and (max-width: 639px)										/* je commente uniquement les lignes que je modifie */
{
	#bloc_page
	{
		width: 280px;																			/* De 1200px à 280px */																																						
		margin: auto;																			
	}
	header
	{
		background: url('../images/separationgc.png') repeat-x bottom;				
		display: flex;																		
		flex-direction: column;																	/* Le menu passe en dessous du logo car si on supprime le flex le menu  ne repasse pas en dessous du logo */														
		position: fixed;																	
		width: 280px;																			/* De 1200px à 280px */																	
		top: 0px;																				
		z-index: 2;																			
		background-color: #ffffff;															
		/*background-color: blue;	*/														
	}
	#prenomnom
	{
		display: flex;																			
		margin: 0 0 0 0;																		/* Marge gauche passe 50px à 0px */															
	}
	#job
	{
		display: flex;																			
		margin: 0 0 0 0;																		/* Marge gauche passe 96px à 0px */	
		padding: 0 0 0 30px;																	/* Déplacement sur la droite du bloc job (informaticien) */
	}
	header h1
	{
		font-family: 'WindsongRegular', Arial, sans-serif;
		font-size: 2em;																			/* Taille de la police passe 2.5em à 2em */
		font-weight: normal;																	
		margin: 10px 0 0 10px;																	
	}

	header h2
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-size: 0.7em;
		font-weight: bold;																		
		margin: 0 0 0 8px;																		/* Marge gauche passe 2px à 8px */																		
		color: #c92a39;																			
	}
	nav
	{
		display: flex;																			/* Les blocs ul et ol se placent l'un à côté de l'autre */																																
		flex-direction: column;
		/*background-color: red;*/
	}

	nav ul
	{
		list-style-type: none;																	/* Suppression des puces */														
		display: flex;																			/* Les blocs li se placent l'un à côté de l'autre */
		justify-content: space-between;															/* Ecarte les blocs sur toute la largeur */
		margin: 0 0 0 0;																		/* Les blocs ul et ol sont fort séparés */
		padding: 0 0 0 0;																		/* Les blocs ul et ol sont fort séparés */
		/*background-color: blue;*/
	}

	nav ol
	{
		list-style-type: none;																	/* Suppression des puces */														
		display: flex;																			/* Les blocs li se placent l'un à côté de l'autre */														
		justify-content: space-between;
		margin: 0 0 6px 0;																		/* Les blocs ul et ol sont fort séparés, 6px avec la barre de séparation */
		padding: 0 0 0 0;																		/* Les blocs ul et ol sont fort séparés */
		/*background-color: yellow;*/
	}

	nav li
	{
		margin-right: 20px;																		/* 20px entre les blocs li Menu */
	}
	
	nav li:nth-child(3)
	{
		margin-right: 0;																		/* 0px à droite sur le 3ième li Menu */
	}
	
	nav a 
	{
		font-family: 'AmbleRegular', Arial, sans-serif;
		font-weight: normal;																	/* Police normal, non gras */
		text-transform: uppercase;																/* En majuscules */
		font-size: 0.7em;																		/* Taille de la police */
		color: #b7c6c9;																			/* Notre couleur gris clair */
		text-decoration: none;																	/* Suppression du trait sous le texte */
		font-weight: bold;																		/* En gras */	
	}
	#absolute
	{
		position: absolute;																		
		top: 154px;																				/* Passe de 100px à 154px */																		
		width: 280px;																			/* De 1200px à 280px */																		
		z-index: 1;																				
		/*background-color: blue;*/
	}	
	#apropos:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */															
		margin-top: -154px;																		
	}
	#competences:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */																

	}
	#experiences:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */																
	}
	#formations:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */																	
	}
	#interets:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */																
	}
	#contacts:target																			
	{
		padding-top: 154px;																		/* Passe de 100px à 154px */																
	}
	#apropos
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#paragraphe
	{
		padding-top: 20px;																		/* Décale par rapport au paragraphe A propos passe 70px à 20px */
		width: 280px;																			/* Largeur du paragraphe passe de 900px à 300px */
		margin-left: auto;																		
		margin-right: auto;																		
	}
	.date
	{
		flex: 0;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																			
	}
	.logo
	{
		flex: 0;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																			
	}
	.separationl
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	.corps
	{
		flex: 1;																				/* flex 0 pour date et logo, flex 1 pour corps; le but est de masquer date et logo */																		
		margin-top: 2px;																		/* La marge extérieure entre les blocs est réduite au maximum passe de 10px à 2px */
		background-color: #d4dcde;																
		padding: 20px 18px 14px 18px;															/* les marges passent de 20px 20px 14px 20px à 20px 18px 14px 18px sinon les marges de formations débordent légèrement */
		border-radius: 5px;																		
	}
	.fleche_bulle
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#competences
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_competences_systemes
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_reseaux
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_securite
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_telephonie
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_support
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_supervision
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_applications
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_web
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_developpement
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_bureautique
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_administratif
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_competences_photographie
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#experiences
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#premiereligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#deuxiemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#troisiemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#quatriemeligne
	{
		display: flex;																			
		flex-direction: column;																	/* Mets les blocs expériences l'un en dessous de l'autre */
	}
	#abej
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */	
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#departement
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#pictime
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#toyotomi
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */																
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#orange
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */																
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#uvhc
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#lyreco
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#rodier
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */																
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#norauto
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#ami
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#armee
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */															
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#laposte
	{
		flex: 1;																				
		text-align: center;																		
		margin: 5px 0 10px 0;																	/* Pour conserver la même largeur des blocs expériences on passe margin de 20px 8px 10px 8px à 5px 0 10px 0 et 5px au dessus de chaque bloc */														
		padding: 10px 10px 0 10px;																/* Les marges passent de 10px 20px 0 20px à 10px 10px 0 10px car il n'y a pas assez de place autour des logos entreprises */															
		border: 2px solid #334455;																
		border-radius: 5px;																		
		/*background-color: yellow;*/
	}
	#formations
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_formations_licence
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#logo_formations_iut
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}	
	#interets
	{
		margin: 0 0 50px 0;																		/* Marge entre chaque Menu passe de 100px à 50px */
	}
	#logo_interets_sport
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_interets_photo
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#logo_interets_athletisme
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */																		
	}
	#autresdates
	{
		font-size: 1.6em;																		/* passe de 2.1em à 1.6 em pour aligner les blocs interest */																																
		font-weight: normal;																	
		color: #c92a39;																			
		vertical-align: sub;																	
	}
	#telephone
	{
		display: flex;
		margin: 0 0 0 0;																		/* Marge en dessous passe de 20px à 0px */
	}
	#logo_contacts_telephone
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#logo_contacts_mail
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	#fleche_bulle_contacts
	{
		width: 0px;																				/* les images ne disparaisent pas avec un flex 0, il faut réduire la largeur du bloc à 0 */	
	}
	footer
	{
		height: 1280px;																			/* Les écrans résolution 318 à 639 en largeur peuvent avoir en résolution hauteur de maximum 1280 */																		
	}
}