@font-face {
  /*enregristrement d'une nouvelle police*/
  font-family: 'StoryScript';
  src: url(../fonts/StoryScript-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.storyscript {
  /*classe à utiliser si besoin*/
  font-family: 'StoryScript';
}

.center {
  text-align: center;
}

.biggertext {
  font-size: large;
}

body {
  font-family: 'StoryScript';
  background-color: #313647;
  color: #A3B087;
  cursor: url(../img/Cursuer1.png), auto;
  /* changement du cuseur */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* vh = hauteur de l’écran */
  margin: 0;
}

footer img {
  float: right;
}

.text {
  margin: auto;
}

a:hover {
  cursor: url(../img/curseur2.png), auto;
  /* fait en sorte que le cuseur se transforme quand on passe sur un lien */
}

h1 {
  text-align: center;
  display: inline-block;
  color: #DBAF00;
  font-size: 32px;
}

img {
  width: 75px;
  height: 75px;
  position: relative;
  float: left;
  padding-top: 5px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

footer {
  background-color: #435663;
  width: 100%;
  font-size: large;
  display: inline-block;
  min-width: fit-content;

}

.paragraphe4 {
  padding-left: 25px;
  padding-top: 10px;
}

a {
  color: #FFF8D4;
}

a:hover,
radio:hover {
  color: #435663;
  background-color: #FFF8D4;
  text-decoration: none;
}

.banere {
  display: inline-block;
  min-width: fit-content;
  width: 100%;
  text-align: center;
  background-color: #435663;
}

.bigimg {
  float: right;
  position: relative;
  width: 250px;
  height: 250px;
}

.bigbigimg {
  margin: auto;
  width: 1250px;
  height: 750px;
}


.grid {
  /*grille pour les images*/
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 colonnes égales */
  gap: 50px;
  /* espace entre images */
  width: min(150px);
  float: left;
  margin-right: 300px;

}

.paragraphe1 {
  max-width: 700px;
  line-height: 1.6;
  /* espace entre les lignes */
  text-align: justify;
  /* centre et aligne le texte */
  text-justify: inter-word;
  /* ajuste l'espacement entre les mots */
  font-size: 20px;
  margin-left: 700px;
  color: #A3B087;
}

.paragraphe3 {
  max-width: 1100px;
  line-height: 1.6;
  /* espace entre les lignes */
  text-align: justify;
  /* centre et aligne le texte */
  text-justify: inter-word;
  /* ajuste l'espacement entre les mots */
  font-size: 22px;
  margin: auto;
  color: #A3B087;
}

.paragraphe2 {
  max-width: 700px;
  /* largeur maximale du texte (à ajuster) */
  line-height: 1.6;
  /* espace entre les lignes */
  text-align: justify;
  /* aligne les lignes à gauche et à droite */
  text-justify: inter-word;
  /* ajuste l'espacement entre les mots */
  font-size: 20px;
  margin-right: 50px;
  color: #A3B087;
}

li {
  /* le menu */
  display: inline;
  margin-right: 100px;
  padding: 25px;
  text-transform: uppercase;
}

ul {
  /*le menu*/
  text-align: center;
}

.KT:hover {
  /* fait en sorte que quand on passe sur l'image T1 ca par en image kt*/
  content: url("../img/KT.png");
}

.KT {
  /*L'image de l'équipe esport*/
  margin: auto;
  width: 1250px;
  height: 750px;

}

.imgseule {
  width: 550px;
  height: 550px;
  display: block;
  float: right;
  position: relative;
  margin-right: auto;
}

.alin {
  display: none;
  /*en responsive, la grille d'images devient aligné.*/
}

.carousel {
  /* carrousel des champions automatique */
  width: 1000px;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.slides {
  /* fait en sorte que les images défilent et ne soient pas déformées */
  display: flex;
  width: 100%;
  animation: slide 1026s linear infinite;
  /* environ 6s par image */
}


.slide {
  /* image + texte */
  width: 100%;
  flex-shrink: 0;
  /* empeche l'image de changer de forme */
  text-align: center;
}

.slide img {
  /* fait en sorte que l'image prenne toute la place disponible */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {

  /* créer l'animation de défilement */
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-17000%);
    /* déclale la premiere image de 170 fois sa taille vers la gauche pour laisser places aux autres images */
  }
}

.carousel2 {
  /* Deuxième caroussel avec bouton pour le défilement pour les rôles */
  width: 1000px;
  height: 700px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}

/* Cache les boutons radio */
.carousel2 input[type="radio"] {
  display: none;
}

/* Conteneur des slides */
.slides2 {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Chaque slide */
.slide2 {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* empile l’image et le texte */
  align-items: center;
  justify-content: flex-start;
  /* fait en sorte que le texte soit centrer  et aligne */
  text-align: center;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}

.slide2 img {
  width: 100%;
  height: 80%;
  /* l’image prend une partie du carrousel pour laisser place au texte */
  object-fit: cover;
  border-radius: 8px;
}

.slide2 p {
  margin-top: 10px;
  line-height: 1.4;
  max-width: 90%;
}

/*Position des images (slide) selon le bouton sélectionné et que le carrousel tourne en fonction du bouton que l'on clique */
#slide1:checked~.slides2 {
  transform: translateX(0%);
}

#slide2:checked~.slides2 {
  transform: translateX(-100%);
}

#slide3:checked~.slides2 {
  transform: translateX(-200%);
}

#slide4:checked~.slides2 {
  transform: translateX(-300%);
}

