/* ===== Thème Al Fenna (général) ===== */
.af-form{
  --af-card:#f6f3eb; --af-ink:#203a33; --af-ink-2:#375a51; --af-line:#d9e2dc;
  --af-price:#2c6a57; --af-accent:#1f4f42; --af-accent-2:#1a4337; --af-radius:26px;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--af-ink);
}
.af-form .af-shell{background:var(--af-card);border-radius:var(--af-radius);padding:32px 28px 24px}
.af-form .af-logo{width:96px;height:76px}
.af-form .af-brand{font-family:"Great Vibes",cursive;font-size:clamp(2.4rem,4.8vw,3.6rem);line-height:1;margin-top:.2rem}
.af-form .af-baseline{letter-spacing:.14em;color:var(--af-ink-2)}

/* Stepper */
.af-form .af-stepper{display:flex;align-items:center;gap:22px;justify-content:center;margin:16px 0 4px}
.af-form .af-pill{font-weight:900;position:relative;padding-bottom:6px}
.af-form .af-pill.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#355f55;border-radius:999px}
.af-form .af-divider{flex:0 0 72px;height:4px;border-radius:999px;background:#cfd9d3}
.af-form .af-progress{color:#6c7d78}

/* Étape 1 : bandeau valeur + bullets */
.af-form .af-banner{background:#fbf8f1;border:1px solid var(--af-line);border-radius:16px;padding:16px}
.af-form .af-left{position:relative;border:1px solid var(--af-line);border-radius:14px;padding:14px;height:100%}
@media(min-width:992px){.af-form .af-left::after{content:"";position:absolute;right:-11px;top:10px;width:1px;height:calc(100% - 20px);background:var(--af-line)}}
.af-form .af-small{font-weight:800;color:#35574e}
.af-form .af-price-now{color:var(--af-price);font-weight:900;font-size:clamp(2rem,3.1vw,2.45rem)}
.af-form .af-price-old{color:#8fa19c;text-decoration:line-through}
.af-form .af-saving{color:#2f7e66;font-weight:900}

.af-form .af-bullets{list-style:none;margin:0;padding:0}
.af-form .af-bullets li{display:flex;align-items:center;gap:.75rem;margin:.55rem 0}
.af-form .af-ico{--size:42px;width:var(--size);height:var(--size);flex:0 0 var(--size);display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#e7f1ec;color:var(--af-accent);border:1px solid var(--af-line);box-shadow:0 6px 14px rgba(31,79,66,.12)}
.af-form .af-ico i{font-size:1.05rem;line-height:1}
.af-form .af-bullets strong{font-weight:900;color:var(--af-ink)}

.af-form .af-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .75rem;border-radius:999px;background:#e7f1ec;color:#2d5a50;font-weight:800;border:1px solid var(--af-line)}
.af-form .af-chip .fa-user-group{color:var(--af-accent)}

.af-form .af-label{font-weight:900;margin-bottom:.35rem}
.af-form .form-control{border-radius:14px;padding:.92rem 1rem}
.af-form .input-group-text{border-radius:14px 0 0 14px;background:#eaf2ee;font-weight:900}
.af-form .input-group .form-control{border-radius:0 14px 14px 0}
.af-form .form-text{color:#6f7f7b}

/* CTA */
.af-form .af-cta{background:var(--af-accent);color:#fff;border:none;border-radius:16px;padding:1.02rem 1rem;font-weight:900;box-shadow:0 16px 34px rgba(31,79,66,.34)}
.af-form .af-cta:hover{background:var(--af-accent-2)}
.af-form .af-btn{font-weight:700}

/* Étape 2 — bandeau économie */
.af-form .af-savings-pill{display:flex;align-items:center;justify-content:center;gap:.6rem;background:#eef3ef;border:1px solid var(--af-line);color:#355f55;border-radius:999px;padding:.55rem .9rem;font-weight:800;margin-bottom:.75rem}
.af-form .af-savings-pill .af-dot{width:.5rem;height:.5rem;border-radius:50%;background:#355f55;display:inline-block}

/* Offres (cartes radio) */
.af-form .af-card-radio{display:block}
.af-form .af-offer-card{position:relative;background:#fff;border:1px solid var(--af-line);border-radius:16px;padding:18px 18px;transition:box-shadow .2s,border-color .2s}
.af-form .af-card-radio input:checked + .af-offer-card{border-color:#2d5a50;box-shadow:0 10px 24px rgba(31,79,66,.08)}
.af-form .af-offer-title{font-weight:800;color:var(--af-ink)}
.af-form .af-offer-price{font-weight:900;color:#0f3028;font-size:clamp(1.6rem,3vw,2rem)}
.af-form .af-offer-eco{color:#6c7d78}
.af-form .af-offer-choice i{color:#9fb4ae}
.af-form .af-badge-best{position:absolute;top:-12px;right:14px;background:#2c6a57;color:#fff;border-radius:999px;padding:.32rem .65rem;font-size:.78rem;font-weight:800;box-shadow:0 8px 18px rgba(44,106,87,.25)}
.af-form .is-featured .af-offer-card{border-width:2px}

/* Cross‑sell compact */
.af-form .af-bump{background:#fbf8f1;border:1px solid var(--af-line);border-radius:16px}
.af-form .af-bump--compact{display:flex;align-items:center;gap:12px;padding:12px}
.af-form .af-bump-thumb{width:72px;height:72px;object-fit:cover}
.af-form .af-bump-price{color:#0f3028;font-weight:800}

/* Récap */
.af-form .af-summary{background:#fbf8f1;border:1px solid var(--af-line);border-radius:16px;padding:12px}
.af-form .af-summary-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem .25rem;border-bottom:1px solid #e9efe9}
.af-form .af-summary-row:last-child{border-bottom:none}
.af-form .af-summary-total strong{font-size:1.05rem}

/* Merci */
.af-form .af-thanks{background:#fbf8f1;border:1px solid var(--af-line);border-radius:16px}

/* Mobile */
@media (max-width:575.98px){
  .af-form .af-shell{padding:22px 16px 18px;border-radius:22px}
  .af-form .af-header{position:sticky;top:0;z-index:20;padding-top:10px;margin:-10px -16px 8px;background:var(--af-card);box-shadow:0 6px 12px rgba(0,0,0,.04)}
  .af-form .af-stepper{gap:10px;padding:0 6px;justify-content:space-between;overflow:hidden}
  .af-form .af-divider{display:none}
  .af-form .af-pill{font-size:.95rem;padding-bottom:4px;white-space:nowrap}
  .af-form .af-pill.is-active::after{height:3px;bottom:-4px}
  .af-form .af-progress{margin-top:4px;text-align:center;font-size:.86rem}
  .af-form .af-banner{padding:14px}
  .af-form .af-left{padding:12px}
  .af-form .af-bullets li{gap:.6rem;margin:.4rem 0}
  .af-form .af-ico{--size:36px;border-radius:10px}
  .af-form .form-control{padding:.84rem .95rem}
  .af-form .input-group-text{padding:.84rem .75rem;white-space:nowrap}
  .af-form .af-chip{padding:.35rem .6rem;font-size:.95rem}
  .af-form .af-bump-thumb{width:64px;height:64px}
}

/* Desktop : rapproche un peu le stepper */
@media (min-width:992px){
  .af-form .af-stepper{gap:14px;max-width:560px;margin-inline:auto}
  .af-form .af-divider{flex:0 0 48px;height:3px}
  .af-form .af-pill{padding-bottom:4px}
  .af-form .af-pill.is-active::after{bottom:-6px;height:3px}
}

/* =========================
   ÉTAPE 3 — Paiement
   ========================= */
.af-form .af-h2{
  font-weight: 900;
  color: var(--af-ink);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

/* Liste des options de paiement (cartes radio) */
.af-form .af-pay{
  display: grid;
  gap: 12px;
}
.af-form .af-pay-option{
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #fbf8f1;
  border: 1px solid var(--af-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.af-form .af-pay-option:hover{
  border-color: #c7d7d1;
  box-shadow: 0 8px 18px rgba(31,79,66,.06);
}
.af-form .af-pay-option .af-pay-label{
  font-weight: 800;
  color: var(--af-ink);
}

/* “Pastille” de réduction pour le paiement en ligne */
.af-form .af-discount{
  background: #e3f0e8;
  color: #0f3028;
  font-weight: 900;
  border-radius: 10px;
  padding: .4rem .55rem;
  white-space: nowrap;
  border: 1px solid #d2e4da;
}

/* Custom radio */
.af-form .af-pay-check{
  --s: 20px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  border: 2px solid #94b3a9;
  display: inline-block;
  position: relative;
}
.af-form .af-pay-option input:checked + .af-pay-check{
  border-color: var(--af-accent);
}
.af-form .af-pay-option input:checked + .af-pay-check::after{
  content: "";
  position: absolute; inset: 4px;
  background: var(--af-accent);
  border-radius: 50%;
}

/* Carte sélectionnée */
.af-form .af-pay-option input:checked ~ .af-pay-label,
.af-form .af-pay-option input:checked ~ .af-discount{
  filter: none;
}
.af-form .af-pay-option input:checked ~ .af-discount{
  box-shadow: 0 8px 16px rgba(31,79,66,.10);
}
.af-form .af-pay-option input:checked ~ .af-pay-label{
  color: var(--af-ink);
}

/* Récap (déjà utilisé à l’étape 2, on harmonise) */
.af-form .af-summary{ background:#fbf8f1; border:1px solid var(--af-line); border-radius:16px; padding:12px }
.af-form .af-summary-row{ display:flex; align-items:center; justify-content:space-between; padding:.45rem .25rem; border-bottom:1px solid #e9efe9 }
.af-form .af-summary-row:last-child{ border-bottom:none }
.af-form .af-summary-total strong{ font-size:1.05rem }

/* Mobile */
@media (max-width: 575.98px){
  .af-form .af-pay-option{
    grid-template-columns: 24px 1fr;
    grid-auto-flow: row;
    gap: 10px;
  }
  .af-form .af-discount{
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* —— SOLUTION 1 : stepper horizontal fluide —— */

/* Étend le stepper en largeur, sans limite rigide */
.af-form .af-stepper{
  /* remplace le flex par une grille auto-colonnes */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); /* colonnes égales, pas de débordement */
  gap: 10px;
  max-width: none;        /* ← enlève la contrainte 560px en desktop */
  margin: 16px 0 4px;
}

/* On masque les “dividers” (plus utiles avec la grille) */
.af-form .af-divider{ display:none !important; }

/* Les pills deviennent de vraies pastilles cliquables centrées */
.af-form .af-pill{
  min-width: 0; /* permet le text-overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--af-line);
  background: #eef3ef;
  font-weight: 800;
}

/* État actif lisible, sans soulignement qui casse la hauteur */
.af-form .af-pill.is-active{
  background: var(--af-accent);
  color: #fff;
  border-color: var(--af-accent);
}
.af-form .af-pill.is-active::after{ content:none; }

/* Desktop : on retire l'ancien max-width qui comprimait trop */
@media (min-width:992px){
  .af-form .af-stepper{ max-width: none; gap: 12px; }
}