/* ===========================================================================
   Aurora — header.css · refonte du HAUT de la barre laterale
   ---------------------------------------------------------------------------
   Charge EN DERNIER : style.css -> themes.css -> anim.css -> polish.css -> ici.
   Couche LOOK uniquement : aucune @keyframes, aucune animation d'entree
   (anim.css s'en occupe). Uniquement des `transition` courtes sur les etats.

   LE PROBLEME (mesure dans le navigateur, barre laterale de 318 px)
   ----------------------------------------------------------------
   `.me-bar` etait UNE seule rangee flex : avatar (44) + `.me-info` + QUATRE
   boutons de 34 px. Sur les 288 px utiles, l'avatar et les boutons en
   mangeaient 235 : il restait 53 px a l'identite. Resultat, « Clem240 » se
   changeait en « Clem… » et la pastille de disponibilite (102 px) etait
   tranchee en plein milieu.

   LA SOLUTION : une GRILLE a deux rangees
   ---------------------------------------
       ┌────────┬───────────────────────┬─────┬─────┐
       │        │  Clem240              │ ✨  │ 🔍  │   rangee 1
       │ avatar ├───────────────────────┼─────┼─────┤
       │        │  ● hummmmmm ⌄         │ 🌙  │ ⚙️  │   rangee 2
       └────────┴───────────────────────┴─────┴─────┘
   L'avatar et le bloc identite occupent les DEUX rangees ; les quatre actions
   se replient en un pave 2x2 a droite. On passe ainsi de 53 px a ~142 px pour
   l'identite (52 + 10 + X + 10 + 32 + 10 + 32 = 288), soit presque le triple,
   SANS retirer un seul bouton : les quatre restent atteignables en un clic.

   Pourquoi une grille et pas un simple `flex-wrap` : avec la grille, l'ordre
   visuel ne depend PAS de l'ordre du DOM. Chaque enfant est place par son
   identifiant (`#me-avatar`, `#btn-moments`, …), tous garantis par app.js. Le
   balisage d'index.html reste donc strictement inchange.
   =========================================================================== */


/* ===========================================================================
   1. LA GRILLE DE L'EN-TETE
   =========================================================================== */

.me-bar {
  display: grid;
  /* avatar | identite (souple, minmax(0,…) pour autoriser la troncature)
     | 2 colonnes d'actions */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "av info a1 a2"
    "av info a3 a4";
  /* rangee : 6 px entre les deux etages de boutons.
     colonne : 10 px, l'air minimum pour que l'anneau de l'avatar respire. */
  gap: 6px 10px;
  /* DEBORD DU PAVE — une seule source de verite.
     Le pave d'actions (::after) s'elargit par marges negatives pour aerer les
     boutons. A gauche c'est sans danger : il mord dans la gouttiere de 10 px.
     A DROITE il sortait de la barre — mesure au navigateur : `.me-bar` faisait
     282 px de large pour 288 px de contenu, et son bord droit tombait 6 px plus
     loin que le champ de recherche, les onglets et le pied, tous alignes sur le
     meme aplomb. Une seule piece de l'entete depassait la colonne : le genre de
     decalage qu'on remarque sans savoir le nommer.
     On rend donc le remplissage droit et la marge negative INSEPARABLES : une
     seule variable les porte, et le point mobile (section 9) n'a qu'elle a
     changer. Deux nombres ecrits a la main auraient derive — c'est d'ailleurs
     ce qui s'etait produit sous 820 px, ou la marge passait a 7 px sans que le
     remplissage suive : il restait 1 px de debord. */
  --pave-debord: 6px;
  padding-right: var(--pave-debord);
  align-items: center;
  /* Le pave d'actions est peint par ::after en z-index 0 : on isole pour que
     ce fond ne remonte jamais au-dessus d'un autre bloc de la barre. */
  isolation: isolate;
}

/* Placement explicite par identifiant : app.js garantit ces id, et cela reste
   juste meme si quelqu'un deplace une ligne dans index.html. */
