/* =====================================================================================
   Les plus beaux terrains — rangée de tuiles défilantes
   Fichier ADDITIF : style.css n'est pas modifié (même convention que style-province.css
   et style-accueil-provinces.css).
   ===================================================================================== */

.beaux-terrains-carrousel { position: relative; }

.beaux-terrains-scroller {
    display: flex;
    overflow-x: auto;
    padding: 4px 0 16px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Barre de défilement masquée : sur tactile, la tuile suivante coupée au bord du cadre
       suffit à indiquer qu'on peut faire défiler ; sur desktop, ce sont les flèches. */
    scrollbar-width: none;
}
.beaux-terrains-scroller::-webkit-scrollbar { display: none; }

/* Écart géré par margin-right plutôt que par `gap` : ce dernier n'est arrivé dans Safari
   qu'en 14.1, et la marge donne exactement le même résultat partout. */
.tuile-terrain {
    flex: 0 0 300px;
    width: 300px;
    scroll-snap-align: start;
    /* Sans ceci, un flick rapide au doigt peut franchir plusieurs points d'aimantation d'un
       coup (comportement par défaut de scroll-snap-type: mandatory, qui aimante au point le
       plus proche une fois l'inertie retombée, quelle que soit la distance parcourue). Impose
       un arrêt à chaque fiche, une par une, quelle que soit la vitesse du geste. */
    scroll-snap-stop: always;
    margin-right: 16px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.tuile-terrain:last-child { margin-right: 0; }

/* ---- Flèches de défilement ----
   Réservées aux écrans larges AVEC survol réel : sur tactile (iPad, mobile), il n'y a pas de
   survol et le doigt suffit — on y garde les tuiles partiellement coupées, qui indiquent
   d'elles-mêmes qu'on peut faire défiler. */
.carrousel-fleche { display: none; }

@media (min-width: 1025px) and (hover: hover) {
    /* La largeur des tuiles (4 pleines, pile dans le cadre) est posée en JS : voir
       ajusterLargeurTuiles() dans beaux-terrains.js. Un calc() en flex-basis donne des
       résultats variables d'un moteur à l'autre. */
    .carrousel-fleche {
        position: absolute;
        /* La zone couvre la bande photo uniquement (le bas correspond au bloc de texte plus le
           padding bas du scroller) et le bouton s'y centre : reste juste quelle que soit la
           largeur des tuiles. */
        top: 4px;
        bottom: 86px;
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 0;
        margin: 0;
        background: none;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 3;
    }
    .carrousel-fleche.prev { left: -14px; }
    .carrousel-fleche.next { right: -14px; }

    .beaux-terrains-carrousel:hover .carrousel-fleche,
    .carrousel-fleche:focus-visible { opacity: 1; }

    /* Masquée quand il n'y a plus rien à faire défiler de ce côté. */
    .carrousel-fleche[hidden] { display: none; }

    .carrousel-fleche span {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e2e6de;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #444;
    }
    .carrousel-fleche:hover span { border-color: #74C15A; color: #4a8f36; }
}
.tuile-terrain:hover { transform: translateY(-2px); }
.tuile-terrain:hover .tuile-photo { box-shadow: 0 6px 18px rgba(30, 50, 20, 0.18); }
.tuile-terrain:focus-visible { outline: 2px solid #74C15A; outline-offset: 3px; border-radius: 12px; }

/* Format 4:3 (paysage) via padding-bottom:75% (compatible partout) plutôt que aspect-ratio. */
.tuile-photo {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    border-radius: 12px;
    overflow: hidden;
    background: #eceee9;
    position: relative;
}
.tuile-photo img,
.tuile-photo-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.tuile-photo img { object-fit: cover; display: block; }
.tuile-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a9a7c;
    font-size: 12px;
    background: #e9efe4;
}

/* Les trois lignes de texte tiennent chacune sur une seule ligne, pour garder un bandeau
   compact et laisser le maximum de hauteur à la photo. */
.tuile-info { padding: 10px 2px 12px; }

.tuile-nom {
    font-size: 15px;
    font-weight: bold;
    color: #222;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Réutilise .popup-breadcrumb de style.css, en vert pour distinguer les trois lignes. */
.tuile-terrain .popup-breadcrumb {
    margin-bottom: 2px;
    font-size: 12.5px;
    color: #4a8f36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tuile-extrait {
    font-size: 12.5px;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zone de description dans la fiche terrain (sous le bouton "Ajouter une photo ?").
   L'élément n'est créé que si le terrain a une description : pas de zone vide sinon.
   Marges symétriques : le <br> de fin du bloc photo est retiré côté JS quand une description
   s'intercale (voir construireContenuPopupTerrain dans script.js), l'espacement au-dessus et
   en dessous du paragraphe est donc porté uniquement par ces marges. */
.popup-description {
    font-size: 13.5px;
    color: #444;
    line-height: 1.5;
    margin: 10px 0;
}

/* ---- Fond de section (page d'accueil uniquement) ----
   Même gris que celui utilisé auparavant par #provinces-section (désormais blanc, voir
   style-accueil-provinces.css) : la bande grise se déplace du bloc provinces/régions vers le
   carrousel, pour marquer une rupture visuelle entre la carte et le reste de la page. */
.beaux-terrains-accueil {
    background-color: #f7f9f6;
    padding: 40px 20px 20px;
}

/* ---- Titre : deux variantes selon la page ---- */
/* Page d'accueil : aligné à gauche, sur le même modèle que les pages région
   (.beaux-terrains-region h2 ci-dessous). Anciennement centré comme .provinces-container h2,
   qui lui reste centré : seul ce titre du carrousel change. */
.beaux-terrains-accueil h2 {
    margin: 0 0 24px;
    font-size: 26px;
    color: #333;
    text-align: left;
}
/* Pages région : même titre que sur l'accueil, comme les autres sections de ces pages. */
.beaux-terrains-region h2 {
    margin: 0 0 24px;
    font-size: 26px;
    color: #333;
}

@media (max-width: 640px) {
    .tuile-terrain { flex-basis: 240px; width: 240px; }

    /* Réduit le padding horizontal de la section (20px -> 16px, la même distance que celle qui
       sépare deux tuiles, voir margin-right ci-dessus) plutôt que de faire déborder le scroller
       par une marge négative puis le repadder : cette première approche reposait sur le
       comportement d'un élément avec overflow-x:auto ET une marge négative sur lui-même, pas
       fiable partout en pratique. Ici, la section elle-même a simplement moins de padding sur
       mobile : la première tuile — et le titre, resté aligné dessus — tombent à 16px du bord de
       l'écran sans manipulation de marge sur l'élément qui défile. */
    .beaux-terrains-accueil {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =====================================================================================
   Notation publique des terrains
   Deux usages, une seule feuille : la ligne de note des tuiles du carrousel, et la fiche terrain
   (voir « Fiche terrain » en fin de fichier). Tout est ici, et pas dans style.css, parce que cette feuille est chargée
   par TOUTES les pages qui peuvent ouvrir une fiche — accueil, province, région — et par elles
   seules ; style.css reste donc intact, conformément à l'approche additive.
   ===================================================================================== */

/* ---- Étoile de la moyenne (commun aux tuiles et aux fiches) ----
   Une seule étoile, le chiffre écrit à côté porte la valeur. Grise tant que personne n'a voté :
   le texte « Pas encore noté » le dit aussi, rien ne repose sur la seule couleur. */
.note-etoile {
    display: inline-block;
    line-height: 1;
    font-size: 17px;
    color: #4a8f36;
}
.note-etoile.vide { color: #c4ccbd; }

/* ---- Ligne de note dans une tuile du carrousel ----
   Occupe exactement la place de .tuile-extrait : même hauteur, même troncature sur une ligne,
   donc aucun décalage dans la géométrie du carrousel. Aucun curseur ni état de survol ici : le
   clic doit traverser jusqu'à la tuile, qui ouvre la fiche. */
.tuile-note {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.tuile-note .note-etoile { font-size: 14px; }
.tuile-note-chiffre { font-size: 12.5px; color: #666; }
.tuile-note-vide { font-size: 12.5px; color: #999; }


/* =====================================================================================
   Fiche terrain (voir construireContenuPopupTerrain et brancherFicheTerrain dans script.js)
   Ordre : fil d'Ariane, titre, ligne de résumé, photo, trois boutons, panneaux « Noter » et
   « N avis », critères, pied de fiche. Toutes les tailles de texte tournent autour de 13,5 px.
   Plusieurs sélecteurs commencent par .fiche : les règles de Leaflet sur les liens et les
   paragraphes du popup (.leaflet-container a, .leaflet-popup-content p) sont plus spécifiques
   qu'une classe seule et l'emporteraient (c'était la cause du blanc au-dessus des avis).
   ===================================================================================== */

.fiche { font-size: 13.5px; line-height: 1.45; color: #333; }
.fiche p { margin: 0; }

/* Le fil d'Ariane et le titre passent à côté de la croix de fermeture du panneau. */
.fiche > .popup-breadcrumb,
.fiche > .fiche-titre { padding-right: 44px; }
.fiche .popup-breadcrumb { font-size: 12.5px; margin-bottom: 2px; }
.fiche-titre { font-size: 19px; font-weight: 700; line-height: 1.25; color: #222; }

/* ---- Ligne de résumé : « ★ 4,2 (9) · 2 avis · 1,2 km · Accès public probable » ----
   Un <span> par morceau : un morceau vide disparaît, et le point de séparation n'est posé que
   devant un morceau précédé d'un autre morceau non vide. */
.fiche-resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
    font-size: 13px;
    color: #555;
}
.fiche-resume > span:empty { display: none; }
.fiche-resume > span:not(:empty) ~ span:not(:empty)::before { content: "·"; margin: 0 7px; color: #bbb; }
.fiche-resume .note-etoile { font-size: 14px; vertical-align: -1px; }
.fiche-lien-avis {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: #3d7a2a; text-decoration: underline; cursor: pointer;
}
.fiche-lien-avis[aria-expanded="true"]::after { content: " \25B4"; display: inline-block; margin-left: 3px; }

/* ---- Photo ---- */
.fiche-photos { margin-top: 12px; }
.fiche .popup-photo { border-radius: 10px; margin-bottom: 0; }
.fiche-photos .popup-photo-add-btn { margin-top: 6px; }
.fiche .popup-description { margin: 10px 0 0; }

/* Sans photo : bandeau (dessin recadré sur le terrain et atténué), l'invitation posée dessus. */
.fiche-sans-photo {
    position: relative;
    height: 180px;
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f5f2;
}
.fiche-sans-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;    /* le banc et un bout du terrain */
    opacity: 0.5;
}
/* Fenêtre flottante, bien plus large : un peu plus haut, sinon le dessin est trop recadré. */
#desktop-modal-content .fiche-sans-photo { height: 230px; }
.fiche .fiche-ajout-photo {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px dashed #74C15A;
    border-radius: 8px;
    color: #3d7a2a;
    font-size: 13px;
}
.fiche .fiche-ajout-photo:hover { background: #fff; }

/* ---- Trois boutons côte à côte ----
   Largeur partant de celle du texte (flex 1 1 auto), pas trois tiers égaux : « Noter » est
   court, et la place qu'il laisse permet à « Itinéraire » de tenir sur un téléphone de 360 px. */
.fiche-boutons { display: flex; gap: 6px; margin-top: 14px; }
.fiche .fiche-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1.5px solid #74C15A;
    border-radius: 10px;
    background: #fff;
    color: #3d7a2a;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.fiche .fiche-btn span { overflow: hidden; text-overflow: ellipsis; }
.fiche .fiche-btn svg { width: 16px; height: 16px; flex: none; }
.fiche .fiche-btn:hover { background: #f3f8f0; }
.fiche .fiche-btn[aria-expanded="true"] { background: #eef5e9; }
.fiche .fiche-btn-plein,
.fiche .fiche-btn-plein:hover { background: #74C15A; color: #fff; }
.fiche .fiche-btn-plein:hover { background: #68b34f; border-color: #68b34f; }
.fiche .fiche-btn:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }

/* ---- Panneaux « Noter » et « N avis », juste sous les boutons ---- */
.fiche-panneau { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f6f8f3; }
.fiche-panneau[hidden] { display: none; }

.noter-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.noter-libelle { font-size: 13px; color: #666; }
.noter-libelle.ok { color: #333; font-weight: 600; }
.note-vote-message { font-size: 12.5px; color: #4a8f36; }
.note-erreur { color: #b04a3a; }

/* Les étoiles de vote sont de vrais <button> : accessibles au clavier et annoncés comme
   contrôles. C'est la seule rangée de cinq étoiles de la fiche. */
.note-vote-etoiles { display: inline-flex; }
.note-vote-etoile {
    background: none;
    border: 0;
    margin: 0;
    padding: 0 2px;
    font-size: 22px;
    line-height: 1;
    color: #c4ccbd;
    cursor: pointer;
}
.note-vote-etoile.active { color: #4a8f36; }
.note-vote-etoile:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }

/* Cases des joueurs (après un vote) */
.noter-criteres { margin-top: 12px; }
.noter-criteres[hidden] { display: none; }
.noter-sous-titre { margin-bottom: 8px; font-size: 13px; color: #555; }
.noter-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.critere-case {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}
.critere-case svg { width: 16px; height: 16px; flex: none; }
.critere-case[aria-pressed="true"] { background: #74C15A; border-color: #74C15A; color: #fff; }
.critere-case:disabled { opacity: 0.7; cursor: default; }
.critere-case:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }
.fiche .noter-erreur { margin-top: 8px; font-size: 12.5px; color: #b04a3a; }

/* Formulaire d'avis : le champ seul à l'ouverture, la suite au premier caractère. */
.avis-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.avis-suite { display: flex; flex-direction: column; gap: 8px; }
.avis-suite[hidden] { display: none; }
.avis-form label { font-size: 13px; font-weight: 600; color: #333; }
.avis-facultatif { font-size: 11.5px; font-weight: 400; color: #999; }
.avis-form textarea,
.avis-form input[type="text"] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px;
    background: #fff; font: inherit; font-size: 13.5px; color: #333;
}
.avis-form textarea { min-height: 86px; resize: vertical; }
.avis-form textarea:focus,
.avis-form input[type="text"]:focus { outline: 2px solid #74C15A; outline-offset: -1px; border-color: #74C15A; }
.avis-form .avis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.avis-compteur { margin-top: -4px; font-size: 11.5px; color: #888; text-align: right; }
.avis-compteur.presque { color: #b56a00; font-weight: 600; }
.fiche .avis-mention { font-size: 11.5px; line-height: 1.4; color: #888; }
.fiche .avis-info { padding: 8px 10px; border-radius: 8px; background: #eef3fb; color: #1f4e8c; font-size: 12.5px; }
.fiche .avis-erreur { font-size: 12.5px; color: #b04a3a; }
.avis-boutons { display: flex; justify-content: flex-end; gap: 8px; }
.avis-btn { padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.avis-btn-envoyer { background: #74C15A; border: 1px solid #74C15A; color: #fff; }
.avis-btn-envoyer:disabled { opacity: 0.5; cursor: default; }
.avis-merci { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #eef7e9; color: #3d7a2a; font-size: 13px; }

/* Liste des avis : sans carte grise autour de chaque avis, le panneau suffit. */
.fiche-panneau-avis .avis { margin-bottom: 12px; }
.fiche .avis-texte { font-size: 13.5px; line-height: 1.45; color: #333; overflow-wrap: anywhere; }
.avis-meta { margin-top: 3px; font-size: 12px; color: #888; }
.avis-note .note-etoile { font-size: 13px; vertical-align: -1px; }
.fiche-lien-texte {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: #3d7a2a; cursor: pointer;
}
.fiche-lien-texte:hover { text-decoration: underline; }

/* ---- Critères : « Sur place », puis « À proximité » ---- */
.fiche-criteres:empty { display: none; }
.criteres-groupe { margin-top: 14px; }
.criteres-titre {
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}
.criteres-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.critere {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: #eef5e9;
    color: #3d7a2a;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.2;
}
.critere svg { width: 16px; height: 16px; flex: none; }
.critere-distance { color: #6f9a5f; }
.critere-joueurs { cursor: pointer; }
.critere-joueurs[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px #74C15A; }
.critere-joueurs:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }
.critere-compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: #3d7a2a;
    font-size: 11.5px;
    font-weight: 700;
}
.fiche .criteres-detail { margin-top: 8px; font-size: 12.5px; color: #555; }

/* ---- Lien « pour aller plus loin », juste au-dessus du pied : page de la commune
   (lienPageCommuneHtml dans script.js) ou, sur une page commune, la carte (commune.js) ---- */
.fiche .fiche-lien-bloc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #e2e6de;
    border-radius: 10px;
    background: #f7f9f6;
    color: #3d7a2a;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.fiche .fiche-lien-bloc:hover { background: #eef4ea; }
.fiche-lien-bloc svg { width: 16px; height: 16px; flex-shrink: 0; }
.fiche-lien-bloc span:first-of-type { flex: 1; }

/* ---- Pied de fiche : « Signaler une erreur », discret ---- */
.fiche-pied { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }
.fiche .fiche-pied a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12.5px;
    text-decoration: none;
}
.fiche .fiche-pied a:hover { color: #666; text-decoration: underline; }
.fiche-pied svg { width: 14px; height: 14px; }


/* =====================================================================================
   Fiche club (voir construireContenuPopupClub dans script.js)
   Même structure et mêmes classes que la fiche terrain ; seul le bleu du marqueur club la
   distingue au premier coup d'œil (pastille « Club », icône de la fédération).
   ===================================================================================== */

.fiche-club-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f0fb;
    color: #1f63b5;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.fiche-club-pastille svg { width: 14px; height: 14px; }

.fiche-club-adresse { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.fiche-club-adresse svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #666; }

.fiche .fiche-federation {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e3e7df;
    border-radius: 12px;
    color: #333;
    text-decoration: none;
}
.fiche .fiche-federation:hover { border-color: #74C15A; }
.fiche-federation > svg { width: 22px; height: 22px; flex: none; color: #1f63b5; }
.fiche-federation-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fiche-federation-texte b { font-weight: 500; line-height: 1.3; }
.fiche-federation-texte span { font-size: 12px; color: #888; }
.fiche-federation-lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    color: #3d7a2a;
    font-size: 13px;
}
.fiche-federation-lien svg { width: 14px; height: 14px; }