/*
==========================================================
  BEENOCLE — Mobile CSS
  Breakpoint : 768px max
  Stratégie  : ajouts uniquement, jamais de modification
               des CSS desktop existants.

  Sections :
  1. GLOBAL
  2. APP PAGES — sidebar → bottom nav
  3. LANDING (index.html)
  4. LOGIN / SIGNUP / AUTH
  5. RAPPORTS
  6. SECTEURS
  7. POSTS LINKEDIN
  8. EMAILS
  9. SETTINGS
  10. GÉNÉRATEUR
  11. DASHBOARD
  12. SUPPORT / LÉGAL
==========================================================
*/

@media (max-width: 768px) {

/* ══════════════════════════════════════════
   1. GLOBAL
══════════════════════════════════════════ */

  * { -webkit-tap-highlight-color: transparent; }

  :root {
    --sidebar-w: 0px; /* neutralise le margin-left des pages app */
  }

  /* Scrollbar discrète sur mobile */
  ::-webkit-scrollbar { width: 3px; height: 3px; }


/* ══════════════════════════════════════════
   2. APP PAGES — SIDEBAR → BOTTOM NAV
══════════════════════════════════════════ */

  /* Sidebar devient une barre horizontale fixée en bas */
  .sidebar {
    width: 100% !important;
    height: 60px !important;
    min-height: unset !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 0.25rem !important;
    border-top: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    z-index: 200 !important;
  }

  /* Logo caché — pas de place */
  .sidebar-logo { display: none !important; }

  /* Section labels cachés */
  .nav-section-label { display: none !important; }

  /* Footer caché (user card + logout) */
  .sidebar-footer { display: none !important; }

  /* Nav devient horizontale, scrollable */
  .sidebar-nav {
    flex-direction: row !important;
    gap: 0 !important;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: center;
    justify-content: space-around;
    padding: 0 !important;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }

  /* Nav items : icônes uniquement */
  .sidebar-nav .nav-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 10px !important;
    font-size: 0 !important;       /* masque le texte */
    min-width: 52px;
    flex-shrink: 0;
  }

  /* Reset pour les éléments enfants non-texte */
  .sidebar-nav .nav-item svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
  .sidebar-nav .nav-item .lock-badge {
    font-size: 0.5rem !important;
    padding: 0.08rem 0.3rem !important;
  }
  .sidebar-nav .nav-item .nav-setup-dot {
    width: 6px !important;
    height: 6px !important;
    margin-left: 0 !important;
    position: absolute;
    top: 4px;
    right: 6px;
  }

  /* Item actif visible */
  .sidebar-nav .nav-item.active {
    background: rgba(255,154,0,.15) !important;
  }
  .sidebar-nav .nav-item.active::before {
    display: none !important; /* pas de barre gauche sur mobile */
  }

  /* Main : supprime le décalage sidebar */
  .main {
    margin-left: 0 !important;
    padding: 1.25rem 1rem 80px 1rem !important; /* 80px pour le bottom nav */
  }


/* ══════════════════════════════════════════
   3. LANDING — index.html
══════════════════════════════════════════ */

  /* Nav mobile : cache les liens desktop */
  #nav { padding: 1rem 1.25rem !important; }
  #nav .nav-links { display: none !important; }
  #nav .btn-nav { padding: 0.6rem 1.1rem !important; font-size: 0.82rem !important; }

  /* Conteneur global */
  .container { padding: 0 1.25rem !important; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
    padding-top: 5rem !important;
  }
  .hero-left {
    padding: 2.5rem 1.25rem 1.5rem !important;
  }
  .hero-right { display: none !important; }
  .hero-title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
    line-height: 1.12 !important;
  }
  .hero-sub {
    font-size: 0.92rem !important;
    margin-bottom: 1.75rem !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-badges { gap: 1rem !important; }

  /* Section heads */
  .section-head { margin-bottom: 2.5rem !important; }
  .section-head h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* Grilles → colonne unique */
  .pain-grid,
  .testi-grid,
  .pv6-features,
  .pv6-packs-row,
  .how-steps { grid-template-columns: 1fr !important; }

  /* Showcase : stack nav + screen */
  .showcase-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .showcase-nav {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem;
  }
  .showcase-nav::-webkit-scrollbar { display: none; }
  .showcase-nav-item { min-width: max-content; padding: 0.75rem 1rem !important; }
  .showcase-screen { border-radius: 14px !important; }

  /* Tableau comparatif */
  .compare-table { overflow-x: auto !important; }
  .ct-head, .ct-row { min-width: 480px !important; }

  /* Bento grid */
  .bc.c7,.bc.c5,.bc.c4,.bc.c8,.bc.c6 { grid-column: span 12 !important; }

  /* Accès anticipé — collapse 2 testi-cards inline-grid */
  section[aria-label="Accès anticipé"] > .container > div {
    grid-template-columns: 1fr !important;
  }

  /* Showcase : panels internes → 1 colonne */
  .panel-linkedin,
  .panel-veille,
  .panel-emails { grid-template-columns: 1fr !important; }
  .sources-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Steps "Comment ça marche" */
  .step-row {
    grid-template-columns: 48px 1fr !important;
    gap: 0 1.25rem !important;
    padding: 1.5rem 0 !important;
  }
  .step-num { font-size: 2.5rem !important; }

  /* Pricing — centrer quand empilé en 1 colonne */
  .pv6-layout { text-align: center !important; }
  .pv6-price-num { font-size: clamp(4rem, 16vw, 5.5rem) !important; }
  .pv6-guarantee { justify-content: center !important; }
  .pv6-badges { justify-content: center !important; }

  /* Pricing card */
  .pv6-card { padding: 1.75rem 1.25rem !important; }

  /* Sections : réduire le padding vertical */
  .s-dark, .s-cream, .s-dark2 { padding: 4rem 0 !important; }

  /* Footer */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .footer-geo { text-align: left !important; }


/* ══════════════════════════════════════════
   4. LOGIN / SIGNUP / AUTH
══════════════════════════════════════════ */

  .login-wrap,
  .auth-wrap,
  .signup-wrap { padding: 1rem !important; }

  .login-card,
  .auth-card,
  .signup-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
  }


