/* ==========================================================================================
   style-province.css
   Feuille additive chargée APRÈS /style.css — n'en modifie aucune règle existante.
   Pages province et région uniquement (templates/province_template.html et
   templates/region_template.html).
   ========================================================================================== */

/* ===================== Bannière photo (.hero-banner) ===================== */

.hero-banner {
    position: relative;
    height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center 55%;
}

/* Voile sombre en dégradé sur la bannière : remplace les ombres portées individuelles
   (retirées ci-dessous) pour assurer la lisibilité du texte blanc sur les zones claires de la
   photo. Rendu plus net que le text-shadow, qui entourait chaque lettre d'un halo.
   Contrairement à la page d'accueil (voile décroissant du haut vers le bas), le dégradé est ici
   marqué aux DEUX extrémités : le logo/nav est ancré en haut, tandis que le fil d'Ariane et le
   titre restent en bas (justify-content: flex-end). Le milieu de la photo reste quasi net. */
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 16%,
        rgba(0, 0, 0, 0.10) 32%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
    /* z-index négatif : le voile se glisse entre l'image de fond de .hero-banner et son
       contenu, sans qu'aucun enfant n'ait besoin d'être positionné. Indispensable ici :
       rendre .header positionné en ferait le nouveau référent de .header-top-row
       (position:absolute), qui décrocherait du haut de la bannière pour suivre .header,
       lui-même aligné en bas (justify-content: flex-end). */
    z-index: -1;
}

/* Logo + nav du haut détachés du flux, toujours ancrés en haut de la bannière, indépendamment
   de la position du fil d'Ariane + titre (qui eux restent en bas). */
.hero-banner .header-top-row {
    position: absolute;
    top: 18px;
    left: 30px;
    right: 30px;
    z-index: 2;
}

.hero-banner .hero-headline {
    text-align: left;
    font-size: 44px;
    max-width: 700px;
    margin: 14px 0 0;
}

.hero-banner-credit {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: 10.5px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    z-index: 2;
}

.province-breadcrumb {
    margin: 0 0 4px;
    font-size: 13px;
    display: flex;
    gap: 6px;
    align-items: center;
    color: #fff;
}

.province-breadcrumb a {
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
}

.province-breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.province-breadcrumb .sep {
    opacity: 0.6;
}

.province-breadcrumb .current {
    opacity: 1;
    font-weight: bold;
}

/* ===================== Bandes pleine largeur (modèle de l'accueil) ===================== */

/* Bande grise sous la bannière, même gris que le carrousel de l'accueil
   (.beaux-terrains-accueil) : le carrousel « Les plus beaux terrains » des pages région et de
   Bruxelles, sur 1100px, la largeur des sections de l'accueil. Les autres pages province n'ont
   pas de carrousel, donc pas de bande grise. */
/* En bas, 8px plus les 16px du défilement du carrousel : ~24px de gris sous les tuiles, comme
   sur l'accueil. */
.province-bande-carte {
    background: #f7f9f6;
    padding: 32px 16px 8px;
}

.province-bande-carte > .beaux-terrains-region {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Bande blanche : texte, liste des communes, rebond. */
.province-bande-texte {
    background: #fff;
    padding: 32px 20px 60px;
}

.province-bande-interieur {
    max-width: 1100px;
    margin: 0 auto;
}

/* Titres de section à la taille de l'accueil (.provinces-container h2) */
.province-communes-section h2,
.other-provinces-section h2 {
    font-size: 26px;
    color: #1D2619;
    margin: 0 0 24px;
}

/* ===================== Contenu ===================== */

.province-intro {
    font-size: 16px;
    line-height: 1.65;
    color: #1D2619;
    margin: 0 0 20px;
}

/* Bouton vers la page carte, cadrée sur la zone de la page (la carte n'est plus sur la page) */
.province-voir-carte {
    margin: 0 0 48px;
}

.bouton-voir-carte {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #1d2619;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.bouton-voir-carte:hover {
    background: #3d7a2a;
}

.bouton-voir-carte svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.commune-search {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #e2e6de;
    border-radius: 10px;
    margin-bottom: 20px;
    font-family: inherit;
    display: block;
}

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

.commune-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 4px;
}

.commune-item {
    border-bottom: 1px solid #f0f2ee;
}

.commune-item a {
    display: block;
    padding: 11px 2px;
    text-decoration: none;
    font-size: 14.5px;
    color: #1D2619;
    font-weight: 600;
    transition: color 0.15s ease;
}

.commune-item a:hover {
    color: #74C15A;
}

