/* Generated route CSS — v2188. Source: tools/css-source/page-specializations/public-demo-qualification.css. */
/* ===== Page specialization 51: en/demo-orientee-probleme.html | fr/demo-orientee-probleme.html ===== */
/* ===== Demo form section: modern two-panel composition ===== */
#demo-form.mms-section{
position:relative;
overflow:hidden;
--mms-content-section-space-top:clamp(1.9rem,3.5vw,3.25rem);
--mms-content-section-space-bottom:clamp(1.9rem,3.5vw,3.25rem);
background:
radial-gradient(circle at 8% 12%,rgb(22 135 126 / .09),transparent 22rem),
radial-gradient(circle at 94% 88%,rgb(226 183 47 / .07),transparent 19rem),
linear-gradient(180deg,var(--mms-surface-subtle) 0%,#fdfefe 52%,#f5faf8 100%);
}
#demo-form.mms-section::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.3;
background-image:radial-gradient(circle,rgb(22 135 126 / .18) 1px,transparent 1.15px);
background-size:30px 30px;
-webkit-mask-image:linear-gradient(90deg,black,transparent 38%,transparent 62%,black);
mask-image:linear-gradient(90deg,black,transparent 38%,transparent 62%,black);
}
#demo-form .mms-form-layout{
position:relative;
z-index:1;
grid-template-columns:minmax(14rem,.52fr) minmax(0,1.48fr);
gap:clamp(1.15rem,2.8vw,2.55rem);
align-items:start;
max-width:82rem;
}
#demo-form .mms-form-layout>div:first-child{
position:sticky;
top:calc(var(--mms-header-height,4.5rem) + 1.25rem);
max-width:22rem;
padding:.25rem 0 0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
#demo-form .mms-form-layout>div:first-child .mms-eyebrow{margin:0 0 .72rem}
#demo-form .mms-form-layout>div:first-child h2{
max-width:17ch;
margin:0;
font-size:clamp(1.5rem,2vw,1.92rem);
line-height:1.08;
letter-spacing:-.025em;
}
#demo-form .mms-form-layout>div:first-child>p{
max-width:34rem;
margin-top:.68rem;
color:var(--mms-ink-700,#38515a);
font-size:.88rem;
line-height:1.56;
}
#demo-form .mms-check-list{
gap:.48rem;
margin-top:.78rem;
}
#demo-form .mms-check-list li{
gap:.5rem;
color:var(--mms-ink-700,#38515a);
font-size:.79rem;
font-weight:640;
line-height:1.42;
}
#demo-form .mms-check-list .mms-mini-icon{
width:.9rem;
height:.9rem;
flex:0 0 .9rem;
margin-top:.16rem;
}

/* ===== Form card ===== */
#demo-form .mms-demo-qualification-form{
position:relative;
overflow:hidden;
padding:clamp(.95rem,1.65vw,1.35rem);
border:1px solid rgb(22 135 126 / .14);
border-radius:1.08rem;
background:linear-gradient(180deg,rgb(255 255 255 / .99),rgb(250 253 252 / .985));
box-shadow:0 18px 50px rgb(16 45 53 / .075),0 4px 12px rgb(16 45 53 / .035);
}
#demo-form .mms-demo-qualification-form::before{
content:"";
position:absolute;
top:0;
right:0;
left:0;
height:3px;
background:linear-gradient(90deg,var(--mms-teal-600,#16877e) 0 72%,var(--mms-warning) 72% 100%);
}
#demo-form .mms-form__qualification-progress{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"label meta" "bar bar";
gap:.5rem .8rem;
margin-bottom:.82rem;
padding:.12rem 0 .68rem;
border-bottom:1px solid rgb(214 226 223 / .78);
}
#demo-form .mms-form__qualification-progress>strong{
grid-area:label;
color:var(--mms-teal-900,#0d4b47);
font-size:.78rem;
font-weight:820;
letter-spacing:.015em;
}
#demo-form .mms-form__qualification-progress-bar{
grid-area:bar;
display:block;
height:.3rem;
overflow:hidden;
border-radius:var(--mms-radius-pill);
background:var(--mms-progress-track,#dbe8e5);
}
#demo-form .mms-form__qualification-progress-bar>i{
display:block;
width:33.333%;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--mms-teal-700,#127168),var(--mms-teal-500,#20a69a));
transition:width .24s ease;
}
#demo-form .mms-demo-qualification-form .mms-form__qualification-step[hidden]{display:none}
#demo-form .mms-form__qualification-step{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.68rem .78rem;
}
#demo-form .mms-form__qualification-step legend{
margin-bottom:.08rem;
color:var(--mms-ink-950,#152e35);
font-size:1rem;
font-weight:800;
letter-spacing:-.01em;
}
#demo-form .mms-form__qualification-step>.mms-form__step-hint{
grid-column:1/-1;
margin:-.05rem 0 .12rem;
color:var(--mms-ink-600,#536970);
font-size:.75rem;
line-height:1.44;
}
#demo-form .mms-demo-qualification-form label{
gap:.32rem;
font-size:.77rem;
font-weight:740;
}
#demo-form .mms-form__hint{
margin-top:-.02rem;
color:var(--mms-ink-600,#536970);
font-size:.72rem;
font-weight:520;
line-height:1.38;
}
#demo-form :is(.mms-demo-qualification-form input,.mms-demo-qualification-form textarea,.mms-demo-qualification-form select){
min-height:2.58rem;
padding:.59rem .72rem;
border-color:rgb(185 209 204 / .9);
border-radius:.66rem;
background:var(--mms-surface-muted);
font-size:.9rem;
line-height:1.3;
}
#demo-form .mms-demo-qualification-form textarea{
min-height:6.15rem;
padding-block:.75rem;
}
#demo-form .mms-demo-qualification-form select{
-webkit-appearance:none;
appearance:none;
padding-right:2.2rem;
background-image:
linear-gradient(45deg,transparent 50%,#536970 50%),
linear-gradient(135deg,#536970 50%,transparent 50%);
background-position:
calc(100% - .92rem) 50%,
calc(100% - .67rem) 50%;
background-size:.28rem .28rem,.28rem .28rem;
background-repeat:no-repeat;
}
#demo-form .mms-demo-qualification-form select:disabled{
color:var(--mms-ink-500,#718188);
cursor:not-allowed;
opacity:.72;
}

/* The adaptive question is visually signalled only when it is ready. */
#demo-form .mms-demo-qualification-form [data-demo-sub-intent-field]{
grid-column:1/-1;
margin-top:.05rem;
padding:.62rem .7rem .66rem;
border:1px solid transparent;
border-radius:.9rem;
transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
#demo-form .mms-demo-qualification-form [data-demo-sub-intent-field][data-state="ready"]{
border-color:rgb(22 135 126 / .18);
background:rgb(22 135 126 / .035);
box-shadow:inset 3px 0 0 rgb(22 135 126 / .48);
}

