/* cockpit-actions.css — actions plus visibles (30/09/2026, maquette validée par Hervé).
   Chargé APRÈS la première feuille de style d'index.html : l'emporte à spécificité égale.
   Uniquement des jetons (var(--…)) : thème clair, sombre et marque blanche (avMarqueAppliquer) s'appliquent seuls.
   Classes posées par cockpit-actions.js (aucun comportement modifié) :
     .kc-act-primaire   action principale d'une zone (bouton plein)
     .kc-act-secondaire autre action (bordure couleur de marque)
     .kc-act-danger     action destructive (rouge bordé, rangée en fin de ligne)
     .kc-rangee         conteneur d'actions d'un tiroir (ordre visuel des actions destructives)
     .kc-a-ico          bouton qui a reçu une icône (svg.kc-ico)
     .kc-ligne-ouvrable ligne de tableau qui ouvre une fiche (survol + chevron ›) */

/* ---------- 1. Action principale / secondaire ---------- */
.btn.kc-act-primaire, .btn.secondary.kc-act-primaire{
  background:var(--accent-fill); color:var(--on-accent); border-color:var(--accent-fill); box-shadow:none;}
/* Survol : on garde le fond plein (contraste garanti par avMarqueAppliquer) et on ajoute un halo, au lieu de
   --accent-fill-hover qui, éclairci en mode sombre pour certaines couleurs de marque, descend sous 4,5:1. */
.btn.kc-act-primaire:hover, .btn.secondary.kc-act-primaire:hover{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); box-shadow:0 0 0 3px var(--accent-soft);}
.btn.secondary.kc-act-secondaire{
  background:var(--surface); color:var(--accent-ink); border-color:var(--accent); box-shadow:none;}
.btn.secondary.kc-act-secondaire:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}

/* ---------- 2. Actions destructives : rouge bordé, à part ---------- */
.btn.secondary.kc-act-danger, .btn.kc-act-danger:not(.danger){
  background:transparent; color:var(--crit); border-color:var(--crit); box-shadow:none;}
.btn.secondary.kc-act-danger:hover, .btn.kc-act-danger:not(.danger):hover{
  background:var(--crit-soft); color:var(--crit); border-color:var(--crit);}
.kc-rangee > .kc-act-danger{order:90;}
.kc-rangee > .kc-act-danger.kc-act-danger-1{margin-left:auto;}
.kc-rangee > .kc-act-danger.kc-act-danger-groupe{margin-left:12px;}
.btn.kc-act-primaire:disabled, .btn.kc-act-secondaire:disabled, .btn.kc-act-danger:disabled{opacity:.5;}

