html, body {
  padding:0;
  margin:0;
  width:100%;
  scroll-behavior: smooth;
  overflow:hidden;
}


header{
	/* min-height:115px; */
	background-color:none;
	display:flex;
	
	
}

.logo{
	height:60px;
	margin-left:100px;
	margin-right:40px;
	margin-top:10px;
	padding-bottom:20px;
}

.classMenu{
font-family:Montserrat;	
outline:none;
text-decoration:none;
font-size:2em;
color:#333130;
	
}

.classMenu:hover{
	
	color:#800e0e;
}

#menu{
	width:30%;
	color:white;
	font-family:Montserrat;
	font-weight:bold;
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	align-items:center;
	text-align:center;
	display:none;
}



@keyframes growingup {
  from {
    font-size: 1em;
  }

  to {
    font-size: 1.2em;
  }
}

.menu-oneOption:hover{
	cursor:pointer;
	
	animation-duration: 0.5s;
	animation-name: growingup;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	
}

.menu-oneOption-selected {
	
	background-color:#AA7100;
	border-radius:10px;
}

.menu-oneOption-selected:hover{
	
	cursor:pointer;
}

@keyframes showingup {
  from {
	
    opacity:0;
  }

  to {
     opacity:1;
  }
}

#latest-release-annoucement{
	background: url('images/Bannière du haut2c.jpg') no-repeat center center; 
	transition: background 0.5s ease-in-out; 
    background-size: cover; 
	height:100vh;
	display:flex;
	flex-direction:row;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	
}

@media only screen and (max-width: 1024px) {
	#latest-release-annoucement{
		background: url('images/fond sans BS.jpg') no-repeat center center; 
		background-size: cover; 
		height:100vh;
		display:flex;
		flex-direction:row;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		
	}
}

#rightBlocContent{
	height:100vmin;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
		#rightBlocContent{
		height:100vh;
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
	}
}




#latest-release-leftBloc{
	width:40%;
	text-align:left;
	padding:100px;
}

@media only screen and (max-width: 1024px) {
	#latest-release-leftBloc{
	display:none;
	}
}

#latest-release-rightBloc{
	width:60%;
	margin:auto;
	
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
	#latest-release-rightBloc{
	width:80%;
	margin:auto;
	
	}
}

.latest-release-cover,.new-release-cover{
	/* border: solid;
	border-width:5px 5px 5px 5px;
	border-color:white; */
	margin-right:200px;
	height:400px;
}

@media only screen and (max-width: 1024px) {
	.latest-release-cover,.new-release-cover{
		/* border: solid;
		border-width:5px 5px 5px 5px;
		border-color:white; */
		margin-right:0px;
		height: auto; /* Hauteur ajustée automatiquement pour conserver le ratio d'aspect */
		max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur de son conteneur */
		min-width: 150px; /* Largeur minimale pour s'assurer que l'image ne devient pas trop petite */
		
		
	}
}

.listen-newRelease-button{
	font-size:1.5em;
	font-family:Montserrat;
	font-weight:bold;
	display:inline-block;
	background-color:white;
	padding:8px;
	
	animation-duration: 2s;
	animation-name: showingup;
	color:#282323;
	text-decoration:none;
	
	outline: transparent solid 2px;
	outline-offset: 2px;
}

.titleNewRelease{
		font-size:4em;
		font-family:Montserrat;
		font-weight:bold;
		color:white;
		margin-bottom:0;
}

.subTitleNewRelease{
		font-size:3em;
		font-family:Montserrat;
		font-weight:bold;
		color:white;
		margin:0;
}

#latest-release-annoucement,#old-release-annoucement,#new-release-annoucement{
	text-align:center;
	animation-duration: 2s;
	animation-name: showingup;
	overflow:scroll;
	scroll-behavior: smooth;
}

#old-release-annoucement,#new-release-annoucement{
	padding-top:60px;
	/* background-color:#F9F9F7; */
	/* background-color:white; */
	text-align:center;
	overflow:hidden;
}

.oldRelease-title, .newRelease-title{
		font-size:3em;
		font-family:Montserrat;
		font-weight:bold;
		color:#222224;
		
}

#previous-release-bloc{
	/*background-color:#940b01;*/
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px 10px;
	margin-bottom:400px;
}

#new-release-bloc{
	/*background-color:#940b01;*/
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px 10px;
	margin-bottom:250px;
}

#previous-release-bloc, #new-release-bloc  > div{
	text-align:center;
}

.title1{
		font-size:1.5em;
		font-family:Montserrat;
		font-weight:bold;
		color:white;
}

.previous-release-cover,.upcoming-release-cover,.new-release-cover{
	height:600px;
	margin:auto;
	
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.previous-release-cover,.new-release-cover:hover{
	cursor:pointer;
}

#upcoming-release-annoucement{
	padding-top:60px;
	background-color:#F9F9F7;
	text-align:center;
	display:none;
}

#upcoming-release-bloc{
	background-color:#F9F9F7;
	text-align:center;
	padding-top:50px;
	display:none;
}

.upcomingRelease-title{
		font-size:3em;
		font-family:Montserrat;
		font-weight:bold;
		color:#222224;
		margin-bottom:0;
}





.legend{
	font-size:1.5em;
	font-family:Montserrat;
	font-weight:bold;
	display:inline-block;
	padding:8px;
	color:#282323;
	text-decoration:none;
	outline: transparent solid 2px;
	outline-offset: 2px;
}

.listen-button{
	font-size:1.5em;
	font-family:Montserrat;
	font-weight:bold;
	display:inline-block;
	
	padding:8px;
	
	animation-duration: 2s;
	animation-name: showingup;
	color:#282323;
	text-decoration:none;
	
	outline: transparent solid 2px;
	outline-offset: 2px;
}

@keyframes changingbackgroundcolor {
  from {
	
    background-color:white;
  }

  to {
    background-color:#F4F4F4;
  }
}

.listen-button:hover{
	cursor:pointer;
	background-color:#F4F4F4;
	color:#3F3C35;
	
	animation-duration: 0.5s;
	animation-name: changingbackgroundcolor;
}

#pressBloc{
	text-align:center;
	
}

.pressLogo{
	height: auto; /* Hauteur ajustée automatiquement pour conserver le ratio d'aspect */
	max-width: 30%; /* S'assure que l'image ne dépasse pas la largeur de son conteneur */
	
	margin:auto;
	
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

@media only screen and (max-width: 1024px) {
	
	.pressLogo{
	height: auto; /* Hauteur ajustée automatiquement pour conserver le ratio d'aspect */
	max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur de son conteneur */
	
	margin:auto;
	
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	}
}


.pressLogo:hover{
	cursor:pointer;
}

.pressBloc{
	margin-bottom:100px;
	
}

.aRR{
	color:#DBDBDB;
	font-size:0.9em;
	text-align:center;
	font-family:Montserrat;
}

#contact-bar{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	margin:auto;
	margin-top:40px;
	margin-bottom:40px;
	width:50%;
	text-align:center;
	align-items:center;
}

.social-logo{
	max-height:40px;
}

.social-logo:hover{
	cursor:pointer;
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
	.social-logo{
	max-height:60px;
	opacity:1;
}

#contact-bar{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 50px;
	margin:auto;
	margin-top:40px;
	margin-bottom:40px;
	width:100%;
	text-align:center;
	align-items:center;
	opacity:0.7;
}
	
}

#endOfSite{
display:none;	
		
}


@media only screen and (max-width: 1024px) and (orientation: portrait) {
	#endOfSite{
		display:block;
		height:100vh;
		
	}
}