/* =============================================================================*/

/* Pour rendre VASARI 'responsive', on a utilisé deux moyens :
   
 1/ dans CSS
    
    des variables et classes sont personnaliées à l'aide de @media 
	(orientation: portrait)
	
	il s'agit de
	
	- variables : h_font et h_bandeau -> on double la taille de la police
	
	- classes   
	    td  		: on ajoute une bordure noire de 2px
	    titre	: on double la taille de la police
	    liste    : (propre au contexte 'smartphone') : padding haut/bas de 40px
	   
	    container-menu : allongé de 55px en hauteur
	    hauteur-xx   : allongés par de hauteurs variables
	   
	    button. minibouton et .grandbouton : largeurs augmentées
	   
	    L-nn (largteurs fixes) : elle sont doublées
	   
 2/ dans les modules html-php
	
	pour les pages affichant des oeuvres, en mode 'mosaïque'
	- en contexte 'ordinateur', le nombre de colonnes est variable en fonction de
      la largeur de l'écran
	- en contexte 'smartphone', on a toujours deux colonnes fixes
		
	pour ces mêmes pages en mode 'liste', les données concernant une oeuvre,
	réparties en 4 cases consécutives sur la même ligne en contexte 'ordinareut',
	sont regropupées sur deux cases consécutives en mode 'smartphone'
	(cf. commentaires du module 'oeuvres_artiste')
		   
	pour les pages à 'défilement horizontal', le design diffère suivantle contexte
	(cf. commentaires des modules 'agrandit_oeuvre' et 'agrandit_lieu')

	pour les autres pages présentant des listes, le nombre et la largeur 
	des colonnes  ont été réduits en contexte 'smartphone'

	e design de la page 'fiche plan' est également adapté en contexte 'smartphone'
	
==================================================================================

/*=====================================================================================*/
/* constantes                                                                          */
/*=====================================================================================*/

:root{
	--h_font:16px;
	--h_bandeau:36px; 
	--h_pastille:16px;
}

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/
:root{
	--h_font:14px;
	--h_bandeau:26px; /*46px;*/
	--h_pastille:20px;
}
}

/*=====================================================================================*/
/* classes de base                                                                     */
/*=====================================================================================*/

