/* 81-sans-cadre — 07/10/2026 (user) : « Je ne veux jamais voir sur mon site des trucs
   les uns sur les autres, ni un truc qui entoure des boutons. Arrange ça dans tout le site. »
   1. Les sélecteurs à options (Tous / Directs / Groupes, En cours / Archivés…) n'ont plus
      de rail autour : chaque option est un bouton à part entière, posé à côté des autres.
   2. La croix d'une notification a sa propre colonne : elle ne touche plus ni le bord de la
      carte ni un bouton. */

/* ── 1. Plus de rail autour des options ─────────────────────────────────────── */
.c76-seg,
#stock-list .skl-prop,
.dpc-seg,
.dmd-seg,
.msg-onglets,
.tx-seg{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;gap:8px !important;border-radius:0 !important}
.c76-seg{height:auto !important}

/* Chaque option non choisie : un bouton clair, avec son propre contour. */
.c76-seg button:not(.on),
#stock-list .skl-prop-btn:not(.on),
.dpc-seg button:not(.on),
.dmd-seg-b:not(.on),
.msg-onglets button:not(.on){
  background:var(--s1) !important;box-shadow:inset 0 0 0 1px var(--brd2,var(--brd)) !important;
  color:var(--tx2,var(--tx)) !important}
.c76-seg button:not(.on):hover,
#stock-list .skl-prop-btn:not(.on):hover,
.dpc-seg button:not(.on):hover,
.dmd-seg-b:not(.on):hover,
.msg-onglets button:not(.on):hover{box-shadow:inset 0 0 0 1px var(--or) !important;color:var(--tx) !important}
.c76-seg button{min-height:40px;border-radius:12px !important}
.dmd-seg-b{border-radius:12px !important}

/* L'option choisie se détache d'elle-même, sans cadre autour. */
/* 08/10/2026 (user : « les boutons en noir, enlève-les tous, ce n'est pas la DA ») : l'option
   choisie se peignait avec la couleur du TEXTE — un aplat presque noir. Elle prend l'orange de
   la marque, comme les onglets de la messagerie juste en dessous. */
#stock-list .skl-prop-btn.on{background:var(--or) !important;color:#fff !important;box-shadow:none !important}
#stock-list .skl-prop-btn.on b{background:rgba(255,255,255,.22) !important;color:#fff !important}
#stock-list .skl-prop-btn[data-prop="loc"].on{background:#7C3AED !important}
.msg-onglets button.on{background:var(--or) !important;color:#fff !important;box-shadow:none !important}

/* Tarif : le curseur glisse d'un bouton à l'autre, sans rail ; l'autre option a son contour. */
.tx-seg{column-gap:8px !important}
.tx-seg button{box-shadow:inset 0 0 0 1px var(--tx-lin,#E6E3DB);background:#fff !important}
.tx-seg button.on{box-shadow:none;background:transparent !important}
.tx-seg-curseur{top:0 !important;bottom:0 !important;left:0 !important;width:calc(50% - 4px) !important}
.tx[data-plan="large"] .tx-seg-curseur{transform:translateX(calc(100% + 8px)) !important}

/* Planning : les commandes du bandeau restent groupées par l'espacement, sans fond autour. */
#t-plan .plan-tete .plan-actions,
#t-plan .plan-tete .plan-tete-nav{background:transparent !important;padding:0 !important}
#t-plan .plan-tete .plan-tete-nav{gap:4px !important}
#t-plan .plan-tete .plan-tete-nav .plan-fleche,
#t-plan .plan-tete .plan-tete-nav .plan-auj{background:rgba(255,255,255,.16) !important}
#t-plan .plan-tete .plan-tete-nav .plan-fleche:hover,
#t-plan .plan-tete .plan-tete-nav .plan-auj:hover{background:rgba(255,255,255,.28) !important}

/* ── 3. Bandeaux de couleur : les boutons ne recouvrent plus l'icône ─────────────
   Sur téléphone, la rangée de boutons (PDF, QR, Excel…) prenait toute la largeur et
   le titre se réduisait à zéro : les boutons passaient PAR-DESSUS l'icône. L'icône et
   le nom gardent leur place ; c'est la rangée de boutons qui défile si elle déborde. */
#site-app .stk-bandeau .stk-bandeau-rang{min-width:var(--stk-ico-l,22px) !important}
#site-app .stk-bandeau .stk-bandeau-ico{flex:none}
#site-app .stk-bandeau .stk-bandeau-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#site-app .stk-bandeau .stk-bandeau-actes{min-width:0 !important;flex:0 1 auto !important;max-width:none !important;justify-content:flex-start !important}
/* Quand les boutons ne tiennent pas dans le bandeau, ils passent dessous : ils vont alors
   à la ligne au lieu de filer hors de l'écran, jamais coupés. */
#site-app .sec-hd.stk-hd-actions{flex-wrap:wrap !important;overflow:visible !important}
#site-app .sec-hd.stk-hd-actions > div{flex:1 1 100%;min-width:0;flex-wrap:wrap}