* {
  box-sizing: border-box; /* Applique à tous les éléments */
}
body{
  font-family: "Roboto", sans-serif;
  color:white;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  background-color: #232323;
  font-size: 1.3vw;
}
#logo{
  width: 2%;
  height:auto;
  margin-right: auto;
  cursor: pointer;
}
#nav{
  width: 100%;
  height:16svh;
  background-color: white;
  position: fixed;
  color:black;
  z-index: 2;
}
#nav_1{
  height:7.5svh;
  width: 100%;
  background-color: #232323;
  color:white;
  display: flex;
  align-items: center;
  justify-content: end;
  gap:2%;
  padding-right: 1%;
  padding-left: 1%;
}
#nav_2{
  height:8.5svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap:2%;
  padding-left: 1%;
}
.el_nav{
  cursor: pointer;
}
#masthead{
  height: 80svh;
  width: 100%;
  display: flex;
  position: relative;
}
#left_mast{
  position: relative;
  width: 75%;
  height:100%;
  overflow: hidden;
}
#img_left{
  width: 100%;
  height:100%;
  object-fit: cover;
}
#right_mast{
  width: 25%;
  height:100%;
  padding-top: 4%;
  background-image: url('/static/images/foot/svg.png');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
#titre1{
  margin-left: 3%;
}
.crest_oaut{
  background-color: #c62038;
  padding: 0.2%;
}
.square_home{
  width: 6.5svh;
  height:6.5svh;
  background-color: #c62038;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: none;
}
#first_score{
  margin-top: 16%;
}
.score{
  position: relative;
  display: flex;
  gap:6%;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
  cursor: pointer;
  transition: all 0.5s ease;
}
.info_score{
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 32%;
  margin-left: 4%;
  pointer-events: none;
}
.span_score{
  margin-top: 1%;
  padding-bottom: 0.5%;
}
.logo_score{
  width: 7%;
  height:auto;
  pointer-events: none;
}
.logo_score_next{
  width: 5%;
  height:auto;
  margin-top: 1%;
}
#next_match{
  margin-top: 3%;
}
#is_flex{
  margin-top: 2%;
  display: flex;
}
#date{
  margin-top: 1%;
  padding-bottom: 1%;
}
#next_match_container{
  padding-top: 22svh;
  position: relative;
  width: 100%;
  height:100%;
  background-color: #121212;
  padding-bottom: 5%;
  border: 1px solid gray;
}
#rencontre{
  width: 100%;
  height: 100%;
  background-image: url('/static/images/foot/svg_big.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#container_team{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:3%;
}

#crest_ouaste{
  background-color: #c62038;
  padding: 0.5%;
  width: fit-content;
  padding-left: 3%;
  padding-right: 3%;
}



.marquee {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  color: white;
  height:4svh;
  width: 100%;
  margin-top: 1%;
  overflow: hidden;
}
.marquee-content {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  visibility: hidden;
}
.marquee_active{
  animation: marquee 5s linear infinite;
}
@keyframes marquee {
  from {
      transform: translateX(-100%);
  }
  to {
      transform: translateX(100%);
  }
}




#next_mast{
  position: absolute;
  bottom:10%;
  right:3%;
  cursor: pointer;
}

.next-button {
  width: 35px;
  height: 35px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgb(255, 255, 255);
}
.next-button::after {
  content: '➜';
  color: rgb(255, 255, 255);
  font-size: 1vw;
}

.logo_score_next_titre{
  position: absolute;
  width: 10%;
  height:auto;
  top:50%;
}
#log1{
  left:10%;
}
#log2{
  right: 10%;
}


#ev{
  cursor: pointer;
  width: fit-content;
}

.sections{
  position: relative;
  width: 100%;
  height:100%;
}
#actu{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
  gap: 3%; /* Espacement entre les cases */
  padding: 5%;

}
.btn_event{
  opacity: 0;
  transition: opacity 0.5s ease;
}
.grid-item {
  color: white;
  text-align: left;
  border-radius: 5px;
  height:30svh;
  width: 100%;
  cursor: pointer;
}
.grid-item:hover .btn_event{
  opacity: 1;
}

.text_event{
  margin-top: 1.5%;
}



button{
  background-color: transparent;
  border: 1px solid white;
  cursor: pointer;
  padding: 0% 2% 0% 2%;
  float: right;
  margin-top: 2%;
  color:white;
}



