/* =========================================================================
   Euphoriae — feuille de style
   Identite « aube doree » : le fond reste sombre et chaud, mais la lumiere
   entre par le haut. L'accent est un ambre vif double d'un rose — les deux
   bouts d'un lever de soleil — et c'est leur degrade qui signe l'interface :
   le trait qui s'allume sur une carte, les grands nombres, le mot marque.
   La profondeur vient de trois niveaux de surface et d'une bordure claire,
   pas d'ombres lourdes.

   Le fond a vire du gris neutre (#121116) au violet d'encre (#15121b) : sous
   un accent chaud, un gris pur parait sale, et c'est ce qui donnait a
   l'ensemble son air de tableur. La teinte du fond doit repondre a l'accent.
   ========================================================================= */

:root {
  --fond: #15121b;
  --surface: #1e1a26;
  --surface-2: #272130;
  --surface-3: #322b3c;
  --bord: #37303f;
  --bord-clair: #473e53;

  --texte: #f4eff7;
  --texte-doux: #b3a9bd;
  /* Remonte de #746e80, qui donnait 3,84:1 sur --fond et 3,25:1 sur --surface-2 : sous
     le seuil AA de 4,5:1, et ces vingt usages sont tous du texte de 10 a 13 px (taux de
     butin, conditions, libelles de colonne, placeholder de la recherche) — donc pas de
     derogation « grand texte » possible. #968ca1 donne 4,77:1 sur --surface-2, 5,33:1 sur
     --surface et 5,78:1 sur --fond — le pire des trois passe. */
  --texte-faible: #968ca1;

  /* L'or a gagne en luminosite (#e0a955 → #f0b445) : sur le nouveau fond il portait
     moins, et c'est la couleur de l'onglet actif, des pastilles et des liens. */
  --or: #f0b445;
  --or-sombre: #96702f;
  /* Le second accent. Il ne sert jamais seul a porter du sens — un daltonien ne doit
     pas avoir a distinguer l'ambre du rose — seulement a finir un degrade. */
  --rose: #e86a8a;
  --degrade: linear-gradient(95deg, var(--or), var(--rose));
  /* La lueur d'aube, posee derriere l'en-tete et le bandeau d'accueil. Elle est tres
     basse en opacite : un fond doit se sentir, pas se voir. */
  --lueur: radial-gradient(60% 120% at 50% -10%,
    color-mix(in srgb, var(--or) 16%, transparent),
    color-mix(in srgb, var(--rose) 10%, transparent) 45%, transparent 72%);

  --vert: #7bd49a;
  --rouge: #ef6f78;

  --terre: #d29a4a;
  --feu: #f0805a;
  --eau: #5cb0e8;
  --air: #7cd8ab;
  --neutre: #a8a2b3;

  /* Archivo est deja auto-hebergee — elle sert aux fiches recap depuis toujours. La
     brancher sur les titres et la marque ne coute pas un octet de plus, et c'est ce qui
     distingue le plus vite une interface d'un rendu par defaut : system-ui, c'est la
     police de tout le monde. Le corps de texte reste en system-ui, qui se lit mieux en
     petit et sur toutes les plateformes. */
  --titre: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rayon: 12px;
  --rayon-s: 7px;
  --transition: 140ms cubic-bezier(.4, 0, .2, 1);

  /* L'en-tete tient sur deux rangees : --entete-h est leur somme, et c'est lui que
     suivent les en-tetes de tableau colles, la colonne laterale et les cadres de fiche.
     C'est une valeur de depart, pas la verite : `app.js` la remesure sur l'en-tete reel et
     la reecrit ici.

     Elle etait figee a 96px et ne l'etait qu'en apparence : sous 1000 px la barre passe en
     `height: auto; flex-wrap: wrap` et le champ de recherche prend sa propre rangee, ce
     qui porte l'en-tete a 139 px — 168 px sur un telephone. Les elements colles se
     positionnaient donc 43 a 72 px trop haut et disparaissaient derriere l'en-tete
     translucide. Une hauteur qui depend du contenu ne peut pas etre une constante. */
  --barre-h: 54px;
  --nav-h: 42px;
  --entete-h: 96px;
  /* Hauteur de la barre « Filtres », nulle tant qu'elle ne s'affiche pas. Meme principe :
     mesuree, pas devinee — le +41px code en dur dans la media query etait sa valeur a une
     taille de police donnee. */
  --bascule-h: 0px;
  /* Hauteur du pied fixe. Contrairement a --entete-h, elle n'est pas mesuree : la regle
     `#pied` l'applique en `height`, donc la variable ne decrit pas la hauteur, elle la
     fait. Tout ce qui doit s'arreter au-dessus du pied — le bas du document, la colonne de
     filtres, la pilule de selection — s'y reporte plutot que de recopier 28px. */
  --pied-h: 28px;
}

* { box-sizing: border-box; }

/* Lu par les lecteurs d'ecran, invisible a l'oeil. `clip-path` plutot que `display: none`,
   qui retirerait le contenu de l'arbre d'accessibilite — donc du message a annoncer. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

html { scrollbar-color: var(--bord-clair) var(--fond); }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Le pied est `fixed` : il sort du flux, donc rien ne lui reserve sa place et la derniere
     ligne d'un tableau finirait dessous. Cette marge basse est cette place. */
  padding-bottom: var(--pied-h);
}

/* ============================ pied fixe ============================ */
/* Il est colle au bas de la fenetre, pas au bas du document. Au bas du document il etait
   sous 4 958 lignes de bestiaire : present dans le code, absent de l'ecran. Il ne porte que
   le lien vers les mentions — tout le reste y est ecrit en entier, et le redire sur chaque
   ecran n'informait personne.
   z-index 24 : au-dessus des tableaux et de leurs en-tetes colles, sous la pilule de
   selection (25), sous le panneau de fiche (40) et le tiroir de filtres (60), qui sont des
   couches posees par-dessus l'ecran et ont le droit de le couvrir. */
#pied {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 24;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--pied-h); padding: 0 20px;
  background: var(--surface); border-top: 1px solid var(--bord);
  font-size: 11.5px;
}
#pied a { color: var(--texte-doux); text-decoration: none; }
#pied a:hover { color: var(--or); text-decoration: underline; }
/* La signature de la guilde, a gauche du lien legal. Elle ne redit rien de ce que porte
   la page des mentions : elle dit d'ou vient le site, ce que le lien ne dit pas. */
#pied .sig { display: inline-flex; align-items: center; gap: 6px; color: var(--or); font-weight: 600; }
#pied .sig svg { width: 12px; height: 12px; }
#pied .sep { color: var(--bord-clair); }

/* Les titres passent en Archivo ; le corps reste en system-ui. Une police de titre ne
   sert a rien en dessous de ~14 px, et Archivo n'est chargee qu'en graisses 500-800. */
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 600; line-height: 1.25; }
a { color: var(--or); text-decoration-color: color-mix(in srgb, var(--or) 40%, transparent); }
a:hover { text-decoration-color: var(--or); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 4px; }

/* Les chiffres doivent s'aligner en colonne : c'est ce qu'on compare. */
table, .taux, .lvl { font-variant-numeric: tabular-nums; }

/* ============================ en-tete ============================ */
/* Deux rangees : identite + recherche + indicateurs vivants, puis la navigation.
   Sur une seule rangee, dix ecrans ne tenaient pas — quatre avaient fini par en
   disparaitre, et le libelle de l'almanax se coupait au milieu d'un mot. */
header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
}
/* La lueur d'aube. Elle est posee en pseudo-element plutot que dans le `background` de
   l'en-tete : celui-ci est deja un fond translucide double d'un `backdrop-filter`, et
   empiler un degrade dessus aurait teinte le flou lui-meme. En couche separee, la lueur
   reste au-dessus du flou et sous le contenu.
   `pointer-events: none` : sans lui, cette couche couvrirait la recherche et les onglets. */
