body { overflow-y: hidden; } /* pas de scrollbar verticale */

.centrage-v {
	display: flex;
	align-items: center; /* centrage vertical (d'éléments de <div> flexibles) */
	height: 100vh;
}
/* cadres div (remplace certains attributs de site.css et précise le padding) */
.cadre-ext {
	height: 100vh;
	max-height: 938px; /* zone d'affichage de firefox sur un écran (1920 x 1080) */
	margin: 0;
	padding: 2em 1.2em 2em 0;
	text-align: left;
	display: flex;
	flex-direction: row;
}
.cadre-int {
/*	min-width: 100%; /* pour que le cadre prenne tout l'écran, même s'il y a 1 seule photo */
	height: 100%;
	margin: 0;
/*	padding-left: 2em; */
/*	font-size: 1.1em; /* agrandit le texte à l'intérieur du cadre (titre et menus) */
	display: flex;
	flex-direction: row;
}

/* Hide Menu on Scroll ; utilise le javascript menu-flottant-h.js */
/* source : https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp */
#entete-menu-flottant {
	position: sticky; /* Make it stick/fixed */
	transition: left 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 revenant à gauche) */
	backdrop-filter: blur(8px); /* floute la photo derrière le menu */
}

.fg {
	width: auto;
	border: 0;
	border-spacing: 0;
	display: block;
	padding: 0 1.2em 0 1.2em;
}
.titre {
	width: auto;
	border: 0;
	margin: 3em 0;
	border-spacing: 0;
	display: inline-block;
	padding: 0 1.2em 0 1.2em;
}
.bourrage {
	height: 0px;
	flex-grow: 1;
	padding: 0 1.2em 0 1.2em;
}
.fondsdecran {
	width: auto;
	border: 0;
	border-spacing: 0;
	font-size: 1.1em; 
	margin-bottom: 2em;
	padding: 0 1.2em 0 1.2em;
}
.barredemenus {
	width: auto;
	margin: 2em 0;
	padding: 0 1.2em 0 1.2em;
}
.menu {
	display: inline-block;
	margin: 0;
	font-size: 1.1em;
	line-height: 2.5em;
	text-align: right;
	border-right-width: 1px;
	border-right-style: solid;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
}
a.menu { text-decoration: none; }

.contener-g {
/*	margin-left: 1.2em; remplacé par padding sur tous les contenus - pour aligment menu lors du scroll */
/*	margin-right: 2em; */
	width: auto;
/*	height: 100%;*/
	display: flex;
	flex-direction: column;
	text-align: right;
}
.contener-ph {
	margin: 1em 2em 0.5em 2em;
	width: auto;
/*	max-width: 98vw; */
	display: flex;
	flex-direction: column;
	text-align: center;
}
.contener-d {
	margin-left: 2em;
	width: auto;
	min-width: 25em;
	display: flex;
	justify-content: center; /* centrage vertical : ici ça n'est plus align-items: center; qui centre verticalement !?! */
	flex-direction: column;
}
.cadre-ph {
	display: flex;
	justify-content: center; /* centrage horizontal (inutile ?) */
	align-items: center; /* centrage vertical */
	height: 0px;
	flex-grow: 1;
	margin-bottom: -1em; /* margin-top: 1em; ??? */
	/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  ombre photo - style à appliquer au div les contenant ???2024*/
}
.cadre-index-menu {
	width: auto;
/*	height: 100%;*/
	display: flex;
	align-items: center; /* centrage horizontal */
	justify-content: center; /* centrage vertical : ça n'est plus align-items: center; qui centre verticalement ici !?! */
	flex-direction: column;
	text-align: right;
}
img {
	height: auto;
	max-height: 85vh; /* calc(90vh - 3em) ; 85%vh : commence à diminuer quand vh < 941 px */
	width: auto;
	margin-right: 2em;
	margin-left: 2em;
}
.cadre-texte {
	width: calc(4750px - 360vh); /* je résouds ici le cercle vicieux suivant : la largeur dépend du nb de colonnes (+ de colonnes => + large) mais le nb de colonnes dépend de la largeur (disponible) ! Je ne peux donc pas calculer l'une à partir de l'autre (ni fixer aucune des 2 puisque les 2 varient, conjointement...) => Je calcule la largeur en fonction de la HAUTEUR (d'affichage) :o) : + haut => - de colonnes => - large : je diminue ainsi la largeur (donc le nb de colonnes) lorsque la hauteur augmente */
	min-width: 1500px;
	text-align: justify;
	justify-content: center; /* centrage horizontal (inutile ?) */
	align-items: center; /* centrage vertical */
	height: 0px;
	flex-grow: 1;
/*	margin-bottom: -1em; margin-top: 1em ??? à tester - mais un autre jour : il est tard ! */
	column-count: auto;
	column-width: 400px; /* affiche le texte sur le Sri Lanka en colonnes */
	column-gap: 40px;
/*	column-rule-style: outset;
	column-rule-width: 10px; */
}
.essai {
/*    display: -webkit-flex; */
    display: flex;
/*    -webkit-flex-flow: column wrap; */
    flex-flow: column wrap;
}
.legende {
	line-height: 2em;
	font-size: 1.1em;
	margin: 0;
	white-space: nowrap;
	padding: 0 1.2em 0 1.2em;
}
/* fin cadres div */

