/* ==========================================================================
   APSH34 - Design Système Fidèle (Locator & Carte)
   ========================================================================== */

.apsh-layout-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 15px 60px 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
    color: #1e293b;
    box-sizing: border-box;
}

.apsh-layout-wrap * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. BOX DE RECHERCHE SUPÉRIEURE
   -------------------------------------------------------------------------- */
.apsh-search-box {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 16px;
    padding: 30px 32px;
    margin-bottom: 35px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.apsh-search-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0 0 6px 0;
}

.apsh-search-subtitle {
    font-size: 20px;
    color: #5C6066;
    margin: 0 0 22px 0;
}

.apsh-form-grid {
    display: flex;
    align-items: flex-end;
	justify-content:space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.apsh-field-col {
    flex: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apsh-field-col label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.apsh-field-col input,
.apsh-field-col select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 13.5px;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.apsh-field-col input:focus,
.apsh-field-col select:focus {
    border-color: #007bb6;
    box-shadow: 0 0 0 3px rgba(0, 123, 182, 0.15);
}

.apsh-field-col select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.apsh-btn-col {
    flex: 0 0 auto;
}

.apsh-btn-primary {
    height: 44px;
    padding: 0 22px;
    background-color: #007bb6;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.apsh-btn-primary:hover {
    background-color: #006699;
}

.apsh-btn-primary svg {
    transition: transform 0.2s ease;
}

.apsh-btn-primary:hover svg {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   2. GRILLE RÉSULTATS & CARTE
   -------------------------------------------------------------------------- */
.apsh-content-grid {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.apsh-list-col {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
}

.apsh-map-col {
    flex: 1 1 50%;
    position: sticky;
    top: 25px;
}

.apsh-results-counter {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   3. CARTES ÉTABLISSEMENTS (Liste de gauche)
   -------------------------------------------------------------------------- */
.apsh-card {
    background: #FBFBFB;
    border: 1px solid #E9EFF7;
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 18px;
}

.apsh-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.apsh-pill {
    display: inline-block;
    background-color: #BDCFE5;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.apsh-card-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.apsh-card-title a {
    color: #2b5689;
    text-decoration: none;
    transition: color 0.2s;
}

.apsh-card-title a:hover {
    color: #007bb6;
}

.apsh-card-desc {
    font-size: 20px;
    color: #5C6066;
    line-height: 1.5;
    margin: 0 0 18px 0;
}

.apsh-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #007AB8;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 18px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.apsh-btn-action:hover {
    background-color: #006699;
}

.apsh-btn-action .apsh-arrow {
    transition: transform 0.2s ease;
}

.apsh-btn-action:hover .apsh-arrow {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. CARTE LEAFLET & POPUP
   -------------------------------------------------------------------------- */
.apsh-map-container {
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #dce4ec;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

#centre-map {
    width: 100% !important;
    height: 100% !important;
    background: #f1f5f9;
}

/* Boutons de commande en haut à droite de la carte */
.apsh-map-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apsh-map-ctrl-btn {
    width: 32px;
    height: 32px;
    background:transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #A7187C;
}

.apsh-map-ctrl-btn:hover {
    background: #fdf2f8;
}

/* Popups Leaflet stylisées comme les cartes de gauche */
.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
}

.leaflet-popup-content {
    margin: 0;
    line-height: normal;
}

.apsh-popup-content {
    padding: 20px 22px;
    max-width: 310px;
}

.apsh-popup-content .apsh-card-title {
    font-size: 17px;
}

.apsh-popup-content .apsh-card-desc {
    font-size: 13px;
    margin-bottom: 14px;
}

/* Croix de fermeture rose / magenta */
.leaflet-container a.leaflet-popup-close-button {
    top: 12px;
    right: 12px;
    color: #9d1b64 !important;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    background: #fdf2f8;
}

/* Modif CSS */

/* --------------------------------------------------------------------------
   STYLE DE CARTE GRIS & BLANC DE LA MAQUETTE
   -------------------------------------------------------------------------- */
#centre-map .leaflet-tile-pane {
    /* Transforme les tuiles standard en fond gris élégant identique à la maquette */
    filter: grayscale(100%) contrast(108%) brightness(105%) opacity(0.92);
}

/* --------------------------------------------------------------------------
   STYLES DES PINS (INDIVIDUELS & GROUPÉS AVEC NOMBRE)
   -------------------------------------------------------------------------- */
.custom-div-icon,
.custom-cluster-icon {
    background: transparent !important;
    border: none !important;
}

/* Pin avec le nombre d'établissements */
.apsh-cluster-pin {
    position: relative;
    width: 36px;
    height: 46px;
    cursor: pointer;
    transition: transform 0.15s ease-out;
}

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

.apsh-cluster-pin svg {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

.apsh-cluster-number {
    position: absolute;
    top: 5px;
    left: 0;
    width: 36px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    pointer-events: none;
}

/* Pin individuel */
.apsh-marker-pin {
    cursor: pointer;
    transition: transform 0.15s ease-out;
}

.apsh-marker-pin:hover {
    transform: scale(1.1);
}

.apsh-marker-pin svg {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* Masque les cercles jaunes/oranges par défaut de MarkerCluster */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: transparent !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: transparent !important;
}

/* Fin Modif CSS */


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .apsh-content-grid {
        flex-direction: column-reverse;
    }
    
    .apsh-list-col,
    .apsh-map-col {
        flex: 1 1 100%;
        width: 100%;
    }

    .apsh-map-col {
        position: relative;
        top: 0;
    }

    .apsh-map-container {
        height: 400px;
    }

    .apsh-form-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .apsh-btn-primary {
        width: 100%;
        justify-content: center;
    }
}
/* --------------------------------------------------------------------------
   6. LIST REFINEMENTS (2026-09-24): site colours, "Localiser" and "Afficher plus"
   -------------------------------------------------------------------------- */
.apsh-card[hidden] { display: none; }
.apsh-card-title a { color: #304495; }
.apsh-card-desc { font-size: 17px; }
.apsh-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.apsh-btn-action { border-radius: 10px; }
.apsh-btn-locate {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none;
    color: #0f172a; font: 600 15px/1.2 Inter, sans-serif; cursor: pointer;
}
.apsh-btn-locate:hover { color: #007ab8; }
.apsh-btn-more {
    display: block; margin: 8px auto 0; padding: 14px 22px; border: 1px solid #007ab8; border-radius: 10px;
    background: #fff; color: #007ab8; font: 600 16px/1 Inter, sans-serif; cursor: pointer;
}
.apsh-btn-more:hover { background: #007ab8; color: #fff; }
.apsh-btn-more[hidden] { display: none; }
.apsh-btn-locate:focus-visible, .apsh-btn-more:focus-visible, .apsh-btn-action:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }
.apsh-layout-wrap .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
    .apsh-card { padding: 20px; }
    .apsh-card-title { font-size: 20px; }
    .apsh-card-desc { font-size: 16px; }
}

/* Same width, font and search box as the directory / Actualités filters (the Elementor container gives the gutter). */
.apsh-layout-wrap { max-width: none; padding: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.apsh-search-box { border-color: #000; box-shadow: none; padding: 28px 32px; }
.apsh-results-counter { font-size: 20px; }
@media (min-width: 961px) { .apsh-map-col { top: 100px; } }
.apsh-map-container { height: 640px; }
@media (max-width: 767px) {
    .apsh-search-box { padding: 24px 20px; }
    .apsh-map-container { height: 60vh; height: 60svh; min-height: 360px; }
}
.apsh-pill--antenne { background-color: #304495; color: #fff; }

/* Full screen map: native :fullscreen, or the .is-fullscreen fallback (iPhone Safari has no Fullscreen API). */
.apsh-map-col.is-fullscreen { position: fixed !important; inset: 0; top: 0 !important; z-index: 100000; width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: #fff; }
.apsh-map-col.is-fullscreen .apsh-map-container { height: 100%; border-radius: 0; }

/* Map accessibility: "Passer la carte" link shown on focus, visible focus on the map, pins and controls. */
.apsh-skip-map { position: absolute; left: -9999px; z-index: 1001; padding: 10px 16px; border-radius: 8px; background: #304495; color: #fff; font-weight: 600; text-decoration: none; }
.apsh-skip-map:focus { left: 12px; top: 12px; }
#centre-map:focus-visible, .apsh-map-ctrl-btn:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }
#centre-map .leaflet-marker-icon:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; border-radius: 50%; }
.apsh-map-noscript { margin: 0; padding: 24px; font-size: 16px; }