/* ─── Les cartes d'une réponse (25/09) ─────────────────────────────
     Image ② de ChatGPT : sous la bulle de Nimzou, ce que l'outil a
     trouvé — l'agenda d'abord (encarts.js). Ce ne sont PAS des bulles :
     elles se lisent d'un coup d'œil et portent un geste. Au téléphone
     elles flottent sur l'avatar comme les bulles ; au bureau, plus bas. */
  .encart {
    align-self: flex-start; width: min(100%, 440px); max-width: 88%;
    display: flex; flex-direction: column; gap: var(--e-2);
    padding: var(--e-3); border-radius: var(--r-cadre);
    background: var(--bubble-bot-bg); border: 1px solid var(--bubble-line);
    box-shadow: 0 2px 14px var(--bubble-shadow);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .encart svg { width: 18px; height: 18px; flex: none; }
  .encart-tete {
    display: flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-corps); font-weight: 600;
  }
  .encart-liste {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--r-objet); overflow: hidden;
  }
  .encart-liste > * + * { border-top: 1px solid var(--line); }
  .encart-jour {
    padding: var(--e-1) var(--e-3);
    font-size: var(--t-note); color: var(--muted); background: var(--glass-btn);
  }
  .encart-ligne { display: grid; grid-template-columns: 80px 1fr; min-height: 38px; }
  .encart-heure {
    display: flex; align-items: center; padding: 0 var(--e-3);
    border-right: 1px solid var(--line);
    font-size: var(--t-corps); font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .encart-ligne.suite .encart-heure { font-weight: 400; color: var(--muted); }
  .encart-titre {
    align-self: center; padding: var(--e-2) var(--e-3); min-width: 0;
    font-size: var(--t-corps); overflow-wrap: anywhere;
  }
  .encart-detail { color: var(--muted); }   /* le lieu, la répétition */
  /* Une ligne de liste : une case vide (à faire), le texte, un compte. */
  .encart-el {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: 38px; padding: var(--e-2) var(--e-3); font-size: var(--t-corps);
  }
  .encart-el .encart-titre { padding: 0; }
  .encart-case {
    flex: none; width: 16px; height: 16px;
    border: 1.5px solid var(--muted); border-radius: var(--r-plein);
  }
  .encart-compte { margin-left: auto; flex: none; font-size: var(--t-note); color: var(--muted); }
  .encart-reste { margin: 0; font-size: var(--t-note); color: var(--muted); }
  .encart-action {
    align-self: center; display: inline-flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible); padding: 0 var(--e-4);
    font: inherit; font-size: var(--t-note); color: var(--text); cursor: pointer;
    background: none; border: 1px solid var(--accent); border-radius: var(--r-objet);
  }
  .encart-action svg { width: 16px; height: 16px; }
  .encart-action:hover { background: var(--glass-btn); }
  .encart-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Le bouton du stock seul (25/09 au soir) : une réponse du stock sans
     carte à elle. Pas de cadre autour ; le bouton porte le fond des
     cartes, pour se lire sur l'avatar au téléphone. */
  .encart.encart-seul {
    width: auto; padding: 0; background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .encart-seul .encart-action {
    align-self: flex-start; background: var(--bubble-bot-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .encart-seul .encart-action:hover { background: var(--glass-btn); }
  /* Une ligne du stock : la vignette de l'écran du stock, « réf — nom »
     et la catégorie, les chiffres à droite. C'est un bouton : elle ouvre
     la fiche du produit. */
  .encart-produit {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center; gap: var(--e-3);
    width: 100%; min-height: 60px; padding: var(--e-2) var(--e-3);
    font: inherit; font-size: var(--t-corps); color: inherit; text-align: left;
    background: none; border: 0; cursor: pointer;
  }
  .encart-liste > .encart-produit + .encart-produit { border-top: 1px solid var(--line); }
  .encart-produit:hover { background: var(--glass-btn); }
  .encart-produit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .encart-vignette {
    width: 44px; height: 44px; border-radius: var(--r-objet); object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-btn); color: var(--muted);
  }
  .encart-vignette svg { width: 22px; height: 22px; }
  .encart-produit-texte { display: flex; flex-direction: column; min-width: 0; }
  .encart-nom { font-weight: 600; overflow-wrap: anywhere; }
  /* La catégorie et la marque d'alerte : à l'étroit, la marque passe
     entière à la ligne plutôt que de couper l'une ou l'autre. */
  .encart-sous {
    display: flex; flex-wrap: wrap; column-gap: var(--e-2);
    font-size: var(--t-note); color: var(--muted);
  }
  .encart-marque { font-weight: 600; color: var(--danger); white-space: nowrap; }
  .encart-chiffres {
    display: flex; flex-direction: column; align-items: flex-end;
    font-size: var(--t-note); color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .encart-chiffres b { font-size: var(--t-corps); color: var(--text); }
  .encart-chiffres .encart-rouge, .encart-chiffres .encart-rouge b { color: var(--danger); }
  /* Une ligne du classement : la ligne du stock, son rang devant. */
  .encart-classe { grid-template-columns: 22px 44px minmax(0, 1fr) auto; }
  .encart-rang {
    text-align: center; font-weight: 600; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  /* La valeur du stock : les deux montants en tête (l'un sous l'autre à
     l'étroit) et les pièces, puis une ligne par catégorie — son nom à
     gauche, ses deux montants à droite, qui passent à la ligne ENTRE eux,
     jamais dedans. */
  .encart-totaux {
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6);
    padding: var(--e-3) var(--e-3) var(--e-2);
  }
  .encart-montant { display: flex; flex-direction: column; }
  .encart-montant b { font-size: var(--t-chiffre); font-variant-numeric: tabular-nums; }
  .encart-montant span, .encart-pieces { font-size: var(--t-note); color: var(--muted); }
  .encart-pieces { flex-basis: 100%; }
  .encart-cat {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    column-gap: var(--e-3); min-height: 38px; padding: var(--e-2) var(--e-3);
    font-size: var(--t-corps);
  }
  .encart-cat-montants {
    margin-left: auto; text-align: right; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .encart-cat-montants > span { white-space: nowrap; }
  /* Au téléphone, les montants passent TOUJOURS sous le nom : une ligne
     qui tient et sa voisine qui se coupe ne s'alignent plus. */
  @media (max-width: 640px) {
    .encart-cat-montants { flex-basis: 100%; }
  }
  /* Une ligne d'activité : l'icône et le domaine à gauche, les comptes à
     droite (ils passent à la ligne plutôt que de déborder) ; le détail
     ne s'ouvre qu'avec « Voir les détails ». */
  .encart-act { padding: var(--e-2) var(--e-3); }
  .encart-act-tete {
    display: grid; grid-template-columns: 18px auto minmax(0, 1fr);
    align-items: center; gap: var(--e-3); min-height: 32px;
    font-size: var(--t-corps);
  }
  .encart-act-tete svg { color: var(--muted); }
  .encart-act.alerte .encart-act-tete svg { color: var(--danger); }
  .encart-act-valeur { text-align: right; font-variant-numeric: tabular-nums; }
  .encart-act-valeur > span { white-space: nowrap; }
  .encart-details {
    display: none; margin: var(--e-1) 0 0 calc(18px + var(--e-3)); padding: 0;
    list-style: none; font-size: var(--t-note); color: var(--muted);
  }
  .encart.ouverte .encart-details { display: block; }
  .encart.ouverte .encart-action svg { transform: rotate(180deg); }
  .encart-details li { overflow-wrap: anywhere; }
  .encart-details li + li { margin-top: 2px; }
  .encart-details .encart-reste { font-style: italic; }
  .encart-lien {
    display: inline-flex; align-items: center; min-height: var(--cible); padding: 0;
    font: inherit; color: var(--accent); cursor: pointer;
    background: none; border: 0; text-decoration: underline; text-underline-offset: 3px;
  }
  .encart-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }