html {
    scroll-behavior: smooth;
}





  @font-face {
    font-family: 'punk';
    src: url('Punk Typewriter.otf') format('opentype');
}

/*Pour les grand écrans*/

@media (min-width: 769px) {
	
	
	body {
  
    margin:0px;
    padding:0px;
    background-color : #161616;
	text-align:center;
  
   /*background-image: linear-gradient(to right, rgb(234,234,238) , rgb(228,228,230));*/

  }
	
	
	.navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000; /* Assurez-vous que la barre reste au-dessus des autres éléments */
        background-color: #161616; /* Couleur de fond */
    }
	
		.nav_title{
		font-family: 'punk', sans-serif;
		color:#DEDEDE;
		font-size: 4em;
				}
		
		.logo_img{
			display:none;
			
		}
		
		.img_sc_1{
			display:none;
		}
		
		.div_logo_mini {
		 width: 100%;
			height: 1200px;
			background-color: black;
			
		}
		.div_logo_mini img{
			width:80%;
			
		}

		
		.navbar{
		background-color: #161616;

		}
		.navbar-brand{
		color : red;
		}



		.flex-container{
		  display: flex;
		  display: -webkit-flex;
		  flex-direction: column;
		  /*background-image: linear-gradient(to right, rgb(230, 36, 36) , rgb(223, 210, 210));*/
		  align-items: center;

		}


		.blc_ord{

		width:50%;
		min-height:100px;
		margin-bottom:15px;
		/*margin-left:10px;*/
		background-color: #161616;
		border-radius: 10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		font-family: 'Poppins', sans-serif;
		margin-bottom:50px;
		border:1px greenyellow;
		}

		.ord_header{
		border-radius: 10px 10px 0 0;
		background-color:greenyellow;
		width:100%;
		height:50px;
		text-align: center;
		font-family: arial black;
		}

		.ord_delay{
		margin-left:10px;
		font-size:2.5em;
		}


		.logo_img{
		width:300px;
		}

		.ord_num{


		color:white;
		}


		.ord_body{

		/*background-color:white;*/
		width:98%;
		min-height:50px;
		padding-left:5px;
		/*margin-bottom: 20px;*/
		text-align: center;

		}

		.ord_body img{
		max-width: 100%;
		padding :10px;
		}

		.ord_info{
		display: flex;
		flex-direction: column;
		border-top-style: dotted;
		text-transform:uppercase;
		text-align: left;
		color: #DEDEDE;
		}

		.ord_inf_title{
		color:#DEDEDE;
		text-transform:uppercase;
		text-decoration: underline;

		}



		.ord_footer{
		border-radius: 0px 0px 10px 10px;
		background-color:greenyellow;
		width:100%;
		min-height:15px;
		text-align: center;
		padding-top : 5px;
		}
		/*Quand la date de concert est dépassée*/
		.ord_footer_off{
		border-radius: 0px 0px 10px 10px;
		background-color:grey;
		width:100%;
		min-height:15px;
		text-align: center;
		padding-top : 5px;
		}


		.container_hide{

		width:100%;
		min-height:100px;

		}

		.navbar{
		position: fixed;
		width: 100%;

		}


		#bt_nav_prg{
		font-size: 20px;
		/*color:rgb(4, 250, 45);*/
		color:white;
		padding-right: 25px;
		padding-top:50px;

		}

		#bt_nav_lst{
		font-size: 20px;
		color:white;
		padding-right: 25px;
		padding-top:10px;
		}

		#bt_nav_reload{
		font-size: 20px;
		color:white;
		padding-top:10px;
		}


		.button {
		background-color: #4CAF50; /* Green */
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		}
		.button3 {background-color: #f44336;} /* Red */



		/*BLOC GROUPE*/

		.grp_bloc_main{
		width: 100%;
		height: 2500px;
		   margin-top:10px;
		background-color: #161616;
		color:#DEDEDE;
		text-align: center;


		}


		.grp_bloc_main img{
		width:100%;
		}


		.grp_bloc_main h1{
		font-family: 'punk', sans-serif;
		margin-top: 50px;
		font-size:10em;
		}
		.grp_bloc_main h2{
		color:#DEDEDE;
		font-size: 3em;
		padding: 100px;
		
		}

		.grp_bloc_main p{
		font-size: 2.5em;
		margin-top: 20px;
		}
		.line_deco{
			width:500px;
			margin-top:50px;
		}

		.nav_title{
		font-family: 'punk', sans-serif;
		color:#DEDEDE;
		font-size: 3em;
				}
		.grp_bloc_divided{
		width: 100%;
		height: 2000px;
		background-color: #161616;
		margin-top:350px;
		  }
	
		.grp_bloc_divided img{
			width:50%;
		}
			
			
		.blc_concert_h1{
		font-family: 'punk', sans-serif;
		color:#DEDEDE;
		font-size: 10em;
		text-align: center;
		margin-top: 50px;
		background-color:#161616;

		}

		.concert_bloc_divided{
		width: 100%;
		height: 500px;
		background-color: #161616;


		}

		.medias_bloc_divided{
		width: 100%;
		height: 1500px;
		background-color: #161616;


		}
		.medias_bloc_divided img{
			width:100%;
		}


		.img_sc_2{
			display:none;
		}


		.contacts_bloc_divided{
		width: 100%;
		height: 1000px;
		background-color: #161616;
		
		}
		
		.contacts_bloc_divided img{
			width:100%;
		}

		.contact-form{
		padding: 10px;
		width:100%;
		}


		.media_bloc_main{
		width: 100%;
		min-height: 1000px;
		 margin-top:10px;
		background-color: #161616;
		color:#DEDEDE;
		text-align: center;
		   
		}

		/*GALLERIE PHOTOS*/
		.gallery img {
			width: 150px;
			margin: 5px;
			cursor: pointer;
		}

		#fullscreenModal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			text-align: center;
			justify-content: center;
			align-items: center;
			z-index: 1000;
		}

		#fullscreenModal img {
			max-width: 90%;
			max-height: 90%;
			margin: auto;
		}
		
		
		.grp_bloc_ctc{
			background-color:#161616;
			margin-top:100px;
			color:#DEDEDE;
		}
		
		.footer{
			color:#DEDEDE;
			text-align:center;
		}
		
		/*contact-form*/
		.contact-form{
			width:100%;
		}


		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #f00000; /* Couleur de fond */
			color: white; /* Couleur du texte */
			text-align: center;
			padding: 10px;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Effet d'ombre */
			width : 100%;
			height : 500px;
		}




		
}

