/**
 * Nom du fichier : maps.css
 * Chemin         : /var/www/html/analyses/assets/css/maps.css
 *
 * Description :
 *   Styles pour la page principale du projet "analyses" :
 *     - Layout en 4 zones (grille 2x2).
 *     - Carte SVG en haut à droite (1/4 écran).
 *     - Fond de page blanc / gris clair, design sobre.
 *     - Styles par défaut pour la carte (terre, zones, sites).
 *
 * Options :
 *   - Variables CSS en :root pour adapter facilement les couleurs.
 *
 * Exemple d'utilisation :
 *   <link rel="stylesheet" href="/analyses/assets/css/maps.css">
 *
 * Prérequis :
 *   - Fichier SVG avec id="carte-analyses" et groupes #terre, #zones, #sites.
 *
 * Auteur        : Sylvain SCATTOLINI
 * Date          : 2025-11-27
 * Version       : 1.1
 */

:root {
    --color-page-bg: #f5f5f5;
    --color-text-main: #333333;

    --color-panel-bg: #ffffff;
    --color-panel-border: #dddddd;

    --color-mer: #3a7bd5;          /* bleu moyen pour le fond de la carte */
    --color-terre-fill: #abd97b;   /* vert */
    --color-terre-stroke: #4c5a39;

    --color-zone-fill: #aecaff;    /* zones */
    --color-zone-stroke: #184063;

    --color-site-fill: #fee13b;    /* sites */
    --color-site-stroke: #574d14;

    --color-error: #b00020;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-page-bg);
    color: var(--color-text-main);
}

/* Layout en 4 zones (pour l’instant : placeholders + carte) */

.layout {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* moitié gauche, moitié droite */
    grid-template-rows: 1fr 1fr;     /* moitié haute, moitié basse */
    height: 100vh;
    width: 100vw;
}

.q1,
.q2,
.q3,
.q4 {
    padding: 0.75rem;
}

/* Panels génériques (blancs, sobres) */

.panel {
    background: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panel h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.panel p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555555;
}

.panel-placeholder {
    justify-content: flex-start;
}

/* Q2 : la carte en haut à droite */

.q2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-mer); /* mer = fond derrière le SVG */
    border: 1px solid var(--color-panel-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.map-inner {
    width: 100%;
    height: 100%;
}

/* Le SVG s’adapte au conteneur */

.map-inner svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Messages d’erreur */

.error-message {
    margin: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fde4e7;
    color: var(--color-error);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Debug panel (info sur le site/zone cliqué) */

.debug-panel {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    padding: 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #333333;
    z-index: 10;
    max-width: 70%;
}

.debug-panel strong {
    display: inline-block;
    min-width: 4.5rem;
}

/* Styles par défaut du SVG (sans toxicité pour l’instant) */
/* Tout le SVG par défaut : transparent */
#carte-analyses * {
    fill: transparent;
    stroke: .1;
}

/* TERRE */
#carte-analyses #terre path,
#carte-analyses #terre polygon {
    fill: var(--color-terre-fill);
    stroke: var(--color-terre-stroke);
    stroke-width: 1;
}

/* ZONES */
#carte-analyses #zones path,
#carte-analyses #zones polygon {
    fill: var(--color-zone-fill);
    fill-opacity: 0.45;
    stroke: var(--color-zone-stroke);
    stroke-width: .1;
}

/* SITES */
#carte-analyses #sites path,
#carte-analyses #sites polygon {
    fill: var(--color-site-fill);
    stroke: var(--color-site-stroke);
    stroke-width: .1;
}

/* Effet hover / sélection pour UX & debug */

#carte-analyses #sites path:hover,
#carte-analyses #sites polygon:hover,
#carte-analyses #zones path:hover,
#carte-analyses #zones polygon:hover {
    stroke-width: 1;
    stroke: #000000;
    cursor: pointer;
}

#carte-analyses .is-selected {
    stroke-width: 2 !important;
    stroke: #ffcc00 !important;
}

/* Responsif : en mobile, on affichera seulement la carte pour l’instant */

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh 50vh;
    }

    .q1,
    .q3,
    .q4 {
        display: none;
    }

    .q2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding: 0.5rem;
    }
}