/* Compact action row: no more half-page buttons on desktop. */
#demo-form .mms-form__step-actions{
grid-column:1/-1;
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:.5rem;
margin-top:.18rem;
}
#demo-form .mms-form__step-actions .mms-button,
#demo-form .mms-form__qualification-step>[data-demo-next]{
width:auto;
min-width:8.5rem;
min-height:2.56rem;
margin-top:0;
padding:.56rem .84rem;
border-radius:.62rem;
font-size:.82rem;
line-height:1.15;
}
#demo-form .mms-form__qualification-step>[data-demo-next]{
justify-self:end;
grid-column:1/-1;
}
#demo-form .mms-button__icon{
width:.92rem;
height:.92rem;
}
#demo-form .mms-form__notice{
margin:.6rem 0 0;
font-size:.7rem;
line-height:1.42;
}

/* ===== Optional prospect availability preferences ===== */
#demo-form [hidden]{display:none}
#demo-form .mms-form__availability-choice{
grid-column:1/-1;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.48rem;
}
#demo-form .mms-form__availability-choice label{
display:flex;
align-items:center;
gap:.55rem;
min-height:2.7rem;
padding:.58rem .7rem;
border:1px solid var(--mms-line,#d6e2df);
border-radius:.68rem;
background:#fff;
cursor:pointer;
transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
#demo-form .mms-form__availability-choice label:has(input:checked){
border-color:rgb(22 135 126 / .42);
background:rgb(22 135 126 / .055);
box-shadow:inset 0 0 0 1px rgb(22 135 126 / .08);
}
#demo-form .mms-form__availability-choice input{width:auto;min-height:0;margin:0;padding:0}
#demo-form .mms-form__availability-windows{grid-column:1/-1;display:grid;gap:.52rem}
#demo-form .mms-form__availability-row{
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.52rem .62rem;
padding:.62rem;
border:1px solid var(--mms-line,#d6e2df);
border-radius:.72rem;
background:#fff;
}
#demo-form .mms-form__availability-row:has([data-availability-remove]:not([hidden])){padding-right:3rem}
#demo-form .mms-form__availability-custom{
grid-column:1/-1;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.52rem .62rem;
padding-top:.05rem;
}
#demo-form .mms-form__availability-remove{
position:absolute;
top:.54rem;
right:.54rem;
display:grid;
place-items:center;
width:2rem;
min-width:2rem;
height:2rem;
min-height:2rem;
margin:0;
padding:0;
border:1px solid var(--mms-line,#d6e2df);
border-radius:.55rem;
background:#fff;
color:var(--mms-ink-700,#36535b);
font-size:1rem;
line-height:1;
cursor:pointer;
}
#demo-form .mms-form__availability-remove[hidden]{display:none!important}
#demo-form .mms-form__availability-remove:hover{border-color:rgb(22 135 126 / .35);background:rgb(22 135 126 / .045)}
#demo-form .mms-form__availability-add{
grid-column:1/-1;
justify-self:start;
min-height:2.42rem;
padding:.5rem .72rem;
font-size:.8rem;
}
#demo-form .mms-form__availability-note{
grid-column:1/-1;
margin:.02rem 0 0;
color:var(--mms-ink-600,#536970);
font-size:.71rem;
line-height:1.42;
}