.fleche {
	font-size: 1.1em;
	display: inline-block;
	text-align: center;
	border-radius: 2px;
	margin: 0 0.3em;
	min-width: 2em;
	line-height: 1.2em;
}
.tri {
	font-size: 1.1em;
	display: inline-block;
	text-align: center;
	border-radius: 4px;
	margin: 0.5em;
	text-align: center;
	min-width: 12em;
	height: 1.6em;
/*	line-height: 16px; */
}
.PDP {
	font-size: 1.1em;
	display: inline-block;
	text-align: left;
}
a.fleche, a.tri, a.tdml { text-decoration: none; }

/* utilisé par les scripts de défilement doux scroll-h.js et scroll-v.js (vers les ancres nav). ??? style non défini dans nb */
.nav {  
	padding: 0; 
	margin: 0;  
	text-align: center;  
}

.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: 1em;
	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;
}
.photo-hover { cursor: help; }

.photo-active .exif {  /* :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{
	opacity: 0;
	filter: alpha(opacity=0); /* =< IE8 */
}

.tdm { width: 825px } /* min(max(60vw, 80vh), 900px); } /* 60vw : pour les pages n&b (verticales) ; 80vh : pour les pages couleur (hotiz.) */
.tdmchronos { width: 725px }

.ancre-index { /* pour que les liens vers les ancres des photos depuis l'index amènent la photo visée au milieu de la page (horizontalement) MARCHE PAS ??? */
/*	display: block; */
/*	position: relative;*/
	text-align: right;
/*	transform: translateX(-150px); */
/*	transform: translateX(-50vw); */
/*	left: -50vw; */
/*	padding-left: 50px;
	margin-left: -50px;*/
	/*display: none;*/
	/*visibility: hidden;*/
}

/* 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 { 
		height: calc(100vh - 2.5em); /* tenir compte des icônes de la tablette */
		border: none;
		padding: 0;
	/*	background-color: yellow;  pour tests */
	}
	.fg { padding-top: 0.8em; }
	.menu { font-size: 1.2em;}
	.fondsdecran { margin-bottom: 3em; }
	img { max-width: 98vw; }
	.exif {
		max-width: 32em;
		left: 1em;
	}
	.legende {
		line-height: 2em;
		font-size: 1.1em;
		margin: 0;
		white-space: normal;
		max-width: 100vw;
	}
	.tdm, .tdmchronos { width: 95vw }
}
/* petit écran horizontal (tablette, smartphone - ou petit PC) */
/* attn PC : barre de défilement horizontale : il faut en tenir compte !... */
@media
	screen and (orientation:landscape) and (max-width: 1200px),
	screen and (orientation:landscape) and (max-height: 915px)
{
	.cadre-ext { 
		height: calc(100vh - 2em); /* tenir compte des icônes de la tablette / de la scrollbar h. du navigateur PC */
		border: none;
		padding: 0;
	/*	background-color: red;  pour tests */
	}
/*	.cadre-int { height: calc(100vh - 2em); } */
	.fg { padding-top: 0.8em; }
	.titre, .barredemenus { margin: 0.5em 0; }
	img { max-height: 80vh; } /* calc(90vh - 4em) ou calc(85vh - 3em); */
	/* .exif { max-width: 28em; } */
	.cadre-texte { column-width: 350px; }
	.tdm, .tdmchronos {
		width: 66vw;
		font-size: 0.7em;
	}
}
/* diminution du menu vertical lorsque l'écran est un peu + petit encore */
@media screen and (orientation:landscape) and (max-height: 650px)
{
	.masquable { display: none; }
	.menu {
		font-size: 1.2em;
		line-height: 1.6em;
	}
}

/* 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: grey; } /* pour tests */
	.menu { font-size: 1.4em; }
	.cadre-int { font-size: 1.3em; }
	.PDP { font-size: 1.3em; }
	.tdm, .tdmchronos { font-size: 0.75em }
}
/* très petit écran vertical (smartphone) */
@media
	screen and (orientation:portrait) and (max-width: 580px),
	screen and (orientation:portrait) and (max-height: 660px)
{
	.cadre-ext { 
		height: 100vh; /* pas de barre de défilement h. sur smartphones */
	/*	background-color: green;  pour tests */
	}
/*	img { max-height: calc(90vh - 4em);	} je laisse les 80vh de petit écran pour voir ??? */
	.titre { font-size: 1.2em; }
	.menu { line-height: 2.2em; }
	.cadre-texte {
		width: 1600px;
		column-width: 280px;
	}
}
/* très petit écran (smartphone), horizontal */
@media
	screen and (orientation:landscape) and (max-width: 790px),
	screen and (orientation:landscape) and (max-height: 460px)
{
	.cadre-ext { 
		height: 100%; /* pas de barre de défilement h. sur smartphones */
	/*	background-color: blue;  pour tests */
	}
	.titre { 
		font-size: 1.1em;
		margin: 0;
	}
	.titre-blanc-noir, .titre-gris { font-size: 1.5em; }
	.menu { font-size: 1.2em; }
	.fondsdecran { display: none; }
	.cadre-texte { column-width: 450px; }
}