/* ═══════════════════════════════════════════════════════════════════════════
   ML Carrousel — présentation publique

   NEUTRE PAR CONSTRUCTION : aucune couleur n'est imposée. Tout passe par des
   variables avec repli, et les valeurs par défaut s'appuient sur currentColor,
   donc le carrousel adopte les couleurs du thème qui l'accueille. Pour
   l'adapter, il suffit de redéfinir ces variables dans le CSS du thème :

     .ml-carr { --mlc-accent:#C4862A; --mlc-btn-bg:#fff; --mlc-btn-fg:#5C3317; }

   Le défilement est natif (overflow + scroll-snap) : tactile d'origine,
   fluide, et fonctionnel même sans JavaScript.
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-carr {
    --mlc-per: 3;
    --mlc-per-tab: 2;
    --mlc-per-mob: 1;
    --mlc-gap: 16px;
    --mlc-radius: 8px;
    --mlc-ratio: 1 / 1;
    --mlc-accent: currentColor;
    --mlc-btn-bg: rgba(255, 255, 255, .92);
    --mlc-btn-fg: #1f1f1f;
    --mlc-btn-bord: rgba(0, 0, 0, .14);
    --mlc-ombre: 0 2px 10px rgba(0, 0, 0, .12);

    position: relative;
    margin-block: 1.5rem;
}

.ml-carr__titre {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Réservé aux lecteurs d'écran — jamais display:none, qui les en priverait. */
.ml-carr__sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.ml-carr__zone { position: relative; }

/* ── Piste ──────────────────────────────────────────────────────────────── */
.ml-carr__piste {
    display: flex;
    gap: var(--mlc-gap);
    margin: 0; padding: 2px;          /* 2px : laisse respirer le halo de focus */
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;   /* évite de déclencher le « retour » du navigateur */
}
.ml-carr__piste::-webkit-scrollbar { display: none; }

/* Le focus doit rester visible : la piste est atteignable au clavier. */
.ml-carr__piste:focus-visible {
    outline: 3px solid var(--mlc-accent);
    outline-offset: 3px;
    border-radius: var(--mlc-radius);
}

.ml-carr__vue {
    flex: 0 0 calc((100% - (var(--mlc-per) - 1) * var(--mlc-gap)) / var(--mlc-per));
    min-width: 0;
    scroll-snap-align: start;
}

.ml-carr__figure { margin: 0; height: 100%; }

.ml-carr__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--mlc-ratio);
    object-fit: cover;
    border-radius: var(--mlc-radius);
}
.ml-carr--libre .ml-carr__img { aspect-ratio: auto; }

.ml-carr__lien { display: block; border-radius: var(--mlc-radius); }
.ml-carr__lien:focus-visible {
    outline: 3px solid var(--mlc-accent);
    outline-offset: 3px;
}

/* Média non visuel (PDF, archive…) */
.ml-carr__doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem; padding: 1.25rem; text-align: center;
    aspect-ratio: var(--mlc-ratio);
    border: 1px solid var(--mlc-btn-bord);
    border-radius: var(--mlc-radius);
    background: rgba(0, 0, 0, .03);
}
.ml-carr__doc-nom { font-size: .82rem; line-height: 1.4; word-break: break-word; }

.ml-carr__legende {
    margin-top: .55rem;
    font-size: .82rem; line-height: 1.5;
    opacity: .85;
}

/* ── Effet « fondu » ────────────────────────────────────────────────────────
   Les vues hors champ s'estompent sans disparaître : elles restent dans le
   flux, donc atteignables au clavier et lisibles par les lecteurs d'écran. */
.ml-carr--fondu .ml-carr__vue {
    transition: opacity .45s ease;
    opacity: .35;
}
.ml-carr--fondu .ml-carr__piste:hover .ml-carr__vue,
.ml-carr--fondu .ml-carr__piste:focus-within .ml-carr__vue { opacity: 1; }
@supports (animation-timeline: view()) {
    .ml-carr--fondu .ml-carr__vue {
        animation: mlc-fondu linear both;
        animation-timeline: view(inline);
        animation-range: entry 0% cover 22%;
    }
    @keyframes mlc-fondu { from { opacity: .3 } to { opacity: 1 } }
}

