/*
 * FEI 2026 — Landing « Édition confirmée »
 * Composants additionnels : annonce date/lieu, carte Google Maps,
 * section école (Mines de Saint-Étienne) et rétrospective 2025.
 * Réutilise la charte définie dans styles_entreprise_hub.css.
 */

/* Variables attendues par .floating-contact-btn (à l'origine dans styles.css,
   non chargé ici) — mappées sur la charte turquoise de la page. */
body.page-landing-2026 {
    --accent-color: var(--accent);
    --dark-bg: #04102a;
    --font-heading: 'Poppins', sans-serif;
    --neon-glow: rgba(0, 245, 202, 0.55);
}

body.page-landing-2026 .event-section,
body.page-landing-2026 .school-section,
body.page-landing-2026 .edition-2025 {
    max-width: min(1120px, 94vw);
    margin-inline: auto;
}

/* Lieu : carte en pleine largeur, puis les infos pratiques en dessous */
body.page-landing-2026 .event-grid {
    display: grid;
    gap: clamp(1.6rem, 4vw, 2.4rem);
    grid-template-columns: 1fr;
}

/* École : image en pleine largeur, puis le bloc « Notre atout » en dessous */
body.page-landing-2026 .school-grid {
    display: grid;
    gap: clamp(1.6rem, 4vw, 2.4rem);
    grid-template-columns: 1fr;
}

/* Data 2025 : deux graphiques seulement → cartes centrées (plus de 3e colonne vide) */
body.page-landing-2026 .chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
    justify-content: center;
}

/* Informations pratiques (date, lieu, public) */
.event-facts {
    list-style: none;
    margin: 1.6rem 0 1.8rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.event-facts li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    color: var(--text-secondary);
}

.event-facts .fact-icon {
    font-size: 1.35rem;
    line-height: 1.5;
    flex-shrink: 0;
}

.event-facts .fact-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

/* Carte Google Maps */
.map-card {
    background: var(--bg-card);
    border: 1px solid var(--stroke-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 0.6rem;
    display: flex;
}

.map-embed {
    position: relative;
    width: 100%;
    min-height: 300px;
    max-height: 540px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--stroke-soft);
}

.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Cadre média (photo élèves / campus) — conserve le ratio source 2048×1345
   pour afficher la photo entière sans rognage, du desktop au mobile. */
.media-frame {
    border-radius: var(--radius-md);
    border: 1px solid var(--stroke-soft);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    background: var(--bg-card);
    align-self: start;
    aspect-ratio: 2048 / 1345;
}

.media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Intitulé « Ce que les entreprises apprécient » dans la carte texte */
body.page-landing-2026 .lead-label {
    margin: 1.6rem 0 0.5rem;
    color: var(--accent-strong);
    font-weight: 600;
}

/* Bandeau de statistiques école */
body.page-landing-2026 .school-section .stats-grid {
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Rétrospective 2025 — zone à compléter par l'équipe */
.placeholder-zone {
    border: 1px dashed rgba(0, 245, 202, 0.4);
    border-radius: var(--radius-md);
    background: rgba(0, 245, 202, 0.05);
    padding: clamp(2.2rem, 6vw, 3.4rem);
    text-align: center;
    color: var(--text-muted);
    display: grid;
    gap: 1.4rem;
}

.placeholder-zone p {
    margin: 0;
    font-size: 1.02rem;
}

/* =========================================================
 * Responsive mobile — landing FEI 2026
 * (scopé à .page-landing-2026 pour ne pas impacter les autres pages)
 * ========================================================= */
@media (max-width: 768px) {
    /* Sections un peu plus compactes verticalement sur mobile */
    body.page-landing-2026 section {
        padding-left: clamp(1.1rem, 5vw, 2rem);
        padding-right: clamp(1.1rem, 5vw, 2rem);
    }

    /* Hero : le contenu peut occuper toute la largeur dispo */
    body.page-landing-2026 .hero-content {
        max-width: 100%;
    }

    body.page-landing-2026 .hero p {
        max-width: 100%;
    }

    /* Boutons d'action : pleine largeur, empilés et centrés */
    body.page-landing-2026 .hero-actions {
        gap: 0.8rem;
    }

    body.page-landing-2026 .hero-actions .button-primary,
    body.page-landing-2026 .hero-actions .button-secondary {
        flex: 1 1 100%;
        width: 100%;
    }

    /* La carte Google Maps n'a pas besoin d'être si haute sur mobile */
    body.page-landing-2026 .map-embed {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }

    /* Pastille « Édition 2026 · Jeudi 15 octobre » : sur mobile elle passe
       souvent sur 2 lignes. On abandonne la forme pilule (999px) qui rognait
       le texte au profit d'un rectangle arrondi, texte centré et aéré. */
    body.page-landing-2026 .hero-badge {
        border-radius: 14px;
        text-align: center;
        line-height: 1.35;
        letter-spacing: 0.1rem;
        padding: 0.5rem 0.9rem;
    }

    /* Les 3 cartes du hero (date, lieu, école) : une seule colonne pour
       éviter l'affichage déséquilibré « 2 + 1 » selon la largeur. */
    body.page-landing-2026 .metrics-bar {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }

    /* Les valeurs sont ici du texte (pas des chiffres) : on réduit la taille
       pour un rendu propre et lisible. */
    body.page-landing-2026 .metric-card strong {
        font-size: 1.3rem;
        line-height: 1.25;
    }
}

@media (max-width: 480px) {
    /* Une seule colonne nette pour les graphiques data 2025 */
    body.page-landing-2026 .chart-grid {
        grid-template-columns: 1fr;
    }

    /* Évite que le titre géant du hero ne déborde sur très petit écran */
    body.page-landing-2026 .hero h1 {
        font-size: clamp(2.4rem, 13vw, 3rem);
        word-break: break-word;
    }
}