/* ==========================================================================
   BTA5 — parcours d'inscription et de paiement
   Repris de mockup/assets/css/styles.css : champs de formulaire, assistant de
   inscription, porte d'entrée par code, vérification 2FA, moyens de paiement
   et badge. Le reste de la charte (boutons, titres, .container, .section) vient
   du CSS global d'Elementor ; les variables sont redéfinies ici en repli pour
   que la page reste correcte si ce CSS global venait à manquer.
   ========================================================================== */

.bta-flow {
  --bta-navy-950: #081633;
  --bta-navy-900: #0a1e4f;
  --bta-blue-500: #2563eb;
}

:is(.bta-apply, .bta-flow) .form-row { display: grid; gap: 0.45rem; }
:is(.bta-apply, .bta-flow) .form-row label { font-weight: 600; font-size: 0.875rem; color: var(--navy-800); }
:is(.bta-apply, .bta-flow) .form-row .hint { font-size: 0.78rem; color: var(--text-body); }
:is(.bta-apply, .bta-flow) .input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  color: var(--navy-800);
  background: var(--white);
  transition: border-color 0.25s, box-shadow 0.25s;
}
:is(.bta-apply, .bta-flow) .input::placeholder { color: #9aa4bd; }
:is(.bta-apply, .bta-flow) .input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
:is(.bta-apply, .bta-flow) .input.is-invalid { border-color: var(--error); }
:is(.bta-apply, .bta-flow) textarea.input { resize: vertical; min-height: 120px; }
:is(.bta-apply, .bta-flow) select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.8rem;
}
:is(.bta-apply, .bta-flow) .field-error {
  font-size: 0.78rem;
  color: var(--error);
  display: none;
}
:is(.bta-apply, .bta-flow) .form-row.has-error .field-error { display: block; }
:is(.bta-apply, .bta-flow) .form-row.has-error .input { border-color: var(--error); }

:is(.bta-apply, .bta-flow) .toast {
  position: fixed;
  z-index: 99;
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 140%);
  background: var(--navy-950);
  color: var(--white);
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-bta);
  transition: transform 0.4s var(--ease-out);
}
:is(.bta-apply, .bta-flow) .toast.is-visible { transform: translate(-50%, 0); }
:is(.bta-apply, .bta-flow) .toast svg { color: #4ade80; }
/* --------------------------------------------------------------------------
   Page Inscription
   -------------------------------------------------------------------------- */
:is(.bta-apply, .bta-flow) .apply-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 100svh;
}

:is(.bta-apply, .bta-flow) .apply-aside {
  position: relative;
  color: var(--white);
  padding: 2.5rem 3rem 2.5rem;
  display: flex;
  flex-direction: column;
}
:is(.bta-apply, .bta-flow) .apply-aside-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/inscription-aside.jpg');
  background-size: cover;
  background-position: center 20%;
}
:is(.bta-apply, .bta-flow) .apply-aside-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 82% 12%, rgba(37, 99, 235, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, rgba(8, 22, 51, 0.96) 10%, rgba(10, 30, 79, 0.88) 55%, rgba(27, 63, 171, 0.8) 100%);
}
:is(.bta-apply, .bta-flow) .apply-aside > *:not(.apply-aside-bg) { position: relative; }
/* Logo et date sur une même ligne */
:is(.bta-apply, .bta-flow) .apply-aside-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  flex-wrap: wrap;
}
:is(.bta-apply, .bta-flow) .apply-aside-top .hero-pill { padding: 0.42rem 0.9rem; font-size: 0.68rem; letter-spacing: 0.12em; }
/* Ces pages sont en gabarit Canvas : ni en-tête ni pied de page Elementor, donc
   pas de logo. Le panneau de marque le porte lui-même, comme dans la maquette. */
:is(.bta-apply, .bta-flow) .apply-aside .brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1;
  color: var(--white);
}
:is(.bta-apply, .bta-flow) .apply-aside .brand-logo { height: 40px; width: auto; display: block; }
:is(.bta-apply, .bta-flow) .apply-aside .brand-sakom {
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
:is(.bta-apply, .bta-flow) .apply-aside-body { flex: 1; display: grid; align-content: center; gap: 1.25rem; padding: 1.5rem 0; max-width: 440px; }
:is(.bta-apply, .bta-flow) .apply-aside h1 { color: var(--white); font-size: clamp(1.9rem, 2.9vw, 2.5rem); }
:is(.bta-apply, .bta-flow) .apply-aside .lead { color: rgba(255, 255, 255, 0.82); font-size: 1rem; }
/* Précision de second niveau, sous le paragraphe d'introduction. */
:is(.bta-apply, .bta-flow) .apply-aside-note { color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; line-height: 1.6; margin-top: -0.6rem; }

/* Montant de la participation, rappelé dans le panneau de marque */
:is(.bta-apply, .bta-flow) .apply-price {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--electric-400);
  border-radius: 0.9rem;
  padding: 0.95rem 1.2rem;
  display: grid;
  gap: 0.2rem;
}
:is(.bta-apply, .bta-flow) .apply-price-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--electric-400);
}
:is(.bta-apply, .bta-flow) .apply-price-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--white);
}
:is(.bta-apply, .bta-flow) .apply-price-amount span { font-size: 0.5em; opacity: 0.6; margin-left: 0.2rem; }
:is(.bta-apply, .bta-flow) .apply-price-note { font-size: 0.81rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-top: 0.2rem; }

