.swmc { --rounded: 14px; --gap: 14px; --shadow: 0 6px 18px rgba(0,0,0,.06); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
.swmc-title { font-size: 1.4rem; margin: 0 0 10px; }

.swmc-line { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--gap); align-items: end; padding: 14px; background: #fff; border: 1px solid #eee; border-radius: var(--rounded); box-shadow: var(--shadow); margin-bottom: 12px; }
.swmc-field label { display:block; font-size:.9rem; color:#444; margin-bottom:6px; }
.swmc-field select, .swmc-field input[type="month"] { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-size:1rem; background:#fafafa; }
.swmc-field select:focus, .swmc-field input[type="month"]:focus { outline:none; border-color:#bbb; background:#fff; }

.swmc-btn, .swmc-btn--ghost { padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; border:0; }
.swmc-btn { background:#111; color:#fff; }
.swmc-btn--ghost { background:#f4f4f4; color:#333; }
.swmc-actions { margin: 14px 0 20px; }

.swmc-results h4 { margin: 16px 0; font-size: 1.2rem; }
.swmc-card { border:1px solid #eee; border-radius: var(--rounded); overflow:hidden; background:#fff; margin-bottom:14px; box-shadow: var(--shadow); }
.swmc-card__header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #f2f2f2; }
.swmc-chip { background:#111; color:#fff; font-size:.85rem; padding:6px 10px; border-radius:999px; }
.swmc-sub { color:#666; font-size:.95rem; }

.swmc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 14px; }
.swmc-col h5 { margin: 0 0 8px; font-size:1.05rem; }
.swmc-list { margin:0; padding-left:18px; }
.swmc-list li { margin: 4px 0; }

.swmc-total-line { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:10px; border:1px dashed #e7e7e7; border-radius:10px; }
.swmc-total-line--accent { background:#fafafa; }

.swmc-savings { display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:10px 14px; border-top:1px solid #f2f2f2; font-weight:700; }

.swmc-grand { border:2px solid #111; border-radius:16px; padding:14px; margin-top: 10px; }
.swmc-grand__row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.swmc-grand__row--save { border-top:1px solid #ddd; margin-top:6px; padding-top:12px; font-weight:800; }

.swmc-notes { margin-top:18px; background:#f8f9fb; border:1px solid #eef0f2; padding:14px; border-radius:14px; }
.swmc-notes h4 { margin:0 0 8px; }
.swmc-notes ul { margin:0 0 6px 18px; }
.swmc-disclaimer { color:#666; font-size:.9rem; margin:0; }

/* CTA */
.swmc-cta { margin-top:16px; display:flex; justify-content:center; }
.swmc-cta-btn { display:inline-block; padding:14px 20px; border-radius:12px; background:#FCCF8F; color:#000 !important; font-weight:700; text-decoration:none; box-shadow: var(--shadow); }
.swmc-cta-btn:hover { filter: brightness(1.05); transform: translateY(-1px); transition: transform .2s ease, filter .2s ease; }

/* --- Effet WOW : masque jusqu'à ce qu'au moins une ligne soit complète --- */
.swmc .swmc-results,
.swmc .swmc-notes,
.swmc .swmc-cta {
  transition: opacity .3s ease, transform .3s ease;
}

.swmc.is-waiting .swmc-results,
.swmc.is-waiting .swmc-notes,
.swmc.is-waiting .swmc-cta {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
}

.swmc.is-ready .swmc-results,
.swmc.is-ready .swmc-notes,
.swmc.is-ready .swmc-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  height: auto;
}

@media (max-width: 720px) {
  .swmc-line { grid-template-columns: 1fr; }
  .swmc-grid { grid-template-columns: 1fr; }
}

/* Plus d'espace entre Option A et Option B en mobile */
@media (max-width: 720px) {
  .swmc-card .swmc-grid {
    grid-template-columns: 1fr;   /* déjà présent mais on le rappelle */
    row-gap: 30px !important;                /* ↑ augmente l'espace vertical (ex: 28px) */
  }
}

/* === Marque === */
.swmc {
  --brand: #FCCF8F;   /* principale */
  --brand-2: #45AFAD; /* secondaire */
  --brand-text: #1a1a1a; /* texte foncé pour contraste */
}

/* Accent global de la colonne B (facultatif mais joli) */
.swmc-card .swmc-grid .swmc-col--b {
  position: relative;
  border: 1px solid rgba(69,175,173,0.12);
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(252,207,143,0.12), rgba(252,207,143,0)) border-box;
}

/* Responsive : garde le souffle entre A et B sur mobile */
@media (max-width: 720px) {
  .swmc-card .swmc-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .swmc-card .swmc-grid .swmc-col--b {
    margin-top: 4px; /* petit décalage supplémentaire */
  }
}


/* Palette marque */
.swmc { --brand: #FCCF8F; --brand-2: #45AFAD; --ink: #111; }

/* ===== Versus Block (A vs B) ===== */
.swmc-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}

.swmc-vcard {
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A = neutre */
.swmc-vcard--a .swmc-vlabel { color:#667085; }

/* B = mise en avant */
.swmc-vcard--b {
  border-color: 1px solid #000;
  background: #FCCF8F;
}
.swmc-vcard--b .swmc-vlabel {
  color: #000;
  display: inline-block;
}

/* Libellés & prix */
.swmc-vlabel {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.swmc-vprice {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

/* Médaillon VS */
.swmc-vs {
  align-self: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  background: #FCCF8F;
  border: 2px solid #000;
  color:#000;
}

/* Bande économies (moins mise en avant que B) */
.swmc-savings-strip {
  margin-top: 12px;
  border: 1px dashed #e3e7ea;
  background: #f7f9fb;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700;
}
.swmc-savings-strip strong { font-size: 1.1rem; }

/* Mobile */
@media (max-width: 720px) {
  .swmc-versus {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .swmc-vs {
    width: 40px; height: 40px; margin: 2px auto 0;
  }
}
/* Mention de projection (3 ans) sous le comparatif */
.swmc-projection-note{
  margin-top: 8px;
  text-align: center;
  font-size: .95rem;
  color: #667085;
}