@import url("./reset.css");
@import url("./global.css");
@import url("./components/footer.css");
@import url("./components/header.css");
@import url("./components/index.css");
/* You can import other component files here too */

/* --- VERSION MOBILE --- */
@media (max-width: 768px) {

  /* En-tête */
  header .top-container,
  header .bottom-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  header img {
    height: auto;
    max-width: 80%;
  }

  .menu-container ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  .menu-container ul li {
    list-style: none;
  }

  .menu-container a {
    display: block;
    padding: 10px;
    font-size: 20px;
  }

  /* Présentation : images et textes en colonne */
  .containerPresentation {
    flex-direction: column;
    align-items: center;
  }

  .containerPresentationBox {
    width: 90%;
    margin-bottom: 20px;
  }

  .containerPresentationBox img {
    width: 100%;
  }

  /* Slideshow */
  .slideshow-container {
    width: 100%;
  }

  /* Textes */
  h1 { font-size: 38px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  h5, h6, p { font-size: 16px; }

  footer {
    text-align: center;
    padding: 10px;
  }
}