/*--------------------------------------------------------------
>>> PLAN DE LA FEUILLE DE STYLE:
----------------------------------------------------------------
1.0 Généralités
	1.1 Polices
	1.2 Éléments généraux
2.0 Menu
	2.1 Menus bureau et mobile
	2.2 Logo
3.0 Portail
4.0 Accueil
5.0 Biographie
6.0 Catalogue
7.0 Agenda
8.0 Galerie
	8.1 Galerie statique
	8.2 Lightbox
9.0 Vidéos
10.0 Contact
11.0 Pied de page

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


/*-----

WWW.CHARLYMANDON.FR    version 5.0 au 20 mars 2024 (implémentation de la version anglaise / suppression du bandeau de header dans le design)

CRÉDITS :
			CONCEPTION ET DESIGN             => AURIANE SACOMAN <3
			DÉVELOPPEMENT VERSION BUREAU     => AURIANE SACOMAN <3
			DÉVELOPPEMENT VERSION ADAPTATIVE => CHARLY MANDON
			28 JUILLET ---> 22 AOÛT 2019
			© BUBBLE COM'
			
----- */


/*--------------------------------------------------------------
1.0 ******************** GÉNÉRALITÉS ********************
--------------------------------------------------------------*/



/*--------------------------------
1.1 Polices
--------------------------------*/



/* Déclaration de Calibri */


@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_regular.eot');
	
	src:url('../polices/calibri/calibri_regular.eot?') format('eot'),
	url('../polices/calibri/calibri_regular.woff') format('woff'),
	url('../polices/calibri/calibri_regular.svg') format('svg'),
	url('../polices/calibri/calibri_regular.ttf') format('truetype');

	font-weight:normal;
	font-style:normal;
}

@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_light.eot');
	
	src:url('../polices/calibri/calibri_light.eot?') format('eot'),
	url('../polices/calibri/calibri_light.woff') format('woff'),
	url('../polices/calibri/calibri_light.svg') format('svg'),
	url('../polices/calibri/calibri_light.ttf') format('truetype');
	
	font-weight:light;
	font-style:normal;
}

@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_italic.eot');
	
	src:url('../polices/calibri/calibri_italic.eot?') format('eot'),
	url('../polices/calibri/calibri_italic.woff') format('woff'),
	url('../polices/calibri/calibri_italic.svg') format('svg'),
	url('../polices/calibri/calibri_italic.ttf') format('truetype');
	
	font-weight:normal;
	font-style:italic;
}

@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_bold.eot');
	
	src:url('../polices/calibri/calibri_bold.eot?') format('eot'),
	url('../polices/calibri/calibri_bold.woff') format('woff'),
	url('../polices/calibri/calibri_bold.svg') format('svg'),
	url('../polices/calibri/calibri_bold.ttf') format('truetype');
	
	font-weight:bold;
	font-style:normal;
}

@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_light_italic.eot');
	
	src:url('../polices/calibri/calibri_light_italic.eot?') format('eot'),
	url('../polices/calibri/calibri_light_italic.woff') format('woff'),
	url('../polices/calibri/calibri_light_italic.svg') format('svg'),
	url('../polices/calibri/calibri_light_italic.ttf') format('truetype');
	
	font-weight:light;
	font-style:italic;
}

@font-face
{
	font-family: 'calibri';
	
	src:url('../polices/calibri/calibri_bold_italic.eot');
	
	src:url('../polices/calibri/calibri_bold_italic.eot?') format('eot'),
	url('../polices/calibri/calibri_bold_italic.woff') format('woff'),
	url('../polices/calibri/calibri_bold_italic.svg') format('svg'),
	url('../polices/calibri/calibri_bold_italic.ttf') format('truetype');
	
	font-weight:bold;
	font-style:italic;
}


/* http://typographisme.net/post/Bonnes-pratiques-pour-les-d%C3%A9clarations-@font-face */





/*--------------------------------
1.2 Éléments généraux
--------------------------------*/



body
{
	margin:0;
	width:100%;
	min-height:100vh;
}

.page
{
	font-family:'calibri';
	width:80%;
	min-width:900px;
	min-height:100vh;
	margin:auto;
	margin-top:0;
	padding-top:0;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}

 
/* header
{
	background-image:url("../visuels/charly_mandon_portail.jpg");
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover;
	width:100%;
	height:60px;
	margin-top:0;
	padding-top:0;
} */