header::before {
  content: ''; position: absolute; inset: 0; background: var(--lueur); pointer-events: none;
}
header > * { position: relative; }
/* Le filet qui ferme l'en-tete reprend le degrade, a peine visible : c'est le seul trait
   qui traverse toute la largeur de l'ecran, donc le meilleur endroit pour signer. */
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--degrade); opacity: .5;
}
header .barre {
  display: flex; align-items: center; gap: 18px;
  height: var(--barre-h); padding: 0 20px;
}

/* ---- marque ---- */
/* Le titre du document reste dans l'en-tete : les vues s'ouvrent en h2, et sans lui la
   page n'aurait plus aucun titre de premier niveau. */
.marque-titre { margin: 0; flex: none; font-size: inherit; font-weight: inherit; }
.marque {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--texte); white-space: nowrap; flex: none;
}
.marque:hover { text-decoration: none; }
.marque-signe { width: 21px; height: 21px; color: var(--or); flex: none; }
/* Le nom porte le degrade. C'est le seul mot de l'interface a le faire en permanence :
   repete ailleurs il cesserait de designer la marque.
   `background-clip: text` demande que la couleur du texte soit transparente ; les
   navigateurs qui ne le gerent pas gardent la couleur heritee, donc le nom reste
   lisible — la regle degrade sans tomber sur du texte invisible. */
.marque-nom {
  font-family: var(--titre); font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Le sous-titre : la marque dit qui, celui-ci dit quoi. Sans lui, « Euphoriae » seul
   n'apprend a personne que la page est une base de donnees Dofus. Il disparait sous
   1000 px, ou la place de l'en-tete est comptee. */
.marque-quoi {
  color: var(--texte-faible); font-size: 11.5px; white-space: nowrap;
  padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--bord);
}
.marque .v {
  color: var(--or); font-weight: 500; font-size: 11px;
  border: 1px solid var(--or-sombre); border-radius: 99px; padding: 1px 7px;
}

/* ---- navigation ---- */
.onglets {
  display: flex; align-items: center; gap: 16px;
  height: var(--nav-h); padding: 0 20px;
  border-top: 1px solid color-mix(in srgb, var(--bord) 60%, transparent);
  overflow-x: auto; scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.groupe-nav { display: flex; align-items: center; gap: 2px; flex: none; }
/* Les outils ne sont pas des jeux de donnees : ils travaillent sur une selection.
   Un filet et un libelle en ligne suffisent a dire que ce groupe repond a autre chose —
   posé au-dessus des boutons, il les decalait et cassait l'alignement de la rangee. */
.groupe-nav.outils { padding-left: 15px; margin-left: 3px; border-left: 1px solid var(--bord); }
.groupe-nav.outils::before {
  content: attr(data-groupe);
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texte-faible); margin-right: 5px; white-space: nowrap;
}

.onglets button {
  background: none; border: 0; color: var(--texte-doux); cursor: pointer;
  padding: 6px 12px; border-radius: var(--rayon-s); font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.onglets button:hover { color: var(--texte); background: var(--surface-2); }
.onglets button[aria-current] { color: var(--fond); background: var(--or); }
/* Le compte d'une selection non vide : c'est ce qui rend l'outil attirant au bon
   moment, et inerte le reste du temps. */
.onglets .badge {
  display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--or); color: var(--fond);
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.onglets button[aria-current] .badge { background: var(--fond); color: var(--or); }

/* ---- recherche ---- */
.search { position: relative; flex: 1; max-width: 460px; }
.search input {
  width: 100%; padding: 8px 13px; border-radius: 99px;
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte);
  font: inherit; font-size: 13px; transition: border-color var(--transition), background var(--transition);
}
/* Le fond du champ passe a --surface-3 au focus, ou --texte-faible ne vaut plus que
   4,17:1. --texte-doux tient sur les deux etats. */
.search input::placeholder { color: var(--texte-doux); }
/* `:focus` tout court l'emportait sur la regle globale `:focus-visible` (specificite 0,2,1
   contre 0,1,0), donc l'anneau de focus disparaissait aussi au clavier — il ne restait
   qu'un changement de bordure, sous les 3:1 exiges d'un indicateur non textuel.
   `:not(:focus-visible)` limite le retrait au focus a la souris, qui est le cas vise. */
.search input:focus { border-color: var(--or); background: var(--surface-3); }
.search input:focus:not(:focus-visible) { outline: none; }

.vivant { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }

.resultats {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  max-height: 64vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--bord-clair);
  border-radius: var(--rayon); padding: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}
.resultats .grp {
  padding: 8px 10px 3px; color: var(--texte-faible); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
}
.resultats button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: var(--rayon-s); background: none; color: var(--texte);
  font: inherit; cursor: pointer; transition: background var(--transition);
}
.resultats button:hover { background: var(--surface-3); }
.resultats .meta { color: var(--texte-doux); font-size: 12px; }
/* ============================ disposition ============================ */
main { display: grid; grid-template-columns: 296px minmax(0, 1fr); align-items: start; }

/* La colonne occupe ce que l'en-tete et le pied laissent : sans le `- var(--pied-h)`, son
   dernier champ et le bouton « Reinitialiser » passaient sous le pied fixe. */
main > aside {
  border-right: 1px solid var(--bord); padding: 16px 14px;
  height: calc(100dvh - var(--entete-h) - var(--pied-h)); overflow-y: auto;
  position: sticky; top: var(--entete-h);
}
main > aside input[type="search"] {
  width: 100%; padding: 8px 12px; border-radius: var(--rayon-s);
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte);
  font: inherit; font-size: 13px; transition: border-color var(--transition);
}
main > aside input[type="search"]:focus { border-color: var(--or); }
main > aside input[type="search"]:focus:not(:focus-visible) { outline: none; }

/* Le panier flotte en bas : sans cette marge il masquerait la derniere ligne. */
section#vue { padding: 26px 30px 100px; min-width: 0; }

/* ---- listes laterales ---- */
.liste { list-style: none; margin: 14px 0 0; padding: 0; }
.liste li { margin-bottom: 1px; }
.liste button {
  width: 100%; text-align: left; padding: 8px 11px; border: 0;
  border-radius: var(--rayon-s); background: none; color: var(--texte-doux);
  cursor: pointer; display: flex; justify-content: space-between; gap: 10px;
  align-items: center; transition: background var(--transition), color var(--transition);
}
.liste button:hover { background: var(--surface-2); color: var(--texte); }
.liste button[aria-current] {
  background: var(--surface-2); color: var(--texte);
  box-shadow: inset 2px 0 0 var(--or);
}
.liste .lvl { color: var(--texte-faible); font-size: 11.5px; white-space: nowrap; }
.dj-nom { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dj-nom .via { color: var(--or); font-size: 11px; }
.rien { color: var(--texte-faible); font-size: 13px; }

/* ---- filtres ---- */
.titre-filtre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texte-faible); margin-bottom: 12px; font-weight: 600;
}
.champ { display: block; margin-bottom: 12px; }
.champ > span { display: block; font-size: 11.5px; color: var(--texte-doux); margin-bottom: 4px; }
.champ input, .champ select {
  width: 100%; padding: 7px 10px; border-radius: var(--rayon-s);
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte);
  font: inherit; font-size: 13px; transition: border-color var(--transition);
}
.champ input:focus, .champ select:focus { border-color: var(--or); }
.champ input:focus:not(:focus-visible), .champ select:focus:not(:focus-visible) { outline: none; }
.champ input[type="checkbox"] { width: auto; accent-color: var(--or); }
.duo { display: flex; gap: 7px; }
.raz {
  width: 100%; margin-top: 8px; padding: 7px; border-radius: var(--rayon-s); cursor: pointer;
  background: none; border: 1px solid var(--bord); color: var(--texte-doux); font-size: 12px;
  transition: border-color var(--transition), color var(--transition);
}
.raz:hover { color: var(--texte); border-color: var(--bord-clair); }

