/* =============================================================================
   Archive TargetProcess — feuille de style

   Registre : surfaces blanches en cartes posees sur un fond gris tres pale,
   coins arrondis, ombres a deux couches, gelules pour tout ce qui est
   cliquable, accent sarcelle assume. La profondeur vient de l'ombre, pas du
   filet -- une version precedente n'utilisait que des hairlines : propre, mais
   plate.

   Trois regles tenues partout :
   1. Une carte = un bloc de sens. Pas de cadre pour decorer.
   2. Densite hybride : le panneau de lecture respire et borne sa largeur de
      ligne, la laterale et les tableaux restent compacts.
   3. La couleur est un signal. L'accent marque ce qui est actif ou cliquable,
      les etats ont leurs teintes, le reste est gris.
   ========================================================================== */

:root {
  /* --- surfaces */
  --page:      #f4f6f7;   /* fond du panneau : les cartes s'y detachent */
  --card:      #ffffff;
  --soft:      #f7f9f9;   /* survol discret, en-tete de tableau */
  --mute:      #eef1f2;   /* pastilles neutres */

  /* --- texte, trois niveaux */
  --txt:       #14181c;
  --txt-2:     #4a5560;
  --txt-3:     #8794a1;

  /* --- filets : rares, deux epaisseurs */
  --line:      #e5eaeb;
  --line-soft: #eef2f2;

  /* --- accent sarcelle */
  --acc:       #0f766e;
  --acc-deep:  #0b5c56;
  --acc-pale:  #e4f2f0;
  --acc-tint:  #f2f9f8;

  /* --- etats : les seules autres couleurs franches */
  --ok:   #15803d;
  --run:  #2563eb;
  --wait: #b45309;
  --stop: #b91c1c;
  --idle: #9aa5b1;
  --plan: #7c3aed;

  /* --- rythme : multiples de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- formes */
  --r1: 8px;      /* champs, petits blocs */
  --r2: 12px;     /* cartes */
  --r3: 999px;    /* gelules */

  /* --- elevation : deux couches, teinte froide, jamais du noir pur */
  --sh1: 0 1px 2px rgba(16, 28, 36, .05), 0 1px 3px rgba(16, 28, 36, .06);
  --sh2: 0 1px 2px rgba(16, 28, 36, .05), 0 4px 12px rgba(16, 28, 36, .08);
  --sh3: 0 8px 28px rgba(16, 28, 36, .14), 0 2px 6px rgba(16, 28, 36, .07);

  --ease: 150ms cubic-bezier(.4, 0, .2, 1);
  --measure: 74ch;

  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut HTML `hidden` ne pose display:none que via la feuille du
   navigateur, qui a la priorite la plus faible : n'importe quelle regle
   d'auteur (`display: flex` sur une barre, un overlay...) l'annule
   silencieusement. Sans cette ligne, un element cache par `el.hidden = true`
   reste visible et continue de capturer les clics. */
[hidden] { display: none !important; }

body {
  font: 15px/1.6 var(--sans);
  background: var(--page);
  color: var(--txt);
  height: 100vh;
  /* Colonne flex et non grille : la barre de filtres se masque selon l'ecran,
     et un enfant en display:none cesse d'etre un element de grille. Le
     contenu se retrouvait alors dans une rangee `auto` au lieu du `1fr`. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

header, .advpanel { flex: none; }
/* min-height:0 est indispensable : sans lui, un enfant flex refuse de
   descendre sous la hauteur de son contenu et le defilement interne casse. */
main { flex: 1; min-height: 0; }

::selection { background: var(--acc-pale); }

/* Les liens de navigation interne sont generes sans attribut `href` (le
   routeur intercepte le clic), et un <a> sans href ne recoit PAS
   `cursor: pointer` de la feuille du navigateur : l'element se comporte comme
   un lien mais le pointeur ne change pas. On le declare donc explicitement --
   dans cette application, tout <a> est cliquable. */
a { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* ================================================================== en-tete */

/* Bandeau accent : il ancre l'application et lui donne une identite. Attention,
   ce n'est pas qu'un fond -- chaque element de l'en-tete doit etre retraite,
   sinon le bouton d'etendue actif (aplat de la meme couleur) et l'onglet actif
   (sarcelle pale) deviennent invisibles. */
header {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  /* Une nuance plus profonde que l'accent : sur #0f766e le blanc pur ne donne
     que 5,47:1 et tout texte translucide passait sous le seuil AA. Ici le
     blanc atteint 7,84:1, et toute opacite >= 0,68 reste conforme. */
  background: var(--acc-deep);
  box-shadow: 0 1px 3px rgba(16, 28, 36, .14);
  position: relative;
  z-index: 10;
  color: #fff;
}
header :focus-visible { outline-color: #fff; }

.brand {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  transition: opacity var(--ease);
}
.brand:hover { opacity: .78; }
.brand span {
  color: rgba(255, 255, 255, .74);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
}

/* Le champ a deux etats de contraste : translucide sur l'accent au repos,
   blanc opaque au focus -- et le texte doit alors repasser en sombre, sinon on
   tape en blanc sur blanc. */
.searchbox {
  flex: 1;
  max-width: 580px;
  display: flex;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r3);
  padding: 3px;
  transition: background-color var(--ease), box-shadow var(--ease);
}
.searchbox:hover { background: rgba(255, 255, 255, .24); }
.searchbox:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

#search {
  flex: 1;
  min-width: 0;
  padding: 6px var(--s4);
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
}
#search::placeholder { color: rgba(255, 255, 255, .74); }
#search:focus { outline: none; }
.searchbox:focus-within #search { color: var(--txt); }
.searchbox:focus-within #search::placeholder { color: var(--txt-3); }

.scope, .advbtn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .84);
  font: inherit;
  font-size: 12px;
  padding: 0 var(--s3);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r3);
  transition: background-color var(--ease), color var(--ease);
}
.scope { min-width: 86px; }
.advbtn { min-width: 32px; font-size: 13px; }
.scope:hover, .advbtn:hover { color: #fff; background: rgba(255, 255, 255, .2); }
/* actif : on inverse, blanc plein sur l'accent */
.scope.on { color: var(--acc-deep); background: #fff; font-weight: 600; }
.advbtn.on { color: var(--acc-deep); background: #fff; }
.searchbox:focus-within .scope,
.searchbox:focus-within .advbtn { color: var(--txt-3); }
.searchbox:focus-within .scope:hover,
.searchbox:focus-within .advbtn:hover { color: var(--txt); background: var(--mute); }
.searchbox:focus-within .scope.on { color: #fff; background: var(--acc); }
.searchbox:focus-within .advbtn.on { color: var(--acc-deep); background: var(--acc-pale); }

.nav { display: flex; gap: var(--s1); }
.nav a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  padding: 6px var(--s3);
  border-radius: var(--r3);
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav a.on { background: #fff; color: var(--acc-deep); font-weight: 600; }

.hstats {
  margin-left: auto;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .76);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Session : n'apparait que derriere le portier d'authentification. */
.session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  margin-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px;
  white-space: nowrap;
}
.session .who {
  color: rgba(255, 255, 255, .76);
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session .signout {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease;
}
.session .signout:hover { background: rgba(255, 255, 255, .26); }

/* ======================================================= barre de filtres */

.advpanel {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--card);
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.advpanel label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--txt-3);
  font-size: 12px;
}
.advpanel input, .advpanel select {
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: var(--r1);
  color: var(--txt);
  padding: 5px var(--s2);
  font: inherit;
  font-size: 13px;
  max-width: 220px;
  transition: background-color var(--ease), border-color var(--ease);
}
.advpanel input:hover, .advpanel select:hover { background: var(--mute); }
.advpanel input:focus, .advpanel select:focus {
  outline: none;
  background: var(--card);
  border-color: var(--acc);
}
.advpanel .chkinline { cursor: pointer; }
.advpanel .chkinline input { accent-color: var(--acc); }

.advhelp { margin-left: auto; color: var(--txt-3); font-size: 12px; }
.advhelp b { color: var(--acc); font-weight: 600; }
.advhelp code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--mute);
  border-radius: var(--r1);
  padding: 2px 6px;
  color: var(--txt-2);
}

.mini {
  padding: 4px var(--s3);
  font: inherit;
  font-size: 12px;
  background: var(--soft);
  border: none;
  border-radius: var(--r3);
  color: var(--txt-2);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.mini:hover { color: var(--txt); background: var(--mute); }

/* =============================================================== mise en page */

main { display: grid; grid-template-columns: 306px 1fr; overflow: hidden; }

aside {
  background: var(--card);
  overflow-y: auto;
  padding: var(--s3) var(--s3) var(--s6);
  font-size: 13px;
  box-shadow: 1px 0 0 var(--line-soft);
}

#panel { overflow-y: auto; padding: var(--s5) var(--s6) var(--s7); background: var(--page); }

/* La carte : une carte = un bloc de sens */
.card {
  background: var(--card);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  padding: var(--s4) var(--s5);
  margin-top: var(--s4);
  overflow: hidden;
}
.card.flush { padding: var(--s2) 0; }

/* ===================================================== laterale : projets */

.side-title {
  font-size: 11px;
  font-weight: 650;
  color: var(--txt-3);
  letter-spacing: .02em;
  padding: var(--s4) var(--s2) var(--s1);
}

#projfilter, .sidesel {
  width: 100%;
  padding: 6px var(--s3);
  margin-bottom: var(--s1);
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: var(--r1);
  color: var(--txt);
  font: inherit;
  font-size: 12.5px;
  transition: background-color var(--ease), border-color var(--ease);
}
.sidesel { color: var(--txt-2); }
#projfilter:hover, .sidesel:hover { background: var(--mute); }
#projfilter:focus, .sidesel:focus {
  outline: none; background: var(--card); border-color: var(--acc);
}

