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

/* ============================
   VARIABLES CSS — source unique
   ============================ */
:root {
  --fs-h1:    clamp(1.6rem, 3vw, 2.8rem);
  --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);
  --fs-avenir:clamp(1rem,    1.5vw, 1.5rem);
  --hauteur-sous-section: 280px;
}

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

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

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

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

#texte_a_venir_3 {
  font-family: merienda;
  color: white;
  font-size: var(--fs-avenir);
  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: flex-start;
  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_logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  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;
}

#logo {
  width: 100%;
  height: 100%;
  min-height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../Images/Aquilone_logo.png');
}

/* ============================
   SECTIONS CONTENUS / CRÉATIONS
   ============================ */
#section_contenus {
  width: 47%;
  min-height: 90%;
  border-right: 3px solid white;
}

#section_creations {
  width: 47%;
  min-height: 90%;
  border-left: 3px solid white;
}

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

#contenant_titre_section_gauche {
  justify-content: start;
}

#contenant_titre_section_droite {
  justify-content: end;
}

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

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

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

.sous_section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95%;
  height: 100%;
  border: 3px solid white;
  border-radius: 10px;
  padding: 0.5rem;
}

#sous_section_droite_a_venir .sous_section {
  background-color: rgb(130,124,153);
}

#sous_section_droite_a_venir_2 .sous_section {
  background-color: rgb(69,107,130);
}

#sous_section_droite_a_venir_3 .sous_section {
  background-color: rgb(70, 102, 70);
}

#sous_section_mathematiques  { background-color: rgb(23,84,103); }
#sous_section_informatique   { background-color: rgb(13,124,107); }
#sous_section_autres_contenus{ 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_mathematiques  { background-image: url('../Images/Mathematiques_logo_2.png'); }
#illustration_tel_mathematiques    { background-image: url('../Images/Mathematiques_logo_2.png'); }
#zone_illustration_informatique    { background-image: url('../Images/Informatique_logo.png'); }
#illustration_tel_informatique     { background-image: url('../Images/Informatique_logo.png'); }
#zone_illustration_autres_contenus { background-image: url('../Images/Autres_contenus_logo.png'); }
#illustration_tel_autres_contenus  { background-image: url('../Images/Autres_contenus_logo.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;
}

.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');
}

#texte_bouton_mathematiques  { color: rgb(23,84,103); }
#texte_bouton_informatique   { color: rgb(13,124,107); }
#texte_bouton_autres_contenus{ color: rgb(120,93,158); }

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

  :root {
    --hauteur-sous-section: 260px;
  }

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

  #contenant_logo {
    width: 65%;
  }

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

  #centre_page {
    display: block;
    min-height: auto;
    padding: 2vh 0;
  }

  #section_contenus {
    width: 100%;
    min-height: auto;
    border-right: none;
    padding-bottom: 2vh;
  }

  #section_creations {
    width: 100%;
    min-height: auto;
    border-left: none;
    padding-top: 2vh;
  }

  .contenant_titre_section {
    min-height: 80px;
  }

  #contenant_titre_section_gauche,
  #contenant_titre_section_droite {
    justify-content: center;
  }

  .sous_section_gauche,
  .sous_section_droite {
    justify-content: center;
  }

  #centre_page_menu {
    min-height: 45vh;
  }
  
  .onglet {
    min-height: 60px;
  }

}

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

  :root {
    --hauteur-sous-section: auto;
  }
  
  #centre_page {
    padding-top: 0;
  }
  
  #bas_de_page {
    min-height: auto;
    max-height: none;
    padding: 1.5vh 0;
  }

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

  #contenant_logo {
    width: 75%;
  }

  #logo {
    height: 85%;
  }

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

  #menu {
    width: 75%;
  }

  .sous_section_gauche .sous_section {
    display: block;
    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;
  }

  #contenant_liens {
    display: none;
  }

  #contenant_signature {
    height: auto;
  }

}