/* Rappel du montant juste avant l'envoi du formulaire */
:is(.bta-apply, .bta-flow) .price-notice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: var(--ice-50);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.95rem 1.1rem;
  font-size: 0.9rem;
  color: var(--navy-800);
}
:is(.bta-apply, .bta-flow) .price-notice svg { flex: none; margin-top: 0.15rem; color: var(--blue-500); }
:is(.bta-apply, .bta-flow) .price-notice strong { white-space: nowrap; }

:is(.bta-apply, .bta-flow) .apply-steps-recap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.1rem;
  margin-top: 0.25rem;
}
:is(.bta-apply, .bta-flow) .recap-item {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.85);
}
:is(.bta-apply, .bta-flow) .recap-item .n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--electric-400);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}

:is(.bta-apply, .bta-flow) .apply-aside-foot { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

/* Lien vers la section « accès » de la page contact */
:is(.bta-apply, .bta-flow) .venue-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s, text-decoration-color 0.25s;
}
:is(.bta-apply, .bta-flow) .venue-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}

:is(.bta-apply, .bta-flow) .apply-main {
  display: flex;
  flex-direction: column;
  padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 3rem;
  background: var(--white);
}
:is(.bta-apply, .bta-flow) .apply-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
:is(.bta-apply, .bta-flow) .apply-topline .back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-body);
}
:is(.bta-apply, .bta-flow) .apply-topline .back:hover { color: var(--blue-500); }
:is(.bta-apply, .bta-flow) .apply-topline .help { font-size: 0.85rem; }
:is(.bta-apply, .bta-flow) .apply-topline .help a { color: var(--blue-500); font-weight: 600; }

/* Stepper */
:is(.bta-apply, .bta-flow) .wizard-progress { display: grid; gap: 0.8rem; margin-bottom: 2.6rem; }
:is(.bta-apply, .bta-flow) .wizard-steps { display: flex; gap: 0.6rem; }
:is(.bta-apply, .bta-flow) .wizard-step {
  flex: 1;
  display: grid;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-body);
}
:is(.bta-apply, .bta-flow) .wizard-step .bar {
  height: 4px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
:is(.bta-apply, .bta-flow) .wizard-step .bar i {
  position: absolute;
  inset: 0;
  background: var(--blue-500);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
:is(.bta-apply, .bta-flow) .wizard-step.is-done .bar i,
:is(.bta-apply, .bta-flow) .wizard-step.is-active .bar i { transform: scaleX(1); }
:is(.bta-apply, .bta-flow) .wizard-step.is-active { color: var(--royal-600); }
:is(.bta-apply, .bta-flow) .wizard-step.is-done { color: var(--navy-800); }
:is(.bta-apply, .bta-flow) .wizard-count { font-size: 0.8rem; color: var(--text-body); }

:is(.bta-apply, .bta-flow) .wizard-panel { display: none; animation: panel-in 0.4s var(--ease-out); }
:is(.bta-apply, .bta-flow) .wizard-panel.is-active { display: block; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
:is(.bta-apply, .bta-flow) .wizard-panel h2 { font-size: 1.6rem; font-weight: 800; font-style: italic; margin-bottom: 0.5rem; }
:is(.bta-apply, .bta-flow) .wizard-panel .panel-sub { font-size: 0.95rem; margin-bottom: 1.8rem; }

:is(.bta-apply, .bta-flow) .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; }
:is(.bta-apply, .bta-flow) .field-grid .form-row--full { grid-column: 1 / -1; }

:is(.bta-apply, .bta-flow) .wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}

:is(.bta-apply, .bta-flow) .consent-row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.85rem;
  padding: 1.1rem 1.2rem;
  background: var(--ice-50);
  border-radius: 0.9rem;
  border: 1px solid var(--border);
}
:is(.bta-apply, .bta-flow) .consent-row input {
  margin-top: 0.25rem;
  width: 17px;
  height: 17px;
  accent-color: var(--blue-500);
  flex: none;
}
:is(.bta-apply, .bta-flow) .consent-row.has-error { border-color: var(--error); }

