/*
 * ============================================================
 * Partie     : page d'acceuille
 * Ajouté le  : 2026-04-11
 * À          : 10h:22mn.18s
 * Description: CECI EST LE CSS  appliquer a la page d'acceuille
 *
 * Remarques  :
 *
 * ============================================================
 */
/*
 * ================================================================
 * Partie     : body
 * Ajouté le  : 2026-04-11
 * À          : 10h:37mn.21s
 * Remarques  :css appliquer a la partie body :css de base avec le le font inter choisi comme police principal por le projet
 * ================================================================
 */
body {
  font-family: var(--font-inter);
  margin: 0;
  background: #121212;
}

/*
 * ================================================================
 * Partie     : BARR de navigation
 * Ajouté le  : 2026-04-11
 * À          : 10h:40mn.32s
 * Remarques  : css appliquer a la barre de naviguation nottanment le logo et le menue
 *================================================================
 */
.logo {
  overflow: hidden;
  border: solid 2px;
  color: #f65e1c;
  padding: 2px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: bounce 6s ease infinite;
  background: aliceblue;
}
.logo img {
  width: 100%;
  height: 100%;
}
nav {
  border: solid 2px;
  padding: 0 1rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #000000;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav ul {
  list-style: none;
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
nav ul li {
  border: solid 2px;
  text-decoration: none;
  padding: 0.5rem;
  min-width: 8svw;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: #f65e1c;
  background: #2e2e2e;
}
nav ul li:hover {
  background: linear-gradient(280deg, #ffae00, #f65e1c 50%);
}
nav ul li a {
  text-decoration: none;
  color: aliceblue;
  white-space: nowrap;
}

/*
 * ================================================================
 * Partie     : Css appliquer a la partie section hero de bienvenue
 * Ajouté le  : 2026-04-11
 * À          : 12h:25mn.46s
 * Remarques  :
 * ================================================================
 */
.hero-section-bienvenue {
  margin: 0;
  height: 90svh;
  display: flex;
  justify-content: center;
  margin-top: 9svh;
  background-image: url(/images/salle-de-sport-221-acceuille.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(0.5px);
  filter: brightness(90%);
  box-shadow:
    0 0 5px #ff7900,
    0 0 10px #ff790044,
    0 0 20px #ff790022;
}
section .bienvenue {
  width: 90%;
  padding: 1rem;
}
a {
  text-decoration: none;
  color: aliceblue;
}
section .bienvenue h1 {
  font-size: 3rem;
  color: aliceblue;
}
section .bienvenue h4 {
  font-size: 2rem;
  padding: 0.6rem;
  width: 25svw;
  background: linear-gradient(280deg, #ffae00, #f65e1c 50%);
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}
section .bienvenue h4:hover {
  background: #1f1f1f;
  box-shadow:
    0 0 10px #ff7900,
    0 0 20px #ff790044,
    0 0 30px #ff790022;

  transform: translateX(2px);
}
section .bienvenue span {
  color: #f65e1c;
}
section .bienvenue p {
  width: 70%;
  color: aliceblue;
  font-size: 2rem;
  font-weight: 500;
}
/*
 * ================================================================
 * Partie     : section pourquoi venire chez nous
 * Ajouté le  : 2026-04-12
 * À          : 10h:57mn.8s
 * Remarques  : ceci concerne la partie description pourquoi venir chez nous
 * ================================================================
 */
.pourquoi-venir-chez-nous {
  margin: 0;
  height: 70svh;
  margin-top: 9svh;
  display: grid;
  gap: 2rem;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.pourquoi-venir-chez-nous > div {
  grid-template-columns: repeat(2, 1fr);
  color: aliceblue;
  width: 48%;
  border-radius: 20px;
  padding: 1rem;
}
.Description {
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  background: #272727;
}
.Description h4 {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  border: solid 1px;
  border-radius: 30px;
  padding: 0.5rem;
  border: 2.5px solid transparent;
  background-image:
    linear-gradient(#000000), linear-gradient(135deg, #ffae00, #f65e1c);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.Description p {
  white-space: pre-line;
  font-size: 1.5rem;
  font-weight: 400;
}

.Description button {
  padding: 0.8rem;
  border-radius: 10px;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  background: #f65e1c;
  font-weight: 800;
  color: aliceblue;
  white-space: pre-line;
  align-self: flex-end;
  margin-top: 1.45svh;
}
.Description button:hover {
  transform: translatey(2px);
  background: #0e0e0e;
  box-shadow:
    0 0 10px #ff7900,
    0 0 20px #ff790044,
    0 0 30px #ff790022;
}
.image-illustration-pourquoi-chez-nous {
  background-size: cover;
  background-position: center;
  border: #f65e1c 1px solid;
  position: relative;
  overflow: hidden;
}
/*
 * ================================================================
 * Partie     : slider de 5 image
 * Ajouté le  : 2026-04-13
 * À          : 0h:23mn.34s
 * Remarques  : ceci concerne la partie dedier au slide de 4 image
 * je mesui permite d en fair 5 et de mettre le slide ala section
 *pourquoi venir chez nous
 *meme si ce n est pas vraiment conforme au instruction du projet d auttent plus que si je mettai ajour pour inserer comme convenue je perdrai du temps  je prefaire laisser ainsi meme si c est point en moins
 * ================================================================
 */

.image-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  /* État initial : caché à droite */
  transform: translate3d(100%, 0, 0);
  opacity: 0;

  /* Animation */
  animation-name: sliderAutomatique;
  animation-duration: 20s; /* 5 images × 4s = 20s */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Délais pour 5 images */
.image-slide:nth-child(1) {
  animation-delay: 0s;
}
.image-slide:nth-child(2) {
  animation-delay: 4s;
}
.image-slide:nth-child(3) {
  animation-delay: 8s;
}
.image-slide:nth-child(4) {
  animation-delay: 12s;
}
.image-slide:nth-child(5) {
  animation-delay: 16s;
}
.image-slide:nth-child(1) {
  background-image: url("/images/image-du-slider/slide1.png");
}
.image-slide:nth-child(2) {
  background-image: url("/images/image-du-slider/slide2.png");
}
.image-slide:nth-child(3) {
  background-image: url("/images/image-du-slider/slide3.png");
}
.image-slide:nth-child(4) {
  background-image: url("/images/image-du-slider/slide4.png");
}
.image-slide:nth-child(5) {
  background-image: url("/images/image-du-slider/slide5.jpeg");
}

/*
 * ================================================================
 * Partie     : footer
 * Ajouté le  : 2026-04-11
 * À          : 19h:39mn.28s
 * Remarques  : nous voila a la dernier partie de cette partie qui concerne le footer
 * ================================================================
 */
footer {
  margin: 0;
  height: 60svh;
  display: flex;
  margin-top: 9svh;
  flex-direction: column;
}
.ligne-orange-du-footer {
  border: solid 1px;
  border-color: #f65e1c;
}
.conteneure-du-text {
  height: 85%;
  display: grid;
  display: flex;
  justify-content: space-around;
}
.conteneur-du-logodu-footer {
  width: 30%;
  display: flex;
  justify-content: center;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
}
.conteneur-lien-rapide {
  width: 30%;
}
.conteneur-suivez-nous {
  width: 30%;
  white-space: pre-line;
  padding: 1rem;
}
.tout-droit-reserver {
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.conteneure-du-text div .conteneur-du-logodu-footer {
  height: 50px;
  width: 50px;
}
.logo-du-footer {
  border: solid 2px #ffffff;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.logo-du-footer img {
  width: 100%;
  height: 100%;
  background: aliceblue;
}
.conteneur-du-logodu-footer h2 {
  color: #ffffff;
  font-size: 2rem;
}
.coloriage-du-text-sport-221 {
  color: #f65e1c;
}
.expression-en-dessou-du-logo-dans-le-footer {
  color: #ffffff;
  font-style: italic;
}
.conteneur-lien-rapide {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.conteneur-lien-rapide ul {
  list-style: none;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
.lien-rapide-a-centrer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lien-rapide-a-centrer-titre {
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 600;
  gap: 1rem;
}
.suiver-nous {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #f65e1c;
  font-size: 2rem;
}
.suivez-nous-titre {
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  font-weight: 600;
}
.logo-des-resaux-sociau-active-de-lentreprise {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
.icon-des-site-des-icon {
  color: #ffffff;
  font-size: 3rem;
}
.conteneur-rejoignez-nos-newslater {
  width: 100%;
}
.rejoignez-newslaters {
  color: #ffffff;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.coloration-de-newslater {
  color: #f65e1c;
}
.s-inscrire {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid transparent;
  background-image:
    linear-gradient(#000000), linear-gradient(135deg, #ffae00, #f65e1c);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.s-inscrire > input {
  height: 5.8svh;
  font-size: 1rem;
  border: none;
  border-radius: 5px 0px 0px 5px;
  background: #464646;
  padding-left: 0.5rem;
  color: #ffffff;
}
.s-inscrire > button:hover{
  transform: translate(2px);
}
.s-inscrire > button {
  height: 6svh;
  background: #f65e1c;
  border-radius: 0px 2px 2px 0px;
  border: none;
  font-weight: 600;
  color: aliceblue;
  padding: 0.5rem;
  font-size: 1rem;
  background: linear-gradient(280deg, #ffae00, #f65e1c 50%);
}
.conteneur-rejoignez-nos-newslater {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-content: space-around;
}