/* =========================================================
   NEKO — graphiques de la page /token
   Meme DA que la landing : encre / papier / ambre. Le rouge reste
   interdit (il ne signale QUE la dette), le vert aussi (paye).

   Jetons de graphique, valides contre la surface encre :
     --ch-mark  #f0c48a  12.30:1  (marques, minimum requis 3:1)
     --ch-axis  .55 papier 5.70:1 (texte d'axe)
     --ch-grid  .07 papier 1.19:1 (grille, volontairement recessive)
   ========================================================= */

:root{
  --ch-mark: var(--warm);
  --ch-axis: rgba(244,242,237,.55);
  --ch-grid: rgba(244,242,237,.07);
  --ch-surf: var(--ink);
}

/* =========================================================
   Graphique 01 — barres horizontales
   Une seule teinte : la longueur porte la grandeur, le libelle porte
   l'identite. Bout de barre arrondi 4px cote donnee, carre a la ligne
   de base. Grille en filet plein — jamais pointille.
   ========================================================= */
.ch{ margin:0; }

.ch__plot{ position:relative; display:flex; flex-direction:column; gap:6px; }

.ch__grid{
  position:absolute; inset:0 0 0 var(--lab-w, 200px);
  display:flex; justify-content:space-between;
  pointer-events:none;
}
.ch__grid i{ width:1px; background:var(--ch-grid); }

.abar{
  position:relative;
  display:grid;
  grid-template-columns:var(--lab-w, 200px) 1fr;
  align-items:center;
  gap:0 18px;
  padding:12px 0;
  border-radius:8px;
  outline:none;
  transition:background .25s var(--ease);
}
.abar:hover,
.abar:focus-visible{ background:rgba(244,242,237,.035); }
.abar:focus-visible{ box-shadow:0 0 0 1px rgba(240,196,138,.5); }

.abar__label{
  font-size:14px; font-weight:500; color:var(--paper);
  line-height:1.25;
}

.abar__track{ position:relative; display:block; height:20px; }

.abar__fill{
  position:absolute; left:0; top:0;
  display:block; height:100%;
  width:var(--w);
  background:var(--ch-mark);
  border-radius:0 4px 4px 0;   /* carre a la base, arrondi cote donnee */
  transform-origin:left center;
}
.abar__val{
  position:absolute; top:50%; left:var(--w);
  transform:translateY(-50%);
  margin-left:12px;
  font-family:var(--mono); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--paper);          /* le texte ne porte jamais la couleur de la donnee */
  white-space:nowrap;
}
.abar__lock{
  grid-column:1 / -1;
  margin-top:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-mute);
}
@media (min-width:760px){
  .abar__lock{ grid-column:2; margin-top:4px; }
}

.ch__axis{
  display:flex; justify-content:space-between;
  margin-left:var(--lab-w, 200px);
  padding-top:14px;
  border-top:1px solid var(--ch-grid);
  font-family:var(--mono); font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--ch-axis);
}

/* infobulle : elle complete, elle ne conditionne jamais la lecture —
   chaque valeur est deja dans la barre, l'etiquette et le tableau */
.ch__tip{
  position:absolute; z-index:40;
  max-width:300px; padding:12px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--ink-soft);
  box-shadow:0 20px 50px -16px rgba(0,0,0,.9);
  font-size:13px; line-height:1.45; color:var(--paper-dim);
  pointer-events:none;
}
.ch__tip b{
  display:block; margin-bottom:4px;
  font-family:var(--mono); font-size:15px; font-weight:700;
  color:var(--paper);
}

/* --- vue tableau --- */
.ch__tbl{ margin-top:clamp(28px,5vh,48px); }
.ch__tbl summary{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-mute);
  cursor:pointer; list-style:none;
}
.ch__tbl summary::-webkit-details-marker{ display:none; }
.ch__tbl summary:hover{ color:var(--paper); border-color:rgba(244,242,237,.26); }
.ch__tbl[open] summary{ margin-bottom:20px; }

