/* Modales & composants de index.html — extrait du <style> inline (cacheable). */
    /* Poppins font loaded via <link> in <head> for better performance */
    #announceOverlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;animation:annIn .3s ease}
    @keyframes annIn{from{opacity:0}to{opacity:1}}
    .ann-card{font-family:'Poppins',sans-serif;width:100%;max-width:400px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:annUp .5s cubic-bezier(.2,1,.3,1)}
    @keyframes annUp{from{transform:translateY(60px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
    .ann-hero{position:relative;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 50%,#06b6d4 100%);padding:24px 20px 18px;color:#fff;text-align:center;overflow:hidden}
    .ann-spark{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);top:-30px;left:-20px}
    .ann-spark.s2{width:80px;height:80px;top:auto;bottom:-20px;right:-10px;left:auto;background:rgba(255,255,255,.06)}
    .ann-spark.s3{width:50px;height:50px;top:20px;right:30px;left:auto;background:rgba(255,255,255,.1)}
    .ann-x{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);border:none;width:34px;height:34px;border-radius:50%;font-size:14px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:2}
    .ann-x:hover{background:rgba(255,255,255,.3);transform:scale(1.15)}
    .ann-label{display:inline-block;background:rgba(255,255,255,.2);font-size:10px;font-weight:800;letter-spacing:2px;padding:4px 12px;border-radius:999px;margin-bottom:10px}
    .ann-hero h2{font-size:20px;font-weight:900;line-height:1.25;margin:0 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.15)}
    .ann-hero p{font-size:12px;opacity:.85;margin:0;font-weight:500}
    .ann-body{padding:16px 20px 20px}
    .ann-levels{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
    .ann-lv{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700;color:#1e293b;transition:all .2s}
    .ann-lv:hover{transform:translateX(4px);border-color:#818cf8;background:#eef2ff}
    .ann-lv-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .ann-txt{font-size:13px;color:#64748b;line-height:1.75;margin:0 0 18px}
    .ann-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:12px}
    .ann-bar-fill{width:35%;height:100%;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4);border-radius:3px;animation:annProgress 2.5s ease-in-out infinite}
    @keyframes annProgress{0%{width:15%}50%{width:55%}100%{width:15%}}
    .ann-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#7c3aed}
    .ann-highlights{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
    .ann-hi{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f8fafc;border-radius:10px;border:1px solid #f1f5f9}
    .ann-hi-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex-shrink:0}
    .ann-hi strong{display:block;font-size:11px;font-weight:700;color:#1e293b}
    .ann-hi span{font-size:9px;color:#94a3b8}
    .ann-coming{text-align:center;font-size:11px;color:#64748b;padding:8px;background:#fff7ed;border-radius:8px;border:1px solid #fed7aa;margin-bottom:12px}
    .ann-coming strong{color:#ea580c}
    .ann-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;background:#25d366;color:#fff;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;transition:.2s;font-family:'Poppins',sans-serif;border:none;cursor:pointer}
    .ann-wa-btn:hover{background:#20bd5a;transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,211,102,.3)}
    .ann-wa-btn i{font-size:18px}
    @media(max-width:480px){.ann-card{max-width:320px;border-radius:18px;max-height:90vh;overflow-y:auto}.ann-hero{padding:18px 16px 14px}.ann-hero h2{font-size:18px}.ann-body{padding:14px 16px 16px}.ann-highlights{gap:5px}.ann-hi{padding:6px 8px}.ann-hi-icon{width:28px;height:28px;font-size:11px;border-radius:6px}.ann-hi strong{font-size:10px}.ann-hi span{font-size:8px}.ann-coming{padding:6px;font-size:10px;margin-bottom:10px}.ann-wa-btn{padding:10px;font-size:12px;border-radius:10px}.ann-wa-btn i{font-size:16px}}

    /* Profile & General Modal CSS - Responsive Mobile First */
    .modal-close { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.06); border: none; font-size: 20px; color: #64748b; cursor: pointer; border-radius: 50%; width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 10; touch-action: manipulation; }
    .modal-close:hover { background: rgba(0,0,0,0.12); color: #1e293b; }
    .modal-close:active { transform: scale(0.92); }
    
    .profile-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: fadeIn 0.25s ease; }
    .profile-modal-overlay.show, .profile-modal-overlay.active { display: flex; }
    .profile-modal { background: #fff; border-radius: 20px; width: 100%; max-width: min(420px, calc(100vw - 20px)); max-height: min(88dvh, calc(100vh - 20px)); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px -15px rgba(0,0,0,0.5); font-family: 'Poppins', sans-serif; position: relative; margin: auto 0; animation: slideUp 0.35s cubic-bezier(0.2, 1, 0.3, 1); overscroll-behavior: contain; }
    .profile-modal-header { background: linear-gradient(135deg, #7c3aed, #2563eb); color: white; padding: 15px 18px 12px; text-align: center; flex-shrink: 0; }
    .profile-modal-header h2 { margin: 0 0 3px 0; font-size: 17.5px; font-weight: 800; line-height: 1.3; }
    .profile-modal-header p { margin: 0; font-size: 11.5px; opacity: 0.92; line-height: 1.35; }
    .profile-modal-body { padding: 14px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1; }
    .pm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pm-form-group { margin-bottom: 9px; }
    .pm-form-group label { display: block; font-size: 11.5px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
    .pm-input, .pm-select { width: 100%; padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px; font-size: 13.5px; color: #334155; transition: 0.2s; background: #f8fafc; font-family: 'Inter', sans-serif; box-sizing: border-box; }
    .pm-input:focus, .pm-select:focus { border-color: #3b82f6; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
    .pm-btn { width: 100%; padding: 11px 14px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c3aed, #2563eb); color: white; border: none; border-radius: 12px; font-size: 13.5px; font-weight: 700; font-family: 'Poppins', sans-serif; cursor: pointer; transition: 0.2s; margin-top: 4px; touch-action: manipulation; }
    .pm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(37,99,235,0.6); }
    .pm-btn:active { transform: scale(0.98); }
    .pm-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }

    /* Streak Flame and Profile Topbar buttons */
    .btn-streak {
      background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
      border: 1.5px solid #fdba74 !important;
      color: #c2410c !important;
      font-weight: 800 !important;
      font-size: 12px !important;
      padding: 6px 12px !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-shadow: 0 2px 6px rgba(251, 146, 60, 0.2) !important;
    }
    .btn-streak:hover {
      transform: translateY(-1px) scale(1.04) !important;
      border-color: #f97316 !important;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35) !important;
    }
    .flame-icon {
      font-size: 15px;
      animation: flame-pulse 1.8s infinite ease-in-out;
      display: inline-block;
    }
    @keyframes flame-pulse {
      0%, 100% { transform: scale(1) rotate(-3deg); }
      50% { transform: scale(1.22) rotate(3deg); }
    }
    .flame-rainbow { animation: flame-pulse-rainbow 3s infinite linear !important; }
    @keyframes flame-pulse-rainbow {
      0% { transform: scale(1) rotate(-3deg); filter: hue-rotate(0deg) saturate(2.4) drop-shadow(0 0 8px rgba(225,29,72,.6)); }
      25% { transform: scale(1.18) rotate(2deg); filter: hue-rotate(90deg) saturate(2.4) drop-shadow(0 0 10px rgba(22,163,74,.6)); }
      50% { transform: scale(1.24) rotate(-2deg); filter: hue-rotate(180deg) saturate(2.4) drop-shadow(0 0 10px rgba(37,99,235,.6)); }
      75% { transform: scale(1.18) rotate(2deg); filter: hue-rotate(270deg) saturate(2.4) drop-shadow(0 0 10px rgba(124,58,237,.6)); }
      100% { transform: scale(1) rotate(-3deg); filter: hue-rotate(360deg) saturate(2.4) drop-shadow(0 0 8px rgba(225,29,72,.6)); }
    }
    .btn-profile {
      background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
      border: 1.5px solid #93c5fd !important;
      color: #1d4ed8 !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      padding: 6px 12px !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      cursor: pointer !important;
      transition: 0.2s !important;
    }
    .btn-profile:hover {
      background: #bfdbfe !important;
      transform: translateY(-1px) !important;
    }
    .btn-streak.extinguished {
      background: #f1f5f9 !important;
      border-color: #cbd5e1 !important;
      color: #64748b !important;
      box-shadow: none !important;
    }
    .btn-streak.extinguished .flame-icon {
      animation: none !important;
      filter: grayscale(1) opacity(0.55);
    }

    /* ==================== PREMIUM QUOTA & ACTION MODALS ==================== */
    .quota-modal-premium {
      max-width: min(420px, calc(100vw - 20px)) !important;
      max-height: min(88dvh, calc(100vh - 20px)) !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
      box-shadow: 0 25px 65px -12px rgba(217, 119, 6, 0.3), 0 0 0 1px rgba(254, 243, 199, 0.6) !important;
      background: #ffffff;
      overscroll-behavior: contain;
    }
    .quota-modal-header {
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 48%, #b45309 100%);
      color: #ffffff;
      padding: 16px 18px 12px;
      text-align: center;
      position: relative;
    }
    .quota-icon-wrap {
      position: relative;
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
    }
    .quota-icon-inner {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, #ffffff, #fef3c7);
      color: #d97706;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
      animation: pulse-badge 2.4s infinite ease-in-out;
    }
    .quota-counter-pill {
      position: absolute;
      bottom: -3px;
      right: -3px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #ffffff;
      font-size: 9.5px;
      font-weight: 800;
      padding: 1.5px 6px;
      border-radius: 999px;
      border: 1.5px solid #ffffff;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
    .quota-title {
      font-size: 17px;
      font-weight: 900;
      margin: 0 0 3px 0;
      letter-spacing: -0.2px;
      color: #ffffff;
    }
    .quota-subtitle {
      font-size: 11.5px;
      margin: 0;
      opacity: 0.92;
      color: #fde68a;
      line-height: 1.35;
    }
    .quota-timer-card {
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      border: 1.5px solid #fde68a;
      border-radius: 13px;
      padding: 9px 11px;
      margin-bottom: 10px;
      text-align: left;
    }
    .quota-timer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .quota-timer-label {
      font-size: 12px;
      font-weight: 700;
      color: #92400e;
    }
    .quota-timer-date {
      font-size: 12px;
      font-weight: 800;
      color: #b45309;
      background: #ffffff;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid #fde68a;
    }
    .quota-capsules-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .quota-capsule {
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid #fcd34d;
      border-radius: 10px;
      padding: 6px 8px;
      text-align: center;
      font-size: 11px;
      font-weight: 800;
      color: #92400e;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .quota-capsule.filled {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      border-color: #b45309;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
    }
    .quota-solutions-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: left;
    }
    .qs-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .qs-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-top: 1px;
    }
    .qs-text {
      font-size: 12px;
      line-height: 1.45;
      color: #475569;
    }
    .qs-text strong {
      display: block;
      font-size: 12.5px;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .quota-btn-primary {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      color: #ffffff !important;
      padding: 11px 14px !important;
      font-size: 13px !important;
      min-height: 44px !important;
      border-radius: 11px !important;
      box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.4) !important;
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      touch-action: manipulation;
    }
    .quota-btn-primary:active { transform: scale(0.98); }
    .quota-btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.55) !important;
    }
    .quota-btn-vip {
      background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
      color: #ffffff !important;
      padding: 11px 14px !important;
      font-size: 13px !important;
      min-height: 44px !important;
      border-radius: 11px !important;
      box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.35) !important;
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      touch-action: manipulation;
    }
    .quota-btn-vip:active { transform: scale(0.98); }
    .quota-btn-vip:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -4px rgba(124, 58, 237, 0.5) !important;
    }
    .quota-btn-secondary {
      background: #f1f5f9 !important;
      color: #475569 !important;
      border: 1px solid #cbd5e1 !important;
      padding: 9px 12px !important;
      font-size: 12px !important;
      min-height: 40px !important;
      border-radius: 10px !important;
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      touch-action: manipulation;
    }
    .quota-btn-secondary:active { transform: scale(0.98); }

    /* Universal Action Notice Modal */
    #actionNoticeModal {
      z-index: 12000 !important;
    }
    .modern-notice-modal {
      max-width: min(380px, calc(100vw - 20px)) !important;
      max-height: min(88dvh, calc(100vh - 20px)) !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.45) !important;
      background: #ffffff;
      overscroll-behavior: contain;
    }
    /* Fixed overlay for Flashcards centered in front of user */
    #flashcardOverlay {
      position: fixed !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      background: rgba(15, 23, 42, 0.82) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      z-index: 10000 !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      padding: 12px !important;
      padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain !important;
      animation: fadeIn 0.25s ease !important;
    }
    #flashcardOverlay.show {
      display: flex !important;
    }
    .notice-modal-header {
      padding: 16px 18px 12px;
      text-align: center;
      color: #ffffff;
      position: relative;
    }
    .notice-modal-header.type-info {
      background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    }
    .notice-modal-header.type-warning {
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    }
    .notice-modal-header.type-success {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }
    .notice-modal-header.type-vip {
      background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    }
    .notice-modal-header.type-error {
      background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    }
    .notice-hero-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #ffffff;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin: 0 auto 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      animation: pulse-badge 2.4s infinite ease-in-out;
    }
    .notice-modal-header h2 {
      font-size: 17px;
      font-weight: 800;
      margin: 0 0 3px 0;
      color: #ffffff;
      line-height: 1.3;
    }
    .notice-modal-header p {
      font-size: 11.5px;
      margin: 0;
      opacity: 0.95;
      color: #e0f2fe;
      line-height: 1.35;
    }
    .notice-modal-body-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 11px 13px;
      font-size: 12.5px;
      line-height: 1.55;
      color: #334155;
      text-align: left;
      margin-bottom: 12px;
      word-break: break-word;
    }
    .notice-actions {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    /* ==================== PASS ÉLITE VIP MODAL ==================== */
    .elite-modal-premium {
      max-width: min(430px, calc(100vw - 20px)) !important;
      max-height: min(88dvh, calc(100vh - 20px)) !important;
      border-radius: 22px !important;
      overflow: hidden !important;
      border: 1.5px solid rgba(234, 179, 8, 0.45) !important;
      box-shadow: 0 25px 70px -10px rgba(109, 40, 217, 0.35), 0 0 0 1px rgba(253, 224, 71, 0.3) !important;
      background: #ffffff;
      animation: modalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      overscroll-behavior: contain;
    }
    .elite-modal-header {
      background: linear-gradient(135deg, #180d2b 0%, #2e1065 40%, #581c87 80%, #7e22ce 100%);
      color: #ffffff;
      padding: 18px 16px 14px;
      text-align: center;
      position: relative;
    }
    .elite-badge-top {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(254, 240, 138, 0.16);
      border: 1px solid rgba(250, 204, 21, 0.7);
      color: #fef08a;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 8px;
      box-shadow: 0 0 14px rgba(234, 179, 8, 0.25);
    }
    .elite-hero-wrap {
      position: relative;
      width: 52px;
      height: 52px;
      margin: 0 auto 8px;
    }
    .elite-hero-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffffff 0%, #fef3c7 45%, #fde047 100%);
      color: #581c87;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 20px rgba(250, 204, 21, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.9);
      animation: pulse-badge 2.4s infinite ease-in-out;
    }
    .elite-hero-vip-tag {
      position: absolute;
      bottom: -4px;
      right: -4px;
      background: linear-gradient(135deg, #eab308, #ca8a04);
      color: #1e1135;
      font-size: 9px;
      font-weight: 900;
      padding: 1.5px 6px;
      border-radius: 999px;
      border: 1.5px solid #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      text-transform: uppercase;
    }
    .elite-modal-title {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 4px 0;
      letter-spacing: -0.2px;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      line-height: 1.25;
    }
    .elite-modal-subtitle {
      font-size: 11.5px;
      margin: 0;
      color: #e9d5ff;
      line-height: 1.4;
      max-width: 360px;
      margin: 0 auto;
    }
    .elite-features-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 11px;
      text-align: left;
    }
    .elite-feat-card {
      background: #fdfcff;
      border: 1.5px solid #e9d5ff;
      border-radius: 13px;
      padding: 9px 11px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      transition: all 0.2s ease;
      position: relative;
    }
    .elite-feat-card.active-target {
      border-color: #a855f7 !important;
      background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
      box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 8px 20px -4px rgba(168, 85, 247, 0.2) !important;
      transform: scale(1.01);
    }
    .elite-feat-icon {
      width: 30px;
      height: 30px;
      min-width: 30px;
      border-radius: 10px;
      background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
      color: #6b21a8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-top: 1px;
      box-shadow: 0 3px 8px rgba(107, 33, 168, 0.12);
    }
    .elite-feat-content {
      flex: 1;
    }
    .elite-feat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 2px;
    }
    .elite-feat-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #1e1135;
      margin: 0;
    }
    .elite-status-pill {
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 999px;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
      white-space: nowrap;
    }
    .elite-feat-desc {
      font-size: 11px;
      color: #4b5563;
      line-height: 1.4;
      margin: 0;
    }
    .elite-reassurance-box {
      background: linear-gradient(135deg, #fdf4ff 0%, #fffbeb 100%);
      border: 1.5px solid #fbcfe8;
      border-radius: 13px;
      padding: 9px 11px;
      margin-bottom: 11px;
      text-align: left;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .elite-reassurance-icon {
      font-size: 17px;
      line-height: 1;
      margin-top: 1px;
    }
    .elite-reassurance-text {
      font-size: 11px;
      color: #475569;
      line-height: 1.4;
    }
    .elite-reassurance-text strong {
      color: #581c87;
      display: block;
      font-size: 11.5px;
      margin-bottom: 1px;
    }
    .elite-actions-column {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .elite-btn-vip {
      background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c026d3 100%) !important;
      color: #ffffff !important;
      padding: 11px 14px !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      border-radius: 12px !important;
      box-shadow: 0 8px 20px -4px rgba(147, 51, 234, 0.45) !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      cursor: pointer;
      min-height: 44px !important;
      touch-action: manipulation;
    }
    .elite-btn-vip:active { transform: scale(0.98); }
    .elite-btn-vip:hover {
      transform: translateY(-1.5px);
      box-shadow: 0 12px 24px -4px rgba(147, 51, 234, 0.6) !important;
    }
    .elite-btn-secondary {
      background: #f1f5f9 !important;
      color: #475569 !important;
      border: 1px solid #cbd5e1 !important;
      padding: 9px 12px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      border-radius: 10px !important;
      margin: 0 !important;
      cursor: pointer;
      min-height: 40px !important;
      touch-action: manipulation;
    }
    .elite-btn-secondary:active { transform: scale(0.98); }

    /* ==================== ACTIVE SUBSCRIPTION MODAL ==================== */
    .active-sub-modal-premium {
      max-width: min(420px, calc(100vw - 20px)) !important;
      max-height: min(88dvh, calc(100vh - 20px)) !important;
      border-radius: 22px !important;
      overflow: hidden !important;
      border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
      box-shadow: 0 25px 70px -10px rgba(5, 150, 105, 0.35), 0 0 0 1px rgba(167, 243, 208, 0.3) !important;
      background: #ffffff;
      animation: modalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      overscroll-behavior: contain;
    }
    .active-sub-header {
      background: linear-gradient(135deg, #064e3b 0%, #065f46 45%, #059669 100%);
      color: #ffffff;
      padding: 16px 16px 12px;
      text-align: center;
      position: relative;
    }
    .active-sub-badge-top {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(209, 250, 229, 0.2);
      border: 1px solid rgba(110, 231, 183, 0.8);
      color: #d1fae5;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 2.5px 10px;
      border-radius: 999px;
      margin-bottom: 8px;
    }
    .active-sub-hero-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
      color: #059669;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 0 auto 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.9);
      animation: pulse-badge 2.4s infinite ease-in-out;
    }
    .active-sub-details-card {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
      border-radius: 13px;
      padding: 10px 12px;
      margin-bottom: 10px;
      text-align: left;
    }
    .active-sub-plan-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .active-sub-plan-name {
      font-size: 14.5px;
      font-weight: 800;
      color: #065f46;
    }
    .active-sub-status-pill {
      background: #10b981;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .active-sub-expiry {
      font-size: 11px;
      color: #047857;
      font-weight: 600;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .active-sub-features-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 11px;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      gap: 3.5px;
    }
    .active-sub-features-list li {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .active-sub-features-list li i {
      color: #10b981;
    }
    .active-sub-reassurance {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      padding: 8px 10px;
      margin-bottom: 10px;
      font-size: 11px;
      color: #1e40af;
      line-height: 1.4;
      text-align: left;
    }
    .active-sub-actions {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .sub-keep-btn {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      color: #ffffff !important;
      padding: 11px 14px !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      border-radius: 11px !important;
      box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.4) !important;
      border: none !important;
      cursor: pointer;
      min-height: 44px !important;
      touch-action: manipulation;
    }
    .sub-keep-btn:active { transform: scale(0.98); }
    .sub-cancel-btn {
      background: #fff1f2 !important;
      color: #e11d48 !important;
      border: 1.5px solid #fecdd3 !important;
      padding: 9px 12px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      border-radius: 10px !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: all 0.2s;
      min-height: 40px !important;
      touch-action: manipulation;
    }
    .sub-cancel-btn:active { transform: scale(0.98); }
    .sub-cancel-btn:hover {
      background: #ffe4e6 !important;
      border-color: #fda4af !important;
    }
    .sub-no-refund-warning {
      font-size: 10.5px;
      color: #64748b;
      margin: 2px 0 0;
      line-height: 1.35;
      text-align: center;
    }
    .active-sub-upgrade-banner {
      background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
      border: 1.5px solid #e879f9;
      border-radius: 13px;
      padding: 10px 12px;
      margin-bottom: 10px;
      text-align: left;
      box-shadow: 0 3px 12px rgba(217, 70, 239, 0.1);
    }
    .as-upgrade-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: #a21caf;
      background: #fdf2f8;
      border: 1px solid #f472b6;
      padding: 1.5px 6px;
      border-radius: 999px;
      margin-bottom: 4px;
    }
    .as-upgrade-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #701a75;
      margin: 0 0 3px 0;
    }
    .as-upgrade-desc {
      font-size: 11px;
      color: #4a044e;
      line-height: 1.35;
      margin: 0 0 7px 0;
    }
    .as-upgrade-btn {
      background: linear-gradient(135deg, #c026d3 0%, #9333ea 100%) !important;
      color: #ffffff !important;
      padding: 9px 12px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      border-radius: 9px !important;
      width: 100% !important;
      box-shadow: 0 4px 14px -2px rgba(192, 38, 211, 0.35) !important;
      border: none !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 40px !important;
      touch-action: manipulation;
    }
    .as-upgrade-btn:active { transform: scale(0.98); }
    .as-upgrade-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -2px rgba(192, 38, 211, 0.55) !important;
    }

    /* ==================== GLOBAL MOBILE MODAL OPTIMIZATIONS (ANDROID & IOS) ==================== */
    @media (max-width: 640px) {
      .profile-modal-overlay {
        padding: 8px !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        align-items: center !important;
      }
      .profile-modal {
        max-width: min(390px, calc(100vw - 16px)) !important;
        max-height: min(88dvh, calc(100vh - 20px)) !important;
        border-radius: 18px !important;
        margin: auto 0 !important;
      }
      .profile-modal-header {
        padding: 13px 14px 10px !important;
      }
      .profile-modal-header h2 {
        font-size: 16px !important;
      }
      .profile-modal-header p {
        font-size: 11px !important;
      }
      .profile-modal-body {
        padding: 12px 14px 14px !important;
      }
      .modal-close {
        top: 8px !important;
        right: 8px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 18px !important;
      }
      .modern-notice-modal {
        max-width: min(350px, calc(100vw - 16px)) !important;
      }
      .notice-hero-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 18px !important;
        margin: 0 auto 6px !important;
      }
      .notice-modal-header {
        padding: 12px 14px 8px !important;
      }
      .notice-modal-header h2 {
        font-size: 15px !important;
      }
      .notice-modal-header p {
        font-size: 10.5px !important;
      }
      .notice-modal-body-box {
        padding: 9px 11px !important;
        font-size: 11.5px !important;
        margin-bottom: 9px !important;
      }
      .pm-btn {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        min-height: 42px !important;
      }
      /* Specific Hero Icons scaling for all modals */
      #viewProfileModalOverlay .profile-modal-header div[style*="border-radius: 50%"] {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
        margin-bottom: 5px !important;
      }
      #streakWelcomeModal div[style*="border-radius: 50%"],
      #streakInfoModal #simStreakIcon,
      #subscriptionSuccessModal div[style*="border-radius: 50%"],
      #packAlreadyDownloadedModal div[style*="border-radius: 20px"],
      #packDownloadSuccessModal div[style*="border-radius: 50%"] {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 20px !important;
        margin: 0 auto 6px !important;
      }
      #streakWelcomeModal div[style*="padding: 24px"],
      #streakInfoModal .profile-modal-header,
      #subscriptionSuccessModal div[style*="padding: 24px"],
      #packAlreadyDownloadedModal div[style*="padding: 24px"],
      #packDownloadSuccessModal div[style*="padding: 24px"],
      #pwaInstallGuideModal .profile-modal-header {
        padding: 13px 14px 10px !important;
      }
      #streakWelcomeModal h2, #streakInfoModal h2, #subscriptionSuccessModal h2, #padTitle, #pdsTitle {
        font-size: 16px !important;
      }
    }
    @media (max-width: 380px) {
      .profile-modal {
        max-width: calc(100vw - 12px) !important;
      }
      .pm-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
      }
      .quota-capsules-row {
        gap: 4px !important;
      }
      .quota-capsule {
        padding: 4px 3px !important;
        font-size: 9.5px !important;
      }
    }

    /* ==================== PANNEAU DE PAIEMENT ÉPURÉ ==================== */
    .checkout-modal-card .checkout-header {
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
      color: #ffffff;
      padding: 20px 18px 16px;
      text-align: center;
    }
    .checkout-badge-secure {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.25);
      color: #dbeafe;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 8px;
    }
    .checkout-header h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #fff; }
    .checkout-price-pill {
      display: inline-block;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.28);
      color: #eff6ff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
    }
    .checkout-field-group { margin-bottom: 15px; }
    .checkout-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 6px;
    }
    .checkout-hint-badge, .checkout-recommended-pill {
      font-size: 10px;
      font-weight: 700;
      color: #1d4ed8;
      background: #dbeafe;
      padding: 2px 7px;
      border-radius: 6px;
    }
    .checkout-country-box {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 11px 13px;
    }
    .cc-flag { font-size: 22px; line-height: 1; }
    .cc-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
    .cc-name { font-size: 13px; font-weight: 700; color: #0f172a; }
    .cc-sub { font-size: 11px; color: #64748b; }
    .cc-check { font-size: 11px; font-weight: 700; color: #10b981; }
    .payment-methods-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .pm-method-card {
      position: relative;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .pm-method-card:hover { border-color: #93c5fd; }
    .pm-method-card.active {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
    }
    .pmm-badge {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8.5px;
      font-weight: 800;
      color: #fff;
      background: #2563eb;
      padding: 2px 7px;
      border-radius: 999px;
      white-space: nowrap;
    }
    .pmm-icon-wrap {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      margin: 0 auto 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #334155;
      overflow: hidden;
      padding: 3px;
    }
    .pmm-icon-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; display: block; }
    .pm-method-card.active .pmm-icon-wrap { background: #ffffff; border-color: #2563eb; }
    .pmm-title { font-size: 12px; font-weight: 800; color: #1e293b; margin-bottom: 2px; }
    .pmm-speed { font-size: 9.5px; color: #64748b; }
    .checkout-phone-input-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px 12px;
      transition: border-color 0.2s;
    }
    .checkout-phone-input-wrap:focus-within { border-color: #2563eb; }
    .cpi-prefix { font-size: 14px; font-weight: 700; color: #475569; }
    .cpi-input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      outline: none;
      padding: 8px 0;
      font-family: inherit;
    }
    .cpi-input::placeholder { color: #94a3b8; }
    .cpi-helper {
      font-size: 10.5px;
      color: #64748b;
      margin: 6px 0 0;
      line-height: 1.35;
    }
    .checkout-submit-btn {
      background: #2563eb !important;
      color: #fff !important;
      box-shadow: 0 6px 16px -4px rgba(37,99,235,0.35) !important;
    }
    .checkout-submit-btn:hover { background: #1d4ed8 !important; }
    .checkout-security-footer {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #e2e8f0;
      text-align: center;
    }
    .csf-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 10.5px;
      color: #64748b;
      margin-bottom: 8px;
    }
    .csf-help { font-size: 11px; }
    .csf-help a { color: #2563eb; font-weight: 700; }
    @media (max-width: 640px) {
      .checkout-header { padding: 16px 14px 12px; }
      .checkout-header h2 { font-size: 17px; }
      .payment-methods-grid { gap: 6px; }
      .pm-method-card { padding: 10px 8px; }
      .pmm-icon-wrap { width: 32px; height: 32px; font-size: 16px; }
      .pmm-title { font-size: 11px; }
    }

/* ===== Carte « Reprendre ma lecture » (dashboard) ===== */
.resume-fiche-card{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1.5px solid #c7d2fe;border-radius:14px;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(79,70,229,.10)}
.resume-fiche-card:hover{transform:translateY(-1px);border-color:#818cf8;box-shadow:0 8px 20px rgba(79,70,229,.18)}
.resume-fiche-card .rf-ic{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.resume-fiche-card .rf-txt{flex:1;min-width:0;text-align:left}
.resume-fiche-card .rf-txt strong{display:block;font-size:13px;color:#3730a3;margin-bottom:2px}
.resume-fiche-card .rf-txt span{display:block;font-size:11.5px;color:#4f46e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-fiche-card .rf-txt em{font-style:normal;opacity:.75}
.resume-fiche-card .rf-arrow{color:#818cf8;font-size:13px}

/* ===== Filtre des leçons dans une classe ===== */
.class-filter-wrap{position:relative;margin:12px 0 4px}
.class-filter-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:12px;pointer-events:none}
.class-filter-wrap input{width:100%;padding:10px 12px 10px 34px;border:1.5px solid #e2e8f0;border-radius:11px;font-size:13px;font-family:inherit;background:#f8fafc;box-sizing:border-box;transition:.2s}
.class-filter-wrap input:focus{border-color:#6366f1;background:#fff;outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.class-filter-wrap input::-webkit-search-cancel-button{-webkit-appearance:none}