/* Focus clavier toujours visible sur les actions (ne dépend pas de la couleur). */
.btn:focus-visible, .kc-ligne-ouvrable:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- 4. Icônes des actions courantes ---------- */
.btn.kc-a-ico{display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.kc-ico{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none;}
.lotb-table td .btn .kc-ico, .btn[style*="padding:2px"] .kc-ico, .btn[style*="padding:3px"] .kc-ico{width:14px; height:14px;}

/* ---------- 3. « + Nouveau… » : le titre du volet devient un bouton ---------- */
.au-nouveau > summary{align-items:center; gap:12px;}
.au-nouveau > summary::before{content:none; display:none;}
.au-nouveau > summary > strong{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:8px;
  background:var(--accent-fill); color:var(--on-accent); border:1px solid var(--accent-fill);
  font-size:14px; font-weight:600; line-height:1.25; box-shadow:var(--shadow-card);}
.au-nouveau > summary > strong::before{
  content:"+"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  font-size:17px; font-weight:600; line-height:1; background:color-mix(in srgb, var(--on-accent) 18%, transparent);}
.au-nouveau[open] > summary > strong::before{content:"\2212";}
.au-nouveau > summary:hover > strong{box-shadow:0 0 0 3px var(--accent-soft);}
/* Volet ouvert : le bouton passe en version bordée (on voit qu'on est dedans) */
.au-nouveau[open] > summary > strong{background:var(--surface); color:var(--accent-ink); border-color:var(--accent); box-shadow:none;}
.au-nouveau[open] > summary > strong::before{background:var(--accent-soft);}
.au-nouveau[open] > summary:hover > strong{background:var(--accent-soft);}
.au-nouveau > summary > .hint{color:var(--ink-muted); font-size:13px; font-weight:400;}
.au-nouveau > summary:focus-visible{outline:none;}
.au-nouveau > summary:focus-visible > strong{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- 5. Lignes qui ouvrent une fiche ---------- */
tbody tr.kc-ligne-ouvrable{cursor:pointer;}
/* 25/10 (décision 12) : ligne d'en-tête d'un groupe du journal de trésorerie (par opération / par date). */
tr.kc-gl-groupe td{background:var(--surface-2); border-top:2px solid var(--border); font-size:13px; padding:6px 10px;}
tr.kc-gl-groupe td .hint{font-weight:400;}
tbody tr.kc-ligne-ouvrable:hover{background:var(--accent-soft);}
tbody tr.kc-ligne-ouvrable > td:last-child{position:relative; padding-right:28px;}
tbody tr.kc-ligne-ouvrable > td:last-child::after{
  content:"\203A"; content:"\203A" / "";
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:18px; line-height:1; color:var(--ink-faint); pointer-events:none;}
tbody tr.kc-ligne-ouvrable:hover > td:last-child::after{color:var(--accent-ink);}
@media (max-width:700px){
  /* Listes en cartes (.au-table) : le chevron reste à droite de la carte */
  .au-table tbody tr.kc-ligne-ouvrable{position:relative; padding-right:28px;}
  .au-table tbody tr.kc-ligne-ouvrable > td:last-child{position:static; padding-right:0;}
  .au-table tbody tr.kc-ligne-ouvrable > td:last-child::after{right:10px;}
}
@media print{ tbody tr.kc-ligne-ouvrable > td:last-child::after{content:none;} }

/* ---------- 6. Liens dans le texte ---------- */
:where(main, .tache-drawer) :where(.card, .hint, p, td, li, dd, .msg, .note) a:not(.btn):not(.pill):not(.au-chip):not([role="button"]):not([role="tab"]){
  color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
:where(main, .tache-drawer) :where(.card, .hint, p, td, li, dd, .msg, .note) a:not(.btn):not(.pill):not(.au-chip):not([role="button"]):not([role="tab"]):hover{
  text-decoration-thickness:2px;}
:where(main, .tache-drawer) a:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px;}
.msg.err a:not(.btn){color:inherit;}

/* ---------- 7. Trois familles (07/10/2026, maquette validée par Hervé) ----------
   Un CHAMP est toujours blanc et bordé (angles courts, texte normal). Un BOUTON n'est jamais blanc et toujours en
   pilule : plein = action principale, teinté = secondaire, texte souligné = tertiaire (fermer, retour, réinitialiser),
   contour rouge = destructif. Un FILTRE à bascule est une pastille grise, encre + coche quand il est actif.
   Toujours des jetons : marque blanche et mode sombre suivent. */
/* Boutons : pilule, demi-gras ; secondaire teinté (plus de bouton blanc). */
.btn{border-radius:999px; font-weight:600;}
.btn.secondary, .btn.secondary.kc-act-secondaire{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; box-shadow:none;}
.btn.secondary:hover, .btn.secondary.kc-act-secondaire:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); box-shadow:none;}
/* Tertiaire : fermer, retour, réinitialiser, plus tard… (classe posée par cockpit-actions.js) et .btn.ghost. */
.btn.secondary.kc-act-neutre, .btn.ghost, .btn.discret{background:transparent; color:var(--accent-ink); border-color:transparent; box-shadow:none;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--accent-ink) 45%, transparent); padding-inline:10px;}
.btn.secondary.kc-act-neutre:hover, .btn.ghost:hover, .btn.discret:hover{background:var(--accent-soft); text-decoration-color:var(--accent-ink);}
/* Destructif : contour rouge, jamais de fond. */
.btn.secondary.danger, .btn.secondary.kc-act-danger, .btn.kc-act-danger:not(.danger){background:transparent; color:var(--crit); border-color:var(--crit); box-shadow:none;}
.btn.secondary.danger:hover, .btn.secondary.kc-act-danger:hover, .btn.kc-act-danger:not(.danger):hover{background:var(--crit-soft); color:var(--crit); border-color:var(--crit);}
/* Boutons d'action dans une cellule de tableau : compacts mais toujours teintés. */
.lotb-table td .btn.secondary, .au-table td .btn.secondary{padding:3px 10px; font-size:12px;}

