/* Extracted from index.html inline style 1. */
:root {
      --ios-bg: #030712;
      --ios-card: rgba(10, 16, 32, 0.50);
      --ios-card-border: rgba(174, 212, 255, 0.08);
      --ios-blue: #0ea5e9;
      --ios-green: #10b981;
      --ios-orange: #f59e0b;
      --ios-purple: #8b5cf6;
      --ios-gray-text: #8b9bb4;
      --blur-amt: 20px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--ios-bg);
      color: white;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .aurora-bg {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      z-index: -1;
      background: radial-gradient(circle at 50% 50%, #0a1428 0%, #030712 100%);
      overflow: hidden;
    }
    .aurora-blob {
      position: absolute;
      filter: blur(120px);
      opacity: 0.25;
      animation: float 10s infinite ease-in-out alternate;
    }
    .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--ios-blue); animation-delay: 0s; }
    .blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--ios-purple); opacity: 0.2; animation-delay: -3s; }
    .blob-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: var(--ios-orange); opacity: 0.15; animation-delay: -2s; }
    @keyframes float {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, 60px) scale(1.1); }
    }
    .ios-card {
      background: var(--ios-card);
      backdrop-filter: blur(var(--blur-amt));
      -webkit-backdrop-filter: blur(var(--blur-amt));
      border: 1px solid var(--ios-card-border);
      border-radius: 20px;
      transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .ios-card:active { transform: scale(0.98); }
    .ios-nav {
      background: rgba(3, 7, 18, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--ios-card-border);
    }
    .referral-nav-banner {
      position: fixed;
      top: 65px;
      left: 0;
      right: 0;
      z-index: 49;
      display: flex;
      justify-content: center;
      padding: 7px 16px;
      background: rgba(24, 12, 42, 0.88);
      border-bottom: 1px solid rgba(168, 85, 247, 0.28);
      color: #d8b4fe;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      letter-spacing: 0;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 10px 24px rgba(3, 7, 18, 0.3);
    }
    .referral-nav-banner.hidden {
      display: none !important;
    }
    .referral-nav-banner span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: min(92vw, 760px);
      line-height: 1.35;
    }
    .referral-nav-banner i {
      color: #c084fc;
      font-size: 12px;
    }
    .offer-direct-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }
    .offer-direct-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.10);
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
      transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
    }
    .offer-direct-links a:hover {
      transform: translateY(-1px);
      color: #ffffff;
      background: rgba(139,92,246,.12);
      border-color: rgba(168,85,247,.34);
    }
    .offer-direct-links a:nth-child(1):hover {
      background: rgba(59,130,246,.12);
      border-color: rgba(59,130,246,.34);
    }
    .offer-direct-links a:nth-child(2):hover {
      background: rgba(16,185,129,.12);
      border-color: rgba(16,185,129,.34);
    }
    /* ===== CAROUSEL ===== */
    .carousel-container { display: flex; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
    .carousel-container::-webkit-scrollbar { display: none; }
    .carousel-container:active { cursor: grabbing; }
    .carousel-item { flex: 0 0 calc(16.66% - 4px); margin-right: 4px; user-select: none; }
    @media (min-width: 768px) { .carousel-item { flex: 0 0 calc(8.33% - 5px); margin-right: 5px; } }

    .btn-ios-primary {
      background: linear-gradient(90deg, var(--ios-blue) 0%, var(--ios-green) 100%);
      color: white;
      border-radius: 999px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .btn-ios-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5); }
    .btn-ios-primary:active { opacity: 1; transform: translateY(0); }
    .btn-glass-white {
      background: rgba(255, 255, 255, 0.05);
      color: white;
      font-weight: 500;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      transition: background 0.3s, border-color 0.3s;
      border-radius: 999px;
    }
    .btn-glass-white:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
    .btn-glass-white:active { opacity: 0.8; }
    .btn-ios-secondary {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      color: var(--ios-green);
      border: 1px solid var(--ios-green);
      border-radius: 999px;
      font-weight: 600;
      transition: background 0.3s, color 0.3s;
    }
    .btn-ios-secondary:hover { background: rgba(255, 255, 255, 0.1); }
    .whatsapp-float {
      position: fixed;
      width: 60px; height: 60px; bottom: 30px; right: 30px;
      background-color: #229ED9; color: #FFF; border-radius: 50px;
      text-align: center; font-size: 30px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
      z-index: 100; display: flex; justify-content: center; align-items: center;
      transition: transform 0.4s, box-shadow 0.4s;
    }
    .whatsapp-float:hover { transform: scale(1.1); box-shadow: 4px 4px 12px rgba(0,0,0,0.6); }
    .segmented-control {
      background: rgba(118, 118, 128, 0.24); padding: 4px; border-radius: 12px;
      display: inline-flex; position: relative;
    }
    .segment-btn {
      padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
      color: white; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative; z-index: 2;
    }
    .segment-btn.active {
      color: white; background: #636366; box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
    .ios-input {
      background: rgba(10, 16, 32, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: white;
      font-size: 17px; padding: 16px; transition: background 0.3s, border-color 0.3s;
    }
    .ios-input:focus { background: rgba(10, 16, 32, 0.9); outline: none; border-color: var(--ios-blue); }
    .payment-radio:checked + div {
      background-color: rgba(14, 165, 233, 0.15); border: 1px solid var(--ios-blue);
    }
    
    /* --- ANIMATION --- */
    .animate-pulse-custom {
      animation: pulse-effect 3s infinite cubic-bezier(0.4, 0, 0.6, 1);
    }
    @keyframes pulse-effect {
      0%, 100% { box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2), 0 0 0 0px rgba(14, 165, 233, 0.2); }
      50% { box-shadow: 0 4px 20px rgba(14, 165, 233, 0.5), 0 0 0 10px rgba(14, 165, 233, 0); }
    }

    .btn-pulse-animation {
        animation: btnPulse 2.5s infinite;
    }
    @keyframes btnPulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
        70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }
    
    @keyframes attention-bounce {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
      50% { transform: scale(1.02); box-shadow: 0 0 15px 0 rgba(245, 158, 11, 0.5); }
    }
    .animate-attention {
      animation: attention-bounce 3s infinite ease-in-out;
    }

    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.85);
      backdrop-filter: blur(10px); z-index: 200;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.4s;
    }
    .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: 90%; max-width: 400px; border-radius: 20px;
      transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .modal-overlay.active .modal-content { transform: scale(1); }
    
    .mobile-menu {
      background: #030712;
    }

    #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
    .toast { background: rgba(10, 15, 30, 0.95); backdrop-filter: blur(10px); color: white; padding: 16px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); font-size: 14px; font-weight: 500; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: translateX(120%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: auto; display: flex; align-items: center; min-width: 300px; }
    .toast.show { transform: translateX(0); }
    .toast-success { border-left: 4px solid var(--ios-green); }
    .toast-error { border-left: 4px solid var(--ios-coral); }
    .toast i { font-size: 18px; margin-right: 12px; }

    #maintenance-overlay {
        position: fixed; inset: 0; background: #030712; z-index: 99999;
        display: none; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; padding: 20px;
    }
    
    .animate-in { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .country-code-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      white-space: nowrap;
    }

    .order-timeline-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 20px;
      padding: 16px;
    }
    .qty-selector-card {
      background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.015));
      border: 1px solid rgba(14,165,233,0.15);
      border-radius: 18px;
      padding: 9px 10px;
      margin: 0 0 14px;
    }
    .qty-selector-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
    }
    .qty-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 8px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: #cbd5e1;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .qty-control {
      display: grid;
      grid-template-columns: 36px 1fr 36px;
      align-items: center;
      gap: 6px;
    }
    .qty-btn {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: #ffffff;
      font-size: 17px;
      font-weight: 900;
      transition: all 0.3s ease;
    }
    .qty-btn:hover { background: rgba(14,165,233,0.15); border-color: rgba(14,165,233,0.25); }
    .qty-number-wrap {
      min-height: 36px;
      border-radius: 14px;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1.05;
    }
    .qty-number {
      font-size: 17px;
      color: white;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .qty-caption {
      margin-top: 1px;
      color: #94a3b8;
      font-size: 8px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .order-step-dot {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      background: rgba(14,165,233,0.15);
      color: var(--ios-blue);
      border: 1px solid rgba(14,165,233,0.25);
      flex-shrink: 0;
    }

    .video-modal-content {
      width: min(92vw, 460px);
      background: #0a1428;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 90px rgba(0,0,0,0.8);
      transform: scale(0.92);
      transition: transform 0.35s ease;
    }
    .modal-overlay.active .video-modal-content { transform: scale(1); }
    .binance-pay-video {
      width: 100%;
      max-height: 72vh;
      background: #000;
      display: block;
    }
    .video-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .video-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease;
    }
    .video-close-btn:hover { background: rgba(255,255,255,0.15); }

/* =========================================================
   CLOUDY PREMIUM POLISH UPDATE - logo + refined premium UI
   ========================================================= */
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(14,165,233,.15)) drop-shadow(0 10px 24px rgba(0,0,0,.4));
  transition: transform .35s ease, filter .35s ease, opacity .35s 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(14,165,233,.25)) drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.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,.15) 38%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .8s ease;
  pointer-events: none;
}
.btn-ios-primary:hover::before { transform: translateX(130%); }

