/* ============================================================================
   ids-import.css — habillage partagé des écrans d'import  (v19.203)

   Ces règles viennent du connecteur API (ConnecteurApiAssistant.razor), où
   l'écran « Reliez les champs » a été conçu. Elles vivent désormais ici pour
   que l'import de FICHIER fournisseur affiche exactement le même écran, via le
   composant partagé Pages/ImportCenter/ImportFieldMapper.razor.

   Le connecteur API garde sa copie locale : elle est identique, et le toucher
   aurait signifié modifier un fichier de 1 979 lignes qui fonctionne, sans
   compilateur pour le vérifier. Les deux convergeront quand la copie locale
   sera retirée — à faire lors d'un passage où le build est disponible.

   Les variables sont déclarées sur .ids-import : c'est le conteneur que pose
   l'assistant fichier. .cx-dlg (le conteneur de l'API) déclare les siennes de
   son côté, donc les deux fonctionnent sans dépendre l'un de l'autre.
   ============================================================================ */

.ids-import {
  --cx-indigo: #5B4BE0;
  
        --cx-indigo-d: #4436C4;
  
        --cx-indigo-w: #F4F2FF;
  
        --cx-teal: #0E9C97;
  
        --cx-teal-w: #E6F7F6;
  
        --cx-ink: #141B2D;
  
        --cx-ink-2: #55617C;
  
        --cx-ink-3: #8A96AF;
  
        --cx-line: #E6EAF3;
  
        --cx-line-2: #F1F4FA;
  
        --cx-surface: #FBFCFE;
  
        --cx-red: #D5303E;
  
        --cx-red-w: #FDECEC;
  
        --cx-amber: #B8760A;
  
        --cx-amber-w: #FDF5E7;
  
        --cx-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  
        max-width: 900px;
  
}

/* ── Titres de section ───────────────────────────────────────────── */
    .cx-hd { margin-bottom: 20px; }
.cx-hd h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 5px;
        color: var(--cx-ink); letter-spacing: -.02em; line-height: 1.3; }
.cx-hd p { font-size: .875rem; color: var(--cx-ink-2); margin: 0; max-width: 62ch; }
/* ── Chemin JSON ─────────────────────────────────────────────────── */
    .cx-jp { font-family: var(--cx-mono); font-size: .74rem; font-weight: 500;
        background: var(--cx-indigo-w); color: var(--cx-indigo-d);
        padding: 3px 8px; border-radius: 6px;
        border: 1px solid #E1DCFB;
        word-break: break-all; }
/* ── Étape 3 : source vers cible ─────────────────────────────────── */
    .cx-mapgrid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.cx-pane { border: 1px solid var(--cx-line); border-radius: 13px; overflow: hidden; background: #fff; }
.cx-pane-h { display: flex; justify-content: space-between; align-items: center; gap: 10px;
        padding: 11px 14px; background: var(--cx-surface);
        border-bottom: 1px solid var(--cx-line-2);
        font-size: .82rem; font-weight: 650; }
.cx-pane-b { max-height: 460px; overflow-y: auto; }
.cx-count { font-size: .7rem; font-weight: 600; color: var(--cx-ink-3); }
.cx-count.warn { color: var(--cx-amber); }
.cx-count.ok { color: var(--cx-teal); }
/* Source */
    .cx-srcrow { display: flex; justify-content: space-between; align-items: center; gap: 10px;
        width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
        padding: 8px 14px; border-bottom: 1px solid var(--cx-line-2);
        font-family: inherit; transition: background .14s ease; }
.cx-srcrow:last-child { border-bottom: 0; }
.cx-srcrow:hover { background: var(--cx-indigo-w); }
/* Estompé, jamais masqué : ce qu'on n'utilise pas doit rester visible. */
    .cx-srcrow.used { opacity: .42; }
.cx-srcrow.picked { background: var(--cx-indigo); }
.cx-srcrow.picked .cx-jp { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.3); }
.cx-srcrow.picked .cx-srcval { color: rgba(255,255,255,.8); }
.cx-srcrow.picked .cx-grip { color: rgba(255,255,255,.6); }
/* Glissé en cours : l'élément s'efface pour qu'on suive le curseur. */
    .cx-srcrow.dragging { opacity: .3; }
