/* ===== Carte interactive ===== */
.map-container {
    position: relative;
    overflow: hidden;
    border: 1px solid #AC6C15;
    border-radius: 5px;
    box-shadow: 3px 3px 6px #f1c992;
    display: flex;
    justify-content: center;
    margin: 40px auto;
    padding: 2px;
	
	width: 95%; /* c'est ic la largeur du cadre de la map!!!*/
    max-width: 1200px;
	
	
	background-color: #F3EBE6; /* ← beige */
    
    background-image:
        radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);   
    background-size: 4px 4px, 6px 6px;
    background-position: 0 0, 2px 2px;

    border: 1px solid #b08d57;
    box-shadow:
        inset 0 0 30px rgba(120, 90, 40, 0.15),
        3px 3px 6px #d8c7a0;
}

.map-wrapper {
    width: 100%;
    max-width: 2000px;
    transition: transform 0.15s ease;
	position: relative;/* en plus*/
}

.map-container svg {
    display: block;
    margin: 0 auto;
    cursor: default;
    user-select: none;
	
	
	width: 100%;/* en plus*/
    height: auto;
}

.map-container .country {
    fill: #FFFFA8; /*fond pays connus #F5D8B0;*/
    stroke: green;
    stroke-width: 1.2;
    transition: fill 0.15s linear;
}

.map-container .country:hover {
    fill: #CD2F01;/* rouge foncé #CD2F01* /#FFD54A;  jaune caviste */
}

.rien {
    fill: white !important;
}

/* Tooltip */
#tooltip {
    position: absolute;
    display: none;
    padding: 4px 8px;
    background: #ffffcc;
    color: darkblue;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 18px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
}

/* Zoom boutons */
.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
}

.zoom-controls button {
    width: 35px;
    height: 35px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.zoom-controls button:hover {
    background: #f1f1f1;
}