/* ---------- Tableau de bord (Stock) ---------- */
  .dash-tabs{ display:flex; gap:0.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .dash-tab{
    padding:0.65rem 1.1rem; font-size:0.85rem; color:var(--muted); cursor:pointer;
    border-bottom:2px solid transparent; font-family:var(--font-mono); user-select:none;
  }
  .dash-tab:hover{ color:var(--text); }
  .dash-tab.active{ color:var(--cyan); border-color:var(--cyan); }
  /* appel vidéo : au centre de la rangée, en évidence sans être criard */
  .dash-tab-call{ color:var(--cyan); }
  .dash-tab-call:hover{ color:var(--text); }
  .dash-tab span[aria-hidden]{ font-size:1.05rem; line-height:1; }

  /* Les trois entrées de la rangée — Actualiser, l'appel vidéo, le Stock —
     s'alignent de la même façon : une icône puis un libellé. */
  #stockMainTabs .dash-tab{ display:flex; align-items:center; gap:0.4rem; padding-left:0.65rem; padding-right:0.65rem; }
  /* Jamais deux lignes : la rangée est fixée en bas, une deuxième ligne
     mangerait le contenu et déplacerait les entrées sous le doigt. */
  /* La rangée s'allonge à mesure qu'on ouvre des pages. Elle se tire donc sur
     le côté plutôt que de passer à la ligne — une deuxième ligne mangerait le
     contenu et déplacerait les icônes sous le doigt. */
  #stockMainTabs.dash-tabs{
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #stockMainTabs.dash-tabs::-webkit-scrollbar{ display:none; }
  /* Pleine, elle ne se centre plus : le début doit rester à sa place. */
  #stockMainTabs.dash-tabs.pleine{ justify-content: flex-start; }
  /* Rien ne dit qu'une rangée défile. Un fondu au bord droit annonce ce qui
     attend plus loin, et s'efface une fois le bout atteint. */
  #stockMainTabs.reste-a-droite{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  /* Une page épinglée n'a que son icône : à plusieurs, les libellés
     déborderaient. Le nom tient dans title et aria-label. */
  #stockMainTabs .bar-icone{
    flex: 0 0 auto;
    width: 44px;
    padding-left: 0; padding-right: 0;
    justify-content: center;
    font-size: 1.15rem;
  }
  /* La loupe et les réglages ne sont pas des pages : ce sont les deux
     commandes de la rangée. Depuis qu'elle porte tout le menu, elles partaient
     avec le défilement — les réglages se retrouvaient à huit cents pixels du
     bord droit d'un écran qui en fait trois cent soixante-quinze, et il fallait
     savoir qu'ils étaient là pour aller les chercher. Elles restent collées aux
     deux bords ; les pages défilent entre elles.

     Un fond opaque, sinon les icônes passeraient dessous en défilant, et une
     ombre côté intérieur pour qu'on voie qu'elles surplombent. */
  #stockMainTabs #menuToggle,
  #stockMainTabs #barReglagesBtn{
    position: sticky;
    z-index: 2;
    background: var(--panel);
  }
  #stockMainTabs #menuToggle{ left: 0; }
  #stockMainTabs #barReglagesBtn{ right: 0; }
  /* L'ombre dit qu'une icône passe dessous, et donc qu'il y en a d'autres de
     ce côté. Elle ne paraît que si c'est vrai : arrivé au bout, plus d'ombre,
     et l'on sait qu'on a tout vu. */
  #stockMainTabs.reste-a-gauche #menuToggle{ box-shadow: 7px 0 9px -6px rgba(0,0,0,0.75); }
  #stockMainTabs.reste-a-droite #barReglagesBtn{ box-shadow: -7px 0 9px -6px rgba(0,0,0,0.75); }
  /* Le fondu du bord droit annonçait la suite ; il passerait maintenant sur les
     réglages, qui ne défilent plus. */
  #stockMainTabs.reste-a-droite{
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Un <button> apporte son propre fond et ses bordures ; seul le
     soulignement de .dash-tab doit rester. */
  #stockMainTabs button.dash-tab{ background:none; border-top:none; border-left:none; border-right:none; }
  /* « Stock » garde .nav-item — c'est à cette classe qu'est accrochée toute la
     navigation par section — mais s'habille en onglet : sans annuler ce dont
     il hérite, .nav-item.active dessinerait un cadre complet là où un simple
     soulignement suffit. */
  #stockMainTabs .nav-item{
    margin-bottom:0; border-radius:0; background:none;
    border-top:none; border-left:none; border-right:none;
  }
  /* Les icônes seules, partout. Deux entrées portaient encore leur nom et
     prenaient la place de trois autres ; les quatorze qui les entourent n'en
     ont jamais eu, et la rangée se lisait de travers. Le nom reste dans
     l'infobulle et dans l'étiquette que lit un lecteur d'écran. */
  #stockMainTabs .tab-text{ display:none; }
  /* La boîte d'écriture ne vit plus dans le fil : elle s'ouvre au-dessus de la
     rangée du bas, d'où le crayon l'appelle. Le fil n'est plus qu'un fil. */
  /* Les deux réglages de la boîte tiennent en une icône chacun. Ils gardent la
     taille des boutons du reste du site, pour rester atteignables au doigt. */
  .composer-icone{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    border-radius:8px;
    border:1px solid var(--line);
    background: var(--panel-2);
    font-size:1.05rem; line-height:1;
    cursor:pointer;
  }
  .composer-icone:hover{ border-color: var(--cyan); }
  /* La case reste dans la page — c'est elle que le reste du code interroge —
     mais ne se montre plus : l'icône dit déjà tout. */
  .composer-case{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
  /* Cochée, l'icône s'allume : sans ce signe, rien ne distinguerait une
     annonce d'un simple message. */
  #newsIsGoodsLabel:has(.composer-case:checked),
  #newsIsGoodsLabel.actif{
    border-color: var(--cyan);
    background: rgba(79,216,224,0.12);
  }

  /* Les panneaux appelés depuis la rangée s'ouvrent au-dessus d'elle. La règle
     vaut pour tous : nommée par un identifiant, elle ne servait qu'à la liste
     des notifications et laissait les suivants tomber au fil de la page. */
  .panneau-flottant{
    position: fixed;
    z-index: 110;
    width: min(340px, calc(100vw - 1.6rem));
  }

  /* L'en-tête de l'Accueil ne partage plus sa ligne avec des boutons : le
     titre tient le milieu, les deux exports passent dessous. Un titre poussé
     à gauche par ce qui l'accompagne ne nomme plus la page — il la borde. */
  /* En colonne, et non en bloc : display:block emportait avec lui le « gap »
     de .section-head, et le titre se retrouvait collé à ses boutons. */
  .tete-accueil{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
    margin-bottom: 1.8rem;
  }
  .tete-accueil h2{ line-height: 1.4; }
  .tete-accueil .actions-row{ justify-content: center; gap: 0.8rem; }

  /* L'aperçu du fond : on voit ce qu'on a choisi sans refermer la fenêtre.
     Cadré comme le vrai fond — « cover » — pour montrer le même recadrage. */
  .fond-apercu{
    margin-top: 0.9rem;
    height: 160px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .fond-apercu.vide{ background: var(--bg); }
  /* .btn-primary prend toute la largeur partout ailleurs — c'est voulu pour
     un bouton seul, au bas d'un formulaire. Ces deux-là vont par paire : le
     premier chassait le second sur la ligne suivante. */
  #section-fond .actions-row .btn{ width: auto; }

  /* L'empreinte de la version, en bas du menu. Discrète : on ne la cherche
     que le jour où l'on se demande si le téléphone a bien reçu la dernière. */
  .menu-version{
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--muted);
    opacity: 0.7;
    text-align: center;
    user-select: text;
  }

  /* Tout ce qui flotte appartient à l'application ouverte, et à elle seule.
     Ces éléments ont quitté l'écran de l'application pour le corps de la page
     — c'est ce qui leur permet d'échapper aux boîtes qui découpent — mais ils
     ont cessé du même coup de disparaître avec lui : la fenêtre de l'Accueil
     et ses poignées venaient se poser sur la page de connexion, par-dessus le
     formulaire. */
  body:not(.appli-ouverte) .fenetre-page,
  body:not(.appli-ouverte) .poignees,
  body:not(.appli-ouverte) .icone-bureau,
  body:not(.appli-ouverte) .icone-fantome,
  body:not(.appli-ouverte) .panneau-flottant,
  body:not(.appli-ouverte) .nav-list.floating,
  body:not(.appli-ouverte) #menuFlottant{ display: none !important; }

  /* Les icônes posées sur le fond. Elles vivent sous les fenêtres, comme les
     icônes d'un bureau : c'est l'image de fond qu'elles habitent, pas le
     travail en cours. */
  .icone-bureau{
    position: fixed;
    z-index: 92;
    width: 68px;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.2rem;
    border: 0; background: transparent; color: #fff;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .icone-bureau .emoji{ font-size: 1.7rem; line-height: 1; }
  /* Une ombre portée, et non un fond : l'image du dessous peut être claire
     comme sombre, et un cadre opaque cacherait ce qu'on a choisi de voir. */
  .icone-bureau .emoji, .icone-bureau .nom{ text-shadow: 0 1px 5px rgba(0,0,0,0.9); }
  .icone-bureau .nom{
    font-family: var(--font-mono);
    font-size: 0.62rem; line-height: 1.2; text-align: center;
    overflow-wrap: anywhere;
  }
  .icone-bureau.tire{ opacity: 0.8; cursor: grabbing; z-index: 141; }
  .icone-bureau .epingle-retirer{ top: 0; right: 6px; }
  /* Comme dans la rangée : la croix ne paraît qu'en mode manuel. */
  .icone-bureau .epingle-retirer{ display: none; }
  body.retrait-manuel .icone-bureau .epingle-retirer{ display: block; }
  /* Ce qui suit le doigt pendant le geste. */
  .icone-fantome{
    position: fixed; z-index: 142;
    transform: translate(-50%, -50%);
    font-size: 1.9rem; line-height: 1;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  }
  /* La rangée garde son défilement latéral : seul le glissement vers le haut
     nous revient. */
  #stockMainTabs .dash-tab{ touch-action: pan-x; }

  /* Les fenêtres du menu se tirent par les quatre coins : au doigt sur
     téléphone, à la souris sur ordinateur. Les poignées vivent dans un calque
     posé par-dessus, et non dans la fenêtre : à l'intérieur, elles
     défileraient avec la liste et les deux coins du haut disparaîtraient au
     premier mouvement. */
  .poignees{ position:fixed; pointer-events:none; }
  .poignees[hidden]{ display:none; }
  .poignee{
    position:absolute; width:16px; height:16px;
    pointer-events:auto; touch-action:none;
    border:2px solid var(--cyan); opacity:0.5;
    transition: opacity 0.15s ease;
  }
  .poignee:hover, .poignee.tire{ opacity:1; }
  /* Seize pixels se voient ; ils ne se touchent pas. La cible fait le double. */
  .poignee::after{ content:''; position:absolute; inset:-8px; }
  /* Les pages qu'on ouvre depuis le menu — Articles, Factures, Portefeuille,
     Paramètres… — paraissent maintenant dans une fenêtre posée par-dessus le
     fil, et non à la place du fil. On les tire par les coins comme le menu ;
     on ne les déplace pas : elles s'ouvrent déjà entre les deux barres, là où
     l'œil les cherche. */
  .section.fenetre-page.active,
  .dash-view.fenetre-page.active{
    position: fixed;
    z-index: 95;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    padding: 0.9rem 1rem;
    overflow-y: auto;
  }
  /* Le ruban par lequel on prend la fenêtre pour la poser ailleurs. Il court
     entre le coin haut-gauche et la croix, et porte un trait au milieu : sans
     lui, rien ne dirait qu'on peut saisir là. */
  .poignee-deplacer{
    position: absolute;
    top: 0; left: 18px; right: 40px;
    height: 22px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
  }
  .poignee-deplacer::after{
    content: '';
    position: absolute;
    left: 50%; top: 8px;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 999px;
    background: var(--line);
  }
  .poignee-deplacer:hover::after{ background: var(--cyan); }
  .poignee-deplacer.tire{ cursor: grabbing; }
  .poignee-deplacer.tire::after{ background: var(--cyan); }

  /* La croix de fermeture vit dans le calque des poignées, et non dans la
     fenêtre : à l'intérieur, elle défilerait avec la page et disparaîtrait
     dès qu'on descend d'une ligne. */
  .fenetre-fermer{
    position: absolute; top: 7px; right: 7px;
    width: 26px; height: 26px; line-height: 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel); color: var(--muted);
    font-size: 0.8rem; text-align: center;
    cursor: pointer; pointer-events: auto;
  }
  .fenetre-fermer:hover{ color:#ff6b6b; border-color:#ff6b6b; }

  .poignee.hg{ left:-1px; top:-1px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; cursor:nwse-resize; }
  .poignee.hd{ right:-1px; top:-1px; border-left:none; border-bottom:none; border-radius:0 10px 0 0; cursor:nesw-resize; }
  .poignee.bg{ left:-1px; bottom:-1px; border-right:none; border-top:none; border-radius:0 0 0 10px; cursor:nesw-resize; }
  .poignee.bd{ right:-1px; bottom:-1px; border-left:none; border-top:none; border-radius:0 0 10px 0; cursor:nwse-resize; }

  /* Les panneaux qui n'héritent d'aucun habillage prennent celui-ci. */
  .panneau-boite{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    box-shadow: 0 -10px 34px rgba(0,0,0,0.5);
  }
  .panneau-titre{ font-size:0.82rem; font-weight:700; margin-bottom:0.7rem; }
  .panneau-note{ font-size:0.72rem; color:var(--muted); margin:0.7rem 0 0; line-height:1.45; }

  /* La marche à suivre pour installer : une liste courte, numérotée, qu'on lit
     en tenant le téléphone d'une main. */
  .install-etapes{ margin:0.5rem 0 0; padding-left:1.2rem; font-size:0.76rem; color:var(--text); line-height:1.6; }
  .install-etapes li{ margin-bottom:0.35rem; }

  /* ---------- Bandeau « Installer l'application » ---------- */
  /* Il se pose au-dessus de la rangée du bas, dont la hauteur est mesurée par
     le script : posé à même le bord, il tomberait dessous et on ne pourrait
     ni l'atteindre ni le fermer. */
  .bandeau-install{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--barre-bas-h, 0px) + 0.6rem + env(safe-area-inset-bottom, 0px));
    width: min(460px, calc(100vw - 1.6rem));
    z-index: 109;
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .bandeau-install[hidden]{ display: none; }
  .bandeau-install-icone{ font-size: 1.3rem; line-height: 1; }
  .bandeau-install-texte{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
  .bandeau-install-texte strong{ font-size: 0.82rem; }
  /* Le sous-titre explique, il n'annonce pas : il reste en retrait, et
     s'efface tout à fait sur les écrans trop étroits pour le porter. */
  .bandeau-install-texte span{ font-size: 0.7rem; color: var(--muted); line-height: 1.35; }
  /* .btn-primary s'étale sur toute la largeur : dans un formulaire c'est ce
     qu'on veut, dans une ligne qui porte aussi du texte il ne reste plus rien
     pour lui — le libellé tombait mot à mot, un par ligne. */
  .bandeau-install .btn{ flex: none; width: auto; white-space: nowrap; }
  /* Safari n'a rien à déclencher : le bouton s'efface, et le UA seul ne suffit
     pas toujours à l'effacer quand une classe l'habille. */
  .bandeau-install .btn[hidden]{ display: none; }
  .bandeau-install-fermer{
    flex: none;
    border: 0; background: none; color: var(--muted);
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    padding: 0.3rem;
  }
  .bandeau-install-fermer:hover{ color: var(--text); }
  @media (max-width: 380px){
    .bandeau-install-texte span{ display: none; }
  }

  /* ---------- Bandeau « hors ligne » ---------- */
  /* En haut, et non en bas : le bas appartient à la rangée et au bandeau
     d'installation, et cette bande-ci doit se voir aussi devant l'écran de
     connexion, où il n'y a rien d'autre. */
  .bandeau-reseau{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--amber);
    color: #2a1a05;
    font-size: 0.74rem; font-weight: 600; line-height: 1.35;
    padding: 0.4rem 0.9rem;
    padding-top: calc(0.4rem + env(safe-area-inset-top, 0px));
    text-align: center;
  }
  .bandeau-reseau[hidden]{ display: none; }

  .reglages-choix{ display:flex; gap:0.6rem; }
  /* Les deux choix sont d'abord des images : le mot n'est là que pour lever le
     doute sur ce que la main et la machine veulent dire. */
  .reglage-mode{
    flex:1;
    display:flex; flex-direction:column; align-items:center; gap:0.35rem;
    padding:0.7rem 0.4rem;
    border:1px solid var(--line); border-radius:10px;
    background:var(--panel-2); color:var(--muted);
    font:inherit; font-size:0.72rem; cursor:pointer;
  }
  .reglage-mode:hover{ color:var(--text); border-color:var(--cyan); }
  .reglage-mode.actif{ color:var(--cyan); border-color:var(--cyan); background:rgba(79,216,224,0.1); }
  .reglage-icone{ font-size:1.5rem; line-height:1; }

  /* La croix ne paraît qu'en mode manuel : ailleurs, elle proposerait un geste
     qui ne ferait rien. */
  .epingle-retirer{
    display:none;
    position:absolute; top:0; right:2px;
    width:13px; height:13px; line-height:12px;
    border-radius:999px;
    background:#ff6b6b; color:#fff;
    font-size:0.5rem; text-align:center;
  }
  /* Quatorze pixels, c'est lisible mais trop peu pour un doigt. On agrandit la
     cible sans agrandir le dessin. */
  .epingle-retirer::after{
    content:''; position:absolute; inset:-5px; border-radius:999px;
  }
  #stockMainTabs .dash-tab[data-epingle],
  #stockMainTabs .dash-tab[data-retirable]{ position:relative; }
  #stockMainTabs.mode-manuel .dash-tab[data-epingle] .epingle-retirer,
  #stockMainTabs.mode-manuel .dash-tab[data-retirable] .epingle-retirer{ display:block; }
  /* La croix se posait sur l'icône et la cachait. En mode manuel, la rangée
     réserve donc une bande en haut : toutes les icônes descendent ensemble —
     y compris celles qui n'ont pas de croix, sans quoi la rangée serait de
     travers — et la hauteur totale ne bouge pas, la rangée ne saute pas quand
     on change de mode. */
  #stockMainTabs.mode-manuel .dash-tab{
    padding-top: calc(0.65rem + 7px);
    padding-bottom: calc(0.65rem - 7px);
  }

  #fbComposer.composer-flottant{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 1.6rem));
    z-index: 110;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -10px 34px rgba(0,0,0,0.5);
  }

  .dash-view{ display:none; }
  .dash-view.active{ display:block; }

  .filters-panel{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:1.2rem 1.4rem; margin-bottom:1.4rem; display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start;
  }
  .filter-group{ min-width:150px; }
  .filter-group h4{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:0.6rem; }
  .date-range{ display:flex; align-items:center; gap:0.5rem; }
  .date-range input[type="date"]{
    padding:0.4rem 0.5rem; border-radius:8px; border:1px solid var(--line);
    background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:0.8rem;
  }
  .date-range span{ color:var(--muted); font-size:0.8rem; }
  .filter-chip{
    display:inline-flex; align-items:center; font-size:0.78rem; padding:0.32rem 0.7rem; margin:0.15rem 0.25rem 0.15rem 0;
    border-radius:999px; border:1px solid var(--line); cursor:pointer; color:var(--muted); user-select:none;
  }
  .filter-chip:hover{ color:var(--text); }
  .filter-chip.checked{ color:var(--cyan); border-color:var(--cyan); background:rgba(79,216,224,0.1); }
  .filter-clear{
    font-family:var(--font-mono); font-size:0.72rem; color:var(--amber); cursor:pointer;
    margin-left:auto; align-self:center; white-space:nowrap;
    background:transparent; border:1px solid var(--amber); border-radius:999px; padding:0.4rem 0.8rem;
  }
  .filter-clear:hover{ text-decoration:underline; }

  /* le panneau « Achats internationaux » est passé dans la barre du haut :
     le fil d’actualité occupe désormais toute la largeur */
  .community-grid{ display:grid; grid-template-columns: 1fr; gap:0.9rem; margin-bottom:1.4rem; align-items:start; }
  .community-sub{ font-size:0.8rem; color:var(--muted); margin-bottom:0.9rem; line-height:1.5; }
  .marketplace-row{ display:flex; flex-wrap:wrap; gap:0.6rem; }
  .marketplace-row a.btn{ display:inline-block; text-align:center; width:auto; }

  /* ---------- Accueil style "réseau social" ---------- */
  .fb-main{ display:flex; flex-direction:column; gap:0.9rem; }
  .fb-avatar{
    width:42px; height:42px; min-width:42px; border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg, var(--cyan), var(--violet));
    color:#04191b; font-family:var(--font-display); font-weight:700; font-size:1rem;
    display:flex; align-items:center; justify-content:center; text-transform:uppercase;
  }
  /* La photo remplit le rond sans se déformer : recadrée au centre plutôt
     qu’étirée, un portrait reste un portrait. */
  .fb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .fb-composer-row{ display:flex; align-items:center; gap:0.7rem; }
  .fb-composer-input{
    flex-grow:1; padding:0.75rem 1rem; border-radius:999px;
    border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.92rem;
  }
  .fb-composer-input:focus{ outline:none; border-color:var(--cyan); }
  .fb-composer-extra{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--line); }
  .fb-composer-extra input, .fb-composer-extra select{
    flex:1; min-width:130px; padding:0.6rem 0.8rem; border-radius:8px;
    border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.82rem;
  }
  .fb-composer-extra input:focus, .fb-composer-extra select:focus{ outline:none; border-color:var(--cyan); }
  .fb-composer-extra select{ flex:0 0 auto; min-width:140px; }

  .fb-feed{ display:flex; flex-direction:column; gap:0.9rem; }
  .fb-post{
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.1rem;
  }
  .fb-post.fb-post-live{ border-color:var(--red); box-shadow:0 0 0 1px rgba(239,106,106,0.25); }
  .fb-post.fb-post-entana{ border-color:var(--amber); }
  .fb-post-head{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem; }
  .fb-post-name{ font-weight:600; font-size:0.92rem; color:var(--text); }
  .fb-post-meta{ font-size:0.72rem; color:var(--muted); display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
  .fb-network-badge{
    font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--cyan); border:1px solid rgba(79,216,224,0.35); background:rgba(79,216,224,0.08);
    border-radius:999px; padding:0.1rem 0.5rem;
  }
  .fb-type-badge{
    font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em;
    border-radius:999px; padding:0.1rem 0.5rem; font-weight:700;
  }
  .fb-type-badge.live{ color:#fff; background:var(--red); animation:fbLivePulse 1.6s infinite; }
  .fb-type-badge.entana{ color:#04191b; background:var(--amber); }
  @keyframes fbLivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
  .fb-post-price{ font-family:var(--font-display); font-weight:700; color:var(--amber); font-size:1rem; margin-top:0.5rem; }
  .fb-post-body{ font-size:0.9rem; line-height:1.55; color:var(--text); white-space:pre-wrap; word-break:break-word; }
  .fb-post-link{
    display:block; margin-top:0.8rem; padding:0.7rem 0.9rem; border-radius:10px;
    border:1px solid var(--line); background:var(--panel-2); color:var(--cyan);
    font-size:0.8rem; text-decoration:none; word-break:break-all;
  }
  .fb-post-link:hover{ border-color:var(--cyan); }
  .fb-post-actions{ display:flex; gap:1.2rem; margin-top:0.9rem; padding-top:0.7rem; border-top:1px solid var(--line); }
  .fb-post-actions span{ font-size:0.78rem; color:var(--muted); }
  .fb-share-action:hover{ color:var(--cyan); }
  /* L'achat est la seule action de la rangée qui engage : elle se voit. */
  .fb-buy-action{ font-weight:600; }
  .fb-buy-action:hover{ text-decoration:underline; }
  .fb-comment-action:hover{ color:var(--cyan); }
  .fb-like-action:hover{ color:var(--cyan); }
  /* Aimé : la couleur seule ne suffit pas à distinguer les deux états pour
     qui distingue mal les teintes — le trait épais s'en charge aussi. */
  .fb-like-action.liked{ color:var(--cyan); font-weight:700; }

  /* ---------- Commentaires sous une publication ---------- */
  .fb-comments{ margin-top:0.7rem; padding-top:0.7rem; border-top:1px solid var(--line); }
  .fb-comment{
    font-size:0.8rem; color:var(--text); line-height:1.55;
    padding:0.45rem 0.6rem; margin-bottom:0.4rem;
    background:var(--panel-2); border-radius:8px;
  }
  .fb-comment strong{ color:var(--cyan); }
  .fb-comment-date{ display:block; font-size:0.68rem; color:var(--muted); margin-top:0.15rem; }
  .fb-comment-empty{ font-size:0.78rem; color:var(--muted); padding:0.3rem 0 0.5rem; }
  .fb-comment-error{ font-size:0.76rem; color:var(--amber); line-height:1.5; margin-top:0.5rem; }

  /* Le nombre de « j'aime », au-dessus de la rangée des actions. */
  .fb-like-count{
    display:flex; align-items:center; gap:0.35rem;
    font-size:0.76rem; color:var(--muted); margin-top:0.7rem;
  }
  .fb-like-bubble{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:var(--cyan); font-size:0.6rem; line-height:1;
  }
  .fb-comment-form{ display:flex; gap:0.5rem; margin-top:0.5rem; }
  .fb-comment-input{
    flex:1; min-width:0; padding:0.5rem 0.7rem; border-radius:8px;
    border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.82rem;
  }
  .fb-comment-input:focus{ outline:none; border-color:var(--cyan); }

  /* ---------- Fampitandremana rohy an-toerana (localhost / file://) ---------- */
  .local-link-warning{
    font-size:0.76rem; color:var(--amber); line-height:1.5;
    margin:0.6rem 0 0; padding-left:0.7rem; border-left:3px solid var(--amber);
  }

  /* ---------- Fangatahana alalana fampandrenesana ---------- */
  .notif-optin{
    display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap;
    background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--amber);
    border-radius:10px; padding:0.6rem 0.8rem; margin-bottom:0.9rem;
    font-size:0.78rem; color:var(--muted);
  }

  /* ---------- Marika "mivantana" ho an'ny mpanao Live ---------- */
  .live-onair-badge{
    position:absolute; top:0.5rem; left:0.5rem;
    font-family:var(--font-mono); font-size:0.65rem; font-weight:700; letter-spacing:0.06em;
    color:#fff; background:var(--red); border-radius:999px; padding:0.2rem 0.6rem;
    animation:fbLivePulse 1.6s infinite;
  }
  .live-reach{
    font-size:0.76rem; color:var(--muted); margin:0.6rem 0 0;
    padding-left:0.7rem; border-left:3px solid var(--red); line-height:1.5;
  }
  .live-reach strong{ color:var(--text); }

  /* ---------- Bandeau "Live direct" (hita na aiza na aiza ao amin'ny appli) ---------- */
  .live-toast{
    pointer-events:auto; display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--red); border-left:4px solid var(--red);
    border-radius:10px; padding:0.6rem 0.8rem; font-size:0.82rem;
    box-shadow:0 8px 24px rgba(0,0,0,0.45); max-width:100%;
  }

  .fb-sidebar{ position:sticky; top:0.5rem; }

  .kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.9rem; margin-bottom:1.4rem; }
  .kpi-card{
    background:linear-gradient(135deg, rgba(79,216,224,0.1), rgba(139,147,255,0.08));
    border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem;
  }
  .kpi-card .kpi-label{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; color:var(--muted); letter-spacing:0.04em; }
  .kpi-card .kpi-value{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-top:0.35rem; color:var(--text); }

  .chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0.9rem; margin-bottom:1.4rem; }
  .chart-panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.1rem; }
  .chart-panel h4{ font-family:var(--font-mono); font-size:0.72rem; color:var(--cyan); margin-bottom:0.8rem; text-align:center; font-weight:500; }
  .chart-box{ position:relative; width:100%; }

  .mid-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:0.9rem; margin-bottom:1.4rem; align-items:stretch; }
  .stack-panel{ display:flex; flex-direction:column; gap:0.9rem; }
  .list-panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.1rem; flex-grow:1; }
  .list-panel h4{ font-family:var(--font-mono); font-size:0.7rem; color:var(--cyan); margin-bottom:0.8rem; font-weight:500; }
  .list-row{ display:flex; justify-content:space-between; align-items:center; gap:0.6rem; padding:0.5rem 0; border-bottom:1px dashed var(--line); font-size:0.85rem; }
  .list-row:last-child{ border-bottom:none; }
  .list-row .val{ font-family:var(--font-mono); color:var(--cyan); white-space:nowrap; }
  .badge-warn{ font-size:0.66rem; padding:0.2rem 0.55rem; border-radius:999px; border:1px solid var(--amber); color:var(--amber); white-space:nowrap; }
  .badge-danger{ font-size:0.66rem; padding:0.2rem 0.55rem; border-radius:999px; border:1px solid var(--red); color:var(--red); white-space:nowrap; }

  .line-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0.9rem; }

  @media (max-width: 820px){
    .mid-grid{ grid-template-columns: 1fr; }
    .community-grid{ grid-template-columns: 1fr; }
    .filters-panel{ flex-direction:column; gap:1rem; }
    .filter-clear{ align-self:flex-start; margin-left:0; }
  }

  /* ---- L'employé entré par son lien ----
     Il a toute l'application, mais pas de compte : il n'y a rien dont se
     déconnecter. Et « Ny momba ahy » n'existe que pour lui. */
  body.mode-mpiasa #logoutBtn{ display:none !important; }
  body:not(.mode-mpiasa) .seulement-mpiasa{ display:none !important; }
  /* L'équipe se lit, elle ne se touche pas : inscrire, pauser, retirer
     quelqu'un ou lui faire un lien revient au patron. La fonction « mpiasa »
     le refuse de toute façon ; on n'offre pas un bouton qui échoue. */
  body.mode-mpiasa .seulement-patron{ display:none !important; }
  /* La page « Mpiasa » n'existe pas pour l'employé : ni son entrée dans le
     menu, ni son icône épinglée dans la rangée ou posée sur le fond, ni la
     page elle-même si elle était la dernière ouverte dans ce navigateur. Les
     noms, téléphones et emails de ses collègues ne le regardent pas — la
     fonction « mpiasa » ne les lui envoie d'ailleurs plus. */
  body.mode-mpiasa #section-mpiasa,
  body.mode-mpiasa #navList .nav-item[data-section="mpiasa"],
  body.mode-mpiasa [data-epingle="section:mpiasa"],
  body.mode-mpiasa .icone-bureau[data-cle="section:mpiasa"]{ display:none !important; }