/* compte.html inline styles */
/* Style pour les bulles de message */
.chat-bubble {
    word-break: break-word !important; 
    overflow-wrap: anywhere !important; 
    width: fit-content; 
    max-width: 85%; 
}

/* Style spécifique pour les liens cliquables */
.chat-bubble a {
    color: #60a5fa !important; 
    text-decoration: underline !important;
    font-weight: 600;
}

.chat-bubble a:hover {
    color: #3b82f6 !important;
}
    body { 
        background-color: #040914; 
        color: #e5e7eb; 
        font-family: "Inter", sans-serif; 
        min-height: 100vh; 
        overflow-x: hidden; 
        padding-bottom: 40px;
    }

    .aurora-bg {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      z-index: -1; 
      background: radial-gradient(circle at 50% 50%, #0a1428 0%, #040914 100%);
      overflow: hidden;
    }
    
    .aurora-blob {
      position: absolute;
      filter: blur(120px);
      opacity: 0.25;
      animation: float 6.6s infinite ease-in-out alternate;
    }
    
    .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #0ea5e9; animation-delay: 0s; }
    .blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #8b5cf6; opacity: 0.2; animation-delay: -3.3s; }
    .blob-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: #f59e0b; opacity: 0.15; animation-delay: -2.2s; }
    
    @keyframes float {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(60px, 100px) scale(1.2); }
    }

    .skeleton {
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
        background-size: 200% 100%;
        animation: loading 1.6s infinite;
        border-radius: 6px;
        color: transparent !important;
        pointer-events: none;
        user-select: none;
    }
    .skeleton * { opacity: 0; }
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; backdrop-filter: blur(12px); transition: border-color 0.3s ease; }
    .glass-card:hover { border-color: rgba(255, 255, 255, 0.15); }

/* Credentials rows: keep values left-aligned beside labels on mobile and desktop. */
.credential-label {
  width: 3.5rem;
  flex: 0 0 3.5rem;
  color: #6b7280;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.credential-value,
.credential-secret-wrap {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.credential-value,
.credential-secret {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

.credential-secret-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
}

.credential-eye-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #6b7280;
  border-radius: 999px;
}

.credential-eye-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 520px) {
  .credential-label {
    width: 2.9rem;
    flex-basis: 2.9rem;
  }

  .credential-value,
  .credential-secret {
    font-size: .76rem;
  }
}

    .hero-card { background: #000; position: relative; overflow: hidden; border-radius: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
    .hero-card::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/images/jacket.jpg'); background-size: cover; background-position: center; filter: brightness(0.5); z-index: 0; }
    .hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 90%); z-index: 1; }
    
    .input-dark { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 14px 20px; border-radius: 16px; width: 100%; transition: 0.3s; }
    .input-dark:focus { outline: none; border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
    
    .animate-in { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s; }
    .modal-overlay.active { opacity: 1; pointer-events: auto; }
    html.modal-scroll-locked,
    body.modal-scroll-locked { overflow: hidden !important; overscroll-behavior: none; }
    .modal-content { background: #0a1428; border: 1px solid rgba(255,255,255,0.1); width: 92%; max-width: 480px; border-radius: 28px; transform: scale(0.9); transition: 0.3s; max-height: 85vh; overflow-y: auto; }
    .modal-overlay.active .modal-content { transform: scale(1); }
    .notice-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; max-height: 62vh; overflow-y: auto; }
    .notice-modal-image { width: 100%; max-height: 280px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.28); }
    .notice-modal-link { align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 12px 16px; border-radius: 14px; background: #2563eb; color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; box-shadow: 0 14px 28px rgba(37,99,235,0.24); }
    .notice-modal-link:not(.hidden) { display: inline-flex; }
    .notice-modal-link:hover { background: #3b82f6; }
    
    #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
    .toast { background: rgba(10, 15, 30, 0.95); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 16px 20px; border-radius: 16px; transform: translateX(120%); transition: 0.4s; display: flex; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .toast.show { transform: translateX(0); }
    
    details > summary { list-style: none; cursor: pointer; }
    details[open] summary i { transform: rotate(180deg); }
    summary i { transition: transform 0.3s; }
    
    .guide-step { display: flex; gap: 12px; margin-bottom: 20px; align-items: flex-start; }
    .step-number { width: 28px; height: 28px; border-radius: 50%; background: #3b82f6; color: white; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -2px; box-shadow: 0 0 10px rgba(59,130,246,0.3); }
    .guide-text strong { color: white; font-weight: 700; }
    .guide-text { font-size: 13px; color: #d1d5db; line-height: 1.5; }
    .guide-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 11px; margin-top: 8px; transition: 0.2s; text-decoration: none; }
    .alt-badge { display: inline-block; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 6px; font-size: 10px; color: #9ca3af; margin-top: 10px; border: 1px solid rgba(255,255,255,0.05); }
    
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    button:focus-visible, a:focus-visible, input:focus-visible, details:focus-visible {
        outline: 2px solid rgba(59, 130, 246, 0.7);
        outline-offset: 2px;
    }
    .country-code-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      white-space: nowrap;
    }

    .mg-flag { display:inline-block; width:18px; height:12px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.12); background:linear-gradient(to right,#fff 0 33.33%,transparent 33.33%),linear-gradient(to bottom,#fc3d32 0 50%,#007e3a 50% 100%); flex-shrink:0; }
.country-code-box { display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; width:118px; flex-shrink:0; }
.copy-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 72px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: #d1d5db;
      font-size: 10px;
      font-weight: 800;
      transition: 0.2s;
    }
    .copy-pill:hover { background: rgba(59,130,246,0.18); color: #fff; border-color: rgba(59,130,246,0.35); }
    .credential-help {
      background: rgba(59,130,246,0.08);
      border: 1px solid rgba(59,130,246,0.16);
      border-radius: 16px;
      padding: 12px;
      color: #bfdbfe;
      font-size: 11px;
      line-height: 1.45;
    }


    .premium-avatar-shell {
      position: relative;
      width: 56px;
      height: 56px;
      border-radius: 20px;
      padding: 2px;
      background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(168,85,247,0.95), rgba(236,72,153,0.75));
      box-shadow: 0 0 24px rgba(59,130,246,0.28), 0 10px 24px rgba(0,0,0,0.35);
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .premium-avatar-shell:hover {
      transform: translateY(-1px) scale(1.03);
      box-shadow: 0 0 34px rgba(99,102,241,0.38), 0 14px 30px rgba(0,0,0,0.45);
    }
    .premium-avatar-inner {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 30% 20%, rgba(96,165,250,0.32), transparent 35%),
        radial-gradient(circle at 75% 85%, rgba(168,85,247,0.22), transparent 35%),
        #111827;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .premium-avatar-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 34%, rgba(255,255,255,0.05));
      pointer-events: none;
      z-index: 25;
    }
    .premium-avatar-edit {
      position: absolute;
      right: -5px;
      bottom: -5px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #2563eb;
      border: 2px solid rgba(17,24,39,0.98);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 8px 18px rgba(37,99,235,0.35);
      z-index: 40;
    }
    .avatar-choice {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      overflow: hidden;
      padding: 2px;
      background: linear-gradient(135deg, rgba(59,130,246,0.55), rgba(168,85,247,0.45));
      border: 1px solid rgba(255,255,255,0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .avatar-choice:hover {
      transform: translateY(-2px) scale(1.04);
      border-color: rgba(96,165,250,0.55);
      box-shadow: 0 0 22px rgba(59,130,246,0.25);
    }
    .avatar-choice img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
      background: rgba(15,23,42,0.75);
    }

    @media (min-width: 1024px) {
      .premium-avatar-shell {
        width: 60px;
        height: 60px;
        border-radius: 22px;
      }
      .premium-avatar-inner {
        border-radius: 20px;
      }
    }


    .slider-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.08);
      transition: all 0.25s ease;
    }

    .slider-dot.active {
      width: 22px;
      background: rgba(59,130,246,0.95);
      box-shadow: 0 0 12px rgba(59,130,246,0.35);
    }

    .slider-nudge {
      animation: sliderNudge 1.3s ease;
    }

    @keyframes sliderNudge {
      0% { transform: translateX(0); }
      35% { transform: translateX(-14px); }
      70% { transform: translateX(0); }
      100% { transform: translateX(0); }
    }

    @media (min-width: 1024px) {
      #abos-list {
        padding-left: 4px;
        padding-right: 4px;
        overflow-x: auto;
      }

      .abo-item {
        min-width: 100% !important;
        max-width: 100% !important;
      }

      #slider-controls {
        margin-top: 4px;
      }
    }


    /* Premium website icons - Lucide / glass style */
    .ps-lucide, [data-lucide] {
      width: 18px;
      height: 18px;
      stroke-width: 2.15;
      vector-effect: non-scaling-stroke;
    }
    .icon-premium svg,
    .guide-device-icon svg,
    .icon-glass-square svg,
    .hero-player-icon svg,
    .section-icon svg,
    .tool-premium-icon svg,
    .app-download-label svg,
    .guide-chip svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.15;
      filter: drop-shadow(0 0 7px rgba(96,165,250,0.16));
    }
    .icon-premium {
      position: relative;
      isolation: isolate;
    }
    .icon-premium::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: radial-gradient(circle at 28% 18%, rgba(255,255,255,0.22), transparent 38%),
                  radial-gradient(circle at 72% 82%, rgba(96,165,250,0.12), transparent 44%);
      opacity: .9;
      pointer-events: none;
      z-index: -1;
    }
    .icon-premium svg {
      color: currentColor;
      transition: transform .25s ease, filter .25s ease;
    }
    .icon-premium:hover svg {
      transform: scale(1.06);
      filter: drop-shadow(0 0 10px rgba(147,197,253,0.38));
    }
    .section-title-icon {
      width: 30px;
      height: 30px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, rgba(59,130,246,.20), rgba(168,85,247,.10));
      border: 1px solid rgba(96,165,250,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(37,99,235,.10);
      color: #60a5fa;
      flex-shrink: 0;
    }
    .tool-premium-icon {
      width: 48px;
      height: 48px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 28px rgba(0,0,0,.24);
      backdrop-filter: blur(14px);
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }
    .tool-premium-icon::before {
      content: "";
      position: absolute;
      inset: -45%;
      background: conic-gradient(from 120deg, transparent, rgba(255,255,255,.16), transparent 32%);
      opacity: .72;
      transform: rotate(18deg);
    }
    .tool-premium-icon svg { position: relative; z-index: 1; }
    .tool-card-premium:hover .tool-premium-icon,
    .glass-card:hover .tool-premium-icon {
      transform: translateY(-2px) scale(1.03);
      border-color: rgba(96,165,250,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px rgba(59,130,246,.13);
    }
    .tool-icon-violet { color:#c084fc; background:linear-gradient(145deg, rgba(168,85,247,.24), rgba(255,255,255,.045)); border-color:rgba(168,85,247,.22); }
    .tool-icon-mint { color:#5eead4; background:linear-gradient(145deg, rgba(20,184,166,.20), rgba(255,255,255,.045)); border-color:rgba(45,212,191,.20); }
    .tool-icon-green { color:#4ade80; background:linear-gradient(145deg, rgba(34,197,94,.20), rgba(255,255,255,.045)); border-color:rgba(34,197,94,.20); }
    .tool-icon-blue { color:#60a5fa; background:linear-gradient(145deg, rgba(59,130,246,.22), rgba(255,255,255,.045)); border-color:rgba(59,130,246,.24); }
    .premium-inline-icon {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      vertical-align:-3px;
      color: currentColor;
    }
    .premium-inline-icon svg { width:14px; height:14px; stroke-width:2.25; }
    .app-download-label svg { width: 13px; height: 13px; }
    .connected-badge svg { width:13px; height:13px; stroke-width:2.4; }


    .icon-premium { width:44px; height:44px; border-radius:999px; background:linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.035)); border:1px solid rgba(255,255,255,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px rgba(0,0,0,0.25); backdrop-filter:blur(14px); color:rgba(255,255,255,0.84); display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
    .icon-premium i { font-size:16px; line-height:1; }
    .icon-premium:hover { transform:translateY(-1px); background:linear-gradient(145deg, rgba(59,130,246,0.24), rgba(147,51,234,0.14)); border-color:rgba(96,165,250,0.35); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 28px rgba(59,130,246,0.18); }
    .icon-premium-blue { color:#93c5fd; border-color:rgba(59,130,246,0.28); background:linear-gradient(145deg, rgba(59,130,246,0.18), rgba(255,255,255,0.04)); }
    .icon-premium-red { color:#f87171; border-color:rgba(239,68,68,0.22); background:linear-gradient(145deg, rgba(239,68,68,0.12), rgba(255,255,255,0.035)); }
    .icon-glass-square { width:42px; height:42px; border-radius:16px; background:linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)); border:1px solid rgba(255,255,255,0.12); box-shadow:inset 0 1px 0 rgba(255,255,255,0.11), 0 10px 22px rgba(0,0,0,0.22); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(12px); }
    .app-card { position:relative; overflow:hidden; min-height:154px; border-radius:24px; }
    .app-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.09), transparent 42%); opacity:0; transition:opacity .25s ease; pointer-events:none; }
    .app-card:hover::before { opacity:1; }
    .app-icon-box { width:58px; height:58px; border-radius:20px; background:linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.13); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 24px rgba(0,0,0,0.25); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:8px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; z-index:1; }
    .app-card:hover .app-icon-box { transform:translateY(-2px) scale(1.04); border-color:rgba(96,165,250,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 30px rgba(59,130,246,0.14); }
    .app-icon-box img { width:100%; height:100%; object-fit:contain; }
    .hero-player-icon { display:grid !important; place-items:center !important; }
    .hero-player-icon i { margin-left:0 !important; line-height:1 !important; transform:translateX(1px); display:block; }

    .connected-badge { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:fit-content; padding:7px 12px; border-radius:999px; background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.22); color:#86efac; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; box-shadow:0 0 18px rgba(34,197,94,0.08); }
    .connected-badge-dot { width:7px; height:7px; border-radius:999px; background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,0.85); flex-shrink:0; }
    .profile-card { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .profile-identity { display:flex; align-items:center; gap:16px; min-width:0; }
    .app-download-label { display:inline-flex; align-items:center; justify-content:center; gap:5px; color:#60a5fa; font-size:9px; font-weight:900; }

    .guide-launch-card { position:relative; overflow:hidden; }
    .guide-launch-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 12% 20%, rgba(59,130,246,0.18), transparent 34%), radial-gradient(circle at 82% 10%, rgba(168,85,247,0.16), transparent 36%); pointer-events:none; }
    .guide-device-card { padding:14px; border-radius:18px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.08); transition:all .22s ease; display:flex; align-items:center; gap:12px; text-align:left; }
    .guide-device-card:hover { transform:translateY(-1px); background:rgba(255,255,255,0.075); border-color:rgba(96,165,250,0.35); }
    .guide-device-icon { width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
    .guide-device-title { font-size:12px; font-weight:900; color:white; line-height:1.1; }
    .guide-device-subtitle { font-size:9px; font-weight:700; color:#9ca3af; margin-top:3px; }
    .guide-panel { background:rgba(0,0,0,0.30); border:1px solid rgba(255,255,255,0.08); border-radius:22px; padding:20px; min-height:170px; }
    .guide-highlight { background:rgba(59,130,246,0.10); border:1px solid rgba(59,130,246,0.18); border-radius:16px; padding:14px; margin-bottom:16px; }
    .guide-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#cbd5e1; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
    @media (max-width: 640px) { .profile-card { align-items:flex-start; } .connected-badge { padding:6px 9px; font-size:9px; } .guide-device-card { padding:12px; } }

    @media (min-width: 1024px) {
      .hero-card { border-radius:26px; }
      .hero-card .hero-player-content { min-height:124px; padding:24px 28px; flex-direction:row; text-align:left; justify-content:space-between; }
      .hero-card .hero-player-main { display:flex; align-items:center; gap:18px; }
      .hero-card .hero-player-icon { width:58px; height:58px; margin-bottom:0; }
      .hero-card .hero-player-icon i { font-size:22px; }
      .hero-card .hero-player-title { font-size:20px; margin-bottom:3px; }
      .hero-card .hero-player-subtitle { margin-bottom:0; }
      .hero-player-cta { display:inline-flex; }
      nav[aria-label="Navigation principale"] { display:none; }
    }

  

    /* Premium referral / parrainage icons */
    .referral-icon-premium {
      width: 58px; height: 58px; border-radius: 22px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; flex-shrink: 0; color: #fff;
      background: radial-gradient(circle at 28% 18%, rgba(255,255,255,0.32), transparent 34%), radial-gradient(circle at 70% 85%, rgba(96,165,250,0.35), transparent 42%), linear-gradient(145deg, rgba(124,58,237,0.98), rgba(59,130,246,0.82));
      border: 1px solid rgba(255,255,255,0.20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px rgba(124,58,237,0.28), 0 0 26px rgba(59,130,246,0.16);
    }
    .referral-icon-premium::after { content: ""; position: absolute; inset: -45%; background: conic-gradient(from 125deg, transparent, rgba(255,255,255,0.18), transparent 32%); transform: rotate(18deg); opacity: .78; }
    .referral-icon-premium svg { width: 28px; height: 28px; stroke-width: 2.1; position: relative; z-index: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,0.18)); }
    .referral-link-box {
      background: rgba(0,0,0,0.46); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 8px;
      display: flex; align-items: center; position: relative; z-index: 10; margin-bottom: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.18);
    }
    .referral-copy-btn {
      width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
      background: radial-gradient(circle at 28% 18%, rgba(255,255,255,0.22), transparent 34%), linear-gradient(145deg, rgba(59,130,246,0.95), rgba(37,99,235,0.76));
      border: 1px solid rgba(147,197,253,0.35);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 28px rgba(37,99,235,0.30);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .referral-copy-btn:hover { transform: translateY(-1px) scale(1.03); border-color: rgba(191,219,254,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 18px 34px rgba(37,99,235,0.42); }
    .referral-copy-btn svg { width: 23px; height: 23px; stroke-width: 2.15; }
    .referral-progress-card { background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 18px; text-align: center; margin-top: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 12px 28px rgba(0,0,0,0.14); }
    .referral-friends-icon { width: 30px; height: 30px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #60a5fa; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,0.16), transparent 38%), linear-gradient(145deg, rgba(59,130,246,0.18), rgba(147,51,234,0.08)); border: 1px solid rgba(96,165,250,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 20px rgba(37,99,235,0.10); }
    .referral-friends-icon svg { width: 17px; height: 17px; stroke-width: 2.25; }
    .referral-progress-track { width: 100%; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }
    .referral-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #22c55e); box-shadow: 0 0 18px rgba(59,130,246,0.35); transition: width 0.85s ease; }

  

/* =========================================================
   CLOUDY PREMIUM POLISH UPDATE - logo + refined premium UI
   Ajout volontaire sans suppression pour conserver l'intégrité du fichier.
   ========================================================= */
img[src*="cloudy.png"], img[src*="cloudyfavi.png"] {
  image-rendering: auto;
}
.cloudy-logo-premium, nav img[src*="cloudy.png"], footer img[src*="cloudy.png"], a img[src*="cloudy.png"] {
  filter: drop-shadow(0 0 16px rgba(96,165,250,.22)) drop-shadow(0 10px 24px rgba(0,0,0,.24));
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}
.cloudy-logo-premium:hover, nav img[src*="cloudy.png"]:hover, footer img[src*="cloudy.png"]:hover, a img[src*="cloudy.png"]:hover {
  transform: translateY(-1px) scale(1.015);
  filter: drop-shadow(0 0 24px rgba(96,165,250,.34)) drop-shadow(0 14px 28px rgba(0,0,0,.32));
}
.ios-card, .glass-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.22);
}
.ios-card:hover, .glass-card:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(15,23,42,.32), 0 0 34px rgba(59,130,246,.08);
}
.btn-ios-primary {
  position: relative;
  overflow: hidden;
}
.btn-ios-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.20) 38%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
.btn-ios-primary:hover::before { transform: translateX(130%); }
.aurora-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,.055), transparent 38%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  pointer-events: none;
}
#binance-pay-payment-container, #payment-reminder, .order-timeline-card, .guide-launch-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.22);
}
@media (max-width: 640px) {
  nav img[src*="cloudy.png"], footer img[src*="cloudy.png"], a img[src*="cloudy.png"] { max-height: 46px; }
  .ios-card, .glass-card { border-radius: 22px; }
}



