/* ─────────────────────────────────────────────────────────────────────
   ComptIA — Ajustements responsive (issue #152).

   Chargé APRÈS style.css (feuille séparée) pour que ces règles gagnent à
   spécificité égale, sans toucher au reste de la mise en forme.

   Principe :
     • téléphone (< 780 px) : les tableaux deviennent des cartes (une ligne =
       un bloc, chaque cellule précédée du nom de sa colonne — étiquettes
       posées par responsive.js), les bandeaux s'empilent, les filtres passent
       en pleine largeur, les cibles tactiles font au moins 40 px ;
     • très petits écrans (< 480 px) : on resserre encore (titre, paddings).
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
  /* ── Marges : 22 px de chaque côté, c'est 11 % de la largeur utile ── */
  main { padding: 12px; }
  section.vue { margin-bottom: 16px; }
  .entete-vue h2 { font-size: 19px; }
  .entete-vue { flex-wrap: wrap; gap: 8px; }

  /* ── Barre du haut : les 8 onglets passent sur leur propre ligne ── */
  header {
    height: auto; flex-wrap: wrap; gap: 6px; padding: 6px 10px;
  }
  header .titre { font-size: 16px; }
  nav {
    order: 3; width: 100%; flex: 1 0 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  nav button, #btn-parametres, #btn-deconnexion {
    font-size: 13px; padding: 8px 9px; min-height: 40px;
  }

  /* ── Tableaux → cartes ──────────────────────────────────────────────
     On cible TOUS les tableaux sous <main> (y compris ceux des briques) ;
     l'exception du tableau de bord est traitée juste après. */
  main table {
    display: block; width: 100%; border-collapse: separate;
  }
  main table thead { display: none; }
  main table tbody { display: block; }
  main table tbody tr {
    display: block; background: var(--carte);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    margin-bottom: 10px; padding: 4px 0; box-shadow: var(--ombre-douce);
  }
  main table tbody tr:hover { background: var(--carte); }
  main table tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; text-align: right;
    white-space: normal; overflow: visible;
    border-bottom: 1px solid #f2f5f9; padding: 8px 12px;
    max-width: none;
  }
  main table tbody td:last-child { border-bottom: 0; }
  main table tbody td::before {
    content: attr(data-label);
    color: var(--texte-doux); font-weight: 600; font-size: 12.5px;
    text-align: left; flex: 0 0 38%; white-space: normal;
  }
  /* Cellule sans étiquette (colonnes techniques : cases à cocher, actions) :
     on ne réserve pas la moitié de la ligne pour rien. */
  main table tbody td[data-label=""]::before,
  main table tbody td[data-label="Actions"]::before { display: none; }
  main table tbody td[data-label=""] { justify-content: flex-end; }
  main table tbody td input[type="checkbox"] { width: 22px; height: 22px; }

  /* ── Exception : le tableau de bord garde sa forme de tableau ──
     Trois colonnes courtes : on masque le compte et on laisse le libellé
     revenir à la ligne, plutôt que d'empiler une carte par opération. */
  .dash-carte table {
    display: table; border-collapse: collapse;
  }
  .dash-carte table thead { display: table-header-group; }
  .dash-carte table tbody { display: table-row-group; }
  .dash-carte table tbody tr {
    display: table-row; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .dash-carte table tbody td {
    display: table-cell; text-align: left; padding: 6px 6px;
    border-bottom: 1px solid #f2f5f9; white-space: normal;
  }
  .dash-carte table tbody td::before { display: none; }
  .dash-carte table td.compte, .dash-carte table th.compte { display: none; }
  .dash-carte table td.libelle { max-width: none; }
  .dash-carte table td.montant { white-space: nowrap; }

  /* ── Bandeaux de statistiques et cartes ── */
  .carte-stats { flex-direction: column; align-items: stretch; gap: 10px; }
  .stats-barre { min-width: 0; }
  .stats-gros { justify-content: space-between; }
  .dash { grid-template-columns: 1fr; }
  .dash-carte.dash-large { grid-column: span 1; }

  /* ── Filtres, actions et formulaires en pleine largeur ── */
  /* `.filtres` n'a aucune règle dans style.css : on la déclare explicitement
     ici en colonne, sinon `flex-direction` resterait sans effet. */
  .filtres {
    display: flex; flex-wrap: wrap; flex-direction: column;
    align-items: stretch; gap: 6px; width: 100%;
  }
  .filtres select, .filtres input, .filtres button { width: 100%; }
  .actions { flex-wrap: wrap; }
  .actions button { flex: 1 1 auto; }
  .bud-form select, .bud-form input, .bud-form button { width: 100%; }
  input, select, textarea, button { min-height: 40px; }
  .segments { width: 100%; }
  .segment { flex: 1; }
}

@media (max-width: 480px) {
  main { padding: 9px; }
  header .titre { font-size: 15px; }
  main table tbody td { padding: 7px 9px; }
  main table tbody td::before { flex: 0 0 42%; }
  .dash-gros { font-size: 22px; }
  .bud-tete { flex-wrap: wrap; }
}

/* Sur écran large, rien ne change : les étiquettes posées par responsive.js
   n'ont aucun effet (elles ne servent que dans le repli en cartes). */
@media (min-width: 781px) {
  main table tbody td::before { content: none; }
}