@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Zilla+Slab:wght@700&display=swap');

html {
  font-size: 13px; /* mobile par défaut */
}

@media (min-width: 480px) { html { font-size: 14px; } }
@media (min-width: 768px) { html { font-size: 15px; } }
@media (min-width: 1440px) { html { font-size: 16px; } }

body.menu-open {
  overflow: hidden;
  height: 100dvh;
  position: fixed;
  width: 100%;
  touch-action: none; 
}

#burger-menu { display: none; }

@media (max-width: 1025px) {
  #burger-menu {
    display: block;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    background-color: var(--color-bg-dark);
    border: none;
    border-radius: 100%;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
  }
  #burger-menu:hover { background-color: var(--color-accent); }
  #burger-menu i { font-size: 1.5rem; color: white; }
}

@media (max-width: 1025px) {

  #wrapper_header { display: none; }
  #main_content { margin-left: 0; }
  #text_zone { margin: 0; background-color: rgba(255,255,255,0.8); border: none; }
  #text_zone_content { margin: 2.5rem; }

  #wrapper_header.show {
    display: flex !important;
    width: 100%;
    background-color: var(--color-bg-dark);
    z-index: 1500;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    animation: slideIn 0.4s ease forwards;
  }

  #wrapper_header.show #header {
    gap: 1rem;
  }

  #wrapper_header.show #header_img img { width: 11rem; }

  #wrapper_header.show #header_name h1 { font-size: 2.1rem; }

  #wrapper_header.show #header_logo { width: 75%; }

  #wrapper_header.show .logo i {
    font-size: 3.2rem;
    transition: transform 0.5s ease, color 0.5s ease;
  }
  #wrapper_header.show .logo i:hover { transform: scale(1.2); color: var(--color-accent); }

  #wrapper_header.show .menu-nav ul li a { font-size: 1.75rem; }

  @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }

  #wrapper_header.hide { animation: slideOut 0.4s ease forwards; }
  #wrapper_header.no-animation { animation: none !important; transition: none !important; }
}