/*
 * Filets de sécurité contre les débordements horizontaux.
 *
 * Relevés lors du balayage des 260 URL publiques du site, à 360 px puis à
 * 768 px de large. Chaque règle est délibérément étroite : une règle trop
 * large casse des libellés courts qui tenaient très bien, comme les titres
 * des cartes de la page d'accueil.
 */

/*
 * 1. Un mot plus large que l'écran, sur téléphone uniquement.
 *    « réhabilitation » à 64 px mesure 420 px : il débordait au lieu de se
 *    couper. `break-word` ne coupe que lorsque le mot ne tient pas sur une
 *    ligne à lui seul, et `hyphens` place un trait d'union aux césures
 *    françaises (l'attribut lang="fr-FR" est posé par WordPress).
 *
 *    Au-delà de 767 px, aucun titre ne débordait : la règle s'arrête là, pour
 *    ne pas couper des titres de cartes qui tiennent dans leur colonne.
 */
@media (max-width: 767px) {
    h1, h2, h3, h4,
    .elementor-heading-title,
    .e-n-accordion-item-title {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/*
 * 2. Adresses web collées telles quelles dans un paragraphe (formulaires
 *    Google, HelloAsso), y compris dans les commentaires d'articles. Elles
 *    n'ont aucune césure naturelle : on autorise la rupture n'importe où, ce
 *    qui reste lisible pour une URL.
 *
 *    Valable à toutes les largeurs : une URL de 675 px dans un commentaire
 *    indenté élargissait la page à 849 px sur tablette. Le sélecteur vise les
 *    liens à l'intérieur d'un paragraphe ou d'une liste, jamais les liens de
 *    navigation ou les cartes cliquables.
 */
p a,
li a,
.comment-content a {
    overflow-wrap: anywhere;
}

/*
 * 3. Tableaux de tailles des vêtements de la boutique : jusqu'à 738 px de
 *    large. Sur téléphone, ils défilent à l'intérieur de leur propre bloc
 *    plutôt que d'élargir la page entière. Au-delà, ils tiennent.
 */
@media (max-width: 767px) {
    .entry-content table,
    .woocommerce-Tabs-panel table,
    .elementor-widget-text-editor table,
    .elementor-widget-woocommerce-product-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}