/*
 * mockups.css — Illustrations d'interface vin.co
 *
 * Styles des montages générés par includes/mockups.php.
 * Fichier séparé de custom.css : vous pouvez le remplacer entièrement
 * lors d'une mise à jour des montages sans toucher à votre design system.
 *
 * Chaque var() porte une valeur de repli : le fichier reste correct même
 * si custom.css n'est pas à jour ou si un token manque. C'est la seule
 * entorse assumée à la règle « aucun hexadécimal hors du :root » —
 * elle rend ce composant autonome et transportable.
 *
 * À charger APRÈS custom.css pour que vos tokens prennent le dessus.
 */

.mk {
    position: relative;
    max-width: 540px;
    margin: 0 0 0 auto;
    padding: 2.5rem 0 3rem 3.5rem;
}

/* ── Carte principale ─────────────────────────────────────── */
.mk-card {
    background: var(--c-white, #FFFFFF);
    border: 1px solid var(--c-border-light, #dfdfdf);
    border-radius: var(--radius-md, 20px);
    box-shadow: 0 4px 30px 6px rgba(0, 0, 0, 0.09);
    padding: 1.5rem 1.75rem;
    position: relative;
    z-index: 2;
}

.mk-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--c-border-light, #dfdfdf);
    margin-bottom: 1.25rem;
}

.mk-eyebrow {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-primary, #891769);
}

.mk-ref {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    letter-spacing: 0.04em;
}

/* ── Corps : bouteille + contenu ──────────────────────────── */
.mk-body { display: flex; gap: 1.5rem; align-items: flex-start; }

.mk-visual { flex: 0 0 88px; display: flex; justify-content: center; }

.mk-bottle { width: 72px; }
.mk-bottle img { width: 100%; height: auto; display: block; }

.mk-bottle-svg { width: 100%; height: auto; display: block; }
.mk-bottle-glass { fill: var(--c-plum, #3f1134); }
.mk-bottle-cap   { fill: var(--c-primary, #891769); }
.mk-bottle-label { fill: var(--c-white, #FFFFFF); }
.mk-bottle-text  { fill: var(--c-border, #d6d6d6); }

.mk-content { flex: 1; min-width: 0; }

/* ── Barres de texte simulé ───────────────────────────────── */
.mk-bar {
    height: 9px;
    border-radius: 5px;
    background: var(--c-bg, #F6F6F6);
    margin-bottom: 7px;
}
.mk-bar-lg   { height: 13px; width: 78%; background: var(--c-border, #d6d6d6); }
.mk-bar-md   { height: 11px; width: 52%; background: var(--c-border-light, #dfdfdf); }
.mk-bar-full { width: 100%; }
.mk-bar-sm   { width: 46%; }

/* ── Attributs ────────────────────────────────────────────── */
.mk-chips { display: flex; gap: 0.4rem; margin: 0.9rem 0 1.1rem; flex-wrap: wrap; }

.mk-chip {
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--c-primary, #891769);
    background: var(--c-accent-mauve-soft, rgba(137,23,105,0.09));
    padding: 3px 10px;
    border-radius: var(--radius-pill, 30px);
}

.mk-divider {
    height: 1px;
    background: var(--c-border-light, #dfdfdf);
    margin: 1.25rem 0;
}

/* ── Bloc presse ──────────────────────────────────────────── */
.mk-press-title { display: block; margin-bottom: 0.75rem; }

.mk-press-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0;
}
.mk-press-row + .mk-press-row { border-top: 1px solid var(--c-border-light, #dfdfdf); }

/* Emplacement logo : vide = pastille neutre */
.mk-press-logo {
    flex: 0 0 62px;
    height: 22px;
    border-radius: 4px;
    background: var(--c-bg, #F6F6F6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mk-press-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mk-press-lines { flex: 1; min-width: 0; }
.mk-press-lines .mk-bar { height: 7px; margin-bottom: 5px; }
.mk-press-lines .mk-bar:last-child { margin-bottom: 0; }

.mk-score {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-primary, #891769);
    flex-shrink: 0;
}

/* ── Grappe photos en débordement ─────────────────────────── */
.mk-photos { position: absolute; left: 0; top: 32%; z-index: 3; }

.mk-photo {
    position: absolute;
    border-radius: var(--radius-sm, 10px);
    border: 3px solid var(--c-white, #FFFFFF);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-primary, #891769), var(--c-plum, #3f1134));
}
.mk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-photo-1 { width: 144px; height: 102px; left: -40px;    top: 0; }
.mk-photo-2 { width: 84px;  height: 84px; left: 38px; top: 54px;
               background: linear-gradient(135deg, var(--c-accent-amber, #cf7f14), var(--c-primary, #891769)); }
.mk-photo-3 { width: 72px;  height: 58px; left: 8px;  top: 122px;
               background: linear-gradient(135deg, var(--c-plum, #3f1134), var(--c-accent-blue, #1862fb)); }

/* ── Grappe photos pairing en débordement ─────────────────────────── */
.mk-pairings {
    position: absolute;
    left: 198px;
    top: 41%;
    z-index: 3;
}

.mk-pairing {
    position: absolute;
    border-radius: var(--radius-sm, 10px);
    border: 3px solid var(--c-white, #FFFFFF);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-primary, #891769), var(--c-plum, #3f1134));
}
.mk-pairing img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-pairing-1 { width: 132px;  height: 83px; left: 180px;  top: 5px;
               background: linear-gradient(135deg, var(--c-plum, #3f1134), var(--c-accent-blue, #1862fb)); }
.mk-pairing-2 { width: 120px; height: 78px; left: 0;    top: 0; }
.mk-pairing-3 { width: 110px;  height: 74px; left: 100px; top: 38px;
                 background: linear-gradient(135deg, var(--c-accent-amber, #cf7f14), var(--c-primary, #891769)); }


/* ── Satellites flottants ─────────────────────────────────── */
.mk-float {
    position: absolute;
    background: var(--c-white, #FFFFFF);
    border: 1px solid var(--c-border-light, #dfdfdf);
    border-radius: var(--radius-sm, 10px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    z-index: 4;
}

/* Conformité — en haut à droite */
.mk-float-comply {
    top: 140px;
    right: -20px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
}
.mk-comply-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--c-action, #9abd00);
    flex-shrink: 0;
    position: relative;
}
.mk-comply-dot::after {
    content: '';
    position: absolute;
    left: 9px; top: 5px;
    width: 6px; height: 11px;
    border: solid var(--c-white, #FFFFFF);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mk-float-comply strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-text, #313131);
    line-height: 1.2;
}
.mk-float-comply span {
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
}

/* Canaux — en bas à droite */
.mk-float-channels {
    bottom: 0;
    right: 8px;
    padding: 0.85rem 1.1rem;
    min-width: 168px;
}
.mk-float-channels .mk-eyebrow { display: block; margin-bottom: 0.6rem; }

.mk-channel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.22rem 0;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--c-text, #313131);
}

.mk-check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--c-border, #d6d6d6);
    flex-shrink: 0;
    position: relative;
}
.mk-check.is-on {
    background: var(--c-action, #9abd00);
    border-color: var(--c-action, #9abd00);
}
.mk-check.is-on::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid var(--c-white, #FFFFFF);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Satellite langues — en haut à droite */
.mk-float-langs-top {
    top: 0;
    right: -12px;
    padding: 0.8rem 1rem;
}
.mk-float-langs-top .mk-eyebrow { display: block; margin-bottom: 0.5rem; }

/* Satellite exports — en bas au centre */
.mk-float-formats-bottom {
    bottom: -10px;
    left:0;
    padding: 0.8rem 1rem;
}
.mk-float-formats-bottom .mk-eyebrow { display: block; margin-bottom: 0.5rem; }

/* ── Repli responsive ─────────────────────────────────────── */
@media screen and (max-width: 1199px) {
    .mk { max-width: 470px; padding-left: 2.5rem; }
    .mk-photo-1 { width: 88px; height: 62px; }
    .mk-photo-2 { width: 72px; height: 72px; left: 48px; top: 46px; }
    .mk-photo-3 { width: 62px; height: 50px; top: 104px; }
    .mk-float-channels { min-width: 150px; padding: 0.7rem 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════
   VARIANTE : centralize — attributs & historique
══════════════════════════════════════════════════════════════ */

.mk-attr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border-light, #dfdfdf);
}
.mk-attr:last-of-type { border-bottom: none; }

.mk-attr-label {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
    flex-shrink: 0;
}

.mk-attr-value {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--c-text, #313131);
    background: var(--c-bg, #F6F6F6);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 10px;
    text-align: right;
}

/* Champ en cours d'édition : anneau de focus */
.mk-attr-value.is-editing {
    background: var(--c-white, #FFFFFF);
    border-color: var(--c-primary, #891769);
    color: var(--c-primary, #891769);
    box-shadow: 0 0 0 3px var(--c-accent-mauve-soft, rgba(137,23,105,0.09));
}

.mk-comp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.mk-comp-pct {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-primary, #891769);
}

.mk-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--c-bg, #F6F6F6);
    overflow: hidden;
}
.mk-progress > span {
    display: block;
    height: 100%;
    width: 92%;
    border-radius: 3px;
    background: var(--c-primary, #891769);
}

/* Satellite historique — en haut à droite */
.mk-float-history {
    top: 0;
    right: -12px;
    padding: 0.85rem 1.1rem;
    min-width: 186px;
}
.mk-float-history .mk-eyebrow { display: block; margin-bottom: 0.6rem; }

.mk-hist-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
}
.mk-hist-time {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    flex-shrink: 0;
}
.mk-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c-primary, #891769);
    color: var(--c-white, #FFFFFF);
    font-size: 0.6rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mk-hist-name {
    font-size: 0.76rem;
    font-weight: 300;
    color: var(--c-text, #313131);
    white-space: nowrap;
}

/* Satellite différentiel — en bas à gauche */
.mk-float-diff {
    bottom: 8px;
    left: 0;
    padding: 0.85rem 1.1rem;
    min-width: 176px;
}
.mk-float-diff .mk-eyebrow { display: block; margin-bottom: 0.55rem; }

.mk-diff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.22rem 0;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
}
.mk-diff-row strong { font-weight: 400; font-size: 0.78rem; }
.mk-diff-old { color: var(--c-text-muted, #a3a3a3); text-decoration: line-through; }
.mk-diff-new { color: var(--c-action, #9abd00); }

/* ══════════════════════════════════════════════════════════════
   VARIANTE : publish — canaux de diffusion
══════════════════════════════════════════════════════════════ */

.mk-chan {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--c-border-light, #dfdfdf);
}
.mk-chan:last-of-type { border-bottom: none; }

.mk-chan-name {
    font-size: 0.83rem;
    font-weight: 400;
    color: var(--c-text, #313131);
    flex: 1;
    min-width: 0;
}

.mk-status {
    font-size: 0.66rem;
    font-weight: 400;
    padding: 2px 9px;
    border-radius: var(--radius-pill, 30px);
    flex-shrink: 0;
}
.mk-status.is-live {
    background: rgba(154, 189, 0, 0.16);
    color: #6b8400;
}
.mk-status.is-wait {
    background: var(--c-accent-amber-soft, rgba(207,127,20,0.11));
    color: var(--c-accent-amber, #cf7f14);
}

.mk-chan-time {
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    flex-shrink: 0;
    min-width: 62px;
    text-align: right;
}

.mk-sync {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
}
.mk-sync-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-action, #9abd00);
    flex-shrink: 0;
}

.mk-format-list { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.mk-chip-plain {
    background: var(--c-bg, #F6F6F6);
    color: var(--c-text-soft, #6a6a6a);
}

/* Satellite exports — en haut à droite */
.mk-float-formats {
    top: 0;
    right: -12px;
    padding: 0.8rem 1rem;
}
.mk-float-formats .mk-eyebrow { display: block; margin-bottom: 0.5rem; }

/* Satellite langues — en bas à gauche */
.mk-float-langs {
    bottom: 6px;
    left: 0;
    padding: 0.8rem 1rem;
}
.mk-float-langs .mk-eyebrow { display: block; margin-bottom: 0.5rem; }



/* ══════════════════════════════════════════════════════════════
   VARIANTE : comply — déclaration nutritionnelle
══════════════════════════════════════════════════════════════ */

.mk-nutri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--c-border-light, #dfdfdf);
}
.mk-nutri:last-of-type { border-bottom: none; }
.mk-nutri.is-sub { padding-left: 1rem; }
.mk-nutri.is-sub .mk-nutri-label {
    font-style: italic;
    color: var(--c-text-muted, #a3a3a3);
}

.mk-nutri-label {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
}
.mk-nutri-value {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--c-text, #313131);
    white-space: nowrap;
}

.mk-allergen-note {
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--c-primary, #891769);
    margin: 0.6rem 0 0;
}

/* Satellite QR — en bas à gauche, en débordement */
.mk-float-qr {
    bottom: 12px;
    left: -12px;
    padding: 0.9rem;
    text-align: center;
}
.mk-qr { width: 88px; margin: 0 auto; }
.mk-qr-svg { width: 100%; height: auto; display: block; }
.mk-qr-mod  { fill: var(--c-plum, #3f1134); }
.mk-qr-hole { fill: var(--c-white, #FFFFFF); }

.mk-qr-caption {
    display: block;
    font-size: 0.64rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    margin-top: 0.5rem;
    letter-spacing: 0.04em;
}

/* Satellite marchés — en haut à droite */
.mk-float-markets {
    top: 0;
    right: -12px;
    padding: 0.85rem 1.1rem;
    min-width: 148px;
}
.mk-float-markets .mk-eyebrow { display: block; margin-bottom: 0.55rem; }

/* ══════════════════════════════════════════════════════════════
   VARIANTE : connect — connecteurs & flux
══════════════════════════════════════════════════════════════ */

.mk-hub {
    text-align: center;
    padding: 1.1rem 1rem;
    margin-bottom: 1.1rem;
    background: var(--c-accent-mauve-soft, rgba(137,23,105,0.09));
    border-radius: var(--radius-sm, 10px);
}
.mk-hub-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--c-primary, #891769);
    line-height: 1.1;
}
.mk-hub-label span { color: var(--c-action, #9abd00); }
.mk-hub-sub {
    display: block;
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--c-text-soft, #6a6a6a);
    margin-top: 0.2rem;
}

.mk-conn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.48rem 0;
    border-bottom: 1px solid var(--c-border-light, #dfdfdf);
}
.mk-conn:last-of-type { border-bottom: none; }

/* Trait de liaison vers le noyau */
.mk-conn-line {
    width: 18px;
    height: 1px;
    background: var(--c-border, #d6d6d6);
    flex-shrink: 0;
}

.mk-conn-name {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--c-text, #313131);
    flex: 1;
    min-width: 0;
}

.mk-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mk-dot.is-ok   { background: var(--c-action, #9abd00); }
.mk-dot.is-wait { background: var(--c-accent-amber, #cf7f14); }

.mk-conn-state {
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    flex-shrink: 0;
    min-width: 78px;
    text-align: right;
}

/* Satellite journal — en bas à gauche */
.mk-float-log {
    bottom: 8px;
    left: -8px;
    padding: 0.8rem 1rem;
    min-width: 198px;
}
.mk-float-log .mk-eyebrow { display: block; margin-bottom: 0.55rem; }

.mk-log-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.68rem;
    font-weight: 300;
}
.mk-log-time { color: var(--c-text-muted, #a3a3a3); flex-shrink: 0; }
.mk-log-verb {
    color: var(--c-primary, #891769);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 30px;
}
.mk-log-path {
    color: var(--c-text-soft, #6a6a6a);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.64rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Satellite disponibilité — en haut à droite */
.mk-float-uptime {
    top: 0;
    right: -12px;
    padding: 0.75rem 1.1rem;
    text-align: center;
}
.mk-uptime-val {
    display: block;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--c-action, #9abd00);
    line-height: 1;
}
.mk-uptime-label {
    display: block;
    font-size: 0.64rem;
    font-weight: 300;
    color: var(--c-text-muted, #a3a3a3);
    margin-top: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   Ajustements communs aux variantes de la page plateforme
   Ces montages sont centrés dans leur colonne, sans grappe photo.
══════════════════════════════════════════════════════════════ */

.mk-centralize,
.mk-publish,
.mk-comply,
.mk-connect {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

@media screen and (max-width: 1199px) {
    .mk-centralize,
    .mk-publish,
    .mk-comply,
    .mk-connect {
        max-width: 360px;
    }
    .mk-float-history,
    .mk-float-markets,
    .mk-float-formats,
    .mk-float-uptime { right: -4px; }
    .mk-float-diff,
    .mk-float-langs,
    .mk-float-log    { left: -4px; }
    .mk-float-qr     { left: -6px; }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — flottement + parallaxe
   
   Deux effets qui cohabitent sans se marcher dessus :
     · le flottement écrit dans « transform »
     · la parallaxe écrit dans « translate »
   Ce sont deux propriétés indépendantes que le navigateur compose
   automatiquement. Sans cette séparation, la seconde écraserait la première.

   La variable --p est posée par assets/js/main.js et vaut -1 (l'élément
   entre par le bas) → 0 (il est centré) → 1 (il sort par le haut).
   Sa valeur de repli est 0 : sans JavaScript, rien ne bouge et la mise
   en page reste strictement identique.

   Réglage des amplitudes : modifiez uniquement les valeurs en px
   ci-dessous. Une valeur négative fait monter l'élément quand on
   descend, une positive le fait retarder.
══════════════════════════════════════════════════════════════ */

/* ── Cycles de flottement ─────────────────────────────────────
   Trois cycles de durées premières entre elles : les satellites ne
   se resynchronisent jamais, le mouvement ne paraît pas mécanique. */

@keyframes mkFloatA {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes mkFloatB {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@keyframes mkFloatC {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-4.5px) rotate(0.4deg); }
}

/* ── Activation : grand écran uniquement ──────────────────────
   Sous 992 px, la parallaxe produit des saccades sur mobile et le
   flottement n'apporte rien sur un écran qu'on fait défiler vite. */

@media screen and (min-width: 992px) {

    /* Flottement des satellites */
    .mk-float-comply   { animation: mkFloatA 6s   ease-in-out infinite; }
    .mk-float-channels { animation: mkFloatB 7.5s ease-in-out infinite; }
    .mk-float-history  { animation: mkFloatA 6.5s ease-in-out infinite; }
    .mk-float-diff     { animation: mkFloatB 8s   ease-in-out infinite; }
    .mk-float-formats  { animation: mkFloatA 7s   ease-in-out infinite; }
    .mk-float-langs    { animation: mkFloatB 8.5s ease-in-out infinite; }
    .mk-float-qr       { animation: mkFloatC 5.5s ease-in-out infinite; }
    .mk-float-markets  { animation: mkFloatA 7.5s ease-in-out infinite; }
    .mk-float-log      { animation: mkFloatB 6.5s ease-in-out infinite; }
    .mk-float-uptime   { animation: mkFloatA 8s   ease-in-out infinite; }

    /* Flottement des vignettes photo, décalé pour éviter le bloc */
    .mk-photo-1 { animation: mkFloatC 7s   ease-in-out infinite; }
    .mk-photo-2 { animation: mkFloatB 8.5s ease-in-out infinite; }
    .mk-photo-3 { animation: mkFloatC 6s   ease-in-out infinite 0.8s; }

    /* Flottement des vignettes photo, décalé pour éviter le bloc */
    .mk-pairing-1 { animation: mkFloatC 7s   ease-in-out infinite; }
    .mk-pairing-2 { animation: mkFloatB 8.5s ease-in-out infinite; }
    .mk-pairing-3 { animation: mkFloatC 6s   ease-in-out infinite 0.8s; }

    /* Parallaxe — la carte principale reste immobile, elle sert d'ancrage.
       Seuls les éléments périphériques se décalent. */
    .mk-photos         { translate: 0 calc(var(--p, 0) * -14px); }
    .mk-pairings       { translate: 0 calc(var(--p, 0) * -7px); }
    .mk-float-comply   { translate: 0 calc(var(--p, 0) * -11px); }
    .mk-float-channels { translate: 0 calc(var(--p, 0) *  13px); }
    .mk-float-history  { translate: 0 calc(var(--p, 0) * -12px); }
    .mk-float-diff     { translate: 0 calc(var(--p, 0) *  21px); } /*14*/
    .mk-float-formats  { translate: 0 calc(var(--p, 0) * -12px); }
    .mk-float-langs    { translate: 0 calc(var(--p, 0) *  19.5px); } /*13*/
    .mk-float-qr       { translate: 0 calc(var(--p, 0) *  14px); }
    .mk-float-markets  { translate: 0 calc(var(--p, 0) * -12px); }
    .mk-float-log      { translate: 0 calc(var(--p, 0) *  13px); }
    .mk-float-uptime   { translate: 0 calc(var(--p, 0) * -11px); }

    /* Indique au navigateur de préparer une couche graphique.
       Limité aux éléments réellement animés. */
    .mk-photos,
    .mk-float { will-change: translate, transform; }
}

/* ── Respect des préférences système ──────────────────────────
   Les troubles vestibulaires rendent le mouvement à l'écran réellement
   pénible. Cette règle n'est pas une option de confort. */

@media (prefers-reduced-motion: reduce) {
    .mk-float,
    .mk-photos,
    .mk-photo-1,
    .mk-photo-2,
    .mk-photo-3 {
        animation: none !important;
        translate: none !important;
        will-change: auto;
    }
}