#topbar,
#bottombar {
  padding: 0.5% 5%;
}
.button_topbar {
  height: 2.75em;
  background-color: black;
}
#bottombar {
  display: flex;
  justify-content: center;
}
#bottombar a {
  color: rgba(162, 210, 223);
  text-decoration: none;
}
#bottombar p {
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
  font-size: 1em;
}

#inscr_ens,
#inscr_ele {
  width: 24px;
  height: 24px;
}
.error-text {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}
.contact-form {
  flex-direction: column;
  align-items: center;
  border-radius: 5%;
}
.contact-message {
  width: 500px;
  height: 200px;
  resize: none;
}

.textarea-container {
  position: relative;
}

#caracteres-restants {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #888; /* Couleur grise pour le texte du compteur */
  font-size: 14px; /* Taille de police */
}
#reçus,
#envoyés,
#contact {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: fit-content;
  border: solid;
  border-width: 2px;
  border-radius: 5%;
  border-color: rgba(220, 243, 255);
  padding-left: 5px;
}
#envoyés,
#contact {
  display: none;
}
.bouton_messagerie {
  height: 30px;
  width: fit-content;
  color: rgba(57, 109, 124);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: rgba(220, 243, 255);
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
#messages_reçus {
  color: rgba(57, 109, 124);
  background-color: rgba(220, 243, 255);
}
#messages_envoyés,
#messages_contact {
  color: rgba(220, 243, 255);
  background-color: rgba(57, 109, 124);
}
.tableau_messagerie {
  margin: 0 5px 5px 5px;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.ligne_message {
  border: solid;
  border-width: 1px;
  border-color: rgba(220, 243, 255);
  color: rgba(162, 210, 223);
  font-size: 15px;
  padding: 2px;
  white-space: nowrap;
}
#Messagerie_succes {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: fit-content;
  width: 200px;
  background-color: black;
  border: solid;
  border-color: rgba(220, 243, 255);
}
#Messagerie_succes p {
  margin-top: 25px;
  margin-bottom: 20px;
}
#Messagerie_succes img {
  width: 20px; /* Ajustez la largeur selon vos besoins */
  height: 20px; /* Ajustez la hauteur selon vos besoins */
  cursor: pointer;
  position: relative;
  left: 178px;
  top: 2px;
}

#fenetre_soutien {
  display: flex;
  flex-direction: column; /* Organise les éléments verticalement */
  align-items: center; /* Centre les éléments horizontalement */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  height: fit-content;
  width: 360px; /* Ajuste la largeur pour s'adapter à l'image */
  background-color: black;
  border: 2px solid rgba(220, 243, 255, 0.8); /* Bordure plus fine et transparente */
  border-radius: 10px; /* Coins arrondis */
  padding: 15px; /* Espacement intérieur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère pour un effet esthétique */
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* Couleur noire semi-transparente */
  z-index: 998; /* Superposé au contenu de la page */
  display: flex; /* Caché par défaut */
}

#tipeee {
  transition: transform 0.3s ease, opacity 0.3s ease; /* Animation douce au survol */
}
#tipeee :hover {
  transform: scale(1.05); /* Agrandit légèrement l'image au survol */
  opacity: 0.9; /* Légère transparence pour l'effet visuel */
}

#fenetre_soutien p {
  margin-top: 25px;
  margin-bottom: 20px;
}

#Messagerie_succes img:hover {
  opacity: 0.8; /* Ajustez l'opacité au survol selon vos préférences */
}
#Fermer_Messagerie {
  position: absolute; /* Position absolue par rapport au parent */
  top: 5px; /* Distance du haut */
  right: 5px; /* Distance de la droite */
  width: 20px; /* Ajuste la largeur */
  height: 20px; /* Ajuste la hauteur */
  cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
}
#Fermer_Messagerie:hover {
  text-decoration: underline;
}
.CorpsdeTexte {
  white-space: pre-line;
  overflow-wrap: break-word;
}
#sujet-input {
  display: none;
}
#text_inscription {
  width: 100%;
  text-align: center;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
