/* threejs_menus_links - optionnel de flotte (extrait de la feuille partagee d'EDP le 2026-11-05) */
/* ── Menus Links element (threejs_menus_links) ──────────────────────────────── */

/* Outer container: JS sets height, position:relative for absolute children */
.tml-wrap {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: visible;
}

/* Canvas for connecting lines — sits behind cards and central image */
.tml-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 0;
}

/* Central image: JS sets top and width each frame; CSS centres horizontally */
.tml-center-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.tml-center-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Cards: JS sets left/top/opacity/pointer-events each frame */
.tml-card-wrap {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}

.tml-card {
    width: 100%;
    box-sizing: border-box;   /* v3 : le cadre et le padding restent DANS la largeur de la carte */
}

.tml-card-img {
    width: 100%;
    overflow: hidden;
}

.tml-card-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Panel link overlay */
.tml-linked {
    position: relative;
}
.tml-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.tml-linked .uk-card-title a,
.tml-linked .tml-card-img a {
    position: relative;
    z-index: 2;
}

.tml-card-content {
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Bordered (no background) - comme le Grid : cadre sur currentColor (lisible clair / sombre), champ « border color » prioritaire */
.tml-card-bordered {
    background: transparent;
    border: 1px solid rgba(128, 128, 128, .28);
    border-radius: 4px;
}
@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .tml-card-bordered {
        border-color: color-mix(in srgb, currentColor 22%, transparent);
    }
}

/* ── v3 (2026-11-05, SIX) ───────────────────────────────────────────────── */
/* Ratio (crop) : toutes les images au meme format */
.tml-ratio .tml-card-img img { width: 100%; max-width: none !important; aspect-ratio: var(--tml-ratio); object-fit: cover; height: auto; display: block; }
.tml-ratio .tml-card-img iframe { aspect-ratio: var(--tml-ratio) !important; }
/* Rotation continue du logo autour de l axe vertical */
.tml-center-wrap { perspective: 900px; }
.tml-spin { animation: tml-spin 12s linear infinite; }
@keyframes tml-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
/* Mode MOBILE (< 960 px, pose par le script) : logo en haut, cartes en colonnes, traits par le cote */
.tml-wrap.tml-mob {
    display: grid;
    grid-template-columns: repeat(var(--tml-cols, 1), minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 18px;
    align-items: start;
    height: auto !important;
}
.tml-wrap.tml-mob { box-sizing: border-box; width: 100%; max-width: 100%; }   /* v4b : ne deborde plus a droite */
.tml-mob .tml-card-wrap { min-width: 0; max-width: 100%; }
.tml-mob .tml-card-wrap .uk-text-nowrap { white-space: normal; }
.tml-mob .tml-card-img img { max-width: 100% !important; height: auto; }
.tml-wrap.tml-mob.tml-c1 { row-gap: 22px; }
   /* la place du trait vertical entre deux cartes */
.tml-wrap.tml-mob.tml-match { align-items: stretch; }
.tml-mob.tml-match .tml-card-wrap > .tml-card { height: 100%; }
.tml-mob .tml-center-wrap { position: relative !important; top: auto !important; left: auto !important; transform: none !important; grid-column: 1 / -1; justify-self: center; margin: 0 auto 22px; max-width: 70%; }
.tml-mob .tml-card-wrap { position: relative !important; left: auto !important; top: auto !important; width: auto !important; opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.tml-mob .tml-card-wrap.tml-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .tml-spin { animation: none; } .tml-mob .tml-card-wrap { transition: none; } }