/**
 * ========================================================================
 * PROJET      : LOOM-CMS
 * VERSION     : 1.0.12
 * CLIENT      : CRPMEM de La Reunion
 * MODULE      : CSS Frontend - Cartes interactives
 * SOCIETE     : LOOM DIGITAL
 * EMPLACEMENT : /assets/css/interactive-map.css
 * ========================================================================
 *
 * Styles pour les cartes interactives Leaflet (frontend public)
 * Charge conditionnellement quand un shortcode [map] est present
 *
 * VARIABLES CRPMEM UTILISEES :
 * - --crpmem-bleu-fonce: #015f68
 * - --crpmem-bleu-clair: #00a4c2
 * - --crpmem-orange: #ec7520
 *
 * ACCESSIBILITE RGAA AAA :
 * - Contrastes verifies (legende, labels, attribution)
 * - Focus visible sur checkboxes et carte
 * - prefers-reduced-motion respecte
 * - Cibles min 24px (WCAG 2.2 critere 2.5.8)
 *
 * ADD v1.0.12 (2026-04-13) - LEGENDE TOGGLE COLLAPSE/EXPAND :
 * [x] [ADD] .loom-map-legend-header : flex row titre + bouton chevron
 * [x] [ADD] .loom-map-legend-collapse-btn : bouton transparent, chevron SVG
 * [x] [ADD] .loom-map-legend-body : wrapper items (cible du collapse)
 * [x] [ADD] .loom-map-legend--collapsed : masque body, rotation chevron 180deg
 * [x] [MOD] .loom-map-legend-title : margin-bottom 0 (gere par header/body)
 * [x] [RGAA] focus-visible orange sur bouton collapse
 * [x] [WCAG 2.2] Cible 24px min sur bouton collapse
 *
 * MOD v1.0.12 (2026-04-04) - LEGENDE TOGGLE SWITCH + TOOLTIPS WRAP :
 * [x] [MOD] .loom-map-legend-item : layout flex avec toggle switch a droite
 * [x] [ADD] .loom-map-legend-toggle : switch CSS pure (checkbox invisible + slider)
 * [x] [ADD] .loom-map-legend-slider : knob anime avec transition 200ms
 * [x] [ADD] SVG path transition opacity 300ms (fade in/out toggle)
 * [x] [MOD] .loom-map-tooltip : width max-content, wrap multi-lignes, text-align center
 * [x] [KEEP] .loom-map-label : white-space nowrap conserve (DivIcon contrainte)
 * [x] [RGAA] focus-visible orange sur slider, checkbox accessible clavier
 * [x] [WCAG 2.2] Cible tactile 36x20px (toggle switch)
 *
 * ADD v1.0.12 (2026-04-03) - HALO SURVOL + TOOLTIP HOVER :
 * [x] [ADD] .loom-layer-highlight : filter drop-shadow halo lumineux au survol
 * [x] [ADD] .loom-map-tooltip : style infobulle hover (fond blanc, ombre, radius)
 * [x] [ADD] transition 200ms sur SVG paths Leaflet (smooth halo)
 * [x] [ADD] Responsive : drop-shadow reduit sur mobile
 * [x] [RGAA] prefers-reduced-motion desactive les transitions halo
 *
 * FIX v1.0.12 (2026-03-26) - LABELS OVERLAY GEOJSON RETOUR A LA LIGNE :
 * [x] [FIX] .loom-map-label : white-space pre-line → nowrap (1 lettre/ligne)
 * [x] [ADD] max-width 280px + overflow hidden + text-overflow ellipsis
 * [x] [NOTE] Labels longs tronqués proprement, tooltip natif au hover
 *
 * FIX v1.0.12 (2026-03-24) - BOUTON POPUP CONTRASTE ILLISIBLE :
 * [x] [FIX] a.btn dans popup : color #ffffff (blanc sur teal = 15.39:1 AAA)
 * [x] [FIX] a.btn hover : background orange CRPMEM, texte blanc
 * [x] [FIX] a.btn focus-visible : outline orange CRPMEM (RGAA clavier)
 * [x] [CAUSE] .leaflet-popup-content a { color: teal } ecrasait le texte blanc de btn-primary
 *
 * ADD v1.0.12 (2026-03-24) - CREATION INITIALE
 *
 * @author  Riley / LOOM DIGITAL
 * @version 1.0.12
 * @date    2026-04-13
 * ========================================================================
 */

/* ========================================================================
   1. CONTENEUR CARTE
   ======================================================================== */

.loom-map {
    margin: 2rem 0;
    position: relative;
}

