/*
|--------------------------------------------------------------------------
| Bandeau de la page d'accueil
|--------------------------------------------------------------------------
| Fond composé (panthère + hermines) décliné par format d'écran, voile
| sombre derrière le menu et le titre, médaillon « 50e édition » posé sous
| le menu. Les images sont produites par outils/compose_bandeau.py.
|
| Calques, du dessus vers le dessous : médaillon, voile, fond.
| !important : le thème pose l'image de fond en style en ligne.
*/

body.home .header-homepage{

    /* voile sombre : plein derrière la barre du haut et le titre, puis fondu sur 30 % de l'écran */
    --snaa-voile: linear-gradient(
        to bottom,
        rgba(8, 11, 18, 0.74) 0,
        rgba(8, 11, 18, 0.56) calc(var(--snaa-haut, 132px) + 110px),
        rgba(8, 11, 18, 0) calc(var(--snaa-haut, 132px) + 110px + 30vh)
    );

    background-image:
        url(medaillon.png),
        var(--snaa-voile),
        url(large.jpg) !important;

    background-size:
        clamp(92px, 7.2vw, 140px) auto,
        100% 100%,
        cover !important;

    /* le médaillon se pose sous le logo, dont bandeau.js mesure le bas */
    background-position:
        left 5vw top calc(var(--snaa-logo, 112px) + 16px),
        0 0,
        center top !important;

    background-repeat: no-repeat !important;
}

/* écran très bas (téléphone en paysage) : médaillon réduit */

@media (max-height: 480px){

    body.home .header-homepage{

        /* le titre tient sur une ligne : voile plus court pour laisser voir le tableau */
        --snaa-voile: linear-gradient(
            to bottom,
            rgba(8, 11, 18, 0.74) 0,
            rgba(8, 11, 18, 0.56) calc(var(--snaa-haut, 132px) + 56px),
            rgba(8, 11, 18, 0) calc(var(--snaa-haut, 132px) + 56px + 34vh)
        );

        background-size:
            58px auto,
            100% 100%,
            cover !important;

        background-position:
            left 3vw top calc(var(--snaa-logo, 100px) + 8px),
            0 0,
            center top !important;
    }
}

/*
|--------------------------------------------------------------------------
| Titre : taille adaptée à l'écran, ombre pour le détacher du fond
|--------------------------------------------------------------------------
*/

body.home .header-homepage h1.hero-title{

    font-size: clamp(1.7rem, 3.4vw, 3.3em);

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/*
|--------------------------------------------------------------------------
| Titre : juste sous la barre du haut
|--------------------------------------------------------------------------
| Le CSS personnalisé du site le place à 15 % ou 22 % de la hauteur du
| bandeau : sur un écran bas ou quand le menu tient sur deux lignes, il
| tombait dans le menu. --snaa-haut est la hauteur réelle de la barre du
| haut, mesurée par bandeau.js. Le bandeau s'allonge si l'écran est trop bas
| pour contenir le menu, le titre et le bouton.
*/

body.home .header-homepage.header-full-height .hero-title{

    top: calc(var(--snaa-haut, 132px) + clamp(8px, 2.5vh, 26px)) !important;
}

body.home .header-homepage.header-full-height{

    min-height: max(100vh, calc(var(--snaa-haut, 132px) + 200px));
}

/*
|--------------------------------------------------------------------------
| Tablette en paysage (écran entre le carré et le 16/10)
|--------------------------------------------------------------------------
*/

@media (max-aspect-ratio: 16/10){

    body.home .header-homepage{

        background-image:
            url(medaillon.png),
            var(--snaa-voile),
            url(tablette-paysage.jpg) !important;

        background-position:
            left 4vw top 29vh,
            0 0,
            center top !important;
    }
}

/*
|--------------------------------------------------------------------------
| Tablette en portrait
|--------------------------------------------------------------------------
*/

@media (max-aspect-ratio: 1/1){

    body.home .header-homepage{

        background-image:
            url(medaillon.png),
            var(--snaa-voile),
            url(tablette-portrait.jpg) !important;

        background-size:
            clamp(96px, 15vw, 150px) auto,
            100% 100%,
            cover !important;

        background-position:
            right 5vw top 32.5vh,
            0 0,
            center top !important;
    }

    body.home .header-homepage h1.hero-title{

        font-size: clamp(1.7rem, 6vw, 3em);
    }
}

/*
|--------------------------------------------------------------------------
| Téléphone en portrait
|--------------------------------------------------------------------------
*/

@media (max-aspect-ratio: 5/8){

    body.home .header-homepage{

        background-image:
            url(medaillon.png),
            var(--snaa-voile),
            url(tel-portrait.jpg) !important;

        background-size:
            clamp(76px, 23vw, 120px) auto,
            100% 100%,
            cover !important;

        background-position:
            right 5vw top 25.5vh,
            0 0,
            center top !important;
    }

    body.home .header-homepage h1.hero-title{

        font-size: clamp(1.5rem, 7.4vw, 2.4em);
    }
}