/* L'atelier de workflows (BO-6, BO-7 — OASIS-13). Feuille à part, chargée après app.css.

   UNIQUEMENT LES JETONS D'app.css, plus une couleur par FAMILLE de blocs (panier, commande…),
   définie pour les deux thèmes. Toutes les classes sont préfixées « wf- » : le reste du back-office
   a déjà ses .carte, .avis, .pastille, et l'atelier ne doit pas les déformer.

   Le mouvement sert à comprendre : une carte ajoutée grandit, les cartes s'écartent pour ouvrir la
   place d'un dépôt, un réordonnancement glisse (FLIP), un essai s'allume étape par étape. Tout
   s'arrête sous prefers-reduced-motion (fin de fichier). */

:root {
  --f-panier: #2563eb; --f-panier-doux: #e8efff;
  --f-commande: #7c3aed; --f-commande-doux: #f1eaff;
  --f-client: #0d9488; --f-client-doux: #e0f5f2;
  --f-catalogue: #4f46e5; --f-catalogue-doux: #eef0ff;
  --f-stock: #c2410c; --f-stock-doux: #fdeee5;
  --f-paiement: #0f8a4a; --f-paiement-doux: #e5f6ec;
  --f-message: #db2777; --f-message-doux: #fce8f2;
  --f-fidelite: #ca8a04; --f-fidelite-doux: #fbf3dc;
  --f-controle: #d1293d; --f-controle-doux: #fdebed;
  --f-systeme: #64748b; --f-systeme-doux: #eef1f5;
  --wf-point: rgba(79, 70, 229, .13);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f-panier: #7aa2ff; --f-panier-doux: #17213d;
    --f-commande: #b794ff; --f-commande-doux: #241a3d;
    --f-client: #4fd1c5; --f-client-doux: #0f2a28;
    --f-catalogue: #a5a6fb; --f-catalogue-doux: #1f2147;
    --f-stock: #fb923c; --f-stock-doux: #2e1d12;
    --f-paiement: #4ade80; --f-paiement-doux: #122a1c;
    --f-message: #f472b6; --f-message-doux: #331627;
    --f-fidelite: #facc15; --f-fidelite-doux: #2c2510;
    --f-controle: #fb7185; --f-controle-doux: #331920;
    --f-systeme: #a3afc2; --f-systeme-doux: #1f2430;
    --wf-point: rgba(139, 140, 249, .12);
  }
}
:root[data-theme="dark"] {
  --f-panier: #7aa2ff; --f-panier-doux: #17213d;
  --f-commande: #b794ff; --f-commande-doux: #241a3d;
  --f-client: #4fd1c5; --f-client-doux: #0f2a28;
  --f-catalogue: #a5a6fb; --f-catalogue-doux: #1f2147;
  --f-stock: #fb923c; --f-stock-doux: #2e1d12;
  --f-paiement: #4ade80; --f-paiement-doux: #122a1c;
  --f-message: #f472b6; --f-message-doux: #331627;
  --f-fidelite: #facc15; --f-fidelite-doux: #2c2510;
  --f-controle: #fb7185; --f-controle-doux: #331920;
  --f-systeme: #a3afc2; --f-systeme-doux: #1f2430;
  --wf-point: rgba(139, 140, 249, .12);
}

.mono { font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------------------- pastilles */

.wf-pastille .icone { margin-left: -2px; }
.pastille.wf-pastille.cree { background: var(--f-fidelite-doux); color: var(--f-fidelite); }
.pastille.accent.wf-pastille::before { display: none; }

/* ----------------------------------------------------------------- liste */

.wf-liste-interieur { display: flex; flex-direction: column; gap: 24px; }
.wf-entete-liste { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.wf-entete-liste > div:first-child { flex: 1; min-width: 260px; }
.wf-entete-liste h1 { font-size: 26px; }
.wf-entete-liste .sous-titre { max-width: 66ch; margin: 4px 0 0; text-wrap: pretty; }
.wf-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-chiffre {
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--rayon-grand);
  padding: 14px 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--ombre); min-width: 0;
}
.wf-chiffre b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: block; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-chiffre span { color: var(--texte-doux); font-size: 12.5px; }
.wf-chiffre > div { min-width: 0; }
.wf-pastille-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--neutre-doux); color: var(--texte-doux); }
.wf-chiffre.accent .wf-pastille-ic { background: var(--accent-doux); color: var(--accent-texte); }
.wf-chiffre.succes .wf-pastille-ic { background: var(--succes-doux); color: var(--succes); }
.wf-chiffre.alerte .wf-pastille-ic { background: var(--alerte-doux); color: var(--alerte); }
.wf-chiffre.erreur .wf-pastille-ic { background: var(--erreur-doux); color: var(--erreur); }
.wf-chiffre.erreur b { color: var(--erreur); }