/* ---- sous-onglets d'une vue ---- */
/* Objets / Panoplies / Montures / Recettes et Quetes / Succes / Titres / Ornements sont
   quatre jeux de donnees, pas un critere : ils vivaient pourtant dans la colonne des
   filtres, au-dessus des champs, ou rien ne les distinguait d'une case a cocher. Ils
   remontent sous le titre de la vue, sous la forme qu'ont les sous-onglets partout. */
.modes {
  display: flex; gap: 2px; margin: 12px 0 2px;
  border-bottom: 1px solid var(--bord); overflow-x: auto; scrollbar-width: none;
}
.modes::-webkit-scrollbar { display: none; }
.modes button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--texte-doux); font-size: 13px; font-weight: 500; white-space: nowrap;
  padding: 7px 14px; margin-bottom: -1px; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.modes button:hover { color: var(--texte); }
.modes button[aria-current] { color: var(--or); border-bottom-color: var(--or); }
/* La ligne de decompte suit les sous-onglets : elle appartient au jeu de donnees
   selectionne, pas au titre de la vue. */
.modes + .conseil { margin-top: 12px; }

/* ============================ titres de vue ============================ */
.titre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.titre h2 { font-size: 24px; letter-spacing: -.4px; }
.conseil { color: var(--texte-doux); margin: 0 0 6px; font-size: 13.5px; }
.conseil strong { color: var(--vert); font-weight: 600; }

.lien-guide {
  background: none; border: 1px solid var(--bord-clair); color: var(--or);
  padding: 4px 12px; border-radius: 99px; font-size: 12px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.lien-guide:hover { border-color: var(--or); background: color-mix(in srgb, var(--or) 12%, transparent); }

/* Un lien vers une fiche récap a la forme du lien guide, pas sa couleur : les deux se
   côtoient en tête d'un donjon et ne mènent pas au même genre de page — un guide se lit,
   une fiche se regarde pendant le combat. */
.lien-fiche {
  background: none; border: 1px solid color-mix(in srgb, var(--vert) 40%, transparent);
  color: var(--vert); padding: 4px 12px; border-radius: 99px; font-size: 12px;
  cursor: pointer; text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.lien-fiche:hover {
  border-color: var(--vert); background: color-mix(in srgb, var(--vert) 12%, transparent);
}

/* Dans le détail d'un monstre, la ligne traverse la grille : elle passe avant tout le
   reste, une fiche récap dit en un écran ce que la table des sorts fait reconstituer. */
.fiches-liees {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.fiches-liees-titre {
  color: var(--texte-faible); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
}

/* Un message d'ecran vide se centre verticalement quand il est seul, mais se colle sous
   le titre quand il y en a un : sinon un ecran titre laisse un trou de 14vh. */
.vide { color: var(--texte-doux); max-width: 56ch; margin-top: 14vh; }
.titre ~ .vide, .conseil ~ .vide { margin-top: 10px; }
.vide p { margin: 0 0 10px; font-size: 15px; }
.vide .hint { font-size: 13px; color: var(--texte-faible); }
/* Un ecran vide qui dit quoi faire doit aussi y mener : sinon il faut retrouver l'onglet. */
.vide .retour { margin-top: 4px; }

/* Un ecran vide est un resultat ; un ecran en erreur est une panne. Les distinguer evite
   de chercher un filtre trop strict quand c'est le serveur qui n'a pas repondu. */
.vide.erreur { border-left: 3px solid var(--rouge); padding-left: 16px; }
.vide.erreur p { color: var(--texte); }
.vide.erreur .plus { margin: 0 8px 0 0; }
/* Dans la liste de recherche, l'echec prend la place qu'aurait eue le resultat. */
.resultats .grp.erreur { color: var(--rouge); text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* ============================ tableaux ============================ */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; }
thead th {
  text-align: right; padding: 0 10px 9px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; color: var(--texte-faible);
  border-bottom: 1px solid var(--bord); white-space: nowrap;
  position: sticky; top: calc(var(--entete-h) + var(--bascule-h)); background: var(--fond); z-index: 5;
}
thead th:first-child { text-align: left; }
tbody td {
  padding: 9px 10px; text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 55%, transparent);
}
tbody td:first-child { text-align: left; }
/* Une ligne sur deux est teintee. Sur dix colonnes dont cinq de resistances, l'oeil
   perdait sa ligne entre le nom et le chiffre qu'il cherchait — c'est le defaut classique
   d'un tableau large, et un filet horizontal seul n'y suffit pas.
   La teinte est tres basse (45 % de --surface, soit deux points de luminosite au-dessus
   du fond) : elle doit guider sans decouper le tableau en bandes. */
tbody tr.m:nth-child(even) { background: color-mix(in srgb, var(--surface) 45%, transparent); }
tbody tr.m { transition: background var(--transition), box-shadow var(--transition); }
/* Le survol allume la ligne entiere et pose un liseré d'or a gauche : sur 4 958 lignes,
   savoir laquelle on pointe compte plus que la discretion. */
tbody tr.m:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--or); }
/* La ligne dépliée reste marquee tant que son detail est ouvert : sinon, en faisant
   defiler le detail, on perd de vue a quel monstre il appartient. */
tbody tr.m.ouverte { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--or); }
td.gauche { text-align: left; }

/* Le libelle d'un en-tete triable est un vrai bouton : focalisable, activable a Entree et
   a Espace, annonce comme tel. Il herite de la typographie du `th` pour que rien ne bouge
   a l'oeil — c'est la seule difference visible avec la version au clic seul. */
th.triable { cursor: pointer; user-select: none; padding: 0; }
.tri-bouton {
  background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; width: 100%;
  padding: 0 10px 9px; text-align: inherit;
  transition: color var(--transition);
}
th.triable:hover .tri-bouton, .tri-bouton:hover { color: var(--texte); }
/* L'en-tete de la premiere colonne est aligne a gauche, les autres a droite : le bouton
   doit suivre, sinon le libelle se decolle de sa colonne. */
th.tri-desc .tri-bouton::after { content: ' ▾'; color: var(--or); }
th.tri-asc .tri-bouton::after { content: ' ▴'; color: var(--or); }

/* ---- ligne de monstre ---- */
tbody tr.m > td:first-child > button {
  background: none; border: 0; padding: 0; color: var(--texte); cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
}
.chev {
  color: var(--texte-faible); font-size: 9px; width: 10px; flex: none;
  transition: color var(--transition);
}
tbody tr.m > td:first-child > button:hover .chev { color: var(--or); }

/* Le portrait est ce qui rend la liste lisible d'un coup d'oeil : on reconnait
   un monstre a sa silhouette bien avant d'avoir lu son nom. */
/* Le portrait gagne 4 px et une bordure : dans une ligne devenue plus aeree, une vignette
   posee a meme le fond flottait sans tenir sa colonne. */
.portrait {
  width: 42px; height: 42px; flex: none; border-radius: var(--rayon-s);
  background: var(--surface-2); border: 1px solid var(--bord);
  object-fit: contain; padding: 2px;
}
.nom-monstre { font-weight: 500; }