/* ── Flèches ───────────────────────────────────────────────────────────── */
.ml-carr__fleche {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 44px; height: 44px;          /* cible tactile — WCAG 2.5.5 */
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mlc-btn-bord);
    border-radius: 50%;
    background: var(--mlc-btn-bg);
    color: var(--mlc-btn-fg);
    box-shadow: var(--mlc-ombre);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.ml-carr__fleche--prev { left: -14px; }
.ml-carr__fleche--next { right: -14px; }
.ml-carr__fleche:hover { transform: translateY(-50%) scale(1.06); }
.ml-carr__fleche:focus-visible {
    outline: 3px solid var(--mlc-accent);
    outline-offset: 2px;
}
.ml-carr__fleche[disabled] { opacity: .35; cursor: default; transform: translateY(-50%); }

/* ── Barre inférieure : pause + pastilles ──────────────────────────────── */
.ml-carr__barre {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .75rem 1rem;
    margin-top: 1rem;
}

.ml-carr__pause {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .5rem 1rem;
    border: 1px solid var(--mlc-btn-bord);
    border-radius: 999px;
    background: var(--mlc-btn-bg);
    color: var(--mlc-btn-fg);
    font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer;
}
.ml-carr__pause:focus-visible { outline: 3px solid var(--mlc-accent); outline-offset: 2px; }

/* Deux barres = en lecture (le bouton met en pause) ; triangle = en pause. */
.ml-carr__pause-icone {
    width: 10px; height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.ml-carr__pause.is-paused .ml-carr__pause-icone {
    width: 0; height: 0;
    border: 6px solid transparent;
    border-left: 10px solid currentColor;
    border-right: 0;
}

.ml-carr__pastilles { display: flex; align-items: center; gap: .4rem; }
.ml-carr__pastille {
    /* 24px de zone cliquable pour un point de 8px : la cible reste confortable
       sans alourdir le rendu. */
    width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; cursor: pointer;
}
.ml-carr__pastille::before {
    content: ""; display: block;
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; opacity: .3;
    transition: opacity .2s ease, transform .2s ease;
}
.ml-carr__pastille[aria-current="true"]::before {
    opacity: 1; transform: scale(1.4);
    background: var(--mlc-accent);
}
.ml-carr__pastille:focus-visible { outline: 3px solid var(--mlc-accent); outline-offset: 1px; border-radius: 50%; }

/* ── Adaptatif ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ml-carr__vue { flex-basis: calc((100% - (var(--mlc-per-tab) - 1) * var(--mlc-gap)) / var(--mlc-per-tab)); }
    .ml-carr__fleche--prev { left: 4px; }
    .ml-carr__fleche--next { right: 4px; }
}
@media (max-width: 640px) {
    .ml-carr__vue { flex-basis: calc((100% - (var(--mlc-per-mob) - 1) * var(--mlc-gap)) / var(--mlc-per-mob)); }
    /* Flèches masquées sur mobile : le défilement au doigt est plus naturel,
       et les pastilles restent disponibles pour la navigation directe. */
    .ml-carr__fleche { display: none; }
}

/* ── Animations réduites ───────────────────────────────────────────────────
   Demande explicite de l'internaute : plus aucun mouvement animé. */
@media (prefers-reduced-motion: reduce) {
    .ml-carr__piste { scroll-behavior: auto; }
    .ml-carr__fleche, .ml-carr__pastille::before, .ml-carr--fondu .ml-carr__vue {
        transition: none !important;
        animation: none !important;
    }
    .ml-carr--fondu .ml-carr__vue { opacity: 1; }
}

/* ── Impression ────────────────────────────────────────────────────────── */
@media print {
    .ml-carr__piste { overflow: visible; flex-wrap: wrap; }
    .ml-carr__fleche, .ml-carr__barre { display: none; }
}