@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; }
  .referral-nav-banner {
    top: 74px;
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* =========================================================
   CLOUDY MOBILE DISPLAY FIX v2 - clean anti-overload patch
   ========================================================= */

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

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(14,165,233,.08), transparent 34%),
    radial-gradient(circle at 12% 28%, rgba(139,92,246,.06), transparent 34%),
    radial-gradient(circle at 88% 40%, rgba(16,189,129,.05), transparent 36%),
    var(--ios-bg);
}

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

.ios-nav {
  background: rgba(3, 7, 18, .85) !important;
  border-bottom: 1px solid rgba(174, 212, 255, .05) !important;
}

.btn-ios-primary,
.btn-ios-secondary,
.btn-glass-white {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#applications a,
#pricing-grid > div,
.order-timeline-card,
#order-empty-state,
#order-process-container .ios-card {
  transform: none !important;
}

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

  nav.fixed {
    min-height: 74px !important;
  }

  nav.fixed .py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  nav img[src*="cloudy.png"] {
    height: 44px !important;
    max-width: 112px !important;
    object-fit: contain !important;
  }

  #nav-auth-container a {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  #menuBtn {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #menuBtn i {
    font-size: 28px !important;
  }

  section#accueil {
    min-height: auto !important;
    padding-top: 128px !important;
    padding-bottom: 46px !important;
  }

  #accueil h1 {
    font-size: clamp(44px, 12vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 18px !important;
  }

  #accueil p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  #accueil .inline-block {
    margin-bottom: 16px !important;
  }

  #accueil .flex.flex-col.sm\:flex-row {
    gap: 12px !important;
  }

  #accueil button,
  #accueil a {
    width: 100% !important;
    max-width: 360px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 16px !important;
  }

  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #gallery {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
  }

  #caracteristiques,
  #commande-etapes,
  #offres,
  #commander,
  #applications {
    padding-top: 36px !important;
    padding-bottom: 38px !important;
  }

  h2,
  #caracteristiques h2,
  #offres h2,
  #applications h2 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }

  #caracteristiques .grid,
  #applications .grid,
  #pricing-grid {
    gap: 14px !important;
  }

  #caracteristiques .ios-card {
    padding: 22px 18px !important;
    min-height: auto !important;
  }

  #caracteristiques .mt-12 {
    margin-top: 22px !important;
  }

  #caracteristiques .inline-block {
    display: block !important;
    width: 100% !important;
    padding: 24px 16px !important;
    margin-top: 24px !important;
  }

  #caracteristiques .flex-wrap {
    gap: 18px !important;
  }

  #caracteristiques .flex-col.items-center.text-center.w-24 {
    width: 78px !important;
  }

  #caracteristiques .text-3xl,
  #caracteristiques .md\:text-5xl {
    font-size: 30px !important;
  }

  #commande-etapes {
    margin-top: 0 !important;
  }

  #commande-etapes .order-timeline-card {
    padding: 18px !important;
  }

  #offres.bg-white\/5 {
    background: rgba(255,255,255,.015) !important;
  }

  #server-selector-bg {
    height: calc(100% - 8px) !important;
  }

  #pricing-grid {
    grid-template-columns: 1fr !important;
  }

  #pricing-grid .ios-card {
    padding: 22px !important;
  }

  #commander .max-w-3xl,
  #applications .max-w-4xl,
  #caracteristiques .max-w-6xl,
  #commande-etapes .max-w-5xl,
  #offres .max-w-6xl {
    max-width: 100% !important;
  }

  #order-empty-state {
    min-height: 220px !important;
    padding: 28px 20px !important;
  }

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

  #applications a {
    min-height: 166px !important;
    padding: 16px 8px !important;
    border-radius: 22px !important;
    background: rgba(10,16,32,.40) !important;
    border: 1px solid rgba(174,212,255,.05) !important;
  }

  #applications a > div {
    width: 82px !important;
    height: 82px !important;
    margin-bottom: 12px !important;
  }

  #applications img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #applications p {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  #applications span {
    font-size: 10px !important;
  }

  .whatsapp-float {
    width: 56px !important;
    height: 56px !important;
    right: 18px !important;
    bottom: 22px !important;
    font-size: 28px !important;
    box-shadow: 0 12px 32px rgba(37,211,102,.15) !important;
  }

  footer {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}

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

  #accueil h1 {
    font-size: 42px !important;
  }

  #applications .grid {
    gap: 12px !important;
  }

  #applications a > div {
    width: 74px !important;
    height: 74px !important;
  }
}