.wf-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wf-recherche { position: relative; flex: 1 1 260px; max-width: 380px; }
.wf-recherche .icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texte-doux); pointer-events: none; }
.wf-recherche input { padding-left: 34px; }
.wf-puces { display: flex; gap: 6px; flex-wrap: wrap; }
.wf-puce { border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.wf-puce.actif { background: var(--accent-doux); border-color: transparent; color: var(--accent-texte); }
.wf-compte { font-size: 11px; font-weight: 600; background: var(--neutre-doux); color: var(--texte-doux); border-radius: 99px; padding: 0 7px; margin-left: 2px; }
.wf-puce.actif .wf-compte { background: var(--fond-carte); color: var(--accent-texte); }

.wf-domaines { display: flex; flex-direction: column; gap: 26px; }
.wf-domaine h2 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-weight: 650;
}
.wf-ic-dom { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.wf-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wf-carte-wf {
  display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; color: var(--texte); text-decoration: none;
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--rayon-grand); box-shadow: var(--ombre);
  transition: border-color .2s, box-shadow .25s var(--sortie), transform .25s var(--sortie);
  animation: monte .34s var(--sortie) both; animation-delay: calc(var(--i, 0) * 18ms);
}
.wf-carte-wf:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--bord)); box-shadow: var(--ombre-haute); transform: translateY(-2px); }
.wf-carte-wf:active { transform: translateY(0) scale(.99); }
.wf-carte-wf .haut { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.wf-carte-wf b { font-size: 14.5px; letter-spacing: -.005em; line-height: 1.3; }
.wf-carte-wf p { margin: 0; color: var(--texte-doux); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-carte-wf .bas { display: flex; gap: 10px; align-items: center; color: var(--texte-doux); font-size: 12px; margin-top: auto; min-width: 0; }
.wf-carte-wf .bas .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wf-mini-flux { display: flex; gap: 3px; margin-left: auto; flex: none; }
.wf-mini-flux i { width: 7px; height: 7px; border-radius: 2px; display: block; opacity: .75; }
.wf-dialogue { display: flex; flex-direction: column; gap: 4px; }
.wf-dialogue .rangee-boutons { margin-top: 8px; }

/* ------------------------------------------------------- plein écran */

body.wf-plein-ecran main#vue { padding: 0; max-width: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden; }
body.wf-plein-ecran main#vue.entree > * { animation: apparait .25s ease both; }
.wf-chargement { padding: 26px 32px; }

.wf-atelier { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ------------------------------------------------------------------ barre */

.wf-barre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 5;
  padding: 9px 16px; border-bottom: 1px solid var(--bord);
  background: var(--fond-verre); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.wf-barre .titre { display: flex; flex-direction: column; min-width: 0; max-width: 340px; margin-right: 4px; }
.wf-barre .titre b { font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-barre .titre .mono { font-size: 11px; color: var(--accent-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-fil { display: flex; gap: 5px; font-size: 11.5px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; }
.wf-fil a { color: var(--texte-doux); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.wf-fil a:hover { color: var(--accent); }
.wf-fil .sep { opacity: .5; }
.wf-barre > .sep { width: 1px; height: 24px; background: var(--bord); margin: 0 2px; }
.wf-barre .pousse { flex: 1; }
.wf-barre button.actif { background: var(--accent-doux); border-color: transparent; color: var(--accent-texte); }
.wf-barre .bouton.icone-seule { padding: 7px; border-radius: var(--rayon); color: var(--texte-doux); }
.wf-barre .bouton.icone-seule:hover { background: var(--fond-creux); color: var(--texte); }

.wf-verif {
  font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 99px;
  background: var(--succes-doux); color: var(--succes); font-weight: 600; border: 0; box-shadow: none; white-space: nowrap;
  animation: apparait .25s ease;
}
.wf-verif.encours { background: var(--neutre-doux); color: var(--texte-doux); }
.wf-verif.ko { background: var(--erreur-doux); color: var(--erreur); }
.wf-verif.ko:hover:not(:disabled) { background: var(--erreur-doux); filter: brightness(.97); }
.wf-verif.alerte { background: var(--alerte-doux); color: var(--alerte); }
.wf-verif .rond, .wf-etat-publication .rond { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wf-verif.encours .rond, .wf-etat-publication .rond { animation: wf-pulse 1s infinite; }
@keyframes wf-pulse { 50% { opacity: .25; } }
.wf-etat-publication { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: var(--accent-doux); color: var(--accent-texte); border: 0; }
.wf-brouillon { font-size: 12px; color: var(--texte-doux); white-space: nowrap; }

.wf-bascule {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none;
  padding: 5px 7px; border-radius: 8px; font-weight: 550; margin: 0;
}
.wf-bascule:hover { background: var(--fond-creux); }
.wf-bascule .rail { width: 32px; height: 18px; border-radius: 99px; background: var(--bord-fort); position: relative; transition: background .2s; flex: none; }
.wf-bascule .rail::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fond-carte); box-shadow: var(--ombre); transition: transform .25s var(--ressort);
}
.wf-bascule.on .rail { background: var(--accent); }
.wf-bascule.on .rail::after { transform: translateX(14px); }

.wf-bandeau { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 7px 16px; border-bottom: 1px solid var(--bord); }
.wf-bandeau .icone { margin-top: 2px; }
.wf-bandeau.info { background: var(--accent-doux); color: var(--accent-texte); }
.wf-bandeau.alerte { background: var(--alerte-doux); color: var(--alerte); }
.wf-bandeau.erreur { background: var(--erreur-doux); color: var(--erreur); }

/* ------------------------------------------------------------ trois zones */

.wf-corps { flex: 1; display: grid; grid-template-columns: 264px minmax(0, 1fr) 360px; min-height: 0; }

.wf-tuile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.wf-tuile.degrade { background: var(--degrade); color: #fff; }
.wf-tuile.petite { width: 30px; height: 30px; }

/* Bibliothèque */
.wf-biblio { border-right: 1px solid var(--bord); background: var(--fond-carte); display: flex; flex-direction: column; min-height: 0; }
.wf-biblio-tete { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.wf-biblio-tete h3 { margin: 0; font-size: 13px; color: var(--texte); font-weight: 650; }
.wf-biblio-tete p { margin: 0; font-size: 12px; color: var(--texte-doux); }
.wf-blocs { overflow-y: auto; padding: 0 10px 24px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.wf-famille { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); font-weight: 650; padding: 12px 6px 4px; }
.wf-bloc {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 7px 8px; border-radius: 10px;
  border: 1px solid transparent; background: none; box-shadow: none; width: 100%; text-align: left; white-space: normal;
  cursor: grab; user-select: none; touch-action: none; font-weight: 400;
}
.wf-bloc:hover:not(:disabled) { background: var(--fond-creux); border-color: var(--bord); }
.wf-bloc:hover .wf-tuile { transform: scale(1.06) rotate(-4deg); }
.wf-bloc .wf-tuile { width: 30px; height: 30px; transition: transform .25s var(--ressort); }
.wf-bloc:active:not(:disabled) { cursor: grabbing; }
.wf-bloc-texte { min-width: 0; }
.wf-bloc b { font-size: 13px; font-weight: 600; display: block; line-height: 1.25; color: var(--texte); }
.wf-bloc small { font-size: 11.5px; color: var(--texte-doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.wf-bloc .tech { font-family: var(--mono); font-size: 10.5px; color: var(--accent-texte); overflow-wrap: anywhere; }

/* Canevas */
.wf-canevas {
  position: relative; overflow: auto; min-height: 0; overscroll-behavior: contain;
  background-color: var(--fond);
  background-image: radial-gradient(var(--wf-point) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}
.wf-outils-canevas { position: sticky; top: 12px; z-index: 3; display: flex; justify-content: flex-end; padding: 0 14px; height: 0; }
.wf-outils-canevas .groupe {
  display: flex; gap: 2px; height: fit-content; padding: 3px; border-radius: 10px; box-shadow: var(--ombre);
  background: var(--fond-verre); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--bord);
}
.wf-outils-canevas button { padding: 5px 8px; font-size: 12px; }
.wf-flux { position: relative; width: min(400px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 140px; transform-origin: top center; transition: transform .25s var(--sortie); }
.wf-maillon, .wf-fin, .wf-garanties { position: relative; transition: transform .28s var(--sortie), opacity .2s; }
.wf-maillon.deplace { opacity: .3; }

.wf-lien { height: 30px; position: relative; display: flex; justify-content: center; }
.wf-lien::before { content: ""; width: 2px; height: 100%; background: var(--bord-fort); border-radius: 2px; transition: background .3s; }
.wf-lien::after {
  content: ""; position: absolute; bottom: 1px; left: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--bord-fort); border-bottom: 2px solid var(--bord-fort); transform: translateX(-50%) rotate(45deg); transition: border-color .3s;
}
.wf-lien .plus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.6); width: 22px; height: 22px; padding: 0;
  border-radius: 50%; opacity: 0; background: var(--fond-carte); color: var(--accent); border-color: var(--bord-fort); z-index: 1;
  transition: opacity .15s, transform .2s var(--ressort);
}
.wf-lien:hover .plus, .wf-lien .plus:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wf-lien .plus:active:not(:disabled) { transform: translate(-50%, -50%) scale(.92); }
.wf-lien.essai::before { background: var(--succes); }
.wf-lien.essai::after { border-color: var(--succes); }

.wf-carte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 12px 12px 14px; cursor: pointer; background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon-grand); box-shadow: var(--ombre);
  transition: box-shadow .2s, border-color .2s, transform .2s var(--ressort), opacity .2s;
}
.wf-carte:hover { box-shadow: var(--ombre-haute); border-color: var(--bord-fort); }
.wf-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-carte.choisie { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux), var(--ombre-haute); }
.wf-carte.en-erreur { border-color: var(--erreur); }
.wf-carte.en-erreur.choisie { box-shadow: 0 0 0 3px var(--erreur-doux), var(--ombre-haute); }
.wf-carte.ajoutee { border-left: 3px solid var(--succes); }
.wf-carte.modifiee { border-left: 3px solid var(--alerte); }
.wf-carte .contenu { min-width: 0; }
.wf-carte .nom { font-weight: 650; font-size: 14px; line-height: 1.3; letter-spacing: -.005em; }
.wf-carte .resume { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wf-carte .tech { font-family: var(--mono); font-size: 11px; color: var(--accent-texte); margin-top: 3px; overflow-wrap: anywhere; }
.wf-carte.apparait { animation: wf-apparait .45s var(--ressort); }
@keyframes wf-apparait { from { transform: scale(.85); opacity: 0; } }
.wf-carte.sautee-essai { opacity: .5; }
.wf-carte.fantome-retiree { opacity: .6; border-style: dashed; background: transparent; box-shadow: none; cursor: default; }
.wf-carte.fantome-retiree .nom { text-decoration: line-through; }
.wf-carte.fantome-retiree button { align-self: center; font-size: 12px; padding: 4px 8px; }
.wf-carte.bout { cursor: default; grid-template-columns: auto minmax(0, 1fr); }
.wf-carte.bout:hover { box-shadow: var(--ombre); border-color: var(--bord); }
.wf-carte .eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-texte); }

.wf-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wf-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; max-width: 100%;
  background: var(--fond-creux); color: var(--texte-doux); border: 1px solid var(--bord); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-badge .req { color: var(--erreur); }
.wf-badge > span:not(.req) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wf-badge.cond { color: var(--accent-texte); background: var(--accent-doux); border-color: transparent; }
.wf-badge.err { color: var(--alerte); background: var(--alerte-doux); border-color: transparent; }
.wf-badge.fond { color: var(--f-client); background: var(--f-client-doux); border-color: transparent; }
.wf-badge.sous { color: var(--f-commande); background: var(--f-commande-doux); border-color: transparent; }
.wf-badge-x { border: 0; background: none; box-shadow: none; padding: 0 0 0 3px; font-size: 13px; line-height: 1; color: inherit; }
.wf-poignee {
  color: var(--texte-doux); opacity: .35; cursor: grab; padding: 3px; border-radius: 6px; align-self: center; touch-action: none;
  transition: opacity .15s, background .15s;
}
.wf-carte:hover .wf-poignee, .wf-carte.choisie .wf-poignee { opacity: .9; }
.wf-poignee:hover { background: var(--fond-creux); }
.wf-etiquette-ecart {
  position: absolute; top: -9px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 8px; border-radius: 99px; text-transform: uppercase; color: var(--fond-carte); animation: apparait .25s ease;
}
.wf-etiquette-ecart.ajoutee { background: var(--succes); }
.wf-etiquette-ecart.modifiee { background: var(--alerte); }
.wf-etiquette-ecart.retiree { background: var(--erreur); }
.wf-message-erreur {
  margin-top: 8px; font-size: 12px; color: var(--erreur); background: var(--erreur-doux); border-radius: 7px;
  padding: 5px 8px; display: flex; gap: 6px; align-items: flex-start; animation: monte .25s var(--sortie);
}
.wf-message-erreur .icone { margin-top: 1px; }

.wf-statut-essai {
  position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--fond); animation: wf-apparait .3s var(--ressort); z-index: 1;
}
.wf-statut-essai.ok { background: var(--succes); color: var(--fond-carte); }
.wf-statut-essai.sautee, .wf-statut-essai.attente { background: var(--neutre-doux); color: var(--texte-doux); }
.wf-statut-essai.echec { background: var(--erreur); color: var(--fond-carte); }
.wf-statut-essai.encours { background: var(--accent); color: #fff; }
.wf-statut-essai.encours::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: .5; animation: wf-onde 1s infinite; }
@keyframes wf-onde { to { transform: scale(1.6); opacity: 0; } }
.wf-duree { position: absolute; right: -58px; top: 50%; transform: translateY(-50%); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--texte-doux); }

.wf-vide-depot {
  margin: 0 auto; border: 2px dashed var(--bord-fort); border-radius: var(--rayon-grand); padding: 34px 20px;
  text-align: center; color: var(--texte-doux); transition: border-color .2s, background .2s, color .2s;
}
.wf-canevas.survol .wf-vide-depot { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-texte); }

.wf-garanties { margin-top: 26px; border: 1px dashed var(--bord-fort); border-radius: var(--rayon-grand); padding: 12px 14px; background: var(--fond-verre); }
.wf-garanties h4 { margin: 0 0 6px; font-size: 12px; display: flex; gap: 6px; align-items: center; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .07em; }
.wf-garantie { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 5px 0; }
.wf-garantie .icone { margin-top: 2px; color: var(--texte-doux); }
.wf-garantie.cassee, .wf-garantie.cassee .icone { color: var(--erreur); }

/* Glisser-déposer */
.wf-ligne-depot { position: absolute; left: -10px; right: -10px; height: 60px; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .15s, top .18s var(--sortie); }
.wf-ligne-depot.visible { opacity: 1; }
.wf-ligne-depot .creux {
  width: 100%; height: 48px; border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-doux);
  display: grid; place-items: center; color: var(--accent-texte); font-size: 12.5px; font-weight: 600; animation: wf-respire 1.2s ease-in-out infinite;
}
@keyframes wf-respire { 50% { background: transparent; } }
.wf-fantome {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 290px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: center; font-weight: 600; transform-origin: 20px 20px;
  background: var(--fond-carte); border: 1px solid var(--accent); border-radius: var(--rayon-grand); box-shadow: var(--ombre-fenetre);
}
.wf-fantome .wf-tuile { width: 30px; height: 30px; }
body.wf-glisse, body.wf-glisse * { cursor: grabbing !important; user-select: none; }

