/*
 * WinetPay — Marketplace (`.mk-*`).
 *
 * IDENTITÉ (décision D7) : une boutique RECONNAISSABLE dans l'univers WinetPay.
 *  - On HÉRITE de tokens.css : aucune couleur en dur, les 7 thèmes et la garantie de contraste AA
 *    restent acquis sans rien réécrire.
 *  - La SIGNATURE de la boutique est `--c-accent` (teal), là où le reste du site est porté par
 *    `--c-primary` (indigo). Un rôle existant détourné, pas une palette parallèle : le visiteur sent
 *    qu'il change de section sans changer de site.
 *  - On N'HÉRITE PAS de `.bo-*` : ces composants servent un back-office dense. Une boutique a besoin
 *    de respiration, de cartes qui donnent envie et d'animations — d'où cette famille propre.
 *
 * ⚠️ Piège connu (bug de contraste corrigé en 234f918) : la règle générique `button { background:
 * var(--bo-primary) }` de app.css fuit sur tout <button> non redéclaré. Chaque bouton stylé ici
 * REDÉCLARE son fond, y compris au survol.
 */

/* ===== Signature de section ===== */
.mk-scope {
    /* Rôle local : tout le reste de la feuille s'y réfère. Changer d'accent = changer cette ligne. */
    --mk-accent: var(--c-accent);
    --mk-accent-ink: var(--c-accent-700);
    /* Fond des surfaces PLEINES qui portent du texte blanc.
       `--c-accent` seul est un rôle DÉCORATIF (cf. ThemeContrastTest : « jamais du texte/fond de
       texte ») : blanc sur la nuance 500 donne 2,55:1, très en dessous du seuil AA de 4,5. La 700
       monte à 5,69:1. La teinte claire reste la signature, c'est le PLEIN qui s'assombrit. */
    --mk-accent-solid: var(--c-accent-700);
    /* Assombri par MÉLANGE, pas par une valeur en dur : l'échelle des tokens s'arrête à 700, et
       écrire l'hexa ici casserait le rebranding autant que le garde-fou du Design System. */
    --mk-accent-solid-hover: color-mix(in srgb, var(--c-accent-700) 80%, black);
    --mk-tint: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface));
    --mk-tint-strong: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
    --mk-card-radius: var(--r-xl);
}

/* Ouverture de page. Le retrait générique de `.section` (jusqu'à 104 px) sert à SÉPARER deux blocs
   de contenu ; collé sous le menu il ne sépare rien, il fabrique du vide. On l'écourte pour la
   première section de chaque page de la boutique — la vitrine, elle, n'utilise pas `.section` pour
   son hero, d'où l'absence du problème là-bas. */
.mk-scope > .section:first-child { padding-block-start: clamp(var(--sp-5), 3vw, var(--sp-8)); }

/* ===== En-tête de boutique ===== */
/* Deux colonnes, mêmes proportions que le hero de la vitrine : le visiteur reconnaît la maison.
   Ce qui change, c'est l'accent — teal ici, indigo là-bas (décision D7). */
.mk-hero {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: var(--sp-10); align-items: center;
    /* AUCUN retrait en haut : `.section` en pose déjà 104 px. Les cumuler repoussait le premier
       mot à 152 px du menu — sur un portable, on ouvrait la boutique sur du vide. */
    padding: 0 0 var(--sp-10);
}
.mk-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-caption); font-weight: var(--fw-bold);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--mk-accent-ink);
    background: var(--mk-tint-strong);
    border-radius: var(--r-full);
}
.mk-eyebrow .mk-dot {
    width: 8px; height: 8px; flex: none;
    background: var(--mk-accent); border-radius: var(--r-full);
}
.mk-hero-title {
    margin: var(--sp-5) 0 0;
    font-family: var(--font-display); font-weight: var(--fw-bold);
    /* Plafond à 3 rem, pas 3,4 : au-delà, « prêtes à importer » passait sur une troisième ligne et
       le titre perdait son impact. Deux lignes, c'est le rythme de la vitrine. */
    font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
}
/* Dégradé TEAL → INDIGO, à rebours de la vitrine : c'est ce qui signe la boutique. */
.mk-grad {
    background: linear-gradient(120deg, var(--c-accent), var(--c-primary));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-hero-lead {
    margin: var(--sp-5) 0 0; max-width: 46ch;
    color: var(--c-text-muted); font-size: var(--fs-h4); line-height: var(--lh-normal);
}
.mk-hero-trust {
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
    margin: var(--sp-8) 0 0; padding: 0; list-style: none;
    color: var(--c-text-muted); font-size: var(--fs-small);
}
.mk-hero-trust li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mk-hero-trust svg { width: 16px; height: 16px; flex: none; color: var(--mk-accent); }

.mk-hero-media { position: relative; }
.mk-hero-media img {
    display: block; width: 100%; height: auto;
    /* Ombre portée sur la FORME du dessin, pas sur son cadre : l'illustration est détourée. */
    filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--c-primary) 22%, transparent));
}

/* Sous 900 px la colonne image passerait sous les 300 px et deviendrait illisible : on empile,
   et l'image passe EN PREMIER — elle est ce qui accroche l'œil sur un téléphone. */
@media (max-width: 900px) {
    .mk-hero { grid-template-columns: 1fr; gap: var(--sp-8); }
    .mk-hero-media { order: -1; max-width: 380px; margin-inline: auto; }
    .mk-hero-lead { max-width: none; }
}

