body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #abd2e7;
  color: #333;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.sidebar-open {
  overflow-y: hidden;
}

main {
  flex-grow: 1;
  position: relative;
  z-index: 5; 
  padding-top: 100px;
}

header#navbar { 
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  padding: 20px 50px;
  border-radius: 0 0 40px 40px;
  background: #ebe8e3;
  border: 8px solid #f996bf;
  border-top: none;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: top 0.3s ease;
}

header#navbar.navbar-retracted {
  top: -45px;
}

header#navbar.navbar-retracted:hover {
  top: 0;
}

header#navbar nav ul {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0px;
  list-style: none;
  margin: 0;
}

header#navbar nav a {
  font-family: 'Super Childish', sans-serif;
  font-size: 20px;
  padding: 10px 15px;
  color: #e287b2;
  text-decoration: none;
  transition: transform 0.1s ease;
  white-space: nowrap;
}

header#navbar nav a:hover {
  transform: scale(1.1);
  color: #c05c94;
}

#menuBtn {
  display: none; 
}
#closeMenuBtn {
  display: none; 
}
.sidebar-overlay {
  display: none;
}


#RechercheIconContainer {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: 990; 
}

#RechercheIcon {
  position: relative; 
  width: 55px;
  height: 55px;
  background: #ebe8e3;
  border: 5px solid #f996bf;
  border-radius: 51px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  display: flex;
  align-items: center;
}
#RechercheIcon.search-active { 
  width: 280px; 
  border-radius: 30px; 
}
#Loupe { min-width: 28px; 
  width: 28px; 
  height: auto; 
  margin: 0 10px 4px; 
  z-index: 2; 
  transition: transform 0.3s ease; 
}
#SearchInput { 
  font-family: Indie Flower; 
  width: 0; 
  padding: 0; 
  border: none; 
  background: transparent; 
  outline: none; 
  font-size: 16px; 
  color: #555; 
  opacity: 0; 
  transition: 
  width 0.3s ease-in-out 0.1s, 
  opacity 0.3s ease-in-out 0.1s, 
  padding 0.3s ease-in-out 0.1s; 
  flex-grow: 1; height: 100%; 
  line-height: normal; 
  text-align: center;}
  
#RechercheIcon.search-active #SearchInput { width: auto; opacity: 1; padding: 0 10px 0 0; text-align: center; }

h2 {
  font-family: 'Super Childish', sans-serif;
  color: #D87ABC;
  margin-bottom: 30px;
  margin-top: 20px;
  text-align: center;
}

#section1 {
  position: relative;
  padding-top: 15px; 
  padding-bottom: 50px;
  z-index: 10;

}
.Fusiontitre { position: relative; width: 100%; min-height: 450px; }
#Titre1 { position: absolute; z-index: 20; top: -20px; left: 50%; transform: translateX(-50%); width: 60%; max-width: 400px; height: auto; }
#Magicalgirl { position: absolute; z-index: 10; top: 55px; left: 50%; transform: translateX(-50%); width: 70%; max-width: 500px; height: auto; }


#section2 {
  position: relative;
  text-align: center;
  padding: 40px 20px;
  border-bottom: 1px solid #ccc;
  z-index: 10;
}
#titreIntroduction { font-size: 70px; margin-bottom: 30px; }
.intro-cards-container { display: flex; justify-content: center; align-items: flex-start; gap: 30px; flex-wrap: wrap; padding: 0 20px; }
#RectangleSchemaIntro, #RectangleTexteIntro { width: 380px; min-height: 450px; padding: 25px; border-radius: 35px; background: #faf8e5; border: 10px solid #f996bf; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
#RectangleTexteIntro p { font-family: "Indie Flower", cursive; font-weight: bold; text-align: justify; font-size: 17px; color: #697b9f; line-height: 1.5; margin-top: 35px; }
#schemaImage { display: block; width: 95%; max-width: 100%; height: auto; margin-top: 5px; }


#section3 {
  position: relative;
  padding-top: 40px;
  padding-bottom: 300px;
  min-height: 700px;
  z-index: 10;
}

#titreTermes {
  font-size: 60px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

#nuagesdefond {
  position: absolute; 
  top: 100px;  
  margin-bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;   
  max-width: 1200px;  
  height: auto;
  z-index: 1;       
  display: block;
}

