body {
  background-color: #ddd;
}
* {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
.header {
  min-height: 10vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(image/fecafoot.png);
  background-position: center;
  background-size: cover;
  position: relative;
}
.premier {
  display: flex;
  /* padding-top: 123px; */
}
.prog {
  width: 100%;
  margin: auto;
  text-align: center;
  display: flex;
}
.tete {
  flex-basis: 40%;
  box-sizing: border-box;
  background: #fff3f3;
  border-radius: 15px;
  padding: 8px 10px;
  margin: 12px 15px;
  min-width: 47%;
}
.tete a {
  font-size: 13px;
  text-decoration: none;
}
.tete p {
  font-size: 10px;
}
.titre {
  display: flex;
  padding: 2% 2%;
  justify-content: space-between; /*espace entre les elements*/
  align-items: center;
}
nav img {
  width: 60px;
  border-radius: 15px;
}
.nav-links {
  flex: 1; /* on ramene l'element eloigne tout pres*/
  text-align: right;
}
.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}
.nav-links ul li a {
  color: blanchedalmond;
  text-decoration: none;
  font-size: 15px;
}
.nav-links a:hover {
  background-color: hsl(62, 70%, 60%);
  padding: 10px;
}
.nav-links ul li::after {
  content: "";
  width: 100%;
  right: 2px;
  background: #f44336;
  display: block;
}
h1 {
  padding: 12px 70px;
  width: max-content;
  margin: 0 auto;
  background-color: rgb(23, 19, 85);
  color: #ffff;
  text-align: center;
  border-radius: 10px;
}
.tout {
  display: flex;
  background-image: linear-gradient(
      rgba(103, 41, 70, 0.7),
      rgba(9, 90, 141, 0.7)
    ),
    url(image/LFFC.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}
.toutE2 {
  display: flex;
  background-color: rgb(148, 236, 182);
}
.slider {
  width: 700px;
  overflow: auto;
  margin: 10px auto;
  border: 1px solid #333;
}
.slide {
  display: flex;
  width: calc(700px * 14);
}
.sliderE2 {
  width: 700px;
  overflow: auto;
  margin-top: 50px 10px;
  margin-bottom: 220px;
  border: 1px solid #333;
}
.sliderE3 {
  width: 700px;
  overflow: auto;
  margin-top: 50px 10px;
  margin-bottom: 220px;
  border: 1px solid #333;
}
.sliderEF {
  width: 700px;
  overflow: auto;
  margin-top: 50px 10px;
  margin-bottom: 220px;
  border: 1px solid #333;
}
.slideE2 {
  display: flex;
  width: calc(700px * 7);
}
.slideE3 {
  display: flex;
  width: calc(700px * 14);
}
.slideEF {
  display: flex;
  width: calc(700px * 6);
}
/*.slider {
  width: 900px;
  overflow: hidden;
  margin: 30px auto;
}
.slide {
  width: calc(900px * 3);
  animation: glisser 20s infinite;
}*/
.main {
  min-height: 0;
  width: 100%;
  background-color: aquamarine;
  background-position: center;
  overflow: hidden;
}
.mainG {
  float: left;
  /*min-height: 25vh;*/
  width: 700px;
  background-color: aquamarine;
  background-position: center;
  /*overflow: hidden;*/
}
/*@keyframes glisser {
  0% {
    transform: translateX(0px);
  }
  33% {
    transform: translateX(-900px);
  
}}*/
h2 {
  text-align: center;
}
.tete {
  /*flex-basis: 40%;*/
  box-sizing: border-box;
  background: #fff3f3;
  border-radius: 15px;
  padding: 8px 10px;
  margin: 12px 15px;
  /*min-width: 47%;*/
}
.classo {
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(fecabasket.jpeg);
  background-position: center;
  background-size: cover;
  position: relative;
}
.ajouter {
  padding: 3px 3px;
  width: 10%;
  text-align: center;
}
.ajouter a {
  font-size: 20px;
  text-decoration: none;
}
thead tr {
  background-color: midnightblue;
  color: #fff;
  text-align: center;
}
th:before,
td {
  padding: 6px 6px;
  counter-increment: case;
  content: counter;
} /* before , counter-increment, content ont permis de miniaturiser le tableau*/
.fixer tr {
  background-color: midnightblue;
  color: #fff;
  text-align: left;
}
.fixant tr,
td,
th {
  border: 1px solid #ddd;
}
.coule {
  color: white;
}
tbody tr :nth-child(even) {
  background-color: hsl(0, 0%, 95%);
}
tbody tr,
td,
th {
  border: 1px solid #ddd;
  text-align: justify;
}
.classic {
  min-height: 25vh;
  width: 40%;
  position: relative;
}
caption {
  background-color: #fff3af;
  font-family: "Dancing Script";
  font-weight: bold;
}
.zone_verte {
  background-color: green;
}
.zone_rouge {
  background-color: red;
}
#contient .point {
  background-color: hsla(63, 57%, 49%, 0.8);
  color: hsl(0, 0%, 6%);
  font-weight: bold;
}
#contient {
  display: flex;
}
.buteurG {
  background-image: linear-gradient(
      rgba(103, 41, 70, 0.7),
      rgba(9, 90, 141, 0.7)
    ),
    url(image/LFFC.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}
.tableau {
  background-color: hsl(132, 22%, 95%);
}
.tableau_Bute {
  background-color: rgb(191, 131, 180);
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  font-weight: 600;
}
.tableau1 {
  border-collapse: collapse;
  min-width: 70px;
  width: auto;
  box-shadow: 0 5px 20px rgba(191, 131, 0, 025);
  cursor: pointer;
  margin: 10px auto;
  border: 3px solid #ddd;
  background-color: hsl(106, 37%, 59%);
}
.tableau1 a {
  text-decoration: none;
  font-size: 12px;
}
#score {
  font-weight: bold;
  background-color: aquamarine;
  width: max-content;
  text-align: center;
  margin: auto;
  font-size: 1em;
  animation: flash 1.5s infinite;
}
@keyframes flash {
  50% {
    color: red;
  }
}
#logo {
  max-width: 30px;
  margin: 0 auto;
  border-radius: 30px;
}