*	{
	font-size: var(--h_font);
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

html, body {
	padding: 0;
	margin: 0;
}

body {
	height: 100%;
	width: 100%;
	background-color: WhiteSmoke; 
	text-align: center;
	font-family: system-ui, -apple-system, sans-serif;
	font-weight: normal;
	color: black; 
}

H1{
	display:none;
}

ul {
	padding-inline-start:0 ;
	margin-inline-start:0 ;
	list-style-position:inside ;
}

table {
	border: 5px solid black;
	border-collapse: collapse;
	border-spacing: 0;	
	margin-left: auto;
	margin-right: auto;
}

td,th {
	vertical-align:middle;
	border:1px solid black;
	padding:0 10px 0 10px;
}

a	{
	text-decoration:underline; 
}
	
form {
	display:inline;
}

.titre { 
	font-size:24px;
	font-weight: bold;
	display:inline;
}	

.legende { 
	font-size:24px;
	font-weight: bold;
}

.liste{
	padding: 0 ;	
}	


.top	{
	vertical-align:top;
} 

img.bottom	{
	vertical-align:bottom; /* affiche_silhouette */
} 

.gras 	{
	font-weight: bold; /*700*/
}

.italiques{
	font-style: italic;	
}

/* boutons ----------------------------------------------------------------------*/

button {
 cursor: pointer;
 transition: .1s ease;
}

.minibouton {
	padding: 1px 6px ;
	white-space: nowrap ;
}

@media (orientation: portrait) {
	.minibouton {
		min-height: 32px ;
		padding: 2px 8px ;
	}
}

button,input {
	display:inline ;
	color:#000000;
	font-weight:bold ;
	border:2px solid black;
	border-radius:5px;
	background-color:BlanchedAlmond;
	padding:0px 5px 0px 5px;
	margin:5px;
}

button.bouton-liste {
	background: BlanchedAlmond;
	text-align: left;
	font-size: 0.85em;
	font-weight: normal;
	border: 1px solid black;
	white-space: normal;
	max-width: 100%;
}

td.fond-amande-gauche button.bouton-liste,
div.fond-amande-gauche button.bouton-liste {
	background: white;
}

.grandbouton { /*index, fiche_selection, fiche_aide, fiche_emploi*/
	display:inline-block;
	width:280px;
	padding:10px 5px;
}
.grandbouton-row { display: flex; gap: 6px; }
.grandbouton-row .grandbouton { flex: 1; width: auto; min-width: 0; }

button.fondrouge {
	background-color:red ;
	color:white ;
}

button.fondbleu {
	background-color:blue ;
}

button.fondvert {
	background-color:#c8f0c8 ;
}

button.bouton_serie {
	background-color:red ;
	color:white ;
	font-weight:normal ;
}

button.bouton_groupe {
	background-color:blue ;
	color:white ;
	font-weight:normal ;
}


/* couleurs --------------------------------------------------------------------*/

.rouge	{
	color:red;	 /* choix liste/mosaique & oeuvres illustrees seules */
}
.bleu	{
	color:blue; /* tris */
}
.foret	{
	color:darkgreen; /* sous-selection */
} 
.noir	{
	color:black;
}

/* fonds -----------------------------------------------------------------------*/

.fond-smoke	{
	background-color:WhiteSmoke; 
	text-align:center; 
	padding: 0; 
}
.fond-blanc-centre	{ /* td & div dans libelles_ */
	background-color:White;
	text-align:center;
	border: 1px solid black;
}
.fond-blanc-centre img {
	max-width: 100%;
	height: auto;
}

div.fond-blanc-relief {
	display: inline-block;          /* largeur = contenu */
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 1s ease-in-out; /* reste affiché 2 secondes avant atténuation */
    padding: 10px;                   /* un peu de marge intérieure */
    border-radius: 5px;             /*  coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ombre douce */
    border: 2px solid black;
}

.fond-blanc-relief.visible {
    opacity: 1;
}

td.fond-blanc-gauche { 
	background-color: White;
	text-align:left; 
}
td.fond-blanc-gauche-marges { /* textes dans : fiches _aide, _emploi, _new,
                                _controle, _famille, oeuvres _artiste, _sujet */
	background-color: White;
	text-align:left; 
	padding-left:32px;
	padding-right:32px;
}
.fond-amande-centre {
	background-color: BlanchedAlmond;
	text-align:center;
}
td.fond-amande-gauche,
div.fond-amande-gauche {
	background-color:BlanchedAlmond;
	text-align:left;
}

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/

td {
	border:2px solid black;
}
.titre, .legende {
	font-size:18px;
}
.liste {
	padding: 20px 0 20px;
}

button {
	font-size: var(--h_font);
}
.grandbouton {
	width:calc(50% - 6px);
	padding:4px 5px;
	margin:3px;
	font-size:13px;
}
.grandbouton-row .grandbouton { flex: 1; width: auto; min-width: 0; margin: 0; white-space: normal; }

td.fond-amande-gauche,
div.fond-amande-gauche {
	padding:10px;
}

}

/*=====================================================================================*/
/* containeurs & ascenseurs ----------------------------------------------------*/
/*=====================================================================================*/

