/* =============================================================================================
   Page carte (carte.html, écrite par scripts/generer_carte.py) : en-tête sobre avec la
   recherche, puis la carte sur toute la hauteur restante, la liste des terrains à sa gauche
   (carte.js). Sur téléphone et tablette étroite, la carte seule, la liste s'ouvrant par-dessus
   avec « Voir la liste ».

   Chargée en dernier, après style-entete-sobre.css et style-commune.css (tuiles) : elle ne
   s'applique qu'à cette page (body.page-carte).
============================================================================================= */

body.page-carte {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
}

/* --- En-tête : logo, recherche, menu ---------------------------------------------------------- */

.carte-entete {
    flex: none;
    border-bottom: 1px solid #e2e6de;
    position: relative;
    z-index: 1100;   /* le menu des propositions passe au-dessus de la carte et de la liste */
}

.page-carte .header {
    padding: 10px 20px;
}

.page-carte .header-top-row {
    gap: 20px;
}

/* La recherche suit le logo ; le menu reste poussé à droite. */
.carte-recherche {
    flex: 1 1 auto;
    max-width: 440px;
}

/* « Me localiser », juste à droite de la recherche, dans le vert du site (#locateBtn dans
   style.css) ; le menu reste poussé à droite. */
.page-carte #locateBtn {
    flex: none;
    margin: 0 auto 0 0;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.carte-recherche .search-ligne {
    flex: 1 1 auto;
}

/* Recherche en plein écran (téléphone, voir style.css) : le formulaire passe en colonne, la
   ligne du champ ne doit plus s'étirer (elle prenait toute la hauteur), ni la largeur être
   bornée comme dans l'en-tête. */
.carte-recherche.search-form-plein-ecran {
    max-width: none;
    margin: 0;
}

.carte-recherche.search-form-plein-ecran .search-ligne {
    flex: none;
}

.carte-recherche input {
    width: 100%;
    max-width: none;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid #d6dccf;
    background: #f7f9f6;
}

.carte-recherche input:focus {
    background: #fff;
}

/* --- Corps : liste + carte -------------------------------------------------------------------- */

.carte-corps {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative;
}

.carte-liste {
    flex: none;
    width: 400px;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 16px 16px 24px;
    background: #f7f9f6;
    border-right: 1px solid #e2e6de;
}

.carte-liste-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.carte-liste-compte {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #1d2619;
}

.carte-liste-lieux {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: normal;
    color: #56604F;
}

.carte-liste-lieux:empty {
    display: none;
}

.carte-liste-tuiles {
    display: grid;
    gap: 14px;
}

.carte-liste .commune-terrain-photo img {
    height: 150px;
}

.carte-liste .commune-terrain-texte {
    gap: 6px;
    padding: 12px 14px 14px;
}

.carte-liste .commune-terrain-nom {
    font-size: 16px;
}

.carte-liste .commune-terrain-details {
    font-size: 13.5px;
}

.carte-liste .commune-pastille {
    flex: none;
    padding: 3px 9px;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Une seule ligne de pastilles : celles qui dépassent sont cachées et comptées dans « +N »
   (compacterPastilles dans carte.js). */
.carte-liste .commune-pastilles {
    flex-wrap: nowrap;
    overflow: hidden;
}

.carte-liste .commune-pastille[hidden] {
    display: none;
}

.carte-liste .pastille-plus {
    border-color: transparent;
    background: #f0f2ee;
    color: #56604F;
    font-weight: bold;
}

.carte-liste-vide {
    margin: 8px 0;
    color: #56604F;
    font-size: 14px;
    line-height: 1.5;
}

.carte-liste-plus {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 11px 16px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    background: #fff;
    color: #3d7a2a;
    font: inherit;
    font-size: 14.5px;
    font-weight: bold;
    cursor: pointer;
}

.carte-liste-plus:hover {
    border-color: #74C15A;
}

.carte-liste-plus[hidden] {
    display: none;
}

.carte-liste-signaler {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13.5px;
}

.carte-liste-signaler a {
    color: #3d7a2a;
}

/* Poignée : seulement pour la feuille du téléphone (plus bas) */
.carte-liste-poignee {
    display: none;
}

.page-carte .map-view {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
}

.page-carte .map-wrapper {
    position: relative;
    height: 100%;
}

.page-carte #map {
    height: 100%;
    min-height: 0;
}

/* --- Sur la carte : pastilles, « Me localiser », message de recherche ------------------------ */

/* Pastilles en haut de la carte, entre le zoom (à gauche) et Plan/Satellite (à droite) :
   « Sur place ▾ », « À proximité ▾ », « Clubs » (voir « Pastilles de la carte » dans script.js). */
.carte-pastilles {
    position: absolute;
    top: 10px;
    left: 56px;
    right: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    pointer-events: none;
}

.carte-pastilles > * {
    pointer-events: auto;
}

