/* ========================================
   SnapSombre — Mobile-First Dark Theme (reconstitution pédagogique)
   ======================================== */

:root {
  --bg-primary: #0D0D0F;
  --bg-secondary: #141418;
  --bg-card: #1A1A20;
  --bg-card-hover: #222228;
  --yellow: #FFC83D;
  --yellow-dim: rgba(255, 200, 61, 0.15);
  --yellow-glow: rgba(255, 200, 61, 0.32);
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0B0;
  --text-muted: #6B6B7B;
  --border: rgba(255, 255, 255, 0.06);
  --danger: #FF4757;
  --danger-dim: rgba(255, 71, 87, 0.15);
  --success: #2ED573;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(255, 200, 61, 0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html, body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-x: hidden;
}

/* Screen reader only - visible to search engines */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== PAGE SYSTEM ===== */
.page {
  display: none;
  min-height: 100dvh;
  width: 100%;
  animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.page.active {
  display: flex;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== LANDING PAGE ===== */
.landing-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  justify-content: center;
  gap: 20px;
}

/* Brand */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: brandFloat 3s ease-in-out infinite;
}

@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.brand-icon {
  position: relative;
}

.brand-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--yellow-glow), transparent 70%);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0; }
}

.brand-name {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--text-primary);
}

.brand-name span {
  background: linear-gradient(135deg, var(--yellow), #FFA51F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tagline */
.tagline {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 320px;
}

.highlight {
  color: var(--yellow);
  font-weight: 700;
}

/* Badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow-dim);
  border: 1px solid rgba(255, 200, 61, 0.12);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--yellow);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.badge:hover {
  transform: scale(1.03);
  background: rgba(255, 200, 61, 0.2);
}

/* Feature Card */
.feature-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), #FFA51F, var(--yellow));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

.feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.feature-icon {
  font-size: 28px;
  line-height: 1;
}

.feature-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.feature-desc strong {
  color: var(--yellow);
  font-weight: 600;
}

/* CTA Button */
.btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--yellow), #FFA51F);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: #0D0D0F;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px rgba(255, 200, 61, 0.25);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 75%, 100% { left: -100%; }
  50% { left: 150%; }
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(255, 200, 61, 0.2);
}

.security-footer {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 15px;
}

.disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.1px;
  margin-top: 12px;
}

/* Expiration Timer */
.expiration-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px dashed rgba(255, 71, 87, 0.4);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  width: 100%;
}
.expiration-icon {
  color: #ff4757;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.expiration-text {
  color: #ff4757;
  font-size: 11px;
  text-align: left;
  line-height: 1.4;
}
.expiration-text strong {
  font-size: 13px;
  display: block;
  margin-top: 2px;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Social Proof Toast */
.social-proof-toast {
  position: fixed;
  bottom: -100px;
  right: 20px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 200, 61, 0.2);
  border-radius: 50px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
}
.social-proof-toast.show {
  bottom: 20px;
}
.toast-avatar {
  width: 24px;
  height: 24px;
  background: rgba(255, 200, 61, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--yellow);
  flex-shrink: 0;
}
.toast-text {
  font-size: 11px;
  color: var(--text-muted);
}
.toast-text strong {
  color: var(--text-primary);
}

/* App Footer & Legal Modals */
.app-footer {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: auto;
  position: relative;
  z-index: 10;
}
.app-footer a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 4px;
  transition: color 0.2s;
}
.app-footer a:hover {
  color: var(--text-primary);
}
.legal-modal {
  text-align: left;
  max-height: 80vh;
  overflow-y: auto;
}
.legal-modal h2 {
  font-size: 18px;
  margin-bottom: 10px;
}
.legal-content {
  font-size: 13px;
  color: var(--text-muted);
  margin: 15px 0 20px;
  line-height: 1.5;
}
.legal-content p {
  margin-bottom: 10px;
}
.legal-content strong {
  color: var(--text-primary);
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modalFade 0.25s ease;
}

.modal-overlay.active {
  display: flex;
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 24px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  animation: modalSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlide {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.modal-card p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.btn-modal {
  max-width: 200px;
  margin: 0 auto;
}

/* ===== FEATURES PAGE ===== */
.features-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  justify-content: center;
  gap: 14px;
}

.features-brand {
  margin-bottom: 2px;
}

.brand-sm {
  font-size: 24px !important;
}

/* Capabilities Grid */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.cap-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cap-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 200, 61, 0.15);
}

