/*
 * Regles responsive transverses, chargees APRES toutes les feuilles de page.
 *
 * Le site est utilise sur ordinateur, tablette et telephone. Ce fichier ne
 * porte que les garde-fous communs a toutes les pages : un composant precis se
 * corrige dans sa propre feuille (ou son propre bloc <style>), pas ici.
 * Points de rupture du projet : 1100 (petit ordinateur), 900 (tablette),
 * 640 (telephone). Verification : 00-PROJECT/RESPONSIVE.md.
 */

/* Rien ne doit elargir la page au-dela de l'ecran. */
main img,
main video,
main canvas,
main iframe,
main input,
main select,
main textarea {
    max-width: 100%;
}

/* Un mot tres long (code d'equipement, email, URL) passe a la ligne au lieu
   de pousser la page. N'agit que s'il ne tient pas : les colonnes de tableau
   gardent leur largeur naturelle. */
main {
    overflow-wrap: break-word;
}

main pre {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 900px) {
    /* Les tableaux de quatre colonnes ou plus defilent dans leur propre cadre
       au lieu d'elargir la page. Les petits tableaux (libelle / valeur)
       restent tels quels : ils tiennent. */
    main table:has(tr > :nth-child(4)) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Dans les petits tableaux, un email ou un code trop long se coupe
       plutot que d'elargir le tableau au-dela de l'ecran. */
    main table:not(:has(tr > :nth-child(4))) :is(td, th) {
        overflow-wrap: anywhere;
    }
}