/* =============================================================
   VILLAGE-SUBNAV.CSS — Barre des Maisons (Alif Genesis Online School)
   Composant partagé par : scolarite, preceptorat, internationale
   et toute future page Maison
   Alif Genesis Ltd — 2026
   ============================================================= */


/* --- 1. TITRE "ALIF GENESIS SCHOOL" AU-DESSUS DE LA BARRE --- */
.school-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--or-solaire, #D4A649);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.school-title i {
    font-size: 0.9rem;
}

.school-title::before,
.school-title::after {
    content: '';
    height: 1px;
    width: 40px;
    background: var(--or-solaire, #D4A649);
    opacity: 0.5;
}


/* --- 2. BARRE DES MAISONS (pill-bar) --- */
.sub-nav {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,0.75);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid white;
    margin: 0 auto 40px;
    width: fit-content;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


/* --- 3. LIENS DES MAISONS --- */
.sub-nav a {
    text-decoration: none;
    color: var(--marron-texte, #5D4037);
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 8px 18px;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}


/* --- 4. COULEURS PAR MAISON (hover + active) --- */

/* Maison Scolarité (bleu) */
.sub-nav a.m-scol:hover,
.sub-nav a.m-scol.active {
    background: var(--c-savoir, #2962FF);
    color: white;
    border-color: var(--c-savoir, #2962FF);
}

/* Maison Préceptorat (vert) */
.sub-nav a.m-pre:hover,
.sub-nav a.m-pre.active {
    background: var(--c-preceptorat, #00C853);
    color: white;
    border-color: var(--c-preceptorat, #00C853);
}

/* Maison Internationale (rouge) */
.sub-nav a.m-inter:hover,
.sub-nav a.m-inter.active {
    background: var(--c-inter, #C62828);
    color: white;
    border-color: var(--c-inter, #C62828);
}

/* Maison Excellence (noir) */
.sub-nav a.m-exc:hover,
.sub-nav a.m-exc.active {
    background: var(--c-excellence, #000000);
    color: white;
    border-color: var(--c-excellence, #000000);
}

/* Maison de Vacances (orange) */
.sub-nav a.m-vac:hover,
.sub-nav a.m-vac.active {
    background: var(--c-vacances, #EF6C00);
    color: white;
    border-color: var(--c-vacances, #EF6C00);
}

/* Institut de Formation (violet) */
.sub-nav a.m-form:hover,
.sub-nav a.m-form.active {
    background: var(--c-formation, #7B1FA2);
    color: white;
    border-color: var(--c-formation, #7B1FA2);
}


/* --- 5. RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .school-title {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .school-title::before,
    .school-title::after {
        width: 25px;
    }

    .sub-nav {
        padding: 6px;
        gap: 5px;
    }

    .sub-nav a {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}