.cap-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.cap-info h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.cap-info p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Anonymous Notice */
.anon-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(46, 213, 115, 0.08);
  border: 1px solid rgba(46, 213, 115, 0.15);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.anon-icon {
  flex-shrink: 0;
}

.anon-notice strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  display: block;
  margin-bottom: 2px;
}

.anon-notice p {
  font-size: 11px;
  color: var(--text-muted);
}

/* Feature Card Mini */
.feature-card-mini {
  padding: 14px 20px;
}

.feature-card-mini .feature-header {
  margin-bottom: 0;
}

.feature-card-mini .feature-icon {
  font-size: 22px;
}

.feature-card-mini h2 {
  font-size: 15px;
}

/* Input Group */
.input-group {
  width: 100%;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper:focus-within {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.1);
}

.input-prefix {
  font-size: 16px;
  font-weight: 700;
  color: var(--yellow);
  margin-right: 4px;
}

.input-wrapper input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 14px 0;
}

.input-wrapper input::placeholder {
  color: var(--text-muted);
}

/* ===== TERMINAL PAGE ===== */
.terminal-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1C1C24;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.red { background: #FF5F57; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #28CA41; }

.terminal-user {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  font-family: 'Courier New', monospace;
}

.terminal-body {
  flex: 1;
  background: #0A0A0E;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100dvh - 160px);
  scrollbar-width: none;
}

.terminal-body::-webkit-scrollbar {
  display: none;
}

.terminal-lines {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--success);
  word-break: break-all;
}

.terminal-lines .line {
  opacity: 0;
  animation: termLine 0.15s ease forwards;
}

@keyframes termLine {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.terminal-lines .line-cmd {
  color: var(--yellow);
}

.terminal-lines .line-info {
  color: #5C6BC0;
}

.terminal-lines .line-success {
  color: var(--success);
}

.terminal-lines .line-warn {
  color: #FFB74D;
}

.terminal-lines .line-data {
  color: #80CBC4;
}

.terminal-lines .line-error {
  color: var(--danger);
}

/* Terminal Progress */
.terminal-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #1C1C24;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid var(--border);
  border-top: none;
}

.terminal-progress-bar {
  flex: 1;
  height: 8px;
  background: #0A0A0E;
  border-radius: 100px;
  overflow: hidden;
}

.terminal-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--success), #69F0AE);
  border-radius: 100px;
  /* Aucune transition : la largeur est pilotee image par image en JS. Une
     transition de 0,3 s, sans cesse relancee, lisserait justement les
     a-coups de la progression — le sur-place et les bonds qu on veut voir. */
  box-shadow: 0 0 10px rgba(46, 213, 115, 0.4);
}

.terminal-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  font-family: 'Courier New', monospace;
  min-width: 40px;
  text-align: right;
}

/* ===== RESULTS PAGE ===== */
.results-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: rgba(46, 213, 115, 0.12);
  border: 1px solid rgba(46, 213, 115, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
}

.results-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}



/* Results Sections */
.results-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.results-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.results-section-header span {
  font-size: 18px;
}

.results-section-header h3 {
  font-size: 14px;
  font-weight: 700;
}

/* Blurred Data */
.blurred-data {
  padding: 12px 16px;
  position: relative;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.blurred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.blurred-row:last-child {
  border-bottom: none;
}

.blurred-label {
  font-size: 12px;
  color: var(--text-muted);
}

.blurred-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Blurred Gallery */
.blurred-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.blurred-thumb {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #2a2a35, #1a1a25);
  border-radius: 8px;
}

/* Blurred Messages */
.blurred-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.blurred-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a45, #2a2a35);
  flex-shrink: 0;
}

.blurred-msg-content {
  flex: 1;
  min-width: 0;
}

.blurred-msg-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.blurred-msg-text {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blurred-msg-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Blurred Friends */
.blurred-friend-list {
  display: flex;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.blurred-friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.blurred-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a45, #2a2a35);
  border: 2px solid rgba(255, 200, 61, 0.2);
}

.blurred-friend-name {
  font-size: 10px;
  color: var(--text-muted);
}

/* Results Unlock */
.results-unlock {
  background: var(--bg-card);
  border: 1.5px solid rgba(255, 200, 61, 0.2);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 30px rgba(255, 200, 61, 0.05);
}

.lock-icon {
  font-size: 36px;
}

.results-unlock p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Map specific */
.blurred-map-wrapper {
  margin: -12px -16px 12px;
  height: 120px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blurred-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: blur(6px) contrast(1.1) brightness(0.6);
  transform: scale(1.1); /* Prevents blurred edges from showing white/transparent */
}

/* Image styles for bitmojis */
.blurred-thumb-img {
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

.blurred-msg-avatar-img,
.blurred-friend-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-primary);
  flex-shrink: 0;
}

