* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  list-style: none;
}

body {
  background-image: url(Img/Background/Texture_Papier.webp);
  text-align: center;
  a:link,
  a:visited {
    color: #5d483a;
    margin: 10px;
    font-family: crimson Pro;
    font-size: 18px;
  }
  h1,
  h2,
  h3,
  p {
    color: rgb(23, 16, 11);
  }
  h1,
  h3 {
    font-family: Uncial Antiqua;
  }
  p,
  h2,
  h4 {
    font-family: crimson Pro;
  }
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 30px;
    margin: 15px auto;
    font-weight: 900;
  }
  h3 {
    margin: 25px auto;
  }
  h4 {
    font-size: 20px;
    color: rgb(238, 227, 209);
    margin-bottom: 10px;
  }
  p {
    font-size: 20px;
    margin: 10px;
  }
  table {
    border: solid rgb(23, 16, 11);
    font-family: crimson Pro;
    border-collapse: collapse;
    margin: 25px auto;
    letter-spacing: 1px;
    td,
    th {
      border: 1px solid rgb(23, 16, 11);
      padding: 5px 10px;
    }
  }
}

header {
  background-color: rgba(218, 180, 104, 1);
  padding: 10px;
  #NavBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    #LogoNavBarre {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      h1 {
        font-size: 20px;
        color: #5d483a;
        margin: auto;
      }
      img {
        width: auto;
        height: 65px;
      }
    }
    ul {
      display: flex;
      #Page-Actuelle {
        text-decoration: underline;
        text-underline-offset: 0.5em;
      }
    }
    #Menu-Hamburger {
      position: absolute;
      right: 20px;
      height: 40px;
      display: none;
    }
  }
}

footer {
  background-color: #5d483a;
  padding: 30px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 25px;
  p,
  a:link,
  a:visited {
    color: rgb(238, 227, 209);
    margin: auto;
    font-size: 18px;
  }
  .Footer-Links {
    display: flex;
    flex-direction: column;
    img {
      height: 22px;
      margin: 5px;
    }
    .ReseauxSociaux {
      display: flex;
      align-items: center;
    }
  }
}

main {
  margin: 0px 20px 20px;
  text-align: center;
  #Banniere {
    width: 60%;
    margin-bottom: 50px;
  }
  img {
    border-radius: 20px;
  }
  .Left-Align {
    h2,
    p {
      text-align: left;
      margin-left: 35px;
    }
  }
  .Right-Align {
    h2,
    p {
      text-align: right;
      margin-right: 35px;
    }
  }
  .Box-Align-Right {
    display: flex;
    justify-content: flex-end;
  }
}

#Main-Accueil {
  #Presentation-SalvaTerra {
    text-align: center;
  }
  .Redirection {
    margin-top: 40px;
    text-align: left;
    .Categorie-Redirection {
      display: flex;
      flex-wrap: wrap;
      .Redirection-Page {
        position: relative;
        margin: 0px 20px 20px 0px;
        background-color: #eee3d1;
        height: 350px;
        width: 400px;
        border: 1px solid #5d483a;
        border-radius: 20px;
        .Img-Redirection {
          height: 175px;
          background-size: cover;
          background-position: top;
          background-repeat: no-repeat;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
        }
        #Redirection-Animations {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/Animations.webp");
        }
        #Redirection-Horaires {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/HorairesetTarifs.webp");
        }
        #Redirection-Informations {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/InformationsPratiques.webp");
        }
        #Redirection-Scolaires {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/Scolaires.webp");
        }
        #Redirection-Groupes {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/Groupes.webp");
        }
        #Redirection-Galerie {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/Galerie.webp");
        }
        #Redirection-Histoire {
          background-image: linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0) 50%,
              #eee3d1 100%
            ),
            url("Img/Accueil/Histoire.webp");
        }
      }
      p,
      h3 {
        margin: 0px 15px;
      }
      h3 {
        margin-top: 15px;
      }
      p {
        margin-top: 10px;
      }
      button {
        padding: 10px;
        font-family: crimson Pro;
        color: #eee3d1;
        font-size: 16px;
        background-color: #5d483a;
        border-radius: 10px;
        border: none;
        position: absolute;
        bottom: 15px;
        right: 15px;
      }
    }
  }
  iframe {
    border-radius: 20px;
  }
}

#Main-Animations {
  .Animations {
    display: flex;
    align-items: center;
    margin: 50px 0px;
    img {
      height: 300px;
    }
  }
}

.Mains-Sco-Grp {
  a:link,
  a:visited {
    color: rgb(23, 16, 11);
    text-decoration: underline;
  }
  .Explications-Sco-Grp {
    display: flex;
    margin: 50px auto;
    img {
      height: 350px;
    }
  }
  #Scolaires-Table {
    table {
      width: 650px;
      height: 150px;
    }
  }
}

