/*===================================================================  */
/* ======= Route Inconnue ====  10/2015, 05/2019, 11&12/2021 ========  */
/*===================================================================  */
/* code graphique du site 
 	#336633	 vert foncé         
    #333366  bleu foncé  
	#336666  bleu pétrole    
    #999933  caca d'oie
    #993333  rouge foncé
	
	image en-tête: 650 px * 200 px
*/
/* ====================  Reset CSS =================================== */
/* =================================================================== */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, div, nav, aside, footer, header, section, article, figure, figcaption {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 100%;
	font-weight: normal;
}
img {
	border-width: 0px;
	float: left;
}

/* ============= 1. styles classiques================================ */
/* ================================================================== */
/* ==================== 1.1 Corps =================================== */
body {
	font-family: quattrocento-sans, sans-serif;
	background-image: none /* url('images/epilobium_duriaei.jpg') */;
	background-position:center top;
	background-color: white;
	background-repeat: no-repeat;
	margin: 0px auto 0px auto;
	  /* centrage horizontal */
}
p {
	margin: 0px 0px 0px 0px;
	font-size: 16px;
}
div#conteneur {
	/* Div de contenu - largeur max 650px */
	position: relative;
	max-width: 650px;
	margin: 20px auto 15px auto;
	top: 0px;
	background-color:white;
	display:flex;				/* Flexbox */
	flex-flow:row wrap;			/* Flexbox */
	justify-content: space-between; /* Flexbox espacement horizontal */
}
/* ===================== 1.2 En-tête ================================ */
header#en-tete {    
	flex: 100%;				/* Flexbox toute la largeur */
	display: flex;			/* Flexbox */
	flex-flow: row wrap;	/* Flexbox */
	justify-content: space-between;
}
div#logo {
	flex: 0 1 172px;		/* Flexbox */
	background: rgba(255, 255, 255, .9); /* transparence si images de fond */
}
#logo a {
	text-decoration: none;
	font-size: 32px;
	color: #993333;
	line-height: 23px;
}
#logo p {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin-top: 5px;
	padding-top: 0px;
	color: #336633;
}
#en-tete h1 {	
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #333366;
	flex: 0 1 478px;		/* Flexbox */
	align-self: center;		/* alignement vertical Flexbox */
}
img#banniere {
	flex: 100%;			/* Flexbox */
	margin-top: 10px;
	box-shadow: 4px 4px 4px grey;
}

/* mai 2019 - menu hamburger si mobile, non affiché si grand écran */
div#menumobile {
    flex: 0 0 0;			/* Flexbox */
}
#menumobile img {
    width: 0px;				/* peut-être redondant avec flex: 0 0 0 */
}
/* ==================== 1.3 Menus ================================== */
aside#enveloppe-menus {  /* pour permettre l'usage de la div Overlay */
    /* enveloppe simple du menu */
	flex: 0 1 172px;			/* Flexbox  */
	margin: 20px 15px 0px 0px;	/* espace avec le texte de contenu */
}
nav#menus {
	margin: 0px 0px 0px 0px;
	padding: 15px 10px 20px 10px;   /* padding gauche ramené de 20 à 10px le 13/07/2023 */
	background-color: #FFFFFF;
	border: 1px solid #336666;
	box-shadow: 4px 4px 4px grey;
    opacity: .5;    /* menu à 50% opacité en temps normal puis retour lent en 5 secondes */
    transition: opacity 5s; 
}
#menus:hover, #menus:focus {
    opacity: 1;     /* opacité 100% si pointé */
    transition: opacity 300ms;
}
#menus p {
	color: #993333;
	margin-top: 5px;
}
#menus ul {
	list-style-type: circle;
	list-style-position: outside;
	font-size: 16px;
	font-family: quattrocento-sans, sans-serif;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 16px;		/* modifié de 20 à 16 le 20/06/2025 */
	border-top: thin #999933 solid;
}
#menus ul:first-child {
	margin-top: 0px;
}
#menus li {
	color: #336633;
	margin-left: 15px;
	margin-top: 5px;		/* ajouté le 20/06/2025 */
}

