/* Police Montserrat */
@font-face {
  font-family: Montserrat;
  src: url(content/Montserrat-VariableFont_wght.ttf) format("truetype");
  font-display: block;
}


/* Animation de rotation 3D*/
@keyframes rotation { 
  0% {
      transform: rotate3d(0,1,0,0deg);
      -webkit-transform: rotate3d(0,1,0,0deg);
  }

  100% {
      transform: rotate3d(0,1,0,360deg);
      -webkit-transform: rotate3d(0,1,0,360deg);
  }
}

@keyframes apparition {
  0% {
      transform: rotate3d(0,1,0,0deg);
      -webkit-transform: rotate3d(0,1,0,0deg);
  }

  100% {
      transform: rotate3d(0,1,0,360deg);
      -webkit-transform: rotate3d(0,1,0,360deg);
  }
}


html,body {
  min-width: 100vw;
  min-height: 100vh;

  /* Pour éviter le delai de 0.3s sur mobile quand on clique*/
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body {
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: space-around;
  margin: 0;
  overflow-x:hidden;
  font-family:'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:white;
  background: linear-gradient(0.75turn, #6f00ff, #868cec);
}



/* Titres */ 
h1{
  margin-left:5px;
	font-family: 'Montserrat', sans-serif;
  color:rgb(0, 0, 0);
  text-shadow: rgb(255, 255, 255) 2px 3px;
}

h2 {
  margin-left:5px;

	font-family: 'Montserrat', sans-serif;
  color: rgb(255, 255, 255);
  text-shadow: #73a380 2px 2px;
    
}

h3{
  margin: 5px;
	font-family: 'Montserrat', sans-serif;
  color: rgb(255, 255, 255);
}

/* Paragraphe */ 
p {
  text-justify:auto;
}

/* Image CY24 sur PC */ 
.image_haut {
  width: 35%;
  align-self: center;
  justify-self: center;
}



/* ref: https://www.youtube.com/watch?time_continue=3&v=p9nBDZisuio&embeds_referring_euri=https%3A%2F%2Fwww.dhnet.be%2F&source_ve_path=MTM5MTE3LDIzODUx&feature=emb_title */ 

/* Image du joueur dans la carte */ 
.joueur{
  height: 9em; /* Définit la taille de la carte (important) */
}


/* Overlay (blanc un peu transparent) au dessus de la carte (encadré vert)*/ 
.overlay {
  height: 100%;
  width: 105%;
  position: relative;
}

.overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4.5%;
  height: 100%;
  width: 105%;
  transition: all 0.1s;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background: url(content/img/overlay3.webp);
  background-size: 100% 100%;
  filter: grayscale(100%) brightness(200%);
  overflow: visible;

}
.overlay:hover:before {
  opacity: 0.5;
}


/* CARTE (englobe l'image et l'overlay)*/
.carte {
  flex-shrink: 0;
  transition: all 0.25s;
}


.carte:hover {
  cursor: pointer;
  z-index: 3;

  
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transition: all 0.2s;
}

.carte > .overlay > img {
  animation: apparition 450ms ease;
}

/* CARTE vide*/
.vide {
  margin: unset;
  cursor: pointer;
  z-index: 3;

  
  transform: scale(1);
  -webkit-transform: scale(1);
  
}

/* Carte sélectionné, mis en valeur avec une taille x1.2 et décale les autres cartes */ 
#carte_clique {
    z-index: 2;
    flex-shrink: 0;
    margin-right:0px;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    overflow: visible;
}


/* Animation joué quand la carte se fait sélectionner */
#carte_clique > .overlay > img {
  animation: rotation 450ms ease;
}
/* Overlay devient vert (filter unset) et se ressert*/
#carte_clique > .overlay::before {
  filter:unset;
  background-position: center;
  background-repeat: no-repeat;
  
  background-size: 95% 95%;
  opacity: 1;
  z-index: 3;
}


/* Rouge au survol pour supprimer la carte de l'équipe */ 
.equipe > div > div > #carte_clique > .overlay.overlay:hover:before {
  filter: invert(48%) sepia(69%) saturate(4957%) hue-rotate(343deg) brightness(99%) contrast(92%);
}



/* INTERFACE (englobe la navigation et l'équipe) */ 
.interface {
  margin:0px;
  padding: 0%;
  display: flex;
  width: 100%;
  height: 50%;
  flex-direction: row;
  justify-items:left;
  justify-content: flex-start;
}


