body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #E53B23;
}
a {	/* Liens par défaut. Tous les liens du site héritent ces propriétés. Ils sont rouges et non soulignés */
	color: #E53B23;
	text-decoration: none;
}
a:hover, a:focus {	/* Liens lors du survol de la souris ou focus pour navigation au clavier. Ils sont soulignés */
	text-decoration: underline;
}

/* Menu de navigation */
div#sidebar {	/* Conteneur principal de la barre de navigation */
	position: fixed;	/* Le menu reste fixe (sauf IE6) lors du scrolling vertical et horizontal de la page. Simulation de frames */
	left: 0px;
	top: 0px;
	width: 194px;
	height: 100%;	/* On précise une hauteur de 100% et une couleur de fond blanche pour "recouvrir" le contenu principal
					en cas de scrolling horizontal */
	background-color: #fff;
	padding-top: 36px; /* Décalage pour s'aligner avec le contenu */
	
	z-index: 1000;	/* Le menu est toujours au dessus du contenu de la page */
}
	div#sidebar img {	/* Les images n'auront pas de bordures, même si elles sont des liens hypertextes */
	border: 0;
}
	div#sidebar h1 {	/* Titre de la barre de navigation */
	margin: 0;
	padding: 6px 0 0 45px;
	height: 20px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #e95c10 url(arrow_dots_orange_small.gif) no-repeat;
	border-top: #F96 1px solid;
	border-right: #C00 1px solid;
	border-bottom: #C00 1px solid;
}
div#sidebar ul {	/* Liste des rubriques, avec bordure droite et basse, sur fond gris clair, police grasse */
	margin: 0;
	padding: 7px 0;
	background-color: #f4f4f4;
	border-right: #b1b0b0 1px solid;
	border-bottom: #b1b0b0 1px solid;
	font-weight: bold;
	list-style-type: none;
}
div#sidebar ul.home {	/* La liste des rubriques est collée au bord supérieur sur la page d'accueil */
	padding-top: 0;
}
div#sidebar li a {	/* Les liens de navigation sont des boites avec une image de fond. La hauteur de la boîte et la position de l'image
					sont liées dynamiquement au nombre de lignes de chaque lien */
	display: block;
	margin: 0;
	width: 155px;	/* Largeur obligatoire sinon IE6 interprète mal */
	padding: 5px 0 5px 35px;
	line-height: 13px;	/* Interligne pour les liens sur plusieurs lignes seulement */ 
	background: url(bull-menu.png) no-repeat 10px 50%;	/* 50% centre l'image verticalement avec le milieu de la boite,
														en fonction de sa taille */
}
div#sidebar li a:hover, div#sidebar li a:focus { /* L'image de fond change lors du survol ou du focus de la boite */
	background: url(bull-menu-hover.png) no-repeat 10px 50%;
}
div#sidebar ul.home li a {	/* L'image de fond est différente sur la page d'accueil */
	background: url(bull-home.png) no-repeat 9px 49%;
}

div#sidebar ul.home li a:hover, div#sidebar ul.home li a:focus {
	background: url(bull-home-hover.png) no-repeat 9px 49%;
}
div#sidebar ul.home li.last a {	/* Images différente pour le dernier lien de la liste (flèche coudée) */
	background: url(bull-home-last.png) no-repeat 9px 49%;
}
div#sidebar ul.home li.last a:hover, div#sidebar ul.home li.last a:focus {
	background: url(bull-home-last-hover.png) no-repeat 9px 49%;
}
div#sidebar p { /* Les paragraphes dans le menu de navigation ont un fond gris clair et des bordure droite et basse */
	margin: 0;
	padding: 7px 0;
	text-align: center;
	background-color: #f4f4f4;
	border-right: #b1b0b0 1px solid;
	border-bottom: #b1b0b0 1px solid;
}
div#sidebar p#start {	/* Sur la page d'accueil il y a un paragraphe d'introduction des rubriques. L'image de fond s'aligne avec
						les flèches des différents liens du menu */ 
	margin: 4px 0 0 0;
	padding: 7px 5px 7px 35px;
	background: #fff url(start-bg.png) no-repeat left top;	/* L'image est alignée en haut pour permettre un agrandissement dynamique
															du paragraphe en fonction du texte */
	border-top: solid 2px #e95c10;
	border-right: solid 2px #e95c10;
	border-bottom: dotted 1px #e95c10;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
}

div#sidebar p#footer-side {	/* Le lien vers www.cabri.com en bas du menu n'a pas de fond ni de bordures */
	background-color: #fff;
	border-style: none;
	}


