/* -------------------------------------------------------- */
/* responsive.css – GLOBAL (HEADER + SUBMENU + FOOTER ONLY) */
/* -------------------------------------------------------- */


/* ======================================================== */
/* ====================== TABLET =========================== */
/* ======================================================== */

@media (max-width: 1024px) {

  /* ---------- HEADER ---------- */

  .site-logo {
    max-width: 360px;
  }

  nav ul {
    gap: 25px;
  }

  /* 🔥 important stabilité menu (évite shift hover tablette) */
  #central-panel {
    transform-origin: top center;
  }

  /* ---------- SUBMENU ---------- */

  .submenu {
    min-width: 240px;
    max-width: 90vw;

    /* sécurité hover mobile/tablet */
    transform-origin: top center;
  }

  .submenu a {
    font-size: 1.05em;
  }

  /* ---------- FOOTER ---------- */

  footer {
    padding: 18px 0;
    font-size: 0.95em;
  }

}


/* ======================================================== */
/* ====================== MOBILE =========================== */
/* ======================================================== */

@media (max-width: 768px) {

  /* ---------- HEADER ---------- */

  .header-container {
    gap: 10px;
  }

  nav ul {
    flex-direction: column;
    gap: 12px;
  }

  .menu-item button,
  nav a {
    font-size: 1em;
  }

  .site-logo {
    max-width: 300px;
  }

  /* ---------- SUBMENU ---------- */

  .submenu {
    width: 90vw;
    min-width: 200px;

    /* 🔥 évite effet “porte bloquée” sur scroll mobile */
    position: absolute;
  }

  .submenu li {
    padding: 8px 12px;
  }

  .submenu a {
    font-size: 1em;
  }

  /* ---------- FOOTER ---------- */

  footer {
    padding: 15px 0;
    font-size: 0.95em;
  }

}


/* ======================================================== */
/* ================= SMALL MOBILE ========================== */
/* ======================================================== */

@media (max-width: 480px) {

  /* ---------- HEADER ---------- */

  .menu-item button,
  nav a {
    font-size: 0.95em;
  }

  .site-logo {
    max-width: 220px;
  }

  /* ---------- SUBMENU ---------- */

  .submenu {
    width: 95vw;
    min-width: unset;

    /* 🔥 empêche glitch overflow mobile */
    left: 50%;
    transform: translateX(-50%) rotateX(-90deg);
  }

  .submenu li {
    padding: 7px 10px;
  }

  .submenu a {
    font-size: 0.95em;
  }

  /* ---------- FOOTER ---------- */

  footer {
    padding: 12px 0;
    font-size: 0.9em;
  }

  footer a {
    display: block;
    margin: 5px 0;
  }

  .footer-social img {
    width: 22px;
    height: 22px;
  }

}