.tag {
  font-size: 9.5px; padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
  letter-spacing: .5px; border: 1px solid; font-weight: 600; flex: none;
}
.tag.boss { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 55%, transparent); }
.tag.mini-boss { color: var(--or); border-color: var(--or-sombre); }
.tag.quete { color: var(--texte-faible); border-color: var(--bord-clair); }
.tag.uniforme { color: var(--texte-faible); border-color: var(--bord-clair); }

/* ---- resistances ---- */
th.terre { color: var(--terre); } th.feu { color: var(--feu); }
th.eau { color: var(--eau); } th.air { color: var(--air); } th.neutre { color: var(--neutre); }

/* La teinte de fond suit la valeur : on repere la colonne molle sans lire les
   chiffres, tout en gardant le nombre exact pour decider. */
td.res { font-size: 13px; }
td.res .val {
  display: inline-block; min-width: 48px; padding: 3px 8px; border-radius: var(--rayon-s);
  background: rgba(224, 101, 107, calc(var(--force, 0) * .32));
  color: var(--texte);
}
td.res.faible .val {
  background: color-mix(in srgb, var(--vert) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vert) 55%, transparent);
  color: var(--vert); font-weight: 700;
}
td.res.negatif .val { color: var(--vert); }

/* ============================ detail deplie ============================ */
tr.detail > td { padding: 0; border-bottom: 1px solid var(--bord); }
.detail-in {
  padding: 18px 20px 22px 54px; background: var(--surface);
  display: grid; gap: 22px; grid-template-columns: 1fr 1fr;
}
.pleine-largeur { grid-column: 1 / -1; }
.detail-in h4 {
  margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texte-faible); font-weight: 600;
}

.sort {
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 45%, transparent);
}
.sort:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sort .s-nom { font-weight: 600; }
.sort ul { margin: 5px 0 0; padding-left: 18px; color: var(--texte-doux); font-size: 13px; }

.butins { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.butins li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 3px 0;
}
.butins .taux { color: var(--texte-faible); flex: none; }
.butins li.cond { color: var(--texte-faible); opacity: .6; }
.cond-titre {
  margin-top: 12px; margin-bottom: 4px; font-size: 10.5px; color: var(--texte-faible);
  text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
}

.paliers table.mini { margin-top: 0; font-size: 12.5px; }
.paliers table.mini thead th { padding: 0 8px 6px; font-size: 10px; position: static; }
.paliers table.mini tbody td { padding: 5px 8px; }
.paliers table.mini td.res .val { min-width: 42px; padding: 2px 6px; }

/* ============================ objets ============================ */
.icone-objet {
  width: 30px; height: 30px; flex: none; object-fit: contain;
  background: var(--surface-2); border-radius: var(--rayon-s); padding: 1px;
}
.cell-objet { display: flex; align-items: center; gap: 10px; }
/* Deux lignes maximum : sans cela une seule fiche bavarde double la hauteur de toutes
   les rangees et la table devient illisible. */
.effets-cell {
  color: var(--texte-doux); font-size: 12.5px; max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
table.objets thead th:nth-child(1), table.objets thead th:nth-child(2),
table.objets thead th:nth-child(4) { text-align: left; }
table.objets th:nth-child(2) { width: 190px; }
table.objets th:nth-child(3) { width: 70px; }
.lien-objet {
  background: none; border: 0; padding: 0; color: var(--texte);
  cursor: pointer; text-align: left; transition: color var(--transition);
}
.lien-objet:hover { color: var(--or); }
.butins .lien-objet { font-size: 13px; }

.fiches { list-style: none; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 36px; }
.fiches li { break-inside: avoid; padding: 4px 0; }
@media (max-width: 1100px) { .fiches { columns: 1; } }

.plus {
  margin: 22px auto 0; display: block; padding: 9px 22px; border-radius: var(--rayon-s);
  cursor: pointer; background: var(--surface-2); border: 1px solid var(--bord);
  color: var(--texte-doux); transition: border-color var(--transition), color var(--transition);
}
.plus:hover { border-color: var(--or); color: var(--texte); }

/* ============================ panneau lateral ============================ */
.panneau {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(740px, 94vw);
  background: var(--surface); border-left: 1px solid var(--bord-clair);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
  overflow-y: auto; z-index: 40; padding: 0 28px 70px;
  animation: glisse 180ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes glisse { from { transform: translateX(22px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panneau { animation: none; } }

.panneau > header {
  position: sticky; top: 0; height: auto; padding: 18px 0 14px;
  background: var(--surface); backdrop-filter: none;
  border-bottom: 1px solid var(--bord);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
}
.panneau h3 { font-size: 19px; letter-spacing: -.3px; }
.panneau #guide-meta { margin: 4px 0 0; color: var(--texte-faible); font-size: 12px; }
.panneau .actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.panneau .actions a { font-size: 12px; }
#guide-fermer {
  background: none; border: 1px solid var(--bord); color: var(--texte-faible);
  width: 30px; height: 30px; border-radius: var(--rayon-s); cursor: pointer; font-size: 13px;
  transition: color var(--transition), border-color var(--transition);
}
#guide-fermer:hover { color: var(--texte); border-color: var(--bord-clair); }

.avert {
  margin: 16px 0 0; padding: 10px 14px; border-radius: var(--rayon-s); font-size: 13px;
  background: color-mix(in srgb, var(--or) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
  color: var(--or);
}

#guide-corps { line-height: 1.68; }
#guide-corps h1 { font-size: 21px; margin: 28px 0 12px; }
#guide-corps h2 { font-size: 17.5px; margin: 26px 0 10px; }
#guide-corps h3, #guide-corps h4, #guide-corps h5 { font-size: 15px; margin: 22px 0 8px; }
#guide-corps h1[id], #guide-corps h2[id], #guide-corps h3[id], #guide-corps h4[id] { scroll-margin-top: 80px; }
#guide-corps p { margin: 11px 0; }
#guide-corps ul, #guide-corps ol { margin: 11px 0; padding-left: 24px; }
#guide-corps li { margin: 4px 0; }
#guide-corps img { max-width: 100%; height: auto; border-radius: var(--rayon-s); margin: 10px 0; }
#guide-corps hr { border: 0; border-top: 1px solid var(--bord); margin: 26px 0; }
#guide-corps code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 4px; font-size: 12.5px;
}
#guide-corps .tw { overflow-x: auto; margin: 14px 0; }
#guide-corps table { font-size: 13px; margin-top: 0; }
#guide-corps thead th { text-align: left; position: static; background: none; }
#guide-corps tbody td { text-align: left; }
.objet-icone {
  width: 62px; height: 62px; float: right; margin: 0 0 12px 16px;
  background: var(--surface-2); border-radius: var(--rayon); padding: 4px;
}

/* ============================ chargement ============================ */
.squelette { margin-top: 26px; }
.squelette div {
  height: 34px; border-radius: var(--rayon-s); margin-bottom: 7px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 240% 100%;
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette div { animation: none; } }

/* ============================ etroit ============================ */
/* Sur grand ecran, ni le bouton de filtres ni son voile n'existent. */
#bascule-filtres, #voile-filtres { display: none; }

@media (max-width: 1000px) {
  main { grid-template-columns: 1fr; }
  .detail-in { grid-template-columns: 1fr; padding-left: 20px; }
  section#vue { padding: 18px 16px 90px; }
  header .barre { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  /* La place de l'en-tete est comptee : le sous-titre est ce qui s'efface en premier,
     puisque la barre de navigation juste dessous dit deja de quoi parle le site. */
  .marque-quoi { display: none; }
  .onglets { padding: 0 14px; gap: 12px; }
  .vivant { margin-left: auto; }

  /* La colonne de filtres devient un tiroir. Depliee en tete de page, elle imposait
     700 px de defilement avant la premiere ligne du tableau — soit tout l'ecran d'un
     telephone occupe par des champs vides. */
  #bascule-filtres {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: var(--entete-h); z-index: 20;
    width: 100%; padding: 10px 16px;
    background: var(--surface); border: 0;
    border-bottom: 1px solid var(--bord);
    color: var(--texte-doux); font-size: 13px; font-weight: 500; cursor: pointer;
  }
  #bascule-filtres .bascule-icone { color: var(--or); }
  body.sans-filtres #bascule-filtres { display: none; }

  main > aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(320px, 86vw); height: 100%;
    background: var(--surface); border-right: 1px solid var(--bord-clair);
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    transform: translateX(-100%); transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
  }
  body.filtres-ouverts main > aside { transform: none; }

  body.filtres-ouverts #voile-filtres {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, .55);
  }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  main > aside { transition: none; }
}

/* ============================ accueil ============================ */
/* L'application s'ouvrait sur 4 958 monstres tries par niveau : son export le plus brut.
   Personne n'arrive en voulant la liste. L'accueil pose la recherche au centre et propose
   des entrees par intention — ce qu'on vient faire — plutot que par table. */
body[data-vue="accueil"] main { grid-template-columns: minmax(0, 1fr); }
body[data-vue="accueil"] main > aside { display: none; }
/* `overflow-x: clip` et non `hidden` : `hidden` ferait de la section un conteneur de
   defilement, ce qui casserait le `position: sticky` des en-tetes de tableau. La lueur du
   bandeau deborde volontairement de 30 px de chaque cote pour que la lumiere vienne du
   bord de la fenetre ; sous 1000 px le padding tombe a 16 px, et ces 28 px restants
   auraient ajoute une barre de defilement horizontale sur telephone. */
body[data-vue="accueil"] section#vue { padding: 0 30px 80px; overflow-x: clip; }

.accueil { max-width: 1080px; margin: 0 auto; }
/* La lueur de l'en-tete se prolonge sur le bandeau : c'est le meme lever de soleil, et
   l'accueil est le seul ecran assez vide pour la laisser respirer. Elle deborde de la
   colonne centrale (`-30px` de chaque cote, la valeur du padding de `section#vue`) pour
   que la lumiere vienne du bord de la fenetre et non d'un rectangle qui s'arrete. */
.accueil-hero { position: relative; padding: 52px 0 30px; text-align: center; }
.accueil-hero::before {
  content: ''; position: absolute; top: -40px; left: -30px; right: -30px; bottom: 0;
  background: var(--lueur); pointer-events: none;
}
.accueil-hero > * { position: relative; }
.accueil-hero h2 { font-size: 38px; font-weight: 700; letter-spacing: -.9px; margin-bottom: 12px; }
/* Le nom de la guilde porte le degrade dans le titre, comme dans la marque. */
.accueil-hero h2 .eclat {
  background: var(--degrade); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.accueil-hero .accroche {
  color: var(--texte-doux); font-size: 15px; margin: 0 auto; max-width: 62ch; line-height: 1.6;
}
/* La signature de la guilde, au-dessus du titre. C'est la seule phrase du site qui dise
   d'ou il vient, et elle est a l'endroit ou on la lit sans la chercher. */
.signature {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  padding: 5px 14px; border-radius: 99px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--or); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  background: color-mix(in srgb, var(--or) 10%, transparent);
  transition: border-color var(--transition), background var(--transition);
}
.signature:hover {
  border-color: var(--or); background: color-mix(in srgb, var(--or) 18%, transparent);
  text-decoration: none;
}
.signature svg { width: 13px; height: 13px; flex: none; }
.accueil .search { max-width: 620px; margin: 26px auto 0; flex: none; }
.accueil .search input { padding: 13px 20px; font-size: 15px; }

/* Six entrees : trois par rangee. En les laissant se repartir librement, la derniere
   rangee restait a moitie vide et la grille avait l'air interrompue. */
.accueil-portes {
  display: grid; gap: 14px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
}
.porte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 17px 18px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  color: var(--texte); font: inherit;
  transition: border-color var(--transition), background var(--transition),
    transform var(--transition), box-shadow var(--transition);
}
/* Le trait de degrade s'allume en tete de carte au survol. Il est toujours present et
   seule son opacite bouge : anime sur la largeur ou la hauteur, il aurait fait travailler
   la mise en page a chaque passage de souris. */
