/* B612 HOME — HERO ET UNIVERS */

/* ==========================================================
   B612 CHILD — NOUVEAU HERO
========================================================== */

.b612-hero {
    position: relative;
    overflow: hidden;
}

.b612-hero__body {
    position: relative;
}

.b612-hero__content {
    position: relative;
    z-index: 2;
}

.b612-hero__content h1 {
    font-family: 'Formiga';
    font-weight: 900;}
    
/* ==========================================================
   UNIVERS — MISE EN PAGE
========================================================== */

.b612-hero__universes {
    width: 100%;
}



.b612-hero__universes-title {
    margin-bottom: 48px;
    margin-top: 34px;

}

.b612-hero__universes-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;

    width: max-content;
    max-width: none;
}

.b612-hero__universe {
    width: 90px;
    min-width: 90px;
    flex-basis: 100px;
    
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0;
    margin: 0;

    background: none;
    border: none;
}

.b612-hero__universe-image {
    display: block;

    width: 90px;
    height: auto;

    margin: 0 0 8px;
}

.b612-hero__universe > span:last-child {
    display: block;

    width: 100%;

    color: #fff;

    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 1100px) {

    .b612-hero__universes-list {
            gap: 8px;
        }

    .b612-hero__universe {
            width: 100px;
            min-width: 100px;
            flex-basis: 100px;
        }

    .b612-hero__universe-image {
            width: 100px;
            height: auto;
        }

    .b612-hero__universe > span:last-child {
            font-size: 10px;
        }
}

@media (max-width: 900px) {

    .b612-hero__universes-list {
            gap: 5px;
        }

    .b612-hero__universe {
            width: 86px;
            min-width: 86px;
            flex-basis: 86px;
        }

    .b612-hero__universe-image {
            width: 86px;
        }

    .b612-hero__universe > span:last-child {
            font-size: 9px;
        }
}


@media (max-width: 700px) {

    .b612-hero__universes {
            width: 100%;
        }

    .b612-hero__universes-list {
            width: 100%;
            max-width: 100%;
    
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
    
            gap: 12px 8px;
        }

    .b612-hero__universe {
            width: 78px;
            min-width: 78px;
            flex: 0 0 78px;
        }

    .b612-hero__universe-image {
            width: 78px;
            height: auto;
        }

    .b612-hero__universe > span:last-child {
            font-size: 9px;
        }
}

@media (max-width: 480px) {

    .b612-hero__universes-list {
            gap: 10px 4px;
        }

    .b612-hero__universe {
            width: 68px;
            min-width: 68px;
            flex-basis: 68px;
        }

    .b612-hero__universe-image {
            width: 68px;
        }

    .b612-hero__universe > span:last-child {
            font-size: 8px;
        }
}


/* ==========================================================
   UNIVERS — RÉGLAGE FINAL (6 nov. 2026)
   Remplace les tailles empilées plus haut et dans
   assets/css/b612-home.{desktop,tablet,mobile}.css :
   - icônes et textes agrandis de 25 % ;
   - les 5 univers toujours sur UNE ligne (grille de 5 colonnes) ;
   - moins d'espace entre eux et sous « Explorer par univers ».
   Réglages par taille d'écran : variables ci-dessous.
========================================================== */

.b612-hero__universes {

    --b612-universe-col: 112px;      /* largeur d'un univers */
    --b612-universe-gap: 8px;        /* écart entre deux univers */
    --b612-universe-icon: 39px;      /* taille de l'icône (31 → 39) */
    --b612-universe-label: 14px;     /* taille du texte (11 → 14) */
}

.b612-hero__universes-title {

    margin-top: 34px;

    margin-bottom: 26px;
}

.b612-hero__universes-list {

    display: grid;

    grid-template-columns: repeat(5, var(--b612-universe-col));

    gap: var(--b612-universe-gap);

    width: max-content;

    max-width: 100%;
}

.b612-hero__universe {

    width: auto;

    min-width: 0;

    height: auto;

    flex: none;

    gap: 8px;

    padding: 10px 4px;
}

.b612-hero__universe-icon {

    width: auto;

    height: 1.15em;

    font-size: var(--b612-universe-icon);
}

.b612-hero__universe > span:last-child {

    font-size: var(--b612-universe-label);

    line-height: 1.15;

    white-space: nowrap;
}


/* Écran moyen */
@media (max-width: 1100px) {

    .b612-hero__universes {

        --b612-universe-col: 104px;
        --b612-universe-icon: 36px;
        --b612-universe-label: 13px;
    }
}


/* Tablette : la grille occupe toute la largeur disponible */
@media (max-width: 900px) {

    .b612-hero__universes {

        --b612-universe-gap: 6px;
        --b612-universe-icon: 34px;      /* 27 → 34 */
        --b612-universe-label: 11px;     /* 9 → 11 */
    }

    .b612-hero__universes-title {

        margin-bottom: 22px;
    }

    .b612-hero__universes-list {

        grid-template-columns: repeat(5, minmax(0, 1fr));

        width: 100%;
    }
}


/* Mobile : 5 univers sur une seule ligne */
@media (max-width: 700px) {

    .b612-hero__universes {

        --b612-universe-gap: 4px;
        --b612-universe-icon: 30px;      /* 24 → 30 */
        --b612-universe-label: 10px;     /* 8 → 10 */
    }

    .b612-hero__universes-title {

        margin-bottom: 18px;
    }

    .b612-hero__universes-list {

        justify-content: stretch;
    }

    .b612-hero__universe {

        gap: 6px;

        padding: 8px 0;
    }
}


/* Très petits téléphones */
@media (max-width: 360px) {

    .b612-hero__universes {

        --b612-universe-icon: 27px;
        --b612-universe-label: 9px;
    }
}