/* =========================================================
   CLOUDY COMPLETE REDESIGN 2026 - Variables
   ========================================================= */
: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: #8b9bb4;
  --cloudy-blue: #0ea5e9;
  --cloudy-violet: #8b5cf6;
  --cloudy-mint: #10b981;
  --cloudy-coral: #f43f5e;
  --cloudy-gold: #f59e0b;
  --cloudy-radius: 26px;
  --cloudy-shadow: 0 24px 70px rgba(0, 0, 0, .60);
  --cloudy-zoom: 0.945;
}

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;
}

.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(0,0,0,.70), 0 0 0 1px rgba(14,165,233,.05) !important;
}

.btn-ios-primary,
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,.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.15) !important;
  font-weight: 900 !important;
}

@media (max-width: 768px) {
  :root { 
    --cloudy-radius: 22px; 
    --cloudy-surface: rgba(255, 255, 255, 0.05);
  }
  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-bg-speed: 30s;
  --cloudy-grid-speed: 45s;
  --cloudy-orb-a: rgba(14,165,233,.20);
  --cloudy-orb-b: rgba(139,92,246,.16);
  --cloudy-orb-c: rgba(16,189,129,.12);
  --cloudy-orb-d: rgba(244,63,94,.10);
}

@supports (zoom: .9) {
  body { zoom: var(--cloudy-zoom) !important; }
}
@supports not (zoom: .9) {
  html { font-size: 94.5% !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 30s 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,.10) 70deg, transparent 130deg, rgba(139,92,246,.08) 210deg, transparent 290deg),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,.04), transparent 38%) !important;
  filter: blur(55px) saturate(1.18) !important;
  opacity: .60 !important;
  animation: cloudySpin 45s linear infinite !important;
}

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