.blurred-friend-avatar-img {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 200, 61, 0.2);
}

/* Features Checklist */
.features-checklist {
  width: 100%;
  background: #0D0D0F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 4px 0;
  text-align: left;
}

.results-unlock .checklist-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1.5;
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #A0A0B0;
}

.check-icon {
  color: #2ED573;
  font-weight: 700;
  flex-shrink: 0;
}

/* Pricing Card */
.pricing-card {
  width: 100%;
  background: rgba(255, 200, 61, 0.05);
  border: 1px solid rgba(255, 200, 61, 0.2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 4px 0;
}

.pricing-amount {
  font-size: 32px;
  font-weight: 900;
  color: var(--yellow);
  margin-bottom: 4px;
}

.pricing-detail {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Guarantee Card */
.guarantee-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  background: var(--bg-primary);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: left;
}

.guarantee-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.guarantee-text {
  flex: 1;
}

.guarantee-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.guarantee-text p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Unlock Button */
.btn-unlock {
  margin-top: 4px;
  text-decoration: none;
}

/* Security Footer */
.security-footer {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}


/* ===== BACKGROUND EFFECTS ===== */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 200, 61, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255, 214, 0, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-card-hover);
  border-radius: 100px;
}

/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 768px) {
  .landing-container {
    padding: 60px 24px;
  }

  .brand-name {
    font-size: 44px;
  }

  .tagline {
    font-size: 20px;
  }

  .feature-card {
    padding: 24px;
  }
}

/* Social Proof Toast */
.social-proof-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px 8px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

.social-proof-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-avatar {
  background: var(--yellow);
  color: #0D0D0F;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.toast-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ===== SEO Content Section ===== */
.seo-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}

.seo-content {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 20px;
}

.seo-content h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.seo-content h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 12px 0 8px;
}

.seo-content p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

.seo-content ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seo-content li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.seo-content li::before {
  content: '·';
  margin-right: 6px;
  color: var(--yellow);
}

.seo-content strong {
  color: var(--text-secondary);
}


/* ============================================================
   PASSE MOBILE + AJOUTS DE LA RECONSTITUTION PÉDAGOGIQUE
   (rien de tout ceci n'existe sur le site d'origine)
   ============================================================ */

/* ---- Bases tactiles ---- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* svh : la barre d'URL mobile ne fait plus sauter la mise en page */
  min-height: 100svh;
}

button,
.btn-primary {
  touch-action: manipulation;
}

/* Cibles tactiles : 52 px sur tout ce qui se tape au pouce */
.btn-primary,
.btn-modal {
  min-height: 52px;
}

/* 16 px sur l'input : en dessous, iOS zoome tout seul au focus */
#snap-username {
  font-size: 16px !important;
}

/* Zones sûres : encoche en haut, bords arrondis sur les côtés */
.page {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- Écran large : on garde la colonne mobile, centrée ---- */
@media (min-width: 900px) {
  body {
    background:
      radial-gradient(1000px 520px at 50% -10%, rgba(255, 200, 61, 0.05), transparent 70%),
      var(--bg-primary);
  }
  .page,
  .app-footer {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 380px = largeur utile de .results-container (420 - 2x20 de padding) :
     la barre d achat s aligne exactement sur le bord des cartes. */
  .dock-inner {
    max-width: 380px;
  }
}

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

/* ---- Petits ajouts de contenu ---- */

.rating-line {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.unlock-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--yellow);
  margin-bottom: 6px;
}

.unlock-sub {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.price-old {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration-thickness: 1.5px;
}

.thumb-lock {
  position: relative;
}
.thumb-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- Pied de page ---- */

.app-footer {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
}

.foot-nav button {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.foot-nav button:active {
  color: var(--text-primary);
}

.app-footer .edu-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.22);
}

/* ---- Barre d'achat collante (zone du pouce) ---- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  /* Fond OPAQUE, et surtout aucun backdrop-filter ici. Le flou couple a
     l animation dockUp (un transform) promouvait la barre en couche
     composite dont Chrome ne rafraichissait pas l instantane du fond : la
     barre restait mal dessinee jusqu au premier defilement, qui forcait le
     repaint. A 0,92 d opacite le flou ne se voyait de toute facon pas, et
     --bg-primary vaut exactement #0D0D0F : le rendu est identique. */
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  animation: dockUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dockUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.dock-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}

