/* Built by tools/build-css.js from assets/css/src/: edit the partials, then run npm run build:css. */
/**
 * Mapped Places - Styles principaux
 * Sidebar with establishment cards, search bar, dropdown filter,
 * SVG markers, clusters, mobile toolbar, responsive popup.
 *
 * Neutral palette: a preset or theme restyles the map by overriding the
 * --mapl-* custom properties on .mapl-map-container.
 *
 * !important is kept for two cases only: the plugin's <button> elements
 * (pills, carousel arrows and dots, "Show all" link), which themes and
 * Elementor kits style aggressively, and the fullscreen mode, which must
 * win over its parents. A value meant to be adjustable goes through a
 * custom property read inside the !important declaration
 * (e.g. --mapl-pill-radius).
 */

/* ============================================================
   1. CSS VARIABLES
   All variables are overridable via Elementor selectors.
   ============================================================ */
/* Poppins (SIL Open Font License), self-hosted: no request to a font CDN */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700.woff2') format('woff2');
}

:root {
    /* Core palette (neutral) */
    --mapl-primary: #1F4E79;
    --mapl-primary-dark: #163A5A;
    --mapl-primary-light: #2A6396;
    --mapl-accent: #E07A1F;
    --mapl-accent-dark: #C4661A;

    /* Surfaces */
    --mapl-bg: #F8FAFC;
    --mapl-surface: #FFFFFF;

    /* Text */
    --mapl-text: #1E293B;
    --mapl-text-secondary: #64748B;
    --mapl-text-muted: #94A3B8;

    /* Borders */
    --mapl-border: #E2E8F0;
    --mapl-border-light: #F1F5F9;

    /* Radius */
    --mapl-radius-sm: 6px;
    --mapl-radius: 10px;
    --mapl-radius-lg: 14px;

    /* Shadows */
    --mapl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --mapl-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mapl-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.10);
    --mapl-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.14);

    /* Typography — Poppins, system fallback. Titles use the same family
       unless a preset sets --mapl-font-title. */
    --mapl-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mapl-font-title: var(--mapl-font);

    /* Layout */
    --mapl-sidebar-width: 380px;

    /* Transitions */
    --mapl-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --mapl-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Spacing (8px grid, used internally) */
    --mapl-space-xs: 4px;
    --mapl-space-sm: 8px;
    --mapl-space-md: 16px;
    --mapl-space-lg: 24px;
    --mapl-space-xl: 32px;

    /* Extra radius for legacy compat */
    --mapl-radius-xl: 20px;

    /* Slow transition for bottom sheet / drawer */
    --mapl-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. CONTAINER (.mapl-map-container)
   Flex row, gap 0, rounded, shadow, white bg, overflow hidden.
   ============================================================ */
.mapl-map-container {
    /* Derived from --mapl-primary: declared here, not on :root, so that an
       override of --mapl-primary on the container (preset, Elementor
       control) reaches clusters and popups too. */
    --mapl-cluster-bg: var(--mapl-surface);
    --mapl-cluster-border: var(--mapl-primary);
    --mapl-cluster-text: var(--mapl-primary);
    --mapl-popup-accent: var(--mapl-primary);

    display: flex;
    flex-direction: row;
    gap: 0;
    font-family: var(--mapl-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mapl-text);
    position: relative;
    border-radius: var(--mapl-radius-lg);
    overflow: hidden;
    box-shadow: var(--mapl-shadow-lg);
    background: var(--mapl-surface);
    height: 700px;
    width: 100%;
}

/* Hauteur fixée par le conteneur (height="container", widget Elementor
   responsive) : aucun style en ligne, le wrapper remplit le conteneur. */
.mapl-map-container--sized .mapl-map-wrapper {
    height: 100%;
}

.mapl-map-container *,
.mapl-map-container *::before,
.mapl-map-container *::after {
    box-sizing: border-box;
}

/* Fullscreen mode */
.mapl-map-container.mapl-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999;
    border-radius: 0;
    margin: 0;
}

body.mapl-body-fullscreen {
    overflow: hidden;
}

/* ============================================================
   3. SIDEBAR (.mapl-map-sidebar)
   Fixed width, flex column, border-right, full height.
   ============================================================ */
.mapl-map-sidebar {
    width: var(--mapl-sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--mapl-surface);
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--mapl-border);
    transition: transform var(--mapl-transition-slow), height var(--mapl-transition-slow);
    position: relative;
    z-index: 10;
}

/* Inner wrapper: flex 1, column, overflow hidden */
.mapl-sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ---- Sidebar Header ---- */
.mapl-sidebar-header {
    padding: 20px 16px 14px;
    background: var(--mapl-surface);
    border-bottom: 1px solid var(--mapl-border-light);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mapl-space-sm);
}

/* Title */
.mapl-sidebar-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--mapl-primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* Subtitle */
.mapl-sidebar-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--mapl-text-secondary);
    font-weight: 400;
    line-height: 1.4;
}

/* Sidebar right position class */
.mapl-map-container.mapl-sidebar-right .mapl-map-sidebar {
    border-right: none;
    border-left: 1px solid var(--mapl-border);
    order: 2;
}

