/* =========================================================
   Revisly — tunnel de paiement
   (se charge par-dessus styles.css, la feuille de la landing)
   ========================================================= */

/* ---------- ossature ---------- */
.commande{position:relative;z-index:1;padding:118px 0 90px}

.fil-etapes{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:34px;font-size:.8125rem;color:var(--ink-tertiary);
}
.fil-etapes .pas{display:inline-flex;align-items:center;gap:8px}
.fil-etapes .rond{
  width:22px;height:22px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:700;
  background:var(--surface-primary);border:1px solid var(--surface-border);color:var(--ink-tertiary);
}
.fil-etapes .pas.on{color:var(--ink-primary);font-weight:600}
.fil-etapes .pas.on .rond{background:var(--sky-bold);border-color:var(--sky-bold);color:#fff}
.fil-etapes .pas.fait .rond{background:#e8f4ea;border-color:#9fd0a8;color:#2f7a3c}
.fil-etapes .trait{width:26px;height:1px;background:var(--surface-border);flex:none}

.commande-grille{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;
}

/* ---------- blocs de gauche ---------- */
.etape-bloc{
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:20px;padding:26px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.etape-bloc > h2{
  display:flex;align-items:center;gap:11px;
  font-size:1.125rem;font-weight:700;letter-spacing:-.01em;
}
.etape-bloc > h2 .num{
  width:26px;height:26px;border-radius:999px;flex:none;
  background:var(--sky-bold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;
}
.etape-bloc > .aide{margin-top:8px;margin-left:37px;font-size:.875rem;color:var(--ink-secondary)}
.etape-bloc .corps{margin-top:20px}

/* ---------- choix de l'offre ---------- */
.offres-choix{display:flex;flex-direction:column;gap:10px}
.offre-ligne{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 18px;border-radius:14px;
  background:#fbfbf9;border:1.5px solid var(--surface-border);
  transition:border-color .15s,background .15s;
}
.offre-ligne:hover{border-color:#cfcecb}
.offre-ligne.on{border-color:var(--sky-bold);background:var(--sky-soft)}
.offre-ligne .coche{
  flex:none;width:20px;height:20px;border-radius:999px;
  border:2px solid #cfcecb;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s;
}
.offre-ligne .coche i{width:9px;height:9px;border-radius:999px;background:var(--sky-bold);opacity:0;transition:opacity .15s}
.offre-ligne.on .coche{border-color:var(--sky-bold)}
.offre-ligne.on .coche i{opacity:1}
.offre-ligne .quoi{flex:1;min-width:0}
.offre-ligne b{display:block;font-size:.9375rem;font-weight:600}
.offre-ligne span{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-secondary)}
.offre-ligne .prix-ligne{text-align:right;white-space:nowrap}
.offre-ligne .prix-ligne b{font-size:1.0625rem}
.offre-ligne .prix-ligne span{font-size:.75rem;color:var(--ink-tertiary)}
.offre-ligne .eco-etiq{
  display:inline-block;margin-top:4px;font-size:.6875rem;font-weight:700;
  background:var(--highlight);color:#5a4a00;border-radius:999px;padding:2px 8px;
}

/* ---------- champs ---------- */
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trio-champ{display:grid;grid-template-columns:120px 1fr;gap:14px}
.champ-c{display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:14px}
.champ-c:last-child{margin-bottom:0}
.champ-c label{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}
.champ-c input,.champ-c select{
  width:100%;background:#fbfbf9;border:1px solid var(--surface-border);border-radius:12px;
  padding:11px 14px;font:inherit;font-size:.9375rem;color:var(--ink-primary);
  transition:border-color .18s,box-shadow .18s;
}
.champ-c select{appearance:none;cursor:pointer}
.champ-c input:focus,.champ-c select:focus{
  outline:0;border-color:var(--sky-bold);box-shadow:0 0 0 3px rgba(30,136,216,.14);
}
.champ-c input::placeholder{color:var(--ink-tertiary)}
.champ-c input.faux{border-color:#cf5647;box-shadow:0 0 0 3px rgba(207,86,71,.12)}

.case{display:flex;align-items:flex-start;gap:11px;margin-top:14px;cursor:pointer}
.case input{
  flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--sky-bold);cursor:pointer;
}
.case span{font-size:.875rem;line-height:1.6;color:var(--ink-secondary)}
.case a{color:var(--sky-bold);text-decoration:underline;text-underline-offset:2px}

/* ---------- paiement ---------- */
.moyens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.moyen{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 8px;border-radius:12px;font-size:.8125rem;
  background:#fbfbf9;border:1.5px solid var(--surface-border);color:var(--ink-secondary);
  transition:border-color .15s,background .15s,color .15s;
}
.moyen:hover{border-color:#cfcecb;color:var(--ink-primary)}
.moyen.on{border-color:var(--sky-bold);background:var(--sky-soft);color:var(--ink-primary);font-weight:500}
.moyen svg{width:22px;height:22px}

.zone-prestataire{
  border:1.5px dashed #c9d8e6;border-radius:16px;padding:26px 22px;
  background:linear-gradient(180deg,#f7fbff 0%,#f2f8fd 100%);text-align:center;
}
.zone-prestataire .cadenas{
  width:44px;height:44px;margin:0 auto 14px;border-radius:999px;
  background:#fff;border:1px solid #cfe0ee;
  display:flex;align-items:center;justify-content:center;
}
.zone-prestataire .cadenas svg{width:20px;height:20px;color:var(--sky-bold)}
.zone-prestataire b{display:block;font-size:.9375rem}
.zone-prestataire p{margin-top:8px;font-size:.8125rem;line-height:1.7;color:var(--ink-secondary);max-width:46ch;margin-left:auto;margin-right:auto}
.zone-prestataire .faux-champs{
  margin-top:18px;display:flex;flex-direction:column;gap:9px;max-width:340px;
  margin-left:auto;margin-right:auto;
}
.zone-prestataire .faux-champ{
  height:42px;border-radius:10px;background:#fff;border:1px solid #dde8f1;
  display:flex;align-items:center;padding:0 14px;
  font-size:.8125rem;color:#a9b7c4;
}
.zone-prestataire .faux-duo{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ---------- récapitulatif ---------- */
.recap{
  position:sticky;top:96px;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:20px;padding:24px;box-shadow:var(--shadow-md);
}
.recap h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.recap .ligne-offre{
  margin-top:18px;padding-bottom:16px;border-bottom:1px solid var(--surface-border);
}
.recap .ligne-offre b{display:block;font-size:.9375rem}
.recap .ligne-offre span{display:block;margin-top:3px;font-size:.8125rem;color:var(--ink-secondary)}

.promo{margin-top:16px}
.promo-champ{display:flex;gap:8px}
.promo-champ input{
  flex:1;min-width:0;background:#fbfbf9;border:1px solid var(--surface-border);
  border-radius:10px;padding:9px 12px;font:inherit;font-size:.875rem;
  text-transform:uppercase;color:var(--ink-primary);
}
.promo-champ input:focus{outline:0;border-color:var(--sky-bold);box-shadow:0 0 0 3px rgba(30,136,216,.14)}
.promo-champ button{
  flex:none;padding:9px 15px;border-radius:10px;font-size:.875rem;font-weight:600;
  background:#f2f1ee;border:1px solid var(--surface-border);color:var(--ink-primary);
}
.promo-champ button:hover{background:#eae9e5}
.promo-msg{margin-top:8px;font-size:.75rem;min-height:16px}
.promo-msg.ok{color:#2f7a3c}
.promo-msg.err{color:#b8453a}

.totaux{margin-top:18px;padding-top:16px;border-top:1px solid var(--surface-border)}
.totaux .l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:.875rem}
.totaux .l span:first-child{color:var(--ink-secondary)}
.totaux .l span:last-child{font-variant-numeric:tabular-nums}
.totaux .l.remise span{color:#2f7a3c}
.totaux .total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--surface-border);
}
.totaux .total b:first-child{font-size:.9375rem}
.totaux .total b:last-child{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.recap .valider{margin-top:20px}
.recap .valider .btn{width:100%;font-size:1rem;padding:13px 20px}
.recap .mentions{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--surface-border);
  display:flex;flex-direction:column;gap:9px;
}
.recap .mention{display:flex;align-items:flex-start;gap:9px;font-size:.75rem;line-height:1.6;color:var(--ink-tertiary)}
.recap .mention svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--sky-bold)}

.erreur-form{
  margin-top:14px;font-size:.8125rem;line-height:1.6;min-height:18px;
}
.erreur-form.err{color:#b8453a}

/* ---------- confirmation ---------- */
.confirmation{position:relative;z-index:1;padding:140px 0 90px}
.conf-carte{
  max-width:640px;margin:0 auto;text-align:center;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:24px;padding:44px 36px;box-shadow:var(--shadow-md);
}
.conf-carte .sceau{
  width:66px;height:66px;margin:0 auto 22px;border-radius:999px;
  background:#e8f4ea;border:1px solid #9fd0a8;
  display:flex;align-items:center;justify-content:center;
}
.conf-carte .sceau svg{width:30px;height:30px;color:#2f7a3c}
.conf-carte h1{font-size:2rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.conf-carte .sous{margin-top:14px;font-size:1rem;line-height:1.7;color:var(--ink-secondary)}

.details-commande{
  margin-top:26px;text-align:left;
  background:#fbfbf9;border:1px solid var(--surface-border);border-radius:16px;padding:20px;
}
.details-commande .l{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:.875rem;border-bottom:1px solid #ecebe8;
}
.details-commande .l:last-child{border-bottom:0}
.details-commande .l span:first-child{color:var(--ink-secondary)}
.details-commande .l span:last-child{font-weight:600;font-variant-numeric:tabular-nums}

.suite-conf{margin-top:26px;text-align:left}
.suite-conf h2{font-size:1rem;font-weight:700;margin-bottom:14px}
.suite-conf .pas{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.suite-conf .pas .ic{
  flex:none;width:30px;height:30px;border-radius:9px;
  background:var(--sky-soft);color:var(--sky-bold);
  display:flex;align-items:center;justify-content:center;
}
.suite-conf .pas .ic svg{width:15px;height:15px}
.suite-conf .pas b{display:block;font-size:.875rem;font-weight:600}
.suite-conf .pas span{display:block;margin-top:2px;font-size:.8125rem;line-height:1.6;color:var(--ink-secondary)}

.conf-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.note-demo{
  max-width:640px;margin:22px auto 0;
  background:#fff8e1;border:1px solid #f0dfa8;border-radius:16px;padding:16px 20px;
}
.note-demo b{display:block;font-size:.875rem;color:#5a4a00}
.note-demo p{margin-top:5px;font-size:.8125rem;line-height:1.65;color:#6b5a1f}

@media (prefers-reduced-motion: reduce){
  .offre-ligne,.moyen,.champ-c input,.champ-c select{transition:none}
}

@media (max-width:1000px){
  .commande-grille{grid-template-columns:1fr}
  .recap{position:static}
}
@media (max-width:640px){
  .commande{padding-top:100px}
  .etape-bloc{padding:20px}
  .duo-champ,.trio-champ{grid-template-columns:1fr}
  .moyens{grid-template-columns:1fr}
  .conf-carte{padding:32px 22px}
  .conf-carte h1{font-size:1.625rem}
  .conf-actions .btn,.conf-actions .btn-stack{width:100%}
}

/* ---------- franchise en base de TVA ---------- */
/* L'éditeur ne facture aucune TVA : la mention est obligatoire, et
   remplace la ligne de taxe qu'un récapitulatif porte d'ordinaire. */
.mention-tva{
  margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--surface-border);
  font-size:.75rem;color:var(--ink-tertiary);
}

/* le code promo se saisit chez le prestataire, pas ici */
.promo-note{
  margin:14px 0 4px;font-size:.8125rem;color:var(--ink-tertiary);
}