html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    margin: 0;
}

/* Typographie de la charte (CHARTE.md) : Figtree pour tout le texte courant, Manrope pour les
   titres, les chiffres mis en avant et les boutons. Polices déclarées dans polices.css. */
body {
    font-family: 'Figtree', Arial, sans-serif;
    color: #1D2619;
}

h1, h2, h3, h4,
.hero-headline,
.fiche-titre,
#locateBtn,
#browseListBtn,
.filtres-voir,
.add-photo-submit-btn,
.respiration-bouton,
.fiche .fiche-btn,
.avis-btn-envoyer,
.btn-open-compteur,
.petanque-cta-carte {
    font-family: 'Manrope', Arial, sans-serif;
}

/* Bloc "carte plein écran" : header + contrôles + carte occupent exactement la hauteur visible
   au chargement. Le contenu qui suit (statistiques, futures sections, pied de page) est du flux
   normal de page, révélé simplement en scrollant. */
.map-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh; /* tient compte des barres d'interface mobiles quand le navigateur le supporte */
    position: relative;
}

#map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
}

/* Message « Ctrl + molette pour zoomer », affiché brièvement quand on fait défiler la page
   au-dessus de la carte (voir « Molette sur la carte » dans script.js). */
.carte-message-molette {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.carte-message-molette.visible {
    opacity: 1;
}

/* Bouton plein écran : injecté par script.js comme un vrai contrôle Leaflet (même famille que
   le zoom et le sélecteur Plan/Satellite), donc son positionnement/empilement dans le coin de la
   carte et son style de boîte (fond blanc, bordure) sont déjà gérés par Leaflet lui-même. */
#fullscreenBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

#fullscreenBtn .btn-icon {
    width: 16px;
    height: 16px;
}

/* Mode plein écran : la carte (avec ses contrôles de recherche) occupe tout le viewport, header et
   liens "Ajouter un terrain" masqués. z-index 1060 : au-dessus du reste de la page, mais sous
   les panneaux menu/info/partage (1100+) au cas où l'un d'eux était resté ouvert. */
.map-view.fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    height: 100svh !important;
    z-index: 1060;
    background: white;
}

.map-view.fullscreen-active .header,
.map-view.fullscreen-active #browseListBtn,
.map-view.fullscreen-active .add-terrain-link-wrapper,
.map-view.fullscreen-active .search-error {
    display: none;
}

.map-view.fullscreen-active #map {
    height: 100%;
}

/* Empêche la page de scroller derrière la carte tant que le plein écran est actif */
body.fullscreen-lock {
    overflow: hidden;
}

/* Flèche indiquant la direction du terrain le plus proche, quand aucun n'est visible à l'écran */
.nearest-arrow {
    position: absolute;
    z-index: 900;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 6px;

    background: #74C15A;
    color: white;
    padding: 8px 14px 8px 10px;
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

.nearest-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.nearest-arrow-icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .nearest-arrow-label {
        display: none;
    }

    .nearest-arrow {
        padding: 10px;
        border-radius: 50%;
    }
}

/* En-tête : grille à 3 colonnes symétriques (langue | titre | nav) en desktop, empilée sur mobile.
   La grille garantit un centrage réel du titre, même si langue et nav n'ont pas la même largeur. */
.header {
    display: flex;
    flex-direction: column;
    padding: 20px 30px 8px;
    flex: 0 0 auto;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    flex-shrink: 0;
}

/* Logo complet (boule + « Mapetanque.be » vectorisé) : une seule image SVG, le texte n'est plus
   du HTML. En mobile, la balise <picture> bascule sur la boule seule (voir @media plus bas,
   même point de bascule que le menu burger). */
.brand-link picture {
    display: block;
    line-height: 0;
}

.logo {
    display: block;
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

/* Grand titre au-dessus des contrôles de recherche, inspiré d'AllTrails.
   Charte : Manrope 800, 44 px sur ordinateur, 30 px sur téléphone. */
.hero-headline {
    text-align: center;
    font-weight: 800;
    font-size: 44px;
    color: #1D2619;
    margin: 32px 0 4px;
    line-height: 1.25;
}

/* Navigation desktop : liens directs vers le panneau d'info + sélecteur de langue discret */
#desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Liens "Comment jouer" / "Compteur de points", directement visibles dans la nav desktop (pas
   cachés dans le panneau d'info comme À propos/FAQ/Contact — ce sont de vraies pages séparées).
   Séparés du reste par une bordure à droite, même traitement visuel que #lang-switcher-inline
   plus bas (juste inversé, puisque ce bloc-ci précède #desktop-nav dans le DOM). */
#game-nav-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
    padding-right: 10px;
    border-right: 1px solid #e2e2e2;
}

/* Regroupe les liens "jeu" et le reste de la nav (À propos/FAQ/Contact + langue) en un seul
   bloc flex, pour que justify-content:space-between (sur .header-top-row) ne les écarte pas
   l'un de l'autre — seul le logo doit être poussé à gauche, tout le reste doit rester groupé
   à droite. */
.header-nav-group {
    display: flex;
    align-items: center;
}

.game-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #1D2619;
    border-radius: 20px;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.game-nav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.game-nav-link:hover {
    background: rgba(116, 193, 90, 0.1);
    color: #74C15A;
}

/* Compte, dans la barre de l'ordinateur : pastille verte « Se connecter », puis la même avec le
   pseudo une fois connecté (20 caractères au plus : coupé au-delà de 160 px). */
.nav-compte-zone {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.nav-compte {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 7px 15px;
    border-radius: 999px;
    background: #74C15A;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.nav-compte:hover {
    background: #56A03D;
}

/* Sélecteur de langue discret (repli manuel ; la détection automatique suffit dans l'immense
   majorité des cas, donc pas besoin d'un bouton bien visible comme avant) */
#lang-switcher-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid #e2e2e2;
}

.lang-link {
    border: none;
    background: none;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    border-radius: 12px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-link:hover {
    color: #74C15A;
}

.lang-link.active {
    color: #74C15A;
    background: rgba(116, 193, 90, 0.1);
}

/* Sélecteur de langue desktop en menu déroulant (construit par script.js) : bouton « FR ▾ »,
   et les quatre langues dans une petite liste qui s'ouvre en dessous. */
#lang-switcher-inline {
    position: relative;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #74C15A;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.15s ease;
}

.lang-toggle:hover,
#lang-switcher-inline.ouvert .lang-toggle {
    background: rgba(116, 193, 90, 0.1);
}

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

#lang-switcher-inline.ouvert .lang-toggle svg {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* Centré sous le bouton : + 5px compense la moitié du padding-left (10px) de
       #lang-switcher-inline, qui décale le bouton vers la droite dans son conteneur. */
    left: calc(50% + 5px);
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.lang-menu[hidden] {
    display: none;
}

/* Spécificité alignée sur les règles de la bannière (.hero-banner .lang-link…) et des ombres
   (#lang-switcher-inline .lang-link) : dans la liste blanche, texte foncé et sans ombre. */
#lang-switcher-inline .lang-menu .lang-link {
    text-align: center;
    padding: 6px 9px;
    border-radius: 7px;
    color: #56604F;
    text-shadow: none;
}

#lang-switcher-inline .lang-menu .lang-link:hover {
    color: #74C15A;
    background: rgba(116, 193, 90, 0.08);
}

#lang-switcher-inline .lang-menu .lang-link.active {
    color: #74C15A;
    background: rgba(116, 193, 90, 0.12);
}

/* Les langues sont des liens (construireNavBureau dans script.js) */
#lang-switcher-inline .lang-link {
    text-decoration: none;
}

