/*************************************************************************************************************************************************/
/*1 reinitialisation******************************************************************************************************************************/
/*************************************************************************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, q:before {
	content: '«' ;
	content: none;
}
blockquote:after, q:after {
	content: '»' ;
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*************************************************************************************************************************************************/
/* 2 Typographie, couleur et espacement général à toutes mes pages HTML***************************************************************************/
/*************************************************************************************************************************************************/

body{
	color:#203250;  /* bleue fonçé */
	background-color:orange;
	font-family:"EB Garamond", serif;
/***font-family:"Roboto Serif", serif;***/
/***font-family:"Montserrat", sans-serif;***/	
	font-size:100%;
	letter-spacing:0.08em;
	line-height:1.5;
}



input,textarea,button { font-family:"Montserrat", sans-serif;}

h1	{ font-family:"Roboto Serif", serif;
	  text-transform:uppercase;
	  color:#203250;  /* bleue fonçé */ 
	  text-align:center;
}
h2	{ font-family:"Roboto Serif", serif;
	  text-transform:uppercase;
	  color:#203250;  /* bleue fonçé */
}


h3,h4,h5,h6 { font-family:"Montserrat", sans-serif;
			  text-transform:uppercase;
			  color:#203250;  /* bleue fonçé */
 }
 
p { font-family: "EB Garamond", serif; 
	color:#203250;  /* bleue fonçé */
}



h1,h2,h3,h4,h5,h6 {
	margin-top:1.5em;
	margin-bottom:1em;
	font-weight:bold;
	letter-spacing:0.15em;
}

h1	{font-size:2em;
     font-weight:500;
 }

h2 {
	font-size:1.5em;
	letter-spacing:0.05em;
	font-weight:500;
}
p {
	font-size:1.em;
	letter-spacing:0.05em;
	font-weight:500;
}
ul,li { 
	font-family: "EB Garamond", serif; 
	color:#203250;  /* bleue fonçé */
}

dl,dt,dd {
	font-family: "EB Garamond", serif; 
	color:#203250;  /* bleue fonçé */
}

aside h2 {
	font-family:font-family:"EB Garamond", serif;
	font-size: 1.5em;
	font-weight:bold;
}

aside h3 {font-family:"EB Garamond", serif;
	font-size: 1em;
	font-variant:small-caps;
	color:#203250;  /* bleue fonçé */
}
    
aside p  { 
	font-family:'EB Garamond', serif;
	font-size: 1em;
	line-height:1.5em;
	letter-spacing:0.05em;
	color:#203250;                         /* bleue fonçé */
}

footer p {
	font-family:"Montserrat", sans-serif;
	color:#203250;  /* bleue fonçé */
	font-size: 1em; /* Taille de la police pour le paragraphe */
    line-height: 1.5; /* Espacement entre les lignes */
}
header p {
	font-family:"Montserrat", sans-serif;
	color:white;  /* Blanc */
	font-size: 1em; /* Taille de la police pour le paragraphe */
    line-height: 1.5; /* Espacement entre les lignes */
}
header h2 {
	font-family:"Roboto Serif", serif;
	color:white;  /* blanc */
	font-size: 1.5em; /* Taille de la police pour le paragraphe */
    line-height: 1.5; /* Espacement entre les lignes */
}


figcaption {
	font-family:'EB Garamond', serif;
	font-size:1em;
	padding-top:1em;
	padding-bottom:0em;
	color:#203250;                         /* bleue fonçé */
}
	

/* q:before,blockquote:before { */
	/* content:"«" */
/* } */
/* q:after,blockquote:after { */
	/* content:"»" */
/* } */

strong { font-weight:700 }
em { font-style : italic }
q { 
    color:white;
	font-family:'EB Garamond', serif;
	font-size:1.5em;	
 }

blockquote, blockquote>p { 
	font-family:'EB Garamond', serif;
	font-size:0.8em;
	color:#D46610;							/* orange */
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}
blockquote {
	padding-top:1em;
	padding-bottom:0em;
	color:lightgray;
	font-size:1.4em;
	text-align:justify;
	margin:auto;
}

a,a:visited,a:active {
	color:#B81121 ; /*rouge*/
	text-decoration:none;/*Pour ne pas avoir des liens soulignés*/
	font-size:.0.5em;
}

a:hover {
	color:#white;
	text-decoration:underline;/*Pour avoir des liens soulignés*/
	font-size:.0.5em;
}
	


header nav a, a {
	font-family:"Montserrat", sans-serif;
	font-size:.0.5em;
}
header nav a:link,
header nav a:visited {
	color:white
}
header nav a:hover {
	color:#B81121 ; /*rouge*/
	text-decoration:none	
}
header a:link,
header a:visited {
	color:#B81121 ; /*rouge*/
}
header nav a:hover {
	color:white
	text-decoration:none	
}

footer nav a {
	font-size:1em;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5; 
}
footer nav a:link,
footer nav a:visited {
	color:white
	
}
footer nav a:hover {
	color:#B81121 ; /*rouge*/
	text-decoration:none	
}

/* Spécifique à l'élément <address> */
footer address p {
    color: #FFFFFF; /* Définit la couleur du texte de l'adresse en blanc */
    font-family: "Montserrat", sans-serif; /* Assure que l'adresse utilise la même police que le reste du footer */
    font-size: 1em; /* Taille du texte dans l'adresse */
    line-height: 1.5; /* Espacement entre les lignes dans l'adresse */
}

/* COULEURS DE STRUCTURE */


header {
	background-color:#203250                         /* bleue fonçé */;
	color:#FFFFFF
}
footer {
	background-color:                         ;     /* footer section 1*/;
	color: ;
}
footer {
	background-color:                         ;      /* footer section 2*/;
	color: ;
}
footer {
	background-color:                         ;      /* footer section 3*/;
	color: ;
}

/****************************************************************************************
** Espacements **************************************************************************
*****************************************************************************************/

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main table,
main img,
main figure,
main ul,
main ol,
main blockquote {
	margin-bottom:1em; /****Marge en dessous****/
}

main li {
	margin-left:1em
}
main ol {
	list-style:upper-roman
}

main ul {
	list-style: disc;
}

main td,th { 
	border :1px solid #1E3D59;
	padding:0.5em;
}


/****CSS vidéo youtube dans vidéo.html***/
.no-border {
    border: none; /* Supprime la bordure */
}

/******Test mise en page responsive********/
body {
    border: 2px solid black;
    background-color: orange;
	color:black
    
}


/****************************************************************************************
** Classes spéciales ********************************************************************
*****************************************************************************************/

.clear {
	border:0px solid red;
	clear:both; /*empêche l’élément de se positionner à droite et à gauche d’un l’élément précédemment flotté*/
	height:0; /*pour que l'élément n'ai pas de hauteur*/
}