/* ===== Barre d'outils : filtres + recherche ===== */
/* Les deux restreignent la liste, ils tiennent donc sur la même ligne. La recherche est
   construite dès l'ouverture — le catalogue doit passer l'échelle — mais à 6 produits elle ne
   PORTE pas la navigation : d'où sa place discrète, à droite, et non au centre de l'accroche. */
.mk-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    margin-block-end: var(--sp-8);
}
.mk-search {
    position: relative; display: flex;
    flex: 0 1 280px; min-width: 200px;
}
/* Loupe DÉCORATIVE, posée dans le champ : elle dit « on cherche ici » sans ajouter de bouton.
   `pointer-events: none` — sinon elle avale le clic destiné au champ. */
.mk-search-ico {
    position: absolute; inset-block-start: 50%; inset-inline-start: var(--sp-4);
    translate: 0 -50%;
    width: 17px; height: 17px; color: var(--c-text-muted); pointer-events: none;
}
.mk-search input {
    flex: 1; min-width: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 25px);
    font-size: var(--fs-small); font-family: inherit;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mk-search input::placeholder { color: var(--c-text-muted); }
.mk-search input:focus-visible {
    outline: none;
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
/* Sur mobile la recherche prend toute la largeur : coincée à 200 px à côté des filtres, elle
   n'afficherait plus que deux ou trois lettres. */
@media (max-width: 620px) {
    .mk-toolbar { flex-direction: column; align-items: stretch; }
    .mk-search { flex: 1 1 auto; }
}

/* ===== Filtres par catégorie ===== */
/* Alignés à gauche comme le hero : des pastilles centrées sous un en-tête aligné à gauche
   donneraient deux axes concurrents sur le même écran. */
.mk-filters {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: 0;
}
.mk-chip {
    /* `background` redéclaré ici ET au survol : sans cela la règle générique `button:hover` repeint
       la puce en indigo plein et son libellé devient illisible. */
    padding: var(--sp-2) var(--sp-4); margin: 0;
    font-size: var(--fs-small); font-weight: var(--fw-medium); font-family: inherit;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    cursor: pointer; width: auto;
    /* Ce sont de VRAIS liens (URL par catégorie, indexables et utilisables sans JS) — d'où le
       soulignement hérité du site, qui n'a aucun sens sur une pastille. */
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mk-chip:hover {
    background: var(--mk-tint); border-color: var(--mk-accent); transform: translateY(-1px);
}
.mk-chip.is-on {
    color: var(--c-text-inverse); background: var(--mk-accent-solid); border-color: var(--mk-accent-solid);
}
.mk-chip.is-on:hover { background: var(--mk-accent-solid-hover); border-color: var(--mk-accent-solid-hover); }
.mk-chip-count {
    margin-inline-start: var(--sp-2); opacity: .7; font-variant-numeric: tabular-nums;
}

/* ===== Grille ===== */
/* Colonnes EXPLICITES : `auto-fit` compte les colonnes avec la borne MAX quand elle est définie et
   en place systématiquement une de moins que prévu (piège rencontré sur la grille des tarifs). */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}
@media (max-width: 1080px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mk-grid { grid-template-columns: 1fr; } }

/* ===== Carte produit ===== */
.mk-card {
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--mk-card-radius);
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: var(--e1);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out);
}
.mk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--e4);
    border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
}
.mk-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Visuel — en attendant les captures réelles (§10), une composition générée cohérente et non un
   placeholder gris : la fiche doit déjà donner envie. */
.mk-card-visual {
    position: relative; aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    background:
        radial-gradient(120% 90% at 15% 10%, var(--mk-tint-strong), transparent 60%),
        linear-gradient(140deg,
            color-mix(in srgb, var(--c-accent) 16%, var(--c-surface)),
            color-mix(in srgb, var(--c-primary) 12%, var(--c-surface)));
    overflow: hidden;
}
.mk-card-visual svg { width: 56px; height: 56px; color: var(--mk-accent-ink); opacity: .9; }
.mk-card-visual::after {
    /* Voile lumineux qui traverse la carte au survol — présent, jamais tapageur. */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%,
                color-mix(in srgb, var(--c-neutral-0) 45%, transparent) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease-out);
}
.mk-card:hover .mk-card-visual::after { transform: translateX(100%); }

.mk-card-badge {
    position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    color: var(--mk-accent-ink); background: var(--c-surface);
    border-radius: var(--r-full); box-shadow: var(--e1);
}

.mk-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); gap: var(--sp-3); }
.mk-card h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-tight); }
.mk-card-desc { margin: 0; color: var(--c-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }

.mk-specs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.mk-spec {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-caption); color: var(--c-text-muted);
    background: var(--c-bg); border-radius: var(--r-sm);
}

.mk-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    margin-block-start: auto; padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--c-border);
}
.mk-price { font-size: var(--fs-h4); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mk-price small { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.mk-price.is-free { color: var(--c-success); }

.mk-cta {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-small); font-weight: var(--fw-semibold);
    color: var(--mk-accent-ink);
}
.mk-cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease-out); }
.mk-card:hover .mk-cta svg { transform: translateX(3px); }