.porte::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--degrade); opacity: 0; transition: opacity var(--transition);
}
.porte:hover, .porte:focus-visible {
  border-color: var(--or-sombre); background: var(--surface-2); transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--or) 12%, transparent);
}
.porte:hover::after, .porte:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:hover { transform: none; } }

/* L'icone et le nom de l'ecran vise, sur une meme ligne. Le mot seul suffisait a dire ou
   la carte mene, mais six cartes de texte pur se parcourent en lisant les six : une forme
   se reconnait avant d'etre lue, ce qui est tout l'interet d'une porte. */
.porte-haut { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.porte-icone {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: var(--or);
  background: color-mix(in srgb, var(--or) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
}
.porte-icone svg { width: 16px; height: 16px; }
/* Un rappel de l'ecran vise : c'est le nom qu'on retrouvera dans la barre de navigation. */
.porte-signe {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--or);
}
.porte-titre { font-family: var(--titre); font-size: 15px; font-weight: 600; }
.porte-quoi { color: var(--texte-doux); font-size: 12.5px; line-height: 1.5; }

.accueil-bas {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .accueil-bas { grid-template-columns: minmax(0, 1fr); } }
.encart {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px;
}
.encart-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-faible); font-weight: 600; margin-bottom: 12px;
}
/* La volumetrie avait quitte l'en-tete, ou elle occupait tous les jours une place qu'on
   ne lit qu'une fois. Ici elle dit ce que couvre la base, ce qui est exactement la
   question d'une premiere visite. */
.volumetrie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.volumetrie div { display: flex; flex-direction: column; gap: 1px; }
/* Les grands nombres portent le degrade : c'est ce que l'accueil a de plus concret a
   montrer, et cela donne a l'encart le seul point de couleur dont il a besoin. */