.me-bar > #me-avatar    { grid-area: av; align-self: center; }
.me-bar > .me-info      { grid-area: info; }
.me-bar > #btn-moments  { grid-area: a1; }
.me-bar > #btn-search2  { grid-area: a2; }
.me-bar > #theme-btn    { grid-area: a3; }
.me-bar > #settings-btn { grid-area: a4; }

/* Les vrais enfants passent AU-DESSUS du fond du pave (::after, z-index 0). */
.me-bar > * { position: relative; z-index: 1; }

/* Fond commun des quatre actions : sans lui, quatre boutons bordes en 2x2
   ressemblent a un accident. Groupes sur une seule surface creusee, ils
   deviennent un « pave d'actions » manifestement voulu.
   Astuce : un pseudo-element d'un conteneur grille EST un item de grille ; on
   lui donne donc simplement la zone des colonnes 3-4 sur les deux rangees.
   Ses marges negatives ne perturbent pas le calcul des pistes (une
   contribution negative ne peut pas gagner un max()). */
.me-bar::after {
  content: "";
  grid-area: 1 / 3 / 3 / 5;
  /* `align-items: center` s'applique aussi aux pseudo-elements : sans ce
     stretch explicite, un item vide retombe a 0 px de haut et le pave se
     reduit a un trait. */
  align-self: stretch;
  margin: -5px calc(var(--pave-debord) * -1);
  border-radius: 15px;
  background: var(--sunken);
  /* PAS --border ici : en theme clair il vaut rgba(255,255,255,.75), soit un
     filet BLANC sur un fond clair — le pave perdait son contour et le fond
     --sunken (6 % d'encre) ne suffisait pas a le detacher. Derive de --text, le
     filet suit le theme : clair sur fond sombre, sombre sur fond clair. */
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  z-index: 0;
  pointer-events: none;
}


/* ===========================================================================
   2. AVATAR : anneau de disponibilite, survol, pastille « en ligne »
   =========================================================================== */

/* Teinte de l'anneau pilotee par la disponibilite REELLE, sans une ligne de JS :
   `:has()` regarde l'etat de `#presence-btn`, qui est deja tenu a jour par
   updatePresencePill(). Valeur de repli : « en ligne ». */
