/* Sous-pages : formulaires et documents dans la zone principale, à la place de l'écran (souspage.js).
   Les petites boîtes de confirmation gardent le style .modal / .sheet habituel. */

/* L'écran d'avant est caché (pas détruit) pendant qu'une sous-page est ouverte */
.main.sp-actif>#vue{display:none}
.main.sp-sans-imp #btnImprimer{display:none!important}

/* Page : plus de fond assombri ni de boîte centrée */
.modal.souspage{position:relative;inset:auto;z-index:1;display:block;padding:0;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none}
.modal.souspage[hidden]{display:none}
.modal.souspage>.sheet{width:100%;max-width:1380px;max-height:none;overflow:visible;border-radius:0;border:0;box-shadow:none!important;background:none!important;animation:none}
.modal.souspage.sp-arrivee>.sheet{animation:sp-arrivee .22s var(--doux,ease) both}
@keyframes sp-arrivee{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal.souspage.sp-arrivee>.sheet{animation:none}}

/* Barre de titre de la page : ← Retour · titre · boutons d'action, collée sous la barre du haut */
.modal.souspage .sheet-h{position:sticky;top:calc(var(--sp-haut,0px) + env(safe-area-inset-top,0px));z-index:15;border-radius:0;justify-content:flex-start;gap:var(--esp-3);flex-wrap:wrap;
  padding:10px max(var(--esp-4),env(safe-area-inset-right,0px)) 10px max(var(--esp-4),env(safe-area-inset-left,0px));
  background:var(--bg)!important;border-bottom:1px solid var(--line)}
.modal.souspage .sheet-h h2{flex:1 1 220px;min-width:0;margin:0;font-size:var(--t-titre,1.3rem);line-height:1.25}
.modal.souspage .sheet-h .x{display:none}
.modal.souspage .sp-retour{flex:none}
.modal.souspage .sp-actions{display:flex;flex-wrap:wrap;gap:var(--esp-2);justify-content:flex-end;margin-left:auto}
.modal.souspage .sp-actions:empty{display:none}
.modal.souspage .sp-actions .btn[style]{margin:0}

/* Petite boîte : pas de « Retour » ni de boutons recopiés (le × et le pied suffisent) */
.modal:not(.souspage) .sp-retour,.modal:not(.souspage) .sp-actions{display:none}
.sp-dessous .sp-retour,.sp-dessous .sp-actions{display:none}
.sp-dessous{pointer-events:none}

/* Corps de la page : pleine largeur, même marge que les écrans */
.modal.souspage .sheet-b{padding:var(--esp-4) max(var(--esp-4),env(safe-area-inset-right,0px)) var(--esp-4) max(var(--esp-4),env(safe-area-inset-left,0px))}
.modal.souspage form.sheet-b,.modal.souspage .sheet-b{background:none}
.modal.souspage .sheet-b>.form-grid,.modal.souspage .sheet-b>.list,.modal.souspage .sheet-b>.due,.modal.souspage .sheet-b>p{max-width:1180px}

/* Formulaires : grille sur 3 colonnes sur ordinateur, 2 sur tablette, 1 sur téléphone */
.modal.souspage .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.modal.souspage .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.modal.souspage .form-grid{grid-template-columns:minmax(0,1fr)}}

/* Pied (Enregistrer / Annuler en bas) : collé en bas de la fenêtre du navigateur */
.modal.souspage .sheet-f{border-radius:0;background:var(--bg)!important;padding:var(--esp-3) max(var(--esp-4),env(safe-area-inset-right,0px)) calc(var(--esp-3) + env(safe-area-inset-bottom,0px)) max(var(--esp-4),env(safe-area-inset-left,0px));z-index:14}
.modal.souspage form .sheet-f{margin:var(--esp-2) calc(-1 * max(var(--esp-4),env(safe-area-inset-left,0px))) calc(-1 * var(--esp-4))!important}

/* Documents (facture, ticket, proforma, reçu, relevé, bon) : aperçu centré */
.modal.souspage .paperwrap{background:none;padding:var(--esp-2) 0;display:flex;justify-content:center}
.modal.souspage .paperwrap>*{flex:none}

/* Téléphone : la barre du titre garde Retour + titre ; les boutons restent en bas */
@media (max-width:700px){
  .modal.souspage .sp-actions{display:none}
  .modal.souspage .sheet-h h2{font-size:var(--t-carte,1.05rem)}
  .modal.souspage .sp-retour{padding-inline:10px}
}
@media print{.modal.souspage,.sp-dessous{display:none!important}}
/* La bulle « POS » ne cache pas les boutons du bas pendant une sous-page */
body:has(.main.sp-actif) .bulle-pos{display:none}