#organigrame{
  padding-left: 5%;
  padding-top: 25svh;
}


#orga{
  width: 90%;
  height:fit-content;
}

#banniere_orga{
  background-image: url('/static/images/foot/assemble.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height:45svh;
  margin-top: 3%;
  padding-bottom: 5%;
}
svg{
  background-color: transparent;
}

.line{
  width: 100%;
  height:50svh;
  display: flex;
  justify-content: center;
  gap:3%;
}

.carte{
  height:100%;
  width: 100%;

  filter: grayscale(100%);
}


#container_section_orga{
  margin-top: 10%;
  display: flex;
  gap:3%;
  width: 90%;
  margin-left: 5%;
  justify-content: center;
}

.cursor{
  cursor: pointer;
  transition: color 0.5s ease;
}
.cursor:hover{
  color: #c62038;
}
#container_section{
  background-color: #12121250;
  width: 90%;
  margin-left: 5%;
  height:100%;
  margin-top: 2%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.169);
}
#container_section_scroll{
  width: 200%;
  transition: transform 1s ease;
  display: flex;
  padding-top: 2%;
}
.section_orga{
  width: 100%;
}
.cartegorie{
  margin-top: 2%;
  width: 90%;
  display: flex;
  margin-left: 5%;
  padding: 2%;
  background-color: #1212127f;
  border: 1px solid rgba(255, 255, 255, 0.169);

}
.cat{
  background-color: #c62038;
  width: 15%;
  padding: 1%;
  text-align: center;
}
.conta{
  margin-left: 5%;
  padding-top: 1%;
  padding-bottom: 1%;
}


.is_cursor{
  cursor: pointer;
  transition: color 0.5s ease;
}
.is_cursor:hover{
  color:#c62038;
}



/* EQUIPE */

.container_equipe{
  display: flex;
  padding-bottom: 5%;
}
.right_container_equipe{
  width: 40%;
  height:100%;
  padding-top: 1%;
}
.left_container_equipe{
  width: 60%;
  height:100%;
}
.line_classement{
  display: flex;
  gap:5%;
  justify-content: center;
}
.col{
  width: 10%;
}
.square_team{
  background-color: #c62038;
  width: 18%;
}
.under_square_team{
  margin-top: 2%;
}








/* TEAM */


.line{
    width: 100%;
    height:20svh;
    display: flex;
    justify-content: center;
    gap:5%;
    pointer-events: none;
}

.square{
  background-color: transparent;
  background-image: url('/static/images/foot/maillot.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 10%;
  height:100%;
  cursor: pointer;
  position: relative;
  pointer-events: auto;
  transition: transform 0.5s ease;
}
.square:hover{
  transform: scale(1.3);
}
.square:hover .tete{
  opacity: 1;
}
#container_team_team{
  height:100%;
  width: 100%;
  padding-top: 25svh;
  padding-bottom: 5%;
}
.is_gard{
  background-image: url('/static/images/foot/gard.png')!important;

}
.name_player{

}
.tete{
  width: 20%;
  height:auto;
  position: absolute;
  z-index: 1;
  right: 0%;
  top:0%;
  opacity: 0;
  transition: all 0.5s ease;
}
.nom{
  position: absolute;
  top:-5%;
  left:-5%;
}
.prenom{
  position: absolute;
  top:8%;
  left:-5%;
}
#titre_top{
  padding-bottom: 5%;
}

/* focus player */
#container_player{
  width: 80%;
  background-color: #00000026;
  padding: 3%;
  position: relative;
  overflow: hidden;
  height:60svh;
}
#picture_player{
  position: relative;
  width: 25%;
  height:auto;
}
#container_nom_player{
  position: absolute;
  top:10%;
  left:10%;
  text-align: center;
}

#poste{
  margin-top: 10%;
}
#data_player{
  width: 80%;
  height:15svh;
  margin-left: 10%;
  margin-top: 2%;
  display: flex;
  background-color: #12121226;
  gap:5%;
  align-items: center;
  justify-content: center;
}
.data{
  width: 20%;
  text-align: center;
}
.div_container_orga{
  width: 50%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.169);
  background-color: #1212127f;
  padding: 2%;
}
#reso{
  position: absolute;
  z-index: 1;
  bottom: 2%;
  right: 0%;
  display: flex;
  width: 40%;
  height: auto;
  gap: 3%;
  justify-content: end;
  padding-right: 2%;
}
.reso_img{
  width: 6%;
  height: auto;
  cursor: pointer;

}