.me-bar { --me-presence: var(--ok); }
.me-bar:has(#presence-btn[data-p="away"])      { --me-presence: var(--warn); }
.me-bar:has(#presence-btn[data-p="dnd"])       { --me-presence: var(--danger); }
.me-bar:has(#presence-btn[data-p="invisible"]) { --me-presence: var(--muted); }

#me-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
  /* Seul `transform` est anime : l'ombre et la bordure changent sans
     transition pour ne rien couter au compositeur. */
  transition: transform .16s cubic-bezier(.22, 1, .36, 1);
}

/* L'anneau. `::before` est libre : style.css n'utilise que `::after` (pastille
   « en ligne »). Le retrait de 4 px laisse un liseré de fond entre la photo et
   l'anneau, sinon les deux se confondent quand l'avatar est clair. */
#me-avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--me-presence);
  opacity: .8;
  transition: opacity .18s linear, transform .16s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

#me-avatar:hover { transform: scale(1.05); }
#me-avatar:hover::before { opacity: 1; transform: scale(1.04); }
#me-avatar:active { transform: scale(.97); }

/* Pastille « en ligne » : FILET DE SECURITE, inactif aujourd'hui.
   Verifie dans app.js : `applyAvatar($('#me-avatar'), store.me)` ne pose jamais
   la classe `.online` sur SON PROPRE avatar (elle n'est posee que sur les
   avatars de la liste, via `avatarEl(c, 'online')`). La regle ne s'applique
   donc a rien pour l'instant — et c'est tres bien ainsi : la disponibilite est
   deja portee par l'anneau ci-dessus ET par la pastille de texte, une
   troisieme redite serait du bruit.
   On la garde quand meme : le jour ou app.js posera la classe, la pastille de
   style.css (calibree pour un avatar de 44 px) flotterait hors du cercle a
   52 px. Cette regle la recale et la cercle avec le fond du theme. */
#me-avatar.online::after {
  right: 2px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  background: var(--me-presence);
  border: 2.5px solid var(--bg-1);
}


/* ===========================================================================
   3. IDENTITE : le nom en entier, la pastille de disponibilite entiere
   =========================================================================== */

.me-info {
  display: flex;
  flex-direction: column;
  /* flex-start, sinon la pastille s'etirerait sur toute la largeur du bloc. */
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  /* min-width:0 est INDISPENSABLE : sans lui un item de grille refuse de
     descendre sous la largeur de son contenu et l'ellipse ne se declenche
     jamais — c'est exactement ce qui debordait avant. */
  min-width: 0;
  overflow: visible;   /* l'ancien overflow:hidden coupait le halo de focus */
}

.me-info .name {
  max-width: 100%;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  /* Filet de securite : a 142 px de large un pseudo de 19 caracteres passe
     entier. Au-dela seulement, l'ellipse prend le relais. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Pastille de disponibilite -------------------------------------------
   Le texte est LIBRE (store.me.status) et peut etre tres long. On ne tronque
   donc jamais la pastille elle-meme : c'est le LIBELLE, a l'interieur, qui
   recoit les points de suspension. La puce de couleur et le chevron restent
   toujours visibles, ce qui evite la coupe en plein milieu d'avant. */
.presence-pill {
  max-width: 100%;
  min-width: 0;
  gap: 6px;
  padding: 3px 10px;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  transition: background .16s linear, border-color .16s linear, color .16s linear;
}

.presence-pill:hover {
  background: var(--glass-3);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}

/* `flex: none` : la puce ne doit JAMAIS etre comprimee ni disparaitre, c'est
   le seul repere de couleur de l'etat. */
.presence-pill .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  /* Petit halo : la puce reste perceptible meme reduite a 8 px. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

/* Les puces d'etat etaient en dur dans style.css (#ffca4f, #ff5d6c…) : elles
   ignoraient le theme clair, ou le jaune vif devenait illisible. On repasse
   sur les jetons, qui ont deja une variante assombrie en theme clair. */
.presence-pill[data-p="away"] .dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}
.presence-pill[data-p="dnd"] .dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.presence-pill[data-p="invisible"] .dot {
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 20%, transparent);
}

/* C'est le libelle — et lui seul — qui se tronque proprement. */
#presence-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron : la pastille ouvre un menu, rien ne le disait. Dessine en bordures
   (aucune police d'icone requise, compatible CSP stricte). */
#presence-btn::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: -1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .65;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), opacity .16s linear;
}
#presence-btn:hover::after { opacity: 1; transform: translateY(-1px) rotate(45deg); }


/* ===========================================================================
   4. LE PAVE D'ACTIONS (4 boutons 2x2)
   =========================================================================== */

/* Dans le pave, les boutons perdent bordure et fond : quatre cadres colles
   les uns aux autres font une grille de fenetres. La surface commune est deja
   dessinee par .me-bar::after, chaque bouton ne montre la sienne qu'au survol. */
.me-bar .icon-btn.small {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  /* Le translateY(-2px) herite de style.css faisait sauter les boutons hors du
     pave. Une mise a l'echelle reste contenue. */
  transition: background .16s linear, color .16s linear,
              transform .14s cubic-bezier(.22, 1, .36, 1);
}
.me-bar .icon-btn.small .ic { width: 17px; height: 17px; }

.me-bar .icon-btn.small:hover {
  background: var(--glass-3);
  color: var(--text);
  transform: scale(1.08);
}
.me-bar .icon-btn.small:active { transform: scale(.93); }

/* L'engrenage est l'action « lourde » (tous les reglages) : on la teinte
   d'accent au survol pour la distinguer des trois autres. */
.me-bar #settings-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-3));
}


/* ===========================================================================
   5. CHAMP DE RECHERCHE
   =========================================================================== */

.search-wrap { position: relative; display: flex; align-items: center; }