#Main-Horaires {
  #Legende-Horaire {
    display: flex;
    justify-content: center;
    p {
      padding: 10px;
      border: 1px solid rgb(23, 16, 11);
      border-radius: 5px;
    }
    #Horaire-Public {
      color: rgb(238, 227, 209);
    }
  }
  #Calendrier {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    table {
      .Mois {
        background-color: rgb(23, 16, 11);
        color: rgb(238, 227, 209);
        font-size: 20px;
      }
      .Jours {
        background-color: rgb(93, 72, 58);
        color: rgb(238, 227, 209);
        font-size: 18px;
      }
      .Groupes {
        background-color: rgb(244, 184, 26);
      }
      .Public {
        background-color: rgb(19, 92, 48);
      }
      .Close {
        background-color: rgb(238, 227, 209);
      }
      td {
        font-size: 14px;
      }
    }
  }
  #Tarifs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    table {
      table-layout: fixed;
      width: 400px;
      p {
        text-decoration: underline;
        font-size: 24px;
      }
      th {
        font-size: 20px;
      }
      td {
        font-size: 18px;
      }
    }
  }
}

#Main-Infos {
  margin: 0px;
  .Contact {
    margin: 25px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #5d483a;
    height: 100px;
    img {
      height: 50px;
    }
    .Informations-Contact {
      display: flex;
      align-items: center;
      margin: auto;
      p,
      a:link,
      a:visited {
        color: rgb(238, 227, 209);
      }
    }
  }
  #Informations-Utiles {
    display: flex;
    justify-content: space-around;
    .Information-Utile {
      background-color: #eee3d1;
      border: 1px solid #5d483a;
      border-radius: 20px;
      width: 40%;
      padding: 15px;
      p {
        text-align: left;
        line-height: 25px;
      }
      a {
        margin: 0px;
        text-decoration: underline;
      }
      #Information-PMR {
        margin: 0px 30px;
      }
    }
  }
  #Partenaire-Activite {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #5d483a;
    img {
      height: 100px;
    }
  }
  #Activites-Medievales {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    a {
      margin: 0px;
      text-decoration: underline;
    }
    .Activite-Medievale {
      background-color: #eee3d1;
      border: 1px solid #5d483a;
      margin: 15px 0px;
      border-radius: 20px;
      padding: 10px;
      width: 250px;
      height: 225px;
    }
  }
}

#Main-Galerie {
  #Liste-Galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }
    li {
      list-style-type: none;
      height: 300px;
      flex-grow: 1;
    }
  }
  #Liste-Galerie::after {
    content: "";
    display: block;
    flex-grow: 10;
  }
}

#Main-Histoire {
  #Introduction-Histoire {
    display: flex;
    align-items: center;
    img {
      width: 25%;
    }
  }
  .Habitants {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .Fiche-Personnage {
      background-color: #eee3d1;
      border-radius: 10px;
      border: solid #17100b 0.5px;
      padding: 2.5px;
      width: 350px;
      margin: 25px auto;
      img {
        height: 350px;
      }
    }
  }
}

@media screen and (max-width: 1100px) {
  header {
    #NavBar {
      padding: 0px;
      .Nav-Links {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(23, 16, 11, 0.7);
        backdrop-filter: blur(2.5px);
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.5s ease;
        z-index: 1000;
        /* Quand le menu est ouvert (JS ajoute cette classe) */
        .Nav-Links.Menu-Mobile {
          transform: translateX(0);
        }
        ul {
          display: flex;
          flex-direction: column;
          li {
            margin: 15px auto;
            a:link,
            a:visited {
              color: rgb(238, 227, 209);
              font-size: 25px;
              font-weight: 900;
            }
          }
        }
      }
      #Menu-Hamburger {
        display: block;
        z-index: 1000;
      }
       .Nav-Links.Menu-Mobile {
    transform: translateX(0);
  }
}
  }
  footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .Footer-Links {
      margin: 20px auto;
    }
  }
  main {
    #Banniere {
      width: 75%;
    }
  }
  #Main-Accueil {
    .Redirection {
      text-align: center;
      h2 {
        text-align: center;
      }
      .Categorie-Redirection {
        justify-content: center;
      }
    }
  }
  #Main-Animations {
    .Animations {
      flex-direction: column;
      img {
        order: -1;
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }
  .Mains-Sco-Grp {
    .Explications-Sco-Grp {
      flex-direction: column;
      img {
        order: -1;
        width: 100%;
        margin-bottom: 10px;
      }
    }
    #Scolaires-Table {
      table {
        width: 100%;
      }
    }
  }
  #Main-Infos {
    .Contact {
      display: flex;
      flex-direction: column;
      height: 250px;
    }
  }
  #Main-Histoire {
    #Introduction-Histoire {
      img {
        display: none;
      }
    }
  }
}