.conteneur-carte-retournable {
  position: absolute;
  perspective: 1000px;
  z-index: 2;
}

#ConteneurNeurotransmetteur {
  top: 150px; 
  left: 350px;  
  width: 330px;
  height: 200px;
}

#ContenuAxone {
  top: 370px;   
  left: 230px;
  width: 250px;
  height: 180px;
}

#ContenuMicroprocesseur {
  top: 230px;
  left: 800px; 
  width: 300px;
  height: 190px;
}

#ContenuTaille {
  top: 450px;
  left: 750px;
  width: 250px;
  height: 160px;
}

.carte-retournable { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.conteneur-carte-retournable:hover .carte-retournable { transform: rotateY(180deg); }
.carte-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; }
.carte-face img { max-width: 100%; max-height: 100%; height: auto; width: 100%; display: block; }
.carte-verso { transform: rotateY(180deg); }

#copain {
  display: block;
  position: absolute;
  margin-top: -450px; 
  left: 60px;
  width: 800px; 
  max-width: 100%;
  height: auto;
  z-index: 60; 
}

#section4 {
  position: relative;
  text-align: center;
  padding: 40px 20px;
  min-height: 400px;
  z-index: 10;
  margin-top: 0px;
}
#titreArticles { font-size: 70px; margin-bottom: 30px; }
#ArticlesContainer { position: relative; margin: 0 auto; width: 90%; max-width: 950px; height: 350px; }
#RectanglearticlesBackground { background-color: #94D0F4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 49px; border: 8px solid #e86ec5; z-index: 1; }
#ArticlesFlexWrapper { position: relative; width: 100%; height: 100%; padding: 50px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; z-index: 3; }
.lien-article { text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease-out; }
.lien-article:hover { transform: translateY(-5px) scale(1.03); }
.rectangle-article-contenu { width: 200px; height: 150px; padding: 15px; box-sizing: border-box; border-radius: 49px; background: #faf8e5; border: 8px solid #e86ec5; box-shadow: 1px 9px 10px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.rectangle-article-contenu p { font-family: 'Indie Flower', cursive; font-weight: bold; font-size: 20px; color: #697b9f; line-height: 1.4; margin: 0; }

.footer-background-cloud-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
  pointer-events: none; 
  opacity: 0.5; 
}
#Grosnuage { display: block; width: 100%; height: auto; }

footer {
  position: relative;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 1100px;
  padding: 30px 50px;
  background: #ebe8e3;
  border: 8px solid #e86ec5;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  z-index: 70;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-item { font-family: 'Righteous', sans-serif; font-size: 15px; color: #c05c94; white-space: nowrap; }
#social-icons { display: flex; align-items: center; gap: 12px; }
#social-icons img { height: 22px; width: auto; vertical-align: middle; }
#social-icons a:hover img { opacity: 0.7; }




@media (max-width: 1024px) {

#section3 {
  min-height: 350px; 
}

#nuagesdefond {
  position: absolute;  
  top: 130px; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;     
  max-width: 1200px;  
  height: auto;
  z-index: 1;  
  display: block;
  }
  
#ConteneurNeurotransmetteur {
  top: 260px;
  left: 140px;
  width: 280px;  
  height: 170px; 
}
#ContenuAxone {
  top: 410px;
  left: 150px;
  width: 220px;
  height: 160px;
}
#ContenuMicroprocesseur {
  top: 160px;
  left: 480px;
  width: 270px;
  height: 170px;
}
#ContenuTaille {
  top: 350px;
  left: 450px;
  width: 220px;
  height: 140px;
}

 #copain { 
  width: 530px;
  margin-top: -250px; 
  margin-left: -100px;
  }
}

#ArticlesFlexWrapper { position: relative; height: 100%; padding: 20px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; z-index: 3; }




