/* Wharfly — couche semantique au-dessus du systeme Industry.
 *
 * Cette feuille est LA feuille de style de production des deux portails
 * (dossier §1.3). Elle ne redefinit rien d'Industry sans motif ecrit.
 *
 * 🔴 Le theme sombre redefinit TOUTES les variables, y compris les derivees :
 * un `color-mix()` declare sur `:root` ne se recalcule PAS quand ses operandes
 * changent sous un selecteur plus specifique. Une derivee oubliee ne produit
 * aucune erreur — elle produit du gris fonce sur fond noir, parfaitement
 * affiche et illisible.
 */

/* ════════════════════════════════════════════════════════════════════════
   1 · Jetons
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --wf-ok: oklch(0.50 0.09 152);
  --wf-ok-bg: oklch(0.94 0.035 152);
  --wf-fail: oklch(0.50 0.14 27);
  --wf-fail-bg: oklch(0.94 0.035 27);
  --wf-warn: oklch(0.50 0.11 72);
  --wf-warn-bg: oklch(0.95 0.045 80);
  --wf-ack: var(--color-accent-700);
  --wf-ack-bg: var(--color-accent-100);
  --wf-money: var(--color-text);
  --wf-quota: var(--color-accent-700);

  /* ECART 1 — 72 %, et non les 58 % du dossier §2. A 58 % : 3,97 papier /
     3,86 surface / 4,02 acier-100, sous le 4,5:1 declare non negociable au
     §1.5. 72 % est la valeur d'`internal/site` : les deux paquets servent
     ainsi LE MEME gris. Motif complet dans `internal/web/jetons.go`. */
  --wf-muted: color-mix(in srgb, var(--color-text) 72%, transparent);
  --wf-rule: color-mix(in srgb, var(--color-text) 8%, transparent);

  /* ECART 3 — la bordure des CONTROLES. `--color-divider` (encre 16 %) rend
     1,38:1 : a ce niveau la limite visuelle d'un champ de saisie n'existe
     pas, alors que WCAG 1.4.11 exige 3,0 pour la frontiere d'un composant.
     55 % rend 3,64 papier / 3,54 surface. `--color-divider` reste employe
     pour les filets DECORATIFS, ou aucune information n'en depend. */
  --wf-bordure: color-mix(in srgb, var(--color-text) 55%, transparent);
  --wf-admin-bg: var(--color-accent-900);
  --wf-admin-fg: #f2f2f3;

  --wf-row: 32px;
  --wf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --color-bg: #161819;
  --color-surface: #0f1112;
  --color-text: #e3e5e7;
  --color-divider: rgba(255, 255, 255, .16);
  --color-accent: #8fb0d3;
  --color-accent-100: #1c2833;
  --color-accent-200: #22323f;
  --color-accent-600: #a3c0dc;
  --color-accent-700: #b7cfe6;
  --color-accent-800: #d3e3f2;
  --color-accent-900: #0b1219;
  --color-neutral-100: #22252a;
  --color-neutral-200: #2a2e33;
  --color-neutral-300: #3a3f45;
  --color-neutral-800: #d0d2d5;

  --wf-ok: oklch(0.78 0.10 152);
  --wf-ok-bg: oklch(0.27 0.035 152);
  --wf-fail: oklch(0.76 0.13 27);
  --wf-fail-bg: oklch(0.27 0.045 27);
  --wf-warn: oklch(0.80 0.11 80);
  --wf-warn-bg: oklch(0.28 0.045 80);

  --wf-muted: rgba(227, 229, 231, .62);
  --wf-rule: rgba(255, 255, 255, .08);
  /* ECART 3, theme sombre : `rgba(255,255,255,.16)` rend 1,53:1. */
  --wf-bordure: color-mix(in srgb, var(--color-text) 55%, transparent);
  --wf-ack: #b7cfe6;
  --wf-ack-bg: #1c2833;
  --wf-money: #e3e5e7;
  --wf-quota: #b7cfe6;
  --wf-admin-bg: #0b1219;
  --wf-admin-fg: #e3e5e7;
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ════════════════════════════════════════════════════════════════════════
   2 · Corrections d'Industry, chacune avec son motif
   ═════════════════════════════════════════════════════════════════════ */