/* ══════════════════════════════════════════
   5. RAPPORTS
══════════════════════════════════════════ */

  /* Header empilé */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .page-header h1 { font-size: 1.4rem !important; }

  /* Filtres scrollables */
  .sector-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .sector-filters::-webkit-scrollbar { display: none; }
  .sector-pill { flex-shrink: 0 !important; }

  /* Article rows : moins de padding */
  .article-row { padding: 1rem 1rem !important; }
  .briefing-meta { padding: 0.75rem 1rem !important; }
  .article-body { padding-left: 0 !important; }
  .article-num { display: none !important; } /* numéro caché sur mobile */
  .article-header { gap: 0.5rem !important; }
  .article-right { flex-direction: row !important; align-items: center !important; }

  /* Actions génération */
  .article-actions { gap: 0.4rem !important; }
  .btn-gen { font-size: 0.72rem !important; padding: 0.38rem 0.7rem !important; }

  /* Modal génération → bottom sheet */
  .gen-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .gen-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    transform: translateY(100%) !important;
  }
  .gen-modal-overlay.open .gen-modal { transform: translateY(0) !important; }

  /* Widget crédits */
  .credit-chip { font-size: 0.72rem !important; padding: 0.38rem 0.7rem !important; }


/* ══════════════════════════════════════════
   6. SECTEURS
══════════════════════════════════════════ */

  /* Cards secteurs pleine largeur */
  .sectors-grid,
  .sectors-list { grid-template-columns: 1fr !important; }

  .sector-card { padding: 1.25rem !important; }


/* ══════════════════════════════════════════
   7. POSTS LINKEDIN
══════════════════════════════════════════ */

  .posts-grid,
  .posts-list { grid-template-columns: 1fr !important; }

  .post-card { padding: 1.25rem !important; }

  /* Modal post → bottom sheet */
  .post-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .post-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }


/* ══════════════════════════════════════════
   8. EMAILS
══════════════════════════════════════════ */

  .emails-grid,
  .emails-list { grid-template-columns: 1fr !important; }

  .email-card { padding: 1.25rem !important; }

  .email-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .email-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }


/* ══════════════════════════════════════════
   9. SETTINGS
══════════════════════════════════════════ */

  /* Subnav horizontal scrollable */
  .settings-subnav,
  .subnav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .settings-subnav::-webkit-scrollbar,
  .subnav::-webkit-scrollbar { display: none; }
  .subnav-item { flex-shrink: 0 !important; }

  /* Sections settings pleine largeur */
  .settings-section { padding: 1.25rem !important; }
  .settings-grid { grid-template-columns: 1fr !important; }

  /* Textarea échantillons style */
  .style-samples { grid-template-columns: 1fr !important; }


/* ══════════════════════════════════════════
   10. GÉNÉRATEUR
══════════════════════════════════════════ */

  .generator-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .generator-sidebar { position: static !important; }


/* ══════════════════════════════════════════
   11. DASHBOARD
══════════════════════════════════════════ */

  /* KPI grid : 2 colonnes sur mobile */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .kpi-card { padding: 1rem !important; }
  .kpi-value { font-size: 1.6rem !important; }

  /* Dashboard grid → colonne unique */
  .dashboard-grid,
  .content-grid { grid-template-columns: 1fr !important; }

  /* Bannière onboarding */
  .onboarding-banner {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .onboarding-steps {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Widget crédit compact */
  .credit-drop { min-width: unset !important; width: calc(100vw - 2rem) !important; }


/* ══════════════════════════════════════════
   12. CONTACT
══════════════════════════════════════════ */

  /* Container contact : annuler le margin-left:0 desktop */
  #contact .container {
    margin-left: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    max-width: 100% !important;
  }

  /* Card blanche : réduire le padding */
  .contact-card { padding: 1.5rem 1.25rem !important; }

  /* Chips : 1 colonne sur petit mobile, 2 restent si assez large */
  .qz-chips { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  .qz-chips.cols-3 { grid-template-columns: 1fr 1fr !important; }

  /* Chip text : légèrement plus petit */
  .qz-chip { font-size: .78rem !important; padding: .6rem .5rem !important; }

  /* SVG abeille décoratif : caché sur mobile */
  #contact > svg { display: none !important; }


/* ══════════════════════════════════════════
   13. SUPPORT / LÉGAL / MENTIONS
══════════════════════════════════════════ */

  .support-layout,
  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  .legal-content { padding: 1.5rem 1.25rem !important; }

} /* end @media (max-width: 768px) */