/* Menu « Explorer » de la nav desktop (construireNavBureau dans script.js) : régions,
   provinces, communes, dans une liste blanche qui s'ouvre sous le bouton. */
.nav-deroulant {
    position: relative;
    display: inline-flex;
}

.nav-deroulant-bouton {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Spécificité d'identifiant : les icônes des liens de la nav sont masquées sur les bannières et
   l'en-tête sobre (.entete-sobre .game-nav-link svg…), pas ce chevron. */
#game-nav-inline .nav-deroulant-chevron svg {
    display: block;
    width: 9px;
    height: 6px;
    margin-left: 3px;
    transition: transform 0.15s ease;
}

#game-nav-inline .nav-deroulant.ouvert .nav-deroulant-chevron svg {
    transform: rotate(180deg);
}

.nav-deroulant-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    padding: 6px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.nav-deroulant-menu[hidden] {
    display: none;
}

#game-nav-inline .nav-deroulant-lien {
    padding: 9px 12px;
    border-radius: 8px;
    color: #1D2619;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
}

#game-nav-inline .nav-deroulant-lien:hover,
#game-nav-inline .nav-deroulant-lien[aria-current="page"] {
    color: #3d7a2a;
    background: rgba(116, 193, 90, 0.1);
}

/* Bannières photo (overflow: hidden) : le menu ouvert déborde dessous */
.hero-banner:has(.nav-deroulant.ouvert) {
    overflow: visible;
}

.info-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #1D2619;
    cursor: pointer;
    border-radius: 20px;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.info-nav-trigger:hover {
    background: rgba(116, 193, 90, 0.1);
    color: #74C15A;
}

/* Barre de liens vers les sections de contenu sous la carte (Statistiques, puis d'autres),
   alignée à gauche, juste au-dessus de la bordure haute de la carte.
   Réutilisée aussi pour le lien "Revenir en haut" juste sous cette bordure. */
/* Menu burger : masqué en desktop, réservé au mobile */
#menu-button {
    display: none;
}

@media (max-width: 1024px) {

    .header {
        padding: 14px 15px 8px;
    }

     /* Boule seule. Le logo du menu mobile (.menu-logo) est calé pour que sa boule tombe
        exactement sur celle-ci : changer cette taille demande d'y reporter le calcul. */
    .logo {
        height: 34px;
    }

    .hero-headline {
        font-size: 30px;
        margin: 22px 0 4px;
    }

    /* La navigation desktop (incluant le sélecteur de langue) cède la place au menu burger */
    #desktop-nav {
        display: none;
    }

    #game-nav-inline {
        display: none;
    }

    #menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        width: 40px;
        height: 40px;
        padding: 0;
        margin-right: -7px; /* aligne les traits (et non la zone cliquable) sur le bord droit */

        border: none;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    /* Trois traits blancs, sans pastille : même traitement que le logo et la nav sur la bannière */
    #menu-button svg {
        display: block;
        width: 26px;
        height: 26px;
    }
}

/* Bouton de localisation */
#locateBtn,
#browseListBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #74C15A;
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

#locateBtn .btn-icon,
#browseListBtn .btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#locateBtn:hover,
#browseListBtn:hover {
    background-color: #56A03D;
}

/* Barre de contrôles : bouton localiser + recherche d'adresse */
.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin: 10px auto;
    padding: 0 15px;
}

.controls #locateBtn,
.controls #browseListBtn {
    margin: 0;
}

.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form input {
    padding: 12px 16px 12px 42px;
    border: 1px solid #ccc;
    border-radius: 24px;
    font-size: 15px;
    width: 240px;
    max-width: 60vw;
    box-sizing: border-box;
}

.search-form input:focus {
    outline: none;
    border-color: #74C15A;
}

.search-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    color: #888;
    cursor: pointer;
}

.search-form button svg {
    width: 18px;
    height: 18px;
}

.search-form button:hover {
    color: #56A03D;
}

/* Champ et loupe, réunis par script.js (« Propositions de la recherche ») ; la flèche de retour
   n'apparaît qu'en plein écran, sur téléphone (plus bas). */
.search-ligne {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form .search-retour {
    display: none;
}

/* Propositions sous le champ de recherche (« Propositions de la recherche » dans script.js).
   Plus large que le champ ; script.js le décale vers la gauche s'il déborde de l'écran. */
.search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;               /* au-dessus de la carte et de ses contrôles */
    width: max(100%, 340px);
    max-width: calc(100vw - 16px);
    max-height: min(70vh, 480px);
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e6de;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 42, 28, .18);
}

.search-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: #1D2619;
}

.search-suggestion.active,
.search-suggestion:hover {
    background: #eef4ea;
}

.search-suggestion-picto {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: #3d7a2a;
}

