/* ===================================================================
   Wizard d'inscription Shatibi V3
   Visuel aligné sur docs/maquettes/01_shatibi_etape1.html / 02_*.html / 03_*.html
   Tout est scopé #shatibi-inscription pour ne pas polluer le thème WP.
   =================================================================== */

#shatibi-inscription, #shatibi-inscription * {
  box-sizing: border-box;
}
#shatibi-inscription {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: transparent;
  padding: 40px 20px;
  color: #1a1a1a;
  line-height: 1.5;
}
#shatibi-inscription .container {
  max-width: 1080px;
  margin: 0 auto;
}
#shatibi-inscription .panel--narrow ~ * .container,
#shatibi-inscription .panel--narrow .container { /* unused but documents intent */
}

#shatibi-inscription a {
  color: #534AB7;
  text-decoration: underline;
}

/* ── STEPPER PC ── */
#shatibi-inscription .stepper {
  display: flex;
  margin-bottom: 32px;
}
#shatibi-inscription .step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0.5px solid #ddd;
  background: white;
  font-size: 13px;
  color: #999;
  transition: all .2s;
}
#shatibi-inscription .step.clickable {
  cursor: pointer;
}
#shatibi-inscription .step.clickable:hover {
  border-color: #c8c3f2;
  color: #534AB7;
}
#shatibi-inscription .step:first-child {
  border-radius: 10px 0 0 10px;
}
#shatibi-inscription .step:last-child {
  border-radius: 0 10px 10px 0;
}
#shatibi-inscription .step + .step {
  border-left: none;
}
#shatibi-inscription .step.done {
  background: #E1F5EE;
  border-color: #5DCAA5;
  color: #0F6E56;
}
#shatibi-inscription .step.active {
  background: #EEEDFE;
  border-color: #534AB7;
  color: #3C3489;
  font-weight: 500;
}
#shatibi-inscription .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
#shatibi-inscription .step.done .step-num {
  background: #0F6E56;
  border-color: #0F6E56;
  color: white;
}
#shatibi-inscription .step.active .step-num {
  background: #534AB7;
  border-color: #534AB7;
  color: white;
}

/* ── STEPPER MOBILE ── */
#shatibi-inscription .stepper-mobile {
  display: none;
  align-items: center;
  margin-bottom: 24px;
}
#shatibi-inscription .sm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
#shatibi-inscription .sm-item.clickable {
  cursor: pointer;
}
#shatibi-inscription .sm-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  z-index: 1;
  background: white;
  color: #bbb;
  border: 1.5px solid #e0e0e0;
}
#shatibi-inscription .sm-circle.done {
  background: #0F6E56;
  color: white;
  border-color: #0F6E56;
}
#shatibi-inscription .sm-circle.active {
  background: #534AB7;
  color: white;
  border-color: #534AB7;
  box-shadow: 0 0 0 4px #EEEDFE;
}
#shatibi-inscription .sm-label {
  font-size: 9px;
  font-weight: 500;
  color: #bbb;
  text-align: center;
  white-space: nowrap;
}
#shatibi-inscription .sm-label.done { color: #0F6E56; }
#shatibi-inscription .sm-label.active { color: #534AB7; font-weight: 600; }
#shatibi-inscription .sm-connector {
  flex: 1;
  height: 1.5px;
  background: #e0e0e0;
  margin-bottom: 18px;
}
#shatibi-inscription .sm-connector.done { background: #0F6E56; }

/* ── NOTICE GLOBAL ── */
#shatibi-inscription .notice {
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFFAF8;
  border: 0.5px solid #e07b39;
  color: #c0392b;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── SECTION TITLES ── */
#shatibi-inscription .section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}
#shatibi-inscription .section-cadrage {
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
  line-height: 1.45;
}

/* ── LAYOUT GRID ── */
#shatibi-inscription .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 20px;
  align-items: start;
}
#shatibi-inscription [data-panel="2"] .layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
}

