:root{
--mmz-purple: #8B5CF6;
--mmz-pink: #EC4899;
--mmz-bg: #F6F7F4;
--mmz-card: #ffffff;
--mmz-border: rgba(0,0,0,.12);
--mmz-border-strong: rgba(0,0,0,.18);
--mmz-text: rgba(0,0,0,.82);
}
.quiz-container{
max-width: 1040px;
margin: 0 auto;
padding: 18px 14px 26px;
background: transparent;
} .quiz-progress{
margin: 0 0 18px;
}
.quiz-progress .progress-bar{
height: 8px;
border-radius: 999px;
background: rgba(0,0,0,.08);
overflow: hidden;
}
.quiz-progress .progress-fill{
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--mmz-purple), var(--mmz-pink));
}
.quiz-progress .progress-text{
margin-top: 10px;
text-align: center;
font-size: 13px;
opacity: .75;
} .quiz-question{
text-align: center;
font-size: 26px;
line-height: 1.2;
margin: 18px 0 18px;
color: rgba(0,0,0,.86);
} .quiz-category{ margin: 12px 0; }
.quiz-options > .quiz-category{ margin: 0; }
.quiz-category-default{
grid-column: 1 / -1;
margin: 4px 0 0 !important;
}
.quiz-category + .quiz-category-default{
margin-top: 4px !important;
}
.quiz-category-title{
color: var(--mmz-purple);
font-weight: 800;
font-size: 14px;
margin: 0 0 10px;
} .quiz-options{
display: flex;
flex-direction: column;
gap: 14px;
} .quiz-step[data-type="multiple"] .quiz-options{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 760px){
.quiz-step[data-type="multiple"] .quiz-options{
grid-template-columns: 1fr;
}
} label.quiz-option{
display: block;
cursor: pointer;
margin: 0;
position: relative;
} label.quiz-option > input{
position: absolute;
opacity: 0;
pointer-events: none;
} label.quiz-option .option-content{
display: block;
padding: 12px;
border-radius: 16px;
background: var(--mmz-card);
border: 1px solid var(--mmz-border);
transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease, background .15s ease;
} label.quiz-option .option-text{
display: flex;
align-items: center;
min-height: 54px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.14);
background: #fff;
padding: 14px 16px;
font-weight: 700;
font-size: 14px;
color: var(--mmz-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
} label.quiz-option:hover .option-content{
border-color: var(--mmz-border-strong);
box-shadow: 0 10px 26px rgba(0,0,0,.06);
transform: translateY(-1px);
} label.quiz-option > input:checked + .option-content{
border-color: rgba(139,92,246,.55);
background: rgba(139,92,246,.07);
box-shadow: 0 0 0 3px rgba(139,92,246,.16);
}
label.quiz-option > input:checked + .option-content .option-text{
border-color: rgba(139,92,246,.75);
} .choices-count{
grid-column: 1 / -1;
margin-top: -6px;
font-weight: 800;
color: var(--mmz-purple);
font-size: 13px;
} .quiz-options.image-grid{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px){
.quiz-options.image-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px){
.quiz-options.image-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
label.quiz-option.image-option .option-content{
padding: 12px;
}
label.quiz-option.image-option .option-text{
justify-content: center;
text-align: center;
min-height: 44px;
} label.quiz-option.image-option img.option-image{
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 14px;
display: block;
margin-bottom: 10px;
background: #f2f2f2;
} .quiz-navigation{
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 12px;
}
.quiz-navigation .btn-prev,
.quiz-navigation .btn-next{
height: 44px;
min-width: 160px;
padding: 0 16px;
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 800;
transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
}
.quiz-navigation .btn-prev{
background: rgba(0,0,0,.04);
color: rgba(0,0,0,.70);
}
.quiz-navigation .btn-prev:hover{
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.quiz-navigation .btn-prev:disabled{
opacity: .45;
cursor: not-allowed;
box-shadow: none;
transform: none;
} .quiz-navigation .btn-next{
color: #fff;
background: linear-gradient(135deg, var(--mmz-purple), var(--mmz-pink));
box-shadow: 0 14px 28px rgba(139,92,246,.22);
}
.quiz-navigation .btn-next:hover{
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(139,92,246,.28);
} .quiz-loading{
display: none;
text-align: center;
padding: 18px 0;
}
.quiz-loading p{
margin: 0;
font-weight: 800;
opacity: .85;
} .quiz-email-capture{
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background: rgba(10, 6, 20, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
} .quiz-email-capture.visible{
display: flex;
}
.quiz-email-capture-inner{
background: #fff;
border-radius: 20px;
padding: 44px 36px 36px;
max-width: 460px;
width: 100%;
text-align: center;
box-shadow: 0 32px 80px rgba(0,0,0,.28);
animation: mmzGateIn .35s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes mmzGateIn{
from{ opacity:0; transform:translateY(28px) scale(.96); }
to  { opacity:1; transform:translateY(0)   scale(1);   }
}
.quiz-email-capture h3{
font-size: 1.6rem;
font-weight: 700;
color: #10190F;
margin: 0 0 10px;
line-height: 1.2;
}
.quiz-email-capture p{
color: #6D756B;
font-size: .95rem;
line-height: 1.6;
margin: 0 0 20px;
}
#email-capture-form input[type="email"]{
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border-radius: 10px;
border: 1.5px solid #D5E5CD;
outline: none;
margin: 0 0 12px;
font-size: 1rem;
background: #F6F7F4;
color: #10190F;
transition: border-color .2s;
}
#email-capture-form input[type="email"]:focus{
border-color: var(--mmz-purple);
background: #fff;
box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
.quiz-email-capture .btn-submit-email{
display: block;
width: 100%;
padding: 15px 20px;
border: 0;
border-radius: 10px;
font-size: 1rem;
font-weight: 900;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--mmz-purple), var(--mmz-pink));
box-shadow: 0 6px 18px rgba(139,92,246,.25);
transition: transform .1s, box-shadow .18s;
}
.quiz-email-capture .btn-submit-email:hover{
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(139,92,246,.32);
}
.quiz-email-capture .skip-email{
display: inline-block;
margin-top: 14px;
font-size: .78rem;
opacity: .65;
color: #6D756B;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
background: none;
border: none;
padding: 0;
}
.quiz-email-capture .skip-email:hover{ opacity: .95; }
@media(max-width:520px){
.quiz-email-capture-inner{ padding: 32px 22px 28px; }
.quiz-email-capture h3{ font-size: 1.35rem; }
} .quiz-notification{
padding: 12px 14px;
border-radius: 12px;
margin: 0 0 12px;
font-weight: 800;
font-size: 14px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.quiz-notification.error{
border-color: rgba(239,68,68,.35);
background: rgba(239,68,68,.08);
}
.quiz-notification.warning{
border-color: rgba(245,158,11,.35);
background: rgba(245,158,11,.10);
}
.quiz-notification.success{
border-color: rgba(16,185,129,.35);
background: rgba(16,185,129,.10);
}
:root{
--mmz-purple: #8B5CF6;
--mmz-pink: #EC4899;
} label.quiz-option .option-text{
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
min-height: auto !important;
font-weight: 800 !important;
} label.quiz-option .option-content{
display: flex !important;
align-items: center !important;
justify-content: center !important; padding: 14px 16px !important;
border-radius: 16px !important;
border: 1px solid rgba(0,0,0,.12) !important;
background: #fff !important;
transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
} label.quiz-option:hover .option-content{
transform: translateY(-1px) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
border-color: rgba(0,0,0,.18) !important;
} label.quiz-option > input:checked + .option-content{
border: 0 !important;
background: linear-gradient(135deg, var(--mmz-purple), var(--mmz-pink)) !important;
box-shadow: 0 16px 34px rgba(139,92,246,.26) !important;
} label.quiz-option > input:checked + .option-content .option-text{
color: #fff !important;
} label.quiz-option .option-text{
color: rgba(0,0,0,.82) !important;
} label.quiz-option.image-option .option-content{
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 12px !important;
} label.quiz-option.image-option img.option-image{
width: 100% !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
border-radius: 14px !important;
display: block !important;
background: #f2f2f2 !important;
} label.quiz-option.image-option .option-text{
text-align: center !important;
padding: 10px 0 2px !important;
} label.quiz-option.image-option > input:checked + .option-content{
background: #fff !important; border: 0 !important;
box-shadow: 0 0 0 3px rgba(139,92,246,.22), 0 16px 34px rgba(139,92,246,.18) !important;
}
label.quiz-option.image-option > input:checked + .option-content .option-text{
color: rgba(0,0,0,.88) !important;
} .quiz-options{
gap: 18px !important; } .quiz-step[data-type="multiple"] .quiz-options{
gap: 18px !important; } label.quiz-option .option-content{
border: 1px solid rgba(0,0,0,.55) !important; } label.quiz-option:hover .option-content{
border-color: rgba(0,0,0,.85) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
} label.quiz-option > input:checked + .option-content{
box-shadow: 0 18px 38px rgba(139,92,246,.28) !important;
} label.quiz-option > input:checked + .option-content .option-text{
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; font-weight: 900 !important;
} label.quiz-option .option-text{
font-size: 15px !important; letter-spacing: .2px !important;
}  .quiz-category .quiz-options{
row-gap: 18px !important; column-gap: 18px !important; } .quiz-category label.quiz-option{
margin-bottom: 18px !important;
} .quiz-category label.quiz-option:last-child{
margin-bottom: 0 !important;
}
.quiz-category-default label.quiz-option{
margin-bottom: 0 !important;
}  .quiz-options.color-picker {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 14px !important;
}
@media (max-width: 760px) {
.quiz-options.color-picker {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 420px) {
.quiz-options.color-picker {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
} label.quiz-option.color-option .option-content {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 10px !important;
padding: 14px 10px !important;
min-height: 110px !important;
} label.quiz-option.color-option .color-swatch {
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.25);
box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
transition: transform .15s ease, box-shadow .15s ease;
flex-shrink: 0;
}
label.quiz-option.color-option:hover .color-swatch {
transform: scale(1.12);
box-shadow: 0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
} label.quiz-option.color-option .option-text {
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: .1px !important;
} label.quiz-option.color-option > input:checked + .option-content {
background: rgba(139,92,246,.12) !important;
border-color: rgba(139,92,246,.7) !important;
box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important;
}
label.quiz-option.color-option > input:checked + .option-content .color-swatch {
transform: scale(1.15);
border-color: #fff;
box-shadow: 0 0 0 3px rgba(139,92,246,.5), 0 6px 18px rgba(0,0,0,.3);
} label.quiz-option.color-option > input:checked + .option-content .color-swatch::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
color: rgba(255,255,255,.95);
text-shadow: 0 1px 3px rgba(0,0,0,.4);
} label.quiz-option.color-option .color-swatch {
position: relative;
} label.quiz-option.color-option > input:checked + .option-content .option-text {
color: rgba(0,0,0,.85) !important;
text-shadow: none !important;
font-weight: 900 !important;
} label.quiz-option.color-option-aucune {
grid-column: 1 / -1 !important;
}
label.quiz-option.color-option-aucune .option-content {
flex-direction: row !important;
min-height: auto !important;
padding: 12px 18px !important;
justify-content: center !important;
}
label.quiz-option.color-option-aucune .option-text {
font-size: 14px !important;
color: rgba(0,0,0,.65) !important;
font-style: italic;
}