/* =========================================================
   CLOUDY CLIENT DISPLAY FIX v2 - dashboard mobile patch
   Ajout sans suppression pour conserver la taille du fichier.
   Corrige : header vide, cartes trop grandes, icônes sombres,
   surcharge visuelle, skeleton trop imposant et espace blanc.
   ========================================================= */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  background: #040914 !important;
}

.aurora-blob {
  opacity: .14 !important;
  filter: blur(150px) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,211,238,.10), transparent 35%),
    radial-gradient(circle at 10% 22%, rgba(59,130,246,.08), transparent 36%),
    radial-gradient(circle at 90% 48%, rgba(139,92,246,.07), transparent 38%),
    #040914;
}

.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel {
  background: rgba(10, 16, 32, .45) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(0,0,0,.22) !important;
}

.icon-premium {
  background: rgba(10,16,32,.70) !important;
  border-color: rgba(148,163,184,.16) !important;
  color: #dbeafe !important;
}

.icon-premium svg,
.icon-premium i {
  opacity: 1 !important;
  visibility: visible !important;
}

.premium-avatar-shell {
  display: flex !important;
}

.skeleton {
  min-height: 18px !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  [data-aos],
  .aos-init,
  .aos-animate,
  .animate-in {
    opacity: 1 !important;
    transform: none !important;
  }

  main {
    max-width: 100% !important;
    padding: 18px 14px 36px !important;
  }

  main > .flex.flex-col.gap-6.mb-8 {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  main > .flex.flex-col.gap-6.mb-8 > .flex.justify-between.items-center {
    padding: 4px 2px !important;
    min-height: 54px !important;
  }

  a[href="../index.html"] img[src*="cloudy.png"] {
    height: 44px !important;
    max-width: 118px !important;
    object-fit: contain !important;
  }

  .icon-premium {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
  }

  .profile-card {
    display: flex !important;
    align-items: center !important;
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .profile-identity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .premium-avatar-shell {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    flex: 0 0 auto !important;
  }

  .premium-avatar-inner {
    border-radius: 16px !important;
  }

  .premium-avatar-edit {
    width: 22px !important;
    height: 22px !important;
  }

  #user-email {
    max-width: 180px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  #user-email.skeleton {
    width: 150px !important;
    height: 18px !important;
  }

  .connected-badge {
    padding: 6px 9px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
    flex: 0 0 auto !important;
  }

  .guide-launch-card {
    padding: 14px !important;
    border-radius: 22px !important;
    margin-bottom: 14px !important;
  }

  a[aria-label="Ouvrir Assistant Cloudy"] {
    padding: 14px !important;
    border-radius: 22px !important;
    margin-bottom: 14px !important;
  }

  a[aria-label="Ouvrir Assistant Cloudy"] .w-12.h-12 {
    width: 46px !important;
    height: 46px !important;
  }

  .flex.items-center.gap-4.mb-5 {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  #search-input {
    min-height: 52px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 15px !important;
  }

  a[href="../index.html?type=new#offres"] {
    height: 52px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: 11px !important;
  }

  .mb-4.lg\:mb-3.px-1 h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
  }

  .section-title-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 14px !important;
    margin-right: 8px !important;
  }

  button[onclick="window.location.reload()"] {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
  }

  #slider-container {
    margin-bottom: 16px !important;
  }

  #abos-list {
    min-height: 160px !important;
    gap: 12px !important;
  }

  #abos-list > .glass-card,
  .abo-item {
    min-height: 160px !important;
    border-radius: 24px !important;
  }

  #abos-list > .skeleton {
    height: 170px !important;
  }

  .hero-card {
    min-height: 132px !important;
    border-radius: 24px !important;
    margin-bottom: 16px !important;
  }

  .hero-player-content {
    min-height: 132px !important;
    padding: 20px !important;
  }

  .hero-player-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 12px !important;
  }

  #applications {
    margin-bottom: 22px !important;
  }

  #applications .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #applications .app-card {
    min-height: 142px !important;
    padding: 14px 8px !important;
  }

  #applications .app-icon-box {
    width: 58px !important;
    height: 58px !important;
  }

  #applications img {
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
  }

  a[href*="t.me"].glass-card {
    padding: 16px !important;
    border-radius: 22px !important;
    margin-bottom: 22px !important;
  }

  .grid.grid-cols-2.md\:grid-cols-4.gap-4 {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .tool-card-premium {
    padding: 15px !important;
    min-height: 126px !important;
  }

  .tool-premium-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  nav[aria-label="Navigation principale"] {
    padding: 12px 18px !important;
    gap: 24px !important;
    border-radius: 22px !important;
  }

  .modal-content {
    max-height: 88vh !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 420px) {
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #user-email {
    max-width: 150px !important;
  }

  .connected-badge {
    font-size: 8px !important;
  }

  a[href="../index.html?type=new#offres"] {
    max-width: 142px !important;
  }
}



/* =========================================================
   CLOUDY COMPLETE REDESIGN 2026 - unified background, font & icons
   Ajouté par ChatGPT : conserve les IDs/classes JS existants.
   ========================================================= */
:root {
  --cloudy-bg: #040914;
  --cloudy-bg-2: #0a1428;
  --cloudy-surface: rgba(10, 16, 32, .45);
  --cloudy-surface-strong: rgba(10, 16, 32, .65);
  --cloudy-border: rgba(174, 212, 255, .06);
  --cloudy-border-strong: rgba(118, 184, 255, .15);
  --cloudy-text: #f7fbff;
  --cloudy-muted: #9db0c8;
  --cloudy-blue: #0ea5e9;
  --cloudy-violet: #8b5cf6;
  --cloudy-mint: #10b981;
  --cloudy-coral: #fb7185;
  --cloudy-gold: #fbbf24;
  --cloudy-radius: 26px;
  --cloudy-shadow: 0 24px 70px rgba(1, 8, 20, .42);
}

html, body {
  background: var(--cloudy-bg) !important;
  color: var(--cloudy-text) !important;
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.012em;
}

body::before,
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body::before {
  z-index: -4 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(14,165,233,.22), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(139,92,246,.20), transparent 32%),
    radial-gradient(circle at 48% 92%, rgba(16,189,129,.12), transparent 38%),
    linear-gradient(135deg, #040914 0%, #0a1428 48%, #040914 100%) !important;
}

body::after {
  z-index: -3 !important;
  opacity: .52 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 42%) !important;
  background-size: 58px 58px, 58px 58px, auto !important;
  mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}

.aurora-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(14,165,233,.16), transparent 32%),
    radial-gradient(circle at 80% 24%, rgba(139,92,246,.16), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(16,189,129,.10), transparent 42%),
    var(--cloudy-bg) !important;
}