/* `.table th` d'Industry emploie un gris a 60 % qui rend 4,25:1. Un seul gris
   derive, une seule mesure. */
.table th { color: var(--wf-muted); }

/* ECART 2 — `.btn-primary` d'Industry peint le fond en `--color-accent`, qui
   rend 3,70:1 avec le libelle papier. 3,70 tiendrait pour un element NON
   textuel (WCAG 1.4.11) ; un bouton porte un LIBELLE, donc 1.4.3 et 4,5:1.
   `--color-accent-700` rend 5,78:1. Le `:hover` d'Industry va vers
   `--color-accent-600`, c'est-a-dire vers MOINS de contraste : il descend ici
   vers `--color-accent-800`. L'acier `--color-accent` reste employe la ou 3,0
   est le seuil applicable : anneau de focus et pastilles d'etat. */
.btn-primary { background: var(--color-accent-700); color: var(--color-bg); border-color: var(--color-accent-700); }
.btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }

/* ECART 3 — la bordure des CONTROLES, jamais celle des filets. Industry borde
   `.btn`, `.input`, `.seg` et `.radio` en `--color-divider` (1,38:1). */
.btn,
.input,
.seg,
.radio,
select.input,
textarea.input { border-color: var(--wf-bordure); }
.seg-opt + .seg-opt { border-left-color: var(--wf-bordure); }

/* `.btn:disabled{opacity:.45}` rend 2,75:1 en theme clair. Ce produit
   desactive des actions en permanence — releve perime, quota bloque,
   operation d'API absente — et le LIBELLE du bouton est ce qui dit pourquoi.
   L'opacite est remplacee par une couleur explicite et une bordure tiretee :
   l'etat reste visible, le motif reste lisible. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--wf-muted);
  background: transparent;
  border-style: dashed;
  /* Tiretee, mais VISIBLE : c'est un bouton, la bordure est sa frontiere. */
  border-color: var(--wf-bordure);
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   3 · Typographie — echelle du §2
   ═════════════════════════════════════════════════════════════════════ */

body { font-size: 14px; }
.wf-title { font-size: 25px; }
.wf-section { font-size: 17px; }
.wf-meta { font-size: 12px; color: var(--wf-muted); }
.wf-fresh { font-size: 11.5px; color: var(--wf-muted); }
.wf-mono { font-family: var(--wf-mono); font-size: 12px; }
.wf-num { font-variant-numeric: tabular-nums; }

/* Contenu republie dans la cellule principale a 390px — masque au-dessus,
   ou la colonne dediee le porte deja. Voir la requete de media du §8. */
.wf-sur-telephone { display: none; font-size: 11.5px; color: var(--wf-muted); }

/* Seul endroit ou les capitales espacees sont permises (§12). */
.table th,
.wf-colhead {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   4 · Tableau dense — ligne 32 px, une ligne = un <tr> focusable
   ═════════════════════════════════════════════════════════════════════ */

.table { font-size: 13px; }
.table td { font-variant-numeric: tabular-nums; }
.table tbody tr { height: var(--wf-row); }
.table tbody tr:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.wf-num-col { text-align: right; }
.wf-nowrap { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   5 · Pastille d'etat — la pastille porte l'ETAT, l'etiquette le MOTIF
   ═════════════════════════════════════════════════════════════════════ */

.wf-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--wf-muted);
  vertical-align: middle;
}
.wf-dot-en_cours { background: var(--color-accent); border-color: var(--color-accent); animation: wf-pulse 1.6s ease-in-out infinite; }
.wf-dot-bloque   { background: var(--wf-fail); border-color: var(--wf-fail); }
.wf-dot-escalade { background: var(--wf-warn); border-color: var(--wf-warn); }
.wf-dot-finie    { background: var(--wf-ok); border-color: var(--wf-ok); }
.wf-dot-abandonnee { opacity: .7; }

@keyframes wf-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .wf-dot-en_cours { animation: none } }

/* Etiquettes de motif — memes familles de couleur que l'etat. */
.wf-tag-ok   { background: var(--wf-ok-bg); color: var(--wf-ok); }
.wf-tag-fail { background: var(--wf-fail-bg); color: var(--wf-fail); }
.wf-tag-warn { background: var(--wf-warn-bg); color: var(--wf-warn); }
.wf-tag-ack  { background: var(--wf-ack-bg); color: var(--wf-ack); border: 1px dashed var(--wf-ack); }

