/* ============================================================
   WARAP V11 — Audit Mobile Fixes (avril 2026)
   Corrections issues du rapport d'audit Microlink + analyse statique.
   12 problèmes identifiés (2 critical + 3 high + 4 med + 3 low)
   ============================================================ */

/* ============================================================
   FIX #1 (CRITICAL) — Stats Academy responsive sur 320px
   "0+ Formateurs" coupé en "Form..." sur 320-360px
   ============================================================ */
@media (max-width: 380px) {
  .academy-hero-stats {
    gap: .5rem !important;
  }
  .academy-hero-stat {
    min-width: 0;
    padding: .5rem .25rem !important;
  }
  .academy-hero-stat strong {
    font-size: 1.125rem !important;
    word-break: keep-all;
  }
  .academy-hero-stat span {
    font-size: .65rem !important;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}
@media (max-width: 359px) {
  .academy-hero-stat span {
    font-size: .6rem !important;
    /* Permet aux labels longs ("Formateurs") d'être abrégés via JS data-attr */
  }
  .academy-hero-stat strong {
    font-size: 1rem !important;
  }
}

/* ============================================================
   FIX #2 (CRITICAL) — Banner promo Boutique stack vertical
   "75 000 FCFA" déborde sur 320-375px, prend 4 lignes sur 375px
   ============================================================ */
.promo-banner,
[class*="bundle-promo"],
.boutique-promo-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .5rem 1rem;
  font-size: .875rem;
}
@media (max-width: 480px) {
  .promo-banner,
  [class*="bundle-promo"],
  .boutique-promo-bar {
    flex-direction: column !important;
    text-align: center;
    padding: .75rem !important;
    font-size: .8125rem !important;
    gap: .5rem;
  }
  .promo-banner .promo-cta,
  .promo-banner a,
  .promo-banner button,
  [class*="bundle-promo"] a,
  [class*="bundle-promo"] button,
  .boutique-promo-bar a,
  .boutique-promo-bar button {
    margin-top: .25rem;
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================================
   FIX #3 (HIGH) — Header trop chargé, "Sign in" coupé
   Cibles : .logo-badge (Cameroun), #headerLoginBtn (Se connecter)
   ============================================================ */
@media (max-width: 380px) {
  /* Masquer le badge "Cameroun" (info redondante avec le contexte) */
  .header .logo-badge {
    display: none !important;
  }
  /* Masquer le texte "Se connecter" (garder l'icône) */
  .header #headerLoginBtn span,
  .header #headerLoginBtn [data-i18n="nav.login"] {
    display: none !important;
  }
  /* Garder l'icône, padding réduit */
  .header #headerLoginBtn {
    padding: .375rem .5rem !important;
    min-width: 36px;
  }
  /* Réduire la taille du logo texte */
  .header .logo > span:not(.logo-badge) {
    font-size: 1rem !important;
  }
  .header .logo img {
    width: 32px !important;
    height: 32px !important;
  }
  .header .container {
    padding: 0 .5rem !important;
  }
  /* Theme toggle plus compact */
  .header #themeToggle {
    padding: .375rem !important;
  }
}
@media (max-width: 320px) {
  /* Masquer Sign in entièrement (déjà accessible via bottom nav) */
  .header #headerLoginBtn {
    display: none !important;
  }
  .header .btn-gold span {
    display: none !important; /* Vendre = juste icône + */
  }
  .header .btn-gold {
    padding: .375rem .5rem !important;
  }
}

/* ============================================================
   FIX #4 (HIGH) — FABs mobiles empilés verticalement
   3 FABs (WhatsApp, Localisation "Près de moi", Panier)
   alignés à droite sans superposition.
   Système de variables CSS partagées.
   ============================================================ */