/* ── CARTE COURS (étape 1) ── */
#shatibi-inscription .cours-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
#shatibi-inscription .card {
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .15s;
}
#shatibi-inscription .card.selected {
  border: 1.5px solid #534AB7;
  box-shadow: 0 0 0 3px #EEEDFE;
}
#shatibi-inscription .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  /* BUG-INS-03 : zone tap mobile ≥ 56px (WCAG 2.5.5 cible mini 44px).
     touch-action: manipulation supprime le délai 300ms sur Android. */
  padding: 16px;
  min-height: 56px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(83, 74, 183, 0.15);
  transition: background .15s;
}
/* hover desktop uniquement — évite l'effet "tooltip collant" mobile Android */
@media (hover: hover) and (pointer: fine) {
  #shatibi-inscription .card:not(.selected) .card-header:hover {
    background: #fafafa;
  }
}
#shatibi-inscription .card-toggle {
  /* Mission tap-targets 2026-05-20 — passé à 44×44 pour respecter
     WCAG 2.5.5 (avant : 28×28, F-38 mobile détectait 34 occurrences).
     Le carré visuel reste compact via le border-radius. La check-icon
     est centrée par flex (cf. inscription-v3.css ligne suivante). */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  background: white;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  touch-action: manipulation;
}
#shatibi-inscription .card.selected .card-toggle {
  background: #534AB7;
  border-color: #534AB7;
}
#shatibi-inscription .check-icon { display: none; }
#shatibi-inscription .card.selected .check-icon { display: block; }
#shatibi-inscription .card-info { flex: 1; }
#shatibi-inscription .card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#shatibi-inscription .card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
#shatibi-inscription .pill {
  background: #EEF1FF;
  color: #3C3489;
  border: 1px solid #CFC8FF;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(83, 74, 183, .05);
}
#shatibi-inscription .card-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #ccc;
  transition: transform .25s, color .15s;
}
#shatibi-inscription .card.selected .card-arrow { color: #534AB7; }
#shatibi-inscription .card.open .card-arrow { transform: rotate(180deg); }
#shatibi-inscription .retirer-btn {
  font-size: 13px;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  /* Mission tap-targets 2026-05-20 — padding pour atteindre 44×44
     sans modifier le look (texte petit, zone tactile généreuse).
     Avant : padding:0 → 76×15 px, F-38 KO. */
  padding: 12px 8px;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  flex-shrink: 0;
  display: none;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  #shatibi-inscription .retirer-btn:hover {
    color: #534AB7;
    text-decoration: underline;
  }
}
#shatibi-inscription .card.selected .retirer-btn { display: block; }
#shatibi-inscription .card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
#shatibi-inscription .card.open .card-body { max-height: 720px; }
#shatibi-inscription .card-body-inner { padding: 0 16px 16px; }
#shatibi-inscription .tarif-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#shatibi-inscription .tarif-groupe {
  width: 100%;
  border: 0.5px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}
#shatibi-inscription .tarif-groupe-header {
  padding: 10px 12px 7px;
  border-bottom: 0.5px solid #f0f0f0;
}
#shatibi-inscription .tarif-groupe-nom {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}
#shatibi-inscription .tarif-groupe-who {
  font-size: 11px;
  color: #888;
  line-height: 1.35;
}
#shatibi-inscription .tarif-options {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#shatibi-inscription .tarif-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e8e8f5;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
@media (hover: hover) and (pointer: fine) {
  #shatibi-inscription .tarif-option:hover {
    background: #f8f7f5;
    border-color: #e8e8f5;
  }
}
#shatibi-inscription .tarif-option.selected {
  background: #EEEDFE;
  border-color: #AFA9EC;
  box-shadow: 0 0 0 2px rgba(83, 74, 183, .08);
}
#shatibi-inscription .tarif-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
#shatibi-inscription .tarif-option.selected .tarif-radio {
  border-color: #534AB7;
}
#shatibi-inscription .tarif-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #534AB7;
  display: none;
}
#shatibi-inscription .tarif-option.selected .tarif-radio-dot { display: block; }
#shatibi-inscription .tarif-option-content { flex: 1; }
#shatibi-inscription .tarif-option-prix {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1px;
}
#shatibi-inscription .tarif-option.selected .tarif-option-prix { color: #3C3489; }
#shatibi-inscription .tarif-option-desc {
  font-size: 11px;
  color: #666;
  line-height: 1.35;
}