/* --------------------------------------------------------------- inspecteur */

.wf-inspecteur { border-left: 1px solid var(--bord); background: var(--fond-carte); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.wf-insp-tete {
  padding: 14px 16px 12px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 2; background: var(--fond-verre); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wf-insp-tete .titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-insp-tete small { color: var(--texte-doux); font-size: 12px; display: block; }
.wf-insp-tete .wf-tech { color: var(--accent-texte); overflow-wrap: anywhere; }
input.wf-nom-etape { font-weight: 650; font-size: 15px; border-color: transparent; padding: 3px 6px; margin-left: -6px; background: transparent; }
input.wf-nom-etape:hover:not(:focus) { border-color: var(--bord); }
.wf-titre-wf { font-size: 15px; line-height: 1.3; }
textarea.wf-description { font-family: inherit; font-size: 12.5px; min-height: 0; padding: 4px 6px; margin-left: -6px; border-color: transparent; background: transparent; color: var(--texte-doux); resize: none; }
textarea.wf-description:hover:not(:focus) { border-color: var(--bord); }

.wf-section { padding: 14px 16px; border-bottom: 1px solid var(--bord); display: flex; flex-direction: column; gap: 10px; }
.wf-section h5 { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); display: flex; align-items: center; gap: 6px; font-weight: 650; }
.wf-h5 { margin: 10px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); }
.wf-aide { font-size: 12px; color: var(--texte-doux); margin: 0; }
.wf-texte { margin: 0; font-size: 13px; }
.wf-champ { display: flex; flex-direction: column; gap: 5px; position: relative; }
.wf-champ > label { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.wf-champ .req, .wf-champ > label .req { color: var(--erreur); }
.wf-champ > label .type { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--texte-doux); font-weight: 400; }
.wf-champ .desc { font-size: 11.5px; color: var(--texte-doux); }
.wf-champ.ko input, .wf-champ.ko .wf-valeur-donnee, .wf-champ.ko textarea { border-color: var(--erreur); background: color-mix(in srgb, var(--erreur-doux) 60%, var(--fond-carte)); }
.wf-champ .msg-ko { font-size: 11.5px; color: var(--erreur); font-weight: 500; animation: monte .25s var(--sortie); }
.wf-saisie { display: flex; gap: 6px; align-items: stretch; }
.wf-saisie > :first-child { flex: 1; min-width: 0; }
.wf-valeur-donnee { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: 4px 6px; min-height: 37px; background: var(--fond-creux); }
.wf-puce-donnee {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 4px 2px 7px; border-radius: 6px;
  background: var(--accent-doux); color: var(--accent-texte); font-size: 12.5px; font-weight: 600; border: 0; box-shadow: none; white-space: normal; text-align: left; justify-content: flex-start;
}
button.wf-puce-donnee { padding-right: 8px; align-self: flex-start; }
button.wf-puce-donnee:hover:not(:disabled) { background: var(--accent-doux); filter: brightness(.96); }
.wf-puce-donnee.calcul { background: var(--alerte-doux); color: var(--alerte); padding-right: 8px; }
.wf-puce-donnee span { overflow: hidden; text-overflow: ellipsis; }
.wf-puce-donnee button { padding: 1px; border: 0; background: transparent; box-shadow: none; color: inherit; opacity: .7; }
.wf-puce-donnee button:hover:not(:disabled) { opacity: 1; background: transparent; }
.wf-btn-donnee { padding: 6px 9px; font-size: 12px; color: var(--accent-texte); flex: none; }
.wf-segment { display: inline-flex; background: var(--fond-creux); border: 1px solid var(--bord); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; align-self: flex-start; }
.wf-segment button { border: 0; background: transparent; box-shadow: none; padding: 5px 10px; font-size: 12.5px; border-radius: 7px; font-weight: 500; color: var(--texte-doux); }
.wf-segment button:hover:not(:disabled) { background: var(--fond-carte); color: var(--texte); }
.wf-segment button.on { background: var(--fond-carte); box-shadow: var(--ombre); color: var(--accent-texte); font-weight: 650; }
.wf-regle { display: grid; gap: 7px; padding: 10px 34px 10px 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond-creux); position: relative; animation: monte .25s var(--sortie); }
.wf-regle.incomplete { border-style: dashed; }
.wf-regle .wf-suppr { position: absolute; top: 6px; right: 6px; padding: 4px; }
.wf-ligne { display: flex; gap: 6px; }
.wf-ligne > * { min-width: 0; }
.wf-joint { align-self: center; }
.wf-joint .wf-segment button { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 10px; }
.wf-phrase { font-size: 13px; background: var(--accent-doux); color: var(--accent-texte); padding: 8px 10px; border-radius: 9px; }
pre.wf-code {
  margin: 0; background: var(--fond-creux); border: 1px solid var(--bord); border-radius: 9px; padding: 10px;
  overflow: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; max-height: 340px; white-space: pre;
}
.wf-avis { border-radius: 10px; padding: 9px 12px; font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; background: var(--accent-doux); color: var(--accent-texte); animation: monte .25s var(--sortie); }
.wf-avis .icone { margin-top: 1px; }
.wf-avis.alerte { background: var(--alerte-doux); color: var(--alerte); }
.wf-avis.erreur { background: var(--erreur-doux); color: var(--erreur); }
.wf-avis.succes { background: var(--succes-doux); color: var(--succes); }
.wf-avis.discret { background: var(--fond-creux); color: var(--texte-doux); }
.wf-case { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.wf-compose { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wf-compose-ligne { display: flex; gap: 6px; align-items: center; }
.wf-compose-ligne input { min-width: 0; }
.wf-compose-cle { max-width: 38%; font-family: var(--mono); font-size: 12px; }
.wf-compose-rang { font-size: 11px; color: var(--texte-doux); width: 16px; text-align: right; flex: none; }
.wf-ajout { align-self: flex-start; font-size: 12.5px; }
.wf-pied-insp { display: flex; gap: 8px; padding: 14px 16px 26px; flex-wrap: wrap; }
.wf-ecarts { list-style: none; margin: 0; padding: 0; }
.wf-ecarts li { font-size: 13px; display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.wf-signe { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; margin-top: 1px; }
.wf-signe.plus { background: var(--succes-doux); color: var(--succes); }
.wf-signe.moins { background: var(--erreur-doux); color: var(--erreur); }
.wf-signe.tilde { background: var(--alerte-doux); color: var(--alerte); }

/* Sélecteur de données */
.wf-selecteur {
  position: fixed; z-index: 70; max-height: 390px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre-fenetre);
  animation: grandit .18s var(--sortie);
}
.wf-sel-haut { padding: 10px; border-bottom: 1px solid var(--bord); }
.wf-sel-items { overflow-y: auto; padding: 6px; }
.wf-sel-groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); padding: 8px 8px 4px; font-weight: 650; display: flex; gap: 6px; align-items: center; }
.wf-sel-item {
  width: 100%; border: 0; background: none; box-shadow: none; display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 7px; text-align: left; font-weight: 500; white-space: normal;
}
.wf-sel-item.sous { padding-left: 20px; font-size: 12.5px; color: var(--texte-doux); }
.wf-sel-item:hover:not(:disabled), .wf-sel-item:focus { background: var(--accent-doux); color: var(--accent-texte); outline: none; }
.wf-sel-item .ex { font-size: 11.5px; color: var(--texte-doux); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.wf-sel-note { font-size: 11px; color: var(--texte-doux); padding: 8px 10px; border-top: 1px solid var(--bord); }

/* Historique */
.wf-version { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); animation: monte .3s var(--sortie) both; }
.wf-version:last-child { border-bottom: 0; }
.wf-version .num { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-doux); color: var(--accent-texte); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; }
.wf-version.std .num { background: var(--neutre-doux); color: var(--texte-doux); }
.wf-version b { font-size: 13.5px; display: block; }
.wf-version small { display: block; color: var(--texte-doux); font-size: 12px; margin-bottom: 4px; }
.wf-version .rangee { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wf-version .rangee button { padding: 4px 10px; font-size: 12px; }
.wf-etapes-version { margin: 0; padding-left: 20px; font-size: 13px; columns: 2; column-gap: 24px; }
.wf-etapes-version li { padding: 2px 0; break-inside: avoid; }

/* Tiroir d'essai */
.wf-tiroir {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; max-height: 64%; overflow-y: auto;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--fond-verre); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--bord); box-shadow: 0 -18px 40px -20px rgba(16, 24, 40, .3);
  animation: wf-monte .3s var(--sortie); display: flex; flex-direction: column; gap: 12px;
}
@keyframes wf-monte { from { transform: translateY(100%); } }
.wf-tiroir .tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-tiroir h3 { margin: 0; font-size: 15px; color: var(--texte); }
.wf-tiroir .pousse { flex: 1; }
.wf-grille-essai { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.wf-essais { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.wf-essai-carte { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond-carte); }

/* Publication */
.wf-publication textarea.wf-message { font-family: inherit; font-size: 13.5px; min-height: 0; }
.wf-zone-suivi:empty { display: none; }
.wf-zone-suivi { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.wf-pied-modale { justify-content: flex-end; margin-top: 10px; }
.wf-frise { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.wf-frise li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.wf-frise li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--bord); transition: background .4s; }
.wf-frise li:last-child::before { display: none; }
.wf-frise li.fait::before { background: var(--succes); }
.wf-frise .pt { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--neutre-doux); color: var(--texte-doux); transition: background .3s, color .3s, box-shadow .3s; }
.wf-frise li.fait .pt { background: var(--succes); color: var(--fond-carte); animation: wf-apparait .35s var(--ressort); }
.wf-frise li.encours .pt { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-doux); animation: wf-pulse 1.4s infinite; }
.wf-frise li.bloque .pt { background: var(--erreur); color: var(--fond-carte); }
.wf-frise li.bloque b, .wf-frise li.bloque small { color: var(--erreur); }
.wf-frise b { display: block; font-size: 13.5px; }
.wf-frise small { color: var(--texte-doux); font-size: 12px; }

