/* 83-audit-boutons — 21/10/2026 (user) : « qu'on comprenne que la croix est un bouton »
   et audit de tous les boutons du site (centrage, espacement, français et anglais). */

/* ── Croix des bandeaux : un vrai petit bouton CARRÉ, teinté de la couleur du bandeau ──
   30/10/2026 (user) : la croix de la bannière d'essai apparaissait entourée DEUX fois
   (le fond teinté + le liseré interne se touchaient) et étirée en rectangle — le
   `min-height:44px` global de « #trial-banner button » l'allongeait à 44 de haut pour
   30 de large. On la force carrée (sélecteur plus spécifique que la règle 44) et on ne
   garde QU'UN seul contour : un fond discret au repos, qui se renforce au survol. */
#trial-banner #trial-banner-close,
#dash-pin-warning button[title="Masquer cet avertissement"]{
  width:30px !important;min-width:30px !important;max-width:30px !important;
  height:30px !important;min-height:30px !important;max-height:30px !important;
  padding:0 !important;border:none !important;border-radius:8px !important;
  display:inline-grid !important;place-items:center;font-size:17px !important;line-height:1 !important;font-weight:700 !important;
  background:color-mix(in srgb,currentColor 12%,transparent) !important;
  box-shadow:none !important;
  cursor:pointer;transition:background .15s}
#trial-banner #trial-banner-close:hover,
#dash-pin-warning button[title="Masquer cet avertissement"]:hover{
  background:color-mix(in srgb,currentColor 22%,transparent) !important;
  box-shadow:none !important}
#dash-pin-warning button[title="Masquer cet avertissement"]{color:#c2410c !important}
body.dark-theme #dash-pin-warning button[title="Masquer cet avertissement"]{color:#fb923c !important}

/* ── Notifications sur téléphone : la croix monte au niveau du titre ──
   Centrée dans la hauteur, elle touchait le bouton « Valider » sur petit écran. */
@media (max-width:600px){
  #s-notif .notif-ligne .notif-archive-x{top:10px !important;transform:none !important}
}

/* ── Boutons qui se touchaient ── */
#t-plan .plan-tete .plan-actions{gap:4px !important}
.skp-nav{gap:4px !important}

/* ── Téléphone : plus de texte qui déborde de sa ligne ou finit en « … » ── */
@media (max-width:600px){
  #t-dash .mvt-s,#t-act .mvt-s{white-space:normal !important;overflow-wrap:anywhere}
  .cmdc-sous{white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
}

/* ── La croix du résumé « Messages » : même place et même allure que les autres croix ──
   Elle était posée à 5 px du coin, contre le bouton « Ouvrir la messagerie ». */
#s-notif .notif-ligne-message .notif-resume-x{
  top:50% !important;right:10px !important;transform:translateY(-50%) !important;
  width:26px !important;height:26px !important;font-size:14px !important;
  display:flex !important;align-items:center !important;justify-content:center !important}
#s-notif .notif-ligne-message .notif-resume-x:hover{background:rgba(239,68,68,.10) !important;color:#ef4444 !important}
@media (max-width:600px){
  #s-notif .notif-ligne-message .notif-resume-x{top:10px !important;transform:none !important}
}

/* ── Filtres du stock : le contenu au centre de la pastille ── */
#stock-list .stk-puce{justify-content:center !important}

/* ── Barre d'onglets : une seule rangée, nette, à toutes les largeurs ──
   21/10 : sur tablette (≤ 900 px) la grille à 4 colonnes posait 4 + 4 + 1 (« Notes » seul en
   bas) et étirait deux onglets sur toute la largeur. Désormais : tous les onglets sur UNE ligne,
   même largeur, icône au-dessus du mot, groupe centré ; un onglet ne dépasse jamais 120 px,
   donc deux onglets restent côte à côte au centre au lieu de se disperser. */
@media (max-width:900px){
  #nav:not(#_){display:flex !important;flex-wrap:nowrap;justify-content:center;
    gap:2px !important;width:100%;max-width:none;margin:0;padding:4px 6px !important}
  #nav:not(#_) > .nb{flex:1 1 auto;width:auto !important;min-width:0;max-width:120px;position:relative;
    padding:6px 7px !important;font-size:11.5px !important;letter-spacing:-.1px}
  #nav:not(#_) > .nb span:not(.nb-count){overflow:visible;text-overflow:clip}
  /* La pastille rouge se pose sur le coin de l'icône, comme sur un téléphone. */
  #nav:not(#_) .nb-count{right:auto !important;left:calc(50% + 3px) !important;top:2px !important}
}
/* Ordinateur : icône et mot sur une ligne → la pastille suit le mot (« Commandes 4 »)
   au lieu de flotter au-dessus du coin de l'onglet. */
@media (min-width:901px){
  #nav .nb{display:inline-flex;align-items:center}
  #nav .nb-count{position:static !important;margin-left:7px;box-shadow:none;
    min-width:18px;height:18px;font-size:10.5px}
}

/* ── Aucun texte coupé en « … », à aucune largeur (22/10) ──
   Noms d'articles, de chantiers, de catégories, lignes de commande : le texte passe
   sur une deuxième ligne au lieu d'être tronqué. */
:is(.skp-nom,.skp-cat-nom,.cmdc-ch,.cmdc-sous,.a3-kpi-l,.a3-kpi-s,.a3-art-t b,.a3-ch,.a3-p .stk-brut,
  .a3-b-t .stk-brut,.a3-mi-c b,.a3-mi-c small,.cmdc-kpi > span:last-child,.dpc-titre small,.dpc-titre b,
  .dpc-a-t b,#s-notif .notif-ligne-quoi,#s-notif .notif-ligne-quoi .stk-brut,.login-company):not(#_){
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;overflow-wrap:break-word}

/* ── Stock sur tablette (761–1000 px) : les catégories passent au-dessus de la liste ──
   La colonne de gauche mangeait 200 px : les noms d'articles tenaient en 9 lettres. */
@media (min-width:761px) and (max-width:1000px){
  .skp{grid-template-columns:minmax(0,1fr) !important;gap:12px}
  .skp-nav{position:static;flex-direction:row;flex-wrap:wrap;max-height:none;overflow:visible;
    padding:0;border:0;background:transparent;gap:6px}
  .skp-cat{flex:none;border:1px solid var(--brd);background:var(--s1);border-radius:999px;
    padding:0 12px !important;min-height:36px !important;font-size:13px}
  .skp-cat.on{border-color:color-mix(in srgb,var(--c,var(--or)) 55%,var(--brd))}
}