* {
	box-sizing: border-box;
}


/* pour les grands ecrans et navigateurs mobile */
@media all,
screen and (hover: none) and (pointer: coarse) and (orientation: landscape)   /* and (min-width: 1024px) */
{

	header {
		display: flex;
		flex-direction: column;
	}

	#banniere{
		display: flex;
		justify-content: center;
		z-index: 4;
	}

	body{
		background-color: black;
		color : white;
		font-family: Segoe UI, Arial, sans-serif;
		width: 80%;
		min-width: 800px;
		max-width: 1200px;
		margin: auto;
	}

	#header_droite {
		flex: 1;
		max-height: 300px;
		width: 77%;
		position: relative;
	}

	#logo{
		padding-right: 20px;
		height: 300px;
		max-height: 300px;
		width: auto;
	}

	#header_mobile {
		display: none;
	}

	#divmenu{
		background-image: url("img/fondmenu.png");
		background-repeat: no-repeat;   
		background-size: contain;
		margin-top: 10px;
		padding-top: 10px;
		min-width: 1000px;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		height: 110px;
		display: flex;
		justify-content: space-between;
	}

	.menu {
		z-index: 10;
	}

	.menu, .sous_menu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex-basis: content;
	}

	.bouton_menu, .deroulant{
	max-height: 60px;
	display: flex;
	}

	.bouton_menu {
		cursor: pointer;
	}
	
	.bouton_sous_menu
	{
		max-height: 30px;
		display: flex;
		cursor: pointer;
	}

	#bouton_menu:hover, #facebook:hover{
		transform: scale(1.1);
		transition: all 0.3s ease;
	}

	.sous_menu {
		display: none;
	}

	img#logosurletas{
		max-height: 100%;
		max-width: 100%;
	}

	section#contenu{
		top: 30px;
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
	}


	.corps_cadre{
		background-image: url("img/cadre_corps.png");
		background-repeat: repeat-y;
		width: 100%;
		background-size: 100%;
	}

	.contenu_corps{
		padding-left : 20px;
		padding-right : 20px;
	}



	#contenu_page{
		text-align: justify;
	}

	.pied_de_page{
		color: grey;
		text-align: center;
		/*padding-bottom: 10px;*/
	}

	p.pied_de_page {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.pied_de_page a {
		color : grey ;
		text-decoration: none;
	}

	.pied_de_page a:hover {
		color : #f7a33b;
		text-decoration: underline;
	}

	.date {
	/*border: 2px solid #f7a33b;
	background-color: #fff;
	border-radius: 10px;*/
	color: black;
	border: inherit;
	background: inherit;
	padding: 0;
	font: inherit;
	outline: inherit;
	text-align: center;
	font-size: 1em;
	width: 132px;
	height: 45px;
	border: none;
}

	.date:nth-child(odd) {
		background-image: url('img/date1.png');
		background-size: cover;
	}

	.date:nth-child(even) {
		background-image: url('img/date2.png');
		background-size: cover;
	}

	hr{
		color: #1c1c1c;
	}

}


/* Pour tous les navigateurs */

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;       /* centre la galerie horizontalement */
	gap: 5px;                     /* espacement entre les vignettes */
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;                /* centre la galerie dans la page */
  }
  
  .gallery .thumb {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 5px;
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	box-shadow: none;
	background: #fff;
  }
  
  .gallery .thumb:hover {
	box-shadow: 0 4px 10px rgba(225, 117, 9, 0.25);
	transform: scale(1.03);
	cursor: pointer;
  }
  
  /* === Lightbox === */
  
  .lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	justify-content: center;
	align-items: center;
	z-index: 999;
  }
  
  .lightbox-img {
	max-width: 90%;
	max-height: 80%;
	border-radius: 10px;
  }
  
  .lightbox .close-btn,
  .lightbox .nav {
	position: absolute;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
  }
  
  .lightbox .close-btn {
	top: 20px;
	right: 20px;
  }
  .lightbox .close-btn :hover {
	transform: scale(1.1);
  }

  .lightbox .nav.left {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
  }
  
  .lightbox .nav.right {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .lightbox img {
	filter: drop-shadow(0 0 10px #000);
  }
  
  /* === Responsive === */
  
  @media (max-width: 768px) {
	.gallery .thumb {
	  width: 100px;
	  height: 100px;
	}
  }
  
  @media (max-width: 480px) {
	.gallery .thumb {
	  width: 80px;
	  height: 80px;
	}
  }
  
  
  .close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
  }
  
  .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
  }
  
  .nav.left {
	left: 20px;
  }
  
  .nav.right {
	right: 20px;
  }
  
  .nav img, .close-btn img {
	width: 40px;
	height: 40px;
  }
  .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid #fff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	z-index: 10;
  }
  
  @keyframes spin {
	to {
	  transform: rotate(360deg);
	}
  }


  .cadre_tete_pied{
		padding: 0;
		margin: 0;
		width: 100%;
	}