/* Écran de succès */
:is(.bta-apply, .bta-flow) .apply-success { text-align: center; display: none; padding: 3rem 0; }
:is(.bta-apply, .bta-flow) .apply-success.is-visible { display: grid; gap: 1.3rem; justify-items: center; animation: panel-in 0.5s var(--ease-out); }
:is(.bta-apply, .bta-flow) .success-check {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--success);
  display: grid;
  place-items: center;
}
:is(.bta-apply, .bta-flow) .apply-success h2 { font-size: 1.9rem; font-weight: 800; font-style: italic; }
:is(.bta-apply, .bta-flow) .apply-success .ref {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--ice-50);
  border: 1px dashed var(--blue-500);
  color: var(--royal-600);
  border-radius: 0.7rem;
  padding: 0.6rem 1.3rem;
}
:is(.bta-apply, .bta-flow) .success-next {
  display: grid;
  gap: 0.7rem;
  text-align: left;
  background: var(--ice-50);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem 1.7rem;
  max-width: 460px;
  font-size: 0.9rem;
}
:is(.bta-apply, .bta-flow) .success-next li { display: flex; gap: 0.7rem; align-items: flex-start; }
:is(.bta-apply, .bta-flow) .success-next svg { color: var(--blue-500); flex: none; margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Page Paiement — porte d'entrée par code
   -------------------------------------------------------------------------- */
:is(.bta-apply, .bta-flow) .pay-gate { display: flex; justify-content: center; }
:is(.bta-apply, .bta-flow) .gate-card {
  width: min(560px, 100%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-bta);
  padding: 2.8rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}
:is(.bta-apply, .bta-flow) .gate-lock {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--ice-50);
  color: var(--blue-500);
  display: grid;
  place-items: center;
  margin-bottom: 0.2rem;
}
:is(.bta-apply, .bta-flow) .gate-intro { font-size: 0.97rem; }
:is(.bta-apply, .bta-flow) .gate-card form { width: 100%; display: grid; gap: 1.2rem; margin-top: 0.6rem; }
:is(.bta-apply, .bta-flow) .gate-card .form-row { text-align: left; }

:is(.bta-apply, .bta-flow) .code-input {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-block: 1rem;
}
:is(.bta-apply, .bta-flow) .code-input::placeholder { letter-spacing: 0.18em; font-weight: 700; }

:is(.bta-apply, .bta-flow) .gate-hint {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
  background: var(--ice-50);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.83rem;
  color: var(--text-body);
}
:is(.bta-apply, .bta-flow) .gate-hint svg { flex: none; margin-top: 0.15rem; color: var(--blue-500); }
:is(.bta-apply, .bta-flow) .code-chip {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--royal-600);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.1rem 0.6rem;
  transition: border-color 0.2s, color 0.2s;
}
:is(.bta-apply, .bta-flow) .code-chip:hover { border-color: var(--electric-400); color: var(--blue-500); }
:is(.bta-apply, .bta-flow) .gate-foot { font-size: 0.88rem; }
:is(.bta-apply, .bta-flow) .gate-foot a { color: var(--blue-500); font-weight: 600; }
:is(.bta-apply, .bta-flow) .gate-foot a:hover { color: var(--royal-600); }

/* ------------------------------------------------- Parcours de paiement */
:is(.bta-apply, .bta-flow) .pay-panel { display: none; }
:is(.bta-apply, .bta-flow) .pay-panel.is-active { display: block; animation: panel-in 0.4s var(--ease-out); }

:is(.bta-apply, .bta-flow) .pay-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 2.6rem;
  align-items: start;
}
:is(.bta-apply, .bta-flow) .pay-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.4rem;
  box-shadow: var(--shadow-soft);
}
:is(.bta-apply, .bta-flow) .pay-title { font-size: 1.55rem; font-weight: 800; font-style: italic; }
:is(.bta-apply, .bta-flow) .pay-sub { font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 1.8rem; }
:is(.bta-apply, .bta-flow) .pay-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--royal-600);
  font-family: var(--font-body);
  margin: 2.2rem 0 1rem;
}

:is(.bta-apply, .bta-flow) .recap-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.4rem;
  background: var(--ice-50);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.4rem 1.6rem;
}
:is(.bta-apply, .bta-flow) .recap-list dt {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-body);
  margin-bottom: 0.25rem;
}
:is(.bta-apply, .bta-flow) .recap-list dd { font-size: 0.93rem; font-weight: 600; color: var(--navy-800); }

/* Zones de dépôt de fichier */
:is(.bta-apply, .bta-flow) .upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
:is(.bta-apply, .bta-flow) .upload-drop {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1.5px dashed #c9d4ea;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
:is(.bta-apply, .bta-flow) .upload-drop:hover,
:is(.bta-apply, .bta-flow) .upload-drop.is-over { border-color: var(--blue-500); background: var(--ice-50); }
:is(.bta-apply, .bta-flow) .upload-preview {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--ice-50);
  color: var(--blue-500);
  display: grid;
  place-items: center;
  overflow: hidden;
}
:is(.bta-apply, .bta-flow) .upload-preview img { width: 100%; height: 100%; object-fit: cover; }
:is(.bta-apply, .bta-flow) .upload-pdf { font-size: 0.72rem; font-weight: 800; color: var(--royal-600); }
:is(.bta-apply, .bta-flow) .upload-text { display: grid; gap: 0.15rem; min-width: 0; }
:is(.bta-apply, .bta-flow) .upload-text strong { font-size: 0.9rem; color: var(--navy-800); }
:is(.bta-apply, .bta-flow) .upload-text small { font-size: 0.78rem; color: var(--text-body); word-break: break-word; }
:is(.bta-apply, .bta-flow) .upload-field.is-filled .upload-drop { border-style: solid; border-color: var(--success); }
:is(.bta-apply, .bta-flow) .upload-field.is-filled .upload-text small { color: var(--success); font-weight: 600; }
:is(.bta-apply, .bta-flow) .upload-field .field-error { display: none; margin-top: 0.4rem; }
:is(.bta-apply, .bta-flow) .upload-field.has-error .field-error { display: block; }
:is(.bta-apply, .bta-flow) .upload-field.has-error .upload-drop { border-color: var(--error); }

