/* cadres div */
.cadre-ext {
	max-width: 1120px;
	padding: 0px 28px 28px 28px; /* top right bottom left */
}
.cadre-int { padding: 1em; }
/* fin cadres div */

/* .top { pour le bouton flottant de retour au sommet ; pas mis, finalement
	text-align: center;
	top: 100;
	left: 50%;
	position: fixed;
} */

/* Hide Menu on Scroll ; utilise le javascript menu-flottant.js */
/* source : https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp */
#entete-menu-flottant {
	/* margin-top: 0px; */
	position: sticky; /* Make it stick/fixed */
	/* top: 12; Stay on top */
	transition: top 0.5s; /* Transition effect when sliding down (and up) */
	z-index: 16; /* > z-index(exif) ; sinon le menu n'est pas cliquable quand on est au-dessus de l'exif (quand on l'affiche en remontant) */
	backdrop-filter: blur(8px); /* floute la photo derrière le menu */
}
.fg {
	width: 33%;
	border: 0;
	border-spacing: 0;
	padding: 1.2em 0 1.2em 0;
	text-align: left;
	display: inline-block;
}
.titre {
	width: 34%;
	border: 0;
	border-spacing: 0;
	padding: 1.2em 0 1.2em 0;
	text-align: center;
	display: inline-block;
}
.fondsdecran {
	float: right;
	border: 0;
	border-spacing: 0;
	padding: 1.2em 0 1.2em 0;
	font-size: 1.1em;
	text-align: right;
	display: inline-block;
}
.barredemenus {
	width: 100%;
	margin-bottom: 0.8em;
	text-align: center;
	padding-bottom: 1.2em;
	/* position: sticky; pour que le menu reste en haut de la page quand on scrolle */
	/* position: -webkit-sticky; Safari */
	/* top: 0; */
	/* background: rgba(20, 20, 20, 0.75); arrière-plan gris avec une opacité de 75% */
}
.menu {
	min-width: 6.8em;
	margin: 0.2em -0.2em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
a.menu { text-decoration: none; }

img {
	width: auto; /* pour conserver les proportions */
	max-width: 100%; /* PAS 400px ! : sinon ne se redimensionne pas avec le div photo */
	height: auto;
}
.legende {
	position: static;
	font-size: 1.1em;
	margin: 0.5em 0;
}
.menu, .fleche, .tri, .PDP {
	font-size: 1.1em;
	display: inline-block;
	text-align: center;
}
.fleche {
	border-radius: 2px;
	margin: 1em 0.3em; /* top+bottom right+left */
	min-width: 2em;
}

.tri {
	border-radius: 4px;
	margin-right: 4px;
	margin-left: 4px;
	min-width: 12em;
	height: 1.6em;
/*	line-height: 16px; */
}
a.fleche, a.tri, a.tdml { text-decoration: none; }

.exif {
	background: rgba(0, 0, 0, 0.75); /* fond noir avec 75% d'opacité */
/*	background-image: url(noir75.png); remplacé par la ligne précéd. */
	max-width: 39em;
	left: 5em;
	bottom: 16em;
	border-radius: 0.5em;
	position: relative;
	z-index: 8; /* < z-index(entete-menu-flottant) */
	font-size: 1em;
/*	line-height: 16px;*/
	color: #aaa;
	margin-bottom: -10em; /* pour remonter l'élément suivant (légende) (l'exif le fait descendre) */
	padding: 1em 2em;
	text-align: left;
	opacity: 0;
	filter: alpha(opacity=0); /* =< IE8 */
	-webkit-transition: 1s ease-in-out 0.5s;
	-moz-transition: 1s ease-in-out 0.5s;
	  -o-transition: 1s ease-in-out 0.5s;
		 transition: 1s ease-in-out 0.5s;
}
.PDP { width:100%; }

.photo-hover { cursor: help; }

.photo-active .exif { /* affichage de l'Exif au clic sur la photo (:active pas correctement supporté par IE - même IE10) */
	opacity: 1;
	filter: alpha(opacity=100); /* =< IE8 */
	-webkit-transition: 0.05s ease-in-out;
	-moz-transition: 0.05s ease-in-out;
	  -o-transition: 0.05s ease-in-out;
		 transition: 0.05s ease-in-out;
}
.photo-out .exif { /* masquage de l'Exif à la sortie */
	opacity: 0;
	filter: alpha(opacity=0); /* =< IE8 */
}

/* MODIFICATIONS DE STYLES EN FONCTION DES ECRANS (SMARTPHONES, TABLETTES, ET AFFICHAGE VERTICAL) 
Tablette Samsung Galaxy Tab A :                     800 x 1280
Ma tablette (pourtant censée être une Tab A !...) : 600 x 960
Samsung S9 réel : 1440 x 2960, CSS :                360 x 740
attention : la barre du navigateur + boutons de la tablette consomment environ 130 px dans la hauteur */

/* petit écran vertical (tablette, smartphone) */
@media
	screen and (orientation:portrait) and (max-width: 915px), 
    screen and (orientation:portrait) and (max-height: 1200px)
{
	.cadre-ext { 
		border: none;
		padding: 0em 1em 1em 1em; /* top right bottom left */
	/*	background-color: yellow;  pour tests */
	}
	#entete-menu-flottant { margin-top: 0.8px; }
	.menu { font-size: 1.2em; }
	.exif {
		max-width: 26em;
		left: 1em;
	}
}
/* petit écran horizontal (ici petit = à peine + haut que photos verticales) */
@media screen and (orientation:landscape) and (max-height: 975px)
{
	#entete-menu-flottant { margin-top: 0.8px; }
	img { max-height: 92vh; }
}
/* petit écran horizontal (tablette, smartphone) */
@media
	screen and (orientation:landscape) and (max-width: 1200px),
	screen and (orientation:landscape) and (max-height: 915px)
{
	.cadre-ext {
		border: none;
	/*	background-color: red;  pour tests */
	}
	#entete-menu-flottant { margin-top: 0.8px; }
	.menu { font-size: 1.2em; }
/*	.exif { max-width: 25em; } */
}

/* très petit écran (smartphone), vertical ou horizontal */
@media
	screen and (orientation:portrait) and (max-width: 580px),
	screen and (orientation:portrait) and (max-height: 660px),
    screen and (orientation:landscape) and (max-width: 790px),
	screen and (orientation:landscape) and (max-height: 460px)
{
/*	.cadre-ext { background-color: blue; } /* pour tests */
	#entete-menu-flottant { margin-top: 0.8px; }
	.titre { font-size: 1.2em; }
	.menu { font-size: 1.4em; }
	.cadre-int { font-size: 1.3em; }
	.PDP { font-size: 1.3em; }
}
/* très petit écran vertical (smartphone) */
@media screen and (orientation:portrait) and (max-width: 580px)
{
/*	.cadre-ext { background-color: green; } pour tests */
	.fg { width:50%; }
	.titre {
		width: calc(50% - 4px);
		text-align: right;
	}
	.fondsdecran { display: none; }
	.exif {
		bottom: 14em;
		margin-bottom: -11em;
	}
}