#menus a, a:visited {
	text-decoration: none;
	color: #336633;
}

/* Mode mobile : les menus apparaissent lors du clic sur l'icône "menu" (mai 2019) */
#enveloppe-menus div.overlay {
	/* occupe tout l'écran, grisé - lors de l'affichage du menu */
	background-color: #000;
	background: rgba(0,0,0,.5);
	height: 0%;
	left: 0;
	position: fixed;
	top: 0;
	width: 0%;
    z-index: 10;
}
#menus div.fermeture {
    /* affichage du X de sortie */
    border: none;
	text-align: center;
    height: 0;
    visibility: hidden;
}

/* ===================== 1.4 Contenu ================================ */
section.contenu {			/* Flexbox */
	flex: 1 0 463px;		/* Flexbox grow=1, shrink=0, basis=463px */
	display: flex;			/* Flexbox */
	flex-flow: column wrap;	/* Flexbox */
	align-items:stretch ;	/* Flexbox alignement horizontal tout l'espace */
	/* ok avec images, questionnable dans d'autres cas cf bibliographie */
	margin: 20px 0px 0px 0px; 		/* Flexbox left 0px instead of 195 */
	padding: 0px 0px 10px 0px;
	border-width: 0px;
	background: rgba(255, 255, 255, .9); /* transparence si images de fond */
}
.contenu p {
	color: #333366;
	margin-top: 10px;
	text-indent: 30px;
	text-align: justify;
}
.contenu ul {
	/* Liste standard */
	color: #333366;
	margin: 5px 15px 20px 0px;
	text-align: left;
	line-height: 120%;
	word-spacing: normal;
	list-style-image: url('images/puce_5.gif');
}
.contenu ul.sommaire {
    margin-left: 50px;
    font-size: 12px;
}
.contenu ul.sommaire_bulletin {
    margin-left: 34px;
    font-size: 14px;
	color:darkgray;
}
.contenu ul.sommaire_cahier {
    margin-left: 34px;
    font-size: 14px;
}
.contenu ul.sommaire_cahier_sous {
    margin-left: 3px;
    font-size: 14px;
	list-style-image:none;
}
.contenu ul.sommaire_normal {
    margin-left: 34px;
    font-size: 16px;
}
.contenu li {
	text-align: left;
	line-height: 120%;
	word-spacing: normal;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 15px;
	margin-bottom: 5px;
	padding-bottom: 5px;
	display: list-item;
}
.contenu a {
	color: #333366;
	text-decoration: none;
	border-bottom: 1px #336633 dotted;
}
.contenu a:hover {
	color: #333366;
}
.contenu p.no_indent {
	color: #333366;
	margin-top: 20px;
	text-indent: 0px;
}
p.citation, blockquote {	
	color: #336633;
	margin-top: 30px;
	text-indent: 0px; 
	margin-left: 30px;
	font-size: 16px;
}

cite {					/* Titres de livres */
	font-style: italic;
}
.contenu h1 {					/* =h2 12/2021 pour SEO */
	color: #993333;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
}
.contenu h1.phrase-h1 {			 /* 12/2021 pour SEO */
	color: #336666;			/* bleu pétrole */
	font-size: 16px;
	text-indent: 30px;
	text-align: justify;
	margin-top: 10px;
}
.contenu h2 {
	color: #993333;
	font-weight: bold;
	font-size: 20px;
}
.contenu h3 {
	color: #999933;
	font-weight: bold;
	font-size: 16px;
	margin-top: 20px;
}
.contenu summary h3 {	/* pour gérer la position du petit triangle details/summary */
	margin-top: 0px;
	margin-bottom: 10px;
}
.contenu h4 {
	color: #993333;
	font-weight: bold;
	font-size: 16px;
	margin-top: 30px;
}

span.reference {
    color: #333366;
    font-size: 12px;
}

