/* =============================================================================
   football.css — Football UY1
   CONTENU :
     1. Fond et dimensions du terrain football
     2. Lignes graphiques (surface, but, cercle central)
     3. Positions des joueurs pour chaque formation
     4. Responsive
   ============================================================================= */


/* ══ 1. TERRAIN FOOTBALL ══════════════════════════════════════════════════════ */
.terrain {
    height: 650px;
    background: linear-gradient(to bottom,
        #2d5a2d 0%, #1e4d1e 25%, #1a4d1a 50%, #1e4d1e 75%, #2d5a2d 100%);
}

/* Ligne médiane */
.terrain::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,0.9);
}

/* Cercle central */
.terrain::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 120px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Point central */
.center-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Surfaces de réparation */
.surface-reparation {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 250px; height: 140px;
    border: 2px solid rgba(255,255,255,0.8);
}
.surface-reparation.top    { top: 0;    border-top: none; }
.surface-reparation.bottom { bottom: 0; border-bottom: none; }

/* Surfaces de but */
.surface-but {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100px; height: 60px;
    border: 2px solid rgba(255,255,255,0.8);
}
.surface-but.top    { top: 0;    border-top: none; }
.surface-but.bottom { bottom: 0; border-bottom: none; }

/* Buts */
.but {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 60px; height: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 1px;
}
.but.top    { top: -3px; }
.but.bottom { bottom: -3px; }


/* ══ 2. POSITIONS JOUEURS ══════════════════════════════════════════════════════
   Convention :
     - equipe-domicile  : attaque vers le HAUT  (bottom = distance depuis bas)
     - equipe-exterieur : attaque vers le BAS   (top = distance depuis haut)
   =========================================================================== */

/* ── FORMATION 4-3-3 ── */
[data-formation="4-3-3"] .equipe-domicile .gardien              { bottom: 30px;  left: 50%; }
[data-formation="4-3-3"] .equipe-domicile .lateral-droit        { bottom: 110px; left: 85%; }
[data-formation="4-3-3"] .equipe-domicile .defenseur-central-1  { bottom: 110px; left: 35%; }
[data-formation="4-3-3"] .equipe-domicile .defenseur-central-2  { bottom: 110px; left: 65%; }
[data-formation="4-3-3"] .equipe-domicile .lateral-gauche       { bottom: 110px; left: 15%; }
[data-formation="4-3-3"] .equipe-domicile .milieu-defensif      { bottom: 200px; left: 50%; }
[data-formation="4-3-3"] .equipe-domicile .milieu-central-1     { bottom: 250px; left: 25%; }
[data-formation="4-3-3"] .equipe-domicile .milieu-central-2     { bottom: 250px; left: 75%; }
[data-formation="4-3-3"] .equipe-domicile .ailier-droit         { bottom: 350px; left: 80%; }
[data-formation="4-3-3"] .equipe-domicile .avant-centre         { bottom: 400px; left: 50%; }
[data-formation="4-3-3"] .equipe-domicile .ailier-gauche        { bottom: 350px; left: 20%; }

[data-formation="4-3-3"] .equipe-exterieur .gardien             { top: 30px;  left: 50%; }
[data-formation="4-3-3"] .equipe-exterieur .lateral-droit       { top: 110px; left: 15%; }
[data-formation="4-3-3"] .equipe-exterieur .defenseur-central-1 { top: 110px; left: 65%; }
[data-formation="4-3-3"] .equipe-exterieur .defenseur-central-2 { top: 110px; left: 35%; }
[data-formation="4-3-3"] .equipe-exterieur .lateral-gauche      { top: 110px; left: 85%; }
[data-formation="4-3-3"] .equipe-exterieur .milieu-defensif     { top: 200px; left: 50%; }
[data-formation="4-3-3"] .equipe-exterieur .milieu-central-1    { top: 250px; left: 75%; }
[data-formation="4-3-3"] .equipe-exterieur .milieu-central-2    { top: 250px; left: 25%; }
[data-formation="4-3-3"] .equipe-exterieur .ailier-droit        { top: 350px; left: 20%; }
[data-formation="4-3-3"] .equipe-exterieur .avant-centre        { top: 400px; left: 50%; }
[data-formation="4-3-3"] .equipe-exterieur .ailier-gauche       { top: 350px; left: 80%; }