.mapl-map-container.mapl-sidebar-right .mapl-map-wrapper {
    order: 1;
}

/* ============================================================
   4. SEARCH (.mapl-search-row)
   Flex row, gap 6px, input + button.
   ============================================================ */
.mapl-search-row {
    position: relative; /* ancre de la liste d'autocomplétion */
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
}

/* Search input */
.mapl-search-input {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--mapl-border);
    border-radius: var(--mapl-radius);
    font-size: 13px;
    outline: none;
    transition: border-color var(--mapl-transition), box-shadow var(--mapl-transition), background var(--mapl-transition);
    color: var(--mapl-text);
    background: var(--mapl-bg);
    min-width: 0;
    font-family: var(--mapl-font);
}

.mapl-search-input::placeholder {
    color: var(--mapl-text-muted);
}

/* Préfixe .mapl-map-container : le reset du thème cible
   input[type="search"] (et :focus) et imposait sa bordure grise #666 / #333
   à la place de celle du plugin. */
.mapl-map-container .mapl-search-input {
    border: 1.5px solid var(--mapl-border);
}

.mapl-map-container .mapl-search-input:focus {
    border-color: var(--mapl-primary);
    box-shadow: 0 0 0 3px rgba(2, 66, 102, 0.15);
    background: var(--mapl-surface);
}

