/* ── Image Hotspots ─────────────────────────────────────────────────────────── */
.mt-hs {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mhs-radius, 0);
    user-select: none;
}
.mt-hs__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* Taille originale : pas de ratio imposé, l'image garde ses proportions
   (les points, positionnés en %, restent exactement au même endroit). */
.mt-hs--original .mt-hs__img {
    height: auto;
    object-fit: initial;
}

/* ── Point ── */
.mt-hs__point {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    outline: none;
}
.mt-hs__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--mhs-dot-size, 32px);
    height: var(--mhs-dot-size, 32px);
    border-radius: 50%;
    background: var(--mhs-dot-bg, var(--mb-c-accent));
    color: var(--mhs-dot-color, var(--mb-c-on-accent));
    font-size: calc(var(--mhs-dot-size, 32px) * .55);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mb-c-shadow) 25%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mt-hs__point:hover .mt-hs__dot,
.mt-hs__point.is-open .mt-hs__dot,
.mt-hs__point:focus-visible .mt-hs__dot,
.mt-hs__dot:focus-visible {
    transform: scale(1.15);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mb-c-shadow) 30%, transparent);
}
.mt-hs__point.is-open .mt-hs__dot { transform: scale(1.15) rotate(45deg); }

/* Animation pulse */
@keyframes mhs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
/* Halo de la couleur du point (ou de la couleur choisie) — 1.10.50.
   Les navigateurs sans color-mix() gardent le halo bleu ci-dessus. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    @keyframes mhs-pulse {
        0%   { box-shadow: 0 0 0 0    color-mix(in srgb, var(--mhs-pulse-color, var(--mhs-dot-bg, var(--mb-c-accent))) 50%, transparent); }
        70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--mhs-pulse-color, var(--mhs-dot-bg, var(--mb-c-accent))) 0%,  transparent); }
        100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--mhs-pulse-color, var(--mhs-dot-bg, var(--mb-c-accent))) 0%,  transparent); }
    }
}
.mt-hs__point--pulse .mt-hs__dot {
    animation: mhs-pulse 2s ease-out infinite;
}
.mt-hs__point:hover .mt-hs__dot,
.mt-hs__point.is-open .mt-hs__dot {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .mt-hs__point--pulse .mt-hs__dot { animation: none; }
}

/* ── Tooltip ── */
.mt-hs__tooltip {
    position: absolute;
    z-index: 20;
    width: var(--mhs-tip-width, 220px);
    background: var(--mhs-tip-bg, var(--mb-c-surface));
    color: var(--mhs-tip-color, var(--mb-c-text));
    border-radius: var(--mhs-tip-radius, 8px);
    padding: 12px 14px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--mb-c-shadow) 15%, transparent);
    pointer-events: none;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .18s ease, transform .18s ease;
    white-space: normal;
    min-width: 140px;
}

/* Positions tooltip */
.mt-hs__tooltip--bottom { top: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(.92); }
.mt-hs__tooltip--top    { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(.92); }
.mt-hs__tooltip--right  { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.92); }
.mt-hs__tooltip--left   { right: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.92); }