.spectacle {
	color: silver;
}

.titre{
	text-align: center;
	color: #f7a33b;
	font-size: 1.2em;
}
.date_ligne{
	padding: 5px;
	margin-top: 0;
	margin-bottom: 0;
}


hr{
	color: #1c1c1c;
}

.orange {
	font-weight: bold;
	color: #f7a33b;
}
	a {
		color : grey ;
		text-decoration: none;
	}

	 a:hover {
		color : #f7a33b;
		text-decoration: underline;
	}

	p {
		margin-top:0 ;
		margin-bottom: 0;
	}

	td {
		padding: 15px;
	}

.arrondi {
	border-radius: 10px;
}

table {
	margin: auto;
}

.fb-page{
	margin-left: 100px;
}

@font-face {
	font-family: Lemonade ;
	src: url('fonts/lemonade.ttf');
}

#contenu_page img {
	margin: 5px;
}

/* pour les petits ecrans et navigateurs mobile */

@media screen and (hover: none) and (pointer: coarse)  and (orientation: portrait) /*, (max-width: 1024px)*/
{
	table {
		width: 100%;
	}
	header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 95%;
		margin: auto;
	}

	footer {
		width: 95%;
		margin: auto;
	}

	body{
		background-color: black;
		color : white;
		font-family: Segoe UI, Arial,  sans-serif;
		width: auto;
		min-width: 600px;
		font-size: 1.5em;
	}

	#logo{
		display: none;
	}

	 div#divmenu{
	 	display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-image: url("img/menumobile.png");
		background-repeat: no-repeat;  
		background-size: contain;
		padding-left: 100px;
		padding-top: 10px;
		max-height: 90vh;
		height: 1500px;
		min-width: 700px;
		position: fixed;
		top: 120px;
		left: -800px; 
		overflow-y: scroll;
    	overflow-x: hidden;
    	z-index: 13;
	}

	#banniere{
		display: flex;
		justify-content: center;
		margin-top: 120px;
		z-index: 0;
	}

	#divmenu .bouton_menu:nth-child(2n){
		margin-left: 100px;
	}

	.bouton_menu, .bouton_sous_menu, .deroulant {
		min-height: 150px;
		width: auto;
		max-width: 400px;
		max-height: 150px;
	}

	.bouton_menu, .bouton_sous_menu
	{
		cursor: pointer;
	}

	.bouton_sous_menu {
		margin-left: 200px;
		max-height: 100px;
	}


	.menu {
		max-width: 700px;
	}

	#bouton_menu{
		width : 120px;
		height : 120px;
		transition: all 0.3s ease;
	}

	#header_mobile{
		position: fixed;
		top: 0px;
		display: flex;
		justify-content: space-between;
		height: 120px;
		width: 100%;
		z-index: 1;
		background-color: #000;
	}

	#logo_mobile{
		height: 120px;
		padding-right: 40px;
	}

section#contenu{
	top: 30px;
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 95%;
	margin: auto;
	}


	.corps_cadre{
		background-image: url("img/cadre_corps.png");
		background-repeat: repeat-y;
		width: 100%;
		background-size: 100%;
	}

	.contenu_corps{
		padding-left : 20px;
		padding-right : 20px;
	}



	#contenu_page{
		text-align: justify;
	}

	.pied_de_page{
		color: grey;
		text-align: center;
		/*padding-bottom: 10px;*/
		font-size: 0.7em;
	}

	.pied_de_page a {
		color : grey ;
		text-decoration: none;
	}

	.pied_de_page a:hover {
		color : #f7a33b;
		text-decoration: underline;
	}



	#bouton_menu:hover{
		transform: scale(1.1);
	}

	.date {

		/*border: 2px solid #f7a33b;
		background-color: #fff;
		border-radius: 10px;*/
		color: black;
		border: none;
		outline: inherit;
		background: inherit;
		text-align: center;
		font-size: 1em;
		width: 160px;
		height: 55px;
	}

	.date:nth-child(odd) {
		background-image: url('img/date1.png');
		background-size: cover;
	}

	.date:nth-child(even) {
		background-image: url('img/date2.png');
		background-size: cover;
	}

}

	noscript {
		margin: auto;
		text-align: center;
	}


	@keyframes lightboxIn {
		from {opacity: 0;}
		to {opacity: 1;}
	}