/* ============================================================ responsive.css — Couche responsive globale METROLOGIX GROUP Chargée EN DERNIER dans le de chaque page. Objectif : garde-fous universels + ajustements mobiles communs, sans casser la mise en page desktop existante. Breakpoints standardisés : 1200 / 992 / 768 / 480 px ============================================================ */ /* ---------- Garde-fous de base (aucune concurrence de spécificité) ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; /* empêche tout défilement horizontal parasite */ } /* Les médias ne débordent jamais de leur conteneur. Sélecteurs de type (faible spécificité) : n'écrasent PAS les tailles définies par des règles plus précises (ex. .gallery-box img). */ img, svg, video, canvas, iframe { max-width: 100%; } img, video { height: auto; } /* Casse les très longs mots / URLs qui provoqueraient un débordement */ body { overflow-wrap: break-word; } /* Tableaux : jamais plus larges que l'écran, défilables si nécessaire */ table { max-width: 100%; } .table-responsive, .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Les grilles/flex conteneurs ne doivent pas forcer une largeur mini > écran */ img[width], img[height] { height: auto; } /* ---------- Tablettes (<= 992px) ---------- */ @media (max-width: 992px) { /* Les media