/*
 * Header / Footer universels — responsive mobile / tablette (LT26).
 * Charge sur toutes les pages via header-universel.php.
 * 100% additif : aucune règle desktop n'est touchée, tout est dans @media.
 */

/* ============================================================
 * Fix global : page-shell.php pollue les pages LT26 modernes
 *
 * page-shell.php wrap tout contenu dans :
 *   <main>
 *     <div class="container page-container">
 *       <h1 class="page-title">...</h1>            ← doublon h1
 *       <div class="page-box">                     ← frame visuelle
 *         <main class="lt26-page">...              ← le vrai contenu
 *
 * Quand le body contient un main.lt26-page, on neutralise TOUS les
 * wrappers du page-shell pour que le LT26 prenne 100% de l'espace
 * sans frame, sans titre doublon, sans padding parasite.
 *
 * Spécificité maximale via body:has() + !important sur chaque
 * propriété — pour battre les règles polish à 0,2,1 et toute autre
 * surcharge potentielle.
 *
 * Compatible Chrome 105+, Safari 15.4+, Firefox 121+ (:has()).
 * ============================================================ */

/* 1. H1 doublon : caché visuellement (gardé pour a11y/SEO) */
body:has(main.lt26-page) .page-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2. Outer <main> de page-shell : pas de padding qui pousse le contenu */
body:has(main.lt26-page) > main:not(.lt26-page),
body:has(main.lt26-page) > div > main:not(.lt26-page) {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 3. .container.page-container : annule max-width + padding parasite */
body:has(main.lt26-page) .container.page-container,
body:has(main.lt26-page) .page-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 4. .page-box : LA FRAME VISUELLE — on tue tout son styling.
   La règle polish (body:not(.lt-accueil-gl):not(.lt-acheter-gl) .page-box)
   a 0,2,1 de spécificité. La nôtre via body:has() a 0,2,0 mais avec
   !important sur chaque propriété on bat l'absence de !important du polish. */
body:has(main.lt26-page) .page-box,
body:has(main.lt26-page) > main .page-box,
body:has(main.lt26-page) > div .page-box {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. .lt26-page interne : assure son padding-top pour ne pas toucher la nav */
body:has(main.lt26-page) main.lt26-page {
  padding-top: var(--gl-nav-h, 76px);
}

/* ============================================================
 * HEADER mobile — drawer "off-canvas"
 * ------------------------------------------------------------
 * SOURCE UNIQUE : css/mobile-responsive-global.css (§3 header / §4 drawer).
 * Les règles drawer / overlay / scroll-lock / animation hamburger-X étaient
 * dupliquées ici avec des valeurs divergentes (padding 90 vs 80, transition
 * 360 vs 320ms, blur sur l'overlay). Elles ont été consolidées dans la couche
 * globale (chargée en dernier → gagne la cascade) pour une seule source de
 * vérité. L'overlay n'a plus de backdrop-filter : bug de stacking :has
 * documenté côté global (le blur retombait sur le texte du drawer).
 * ============================================================ */

/* ============================================================
 * Header inner — espacement compact sur mobile
 * ============================================================ */
@media (max-width: 768px) {
  .lt-gl-nav__inner,
  .lt26-nav__inner {
    padding: 0 14px;
    gap: 6px;
  }
  .lt-gl-nav__brand { font-size: 16px; }
  .lt26-nav__logo,
  .lt-gl-nav__logo {
    height: 28px;
    max-width: min(160px, 50vw);
  }
  .lt26-nav__actions { gap: 4px; }

  /* Username caché : seul l'avatar reste pour libérer la place */
  .lt26-nav__user-name { display: none; }

  /* Boutons CTA compacts */
  .lt-gl-nav__explore,
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 9px 10px;
    font-size: 12px;
  }
  /* Explorer : redondant avec ce qu'on a dans le drawer → on cache */
  .lt-gl-nav__explore { display: none; }
}

/* Compaction agressive : cacher icônes secondaires et label "Déposer".
   Remontée de 480 → 600 pour couvrir aussi les phones landscape /
   petits tablets portrait où la nav se serrait trop. */
@media (max-width: 600px) {
  /* Seul "+" reste, le label "Déposer" disparaît */
  .lt-gl-nav__deposit span,
  .lt26-nav__cta span {
    display: none;
  }
  /* Icônes ♡ ✉ libérées (accessibles depuis le drawer) */
  .lt-gl-nav__inner .lt26-nav__icon { display: none; }

  /* CTA "+" en carré arrondi compact, équilibré */
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 8px 11px;
    min-width: 36px;
    justify-content: center;
    font-size: 16px;
  }
}

/* 480px : phones standard — brand et padding plus serrés */
@media (max-width: 480px) {
  .lt-gl-nav__brand { font-size: 14px; }
  .lt-gl-nav__inner,
  .lt26-nav__inner {
    padding: 0 10px;
    gap: 4px;
  }
  .lt26-nav__user-btn { padding: 4px; }
  .lt26-nav__user-avatar {
    width: 28px;
    height: 28px;
  }
  /* Taille hamburger : gérée par mobile-responsive-global.css (44×44, ≥44px tap target) */
}

/* 380px : très petits écrans (iPhone SE, vieux Android) */
@media (max-width: 380px) {
  .lt-gl-nav__brand { font-size: 13px; }
  .lt-gl-nav__inner,
  .lt26-nav__inner {
    padding: 0 8px;
    gap: 3px;
  }
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 7px 9px;
    min-width: 32px;
  }
}

/* ============================================================
 * FOOTER mobile — CTA pleine largeur, légale centrée
 * ============================================================ */
@media (max-width: 600px) {
  .lt26-footer {
    padding: 48px 18px 28px;
    margin-top: 40px;
  }

  .lt26-footer__big {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
  }

  /* Le bloc qui contient les 2 boutons (Déposer / Comment ça marche) */
  .lt26-footer__top {
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 36px;
  }
  .lt26-footer__top > div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lt26-footer__top > div:last-child .lt26-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Bloc brand : largeur libérée */
  .lt26-footer__desc { max-width: 100%; }

  /* Barre légale : centrée et empilée */
  .lt26-footer__legal {
    text-align: center;
    align-items: center;
    margin-top: 32px;
  }
  .lt26-footer__legal-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
 * prefers-reduced-motion : tout figé
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lt26-nav__mobile { transition: none; }
  body:has(.lt26-nav__mobile.is-open)::before { animation: none; }
  .lt26-nav__hamburger span { transition: none; }
  .lt26-nav__mobile a { transition: none; }
}