/* ---------- 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, .pc-onglet{
    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, .pc-onglet:hover{ color:var(--text); }
  .dash-tab.active, .pc-onglet.active{ color:var(--cyan); border-color:var(--cyan); }
  /* Le + qui ouvre un « Nouvel article » de plus, et le ✕ qui le referme. */
  /* Le + se voit d'emblée : une pastille pleine, couleur de l'application,
     et non un signe gris perdu parmi les onglets. */
  .onglet-plus-nouveau, .onglet-plus-compte{
    align-self:center;
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; margin:0 0.3rem;
    border-radius:50%; border:0;
    background:var(--cyan); color:var(--bg);
    font-family:var(--font-display); font-size:1.25rem; font-weight:700; line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
  }
  .onglet-plus-nouveau:hover, .onglet-plus-compte:hover{ color:var(--bg); transform:scale(1.1); box-shadow:0 3px 12px rgba(0,0,0,0.45); }
  .onglet-plus-nouveau:active, .onglet-plus-compte:active{ transform:scale(0.95); }
  .onglet-fermer{ margin-left:0.35rem; opacity:0.6; font-size:0.85em; }
  .onglet-fermer:hover{ opacity:1; color:var(--amber); }
  .onglet-crayon{ display:none; margin-left:0.35rem; font-size:0.8em; opacity:0.7; cursor:pointer; }
  .dash-tab.active .onglet-crayon{ display:inline; }
  .onglet-crayon:hover{ opacity:1; }
  .onglet-saisie{ width:9rem; padding:0.15rem 0.4rem; border-radius:6px; border:1px solid var(--cyan); background:var(--bg); color:var(--text); font:inherit; }
  /* L'Administratif Commun regarde, il ne touche pas : rien de ce qui s'y
     montre ne répond au doigt, sauf les graphiques qu'on survole. */
  .lecture-seule button, .lecture-seule input, .lecture-seule select,
  .lecture-seule textarea, .lecture-seule a, .lecture-seule [contenteditable],
  .lecture-seule label{
    pointer-events:none;
  }
  /* Sauf ce qui ne fait que montrer : ouvrir un livre de famille pour en
     lire les membres ne change rien. */
  .lecture-seule [data-fam-sokafy]{ pointer-events:auto; }
  /* Administratif Fokontany et Administratif Commun : le propriétaire seul
     les voit (parametres.js pose .est-proprietaire). Les clients n'en voient
     ni l'entrée, ni l'icône épinglée, ni la fenêtre. La page /fokontany/
     charge ce même fichier : sa racine porte .fokontany, la règle l'épargne. */
  html:not(.est-proprietaire):not(.fokontany) #menuCommun,
  html:not(.est-proprietaire):not(.fokontany) #menuCommunAdmin,
  html:not(.est-proprietaire):not(.fokontany) #menuInstallFokontany,
  html:not(.est-proprietaire):not(.fokontany) #menuInstallCommun,
  html:not(.est-proprietaire):not(.fokontany) [data-epingle="id:menuCommun"],
  html:not(.est-proprietaire):not(.fokontany) [data-epingle="id:menuCommunAdmin"],
  html:not(.est-proprietaire):not(.fokontany) #dash-commun,
  html:not(.est-proprietaire):not(.fokontany) #dash-communadmin,
  /* Ny asako Hôtel est ouvert à tous depuis le 20/10/2026 : chaque compte
     y tient son propre menu (hotelerie_menu.user_id = auth.uid()). */
  /* Multi-service (photocopie.js) : à l’admin seul. */
  html:not(.est-proprietaire):not(.fokontany) .nav-item[data-section="photocopie"],
  /* « 🔗 Ajouter les liens » est à tous depuis le 22/10/2026 (contact.js). */
  /* Dans le menu de Ny asako, l'Hôtellerie et son installation sont à
     l'admin seul (22/10/2026) ; l'application /hotely reste à tous. */
  html:not(.est-proprietaire):not(.fokontany):not(.app-hotely) .nav-item[data-section="hotelerie"],
  html:not(.est-proprietaire):not(.fokontany):not(.app-hotely) [data-epingle="section:hotelerie"],
  html:not(.est-proprietaire):not(.fokontany) #menuInstallHotel,
  html:not(.est-proprietaire):not(.fokontany) [data-epingle="section:photocopie"],
  html:not(.est-proprietaire):not(.fokontany) #section-photocopie{ display:none !important; }
  /* Dans Ny asako Hôtel (/hotely), le menu ne garde que l'Hôtel et ce qui
     sert à le tenir : andro/alina, notifications, portefeuille, mpiasa,
     livreur, toerana, abonnement, fond d'écran, corbeille, paramètres.
     Le reste — stock, botika, factures… — appartient à Ny asako. La liste
     est redite dans common.js (HOTEL_GARDEES) pour la recherche du menu. */
  html.app-hotely #navList > .nav-item:not([data-section="hotelerie"]):not([data-section="contact"]):not([data-section="wallet"]):not([data-section="mpiasa"]):not([data-section="livreur"]):not([data-section="toerana"]):not([data-section="abonnement"]):not([data-section="fond"]):not([data-section="corbeille"]):not([data-section="connexions"]),
  html.app-hotely #navList > .nav-action:not(#menuTheme):not(#notifToggle),
  html.app-hotely #stockMainTabs [data-epingle]:not([data-epingle="section:hotelerie"]):not([data-epingle="section:contact"]):not([data-epingle="section:wallet"]):not([data-epingle="section:mpiasa"]):not([data-epingle="section:livreur"]):not([data-epingle="section:toerana"]):not([data-epingle="section:abonnement"]):not([data-epingle="section:fond"]):not([data-epingle="section:corbeille"]):not([data-epingle="section:connexions"]):not([data-epingle="id:menuTheme"]):not([data-epingle="id:notifToggle"]),
  html.app-hotely #barComposer,
  html.app-hotely #barAccueil,
  /* … ni la Botika, ni le Stock : ils sont à Ny asako. */
  html.app-hotely #section-stock{ display:none !important; }
  /* 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;
  }
  /* Quand les icônes ne tiennent plus, une barre de défilement le dit, et se
     tire au doigt comme à la souris pour aller voir les pages restées
     ouvertes. Cachée, rien n'annonçait qu'il y en avait d'autres.
     Un trait fin et arrondi, et non le rectangle du navigateur ; son rail
     s'arrête avant le ☰ et le ⋯ collés aux deux bouts, et avant les coins
     ronds du dock. */
  #stockMainTabs.dash-tabs::-webkit-scrollbar{ height: 6px; }
  #stockMainTabs.dash-tabs::-webkit-scrollbar-button{ display: none; }
  #stockMainTabs.dash-tabs::-webkit-scrollbar-track{ background: transparent; margin: 0 48px; }
  #stockMainTabs.dash-tabs::-webkit-scrollbar-thumb{ background: var(--muted); border-radius: 999px; }
  /* Firefox seulement : dans Chrome, ces propriétés annuleraient les règles
     ci-dessus, rail et coins compris. */
  @supports not selector(::-webkit-scrollbar){
    #stockMainTabs.dash-tabs{ scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
  }
  /* 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;
  }
  /* Chrome et Edge ont leur logo dessiné à la place d'un emoji : il prend
     la taille de l'emoji, sans la marge qui le sépare du nom dans le menu. */
  .bar-icone .nav-logo,
  .icone-bureau .nav-logo,
  .icone-fantome .nav-logo{ width: 1em; height: 1em; margin: 0; vertical-align: middle; }
  /* Une page réduite est encore ouverte : son icône clignote, et un trait
     sous elle le redit, comme dans la barre des tâches d'un ordinateur. */
  #stockMainTabs .reduite{
    position: relative;
    animation: icone-reduite 1.4s ease-in-out infinite;
  }
  #stockMainTabs .reduite::after{
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    transform: translateX(-50%);
    width: 14px; height: 3px;
    border-radius: 999px;
    background: var(--cyan);
  }
  @keyframes icone-reduite{
    0%, 100%{ box-shadow: 0 0 0 0 transparent; opacity: 1; }
    50%{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 55%, transparent); opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce){
    #stockMainTabs .reduite{ animation: none; }
  }
  /* 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); }
  /* Les six réseaux de 🎬 : six colonnes égales dans un cadre, pour que les
     noms longs (Instagram, Facebook) n'écartent plus leurs voisins. */
  #newsVideoLogos{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:0.4rem;
    padding:0.6rem 0.4rem;
    border:1px solid var(--line); border-radius:12px;
    background: var(--panel-2);
  }
  .logo-reseau{
    display:flex; flex-direction:column; align-items:center; gap:0.3rem;
    min-width:0; padding:0.3rem 0; border-radius:10px;
    text-decoration:none; color:var(--text);
    transition: background .15s, transform .15s;
  }
  .logo-reseau:hover{ background: rgba(79,216,224,0.10); transform: translateY(-2px); }
  .logo-reseau-icone{
    display:flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; border-radius:12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
  .logo-reseau-nom{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:0.62rem; font-weight:600;
  }
  /* Sur un téléphone étroit, six colonnes coupaient les noms : deux rangées de trois. */
  @media (max-width: 420px){
    #newsVideoLogos{ grid-template-columns:repeat(3, 1fr); row-gap:0.6rem; }
  }
  #newsVideoRohyToro{ text-align:center; }
  /* Hôtellerie › Commandes : une commande vita pas encore payée — son cadre
     vert clignote jusqu'à ce qu'on touche « Voaloa » (hotelerie.js). */
  /* Bien visible : cadre épais vert vif, fond qui s'allume, net (steps) plutôt
     qu'un fondu qu'on remarque à peine. */
  .hotely-tsy-voaloa{ animation: hotely-mipipika 0.9s steps(2, jump-none) infinite; }
  @keyframes hotely-mipipika{
    0%{ border-color:#22e07a; box-shadow:inset 0 0 0 4px #22e07a, inset 0 0 18px rgba(34,224,122,0.55); background-image:linear-gradient(rgba(34,224,122,0.18), rgba(34,224,122,0.18)); }
    100%{ border-color:var(--line); box-shadow:inset 0 0 0 4px rgba(34,224,122,0); background-image:none; }
  }
  /* Le moyen de paiement d'une commande pas encore payée : un bouton vert
     plein, sur toute la largeur. Touché, la commande est voaloa et il part. */
  .hotely-mandoa{
    display:flex; flex-direction:column; align-items:center; gap:0.15rem;
    width:100%; margin:0.5rem 0 0; padding:0.6rem 0.8rem;
    border:0; border-radius:10px; background:#1e9e5a; color:#fff;
    font:inherit; font-size:0.92rem; font-weight:700; cursor:pointer;
  }
  .hotely-mandoa small{ font-size:0.72rem; font-weight:500; opacity:0.9; }
  .hotely-mandoa:hover{ background:#178a4d; }
  .hotely-mandoa:disabled{ opacity:0.6; cursor:wait; }
  @media (prefers-reduced-motion: reduce){
    .hotely-tsy-voaloa{ animation:none; box-shadow:inset 0 0 0 4px #22e07a; background-image:linear-gradient(rgba(34,224,122,0.12), rgba(34,224,122,0.12)); }
  }
  /* 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;
  }
  /* Vide, il montre le logo : la couleur seule, sans effacer l'image que
     fond.js y pose. */
  .fond-apercu.vide{ background-color: 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;
  }
  /* Les vues posées dans la page et non en fenêtre — Entrée en stock, Nouvel
     article, Historique… — et leur rangée d'onglets passent aussi devant les
     icônes : sans cela, Factures ou Corbeille venaient se poser sur les
     formulaires et les tableaux de bord. */
  .dash-view.active:not(.fenetre-page),
  #stockSubTabs{ position: relative; z-index: 93; }
  .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;
    /* Deux lignes au plus : l'icône tient dans sa case de la grille
       (rangerLeFond, common.js), sans déborder sur celle du dessous. */
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .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. */
  /* Habillées comme l'écran d'un téléphone « edge » : de grands coins ronds,
     et des bords qui semblent se courber vers l'arrière — une ombre qui
     fonce vers les côtés, un filet de lumière sur l'arête.
     Les ombres sont « inset » : elles restent au bord de la fenêtre pendant
     que le contenu défile, et passent sous lui. La marge intérieure s'élargit
     d'autant, pour que rien ne se loge dans la courbe. */
  .section.fenetre-page.active,
  .dash-view.fenetre-page.active{
    position: fixed;
    z-index: 95;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow:
      inset 14px 0 18px -14px rgba(0,0,0,0.45),
      inset -14px 0 18px -14px rgba(0,0,0,0.45),
      inset 1px 0 0 rgba(255,255,255,0.07),
      inset -1px 0 0 rgba(255,255,255,0.07),
      0 18px 48px rgba(0,0,0,0.55);
    padding: 1rem 1.3rem;
    overflow-y: auto;
  }
  /* Les poignées d'une page épousent ses coins : plus grandes, et arrondies
     comme eux. Celles des panneaux du menu gardent leur petite équerre. */
  .poignees:has(.poignee-deplacer) .poignee{ width:26px; height:26px; }
  .poignees:has(.poignee-deplacer) .poignee.hg{ border-radius:28px 0 0 0; }
  .poignees:has(.poignee-deplacer) .poignee.hd{ border-radius:0 28px 0 0; }
  .poignees:has(.poignee-deplacer) .poignee.bg{ border-radius:0 0 0 28px; }
  .poignees:has(.poignee-deplacer) .poignee.bd{ border-radius:0 0 28px 0; }
  /* 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;
    /* Entre les deux coins arrondis, qui prennent plus de place qu'avant. */
    top: 0; left: 30px; right: 126px;
    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); }

  /* Réduire, agrandir, fermer : ils vivent dans le calque des poignées, et
     non dans la fenêtre — à l'intérieur, ils défileraient avec la page et
     disparaîtraient dès qu'on descend d'une ligne. */
  .fenetre-boutons{
    /* Rentrés de la courbe du coin : collés au bord, ils en débordaient. */
    position: absolute; top: 5px; right: 28px;
    display: flex; gap: 2px;
    pointer-events: auto;
  }
  .fenetre-boutons button{
    width: 30px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px;
    background: transparent; color: var(--muted);
    cursor: pointer;
  }
  .fenetre-boutons svg{
    width: 10px; height: 10px;
    fill: none; stroke: currentColor; stroke-width: 1.1;
  }
  .fenetre-boutons button:hover{
    /* Tirée du texte, pour se voir aussi bien de jour que de nuit. */
    background: color-mix(in srgb, var(--text) 12%, transparent);
    color: var(--text);
  }
  .fenetre-boutons .fenetre-fermer:hover{ background: #e81123; color: #fff; }

  .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; }
  /* Le curseur de luminosité : la lune d'un côté, le soleil de l'autre, et
     toute la largeur entre les deux pour le doigt. */
  .theme-niveau{ display:flex; align-items:center; gap:0.6rem; margin-top:0.9rem; font-size:1.2rem; }
  .theme-niveau input[type="range"]{ flex:1; min-width:0; height:28px; accent-color: var(--cyan); cursor:pointer; }
  /* Luminosité, contraste : le nom à gauche, la valeur à droite, le curseur
     en dessous sur toute la largeur. */
  .theme-reglage{ margin-top:0.8rem; }
  .theme-reglage label{
    display:flex; justify-content:space-between;
    font-size:0.74rem; color:var(--muted); margin-bottom:0.2rem;
  }
  .theme-reglage label span:last-child{ font-family:var(--font-mono); color:var(--text); }
  .theme-reglage input[type="range"]{ width:100%; height:26px; accent-color: var(--cyan); cursor:pointer; }
  /* 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. */
  /* « Alamino » et « Hidio daholo » prennent la même forme, sans l'état actif
     (une autre classe : common.js branche ses clics sur .reglage-mode). */
  .reglage-mode, .reglage-action{
    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, .reglage-action: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;
    /* La main, et non celle qui saisit l'icône : ici on clique pour retirer. */
    cursor:pointer;
  }
  /* 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);
    /* Comme une page : même fond, même bord, même marge, et son titre en haut
       (le haut appartient au ruban et aux boutons ─ □ ✕). */
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 1rem 1.3rem;
  }

  .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-groupes{ display:flex; flex-direction:column; gap:0.75rem; }
  .marketplace-titre{ font-size:0.7rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.04em; margin-bottom:-0.35rem; }
  /* Les boutiques : une carte par ligne, comme un billet du fil en plus bas. */
  .marketplace-cartes{ display:flex; flex-direction:column; gap:0.5rem; }
  .marketplace-carte{ display:block; border:1px solid var(--line); border-radius:10px;
    overflow:hidden; text-decoration:none; color:inherit; background:var(--panel-2); }
  .marketplace-carte:hover{ border-color:var(--cyan); }
  /* Une boutique ajoutée à la main : sa ✕ dans le coin, pour la maison. */
  .marketplace-sien{ position:relative; }
  .marketplace-fafao{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:0.75rem;
    line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
  .marketplace-fafao:hover{ border-color:#e53935; color:#e53935; }
  .marketplace-fafao:disabled{ opacity:0.5; cursor:wait; }
  .marketplace-row{ display:flex; flex-wrap:wrap; gap:0.6rem; }
  .marketplace-row a.btn{ display:inline-block; text-align:center; width:auto; }

  /* ---------- La recherche de la rangée du bas ---------- */
  /* Les résultats empruntent l'habillage des entrées du menu : ce sont les
     mêmes gestes, et une deuxième apparence pour la même chose ne ferait
     qu'une deuxième chose à apprendre. */
  .recherche-resultats{ display:flex; flex-direction:column; gap:0.1rem; margin-top:0.6rem; }
  .recherche-groupe{ font-size:0.7rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.04em; margin:0.6rem 0 0.2rem; }
  .recherche-groupe:first-child{ margin-top:0; }
  /* Ce qui distingue deux articles du même nom : la référence, ce qu'il en
     reste, son prix. Sous le nom, en plus petit — on le lit si on en a besoin. */
  .recherche-detail{ display:block; font-size:0.66rem; color:var(--muted);
    margin-top:0.12rem; font-weight:400; }
  .recherche-resultats .nav-action{ text-align:left; }

  /* L'article qu'on vient d'atteindre depuis la recherche. La page des
     articles en compte parfois cent : arriver dessus sans savoir laquelle des
     cent lignes on cherchait, c'est arriver nulle part. La couleur passe, et
     ne laisse rien derrière elle. */
  .ligne-visee{ animation: ligneVisee 2.6s ease-out 1; }
  @keyframes ligneVisee{
    0%, 100%{ background: transparent; }
    12%, 55%{ background: rgba(34, 211, 238, 0.16); }
  }

  /* Le billet qu'on vient d'atteindre. Un trait autour, et non un fond : la
     carte porte déjà le sien, et une couleur par-dessus une autre ne se voit
     pas. */
  .billet-vise{ animation: billetVise 2.6s ease-out 1; }
  @keyframes billetVise{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
    12%, 55%{ box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55); }
  }

  /* ---------- 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; }
  /* L'auteur du billet est là en ce moment : un anneau vert autour. */
  .fb-avatar.en-ligne{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px #16e05a, 0 0 10px rgba(22,224,90,0.7); }
  .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; }
  /* La fiche de l'article (🛒) : deux colonnes, une seule au téléphone. */
  .entana-fiche{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.6rem 0.8rem;
    margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--line);
  }
  .entana-fiche-titre{ grid-column:1 / -1; margin:0; font-size:0.85rem; font-weight:700; color:var(--text); }
  .entana-fiche-titre span, .entana-fiche label span{ font-weight:400; color:var(--muted); }
  .entana-fiche label{ display:flex; flex-direction:column; gap:0.3rem; font-size:0.75rem; color:var(--muted); }
  .entana-fiche input, .entana-fiche select, .entana-fiche textarea{
    width:100%; box-sizing:border-box; padding:0.55rem 0.7rem; border-radius:8px;
    border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.85rem; font-family:inherit;
  }
  .entana-fiche textarea{ resize:vertical; min-height:4.5rem; }
  .entana-fiche input:focus, .entana-fiche select:focus, .entana-fiche textarea:focus{ outline:none; border-color:var(--cyan); }
  .entana-fiche .tsy-feno{ border-color:var(--red); }
  /* La colonne « Fil » des articles : publié ou non, d'un appui. */
  .bouton-fil{
    white-space:nowrap; padding:0.35rem 0.6rem; border-radius:999px;
    border:1px solid var(--line); background:var(--panel-2); color:var(--muted);
    font-size:0.75rem; cursor:pointer;
  }
  .bouton-fil.navoaka{ border-color:var(--cyan); color:var(--cyan); }
  .bouton-fil:disabled{ opacity:0.6; cursor:wait; }
  /* Ce qui vient du stock se lit mais ne se retape pas. */
  .entana-fiche input[readonly], #newsPrice[readonly]{ background:var(--panel-2); color:var(--muted); cursor:not-allowed; }
  .entana-fiche-large, .entana-fiche-rappel{ grid-column:1 / -1; }
  .entana-fiche-rappel{ margin:0; font-size:0.75rem; color:var(--muted); }
  #newsPrice.tsy-feno{ border-color:var(--red); }
  @media (max-width: 560px){ .entana-fiche{ grid-template-columns:minmax(0, 1fr); } }

  /* Un billet glissé pour être effacé sort du fil sans faire défiler la page de côté. */
  .fb-feed{ display:flex; flex-direction:column; gap:0.9rem; overflow-x:clip; }
  .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; justify-content:center; flex-wrap:wrap; gap:1.2rem; margin-top:0.9rem; padding-top:0.3rem; }
  .fb-post-actions span{ font-size:0.78rem; color:var(--muted); }
  .fb-share-action:hover{ color:var(--cyan); }
  /* « Partager » : la flèche dessinée à côté du mot, comme le pouce de
     « J'aime ». Le mot suit la couleur du survol. */
  .fb-partager{ display:inline-flex; align-items:center; gap:0.35rem; font-weight:600; }
  .fb-post-actions .fb-partager span{ color:inherit; font-size:inherit; }
  .fb-partager:hover .fb-pouce{ fill:currentColor; }
  /* Le logo qui partage : le « N », et sa flèche dans une pastille cyan
     posée sur le coin bas-droit. */
  .fb-logo-partage{ position:relative; display:inline-flex; width:1.35em; height:1.35em; margin-right:0.3em; }
  .fb-logo-partage img{ width:100%; height:100%; border-radius:22%; object-fit:cover; }
  .fb-logo-partage svg{
    position:absolute; right:-0.3em; bottom:-0.25em;
    width:0.85em; height:0.85em; padding:0.1em; box-sizing:content-box;
    border-radius:50%; background:var(--cyan); fill:#fff;
    box-shadow:0 0 0 1.5px var(--panel);
    transition: transform 0.15s ease;
  }
  .fb-partager:hover .fb-logo-partage svg{ transform: translateX(2px) rotate(-8deg); }
  /* Panier : pastille cyan ; une fois l'article dedans, elle passe au vert
     et le mot aussi, pour qu'on voie d'un coup d'œil ce qu'on a déjà pris. */
  .fb-panier-action.dans-panier{ color:#2bb673; }
  .fb-panier-action.dans-panier .fb-logo-partage svg{ background:#2bb673; }
  .nav-logo.fb-logo-partage{ position:relative; overflow:visible; }
  .nav-logo.fb-logo-partage img{ width:100%; height:100%; border-radius:22%; }

  /* Le panier est une page en fenêtre : sa largeur de lecture, au milieu. */
  .panier-page{ max-width:560px; margin:0 auto; padding:0.4rem 0.2rem; }
  .panier-tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.7rem; }
  .panier-titre{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:700; font-size:0.95rem; }
  .panier-fermer{ border:none; background:none; color:var(--muted); font-size:1rem; cursor:pointer; }
  .panier-ligne{
    display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:0.5rem;
    padding:0.55rem 0; border-top:1px solid var(--line);
  }
  .panier-nom{ font-size:0.82rem; font-weight:600; min-width:0; overflow-wrap:anywhere; }
  .panier-prix{ display:block; font-size:0.72rem; font-weight:400; color:var(--muted); margin-top:0.1rem; }
  .panier-isa{ display:inline-flex; align-items:center; gap:0.35rem; font-size:0.82rem; }
  .panier-isa button{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
    background:var(--panel-2); color:var(--text); cursor:pointer; line-height:1;
  }
  .panier-hividy{ width:auto !important; }
  .panier-esory{ cursor:pointer; font-size:0.95rem; }
  .panier-total{
    display:flex; justify-content:space-between; align-items:center;
    padding:0.7rem 0 0.4rem; border-top:2px solid var(--line); font-size:0.9rem;
  }
  .panier-total strong{ color:var(--cyan); font-size:1.05rem; }
  /* La question « Handoa … ? », sous la ligne, sur toute sa largeur. */
  .panier-confirm{
    grid-column:1 / -1; margin-top:0.3rem; padding:0.6rem 0.7rem;
    border:1px solid var(--cyan); border-radius:10px; background:var(--panel-2);
    font-size:0.8rem; line-height:1.5;
  }
  .panier-confirm p{ margin:0 0 0.35rem; }
  .panier-confirm-boutons{ display:flex; gap:0.5rem; margin-top:0.4rem; }
  .panier-confirm-boutons .btn{ width:auto !important; }
  .panier-erreur{ color:var(--amber, #e9a23b); margin:0.4rem 0 0 !important; }
  /* Les achats payés : leur message reste en haut du panier. */
  .panier-message{
    display:flex; align-items:flex-start; gap:0.5rem; margin-bottom:0.5rem;
    padding:0.55rem 0.65rem; border-radius:10px; font-size:0.78rem; line-height:1.5;
    background:color-mix(in srgb, #2bb673 14%, transparent); border:1px solid #2bb673;
  }
  .panier-message-texte{ flex:1; }
  .panier-message{ flex-wrap:wrap; }
  .panier-message.naverina{ background:var(--panel-2); border-color:var(--line); }
  .panier-confirmer{ width:auto !important; align-self:center; }
  .panier-message-date{ display:block; font-size:0.68rem; color:var(--muted); margin-top:0.15rem; }
  .panier-message-esory{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:0.85rem; }
  .panier-foano{ border:none; background:none; color:var(--muted); font-size:0.74rem; text-decoration:underline; cursor:pointer; padding:0; }

  /* Effacer : pastille rouge, et pas de mot à côté — donc pas de marge. */
  .fb-logo-partage.fafana{ margin-right:0.15em; }
  .fb-logo-partage.fafana svg{ background:var(--red, #e5484d); }
  .fb-comment-fafana .fb-logo-partage{ font-size:0.95rem; }
  /* « Ovay » : la même pastille que « Fafana », un crayon jaune dessus. */
  .fb-logo-partage.ovay{ margin-right:0.15em; }
  .fb-logo-partage.ovay svg{ background:#f5a524; }
  .fb-comment-ovay .fb-logo-partage{ font-size:0.95rem; }
  .fb-comment-fafana:hover{ text-decoration:none; }

  /* « J'aime » : la pastille est grise tant qu'on n'a pas aimé, bleue ensuite. */
  /* Sa couleur d'avant, le cyan des autres, et posée sur le côté du logo,
     à mi-hauteur, plutôt qu'au coin bas. */
  .fb-like-action .fb-logo-partage{ margin-right:0.55em; }
  .fb-like-action .fb-logo-partage svg{
    background:var(--cyan);
    right:-0.55em; bottom:auto; top:50%;
    transform:translateY(-50%);
  }
  .fb-like-action .fb-logo-partage.aime svg{ background:#0866ff; }
  .fb-like-action:hover .fb-logo-partage svg{ transform: translateY(-50%) rotate(-12deg) scale(1.1); }
  /* « Rehetra » porte le logo de la maison : c'est elle qui envoie à tous. */
  .fb-logo-maison{ width:1.25em; height:1.25em; border-radius:22%; object-fit:cover; }
  /* 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); }
  /* « J'aime » comme chez Facebook : un pouce creux et gris, qui devient
     plein et bleu une fois aimé. Le trait épais du texte redit l'état pour
     qui distingue mal les teintes. */
  .fb-like-action{ display:inline-flex; align-items:center; gap:0.35rem; font-weight:600; }
  /* Les actions au milieu, à intervalles égaux ; « Hamafa » à part, au bord
     droit. Le groupe du milieu prend toute la place que l'effacement laisse. */
  .fb-post-actions{ align-items:center; }
  .fb-actions-milieu{
    flex:1; min-width:0;
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-evenly; gap:0.6rem 0.4rem;
  }
  .fb-post-actions > [data-delete-post]{ margin-left:auto; flex:none; }
  .fb-pouce{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
  .fb-like-action:hover{ color:var(--text); }
  .fb-like-action.liked{ color:#0866ff; font-weight:700; }
  .fb-like-action.liked .fb-pouce{ fill:currentColor; stroke:none; }

  /* ---------- Commentaires sous une publication ---------- */
  .fb-comments{ margin-top:0.7rem; padding-top:0.4rem; }
  .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;
  }
  /* Le nom sur sa ligne, le propos en dessous : collés, on lisait le nom
     comme le premier mot du message. Un long mot sans espace (une adresse)
     se coupe au lieu de déborder. */
  .fb-comment{ overflow-wrap:anywhere; }
  .fb-comment > strong{ display:block; color:var(--cyan); margin-bottom:0.1rem; }
  .fb-comment-date{ display:block; font-size:0.68rem; color:var(--muted); margin-top:0.15rem; }
  /* Sous chaque commentaire : « J'aime » en petit, et ses réactions comptées. */
  .fb-comment-reactions{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; margin-top:0.3rem; }
  .fb-comment-like{
    display:inline-flex; align-items:center; gap:0.25rem;
    font-size:0.72rem; font-weight:700; color:var(--muted); cursor:pointer;
  }
  .fb-comment-like:hover{ text-decoration:underline; }
  /* Sous ses propres commentaires seulement, poussé au bout de la ligne. */
  .fb-comment-fafana{
    margin-left:auto; font-size:0.7rem; font-weight:600;
    color:var(--red, #e5484d); cursor:pointer; opacity:0.8;
  }
  .fb-comment-fafana:hover{ opacity:1; text-decoration:underline; }
  /* « Ovay », juste avant « Fafana », au bout de la ligne. */
  .fb-comment-ovay{
    margin-left:auto; font-size:0.7rem; font-weight:600;
    color:var(--cyan); cursor:pointer; opacity:0.85;
  }
  .fb-comment-ovay:hover{ opacity:1; text-decoration:underline; }
  .fb-comment-ovay + .fb-comment-fafana{ margin-left:0; }
  .fb-comment-texte[hidden]{ display:none; }
  .fb-comment-edition{ margin:0.2rem 0 0.1rem; }
  .fb-comment-edition textarea{
    width:100%; box-sizing:border-box; resize:vertical; min-height:2.6rem;
    font:inherit; font-size:0.8rem; color:var(--text);
    background:var(--panel); border:1px solid var(--cyan); border-radius:8px; padding:0.35rem 0.5rem;
  }
  .fb-comment-edition-btns{ display:flex; justify-content:flex-end; gap:0.4rem; margin-top:0.3rem; }
  .fb-comment-edition-btns .btn{ width:auto; padding:0.3rem 0.8rem; font-size:0.75rem; }
  .fb-comment-like .fb-reaction-emoji{ font-size:1.1em !important; }
  .fb-comment-compte{ align-items:center; }
  .fb-comment-compte .fb-reaction-compte{ padding:0.05rem 0.4rem 0.05rem 0.1rem; }
  .fb-comment-compte .fb-reaction-compte b{ font-size:0.68rem; }
  .fb-comment-compte .fb-like-bubble,
  .fb-comment-compte .fb-reaction-bulle{ width:15px; height:15px; }
  .fb-comment-compte .fb-reaction-bulle .fb-emoji-3d{ width:13px; height:13px; }
  .fb-comment-compte .fb-like-bubble .fb-pouce{ width:8px; height:8px; }
  .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; flex-wrap:wrap; 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%;
    /* Le rond bleu de Facebook, pouce blanc au milieu. */
    background:linear-gradient(180deg, #18afff, #0866ff); color:#fff;
  }
  .fb-like-bubble .fb-pouce{ width:10px; height:10px; fill:currentColor; stroke:none; }

  /* Les réactions : le visage choisi à la place du pouce, et la pile des
     plus données au-dessus des actions, chacune mordant sur la suivante. */
  /* Le mot suit la couleur de la réaction : la règle des actions, plus haut,
     rendait gris tout ce qui est « span », le mot compris. */
  .fb-post-actions .fb-like-action span{ color:inherit; font-size:inherit; }
  .fb-reaction-emoji{ font-size:1.15em !important; line-height:1; display:inline-flex; }
  /* Les visages en relief : ils prennent la taille du texte qui les porte,
     et une ombre douce sous eux ajoute au relief. */
  .fb-emoji-3d{
    width:1em; height:1em; object-fit:contain;
    vertical-align:-0.15em; user-select:none; -webkit-user-drag:none;
  }
  .fb-reactions-choix .fb-emoji-3d,
  .fb-reaction-vole .fb-emoji-3d,
  .fb-reaction-pluie .fb-emoji-3d{ filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
  .fb-reaction-bulle .fb-emoji-3d{ width:16px; height:16px; }
  .fb-reaction-pile{ display:inline-flex; flex-wrap:wrap; gap:0.35rem; }
  /* Une pastille par réaction : le visage, puis son nombre. */
  .fb-reaction-compte{
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.12rem 0.45rem 0.12rem 0.15rem; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--line);
  }
  .fb-reaction-compte b{ font-size:0.74rem; color:var(--text); }
  .fb-reaction-compte.mienne{ border-color:var(--cyan); }
  .fb-reaction-qui{ margin-left:0.2rem; }
  .fb-reaction-bulle{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:var(--panel); font-size:0.78rem; line-height:1;
  }
  /* Le menu qui monte au-dessus de « J'aime ». */
  .fb-reactions-choix{
    position:fixed; z-index:160;
    display:flex; gap:0.15rem; padding:0.3rem 0.4rem;
    background:var(--panel); border:1px solid var(--line); border-radius:999px;
    box-shadow:0 6px 22px rgba(0,0,0,0.35);
    animation: reactions-monte 0.16s ease-out;
  }
  .fb-reactions-choix[hidden]{ display:none; }
  .fb-reactions-choix button{
    width:40px; height:40px; padding:3px; border:none; background:none;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; line-height:1; cursor:pointer;
    transition: transform 0.12s ease;
  }
  /* Celle qu'on a déjà donnée : un rond derrière elle. */
  .fb-reactions-choix button.choisi{ background: color-mix(in srgb, var(--cyan) 22%, transparent); border-radius:50%; }
  .fb-reactions-choix button:hover,
  .fb-reactions-choix button:focus-visible{ transform: translateY(-4px) scale(1.3); outline:none; }
  @keyframes reactions-monte{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  /* L'éclat d'une réaction choisie : le visage grossit, puis monte se poser
     sur le compteur ; des éclats de sa couleur partent en cercle. */
  .fb-reaction-vole{
    position:fixed; z-index:170; pointer-events:none;
    font-size:1.4rem; line-height:1;
    transform:translate(-50%, -50%);
    animation: reaction-vole 0.85s cubic-bezier(.3,.7,.4,1) forwards;
  }
  .fb-reaction-vole .fb-like-bubble{ width:26px; height:26px; }
  .fb-reaction-vole .fb-like-bubble .fb-pouce{ width:14px; height:14px; }
  @keyframes reaction-vole{
    0%  { transform:translate(-50%, -50%) scale(0.4); opacity:0; }
    25% { transform:translate(-50%, calc(-50% - 26px)) scale(2); opacity:1; }
    55% { transform:translate(-50%, calc(-50% - 30px)) scale(1.7); opacity:1; }
    100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.7); opacity:0; }
  }
  .fb-reaction-eclat{
    position:fixed; z-index:169; pointer-events:none;
    width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
    animation: reaction-eclat 0.6s ease-out forwards;
  }
  @keyframes reaction-eclat{
    from{ transform:translate(0, 0) scale(1); opacity:1; }
    to  { transform:translate(var(--ex), var(--ey)) scale(0.3); opacity:0; }
  }
  /* Le mot qui dit pourquoi une réaction n'est pas partie. */
  .fb-reaction-avis{
    position:fixed; z-index:175; max-width:min(320px, calc(100vw - 16px));
    padding:0.55rem 0.75rem; border-radius:10px;
    background:var(--panel); color:var(--text); border:1px solid var(--amber, #e9a23b);
    font-size:0.76rem; line-height:1.45; box-shadow:0 8px 24px rgba(0,0,0,0.35);
    animation: reactions-monte 0.16s ease-out;
  }

  /* La pluie de réactions, sur toute la page. */
  .fb-reaction-pluie{ position:fixed; inset:0; z-index:168; pointer-events:none; overflow:hidden; }
  .fb-reaction-pluie > span{
    position:absolute; bottom:-3rem; line-height:1; opacity:0;
    animation-name: reaction-pluie; animation-timing-function: ease-out; animation-fill-mode: forwards;
  }
  .fb-reaction-pluie .fb-like-bubble{ width:1.4em; height:1.4em; }
  .fb-reaction-pluie .fb-like-bubble .fb-pouce{ width:0.8em; height:0.8em; }
  @keyframes reaction-pluie{
    0%  { transform:translate(0, 0) scale(0.6); opacity:0; }
    12% { opacity:1; }
    70% { opacity:1; }
    100%{ transform:translate(var(--derive), -105vh) scale(1.15); opacity:0; }
  }
  /* Posée sur le compteur, elle grossit un instant. */
  .fb-reaction-posee{ animation: reaction-posee 0.6s ease-out; }
  @keyframes reaction-posee{ 0%{ transform:scale(1); } 40%{ transform:scale(1.9); } 100%{ transform:scale(1); } }

  /* Le bouton sursaute sous le doigt. */
  .fb-like-rebond{ animation: like-rebond 0.35s ease-out; }
  @keyframes like-rebond{ 0%{ transform:scale(1); } 40%{ transform:scale(1.25); } 100%{ transform:scale(1); } }

  @media (prefers-reduced-motion: reduce){
    .fb-reactions-choix{ animation:none; }
    .fb-reactions-choix button{ transition:none; }
    /* L'éclat, la pluie et la pose restent : c'est la réponse même au geste,
       et Windows coupe souvent les animations sans qu'on l'ait demandé — la
       réaction semblait alors ne rien faire. */
  }
  .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); }
  /* La flèche d'envoi : un bouton carré, la flèche en cyan. */
  .fb-comment-send{
    flex: none; width: 38px !important; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan);
  }
  .fb-comment-send svg{ width: 18px; height: 18px; fill: currentColor; }
  .fb-comment-send:disabled{ opacity: 0.5; }

  /* ---------- 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; }

  /* Le tableau de bord du Fokontany : une part par sujet — CIN, adidy,
     taratasy — chacune dans son cadre, avec sa couleur sur le bord gauche,
     pour qu'on ne lise pas les chiffres de l'une comme ceux de l'autre. */
  .fk-bloc{
    border:1px solid var(--line); border-left:4px solid var(--cyan); border-radius:14px;
    padding:1.1rem 1.1rem 0.2rem; margin-bottom:1.4rem; background:var(--panel-2);
  }
  .fk-bloc-adidy{ border-left-color: var(--amber); }
  .fk-bloc-taratasy{ border-left-color: #8b93ff; }
  .fk-bloc-titre{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 0.9rem; }
  .fk-bloc .list-panel{ margin-bottom:1rem; }
  @media (max-width: 600px){
    .fk-bloc{ padding:0.9rem 0.8rem 0.1rem; }
    .fk-bloc .kpi-row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.6rem; }
  }
  .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; }

  /* ---- Entré sans compte, les premiers jours ----
     Même place dans le menu, l'autre sens : on ne quitte pas un compte qu'on
     n'a pas ouvert, on l'ouvre. */
  body.mode-visiteur #logoutBtn{ display:none !important; }
  body:not(.mode-visiteur) #creerCompteBtn{ display:none !important; }

  /* ---------- L'écran « edge », pour les petites fenêtres aussi ----------
     Le menu et les panneaux qu'on ouvre par-dessus — notifications, achats
     internationaux, réglages de la rangée, mode jour et nuit, boîte d'écriture —
     prennent la même allure que les pages : coins ronds, bords qui se courbent.
     Un peu moins que les pages (24 px et non 28) : sur une fenêtre de deux
     cent trente pixels, la courbe d'une page mangerait la première ligne.

     !important : les notifications et les achats portent encore leur
     habillage dans leur attribut style, qui l'emporterait sinon. */
  .nav-list.floating,
  .panneau-boite,
  #notifPanel,
  #marketPanel,
  #livraisonPanel,
  #fbComposer.composer-flottant{
    border-radius: 24px !important;
    box-shadow:
      inset 10px 0 14px -10px rgba(0,0,0,0.4),
      inset -10px 0 14px -10px rgba(0,0,0,0.4),
      inset 1px 0 0 rgba(255,255,255,0.07),
      inset -1px 0 0 rgba(255,255,255,0.07),
      0 12px 36px rgba(0,0,0,0.5) !important;
  }
  /* 🗂️ Alamino : les fenêtres côte à côte sur un voile sombre. Le voile
     reçoit les gestes entre elles ; ni coins ni ruban, la rangée se fait
     glisser tout entière. */
  .laharana-fond{
    position: fixed; inset: 0; z-index: 94;
    background: rgba(0,0,0,0.45);
    touch-action: none;
  }
  /* Le choix du rangement, sous « Alamino » : les mêmes cartes que Manuel /
     Automatique, trois par ligne. Une fois ouvert, il est seul dans le
     panneau (24/10/2026). */
  .fenetres-modely{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  }
  #barReglages.modely-irery > :not(#fenetresModely){ display: none !important; }
  body.fenetres-laharana .fenetre-page,
  body.fenetres-laharana #fbComposer,
  body.fenetres-laharana #notifPanel,
  body.fenetres-laharana #marketPanel,
  body.fenetres-laharana #livraisonPanel{ touch-action: pan-y; }
  /* On travaille dans la rangée : le contenu défile en hauteur, le geste de
     côté fait glisser la rangée (Milahatra). Dans Mifanongoa, la rangée se
     tire par le fond : le contenu garde tous ses gestes. */
  body.fenetres-laharana-y .fenetre-page,
  body.fenetres-laharana-y #fbComposer,
  body.fenetres-laharana-y #notifPanel,
  body.fenetres-laharana-y #marketPanel,
  body.fenetres-laharana-y #livraisonPanel{ touch-action: auto; }

  /* « Écrire » a la taille d'une page : il en prend aussi la courbe. */
  #fbComposer.composer-flottant{ border-radius: 28px !important; }
  /* La marge intérieure s'élargit, pour que rien ne se loge dans la courbe. */
  .nav-list.floating{ padding: 0.8rem 0.9rem; }
  .panneau-boite{ padding: 1rem 1.15rem; }
  /* Leurs poignées épousent ces coins, comme celles des pages. */
  .poignees:not(:has(.poignee-deplacer)) .poignee{ width:20px; height:20px; }
  .poignees:not(:has(.poignee-deplacer)) .poignee.hg{ border-radius:24px 0 0 0; }
  .poignees:not(:has(.poignee-deplacer)) .poignee.hd{ border-radius:0 24px 0 0; }
  .poignees:not(:has(.poignee-deplacer)) .poignee.bg{ border-radius:0 0 0 24px; }
  .poignees:not(:has(.poignee-deplacer)) .poignee.bd{ border-radius:0 0 24px 0; }

  /* La barre de défilement, dans ces fenêtres rondes. Celle du navigateur est
     un rectangle gris à flèches, collé au bord droit : elle recouvrait la
     courbe des deux coins et en dépassait en haut comme en bas. Elle devient
     un trait fin, arrondi, sans flèches, sur un rail transparent — et le rail
     s'arrête avant les coins, pour que la courbe reste entière. */
  /* Pour Firefox seulement. Chrome, lui, abandonne toutes les règles
     ::-webkit-scrollbar dès que ces deux propriétés sont posées — le rail
     reprendrait alors toute la hauteur, coins compris. */
  @supports not selector(::-webkit-scrollbar){
    .fenetre-page,
    .nav-list.floating,
    .panneau-boite,
    #notifPanel,
    #marketPanel,
    #livraisonPanel,
    #fbComposer.composer-flottant{
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
    }
  }
  .fenetre-page::-webkit-scrollbar,
  .nav-list.floating::-webkit-scrollbar,
  .panneau-boite::-webkit-scrollbar,
  #notifPanel::-webkit-scrollbar,
  #marketPanel::-webkit-scrollbar,
  #fbComposer.composer-flottant::-webkit-scrollbar{ width: 8px; }
  .fenetre-page::-webkit-scrollbar-button,
  .nav-list.floating::-webkit-scrollbar-button,
  .panneau-boite::-webkit-scrollbar-button,
  #notifPanel::-webkit-scrollbar-button,
  #marketPanel::-webkit-scrollbar-button,
  #fbComposer.composer-flottant::-webkit-scrollbar-button{ display: none; }
  .fenetre-page::-webkit-scrollbar-track{ background: transparent; margin: 28px 0; }
  .nav-list.floating::-webkit-scrollbar-track,
  .panneau-boite::-webkit-scrollbar-track,
  #notifPanel::-webkit-scrollbar-track,
  #marketPanel::-webkit-scrollbar-track,
  #fbComposer.composer-flottant::-webkit-scrollbar-track{ background: transparent; margin: 24px 0; }
  .fenetre-page::-webkit-scrollbar-thumb,
  .nav-list.floating::-webkit-scrollbar-thumb,
  .panneau-boite::-webkit-scrollbar-thumb,
  #notifPanel::-webkit-scrollbar-thumb,
  #marketPanel::-webkit-scrollbar-thumb,
  #fbComposer.composer-flottant::-webkit-scrollbar-thumb{
    background: var(--line);
    border-radius: 999px;
    /* Une bordure transparente l'amincit sans toucher à la zone qu'on saisit. */
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .fenetre-page::-webkit-scrollbar-thumb:hover,
  .nav-list.floating::-webkit-scrollbar-thumb:hover{ background-color: var(--muted); }

  /* ---------- La rangée du bas en « dock » ----------
     Elle quitte les bords de l'écran : posée à huit pixels des côtés et du
     bas, arrondie et courbée comme les fenêtres, elle flotte comme le dock
     d'un téléphone. Ses coins ronds rognent aussi le ☰ et le ⋯ collés aux
     extrémités — le défilement latéral la découpe déjà à sa forme.
     La barre d'accueil du téléphone est gardée sous elle, et non plus dedans. */
  #stockMainTabs.dash-tabs-main{
    left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    box-shadow:
      inset 10px 0 14px -10px rgba(0,0,0,0.4),
      inset -10px 0 14px -10px rgba(0,0,0,0.4),
      inset 1px 0 0 rgba(255,255,255,0.07),
      inset -1px 0 0 rgba(255,255,255,0.07),
      0 10px 30px rgba(0,0,0,0.45);
  }
  /* Escamotée, elle descend de sa hauteur ET de l'écart qui la sépare du bas :
     de sa seule hauteur, il en restait une lisière visible. */
  #stockMainTabs.dash-tabs-main.barre-cachee{
    transform: translateY(calc(100% + 8px + env(safe-area-inset-bottom, 0px)));
  }
  /* Le ☰ et le ⋯ prennent la couleur du dock, et non un fond plus sombre qui
     dessinerait deux carrés dans ses coins ronds. */
  #stockMainTabs #menuToggle,
  #stockMainTabs #barReglagesBtn{ background: var(--panel); }

  /* Les icônes deviennent des tuiles, comme les applications d'un téléphone :
     un carré aux coins ronds, bombé par la même ombre que les fenêtres. */
  #stockMainTabs .dash-tab[data-epingle],
  #stockMainTabs #barComposer,
  #stockMainTabs #barAccueil{
    flex: 0 0 auto;
    width: 40px; height: 40px;
    margin: 0 3px;
    padding: 0;
    align-self: center;
    justify-content: center;
    border-radius: 13px;
    border-bottom: none;
    background: var(--panel-2);
    box-shadow:
      inset 4px 0 6px -4px rgba(0,0,0,0.35),
      inset -4px 0 6px -4px rgba(0,0,0,0.35),
      inset 0 0 0 1px var(--line);
  }
  /* La page ouverte : un liseré cyan autour de la tuile, à la place du
     soulignement d'autrefois. */
  #stockMainTabs .dash-tab[data-epingle].active,
  #stockMainTabs #barComposer.active,
  #stockMainTabs #barAccueil.active{
    box-shadow:
      inset 4px 0 6px -4px rgba(0,0,0,0.35),
      inset -4px 0 6px -4px rgba(0,0,0,0.35),
      inset 0 0 0 2px var(--cyan);
  }
  /* En mode manuel, la croix se pose sur le coin de la tuile, comme une
     pastille d'application — et la tuile ne descend plus pour lui faire place. */
  #stockMainTabs.mode-manuel .dash-tab[data-epingle],
  #stockMainTabs.mode-manuel #barComposer,
  #stockMainTabs.mode-manuel #barAccueil{
    padding-top: 0; padding-bottom: 0;
    margin-top: 7px;
  }
  #stockMainTabs .dash-tab[data-epingle] .epingle-retirer,
  #stockMainTabs #barComposer .epingle-retirer,
  #stockMainTabs #barAccueil .epingle-retirer{ top: -6px; right: -6px; }

  /* La rangée des vues du stock, quand elle paraît dans la page : une barre
     pleine aux coins ronds, et non des mots posés à même le fond d'écran. */
  #stockSubTabs{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0.2rem 0.6rem;
  }

  /* Les icônes posées sur le fond : la même tuile, sous leur nom. */
  .icone-bureau .emoji{
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: var(--panel-2);
    box-shadow:
      inset 5px 0 7px -5px rgba(0,0,0,0.4),
      inset -5px 0 7px -5px rgba(0,0,0,0.4),
      inset 0 0 0 1px var(--line),
      0 4px 12px rgba(0,0,0,0.35);
    text-shadow: none;
  }