/* ===== États ===== */
.mk-empty {
    grid-column: 1 / -1; padding: var(--sp-16) var(--sp-4); text-align: center;
    color: var(--c-text-muted);
}
.mk-skeleton {
    border-radius: var(--mk-card-radius); min-height: 340px;
    background: linear-gradient(100deg, var(--c-bg) 30%,
                color-mix(in srgb, var(--c-neutral-0) 60%, var(--c-bg)) 50%, var(--c-bg) 70%);
    background-size: 200% 100%;
    animation: mk-shimmer 1.4s linear infinite;
}
@keyframes mk-shimmer { to { background-position: -200% 0; } }

/* ===== Entrée en scène ===== */
/* Décalage progressif : les cartes arrivent l'une après l'autre plutôt qu'en bloc. */
.mk-card { animation: mk-rise var(--t-slow) var(--ease-out) backwards; }
.mk-grid > *:nth-child(1) { animation-delay: 0ms; }
.mk-grid > *:nth-child(2) { animation-delay: 60ms; }
.mk-grid > *:nth-child(3) { animation-delay: 120ms; }
.mk-grid > *:nth-child(4) { animation-delay: 180ms; }
.mk-grid > *:nth-child(5) { animation-delay: 240ms; }
.mk-grid > *:nth-child(6) { animation-delay: 300ms; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } }

/* ===== Fiche produit ===== */
.mk-crumbs {
    display: flex; align-items: center; gap: var(--sp-2);
    padding-block: var(--sp-6) var(--sp-4);
    font-size: var(--fs-small); color: var(--c-text-muted);
}
.mk-crumbs a { color: inherit; text-decoration: none; }
.mk-crumbs a:hover { color: var(--mk-accent-ink); text-decoration: underline; }

.mk-detail {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-10); align-items: start;
}
@media (max-width: 980px) { .mk-detail { grid-template-columns: 1fr; gap: var(--sp-8); } }

.mk-gallery { margin-block-end: var(--sp-8); }
.mk-gallery-main {
    aspect-ratio: 16 / 8; border-radius: var(--mk-card-radius);
    border: 1px solid var(--c-border);
}
.mk-gallery-main svg { width: 88px; height: 88px; }
.mk-gallery-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
    margin-block-start: var(--sp-3);
}
/* Vignette d'une capture RÉELLE (le bandeau n'existe pas tant qu'il n'y en a aucune). */
.mk-thumb {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--r-md);
    background: var(--c-bg); border: 1px solid var(--c-border);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mk-thumb:hover { border-color: var(--mk-accent); transform: translateY(-2px); }

.mk-detail-title { margin: 0 0 var(--sp-3); font-size: var(--fs-h1); line-height: var(--lh-tight); }
.mk-detail-summary {
    margin: 0 0 var(--sp-8); font-size: var(--fs-h4);
    line-height: var(--lh-normal); color: var(--c-text-muted);
}

.mk-block { margin-block-end: var(--sp-8); }
.mk-block h2 {
    margin: 0 0 var(--sp-4); font-size: var(--fs-h3);
    padding-block-end: var(--sp-2); border-block-end: 1px solid var(--c-border);
}
.mk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.mk-list li { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: var(--lh-normal); }
.mk-list svg { flex: none; width: 18px; height: 18px; margin-block-start: 3px; color: var(--mk-accent); }
.mk-list-plain li { color: var(--c-text-muted); }
.mk-list-plain li::before { content: '—'; flex: none; color: var(--mk-accent); }

.mk-specs-table { margin: 0; display: grid; gap: 0; }
.mk-specs-table > div {
    display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--sp-4);
    padding-block: var(--sp-3); border-block-end: 1px solid var(--c-border);
}
.mk-specs-table dt { margin: 0; color: var(--c-text-muted); font-size: var(--fs-small); }
.mk-specs-table dd { margin: 0; font-weight: var(--fw-medium); }

/* Colonne d'achat — collante en écran large seulement : sur mobile elle mangerait la lecture.
   Empile l'aperçu-téléphone (point 6) au-dessus de la carte de commande, avec de l'air entre eux. */
.mk-buy { position: sticky; inset-block-start: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 980px) { .mk-buy { position: static; } }
.mk-buy-card {
    padding: var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--mk-card-radius);
    box-shadow: var(--e2);
}
.mk-buy-price { display: block; font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.mk-buy-price small { font-size: var(--fs-h4); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.mk-buy-price.is-free { color: var(--c-success); }
.mk-buy-note { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-small); color: var(--c-text-muted); }

/* `background` redéclaré au repos ET au survol : la règle générique `button/a` ne doit pas fuir. */
.mk-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    width: 100%; padding: var(--sp-4);
    font-size: var(--fs-body); font-weight: var(--fw-semibold); text-decoration: none;
    color: var(--c-text-inverse); background: var(--mk-accent-solid);
    border: none; border-radius: var(--r-full); cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.mk-btn:hover { background: var(--mk-accent-solid-hover); transform: translateY(-1px); box-shadow: var(--e3); }
.mk-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.mk-btn svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
.mk-btn:hover svg { transform: translateX(3px); }

/* Avertissement D3 — informatif, jamais alarmant : c'est une règle du produit, pas une erreur. */
.mk-buy-warn {
    display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 0;
    padding: var(--sp-3); font-size: var(--fs-caption); line-height: var(--lh-normal);
    color: var(--c-text-muted);
    background: color-mix(in srgb, var(--c-info) 7%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-info) 25%, var(--c-surface));
    border-radius: var(--r-md);
}
.mk-buy-warn svg { flex: none; width: 16px; height: 16px; margin-block-start: 2px; color: var(--c-info); }