/* Search button */
.mapl-search-btn {
    padding: 10px 12px;
    background: var(--mapl-primary);
    color: white;
    border: none;
    border-radius: var(--mapl-radius);
    cursor: pointer;
    transition: background var(--mapl-transition), color var(--mapl-transition), border-color var(--mapl-transition), transform var(--mapl-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mapl-search-btn:hover {
    background: var(--mapl-primary-dark);
    transform: translateY(-1px);
}

.mapl-search-btn:active {
    transform: translateY(0);
}

.mapl-search-btn svg {
    display: block;
    transition: stroke var(--mapl-transition);
}

/* ============================================================
   5. FILTER DROPDOWN (.mapl-filter-select)
   Full width select with custom chevron.
   ============================================================ */
.mapl-filter-select {
    display: block;
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid var(--mapl-border);
    border-radius: var(--mapl-radius);
    font-size: 13px;
    font-family: var(--mapl-font);
    outline: none;
    color: var(--mapl-text);
    background-color: var(--mapl-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 10px;
    transition: border-color var(--mapl-transition), box-shadow var(--mapl-transition);
}

.mapl-map-container .mapl-filter-select:focus {
    border-color: var(--mapl-primary);
    box-shadow: 0 0 0 3px rgba(2, 66, 102, 0.15);
}

.mapl-filter-select:hover {
    border-color: var(--mapl-text-muted);
}

/* ============================================================
   6. GEOLOCATION
   ============================================================ */

.mapl-geoloc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    background: var(--mapl-accent);
    color: white;
    border: none;
    border-radius: var(--mapl-radius);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background var(--mapl-transition), transform var(--mapl-transition);
    white-space: nowrap;
    min-width: 0;
    font-family: var(--mapl-font);
}

.mapl-geoloc-btn:hover {
    background: var(--mapl-accent-dark);
    transform: translateY(-1px);
}

.mapl-geoloc-btn:active {
    transform: translateY(0);
}

.mapl-geoloc-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.mapl-geoloc-btn.loading svg {
    animation: mapl-spin 1s linear infinite;
}

/* ============================================================
   10. RESULTS HEADER (.mapl-results-header)
   ============================================================ */

.mapl-results-header {
    padding: 8px 16px;
    background: var(--mapl-surface);
    font-size: 11px;
    font-weight: 600;
    color: var(--mapl-text-secondary);
    border-bottom: 1px solid var(--mapl-border-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--mapl-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Count pill */
.mapl-results-count {
    color: var(--mapl-primary);
    font-weight: 800;
    font-size: 14px;
    min-width: 22px;
    text-align: center;
    background: rgba(30, 58, 95, 0.07);
    border-radius: var(--mapl-radius-xl);
    padding: 0 8px;
    line-height: 1.7;
    display: inline-block;
}

/* Results list scrollable area */
.mapl-place-list {
    flex: 1 1 0%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mapl-border) transparent;
    scroll-behavior: smooth;
    min-height: 0;
    max-height: calc(100% - 1px); /* force scroll containment */
}

.mapl-place-list::-webkit-scrollbar { width: 4px; }
.mapl-place-list::-webkit-scrollbar-track { background: transparent; }
.mapl-place-list::-webkit-scrollbar-thumb {
    background: var(--mapl-border);
    border-radius: 2px;
}

/* ============================================================
   11. ESTABLISHMENT CARDS (.mapl-place-card)
   New v4 card design with icon circle + meta row.
   ============================================================ */
.mapl-place-card {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mapl-border-light);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition:
        background var(--mapl-transition),
        border-left-color var(--mapl-transition),
        box-shadow var(--mapl-transition);
    will-change: background, border-left-color;
    animation: mapl-fade-in 0.25s ease both;
    position: relative;
}

.mapl-place-card:hover {
    background: #edf2f6; /* fallback */
    background: color-mix(in srgb, var(--mapl-primary) 7%, #fff);
    border-left-color: var(--mapl-accent);
}

.mapl-place-card.active {
    background: #e1e8ed; /* fallback */
    background: color-mix(in srgb, var(--mapl-primary) 12%, #fff);
    border-left-color: var(--mapl-primary);
}

.mapl-place-card:last-child {
    border-bottom: none;
}

/* Le clic souris donne le focus a la carte (elle porte tabindex="0") :
   sans cette regle, l'element selectionne s'entourait d'un cadre orange.
   Le fond suffit a signaler la selection ; le cadre reste reserve a la
   navigation clavier, ou il est le seul repere disponible. */
.mapl-place-card:focus {
    outline: none;
}

.mapl-place-card:focus-visible {
    outline: 2px solid var(--mapl-accent);
    outline-offset: -2px;
}

/* Stagger animation for etab cards */
.mapl-place-card:nth-child(1)  { animation-delay: 0.02s; }
.mapl-place-card:nth-child(2)  { animation-delay: 0.04s; }
.mapl-place-card:nth-child(3)  { animation-delay: 0.06s; }
.mapl-place-card:nth-child(4)  { animation-delay: 0.08s; }
.mapl-place-card:nth-child(5)  { animation-delay: 0.10s; }
.mapl-place-card:nth-child(6)  { animation-delay: 0.12s; }
.mapl-place-card:nth-child(7)  { animation-delay: 0.14s; }
.mapl-place-card:nth-child(8)  { animation-delay: 0.16s; }
.mapl-place-card:nth-child(9)  { animation-delay: 0.18s; }
.mapl-place-card:nth-child(10) { animation-delay: 0.20s; }

/* Icon circle */
.mapl-place-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--mapl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.mapl-place-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Card info column */
.mapl-place-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Establishment name */
.mapl-place-name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--mapl-text);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* Meta row: type badge + city */
.mapl-place-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Type badge pill */
.mapl-place-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* City label */
.mapl-place-city {
    font-size: 12px;
    color: var(--mapl-text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phone link */
.mapl-place-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--mapl-accent);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--mapl-transition);
    line-height: 1.4;
}

.mapl-place-phone:hover {
    text-decoration: underline;
    color: var(--mapl-accent-dark);
}

.mapl-place-phone svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

/* ============================================================
   13. NO RESULTS (.mapl-no-results)
   ============================================================ */
.mapl-no-results {
    padding: 40px var(--mapl-space-lg);
    text-align: center;
    color: var(--mapl-text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mapl-no-results svg {
    opacity: 0.25;
}

.mapl-no-results p {
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   14. MAP WRAPPER (.mapl-map-wrapper)
   ============================================================ */
.mapl-map-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--mapl-bg); /* fond neutre charte pendant le chargement des tuiles */
    display: flex;
    flex-direction: column;
}

.mapl-map-canvas {
    width: 100%;
    flex: 1;
}

/* ============================================================
   14b. ENTITY FILTER PILLS (.mapl-entity-pills)
   Floating bar above the map canvas with colored toggle pills.
   Single line, full width, no wrapping.
   ============================================================ */
/* Section englobante : le hint + les pastilles en colonne, flottants au-dessus de la carte */
.mapl-entity-section {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.mapl-entity-section > * {
    pointer-events: auto;
}

/* Phrase d'aide guidant l'utilisateur à filtrer */
.mapl-entity-hint {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mapl-text-secondary);
    font-family: var(--mapl-font);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    border-radius: 999px;
    box-shadow: var(--mapl-shadow-sm);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    user-select: none;
}

.mapl-entity-hint > span {
    white-space: normal;
}

.mapl-entity-hint svg {
    color: var(--mapl-accent);
    flex-shrink: 0;
}


.mapl-entity-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 2px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    /* `safe center` : centre quand les pastilles tiennent, s'aligne à gauche
       et devient scrollable quand elles débordent — évite que le bord du
       premier/dernier badge soit rogné par le centrage. */
    justify-content: safe center;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mapl-entity-pills::-webkit-scrollbar {
    display: none;
}

.mapl-entity-pills .mapl-entity-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 2px solid var(--pill-color) !important;
    /* !important contre les thèmes : la valeur réglable passe par la variable. */
    border-radius: var(--mapl-pill-radius, 20px) !important;
    background: var(--pill-color) !important;
    color: #fff !important;
    font-family: var(--mapl-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background var(--mapl-transition), color var(--mapl-transition), border-color var(--mapl-transition), box-shadow var(--mapl-transition), opacity var(--mapl-transition);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    margin: 0;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
}

.mapl-entity-pill-dot {
    display: none;
}

/* Active hover: subtle glow */
.mapl-entity-pills .mapl-entity-pill:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    opacity: 0.92;
}

.mapl-entity-pills .mapl-entity-pill:active {
    opacity: 0.85;
}

/* Inactive state: outline only */
.mapl-entity-pills .mapl-entity-pill.inactive {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--pill-color) !important;
    border-color: var(--pill-color) !important;
    opacity: 0.55;
}

.mapl-entity-pills .mapl-entity-pill.inactive:hover {
    opacity: 0.85;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) !important;
}

