/* =============================================================================
   basketball.css — Football UY1
   Formations (alignées avec le HTML) :
     2-3        → Pick & Roll
     1-2-2      → Triangle
     4-out      → 4-Out Spread
     zone-2-3   → Zone 2-3
   ============================================================================= */


/* ══ 1. TERRAIN BASKETBALL ════════════════════════════════════════════════════ */
.terrain {
    height: 480px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 40px
        ),
        linear-gradient(to bottom,
            #c4832a 0%, #b87020 30%, #a86010 50%, #b87020 70%, #c4832a 100%);
}
.terrain::before { content: none; }
.terrain::after  { content: none; }


/* ══ 2. ÉLÉMENTS GRAPHIQUES ══════════════════════════════════════════════════ */

/* Ligne médiane */
.basket-midline {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,0.9);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Cercle central */
.center-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 100px; height: 100px;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Raquette (paint) bas */
.basket-paint-bottom {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 150px; height: 120px;
    border: 3px solid rgba(255,255,255,0.9);
    border-bottom: none;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
/* Raquette haut */
.basket-paint-top {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 150px; height: 120px;
    border: 3px solid rgba(255,255,255,0.9);
    border-top: none;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

/* Cercle lancer franc bas */
.basket-ft-arc-bottom {
    position: absolute;
    bottom: 88px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 100px;
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    pointer-events: none;
}
/* Cercle lancer franc haut */
.basket-ft-arc-top {
    position: absolute;
    top: 88px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 100px;
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    pointer-events: none;
}

/* Arc 3 points bas */
.basket-3pt-bottom {
    position: absolute;
    bottom: -55px; left: 50%;
    transform: translateX(-50%);
    width: 340px; height: 210px;
    border: 3px solid rgba(255,255,255,0.8);
    border-bottom: none;
    border-radius: 170px 170px 0 0;
    pointer-events: none;
}
/* Arc 3 points haut */
.basket-3pt-top {
    position: absolute;
    top: -55px; left: 50%;
    transform: translateX(-50%);
    width: 340px; height: 210px;
    border: 3px solid rgba(255,255,255,0.8);
    border-top: none;
    border-radius: 0 0 170px 170px;
    pointer-events: none;
}

/* Panneaux */
.basket-board-bottom {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    pointer-events: none; z-index: 3;
}
.basket-board-top {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    pointer-events: none; z-index: 3;
}

/* Anneaux */
.basket-hoop-bottom {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    border: 3px solid rgba(255,150,0,0.9);
    border-radius: 50%;
    pointer-events: none; z-index: 3;
}
.basket-hoop-top {
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    border: 3px solid rgba(255,150,0,0.9);
    border-radius: 50%;
    pointer-events: none; z-index: 3;
}

/* Ligne de fond (basket-lane) */
.basket-lane-bottom {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 50px;
    border: 2px solid rgba(255,255,255,0.4);
    border-bottom: none;
    pointer-events: none;
}
.basket-lane-top {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 50px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top: none;
    pointer-events: none;
}

/* Ligne lancer franc */
.basket-ft-bottom {
    position: absolute;
    bottom: 120px; left: 50%;
    transform: translateX(-50%);
    width: 150px; height: 2px;
    background: rgba(255,255,255,0.7);
    pointer-events: none;
}
.basket-ft-top {
    position: absolute;
    top: 120px; left: 50%;
    transform: translateX(-50%);
    width: 150px; height: 2px;
    background: rgba(255,255,255,0.7);
    pointer-events: none;
}


/* ══ 3. POSITIONS JOUEURS ══════════════════════════════════════════════════════
   Classes (depuis le HTML via position.replace('_','-')) :
     meneur, arriere, ailier, ailier-fort, pivot
   =========================================================================== */

/* ── 2-3 Pick & Roll ── */
[data-formation="2-3"] .equipe-domicile .meneur      { bottom: 310px; left: 35%; }
[data-formation="2-3"] .equipe-domicile .arriere      { bottom: 310px; left: 65%; }
[data-formation="2-3"] .equipe-domicile .ailier       { bottom: 180px; left: 20%; }
[data-formation="2-3"] .equipe-domicile .ailier-fort  { bottom: 180px; left: 80%; }
[data-formation="2-3"] .equipe-domicile .pivot        { bottom: 100px; left: 50%; }

[data-formation="2-3"] .equipe-exterieur .meneur      { top: 310px; left: 65%; }
[data-formation="2-3"] .equipe-exterieur .arriere      { top: 310px; left: 35%; }
[data-formation="2-3"] .equipe-exterieur .ailier       { top: 180px; left: 80%; }
[data-formation="2-3"] .equipe-exterieur .ailier-fort  { top: 180px; left: 20%; }
[data-formation="2-3"] .equipe-exterieur .pivot        { top: 100px; left: 50%; }

/* ── 1-2-2 Triangle ── */
[data-formation="1-2-2"] .equipe-domicile .meneur     { bottom: 330px; left: 50%; }
[data-formation="1-2-2"] .equipe-domicile .arriere     { bottom: 245px; left: 25%; }
[data-formation="1-2-2"] .equipe-domicile .ailier      { bottom: 245px; left: 75%; }
[data-formation="1-2-2"] .equipe-domicile .ailier-fort { bottom: 130px; left: 30%; }
[data-formation="1-2-2"] .equipe-domicile .pivot       { bottom: 130px; left: 70%; }

[data-formation="1-2-2"] .equipe-exterieur .meneur     { top: 330px; left: 50%; }
[data-formation="1-2-2"] .equipe-exterieur .arriere     { top: 245px; left: 75%; }
[data-formation="1-2-2"] .equipe-exterieur .ailier      { top: 245px; left: 25%; }
[data-formation="1-2-2"] .equipe-exterieur .ailier-fort { top: 130px; left: 70%; }
[data-formation="1-2-2"] .equipe-exterieur .pivot       { top: 130px; left: 30%; }

/* ── 4-out Spread ── */
[data-formation="4-out"] .equipe-domicile .meneur     { bottom: 320px; left: 50%; }
[data-formation="4-out"] .equipe-domicile .arriere     { bottom: 280px; left: 15%; }
[data-formation="4-out"] .equipe-domicile .ailier      { bottom: 280px; left: 85%; }
[data-formation="4-out"] .equipe-domicile .ailier-fort { bottom: 180px; left: 20%; }
[data-formation="4-out"] .equipe-domicile .pivot       { bottom: 90px;  left: 50%; }

[data-formation="4-out"] .equipe-exterieur .meneur     { top: 320px; left: 50%; }
[data-formation="4-out"] .equipe-exterieur .arriere     { top: 280px; left: 85%; }
[data-formation="4-out"] .equipe-exterieur .ailier      { top: 280px; left: 15%; }
[data-formation="4-out"] .equipe-exterieur .ailier-fort { top: 180px; left: 80%; }
[data-formation="4-out"] .equipe-exterieur .pivot       { top: 90px;  left: 50%; }

/* ── zone-2-3 Défense ── */
[data-formation="zone-2-3"] .equipe-domicile .meneur     { bottom: 340px; left: 30%; }
[data-formation="zone-2-3"] .equipe-domicile .arriere     { bottom: 340px; left: 70%; }
[data-formation="zone-2-3"] .equipe-domicile .ailier      { bottom: 195px; left: 15%; }
[data-formation="zone-2-3"] .equipe-domicile .ailier-fort { bottom: 195px; left: 50%; }
[data-formation="zone-2-3"] .equipe-domicile .pivot       { bottom: 195px; left: 85%; }

[data-formation="zone-2-3"] .equipe-exterieur .meneur     { top: 340px; left: 70%; }
[data-formation="zone-2-3"] .equipe-exterieur .arriere     { top: 340px; left: 30%; }
[data-formation="zone-2-3"] .equipe-exterieur .ailier      { top: 195px; left: 85%; }
[data-formation="zone-2-3"] .equipe-exterieur .ailier-fort { top: 195px; left: 50%; }
[data-formation="zone-2-3"] .equipe-exterieur .pivot       { top: 195px; left: 15%; }


/* ══ 4. RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .terrain { height: 380px; }
}
@media (max-width: 480px) {
    .terrain { height: 280px; }
}