.loom-map-canvas {
    width: 100%;
    height: 500px;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Focus visible sur la carte (RGAA navigation clavier) */
.loom-map-canvas:focus {
    outline: 3px solid var(--crpmem-orange, #ec7520);
    outline-offset: 2px;
}

/* ========================================================================
   2. LOADER
   ======================================================================== */

.loom-map-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #595959; /* 7.00:1 AAA */
    font-size: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   3. ERREUR
   ======================================================================== */

.loom-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #842029; /* Contraste sur fond alert */
    font-size: 0.95rem;
    background-color: #f8d7da;
    border-radius: 0.5rem;
    border: 1px solid #f5c2c7;
    padding: 1rem;
}

/* ========================================================================
   4. DESCRIPTION
   ======================================================================== */

.loom-map-description {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4e5662; /* 7.42:1 AAA — variable --bs-body-color CRPMEM */
    font-style: italic;
}

/* ========================================================================
   5. LEGENDE INTERACTIVE
   ======================================================================== */

.loom-map-legend {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.loom-map-legend-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--crpmem-bleu-fonce, #015f68);
    /* MOD v1.0.12 (2026-04-13) : margin-bottom gere par header/body */
    margin: 0;
    padding: 0;
}

/* ADD v1.0.12 (2026-04-13) : Header legende (titre + bouton collapse) */
.loom-map-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

/* ADD v1.0.12 (2026-04-13) : Bouton collapse/expand chevron */
.loom-map-legend-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--crpmem-bleu-fonce, #015f68);
    cursor: pointer;
    border-radius: 4px;
    transition: transform 200ms ease;
}

.loom-map-legend-collapse-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.loom-map-legend-collapse-btn:focus-visible {
    outline: 2px solid var(--crpmem-orange, #ec7520);
    outline-offset: 2px;
}

/* Rotation chevron quand legende repliee */
.loom-map-legend--collapsed .loom-map-legend-collapse-btn svg {
    transform: rotate(180deg);
}

/* ADD v1.0.12 (2026-04-13) : Body legende (items) — cible du collapse */
.loom-map-legend-body {
    /* Pas de style particulier, sert de wrapper pour le toggle */
}

/* Etat replie : masquer le body, retirer le margin-bottom du header */
.loom-map-legend--collapsed .loom-map-legend-header {
    margin-bottom: 0;
}

.loom-map-legend--collapsed .loom-map-legend-body {
    display: none;
}

.loom-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #343f52; /* 10.28:1 AAA */
    /* WCAG 2.2 critere 2.5.8 : cible min 24px */
    min-height: 28px;
}

.loom-map-legend-item:hover {
    color: var(--crpmem-bleu-fonce, #015f68);
}

/* MOD v1.0.12 (2026-04-04) : Toggle switch au lieu de checkbox
 * Pattern : checkbox invisible + slider CSS pure
 * Accessible clavier (tab + espace), aria-label, focus-visible */
.loom-map-legend-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    margin-left: auto;
}

.loom-map-legend-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.loom-map-legend-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bfc3ca;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    transition: background-color 200ms ease;
}

.loom-map-legend-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 200ms ease;
}