.aurora-blob {
  animation: cloudyBlobFloat 15s ease-in-out infinite alternate !important;
  will-change: transform, opacity, filter;
}
.blob-1 { animation-duration: 18s !important; }
.blob-2 { animation-duration: 22s !important; animation-delay: -5s !important; }
.blob-3 { animation-duration: 16s !important; animation-delay: -2s !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"] {
  background-size: 180% 180% !important;
  animation: cloudyButtonFlow 10s ease-in-out infinite alternate !important;
}

.hero-card::after {
  animation: cloudyHeroGlow 15s 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 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,
  .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: 35s; --cloudy-grid-speed: 50s; }
  body { min-height: 100vh !important; }
  .aurora-bg::after { opacity: .18 !important; }
}

/* =========================================================
   CLOUDY MOBILE STABILITY PATCH
   ========================================================= */
@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,
  .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: .08 !important;
    filter: blur(120px) !important;
    transform: none !important;
  }

  .aurora-bg::before,
  .aurora-bg::after {
    opacity: .12 !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;
  }
}

/* =========================================================
   CLOUDY LIGHT ANIMATION PACK
   ========================================================= */
:root {
  --cloudy-light-speed: 45s;
  --cloudy-light-mobile-speed: 60s;
}

body::before {
  animation: cloudyLightAurora var(--cloudy-light-speed) ease-in-out infinite alternate !important;
}

body::after {
  animation: cloudyLightGrid 60s linear infinite !important;
}

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

.aurora-blob {
  animation: cloudyLightBlob 25s ease-in-out infinite alternate !important;
}

.blob-1 { animation-duration: 28s !important; }
.blob-2 { animation-duration: 32s !important; animation-delay: -8s !important; }
.blob-3 { animation-duration: 30s !important; animation-delay: -5s !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: .08; }
  50% { transform: translate3d(22px,-16px,0) scale(1.05); opacity: .12; }
  100% { transform: translate3d(-18px,28px,0) scale(1.03); opacity: .10; }
}

@media (max-width: 768px) {
  body::before {
    animation: cloudyLightAurora var(--cloudy-light-mobile-speed) ease-in-out infinite alternate !important;
  }
}
 /* ====== CORRECTIF PERFORMANCE MOBILE EXTREME ====== */
@media (max-width: 768px) {
  /* 1. Désactiver les bulles floutées (très lourdes pour le GPU mobile) */
  .aurora-blob {
    display: none !important;
    animation: none !important;
  }

  /* 2. Remplacer les animations de fond complexes par une couleur unie */
  body::before, 
  body::after, 
  .aurora-bg::before, 
  .aurora-bg::after {
    animation: none !important;
    background: #040914 !important; 
    background-image: none !important;
    opacity: 1 !important;
  }

  /* 3. Retirer le flou d'arrière-plan (backdrop-filter) sur TOUTES les cartes */
  .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: #0a1428 !important; /* Couleur unie bleu nuit au lieu de la transparence */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6) !important; /* Ombre simple et légère */
  }

  /* 4. Stopper l'animation de dégradé sur les boutons principaux */
  .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 INDEX ANIMATION TUNING - léger, progressif, mobile-safe
   ========================================================= */
