/* ============================================================================
   EasyPOS — CAISSE MOBILE (commercial ambulant, canal APP)
   Écran §6.5 du handoff design comptoir. Pensé au pouce, 390 × 844 :
   cibles ≥ 44 px (46 pour les boutons pleine largeur), barre d'onglets en bas,
   feuilles montantes.

   Réutilise les jetons --cai-* de caisse.css (thème sombre du comptoir) : aucune
   couleur en dur, une seule source de vérité pour la charte de la caisse. Les
   jetons sont déclarés là-bas pour .mob-app aussi (bloc « JETONS DU POSTE ») :
   les valeurs de repli écrites ici ne servent plus qu'à la lecture.

   PALIERS DE LARGEUR : section 12, en fin de feuille. Cet écran est le seul du
   dépôt conçu pour UNE largeur — il n'en avait aucune, et s'étirait donc jusqu'à
   1600 px, intitulé et champ à 760 px l'un de l'autre (docs/conventions-responsive.md).
   ============================================================================ */

.mob-app {
    /* Largeur pour laquelle cet écran est dessiné : au-delà, il se cadre (§12). */
    --mob-appareil-l: 480px;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cai-fond, #101418);
    color: var(--cai-texte, #eef2f6);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

/* ---------- Bandeau ---------- */
/* DEUX RANGÉES, ET C'EST LE SEUL AGENCEMENT QUI TIENNE
   Identité (marque, caisse, réseau) puis les quatre commandes de session. En une
   seule rangée, 44 px × 4 + la pastille réseau + la marque ne tiennent pas dans
   390 px : c'est le nom de la caisse qui payait, réduit à « C… ». La place vient
   d'ailleurs — une seconde rangée — plutôt que des cibles (docs/cibles-tactiles.md,
   « une cible ne rétrécit pas »). Toujours, et non sous un palier : la largeur de
   cet écran est celle du cadre (section 12), jamais celle de la fenêtre. */
.mob-bandeau {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    /* Le retrait haut de l'appareil s'AJOUTE au rembourrage (lot 07,
       docs/zones-sures.md) : sous `viewport-fit=cover`, le bandeau commence au
       tout premier pixel de l'écran, encoche comprise. Vaut 0 sans encoche. */
    padding: calc(.75rem + var(--et-safe-haut, 0px)) 1rem .75rem;
    background: var(--cai-surface, #1b2229);
    border-bottom: 1px solid var(--cai-bord, #2f3a45);
}
.mob-marque { flex: none; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
/* `flex: 1 1 0` et non `auto` : dans une rangée qui REVIENT À LA LIGNE, un
   élément ne se comprime pas, il repousse ses voisins sur la ligne suivante. Base
   zéro, le nom de la caisse prend la place qui reste et la pastille réseau tient
   sur la première rangée. */
.mob-vendeur { display: flex; flex-direction: column; line-height: 1.1; flex: 1 1 0; min-width: 0; overflow: hidden; }
/* Le nom du point de vente est une donnée : « Camion 3 — Owendo Nord » tient sur
   trois lignes à 390 px et déforme le bandeau. Il se coupe, il ne pousse pas. */
.mob-vendeur > span,
.mob-vendeur em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-vendeur em { font-style: normal; font-size: .72rem; color: var(--cai-texte-faible, #93a1b0); }

.mob-reseau {
    flex: none;
    min-height: 44px;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid var(--cai-valider, #1f9d55);
    background: transparent;
    color: var(--cai-valider, #1f9d55);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
}
.mob-reseau.est-hors {
    border-color: var(--cai-danger, #d64545);
    color: #fff;
    background: var(--cai-danger, #d64545);
}

/* Les quatre commandes de session (X, Journal, Mouvement, Z) forment un objet :
   groupées, elles occupent la seconde rangée du bandeau d'un bloc, au lieu de
   pousser le nom de la caisse hors de l'écran. */
.mob-actions {
    flex: 1 1 100%;   /* seconde rangée du bandeau */
    order: 3;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mob-actions .mob-x { flex: 1 1 auto; }

/* Bouton Rapport X : compact, neutre, à côté de l'indicateur réseau. 44 px comme
   toute cible de cet écran — c'est la caisse qui a donné la règle au dépôt
   (docs/cibles-tactiles.md), elle ne s'en exempte pas. */
.mob-x {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte, #eef2f6);
    font-weight: 800;
    font-size: .9rem;
}
.mob-x:disabled { opacity: .4; }

/* ---------- File d'attente de synchro ---------- */
/* AU-DESSUS DU VOILE DES FEUILLES. Le bandeau est un enfant de flux normal, en
   haut de .mob-app ; le voile d'une feuille est un `inset: 0` en z-index 20 qui
   recouvre TOUTE l'application, bandeau compris. Un refus survenu feuille
   ouverte — prise de poste, cloture, mouvement d'especes, journal, qui ecrivent
   tous dans _message — s'affichait donc derriere un rideau noir a 55 %, a
   l'oppose du regard, pose en bas de l'ecran. L'ecran repondait ; personne ne
   pouvait le lire. Il faut `position` pour que le z-index prenne. */
.mob-file {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 1rem;
    background: var(--cai-surface-2, #232c35);
    border-bottom: 1px solid var(--cai-bord, #2f3a45);
    font-size: .85rem;
}
.mob-file-action { font-weight: 700; color: var(--cai-accent, #2d7ff9); }

/* ---------- Corps (défile) ---------- */
.mob-corps {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .75rem;
    padding-bottom: 6rem; /* place pour la barre d'onglets + barre panier */
}
.mob-liste { display: flex; flex-direction: column; gap: .75rem; }

/* UN POURCENTAGE DE MARGE SE MESURE SUR LA LARGEUR, jamais sur la hauteur — y
   compris `margin-top`. Le 25 % posé ici valait 98 px sur le téléphone visé et
   480 px sur un poste de travail : la phrase « aucune commande » y tombait au
   milieu d'un vide de la moitié de l'écran. La hauteur se dit en hauteur. */
.mob-vide {
    margin-top: clamp(1.5rem, 12vh, 6rem);
    text-align: center;
    color: var(--cai-texte-faible, #93a1b0);
    font-size: .95rem;
    padding: 0 2rem;
    line-height: 1.5;
}

/* ---------- Recherche / grille articles (onglet Vente) ---------- */
.mob-scan { margin-bottom: .75rem; }
.mob-scan input {
    width: 100%;
    min-height: 46px;
    padding: 0 .9rem;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface, #1b2229);
    color: var(--cai-texte, #eef2f6);
    font-size: 1rem;
}
.mob-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.mob-article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    min-height: 80px;
    padding: .7rem;
    border-radius: 12px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface, #1b2229);
    color: var(--cai-texte, #eef2f6);
    text-align: left;
}
.mob-article.est-vide { opacity: .45; }
.mob-article-nom { font-weight: 600; font-size: .9rem; }
.mob-article-bas { display: flex; align-items: baseline; justify-content: space-between; }
.mob-article-prix { font-weight: 800; }
.mob-article-stock { font-size: .72rem; color: var(--cai-texte-faible, #93a1b0); }

/* ---------- Cartes de commande (onglet Commandes) ---------- */
.mob-carte {
    border: 1px solid var(--cai-bord, #2f3a45);
    border-radius: 12px;
    background: var(--cai-surface, #1b2229);
    padding: .8rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.mob-carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.mob-carte-tete > span:first-child { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; }
.mob-carte-tete em { font-style: normal; font-size: .72rem; color: var(--cai-texte-faible, #93a1b0); font-weight: 400; }
.mob-carte-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--cai-texte-faible, #93a1b0); }
.mob-montant { font-size: 1rem; font-weight: 800; color: var(--cai-texte, #eef2f6); }

.mob-statut {
    flex: 0 0 auto;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    border: 1px solid var(--cai-bord, #2f3a45);
}
.mob-statut.est-recue    { color: #ffd166; border-color: #ffd166; }
.mob-statut.est-acceptee { color: var(--cai-accent, #2d7ff9); border-color: var(--cai-accent, #2d7ff9); }
.mob-statut.est-prete    { color: var(--cai-valider, #1f9d55); border-color: var(--cai-valider, #1f9d55); }
.mob-statut.est-servie   { color: var(--cai-texte-faible, #93a1b0); border-color: var(--cai-texte-faible, #93a1b0); }
.mob-statut.est-annulee  { color: var(--cai-danger, #d64545); border-color: var(--cai-danger, #d64545); }

.mob-avert {
    font-size: .78rem;
    padding: .4rem .55rem;
    border-radius: 8px;
    background: rgba(214, 69, 69, .12);
    border: 1px solid var(--cai-danger, #d64545);
    color: #f2b8b8;
}

.mob-carte-actions { display: flex; gap: .5rem; }
/* Une rangée de CHOIX (types de mouvement) et non deux actions opposées : elle
   passe à la ligne au lieu de comprimer ses boutons sous la cible tactile. */
.mob-carte-actions-choix { flex-wrap: wrap; }
.mob-btn {
    flex: 1 1 auto;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte, #eef2f6);
    font-weight: 700;
    font-size: .9rem;
}
.mob-btn.est-cta { background: var(--cai-valider, #1f9d55); border-color: var(--cai-valider, #1f9d55); color: #fff; }
.mob-btn.est-danger { background: transparent; border-color: var(--cai-danger, #d64545); color: var(--cai-danger, #d64545); flex: 0 0 40%; }
.mob-btn:disabled { opacity: .5; }
/* Bouton qui porte deux valeurs aux deux bouts (nom du client / ses points). */
.mob-btn-rangee { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* Le meme bouton porte par un <a> : un lien n'a ni le centrage ni la boite d'un
   <button>, et `min-height` seul y poserait le texte en haut a gauche. */
.mob-btn-lien {
    display: flex; align-items: center; justify-content: center;
    margin-top: .5rem; text-decoration: none;
}

/* ---------- Barre panier (onglet Vente) ---------- */
.mob-barre-panier {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: calc(64px + .5rem);
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 52px;
    padding: 0 1rem;
    border: none;
    border-radius: 12px;
    background: var(--cai-accent, #2d7ff9);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.mob-pastille {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: .8rem;
}
.mob-barre-total { margin-left: auto; font-size: 1.05rem; }

/* ---------- Onglets bas ---------- */
.mob-onglets {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--cai-surface, #1b2229);
    border-top: 1px solid var(--cai-bord, #2f3a45);
    /* Indicateur d'accueil : la rangée d'onglets est la dernière chose de
       l'écran, c'est elle qui le paie. Le jeton remplace l'`env()` écrit ici,
       qui valait 0 faute de `viewport-fit=cover` — voir docs/zones-sures.md. */
    padding-bottom: var(--et-safe-bas, 0px);
}
.mob-onglet {
    position: relative;
    min-height: 60px;
    border: none;
    background: transparent;
    color: var(--cai-texte-faible, #93a1b0);
    font-size: .8rem;
    font-weight: 600;
}
.mob-onglet.actif { color: var(--cai-accent, #2d7ff9); }
.mob-onglet.actif::before {
    content: "";
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--cai-accent, #2d7ff9);
}
.mob-badge {
    position: absolute;
    top: 8px;
    margin-left: .35rem;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--cai-danger, #d64545);
    color: #fff;
    font-size: .68rem;
    line-height: 18px;
}

/* ---------- Feuille montante (motif d'annulation) ---------- */
.mob-feuille-fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: flex-end;
    z-index: 20;
}
.mob-feuille {
    width: 100%;
    /* La clôture (comptage, écart, motif) et le journal dépassent la hauteur d'un
       téléphone tenu en main dès que le clavier logiciel monte : la feuille défile
       chez elle plutôt que de pousser ses boutons hors de l'écran. */
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cai-surface, #1b2229);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 1rem 1rem calc(1rem + var(--et-safe-bas, 0px));
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
/* Un état vide DANS une feuille (« Calcul du théorique… ») n'a pas le vide d'un
   écran à combler : il se serre. C'était une largeur écrite dans la page. */
.mob-feuille .mob-vide { margin-top: 0; padding: 0; }
.mob-feuille h3 { margin: 0; font-size: 1.05rem; }
.mob-feuille textarea {
    width: 100%;
    min-height: 90px;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte, #eef2f6);
    font-size: 1rem;
    resize: none;
}

/* ---------- Feuille panier (onglet Vente) ---------- */
.mob-panier-lignes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mob-panier-ligne {
    display: flex;
    align-items: center;
    gap: .6rem;
}
/* Heure d'un ticket, en second plan du numéro qu'elle suit. */
.mob-heure { font-style: normal; color: var(--cai-texte-faible, #93a1b0); }
.mob-panier-nom { flex: 1 1 auto; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-panier-total { flex: 0 0 auto; font-weight: 700; min-width: 5.5rem; text-align: right; }

/*  LIGNE DE TICKET DU JOURNAL — LES ACTIONS SUR LEUR PROPRE RANG.
    Réimprimer, éditer en 80 mm, éditer en A4, envoyer, retourner : cinq cibles
    de 44 px, soit 220 px, auxquels s'ajoutent le montant et ses gouttières. Sur
    un téléphone de 390 px il ne restait pas 100 px au numéro de ticket — la
    seule chose qui l'identifie, et qui se serait donc lue « T000123 · 14:3… ».

    PAS DE MÉDIA-REQUÊTE, ET C'EST VOULU : la largeur de cet écran est celle de
    son CADRE (480 px au-delà de 641 px, section 12), non celle de la fenêtre.
    Une média-requête sur la fenêtre aurait manqué le repli dès que le cadre
    s'applique — exactement le piège déjà relevé pour .mob-bandeau. Le rang
    d'actions vaut donc à toute largeur.

    Aucune cible ne rétrécit : c'est la ligne qui se plie, pas le bouton
    (règle tactile, docs/cibles-tactiles.md). */
.mob-ligne-ticket { flex-wrap: wrap; }
.mob-ticket-actions {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
}

.mob-pas { display: flex; align-items: center; gap: .4rem; }
.mob-pas-btn {
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte, #eef2f6);
    font-size: 1.3rem;
    line-height: 1;
}
.mob-pas-qte { min-width: 2.2rem; text-align: center; font-weight: 700; }

/* ---------- Client fidélité (feuille panier) ---------- */
.mob-client { display: flex; align-items: center; gap: .5rem; }
.mob-client-add {
    flex: 1 1 auto;
    min-height: 46px;
    border-radius: 10px;
    border: 1px dashed var(--cai-bord, #2f3a45);
    background: transparent;
    color: var(--cai-accent, #2d7ff9);
    font-weight: 600;
    font-size: .9rem;
}
.mob-client-info {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 .75rem;
    border-radius: 10px;
    background: var(--cai-surface-2, #232c35);
    border: 1px solid var(--cai-bord, #2f3a45);
    font-weight: 600;
}
.mob-client-x {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte-faible, #93a1b0);
    font-size: 1rem;
}

/* L'ERREUR D'UN CHAMP SE LIT SOUS LE CHAMP. Regle du gabarit (ChampFiche : une
   seule ligne sous le champ, l'erreur primant sur l'aide). Un refus de PIN
   renvoye au bandeau general se lit a l'autre bout de l'ecran, loin du champ
   qui l'a provoque — et, feuille ouverte, sous le voile. */
.mob-champ-err {
    margin: .5rem 0 0;
    color: var(--cai-danger, #d64545);
    font-size: .85rem;
    line-height: 1.35;
}

.mob-recu { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mob-recu label { color: var(--cai-texte-faible, #93a1b0); font-size: .9rem; }
/* `45%` sans borne haute : à 1600 px l'intitulé et son champ se retrouvaient à
   760 px l'un de l'autre, aux deux bords de la feuille. Le cadre de la section 12
   suffirait, mais une borne au champ coûte une ligne et tient sans lui. */
/*  UNE ADRESSE N'EST PAS UN MONTANT.
    .mob-recu cadre un champ court à droite de son intitulé — 12 rem au plus,
    aligné à droite : la forme d'une somme. Une adresse e-mail y serait rognée à
    la saisie et illisible à la relecture, alors que c'est précisément ce qu'on
    fait relire au client avant l'envoi. Elle prend donc la ligne entière, sous
    son intitulé, alignée à gauche comme tout texte. */
.mob-recu-texte { flex-direction: column; align-items: stretch; gap: .35rem; }
.mob-recu-texte input { flex: 1 1 auto; text-align: left; font-size: 1rem; }

.mob-recu input {
    flex: 0 1 clamp(7rem, 45%, 12rem);
    min-height: 46px;
    padding: 0 .75rem;
    border-radius: 10px;
    border: 1px solid var(--cai-bord, #2f3a45);
    background: var(--cai-surface-2, #232c35);
    color: var(--cai-texte, #eef2f6);
    font-size: 1.1rem;
    text-align: right;
}

/* ============================================================================
   12. PALIERS DE LARGEUR
   docs/conventions-responsive.md — échelle retenue 560 / 640 / 720 / 1024 / 1100,
   et 641 en min-width, jumelle de 640.

   Cette feuille n'avait AUCUNE média-requête. C'est défendable pour un écran
   qu'on ne sert qu'à un téléphone ; ça ne l'est plus dès qu'on l'ouvre sur un
   poste — recette, démonstration, dépannage à distance — où le même balisage
   s'étirait jusqu'à 1600 px : intitulé et champ à chaque bord de la feuille,
   deux boutons de 780 px, et l'état vide seul au centre d'un écran noir.

   La réponse n'est pas une mise en page de bureau : cet écran est pensé au
   pouce, pour un vendeur debout, et une seconde grille à maintenir divergerait
   au premier incrément. Au-delà du téléphone, il se CADRE — colonne centrée à
   la largeur pour laquelle il est dessiné, le reste de la fenêtre en retrait.
   ============================================================================ */

/* ---------- Au-delà du téléphone : cadrer, ne pas étirer ---------- */
@media (min-width: 641px) {
    .mob-app {
        max-width: var(--mob-appareil-l, 480px);
        margin-inline: auto;
        border-inline: 1px solid var(--cai-bord, #2f3a45);
        box-shadow: 0 0 48px rgba(0, 0, 0, .5);
    }

    /* Le hors-cadre, dans la teinte du poste assombrie — pas un blanc de page qui
       éblouirait autour d'un écran sombre.
       `position: fixed` : le pseudo-élément a le VIEWPORT pour bloc conteneur, il
       n'est donc pas rogné par l'`overflow: hidden` de .mob-app. `z-index: -1` :
       .mob-app est positionné mais en `z-index: auto` — il n'établit pas de
       contexte d'empilement, l'enfant négatif passe donc derrière son fond. */
    .mob-app::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #0a0d10;
        background: color-mix(in srgb, var(--cai-fond, #101418) 65%, #000);
    }
}

/* ---------- Les bords de l'appareil, en paysage ---------- */
/* SEULEMENT SOUS 641 px, ET C'EST LA CONSÉQUENCE DU CADRE : au-delà, la colonne
   est centrée (section « Au-delà du téléphone » ci-dessous) et ne touche plus
   les bords de la fenêtre — lui appliquer le retrait de l'encoche décalerait
   son contenu pour une encoche qui est ailleurs. Un iPhone à encoche tenu en
   PAYSAGE fait 844 px de large : il passe donc par le cadre, et non par ici.
   Le retrait HAUT, lui, vaut dans les deux cas : cadrée ou non, la colonne
   commence au premier pixel de l'écran (voir .mob-bandeau). */
@media (max-width: 640px) {
    .mob-bandeau {
        padding-left: calc(1rem + var(--et-safe-gauche, 0px));
        padding-right: calc(1rem + var(--et-safe-droite, 0px));
    }
    .mob-corps {
        padding-left: calc(.75rem + var(--et-safe-gauche, 0px));
        padding-right: calc(.75rem + var(--et-safe-droite, 0px));
    }
    .mob-onglets {
        padding-left: var(--et-safe-gauche, 0px);
        padding-right: var(--et-safe-droite, 0px);
    }
}

/* ---------- Téléphone : les rembourrages rendus ---------- */
/* Le repli du bandeau n'est PAS ici : il vaut à toute largeur, parce que la
   largeur de cet écran est celle de son cadre et non celle de la fenêtre — une
   média-requête l'aurait manqué dès que le cadre s'applique (section « Bandeau »).
   Ce palier ne rend que de la place : à 560 px, chaque pixel est du contenu. */
@media (max-width: 560px) {
    .mob-bandeau {
        gap: .5rem .6rem;
        padding: calc(.6rem + var(--et-safe-haut, 0px))
                 calc(.75rem + var(--et-safe-droite, 0px))
                 .6rem
                 calc(.75rem + var(--et-safe-gauche, 0px));
    }
    .mob-corps {
        padding-left: calc(.6rem + var(--et-safe-gauche, 0px));
        padding-right: calc(.6rem + var(--et-safe-droite, 0px));
    }
}