/* ============================================================
   BLOC — Optimisation mobile (phase 2, 2 juillet 2026)
   RÈGLE ABSOLUE : uniquement des media queries sous breakpoint.
   Aucune règle ici ne s'applique en desktop (≥1280px pour la
   navbar, ≥1024px pour le footer, ≥768px pour le contenu).
   ============================================================ */

/* ---------- Navbar mobile (le header desktop apparaît à partir de 1280px) ---------- */
@media (max-width: 1279px) {

  /* C3 — Logo navbar : 52px sur mobile (au lieu du forçage 96px de bloc-dark.js).
     Chargé après _bloc_dark_overrides → cette règle gagne sous 1280px. */
  header nav a[aria-label="BLOC — Accueil"] img {
    height: 3.25rem !important; /* 52px */
    width: auto !important;
  }

  /* C1c — Contenir tout débordement du contenu (états initiaux d'animations
     translateX(±50px), décors -inset-4…). `clip` ne casse pas position:sticky. */
  main { overflow-x: clip; }
  footer { overflow-x: clip; }

  /* M3 — Zones tactiles navbar ≥44px sans changer le visuel (extension invisible) */
  header button[aria-label="Menu"] { position: relative; }
  header button[aria-label="Menu"]::after {
    content: ""; position: absolute; inset: -8px;
  }
  header nav button[title="Mode sombre"]::after,
  header nav button[title="Mode clair"]::after {
    content: ""; position: absolute; inset: -4px;
  }
  header nav button.text-\[0\.62rem\] { position: relative; }
  header nav button.text-\[0\.62rem\]::after {
    content: ""; position: absolute; inset: -15px;
  }
}

/* ---------- Footer (le padding du container passe à 2.5rem à partir de 1024px) ---------- */
@media (max-width: 1023px) {

  /* C1a — La ligne du bas de footer a des marges négatives de -2.5rem prévues
     pour le padding desktop ; sous 1024px le container n'a que 1.5rem → +16px
     de débordement de chaque côté. On aligne sur le padding réel. */
  footer .mt-12.border-t,
  .footer-bottom {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ---------- Contenu mobile ---------- */
@media (max-width: 767px) {

  /* C1b — En-têtes de page « titre + sous-titre à droite » (coach, tarifs,
     première-fois, planning, boutique) : le sous-titre shrink-0/max-w-xs
     déborde de l'écran → on empile, texte à gauche. */
  main .flex.items-end.justify-between.gap-8 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  main .flex.items-end.justify-between.gap-8 > p {
    text-align: left;
    max-width: 100%;
    padding-bottom: 0;
  }

  /* C1d — Grilles inline écrites à la main (page /studio/) sans breakpoint :
     colonne unique sur mobile ; la grille de stats (4 chiffres) passe en 2×2. */
  main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  main [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* M2 — Inputs : 16px minimum pour empêcher le zoom automatique iOS au focus */
  input, textarea, select { font-size: 16px !important; }

  /* M3 — Footer : zone de tap ≥44px sur tous les liens, sans réduire les
     boutons déjà grands (min-height ne rétrécit rien). */
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* m1/m2 — Aucun texte sous 12px sur mobile */
  .text-\[0\.55rem\], .text-\[0\.6rem\], .text-\[0\.62rem\],
  .text-\[0\.65rem\], .text-\[0\.7rem\], .text-\[11px\],
  .label-tag, .cgv-note, .f-copy, .f-studio {
    font-size: 12px !important;
  }
  [style*="font-size:0.58rem"], [style*="font-size: 0.58rem"],
  [style*="font-size:0.6"], [style*="font-size: 0.6"],
  [style*="font-size:0.7"], [style*="font-size: 0.7"],
  [style*="font-size:11px"], [style*="font-size: 11px"] {
    font-size: 12px !important;
  }

  /* m1 — Corps de texte : 14px minimum pour les paragraphes de lecture */
  main p.text-xs, footer p.text-xs { font-size: 0.875rem !important; }

  /* Liens hérités sans classe ni style (ex. sommaire CGV) : plancher 12px */
  main a:not([class]):not([style]) { font-size: max(12px, 1em); }

  /* m3 — Texte des boutons : 14px sur mobile (13px ailleurs) */
  .btn-primary, .btn-ghost { font-size: 0.875rem; }
}