/*
 * mobile-responsive-global.css
 * Couche responsive universelle Loguetown — cible mobile dès 360px.
 * Chargée EN DERNIER par includes/header-universel.php pour gagner sur les
 * polish/cinematic pages-spécifiques en cas de conflit.
 *
 * 100% additif : toutes les règles sont sous @media (max-width: …).
 * Aucun impact desktop.
 *
 * Priorités utilisateur :
 *   1. Header / menu mobile lisible et fonctionnel
 *   2. Formulaires & boutons : tailles tactiles (≥ 44px, font 16px = anti-zoom iOS)
 *   3. Anti-overflow horizontal sur tout le site
 *   4. Drawer mobile : finition et états manquants
 */

/* ============================================================
 * 1) Anti-overflow horizontal — appliqué partout en mobile
 * ============================================================ */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  main, section, article, header, footer, nav, aside {
    max-width: 100%;
  }
  img, video, iframe, picture, canvas, svg {
    max-width: 100%;
    height: auto;
  }
  /* SVG icônes inline gardent leur taille fixe */
  button > svg, a > svg, .lt26-nav__icon svg { height: auto; }

  /* Tables → scroll horizontal isolé plutôt que de pousser la page */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Conteneurs très contraints : pas de width fixe qui dépasse */
  [class*="container"]:not(.lt26-nav__inner):not(.lt-gl-nav__inner) {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
 * 2) Formulaires & contrôles — accessibilité tactile
 *    font-size 16px sur inputs = pas de zoom auto sur iOS
 *    min-height 44px = recommandation Apple/Material
 * ============================================================ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
  }

  textarea {
    min-height: 96px;
  }

  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 44px;
    font-size: 15px;
    box-sizing: border-box;
  }

  /* Tap target zone autour des liens d'action */
  a.btn, .lt26-btn, .btn-lbc-annonce {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Formulaires : labels et groups bien espacés */
  label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
  }

  /* Rangées de formulaire qui restent côte-à-côte par défaut → on empile */
  .form-row,
  .form-inline,
  .lt26-form-row,
  .row-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .form-row > *,
  .form-inline > *,
  .lt26-form-row > *,
  .row-form > * {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================
 * 3) Header : barre du haut compacte + recherche utilisable
 * ============================================================ */
@media (max-width: 768px) {
  /* Header LBC (legacy header-universel à la racine) */
  .header-lbc-leboncoin .header-content-lbc {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .header-lbc-leboncoin .search-bar-lbc {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    margin: 0;
  }
  .header-lbc-leboncoin .search-bar-input {
    font-size: 16px;
    min-height: 44px;
  }
  .header-lbc-leboncoin .search-bar-btn {
    min-height: 44px;
  }
  .header-lbc-leboncoin .header-actions-lbc {
    gap: 6px;
  }
  .header-lbc-leboncoin .header-action-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .header-lbc-leboncoin .btn-lbc-annonce {
    padding: 10px 14px;
    font-size: 13px;
  }
  /* Nom utilisateur caché → seul avatar visible (gain de place) */
  .header-lbc-leboncoin .user-name { display: none; }

  /* Header LT26 — input de recherche lisible */
  .lt-gl-nav__brand,
  .lt26-nav__brand {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
  }
  .lt26-nav__logo,
  .lt-gl-nav__logo {
    display: block;
    height: 30px;
    width: auto;
    max-width: min(150px, 50vw);
    object-fit: contain;
  }
  body.lt26-grain .lt-gl-nav__search.lt26-nav__search {
    display: none;
  }
  .lt26-nav__search-input,
  .lt-gl-nav__search .lt26-nav__search-input {
    font-size: 16px;
    min-height: 40px;
  }
  .lt26-nav__search-btn {
    min-height: 40px;
    min-width: 40px;
  }

  /* Searchbar legacy : forcer width fluide (override le width:420px hardcodé) */
  .search-bar-input {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Login dropdown legacy : ne pas imposer min-width: 300px sur 360px */
  .login-dropdown-inner {
    min-width: 0 !important;
    width: 100%;
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* Map / leaflet : les controls peuvent flotter en haut à droite,
     on remonte légèrement la zoom pour libérer l'espace du header */
  .leaflet-top.leaflet-left {
    top: 10px;
  }
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }

  /* Galleries d'annonce : thumbnails scrollables horizontalement */
  .gallery-thumbs,
  .annonce-gallery__thumbs,
  .product-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .gallery-thumbs > *,
  .annonce-gallery__thumbs > *,
  .product-thumbs > * {
    flex-shrink: 0;
  }

  /* Filters bar (acheter) : wrap propre */
  .acheter-filters,
  .filters-bar,
  .lt26-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .acheter-filters > *,
  .filters-bar > *,
  .lt26-filters > * {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Hamburger : zone tactile correcte et visible dès que les liens desktop
   disparaissent (≤ 1100px, breakpoint établi par loguetown-design-2026.css) */
@media (max-width: 1100px) {
  .lt26-nav__hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--lt26-line, rgba(212, 160, 23, 0.2));
    border-radius: 10px;
    cursor: pointer;
  }
  .lt26-nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--lt26-ink, currentColor);
    transition: transform 220ms ease, opacity 220ms ease;
  }
  .lt26-nav__hamburger span + span {
    margin-top: 5px;
  }
}

