/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Body */
body {
  background-color: #ececec;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* p */
p {
  font-size: 20px;
  color: #264653;
  margin: 0px 0px 27px;
}

/* Le titre */
.title {
  font-size: 4vw;
  font-weight: bold !important;
  margin-bottom: 5vw !important;
  text-align: center;
  color: #2a9d8f;
}

/* Les vidéos */
img,
iframe {
  margin-bottom: 2.5vw;
}

/* taille des images redéfinit plus petite*/
.img-regle{
  width: 50%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

iframe {
  width: 100%; /* Prend toute la largeur du conteneur parent */
  max-width: 100%; /* Pas plus large que son conteneur */
  height: 80vh; /* Hauteur fixe raisonnable, modifiable selon besoin */
  border: none; /* Pas de bordure par défaut */
  display: block; /* Évite les espaces en inline */
  border-radius: 8px; /* Optionnel, coins arrondis pour un look moderne */
}

/* --- Header --- */
.header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #ececec;
  padding: 20px;
}

.nav-wrapper {
  margin: 0 auto;
}

/* Description */
.description {
  font-weight: bold;
  color: #264653;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h1 {
  font-size: 25px;
  color: #2a9d8f;
  margin-top: 10%;
  font-weight: bold;
}

.header-left p {
  font-size: 13px;
  color: #264653;
  margin-top: 5%;
}
/* --- Header --- */

/* Le container dans le body */
body > .container-fluid {
  width: 80%;
}

/* Sans Décoration */
.no-decoration {
  text-decoration: none;
  background: none;
  border: none;
}
.no-decoration:hover {
  text-decoration: none;
  background: none;
  border: none;
}

/* --- Form --- */
.form-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(42, 157, 143, 0.2);
  border: 2px solid #2a9d8f;
}
.form-container h2 {
  text-align: center;
  color: #2a9d8f;
  margin-bottom: 20px;
  font-weight: bold;
}
.form-container label {
  font-weight: bold;
  color: #264653;
  display: block;
  margin-bottom: 5px;
}
.form-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #2a9d8f;
  border-radius: 5px;
}
.form-container input:focus {
  border-color: #264653;
  outline: none;
  box-shadow: 0 0 5px rgba(42, 157, 143, 0.3);
}
/* Bouttons dans le form-container (global) */
.form-container button {
  padding: 10px;
  background-color: #2a9d8f;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
}
/* Survol */
.form-container button:hover {
  color: #fff;

  background-color: #264653;
}
/* Désactiver */
.form-container button:disabled {
  background-color: #2a9d90d0;
}
/* Bouttons dans les pop-ups */
.form-container .modal button {
  background-color: #2a9d8f;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
}
/* Survol */
.form-container .modal button:hover {
  background-color: #264653;
  color: #fff;
}
/* Désactiver */
.form-container .modal button:disabled {
  background-color: #2a9d90d0;
}

.form-container .link {
  text-align: center;
  margin-top: 10px;
}
/* Form Switch/Checkbox */
.form-check-input {
  background-color: #ffffff;
  border-color: #2a9d8f;
}
.form-check-input:checked {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
}
.form-check-input:focus {
  border-color: #264653;
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}
/* --- Form --- */

/* Table container */
.table-container a {
  background-color: #2a9d8f;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.table-container a:hover {
  color: #fff;
  background-color: #264653;
}
/* Table container */

/* Téléchargement */
.dl {
  color: #2a9d8f;
  border: none;
}
.btn-dl {
  background-color: #2a9d8f;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.btn-dl:hover {
  color: #fff;
  background-color: #264653;
}
/* Téléchargement */

/* --- Connexion --- */
.password-container {
  position: relative;
}
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-90%);
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: #2a9d8f;
}

.password-requivwents {
  font-size: 0.9em;
  color: #264653;
  margin-bottom: 10px;
}
/* --- Connexion --- */

@media (max-width: 768px) {
  .header {
    flex-direction: row;
  }
  .header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 10px;
  }
}