/* =========================================================
   assets/css/ip-info.css - Style pour l'outil d'Info IP (Compact)
   ========================================================= */

.ip-info-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ip-info-section h2, .ip-info-section h3 {
    font-family: var(--font-terminal);
    text-align: center;
    margin-bottom: 20px;
}
.ip-info-section h2 { color: var(--color-text-grey); }
.ip-info-section h3 { color: var(--color-secondary); margin-top: 30px; }


.ip-display {
    text-align: center;
    font-size: 1.2em; 
    margin-bottom: 30px;
    padding: 15px;
    background-color: #1a1a1a;
    border: 1px solid var(--color-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ip-address {
    font-family: var(--font-terminal);
    font-weight: bold;
    font-size: 1.1em;
}

/* VPN/Proxy Warning */
.vpn-warning {
    display: block; 
    margin-top: 10px;
    font-size: 0.9em;
    color: orange;
    font-family: var(--font-terminal);
}
.vpn-warning i {
    margin-right: 5px;
}

/* --- Layout Principal (Vertical maintenant) --- */
.ip-layout {
    /* Plus besoin de flex ici, les divs se suivent naturellement */
    max-width: 900px; /* Limite la largeur globale */
    margin: 30px auto 0 auto; /* Centre le layout */
}

/* --- Conteneur des Détails --- */
.ip-details-container {
    background-color: #111; 
    padding: 25px;
    border: 1px dashed var(--color-accent);
    margin-bottom: 40px; /* Espace avant la carte */
}

/* --- Grille des Détails (Plus Compacte) --- */
.ip-details-grid {
    display: grid;
    /* Crée 2 colonnes dès que possible, min 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px; /* Espace réduit entre les items */
}

.detail-item {
    background-color: #222;
    padding: 10px 15px; /* Padding réduit */
    border-left: 4px solid var(--color-accent);
    display: flex;
    flex-direction: column;
}

.detail-item .label {
    font-family: var(--font-terminal);
    font-size: 0.8em; /* Label plus petit */
    color: var(--color-text-grey);
    margin-bottom: 3px;
    text-transform: uppercase;
}
.detail-item .label i {
    margin-right: 8px;
    color: var(--color-secondary);
    width: 15px; 
}

.detail-item .value {
    font-size: 1em; /* Valeur taille normale */
    color: var(--color-text-light);
    font-weight: bold;
    word-wrap: break-word; 
}

/* --- Conteneur de la Carte --- */
.ip-map-container {
    /* Pas besoin de styles spécifiques de layout ici, il est déjà en dessous */
}

.accuracy-note {
    text-align: center;
    font-size: 0.8em;
    color: orange;
    margin-bottom: 10px;
}

.map-wrapper {
    border: 1px solid var(--color-secondary);
    padding: 5px; 
    background-color: #000;
    max-width: 700px; /* Limite la largeur de la carte */
    margin: 0 auto; /* Centre la carte */
}
.map-wrapper iframe {
    display: block; 
    height: 300px; /* Hauteur fixe réduite */
}

.disclaimer {
    text-align: center;
    font-size: 0.85em;
    color: var(--color-text-grey);
    margin-top: 40px;
    font-style: italic;
}