.mk-buy-points {
    margin: var(--sp-5) 0 0; padding: 0; list-style: none;
    display: grid; gap: var(--sp-2);
    font-size: var(--fs-small); color: var(--c-text-muted);
}
.mk-buy-points li { display: flex; align-items: center; gap: var(--sp-2); }
.mk-buy-points li::before {
    content: ''; flex: none; width: 6px; height: 6px; border-radius: var(--r-full);
    background: var(--mk-accent);
}

.mk-related { margin-block-start: var(--sp-16); }
.mk-related h2 { margin: 0 0 var(--sp-6); font-size: var(--fs-h2); }

/* ===== Tunnel d'achat ===== */
.mk-tunnel { max-width: 1080px; }

/* Repères d'étapes — savoir où l'on en est réduit l'abandon. */
.mk-steps {
    display: flex; flex-wrap: wrap; gap: var(--sp-6);
    margin: 0 0 var(--sp-8); padding: 0; list-style: none;
    font-size: var(--fs-small); color: var(--c-text-muted);
}
.mk-steps li { display: flex; align-items: center; gap: var(--sp-2); }
.mk-step-n {
    display: grid; place-items: center; width: 26px; height: 26px;
    font-size: var(--fs-caption); font-weight: var(--fw-bold);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-full);
}
.mk-steps li.is-on { color: var(--c-text); font-weight: var(--fw-semibold); }
.mk-steps li.is-on .mk-step-n {
    color: var(--c-text-inverse); background: var(--mk-accent-solid); border-color: var(--mk-accent-solid);
}

.mk-tunnel-grid {
    /* Colonne de droite élargie : elle porte désormais l'aperçu-téléphone (point 6), qui a besoin
       d'air autour de lui pour respirer le premium — 320px l'écrasait contre les bords. */
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-8); align-items: start;
}
@media (max-width: 1180px) { .mk-tunnel-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 980px) { .mk-tunnel-grid { grid-template-columns: 1fr; } }

.mk-tunnel-title { margin: 0 0 var(--sp-2); font-size: var(--fs-h1); line-height: var(--lh-tight); }
.mk-tunnel-lead { margin: 0 0 var(--sp-8); color: var(--c-text-muted); line-height: var(--lh-normal); }

/* ===== Formulaire ===== */
.mk-fieldset {
    margin: 0 0 var(--sp-6); padding: var(--sp-6);
    border: 1px solid var(--c-border); border-radius: var(--mk-card-radius);
    background: var(--c-surface);
}
.mk-fieldset legend {
    padding-inline: var(--sp-2);
    font-size: var(--fs-small); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .06em; color: var(--mk-accent-ink);
}
.mk-field { display: block; margin-block-end: var(--sp-5); }
/* Révélation conditionnelle : appliquerConditions() pose l'attribut `hidden`, mais `.mk-field`
   (origine auteur) ÉCRASE la règle UA `[hidden]{display:none}` — sans cette ligne, un champ masqué
   restait VISIBLE (le script s'affichait en mode vitrine, les forfaits en mode WinetPay) alors que
   sa donnée, elle, était bien exclue (`.mk-field:not([hidden])`). C'était le vrai « pas encore coché
   mais script demandé ». La correction JS (satisfaite/valeurDe) est sans effet sans ce display:none. */
.mk-field[hidden] { display: none; }
.mk-field:last-child { margin-block-end: 0; }
.mk-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 600px) { .mk-field-row { grid-template-columns: 1fr; } }

.mk-label { display: block; margin-block-end: var(--sp-2); font-weight: var(--fw-medium); font-size: var(--fs-small); }
/* TOUS les types de saisie, pas une liste blanche : `tel`, `email`, `number`… retombaient sur le
   rendu natif du navigateur et cassaient l'harmonie de la page. On exclut ce qui a son propre
   composant (fichier, cases, radios). */
.mk-field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.mk-field select {
    width: 100%; padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-body); font-family: inherit;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mk-field input[type="color"] { height: 46px; padding: var(--sp-1); cursor: pointer; }
.mk-field input:focus-visible, .mk-field select:focus-visible {
    outline: none; border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.mk-help { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-muted); }