/* --------------------------------------------------------------- largeurs */

/* Le menu du back-office se replie en icônes quand l'atelier manque de place. */
@media (max-width: 1440px) and (min-width: 861px) {
  body.wf-plein-ecran nav#menu { width: 64px; flex-basis: 64px; padding-left: 8px; padding-right: 8px; }
  body.wf-plein-ecran nav#menu a { justify-content: center; padding: 9px 0; }
  /* Les rubriques restent atteignables : leur icône seule, et les entrées sans retrait. */
  body.wf-plein-ecran nav#menu a > span, body.wf-plein-ecran nav#menu summary > span,
  body.wf-plein-ecran nav#menu details.rubrique > summary::after { display: none; }
  body.wf-plein-ecran nav#menu details.rubrique > summary { justify-content: center; padding: 9px 0; }
  body.wf-plein-ecran nav#menu .champ-menu, body.wf-plein-ecran nav#menu .menu-aucun { display: none; }
  body.wf-plein-ecran nav#menu details.rubrique > .entrees {
    margin: 0 0 4px; padding: 2px 0; border-left: 0; border-radius: var(--rayon); background: var(--fond-creux);
  }
  body.wf-plein-ecran nav#menu details.rubrique > .entrees a { padding: 9px 0; }
  body.wf-plein-ecran nav#menu a.actif::before,
  body.wf-plein-ecran nav#menu details.rubrique > .entrees a.actif::before { left: -8px; }
}
@media (max-width: 1280px) {
  .wf-corps { grid-template-columns: 228px minmax(0, 1fr) 320px; }
  .wf-brouillon { display: none; }
  .wf-barre .lib { display: none; }
  .wf-duree { display: none; }
}
@media (max-width: 1060px) {
  .wf-corps { grid-template-columns: 200px minmax(0, 1fr) 300px; }
  .wf-barre .titre { max-width: 200px; }
  .wf-bloc small { display: none; }
}
@media (max-width: 860px) {
  body.wf-plein-ecran main#vue { height: auto; overflow: visible; }
  .wf-chiffres { grid-template-columns: 1fr; }
  .wf-corps { grid-template-columns: minmax(0, 1fr); }
  .wf-corps > * { min-width: 0; }
  .wf-biblio { border-right: 0; border-bottom: 1px solid var(--bord); }
  .wf-blocs { flex-direction: row; overflow-x: auto; padding-bottom: 12px; }
  .wf-famille { display: none; }
  .wf-bloc { width: 220px; flex: none; border-color: var(--bord); touch-action: auto; }
  .wf-canevas { overflow: visible; min-height: 420px; }
  .wf-inspecteur { border-left: 0; border-top: 1px solid var(--bord); overflow: visible; }
  .wf-barre > .sep { display: none; }
  .wf-tiroir { position: fixed; }
  .wf-etapes-version { columns: 1; }
}
@media (pointer: coarse) {
  .wf-lien .plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .wf-poignee { opacity: .7; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-flux, .wf-maillon, .wf-fin, .wf-garanties { transition: none !important; }
  .wf-ligne-depot .creux, .wf-statut-essai.encours::after, .wf-frise li.encours .pt { animation: none !important; }
}

/* Texte à pastilles (contre-audit, constat 3) : morceaux de texte éditables, données non éditables. */
.wf-texte-puces {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 37px; padding: 4px 6px; cursor: text;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon); background: var(--fond-carte); min-width: 0;
}
.wf-texte-puces:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 22%, transparent); }
.wf-texte-puces input.wf-texte-morceau {
  width: auto; min-width: 2ch; max-width: 100%; flex: 0 1 auto; border: 0; padding: 3px 2px; background: transparent; box-shadow: none; font-size: 13px;
}
.wf-texte-puces input.wf-texte-morceau:last-child { flex: 1 1 4ch; }
.wf-texte-puces input.wf-texte-morceau:focus { box-shadow: none; }
.wf-champ.ko .wf-texte-puces { border-color: var(--erreur); }
.wf-compose-ligne .wf-texte-puces { flex: 1; }
.wf-type-valeur { flex: none; font-family: var(--mono); font-size: 11px; padding: 4px 8px; color: var(--texte-doux); }
.wf-conversion { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--fond-carte); color: var(--texte-doux); }
.wf-champ .msg-alerte { font-size: 11.5px; color: var(--alerte); font-weight: 500; }
.wf-bouton-retester { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: var(--erreur-doux); color: var(--erreur); border: 0; box-shadow: none; }
.wf-bouton-retester:hover:not(:disabled) { background: var(--erreur-doux); filter: brightness(.96); }

