/* =========================================================================
   PIXELGEN AI — Mobile UI Enhancement v13
   Ultra-professional mobile-first design layer
   Auteur : design system v13
   ========================================================================= */

/* ── Fonts & base overrides ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Syne:wght@600;700;800&display=swap');

@media (max-width: 768px) {

  /* ── Variables mobiles ──────────────────────────────────────────────── */
  :root {
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Syne', 'DM Sans', sans-serif;
    --mob-nav-h: 68px;
    --mob-topbar-h: 56px;
    --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mob-safe-top: env(safe-area-inset-top, 0px);

    /* Palette rehaussée mobile */
    --primary:        #6d28d9;
    --primary-light:  #a78bfa;
    --accent:         #f472b6;
    --success:        #059669;
    --bg:             #08080e;
    --bg-soft:        #0f0f18;
    --surface:        #18182a;
    --surface-2:      #20203a;
    --border:         rgba(255,255,255,0.07);
    --border-strong:  rgba(255,255,255,0.14);
    --text:           #f0f0ff;
    --text-muted:     #8888bb;
    --text-faint:     #55557a;

    --shadow-mob: 0 -2px 24px rgba(0,0,0,0.45);
    --radius-mob: 16px;
    --radius-mob-sm: 10px;
  }

  body {
    font-family: var(--font);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
  }

  /* ── Auth pages — mobile makeover ──────────────────────────────────── */
  .auth-wrap {
    grid-template-columns: 1fr !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-side { display: none !important; }

  .auth-main {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  /* Fond animé élégant */
  .auth-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(109,40,217,.55), transparent),
      radial-gradient(ellipse 60% 40% at 100% 60%, rgba(244,114,182,.18), transparent),
      radial-gradient(ellipse 50% 50% at 0% 80%, rgba(59,130,246,.12), transparent);
    pointer-events: none;
    z-index: 0;
  }

  .auth-main::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220'%3E%3Ccircle cx='60' cy='60' r='4' fill='rgba(167,139,250,0.3)'/%3E%3Ccircle cx='340' cy='40' r='3' fill='rgba(244,114,182,0.25)'/%3E%3Ccircle cx='200' cy='100' r='2.5' fill='rgba(167,139,250,0.2)'/%3E%3Ccircle cx='120' cy='150' r='2' fill='rgba(244,114,182,0.15)'/%3E%3Ccircle cx='300' cy='130' r='3.5' fill='rgba(167,139,250,0.18)'/%3E%3C/svg%3E") center top / cover no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  .auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100% !important;
    background: var(--bg-soft);
    border-radius: 28px 28px 0 0;
    padding: 2rem 1.5rem calc(2rem + var(--mob-safe-bottom));
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  }

  /* Handle bar décoratif */
  .auth-card::before {
    content: '';
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--border-strong);
    border-radius: 999px;
  }

  .auth-card .logo {
    justify-content: flex-start !important;
    margin-bottom: 1.75rem;
    margin-top: 0.5rem;
  }

  .auth-title {
    font-family: var(--font-display);
    font-size: 1.85rem !important;
    text-align: left !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--text) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .auth-subtitle {
    text-align: left !important;
    font-size: .95rem;
    margin-bottom: 1.75rem !important;
    color: var(--text-muted);
  }

  /* Champs de formulaire mobile */
  .form-control {
    height: 52px;
    border-radius: var(--radius-mob-sm);
    font-size: 1rem;
    border-color: var(--border-strong);
    background: var(--surface);
    padding: 0 1rem;
    transition: border-color .2s, box-shadow .2s;
  }

  .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(109,40,217,.18);
    outline: none;
  }

  .form-label {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: .45rem;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .form-group { margin-bottom: 1.1rem; }

  /* Bouton principal mobile — pleine largeur, plus grand */
  .btn-primary.btn-block, .btn-primary.btn-lg {
    height: 54px;
    border-radius: var(--radius-mob);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 4px 24px rgba(109,40,217,.45);
    transition: transform .12s, box-shadow .12s;
  }

  .btn-primary:active {
    transform: scale(0.975);
    box-shadow: 0 2px 12px rgba(109,40,217,.3);
  }

  /* Bouton Google */
  .btn-google {
    height: 52px !important;
    border-radius: var(--radius-mob-sm) !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-size: .95rem;
  }

  .auth-divider {
    font-size: .8rem;
    color: var(--text-faint);
    margin: 1rem 0;
  }

  .auth-foot {
    font-size: .88rem;
    margin-top: 1.25rem;
    text-align: center;
    color: var(--text-muted);
  }

  /* Alerte */
  .alert {
    border-radius: var(--radius-mob-sm);
    padding: .85rem 1rem;
    font-size: .9rem;
    border: 1px solid;
  }

  .alert-danger {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.3);
    color: #fca5a5;
  }

  /* ── Dashboard — Layout mobile ──────────────────────────────────────── */
  .app-layout {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Sidebar cachée sur mobile */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0;
    width: 280px !important;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    transition: left .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.6);
    background: var(--bg-soft) !important;
    border-right: 1px solid var(--border) !important;
  }

  .sidebar.open { left: 0 !important; }

  .main-content {
    padding: 0 !important;
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 1rem) !important;
    width: 100%;
    max-width: 100%;
  }

  /* ── Top bar mobile — élégante ──────────────────────────────────────── */
  .mobile-action-bar {
    display: flex !important;
    position: sticky !important;
    top: 0;
    z-index: 100;
    height: var(--mob-topbar-h);
    padding: 0 1rem !important;
    background: rgba(8,8,14,0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 var(--border);
  }

  /* Titre de page dans la topbar */
  .mob-page-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }

  /* Badge crédits mobile */
  .mob-credits-badge {
    height: 34px !important;
    padding: 0 .9rem !important;
    border-radius: 999px !important;
    background: rgba(109,40,217,.15) !important;
    border: 1px solid rgba(109,40,217,.3) !important;
    color: var(--primary-light) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    gap: .3rem !important;
  }

  .mob-credits-icon { font-size: 1rem !important; }

  /* Bouton paylink mobile */
  .mob-paylink-btn {
    height: 34px !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    box-shadow: 0 2px 12px rgba(109,40,217,.4) !important;
    letter-spacing: .02em;
  }

  /* Bouton menu hamburger */
  .sidebar-toggle {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-mob-sm) !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--surface) !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }

  /* ── Contenu principal mobile ───────────────────────────────────────── */
  .page-head {
    display: none; /* Remplacé par la topbar mobile */
  }

  /* Cards mobiles */
  .card {
    border-radius: var(--radius-mob) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    margin-bottom: 1rem;
  }

  /* Tab content padding */
  .tab-content {
    padding: 1rem;
  }

  .tab-content.active {
    padding: 1rem;
  }

  /* Statistiques */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }

  .stat-card {
    border-radius: var(--radius-mob) !important;
    padding: 1rem !important;
  }

  .stat-value {
    font-size: 1.4rem !important;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .stat-label {
    font-size: .75rem !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
  }

  /* ── Bottom Nav — ultra-professionnelle ─────────────────────────────── */
  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    background: rgba(8,8,14,0.92) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border-top: 1px solid var(--border-strong) !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,.5) !important;
    padding-bottom: var(--mob-safe-bottom);
  }

  /* Container de la nav bottom */
  .mobile-nav-categories {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    padding: .4rem .5rem !important;
    gap: 0 !important;
    height: var(--mob-nav-h);
    overflow: hidden !important;
  }

  /* Labels de section — masqués, on garde que les items */
  .mobile-nav-cat-label { display: none !important; }
  .mobile-nav-divider { display: none !important; }

  .mobile-nav-cat {
    flex: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .mobile-nav-cat-items {
    flex: 1;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Boutons de nav — redesignés */
  .mobile-nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .22rem !important;
    padding: .55rem .25rem !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    color: var(--text-faint) !important;
    transition: all .18s cubic-bezier(.4,0,.2,1) !important;
    position: relative;
  }

  .mobile-nav-btn span:last-child {
    font-size: .6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mnav-icon {
    font-size: 0 !important; /* SVG icons, not emoji */
    transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
  }

  /* État actif */
  .mobile-nav-btn.active {
    color: var(--primary-light) !important;
    background: rgba(109,40,217,.1) !important;
  }

  .mobile-nav-btn.active .mnav-icon {
    transform: translateY(-2px) scale(1.1) !important;
  }

  /* Indicateur actif — point */
  .mobile-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px;
    background: var(--primary-light);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--primary-light);
  }

  /* Bouton highlight (paylink) */
  .mobile-nav-btn.highlight {
    background: linear-gradient(135deg, rgba(109,40,217,.18), rgba(244,114,182,.12)) !important;
    border: 1px solid rgba(109,40,217,.25);
  }

  .mobile-nav-btn.highlight.active {
    color: var(--accent) !important;
    background: rgba(244,114,182,.12) !important;
  }

  .mobile-nav-btn:active {
    transform: scale(0.92) !important;
  }

  /* ── FAB Déconnexion — mobile ───────────────────────────────────────── */
  .mobile-logout-fab {
    display: flex;
    position: fixed;
    top: calc(var(--mob-safe-top) + 10px);
    right: 10px;
    z-index: 250;
    padding: .45rem .8rem !important;
    border-radius: 999px;
    background: rgba(15,15,25,0.8) !important;
    border: 1px solid rgba(239,68,68,.35) !important;
    color: #f87171 !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0,0,0,.4);
  }

  /* ── Generator — mobile ─────────────────────────────────────────────── */
  .generator-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .type-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  .type-card {
    border-radius: var(--radius-mob-sm) !important;
    padding: .9rem .65rem !important;
  }

  .type-card .icon { font-size: 1.5rem !important; }
  .type-card .label { font-size: .82rem !important; }
  .type-card .desc { font-size: .7rem !important; }

  /* Switcher de mode */
  .mode-switcher {
    border-radius: var(--radius-mob) !important;
    padding: .25rem !important;
    gap: .25rem !important;
    margin-bottom: 1rem;
  }

  .mode-btn {
    border-radius: 12px !important;
    font-size: .85rem !important;
    padding: .55rem .5rem !important;
    flex: 1;
  }

  /* Zone de prompt */
  .prompt-area, textarea.form-control {
    border-radius: var(--radius-mob-sm) !important;
    font-size: .95rem !important;
    line-height: 1.55;
  }

  /* Bouton générer */
  #generate-btn, .btn-generate {
    height: 54px;
    border-radius: var(--radius-mob) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
  }

  /* Preview */
  .preview-card {
    border-radius: var(--radius-mob) !important;
    min-height: 280px !important;
  }

  /* ── Wallet / paiements — mobile ────────────────────────────────────── */
  .wallet-balance {
    border-radius: var(--radius-mob) !important;
    padding: 1.5rem 1.25rem !important;
  }

  .balance-amount {
    font-family: var(--font-display) !important;
    font-size: 2.4rem !important;
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
  }

  /* Méthodes de paiement */
  .payment-methods, .payment-method-card {
    border-radius: var(--radius-mob-sm) !important;
  }

  /* Transactions — liste */
  .transaction-item {
    padding: .9rem 1rem !important;
    border-radius: var(--radius-mob-sm) !important;
  }

  /* ── Modales — mobile ───────────────────────────────────────────────── */
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box, .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 1.75rem 1.5rem calc(1.75rem + var(--mob-safe-bottom)) !important;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .modal-box::before {
    content: '';
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--border-strong);
    border-radius: 999px;
  }

  /* ── Tables — mobile ────────────────────────────────────────────────── */
  .table-wrap {
    border-radius: var(--radius-mob) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table { font-size: .85rem !important; }
  th { font-size: .72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  td, th { padding: .75rem .85rem !important; }

  /* ── User card sidebar mobile ───────────────────────────────────────── */
  .user-card {
    border-radius: var(--radius-mob-sm) !important;
    padding: .85rem !important;
  }

  .avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }

  /* ── Badges / Statuts ───────────────────────────────────────────────── */
  .badge {
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    padding: .25rem .65rem !important;
  }

  /* ── Toasts ─────────────────────────────────────────────────────────── */
  .toast-container {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 1rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    top: auto !important;
  }

  .toast {
    border-radius: var(--radius-mob-sm) !important;
    font-size: .9rem !important;
    padding: .85rem 1.1rem !important;
  }

  /* ── Images de galerie ──────────────────────────────────────────────── */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  .gallery-item {
    border-radius: var(--radius-mob-sm) !important;
    aspect-ratio: 1;
  }

  /* ── Spinners / loading ──────────────────────────────────────────────── */
  .spinner {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
  }

  /* ── Page register — champs supplémentaires ─────────────────────────── */
  .password-hint {
    font-size: .78rem !important;
    color: var(--text-faint) !important;
    margin-top: .4rem;
  }

  #pwd-strength { margin-top: .5rem; }

  /* Username field */
  #username {
    padding-left: 2rem !important;
  }

  /* ── Tabs (onglets en-tête section) ─────────────────────────────────── */
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab-btn {
    font-size: .82rem !important;
    padding: .5rem .9rem !important;
    white-space: nowrap;
    border-radius: 999px !important;
  }

  /* ── Paylinks ───────────────────────────────────────────────────────── */
  .paylink-card {
    border-radius: var(--radius-mob) !important;
    padding: 1rem !important;
  }

  /* ── Affiliate ──────────────────────────────────────────────────────── */
  .referral-code {
    border-radius: var(--radius-mob-sm) !important;
    font-size: .95rem !important;
  }

  /* ── Plans / Billing ────────────────────────────────────────────────── */
  .plan-card {
    border-radius: var(--radius-mob) !important;
    padding: 1.25rem !important;
  }

  /* ── Profile form ───────────────────────────────────────────────────── */
  .profile-avatar-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  /* ── Scrollbars mobiles (WebKit) ────────────────────────────────────── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

  /* ── Sélection de texte ─────────────────────────────────────────────── */
  ::selection {
    background: rgba(109,40,217,.3);
    color: var(--text);
  }

  /* ── Focus visible (accessibilité) ─────────────────────────────────── */
  :focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
  }

  /* ── Micro-interactions ─────────────────────────────────────────────── */
  .btn, .card, .type-card, .mobile-nav-btn, .tab-btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Feedback haptic visuel sur tap */
  .btn:active, .type-card:active, .paylink-card:active {
    transform: scale(0.975);
    transition-duration: .08s !important;
  }

  /* ── Animations d'entrée pour les onglets ───────────────────────────── */
  .tab-content.active {
    animation: mobileSlideIn .22s cubic-bezier(.4,0,.2,1);
  }

  @keyframes mobileSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Empty states ───────────────────────────────────────────────────── */
  .empty-state {
    padding: 2.5rem 1.5rem !important;
    border-radius: var(--radius-mob) !important;
  }

  .empty-state-icon { font-size: 2.5rem !important; }

  /* ── Alert boxes ────────────────────────────────────────────────────── */
  .alert {
    border-radius: var(--radius-mob-sm) !important;
    font-size: .88rem !important;
  }

  /* ── Section headers dans les tabs ─────────────────────────────────── */
  .section-head h2, .section-title {
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.02em !important;
  }

  /* ── Credit packs ───────────────────────────────────────────────────── */
  .credit-pack {
    border-radius: var(--radius-mob) !important;
    padding: 1.1rem 1rem !important;
  }

  .pack-credits {
    font-family: var(--font-display) !important;
    letter-spacing: -0.03em;
  }

  /* ── Withdrawal / dépôt modals ──────────────────────────────────────── */
  .amount-presets {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .5rem !important;
  }

  .amount-preset {
    border-radius: var(--radius-mob-sm) !important;
    padding: .6rem .4rem !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    text-align: center;
  }

  /* ── Chat support (si présent) ──────────────────────────────────────── */
  .chat-widget {
    border-radius: var(--radius-mob) !important;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 1rem) !important;
    right: 1rem !important;
  }

  /* ── WhatsApp float ─────────────────────────────────────────────────── */
  .whatsapp-float {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 1rem) !important;
    right: 1rem !important;
  }


  /* SVG icons inside nav buttons */
  .mnav-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }

  .mobile-nav-btn.active .mnav-icon svg {
    transform: translateY(-2px) scale(1.08);
  }

  /* SVG icons in sidebar */
  .side-nav .icon svg {
    width: 18px !important;
    height: 18px !important;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
  }

  /* Mode switcher SVG */
  .mode-btn .icon-big svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
    margin: 0 auto .25rem;
  }

  /* Type card SVG */
  .type-card .icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block;
    margin: 0 auto .4rem;
  }

  /* Sidebar toggle SVG */
  .sidebar-toggle svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
  }

  /* Credits bolt SVG */
  .mob-credits-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
  }

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