/* « Tout afficher » : dans la phrase guide, donc toujours visible même
   quand la rangée de pastilles défile. Affiché seulement quand une entité
   est isolée. Blindé contre le style des `button` du thème. */
.mapl-entity-hint .mapl-entity-reset {
    display: inline;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--mapl-accent) !important;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
    box-shadow: none !important;
    cursor: pointer;
}

.mapl-entity-hint .mapl-entity-reset::before,
.mapl-entity-hint .mapl-entity-reset::after {
    content: none !important;
}

.mapl-entity-hint .mapl-entity-reset:hover {
    color: var(--mapl-accent-dark) !important;
}

.mapl-entity-hint .mapl-entity-reset[hidden] {
    display: none !important;
}

.mapl-entity-pills .mapl-entity-pill:focus-visible,
.mapl-entity-hint .mapl-entity-reset:focus-visible {
    outline: 2px solid var(--mapl-accent) !important;
    outline-offset: 2px;
}

/* ============================================================
   15. MOBILE TOOLBAR (.mapl-mobile-toolbar)
   Hidden on desktop. Flex column on mobile.
   ============================================================ */
.mapl-mobile-toolbar {
    display: none;
    flex-direction: column;
    padding: 10px 12px;
    gap: 8px;
    background: var(--mapl-surface);
    border-bottom: 1px solid var(--mapl-border);
    flex-shrink: 0;
    z-index: 20;
}

/* Search row inside mobile toolbar */
.mapl-mobile-toolbar .mapl-search-row {
    gap: 6px;
}

/* Filter dropdown inside mobile toolbar */
.mapl-mobile-toolbar .mapl-filter-select {
    margin-top: 0;
}

/* ============================================================
   16. MARKERS (.mapl-marker-icon, .mapl-marker)
   SVG pin markers with icons.
   ============================================================ */
.mapl-marker-icon {
    background: none;
    border: none;
}

.mapl-marker {
    width: 40px;
    height: 52px;
    position: relative;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
    will-change: transform, filter;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
    transform-origin: bottom center;
    animation: marker-bounce-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Hover on marker */
.mapl-marker:hover {
    transform: translateY(-5px) scale(1.2);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

/* Pulsing pin (hover from sidebar) */

.mapl-marker svg.mapl-pin-svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   17. CLUSTERS (.mapl-cluster)
   White bg, colored border, rounded, modern design.
   ============================================================ */
.mapl-cluster-icon {
    background: none;
    border: none;
}

.mapl-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    color: var(--mapl-cluster-text);
    background: var(--mapl-cluster-bg);
    position: relative;
    transition: transform 0.15s ease;
    will-change: transform;
    cursor: pointer;
}

.mapl-cluster:hover {
    transform: scale(1.1);
}

/* Pulse ring on ::before */
.mapl-cluster::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--mapl-cluster-bg);
    opacity: 0.35;
    animation: cluster-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.mapl-cluster::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: var(--mapl-cluster-bg);
    opacity: 0.15;
    animation: cluster-pulse 2.8s ease-in-out infinite 0.4s;
    pointer-events: none;
    z-index: -2;
}

/* Small cluster: 40px */
.mapl-cluster-small {
    width: 40px;
    height: 40px;
    font-size: 13px;
    background: var(--mapl-cluster-bg);
    border: 3px solid var(--mapl-cluster-border);
    box-shadow: var(--mapl-shadow-md);
}

/* Medium cluster: 48px */
.mapl-cluster-medium {
    width: 48px;
    height: 48px;
    font-size: 15px;
    background: var(--mapl-cluster-bg);
    border: 3px solid var(--mapl-cluster-border);
    box-shadow: var(--mapl-shadow-md);
}

/* Large cluster: 56px */
.mapl-cluster-large {
    width: 56px;
    height: 56px;
    font-size: 18px;
    background: var(--mapl-cluster-bg);
    border: 3px solid var(--mapl-cluster-border);
    box-shadow: var(--mapl-shadow-lg);
}

/* Constellation de pastilles colorées par entité (remplace le chiffre).
   Une pastille par établissement enfant (plafonnée), + indicateur "+N". */
.mapl-cluster-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 78%;
    line-height: 1;
}

.mapl-cluster-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Anneau blanc discret pour le contraste quelle que soit la couleur. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.mapl-cluster-more {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: var(--mapl-cluster-text);
    margin-left: 1px;
}

/* Taille des pastilles ajustée à la taille de la bulle. */
.mapl-cluster-small  .mapl-cluster-dot { width: 6px; height: 6px; }
.mapl-cluster-medium .mapl-cluster-dot { width: 7px; height: 7px; }
.mapl-cluster-large  .mapl-cluster-dot { width: 8px; height: 8px; }

/* ============================================================
   18. POPUP (.mapl-popup)
   Leaflet popup override with type badge, title, address, link.
   ============================================================ */
.mapl-popup .leaflet-popup-content-wrapper {
    border-radius: var(--mapl-radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--mapl-shadow-lg);
    border: none;
}

.mapl-popup .leaflet-popup-content {
    margin: 0;
    min-width: 280px;
    max-width: 360px;
}

.mapl-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.mapl-popup .leaflet-popup-tip {
    box-shadow: var(--mapl-shadow-sm);
}

