/* --- Style du Corps (Body) --- */
/*
MEDIA QUERY pour écrans de Tablette et plus grands
(Minimale 768px est un standard courant pour le breakpoint tablette)
*/
@media (min-width: 768px) {
    /* Le style ci-dessous ne sera appliqué que si la largeur de l'écran est de 768 pixels ou plus. */
    body {
        /* -------------------------------------------------------- */
        /* 1. TYPOGRAPHIE (Standard) */
        /* -------------------------------------------------------- */

        /* Utiliser la police Roboto si importée, sinon une police sans-serif par défaut */
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

        /* -------------------------------------------------------- */
        /* 2. OPTION B : Image de fond (Recommandée pour les grands écrans) */
        /* -------------------------------------------------------- */

        background-image: url('../img/bg-road2.jpg'); /* Assurez-vous que le chemin est correct */
        background-size: cover;
        background-position: center center;
        background-attachment: fixed; /* L'image reste fixe lors du défilement (effet Parallax) */

        /* -------------------------------------------------------- */
        /* 3. SUPERPOSITION (Overlay) pour améliorer la lisibilité */
        /* -------------------------------------------------------- */

        background-color: rgba(0, 0, 0, 0.65); /* Un peu plus sombre pour le contraste */
        background-blend-mode: overlay;
    }
}

/*
AJOUT IMPORTANT : Définir un style 'body' par défaut pour les petits écrans (mobiles)
afin que la page ne soit pas vide ou non stylée lorsque la Media Query n'est pas appliquée.
*/
body {
    /* Style par défaut pour les mobiles (moins distrayant et plus performant) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa; /* Fond clair et simple */
    margin: 0;
    padding: 0;
}