/* Carte montant */
:is(.bta-apply, .bta-flow) .pay-side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
:is(.bta-apply, .bta-flow) .amount-card {
  background-color: var(--navy-950);
  background-image: radial-gradient(60% 80% at 88% 8%, rgba(37, 99, 235, 0.45), transparent 62%);
  border-radius: var(--radius-card);
  padding: 2rem;
  color: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-bta);
  display: grid;
  gap: 0.7rem;
}
:is(.bta-apply, .bta-flow) .amount-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}
:is(.bta-apply, .bta-flow) .amount-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--white);
}
:is(.bta-apply, .bta-flow) .amount-value span { font-size: 1.1rem; opacity: 0.65; margin-left: 0.2rem; }
:is(.bta-apply, .bta-flow) .amount-value--sm { font-size: 2rem; }
:is(.bta-apply, .bta-flow) .amount-list { display: grid; gap: 0.55rem; margin-top: 0.6rem; font-size: 0.87rem; }
:is(.bta-apply, .bta-flow) .amount-list li { display: flex; gap: 0.55rem; align-items: flex-start; }
:is(.bta-apply, .bta-flow) .amount-list svg { flex: none; margin-top: 0.2rem; color: #4ade80; }
:is(.bta-apply, .bta-flow) .summary-list {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
}
:is(.bta-apply, .bta-flow) .summary-list li { display: flex; justify-content: space-between; gap: 1rem; }
:is(.bta-apply, .bta-flow) .summary-list strong { color: var(--white); }
:is(.bta-apply, .bta-flow) .amount-secure {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.4rem;
}
:is(.bta-apply, .bta-flow) .amount-secure svg { flex: none; margin-top: 0.15rem; }

:is(.bta-apply, .bta-flow) .pay-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------- 2FA */
:is(.bta-apply, .bta-flow) .otp-wrap {
  max-width: 560px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 2.6rem;
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
:is(.bta-apply, .bta-flow) .otp-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--ice-50);
  color: var(--blue-500);
  display: grid;
  place-items: center;
}
:is(.bta-apply, .bta-flow) .otp-wrap .pay-sub { margin-bottom: 0.4rem; }
:is(.bta-apply, .bta-flow) .otp-inputs { display: flex; justify-content: center; gap: 0.6rem; }
:is(.bta-apply, .bta-flow) .otp-box {
  width: 54px;
  height: 64px;
  /* Sans cette remise à zéro, le remplissage horizontal du thème (16 px de
     chaque côté) ne laisse que quelques pixels de largeur utile : le chiffre
     ne peut plus se centrer dans sa case, et le curseur le décale encore. */
  box-sizing: border-box;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 0.85rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--navy-800);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
:is(.bta-apply, .bta-flow) .otp-box:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
:is(.bta-apply, .bta-flow) .otp-inputs.is-wrong { animation: otp-shake 0.45s; }
:is(.bta-apply, .bta-flow) .otp-inputs.is-wrong .otp-box { border-color: var(--error); }
@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
:is(.bta-apply, .bta-flow) .otp-error { font-size: 0.85rem; color: var(--error); font-weight: 600; }
:is(.bta-apply, .bta-flow) .otp-demo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-body);
  background: var(--ice-50);
  border: 1px dashed var(--blue-500);
  border-radius: 0.8rem;
  padding: 0.7rem 1rem;
}
:is(.bta-apply, .bta-flow) .otp-demo strong {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: var(--royal-600);
}
:is(.bta-apply, .bta-flow) .otp-resend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(.bta-apply, .bta-flow) .otp-resend:disabled { color: var(--text-body); text-decoration: none; cursor: default; }
:is(.bta-apply, .bta-flow) .otp-wrap .pay-nav { width: 100%; }