#text_modif {
  font-size: 25px;
  width: 100%;
  text-align: center;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.edit-link {
  font-size: 60%;
  text-align: right;
  color: white;
  text-decoration: underline;
}
.edit-input {
  width: 80px;
  display: inline-block;
  border: 1px solid transparent;
  font-size: 25px;
  background-color: transparent;
}

.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: stretch;
  background-color: black;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
body {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-color: black;
}
#container-principal {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#container-secondaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
#container-graphique {
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center;
}

#container-connexion {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin : 0 0 2% 0;
}

.box {
  border: solid;
}
#connexion-eleve,
#connexion-enseignant {
  display: none;
}
.connexion {
  text-align: center;
  margin: 0 0 2% 0;
}

#inscription {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
}
/* Bordered form */
form[id="inscren"] {
  display: none;
  padding: 15px;
  box-shadow: 0 0 20px 0 rgba(57, 109, 124, 0.24),
    0 5px 5px 0 rgba(57, 109, 124, 0.24);
  background-color: rgba(57, 109, 124);
  color: rgba(220, 243, 255);
  min-width: fit-content;
  flex-direction: column;
  align-items: center;
  border-radius: 5%;
  width: 50%;
}

form[id="inscrel"] {
  display: none;
  width: 40%;
  min-width: fit-content;
  padding: 15px;
  box-shadow: 0 0 20px 0 rgba(57, 109, 124, 0.24),
    0 5px 5px 0 rgba(57, 109, 124, 0.24);
  background-color: rgba(57, 109, 124);
  color: rgba(220, 243, 255);
  flex-direction: column;
  align-items: center;
  border-radius: 5%;
  width: 50%;
}

h1 {
  font-size: 2em;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: rgba(57, 109, 124);
  font-weight: 600;
  line-height: 1em;
  text-decoration: underline;
  text-align: center;
}

h2 {
  font-size: 1.5em;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: rgba(162, 210, 223);
  font-weight: 600;
  line-height: 1em;
}

h3 {
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  margin: auto;
  padding-bottom: 10px;
  color: rgba(220, 243, 255);
}

p {
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: rgba(162, 210, 223);
  font-size: 20px;
  margin-top: 1%;
  margin-bottom: 1%;
}
a {
  text-decoration: none;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

input[type="text"],
input[type="password"] {
  width: fit-content;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.tableau_classes {
  color: rgba(162, 210, 223);
  font-size: 20px;
  text-align: center;
}

.tableau_classe_titre {
  padding-left: 5%;
  padding-right: 5%;
}
.arrow-button {
  color: rgba(162, 210, 223);
}
.students-list {
  margin-left: 15%;
}
.ligne_eleve {
  display: flex;
  flex-direction: row;
}
input[type="submit"] {
  background-color: rgba(37, 124, 163);
  color: rgba(162, 210, 223);
  font-size: large;
  padding: 5px 20px;
  margin: 5px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  font-weight: bold;
  border-radius: 50%;
}
input[type="submit"]:hover {
  background-color: white;
  color: rgba(162, 210, 223);
}

.bouton {
  border-radius: 10px;
  background-color: rgba(162, 210, 223);
  color: black;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  margin: 2% 0 2% 0;
  padding: 2%;
  font-size: 110%;
}
.table_prop {
  border-collapse: collapse;
}

.proportion {
  border: 1px solid black;
  padding: 10px;
}
#btn_inscr {
  color: rgba(162, 210, 223);
  text-decoration: underline;
}
#btn_classe {
  background-color: transparent;
  color: rgba(162, 210, 223);
  font-size: 15px;
  width: fit-content;
  text-decoration: underline;
}
.image_btn_exercices {
  width: 60%;
  height: 90%;
}
#btn_exercices {
  display: flex;
  width: 10%;
}
li {
  color: rgba(162, 210, 223);
}
[id^="theme_niveau"] {
  display: none;
  flex-direction: column;
}
[id^="theme_niveau"] p {
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: rgba(162, 210, 223);
  font-size: 1.25em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  cursor: pointer;
}