hr {
	color:whitesmoke;
	size: 1px;
	width: 30%;
}
/* ======================== 1.5 Pied ================================ */
footer.pied {
	flex: 100%;				/* Flexbox toute la largeur */
	align-self: flex-end;	/* Flexbox aligné sur le bas verticalement */
	display: flex;			/* Flexbox */
	flex-flow: column wrap;	/* Flexbox */
	align-items:center ;	/* Flexbox alignement horizontal centé */
	margin: 30px 0px 0px 0px;
	padding: 0px; 	
	border-top: 1px dotted grey;
	background-color: ghostwhite;
}
p.pied {
    margin-top: 10px;
	font-style: italic;
}
.pied cite {				/* 2021 car le paragraphe est en italique  */
	font-style: normal;
}

/* ========  2. Gestion de l'affichage des images  =================== */
/* =================================================================== */
.contenu img {
	margin: 0px 0px 0px 0px;
	max-width: 100%;	/* 11/2021 max pour ne pas dépasser son conteneur */
}
.contenu img.ombre, .ombre img {  
	/* contenu class="ombre" -> toutes les img seront avec ombre */
	box-shadow: 4px 4px 4px grey; 
	border: 1px solid black;
	/* margin-top: 25px; */  /* au niveau de <figure> */
	margin: 5px;
}
.contenu figure {
	display: flex;			/* Flexbox */
	flex-flow: row wrap;	/* Flexbox */
	justify-content: space-around;
	align-items:flex-start;		/* 08/07/23 pour éviter l'étirement vertical des images avec un figcaption long - p.369-70 HTML5 et CSS3 */
	margin: 20px 0px 20px 0px;
}
.contenu figure.gauche {
	justify-content: left;
}
.contenu figure.droite {
	justify-content: right;
}
.contenu figcaption {
    font-size: 14px;
	flex: 1 0 150px;	/* largeur mini 150px  */
	margin: 0px 10px 0px 10px;
}
.contenu figcaption.gauche {
	order: -1;				/* Flexbox forçage 1er élément */
	text-align: left;
}
.contenu figcaption.centre {
	text-align: center;
}
.contenu figcaption.citation {		/* Homme de la scierie */
	color: #336633;
}
figcaption blockquote {		/* citation accompagnant des photographies Dhôteland*/
	margin-top:10px;
	font-size: 14px;
	margin-left: 15px;
}
/*
.contenu figure:hover {    amusant agrandit de 10% l'image si survol de souris
    transform: scale(1.10);
}
*/


/* ======== 3. Responsive pour mobiles (sept 2015, revu mai 2019) ==== */
/* =================================================================== */
/* On enlève l'image de fond et on met tout le fond en blanc */
@media only screen and (max-width: 660px)  {    
/* 660px = 650 + quelques pixels de marge minimum */
body {
	background-image: none;
	background-color: #FFFFFF;
}
div#conteneur {
	/* margin-top diminuée de 20 à 5 */
	margin: 5px auto 15px auto;
}
/* ============= 3.1 en-tête mobile  (revu mai 2019) ================ */
/* emploi d'une icône menu hamburger en haut à droite */
div#logo {
    margin-top: 2px;
    /* min-height: 0; */
    flex: 0 0 25vw;
}
#logo a {
	font-size: 5vw;        /* vw = viewport width */
	line-height: 0.8em;    /* donc proportionnel à font-size */
}
#logo p {
	font-size: 3vw;
    line-height: 0.9em;
}
#en-tete h1 {
	font-size: 5.5vw;
 	flex: 0 0 60vw;		/* Flexbox */
 }
div#menumobile {    /* == mai 2019 - menu hamburger si mobile == */
    flex: 0 0 10vw;    /* Flexbox */
    visibility: visible;
    margin-top: 2px;
    padding-right: 1vw;
}
#menumobile img {
    width: 9vw;
}
img#banniere {
	margin-top: 1vw;
	flex: 0 1 100vw;     /* Flexbox */
	width: 100vw;        /* Flexbox */
}