/* ── RÉCAPITULATIF étape 1 (sidebar PC) ── */
#shatibi-inscription .recap {
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 14px;
  padding: 16px;
  display: none;
}
#shatibi-inscription .recap.visible { display: block; }
#shatibi-inscription .recap-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}
#shatibi-inscription .recap-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 0.5px solid #f5f5f5;
}
#shatibi-inscription .recap-item:last-of-type { border-bottom: none; }
#shatibi-inscription .recap-item-name {
  color: #1a1a1a;
  font-weight: 500;
}
#shatibi-inscription .recap-item-sub {
  font-size: 10px;
  color: #888;
  margin-top: 1px;
}
#shatibi-inscription .recap-item-price {
  font-weight: 700;
  color: #534AB7;
  white-space: nowrap;
  margin-left: 10px;
  flex-shrink: 0;
}
#shatibi-inscription .recap-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  border-top: 0.5px solid #e0e0e0;
  padding-top: 12px;
  margin-top: 8px;
}
#shatibi-inscription .recap-sidebar { position: sticky; top: 20px; }

/* ── FOOTER & CTA étape 1 ── */
#shatibi-inscription .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
#shatibi-inscription .footer-hint {
  font-size: 12px;
  color: #aaa;
  display: none;
}
#shatibi-inscription .footer-hint.visible { display: block; }
#shatibi-inscription .btn-suivant {
  background: #D2632E;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: .35;
  pointer-events: none;
  transition: all .15s;
  white-space: nowrap;
}
#shatibi-inscription .btn-suivant.ready {
  opacity: 1;
  pointer-events: all;
}
#shatibi-inscription .btn-suivant.ready:hover {
  background: white;
  color: #D2632E;
  border: 1px solid #D2632E;
}

/* ── STICKY FOOTER MOBILE ── */
#shatibi-inscription .sticky-footer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #f8f7f5;
  border-top: 0.5px solid #e0e0e0;
  z-index: 50;
}
#shatibi-inscription .sticky-footer .btn-suivant,
#shatibi-inscription .sticky-footer .btn-payer {
  width: 100%;
  min-height: 48px;
  display: block;
  text-align: center;
  padding: 12px;
}
#shatibi-inscription .sticky-footer .btn-suivant { opacity: .35; pointer-events: none; }
#shatibi-inscription .sticky-footer .btn-suivant.ready { opacity: 1; pointer-events: all; }

/* ── ÉTAPE 2 — formulaire ── */
#shatibi-inscription .page-title {
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
}
#shatibi-inscription .page-subtitle {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
  line-height: 1.5;
}
#shatibi-inscription .section {
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
#shatibi-inscription .section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 16px;
}
#shatibi-inscription .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
#shatibi-inscription .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
#shatibi-inscription .field:last-child { margin-bottom: 0; }
#shatibi-inscription .field-row .field { margin-bottom: 0; }
#shatibi-inscription .section label {
  font-size: 12px;
  font-weight: 500;
  color: #555;
}
#shatibi-inscription .req {
  color: #e07b39;
  margin-left: 2px;
}
#shatibi-inscription input[type=text],
#shatibi-inscription input[type=email],
#shatibi-inscription input[type=tel] {
  border: 0.5px solid #ddd;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #1a1a1a;
  background: white;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
#shatibi-inscription input:focus { border-color: #534AB7; }
#shatibi-inscription input.error { border-color: #e07b39; background: #FFFAF8; }
/* BUG-INS-07 — message d'erreur téléphone visible (rouge, sous le champ). */
#shatibi-inscription .field-error {
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0 0;
  padding-left: 8px;
  border-left: 3px solid #dc2626;
  line-height: 1.4;
}
#shatibi-inscription .radio-group {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}
#shatibi-inscription .radio-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}
#shatibi-inscription .radio-option input { accent-color: #534AB7; width: 16px; height: 16px; }

#shatibi-inscription .tarif-info {
  background: #F8F7FF;
  border: 0.5px solid #AFA9EC;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: #1a1a1a;
}
/* Bug C (2026-05-25) — quand le tarif plein est sélectionné,
   refreshTarifInfo() vide le innerHTML mais le container conservait
   son background + border + padding → rectangle violet vide visible
   au-dessus du champ "Profession / situation actuelle".
   :empty masque proprement le container quand il n'y a rien à dire. */
