/* ===========================================================================
   ÉCRAN FICHE ARTICLE — ART-02 (.fa-*)
   Components/Pages/Stock/FicheArticle.razor.

   UNE FEUILLE POUR CET ÉCRAN, chargée après modele-erp.css. L'écran est une
   PAGE OBJET du gabarit : identité (.mx-obj), bande de faits (.mx-faits), rail
   d'onglets groupés (RailOnglets) et six tableaux (.tbl-*). Presque tout vient
   donc du gabarit, et il ne reste ici que ce qu'aucun autre écran ne demande :
   l'écart de prix d'un client, la composition d'une déclinaison, la barre de
   recherche de l'écran de choix.

   Une classe qui servirait un deuxième écran remonterait dans le gabarit
   (modele-erp.css, section 11) — jamais l'inverse.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css, donc
   le thème sombre suit sans qu'on réécrive une règle.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. ÉCRAN DE CHOIX — l'adresse sans identifiant.
   Il n'est plus le chemin principal : depuis le lot 1 du catalogue, une rangée
   de la liste ouvre la fiche. Il sert le favori et le lien recopié.
   --------------------------------------------------------------------------- */

.fa-chercher {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}

/* Le champ emprunte .tbl-recherche au gabarit de liste — même dessin, même
   place que dans toutes les barres d'outils de l'ERP. Il lui faut seulement
   plus de large : son invite nomme trois champs interrogés. */
.fa-chercher-champ { max-width: 420px; }

.fa-vide {
    padding: 36px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--et-muted);
}
.fa-vide .bi { font-size: 24px; color: var(--et-inerte); }

/* Le fil d'Ariane vit seul au-dessus de la page objet : celle-ci porte déjà
   l'identité, et un en-tête d'écran par-dessus l'aurait dite deux fois. */