.aurora-bg::after { display: none !important; }
.aurora-blob { opacity: .18 !important; filter: blur(170px) !important; mix-blend-mode: screen; }
.blob-1 { background: #0ea5e9 !important; }
.blob-2 { background: #8b5cf6 !important; }
.blob-3 { background: #10b981 !important; }

h1, h2, h3, h4,
.hero-player-title,
#order-type,
#order-price,
.section-title-icon + span {
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif !important;
  letter-spacing: -0.04em !important;
}

p, a, button, input, textarea, label, summary, span, div {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}

.ios-nav,
nav.fixed,
.mobile-menu,
nav[aria-label="Navigation principale"] {
  background: rgba(3, 7, 18, .78) !important;
  border-color: var(--cloudy-border) !important;
  box-shadow: 0 18px 50px rgba(1, 8, 20, .24) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

.ios-card,
.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel,
.order-timeline-card,
#binance-pay-payment-container,
#payment-reminder,
#order-empty-state,
.modal-content,
.video-modal-content,
details,
#order-summary,
#no-abo,
#activation-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.005)),
    var(--cloudy-surface) !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: var(--cloudy-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--cloudy-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

.ios-card:hover,
.glass-card:hover,
.profile-card:hover,
.guide-launch-card:hover,
.tool-card-premium:hover,
.app-card:hover,
details:hover {
  border-color: var(--cloudy-border-strong) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 86px rgba(1,8,20,.48), 0 0 0 1px rgba(14,165,233,.08) !important;
}

button, a, .ios-card, .glass-card, details, input {
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease, color .24s ease !important;
}

.btn-ios-primary,
.bg-blue-600,
button[type="submit"],
#submit-btn,
#btn-confirm-reward,
#btn-claim-reward,
a[href="../index.html?type=new#offres"],
#accueil button:first-child {
  background: linear-gradient(135deg, var(--cloudy-blue), var(--cloudy-violet) 58%, var(--cloudy-mint)) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px rgba(14,165,233,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
  font-weight: 900 !important;
}

.btn-ios-primary:hover,
.bg-blue-600:hover,
button[type="submit"]:hover,
#submit-btn:hover,
a[href="../index.html?type=new#offres"]:hover {
  transform: translateY(-2px) scale(1.01) !important;
  filter: saturate(1.12) brightness(1.04);
}

.btn-glass,
.btn-glass-white,
.btn-ios-secondary,
.segmented-control,
.guide-chip,
.qty-pill,
.connected-badge,
#abo-counter,
#flash-banner,
.step-dot,
.order-step-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid var(--cloudy-border) !important;
  color: #dff6ff !important;
  flex-shrink: 0 !important;
}

.mg-flag {
  display: inline-block !important;
  width: 18px !important;
  height: 12px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) !important;
  background:
    linear-gradient(to right,#fff 0 33.33%,transparent 33.33%),
    linear-gradient(to bottom,#fc3d32 0 50%,#007e3a 50% 100%) !important;
  flex-shrink: 0 !important;
}

.country-code-box { display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; width:118px; flex-shrink:0; }
.copy-pill {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid var(--cloudy-border) !important;
  color: #dff6ff !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.ios-input,
.input-dark,
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  background: rgba(5, 12, 24, .62) !important;
  border: 1px solid rgba(174,212,255,.08) !important;
  color: var(--cloudy-text) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.ios-input:focus,
.input-dark:focus,
input:focus,
textarea:focus {
  border-color: rgba(14,165,233,.72) !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.text-blue-400, .text-blue-300, .text-sky-400 { color: var(--cloudy-blue) !important; }
.text-purple-400, .text-purple-300 { color: var(--cloudy-violet) !important; }
.text-green-400, .text-green-300 { color: var(--cloudy-mint) !important; }
.text-gray-400, .text-gray-500, .text-gray-300 { color: var(--cloudy-muted) !important; }
.bg-white\/5, .bg-white\/10 { background-color: rgba(255,255,255,.065) !important; }
.border-white\/5, .border-white\/10, .border-white\/20 { border-color: var(--cloudy-border) !important; }

.icon-premium,
.icon-glass-square,
.tool-premium-icon,
.section-title-icon,
.app-icon-box,
.guide-device-icon,
.referral-friends-icon,
.step-dot,
.order-step-dot,
.w-14.h-14,
.w-12.h-12,
.w-10.h-10,
.w-20.h-20 {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg, rgba(14,165,233,.18), rgba(139,92,246,.13)) !important;
  border: 1px solid rgba(174,212,255,.18) !important;
  color: #e0f7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 32px rgba(1,8,20,.26) !important;
}

.icon-premium,
.icon-glass-square,
.section-title-icon,
.tool-premium-icon,
.guide-device-icon {
  border-radius: 18px !important;
}

.icon-premium svg,
.icon-premium i,
.icon-glass-square svg,
.icon-glass-square i,
.tool-premium-icon svg,
.tool-premium-icon i,
.section-title-icon svg,
.section-title-icon i,
.guide-device-icon svg,
.guide-device-icon i,
[data-lucide],
.fas, .fab, .far {
  filter: drop-shadow(0 0 10px rgba(14,165,233,.22));
}

.icon-premium:hover,
.icon-glass-square:hover,
.tool-premium-icon:hover,
.guide-device-icon:hover {
  color: white !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, rgba(14,165,233,.28), rgba(139,92,246,.20)) !important;
}

img[src*="cloudy.png"],
img[src*="cloudyfavi.png"] {
  filter: drop-shadow(0 0 22px rgba(14,165,233,.26)) drop-shadow(0 12px 28px rgba(1,8,20,.34)) !important;
}

.hero-card {
  border: 1px solid var(--cloudy-border) !important;
  border-radius: 34px !important;
  background: var(--cloudy-surface-strong) !important;
  box-shadow: var(--cloudy-shadow) !important;
}
.hero-card::before {
  filter: saturate(.85) brightness(.42) blur(0px) !important;
  opacity: .92;
}
.hero-card::after {
  background: linear-gradient(135deg, rgba(3,7,18,.94), rgba(3,7,18,.54), rgba(14,165,233,.12)) !important;
}

#accueil h1 span,
.text-transparent.bg-clip-text,
.hero-player-title,
#order-price,
#payment-usdt-amount {
  background: linear-gradient(90deg, #e0f7ff, var(--cloudy-blue), var(--cloudy-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.app-card,
#applications a {
  border-radius: 28px !important;
}

.app-icon-box,
#applications a > div {
  border-radius: 24px !important;
}

.toast {
  background: rgba(3,7,18,.94) !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 56px rgba(1,8,20,.46) !important;
}

.modal-overlay { background: rgba(2, 8, 18, .78) !important; }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(14,165,233,.12), rgba(255,255,255,.04)) !important;
  background-size: 220% 100% !important;
}

@media (max-width: 768px) {
  :root { --cloudy-radius: 22px; }
  body::after { background-size: 44px 44px, 44px 44px, auto !important; }
  section, main { padding-left: 14px !important; padding-right: 14px !important; }
  #accueil h1 { font-size: clamp(42px, 12vw, 58px) !important; }
  .ios-card:hover, .glass-card:hover, .profile-card:hover, details:hover { transform: none !important; }
}

/* =========================================================
   CLOUDY REDESIGN v2 - zoom -10%, animated backgrounds, multi-visual variants
   ========================================================= */
:root {
  --cloudy-zoom: 0.945;
  --cloudy-bg-speed: 20s;
  --cloudy-grid-speed: 31s;
  --cloudy-orb-a: rgba(14,165,233,.30);
  --cloudy-orb-b: rgba(139,92,246,.26);
  --cloudy-orb-c: rgba(16,189,129,.18);
  --cloudy-orb-d: rgba(244,63,94,.14);
}

@supports (zoom: 0.945) {
  body { zoom: 0.945 !important; }
}
@supports not (zoom: 0.9) {
  html { font-size: 90% !important; }
  body { transform-origin: top center; }
}

html {
  background: #040914 !important;
  scroll-behavior: smooth;
}

body {
  position: relative !important;
  min-height: 100vh !important;
  background: #040914 !important;
}

body::before {
  animation: cloudyGradientDrift var(--cloudy-bg-speed) ease-in-out infinite alternate !important;
  background-size: 130% 130%, 120% 120%, 140% 140%, 100% 100% !important;
}

body::after {
  animation: cloudyGridDrift var(--cloudy-grid-speed) linear infinite !important;
}

.aurora-bg {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--mx, 18%) var(--my, 18%), var(--cloudy-orb-a), transparent 34%),
    radial-gradient(circle at 82% 20%, var(--cloudy-orb-b), transparent 36%),
    radial-gradient(circle at 48% 86%, var(--cloudy-orb-c), transparent 40%),
    radial-gradient(circle at 90% 78%, var(--cloudy-orb-d), transparent 36%),
    linear-gradient(135deg, #040914, #0a1428 52%, #040914) !important;
  animation: cloudyAuroraHue 22s ease-in-out infinite alternate !important;
}

.aurora-bg::before,
.aurora-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: -20% !important;
  pointer-events: none !important;
}

.aurora-bg::before {
  display: block !important;
  background:
    conic-gradient(from 120deg at 50% 50%, transparent 0deg, rgba(14,165,233,.16) 70deg, transparent 130deg, rgba(139,92,246,.14) 210deg, transparent 290deg),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,.06), transparent 38%) !important;
  filter: blur(55px) saturate(1.18) !important;
  opacity: .75 !important;
  animation: cloudySpin 35s linear infinite !important;
}

.aurora-bg::after {
  display: block !important;
  background-image:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.05) 48%, transparent 56%),
    radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1.6px) !important;
  background-size: 180px 180px, 34px 34px !important;
  opacity: .32 !important;
  mix-blend-mode: screen !important;
  animation: cloudyParticles 26s linear infinite !important;
  mask-image: linear-gradient(to bottom, black 0 72%, transparent 100%);
}

.aurora-blob {
  animation: cloudyBlobFloat 10s ease-in-out infinite alternate !important;
  will-change: transform, opacity, filter;
}
.blob-1 { animation-duration: 12s !important; }
.blob-2 { animation-duration: 14s !important; animation-delay: -5s !important; }
.blob-3 { animation-duration: 11s !important; animation-delay: -2s !important; }

/* Plusieurs styles visuels selon les blocs : le site reste cohérent, mais moins répétitif. */
.ios-card:nth-of-type(3n+1),
.glass-card:nth-of-type(3n+1),
#pricing-grid > div:nth-child(3n+1),
#applications a:nth-child(3n+1) {
  background:
    radial-gradient(circle at 18% 0%, rgba(14,165,233,.13), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.005)),
    rgba(10,16,32,.45) !important;
}

.ios-card:nth-of-type(3n+2),
.glass-card:nth-of-type(3n+2),
#pricing-grid > div:nth-child(3n+2),
#applications a:nth-child(3n+2) {
  background:
    radial-gradient(circle at 86% 12%, rgba(139,92,246,.15), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.005)),
    rgba(10,16,32,.45) !important;
}

.ios-card:nth-of-type(3n+3),
.glass-card:nth-of-type(3n+3),
#pricing-grid > div:nth-child(3n+3),
#applications a:nth-child(3n+3) {
  background:
    radial-gradient(circle at 50% 100%, rgba(16,189,129,.13), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.005)),
    rgba(10,16,32,.45) !important;
}

.section-title-icon,
.tool-premium-icon,
.icon-glass-square,
.guide-device-icon,
.app-icon-box,
.icon-premium {
  position: relative !important;
  overflow: hidden !important;
}

.section-title-icon::after,
.tool-premium-icon::after,
.icon-glass-square::after,
.guide-device-icon::after,
.app-icon-box::after,
.icon-premium::after {
  content: "" !important;
  position: absolute !important;
  inset: -55% !important;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.22) 48%, transparent 68%) !important;
  transform: translateX(-70%) rotate(8deg);
  opacity: .55 !important;
  animation: cloudyIconShine 6.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

#applications a:nth-child(2n) .app-icon-box,
.tool-card-premium:nth-child(2n) .tool-premium-icon,
.guide-device-card:nth-child(2n) .guide-device-icon {
  border-radius: 999px !important;
}

#applications a:nth-child(2n+1) .app-icon-box,
.tool-card-premium:nth-child(2n+1) .tool-premium-icon,
.guide-device-card:nth-child(2n+1) .guide-device-icon {
  border-radius: 20px !important;
  transform: rotate(-1deg);
}

.btn-ios-primary,
.bg-blue-600,
button[type="submit"],
#submit-btn,
#btn-confirm-reward,
#btn-claim-reward,
a[href="../index.html?type=new#offres"] {
  background-size: 180% 180% !important;
  animation: cloudyButtonFlow 8s ease-in-out infinite alternate !important;
}

.hero-card::after {
  animation: cloudyHeroGlow 11s ease-in-out infinite alternate !important;
}

@keyframes cloudyGradientDrift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; filter: hue-rotate(0deg); }
  100% { background-position: 18% 12%, 82% 18%, 42% 88%, 0% 0%; filter: hue-rotate(8deg); }
}
@keyframes cloudyGridDrift {
  0% { background-position: 0 0, 0 0, 50% 0; }
  100% { background-position: 58px 58px, 58px 58px, 50% 0; }
}
@keyframes cloudyAuroraHue {
  0% { filter: saturate(1) hue-rotate(0deg); }
  100% { filter: saturate(1.15) hue-rotate(10deg); }
}
@keyframes cloudySpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.08); }
}
@keyframes cloudyParticles {
  from { transform: translate3d(0,0,0); background-position: 0 0, 0 0; }
  to { transform: translate3d(-70px, 50px, 0); background-position: 180px 180px, 34px 34px; }
}
@keyframes cloudyBlobFloat {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .14; }
  50% { transform: translate3d(42px,-28px,0) scale(1.14); opacity: .20; }
  100% { transform: translate3d(-34px,58px,0) scale(1.08); opacity: .16; }
}
@keyframes cloudyIconShine {
  0%, 55% { transform: translateX(-75%) rotate(8deg); opacity: 0; }
  72% { opacity: .55; }
  100% { transform: translateX(75%) rotate(8deg); opacity: 0; }
}
@keyframes cloudyButtonFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes cloudyHeroGlow {
  from { opacity: .92; filter: hue-rotate(0deg); }
  to { opacity: 1; filter: hue-rotate(14deg) saturate(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .aurora-bg,
  .aurora-bg::before,
  .aurora-bg::after,
  .aurora-blob,
  .section-title-icon::after,
  .tool-premium-icon::after,
  .icon-glass-square::after,
  .guide-device-icon::after,
  .app-icon-box::after,
  .icon-premium::after,
  .btn-ios-primary,
  .bg-blue-600,
  button[type="submit"],
  #submit-btn,
  #btn-confirm-reward,
  #btn-claim-reward,
  a[href="../index.html?type=new#offres"],
  .hero-card::after {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  :root { --cloudy-bg-speed: 26s; --cloudy-grid-speed: 39s; }
  body { min-height: 100vh !important; }
  .aurora-bg::after { opacity: .22 !important; }
}


/* =========================================================
   CLOUDY MOBILE STABILITY PATCH 2026-05-09
   Correctif final : suppression du zoom mobile, réduction des
   animations lourdes et verrouillage anti-débordement horizontal.
   ========================================================= */
:root {
  --cloudy-zoom: 0.945 !important;
}

@supports (zoom: 0.945) {
  body { zoom: 0.945 !important; }
}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  min-height: 100vh !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    zoom: 0.945 !important;
    min-height: 100vh !important;
  }

  body {
    position: relative !important;
  }

  main,
  section,
  header,
  footer,
  nav {
    max-width: 100% !important;
  }

  .aurora-bg,
  .aurora-bg::before,
  .aurora-bg::after,
  body::before,
  body::after,
  .aurora-blob,
  .section-title-icon::after,
  .tool-premium-icon::after,
  .icon-glass-square::after,
  .guide-device-icon::after,
  .app-icon-box::after,
  .icon-premium::after,
  .btn-ios-primary,
  .bg-blue-600,
  button[type="submit"],
  #submit-btn,
  #btn-confirm-reward,
  #btn-claim-reward,
  a[href="../index.html?type=new#offres"],
  .hero-card::after {
    animation: none !important;
  }

  .aurora-blob {
    opacity: .10 !important;
    filter: blur(110px) !important;
    transform: none !important;
  }

  .aurora-bg::before,
  .aurora-bg::after {
    opacity: .18 !important;
  }

  .ios-card:hover,
  .glass-card:hover,
  .profile-card:hover,
  .guide-launch-card:hover,
  .tool-card-premium:hover,
  .app-card:hover,
  details:hover,
  .btn-ios-primary:hover,
  .bg-blue-600:hover,
  button[type="submit"]:hover,
  #submit-btn:hover,
  a[href="../index.html?type=new#offres"]:hover {
    transform: none !important;
  }

  .modal-overlay {
    padding: 14px !important;
  }

  .modal-content,
  .video-modal-content {
    width: min(100%, 520px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: 88vh !important;
  }

  #toast-container {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .toast {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Empêche les textes longs, identifiants de paiement, e-mails et TXID de casser la largeur mobile. */
  .payment-address,
  #payment-address,
  #user-email,
  #transaction,
  input,
  textarea,
  p,
  span,
  a {
    overflow-wrap: anywhere;
  }
}



/* =========================================================
   CLOUDY LIGHT ANIMATION PACK - fond animé léger et mobile-safe
   Ajout : animation douce sans surcharge GPU/CPU.
   ========================================================= */
:root {
  --cloudy-light-speed: 33s;
  --cloudy-light-mobile-speed: 46s;
}

html {
  background: #040914 !important;
}

body::before {
  background-size: 135% 135%, 125% 125%, 140% 140%, 100% 100% !important;
  animation: cloudyLightAurora var(--cloudy-light-speed) ease-in-out infinite alternate !important;
  will-change: background-position, opacity;
}

body::after {
  opacity: .26 !important;
  animation: cloudyLightGrid 51s linear infinite !important;
  will-change: background-position;
}

.aurora-bg {
  animation: cloudyLightHue 42s ease-in-out infinite alternate !important;
  will-change: filter;
}

.aurora-blob {
  opacity: .13 !important;
  filter: blur(135px) !important;
  animation: cloudyLightBlob 20s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

.blob-1 { animation-duration: 22s !important; }
.blob-2 { animation-duration: 26s !important; animation-delay: -8s !important; }
.blob-3 { animation-duration: 24s !important; animation-delay: -5s !important; }

.ios-card,
.glass-card,
.profile-card,
.guide-launch-card,
.order-timeline-card,
#order-summary,
#binance-pay-payment-container,
#payment-reminder,
#applications a,
#pricing-grid > div {
  position: relative;
  overflow: hidden;
}

.ios-card::before,
.glass-card::before,
.profile-card::before,
.guide-launch-card::before,
.order-timeline-card::before,
#order-summary::before,
#binance-pay-payment-container::before,
#payment-reminder::before,
#applications a::before,
#pricing-grid > div::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.13), transparent 34%);
  transition: opacity .28s ease;
  z-index: 0;
}

.ios-card:hover::before,
.glass-card:hover::before,
.profile-card:hover::before,
.guide-launch-card:hover::before,
.order-timeline-card:hover::before,
#order-summary:hover::before,
#binance-pay-payment-container:hover::before,
#payment-reminder:hover::before,
#applications a:hover::before,
#pricing-grid > div:hover::before {
  opacity: .55;
}

