/* ===========================================================================
   LOT 07 — ZONES SÛRES DE L'APPAREIL
   docs/zones-sures.md. Jetons --et-safe-* déclarés dans easytech-theme.css.

   À CHARGER EN DERNIER, et ce n'est pas un détail : les surfaces qu'il corrige
   vivent dans caisse.css, ecran-salle.css et les feuilles d'écran, toutes
   chargées après les lots 01 à 06. À spécificité égale, c'est l'ordre qui
   tranche — placé plus haut, ce fichier ne ferait rien sur le POS.

   CE QUE CE FICHIER RÉPARE
     Le <meta name="viewport"> passe à `viewport-fit=cover` dans la même
     livraison. Sans lui, sur un téléphone à encoche, iOS met la page en page
     DANS la zone sûre : rien n'est masqué, mais deux bandes noires bordent
     l'application, et les `env(safe-area-inset-*)` valent tous 0 — les deux que
     caisse-mobile.css portait déjà étaient donc inertes depuis le premier jour.
     Avec `cover`, la page prend l'écran entier : le fond va jusqu'aux bords —
     ce qu'on veut d'une caisse en plein écran sombre — mais le CONTENU passe
     désormais sous l'encoche et sous l'indicateur d'accueil s'il ne paie pas
     ses retraits. Les payer, c'est tout ce que fait ce fichier.

   CE QU'IL NE FAIT PAS
     Aucune couleur, aucun palier de largeur, aucune détection d'appareil : de
     la géométrie, et des jetons qui valent 0 sur tout écran sans encoche. Sur
     un poste de travail, ce fichier est un no-op mesurable.

   CE QUI PAIE AILLEURS
     La caisse mobile paie dans SA feuille (caisse-mobile.css), et non ici : ses
     retraits s'ajoutent à des rembourrages qu'elle est seule à connaître, et
     qui changent à son palier de 560 px. C'est la règle du dépôt depuis le
     lot 04 — un écran reprend la règle chez lui.
   =========================================================================== */

/* ---------- A. Coquille : les 14 layouts servis par ShellModule ------------
   La barre du haut est la première rangée d'une grille de 100vh. Elle GRANDIT
   du retrait haut au lieu d'être repoussée : son aplat marine doit continuer
   sous l'encoche, sinon une bande de la couleur du fond de page apparaît
   au-dessus d'elle. Le libellé, lui, descend sous l'encoche par le
   rembourrage.

   La règle jumelle pour l'état « rail masqué » (trois rangées) ne peut pas
   vivre ici : elle est déclarée dans le <style> embarqué de ShellModule.razor,
   posé dans le corps du document, donc APRÈS ce fichier. Elle y a été corrigée
   au même endroit — voir ShellModule.razor. */
.appgrid { grid-template-rows: calc(56px + var(--et-safe-haut)) 1fr; }

/* `.appgrid .et-topbar` ET NON `.et-topbar` : le lot 02 compacte cette barre
   sous 640 px avec ce sélecteur-là (0,2,0) et un raccourci `padding`. Écrit à
   0,1,0, le retrait de l'encoche était donc effacé exactement là où il compte
   — sur le téléphone. Le banc de simulation l'a montré (docs/zones-sures.md §4).

   Le rembourrage horizontal se lit dans le jeton --et-topbar-px, posé par la
   coquille (16 px) et réduit par le lot 02 (8 px) : on AJOUTE, on ne recopie
   pas. Le haut, lui, vaut 0 partout : un longhand suffit. */
.appgrid .et-topbar {
    padding-top: var(--et-safe-haut);
    padding-left: calc(var(--et-topbar-px, 16px) + var(--et-safe-gauche));
    padding-right: calc(var(--et-topbar-px, 16px) + var(--et-safe-droite));
}

/* Le rail, et le tiroir qu'il devient sous 640 px : tous deux collés au bord
   gauche, donc tous deux sous l'encoche en paysage. Le pied du rail porte en
   plus l'indicateur d'accueil. */
.et-side { padding-left: var(--et-safe-gauche); }
/* Deux sélecteurs, et c'est le même piège : le pied du rail est redéclaré par
   `.appgrid[data-rail="true"] .et-side-pied` (0,3,0, rail-lateral.css) et par
   `.appgrid .et-side-pied` (0,2,0, lot 01), tous deux en raccourci `padding`.
   Le retrait bas doit les égaler pour survivre — 8 px de base dans les trois
   états, donc rien à recopier ici non plus. */
.appgrid .et-side-pied,
.appgrid[data-rail="true"] .et-side-pied { padding-bottom: calc(8px + var(--et-safe-bas)); }

.et-content {
    padding-right: var(--et-safe-droite);
    padding-bottom: var(--et-safe-bas);
}

/* ---------- B. Plein-écrans du POS : au cadre -----------------------------
   Comptoir, plan de salle et afficheur client sont des `position: fixed;
   inset: 0` dont les modales sont, elles aussi, en `position: fixed` : elles
   ne sont donc pas rognées par le rembourrage du cadre, et le voile continue
   de couvrir l'écran entier. Un seul jeu de retraits suffit pour les trois.

   (La caisse mobile ne peut PAS être traitée ainsi : ses feuilles montantes
   sont en `position: absolute`, donc calées sur la boîte de rembourrage — le
   voile se serait arrêté avant les bords. Elle paie surface par surface.) */
.caisse-plein-ecran,
.salle-plein-ecran,
.afficheur {
    padding-top: var(--et-safe-haut);
    padding-bottom: var(--et-safe-bas);
    padding-left: var(--et-safe-gauche);
    padding-right: var(--et-safe-droite);
}

/* La modale du comptoir centre son contenu dans l'écran entier : sur un petit
   écran en paysage, une modale haute touche l'encoche. */
.caisse-modale-fond {
    padding: calc(1rem + var(--et-safe-haut)) calc(1rem + var(--et-safe-droite))
             calc(1rem + var(--et-safe-bas))  calc(1rem + var(--et-safe-gauche));
}

/* La pile de toasts est ancrée en haut à droite, hors flux. */
.caisse-toasts {
    top: calc(1rem + var(--et-safe-haut));
    right: calc(1rem + var(--et-safe-droite));
}