@keyframes cloudySoftReveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cloudyGentlePulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 26px rgba(14,165,233,.18); }
  50% { transform: translateY(-1px) scale(1.018); box-shadow: 0 16px 34px rgba(14,165,233,.30); }
}
@keyframes cloudySoftFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pricing-card-reveal,
.app-card-reveal,
#applications .ios-card {
  animation: cloudySoftReveal .68s cubic-bezier(.22, 1, .36, 1) both !important;
  animation-delay: var(--card-delay, 0ms) !important;
}
.cloudy-hero-cta,
.btn-pulse-animation {
  animation: cloudyGentlePulse 2.65s ease-in-out infinite !important;
}
.cloudy-soft-cta {
  animation: cloudySoftFloat 4.2s ease-in-out infinite !important;
}
#server-selector-bg {
  transition: left .42s cubic-bezier(.22,1,.36,1), background-color .3s ease !important;
}
@media (max-width: 768px) {
  .pricing-card-reveal,
  .app-card-reveal,
  #applications .ios-card {
    animation-duration: .48s !important;
  }
  .cloudy-hero-cta,
  .btn-pulse-animation {
    animation-duration: 3.2s !important;
  }
  .cloudy-soft-cta {
    animation-duration: 5s !important;
  }
}


/* =========================================================
   CLOUDY COMMANDER BUTTON FULL PULSE FIX
   Pulse appliqué au bouton entier, pas seulement au texte.
   ========================================================= */
@keyframes cloudyCommanderWholePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 24px rgba(14,165,233,.22), 0 0 0 0 rgba(14,165,233,.22);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: translateY(-2px) scale(1.028);
    box-shadow: 0 18px 38px rgba(14,165,233,.34), 0 0 0 8px rgba(14,165,233,0);
    filter: brightness(1.08) saturate(1.08);
  }
}

@keyframes cloudyCommanderLightSweep {
  0%, 55% { transform: translateX(-135%) skewX(-16deg); opacity: 0; }
  70% { opacity: .42; }
  100% { transform: translateX(135%) skewX(-16deg); opacity: 0; }
}

.cloudy-command-pulse-shell {
  width: 100% !important;
  border-radius: 999px !important;
  animation: cloudyCommanderWholePulse 2.35s ease-in-out infinite !important;
  transform-origin: center !important;
  will-change: transform, box-shadow, filter !important;
}

#pricing-grid button[id^="btn-cmd-"],
.cloudy-command-button-pulse {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  animation: none !important;
  transform: none !important;
  isolation: isolate !important;
}

#pricing-grid button[id^="btn-cmd-"]::before,
.cloudy-command-button-pulse::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 64%) !important;
  transform: translateX(-135%) skewX(-16deg);
  animation: cloudyCommanderLightSweep 2.35s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#pricing-grid button[id^="btn-cmd-"] > span,
.cloudy-command-button-pulse > span {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .cloudy-command-pulse-shell {
    animation: cloudyCommanderWholePulse 2.9s ease-in-out infinite !important;
  }
  #pricing-grid button[id^="btn-cmd-"]::before,
  .cloudy-command-button-pulse::before {
    animation-duration: 2.9s !important;
  }
}



/* =========================================================
   CLOUDY INDEX FIX - avis toujours visibles + animations légères
   ========================================================= */
#avis-verifies .ios-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.commander-pulse,
#pricing-grid button,
#pricing-grid a,
button[onclick*="selectOffer"] {
  animation: cloudyCommanderPulse 2.45s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes cloudyCommanderPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 18px 42px rgba(14,165,233,.34), 0 0 0 7px rgba(14,165,233,.055), inset 0 1px 0 rgba(255,255,255,.22);
  }
}

@media (max-width: 768px) {
  #avis-verifies,
  #avis-verifies * {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .commander-pulse,
  #pricing-grid button,
  #pricing-grid a,
  button[onclick*="selectOffer"] {
    animation: cloudyCommanderPulse 3s ease-in-out infinite !important;
  }
}



/* =========================================================
   CLOUDY FORMULES COLOR + PRICING REVEAL FIX
   Standard = bleu net, Plus/Ultra inchangés.
   Animation tarifs alignée avec les autres blocs.
   ========================================================= */
#server-selector-bg.bg-blue-600,
#server-selector-bg.cloudy-standard-selector {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .34) !important;
}

#btn-srv-standard.text-white i,
#btn-srv-standard.text-white {
  color: #ffffff !important;
}