.background-picture {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

div.ascenseur{
	overflow-y:scroll;
	height:100%;
	min-height: 0;
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

div.container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
}

/* container commun aux pages : index, fiche_menu, _aide,_controle, _emploi, _famille, _new, _sortie,
	liste_artistes, _catalogues, _ecoles, _ecoliers, _eleves, _ familles, _formats, _lieux, _maitres, _pays, _plans, _regions, _sujets, _ villes,
	selection_artiste, _lieu, _qualite, _titre ;
	les autres pages ont leur container propre */
div.container-menu {
	overflow-y: auto;
}

.container-menu > .fond-blanc-relief {
	margin: auto;
}

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/

body.ao-fixed, body.al-fixed { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

div.fond-blanc-relief {
	max-width: 100%;
	width: 100%;
}

.fond-blanc-relief.col-liste {
	width: 100%;
}




}

/*=====================================================================================*/
/* pages liste : le container extérieur étire son enfant verticalement                 */
/*=====================================================================================*/

div.container.col-liste-outer {
	align-items: stretch;
}
/* fond-blanc-relief devient colonne flex */
.fond-blanc-relief.col-liste {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	width: 50%;
}
/* header fixe, ascenseur prend le reste */
.fond-blanc-relief.col-liste > div:first-child {
	flex-shrink: 0;
	border-bottom: 2px solid black;
}
.fond-blanc-relief.col-liste > .ascenseur {
	flex: 1;
	min-height: 0;
	height: auto;
	overflow-y: scroll;
}
	 
/* CSS Grid — listes responsives -----------------------------------------------*/

.grille-regions {
	display: grid ;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
	margin-bottom: 8px ;
}
.item-region {
	border-right: 1px solid black ;
	border-bottom: 1px solid black ;
	display: flex ;
	align-items: center ;
}
div.item-region.fond-amande-gauche {
	padding: 0 ;
}

.liste-villes {
	border: 2px solid black ;
	width: 100% ;
}
.item-ville-header {
	width: 100% ;
	padding: 2px 10px ;
	border-bottom: 1px solid black ;
	box-sizing: border-box ;
	font-weight: bold ;
}
.item-ville {
	display: flex ;
	border-bottom: 1px solid black ;
	width: 100% ;
}
.item-ville-nom {
	flex: 2 ;
	min-width: 0 ;
	border-right: 1px solid black ;
}
.item-ville-nb {
	width: 80px ;
	min-width: 80px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	padding: 0 5px ;
}
.item-ville-region {
	flex: 1 ;
	min-width: 0 ;
	padding: 0 10px ;
	display: flex ;
	align-items: center ;
}

.grille-genres {
	display: grid ;
	grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)) ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.grille-sujets {
	display: grid ;
	grid-template-columns: repeat(auto-fill, minmax(362px, 1fr)) ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-genre,
.item-sujet {
	display: flex ;
	border-right: 1px solid black ;
	border-bottom: 1px solid black ;
}
div.item-genre-lib,
div.item-sujet-lib {
	flex: 1 ;
	min-width: 0 ;
	display: flex ;
	align-items: center ;
}
div.item-genre-lib.fond-amande-gauche,
div.item-sujet-lib.fond-amande-gauche {
	padding: 0 ;
}
div.item-genre-nb,
div.item-sujet-nb {
	width: 104px ;
	min-width: 104px ;
	flex-shrink: 0 ;
	border-left: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}

.grille-formats {
	display: grid ;
	grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)) ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-format {
	display: flex ;
	border-right: 1px solid black ;
	border-bottom: 1px solid black ;
}
div.item-format-lib {
	flex: 1 ;
	min-width: 0 ;
	display: flex ;
	align-items: center ;
}
div.item-format-lib.fond-amande-gauche {
	padding: 0 ;
}
div.item-format-nb {
	width: 104px ;
	min-width: 104px ;
	flex-shrink: 0 ;
	border-left: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}
