html {
scroll-behavior: smooth;
}
  
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
  
@font-face {
font-family: police1;
src: url(fonts/arco/ARCO.ttf);
}
  
@font-face {
font-family: police2;
src: url(fonts/Madimi_One/MadimiOne-Regular.ttf);
}
  
@font-face {
font-family: police3;
src: url(fonts/Fredoka_One1/FredokaOne-Regular.ttf);
}
  
/* section 1 */
#section1 {
background-color: #5C2FFF;
font-family: police1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
scroll-snap-align: start;
padding-top: 100px;
}
  
#section1 .title {
font-size: 8em;
font-weight: bold;
color: #F9FF00;
margin-top: 0;
}
  
.menu-top, .menu-bottom, .menu-left {
position: absolute;
display: flex;
gap: 10px;
font-family: police1;
}
  
.menu-top {
top: 10px;
left: 10px;
}
  
.menu-bottom {
bottom: 10px;
right: 10px;
}
  
.menu-left {
bottom: 10px;
left: 10px;
}
  
.menu-item {
background-color: #DB4EFF;
color: #5C2FFF;
padding: 10px 15px;
border-radius: 8px;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
}
  
.menu-item:hover {
background-color: #5C2FFF;
color: #F9FF00;
}
  
.info {
font-family: police2;
font-size: 2.2em;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
color: #fff;
margin-top: 50px;
}
  
.info div:nth-child(2) {
color: #DB4EFF;
}
  
.info div:nth-child(3) {
color: #F9FF00;
}
  
/* sections différentes */
#restauration,
#charte,
#infos-pratiques,
#developpement-durable,
#environnement {
background-color: #5C2FFF;
color: #F9FF00;
font-family: police1;
padding: 80px 10vw;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
  
.charte-title {
font-size: 6em;
font-weight: bold;
margin-top: 30px;
margin-bottom: 25px;
color: #F9FF00;
}
  
.charte-text {
font-family: police2;
font-size: 1.8em;
line-height: 1.6;
max-width: 1000px;
flex-grow: 1;
margin-top: 150px;
}
  

/* section 2 : animation texte */
#section2 {
background-color: #F9FF00;
color: #5C2FFF;
position: relative;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
  
.text-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
  
.animated-text {
font-family: police1;
font-size: 12vw;
font-weight: bold;
position: absolute;
white-space: nowrap;
animation-duration: 12s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
  
.animated-text:nth-child(1) {
top: 10%;
animation-name: slide-right;
}
  
.animated-text:nth-child(2) {
top: 30%;
animation-name: slide-left;
}
  
.animated-text:nth-child(3) {
top: 50%;
animation-name: slide-right;
}
  
.animated-text:nth-child(4) {
top: 70%;
animation-name: slide-left;
}
  
@keyframes slide-right {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
  
@keyframes slide-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
  
/* section 4 : tickets */
#section4 {
background-color: #DB4EFF;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
overflow: hidden;
}
  
.ticket-container {
display: flex;
justify-content: space-between;
width: 55%;
height: 80%;
align-items: center;
gap: 50px;
}
  
.ticket {
background-color: #5C2FFF;
border-radius: 20px;
box-shadow: 6px 6px 0 #fffc00;
width: 40%;
height: 400px;
padding: 2rem;
text-align: center;
text-decoration: none;
color: #F9FF00;
font-weight: bold;
font-family: police1;
font-size: 2rem;
text-transform: uppercase;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.9;
display: flex;
justify-content: center;
align-items: center;
}
  
.ticket:hover {
transform: scale(1.05);
opacity: 1;
}
  
.ticket-text {
font-family: police3;
font-size: 20px;
font-weight: bold;
color: #F9FF00;
margin: 10px 0;
text-transform: uppercase;
}
  
.left-ticket, .right-ticket {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
  
/* page programmation 6 juillet */
body.six-juillet {
background-color: #5C2FFF;
font-family: police3;
color: #F9FF00;
text-align: center;
padding: 2rem;
}
  
.titre-page {
font-size: 4rem;
margin-bottom: 2rem;
font-weight: bold;
font-family: police1;
}
  
.artistes-container {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
  
.artiste-bloc {
background-color: #e46eff;
border-radius: 20px;
box-shadow: 6px 6px 0 #fffc00;
width: 250px;
padding: 1rem;
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.8;
margin-bottom: 1rem;
}
  
.artiste-bloc:hover {
transform: scale(1.05);
opacity: 1;
}
  
.artiste-bloc img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease;
}
  
.artiste-bloc:hover img {
transform: scale(1.05);
}
  
.artiste-bloc h2 {
font-size: 1.1rem;
font-weight: bold;
color: #F9FF00;
margin: 1rem 0 0.5rem 0;
font-family: police1;
}
  
.genre {
background-color: #a568e5;
color: #311b92;
border-radius: 10px;
padding: 0.4rem 0.8rem;
font-weight: bold;
display: inline-block;
margin-top: 0.5rem;
font-size: 0.9rem;
}
  
/* page programmation 5 juillet */
body.cinq-juillet {
    background-color: #5C2FFF;
    font-family: police3;
    color: #F9FF00;
    text-align: center;
    padding: 2rem;
  }
  


#page-5-juillet {
    background-color: #5C2FFF; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    text-align: center;
}

.rectangle {
    background-color: #F9FF00; 
    color: #5C2FFF; 
    width: 22%; 
    padding: 20px;
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em; 
    font-weight: bold;
    text-transform: uppercase;
}



.titre-page {
    font-size: 73px;
    margin-bottom: 10rem;
    font-weight: bold;
    font-family: police1;
    margin-top: 20px;
}

.artistes-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 10rem;
}


