/* On cache la vue trajectoire par défaut sans casser le layout */
#view-trajectoire {
    display: none; 
}






/* ==========================================
   BANDEAU NOIR - AFFICHAGE ENCODEURS
   ========================================== */

/* Le conteneur principal du bandeau (situé en haut de la zone trajectoire) */
.encoder-display {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 4px 5px;
    background: #2c3e50; /* Fond sombre pro */
    color: #2ecc71;      /* Vert RalloBot */
    font-family: 'Courier New', monospace;
    font-weight: bold;
    border-top-left-radius: 13px;  /* S'adapte à l'arrondi du container */
    border-top-right-radius: 13px;
    border-bottom: 2px solid #34495e;
}




/* ==========================================
   BOUTONS (Situé dans bandeau noir)
   ========================================== */

/* bouton labyrinthe 🧩 */
.maze-btn {
    background-color: #bbccd5; /* Gris-bleu identique aux boutons d'effacement */
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
}

/* Effet au survol pour le bouton labyrinthe */
.maze-btn:hover {
    background-color: #455a64; /* Même gris foncé que les autres au survol */
}



/* Le style commun pour les boutons d'effacement (🗑️ et 🧹) */
.clear-btn {
    background-color: #bbccd5; /* Gris-bleu typique des fonctions secondaires */
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.clear-btn:hover {
    background-color: #455a64;
}



   /* boîtes individuelles (G: XXX | D: XXX) */
.enc-box {
    background: #1a252f;
    padding: 5px 15px;
    border-radius: 4px;
    min-width: 20px;
    text-align: center;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}


/* Barre d'affichage des encodeurs (au-dessus du canvas) */
#val-enc-g, #val-enc-d {
    color: #ffffff;
    margin-left: 5px;
}


/* Style pour le bouton Centrer : 🎯 */
.center-btn {
    background-color: #3498db; /* Un beau bleu pour l'action de vue */
    color: white;
    font-size: 1.2rem;
    transition: transform 0.2s, background-color 0.2s;
}

.center-btn:hover {
    background-color: #2980b9;
    transform: scale(1.1);
}

.center-btn:active {
    transform: scale(0.95);
}



/* Le bouton de gestion de la grille (⊞) */
#grid-toggle-btn {
    background-color: #95a5a6; /* Gris par défaut (désactivé) */
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s; /* Transition fluide pour le hover et l'activation */
}

/* Effet Hover (identique au bouton clear pour la cohérence) */
#grid-toggle-btn:hover {
    background-color: #455a64;
    transform: translateY(-1px);
}

/* État activé (Vert RalloBot) */
#grid-toggle-btn.active {
    background-color: #2ecc71;
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
}

/* Hover quand il est déjà actif pour montrer qu'on peut cliquer */
#grid-toggle-btn.active:hover {
    background-color: #27ae60;
}





/* ==========================================
   ZONE DE TRAJECTOIRE (Le rectangle jaune/beige)
   ========================================== */

/* Le conteneur principal de la zone de dessin */
.trajectoire-container {
    width: 14cm; /* Même largeur que le cercle pour la cohérence */
    height: 154mm; /* Hauteur cumulée approximative cercle + contrôles */
    background: #faf8ed;
    border-radius: 15px;
    border: 2px solid #2ecc71;
    position: relative;
}


/* Style pour la zone trajectoire (pour éviter qu'elle ne casse tout plus tard) */
#view-trajectoire {
    width: 100%;
    display: none; /* Caché par défaut */
    flex-direction: column;
    align-items: center;
}


#mapCanvas {
    cursor: crosshair; /* Indique une zone interactive */
}