/* ═══════════════════════════════════════════════════════════════
   paiement.css — styles de la page d'accès / paiement Pa Capona
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
}

.card {
  background: #fff;
  border-radius: clamp(10px, 3vw, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 420px;
  padding: clamp(24px, 5dvh, 40px) clamp(20px, 6vw, 36px);
}

/* ── En-tête ── */
.header {
  text-align: center;
  margin-bottom: clamp(20px, 4dvh, 32px);
}
.header-icon {
  margin-bottom: 8px;
}
.header-icon img {
  width: clamp(48px, 12vw, 64px);
  height: auto;
}
.header h1 {
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  color: #1a1a2e;
  margin-bottom: 4px;
}
.header .subtitle {
  font-size: clamp(0.76rem, 3.2vw, 0.88rem);
  color: #888;
}

/* ── Section code promo ── */
.section-label {
  font-size: clamp(0.68rem, 2.8vw, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #aaa;
  margin-bottom: 10px;
}

.promo-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.promo-input {
  flex: 1;
  padding: clamp(9px, 2dvh, 11px) 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: clamp(0.88rem, 3.8vw, 1rem);
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  color: #1a1a2e;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s;
}
.promo-input:focus    { border-color: #764ba2; }
.promo-input.error    { border-color: #e53935; }
.promo-input.success  { border-color: #43e97b; }

.btn-promo {
  padding: 0 clamp(14px, 4vw, 20px);
  background: #d6b9f4;
  color: #6b6969;
  border: none;
  border-radius: 8px;
  font-size: clamp(0.80rem, 3.5vw, 0.88rem);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-promo:hover  { opacity: 0.88; }
.btn-promo:active { transform: scale(0.96); }
.btn-promo:disabled { opacity: 0.5; cursor: not-allowed; }

.promo-message {
  margin-top: 8px;
  font-size: clamp(0.74rem, 3vw, 0.82rem);
  min-height: 18px;
  font-weight: 600;
}
.promo-message.error   { color: #e53935; }
.promo-message.success { color: #2e7d32; }

/* ── Séparateur ── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(18px, 3.5dvh, 26px) 0;
  color: #000000;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #a1a0a0;
}

/* ── Section paiement Stripe ── */
.prix-badge {
  text-align: center;
  margin-bottom: clamp(14px, 2.5dvh, 20px);
}
.prix-valeur {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 700;
  color: #764ba2;
}
.prix-label {
  font-size: clamp(0.70rem, 2.8vw, 0.78rem);
  color: #aaa;
  margin-top: 2px;
}

.btn-stripe {
  display: block;
  width: 100%;
  padding: clamp(13px, 2.5dvh, 15px) 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: clamp(0.88rem, 4vw, 0.98rem);
  font-weight: 700;
  border: none;
  border-radius: clamp(8px, 2.5vw, 10px);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-stripe:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-stripe:active { transform: scale(0.97); }

.secure-note {
  text-align: center;
  margin-top: clamp(10px, 2dvh, 16px);
  font-size: clamp(0.66rem, 2.6vw, 0.72rem);
  color: #ccc;
}

/* ── Responsive ≤ 360px ── */
@media (max-width: 360px) {
  .card        { padding: 16px 14px; }
  .header h1   { font-size: 1.05rem; }
  .prix-valeur { font-size: 1.5rem; }
  .btn-promo   { padding: 0 12px; font-size: 0.78rem; }
  .btn-stripe  { font-size: 0.84rem; padding: 11px 16px; }
}