@charset "utf-8";

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

/* Polices */

body {
	font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    sans-serif;
}

/* Mise en page */

body {
	width: auto;
	margin: 0;
	padding: 0;
 	background: black;
}

#en-tete, #menu, #contenu, #pied-de-page {
	margin: 0 auto;
	max-width: 45em;
	padding: 1.5em; /* 45 - (2 × 1.5) = 38 em pour 80 caractères environ */
	color: #ddd;
}

#en-tete {background-color: #222;}
#menu {background-color: #333;}
#contenu {background-color: #222;}
#pied-de-page {background-color: #333;}

table {
	width: 100%;
}

table, th, td {
	border: .25em solid #ddd;
	 border-collapse: collapse;
	color:#ddd;
}

th, td {
	padding: 1em;
}

/* Titres */

h1, h2, h3, h4, h5, h6 {
	/* font-family: Arial, sans-serif; */
}

/* Paragraphes */

p {
	margin: 1.5em 0;
	font-size: 1em;
	line-height: 1.5;
}

figure {
	margin: 1.5em 0;
	padding: 0;
}

figcaption {
	margin-top: .25em;
}

/* Listes */

ul, ol {
	margin: 0;
	padding: 0 0 0 1em;
	list-style-position: inside;
}

ul {list-style: disc;}
ol {list-style: decimal;}

ul li, ol li {margin: 1em 0 1em 0;}

/* Sup et Sub */

sup, sub {
	vertical-align: baseline;
	position: relative;
}

sup {
	top: -0.4em;
}

sub {
	top: 0.4em;
}

/* Liens */

a {
	outline: none;
	text-decoration: none;
	padding-bottom: .0625em;
	border-bottom: .0625em solid;
}

a:link {color: #ddd;}

a:visited {color: #ddd;}

a:focus {
	color: #222;
	background: #ddd;
}

a:hover {}

a:active {}

/* Justification et césure */

.justif {
	text-align: justify;
	text-justify: auto;
	word-break: normal; /* normal | break-all | keep-all */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Césure */
textarea, table, td, th, code, pre, samp {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Eviter le débordement des images */

img {
	max-width: 100%;
	height: auto;
}

/* Petits écrans */

@media screen and (max-width: 640px) {

	/* Indication */

	body:before {
		content: "@media screen and (max-width: 640px)";
		display: block;
		text-align: center;
		font-style: normal;
		color: #ff0;
	}

	/* Éviter les débordements */

	table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
		max-width: 100%;
	}

	/* Gestion des espaces pour les éléments à chasse fixe */

	code, pre, samp {
		white-space: pre-wrap;
	}

}