#pricing-grid .pricing-card-reveal {
  opacity: 0;
  animation: cloudyTarifReveal .82s cubic-bezier(.22, 1, .36, 1) forwards !important;
  animation-delay: var(--card-delay, 0ms) !important;
}

@keyframes cloudyTarifReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 768px) {
  #pricing-grid .pricing-card-reveal {
    animation-duration: .62s !important;
  }
}


/* =========================================================
   CLOUDY SELECTEUR + CARTES ÉPUISÉES FIX
   Forme identique des sélecteurs + cartes rupture bien rouges.
   ========================================================= */
.cloudy-server-selector {
  border-radius: 24px !important;
  padding: 4px !important;
}
#server-selector-bg {
  border-radius: 19px !important;
}
#btn-srv-standard,
#btn-srv-plus,
#btn-srv-ultra {
  border-radius: 18px !important;
  min-height: 44px !important;
  line-height: 1 !important;
}
#btn-srv-standard i,
#btn-srv-plus i,
#btn-srv-ultra i {
  width: 15px !important;
  text-align: center !important;
}

#pricing-grid .pricing-card-soldout {
  /* Rupture : seulement le contour rouge, sans recolorer toute la carte. */
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.005)),
    var(--cloudy-surface) !important;
  border: 1.5px solid rgba(248,113,113,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(239,68,68,.20), var(--cloudy-shadow) !important;
}
#pricing-grid .pricing-card-soldout button:disabled {
  animation: none !important;
  transform: none !important;
  background: rgba(255,255,255,.045) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(248,113,113,.45) !important;
  box-shadow: none !important;
}
#pricing-grid .pricing-card-soldout::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(248,113,113,.28);
}

@media (max-width: 768px) {
  .cloudy-server-selector { border-radius: 22px !important; }
  #server-selector-bg { border-radius: 17px !important; }
  #btn-srv-standard, #btn-srv-plus, #btn-srv-ultra {
    min-height: 42px !important;
    border-radius: 17px !important;
  }
}



/* =========================================================
   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 REMOVE EMPTY CART FALLBACK */
#order-empty-state { display: none !important; }


/* =========================================================
   CLOUDY QTY + RUPTURE FINAL ADJUSTMENTS
   - Pas de pulse sur boutons +/-
   - Affichage compact : - 1 +
   - Bouton rupture grisé, contour carte seul en rouge
   ========================================================= */
#pricing-grid .qty-selector-simple {
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#pricing-grid .qty-control-simple {
  display: grid !important;
  grid-template-columns: 42px 1fr 42px !important;
  gap: 8px !important;
  align-items: center !important;
}
#pricing-grid .qty-btn {
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  transition: background .18s ease, border-color .18s ease !important;
}
#pricing-grid .qty-btn::before,
#pricing-grid .qty-btn::after {
  display: none !important;
  animation: none !important;
}
#pricing-grid .qty-btn:hover {
  background: rgba(14,165,233,.16) !important;
  border-color: rgba(14,165,233,.28) !important;
  transform: none !important;
}
#pricing-grid .qty-number-wrap {
  min-height: 42px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.28) !important;
}
#pricing-grid .qty-number {
  font-size: 18px !important;
  line-height: 1 !important;
}
#pricing-grid .pricing-card-soldout button:disabled {
  animation: none !important;
  transform: none !important;
  background: rgba(107,114,128,.22) !important;
  color: #d1d5db !important;
  border: 1px solid rgba(156,163,175,.30) !important;
  box-shadow: none !important;
}
#pricing-grid .pricing-card-soldout button:disabled::before,
#pricing-grid .pricing-card-soldout button:disabled::after {
  display: none !important;
  animation: none !important;
}

/* =========================================================
   CLOUDY HERO BUTTON COLORS UPDATE
   Couleurs dédiées : Voir les offres + Applications recommandées
   ========================================================= */