/* ------------------------------------------------- Moyens de paiement */
:is(.bta-apply, .bta-flow) .pay-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
/* Nombre impair de moyens de paiement : le dernier occupe toute la largeur. */
:is(.bta-apply, .bta-flow) .pay-methods .pay-method:last-child:nth-child(odd) { grid-column: 1 / -1; }
:is(.bta-apply, .bta-flow) .pay-method {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: 1rem;
  padding: 0.95rem 1.1rem;
  background: var(--white);
  transition: border-color 0.25s, box-shadow 0.25s;
}
:is(.bta-apply, .bta-flow) .pay-method:hover { border-color: var(--electric-400); }
:is(.bta-apply, .bta-flow) .pay-method.is-active {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
:is(.bta-apply, .bta-flow) .pay-method-mark {
  flex: none;
  width: 46px;
  height: 32px;
  border-radius: 7px;
  background: var(--mark, var(--navy-800));
  color: var(--markText, #fff);
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
:is(.bta-apply, .bta-flow) .pay-method-body { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
:is(.bta-apply, .bta-flow) .pay-method-body strong { font-size: 0.92rem; color: var(--navy-800); }
:is(.bta-apply, .bta-flow) .pay-method-body small { font-size: 0.76rem; color: var(--text-body); }
:is(.bta-apply, .bta-flow) .pay-method-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  position: relative;
}
:is(.bta-apply, .bta-flow) .pay-method.is-active .pay-method-check {
  border-color: var(--blue-500);
  background: var(--blue-500);
}
:is(.bta-apply, .bta-flow) .pay-method.is-active .pay-method-check::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--white);
}
:is(.bta-apply, .bta-flow) .pay-fields { margin-top: 1.6rem; }

:is(.bta-apply, .bta-flow) #payNow.is-busy { opacity: 0.85; }
:is(.bta-apply, .bta-flow) #payNow.is-busy .btn-arrow {
  animation: spin 0.8s linear infinite;
  transform-origin: center;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- Badge */
:is(.bta-apply, .bta-flow) .done-head {
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
  margin-bottom: 3rem;
}
:is(.bta-apply, .bta-flow) .done-head p { max-width: 520px; }

/* Colonnes de largeur fixe : la grille reste à la largeur de son contenu,
   ce qui permet à justify-content de vraiment centrer l'ensemble. */
:is(.bta-apply, .bta-flow) .badge-stage {
  display: grid;
  grid-template-columns: 380px 380px;
  gap: 3rem;
  align-items: start;
  justify-content: center;
}

:is(.bta-apply, .bta-flow) .badge {
  width: 380px;
  border-radius: 1.5rem;
  overflow: hidden;
  color: var(--white);
  background-color: var(--navy-950);
  background-image:
    radial-gradient(60% 45% at 85% 8%, rgba(37, 99, 235, 0.55) 0%, transparent 62%),
    linear-gradient(160deg, #081633 0%, #0a1e4f 52%, #1b3fab 100%);
  box-shadow: 0 30px 70px -28px rgba(8, 22, 51, 0.7);
  display: grid;
  gap: 1.4rem;
  padding: 1.8rem 1.6rem 1.4rem;
  text-align: center;
}
:is(.bta-apply, .bta-flow) .badge-top { display: grid; gap: 0.6rem; justify-items: center; }
:is(.bta-apply, .bta-flow) .badge-logo { height: 30px; width: auto; }
:is(.bta-apply, .bta-flow) .badge-edition {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
:is(.bta-apply, .bta-flow) .badge-identity { display: grid; gap: 0.9rem; justify-items: center; }
:is(.bta-apply, .bta-flow) .badge-photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 3px solid rgba(59, 130, 246, 0.8);
  display: grid;
  place-items: center;
}
:is(.bta-apply, .bta-flow) .badge-photo img { width: 100%; height: 100%; object-fit: cover; }
:is(.bta-apply, .bta-flow) .badge-initials {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--white);
}
:is(.bta-apply, .bta-flow) .badge-names { display: grid; gap: 0.2rem; }
:is(.bta-apply, .bta-flow) .badge-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric-400);
}
:is(.bta-apply, .bta-flow) .badge-names h3 {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 800;
  font-style: italic;
}
:is(.bta-apply, .bta-flow) .badge-names p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
:is(.bta-apply, .bta-flow) .badge-country { font-size: 0.78rem !important; color: rgba(255, 255, 255, 0.5) !important; }

:is(.bta-apply, .bta-flow) .badge-qr {
  background: var(--white);
  border-radius: 1.1rem;
  padding: 0.9rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  text-align: left;
}
:is(.bta-apply, .bta-flow) .badge-qr canvas { width: 104px; height: 104px; display: block; flex: none; }
:is(.bta-apply, .bta-flow) .badge-qr-meta { display: grid; gap: 0.2rem; font-size: 0.7rem; color: var(--text-body); }
:is(.bta-apply, .bta-flow) .badge-ref {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy-800);
  letter-spacing: 0.06em;
}
:is(.bta-apply, .bta-flow) .badge-foot {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}
:is(.bta-apply, .bta-flow) .badge-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
:is(.bta-apply, .bta-flow) .badge-foot svg { color: var(--electric-400); }