.search-suggestion-textes {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.search-suggestion-nom {
    font-size: 14.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.search-suggestion-nom mark {
    background: none;
    color: #3d7a2a;
    font-weight: 800;
}

.search-suggestion-contexte {
    font-size: 12.5px;
    font-weight: 400;
    color: #56604F;
}

/* Terrains d'une commune ou d'un village : en retrait, sous lui */
.search-suggestion-terrain {
    padding-left: 41px;
}

.search-suggestion-terrain .search-suggestion-nom {
    font-weight: 400;
}

.search-suggestion-terrain .search-suggestion-picto {
    width: 14px;
    height: 14px;
}

.search-suggestion-titre {
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
}

.search-suggestion-titre ~ .search-suggestion-terrain {
    padding-left: 14px;
}

.search-suggestion-adresse {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #56604F;
}

.search-suggestion-adresse .search-suggestion-picto {
    color: #888;
}

.search-suggestion-adresse .search-suggestion-nom {
    font-weight: 400;
}

/* « Afficher N de plus » (et « Réduire » une fois déplié), sous les terrains d'une commune ou
   d'un village */
.search-suggestion-plus {
    padding-left: 41px;
    color: #3d7a2a;
}

.search-suggestion-plus .search-suggestion-nom {
    font-size: 13.5px;
}

.search-suggestion-plus .search-suggestion-picto {
    width: 14px;
    height: 14px;
}

.search-suggestion-indication {
    padding: 14px 16px;
    font-size: 14px;
    color: #56604F;
}

/* Téléphone : la recherche passe en plein écran dès qu'on touche le champ (classe posée par
   script.js). Le champ reste le même, le clavier ne se replie donc pas ; la loupe laisse sa
   place à une flèche de retour. */
@media (max-width: 600px) {
    body.recherche-plein-ecran {
        overflow: hidden;
    }

    .search-form.search-form-plein-ecran {
        position: fixed;
        inset: 0;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 0;
        background: #fff;
    }

    .search-form.search-form-plein-ecran .search-ligne input {
        width: 100%;
        max-width: none;
        padding-right: 46px;
        border: 1px solid #74C15A;
    }

    /* Flèche de retour : dans le champ, à droite, là où se trouverait une croix d'effacement.
       La loupe reste à gauche ; le champ garde toute sa largeur. */
    .search-form.search-form-plein-ecran .search-retour {
        display: flex;
        left: auto;
        right: 8px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        color: #3d7a2a;
    }

    .search-form.search-form-plein-ecran .search-retour svg {
        width: 20px;
        height: 20px;
    }

    .search-form-plein-ecran .search-suggestions {
        position: static;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 10px -12px 0;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        border: none;
        border-top: 1px solid #eee;
        border-radius: 0;
        box-shadow: none;
    }

    .search-form-plein-ecran .search-suggestion {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

.add-terrain-link-wrapper {
    text-align: center;
    margin: 20px 0 6px;
    flex: 0 0 auto;
}

#add-terrain-link {
    color: #56A03D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
}

#add-terrain-link:hover {
    color: #74C15A;
}

.search-error {
    text-align: center;
    color: #c62828;
    font-size: 14px;
    margin: 0 0 6px;
    min-height: 6px;
    flex: 0 0 auto;
}

/* Sur mobile, « Me localiser » se réduit à son icône pour laisser la largeur au champ de
   recherche (le libellé reste lu par les lecteurs d'écran, via aria-label). Accueil et pages
   province/région. « button#locateBtn » : doit l'emporter sur le padding posé par
   style-accueil-provinces.css et style-province.css, chargées après. */
@media (max-width: 600px) {
    .controls {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
    }

    .controls button#locateBtn {
        flex-shrink: 0;
        padding: 0 12px;
    }

    .controls #locateBtn span {
        display: none;
    }

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

    .controls .search-form {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-form input {
        width: 100%;
        max-width: none;
    }

    /* Le champ est dans .search-ligne (ajoutée par script.js), elle-même en flex dans le
       formulaire : sans ça, la ligne garde la largeur naturelle du champ (~250px) au lieu de
       remplir le formulaire, et le bouton + le champ paraissent décalés à gauche. Pas en plein
       écran : le formulaire y est en colonne, la ligne s'étirerait en hauteur. */
    .controls .search-form:not(.search-form-plein-ecran) .search-ligne,
    .controls .search-ligne input {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Photo un peu moins haute sur mobile — allège le contenu total du popup, pour réduire le
   besoin de défiler à l'intérieur (voir maxHeight du popup dans script.js) sur les petits
   écrans, là où l'espace vertical disponible est le plus contraint. */
@media (max-width: 600px) {
    .popup-photo {
        max-height: 100px;
    }

    .popup-photo-iframe {
        height: 100px;
    }
}

/* Même correctif que ci-dessous pour mobile/tablette, mais pour la fenêtre flottante desktop :
   elle n'existait pas encore quand ce fix a été fait la première fois, donc sa photo était
   restée plafonnée à 140px (l'ancien petit popup) dans une carte bien plus large — ratio fixe
   plutôt qu'une hauteur figée, même principe. */
@media (min-width: 1025px) {
    #desktop-modal-content .popup-photo,
    #desktop-modal-content .popup-photo-iframe {
        max-height: none;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Dans la fiche plein écran (mobile/tablette), une hauteur figée en pixels (comme ci-dessus,
   pensée pour le petit popup desktop) donne une photo de plus en plus "écrasée" à mesure que
   l'écran s'élargit — flagrant sur tablette, où la fiche plein écran est bien plus large qu'un
   téléphone mais la photo reste plafonnée à la même hauteur. Un ratio fixe résout ça : la photo
   garde une proportion cohérente quelle que soit la largeur, tout en occupant toute la largeur
   disponible comme avant. Remplace les règles au-dessus (spécificité de l'id #mobile-sheet-content
   suffit à l'emporter, pas besoin de !important). */
@media (max-width: 1024px) {
    #mobile-sheet-content .popup-photo,
    #mobile-sheet-content .popup-photo-iframe {
        max-height: none;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Panneau de partage (modal centré) */
#share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1400;
}

#share-overlay.visible {
    display: block;
}

#share-panel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1450;

    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    padding: 25px;
    /* border-box, comme #add-photo-modal : 350px = les 300px de contenu d'avant + le padding.
       Sur mobile, 12px de chaque côté au minimum, comme la fiche terrain (#mobile-sheet). */
    box-sizing: border-box;
    width: 350px;
    max-width: calc(100vw - 24px);
}

#share-panel.open {
    display: block;
}

#share-close {
    float: right;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.share-title {
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 18px;
    clear: both;
    padding-top: 4px;
}

.share-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #1D2619;
    font-size: 15px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.share-link:hover {
    background: #f0f4f9;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #56604F;
}

.share-icon svg {
    width: 18px;
    height: 18px;
}

/* Liens dans les popups de terrain (itinéraire, partager) :
   seul le texte est souligné, pas l'icône ni l'espace qui le sépare du texte */
.leaflet-popup-content a {
    text-decoration: none;
}

/* Position de la croix de fermeture fixée explicitement (plutôt que de laisser le positionnement
   par défaut de Leaflet, dont on ne maîtrise pas la géométrie interne exacte) — la barre de
   défilement ci-dessous est calée sur cette même valeur de 12px, pour que les deux soient enfin
   ancrées au même repère plutôt que de deviner chacune de son côté. */
.leaflet-popup-close-button {
    top: 10px !important;
    right: 12px !important;
}

/* Barre de défilement plus fine et arrondie sur les fiches terrain (le plafond de 320px, voir
   bindPopup dans script.js, rend le contenu défilable dès qu'il dépasse) — la barre par défaut
   du navigateur est large et carrée, peu en phase avec le reste du design du site.
   Marge droite calée sur le right:12px de la croix ci-dessus (voir commentaire), et padding-right
   ajouté pour redonner de l'air entre le texte et la barre — sans ce padding, le texte touchait
   quasiment le curseur.
   Marge du haut légèrement augmentée pour que la barre démarre un peu plus bas que la croix de
   fermeture plutôt que juste en dessous. */
.leaflet-popup-content {
    margin: 40px 12px 13px 20px;
    padding-right: 8px;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #d6d6d6 transparent;
}

.leaflet-popup-content::-webkit-scrollbar {
    width: 4px;
}

.leaflet-popup-content::-webkit-scrollbar-track {
    background: transparent;
}

.leaflet-popup-content::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 999px;
}

.leaflet-popup-content::-webkit-scrollbar-thumb:hover {
    background: #b8b8b8;
}

/* Certains navigateurs (Edge/Chrome sous Windows notamment) affichent encore les petites flèches
   natives en haut/bas de la barre — jamais alignées avec la croix de fermeture ni avec le reste
   du design personnalisé ci-dessus, donc autant les retirer complètement plutôt que d'essayer de
   les repositionner. */
.leaflet-popup-content::-webkit-scrollbar-button {
    display: none;
}

/* display:none posé ici, HORS media query, pour ces deux éléments : sans ça, au-delà de 1024px de
   large, aucune règle ne s'applique du tout à eux (tout leur style vit dans le
   @media (max-width: 1024px) ci-dessous) — #mobile-sheet-close, un <button> bien réel, se
   retrouvait alors affiché tel quel dans le flux normal de la page (petite croix visible en haut
   à gauche), puisque rien ne le cachait par défaut en desktop. */
#mobile-sheet-overlay,
#mobile-sheet {
    display: none;
}

/* display:none posé ici, HORS media query, même raison que ci-dessus mais pour la fenêtre
   flottante desktop cette fois : son CSS vit entièrement dans le @media (min-width: 1025px)
   plus bas, donc sans ce garde-fou elle resterait affichée par défaut sur mobile. */
#desktop-modal-overlay,
#desktop-modal {
    display: none;
}

/* Barre de défilement des fiches (quand le panneau « Noter » ou une longue fiche dépasse la
   hauteur de l'écran) : fine, arrondie, sur fond transparent, comme celle de l'ancien popup plus
   haut. La barre par défaut, carrée et avec ses flèches, jurait avec les coins arrondis de la
   fenêtre. La marge du rail la garde à l'écart des coins (navigateurs Chrome/Edge/Safari ;
   Firefox ne lit que les deux premières propriétés). */