/* Les actions d'un billet (J'aime, Commenter, Panier, Partager, Groupe) :
   le logo seul, sans le mot, à taille normale — au double, ils écrasaient
   la ligne sur un téléphone. Rien ne suit le logo : pas de marge à droite.
   En fin de fichier, pour passer devant les « font-size:inherit ». */
.fb-post-actions span.fb-logo-partage{ font-size:1.05rem; margin-right:0; }
.fb-post-actions .fb-like-action .fb-logo-partage{ margin-right:0; }
@media (max-width: 480px){
  .fb-post-actions span.fb-logo-partage{ font-size:0.95rem; }
}
/* Bien alignés : les cinq logos dans cinq colonnes égales, et la place de
   « Hamafa » gardée à droite même quand il n'y est pas — d'un billet à
   l'autre, chaque logo tombe au même endroit. */
.fb-post-actions{ display:grid; grid-template-columns:minmax(0, 1fr) 2rem; gap:0.4rem; align-items:center; }
.fb-actions-milieu{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); justify-items:center; gap:0; }
.fb-actions-milieu > *{ justify-content:center; }
.fb-post-actions > [data-delete-post]{ grid-column:2; margin-left:0; justify-self:end; }
/* « Groupe » : un petit groupe de personnes sur la pastille violette. */
.fb-logo-partage.groupe svg{ background:#8b5cf6; }

/* Le logo du menu, au bord gauche de la rangée : il remplit sa tuile, comme
   celui du bouton flottant, au lieu d'un petit N au milieu d'un carré. */
#stockMainTabs #menuToggle{
  width: 40px; height: 40px;
  margin: 0 3px 0 0;
  padding: 0;
  align-self: center;
  overflow: hidden;
  border-radius: 13px;
  border-bottom: none;
}
#stockMainTabs #menuToggle .nav-logo{
  width: 100%; height: 100%;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
}

