/* ==========================================================================
   ESPACE CLIENT — REDESIGN MOBILE HAUT DE GAMME (ProCanvas)
   S'applique UNIQUEMENT sur mobile (max-width: 860px).
   La version Desktop (> 860px) reste 100% intacte et préservée.
   ========================================================================== */

/* Fix universel : tout élément portant l'attribut hidden doit rester invisible */
[hidden] {
  display: none !important;
}

@media (max-width: 860px) {

  /* ==========================================================================
     1. FOND DE PAGE ET EN-TÊTE MOBILE (Sticky Glassmorphic)
     ========================================================================== */
  body {
    background-color: #F6F8FC;
    -webkit-font-smoothing: antialiased;
  }

  .dash-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 2px 12px rgba(16, 20, 56, 0.03);
  }

  .dash-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    min-height: 58px;
    height: 58px;
    padding: 0 16px;
  }

  /* Logo centered absolutely so it doesn't shift with button count */
  .dash-topbar .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .dash-topbar .brand-logo {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }

  .dash-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
  }

  /* Bouton Retour — sans cadre, juste l'icône flèche */
  .dash-topbar .back-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    color: #101438 !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
    text-indent: 0 !important;
  }

  .dash-topbar .back-btn .back-txt {
    display: none !important;
  }

  .dash-topbar .back-btn::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .dash-topbar .back-btn::after {
    content: none !important;
  }

  /* Bouton Déconnexion dans le Header — masqué sur mobile (accessible dans le dashboard) */
  .dash-topbar #logoutTop {
    display: none !important;
  }

  /* Back button style */
  .dash-topbar .icon-btn.round {
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(16, 20, 56, 0.05) !important;
    display: inline-grid !important;
    place-items: center !important;
    transition: all 0.18s ease !important;
  }

  .dash-topbar .back-btn:active,
  .dash-topbar #logoutTop:active {
    transform: scale(0.95);
    background: #F1F5F9 !important;
  }

  /* Conteneur principal */
  .dash-wrap {
    padding: 16px 14px 64px !important;
    max-width: 520px;
    margin: 0 auto;
  }


  /* ==========================================================================
     2. VERSION MOBILE : PAGE DE CONNEXION (AUTH)
     ========================================================================== */
  .auth-split {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 14px 40px -12px rgba(16, 20, 56, 0.09), 0 2px 6px rgba(16, 20, 56, 0.04) !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
  }

  /* En-tête de marque avec photo d'espace client et dégradé luxe sur mobile */
  .auth-aside {
    order: 1 !important;
    padding: 24px 20px 20px !important;
    gap: 14px !important;
    background-color: #0A0E28 !important;
    background-image:
      linear-gradient(180deg,
        rgba(10, 14, 40, 0.74) 0%,
        rgba(17, 22, 60, 0.82) 45%,
        rgba(10, 14, 40, 0.95) 100%),
      radial-gradient(circle at 95% 8%, rgba(0, 196, 204, 0.32) 0%, transparent 55%),
      radial-gradient(circle at 5% 90%, rgba(125, 42, 232, 0.35) 0%, transparent 60%),
      url('assets/hero-espace-perso.png?v=3') !important;
    background-position: 0 0, 0 0, 0 0, center 20% !important;
    background-size: auto, auto, auto, cover !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
  }

  .auth-aside::after {
    display: none !important;
  }

  .auth-aside-brand {
    display: inline-flex !important;
    background: #FFFFFF !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    align-self: flex-start !important;
    margin-bottom: 2px;
  }

  .auth-aside-logo {
    height: 22px !important;
    width: auto !important;
  }

  .auth-aside-top {
    margin: 0 !important;
  }

  .auth-aside-top h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    margin: 0 0 6px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  }

  .auth-aside-top p {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
  }

  /* Carrousel horizontal moderne des avantages sur mobile (Swipeable) */
  .auth-benefits {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 10px !important;
    margin: 10px -20px 0 !important;
    padding: 4px 20px 8px !important;
    list-style: none !important;
    scrollbar-width: none !important;
  }

  .auth-benefits::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .auth-benefits li {
    flex: 0 0 152px !important;
    width: 152px !important;
    min-width: 152px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
    padding: 12px 12px !important;
    background: rgba(14, 18, 52, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
  }

  .auth-benefits li:active {
    transform: scale(0.98) !important;
  }

  .auth-benefits .ab-ic {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18) 0%, rgba(125, 42, 232, 0.25) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    display: grid !important;
    place-items: center !important;
    color: #00E5FF !important;
    flex-shrink: 0 !important;
  }

  .auth-benefits .ab-ic svg {
    width: 16px !important;
    height: 16px !important;
  }

  .auth-benefits li div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
  }

  .auth-benefits strong {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .auth-benefits small {
    display: block !important;
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /* Indicateurs de pagination du carrousel sur mobile */
  .auth-carousel-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }

  .auth-carousel-dots .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
  }

  .auth-carousel-dots .dot.active {
    width: 18px !important;
    background: #00E5FF !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
  }

  .auth-aside-foot {
    display: none !important;
  }

  /* Panneau formulaire de connexion */
  .auth-panel {
    order: 2 !important;
    padding: 24px 20px 22px !important;
    background: #FFFFFF !important;
  }

  /* Onglets de connexion façon iOS Segmented Control */
  .auth-panel .login-tabs {
    display: flex !important;
    background: #F1F4FA !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 3px !important;
    margin: 0 0 18px !important;
    gap: 3px !important;
  }

  .auth-panel .login-tab {
    flex: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .auth-panel .login-tab.active {
    background: #FFFFFF !important;
    color: #7D2AE8 !important;
    box-shadow: 0 2px 8px rgba(16, 20, 56, 0.08) !important;
  }

  #loginTitle {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #101438 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 4px !important;
  }

  .auth-panel .modal-sub {
    font-size: 0.86rem !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }

  /* Champs de formulaire mobile */
  .form-group {
    margin-bottom: 14px !important;
  }

  .form-group label {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
  }

  .form-input {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    padding: 0 14px !important;
    font-size: 16px !important; /* Évite le zoom automatique sur iPhone */
    color: #101438 !important;
    transition: all 0.18s ease !important;
  }

  .form-input:focus {
    border-color: #7D2AE8 !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(125, 42, 232, 0.14) !important;
    outline: none !important;
  }

  .form-tip {
    font-size: 0.74rem !important;
    color: #64748B !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
  }

  /* Bouton d'action principal */
  #loginSubmit {
    min-height: 50px !important;
    height: 50px !important;
    border-radius: 13px !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    background: linear-gradient(135deg, #7D2AE8 0%, #9B51E0 100%) !important;
    box-shadow: 0 8px 20px -6px rgba(125, 42, 232, 0.45) !important;
    transition: all 0.18s ease !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  #loginSubmit:active {
    transform: scale(0.98) !important;
  }

  /* Bloc VIP d'information */
  .auth-vip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 13px 14px !important;
    background: #FAF7FF !important;
    border: 1px solid #E8DEFC !important;
    border-radius: 14px !important;
  }

  .auth-vip-ic {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }

  .auth-vip strong {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #6B23D6 !important;
    margin-bottom: 3px !important;
  }

  .auth-vip p {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    color: #64748B !important;
    margin: 0 0 8px !important;
  }

  .auth-vip-link {
    display: inline-flex !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #7D2AE8 !important;
    text-decoration: none !important;
  }

  .auth-vip-ready {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding: 12px 14px !important;
    background: #F0FDF4 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 12px !important;
    color: #15803D !important;
    font-weight: 650 !important;
    font-size: 0.82rem !important;
  }

  /* Séparateur et Google */
  .oauth-divider {
    margin: 18px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    color: #94A3B8 !important;
    font-size: 0.78rem !important;
  }

  .oauth-divider::before,
  .oauth-divider::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  .oauth-divider span {
    padding: 0 10px !important;
  }

  #googleBtnWrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .modal-security-footer {
    font-size: 0.74rem !important;
    line-height: 1.5 !important;
    color: #94A3B8 !important;
    text-align: center !important;
    margin: 16px 0 0 !important;
  }


  /* ==========================================================================
     3. VERSION MOBILE : TABLEAU DE BORD (DASHBOARD)
     ========================================================================== */
  #accountDashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Bandeau paiement réussi */
  .pay-banner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
    border: 1px solid #86EFAC !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.08) !important;
    margin-bottom: 2px !important;
  }

  .pb-check {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #16A34A !important;
    color: #FFFFFF !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

  .pb-txt strong {
    display: block !important;
    color: #14532D !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
  }

  .pb-txt p {
    margin: 2px 0 0 !important;
    color: #166534 !important;
    font-size: 0.78rem !important;
  }

  /* Hero Profil Utilisateur (Luxe Dark Card avec photo) */
  .dash-hero {
    background:
      linear-gradient(145deg, #0A0E28 0%, #151945 55%, #241a54 100%) !important,
      url('assets/hero-espace-perso.png') right center / auto 155% !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 26px 18px !important;
    box-shadow: 0 12px 30px -8px rgba(16, 20, 56, 0.25) !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .dash-hero::before {
    content: '' !important;
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 196, 204, 0.22) 0%, transparent 70%) !important;
    top: -60px !important;
    right: -40px !important;
    animation: none !important;
    opacity: 0.9 !important;
  }

  .dash-hero::after {
    display: none !important;
  }

  /* Avatar circulaire stylé */
  .avatar-circle.big {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7D2AE8 0%, #00C4CC 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 16px rgba(125, 42, 232, 0.4) !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 2 !important;
  }

  .dash-hero-txt {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    flex: 1 !important;
    z-index: 2 !important;
  }

  .dash-kicker {
    display: none !important; /* Masque la phrase trop longue sur mobile */
  }

  .dash-hello {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    margin: 0 0 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Badges stats sous le nom */
  .dash-stats {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }

  .dash-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(6px) !important;
  }

  .dash-chip strong {
    color: #00E5FF !important;
    font-weight: 800 !important;
  }


  /* ==========================================================================
     4. NAVIGATION MOBILE PAR ONGLETS (Segmented App Bar)
     ========================================================================== */
  .dash-mobile-nav {
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 4px !important;
    gap: 4px !important;
    box-shadow: 0 2px 10px rgba(16, 20, 56, 0.04) !important;
    position: sticky !important;
    top: 66px !important;
    z-index: 100 !important;
  }

  .dash-mn-btn {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #64748B !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
  }

  .dash-mn-btn svg {
    flex-shrink: 0;
  }

  .dash-mn-btn.active {
    background: linear-gradient(135deg, #7D2AE8 0%, #9B51E0 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(125, 42, 232, 0.32) !important;
  }

  .dash-mn-badge {
    background: #00C4CC !important;
    color: #0A0E28 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    margin-left: 2px !important;
  }

  .dash-mn-btn.active .dash-mn-badge {
    background: #FFFFFF !important;
    color: #7D2AE8 !important;
  }

  /* --- Gestion dynamique de l'affichage par onglet sur mobile --- */
  #accountDashboard:not([data-active-tab]) #bonusZone,
  #accountDashboard:not([data-active-tab]) #messagesZone,
  #accountDashboard:not([data-active-tab]) #helpSide,
  #accountDashboard[data-active-tab="orders"] #bonusZone,
  #accountDashboard[data-active-tab="orders"] #messagesZone,
  #accountDashboard[data-active-tab="orders"] #helpSide {
    display: none !important;
  }

  #accountDashboard[data-active-tab="orders"] .plan-card,
  #accountDashboard[data-active-tab="orders"] #ordersCard {
    display: block !important;
    animation: mobileFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #accountDashboard[data-active-tab="bonus"] .plan-card,
  #accountDashboard[data-active-tab="bonus"] .dash-grid,
  #accountDashboard[data-active-tab="bonus"] #messagesZone {
    display: none !important;
  }

  #accountDashboard[data-active-tab="bonus"] #bonusZone:not([hidden]) {
    display: block !important;
    animation: mobileFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #accountDashboard[data-active-tab="messages"] .plan-card,
  #accountDashboard[data-active-tab="messages"] .dash-grid,
  #accountDashboard[data-active-tab="messages"] #bonusZone {
    display: none !important;
  }

  #accountDashboard[data-active-tab="messages"] #messagesZone {
    display: block !important;
    animation: mobileFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #accountDashboard[data-active-tab="help"] .plan-card,
  #accountDashboard[data-active-tab="help"] #ordersCard,
  #accountDashboard[data-active-tab="help"] #bonusZone,
  #accountDashboard[data-active-tab="help"] #messagesZone {
    display: none !important;
  }

  #accountDashboard[data-active-tab="help"] .dash-grid {
    display: block !important;
  }

  #accountDashboard[data-active-tab="help"] #helpSide {
    display: block !important;
    animation: mobileFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

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


  /* ==========================================================================
     5. CARTE DE L'OFFRE ACTIVE (Digital Pass VIP)
     ========================================================================== */
  .dash-card.plan-card {
    background: linear-gradient(140deg, #101438 0%, #1c184e 55%, #2a155c 100%) !important;
    border: 1px solid rgba(125, 42, 232, 0.35) !important;
    border-radius: 18px !important;
    padding: 18px 18px 16px !important;
    box-shadow: 0 10px 28px -6px rgba(16, 20, 56, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .dash-card.plan-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle, rgba(0, 196, 204, 0.18) 0%, transparent 70%) !important;
    pointer-events: none !important;
  }

  .plan-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .plan-card-label {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #C084FC !important;
  }

  .plan-card-main {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .plan-card-main strong {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
  }

  .plan-card-main span {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #00E5FF !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.24) !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
  }

  .plan-card-meta {
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 8px 0 0 !important;
    word-break: break-all !important;
  }


  /* ==========================================================================
     6. GRILLE PRINCIPALE ET COMMANDES
     ========================================================================== */
  .dash-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 0 !important;
  }

  .dash-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    box-shadow: 0 4px 14px rgba(16, 20, 56, 0.04) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-card h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #101438 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.015em !important;
  }

  .demo-note {
    font-size: 0.78rem !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
  }

  /* ── LISTE COMMANDES (colonne simple, pas de carrousel) ── */
  .orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: visible !important;
  }

  /* Carte de commande */
  .order-item {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    box-shadow: 0 2px 10px rgba(16, 20, 56, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
  }

  .order-item::before {
    display: none !important;
  }

  .order-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .order-top strong {
    font-size: 0.96rem !important;
    font-weight: 750 !important;
    color: #101438 !important;
    display: block !important;
    line-height: 1.3 !important;
  }

  .order-id {
    font-size: 0.76rem !important;
    color: #64748B !important;
    margin-top: 2px !important;
  }

  /* Badges de statut raffinés */
  .status-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .status-badge.status-active {
    background: #E9FBF0 !important;
    color: #0A6B3D !important;
    border: 1px solid #A9E5C4 !important;
  }

  .status-badge.status-progress {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
  }

  .status-badge.status-paid {
    background: #FDF4E6 !important;
    color: #B45309 !important;
    border: 1px solid #FDE68A !important;
  }

  .status-badge.status-pending {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
  }


  /* ==========================================================================
     7. TRACKER DE SUIVI MOBILE (Micro-Pipeline)
     ========================================================================== */
  .tracker {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    margin: 10px 0 12px !important;
  }

  .t-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 2 !important;
    min-width: 48px !important;
  }

  .t-dot {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 2px solid #CBD5E1 !important;
    color: #94A3B8 !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.2s ease !important;
  }

  .t-step.done .t-dot {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
  }

  .t-step.current .t-dot {
    background: #7D2AE8 !important;
    border-color: #7D2AE8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(125, 42, 232, 0.25) !important;
  }

  .t-step small {
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    color: #64748B !important;
  }

  .t-step.done small,
  .t-step.current small {
    color: #101438 !important;
    font-weight: 750 !important;
  }

  .t-bar {
    flex: 1 !important;
    height: 2px !important;
    background: #E2E8F0 !important;
    margin: 0 2px 14px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .t-bar.done {
    background: #10B981 !important;
  }


  /* ==========================================================================
     8. BLOC ACCÈS ET IDENTIFIANTS CANVA PRO (Mobile)
     ========================================================================== */
  .order-target {
    margin: 10px 0 12px !important;
    background: #F3EDFF !important;
    border: 1px solid #DCCDFB !important;
    color: #101438 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
  }

  .order-target strong {
    color: #7D2AE8 !important;
  }

  /* Boîte des identifiants Canva Pro */
  .canva-creds {
    border: 1.5px solid #E6DDFB !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FF 100%) !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin: 12px 0 14px !important;
    box-shadow: 0 4px 16px rgba(125, 42, 232, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .canva-creds-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    color: #101438 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .canva-creds-title::before {
    content: '👑';
    font-size: 1rem;
  }

  .cred-warn {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #92400E !important;
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

  .cred-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .cred-label {
    font-size: 0.74rem !important;
    color: #64748B !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .cred-val {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #101438 !important;
    word-break: break-all !important;
  }

  .cred-copy-main {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: #7D2AE8 !important;
    border: none !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-items: center !important;
    transition: all 0.18s ease !important;
    margin-top: 2px !important;
  }

  .cred-copy-main:active {
    transform: scale(0.97) !important;
    background: #6B23D6 !important;
  }

  /* Étapes d'accès à Canva */
  .access-steps {
    margin: 10px 0 14px !important;
    padding-left: 20px !important;
    font-size: 0.8rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
  }

  .access-steps li {
    margin-bottom: 6px !important;
  }

  .access-steps a {
    color: #7D2AE8 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
  }

  /* Bouton d'accès direct Canva Pro */
  .order-item .btn.btn-gradient {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 0.94rem !important;
    font-weight: 750 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-shadow: 0 8px 20px -6px rgba(125, 42, 232, 0.45) !important;
  }


  /* ==========================================================================
     9. ZONE BONUS OFFERTS (Mobile Media Cards)
     ========================================================================== */
  .bonus-zone {
    margin-top: 0 !important;
  }

  .bonus-zone-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
  }

  .bonus-state {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
  }

  .bonus-zone.unlocked .bonus-state {
    background: #E9FBF0 !important;
    color: #0A6B3D !important;
    border-color: #A9E5C4 !important;
  }

  .bonus-zone-sub {
    font-size: 0.8rem !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin: 4px 0 14px !important;
  }

  /* Carte bonus (colonne, pas de carrousel) */
  .bonus-dl {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 2px 6px rgba(16, 20, 56, 0.02) !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
  }

  .bonus-dl-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  .bonus-dl-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    padding: 5px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    object-fit: contain !important;
  }

  .bonus-dl-val {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #007A80 !important;
    background: #E0F7F8 !important;
    border: 1px solid #B2EBF2 !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
  }

  .bonus-dl h3 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 750 !important;
    color: #101438 !important;
    margin: 0 !important;
  }

  .bonus-dl p {
    font-size: 0.78rem !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  .bonus-dl-meta {
    margin: 0 !important;
  }

  .bonus-dl-meta span {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
  }

  .bonus-dl-btn {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    margin-top: 4px !important;
    width: 100% !important;
    display: inline-grid !important;
    place-items: center !important;
  }


  /* ==========================================================================
     10. ZONE MESSAGES & ASSISTANCE (Support Mobile)
     ========================================================================== */
  .messages-zone {
    margin-top: 0 !important;
  }

  .messages-zone-sub {
    font-size: 0.78rem !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin: 4px 0 14px !important;
  }

  .messages-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .msg-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
  }

  .msg-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  .msg-top strong {
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    color: #101438 !important;
  }

  .msg-meta {
    font-size: 0.72rem !important;
    color: #94A3B8 !important;
    margin-bottom: 8px !important;
  }

  .msg-body {
    font-size: 0.82rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }

  .msg-reply {
    background: #F3EDFF !important;
    border-left: 3px solid #7D2AE8 !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 10px 12px !important;
    margin-top: 6px !important;
  }

  .msg-reply-ic {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    color: #7D2AE8 !important;
    display: block !important;
    margin-bottom: 3px !important;
  }

  .msg-reply p {
    font-size: 0.8rem !important;
    color: #101438 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }


  /* ==========================================================================
     11. BLOC ASSISTANCE & DÉCONNEXION (Mobile Settings Group)
     ========================================================================== */
  .dash-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .dash-help-txt {
    font-size: 0.8rem !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .dash-side .btn {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    display: inline-grid !important;
    place-items: center !important;
    margin-bottom: 8px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #101438 !important;
  }

  .dash-side .account-logout {
    color: #DC2626 !important;
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
  }

  .dash-side .account-logout:active {
    background: #FEE2E2 !important;
  }


  /* ── DOTS CAROUSEL ── */
  .carousel-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 8px 0 4px !important;
    padding: 0 !important;
    list-style: none !important;
    height: 16px !important;
  }
  .carousel-dots li {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #CBD5E1 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .carousel-dots li.active {
    width: 18px !important;
    background: #7D2AE8 !important;
  }

}

/* ==========================================================================
   DESKTOP PUR (> 860px) : Neutralisation absolue des ajouts mobile
   ========================================================================== */
@media (min-width: 861px) {
  .dash-mobile-nav {
    display: none !important;
  }
}