.mk-form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.mk-form-actions .mk-btn { width: auto; padding-inline: var(--sp-6); }
/* `background` redéclaré : sans lui, la règle générique repeint ce bouton secondaire en plein. */
.mk-btn-ghost {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none;
    color: var(--c-text-muted); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mk-btn-ghost:hover { background: var(--c-bg); color: var(--c-text); }

/* ===== Question à embranchement ===== */
.mk-fieldset-wide { padding: var(--sp-6); }
.mk-question { margin: 0 0 var(--sp-5); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.mk-question-sub { margin-block-start: var(--sp-6); font-size: var(--fs-body); }
.mk-mb { margin-block-end: var(--sp-5); }

/* Cartes de choix — on choisit une DIRECTION, pas une case. Chacune expose ce qu'elle apporte. */
.mk-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 760px) { .mk-choices { grid-template-columns: 1fr; } }

.mk-choice { position: relative; display: block; cursor: pointer; }
.mk-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mk-choice-body {
    display: flex; flex-direction: column; gap: var(--sp-3); height: 100%;
    padding: var(--sp-5);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border); border-radius: var(--mk-card-radius);
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mk-choice:hover .mk-choice-body { border-color: var(--mk-accent); transform: translateY(-2px); box-shadow: var(--e2); }
.mk-choice input:checked + .mk-choice-body {
    border-color: var(--mk-accent);
    background: var(--mk-tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.mk-choice input:focus-visible + .mk-choice-body { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.mk-choice-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mk-choice-head svg { width: 22px; height: 22px; color: var(--mk-accent-ink); }
.mk-choice-title { font-weight: var(--fw-semibold); font-size: var(--fs-h4); }
.mk-choice-tag {
    padding: 2px var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    color: var(--c-text-inverse); background: var(--mk-accent-solid); border-radius: var(--r-full);
}
.mk-choice-desc { color: var(--c-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.mk-choice-perks { display: grid; gap: var(--sp-2); margin-block-start: auto; }
.mk-choice-perks span {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--c-text);
}
.mk-choice-perks span::before {
    content: ''; flex: none; width: 14px; height: 14px; margin-block-start: 2px;
    background: var(--mk-accent); border-radius: var(--r-full);
    /* Coche dessinée en masque : pas d'image à charger, et elle suit la couleur d'accent. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat,
             linear-gradient(black, black);
    -webkit-mask-composite: xor;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat,
                    linear-gradient(black, black);
            mask-composite: exclude;
}

/* Panneaux révélés — l'ouverture s'anime, la fermeture est instantanée. */
.mk-reveal { margin-block-start: var(--sp-5); }
.mk-reveal.is-in { animation: mk-reveal var(--t-slow) var(--ease-out); }
@keyframes mk-reveal { from { opacity: 0; transform: translateY(-6px); } }

.mk-field textarea {
    width: 100%; padding: var(--sp-3) var(--sp-4); font: inherit; resize: vertical;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.mk-field textarea:focus-visible {
    outline: none; border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

/* Guide dépliable — l'aide est là sans encombrer celui qui n'en a pas besoin. */
.mk-guide {
    margin-block-start: var(--sp-4);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-bg);
}
.mk-guide summary {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); cursor: pointer;
    font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--mk-accent-ink);
    list-style: none;
}
.mk-guide summary::-webkit-details-marker { display: none; }
.mk-guide summary svg { width: 16px; height: 16px; }
.mk-guide-steps { margin: 0; padding: 0 var(--sp-5) var(--sp-4) var(--sp-8); display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.mk-guide-note { margin: 0; padding: 0 var(--sp-5) var(--sp-4) var(--sp-8); font-size: var(--fs-caption); color: var(--c-text-muted); }

/* Interrupteur */
.mk-switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-small); }
.mk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mk-switch-track {
    position: relative; flex: none; width: 42px; height: 24px;
    background: var(--c-neutral-300); border-radius: var(--r-full);
    transition: background var(--t-fast) var(--ease-out);
}
.mk-switch-track::after {
    content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
    width: 18px; height: 18px; background: var(--c-surface); border-radius: var(--r-full);
    box-shadow: var(--e1); transition: transform var(--t-fast) var(--ease-out);
}
.mk-switch input:checked + .mk-switch-track { background: var(--mk-accent); }
.mk-switch input:checked + .mk-switch-track::after { transform: translateX(18px); }
.mk-switch input:focus-visible + .mk-switch-track { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ===== Forfaits répétables ===== */
.mk-offers-hint { margin-block: var(--sp-4) var(--sp-3); }
.mk-offers { display: grid; gap: var(--sp-3); }
.mk-offer {
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.mk-offer.is-in { animation: mk-reveal var(--t-base) var(--ease-out); }
.mk-offer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.mk-offer-title { font-weight: var(--fw-semibold); color: var(--mk-accent-ink); }
.mk-offer-remove {
    width: auto; margin: 0; padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-small); line-height: 1;
    color: var(--c-text-muted); background: transparent; border: none; border-radius: var(--r-sm);
    cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mk-offer-remove:hover { color: var(--c-error); background: var(--c-error-bg); }
.mk-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .mk-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mk-offer-grid { grid-template-columns: 1fr; } }
.mk-offer-grid .mk-field { margin-block-end: 0; }

.mk-add-offer { display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-3); cursor: pointer; }
.mk-add-offer svg { width: 16px; height: 16px; }

.mk-optional {
    margin-inline-start: var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-regular);
    color: var(--c-text-muted);
}

/* ===== Champ téléphone ===== */
/* L'indicatif est AFFICHÉ, pas à saisir : il vient du pays et ne doit pas être une source d'erreur.
   L'exploitant tape son numéro local, comme il le dicterait à voix haute. */
.mk-phone {
    display: flex; align-items: stretch;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface); overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mk-phone:focus-within {
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.mk-phone-cc {
    display: flex; align-items: center; gap: var(--sp-2);
    padding-inline: var(--sp-4); flex: none;
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-text-muted);
    background: var(--c-bg); border-inline-end: 1px solid var(--c-border);
}
/* Le SVG est injecté par flags.js — on dimensionne le conteneur, il s'y adapte. */
.mk-phone-flag { display: block; width: 20px; height: 14px; flex: none; }
.mk-phone-flag svg { display: block; width: 100%; height: 100%; border-radius: 2px; }
/* Bordure retirée : c'est le conteneur qui la porte, sinon on voit un liseré dans le liseré. */
.mk-phone input { border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.mk-phone input:focus-visible { outline: none; }

/* ===== Dépôt de logo ===== */
/* Le `<input type=file>` natif est laid et ne dit rien de ce qu'on attend. On le masque et on
   présente une zone qui explique, accepte le glisser-déposer, et montre le résultat. */
.mk-drop { position: relative; display: block; cursor: pointer; }
.mk-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.mk-drop-face {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1.5px dashed var(--c-border); border-radius: var(--r-lg);
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.mk-drop:hover .mk-drop-face,
.mk-drop.is-over .mk-drop-face { border-color: var(--mk-accent); background: var(--mk-tint); }
.mk-drop input:focus-visible + .mk-drop-face { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.mk-drop-thumb {
    display: grid; place-items: center; flex: none;
    width: 56px; height: 56px; overflow: hidden;
    color: var(--mk-accent-ink); background: var(--mk-tint-strong); border-radius: var(--r-md);
}
.mk-drop-thumb svg { width: 24px; height: 24px; }
.mk-drop-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mk-drop-text { display: grid; gap: 2px; min-width: 0; }
.mk-drop-title { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.mk-drop-sub {
    font-size: var(--fs-caption); color: var(--c-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-drop-clear {
    margin: 0 0 0 auto; padding: var(--sp-1) var(--sp-3); width: auto; flex: none;
    font-size: var(--fs-caption); font-family: inherit;
    color: var(--c-text-muted); background: var(--c-bg);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    cursor: pointer; position: relative; z-index: 1;
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.mk-drop-clear:hover { color: var(--c-error); background: var(--c-error-bg); }

/* ===== Aperçu des cartes de forfait (rendu du PORTAIL) ===== */
/* Préfixe `.pk-` : ces styles décrivent le portail GÉNÉRÉ, pas la boutique. Les garder distincts
   évite qu'une retouche de la boutique déforme l'aperçu — et l'inverse. */
.mk-preview {
    margin-block-start: var(--sp-6); padding: var(--sp-5);
    background: var(--c-bg); border: 1px dashed var(--c-border); border-radius: var(--mk-card-radius);
}
.mk-preview-label {
    display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-4);
    font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted);
}
.mk-preview-label svg { width: 15px; height: 15px; }

.pk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.pk-card {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--c-surface);
    border: 2px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-surface));
    border-radius: var(--r-xl);
    animation: mk-reveal var(--t-base) var(--ease-out);
}
.pk-cat {
    align-self: flex-start; padding: 2px var(--sp-3);
    font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    color: var(--mk-accent-ink); background: var(--mk-tint-strong); border-radius: var(--r-full);
}
.pk-name { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-tight); }
.pk-desc { margin: 0; font-size: var(--fs-small); color: var(--c-text-muted); line-height: var(--lh-normal); }
.pk-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pk-pill {
    padding: 2px var(--sp-2); font-size: var(--fs-caption);
    color: var(--mk-accent-ink); background: var(--mk-tint); border-radius: var(--r-full);
}
.pk-price { display: flex; align-items: baseline; gap: var(--sp-1); margin-block-start: var(--sp-1); }
.pk-price strong { font-size: var(--fs-h1); line-height: 1; font-variant-numeric: tabular-nums; }
.pk-price small { font-size: var(--fs-small); color: var(--c-text-muted); }

.pk-actions { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.pk-btn {
    display: block; padding: var(--sp-3); text-align: center;
    font-size: var(--fs-small); font-weight: var(--fw-semibold);
    color: var(--c-text-inverse); background: var(--mk-accent-solid); border-radius: var(--r-full);
}
/* `background` redéclaré : bouton secondaire, la règle générique ne doit pas le remplir. */
.pk-btn-ghost {
    width: 100%; margin: 0; padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-small); font-weight: var(--fw-medium); font-family: inherit;
    color: var(--mk-accent-ink); background: var(--c-surface);
    border: 1px solid color-mix(in srgb, var(--c-accent) 40%, var(--c-border));
    border-radius: var(--r-full); cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.pk-btn-ghost:hover { background: var(--mk-tint); }

/* ===== Popup de contact ===== */
.pk-dialog { padding: 0; max-width: 400px; width: calc(100% - var(--sp-8)); border: none; background: transparent; }
.pk-dialog::backdrop { background: color-mix(in srgb, var(--c-neutral-900) 55%, transparent); backdrop-filter: blur(3px); }
.pk-dialog[open] .pk-dialog-in { animation: pk-pop var(--t-base) var(--ease-back); }
@keyframes pk-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }

.pk-dialog-in {
    position: relative; padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center;
    background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--e4);
}
.pk-dialog-x {
    position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
    width: 32px; height: 32px; margin: 0; padding: 0; line-height: 1;
    color: var(--c-text-muted); background: var(--c-bg); border: none; border-radius: var(--r-full);
    cursor: pointer; transition: background var(--t-fast) var(--ease-out);
}
.pk-dialog-x:hover { background: var(--c-border); }

.pk-dialog-ico {
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--sp-4);
    color: var(--mk-accent-ink); background: var(--mk-tint-strong); border-radius: var(--r-full);
}
.pk-dialog-ico svg { width: 26px; height: 26px; }
.pk-dialog-in h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.pk-dialog-sub { margin: 0 0 var(--sp-5); font-size: var(--fs-small); color: var(--c-text-muted); line-height: var(--lh-normal); }

/* Le numéro EN GRAND : c'est le recours qui fonctionne toujours, il doit être le plus lisible. */
.pk-number {
    margin: 0 0 var(--sp-3); padding: var(--sp-4);
    font-size: var(--fs-h3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
    letter-spacing: .02em; user-select: all;
    background: var(--c-bg); border-radius: var(--r-md);
}
.pk-copy {
    width: 100%; margin: 0 0 var(--sp-4); padding: var(--sp-3);
    font-size: var(--fs-small); font-weight: var(--fw-semibold); font-family: inherit;
    color: var(--c-text-inverse); background: var(--mk-accent-solid);
    border: none; border-radius: var(--r-full); cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.pk-copy:hover { background: var(--mk-accent-solid-hover); }
.pk-copy.is-done { background: var(--c-success); }

.pk-dialog-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pk-link {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3); text-decoration: none;
    font-size: var(--fs-small); font-weight: var(--fw-medium);
    color: var(--c-text); background: var(--c-bg); border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease-out);
}
.pk-link:hover { background: var(--c-border); }
.pk-link svg { width: 18px; height: 18px; }

/* L'explication, pas une excuse : elle dit quoi faire, pas seulement ce qui ne marche pas. */
.pk-dialog-hint {
    margin: var(--sp-4) 0 0; font-size: var(--fs-caption);
    line-height: var(--lh-normal); color: var(--c-text-muted);
}

/* ===== Récapitulatif latéral ===== */
.mk-summary-eyebrow {
    display: block; font-size: var(--fs-caption); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted);
}
.mk-summary-name { margin: var(--sp-2) 0 var(--sp-4); font-weight: var(--fw-semibold); }
.mk-summary-line {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-block: var(--sp-3); border-block: 1px solid var(--c-border);
    font-size: var(--fs-small);
}
.mk-summary-line strong { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }

.mk-buy-auth {
    display: flex; gap: var(--sp-3); margin: var(--sp-4) 0 0;
    font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--c-text-muted);
}
.mk-buy-auth svg { flex: none; width: 16px; height: 16px; margin-block-start: 2px; color: var(--c-text-muted); }

