/* =============================================
   RESET & BASE STYLES
   ============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: #000000;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
    color: #fff8dc;
}

/* Correction du conteneur Bootstrap pour éviter les marges indésirables */
.container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =============================================
   STYLES POUR LA CARTE FIXE (index.html)
   ============================================= */
.map-container-fixed {
    width: 800px; /* Largeur FIXE de la carte (adapte cette valeur à la taille réelle de ton image) */
    height: 500px; /* Hauteur FIXE (optionnel, mais utile pour éviter les déformations) */
    margin: 0 auto;
    position: relative;
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.img-fixed {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0.8) contrast(1.2);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(248, 248, 220, 0.2);
}

/* =============================================
   STYLES POUR LES POINTS FIXES (index.html)
   ============================================= */
/* Point cliquable (BLEU - dessin.html) */
.point-cliquable {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 10;
    cursor: pointer;
}

.point-cliquable:hover .point {
    transform: scale(1.2);
    z-index: 15;
}

/* Point non cliquable (ROUGE - "Vous êtes ici") */
.point-non-cliquable {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 10;
    cursor: default;
}

.point-label {
    position: absolute;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    z-index: 11;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Style commun à tous les points */
.point {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #000000, 0 0 0 5px #fff8dc;
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Effet spécifique pour le point bleu */
.point-cliquable:hover .point.bg-primary {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0.3), 0 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Position du point BLEU (dessin.html) - ADAPTE CES VALEURS ! */
.dessin-point-fixed {
    top: 225px; 
    left: 320px; 
}

/* Position du point ROUGE ("vous êtes ici") - ADAPTE CES VALEURS ! */
.vous-etes-ici-fixed {
    top: 60%; 
    left: 73%; 
}

/* Label "vous êtes ici" */
.point-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    z-index: 11;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Hover pour le point bleu */
.dessin-point-fixed:hover .point {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(0, 71, 171, 0.3);
}

/* =============================================
   STYLES POUR LES IMAGES AGRANDISSABLES (dessin.html)
   ============================================= */
.image-container {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-container:hover {
    transform: scale(1.02);
}

.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.image-modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}

.image-modal .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* =============================================
   STYLES POUR LE TEXTE
   ============================================= */
h1 {
    color: #fff8dc;
    font-weight: bold;
}

.text-muted {
    color: #a0a0a0 !important;
}

.bg-dark.bg-opacity-10 {
    background-color: rgba(0, 0, 0, 0.1) !important;
}