#shatibi-inscription .tarif-info:empty { display: none; }
#shatibi-inscription .tarif-info-row strong { font-weight: 600; color: #3C3489; }
#shatibi-inscription .tarif-info-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 6px;
}

/* ── VALIDATION ── */
#shatibi-inscription .validation-summary {
  background: #FFFAF8;
  border: 0.5px solid #e07b39;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
#shatibi-inscription .validation-summary-title {
  font-size: 12px;
  font-weight: 600;
  color: #e07b39;
  margin-bottom: 8px;
}
#shatibi-inscription .validation-item {
  font-size: 12px;
  color: #c0392b;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#shatibi-inscription .validation-item::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e07b39;
  flex-shrink: 0;
}

/* ── FOOTER étape 2 ── */
#shatibi-inscription .btn-prev {
  background: none;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
#shatibi-inscription .btn-prev:hover { border-color: #534AB7; color: #534AB7; }

/* ── SIDEBAR récap étape 2 ── */
#shatibi-inscription [data-panel="2"] .recap-sidebar {
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 14px;
  padding: 18px 20px;
  position: sticky;
  top: 20px;
}
#shatibi-inscription .sidebar-block + .sidebar-block {
  border-top: 0.5px solid #ececec;
  margin-top: 16px;
  padding-top: 16px;
}
#shatibi-inscription .recap-sidebar-title {
  font-size: 12px;
  font-weight: 600;
  color: #534AB7;
  margin-bottom: 14px;
}
#shatibi-inscription .recap-side-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid #f0f0f0;
}
#shatibi-inscription .recap-side-item:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#shatibi-inscription .recap-side-name {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 2px;
}
#shatibi-inscription .recap-side-plan {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
}
#shatibi-inscription .recap-side-ech {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}
#shatibi-inscription .recap-side-ech-label { color: #888; }
#shatibi-inscription .recap-side-ech-montant { font-weight: 500; color: #444; }
#shatibi-inscription .recap-side-total {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  border-top: 0.5px solid #e0e0e0;
  padding-top: 12px;
  margin-top: 10px;
}

/* ── PAIEMENT (Stripe Elements) ── */
#shatibi-inscription .cb-bloc {
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
/* Bloc CB : 1 ligne pour le numéro, 1 ligne 2 colonnes pour exp + cvv. */
#shatibi-inscription .cb-bloc .cb-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 0.5px solid #f0f0f0;
}
#shatibi-inscription .cb-bloc .cb-field:last-child { border-bottom: none; }
#shatibi-inscription .cb-bloc .cb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#shatibi-inscription .cb-bloc .cb-row .cb-field {
  border-right: 0.5px solid #f0f0f0;
}
#shatibi-inscription .cb-bloc .cb-row .cb-field:last-child {
  border-right: none;
  border-bottom: none;
}
#shatibi-inscription .cb-label {
  font-size: 10px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
#shatibi-inscription .stripe-mount {
  /* Stripe Elements injectent leur propre iframe ; on lui donne juste
     une hauteur minimale pour ne pas “collapser” pendant le mount. */
  min-height: 20px;
  padding: 2px 0;
}
#shatibi-inscription .checkbox-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  cursor: pointer;
  font-weight: 400;
}
#shatibi-inscription .checkbox-option input {
  accent-color: #534AB7;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
#shatibi-inscription .adresse-hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}
#shatibi-inscription .adresse-hint a { color: #888; text-decoration: underline; }

/* Autocomplete BAN sous le champ adresse — visuel maquette 02. */
#shatibi-inscription .adresse-wrap {
  position: relative;
}
#shatibi-inscription .adresse-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  z-index: 100;
  margin-top: 4px;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
#shatibi-inscription .adresse-suggestions[hidden] { display: none; }
#shatibi-inscription .suggestion-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 0.5px solid #f0f0f0;
  transition: background .1s;
}
#shatibi-inscription .suggestion-item:last-child { border-bottom: none; }
#shatibi-inscription .suggestion-item:hover,
#shatibi-inscription .suggestion-item.is-active { background: #EEEDFE; }
#shatibi-inscription .suggestion-label { color: #1a1a1a; font-weight: 500; }
#shatibi-inscription .suggestion-context { color: #888; font-size: 11px; margin-top: 2px; }
#shatibi-inscription .suggestion-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: #aaa;
  font-style: italic;
}