/* Etiquette PLEINE : reservee aux verdicts qui ARRETENT. */
.wf-tag-arret { background: var(--wf-fail); color: #f2f2f3; font-weight: 600; }
[data-theme="dark"] .wf-tag-arret { color: #161819; }

/* ════════════════════════════════════════════════════════════════════════
   6 · Les trois registres — jamais confondus
   ═════════════════════════════════════════════════════════════════════ */

.wf-refus {
  background: var(--wf-fail-bg);
  border: 1px solid var(--wf-fail);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.wf-acquit {
  background: var(--wf-ack-bg);
  border: 1px solid var(--wf-ack);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.wf-degrade {
  background: var(--wf-warn-bg);
  border-left: 3px solid var(--wf-warn);
  color: var(--wf-warn);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: 13px;
}
.wf-degrade b { color: var(--wf-warn); }

/* Bandeau de defaut de paiement — pleine largeur, sur TOUS les ecrans. */
.wf-defaut {
  background: var(--wf-fail);
  color: #f2f2f3;
  padding: var(--space-2) var(--space-4);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
}
[data-theme="dark"] .wf-defaut { color: #161819; }
.wf-defaut a { color: inherit; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   7 · Fraicheur — la fraicheur est une DONNEE
   ═════════════════════════════════════════════════════════════════════ */

.wf-perime .wf-valeur { color: var(--wf-muted); }
.wf-perime .wf-fresh { color: var(--wf-warn); }
.wf-horloge { font-size: 11px; }

/* ════════════════════════════════════════════════════════════════════════
   8 · Argent et quota — DEUX BLOCS, jamais la meme colonne
   ═════════════════════════════════════════════════════════════════════ */

.wf-unites {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
/* §5.2 : « deux blocs DISTINCTS ». La separation visuelle de l'argent et du
   quota est la regle elle-meme, pas une decoration : la bordure porte donc de
   l'information et prend `--wf-bordure` (3,64:1). A 1,38:1 les deux blocs se
   lisaient comme un seul. */
.wf-bloc-argent, .wf-bloc-quota {
  border: 1px solid var(--wf-bordure);
  padding: var(--space-3);
}
.wf-argent { color: var(--wf-money); font-variant-numeric: tabular-nums; }
.wf-quota { color: var(--wf-quota); font-variant-numeric: tabular-nums; }

/* La jauge de quota est un indicateur GRAPHIQUE de valeur : sa limite tombe
   sous WCAG 1.4.11 (3,0). Sur 6px de haut, une bordure a 1,38:1 rend la
   jauge vide indiscernable du fond. */
.wf-jauge {
  height: 6px;
  background: var(--color-accent-100);
  border: 1px solid var(--wf-bordure);
  margin: 4px 0;
}
.wf-jauge > span { display: block; height: 100%; background: var(--wf-quota); }

/* Largeurs de jauge par PAS DE 5 %. La politique `style-src 'self'` interdit
   l'attribut `style` en ligne ; la barre est donc quantifiée, tandis que le
   NOMBRE affiché à côté reste exact. */
.wf-j-0 { width: 0%; }
.wf-j-5 { width: 5%; }
.wf-j-10 { width: 10%; }
.wf-j-15 { width: 15%; }
.wf-j-20 { width: 20%; }
.wf-j-25 { width: 25%; }
.wf-j-30 { width: 30%; }
.wf-j-35 { width: 35%; }
.wf-j-40 { width: 40%; }
.wf-j-45 { width: 45%; }
.wf-j-50 { width: 50%; }
.wf-j-55 { width: 55%; }
.wf-j-60 { width: 60%; }
.wf-j-65 { width: 65%; }
.wf-j-70 { width: 70%; }
.wf-j-75 { width: 75%; }
.wf-j-80 { width: 80%; }
.wf-j-85 { width: 85%; }
.wf-j-90 { width: 90%; }
.wf-j-95 { width: 95%; }
.wf-j-100 { width: 100%; }
.wf-jauge-warn { border-color: var(--wf-warn); }
.wf-jauge-warn > span { background: var(--wf-warn); }
.wf-jauge-bloq { border-color: var(--wf-fail); background: var(--wf-fail-bg); }
.wf-jauge-bloq > span { background: var(--wf-fail); }

/* ════════════════════════════════════════════════════════════════════════
   9 · Bloc de preuves — repere d'angle Industry
   ═════════════════════════════════════════════════════════════════════ */

.wf-preuves { padding: var(--space-3); margin: var(--space-4) 0; }
.wf-preuves dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: 0; font-size: 13px; }
.wf-preuves dt { color: var(--wf-muted); }
.wf-preuves dd { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   10 · Navigation — la distinction des deux realms est VISUELLE ET IMMEDIATE
   ═════════════════════════════════════════════════════════════════════ */

.wf-app { display: grid; grid-template-columns: 168px 1fr; min-height: 100vh; }
.wf-side {
  border-right: 1px solid var(--color-divider);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}
.wf-marque {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .03em;
  padding: 0 16px 10px;
}
.wf-side a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  min-height: 32px;
  color: var(--wf-muted);
  text-decoration: none;
}
.wf-side a[aria-current="page"] { background: var(--color-accent-100); color: var(--color-text); }
.wf-side a:hover { color: var(--color-text); }
.wf-side-pied { margin-top: auto; padding: 10px 16px 0; font-size: 11px; color: var(--wf-muted); }

.wf-main { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Superadmin : PAS de barre laterale. Une barre haute inversee, qui LE RESTE
   sur telephone — c'est ce qui empeche de confondre les deux portails d'un
   coup d'oeil, et depuis celui-ci on peut couper la production d'un client. */
.wf-admin-bar {
  background: var(--wf-admin-bg);
  color: var(--wf-admin-fg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  min-height: 44px;
}
.wf-admin-bar a { color: inherit; text-decoration: none; font-size: 13.5px; padding: 10px 0; display: inline-block; }
.wf-admin-bar a[aria-current="page"] { border-bottom: 2px solid var(--wf-admin-fg); }
.wf-admin-bar nav { display: flex; flex-wrap: wrap; gap: 16px; }
/* Etiquette inversee du realm (§4.8). Le mot « SUPERADMIN » est ECRIT en
   capitales dans `admin/nav.html` : ni `text-transform` ni `letter-spacing`
   ici, parce que §12 reserve les capitales ESPACEES aux en-tetes de colonne
   — et parce qu'un marqueur de realm ne doit pas dependre de la feuille. */
.wf-admin-etiq {
  background: var(--wf-admin-fg);
  color: var(--wf-admin-bg);
  font-weight: 600;
  padding: 3px 10px;
  font-size: 11px;
}
.wf-admin-pied { margin-left: auto; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   11 · Kanban — l'UNIQUE exception a « un tableau est un tableau »
   ═════════════════════════════════════════════════════════════════════ */

.wf-kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
/* L'appartenance d'une carte a sa colonne n'est portee QUE par l'enveloppe :
   c'est une information, pas un ornement. */
.wf-col { border: 1px solid var(--wf-bordure); min-width: 0; }
/* 🔴 Le gabarit `taches.html` emet `<h2>` sous `<main><h1>Tâches</h1>` :
   l'ordre des titres est h1 → h2, et c'est le gabarit qui a raison. La regle
   visait `h3` et ne s'appliquait donc a RIEN — l'en-tete de colonne perdait
   en silence les 11px capitales espacees du §2, seul endroit du produit ou
   elles sont permises. `TestSelecteurQualifieViseUnTagPresent` mesure la
   classe entiere de ce defaut. */
.wf-col > h2 {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--wf-bordure);
  display: flex;
  justify-content: space-between;
}
.wf-col-refuse { background: var(--wf-rule); }
.wf-groupe { font-size: 11px; color: var(--wf-muted); padding: 6px 8px 2px; }
.wf-carte {
  border-top: 1px solid var(--wf-rule);
  padding: 6px 8px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-carte-ligne { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; }
.wf-carte-etape { color: var(--wf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wf-carte-chiffres { white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.wf-drop-actif { outline: 2px dashed var(--color-accent); outline-offset: -2px; }

/* ════════════════════════════════════════════════════════════════════════
   12 · Divers
   ═════════════════════════════════════════════════════════════════════ */

.wf-emplacement {
  border: 1px dashed var(--wf-muted);
  color: var(--wf-muted);
  padding: 1px 6px;
  font-size: 12px;
  font-family: var(--wf-mono);
}
.wf-manquant { border-color: var(--wf-warn); color: var(--wf-warn); }

.wf-actions { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.wf-actions .btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
.wf-saut {
  position: absolute;
  left: -9999px;
}
.wf-saut:focus {
  position: static;
  display: inline-block;
  padding: var(--space-2);
  background: var(--color-accent-100);
}
.wf-entete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.wf-entete h1 { font-size: 25px; margin: 0; }
.wf-defilant { overflow-x: auto; }

/* ════════════════════════════════════════════════════════════════════════
   13 · Telephone — 390 px. Les tableaux RESTENT des tableaux.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .wf-app { grid-template-columns: 1fr; }
  .wf-side {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
    overflow-x: auto;
  }
  .wf-marque { padding: 0; }
  .wf-side a { padding: 6px 8px; min-height: 44px; }
  .wf-side-pied { margin-top: 0; padding: 0 0 0 8px; }
  .wf-main { padding: 12px 14px 16px; }

  /* 3-4 colonnes essentielles : pastille · tache + motif · age · cout.
     La colonne est MASQUEE, pas repliee en carte. */
  .wf-col-secondaire { display: none; }
  /* 🔑 Le pendant OBLIGATOIRE de la ligne ci-dessus. Masquer une colonne
     PERD son information ; le §8 demande de garder 3-4 colonnes, pas de
     perdre le reste. Ce qui compte est donc REPUBLIE dans la cellule
     principale, en 11,5px, uniquement sur telephone. Sans ce pendant,
     « responsive » voudrait dire « moins de donnees ». */
  .wf-sur-telephone { display: block; }
  .table td, .table th { padding: var(--space-1) var(--space-2); }
  .table td.wf-cell-principale { white-space: normal; }

  .wf-unites { grid-template-columns: 1fr; }
  .wf-kanban { grid-template-columns: 1fr; }
  .wf-actions .btn { min-height: 44px; padding: 0 12px; }

  /* Feuille basse : la ligne selectionnee ouvre ses actions en bas. */
  .wf-feuille {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    /* La feuille basse FLOTTE au-dessus du tableau : son bord est ce qui dit
       ou finit la page et ou commencent ses actions. */
    border-top: 1px solid var(--wf-bordure);
    box-shadow: var(--shadow-md);
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .wf-feuille .btn { min-height: 44px; }
}

/* Cibles tactiles : jamais sous 44 px sur un pointeur grossier. */
@media (pointer: coarse) {
  .btn, .wf-side a, .wf-admin-bar a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Code-barres d'enrolement du second facteur
   --------------------------------------------------------------------------
   🔴 Le SVG est INCLUS dans la page — aucune requete sortante, aucune origine
   tierce a autoriser, donc la politique de securite du contenu reste intacte.

   ⚠️ AUCUN `style=` en ligne n'est employe pour le dessiner : `style-src 'self'`
   est pose SANS `unsafe-inline`, et un attribut `style` y serait bloque. Le code
   s'afficherait alors ENTIEREMENT BLANC — ce qui se lit comme une page qui
   charge encore, pas comme un defaut. Les couleurs passent par des attributs de
   PRESENTATION SVG (`fill`), qui ne sont pas couverts par `style-src`.

   La taille est fixee ICI, en pixels, et non en pourcentage : un code-barres
   redimensionne par son conteneur peut tomber sous la resolution ou un lecteur
   distingue deux modules voisins, et il a exactement la meme apparence. */
.wf-codebarre {
  width: 240px;
  height: 240px;
  display: block;
  /* Le fond clair est DANS le SVG : sur un theme sombre, un code-barres qui
     hériterait du fond de la page serait INVERSE, donc refusé par la plupart
     des lecteurs — et il aurait l'air correct. */
  border: 1px solid var(--wf-bordure);
}

/* Le bloc qui porte le code-barres et sa saisie manuelle, cote a cote : les
   DEUX chemins d'enrolement existent, et fermer l'un ferme la moitie du parc. */
.wf-enrolement {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}