/* Equipe (à droite)*/
.equipe {
  justify-self: flex-end;
  width: 55%;
  padding: 0;
  margin: 0;
  background-image: url("content/img/terrain4.png");
  background-size: 100% 100%;
  background-position: center;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  
}

/* Ligne dans l'équipe*/
.equipe > div {
  align-self: center;
  display: flex;
  width: 80%;
  flex-direction: row;
  justify-content: space-evenly
}

/* Cartes dans l'équipe */
.equipe > div > .carte {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-right: unset;
  
}


/* SELECTION (partie basse) */
.selection{
  position:sticky; /* Reste toujours sur la page*/
  bottom: 0; /* Toujours en bas*/


  width: 100%;
  min-height: 18%;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1%;
  

  margin-top: 0px;
  display: flex;
  flex-wrap: nowrap;
  margin: none;
  color: white;
  overflow-x: auto;
  align-items: end;

  scrollbar-color: #81ffa7 white; /* Change couleur de la barre scroll*/
  background-image: url("content/img/topography3.webp");
  background-size: 25%;
  background-color: #25252517;
  border-radius: 1%;

  justify-self: flex-start;
  
}

.selection > .carte {
  flex-shrink: 0;
  margin-right: -15px; /* Les cartes sont un peu empilés entres elles*/
  transition: all 0.25s;
}

.selection > .carte:hover {
  cursor: pointer;
  z-index: 3;

  
  transform: scale(1.2); /* Aggrandit la carte quand on passe la souris dessus*/
  -webkit-transform: scale(1.2);
  margin-right:0px;
  transition: all 0.2s;
  overflow: visible;
}


/* NAVIGATION */

nav {
  align-self: center;
  font-size: 1em;
  margin: 2%;
  text-align: center;
  width: 30%;
  height: 100%;
  padding: none;
  background-color: #25252517;
  margin-right: 7.5%;
  padding: 1%;
  border-radius: 1%;
  flex-shrink: 2;

  display: flex;
  flex-direction: column;
  justify-items: flex-start;
}


#menu { /* Formulaire englobant les boutons*/
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center; 
}




/* BOUTONS */
.bouton, #reset, #valider {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0.25%;
  padding: 1%;
  vertical-align: middle;
  font-family: Montserrat;
  font-weight: bold;
  background-color: #868cec; /*couleur de fond des cartes */ 
  height: 4em;
  color: white;
  text-shadow: #6f00ff;
  border: none;
  border-radius: 5px;
  flex-grow: 3;
} 

.bouton:hover {
  cursor: pointer;
  background-color: #a8f7bf;
  color:#6f00ff;
  transition: all 0.2s;
  



} 

option {
  font-family: Montserrat;
  font-weight: bold;
}

#reset {
  background-color: #ff9e81;
}

#reset:hover {
  cursor: pointer;
  background-color: #f1c5b8;
}

#valider {
  background-color: #81ffa7;
  color: white;
  color: #6f00ff;
  text-shadow: #6f00ff;
}

#valider:hover {
  cursor: pointer;
  color: #a8f7bf;
  background-color:#6f00ff;
  transition: all 0.2s;
} 

#nom_equipe {
  width: 100%;
  flex-grow: 3;
}

#nom_equipe:hover {
  cursor:text;
}

#nom_equipe::placeholder {
  color:rgba(245, 245, 245, 0.801)
}

.bouton:active {
  color: #ffffff;
  transition: all 0s;

}

/* ----------------------------------------------------------

CSS qui concerne les écrans de téléphones

---------------------------------------------------------- */ 
@media screen and (max-width: 1200px) {
  body {
    font-size: 1.8em;
  }

  .joueur{
    height: 7em; /* Définit la taille de la carte (important) */
  }

  .interface {
    flex-direction: column;
    justify-items: center;
    align-items: center;
    align-content: space-around;
    padding-right: 0%;
  }

  .image_haut {
    width: 35%;
  }

  
  nav {
    margin: 0%;
    width: 100%;
    align-self: center;
    background: none;
  }

  .selection {
    position:unset;
    bottom: unset;
    
    align-self : center;
    width: 80%;
    padding: 5%;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
  }

  .equipe {
    margin:0px;
    width: 100%;
  }


  #menu {
    flex-wrap:wrap;
    overflow: visible;
  }
  .bouton, #reset {
    font-size: 1em;
    min-width: 200px;
    max-width: 100%;
    flex-grow: 3;
  }


  .overlay:hover:before {
    opacity: 0;
  }
}