/* Localized inline validation replaces browser-native bubbles, whose language
follows browser settings rather than the FR/EN interface. */
#demo-form .mms-demo-qualification-form label[data-invalid="true"] :is(input,select,textarea){
border-color:rgb(190 66 61 / .62);
background:rgb(190 66 61 / .025);
box-shadow:0 0 0 2px rgb(190 66 61 / .075);
}
#demo-form .mms-form__field-error{
display:block;
margin:.04rem 0 0;
color:#9f302d;
font-size:.69rem;
font-weight:650;
line-height:1.35;
}

/* ===== Tablet/mobile ===== */
@media(max-width:56rem){
#demo-form.mms-section{--mms-content-section-space-top:1.8rem;--mms-content-section-space-bottom:1.8rem}
#demo-form .mms-form-layout{grid-template-columns:1fr;gap:.9rem}
#demo-form .mms-form-layout>div:first-child{position:static;max-width:none;padding:0}
#demo-form .mms-form-layout>div:first-child h2{max-width:24ch;font-size:clamp(1.42rem,5vw,1.72rem)}
#demo-form .mms-form-layout>div:first-child>p{margin-top:.62rem;font-size:.88rem;line-height:1.52}
#demo-form .mms-check-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem .8rem;margin-top:.75rem}
#demo-form .mms-check-list li{font-size:.78rem;line-height:1.38}
}

@media(max-width:42rem){
#demo-form.mms-section{--mms-content-section-space-top:1.25rem;--mms-content-section-space-bottom:1.25rem}
#demo-form .mms-form-layout{gap:.7rem;padding-inline:clamp(.78rem,4vw,1rem)}
#demo-form .mms-form-layout>div:first-child{padding:0;border-radius:0}
#demo-form .mms-form-layout>div:first-child .mms-eyebrow{margin-bottom:.42rem;font-size:.66rem}
#demo-form .mms-form-layout>div:first-child h2{font-size:1.26rem;line-height:1.12}
#demo-form .mms-form-layout>div:first-child>p{font-size:.79rem;line-height:1.43}
#demo-form .mms-check-list{display:none}
#demo-form .mms-check-list li{font-size:.75rem;line-height:1.34}
#demo-form .mms-demo-qualification-form{padding:.78rem;border-radius:.9rem}
#demo-form .mms-form__qualification-progress{margin-bottom:.78rem;padding-bottom:.68rem}
#demo-form .mms-form__qualification-step{grid-template-columns:1fr;gap:.6rem}
#demo-form .mms-form__qualification-step legend{font-size:.97rem}
#demo-form .mms-form__qualification-step>.mms-form__step-hint{grid-column:1;font-size:.73rem}
#demo-form .mms-demo-qualification-form label{font-size:.75rem}
#demo-form .mms-form__hint{font-size:.69rem;line-height:1.34}
#demo-form :is(.mms-demo-qualification-form input,.mms-demo-qualification-form textarea,.mms-demo-qualification-form select){min-height:2.52rem;padding:.56rem .68rem;font-size:1rem}
#demo-form .mms-demo-qualification-form select{padding-right:2.35rem;background-position:calc(100% - .95rem) 50%,calc(100% - .7rem) 50%}
#demo-form .mms-demo-qualification-form textarea{min-height:5.6rem;font-size:.92rem}
#demo-form .mms-demo-qualification-form [data-demo-sub-intent-field]{grid-column:1;padding:.62rem .65rem .68rem}
#demo-form .mms-form__step-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
#demo-form .mms-form__step-actions .mms-button{width:100%;min-width:0;min-height:2.58rem;padding:.58rem .72rem;font-size:.82rem}
#demo-form .mms-form__qualification-step>[data-demo-next]{width:auto;min-width:7.6rem;min-height:2.58rem;padding:.58rem .82rem;font-size:.82rem}
#demo-form .mms-form__availability-choice{grid-template-columns:1fr}
#demo-form .mms-form__availability-row{grid-template-columns:1fr;padding:.58rem}
#demo-form .mms-form__availability-custom{grid-column:1;grid-template-columns:1fr}
#demo-form .mms-form__availability-remove{top:.46rem;right:.46rem}
#demo-form .mms-form__availability-row>label:first-child{padding-right:2.7rem}
}

@media(max-width:23rem){
#demo-form .mms-form__step-actions{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
#demo-form .mms-form__qualification-progress-bar>i,
#demo-form .mms-demo-qualification-form [data-demo-sub-intent-field]{transition:none}
}

/* v229.4.74 — Region fallback checkbox follows its label on the same line. */
.mms-form .mms-form__region-other-toggle{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:.45rem!important;width:auto!important;max-width:100%!important}
.mms-form .mms-form__region-other-toggle>span{order:1}
.mms-form input.mms-form__region-other-checkbox[type="checkbox"]{appearance:auto!important;-webkit-appearance:checkbox!important;order:2;width:1rem!important;height:1rem!important;inline-size:1rem!important;block-size:1rem!important;min-width:1rem!important;min-height:1rem!important;max-width:1rem!important;max-height:1rem!important;padding:0!important;margin:0!important;border-radius:.18rem!important;box-shadow:none!important;flex:0 0 1rem!important;accent-color:#16877e}