.theme_prof h2 {
  font-size: 1.5em;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: rgba(162, 210, 223);
  font-weight: 600;
  line-height: 0em;
  cursor: pointer;
  text-align: center;
}
[id^="exercices"] {
  display: none;
  flex-direction: column;
}
[id^="exercices"] h2 {
  text-align: center;
}
.exercices {
  display: flex;
  align-items: center;
}

.img_exercices {
  height: 2em;
  margin-right: 2%;
  cursor: pointer;
}
#container-exercices {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
  justify-content: center;
}
.cercle {
  stroke: rgba(57, 109, 124);
  stroke-width: 1;
  stroke-opacity: 100%;
  width: 75%;
}
.graph {
  stroke-width: 1;
  stroke-opacity: 100%;
  stroke: rgba(57, 109, 124);
}

#box_nomcal,
#box_espgeo,
#box_grame,
#box_algo,
#box_orge,
#box_nomcal6,
#box_nomcal5,
#box_nomcal4,
#box_nomcal3,
#box_espgeo6,
#box_espgeo5,
#box_espgeo4,
#box_espgeo3,
#box_grame6,
#box_grame5,
#box_grame4,
#box_grame3,
#box_algo5,
#box_algo4,
#box_algo3,
#box_orge5,
#box_orge4,
#box_orge3 {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: stretch;
}

#box_cercle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: stretch;
}
#rectangle {
  stroke: rgba(153, 255, 255);
  stroke-width: 1;
  stroke-opacity: 100%;
}
#box_comp {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.box_ens {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: start;
  width: 70%;
}
#classe_select,
#eleve_select,
#comp_select,
#classe_nom,
#classe_niveau {
  width: fit-content;
}

#classe_niveau {
  margin-bottom: 120px;
}
#comp_select,
#eleve_select,
#classe_select {
  margin-bottom: 2%;
}
#crea_classe {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.btn_classe {
  margin-bottom: 2%;
}
input[id="crea_classe_valid"] {
  background-color: rgba(37, 124, 163);
  color: rgba(162, 210, 223);
  font-size: large;
  text-align: center;
  padding: 5px 20px;
  border: none;
  cursor: pointer;
  width: 25%;
  font-weight: bold;
}
input[id="crea_classe_valid"]:hover {
  background-color: white;
  color: rgba(162, 210, 223);
}
form[type="crea_classe_valid"] {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#parametres {
  display: flex;
  position: absolute;
  top: 7%;
  right: 100%;
  padding: 0.5%;
  flex-direction: column;
  align-items: center;
  background-color: black;
  border-top: solid;
  border-left: solid;
  border-bottom: solid;
  border-color: rgba(162, 210, 223);
  transition: left 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
#Options {
  display: flex;
  position: absolute;
  top: 7%;
  left: -100%;
  background-color: black;
  border-top: solid;
  border-right: solid;
  border-bottom: solid;
  border-color: rgba(162, 210, 223);
  flex-direction: column;
  cursor: pointer;
  transition: right 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  padding: 0 1%;
}

[id^="niveau_"],
[id^="Sous_niveau_"] {
  background-color: black;
  border-color: rgba(162, 210, 223);
  flex-direction: column;
  padding: 0 0 0 1%;
}
[id^="Sous_niveau_"] {
  padding: 0 0 0 2%;
}
.sous_niveau,
.niveau {
  height: 0;
  overflow: hidden;
  transition: height 0.1s ease;
}

.hidden {
  display: none;
}

[id^="niveau_"] p {
  font-size: 100%;
}

[id^="Sous_niveau_"] p {
  font-size: 80%;
}

#modif {
  width: 400px;
  margin: auto;
}
.sous_menu {
  height: 30px;
  color: rgba(162, 210, 223);
  font-size: larger;
  font-family:  Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.code {
  display: flex;
  align-items: center;
}