.smb-simulateur {
--smb-fuchsia: #cc00c0;
--smb-fuchsia-vif: #ff1cf3;
--smb-fuchsia-fonce: #9e0095;
--smb-lavande: #ffffff;
--smb-rose: #cc00c0;
--smb-texte: #2b2b2b;
--smb-gris: #5f5a60;
max-width: 760px;
margin: 2rem auto;
background: #fff;
border: 2px solid var(--smb-fuchsia);
border-top: 8px solid var(--smb-fuchsia);
border-radius: 8px;
padding: 2rem;
box-shadow: 0 6px 24px rgba(204, 0, 192, .10);
color: var(--smb-texte);
font-size: 16px;
line-height: 1.5;
box-sizing: border-box;
}
.smb-simulateur *, .smb-simulateur *::before, .smb-simulateur *::after { box-sizing: border-box; }
.smb-surtitre {
display: inline-block;
margin: 0 0 .5rem;
padding: .2rem .7rem;
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--smb-fuchsia);
border-radius: 20px;
font-weight: 700;
}
.smb-titre {
font-size: 1.55rem;
font-weight: 700;
margin: 0 0 .5rem;
color: var(--smb-fuchsia);
line-height: 1.25;
}
.smb-intro { margin: 0 0 1.5rem; color: var(--smb-gris); }
.smb-intro strong { color: var(--smb-fuchsia); }
.smb-form { margin: 0; }
.smb-champ { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.smb-champ > label, .smb-champ > legend {
display: block;
font-weight: 700;
margin-bottom: .5rem;
padding: 0;
color: var(--smb-texte);
}
.smb-input-euro { position: relative; max-width: 280px; }
.smb-input-euro input {
width: 100%;
padding: .75rem 2.2rem .75rem .9rem;
font-size: 1.15rem;
border: 2px solid var(--smb-rose);
border-radius: 6px;
color: var(--smb-texte);
background: #fff;
-moz-appearance: textfield;
}
.smb-input-euro input::-webkit-outer-spin-button,
.smb-input-euro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.smb-input-euro input:focus { outline: none; border-color: var(--smb-fuchsia); box-shadow: 0 0 0 3px rgba(255, 28, 243, .18); }
.smb-input-euro span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--smb-gris); }
.smb-aide { margin: .35rem 0 0; font-size: .85rem; color: var(--smb-gris); }
.smb-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.smb-choix label { cursor: pointer; margin: 0; }
.smb-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.smb-choix span {
display: block;
border: 2px solid var(--smb-rose);
border-radius: 6px;
padding: .6rem 1rem;
background: #fff;
transition: border-color .15s, background .15s;
}
.smb-choix-enfants span { min-width: 3rem; text-align: center; font-weight: 700; }
.smb-choix-dvh { display: grid; grid-template-columns: repeat(3, 1fr); }
.smb-choix-dvh span { height: 100%; }
.smb-choix-dvh strong { display: block; }
.smb-choix-dvh small { display: block; font-size: .8rem; color: var(--smb-gris); line-height: 1.35; margin-top: .2rem; }
.smb-choix label:hover span { border-color: var(--smb-fuchsia-vif); color: var(--smb-fuchsia); }
.smb-choix input:checked + span { border-color: var(--smb-fuchsia); background: var(--smb-fuchsia); color: #fff; }
.smb-choix input:checked + span small { color: #fbe3fa; }
.smb-choix input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 28, 243, .35); }
.smb-resultat {
background: var(--smb-fuchsia);
border: 0;
color: #fff;
border-radius: 6px;
padding: 1.5rem;
margin-top: .5rem;
}
.smb-attente { margin: 0; color: #fff; font-style: italic; }
.smb-montant-principal { text-align: center; margin-bottom: 1.2rem; }
.smb-label { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.smb-valeur { display: block; font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1.2; }
.smb-sous { color: #fff; }
.smb-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0; }
.smb-detail div { background: #fff; border: 0; border-radius: 6px; padding: .6rem; text-align: center; }
.smb-detail dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--smb-gris); }
.smb-detail dd { margin: .2rem 0 0; font-weight: 700; color: var(--smb-fuchsia); }
.smb-alerte {
margin: 1rem 0 0;
padding: .75rem 1rem;
border-left: 4px solid var(--smb-fuchsia-vif);
background: #fff;
color: var(--smb-texte);
font-size: .9rem;
}
.smb-avertissement { font-size: .85rem; color: var(--smb-gris); margin: 1.2rem 0 0; }
.smb-cta { text-align: center; margin: 1.2rem 0 0; }
.smb-bouton, .smb-bouton:visited {
display: inline-block;
background: var(--smb-fuchsia);
color: #fff !important;
text-decoration: none !important;
padding: .85rem 1.7rem;
border-radius: 30px;
font-weight: 700;
transition: background .15s;
}
.smb-bouton:hover, .smb-bouton:focus { background: var(--smb-fuchsia-fonce); }
@media (max-width: 640px) {
.smb-simulateur { padding: 1.25rem; }
.smb-choix-dvh { grid-template-columns: 1fr; }
.smb-detail { grid-template-columns: repeat(2, 1fr); }
.smb-valeur { font-size: 2.1rem; }
}