/* ===== Mouvement réduit ===== */
/* Re-neutralisation EXPLICITE : le confort d'usage prime sur l'effet. */
@media (prefers-reduced-motion: reduce) {
    .mk-card, .mk-chip, .mk-cta svg, .mk-card-visual::after { transition: none; animation: none; }
    .mk-card:hover { transform: none; }
    .mk-card:hover .mk-card-visual::after { transform: translateX(-100%); }
    .mk-skeleton { animation: none; }
}

/* ===== Rideau de fermeture ===== */
/* Une boutique fermée reste une boutique : même accent, même typographie. Ce qui change, c'est
   qu'on n'affiche RIEN à parcourir — sinon le visiteur clique sur des cartes qui ne mènent nulle
   part et repart en pensant que le site est cassé. */
.mk-maint {
    max-width: 62ch; margin-inline: auto;
    padding: var(--sp-12) 0 var(--sp-10);
    text-align: center;
}
.mk-maint-ico {
    display: grid; place-items: center;
    width: 76px; height: 76px; margin: 0 auto var(--sp-6);
    color: var(--mk-accent-ink);
    background: var(--mk-tint-strong);
    border-radius: var(--r-full);
}
.mk-maint-ico svg { width: 34px; height: 34px; }
.mk-maint h1 {
    margin: var(--sp-4) 0 var(--sp-3);
    font-size: var(--fs-display); line-height: var(--lh-tight);
    font-family: var(--font-display);
}
.mk-maint-msg {
    color: var(--c-text-muted); font-size: var(--fs-h4); line-height: var(--lh-normal);
}
/* Liste centrée SANS puces natives : une puce alignée à gauche casserait l'axe central. */
.mk-maint-perks {
    display: inline-flex; flex-direction: column; gap: var(--sp-2);
    margin: var(--sp-8) 0 0; padding: 0;
    list-style: none; text-align: start;
}
.mk-maint-perks li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    color: var(--c-text); line-height: var(--lh-normal);
}
.mk-maint-perks li::before {
    content: ''; flex: none; width: 8px; height: 8px; margin-block-start: .55em;
    background: var(--mk-accent); border-radius: var(--r-full);
}
.mk-maint-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
    margin-block-start: var(--sp-8);
}

