/* ====== NAVBAR ====== */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 68px;
      background: rgba(13,17,23,0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      z-index: 1000;
    }

    .logo-wrap {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .nav-logo {
      height: 44px;
      width: 44px;
      border-radius: 12px;
      object-fit: contain;
      padding: 3px;
      background: white;
      display: block;
      flex-shrink: 0;
    }
    .nav-brand {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .nav-brand-name {
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--primary);
      letter-spacing: -0.5px;
    }
    .nav-brand-name span { color: var(--secondary); }
    .nav-brand-slogan {
      font-size: 0.6rem;
      color: var(--muted);
      font-weight: 500;
      white-space: nowrap;
    }
    @media (max-width: 480px) {
      .nav-brand-slogan { display: none; }
      .nav-brand-name { font-size: 0.95rem; }
    }

    .nav-links { display: flex; gap: 6px; align-items: center; }

    .nav-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 0.84rem;
      background: transparent;
      color: var(--muted);
      transition: all 0.2s;
    }
    .nav-btn:hover { background: var(--bg3); color: var(--text); }
    .nav-btn.active { background: var(--bg3); color: var(--primary); }
    .nav-btn.nb-jeu {
      background: linear-gradient(135deg, var(--secondary), #FFB347);
      color: white;
    }
    .nav-btn.nb-jeu:hover { filter: brightness(1.1); }
    .nav-btn.nb-order {
      background: linear-gradient(135deg, var(--primary), #9B60F5);
      color: white;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      border: none;
      background: transparent;
    }
    .hamburger span {
      width: 22px; height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all 0.3s;
    }

    /* ====== LAYOUT ====== */
    .main { padding-top: 68px; }
    .page { display: none; }
    .page.active { display: block; }

    /* ====== HERO ====== */
    .hero {
      background: linear-gradient(135deg, #0D1117 0%, #110026 50%, #0D1117 100%);
      padding: 90px 24px 70px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 60%, rgba(123,53,232,0.15) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-inner { position: relative; z-index: 1; }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 16px;
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 22px;
    }
    .badge-orange {
      background: rgba(123,53,232,0.14);
      border: 1px solid rgba(123,53,232,0.30);
      color: var(--primary);
    }
    .badge-purple {
      background: rgba(247,154,29,0.14);
      border: 1px solid rgba(247,154,29,0.30);
      color: var(--secondary);
    }

    .hero h1 {
      font-size: clamp(2.2rem, 5.5vw, 4.8rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .grad-text {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .grad-game {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-slogan {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 10px !important;
      letter-spacing: 0.5px;
    }
    .hero p {
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 580px;
      margin: 0 auto 36px;
      line-height: 1.7;
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 10px 22px;
      margin-bottom: 50px;
    }
    .live-dot {
      width: 9px; height: 9px;
      background: var(--success);
      border-radius: 50%;
      animation: livepulse 1.6s infinite;
    }
    @keyframes livepulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.5); }
      50% { box-shadow: 0 0 0 6px rgba(63,185,80,0); }
    }
    .live-label { font-size: 0.88rem; color: var(--muted); }
    .live-num { font-size: 1.35rem; font-weight: 800; color: var(--success); }

    /* ====== SECTION WRAPS ====== */
    .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    .wrap-sm { max-width: 680px; margin: 0 auto; padding: 0 24px; }
    .wrap-md { max-width: 860px; margin: 0 auto; padding: 0 24px; }

    .sec-title { text-align: center; margin-bottom: 44px; }
    .sec-title h2 { font-size: 1.9rem; font-weight: 800; margin-bottom: 7px; }
    .sec-title p { color: var(--muted); font-size: 0.95rem; }

    /* ====== GAMELLE CARD ====== */
    .gamelle-section { padding: 72px 0 60px; }

    .gamelle-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 40px;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 44px;
      align-items: center;
    }

    .gamelle-visual {
      background: linear-gradient(135deg, #12002e, #1e0050);
      border: 1px solid rgba(123,53,232,0.3);
      border-radius: 18px;
      padding: 40px 32px;
      text-align: center;
    }
    .food-icon { font-size: 5rem; display: block; margin-bottom: 14px; filter: drop-shadow(0 4px 24px rgba(247,154,29,0.45)); }
    .gamelle-title { font-size: 1.45rem; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
    .gamelle-subtitle { font-size: 0.82rem; color: var(--muted); margin-bottom: 18px; }
    .gamelle-price { font-size: 2.4rem; font-weight: 900; color: var(--secondary); }
    .gamelle-price small { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
    .ticket-info {
      margin-top: 18px;
      background: rgba(63,185,80,0.1);
      border: 1px solid rgba(63,185,80,0.2);
      border-radius: 10px;
      padding: 10px;
      font-size: 0.8rem;
      color: var(--success);
    }

    .items-list { list-style: none; }
    .items-list li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }
    .items-list li:last-child { border-bottom: none; }
    .item-ico {
      width: 40px; height: 40px;
      background: rgba(123,53,232,0.12);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .item-name { font-weight: 600; font-size: 0.95rem; }
    .item-desc { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
    .free-tag {
      margin-left: auto;
      background: rgba(63,185,80,0.15);
      color: var(--success);
      padding: 2px 9px;
      border-radius: 50px;
      font-size: 0.73rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ====== HOW IT WORKS ====== */
    .hiw-section { padding: 0 0 70px; }
    .hiw-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .hiw-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 22px;
      text-align: center;
    }
    .hiw-num {
      width: 36px; height: 36px;
      background: rgba(123,53,232,0.15);
      border: 1px solid rgba(123,53,232,0.35);
      border-radius: 50%;
      color: var(--primary);
      font-weight: 800;
      font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
    }
    .hiw-icon { font-size: 2.4rem; margin-bottom: 14px; display: block; }
    .hiw-card h3 { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
    .hiw-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

    /* ====== ORDER FORM ====== */
    .order-section { padding: 0 0 90px; }

    .form-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 40px;
    }

    .form-group { margin-bottom: 20px; }
    .form-label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 8px;
    }
    .form-input {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 15px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.93rem;
      color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(123,53,232,0.15);
    }
    select.form-input {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237D8590' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      cursor: pointer;
    }
    /* ====== PHONE PREFIX ====== */
    .phone-input-wrap {
      display: flex;
      align-items: stretch;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .phone-input-wrap:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(123,53,232,0.15);
    }
    .phone-prefix {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 12px;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
      border-right: 1px solid var(--border);
      background: rgba(0,0,0,0.18);
      user-select: none;
      cursor: default;
      flex-shrink: 0;
      letter-spacing: 0.3px;
    }
    .phone-flag {
      display: inline-block;
      width: 22px;
      height: 15px;
      border-radius: 2px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: linear-gradient(to right, #007A5E 33.33%, #CE1126 33.33%, #CE1126 66.66%, #FCD116 66.66%);
      vertical-align: middle;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .phone-flag::after {
      content: '★';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 7px;
      color: #FCD116;
      line-height: 1;
    }
    .phone-input-wrap .form-input {
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      flex: 1;
      min-width: 0;
    }
    .phone-input-wrap .form-input:focus {
      border: none !important;
      box-shadow: none !important;
    }

    .qty-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .qty-btn {
      width: 40px; height: 40px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 9px;
      color: var(--text);
      font-size: 1.3rem;
      cursor: pointer;
      transition: all 0.18s;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Poppins', sans-serif;
    }
    .qty-btn:hover { background: var(--primary); border-color: var(--primary); }
    .qty-val { font-size: 1.4rem; font-weight: 800; min-width: 36px; text-align: center; }
    .qty-info { font-size: 0.83rem; color: var(--muted); }

    .price-box {
      background: rgba(247,154,29,0.07);
      border: 1px solid rgba(247,154,29,0.2);
      border-radius: 13px;
      padding: 20px;
      margin: 22px 0;
    }
    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      font-size: 0.88rem;
    }
    .price-row.total {
      border-top: 1px solid var(--border);
      margin-top: 10px;
      padding-top: 12px;
      font-size: 1rem;
      font-weight: 700;
      color: var(--secondary);
    }

    /* ====== BUTTONS ====== */
    .btn {
      width: 100%;
      padding: 14px 22px;
      border-radius: 12px;
      border: none;
      font-family: 'Poppins', sans-serif;
      font-size: 0.97rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--primary), #9B60F5);
      color: white;
    }
    .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(123,53,232,0.4); }
    .btn-game {
      background: linear-gradient(135deg, var(--secondary), #FFB347);
      color: white;
    }
    .btn-game:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(247,154,29,0.4); }
    .btn-ghost {
      background: var(--bg3);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover { border-color: var(--muted); }

    .form-footer {
      text-align: center;
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 14px;
    }

    /* ====== MODAL ====== */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.82);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 24px;
    }
    .overlay.open { display: flex; }

    .modal {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 44px 40px;
      max-width: 460px;
      width: 100%;
      text-align: center;
      animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes popIn {
      from { transform: scale(0.85); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal-icon { font-size: 4rem; margin-bottom: 18px; display: block; }
    .modal h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
    .modal p { color: var(--muted); font-size: 0.88rem; line-height: 1.65; }

    .code-box {
      background: var(--bg3);
      border: 2px solid var(--primary);
      border-radius: 16px;
      padding: 22px;
      margin: 24px 0;
      font-family: 'Courier New', monospace;
      font-size: 2.6rem;
      font-weight: 900;
      letter-spacing: 8px;
      color: var(--secondary);
    }
    .code-note {
      background: rgba(123,53,232,0.08);
      border: 1px solid rgba(123,53,232,0.22);
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 24px;
      text-align: left;
    }
    .modal-btns { display: flex; flex-direction: column; gap: 10px; }

    /* ====== GAME PAGE ====== */
    .game-hero {
      background: linear-gradient(135deg, #0D1117 0%, #110026 50%, #0D1117 100%);
      padding: 88px 24px 60px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .game-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 60%, rgba(123,53,232,0.15) 0%, transparent 65%);
      pointer-events: none;
    }

    .prize-block {
      background: linear-gradient(135deg, var(--bg2), #130030);
      border: 1px solid rgba(123,53,232,0.3);
      border-radius: 22px;
      padding: 40px;
      text-align: center;
      margin-bottom: 26px;
      position: relative;
      overflow: hidden;
    }
    .prize-block::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(123,53,232,0.08) 0%, transparent 70%);
    }
    .prize-week-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
    .prize-emoji { font-size: 4.5rem; display: block; margin: 14px 0; filter: drop-shadow(0 4px 20px rgba(247,154,29,0.5)); }
    .prize-val { font-size: 2rem; font-weight: 900; color: var(--secondary); margin-bottom: 7px; }
    .prize-desc { font-size: 0.88rem; color: var(--muted); }

    /* Countdown */
    .countdown { display: flex; gap: 14px; justify-content: center; margin: 26px 0 6px; }
    .cd-unit {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      text-align: center;
      min-width: 76px;
    }
    .cd-val { font-size: 1.9rem; font-weight: 900; color: var(--game); font-variant-numeric: tabular-nums; }
    .cd-lbl { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

    /* Stats row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 26px;
    }
    .stat-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 16px;
      text-align: center;
    }
    .stat-val { font-size: 2.2rem; font-weight: 900; }
    .stat-lbl { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

    /* Code check */
    .game-form {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 36px;
      margin-bottom: 28px;
    }
    .game-form h3 { font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 6px; }
    .game-form p { color: var(--muted); font-size: 0.85rem; text-align: center; margin-bottom: 22px; }

    .code-input {
      width: 100%;
      background: var(--bg3);
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      font-family: 'Courier New', monospace;
      font-size: 2rem;
      font-weight: 800;
      color: var(--secondary);
      text-align: center;
      letter-spacing: 8px;
      text-transform: uppercase;
      transition: border-color 0.2s;
    }
    .code-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(123,53,232,0.15);
    }

    /* Results */
    .result { display: none; border-radius: 16px; padding: 28px; text-align: center; margin-top: 22px; }
    .result.show { display: block; animation: popIn 0.3s ease; }
    .result-winner { background: rgba(63,185,80,0.09); border: 2px solid var(--success); }
    .result-pending { background: rgba(247,201,72,0.09); border: 2px solid var(--secondary); }
    .result-invalid { background: rgba(248,81,73,0.09); border: 2px solid var(--error); }
    .result-icon { font-size: 3rem; margin-bottom: 10px; display: block; }
    .result h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
    .result p { font-size: 0.88rem; color: var(--muted); }

    .winner-prize-box {
      background: rgba(63,185,80,0.1);
      border: 1px solid rgba(63,185,80,0.2);
      border-radius: 12px;
      padding: 20px;
      margin: 16px 0;
    }

    /* Participants list */
    .list-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 26px;
    }
    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
    }
    .list-header h3 { font-weight: 700; font-size: 0.97rem; }
    .list-realtime { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--muted); }

    .ptable-head {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr;
      gap: 12px;
      padding: 12px 24px;
      background: var(--bg3);
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .ptable-row {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr;
      gap: 12px;
      padding: 14px 24px;
      border-top: 1px solid var(--border);
      font-size: 0.87rem;
      align-items: center;
      transition: background 0.15s;
    }
    .ptable-row:hover { background: var(--bg3); }
    .pname { font-weight: 600; }
    .pzone { font-size: 0.75rem; color: var(--muted); }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 50px;
      font-size: 0.73rem;
      font-weight: 700;
    }
    .chip-winner { background: rgba(63,185,80,0.15); color: var(--success); }
    .chip-pending { background: rgba(247,154,29,0.13); color: var(--secondary); }
    .chip-active { background: rgba(123,53,232,0.13); color: var(--primary); }
    .chip-purple { background: rgba(123,53,232,0.15); color: #A87AF8; }
    .chip-delivered { background: rgba(63,185,80,0.15); color: var(--success); }
    .chip-confirmed { background: rgba(123,53,232,0.13); color: #A87AF8; }
    .chip-in-delivery { background: rgba(247,154,29,0.18); color: var(--secondary); }
    .chip-cancelled { background: rgba(248,81,73,0.13); color: var(--error); }

    .role-badge { display:inline-block; padding:2px 10px; border-radius:50px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
    .role-superadmin { background:rgba(123,53,232,0.15); color:var(--primary); }
    .role-recep { background:rgba(63,185,80,0.15); color:var(--success); }
    .role-livreur { background:rgba(247,154,29,0.15); color:var(--secondary); }

    .tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--error); color:white; font-size:0.67rem; font-weight:700; margin-left:6px; vertical-align:middle; }

    .recep-order-card { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 22px; border-top:1px solid var(--border); gap:16px; flex-wrap:wrap; }
    .recep-order-card:first-child { border-top:none; }
    .roc-info { flex:1; min-width:220px; }
    .roc-name { font-weight:700; font-size:0.95rem; margin-bottom:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .roc-detail { font-size:0.82rem; color:var(--muted); margin-bottom:3px; }
    .roc-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-top:4px; }
    .roc-actions a { text-decoration:none; }

    .delivery-card { display:flex; align-items:flex-start; gap:16px; padding:18px 22px; border-top:1px solid var(--border); flex-wrap:wrap; transition:background 0.2s; }
    .delivery-card:first-child { border-top:none; }
    .delivery-card.dlv-active { background:rgba(247,154,29,0.04); }
    .dlv-status-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0; }
    .dot-active { background:var(--secondary); box-shadow:0 0 0 3px rgba(247,154,29,0.25); animation:pulse-dot 1.5s ease-in-out infinite; }
    .dot-waiting { background:var(--primary); box-shadow:0 0 0 3px rgba(123,53,232,0.2); }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
    .dlv-info { flex:1; min-width:200px; }
    .dlv-name { font-weight:700; font-size:0.95rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .dlv-detail { font-size:0.82rem; color:var(--muted); margin-bottom:3px; }
    .dlv-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-top:4px; }

    .source-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
    .source-chip { padding:7px 16px; border-radius:8px; border:2px solid var(--border); background:var(--bg3); cursor:pointer; font-size:0.82rem; font-weight:600; transition:all 0.2s; color:var(--text); font-family:'Poppins',sans-serif; }
    .source-chip.sel { border-color:var(--primary); background:rgba(123,53,232,0.1); color:var(--primary); }
    .section-hint { background:rgba(123,53,232,0.07); border:1px solid rgba(123,53,232,0.18); border-radius:10px; padding:12px 16px; font-size:0.83rem; color:#A87AF8; margin-bottom:20px; }

    .ccode {
      display: inline-block;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px 9px;
      font-family: 'Courier New', monospace;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--secondary);
    }

    /* Previous winners */
    .prev-winner {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
    }
    .prev-winner:first-child { border-top: none; }
    .pw-ico { font-size: 2rem; flex-shrink: 0; }
    .pw-name { font-weight: 600; font-size: 0.92rem; }
    .pw-week { font-size: 0.77rem; color: var(--muted); }
    .pw-prize { text-align: right; font-weight: 700; color: var(--secondary); font-size: 0.92rem; }
    .pw-type { font-size: 0.72rem; color: var(--muted); }


    /* ====== NOTIFICATION ====== */
    .notif {
      position: fixed;
      top: 82px;
      right: 22px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 11px;
      box-shadow: 0 10px 36px rgba(0,0,0,0.5);
      transform: translateX(calc(100% + 40px));
      transition: transform 0.3s ease;
      z-index: 3000;
      max-width: 300px;
    }
    .notif.show { transform: translateX(0); }
    .notif.success { border-left: 4px solid var(--success); }
    .notif.error { border-left: 4px solid var(--error); }
    .notif-msg { font-size: 0.87rem; font-weight: 600; }

    /* ====== SALES POPUP (glassmorphism) ====== */
    .sales-popup {
      position: fixed;
      bottom: 100px;
      left: 16px;
      background: rgba(22, 27, 34, 0.78);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      border: 1px solid rgba(123, 53, 232, 0.28);
      border-radius: 18px;
      padding: 12px 14px 12px 12px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(123,53,232,0.08);
      z-index: 9990;
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 285px;
      transform: translateX(-115%);
      opacity: 0;
      transition: transform 0.48s cubic-bezier(.22,1,.36,1), opacity 0.38s ease;
      pointer-events: none;
    }
    .sales-popup.show { transform: translateX(0); opacity: 1; pointer-events: all; }
    body.admin-mode .sales-popup { display: none !important; }

    .sales-popup-live-dot {
      position: absolute;
      top: 9px; right: 34px;
      width: 8px; height: 8px;
      background: #3FB950;
      border-radius: 50%;
      animation: sp-pulse 2s ease-in-out infinite;
    }
    @keyframes sp-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.55); }
      50%       { box-shadow: 0 0 0 6px rgba(63,185,80,0); }
    }

    .sales-popup-icon-wrap {
      width: 42px; height: 42px;
      background: linear-gradient(135deg, #6226C8, #9B60F5);
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(123,53,232,0.45);
    }
    .sales-popup-body { flex: 1; min-width: 0; }
    .sales-popup-label { font-size: 0.6rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 2px; }
    .sales-popup-title { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sales-popup-sub { font-size: 0.71rem; color: var(--muted); margin-top: 2px; }
    .sales-popup-close { font-size: 0.75rem; color: var(--muted); cursor: pointer; padding: 3px 6px; border-radius: 6px; flex-shrink: 0; line-height: 1.5; transition: background 0.15s; }
    .sales-popup-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

    /* ====== CHAT FLOATING BUTTON ====== */
    body.admin-mode .chat-fab,
    body.admin-mode .chat-popup { display: none !important; }

    /* ── FAB ─────────────────────────────────────────────── */
    .chat-fab {
      position: fixed; bottom: 24px; right: 20px;
      width: 58px; height: 58px;
      background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
      border-radius: 50%; border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 9985;
      box-shadow: 0 6px 28px rgba(37,211,102,0.55), 0 2px 8px rgba(0,0,0,0.35);
      transition: transform 0.22s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease;
    }
    .chat-fab:hover  { transform: scale(1.1);  box-shadow: 0 8px 38px rgba(37,211,102,0.72), 0 2px 12px rgba(0,0,0,0.4); }
    .chat-fab:active { transform: scale(0.92); }
    .chat-fab-svg { width: 27px; height: 27px; position: relative; z-index: 2; flex-shrink: 0; }
    .chat-fab-pulse {
      position: absolute; inset: -6px; border-radius: 50%;
      border: 2px solid rgba(37,211,102,0.5);
      animation: chat-fab-ring 2.4s ease-out infinite;
      pointer-events: none;
    }
    @keyframes chat-fab-ring {
      0%   { transform: scale(1); opacity: 1; }
      70%  { transform: scale(1.38); opacity: 0; }
      100% { transform: scale(1.38); opacity: 0; }
    }
    .chat-fab-notif {
      position: absolute; top: 4px; right: 4px;
      width: 13px; height: 13px; border-radius: 50%;
      background: #F85149; border: 2px solid #0D1117;
      display: none;
    }
    .chat-fab-notif.visible { display: block; }

    /* ── Popup container ─────────────────────────────────── */
    .chat-popup {
      position: fixed; bottom: 96px; right: 16px;
      width: 340px;
      background: #111B21;
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 22px 64px rgba(0,0,0,0.75), 0 4px 18px rgba(0,0,0,0.45);
      z-index: 9986;
      display: flex; flex-direction: column;
      transform: scale(0.84) translateY(22px);
      transform-origin: bottom right;
      opacity: 0; pointer-events: none;
      transition: transform 0.36s cubic-bezier(.22,1,.36,1), opacity 0.28s ease;
    }
    .chat-popup.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

    /* ── Header ──────────────────────────────────────────── */
    .chat-popup-header {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 13px;
      background: linear-gradient(135deg, #075E54 0%, #1a8a77 100%);
      flex-shrink: 0;
    }
    .chat-hdr-back {
      background: none; border: none; color: rgba(255,255,255,0.8);
      cursor: pointer; padding: 5px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; flex-shrink: 0; line-height: 1;
    }
    .chat-hdr-back:hover { background: rgba(255,255,255,0.16); color: white; }
    .chat-popup-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: white;
      border: 2px solid rgba(255,255,255,0.5);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden; padding: 3px;
    }
    .chat-popup-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
    .chat-popup-info { flex: 1; color: white; min-width: 0; }
    .chat-popup-name { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-popup-status { font-size: 0.67rem; opacity: 0.85; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
    .chat-online-dot {
      width: 7px; height: 7px; background: #a8f4b8; border-radius: 50%; flex-shrink: 0;
      animation: chat-online-pulse 2.4s ease-in-out infinite;
    }
    @keyframes chat-online-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
    .chat-hdr-call {
      color: rgba(255,255,255,0.85); padding: 6px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; text-decoration: none; flex-shrink: 0;
    }
    .chat-hdr-call:hover { background: rgba(255,255,255,0.16); color: white; }

    /* ── Body / zone de messages ─────────────────────────── */
    .chat-popup-body {
      flex: 1; overflow-y: auto;
      padding: 14px 12px 10px;
      background: #0B141A;
      display: flex; flex-direction: column; gap: 8px;
      min-height: 140px; max-height: 240px;
    }
    .chat-date-pill {
      text-align: center;
      font-size: 0.67rem; color: #8696A0;
      background: rgba(11,20,26,0.9); border-radius: 6px;
      padding: 3px 10px; width: fit-content; margin: 0 auto 4px;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .chat-msg-row { display: flex; align-items: flex-end; gap: 7px; }
    .chat-msg-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: white;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden; padding: 2px;
    }
    .chat-msg-avatar img { width: 100%; height: 100%; object-fit: contain; }
    .chat-msg-bubble {
      background: #202C33;
      border-radius: 0 14px 14px 14px;
      padding: 10px 13px 7px;
      max-width: calc(100% - 40px);
      position: relative;
    }
    .chat-msg-bubble::before {
      content: ''; position: absolute; top: 0; left: -7px;
      border: 7px solid transparent;
      border-right-color: #202C33; border-top-color: #202C33;
    }
    .chat-msg-bubble p { font-size: 0.84rem; color: #E9EDEF; line-height: 1.52; margin: 0; word-break: break-word; }
    .chat-msg-time {
      font-size: 0.61rem; color: #8696A0;
      display: flex; align-items: center; justify-content: flex-end; gap: 3px;
      margin-top: 5px;
    }

    /* ── Indicateur de frappe ────────────────────────────── */
    .chat-typing-row { display: flex; align-items: flex-end; gap: 7px; }
    .chat-typing-bubble {
      background: #202C33;
      border-radius: 0 14px 14px 14px;
      padding: 12px 14px;
      display: flex; align-items: center; gap: 5px;
      position: relative;
    }
    .chat-typing-bubble::before {
      content: ''; position: absolute; top: 0; left: -7px;
      border: 7px solid transparent;
      border-right-color: #202C33; border-top-color: #202C33;
    }
    .chat-typing-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #8696A0; flex-shrink: 0;
      animation: chat-typing 1.4s ease-in-out infinite;
    }
    .chat-typing-dot:nth-child(2) { animation-delay: 0.18s; }
    .chat-typing-dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes chat-typing {
      0%,80%,100% { transform: translateY(0); opacity: 0.55; }
      40%          { transform: translateY(-5px); opacity: 1; }
    }

    /* ── Footer / fausse saisie ──────────────────────────── */
    .chat-popup-footer {
      background: #202C33; padding: 10px 12px 12px; flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .chat-input-row {
      display: flex; align-items: center; gap: 8px;
      background: #2A3942; border-radius: 26px;
      padding: 7px 7px 7px 16px;
    }
    .chat-input-real {
      flex: 1; min-width: 0;
      background: none; border: none; outline: none;
      font-family: 'Poppins', sans-serif; font-size: 0.84rem;
      color: #E9EDEF; line-height: 1.4;
    }
    .chat-input-real::placeholder { color: #8696A0; }
    .chat-send-btn {
      width: 38px; height: 38px; border-radius: 50%; border: none;
      background: linear-gradient(135deg, #25D366, #1DA851);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; cursor: pointer;
      box-shadow: 0 3px 10px rgba(37,211,102,0.45);
      transition: filter 0.18s, transform 0.15s;
    }
    .chat-send-btn:hover  { filter: brightness(1.15); transform: scale(1.08); }
    .chat-send-btn:active { transform: scale(0.92); }

    @media (max-width: 400px) {
      .chat-popup { width: calc(100vw - 32px); right: 16px; }
    }

    /* ====== ADMIN NOTIFICATION BADGE ====== */
    .si-notif-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      background: #F85149; color: white;
      border-radius: 9px; font-size: 0.63rem; font-weight: 700;
      margin-left: auto;
      animation: badge-pop 0.3s ease;
    }
    @keyframes badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
    .admin-notif-toast {
      position: fixed; top: 16px; right: 16px;
      background: rgba(22,27,34,0.92); backdrop-filter: blur(16px);
      border: 1px solid rgba(63,185,80,0.4); border-left: 3px solid #3FB950;
      border-radius: 14px; padding: 12px 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      z-index: 99999; max-width: 300px;
      transform: translateX(120%); opacity: 0;
      transition: transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.3s;
      pointer-events: none;
    }
    .admin-notif-toast.show { transform: translateX(0); opacity: 1; pointer-events: all; }
    .ant-title { font-size: 0.78rem; font-weight: 700; color: #3FB950; margin-bottom: 3px; }
    .ant-body  { font-size: 0.8rem; color: var(--text); }
    .ant-meta  { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }

    /* ====== SOCIAL SHARE BUTTONS ====== */
    .share-win-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
    .share-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 18px; border: none; border-radius: 12px;
      font-family: 'Poppins', sans-serif; font-size: 0.84rem; font-weight: 600;
      cursor: pointer; color: white; transition: filter 0.2s, transform 0.15s;
    }
    .share-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
    .share-btn-wa { background: linear-gradient(135deg, #25D366, #128C7E); }
    .share-btn-fb { background: linear-gradient(135deg, #1877F2, #0D5FBF); }

    /* ====== HISTORIQUE GAINS PERSONNELS ====== */
    .hist-wins-section { margin-bottom: 24px; }
    .hist-wins-title { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
    .hist-win-card {
      background: linear-gradient(135deg, rgba(22,27,34,0.95), rgba(30,37,48,0.95));
      border: 1px solid rgba(63,185,80,0.28);
      border-left: 4px solid #3FB950;
      border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
      display: flex; align-items: center; gap: 14px;
    }
    .hist-win-ico { font-size: 1.8rem; flex-shrink: 0; }
    .hist-win-info { flex: 1; }
    .hist-win-prize { font-weight: 700; color: #3FB950; font-size: 0.95rem; }
    .hist-win-meta { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
    .hist-win-code { font-size: 0.72rem; background: var(--bg3); padding: 2px 8px; border-radius: 6px; font-family: monospace; color: var(--secondary); margin-top: 4px; display: inline-block; }

    /* ====== ZONE MAP ====== */
    #zoneMapAdmin {
      height: 400px; border-radius: 14px; overflow: hidden;
      border: 1px solid var(--border); margin-top: 18px;
      position: relative; z-index: 1;
    }
    .zone-map-legend {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    }
    .zone-legend-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.78rem; color: var(--muted);
    }
    .zone-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* ====== CONFETTI ====== */
    .confetti-wrap {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998;
    }
    .cfti {
      position: absolute;
      animation: fall linear forwards;
    }
    @keyframes fall {
      from { transform: translateY(-80px) rotate(0deg); opacity: 1; }
      to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
    }

    /* ====== HISTORIQUE ====== */
    .hist-section { max-width: 860px; margin: 0 auto; padding: 40px 24px 60px; }
    .hist-search-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:36px 32px; margin-bottom:28px; text-align:center; }
    .hist-search-wrap h2 { font-size:1.4rem; font-weight:800; margin-bottom:8px; }
    .hist-search-wrap p { color:var(--muted); font-size:0.87rem; margin-bottom:24px; }
    .hist-search-row { display:flex; gap:10px; max-width:480px; margin:0 auto; }
    .hist-search-row .phone-input-wrap { flex:1; min-width:0; }

    .loyalty-card { background:linear-gradient(135deg,rgba(123,53,232,0.12),rgba(247,154,29,0.08)); border:1px solid rgba(123,53,232,0.25); border-radius:18px; padding:24px 28px; margin-bottom:20px; }
    .loyalty-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
    .loyalty-title { font-size:1rem; font-weight:800; }
    .loyalty-sub { font-size:0.82rem; color:var(--muted); margin-top:2px; }
    .loyalty-pts { font-size:2.4rem; font-weight:900; color:var(--primary); line-height:1; }
    .loyalty-pts small { font-size:0.75rem; color:var(--muted); font-weight:400; display:block; text-align:right; }
    .loyalty-bar-wrap { background:var(--bg3); border-radius:8px; height:10px; margin-bottom:10px; overflow:hidden; }
    .loyalty-bar-fill { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--primary),var(--secondary)); transition:width 0.8s ease; }
    .loyalty-bar-label { display:flex; justify-content:space-between; font-size:0.77rem; color:var(--muted); }
    .loyalty-bonus-list { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .loyalty-bonus-chip { background:rgba(63,185,80,0.12); border:1px solid rgba(63,185,80,0.3); border-radius:8px; padding:6px 14px; font-size:0.8rem; font-weight:700; color:var(--success); }

    .referral-card { background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:22px 28px; margin-bottom:20px; }
    .referral-card h3 { font-weight:800; margin-bottom:6px; }
    .referral-card p { font-size:0.84rem; color:var(--muted); margin-bottom:16px; }
    .referral-code-box { background:var(--bg3); border:2px dashed var(--primary); border-radius:12px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .referral-code-val { font-family:'Courier New',monospace; font-size:1.5rem; font-weight:900; color:var(--secondary); letter-spacing:3px; }
    .referral-stats { display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
    .referral-stat { text-align:center; }
    .referral-stat .rs-val { font-size:1.5rem; font-weight:900; color:var(--primary); }
    .referral-stat .rs-lbl { font-size:0.75rem; color:var(--muted); }

    .hist-order-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin-bottom:12px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .hoc-code { font-family:'Courier New',monospace; font-size:1.1rem; font-weight:900; color:var(--secondary); letter-spacing:2px; min-width:80px; }
    .hoc-info { flex:1; min-width:160px; }
    .hoc-name { font-weight:700; font-size:0.92rem; }
    .hoc-meta { font-size:0.8rem; color:var(--muted); margin-top:2px; }
    .hoc-right { text-align:right; }
    .hoc-total { font-weight:800; color:var(--secondary); font-size:0.95rem; }
    .hoc-date { font-size:0.75rem; color:var(--muted); margin-top:2px; }

    /* ====== RÉSERVATION ====== */
    .schedule-toggle-row { display:flex; gap:8px; margin-bottom:0; }
    .sched-chip { padding:8px 18px; border-radius:8px; border:2px solid var(--border); background:var(--bg3); cursor:pointer; font-size:0.85rem; font-weight:600; transition:all 0.2s; color:var(--text); font-family:'Poppins',sans-serif; }
    .sched-chip.sel { border-color:var(--primary); background:rgba(123,53,232,0.1); color:var(--primary); }
    .schedule-picker { background:rgba(123,53,232,0.06); border:1px solid rgba(123,53,232,0.2); border-radius:12px; padding:14px 18px; margin-top:12px; }

    /* ====== PARRAINAGE DANS FORMULAIRE ====== */
    .referral-input-wrap { display:flex; gap:8px; align-items:center; }
    .referral-input-wrap .form-input { flex:1; }
    .referral-check-btn { padding:10px 16px; border-radius:10px; border:none; background:var(--bg3); color:var(--text); cursor:pointer; font-family:'Poppins',sans-serif; font-size:0.82rem; font-weight:600; border:1px solid var(--border); white-space:nowrap; transition:all 0.2s; }
    .referral-check-btn:hover { border-color:var(--primary); color:var(--primary); }

    /* ====== INVITE LANDING ====== */
    .invite-overlay {
      position: fixed; inset: 0;
      background: linear-gradient(135deg, #050910 0%, #1a0038 50%, #0D1117 100%);
      display: none; align-items: center; justify-content: center;
      z-index: 5000; padding: 20px; overflow: hidden;
    }
    .invite-overlay.open { display: flex; }
    .invite-bg-glow {
      position: absolute; width: 700px; height: 700px;
      background: radial-gradient(ellipse, rgba(123,53,232,0.22) 0%, transparent 65%);
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      pointer-events: none;
    }
    .invite-card {
      position: relative;
      background: rgba(22,27,34,0.95);
      border: 1px solid rgba(123,53,232,0.35);
      border-radius: 28px; padding: 36px 28px 28px;
      text-align: center; max-width: 400px; width: 100%;
      animation: scratchIn 0.5s cubic-bezier(.34,1.56,.64,1);
      backdrop-filter: blur(20px);
      box-shadow: 0 0 70px rgba(123,53,232,0.18), 0 24px 64px rgba(0,0,0,0.55);
    }
    .invite-logo { display:flex; align-items:center; justify-content:center; gap:8px; font-size:1rem; font-weight:900; margin-bottom:20px; }
    .invite-logo span { color:var(--secondary); }
    .invite-logo-img { height:28px; width:auto; object-fit:contain; border-radius:6px; }
    .invite-copyright { margin-top:18px; font-size:0.7rem; color:var(--muted); opacity:0.6; text-align:center; }
    .invite-avatar-wrap { position:relative; width:90px; height:90px; margin:0 auto 18px; }
    .invite-avatar {
      width:90px; height:90px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:2rem; font-weight:900; color:#fff;
      box-shadow:0 8px 32px rgba(0,0,0,0.45); position:relative; z-index:1;
    }
    .invite-avatar-ring {
      position:absolute; inset:-4px; border-radius:50%;
      background: conic-gradient(var(--primary), var(--secondary), var(--primary));
      opacity:0.6; animation:spin 3s linear infinite;
    }
    .invite-avatar-ring::after {
      content:''; position:absolute; inset:3px; border-radius:50%;
      background: rgba(22,27,34,0.95);
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .invite-title { font-size:1.25rem; font-weight:800; margin-bottom:5px; line-height:1.35; }
    .invite-subtitle { color:var(--muted); font-size:0.88rem; margin-bottom:20px; }
    .invite-stats-row {
      display:flex; align-items:center; justify-content:center; gap:14px;
      background:rgba(255,255,255,0.04); border:1px solid var(--border);
      border-radius:14px; padding:14px 18px; margin-bottom:18px;
    }
    .invite-stat-item { text-align:center; }
    .invite-stat-num { font-size:1.05rem; font-weight:900; color:var(--primary); }
    .invite-stat-txt { font-size:0.66rem; color:var(--muted); margin-top:2px; }
    .invite-stat-div { width:1px; height:32px; background:var(--border); }
    .invite-bonus-badge {
      background:linear-gradient(135deg,rgba(63,185,80,0.1),rgba(247,154,29,0.08));
      border:1px solid rgba(63,185,80,0.25); border-radius:12px;
      padding:12px 16px; font-size:0.83rem; color:var(--success);
      margin-bottom:22px; line-height:1.5;
    }
    /* Referral link display */
    .ref-link-wrap { margin-bottom:14px; }
    .ref-link-label { font-size:0.7rem; font-weight:700; color:var(--muted); letter-spacing:0.8px; text-transform:uppercase; margin-bottom:8px; }
    .ref-link-box {
      display:flex; align-items:center; gap:8px;
      background:var(--bg3); border:1px solid var(--border);
      border-radius:10px; padding:10px 12px;
    }
    .ref-link-val {
      flex:1; font-size:0.78rem; color:var(--primary); font-family:monospace;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
    }

    /* ====== CARTE À GRATTER ====== */
    .scratch-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.92);
      backdrop-filter: blur(10px);
      display: none; align-items: center; justify-content: center;
      z-index: 4000; padding: 20px;
    }
    .scratch-overlay.open { display: flex; }
    .scratch-modal {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 36px 28px 28px;
      text-align: center;
      max-width: 380px; width: 100%;
      animation: scratchIn 0.4s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes scratchIn {
      from { opacity:0; transform:scale(0.7) translateY(30px); }
      to   { opacity:1; transform:scale(1) translateY(0); }
    }
    .scratch-header-icon { font-size: 2.8rem; display:block; margin-bottom:10px; }
    .scratch-modal h2 { font-size:1.25rem; font-weight:800; margin-bottom:6px; }
    .scratch-modal .scratch-sub { font-size:0.85rem; color:var(--muted); margin-bottom:20px; }
    .scratch-wrap {
      position: relative;
      width: 300px; height: 180px;
      margin: 0 auto 16px;
      border-radius: 18px;
      overflow: hidden;
      cursor: crosshair;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .scratch-prize {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px; padding: 16px;
    }
    .scratch-prize-icon { font-size: 3rem; line-height: 1; }
    .scratch-prize-label { font-weight: 800; font-size: 1rem; }
    .scratch-prize-code { font-size: 0.75rem; color: var(--muted); margin-top: 4px; letter-spacing: 1px; }
    #sCanvas {
      position: absolute; inset: 0;
      cursor: crosshair; border-radius: 18px;
      touch-action: none;
    }
    .scratch-hint {
      font-size: 0.82rem; color: var(--muted);
      margin-bottom: 16px; animation: pulse 1.5s ease infinite;
    }
    @keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
    .scratch-progress-wrap {
      background: var(--bg3); border-radius: 8px;
      height: 6px; margin: 0 auto 16px; max-width:260px; overflow:hidden;
    }
    .scratch-progress-bar {
      height: 100%; border-radius: 8px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      width: 0%; transition: width 0.2s;
    }
    /* ====== ANALYTICS ====== */
    .analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px; }
    .chart-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:22px; }
    .chart-card h4 { font-weight:700; font-size:0.92rem; margin-bottom:18px; }
    .bar-chart { display:flex; align-items:flex-end; gap:8px; height:120px; }
    .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
    .bar-fill { width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--primary),#5920C8); min-height:4px; transition:height 0.6s ease; }
    .bar-fill.orange { background:linear-gradient(180deg,var(--secondary),#D4780A); }
    .bar-fill.green { background:linear-gradient(180deg,var(--success),#2A8A38); }
    .bar-val { font-size:0.68rem; font-weight:700; color:var(--muted); }
    .bar-lbl { font-size:0.65rem; color:var(--muted); text-align:center; white-space:nowrap; }
    .hbar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .hbar-label { font-size:0.78rem; color:var(--text); min-width:90px; }
    .hbar-track { flex:1; background:var(--bg3); border-radius:4px; height:8px; overflow:hidden; }
    .hbar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--primary),#9B60F5); transition:width 0.8s ease; }
    .hbar-val { font-size:0.75rem; font-weight:700; color:var(--muted); min-width:30px; text-align:right; }
    .donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
    .donut-legend { display:flex; flex-direction:column; gap:8px; }
    .donut-leg-item { display:flex; align-items:center; gap:8px; font-size:0.8rem; }
    .donut-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .kpi-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
    .kpi-mini { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; flex:1; min-width:120px; }
    .kpi-mini .km-lbl { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
    .kpi-mini .km-val { font-size:1.6rem; font-weight:900; }
    .kpi-mini .km-sub { font-size:0.75rem; color:var(--muted); margin-top:2px; }
    .kpi-mini .km-trend { display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:middle; }
    .kpi-mini .km-trend.up   { background:rgba(63,185,80,0.15); color:var(--success); }
    .kpi-mini .km-trend.down { background:rgba(248,81,73,0.15);  color:var(--error); }
    .kpi-mini .km-trend.flat { background:rgba(139,148,158,0.15); color:var(--muted); }

    /* Top Clients table */
    .top-clients-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
    .top-clients-table th { color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; padding:6px 10px; border-bottom:1px solid var(--border); text-align:left; font-weight:600; }
    .top-clients-table td { padding:10px 10px; border-bottom:1px solid rgba(139,148,158,0.1); vertical-align:middle; }
    .top-clients-table tr:last-child td { border-bottom:none; }
    .top-clients-table tr:hover td { background:rgba(123,53,232,0.06); }
    .tc-rank { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; }
    .tc-rank-1 { background:linear-gradient(135deg,#FFD700,#FFA500); color:#1a1a1a; }
    .tc-rank-2 { background:linear-gradient(135deg,#C0C0C0,#A0A0A0); color:#1a1a1a; }
    .tc-rank-3 { background:linear-gradient(135deg,#CD7F32,#A0522D); color:#fff; }
    .tc-rank-n { background:var(--bg3); color:var(--muted); }
    .tc-bar-wrap { background:var(--bg3); border-radius:4px; height:6px; min-width:60px; max-width:120px; overflow:hidden; }
    .tc-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--primary),var(--secondary)); }

    /* ====== TIRAGE ANIMÉ ====== */
    .slot-machine { background:var(--bg3); border:2px solid var(--primary); border-radius:16px; padding:24px; text-align:center; margin:20px 0; overflow:hidden; position:relative; }
    .slot-title { font-size:0.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
    .slot-reel { height:60px; overflow:hidden; position:relative; }
    .slot-name { font-size:1.8rem; font-weight:900; color:var(--text); transition:transform 0.08s linear; line-height:60px; }
    .slot-name.winner { color:var(--secondary); animation:pulse-winner 0.5s ease infinite alternate; }
    @keyframes pulse-winner { from{transform:scale(1)} to{transform:scale(1.05)} }
    .slot-overlay { position:absolute; inset:0; background:linear-gradient(180deg,var(--bg3) 0%,transparent 30%,transparent 70%,var(--bg3) 100%); pointer-events:none; }
    .draw-share-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }

    /* ====== PAGE RÉSULTATS PUBLICS ====== */
    .draw-result-section { padding:60px 24px; text-align:center; }
    .draw-result-card { max-width:520px; margin:0 auto; background:linear-gradient(135deg,rgba(63,185,80,0.08),rgba(247,201,72,0.08)); border:1px solid rgba(63,185,80,0.25); border-radius:24px; padding:40px 32px; }
    .draw-winner-name { font-size:2rem; font-weight:900; color:var(--success); margin:16px 0 8px; }
    .draw-winner-code { font-family:'Courier New',monospace; font-size:1.1rem; color:var(--muted); margin-bottom:20px; }
    .draw-no-winner { max-width:440px; margin:0 auto; text-align:center; color:var(--muted); }

    /* ====== FOOTER ====== */
    .footer {
      background: var(--bg2);
      border-top: 1px solid var(--border);
      padding: 48px 24px 32px;
      margin-top: 0;
    }
    .footer-inner {
      max-width: 1140px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.8fr 1fr 1.2fr 1fr;
      gap: 40px;
      align-items: start;
    }
    .footer-brand-block { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
    .footer-logo {
      width: 50px; height: 50px;
      border-radius: 12px;
      background: white;
      padding: 4px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .footer-brand-name { font-size: 1.3rem; font-weight: 900; color: var(--primary); }
    .footer-brand-name span { color: var(--secondary); }
    .footer-tagline { font-size: 0.88rem; font-weight: 600; color: var(--primary); font-style: italic; margin-bottom: 10px; }
    .footer-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
    .footer-col-title { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
    .footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links-list li a {
      font-size: 0.88rem;
      color: var(--text);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links-list li a:hover { color: var(--primary); }
    .footer-contact p { font-size: 0.85rem; color: var(--muted); line-height: 1.8; }
    .footer-contact strong { color: var(--text); }
    .footer-bottom {
      max-width: 1100px;
      margin: 32px auto 0;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-copy { font-size: 0.78rem; color: var(--muted); }
    .footer-copy strong { color: var(--text); }
    .footer-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      color: var(--muted);
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 4px 12px;
    }
    .pwa-install-btn {
      display: none;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--primary), #9B60F5);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 10px 18px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 500;
      box-shadow: 0 4px 20px rgba(123,53,232,0.4);
    }
    .pwa-install-btn.visible { display: flex; }
    .pwa-install-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

    /* ====== DRAWER OVERLAY ====== */
    .drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(3px);
      z-index: 1100;
    }
    .drawer-overlay.open { display: block; }

    /* ====== RESPONSIVE ====== */
    @media (max-width: 860px) {
      .hamburger { display: flex; }

      .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0; right: 0;
        width: min(300px, 82vw);
        height: 100dvh;
        background: var(--bg2);
        border-left: 1px solid var(--border);
        padding: 0 0 24px;
        gap: 0;
        z-index: 1200;
        transform: translateX(110%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        overflow-y: auto;
        box-shadow: -8px 0 32px rgba(0,0,0,0.4);
      }
      .nav-links.open { transform: translateX(0) !important; }

      .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 10px;
      }
    }
    .drawer-header { display: none; }
    @media (max-width: 860px) {
      .drawer-header { display: flex; }
      .drawer-brand {
        font-size: 1.1rem;
        font-weight: 900;
        letter-spacing: -0.5px;
      }
      .drawer-close {
        background: var(--bg3);
        border: none;
        color: var(--text);
        width: 34px; height: 34px;
        border-radius: 8px;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
      }
      .nav-btn { width: 100%; text-align: left; padding: 13px 20px; border-radius: 0; border-bottom: 1px solid rgba(48,54,61,0.4); }

      .gamelle-card { grid-template-columns: 1fr; gap: 28px; }
      .hiw-grid { grid-template-columns: repeat(2, 1fr); }
      .dash-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-row { grid-template-columns: repeat(3, 1fr); }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-inner > :first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
      .hiw-grid { grid-template-columns: 1fr; }
      .dash-grid { grid-template-columns: 1fr; }
      .stats-row { grid-template-columns: 1fr; gap: 10px; }
      .countdown { gap: 8px; }
      .cd-unit { min-width: 58px; padding: 10px 8px; }
      .cd-val { font-size: 1.4rem; }
      .form-card, .game-form, .prize-mgr, .game-mgr { padding: 22px 16px; }
      .modal { padding: 28px 20px; }
      .prize-block { padding: 26px 18px; }
      .prize-types { grid-template-columns: 1fr; }
      .ptable-head, .ptable-row { grid-template-columns: 1.6fr 1fr; }
      .ptable-head div:nth-child(3), .ptable-row div:nth-child(3) { display: none; }
      .footer-inner { grid-template-columns: 1fr; gap: 28px; }
      .gamelle-card { padding: 22px 18px; }
      .code-box { font-size: 2rem; letter-spacing: 5px; }
      .hero h1 { font-size: clamp(1.9rem, 8vw, 4rem); }
      .table-top { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 360px) {
      .navbar { padding: 0 14px; }
      .cd-unit { min-width: 50px; padding: 8px 6px; }
      .cd-val { font-size: 1.2rem; }
      .nav-brand-name { font-size: 0.85rem; }
      .nav-logo { height: 36px; width: 36px; }
    }

    .mt-16 { margin-top: 16px; }
    .mt-24 { margin-top: 24px; }
    .text-muted { color: var(--muted); }
    .text-success { color: var(--success); }
    .text-secondary { color: var(--secondary); }
    .font-bold { font-weight: 700; }
    .text-sm { font-size: 0.85rem; }
    .text-xs { font-size: 0.75rem; }
    .flex-row { display: flex; align-items: center; gap: 12px; }
    .flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .empty-state {
      padding: 40px;
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }

    /* ====== CLASSEMENT MENSUEL ====== */
    .leaderboard-section { background: var(--bg2); border-top: 1px solid var(--border); padding: 60px 24px; }
    .lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 32px 0 28px; flex-wrap: wrap; }
    .lb-podium-item { text-align: center; }
    .lb-podium-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; color: #fff; margin: 0 auto 8px; position: relative; }
    .lb-podium-avatar.first { width: 78px; height: 78px; font-size: 1.6rem; box-shadow: 0 0 0 3px #FFD700, 0 0 24px rgba(255,215,0,0.35); }
    .lb-podium-avatar.second { box-shadow: 0 0 0 3px #C0C0C0; }
    .lb-podium-avatar.third { box-shadow: 0 0 0 3px #CD7F32; }
    .lb-podium-crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 1.2rem; }
    .lb-podium-name { font-size: 0.84rem; font-weight: 700; margin-bottom: 4px; }
    .lb-podium-count { font-size: 0.72rem; color: var(--muted); }
    .lb-podium-bar { border-radius: 8px 8px 0 0; min-height: 20px; margin: 8px auto 0; width: 48px; }
    .lb-list { max-width: 640px; margin: 0 auto; }
    .lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--bg3); border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border); }
    .lb-rank-num { font-size: 1rem; font-weight: 900; min-width: 28px; color: var(--muted); }
    .lb-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 900; color: #fff; flex-shrink: 0; }
    .lb-info { flex: 1; }
    .lb-name { font-weight: 700; font-size: 0.88rem; }
    .lb-zone { font-size: 0.72rem; color: var(--muted); }
    .lb-count { font-weight: 900; color: var(--secondary); font-size: 0.92rem; white-space: nowrap; }

    /* ====== OFFRES FLASH ====== */
    .flash-banner {
      display: none;
      padding: 13px 24px;
      background: linear-gradient(90deg, #5B12C8, #F79A1D, #7B35E8, #F79A1D, #5B12C8);
      background-size: 300% auto;
      animation: flashGradient 4s linear infinite;
      color: white;
      font-weight: 700;
      font-size: 0.9rem;
      text-align: center;
      position: sticky;
      top: 68px;
      z-index: 800;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .flash-banner.visible { display: block; }
    @keyframes flashGradient { 0%{background-position:0% center} 100%{background-position:300% center} }
    .flash-cd { font-family: 'Courier New', monospace; font-weight: 900; background: rgba(0,0,0,0.25); padding: 2px 9px; border-radius: 6px; margin: 0 4px; letter-spacing: 1px; }

    /* ====== COMMANDE RAPIDE ====== */
    .quick-fill-link {
      display: inline-block;
      font-size: 0.8rem;
      color: var(--primary);
      cursor: pointer;
      margin-top: 7px;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 3px;
      background: none;
      border: none;
      font-family: 'Poppins', sans-serif;
    }
    .quick-fill-link:hover { color: #9B60F5; }

    /* ====== TIRAGE EN DIRECT — SPECTATEURS ====== */
    .live-spectators-panel {
      background: linear-gradient(135deg, rgba(123,53,232,0.07), rgba(247,154,29,0.04));
      border: 1px solid rgba(123,53,232,0.22);
      border-radius: 16px;
      padding: 20px 22px;
      margin-bottom: 20px;
    }
    .lsp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
    .lsp-title { font-weight: 700; font-size: 0.97rem; display: flex; align-items: center; gap: 8px; }
    .lsp-counter { display: flex; align-items: center; gap: 7px; background: rgba(123,53,232,0.15); padding: 6px 14px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; color: var(--primary); }
    .lsp-reactions { display: flex; gap: 10px; flex-wrap: wrap; }
    .lsp-react-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 50px; padding: 7px 16px; font-size: 1rem; cursor: pointer; transition: all 0.18s; color: var(--text); font-family: 'Poppins', sans-serif; }
    .lsp-react-btn:hover { border-color: var(--primary); background: rgba(123,53,232,0.1); transform: scale(1.1); }
    .lsp-reaction-counts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
    .lsp-rc-item { display: flex; align-items: center; gap: 4px; }
    .floating-emoji {
      position: fixed;
      font-size: 1.9rem;
      pointer-events: none;
      z-index: 9999;
      animation: floatUp 2.2s ease forwards;
    }
    @keyframes floatUp {
      from { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
      to   { opacity: 0; transform: translateY(-220px) scale(1.6) rotate(15deg); }
    }

    /* ====== GALERIE SOCIALE ====== */
    .gallery-section { padding: 60px 24px; background: var(--bg); border-top: 1px solid var(--border); }
    .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
    .gallery-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: default; transition: transform 0.2s, box-shadow 0.2s; }
    .gallery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
    .gallery-img { width: 100%; aspect-ratio: 1; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 3.6rem; }
    .gallery-body { padding: 12px 14px 14px; }
    .gallery-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .gallery-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 900; color: #fff; flex-shrink: 0; }
    .gallery-name { font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .gallery-zone { font-size: 0.68rem; color: var(--muted); }
    .gallery-caption { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; line-height: 1.55; }
    .gallery-actions { display: flex; align-items: center; gap: 10px; }
    .gallery-like-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; color: var(--muted); font-family: 'Poppins', sans-serif; font-size: 0.8rem; padding: 0; transition: color 0.15s; }
    .gallery-like-btn.liked { color: #FF6B6B; }
    .gallery-like-btn:hover { color: #FF6B6B; }
    .gallery-winner-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); color: #FFD700; border-radius: 50px; padding: 1px 7px; font-size: 0.62rem; font-weight: 700; }

    @media (max-width: 560px) {
      .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .lb-podium { gap: 10px; }
    }
    @media (max-width: 360px) {
      .gallery-grid { grid-template-columns: 1fr; }
    }

    /* ====== MODE RUSH ====== */
    .rush-pill {
      display: none;
      align-items: center;
      gap: 6px;
      background: var(--error);
      color: white;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 5px 13px;
      border-radius: 20px;
      font-family: 'Courier New', monospace;
      letter-spacing: 0.5px;
      animation: rushPulse 1.6s ease-in-out infinite;
      white-space: nowrap;
    }
    .rush-pill.visible { display: flex; }
    @keyframes rushPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.82;transform:scale(1.04)} }
    .order-closed-notice {
      background: rgba(248,81,73,0.09);
      border: 1px solid rgba(248,81,73,0.28);
      border-radius: 14px;
      padding: 26px;
      text-align: center;
      display: none;
      margin-bottom: 16px;
    }
    .order-closed-notice.visible { display: block; }

    /* ====== CARTE DE TAMPONS ====== */
    .stamp-card-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; margin-bottom: 20px; }
    .stamp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
    .stamp-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; max-width: 400px; margin: 0 auto 14px; }
    .stamp-cell { aspect-ratio: 1; background: var(--bg3); border: 2px dashed var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: all 0.3s; }
    .stamp-cell.earned { background: rgba(123,53,232,0.14); border: 2px solid var(--primary); animation: stampPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
    .stamp-cell.reward { background: rgba(247,154,29,0.14); border: 2px solid var(--secondary); }
    @keyframes stampPop { 0%{transform:scale(0.4);opacity:0} 60%{transform:scale(1.25)} 100%{transform:scale(1);opacity:1} }
    .stamp-progress-bar { background: var(--bg3); border-radius: 999px; height: 8px; margin: 0 auto 10px; max-width: 400px; overflow: hidden; }
    .stamp-progress-fill { background: linear-gradient(90deg,var(--primary),var(--secondary)); height: 100%; border-radius: 999px; transition: width 0.6s ease; }
    .stamp-reward-banner { background: rgba(247,154,29,0.1); border: 1px solid rgba(247,154,29,0.35); border-radius: 12px; padding: 14px 18px; text-align: center; margin-top: 10px; }
    .stamp-hint { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 6px; }
    .chip-free-gamelle { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; }
    .hoc-free { border-left: 3px solid var(--success); background: rgba(63,185,80,0.04); }

    /* ====== FIDÉLITÉ — Panel Réceptionniste ====== */
    .fid-info-banner { background: rgba(123,53,232,0.08); border: 1px solid rgba(123,53,232,0.2); border-radius: 12px; padding: 14px 18px; font-size: 0.84rem; color: var(--muted); margin-bottom: 20px; line-height: 1.55; }
    .fid-section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .fid-client-card { display: flex; align-items: center; gap: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; transition: all 0.2s; }
    .fid-client-card.fid-eligible { border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.04); }
    .fid-client-card.fid-inprogress { border-color: rgba(247,154,29,0.35); background: rgba(247,154,29,0.04); }
    .fid-client-info { flex: 1; min-width: 0; }
    .fid-client-name { font-weight: 800; font-size: 1rem; margin-bottom: 3px; }
    .fid-client-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
    .fid-stamps-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; }
    .dlv-free { border-left: 3px solid var(--success); }

    /* ====== LANGUE ====== */
    .lang-toggle { background: var(--bg3); border: 1.5px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 1rem; cursor: pointer; transition: all 0.2s; line-height: 1; }
    #nb-admin { display: none; } /* Caché par défaut — visible uniquement après connexion admin */
    .lang-toggle:hover { border-color: var(--primary); }
    @media (max-width: 860px) { .lang-toggle { margin: 4px 12px; width: calc(100% - 24px); text-align: left; padding: 10px 14px; } }

    /* ====== ÉDITEUR DE TEXTES ====== */
    .texts-section-header { font-weight: 700; font-size: 0.9rem; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; padding: 14px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; margin-top: 18px; }
    .texts-section-header:first-child { margin-top: 0; }
    .text-row { display: grid; grid-template-columns: 160px 1fr 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bg3); }
    .text-row-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
    .text-row input, .text-row textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: 0.84rem; resize: vertical; }
    .text-row input:focus, .text-row textarea:focus { border-color: var(--primary); outline: none; }
    .text-row .btn-reset { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.75rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
    .text-row .btn-reset:hover { border-color: var(--error); color: var(--error); }
    .texts-lang-header { display: grid; grid-template-columns: 160px 1fr 1fr auto; gap: 8px; padding: 6px 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
    .texts-save-bar { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
    @media (max-width: 700px) {
      .text-row, .texts-lang-header { grid-template-columns: 1fr 1fr; }
      .text-row-label, .texts-lang-header span:first-child { display: none; }
      .text-row .btn-reset { display: none; }
    }

    /* ====== MISE À JOUR ====== */
    .update-zone { border: 2px dashed var(--border); border-radius: 16px; padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.25s; background: var(--bg3); }
    .update-zone:hover, .update-zone.drag-over { border-color: var(--primary); background: rgba(123,53,232,0.07); }
    .update-zone.has-file { border-color: var(--success); background: rgba(63,185,80,0.07); }
    .update-zone-icon { font-size: 2.6rem; margin-bottom: 12px; }
    .update-zone-label { font-size: 0.92rem; color: var(--muted); }
    .update-zone-filename { font-size: 0.88rem; color: var(--success); font-weight: 700; margin-top: 8px; }
    .update-progress { height: 6px; background: var(--bg3); border-radius: 999px; overflow: hidden; margin: 16px 0; display: none; }
    .update-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 999px; transition: width 0.4s; width: 0%; }
    .update-result { border-radius: 12px; padding: 16px 18px; margin-top: 14px; display: none; }
    .update-result.success { background: rgba(63,185,80,0.1);  border: 1px solid rgba(63,185,80,0.3);  display: block; }
    .update-result.error   { background: rgba(248,81,73,0.1);  border: 1px solid rgba(248,81,73,0.3);  display: block; }
    .update-file-list { font-size: 0.78rem; color: var(--muted); margin-top: 10px; max-height: 120px; overflow-y: auto; }

    /* ====== TUNNEL ABANDON ====== */
    .abandon-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 2200; padding: 24px; }
    .abandon-overlay.open { display: flex; }
    .abandon-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 24px; padding: 36px 28px; max-width: 400px; width: 100%; text-align: center; animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    .abandon-cart { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 18px 0; text-align: left; }
    .abandon-cart-row { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 4px 0; }
    .abandon-cart-total { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; font-weight: 800; color: var(--secondary); font-size: 0.95rem; }

    /* ====== NIVEAUX FIDÉLITÉ ====== */
    .level-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 13px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; }
    .level-rookie  { background: rgba(125,133,144,0.12); color: var(--muted);   border: 1px solid rgba(125,133,144,0.25); }
    .level-regular { background: rgba(63,185,80,0.12);   color: var(--success); border: 1px solid rgba(63,185,80,0.3); }
    .level-vip     { background: rgba(123,53,232,0.14);  color: var(--primary); border: 1px solid rgba(123,53,232,0.35); }
    .level-legend  { background: rgba(255,215,0,0.16);   color: #FFD700;        border: 1px solid rgba(255,215,0,0.4); }
    .level-perks   { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .level-perk    { background: rgba(123,53,232,0.08); border: 1px solid rgba(123,53,232,0.18); border-radius: 8px; padding: 4px 12px; font-size: 0.78rem; color: var(--primary); }
    .level-perk-gold { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #FFD700; }

    /* ====== ADMIN CONFIRM DIALOG ====== */
    .admin-confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:3500;padding:24px; }
    .admin-confirm-overlay.open { display:flex; }
    .admin-confirm-box { background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:32px 28px 24px;max-width:360px;width:100%;text-align:center;animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
    .admin-confirm-icon { font-size:2.8rem;margin-bottom:10px; }
    .admin-confirm-title { font-size:1.05rem;font-weight:800;margin-bottom:6px; }
    .admin-confirm-msg { font-size:0.875rem;color:var(--muted);line-height:1.6;margin-bottom:24px; }
    .admin-confirm-btns { display:flex;gap:10px; }
    .admin-confirm-btns button { flex:1;padding:12px;border-radius:10px;font-size:0.9rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:opacity 0.15s; }
    .admin-confirm-btns button:hover { opacity:0.85; }
    .acb-cancel  { background:var(--bg3);color:var(--muted); }
    .acb-confirm { background:var(--primary);color:white; }
    .acb-confirm.danger { background:var(--error); }

    /* ====== PAGE COMMANDER (full) ====== */
    .commander-hero { text-align:center;padding:110px 24px 40px;background:linear-gradient(180deg,rgba(123,53,232,0.09) 0%,transparent 100%); }
    .commander-hero h1 { font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;margin-bottom:8px; }
    .commander-hero p { color:var(--muted);font-size:0.95rem; }
    .commander-hero-badges { display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px; }
    .commander-hero-badges span { background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:0.8rem;color:var(--muted); }

    /* ====== PAGE RAPIDE ====== */
    .rapide-wrap { min-height:100vh;padding:40px 20px 60px;display:flex;flex-direction:column;align-items:center; }
    .rapide-logo-row { display:flex;align-items:center;gap:10px;margin-bottom:24px; }
    .rapide-logo-row img { height:44px;width:44px;border-radius:12px;object-fit:contain; }
    .rapide-logo-row span { font-size:1.25rem;font-weight:900; }
    .rapide-badge { background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.3);color:var(--success);border-radius:20px;padding:5px 14px;font-size:0.78rem;font-weight:700;display:inline-block;margin-bottom:18px; }
    .rapide-card { background:var(--bg2);border:1px solid var(--border);border-radius:22px;padding:28px 24px;width:100%;max-width:440px; }
    .rapide-card-title { font-size:1.15rem;font-weight:800;margin-bottom:4px; }
    .rapide-card-sub { color:var(--muted);font-size:0.84rem;margin-bottom:22px;line-height:1.5; }
    .rapide-price-box { background:var(--bg3);border-radius:12px;padding:14px 16px;margin:16px 0; }
    .rapide-price-row { display:flex;justify-content:space-between;font-size:0.87rem;padding:3px 0;color:var(--muted); }
    .rapide-price-row .val { color:var(--text); }
    .rapide-price-row.total { border-top:1px solid var(--border);padding-top:10px;margin-top:6px;font-weight:800;font-size:1rem;color:var(--secondary); }
    .rapide-price-row.total .val { color:var(--secondary); }
    .rapide-footer { text-align:center;color:var(--muted);font-size:0.78rem;margin-top:14px;line-height:1.7; }
    .rapide-back { color:var(--muted);font-size:0.82rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;opacity:0.7;cursor:pointer; }
    .rapide-back:hover { opacity:1; }

    /* ====== HERO CTAs ====== */
    .hero-ctas { display:flex;flex-wrap:nowrap;gap:12px;justify-content:center;margin-top:30px; }
    .hero-ctas .btn { width:auto;min-width:0;padding-left:28px;padding-right:28px; }
    @media (max-width:600px) {
      .hero-ctas { flex-wrap:wrap; }
      .hero-ctas .btn { width:100%;min-width:170px; }
    }
    .btn-wa { background:#25D366;color:white;border:none;padding:13px 24px;border-radius:12px;font-size:0.95rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:inherit;transition:filter 0.15s; }
    .btn-wa:hover { filter:brightness(1.1); }

    /* ====== ADMIN SIDEBAR LAYOUT ====== */
    .admin-layout { display:flex; min-height:100vh; position:relative; }
    .admin-sidebar {
      width:220px; min-width:220px; background:var(--bg2); border-right:1px solid var(--border);
      display:flex; flex-direction:column; position:fixed; left:0; top:0; height:100vh;
      overflow-y:auto; z-index:200; transition:transform 0.25s;
    }
    .sidebar-logo { padding:18px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
    .sidebar-logo-icon { width:40px; height:40px; border-radius:10px; background:var(--primary); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
    .sidebar-logo-icon img { width:26px; height:auto; filter:brightness(0) invert(1); }
    .sidebar-logo-text { font-size:1.05rem; font-weight:900; color:var(--primary); line-height:1.1; }
    .sidebar-logo-text span { color:var(--secondary); }
    .sidebar-role { font-size:0.68rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:0.5px; }
    .sidebar-nav { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
    .sidebar-item {
      display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px;
      cursor:pointer; font-size:0.855rem; color:var(--text); transition:background 0.15s;
      white-space:nowrap; user-select:none; font-weight:500;
    }
    .sidebar-item:hover { background:var(--bg3); }
    .sidebar-item.active { background:var(--primary); color:#fff; }
    .sidebar-item .si-icon { font-size:1rem; min-width:18px; text-align:center; }
    .sidebar-sep { height:1px; background:var(--border); margin:6px 8px; }
    .sidebar-footer { padding:10px 8px; border-top:1px solid var(--border); }
    .admin-main { margin-left:220px; flex:1; padding:28px 28px; min-height:100vh; box-sizing:border-box; overflow-x:hidden; }
    .admin-topbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
    .admin-topbar h2 { font-size:1.35rem; font-weight:800; }
    .admin-topbar p { font-size:0.8rem; color:var(--muted); margin-top:3px; }
    .sidebar-hamburger {
      display:none; position:fixed; top:12px; left:12px; z-index:300;
      background:var(--bg2); border:1px solid var(--border); border-radius:8px;
      padding:7px 10px; cursor:pointer; font-size:1.15rem; align-items:center;
    }
    .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; }
    @media (max-width:768px) {
      .admin-sidebar { transform:translateX(-100%); }
      .admin-sidebar.open { transform:translateX(0); }
      .sidebar-hamburger { display:flex; }
      .sidebar-overlay.open { display:block; }
      .admin-main { margin-left:0; padding:14px; padding-top:58px; }
      .admin-layout .dash-grid { grid-template-columns:repeat(2,1fr) !important; }
    }
    /* Hide global navbar/footer in admin mode */
    body.admin-mode .navbar { display:none !important; }
    body.admin-mode footer { display:none !important; }
    body.admin-mode .pwa-install-btn { display:none !important; }

    /* ====== NOTE TEXTAREA ====== */
    .note-group label { font-size:0.78rem; color:var(--muted); font-weight:600; display:block; margin-bottom:5px; }
    .note-textarea { width:100%; min-height:68px; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:9px 13px; color:var(--text); font-size:0.85rem; font-family:'Poppins',sans-serif; resize:vertical; box-sizing:border-box; }
    .note-textarea:focus { border-color:var(--primary); outline:none; }

    /* ====== GALERIE — TESTIMONIALS ====== */
    .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:920px; margin:0 auto; }
    .gallery-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform 0.2s,box-shadow 0.2s; }
    .gallery-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.25); }
    .gallery-quote { font-size:2rem; color:var(--primary); opacity:0.4; line-height:1; padding:14px 16px 0; }
    .gallery-img { display:none; } /* supprimé — design testimonial */
    @media (max-width:700px) { .gallery-grid { grid-template-columns:1fr; } }
    @media (max-width:560px) { .lb-podium { gap:10px; } }

    /* ====== PAGES STATIQUES ====== */
    .static-page { max-width:820px; margin:0 auto; padding:60px 24px 80px; }
    .static-page h1 { font-size:1.9rem; font-weight:900; margin-bottom:6px; }
    .static-page .sp-date { font-size:0.8rem; color:var(--muted); margin-bottom:36px; }
    .static-page h2 { font-size:1.15rem; font-weight:700; color:var(--primary); margin:30px 0 10px; }
    .static-page p, .static-page li { color:var(--muted); line-height:1.8; margin-bottom:8px; font-size:0.9rem; }
    .static-page ul { padding-left:20px; margin-bottom:12px; }
    .static-page strong { color:var(--text); }

    /* ====== MOBILE FIX — Mon Compte ====== */
    @media (max-width:600px) {
      .hist-search-row { flex-direction:column; gap:10px; }
      .hist-search-row .phone-input-wrap { width:100%; }
      .hist-search-row .btn { width:100%; padding:14px !important; }
    }

    /* ====== BOUTONS PRIX — single line mobile ====== */
    .btn-price-mobile { white-space: nowrap; }
    @media (max-width: 420px) {
      .btn-price-mobile { font-size: 0.82rem !important; padding-left: 14px !important; padding-right: 14px !important; }
    }

    /* ====== PRODUCT IMAGE on homepage ====== */
    .gamelle-prod-img { width:100%; max-height:220px; object-fit:cover; border-radius:16px 16px 0 0; display:block; }
    .gamelle-prod-placeholder { width:100%; height:160px; display:flex; align-items:center; justify-content:center; font-size:5rem; background:var(--bg3); border-radius:16px 16px 0 0; }

    /* ====== POPUP PUBLICITAIRE ====== */
    .ad-overlay {
      position:fixed; inset:0; z-index:9800;
      display:flex; align-items:center; justify-content:center; padding:16px;
      background:rgba(0,0,0,0); backdrop-filter:blur(0px);
      pointer-events:none;
      transition:background .4s ease, backdrop-filter .4s ease;
    }
    .ad-overlay.open {
      background:rgba(0,0,0,.78);
      backdrop-filter:blur(10px) saturate(140%);
      pointer-events:auto;
    }
    .ad-card {
      position:relative; width:100%; max-width:420px;
      border-radius:24px; overflow:hidden;
      background:#0c0c0f;
      font-family:'Poppins', sans-serif;
      box-shadow:
        0 32px 90px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.07),
        inset 0 1px 0 rgba(255,255,255,.1);
      transform:translateY(60px) scale(.9);
      opacity:0;
      transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
    }
    .ad-overlay.open .ad-card {
      transform:translateY(0) scale(1);
      opacity:1;
    }
    .ad-close-btn {
      position:absolute; top:14px; right:14px; z-index:20;
      width:34px; height:34px; border-radius:50%;
      background:rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.18);
      color:#fff; font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s, transform .15s;
    }
    .ad-close-btn:hover { background:rgba(255,255,255,.18); transform:scale(1.1); }
    /* image block — 1:1 ratio */
    .ad-img-block {
      position:relative; aspect-ratio:1/1; width:100%; overflow:hidden;
      background:linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
    }
    .ad-img-block::before {
      content:'';
      position:absolute; inset:0; z-index:0;
      background:radial-gradient(circle at 30% 30%, rgba(123,53,232,.35) 0%, transparent 60%),
                 radial-gradient(circle at 70% 70%, rgba(232,53,123,.25) 0%, transparent 60%);
    }
    .ad-img-block img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
    /* shimmer placeholder while loading */
    .ad-img-shimmer {
      position:absolute; inset:0; z-index:1;
      background:linear-gradient(90deg,#1a1a2e 0%,#25255a 50%,#1a1a2e 100%);
      background-size:200% 100%;
      animation:adShimmer 1.4s infinite;
    }
    @keyframes adShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    /* decorative top glow strip */
    .ad-glow-strip {
      position:absolute; top:0; left:0; right:0; height:3px; z-index:5;
      background:linear-gradient(90deg, #7B35E8, #E8357B, #E87B35, #35E87B);
      background-size:300% 100%;
      animation:glowSlide 3s linear infinite;
    }
    @keyframes glowSlide { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
    /* hook text — below image, plain */
    .ad-hook {
      font-family:'Poppins', sans-serif;
      font-size:clamp(0.9rem,3.8vw,1.05rem); font-weight:400; color:rgba(255,255,255,.88);
      line-height:1.55; padding:14px 20px 0;
      text-align:center;
    }
    /* bottom body */
    .ad-body { padding:14px 18px 18px; font-family:'Poppins', sans-serif; }
    .ad-cta-btn {
      display:flex; align-items:center; justify-content:center;
      width:100%; padding:15px 20px; margin-top:14px;
      border-radius:14px; font-size:0.95rem; font-weight:600;
      font-family:'Poppins', sans-serif; letter-spacing:.02em;
      text-decoration:none; color:#fff; border:none; cursor:pointer;
      transition:transform .18s, box-shadow .18s, filter .18s;
    }
    .ad-cta-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
    .ad-cta-btn:active { transform:translateY(0); }
    .ad-cta-whatsapp {
      background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
      box-shadow:0 6px 28px rgba(37,211,102,.38);
    }
    .ad-cta-whatsapp:hover { box-shadow:0 10px 36px rgba(37,211,102,.55); }
    .ad-cta-external {
      background:linear-gradient(135deg,#7B35E8 0%,#E8357B 100%);
      box-shadow:0 6px 28px rgba(123,53,232,.38);
    }
    .ad-cta-external:hover { box-shadow:0 10px 36px rgba(123,53,232,.55); }
    .ad-meta {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:10px; padding-top:10px;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .ad-brand { font-size:0.72rem; color:rgba(255,255,255,.3); letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================
   SUIVI COMMANDE
   ============================================================ */
.track-steps { display:flex; flex-direction:column; gap:0; margin:8px 0; }
.track-step {
  display:flex; align-items:flex-start; gap:14px; padding:10px 0;
  position:relative;
}
.track-step::before {
  content:''; position:absolute; left:11px; top:28px; bottom:-10px;
  width:2px; background:var(--border);
}
.track-step:last-child::before { display:none; }
.track-step-dot {
  width:24px; height:24px; border-radius:50%; background:var(--border);
  flex-shrink:0; transition:background .3s, box-shadow .3s;
}
.track-step.active .track-step-dot  { background:var(--primary); }
.track-step.current .track-step-dot { background:var(--primary); box-shadow:0 0 0 4px rgba(123,53,232,0.2); }
.track-step.done .track-step-dot    { background:var(--success); }
.track-step.active::before          { background:var(--primary); }
.track-step.done::before            { background:var(--success); }
.track-step-title { font-weight:700; font-size:0.9rem; }
.track-step-sub   { font-size:0.78rem; color:var(--muted); }
.track-step.active  .track-step-title { color:var(--primary); }
.track-step.current .track-step-title { color:var(--primary); }

/* ============================================================
   AVIS CLIENTS
   ============================================================ */
.star-rating { display:flex; gap:6px; justify-content:center; font-size:2.2rem; cursor:pointer; }
.star-rating .star { color:var(--muted); transition:color .15s; user-select:none; }
.star-rating .star:hover { color:#FFD700; }

/* ============================================================
   CHALLENGE MENSUEL — Badges podium
   ============================================================ */
.lb-challenge-badge {
  font-size:0.68rem; font-weight:700; color:var(--primary);
  background:rgba(123,53,232,0.1); border-radius:20px; padding:2px 8px;
  margin-bottom:4px; letter-spacing:0.3px;
}
.lb-podium-item:nth-child(2) .lb-challenge-badge { color:#B8860B; background:rgba(255,215,0,0.15); }

/* ============================================================
   CODES PROMO — Formulaire commande
   ============================================================ */
.promo-group { margin-bottom:18px; }

/* ============================================================
   PWA INSTALL BANNER
   ============================================================ */
#pwaInstallBtn {
  display:none; position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:#fff; border:none; border-radius:24px;
  padding:10px 24px; font-size:0.9rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 20px rgba(123,53,232,.4); z-index:900; white-space:nowrap;
}