/* SYRO — Responsive Global (mobile/tablette)
   Objectifs :
   - largeur utile plus grande sur mobile
   - réduire paddings/marges latérales excessifs
   - éviter les titres/mots cassés "absurdement"
   - supprimer l'impression de colonne trop étroite
   - aucun impact desktop (scopé en media queries)
*/

@media (max-width: 921px) {
  /* 0) Sécurité : pas de scroll horizontal global */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 1) Conteneur Astra : le thème enfant force souvent text-align:center en mobile.
        On le neutralise dans la zone de contenu (pas le header). */
  body .site-content .ast-container,
  body .site-content > .ast-container,
  body .site-content,
  body .content-area,
  body #primary,
  body .site-main {
    text-align: initial !important;
  }

  /* 2) Largeur utile : conteneur pleine largeur + padding latéral cohérent (safe-area iOS) */
  body .site-content .ast-container,
  body .site-content > .ast-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  /* 3) IMPORTANT : le thème enfant met `overflow-x:auto` sur .ast-container (ça "compresse" visuellement).
        On garde visible dans le contenu, et on laisse les blocs qui ont besoin de scroll gérer eux-mêmes. */
  body .site-content .ast-container,
  body .site-content > .ast-container {
    overflow-x: visible !important;
  }

  /* 4) Layout : plus de colonnes serrées / sidebars fantômes */
  body #primary,
  body .content-area,
  body .site-main,
  body #secondary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Sidebar : sur mobile, elle ne doit pas rétrécir le contenu.
     On la place en-dessous (Astra le fait souvent déjà) et on évite les marges parasites. */
  body #secondary {
    margin-top: 16px !important;
  }

  /* 5) Gutenberg / blocs : colonnes en pile propre */
  .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column !important;
  }
  .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* 6) Médias fluides + blocs larges */
  img,
  video,
  iframe,
  .wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  .wp-block-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 7) Typo : lisibilité + retours à la ligne propres */
  body p,
  body li,
  body .entry-content,
  body .site-content {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Titres : éviter "une lettre par ligne" + hiérarchie plus lisible */
  body h1,
  body h2,
  body h3,
  body .entry-title,
  body .page-title {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important; /* uniquement si très longs mots/URLs */
    max-width: 100% !important;
  }

  body h1,
  body .entry-title {
    font-size: clamp(22px, 5.6vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
  }
  body h2 {
    font-size: clamp(18px, 4.8vw, 24px) !important;
    line-height: 1.2 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }
  body h3 {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.25 !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
  }

  body p {
    font-size: 16px !important;
    line-height: 1.68 !important;
    margin-bottom: 14px !important;
  }

  /* 8) Blog / articles : largeur et respiration sans "colonne étroite" */
  body.blog .site-content .ast-container,
  body.archive .site-content .ast-container,
  body.single-post .site-content .ast-container {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.single-post .entry-content {
    max-width: 100% !important;
  }

  /* Images d’article : pas d’espaces latéraux inutiles */
  body.single-post .wp-block-image,
  body.single-post figure,
  body.single-post .post-thumb,
  body.single-post .post-thumb img {
    max-width: 100% !important;
  }

  /* 9) Widgets flottants : éviter qu’ils réduisent l’espace utile
        (on ne les supprime pas ici, on limite les débordements). */
  [id*="floating"],
  [class*="floating"],
  [class*="bubble"] {
    max-width: min(92vw, 420px) !important;
  }
}

/* Tablette (922–1199) : garder une lecture aérée sans resserrer */
@media (min-width: 922px) and (max-width: 1199px) {
  body .site-content .ast-container,
  body .site-content > .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
}