/* =============================================================================
   tennis.css — HNH Elite Sports · Terrain Tennis
   Classes : joueur-1, joueur-2
   Formations : simple (2 joueurs), double (4 joueurs)
   ============================================================================= */


/* ══ 1. TERRAIN TENNIS ════════════════════════════════════════════════════════ */
.terrain {
    position: relative;          /* ← AJOUTÉ : référence pour le positionnement absolu */
    height: 680px;
    width: 60%;
    margin: 20px auto;
    background: linear-gradient(to bottom,
        #1565c0 0%, #1255a8 40%, #0d47a1 50%, #1255a8 60%, #1565c0 100%);
    border: 4px solid rgba(255,255,255,0.95);
    border-radius: 3px;
    overflow: hidden;            /* ← AJOUTÉ : évite les débordements */
}
.terrain::before { content: none; }
.terrain::after  { content: none; }


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

/* Filet */
.tennis-filet {
    position: absolute;
    top: 50%; left: 0; right: 0;     /* ← CORRIGÉ : left:0 right:0 au lieu de -2% */
    height: 3px;
    background: rgba(255,255,255,0.95);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
    pointer-events: none; z-index: 2;
}
.tennis-filet::before,
.tennis-filet::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 4px; height: 24px;       /* ← AJUSTÉ : poteaux plus fins */
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
}
.tennis-filet::before { left: 0; }   /* ← CORRIGÉ : collé au bord */
.tennis-filet::after  { right: 0; }

/* Lignes de service */
.tennis-service-top {
    position: absolute;
    top: 25%; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}
.tennis-service-bottom {
    position: absolute;
    bottom: 25%; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}