/* ── Petits écrans très étroits (< 360px) ─────────────────────────────── */
@media (max-width: 360px) {
  .mobile-nav-btn span:last-child { display: none; }
  .mnav-icon { font-size: 1.45rem !important; }
  .mobile-nav-btn { gap: 0 !important; padding: .5rem .2rem !important; }
  .auth-card { padding: 1.75rem 1.2rem calc(1.75rem + var(--mob-safe-bottom)); }
  .auth-title { font-size: 1.55rem !important; }
}

/* ── Tablette (768–1024px) — améliorations ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .generator-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card { border-radius: 14px !important; }
}

/* ==========================================================================
   BOUTIQUE — Responsive complet (dashboard + shop publique)
   ========================================================================== */

/* ── Tablette boutique (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Page boutique publique : 2 colonnes sur tablette */
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1rem !important;
  }
  /* Modal produit : empiler sur tablette étroite */
  .product-modal-inner {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
  }
}

/* ── Mobile boutique (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Page boutique PUBLIQUE (/shop) ───────────────────────────────── */

  /* Héro compact */
  .shop-hero {
    padding: 2rem 1rem 1.5rem !important;
  }
  .shop-hero h1 {
    font-size: 1.75rem !important;
    letter-spacing: -.02em !important;
  }
  .shop-hero .subtitle {
    font-size: .92rem !important;
  }

  /* Barre de recherche + tri : colonne */
  .shop-search {
    flex-direction: column !important;
    border-radius: 12px !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
  .shop-search input {
    padding: .85rem 1rem !important;
    font-size: .95rem !important;
    border-bottom: 1px solid var(--border);
  }
  .shop-search select {
    border-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding: .75rem 1rem !important;
    width: 100%;
  }
  .shop-search button {
    width: 100%;
    border-radius: 0 0 12px 12px !important;
    padding: .85rem !important;
  }

  /* Catégories : scroll horizontal */
  .shop-categories {
    padding: 0 1rem .5rem !important;
    -webkit-overflow-scrolling: touch;
  }
  .cat-chip {
    font-size: .82rem !important;
    padding: .45rem .8rem !important;
  }

  /* Grille produits : 1 colonne sur très petit, 2 sur mobile normal */
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: .75rem !important;
  }
  .shop-grid-wrap {
    padding: 0 1rem 5rem !important;
  }

  /* Carte produit compacte */
  .product-title {
    font-size: .95rem !important;
  }
  .product-desc {
    display: none !important; /* Masquer sur mobile pour gagner de la place */
  }
  .product-body {
    padding: .75rem !important;
  }
  .product-price {
    font-size: 1.05rem !important;
  }
  .product-stats {
    font-size: .72rem !important;
  }

  /* Modal produit : plein écran */
  .product-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .product-modal-inner {
    grid-template-columns: 1fr !important;
    border-radius: 24px 24px 0 0 !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    max-height: 95dvh !important;
    overflow-y: auto;
  }
  .pm-cover {
    min-height: 200px !important;
  }
  .pm-body {
    padding: 1.25rem !important;
  }
  .pm-title {
    font-size: 1.25rem !important;
  }
  .pm-price {
    font-size: 1.6rem !important;
  }

  /* Modal paiement : plein écran */
  .pay-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .pay-modal-inner {
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toast boutique */
  .toast-container {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
    left: 1rem !important;
    right: 1rem !important;
  }

  /* ── DASHBOARD — Sections Mes achats / Mes ventes ─────────────────── */

  /* En-têtes de section : empiler sur mobile */
  #tab-shop_purchases > div:first-child,
  #tab-shop_seller > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    padding: 1rem !important;
  }
  #tab-shop_purchases > div:first-child a,
  #tab-shop_seller > div:first-child button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Grilles achats/ventes : 1 colonne sur mobile */
  #shop-purchases-list > div[style*="grid"],
  #shop-seller-list > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  /* Carte achat : aspect ratio plus compact */
  #shop-purchases-list img,
  #shop-seller-list img {
    aspect-ratio: 16 / 7 !important;
    object-fit: cover;
  }

  /* ── Modal ajout/édition produit (dashboard) ──────────────────────── */
  #my-sp-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #my-sp-modal .modal-content {
    border-radius: 24px 24px 0 0 !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Handle bar */
  #my-sp-modal .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 999px;
    margin: 0 auto 1.25rem;
  }

  /* Grille Catégorie / Prix / Devise : 1 colonne */
  #my-sp-modal [style*="grid-template-columns:2fr 1fr 1fr"],
  #my-sp-modal [style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Grille Démo / Tags : 1 colonne */
  #my-sp-modal [style*="grid-template-columns:1fr 1fr"],
  #my-sp-modal [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Boutons upload : pleine largeur */
  #my-sp-modal [style*="display:flex;gap:.5rem"] {
    flex-wrap: wrap !important;
  }
  #my-sp-modal .form-control {
    font-size: .9rem !important;
  }

  /* Boutons action bas du modal */
  #my-sp-modal [style*="display:flex;gap:.6rem"] {
    flex-direction: column !important;
  }
  #my-sp-modal [style*="display:flex;gap:.6rem"] button {
    width: 100% !important;
  }
}

/* ── Très petit mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* 1 seule colonne produits */
  .shop-grid {
    grid-template-columns: 1fr !important;
  }
  #shop-purchases-list > div[style*="grid"],
  #shop-seller-list > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
  .shop-hero h1 {
    font-size: 1.5rem !important;
  }
}