/* ============================================================
 * 4) Drawer mobile — état repos + ouvert (#lt26-nav-mobile)
 *    Le panneau slide depuis la droite. Au-delà de 1100px il reste
 *    masqué (nav desktop visible). Reste cohérent avec
 *    header-footer-responsive.css.
 *
 *    NOTE: loguetown-design-2026.css définit déjà
 *      .lt26-nav__mobile { display: none; }
 *      .lt26-nav__mobile.is-open { display: flex; }
 *    On NE redéfinit PAS le display ici pour ne pas créer de conflit ;
 *    on se contente d'override la position/look en mobile.
 * ============================================================ */
@media (max-width: 1100px) {
  .lt26-nav__mobile,
  #lt26-nav-mobile {
    /* SOURCE UNIQUE du drawer (consolidé depuis header-footer-responsive.css).
       display:flex même fermé = le panneau reste rendu hors-écran (translateX
       100%) pour que le slide-in s'anime (un toggle display:none→flex casserait
       l'animation). La base loguetown-design-2026.css le met à display:none ;
       cette couche, chargée en dernier, gagne. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(86vw, 360px);
    padding: 80px 18px 32px;
    /* Background OPAQUE : pas de transparence sinon le contenu derrière transparait */
    background: #050a1a;
    background-color: #050a1a;
    border-left: 1px solid var(--lt26-line, rgba(212, 160, 23, 0.2));
    box-shadow: -22px 0 60px -22px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 5060;
    /* Force son propre stacking context → pas de blur depuis l'overlay parent */
    isolation: isolate;
    /* Rendu de texte net malgré le GPU compositing du transform */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Aucun filter / backdrop-filter ne doit pouvoir traverser */
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Drawer ouvert. Le sélecteur ID est nécessaire pour battre la règle
     de base #lt26-nav-mobile (spec 1,0,0) qui pose translateX(100%).
     On utilise translate3d pour rester sur la même couche GPU. */
  #lt26-nav-mobile.is-open,
  .lt26-nav__mobile.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Sélecteur ID (spec 1,0,0) qui bat tout. !important en plus pour blinder. */
  #lt26-nav-mobile .lt26-nav__mobile-link,
  #lt26-nav-mobile a,
  .lt26-nav__mobile .lt26-nav__mobile-link,
  .lt26-nav__mobile a.lt26-nav__mobile-link {
    display: block;
    padding: 14px 16px;
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 500;
    color: #f4ead9 !important;
    opacity: 1 !important;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: background 220ms ease, border-color 220ms ease;
    transform: none !important;
    filter: none;
  }
  #lt26-nav-mobile .lt26-nav__mobile-link:hover,
  #lt26-nav-mobile .lt26-nav__mobile-link:focus-visible,
  #lt26-nav-mobile a:hover,
  #lt26-nav-mobile a:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(212, 160, 23, 0.4) !important;
    color: #ffffff !important;
    outline: none;
    transform: none !important;
  }
  #lt26-nav-mobile .lt26-nav__mobile-link.is-active,
  #lt26-nav-mobile .lt26-nav__mobile-link[aria-current="page"],
  #lt26-nav-mobile a.is-active,
  #lt26-nav-mobile a[aria-current="page"] {
    background: rgba(212, 160, 23, 0.15) !important;
    border-color: rgba(212, 160, 23, 0.5) !important;
    color: #f0c878 !important;
  }
  #lt26-nav-mobile .lt26-nav__mobile-link--cta,
  #lt26-nav-mobile a.lt26-nav__mobile-link--cta,
  .lt26-nav__mobile .lt26-nav__mobile-link--cta,
  .lt26-nav__mobile a.lt26-nav__mobile-link--cta {
    background: #d4a574 !important;
    background-color: #d4a574 !important;
    color: #0E1B26 !important;
    text-align: center;
    font-weight: 700 !important;
    margin-top: 8px;
    border-color: transparent !important;
    opacity: 1 !important;
  }
  #lt26-nav-mobile .lt26-nav__mobile-link--cta:hover,
  .lt26-nav__mobile .lt26-nav__mobile-link--cta:hover {
    background: #e0b687 !important;
    background-color: #e0b687 !important;
    color: #0E1B26 !important;
    opacity: 1 !important;
  }
  .lt26-nav__mobile-sep {
    border: 0;
    border-top: 1px solid rgba(212, 160, 23, 0.22);
    margin: 10px 4px;
  }
  .lt26-nav__mobile .lt26-logout,
  .lt26-nav__mobile a.lt26-logout {
    color: #f87171 !important;
  }

  /* Hamburger ouvert → croix nette (X). Spans en position absolute pour
     que rotate 45/-45 forme un X parfait au lieu d'un ">" décalé */
  .lt26-nav__hamburger {
    position: relative;
  }
  .lt26-nav__hamburger[aria-expanded="true"] span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    width: 22px;
    transform-origin: center;
  }
  .lt26-nav__hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .lt26-nav__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .lt26-nav__hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Overlay scrim quand le drawer est ouvert (via :has — Safari 15.4+).
     IMPORTANT : pas de backdrop-filter ici — sur certains navigateurs
     le pseudo-élément finit au-dessus du drawer (bug stacking :has) et
     applique le blur au texte du drawer. Le scrim opaque suffit. */
  .lt26-nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5050;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(5, 10, 26, 0.7);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lt26-nav__overlay.is-open {
    display: block;
  }

  body.lt26-nav-open,
  body:has(.lt26-nav__mobile.is-open) {
    overflow: hidden;
  }
  body.lt26-nav-open::before,
  body:has(.lt26-nav__mobile.is-open)::before {
    content: none;
    display: none;
  }

  /* Hamburger reste cliquable au-dessus du scrim → fait office de close */
  body.lt26-nav-open .lt26-nav__hamburger,
  body:has(.lt26-nav__mobile.is-open) .lt26-nav__hamburger {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 5070;
    background: rgba(5, 10, 26, 0.92);
    border-color: rgba(212, 160, 23, 0.4);
  }

  /* Note : le drawer est maintenant placé SIBLING de .lt26-nav dans
     header-universel.php, donc plus impacté par son backdrop-filter.
     Cette règle reste pour compatibilité si jamais le drawer revenait
     dans le DOM du nav (legacy). */
  body:has(.lt26-nav__mobile.is-open) .lt26-nav,
  body:has(.lt26-nav__mobile.is-open) .lt26-nav.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  /* Note : l'animation X (rotation des spans) est définie plus haut avec
     position:absolute + translate(-50%,-50%) pour former une croix nette */
}