/* ---- Les stories, sous le titre du Botika ----
   Des cartes hautes qui défilent de côté ; la première ajoute. */
.story-rangee{
  display:flex; gap:0.55rem; overflow-x:auto; overscroll-behavior-x:contain;
  padding:0.2rem 0.1rem 0.7rem; margin:0 0 0.4rem;
  scrollbar-width:none;
}
.story-rangee::-webkit-scrollbar{ display:none; }
.story-carte{
  position:relative; flex:0 0 auto; width:92px; height:150px;
  border:none; border-radius:14px; padding:0; cursor:pointer; overflow:hidden;
  background:var(--panel-2) center/cover no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  color:#fff; font:inherit;
}
.story-carte::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 35%, transparent 55%, rgba(0,0,0,0.6));
  pointer-events:none;
}
.story-nom{
  position:absolute; left:0.4rem; right:0.4rem; bottom:0.4rem; z-index:1;
  font-size:0.72rem; font-weight:700; line-height:1.15; text-align:left;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.story-avatar{
  width:34px; height:34px; border-radius:50%; object-fit:cover; display:inline-flex;
  align-items:center; justify-content:center; background:var(--cyan); color:#fff;
  font-size:0.72rem; font-weight:700;
}
/* Le visage, en haut à gauche de la carte : son seul liseré ; l'anneau
   violet ne vient que si l'auteur est là (plus bas). */
.story-anneau{
  position:absolute; left:0.4rem; top:0.4rem; z-index:1;
  border-radius:50%; display:inline-flex;
}
.story-anneau .story-avatar{ box-shadow:0 0 0 2px var(--panel); }
/* « Hanampy story » : son visage en haut, le « + » à la jointure. */
.story-ajouter{ background:var(--panel); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,0.2), inset 0 0 0 1px var(--line); }
.story-ajouter::after{ display:none; }
.story-ajouter-fond{
  position:absolute; left:0; right:0; top:0; height:62%;
  display:flex; align-items:center; justify-content:center; background:var(--panel-2);
}
.story-ajouter-fond .story-avatar{ width:100%; height:100%; border-radius:0; font-size:1.3rem; }
.story-plus{
  position:absolute; left:50%; top:62%; transform:translate(-50%, -50%); z-index:1;
  width:30px; height:30px; border-radius:50%; background:var(--cyan); color:#fff;
  font-size:1.3rem; font-weight:700; line-height:30px; text-align:center;
  box-shadow:0 0 0 3px var(--panel);
}
.story-ajouter .story-nom{ color:var(--text); text-align:center; }

