/* Pages commune (commune/<slug>.html, écrites par scripts/generer_communes.py).
   Chargée après style-comment-jouer.css (squelette de la page) et style-province.css (tuiles
   province/région) : n'est chargée que sur ces pages, ses règles ne touchent rien d'autre. */

/* Le squelette garde le texte sur 720 px ; les cartes des terrains ont besoin de la largeur des
   pages province. */
.rules-content {
    max-width: 1100px;
}

.commune-intro {
    font-size: 16px;
    line-height: 1.7;
    color: #1D2619;
    margin: 8px 0 40px;
}

.commune-section { margin: 0 0 48px; }
.commune-section h2 { font-size: 26px; color: #1D2619; margin: 0 0 20px; }
/* scroll-margin-top : cible des propositions de la recherche (#bioul), un peu d'air au-dessus */
.commune-localite { font-size: 19px; color: #3d7a2a; margin: 28px 0 14px; scroll-margin-top: 16px; }
.commune-localite:first-of-type { margin-top: 0; }

/* ----- Cartes des lieux : toute la carte mène à la fiche sur la carte de l'accueil ----- */
.commune-terrains {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.commune-terrain {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e6de;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.commune-terrain:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(30, 50, 20, 0.12);
}

.commune-terrain-photo { position: relative; display: block; }
.commune-terrain-photo img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f0f2ee;
}
.commune-terrain-credit {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
}

.commune-terrain-texte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 14px 16px 16px;
}
.commune-terrain-nom { margin: 0; font-size: 17px; color: #1D2619; }
.commune-terrain-details { color: #56604F; font-size: 14px; }

/* Note des joueurs, ajoutée par /commune.js quand elle arrive du Worker */
.commune-terrain-note { color: #56604F; font-size: 14px; }
.commune-terrain-note .note-etoile { font-size: 15px; vertical-align: -1px; }

.commune-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.commune-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    font-size: 13px;
    color: #1D2619;
    background: #fff;
}
.commune-pastille svg { width: 15px; height: 15px; color: #3d7a2a; }

.commune-terrain-lien {
    margin-top: auto;
    padding-top: 4px;
    color: #3d7a2a;
    font-weight: 600;
    font-size: 14.5px;
}
.commune-terrain:hover .commune-terrain-lien { color: #74C15A; }

/* ----- Clubs ----- */
.commune-clubs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.commune-club {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #e2e6de;
    border-radius: 14px;
    color: #1D2619;
    line-height: 1.5;
}
.commune-club a { color: inherit; }
.commune-club-icone svg { width: 28px; height: 28px; color: #3d7a2a; }
.commune-club-federation { color: #888; font-size: 14px; }

/* ----- Communes voisines ----- */
.commune-voisines { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
.commune-voisines a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid #f0f2ee;
    text-decoration: none;
    color: #1D2619;
    font-weight: 600;
    font-size: 14.5px;
}
.commune-voisines a span { font-weight: 400; color: #999; white-space: nowrap; }
.commune-voisines a:hover { color: #74C15A; }

@media (max-width: 700px) {
    .commune-terrains,
    .commune-voisines { grid-template-columns: 1fr; }
    .commune-section h2 { font-size: 22px; }
}

/* ----- Page « Toutes les communes » (communes.html, écrite par generer_communes.py) ----- */
.communes-index-filtre { margin: 0 0 28px; }
.communes-index-filtre input {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
}
.communes-index-filtre input:focus { outline: none; border-color: #74C15A; box-shadow: 0 0 0 2px rgba(116, 193, 90, 0.25); }
.communes-index-aucune { color: #56604F; }

.communes-index-region { margin: 0 0 40px; }
.communes-index-region h2 { font-size: 26px; color: #1D2619; margin: 0 0 8px; }
.communes-index-province h3 { font-size: 17px; margin: 22px 0 8px; }
.communes-index-province h3 a { color: #3d7a2a; text-decoration: none; }
.communes-index-province h3 a:hover { text-decoration: underline; }

/* Trois colonnes sur ordinateur, comme une table des matières */
.communes-index-liste {
    columns: 3 240px;
    column-gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.communes-index-liste li {
    break-inside: avoid;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 2px;
    border-bottom: 1px solid #f0f2ee;
    font-size: 15px;
}
.communes-index-liste a { color: #1D2619; font-weight: 600; text-decoration: none; }
.communes-index-liste a:hover { color: #74C15A; }
.communes-index-liste span { color: #999; white-space: nowrap; font-size: 14px; }

/* En-tête sobre (pas de bannière sur cette page) : fil d'Ariane et titre alignés sur la largeur
   de la liste, et non sur la colonne de texte de 720 px des autres pages de contenu. (Les pages
   commune ont une bannière photo ; la page carte n'a ni fil d'Ariane ni titre.) */
.entete-sobre .province-breadcrumb,
.entete-sobre .hero-headline {
    max-width: 1100px;
}