/* ── FORMATION 4-4-2 ── */
[data-formation="4-4-2"] .equipe-domicile .gardien              { bottom: 30px;  left: 50%; }
[data-formation="4-4-2"] .equipe-domicile .lateral-droit        { bottom: 110px; left: 85%; }
[data-formation="4-4-2"] .equipe-domicile .defenseur-central-1  { bottom: 110px; left: 35%; }
[data-formation="4-4-2"] .equipe-domicile .defenseur-central-2  { bottom: 110px; left: 65%; }
[data-formation="4-4-2"] .equipe-domicile .lateral-gauche       { bottom: 110px; left: 15%; }
[data-formation="4-4-2"] .equipe-domicile .milieu-defensif      { bottom: 220px; left: 85%; }
[data-formation="4-4-2"] .equipe-domicile .milieu-central-1     { bottom: 220px; left: 35%; }
[data-formation="4-4-2"] .equipe-domicile .milieu-central-2     { bottom: 220px; left: 65%; }
[data-formation="4-4-2"] .equipe-domicile .ailier-droit         { bottom: 220px; left: 15%; }
[data-formation="4-4-2"] .equipe-domicile .avant-centre         { bottom: 380px; left: 35%; }
[data-formation="4-4-2"] .equipe-domicile .ailier-gauche        { bottom: 380px; left: 65%; }

[data-formation="4-4-2"] .equipe-exterieur .gardien             { top: 30px;  left: 50%; }
[data-formation="4-4-2"] .equipe-exterieur .lateral-droit       { top: 110px; left: 15%; }
[data-formation="4-4-2"] .equipe-exterieur .defenseur-central-1 { top: 110px; left: 65%; }
[data-formation="4-4-2"] .equipe-exterieur .defenseur-central-2 { top: 110px; left: 35%; }
[data-formation="4-4-2"] .equipe-exterieur .lateral-gauche      { top: 110px; left: 85%; }
[data-formation="4-4-2"] .equipe-exterieur .milieu-defensif     { top: 220px; left: 15%; }
[data-formation="4-4-2"] .equipe-exterieur .milieu-central-1    { top: 220px; left: 65%; }
[data-formation="4-4-2"] .equipe-exterieur .milieu-central-2    { top: 220px; left: 35%; }
[data-formation="4-4-2"] .equipe-exterieur .ailier-droit        { top: 220px; left: 85%; }
[data-formation="4-4-2"] .equipe-exterieur .avant-centre        { top: 380px; left: 65%; }
[data-formation="4-4-2"] .equipe-exterieur .ailier-gauche       { top: 380px; left: 35%; }

/* ── FORMATION 4-2-3-1 ── */
[data-formation="4-2-3-1"] .equipe-domicile .gardien             { bottom: 30px;  left: 50%; }
[data-formation="4-2-3-1"] .equipe-domicile .lateral-droit       { bottom: 110px; left: 85%; }
[data-formation="4-2-3-1"] .equipe-domicile .defenseur-central-1 { bottom: 110px; left: 35%; }
[data-formation="4-2-3-1"] .equipe-domicile .defenseur-central-2 { bottom: 110px; left: 65%; }
[data-formation="4-2-3-1"] .equipe-domicile .lateral-gauche      { bottom: 110px; left: 15%; }
[data-formation="4-2-3-1"] .equipe-domicile .milieu-defensif     { bottom: 200px; left: 35%; }
[data-formation="4-2-3-1"] .equipe-domicile .milieu-central-1    { bottom: 200px; left: 65%; }
[data-formation="4-2-3-1"] .equipe-domicile .milieu-central-2    { bottom: 290px; left: 50%; }
[data-formation="4-2-3-1"] .equipe-domicile .ailier-droit        { bottom: 290px; left: 80%; }
[data-formation="4-2-3-1"] .equipe-domicile .avant-centre        { bottom: 390px; left: 50%; }
[data-formation="4-2-3-1"] .equipe-domicile .ailier-gauche       { bottom: 290px; left: 20%; }

