/* ===================================================================
   REZO FORMATION PRO — Inscription & paiement
   =================================================================== */

.checkout-section { padding: var(--space-10) 0 var(--space-12); }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

/* Étapes */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-night-card);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  flex-shrink: 0;
}

.step.is-active { color: var(--color-text); }
.step.is-active .step-dot { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }

.step.is-done .step-dot { background: var(--color-success); border-color: var(--color-success); color: #08231a; }

.step-line {
  width: 32px; height: 1px;
  background: var(--color-line);
}

/* Formulaire */
.form-card { padding: var(--space-7); }

.form-card h2 { font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.form-card .form-sub { font-size: var(--fs-sm); margin-bottom: var(--space-6); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

.field { margin-bottom: var(--space-5); }

.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.field input,
.field select {
  width: 100%;
  background: var(--color-night-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  transition: border-color var(--speed-fast) var(--ease);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-blue-soft);
}

.field input::placeholder { color: var(--color-text-faint); }

.field-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: var(--space-2);
  display: none;
}

.field.has-error input,
.field.has-error select { border-color: var(--color-danger); }
.field.has-error .field-error { display: block; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.checkbox-row input {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--color-blue);
  flex-shrink: 0;
}

.checkbox-row label { font-size: var(--fs-sm); color: var(--color-text-dim); }
.checkbox-row a { color: var(--color-blue-soft); text-decoration: underline; }

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.payment-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}

.payment-option:hover { border-color: var(--color-blue-soft); }

.payment-option input { accent-color: var(--color-blue); width: 18px; height: 18px; flex-shrink: 0; }

.payment-option.is-selected {
  border-color: var(--color-blue-soft);
  background: var(--color-blue-dim);
}

.payment-option-label { flex: 1; }
.payment-option-label strong { display: block; font-size: var(--fs-sm); color: var(--color-text); }
.payment-option-label span { font-size: var(--fs-xs); color: var(--color-text-faint); }

.payment-option .paypal-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: #00457C;
}
.payment-option .paypal-mark span { color: #0070BA; }

/* Récapitulatif (sticky) */
.summary-card { padding: var(--space-6); position: sticky; top: 96px; }

.summary-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-5); }

.summary-course {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-5);
}

.summary-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-blue-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-soft);
}

.summary-course h4 { font-size: var(--fs-sm); margin-bottom: 4px; }
.summary-course span { font-size: var(--fs-xs); color: var(--color-text-faint); }

.summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
  margin-bottom: var(--space-3);
}

.summary-line.total {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
}

.promo-row { display: flex; gap: var(--space-2); margin: var(--space-5) 0; }
.promo-row input {
  flex: 1;
  background: var(--color-night-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.promo-row input:focus { outline: none; border-color: var(--color-blue-soft); }

.secure-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-5);
}

/* État de succès */
.success-card {
  max-width: 520px;
  margin: var(--space-10) auto;
  padding: var(--space-10) var(--space-7);
  text-align: center;
}

.success-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.14);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-card h2 { margin-bottom: var(--space-3); }
.success-card p { margin-bottom: var(--space-7); }

/* --- Profil : vue lecture seule --- */
.profil-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 480px) {
  .profil-info-grid { grid-template-columns: 1fr; }
}
.profil-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profil-info-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
}
.profil-info-value {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-text);
}