/* LA BARRE DE L'ATELIER NE PASSE JAMAIS À LA LIGNE (au-dessus du mobile). Ce qui compte le moins
   cède d'abord : le texte « Brouillon enregistré », puis le titre, puis les libellés (≤ 1280 px :
   icônes seules, avec infobulle). Les boutons d'action, eux, ne rétrécissent pas. */
@media (min-width: 861px) {
  .wf-barre { flex-wrap: nowrap; }
  .wf-barre > * { flex-shrink: 0; }
  .wf-barre .titre { flex: 0 1 auto; min-width: 90px; }
  .wf-barre .wf-brouillon { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .wf-barre .pousse { flex: 1 1 0; min-width: 0; }
  .wf-barre .wf-bouton-retester { padding: 6px 11px; border-radius: var(--rayon); font-weight: 600; }
}
@media (max-width: 1500px) and (min-width: 861px) {
  .wf-barre .wf-bascule .lib { display: none; }
}

/* UN PUBLIER DÉSACTIVÉ SE VOIT DÉSACTIVÉ : gris plat, sans dégradé, sans halo ni reflet animé
   (le reflet d'app.css veut dire « en train de travailler », pas « impossible »). */
.wf-atelier button.primaire:disabled, .wf-publication button.primaire:disabled {
  background: var(--neutre-doux); background-image: none; color: var(--texte-doux);
  border-color: var(--bord); box-shadow: none; filter: none; animation: none; opacity: 1;
}