/*/Pour les grand écrans*/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/* Pour les téléphones (écrans en dessous de 768px) ------------------------------------------------------------*/
@media (max-width: 768px) {
	
	
	.logo_img_bs{
			display:none;
			
			
		}
	
	
	body {
  
    margin:0px;
    padding:0px;
    background-color : #161616;
  
   /*background-image: linear-gradient(to right, rgb(234,234,238) , rgb(228,228,230));*/

  }
	
	
	
			
		.div_logo_mini {
		 width: 100%;
			height: 800px;
			background-color: black;
			
		}
		.div_logo_mini img{
			width:100%;
		}

		.navbar{
		background-color: #161616;

		}
		.navbar-brand{
		color : red;
		}



		.flex-container{
		  display: flex;
		  display: -webkit-flex;
		  flex-direction: column;
		  /*background-image: linear-gradient(to right, rgb(230, 36, 36) , rgb(223, 210, 210));*/
		  align-items: center;

		}


		.blc_ord{

		width:95%;
		min-height:100px;
		margin-bottom:15px;
		/*margin-left:10px;*/
		background-color: #161616;
		border-radius: 10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		font-family: 'Poppins', sans-serif;
		}

		.ord_header{
		border-radius: 10px 10px 0 0;
		background-color:greenyellow;
		width:100%;
		height:50px;
		text-align: center;
		font-family: arial black;
		}
		/*quand la date de concert est depassée*/
		.ord_header_off{
		border-radius: 10px 10px 0 0;
		background-color:grey;
		width:100%;
		height:50px;
		text-align: center;
		font-family: arial black;
		}
		

		.ord_delay{
		margin-left:10px;
		font-size:2.5em;
		}


		.logo_img{
		width:300px;
		}

		.ord_num{


		color:white;
		}


		.ord_body{

		/*background-color:white;*/
		width:98%;
		min-height:50px;
		padding-left:5px;
		/*margin-bottom: 20px;*/
		text-align: center;

		}

		.ord_body img{
		width: 100%;
		padding :10px;
		}

		.ord_info{
		display: flex;
		flex-direction: column;
		border-top-style: dotted;
		text-transform:uppercase;
		text-align: left;
		color: #DEDEDE;
		}

		.ord_inf_title{
		color:#DEDEDE;
		text-transform:uppercase;
		text-decoration: underline;

		}



		.ord_footer{
		border-radius: 0px 0px 10px 10px;
		background-color:greenyellow;
		width:100%;
		min-height:15px;
		text-align: center;
		padding-top : 5px;
		}
		
		.ord_footer_off{
		border-radius: 0px 0px 10px 10px;
		background-color:grey;
		width:100%;
		min-height:15px;
		text-align: center;
		padding-top : 5px;
		}


		.container_hide{

		width:100%;
		min-height:100px;

		}

		.navbar{
		position: fixed;
		width: 100%;

		}


		#bt_nav_prg{
		font-size: 20px;
		/*color:rgb(4, 250, 45);*/
		color:white;
		padding-right: 25px;
		padding-top:50px;

		}

		#bt_nav_lst{
		font-size: 20px;
		color:white;
		padding-right: 25px;
		padding-top:10px;
		}

		#bt_nav_reload{
		font-size: 20px;
		color:white;
		padding-top:10px;
		}


		.button {
		background-color: #4CAF50; /* Green */
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		}
		.button3 {background-color: #f44336;} /* Red */



		/*BLOC GROUPE*/

		.grp_bloc_main{
		width: 100%;
		height: 1000px;
		   margin-top:10px;
		background-color: #161616;
		color:#DEDEDE;
		text-align: center;


		}


		.grp_bloc_main img{
		width:100%;
		}


		.grp_bloc_main h1{
		font-family: 'punk', sans-serif;
		margin-top: 50px;
		}
		.grp_bloc_main h2{
		color:#DEDEDE;
		font-size: 1.5em;
		padding: 20px;
		}

		.grp_bloc_main p{
		font-size: 1.3em;
		margin-top: 20px;
		}


		.nav_title{
		font-family: 'punk', sans-serif;
		color:#DEDEDE;
		font-size: 3em;
				}
		.grp_bloc_divided{
		width: 100%;
		height: 500px;
		background-color: #161616;
		margin-top:350px;
		  }
	
		.grp_bloc_divided img{
			width:100%;
		}
			
			
		.blc_concert_h1{
		font-family: 'punk', sans-serif;
		color:#DEDEDE;
		font-size: 3em;
		text-align: center;
		margin-top: 50px;
		background-color:#161616;

		}

		.concert_bloc_divided{
		width: 100%;
		height: 500px;
		background-color: #161616;


		}

		.medias_bloc_divided{
		width: 100%;
		height: 300px;
		background-color: #161616;


		}
		.medias_bloc_divided img{
			width:100%;
		}
		.img_bs_2{
			display:none;
		}
		

		.contacts_bloc_divided{
		width: 100%;
		height: 500px;
		background-color: #161616;
		
		}
		
		.contacts_bloc_divided img{
			width:100%;
		}

		.contact-form{
		padding: 10px;
		}


		.media_bloc_main{
		width: 100%;
		min-height: 1000px;
		   margin-top:10px;
		background-color: #161616;
		color:#DEDEDE;
		text-align: center;
		   
		}

		/*GALLERIE PHOTOS*/
		.gallery img {
			width: 150px;
			margin: 5px;
			cursor: pointer;
		}

		#fullscreenModal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			text-align: center;
			justify-content: center;
			align-items: center;
			z-index: 1000;
		}

		#fullscreenModal img {
			max-width: 90%;
			max-height: 90%;
			margin: auto;
		}
		
		
		.grp_bloc_ctc{
			background-color:#161616;
			margin-top:100px;
			color:#DEDEDE;
		}
		
		.footer{
			color:#DEDEDE;
			text-align:center;
		}
		
		/*contact-form*/
		.contact-form{
			width:100%;
		}
		
		.bottom-bar {
				position: fixed;
				bottom: 0;
				width: 100%;
				background-color: #161616;
				color: white;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: Arial, sans-serif;
			}

		.event-date {
			font-size: 20px;
			font-weight: bold;
			color: greenyellow; /* Couleur dorée pour attirer l'attention */
			background-color: #222; /* Fond sombre pour le contraste */
			padding: 8px 5px;
			border-radius: 5px;
			display: inline-block;
			box-shadow: 2px 2px 10px rgba(173,255,47, 0.5);
			text-transform: uppercase;
			letter-spacing: 1px;
			animation: pulse 2s infinite alternate;
			text-align:center;
		}

		.event-date a {
				color: greenyellow; /* Couleur du lien */
				text-decoration: none; /* Supprime le soulignement */
			}

			.event-date a:visited {
				color: greenyellow; /* Couleur après visite */
			}

			.event-date a:hover, 
			.event-date a:focus {
				color: greenyellow; /* Garde la couleur au survol et au focus */
				text-decoration: underline; /* Ajoute un soulignement au survol si besoin */
			}



		/* Effet léger de pulsation */
		@keyframes pulse {
			0% {
				transform: scale(1);
				opacity: 1;
			}
			100% {
				transform: scale(1.05);
				opacity: 0.8;
			}
		}
	


		.social-icons {
			display: flex; /* Alignement des icônes en ligne */
			gap: 15px; /* Espacement entre les icônes */
		}

		.social-icons a {
			color: white;
			font-size: 34px;
			text-decoration: none;
			transition: color 0.3s ease;
		}

		.social-icons a:hover {
			color: red;
		}
				
				
	/*menu anim*/	

    .concert-ticker {
      height: 100px;
      overflow: hidden;
      position: relative;
      background: #111;
      border: 2px solid #0f0;
      border-radius: 8px;
      box-shadow: 0 0 10px #0f0;
      margin-bottom: 20px;
    }

    .ticker-content {
      display: flex;
      flex-direction: column;
      animation: scroll-up 12s linear infinite;
      will-change: transform;
    }

    .concert-date {
      text-align: center;
      color: #0f0;
      font-size: 16px;
      padding: 10px;
      line-height: 1.3;
      height: 100px;
      box-sizing: border-box;
    }

    .concert-date strong {
      color: #ff0;
    }

    @keyframes scroll-up {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-300px); } /* 3 dates x 100px */
    }

    .social-icons {
      text-align: center;
    }

    .social-icons a {
      color: white;
      margin: 0 5px;
      text-decoration: none;
      font-size: 25px;
    }
	
		
}