.volumetrie b {
  font-family: var(--titre); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.volumetrie span { font-size: 11.5px; color: var(--texte-faible); }
.accueil-source { margin: 16px 0 0; font-size: 11.5px; color: var(--texte-faible); line-height: 1.5; }

/* ============================ catalogues ============================ */
/* Donjons, Zones et Classes ouvraient sur un ecran vide, toute leur navigation etant
   enfermee dans la colonne de gauche — qui sert ailleurs aux filtres. Le catalogue
   remet les entites au centre et rend la colonne a son seul role : filtrer. */
.cartes {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.cartes.serre { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.carte {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  padding: 13px 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  color: var(--texte); font: inherit; min-width: 0;
  transition: border-color var(--transition), background var(--transition);
}
.carte:hover { border-color: var(--or-sombre); background: var(--surface-2); }
.carte-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.carte-nom { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
/* Un donjon a parfois quatre boss (les Gelees Royales) : sans borne, sa carte fait le
   double des autres et la grille devient un escalier. */
.carte-meta {
  color: var(--texte-faible); font-size: 11.5px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-via { color: var(--or); font-size: 11px; }
.carte .symbole-grand { width: 34px; height: 34px; }
/* Le portrait du boss sert de picto au donjon : 187 cartes de texte se ressemblent toutes,
   une silhouette se reconnait sans lire. Le seul donjon qui reste nu est celui dont aucun
   monstre n'est marque boss — mieux vaut un trou qu'une vignette prise au hasard. */
.carte .picto-boss {
  width: 40px; height: 40px; flex: none; border-radius: var(--rayon-s);
  background: var(--surface-2); object-fit: contain; padding: 2px;
}
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

/* Retour au catalogue depuis une fiche : sans lui, la seule sortie etait l'onglet
   lui-meme, qui redessine tout. */
.retour {
  background: none; border: 1px solid var(--bord); color: var(--texte-doux);
  padding: 4px 12px; border-radius: 99px; font-size: 12px; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.retour:hover { border-color: var(--bord-clair); color: var(--texte); }

/* --- arbre de craft --- */
ul.craft { list-style: none; margin: 4px 0 0; padding-left: 18px; }
ul.craft.racine { padding-left: 0; }
ul.craft li { position: relative; padding: 2px 0; }
/* Filets de parente : sans eux, la profondeur se lit mal des trois niveaux. */
ul.craft:not(.racine) > li::before {
  content: ''; position: absolute; left: -11px; top: 0; bottom: 0;
  border-left: 1px solid var(--bord);
}
ul.craft:not(.racine) > li::after {
  content: ''; position: absolute; left: -11px; top: 14px; width: 8px;
  border-top: 1px solid var(--bord);
}
ul.craft:not(.racine) > li:last-child::before { bottom: auto; height: 14px; }
.craft-ligne { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.craft-qte {
  color: var(--texte-faible); font-variant-numeric: tabular-nums;
  min-width: 44px; text-align: right; font-size: 12.5px;
}
.craft-metier {
  font-size: 11px; color: var(--or); border: 1px solid var(--or-sombre);
  border-radius: 99px; padding: 0 7px;
}
.butins .condition {
  color: var(--texte-faible); font-size: 11px; margin-left: auto; margin-right: 10px;
  white-space: nowrap; opacity: .85;
}

/* --- fiches de sort de classe --- */
.sort-carte {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px; margin-top: 14px;
}
.sort-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sort-tete h3 { font-size: 16px; }
.sort-desc { color: var(--texte-doux); margin: 6px 0 0; font-size: 13.5px; }
.sort-carte table.mini { margin-top: 12px; font-size: 12.5px; }
.sort-carte table.mini thead th { position: static; padding: 0 9px 6px; font-size: 10px; }
.sort-carte table.mini tbody td { padding: 6px 9px; vertical-align: top; }
/* Grise ce qui ne bouge pas d'un palier a l'autre : l'oeil accroche l'evolution. */
.sort-carte td.inchange { color: var(--texte-faible); opacity: .5; }
.sort-effets { list-style: none; margin: 0; padding: 0; }
.sort-effets li { padding: 1px 0; color: var(--texte-doux); }

/* --- classes : symboles --- */
.symbole { width: 22px; height: 22px; flex: none; object-fit: contain; opacity: .9; }
.symbole-grand { width: 40px; height: 40px; object-fit: contain; }
.liste button > .symbole + .dj-nom { flex: 1; }

/* --- carte de sort --- */
.sort-carte { padding: 16px 18px 14px; }
.sort-tete { display: flex; align-items: flex-start; gap: 14px; }
.icone-sort {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  background: var(--surface-2); border-radius: var(--rayon-s); padding: 2px;
}
.sort-titre { min-width: 0; }
.sort-l1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sort-rang { color: var(--texte-faible); font-size: 11.5px; }
.sort-desc { color: var(--texte-doux); margin: 4px 0 0; font-size: 13.5px; }

/* Pastilles de chiffres : alignees d'une carte a l'autre, donc comparables d'un coup. */
.sort-stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0 60px; }
.stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: 99px; padding: 3px 11px; font-size: 12px; color: var(--texte-doux);
}
.stat strong { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.pa strong { color: var(--eau); }
.stat.po strong { color: var(--air); }
.stat.plat { color: var(--texte-faible); }

.sort-carte > .sort-effets { margin: 12px 0 0 60px; }
.sort-effets { list-style: none; padding: 0; }
.sort-effets li { padding: 1px 0; color: var(--texte-doux); font-size: 13px; }
.sort-carte > .sort-effets li::before { content: '▪ '; color: var(--texte-faible); }
.sort-carte > .sort-critique { margin-top: 4px; }
.sort-carte > .sort-critique li::before { content: 'CC '; color: var(--feu); font-weight: 600; font-size: 11px; }
.sort-effets li.critique-ligne { color: var(--texte-faible); }

/* --- rangs inferieurs replies --- */
details.rangs { margin: 14px 0 0 60px; }
details.rangs summary {
  cursor: pointer; color: var(--texte-faible); font-size: 12px;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 0; user-select: none;
}
details.rangs summary::-webkit-details-marker { display: none; }
details.rangs summary::before { content: '▸'; font-size: 10px; }
details.rangs[open] summary::before { content: '▾'; }
details.rangs summary:hover { color: var(--texte); }
details.rangs table.mini { margin-top: 8px; font-size: 12.5px; }
details.rangs table.mini thead th { position: static; padding: 0 9px 6px; font-size: 10px; }
details.rangs table.mini tbody td { padding: 6px 9px; vertical-align: top; }
tr.rang-actuel { background: color-mix(in srgb, var(--or) 7%, transparent); }
tr.rang-actuel td:first-child { color: var(--or); }

@media (max-width: 900px) {
  .sort-stats, .sort-carte > .sort-effets, details.rangs { margin-left: 0; }
}

/* --- sorts de monstre : meme lecture que les sorts de classe --- */
.sort-ligne { display: flex; gap: 11px; align-items: flex-start; }
.icone-sort.petite { width: 34px; height: 34px; }
.sort-corps { min-width: 0; flex: 1; }
.sort-stats.compact { margin: 5px 0 0; gap: 5px; }
.sort-stats.compact .stat { padding: 2px 9px; font-size: 11.5px; }
.stat.plat.or { color: var(--or); border-color: var(--or-sombre); }
.sort .sort-effets { margin: 6px 0 0; }

/* --- idoles --- */
details.idoles { margin: 22px 0 0; }
.idoles-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.idoles-liste li {
  display: flex; align-items: baseline; gap: 12px; padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 45%, transparent);
}
.idole-bonus {
  color: var(--vert); font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 54px; text-align: right; flex: none;
}
.idole-desc { color: var(--texte-doux); font-size: 13px; }
.idole-cause { color: var(--texte-faible); font-size: 11.5px; margin-left: auto; flex: none; }
.idoles-liste.bloquees li { opacity: .55; }
.idoles-liste.bloquees .idole-bonus { color: var(--texte-faible); }

td.valeur-effet { color: var(--vert); font-weight: 600; }

/* --- fraicheur des guides --- */
.fraicheur {
  font-size: 10px; padding: 1px 7px; border-radius: 99px; margin-left: 8px;
  border: 1px solid; letter-spacing: .3px; white-space: nowrap;
}
.fraicheur.ancienne { color: var(--or); border-color: var(--or-sombre); }
.fraicheur.inconnue { color: var(--texte-faible); border-color: var(--bord-clair); }
.condition-objet { margin: 14px 0 0; }

/* --- selection de combat --- */
.cell-monstre { display: flex; align-items: center; gap: 10px; }
.case-combat-wrap { display: flex; align-items: center; flex: none; cursor: pointer; }
.case-combat { accent-color: var(--or); cursor: pointer; margin: 0; }
.cell-monstre > button { flex: 1; min-width: 0; }

/* Deux selections peuvent coexister (monstres a combattre, objets a comparer) : une pilule
   par selection, empilees. */
/* Les 22 px se comptent depuis le haut du pied, pas depuis le bas de la fenetre : sinon la
   pilule chevauchait le pied, qui est fixe au meme endroit. */
#panier {
  position: fixed; bottom: calc(22px + var(--pied-h)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 25;
}
.panier-ligne {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--bord-clair);
  border-radius: 99px; padding: 8px 10px 8px 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  font-size: 13px; color: var(--texte-doux);
}
.panier-n { color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; }
.panier-voir {
  background: var(--or); border: 0; color: var(--fond); font-weight: 600;
  padding: 6px 16px; border-radius: 99px; cursor: pointer; font-size: 12.5px;
}
.panier-voir:hover { filter: brightness(1.08); }
.panier-vider {
  background: none; border: 0; color: var(--texte-faible); cursor: pointer;
  font-size: 14px; padding: 0 6px;
}
.panier-vider:hover { color: var(--texte); }

/* --- comparaison d'objets --- */
/* Six colonnes tiennent rarement sur un portable : le tableau defile dans son propre bloc
   plutot que de pousser la page entiere. */
.table-large { overflow-x: auto; }
/* Un bloc a defilement horizontal devient le conteneur de reference des en-tetes collants :
   ils se figent alors au milieu du tableau au lieu de suivre la page. Ici, en-tetes fixes. */
.table-large thead th { position: static; }
table.comparaison { min-width: 480px; }
table.comparaison th.gauche { text-align: left; color: var(--texte-doux); font-weight: 500; }
table.comparaison tbody tr:hover { background: var(--surface-2); }
/* Sans largeur plancher, une colonne se retracte a la largeur d'un caractere et la
   condition d'equipement s'ecrit verticalement, une lettre par ligne. */
table.comparaison thead th { min-width: 134px; vertical-align: bottom; }
.comp-entete { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 6px; }
.comp-entete .icone-objet { width: 34px; height: 34px; }
.comp-meta { color: var(--texte-faible); font-size: 10.5px; font-weight: 400; }
.comp-meta.or { color: var(--or-sombre); }
.comp-cond {
  align-self: stretch; text-align: center; text-transform: none;
  color: var(--rouge); font-size: 10px; font-weight: 400;
  white-space: normal; line-height: 1.3;
}
.comp-val { font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.comp-vide { color: var(--bord-clair); }
/* La meilleure valeur de la ligne : c'est tout ce qu'on vient chercher ici. */
.comp-val.gagnant {
  color: var(--vert); font-weight: 700;
  background: color-mix(in srgb, var(--vert) 12%, transparent);
}
.comp-val.malus { color: var(--rouge); }

/* --- synthese de combat --- */
.synthese {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px; margin: 16px 0 4px;
}
.synthese .sort-stats { margin: 0 0 12px; }
.synthese .conseil { margin: 0; }
.synthese h4 {
  margin: 16px 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texte-faible); font-weight: 600;
}
.mecaniques { list-style: none; margin: 0; padding: 0; }
.mecaniques li {
  display: flex; gap: 14px; padding: 4px 0; font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--bord) 45%, transparent);
}
.mecaniques li:last-child { border-bottom: 0; }
.meca-quoi { color: var(--or); flex: none; min-width: 150px; }
.meca-qui { color: var(--texte-doux); }

/* Les mecaniques punitives accrochent avant les autres. */
.meca-quoi.grave { color: var(--rouge); font-weight: 600; }
.meca-quoi.degats {
  color: var(--rouge); font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; min-width: 90px;
}

/* Les memes mecaniques, mais pour un seul monstre : une ligne de pastilles en tete de sa
   fiche, avant le detail des sorts. */
.meca-chips {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.meca-chips-titre {
  color: var(--texte-faible); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  margin-right: 4px;
}
.meca-chip {
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  color: var(--or); border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: color-mix(in srgb, var(--or) 10%, transparent);
}
.meca-chip.grave {
  color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 45%, transparent);
  background: color-mix(in srgb, var(--rouge) 12%, transparent); font-weight: 600;
}

/* --- indicateurs d'en-tete (etat des serveurs, almanax) --- */
/* Les deux indicateurs sont groupes dans .vivant, qui porte le renvoi a droite : chacun
   d'eux n'a plus qu'a se positionner pour ancrer son menu. */
.statut { position: relative; }
.statut-bouton {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 4px 6px; border-radius: 6px;
  color: var(--texte-faible); font-size: 12px; font-family: inherit;
  white-space: nowrap; cursor: pointer;
}
.statut-bouton:hover { background: var(--surface-2); color: var(--texte-doux); }
/* Pas d'`opacity` ici : elle ramenait le chevron a 3,37:1 sur son fond. La nuance
   voulue se rend par la couleur, qui elle reste mesurable. */
.statut-fleche { font-size: 9px; color: var(--texte-doux); }
.statut-bouton[aria-expanded="true"] { background: var(--surface-2); color: var(--texte-doux); }
.statut-bouton[aria-expanded="true"] .statut-fleche { transform: rotate(180deg); }
.statut-point {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--vert); box-shadow: 0 0 6px color-mix(in srgb, var(--vert) 60%, transparent);
}
.statut.alerte .statut-bouton { color: var(--or); }
.statut.alerte .statut-bouton > .statut-point {
  background: var(--rouge); box-shadow: 0 0 6px color-mix(in srgb, var(--rouge) 60%, transparent);
}

/* Le detail se deplie en menu, ancre a droite pour ne jamais deborder de la fenetre. */
.statut-detail {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 270px; max-width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--bord-clair); border-radius: 10px;
  padding: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  font-size: 12px; white-space: normal;
}
.statut-titre {
  color: var(--texte-faible); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  margin: 4px 2px 6px;
}
.statut-liste + .statut-titre { margin-top: 12px; }
.statut-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 5px; color: var(--texte-doux);
}
.statut-ligne:hover { background: var(--surface-2); }
.statut-nom { flex: 1; color: var(--texte); }
.statut-etat { color: var(--texte-faible); font-size: 11px; }
.statut-ligne.ko .statut-point {
  background: var(--rouge); box-shadow: 0 0 6px color-mix(in srgb, var(--rouge) 60%, transparent);
}
.statut-ligne.ko .statut-etat { color: var(--rouge); }
.statut-incident {
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--rouge) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rouge) 35%, transparent);
  border-radius: 7px; padding: 8px 9px; margin-bottom: 10px; color: var(--texte);
}
.statut-depuis { color: var(--texte-faible); font-size: 11px; }
.statut-pied {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bord);
  color: var(--texte-faible); font-size: 11px;
}

