/*
 * Refonte visuelle de la page d'accueil (hero photo, bandeau chiffres clés,
 * "à la une" mis en avant, agenda, CTA sections, réseaux/partenaires en
 * 2 colonnes) — cf. app/Views/home/index.php.
 *
 * Chargé uniquement sur "/" (voir la condition sur $cheminCourant dans
 * app/Views/layouts/main.php) : n'affecte aucune autre page. Pour revenir
 * à l'ancien accueil, il suffit de retirer cette condition/ce <link> — voir
 * docs/homepage-redesign.md pour la procédure complète de retour arrière.
 *
 * Fichier 100% ADDITIF : aucune règle existante d'app.css n'est modifiée
 * ni supprimée ; toutes les classes ci-dessous sont nouvelles.
 *
 * Respecte la charte graphique (docs/charte-graphique.md) : uniquement
 * les tokens --smo-* définis dans app.css, aucune couleur en dur.
 */

/* --- Astuce "plein écran" -------------------------------------------------
 * .hero et .stats-band vivent dans <main class="container"> (max-width
 * 1080px, padding latéral). Cette astuce leur permet de s'étendre bord à
 * bord de la fenêtre sans changer la structure HTML existante.
 * -------------------------------------------------------------------- */
.home-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* --- Hero avec grande photo ------------------------------------------------
 * Reprend la section .hero existante (h1 + p) sans rien casser si les
 * classes/blocs additionnels (.hero-cta, .hero-stats) sont absents.
 *
 * Markup cible :
 * <section class="hero home-bleed hero--photo" style="background-image:url('/assets/img/hero-club.jpg')">
 *     <div class="hero-overlay">
 *         <h1>Stade Montois</h1>
 *         <p>35 sections · 6 300 licenciés</p>
 *         <div class="hero-cta">
 *             <a href="/sections" class="btn-hero btn-hero--primary">Découvrir</a>
 *             <a href="/sections" class="btn-hero btn-hero--outline">Nos sections</a>
 *         </div>
 *     </div>
 * </section>
 * -------------------------------------------------------------------- */
.hero--photo {
    background-color: var(--smo-black);
    background-size: cover;
    background-position: center;
    /* Dégradé de secours tant qu'aucune photo n'est configurée : évite un
       aplat noir plat et reste dans la palette de marque. */
    background-image:
        linear-gradient(160deg, rgba(35, 31, 32, 0.92) 0%, rgba(35, 31, 32, 0.75) 55%, rgba(255, 210, 3, 0.18) 100%);
}

.hero--photo .hero-overlay {
    /* Voile sombre pour garantir la lisibilité du texte sur une vraie
       photo, quelle que soit sa luminosité. */
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.35) 0%, rgba(35, 31, 32, 0.65) 100%);
    padding: 5.5rem 1.25rem 5rem;
    text-align: center;
    color: var(--smo-white);
}

.hero--photo h1 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero--photo p {
    margin: 0.75rem 0 0;
    font-size: 1.15rem;
    color: var(--smo-gray-light);
}

.hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.btn-hero {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--smo-radius-btn);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn-hero--primary {
    background: var(--smo-yellow);
    color: var(--smo-black);
    border-color: var(--smo-yellow);
}
.btn-hero--primary:hover, .btn-hero--primary:focus-visible {
    background: var(--smo-yellow-dark);
    border-color: var(--smo-yellow-dark);
    transform: translateY(-1px);
}

.btn-hero--outline {
    background: transparent;
    color: var(--smo-white);
    border-color: var(--smo-white);
}
.btn-hero--outline:hover, .btn-hero--outline:focus-visible {
    background: var(--smo-white);
    color: var(--smo-black);
    transform: translateY(-1px);
}

/* --- Bandeau chiffres clés -------------------------------------------------
 * Markup cible (nouveau bloc, à insérer juste après le hero) :
 * <section class="stats-band home-bleed">
 *     <div class="stats-band-inner">
 *         <div class="stat-item"><strong>35</strong><span>Sections</span></div>
 *         <div class="stat-item"><strong>6 300</strong><span>Licenciés</span></div>
 *         <div class="stat-item"><strong>850</strong><span>Bénévoles</span></div>
 *     </div>
 * </section>
 * -------------------------------------------------------------------- */
.stats-band {
    background: var(--smo-black);
}

.stats-band-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.stat-item {
    padding: 1.75rem 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.stat-item:first-child { border-left: none; }

.stat-item strong {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--smo-yellow);
    line-height: 1.1;
}

.stat-item span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smo-gray-light);
}