/* --- FORMULAIRE INTELLIGENT (lot M3) ---------------------------------------------------------
   Le formulaire n'est plus écrit dans la vue : il est construit depuis le `form_schema` du produit.
   Ces règles habillent les seules structures que le moteur ajoute — listes répétables, cases
   multiples, récapitulatif. Tout le reste réutilise les classes déjà stylées (.mk-fieldset,
   .mk-field, .mk-label, .mk-help, .mk-switch), pour que la direction artistique ne bouge pas. */
.mk-form-host { display: contents; }

/* Liste répétable : n groupes identiques (profils, forfaits) — c'est ce qui alimente {{#pour}}. */
.mk-field-liste .mk-label { margin-block-end: var(--sp-3); }
.mk-liste-item { position: relative; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--mk-tint); }
.mk-liste-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.mk-liste-rang { display: grid; place-content: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--mk-accent-solid); color: var(--c-text-inverse); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.mk-liste-add { margin-block-start: var(--sp-3); }
.mk-liste-add[disabled], .mk-liste-del[disabled] { opacity: .45; cursor: not-allowed; }

/* Cases à cocher multiples : une colonne lisible, jamais une grille qui casse à 320 px. */
.mk-choice-inline { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-2); font-size: var(--fs-small); cursor: pointer; }
.mk-choice-inline input { width: 18px; height: 18px; accent-color: var(--mk-accent); }

