@font-face {
  font-family: 'Merienda';
  src: url('Merienda-VariableFont_wght.ttf') format('truetype');
}

/* ============================
   VARIABLES CSS — source unique
   ============================ */
:root {
  --fs-titre:     clamp(2rem, 4.5vw, 4.5rem);
  --fs-h2:        clamp(1.2rem, 2.2vw, 1.8rem);
  --fs-texte:     clamp(0.75rem, 1.2vw, 0.95rem);
  --fs-signature: clamp(0.85rem, 1.1vw, 1.1rem);
  --fs-liens:     clamp(0.7rem, 1vw, 1rem);
  --fs-sign:      clamp(1rem, 1.5vw, 1.5rem);
}

/* ============================
   BASE
   ============================ */
body {
  background: linear-gradient(
    -45deg,
    rgb(32,48,89),
    rgb(11,24,54),
    rgb(32,48,89),
    rgb(11,24,54),
    rgb(32,48,89)
  );
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#titre_page {
  font-family: merienda;
  color: white;
  font-size: var(--fs-titre);
  padding: 10px;
  border: 3px solid white;
  margin: 0;
}

h2 {
  font-family: merienda;
  color: white;
  font-size: var(--fs-h2);
  margin: 0;
}

.contenant_titre h2 {
  border: 2px solid white;
  padding: 0.3rem 1rem;
}

.texte {
  font-family: merienda;
  color: white;
  font-size: var(--fs-texte);
  text-align: justify;
  margin: 0;
}

#texte_signature {
  font-family: merienda;
  font-weight: bold;
  color: white;
  font-size: var(--fs-signature);
  text-align: center;
  margin: 0;
}

.liens {
  font-family: merienda;
  color: white;
  font-size: var(--fs-liens);
  margin: 0;
}

a {
  text-decoration: none;
  color: white;
}

#signature {
  font-family: merienda;
  color: white;
  font-size: var(--fs-sign);
  margin: 0;
}

/* ============================
   STRUCTURE PRINCIPALE
   ============================ */
#page {
  display: block;
}

#page_menu {
  display: none;
  min-height: 100vh;
}

#haut_de_page {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30vh;
  min-height: 120px;
  position: relative;
}

#centre_page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: auto;
  padding: 6vh 0;
}

#bas_de_page {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 20vh;
  max-height: 20vh;
}

/* ============================
   HEADER
   ============================ */
#contenant_acces_menu {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 2vh;
  padding-left: 3%;
  width: auto;
  z-index: 999;
}

#contenant_titre_page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 100%;
}

#ouvrir_menu {
  width: clamp(40px, 7vw, 80px);
  height: clamp(40px, 7vw, 80px);
  border: 4px solid white;
  border-radius: 5%;
  background-color: rgb(11,24,54);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../Images/Menu_deroulant_blanc.png');
  cursor: pointer;
}

/* ============================
   CONTENU CENTRAL
   ============================ */
.cotes_centre_page {
  display: block;
  width: 15%;
  height: 100%;
}

#contenu_centre_page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
}

#section {
  width: 90%;
  background-color: rgb(11,24,54);
  border: 4px solid white;
  border-radius: 20px;
  padding: 1rem;
}

.contenant_sous_section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2vh 0;
}

#contenant_sous_section_signature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3vh 0;
}

.sous_section {
  width: 90%;
}

#sous_section_signature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
}

.contenant_titre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}

.contenant_texte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0;
}

/* ============================
   BAS DE PAGE
   ============================ */
#contenu_bas_de_page {
  width: 94%;
  height: 100%;
  border-top: 2px solid white;
}

#contenant_liens {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30%;
  padding: 1rem 0;
}

#contenant_signature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem 0;
}

/* ============================
   MENU — identique à index2.css
   ============================ */
#haut_de_page_menu {
  width: 100%;
  height: 30vh;
  min-height: 120px;
}

#centre_page_menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 998;
}

#contenant_fermer_menu {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 2vh;
  padding-left: 3%;
  width: auto;
  z-index: 999;
}

#fermer_menu {
  width: clamp(40px, 7vw, 80px);
  height: clamp(40px, 7vw, 80px);
  border: 4px solid white;
  border-radius: 5%;
  background-color: rgb(11,24,54);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../Images/Menu_deroulant_blanc.png');
  cursor: pointer;
}

#menu {
  display: block;
  width: 50%;
  min-height: 75%;
  border: 4px solid white;
  border-radius: 10px;
  background-color: rgb(11,24,54);
}

.onglet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  height: 24.5%;
  cursor: pointer;
}

#onglet_accueil         { border-bottom: 3px solid white; border-radius: 10px 10px 0 0; }
#onglet_mathematiques   { border-bottom: 3px solid white; }
#onglet_informatique    { border-bottom: 3px solid white; }
#onglet_autres_contenus { border-radius: 0 0 10px 10px; }

/* ============================
   TABLETTE (≤ 1000px)
   ============================ */
@media (max-width: 1000px) {

  #contenant_acces_menu,
  #contenant_fermer_menu {
    width: 20%;
  }

  #ouvrir_menu,
  #fermer_menu {
    width: clamp(44px, 11vw, 90px);
    height: clamp(44px, 11vw, 90px);
  }

  #centre_page {
    padding: 2vh 0;
  }

  .cotes_centre_page {
    display: none;
  }

  #contenu_centre_page {
    width: 90%;
  }

  #section {
    width: 95%;
  }

  #centre_page_menu {
    min-height: 45vh;
  }

  .onglet {
    min-height: 60px;
  }

}

/* ============================
   MOBILE (≤ 600px)
   ============================ */
@media (max-width: 600px) {

  #contenant_acces_menu,
  #contenant_fermer_menu {
    width: 20%;
  }

  #ouvrir_menu,
  #fermer_menu {
    width: clamp(44px, 13vw, 70px);
    height: clamp(44px, 13vw, 70px);
  }

  #centre_page {
    padding: 0 0 2vh 0;
  }

  #contenu_centre_page {
    width: 100%;
  }

  #bas_de_page {
    min-height: auto;
    max-height: none;
    padding: 1.5vh 0;
  }

  #menu {
    width: 75%;
  }

  #contenant_liens {
    display: none;
  }

  #contenant_signature {
    height: auto;
  }

}