/* ─────────────────────────────────────────────────────────────────────────
   Ngento — Cadre « téléphone » sur desktop. © 2026 Jean-François Pellet.
   ref:NGENTOJFP-1f4d9e7a2b6c4f80
   Composant PARTAGÉ : sur grand écran, la page s'affiche en colonne centrée à
   largeur de téléphone, avec des BANDES latérales UNIFORMES (même couleur, même
   largeur sur toutes les pages -> aspect cohérent). Un seul endroit à modifier.
   Sur mobile : aucun effet (la page occupe tout l'écran, comportement inchangé).
   ───────────────────────────────────────────────────────────────────────── */
/* Seuil bas (520px) : le cadre s'active dès que l'écran dépasse la colonne
   téléphone -> bandes présentes même en DEMI-écran, pas seulement en plein
   écran. En dessous (vrai téléphone), la page occupe tout l'écran. */
@media (min-width: 520px) {
  html {
    /* Bande UNIQUE appliquée partout : gris bleuté très foncé, presque noir
       (slate #0f172a) — un seul endroit pour la changer pour toutes les pages. */
    background: #0f172a !important;
  }
  body {
    max-width: 440px !important;       /* colonne un peu plus étroite -> bandes un peu plus larges */
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh;
    overflow-x: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06),
                0 8px 40px rgba(0, 0, 0, 0.28);   /* relief discret de la colonne */
    /* Contient les éléments position:fixed DANS la colonne (sinon ils
       s'étaleraient sur tout l'écran et casseraient le cadre). Un transform
       non-nul fait du body le bloc conteneur des descendants fixes. */
    transform: translateZ(0);
  }
}