body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
}

section {
padding: 90px;
}

nav {
display: flex;
width: 90%;
min-width: 900px;
max-width: 1300px;
padding: 12px 24px;
justify-content: space-between;
align-items: center;

border-radius: 10px;
background: #325199;
}

.fond-stade {
display: flex;
flex-direction: column;
align-items: center;
gap: 170px;

padding: 90px;
padding-bottom: 160px;

align-self: stretch;
background-image: url('element/Images/BG-stade.svg'); /* chemin vers ton fichier */
background-size: cover; 
background-position: center;
background-repeat: no-repeat;
}

#film {
display: flex;
padding: 90px;
justify-content: center;
align-items: flex-start;
gap: 48px;
align-self: stretch;

background-color: #F9EFE4;
}

.film-card {
display: flex;
padding: 24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;

border-radius: 10px;
background: #325199;
color:#F9EFE4;
}

.film-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
color: #5F223E;
}

.film-video {
width: 100%;
}

#accessible {
display: flex;
padding: 90px;
justify-content: center;
align-items: flex-start;
gap: 48px;
align-self: stretch;

background-color: #5F223E;
}

.acces-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
padding: 24px;

color: #F9EFE4;
}

.levels {
display: flex;
padding: 24px;
width: 606px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
flex: 1 0 0;

color: #5F223E;
}

.level {
display: flex;
padding: 0px;
flex-direction: column;
overflow: hidden;

border-radius: 10px;
background: #F9EFE4;

transition: all 0.3s ease;
}

.depliant {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
cursor: pointer;
}

.depliant h4 {
  flex: 1;
}

.short-text {
  margin: 0 16px;
}

.arrow {
  width: 20px;
  transition: transform 0.3s ease;
}

.level.active .arrow {
  transform: rotate(180deg);
}

.content {
  max-height: 0;
  overflow: hidden;
  padding: 0px 24px;
  
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: start;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.level.active .content {
  max-height: 500px;
  padding: 16px 24px;
}

#citation {
text-align: center;
color: #F9EFE4;
background: #325199;
}

#palmares {
align-self: stretch;
background-color: #F9EFE4;
}

.palm {
display: flex;
align-items: flex-start;
gap: 24px;

padding-top: 24px;
padding-bottom: 24px;
}

.trophys {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;

}

.titre-trophys {
display: flex;
height: 78px;
width: 100%;
padding: 6px 24px;
align-items: center;
align-self: stretch;

border-radius: 10px;
background-color: #9AAEFB;
}

.trophy {
padding: 12px 24px;
background-color: #5F223E;
border-radius: 10px;
color: #F9EFE4;
}

#temoignage {
display: flex;
padding: 90px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 48px;
align-self: stretch;

background-color:#325199;
color: #F9EFE4;
}

.temoignage-card {
display: flex;
align-items: center;
gap: 48px;
align-self: stretch;
height: 64px;

border-radius: 10px;
background-color: #F9EFE4;
color: #5F223E;
}

.left {
flex-direction: row-reverse;
}

.left .temoignage-profil {
transform: translateX(20px);
}

.temoignage-profil {
width: 80px;
height: 80px;
aspect-ratio: 1/1;

border-radius: 80px;
transform: translateX(-20px);
}

#newsletter {
display: flex;
padding: 90px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 48px;
align-self: stretch;

background-color: #F9EFE4;
color: #9AAEFB;
}

form {
display: flex;
flex-direction: column;
gap: 24px;
}

input {
background-color: transparent;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #5F223E;
padding: 24px 0px 24px 0px;
width: 400px;

/*text du input same as p*/
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0px;
}

footer {
display: flex;
padding: 90px;
flex-direction: column;
align-items: flex-start;
gap: 64px;
align-self: stretch;

background-color: #5F223E;
}

.cta-footer {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}

.icons {
display: flex;
gap: 48px;
}

.icon {
width: 40px;
height: 40px;
}

.legals {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}

.copyright {
color: #F9EFE4;
align-self: center;
}

.menu {
display: flex;
align-items: center;
gap: 26px;
}

a {
text-decoration: none;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 23.4px;
color: #F9EFE4;

transition: color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover {
color: #9AAEFB;
}

h1 {
font-family: "Bricolage Grotesque";
font-size: 64px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

h2 {
font-family: "Bricolage Grotesque";
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin: 0px;
}

h3 {
font-family: "Bricolage Grotesque";
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin: 0px;
}

h4 {
font-family: "Bricolage Grotesque";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0px;
}

p {
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0px;
}

button {
color: var(--Creme, #F9EFE4);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 23.4px;

display: inline-flex;
height: 54px;
padding: 0px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;

border: 0px;
border-radius: 40px;
background: #325199;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
background-color: #9AAEFB;
}

.btn-outline {
border: 2px solid #F9EFE4;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-outline:hover {
background: rgba(154, 174, 251, 0.20);
}

.prune {
border-color: #5F223E;
background-color: transparent;
color: #5F223E;
}

.prune:hover {
border-color: #5F223E;
background-color: #b3306d63;
color: #5F223E;
}


.important-button {
background: #5F223E;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.important-button:hover {
background-color: #8B5E72;;
}

.border-radius {
  border-radius: 20px;
}

html {
  scroll-behavior: smooth;
}

.highlight {
  transition: background-color 0.3s ease;
  padding: 2px 4px;
  border-radius: 999px; /* super rond */
}

h1:hover .highlight {
  background-color: #9AAEFB;
}