/* =====================================================================
   Affichage proportionnel desktop (≥ 992px).

   Le design de référence est celui d'un écran 1920px : conteneur de
   1280px, ~1/3 de la largeur laissé au fond festif. Le thème (Wolmart +
   nos feuilles) est dimensionné en rem (html à 10px) : on fait varier
   1rem avec la largeur d'écran, et toute la page (en-tête, bulles, blocs)
   garde les proportions du 1920px, sans zoom CSS (vh/vw, media queries et
   coordonnées JS restent normaux).

   Valeur de 1rem selon la largeur, sans aucun saut :
   - 992–1279px  : 7,64px fixe. Même rendu qu'en 1280px ; le conteneur
                   (128rem = 978px) occupe toute la largeur à 1000px et
                   laisse apparaître le fond en s'approchant de 1280px.
                   Auparavant, sous 1280px, 1rem revenait à 10px : en-tête
                   et bulles 30 % plus grands, rupture nette à 1279/1280px.
   - 1280–1920px : de 7,64px à 10px (droite passant par ces deux points).
                   +0,5px à 1280px par rapport à la version précédente
                   (7,14px) pour la lisibilité, écart qui s'annule à 1920px.
   - ≥ 1920px    : même pente qu'avant (10px à 1920, 12,86px à 2560).

   Sous 992px (tablette, mobile), 1rem reste à 10px : la mise en page y
   change de toute façon (en-tête mobile).

   Pour revenir à un affichage non proportionnel : retirer le <link> de
   ce fichier dans templates/base.html.twig.
   ===================================================================== */

@media (min-width: 992px) {
    html {
        font-size: 7.6428px;
    }

    .container,
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container {
        max-width: 128rem;
    }

    .container-fluid {
        max-width: 182rem;
    }

    body:not(.home-page) .page-content > .container:not(.homepage-block),
    body:not(.home-page) .page-content > .homepage-block {
        --container-pad: 2rem;
    }

    body:not(.home-page) .page-content > .homepage-block {
        max-width: calc(128rem - 2 * var(--container-pad));
    }

    /* Logos : les attributs width/height des <img> sont des px. */
    .header .logo img {
        width: 17rem;
        height: auto;
    }

    .footer .logo-footer img {
        width: 14.5rem;
        height: auto;
    }

    /* Tailles en px du thème Wolmart. */
    .social-icon {
        width: 3.2rem;
        height: 3.2rem;
        line-height: 2.8rem;
    }

    .price-range input {
        width: 6.2rem;
        height: 3.7rem;
        font-size: 1.4rem;
        line-height: 3.7rem;
    }

    #scroll-top svg {
        width: 4.4rem;
        height: 4.4rem;
    }
}

@media (min-width: 1280px) {
    html {
        /* Droite passant par (1280px ; 7,6428px) et (1920px ; 10px). */
        font-size: calc(2.9286px + 0.3683vw);
    }
}

@media (min-width: 1920px) {
    html {
        /* Droite passant par (1920px ; 10px) et (2560px ; 12,86px). */
        font-size: calc(1.4286px + 0.44643vw);
    }
}