/*********************************************************************************************************
                                    Pour les écrans plus petit que 480px
 ********************************************************************************************************/
@media only screen and (max-width: 480px) {
    :root {
        --hHeader: 70px;
        --wHeaderTitre: calc(var(--wBody) - var(--wHeaderBouton) - calc(2 * var(--paddingGeneral)));
        --hMain: calc(var(--hBody) - var(--hHeader) - var(--hFooter));
        --hImage: calc(480px * 7 / 100);
    }

    header {
        padding: 20px 20px 20px calc(var(--wHeaderBouton) + var(--paddingGeneral) + 10px);
    }

    header #titre {
        width: var(--wHeaderTitre);
    }

    header div#grand-menu {
        display: none;
    }

    main div#petit-weather {
        display: block;
    }

    main div#moyen-weather,
    main div#grand-weather {
        display: none;
    }
}

/*********************************************************************************************************
                                      Pour les écrans dès 480px
 ********************************************************************************************************/
@media only screen and (min-width: 480px) {
    :root {
        --hHeader: 70px;
        --wHeaderTitre: calc(var(--wBody) - var(--wHeaderBouton) - calc(2 * var(--paddingGeneral)));
        --hMain: calc(var(--hBody) - var(--hHeader) - var(--hFooter));

    }

    header {
        padding: 20px 20px 20px calc(var(--wHeaderBouton) + var(--paddingGeneral) + 10px);
    }

    header #titre {
        width: var(--wHeaderTitre);
    }

    header #titre h1 {
        font-size: 2em;
    }

    header div#grand-menu {
        display: none;
    }

    main div#moyen-weather {
        display: block;
    }

    main div#petit-weather,
    main div#grand-weather {
        display: none;
    }
}

/*********************************************************************************************************
                                        Pour les écrans dès 660px
 ********************************************************************************************************/
@media only screen and (min-width: 660px) {
    :root {
        --hHeader: 95px;
        --hMenu: 22.4px;
        --wHeaderTitre: var(--wBody);
        --hMain: calc(var(--hBody) - var(--hHeader) - var(--hMenu) - var(--hFooter));

    }

    header {
        padding: var(--paddingGeneral) 0;
        margin-bottom: var(--hMenu);
    }

    header div#titre h1 {
        font-size: 3em;
    }

    header div#petit-menu {
        display: none;
    }

    header div#grand-menu {
        display: initial;
    }

    main {
        padding-top: 20px;
    }

    main div#grand-weather {
        display: block;
    }

    main div#petit-weather,
    main div#moyen-weather {
        display: none;
    }
}

/*********************************************************************************************************
                                      Pour les écrans dès 900px
 ********************************************************************************************************/
@media only screen and (min-width: 900px) {
    :root {
        --hHeader: 95px;
        --hMenu: 22.4px;
        --hMain: calc(var(--hBody) - var(--hHeader) - var(--hMenu) - var(--hFooter));
        --hImage: calc(900px * 7 / 100);
    }

    main div.groupe {
        max-width: calc(900px - calc(2 * 5%));
    }

    main div#grand-weather {
        display: block;
    }

    main div#petit-weather,
    main div#moyen-weather {
        display: none;
    }
}