/* ==========================================================================================
   style-accueil-provinces.css
   Feuille additive chargée APRÈS /style.css — n'en modifie aucune règle existante.
   Objectif : habiller la page d'accueil (bannière photo, grilles régions et provinces)
   sans toucher au CSS ni au JS qui font déjà tourner le reste du site (recherche,
   géolocalisation, plein écran, langue, footer, panneaux d'info/partage...).

   Stratégie :
   - .header et .controls sont désormais enveloppés dans un nouveau conteneur .hero-banner
     (ajouté uniquement en HTML, aucun de leurs attributs/ID internes n'a changé).
   ========================================================================================== */

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

/* Depuis que la carte a quitté l'accueil (elle est sur /carte.html), la bannière s'agrandit :
   486 px (405 px avant la charte, +20 %). */
.hero-banner {
    position: relative;
    height: 486px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-image: url('/images/banniere-accueil.webp');
    background-size: cover;
    background-position: center 55%;
}

/* Menu des propositions de la recherche ouvert (voir script.js) : il déborde sous la bannière. */
.hero-banner:has(.search-form-ouvert) {
    overflow: visible;
}

/* Voile sombre en dégradé sur le haut de 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 (ciel, trouées entre les arbres). Rendu plus net que le text-shadow, qui
   entourait chaque lettre d'un halo. Plus marqué en haut (marque + menu), s'estompe vers le
   bas de la photo. */
.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.36) 20%,
        rgba(0, 0, 0, 0.18) 50%,
        rgba(0, 0, 0, 0) 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é (même technique que
       style-province.css / style-comment-jouer.css). */
    z-index: -1;
}

/* Aligne le logo/nav du haut sur le même repère vertical que les pages province/région/
   comment-jouer/compteur (top:18px sur leur .header-top-row en position absolute) : ici
   .header-top-row reste dans le flux normal (contrairement aux autres pages), donc on ajuste
   directement le padding-top de .header pour obtenir le même résultat visuel — 18px, au lieu
   des 20px hérités de style.css + 4px auparavant portés par .hero-banner (24px au total). */
.hero-banner .header {
    padding-top: 18px;
}

.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;
}

/* ===================== Barre de contrôles : hauteurs alignées, champ sans bordure ===================== */

/* Dans style.css, ni le bouton "Me localiser" ni le champ de recherche n'ont de hauteur fixe :
   elle découle du padding et de la taille du texte (≈ 38-40px pour le bouton, ≈ 43-44px pour
   le champ avec sa bordure). Même hauteur imposée aux deux ici. Le préfixe .controls fait
   passer ces règles devant celles de style.css (non modifiable). */
.controls #locateBtn {
    height: 42px;
    padding: 0 20px;
    box-sizing: border-box;
}

.controls .search-form input {
    height: 42px;
    padding: 0 16px 0 42px;
    border: none;
}

/* Sans bordure, le focus est signalé par un contour vert de la charte */
.controls .search-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #74C15A;
}

/* ===================== Section "Parcourir par province" ===================== */

#provinces-section {
    background-color: #ffffff;
    padding: 24px 20px 56px;
}

.provinces-container {
    max-width: 1100px;
    margin: 0 auto;
}

.provinces-container h2 {
    margin: 0 0 22px;
    font-size: 26px;
    color: #1D2619;
    text-align: center;
}

.province-tiles-grid {
    display: grid;
    /* 5 colonnes : les 5 provinces flamandes sur la première ligne, les 5 wallonnes sur la
       seconde (ordre du HTML). En 4 colonnes, Luxembourg et Namur restaient seuls en bas. */
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

#regions-section {
    background-color: #ffffff;
    /* Écarts des bandes de l'accueil : 40px entre le bord haut d'une bande et son titre, 56px
       sous son contenu (comme .communes-equipees). Régions et provinces forment une seule bande
       blanche : 16px en bas ici, plus les 24px du haut de #provinces-section, ~40px entre les
       tuiles des régions et le titre suivant. */
    padding: 40px 20px 16px;
}

.regions-tiles-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 780px;
    margin: 0 auto;
}

.province-tile {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    padding-top: 55.56%; /* ratio ~270x150 (1.8:1), à l'essai — remplace le 75% (4:3) précédent */
    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);
}

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

.province-tile-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ===================== Section « Les communes les mieux équipées » ===================== */
/* Écrite par scripts/generer_communes.py : une colonne par région, les cinq communes qui ont le
   plus de terrains, chacune menant à sa page. Fond gris pour se détacher des tuiles au-dessus. */

.communes-equipees {
    background-color: #f7f9f6;
    padding: 40px 20px 56px;
}

.communes-equipees h2 {
    margin-bottom: 6px;
}

.communes-equipees-intro {
    margin: 0 0 28px;
    text-align: center;
    color: #56604F;
    font-size: 15px;
}

.communes-equipees-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.commune-equipee-region {
    padding: 16px 18px 8px;
    border: 1px solid #e2e6de;
    border-radius: 14px;
    background: #fff;
}