:is(.bta-apply, .bta-flow) .badge-actions {
  max-width: 380px;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
:is(.bta-apply, .bta-flow) .badge-actions h3 { font-size: 1.2rem; font-weight: 800; font-style: italic; }
:is(.bta-apply, .bta-flow) .badge-actions > p { font-size: 0.92rem; margin-bottom: 0.4rem; }
:is(.bta-apply, .bta-flow) .badge-tips {
  display: grid;
  gap: 0.5rem;
  background: var(--ice-50);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem 1.3rem;
  font-size: 0.83rem;
  margin-top: 0.4rem;
}
:is(.bta-apply, .bta-flow) .badge-tips li { position: relative; padding-left: 1rem; }
:is(.bta-apply, .bta-flow) .badge-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-500);
}
:is(.bta-apply, .bta-flow) .badge-back {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-500);
  text-align: center;
  margin-top: 0.3rem;
}
:is(.bta-apply, .bta-flow) .badge-back:hover { color: var(--royal-600); }

/* --------------------------------------------------------------- Impression */
@media print {
  .topbar, .site-header, .mobile-sheet, .site-footer, .toast,
  .page-hero, .done-head, .badge-actions, .pay-gate, .pay-flow { display: none !important; }
  body { background: #fff; }
  .section { padding: 0 !important; }
  .badge-stage { display: block; }
  .badge {
    width: 88mm;
    margin: 0 auto;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* --------------------------------------------------------------------------
   Responsive — paliers repris de la maquette pour les seuls composants
   du parcours (les autres restent gérés par le CSS global du site).
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :is(.bta-apply, .bta-flow) .apply-layout { grid-template-columns: 1fr; }
  :is(.bta-apply, .bta-flow) .apply-aside { min-height: auto; padding: 2rem 2rem 2.5rem; }
  :is(.bta-apply, .bta-flow) .apply-aside-body { padding: 1.5rem 0; }
  :is(.bta-apply, .bta-flow) .apply-steps-recap { display: none; }
  :is(.bta-apply, .bta-flow) .pay-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  :is(.bta-apply, .bta-flow) .pay-side { position: static; }
  :is(.bta-apply, .bta-flow) .badge-stage { grid-template-columns: 1fr; justify-items: center; gap: 2.2rem; }
  :is(.bta-apply, .bta-flow) .badge-actions { max-width: 380px; width: 100%; }
}

@media (max-width: 860px) {
  /* iOS zoome dès qu'un champ descend sous 16px. */
  :is(.bta-apply, .bta-flow) .input:not(.code-input) { font-size: 16px; }
}

@media (max-width: 640px) {
  :is(.bta-apply, .bta-flow) .field-grid { grid-template-columns: 1fr; }
  :is(.bta-apply, .bta-flow) .wizard-nav { flex-direction: column-reverse; }
  :is(.bta-apply, .bta-flow) .wizard-nav .btn { width: 100%; }
  :is(.bta-apply, .bta-flow) .wizard-step .step-word { display: none; }
  :is(.bta-apply, .bta-flow) .wizard-step { font-size: 0.78rem; }
  :is(.bta-apply, .bta-flow) .wizard-steps { gap: 0.4rem; }
  :is(.bta-apply, .bta-flow) .apply-aside { padding: 1.5rem 1.25rem 1.75rem; }
  :is(.bta-apply, .bta-flow) .apply-aside-body { padding: 1.1rem 0; }
  :is(.bta-apply, .bta-flow) .apply-aside .lead { font-size: 1rem; line-height: 1.6; }
  :is(.bta-apply, .bta-flow) .apply-price-amount { font-size: 1.5rem; }
  :is(.bta-apply, .bta-flow) .apply-main { padding: 1.75rem 1.25rem 2.5rem; }
  :is(.bta-apply, .bta-flow) .apply-topline { margin-bottom: 1.75rem; }
  :is(.bta-apply, .bta-flow) .gate-card { padding: 1.8rem 1.4rem; }
  :is(.bta-apply, .bta-flow) .code-input { font-size: 1.2rem; letter-spacing: 0.16em; }
  :is(.bta-apply, .bta-flow) .pay-main { padding: 1.5rem; }
  :is(.bta-apply, .bta-flow) .recap-list { grid-template-columns: 1fr; }
  :is(.bta-apply, .bta-flow) .upload-grid { grid-template-columns: 1fr; }
  :is(.bta-apply, .bta-flow) .pay-methods { grid-template-columns: 1fr; }
  :is(.bta-apply, .bta-flow) .otp-wrap { padding: 1.8rem 1.2rem; }
  :is(.bta-apply, .bta-flow) .otp-inputs { gap: 0.35rem; }
  :is(.bta-apply, .bta-flow) .otp-box { width: 44px; height: 54px; font-size: 1.3rem; }
  :is(.bta-apply, .bta-flow) .pay-nav { flex-direction: column-reverse; align-items: stretch; }
  :is(.bta-apply, .bta-flow) .pay-nav .btn { width: 100%; }
  :is(.bta-apply, .bta-flow) .badge,
:is(.bta-apply, .bta-flow) .badge-actions { width: 100%; max-width: 360px; }
}

/* --------------------------------------------------------------------------
   Ajouts propres à l'intégration WordPress
   -------------------------------------------------------------------------- */

/* La page d'inscription est affichée en pleine largeur (gabarit Canvas) :
   l'assistant reprend la mise en page à deux panneaux de la maquette. */
.bta-apply { min-height: 100vh; }
.bta-apply .apply-layout { min-height: 100vh; }

/* États de chargement des boutons du parcours. */
:is(.bta-apply, .bta-flow) .btn.is-busy { opacity: 0.75; pointer-events: none; }

/* Message d'erreur global d'un formulaire. */
.bta-alert {
  display: none;
  gap: 0.6rem;
  align-items: flex-start;
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.2rem;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.bta-alert.is-visible { display: flex; }
.bta-alert--info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.bta-alert--success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* Champ piège anti-robot. */
.bta-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sélecteur du type de pièce d'identité. */
:is(.bta-apply, .bta-flow) .upload-type { margin-top: 1rem; }

/* Page /badge/<code> autonome. */
:is(.bta-apply, .bta-flow) .badge-page {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.6rem;
  padding: 3rem 1.2rem;
  background: linear-gradient(160deg, #eef2fc 0%, #ffffff 60%);
}
:is(.bta-apply, .bta-flow) .badge-page .badge-stage { max-width: 1000px; }
:is(.bta-apply, .bta-flow) .badge-page-head { text-align: center; display: grid; gap: 0.6rem; justify-items: center; }
:is(.bta-apply, .bta-flow) .badge-page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; font-style: italic; color: var(--navy-950, #081633); }
:is(.bta-apply, .bta-flow) .badge-page-head p { color: var(--text-body, #5b6478); max-width: 46ch; }
:is(.bta-apply, .bta-flow) .badge-image {
  width: min(380px, 90vw);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(8, 22, 51, 0.6);
  display: block;
}


/* Réinitialisations de la maquette absentes du CSS global (elles y étaient
   volontairement exclues), limitées aux composants du parcours et aux boutons
   qui ne portent pas la classe .btn (ceux-là gardent le style global). */
.bta-apply button:not([class*="btn"]):not(.pay-method),
.bta-flow button:not([class*="btn"]):not(.pay-method) {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* Carte d'un moyen de paiement. Les états de survol et de focus doivent être
   plus spécifiques que le style de bouton global d'Elementor (`kit button:hover`),
   qui repeindrait toute la carte en bleu et rendrait le libellé illisible. */
.bta-flow .pay-method {
  border: 1.5px solid var(--border, #e2e8f5);
  border-radius: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--white, #ffffff);
  color: inherit;
  box-shadow: none;
  transition: border-color 0.22s var(--ease-out, ease), box-shadow 0.22s var(--ease-out, ease),
    background-color 0.22s var(--ease-out, ease), transform 0.22s var(--ease-out, ease);
}

.bta-flow .pay-method:hover,
.bta-flow .pay-method:focus,
.bta-flow .pay-method:focus-visible,
.bta-flow .pay-method:active {
  background: var(--white, #ffffff);
  color: inherit;
  border-color: var(--electric-400, #3b82f6);
  box-shadow: 0 14px 28px -22px rgba(8, 22, 51, 0.55);
}

.bta-flow .pay-method:hover { transform: translateY(-1px); }
.bta-flow .pay-method:active { transform: translateY(0); }

.bta-flow .pay-method:hover .pay-method-check,
.bta-flow .pay-method:focus-visible .pay-method-check {
  border-color: var(--electric-400, #3b82f6);
}

/* Anneau de focus visible uniquement au clavier. */
.bta-flow .pay-method:focus { outline: none; }
.bta-flow .pay-method:focus-visible {
  outline: 2px solid var(--blue-500, #2563eb);
  outline-offset: 3px;
}

.bta-flow .pay-method.is-active,
.bta-flow .pay-method.is-active:hover,
.bta-flow .pay-method.is-active:focus,
.bta-flow .pay-method.is-active:focus-visible {
  border-color: var(--blue-500, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* La pastille reste bleue à l'état choisi, quel que soit le survol. */
.bta-flow .pay-method.is-active .pay-method-check,
.bta-flow .pay-method.is-active:hover .pay-method-check {
  border-color: var(--blue-500, #2563eb);
  background: var(--blue-500, #2563eb);
}

/* Les libellés gardent leurs couleurs : le style global des boutons passe le
   texte en blanc au survol. */
.bta-flow .pay-method:hover .pay-method-body strong,
.bta-flow .pay-method:focus .pay-method-body strong { color: var(--navy-800, #0e2a6b); }
.bta-flow .pay-method:hover .pay-method-body small,
.bta-flow .pay-method:focus .pay-method-body small { color: var(--text-body, #5b6478); }
.bta-flow .otp-resend { text-decoration: underline; text-underline-offset: 3px; }
.bta-apply ul,
.bta-apply ol,
.bta-flow ul,
.bta-flow ol { list-style: none; margin: 0; padding: 0; }
.bta-apply img,
.bta-flow img { max-width: 100%; display: block; }

/* Le CSS global d'Elementor arrive après celui du plugin : quelques règles
   doivent donc être plus spécifiques pour reprendre la maquette. */
.bta-apply [hidden],
.bta-flow [hidden] { display: none !important; }

.bta-apply .apply-aside h1,
.bta-apply .apply-aside .display-2 { color: var(--white, #ffffff); }

.bta-flow .gate-card .display-2,
.bta-flow .done-head .display-2 { color: var(--navy-950, #081633); }

.bta-apply .apply-main h2,
.bta-flow .pay-title { color: var(--navy-950, #081633); }

/* Les liens du parcours héritent des couleurs de la maquette. */
.bta-apply a,
.bta-flow a { text-decoration: none; }

/* La pastille de référence de l'écran « Paiement confirmé » reprend celle de
   l'écran de fin d'inscription. */
.bta-flow .done-head .ref {
  display: inline-block;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--navy-800, #0e2a6b);
  background: var(--ice-50, #eef2fc);
  border: 1px dashed var(--blue-500, #2563eb);
  border-radius: 0.7rem;
  padding: 0.55rem 1.2rem;
}

/* --------------------------------------------------------------------------
   Code promotionnel — récapitulatif de la page de paiement
   -------------------------------------------------------------------------- */
/* Le bloc vit dans la carte sombre du récapitulatif : .summary-list porte déjà
   le filet de séparation, un second trait clair juste en dessous faisait doublon. */
:is(.bta-apply, .bta-flow) .promo-row {
  display: grid;
  gap: 0.4rem;
  margin: 0.9rem 0 1rem;
}
:is(.bta-apply, .bta-flow) .promo-row > label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
:is(.bta-apply, .bta-flow) .promo-input { display: flex; gap: 0.45rem; }
:is(.bta-apply, .bta-flow) .promo-input .input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
}
/* .btn--ghost est dessiné pour un fond clair : sur la carte marine, son texte
   marine sur fond transparent était illisible. */
:is(.bta-apply, .bta-flow) .promo-input .btn {
  flex: none;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  box-shadow: none;
  transition: background 0.25s, border-color 0.25s;
}
:is(.bta-apply, .bta-flow) .promo-input .btn:hover,
:is(.bta-apply, .bta-flow) .promo-input .btn:focus-visible {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--white);
}
:is(.bta-apply, .bta-flow) .promo-input .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
:is(.bta-apply, .bta-flow) .promo-note { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
/* teintes éclaircies : le vert et le rouge des formulaires clairs passent mal
   sur le fond marine de la carte */
:is(.bta-apply, .bta-flow) .promo-note.is-ok { color: #4ade80; }
:is(.bta-apply, .bta-flow) .promo-note.is-error { color: #fca5a5; }
:is(.bta-apply, .bta-flow) .promo-note[hidden] { display: none !important; }

/* Galerie réservée aux inscrits ------------------------------------------- */
/* Le bloc s'insère au milieu d'une page Elementor : il porte donc lui-même sa
   largeur et ses marges, sans rien attendre du gabarit qui l'accueille. */
.bta-flow .galerie-download {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem 1.35rem;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 1.6rem 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, var(--navy-950, #081633), var(--navy-900, #0a1e4f));
  color: var(--white, #fff);
  box-shadow: 0 26px 60px -34px rgba(8, 22, 51, 0.75);
}

.bta-flow .galerie-download-icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.24);
  color: #93b4fd;
}

.bta-flow .galerie-download-body { min-width: 0; }
.bta-flow .galerie-download-body h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 800;
  font-style: italic;
  color: var(--white, #fff);
}
.bta-flow .galerie-download-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

.bta-flow .galerie-download .btn { flex: none; white-space: nowrap; }

.bta-flow .galerie-download-code {
  grid-column: 2 / -1;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.bta-flow .galerie-download-code strong { color: rgba(255, 255, 255, 0.85); letter-spacing: 0.08em; }

/* Sans archive déposée, il n'y a pas de bouton : la colonne disparaît. */
.bta-flow .galerie-download.is-empty { grid-template-columns: auto 1fr; }

@media (max-width: 860px) {
  .bta-flow .galerie-download {
    grid-template-columns: auto 1fr;
    padding: 1.35rem 1.25rem;
  }
  .bta-flow .galerie-download .btn { grid-column: 1 / -1; width: 100%; }
  .bta-flow .galerie-download-code { grid-column: 1 / -1; }
}

/* Boutons des portes de vérification --------------------------------------- */
/* La règle globale du kit met les intitulés en « nowrap ». Dans une carte
   étroite, un intitulé long fixe alors la largeur minimale de la carte, qui
   déborde de l'écran du téléphone — la page entière part en défilement
   horizontal. Ici, l'intitulé se replie. */
:is(.bta-apply, .bta-flow) .gate-card .btn,
:is(.bta-apply, .bta-flow) .otp-wrap .btn,
:is(.bta-apply, .bta-flow) .btn--block {
  white-space: normal;
  text-wrap: balance;
}

/* Ceinture et bretelles : la carte ne dépasse jamais son conteneur, quel que
   soit ce qu'elle abrite. */
:is(.bta-apply, .bta-flow) .gate-card,
:is(.bta-apply, .bta-flow) .otp-wrap { max-width: 100%; }