:root {
  --warap-bottom-nav-h: 64px;
  --fab-size: 48px;
  --fab-gap: 12px;
  --fab-base-bottom: calc(var(--warap-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  --fab-step: calc(var(--fab-size) + var(--fab-gap));
  --z-fab: 60; /* sous bottom-nav (1100) et mobile-sticky-bar (1200) */
}

/* Mobile : stack vertical des 3 FABs */
@media (max-width: 768px) {
  /* IMPORTANT : #wcFloatBtn est rendu par warap-cart-system.min.js avec ses
     propres regles inline injectees (bottom:160px). Le selecteur ID + !important
     suffit a les surcharger (specificity 0,1,0,0 + !important). */
  .wa-float,
  .warap-wa-float,
  [class*="whatsapp-float"],
  #waFloatBtn,
  #nearMeBtn,
  .cart-float-btn,
  #wcFloatBtn {
    position: fixed !important;
    right: 16px !important;
    width: var(--fab-size) !important;
    height: var(--fab-size) !important;
    z-index: var(--z-fab) !important;
  }
  /* Ordre vertical (bas → haut) : WhatsApp / Localisation / Panier */
  .wa-float,
  .warap-wa-float,
  [class*="whatsapp-float"],
  #waFloatBtn        { bottom: var(--fab-base-bottom) !important; }
  #nearMeBtn         { bottom: calc(var(--fab-base-bottom) + var(--fab-step)) !important; }
  .cart-float-btn,
  #wcFloatBtn        { bottom: calc(var(--fab-base-bottom) + 2 * var(--fab-step)) !important; }

  .wa-float svg,
  .warap-wa-float svg,
  #nearMeBtn svg,
  .cart-float-btn svg,
  #wcFloatBtn svg    { width: 22px !important; height: 22px !important; }

  /* Sur la page détail annonce, mobile-sticky-bar est prioritaire :
     masquer panier + localisation pour éviter les CTA redondants */
  body.page-listing .cart-float-btn,
  body.page-listing #wcFloatBtn,
  body.page-listing #nearMeBtn { display: none !important; }
}

/* Tablet+ : taille normale, position desktop classique */
@media (min-width: 769px) {
  .wa-float,
  .warap-wa-float,
  #waFloatBtn {
    bottom: 24px !important;
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 100 !important;
  }
  .wa-float svg,
  .warap-wa-float svg {
    width: 28px !important;
    height: 28px !important;
  }
  /* Bouton "Près de moi" en desktop : empilé au-dessus du WhatsApp */
  #nearMeBtn {
    position: fixed !important;
    bottom: 96px !important;
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 100 !important;
  }
  /* Bouton panier en desktop : empilé au-dessus de "Près de moi" */
  #wcFloatBtn,
  .cart-float-btn {
    position: fixed !important;
    bottom: 168px !important;  /* WhatsApp 24 + 56 + 16 + 56 + 16 = 168 */
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 100 !important;
  }
}

/* ============================================================
   FIX #5 (MEDIUM) — Body padding-bottom pour bottom nav
   Évite que la bottom nav masque le bas de la page
   ============================================================ */
