/* =============================================================================
   handball.css — Football UY1
   Formations (alignées avec le HTML) :
     6-0   → Défense plate
     5-1   → Verrou
     3-2-1 → Agressive
     3-3   → Attaque

   Classes CSS (depuis position.replace('_','-')) :
     gardien-hb, ailier-gauche-hb, arriere-gauche-hb,
     demi-centre-hb, arriere-droit-hb, ailier-droit-hb, pivot-hb
   ============================================================================= */


/* ══ 1. TERRAIN HANDBALL ══════════════════════════════════════════════════════ */
.terrain {
    height: 520px;
    background: linear-gradient(to bottom,
        #424242 0%, #303030 20%, #212121 50%, #303030 80%, #424242 100%);
}
.terrain::before { content: none; }
.terrain::after  { content: none; }

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

/* Ligne médiane */
.hb-ligne-6m-top,
.hb-ligne-6m-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}
.hb-ligne-6m-top    { top: 50%; transform: translateY(-50%); }
.hb-ligne-6m-bottom { display: none; } /* on garde seulement la ligne médiane */

/* Zone de but 6m — demi-cercle */
.hb-zone-but-bottom {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 290px; height: 155px;
    border: 3px solid rgba(255,255,255,0.9);
    border-bottom: none;
    border-radius: 145px 145px 0 0;
    background: rgba(255,100,0,0.1);
    pointer-events: none; z-index: 1;
}
.hb-zone-but-top {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 290px; height: 155px;
    border: 3px solid rgba(255,255,255,0.9);
    border-top: none;
    border-radius: 0 0 145px 145px;
    background: rgba(30,80,180,0.1);
    pointer-events: none; z-index: 1;
}

/* Ligne 9m pointillée */
.hb-ligne-9m-bottom {
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 450px; height: 225px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-bottom: none;
    border-radius: 225px 225px 0 0;
    pointer-events: none; z-index: 1;
}
.hb-ligne-9m-top {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 450px; height: 225px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-top: none;
    border-radius: 0 0 225px 225px;
    pointer-events: none; z-index: 1;
}

/* Buts */
.hb-but-bottom {
    position: absolute;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    width: 70px; height: 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
    pointer-events: none; z-index: 3;
}
.hb-but-top {
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 70px; height: 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
    pointer-events: none; z-index: 3;
}

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


/* ══ 3. POSITIONS JOUEURS ══════════════════════════════════════════════════════ */

/* ── 6-0 Défense plate ── */
[data-formation="6-0"] .equipe-domicile .gardien-hb        { bottom: 28px;  left: 50%; }
[data-formation="6-0"] .equipe-domicile .ailier-gauche-hb  { bottom: 166px; left: 5%;  }
[data-formation="6-0"] .equipe-domicile .arriere-gauche-hb { bottom: 174px; left: 22%; }
[data-formation="6-0"] .equipe-domicile .demi-centre-hb    { bottom: 174px; left: 40%; }
[data-formation="6-0"] .equipe-domicile .pivot-hb          { bottom: 174px; left: 60%; }
[data-formation="6-0"] .equipe-domicile .arriere-droit-hb  { bottom: 174px; left: 78%; }
[data-formation="6-0"] .equipe-domicile .ailier-droit-hb   { bottom: 166px; left: 95%; }

[data-formation="6-0"] .equipe-exterieur .gardien-hb        { top: 28px;  left: 50%; }
[data-formation="6-0"] .equipe-exterieur .ailier-gauche-hb  { top: 166px; left: 95%; }
[data-formation="6-0"] .equipe-exterieur .arriere-gauche-hb { top: 174px; left: 78%; }
[data-formation="6-0"] .equipe-exterieur .demi-centre-hb    { top: 174px; left: 60%; }
[data-formation="6-0"] .equipe-exterieur .pivot-hb          { top: 174px; left: 40%; }
[data-formation="6-0"] .equipe-exterieur .arriere-droit-hb  { top: 174px; left: 22%; }
[data-formation="6-0"] .equipe-exterieur .ailier-droit-hb   { top: 166px; left: 5%;  }

/* ── 5-1 Verrou ── */
[data-formation="5-1"] .equipe-domicile .gardien-hb        { bottom: 28px;  left: 50%; }
[data-formation="5-1"] .equipe-domicile .ailier-gauche-hb  { bottom: 162px; left: 5%;  }
[data-formation="5-1"] .equipe-domicile .arriere-gauche-hb { bottom: 174px; left: 24%; }
[data-formation="5-1"] .equipe-domicile .pivot-hb          { bottom: 174px; left: 50%; }
[data-formation="5-1"] .equipe-domicile .arriere-droit-hb  { bottom: 174px; left: 76%; }
[data-formation="5-1"] .equipe-domicile .ailier-droit-hb   { bottom: 162px; left: 95%; }
[data-formation="5-1"] .equipe-domicile .demi-centre-hb    { bottom: 270px; left: 50%; }