/* Ligne centrale de service */
.tennis-ligne-centrale {
    position: absolute;
    top: 25%; bottom: 25%;
    left: 50%;
    width: 2px;
    background: rgba(255,255,255,0.9);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Couloirs (doubles) */
.tennis-couloir-gauche {
    position: absolute;
    top: 0; bottom: 0; left: 10%;
    width: 2px;
    background: rgba(255,255,255,0.5);
    pointer-events: none;
}
.tennis-couloir-droit {
    position: absolute;
    top: 0; bottom: 0; right: 10%;
    width: 2px;
    background: rgba(255,255,255,0.5);
    pointer-events: none;
}

/* Marques centrales de fond */
.tennis-mark-haut {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 12px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}
.tennis-mark-bas {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 12px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}


/* ══ 3. JOUEURS — BASE ════════════════════════════════════════════════════════ */

/* Chaque joueur est positionné en absolute dans le terrain */
.equipe-domicile .joueur,
.equipe-exterieur .joueur,
.equipe-domicile .joueur-1,
.equipe-domicile .joueur-2,
.equipe-exterieur .joueur-1,
.equipe-exterieur .joueur-2 {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 10;
    transform: translate(-50%, -50%);  /* ← CENTRAGE : le point central du joueur = sa position */
    transition: all 0.3s ease;
}

/* Couleurs équipes */
.equipe-domicile .joueur,
.equipe-domicile .joueur-1,
.equipe-domicile .joueur-2 {
    background: linear-gradient(135deg, #22c55e, #16a34a);  /* Vert */
}

.equipe-exterieur .joueur,
.equipe-exterieur .joueur-1,
.equipe-exterieur .joueur-2 {
    background: linear-gradient(135deg, #ef4444, #dc2626);  /* Rouge */
}


/* ══ 4. POSITIONS — SIMPLE (1 vs 1) ═══════════════════════════════════════════
   Zone de service = entre le filet (50%) et la ligne de service (25% ou 75%)
   → Domicile  : bottom entre 27% et 48%  → on prend bottom:36% (zone service bas)
   → Extérieur : top    entre 27% et 48%  → on prend top:36%    (zone service haut)
   ============================================================================= */

/* Domicile — joueur au FOND de court bas, bien centré */
[data-formation="simple"] .equipe-domicile .position-drop.joueur-1,
[data-formation="simple"] .equipe-domicile .position-drop:first-child,
[data-formation="simple"] .equipe-domicile .joueur.joueur-1,
[data-formation="simple"] .equipe-domicile .joueur:first-child {
    bottom: 10% !important;
    left: 50% !important;
}

/* Extérieur — joueur au FOND de court haut, bien centré */
[data-formation="simple"] .equipe-exterieur .position-drop.joueur-1,
[data-formation="simple"] .equipe-exterieur .position-drop:first-child,
[data-formation="simple"] .equipe-exterieur .joueur.joueur-1,
[data-formation="simple"] .equipe-exterieur .joueur:first-child {
    top: 10% !important;
    left: 50% !important;
}

/* Cacher le 2ème joueur en mode simple */
[data-formation="simple"] .equipe-domicile .position-drop.joueur-2,
[data-formation="simple"] .equipe-domicile .position-drop:nth-child(2),
[data-formation="simple"] .equipe-domicile .joueur.joueur-2,
[data-formation="simple"] .equipe-domicile .joueur:nth-child(2),
[data-formation="simple"] .equipe-exterieur .position-drop.joueur-2,
[data-formation="simple"] .equipe-exterieur .position-drop:nth-child(2),
[data-formation="simple"] .equipe-exterieur .joueur.joueur-2,
[data-formation="simple"] .equipe-exterieur .joueur:nth-child(2) {
    display: none !important;
}

/* Positions par défaut (sans formation) — zone de service */
.equipe-domicile .joueur-1,
.equipe-domicile .position-drop.joueur-1 { bottom: 10%; left: 50%; }
.equipe-exterieur .joueur-1,
.equipe-exterieur .position-drop.joueur-1 { top: 10%; left: 50%; }
.equipe-domicile .joueur-2,
.equipe-domicile .position-drop.joueur-2 { bottom: 10%; left: 22%; }
.equipe-exterieur .joueur-2,
.equipe-exterieur .position-drop.joueur-2 { top: 10%; left: 78%; }


/* ══ 5. POSITIONS — DOUBLE (2 vs 2) ═══════════════════════════════════════════
   Les 2 joueurs sont dans leur zone de service respective
   Gauche = 30% / Droite = 70% (entre couloirs 10% et 90%)
   ============================================================================= */

/* Domicile (bas) — bien écartés vers les bords */
[data-formation="double"] .equipe-domicile .position-drop.joueur-1,
[data-formation="double"] .equipe-domicile .position-drop:first-child,
[data-formation="double"] .equipe-domicile .joueur.joueur-1,
[data-formation="double"] .equipe-domicile .joueur:first-child {
    bottom: 10% !important;
    left: 78% !important;   /* côté droit — près du couloir */
}

[data-formation="double"] .equipe-domicile .position-drop.joueur-2,
[data-formation="double"] .equipe-domicile .position-drop:nth-child(2),
[data-formation="double"] .equipe-domicile .joueur.joueur-2,
[data-formation="double"] .equipe-domicile .joueur:nth-child(2) {
    bottom: 10% !important;
    left: 22% !important;   /* côté gauche — près du couloir */
}

/* Extérieur (haut) — bien écartés vers les bords */
[data-formation="double"] .equipe-exterieur .position-drop.joueur-1,
[data-formation="double"] .equipe-exterieur .position-drop:first-child,
[data-formation="double"] .equipe-exterieur .joueur.joueur-1,
[data-formation="double"] .equipe-exterieur .joueur:first-child {
    top: 10% !important;
    left: 78% !important;
}

[data-formation="double"] .equipe-exterieur .position-drop.joueur-2,
[data-formation="double"] .equipe-exterieur .position-drop:nth-child(2),
[data-formation="double"] .equipe-exterieur .joueur.joueur-2,
[data-formation="double"] .equipe-exterieur .joueur:nth-child(2) {
    top: 10% !important;
    left: 22% !important;
}


/* ══ 6. RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .terrain { height: 520px; width: 80%; }
    
    .equipe-domicile .joueur,
    .equipe-exterieur .joueur,
    .equipe-domicile .joueur-1,
    .equipe-domicile .joueur-2,
    .equipe-exterieur .joueur-1,
    .equipe-exterieur .joueur-2 {
        width: 36px;
        height: 36px;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .terrain { height: 380px; width: 92%; }
    
    .equipe-domicile .joueur,
    .equipe-exterieur .joueur,
    .equipe-domicile .joueur-1,
    .equipe-domicile .joueur-2,
    .equipe-exterieur .joueur-1,
    .equipe-exterieur .joueur-2 {
        width: 32px;
        height: 32px;
        font-size: 0.6rem;
    }
}