.grille-lieux-sel {
	display: grid ;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-lieux-sel {
	border-right: 1px solid black ;
	border-bottom: 1px solid black ;
	display: flex ;
	align-items: center ;
}
div.item-lieux-sel.fond-amande-gauche {
	padding: 0 ;
}
.grille-plans-pays {
	display: grid ;
	grid-template-columns: 1fr ;
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-plans-pays {
	display: flex ;
	border-right: 1px solid black ;
	border-bottom: 1px solid black ;
}
div.item-plans-pays-nom {
	flex: 1 ;
	min-width: 0 ;
	display: flex ;
	align-items: center ;
}
div.item-plans-pays-nom.fond-amande-gauche {
	padding: 0 ;
}
div.item-plans-pays-nb {
	width: 80px ;
	min-width: 60px ;
	flex-shrink: 0 ;
	border-left: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}
.liste-artistes {
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-artiste {
	display: flex ;
	border-bottom: 1px solid black ;
}
div.item-artiste-nom {
	flex: 1; /*2 ;*/
	width: 200px; 
	min-width: 200px ;
	border-right: 1px solid black ;
	display: flex ;
	flex-direction: column ;
	justify-content: center ;
	padding: 2px 5px ;
}
div.item-artiste-nb {
	width: 80px; /*60px ;*/
	min-width: 80px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
	font-size: 0.85em ;
}
.liste-familles,
.liste-ecoles,
.liste-maitres,
.liste-eleves,
.liste-ecoliers,
.liste-catalogues {
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-famille,
.item-ecole,
.item-maitre,
.item-eleve,
.item-ecolier,
.item-catalogue {
	display: flex ;
	border-bottom: 1px solid black ;
}
div.item-famille-nom,
div.item-ecole-nom,
div.item-maitre-nom {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
}
div.item-famille-nom.fond-amande-gauche,
div.item-maitre-nom.fond-amande-gauche {
	padding: 0 ;
}
div.item-ecole-nom.fond-amande-gauche {
	padding: 0 5px ;
}
div.item-famille-date,
div.item-maitre-date {
	width: 80px ;
	min-width: 60px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}
div.item-ecole-date {
	width: 60px ;
	min-width: 40px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}
div.item-famille-nb,
div.item-maitre-nb {
	width: 110px ;
	min-width: 80px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
	font-size: 0.85em ;
}
div.item-ecole-nb {
	width: 140px ;
	min-width: 110px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
}
div.item-catalogue-header {
	position: sticky ;
	top: 0 ;
	z-index: 1 ;
	background: white ;
}
div.item-catalogue-artiste,
div.item-catalogue-info,
div.item-catalogue-remarques {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	flex-direction: column ;
	justify-content: center ;
	padding: 2px 5px ;
}
div.item-eleve-nom,
div.item-ecolier-nom {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	flex-direction: column ;
	justify-content: center ;
	padding: 2px 5px ;
}
div.item-eleve-nb,
div.item-ecolier-nb {
	width: 80px ;
	min-width: 60px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
	font-size: 0.85em ;
}
.liste-lieux {
	width: calc(30vw + 144px) ;
	border-top: 3px solid black ;
}
.item-lieu-section {
	width: 100% ;
	padding: 4px 5px ;
	border-bottom: 1px solid black ;
	text-align: center ;
	font-weight: bold ;
}
.item-lieu {
	display: flex ;
	border-top: 3px solid black ;
	border-bottom: 3px solid black ;
	margin-top: -3px ;
}
.item-lieu-nom {
	flex: 0 1 calc(50vw - 144px) ;
	min-width: 0 ;
	border-right: 1px solid black ;
	padding: 2px 5px ;
	background-color: White ;
}
.item-lieu-photos {
	display: flex ;
	width: 288px ;
	flex-shrink: 0 ;
}
div.item-lieu-photo {
	flex: 1 ;
	border-right: 1px solid black ;
}
div.item-lieu-photo img {
	max-width: 100% ;
	height: auto ;
}
.fiche-famille-artiste {
	display: flex ;
	border-top: 3px solid black ;
	border-bottom: 3px solid black ;
	margin-top: -3px ;
}
.fiche-famille-nom {
	width: 316px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	padding: 3px 5px ;
}
.fiche-famille-right {
	flex: 1 ;
	min-width: 0 ;
	display: flex ;
	flex-direction: column ;
}
.fiche-famille-stats {
	display: flex ;
	border-bottom: 1px solid black ;
}
.fiche-famille-stat {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	padding: 2px 5px ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
	font-size: 0.85em ;
}
.fiche-famille-bio {
	background-color: White ;
	padding: 3px 5px ;
}
.liste-plans-ville {
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-plan-ville {
	display: flex ;
	border-bottom: 1px solid black ;
}
div.item-plan-ville-nom {
	flex: 2 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
}
div.item-plan-ville-nom.fond-amande-gauche {
	padding: 0 ;
}
div.item-plan-ville-region {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
}
.grille-pays {
	border-top: 1px solid black ;
	border-left: 1px solid black ;
	width: 100% ;
}
.item-pays {
	display: flex ;
	border-bottom: 1px solid black ;
}
div.item-pays-nom {
	flex: 1 ;
	min-width: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
}
div.item-pays-nom.fond-amande-gauche {
	padding: 0 5px ;
}
div.item-pays-artistes {
	width: 120px ; 
	min-width: 80px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}
div.item-pays-villes,
div.item-pays-plans {
	width: 100px ; 
	min-width: 60px ;
	flex-shrink: 0 ;
	border-right: 1px solid black ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
}

/*------------------------------------------------------------------------------*/

.haut	{height: 100%; min-height: 100%; max-height: 100%;}

.total	{width: 100%; min-width: 100%; max-width: 100%;
		 height: 100%; min-height: 100%; max-height: 100%;}

table.total img { max-width: 100%; }

/* largeurs --------------------------------------------------------------------*/

.mince	{width: 10%; min-width: 10%; max-width: 10%;}
.quart	{width: 25%; min-width: 25%; max-width: 25%;}
.tiers	{width: 34%; min-width: 34%; max-width: 34%;}
.reste	{width: 30%; min-width: 30%; max-width: 30%;}
.moitie {width: 50%; min-width: 50%; max-width: 50%;}
.moitie	{width: 50%; min-width: 50%; max-width: 50%;}
td.col-texte-liste { width: 60%; }
td.col-image-liste { width: 40%; }
table:has(td.col-texte-liste) { table-layout: fixed; width: 100%; }
.deuxtiers {width: 66%; min-width: 66%; max-width: 66%;}
.reduit	{width: 70%; min-width: 70%; max-width: 70%;}
.large 	{width: 100%; min-width: 100%; max-width: 100%;}

table.moitie { table-layout: fixed; width: 50%; }
table.moitie td { overflow: hidden; }
table.moitie td button { max-width: 100%; white-space: normal; }
table.large { table-layout: fixed; width: 100%; }
table.large td { overflow: hidden; }
table.large td button { max-width: 100%; white-space: normal; }

.grille-vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 30vw, 277px), 1fr));
	align-items: stretch;
	width: 100%;
}

.L-36	{width: 36px; min-width: 36px; max-width: 36px;} /* fleche : agrandit_, container-artistes, affiche_commandes */
.L-72	{width: 72px; min-width: 72px; max-width: 72px;} /* flèches agrandit_ (ordinateur) */
.L-104	{width:104px; min-width:104px; max-width:104px;} /* compteur, année naissance TOUJOURS blanc*/
.L-130 	{width:130px; min-width:130px; max-width:130px;} /* pays, mini-vignette TANTOT fond blanc jaune noir*/
.L-158	{width:158px; min-width:158px; max-width:158px;} /* region, departement, format, position TANTOT fond blanc jaune*/
.L-192	{width:192px; min-width:192px; max-width:192px;} /* ville, retour, famille, catalogue & commentaires TANTOT fond blanc jaune*/
.L-196 	{width:196px; min-width:196px; max-width:196px;} /* gquartier, type lieu TANTOT fond blanc fortet rouge*/
.L-208	{width:208px; min-width:208px; max-width:208px;} /* genre, sujet TANTOT blanc jaune*/
.L-240	{width:240px; min-width:240px; max-width:240px;} /* case avec texte, artiete avec dates TANTOT fond blanc jaune*/
.L-258	{width:258px; min-width:258px; max-width:258px;} /* case vignette TANTOT blanc noir*/
.L-270	{width:270px; min-width:270px; max-width:270px;} /* nom artiste, dates/lieu naissance/décès, dates epoque TOUJOURS jaune*/
.L-294	{width:294px; min-width:294px; max-width:294px;} /* groupes, series, liste artistes, oeuvres artistes TOUJOURS jaune*/
.L-316	{width:316px; min-width:316px; max-width:316px;} /* nom artiste, nom lieu, epooque TOUJOURS jaune*/
.L-341	{width:341px; min-width:341px; max-width:341px;} /* groupes, series TOUJOURS blanc*/
.L-514	{width:514px; min-width:514px; max-width:514px;} /* groupes, series, evenementTOUJOURS blanc */ 

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/

div.item-artiste-nom {
	flex: 1 ;
	width: 100px; 
	min-width: 100px ;
}
	
div.item-artiste-nb {
	width: 40px; 
	min-width: 40px ;
}

.moitie	{width: 100%; min-width: 100%; max-width: 100%;}
table.moitie { width: 100%; }
td.col-texte-liste { width: 100%; }
td.col-image-liste { width: 100%; }
.reduit	{width: 100%; min-width: 100%; max-width: 100%;}
.L-36	{width: 72px; min-width: 72px; max-width: 72px;}
.L-72	{width:144px; min-width:144px; max-width:144px;}
.L-104	{width:208px; min-width:208px; max-width:208px;}
.L-130 	{width:260px; min-width:260px; max-width:260px;} 
.L-158	{width:316px; min-width:316px; max-width:316px;}
.L-192	{width:384px; min-width:384px; max-width:384px;} 
.L-196 	{width:392px; min-width:392px; max-width:392px;} 
.L-208	{width:416px; min-width:416px; max-width:416px;} 
.L-240	{width:480px; min-width:480px; max-width:480px;}
.L-258	{width:516px; min-width:516px; max-width:516px;}
.L-270	{width:540px; min-width:540px; max-width:540px;}
.L-294	{width:588px; min-width:588px; max-width:588px;}
.L-316	{width:632px; min-width:632px; max-width:632px;}
.L-341	{width:682px; min-width:682px; max-width:682px;} 
.L-514	{width:1028px; min-width:1028px; max-width:1028px;}
.fond-blanc-relief.col-liste { height: auto; flex: 1; min-width: 0; }
.fond-blanc-relief.col-liste table { width: 100%; }
.fond-blanc-relief.col-liste .L-104 { width: auto; min-width: 0; max-width: none; white-space: nowrap; }
img { max-width: 100%; height: auto; }

td.mince img, td.L-28 img { max-width: none; }
.item-lieu { flex-direction: column ; }
.item-lieu-photos { width: 100% ; border-top: 1px solid black ; }
.liste-lieux { width: 100% ; }
.item-lieu-nom { flex: 1 ; }
.fiche-famille-artiste { flex-direction: column ; }
.fiche-famille-nom { width: 100% ; }
.col-new-extra { display: none ; }
.cache-portrait { display: none ; }
}

