/* ============================================
   AAMEA 2026 — Améliorations responsive
   Ce fichier est chargé APRÈS style.css et corrige
   les soucis de design et de responsivité.
============================================ */

/* ---- Container fluide ---- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ---- Images toujours responsive ---- */
img { max-width: 100%; height: auto; }

/* ---- Tableaux responsive ---- */
table { max-width: 100%; }

/* ============================================
   HERO — texte qui s'adapte
============================================ */
.hero h1 {
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.2;
    word-wrap: break-word;
}
.hero-subtitle {
    font-size: clamp(15px, 2vw, 20px);
}
.hero-info {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.hero-info-item {
    font-size: clamp(13px, 1.5vw, 16px);
}
.hero-cta {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ============================================
   COUNTDOWN — responsive
============================================ */
.countdown {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.countdown-item {
    min-width: 75px;
    flex: 0 1 90px;
}
.countdown-number {
    font-size: clamp(28px, 5vw, 48px) !important;
}
.countdown-label {
    font-size: clamp(10px, 1.2vw, 13px);
}

/* ============================================
   SECTIONS — titres adaptatifs
============================================ */
.section { padding: clamp(40px, 6vw, 80px) 0; }
.section-title { font-size: clamp(24px, 3.5vw, 38px); line-height: 1.3; }
.section-subtitle { font-size: clamp(14px, 1.6vw, 17px); }

/* ============================================
   GRILLES — colonnes adaptatives
============================================ */
.key-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.figure-number {
    font-size: clamp(32px, 4vw, 48px);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.why-participate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.sponsors-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 30px;
    align-items: center;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* ============================================
   FORMULAIRES — responsive sans débordement
============================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
input, select, textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.form-group { min-width: 0; } /* empêche le débordement dans les grids */

/* ============================================
   NAVIGATION — sans retour à la ligne
============================================ */
.main-header {
    overflow: visible;
}
.navbar .container,
.top-bar .container {
    flex-wrap: nowrap;
}
.nav-menu li a {
    white-space: nowrap;
}
.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ============================================
   TOP BAR — adapatatif
============================================ */
.top-bar-left a, .top-bar-right { white-space: nowrap; }
.top-bar-left { display: flex; gap: 15px; flex-wrap: wrap; }

/* ============================================
   BREAKPOINTS PROGRESSIFS
============================================ */

/* Tablettes paysage */
@media (max-width: 1100px) {
    .nav-menu { gap: 0; }
    .nav-menu li a {
        padding: 8px 9px;
        font-size: 12.5px;
    }
    .nav-menu li a.btn-register {
        padding: 8px 14px;
        font-size: 11.5px;
    }
}

/* Tablettes portrait & menu mobile */
@media (max-width: 992px) {
    .top-bar { display: none; } /* masque la barre du haut pour donner de l'air */

    .navbar { padding: 12px 0; }

    .mobile-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    .mobile-toggle span {
        display: block;
        width: 28px;
        height: 3px;
        background: var(--color-primary);
        border-radius: 2px;
        transition: 0.3s;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        padding: 90px 20px 30px;
        gap: 4px;
        box-shadow: -5px 0 30px rgba(0,0,0,.15);
        transition: right .3s ease;
        align-items: stretch;
        overflow-y: auto;
        z-index: 1000;
    }
    .nav-menu.active { right: 0; }
    .nav-menu li { width: 100%; }
    .nav-menu li a {
        display: block;
        padding: 14px 18px;
        font-size: 15px;
        border-radius: 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    .nav-menu li a.btn-register {
        margin: 15px 0 0;
        text-align: center;
        padding: 14px;
    }

    /* Overlay au clic */
    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 999;
    }

    /* Hero centré et plus compact */
    .hero {
        min-height: auto;
        padding: 80px 0 60px;
    }

    /* Sections plus serrées */
    .section { padding: 50px 0; }

    /* CTA empilés */
    .section-dark .container > div {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .container { padding-left: 16px; padding-right: 16px; }

    .hero { padding: 60px 0 50px; }
    .hero h1 { font-size: 26px; }
    .hero-subtitle { font-size: 14px; }
    .hero-info { flex-direction: column; gap: 10px; }
    .hero-info-item { font-size: 13px; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .section { padding: 40px 0; }
    .section-header { margin-bottom: 30px; }

    .countdown-item {
        min-width: 64px;
        padding: 12px 8px;
    }
    .countdown-number { font-size: 26px !important; }
    .countdown-label { font-size: 10px; }

    .figure-card, .pillar-card, .why-card, .speaker-card, .news-card {
        padding: 20px !important;
    }
    .figure-number { font-size: 34px; }

    .btn {
        padding: 12px 22px;
        font-size: 14px;
        white-space: normal;
    }

    /* Formulaires en colonne unique */
    .form-grid { grid-template-columns: 1fr; }

    /* Footer empilé */
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* Logo plus petit */
    .logo, .footer-logo { height: 40px; }
    .brand-name { font-size: 15px; }
    .logo-placeholder { width: 40px; height: 40px; font-size: 20px; }

    /* Sponsors band */
    .sponsors-band-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Sections sombres */
    .section-dark h2 { font-size: 22px; }

    /* Page header */
    .page-header { padding: 60px 0 40px; }
    .page-header h1 { font-size: 26px; }
}

/* Très petits écrans */
@media (max-width: 380px) {
    .countdown-item { min-width: 55px; padding: 10px 6px; }
    .countdown-number { font-size: 22px !important; }
    .sponsors-band-grid { grid-template-columns: 1fr; }
}