.ios-card > *,
.glass-card > *,
.profile-card > *,
.guide-launch-card > *,
.order-timeline-card > *,
#order-summary > *,
#binance-pay-payment-container > *,
#payment-reminder > *,
#applications a > *,
#pricing-grid > div > * {
  position: relative;
  z-index: 1;
}

.btn-ios-primary,
.bg-blue-600,
button[type="submit"],
#submit-btn,
#btn-confirm-reward,
#btn-claim-reward,
a[href="../index.html?type=new#offres"] {
  background-size: 180% 180% !important;
  animation: cloudyLightButton 10s ease-in-out infinite alternate !important;
}

@keyframes cloudyLightAurora {
  0% {
    background-position: 0% 0%, 100% 12%, 46% 100%, 0% 0%;
    opacity: 1;
  }
  100% {
    background-position: 16% 10%, 84% 18%, 54% 88%, 0% 0%;
    opacity: .94;
  }
}

@keyframes cloudyLightGrid {
  0% { background-position: 0 0, 0 0, 50% 0; }
  100% { background-position: 58px 58px, 58px 58px, 50% 0; }
}

@keyframes cloudyLightHue {
  0% { filter: saturate(1) hue-rotate(0deg); }
  100% { filter: saturate(1.08) hue-rotate(7deg); }
}

@keyframes cloudyLightBlob {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .10; }
  50% { transform: translate3d(22px,-16px,0) scale(1.05); opacity: .15; }
  100% { transform: translate3d(-18px,28px,0) scale(1.03); opacity: .12; }
}

@keyframes cloudyLightButton {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 768px) {
  body::before {
    animation: cloudyLightAurora var(--cloudy-light-mobile-speed) ease-in-out infinite alternate !important;
  }

  body::after {
    animation: none !important;
    opacity: .12 !important;
  }

  .aurora-bg {
    animation: cloudyLightHue 52s ease-in-out infinite alternate !important;
  }

  .aurora-blob {
    animation: none !important;
    opacity: .075 !important;
    filter: blur(115px) !important;
  }

  .ios-card::before,
  .glass-card::before,
  .profile-card::before,
  .guide-launch-card::before,
  .order-timeline-card::before,
  #order-summary::before,
  #binance-pay-payment-container::before,
  #payment-reminder::before,
  #applications a::before,
  #pricing-grid > div::before {
    display: none !important;
  }

  .btn-ios-primary,
  .bg-blue-600,
  button[type="submit"],
  #submit-btn,
  #btn-confirm-reward,
  #btn-claim-reward,
  a[href="../index.html?type=new#offres"] {
    animation-duration: 14s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .aurora-bg,
  .aurora-blob,
  .btn-ios-primary,
  .bg-blue-600,
  button[type="submit"],
  #submit-btn,
  #btn-confirm-reward,
  #btn-claim-reward,
  a[href="../index.html?type=new#offres"] {
    animation: none !important;
  }
}
 /* ====== CORRECTIF PERFORMANCE MOBILE (VERSION DÉGRADÉ ANIMÉ) ====== */
@media (max-width: 768px) {
  /* On cache les taches floutées qui font ramer */
  .aurora-blob {
    display: none !important;
    animation: none !important;
  }

  /* On applique une animation de dégradé simple et très légère */
  body {
    background: linear-gradient(135deg, #040914, #0f1c3f, #040914) !important;
    background-size: 200% 200% !important;
    animation: safeGradientMove 15s ease infinite !important;
  }

  @keyframes safeGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* On retire le flou transparent des cartes pour alléger le processeur */
  .ios-card, .glass-card, .profile-card, .guide-launch-card,
  .order-timeline-card, #order-summary, #binance-pay-payment-container,
  #payment-reminder, .modal-content, .video-modal-content, details,
  #order-empty-state, #activation-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 20, 40, 0.95) !important; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.6) !important;
  }

  /* On stoppe l'animation des boutons */
  .btn-ios-primary, 
  .bg-blue-600, 
  button[type="submit"], 
  #submit-btn {
    animation: none !important;
    background-size: auto !important;
  }
}


/* =========================================================
   CLOUDY ICON MOTION OFF PATCH
   Désactive uniquement les animations et mouvements des icônes.
   ========================================================= */
.icon-premium,
.icon-glass-square,
.tool-premium-icon,
.section-title-icon,
.app-icon-box,
.guide-device-icon,
.referral-icon-premium,
.referral-copy-btn,
.referral-friends-icon,
.hero-player-icon,
.step-dot,
.order-step-dot,
.premium-avatar-edit,
.w-14.h-14,
.w-12.h-12,
.w-10.h-10,
.w-20.h-20,
.whatsapp-float,
#menuBtn,
#menuBtn i,
[data-lucide],
.fas,
.fab,
.far,
.ps-lucide {
  animation: none !important;
  transition: none !important;
}

.icon-premium::before,
.icon-premium::after,
.icon-glass-square::before,
.icon-glass-square::after,
.tool-premium-icon::before,
.tool-premium-icon::after,
.section-title-icon::before,
.section-title-icon::after,
.app-icon-box::before,
.app-icon-box::after,
.guide-device-icon::before,
.guide-device-icon::after,
.referral-icon-premium::after,
.referral-copy-btn::before,
.referral-copy-btn::after,
.referral-friends-icon::before,
.referral-friends-icon::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.icon-premium:hover,
.icon-premium:hover svg,
.icon-premium:hover i,
.icon-glass-square:hover,
.icon-glass-square:hover svg,
.icon-glass-square:hover i,
.tool-premium-icon:hover,
.tool-premium-icon:hover svg,
.tool-premium-icon:hover i,
.section-title-icon:hover,
.section-title-icon:hover svg,
.section-title-icon:hover i,
.app-card:hover .app-icon-box,
.app-icon-box:hover,
.app-icon-box:hover svg,
.app-icon-box:hover i,
.guide-device-card:hover .guide-device-icon,
.guide-device-icon:hover,
.referral-copy-btn:hover,
.whatsapp-float:hover,
#menuBtn:hover,
#menuBtn:hover i {
  transform: none !important;
}



/* =========================================================
   CLOUDY COMPTE - affichage progressif des identifiants
   ========================================================= */
@keyframes cloudyCredentialReveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes cloudyCredentialGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(0,0,0,.22); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 56px rgba(14,165,233,.10); }
}
.credential-card-reveal {
  opacity: 0;
  animation: cloudyCredentialReveal .72s cubic-bezier(.22,1,.36,1) forwards, cloudyCredentialGlow 3.8s ease-in-out 1.1s 1;
  animation-delay: var(--credential-delay, 180ms), calc(var(--credential-delay, 180ms) + 1.1s);
}
.credentials-panel {
  opacity: 0;
  animation: cloudyCredentialReveal .65s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--credential-delay, 180ms) + 220ms);
}
.credential-row {
  opacity: 0;
  animation: cloudyCredentialReveal .48s cubic-bezier(.22,1,.36,1) forwards;
}
.credential-row:nth-of-type(1) { animation-delay: calc(var(--credential-delay, 180ms) + 360ms); }
.credential-row:nth-of-type(2) { animation-delay: calc(var(--credential-delay, 180ms) + 520ms); }
.credential-row:nth-of-type(3) { animation-delay: calc(var(--credential-delay, 180ms) + 680ms); }
.credentials-loading-card {
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px;
  text-align: left;
  border-color: rgba(59,130,246,.18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(59,130,246,.10), transparent 42%),
    rgba(255,255,255,.035) !important;
}
.credentials-loading-spinner {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #60a5fa;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(96,165,250,.20);
  box-shadow: 0 0 22px rgba(59,130,246,.14);
}
.credentials-loading-spinner svg,
.credentials-loading-spinner i {
  color: #60a5fa !important;
  stroke: #60a5fa !important;
}
.credentials-loading-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.credentials-loading-text {
  margin-top: 5px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 768px) {
  .credential-card-reveal { animation-duration: .58s, 3.2s; }
  .credentials-panel { animation-duration: .52s; }
  .credential-row { animation-duration: .42s; }
  .credentials-loading-card {
    min-height: 150px;
    padding: 22px;
    text-align: center;
    flex-direction: column;
  }
}



/* =========================================================
   CLOUDY PAGE LOADER + CLEAN CART BLOCK PATCH
   Logo loader sur chargement et changements de pages.
   ========================================================= */
#cloudy-page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(14,165,233,.14), transparent 34%),
    #040914;
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility .34s ease;
}
#cloudy-page-loader.cloudy-loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cloudy-loader-logo {
  width: 94px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(14,165,233,.30));
  animation: cloudyLogoLoaderPulse 1.25s ease-in-out infinite;
}
.cloudy-loader-ring {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.10);
  border-top-color: #0ea5e9;
  animation: cloudyLoaderSpin .85s linear infinite;
}
.cloudy-loader-text {
  color: rgba(226,232,240,.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@keyframes cloudyLogoLoaderPulse {
  0%, 100% { transform: scale(1); opacity: .86; }
  50% { transform: scale(1.055); opacity: 1; }
}
@keyframes cloudyLoaderSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
  .cloudy-loader-logo { width: 82px; }
  .cloudy-loader-ring { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloudy-loader-logo,
  .cloudy-loader-ring { animation: none !important; }
}


/* =========================================================
   CLOUDY COMPTE COLOR PATCH - statuts et actions
   ========================================================= */
.connected-badge {
  background: rgba(34,197,94,0.14) !important;
  border-color: rgba(34,197,94,0.36) !important;
  color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,0.12) !important;
}
.connected-badge svg,
.connected-badge i {
  color: #22c55e !important;
  stroke: #22c55e !important;
}
a[href="../index.html?type=new#offres"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  box-shadow: 0 14px 30px rgba(255,255,255,0.10) !important;
}
a[href="../index.html?type=new#offres"] svg,
a[href="../index.html?type=new#offres"] i {
  color: #000000 !important;
  stroke: #000000 !important;
}


/* =========================================================
   CLOUDY COMPTE - COULEURS ICÔNES PREMIUM
   Ajout léger : colore les icônes par fonction sans changer les SVG.
   ========================================================= */

/* Navigation haut */
a[href="../index.html"].icon-premium,
a[href="../index.html"].icon-premium i,
a[href="../index.html"].icon-premium svg {
  color: #60a5fa !important;
}

a[href="../chat.html"].icon-premium,
a[href="../chat.html"].icon-premium i,
a[href="../chat.html"].icon-premium svg,
a[aria-label="Assistant Cloudy"],
a[aria-label="Assistant Cloudy"] i,
a[aria-label="Assistant Cloudy"] svg {
  color: #a78bfa !important;
}

button[onclick*="profileModal"].icon-premium,
button[onclick*="profileModal"].icon-premium i,
button[onclick*="profileModal"].icon-premium svg,
button[aria-label*="profil"],
button[aria-label*="profil"] i,
button[aria-label*="profil"] svg {
  color: #dbeafe !important;
}

/* Statuts et badges */
.connected-badge,
.connected-badge i,
.connected-badge svg {
  color: #4ade80 !important;
}

.connected-badge-dot {
  background: #22c55e !important;
  box-shadow: 0 0 12px rgba(34,197,94,.85) !important;
}

/* Copie / identifiants */
.copy-pill,
.copy-pill i,
.copy-pill svg,
button[onclick*="copy"],
button[onclick*="copy"] i,
button[onclick*="copy"] svg {
  color: #38bdf8 !important;
}

.credential-help i,
.credential-help svg,
.chat-bubble i,
.chat-bubble svg {
  color: #facc15 !important;
}

/* Guide installation : une couleur par appareil */
.guide-device-card:nth-child(1) .guide-device-icon,
.guide-device-card:nth-child(1) .guide-device-icon i,
.guide-device-card:nth-child(1) .guide-device-icon svg {
  color: #22c55e !important;
}

.guide-device-card:nth-child(2) .guide-device-icon,
.guide-device-card:nth-child(2) .guide-device-icon i,
.guide-device-card:nth-child(2) .guide-device-icon svg {
  color: #a78bfa !important;
}

.guide-device-card:nth-child(3) .guide-device-icon,
.guide-device-card:nth-child(3) .guide-device-icon i,
.guide-device-card:nth-child(3) .guide-device-icon svg {
  color: #60a5fa !important;
}

.guide-device-card:nth-child(4) .guide-device-icon,
.guide-device-card:nth-child(4) .guide-device-icon i,
.guide-device-card:nth-child(4) .guide-device-icon svg {
  color: #facc15 !important;
}

/* Sections et outils */
.section-title-icon,
.section-title-icon i,
.section-title-icon svg,
.tool-icon-blue,
.tool-icon-blue i,
.tool-icon-blue svg {
  color: #38bdf8 !important;
}

.tool-icon-green,
.tool-icon-green i,
.tool-icon-green svg {
  color: #4ade80 !important;
}

.tool-icon-violet,
.tool-icon-violet i,
.tool-icon-violet svg,
.referral-icon-premium,
.referral-icon-premium i,
.referral-icon-premium svg,
#btn-gift-header,
#btn-gift-header i,
#btn-gift-header svg {
  color: #c084fc !important;
}

.tool-icon-mint,
.tool-icon-mint i,
.tool-icon-mint svg {
  color: #5eead4 !important;
}

/* Actions importantes */
.hero-player-icon,
.hero-player-icon i,
.hero-player-icon svg,
button[onclick*="vision"],
button[onclick*="vision"] i,
button[onclick*="vision"] svg,
a[onclick*="vision"],
a[onclick*="vision"] i,
a[onclick*="vision"] svg {
  color: #facc15 !important;
}

/* Déconnexion / danger */
button[onclick*="logoutModal"],
button[onclick*="logoutModal"] i,
button[onclick*="logoutModal"] svg,
button[onclick*="confirmLogout"],
button[onclick*="confirmLogout"] i,
button[onclick*="confirmLogout"] svg,
.icon-premium-red,
.icon-premium-red i,
.icon-premium-red svg {
  color: #f87171 !important;
}

/* Avatar edit reste lisible */
.premium-avatar-edit,
.premium-avatar-edit i,
.premium-avatar-edit svg {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .icon-premium svg,
  .icon-premium i,
  .tool-premium-icon svg,
  .tool-premium-icon i,
  .section-title-icon svg,
  .section-title-icon i,
  .guide-device-icon svg,
  .guide-device-icon i {
    filter: none !important;
  }
}

/* =========================================================
   CLOUDY USER TWEAKS — zoom +5% & icônes blanches
   ========================================================= */
html { zoom: 1; }
@supports not (zoom: 1) {
  body { transform: scale(1.045); transform-origin: top center; }
}

/* Play icon Cloudy Player → blanc (override le jaune #facc15) */
.hero-player-icon,
.hero-player-icon i,
.hero-player-icon svg {
  color: #ffffff !important;
}