.cx-grip { color: var(--cx-ink-4); font-size: .8rem; letter-spacing: -1px;
        cursor: grab; user-select: none; flex: 0 0 auto; }
.cx-srcrow:active .cx-grip { cursor: grabbing; }
.cx-srcval { font-family: var(--cx-mono); font-size: .7rem; color: var(--cx-ink-3);
        text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* Cible */
    .cx-grp { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
        color: var(--cx-ink-3); padding: 12px 14px 6px; background: var(--cx-surface);
        border-bottom: 1px solid var(--cx-line-2); }
.cx-tgt { padding: 11px 14px; border-bottom: 1px solid var(--cx-line-2);
        transition: background .14s ease, box-shadow .14s ease; }
.cx-tgt:last-child { border-bottom: 0; }
.cx-tgt.ok { border-left: 3px solid var(--cx-teal); }
.cx-tgt.warn { border-left: 3px solid var(--cx-amber); background: var(--cx-amber-w); }
.cx-tgt.droppable { cursor: pointer; }
.cx-tgt.droppable:hover { background: var(--cx-indigo-w);
        box-shadow: inset 0 0 0 1.5px var(--cx-indigo); }
/* Survol pendant le glissé : marqué plus franchement que le survol à la
       souris, parce qu'on relâche à l'aveugle. */
    .cx-tgt.over { background: var(--cx-indigo-w);
        box-shadow: inset 0 0 0 2px var(--cx-indigo); }
.cx-chip-mv { width: 14px; height: 15px; border-radius: 4px;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; color: var(--cx-ink-3); cursor: pointer; user-select: none; }
.cx-chip-mv:hover { background: #fff; color: var(--cx-indigo-d); }
.cx-inline-mv { font-family: var(--cx-mono); font-size: .78rem; font-weight: 700;
        color: var(--cx-indigo-d); background: var(--cx-indigo-w);
        padding: 1px 6px; border-radius: 5px; border: 1px solid #E1DCFB; }
.cx-tgt-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cx-tgt-n { font-size: .86rem; font-weight: 650; color: var(--cx-ink); }
.cx-tgt-d { font-size: .74rem; color: var(--cx-ink-3); margin-top: 2px; }
.cx-req { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: var(--cx-red); background: var(--cx-red-w);
        padding: 2px 6px; border-radius: 20px; margin-left: 7px; vertical-align: middle; }
.cx-badge { font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.cx-badge.ok { background: var(--cx-teal-w); color: var(--cx-teal); }
.cx-badge.one { background: var(--cx-indigo-w); color: var(--cx-indigo-d); }
/* « assemblable » dit d'avance qu'on peut en déposer plusieurs — sans quoi
       rien ne distingue une cible qui accumule d'une cible qui remplace. */
    .cx-badge.multi { background: var(--cx-line-2); color: var(--cx-ink-3); }
/* Bandeau unique du champ en attente */
    .cx-pending { display: flex; align-items: center; gap: 9px;
        padding: 9px 14px; background: var(--cx-indigo);
        border-bottom: 1px solid var(--cx-indigo-d); }
.cx-pending-t { font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.85); }
.cx-pending .cx-jp { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.cx-pending-x { margin-left: auto; border: 0; background: rgba(255,255,255,.15); color: #fff;
        font-family: inherit; font-size: .72rem; font-weight: 600;
        padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.cx-pending-x:hover { background: rgba(255,255,255,.28); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; }
.cx-chip { display: inline-flex; align-items: center; gap: 5px;
        font-family: var(--cx-mono); font-size: .7rem; font-weight: 500;
        background: var(--cx-indigo-w); color: var(--cx-indigo-d);
        border: 1px solid #E1DCFB; padding: 3px 4px 3px 8px; border-radius: 7px; }
.cx-chip-x { width: 15px; height: 15px; border-radius: 4px; background: #fff; border: 1px solid #E1DCFB;
        display: flex; align-items: center; justify-content: center;
        font-size: .7rem; color: var(--cx-ink-3); cursor: pointer; }
.cx-chip-x:hover { background: var(--cx-red-w); color: var(--cx-red); border-color: #F3C9CC; }
.cx-result { margin-top: 8px; padding: 7px 10px; border-radius: 8px;
        background: var(--cx-surface); border: 1px solid var(--cx-line); }
.cx-result-l { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--cx-ink-4); margin-bottom: 2px; }
.cx-result-v { font-family: var(--cx-mono); font-size: .72rem; color: var(--cx-ink); word-break: break-all; }
/* ── Encarts ─────────────────────────────────────────────────────── */
    .cx-note { padding: 13px 15px; border-radius: 11px;
        background: var(--cx-indigo-w); border: 1px solid #E5E0FF;
        font-size: .82rem; color: var(--cx-ink-2); line-height: 1.55; }
.cx-note.warn { background: var(--cx-amber-w); border-color: #F2E0BC; }

/* ── Tablette et téléphone ──────────────────────────────────────────────
   Les deux inventaires côte à côte (1fr 1.25fr) réclament ~700px. En dessous
   ils s'empilent : la source d'abord, puis les cibles.
   Le glisser-déposer HTML5 ne fonctionne pas au doigt — c'est le chemin
   clic-source puis clic-cible qui prend le relais, d'où la bannière « Placer …
   dans… » rendue plus visible ici, et des zones de dépôt à hauteur tactile. */
@media (max-width: 1023.98px) {
  .cx-mapgrid { grid-template-columns: 1fr; gap: 12px; }
  .cx-pane-b { max-height: 42dvh; }
  .cx-srcrow { padding-top: 11px; padding-bottom: 11px; min-height: var(--ids-touch-min, 44px); }
  .cx-tgt { padding-top: 13px; padding-bottom: 13px; }
  .cx-pending { position: sticky; top: 0; z-index: 3; }
  .cx-hd p { max-width: none; }
}

@media (max-width: 639.98px) {
  .cx-srcval { display: none; }   /* la valeur d'exemple passe après le nom du champ */
  .cx-pane-b { max-height: 38dvh; }
}

/* ✅ v19.203 — Filet pour les noms de colonne très longs.
   NB : ces règles ne corrigent PAS de débordement observé dans l'application —
   `.cx-srcrow` porte `width:100%` ET `padding:8px 14px`, ce qui ne déborde que
   sans `box-sizing: border-box`, or Bootstrap le pose globalement depuis
   _Host.cshtml. C'est une assurance si cet écran est un jour rendu hors de ce
   contexte, plus l'ellipse sur un en-tête de colonne à rallonge. */
.ids-import, .ids-import *, .ids-import *::before, .ids-import *::after { box-sizing: border-box; }
.cx-srcrow { min-width: 0; }
.cx-srcval { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.cx-jp { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================================
   ✅ v19.204 — ÉTATS DE SÉLECTION DES CIBLES

   Trois défauts rendaient l'action confuse :

   1. La teinte de survol (--cx-indigo-w, #F4F2FF) mesure 1,11:1 contre le
      blanc — autant dire invisible. Seul un liseré de 1,5px signalait la
      cible visée.
   2. Une cible REQUISE ET VIDE porte un fond ambre. Le survol écrasait ce fond
      par la teinte lavande : l'information « il manque ça » disparaissait
      précisément au moment d'agir dessus. Deux sens se disputaient une seule
      propriété.
   3. Aucun état « armé ». Une fois une colonne saisie au CLIC, rien n'indiquait
      où la déposer : `.over` n'est peuplé que par @ondragenter, donc jamais au
      clic ni au doigt — le chemin justement prévu pour le tactile.

   Correctif : trois états lisibles, et le signal porté par un ANNEAU plutôt que
   par un fond. L'anneau indigo #5B4BE0 mesure 5,95:1 contre le blanc et 5,5:1
   contre l'ambre — au-delà des 3:1 exigés par WCAG 1.4.11 pour la limite d'un
   composant. Le fond ne fait que renforcer, il ne porte jamais l'information
   seul : c'est ce qui permet de garder l'ambre lisible dessous.
   ============================================================================ */

.ids-import { --cx-armed: #EDE9FF; --cx-sel: #DCD7FF; }

.cx-tgt { position: relative; }

/* ── 1. ARMÉ — une colonne est saisie, toutes les cibles deviennent candidates.
      Pointillé : présent sans crier, il répond à « où puis-je déposer ? ». ── */
.cx-tgt.droppable {
    cursor: pointer;
    outline: 1.5px dashed var(--cx-indigo);
    outline-offset: -5px;
    background-color: var(--cx-armed, #EDE9FF);
}

/* ── 2. VISÉ — survol souris, survol pendant le glissé, ou focus clavier.
      Anneau plein, teinte plus soutenue, barre latérale indigo qui prend le pas
      sur le teal/ambre le TEMPS DE L'ACTION seulement, et léger relief. ── */
.cx-tgt.droppable:hover,
.cx-tgt.droppable.over,
.cx-tgt.droppable:focus-visible {
    outline: 2px solid var(--cx-indigo);
    outline-offset: -2px;
    background-color: var(--cx-sel, #DCD7FF);
    border-left: 3px solid var(--cx-indigo);
    box-shadow: 0 3px 12px rgba(91, 75, 224, .22);
}

/* Le libellé de la cible visée passe en indigo : la couleur suit le regard. */
.cx-tgt.droppable:hover .cx-tgt-n,
.cx-tgt.droppable.over .cx-tgt-n,
.cx-tgt.droppable:focus-visible .cx-tgt-n { color: var(--cx-indigo-d); }

/* Affordance explicite : on nomme l'action au lieu de la laisser deviner. */
.cx-tgt.droppable:hover::after,
.cx-tgt.droppable.over::after,
.cx-tgt.droppable:focus-visible::after {
    content: "Déposer ici";
    position: absolute;
    top: 8px; right: 12px;
    font-size: .62rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff; background: var(--cx-indigo);
    padding: 2px 8px; border-radius: 100px;
    pointer-events: none;
}

/* Focus clavier visible même sans souris (le composant rend les cibles
   atteignables au clavier depuis v19.204). */
.cx-tgt:focus-visible { outline: 2px solid var(--cx-indigo); outline-offset: -2px; }
.cx-tgt:focus:not(:focus-visible) { outline: none; }

/* La source saisie reste la référence visuelle : même indigo, en plein. */
.cx-srcrow.picked { box-shadow: 0 2px 10px rgba(91, 75, 224, .3); }


/* ✅ v19.204 — la pastille « Déposer ici » occupe le coin haut-droit, là où
   vit déjà le compteur « N champs assemblés » : les deux se chevauchaient.
   Le compteur est masqué le temps du survol (visibility, pas display, pour ne
   rien décaler) ; l'information reste lisible juste en dessous, dans les puces. */
.cx-tgt.droppable:hover .cx-badge,
.cx-tgt.droppable.over .cx-badge,
.cx-tgt.droppable:focus-visible .cx-badge { visibility: hidden; }


/* ============================================================================
   ✅ v19.206 — CHROME D'ASSISTANT PARTAGÉ (rail vertical d'étapes)

   Repris du connecteur API, où ce rail a été conçu (v19.172). L'assistant de
   fichier affichait, lui, une rangée de pastilles numérotées dans sa barre de
   titre : on y voyait OÙ l'on était, jamais ce que chaque étape contenait ni
   ce qu'on y avait déjà choisi.

   Le rail est vertical parce que chaque étape porte SA VALEUR RETENUE sous son
   nom : on relit toute la configuration sans retraverser les écrans. Sur une
   rangée horizontale, il n'y a pas la place pour cette seconde ligne — c'est
   la raison de la forme, pas une préférence graphique.

   Aucune logique d'import n'en dépend : c'est de l'habillage.
   ============================================================================ */
/* ── En-tête ─────────────────────────────────────────────────────── */
    .cx-title { display: flex; align-items: center; gap: 13px; }
.cx-title-ic { width: 38px; height: 38px; flex: 0 0 38px;
        border-radius: 11px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(145deg, var(--cx-indigo), #7A5CF0);
        color: #fff;
        box-shadow: 0 4px 12px -3px rgba(91, 75, 224, .5); }
.cx-title-t { font-size: 1.08rem; font-weight: 700; color: var(--cx-ink); line-height: 1.25; letter-spacing: -.01em; }
.cx-title-s { font-size: .77rem; color: var(--cx-ink-3); margin-top: 1px; }
/* ── Ruban de progression ────────────────────────────────────────── */
    /* Des jalons sur une ligne qui se remplit : on voit d'un coup d'œil où
       on en est ET combien il reste. Les segments rectangulaires d'avant ne
       disaient ni l'un ni l'autre. */
    /* ═══════════ RAIL VERTICAL DES ÉTAPES (v19.172) ═══════════
       Le ruban horizontal ne laissait de place qu'au numéro et au titre.
       Le rail, lui, tient sur la hauteur : chaque étape peut porter SA
       VALEUR RETENUE, ce qui évite de retraverser les écrans pour se
       rappeler ce qu'on a choisi. Le corps des cinq étapes est INCHANGÉ —
       seule l'enveloppe bouge. */

    .cx-root { display: grid;
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 0;
        min-height: 440px;
        padding: 0; }
.cx-rail { background: #12142A;
        border-radius: 14px;
        padding: 20px 14px;
        display: flex; flex-direction: column; gap: 2px;
        align-self: stretch; }
.cx-rail-h { padding: 0 8px 16px; }
.cx-rail-t { color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.cx-rail-s { color: #9AA0C0; font-size: .74rem; margin-top: 2px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-rs { display: flex; align-items: flex-start; gap: 11px;
        padding: 10px; border: 0; border-radius: 10px;
        background: none; cursor: pointer; text-align: left;
        font-family: inherit; width: 100%;
        transition: background .18s ease; }
.cx-rs:hover:not(.off):not(.on) { background: rgba(255,255,255,.06); }
.cx-rs.off { cursor: not-allowed; opacity: .42; }
.cx-rs-n { width: 24px; height: 24px; flex: none;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.10); color: #C8CCDF;
        font-size: .74rem; font-weight: 700;
        transition: all .2s ease; }
.cx-rs.done .cx-rs-n { background: var(--cx-teal); color: #fff; }
.cx-rs.on   .cx-rs-n { background: var(--cx-indigo); color: #fff;
                           box-shadow: 0 0 0 4px rgba(91,75,224,.28); }
.cx-rs-x { min-width: 0; }
.cx-rs-t { display: block; font-size: .84rem; font-weight: 500; color: #C8CCDF; }
.cx-rs.on   .cx-rs-t { color: #fff; font-weight: 600; }
.cx-rs.done .cx-rs-t { color: #E8EAF5; }
.cx-rs-d { display: block; font-size: .71rem; color: #9AA0C0; margin-top: 1px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-rs.on { background: rgba(91,75,224,.20); }
/* Zone de travail : garde toute la largeur utile. */
    .cx-work { padding: 4px 0 4px 26px; min-width: 0; }
/* NB : les six règles qui suivaient ici (grid 1fr, rail en rangée, sous-titres
   masqués…) provenaient du bloc @media 900px de la feuille d'origine. Mon
   extracteur, une simple expression régulière sur `sélecteur { … }`, ignore
   l'imbrication : il les avait sorties de leur media query et posées au niveau
   racine, où elles s'appliquaient à TOUTES les largeurs — le rail restait donc
   horizontal même sur grand écran. Elles sont rétablies dans la media query en
   fin de fichier. Idem pour le `transition:none`, qui appartenait au bloc
   prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .cx-rs, .cx-rs-n { transition: none; }
}

/* Le rail passe en rangée défilante quand la largeur manque : deux colonnes
   demandent ~800px, et sous ce seuil le contenu de l'étape compte plus que la
   relecture de la configuration. */
@media (max-width: 900px) {
  .cx-root { grid-template-columns: 1fr; }
  .cx-rail { flex-direction: row; overflow-x: auto; border-radius: 12px; padding: 12px; }
  .cx-rail-h { display: none; }
  .cx-rs { flex: none; }
  .cx-rs-d { display: none; }
  .cx-work { padding: 20px 0 4px; }
}