.artiste-bloc {
    background-color: #e46eff;
    border-radius: 20px;
    box-shadow: 6px 6px 0 #fffc00;
    width: 250px;
    padding: 1rem;
    position: relative;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.artiste-bloc:hover {
    transform: scale(1.05);
    opacity: 1;
}

.artiste-bloc img {
    width: 100%;
    height: 200px; 
    object-fit: cover; 
    border-radius: 10px;
    transition: all 0.3s ease;
}

.artiste-bloc h2 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #F9FF00;
    margin: 1rem 0 0.5rem 0;
    font-family: police1;
}

.genre {
    background-color: #a568e5;
    color: #311b92;
    border-radius: 10px;
    padding: 0.4rem 0.8rem;
    font-weight: bold;
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}






@media screen and (max-width: 768px) {
/* Section 1 */
#section1 {
padding: 3rem 1rem;
text-align: center;
}
  
#section1 .title {
font-size: 50px;
text-align: center;
}
.info {
font-size: 1.2em;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
align-items: center;
text-align: center;
}
  
/* menu */
.menu-item {
font-size: 10px;
padding: 8px 12px;
}
  
/* texte animé section 2 */
.animated-text {
font-size: 10vw;
}
  
.ticket-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    padding-top: 20px;
  }
  
  
#section4 {
    display: block;
}

  
.ticket {
width: 50%;
height: auto;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
margin: 0 auto;
}

.ticket-text {
   font-size: 4vw;


}

  

  
/* titres pages */
.titre-page {
font-size: 2.5rem;
margin-top: 1rem;
margin-bottom: 3rem;
text-align: center;
}
  
/* blocs artistes */
.artistes-container {
gap: 1rem;
margin-top: 2rem;
justify-content: center;
}
  
.artiste-bloc {
width: 100%;
max-width: 300px;
margin: 0 auto 1rem auto;
text-align: center;
}
  
.artiste-bloc img {
height: 180px;
object-fit: cover;
}
  
.artiste-bloc h2 {
font-size: 1rem;
}
  
.genre {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
}
  
/* sections pages */
#restauration,
#charte,
#infos-pratiques,
#developpement-durable,
#environnement {
padding: 60px 5vw;
text-align: center;
font-size: 15px;
}
  
.charte-title {
font-size: 2.5em;
text-align: center;
}
  
.charte-text {
font-size: 1.1em;
margin-top: 50px;
text-align: center;
}
  
/* page 5 juillet */
#page-5-juillet {
flex-direction: column;
padding: 2rem 1rem;
align-items: center;
text-align: center;
}
  
.rectangle {
width: 80%;
font-size: 1.2em;
text-align: center;
}
}