/* Programme parrainage : icône cadeau + bouton copier → blanc */
.referral-icon-premium,
.referral-icon-premium i,
.referral-icon-premium svg,
.referral-copy-btn,
.referral-copy-btn i,
.referral-copy-btn svg {
  color: #ffffff !important;
}
.referral-icon-premium svg { stroke: #ffffff !important; }
.referral-copy-btn svg { stroke: #ffffff !important; }

/* =========================================================
   CLOUDY SPINNER FIX - compte.html
   Réactive uniquement les loaders/spinners malgré le patch anti-motion.
   ========================================================= */
@keyframes cloudyForceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fa-spin,
.fas.fa-spin,
.far.fa-spin,
.fab.fa-spin,
i.fa-spin,
svg.fa-spin,
.animate-spin,
svg.animate-spin,
[data-lucide].animate-spin,
#refresh-icon.fa-spin,
.cloudy-loader-ring,
button[disabled] .fa-spin,
button[disabled] .animate-spin {
  animation-name: cloudyForceSpin !important;
  animation-duration: .85s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  transform-origin: center center !important;
  transition: none !important;
}

svg.animate-spin,
#refresh-icon.fa-spin {
  display: inline-block !important;
  will-change: transform !important;
}

button:disabled .fa-spin,
button:disabled .animate-spin {
  opacity: 1 !important;
  filter: none !important;
}

#btn-update-wa:disabled,
#btn-confirm-reward:disabled,
#logoutModal button:disabled {
  cursor: wait !important;
  opacity: .78 !important;
}


/* =========================================================
   CLOUDY COMPTE VISUAL FIX - badges et drapeaux
   Corrige le bug où plusieurs badges prenaient le style drapeau Madagascar.
   ========================================================= */
.guide-chip,
.connected-badge,
#abo-counter,
#flash-banner,
.step-dot,
.order-step-dot,
.qty-pill {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  background-image: none !important;
  color: #dff6ff !important;
}

.connected-badge {
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.36) !important;
  color: #22c55e !important;
  white-space: nowrap !important;
}

#abo-counter {
  background: rgba(14,165,233,.10) !important;
  border-color: rgba(14,165,233,.22) !important;
  color: #38bdf8 !important;
}

.guide-chip {
  padding: 6px 10px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.mg-flag {
  display: inline-block !important;
  width: 18px !important;
  height: 12px !important;
  min-width: 18px !important;
  min-height: 12px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(to right,#fff 0 33.33%,transparent 33.33%),
    linear-gradient(to bottom,#fc3d32 0 50%,#007e3a 50% 100%) !important;
  background-image:
    linear-gradient(to right,#fff 0 33.33%,transparent 33.33%),
    linear-gradient(to bottom,#fc3d32 0 50%,#007e3a 50% 100%) !important;
}


/* =========================================================
   CLOUDY COMPTE DISPLAY FIX v4 - recherche + parrainage
   Corrige le chevauchement de l'icône recherche et le grand vide
   dans la carte Programme Parrainage.
   ========================================================= */
#search-input.input-dark,
input#search-input,
#search-input.pl-14 {
  padding-left: 3.65rem !important;
  padding-right: 1.15rem !important;
  line-height: 1.35 !important;
}

#search-input + *,
#search-input::placeholder {
  opacity: .92 !important;
}

#search-input ~ svg,
.relative > svg[data-lucide="search"] {
  left: 1.15rem !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#referral-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 24px !important;
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#referral-card > * {
  position: relative !important;
  z-index: 2 !important;
}

#referral-card .referral-icon-premium {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
}

#referral-card .referral-link-box {
  min-height: 70px !important;
  height: auto !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

#referral-card .referral-progress-card {
  min-height: 0 !important;
  padding: 18px !important;
  margin-top: 12px !important;
}

@media (min-width: 769px) {
  #referral-card {
    padding: 28px !important;
  }
}

@media (max-width: 640px) {
  .flex.items-center.gap-4.mb-5,
  .flex.items-center.gap-4.lg\:mb-4,
  main .flex.items-center.gap-4.mb-5.lg\:mb-4 {
    gap: 10px !important;
  }

  #search-input.input-dark,
  input#search-input,
  #search-input.pl-14 {
    min-height: 50px !important;
    padding-left: 3.35rem !important;
    padding-right: .95rem !important;
    font-size: 14px !important;
  }

  a[href="../index.html?type=new#offres"] {
    height: 50px !important;
    max-width: 138px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
  }

  #referral-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  #referral-card .flex.items-center.gap-4.mb-4 {
    align-items: center !important;
    gap: 12px !important;
  }

  #referral-card .referral-icon-premium {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 18px !important;
  }

  #referral-card h3 {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #referral-card p {
    line-height: 1.45 !important;
  }

  #referral-card .referral-link-box {
    min-height: 64px !important;
    padding: 8px !important;
  }

  #referral-card .referral-copy-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }
}



/* =========================================================
   CLOUDY COMPTE PARRAINAGE FIX v6 - suppression définitive du vide haut
   La carte parrainage n'utilise plus .glass-card pour éviter les conflits.
   ========================================================= */
#referral-card.referral-card-clean,
#referral-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  flex: none !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 24px !important;
  margin-top: 0 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(59,130,246,.30) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(14,165,233,.13), transparent 32%),
    radial-gradient(circle at 50% 95%, rgba(16,185,129,.10), transparent 38%),
    linear-gradient(145deg, rgba(10,16,32,.72), rgba(6,10,22,.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#referral-card::before,
#referral-card::after {
  display: none !important;
  content: none !important;
}

#referral-card > .absolute {
  pointer-events: none !important;
  opacity: .55 !important;
}

#referral-card > .flex.items-center.gap-4.mb-4 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  align-items: center !important;
}

#referral-card > p.text-xs {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.55 !important;
}

#referral-card .referral-link-box {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  min-height: 68px !important;
  height: auto !important;
  padding: 8px !important;
}

#referral-card .referral-progress-card {
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: 16px !important;
}

@media (max-width: 640px) {
  #referral-card.referral-card-clean,
  #referral-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }
  #referral-card .referral-link-box { min-height: 62px !important; }
  #referral-card .referral-copy-btn { width: 50px !important; height: 50px !important; }
}



/* =========================================================
   CLOUDY COMPTE PARRAINAGE FIX v7 - suppression du vide haut
   Les blobs décoratifs du bloc parrainage sont supprimés du HTML.
   ========================================================= */
#referral-card.referral-card-clean,
#referral-card {
  display: block !important;
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#referral-card > .flex.items-center.gap-4.mb-4 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#referral-card .referral-link-box,
#referral-card .referral-progress-card {
  position: relative !important;
  margin-top: 12px !important;
}

@media (max-width: 640px) {
  #referral-card.referral-card-clean,
  #referral-card { padding: 18px !important; }
}


/* =========================================================
   CLOUDY COMPTE v16 - zoom +5% propre + téléphone sans préfixe séparé
   ========================================================= */
:root { --cloudy-zoom: 0.945 !important; }

@supports (zoom: 0.945) {
  html { zoom: 1 !important; }
  body { zoom: 0.945 !important; }
}

@supports not (zoom: 0.945) {
  body {
    transform: scale(0.945) !important;
    transform-origin: top center !important;
    width: calc(100% / 0.945) !important;
  }
}

@media (max-width: 768px) {
  @supports (zoom: 0.945) {
    html { zoom: 1 !important; }
    body { zoom: 0.945 !important; }
  }
}



/* =========================================================
   CLOUDY SIMPLE BLACK STYLE 2026-05-16
   Version simple : fond noir, cartes opaques, sans liquid glass,
   sans animation de cartes, sans arrière-plan animé lourd.
   ========================================================= */
:root {
  --cloudy-bg: #000000 !important;
  --cloudy-panel: #080808 !important;
  --cloudy-panel-2: #0d0d0d !important;
  --cloudy-border: rgba(255,255,255,.10) !important;
  --cloudy-border-strong: rgba(255,255,255,.18) !important;
  --cloudy-text: #f5f5f5 !important;
  --cloudy-muted: #a3a3a3 !important;
  --cloudy-blue: #38bdf8 !important;
  --cloudy-green: #22c55e !important;
  --cloudy-red: #ef4444 !important;
  --cloudy-yellow: #facc15 !important;
  --cloudy-radius: 18px !important;
  --cloudy-shadow: 0 10px 28px rgba(0,0,0,.42) !important;
}

html,
body {
  background: #020617 !important;
  color: var(--cloudy-text) !important;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  overflow-x: hidden !important;
}

body::before,
body::after,
.aurora-bg,
.aurora-bg::before,
.aurora-bg::after,
.aurora-blob,
.blob-1,
.blob-2,
.blob-3 {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
  filter: none !important;
}

/* Arrêt du style iOS / liquid glass */
.ios-card,
.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel,
.order-timeline-card,
#binance-pay-payment-container,
#payment-reminder,
#order-empty-state,
.modal-content,
.video-modal-content,
details,
#order-summary,
#no-abo,
#activation-card,
.app-card,
.tool-card-premium,
#applications a,
#referral-card {
  background: var(--cloudy-panel) !important;
  background-image: none !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: var(--cloudy-radius) !important;
  box-shadow: var(--cloudy-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.ios-card::before,
.ios-card::after,
.glass-card::before,
.glass-card::after,
.profile-card::before,
.profile-card::after,
.guide-launch-card::before,
.guide-launch-card::after,
.app-card::before,
.app-card::after,
.tool-card-premium::before,
.tool-card-premium::after,
#applications a::before,
#applications a::after,
#referral-card::before,
#referral-card::after {
  display: none !important;
  content: none !important;
}

.ios-card:hover,
.glass-card:hover,
.profile-card:hover,
.guide-launch-card:hover,
.app-card:hover,
.tool-card-premium:hover,
details:hover,
#applications a:hover {
  border-color: var(--cloudy-border-strong) !important;
  transform: none !important;
  box-shadow: var(--cloudy-shadow) !important;
}

/* Icônes simples */
.icon-premium,
.icon-glass-square,
.tool-premium-icon,
.section-title-icon,
.app-icon-box,
.guide-device-icon,
.referral-icon-premium,
.referral-copy-btn,
.referral-friends-icon,
.hero-player-icon,
.w-14.h-14,
.w-12.h-12,
.w-10.h-10,
.w-20.h-20 {
  background: #111111 !important;
  background-image: none !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.icon-premium::before,
.icon-premium::after,
.icon-glass-square::before,
.icon-glass-square::after,
.tool-premium-icon::before,
.tool-premium-icon::after,
.section-title-icon::before,
.section-title-icon::after,
.app-icon-box::before,
.app-icon-box::after,
.guide-device-icon::before,
.guide-device-icon::after,
.referral-icon-premium::before,
.referral-icon-premium::after,
.referral-copy-btn::before,
.referral-copy-btn::after {
  display: none !important;
  content: none !important;
}

.icon-premium:hover,
.icon-glass-square:hover,
.tool-premium-icon:hover,
.app-icon-box:hover,
.guide-device-icon:hover,
.referral-copy-btn:hover {
  background: #171717 !important;
  transform: none !important;
}

.icon-premium svg,
.icon-premium i,
.icon-glass-square svg,
.icon-glass-square i,
.tool-premium-icon svg,
.tool-premium-icon i,
.section-title-icon svg,
.section-title-icon i,
.guide-device-icon svg,
.guide-device-icon i,
[data-lucide],
.fas,
.fab,
.far {
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* Boutons : style simple et lisible */
.btn-ios-primary,
.btn-primary,
.bg-blue-600,
button[type="submit"],
#submit-btn,
#btn-confirm-reward,
#btn-claim-reward,
a[href="../index.html?type=new#offres"],
#accueil button:first-child {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.btn-ios-primary:hover,
.btn-primary:hover,
.bg-blue-600:hover,
button[type="submit"]:hover,
#submit-btn:hover,
a[href="../index.html?type=new#offres"]:hover {
  background: #e5e5e5 !important;
  color: #000000 !important;
  transform: none !important;
  filter: none !important;
}

button[class*="bg-red"],
.icon-premium-red {
  background: rgba(239,68,68,.12) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.28) !important;
}

button[class*="bg-green"],
.connected-badge {
  background: rgba(34,197,94,.12) !important;
  color: #4ade80 !important;
  border-color: rgba(34,197,94,.28) !important;
}

/* Champs */
.ios-input,
.input-dark,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: rgba(7, 14, 30, .72) !important;
  border: 1px solid rgba(147,197,253,.20) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(2,6,23,.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ios-input:focus,
.input-dark:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(11, 22, 44, .94) !important;
  border-color: rgba(56,189,248,.72) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.13) !important;
  outline: none !important;
}

/* Textes */
p,
.text-gray-400,
.text-gray-500,
.text-gray-300,
.guide-device-subtitle {
  color: var(--cloudy-muted) !important;
}

.text-blue-400,
.text-blue-300,
.text-sky-400,
.app-download-label,
#abo-counter {
  color: var(--cloudy-blue) !important;
}

.text-green-400,
.text-green-300 { color: var(--cloudy-green) !important; }
.text-red-400,
.text-red-500 { color: #f87171 !important; }
.text-yellow-400,
.text-yellow-500 { color: var(--cloudy-yellow) !important; }

.text-transparent.bg-clip-text,
.hero-player-title,
#order-price,
#payment-usdt-amount {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hero player sans image/effet */
.hero-card {
  background: #080808 !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--cloudy-shadow) !important;
  overflow: hidden !important;
}
.hero-card::before,
.hero-card::after {
  display: none !important;
  content: none !important;
}
.hero-player-icon {
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #000000 !important;
}
.hero-player-icon svg,
.hero-player-icon i {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Navigation et modales */
.ios-nav,
nav.fixed,
.mobile-menu,
nav[aria-label="Navigation principale"] {
  background: rgba(11, 18, 36, .92) !important;
  border: 1px solid rgba(147,197,253,.16) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-overlay {
  background: rgba(0,0,0,.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.toast {
  background: #080808 !important;
  border: 1px solid var(--cloudy-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
}

/* Loader : simple, sans pulse */
#cloudy-page-loader {
  background: #020617 !important;
  gap: 14px !important;
}
.cloudy-loader-logo,
.cloudy-loader-ring,
.cloudy-loader-text {
  animation: none !important;
}
.cloudy-loader-ring {
  border-color: rgba(255,255,255,.18) !important;
  border-top-color: #ffffff !important;
}

/* Suppression des mouvements sur cartes et blocs décoratifs */
.animate-in,
.credential-card-reveal,
.credentials-panel,
.credential-row,
.slider-nudge {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

button,
a,
.ios-card,
.glass-card,
details,
input,
textarea,
select {
  transition: none !important;
}

/* Drapeau MG désactivé si encore présent */
.mg-flag,
.country-code-box .mg-flag {
  display: none !important;
}

/* Mobile : cartes compactes, noir stable */
@media (max-width: 768px) {
  html,
  body {
    background: #020617 !important;
    zoom: 1 !important;
  }
  main,
  section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .ios-card,
  .glass-card,
  .profile-card,
  .guide-launch-card,
  #applications a,
  #referral-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
  }
  .profile-card {
    min-height: 88px !important;
  }
}



/* =========================================================
   CLOUDY MOBILE ZOOM PATCH - affichage mobile -5%
   Desktop inchangé. Mobile uniquement : page légèrement réduite.
   ========================================================= */
@media (max-width: 768px) {
  html {
    zoom: 1 !important;
  }
  body {
    zoom: 0.95 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* =========================================================
   CLOUDY MOBILE ZOOM PATCH v2 - affichage mobile encore -5%
   Desktop inchangé. Mobile uniquement : zoom final 0.90.
   ========================================================= */
@media (max-width: 768px) {
  html {
    zoom: 1 !important;
  }
  body {
    zoom: 0.90 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* =========================================================
   CLOUDY PLAYER PATCH - arrière-plan restauré + couleurs/icônes
   ========================================================= */
.hero-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 148px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(56, 189, 248, .34) !important;
  background: #020617 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.58), 0 0 0 1px rgba(124,58,237,.10) !important;
}

.hero-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.72) 38%, rgba(15,23,42,.38) 62%, rgba(88,28,135,.56) 100%),
    radial-gradient(circle at 16% 46%, rgba(14,165,233,.34), transparent 32%),
    radial-gradient(circle at 86% 42%, rgba(124,58,237,.38), transparent 36%),
    url('../assets/images/jacket.jpg') !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, center, center !important;
  opacity: .96 !important;
  filter: saturate(.95) brightness(.72) !important;
}

.hero-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 42%),
    linear-gradient(90deg, rgba(14,165,233,.22), transparent 42%, rgba(124,58,237,.18)) !important;
  opacity: .72 !important;
}

.hero-player-content {
  position: relative !important;
  z-index: 2 !important;
}

.hero-player-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 52%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 12px 28px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: none !important;
}

.hero-player-icon svg,
.hero-player-icon i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.28)) !important;
}