/* Récapitulatif vivant : ce que l'acheteur a saisi, PAS le fichier généré (il se paie). */
.mk-recap { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-small); }
.mk-recap dt { color: var(--c-text-muted); }
.mk-recap dd { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .mk-recap { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mk-recap dd { margin-block-end: var(--sp-3); }
    .mk-liste-head { flex-wrap: wrap; }
}

/* --- APERÇU DU FICHIER GÉNÉRÉ (lot M4) -------------------------------------------------------
   Montre à l'acheteur que ses réponses atterrissent bien où il croit. Tronqué à dessein : le
   fichier complet EST le produit. */
.mk-apercu { display: grid; gap: var(--sp-3); }
.mk-apercu-sortie:empty { display: none; }
.mk-apercu-code {
    margin: 0; padding: var(--sp-4); overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.55; tab-size: 2;
    color: var(--c-text); background: var(--mk-tint);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    white-space: pre;
}
.mk-apercu-erreurs { margin: var(--sp-2) 0 0; padding-left: 1.1em; font-size: var(--fs-small); color: var(--c-error); }
.mk-apercu-erreurs li { margin-bottom: 3px; }
.mk-apercu-arbre { margin: var(--sp-2) 0 var(--sp-3); padding-left: 1.1em; font-size: var(--fs-small); color: var(--c-text-muted); columns: 2; column-gap: var(--sp-5); }
.mk-apercu-arbre li { margin-bottom: 2px; break-inside: avoid; }
@media (max-width: 560px) { .mk-apercu-arbre { columns: 1; } }

/* --- Sélecteur de couleur (lot M5 bis) -------------------------------------------------------
   Un `<input type="color">` étiré sur toute la largeur est laid et ne dit pas sa couleur. Ici :
   une pastille qu'on clique, et le code lisible à côté — les deux décrivent la même valeur. */
.mk-color { display: flex; align-items: stretch; gap: var(--sp-3); }
.mk-color-swatch {
    width: 56px !important; flex: 0 0 auto; padding: 4px !important; cursor: pointer;
    border: 1px solid var(--c-border) !important; border-radius: var(--r-md) !important;
    background: var(--c-surface) !important;
}
.mk-color-hex { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }

/* Une seule option par ligne sous 560 px : deux cartes côte à côte y deviennent illisibles. */
@media (max-width: 560px) {
    .mk-choices { grid-template-columns: minmax(0, 1fr); }
}

/* --- APERÇU EN DIRECT du portail (point 1) ---------------------------------------------------
   Le client VOIT ses pages (login/status/logout) pendant qu'il remplit, dans une iframe isolee. */
.mk-apercu-fieldset { position: sticky; top: var(--sp-4); }

/* Point 6 — l'aperçu monté dans la colonne collante : une carte premium, pas un fieldset nu. */
.mk-apercu-cible {
    padding: var(--sp-5);
    background:
        radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--mk-accent) 12%, transparent), transparent 60%),
        var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--mk-card-radius);
    box-shadow: var(--e2);
}
.mk-apercu-cible[hidden] { display: none; }
.mk-apercu-tete { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.mk-apercu-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--mk-accent-ink);
}
.mk-apercu-eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
    background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 25%, transparent);
    animation: mk-apercu-pulse 2s var(--ease-out) infinite;
}
@keyframes mk-apercu-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-success) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mk-apercu-eyebrow::before { animation: none; } }

.mk-apercu { display: flex; flex-direction: column; gap: var(--sp-3); }
.mk-apercu-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mk-tint); border-radius: var(--r-full); align-self: flex-start; }
.mk-apercu-tab { padding: 6px 14px; border: none; border-radius: var(--r-full); background: transparent; color: var(--c-text-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.mk-apercu-tab:hover { color: var(--mk-accent-ink); }
.mk-apercu-tab.is-on { background: var(--c-surface); color: var(--mk-accent-ink); box-shadow: var(--e1); }
.mk-apercu-tab:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Le cadre-appareil : un telephone stylise, pour que l'apercu ressemble a ce que verra le client.
   `max-height: 52vh` : l'aperçu vit dans la colonne collante AU-DESSUS de la carte de commande
   (Total + avertissement « réponses figées »). Sans plafond, un device de 620 px de haut poussait
   cette carte sous la ligne de flottaison sur un écran portable. Le plafond en vh laisse toujours
   la carte visible ; la largeur suit le ratio (le téléphone rétrécit au lieu de déborder). */
.mk-apercu-device { position: relative; width: 100%; max-width: 320px; max-height: 52vh; margin-inline: auto; aspect-ratio: 320 / 620; padding: 10px; border-radius: 28px; background: linear-gradient(160deg, rgb(26, 26, 34), rgb(42, 42, 53)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); }
.mk-apercu-frame { width: 100%; height: 100%; border: 0; border-radius: 20px; background: white; display: block; }

.mk-apercu-erreurs { margin: 0; padding-left: 1.1em; color: var(--c-error); font-size: var(--fs-small); }
.mk-apercu-erreurs li { margin-bottom: 3px; }
.mk-apercu-code { margin: 0; padding: var(--sp-3); max-height: 320px; overflow: auto; font-size: 12px; line-height: 1.5; background: var(--mk-tint); border-radius: var(--r-md); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 900px) { .mk-apercu-fieldset { position: static; } }