/* =============================================================================
   Modale pricing — style SaaS Pro compact (tient sans scroll sur desktop)
   Inspiration: Stripe / Linear / Notion landing
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

#mqs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

#mqs-modal-backdrop.mqs-modal-open {
    opacity: 1;
    pointer-events: auto;
}

#mqs-modal-backdrop[hidden] {
    display: none;
}

/* Preview : panneau latéral. Le site reste visible à gauche pendant que le
   visiteur parcourt le domaine, les formules et le paiement. */
#mqs-pricing-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

#mqs-pricing-drawer,
#mqs-pricing-drawer *,
#mqs-modal-backdrop,
#mqs-modal-backdrop * {
    box-sizing: border-box;
}

#mqs-pricing-drawer.mqs-modal-open {
    opacity: 1;
    pointer-events: auto;
}

.mqs-drawer-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(9, 10, 12, 0.36);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

#mqs-pricing-drawer #mqs-modal {
    width: min(920px, 68vw);
    height: calc(100dvh - 24px);
    max-height: none;
    margin: 12px 12px 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: -24px 0 70px -28px rgba(0, 0, 0, 0.48);
    transform: translateX(calc(100% + 24px));
    transition: transform 0.34s cubic-bezier(.22,.75,.2,1);
}

#mqs-pricing-drawer.mqs-modal-open #mqs-modal {
    transform: translateX(0);
}

#mqs-pricing-drawer #mqs-modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin: -18px -18px 0 0;
}

#mqs-pricing-drawer .mqs-plan-price {
    font-size: clamp(2.15rem, 3.3vw, 3.05rem);
}

#mqs-modal {
    background: #f4f4f2;
    border-radius: 26px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s ease;
    position: relative;
    color: #0a0a0a;
    padding: 44px 44px 34px;
}

#mqs-modal-backdrop.mqs-modal-open #mqs-modal {
    transform: translateY(0) scale(1);
}

@media (max-width: 600px) {
    #mqs-modal-backdrop {
        padding: 12px;
    }
    #mqs-modal {
        padding: 22px 16px 16px;
        border-radius: 16px;
        max-height: calc(100vh - 24px);
    }
}

#mqs-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #e4e4e1;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 10;
}

.mqs-funnel-tabs {
    display: flex;
    width: fit-content;
    gap: 4px;
    margin: 0 auto 24px;
    padding: 4px;
    border-radius: 999px;
    background: #dcdcd9;
}

.mqs-funnel-tabs button {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5c5c59;
    cursor: pointer;
    font: 600 14px/1 inherit;
}

.mqs-funnel-tabs button.is-active {
    background: #0a0a0a;
    color: #ffffff;
}

.mqs-funnel-tabs button:disabled {
    cursor: default;
}

#mqs-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #0a0a0a;
}

#mqs-modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* === Step header — compact === */
.mqs-step-header {
    text-align: center;
    margin-bottom: 22px;
}

.mqs-launch-pill {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin: 10px auto 14px;
    padding: 7px 12px;
    border: 1px solid #d6ec9a;
    border-radius: 999px;
    background: #eaf7c2;
    color: #33420a;
    font-size: 0.68rem;
}

.mqs-launch-pill strong {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mqs-step-eyebrow {
    font-size: 0.75rem;
    color: #6b7280;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

.mqs-step-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 4px 0 4px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-family: inherit;
}

.mqs-step-sub {
    font-size: 0.92rem;
    color: #6b7280;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.45;
    letter-spacing: -0.005em;
}

@media (max-width: 600px) {
    .mqs-step-header {
        margin-bottom: 16px;
    }
    .mqs-step-title {
        font-size: 1.3rem;
    }
    .mqs-step-sub {
        font-size: 0.78rem;
    }
}

/* === Plans grid : 3 cards equal width === */
.mqs-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 4px 0 22px;
    align-items: stretch;
}

@media (max-width: 760px) {
    .mqs-plans {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }
}

/* === Plan card — compact === */
.mqs-plan {
    background: #ffffff;
    border: 1px solid #e4e4e0;
    border-radius: 22px;
    padding: 24px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: grid;
    grid-template-rows: 56px 72px 34px 58px minmax(72px, auto) 30px 48px;
    align-content: stretch;
    min-width: 0;
}

.mqs-plan-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    min-width: 0;
}

.mqs-plan-title {
    font-size: 1.05rem;
    line-height: 1.25;
    max-width: 52%;
    letter-spacing: -0.025em;
}

.mqs-plan:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.mqs-plan.mqs-plan-selected {
    border-color: #0a0a0a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* === Plan POPULAR : background lavender === */
.mqs-plan.mqs-plan-popular {
    background: #f6fbdc;
    color: #0a0a0a;
    border: 2px solid #b7d73e;
    transform: none;
    box-shadow: 0 16px 34px -24px rgba(62, 82, 0, 0.4);
}

.mqs-plan-popular .mqs-plan-title,
.mqs-plan-popular .mqs-plan-price,
.mqs-plan-popular .mqs-plan-description {
    color: #0a0a0a;
}

.mqs-plan.mqs-plan-popular.mqs-plan-selected {
    border-color: #0a0a0a;
}

/* === Eyebrow badge (compact pill) === */
.mqs-plan-eyebrow {
    font-size: 0.72rem;
    color: #6b7280;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    background: #f4f4f5;
    padding: 4px 10px;
    border-radius: 999px;
    align-self: center;
    margin-bottom: 0;
    display: inline-block;
    white-space: nowrap;
}

.mqs-plan-popular .mqs-plan-eyebrow {
    background: #cdf24d;
    color: #0b0b0b;
    font-weight: 700;
}

/* === Prix — gros mais pas geant === */
.mqs-plan-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1;
    min-width: 0;
}

.mqs-plan-price-main {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    min-width: 0;
}

.mqs-plan-price {
    font-size: clamp(2.15rem, 3vw, 2.75rem);
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.04em;
    line-height: 1;
    font-family: inherit;
    white-space: nowrap;
}

.mqs-plan-discount {
    flex: 0 0 auto;
    padding: 7px 8px;
    border-radius: 9px;
    background: #eaf7c2;
    color: #33420a;
    font-size: 0.75rem;
    font-weight: 800;
}

.mqs-plan-discount-placeholder {
    visibility: hidden;
}

