body{background-color: aqua;}
.nav {
  display: flex;
  flex-direction: row-reverse;
  gap:10px;
  margin-top: 5px;
  
}
.nav1 {
  display: flex;
  flex-direction: row-reverse;
  gap:10px;
  margin-top: 5px;

  
}
#modebouton {
  border: solid black 1px;
  background-color: powderblue;
  border-radius: 10px;
  
}

#regleaccess {
  border: solid black 1px;
  background-color: powderblue;
  border-radius: 10px;
  height: 45px;
  width: 45px;
}

.mode{
  top: 10px;
  height: 80px;
  width: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgba(124, 187, 251, 0.852);
  backdrop-filter: blur(2px);
  border: solid;
  box-shadow: -3px 5px 5px rgb(0, 0, 0);
  margin-bottom: 7px;
  gap: 10px;
}
.accessibilite {
    top: 10px;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  position: sticky;
  justify-content: center;
margin-left: 10px;

}



header {
  top: 10px;
  height: 55vh;
  width: 20vw;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  align-items: center;
  position: sticky;
  margin-bottom: 30px;
}

header .Logo1{
  background-color: transparent;
  border: none;
}

header button {
  width: 15vw;
  background-color: powderblue;
  border: solid black 1px;
  border-radius: 10px;
}


main {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70vw;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer {
  height: 50px;display: flex;flex-direction: column; justify-content: center; text-align: center;
}
header,
main,
footer{
  border-radius: 10px;
  background-color: rgb(124, 188, 251);
  border: solid;
  box-shadow: -3px 5px 5px rgb(0, 0, 0);
}
.tsa1  a {
  text-decoration: none;
  color: black;
}
.tdah1 a {
  text-decoration: none;
  color: black;
}

.dys1 a {
  text-decoration: none;
  color: black;
}

.com1 a {
  text-decoration: none;
  color: black;
}
.anx1 a {
  text-decoration: none;
  color: black;
}

main div {
  width: 60vw;
  background-color: powderblue;
  border-radius: 10px;
  padding: 5px 5px 5px 5px;
  word-spacing: 3px;
  justify-content: center;
  text-align: center;
  border: solid;
  margin-top: 10px;
  align-content: center;
}
.newletter{
  background-color: #fcd7ff;border: solid black;
  border-radius: 10px;
  color: rgb(111, 0, 255);
  height: 10vh;width: 60vw;text-align: center;align-content: center;
}
.newletter a {
  text-decoration: none;
}
.newletter :hover {
  background-color: powderblue;border: solid black;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
padding-bottom: 5px;
  border-radius: 10px;
  color: rgb(0, 0, 0);
  text-align: center;align-content: center;

}
.men5, .men6{
  background-color: rgb(124, 188, 251);
  border-radius: 10px;
  border: solid black 1px;
}
header button {
    width: 15vw;
    background-color: rgb(154, 197, 202);
    border: solid black 1px;
  }
  header .Logo1{
    background-color: transparent;
    border: none;
  }

  header,
  main,
  footer {
    background-color: rgb(100, 153, 205);
    border: solid;
  }

  main div {

    background-color: rgb(154, 197, 202);
  }
  .newletter{
    background-color: #fcd7ff;border: solid black;
    color: rgb(79, 0, 182);
  }
   
  .newletter :hover {
    background-color: rgb(154, 197, 202);border: solid black;
    color: rgb(0, 0, 0);
  
  }
  .men5, .men6{
    background-color: rgb(100, 153, 205);
    border-radius: 10px;
    border: solid black 1px;
  }

/* ... (Votre CSS de base, non modifié) ... */

/* Variables pour le mode clair et sombre (par défaut) */
:root {
  --bg-color: #b095b2;
  --text-color: #000000;
  --element-bg: rgb(100, 153, 205);
  --button-bg: rgb(154, 197, 202);
  --div-bg: rgb(154, 197, 202);
  --newsletter-bg: #b095b2;
  --newsletter-hover-bg: rgb(154, 197, 202);
  --link-color: rgb(79, 0, 182);
}

/* Surcharge des variables pour le mode sombre */
[data-theme="dark"] {
  --bg-color: #fcd7ff;
  --text-color: #000000;
  --element-bg: rgb(124, 188, 251);
  --button-bg: powderblue;
  --div-bg: powderblue;
  --newsletter-bg: #fcd7ff;
  --newsletter-hover-bg: powderblue;
  --link-color: rgb(111, 0, 255);
}

/* Application des variables aux éléments pour une transition fluide */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

header,
main,
footer,
.mode,
.men5,
.men6 {
  background-color: var(--element-bg);
  border: solid;
  box-shadow: -3px 5px 5px rgb(0, 0, 0);
  border-radius: 10px;
  transition: background-color 0.3s;
}

header button,
.mode button {
  background-color: var(--button-bg);
  border: solid black 1px;
  border-radius: 10px;
  transition: background-color 0.3s;
}

main div {
  background-color: var(--div-bg);
  transition: background-color 0.3s;
  border-radius: 10px;
  padding: 5px;
  word-spacing: 3px;
  border: solid;
  margin-top: 10px;
}

.newletter {
  background-color: var(--newsletter-bg);
  color: var(--link-color);
  border: solid black;
  border-radius: 10px;
  height: 10vh;
  width: 60vw;
  text-align: center;
  align-content: center;
  transition: background-color 0.3s, color 0.3s;
}

.newletter a {
  text-decoration: none;
}

.newletter:hover {
  background-color: var(--newsletter-hover-bg);
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

.men5, .men6 {
  background-color: var(--element-bg);
  border-radius: 10px;
  border: solid black 1px;
}

/* Styles pour le mode dyslexique */
body.dyslexic-mode-active {
  font-family: OpenDyslexic, sans-serif;
  line-height: 1.6;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

#zoom-rect {
  display: none;
  position: absolute;
  width: 400px;
  height: 150px;
  background-color: transparent;
  border: 2px solid black;
  pointer-events: none;
  z-index: 100;
}

body.dyslexic-mode-active #overlay,
body.dyslexic-mode-active #zoom-rect {
  display: block;
}

/* Styles pour les sections cachées */
.hidden {
  display: none !important;
}
/* ... (Votre CSS de base inchangé) ... */

/* Styles pour le menu d'accessibilité avec animation */
.accessibilite-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  max-width: 0; /* Largeur maximale initiale pour l'animation */
  overflow: hidden;
  transition: max-width 0.5s ease-in-out, padding 0.5s ease-in-out;
  padding: 0;
  white-space: nowrap; /* Empêche les éléments de passer à la ligne */
}

.accessibilite-menu.visible {
  max-width: 500px; /* Largeur maximale pour l'animation (ajustez si besoin) */
  padding: 10px;
}