.mapl-popup-content {
    font-family: var(--mapl-font);
}

/* Popup image */
.mapl-popup-image {
    width: 100%;
    height: 130px;
    overflow: hidden;
}

.mapl-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder image (etablissement sans aucune photo) */
.mapl-popup-image--placeholder {
    background: var(--mapl-border-light, #F1F5F9);
}

.mapl-popup-image--placeholder img {
    object-fit: cover;
    opacity: 0.9;
}

/* Popup body */
.mapl-popup-body {
    padding: 14px 16px 0;
}

/* Popup badges row (entite + type) */
.mapl-popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.mapl-popup-entity-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mapl-popup-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Popup title */
.mapl-popup-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mapl-text);
    line-height: 1.3;
}

/* Popup description (full, no truncation) */
.mapl-popup-desc {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--mapl-text-secondary);
    line-height: 1.5;
}

/* Popup nombre/public */
.mapl-popup-nombre {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--mapl-text);
    line-height: 1.4;
    background: var(--mapl-bg);
    padding: 6px 10px;
    border-radius: var(--mapl-radius-sm);
}

/* Popup info block */
.mapl-popup-info {
    display: flex;
    flex-direction: column;
    gap: var(--mapl-space-sm);
    margin-bottom: var(--mapl-space-md);
}

.mapl-popup-address,
.mapl-popup-phone,
.mapl-popup-email,
.mapl-popup-services,
.mapl-popup-hours,
.mapl-popup-access,
.mapl-popup-website,
.mapl-popup-distance {
    margin: 0;
    font-size: 12px;
    color: var(--mapl-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.4;
}

.mapl-popup-email a,
.mapl-popup-website a,
.mapl-popup-services span,
.mapl-popup-hours span,
.mapl-popup-access span {
    color: var(--mapl-text-secondary);
    text-decoration: none;
}
.mapl-popup-email a:hover,
.mapl-popup-website a:hover { text-decoration: underline; }

/* Les horaires sont saisis en texte libre sur plusieurs lignes. */
.mapl-popup-hours span { white-space: pre-line; }

.mapl-popup-address svg,
.mapl-popup-phone svg,
.mapl-popup-hours svg,
.mapl-popup-access svg,
.mapl-popup-website svg,
.mapl-popup-distance svg {
    color: var(--mapl-text-muted);
    flex-shrink: 0;
    margin-top: 1px;
}

.mapl-popup-phone a {
    color: var(--mapl-accent);
    text-decoration: none;
    font-weight: 500;
}

.mapl-popup-phone a:hover {
    text-decoration: underline;
}

.mapl-popup-distance {
    color: var(--mapl-accent);
    font-weight: 600;
}

/* ============================================================
   19. FULLSCREEN BUTTON (.mapl-fullscreen-btn)
   ============================================================ */
.mapl-fullscreen-btn {
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 1000;
    width: 36px;
    height: 36px;
    background: var(--mapl-surface);
    border: 1px solid var(--mapl-border);
    border-radius: var(--mapl-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mapl-text);
    transition: background var(--mapl-transition), box-shadow var(--mapl-transition), transform var(--mapl-transition);
    box-shadow: var(--mapl-shadow-sm);
}

.mapl-fullscreen-btn:hover {
    background: var(--mapl-bg);
    box-shadow: var(--mapl-shadow);
    transform: scale(1.06);
}

.mapl-fullscreen-btn .icon-exit { display: none; }
.mapl-map-container.mapl-fullscreen .mapl-fullscreen-btn .icon-enter { display: none; }
.mapl-map-container.mapl-fullscreen .mapl-fullscreen-btn .icon-exit  { display: block; }

/* ============================================================
   20. SIDEBAR TOGGLE BUTTON (mobile)
   ============================================================ */
.mapl-sidebar-toggle {
    display: none;
    position: absolute;
    bottom: 100px;
    right: 10px;
    z-index: 1000;
    padding: 9px 16px;
    background: var(--mapl-primary);
    color: white;
    border: none;
    border-radius: var(--mapl-radius-xl);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--mapl-shadow-md);
    align-items: center;
    gap: var(--mapl-space-sm);
    transition: background var(--mapl-transition), transform var(--mapl-transition);
    letter-spacing: 0.02em;
    font-family: var(--mapl-font);
}

.mapl-sidebar-toggle:hover {
    background: var(--mapl-primary-dark);
    transform: translateY(-1px);
}

/* ============================================================
   21. DRAWER HANDLE (mobile bottom sheet)
   ============================================================ */
.mapl-drawer-handle {
    display: none;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--mapl-surface);
    border-radius: var(--mapl-radius-xl) var(--mapl-radius-xl) 0 0;
}

.mapl-drawer-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    background: var(--mapl-border);
    border-radius: 2px;
    transition: background var(--mapl-transition);
}

.mapl-drawer-handle:hover::before {
    background: var(--mapl-text-muted);
}

/* ============================================================
   22. LOADING OVERLAY (.mapl-map-loading)
   ============================================================ */
.mapl-map-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mapl-map-loading span {
    font-size: 13px;
    color: var(--mapl-text-secondary);
    font-weight: 500;
}

