* { box-sizing: border-box; margin: 0; padding: 0; }
        body, html { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; }
        .app-container { display: flex; width: 100vw; height: 100vh; position: relative; }
        #map { flex-grow: 1; height: 100%; z-index: 1; }

        /* SIDEBAR ET TIROIR */
        .sidebar-wrapper { display: flex; height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; pointer-events: none; }
        .sidebar-nav { pointer-events: auto; width: 70px; height: 100%; background: #ffffff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 0; }
        .brand-logo { width: 42px; height: 42px; cursor: pointer; transition: transform 0.2s; }
        .brand-logo:hover { transform: scale(1.08); }
        
        /* Correction propre du centrage sans casser la disposition */
        .nav-menu-items { display: flex; flex-direction: column; gap: 20px; margin: auto 0; }
        
        .menu-btn { width: 48px; height: 48px; border: none; background: transparent; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #65676b; transition: all 0.2s ease; }
        .menu-btn:hover { background-color: #f0f2f5; color: #1877f2; }
        .menu-btn.active { background-color: #e7f3ff; color: #1877f2; }

        .sidebar-content-panel { pointer-events: auto; width: 0; overflow-y: auto; height: 100%; background: #ffffff; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.08); transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-left: 1px solid #f0f2f5; }
        .sidebar-content-panel.open { width: 360px; }
        .panel-inner { width: 360px; padding: 25px 20px; display: none; }
        .panel-inner.active { display: block; }

        /* ==========================================
           TITRE ET BARRE DE RECHERCHE
           ========================================== */

        .panel-title {
            font-size: 15px;
            color: #5f6368;
            margin-bottom: 16px;
        }

        .search-input { 
            width: 100%; 
            padding: 12px 18px; 
            border: 1px solid #dfe1e5; 
            border-radius: 24px; 
            outline: none; 
            font-size: 14px; 
            background-color: #ffffff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06); 
            transition: all 0.2s ease;
            margin-bottom: 24px;
        }

        .search-input:focus { 
            border-color: #1877f2; 
            box-shadow: 0 3px 10px rgba(0,0,0,0.12); 
        }

        /* ==========================================
           RÉSULTATS DE RECHERCHE (4 ITEMS VISIBLES MAX)
           ========================================== */

        .results-list { 
            display: flex; 
            flex-direction: column; 
            gap: 12px; 
            max-height: calc(100vh - 220px); 
            overflow-y: auto; 
            padding-right: 4px;
        }

        /* 1. Carte Standard */
        .result-card { 
            background: transparent; 
            border: none; 
            padding: 18px 8px; 
            cursor: pointer; 
            display: flex; 
            gap: 16px; 
            align-items: center;
            border-bottom: 1px solid #f0f2f5;
            transition: background 0.15s ease;
        }

        .result-card:hover { 
            background: #f8f9fa;
        }

        /* Miniature Image Standard */
        .result-card img.shop-thumb { 
            width: 48px; 
            height: 48px; 
            border-radius: 8px; 
            object-fit: cover; 
            flex-shrink: 0;
        }

        /* Conteneur Texte */
        .result-card .info { 
            flex: 1; 
            min-width: 0; 
        }

        /* Titre du résultat (Bleu Google avec "...") */
        .result-card h4 { 
            font-size: 16px; 
            color: #1a0dab; 
            font-weight: 500;
            margin: 0;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-card:hover h4 {
            text-decoration: underline;
        }

        /* Métadonnées (Ville, Note) */
        .result-card .sub-info { 
            font-size: 12px; 
            color: #4d5156; 
            margin-top: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .result-card .rating {
            font-size: 12px; 
            color: #4d5156; 
        }

        /* 2. Carte Sponsorisée */
        .result-card.is-sponso {
            padding: 24px 12px;
            background: #fafafa;
            border-bottom: 2px solid #ccd0d5;
            margin-bottom: 8px;
        }

        .result-card.is-sponso img.shop-thumb {
            width: 64px;
            height: 64px;
        }

        .result-card.is-sponso h4 {
            font-size: 18px;
        }

        /* Mention "SPONSORISÉ" */
        .sponso-label-text {
            font-size: 11px;
            font-weight: 600;
            color: #70757a;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 3px;
        }

        /* Conteneur principal du module IA */
        .ia-container {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 400px;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
        }

        /* ----------------------------------
           PANNEAU EN COURS DE CONSTRUCTION
           ---------------------------------- */
        .construction-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(2px);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }

        .construction-card {
            background: #ffffff;
            padding: 24px;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            border: 1px solid #f0f0f0;
            max-width: 280px;
        }

        .construction-icon {
            margin-bottom: 8px;
        }

        .construction-card h3 {
            margin: 0 0 8px 0;
            font-size: 16px;
            color: #1a1a1a;
        }

        .construction-card p {
            font-size: 12px;
            color: #666;
            margin: 0 0 14px 0;
            line-height: 1.4;
        }

        /* ----------------------------------
           DESIGNS DU CHAT IA (Sous l'overlay)
           ---------------------------------- */
        .ia-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid #f0f2f5;
            background: #f8f9fa;
        }

        .ia-avatar {
            font-size: 20px;
            background: #e8f0fe;
            padding: 6px;
            border-radius: 50%;
        }

        .ia-header h4 {
            margin: 0;
            font-size: 14px;
            color: #202124;
        }

        .ia-status {
            font-size: 11px;
            color: #34a853;
        }

        .ia-messages {
            flex: 1;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
        }

        .message {
            max-width: 80%;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 1.4;
            border-radius: 14px;
        }

        .message.bot {
            background: #f1f3f4;
            color: #202124;
            align-self: flex-start;
            border-bottom-left-radius: 2px;
        }

        .message.user {
            background: #1a0dab;
            color: #ffffff;
            align-self: flex-end;
            border-bottom-right-radius: 2px;
        }

        .ia-input-area {
            display: flex;
            gap: 8px;
            padding: 12px;
            border-top: 1px solid #f0f2f5;
        }

        .ia-input-area input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #dfe1e5;
            border-radius: 18px;
            font-size: 13px;
        }

        .ia-input-area button {
            background: #1a0dab;
            color: white;
            border: none;
            padding: 8px 14px;
            border-radius: 18px;
            font-weight: 600;
            font-size: 12px;
        }

        /* FICHE BOUTIQUE DÉTAILLÉE */
        .shop-detail-card { display: flex; flex-direction: column; gap: 12px; }
        .shop-detail-img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; }
        .shop-detail-title { font-size: 22px; font-weight: 700; color: #1c1e21; margin-top: 4px; }
        .shop-detail-infos { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #444; background: #f8f9fa; padding: 12px; border-radius: 8px; }

        /* FILTRES FAÇON VINTED */
        .filter-group { margin-bottom: 20px; }
        .filter-group label { display: block; font-size: 13px; font-weight: bold; color: #444; margin-bottom: 8px; }
        .filter-select { width: 100%; padding: 10px; border: 1px solid #ccd0d5; border-radius: 8px; font-size: 14px; background: white; }

        /* COMMANDES CARTE */
        .geoloc-control { position: absolute; top: 20px; right: 20px; z-index: 1000; }
        .geoloc-btn {
            width: 46px;
            height: 46px;
            background-color: #ffffff;
            border: none;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #1877f2;
            transition: all 0.2s ease;
        }

        .geoloc-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            background-color: #f8f9fa;
        }

        .dpad-control { position: absolute; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
        .dpad-arrows-container { display: none; flex-direction: column; align-items: center; gap: 8px; }
        .dpad-arrows-container.visible { display: flex; }
        .dpad-main-buttons { display: flex; flex-direction: column; gap: 8px; }
        .dpad-row { display: flex; gap: 55px; }
        .dpad-btn { width: 42px; height: 42px; background-color: #ffffff; border: none; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.15); cursor: pointer; font-size: 16px; color: #444; display: flex; align-items: center; justify-content: center; }

        /* Style du conteneur de l'icône Leaflet */
        .pokespot-custom-pin {
            background: transparent !important;
            border: none !important;
        }

        .pokespot-pin-container {
            position: relative;
            width: 36px;
            height: 46px;
            filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
            display: block;
        }

        /* Le SVG blanc (en arrière-plan) */
        .pokespot-pin-container svg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        /* L'image PNG de l'icône (Forcée au PREMIER PLAN) */
        .pin-icon {
            position: absolute !important;
            top: 5px !important;
            left: 5px !important;
            width: 26px !important;
            height: 26px !important;
            object-fit: contain !important;
            z-index: 10 !important;
            display: block !important;
        }
        .badge-tcg { background-color: #ffebee; color: #c62828; }
        .badge-distri { background-color: #e3f2fd; color: #1565c0; }
        .badge-type3 { background-color: #e8f5e9; color: #2e7d32; }
        
        /* Caché par défaut pour TOUTES les sections du volet */
        .panel-inner {
            display: none !important;
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Affiché SEULEMENT quand la section a la classe .active */
        .panel-inner.active {
            display: flex !important;
            flex-direction: column;
        }

        /* L'overlay reste coincé uniquement dans sa propre section */
        #section-ia .construction-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(4px);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* Alignement En-tête Filtres + Bouton Réinitialiser */
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .filter-header .panel-title {
            margin-bottom: 0 !important;
        }

        .btn-reset-filters {
            background: transparent;
            border: none;
            color: #1877f2;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: background 0.2s ease;
        }

        .btn-reset-filters:hover {
            background: #e7f3ff;
            text-decoration: underline;
        }

        /* Groupes de filtres */
        .filter-group { 
            margin-bottom: 18px; 
        }

        .filter-group label { 
            display: block; 
            font-size: 13px; 
            font-weight: 600; 
            color: #444; 
            margin-bottom: 8px; 
        }

        .filter-select { 
            width: 100%; 
            padding: 10px 12px; 
            border: 1px solid #dfe1e5; 
            border-radius: 8px; 
            font-size: 14px; 
            background: #ffffff; 
            outline: none;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: border-color 0.2s ease;
        }

        .filter-select:focus {
            border-color: #1877f2;
        }

        /* Liste de la légende */
        .legend-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 10px;
        }

        /* Carte de la légende */
        .legend-card {
            background: #ffffff;
            border: 1px solid #f0f2f5;
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .legend-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        /* En-tête de la carte (Icône + Titre + Badge) */
        .legend-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .legend-icon {
            width: 32px;
            height: 32px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .legend-header h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a0dab;
            margin: 0 0 2px 0;
            line-height: 1.2;
        }

        /* Description */
        .legend-desc {
            font-size: 12px;
            color: #5f6368;
            line-height: 1.45;
            margin: 0;
        }

        .legend-desc strong {
            color: #3c4043;
        }

        /* ==========================================
           MODULE SIGNALEMENT (STYLE COMPACT & SOBRE)
           ========================================== */
        .form-signalement {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* Sélecteur 3 choix style onglets purs */
        .type-selector {
            display: flex;
            gap: 6px;
            background: #f1f3f4;
            padding: 3px;
            border-radius: 8px;
            margin-bottom: 4px;
        }

        .type-btn {
            flex: 1;
            text-align: center;
            cursor: pointer;
        }

        .type-btn input {
            display: none;
        }

        .type-btn span {
            display: block;
            padding: 6px 0;
            font-size: 11px;
            font-weight: 600;
            color: #5f6368;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .type-btn input:checked + span {
            background: #ffffff;
            color: #1a1a1a;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }

        /* Champs compacts */
        .form-field-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .form-field-group label {
            font-size: 11px;
            font-weight: 600;
            color: #5f6368;
        }

        .form-input-compact {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #dadce0;
            border-radius: 6px;
            font-size: 13px;
            outline: none;
            background: #ffffff;
            color: #202124;
            transition: border-color 0.15s;
        }

        .form-input-compact:focus {
            border-color: #202124;
        }

        .form-textarea-compact {
            width: 100%;
            height: 52px;
            padding: 8px 10px;
            border: 1px solid #dadce0;
            border-radius: 6px;
            font-size: 12px;
            outline: none;
            resize: none;
            background: #ffffff;
            color: #202124;
        }

        .form-textarea-compact:focus {
            border-color: #202124;
        }

        /* Zone Drag & Drop Fit */
        .drop-zone-fit {
            border: 1px dashed #bdc1c6;
            border-radius: 6px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #fafafa;
            cursor: pointer;
            transition: background 0.15s;
        }

        .drop-zone-fit:hover, .drop-zone-fit.dragover {
            background: #f1f3f4;
            border-color: #202124;
        }

        .drop-zone-fit input[type="file"] {
            display: none;
        }

        .drop-icon {
            font-size: 14px;
        }

        .drop-text {
            font-size: 12px;
            color: #5f6368;
            font-weight: 500;
        }

        .file-preview-compact {
            display: none;
            font-size: 11px;
            color: #1e8e3e;
            font-weight: 600;
            margin-top: 2px;
        }

        /* Bouton Noir Minimaliste */
        .btn-submit-fit {
            background: #202124;
            color: #ffffff;
            border: none;
            padding: 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 4px;
            transition: background 0.15s;
        }

        .btn-submit-fit:hover {
            background: #3c4043;
        }
        /* STYLE DU BLOC RÉSUMÉ IA */
        .ai-summary-box {
            background: linear-gradient(135deg, #f0f4ff 0%, #f5f3ff 100%);
            border: 1px solid #d8b4fe55;
            border-radius: 10px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 10px;
        }

        .ai-summary-header {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            font-weight: 700;
            color: #7c3aed;
            
            letter-spacing: 0.3px;
        }

        .ai-summary-text {
            font-size: 12.5px;
            color: #4b5563;
            line-height: 1.45;
            margin: 0;
        }
        /* Effet d'apparition progressive pour le résumé IA */
.fade-text {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.fade-text.visible {
    opacity: 1;
}
/* BOUTON RETOUR (Même hauteur que géoloc, à l'opposé) */
        /* BOUTON RETOUR */
.back-control { 
    position: absolute; 
    top: 20px; 
    left: 90px; /* Position initiale quand le volet est fermé */
    z-index: 1000; 
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* Quand le tiroir s'ouvre, on décale aussi le bouton de retour */
.back-control.shifted {
    left: 440px; 
}
        .back-btn {
            width: 46px;
            height: 46px;
            background-color: #ffffff;
            border: none;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #1877f2;
            transition: all 0.2s ease;
        }

        .back-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            background-color: #f8f9fa;
        }
        /* BARRE DE NAVIGATION FLOTTANTE VERTICALE (Bas gauche) */
        .floating-menu-bar {
    border-left: 1px solid grey;
    position: absolute;
    bottom: 0px;
    left: 71px;
    z-index: 2000; /* Augmenté pour passer au-dessus de la carte Leaflet */
    pointer-events: auto; /* S'assure que les clics sont bien pris en compte */
    background: #ffffff;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

        /* Quand le tiroir s'ouvre, la barre se décale vers la droite (360px de large pour le tiroir + 20px de marge) */
        .floating-menu-bar.shifted {
            left: 431px; 
        }

        /* Style des boutons à l'intérieur */
        .floating-btn {
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .floating-btn:hover {
            background-color: #f0f2f5;
        }

        /* Adaptation sur mobile (< 768px) où le tiroir s'ouvre par le bas (pas de décalage horizontal) */
        @media screen and (max-width: 768px) {
            .floating-menu-bar, 
            .floating-menu-bar.shifted {
                bottom: 15px;
                left: 15px;
            }
        }

        /* Adaptation sur mobile (< 768px) où le tiroir s'ouvre par le bas (pas de décalage horizontal) */
        @media screen and (max-width: 768px) {
            .back-control, 
            .back-control.shifted { 
                top: 15px !important; 
                left: 15px !important; 
            }
        }
        /* ==========================================
   MEDIA QUERIES - MODE APPLICATION MOBILE (< 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    /* Le conteneur s'empile verticalement */
    .app-container { 
        flex-direction: column; 
    }

    /* La sidebar devient une barre de navigation en BAS de l'écran */
    .sidebar-wrapper { 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        width: 100vw; 
        height: 65px; 
        top: auto; 
        z-index: 2000; 
    }

    .sidebar-nav { 
        width: 100%; 
        height: 65px; 
        flex-direction: row; 
        justify-content: space-around; 
        align-items: center; 
        padding: 0 10px; 
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1); 
        background: #ffffff;
    }

    /* On masque le logo du haut et le bouton "+" du bas pour garder uniquement les 4 icônes principales alignées */
    .sidebar-nav > .brand-logo,
    .sidebar-nav > .menu-btn:last-child {
        display: none; 
    }

    .nav-menu-items { 
        flex-direction: row; 
        gap: 0; 
        margin: 0; 
        width: 100%; 
        justify-content: space-around; 
    }

    .menu-btn { 
        width: 44px; 
        height: 44px; 
        border-radius: 50%; 
    }

    /* Le panneau/tiroir glisse du BAS vers le HAUT en plein écran mobile */
    .sidebar-content-panel { 
        position: absolute; 
        bottom: 65px; 
        left: 0; 
        width: 100vw !important; 
        height: 0; 
        max-height: calc(100vh - 65px);
        transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 20px 20px 0 0;
        border-left: none;
    }

    .sidebar-content-panel.open { 
        height: calc(82vh - 65px); 
    }

    .panel-inner { 
        width: 100% !important; 
        padding: 20px 16px; 
    }

    /* Repositionnement des boutons de la carte pour ne pas être cachés par la barre basse */
    .geoloc-control { 
        top: 15px !important; 
        right: 15px !important; 
    }

    .dpad-control { 
        bottom: 85px !important; 
        right: 15px !important; 
    }
}