.swf { max-width: 820px; margin: 0 auto; padding: 30px 18px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.swf-head { text-align: center; margin: 20px 0 18px; }
.swf-title {
    margin: 0;
    letter-spacing: 0.5px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #E10073;
}
.swf-subtitle { margin: 6px 0 0; font-size: 16px;  color: black; }
.swf-progress { position: relative; margin: 10px 0 25px; }
.swf-progress__bar { height: 18px; background: #d9d9d9; border-radius: 999px; overflow: hidden; }
.swf-progress__fill { display: block; height: 100%; width: 25%; background: #111; border-radius: 999px; transition: width .25s ease; }
.swf-progress__label { position: absolute; left: 18px; top: -2px; color: #fff; font-weight: 700; font-size: 14px; }

.swf-card {
    background: #f6f0ee;
    border-radius: 14px;
    padding: 18px 18px;
    margin: 14px auto;
    max-width: 520px;
    border: 2px solid transparent;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.swf-card--selected {
    background: #e1007a;
    color: #fff;
    border-color: #e1007a;
}
.swf-card__row { display: flex; gap: 12px; align-items: flex-start; }
.swf-emoji { font-size: 26px; line-height: 1; margin-top: 2px; }
.swf-card__title { font-size: 1rem; font-weight: 800; margin: 0 0 6px; color: black;}
.swf-card--selected .swf-card__title { font-weight: 900;  color: white; } /* titre en gras au clic */
.swf-card__desc { margin: 0; opacity: .9; color: black; }
.swf-card--selected .swf-card__desc { color: white; } /* description en gras au clic */

.swf-options { margin-top: 12px; display: grid; gap: 12px; }
.swf-option {
    display: flex;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.swf-option__box {
    width: 22px; height: 22px;
    border: 2px solid currentColor;
    border-radius: 3px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: black;
}
.swf-option__check { opacity: 0; transform: scale(.85); transition: .12s ease; font-weight: 900; }
 .swf-option__text { display: flex; flex-direction: column; gap: 2px; }
.swf-option__label { font-weight: 700; color: black;}
.swf-option__hint { font-size: 13px; opacity: .8; }
.swf-option--selected .swf-option__check { opacity: 1; transform: scale(1); }

 .swf-input {
    width: 100%;
    max-width: 520px;
    margin: 10px auto 0;
    display: block;
    padding: 12px 12px !important;
    border-radius: 10px;
    border: 1px solid #ccc;
    outline: none;
}
.swf-card--selected .swf-input { border-color: rgba(255,255,255,.55); }

.swf-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.swf-btn { border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 800; cursor: pointer; }
.swf-btn--ghost { background: #efefef; }
.swf-btn--primary { background: #fff; border: 2px solid #e1007a; color: #e1007a; }
.swf-btn:disabled { opacity: .5; cursor: not-allowed; }

.swf-toast { text-align: center; margin-top: 12px; font-weight: 700; }

.swf-thanks { text-align: center; padding: 40px 0 10px; }
.swf-thanks__icon {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 12px;
    color: #e1007a;
}
.swf-thanks__title {
    margin: 0;
    font-size: 36px;
    font-weight: 900;
    color: #e1007a;
}
.swf-thanks__text {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    opacity: .85;
}

.swf-thanks__actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.swf-btn--outline {
    background: #fff;
    border: 2px solid #e1007a;
    color: #e1007a;
    text-decoration: none;
}
.swf-btn--filled {
    background: #e1007a;
    color: #fff;
    text-decoration: none;
}

.swf-thanks__follow { margin-top: 34px; }
.swf-thanks__follow-title { font-weight: 900; color: #e1007a; letter-spacing: .6px; }
.swf-thanks__socials { margin-top: 12px; display: flex; justify-content: center; gap: 10px; }
.swf-social {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid #ddd;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-weight: 900;
    color: #111;
}

@media (max-width: 767px){
    .swf-card__row {
        display: block;
    }
    .swf-emoji {
        text-align: center;
        margin-bottom: 2vh;
    }
    .swf-card__title {
        text-align: center;
    }
    p.swf-card__desc {
        text-align: center;
    }
}