.dock-price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
}
.dock-price b {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
}
.dock-price span {
  font-size: 10px;
  color: var(--text-muted);
}

.dock-btn {
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--yellow), #FFA51F);
  color: #16130A;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 200, 61, 0.22);
}
.dock-btn:active {
  transform: scale(0.985);
}

.dock-spacer {
  height: 84px;
}

/* ---- Modales converties en feuilles glissantes (pattern mobile) ---- */

.modal-overlay {
  align-items: flex-end;
  padding: 0;
  overscroll-behavior: contain;
}

.modal-card {
  max-width: 520px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-bottom: 0;
  padding: 8px 22px calc(24px + env(safe-area-inset-bottom));
  animation: sheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.grip {
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}

.sheet-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sheet-x:active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.legal-modal {
  position: relative;
  max-height: 88svh;
  overscroll-behavior: contain;
}

.legal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 44px;
}

.legal-debunk {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 71, 87, 0.08);
  border-left: 3px solid var(--danger);
}
.legal-debunk strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 6px;
}
.legal-debunk p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

body.no-scroll {
  overflow: hidden;
}

/* ---- Feuille d'avertissement (remplace le paiement) ---- */

.warning-overlay {
  background: rgba(8, 4, 6, 0.86);
  align-items: flex-end;
}

.warning-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  max-height: 94svh;
  display: flex;
  flex-direction: column;
  background: #171114;
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6);
  animation: sheetUp 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  padding-top: 8px;
}

.warning-close {
  top: 14px;
}

.warning-top {
  flex-shrink: 0;
  padding: 14px 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 71, 87, 0.16), rgba(255, 71, 87, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.warning-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
}

.warning-card h2 {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 10px;
}

.warning-lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 0 auto;
}
.warning-lead strong {
  color: #FF6B78;
  font-weight: 700;
}

/* Seul le corps défile : le titre et le bouton restent toujours visibles */
.warning-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 20px 8px;
}

.warn-block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.warn-block:last-child {
  border-bottom: 0;
}

.warn-block h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #FF6B78;
  margin-bottom: 12px;
}

.warn-block p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.warn-block p:last-child {
  margin-bottom: 0;
}

.warn-block ul,
.warn-block ol {
  margin: 0;
  padding-left: 18px;
}

.warn-block li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 9px;
}
.warn-block li:last-child {
  margin-bottom: 0;
}
.warn-block li::marker {
  color: rgba(255, 107, 120, 0.7);
}
.warn-block strong {
  color: var(--text-primary);
  font-weight: 600;
}
.warn-patterns li strong {
  color: #FFB3BA;
}

.warn-legal {
  background: rgba(255, 71, 87, 0.05);
  border-radius: var(--radius-md);
  padding: 16px;
  border-bottom: 0;
}

.warn-soft {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted) !important;
  font-style: italic;
}

.warning-footer {
  flex-shrink: 0;
  padding: 12px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #171114;
}

.warning-cta {
  max-width: none;
  width: 100%;
  background: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(255, 71, 87, 0.26) !important;
}

.warning-foot-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 400px) {
  .warning-card h2 { font-size: 22px; }
  .warning-body { padding-left: 16px; padding-right: 16px; }
  .warning-footer { padding-left: 16px; padding-right: 16px; }
  .warning-top { padding-left: 16px; padding-right: 16px; }
}