#mobile-sheet,
#desktop-modal {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}
#mobile-sheet::-webkit-scrollbar,
#desktop-modal::-webkit-scrollbar { width: 6px; }
#mobile-sheet::-webkit-scrollbar-track,
#desktop-modal::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
#mobile-sheet::-webkit-scrollbar-thumb,
#desktop-modal::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 999px; }
#mobile-sheet::-webkit-scrollbar-thumb:hover,
#desktop-modal::-webkit-scrollbar-thumb:hover { background: #b8b8b8; }
#mobile-sheet::-webkit-scrollbar-button,
#desktop-modal::-webkit-scrollbar-button { display: none; }

/* Fiche terrain en plein écran sur mobile — le petit popup Leaflet reste inchangé (utile pour
   desktop), mais sur mobile son CONTENU est déplacé (pas copié : mêmes nœuds DOM, écouteurs
   d'événements déjà branchés conservés intacts) dans ce panneau séparé, en dehors de toute la
   hiérarchie de calques transformés de Leaflet. Nécessaire car .leaflet-map-pane porte son
   propre transform (translate3d), qui piège position:fixed sur tout descendant — impossible à
   contourner en CSS pur depuis l'intérieur de cette hiérarchie (vérifié). Voir
   ouvrirFicheMobileTerrain()/fermerFicheMobileTerrain() dans script.js. */
@media (max-width: 1024px) {
    #mobile-sheet-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1400;
    }

    #mobile-sheet-overlay.visible {
        display: block;
    }

    #mobile-sheet {
        position: fixed;
        /* Centré verticalement avec max-height plutôt qu'une hauteur fixe (top+bottom) : la
           fiche s'adapte à son contenu, ne s'étire au maximum que si le contenu est réellement
           long — même technique que #desktop-modal plus bas, pour rester cohérent et éviter de
           réinventer une deuxième logique de dimensionnement à maintenir en parallèle. */
        top: 50%;
        left: 12px;
        right: 12px;
        transform: translateY(-50%);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        z-index: 1450;
        background: white;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.25);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mobile-sheet.open {
        display: block;
    }

    #mobile-sheet-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: #f2f2f2;
        font-size: 24px;
        line-height: 36px;
        text-align: center;
        color: #1D2619;
        z-index: 1;
    }

    /* Haut réduit : le fil d'Ariane et le titre de la fiche passent à côté de la croix (ils lui
       laissent la place, voir .fiche dans style-beaux-terrains.css). */
    #mobile-sheet-content {
        width: 100%;
        padding: 22px 16px 20px;
        box-sizing: border-box;
    }

    /* Le nœud déplacé ici (.leaflet-popup-content) garde sa marge propre au petit popup ancré
       desktop (réglée pour espacer SA barre de défilement de SA croix, voir plus haut) — sans
       ce reset, elle s'additionne au padding ci-dessus et crée un grand vide en haut. Le padding
       du conteneur suffit, seule source de marge une fois le contenu relocalisé ici. */
    #mobile-sheet-content .leaflet-popup-content {
        margin: 0 !important;
        padding: 0 !important;
        /* Leaflet peut reposer sa largeur et sa hauteur fixes (maxHeight 320) sur ce nœud après
           son déplacement, si la carte bouge encore pendant l'ouverture : on les neutralise. */
        width: auto !important;
        height: auto !important;
    }
}

/* Fiche terrain en fenêtre flottante centrée sur desktop — même principe/même mécanisme que le
   panneau plein écran mobile ci-dessus (contenu déplacé, pas copié), juste habillé en petite
   fenêtre modale plutôt qu'en plein écran, plus adapté à un grand viewport. Remplace le popup
   Leaflet classique, qui se retrouvait coincé/rogné dans les limites de la carte. */
@media (min-width: 1025px) {
    #desktop-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1400;
    }

    #desktop-modal-overlay.visible {
        display: block;
    }

    #desktop-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Hauteur dynamique : la fenêtre se cale sur son contenu et ne s'étire que jusqu'à 16px
           des bords haut et bas — la même marge que la carte de l'accueil par rapport aux bords
           latéraux (.map-wrapper, margin 16px, dans style-accueil-provinces.css). Au-delà, le
           contenu défile à l'intérieur. (Une hauteur fixe à cette valeur avait été essayée :
           elle laissait presque toujours une grande zone blanche en bas.)
           Largeur liée à la hauteur de l'ÉCRAN (pas à celle du contenu, ratio 0,7956), avec un
           plancher à 566px (écrans peu hauts) et un plafond à 979px (très grands écrans) —
           valeurs réduites de 15% par rapport au réglage précédent (0,936 / 666px / 1152px). La
           photo, en 16:9 sur toute la largeur, garde donc la même taille quelle que soit la
           longueur de la fiche. */
        width: clamp(566px, calc((100vh - 32px) * 0.7956), 979px);
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        z-index: 1450;
        background: white;
        border-radius: 20px; /* Aligné sur les coins de la carte de l'accueil (.map-wrapper) */
        box-shadow: 0 12px 40px rgba(0,0,0,0.25);
        overflow-y: auto;
    }

    #desktop-modal.open {
        display: block;
    }

    #desktop-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: #f2f2f2;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        color: #1D2619;
        z-index: 1;
        cursor: pointer;
    }

    /* Même haut réduit que #mobile-sheet-content : le titre passe à côté de la croix. */
    #desktop-modal-content {
        width: 100%;
        padding: 22px 24px 20px;
        box-sizing: border-box;
    }

    /* Même correctif que pour #mobile-sheet-content ci-dessus : neutralise la marge propre au
       petit popup ancré desktop, héritée par le nœud déplacé ici, qui créait un grand vide en
       haut de la fenêtre en s'additionnant au padding ci-dessus. */
    #desktop-modal-content .leaflet-popup-content {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;    /* voir #mobile-sheet-content plus haut */
        height: auto !important;
    }
}

.popup-link-text {
    text-decoration: underline;
}

/* Icônes SVG dans les popups de terrain (accès, distance, itinéraire, partager) */
.popup-icon,
.popup-link-icon {
    display: inline-flex;
    vertical-align: middle;
    color: #56604F;
}

.popup-icon svg,
.popup-link-icon svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.popup-link-icon {
    color: #74C15A;
}

/* Photo du terrain dans le popup (issue d'un tag OSM image=/wikimedia_commons=/mapillary=,
   voir resoudre_photo() dans update_terrains.py) */
.popup-photo {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 4px;
}

.popup-photo-credit {
    font-size: 11px;
    color: #999;
}

/* Iframe d'embed Mapillary (voir construireContenuPopupTerrain) : même gabarit que .popup-photo,
   mais nécessite une hauteur explicite (une iframe n'a pas de ratio intrinsèque comme une image). */
.popup-photo-iframe {
    height: 140px;
    border: none;
    /* Laisse remonter le geste de défilement vertical au panneau parent plutôt que de le
       laisser capturé par l'iframe (contenu interactif d'un autre domaine) — sans ça, un
       glissé démarré sur la photo peut bloquer le défilement du reste de la fiche sur mobile. */
    touch-action: pan-y;
}

/* Bouton "agrandir" superposé à chaque photo (voir avecBoutonAgrandir dans script.js) — même
   traitement pour une <img> classique ou l'iframe Mapillary, cette dernière ne pouvant pas être
   rendue cliquable directement (contenu d'un autre domaine). */
.popup-photo-wrap {
    position: relative;
}

/* Zone cliquable couvrant toute la photo, sans indice visuel superposé (juste le curseur qui
   change au survol) — sert aussi pour l'embed Mapillary, où on ne peut pas rendre l'iframe
   elle-même cliquable (contenu d'un autre domaine). */
.popup-photo-expand-zone {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}