@media (max-width: 640px) {
    .stats-band-inner { grid-template-columns: 1fr; }
    .stat-item { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
    .stat-item:first-child { border-top: none; }
}

/* --- Titres de section avec liseré vertical --------------------------------
 * Alternative optionnelle à .section-block h2 (qui garde son soulignement
 * jaune partout ailleurs sur le site). À utiliser uniquement sur l'accueil :
 * <h2 class="section-title">À la une</h2>
 * -------------------------------------------------------------------- */
.section-title {
    position: relative;
    margin: 0 0 1.25rem;
    padding-left: 0.85rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: none !important; /* neutralise le style hérité de .section-block h2 */
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 5px;
    background: var(--smo-yellow);
    border-radius: 2px;
}

/* --- "À la une" : une grande carte + deux petites --------------------------
 * Nouveau modificateur, n'affecte pas .news-grid utilisé ailleurs.
 * Markup cible : garder .news-card tel quel, changer juste le conteneur :
 * <div class="news-grid news-grid--home"> ... 3 <a class="news-card"> ... </div>
 * -------------------------------------------------------------------- */
.news-grid--home {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
}

.news-grid--home .news-card:first-child {
    grid-row: 1 / 3;
}

/* Hauteur fixe (pas 100%) : à l'intérieur d'une grille dont les lignes sont
   sizées en "auto", un pourcentage de hauteur sur cette image dépendrait de
   la hauteur des deux lignes... elles-mêmes déterminées par le contenu de
   cette carte qui les recouvre toutes les deux — dépendance circulaire que
   les navigateurs résolvent en ignorant le pourcentage, ce qui fait
   apparaître l'image à sa hauteur naturelle complète (jamais recadrée),
   particulièrement visible avec une photo au format portrait. */
.news-grid--home .news-card:first-child .news-card-img {
    height: 300px;
}

@media (max-width: 780px) {
    .news-grid--home {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .news-grid--home .news-card:first-child { grid-row: auto; }
    .news-grid--home .news-card:first-child .news-card-img { height: 200px; }
}

/* --- Prochains rendez-vous : cartes avec icône -----------------------------
 * Réutilise .news-card / .event-card existants : ajoute juste une icône.
 * Markup cible dans chaque carte :
 * <span class="agenda-icon" aria-hidden="true">🏃</span>
 * -------------------------------------------------------------------- */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.agenda-grid .news-card-body { display: flex; align-items: center; gap: 0.85rem; }
.agenda-icon { font-size: 1.8rem; line-height: 1; }
.agenda-grid .news-card-body h3 { margin: 0 0 0.2rem; }
.agenda-grid .news-card-body time { margin: 0; }

/* --- Bandeau CTA "35 sections, une seule famille" --------------------------
 * Nouveau bloc plein écran, entre l'agenda et Suivez-nous/Partenaires :
 * <section class="cta-banner home-bleed">
 *     <p>35 sections · une seule famille</p>
 *     <a href="/sections" class="btn-hero btn-hero--primary">Découvrir les sections →</a>
 * </section>
 * -------------------------------------------------------------------- */
.cta-banner {
    background: var(--smo-gray-light);
    text-align: center;
    padding: 3rem 1.25rem;
}
.cta-banner p {
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--smo-black);
}
.cta-banner .btn-hero--primary { color: var(--smo-black); }

/* --- Suivez-nous / Partenaires côte à côte ---------------------------------
 * Enveloppe optionnelle autour des deux .section-block existants
 * (reseaux-association et partenaires), pour les afficher en deux colonnes
 * sur grand écran au lieu de l'empilement vertical actuel :
 * <div class="home-follow-partners">
 *     <section class="section-block reseaux-association">...</section>
 *     <section class="section-block">...partenaires...</section>
 * </div>
 * -------------------------------------------------------------------- */
@media (min-width: 780px) {
    .home-follow-partners {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* --- Liens "voir tout" en bouton --------------------------------------
 * Remplace les liens texte "Tout l'agenda →", "Toutes les actualités →",
 * "Tous nos partenaires →", "Réseaux sociaux des sections →" en bas de
 * chaque bloc de l'accueil : bouton secondaire (bordure noire, fond
 * jaune au survol), cohérent avec .btn-hero--outline du hero mais sur
 * fond clair.
 * Markup : <a href="..." class="section-link-btn">Libellé →</a>
 * -------------------------------------------------------------------- */
.section-link-btn {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.55rem 1.25rem;
    border: 2px solid var(--smo-black);
    border-radius: var(--smo-radius-btn);
    color: var(--smo-black);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.section-link-btn:hover, .section-link-btn:focus-visible {
    background: var(--smo-yellow);
    border-color: var(--smo-yellow);
    transform: translateY(-1px);
}