/* facture-lignes.css — l'éditeur des lignes d'une facture (facture-lignes.js), partagé par le Studio et la Gestion.
   Les champs au dessin du kit (.edit-table : bordure fine, bords arrondis, focus corail) — plus aucun champ carré ;
   la poignée, le rabais et l'arrondi comme dans l'offre. Une ligne se lit sur deux rangs : le libellé en entier,
   puis son calcul (6 × 40.00 CHF = 240.—). Aucune couleur écrite en dur : les jetons du kit.
   Classes préfixées `fl-` : `.on`, `.fait`, `.attente`… sont des classes globales de SnapDesk ou du kit. */

.fl{display:flex;flex-direction:column;gap:14px}
.fl-t{display:flex;flex-direction:column;border-top:1px solid var(--border)}
/* poignée · ce qu'est la ligne · ses gestes ; dessous, son calcul */
.fl-l{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:10px;row-gap:7px;align-items:start;padding:10px 0;border-bottom:1px solid var(--border)}
.fl-l > .fl-grip{grid-row:1 / span 2}
.fl-lib{grid-column:2;display:flex;flex-direction:column;gap:6px;min-width:0}
.fl-a{grid-column:3;display:flex;align-items:center;gap:2px}
.fl-calc{grid-column:2 / 4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
/* une seule rangée : un acompte déduit, qui se lit sans se retaper */
.fl-calc.fl-un{grid-row:1}

/* le champ : celui du kit, en plus compact */
.fl-in{width:100%;min-width:0;border:1px solid var(--field-border);border-radius:var(--r-ctrl);padding:7px 9px;margin:0;
  font:500 13px/1.35 'Satoshi',sans-serif;color:var(--ink);background-color:var(--surface);font-variant-numeric:tabular-nums;
  transition:border-color .15s,box-shadow .15s}
.fl-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,88,71,.16)}
.fl-in::placeholder{color:var(--ink-3)}
/* la liste de l'arrondi garde le chevron du kit : `background-color`, jamais le raccourci `background` */
.fl-val select.fl-in{width:auto;padding-right:30px;text-align:left}
.fl-titre{font-weight:600}
.fl-desc{resize:vertical;min-height:32px;max-height:180px;field-sizing:content;font-size:12.5px;color:var(--ink-2)} /* la hauteur suit le texte */

