@charset "utf-8";
/* CSS Document */
/*-------------------------------------DEF DES LIENS-----------------------*/
  A:link { text-decoration: none ; color:darkblue ; }
  A:visited { color:#009fe3 ; font-style: italic; font-weight: 800 ; }
  A:hover {color:red; font-weight: 500 ; }	
/*-------------------------------------FIN DEF DES LIENS-----------------------*/
::-webkit-scrollbar { width: 24px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: cyan; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: darkcyan }

* { scrollbar-color: #1e3a6e white; scrollbar-width: large; }



body {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
}

.bloc-commentaire {
	background-color: #e0f7fa;
	border-radius: 10px;
	max-width: 66.66%;
	margin: 0 auto 1.5em;
	padding: 0.8em 1.5em;
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

h1{
	font-size:36px;
    margin-right: 1em;
	color:crimson;
	}
h1::before {
  content: "❍ ";
color:#009fe3;	
}	
h2{
	font-weight: 100;
	font-style: italic;
	font-size:16px;
	text-align: justify;
	margin-right: 2em;
	margin-left:2em;

	}
h3{
	font-weight: 600;
	font-style: italic;
	font-size:16px;
	text-align: justify;
	margin-right: 2em;
	margin-left:2em;
	}
h4{
	font-weight: 100;
	font-size:16px;
	text-align: justify;
	margin-right: 2em;
	margin-left:2em;
	}
	
	

/* ── Image insérée dans le texte, alignée à gauche ──
   Réutilisable sur toute page, quelle que soit la largeur de l'image :
   ajoutez simplement la classe "img-align-figure" sur la balise <img>,
   à l'endroit du texte où l'image doit apparaître. Le texte qui suit
   s'aligne sur le bord droit de l'image tant qu'il est à sa hauteur,
   puis revient automatiquement à la marge habituelle une fois sous
   l'image (comportement natif du float, qui s'adapte à n'importe
   quelle largeur d'image sans réglage supplémentaire). */
.img-align-figure {
	float: left;
	margin: 0 1.5em 1em 0;
}

/* Facultatif : à ajouter sur l'élément qui doit obligatoirement se
   retrouver sous l'image (par exemple si un titre suivant ne doit
   jamais se placer à côté d'elle). */
.img-align-clear {
	clear: left;
}
/* Image centrée, sur sa propre ligne.
   "text-align: center" ne fonctionne que sur les enfants d'un bloc :
   posé directement sur l'image (qui est un élément inline), il n'a
   aucun effet. Il faut donc transformer l'image elle-même en bloc
   (display: block) puis la centrer avec des marges gauche/droite
   automatiques (margin: 0 auto). "clear: both" évite en plus qu'elle
   ne vienne se caler à côté d'une image flottante précédente
   (.img-align-figure) au lieu de se centrer sur toute la largeur. */
.img-align-centre {
	display: block;
	clear: both;
	margin: 1.5em auto;
}

/* ── Figure avec légende, réutilisable sur toute page ──
   Remplacez <img class="img-align-figure" .../> par :
     <figure class="img-align-figure">
       <img src="..." alt=""/>
       <figcaption>Votre commentaire</figcaption>
     </figure>
   La figure flotte à gauche exactement comme .img-align-figure ci-dessus,
   et la légende apparaît automatiquement sous l'image. */
figure.img-align-figure {
	float: left;
	margin: 0 1.5em 1em 0;
}
figure.img-align-figure img {
	display: block;
}
figure.img-align-figure figcaption {
	margin-top: 0.4em;
	padding: 0.4em 0.7em;
	background-color: #e0f7fa;
	border-radius: 8px;
	font-size: 13px;
	font-style: italic;
	text-align: center;
}