.commune-count {
    font-weight: 400;
    color: #999;
}

/* Commune sans terrain : ligne affichée seulement par la recherche, avec le terrain le plus
   proche (voir construire_liste_communes dans generate_provinces.py) */
.commune-vide p {
    margin: 0;
    padding: 11px 2px;
    font-size: 14px;
    line-height: 1.5;
    color: #56604F;
}

.commune-vide a {
    color: #3d7a2a;
    font-weight: 600;
}

/* Liste repliée sur ses 10 premières communes (voir le script de province_template.html) */
.commune-list.repliee .commune-repliee {
    display: none;
}

.commune-voir-tout {
    display: block;
    margin: 18px auto 0;
    padding: 9px 20px;
    background: #f7f9f6;
    border: 1px solid #e2e6de;
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #1D2619;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.commune-voir-tout:hover {
    background: #74C15A;
    border-color: #74C15A;
    color: #fff;
}

.commune-voir-tout[hidden] {
    display: none;
}

.commune-no-result {
    text-align: center;
    color: #999;
    font-size: 13px;
    font-style: italic;
    padding: 20px 0;
    display: none;
    grid-column: 1 / -1;
}

/* ===================== Rebond : autres provinces, régions (tuiles photo) ===================== */

.province-communes-section + .other-provinces-section {
    margin-top: 56px;
}

/* Mêmes tuiles que « Parcourir par province » sur l'accueil (style-accueil-provinces.css, non
   chargée sur ces pages), avec en plus le nombre de terrains. Pages région : les provinces de la
   région ; pages province : leur région puis les autres provinces de celle-ci ; Bruxelles : les
   deux régions (.tuiles-deux). */
.tuiles-provinces {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.tuile-province {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    padding-top: 75%;
    background-size: cover;
    background-position: center;
    background-color: #dfe8da;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 10px rgba(30, 50, 20, 0.06);
}

.tuile-province:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(30, 50, 20, 0.14);
}

/* Dégradé sombre en bas de tuile, pour que le texte reste lisible sur toutes les photos */
.tuile-province::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}

.tuile-province-nom,
.tuile-province-nombre {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.tuile-province-nom {
    bottom: 28px;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
}

.tuile-province-nombre {
    bottom: 10px;
    font-size: 12.5px;
    opacity: 0.9;
}

/* Deux tuiles seulement (Bruxelles) : moitié de largeur chacune, moins hautes pour ne pas
   occuper tout l'écran. */
.tuiles-provinces.tuiles-deux {
    grid-template-columns: repeat(2, 1fr);
}

.tuiles-deux .tuile-province {
    padding-top: 36%;
}

/* ===================== Responsive (même palier que style.css : 1024px) ===================== */

@media (max-width: 1024px) {
    .hero-banner {
        height: 230px;
        /* Réserve une bande en bas pour la mention de licence, pour qu'elle ne se retrouve
           jamais superposée au titre quand celui-ci passe sur 2 lignes en mobile. */
        padding-bottom: 26px;
    }

    /* Sans ça, notre H1 (44px, plus spécifique) écrase la réduction mobile prévue par
       style.css pour .hero-headline (44px -> 30px, échelle de la charte). */
    .hero-banner .hero-headline {
        font-size: 30px;
        max-width: 100%;
    }

    /* Même chose pour le logo/menu du haut : détachés du flux normal (position absolute) pour
       rester ancrés en haut de la bannière, ils n'héritent donc pas de la réduction mobile de
       padding de .header prévue par style.css (30px -> 15px) — on la reproduit ici à l'identique
       pour rester cohérent avec la page d'accueil, qui elle bénéficie de cette réduction
       automatiquement (son .header-top-row est resté en flux normal). */
    .hero-banner .header-top-row {
        top: 14px;
        left: 15px;
        right: 15px;
    }


    .province-bande-carte {
        padding: 16px 16px 8px;
    }

    .province-bande-texte {
        padding: 28px 16px 50px;
    }

    .commune-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* Sous 800px : 2 colonnes, la première tuile (province qui compte le plus de terrains, ou la
   région sur les pages province) sur toute la largeur — 5 tuiles, sans en laisser une seule sur
   la dernière ligne. */
@media (max-width: 800px) {
    .tuiles-provinces {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tuiles-provinces .tuile-province:first-child {
        grid-column: 1 / -1;
        padding-top: 45%;
    }

    .tuiles-deux .tuile-province:first-child {
        grid-column: auto;
    }

    .tuiles-deux .tuile-province,
    .tuiles-deux .tuile-province:first-child {
        padding-top: 75%;
    }
}