* { margin: 0; padding: 0; }						/* Pour supprimer les valeurs par défaut */

body { font-family: Verdana, Arial, sans-serif; }   /* REP_008 : Police par défaut de la page */

/*-----------------------------------------------------*/
/*  Menu latéral gauche                                */
/*-----------------------------------------------------*/
nav {
    position: fixed;
    top: 140px;
    left: 20px;
    width: 100px;
    font-size: 80%;
    z-index: 900;
    /* DEV_900 */
    /* background-color: #DCDCDC; */
}

nav li {
	list-style-type: none;
}
nav a {
	text-decoration: none;
	color: #707070;       /* REP_005 */
}
nav a:hover {
	color: #000000;	
    font-weight: bold;      /* REP_006 : Police noire grasse */

	/* REP_009 : Pour décaler sur la droite au survol  */
	/* padding-left: 10px; */

	/* REP_010 : Pour changer la taille de la police au survol */
	/* font-size: 150%; */
}

/*-----------------------------------------------------*/
/*  Entête des pages (fixe)                            */
/*-----------------------------------------------------*/
header {
    position: fixed;
    top: 0;
    left: 20px;
    width: 1000px;
    height: 40px;
    z-index: 2000;
    background: white;   /* empêche la page de passer visuellement par-dessus */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
}

#titre_site {
    position: relative;
    float: left;
    padding-top: 10px;
    /* DEV_900 */
    /* background: burlywood; */
}
#titre_site a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 0.22em;
	color: black;    
}
#titre_article {
    position: relative;
    float: right;
    padding-top: 15px;
    font-family: "lucida console", sans-serif;
    font-size: 12px;
	letter-spacing: 0.2em;
	color: gray;
    /* DEV_900 */
    /* background: cornsilk; */
}

/*-----------------------------------------------------*/
/*  Zone article                                       */
/*-----------------------------------------------------*/

/* Solution ChtGpt */
article {
    margin-left: 370px;       /* décale à droite du menu */
    margin-top: 60px;         /* espace sous le header */
    width: 650px;
    padding-bottom: 120px;    /* laisse de la place pour le footer fixe */
    font-size: 12px;
    position: relative;       /* NE SURTOUT PAS utiliser absolute */
    /* DEV_900 */
    /* background-color: #98DB9C; */
}

/*-----------------------------------------------------*/
/*  Menu vignettes (index.html)                        */
/*-----------------------------------------------------*/
.galerie_vignettes {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1vmin;             /* Espace entre les vignettes. Initialement 2vmin */ 
    padding: 0 14px;
}
.galerie_vignettes::after { /* pour gérer la dernière ligne */
    content:'';
    display:block;
    flex-grow: 10;
}
.galerie_vignettes li {
    list-style-type: none;
    height: 136px;
    /* flex-grow: 1; */
}
.galerie_vignettes img {
width: 100%;
height: 100%;
object-fit: cover;
}
.galerie_vignettes img:hover {   /* Ajout JmcDev */
    opacity:0.6;
}  

/*-----------------------------------------------------*/
/*  Pied de page                                       */
/*-----------------------------------------------------*/
footer {
    position: fixed;
    bottom: 0;
    left: 20px;
    width: 250px;
    height: 32px;
    /* DEV_900 */
    /* background: chartreuse; */
    z-index: 1000;
}

#copyright {
    position: relative;
    float: left;
    font-size: 0.60em;
}

/*-----------------------------------------------------*/
/* Galerie photos Galleria : fond en blanc             */
/*-----------------------------------------------------*/
.galleria-container { background: white; }  

/*-----------------------------------------------------*/
/*  Divers                                             */
/*-----------------------------------------------------*/
.bu {                           /* Gras, souligné */
    font-weight: bold;
    text-decoration: underline;
}

#legende {
	text-align: left;
	padding-top: 5px;
	font-size: 90%;				/* REP_012 : Taille exprimée en % par rapport à la taille de la police choisie pour les articles --> REP_008 */
	line-height: 120%;
} 

#texte  {
	margin-top: 20px;
	text-align: justify;		/* Alignement du texte : center | justify | left | right */
	line-height: 18px;			/* Espacement entre les lignes */
}
#texte a {
	text-decoration: none;		/* None : lien non souligné | underline : lien souligné */ 
}
#texte a:hover {
	color: #FF5900;		   /* Couleur du lien lors de son survol */
}

#signature {
	margin-top: 20px;
	text-align: right;
	margin-bottom: 20px;
}

#audio_solo  { margin-top: 10px; }

#video_html  { margin-top: 20px; }

#video_vimeo { margin-top: 20px; }

#image		 { 
	margin-top: 50px;
	text-align: center;
}

#galerie 	 { margin-top: 20px; }

.image_menu {opacity: 0.4 ;}
.image_menu:hover {opacity: 1.0;}

#hidden_link {outline: none; text-decoration: none; color: black; cursor: text;}