.logo p, .entree_site p
{
	font-family:'calibri';
	text-align:justify;
	margin:auto;
}

.mobile
{
	display:none;
}



/* >>>>>>>>>> MOBILE */

@media all and (max-width: 900px)
{
		.mobile
		{
			display:content;
		}
		
		.bureau
		{
			display:none;
		}
		.page
		{
			width:100%;
			min-width:400px;
		}
		
		header
		{
			display:none;
		}
}



/* >>>>>>>>>> ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		header
		{
			height:90px;
		}
}










/*--------------------------------------------------------------
2.0 ******************** MENU ********************
--------------------------------------------------------------*/



/*--------------------------------
2.1 Menus bureau et mobile
--------------------------------*/



nav.bureau ul
{
	list-style-type: none;
	display:flex;
	justify-content: space-around;
	align-items: center;
	margin:1% 0% 0% 0%;
}

nav.bureau a
{
	text-decoration:none;
	font-size:1em;
	color:black;
	font-weight:bold;
	font-variant:small-caps;
}

nav.mobile
{
	display:none;
}

nav.bureau a.selection, nav.mobile a.selection
{
	color:#B17F4A;
}


/* ajout du bouton commutateur de langues */

.langue_on
{
	color:#B17F4A;
	font-weight:bold;
}