@media (max-width: 767px) {
  main {
    padding-top: 60px;
  }

  header#navbar:not(.sidebar-active) { 
  display: none !important;
  }

  #menuBtn {
    display: block;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1005;
    background: #f996bf;
    color: white;
    border: 2px solid white;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  header#navbar.sidebar { 
    display: block; 
    position: fixed;
    top: 0;
    left: -100%; 
    width: 280px; 
    max-width: 80vw; 
    height: 100vh;
    background: #ebe8e3;
    border: none;
    border-right: 5px solid #f996bf;
    border-radius: 0;
    padding: 20px;
    box-shadow: 3px 0 10px rgba(0,0,0,0.15);
    z-index: 1002;
    transform: none !important; 
    transition: left 0.3s ease-in-out;
    overflow-y: auto; 
  }

  header#navbar.sidebar.sidebar-active {
    left: 0 !important; 
  }
  
  #closeMenuBtn {
    display: block; 
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    color: #f996bf;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
  }
  
  header#navbar.sidebar nav { margin-top: 40px; }
  header#navbar.sidebar nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  header#navbar.sidebar nav li { width: 100%; }
  header#navbar.sidebar nav a { font-size: 18px; padding: 12px 10px; display: block; border-bottom: 1px solid #fde2ef; color: #e287b2; }
  header#navbar.sidebar nav li:last-child a { border-bottom: none; }

  .sidebar-overlay { 
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    cursor: pointer;
  }
  .sidebar-overlay.active {
    display: block;
  }

  #RechercheIconContainer { top: auto; bottom: 15px; right: 15px; z-index: 990; }
  #RechercheIcon { width: 45px; height: 45px; border-width: 4px;}

  .Fusiontitre { min-height: 350px; }
  #Titre1 { width: 80%; max-width: 260px; top: 1px;}
  #Magicalgirl { width: 85%; max-width: 300px; top: 35x;}

  #section2 { padding: 20px 10px 30px 10px; }
  #titreIntroduction { font-size: 32px; margin-bottom: 25px; }
  .intro-cards-container { flex-direction: column; align-items: center; gap: 20px; }
  #RectangleSchemaIntro, #RectangleTexteIntro { width: 90%; max-width: 340px; padding: 15px; border-width: 6px;}

  #section3 {
    min-height: auto;
    padding-top: 20px;
    padding-bottom: 30px; 
    overflow: visible;
  }
  #titreTermes { font-size: 28px; margin-bottom: -20px; }
  #nuagesdefond { 
    position: relative;
    top: 0; left: 0; transform: none; 
    width: 120%; 
    max-width: 500px;
    margin: 0 auto -150px auto; 
    z-index: 1; 
    opacity: 0.7;
  }

  #section3 {
    min-height: 350px;
    padding-bottom: 50px;
  }

  #titreTermes {
    font-size: 32px;
  }

  #nuagesdefond {
    top: 40px;
    max-width: 100%; 
    width: 120vw; 
    left: 50%;
    transform: translateX(-50%);
  }

  .carte-face img {
    object-fit: contain;
  }

  #ConteneurNeurotransmetteur {
    top: 100px;
    left: 5%;
    width: 55%; 
    height: 100px; 
  }
  #ContenuAxone {
    top: 235px;
    left: 8%;
    width: 38%;
    height: 90px;
  }
  #ContenuMicroprocesseur {
    top: 115px;
    left: 55%;
    width: 47%;
    height: 100px;
  }
  #ContenuTaille {
    top: 220px;
    left: 45%;
    width: 41%;
    height: 90px;
  }

  #copain { 
    width: 120%;
    max-width: 330px;
    margin-top: -120px; 
    margin-left: -120px;
   }

  #section4 {
    padding-top: 20px;
    margin-top: 0; 
  }
  #titreArticles {
    font-size: 32px;
  }

  #ArticlesContainer {
    width: 90%;
    max-width: 380px;
    height: auto;
  }

  #RectanglearticlesBackground {
    border-radius: 30px;
    border-width: 6px;
    min-height: 390px;
    left: 50%;  
    transform: translateX(-50%)
  }

  #ArticlesFlexWrapper {
    height: auto;
    flex-direction: column; 
    align-items: center;   
    gap: 20px;
    padding: 15px 20px 2px 40px;
  }

  .rectangle-article-contenu {
    width: 90%; 
    max-width: 300px;
    min-height: 110px;
    height: auto; 
    padding: 15px;
  }
  .rectangle-article-contenu p {
    font-size: 18px;
  }
  
  footer { flex-direction: column; align-items: center; text-align: center; gap: 15px; padding: 20px 15px; margin-top: 30px;}
 }
}