/* Échéancier en step 3 (lignes paid + upcoming, cf. maquette 03). */
#shatibi-inscription .ech-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
}
#shatibi-inscription .ech-row:last-child { margin-bottom: 0; }
#shatibi-inscription .ech-row.paid { background: #E1F5EE; }
#shatibi-inscription .ech-row.upcoming { background: #f8f7f5; }
#shatibi-inscription .ech-nom { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
#shatibi-inscription .ech-row.paid .ech-nom { color: #0F6E56; }
#shatibi-inscription .ech-row.upcoming .ech-nom { color: #1a1a1a; }
#shatibi-inscription .ech-date { font-size: 11px; color: #888; }
#shatibi-inscription .ech-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  margin-left: 12px;
}
#shatibi-inscription .ech-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
#shatibi-inscription .ech-row.paid .ech-badge { background: #C6EFD9; color: #0F6E56; }
#shatibi-inscription .ech-row.upcoming .ech-badge { background: #f0f0f0; color: #888; }
#shatibi-inscription .ech-montant { font-size: 13px; font-weight: 600; }
#shatibi-inscription .ech-row.paid .ech-montant { color: #0F6E56; }
#shatibi-inscription .ech-row.upcoming .ech-montant { color: #534AB7; }
#shatibi-inscription .avertissement {
  background: #FFFAF8;
  border-left: 3px solid #e07b39;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
  font-size: 11px;
  color: #c0392b;
  line-height: 1.6;
}
#shatibi-inscription .cb-errors {
  font-size: 12px;
  color: #e07b39;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #FFFAF8;
  border-radius: 6px;
}
#shatibi-inscription .securite {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #888;
  margin-top: 10px;
  padding-top: 10px;
}

/* ── CGI / RGPD checkboxes ── */
#shatibi-inscription .cgi-bloc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: white;
  border: 0.5px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
  #shatibi-inscription .cgi-bloc:hover { border-color: #AFA9EC; }
}
#shatibi-inscription .cgi-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#shatibi-inscription .cgi-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #ccc;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
#shatibi-inscription .cgi-input:checked ~ .cgi-checkbox {
  background: #534AB7;
  border-color: #534AB7;
}
#shatibi-inscription .cgi-check { display: none; }
#shatibi-inscription .cgi-input:checked ~ .cgi-checkbox .cgi-check { display: block; }
#shatibi-inscription .cgi-text {
  font-size: 12px;
  color: #444;
  line-height: 1.5;
}
#shatibi-inscription .cgi-link {
  color: #534AB7;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}
#shatibi-inscription .cgi-error {
  font-size: 11px;
  color: #e07b39;
  margin-bottom: 10px;
}

/* ── BOUTON PAYER ── */
#shatibi-inscription .btn-payer {
  width: 100%;
  background: #534AB7;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  #shatibi-inscription .btn-payer:hover { background: #3C3489; }
}
#shatibi-inscription .btn-payer:disabled { background: #c4b5fd; cursor: not-allowed; }

/* ── POPUP ── */
#shatibi-inscription .popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shatibi-inscription .popup {
  background: white;
  border-radius: 14px;
  width: 90%;
  max-width: 580px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#shatibi-inscription .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 0.5px solid #e0e0e0;
}
#shatibi-inscription .popup-title {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}
#shatibi-inscription .popup-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #888;
  line-height: 1;
}
#shatibi-inscription .popup-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
#shatibi-inscription .popup-footer {
  padding: 14px 20px;
  border-top: 0.5px solid #e0e0e0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#shatibi-inscription .btn-fermer {
  background: none;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
#shatibi-inscription .btn-accepter {
  background: #534AB7;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── ÉTAPE 3 — Confirmation ── */
#shatibi-inscription .panel--narrow .container { max-width: 720px; }
#shatibi-inscription [data-panel="3"] {
  max-width: 720px;
  margin: 0 auto;
}
#shatibi-inscription .success-bloc {
  text-align: center;
  margin-bottom: 32px;
}
#shatibi-inscription .success-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #E1F5EE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
#shatibi-inscription .success-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}
#shatibi-inscription .success-sub {
  font-size: 14px;
  color: #888;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