.hero-card:hover .hero-player-icon,
.hero-card:hover .hero-player-icon svg,
.hero-card:hover .hero-player-icon i {
  transform: none !important;
}

.hero-player-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55) !important;
}

.hero-player-subtitle {
  color: #cbd5e1 !important;
}

.hero-player-cta {
  background: rgba(2,6,23,.76) !important;
  border: 1px solid rgba(56,189,248,.45) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px rgba(14,165,233,.16) !important;
}

.hero-player-cta svg,
.hero-player-cta i {
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
}

@media (max-width: 768px) {
  .hero-card {
    min-height: 128px !important;
    border-radius: 20px !important;
  }
  .hero-card::before {
    background-image:
      linear-gradient(90deg, rgba(2,6,23,.94) 0%, rgba(2,6,23,.72) 56%, rgba(88,28,135,.46) 100%),
      radial-gradient(circle at 18% 42%, rgba(14,165,233,.30), transparent 34%),
      url('../assets/images/jacket.jpg') !important;
  }
  .hero-player-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }
}



/* =========================================================
   CLOUDY COMPTE PATCH - Player bleu rond + cartes noir premium + Copier blanc
   ========================================================= */
:root {
  --cloudy-black: #000000;
  --cloudy-card: #070707;
  --cloudy-card-2: #0c0c0f;
  --cloudy-line: rgba(255,255,255,.13);
  --cloudy-line-soft: rgba(255,255,255,.08);
  --cloudy-blue: #1297ff;
  --cloudy-cyan: #38bdf8;
  --cloudy-violet: #7c3aed;
}

html,
body {
  background: #020617 !important;
}

body::before,
body::after,
.aurora-bg,
.aurora-bg::before,
.aurora-bg::after,
.aurora-blob {
  animation: none !important;
}

body::before,
body::after {
  opacity: 0 !important;
  background: #020617 !important;
}

.aurora-bg {
  background: #020617 !important;
}

/* Cartes : pas gris clair, plutôt noir charbon avec contours fins. */
.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel,
.order-timeline-card,
#binance-pay-payment-container,
#payment-reminder,
#order-empty-state,
.modal-content,
.video-modal-content,
details,
#order-summary,
#no-abo,
#activation-card,
.abo-item {
  background: linear-gradient(180deg, #111827 0%, #0b1224 100%) !important;
  border: 1px solid var(--cloudy-line) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.glass-card:hover,
.profile-card:hover,
.guide-launch-card:hover,
.tool-card-premium:hover,
.app-card:hover,
details:hover,
.abo-item:hover {
  transform: none !important;
  border-color: rgba(56,189,248,.24) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.55) !important;
}

/* Cloudy Player : arrière-plan visible, icône ronde uniquement bleue. */
.hero-card {
  position: relative !important;
  overflow: hidden !important;
  background: #020617 !important;
  border: 1px solid rgba(18,151,255,.35) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.hero-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 46%, rgba(10,38,90,.42) 72%, rgba(0,0,0,.88) 100%),
    radial-gradient(circle at 14% 50%, rgba(18,151,255,.28), transparent 34%),
    url('../assets/images/jacket.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(18,151,255,.16), transparent 45%, rgba(124,58,237,.12)) !important;
  opacity: .78 !important;
  animation: none !important;
}

.hero-player-content {
  position: relative !important;
  z-index: 2 !important;
}

.hero-player-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 999px !important;
  background: #1297ff !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 0 0 6px rgba(18,151,255,.10), 0 14px 28px rgba(18,151,255,.26) !important;
  transform: none !important;
}

.hero-player-icon svg,
.hero-player-icon i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  filter: none !important;
  transform: none !important;
}

.hero-card:hover .hero-player-icon,
.hero-card:hover .hero-player-icon svg,
.hero-card:hover .hero-player-icon i {
  transform: none !important;
}

.hero-player-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.65) !important;
}

.hero-player-subtitle {
  color: #cbd5e1 !important;
}

.hero-player-cta {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(56,189,248,.42) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.hero-player-cta svg,
.hero-player-cta i {
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
}

/* Boutons Copier des identifiants en blanc. */
.copy-pill,
button.copy-pill {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 8px 20px rgba(255,255,255,.10) !important;
}

.copy-pill span,
.copy-pill i,
.copy-pill svg,
button.copy-pill span,
button.copy-pill i,
button.copy-pill svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

.copy-pill:hover,
button.copy-pill:hover {
  background: #f3f4f6 !important;
  border-color: #f3f4f6 !important;
  color: #000000 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .hero-card {
    min-height: 126px !important;
    border-radius: 20px !important;
  }
  .hero-player-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
  }
  .copy-pill,
  button.copy-pill {
    min-width: 70px !important;
    padding: 8px 10px !important;
  }
}



/* =========================================================
   CLOUDY FIX - Copier texte/icône blancs + cartes noir neutre
   ========================================================= */
:root {
  --cloudy-neutral-card: #090909;
  --cloudy-neutral-card-2: #0d0d0f;
  --cloudy-neutral-panel: #111114;
  --cloudy-neutral-border: rgba(255,255,255,.14);
  --cloudy-neutral-border-soft: rgba(255,255,255,.09);
  --cloudy-neutral-muted: #a3a3a3;
}