/* Pastille « Voir sur Mapillary ↗ » (ou « Explorer en 360° ↗ ») en bas à gauche des miniatures
   locales : dit d'où vient la photo et invite à l'ouvrir. pointer-events: none : le clic passe à
   .popup-photo-expand-zone, qui couvre toute la photo. Fond blanc presque opaque et ombre :
   lisible sur une photo claire comme sur une photo sombre. */
.popup-photo-pastille {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #1D2619;
    font: bold 12px/1 'Figtree', Arial, sans-serif;
    white-space: nowrap;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.popup-photo-pastille img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

/* Crédit exigé par la licence des photos Mapillary, sous la photo. */
.popup-photo-licence {
    display: block;
    margin-top: 2px;
}

.popup-photo-licence a {
    color: inherit;
}

/* Illustration de substitution quand un terrain n'a aucune photo, + bouton d'invitation à en
   proposer une (ouvre #add-photo-modal, voir script.js). */
.popup-photo-placeholder {
    opacity: 0.85;
    /* L'illustration doit se voir en entier (contrairement à une vraie photo, où recadrer les
       bords passe inaperçu) — "cover" la déforme/coupe fortement une fois étirée sur toute la
       largeur d'un écran mobile avec une hauteur fixe. */
    object-fit: contain;
    background: #f7f7f5;
}

.popup-photo-add-btn {
    display: block;
    width: 100%;
    background: none;
    border: 1px dashed #74C15A;
    border-radius: 4px;
    color: #74C15A;
    font-size: 12px;
    font-weight: bold;
    padding: 6px;
    margin-bottom: 4px;
    cursor: pointer;
}

.popup-photo-add-btn:hover {
    background: rgba(116, 193, 90, 0.08);
}

/* Carrousel (2 photos ou plus) — voir brancherPhotosPopup dans script.js pour la logique de
   navigation. Boutons précédent/suivant superposés sur la photo, discrets au repos. */
.popup-photo-carousel {
    position: relative;
    margin-bottom: 4px;
}

.popup-photo-slide .popup-photo-credit {
    display: block;
    margin-top: 2px;
}

.popup-photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.popup-photo-nav.prev { left: 8px; }
.popup-photo-nav.next { right: 8px; }

/* Points de pagination : dans chaque diapositive, en bas à droite de la photo, à hauteur de la
   pastille posée à gauche (voir avecBoutonAgrandir dans script.js). */
.popup-photo-dots {
    position: absolute;
    bottom: 20px;
    right: 10px;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

/* Plus qu'une photo après le retrait d'une photo introuvable (voir photoIntrouvable). */
.popup-photo-dots[hidden] {
    display: none;
}

.popup-photo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.popup-photo-dot.active {
    background: white;
}

/* ===================== Modale "Ajouter une photo" ===================== */
/* Même schéma que #share-panel/#share-overlay, juste au-dessus. */
#add-photo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1400;
}

#add-photo-overlay.visible {
    display: block;
}

#add-photo-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1450;

    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    padding: 25px;
    /* border-box : sans ça, le padding s'ajoutait à max-width et la fenêtre débordait de l'écran
       sur mobile. 12px de chaque côté au minimum, comme la fiche terrain (#mobile-sheet). */
    box-sizing: border-box;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: 85vh;
    overflow-y: auto;
}

#add-photo-modal.open {
    display: block;
}

#add-photo-close {
    float: right;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.add-photo-title {
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 4px;
    clear: both;
}

.add-photo-terrain-name {
    font-size: 13px;
    color: #74C15A;
    font-weight: bold;
    margin: 0 0 16px;
}

#add-photo-form-zone {
    border-top: 1px solid #eee;
    padding-top: 16px;
}

/* Marqueur de position utilisateur */
/* Marqueur de terrain (pin vert) : ombre portée pour se détacher de tous les fonds de carte */
.terrain-marker-icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* Terrain montré par « Voir sur la carte » (montrerTerrain dans script.js) : il sautille trois
   fois. Sur le dessin, Leaflet plaçant le marqueur lui-même par transform. */
.marqueur-montre svg {
    animation: marqueur-sautille 0.6s ease-in-out 3;
    transform-origin: 50% 100%;
}