.langue_off
{
	color:black;
	font-weight:lighter;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{
		nav.bureau
		{
			display:none;
		}
		
		nav.mobile
		{
			display:flex;
			justify-content:center;
			align-items:center;
			padding:0%;
			margin:0%;
			width:100%;
		}
		
		nav.mobile ul
		{
			list-style-type: none;
			display:flex;
			flex-wrap:wrap;
			justify-content: space-around;
			align-items: center;
			margin:0;
			margin-top:0%;
			padding:3% 1% 2% 1%;
			width:100%;
			overflow:hidden;
		}
		
		nav.mobile li
		{
			display:inline-block;
			padding:2% 2% 2% 2%;
			
			/* border:blue dashed 1px; */
		}
		
		nav.mobile a
		{
			text-decoration:none;
			color:black;
			font-size:1em;
			font-weight:bold;
			font-variant:small-caps;
		}
		
		.logo
		{
			margin:0%;
			padding:1% 1% 0% 2%;
			min-width:110px;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		nav.bureau a
		{
			text-decoration:none;
			font-size:1.1em;
			color:black;
			font-weight:bold;
			font-variant:small-caps;
		}		
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		nav.bureau ul
		{
			margin:1.5% 0% 1.5% 0%;
		}
		
		nav.bureau a
		{
			text-decoration:none;
			font-size:1.2em;
			color:black;
			font-weight:bold;
			font-variant:small-caps;
		}		
}





/*--------------------------------
2.2 Logo
--------------------------------*/


/* Logo noir utilisé dans le bandeau de menu sur toutes les pages sauf le portail */

.logo
{
	background:linear-gradient(black, black) right / 1.5px 70%;
	background-repeat: no-repeat;
}

.logo .prenom
{
	color:black;
	font-variant-caps: normal;
	font-weight: normal;
	font-size:1.584em;
	letter-spacing: 0.3em;
	margin-bottom:-10px;
}

.logo .nom
{
	color:black;
	font-variant-caps: normal;
	font-weight: bold;
	font-size:1.7em;
	letter-spacing:0.05em;
	margin-bottom:-5px;
	padding:0;
}

.logo .fonction
{
	color:black;
	font-weight: light;
	font-size:1.056em;
	letter-spacing:0em;
	margin:0;
	padding-bottom:7px;
}

.logo .fonction_en /* pour "composer" en version anglaise */
{
	color:black;
	font-weight: light;
	font-size:1.056em;
	letter-spacing:0.17em;
	margin:0;
	padding-bottom:7px
}








/*--------------------------------------------------------------
3.0 ******************** PORTAIL ********************
--------------------------------------------------------------*/



#portail
{
	background:url("../visuels/charly_mandon_portail.jpg") no-repeat fixed;
	background-size:cover;
}

.couverture_portail
{
	width:100%;
	min-width:1000px;
	height:100%;
}

.entree_site .prenom
{
	font-size:2.4em;
	letter-spacing: 0.3em;
	color:white;
	margin-bottom:-10px;
	padding:0;
}

.entree_site .nom
{
	font-size:2.7em;
	letter-spacing:0.04em;
	font-weight:bold;
	color:white;
	margin-bottom:-5px;
	padding:0;
}

.entree_site .fonction
{
	font-size:1.6em;
	letter-spacing:0.01em;
	font-weight: lighter;
	color:white;
	margin:0;
	padding:0;
}

.entree_site .fonction_en
{
	font-size:1.6em;
	letter-spacing:0.22em;
	font-weight: lighter;
	color:white;
	margin:0;
	padding:0;
}

.entree_site
{
	height:130px;
	width:180px;
	background:linear-gradient(white, white) right / 3.5px 73%;
	background-repeat: no-repeat;
	position:absolute;
	top:66%;
	right:15%;
}

.entree_site a
{
	text-decoration: none;
}

.logo a
{
	text-decoration: none;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:1000px)
{
		#portail
		{
			background-image:url("../visuels/charly_mandon_portail_mobile.jpg");
			background-position:center top;
			background-size:cover;
		}
		
		.entree_site
		{
			width:180px;
			position: absolute;
 		    top:70%;
 		    right:5%;
		}
}










/*--------------------------------------------------------------
4.0 ******************** ACCUEIL ********************
--------------------------------------------------------------*/



.introduction
{
	width:100%;
	min-height:450px;
	height:40vh;
	background-image:url("../visuels/charly_mandon_accueil.jpg");
	background-repeat: no-repeat;
	background-position:center;
	background-size:cover;
	margin:0%;
	padding:0%;
}

.introduction p
{
	font-family:'calibri';
	font-size:1.2em;
	text-align:justify;
	margin-left:0;
	width:40%;
	position:relative;
	top:35%;
	left:5%;
}

p.signature
{
	margin-top:1%;
	text-align:left;
}

.no-wrap
{
	white-space:nowrap;
}

.presentation
{
	font-family:'calibri';
	font-size:1.1em;
	height:auto;
	margin:auto;
	padding-top:1%;
}

.presentation p
{
	width:100%;
	margin:0%;
	padding:1% 0% 1% 0%;
	text-align:justify;
}

.presentation p:last-child
{
	margin:0%;
	padding:0% 0% 0% 0%;
}	


.videoAccueil
{
	display:block;
	padding:1% 1% 1% 0%;
	margin:auto;
	float:left;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:650px)
{
		.introduction
		{
			height:300px;
			min-height:300px;
		}
		
		.introduction p
		{
			font-size:1em;
			width:55%;
			min-width:100px;
			position:relative;
			top:30%;
			left:5%;
		}
		
		p.signature
		{
			font-size:0.8em;
		}
		
		.presentation
		{
			font-size:1.2em;
			height:auto;
			margin:auto;
			padding:2% 3% 0% 3%;
		}
		
		.videoAccueil
		{
			padding:1% 0% 1% 0%;
			float:none;
		}
		
}



@media all and (min-width:650px) and (max-width:900px)
{
		.introduction
		{
			height:300px;
			min-height:300px;
		}
		
		.introduction p
		{
			font-size:1.05em;
			width:50%;
			min-width:100px;
		}
		
		.presentation
		{
			font-size:1.2em;
			height:auto;
			margin:auto;
			padding:2% 3% 0% 3%;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
	.introduction p
	{
		font-size:1.3em;
	}
	
	.presentation
	{	
		padding-top:3%;
		font-size:1.3em;
		height:auto;
	}
	
	.presentation p
	{
		line-height:30px;
	}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:1950px)
{
	.introduction
	{
		width:100%;
		min-height:450px;
		height:45vh;
	}
	
	.introduction p
	{
		font-size:1.4em;
		width:47%;
	}
}









	
/*--------------------------------------------------------------
5.0 ******************** BIOGRAPHIE ********************
--------------------------------------------------------------*/



.biographie
{
	margin-top:4%;
	padding:0;
	font-size:1em;
}

.biographie p
{
	padding:0;
	margin-top:0;
	margin-bottom:3%;
	text-align:justify;
}

.biographie p:last-child
{
	margin-bottom:0%;
}

.imageflottanteG
{
	float:left;
	width:20%;
	padding-right:2%;
	text-align:justify;
}

.imageflottanteD
{
	width:35%;
	float:right;
	padding-left:2%;
	text-align:justify;
}

.imageflottanteG img, .imageflottanteD img
{
	width:100%;
}

h6
{
	margin:0%;
	padding:1% 0% 0% 0%;
	font-size:0.85em;
	font-weight:normal;
}

.logo_safran img
{
	width:20%;
	margin-top:1%;
	float:right;
}

/* @@@@@@@@@@ MOBILE */

@media all and (max-width: 900px)
{
	.biographie
	{
		padding:0% 3% 0% 3%;
	}
		
	
	.imageflottanteG
	{
		padding-right:3%;
		width:35%;
	}
	
	.imageflottanteD
	{
		padding-left:3%;
		width:40%;
	}
	
	
	h6
	{
		padding:1% 0% 3% 2%;
		font-size:0.80em;
	}

	.logo_safran img
	{
		width:40%;
		float:right;
	}
	
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		.biographie
		{
			font-size:1.1em;
		}
		
		.biographie p
		{
			margin-bottom:2%;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		.biographie
		{
			margin-top:1%;
			font-size:1.2em;
		}
		
		.biographie p
		{
			margin-bottom:1.5%;
		}
		
		.imageflottanteG
		{
			padding-right:1%;
			width:14%;
		}
	
		.imageflottanteD
		{
			padding-left:1%;
			width:30%;
		}
}










/*--------------------------------------------------------------
6.0 ******************** CATALOGUE ********************
--------------------------------------------------------------*/



.catalogue
{
	width:100%;
	margin-top:4%;
	padding:0% 0% 2% 0%;
	font-size:1em;
}

.catalogue th
{
	font-weight:normal;
	font-size:1.5em;
	letter-spacing: 0.05em;
	padding-bottom:1%;
	text-align: left;
	vertical-align:middle;
	cursor: pointer;
	background:linear-gradient(black, black) bottom left / 17% 1.5px;
	background-repeat: no-repeat;
}

.catalogue td
{
	font-weight:lighter;
	text-align:justify;
	font-size:0.9em;
	line-height: 18px;
	padding-bottom:3%;
	vertical-align:middle;
}

.titre
{
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.2em;
}

.elements
{
	margin:2% 0% 2% 3%;
}

.annee
{
	font-weight: normal;
	font-size: 1.2em;
}

.oeuvre
{
	width:55%;
	padding-right:4%;
}

	
.duree
{
	font-style:italic;
	font-weight:normal;
}

.icone1, .icone2, .icone3
{
	text-align: center;
	vertical-align: middle;
}

.icone1
{
	width:11%;
}

.icone2
{
	width:20%;
}

.icone3
{
	width:14%;
}

.icone1 span, .icone2 span, .icone3 span
{
	font-style: italic;
	font-size: 0.9em;
}

.icone1 img, .icone2 img, .icone3 img
{
	margin-right: 10px;
	vertical-align: middle;
	width:30px;
}

.blanc
{
	height:2px;
}

.ytaudio
{
	border:2px black solid;
	width:30px;
	height:25px;
	display:inline-block;
	margin-right: 10px;
	vertical-align: middle;	
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width: 900px)
{
		.catalogue
		{
			margin-top:7%;
			padding:0% 1% 0% 3%;
		}
		
		.catalogue th
		{
			color:#B17F4A;
			text-align:center;
			background:linear-gradient(#B17F4A, #B17F4A) bottom center / 40% 1px;
			background-repeat: no-repeat;
			cursor: pointer;
			padding-right:2%; /* pour compenser le décentrement visuel occasionné par le padding-right:0 sur les boutons, nécessaire car les images contiennent du blanc */
		}
		
		.catalogue td
		{
			font-size:1em;
			padding-top:1%;
			padding-bottom:5%;
		}
		
		.titre
		{
			font-size:1em;
		}
	
		.oeuvre
		{
			width:78%;
		}
		
		.icone2, .icone3
		{
			width:11%;
		}
		
		.icone img
		{
			margin:auto;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		.catalogue
		{
			font-size:1.1em;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		.catalogue
		{
			font-size:1.2em;
			margin-top:1%;
		}
		
		.icone1 img, .icone2 img, .icone3 img
		{
			width:35px;
		}
}



/* le tbody n'est PAS une balise de type block, donc le display:block se comporte mal ; le booléen contents / none est plus adapté 
.tbody
{
	display:none;
}
*/
/* pour intégrer un lecteur audio uniquement à partir d'une vidéo youtube, on peut générer un embeddablecode sur le site
http://navarr.me/ytaudio/?q=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQ1t_80cFzo0&tiny=on&psize=s&theme=dark
paramètres à cocher : tiny (not compatible with pb) et javascript api, light; */

/* pour appliquer le vertical align:middle, il faut sélectionner la première balise enfant du td (cela ne fonctionne ni sur le TD ni sur la 2è balise enfant*/










/*--------------------------------------------------------------
7.0 ******************** AGENDA ********************
--------------------------------------------------------------*/


.sousmenu_agenda
{
	list-style-type:none;
	width:15%;
	margin:auto;
	display:flex;
	justify-content:space-around;
	align-items:center;
	padding:0;
	margin-top:4%;
	font-size:1em;
}


.sousmenu_agenda a
{
	text-decoration:underline;
	color:black;
}

.selection_page a
{
	text-decoration:none;
	color:black;
	font-weight:bold;
	font-size:1.8em;
}

.agenda
{
	margin-top:4%;
	list-style-type:none;
	font-size:1em;
	padding:0%;
}

.agenda p
{
	font-weight: lighter;
	font-size:1.05em;
	letter-spacing:0;
}

.oeuvre_concerts
{
	font-weight:normal;
	font-style:italic;
}

h2
{
	color:#E0934B;
	font-weight: normal;
	font-size:1.1em;
	letter-spacing:0.03em;
	padding:0%;
	margin:0%;
}

h1
{
	color:#B17F4A;
	font-weight: bold;
	font-size:1.15em;
	letter-spacing:0.03em;
	padding:0%;
	margin:0%;
}

.evenement
{
	background:linear-gradient(black, black) bottom left / 12% 1px;
	background-repeat: no-repeat;
	padding-top:2%;
	padding-bottom:2%;
}

.evenement p
{
	margin:0;
	padding:1% 0% 1% 0%;
}

.evenement:last-child
{
	background:none;
}


.evenement p a
{
	text-decoration:none;
	color:black;
	font-size:0.8em;
}


/* @@@@@@@@@@ MOBILE */

@media all and (max-width:900px)
{
		.sousmenu_agenda
		{
			list-style-type:none;
			width:50%;
			margin:auto;
			display:flex;
			justify-content:space-around;
			align-items:center;
			padding:0;
			margin-top:4%;
			font-size:1em;
		}
		
		.sousmenu_agenda a
		{
			text-decoration:underline;
			color:black;
		}
		
		.selection_page a
		{
			text-decoration: none;
			color:black;
			font-weight: bold;
			font-size:1.8em;
		}
		
		.agenda
		{
			margin-top: 4%;
			list-style-type: none;
			padding:0% 3% 0% 3%;
			text-align:center;
		}
			
		.evenement
		{
			background:linear-gradient(black, black) bottom center / 12% 1px;
			background-repeat: no-repeat;
			padding-top:5%;
			padding-bottom:5%;
		}
		
		.evenement:last-child
		{
			background:none;
		}
		
		.evenement p
		{
			font-weight: lighter;
			font-size:1.05em;
			letter-spacing:0;
			text-align:center;
		}
		
		.evenement p a
		{
			text-decoration:none;
			color:black;
			font-size:0.6em;
		}
		
		.oeuvre_concerts
		{
			font-weight:normal;
			font-style:italic;
		}
		
		h2
		{
			color:#E0934B;
			font-weight: normal;
			font-size: 1.1em;
			letter-spacing: 0.03em;;
			padding:0%;
			margin:0%;
		}
		
		h1
		{
			color:#B17F4A;
			font-weight: bold;
			font-size: 1.15em;
			letter-spacing: 0.03em;
			padding:0%;
			margin:0%;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		.sousmenu_agenda
		{
			font-size:1.1em;
			margin-top:2%;
		}
		
		.selection_page a
		{
			font-size:2em;
		}
		
		.agenda
		{
			margin-top:2%;
			font-size:1.1em;
		}
		
		.evenement p
		{
			margin:0;
			padding:0.7% 0% 0.7% 0%;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		.sousmenu_agenda
		{
			font-size:1.2em;
			margin-top:1%;
		}
		
		.selection_page a
		{
			font-size:2.2em;
		}
		
		.agenda
		{
			margin-top:1%;
		    font-size:1.2em;
		}
		
		.evenement p
		{
			margin:0;
			padding:0.3% 0% 0.3% 0%;
		}
}











/*--------------------------------------------------------------
8.0 ******************** GALERIE ********************
--------------------------------------------------------------*/



/*--------------------------------
8.1 Galerie statique
--------------------------------*/



.photos
{
	margin:4% 0% 0% 0%;
	padding:0%;
	padding-bottom:0%;
}

.galerie_portraits
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	text-align:center;
	width:70%;
	margin:auto;
	padding:0%;
	padding-bottom:3%;
}

.galerie_portraits a
{
	width:33%;
}

.galerie_portraits img
{
	width:99%;
	margin:0%;
	padding:0%;
}

.galerie
{
	width:90%;
	height:710px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	text-align:center;
	margin:auto;
}

.galerie a
{
	width:25%;
	padding:0;
	margin-bottom:-3px;
	border:0;
}

.galerie img
{
	width:99%;
	padding:0;
	margin:0;
	border:0;
	transform: scale(1);
	transition: transform 1s;
}

.galerie img:hover
{
	transform-origin: 50% 50%;
	transform:scale(0.9);
	z-index: 999;
	box-shadow:none;
}



/* @@@@@@@@@@ CASCADE DE MEDIA QUERIES POUR RENDRE ADAPTABLE LE DESIGN « TETRIS » D'AURIANE */

@media all and (max-width:1250px)
{
		.galerie
		{
			height:800px;
		}
}

@media all and (min-width:1250px) and (max-width:1485px)
{
		.galerie
		{
			height:950px;
		}
}

@media all and (min-width:1485px) and (max-width:1770px)
{
		.galerie
		{
			height:1100px;
		}
}

@media all and (min-width:1770px)
{
		.galerie
		{
			height:1000px;
			width:1275px;
		}
}



/* @@@@@@@@@@ MOBILE 1 */

@media all and (min-width:441px) and (max-width:900px)
{
		.galerie_portraits a
		{
			width:33%;
		}
		
		.galerie_portraits img
		{
			width:97%;
			margin:0%;
			padding:0%;
		}
	
		.galerie
		{
			height:720px;
			display:flex;
			flex-direction:column;
			justify-content:space-around;
			align-items:center;
			flex-wrap:wrap;
		}
		
		.galerie a
		{
			width:33%;
			margin-bottom:-6px;
		}
		
		.galerie img
		{
			flex: 1 1 auto;
			height:auto;
			max-width:160px;
			object-fit:contain;
			padding:0;
			margin:0;
		}	
}

/* @@@@@@@@@@ MOBILE 2 (pour que ça marche avec écran vraiment étroit */

@media all and (max-width:440px)
{
		.galerie_portraits a
		{
			width:33%;
		}
		
		.galerie_portraits img
		{
			width:97%;
			margin:0%;
			padding:0%;
		}
	
		.galerie
		{
			height:550px;
			display:flex;
			flex-direction:column;
			justify-content:space-around;
			align-items:center;
			flex-wrap:wrap;
		}
		
		.galerie a
		{
			width:33%;
			margin-bottom:-6px;
		}
		
		.galerie img
		{
			flex: 1 1 auto;
			height:auto;
			max-width:160px;
			object-fit:contain;
			padding:0;
			margin:0;
		}	
}



/* @@@@@@@@@@ ÉCRAN HAUT SI BESOIN */

@media all and (min-width:900px) and (min-height:1050px)
{
	
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
			.photos
			{
				margin-top:1%;
			}
}






/*--------------------------------
8.2 Lightbox
--------------------------------*/


#lightbox
{
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.8);
    text-align:center;
    display:flex;
    justify-content:center;
	align-items:center;
}

/*
#lightbox img
{
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
    margin:auto;
    border:yellow 1px solid;
}
*/

#content
{
	/*border:3px blue solid;*/
	margin-top:3%;
	margin:auto;
	width:90%;
	height: 80%;
	display:flex;
	flex-direction: column;
    justify-content:center;
	align-items:center;
}

#content img
{
	width:50%;
	height:100%;
	object-fit:scale-down;
}

#content figcaption
{
	color:white;
	font-weight:normal;
	font-family: calibri;
	font-size: 1em;
	padding-bottom: 1%;
	padding-top:1%;
	/*border:red 1px solid;*/
}










/*--------------------------------------------------------------
9.0 ******************** VIDÉOS ********************
--------------------------------------------------------------*/



.videos
{
	margin:4% 0% 0% 0%;
	padding:0%;
	width:100%;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}


.videos figure
{
	margin:0%;
	padding:0%;
	margin-bottom:3%;
}

.videos figcaption
{
	font-size:0.9em;
	width:330px;
	text-align:center;
	font-weight:lighter;
	padding-top:0.3%;
}

.videos .oeuvre
{
	font-style:italic;
	font-weight:normal;
	font-size:1.1em;
	color:#B17F4A;
	width:330px;
	text-align:center;
}

.videos .interpretes
{
	font-size:1em;
	font-weight:bold;
}

.videos .infos
{
	font-size:1em;
	font-weight:normal;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:900px)
{
		.videos figure
		{
			margin-bottom:7%;
		}
	
		.videos figcaption
		{
			font-size:1em;
		}
		
		.videos .oeuvre
		{
			font-size:1.2em;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		.videos figure
		{
			margin-bottom:3%;
		}
	
		.videos figcaption
		{
			font-size:1.05em;
			padding-top:0.5%;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		.videos figure
		{
			margin-bottom:3%;
		}
	
		.videos
		{
			margin:1% 0% 0% 0%;
		}
		
		.videos figcaption
		{
			font-size:1.1em;
			padding-top:0.7%;
		}
}










/*--------------------------------------------------------------
10.0 ******************** CONTACT ********************
--------------------------------------------------------------*/



.couverture_contact
{
	width:100%;
	min-height:75vh;
	background-image:url("../visuels/charly_mandon_contact.jpg");
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover;
	display:flex;
	margin:0%;
}

form
{
	width:40%;
	margin:auto;
	text-align:center;
	font-size:1em;
}

form div
{
	width:100%
}

input
{
	border:none;
	width:100%;
	height:40px;
	background-color:rgba(255,255,255, 0.75);
	font-size:0.6em;
	font-weight:normal;
	letter-spacing:0.1em;
	margin-bottom:15px;
	padding-left:2%;
}

input::placeholder
{
	color:black;
	font-size:0.9em;
}

#bouton
{
	width:22%;
	position:relative;
	left:80%;
}

button
{
	color:black;
	width:100%;
	height:30px;
	border:none;
	background-color:rgba(255,255,255, 0.85);
	font-family:calibri;
	font-variant:small-caps; 
	font-size:0.8em;
	font-weight:bold;
	letter-spacing:0.05em;
	text-align:center;
	cursor:pointer;
}

textarea
{
	width:100%;
	height:150px;
	background-color:rgba(255,255,255, 0.7);
	margin-bottom:5%;
	font-family:calibri;
	font-size:0.7em;
	letter-spacing:0em;
	padding-top:3%;
	border:none;
	resize:none;
	padding-left:2%;
}

textarea::placeholder
{
	color:black;
	font-size:1.1em;
	font-family:calibri;
}

.erreur
{
	font-weight:normal;
	color:white;
	background-color:rgba(0,0,0, 0.6);
	padding:2%;
	font-size:0.9em;
}

.information
{
	display:flex;
	font-family:calibri;
	font-weight:bold;
	text-align:center;
	justify-content:center;
	align-items:center;
	width:40%;
	height:15%;
	padding:1% 3% 1% 3%;
	background-color:rgba(255,255,255, 0.7);
	position:relative;
	top:20%;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:900px)
{	
		form
		{
			width:85%;
		}
		
		.information
		{
			width:80%;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		form
		{
			font-size:1.1em;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		form
		{
			font-size:1.2em;
		}
}










/*--------------------------------------------------------------
11.0 ******************** PIED DE PAGE ********************
--------------------------------------------------------------*/



footer
{
	margin:auto;
	font-size:1em;
	margin-top:2%;
}

.copyright
{
	font-size:0.7em;
	text-align:center;
}

.site_chronos
{
	text-decoration:none;
	color:black;
	font-weight: bold;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:900px)
{
		footer
		{
			margin:auto;
			margin-top:5%;
		}
	
		.copyright
		{
			font-size:0.7em;
			text-align:center;
		}
		
		.site_bubblecom
		{
			text-decoration:none;
			color:black;
			font-weight: bold;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		footer
		{
			font-size:1.1em;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		footer
		{
			font-size:1.2em;
		}
}






/*


		   CCC     II          A            OOO
		 CCC                  A A          O    O
	   CCC         II        A   A        O      O
	  CCC          II       AAAAAAA      O        O
	   CCC         II      A       A      O      O
		 CCC       II     A         A      O    O
		   CCC     II    A           A   	OOO  
		   
														 */