/* Contenu général de la page */
div#content {
	position: absolute;
	width: 710px;	/* Largeur du contenu par défaut. On adaptera directment dans la balise HTML pour les cas particuliers */
	top: 0px;
	left: 204px; /* Décalage pour laisser la place du menu de gauche */
	float: left;
	background-color: #fff;
	z-index: 10;	/* Le contenu de la page passe sous le menu de navigation en cas de scrolling horizontal */
}

div#content h1 {	/* Les titres ont un fond orange, une puce d'introduction, sont en majuscule, gras et blanc */
	margin: 0;
	padding: 6px 0 0 45px;
	height: 20px;
	border-top: #FF9966 1px solid;
	border-left: #FF9966 1px solid;
	border-right: #C00 1px solid;
	border-bottom: #C00 1px solid;
	text-transform: uppercase;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	background: #e95c10 url(arrow_dots_orange_small.gif) no-repeat ;
}
div#content h2 {	/* Les sous titres sont simplement en gras */
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #000;
	font-weight: bold;
}

div#content a.home {	/* Le bandeau en haut du contenu est un lien vers l'accueil avec une image de fond */
	display: block;
	height: 36px;
	margin: 0;
	padding: 0;
	background: #fff url(top.png) no-repeat 0 0;
	border-right: #999 1px solid;
}
div#content a:hover.home, div#content a:focus.home {	/* Cette image change lors du survol ou focus */
	background-position: 0 -36px;
}
div#content ul#breadcrumb {	/* Fil d'ariane */
	margin: 0;
	font-size: 12px;
	padding: 7px 0;
	font-weight: normal;
	border: #999 1px solid;
	background-color: #fff;
}

div#content ul#breadcrumb li {
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0px 10px 0px 15px;
	background: url(bull.png) no-repeat 5px 5px;
}

div#content p.legend { 	/* Les textes descriptifs des figures sont dans un cadre à fond gris */
	margin: 10px 0 0 0;
	padding: 5px;
	border: solid 1px #999999;
	color: #000000;
	background-color: #f9f9f9;
}

#thumbnails .image-wrapper {

}

.image-wrapper {
	position: relative;
}

.overlay {
	position: absolute;
	width:210px;
	padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.2em; padding-top: 0.2em;
	backdrop-filter: blur(8px) brightness(95%);
	top:190px;
}

ul#thumbnails {
	display: grid;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	font-weight: bolder;
	padding: 0;
}

div#content #thumbnails img {	/* Les images des figures dans l'accueil de chaque catégorie flottent à gauche avec une marge
								de 10px en haut et à droite */
	border-width: 0;
	margin: 10px 10px 0 0;
	float: left;
}
div#content #thumbnails img.third {	/* On attribue cette classe à la troisième de chaque ligne pour annuler la marge à droite */
	margin-right: 0;
}

#thumbnails img {
	width: 20em;
}

div#content hr.separation {	/* On insère une ligne avec <hr class="separation"> sous les éléments flottants pour agrandir
							dynamiquement leur conteneur. Cette ligne est invisible */ 
	visibility: hidden;
	clear: both;
}
div#content div#howto {	/* Le texte explicatif de l'accueil est contenu dans un cadre flottant à gauche */
	margin: 10px 0 0 0;
	width: 285px;
	float: left;
	color: #000000;
	padding: 5px;
	border: solid 1px #999999;
	background-color: #f9f9f9;
}
div#content div#flash-movie {	/* La video flash de l'accueil est contenue dans un cadre flottant à gauche */
	width: 453px;
	float: left;
	margin: 10px 0 0 10px;
	padding: 0;
}
div#content div#figure {	/* Les figures sont contenues dans un cadre avec une marge supérieure de 10px */
	margin: 10px 0 0 0;
	text-align: center;
}
div#content div#figure p {
	clear:both;
	text-align:center;
	margin-top:5px;
}

div#content div#figure img{
	max-width:70vi;
}

div#content div#figure img.side-img {	/* Lorsque que les figures sont illustrées, l'illustration flotte à gauche
										avec une marge de 10px à sa droite. */
	margin: 0 10px 0 0;
	float: left;
	border: 0;
}

div#content p#footer {	/* le pied de page est surplombé d'une fine ligne grise claire. Le texte est gris clair également */
	margin: 30px 0 0 0;
	padding: 4px 0;
	font-size: 11px;
	font-weight: normal;
	border-top: #ccc 1px solid;
	color: #ccc;
	background-color: #fff;
}