/* Filtres à bascule (Tous / À faire / En cours…) : pastille grise, encre + coche quand il est actif. */
.btn.secondary.kc-filtre, .btn-row:has(> .btn.secondary.active) > .btn.secondary:not(.kc-act-primaire):not(.kc-act-danger):not(.kc-act-neutre):not(.active){
  background:var(--surface-2); color:var(--ink); border-color:transparent; font-weight:500; text-decoration:none; padding:6px 13px;}
.btn.secondary.kc-filtre:hover, .btn-row:has(> .btn.secondary.active) > .btn.secondary:not(.kc-act-primaire):not(.kc-act-danger):not(.kc-act-neutre):not(.active):hover{background:var(--border); border-color:transparent;}
.btn.secondary.active, .btn.secondary[aria-pressed="true"], .btn.secondary.kc-filtre.active, .btn-row:has(> .btn.secondary.active) > .btn.secondary.active{background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600;}
.btn.secondary.active::before, .btn.secondary[aria-pressed="true"]::before{content:"\2713"; font-weight:700; margin-right:5px;}
.btn.secondary.active:hover, .btn.secondary[aria-pressed="true"]:hover, .btn-row:has(> .btn.secondary.active) > .btn.secondary.active:hover{background:var(--ink); color:var(--surface); border-color:var(--ink);}
.kc-n{display:inline-block; min-width:18px; margin-left:6px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1.5; text-align:center;
  font-variant-numeric:tabular-nums; background:color-mix(in srgb, var(--ink) 10%, transparent); color:inherit;}
.btn.secondary.active .kc-n{background:color-mix(in srgb, var(--surface) 25%, transparent);}

/* Champs : les seuls éléments blancs bordés de l'écran (angles courts, trait net, texte normal). */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea){
  border-radius:6px; border-color:color-mix(in srgb, var(--ink) 32%, var(--surface)); font-weight:400; box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);}
:where(input, select, textarea):hover:not(:disabled):not(:focus){border-color:color-mix(in srgb, var(--ink) 55%, var(--surface));}
.form-row label{font-size:12px; letter-spacing:.01em;}


/* ---- 8. Barre d'actions des tiroirs (25/10/2026, décision 14 du chantier UX) : collée en bas du tiroir, deux actions
   visibles au plus (action de l'étape en plein + une secondaire teintée), le reste dans un menu « ⋯ » groupé par verbe,
   destructives en fin de menu. Les boutons sont les mêmes noeuds qu'avant (écouteurs conservés). ---- */
.tache-drawer .kc-act-barre{position:sticky;bottom:-28px;z-index:3;margin:16px -24px -28px;padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
@media (max-width:600px){.tache-drawer .kc-act-barre{margin:16px -16px -24px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));bottom:-24px}}
.tache-drawer .kc-act-barre>.btn{flex:0 1 auto}
@media (max-width:600px){.tache-drawer .kc-act-barre>.btn{flex:1 1 40%;justify-content:center}}
.kc-act-barre .kc-act-danger-1{margin-left:0}
.kc-act-plus-btn{font:inherit;font-weight:700;font-size:18px;line-height:1;width:40px;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;flex:0 0 40px}
.kc-act-plus-btn:hover,.kc-act-plus-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.kc-act-plus{position:absolute;right:24px;bottom:calc(100% - 4px);min-width:240px;max-width:min(360px,calc(100vw - 32px));max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:5}
@media (max-width:600px){.kc-act-plus{right:16px;left:16px;max-width:none}}
.kc-act-plus .kc-act-plus-g{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:8px 10px 2px}
.kc-act-plus .kc-act-plus-g.kc-act-plus-danger{color:var(--crit)}
.kc-act-plus>.btn{justify-content:flex-start;text-align:left;border-radius:9px;min-height:44px;width:100%;margin:0}
.kc-act-plus>.btn.kc-act-secondaire,.kc-act-plus>.btn.kc-act-primaire,.kc-act-plus>.btn.kc-act-danger{background:transparent;border-color:transparent;color:var(--ink)}
.kc-act-plus>.btn.kc-act-danger{color:var(--crit)}
.kc-act-plus>.btn:hover{background:var(--surface-2,var(--bg))}