#slide5:checked~.slides2 {
  transform: translateX(-400%);
}

/* Flèches */
.arrows label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* permet de faire en sorte que la fleche soit au millieu du caroussel ( verticalement) */
  font-size: 200%;
  color: white;
  background: #313647;
  padding: 10px;
  border-radius: 50%;
  cursor: url(../img/curseur2.png), auto;
  z-index: 10; /* fait en sorte que la flèche soit en premier plan */

}

.arrows label:hover { /* change la couleur du fond de la flèche quand l'on passe avec la souris dessus */
  background: rgba(0, 0, 0, 0.7);
}

/* Position flèches */
.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/*Affichage des flèches selon l'image ( change les flèche pour changer les liens )*/
#slide1:checked~.arrows .s1 {
  display: block;
}

#slide2:checked~.arrows .s2 {
  display: block;
}

#slide3:checked~.arrows .s3 {
  display: block;
}

#slide4:checked~.arrows .s4 {
  display: block;
}

#slide5:checked~.arrows .s5 {
  display: block;
}

/* Cache toutes les flèches par défaut */
.arrows label {
  display: none;
}

table {
  /*Le tableau avec les statistiques économiques*/
  width: 90%;
  margin: 20px auto;
  border-collapse: collapse;
  font-family: 'StoryScript';
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px 15px;
  text-align: left;
  vertical-align: top;
}

th {
  background-color: #222;
  color: #fff;
}

/*Media Queries*/

@media only screen and (max-device-width: 1050px) {
  .paragraphe1 {
    max-width: 1100px;
    line-height: 1.6;
    /* espace entre les lignes */
    text-align: justify;
    /* aligne les lignes à gauche et à droite */
    text-justify: inter-word;
    /* ajuste l'espacement entre les mots */
    font-size: 22px;
    margin: auto;
    color: #A3B087;

  }

  .paragraphe2 {
    max-width: 1100px;
    line-height: 1.6;
    /* espace entre les lignes */
    text-align: justify;
    /* aligne les lignes à gauche et à droite */
    text-justify: inter-word;
    /* ajuste l'espacement entre les mots */
    font-size: 22px;
    margin: auto;
    color: #A3B087;
  }

  .KT {
    width: 100%;
    height: auto;
  }

  .bigbigimg {
    width: 100%;
    height: auto;
  }

  .grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes égales */
    gap: 50px;
    /* espace entre images */
    width: min(150px);
    /* taille max du bloc (modifiable) */
    margin: auto;
    float: none;
  }

  .imgseule {
    float: none;
    display: block;
    margin: auto;
  }

  nav ul li {
    padding: auto;
    margin: auto;
  }

  h3 {
    text-align: center;
  }

  .alin {
    display: flex;
    /* met les images sur une même ligne */
    flex-wrap: wrap;
    /* passe à la ligne automatiquement si ça ne rentre pas */
    justify-content: center;
    /* centre les images horizontalement */
    align-items: center;
    /* centre verticalement */
    gap: 20px;
    /* espace entre les images */
    margin: 40px auto;
    /* espace autour + centrage global */
    max-width: 1000px;
    /* largeur maximale */
    clear: both;
    /* empêche le texte de remonter à côté */
  }

  .bigimg {
    width: 100%;
    max-width: 220px;
    /* taille maximale d’une image */
    height: auto;
    /* garde les proportions */
    border-radius: 10px;
    /* optionnel : coins arrondis */
    object-fit: cover;
    /* évite la déformation */
  }

  .carousel2 {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    /* format plus carré sur mobile */
  }

  .carousel {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    /* format plus carré sur mobile */
  }

  .vide {
    /* force le footer tout en bas*/
    flex: 1;
  }


}