/* ============================================================
 * 5) Resserrage à ≤ 480px (cible déclarée par l'utilisateur)
 *    Plancher : tout doit rester lisible jusqu'à 480px.
 * ============================================================ */
@media (max-width: 480px) {
  /* Padding latéral global plus serré sur les conteneurs courants */
  .lt26-section,
  .page-box,
  .page-container,
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Titres pages : éviter qu'ils dépassent / wrap en cascade */
  h1, .page-title, .lt26-section-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Drawer plein écran sur très petit phone */
  .lt26-nav__mobile {
    width: 100vw;
    border-left: 0;
    padding-top: 70px;
  }

  /* Header : on retire EXPLORER dès le mobile — accessible via drawer */
  .lt-gl-nav__explore {
    display: none !important;
  }

  /* CTA "Déposer" : déjà un + carré à 600px via header-footer-responsive,
     on s'assure que padding + min-width restent compacts */
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 8px 10px !important;
    min-width: 36px;
    font-size: 15.5px;
  }
  .lt-gl-nav__deposit span,
  .lt26-nav__cta span {
    display: none !important;
  }

  /* Actions header : gap réduit pour libérer l'espace */
  .lt26-nav__actions,
  .lt-gl-nav__actions {
    gap: 4px !important;
  }

  /* Boutons : padding latéral resserré pour laisser respirer le texte */
  .lt26-btn,
  .btn,
  .btn-primary,
  .btn-secondary {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14.5px;
  }

  /* Formulaires : labels et inputs prennent toute la largeur */
  form .form-group,
  form .lt26-form-group {
    width: 100%;
    max-width: 100%;
  }

  /* Inputs : padding tactile sans rogner le contenu */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    padding: 12px 14px;
    width: 100%;
    max-width: 100%;
  }

  /* Search header LT26 : icône + champ alignés */
  .lt26-nav__search,
  .lt-gl-nav__search {
    width: 100%;
  }

  /* Grilles génériques qui restent en 2-col par défaut → 1 col */
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="-grid"]:not(.lt26-piece) {
    grid-template-columns: 1fr !important;
  }

  /* Cards qui débordent : largeur max */
  .card, .lt26-card, .annonce-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Footer empilage des CTA */
  .lt26-footer__top {
    flex-direction: column;
    align-items: stretch !important;
  }
  .lt26-footer__top .lt26-btn {
    width: 100%;
  }
}