.search-wrap .search {
  /* 38 px a gauche pour la loupe, 38 a droite pour la croix d'effacement :
     sans cette reserve le texte passait sous les deux icones. */
  padding: 11px 38px;
  font-size: .88rem;
  border-radius: 13px;
  background: var(--sunken);
  border: 1px solid var(--border);
  transition: border-color .16s linear, background .16s linear, box-shadow .16s linear;
}

.search-wrap .search:hover { background: var(--sunken-2); }

/* style.css posait un halo bleu en dur (rgba(94,173,255,.22)) : il restait
   bleu sur les palettes orange, rose ou verte. On le derive de l'accent. */
.search-wrap .search:focus {
  background: var(--sunken-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

.search-wrap .search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: 1;
  pointer-events: none;   /* la loupe ne doit pas voler le clic au champ */
  transition: color .16s linear;
}
.search-wrap .search-ico .ic { width: 16px; height: 16px; }

/* La loupe s'allume avec le champ : le focus se lit d'un coup d'oeil. */
.search-wrap:focus-within .search-ico { color: var(--accent); }

/* Croix d'effacement : une vraie cible ronde, pas une icone posee dans le vide. */
#search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--glass-2);
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s linear, color .16s linear;
}
#search-clear .ic { width: 14px; height: 14px; }
#search-clear:hover { background: var(--glass-3); color: var(--text); }


/* ===========================================================================
   6. ONGLETS  Discussions / Statuts / Favoris / Archivées
   =========================================================================== */

/* « Discussions · Statuts · Favoris · Archivées » dans 280 px, c'est la limite
   exacte : le moindre compteur de non-lus fait deborder. Deux reglages
   complementaires plutot qu'un texte ecrase (style.css tombait a .7rem en
   dessous de 820 px) :
     • une typo serree et des marges internes justes, pour que le cas courant
       tienne SANS defilement ;
     • `overflow: auto hidden` en filet : des que ca deborde vraiment, la barre
       defile doucement au lieu de couper. Ascenseur masque — le geste reste,
       la ligne grise disparait.
   `flex: 1 0 auto` est la cle : grow 1 pour se partager le rab quand tout
   tient, shrink 0 pour ne JAMAIS comprimer un libelle. */
.tabs {
  gap: 3px;
  padding: 4px;
  border-radius: 13px;
  background: var(--sunken);
  overflow: auto hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }
/* PAS de scroll-snap ici. Avec `scroll-snap-align: center` sur les QUATRE
   onglets, le navigateur ramene toujours un onglet au centre de la piste : le
   premier et le dernier — ceux qui touchent un bord — ne peuvent alors jamais
   etre amenes entierement dans le champ, ils rebondissent vers le centre.
   « Discussions » (le plus large, et l'onglet par defaut) etait le premier
   perdant. Un defilement libre est ici strictement meilleur. */

.tab-btn {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: max-content;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: .73rem;
  font-weight: 620;
  letter-spacing: -.012em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .16s linear, background .16s linear;
}

/* Hierarchie : au repos les inactifs sont discrets, au survol ils reagissent
   sans imiter l'etat actif (pas de fond plein, juste la couleur du texte). */
.tab-btn:not(.active):hover { color: var(--text); background: var(--glass-2); }

/* Onglet ACTIF.
   Prudence : anim.css fait glisser une pastille commune (`.tabs::after`) des
   que `data-an-pill` est pose, et neutralise alors le fond des boutons. On ne
   redonne un fond QUE si cette pastille n'est pas active, sinon on aurait deux
   pastilles superposees, l'une fixe et l'autre glissante. */
.tabs:not([data-an-pill]) .tab-btn.active {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 38%, var(--glass-3)),
    var(--glass-3)
  );
  /* Uniquement une ombre INTERNE : `.tabs` est desormais une boite a
     defilement (`overflow: auto hidden`), qui rogne tout ce qui deborde de sa
     boite de remplissage. Une ombre portee exterieure y serait tranchee net a
     droite et a gauche — une bavure grise, pas un relief. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
/* Dans les deux cas (pastille fixe OU glissante) le libelle actif s'affirme. */
.tabs .tab-btn.active { color: var(--text); font-weight: 750; }