/* Cartes adaptées au fond noir : noir charbon neutre, sans dominante bleue. */
.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel,
.order-timeline-card,
#binance-pay-payment-container,
#payment-reminder,
#order-empty-state,
.modal-content,
.video-modal-content,
details,
#order-summary,
#no-abo,
#activation-card,
.abo-item,
#abos-list > .glass-card,
#applications a,
.tool-card-premium,
a[aria-label="Ouvrir Assistant Cloudy"] {
  background: linear-gradient(180deg, var(--cloudy-neutral-card-2) 0%, var(--cloudy-neutral-card) 100%) !important;
  border-color: var(--cloudy-neutral-border) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card:hover,
.profile-card:hover,
.guide-launch-card:hover,
.tool-card-premium:hover,
.app-card:hover,
details:hover,
.abo-item:hover,
#applications a:hover,
a[aria-label="Ouvrir Assistant Cloudy"]:hover {
  background: linear-gradient(180deg, #101012 0%, #080808 100%) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.58) !important;
  transform: none !important;
}

/* Panneaux internes des abonnements : neutres, pas bleus. */
.credentials-panel,
.credential-help,
#referral-card,
#referral-card.referral-card-clean,
#abos-list article,
#abos-list .bg-blue-900\/10,
#abos-list .bg-blue-500\/10,
#abos-list .border-blue-500\/50,
#abos-list .border-blue-500\/30,
#abos-list .border-blue-500\/20,
#abos-list [class*="bg-blue"],
#abos-list [class*="border-blue"] {
  background: var(--cloudy-neutral-panel) !important;
  border-color: var(--cloudy-neutral-border-soft) !important;
  box-shadow: none !important;
}

/* On garde seulement les petits accents utiles, mais pas en fond de carte. */
#abo-counter,
.app-download-label,
.text-blue-400,
.text-blue-300,
.text-sky-400 {
  color: #38bdf8 !important;
}

/* Bouton Copier : le fond reste sombre, seuls l'icône et le texte sont blancs. */
.copy-pill,
button.copy-pill,
button[onclick*="copyText"],
button[onclick*="copyAllCredentials"] {
  background: #18181b !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.copy-pill span,
.copy-pill i,
.copy-pill svg,
button.copy-pill span,
button.copy-pill i,
button.copy-pill svg,
button[onclick*="copyText"] span,
button[onclick*="copyText"] i,
button[onclick*="copyText"] svg,
button[onclick*="copyAllCredentials"] span,
button[onclick*="copyAllCredentials"] i,
button[onclick*="copyAllCredentials"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.copy-pill:hover,
button.copy-pill:hover,
button[onclick*="copyText"]:hover,
button[onclick*="copyAllCredentials"]:hover {
  background: #232326 !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Cloudy Player : l'icône Play reste bleue et parfaitement ronde. */
.hero-player-icon {
  border-radius: 999px !important;
  background: #1297ff !important;
  color: #ffffff !important;
}
.hero-player-icon svg,
.hero-player-icon i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}



/* =========================================================
   CLOUDY BLACK BALANCE PREVIEW - palette noire disciplinée
   Objectif : moins de bleu dans les cartes, accents rares et propres.
   ========================================================= */
:root {
  --cloudy-black: #000000;
  --cloudy-card: #101012;
  --cloudy-card-2: #121214;
  --cloudy-panel: #151518;
  --cloudy-panel-2: #18181b;
  --cloudy-border: rgba(255,255,255,.13);
  --cloudy-border-hi: rgba(255,255,255,.23);
  --cloudy-text: #ffffff;
  --cloudy-muted: #a1a1aa;
  --cloudy-accent: #38bdf8;
  --cloudy-accent-2: #0ea5e9;
}

html,
body {
  background: var(--cloudy-black) !important;
}

body::before,
body::after,
.aurora-bg,
.aurora-bg::before,
.aurora-bg::after,
.aurora-blob {
  background: transparent !important;
  background-image: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
}

/* Toutes les grandes cartes restent charbon neutre. */
.glass-card,
.profile-card,
.guide-launch-card,
.referral-link-box,
.referral-progress-card,
.guide-panel,
.order-timeline-card,
#binance-pay-payment-container,
#payment-reminder,
#order-empty-state,
.modal-content,
.video-modal-content,
details,
#order-summary,
#no-abo,
#activation-card,
.abo-item,
#abos-list > .glass-card,
#applications a,
.tool-card-premium,
a[aria-label="Ouvrir Assistant Cloudy"],
a[href*="t.me"].glass-card {
  background: linear-gradient(180deg, var(--cloudy-card-2) 0%, var(--cloudy-card) 100%) !important;
  border: 1px solid var(--cloudy-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.glass-card:hover,
.profile-card:hover,
.guide-launch-card:hover,
.referral-link-box:hover,
.referral-progress-card:hover,
.guide-panel:hover,
.tool-card-premium:hover,
.app-card:hover,
details:hover,
.abo-item:hover,
#applications a:hover,
a[aria-label="Ouvrir Assistant Cloudy"]:hover,
a[href*="t.me"].glass-card:hover {
  background: linear-gradient(180deg, #14213b 0%, #0b1224 100%) !important;
  border-color: var(--cloudy-border-hi) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.45) !important;
  transform: none !important;
}

/* Supprime les reflets bleus/violets sur les cartes secondaires. */
a[aria-label="Ouvrir Assistant Cloudy"] .absolute,
a[href*="t.me"].glass-card .absolute,
.guide-launch-card::before,
.glass-card::before,
.profile-card::before,
.tool-card-premium::before,
.app-card::before,
#applications a::before,
#referral-card::before,
#referral-card::after {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Carte abonnement : neutre, pas de fond bleu. */
#abos-list article,
#abos-list .abo-item,
#abos-list .bg-blue-900\/10,
#abos-list .bg-blue-500\/10,
#abos-list .border-blue-500\/50,
#abos-list .border-blue-500\/30,
#abos-list .border-blue-500\/20,
#abos-list [class*="bg-blue"],
#abos-list [class*="border-blue"],
.credentials-panel,
.credential-help {
  background: var(--cloudy-panel) !important;
  border-color: var(--cloudy-border) !important;
  box-shadow: none !important;
}

/* Panneaux internes plus lisibles. */
.credentials-panel,
#abos-list article > div:not(.absolute),
#referral-card .referral-link-box,
#referral-card .referral-progress-card,
.guide-panel {
  background: #111113 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Assistant Cloudy et Telegram : neutres avec un accent très léger. */
a[aria-label="Ouvrir Assistant Cloudy"] {
  border-left: 1px solid rgba(56,189,248,.26) !important;
}
a[aria-label="Ouvrir Assistant Cloudy"] h3,
a[aria-label="Ouvrir Assistant Cloudy"] p,
a[href*="t.me"].glass-card p,
.app-download-label,
#abo-counter,
.text-blue-400,
.text-blue-300,
.text-sky-400 {
  color: var(--cloudy-accent) !important;
}

a[href*="t.me"].glass-card {
  border-left: 1px solid rgba(124,58,237,.24) !important;
}

/* Icônes : fond sombre, couleur en accent uniquement. */
.icon-premium,
.icon-glass-square,
.tool-premium-icon,
.section-title-icon,
.app-icon-box,
.guide-device-icon,
.referral-icon-premium,
.referral-copy-btn,
.referral-friends-icon,
.w-14.h-14,
.w-12.h-12,
.w-10.h-10,
.w-20.h-20 {
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}

/* Bouton Visionner : remplace le jaune par un style blanc premium. */
button[onclick*="openPlayerWithCreds"] {
  background: #f8fafc !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 10px 24px rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  transform: none !important;
}
button[onclick*="openPlayerWithCreds"] svg,
button[onclick*="openPlayerWithCreds"] i,
button[onclick*="openPlayerWithCreds"] span {
  color: #000000 !important;
  stroke: #000000 !important;
}
button[onclick*="openPlayerWithCreds"]:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(255,255,255,.14) !important;
  transform: none !important;
}

/* Boutons Copier : bouton sombre, seulement icône + texte blancs. */
.copy-pill,
button.copy-pill,
button[onclick*="copyText"],
button[onclick*="copyAllCredentials"] {
  background: #18181b !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.copy-pill span,
.copy-pill i,
.copy-pill svg,
button.copy-pill span,
button.copy-pill i,
button.copy-pill svg,
button[onclick*="copyText"] span,
button[onclick*="copyText"] i,
button[onclick*="copyText"] svg,
button[onclick*="copyAllCredentials"] span,
button[onclick*="copyAllCredentials"] i,
button[onclick*="copyAllCredentials"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
    .copy-pill:hover,
    button.copy-pill:hover,
    button[onclick*="copyText"]:hover,
    button[onclick*="copyAllCredentials"]:hover {
      background: #222225 !important;
  border-color: rgba(255,255,255,.30) !important;
      color: #ffffff !important;
      transform: none !important;
    }

    /* Corrections finales demandées : actions et cartes outil. */
    button[onclick*="openPlayerWithCreds"] svg,
    button[onclick*="openPlayerWithCreds"] i,
    button[onclick*="openPlayerWithCreds"] [data-lucide="play"] {
      color: #ffffff !important;
      stroke: #ffffff !important;
      fill: none !important;
    }

    a[href="../index.html?type=new#offres"] {
      background: #ffffff !important;
      color: #020617 !important;
      border: 1px solid rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .10) !important;
      animation: none !important;
    }
    a[href="../index.html?type=new#offres"] :where(svg, i, span) {
      color: #020617 !important;
      stroke: #020617 !important;
    }
    a[href="../index.html?type=new#offres"]:hover {
      background: #f8fafc !important;
      color: #020617 !important;
      filter: none !important;
      transform: none !important;
    }

    button[onclick*="openPlayerWithCreds"] {
      background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
      color: #ffffff !important;
      border: 1px solid rgba(96, 165, 250, .55) !important;
      box-shadow: 0 12px 26px rgba(59, 130, 246, .24), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
    }
    button[onclick*="openPlayerWithCreds"] :where(svg, i, span) {
      color: #ffffff !important;
      stroke: #ffffff !important;
      fill: none !important;
    }

    button[onclick*="openPlayerWithCreds"] svg,
    button[onclick*="openPlayerWithCreds"] i,
    button[onclick*="openPlayerWithCreds"] [data-lucide="play"] {
      color: #ffffff !important;
      stroke: #ffffff !important;
      fill: none !important;
    }
    button[onclick*="openPlayerWithCreds"]:hover {
      background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
      border-color: rgba(147, 197, 253, .72) !important;
      box-shadow: 0 14px 30px rgba(59, 130, 246, .30), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    }

    a[href*="t.me"].glass-card p,
    a[href*="t.me"].glass-card .text-blue-400 {
      color: #cbd5e1 !important;
    }

    #abos-list .abo-item {
      background:
        radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .10), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)),
        rgba(12, 22, 43, .84) !important;
    }

    #abos-list .abo-item > .flex.justify-between.items-start.mb-5 {
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    #abos-list .abo-item > .flex.justify-between.items-start.mb-5 + .credentials-panel {
      margin-top: 0 !important;
    }

    /* Cloudy Player garde son ambiance cinéma + icône ronde bleue. */
    .hero-card {
      background: #020202 !important;
      border: 1px solid rgba(56,189,248,.36) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.65) !important;
}
.hero-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.32) 70%, rgba(0,0,0,.74) 100%),
    url('../assets/images/jacket.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  filter: none !important;
}
.hero-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(14,165,233,.18), transparent 50%, rgba(124,58,237,.16)) !important;
  opacity: .7 !important;
  animation: none !important;
}
.hero-player-content { position: relative !important; z-index: 2 !important; }
.hero-player-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 999px !important;
  background: var(--cloudy-accent-2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 6px rgba(14,165,233,.10), 0 14px 28px rgba(14,165,233,.28) !important;
}
.hero-player-icon svg,
.hero-player-icon i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  filter: none !important;
}
.hero-player-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.70) !important;
}
.hero-player-subtitle { color: #d4d4d8 !important; }
.hero-player-cta {
  background: rgba(0,0,0,.46) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
  .hero-player-cta svg,
  .hero-player-cta i {
    color: var(--cloudy-accent) !important;
    stroke: var(--cloudy-accent) !important;
  }

  .hero-player-content {
    min-height: 138px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 22px 28px !important;
    text-align: left !important;
  }
  .hero-player-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    min-width: 0 !important;
  }
  .hero-player-icon {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero-player-title {
    margin-bottom: 4px !important;
  }
  .hero-player-subtitle {
    margin: 0 !important;
  }
  .hero-player-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

/* Badges : couleurs conservées seulement pour le sens. */
.connected-badge,
.bg-green-500\/10,
.text-green-400,
.text-green-300 {
  color: #22c55e !important;
}
.bg-purple-500\/10,
.text-purple-400,
.text-purple-300 {
  color: #a78bfa !important;
}

@media (max-width: 768px) {
  body {
    zoom: 0.85 !important;
  }
  .hero-player-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
  .hero-player-content {
    min-height: 126px !important;
    padding: 18px 18px !important;
    gap: 12px !important;
  }
  .hero-player-main {
    gap: 12px !important;
  }
  .hero-player-title {
    font-size: 18px !important;
  }
  .hero-player-subtitle {
    font-size: 12px !important;
  }
  .hero-player-cta {
    padding: 10px 13px !important;
    font-size: 10px !important;
  }
  button[onclick*="openPlayerWithCreds"] {
    border-radius: 16px !important;
  }
}

/* cloudy-compte-index-theme */
:root {
      --account-bg: #040914;
      --account-bg-2: #0a1428;
      --account-surface: rgba(10, 16, 32, .48);
      --account-surface-strong: rgba(12, 22, 43, .82);
      --account-inner: rgba(5, 10, 24, .76);
      --account-border: rgba(174, 212, 255, .10);
      --account-border-strong: rgba(118, 184, 255, .22);
      --account-blue: #0ea5e9;
      --account-cyan: #38bdf8;
      --account-violet: #8b5cf6;
      --account-mint: #10b981;
      --account-shadow: 0 24px 70px rgba(0, 0, 0, .52);
    }

    html,
    body {
      background: var(--account-bg) !important;
    }

    body::before {
      content: "" !important;
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: -3 !important;
      pointer-events: none !important;
      opacity: 1 !important;
      background:
        radial-gradient(900px 620px at 50% -12%, rgba(14, 165, 233, .24), transparent 62%),
        radial-gradient(760px 560px at 6% 32%, rgba(139, 92, 246, .17), transparent 60%),
        radial-gradient(880px 620px at 94% 64%, rgba(16, 185, 129, .12), transparent 58%),
        linear-gradient(180deg, #040914 0%, #071020 54%, #040812 100%) !important;
    }

    .header-credit-pill {
      appearance: none;
      -webkit-appearance: none;
      min-width: 104px;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 11px;
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(16, 185, 129, .14), rgba(255, 255, 255, .045)) !important;
      border: 1px solid rgba(110, 231, 183, .22) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(0, 0, 0, .24) !important;
      color: #d1fae5;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
    }

    .header-credit-pill:hover {
      background: linear-gradient(145deg, rgba(16, 185, 129, .2), rgba(255, 255, 255, .06)) !important;
      border-color: rgba(110, 231, 183, .38) !important;
    }

    .header-credit-pill:active {
      transform: translateY(1px) scale(.985) !important;
      background: linear-gradient(145deg, rgba(16, 185, 129, .25), rgba(255, 255, 255, .07)) !important;
    }

    .header-menu-btn {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: #ffffff;
      background: rgba(255, 255, 255, .075) !important;
      border: 1px solid rgba(191, 219, 254, .16) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(0, 0, 0, .24) !important;
    }

    .header-menu-btn:hover {
      background: rgba(56, 189, 248, .14) !important;
      border-color: rgba(125, 211, 252, .32) !important;
    }

    .header-notice-btn {
      position: relative;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: #fde68a;
      background: linear-gradient(145deg, rgba(245, 158, 11, .18), rgba(255, 255, 255, .045)) !important;
      border: 1px solid rgba(251, 191, 36, .24) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(0, 0, 0, .24) !important;
      transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
    }

    .header-notice-btn.hidden {
      display: none !important;
    }

    .header-notice-btn:hover {
      background: linear-gradient(145deg, rgba(245, 158, 11, .25), rgba(255, 255, 255, .06)) !important;
      border-color: rgba(251, 191, 36, .42) !important;
    }

    .header-notice-btn:active {
      transform: translateY(1px) scale(.985) !important;
    }

    .header-notice-dot {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #ef4444;
      border: 2px solid #071020;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .18), 0 0 12px rgba(239, 68, 68, .75);
    }

    .header-menu-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 60;
      width: min(270px, calc(100vw - 32px));
      padding: 8px;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(12, 22, 43, .98), rgba(5, 10, 24, .96)) !important;
      border: 1px solid rgba(191, 219, 254, .16) !important;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
      backdrop-filter: blur(22px) saturate(1.14);
      -webkit-backdrop-filter: blur(22px) saturate(1.14);
    }

    .header-menu-item {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      color: #e5edf7;
      font-size: 12px;
      font-weight: 900;
      text-align: left;
      background: transparent !important;
      border: 1px solid transparent !important;
      transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
    }

    .header-menu-item:hover {
      background: rgba(255, 255, 255, .075) !important;
      border-color: rgba(191, 219, 254, .12) !important;
      transform: none !important;
    }

    .header-menu-item:active {
      transform: translateY(1px) scale(.985) !important;
      background: rgba(56, 189, 248, .14) !important;
    }

    .header-menu-danger {
      color: #fca5a5 !important;
    }

    .assistant-menu-status,
    .assistant-online-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 24px;
      padding: 5px 9px;
      border-radius: 999px;
      color: #bbf7d0;
      background: rgba(34, 197, 94, .12);
      border: 1px solid rgba(34, 197, 94, .28);
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
      white-space: nowrap;
      box-shadow: 0 0 18px rgba(34, 197, 94, .12);
    }

    .assistant-status-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, .16), 0 0 12px rgba(34, 197, 94, .85);
    }

    .assistant-online-text {
      display: none;
      align-items: center;
      gap: 6px;
      margin-top: 7px;
      color: #bbf7d0;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    @media (max-width: 380px) {
      .header-credit-pill {
        min-width: 86px;
        padding-inline: 9px;
      }
      .header-credit-pill i {
        display: none;
      }
    }

    @media (max-width: 520px) {
      .assistant-online-badge {
        display: inline-flex;
        min-height: 22px;
        padding: 4px 7px;
        gap: 5px;
        font-size: 8px;
        letter-spacing: .05em;
      }

      .assistant-online-text {
        display: none;
      }

      .assistant-card-main {
        gap: 12px !important;
      }

      .assistant-card-avatar {
        width: 44px !important;
        height: 44px !important;
        border-radius: 16px !important;
        flex: 0 0 44px;
      }

      .assistant-card-action {
        gap: 7px !important;
        flex: 0 0 auto;
      }

      .assistant-card-arrow {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
      }

      .assistant-online-badge .assistant-status-dot {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
      }

      .assistant-menu-status {
        width: 18px;
        min-width: 18px;
        min-height: 18px;
        padding: 0;
        gap: 0;
        font-size: 0;
        letter-spacing: 0;
      }

      .assistant-menu-status .assistant-status-dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
      }
    }

    .aurora-bg {
      display: block !important;
      background:
        radial-gradient(circle at 24% 14%, rgba(14, 165, 233, .18), transparent 32%),
        radial-gradient(circle at 76% 20%, rgba(139, 92, 246, .14), transparent 34%),
        radial-gradient(circle at 52% 88%, rgba(16, 185, 129, .10), transparent 38%),
        linear-gradient(145deg, #040914, #0a1428 52%, #040914) !important;
    }

    .aurora-blob {
      display: block !important;
      opacity: .14 !important;
      filter: blur(140px) !important;
    }

    .glass-card,
    .profile-card,
    .guide-launch-card,
    .guide-panel,
    .order-timeline-card,
    #binance-pay-payment-container,
    #payment-reminder,
    #order-empty-state,
    .modal-content,
    .video-modal-content,
    details,
    #order-summary,
    #no-abo,
    #activation-card,
    .abo-item,
    #abos-list > .glass-card,
    #abos-list article,
    .tool-card-premium,
    .app-card,
    a[aria-label="Ouvrir Assistant Cloudy"],
    a[href*="t.me"].glass-card,
    #referral-card,
    #referral-card.referral-card-clean {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
        var(--account-surface) !important;
      border: 1px solid var(--account-border) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), var(--account-shadow) !important;
      backdrop-filter: blur(22px) saturate(1.14) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
      transform: none !important;
    }

    .glass-card:hover,
    .profile-card:hover,
    .guide-launch-card:hover,
    .guide-panel:hover,
    .tool-card-premium:hover,
    .app-card:hover,
    details:hover,
    .abo-item:hover,
    #abos-list article:hover,
    a[aria-label="Ouvrir Assistant Cloudy"]:hover,
    a[href*="t.me"].glass-card:hover,
    #referral-card:hover {
      border-color: var(--account-border-strong) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 24px 62px rgba(0, 0, 0, .58),
        0 0 34px rgba(14, 165, 233, .10) !important;
    }

    .credentials-panel,
    .credential-help,
    #abos-list article > div:not(.absolute),
    #referral-card .referral-link-box,
    #referral-card .referral-progress-card,
    .guide-device-card,
    .guide-highlight,
    .referral-link-box,
    .referral-progress-card {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
        var(--account-inner) !important;
      border-color: rgba(174, 212, 255, .13) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    }

    .profile-card,
    .guide-launch-card,
    #abos-list .abo-item,
    #referral-card {
      background:
        radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .16), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(139, 92, 246, .12), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018)),
        var(--account-surface-strong) !important;
    }

    .tool-card-premium:nth-child(2n),
    .guide-device-card:nth-child(2n),
    #applications a:nth-child(2n) {
      background:
        radial-gradient(circle at 86% 12%, rgba(139, 92, 246, .12), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .014)),
        var(--account-surface) !important;
    }

    .tool-card-premium:nth-child(2n+1),
    .guide-device-card:nth-child(2n+1),
    #applications a:nth-child(2n+1) {
      background:
        radial-gradient(circle at 14% 12%, rgba(14, 165, 233, .14), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .014)),
        var(--account-surface) !important;
    }

    .section-title-icon,
    .icon-premium,
    .icon-glass-square,
    .tool-premium-icon,
    .guide-device-icon,
    .referral-icon-premium,
    .referral-friends-icon,
    .app-icon-box {
      background:
        linear-gradient(180deg, rgba(56, 189, 248, .16), rgba(10, 16, 32, .88)) !important;
      border-color: rgba(125, 211, 252, .24) !important;
      color: #67e8f9 !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .34) !important;
    }

    .copy-pill,
    button.copy-pill,
    button[onclick*="copyText"],
    button[onclick*="copyAllCredentials"] {
      background: rgba(255, 255, 255, .075) !important;
      border: 1px solid rgba(191, 219, 254, .18) !important;
      color: #ffffff !important;
    }

    button[onclick*="openPlayerWithCreds"] {
      background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
      color: #ffffff !important;
      border: 1px solid rgba(96, 165, 250, .55) !important;
      box-shadow: 0 12px 26px rgba(59, 130, 246, .24), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
      transition: all 0.2s ease !important;
    }
    
    button[onclick*="openPlayerWithCreds"]:hover {
      background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
      border-color: rgba(147, 197, 253, .8) !important;
      box-shadow: 0 14px 30px rgba(59, 130, 246, .35), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
      transform: translateY(-1px) !important;
    }

    button[onclick*="openPlayerWithCreds"] :where(svg, i, span) {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }

    #abos-list button[onclick*="openPlayerWithCreds"] svg,
    #abos-list button[onclick*="openPlayerWithCreds"] i,
    #abos-list button[onclick*="openPlayerWithCreds"] [data-lucide="play"] {
      color: #ffffff !important;
      stroke: #ffffff !important;
      fill: none !important;
    }

    a[href="../index.html?type=new#offres"] {
      background: #ffffff !important;
      color: #020617 !important;
      border: 1px solid rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .10) !important;
      animation: none !important;
      transform: none !important;
    }

    a[href="../index.html?type=new#offres"] :where(svg, i, span) {
      color: #020617 !important;
      stroke: #020617 !important;
    }

    a[href="../index.html?type=new#offres"]:hover {
      background: #ffffff !important;
      color: #020617 !important;
      border-color: rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .12) !important;
      filter: none !important;
      transform: none !important;
    }

    #credit-balance-card,
    #credit-balance-card:active {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
        var(--account-surface) !important;
      border-color: var(--account-border) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), var(--account-shadow) !important;
      filter: none !important;
      transform: none !important;
    }

    #credit-balance-card:hover {
      border-color: var(--account-border-strong) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 24px 62px rgba(0, 0, 0, .58),
        0 0 34px rgba(14, 165, 233, .10) !important;
      filter: none !important;
      transform: none !important;
    }

    #credit-balance-card > .absolute.inset-0 {
      background: transparent !important;
      opacity: 0 !important;
    }

    #credit-topup-options button {
      background: #ffffff !important;
      color: #020617 !important;
      border: 1px solid rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .10) !important;
      transform: none !important;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
    }

    #credit-topup-options button:hover {
      background: #f8fafc !important;
      color: #020617 !important;
      border-color: rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .12) !important;
      transform: none !important;
    }

    #credit-topup-options button:active {
      background: #e5e7eb !important;
      color: #020617 !important;
      box-shadow: inset 0 3px 10px rgba(15, 23, 42, .16), 0 5px 12px rgba(0, 0, 0, .12) !important;
      transform: translateY(1px) scale(.985) !important;
    }

    a[href="../index.html?type=new#offres"],
    a[href="../index.html?type=new#offres"]:hover,
    a[href="../index.html?type=new#offres"]:focus,
    a[href="../index.html?type=new#offres"]:active {
      background: #ffffff !important;
      color: #020617 !important;
      border-color: rgba(255, 255, 255, .92) !important;
      filter: none !important;
    }

    a[href="../index.html?type=new#offres"] :where(svg, i, span),
    a[href="../index.html?type=new#offres"]:hover :where(svg, i, span),
    a[href="../index.html?type=new#offres"]:focus :where(svg, i, span),
    a[href="../index.html?type=new#offres"]:active :where(svg, i, span) {
      color: #020617 !important;
      stroke: #020617 !important;
    }

    #abos-list .abo-item {
      background:
        radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .10), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)),
        rgba(12, 22, 43, .84) !important;
    }

    #abos-list .abo-item > .flex.justify-between.items-start.mb-5 {
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    #abos-list .abo-item > .flex.justify-between.items-start.mb-5 + .credentials-panel {
      margin-top: 0 !important;
    }

    .hero-player-content {
      min-height: 138px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 18px !important;
      padding: 22px 28px !important;
      text-align: left !important;
    }

    .hero-player-main {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 18px !important;
      min-width: 0 !important;
    }

    .hero-player-icon {
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .hero-player-title {
      margin-bottom: 4px !important;
    }

    .hero-player-subtitle {
      margin: 0 !important;
    }

    .hero-player-cta {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }

    nav[aria-label="Navigation principale"] {
      margin-bottom: 0 !important;
    }

    @media (max-width: 768px) {
      body {
        zoom: 0.85 !important;
        padding-bottom: 14px !important;
      }

      main {
        padding-bottom: 14px !important;
      }

      nav[aria-label="Navigation principale"] {
        display: none !important;
      }

      .glass-card,
      .profile-card,
      .guide-launch-card,
      .tool-card-premium,
      .app-card,
      #referral-card,
      .abo-item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .hero-player-content {
        min-height: 126px !important;
        padding: 18px !important;
        gap: 12px !important;
      }

      .hero-player-main {
        gap: 12px !important;
      }

      .hero-player-title {
        font-size: 18px !important;
      }

      .hero-player-subtitle {
        font-size: 12px !important;
      }

      .hero-player-cta {
        padding: 10px 13px !important;
        font-size: 10px !important;
      }

      #slider-container {
        margin-bottom: 6px !important;
      }

      #abos-list {
        padding-bottom: 0 !important;
      }

      #abos-list .abo-item {
        padding: 18px !important;
      }

      #abos-list .abo-item > .flex.justify-between.items-start.mb-5 {
        min-height: 0 !important;
        margin-bottom: 12px !important;
        align-items: flex-start !important;
      }

      #abos-list .abo-item > .flex.justify-between.items-start.mb-5 > .flex.flex-col {
        gap: 6px !important;
      }

      #abos-list .abo-item .credentials-panel {
        margin-top: 0 !important;
      }

      #slider-dots {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
      }

      #slider-controls {
        margin-bottom: 14px !important;
      }
    }

    #abos-list a.legacy-new-server-action,
    #abos-list a.legacy-new-server-action:focus,
    #abos-list a.legacy-new-server-action:active {
      background: #ffffff !important;
      background-image: none !important;
      color: #020617 !important;
      border-color: rgba(255, 255, 255, .92) !important;
      box-shadow: 0 14px 30px rgba(255, 255, 255, .10) !important;
      filter: none !important;
      transform: none !important;
    }
    #abos-list a.legacy-new-server-action:hover {
      background: #f1f5f9 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 16px 34px rgba(255, 255, 255, .15) !important;
    }

    #abos-list a.legacy-new-server-action :where(svg, i, span),
    #abos-list a.legacy-new-server-action:hover :where(svg, i, span),
    #abos-list a.legacy-new-server-action:focus :where(svg, i, span),
    #abos-list a.legacy-new-server-action:active :where(svg, i, span) {
      color: #020617 !important;
      stroke: #020617 !important;
    }

    /* Bouton WhatsApp sur mesure */
    .btn-whatsapp {
      background: rgba(37, 211, 102, 0.1) !important;
      border: 1px solid rgba(37, 211, 102, 0.3) !important;
      color: #25D366 !important;
      transition: all 0.2s ease !important;
    }
    .btn-whatsapp:hover {
      background: rgba(37, 211, 102, 0.2) !important;
      border-color: rgba(37, 211, 102, 0.5) !important;
      box-shadow: 0 10px 20px rgba(37, 211, 102, 0.1) !important;
      transform: translateY(-1px) !important;
    }
    .btn-whatsapp i {
      color: #25D366 !important;
    }

    /* Credentials: list style on desktop */
    #abos-list .credentials-panel .credential-row {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr !important;
      align-items: center !important;
      gap: 12px !important;
      width: 100% !important;
    }

    #abos-list .credentials-panel .credential-label {
      justify-self: start !important;
      width: auto !important;
      text-align: left !important;
    }

    #abos-list .credentials-panel .credential-value,
    #abos-list .credentials-panel .credential-secret-wrap {
      justify-self: center !important;
      max-width: none !important;
      margin: 0 !important;
      text-align: center !important;
      justify-content: center !important;
    }

    #abos-list .credentials-panel .copy-pill {
      justify-self: end !important;
      margin: 0 !important;
    }

    @media (max-width: 520px) {
      #abos-list .credentials-panel .credential-row {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
      }

      #abos-list .credentials-panel .credential-label {
        width: 38px !important;
        flex: 0 0 38px !important;
      }

      #abos-list .credentials-panel .credential-value,
      #abos-list .credentials-panel .credential-secret-wrap {
        flex: 0 1 calc(100% - 116px) !important;
        max-width: calc(100% - 116px) !important;
        text-align: left !important;
        justify-content: flex-start !important;
      }

      #abos-list .credentials-panel .copy-pill {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
      }
    }


