/* Le Fil — « Ma valise » (js/valise/vue.js, #/projet/<id>/valise) : la liste libre de ce qu'on emporte. Préfixe fva-, kit du budget (.fb, .fb-bouton, .fb-saisie),
   jetons --f-* (css/fil.css) et lavis du domaine Logistique (--mv-l / --mv-t, posés par .fmv-t-olive). Aucune couleur en dur.
   La valise dessinée se remplit avec --fva-part (0 à 1, posée par la vue) ; bouclée (.fva--bouclee), ses sangles se ferment et sa coche se trace. */
[data-interface="fil"] .fva { --fva-part: 0; max-width: 760px; display: grid; gap: 18px; align-content: start; }

/* ---------- En-tête ---------- */
[data-interface="fil"] .fva-tete { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 24px; background: var(--mv-l); }
[data-interface="fil"] .fva-tete-texte { min-width: 0; }
[data-interface="fil"] .fva-colo { margin: 0 0 2px; color: var(--mv-t); font: 600 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: .02em; overflow-wrap: anywhere; }
[data-interface="fil"] .fva .fb-titre { font: 400 34px/1.1 var(--fbv-serif, Georgia, serif); }
[data-interface="fil"] .fva-compte { margin-top: 6px; color: var(--f-encre); font-weight: 500; font-variant-numeric: tabular-nums; }
[data-interface="fil"] .fva-scene { flex: none; width: 112px; transform-origin: 50% 100%; }
[data-interface="fil"] .fva-dessin { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--mv-t); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-interface="fil"] .fva-d-corps { fill: var(--f-surface); stroke: none; }
[data-interface="fil"] .fva-d-plein { fill: var(--mv-t); stroke: none; opacity: .3; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fva-part)); transition: transform .7s var(--f-spring); }
[data-interface="fil"] .fva-d-sangle { opacity: .45; }
[data-interface="fil"] .fva-d-boucle { fill: var(--f-surface); transition: fill .3s; }
[data-interface="fil"] .fva-d-pastille { fill: var(--mv-t); stroke: none; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .45s var(--f-spring); }
[data-interface="fil"] .fva-d-coche { stroke: var(--f-surface); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s cubic-bezier(.6, 0, .2, 1) .2s; }
[data-interface="fil"] .fva--bouclee .fva-d-pastille { transform: scale(1); }
[data-interface="fil"] .fva--bouclee .fva-d-coche { stroke-dashoffset: 0; }
[data-interface="fil"] .fva--bouclee .fva-d-boucle { fill: var(--mv-t); }
[data-interface="fil"] .fva-rebond { animation: fva-rebond .5s var(--f-spring); }
@keyframes fva-rebond { 0% { transform: scale(1); } 35% { transform: scale(1.06, .94); } 70% { transform: scale(.98, 1.03); } 100% { transform: scale(1); } }

/* ---------- Ajouter ---------- */
[data-interface="fil"] .fva-ajout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
[data-interface="fil"] .fva-avis { margin: -8px 2px 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
[data-interface="fil"] .fva-idees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
[data-interface="fil"] .fva-idee { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border: 1px dashed var(--f-filet); border-radius: 999px; background: transparent; color: var(--f-encre-2); font: 500 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .3s var(--f-spring); }
[data-interface="fil"] .fva-idee svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-interface="fil"] .fva-idee:hover, [data-interface="fil"] .fva-idee:focus-visible { background: var(--f-surface); color: var(--f-encre); border-style: solid; transform: translateY(-1px); }
[data-interface="fil"] .fva-idee:active { transform: scale(.97); }
[data-interface="fil"] .fva-idee--reprise { padding-inline: 14px; border-style: solid; background: var(--f-surface); color: var(--f-encre); }

/* ---------- La liste ---------- */
[data-interface="fil"] .fva-zone { display: grid; gap: 18px; }
[data-interface="fil"] .fva-vide { margin: 0; padding: 22px 18px; border: 1px dashed var(--f-filet); border-radius: 20px; color: var(--f-encre-2); text-align: center; }
[data-interface="fil"] .fva-titre-groupe { margin: 0 2px 8px; color: var(--f-encre-2); font: 600 14px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
[data-interface="fil"] .fva-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--f-filet); border-radius: 20px; background: var(--f-surface); overflow: hidden; }
[data-interface="fil"] .fva-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--f-filet); }
[data-interface="fil"] .fva-item:first-child { border-top: 0; }
[data-interface="fil"] .fva-entre { animation: fva-entre .35s var(--f-spring) both; }
@keyframes fva-entre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-interface="fil"] .fva-choix { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 6px 8px 14px; cursor: pointer; min-width: 0; }
[data-interface="fil"] .fva-case { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-interface="fil"] .fva-coche { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--f-encre-3, var(--f-encre-2)); border-radius: 50%; background: transparent; transition: background .25s, border-color .25s, transform .35s var(--f-spring); }
[data-interface="fil"] .fva-coche svg { width: 18px; height: 18px; fill: none; stroke: var(--f-surface); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[data-interface="fil"] .fva-coche-trait { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.6, 0, .2, 1); }
[data-interface="fil"] .fva-case:checked + .fva-coche { background: var(--f-fait); border-color: var(--f-fait); transform: scale(1.08); }
[data-interface="fil"] .fva-case:checked + .fva-coche .fva-coche-trait { stroke-dashoffset: 0; }
[data-interface="fil"] .fva-case:focus-visible + .fva-coche { outline: 2px solid var(--f-encre); outline-offset: 3px; }
[data-interface="fil"] .fva-choix:hover .fva-coche { border-color: var(--f-encre); }
[data-interface="fil"] .fva-case:checked:hover + .fva-coche, [data-interface="fil"] .fva-choix:hover .fva-case:checked + .fva-coche { border-color: var(--f-fait); }
[data-interface="fil"] .fva-texte { min-width: 0; font: 500 16px/1.35 Inter, system-ui, sans-serif; overflow-wrap: anywhere; transition: color .25s; }
[data-interface="fil"] .fva-item--fait .fva-texte { color: var(--f-encre-2); text-decoration: line-through; text-decoration-color: var(--f-filet); }
[data-interface="fil"] .fva-retirer { display: grid; place-items: center; width: 48px; height: 48px; margin-right: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--f-encre-2); cursor: pointer; transition: background .2s, color .2s; }
[data-interface="fil"] .fva-retirer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-interface="fil"] .fva-retirer:hover, [data-interface="fil"] .fva-retirer:focus-visible { background: var(--f-surface-2, var(--f-fond)); color: var(--f-urgent); }

/* ---------- Pied ---------- */
[data-interface="fil"] .fva-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 48px; }
[data-interface="fil"] .fva-etat { margin: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
[data-interface="fil"] .fva-etat[data-etat="erreur"] { color: var(--f-urgent); font-weight: 600; }
[data-interface="fil"] .fva-erreur { display: grid; gap: 12px; justify-items: start; }

@media (max-width: 520px) {
  [data-interface="fil"] .fva-tete { gap: 14px; padding: 14px 16px; border-radius: 20px; }
  [data-interface="fil"] .fva-scene { width: 84px; }
  [data-interface="fil"] .fva .fb-titre { font-size: 28px; }
}
@media (min-width: 900px) {
  [data-interface="fil"] .fva { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-interface="fil"] .fva *, [data-interface="fil"] .fva-rebond, [data-interface="fil"] .fva-entre { transition: none !important; animation: none !important; }
}