/* Affichage hover */
.mt-hs--trigger-hover .mt-hs__point:hover .mt-hs__tooltip,
.mt-hs--trigger-hover .mt-hs__point:focus-visible .mt-hs__tooltip,
.mt-hs--trigger-both  .mt-hs__point:hover .mt-hs__tooltip,
.mt-hs--trigger-both  .mt-hs__point:focus-visible .mt-hs__tooltip {
    opacity: 1;
    pointer-events: auto;
}
.mt-hs--trigger-hover .mt-hs__point:hover .mt-hs__tooltip--bottom,
.mt-hs--trigger-both  .mt-hs__point:hover .mt-hs__tooltip--bottom,
.mt-hs--trigger-hover .mt-hs__point:focus-visible .mt-hs__tooltip--bottom,
.mt-hs--trigger-both  .mt-hs__point:focus-visible .mt-hs__tooltip--bottom {
    transform: translateX(-50%) scale(1);
}
.mt-hs--trigger-hover .mt-hs__point:hover .mt-hs__tooltip--top,
.mt-hs--trigger-both  .mt-hs__point:hover .mt-hs__tooltip--top,
.mt-hs--trigger-hover .mt-hs__point:focus-visible .mt-hs__tooltip--top,
.mt-hs--trigger-both  .mt-hs__point:focus-visible .mt-hs__tooltip--top {
    transform: translateX(-50%) scale(1);
}
.mt-hs--trigger-hover .mt-hs__point:hover .mt-hs__tooltip--right,
.mt-hs--trigger-both  .mt-hs__point:hover .mt-hs__tooltip--right,
.mt-hs--trigger-hover .mt-hs__point:focus-visible .mt-hs__tooltip--right,
.mt-hs--trigger-both  .mt-hs__point:focus-visible .mt-hs__tooltip--right {
    transform: translateY(-50%) scale(1);
}
.mt-hs--trigger-hover .mt-hs__point:hover .mt-hs__tooltip--left,
.mt-hs--trigger-both  .mt-hs__point:hover .mt-hs__tooltip--left,
.mt-hs--trigger-hover .mt-hs__point:focus-visible .mt-hs__tooltip--left,
.mt-hs--trigger-both  .mt-hs__point:focus-visible .mt-hs__tooltip--left {
    transform: translateY(-50%) scale(1);
}
/* Affichage click (JS ajoute .is-open) */
.mt-hs__point.is-open .mt-hs__tooltip {
    opacity: 1;
    pointer-events: auto;
}
.mt-hs__point.is-open .mt-hs__tooltip--bottom { transform: translateX(-50%) scale(1); }
.mt-hs__point.is-open .mt-hs__tooltip--top    { transform: translateX(-50%) scale(1); }
.mt-hs__point.is-open .mt-hs__tooltip--right  { transform: translateY(-50%) scale(1); }

/* Clavier (1.0.2) : la bulle reste visible tant que le focus est sur un de ses liens.
   Avant, elle disparaissait dès que le focus quittait le point : lien atteint « à l'aveugle ». */
.mt-hs__point:focus-within .mt-hs__tooltip {
    opacity: 1;
    pointer-events: auto;
}
.mt-hs__point:focus-within .mt-hs__tooltip--bottom,
.mt-hs__point:focus-within .mt-hs__tooltip--top    { transform: translateX(-50%) scale(1); }
.mt-hs__point:focus-within .mt-hs__tooltip--right,
.mt-hs__point:focus-within .mt-hs__tooltip--left   { transform: translateY(-50%) scale(1); }
.mt-hs__point.is-open .mt-hs__tooltip--left   { transform: translateY(-50%) scale(1); }

/* Contenu tooltip */
.mt-hs__tip-title {
    display: block;
    font-size: var(--mhs-tip-title-size, .9rem);
    font-weight: 700;
    margin-bottom: 4px;
}
.mt-hs__tip-text {
    font-size: var(--mhs-tip-text-size, .82rem);
    line-height: 1.45;
    margin: 0 0 6px;
    opacity: .85;
}
.mt-hs__tip-link {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mhs-link-color, var(--mhs-dot-bg, var(--mb-c-accent)));
    text-decoration: underline;
}

/* ── Points numérotés (1.10.49) ── */
.mt-hs--numbered .mt-hs__dot {
    font-size: calc(var(--mhs-dot-size, 32px) * .45);
    font-variant-numeric: tabular-nums;
}
.mt-hs--numbered .mt-hs__point.is-open .mt-hs__dot { transform: scale(1.15); }
.mt-hs__point--static { cursor: default; }

/* Point mis en évidence depuis la légende */
.mt-hs__point.is-highlight { z-index: 15; }
.mt-hs__point.is-highlight .mt-hs__dot {
    transform: scale(1.2);
    animation: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mhs-dot-bg, var(--mb-c-accent)), 0 4px 14px color-mix(in srgb, var(--mb-c-shadow) 30%, transparent);
}