.loom-map-legend-toggle input:checked + .loom-map-legend-slider {
    background-color: var(--crpmem-bleu-fonce, #015f68);
}

.loom-map-legend-toggle input:checked + .loom-map-legend-slider::after {
    transform: translateX(16px);
}

.loom-map-legend-toggle input:focus-visible + .loom-map-legend-slider {
    outline: 2px solid var(--crpmem-orange, #ec7520);
    outline-offset: 2px;
}

/* Ancien checkbox masque — conserve pour retrocompatibilite */
.loom-map-legend-checkbox {
    display: none;
}

.loom-map-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.loom-map-legend-name {
    flex-grow: 1;
}

/* ========================================================================
   6. LABELS SUR LA CARTE
   ======================================================================== */

.loom-map-label {
    background: rgba(255, 255, 255, 0.85);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #343f52;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 280px;
    /* FIX v1.0.12 (2026-04-04) : Labels via L.divIcon au lieu de tooltip.
     * iconAnchor [0,0] place le coin haut-gauche au point du marqueur.
     * transform translate centre le label sur le point. 
     * pointer-events none evite de bloquer les clics sur les couches dessous. */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* DEL v1.0.12 (2026-04-04) : .loom-map-label-anchor supprime (CSS mort)
 * La classe n est plus utilisee dans interactive-map.js depuis le refactoring
 * DivIcon v2. Elimine les !important hors @media (§7.4). */

/* ========================================================================
   7. POPUPS
   ======================================================================== */

.loom-map-popup .leaflet-popup-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #343f52;
}

.loom-map-popup .leaflet-popup-content a {
    color: var(--crpmem-bleu-fonce, #015f68);
    text-decoration: underline;
}

.loom-map-popup .leaflet-popup-content a:hover {
    color: var(--crpmem-orange, #ec7520);
}

/* FIX v1.0.12 (2026-03-24) : Bouton "En savoir plus" dans popups
 * PROBLEME : .btn-primary a un fond teal #015f68, et la regle
 * .leaflet-popup-content a { color: #015f68 } force aussi le texte en teal
 * → texte teal sur fond teal = contraste 1:1, illisible.
 * FIX : Texte blanc sur fond teal (15.39:1 AAA), hover orange CRPMEM.
 */
.loom-map-popup .leaflet-popup-content a.btn {
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.375rem;
}

.loom-map-popup .leaflet-popup-content a.btn:hover,
.loom-map-popup .leaflet-popup-content a.btn:focus-visible {
    color: #ffffff;
    background-color: var(--crpmem-orange, #ec7520);
    border-color: var(--crpmem-orange, #ec7520);
}

.loom-map-popup .leaflet-popup-content a.btn:focus-visible {
    outline: 3px solid var(--crpmem-orange, #ec7520);
    outline-offset: 2px;
}

/* ========================================================================
   9. HALO SURBRILLANCE AU SURVOL
   ADD v1.0.12 (2026-04-03) — Effet lumineux sur les couches au mouseover
   Facilite la selection quand plusieurs objets se superposent
   ======================================================================== */

/* Transition fluide sur tous les SVG paths Leaflet (poids + opacite + fade toggle) */
.loom-map-canvas .leaflet-overlay-pane svg path {
    transition: filter 200ms ease, stroke-width 200ms ease, fill-opacity 300ms ease, opacity 300ms ease;
}

/* Halo lumineux — classe ajoutee/retiree par JS via classList */
.loom-layer-highlight {
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
}

/* ========================================================================
   10. TOOLTIP HOVER (INFOBULLE AU SURVOL)
   ADD v1.0.12 (2026-04-03) — Style tooltip non-permanent (popup_content)
   Distinct du label permanent (.loom-map-label)
   ======================================================================== */

.loom-map-tooltip {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #343f52; /* 10.28:1 AAA */
    border-radius: 0.375rem;
    max-width: 320px;
    /* MOD v1.0.12 (2026-04-04) : Largeur adaptive au contenu
     * width max-content : le tooltip epouse le texte court
     * max-width 320px : wrap multi-lignes si texte depasse
     * text-align center : centrage texte court et multi-lignes */
    width: max-content;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
}

/* Fleche du tooltip (heritee de Leaflet, override couleur) */
.loom-map-tooltip.leaflet-tooltip-top::before {
    border-top-color: rgba(255, 255, 255, 0.95);
}

.loom-map-tooltip.leaflet-tooltip-bottom::before {
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

/* ========================================================================
   11. ATTRIBUTION
   ======================================================================== */

.loom-map-attribution {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #595959; /* 7.00:1 AAA */
    text-align: right;
}

/* ========================================================================
   12. RESPONSIVE
   ======================================================================== */

/* Tablette */
@media (max-width: 991.98px) {
    .loom-map-canvas {
        height: 400px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .loom-map-canvas {
        height: 320px;
    }

    .loom-map {
        margin: 1.5rem 0;
    }

    .loom-map-legend {
        padding: 0.75rem 1rem;
    }

    .loom-map-legend-item {
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }

    /* Halo reduit sur mobile (performance GPU) */
    .loom-layer-highlight {
        filter: drop-shadow(0 0 4px currentColor);
    }

    .loom-map-tooltip {
        max-width: 240px;
        font-size: 0.8rem;
    }
}

/* Petit mobile */
@media (max-width: 575.98px) {
    .loom-map-canvas {
        height: 260px;
        border-radius: 0.375rem;
    }

    .loom-map-label {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
    }
}

/* ========================================================================
   13. PREFERS-REDUCED-MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .loom-map-canvas {
        /* Desactiver les animations Leaflet (zoom, pan) */
    }

    /* Desactiver transitions halo pour utilisateurs sensibles */
    .loom-map-canvas .leaflet-overlay-pane svg path {
        transition: none;
    }

    .loom-layer-highlight {
        filter: none;
    }

    /* ADD v1.0.12 (2026-04-13) : Desactiver transition chevron legende */
    .loom-map-legend-collapse-btn {
        transition: none;
    }
}

/**
 * ========================================================================
 * SIGNATURE NUMERIQUE LOOM-CMS v1.0.12
 * ========================================================================
 * Module      : CSS Frontend - Cartes interactives
 * Emplacement : /assets/css/interactive-map.css
 * Version     : 1.0.12
 * Date        : 2026-04-13
 * Auteur      : Riley / LOOM DIGITAL
 * ========================================================================
 *
 * ADD v1.0.12 (2026-04-13) - LEGENDE TOGGLE COLLAPSE/EXPAND :
 * [x] .loom-map-legend-header : flex row justify-between (titre + bouton)
 * [x] .loom-map-legend-collapse-btn : 24x24px, transparent, chevron SVG
 * [x] .loom-map-legend-body : wrapper items legende
 * [x] .loom-map-legend--collapsed : body display none + chevron rotate 180deg
 * [x] .loom-map-legend-title : margin-bottom 0 (delegue au header)
 * [x] RGAA : focus-visible orange sur bouton collapse
 * [x] WCAG 2.2 : cible 24x24px bouton collapse
 * [x] prefers-reduced-motion : transition none sur bouton
 *
 * MOD v1.0.12 (2026-04-04) - LEGENDE TOGGLE SWITCH + TOOLTIPS WRAP :
 * [x] .loom-map-legend-toggle : switch CSS pure (36x20px, slider knob)
 * [x] .loom-map-legend-slider : knob blanc + transition 200ms + checked teal
 * [x] .loom-map-legend-checkbox : display none (remplace par toggle)
 * [x] .loom-map-legend-item : min-height 28px, toggle align right via margin-left auto
 * [x] SVG path transition : ajout opacity 300ms (fade in/out layers)
 * [x] .loom-map-tooltip : width max-content + wrap + centrage
 * [x] .loom-map-label : nowrap conserve (DivIcon anti-vertical)
 * [x] RGAA : focus-visible slider, checkbox accessible tab+espace
 * [x] WCAG 2.2 : cible 36x20px toggle switch
 *
 * ADD v1.0.12 (2026-04-03) - HALO SURVOL + TOOLTIP HOVER :
 * [x] .loom-layer-highlight : drop-shadow double (8px + 16px currentColor)
 * [x] SVG path transition 200ms (filter, stroke-width, fill-opacity)
 * [x] .loom-map-tooltip : fond blanc 95%, ombre 12px, radius 0.375rem, max 320px
 * [x] Fleche tooltip : override couleur fond blanc
 * [x] Mobile : drop-shadow reduit 4px, tooltip max 240px
 * [x] prefers-reduced-motion : transition none, filter none
 *
 * FIX v1.0.12 (2026-03-26) - LABELS OVERLAY GEOJSON :
 * [x] .loom-map-label : white-space pre-line → nowrap
 * [x] max-width 280px, overflow hidden, text-overflow ellipsis
 * [x] Corrige affichage 1 lettre/ligne sur labels longs GeoJSON
 *
 * FIX v1.0.12 (2026-03-24) - BOUTON POPUP :
 * [x] a.btn popup : texte blanc #fff sur fond teal (15.39:1 AAA)
 * [x] a.btn hover : fond orange CRPMEM, texte blanc
 * [x] a.btn focus-visible : outline orange (RGAA clavier)
 *
 * ADD v1.0.12 (2026-03-24) - CREATION INITIALE :
 * [x] Conteneur .loom-map (margin, position)
 * [x] Canvas .loom-map-canvas (500px desktop, 400px tablette, 320px mobile, 260px petit)
 * [x] Loader centrage flex, fond #f8f9fa
 * [x] Erreur fond rose #f8d7da, contraste AAA
 * [x] Description italic, couleur body CRPMEM #4e5662 (7.42:1)
 * [x] Legende : checkbox toggle, swatch couleur, labels accessibles
 * [x] Labels carte : fond blanc 85%, ombre, pre-line (retour ligne)
 * [x] Popups : taille 0.9rem, liens couleur CRPMEM
 * [x] Attribution : 0.75rem, couleur #595959 (7.00:1)
 * [x] Responsive : 4 breakpoints (desktop, tablette, mobile, petit mobile)
 * [x] RGAA AAA : focus-visible orange, contrastes 7:1+, cibles 24px
 * [x] WCAG 2.2 : cibles tactiles min 24px (legende items + checkboxes)
 * [x] prefers-reduced-motion respecte
 *
 * Hash : SHA256-INTERACTIVE-MAP-CSS-20260413-LEGEND-COLLAPSE
 * ========================================================================
 */