[data-formation="4-2-3-1"] .equipe-exterieur .gardien            { top: 30px;  left: 50%; }
[data-formation="4-2-3-1"] .equipe-exterieur .lateral-droit      { top: 110px; left: 15%; }
[data-formation="4-2-3-1"] .equipe-exterieur .defenseur-central-1{ top: 110px; left: 65%; }
[data-formation="4-2-3-1"] .equipe-exterieur .defenseur-central-2{ top: 110px; left: 35%; }
[data-formation="4-2-3-1"] .equipe-exterieur .lateral-gauche     { top: 110px; left: 85%; }
[data-formation="4-2-3-1"] .equipe-exterieur .milieu-defensif    { top: 200px; left: 65%; }
[data-formation="4-2-3-1"] .equipe-exterieur .milieu-central-1   { top: 200px; left: 35%; }
[data-formation="4-2-3-1"] .equipe-exterieur .milieu-central-2   { top: 290px; left: 50%; }
[data-formation="4-2-3-1"] .equipe-exterieur .ailier-droit       { top: 290px; left: 20%; }
[data-formation="4-2-3-1"] .equipe-exterieur .avant-centre       { top: 390px; left: 50%; }
[data-formation="4-2-3-1"] .equipe-exterieur .ailier-gauche      { top: 290px; left: 80%; }

/* ── FORMATION 3-5-2 ── */
[data-formation="3-5-2"] .equipe-domicile .gardien              { bottom: 30px;  left: 50%; }
[data-formation="3-5-2"] .equipe-domicile .lateral-gauche       { bottom: 110px; left: 75%; }
[data-formation="3-5-2"] .equipe-domicile .lateral-droit        { bottom: 110px; left: 25%; }
[data-formation="3-5-2"] .equipe-domicile .defenseur-central-2  { bottom: 110px; left: 50%; }
[data-formation="3-5-2"] .equipe-domicile .milieu-defensif      { bottom: 220px; left: 15%; }
[data-formation="3-5-2"] .equipe-domicile .defenseur-central-1  { bottom: 220px; left: 85%; }
[data-formation="3-5-2"] .equipe-domicile .milieu-central-1     { bottom: 270px; left: 30%; }
[data-formation="3-5-2"] .equipe-domicile .milieu-central-2     { bottom: 220px; left: 50%; }
[data-formation="3-5-2"] .equipe-domicile .ailier-droit         { bottom: 270px; left: 70%; }
[data-formation="3-5-2"] .equipe-domicile .avant-centre         { bottom: 380px; left: 30%; }
[data-formation="3-5-2"] .equipe-domicile .ailier-gauche        { bottom: 380px; left: 70%; }

[data-formation="3-5-2"] .equipe-exterieur .gardien             { top: 30px;  left: 50%; }
[data-formation="3-5-2"] .equipe-exterieur .lateral-droit       { top: 110px; left: 25%; }
[data-formation="3-5-2"] .equipe-exterieur .lateral-gauche      { top: 110px; left: 75%; }
[data-formation="3-5-2"] .equipe-exterieur .defenseur-central-2 { top: 110px; left: 50%; }
[data-formation="3-5-2"] .equipe-exterieur .milieu-defensif     { top: 220px; left: 85%; }
[data-formation="3-5-2"] .equipe-exterieur .defenseur-central-1 { top: 220px; left: 15%; }
[data-formation="3-5-2"] .equipe-exterieur .milieu-central-1    { top: 270px; left: 70%; }
[data-formation="3-5-2"] .equipe-exterieur .milieu-central-2    { top: 220px; left: 50%; }
[data-formation="3-5-2"] .equipe-exterieur .ailier-droit        { top: 270px; left: 30%; }
[data-formation="3-5-2"] .equipe-exterieur .avant-centre        { top: 380px; left: 70%; }
[data-formation="3-5-2"] .equipe-exterieur .ailier-gauche       { top: 380px; left: 30%; }

