/* ============================================================
   FLUVO — couche « SOBRE » (10/09/2026)
   Liquid glass, palette neutre, une seule couleur d'accent, icônes filaires.
   Cette feuille vient APRÈS style.css et mobile.css : elle redéfinit les
   composants (rail, lignes, bulles, composeur, panneaux) et ajoute deux thèmes
   « sobre » (clair) et « sobre-nuit » (sombre), qui deviennent le défaut.
   Les autres thèmes restent disponibles dans les réglages.
   ============================================================ */

/* ---------- thèmes ---------- */

/* 🔴 `--opaque` — le fond des panneaux, menus et modales — ne doit dépendre QUE
   du fond du thème ACTIF, jamais de `body[data-theme]`.
   Un thème personnel (bouton « Dupliquer ») pose ses 33 variables sur `:root`
   en `!important`, mais `--opaque` n'en fait pas partie ; et comme son
   identifiant est inconnu de THEMES, `themeParId()` retombe sur le premier et
   `body[data-theme]` vaut « sobre », donc CLAIR. Résultat constaté le
   11/09/2026 : application sombre, mais modales et menus clairs avec du texte
   clair — illisibles. Une règle accrochée à `data-theme` rate ces thèmes par
   construction ; on dérive donc du fond, qui lui est toujours juste.
   Le léger tirage vers la couleur du texte garde le panneau distinct du fond :
   plus clair sur un thème sombre, plus sombre sur un thème clair. */
:root, body[data-theme] { --opaque: color-mix(in srgb, var(--bg) 92%, var(--txt) 8%); }

/* ---------- icônes filaires ---------- */
.ico { display: inline-grid; place-items: center; line-height: 0; }
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-item .ri.ico svg { width: 22px; height: 22px; }
.icone .ico svg, .outil .ico svg { width: 20px; height: 20px; }
.env .ico svg { width: 18px; height: 18px; stroke: var(--moi-txt); stroke-width: 2; }
.mob-retour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- ossature : halos discrets, cartes plus légères ---------- */
body::before, body::after, #racine::before { opacity: .55; }
#app { padding: 12px; gap: 10px; }
#rail, #panneau, #vue { box-shadow: inset 0 1px 0 var(--verre-hi), 0 10px 30px rgba(22,26,36,.05); }

/* ---------- rail ---------- */
#rail { width: 78px; flex-basis: 78px; padding: 12px 8px; gap: 2px; }
.rail-item { width: 62px; padding: 8px 2px 6px; border-radius: 14px; color: var(--txt2); gap: 4px; }
.rail-item .rl { font-size: 10px; font-weight: 600; letter-spacing: 0; max-width: 60px; }
.rail-item:hover { background: var(--survol); color: var(--txt); }
.rail-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); box-shadow: none; }
.rail-item.on .rl { color: var(--accent); }
.rail-item .pastille-n { top: 4px; right: 8px; min-width: 17px; height: 17px; font-size: 10px; box-shadow: none; }
.rail-item img.ra { width: 26px; height: 26px; }
#logo-rail { width: 34px; height: 34px; margin: 0 0 8px; }
#rail .rail-sep { width: 30px; margin: 4px 0; }

/* ---------- panneau de gauche ---------- */
#panneau { width: 380px; }
header.h { padding: 12px 14px 10px; min-height: 54px; border-bottom-color: transparent; }
#panneau header.h h1 { font-size: 21px; letter-spacing: -.02em; }
.pastille { font-size: 11px; padding: 2px 8px; background: var(--bg4); color: var(--txt2); }
.rech { padding: 2px 12px 8px; display: flex; gap: 6px; align-items: center; }
.rech input { border-radius: 12px; padding: 9px 12px; font-size: 14px; }
.barre { padding: 0 14px 6px; min-height: 20px; }
.barre .info { font-size: 12px; }
.filtre-res { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--bg4); color: var(--txt2); }
.filtre-res.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.liste { padding: 2px 8px 12px; }