.carte-pastille {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    background: #fff;
    color: #1d2619;
    font: inherit;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.carte-pastille:hover {
    border-color: #74C15A;
}

.carte-pastille.actif {
    background: #1d2619;
    border-color: #1d2619;
    color: #fff;
}

.carte-pastille svg {
    width: 9px;
    height: 6px;
    transition: transform 0.15s ease;
}

.carte-pastille[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Point bleu des clubs, la couleur de leurs marqueurs */
.carte-pastille-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1976d2;
}

.carte-pastille.actif .carte-pastille-point {
    box-shadow: 0 0 0 2px #fff;
}

.carte-pastilles-effacer {
    height: 36px;
    padding: 0 4px;
    border: none;
    background: none;
    color: #3d7a2a;
    font: inherit;
    font-size: 13.5px;
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
    cursor: pointer;
}

.carte-pastilles-effacer[hidden] {
    display: none;
}

/* Menu d'une pastille : un seul groupe de critères, moins large ; sur téléphone, toute la largeur
   (plus bas) */
.page-carte #filtres-panneau.deroulant {
    right: auto;
    width: 360px;
}

/* Plan / Satellite : en haut à droite, une ligne sous les pastilles */
.page-carte .leaflet-top.leaflet-right {
    top: 46px;
}


.page-carte .search-error {
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.page-carte .search-error:empty {
    display: none;
}


/* Marqueur (ou amas) du terrain survolé dans la liste */
.carte-marqueur-survol {
    z-index: 10000 !important;
    filter: drop-shadow(0 0 0 #1d2619) drop-shadow(0 0 5px rgba(29, 38, 25, 0.9));
}


/* --- Tablette et téléphone : en-tête calé sur celui des autres pages ----------------------------- */
/* Mêmes marges que l'en-tête des autres pages (style.css) et une ligne de 40 px de haut (champ
   compris) : la boule du logo tombe pile sous celle du menu mobile quand il s'ouvre. */
@media (max-width: 1024px) {
    .page-carte .header {
        padding: 14px 15px 10px;
    }

    .carte-recherche input {
        height: 40px;
    }
}

/* --- Écran étroit : la liste devient une feuille qui monte du bas, comme sur Komoot ------------- */
/* Trois positions (carte.js) : aperçu (la moitié de la carte, le compteur et la première tuile),
   repliée (le compteur seul), dépliée (la liste sur toute la hauteur). carte.js pose le décalage
   (transform) et la hauteur visible de la feuille (--feuille-visible), qui remonte « Me
   localiser » et les mentions de la carte au-dessus d'elle. */
@media (max-width: 900px) {
    .carte-liste {
        position: absolute;
        inset: 0;
        z-index: 1040;
        width: auto;
        padding-top: 0;
        border-right: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        touch-action: none;
        transform: translateY(50%);
        transition: transform 0.25s ease, border-radius 0.25s ease;
    }

    .carte-liste.glisse {
        transition: none;
    }

    /* Dépliée : la liste défile, place en bas pour le bouton « Carte » */
    .carte-liste.deplie {
        overflow-y: auto;
        touch-action: pan-y;
        border-radius: 0;
    }

    .carte-liste-poignee {
        display: block;
        width: 42px;
        height: 5px;
        margin: 10px auto 8px;
        border-radius: 3px;
        background: #c9cfc4;
        cursor: grab;
    }

    .carte-liste-entete {
        justify-content: center;
        text-align: center;
        cursor: pointer;
    }

    /* Les deux lignes du compteur gardent leur place, même vides (« Répartis sur N lieux »
       n'apparaît pas toujours) : l'en-tête a toujours la même hauteur, la feuille aussi. */
    #carte-liste-compte,
    .carte-liste-lieux,
    .carte-liste-lieux:empty {
        display: block;
        min-height: 1.25em;
    }

    .carte-liste-tuiles {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    /* Les mentions de la carte (en bas à gauche) restent visibles au-dessus de la feuille. */
    .page-carte .leaflet-bottom.leaflet-left {
        bottom: var(--feuille-visible, 0px);
    }
}

@media (max-width: 600px) {
    .page-carte .header-top-row {
        gap: 10px;
    }

    .carte-recherche {
        max-width: none;
    }

    /* Pas de boutons + / − : on zoome en pinçant, comme dans les applis de carte. Les pastilles
       prennent leur place. */
    .page-carte .leaflet-control-zoom {
        display: none;
    }

    /* Pastilles sur une ligne, qu'on fait défiler du doigt si elles ne tiennent pas */
    .carte-pastilles {
        left: 10px;
        right: 10px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .carte-pastilles::-webkit-scrollbar {
        display: none;
    }

    .carte-pastille {
        flex: none;
        height: 34px;
        padding: 0 11px;
        font-size: 13.5px;
    }

    /* « Me localiser » réduit à son icône, de la hauteur du champ ; le champ rétrécit d'autant
       (il passe en plein écran dès qu'on le touche) */
    .page-carte #locateBtn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        margin: 0;
    }

    .page-carte #locateBtn .btn-icon {
        width: 20px;
        height: 20px;
    }

    .page-carte #locateBtn span {
        display: none;
    }

    /* Menu d'une pastille sur toute la largeur, sous les pastilles */
    .page-carte #filtres-panneau.deroulant {
        left: 10px !important;
        right: 10px;
        width: auto;
        max-width: none;
    }

    /* Mentions de la carte sur une ligne, coupées par « … » si elles débordent encore */
    .page-carte .leaflet-control-attribution {
        max-width: calc(100vw - 20px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }
}