.teteG {
  flex-basis: 40%;
  box-sizing: border-box;
  background: #fff3f3;
  border-radius: 15px;
  padding: 8px 10px;
  margin: 12px 15px;
  min-width: 47%;
}
.teteG a {
  font-size: 13px;
  text-decoration: none;
}
.teteG p {
  font-size: 10px;
}
.tete a {
  font-size: 13px;
  text-decoration: none;
}
.tete p {
  font-size: 10px;
}
.fixe {
  padding: 12px 70px;
  width: auto;
  background-color: rgb(23, 19, 85);
  color: #ffff;
  text-align: center;
}
.CAMER {
  padding: 12px 70px;
  width: auto;
  background-color: hsl(0, 72%, 35%);
  color: #ffff;
  text-align: center;
}
.fixeur {
  padding: 10px 70px;
  width: auto;
  background-color: green;
  color: #ffff;
  text-align: center;
}
.pied {
  min-height: 15vh;
  width: 100%;
  position: relative;
  background: #f44336;
  text-align: center;
  clear: both;
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/

@media all and (max-device-width: 600px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header {
    min-height: 10vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
      url(image/LFFC.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
  }
  h1 {
    padding: 12px 70px;
    width: 100%;
    margin: 0 auto;
    font-size: 18px;
    background-color: rgb(164, 142, 12);
    color: #ffff;
    text-align: center;
    border-radius: 10px;
  }
  .tout {
    display: flex;
    flex-direction: column;
  }
  .toutE2 {
    display: flex;
    flex-direction: column;
  }
  .slide {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .slideG {
    display: flex;
    width: calc(100% * 11);
  }
  /*.slideE2 {
    display: flex;
    flex-direction: column;
    width: 100%;
  }*/
  .slideE2 {
    display: flex;
    width: calc(100% * 7);
  }
  .slideE3 {
    display: flex;
    width: calc(100% * 14);
  }
  .slideEF {
    display: flex;
    width: calc(100% * 6);
  }
  .slider {
    width: 100%;
    overflow: auto;
    margin: 10px auto;
    border: 1px solid #333;
  }
  .sliderG {
    width: 100%;
    overflow: auto;
    margin: 10px auto;
    border: 1px solid #333;
  }
  .sliderEF {
    width: 100%;
    overflow: auto;
    margin: 10px auto;
    border: 1px solid #333;
  }
  .premier {
    display: flex;
    flex-direction: column;
  }
  .prog {
    width: 100%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .tete {
    flex-basis: 40%;
    width: 100%;
    box-sizing: border-box;
    background: #fff3f3;
    border-radius: 15px;
    padding: 0;
    margin: 0;
    min-width: max-content;
  }
  #contient {
    display: flex;
    flex-direction: column;
  }
  #contient .tableau1 {
    margin: 10px 0px;
  }
  .classo {
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
      url(fecabasket.jpeg);
    background-position: center;
    background-size: cover;
    position: relative;
  }
  .sliderE2 {
    width: 100%;
    overflow: auto;
    margin: 10px auto;
    border: 1px solid #333;
  }
  .sliderE3 {
    width: 100%;
    overflow: auto;
    margin: 10px auto;
    border: 1px solid #333;
  }
  .main {
    min-height: 0;
    width: 100%;
    background-color: aquamarine;
    background-position: center;
    overflow: hidden;
  }
  .mainG {
    min-height: 0;
    width: 100%;
    background-color: aquamarine;
    background-position: center;
    overflow: hidden;
  }
  .ajouter {
    font-size: 10px;
  }
  .ajouter a {
    font-size: 9px;
    margin: 0;
  }
  .tete {
    width: 100%;
    margin: 5px auto;
  }
  .teteG {
    width: 100%;
    margin: 5px auto;
  }
  .ajouter p {
    font-size: 8px;
    font-weight: bold;
  }
  #logo {
    max-width: 20px;
    margin: 0 auto;
    border-radius: 20px;
  }
  .tableau1 {
    border-collapse: collapse;
    min-width: 70px;
    width: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 015);
    cursor: pointer;
    margin: 0 auto;
    border: 3px solid #ddd;
    background-color: rgb(206, 193, 229);
  }
  .tableau1 a {
    text-decoration: none;
    font-size: 12px;
  }
  .classic {
    min-height: 0;
    width: 100%;
    margin: 0;
  }
}