.btn-voir-offres {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 44px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-voir-offres:hover {
  box-shadow: 0 22px 54px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-apps-reco {
  background: linear-gradient(135deg, rgba(16,185,129,.20), rgba(14,165,233,.16)) !important;
  color: #ecfeff !important;
  border: 1px solid rgba(45,212,191,.38) !important;
  box-shadow: 0 16px 38px rgba(16,185,129,.16), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.btn-apps-reco:hover {
  background: linear-gradient(135deg, rgba(16,185,129,.30), rgba(14,165,233,.24)) !important;
  border-color: rgba(45,212,191,.58) !important;
  box-shadow: 0 20px 48px rgba(16,185,129,.24), inset 0 1px 0 rgba(255,255,255,.14) !important;
}



/* =========================================================
   CLOUDY INDEX ZOOM v15 - +5% desktop & mobile
   Ancien zoom 0.90 -> nouveau zoom 0.945.
   ========================================================= */
:root { --cloudy-zoom: 0.945 !important; }
@supports (zoom: 1) {
  body { zoom: 0.945 !important; }
}
@supports not (zoom: 1) {
  html { font-size: 94.5% !important; }
}
@media (max-width: 768px) {
  html, body { zoom: 0.945 !important; }
}

/* Extracted from index.html inline style 2. */
:root {
      --cloudy-bg: #040914 !important;
      --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, .08);
      --cloudy-border-strong: rgba(118, 184, 255, .18);
    }

    /* Fond global premium */
    body {
      background: #040914 !important;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 0%, rgba(14,165,233,.12), transparent 34%),
        radial-gradient(circle at 12% 28%, rgba(139,92,246,.10), transparent 34%),
        radial-gradient(circle at 88% 40%, rgba(16,189,129,.08), transparent 36%),
        #040914;
    }

    /* Aurora blobs premium animés */
    .aurora-bg { display: none !important; }
    body::after {
      content: "";
      position: fixed;
      top: -12%; left: -14%;
      width: 55vw; height: 55vw;
      z-index: -2;
      filter: blur(120px);
      opacity: .14;
      border-radius: 999px;
      background: #0ea5e9;
      animation: cloudyFloat 20s infinite ease-in-out alternate;
      pointer-events: none;
    }
    main::before, section:first-of-type::before {
      content: "";
      position: fixed;
      bottom: -16%; right: -14%;
      width: 60vw; height: 60vw;
      z-index: -2;
      filter: blur(120px);
      opacity: .14;
      border-radius: 999px;
      background: #8b5cf6;
      animation: cloudyFloat 20s infinite ease-in-out alternate;
      animation-delay: -5s;
      pointer-events: none;
    }
    @keyframes cloudyFloat {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(40px,60px) scale(1.1); }
    }

    /* Glassmorphism renforcé sur toutes les cards (Désactivé pour uniformiser avec compte.html)
    .ios-card {
      background: rgba(10, 16, 32, .45) !important;
      border: 1px solid rgba(174, 212, 255, .08) !important;
      border-radius: 28px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.60) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
      transition: transform .3s ease, border-color .3s ease !important;
    }
    .ios-card:hover {
      border-color: rgba(118, 184, 255, .18) !important;
      transform: translateY(-4px) !important;
    }
    */

    /* Utilitaire texte gradient */
    .gradient-text,
    .cloudy-gradient-text {
      background: linear-gradient(135deg, #0ea5e9 0%, #10b981 50%, #8b5cf6 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    /* Titres H1/H2 plus impactants */
    h1 { letter-spacing: -0.02em; }
    h2 { letter-spacing: -0.015em; }

    /* Badge réseau premium (utilisable partout) */
    .network-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      font-size: 13px;
      font-weight: 600;
      color: white;
    }

    /* Selecteur serveur plus premium */
    .cloudy-server-selector {
      background: rgba(10, 16, 32, .55) !important;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(174, 212, 255, .08) !important;
    }

/* Extracted from index.html inline style 3. */
/* Garde la suppression demandée des Applications recommandées */
    #applications,
    .btn-apps-reco {
      display: none !important;
    }

    /* Couleur du bouton Voir les offres comme l'ancien index : bleu → vert */
    .btn-voir-offres {
      background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
      color: #ffffff !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      box-shadow: 0 4px 15px rgba(37,99,235,.32) !important;
    }
    .btn-voir-offres:hover {
      box-shadow: 0 6px 20px rgba(37,99,235,.50) !important;
      transform: translateY(-1px) !important;
    }

    /* Espacements restaurés proches de l'ancien index */
    #accueil {
      min-height: 75vh !important;
      padding-top: 5rem !important;
      padding-bottom: 0 !important;
    }
    #accueil h1 {
      margin-bottom: 1.5rem !important;
    }
    #accueil p {
      margin-bottom: 2.5rem !important;
    }
    #accueil .network-badge {
      margin-top: -1.25rem !important;
    }
    #gallery {
      padding-top: 4rem !important;
      padding-bottom: 2rem !important;
    }
    #caracteristiques {
      padding-top: 2rem !important;
      padding-bottom: 4rem !important;
    }
    #caracteristiques .text-center.mb-16 {
      margin-bottom: 4rem !important;
    }
    #caracteristiques .mt-12 {
      margin-top: 3rem !important;
    }
    #commande-etapes {
      padding-top: 0 !important;
      padding-bottom: 3.5rem !important;
    }
    #offres {
      padding-top: 4rem !important;
      padding-bottom: 4rem !important;
    }
    #offres .text-center.mb-12 {
      margin-bottom: 3rem !important;
    }
    #avis-verifies {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    footer {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }

    /* Section Aperçu comme l'ancien index : carrousel large, images naturelles */
    #gallery .max-w-7xl {
      max-width: 80rem !important;
    }
    #gallery .text-center.mb-10 {
      margin-bottom: 2.5rem !important;
    }
    #gallery h2 {
      font-size: 2.25rem !important;
      line-height: 2.5rem !important;
      margin-bottom: 1rem !important;
    }
    #gallery .carousel-container {
      display: flex !important;
      overflow-x: scroll !important;
      align-items: stretch !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
    #gallery #image-carousel-2 {
      margin-top: 1.5rem !important;
    }
    #gallery .carousel-item {
      flex: 0 0 calc(16.66% - 4px) !important;
      margin-right: 4px !important;
      padding: 0.25rem !important;
      user-select: none !important;
    }
    #gallery .carousel-item img {
      width: 100% !important;
      height: auto !important;
      object-fit: cover !important;
      border-radius: 0.5rem !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    @media (min-width: 768px) {
      #gallery .carousel-item {
        flex: 0 0 calc(8.33% - 5px) !important;
        margin-right: 5px !important;
      }
    }

    @media (max-width: 768px) {
      #accueil {
        min-height: auto !important;
        padding-top: 128px !important;
        padding-bottom: 46px !important;
      }
      #gallery {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
      }
      #gallery h2 {
        font-size: 30px !important;
        line-height: 1.12 !important;
      }
      #gallery .text-center.mb-10 {
        margin-bottom: 2rem !important;
      }
      #gallery .carousel-item {
        flex: 0 0 calc(16.66% - 4px) !important;
        margin-right: 4px !important;
      }
      #caracteristiques,
      #commande-etapes,
      #offres,
      #avis-verifies {
        padding-top: 36px !important;
        padding-bottom: 38px !important;
      }
      #commande-etapes {
        padding-top: 0 !important;
      }
    }

