/* ============================================================
   ARPE · CARTES D'ACTION DE L'AGENT
   Feuille de référence — préfixe .aac-
   Un SYSTÈME : une seule forme, l'icône et la teinte varient
   par famille (data-family). 11 familles couvertes, extensible.
   États pilotés par le moteur : .is-pending .is-applied
   .is-cancelled .is-error (posés sur .aac).
   ============================================================ */

.aac{
  --aac-sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  --aac-mono:ui-monospace,'JetBrains Mono','SFMono-Regular',Menlo,monospace;
  --st:var(--accent);
  position:relative;font-family:var(--aac-sans);font-size:13.5px;line-height:1.5;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(20,22,31,.04);overflow:hidden;
  max-width:640px;flex:none;min-height:min-content;
}
[data-theme="noir"] .aac{box-shadow:0 1px 2px rgba(0,0,0,.5)}
.aac *{box-sizing:border-box}
.aac+.aac{margin-top:9px}
/* le filet de teinte : la seule couleur au repos */
.aac::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--st)}

/* ---- teintes par famille ---- */
.aac[data-family="note"]{--st:var(--froid)}
.aac[data-family="tache"]{--st:var(--tiede)}
.aac[data-family="event"]{--st:var(--froid)}
.aac[data-family="etape"]{--st:var(--green)}
.aac[data-family="message"]{--st:var(--accent)}
.aac[data-family="priorite"]{--st:var(--chaud)}
.aac[data-family="client"]{--st:var(--green)}
.aac[data-family="bien"]{--st:var(--green)}
.aac[data-family="update"]{--st:var(--accent)}
.aac[data-family="liste"]{--st:var(--froid)}
.aac[data-family="dossier"]{--st:var(--tiede)}