/* ── Légende sous l'image (1.10.49) ── */
.mt-hs-figure > .mt-hs { margin: 0; }
.mt-hs-legend {
    display: grid;
    grid-template-columns: repeat(var(--mhs-legend-cols, 1), minmax(0, 1fr));
    gap: 6px 24px;
    list-style: none;
    margin: 12px 0 0;
    padding: 14px 16px;
    background: var(--mhs-legend-bg, var(--mb-c-surface-alt));
    color: var(--mhs-legend-color, var(--mb-c-text));
    border: 1px solid var(--mhs-legend-border, color-mix(in srgb, var(--mb-c-text) 8%, transparent));
    border-radius: var(--mhs-radius, 0);
}
.mt-hs-legend__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color .15s ease;
}
.mt-hs-legend__item.is-highlight { background: color-mix(in srgb, var(--mb-c-text) 5%, transparent); }
.mt-hs-legend__num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mhs-dot-bg, var(--mb-c-accent));
    color: var(--mhs-dot-color, var(--mb-c-on-accent));
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: transform .15s ease;
}
.mt-hs-legend__item.is-highlight .mt-hs-legend__num { transform: scale(1.12); }
.mt-hs-legend__body { min-width: 0; padding-top: 3px; }
.mt-hs-legend__title {
    display: block;
    font-size: var(--mhs-legend-title-size, .95rem);
    color: var(--mhs-legend-title-color, inherit);
    font-weight: 700;
    line-height: 1.3;
}
.mt-hs-legend__text {
    font-size: var(--mhs-legend-text-size, .88rem);
    line-height: 1.5;
    margin: 2px 0 0;
    opacity: .85;
}
.mt-hs-legend__link {
    display: inline-block;
    margin-top: 4px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mhs-link-color, var(--mhs-dot-bg, var(--mb-c-accent)));
    text-decoration: underline;
}
@media (max-width: 600px) {
    .mt-hs-legend { grid-template-columns: 1fr; }
}

/* ── Taille des points sur tablette et mobile ──
   --mhs-dot-size-t / -m ne sont définis que si le réglage est renseigné ; sinon
   on retombe sur la taille de l'écran plus grand (rendu inchangé). */
@media (max-width: 980px) {
    .mt-hs__dot {
        width:  var(--mhs-dot-size-t, var(--mhs-dot-size, 32px));
        height: var(--mhs-dot-size-t, var(--mhs-dot-size, 32px));
        font-size: calc(var(--mhs-dot-size-t, var(--mhs-dot-size, 32px)) * .55);
    }
    .mt-hs--numbered .mt-hs__dot {
        font-size: calc(var(--mhs-dot-size-t, var(--mhs-dot-size, 32px)) * .45);
    }
}
@media (max-width: 600px) {
    .mt-hs__dot {
        width:  var(--mhs-dot-size-m, var(--mhs-dot-size-t, var(--mhs-dot-size, 32px)));
        height: var(--mhs-dot-size-m, var(--mhs-dot-size-t, var(--mhs-dot-size, 32px)));
        font-size: calc(var(--mhs-dot-size-m, var(--mhs-dot-size-t, var(--mhs-dot-size, 32px))) * .55);
    }
    .mt-hs--numbered .mt-hs__dot {
        font-size: calc(var(--mhs-dot-size-m, var(--mhs-dot-size-t, var(--mhs-dot-size, 32px))) * .45);
    }
    /* Zone tactile invisible d'au moins 36px autour des petits points,
       pour qu'ils restent faciles à toucher au doigt. */
    .mt-hs__point:not(.mt-hs__point--static)::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width:  max(100%, 36px);
        height: max(100%, 36px);
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
}

/* Mobile : tooltip toujours en bas si petit écran */
@media (max-width: 600px) {
    .mt-hs__tooltip {
        width: min(var(--mhs-tip-width, 220px), 70vw);
    }
}

/* Tailles */
.mt-product-swatches--sm .mt-swatch { width: 20px; height: 20px; font-size: 9px; }
.mt-product-swatches--md .mt-swatch { width: 28px; height: 28px; font-size: 10px; }
.mt-product-swatches--lg .mt-swatch { width: 36px; height: 36px; font-size: 11px; }

/* Badge texte */
.mt-swatch--text {
    border-radius: 4px;
    background: var(--mb-c-surface-alt);
    color: var(--mb-c-text);
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    width: auto !important;
    height: 20px !important;
}
.mt-product-swatches--md .mt-swatch--text { height: 24px !important; }
.mt-product-swatches--lg .mt-swatch--text { height: 28px !important; }

.mt-swatch--dark-text { color: var(--mb-c-text); }

/* Overflow "+X" */
.mt-swatch--overflow {
    background: var(--mb-c-line);
    color: var(--mb-c-muted);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    width: auto !important;
    padding: 0 5px;
}


/* Pastille = bouton (1.0.3) : contour de focus visible au clavier. */
.mt-hs__dot[role="button"] { cursor: pointer; }
.mt-hs__dot:focus { outline: none; }
.mt-hs__dot:focus-visible { outline: 2px solid var(--mhs-dot-bg, var(--mb-c-accent)); outline-offset: 3px; }