/* ============================================================================
   LIBERTATEM — Correctif responsive pour contenu HTML email collé
   dans les articles du blog (newsletters copiées-collées dans Gutenberg).

   Pourquoi ce fichier existe :
   Les newsletters sont conçues en HTML "email" avec des tables à largeur
   fixe (width="600", width="500"...) et des <style>/<meta viewport> internes.
   Une fois collées dans le corps d'un article WordPress, ces balises
   <head>/<style> internes ne s'appliquent plus (WordPress ne les exécute
   pas dans le flux de la page), et les tables à largeur fixe en pixels
   débordent sur petit écran.

   Ce fichier neutralise ces largeurs fixes au niveau du conteneur d'article
   uniquement (.post-content, .post-footer), sans toucher au reste du site.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Toutes les tables à l'intérieur du corps d'un article ne dépassent
      jamais la largeur du conteneur, même si un width="600" est codé en dur
      dans l'attribut HTML.
   -------------------------------------------------------------------------- */
.post-content table,
.post-footer table {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Les tables imbriquées (mise en page interne des emails, type colonnes
   de tarifs, badges, etc.) gardent leur logique interne mais restent
   contraintes par leur parent */
.post-content table table,
.post-footer table table {
    width: 100% !important;
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   2. Cellules de table : on empêche tout débordement horizontal forcé
      (certains emails fixent des paddings larges en pixels qui, combinés
      à un width fixe, poussent le contenu hors écran).
   -------------------------------------------------------------------------- */
.post-content table td,
.post-content table th,
.post-footer table td,
.post-footer table th {
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   3. Images : jamais plus larges que leur conteneur, hauteur automatique
      pour préserver le ratio. Cible aussi les images avec width="600" en
      dur dans l'attribut HTML (comme dans les newsletters).
   -------------------------------------------------------------------------- */
.post-content img,
.post-footer img {
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   4. Le conteneur racine de l'email (souvent une <table class="email-container">
      ou un simple <table width="600">) : on le force à occuper toute la
      largeur disponible sur mobile, en conservant sa largeur "idéale" de
      600px sur desktop/tablette via max-width.
   -------------------------------------------------------------------------- */
.post-content .email-container,
.post-footer .email-container {
    width: 100% !important;
    max-width: 600px !important;
}

/* --------------------------------------------------------------------------
   5. Sécurité globale anti-débordement horizontal de la page : empêche
      qu'un élément mal dimensionné dans le contenu d'un article ne casse
      le scroll horizontal de toute la page sur mobile.
   -------------------------------------------------------------------------- */
.post-content,
.post-footer {
    overflow-x: hidden;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Adaptation typographique mobile : les titres et boutons des emails
      sont souvent dimensionnés en pixels fixes pour Outlook/Gmail ; on
      réduit légèrement sur petit écran pour éviter le débordement de texte.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .post-content h1.title,
    .post-footer h1.title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .post-content h2.section-title,
    .post-footer h2.section-title {
        font-size: 17px !important;
    }

    .post-content .cta-btn,
    .post-footer .cta-btn {
        display: block !important;
        width: auto !important;
        text-align: center !important;
    }

    .post-content .pad-mobile,
    .post-footer .pad-mobile {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Réduit les paddings très larges (32px, 40px) typiques des emails,
       qui à eux seuls peuvent provoquer un débordement sur petit écran */
    .post-content td[style*="padding:32px"],
    .post-content td[style*="padding: 32px"],
    .post-footer td[style*="padding:32px"],
    .post-footer td[style*="padding: 32px"] {
        padding: 20px 16px !important;
    }
}

@media screen and (max-width: 420px) {
    .post-content h1.title,
    .post-footer h1.title {
        font-size: 18px !important;
    }
}