#reso_footer{
  position: absolute;
  z-index: 1;
  bottom: 4%;
  right: 0%;
  display: flex;
  width: 40%;
  height: auto;
  gap: 3%;
  justify-content: end;
  padding-right: 2%;
}

.reso_img_footer{
  width: 4%;
  height: auto;
  cursor: pointer;
}

#footer_top{
  background-color: #0d0d0d;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  padding-top: 7%;
  overflow: hidden;
  padding-bottom: 5%;
}

#container_nav_footer{
  width: 80%;
  height:auto;
  display: flex;
}
.container_gooter_nav{
  width: 100%;
  position: relative;
  padding-top: 2%;
  height: 100%;
}
.nav_footer{
  width: 100%;
  cursor: pointer;
  margin-top: 1%;
}
#footer{
  background-color: #090909;
  position: relative;
  width: 100%;
  height:10svh;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.5%;
}
#logo_footer{
  width: 3%;
  height:auto;

}
.first_el_footer{
  margin-top: 2.5%;
}







.is_black{
  color: #232323;
}
.is_red{
  color: #c62038;
}
.is_white{
  color: white;
}




.is_pacing{
  letter-spacing: 4px;
}
.is_pacing1{
  letter-spacing: 2px;
}
.is_titre{
  font-size: 4vw;
}
.is_titre1{
  font-size: 2.4vw;
}
.is_titre2{
  font-size: 2vw;
}
.is_titre3{
  font-size: 1.5vw;
}
.is_text{
  font-size: 1vw;
}
.is_text{
  font-size: 1vw;
}
.is_text1{
  font-size: 0.8vw;
}


.titre_font {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.text_style_font {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}


.text_font {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#resp{
  display: none;
  color:white;
  font-size: 5vw;
}



@media (max-width: 600px) {
  body{
    font-size: 4.3vw;
  }
  .is_titre{
    font-size: 7.5vw;
  }
  .is_titre1{
    font-size: 6vw;
  }
  .is_titre2{
    font-size: 5.5vw;
  }
  .is_titre3{
    font-size: 5vw;
  }
  .is_text{
    font-size: 4vw;
  }
  .is_text{
    font-size: 4vw;
  }
  .is_text1{
    font-size: 3.8vw;
  }
  #log1{
    left:5%;
  }
  #log2{
    right: 5%;
  }
  .resp{
    display: none!important;
  }
  #nav_2{
    justify-content: center;
  }
  #logo{
    width: 10%;
  }
  #nav{
    height:8svh;
    padding: 0;
    margin: 0;
  }
  #nav_1{
    height: 100%;
    padding-right: 6%;
  }
  #next_match_container{
    padding-top: 15svh;
    padding-bottom: 10%;
  }
  #masthead{
    flex-direction: column;
    height:140svh;
  }
  #left_mast{
    width: 100%;
    height:100%;
  }
  #right_mast{
    width: 100%;
    height:fit-content;
  }
  #titre1{
    width: 100%;
    text-align: center;
  }
  #actu{
    grid-template-columns: repeat(2, 1fr);
    margin-top: 10%;
  }
  #container_nav_footer{
    flex-direction: column;
  }
  #reso_footer{
    position: relative;
    gap:0%;
    margin: auto;
    margin-top: 10%;
  }
  .reso_img_footer{
    width: 15%;
    margin: auto;
  }
  #logo_footer{
    display: none;
  }
  .container_gooter_nav{
    margin-top: 5%;
  }



  #organigrame{
  }
  #container_section{
    height: fit-content;
    width: 100%;
    margin-left: 2.5%;
  }
  .cat{
    width: 36%;
  }


  .container_equipe{
    flex-direction: column;
  }
  .right_container_equipe{
    width: 100%;
  }
  .left_container_equipe{
    width: 100%;
  }
  .f_line{
    margin-top: 5%;
  }
  .square{
    width: 20%;
  }





  #picture_player{
    width: 100%;
  }
  .reso_img{
    width: 20%;
  }
  #reso{
    gap:5%;
  }
  #data_player{
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
  }
  .data{
    width: 30%;
  }

}