.mqs-plan-period {
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

.mqs-plan-description {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 8px;
    line-height: 1.4;
    min-height: 0;
}

.mqs-plan-saving {
    min-height: 0;
    margin: 0 0 10px;
    color: #5b7a12;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 700;
}

.mqs-plan-saving strong {
    font-weight: 800;
}

.mqs-plan-reference {
    margin: 0 0 8px;
    color: #5f636b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.mqs-plan-popular .mqs-plan-saving {
    color: #4c6500;
}

@media (max-width: 760px) {
    .mqs-plan-description {
        min-height: 0;
    }
}

/* === Ligne secondaire factuelle (ex : « Engagement 24 mois ») ===
   Rendue sur les 3 cards (vide si pas de note) pour garder les CTA alignés. */
.mqs-plan-note {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 600;
    margin: 0 0 12px;
    min-height: 1.1em;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.mqs-plan-popular .mqs-plan-note {
    color: #4b4d7a;
}

@media (max-width: 760px) {
    .mqs-plan-note {
        min-height: 0;
        margin: 0 0 10px;
    }
    .mqs-plan-note:empty {
        display: none;
    }
}

/* === Bouton CTA dans chaque card : noir pill === */
.mqs-plan-cta {
    background: #0a0a0a;
    color: #ffffff;
    border: 0;
    align-self: end;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 13px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.mqs-plan-popular .mqs-plan-cta {
    background: #0a0a0a;
    color: #ffffff;
}

.mqs-plan-popular .mqs-plan-cta:hover {
    background: #242424;
}

.mqs-value-anchor {
    position: relative;
    display: block;
    max-width: none;
    margin: 0 0 28px;
    padding: 24px 26px;
    border-radius: 20px;
    border: 2px solid #bedb52;
    background: #f1f8d2;
    color: #263500;
}

.mqs-value-anchor > h3 {
    margin: 10px 80px 12px 0;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.mqs-value-anchor > p {
    margin: 14px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.mqs-value-anchor-intro {
    max-width: 680px;
    color: #536020;
}

.mqs-launch-price {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}

.mqs-launch-price s {
    color: #7b8068;
    font-size: 1rem;
}

.mqs-launch-price strong {
    color: #263500;
    font-size: 2.25rem;
    letter-spacing: -.05em;
}

.mqs-value-anchor-discount {
    position: absolute;
    top: 22px;
    right: 24px;
    padding: 7px 10px;
    border-radius: 9px;
    background: #263500;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

.mqs-plans-heading {
    margin: 0 0 14px;
}

.mqs-plans-heading h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.mqs-plans-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.45;
}

.mqs-value-anchor-classic,
.mqs-value-anchor-mqp {
    padding: 24px 26px;
    border-radius: 18px;
    min-width: 0;
}

.mqs-value-anchor-classic {
    border: 1px solid #deded9;
    background: #ffffff;
}

.mqs-value-anchor-mqp {
    border: 2px solid #bedb52;
    background: #f1f8d2;
}

.mqs-value-anchor-label,
.mqs-value-anchor-brand,
.mqs-value-anchor-offer {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mqs-value-anchor-label {
    margin: 0 0 8px;
    color: #6f6f6b;
}

.mqs-value-anchor h3 {
    margin: 0 0 14px;
    font-size: 1.08rem;
}

.mqs-value-anchor-line,
.mqs-value-anchor-total {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 6px 0;
    font-size: 0.82rem;
}

.mqs-value-anchor-total {
    margin-top: 7px;
    padding-top: 12px;
    border-top: 1px solid #deded9;
}

.mqs-value-anchor small {
    display: block;
    margin-top: 10px;
    color: #6f6f6b;
    font-size: 0.75rem;
    line-height: 1.4;
}

.mqs-value-anchor-brand,
.mqs-value-anchor-offer {
    display: block;
    color: #4c6500;
}

.mqs-value-anchor-offer {
    margin-top: 9px;
    color: #65752c;
}

.mqs-value-anchor-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 10px 0 2px;
}

.mqs-value-anchor-price s {
    color: #81856e;
    font-size: 1.1rem;
}

.mqs-value-anchor-price strong {
    color: #263500;
    font-size: 3.4rem;
    line-height: 1;
}

.mqs-value-anchor-mqp p {
    margin: 8px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.mqs-plan-cta:hover {
    background: #1a1a1a;
}

.mqs-value-block {
    margin-top: 2px;
    padding: 22px 24px;
    border: 1px solid #dedfe3;
    border-radius: 20px;
    background: #ffffff;
}

.mqs-value-intro {
    margin: -3px 0 18px;
    color: #6f6f6c;
    font-size: 0.8rem;
    line-height: 1.5;
}

.mqs-value-grid a {
    color: inherit;
    font-weight: 700;
}

.mqs-installation-highlight {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 680px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border: 1px solid #cee68c;
    border-radius: 12px;
    background: #f5ffd7;
    color: #26320a;
    text-align: left;
}

.mqs-installation-highlight-icon {
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #26320a;
    color: #d4ff3a;
    font-size: 0.68rem;
    font-weight: 800;
}

.mqs-installation-highlight strong,
.mqs-installation-highlight small {
    display: block;
}

.mqs-installation-highlight strong {
    font-size: 0.75rem;
    line-height: 1.35;
}

.mqs-installation-highlight small {
    margin-top: 2px;
    color: #536020;
    font-size: 0.65rem;
    line-height: 1.4;
}

.mqs-value-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    font-size: 0.88rem;
    font-weight: 700;
}

.mqs-value-heading strong {
    padding: 5px 9px;
    border-radius: 999px;
    background: #efffba;
    color: #26320a;
    font-size: 0.74rem;
}

.mqs-value-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.mqs-value-grid > span {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    column-gap: 7px;
}

.mqs-value-installation {
    padding-right: 12px;
    border-right: 1px solid #e5e7eb;
}

.mqs-value-grid b {
    grid-row: 1 / 3;
    color: #4c6500;
}

.mqs-value-grid strong {
    font-size: 0.8rem;
    line-height: 1.3;
}

.mqs-value-grid small {
    margin-top: 3px;
    color: #7b8089;
    font-size: 0.74rem;
    line-height: 1.45;
}

.mqs-plan-trust {
    margin-top: 10px !important;
}

/* === Features list — compacte === */
.mqs-plan-features {
    list-style: none;
    padding: 12px 0 0;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex: 1;
}

.mqs-plan-popular .mqs-plan-features {
    border-top-color: rgba(0, 0, 0, 0.12);
}

.mqs-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.76rem;
    color: #4b5563;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.mqs-plan-features li:last-child {
    margin-bottom: 0;
}

.mqs-plan-features li svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    stroke: #6b7280;
    stroke-width: 2.5;
    fill: none;
}

.mqs-plan-popular .mqs-plan-features li {
    color: #1a1a1a;
}

.mqs-plan-popular .mqs-plan-features li svg {
    stroke: #0a0a0a;
}

/* === Footer / Trust line — compact === */
.mqs-modal-footer {
    text-align: center;
}

.mqs-trust {
    color: #9ca3af;
    font-size: 0.72rem;
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.005em;
}

.mqs-trust strong {
    color: #4b5563;
    font-weight: 600;
}

/* =============================================================================
   STEP B — Choix du domaine (suggestions list + custom input + footer)
   ============================================================================= */

.mqs-domain-list {
    /* Fenêtre scrollable interne : 3 rows visibles max, scroll vertical pour
       le reste. Évite la croissance verticale de la modale (= plus de scroll
       global, le bouton « Continuer » reste visible sans avoir à scroller la
       modale entière). 3 plutôt que 4 : sur la plupart des mobiles, l'étape
       tient alors dans l'écran sans scroll du tout.
       Le liseré et le fond légèrement creusé signalent que cette zone défile
       indépendamment de la page — sans eux, on ne comprend pas pourquoi seuls
       les domaines bougent sous le doigt. */
    --mqs-domain-row-h: 50px;       /* hauteur approx d'1 row (padding 14×2 + texte) */
    --mqs-domain-list-gap: 6px;
    max-height: calc(var(--mqs-domain-row-h) * 3 + var(--mqs-domain-list-gap) * 2);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 0 14px 0;
    padding: 8px;
    border: 1px solid #e4e4df;
    border-radius: 12px;
    background: #fafaf8;
    display: flex;
    flex-direction: column;
    gap: var(--mqs-domain-list-gap);
    /* Scrollbar discrète (Chromium/Edge/Safari) */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.mqs-domain-section {
    margin-bottom: 18px;
}

.mqs-domain-section-title {
    margin: 0 0 9px;
    color: #111318;
    font-size: 0.86rem;
    font-weight: 750;
}

.mqs-domain-section-help {
    margin: -3px 0 10px;
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.45;
}

.mqs-domain-custom-section {
    padding-top: 17px;
    border-top: 1px solid #dedfe3;
}
.mqs-domain-list::-webkit-scrollbar {
    width: 6px;
}
.mqs-domain-list::-webkit-scrollbar-track {
    background: transparent;
}
.mqs-domain-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}
.mqs-domain-list::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.mqs-domain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mqs-domain-row:hover {
    border-color: #c5c7cc;
    background: #fafafa;
}

.mqs-domain-row.mqs-domain-selected {
    border-color: #0a0a0a;
    border-width: 2px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    padding: 13px 17px; /* compense la border 2px */
}

.mqs-domain-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mqs-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}

.mqs-badge-offert {
    background: #eaf7c2;
    color: #33420a;
}

.mqs-badge-supplement {
    background: #fef3c7;
    color: #92400e;
}

/* Domaine déjà pris (gris, non-cliquable) */
.mqs-badge-pris {
    background: #f3f4f6;
    color: #6b7280;
}

/* Domaine en cours de vérification (spinner + texte) */
.mqs-badge-pending {
    background: #f4f4f5;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mqs-mini-spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid #d1d5db;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: mqs-spin-mini 0.8s linear infinite;
    display: inline-block;
}

@keyframes mqs-spin-mini {
    to { transform: rotate(360deg); }
}

/* Row d'un domaine déjà pris : opacité réduite, non-cliquable */
.mqs-domain-row.mqs-domain-taken {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fafafa;
}
.mqs-domain-row.mqs-domain-taken:hover {
    background: #fafafa;
    border-color: var(--mqs-border, #e5e7eb);
    transform: none;
}
.mqs-domain-row.mqs-domain-taken .mqs-domain-name {
    text-decoration: line-through;
    color: #9ca3af;
}

/* Row en attente du check OVH : visuel neutre */
.mqs-domain-row.mqs-domain-pending {
    cursor: progress;
}
.mqs-domain-row.mqs-domain-pending:hover {
    transform: none;
}

/* === Skeleton loading rows === */
.mqs-domain-row.mqs-skeleton {
    pointer-events: none;
    cursor: default;
    background: #f9fafb;
    border-color: #f3f4f6;
}

.mqs-skel-text, .mqs-skel-badge {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: mqs-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}
.mqs-skel-text { height: 14px; width: 60%; }
.mqs-skel-badge { height: 22px; width: 70px; border-radius: 999px; }

@keyframes mqs-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Divider "ou" === */
.mqs-domain-divider {
    text-align: center;
    color: #9ca3af;
    font-size: 0.78rem;
    margin: 16px 0;
    position: relative;
}

.mqs-domain-divider::before,
.mqs-domain-divider::after {
    content: '';
    display: inline-block;
    width: 38%;
    height: 1px;
    background: #e5e7eb;
    vertical-align: middle;
    margin: 0 12px;
}

/* === Custom input block (volet collapsible) === */
.mqs-custom-block {
    margin-bottom: 0;
    background: #fafafa;
    border: 1px dashed #d4d4d8;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.mqs-custom-block[open] {
    background: #ffffff;
    border-color: #0a0a0a;
    border-style: solid;
}

.mqs-custom-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #4b5563;
    letter-spacing: -0.005em;
    user-select: none;
    transition: color 0.15s ease;
}
.mqs-custom-toggle::-webkit-details-marker { display: none; }
.mqs-custom-toggle:hover {
    color: #0a0a0a;
}
.mqs-custom-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.mqs-custom-block[open] .mqs-custom-toggle-icon {
    transform: rotate(45deg);
}
.mqs-custom-toggle-label {
    flex: 1;
}
.mqs-custom-content {
    padding: 0 16px 16px;
    animation: mqsCustomReveal 0.25s ease;
}
@keyframes mqsCustomReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Legacy class — conservée au cas où */
.mqs-custom-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}

.mqs-custom-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.mqs-custom-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mqs-custom-input:focus {
    outline: 0;
    border-color: #0a0a0a;
}

.mqs-custom-tld {
    padding: 12px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0a0a0a;
    cursor: pointer;
}

.mqs-btn-check {
    background: #ffffff;
    color: #0a0a0a;
    border: 1.5px solid #0a0a0a;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.mqs-btn-check:hover {
    background: #f3f4f6;
}

.mqs-btn-check:disabled {
    opacity: 0.6;
    cursor: progress;
}

.mqs-custom-result {
    margin-top: 10px;
}

.mqs-custom-error {
    color: #dc2626;
    font-size: 0.82rem;
    margin: 0;
}

.mqs-empty-state {
    color: #6b7280;
    font-size: 0.9rem;
    text-align: center;
    padding: 30px 12px;
    margin: 0;
}

/* === Footer Step B / Step C : back + continue === */
.mqs-footer-stepb,
.mqs-footer-stepc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.mqs-btn-back {
    background: transparent;
    border: 0;
    color: #6b7280;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
}

.mqs-btn-back:hover {
    color: #0a0a0a;
    background: rgba(0, 0, 0, 0.04);
}

.mqs-btn-continue {
    background: #0a0a0a;
    color: #ffffff;
    border: 0;
    padding: 13px 28px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.mqs-btn-continue:hover:not(:disabled) {
    background: #1a1a1a;
    transform: translateY(-1px);
}

.mqs-btn-continue:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === Footer étape 1 (domaine) : bouton unique « Voir les tarifs », aligné à droite === */
.mqs-footer-solo {
    justify-content: flex-end;
}

/* === Rappel du domaine choisi, en tête de l'étape formule === */
.mqs-step-domain-note {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: #4b5563;
}

.mqs-step-domain-note strong {
    color: #0a0a0a;
}

@media (max-width: 600px) {
    .mqs-footer-stepb,
    .mqs-footer-stepc {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .mqs-btn-continue {
        width: 100%;
    }
    .mqs-btn-back {
        width: 100%;
    }
    .mqs-custom-input-row {
        flex-wrap: wrap;
    }
    .mqs-custom-input {
        flex-basis: calc(70% - 4px);
    }
    .mqs-custom-tld {
        flex-basis: calc(30% - 4px);
    }
    .mqs-btn-check {
        flex-basis: 100%;
        order: 3;
    }
}

/* =============================================================================
   STEP C — décision de paiement
   ============================================================================= */

.mqs-payment-header {
    margin-bottom: 18px;
}

.mqs-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 14px;
    align-items: stretch;
}

.mqs-order-card,
.mqs-checkout-card {
    border-radius: 18px;
    padding: 22px;
}

.mqs-order-card {
    background: #111318;
    color: #ffffff;
    box-shadow: 0 16px 35px rgba(17, 19, 24, 0.16);
}

.mqs-order-topline,
.mqs-order-price-line,
.mqs-order-total,
.mqs-checkout-heading,
.mqs-founder-trust {
    display: flex;
    align-items: center;
}

.mqs-order-topline {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mqs-order-kicker {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mqs-order-popular {
    padding: 5px 9px;
    border-radius: 999px;
    background: #d4ff3a;
    color: #111318;
    font-size: 0.65rem;
    font-weight: 800;
    /* Flex item : le texte passait à la ligne dans la pastille et se calait à
       gauche. Insécable + centré pour qu'il reste bien au milieu. */
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
}

/* Montant du bouton de paiement : insécable, pour ne jamais séparer le nombre
   de son symbole € (cf. le <br> posé avant, dans pricing-modal.js). */
.mqs-payment-cta-amount {
    white-space: nowrap;
}

.mqs-order-price-line {
    align-items: flex-end;
    gap: 8px;
}

.mqs-order-price {
    font-size: clamp(2.55rem, 5vw, 3.65rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.mqs-order-period {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.mqs-order-commitment {
    margin: 10px 0 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

.mqs-order-saving {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    line-height: 1.5;
}

.mqs-order-saving strong {
    color: #d4ff3a;
}

.mqs-order-domain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.mqs-order-style {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid #e7e2d9;
  border-radius: 10px;
  background: #fbfaf7;
}

.mqs-order-style > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.mqs-order-style small {
  color: #777;
  font-size: 10px;
}

.mqs-order-style strong {
  color: #181818;
  font-size: 13px;
}

.mqs-order-style a {
  color: #555;
  font-size: 10px;
  font-weight: 600;
  text-decoration: underline;
}

.mqs-order-style-swatch {
  width: 38px;
  height: 30px;
  border-radius: 6px;
  background: #e8ddcb;
}

.mqs-order-style-contrast { background: linear-gradient(112deg, #111 0 58%, #ee6e60 58%); }
.mqs-order-style-drama { background: linear-gradient(135deg, #080808, #5b4929); }

.mqs-order-domain-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #d4ff3a;
    color: #111318;
    font-size: 0.62rem;
    font-weight: 800;
}

.mqs-order-domain small,
.mqs-order-domain strong {
    display: block;
    min-width: 0;
}

.mqs-order-domain small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.64rem;
}

.mqs-order-domain strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mqs-order-included {
    color: #d4ff3a;
    font-size: 0.68rem;
    font-weight: 700;
}

.mqs-order-includes {
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.mqs-order-includes li {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.75rem;
}

.mqs-order-includes li span {
    color: #d4ff3a;
    font-weight: 800;
}

.mqs-order-includes li > span:last-child {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 400;
}

.mqs-order-includes li a {
    color: #d4ff3a;
    font-weight: 700;
    text-underline-offset: 2px;
}

.mqs-order-installation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(212, 255, 58, 0.28);
    border-radius: 10px;
    background: rgba(212, 255, 58, 0.08);
}

.mqs-order-installation-discount {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 7px;
    background: #d4ff3a;
    color: #111318;
    font-size: 0.65rem;
    font-weight: 800;
}

.mqs-order-installation > span,
.mqs-order-installation > span strong,
.mqs-order-installation small {
    display: block;
}

.mqs-order-installation > span strong {
    color: #ffffff;
    font-size: 0.72rem;
}

.mqs-order-installation small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.59rem;
    line-height: 1.35;
}

.mqs-order-installation > strong {
    flex: 0 0 auto;
    color: #d4ff3a;
    font-size: 1.05rem;
}

.mqs-order-installation-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.mqs-order-installation-price s {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
}

.mqs-order-installation-price strong {
    color: #cdf24d;
    font-size: 1.2rem;
}

.mqs-order-launch-note {
    margin: -5px 0 14px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.64rem;
    line-height: 1.45;
}

.mqs-order-total {
    justify-content: space-between;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
}

.mqs-order-total-wrap .mqs-order-total + .mqs-order-total {
    margin-top: 8px;
}

.mqs-order-total-wrap {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mqs-order-total-wrap .mqs-order-total {
    padding-top: 0;
    border-top: 0;
}

.mqs-order-total-wrap small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62rem;
    line-height: 1.35;
}

.mqs-order-total span {
    color: rgba(255, 255, 255, 0.58);
}

.mqs-order-total strong {
    font-size: 1rem;
}

.mqs-checkout-card {
    background: #ffffff;
    border: 1px solid #dedfe3;
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06);
}

.mqs-checkout-heading {
    gap: 10px;
    margin-bottom: 20px;
}

.mqs-checkout-heading > span:last-child,
.mqs-checkout-heading strong,
.mqs-checkout-heading small {
    display: block;
}

.mqs-checkout-heading strong {
    font-size: 0.9rem;
}

.mqs-checkout-heading small {
    margin-top: 2px;
    color: #7b8089;
    font-size: 0.69rem;
}

.mqs-checkout-lock {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #efffba;
}

.mqs-checkout-lock svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #111318;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mqs-email-block {
    margin-bottom: 14px;
}

.mqs-email-input {
    width: 100%;
    min-height: 46px;
}

.mqs-email-help {
    margin: 6px 0 0;
    color: #8a8f98;
    font-size: 0.66rem;
    line-height: 1.4;
}

.mqs-cgv-block {
    margin-bottom: 14px;
    padding: 11px 12px;
    background: #f7f7f8;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.mqs-cgv-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.mqs-cgv-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    cursor: pointer;
    accent-color: #0a0a0a;
}

.mqs-cgv-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4b5563;
    letter-spacing: -0.005em;
}

.mqs-cgv-link {
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.mqs-cgv-link:hover {
    color: #1a1a1a;
}

.mqs-payment-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 13px 17px;
    border: 0;
    border-radius: 11px;
    background: #cdf24d;
    color: #0b0b0b;
    box-shadow: 0 8px 20px rgba(17, 19, 24, 0.2);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.mqs-payment-cta:hover:not(:disabled) {
    background: #dcff6b;
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(17, 19, 24, 0.25);
}

.mqs-payment-cta:disabled {
    background: #d8d8d5;
    color: #8a8a87;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

.mqs-payment-fineprint {
    margin: 8px 0 0;
    color: #8a8f98;
    font-size: 0.64rem;
    text-align: center;
}

.mqs-checkout-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fff1f2;
    color: #9f1239;
    font-size: 0.75rem;
    line-height: 1.45;
}

.mqs-founder-trust {
    gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #dedfe3;
    border-radius: 14px;
    background: #ffffff;
}

.mqs-founder-mark {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #111318;
    color: #d4ff3a;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mqs-founder-copy {
    flex: 1;
    min-width: 0;
}

.mqs-founder-copy strong,
.mqs-founder-copy span,
.mqs-founder-legal span,
.mqs-founder-legal a {
    display: block;
}

.mqs-founder-copy strong {
    margin-bottom: 3px;
    font-size: 0.78rem;
}

.mqs-founder-copy span,
.mqs-founder-legal {
    color: #747982;
    font-size: 0.68rem;
    line-height: 1.45;
}

.mqs-founder-copy a,
.mqs-founder-legal a {
    color: #111318;
    font-weight: 650;
    text-decoration: none;
}

.mqs-founder-legal {
    flex: 0 0 auto;
    padding-left: 14px;
    border-left: 1px solid #e5e7eb;
    text-align: right;
}

.mqs-founder-legal a {
    margin-top: 3px;
}

.mqs-payment-back {
    margin-top: 5px;
    padding-left: 0;
}

@media (max-width: 700px) {
    #mqs-modal {
        padding: 34px 18px 20px;
    }
    .mqs-funnel-tabs {
        margin: 0 auto 20px;
    }
    .mqs-funnel-tabs button {
        padding: 8px 11px;
        font-size: 0.68rem;
    }
    .mqs-value-anchor,
    .mqs-payment-layout {
        grid-template-columns: 1fr;
    }
    .mqs-plan.mqs-plan-popular {
        transform: none;
    }
    .mqs-order-card,
    .mqs-checkout-card {
        padding: 18px;
    }
    .mqs-order-price {
        font-size: 2.65rem;
    }
    .mqs-founder-trust {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .mqs-founder-copy {
        flex-basis: calc(100% - 58px);
    }
    .mqs-founder-legal {
        flex-basis: 100%;
        padding: 10px 0 0 54px;
        border-top: 1px solid #e5e7eb;
        border-left: 0;
        text-align: left;
    }
    .mqs-value-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mqs-value-installation {
        padding-right: 0;
        border-right: 0;
    }
    .mqs-value-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Step 2 exact draft layout */
#mqs-pricing-drawer:has(.mqs-value-anchor) #mqs-modal {
    width: min(760px, 100vw);
    padding: 22px 44px 44px;
    overflow-x: hidden;
    overflow-y: auto;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-funnel-tabs {
    margin-bottom: 22px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-header {
    margin-bottom: 18px;
    text-align: center;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-title {
    max-width: none;
    margin: 10px 0 0;
    font-size: 40px;
    line-height: 1.06;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-sub {
    max-width: none;
    margin: 9px auto 0;
    font-size: 15px;
    white-space: nowrap;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-domain-note {
    margin: 5px auto 0;
    color: #6f6f69;
    font-size: 14px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-domain-note::first-letter {
    text-transform: uppercase;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor {
    margin-bottom: 12px;
    padding: 13px 22px 11px;
    border: 1.5px solid #b8dc2b;
    border-radius: 18px;
    background: #ebf9a9;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor-brand {
    color: #536b18;
    font-size: 11px;
    letter-spacing: .1em;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor > h3 {
    margin: 3px 0 8px;
    font-size: 20px;
    line-height: 1.1;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor-line {
    padding: 3px 0;
    color: #53612e;
    font-size: 14px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor-line strong {
    color: #7d885d;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor-total {
    margin-top: 5px;
    min-height: 0;
    padding: 10px 0 0;
    border-color: rgba(83,107,24,.2);
    font-size: 15px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-launch-price {
    gap: 10px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-launch-price s {
    color: #778359;
    font-size: 18px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-launch-price strong {
    color: #1c2708;
    font-size: 34px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plans-heading {
    margin-bottom: 18px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plans-heading h3 {
    margin-bottom: 8px;
    font-size: 25px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plans-heading p {
    max-width: 650px;
    font-size: 13px;
    line-height: 1.55;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plans {
    gap: 18px;
    padding-top: 0;
    margin-bottom: 0;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan {
    display: grid;
    grid-template-rows: 34px 50px 38px 68px 58px 44px;
    min-height: 0;
    padding: 24px 20px 20px;
    border: 1px solid #dddeda;
    border-radius: 15px;
    background: #fff;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan.mqs-plan-popular {
    margin-top: 0;
    border: 2px solid #b7d73e;
    background: #f5ffd2;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-heading {
    display: flex;
    flex-direction: row;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-title {
    max-width: 62%;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-title-flex {
    font-size: 15px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-eyebrow {
    flex-shrink: 0;
    padding: 5px 8px;
    background: #e9e9e4;
    color: #85857d;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .035em;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-popular .mqs-plan-eyebrow {
    background: #d9f24e;
    color: #263500;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-price-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    margin-bottom: 0;
    line-height: 1;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-price {
    font-size: 34px !important;
    line-height: 1;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-discount {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #d9f24e;
    color: #263500;
    box-shadow: none;
    font-size: 12px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-discount-placeholder {
    display: none;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-period {
    margin: 0;
    color: #9a9a94;
    font-size: 11px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-offer {
    align-self: start;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-freedom {
    background: #f0f0ed;
    color: #666760;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-flex-status {
    align-self: start;
    width: 100%;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #e4e4df;
    color: #506d18;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-description {
    align-self: start;
    margin: 0;
    color: #77776f;
    font-size: 12px;
    line-height: 1.5;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-cta {
    min-height: 42px;
    align-self: end;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #d7d7d2;
    border-radius: 11px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-cta:hover {
    background: #242424;
    color: #fff;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-popular .mqs-plan-cta {
    background: #0a0a0a;
    color: #fff;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plans-footnote {
    margin: 16px 0 0;
    color: #999a93;
    font-size: 10px;
}

#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan-popular .mqs-plan-cta:hover {
    background: #242424;
}

@media (max-width: 700px) {
    #mqs-pricing-drawer:has(.mqs-value-anchor) #mqs-modal { padding: 20px 20px 32px; }
    #mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-title { font-size: 30px; }
    #mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor { padding: 12px 15px; }
    #mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor-total { align-items: flex-end; }
    #mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-plan { min-height: 0; }
}

.mqs-order-style {
    grid-template-columns: 1fr auto;
}

/* Step 3 exact draft layout */
#mqs-pricing-drawer:has(.mqs-payment-layout) #mqs-modal {
    width: min(760px, 100vw);
    padding: 22px 46px 18px;
}

.mqs-payment-header {
    margin-bottom: 26px;
}

.mqs-payment-header .mqs-step-title {
    margin-top: 14px;
}

.mqs-payment-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.mqs-order-card,
.mqs-checkout-card {
    min-height: 596px;
    padding: 24px;
    border-radius: 18px;
}

.mqs-order-card {
    display: flex;
    flex-direction: column;
    background: #0f0f0f;
    box-shadow: none;
}

.mqs-order-topline {
    margin-bottom: 22px;
}

.mqs-order-kicker {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    letter-spacing: .1em;
}

.mqs-order-popular {
    padding: 5px 11px;
    background: #d9f24e;
    color: #24310a;
    font-size: 11px;
}

.mqs-order-price-line {
    align-items: baseline;
    gap: 10px;
    margin-bottom: 24px;
}

.mqs-order-price {
    font-size: 42px;
    letter-spacing: -.035em;
}

.mqs-order-period {
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    white-space: nowrap;
}

.mqs-order-commitment,
.mqs-order-saving {
    display: none;
}

.mqs-order-domain {
    gap: 12px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: #171717;
}

.mqs-order-domain-icon {
    width: 34px;
    height: 34px;
    background: #d9f24e;
    color: #24310a;
    font-size: 11px;
}

.mqs-order-domain small {
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.mqs-order-domain strong {
    font-size: 15px;
}

.mqs-order-included {
    color: #d9f24e;
    font-size: 13px;
}

.mqs-order-includes {
    margin: 18px 0;
}

.mqs-order-includes li {
    margin: 10px 0;
    color: rgba(255,255,255,.84);
    font-size: 14px;
}

.mqs-order-includes li span {
    color: #d9f24e;
}

.mqs-order-installation {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: #171717;
}

.mqs-order-installation > span strong {
    font-size: 14px;
}

.mqs-order-installation small {
    color: rgba(255,255,255,.45);
    font-size: 12px;
}

.mqs-order-installation-price strong {
    color: #d9f24e;
    font-size: 20px;
}

.mqs-order-total-wrap {
    margin-top: auto;
    padding-top: 16px;
}

.mqs-order-total-wrap .mqs-order-total {
    margin: 0;
    font-size: 14px;
}

.mqs-order-total-wrap .mqs-order-total + .mqs-order-total {
    margin-top: 12px;
}

.mqs-order-total span {
    color: rgba(255,255,255,.62);
}

.mqs-order-total strong {
    font-size: 14px;
}

.mqs-order-total-wrap small {
    margin-top: 14px;
    color: rgba(255,255,255,.42);
    font-size: 12px;
    line-height: 1.4;
}

.mqs-checkout-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e6e0;
    box-shadow: none;
}

.mqs-checkout-heading {
    gap: 12px;
    margin-bottom: 24px;
}

.mqs-checkout-lock {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #f0f5d6;
    color: #596d16;
    font-size: 17px;
}

.mqs-checkout-heading strong {
    color: #0a0a0a;
    font-size: 16px;
}

.mqs-checkout-heading small {
    color: #8a8a84;
    font-size: 13px;
    line-height: 1.35;
}

.mqs-email-block {
    margin-bottom: 22px;
}

.mqs-email-block .mqs-custom-label {
    margin-bottom: 8px;
    color: #3a3a34;
    font-size: 13px;
    font-weight: 700;
}

.mqs-email-input {
    min-height: 54px;
    padding: 15px 16px;
    border-color: #d8d8d2;
    border-radius: 12px;
    font-size: 15px;
}

.mqs-email-help {
    margin-top: 8px;
    color: #9a9a94;
    font-size: 12px;
}

.mqs-cgv-block {
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    background: transparent;
}

.mqs-cgv-label {
    gap: 10px;
}

.mqs-cgv-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #46660a;
}

.mqs-cgv-text {
    color: #4a4a44;
    font-size: 13px;
    line-height: 1.45;
}

.mqs-cgv-link {
    color: #46660a;
}

.mqs-first-month-note {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    line-height: 1.5;
}

.mqs-first-month-note strong {
    color: rgba(255, 255, 255, .82);
}

.mqs-first-month-note a {
    display: inline-block;
    margin-left: 3px;
    color: #d4ff3a;
    font-weight: 700;
    text-underline-offset: 2px;
}

.mqs-checkout-faq {
    margin: -12px 0 24px;
    border-bottom: 1px solid #e1e1db;
}

.mqs-checkout-faq details {
    border-top: 1px solid #e1e1db;
}

.mqs-checkout-faq summary {
    padding: 14px 0;
    color: #25251f;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.mqs-checkout-faq details div {
    padding: 0 0 14px;
    color: #64645d;
    font-size: 11px;
    line-height: 1.5;
}

.mqs-checkout-faq p {
    margin: 0 0 9px;
}

.mqs-checkout-faq a {
    color: #46660a;
}

.mqs-checkout-faq-all {
    display: inline-block;
    padding: 14px 0;
    font-size: 12px;
    font-weight: 700;
}

.mqs-payment-cta {
    min-height: 74px;
    margin-top: 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: #0f0f0f;
    color: #fff;
    box-shadow: none;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
}

.mqs-payment-cta:hover:not(:disabled) {
    background: #0f0f0f;
    box-shadow: none;
}

.mqs-payment-cta:disabled {
    background: #0f0f0f;
    color: #fff;
    opacity: 1;
}

.mqs-payment-fineprint {
    margin-top: 14px;
    color: #9a9a94;
    font-size: 12px;
    line-height: 1.5;
}

.mqs-payment-back {
    display: block;
    width: auto;
    margin: 22px auto 0;
    color: #6a6a64;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 700px) {
    #mqs-pricing-drawer:has(.mqs-payment-layout) #mqs-modal { padding: 20px; }
    .mqs-payment-layout { grid-template-columns: 1fr; }
    .mqs-order-card, .mqs-checkout-card { min-height: auto; }
}

@media (max-width: 980px) and (min-width: 701px) {
    .mqs-plan {
        padding: 18px;
    }
    .mqs-plan-price {
        font-size: 2rem;
    }
    .mqs-plan-title {
        max-width: none;
    }
}

@media (max-width: 980px) {
    #mqs-pricing-drawer {
        align-items: flex-end;
    }
    #mqs-pricing-drawer #mqs-modal {
        width: 100%;
        height: min(88dvh, 920px);
        margin: 0;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -24px 70px -28px rgba(0, 0, 0, 0.5);
    }
    #mqs-pricing-drawer.mqs-modal-open #mqs-modal {
        transform: translateY(0);
    }
    #mqs-pricing-drawer #mqs-modal::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        margin: -20px auto 16px;
        border-radius: 999px;
        background: #c7c7c3;
    }
    #mqs-pricing-drawer #mqs-modal-close {
        margin: -17px -10px 0 0;
    }
}

@media (max-width: 420px) {
    .mqs-value-grid {
        grid-template-columns: 1fr;
    }
    .mqs-installation-highlight {
        width: 100%;
    }
    .mqs-value-anchor {
        padding: 20px 18px;
    }
    .mqs-value-anchor-discount {
        top: 18px;
        right: 16px;
    }
    .mqs-value-anchor > h3 {
        margin-right: 0;
        padding-top: 24px;
    }
}

/* Studio Eclat Checkout draft parity */
#mqs-pricing-drawer #mqs-modal {
    width: min(760px, 100vw);
    height: 100dvh;
    margin: 0;
    padding: 22px 44px 44px;
    border: 0;
    border-radius: 0;
    background: #f4f4f2;
}

#mqs-pricing-drawer #mqs-modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    margin: 0;
    width: 40px;
    height: 40px;
    background: #e4e4df;
}

.mqs-funnel-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: 0 auto 22px;
    padding: 5px;
    background: #ecece8;
}

.mqs-funnel-tabs button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
}

.mqs-step-header { margin-bottom: 30px; }
.mqs-step-eyebrow { color: #9a9a94; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.mqs-step-title { margin-top: 10px; font-size: 40px; line-height: 1.06; }
.mqs-step-sub { margin-top: 12px; color: #7a7a74; font-size: 16px; }
.mqs-domain-offer-note { margin: 8px 0 0; color: #46660a; font-size: 14px; font-weight: 700; }
.mqs-domain-offer-note s { color: #9a9a94; font-weight: 600; }

.mqs-domain-section { margin-bottom: 30px; }
.mqs-domain-section-title { margin-bottom: 14px; font-size: 15px; font-weight: 800; }
.mqs-domain-section-help { margin-top: -10px; color: #8a8a84; font-size: 14px; }
/* 3 rows visibles (et non 4) : l'étape gagne une rangée de hauteur et tient
   dans l'écran sans scroll sur la plupart des mobiles. */
.mqs-domain-list { --mqs-domain-row-h: 66px; --mqs-domain-list-gap: 12px; max-height: calc(var(--mqs-domain-row-h) * 3 + var(--mqs-domain-list-gap) * 2); }
.mqs-domain-row { padding: 20px 22px; border-radius: 14px; }
.mqs-domain-row.mqs-domain-selected { padding: 19px 21px; }
.mqs-domain-name { font-size: 17px; font-weight: 600; }
.mqs-badge { font-size: 13px; }
.mqs-badge-offert { background: #e6f4ac; color: #46660a; }
.mqs-custom-block { border-radius: 14px; }
.mqs-custom-toggle { padding: 20px; font-size: 16px; font-weight: 600; }
.mqs-custom-toggle-icon { width: 34px; height: 34px; }
.mqs-footer-stepb {
    position: sticky;
    bottom: -44px;
    z-index: 7;
    margin: 24px -44px -44px;
    padding: 16px 44px;
    border-top: 1px solid #e4e4df;
    background: #f4f4f2;
}

.mqs-value-anchor {
    margin: 0 0 12px;
    padding: 13px 22px 11px;
    border: 1.5px solid #cbe15f;
    border-radius: 18px;
    background: #e9f6b3;
    color: #1c2708;
}
.mqs-value-anchor-discount { display: none; }
.mqs-value-anchor > h3 { margin: 3px 0 8px; font-size: 20px; }
.mqs-value-anchor-line { padding: 3px 0; color: #3a4a1c; font-size: 14px; }
.mqs-value-anchor-line strong { color: #7a8a5a; font-weight: 500; text-decoration: line-through; }
.mqs-value-anchor-total { align-items: center; min-height: 0; margin-top: 5px; padding: 10px 0 0; border-color: rgba(70,102,10,.25); font-size: 15px; font-weight: 800; }
.mqs-launch-price strong { font-size: 34px; color: #1c2708; }
.mqs-launch-price s { color: #7a8a5a; font-size: 18px; font-weight: 700; }
.mqs-launch-price { flex-shrink: 0; white-space: nowrap; }

.mqs-plans-heading { margin-bottom: 7px; }
.mqs-plans-heading h3 { font-size: 22px; }
.mqs-plans-heading p { color: #7a7a74; font-size: 14px; }
.mqs-plans-heading p strong { color: #4a4a44; font-weight: 500; }
.mqs-plans { gap: 18px; padding-top: 0; }
.mqs-plan {
    padding: 24px 20px 20px;
    border-radius: 16px;
    grid-template-rows: 34px 50px 38px 68px 58px 44px;
}
.mqs-plan.mqs-plan-popular { background: #f7f9e9; border: 2px solid #0a0a0a; box-shadow: none; }
.mqs-plan-title { max-width: 62%; font-size: 16px; line-height: 1.2; font-weight: 800; }
.mqs-plan-eyebrow { padding: 5px 8px; font-size: 8px; letter-spacing: .035em; }
.mqs-plan-price { font-size: 34px !important; }
.mqs-plan-discount { background: #0a0a0a; color: #d9f24e; }
.mqs-plan-reference { font-size: 12px; }
.mqs-plan-saving { width: fit-content; padding: 7px 9px; border: 1px solid #dcebae; border-radius: 9px; background: #f2f8df; font-size: 11px; }
.mqs-plan-description { color: #6a6a64; font-size: 12px; }
.mqs-plan-cta { min-height: 44px; padding: 11px 8px; border-radius: 10px; font-size: 12px; }

.mqs-payment-layout { margin-top: 26px; grid-template-columns: 1.05fr 1fr; gap: 16px; }
.mqs-order-card, .mqs-checkout-card { padding: 24px; border-radius: 18px; }
.mqs-order-card { background: #0f0f0f; }
.mqs-order-price { font-size: 42px; }
.mqs-payment-cta { background: #d9f24e; }

@media (max-width: 980px) {
    #mqs-pricing-drawer #mqs-modal {
        width: 100%; height: 100dvh; margin: 0; border-radius: 0;
        transform: translateX(100%);
    }
    #mqs-pricing-drawer.mqs-modal-open #mqs-modal { transform: translateX(0); }
    #mqs-pricing-drawer #mqs-modal::before { display: none; }
}

@media (max-width: 700px) {
    #mqs-pricing-drawer #mqs-modal { padding: 20px 20px 32px; }
    .mqs-funnel-tabs button { padding: 8px 10px; font-size: 11px; }

    /* Le stepper reste CENTRÉ. Pour qu'il ne puisse jamais passer sous la croix,
       on borne sa largeur : centré, une largeur de `100% - 2 × marge` garantit
       que ses deux bords s'arrêtent avant elle, quelle que soit la taille de
       l'écran. S'il ne tient pas, il défile latéralement plutôt que de passer à
       la ligne — sinon on perdrait de la hauteur, ce qu'on veut éviter ici. */
    .mqs-funnel-tabs {
        width: fit-content;
        max-width: calc(100% - 56px);
        margin-left: auto;
        margin-right: auto;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .mqs-funnel-tabs::-webkit-scrollbar { display: none; }
    .mqs-funnel-tabs button { flex: 0 0 auto; white-space: nowrap; padding: 8px 8px; font-size: 10.5px; }

    /* Croix discrète : pas de pastille grise, juste le trait. Resserrée contre
       le bord pour laisser le maximum de place au stepper recentré. */
    #mqs-pricing-drawer #mqs-modal-close {
        top: 27px;
        right: 2px;
        width: 26px;
        height: 26px;
        background: transparent;
        color: #b0b0ab;
    }
    #mqs-pricing-drawer #mqs-modal-close:hover,
    #mqs-pricing-drawer #mqs-modal-close:active {
        background: rgba(0, 0, 0, .06);
        color: #6b7280;
    }

    /* Les slugs de salon donnent des domaines très longs
       (agen-hairdressers-coiffeur-prive.fr) : on resserre la ligne pour en
       montrer le plus possible avant l'ellipse. */
    .mqs-domain-row { padding: 16px 16px; }
    .mqs-domain-row.mqs-domain-selected { padding: 15px 15px; }
    .mqs-domain-name { font-size: 15px; }
    .mqs-badge { font-size: 12px; padding: 5px 10px; }
    .mqs-step-title { font-size: 30px; }
    .mqs-step-sub { font-size: 14px; }
    #mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-step-sub { white-space: normal; }
    .mqs-plans, .mqs-payment-layout { grid-template-columns: 1fr; }
    .mqs-footer-stepb { bottom: -32px; margin: 22px -20px -32px; padding: 14px 20px; }
    .mqs-value-anchor-total { gap: 12px; }
    .mqs-launch-price { gap: 8px; }
    .mqs-launch-price strong { font-size: 36px; }
    .mqs-launch-price s { font-size: 18px; }
}

/* =============================================================================
   ÉTAPE 2 — options de formule (ligne à deux niveaux)
   Le prix domine, la durée et le rang commercial passent en 2e ligne, la remise
   en pastille à droite. Deux niveaux plutôt qu'un seul : en 320 px, tout aligner
   obligerait à rapetisser le prix — or c'est lui qu'on vient lire.
   ============================================================================= */
.mqs-plan-options {
    display: grid;
    gap: 10px;
}

.mqs-plan-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mqs-plan-option:hover { border-color: #c5c7cc; background: #fafafa; }
.mqs-plan-option.is-selected { border-color: #0a0a0a; border-width: 2px; padding: 13px 15px; }

.mqs-plan-option-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mqs-plan-option-row { display: flex; align-items: baseline; gap: 5px; }
.mqs-plan-option-price { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: #0a0a0a; }
.mqs-plan-option-per { font-size: 13px; font-weight: 500; color: #6b7280; }
.mqs-plan-option-sub {
    font-size: 12px;
    font-weight: 500;
    color: #7a7a74;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Graisse 700 et interlettrage positif : en 800 avec un crénage négatif, les
   deux chiffres de « 66 » se collent et le signe moins vient toucher le
   premier — illisible dans une pastille de cette taille. */
.mqs-plan-off {
    flex: 0 0 auto;
    min-width: 66px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0a0a0a;
    color: #d9f24e;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}
/* Espace fine entre le signe moins et le nombre. */
.mqs-plan-off .mqs-sign { margin-right: 0.12em; }
.mqs-plan-off.is-plain { background: #f1f1ef; color: #5c5c57; font-size: 11px; letter-spacing: 0.03em; }

@media (max-width: 360px) {
    .mqs-plan-option { padding: 13px; }
    .mqs-plan-option.is-selected { padding: 12px; }
    .mqs-plan-off { min-width: 56px; padding: 7px 8px; font-size: 14px; }
    .mqs-plan-off.is-plain { font-size: 10px; }
    .mqs-plan-option-sub { font-size: 11px; }
}

/* Bandeau « installation offerte » ramené à une seule ligne. Il garde la classe
   .mqs-value-anchor, qui sert de sélecteur contextuel « étape 2 » ailleurs dans
   ce fichier — d'où ce modificateur qui écrase l'ancienne mise en forme. */
.mqs-value-anchor.mqs-value-anchor-compact,
#mqs-pricing-drawer:has(.mqs-value-anchor) .mqs-value-anchor.mqs-value-anchor-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 13px 18px;
    border: 1.5px solid #b8dc2b;
    border-radius: 18px;
    background: #ebf9a9;
    text-align: left;
}
.mqs-offer-label { font-size: 13.5px; font-weight: 700; color: #33420a; }
.mqs-offer-price { display: flex; align-items: baseline; gap: 8px; }
.mqs-offer-price s { color: #7d8b53; font-size: 13px; }
.mqs-offer-price strong { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #24310a; }

/* =============================================================================
   ÉTAPE 3 — ticket de caisse
   ============================================================================= */
.mqs-ticket {
    background: #0f0f0f;
    color: #f4f4f2;
    border-radius: 18px;
    padding: 24px;
}
.mqs-ticket-title {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.mqs-ticket-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
}
/* Le libellé passe à la ligne plutôt que d'être coupé : à 320 px,
   « Installation et mise en ligne » ne tient pas, et une ellipse ferait perdre
   l'information au moment précis où le client vérifie ce qu'il paie. */
.mqs-ticket-line > span:first-child { color: rgba(255, 255, 255, 0.72); min-width: 0; line-height: 1.35; }
.mqs-ticket-line strong { flex: 0 0 auto; font-weight: 700; color: #ffffff; }
.mqs-ticket-line s { margin-right: 6px; color: rgba(255, 255, 255, 0.38); font-weight: 400; }

/* Prestations incluses, rattachées à la ligne « Abonnement » qu'elles
   détaillent. Chaque item porte sa coche et reste insécable : ils se
   répartissent sur 2 lignes sans jamais se couper au milieu d'un libellé. */
.mqs-ticket-detail {
    margin: -2px 0 6px;
    padding: 0 0 0 1px;
    list-style: none;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}
.mqs-ticket-detail li { display: inline-block; margin-right: 12px; white-space: nowrap; }
.mqs-ticket-detail li::before {
    content: '✓';
    margin-right: 5px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10.5px;
    font-weight: 700;
}
@media (max-width: 360px) {
    .mqs-ticket { padding: 20px; }
    .mqs-ticket-detail { font-size: 11px; }
    .mqs-ticket-detail li { margin-right: 9px; }
    .mqs-ticket-detail li::before { margin-right: 4px; font-size: 9.5px; }
}

.mqs-ticket-rule { height: 1px; margin: 12px 0; background: rgba(255, 255, 255, 0.14); }

/* Le montant fait face à DEUX lignes (« Total aujourd'hui » + « puis … /mois ») :
   il est donc centré sur leur hauteur, et non calé sur la baseline de la
   première — sinon il paraît remonté. */
.mqs-ticket-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mqs-ticket-total-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mqs-ticket-total-labels > span { font-size: 14px; font-weight: 700; color: #ffffff; }
.mqs-ticket-total-labels > small { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }
.mqs-ticket-total strong {
    flex: 0 0 auto;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #cdf24d;
}

.mqs-ticket-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.62);
}

/* =============================================================================
   ÉTAPE 3 — barre de paiement collante
   Le bouton sort de la carte pour rester sous le pouce quelle que soit la
   position de scroll, comme aux étapes 1 et 2. Il reste dans le flux (sticky,
   pas fixed) : il ne peut donc jamais recouvrir le dernier bloc de contenu.
   ============================================================================= */
/* Les trois étapes partagent EXACTEMENT la même barre : action principale et
   bouton de retour au même endroit d'un écran à l'autre, sans aucun décalage. */

/* Sans ça, une barre `sticky` ne descend pas quand le contenu tient déjà dans
   l'écran : elle reste collée à la fin du contenu et laisse un vide en dessous,
   qui laissait voir le site au travers. `margin-top: auto` la pousse en bas. */
#mqs-pricing-drawer #mqs-modal {
    display: flex;
    flex-direction: column;
}
/* Un flex item se comprime par défaut quand le contenu déborde : le bandeau
   des 3 étapes se retrouvait écrasé à 10 px de haut sur l'étape 3, la plus
   longue. On interdit la compression de tous les blocs. */
#mqs-pricing-drawer #mqs-modal > * {
    flex-shrink: 0;
}
#mqs-pricing-drawer #mqs-modal > .mqs-modal-footer {
    margin-top: auto;
}

/* Le padding bas du modal doit être IDENTIQUE aux trois étapes : la barre s'y
   ancre par une marge négative, donc 12 px d'écart entre l'étape 3 (20 px) et
   les étapes 1-2 (32 px) décalaient toute la barre. Les deux sélecteurs sont
   repris tels quels pour égaler la spécificité des règles d'origine. */
/* Chaque étape avait son propre padding bas (32 px aux étapes 1-2, 20 px à
   l'étape 3 via `:has(.mqs-payment-layout)`). Or la barre s'y ancre par une
   marge négative de -32 px : ces 12 px d'écart décalaient toute la barre d'un
   écran à l'autre. Les trois sélecteurs sont repris tels quels pour égaler la
   spécificité des règles d'origine. */
#mqs-pricing-drawer #mqs-modal,
#mqs-pricing-drawer:has(.mqs-value-anchor) #mqs-modal,
#mqs-pricing-drawer:has(.mqs-payment-layout) #mqs-modal {
    padding-bottom: 32px;
}
@media (max-width: 700px) {
    #mqs-pricing-drawer #mqs-modal,
    #mqs-pricing-drawer:has(.mqs-value-anchor) #mqs-modal,
    #mqs-pricing-drawer:has(.mqs-payment-layout) #mqs-modal {
        padding-bottom: 32px;
    }
}

/* Même gabarit pour les deux actions principales (« Continuer » et le bouton
   de paiement, qui tient sur deux lignes) : leurs bords coïncident d'un écran
   à l'autre. */
/* Hauteur IDENTIQUE sur les trois écrans — c'est ce qui garantit que les deux
   boutons tombent au même pixel d'une étape à l'autre. Le sélecteur est préfixé
   par l'id du drawer pour passer devant les règles de base de chaque bouton. */
#mqs-pricing-drawer .mqs-footer-stepb .mqs-btn-continue,
#mqs-pricing-drawer .mqs-footer-stepb .mqs-payment-cta {
    flex: 0 0 auto;
    height: 56px;
    min-height: 0;
}
#mqs-pricing-drawer .mqs-footer-pay .mqs-payment-cta {
    margin: 0;
    /* Le bouton de paiement porte deux lignes : padding resserré pour tenir
       dans la même hauteur que les « Continuer » des étapes 1 et 2. */
    padding: 6px 20px;
    /* La règle de base le met à `width: 100%`, ce qui, dans une barre en ligne,
       écrase le bouton de retour et déforme la barre. */
    width: auto;
    /* Noir sur blanc, comme les « Continuer » des étapes précédentes : en vert
       lime le libellé passait mal, et l'action de fin de tunnel doit se lire
       comme la suite logique des deux autres, pas comme un objet à part. */
    background: #0a0a0a;
    color: #ffffff;
    box-shadow: none;
}
#mqs-pricing-drawer .mqs-footer-pay .mqs-payment-cta:hover:not(.is-locked) {
    background: #1a1a1a;
}
/* Le montant garde l'accent lime : c'est l'information qu'on vient chercher. */
#mqs-pricing-drawer .mqs-footer-pay .mqs-payment-cta-amount {
    color: #d9f24e;
}
/* Pleine largeur seulement quand la barre est empilée (≤600 px). En ligne, un
   item à `width: 100%` écrase le bouton de retour et déforme la barre. */
@media (max-width: 600px) {
    #mqs-pricing-drawer .mqs-footer-pay .mqs-payment-cta {
        width: 100%;
    }
}

/* Bouton de paiement verrouillé : grisé mais TOUJOURS cliquable, pour pouvoir
   dire ce qui manque (cf. showPaymentHint dans pricing-modal.js). */
.mqs-payment-cta.is-locked {
    opacity: 0.45;
    cursor: pointer;
}
.mqs-payment-cta.is-locked:hover {
    opacity: 0.55;
}

.mqs-payment-hint {
    margin: 10px 0 0;
    color: #a4451f;
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
}
.mqs-payment-hint:empty {
    display: none;
}

/* Champ manquant mis en évidence quelques secondes après le clic bloqué. */
.mqs-field-attention {
    outline: 2px solid #d9f24e;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Sous 600 px, .mqs-footer-stepb passe déjà en `column-reverse` : action
   principale au-dessus, retour en dessous, tous deux pleine largeur. */

/* =============================================================================
   ÉTAPE 3 — espacements et hauteur des deux cartes
   ============================================================================= */

/* L'en-tête laissait 26 px sous lui PLUS 26 px au-dessus de la grille, soit
   52 px entre le sous-titre et la carte « Détail » — bien plus que les ~12 px
   qui séparent le titre de son sous-titre. On aligne les deux. */
#mqs-pricing-drawer .mqs-payment-header {
    margin-bottom: 12px;
}
#mqs-pricing-drawer .mqs-payment-layout {
    margin-top: 0;
}

/* Desktop : les deux cartes portaient un `min-height: 596px` fixe alors que
   leur contenu fait ~350 px. Elles se retrouvaient à moitié vides et
   débordaient de l'écran, obligeant à scroller pour rien. Chacune reprend sa
   hauteur naturelle, et `align-items: start` évite que la plus courte s'étire
   sur la plus longue. */
@media (min-width: 981px) {
    #mqs-pricing-drawer .mqs-payment-layout {
        align-items: start;
    }
    #mqs-pricing-drawer .mqs-order-card,
    #mqs-pricing-drawer .mqs-checkout-card,
    #mqs-pricing-drawer .mqs-ticket {
        min-height: 0;
    }
}

/* Prestations incluses : à partir de la tablette, une ligne par prestation.
   En flux libre, « Mises à jour » se retrouvait seul en bout de deuxième ligne,
   détaché du reste. Une colonne supprime tout orphelin possible quelle que soit
   la largeur de la carte, se lit mieux, et ne coûte rien en hauteur — quatre
   lignes de texte occupent autant que deux lignes de cellules à deux colonnes,
   où les libellés longs passaient de toute façon sur deux lignes. */
@media (min-width: 701px) {
    #mqs-pricing-drawer .mqs-ticket-detail {
        display: grid;
        gap: 1px;
    }
    #mqs-pricing-drawer .mqs-ticket-detail li {
        margin-right: 0;
        white-space: normal;
    }
}

/* Mobile : 2 rangées et demie visibles. La demi-rangée coupée en bas dit à
   l'œil qu'il y a d'autres domaines en dessous — un compte rond laisse croire
   que la liste est complète. Et on gagne encore en hauteur. */
@media (max-width: 700px) {
    #mqs-pricing-drawer .mqs-domain-list {
        max-height: calc(var(--mqs-domain-row-h) * 2.5 + var(--mqs-domain-list-gap) * 2);
    }
}