/* ── FORMATION 5-3-2 ── */
[data-formation="5-3-2"] .equipe-domicile .gardien              { bottom: 30px;  left: 50%; }
[data-formation="5-3-2"] .equipe-domicile .lateral-droit        { bottom: 110px; left: 90%; }
[data-formation="5-3-2"] .equipe-domicile .defenseur-central-1  { bottom: 110px; left: 30%; }
[data-formation="5-3-2"] .equipe-domicile .defenseur-central-2  { bottom: 110px; left: 70%; }
[data-formation="5-3-2"] .equipe-domicile .lateral-gauche       { bottom: 120px; left: 10%; }
[data-formation="5-3-2"] .equipe-domicile .milieu-defensif      { bottom: 125px; left: 50%; }
[data-formation="5-3-2"] .equipe-domicile .milieu-central-1     { bottom: 240px; left: 30%; }
[data-formation="5-3-2"] .equipe-domicile .milieu-central-2     { bottom: 220px; left: 50%; }
[data-formation="5-3-2"] .equipe-domicile .ailier-droit         { bottom: 240px; left: 70%; }
[data-formation="5-3-2"] .equipe-domicile .avant-centre         { bottom: 380px; left: 30%; }
[data-formation="5-3-2"] .equipe-domicile .ailier-gauche        { bottom: 380px; left: 70%; }

[data-formation="5-3-2"] .equipe-exterieur .gardien             { top: 30px;  left: 50%; }
[data-formation="5-3-2"] .equipe-exterieur .lateral-droit       { top: 120px; left: 10%; }
[data-formation="5-3-2"] .equipe-exterieur .defenseur-central-1 { top: 110px; left: 70%; }
[data-formation="5-3-2"] .equipe-exterieur .defenseur-central-2 { top: 110px; left: 30%; }
[data-formation="5-3-2"] .equipe-exterieur .lateral-gauche      { top: 120px; left: 90%; }
[data-formation="5-3-2"] .equipe-exterieur .milieu-defensif     { top: 125px; left: 50%; }
[data-formation="5-3-2"] .equipe-exterieur .milieu-central-1    { top: 240px; left: 70%; }
[data-formation="5-3-2"] .equipe-exterieur .milieu-central-2    { top: 220px; left: 50%; }
[data-formation="5-3-2"] .equipe-exterieur .ailier-droit        { top: 240px; left: 30%; }
[data-formation="5-3-2"] .equipe-exterieur .avant-centre        { top: 380px; left: 70%; }
[data-formation="5-3-2"] .equipe-exterieur .ailier-gauche       { top: 380px; left: 30%; }