/* Extracted from index.html inline style 4. */
/* Plus d’air dans le hero : titre, badges et bouton moins serrés */
    #accueil {
      min-height: 80vh !important;
      padding-top: 6rem !important;
      padding-bottom: 2.5rem !important;
    }
    #accueil .inline-block {
      margin-bottom: 2rem !important;
    }
    #accueil h1 {
      line-height: 1.08 !important;
      margin-bottom: 2.25rem !important;
      letter-spacing: -0.04em !important;
    }
    #accueil p {
      margin-bottom: 1.75rem !important;
      line-height: 1.65 !important;
    }
    #accueil .flex.flex-wrap.justify-center.gap-2.mb-8 {
      gap: .75rem !important;
      margin-bottom: 2.75rem !important;
    }
    #accueil .network-badge {
      margin-top: 0 !important;
      padding: .6rem 1rem !important;
    }
    #accueil .btn-voir-offres {
      background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
      background-size: 100% 100% !important;
      animation: none !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(37,99,235,.40) !important;
      padding-left: 2.4rem !important;
      padding-right: 2.4rem !important;
    }
    #accueil .btn-voir-offres:hover {
      box-shadow: 0 6px 20px rgba(37,99,235,.60) !important;
      transform: translateY(-1px) !important;
    }

    @media (max-width: 768px) {
      #accueil {
        min-height: auto !important;
        padding-top: 8.75rem !important;
        padding-bottom: 4rem !important;
      }
      #accueil .inline-block {
        margin-bottom: 1.55rem !important;
      }
      #accueil h1 {
        line-height: 1.05 !important;
        margin-bottom: 1.8rem !important;
      }
      #accueil p {
        margin-bottom: 1.55rem !important;
      }
      #accueil .flex.flex-wrap.justify-center.gap-2.mb-8 {
        gap: .65rem !important;
        margin-bottom: 2.2rem !important;
      }
    }

/* Couleur compte/menu uniforme, connecte ou non */
#nav-auth-container a {
  color: #ffffff !important;
}

#menuBtn,
#menuBtn i {
  color: #3b82f6 !important;
}

#accueil .hero-badge-money,
#accueil .hero-badge-money i {
  color: #facc15 !important;
}

#accueil .hero-badge-money {
  background: rgba(234, 179, 8, .12) !important;
  border-color: rgba(250, 204, 21, .30) !important;
}

#accueil .hero-badge-validation,
#accueil .hero-badge-validation i {
  color: #4ade80 !important;
}

#accueil .hero-badge-validation {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(74, 222, 128, .30) !important;
}