/* Le plein écran. */
.story-mijery{
  position:fixed; inset:0; z-index:400; background:#000;
  display:flex; align-items:center; justify-content:center;
}
.story-sary{ max-width:100%; max-height:100%; object-fit:contain; }
.story-barres{
  position:absolute; left:10px; right:10px; top:10px; z-index:3; display:flex; gap:4px;
}
.story-barre{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.35); overflow:hidden; }
.story-barre i{ display:block; height:100%; width:0; background:#fff; }
.story-barre.vita i{ width:100%; }
.story-barre i[style]{ animation:story-avance linear forwards; }
@keyframes story-avance{ from{ width:0; } to{ width:100%; } }
.story-tete{
  position:absolute; left:10px; right:10px; top:22px; z-index:3;
  display:flex; align-items:center; gap:0.5rem; color:#fff; font-size:0.85rem;
}
.story-tete span{ opacity:0.75; font-size:0.75rem; }
.story-tete .story-avatar{ width:32px; height:32px; opacity:1; }
.story-fafana{ margin-left:auto; cursor:pointer; font-size:1.1rem; opacity:1 !important; }
.story-hidy{ margin-left:auto; border:none; background:none; color:#fff; font-size:1.4rem; cursor:pointer; }
.story-fafana + .story-hidy{ margin-left:0.4rem; }
.story-soratra{
  position:absolute; left:16px; right:16px; bottom:84px; z-index:3; margin:0;
  text-align:center; color:#fff; font-size:1.05rem; font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.story-zone{ position:absolute; top:70px; bottom:0; z-index:2; }
.story-zone-g{ left:0; width:35%; }
.story-zone-d{ right:0; width:65%; }
.story-mandefa{
  position:absolute; left:12px; right:12px; bottom:18px; z-index:3; display:flex; gap:0.5rem;
}
.story-teny{
  flex:1; min-width:0; padding:0.6rem 0.8rem; border-radius:999px; border:1px solid rgba(255,255,255,0.4);
  background:rgba(0,0,0,0.45); color:#fff; font:inherit;
}
.story-alefa{ width:auto !important; border-radius:999px; }
.story-erreur{ position:absolute; left:12px; right:12px; bottom:70px; z-index:3; color:#ff8a8a; text-align:center; font-size:0.85rem; }

/* Les sept visages, en bas de la story ; celui qu'on a choisi est levé et
   cerclé. Chez l'auteur, le compte de chacun à la place. */
.story-reactions{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:0.35rem; padding:0.35rem 0.55rem;
  border-radius:999px; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px);
  max-width:calc(100vw - 24px);
}
.story-reactions:empty{ display:none; }
.story-reaction{
  width:40px; height:40px; padding:4px; border:none; border-radius:50%;
  background:transparent; cursor:pointer; transition:transform 0.15s ease;
}
.story-reaction .fb-emoji-3d{ width:100%; height:100%; }
.story-reaction:hover{ transform:translateY(-4px) scale(1.15); }
.story-reaction.voafidy{ transform:translateY(-6px) scale(1.2); background:rgba(255,255,255,0.18); box-shadow:0 0 0 2px var(--cyan); }
.story-bilan{ color:#fff; font-size:0.85rem; gap:0.7rem; }
.story-bilan-un{ display:inline-flex; align-items:center; gap:0.25rem; }
.story-bilan-un .fb-emoji-3d{ width:24px; height:24px; }
.story-bilan-vide{ opacity:0.8; padding:0 0.3rem; }
/* L'éparpillement passe devant la story ouverte. */
body.story-ouverte .fb-reaction-pluie{ z-index:410; }
body.story-ouverte .fb-reaction-eclat{ z-index:411; }
body.story-ouverte .fb-reaction-vole{ z-index:412; }
body.story-ouverte .fb-reaction-avis{ z-index:413; }

/* Une story en vidéo : sa première image sert de fond à la carte, et un
   petit ▶ dit qu'elle bouge. */
.story-carte-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* Chaque carte à son tour : le sary grossit doucement, la vidéo joue, et
   son ▶ s'efface le temps qu'elle bouge. */
.story-carte-fond{
  position:absolute; inset:0; background:center/cover no-repeat;
  transition:transform 4s ease-out; pointer-events:none;
}
.story-carte.story-joue .story-carte-fond{ transform:scale(1.15); }
.story-carte.story-joue .story-carte-play{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .story-carte-fond{ transition:none; }
  .story-carte.story-joue .story-carte-fond{ transform:none; }
}
.story-carte-play{
  position:absolute; right:0.4rem; top:0.45rem; z-index:1; font-size:0.7rem;
  width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.55); line-height:20px; text-align:center;
}
/* Le nom de la chanson, sous la tête de la story. */
.story-hira{
  position:absolute; left:12px; top:62px; z-index:3; max-width:70%;
  display:inline-flex; gap:0.35rem; align-items:center;
  padding:0.25rem 0.6rem; border-radius:999px; background:rgba(0,0,0,0.5);
  color:#fff; font-size:0.78rem; white-space:nowrap; overflow:hidden;
}
.story-hira span{ overflow:hidden; text-overflow:ellipsis; }

/* L'écriture : l'aperçu au milieu, et en bas, empilés, les vignettes, la
   chanson, les mots et « Alefa ». */
.story-apercu{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.story-bas{
  position:absolute; left:12px; right:12px; bottom:14px; z-index:3;
  display:flex; flex-direction:column; gap:0.5rem;
}
.story-bas .story-mandefa, .story-bas .story-erreur{ position:static; }
.story-vignettes{ display:flex; gap:0.4rem; overflow-x:auto; scrollbar-width:none; padding-top:6px; }
.story-vignettes::-webkit-scrollbar{ display:none; }
.story-vignette{
  position:relative; flex:0 0 auto; width:48px; height:72px; border-radius:8px; overflow:visible;
  cursor:pointer; box-shadow:0 0 0 2px rgba(255,255,255,0.35);
}
.story-vignette.courant{ box-shadow:0 0 0 2px var(--cyan); }
.story-vignette img, .story-vignette video{ width:100%; height:100%; object-fit:cover; border-radius:8px; pointer-events:none; }
.story-vignette b{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:0.8rem; text-shadow:0 1px 3px #000; }
.story-vignette i{
  position:absolute; right:-6px; top:-6px; width:18px; height:18px; border-radius:50%;
  background:var(--red, #e5484d); color:#fff; font-style:normal; font-size:0.65rem; line-height:18px; text-align:center;
}
.story-vignette-plus{
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem;
  background:rgba(255,255,255,0.12); border:1px dashed rgba(255,255,255,0.5); box-shadow:none;
}
.story-hira-choix{ display:flex; align-items:center; gap:0.5rem; color:#fff; font-size:0.82rem; min-width:0; }
.story-hira-btn{
  flex:none; border:1px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.45); color:#fff;
  border-radius:999px; padding:0.35rem 0.8rem; font:inherit; font-size:0.8rem; cursor:pointer;
}
.story-hira-anarana{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-hira-esory{ flex:none; border:none; background:none; color:#fff; font-size:1rem; cursor:pointer; }
.story-reaction{ position:relative; }
.story-reaction-isa{
  position:absolute; right:-4px; top:-6px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--cyan); color:#fff; font-size:0.62rem; line-height:16px; text-align:center;
}

/* ✂️ Le morceau de la vidéo, et 🎵 le début de la chanson : des curseurs
   sur fond sombre, au-dessus des vignettes. */
.story-tapaka, .story-hira-tapaka{
  display:flex; flex-direction:column; gap:0.3rem;
  padding:0.45rem 0.7rem; border-radius:12px; background:rgba(0,0,0,0.55);
  color:#fff; font-size:0.78rem;
}
.story-tapaka[hidden], .story-hira-tapaka[hidden]{ display:none; }
.story-tapaka-titre b, .story-hira-tapaka b{ font-variant-numeric:tabular-nums; }
.story-tapaka label, .story-hira-tapaka label{ display:flex; align-items:center; gap:0.6rem; }
.story-tapaka input[type=range], .story-hira-tapaka input[type=range]{ flex:1; min-width:0; accent-color:var(--cyan); }
.story-hira-tapaka label{ flex-wrap:wrap; }

/* La frise : toute la vidéo en rouge (ce qui ne part pas), le morceau
   choisi en clair par-dessus, avec ses deux bords à tirer. */
.story-frise{
  position:relative; height:34px; margin:0.25rem 0.5rem 0;
  border-radius:6px; background:rgba(220,38,38,0.55);
  touch-action:none; cursor:pointer; user-select:none;
}
.story-frise-voafidy{
  position:absolute; top:0; bottom:0;
  background:#0b3d42; border:2px solid var(--cyan); border-radius:6px;
  box-sizing:border-box; cursor:grab;
}
.story-frise-sisiny{
  position:absolute; top:-2px; bottom:-2px; width:16px; background:var(--cyan); cursor:ew-resize;
}
.story-frise-sisiny::after{
  content:''; position:absolute; top:30%; bottom:30%; left:7px; width:2px; border-radius:1px; background:#fff;
}
.story-frise-sisiny[data-sisiny="debut"]{ left:-8px; border-radius:6px 0 0 6px; }
.story-frise-sisiny[data-sisiny="fin"]{ right:-8px; border-radius:0 6px 6px 0; }
.story-frise-tete{
  position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:#fff;
  pointer-events:none; box-shadow:0 0 3px rgba(0,0,0,0.6);
}
.story-frise-legende{
  display:flex; justify-content:space-between; align-items:center; margin:0 0.5rem;
  font-size:0.7rem; opacity:0.8; font-variant-numeric:tabular-nums;
}
.story-frise-mena{
  display:inline-block; width:10px; height:10px; margin-right:0.3rem; vertical-align:-1px;
  border-radius:2px; background:rgba(220,38,38,0.8);
}
.story-frise-max{ opacity:0.7; }

/* 👁 Ceux qui ont vu sa story : le nombre en bas à gauche, et leur liste
   qui monte du bas quand on l'ouvre. */
.story-mpijery{
  position:absolute; left:14px; bottom:84px; z-index:4;
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.35rem 0.75rem; border:none; border-radius:999px;
  background:rgba(0,0,0,0.55); color:#fff; font:inherit; font-size:0.85rem; cursor:pointer;
}
.story-mpijery-lisitra{
  position:absolute; left:0; right:0; bottom:0; z-index:6; max-height:65%;
  overflow-y:auto; padding:0.8rem 1rem 1.2rem;
  border-radius:18px 18px 0 0; background:var(--panel); color:var(--text);
  box-shadow:0 -6px 24px rgba(0,0,0,0.45);
}
.story-mpijery-tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; }
.story-mpijery-tete button{ border:none; background:none; color:var(--muted); font-size:1.2rem; cursor:pointer; }
.story-mpijery-olona{ display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0; border-top:1px solid var(--line); }
.story-mpijery-olona > span{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:0.88rem; font-weight:600; }
.story-mpijery-olona small{ font-weight:400; font-size:0.72rem; color:var(--muted); }
.story-mpijery-emoji .fb-emoji-3d{ width:28px; height:28px; }
.story-mpijery-vide{ color:var(--muted); font-size:0.85rem; margin:0.4rem 0; }
.story-mpijery-olona .story-avatar{ flex:none; width:36px; height:36px; }

/* Le client est en ligne : un anneau violet autour de son visage, et non
   autour de la carte. 4px de marge : le liseré sombre du visage (2px) en
   couvre la moitié, il reste 2px de violet. */
.story-carte.en-ligne .story-anneau{ padding:4px; background:#a259ff; box-shadow:0 0 8px rgba(162,89,255,0.8); }

/* Une carte de story qu'on tient pour la déplacer : soulevée, devant les
   autres. Pas de sélection ni de menu d'image au doigt long. */
.story-carte{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* La rangée pleine : deux flèches pour la faire glisser. */
.story-cadre{ position:relative; }
.story-fleche{
  position:absolute; top:calc(75px - 0.35rem); transform:translateY(-50%); z-index:6;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.6); color:#fff; font-size:1.5rem; line-height:30px; padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.story-fleche[hidden]{ display:none; }
/* « Hanampy story » reste en tête quand la rangée défile ; la flèche de
   gauche se pose juste après lui. */
.story-rangee .story-ajouter{ position:sticky; left:0; z-index:4; }
.story-fleche-g{ left:calc(92px + 0.55rem + 4px); }
.story-fleche-d{ right:4px; }
.story-rangee.story-glisse{ cursor:grabbing; }
.story-carte.story-tiree{
  position:relative; z-index:5; opacity:0.92; cursor:grabbing;
  box-shadow:0 12px 28px rgba(0,0,0,0.45); transition:none;
}

/* ---- Les stories en ronds 3D ----
   Chaque story est une bulle ronde en relief : ombre portée dessous, ombre
   intérieure sur le bas, reflet en haut à gauche. Un anneau en hélice tourne
   autour ; le petit visage se pose sur le bord, le nom passe dessous. */
.story-rangee{ padding-top:0.35rem; }
.story-carte{
  width:88px; height:124px; border-radius:0; overflow:visible;
  background:transparent; box-shadow:none;
}
.story-carte::after{ display:none; }
.story-rond{
  position:absolute; left:4px; top:4px; width:80px; height:80px; z-index:0;
  border-radius:50%; overflow:hidden; background:var(--panel-2);
  box-shadow:0 9px 14px rgba(0,0,0,0.45), 0 2px 3px rgba(0,0,0,0.35);
  transition:transform 0.25s ease;
}
/* Le relief, par-dessus le sary : sombre en bas, reflet en haut. */
.story-rond::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.45), rgba(255,255,255,0.08) 28%, transparent 46%);
  box-shadow:inset 0 -10px 16px rgba(0,0,0,0.5), inset 0 5px 8px rgba(255,255,255,0.2);
}
.story-carte:hover .story-rond{ transform:translateY(-3px) scale(1.04); }
.story-rond .story-carte-play{ left:50%; top:50%; right:auto; transform:translate(-50%,-50%); z-index:3; }
/* L'hélice : des rubans violets, cyan et blancs qui tournent autour. */
.story-helice{
  position:absolute; inset:auto; left:0; top:0; width:88px; height:88px; z-index:1;
  border-radius:50%; padding:3px; pointer-events:none;
  background:repeating-conic-gradient(#a259ff 0 14deg, #3ee6ff 14deg 28deg, #ffffff 28deg 31deg, #a259ff 31deg 36deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  animation:story-helice 6s linear infinite;
}
@keyframes story-helice{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .story-helice{ animation:none; } .story-rond{ transition:none; } }
/* Le petit visage sur le bord de la bulle, en bas à droite. */
.story-carte .story-anneau{ left:58px; top:58px; z-index:3; }
.story-carte .story-anneau .story-avatar{ width:26px; height:26px; font-size:0.6rem; }
.story-carte .story-nom{
  top:94px; bottom:auto; left:0; right:0; text-align:center;
  color:var(--text); font-size:0.7rem; line-height:1.15;
}
/* « Hanampy story » : une bulle aussi, le « + » sur son bord. Un fond
   opaque, puisqu'il reste en tête quand la rangée défile. */
.story-ajouter{ background:var(--panel); box-shadow:none; }
.story-ajouter .story-ajouter-fond{ left:4px; top:4px; right:auto; width:80px; height:80px; }
.story-ajouter .story-ajouter-fond .story-avatar{ border-radius:50%; }
.story-ajouter .story-plus{
  left:60px; top:60px; transform:none; width:26px; height:26px; line-height:26px; font-size:1.1rem; z-index:3;
}
.story-carte.story-tiree{ box-shadow:none; filter:drop-shadow(0 12px 16px rgba(0,0,0,0.5)); }
.story-fleche{ top:calc(44px + 0.35rem); }

/* Une story posée sur l'écran, comme les petites icônes, mais au-dessus des
   fenêtres (sous la rangée du bas) : posée sur la fenêtre du Botika — sur un
   téléphone, elle couvre tout l'écran — elle y disparaissait. Au-dessus du
   fond, son nom lisible sur n'importe quelle image.
   Tenue, elle passe devant tout. Rien de tout cela sur la page d'entrée. */
.story-carte.story-bureau{
  position:fixed; z-index:105; touch-action:none; cursor:grab;
}
.story-carte.story-bureau .story-nom{ color:#fff; text-shadow:0 1px 5px rgba(0,0,0,0.9); }
.story-carte.story-bureau.story-tiree{ z-index:150; cursor:grabbing; }
.story-carte.story-fantome{ z-index:420; pointer-events:none; opacity:0.95; }
body:not(.appli-ouverte) .story-bureau{ display:none !important; }

/* ⏻ « Herinaratra » : la petite liste qui monte au-dessus du N quand on le
   tient appuyé, comme le menu d'arrêt de Windows (herinaratra.js la place). */
.menu-herinaratra-lisitra{
  position:fixed; z-index:180; width:200px;
  display:flex; flex-direction:column; padding:0.3rem;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,0.4);
}
.menu-herinaratra-lisitra[hidden]{ display:none; }
.menu-herinaratra-lisitra button{
  display:flex; align-items:center; gap:0.7rem; width:100%;
  padding:0.55rem 0.7rem; border:none; border-radius:7px; background:none;
  color:var(--text); font:inherit; font-size:0.88rem; text-align:left; cursor:pointer;
}
.menu-herinaratra-lisitra button:hover,
.menu-herinaratra-lisitra button:focus-visible{ background:var(--panel-2); outline:none; }
.menu-herinaratra-lisitra button span{ width:1.2rem; text-align:center; display:inline-flex; justify-content:center; }

/* 🔒 L'écran verrouillé : l'heure en grand, et de quoi le rouvrir. */
.ecran-hidy{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
  background:linear-gradient(160deg, #0b1d26, #05090c 70%);
  color:#fff; padding:16px; text-align:center;
}
.ecran-hidy-ora{ font-size:clamp(3.5rem, 16vw, 6rem); font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.ecran-hidy-daty{ font-size:1rem; opacity:0.8; text-transform:capitalize; margin-bottom:2rem; }
.ecran-hidy-boaty{ display:flex; flex-direction:column; gap:0.6rem; width:min(300px, 100%); }
.ecran-hidy-anarana{ font-weight:600; }
.ecran-hidy-teny{
  width:100%; box-sizing:border-box; padding:0.65rem 0.8rem; border-radius:10px;
  border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08); color:#fff; font:inherit;
}
.ecran-hidy-hadisoana{ min-height:1.2em; color:#ff8a8a; font-size:0.85rem; }

/* 🌙 L'écran en veille : tout noir, un appui le rallume. */
.ecran-atory{ position:fixed; inset:0; z-index:2000; background:#000; cursor:none; }
.ecran-hidy-toro{ font-size:0.85rem; opacity:0.85; }
.ecran-hidy-hadino{
  border:none; background:none; color:#fff; opacity:0.7; font:inherit; font-size:0.8rem;
  text-decoration:underline; cursor:pointer; padding:0.2rem;
}
.ecran-hidy-hadino:hover{ opacity:1; }
.ecran-hidy-rohy{ display:flex; justify-content:space-between; gap:0.6rem; flex-wrap:wrap; }

/* Sur le N de la rangée : combien de sites sont encore ouverts. Dans le coin
   de la tuile, qui coupe ce qui la dépasse. */
#stockMainTabs #menuToggle .n-ouvertes{
  position:absolute; top:2px; right:2px; z-index:1;
  min-width:15px; height:15px; padding:0 3px; box-sizing:border-box;
  border-radius:999px; background:#16e05a; color:#04140a;
  font-size:0.6rem; font-weight:800; line-height:15px; text-align:center;
  box-shadow:0 0 0 2px var(--panel);
  pointer-events:none;
}

/* 💬 Message : combien de hafatra ne sont pas encore lus (live.js,
   asehoyIsaHafatra). Lu dans un attribut, pour que l'icône recopiée dans la
   rangée ne prenne pas le chiffre dans son texte. */
#navList .nav-item[data-isa-hafatra]::after{
  content: attr(data-isa-hafatra);
  display:inline-block; margin-left:0.45rem; vertical-align:middle;
  min-width:18px; height:18px; padding:0 5px; box-sizing:border-box;
  border-radius:999px; background:#e5484d; color:#fff;
  font-size:0.66rem; font-weight:800; line-height:18px; text-align:center;
}
#stockMainTabs .bar-icone[data-isa-hafatra]{ position:relative; }
#stockMainTabs .bar-icone[data-isa-hafatra]::after{
  content: attr(data-isa-hafatra);
  position:absolute; top:2px; right:2px; z-index:1;
  min-width:15px; height:15px; padding:0 3px; box-sizing:border-box;
  border-radius:999px; background:#e5484d; color:#fff;
  font-size:0.6rem; font-weight:800; line-height:15px; text-align:center;
  box-shadow:0 0 0 2px var(--panel);
  pointer-events:none;
}
/* Le même chiffre sur le bouton d'une personne, dans les listes. */
.hafatra-isa-bokotra{
  position:absolute; top:-6px; right:-6px;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border-radius:999px; background:#e5484d; color:#fff;
  font-size:0.62rem; font-weight:800; line-height:16px; text-align:center;
  pointer-events:none;
}