/* --- Compteur de non-lus --------------------------------------------------
   Deux ecritures acceptees, au choix de app.js :
     • un attribut  → <button class="tab-btn" data-count="3">  (zero JS de plus
       qu'une affectation d'attribut, le contenu vient de attr())
     • un enfant    → <span class="tab-count">3</span>
   `:not([data-count="0"])` : un compteur a zero ne doit rien afficher. */
.tab-btn[data-count]:not([data-count=""]):not([data-count="0"])::after {
  content: attr(data-count);
}
.tab-btn[data-count]:not([data-count=""]):not([data-count="0"])::after,
.tab-btn .tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--glass-3);
  color: var(--muted);
  font-size: .64rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Sur l'onglet actif, le compteur passe en accent. --degrade-txt est la version
   assombrie de l'accent, la seule surface auditee pour porter du texte blanc :
   le compteur reste lisible sur les 7 palettes, en clair comme en sombre. */
.tab-btn.active[data-count]:not([data-count=""]):not([data-count="0"])::after,
.tab-btn.active .tab-count {
  background: var(--degrade-txt);
  color: var(--sur-accent);
}


/* ===========================================================================
   7. PIED DE LA BARRE LATERALE
   =========================================================================== */

/* Le pied flottait a la suite de la liste, sans rien qui l'en detache. Les
   marges negatives font courir le filet jusqu'aux bords de la barre (padding
   15 px), ce qui le pose comme une vraie zone et non comme un dernier item. */
.sidebar-foot,
.side-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px -15px -15px;
  padding: 11px 15px 15px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.sidebar-foot .btn,
.side-foot .btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--glass-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background .16s linear, border-color .16s linear,
              transform .14s cubic-bezier(.22, 1, .36, 1);
}
.sidebar-foot .btn .ic,
.side-foot .btn .ic { width: 16px; height: 16px; flex: none; color: var(--accent); }

.sidebar-foot .btn:hover,
.side-foot .btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--glass-2));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  transform: translateY(-1px);
}
.sidebar-foot .btn:active,
.side-foot .btn:active { transform: scale(.98); }

/* Deconnexion : action destructrice, elle s'annonce en rouge au survol
   seulement — la peindre en rouge au repos hurlerait dans toute la barre. */
#logout-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--muted);
  transition: background .16s linear, border-color .16s linear,
              color .16s linear, transform .14s cubic-bezier(.22, 1, .36, 1);
}
#logout-btn:hover {
  background: color-mix(in srgb, var(--danger) 20%, var(--glass-2));
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: var(--danger);
  transform: none;   /* annule le saut de .icon-btn:hover, deplace ici */
}
#logout-btn:active { transform: scale(.93); }


/* ===========================================================================
   8. ACCESSIBILITE — parcours au clavier
   =========================================================================== */

/* Les fonds transparents du pave rendaient le focus clavier invisible.
   `:focus-visible` seulement : la souris ne declenche pas de contour. */
.me-bar #me-avatar:focus-visible,
.me-bar .icon-btn:focus-visible,
#presence-btn:focus-visible,
.tab-btn:focus-visible,
#search-clear:focus-visible,
.sidebar-foot .btn:focus-visible,
.side-foot .btn:focus-visible,
#logout-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* EXCEPTION pour les onglets : `.tabs` est une boite a defilement, elle rogne
   a sa boite de remplissage (4 px). Un contour pose 2 px A L'EXTERIEUR du
   bouton, epais de 2 px, arrive pile sur l'arete du rognage : selon l'arrondi
   du navigateur il disparait, et sur les onglets des DEUX bouts il est
   franchement coupe. On le dessine donc a l'INTERIEUR : jamais rogne, et il ne
   depend plus du remplissage de `.tabs`. */
.tab-btn:focus-visible { outline-offset: -2px; }

/* L'avatar est rond : le contour doit l'etre aussi. */
.me-bar #me-avatar:focus-visible { border-radius: 50%; }


/* ===========================================================================
   9. RESPONSIVE
   =========================================================================== */

