@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-h1:     clamp(1.6rem, 2.6vw, 2.6rem);
  --fs-h2:     clamp(1.2rem, 2.2vw, 1.8rem);
  --fs-texte:  clamp(0.75rem, 1.2vw, 0.95rem);
  --fs-bouton: clamp(0.9rem, 1.5vw, 1.2rem);
  --fs-liens:  clamp(0.7rem, 1vw, 1rem);
  --fs-sign:   clamp(1rem, 1.5vw, 1.5rem);
  --hauteur-section: 320px;
}

/* ============================
   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;
}

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

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

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

.texte_bouton {
  font-family: merienda;
  font-size: var(--fs-bouton);
  font-weight: bold;
  margin: 0;
  color: rgb(120,93,158);
}

.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: 75%;
  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 {
  width: 70%;
  height: 100%;
}

.contenant_titre_section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 1vh 0;
}

.titre_section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  min-height: 70%;
  padding: 0.5rem;
  background-color: rgb(11,24,54);
  border: 2px solid white;
}

.contenant_section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--hauteur-section);
  min-height: var(--hauteur-section);
  padding: 1.2vh 0;
}

.section {
  display: flex;
  align-items: center;
  width: 90%;
  height: 100%;
  border: 4px solid white;
  border-radius: 20px;
  padding: 0.5rem;
  background-color: rgb(120,93,158);
}

/* ============================
   ZONE TEXTE ET ILLUSTRATION
   ============================ */
.zone_texte {
  width: 70%;
  height: 100%;
}

.zone_illustration {
  display: block;
  width: 30%;
  height: 100%;
  min-height: 160px;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
}

#zone_illustration_1   { background-image: url('../Images/Paradoxe_1.png'); }
#illustration_tel_1   { background-image: url('../Images/Paradoxe_1.png'); }
#zone_illustration_2  { background-image: url('../Images/Paradoxe_2.png'); }
#illustration_tel_2   { background-image: url('../Images/Paradoxe_2.png'); }
#zone_illustration_3 { background-image: url('../Images/Paradoxe_3.png'); }
#illustration_tel_3 { background-image: url('../Images/Paradoxe_3.png'); }

.contenant_titre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30%;
  padding: 0.6rem 0;
}

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

.contenant_illustration_tel {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  padding: 0.4rem 0;
}

.illustration_tel {
  width: 65%;
  height: 100%;
  min-height: 130px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

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

.bordure_titre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  min-height: 80%;
  padding: 0.5rem;
  border-bottom: 2px solid white;
}

.delimitation_texte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  min-height: 90%;
}

/* ============================
   BOUTON
   ============================ */
.bouton {
  display: flex;
  align-items: center;
  width: clamp(80px, 45%, 200px);
  height: 44px;
  background-color: white;
  border: 2px solid rgb(11,24,54);
  border-radius: 10px;
  cursor: pointer;
  color: rgb(11,24,54);
}

.contenant_texte_bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 100%;
}

.image_bouton {
  width: 25%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../Images/Deroulement_vertical.png');
}

/* ============================
   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) {

  :root {
    --hauteur-section: auto;
  }

  #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;
  }

  .section {
    display: block;
    width: 92%;
    padding: 1rem;
  }

  .zone_illustration {
    display: none;
  }

  .zone_texte {
    width: 100%;
  }

  .contenant_titre  { min-height: 60px; height: auto; }
  .contenant_texte  { min-height: 80px; height: auto; }

  .contenant_illustration_tel {
    display: flex;
  }

  .contenant_bouton {
    min-height: 60px;
    height: auto;
  }

  #menu {
    width: 75%;
  }

  #contenant_liens {
    display: none;
  }

  #contenant_signature {
    height: auto;
  }

}