@import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap);progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:none;border-radius:999px;height:24px;width:128px}progress::-webkit-progress-value{background-color:var(--mark);border-radius:999px;transition:width .3s ease-in-out}progress::-webkit-progress-bar{background-color:#fff;border-radius:999px}progress::-moz-progress-bar{background-color:var(--mark);border-radius:999px;transition:width .3s ease-in-out}#gommes-choice{color:var(--mark);display:grid;gap:32px;grid-template-columns:repeat(3,1fr);margin-block:32px 96px;& .gomme-card{background:var(--bordo-pastel);border-radius:16px;padding-block:48px;& h4{font-size:1.2rem;font-weight:bolder}& h4,& p{text-align:center}& p{font-weight:500;margin-top:32px;text-transform:uppercase}}& progress{display:block;height:20px;margin:6px auto;width:80%}}.button{--color:#000;background-color:var(--color);border-radius:999px;color:#fff;cursor:pointer;display:inline-flex;font-weight:700;padding:12px 24px;transition-duration:.1s;transition-property:background,transform,scale;transition-timing-function:ease-in-out;&:hover{background-color:color-mix(in oklch,var(--color),#fff 10%);cursor:pointer;transform:translateY(-4px)}&:active{background-color:var(--color,#000);scale:.95;transform:translateY(0)}}:root{--sl-color-primary-50:#f9f6f8;--sl-color-primary-100:#f4eff1;--sl-color-primary-200:#ebdfe4;--sl-color-primary-300:#dcc5ce;--sl-color-primary-400:#f6767f;--sl-color-primary-500:#b81833;--sl-color-primary-600:#9a1731;--sl-color-primary-700:#7d162e;--sl-color-primary-800:#490815;--sl-color-primary-900:#7d162e;--sl-color-primary-950:#490815}h2{color:#3b1426}body,html{background-color:var(--surface-base);font-family:Lexend Deca,sans-serif;font-optical-sizing:auto;font-size:1rem;font-style:normal;font-weight:<weight>}.container-fluid{margin:auto;padding-inline:64px;width:100%}.container{margin:auto;max-width:min(1512px,90vw);padding-inline:5vw;width:100%}.form-row{display:grid;gap:20px;grid-template-columns:1fr 1fr}@media (max-width:640px){.form-row{grid-template-columns:1fr}}nav .container-fluid{align-items:center;display:flex;justify-content:space-between}#logo{display:block;height:56px}#nav-links{align-items:center;display:flex;font-weight:700;gap:32px}dl{gap:8px}h5{color:var(--sl-font-color-discret)}#step-form-container{align-items:center;display:grid;gap:64px;grid-template-columns:2fr 1fr;min-height:70vh;position:relative}.step-container{grid-column:1/2;grid-row:1;opacity:0;transform:translateY(30px);transition:opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out;visibility:hidden;width:100%}.step-container.active{opacity:1;transform:translateY(0);visibility:visible}.step-container.exit-up{opacity:0;transform:translateY(-30px);visibility:hidden}.step-container.exit-down{opacity:0;transform:translateY(30px);visibility:hidden}.step-container.enter-from-top{transform:translateY(-30px)}.back-step::part(prefix){max-width:32px;transition:all .3s ease}.back-step:not(:hover)::part(prefix){max-width:0}sl-radio-group.card-radio::part(form-control-input){display:flex;gap:var(--sl-spacing)}sl-radio-group.card-radio sl-radio{flex:1;text-align:center;& h4{color:var(--sl-color-primary-800);margin-bottom:var(--sl-spacing-x-large)}& p{font-weight:700;margin-bottom:var(--sl-spacing-small);text-transform:uppercase}& sl-progress-bar:nth-last-of-type(2){margin-bottom:var(--sl-spacing-large)}}sl-radio-group.card-radio sl-radio::part(base),sl-radio-group.card-radio sl-radio::part(label){width:100%}sl-radio-group.card-radio sl-radio::part(base){padding-block:32px}sl-radio-group.card-radio sl-radio:hover,sl-radio-group.card-radio sl-radio[checked]{background-color:var(--sl-color-primary-50)}sl-progress-bar{--indicator-color:var(--sl-color-primary-800)}.label-custom{color:#174d32;display:inline-flex;font-weight:700}sl-callout::part(message){flex:1}.confirmation-container{display:grid;gap:var(--sl-spacing)}.w-100{width:100%}@media (max-width:1222px){.container{padding:0}#step-form-container{align-items:start;gap:0;grid-template-columns:100%}#recap-card{display:none}#logo{width:80%}.container-fluid{padding-inline:32px}.back-step:not(:hover)::part(prefix){max-width:32px}.back-step::part(base){border:1px solid var(--sl-color-variant-100)}}