/* ============================================================================
   BAZA-S307 — FINITIONS ERGONOMIQUES WEB/PWA
   ----------------------------------------------------------------------------
   Feuille ADDITIVE servie depuis `public/`, chargée par un <link> après
   `s305-coque-ratio.css`. Vite ne fusionne PAS `public/` dans le bundle : le
   CSS gelé S141 (`dist/assets/index-*.css`,
   sha256 15a0ca530340b4791e36a33c2f02ea3d616a513501a17e9ad764d1ea3e2f2428)
   reste OCTET POUR OCTET identique. Aucune ligne de `src/index.css` n'est
   touchée, aucune ligne de `s305-coque-ratio.css` non plus.

   Trois corrections, chacune avec sa cause MESURÉE :
     §1  phrase d'information de l'écran « Moi » collée aux bords ;
     §2  garde d'orientation qui s'ouvre encore sur un navigateur de bureau ;
     §3  vignette de profil dans la notification interne.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   §1 — ÉCRAN « MOI » : LA PHRASE D'INFORMATION DU BAS TOUCHAIT LES BORDS
   ----------------------------------------------------------------------------
   CAUSE EXACTE (mesurée, pas supposée) :
   `src/index.css` corrige DÉJÀ ce défaut — bloc « MARGES ÉCRAN MOI » — mais
   seulement pour les éléments posés sous une section :
       .me-screen .settings-section > .settings-row-hint, … { padding: 0 16px }
   Or `<p class="sheet-disclaimer">` de l'écran « Moi » n'est PAS dans une
   `.settings-section` : c'est un enfant DIRECT de
   `<main class="app-main settings-screen me-screen">`, lequel porte
   `padding: 0`. La règle de base `.sheet-disclaimer { margin: 14px 0 0 }` ne
   donne donc AUCUNE gouttière latérale : le texte se colle aux deux bords, et
   sur un écran étroit la première lettre paraît coupée.

   Ailleurs, `.sheet-disclaimer` vit à l'intérieur d'une feuille modale qui
   porte déjà ses marges : la correction est donc STRICTEMENT limitée aux
   enfants directs de `.me-screen`, pour ne rien déplacer dans les 15 autres
   usages de la classe.

   Choix assumés (mission §4) :
     - la police n'est PAS réduite (le défaut n'est pas une question de taille) ;
     - le texte n'est ni raccourci ni réécrit (FR/EN/ES intacts) ;
     - gouttière = 16px, valeur du système de design (`.settings-section-title`
       et le bloc « MARGES ÉCRAN MOI » utilisent déjà exactement 16px) ;
     - `max(16px, env(safe-area-inset-*))` : sur un écran à encoche en paysage,
       la marge s'élargit au lieu de passer SOUS l'encoche.
   -------------------------------------------------------------------------- */
.me-screen > .sheet-disclaimer {
  box-sizing: border-box;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Le même oubli concerne les autres enfants DIRECTS de `.me-screen` qui portent
   du texte libre : on applique la même gouttière, une fois pour toutes, pour
   que le défaut ne puisse pas réapparaître sous une autre balise. */
.me-screen > .settings-row-hint,
.me-screen > .form-hint,
.me-screen > .account-mode-line {
  box-sizing: border-box;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Bas de l'écran : la `.tabbar` est un FRÈRE en flux (`flex: 0 0 auto`), elle
   ne recouvre donc pas le contenu. On garde malgré tout une respiration sous la
   dernière phrase, et on ajoute la safe-area basse pour le cas — PWA plein
   écran sans tabbar — où `.me-screen` est le dernier élément de la colonne. */
.me-screen > .sheet-disclaimer:last-child {
  padding-bottom: env(safe-area-inset-bottom);
}


/* ----------------------------------------------------------------------------
   §2 — GARDE D'ORIENTATION : DÉTECTION PAR CAPACITÉS, PLUS PAR LARGEUR
   ----------------------------------------------------------------------------
   ÉTAT MESURÉ AVANT (live S305B-LISIBILITE-9277c7ad, Chromium réel) :

   `src/index.css` ouvre l'overlay sous
       @media (orientation: landscape) and (max-height: 480px)
   et `s305-coque-ratio.css` le neutralise sous
       @media (min-width: 768px) { html body .device .orientation-guard }

   Ce garde-fou en LARGEUR laisse passer deux cas, tous deux reproduits :

   (a) FAUX POSITIF — navigateur de BUREAU dont le viewport CSS descend sous
       768px de large : la fenêtre entière est recouverte par l'écran vert
       « Tournez votre téléphone ». Mesuré à 640x295 (1280x720 @200%),
       740x430 (fenêtre restaurée) et 683x319 (1366x768 @200%), avec
       pointer:coarse = false et hover:none = false — donc aucun téléphone.

   (b) FAUX NÉGATIF — un vrai iPhone en PAYSAGE mesure 844x390 (iPhone 14/15)
       à 932x430 (Pro Max) : sa LARGEUR dépasse 768px, la règle S305 le prend
       pour un bureau et éteint la garde sur sa SEULE cible légitime. Seul un
       petit téléphone (667x375) la voyait encore.

   CORRECTION : on ne décide plus sur des pixels, on décide sur la CAPACITÉ
   d'entrée réelle, mesurée sur les deux familles :
       bureau  → (pointer: coarse) = false, (hover: none) = false
       mobile  → (pointer: coarse) = true,  (hover: none) = true
   `pointer`/`hover` décrivent le périphérique de pointage PRIMAIRE : un
   portable tactile piloté à la souris reste « fine/hover », et n'ouvre donc
   pas la garde. Aucune règle fondée sur le user-agent (mission §5).

   La protection n'est PAS désactivée : elle est RENDUE au seul appareil
   qu'elle protège, et elle conserve exactement la mise en forme d'origine de
   `src/index.css` (position, fond, padding, safe-areas) — seul `display` est
   arbitré ici.
   -------------------------------------------------------------------------- */

/* Neutralisation par défaut, à TOUTE largeur (corrige (a)). Spécificité
   (0,2,2) ≥ celle de la règle S305, et source postérieure : gagne partout. */
html body .orientation-guard,
html body .device .orientation-guard {
  display: none;
}

/* Réactivation ciblée : appareil réellement tactile et sans survol, tenu en
   paysage, sur un écran court (corrige (b)). Conditions strictement INCLUSES
   dans celles de `src/index.css` : tout le reste du style d'origine s'applique
   donc normalement quand cette règle est active. */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) and (hover: none) {
  html body .orientation-guard,
  html body .device .orientation-guard {
    display: flex;
  }
}


/* ----------------------------------------------------------------------------
   §3 — VIGNETTE DE PROFIL DANS LA NOTIFICATION INTERNE
   ----------------------------------------------------------------------------
   La vignette réutilise EXACTEMENT l'image que la liste des messages est déjà
   autorisée à peindre (photo publique approuvée du correspondant, route S98) :
   aucune nouvelle donnée, aucun nouvel endpoint, aucune photo d'album privé.
   Quand elle est absente, refusée ou inaccessible, le composant retombe sur le
   logo Baza : la boîte garde alors exactement la même taille, donc aucun
   décalage de mise en page.
   -------------------------------------------------------------------------- */
.demo-toast-icon-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Cadrage sans DÉFORMATION : une photo portrait ou paysage est recadrée,
     jamais étirée. */
  object-fit: cover;
  object-position: center;
  background-color: rgba(255, 255, 255, 0.14);
}

/* Repli « silhouette » quand aucune photo n'est disponible : mêmes dimensions
   que la photo, donc aucun saut de mise en page entre les deux états. */
.demo-toast-icon-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}