/* ==========================================================================
   BAZA-S305 — BOUTON DE DÉCONNEXION DE LA BARRE HAUTE « MOI »
   --------------------------------------------------------------------------
   Le bouton demandé par Philippe : pictogramme MARCHE/ARRÊT universel (CEI
   5009), en haut à droite de l'écran « Moi », aligné sur le titre.

   CE QUI EST DESSINÉ ICI : la CIBLE (44x44 px) et ses états. Le pictogramme
   lui-même est un `<svg>` inline dans `RealMeScreen.tsx`, tracé en
   `currentColor` : aucune image n'est générée, aucun fichier n'est ajouté,
   aucune police d'icônes n'est chargée, et le contraste suit automatiquement
   la couleur de texte de l'en-tête (aujourd'hui `#111b21` sur `#f0f2f5`, soit
   un rapport de contraste largement au-delà du seuil AA).

   ACCESSIBILITÉ
   - cible tactile 44x44 px MINIMUM (recommandation Apple HIG / WCAG 2.5.5),
     conservée même quand le glyphe visible n'en occupe que 26 ;
   - `aria-label` ET `title` portés par le composant, tous deux issus de la clé
     i18n EXISTANTE `me.account.logout` (FR « Se déconnecter », EN « Log out »,
     ES « Cerrar sesión ») : le libellé accessible et l'infobulle desktop sont
     traduits dans les TROIS langues sans aucun texte nouveau à traduire ;
   - `:focus-visible` visible au clavier (anneau net, jamais supprimé) ;
   - le SVG est `aria-hidden` + `focusable="false"` : le lecteur d'écran
     annonce le bouton une seule fois, par son libellé.

   PORTÉE
   - Servie depuis `public/` + `<link>` : l'empreinte de la coque CSS GELÉE
     S141 reste byte-identique (aucun re-pin, PWA sans réinstallation).
   - `src/index.css` n'est pas touché.
   - Les sélecteurs sont préfixés `.s305-logout` : cette classe n'existait pas
     avant ce sprint, donc AUCUNE règle existante ne peut être atteinte.
   - Le bouton n'est rendu QUE si une session est ouverte (garde React
     `account.session !== null`) : hors session, il n'existe pas dans le DOM —
     ce n'est pas un simple masquage CSS.
   ========================================================================== */

/* La barre d'en-tête est déjà `display: flex; align-items: center`. La marge
   automatique pousse le bouton à DROITE sans toucher au reste de la barre. */
html body .app-header .header-bar .s305-logout {
  flex: 0 0 auto;
  margin-inline-start: auto;
  /* Zone sûre : sur un appareil à encoche en paysage, le bouton ne passe
     jamais sous l'arrondi (0 partout ailleurs — rendu inchangé). */
  margin-inline-end: env(safe-area-inset-right, 0px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* CIBLE TACTILE — 44x44 px, jamais réduite par la typographie ambiante. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;

  border: 0;
  border-radius: 50%;
  background: transparent;
  /* Hérite de la couleur de texte de l'en-tête : le glyphe reste lisible même
     si le thème de la barre change (vert de marque comme gris clair). */
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 120ms ease,
    opacity 120ms ease;
}

/* GLYPHE — 26 px : dans la fourchette 25-28 px demandée, et centré dans la
   cible de 44. Le trait est tracé par le SVG (`stroke: currentColor`). */
html body .app-header .header-bar .s305-logout .s305-logout-glyph {
  display: block;
  width: 26px;
  height: 26px;
}

/* États : un aplat très léger de la couleur du texte — aucune couleur nouvelle
   n'est introduite dans la charte. */
html body .app-header .header-bar .s305-logout:hover {
  background-color: rgba(17, 27, 33, 0.08);
}

html body .app-header .header-bar .s305-logout:active {
  background-color: rgba(17, 27, 33, 0.14);
}

html body .app-header .header-bar .s305-logout:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html body .app-header .header-bar .s305-logout[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Sur un en-tête SOMBRE (dégradé vert de marque S108, encore utilisé par
   d'autres barres), l'aplat clair est le bon contraste. Détection par le
   schéma de couleurs déclaré : aucune supposition sur le thème courant. */
@media (prefers-color-scheme: dark) {
  html body .app-header .header-bar .s305-logout:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  html body .app-header .header-bar .s305-logout:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

/* Mouvement réduit : la transition est retirée (l'aplat reste instantané). */
@media (prefers-reduced-motion: reduce) {
  html body .app-header .header-bar .s305-logout {
    transition: none;
  }
}