/* D044 : pattern "table → cards" mobile-first. Un <table class="table-cards">
   inchangé (thead/tbody/tr/td classiques, hx-swap-oob déjà en place) devient
   une pile de cartes sous le seuil md — chaque <td data-label="…"> affiche son
   libellé au-dessus de sa valeur. Aucune structure DOM dupliquée : le même
   tbody swappé par htmx sert les deux rendus (table ≥md, cartes <md). */
@media (max-width: 767.98px) {
  .table-cards,
  .table-cards thead,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }
  .table-cards thead {
    display: none;
  }
  .table-cards tr {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .table-cards td {
    border: none;
    padding: 0.3rem 0;
    text-align: left !important;
  }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}

/* Design mobile augmenté DRIVER (inspiré Dashdoc, cf. decisions.md Dxxx) */

/* Tab bar basse fixe — remplace la barre du haut D043 (logout only). Un seul
   endroit persistant pour les 3 destinations réelles de DRIVER. */
.tab-bar-driver {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-bar-driver__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0 0.4rem;
  border: none;
  background: none;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  text-decoration: none;
}
.tab-bar-driver__item.active {
  color: var(--bs-primary);
  font-weight: 600;
}
.pb-driver {
  /* --tab-bar-height posée en JS (base.html) sur la vraie hauteur mesurée de
     .tab-bar-driver — un chiffre en dur (ex. 4.25rem) ne correspond pas à la
     hauteur réelle rendue selon l'appareil (police, encoche iOS...), ce qui a
     fait passer un clic sur le bouton sticky *sous* la tab bar fixe (bug
     réel, 2026-07-31 : "Clôturer la tournée" ne déclenchait rien). */
  padding-bottom: calc(var(--tab-bar-height, 4.25rem) + 0.5rem) !important;
}

/* CTA principal collé en bas de viewport — évite au chauffeur de remonter/
   redescendre un long formulaire pour trouver le bouton d'action. Utilisé
   uniquement sur les écrans DRIVER (tournee.html/etape.html) : `bottom`
   décalé de la hauteur réelle de la tab bar fixe (mesurée en JS) pour ne
   jamais passer dessous — voir note ci-dessus. */
.cta-bas-fixe {
  position: sticky;
  bottom: var(--tab-bar-height, 4.25rem);
  background: #fff;
  padding: 0.75rem;
  margin: 1rem -0.75rem -0.75rem;
  border-top: 1px solid var(--bs-border-color);
  border-radius: 0.375rem 0.375rem 0 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
  z-index: 5;
}

/* Formulaire étape en pas-à-pas (front only, même patron que D021 : un seul
   POST final, le découpage en écrans n'existe que côté template/JS). Par
   défaut (JS absent, ou re-rendu serveur après une erreur de validation) tous
   les .etape-pas restent visibles — formulaire complet, comportement
   d'aujourd'hui. Le mode pas-à-pas n'est activé qu'explicitement par
   etape-wizard.js (classe .etape-wizard-actif posée sur le <form>), jamais si
   une erreur serveur doit rester visible avec le reste des champs saisis. */
.etape-wizard-actif .etape-pas {
  display: none;
}
.etape-wizard-actif .etape-pas.actif {
  display: block;
}
.etape-progression {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}
.etape-wizard-actif canvas[id^="signature-"] {
  height: 45vh !important;
  min-height: 220px;
}