/* le calcul : quantité × prix, le montant au bout */
.fl-qte,.fl-prix,.fl-val{position:relative;display:flex;align-items:center;gap:6px;flex:none}
.fl-qte{width:96px}
.fl-prix{width:132px}
.fl-qte .fl-in,.fl-prix .fl-in{text-align:right}
.fl-prix .fl-in{padding-right:40px}
.fl-qte .fl-in:has(+ .fl-u){padding-right:34px}
.fl-u{position:absolute;right:9px;font-size:11.5px;font-weight:600;color:var(--ink-3);pointer-events:none}
.fl-op{font-size:13px;font-weight:600;color:var(--ink-3);flex:none}
.fl-sp{flex:1 1 0}
.fl-m{margin-left:auto;text-align:right;white-space:nowrap;font:600 14px/1.2 'Switzer',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.fl-moins{color:var(--ink-2)}
.fl-val .fl-in{width:78px;text-align:right}
.fl-base{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.fl-quoi,.fl-arr-t{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap}
.fl-quoi{font-size:12.5px;color:var(--ink-2)}
.fl-deduc .fl-arr-t{font-weight:600;color:var(--ink-2)}

/* la précision d'une ligne : toujours là, en retrait — un geste qu'on ne voit qu'au survol, on ne le trouve pas */
.fl-plus{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 2px;cursor:pointer;border-radius:6px;
  font:600 11.5px/1.3 'Satoshi',sans-serif;color:var(--ink-3);transition:color .12s}
.fl-plus:hover{color:var(--coral-text)}
.fl-plus:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* la poignée : celle des positions de l'offre */
.fl-grip{align-self:start;margin-top:3px;width:18px;height:28px;border:0;background:none;cursor:grab;border-radius:6px;color:var(--ink-3);display:grid;place-items:center;padding:0}
.fl-grip::before{content:'';width:8px;height:14px;background-image:radial-gradient(circle,currentColor 1.2px,transparent 1.5px);background-size:4px 4.7px}
.fl-grip:hover{background:var(--surface-2);color:var(--ink)}
.fl-grip:focus-visible{outline:2px solid var(--accent);outline-offset:1px;color:var(--ink)}
.fl-grip:active{cursor:grabbing}
.fl-glisse{opacity:.45}
.fl-avant{box-shadow:inset 0 2px 0 var(--accent)}
.fl-apres{box-shadow:inset 0 -2px 0 var(--accent)}

/* le rabais d'une ligne : le bouton %, allumé quand il y en a un ; sa rangée, sous la ligne */
.fl-pct{width:30px;height:30px;border-radius:var(--r-ctrl);border:1px solid var(--border);background:var(--surface);cursor:pointer;
  font:700 12px/1 'Satoshi',sans-serif;color:var(--ink-3);transition:color .12s,border-color .12s,background .12s}
.fl-pct:hover{color:var(--ink);border-color:var(--border-strong)}
.fl-pct.on{background:var(--coral-soft);border-color:transparent;color:var(--coral-text)}
.fl-pct:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fl-sous{padding-top:0;margin-top:-3px;border-bottom-style:dashed}
.fl-sous .fl-calc{padding-left:0}
/* un rabais sur ce qui est au-dessus, l'arrondi : un fond léger, ils ne sont pas des positions */
.fl-rab,.fl-arr{background:var(--surface-2);border-radius:var(--r-ctrl);border-bottom-color:transparent;margin:6px -10px;padding:10px}
/* le fond déborde de 10 px de chaque côté : poignées et montants restent dans les colonnes des positions */
.fl-arr .fl-lib{justify-content:center;min-height:30px}
/* % ou CHF */
.fl-unite-rab{display:inline-flex;flex:none;background:var(--surface-2);border-radius:var(--r-ctrl);padding:2px}
.fl-rab .fl-unite-rab,.fl-arr .fl-unite-rab{background:var(--surface)}
.fl-unite-rab button{border:0;background:none;border-radius:var(--r-ctrl);padding:5px 8px;cursor:pointer;font:700 11.5px/1 'Satoshi',sans-serif;color:var(--ink-3)}
.fl-unite-rab button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
.fl-rab .fl-unite-rab button[aria-pressed="true"]{background:var(--surface-2);box-shadow:none}
.fl-unite-rab button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ajouter : le catalogue, cherché en tapant ; une ligne libre ; un rabais ; un arrondi */
.fl-ajout{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fl-cat{position:relative;flex:1 1 240px;min-width:200px}
/* les trois boutons passent à la ligne ENSEMBLE, sous la recherche : jamais un bouton seul
   (la colonne du Studio est plus étroite que celle de la Gestion). Pas de requête de conteneur :
   elle ferait de l'éditeur un contexte d'empilement, et la liste du catalogue passerait sous
   le champ du délai qui le suit. */
.fl-ajout-b{display:flex;flex-wrap:wrap;gap:8px}
.fl-cat-ic{position:absolute;left:11px;top:0;bottom:0;display:grid;place-items:center;color:var(--ink-3);pointer-events:none}
.fl-cat .fl-in{padding-left:32px;border-radius:999px;height:34px}
.fl-cat-liste{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:320px;overflow:auto;padding:5px;min-width:320px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctrl);box-shadow:0 14px 34px rgba(15,12,18,.18),0 2px 6px rgba(15,12,18,.08)}
.fl-cat-o{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:1px;padding:8px 10px;border-radius:var(--r-ctrl);cursor:pointer}
.fl-cat-o[aria-selected="true"]{background:var(--surface-2)}
.fl-cat-n{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-cat-s{grid-row:2;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-cat-p{grid-column:2;grid-row:1 / 3;align-self:center;font:600 12.5px/1 'Switzer',sans-serif;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-cat-vide{padding:14px 12px;font-size:12.5px;color:var(--ink-3)}

/* le montant à payer */
.fl-tot{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-top:2px}
.fl-du{display:flex;align-items:baseline;gap:18px}
.fl-du span{font-size:13px;font-weight:600;color:var(--ink-2)}
.fl-du b{font:700 20px/1.1 'Switzer',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.fl-cinq{margin:0;font-size:11.5px;color:var(--ink-3)}

.fl-vide{padding:18px 8px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-3);border-bottom:1px solid var(--border)}
.fl-vide b{display:block;font-size:13.5px;font-weight:650;color:var(--ink-2);margin-bottom:2px}

/* au téléphone, épuré : le calcul tient sur un rang ; la précision s'ajoute à l'ordinateur (celle qui existe
   reste éditable) et le sous-total d'un rabais se lit sur la facture */
@media (max-width:520px){
  .fl-qte{width:78px}
  .fl-prix{width:112px}
  .fl-plus,.fl-base{display:none}
}
@media (prefers-reduced-motion:reduce){ .fl-in,.fl-plus,.fl-pct{transition:none} }