/* ============ EN-TÊTE ============ */
.aac-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:0 10px;padding:11px 13px 11px 15px}
.aac-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 24%,transparent)}
.aac-ic svg{width:14px;height:14px}
.aac-hm{min-width:0}
.aac-t{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.008em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aac-s{display:block;margin-top:1px;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pastille d'état, à droite de l'en-tête */
.aac-st{flex:none;display:none;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;
  font-family:var(--aac-mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;
  color:color-mix(in srgb,var(--sst,var(--muted)) 88%,var(--text));
  background:color-mix(in srgb,var(--sst,var(--muted)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--sst,var(--muted)) 26%,transparent)}
.aac-st i{width:5px;height:5px;border-radius:50%;background:var(--sst,var(--muted));flex:none}

/* ============ CORPS ============ */
.aac-b{padding:0 13px 12px 15px}
.aac-b>*+*{margin-top:8px}

/* -- corps 1 · DIFF (le plus fréquent) --
   .aac-diff > .aac-df : label / avant / flèche / après */
.aac-diff{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--s2)}
.aac-df{display:grid;grid-template-columns:minmax(74px,.62fr) minmax(0,1fr) 14px minmax(0,1.1fr);
  align-items:baseline;gap:0 9px;padding:7px 10px;background:var(--surface)}
.aac-df+.aac-df{border-top:1px solid var(--border)}
.aac-df-l{font-family:var(--aac-mono);font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aac-df-a{color:var(--muted);text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aac-df-x{color:var(--border-hi);font-size:11px;text-align:center;line-height:1.3}
.aac-df-b{font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis}
/* champ ajouté (pas de valeur avant) / vidé */
.aac-df.add .aac-df-a{text-decoration:none;font-family:var(--aac-mono);font-size:11px;opacity:.7}
.aac-df.del .aac-df-b{font-weight:600;color:var(--muted);font-family:var(--aac-mono);font-size:11px}
/* diff long : on plie au-delà de 6 lignes */
.aac-df.fold{display:none}
.aac-diff.open .aac-df.fold{display:grid}
.aac-fold{width:100%;display:block;padding:7px 10px;border:0;border-top:1px solid var(--border);
  background:var(--s2);font-family:var(--aac-mono);font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:left}
.aac-fold:hover{color:var(--text);background:var(--s3)}

/* -- corps 2 · CRITÈRES (création de fiche) -- */
.aac-crit{display:flex;flex-wrap:wrap;gap:5px}
.aac-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:12px;font-weight:600;color:var(--text-dim);
  background:var(--s2);border:1px solid var(--border);font-variant-numeric:tabular-nums}
.aac-tag.key{color:var(--text);border-color:var(--border-hi)}
.aac-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.aac-meta b{color:var(--text-dim);font-weight:650;font-variant-numeric:tabular-nums}

/* -- corps 3 · TEXTE / BROUILLON ÉDITABLE --
   .aac-txt[contenteditable] ou <textarea class="aac-txt"> */
.aac-txt{display:block;width:100%;max-height:216px;overflow:auto;
  font-family:inherit;font-size:13px;line-height:1.62;color:var(--text-dim);
  padding:9px 11px;background:var(--s2);border:1px solid var(--border);
  border-radius:var(--radius);resize:vertical;
  white-space:pre-wrap;overflow-wrap:anywhere}
.aac-txt:hover{border-color:var(--border-hi)}
.aac-txt:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:var(--surface);color:var(--text);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.aac-hint{display:flex;align-items:center;gap:5px;font-family:var(--aac-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.aac-hint svg{width:11px;height:11px;opacity:.8}

/* -- corps 4 · LISTE D'ÉLÉMENTS -- */
.aac-items{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.aac-it{display:flex;align-items:baseline;gap:9px;padding:6px 10px;background:var(--surface);font-size:13px}
.aac-it+.aac-it{border-top:1px solid var(--border)}
.aac-it i{font-family:var(--aac-mono);font-size:10px;font-style:normal;color:var(--muted);flex:none;
  font-variant-numeric:tabular-nums}
.aac-it span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}
.aac-it b{margin-left:auto;flex:none;font-family:var(--aac-mono);font-size:11px;color:var(--muted);font-weight:600}
.aac-it-more{padding:6px 10px;border-top:1px solid var(--border);background:var(--s2);
  font-family:var(--aac-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}

/* -- corps 5 · FORMULAIRE À OUVRIR (dossier de vente) -- */
.aac-form{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px dashed var(--border-hi);border-radius:var(--radius);background:var(--s2);
  font-size:12.5px;color:var(--text-dim)}
.aac-form svg{width:15px;height:15px;flex:none;color:var(--muted)}
.aac-form b{color:var(--text);font-weight:650}

/* -- état vide de corps -- */
.aac-void{padding:9px 11px;border:1px dashed var(--border-hi);border-radius:var(--radius);
  font-size:12.5px;color:var(--muted);background:var(--surface)}

/* ============ PIED ============ */
.aac-f{display:flex;align-items:center;gap:8px;padding:10px 13px 11px 15px;
  border-top:1px solid var(--border);background:var(--s2)}
.aac-note{margin-right:auto;font-family:var(--aac-mono);font-size:10px;letter-spacing:.06em;
  color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aac-btn{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--aac-sans);font-size:12.5px;font-weight:650;line-height:1;
  padding:7px 12px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:background .14s,color .14s,border-color .14s;white-space:nowrap}
.aac-btn svg{width:13px;height:13px}
.aac-btn.p{background:var(--text);color:var(--bg)}
.aac-btn.p:hover{background:var(--text-dim)}
.aac-btn.g{background:transparent;color:var(--text-dim)}
.aac-btn.g:hover{background:var(--s3);color:var(--text)}
.aac-btn.s{background:var(--surface);color:var(--text);border-color:var(--border)}
.aac-btn.s:hover{background:var(--s3)}
.aac-btn[disabled]{opacity:.5;cursor:default}
.aac-spin{width:12px;height:12px;border-radius:50%;flex:none;
  border:1.6px solid color-mix(in srgb,var(--bg) 40%,transparent);border-top-color:var(--bg);
  animation:aacSpin .7s linear infinite}
@keyframes aacSpin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.aac-spin{animation-duration:2s}}

/* ============ ÉTATS ============ */
/* en cours */
.aac.is-pending{--sst:var(--accent)}
.aac.is-pending .aac-st{display:inline-flex}
.aac.is-pending .aac-b{opacity:.7}
/* appliquée : la carte se calme, le pied devient un undo */
.aac.is-applied{--st:var(--green);--sst:var(--green);background:var(--s2)}
.aac.is-applied .aac-st{display:inline-flex}
.aac.is-applied .aac-b{opacity:.78}
.aac.is-applied .aac-f{background:transparent}
/* annulée : tout retombe en gris, corps replié */
.aac.is-cancelled{--st:var(--border-hi);--sst:var(--muted);background:var(--s2)}
.aac.is-cancelled .aac-st{display:inline-flex}
.aac.is-cancelled .aac-t{color:var(--text-dim)}
.aac.is-cancelled .aac-b{display:none}
.aac.is-cancelled .aac-f{background:transparent}
/* erreur : un encart court, jamais un paragraphe rouge */
.aac.is-error{--st:var(--chaud);--sst:var(--chaud)}
.aac.is-error .aac-st{display:inline-flex}
.aac-err{display:none;align-items:flex-start;gap:8px;margin:0 13px 12px 15px;padding:8px 11px;
  border-radius:var(--radius);font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--chaud) 82%,var(--text));
  background:color-mix(in srgb,var(--chaud) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--chaud) 24%,transparent)}
.aac.is-error .aac-err{display:flex}
.aac-err svg{width:14px;height:14px;flex:none;margin-top:1px}

/* ---- dock ~380px et mobile ---- */
@media(max-width:560px){
  .aac-h,.aac-f{padding-left:13px}
  .aac-b{padding-left:13px}
  .aac-df{grid-template-columns:minmax(0,1fr);gap:2px}
  .aac-df-l{grid-column:1}
  .aac-df-x{display:none}
  .aac-df-a{font-size:12.5px}
  .aac-f{flex-wrap:wrap}
  .aac-note{width:100%;margin:0 0 4px}
  .aac-btn{flex:1}
  .aac-btn.g{flex:0 0 auto}
}
.aac-narrow .aac-df{grid-template-columns:minmax(0,1fr);gap:2px}
.aac-narrow .aac-df-x{display:none}
.aac-narrow .aac-note{display:none}