.commune-equipee-region h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #1d2619;
}

.commune-equipee-region ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.commune-equipee-region li + li {
    border-top: 1px solid #f0f2ee;
}

.commune-equipee-region a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: #1D2619;
    text-decoration: none;
}

.commune-equipee-region a:hover .commune-equipee-nom {
    color: #3d7a2a;
}

.commune-equipee-rang {
    flex: none;
    width: 18px;
    color: #999;
    font-size: 14px;
}

.commune-equipee-nom {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: bold;
}

.commune-equipee-zone {
    display: block;
    margin-top: 1px;
    color: #888;
    font-size: 12.5px;
    font-weight: normal;
}

.commune-equipee-nb {
    flex: none;
    color: #3d7a2a;
    font-size: 15px;
    font-weight: bold;
}

.commune-equipee-nb span {
    color: #888;
    font-size: 12.5px;
    font-weight: normal;
}

.communes-equipees-tout {
    margin: 22px 0 0;
    text-align: center;
    font-size: 15px;
}

.communes-equipees-tout a {
    color: #3d7a2a;
    font-weight: bold;
    text-decoration: none;
}

.communes-equipees-tout a:hover {
    text-decoration: underline;
}

@media (max-width: 800px) {
    .communes-equipees-grille {
        grid-template-columns: 1fr;
    }
}

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

/* Ordinateur : dans la bannière de 486 px, le titre et la recherche descendent vers le milieu
   de la photo, en plus grand (la recherche est la porte d'entrée vers la carte). */
@media (min-width: 1025px) {
    .hero-banner .hero-headline {
        font-size: 44px;
        margin-top: 90px;
    }

    .controls {
        margin-top: 18px;
    }

    .controls #locateBtn,
    .controls .search-form input {
        height: 50px;
    }

    .controls .search-form input {
        width: 400px;
        font-size: 16px;
    }
}

@media (max-width: 1024px) {
    .hero-banner {
        height: 324px;
        /* Réserve une bande en bas pour la mention de licence, pour qu'elle ne se retrouve
           jamais superposée au titre/boutons quand leur pile de contenu remplit toute la
           hauteur réduite de la bannière en mobile. */
        padding-bottom: 26px;
    }

    /* Même repère que .hero-banner .header-top-row { top: 14px } sur les autres pages en
       mobile (voir style-province.css) — remplace le 18px desktop ci-dessus. */
    .hero-banner .header {
        padding-top: 14px;
    }
}

/* Sous 800px, 5 colonnes donneraient des tuiles trop étroites : 2 colonnes (5 lignes pleines).
   Limité aux provinces : la grille des régions garde ses 3 colonnes jusqu'à 640px. */
@media (max-width: 800px) {
    #provinces-section .province-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .province-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================== Lien « Signaler un terrain manquant » (bannière) ===================== */
/* Dans le flux, juste sous .controls (qui porte déjà 10px de marge en dessous) : la bannière ayant
   une hauteur fixe (486px, 324px en mobile), le lien occupe l'espace libre sous les boutons sans
   jamais l'agrandir, ni elle ni la page. Quand cet espace manque (boutons repliés sur deux lignes
   sur les plus petits écrans), script.js le masque (classe .hors-cadre) plutôt que de le laisser
   chevaucher le « i » du crédit photo ou être coupé — voir « Signalements » dans script.js.
   Même police que « Me localiser », en 14px, graisse normale, blanc souligné. */
.hero-signalement {
    /* Placé entre le bas des boutons et le bord de la bannière, plus près du bord : le bloc occupe
       tout l'espace restant (flex: 1) et le partage en 3/4 au-dessus du lien, 1/4 en dessous
       (deux cales, ::before et ::after). L'écart avec le bord est ainsi la moitié de celui qu'on
       aurait en centrant. La marge négative du haut reprend les 10px de marge sous .controls,
       pour que l'espace soit compté à partir du bas des boutons. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -10px 0 0;
    padding: 0 15px;
    text-align: center;
    line-height: 1.25;
}

.hero-signalement::before,
.hero-signalement::after {
    content: "";
}

.hero-signalement::before {
    flex: 3 1 0;
}

.hero-signalement::after {
    flex: 1 1 0;
}

@media (max-width: 1024px) {
    /* En mobile, la bannière réserve 26px de padding en bas (voir plus haut) : la marge négative
       du bas les reprend, pour que le milieu soit bien pris jusqu'au bord de la bannière. La
       hauteur totale ne change pas. */
    .hero-signalement {
        margin-bottom: -26px;
    }
}

.hero-signalement a {
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Même ombre légère que la mention de licence : le voile sombre de la bannière s'efface
       vers le bas, justement là où se trouve ce lien. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-signalement a:hover {
    text-decoration-thickness: 2px;
}

.hero-signalement a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 3px;
}

.hero-signalement.hors-cadre {
    visibility: hidden;
}