.has-dock .social-proof-toast.show {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* [hidden] du navigateur est battu par toute regle d auteur qui pose display.
   On le rend prioritaire, sinon .page { display:flex } le neutralise. */
[hidden] {
  display: none !important;
}

/* .modal-card { text-align:center } est declare apres .legal-modal dans la
   feuille de base et l emporte : on realigne le texte legal a gauche. */
.legal-modal,
.legal-modal .legal-content {
  text-align: left;
}

.legal-modal .legal-head h2 {
  flex: 1;
}

/* ---- Correctif : defilement de la feuille d avertissement ----
   Version precedente : en-tete et pied figes, seul .warning-body defilait.
   Consequence : un doigt pose sur le titre ou sur le pied ne faisait rien
   defiler du tout. On repasse au motif standard des bottom sheets, ou toute
   la feuille defile et seul le bouton reste colle en bas. */

.warning-card {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.warning-top {
  flex-shrink: initial;
}

.warning-body {
  flex: initial;
  min-height: 0;
  overflow-y: visible;
}

.warning-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* le fond opaque evite que le texte defile visiblement sous le bouton */
  background: #171114;
  box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.9);
}

/* La croix reste en haut de la feuille et defile avec elle : collante, elle
   chevauchait le texte. Le bouton colle en bas sert de sortie permanente. */
.warning-close {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 3;
}

/* ---- FAQ indexable de l accueil ----
   Contenu volontairement VISIBLE : c est ce qui se positionne. Le texte cache
   en .sr-only du site d origine est du bourrage de mots-cles, penalise. */

.seo-faq {
  width: 100%;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.seo-faq h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.seo-faq details {
  border-bottom: 1px solid var(--border);
}

.seo-faq summary {
  /* 48 px de haut : cible tactile confortable au pouce */
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.seo-faq summary::-webkit-details-marker {
  display: none;
}

.seo-faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  font-weight: 400;
  color: var(--yellow);
  transition: transform 0.2s ease;
}

.seo-faq details[open] summary::after {
  transform: rotate(45deg);
}

.seo-faq details p {
  padding: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Mise en forme des pages legales ---- */

.app-footer .copyright {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.22);
}

.legal-content .legal-date {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal-content h3 {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.legal-content h3:first-of-type {
  margin-top: 0;
}

.legal-content p {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Accueil : un seul ecran, aucun defilement ----
   Le questionnaire a saute, l accueil se reduit a sa promesse et a son bouton.
   La FAQ indexable a suivi sur la page de saisie. On ne masque rien : le pied
   de page remonte dans l ecran, et le contenu est dimensionne pour rentrer
   au-dessus, y compris sur un petit telephone. */

body.landing-locked {
  overflow: hidden;
}

/* <main> porte les pages et le pied de page. Sur l accueil il devient une
   colonne d exactement un ecran : la page prend la hauteur qui reste, le pied
   de page se pose dessous. Plus rien ne depasse, donc plus rien ne defile.
   (Les feuilles modales sont en position:fixed, elles sortent du flux.) */
body.landing-locked main {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

body.landing-locked #page-landing {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

body.landing-locked .app-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0 10px calc(6px + env(safe-area-inset-bottom));
}

/* Pied de page compact : il partage l ecran avec le bouton, il ne doit pas
   lui prendre sa place. */
body.landing-locked .foot-nav button {
  min-height: 30px;
  padding: 0 7px;
  font-size: 10.5px;
}

body.landing-locked .app-footer .copyright {
  margin-top: 2px;
}

/* Le pied de page occupe desormais le bas de l accueil : le toast passe
   au-dessus, comme il le fait deja pour la barre d achat. --footer-h est
   mesuree en JS, la hauteur du pied variant avec le retour a la ligne. */
body.landing-locked .social-proof-toast.show {
  bottom: calc(var(--footer-h, 56px) + 14px);
}

#page-landing .landing-container {
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 2vh, 20px) 20px;
  /* L espacement se resserre avec la hauteur d ecran au lieu de deborder. */
  gap: clamp(7px, 1.8vh, 20px);
  overflow: hidden;
}

/* Ecrans courts : on reprend la place sur les elements decoratifs, jamais
   sur le bouton ni sur le titre. */
@media (max-height: 760px) {
  #page-landing .brand-icon svg {
    width: 40px;
    height: 40px;
  }
  #page-landing .brand {
    gap: 6px;
  }
  #page-landing .brand-name {
    font-size: 28px;
  }
  #page-landing .feature-card {
    padding: 13px 16px;
  }
}

@media (max-height: 640px) {
  #page-landing .brand-icon svg {
    width: 34px;
    height: 34px;
  }
  #page-landing .brand-name {
    font-size: 24px;
  }
  #page-landing .tagline {
    font-size: 15px;
  }
  #page-landing .feature-card {
    padding: 11px 14px;
  }
  #page-landing .feature-desc {
    font-size: 12.5px;
  }
}