#shatibi-inscription .paiement-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 0.5px solid #f5f5f5;
}
#shatibi-inscription .paiement-row:last-child { border-bottom: none; }
#shatibi-inscription .paiement-label { color: #888; }
#shatibi-inscription .paiement-val {
  font-weight: 500;
  color: #1a1a1a;
  text-align: right;
  margin-left: 12px;
}
#shatibi-inscription .paiement-val.green { color: #0F6E56; font-weight: 600; }
#shatibi-inscription .etape-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 0.5px solid #f5f5f5;
}
#shatibi-inscription .etape-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#shatibi-inscription .etape-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EEEDFE;
  color: #534AB7;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
#shatibi-inscription .etape-titre {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 3px;
}
#shatibi-inscription .etape-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}
#shatibi-inscription .email-bloc {
  background: #F5F4FF;
  border: 0.5px solid #AFA9EC;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
#shatibi-inscription .email-text {
  font-size: 12px;
  color: #534AB7;
  line-height: 1.6;
}
#shatibi-inscription .email-text strong {
  font-weight: 600;
  color: #3C3489;
}
#shatibi-inscription .btn-accueil {
  display: block;
  text-align: center;
  background: none;
  border: 0.5px solid #ddd;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
#shatibi-inscription .btn-accueil:hover {
  border-color: #534AB7;
  color: #534AB7;
}

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  #shatibi-inscription { padding: 20px 16px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  #shatibi-inscription .stepper { display: none; }
  #shatibi-inscription .stepper-mobile { display: flex; }
  #shatibi-inscription .layout { grid-template-columns: 1fr; }
  #shatibi-inscription [data-panel="2"] .layout { grid-template-columns: 1fr; }
  #shatibi-inscription .recap-sidebar { position: static; }
  #shatibi-inscription [data-panel="2"] .recap-sidebar { position: static; }
  #shatibi-inscription .field-row { grid-template-columns: 1fr; }
  #shatibi-inscription .field-row .field { margin-bottom: 12px; }
  #shatibi-inscription .field-row .field:last-child { margin-bottom: 0; }
  #shatibi-inscription .footer { display: none; }
  /* Bug A (2026-05-25) — le sticky-footer mobile doit respecter l'attribut
     [hidden] posé par showStep() quand on n'est pas en étape 1.
     L'ancienne règle `display: block` écrasait `hidden` (specificité auteur
     > UA stylesheet), donc la sticky-footer step1 restait visible en
     étapes 2 et 3 → bouton dupliqué. */
  #shatibi-inscription .sticky-footer:not([hidden]) { display: block; }
  /* Bug B (2026-05-25) — réserve la place du sticky-footer en bas de
     panel step 1 pour ne pas recouvrir le dernier bloc (tarif info /
     récap sélection). 90 px = padding 12 + bouton 48 + padding 12 + marge
     safe-area. Aucun padding sur step 2/3 (sticky masqué). */
  #shatibi-inscription [data-panel="1"] { padding-bottom: 90px; }
  #shatibi-inscription .section { padding: 16px; }
  #shatibi-inscription .page-title { font-size: 16px; }
  #shatibi-inscription .card-name { font-size: 14px; }
  #shatibi-inscription .card-body-inner { padding: 0 14px 14px; }
  #shatibi-inscription .tarif-grid { grid-template-columns: 1fr; }
  #shatibi-inscription .card-title-row { align-items: flex-start; flex-direction: column; }
}

/* On rend systématiquement un shell HTML5 maison (cf. ticket WP #55023 :
   get_header()/get_footer() déclenchent le deprecation sur les thèmes block).
   Cette classe sur <body> neutralise les marges parasites du thème. */
body.shatibi-v3-page { margin: 0; padding: 0; background: #f8f7f5; }

/* ── TOAST (notifications transitoires) ── */
#shatibi-inscription .toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 90vw;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s ease;
  z-index: 100;
}
#shatibi-inscription .toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#shatibi-inscription .toast strong { font-weight: 600; }
#shatibi-inscription .toast em { font-style: normal; opacity: .75; font-size: 12px; }
@media (max-width: 760px) {
  #shatibi-inscription .toast {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}