@keyframes marqueur-sautille {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    70% { transform: translateY(0) scaleY(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .marqueur-montre svg {
        animation: none;
    }
}

/* Marqueur invisible sur lequel se construit une fiche ouverte depuis une liste ou un carrousel
   (ouvrirFicheSurPlace dans script.js) */
.marqueur-fiche-invisible {
    display: none;
}

.user-location {
    background: transparent;
    border: none;
}

.user-location div {
    width: 18px;
    height: 18px;
    background: #1976d2;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* ===================== Couche "Clubs affiliés" ===================== */

/* Marqueur de club (pin bleu) : même traitement que .terrain-marker-icon (ombre portée pour se
   détacher de tous les fonds de carte), voir clubMarkerIcon dans script.js */
.club-marker-icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* Amas (clusters) de clubs affiliés, en bleu — voir creerIconeClusterClub dans script.js. Style
   entièrement dédié (ne réutilise pas .marker-cluster-* de MarkerCluster.Default.css, chargé
   depuis le CDN pour les amas de terrains) : anneau extérieur clair (toujours 40×40, taille fixe
   passée à L.divIcon) + rond intérieur plus soutenu et plus grand selon le nombre de clubs
   regroupés, nombre centré via flexbox (pas de marges calculées à la main par palier). */
.club-cluster-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(25, 118, 210, 0.3);
    border-radius: 50%;
}

.club-cluster-icon div {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(25, 118, 210, 0.75);

    color: white;
    font-weight: bold;
    font-family: inherit;
}

.club-cluster-icon-small div {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.club-cluster-icon-medium div {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.club-cluster-icon-large div {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

/* ===================== Filtres de la carte (voir « Filtres de la carte » dans script.js) =====================
   Les pastilles qui ouvrent le panneau sont sur la page carte (style-carte.css). */
/* Panneau : menu déroulant sous sa pastille (ordinateur), ou panneau montant du bas (mobile). */
#filtres-panneau {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    color: #1D2619;
}
#filtres-panneau[hidden] { display: none; }
#filtres-panneau.deroulant {
    position: absolute;
    right: 10px;
    z-index: 1001;
    width: 420px;
    max-width: calc(100% - 20px);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
#filtres-panneau.feuille {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1450;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2);
}
#filtres-voile { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, 0.35); }
#filtres-voile[hidden] { display: none; }

.filtres-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 6px 20px; }
#filtres-panneau.deroulant .filtres-tete { display: none; }
.filtres-tete h2 { margin: 0; font-size: 18px; color: #1D2619; }
.filtres-fermer {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: #f2f2f2; color: #1D2619; font-size: 18px; cursor: pointer;
}
.filtres-corps {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 6px 20px 14px;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}
#filtres-panneau.deroulant .filtres-corps { gap: 14px; padding: 16px 18px 12px; }
.filtres-groupe { display: flex; flex-direction: column; gap: 8px; }
#filtres-panneau .criteres-titre {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}
.filtres-liste { display: flex; flex-wrap: wrap; gap: 8px; }
#filtres-panneau.deroulant .filtres-liste { gap: 6px; }
.filtre-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    background: #fff;
    color: #1D2619;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.2;
    cursor: pointer;
}
#filtres-panneau.deroulant .filtre-pastille { padding: 6px 11px; font-size: 13px; }
.filtre-pastille svg { width: 16px; height: 16px; flex: none; color: #3d7a2a; }
.filtre-nombre { color: #888; font-size: 12.5px; }
.filtre-nombre:empty { display: none; }
.filtre-pastille[aria-pressed="true"] { background: #74C15A; border-color: #74C15A; color: #fff; }
.filtre-pastille[aria-pressed="true"] svg { color: #fff; }
.filtre-pastille:disabled { opacity: 0.45; cursor: default; }
.filtre-pastille:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }

.filtres-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
}
#filtres-panneau.deroulant .filtres-pied { padding: 12px 18px; font-size: 14px; }
.filtres-pied .filtres-effacer {
    border: 0; background: none; padding: 8px 4px;
    color: #3d7a2a; font: inherit; font-size: 14px; font-weight: bold; cursor: pointer;
}
.filtres-pied .filtres-effacer:disabled { color: #bbb; cursor: default; }
.filtres-voir {
    flex: 1;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #74C15A;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

/* Bouton d'aide (i) cliquable, dans la fiche d'un club */
.clubs-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #74C15A;
    cursor: pointer;
    flex-shrink: 0;
}

.clubs-help-trigger:hover {
    color: #5a9945;
}

.clubs-help-trigger svg {
    width: 15px;
    height: 15px;
}

/* Bulle d'aide "Clubs affiliés" (composant unique, repositionné/rempli dynamiquement — voir
   basculerBulleAideClubs dans script.js). z-index sous les panneaux menu/info du site (1100+),
   mais au-dessus des contrôles Leaflet (le sélecteur de couches est à 1000 par défaut). */
.clubs-help-popover {
    display: none;
    position: fixed;
    width: 260px;
    max-width: calc(100vw - 16px);

    background: white;
    color: #1D2619;
    font-size: 13px;
    line-height: 1.5;

    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);

    z-index: 1080;
}

.clubs-help-popover a {
    color: #74C15A;
    font-weight: 600;
}

.clubs-help-popover.open {
    display: block;
}

/* ===================== Menu mobile ===================== */
/* Plein écran sur fond blanc. Son contenu est construit par construireMenu() dans script.js : les
   pages n'ont qu'un <nav id="side-menu"> à remplir. Il s'ouvre en cercle depuis le bouton burger,
   dont le script pose la position (--menu-x, --menu-y) à chaque ouverture, puis les éléments
   arrivent l'un après l'autre (--delai, posé dans le HTML construit). */
#side-menu {
    --menu-x: calc(100% - 30px);
    --menu-y: 40px;
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow: hidden;
    background: #fff;
    color: #1d2619;
    visibility: hidden;
    clip-path: circle(0 at var(--menu-x) var(--menu-y));
    transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.45s;
}

#side-menu.open {
    visibility: visible;
    clip-path: circle(150vmax at var(--menu-x) var(--menu-y));
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

/* Le menu n'existe qu'en mobile : s'il était resté ouvert, l'agrandissement de la fenêtre le
   referme visuellement (le bouton burger disparaît au même seuil). */
@media (min-width: 1025px) {
    #side-menu {
        display: none;
    }
}

/* Fond sombre de l'ancien menu latéral : le menu plein écran n'en a plus besoin, mais l'élément
   est encore dans le HTML des pages. Masqué pour qu'il ne prenne pas de place dans l'en-tête. */
#menu-overlay {
    display: none;
}

/* Page bloquée derrière le menu ouvert */
html.menu-ouvert,
html.menu-ouvert body {
    overflow: hidden;
}

/* Boule en filigrane, posée sur le menu lui-même (qui ne défile pas) pour ne pas allonger la
   zone qui défile. */
.menu-filigrane {
    position: absolute;
    right: -90px;
    bottom: -70px;
    width: 300px;
    height: 300px;
    opacity: 0.08;
    transform: rotate(-18deg);
    pointer-events: none;
}

/* Zone qui défile si l'écran est trop bas (petit téléphone, téléphone couché) */
.menu-defilement {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    /* Haut et droite : la croix tombe pile sur le burger de la bannière (centre à 34px du haut,
       28px du bord droit). */
    padding: 12px 6px calc(26px + env(safe-area-inset-bottom)) 20px;
    overflow-y: auto;
}

.menu-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

/* Calé sur la boule de 34px de la bannière (.logo en mobile) pour que les deux se superposent :
   dans le logo complet, la boule fait 117,88 des 137 unités de haut, d'où 34 × 137 / 117,88 =
   39,5px ; elle commence à 2px du bord gauche du logo, d'où le retrait de -7px qui la pose à 15px
   du bord de l'écran, comme dans la bannière. La boule est un peu au-dessus du milieu du logo
   (65,2 sur 137 unités) : la marge du haut la redescend de 1px, sur celle de la bannière. */
.menu-logo {
    display: block;
    height: 39.5px;
    width: auto;
    margin-top: 1.9px;
    margin-left: -7px;
}

.menu-fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: #1d2619;
    cursor: pointer;
}

.menu-fermer svg {
    width: 26px;
    height: 26px;
}

.menu-section {
    max-width: 520px;
    margin-top: 36px;
    padding-right: 14px;
}

.menu-entete + .menu-section,
.menu-installer[hidden] + .menu-section {
    margin-top: 40px;
}

/* Ligne du compte, tout en haut du menu (maquettes/mon-compte/, écrans 6 et 7) : pastille avec
   l'initiale (connecté) ou picto personne, nom ou « Se connecter », flèche. */
.menu-compte {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin-top: 22px;
    padding: 4px 14px 20px 0;
    border-bottom: 1px solid #E2E6DE;
    text-decoration: none;
    color: #1D2619;
}

.menu-compte-pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #74C15A;
    box-shadow: 0 0 0 4px #E7F4E1;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.menu-compte-pastille.vide {
    background: #E7F4E1;
    box-shadow: none;
    color: #3D7A2A;
}

.menu-compte-pastille svg {
    width: 22px;
    height: 22px;
}

.menu-compte-texte {
    flex: 1;
    min-width: 0;
}

.menu-compte-texte b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Manrope', Arial, sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.menu-compte-texte span {
    font-size: 14px;
    color: #56604F;
}

.menu-compte-fleche {
    display: flex;
    color: #3D7A2A;
}

.menu-compte-fleche svg {
    width: 20px;
    height: 20px;
}

.menu-compte-zone + .menu-installer {
    margin-top: 22px;
}

/* « Installer l'application » : grand bouton sous l'en-tête, sombre comme le pied de page, avec
   le téléphone dans le vert du site. La marche à suivre s'affiche dessous quand le navigateur n'a
   pas de fenêtre d'installation (Safari sur iPhone/iPad, Firefox). */
.menu-installer {
    max-width: 520px;
    margin-top: 28px;
    padding-right: 14px;
}

.menu-installer[hidden],
.menu-installer-aide[hidden] { display: none; }

.menu-installer-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 20px;
    border: none;
    border-radius: 23px;
    background: #1d2619;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.menu-installer-bouton:hover {
    background: #2c3a26;
}

.menu-installer-bouton svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #74C15A;
}

.menu-installer-aide {
    margin: 12px 4px 0;
    font-size: 14px;
    line-height: 1.45;
    color: #56604f;
    text-align: center;
}

.menu-installer + .menu-section {
    margin-top: 32px;
}

.menu-titre {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #56604f;
}

/* Explorer : régions en pastilles */
.menu-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-pastilles a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d9ded5;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #1d2619;
    text-decoration: none;
}

.menu-pastilles a:hover,
.menu-pastilles a[aria-current="page"] {
    border-color: #74C15A;
    color: #3d7a2a;
}

/* Le site : pages en grand, une flèche à droite */
.menu-section-liens .menu-titre {
    margin-bottom: 2px;
}

.menu-liens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-liens li + li {
    border-top: 1px solid #e6eae2;
}