/* Sous 820 px la barre laterale occupe tout l'ecran (style.css l.456) : la
   place n'est plus le probleme, le doigt l'est. On garde le pave 2x2 — qui
   reste tres lisible — mais on remonte les cibles a 38 px. */
@media (max-width: 820px) {
  /* Le debord passe a 7 px : la variable suffit, le remplissage droit de
     `.me-bar` et la marge du pave se recalent ensemble. */
  .me-bar { gap: 7px 12px; --pave-debord: 7px; }
  #me-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
  .me-bar .icon-btn.small { width: 38px; height: 38px; border-radius: 12px; }
  .me-bar .icon-btn.small .ic { width: 19px; height: 19px; }
  .me-bar::after { border-radius: 17px; }
  .me-info { gap: 6px; }
  .me-info .name { font-size: 1rem; }
  .presence-pill { font-size: .75rem; padding: 4px 11px; }

  /* style.css ecrasait les onglets a .7rem pour les faire rentrer de force.
     Ce n'est plus necessaire : la barre defile, et l'ecran est large. */
  .tabs .tab-btn { font-size: .8rem; padding: 8px 12px; }

  /* Le pied garde ses marges negatives de -15px : contrairement a ce qu'on
     pourrait croire, `.sidebar` NE CHANGE PAS de remplissage sous 820 px.
     style.css l.459 n'y touche que sa position (`inset: 8px`) ; les 15 px de
     `.sidebar` (l.254) valent a toutes les largeurs. Avec -8px, le filet
     s'arretait a 7 px de chaque bord et il restait 7 px de vide sous le pied.
     Pas de declaration ici : la regle de base est deja la bonne.

     Le bouton de deconnexion, lui, doit suivre les quatre boutons de l'entete
     passes a 38 px : une cible de 34 px au doigt, c'est sous le minimum. */
  #logout-btn { width: 38px; height: 38px; }
}

/* Ecrans tres etroits : on protege d'abord l'identite, en rognant les gouttieres
   plutot que la largeur du nom. */
@media (max-width: 400px) {
  .me-bar { gap: 6px 9px; }
  #me-avatar { width: 50px; height: 50px; }
  .me-bar .icon-btn.small { width: 36px; height: 36px; }
}


/* ===========================================================================
   10. MOUVEMENT REDUIT
   =========================================================================== */

/* Tout ce qui bouge ici est un etat (survol, appui, focus). Sous mouvement
   reduit on garde les changements de COULEUR — ils portent l'information — et
   on supprime les deplacements. */
@media (prefers-reduced-motion: reduce) {
  #me-avatar,
  #me-avatar::before,
  #presence-btn::after,
  .presence-pill,
  .me-bar .icon-btn.small,
  .tab-btn,
  .search-wrap .search,
  .search-wrap .search-ico,
  #search-clear,
  .sidebar-foot .btn,
  .side-foot .btn,
  #logout-btn {
    transition: none;
  }
  #me-avatar:hover,
  #me-avatar:active,
  .me-bar .icon-btn.small:hover,
  .me-bar .icon-btn.small:active,
  .sidebar-foot .btn:hover,
  .sidebar-foot .btn:active,
  .side-foot .btn:hover,
  .side-foot .btn:active,
  #logout-btn:active {
    transform: none;
  }
  #me-avatar:hover::before { transform: none; }

  /* Le chevron est un cas a part : son `rotate(45deg)` ne decore rien, il
     DESSINE la fleche a partir de deux bordures. Un `transform: none` la
     rendrait carree. On reecrit donc la transformation de repos — la rotation
     est conservee, seul le pas de 1 px au survol disparait. */
  #presence-btn:hover::after { transform: translateY(-2px) rotate(45deg); }

  .tabs { scroll-behavior: auto; }
}

/* Ecrans tactiles : le survol n'existe pas, les mises a l'echelle ne servent
   qu'a faire vaciller l'interface au moment ou le doigt se pose. */
@media (hover: none) {
  #me-avatar:hover,
  .me-bar .icon-btn.small:hover,
  .sidebar-foot .btn:hover,
  .side-foot .btn:hover { transform: none; }
}