.mapl-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--mapl-border-light);
    border-top-color: var(--mapl-primary);
    border-radius: 50%;
    animation: mapl-spin 0.75s linear infinite;
}

/* ============================================================
   23. USER LOCATION MARKER (.mapl-user-marker)
   ============================================================ */
.mapl-user-marker-icon {
    background: none;
    border: none;
}

.mapl-user-marker {
    width: 16px;
    height: 16px;
    background: var(--mapl-accent);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.5);
    animation: mapl-pulse 2s ease-in-out infinite;
}

/* ============================================================
   25. ADMIN MARKER (used in admin backend)
   ============================================================ */
.mapl-admin-marker {
    width: 24px;
    height: 24px;
    background: var(--mapl-primary);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   26. LEAFLET OVERRIDES
   Zoom controls, attribution bar.
   ============================================================ */
.mapl-map-container .leaflet-control-zoom {
    border: none;
    box-shadow: var(--mapl-shadow);
    border-radius: var(--mapl-radius);
    overflow: hidden;
    margin-right: 10px;
}

.mapl-map-container .leaflet-control-zoom a {
    border-bottom: 1px solid var(--mapl-border-light);
    color: var(--mapl-text);
    font-size: 16px;
    line-height: 32px;
    width: 32px;
    height: 32px;
    display: block;
    text-align: center;
    transition: background var(--mapl-transition);
    background: var(--mapl-surface);
}

.mapl-map-container .leaflet-control-zoom a:hover {
    background: var(--mapl-bg);
}

.mapl-map-container .leaflet-control-zoom a:last-child {
    border-bottom: none;
}

/* Attribution: small, blurred bg */
.mapl-map-container .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--mapl-radius-sm) 0 0 0;
    padding: 2px 6px;
    color: var(--mapl-text-muted);
}

.mapl-map-container .leaflet-control-attribution a {
    color: var(--mapl-text-secondary);
}

/* Remove default leaflet borders on tile pane */
.mapl-map-container .leaflet-tile-pane {
    filter: none;
}

/* Ensure popup close button is accessible */
.mapl-popup .leaflet-popup-close-button {
    z-index: 10;
    font-size: 18px;
    color: var(--mapl-text-muted);
    padding: 6px 8px 0 0;
    transition: color var(--mapl-transition);
}

.mapl-popup .leaflet-popup-close-button:hover {
    color: var(--mapl-text);
}

/* ============================================================
   27. ACCESSIBILITY - Focus visible
   ============================================================ */
.mapl-map-container :focus-visible {
    outline: 2px solid var(--mapl-accent);
    outline-offset: 2px;
}

.mapl-map-container button:focus-visible {
    outline: 2px solid var(--mapl-accent);
    outline-offset: 2px;
}

/* Champs de saisie : pas d'anneau orange. Les navigateurs appliquent
   :focus-visible aux champs texte et aux listes même au clic souris, d'où
   une bordure orange qui restait tant que le champ gardait le focus. Le
   focus y est signalé par la bordure bleue + anneau léger de :focus, visible
   aussi au clavier. */
.mapl-map-container input:focus-visible,
.mapl-map-container select:focus-visible,
.mapl-map-container textarea:focus-visible {
    outline: none;
}

/* ============================================================
   28. ANIMATIONS (@keyframes)
   ============================================================ */

/* Fade in (results list, cards) */
@keyframes mapl-fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner rotation */
@keyframes mapl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* User marker pulse */
@keyframes mapl-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
}

/* Marker bounce-in (scale 0 -> 1.15 -> 1) */
@keyframes marker-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.15) translateY(-4px);
    }
    70% {
        transform: scale(0.96) translateY(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Cluster pulse ring */
@keyframes cluster-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.22;
    }
    50% {
        transform: scale(1.18);
        opacity: 0.08;
    }
}

/* ============================================================
   29. RESPONSIVE - Tablet (769px - 1024px)
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .mapl-map-container {
        height: 600px;
    }

    .mapl-map-sidebar {
        width: 320px;
    }

    .mapl-sidebar-title {
        font-size: 18px;
    }

    .mapl-place-card {
        padding: 12px 14px;
    }

}

/* ============================================================
   30. RESPONSIVE - MOBILE (max-width: 768px)
   Toolbar above map, sidebar hidden, bottom sheet.
   ============================================================ */