.menu-liens a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1d2619;
    text-decoration: none;
}

.menu-liens a:hover,
.menu-liens a[aria-current="page"] {
    color: #3d7a2a;
}

.menu-liens svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #3d7a2a;
}

/* Langues, en bas de l'écran */
.menu-langues {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: auto;
    padding: 28px 14px 0 0;
}

.menu-langues .menu-titre {
    margin: 0;
}

.menu-langues-liste {
    display: flex;
    gap: 6px;
}

.menu-langues-liste a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid #d9ded5;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 700;
    color: #3b4537;
    text-decoration: none;
}

.menu-langues-liste a:hover {
    border-color: #74C15A;
}

.menu-langues-liste a[aria-current="true"] {
    border-color: #74C15A;
    background: #74C15A;
    color: #fff;
}

/* Arrivée échelonnée des éléments à l'ouverture ; à la fermeture, ils partent tous ensemble */
#side-menu .menu-apparait {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#side-menu.open .menu-apparait {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease var(--delai, 0s), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delai, 0s);
}

@media (prefers-reduced-motion: reduce) {
    #side-menu,
    #side-menu.open,
    #side-menu .menu-apparait,
    #side-menu.open .menu-apparait {
        transition: none;
    }
}

/* ===================== Pied de page ===================== */
/* Contenu construit par construirePied() dans script.js ; les pages n'ont qu'un
   <footer class="pied"></footer> vide. Fond sombre : le logo, vert et blanc, est fait pour ça. */

.pied {
    --pied-fond: #1D2619;
    --pied-texte: #e9ede6;
    --pied-discret: #9ba696;
    --pied-ligne: rgba(255, 255, 255, 0.09);

    position: relative;
    overflow: hidden;
    background: var(--pied-fond);
    color: var(--pied-texte);
    font-size: 14px;
    line-height: 1.5;
}

/* Ligne de jeu : trait pointillé vert en haut du pied de page */
.pied::before {
    content: "";
    display: block;
    height: 4px;
    background: repeating-linear-gradient(90deg, #74C15A 0 14px, transparent 14px 24px);
    opacity: 0.55;
}

/* Grande boule du logo en filigrane, à droite */
.pied-filigrane {
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 380px;
    height: 380px;
    opacity: 0.05;
    /* Légèrement inclinée, comme dans la maquette du menu mobile : on voit davantage la boule
       que le creux réservé au cochonnet. */
    transform: rotate(-18deg);
    pointer-events: none;
}

.pied-haut {
    position: relative;
    display: grid;
    /* Marque (et partage), puis Explorer, Jouer, Le site */
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    /* 1180 - 2 x 40 de marge intérieure = 1100px de contenu, la largeur des sections de
       l'accueil et des pages province (.provinces-container, .province-bande-interieur) */
    max-width: 1180px;
    margin: 0 auto;
    padding: 44px 40px 34px;
    box-sizing: border-box;
}

.pied-logo-lien { display: inline-block; }

.pied-logo {
    display: block;
    height: 30px;
    width: auto;
}

.pied-accroche {
    margin: 14px 0 22px;
    max-width: 300px;
    color: var(--pied-discret);
}

/* Chiffres clés */
.pied-chiffres {
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied-chiffres strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    color: #fff;
}

.pied-chiffres span {
    font-size: 12.5px;
    color: var(--pied-discret);
}

/* Date de mise à jour, précédée d'un point vert qui pulse doucement */
.pied-maj {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--pied-discret);
}

.pied-maj[hidden] { display: none; }

.pied-maj::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #74C15A;
    animation: pied-pouls 2.4s infinite;
}