.fa-fil { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   2. LA COLONNE QUI JUSTIFIE L'ÉCRAN — l'écart de prix par client.

   « Vous m'aviez fait quel prix la dernière fois ? » est LA question du
   commerce. L'écart compare le dernier prix au prix moyen du même client :
   négatif, le commercial a descendu ; positif, il a remonté. Sous 5 % il ne
   s'affiche pas — c'est le bruit de la négociation, pas une dérive.

   DEUX TEINTES ET NON UNE : baisse et hausse ne demandent pas le même geste.
   Elles reprennent les couleurs sémantiques de Fiori déjà servies par les
   pastilles de l'écran, plutôt que deux rouges voisins.
   --------------------------------------------------------------------------- */

.fa-ecart,
.fa-remise,
.fa-frais {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
}
.fa-ecart { font-weight: 600; }
.fa-ecart.est-baisse { color: var(--et-danger-ink); }
.fa-ecart.est-hausse { color: var(--et-ok); }

/* La remise consentie sur la dernière vente : elle qualifie le prix au-dessus
   d'elle, donc elle le suit — jamais une colonne à part, qui serait vide huit
   fois sur dix. */
.fa-remise { color: var(--et-avertissement-ink); }

/* La part de frais d'approche, ramenée à l'unité. C'est ce qui sépare le prix
   facturé du coût qui entre réellement dans la marge. */
.fa-frais { color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   3. STOCK ET MOUVEMENTS.
   --------------------------------------------------------------------------- */

.fa-depot { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* Rupture : rouge parce qu'elle bloque une vente, comme au catalogue. */
.fa-rupture { color: var(--et-danger-ink); font-weight: 600; }

/* Un mouvement a un SENS, et c'est la première chose qu'on lit sur la ligne.
   Le signe seul ne suffit pas en balayage : « −12 » et « +12 » ne se
   distinguent qu'au caractère près dans une colonne de chiffres alignés. */
.fa-sortie { color: var(--et-danger-ink); }
.fa-entree { color: var(--et-ok); }

/* ---------------------------------------------------------------------------
   4. DÉCLINAISONS — le seul panneau qui saisit.
   Sa table reste écrite à la main : sa rangée bascule en édition sur place, ce
   que le composant Tableau ne fait pas. Elle est portée sur .tbl du gabarit,
   dans .tbl-cadre qui lui donne ses jetons.
   --------------------------------------------------------------------------- */

/* Le bouton « modèle » se pose en fin de rangée d'intitulé de groupe, où
   GroupeChamps réserve un contenu libre. */
.fa-groupe-act { margin-left: auto; }

/* LES ATTRIBUTS EN GRILLE, et non en rangée Bootstrap : le nombre d'attributs
   est décidé par l'utilisateur (Couleur, Taille, Matière…) et une grille auto
   s'y plie sans qu'on ait à choisir un nombre de colonnes qui sera faux. */
.fa-attributs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    margin-bottom: 14px;
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
}
.fa-attribut { background: var(--et-surface); padding: 10px 12px; min-width: 0; }
.fa-attribut-lbl {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--et-table-head-encre);
    margin-bottom: 6px;
}
.fa-attribut-valeurs { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* La rangée de création — attribut, puis valeur. Les intitulés sont AU-DESSUS
   et non à droite comme dans une fiche : ce n'est pas un formulaire d'objet
   mais une barre d'outils, et ses trois champs se lisent de gauche à droite
   dans l'ordre du geste. */
.fa-saisie {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.fa-saisie-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fa-saisie-lbl { font-size: 12px; color: var(--et-muted); }
.fa-saisie-champ .mx-input,
.fa-saisie-champ .mx-select { width: 180px; }

/* Édition sur place : le champ prend la largeur de sa colonne, pas plus. */
.fa-edit-prix { width: 110px; text-align: right; }
.fa-edit-actif { display: inline-flex; }

/* ---------------------------------------------------------------------------
   4bis. LA VIGNETTE DE L'ARTICLE — l'image reprise du système d'origine.

   ELLE NE PREND LA PLACE QUE SI ELLE A QUELQUE CHOSE À MONTRER : pas de cadre
   vide en attente, pas de silhouette grise. Sur un catalogue dont neuf articles
   sur dix n'ont pas d'image, un emplacement réservé serait un trou répété mille
   fois, et il pousserait l'identité vers la droite pour rien.

   CARRÉE ET BORNÉE, parce que la source ne l'est pas : une image de catalogue
   arrive en portrait, en paysage ou en carré, et c'est `object-fit: contain`
   qui les fait toutes tenir dans le même gabarit sans en déformer aucune ni en
   rogner le sujet. Le fond neutre remplit alors les marges.

   AUCUNE COULEUR LITTÉRALE : bordure et fond viennent des jetons, donc le thème
   sombre suit sans qu'on réécrive une règle.
   --------------------------------------------------------------------------- */

.fa-vignette {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    padding: 3px;
    align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   4bis. LA ZONE PHOTO — la vignette, et les deux gestes qui la tiennent.

   ELLE N'APPARAÎT QUE POUR QUI PEUT DÉPOSER. Le §4 explique pourquoi la vignette
   ne réserve pas sa place quand il n'y a pas d'image : sur un catalogue dont
   neuf articles sur dix n'en ont pas, un emplacement vide serait un trou répété
   mille fois. Le cadre vide n'est donc rendu qu'à qui tient le catalogue — pour
   lui, il n'est pas un trou, il est L'INVITATION : sans lui, rien n'apprend que
   la fiche accepte une image.

   LES DEUX COMMANDES SONT DES LIENS, PAS DES BOUTONS. Elles pèsent moins que le
   « Retour au catalogue » de la barre d'outils, et c'est voulu : poser une image
   n'est pas l'action principale de cette fiche, elle l'accompagne. Le libellé
   dit lequel des deux gestes on fait — « Déposer » quand il n'y a rien,
   « Remplacer » quand il y a déjà quelque chose : le même mot pour les deux
   ferait croire qu'on ajoute une seconde image.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons.
   --------------------------------------------------------------------------- */

.fa-photo {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
}

/* Le cadre en attente. Le pictogramme reste PÂLE : il indique la nature de ce
   qui manque, il ne réclame pas qu'on le comble. */
.fa-vignette-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--et-inerte);
    font-size: 22px;
}

.fa-photo-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Le <label> EST la commande : InputFile ne rend pas un bouton mais un champ de
   fichier, que ce libellé recouvre — d'où le champ masqué plutôt que supprimé,
   qui resterait sans effet. Même geste que sur la fiche personnel. */
.fa-photo-lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--et-form-blue-encre);
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
}
.fa-photo-lien:hover { text-decoration: underline; }
.fa-photo-lien:disabled { color: var(--et-inerte); cursor: default; text-decoration: none; }
.fa-photo-lien input[type="file"] { display: none; }

/* Le retrait est DESTRUCTEUR et RARE : il ne prend le rouge qu'au survol, comme
   le retrait d'une association fiscale au §11.x du gabarit. Un lien rouge en
   permanence attirerait vers ce qu'on veut justement éviter. */
