:root {
  --accent-color: #0645ad;
}

body {
  background: #f8f9fa;
  color: #202122;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

p {
  text-align: justify;
}

.site-header {
  background-image: url("../img/background.webp");
  background-size: cover;
  background-position: top;
  background-color: #38181b;
  height: 350px;
  color: white;
}

.logo {
  font-weight: 700;
  font-size: 6.5rem;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.infobox,
.infobox-left {
  background: #fff;
  border: 1px solid #a2a9b1;
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.infobox {
  position: sticky;
  top: 5rem;
}

.infobox-left {
  position: sticky;
  top: 1rem;
}

.table th {
  width: 40%;
}

.site-footer {
  font-size: 0.9rem;
  color: #6b6f73;
}

section {
  scroll-margin-top: 5rem; /* adapte selon la hauteur de ta navbar */
}

.image-flottante {
  float: right; /* ou left selon ton design */
  width: 30%; /* même taille que tu avais */
  margin: 0 0 10px 20px; /* espace entre image et texte */
  border-radius: 10px; /* optionnel : angles arrondis */
}
.legende {
  text-align: center;
  margin-bottom: 0px;
}
.truck-img {
  width: 200px;       /* ou 30%, selon ce que tu veux */
  height: auto;       /* garde les proportions */
  object-fit: cover;  /* garde la bonne coupe si tu fixes une hauteur */
  border-radius: 10px; /* optionnel */
}

/* Taille par défaut (pour écrans plus grands) */
body {
    font-size: 13px;
}

/* Sur les petits écrans (mobile) */
@media (max-width: 576px) {
    body {
        font-size: 11px;
    }
    .infobox {
        padding: 10px; /* Ajuste le padding pour les petits écrans */
    }

    .infobox h4 {
        font-size: 0.25rem; /* Réduit la taille du titre */
    }

    .infobox a {
        font-size: 0.9rem; /* Réduit la taille des liens */
    }
    .infobox-left img {
        width: 100%; /* L'image prend toute la largeur de son conteneur */
        height: auto; /* Pour éviter toute déformation */
    }

    .infobox-left table {
        font-size: 0.9rem; /* Réduit la taille de la police pour les petites tailles d'écran */
    }

    .infobox-left th, .infobox-left td {
        padding: 5px; /* Réduit les espacements dans la table */
    }
}

@media (min-width: 576px) {
    .infobox-left img {
        width: 100%; /* L'image prend toute la largeur */
        height: auto;
    }

    .infobox-left table {
        font-size: 0.8rem; /* Un peu plus grand sur les tablettes */
    }

    .infobox-left th, .infobox-left td {
        padding: 6px; /* Un peu plus d'espace dans la table */
    }
}

/* Sur les écrans moyens (tablettes) */
@media (max-width: 768px) {
    body {
        font-size: 12px;
    }
    .infobox {
        padding: 20px;
    }

    .infobox h4 {
        font-size: 1.5rem;
    }

    .infobox a {
        font-size: 1rem;
    }
}

/* Sur les écrans plus larges (grands écrans, ordinateurs de bureau) */
@media (min-width: 1200px) {
    body {
        font-size: 15px;
    }
}