/*
 * AdsClass — Lisibilité mobile (Android, iPhone, tablettes).
 *
 * Feuille transverse chargée par toutes les pages. Elle corrige au niveau
 * global ce qui rendait l'application illisible sur petit écran, sans
 * modifier la mise en page desktop : toutes les règles sont sous media query
 * `max-width`, donc inactives au-delà de 1024px.
 */

/* ============================================================
   1. Débordement horizontal
   Une seule largeur excessive (tableau, titre, grille) faisait scroller la
   page entière et rognait le contenu à droite.
   ============================================================ */
@media (max-width: 1024px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Les médias ne dépassent jamais leur conteneur. */
  img, svg, video, canvas, table, pre {
    max-width: 100%;
  }

  /* Les mots longs (emails, identifiants, URLs) coupent au lieu d'élargir.
     Exclu de FullCalendar (Emploi du temps) : ses en-têtes de jours très
     courts ("LUN.") étaient coupés en plein mot ("LU" / "N."). */
  h1, h2, h3, h4, p, span, a, td:not(.fc *), th:not(.fc *), li, label {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .fc, .fc * {
    word-break: normal;
  }
}

/* ============================================================
   2. Tableaux
   Rendus scrollables horizontalement au lieu d'écraser leurs colonnes.
   ============================================================ */
@media (max-width: 768px) {
  /* FullCalendar (Emploi du temps) construit sa grille avec des <table>
     internes dont la mise en page dépend de `display: table` : les casser
     en `block` effondre les colonnes des jours. On exclut donc tout ce qui
     vit sous `.fc` (préfixe des classes FullCalendar). */
  table:not(.fc *):not(.fc) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Les cellules gardent une largeur lisible plutôt que de se replier
     sur un caractère par ligne. */
  th:not(.fc *), td:not(.fc *) {
    white-space: nowrap;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem;
  }

  /* Un tableau déjà encapsulé dans un conteneur scrollable garde son
     comportement natif (évite le double défilement). */
  .overflow-x-auto > table,
  .overflow-auto > table,
  .table-responsive > table {
    display: table;
  }
}

/* ============================================================
   3. Grilles
   `grid-cols-2..6` sans préfixe s'appliquent dès 320px et compriment le
   contenu en colonnes illisibles. On les détend progressivement.
   ============================================================ */
@media (max-width: 768px) {
  .grid-cols-4, .grid-cols-5, .grid-cols-6,
  .grid-cols-7, .grid-cols-8, .grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5,
  .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-12 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Les rangées flex de boutons/filtres passent à la ligne. */
  .flex:not(.flex-col):not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}

/* ============================================================
   4. Typographie
   Les très grands titres (text-4xl à text-7xl) débordaient ou occupaient
   tout l'écran ; ils sont ramenés à une échelle mobile lisible.
   ============================================================ */
@media (max-width: 640px) {
  .text-7xl { font-size: 2.5rem !important; line-height: 1.1 !important; }
  .text-6xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 2rem !important; line-height: 1.15 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .text-2xl { font-size: 1.25rem !important; line-height: 1.3 !important; }

  /* Le corps de texte ne descend pas sous le seuil de confort de lecture. */
  body { font-size: 15px; }
}

/* ============================================================
   5. Espacements
   Les paddings pensés pour le desktop (px-8 à px-16) ne laissaient qu'une
   colonne de texte étroite au centre de l'écran.
   ============================================================ */
@media (max-width: 640px) {
  .px-8, .px-10, .px-12, .px-16, .px-20 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .py-12, .py-16, .py-20, .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .p-8, .p-10, .p-12 { padding: 1.25rem !important; }
  .gap-8, .gap-10, .gap-12 { gap: 1rem !important; }
  .space-x-6 > * + *, .space-x-8 > * + * { margin-left: 0.75rem !important; }
}

/* ============================================================
   6. Cibles tactiles
   Recommandation d'accessibilité : 44px minimum sous le doigt.
   ============================================================ */
@media (max-width: 768px) and (pointer: coarse) {
  button, [type="button"], [type="submit"], [type="reset"],
  a.btn, .btn, select {
    min-height: 44px;
  }

  /* iOS zoome automatiquement sur tout champ dont la police < 16px :
     on impose 16px pour empêcher ce zoom intempestif à la saisie. */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* ============================================================
   7. Éléments flottants
   Menus, modales et notifications calés sur des largeurs desktop
   (w-72, max-w-md…) sortaient de l'écran.
   ============================================================ */
@media (max-width: 640px) {
  .dropdown-menu {
    width: calc(100vw - 2rem) !important;
    max-width: 20rem;
    right: 0 !important;
    left: auto !important;
  }

  /* Bandeau de messages flash : pleine largeur, sous la barre de navigation. */
  #flashMessages {
    left: 0.75rem !important;
    right: 0.75rem !important;
    max-width: none !important;
  }

  .fixed.inset-0 > .max-w-md,
  .fixed.inset-0 > .max-w-lg,
  .fixed.inset-0 > .max-w-xl,
  .fixed.inset-0 > .max-w-2xl {
    width: calc(100vw - 1.5rem) !important;
    max-width: none !important;
  }
}

/* ============================================================
   8. Barre de navigation
   La hauteur fixe (h-20) et le décalage correspondant du contenu sont
   réduits pour ne pas amputer l'écran mobile.
   ============================================================ */
@media (max-width: 768px) {
  nav.h-20, header.h-20 { height: 4rem !important; }

  .main-content {
    padding-top: 4.5rem !important;
    min-height: calc(100vh - 4rem);
  }
}

/* ============================================================
   9. Impression
   Les documents officiels (bulletins, reçus, attestations) doivent garder
   leur mise en page A4 : aucune règle mobile ne s'y applique.
   ============================================================ */
@media print {
  table { display: table !important; }
  th, td { white-space: normal !important; }
}