/* ==================== ENHANCEMENTS ==================== */
/* Accessibility: WCAG AA contrast fixes */
.stat-label, .lesson-meta, .count, .subtitle, .ann-hi span, .ann-txt { color: #64748b !important; }
/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.skip-to-content{position:absolute;left:-9999px;z-index:999;padding:1em;background-color:var(--accent);color:#fff;opacity:0}
.skip-to-content:focus{left:50%;transform:translateX(-50%);opacity:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Toasts */
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 40px)}
.toast{background:#0f172a;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:13px;display:flex;align-items:center;gap:10px;min-width:240px;max-width:380px;pointer-events:auto;animation:toast-in .3s ease;border-left:4px solid #3b82f6}
.toast.success{border-left-color:#10b981}
.toast.error{border-left-color:#ef4444}
.toast.warn{border-left-color:#f59e0b}
.toast.info{border-left-color:#3b82f6}
.toast .toast-icon{font-size:16px}
.toast.fade-out{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}
@media(max-width:600px){.toast-container{top:auto;bottom:80px;left:10px;right:10px;align-items:center}.toast{width:100%;min-width:0}}

/* Skeleton loaders */
.skeleton{background:linear-gradient(90deg,#e2e8f0 0%,#f1f5f9 50%,#e2e8f0 100%);background-size:200% 100%;animation:skel 1.4s infinite;border-radius:8px}
.skeleton-line{height:14px;margin-bottom:10px}
.skeleton-line.lg{height:20px;width:60%}
.skeleton-card{padding:16px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;margin-bottom:12px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Scroll-to-top button */
.scroll-top-btn{position:fixed;bottom:90px;right:20px;width:46px;height:46px;border-radius:50%;background:#2563eb;color:#fff;border:none;font-size:18px;cursor:pointer;box-shadow:0 6px 20px rgba(37,99,235,.4);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.scroll-top-btn.show{opacity:1;pointer-events:auto}
.scroll-top-btn:hover{transform:scale(1.1)}

/* FAB Menu - Outils */
.tools-fab{position:fixed;bottom:20px;left:20px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 6px 20px rgba(124,58,237,.4);z-index:95;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.tools-fab:hover{transform:scale(1.08)}
.tools-fab.open{transform:rotate(45deg)}
.tools-menu{position:fixed;bottom:84px;left:20px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.25);padding:8px;z-index:96;display:none;min-width:200px}
.tools-menu.show{display:block;animation:toast-in .25s ease}
.tools-menu button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;padding:10px 12px;border-radius:8px;font-size:13px;cursor:pointer;color:#1e293b;text-align:left;font-weight:500}
.tools-menu button:hover{background:#f1f5f9}
.tools-menu button i{width:20px;text-align:center;color:#7c3aed}

/* Modal générique */
.rci-modal{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);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}
.rci-modal.show{display:flex;animation:toast-in .2s ease}
.rci-modal-content{background:#fff;border-radius:20px;max-width:min(440px,calc(100vw - 20px));width:100%;max-height:min(88dvh,calc(100vh - 20px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 16px;position:relative;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.rci-modal-close{position:absolute;top:10px;right:10px;background:#f1f5f9;border:none;width:34px;height:34px;min-width:34px;min-height:34px;border-radius:50%;cursor:pointer;font-size:14px;color:#475569;display:flex;align-items:center;justify-content:center;touch-action:manipulation;z-index:2}
.rci-modal-close:hover{background:#e2e8f0;color:#1e293b}
.rci-modal-close:active{transform:scale(.92)}
.rci-modal h3{margin:0 0 12px;font-size:17px;color:#1e293b;font-weight:800;line-height:1.3}

/* Calculatrice */
.calc-display{background:#0f172a;color:#fff;padding:16px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:24px;text-align:right;margin-bottom:12px;min-height:60px;word-break:break-all}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calc-grid button{padding:14px;border:none;border-radius:8px;background:#f1f5f9;color:#1e293b;font-size:16px;font-weight:600;cursor:pointer;transition:.15s}
.calc-grid button:hover{background:#e2e8f0;transform:translateY(-1px)}
.calc-grid button.op{background:#3b82f6;color:#fff}
.calc-grid button.op:hover{background:#2563eb}
.calc-grid button.eq{background:#10b981;color:#fff;grid-column:span 2}
.calc-grid button.clr{background:#ef4444;color:#fff}

/* Pomodoro */
.pomo-display{font-size:64px;font-weight:800;text-align:center;color:#2563eb;margin:20px 0;font-family:'JetBrains Mono',monospace}
.pomo-display.break{color:#10b981}
.pomo-status{text-align:center;color:#64748b;margin-bottom:20px;font-size:14px}
.pomo-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pomo-controls button{padding:10px 20px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.pomo-controls .start{background:#10b981;color:#fff}
.pomo-controls .pause{background:#f59e0b;color:#fff}
.pomo-controls .reset{background:#ef4444;color:#fff}
.pomo-presets{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.pomo-presets button{padding:6px 12px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-size:11px;cursor:pointer;color:#475569}
.pomo-presets button.active{background:#2563eb;color:#fff;border-color:#2563eb}

/* Notes */
.notes-textarea{width:100%;min-height:200px;padding:12px;border:1px solid #e2e8f0;border-radius:10px;font-family:Inter,sans-serif;font-size:14px;resize:vertical;outline:none;color:#1e293b;background:#fff}
.notes-textarea:focus{border-color:#3b82f6}
.notes-info{font-size:11px;color:#64748b;margin-top:8px;text-align:right}

/* Plan de révision */
.planner-input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;margin-bottom:12px}
.planner-day{padding:12px;background:#f8fafc;border-radius:8px;margin-bottom:8px;border-left:4px solid #3b82f6}
.planner-day strong{display:block;color:#1e293b;margin-bottom:4px}
.planner-day span{font-size:12px;color:#64748b}

/* Network status */
.net-status{position:fixed;top:0;left:0;right:0;padding:8px;text-align:center;font-size:12px;font-weight:600;z-index:9998;transform:translateY(-100%);transition:transform .3s}
.net-status.offline{background:#f59e0b;color:#fff;transform:translateY(0)}
.net-status.back-online{background:#10b981;color:#fff;transform:translateY(0)}

/* Cookie banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;z-index:150;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.cookie-banner p{margin:0;flex:1;font-size:13px;min-width:240px}
.cookie-banner button{padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:#10b981;color:#fff}
.cookie-banner button.secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:#cbd5e1}/* Mode lecture papier */
body.paper-mode {
  --bg: #f4ecd8;
  --bg-card: #fdf6e3;
  --bg-card-hover: #f3e8d2;
  --bg-surface: #fdf6e3;
  --bg-sidebar: #eaddc4;
  --sidebar-text: #3a2e1a;
  --sidebar-muted: #5b4a2e;
  --sidebar-dim: #796646;
  --text: #3a2e1a;
  --text-muted: #5b4a2e;
  --text-dim: #796646;
  --border: #d6c6ac;
  --accent: #92400e;
  --accent-light: #b45309;
  --accent-bg: #fef3c7;
  background: var(--bg);
  color: var(--text);
}
body.paper-mode .fiche-content{background:#fdf6e3;color:#3a2e1a;font-family:Georgia,serif;line-height:1.85;letter-spacing:.2px}
body.paper-mode .fiche-content h1,body.paper-mode .fiche-content h2,body.paper-mode .fiche-content h3{font-family:'Playfair Display',Georgia,serif;color:#5b3e1f}body.paper-mode .fiche-content .definition {background: #e6f4ea; border-color: #22c55e; color: #14532d;}body.paper-mode .fiche-content .important {background: #e0f2fe; border-color: #2563eb; color: #1e3a8a;}body.paper-mode .fiche-content .schema {background: #fef3c7; border-color: #f59e0b; color: #78350f;}body.paper-mode .fiche-content blockquote {background: #f3e8d2; border-color: #b45309; color: #3a2e1a;}body.paper-mode .fiche-content blockquote strong {color: #5b3e1f;}

/* Surligneur */
.highlight-yellow{background:rgba(253,224,71,.6);padding:1px 2px;border-radius:2px;cursor:pointer}
.highlight-green{background:rgba(134,239,172,.6);padding:1px 2px;border-radius:2px;cursor:pointer}
.highlight-pink{background:rgba(249,168,212,.6);padding:1px 2px;border-radius:2px;cursor:pointer}
.highlight-toolbar{position:fixed;bottom:90px;right:80px;background:#fff;border-radius:30px;padding:6px;box-shadow:0 8px 25px rgba(0,0,0,.2);display:none;gap:4px;z-index:97}
.highlight-toolbar.show{display:flex}
.highlight-toolbar button{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;font-size:11px;font-weight:700;color:#1e293b}
.highlight-toolbar .y{background:#fde047}
.highlight-toolbar .g{background:#86efac}
.highlight-toolbar .p{background:#f9a8d4}
.highlight-toolbar .x{background:#fff;border:1px solid #e2e8f0;color:#64748b}

/* Mode focus */
body.focus-mode .sidebar,body.focus-mode .topbar,body.focus-mode .main-footer,body.focus-mode .audio-fab,body.focus-mode .tools-fab,body.focus-mode .scroll-top-btn{display:none !important}
body.focus-mode .main{margin:0;padding:20px}

/* Search results enhanced */
.search-suggestions{position:absolute;top:calc(100% + 4px);left:8px;right:8px;background:#0f172a;border:1px solid rgba(255,255,255,.15);border-radius:10px;max-height:280px;overflow-y:auto;z-index:50;box-shadow:0 8px 25px rgba(0,0,0,.4);display:none}
.search-suggestions.show{display:block}
.search-suggestion{padding:10px 12px;cursor:pointer;font-size:13px;color:#e2e8f0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px}
.search-suggestion:hover,.search-suggestion.active{background:rgba(255,255,255,.06)}
.search-suggestion .meta{font-size:11px;color:#94a3b8;margin-left:auto}
.search-suggestion .recent-icon{color:#94a3b8;font-size:11px}

/* QR modal */
.qr-canvas{display:flex;justify-content:center;margin:16px 0}
.qr-canvas img,.qr-canvas canvas{border:8px solid #fff;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.15)}

/* Confetti container */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-piece{position:absolute;width:10px;height:10px;animation:confetti-fall 3s linear forwards}
@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}

/* WhatsApp button */
.wa-btn{background:#25d366 !important;color:#fff !important}
.wa-btn:hover{background:#1ea952 !important}

/* Mini Pomodoro Widget (persistent) */
.pomo-mini{position:fixed;top:14px;left:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;padding:8px 14px 8px 12px;border-radius:30px;display:none;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(37,99,235,.45);z-index:97;cursor:pointer;animation:toast-in .3s ease;border:2px solid rgba(255,255,255,.2)}
.pomo-mini.show{display:flex}
.pomo-mini.break{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 20px rgba(16,185,129,.45)}
.pomo-mini-icon{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.pomo-mini-stop{background:rgba(0,0,0,.2);border:none;color:#fff;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
.pomo-mini-stop:hover{background:rgba(0,0,0,.4)}
@media(max-width:600px){.pomo-mini{top:10px;left:10px;font-size:12px;padding:6px 10px 6px 8px}}

/* Active tool badge in menu */
.tools-menu button .badge-active{margin-left:auto;background:#10b981;color:#fff;font-size:10px;padding:2px 7px;border-radius:8px;font-weight:700}
.tools-fab .fab-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fff;animation:toast-in .3s ease}
.tools-fab{position:fixed}

/* Focus mode banner */
.focus-banner{position:fixed;top:14px;right:14px;background:#0f172a;color:#fff;padding:8px 14px;border-radius:20px;display:none;align-items:center;gap:8px;font-size:12px;font-weight:600;z-index:97;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:toast-in .3s ease}
.focus-banner.show{display:flex}
.focus-banner button{background:rgba(255,255,255,.15);border:none;color:#fff;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:10px}

/* Paper mode banner */
.paper-banner{position:fixed;top:14px;right:14px;background:#92400e;color:#fff;padding:8px 14px;border-radius:20px;display:none;align-items:center;gap:8px;font-size:12px;font-weight:600;z-index:97;box-shadow:0 4px 14px rgba(146,64,14,.4);animation:toast-in .3s ease}
.paper-banner.show{display:flex}
.paper-banner button{background:rgba(255,255,255,.2);border:none;color:#fff;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:10px}

/* ===== AUDIO PLAYER PRO ===== */
/* When player active, add bottom padding to body so panel never hides content */
body.tts-on{padding-bottom:260px}
body.tts-on.tts-mini{padding-bottom:80px}
@media(max-width:600px){body.tts-on{padding-bottom:300px}body.tts-on.tts-mini{padding-bottom:75px}}
.tts-highlight{scroll-margin-bottom:280px !important;scroll-margin-top:80px !important}
.audio-player{position:fixed;bottom:90px;right:14px;width:340px;max-width:calc(100vw - 28px);background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);z-index:96;display:none;flex-direction:column;overflow:hidden;animation:toast-in .3s ease;border:1px solid #e2e8f0;transition:all .3s ease}
.audio-player.show{display:flex}
.audio-player .ap-header{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.audio-player .ap-header .ap-mini-btn,.audio-player .ap-header .ap-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
.audio-player .ap-header .ap-mini-btn{margin-left:auto}
.audio-player .ap-header .ap-close{margin-left:6px}
.audio-player .ap-header .ap-mini-btn:hover,.audio-player .ap-header .ap-close:hover{background:rgba(255,255,255,.35)}
/* Mini compact mode */
body.tts-mini .audio-player{width:auto;left:10px;right:10px;bottom:80px;border-radius:14px;max-width:none}
body.tts-mini .audio-player .ap-body{display:none}
body.tts-mini .audio-player .ap-mini-bar{display:flex}
.audio-player .ap-mini-bar{display:none;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-top:1px solid #e2e8f0}
.audio-player .ap-mini-bar .ap-mini-progress{flex:1;height:4px;background:#e2e8f0;border-radius:3px;overflow:hidden;cursor:pointer}
.audio-player .ap-mini-bar .ap-mini-progress-bar{height:100%;background:linear-gradient(90deg,#7c3aed,#2563eb);width:0%;transition:width .3s ease}
.audio-player .ap-mini-bar button{background:#f1f5f9;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:11px;color:#1e293b;display:flex;align-items:center;justify-content:center}
.audio-player .ap-mini-bar .ap-mini-play{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff !important;width:34px;height:34px}
.audio-player .ap-mini-bar .ap-mini-pos{font-size:10px;color:#64748b;font-family:'JetBrains Mono',monospace;min-width:42px;text-align:center}
.audio-player .ap-body{padding:14px 16px}
.audio-player .ap-progress{height:6px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:6px;cursor:pointer}
.audio-player .ap-progress-bar{height:100%;background:linear-gradient(90deg,#7c3aed,#2563eb);transition:width .3s ease;width:0%}
.audio-player .ap-info{display:flex;justify-content:space-between;font-size:11px;color:#64748b;margin-bottom:12px}
.audio-player .ap-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.audio-player .ap-btn{background:#f1f5f9;border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;color:#1e293b;font-size:13px;transition:.2s;display:flex;align-items:center;justify-content:center}
.audio-player .ap-btn:hover{background:#e2e8f0;transform:scale(1.08)}
.audio-player .ap-btn.ap-play{width:50px;height:50px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(124,58,237,.4)}
.audio-player .ap-btn.ap-play:hover{transform:scale(1.1)}
.audio-player .ap-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}
.audio-player .ap-setting label{display:block;color:#64748b;margin-bottom:4px;font-weight:600;font-size:11px}
.audio-player .ap-setting select,.audio-player .ap-setting input[type="range"]{width:100%;font-size:12px;padding:5px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#1e293b}
.audio-player .ap-setting .ap-rate-val{font-weight:700;color:#7c3aed;margin-left:4px}
.audio-player .ap-sleep{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:11px;color:#64748b}
.audio-player .ap-sleep select{padding:4px 6px;border-radius:6px;border:1px solid #e2e8f0;font-size:11px;flex:1;background:#fff;color:#1e293b}
.audio-player .ap-sleep-active{color:#ef4444;font-weight:700}

/* TTS highlight */
.tts-highlight{background:linear-gradient(120deg,#fde68a 0%,#fcd34d 100%);padding:2px 4px;border-radius:4px;box-shadow:0 0 0 2px #fbbf24;scroll-margin-top:80px;transition:.3s;animation:tts-pulse 1.5s ease-in-out infinite}
@keyframes tts-pulse{0%,100%{box-shadow:0 0 0 2px #fbbf24}50%{box-shadow:0 0 0 4px #fbbf24}}

/* Audio FAB speaking state */
.audio-fab.speaking{animation:audio-pulse 1.5s ease-in-out infinite}
@keyframes audio-pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.6)}50%{box-shadow:0 0 0 14px rgba(124,58,237,0)}}

@media(max-width:600px){.audio-player{bottom:80px;right:10px;left:10px;width:auto}}

/* Auto-rendered inline fractions */
.auto-frac{display:inline-block;vertical-align:middle;margin:0 2px;font-size:1em}
.auto-frac .katex{font-size:1.05em}
.auto-vector{display:inline-block;vertical-align:middle;margin:0 2px}
.auto-vector .katex{font-size:1.08em}
.formula-block .katex{color:#92400e}

/* QR action buttons */
.qr-actions{display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap}
.qr-actions button{padding:10px 16px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}
.qr-actions .qr-share{background:#10b981;color:#fff}
.qr-actions .qr-download{background:#3b82f6;color:#fff}
.qr-actions .qr-copy{background:#7c3aed;color:#fff}
@media (max-width: 768px) { .hide-mobile { display: none !important; } }

/* ==================== PASS RÉUSSITE PREMIUM STYLES ==================== */
/* Dashboard Announcement Banner */
.pr-banner-card {
  position: relative;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #1e3a8a 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 20px;
  padding: 24px;
  margin: 20px 0;
  color: #fff;
  box-shadow: 0 12px 36px rgba(30, 27, 75, 0.25), 0 0 20px rgba(245, 158, 11, 0.15);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pr-banner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(30, 27, 75, 0.35), 0 0 25px rgba(245, 158, 11, 0.25);
}
.pr-banner-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, rgba(124, 58, 237, 0) 70%);
  pointer-events: none;
}
.pr-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.pr-badge-vip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.pr-badge-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(253, 230, 138, 0.25);
}
.pr-banner-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.3;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pr-banner-desc {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 680px;
}
.pr-banner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.pr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #f1f5f9;
}
.pr-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pr-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  transition: all .25s ease;
  text-decoration: none;
}
.pr-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55);
  filter: brightness(1.08);
}
.pr-banner-price {
  font-size: 13px;
  color: #fde68a;
  font-weight: 600;
}

/* Modal Pass Réussite */
.teaser-container {
  padding: 6px 0;
  text-align: center;
}
.teaser-crown-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.35);
  font-size: 32px;
  margin-bottom: 12px;
  animation: crown-float 3s ease-in-out infinite;
}
@keyframes crown-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.teaser-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.teaser-feature-alert {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 18px;
  text-align: left;
}
@media (max-width: 480px) {
  .teaser-grid { grid-template-columns: 1fr; }
}
.teaser-card-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.teaser-card-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.teaser-card-text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}
.teaser-card-text span {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
  display: block;
}

/* Price Box */
.teaser-price-box {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fcd34d;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.12);
}
.teaser-price-val {
  font-size: 19px;
  font-weight: 900;
  color: #b45309;
}
.teaser-price-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #92400e;
  margin-top: 3px;
}

/* Phone Input Form & Validation */
.teaser-form {
  text-align: left;
  margin-top: 14px;
}
.teaser-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.digit-counter {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  transition: color .2s;
}
.digit-counter.valid { color: #10b981; }
.digit-counter.invalid { color: #ef4444; }

.phone-input-wrapper {
  display: flex;
  align-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: all .25s ease;
}
.phone-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.phone-input-wrapper.is-valid {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.phone-input-wrapper.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
.phone-country-code {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 48px;
  background: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 13.5px;
  color: #1e293b;
  white-space: nowrap;
}
.phone-input-field {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  background: transparent;
  width: 100%;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  letter-spacing: 1px;
}

/* Error message feedback */
.phone-error-feedback {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  margin-top: 6px;
  align-items: center;
  gap: 6px;
  animation: toast-in .2s ease;
}
.phone-error-feedback.show {
  display: flex;
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Submit button */
.btn-submit-waitlist {
  width: 100%;
  padding: 14px 20px;
  margin-top: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit-waitlist:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
}
.btn-submit-waitlist:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.teaser-guarantee {
  font-size: 11px;
  color: #64748b;
  margin-top: 10px;
  text-align: center;
}

/* ==================== PACK HORS-LIGNE PREMIUM ==================== */
.dl-btn.dl-btn-locked {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin-top: 12px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}
.dl-btn.dl-btn-locked::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.2), transparent);
  transition: left 0.6s ease;
}
.dl-btn.dl-btn-locked:hover::before {
  left: 100%;
}
.dl-btn.dl-btn-locked:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28) !important;
  transform: translateY(-2px) !important;
}
.dl-btn.dl-btn-locked .fa-lock {
  color: #f59e0b !important;
  font-size: 13px !important;
}

/* Bannière Pack Hors-Ligne dans la page de classe */
.class-offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 14px 0 22px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fadeIn 0.3s ease;
}
.class-offline-banner:hover {
  transform: translateY(-2px);
  border-color: #f59e0b;
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.25);
}
.cob-left {
  flex: 1;
}
.cob-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.cob-title {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cob-desc {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
}
.cob-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
  transition: all 0.2s ease;
}
.cob-btn .fa-lock {
  font-size: 13px;
}
.class-offline-banner:hover .cob-btn {
  filter: brightness(1.08);
  transform: scale(1.03);
}
@media (max-width: 640px) {
  .class-offline-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .cob-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Bannière « paiement en attente » (reprise d'un paiement abandonné) */
.pending-pay-banner {
  cursor: default;
  border-color: rgba(245, 158, 11, 0.55);
}
.pending-pay-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.pending-pay-secondary {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.pending-pay-secondary:hover {
  background: rgba(148, 163, 184, 0.28);
  border-color: #94a3b8;
}
.pending-pay-dismiss {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}
.pending-pay-dismiss:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
@media (max-width: 640px) {
  .pending-pay-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .pending-pay-actions > * {
    flex: 1 1 100%;
  }
}

/* ==================== FLASHCARDS (PREMIUM) ==================== */
#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;
}
.fc-container {
  background: white;
  width: 100%;
  max-width: min(480px, calc(100vw - 20px));
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(84dvh, 560px);
  max-height: 560px;
  margin: auto 0;
  overscroll-behavior: contain;
}
.fc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fc-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1e293b;
}
.fc-close {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-progress-text {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 5px;
  font-weight: 600;
}
.fc-progress-bar {
  background: #e2e8f0;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}
.fc-progress-fill {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  height: 100%;
  transition: width 0.3s ease;
}
.fc-card {
  perspective: 1000px;
  flex: 1;
  margin-bottom: 20px;
  cursor: pointer;
}
.fc-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.fc-card.flipped .fc-card-inner {
  transform: rotateY(180deg);
}
.fc-card-front, .fc-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.fc-card-front {
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
}
.fc-card-front h4 {
  font-size: 22px;
  color: #1e293b;
  margin-bottom: 20px;
}
.fc-hint {
  font-size: 12px;
  color: #94a3b8;
  position: absolute;
  bottom: 20px;
}
.fc-card-back {
  transform: rotateY(180deg);
  background: #f8fafc;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  text-align: left;
}
.fc-back-content {
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
  width: 100%;
}
.fc-eval-text {
  text-align: center;
  font-size: 13px;
  color: #475569;
  margin: 0 0 10px;
}
.fc-buttons {
  display: flex;
  gap: 10px;
}
.fc-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  transition: transform 0.2s;
}
.fc-btn:active { transform: scale(0.95); }
.fc-btn-hard { background: #ef4444; }
.fc-btn-good { background: #3b82f6; }
.fc-btn-easy { background: #10b981; }

/* ---- Numero de carte ---- */
.fc-card-num { position:absolute; top:14px; left:14px; background:#e2e8f0; color:#64748b; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; }

/* ---- Unlocked Offline Pack Styles ---- */
.dl-btn.dl-btn-unlocked {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
  color: #fff !important;
  border: 1px solid #10b981 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  margin-top: 12px !important;
  box-shadow: 0 4px 12px rgba(6, 95, 70, 0.2) !important;
}
.dl-btn.dl-btn-unlocked:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important;
}
.class-offline-banner.unlocked {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%) !important;
}
.class-offline-banner.unlocked:hover {
  border-color: #10b981 !important;
  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.25) !important;
}

/* ---- Pricing Cards in Premium Teaser Modal ---- */
.teaser-container {
  text-align: left;
  padding: 4px 0;
}
.pricing-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-2px);
}

/* ==================== RESPONSIVE MOBILE MODAL & FLASHCARD RULES ==================== */
@media (max-width: 640px) {
  .rci-modal {
    padding: 8px !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .rci-modal-content {
    max-width: min(390px, calc(100vw - 16px)) !important;
    max-height: min(88dvh, calc(100vh - 20px)) !important;
    padding: 15px 14px !important;
    border-radius: 18px !important;
  }
  .rci-modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .rci-modal h3 {
    font-size: 15.5px !important;
    margin-bottom: 10px !important;
  }
  .teaser-title {
    font-size: 14.5px !important;
    margin-bottom: 8px !important;
  }
  .pricing-tiers {
    gap: 8px !important;
  }
  .pricing-card {
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
  }
  .pricing-card strong {
    font-size: 13.5px !important;
  }
  .pricing-card ul {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 0 7px 0 !important;
  }
  .pricing-card button, .pricing-card .btn-submit-waitlist {
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    touch-action: manipulation;
  }
  .pricing-card button:active, .pricing-card .btn-submit-waitlist:active {
    transform: scale(0.98);
  }
  .teaser-guarantee {
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .fc-container {
    width: 100% !important;
    max-width: min(400px, calc(100vw - 16px)) !important;
    height: min(84dvh, 520px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  .fc-header h3 {
    font-size: 15px !important;
  }
  .fc-btn {
    padding: 9px 10px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }
}

/* ==================== STATISTIQUES & PROGRESSION MODAL ==================== */
.profile-modal-overlay.show,
.profile-modal-overlay.active {
  display: flex !important;
}
.stats-modal-premium {
  max-width: 480px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.35);
  text-align: left;
}
.stats-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 20px 18px 14px;
  text-align: center;
  position: relative;
}
.stats-modal-badge-top {
  display: inline-block;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(147, 197, 253, 0.3);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.stats-hero-icon {
  font-size: 28px;
  margin-bottom: 2px;
}
.stats-modal-header h2 {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 3px 0;
  color: #fff;
}
.stats-modal-header p {
  font-size: 12px;
  margin: 0;
  color: #94a3b8;
}

/* Navigation Onglets */
.stats-tabs-nav {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px;
  gap: 6px;
}
.stats-tab-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  touch-action: manipulation;
}
.stats-tab-btn.active {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.stats-tab-btn:hover:not(.active) {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.5);
}

/* Grille résumé stats */
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.stats-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
}
.stats-summary-card .ssc-val {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: block;
}
.stats-summary-card .ssc-lbl {
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Carte progression globale */
.stats-global-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.stats-prog-track {
  height: 9px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0;
}
.stats-prog-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Liste des matières */
.stats-subjects-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 12px;
}
.stats-subject-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
}
.stats-sub-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}
.stats-sub-info {
  flex: 1;
  min-width: 0;
}
.stats-sub-title-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.stats-sub-name {
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-sub-count {
  color: #64748b;
  font-size: 10.5px;
}

/* Graphique semaine */
.stats-week-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 12px;
}
.stats-week-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 65px;
  gap: 6px;
  padding-top: 10px;
}
.stats-week-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.stats-week-val {
  font-size: 9px;
  font-weight: 700;
  color: #2563eb;
  min-height: 11px;
}
.stats-week-bar-wrap {
  flex: 1;
  width: 100%;
  max-width: 22px;
  background: #e2e8f0;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.stats-week-bar {
  width: 100%;
  background: #93c5fd;
  border-radius: 5px 5px 0 0;
  transition: height 0.4s ease;
}
.stats-week-bar.today {
  background: #2563eb;
}
.stats-week-day {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 3px;
}
.stats-week-day.today {
  font-weight: 800;
  color: #2563eb;
}

/* Storage / Cache tab */
.stats-storage-card {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 12px;
}
.stats-storage-jauge {
  height: 9px;
  background: #dbeafe;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 5px;
}
.stats-storage-jauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 999px;
}
.stats-cache-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

/* ==================== 1 A: MODE RÉCITATION ACTIVE (ACTIVE RECALL) ==================== */
.fiche-study-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
}
.study-bar-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.study-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: manipulation;
}
.study-btn:hover {
  transform: translateY(-1px);
  border-color: #94a3b8;
}
.study-btn:active {
  transform: scale(0.96);
}
.study-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.study-btn.active.recall-active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.study-btn.active.highlighter-active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.study-badge-count {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 2px;
}

/* Active Recall Banner */
.recall-floating-banner {
  position: sticky;
  top: 70px;
  z-index: 100;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
  animation: toast-in 0.25s ease;
  flex-wrap: wrap;
}
.recall-banner-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.recall-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.recall-banner-btn {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid #d97706;
  background: #ffffff;
  color: #92400e;
  cursor: pointer;
  transition: 0.15s;
}
.recall-banner-btn:active {
  transform: scale(0.95);
}

/* Masked items - Toute la leçon floutée */
.fiche-content.active-recall-all-blur {
  user-select: none !important;
}

.fiche-content.active-recall-all-blur > *:not(.recall-block-revealed):not(.exam-traps-card):not(.fiche-study-bar):not(#recallFloatingBanner):not(#highlighterBar):not(.fiche-notes-box):not(.fiche-actions):not(.resume-ci-whatsapp-qr):not(script):not(style) {
  filter: blur(10px) !important;
  opacity: 0.35 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: filter 0.25s ease, opacity 0.25s ease, background 0.25s ease !important;
}

/* Specificity fix: when user touches any block, it unblurs immediately! */
.fiche-content.active-recall-all-blur > .recall-block-revealed,
.fiche-content.active-recall-all-blur > *.recall-block-revealed {
  filter: none !important;
  opacity: 1 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-left: 5px solid #10b981 !important;
  padding-left: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15) !important;
  animation: recallPop 0.25s ease !important;
}

@keyframes recallPop {
  0% { transform: scale(0.98); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==================== 1 B: SURLIGNAGE (HIGHLIGHTER) & ANNOTATIONS ==================== */
.fiche-content, .fiche-content * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.highlighter-floating-bar {
  position: sticky;
  top: 70px;
  z-index: 99;
  background: #ffffff;
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 8px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
  animation: toast-in 0.25s ease;
  flex-wrap: wrap;
}
.hl-palette {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-color-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.hl-color-pill:hover {
  transform: scale(1.15);
}
.hl-color-pill.active {
  border-color: #0f172a;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hl-pill-yellow { background: #fef08a; border: 1.5px solid #eab308; }
.hl-pill-green { background: #bbf7d0; border: 1.5px solid #22c55e; }
.hl-pill-blue { background: #bfdbfe; border: 1.5px solid #3b82f6; }
.hl-pill-pink { background: #fbcfe8; border: 1.5px solid #ec4899; }
.hl-pill-eraser {
  background: #f1f5f9;
  border: 1.5px dashed #94a3b8;
  color: #64748b;
  font-size: 14px;
}

.hl-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: #10b981;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.hl-apply-btn:hover {
  background: #059669;
}
.hl-apply-btn:active {
  transform: scale(0.95);
}

/* Highlight elements on the fiche */
mark.rci-hl {
  border-radius: 4px !important;
  padding: 2px 5px !important;
  margin: 0 1px !important;
  cursor: pointer !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  transition: all 0.2s ease !important;
}
mark.rci-hl:hover,
.rci-hl-block:hover,
.rci-hl-inline:hover {
  filter: brightness(0.95);
}

.rci-hl-block {
  border-radius: 8px !important;
  padding: 4px 8px !important;
  margin: 4px 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rci-hl-inline {
  border-radius: 4px !important;
  padding: 2px 5px !important;
  margin: 0 1px !important;
  cursor: pointer !important;
  display: inline !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  transition: all 0.2s ease !important;
}

/* Couleurs Light Mode */
mark.rci-hl.hl-yellow, .rci-hl-block.hl-yellow, .rci-hl-inline.hl-yellow { background: #fef08a !important; color: #1e293b !important; }
mark.rci-hl.hl-green, .rci-hl-block.hl-green, .rci-hl-inline.hl-green { background: #bbf7d0 !important; color: #1e293b !important; }
mark.rci-hl.hl-blue, .rci-hl-block.hl-blue, .rci-hl-inline.hl-blue { background: #bfdbfe !important; color: #1e293b !important; }
mark.rci-hl.hl-pink, .rci-hl-block.hl-pink, .rci-hl-inline.hl-pink { background: #fbcfe8 !important; color: #1e293b !important; }

/* Fiche Notes Drawer / Modal */
.fiche-notes-box {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  animation: toast-in 0.2s ease;
}
.fiche-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fiche-notes-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche-notes-status {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
}
.fiche-notes-input {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1e293b;
  background: #f8fafc;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.fiche-notes-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ==================== 1 C: ENCADRÉ « PIÈGES FRÉQUENTS D'EXAMEN » ==================== */
.exam-traps-card {
  margin: 28px 0 20px 0;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #ea580c;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.12);
  position: relative;
  overflow: hidden;
}
.exam-traps-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.exam-traps-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ea580c;
  color: #ffffff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.exam-traps-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
}
.exam-traps-title {
  font-size: 16px;
  font-weight: 900;
  color: #9a3412;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.exam-traps-intro {
  font-size: 13px;
  color: #7c2d12;
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.exam-traps-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exam-trap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid #ea580c;
  font-size: 13px;
  color: #431407;
  line-height: 1.45;
}
.exam-trap-icon {
  color: #ea580c;
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}
.exam-traps-tip {
  background: linear-gradient(135deg, #fef9c3, #fef08a);
  border: 1px solid #facc15;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: #713f12;
  line-height: 1.45;
}
.exam-traps-tip-icon {
  color: #eab308;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Teaser verrouillé pour Pièges d'Examen */
.exam-traps-card.exam-traps-locked {
  cursor: pointer;
  border-style: dashed;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.exam-traps-card.exam-traps-locked:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(234, 88, 12, 0.2);
}
.exam-traps-blur-preview {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
}
.exam-traps-blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: radial-gradient(circle, rgba(255, 247, 237, 0.8) 0%, rgba(255, 237, 213, 0.94) 100%);
  backdrop-filter: blur(2px);
}
.exam-traps-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.4);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.exam-traps-unlock-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}
.exam-traps-unlock-btn:active {
  transform: scale(0.97);
}

.study-btn.locked {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}
/* ==================== COMPTE À REBOURS OFFICIEL 01 OCTOBRE 2026 ==================== */
.rci-countdown-card {
  position: relative;
  background: linear-gradient(135deg, #090d16 0%, #111827 40%, #1e1b4b 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 22px;
  padding: 26px 20px;
  margin: 18px 0 24px;
  color: #fff;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(245, 158, 11, 0.15);
  overflow: hidden;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rci-countdown-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(245, 158, 11, 0.25);
}
.rci-countdown-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(124, 58, 237, 0) 70%);
  pointer-events: none;
}
.rci-countdown-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0) 70%);
  pointer-events: none;
}
.rci-cd-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  margin-bottom: 12px;
}
.rci-cd-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 60%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rci-cd-date-tag {
  display: inline-block;
  color: #38bdf8;
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.rci-cd-subtitle {
  font-size: 13px;
  color: #cbd5e1;
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.rci-cd-timer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 480px;
  margin: 0 auto 22px;
}
@media (max-width: 500px) {
  .rci-cd-timer-grid {
    gap: 8px;
  }
}
.rci-cd-unit {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(253, 230, 138, 0.3);
  border-radius: 14px;
  padding: 12px 6px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.rci-cd-unit:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.7);
}
.rci-cd-num {
  font-size: 32px;
  font-weight: 900;
  font-family: 'JetBrains Mono', 'SF Pro Display', -apple-system, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
  margin-bottom: 4px;
}
@media (max-width: 400px) {
  .rci-cd-num {
    font-size: 26px;
  }
}
.rci-cd-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #94a3b8;
}
.rci-cd-below {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  margin-top: 20px;
}
.rci-cd-below-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fde047;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rci-cd-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rci-cd-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.45;
}
.rci-cd-feature-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}
.rci-cd-feature-text strong {
  color: #ffffff;
}
.rci-cd-note {
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
  margin: 10px 0 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 10px;
  line-height: 1.45;
}
.rci-cd-cta-box {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(124, 58, 237, 0.25));
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.rci-cd-cta-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}
.rci-cd-cta-desc {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.rci-cd-input-group {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .rci-cd-input-group {
    flex-direction: column;
  }
}
.rci-cd-input {
  flex: 1;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rci-cd-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.rci-cd-submit-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  transition: transform 0.15s, filter 0.15s;
}
.rci-cd-submit-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}
.rci-cd-submit-btn:active {
  transform: scale(0.97);
}

/* Bandeau collant / sticky top bar pour les fiches */
.rci-cd-top-ticker {
  background: linear-gradient(90deg, #090d16 0%, #1e1b4b 50%, #090d16 100%);
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.45);
  color: #ffffff;
  padding: 8px 14px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 999;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
.rci-cd-top-ticker .badge {
  background: #f59e0b;
  color: #0f172a;
  font-weight: 800;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}
.rci-cd-top-ticker .timer-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #fde047;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(253, 224, 71, 0.35);
  font-size: 12px;
}
.rci-cd-top-ticker .cta-link {
  color: #38bdf8;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ==================== MODAL DE PAIEMENT SÉCURISÉ CÔTE D'IVOIRE ==================== */
#paymentCheckoutModal {
  z-index: 100050 !important;
}
#paymentCheckoutModal.show,
#paymentCheckoutModal.active {
  display: flex !important;
  z-index: 100050 !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}
.checkout-modal-card {
  max-width: 440px !important;
  width: 92% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35) !important;
  padding: 0 !important;
  background: #ffffff;
  text-align: left;
}
.checkout-header {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  padding: 22px 20px 18px;
  color: #ffffff;
  text-align: center;
  position: relative;
}
.checkout-badge-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.checkout-header h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 6px;
  color: #ffffff;
}
.checkout-price-pill {
  display: inline-block;
  background: #fef08a;
  color: #854d0e;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.checkout-field-group {
  margin-bottom: 16px;
}
.checkout-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 7px;
}
.checkout-hint-badge {
  font-size: 11px;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}
.checkout-country-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
}
.checkout-country-box .cc-flag {
  font-size: 24px;
  line-height: 1;
}
.checkout-country-box .cc-info {
  flex: 1;
}
.checkout-country-box .cc-name {
  display: block;
  font-weight: 800;
  font-size: 13.5px;
  color: #0f172a;
}
.checkout-country-box .cc-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
}
.checkout-country-box .cc-check {
  font-size: 11px;
  font-weight: 800;
  color: #059669;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: 8px;
}
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.pm-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.pm-method-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
}
.pm-method-card.active {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
}
.pm-method-card .pmm-badge {
  position: absolute;
  top: -8px;
  right: 6px;
  background: #10b981;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}
.pm-method-card .pmm-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 6px;
}
.pm-method-card .pmm-title {
  font-weight: 800;
  font-size: 12.5px;
  color: #0f172a;
}
.pm-method-card .pmm-speed {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}
.checkout-phone-input-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.checkout-phone-input-wrap:focus-within {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.cpi-prefix {
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  color: #334155;
  background: #e2e8f0;
  border-right: 1px solid #cbd5e1;
  user-select: none;
}
.cpi-input {
  flex: 1;
  padding: 11px 12px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  letter-spacing: 0.5px;
}
.cpi-helper {
  font-size: 11px;
  color: #64748b;
  margin: 5px 0 0;
  line-height: 1.4;
}
.checkout-submit-btn {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
  margin-top: 10px;
}
.checkout-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
}
.checkout-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.checkout-security-footer {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: #64748b;
}
.checkout-security-footer .csf-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 6px;
  font-size: 11px;
}
.checkout-security-footer .csf-help a {
  color: #0284c7;
  font-weight: 700;
  text-decoration: underline;
}