/*=====================================================================================*/
@media (orientation: landscape) {
/*=====================================================================================*/

.cache-paysage { display: none ; }
div.item-pays-nom { max-width: 180px; }
.grille-pays { width: auto; }
.fond-blanc-relief.col-liste:has(.grille-pays) { width: fit-content; }
.fond-blanc-relief.col-liste:has(.grille-plans-pays) { width: fit-content; }
.fond-blanc-relief.col-liste:has(.liste-plans-ville) { width: fit-content; }
}

/*=====================================================================================*/
.image-tableau {
/*=====================================================================================*/
	max-height: calc(100vh - var(--h_bandeau));
	max-width: 100%;
	height: auto;
	width: auto;
}

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/

.image-tableau {
	max-height: calc((100vh - var(--h_bandeau)) * 0.55);
	}
}

/*=====================================================================================*/
@media (orientation: portrait) {
/*=====================================================================================*/

.texte-12 { font-size: 12px; }

.tri-ligne { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
.commandes button { margin: 2px; padding: 0px 3px; font-size: 12px; }

div.item-pays-artistes { width: 80px; min-width: 60px; }
div.item-pays-villes,
div.item-pays-plans { width: 70px; min-width: 50px; }
div.item-pays-artistes button,
div.item-pays-villes button,
div.item-pays-plans button { margin: 2px; padding: 0px 2px; }
}

/*=====================================================================================*/
/* header fixe dans les ascenseurs                                                     */
/*=====================================================================================*/

.fond-blanc-relief.col-liste {
	padding: 0;
}
.ascenseur thead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: white;
}
.ascenseur thead th {
	background: white;
	box-shadow: 0 1px 0 0 black;
}