/* --- almanax --- */
.alma-soleil { color: var(--or); font-size: 13px; }
/* Le libelle du bonus peut etre long ("Apparition des ressources") : il se coupe plutot
   que de pousser la barre de recherche. */
.alma-bonus { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alma-jour {
  background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: 8px; padding: 10px 11px; margin-bottom: 4px;
}
.alma-jour > .statut-titre { margin: 0 0 6px; }
.alma-jour strong { color: var(--or); font-size: 13px; }
.alma-desc { margin: 5px 0 0; color: var(--texte-doux); line-height: 1.45; }
.alma-offrande { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.alma-offrande .icone-objet { width: 24px; height: 24px; }
.alma-quantite { color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.alma-kamas { margin-top: 5px; color: var(--vert); font-size: 11.5px; }
.alma-date {
  color: var(--texte-faible); font-size: 11px; min-width: 74px; flex: none;
}

/* --- resultats de recherche de sorts par mecanique --- */
.groupe-classe {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--bord);
  font-size: 15px;
}
.groupe-classe .lien-objet { font-size: 15px; font-weight: 600; }
.groupe-n { color: var(--texte-faible); font-size: 11.5px; font-weight: 400; }

/* --- butin agrege d'un donjon --- */
details.butin-donjon {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 12px 16px; margin: 16px 0;
}
details.butin-donjon summary {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  list-style: none; color: var(--texte-doux);
}
details.butin-donjon summary::-webkit-details-marker { display: none; }
details.butin-donjon summary::before { content: '▸'; font-size: 10px; color: var(--texte-faible); }
details.butin-donjon[open] summary::before { content: '▾'; }
details.butin-donjon summary strong { color: var(--texte); font-size: 14px; }
table.butin-table { margin-top: 12px; }
table.butin-table td.taux { text-align: right; color: var(--vert); font-weight: 600; }
/* Un butin conditionnel n'est pas farmable a volonte : il recule visuellement. */
table.butin-table tr.conditionnel td { color: var(--texte-faible); }
table.butin-table tr.conditionnel td.taux { color: var(--texte-faible); font-weight: 400; }

/* --- liste de courses --- */
.section-titre {
  margin: 26px 0 10px; font-size: 13px; color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .06em;
}
.quantites { margin-top: 16px; }
.quantite-ligne {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.quantite-nom { flex: 1; font-size: 12.5px; color: var(--texte-doux); }
.quantite-ligne input { width: 62px; padding: 5px 8px; border-radius: var(--rayon-s);
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte); font: inherit; }
table.itineraire td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
table.itineraire .groupe-n { display: block; margin-top: 2px; }
/* Chaque ligne de la liste devient une puce : on lit un lieu comme une liste de courses. */
.course-puce {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: 99px; padding: 2px 10px; margin: 0 6px 6px 0; font-size: 12px;
}
.course-q { color: var(--or); font-weight: 600; font-variant-numeric: tabular-nums; }
td.course-qte { text-align: right; color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; }
table.courses td.taux { text-align: right; color: var(--vert); font-weight: 600; }
/* Les en-tetes suivent l'alignement de leur colonne : le libelle d'une colonne de texte a
   gauche ne doit pas flotter a droite, au-dessus du vide. */
table.courses thead th:nth-child(2), table.courses thead th:nth-child(4),
table.itineraire thead th:nth-child(2), table.butin-table thead th:nth-child(3) { text-align: left; }
.quantite-nom { display: flex; flex-direction: column; gap: 1px; }
.quantite-metier { color: var(--texte-faible); font-size: 10.5px; }

/* --- recompenses de succes, titres et ornements --- */
.recompense {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 8px 3px 0; font-size: 12px;
}
.recompense.titre { color: var(--or); }
.recompense.ornement { color: var(--air); }
.icone-objet.mini { width: 18px; height: 18px; }
table.succes thead th:nth-child(2), table.succes thead th:nth-child(4),
table.succes thead th:nth-child(5) { text-align: left; }
.comp-sens {
  display: block; color: var(--texte-faible); font-size: 10px;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* --- objectifs de quete et de succes --- */
ul.objectifs { list-style: none; margin: 6px 0 0; padding: 0; }
ul.objectifs li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 3px 0 3px 14px; position: relative;
  color: var(--texte-doux); font-size: 12.5px; line-height: 1.45;
}
/* Une puce discrete plutot qu'un point de liste : ce sont des consignes, pas un sommaire. */
ul.objectifs li::before {
  content: '›'; position: absolute; left: 0; color: var(--texte-faible);
}
/* Une coordonnee se clique pour copier la commande de voyage : elle doit donc se
   presenter comme un bouton, pas comme une etiquette. */
.coords {
  color: var(--or); font-size: 11px; font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
  background: none; font-family: inherit; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.coords:hover { background: color-mix(in srgb, var(--or) 14%, transparent); border-color: var(--or); }
.coords.copie { color: var(--vert); border-color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.coords.rate { color: var(--rouge); border-color: var(--rouge); }
/* Le critere d'un succes n'est pas cliquable : meme discretion, aucune promesse de clic. */
.critere {
  color: var(--texte-faible); font-size: 11px;
  border: 1px solid var(--bord); border-radius: 4px; padding: 0 5px;
}

/* ============================ fiches recap ============================ */
/* Une fiche se reconnait a son allure : la vignette est la fiche elle-meme, en reduction
   dans un cadre inerte. Les fiches sont sur fond clair, donc l'apercu garde leur papier
   plutot que le fond sombre de l'interface — sinon on ne reconnait pas ce qu'on ouvre. */
.recaps {
  display: grid; gap: 18px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.recap {
  position: relative; background: var(--surface); overflow: hidden;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  transition: border-color var(--transition), transform var(--transition);
}
.recap:hover { border-color: var(--or-sombre); transform: translateY(-2px); }
.recap:has(.couvre:focus-visible) { border-color: var(--or); }

.apercu {
  position: relative; height: 172px; overflow: hidden;
  background: #eef1ea; border-bottom: 1px solid var(--bord);
}
.apercu iframe {
  position: absolute; top: 0; left: 0; width: 1180px; height: 820px; border: 0;
  transform: scale(.235); transform-origin: 0 0; pointer-events: none;
}
/* Le bouton couvre la carte entiere : l'apercu etant un cadre, il ne peut pas vivre
   dans un bouton, et cliquer "a cote du titre" doit quand meme ouvrir la fiche. */
.couvre { position: absolute; inset: 0; background: none; border: 0; cursor: pointer; }

.recap-corps { padding: 12px 14px 13px; }
.recap-corps h3 { font-size: 14.5px; }
.recap-accroche {
  margin: 5px 0 0; font-size: 12.5px; color: var(--texte-doux); line-height: 1.45;
}
.recap-meta {
  margin: 9px 0 0; display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--texte-faible);
}
.tag-interactif {
  color: var(--vert); border: 1px solid color-mix(in srgb, var(--vert) 40%, transparent);
  border-radius: 99px; padding: 1px 7px; font-size: 11px;
}
/* ---- lecture plein ecran ----
   Une fiche recap est dessinee pour tenir sur un ecran entier sans defiler. Partage avec
   l'en-tete, la colonne de filtres et le titre de la vue, il ne lui en restait que la
   moitie : on la lisait en reduction, et il fallait encore un bouton pour la voir en
   grand. Pendant la lecture, l'interface se retire donc entierement ; seule une barre
   fine reste, avec les deux sorties. Elle revient avec la galerie.
   Le pied s'en va avec le reste : une fiche ouverte en pleine page est un document, pas une
   page du site, et elle cite deja sa source en bas. La `.lecture` fait `100dvh` — le pied
   lui aurait pris ses 28 derniers pixels en plus de la barre. */
body.lecture-fiche header,
body.lecture-fiche #pied,
body.lecture-fiche #panier,
body.lecture-fiche #bascule-filtres,
body.lecture-fiche main > aside { display: none; }
body.lecture-fiche main { grid-template-columns: minmax(0, 1fr); }
body.lecture-fiche section#vue { padding: 0; }
body.lecture-fiche { padding-bottom: 0; }

.lecture { display: flex; flex-direction: column; height: 100dvh; }
.lecture-barre {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 7px 14px; background: var(--surface); border-bottom: 1px solid var(--bord);
}
.lecture-barre .retour { margin: 0; }
/* Le titre a perdu son `h2` avec le reste de l'interface : il se rappelle ici, en second
   plan, parce qu'une fiche ouverte depuis un monstre n'a pas forcement dit son nom. */
.lecture-titre {
  flex: 1; min-width: 0; font-size: 13px; color: var(--texte-doux);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le cadre prend tout ce qui reste. `min-height: 0` : sans lui un element flex refuse de
   descendre sous la hauteur de son contenu, et la fiche deborderait du viewport. */
.fiche-plein {
  width: 100%; flex: 1; min-height: 0; border: 0; background: #eef1ea;
}

/* Sur ecran etroit, la barre de filtres collante occupe la premiere bande sous
   l en-tete : les en-tetes de tableau se collent en dessous, sinon ils passent derriere. */