.chk {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  color: var(--txt-3);
  padding: var(--s2);
  cursor: pointer;
}
.chk input { accent-color: var(--acc); }

.proj {
  padding: 6px var(--s3);
  border-radius: var(--r1);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  transition: background-color var(--ease);
}
.proj:hover { background: var(--soft); }
.proj.on { background: var(--acc-pale); }
.proj.on .proj-name { color: var(--acc-deep); font-weight: 550; }
.proj-name { flex: 1; line-height: 1.4; }
.proj-n { font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.proj.inactive .proj-name { color: var(--txt-2); }

.backproj {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--txt-3);
  font: inherit;
  font-size: 12px;
  padding: var(--s2);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.backproj:hover { color: var(--acc); background: var(--soft); }

.ctxname {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: var(--s1) var(--s2) var(--s2);
  line-height: 1.3;
  cursor: pointer;
  transition: color var(--ease);
}
.ctxname:hover { color: var(--acc); }

.ctxlinks { font-size: 12px; padding: 0 var(--s2) var(--s3); color: var(--txt-3); }
.ctxlinks a { color: var(--acc); cursor: pointer; }
.ctxlinks a:hover { text-decoration: underline; }

.filters {
  margin: 0 0 var(--s2);
  background: var(--soft);
  border-radius: var(--r1);
  padding: var(--s1) var(--s2) var(--s2);
}
.filters > summary {
  font-size: 11px;
  font-weight: 650;
  color: var(--txt-3);
  padding: var(--s2) 0;
  cursor: pointer;
  list-style: none;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::before {
  content: "\203A";
  display: inline-block;
  width: 12px;
  transition: transform var(--ease);
}
.filters[open] > summary::before { transform: rotate(90deg); }
.filters label { display: block; font-size: 11px; color: var(--txt-3); padding: var(--s2) 0 0; }
.filters select {
  width: 100%;
  margin-top: 3px;
  padding: 5px var(--s2);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--r1);
  color: var(--txt);
  font: inherit;
  font-size: 12.5px;
}
.filters select:focus { outline: none; border-color: var(--acc); }
#filtercount { color: var(--acc); font-variant-numeric: tabular-nums; }

#recent { margin-top: var(--s4); }
.recent-item {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  padding: 5px var(--s2);
  border-radius: var(--r1);
  cursor: pointer;
  color: var(--txt-2);
  font-size: 12.5px;
  transition: background-color var(--ease), color var(--ease);
}
.recent-item:hover { background: var(--soft); color: var(--txt); }
.recent-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================================================= arbre */

.tgroup { margin-bottom: 2px; }
.tgroup-h {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s2);
  border-radius: var(--r1);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  color: var(--txt-3);
  letter-spacing: .02em;
  transition: background-color var(--ease), color var(--ease);
}
.tgroup-h:hover { background: var(--soft); color: var(--txt-2); }
.tgroup-h .tw { width: 12px; font-size: 9px; flex: none; transition: transform var(--ease); }
.tgroup-h .n {
  font-weight: 500;
  color: var(--txt-3);
  background: var(--mute);
  border-radius: var(--r3);
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.tgroup-body { padding-left: var(--s1); }

.more {
  font-size: 12px;
  color: var(--acc);
  cursor: pointer;
  padding: var(--s2) var(--s2) var(--s2) var(--s5);
  font-weight: 500;
}
.more:hover { text-decoration: underline; }

.node { user-select: none; }
.node-row {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 5px var(--s2);
  border-radius: var(--r1);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  transition: background-color var(--ease);
}
.node-row:hover { background: var(--soft); }
.node-row.current { background: var(--acc-pale); }
.node-row.current .node-name { color: var(--acc-deep); font-weight: 550; }
.twist { width: 12px; color: var(--txt-3); font-size: 9px; flex: none; text-align: center; }
.node-name { flex: 1; }
.node-kids { margin-left: var(--s3); border-left: 1px solid var(--line-soft); padding-left: var(--s2); }
.kids-n { font-size: 11px; color: var(--txt-3); flex: none; font-variant-numeric: tabular-nums; }

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* ---- badges de type : gelules pales, la couleur reste un repere secondaire */
.badge {
  font-size: 10px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: var(--r3);
  flex: none;
  letter-spacing: .02em;
  white-space: nowrap;
}
.b-Project        { background: #eef1f2; color: #55636e; }
.b-PortfolioEpic  { background: #f1ecfd; color: #6d28d9; }
.b-Epic           { background: #f4effe; color: #7c3aed; }
.b-Feature        { background: #e8f1fd; color: #1d4ed8; }
.b-UserStory      { background: #e5f6ec; color: #15803d; }
.b-Task           { background: #fdf3e0; color: #a16207; }
.b-Bug            { background: #fdeaea; color: #b91c1c; }
.b-Request        { background: #edf1f4; color: #475569; }
.b-TestCase, .b-TestPlan, .b-TestStep, .b-TestPlanRun { background: #e2f3f4; color: #0e7490; }
.b-AcceptanceCriterion { background: #e2f4f0; color: #0f766e; }
.b-DefinitionOfDone    { background: #e7f1f6; color: #2b6a8f; }
.b-Risk, .b-RiskAction { background: #fdeee2; color: #b45309; }
.b-Retrospective, .b-ActionItem { background: #efeefa; color: #5b52a8; }
.b-Feedback, .b-Demand { background: #e9f4ec; color: #3f7a4f; }
.b-WorkAllocation, .b-Release, .b-Program, .b-Team,
.b-Iteration, .b-TeamIteration, .b-Milestone, .b-Build, .b-Impediment {
  background: #eef1f2; color: #55636e;
}

/* ============================================================ panneau : titres */

h1 {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  flex-wrap: wrap;
}
h1 .eid {
  font-size: 13px;
  color: var(--txt-3);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

h2 {
  font-size: 13px;
  font-weight: 650;
  color: var(--txt-2);
  margin: var(--s6) 0 var(--s2);
  letter-spacing: .01em;
}

/* accordeons : la carte est le bloc, le chevron ouvre */
details.sec {
  background: var(--card);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  margin-top: var(--s4);
  overflow: hidden;
}
details.sec > summary {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--txt);
  padding: var(--s3) var(--s5);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  transition: background-color var(--ease);
}
details.sec > summary:hover { background: var(--soft); }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before {
  content: "\203A";
  color: var(--txt-3);
  font-size: 15px;
  width: 12px;
  transition: transform var(--ease);
}
details.sec[open] > summary::before { transform: rotate(90deg); }
details.sec > summary .n {
  font-weight: 500;
  color: var(--txt-3);
  background: var(--mute);
  border-radius: var(--r3);
  padding: 0 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
details.sec > .body { padding: 0 var(--s5) var(--s5); }
details.sec[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s4); }

.trail {
  font-size: 13px;
  color: var(--txt-3);
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
}
.trail a { color: var(--acc); text-decoration: none; cursor: pointer; font-weight: 500; }
.trail a:hover { text-decoration: underline; }
.trail i { color: var(--txt-3); font-style: normal; }

.muted { color: var(--txt-3); font-size: 13.5px; }
.spin { color: var(--txt-3); font-size: 13px; padding: var(--s2); }

/* ======================================================= champs mis en avant */

.prim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  margin-top: var(--s4);
  background: var(--card);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  padding: var(--s4) var(--s5);
}
.prim > div { min-width: 0; }
.prim dt { font-size: 11px; color: var(--txt-3); }
.prim dd { font-size: 15.5px; margin-top: 2px; font-weight: 600; }

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s3) var(--s5);
}
.meta div { min-width: 0; }
.meta dt { font-size: 11px; color: var(--txt-3); }
.meta dd { font-size: 13.5px; margin-top: 1px; word-break: break-word; }

/* ============================================================== tuiles chiffrees */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}
.tile {
  background: var(--card);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  padding: var(--s3) var(--s4);
  transition: box-shadow var(--ease), transform var(--ease);
}
.tile[data-t] { cursor: pointer; }
.tile[data-t]:hover { box-shadow: var(--sh2); transform: translateY(-1px); }
.tile b {
  display: block;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tile em { font-style: normal; font-size: 11.5px; color: var(--txt-3); display: block; }

.bar {
  display: flex;
  height: 8px;
  border-radius: var(--r3);
  overflow: hidden;
  margin: var(--s2) 0 var(--s3);
  background: var(--mute);
}
.bar i { display: block; transition: width var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 12.5px; color: var(--txt-2); }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.legend em { font-style: normal; color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* ==================================================== contenu riche : lecture */

/* Largeur de ligne bornee : une description de 3 000 caracteres etalee sur un
   ecran 27 pouces est illisible. C'est l'ecran ou l'on passe le plus de temps. */
.desc { max-width: var(--measure); font-size: 15px; line-height: 1.72; }
.desc > * + * { margin-top: var(--s3); }
.desc img {
  max-width: 100%;
  border-radius: var(--r1);
  display: block;
  margin: var(--s4) 0;
  cursor: zoom-in;
  box-shadow: var(--sh1);
  transition: box-shadow var(--ease);
}
.desc img:hover { box-shadow: var(--sh2); }
.desc table { border-collapse: collapse; font-size: 14px; }
.desc td, .desc th {
  border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  text-align: left;
}
.desc th { background: var(--soft); font-weight: 600; }
.desc pre {
  background: var(--soft);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.desc code { font-family: var(--mono); font-size: 13px; }
.desc a { color: var(--acc); }
.desc ul, .desc ol { padding-left: var(--s5); }
.desc li + li { margin-top: var(--s1); }
.desc blockquote {
  border-left: 3px solid var(--acc-pale);
  padding-left: var(--s4);
  color: var(--txt-2);
}
/* Le HTML importe porte ses propres h1/h2, qui rivalisaient avec les titres de
   l'application : on ne distinguait plus la structure de l'outil du contenu
   archive. On les retrograde a l'echelle du corps de texte. */
.desc h1, .desc h2, .desc h3, .desc h4, .desc h5 {
  font-size: 16px;
  font-weight: 650;
  color: var(--txt);
  margin: var(--s5) 0 var(--s2);
  border: none;
  display: block;
  letter-spacing: -0.01em;
}
.desc h1 { font-size: 17.5px; }
.desc hr { border: none; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* ================================================================== commentaires */

.comment { max-width: var(--measure); padding: var(--s4) 0; border-top: 1px solid var(--line-soft); }
.comment:first-child { border-top: none; padding-top: 0; }
.comment.reply {
  padding-left: var(--s4);
  margin-left: var(--s3);
  border-left: 2px solid var(--acc-pale);
}
.comment-head {
  font-size: 12px;
  color: var(--txt-3);
  margin-bottom: var(--s2);
  display: flex;
  gap: var(--s2);
  align-items: baseline;
}
.comment-head b { color: var(--txt); font-weight: 600; font-size: 13px; }
.comment-body { font-size: 14.5px; line-height: 1.68; }
.comment-body > * + * { margin-top: var(--s2); }
.comment-body img { max-width: 100%; border-radius: var(--r1); cursor: zoom-in; box-shadow: var(--sh1); }
.priv { color: var(--wait); }

/* ====================================================================== tableaux */

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left;
  color: var(--txt-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--card);
}
table.grid td {
  padding: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr { transition: background-color var(--ease); }
table.grid tbody tr:hover { background: var(--soft); }
table.grid a { color: var(--acc); text-decoration: none; font-weight: 500; }
table.grid a:hover { text-decoration: underline; }
/* Les en-tetes portent deja la classe .num, mais `table.grid th` (specificite
   0,1,2) ecrasait `.num` (0,1,0) : les intitules restaient a gauche au-dessus
   de chiffres alignes a droite. On qualifie donc la regle au meme niveau. */
.num,
table.grid th.num,
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }

table.grid th.s { cursor: pointer; user-select: none; transition: color var(--ease); }
table.grid th.s:hover { color: var(--txt); }
table.grid th.s.asc::after, table.grid th.s.desc::after { color: var(--acc); font-size: 9px; }
table.grid th.s.asc::after { content: " \25B2"; }
table.grid th.s.desc::after { content: " \25BC"; }

/* ======================================================== gelules diverses */

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  background: var(--soft);
  border-radius: var(--r3);
  padding: 4px var(--s3);
  font-size: 12.5px;
  color: var(--txt-2);
}
.chip b { color: var(--txt-3); font-weight: 500; }

.tsum { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.tsum span {
  background: var(--acc-tint);
  border-radius: var(--r3);
  padding: 4px var(--s3);
  font-size: 12.5px;
  color: var(--acc-deep);
}
.tsum b { color: var(--txt-3); font-weight: 500; }

/* ==================================================================== fichiers */

.files { display: flex; flex-wrap: wrap; gap: var(--s2); }
.file {
  background: var(--soft);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--txt);
  max-width: 320px;
  transition: background-color var(--ease), box-shadow var(--ease);
}
.file:hover { background: var(--card); box-shadow: var(--sh1); }
.file.gone { opacity: .5; cursor: not-allowed; }
.file-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-s { color: var(--txt-3); font-size: 11px; flex: none; font-variant-numeric: tabular-nums; }
.thumb {
  width: 32px; height: 32px; object-fit: cover;
  border-radius: 6px; flex: none; background: var(--mute); cursor: zoom-in;
}

/* ========================================================= resultats, documents */

.facets { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.facet {
  background: var(--card);
  border-radius: var(--r3);
  padding: 5px var(--s3);
  font-size: 12.5px;
  cursor: pointer;
  color: var(--txt-2);
  box-shadow: var(--sh1);
  transition: box-shadow var(--ease), color var(--ease), background-color var(--ease);
}
.facet:hover { box-shadow: var(--sh2); color: var(--txt); }
.facet.on { background: var(--acc); color: #fff; box-shadow: var(--sh2); }
.facet em { font-style: normal; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.facet.on em { color: rgba(255, 255, 255, .72); }

.res {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background-color var(--ease);
}
.res:last-child { border-bottom: none; }
.res:hover { background: var(--soft); }
.res.dead { cursor: default; opacity: .55; }
.res-main { flex: 1; min-width: 0; }
.res-name { font-size: 14px; font-weight: 500; }
.res-x { font-size: 13px; color: var(--txt-2); margin-top: 2px; max-width: var(--measure); }

/* encart d'information : fond teinte, pas de bordure gauche seche */
.widen, .callout {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--acc-tint);
  border-radius: var(--r2);
  font-size: 13.5px;
  color: var(--txt-2);
  line-height: 1.6;
}
.widen b { color: var(--acc-deep); cursor: pointer; font-weight: 600; }
.widen b:hover { text-decoration: underline; }

.doc {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--txt);
  transition: background-color var(--ease);
}
.doc:last-child { border-bottom: none; }
.doc:hover { background: var(--soft); }
.doc .ico {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r1);
  background: var(--mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: var(--mono);
  color: var(--txt-3); overflow: hidden;
}
.doc .ico img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.doc .dn { flex: 1; min-width: 0; }
.doc .dn b {
  display: block; font-weight: 500; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc .dn span { font-size: 11.5px; color: var(--txt-3); }
.doc .ds { font-size: 11.5px; color: var(--txt-3); flex: none; font-variant-numeric: tabular-nums; }

/* ============================================================ boutons, marques */

.copybtn {
  background: var(--soft);
  border: none;
  border-radius: var(--r3);
  color: var(--txt-3);
  font: inherit;
  font-size: 11.5px;
  padding: 3px var(--s3);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.copybtn:hover { color: var(--acc-deep); background: var(--acc-pale); }
.trail .copybtn:first-of-type { margin-left: auto; }

mark.hit { background: #fdf1b0; color: inherit; padding: 1px 2px; border-radius: 3px; }

kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--mute);
  border-radius: var(--r1);
  padding: 2px 6px;
  color: var(--txt-2);
}

/* ==================================================================== squelettes */

.skel { padding-top: var(--s1); }
.skel i {
  display: block;
  height: 14px;
  border-radius: var(--r1);
  margin-bottom: var(--s3);
  background: linear-gradient(90deg, var(--mute) 25%, var(--soft) 50%, var(--mute) 75%);
  background-size: 400% 100%;
  animation: sk 1.4s ease-in-out infinite;
}
.skel i:nth-child(1) { width: 38%; height: 26px; }
.skel i:nth-child(2) { width: 84%; }
.skel i:nth-child(3) { width: 70%; }
.skel i:nth-child(4) { width: 78%; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ====================================================================== overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16, 28, 36, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.palette {
  width: min(600px, 92vw);
  background: var(--card);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  margin-bottom: 12vh;
  overflow: hidden;
}
.palette input {
  width: 100%;
  padding: var(--s4) var(--s5);
  font: inherit;
  font-size: 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--txt);
}
.palette input:focus { outline: none; }
#palresults { max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.pal-item {
  padding: var(--s2) var(--s3);
  cursor: pointer;
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  font-size: 13.5px;
  border-radius: var(--r1);
  transition: background-color var(--ease);
}
.pal-item:hover { background: var(--soft); }
.pal-item.sel { background: var(--acc-pale); color: var(--acc-deep); }
.pal-item .co { color: var(--txt-3); font-size: 12px; }
.palhint {
  padding: var(--s2) var(--s5);
  font-size: 11px;
  color: var(--txt-3);
  border-top: 1px solid var(--line-soft);
}

#lightbox { background: rgba(14, 20, 26, .9); }
#lightbox img {
  max-width: 86vw;
  max-height: 84vh;
  border-radius: var(--r2);
  background: #fff;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .45);
}
.lb-nav {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .6);
  font-size: 40px;
  cursor: pointer;
  padding: 0 var(--s5);
  line-height: 1;
  transition: color var(--ease);
}
.lb-nav:hover { color: #fff; }
.lb-info {
  position: absolute;
  bottom: var(--s5);
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed;
  bottom: var(--s5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--txt);
  color: #fff;
  border-radius: var(--r3);
  padding: var(--s2) var(--s5);
  font-size: 13px;
  z-index: 60;
  box-shadow: var(--sh3);
}

/* ====================================================================== adaptatif */

@media (max-width: 1180px) {
  main { grid-template-columns: 268px 1fr; }
  #panel { padding: var(--s4) var(--s4) var(--s6); }
  .hstats { display: none; }
  header, .advpanel { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ===================================================================== impression */

@media print {
  header, aside, .advpanel, .overlay, .copybtn, .facets, .toast, .nav {
    display: none !important;
  }
  body { background: #fff; color: #000; height: auto; display: block; overflow: visible; }
  main { display: block; }
  #panel { overflow: visible; padding: 0; background: #fff; }
  .card, details.sec, .tile, .prim { box-shadow: none; border: 1px solid #ddd; }
  h1 { font-size: 18pt; }
  h2, details.sec > summary { font-size: 11pt; }
  /* tout ouvrir : un accordeon replie ne s'imprime pas */
  details.sec > .body { display: block !important; }
  details.sec > summary::before { content: none; }
  .desc, .comment, .res-x { max-width: none; }
  .desc img { max-width: 55%; page-break-inside: avoid; box-shadow: none; }
  .comment, tr { page-break-inside: avoid; }
  table.grid { font-size: 9pt; }
  a { color: #000; text-decoration: none; }
  .badge { background: #f0f0f0 !important; color: #333 !important; }
  mark.hit { background: #ffef9f; }
}

/* ===================================================== comptes et connexion
 * N'apparait que si le serveur tourne avec --auth-db.
 */

.loginwrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--page);
}
.logincard {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border-radius: var(--r2);
  padding: 32px 28px;
  box-shadow: var(--sh2);
}
.loginmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.loginmark svg { flex: none; }
.loginmark h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--acc-deep);
  overflow-wrap: anywhere;
}
.loginsub {
  margin: 4px 0 24px;
  text-align: center;
  font-size: 13px;
  color: var(--txt-3);
}
.logincard label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}
.logincard input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font: inherit;
  color: var(--txt);
  background: #fff;
}
.logincard input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}
.loginbtn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--r1);
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}
.loginbtn:hover { background: var(--acc-deep); }
.loginbtn:disabled { opacity: .6; cursor: default; }
.loginerr {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--r1);
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
}
.loginhelp {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r1);
  background: #f0fdfa;
  color: #115e59;
  font-size: 13px;
  line-height: 1.6;
}
code.pwd {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: .02em;
  user-select: all;
}

/* --- ecran de gestion --- */

.userform {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.userform input, .userform select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font: inherit;
  font-size: 13.5px;
  background: #fff;
  color: var(--txt);
}
.userform input { flex: 1 1 200px; min-width: 0; }
.mini.primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 600;
}
.mini.primary:hover { background: var(--acc-deep); color: #fff; }
.mini.danger { color: #b91c1c; }
.mini.danger:hover { background: #fef2f2; color: #991b1b; }

.rowacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.ok  { color: var(--ok);   font-weight: 600; }
.bad { color: var(--stop); font-weight: 600; }
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mute);
  color: var(--txt-3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
table.grid.compact td { padding: 5px 10px; font-size: 12.5px; }