html, body { margin: 0; }
.map-page { position: fixed; inset: 0; }
.map-page__canvas {
    position: absolute;
    inset: 0;
    width: 100%;   /* ← ajout */
    height: 100%;  /* ← ajout */
}

.map-filters {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    max-height: calc(100% - 24px);
    overflow: auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    font: 13px/1.4 system-ui, sans-serif;
}
.map-filters__group { border: 0; margin: 0 0 8px; padding: 0; }
.map-filters__group legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.map-filters__item { display: flex; align-items: center; gap: 6px; padding: 1px 0; cursor: pointer; }
.map-filters__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-filters select { width: 100%; }

/* mobile first */

.map-fab {
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: #2563eb; color: #fff; font-size: 28px; line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3); cursor: pointer;
}
.poi-form {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; flex-direction: column; gap: 12px;
    background: #fff; border-radius: 16px 16px 0 0; padding: 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
    font: 16px/1.4 system-ui, sans-serif;   /* 16px = pas de zoom auto iOS au focus */
    max-height: 80%; overflow: auto;
}
.poi-form h2 { margin: 0; font-size: 18px; }
.poi-form label { display: flex; flex-direction: column; gap: 4px; }
.poi-form input, .poi-form select, .poi-form textarea {
    font: inherit; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px;
}
.poi-form__loc { margin: 0; color: #475569; font-size: 14px; }
.poi-form__actions { display: flex; gap: 10px; }
.poi-form__actions button {
    flex: 1; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1;
    background: #f1f5f9; font: inherit; cursor: pointer;
}
.poi-form__actions button[type="submit"] { background: #2563eb; color: #fff; border-color: #2563eb; }

@media (min-width: 640px) {
    .poi-form { left: auto; right: 16px; bottom: 16px; width: 360px; border-radius: 14px; }
}

.poi-form__header { display: flex; align-items: center; justify-content: space-between; }
.poi-form__toggle {
    border: 0; background: none; font-size: 22px; line-height: 1;
    padding: 4px 8px; color: #475569; cursor: pointer;
}
.poi-form__body { display: flex; flex-direction: column; gap: 12px; }

.poi-form[hidden],
.poi-form__body[hidden] { display: none; }

.map-filters-toggle {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 8px 12px; border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    font: 14px/1 system-ui, sans-serif; cursor: pointer;
}
.map-filters {
    position: absolute; top: 52px; left: 12px; z-index: 1;  /* sous le bouton */
    max-height: calc(100% - 64px); overflow: auto;
    background: rgba(255, 255, 255, .95); border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    font: 13px/1.4 system-ui, sans-serif;
}
.map-filters[hidden] { display: none; }

.map-city-select {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 1;
}
.map-city-select select {
    font-size: 16px; /* ≥16px : évite le zoom auto iOS au focus */
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* recherche*/
.map-search {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%); /* recentré quel que soit l'état */
    z-index: 2;
}

/* état replié : bouton loupe rond */
.map-search__open {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    font-size: 18px;
    cursor: pointer;
}

/* état déplié : la barre */
.map-search__panel {
    width: min(360px, calc(100vw - 24px));
}
.map-search__panel form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.map-search__panel input {
    flex: 1;
    border: 0;
    padding: 8px 10px;
    font-size: 16px; /* ≥16px : pas de zoom iOS */
}
.map-search__close {
    border: 0;
    background: #fff;
    padding: 0 12px;
    font-size: 16px;
    color: #6b7280;
    cursor: pointer;
}

.map-search__results {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    max-height: 240px;
    overflow-y: auto;
}
.map-search__result,
.map-search__hint {
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}
.map-search__result { cursor: pointer; }
.map-search__result:hover { background: #f3f4f6; }
.map-search__hint { color: #6b7280; }

/* indispensable : sinon une règle display: peut écraser l'attribut hidden */
.map-search__open[hidden],
.map-search__panel[hidden] { display: none; }