/* ============== 3.2 menus mobile  (revu mai 2019) ================= */
aside#enveloppe-menus {
    visibility: hidden;
	top: -50%; /* caché si non appelé en mode mobile */;
    max-width: 100%;
}
nav#menus {
    opacity: 1;    /* opacité partielle pas élégant dans le cas de l'affichage mobile */
    z-index:20;
    position: absolute;
    transition: none;
    width:250px;
}
aside#enveloppe-menus:target {  
    /* si clic sur l'icône "menu" */
    position: fixed;
    /* float:none; */	/* invalide en Flexbox */
	margin-left: 50px; /* pas réussi à centrer... */
	margin-right: auto;
	top: 0px; 
	visibility: visible;
	transition: all 1.5s ease-out;
	-ms-transition: all 1.5s ease-out;
	-moz-transition: all 1.5s ease-out;
	-webkit-transition: all 1.5s ease-out;
}
#enveloppe-menus div.overlay {
	/* occupe tout l'écran, grisé */
	height: 100%;
	width: 100%;
    z-index: 10;
}
#menus div.fermeture {
    /* taille normale de la div pour afficher le "x" de sortie */
	height: 100%;
    visibility: inherit; /* visibilité = celle de enveloppe-menus */
}

/* ============= 3.3 contenu mobile  ================================ */
/* Le bloc "contenu" occupe désormais seul l'espace -> largeur max, centrage (margin auto), padding gauche et droite */
section.contenu, footer.pied {
	padding: 0px 10px 10px 10px;  /* marges gauche et droite, non nécessaires en taille écran */
	flex: 1 1 100vw;
}
/* Gestion de l'affichage des images, avec recentrage et taille adaptative */
.contenu img {
/*	display: block;
	width: 100%; /* utiliser max-width en style inline si nécessaire */
	margin-left: auto;
	margin-right: auto;
}



/* ===============  3.4 pop-ups résumés de livres =================== */
.modal:target {
	top: 0px; 
}
.modal img {
	margin: 16px 20px 20px 0px;
}
}
/* ================== fin styles mobile ============================= */
/* ================================================================== */


/* ================== 4. Tables (Biographie) ======================== */
/* ================================================================== */
table#date {
	border-spacing: 10px;
	padding: 0px 0px 0px 0px;
}
tr.date {
	padding: 0px 0px 0px 0px;
}
td {
	text-align:justify;
}
td.date {
	width: 100px;
	table-layout: fixed;
	vertical-align: top;
}

/* =====  5. pop-up encadrés description des oeuvres (mai 2015) ==== */
/* ================================================================= */
.modal {
	visibility: hidden;
	max-width: 450px;
	height: 800px;
	top: -50%; /* caché si non appelé */;
	position: absolute;
}
/* Make the modal appear when targeted */
.modal:target {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 342px; /* Aligné avec "menus" */;
	visibility: visible;
	transition: all 2.0s ease-out;
	-ms-transition: all 2.0s ease-out;
	-moz-transition: all 2.0s ease-out;
	-webkit-transition: all 2.0s ease-out;
}
.modal div.header, .modal div.footer {
	border-bottom: 1px solid #99CCCC;
}
.modal div.footer {
	border: none;
	border-top: 1px solid #99CCCC;
	text-align: center;
}
.modal div.copy, .modal div.header, .modal div.footer {
	padding: 15px;
}
.modal-content {
	background: #f7f7f7;
	position: relative;
	z-index: 20;
	border-radius: 5px;
/* arrondi */box-shadow: 6px 6px 6px #404040;
}
.modal div.copy {
	background: #fff;
	text-align: justify;
}
.modal img {
	margin: 16px 20px 20px 0px;
	float: left;
	max-width: 160px;
}
.modal div.overlay {
	/* occupe tout l'écran, grisé */
	background-color: #000;
	background: rgba(0,0,0,.5);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

/********* CLEARFIX *********/
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}