/*
 * 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;
}

/* Résumé intégral de la carte principale : la zone de texte occupe la hauteur
   restante sans participer au dimensionnement de la grille (p en absolu), de
   sorte que la carte s'aligne sur les deux cartes de droite. Si le texte
   dépasse, home-une-fit.js le recoupe au mot près avec une ellipse. */
.news-grid--home .news-card:first-child {
    display: flex;
    flex-direction: column;
}
.news-grid--home .news-card:first-child .news-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.news-grid--home .news-card-resume {
    flex: 1 1 auto;
    position: relative;
    min-height: 3em;
}
.news-grid--home .news-card-resume-texte {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--smo-gray);
    font-size: 0.9rem;
}
.news-grid--home .news-card-resume-texte p,
.news-grid--home .news-card-resume-texte ul,
.news-grid--home .news-card-resume-texte ol { margin: 0 0 0.5em; }

@media (max-width: 780px) {
    /* Une seule colonne : pas de contrainte de hauteur, résumé affiché en entier. */
    .news-grid--home .news-card-resume-texte { position: static; overflow: visible; }
    .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);
}