/* ---------- ligne de conversation : deux lignes, un avatar, un badge ---------- */
.chat { gap: 12px; padding: 9px 10px; border-radius: 14px; align-items: center; }
.chat:hover { background: var(--survol); }
.chat.on { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: none; }
.chat .avw { position: relative; flex: none; width: 46px; height: 46px; }
.chat .av { width: 46px; height: 46px; font-size: 17px; box-shadow: none; }
.chat .avw .logo-res.badge-res, .chat .avw .badge-fusion .logo-res {
  position: absolute; width: 18px; height: 18px; font-size: 9px; opacity: 1;
  box-shadow: 0 0 0 2px var(--bg); cursor: default;
}
.chat .avw .logo-res.badge-res { right: -3px; bottom: -3px; }
.chat .avw .logo-res:hover { transform: none; }
.chat .avw .badge-fusion { position: absolute; right: -5px; bottom: -3px; display: flex; direction: rtl; }
.chat .avw .badge-fusion .logo-res { position: static; margin-left: -7px; }
.chat .avw .badge-fusion .logo-res:first-child { margin-left: 0; }
.chat .avw .badge-fusion .plusn { font-size: 9px; font-weight: 700; color: var(--txt2); background: var(--bg4); border-radius: 999px; padding: 1px 4px; margin-left: -4px; box-shadow: 0 0 0 2px var(--bg); }
.chat .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat .l1 { gap: 6px; align-items: center; }
.chat .nom { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; flex: 1 1 auto; }
.chat .fav svg { width: 12px; height: 12px; }
.chat .muet-ic { display: inline-grid; place-items: center; color: var(--txt3); flex: none; }
.chat .muet-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chat .date { font-size: 11.5px; margin-left: 6px; }
.chat .l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat .apercu { flex: 1 1 auto; font-size: 13px; }
.chat .etiq { display: flex; gap: 4px; flex: none; }
.chat .puce { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: var(--bg4); color: var(--txt2); }
.chat .puce.dossier { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.chat .puce.archive { color: var(--txt3); }
.chat.nonlu .nom { font-weight: 700; }
.chat.nonlu .apercu { color: var(--txt); font-weight: 500; }
.badge { min-width: 19px; height: 19px; font-size: 11px; box-shadow: none; }
.badge.point { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.chat .actions .act { width: 30px; height: 30px; border-radius: 9px; color: var(--txt2); background: var(--bg3); opacity: 1; }
.chat .actions .act:hover { background: var(--accent); color: var(--moi-txt); }
.chat .actions .act .ico svg { width: 16px; height: 16px; }
.chat:hover .actions { display: flex; }
.chat:hover .l2 .badge { display: none; }

/* ---------- conversation ---------- */
#vue header.h { padding: 10px 14px; gap: 10px; border-bottom: 1px solid var(--bord); }
#vue header.h .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--bg4); font-weight: 600; color: var(--txt2); font-size: 14px; }
#vue header.h .titre { min-width: 0; display: flex; flex-direction: column; gap: 0; }
#vue header.h h1 { font-size: 16px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vue header.h .sous { font-size: 11.5px; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { width: 36px; height: 36px; border-radius: 10px; color: var(--txt2); }
.icone:hover { background: var(--bg4); color: var(--txt); }
.fil { padding: 14px 18% 8px; gap: 3px; }
@media (max-width: 1100px) { .fil { padding: 14px 8% 8px; } }
.msg { max-width: min(560px, 74%); padding: 8px 12px; border-radius: 16px; border-bottom-left-radius: 6px;
  background: var(--bulle); box-shadow: 0 1px 2px rgba(22,26,36,.06), inset 0 1px 0 var(--verre-hi); font-size: 14.5px; }
.msg.moi { background: var(--bulle-moi); color: var(--moi-txt); border-radius: 16px; border-bottom-right-radius: 6px; border-bottom-left-radius: 16px; box-shadow: 0 1px 2px rgba(22,26,36,.08); }
.msg .h { font-size: 10.5px; margin-top: 2px; opacity: .85; }
.msg + .msg { margin-top: 1px; }
.msg.moi + .msg.moi, .msg:not(.moi) + .msg:not(.moi) { margin-top: 1px; }
.msg .exp { font-size: 12px; color: var(--accent); }
.jour { font-size: 11px; background: var(--bg4); color: var(--txt2); margin: 12px 0 6px; padding: 3px 10px; box-shadow: none; }
/* le libellé de réseau entre deux groupes de messages (Beeper) */
.reseau-sep { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt3); margin: 8px 0 4px; letter-spacing: .01em; }
.reseau-sep .pt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.msg .coche { font-size: 10px; }
.msg .actions { background: var(--opaque); border: 1px solid var(--bord); box-shadow: 0 6px 20px var(--ombre); border-radius: 10px; padding: 3px; }
/* 🔴 style.css donnait à cette barre un `padding: 10px 6px` qui servait de ZONE
   TAMPON : sans lui, le curseur traverse un vide entre la bulle et les boutons,
   `.msg:hover` retombe et les icônes disparaissent avant qu'on les atteigne —
   d'où l'obligation de passer par le clic droit. Cette couche écrasait ce
   padding par 2px. On garde l'aspect compact et on rétablit le tampon par un
   pseudo-élément invisible : il appartient à `.actions`, donc à `.msg`, et
   maintient le survol. */
.msg .actions::before {
  content: ""; position: absolute; top: -12px; bottom: -12px; left: -18px; right: -18px;
  border-radius: 18px;
  /* 🔴 `z-index: -1` est indispensable : un pseudo-élément positionné se peint
     AU-DESSUS des boutons, qui sont en flux. Sans lui, le pont couvrait la
     barre et avalait tous les clics — les icônes s'affichaient mais ne
     répondaient plus. Derrière, il ne gêne rien et continue de tenir le survol
     sur la portion qui dépasse. */
  z-index: -1;
}
.msg .actions button { width: 28px; height: 28px; border-radius: 8px; color: var(--txt2); }
.msg .actions button .ico svg { width: 16px; height: 16px; }
.msg .actions button:hover { background: var(--bg4); color: var(--txt); }
.vupar { font-size: 11px; color: var(--txt3); }
.bandeau-filtre { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 12.5px; color: var(--txt2); background: color-mix(in srgb, var(--accent) 8%, transparent); border-top: 1px solid var(--bord); }
.bandeau-filtre .lien { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.bandeau-fusion { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: var(--txt2); border-bottom: 1px solid var(--bord); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bandeau-fusion > .ico { color: var(--accent); }
.bandeau-fusion .t { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.bandeau-fusion .t .logo-res { width: 18px; height: 18px; font-size: 9px; opacity: 1; cursor: default; box-shadow: 0 0 0 1.5px var(--bg); }
.bandeau-fusion .lien { color: var(--accent); font-weight: 700; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bandeau-fusion .x { width: 30px; height: 30px; border-radius: 8px; color: var(--txt3); display: grid; place-items: center; }
.bandeau-fusion .x .ico svg { width: 16px; height: 16px; }

/* ---------- composeur ---------- */
.saisie { padding: 10px 14px 12px; gap: 8px; align-items: flex-end; border-top: 1px solid var(--bord); }
.saisie textarea { border-radius: 20px; padding: 10px 14px; font-size: 14.5px; min-height: 42px; box-sizing: border-box; line-height: 1.4; }
.saisie .outils { display: flex; gap: 2px; align-items: center; height: 42px; flex: none; }
.saisie .outil { width: 36px; height: 36px; border-radius: 10px; color: var(--txt2); display: grid; place-items: center; }
.saisie .outil:hover { background: var(--bg4); color: var(--txt); }
.saisie button.env { width: 42px; height: 42px; box-shadow: none; display: grid; place-items: center; flex: none; }
.saisie button.env:hover { filter: brightness(1.08); }
/* la cible d'envoi (avatar + logo), à gauche du champ */
.saisie .cible { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.saisie .cible .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg4); display: grid; place-items: center; font-weight: 600; color: var(--txt2); font-size: 14px; }
.saisie .cible .logo-res { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; font-size: 9px; opacity: 1; box-shadow: 0 0 0 2px var(--bg); cursor: pointer; }
.saisie .cible:hover .av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* le menu « Changer de conversation » */
.menu { background: var(--opaque); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; padding: 6px; min-width: 260px; }
.menu button { border-radius: 10px; font-size: 13.5px; }
.menu .titre { font-size: 11px; letter-spacing: .06em; }
.menu .ligne-info { font-size: 12.5px; color: var(--txt2); padding: 3px 10px; }
.menu .aide { font-size: 11px; color: var(--txt3); padding: 6px 10px 4px; }
.menu.switch { min-width: 300px; max-width: 360px; }
.menu.switch .sc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.menu.switch .sc.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu.switch .sc .avw { position: relative; width: 36px; height: 36px; flex: none; }
.menu.switch .sc .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg4); display: grid; place-items: center; font-weight: 600; color: var(--txt2); font-size: 14px; }
.menu.switch .sc .ico.av svg { width: 20px; height: 20px; color: var(--txt2); }
.menu.switch .sc .avw .logo-res { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; font-size: 8px; opacity: 1; cursor: default; box-shadow: 0 0 0 2px var(--opaque); }
.menu.switch .sc .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.menu.switch .sc .t .n { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.switch .sc .t .s { font-size: 11.5px; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.switch .sc .def { font-size: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 6px; border-radius: 6px; flex: none; }
.menu.switch .sc .ico.ok svg { width: 18px; height: 18px; color: var(--accent); }
.menu.switch .sc.filtre .n { font-weight: 500; }

/* ---------- panneaux (galerie, volet, tous les médias) et modales ---------- */
#galerie, #volet, #gglobale, .boite { background: var(--opaque); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.modal { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.btn { border-radius: 12px; font-weight: 600; box-shadow: none; }
/* boutons des Réglages passés aux icônes filaires : l'icône et le libellé sur
   une même ligne, alignés au centre */
.btn.avec-ico { display: inline-flex; align-items: center; gap: 8px; }
.btn.avec-ico > .ico svg { width: 18px; height: 18px; }

/* ---------- favoris en rangée d'icônes (façon Beeper) ----------
   `--fav` est posée par app.js depuis le réglage du compte : tout se dimensionne
   à partir d'elle, une seule valeur à changer. */
.favbar { --fav: 60px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 12px 10px; scrollbar-width: none; border-bottom: 1px solid var(--bord); }
.favbar::-webkit-scrollbar { display: none; }
.favbar.vide { display: none; }
.favbar .fav-ic { flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 5px; width: calc(var(--fav) + 14px); padding: 0; background: none; border: 0;
  color: var(--txt2); cursor: pointer; }
.favbar .fav-ic .avw { position: relative; width: var(--fav); height: var(--fav); }
.favbar .fav-ic .av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--bg4); color: var(--txt2);
  font-size: calc(var(--fav) * 0.38); font-weight: 700;
  border: 2px solid transparent; box-sizing: border-box; }
.favbar .fav-ic.on .av { border-color: var(--accent); }
.favbar .fav-ic:hover .av { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.favbar .fav-ic .fav-nom { max-width: calc(var(--fav) + 14px); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.1; }
.favbar .fav-ic.on .fav-nom { color: var(--accent); font-weight: 600; }
.favbar .fav-ic .pastille-n { position: absolute; top: -2px; right: -2px; min-width: 18px;
  height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent);
  color: var(--moi-txt); font-size: 10px; font-weight: 700; display: grid;
  place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.favbar .fav-ic .pastille-n.pt { min-width: 12px; height: 12px; padding: 0; border-radius: 50%; }

/* média que la passerelle de Beeper n'a jamais résolu : on affiche l'aperçu,
   mais on dit que la vidéo manque plutôt que de laisser croire à une photo */
.non-resolu { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px;
  padding: 4px 11px; border-radius: 999px; background: var(--bg4);
  border: 1px solid var(--bord); color: var(--txt2); font-size: 11.5px;
  font-weight: 600; cursor: pointer; }
.non-resolu .ico svg { width: 14px; height: 14px; }
.non-resolu:hover { color: var(--txt); border-color: var(--accent); background: var(--survol); }

/* 🔴 Contrastes mesurés le 11/09/2026 sur les thèmes intégrés :
     ✓✓ sur ma bulle .............. 1,4:1  (vert « ok » sur bulle verte)
     réaction sur ma bulle ........ 1,7:1
     « Tout archiver », auteur cité 1,5:1  (accent cyan sur verre blanc, Brume)
   Les deux premiers posaient une couleur d'état sur une bulle DÉJÀ colorée :
   ils doivent suivre la couleur du texte de la bulle. Les deux autres posaient
   l'accent brut du thème sur une surface claire : on le tire vers la couleur du
   texte, ce qui le fonce sur un thème clair et l'éclaircit sur un thème sombre. */
/* 🔴 Pièces jointes dans le fil : les VIDÉOS n'avaient aucun plafond (juste un
   `max-width: 100%` en style en ligne), donc une story verticale occupait
   presque toute la hauteur de la conversation. Elles suivent désormais la même
   règle que les images, et les deux sont plus sobres sur grand écran — on lit
   une conversation, on ne regarde pas un diaporama. */
.msg img, .msg video { max-width: min(230px, 100%); max-height: 260px; border-radius: 10px; display: block; }
@media (max-width: 760px) {
  /* sur téléphone l'écran est étroit : un peu plus grand reste lisible */
  .msg img, .msg video { max-width: min(280px, 100%); max-height: 320px; }
}

/* Vignette d'une vidéo dans le fil : la première image, un ▶ au milieu, et le
   tout cliquable — la lecture se fait dans la visionneuse, pas dans la bulle. */
.msg .video-vign {
  position: relative; display: inline-block; margin-top: 4px;
  border-radius: 10px; overflow: hidden; cursor: pointer; line-height: 0;
}
/* 🔴 Le plafond de taille porte sur `.msg video`, pas sur l'enveloppe : tant
   que les métadonnées ne sont pas chargées, un <video> occupe sa taille par
   défaut de 300×150 et l'enveloppe suivait. On borne donc l'enveloppe aussi. */
.msg .video-vign { max-width: min(230px, 100%); }
.msg .video-vign video { margin-top: 0; pointer-events: none; max-width: 100%; }
@media (max-width: 760px) { .msg .video-vign { max-width: min(280px, 100%); } }
.msg .video-vign .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff;
  display: grid; place-items: center; pointer-events: none;
  transition: background .12s, transform .12s;
}
.msg .video-vign .play .ico svg { width: 22px; height: 22px; margin-left: 2px; }
.msg .video-vign:hover .play { background: rgba(0, 0, 0, .68); transform: translate(-50%, -50%) scale(1.06); }

/* 🔴 L'accusé de lecture vit maintenant À CÔTÉ de la bulle, pas dedans : posé
   sur le fond de la conversation, il se lit quelle que soit la couleur de la
   bulle. Il s'efface au survol pour laisser la place à la barre d'actions, qui
   occupe la même bande à gauche. */
.msg .coche.hors {
  position: absolute; bottom: 3px; left: -21px;
  font-size: 12px; letter-spacing: -1px; line-height: 1;
  color: var(--txt3); opacity: 1; font-weight: 700; text-shadow: none;
  transition: opacity .12s;
}
.msg .coche.hors.dist { color: var(--warn); }
.msg .coche.hors.lu { color: var(--ok); }
.msg.moi:hover .coche.hors { opacity: 0; }
.msg.moi .react { color: var(--moi-txt); }
.msg.moi .cite .qui { color: var(--moi-txt); opacity: .9; }
.cite .qui, .barre .lien, .msg .exp { color: color-mix(in srgb, var(--accent) 62%, var(--txt) 38%); }

/* ---------- sélecteur d'emoji ----------
   Le rétrécissement des colonnes et des boutons est réglé dans `style.css`
   (`minmax(0, 1fr)` + `.emoji-pick .emoji`). Ici, seulement la taille. */
.emoji.gros { font-size: 20px; }

/* série de messages que le moteur n'a pas pu déchiffrer : discret, mais présent
   — sans cette ligne la conversation semblait simplement amputée */
.chiffre { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 10px auto; padding: 5px 12px; max-width: 92%; border-radius: 999px;
  background: var(--bg4); border: 1px solid var(--bord); color: var(--txt3);
  font-size: 12px; text-align: center; }
.chiffre .ico svg { width: 14px; height: 14px; }
.reponse-a { border-top: 1px solid var(--bord); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  #app { padding: 0 !important; }
  #rail { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important; background: var(--opaque); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); justify-content: space-around; }
  #rail .rail-haut { flex: 1 1 auto; justify-content: space-around; }
  /* cinq entrées au plus : Boîte · Non lus · Priorité · Archive · Réglages ;
     les réseaux et les dossiers passent dans le menu « Réseaux » de la liste */
  #rail .rail-reseaux { display: none !important; }
  #rail .rail-item { min-width: 56px; width: auto; padding: 6px 6px 4px !important; border-radius: 12px; }
  #rail .rail-item .rl { font-size: 10px; }
  #b-reglages { margin: 0; }
  #panneau header.h { padding: calc(10px + env(safe-area-inset-top)) 16px 6px; }
  #panneau header.h h1 { font-size: 24px; }
  .rech { padding: 4px 12px 8px; }
  .liste .chat { padding: 10px 8px !important; }
  #vue header.h { padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .mob-retour { border: 0; background: transparent; width: 36px; height: 36px; margin-right: 2px; }
  .fil { padding: 10px 12px 8px !important; }
  .msg, #vue .msg { max-width: 84% !important; }
  .saisie { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap: 6px; }
  .saisie textarea { font-size: 16px !important; min-height: 44px; padding: 11px 14px; }
  .saisie .outils { height: 44px; }
  .saisie .outil { width: 34px; height: 34px; }
  .saisie .outil:first-child { display: none; }   /* l'emoji : le clavier du téléphone en a déjà */
  .saisie .cible, .saisie button.env { width: 44px; height: 44px; }
  .menu.switch { left: 8px !important; right: 8px; width: auto; max-width: none; }
  /* panneaux : plein écran, opaques */
  #galerie, #volet { top: 0 !important; bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100vw !important; border-radius: 0 !important; }
  #gglobale { inset: 0 !important; border-radius: 0 !important; }
  .dates { flex-wrap: wrap; row-gap: 6px; }
  .bandeau-fusion { flex-wrap: wrap; }
}

/* barre d'outils de la liste : une seule ligne, jamais de retour */
.barre { flex-wrap: nowrap; gap: 8px; }
.barre .info, .barre .lien, .filtre-res { white-space: nowrap; }
.barre .info { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.filtre-res { flex: none; }

/* série de bulles du même auteur : serrées, coin intérieur adouci */
.msg.suite { margin-top: 1px; border-top-left-radius: 8px; }
.msg.moi.suite { border-top-left-radius: 16px; border-top-right-radius: 8px; }
.msg:not(.suite) { margin-top: 8px; }
.jour + .msg, .reseau-sep + .msg, .fil > .msg:first-child { margin-top: 2px; }

/* le texte d'invite du composeur ne passe jamais sur deux lignes */
.saisie textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  /* cinq entrées : les communautés passent dans le menu « Tous les réseaux » */
  #rail .rail-item[title="Communautés"] { display: none !important; }
  .modal { padding: 0 !important; }
  /* mobile.css plafonne déjà la boîte à 100dvh, mais c'est un MAXIMUM et .modal
     centre son contenu : une modale plus courte que l'écran laissait des bandes
     vides en haut et en bas, à travers lesquelles on voyait la barre du bas. */
  .modal { place-items: stretch !important; }
  .modal .boite { height: 100dvh !important; border-radius: 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
  .frg-nav { flex-wrap: wrap; }
  .frg-nav button { flex: 1 1 auto; justify-content: center; }
}

/* sur un écran tactile, la barre d'actions au survol n'a pas de sens (elle
   restait collée après un appui) : l'appui long ouvre le menu du message */
@media (hover: none) { .msg .actions { display: none !important; } }