/* ══ 3. RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .terrain { height: 500px; }

    /* Recalcul proportionnel des positions : ratio 500/650 ≈ 0.77 */
    [data-formation] .equipe-domicile .gardien,
    [data-formation] .equipe-exterieur .gardien { }
    /* Les left en % s'adaptent seuls.
       Seuls les bottom/top en px doivent être recalculés.
       Règle générale : multiplier par 0.77 */

    [data-formation="4-3-3"] .equipe-domicile .gardien             { bottom: 23px; }
    [data-formation="4-3-3"] .equipe-domicile .lateral-droit,
    [data-formation="4-3-3"] .equipe-domicile .defenseur-central-1,
    [data-formation="4-3-3"] .equipe-domicile .defenseur-central-2,
    [data-formation="4-3-3"] .equipe-domicile .lateral-gauche      { bottom: 85px; }
    [data-formation="4-3-3"] .equipe-domicile .milieu-defensif     { bottom: 154px; }
    [data-formation="4-3-3"] .equipe-domicile .milieu-central-1,
    [data-formation="4-3-3"] .equipe-domicile .milieu-central-2    { bottom: 192px; }
    [data-formation="4-3-3"] .equipe-domicile .ailier-droit,
    [data-formation="4-3-3"] .equipe-domicile .ailier-gauche       { bottom: 270px; }
    [data-formation="4-3-3"] .equipe-domicile .avant-centre        { bottom: 308px; }

    [data-formation="4-3-3"] .equipe-exterieur .gardien            { top: 23px; }
    [data-formation="4-3-3"] .equipe-exterieur .lateral-droit,
    [data-formation="4-3-3"] .equipe-exterieur .defenseur-central-1,
    [data-formation="4-3-3"] .equipe-exterieur .defenseur-central-2,
    [data-formation="4-3-3"] .equipe-exterieur .lateral-gauche     { top: 85px; }
    [data-formation="4-3-3"] .equipe-exterieur .milieu-defensif    { top: 154px; }
    [data-formation="4-3-3"] .equipe-exterieur .milieu-central-1,
    [data-formation="4-3-3"] .equipe-exterieur .milieu-central-2   { top: 192px; }
    [data-formation="4-3-3"] .equipe-exterieur .ailier-droit,
    [data-formation="4-3-3"] .equipe-exterieur .ailier-gauche      { top: 270px; }
    [data-formation="4-3-3"] .equipe-exterieur .avant-centre       { top: 308px; }
}

@media (max-width: 480px) {
    .terrain { height: 360px; }
    /* ratio 360/650 ≈ 0.55 */
    [data-formation="4-3-3"] .equipe-domicile .gardien             { bottom: 17px; }
    [data-formation="4-3-3"] .equipe-domicile .lateral-droit,
    [data-formation="4-3-3"] .equipe-domicile .defenseur-central-1,
    [data-formation="4-3-3"] .equipe-domicile .defenseur-central-2,
    [data-formation="4-3-3"] .equipe-domicile .lateral-gauche      { bottom: 60px; }
    [data-formation="4-3-3"] .equipe-domicile .milieu-defensif     { bottom: 110px; }
    [data-formation="4-3-3"] .equipe-domicile .milieu-central-1,
    [data-formation="4-3-3"] .equipe-domicile .milieu-central-2    { bottom: 138px; }
    [data-formation="4-3-3"] .equipe-domicile .ailier-droit,
    [data-formation="4-3-3"] .equipe-domicile .ailier-gauche       { bottom: 193px; }
    [data-formation="4-3-3"] .equipe-domicile .avant-centre        { bottom: 220px; }

    [data-formation="4-3-3"] .equipe-exterieur .gardien            { top: 17px; }
    [data-formation="4-3-3"] .equipe-exterieur .lateral-droit,
    [data-formation="4-3-3"] .equipe-exterieur .defenseur-central-1,
    [data-formation="4-3-3"] .equipe-exterieur .defenseur-central-2,
    [data-formation="4-3-3"] .equipe-exterieur .lateral-gauche     { top: 60px; }
    [data-formation="4-3-3"] .equipe-exterieur .milieu-defensif    { top: 110px; }
    [data-formation="4-3-3"] .equipe-exterieur .milieu-central-1,
    [data-formation="4-3-3"] .equipe-exterieur .milieu-central-2   { top: 138px; }
    [data-formation="4-3-3"] .equipe-exterieur .ailier-droit,
    [data-formation="4-3-3"] .equipe-exterieur .ailier-gauche      { top: 193px; }
    [data-formation="4-3-3"] .equipe-exterieur .avant-centre       { top: 220px; }
}