@keyframes pied-pouls {
    0%   { box-shadow: 0 0 0 0 rgba(116, 193, 90, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(116, 193, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(116, 193, 90, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pied-maj::before { animation: none; }
}

/* Colonnes de liens */
.pied-titre {
    margin: 4px 0 14px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #74C15A;
}

.pied-liens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied-liens li + li { margin-top: 9px; }

.pied a {
    color: var(--pied-texte);
    text-decoration: none;
    transition: color 0.15s;
}

.pied a:hover { color: #74C15A; }

.pied .pied-lien-accent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #74C15A;
}

.pied-lien-accent:hover { text-decoration: underline; }

.pied-lien-accent svg {
    width: 14px;
    height: 14px;
}

/* « Installer l'application » : sous les chiffres, même bouton que « Copier le lien ». La marche
   à suivre s'affiche dessous quand le navigateur n'a pas de fenêtre d'installation (Safari sur
   iPhone/iPad, Firefox). */
.pied-installer {
    margin-top: 18px;
}

.pied-installer[hidden],
.pied-installer-aide[hidden] { display: none; }

.pied-installer-aide {
    max-width: 300px;
    margin: 10px 0 0;
    color: var(--pied-discret);
    font-size: 13px;
    line-height: 1.45;
}

/* Partage, sous la marque */
.pied-col-partage {
    margin-top: 26px;
}

.pied-partage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pied .pied-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--pied-ligne);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pied-texte);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.pied .pied-bouton:hover,
.pied .pied-copie-faite {
    background: #74C15A;
    border-color: #74C15A;
    color: #fff;
}

.pied .pied-bouton:hover { transform: translateY(-2px); }

.pied-bouton svg {
    width: 18px;
    height: 18px;
}

.pied-bouton .pied-icone-x {
    width: 15px;
    height: 15px;
}

/* Boutons avec texte : « Copier le lien » et « Installer l'application » */
.pied .pied-bouton-texte {
    width: auto;
    padding: 0 14px;
    gap: 8px;
    font: inherit;
    font-size: 13px;
}

.pied-bouton-texte svg {
    width: 16px;
    height: 16px;
}

/* Bandeau du bas : langues, crédits, copyright */
.pied-bas {
    position: relative;
    border-top: 1px solid var(--pied-ligne);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 40px;
    box-sizing: border-box;
    font-size: 12.5px;
    color: var(--pied-discret);
}

.pied-langues {
    display: flex;
    gap: 4px;
}

.pied .pied-langues a {
    padding: 4px 9px;
    border-radius: 6px;
    color: var(--pied-discret);
    font-weight: bold;
    transition: color 0.15s, background 0.15s;
}

.pied .pied-langues a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.pied .pied-langues a[aria-current] {
    color: #fff;
    background: rgba(116, 193, 90, 0.22);
}

.pied-credits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pied-credits img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: -3px;
    margin-right: 4px;
}

.pied-droite {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pied .pied-admin {
    display: inline-flex;
    color: var(--pied-discret);
    opacity: 0.5;
}

.pied .pied-admin:hover {
    opacity: 1;
    color: #74C15A;
}

.pied-admin svg {
    width: 14px;
    height: 14px;
}

/* Tablette : marque (et partage) sur toute la largeur, les colonnes de liens deux par deux */
@media (max-width: 900px) {
    .pied-haut {
        grid-template-columns: 1fr 1fr;
        gap: 34px 28px;
    }

    .pied-marque {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .pied-haut {
        padding: 32px 20px 26px;
        gap: 28px 16px;
    }

    .pied-filigrane {
        width: 260px;
        height: 260px;
        right: -80px;
        bottom: auto;
        top: -60px;
    }

    .pied-chiffres { gap: 20px; }

    .pied-chiffres strong { font-size: 21px; }

    /* Cibles tactiles confortables */
    .pied .pied-bouton {
        width: 44px;
        height: 44px;
    }

    .pied .pied-bouton-texte {
        width: auto;
    }

    .pied-bas {
        flex-direction: column;
        text-align: center;
        padding: 18px 20px 22px;
    }

    .pied-credits { justify-content: center; }
}

/* ===================== Formulaire "Ajouter une photo" (Forminit) ===================== */
.add-photo-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-photo-field-label {
    font-size: 12.5px;
    font-weight: bold;
    color: #1D2619;
    margin-bottom: -4px;
}
/* Pseudo (photos) ou adresse (signalements) du compte connecté, à la place du champ libre */
.add-photo-signature {
    margin: 0;
    font-size: 13px;
    color: #56604F;
}
.add-photo-signature strong { color: #1D2619; }

.add-photo-file-input,
.add-photo-text-input {
    font-size: 13px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* Bouton "Ajouter des photos" qui remplace visuellement le champ natif (voir script.js,
   preparerChoixPhotos). Le champ natif reste dessous, invisible, pour que le navigateur y
   accroche son message "veuillez sélectionner un fichier". */
.add-photo-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.add-photo-pick-btn,
.add-photo-pick-option {
    width: 100%;
    padding: 10px;
    border: 1.5px solid #74C15A;
    border-radius: 6px;
    background: #fff;
    color: #3D7A2A;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.add-photo-pick-btn:hover,
.add-photo-pick-option:hover {
    background: #f1f8ee;
}

.add-photo-pick-menu {
    display: flex;
    gap: 6px;
}

.add-photo-pick-menu[hidden] { display: none; }

.add-photo-pick-option {
    font-weight: normal;
    font-size: 13px;
    background: #f7fbf5;
}

.add-photo-pick-summary {
    font-size: 12.5px;
    color: #1D2619;
}

.add-photo-pick-clear {
    background: none;
    border: none;
    padding: 0;
    color: #c62828;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}

.add-photo-file-input-cache {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.add-photo-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #56604F;
    line-height: 1.4;
    cursor: pointer;
}

.add-photo-checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.add-photo-submit-btn {
    background: #74C15A;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 4px;
}

.add-photo-submit-btn:hover {
    background: #56A03D;
}

.add-photo-submit-btn:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.add-photo-status {
    font-size: 12.5px;
    text-align: center;
    margin: 4px 0 0;
    min-height: 16px;
}

.add-photo-status.success { color: #3D7A2A; font-weight: bold; }
.add-photo-status.error { color: #c62828; font-weight: bold; }
.add-photo-file-hint {
    font-size: 11px;
    color: #999;
    margin-top: -6px;
}
/* Astuce "format paysage" en tête du formulaire d'ajout de photo. Encadré discret : fond vert
   très pâle + filet vertical à gauche, pour se distinguer des champs sans les concurrencer. */
.add-photo-tip {
    font-size: 12px;
    line-height: 1.45;
    color: #56604F;
    background: #f4f9f1;
    border-left: 3px solid #74C15A;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
}

.add-photo-tip a {
    color: #74C15A;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.add-photo-tip a:hover {
    text-decoration: underline;
}
.add-photo-status.sending {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #56604F;
}

.add-photo-status.sending::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid #ddd;
    border-top-color: #74C15A;
    border-radius: 50%;
    animation: add-photo-spin 0.7s linear infinite;
}

@keyframes add-photo-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================================
   En-tête posé sur une bannière photo
   =============================================================================================
   Ces règles étaient dupliquées à l'identique dans style-accueil-provinces.css,
   style-province.css et style-comment-jouer.css : toutes les pages du site ont le même en-tête
   sur une bannière, seule l'image change. Les regrouper ici, dans la feuille chargée partout,
   supprime la triple maintenance — une correction sur la nav se faisait jusqu'ici en trois
   exemplaires, avec le risque d'en oublier un.

   Les feuilles spécifiques restent chargées APRÈS celle-ci et peuvent donc toujours surcharger
   ce qui suit : c'est le cas du dégradé .hero-banner::before, différent selon que le titre est
   en haut (accueil) ou en bas (province, comment-jouer).
============================================================================================= */

.hero-banner .hero-headline {
    color: #fff;
}

.hero-banner .info-nav-trigger,
.hero-banner .lang-link,
.hero-banner .game-nav-link {
    color: #fff;
}

.hero-banner .info-nav-trigger:hover,
.hero-banner .game-nav-link:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.hero-banner #game-nav-inline {
    border-right: 1px solid rgba(255,255,255,0.35);
}

.hero-banner .lang-link {
    color: rgba(255,255,255,0.75);
}

.hero-banner .lang-link:hover {
    color: #fff;
}

.hero-banner .lang-link.active {
    color: #fff;
    background: rgba(255,255,255,0.18);
}

.hero-banner #lang-switcher-inline {
    border-left: 1px solid rgba(255,255,255,0.35);
}

.hero-banner .lang-toggle {
    color: #fff;
}

.hero-banner .lang-toggle:hover,
.hero-banner #lang-switcher-inline.ouvert .lang-toggle {
    background: rgba(255,255,255,0.18);
}

.hero-banner-credit a {
    color: rgba(255,255,255,0.85);
}

/* La photo disparaît en plein écran : le voile n'a plus de raison d'être et assombrirait
   inutilement la barre de contrôles. */
.map-view.fullscreen-active .hero-banner::before {
    display: none;
}

/* Espacement horizontal resserré de 15 % entre les libellés de la nav. La distance entre deux
   libellés voisins vaut : padding droit (14px) + gap (2px) + padding gauche (14px) = 30px dans
   style.css. On la ramène à 25,5px (-15 %) en réduisant les deux composantes d'autant. */
.hero-banner .game-nav-link,
.hero-banner .info-nav-trigger {
    padding-left: 11.9px;
    padding-right: 11.9px;
}

.hero-banner #game-nav-inline,
.hero-banner #desktop-nav {
    gap: 1.7px;
}

/* Trait de séparation retiré entre les liens de jeu et la nav d'information : depuis que
   « À propos » et « FAQ » mènent à de vraies pages comme « Comment jouer » et « Compteur de
   points », les deux groupes sont de même nature et la séparation n'a plus lieu d'être. Le
   trait avant le sélecteur de langue est conservé, lui distingue bien deux choses différentes.
   Les marges et le retrait interne partent avec la bordure, sans quoi l'espace resterait
   asymétrique autour d'un trait devenu invisible. */
.hero-banner #game-nav-inline {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* Hauteur du seul trait restant. Sans ceci, #lang-switcher-inline prendrait la hauteur de son
   contenu (~26px pour un texte de 12px avec 6px de padding), ce qui convient — la règle fige
   simplement cette valeur pour qu'elle ne dépende pas du rendu de la police. */
.hero-banner #lang-switcher-inline {
    height: 26px;
}

/* La section suivante était copiée à l'identique dans style-accueil-provinces.css et
   style-province.css ; regroupée ici pour servir aussi à la page carte. */

/* ===================== Fil d'Ariane région > province dans les popups de terrain ===================== */

.popup-breadcrumb {
    font-size: 11.5px;
    color: #888;
    margin-bottom: 4px;
}

.popup-breadcrumb a {
    color: #74C15A;
    font-weight: 600;
    text-decoration: none;
}

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

/* Liens "Afficher l'itinéraire" / "Partager ce terrain" dans le popup — même traitement que le
   fil d'Ariane ci-dessus (vert de la charte, pas de soulignement permanent), plutôt que le bleu
   souligné par défaut hérité du navigateur. .popup-link-text force un underline permanent dans
   style.css (non modifiable) : on le neutralise ici et on ne le réactive qu'au survol. */
.popup-action-link {
    color: #74C15A;
}

.popup-action-link .popup-link-text {
    text-decoration: none;
}

.popup-action-link:hover .popup-link-text {
    text-decoration: underline;
}