@media (max-width: 768px) {
    /* Container becomes column */
    .mapl-map-container {
        flex-direction: column;
        height: 85vh;
        position: relative;
        border-radius: var(--mapl-radius);
    }

    /* Sidebar hidden by default on mobile */
    .mapl-map-sidebar {
        display: none;
    }

    /* But if sidebar is shown as bottom sheet, restore it */
    .mapl-map-sidebar.mapl-drawer-open {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--mapl-border);
        box-shadow: var(--mapl-shadow-lg);
        z-index: 500;
        border-radius: var(--mapl-radius-xl) var(--mapl-radius-xl) 0 0;
        height: 55%;
        transform: translateY(0);
    }

    /* Mobile toolbar visible, au-dessus de la carte (calques Leaflet à 400)
       et des pastilles : ses suggestions de recherche (position fixed)
       restent dans son contexte d'empilement et passaient sous la carte.
       Sous le tiroir (500). */
    .mapl-mobile-toolbar {
        display: flex;
        position: relative;
        z-index: 450;
    }

    /* Map takes full remaining height */
    .mapl-map-wrapper {
        height: 100%;
    }

    /* Drawer handle shown */
    .mapl-drawer-handle {
        display: flex;
        border-radius: var(--mapl-radius-xl) var(--mapl-radius-xl) 0 0;
    }

    /* Sidebar toggle button shown */
    .mapl-sidebar-toggle {
        display: flex;
    }

    /* Fullscreen button adjustment */
    .mapl-fullscreen-btn {
        bottom: 60px;
    }

    .mapl-sidebar-title {
        font-size: 17px;
    }

    .mapl-sidebar-subtitle {
        font-size: 12px;
    }

    /* Popup responsive */
    .mapl-popup .leaflet-popup-content {
        min-width: 220px;
        max-width: 280px;
    }

    /* Etab cards smaller on mobile */
    .mapl-place-card {
        padding: 12px;
        gap: 10px;
    }

    .mapl-place-icon {
        width: 36px;
        height: 36px;
    }

    .mapl-place-name {
        font-size: 13px;
    }

    /* La barre mobile (recherche + types) occupe le haut du wrapper : la
       section repasse dans le flux, juste sous elle, avec une hauteur nulle.
       Ses pastilles débordent sur la carte sans jamais recouvrir la barre,
       quelle que soit sa hauteur. */
    .mapl-entity-section {
        position: relative;
        top: 8px;       /* décalage visuel, sans pousser la carte */
        left: auto;
        right: auto;
        flex: 0 0 0;
        height: 0;
        margin: 0 8px;
        overflow: visible;
        gap: 3px;
        z-index: 440;   /* au-dessus de la carte, sous la barre mobile */
    }

    /* Hauteur nulle : sans cela, la rangée de pastilles (défilante) serait
       écrasée par la colonne flex. */
    .mapl-entity-section > * {
        flex-shrink: 0;
    }

    .mapl-entity-pills {
        padding: 0;
        gap: 4px;
    }

    .mapl-entity-pill {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ============================================================
   31. RESPONSIVE - Small mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .mapl-sidebar-header {
        padding: var(--mapl-space-sm) var(--mapl-space-sm) var(--mapl-space-xs);
    }

    .mapl-place-card {
        padding: 10px var(--mapl-space-sm);
        gap: 8px;
    }

    .mapl-place-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--mapl-radius-sm);
    }

    .mapl-mobile-toolbar {
        padding: 8px 10px;
        gap: 6px;
    }

    .mapl-mobile-toolbar .mapl-search-input {
        padding: 8px 10px;
        font-size: 12px;
    }

    .mapl-mobile-toolbar .mapl-filter-select {
        padding: 8px 10px;
        font-size: 12px;
    }

    .mapl-entity-section {
        top: 6px;
        margin: 0 6px;
        gap: 2px;
    }

    .mapl-entity-pills {
        padding: 0;
        gap: 3px;
        border-radius: 20px;
    }

    .mapl-entity-pill {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* ============================================================
   32. PRINT STYLES
   ============================================================ */
@media print {
    .mapl-map-sidebar {
        display: none;
    }

    .mapl-mobile-toolbar {
        display: none;
    }

    .mapl-sidebar-toggle,
    .mapl-fullscreen-btn {
        display: none;
    }

    .mapl-map-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .mapl-map-loading {
        display: none;
    }
}

/* ============================================================
   33. ELEMENTOR INTEGRATION OVERRIDES
   Allow Elementor widget selectors to override CSS variables.
   These selectors have higher specificity when Elementor
   injects inline styles or wrapper classes.
   ============================================================ */

/* Ensure Elementor section/column padding does not clip the map */
.elementor-widget-mapped_places_map .elementor-widget-container {
    overflow: visible;
}

/* ============================================================
   35. SCROLLBAR STYLES (global for sidebar content)
   ============================================================ */
.mapl-map-sidebar *::-webkit-scrollbar {
    width: 4px;
}

.mapl-map-sidebar *::-webkit-scrollbar-track {
    background: transparent;
}

.mapl-map-sidebar *::-webkit-scrollbar-thumb {
    background: var(--mapl-border);
    border-radius: 2px;
}

.mapl-map-sidebar * {
    scrollbar-width: thin;
    scrollbar-color: var(--mapl-border) transparent;
}

/* ============================================================
   37. TRANSITION HELPERS
   Smooth transitions for dynamic state changes triggered by JS.
   ============================================================ */
/* Transitions et will-change : déclarés avec la règle de base de chaque
   composant (.mapl-map-sidebar, .mapl-place-card, .mapl-marker, .mapl-cluster). */

/* ================================================================ */
/*  TOAST NOTIFICATION                                               */
/* ================================================================ */

.mapl-toast {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}

.mapl-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   DIRECTEUR (v2.5)
   ============================================================ */

.mapl-popup-manager {
    margin: 8px 0;
    font-size: 13px;
    color: #475569;
}

.mapl-place-manager {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    font-style: italic;
}

/* ============================================================
   AUTOCOMPLETE (v2.5)
   ============================================================ */

.mapl-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 360px;
    overflow-y: auto;
}

