/* ============================================================
   Compléments responsive
   ------------------------------------------------------------
   Le prototype avait déjà sa version mobile : tableaux repliés en
   fiches, modales en feuille, bouton d'ajout flottant, encoches
   respectées. Cette feuille corrige ce qui l'empêchait de tenir
   ses promesses et couvre les tailles qu'il laissait de côté.

   Elle est chargée après app.css et adaptations.css.
   ============================================================ */


/* ============================================================
   1. Le bouton flottant « + Facture » retrouve l'écran
   ------------------------------------------------------------
   Sur mobile, app.css passe #bAdd en position:fixed pour l'amener
   sous le pouce. Mais backdrop-filter sur .top fait de la barre
   supérieure un bloc conteneur : le bouton restait prisonnier de
   la barre et recouvrait l'avatar et la déconnexion.

   Retirer le flou sous 760 px libère le positionnement. Le fond
   de la barre est déjà opaque à 94 % : la différence ne se voit
   pas, et le bouton retrouve sa place en bas à droite.
   ============================================================ */

@media (max-width: 760px) {
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97) }

  /* Une modale ouverte prend tout l'écran : le bouton n'a plus lieu d'être. */
  body:has(.ov.open) #bAdd { display: none }
}


/* ============================================================
   2. Modales : le pied reprend ses deux boutons de largeur égale
   ------------------------------------------------------------
   app.css étire les <button> du pied de modale. « Annuler » est
   devenu un lien en passant au serveur : sans cette règle il
   restait étroit à côté d'« Enregistrer ».
   ============================================================ */

@media (max-width: 760px) {
  .mfoot .btn { flex: 1; padding: 13px }

  /* La feuille couvre l'écran : la liste ne doit pas défiler derrière. */
  body:has(.ov.open) { overflow: hidden }
}

/* Téléphone couché : la feuille ne doit pas dépasser la hauteur utile. */
@media (max-width: 900px) and (max-height: 520px) {
  .ov { align-items: stretch; padding: 0 }
  .modal { max-height: 100vh; border-radius: 0 }
  .form { padding: 12px 16px; gap: 11px }
  .mfoot { padding: 10px 16px }
}


/* ============================================================
   3. Le tableau garde ses actions à portée
   ------------------------------------------------------------
   Douze colonnes ne tiennent pas sur une tablette, ni même sur un
   portable : « Compenser », « Modifier » et « Supprimer » sortaient
   du cadre et il fallait deviner qu'on pouvait faire défiler.

   La colonne d'actions reste maintenant collée à droite. Rien ne
   change au tableau lui-même — mêmes colonnes, mêmes couleurs ;
   seule la dernière ne s'en va plus. Sous 760 px, les lignes sont
   déjà des fiches empilées : la règle ne s'y applique pas.
   ============================================================ */

@media (min-width: 761px) {
  .scroll { overflow-x: auto; overscroll-behavior-x: contain }

  thead th:last-child,
  tbody td.c-act,
  tfoot td:last-child {
    position: sticky;
    right: 0;
  }

  /* Une cellule collée passe au-dessus du reste : il lui faut un fond
     opaque, repris de l'état de sa ligne. */
  tbody td.c-act { background: var(--card); z-index: 1 }
  tbody tr:hover td.c-act { background: #F3F6FD }
  tbody tr.flag td.c-act { background: var(--dgr-s) }
  tbody tr.flag:hover td.c-act { background: #FADFDA }
  tfoot td:last-child { background: var(--pri-s) }
  thead th:last-child { z-index: 3 }

  /* Ombre portée vers la gauche : elle dit qu'il y a du contenu dessous. */
  thead th:last-child,
  tbody td.c-act,
  tfoot td:last-child {
    box-shadow: -10px 0 12px -10px rgba(13, 18, 38, .28);
  }

  /* La ligne signalée garde son liseré rouge, que l'ombre ne doit pas manger. */
  tbody tr.flag { box-shadow: inset 3px 0 0 var(--dgr) }
}

/* Tablette : la colonne « service » n'a plus besoin d'être si large. */
@media (min-width: 761px) and (max-width: 1100px) {
  .svc { max-width: 190px }
  td, th { padding-left: 9px; padding-right: 9px }
}


/* ============================================================
   4. Petites largeurs
   ============================================================ */

/* Sous 360 px, la barre supérieure doit encore laisser lire le titre. */
@media (max-width: 360px) {
  .top { gap: 7px; padding-left: 10px; padding-right: 10px }
  .crumb b { font-size: 14.5px }
  .exp { padding: 8px }
  .ava { width: 30px; height: 30px }
}

/* Les indicateurs restent lisibles même en très petite largeur. */
@media (max-width: 320px) {
  .kpi .v { font-size: 16.5px }
  #bAdd { right: 12px; padding: 13px 15px }
}


/* ============================================================
   5. Grands écrans
   ------------------------------------------------------------
   Au-delà de 1900 px, le contenu cesse de s'étirer : une ligne de
   tableau large de deux mètres ne se lit pas. app.css plafonne déjà
   .content à 1640 px ; on le centre pour que la marge soit égale
   des deux côtés.
   ============================================================ */

@media (min-width: 1800px) {
  .content { margin: 0 auto }
}


/* ============================================================
   6. Application installée
   ------------------------------------------------------------
   Lancée depuis l'écran d'accueil, l'application n'a plus de barre
   d'adresse : on rend les encoches et la barre de gestes au système,
   et on retire la proposition d'installer ce qui l'est déjà.
   ============================================================ */

@media (display-mode: standalone) {
  [data-installer] { display: none !important }
  .top { padding-top: calc(11px + env(safe-area-inset-top)) }
  .side { padding-top: env(safe-area-inset-top) }
  .content { padding-bottom: calc(60px + env(safe-area-inset-bottom)) }
  /* Rien à sélectionner par inadvertance en glissant : on garde le
     comportement d'une application native. */
  .nav, .kpi, .tag, th { -webkit-user-select: none; user-select: none }
}