.ch__tbl table{ width:100%; border-collapse:collapse; font-size:14px; }
.ch__tbl caption{ text-align:left; padding-bottom:12px; font-size:12px; color:var(--paper-mute); }
.ch__tbl th, .ch__tbl td{
  padding:11px 14px; text-align:left;
  border-bottom:1px solid var(--line);
}
.ch__tbl thead th{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute);
}
.ch__tbl tbody th{ font-weight:500; color:var(--paper); }
.ch__tbl td{ color:var(--paper-dim); font-variant-numeric:tabular-nums; }
.ch__tbl tfoot th, .ch__tbl tfoot td{ color:var(--paper); font-weight:600; border-bottom:0; }

/* =========================================================
   Graphique 02 — petits multiples
   Quatre cellules, meme axe, meme teinte, une serie chacune :
   donc pas de boite de legende, le titre de la cellule suffit.
   ========================================================= */
.sm{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(min(230px,100%), 1fr));
  background:var(--line);
  border:1px solid var(--line); border-radius:16px;
  overflow:hidden;
}
.sm__cell{
  margin:0; padding:24px;
  background:var(--ink);
  transition:background .3s var(--ease);
}
.sm__cell:hover{ background:var(--ink-soft); }
.sm__cell h3{
  margin:0 0 6px;
  font-size:14px; font-weight:600; color:var(--paper);
}
.sm__val{
  margin:0 0 18px;
  font-family:var(--mono); font-size:19px; font-weight:500;
  color:var(--paper); letter-spacing:-.01em;
}
.sm__val span{
  font-size:11px; font-weight:400; letter-spacing:.06em;
  color:var(--paper-mute);
}
.sm__svg{ width:100%; height:auto; overflow:visible; }

.sm__rule{ stroke:var(--ch-grid); stroke-width:1; }
.sm__vr{ stroke:var(--ch-grid); stroke-width:1; }
.sm__line{
  fill:none; stroke:var(--ch-mark); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.sm__area{ fill:var(--ch-mark); opacity:.10; }
.sm__dot{ fill:var(--ch-mark); stroke:var(--ch-surf); stroke-width:2; }

/* la serie communaute ne se termine pas : pas de point final, elle sort
   du cadre — c'est l'absence de marqueur qui dit « ca continue » */
.sm__note{
  margin:14px 0 0;
  font-size:12px; line-height:1.45; color:var(--paper-mute);
}

/* chaque facette porte son propre axe 0-36 : les quatre partagent la
   meme echelle mais pas la meme largeur de trace, donc pas de bandeau
   commun — il ne tomberait en face d'aucune courbe */
.sm__ax{
  display:flex; justify-content:space-between;
  margin:8px 0 0; padding-top:7px;
  border-top:1px solid var(--ch-grid);
  font-family:var(--mono); font-size:10px;
  font-variant-numeric:tabular-nums; color:var(--ch-axis);
}
.sm__unit{
  margin:14px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-mute);
}

/* =========================================================
   03 — le fee
   Un seul chiffre-heros sur la page, et c'est celui-ci.
   Chiffres proportionnels : tabular-nums fait respirer 1.25 de travers
   a cette taille.
   ========================================================= */
.tsec--fee{ padding-bottom:clamp(80px,14vh,180px); }

.fee__hero{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:16px;
  margin:0 0 clamp(36px,6vh,60px);
}
.fee__num{
  font-size:clamp(64px,12vw,148px); line-height:.85;
  font-weight:700; letter-spacing:-.045em;
  color:var(--warm);
}
.fee__unit{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute);
}

.fee__grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(250px,100%), 1fr));
}
.fee__card{
  padding:28px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(160deg, rgba(244,242,237,.03), transparent 70%);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.fee__card:hover{
  border-color:rgba(244,242,237,.2);
  background:linear-gradient(160deg, rgba(244,242,237,.06), transparent 70%);
}
.fee__k{
  margin:0 0 14px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--warm);
}
.fee__t{ margin:0 0 10px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.fee__d{ margin:0; font-size:14px; line-height:1.55; color:var(--paper-dim); }

.fee__card--burn{ border-color:rgba(240,196,138,.22); }

/* ---------- petits ecrans ---------- */
@media (max-width:759px){
  .ch__grid{ inset:0; }
  .ch__axis{ margin-left:0; }
  .abar{ grid-template-columns:1fr; gap:10px 0; }
  .abar__track{ height:16px; }
}


.ch.js-reveal .abar__fill{ transform:scaleX(0); }