/* =========================================================
   CLOUDY ACCOUNT - premium credentials loading state
   ========================================================= */
@keyframes cloudyCredentialOrbit {
  to { transform: rotate(360deg); }
}

@keyframes cloudyCredentialPulse {
  0%, 100% { opacity: .42; transform: scaleX(.72); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes cloudyCredentialSheen {
  0% { transform: translateX(-115%); opacity: 0; }
  20% { opacity: .8; }
  100% { transform: translateX(115%); opacity: 0; }
}

#abos-list > .credentials-loading-card.credentials-loading-card {
  min-height: 154px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  padding: 24px 26px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 1px solid rgba(56,189,248,.28) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(56,189,248,.18), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.98) 0%, rgba(10,10,13,.98) 56%, rgba(2,6,23,.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.03) !important;
}

#abos-list > .credentials-loading-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .9 !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.07) 46%, transparent 62%) !important;
  animation: cloudyCredentialSheen 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.credentials-loading-orb {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(56,189,248,.08) !important;
  box-shadow: 0 0 34px rgba(56,189,248,.16) !important;
  z-index: 1 !important;
}

.credentials-loading-ring {
  position: absolute !important;
  inset: 5px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.10) !important;
  border-top-color: #38bdf8 !important;
  border-right-color: rgba(34,197,94,.78) !important;
  animation: cloudyCredentialOrbit .82s linear infinite !important;
}

.credentials-loading-core {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 24px rgba(37,99,235,.28) !important;
}

.credentials-loading-core svg,
.credentials-loading-core i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.credentials-loading-content {
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.credentials-loading-kicker {
  margin: 0 0 5px !important;
  color: #38bdf8 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.credentials-loading-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.credentials-loading-text {
  margin: 6px 0 0 !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.credentials-loading-steps {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 13px !important;
}

.credentials-loading-steps span {
  width: 34px !important;
  height: 3px !important;
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38bdf8, #22c55e) !important;
  transform-origin: left center !important;
  animation: cloudyCredentialPulse 1.1s ease-in-out infinite !important;
}

.credentials-loading-steps span:nth-child(2) { animation-delay: .16s !important; }
.credentials-loading-steps span:nth-child(3) { animation-delay: .32s !important; }

@media (max-width: 520px) {
  #abos-list > .credentials-loading-card.credentials-loading-card {
    min-height: 178px !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 22px !important;
    text-align: center !important;
  }

  .credentials-loading-orb {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }

  .credentials-loading-core {
    width: 36px !important;
    height: 36px !important;
  }

  .credentials-loading-steps {
    justify-content: center !important;
  }
}

/* Referral visual theme: violet focus with blue link and yellow bonus text. */
#referral-card.referral-card-clean,
#referral-card {
  border-color: rgba(168, 85, 247, .36) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(168, 85, 247, .18), transparent 34%),
    radial-gradient(circle at 90% 92%, rgba(124, 58, 237, .14), transparent 38%),
    linear-gradient(145deg, rgba(13, 11, 28, .86), rgba(7, 10, 22, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 20px 54px rgba(0,0,0,.38),
    0 0 36px rgba(168,85,247,.16) !important;
}

#referral-card:hover {
  border-color: rgba(192, 132, 252, .48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 62px rgba(0,0,0,.46),
    0 0 42px rgba(168,85,247,.22) !important;
}

#referral-card .referral-icon-premium {
  color: #f5e8ff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(145deg, #c084fc, #7c3aed 58%, #4c1d95) !important;
  border-color: rgba(216, 180, 254, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px rgba(124,58,237,.42),
    0 0 28px rgba(192,132,252,.34) !important;
}

#referral-card .referral-icon-premium i,
#referral-card .referral-icon-premium svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#referral-card .referral-bonus-text {
  color: #facc15 !important;
  text-shadow: 0 0 18px rgba(250,204,21,.16) !important;
}

#referral-card .referral-link-box,
#referral-card .referral-progress-card {
  background:
    linear-gradient(145deg, rgba(168,85,247,.07), rgba(255,255,255,.012)),
    #101014 !important;
  border-color: rgba(168,85,247,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 12px 30px rgba(76,29,149,.12) !important;
}

#referral-card #my-referral-code {
  color: #7dd3fc !important;
  text-shadow: 0 0 18px rgba(56,189,248,.16) !important;
}

#referral-card .referral-copy-btn {
  color: #e9d5ff !important;
  background:
    linear-gradient(145deg, rgba(168,85,247,.18), rgba(15,23,42,.92)) !important;
  border-color: rgba(192,132,252,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 26px rgba(76,29,149,.20) !important;
}

#referral-card .referral-copy-btn:hover {
  border-color: rgba(216,180,254,.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 34px rgba(124,58,237,.28) !important;
}

#referral-card .referral-copy-btn i,
#referral-card .referral-copy-btn svg {
  color: #e9d5ff !important;
  stroke: #e9d5ff !important;
}

#referral-card .referral-friends-icon {
  color: #d8b4fe !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(145deg, rgba(168,85,247,.24), rgba(76,29,149,.16)) !important;
  border-color: rgba(192,132,252,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 22px rgba(124,58,237,.18) !important;
}

#referral-card .referral-friends-icon i,
#referral-card .referral-friends-icon svg {
  color: #d8b4fe !important;
  stroke: #d8b4fe !important;
}

#referral-card #referral-count {
  color: #e9d5ff !important;
  text-shadow: 0 0 20px rgba(168,85,247,.26) !important;
}

#referral-card .referral-progress-track {
  background: rgba(168,85,247,.10) !important;
  border-color: rgba(168,85,247,.22) !important;
}

#referral-card .referral-progress-fill {
  background: linear-gradient(90deg, #7c3aed, #c084fc, #a855f7) !important;
  box-shadow: 0 0 22px rgba(168,85,247,.42) !important;
}

/* Final account-card alignment: Credit Balance + Telegram + Support. */
#credit-balance-card,
a[href*="t.me"].glass-card:not(.tool-card-premium),
.tool-card-premium:nth-child(3),
#support-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .10), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)),
    rgba(12, 22, 43, .84) !important;
  border: 1px solid rgba(118, 184, 255, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .065),
    0 24px 70px rgba(0, 0, 0, .52) !important;
  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
  transform: none !important;
  filter: none !important;
}

#credit-balance-card:hover,
a[href*="t.me"].glass-card:not(.tool-card-premium):hover,
.tool-card-premium:nth-child(3):hover,
#support-card:hover {
  border-color: rgba(118, 184, 255, .32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 24px 62px rgba(0, 0, 0, .58),
    0 0 34px rgba(14, 165, 233, .10) !important;
  transform: none !important;
  filter: none !important;
}

#credit-balance-card > .absolute.inset-0,
a[href*="t.me"].glass-card:not(.tool-card-premium) > .absolute.inset-0 {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

#credit-balance-card .w-12.h-12,
a[href*="t.me"].glass-card:not(.tool-card-premium) .w-14.h-14,
a[href*="t.me"].glass-card:not(.tool-card-premium) .w-10.h-10,
.tool-card-premium:nth-child(3) .tool-premium-icon,
#support-card .tool-premium-icon {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, .16), rgba(10, 16, 32, .88)) !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  color: #67e8f9 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 10px 24px rgba(0, 0, 0, .34) !important;
  text-shadow: none !important;
}

#credit-balance-card .w-12.h-12 :where(i, svg),
a[href*="t.me"].glass-card:not(.tool-card-premium) .w-14.h-14 :where(i, svg),
a[href*="t.me"].glass-card:not(.tool-card-premium) .w-10.h-10 :where(i, svg),
.tool-card-premium:nth-child(3) .tool-premium-icon :where(i, svg),
#support-card .tool-premium-icon :where(i, svg) {
  color: #67e8f9 !important;
  stroke: #67e8f9 !important;
}