.mapl-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.mapl-autocomplete-item:last-child {
    border-bottom: none;
}

.mapl-autocomplete-item:hover,
.mapl-autocomplete-item.is-highlighted {
    background: #f8fafc;
}

.mapl-ac-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mapl-text);
    margin-bottom: 2px;
}

.mapl-ac-meta {
    font-size: 11px;
    color: #64748b;
}

.mapl-autocomplete-item mark {
    background: rgba(193, 142, 216, 0.45);
    color: #1e293b;
    /* Pas de padding : sur un élément en ligne, il écarte les lettres du mot
       (« Libr ary »). L'ombre élargit le fond sans déplacer le texte. */
    padding: 0;
    box-shadow: 0 0 0 1px rgba(193, 142, 216, 0.45);
    border-radius: 2px;
    font-weight: 600;
}

.mapl-autocomplete-empty {
    padding: 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
}


/* ============================================================
   CARROUSEL (v2.6)
   ============================================================ */

.mapl-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #f1f5f9;
}

.mapl-carousel:focus-visible {
    outline: 2px solid var(--mapl-accent);
    outline-offset: 2px;
}

.mapl-carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.mapl-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 200px;
}

.mapl-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Les themes WordPress stylent agressivement les `button` du contenu
   (bordure, fond, padding, taille mini). Sans ce blindage, les fleches et
   les puces du carrousel heritaient d'un cadre rose et d'un rectangle qui
   les rendaient illisibles. Chaque propriete reprise ici est une propriete
   que le theme peut ecraser. */
.mapl-carousel .mapl-carousel-prev,
.mapl-carousel .mapl-carousel-next,
.mapl-carousel .mapl-carousel-dot {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
    text-shadow: none !important;
    font: inherit;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    cursor: pointer !important;
    z-index: 10;
}

.mapl-carousel .mapl-carousel-prev::before,
.mapl-carousel .mapl-carousel-prev::after,
.mapl-carousel .mapl-carousel-next::before,
.mapl-carousel .mapl-carousel-next::after,
.mapl-carousel .mapl-carousel-dot::before,
.mapl-carousel .mapl-carousel-dot::after {
    content: none !important;
}

.mapl-carousel .mapl-carousel-prev,
.mapl-carousel .mapl-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Voile sombre : verifie sur photo surexposee, en dessous de cette
       opacite le chevron blanc se perd sur un fond clair. */
    background: rgba(15, 23, 42, 0.55) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
}

.mapl-carousel .mapl-carousel-prev:hover,
.mapl-carousel .mapl-carousel-next:hover {
    background: rgba(15, 23, 42, 0.78) !important;
}

.mapl-carousel .mapl-carousel-prev:focus-visible,
.mapl-carousel .mapl-carousel-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.mapl-carousel .mapl-carousel-prev { left: 10px; }
.mapl-carousel .mapl-carousel-next { right: 10px; }

.mapl-carousel .mapl-carousel-prev svg,
.mapl-carousel .mapl-carousel-next svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.mapl-carousel-counter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
}

.mapl-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    align-items: center;
    z-index: 10;
}

.mapl-carousel .mapl-carousel-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    /* Le lisere sombre garde les puces visibles sur une photo claire,
       ou le blanc translucide seul disparaitrait. */
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    transition: background 0.2s, width 0.2s;
}

/* La puce active s'allonge : la position dans la galerie reste lisible
   meme pour un oeil qui ne distingue pas bien les nuances de blanc. */
.mapl-carousel .mapl-carousel-dot.is-active {
    width: 22px !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.mapl-carousel .mapl-carousel-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.mapl-popup-image-placeholder {
    height: 200px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: mapl-shimmer 1.5s infinite linear;
}

@keyframes mapl-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Petits écrans (<= 640px) : un seul bloc, placé après les règles de base
   de chaque composant qu'il ajuste (pastilles, autocomplétion, carrousel). */
@media (max-width: 640px) {
    .mapl-entity-hint {
        font-size: 10.5px;
        padding: 3px 8px;
    }

    .mapl-mobile-toolbar .mapl-autocomplete-results {
        position: fixed;
        top: auto;
        bottom: 60px;
        left: 10px;
        right: 10px;
        max-height: 50vh;
    }

    .mapl-carousel-slide { height: 180px; }

    /* Meme specificite et meme !important que la regle de base, sinon la
       taille mobile serait ecrasee par celle du bureau. */
    .mapl-carousel .mapl-carousel-prev,
    .mapl-carousel .mapl-carousel-next {
        width: 32px !important;
        height: 32px !important;
    }

    .mapl-carousel .mapl-carousel-prev svg,
    .mapl-carousel .mapl-carousel-next svg {
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapl-carousel-track { transition: none; }
    .mapl-popup-image-placeholder { animation: none; }
}

/* ============================================================
   TITLES — --mapl-font-title, bold.
   ============================================================ */
.mapl-sidebar-title,
.mapl-place-name,
.mapl-popup-title {
    font-family: var(--mapl-font-title);
    font-weight: 700;
}