/* ==========================================================================
   CrediElevate Authority Program — styles propres à /accompagnement/
   S'appuie sur les tokens et composants de style.css (non modifié).
   Toutes les classes sont préfixées « ap- » : aucun impact sur la landing.
   ========================================================================== */

.ap-nowrap { white-space: nowrap; }

/* ---------- Header : retour vers la landing ---------- */
.ap-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ap-back:hover { color: var(--text); border-color: var(--text-3); background: rgba(255, 255, 255, 0.03); }

/* ---------- Hero ---------- */
.ap-hero { padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 4vw, 56px); text-align: center; }
.ap-hero__inner { max-width: calc(900px + var(--gutter) * 2); }
.ap-hero h1 {
  margin-top: var(--s-5);
  font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
}

.ap-promise {
  position: relative;
  max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 40px);
  border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(46, 91, 255, 0.14) 0%, var(--surface) 60%);
  box-shadow: var(--shadow-card);
}
.ap-promise__text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.125rem); line-height: 1.25; letter-spacing: -0.02em;
  text-wrap: balance;
}
.ap-promise__text .hl { font-weight: 800; }
.ap-promise__contract {
  margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45;
}
.ap-promise__contract svg { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--ok); }

/* ---------- VSL horizontale ---------- */
.ap-vsl { padding-bottom: clamp(56px, 7vw, 96px); }
.ap-vsl .container { max-width: calc(960px + var(--gutter) * 2); }
.ap-vsl__lead {
  margin-bottom: var(--s-4); text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--text);
}
.ap-vsl__lead span { color: var(--accent-text); margin-right: 4px; }
@media (max-width: 429px) { .ap-vsl__lead { font-size: 1rem; text-wrap: balance; } }
.ap-vsl__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: #0a1120;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
/* Même halo que la VSL de la landing */
.ap-vsl .container { position: relative; }
.ap-vsl .container::before {
  content: ""; position: absolute; inset: 10% 5%; z-index: -1;
  background: radial-gradient(closest-side, rgba(46, 91, 255, 0.22), transparent);
  filter: blur(30px); pointer-events: none;
}
.ap-vsl__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Sélection + candidature ---------- */
.ap-select { padding-bottom: var(--section-y); }
.ap-select__card {
  max-width: 760px; margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.ap-select__card h2 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.ap-select__card p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.6; }
.ap-select__card p + p { margin-top: var(--s-4); }
.ap-key {
  color: var(--text); font-weight: 600;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%;
  padding-bottom: 1px;
}

.ap-cta { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); text-align: center; }
.ap-cta .btn, .ap-vsl__cta .btn { width: 100%; max-width: 440px; }
.ap-vsl__cta { margin-top: var(--s-5); text-align: center; }
.ap-cta__note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Mobile ---------- */
@media (max-width: 479px) {
  .ap-hero h1 { font-size: calc(var(--fs-h1) * 0.91); }
  .ap-select__card { padding: var(--s-6) var(--s-5); }
  .ap-select__card p { font-size: var(--fs-base); }
  .ap-promise__contract { font-size: var(--fs-xs); }
  .ap-cta .btn, .ap-vsl__cta .btn { padding-inline: var(--s-3); }
}
@media (max-width: 399px) {
  .ap-cta .btn, .ap-vsl__cta .btn { font-size: 1rem; }
}

/* ---------- Badge de contexte (plus discret que le badge standard) ---------- */
.ap-hero .badge { min-height: 28px; padding: 0 var(--s-3); font-size: 12px; letter-spacing: 0.08em; }
@media (max-width: 767px) {
  .ap-hero .badge { min-height: 22px; padding: 0 9px; font-size: 10px; }
  /* Compactage vertical mobile : seuls les espacements changent (tailles de texte inchangées) */
  .ap-hero { padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .ap-hero h1 { margin-top: var(--s-3); }
  .ap-promise { margin-top: var(--s-5); }
  .ap-vsl__lead { margin-bottom: var(--s-3); }
}

/* ---------- Desktop : hero compacté pour que la VSL commence dans le 1er écran ----------
   Gains obtenus sur les espacements et paddings uniquement (tailles de texte inchangées).
   Les marges suivent aussi la hauteur du viewport (vh) pour s'adapter aux écrans bas. */
@media (min-width: 1024px) {
  .ap-hero { padding-top: clamp(20px, 4vh, 48px); padding-bottom: clamp(20px, 3vh, 32px); }
  .ap-hero h1 { margin-top: var(--s-4); }
  .ap-promise { margin-top: clamp(20px, 3vh, 28px); padding: var(--s-5) var(--s-7); }
  .ap-vsl__lead { margin-bottom: var(--s-3); }
}