/*
  Ce fichier est pour vos styles personnalisés.
  Il fonctionne AVEC Tailwind CSS (qui est chargé dans l'index.html).
*/

/*
  ******************************************************************
  * STYLES POUR LES "HOTSPOTS" (ZONES CLIQUABLES)
  *
  * Les zones sont maintenant INVISIBLES.
  * Le fond et la bordure ont été mis en commentaire.
  ******************************************************************
*/
.hotspot {
    position: absolute; 
    z-index: 10; 
    
    /* Zones invisibles mais cliquables */
    background: transparent;
    border: none;
    
    border-radius: 8px; 
    cursor: pointer;
    transition: all 0.3s ease;
}

/*
  Style au survol du hotspot
  (Un léger voile bleu apparaît pour montrer que c'est cliquable)
*/
.hotspot:hover {
    background: rgba(0, 123, 255, 0.3); /* Léger fond bleu au survol */
    transform: scale(1.02); /* Léger zoom plus subtil */
    z-index: 20; /* Passe au-dessus des autres au survol */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); /* Ombre pour feedback visuel */
}

/*
  Style de débogage - ajoutez la classe "debug" au conteneur de la carte
  pour rendre les zones visibles durant les tests
*/
.debug .hotspot {
    background: rgba(255, 0, 0, 0.3) !important;
    border: 2px solid red !important;
}

.debug .hotspot:hover {
    background: rgba(255, 0, 0, 0.5) !important;
}

/*
  ******************************************************************
  * POSITIONNEMENT DES HOTSPOTS (en pourcentage)
  *
  * !!!! ATTENTION !!!!
  * CECI EST UNE ESTIMATION BASÉE SUR L'IMAGE.
  * Vous devrez peut-être AJUSTER ces valeurs (top, left, etc.)
  * pour que les zones recouvrent parfaitement
  * chaque salle de classe sur votre image "school-map.png".
  *
  * Pour ajuster, réactivez les lignes "background" et "border"
  * ci-dessus, puis modifiez les pourcentages ci-dessous.
  ******************************************************************
*/

/* --- Gauche (Anglais) --- */
#en-general {
    top: 17%;
    left: 17%;
    width: 20%;
    height: 10%;
}
#en-scolaire {
    top: 33%;
    left: 17%;
    width: 20%;
    height: 10%;
}
#en-academique {
    top: 50%;
    left: 17%;
    width: 20%;
    height: 10%;
}
#en-professionnel {
    top: 67%;
    left: 17%;
    width: 20%;
    height: 10%;
}


/* --- Droite (Français) --- */
#fr-general {
    top: 17%;
    right: 16%;
    width: 20%;
    height: 10%;
}
#fr-scolaire {
    top: 33%;
    right: 16%;
    width: 20%;
    height: 10%;
}
#fr-academique {
    top: 50%;
    right: 16%;
    width: 20%;
    height: 10%;
}
#fr-professionnel {
    top: 67%;
    right: 16%;
    width: 20%;
    height: 10%;
}


/* --- Bureau d'Information (Bas, Centre) --- */
#info-desk {
    top: 75%;       /* Plus bas */
    left: 40%;      /* Centré */
    width: 20%;     /* Plus large */
    height: 8%;    /* Plus haut */
}