@media (max-width: 1023px) {
  body {
    padding-bottom: 72px;
  }
  /* Sauf sur les pages avec sticky bar custom (listing) */
  body.has-sticky-bar {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   FIX #6 (MEDIUM) — Search input placeholder responsive
   Marketplace : "Rechercher un produit, service, formatio" tronqué
   ============================================================ */
@media (max-width: 480px) {
  /* Effet visuel de fade pour les placeholders longs */
  input.search-input,
  input[type="search"] {
    font-size: .875rem;
  }
}

/* ============================================================
   FIX #7 (MED) — Bottom nav z-index supérieur au WA float
   ============================================================ */
.bottom-nav,
.warap-bottom-nav,
#bottomNav {
  z-index: 99 !important;
}

/* ============================================================
   FIX #8 (LOW) — Skeleton loaders timeout fallback
   Si JS échoue, afficher message après 5s (géré JS-side)
   ============================================================ */
.skeleton-loader.is-stuck::after {
  content: "Pas de connexion ? Réessayez.";
  display: block;
  text-align: center;
  color: #64748b;
  padding: 1rem;
  font-size: .875rem;
}

/* ============================================================
   FIX #9 — Touch targets accessibilité min 44px
   Tous les boutons et liens cliquables sur mobile
   ============================================================ */
@media (max-width: 768px) {
  .btn-sm,
  button.btn-sm,
  a.btn-sm {
    min-height: 40px;
  }
  /* Liens de navigation tactiles */
  .nav-link,
  .menu-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   FIX #10 — Évite débordements horizontaux globaux
   ============================================================ */
@media (max-width: 480px) {
  body, html {
    overflow-x: hidden;
  }
  .container {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Long words / URLs / numbers wrap */
  .listing-title,
  .course-title,
  .article-title,
  h1, h2, h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   FIX #11 — Tableaux responsive avec scroll horizontal
   ============================================================ */
@media (max-width: 768px) {
  table.responsive-table,
  .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
}

/* ============================================================
   FIX #12 — Améliorer la lisibilité formulaires mobile
   Évite le zoom auto iOS sur input focus (font-size >= 16px)
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* Empêche le zoom iOS lors du focus */
  }
}

/* ============================================================
   FIX #13 (USER REQUEST) — Masquer purchase-box mobile entierement
   La sticky bar bottom (Prix + WhatsApp + Acheter) suffit en mobile.
   Libere toute la zone superieure pour photos/description/avis/vendeur.
   ============================================================ */
@media (max-width: 768px) {
  .purchase-box {
    display: none !important;
  }
  /* Ajuster padding-bottom du body car purchase box masquee */
  body.has-sticky-bar,
  .listing-page {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  /* Bouton Booster (vendeur) : visible separement en bas de page si necessaire */
  /* Pour l'instant masque mobile (l'admin verra dans son dashboard) */
}

/* ============================================================
   FIX #14 — ARIA landmarks pour accessibilite
   Force le role implicite sur les balises HTML5 mal supportees
   ============================================================ */
header[role="banner"],
.header[role="banner"] { /* deja banner */ }
nav[aria-label] { /* deja navigation */ }
main { display: block; }

/* ============================================================
   FIX #15 (USER REQUEST mai 2026) — Annonces mobile 1 colonne Amazon-like
   Objectif : 1 annonce par ligne en format horizontal (image 130px gauche
   + infos compactes droite), maximum de choix visible (5-6 cartes par ecran).
   Override prioritaire sur warap.min.css (.products-grid repeat 2 -> 1fr).
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Force 1 colonne pleine largeur (etait : repeat(2, 1fr)) */
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  /* 2. Carte en layout horizontal grid : image fixe gauche + body fluide droite */
  .listing-card {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    align-items: stretch !important;
    min-height: 130px !important;
    border-radius: 12px !important;
  }

  /* 3. Image carree 1:1 (au lieu du 4/3 en haut) */
  .listing-card .listing-card-image {
    aspect-ratio: 1/1 !important;
    height: 100% !important;
    width: 130px !important;
  }

  /* 4. Body compact a droite */
  .listing-card .listing-card-body {
    padding: .625rem .75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .25rem !important;
    min-width: 0 !important; /* eviter overflow texte */
  }

  /* 5. Reduire les tailles de texte pour densite */
  .listing-card .listing-card-category {
    font-size: .65rem !important;
    margin-bottom: 0 !important;
  }
  .listing-card .listing-card-title {
    font-size: .875rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 0 !important;
  }
  .listing-card .listing-card-location {
    font-size: .7rem !important;
    margin-bottom: 0 !important;
    margin-top: auto !important; /* pousser localisation et footer en bas */
  }
  .listing-card .listing-card-price {
    font-size: 1rem !important;
    font-weight: 800 !important;
  }
  .listing-card .listing-card-footer {
    padding-top: .25rem !important;
    border-top: none !important;
  }

  /* 6. Actions (favori, partage WA) toujours visibles, repositionnees */
  .listing-card .listing-card-actions {
    opacity: 1 !important;
    transform: none !important;
    top: 6px !important;
    right: 6px !important;
    gap: .25rem !important;
  }
  .listing-card .listing-action-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .listing-card .listing-action-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* 7. Badges (categorie, boost, OFFRE/RECHERCHE) plus petits */
  .listing-card .listing-card-badge {
    top: 6px !important;
    left: 6px !important;
    padding: 2px 6px !important;
    font-size: .6rem !important;
  }
  .listing-card .listing-card-boost-badge,
  .listing-card .listing-card-type-badge {
    top: 6px !important;
    right: 38px !important; /* a gauche des action buttons */
    padding: 2px 6px !important;
    font-size: .55rem !important;
  }

  /* 8. Desactiver hover transform (mobile = touch) */
  .listing-card:hover {
    transform: none !important;
  }
  .listing-card:hover .listing-card-image img {
    transform: none !important;
  }

  /* 9. Nouveau : prix barre + economie % (Amazon-style) */
  .listing-card-price-old {
    font-size: .75rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: .375rem;
    font-weight: 500;
  }
  .listing-card-discount {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: .25rem;
    vertical-align: middle;
  }

  /* 10. Nouveau : badge negociable / gratuit / sur demande */
  .listing-card-price-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .6rem;
    font-weight: 700;
    margin-left: .25rem;
    vertical-align: middle;
  }
  .listing-card-price-tag.is-negotiable { background: #fef3c7; color: #92400e; }
  .listing-card-price-tag.is-free       { background: #dcfce7; color: #166534; }
  .listing-card-price-tag.is-contact    { background: #e0e7ff; color: #4338ca; }

  /* 11. Masquer le toggle grid/list (vue liste forcee en mobile) */
  .sort-bar > div > div:last-child {
    display: none !important;
  }
}

/* Plus petit ecran (<= 380px) : reduire image a 110px */
@media (max-width: 380px) {
  .listing-card {
    grid-template-columns: 110px 1fr !important;
    min-height: 110px !important;
  }
  .listing-card .listing-card-image {
    width: 110px !important;
  }
  .listing-card .listing-card-title {
    font-size: .8125rem !important;
  }
  .listing-card .listing-card-price {
    font-size: .9375rem !important;
  }
}

/* ============================================================
   FIX #16 (USER REPORT mai 2026) — Scroll mobile bloqué
   Symptôme : 4 pages (accueil/recherche/vendre/favoris) impossibles à
   scroller au doigt, scrollbar visible à droite mais touch ne déclenche
   pas. La page Compte (dashboard.html) fonctionne car son layout flex
   garde body en scroll natif sans aucune contrainte de hauteur fixe.
   Ce bloc force ce comportement sur TOUTES les pages mobile.
   ============================================================ */
@media (max-width: 1024px) {
  /* 1. html + body en scroll natif, jamais forcés en hauteur ni fixés */
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    position: static !important;
  }
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    position: static !important;
  }
  /* 2. Tous les wrappers de page : laisser leur contenu débordant scroller
        avec le body. JAMAIS de hauteur fixe ni overflow hidden héritée. */
  body > main,
  body > section,
  body > .container,
  body > #app,
  body > .page-wrapper,
  body > .layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  /* 3. Overlays et sidebars invisibles : ne PAS capturer les touchs tant
        que .active n'est pas posée. Sans ça, l'élément couvre l'écran (ou
        son bord) en position:fixed et bloque le scroll touch même quand
        display:none n'est pas appliqué. CAUSE PRINCIPALE du bug scroll
        mobile : aside#mobileSidebar reste pointer-events:auto hors écran. */
  .sidebar-overlay:not(.active):not(.open),
  #sidebarOverlay:not(.active),
  .sidebar:not(.active):not(.open),
  #mobileSidebar:not(.active):not(.open),
  aside.sidebar:not(.active):not(.open),
  .auth-modal:not(.active),
  #authModal:not(.active),
  .lightbox:not(.active),
  #nearMeOverlay:not([style*="flex"]),
  .modal-overlay:not(.active):not(.show) {
    pointer-events: none !important;
    visibility: hidden !important;
  }
  /* 4. Classe explicite pour bloquer volontairement le scroll (modaux) */
  body.no-scroll {
    overflow: hidden !important;
    touch-action: none !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ============================================================
   FIX #17 (USER REPORT mai 2026) — Icône loupe mobile dans header
   Permet d'accéder rapidement à /marketplace.html (recherche) depuis
   n'importe quelle page sans ouvrir le bottom-nav.
   ============================================================ */
.mobile-search-icon {
  display: none;
}
@media (max-width: 768px) {
  .mobile-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(14,165,233,.1);
    color: #0ea5e9;
    text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .mobile-search-icon:active {
    transform: scale(.92);
    background: rgba(14,165,233,.2);
  }
  .mobile-search-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   FIX #18 (USER REPORT mai 2026) — Wizard "Publier une annonce" bloque mobile
   Symptome : sur smartphone, apres avoir choisi la categorie (etape 1), impossible
   de passer a l'etape suivante.
   Cause racine : le bouton "Suivant" est en bas a droite du formulaire. Sur mobile,
   il etait recouvert par des elements flottants fixes qui rechargent /post-listing.html :
     - le FAB "+" (.warap-fab, z-index 1090, bas-droite) -> desactive via <body data-no-fab>
     - l'onglet "Vendre" du bottom-nav (bas, z-index 1100)
   Un tap sur "Suivant" tombait sur le FAB/nav -> rechargement -> retour etape 1 (boucle).
   Correctif : on transforme la barre d'actions du wizard en barre CTA sticky TOUJOURS
   visible, calee juste AU-DESSUS du bottom-nav (jamais recouverte), et on masque les
   FABs secondaires (WhatsApp/panier/localisation) pendant la saisie pour eviter les
   mis-taps sur le bord droit du bouton.
   ============================================================ */
@media (max-width: 768px) {
  /* Barre CTA fixe, calee JUSTE au-dessus du bottom-nav. position:fixed (et non
     sticky) car les regles overflow mobile (FIX #16) cassent le contexte sticky.
     Le wizard n'a qu'un seul panneau visible a la fois (les autres display:none),
     donc une seule barre s'affiche. */
  body.page-post-listing .post-listing-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--warap-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    z-index: 1101;               /* au-dessus du bottom-nav (1100) : la barre gagne tout chevauchement */
    margin: 0;
    padding: 10px 16px;
    gap: 12px;
    background: var(--surface-card, #fff);
    border-top: 1px solid var(--border-light, #e2e8f0);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, .08);
  }
  /* Cible tactile confortable (>= 48px) sur Retour / Suivant / Publier */
  body.page-post-listing .post-listing-actions .btn {
    min-height: 48px;
  }
  /* De l'air sous le contenu : la barre fixe + le nav ne doivent masquer aucun champ */
  body.page-post-listing .post-listing-form {
    padding-bottom: calc(var(--warap-bottom-nav-h, 64px) + 104px);
  }
  /* Masquer le FAB "+" ET les FABs secondaires pendant la publication.
     NB : le FAB "+" est aussi desactive via <body data-no-fab="1"> mais on le
     masque ici en plus, car l'opt-out JS echoue si l'attribut est vide et le
     HTML en cache pourrait ne pas l'avoir. display:none => plus aucun tap dessus. */
  body.page-post-listing .warap-fab,
  body.page-post-listing #warapFab,
  body.page-post-listing .wa-float,
  body.page-post-listing .warap-wa-float,
  body.page-post-listing #waFloatBtn,
  body.page-post-listing #nearMeBtn,
  body.page-post-listing .cart-float-btn,
  body.page-post-listing #wcFloatBtn {
    display: none !important;
  }
}