[data-formation="5-1"] .equipe-exterieur .gardien-hb        { top: 28px;  left: 50%; }
[data-formation="5-1"] .equipe-exterieur .ailier-gauche-hb  { top: 162px; left: 95%; }
[data-formation="5-1"] .equipe-exterieur .arriere-gauche-hb { top: 174px; left: 76%; }
[data-formation="5-1"] .equipe-exterieur .pivot-hb          { top: 174px; left: 50%; }
[data-formation="5-1"] .equipe-exterieur .arriere-droit-hb  { top: 174px; left: 24%; }
[data-formation="5-1"] .equipe-exterieur .ailier-droit-hb   { top: 162px; left: 5%;  }
[data-formation="5-1"] .equipe-exterieur .demi-centre-hb    { top: 270px; left: 50%; }

/* ── 3-2-1 Agressive ── */
[data-formation="3-2-1"] .equipe-domicile .gardien-hb        { bottom: 28px;  left: 50%; }
[data-formation="3-2-1"] .equipe-domicile .ailier-gauche-hb  { bottom: 162px; left: 8%;  }
[data-formation="3-2-1"] .equipe-domicile .ailier-droit-hb   { bottom: 162px; left: 92%; }
[data-formation="3-2-1"] .equipe-domicile .arriere-gauche-hb { bottom: 204px; left: 25%; }
[data-formation="3-2-1"] .equipe-domicile .arriere-droit-hb  { bottom: 204px; left: 75%; }
[data-formation="3-2-1"] .equipe-domicile .demi-centre-hb    { bottom: 242px; left: 50%; }
[data-formation="3-2-1"] .equipe-domicile .pivot-hb          { bottom: 300px; left: 50%; }

[data-formation="3-2-1"] .equipe-exterieur .gardien-hb        { top: 28px;  left: 50%; }
[data-formation="3-2-1"] .equipe-exterieur .ailier-gauche-hb  { top: 162px; left: 92%; }
[data-formation="3-2-1"] .equipe-exterieur .ailier-droit-hb   { top: 162px; left: 8%;  }
[data-formation="3-2-1"] .equipe-exterieur .arriere-gauche-hb { top: 204px; left: 75%; }
[data-formation="3-2-1"] .equipe-exterieur .arriere-droit-hb  { top: 204px; left: 25%; }
[data-formation="3-2-1"] .equipe-exterieur .demi-centre-hb    { top: 242px; left: 50%; }
[data-formation="3-2-1"] .equipe-exterieur .pivot-hb          { top: 300px; left: 50%; }

/* ── 3-3 Attaque ── */
[data-formation="3-3"] .equipe-domicile .gardien-hb        { bottom: 28px;  left: 50%; }
[data-formation="3-3"] .equipe-domicile .ailier-gauche-hb  { bottom: 170px; left: 8%;  }
[data-formation="3-3"] .equipe-domicile .demi-centre-hb    { bottom: 170px; left: 50%; }
[data-formation="3-3"] .equipe-domicile .ailier-droit-hb   { bottom: 170px; left: 92%; }
[data-formation="3-3"] .equipe-domicile .arriere-gauche-hb { bottom: 255px; left: 22%; }
[data-formation="3-3"] .equipe-domicile .pivot-hb          { bottom: 255px; left: 50%; }
[data-formation="3-3"] .equipe-domicile .arriere-droit-hb  { bottom: 255px; left: 78%; }

[data-formation="3-3"] .equipe-exterieur .gardien-hb        { top: 28px;  left: 50%; }
[data-formation="3-3"] .equipe-exterieur .ailier-gauche-hb  { top: 170px; left: 92%; }
[data-formation="3-3"] .equipe-exterieur .demi-centre-hb    { top: 170px; left: 50%; }
[data-formation="3-3"] .equipe-exterieur .ailier-droit-hb   { top: 170px; left: 8%;  }
[data-formation="3-3"] .equipe-exterieur .arriere-gauche-hb { top: 255px; left: 78%; }
[data-formation="3-3"] .equipe-exterieur .pivot-hb          { top: 255px; left: 50%; }
[data-formation="3-3"] .equipe-exterieur .arriere-droit-hb  { top: 255px; left: 22%; }


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