/* =========================================================================
   Responsive global — filet de sécurité appliqué à tout le site.
   Chargé en dernier : corrige les débordements et garantit l'adaptation
   à tous les écrans sans modifier les mises en page existantes.
   ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Empêche tout défilement horizontal parasite (cause n°1 d'un rendu
   "cassé" sur mobile : un élément qui dépasse la largeur de l'écran). */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Les médias ne débordent jamais de leur conteneur. */
img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Les champs de formulaire restent dans leur conteneur. */
input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* Les mots très longs (URL, emails) ne cassent pas la mise en page. */
p,
h1,
h2,
h3,
h4,
a,
span,
li,
td {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Les grands tableaux défilent horizontalement au lieu de déformer la page. */
table {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   Tablette (<= 992px)
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .box-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* -------------------------------------------------------------------------
   Mobile (<= 768px)
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Gouttière latérale homogène de 16px. */
    .box-container,
    .main {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Titres de bannière fluides : jamais trop gros sur petit écran. */
    .hero-content h1,
    .contact-hero .hero-content h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }

    .hero-content p {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
    }
}

/* -------------------------------------------------------------------------
   Petit mobile (<= 480px)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .box-container,
    .main {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Les boutons pleine largeur sont plus faciles à toucher. */
    .btn-container {
        width: 100%;
    }
}