.fa-photo-retirer { color: var(--et-inerte); }
.fa-photo-retirer:hover { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   4bis. L'ONGLET CODES-BARRES — l'aperçu, l'étoile, le refus d'encodage.

   La table est une `.mx-tbl` du gabarit et la saisie une `.fa-saisie` déjà posée
   pour les déclinaisons : il ne reste ici que ce que le code-barres ajoute.

   L'APERÇU EST UN SVG EN MILLIMÈTRES, produit par CodeBarreSvg pour l'étiquette.
   Posé tel quel dans une cellule, il s'affiche à sa taille d'impression et
   déborde de la rangée. On le contraint donc en HAUTEUR — jamais en largeur seule,
   qui l'étirerait : un code-barres dont les modules ne sont plus proportionnels
   ne scanne pas. Le fond blanc du SVG (ses zones de silence) reste blanc en thème
   sombre, et c'est voulu : un code-barres se lit en noir sur blanc.
   --------------------------------------------------------------------------- */

.fa-cb-apercu {
    display: inline-flex;
    align-items: center;
}

.fa-cb-apercu svg {
    height: 30px;
    width: auto;      /* le ratio, donc les modules, restent ceux du dessin */
    display: block;
}

/* L'étoile du principal : c'est un ÉTAT, pas une commande — d'où la teinte
   d'accent et l'absence de bouton autour. */
.fa-cb-etoile { color: var(--et-amber-ink); }

/* Les deux commandes de la rangée. Sobres au repos : sur six codes, douze boutons
   colorés feraient un tableau de boutons plutôt qu'un tableau de codes. */
.fa-cb-act {
    border: 0;
    background: none;
    padding: 2px 4px;
    line-height: 1;
    color: var(--et-inerte);
    cursor: pointer;
}
.fa-cb-act:hover { color: var(--et-lien); }
.fa-cb-act:disabled { color: var(--et-inerte); cursor: default; }

/* Le retrait casse un scan : rouge au survol seulement, comme le retrait de la
   photo juste au-dessus. */
.fa-cb-retirer:hover { color: var(--et-danger-ink); }

/* LE REFUS D'ENCODAGE N'EST PAS UNE ERREUR D'ÉCRAN : le code est enregistré, il
   ne s'imprimera simplement pas. Il se dit donc en ligne, dans la couleur du
   danger, et non dans un bandeau qui ferait croire à un échec de la fiche. */
.fa-cb-refus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--et-danger-ink);
}

/* Le lien vers la planche : une étape suivante, non une commande de la table.
   Il se sépare de la saisie sans faire un pied de panneau à lui seul. */
.fa-cb-planche { margin-top: 12px; }

/* L'essai sous le champ de saisie : ce qui sortirait si on rattachait ce code. */
.fa-cb-essai {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    min-height: 32px;
}

/* ---------------------------------------------------------------------------
   4ter. L'ONGLET FISCALITÉ — le peu que la table du gabarit ne porte pas.

   Le « ce qui s'applique » et l'héritage sont deux `.mx-tbl` du gabarit ; seules
   restent ici la ligne d'avertissement posée DANS une cellule et le pied de
   l'éditeur. Tout le reste — l'éditeur d'associations lui-même — est monté dans
   le gabarit (modele-erp.css §11.x, .mx-taxe-*) depuis qu'il sert deux écrans.
   --------------------------------------------------------------------------- */

/* L'avertissement de résolution : un code DÉSIGNÉ qui n'a pas pu être retenu.
   Il vit sous l'origine, dans la même cellule, parce qu'il la QUALIFIE — « hérité
   de la famille, parce que celui de l'article ne s'applique pas ». Sur une ligne
   à part, il aurait perdu ce lien. */
.fa-taxe-alerte {
    margin-top: 3px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--et-avertissement-ink);
}

.fa-taxe-pied {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.fa-taxe-message { font-size: 12px; color: var(--et-succes-ink); }

/* ---------------------------------------------------------------------------
   5. PALIERS — docs/conventions-responsive.md.
   Recette à 390 / 768 / 1280 / 1600 px. Le rail d'onglets et la bande de faits
   portent leurs propres paliers dans le gabarit ; il ne reste ici que ce que
   cet écran ajoute.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
    /* La vignette rétrécit avant l'identité : sur un téléphone, c'est le code et
       le libellé qu'on vient lire, l'image ne fait que les accompagner. */
    .fa-vignette { width: 56px; height: 56px; }
    .fa-vignette-vide { font-size: 18px; }

    .fa-chercher-champ { max-width: none; flex-basis: 100%; }
    .fa-saisie-champ { flex: 1 1 160px; }
    .fa-saisie-champ .mx-input,
    .fa-saisie-champ .mx-select { width: 100%; }
}

/* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible
   interactive ne descend sous 44 px, et une cible ne rétrécit jamais. Les
   champs du gabarit sont déjà repris par lot02 ; celui de l'édition sur place
   est propre à cet écran, donc à sa charge. */
@media (max-width: 1024px) {
    .fa-edit-prix { height: 44px; }

    /* Les commandes des codes-barres sont des cibles à part entière, et l'une des
       deux est destructrice : la viser de travers coûte un scan en caisse. */
    .fa-cb-act {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Les deux commandes de la photo sont des cibles à part entière : « Retirer »
       est destructeur, le viser de travers coûte l'image. Le minimum, jamais une
       hauteur fixe — un libellé qui se replie ne doit pas être tronqué. */
    .fa-photo-lien { min-height: 44px; padding-left: 8px; padding-right: 8px; }
}