/* ============================================================
 * 5b) Cibles spécifiques — dropdowns, login, déposer une annonce
 * ============================================================ */
@media (max-width: 480px) {
  /* Dropdown utilisateur LT26 : on l'étale au lieu de coller à droite */
  .lt26-nav__dropdown {
    position: fixed;
    top: calc(var(--gl-nav-h, 64px) + 4px);
    left: 8px;
    right: 8px;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - var(--gl-nav-h, 64px) - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lt26-nav__dropdown .lt26-login-form button[type="submit"],
  .lt26-login-form .lt26-btn--full {
    width: 100%;
    min-height: 44px;
  }

  /* Login / register classiques : champs et CTA propres */
  .lt26-login-form input,
  .auth-form input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Déposer une annonce : photo zone (surchargé par .lt26-deposer dans deposer-annonce-polish.css) */
  .photo-manager__list {
    justify-content: center;
  }
  .photo-manager__item {
    width: calc(50% - 7px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Stepper / wizard : pas de débordement horizontal */
  .depot-stepper,
  .lt26-stepper {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* User menu container : que le dropdown ne sorte pas */
  .user-menu-container,
  .lt26-nav__user {
    position: static;
  }
}

/* ============================================================
 * 5c) Palier 380px — couvre iPhone SE/Mini (375px), petits Android
 *     À ce niveau on resserre encore typographies, paddings, gaps.
 * ============================================================ */
@media (max-width: 380px) {
  /* Conteneurs : padding latéral minimal */
  .lt26-section,
  .page-box,
  .page-container,
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Header LT26 inner : compression maxi */
  .lt-gl-nav__inner,
  .lt26-nav__inner {
    padding: 0 8px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .lt-gl-nav__brand,
  .lt26-nav__brand {
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .lt26-nav__logo,
  .lt-gl-nav__logo {
    display: block !important;
    height: 26px !important;
    width: auto !important;
    max-width: min(168px, 46vw) !important;
  }
  body.lt26-grain .lt-gl-nav__search.lt26-nav__search {
    display: none !important;
  }
  .lt26-nav__hamburger {
    width: 44px;
    height: 44px;
  }

  /* CTA "Déposer" → bouton carré "+" uniquement */
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 7px 9px !important;
    min-width: 36px;
    font-size: 16px;
  }
  .lt-gl-nav__deposit span,
  .lt26-nav__cta span {
    display: none;
  }

  /* Avatar utilisateur compact */
  .lt26-nav__user-avatar,
  .user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .lt26-nav__user-name,
  .user-name {
    display: none !important;
  }

  /* Titres pages : tailles décroissantes */
  h1, .page-title {
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }
  h2, .lt26-section-title {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  /* Boutons : padding latéral encore plus court */
  .lt26-btn,
  .btn,
  .btn-primary,
  .btn-secondary,
  button:not(.lt26-nav__hamburger):not(.lt26-nav__icon) {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }

  /* Inputs : padding compact mais font reste 16px (anti-zoom iOS) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    padding: 10px 12px;
  }

  /* Photo manager : items prennent 100% pour rester confortables */
  .photo-manager__item {
    width: 100%;
    max-width: 200px;
  }
  .lt26-deposer .photo-manager__item,
  .lt26-deposer .photo-manager__add {
    max-width: none;
  }

  /* Stepper : labels masqués, seuls les numéros visibles */
  .depot-stepper .step-label,
  .lt26-stepper .step-label {
    display: none;
  }

  /* Cards / annonces : marges internes resserrées */
  .card, .lt26-card, .annonce-card {
    padding: 12px !important;
  }

  /* Footer : padding fortement réduit */
  .lt26-footer {
    padding: 36px 12px 24px !important;
  }
  .lt26-footer__big {
    font-size: clamp(24px, 7.5vw, 32px) !important;
  }

  /* Tap target hamburger : 44×44 (règle ≥44px) ; padding réduit pour garder
     des barres visuellement compactes sans rogner la zone tactile. */
  .lt26-nav__hamburger {
    padding: 6px !important;
  }
}

/* ============================================================
 * 5d) Palier 360px — couvre Galaxy S20/21/22/23 et bas de gamme
 *     Plancher absolu : tout doit rester utilisable sans scroll-X.
 * ============================================================ */
@media (max-width: 360px) {
  /* Conteneurs : padding 8px (minimum lisible) */
  .lt26-section,
  .page-box,
  .page-container,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Header : brand encore plus court, paddings minimum */
  .lt-gl-nav__inner,
  .lt26-nav__inner {
    padding: 0 6px !important;
    gap: 3px !important;
  }
  .lt-gl-nav__brand,
  .lt26-nav__brand {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: 0;
    max-width: none !important;
    overflow: visible !important;
    order: 0;
    z-index: 2;
  }
  .lt26-nav__logo,
  .lt-gl-nav__logo {
    display: block !important;
    visibility: visible !important;
    height: 24px !important;
    width: auto !important;
    max-width: min(150px, 44vw) !important;
    object-fit: contain;
    object-position: left center;
  }

  /* Actions header : on retire les icônes secondaires (favoris/messages)
     accessibles depuis le drawer */
  .lt-gl-nav__inner .lt26-nav__icon,
  .lt26-nav__actions .lt26-nav__icon:not(.lt26-nav__hamburger) {
    display: none !important;
  }
  .lt-gl-nav__explore {
    display: none !important;
  }

  /* CTA "+" carré minimaliste */
  .lt-gl-nav__deposit,
  .lt26-nav__cta {
    padding: 6px 8px !important;
    min-width: 32px;
    font-size: 15px;
  }

  /* Hamburger : 44×44 (règle ≥44px tap target) ; padding minimal pour garder
     les barres compactes. box-sizing:border-box (cf. §2) → 44px hors-tout. */
  .lt26-nav__hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 6px !important;
  }
  .lt26-nav__hamburger span {
    width: 18px;
  }

  /* Avatar 26px */
  .lt26-nav__user-avatar,
  .user-avatar {
    width: 26px !important;
    height: 26px !important;
  }

  /* Drawer plein écran + padding plus compact */
  .lt26-nav__mobile {
    padding: 64px 14px 24px !important;
  }
  .lt26-nav__mobile-link {
    padding: 12px 14px !important;
    font-size: 14.5px !important;
  }

  /* Dropdown user : on colle aux 4 coins avec 4px de marge */
  .lt26-nav__dropdown {
    left: 4px !important;
    right: 4px !important;
    top: calc(var(--gl-nav-h, 60px) + 2px) !important;
  }

  /* Titres : encore plus contenus */
  h1, .page-title {
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.2;
  }
  h2, .lt26-section-title {
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }

  /* Boutons : taille tactile préservée (≥44px) mais padding minimal */
  .lt26-btn,
  .btn {
    padding: 10px !important;
    font-size: 13.5px !important;
  }

  /* Toolbar de filtres / chips : wrap obligatoire */
  .filters-bar,
  .chips-bar,
  [class*="-toolbar"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Grilles 1 col forcées partout (sauf cas spéciaux ; les grilles PRODUIT
     gardent leurs 2 colonnes fluides — .statues-grid-acheter (acheter),
     .series-grid (tracker) : grille canonique auto-fill) */
  [class*="grid"]:not(.lt26-piece):not(.lt26-hero__shelf-grid):not(.statues-grid-acheter):not(.series-grid):not(.favoris-grid) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Photo manager : full width sans max-width */
  .photo-manager__item {
    max-width: 100%;
  }
  .photo-manager__zone {
    padding: 12px !important;
  }

  /* Footer : compression maximale */
  .lt26-footer {
    padding: 28px 10px 20px !important;
  }
  .lt26-footer__big {
    font-size: clamp(20px, 7vw, 28px) !important;
  }
  .lt26-footer__legal-links {
    gap: 6px !important;
    font-size: 11px !important;
  }

  /* Tables : on rappelle l'overflow scroll au cas où */
  table {
    font-size: 12.5px;
  }
}

/* ============================================================
 * 6) Safety net global — patterns difficiles à prévoir
 *    Couvre textes longs, code blocks, embeds, sticky overflows…
 * ============================================================ */
@media (max-width: 768px) {
  /* Mots/URLs longs ne doivent jamais pousser la mise en page */
  p, li, dd, dt, blockquote, h1, h2, h3, h4, h5, h6,
  .lt26-card, .annonce-card, .forum-message, .conseil-card {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Liens nus (souvent dans messages forum / conseils) */
  a[href^="http"] {
    overflow-wrap: anywhere;
  }
  /* Blocs code / pre : scroll-x au lieu de pousser */
  pre, code, kbd, samp {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  pre {
    white-space: pre;
    word-wrap: normal;
  }
  /* Iframes (YouTube / Mondial Relay / Stripe etc.) */
  iframe {
    max-width: 100%;
    border: 0;
  }
  /* Avatars / vignettes utilisateurs qui peuvent imposer width fixe */
  .avatar, .user-avatar, .vendor-avatar, .vit-avatar {
    flex-shrink: 0;
  }
  /* Sticky elements (filtres acheter, header sub-nav) :
     éviter qu'ils créent un horizontal scroll dans leur container */
  .is-sticky, [class*="-sticky"] {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
 * 7) Pages spécifiques — overrides consolidés
 *    Ces règles complètent les polish/cinematic existants pour
 *    les cas non couverts à 480/380/360.
 * ============================================================ */
@media (max-width: 480px) {
  /* ── Accueil ──────────────────────────────────────────────── */
  /* Hero / KPI : empilement vertical + lisibilité */
  .accueil-hero,
  .lt-accueil-gl .gl-hero,
  .accueil-grand-line__hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center;
  }
  .accueil-kpi,
  .gl-kpi__grid,
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .accueil-kpi__item,
  .gl-kpi__item {
    padding: 14px !important;
  }
  /* Univers / licences : 2 col compact */
  .univers-grid,
  .licenses-grid,
  .lt-univers-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── Acheter / Listing ───────────────────────────────────── */
  .acheter-grid,
  .annonces-grid,
  .listing-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .annonce-card,
  .acheter-card {
    border-radius: 10px !important;
  }
  .annonce-card__title {
    font-size: 13px !important;
    line-height: 1.3;
  }
  .annonce-card__price {
    font-size: 14.5px !important;
  }
  /* Pagination : tap targets et wrap */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .pagination a, .pagination button, .pagination span {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px !important;
  }

  /* ── Annonce détail ──────────────────────────────────────── */
  .annonce-detail,
  .annonce-melaenvy {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .annonce-gallery__main img,
  .annonce-gallery__main picture {
    width: 100% !important;
    height: auto !important;
  }
  .annonce-actions,
  .annonce-detail-actions {
    flex-direction: column;
    gap: 8px;
  }
  .annonce-actions > *,
  .annonce-detail-actions > * {
    width: 100%;
  }
  /* Infos vendeur sidebar : prend toute la largeur */
  .annonce-vendor,
  .annonce-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Déposer une annonce ─────────────────────────────────── */
  .deposer-form,
  .form-depot,
  #form-depot-annonce {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .lt26-deposer .estimation-table {
    max-width: 100%;
    overflow-x: hidden;
  }
  .lt26-deposer .depot-autocomplete-wrap,
  .lt26-deposer .ville-input-wrap {
    max-width: 100%;
  }
  .depot-stepper,
  .lt26-stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }
  .depot-stepper > *,
  .lt26-stepper > * {
    flex-shrink: 0;
  }
  /* Photos : grille gérée par deposer-annonce-polish.css */
  .lt26-deposer .photo-manager__list {
    justify-content: stretch;
  }
  .lt26-deposer .photo-manager__item {
    width: 100% !important;
    max-width: 100%;
  }
  /* Boutons d'étape "Précédent / Suivant" empilés */
  .depot-actions,
  .form-actions {
    flex-direction: column;
    gap: 10px;
  }
  .depot-actions > *,
  .form-actions > * {
    width: 100%;
  }

  /* ── Communauté / Forum ──────────────────────────────────── */
  .communaute-grid,
  .communaute-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .forum-thread,
  .forum-message,
  .conseil-card {
    padding: 12px !important;
  }
  .forum-thread__title {
    font-size: 15px !important;
    line-height: 1.35;
  }
  /* Bandeau "Catégories" : scroll horizontal au lieu de wrap chaotique */
  .forum-categories,
  .categories-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .forum-categories > *,
  .categories-bar > * {
    flex-shrink: 0;
  }
  /* Composer (textarea + actions) */
  .composer-actions {
    flex-direction: column;
    gap: 8px;
  }

  /* ── Compte / Vitrine / Profil ───────────────────────────── */
  .compte-layout,
  .mon-espace-layout,
  .vitrine-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  /* Sidebar compte qui était à gauche → en haut, compacte */
  .compte-sidebar,
  .mon-espace-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .compte-sidebar nav,
  .mon-espace-sidebar nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 4px;
  }
  .compte-sidebar nav a,
  .mon-espace-sidebar nav a {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13.5px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Layout compte réel (compte-layout.php) */
  .vitrine-side {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
  }
  .vitrine-side__user {
    margin-bottom: 8px;
  }
  .vitrine-side__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .vitrine-side__item {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 13.5px;
  }
  .vitrine-side__cta {
    display: none;
  }

  /* Avatar profil : taille raisonnable */
  .profil-avatar,
  .vit-avatar--hero {
    width: 80px !important;
    height: 80px !important;
  }
  /* Stats utilisateur : 2 col */
  .profil-stats,
  .vit-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* ── Auth (login / register / mot de passe) ──────────────── */
  .auth-card,
  .login-card,
  .register-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 12px;
  }
  .auth-card h1,
  .login-card h1 {
    font-size: 22px !important;
    margin-bottom: 16px;
  }
  /* Bouton social (Google / Apple) plein largeur */
  .auth-social,
  .login-social {
    flex-direction: column;
    gap: 8px;
  }
  .auth-social > *,
  .login-social > * {
    width: 100%;
  }

  /* ── Légal / Statique (cgv, faq, comment-ca-marche, contact) */
  .legal-content,
  .docs-content,
  .static-page__body {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 15px;
    line-height: 1.6;
  }
  .legal-content h2,
  .docs-content h2 {
    font-size: 19px !important;
    margin-top: 24px !important;
  }
  /* Table of contents : sticky qui devient overflow scroll */
  .legal-toc,
  .docs-toc {
    position: static !important;
    width: 100% !important;
    overflow-x: auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding-bottom: 8px;
  }
  /* FAQ items */
  .lt26-faq__row,
  .faq-item {
    padding: 14px !important;
  }
  .lt26-faq__q,
  button.lt26-faq__q,
  .faq-question {
    font-size: 15px !important;
    line-height: 1.35;
  }
  /* Contact form : full width fields */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
  }

  /* ── Wallet / Commandes / Favoris / Messages ─────────────── */
  .wallet-card,
  .commande-card,
  .favori-card,
  .message-thread {
    padding: 12px !important;
  }
  .wallet-balance {
    font-size: 26px !important;
  }
  /* Liste messages : avatar + texte sans overflow */
  .message-list__item {
    gap: 10px !important;
  }
  .message-list__avatar {
    width: 40px !important;
    height: 40px !important;
  }
  .message-list__body {
    min-width: 0;
    overflow: hidden;
  }
  .message-list__preview {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* ============================================================
 * 8) prefers-reduced-motion : on coupe transitions
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lt26-nav__mobile,
  .lt26-nav__mobile-link,
  .lt26-nav__hamburger span,
  .lt26-nav__overlay {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
 * Safe area (encoches) — bottom-nav + drawer
 * ============================================================ */
@media (max-width: 768px) {
  .bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.has-bottom-nav main,
  body.has-bottom-nav .compte-layout,
  body.has-bottom-nav .lt26-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #lt26-nav-mobile,
  .lt26-nav__mobile.is-open {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
}

/* Grilles génériques marketplace / cartes */
@media (max-width: 480px) {
  .lt26-grid,
  .listings-grid,
  .acheter-grid,
  .marketplace-grid,
  [class*="listings"][class*="grid"],
  [class*="annonces"][class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 360px) {
  .lt26-grid,
  .listings-grid,
  .acheter-grid,
  .marketplace-grid {
    gap: 8px !important;
  }
}

/* Filtres acheter (≤1024px) : le comportement est désormais une BOTTOM SHEET
   (source : bundle-acheter.css, peau GL : acheter-grand-line.css).
   L'ancien drawer latéral (position fixed top/left, z-index 5040) est retiré —
   on ne garde que la largeur fluide. */
@media (max-width: 1024px) {
  body.lt-acheter-gl .filters-section-acheter,
  .filters-section-acheter {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}