:root {
  --bg: #070b10;
  --panel: #0c131b;
  --panel2: #0a1017;
  --line: rgba(46, 230, 246, 0.14);
  --line-soft: rgba(255, 255, 255, 0.05);
  --cyan: #2ee6f6;
  --cyan-dim: #178a96;
  --amber: #f5b13d;
  --violet: #b18cff;
  --txt: #cad7e0;
  --muted: #5f7280;
  --muted2: #3f4f5a;
  --up: #4fe3a0;
  --down: #ff6b81;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Fondu commun a tout ce qui defile (bandeau, barre d'onglets, menus deroulants) : 18 px,
     comme le ruban de RIZE Activity, et il part juste contre la pastille ou le signe voisin.
     Les scripts relisent cette valeur, rien n'est a recopier ailleurs. */
  --fade: 18px;
  /* Marge laterale d'un onglet : la piste n'ajoute que ce qui manque pour degager le fondu. */
  --tab-pad-x: 3px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background:
    radial-gradient(
      1200px 600px at 80% -10%,
      rgba(46, 230, 246, 0.06),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at -10% 110%,
      rgba(177, 140, 255, 0.05),
      transparent 60%
    ),
    var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 18px;
  line-height: 1.45;
}
.wrap {
  max-width: 1920px;
  margin: 0 auto;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 12px;
  /* Le bas est plus court que le haut : le bandeau a deux etages (voir .status) reprend les
     six pixels manquants, et la barre garde la meme hauteur qu'avec une seule ligne. */
  padding: 14px 16px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
}
.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.012) 3px 4px
  );
}
.brand {
  flex: 1 1 230px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-logo {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.brand-text {
  min-width: 0;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--cyan-dim);
  text-transform: uppercase;
}
.title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  color: #eaf6f9;
}
.title b {
  color: var(--cyan);
}
.bar-ctrl {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
}
/* Le bandeau reste en chasse fixe, et ce n'est pas un choix esthetique : il contient
     une horloge a la seconde et deux compteurs qui grimpent en continu. En chasse
     proportionnelle, un 1 est plus etroit qu'un 8, donc la largeur du texte changerait a
     chaque mise a jour et la piste tressauterait sans arret. La chasse fixe garantit une
     largeur constante quels que soient les chiffres affiches.

     La lisibilite est donc gagnee autrement : interlettrage resserre de .12em a .04em,
     ce qui rapproche les lettres d'un meme mot au lieu de les eparpiller, et graisse
     passee a 500.

     Deux etages dans la hauteur d'un seul. La ligne unique occupait 19 px, plus 12 px d'ecart
     au-dessus et 14 px de marge en dessous : 45 px en tout. Les deux etages font 14 + 3 + 14 =
     31 px ; la marge negative ramene l'ecart a 6 px et la barre garde 8 px en bas, soit 45 px,
     la barre ne grandit pas d'un pixel, sur ordinateur comme sur telephone. */
.status {
  flex: 1 1 100%;
  /* Sans min-width: 0, l'element prenait la largeur de sa piste (plus de 4 000 px), le fondu
     de droite du bandeau sortait de l'ecran et le texte butait net contre le bord. */
  min-width: 0;
  display: flex;
  align-items: center;
  /* 2 px entre les pastilles et la fenetre du texte : le fondu part contre elles. */
  gap: 2px;
  height: 31px;
  margin-top: -6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
/* Deux pastilles reliees par un trait, une par etage. La cyan (#dot) garde son role d'etat :
   AUTO en cyan qui bat, REFERENCE en ambre fixe. La violette marque l'etage des chiffres et bat
   toujours, en alternance avec la cyan (une seconde de decalage). */
.status-mark {
  flex: none;
  position: relative;
  width: 8px;
  height: 31px;
  /* Les pastilles sont a 11 px du bord bas de la barre (3 px dans la marque + 8 px de marge) :
     on les avance de 5 px pour qu'elles soient aussi a 11 px du bord gauche. Le texte suit, pour
     que le fondu commence juste apres la pastille et semble avaler le texte qui defile. Sous
     390 px la barre a d'autres marges, voir clarity.css. */
  margin-left: -5px;
}
.status-mark .dot {
  position: absolute;
  left: 0;
  top: 3px;
}
.status-mark .dot-figures {
  top: auto;
  bottom: 3px;
  --halo: rgba(177, 140, 255, 0.5);
  background: var(--violet);
  animation-delay: 1s;
}
.status-link {
  position: absolute;
  left: 3.5px;
  top: 11px;
  width: 1px;
  height: 9px;
  background: var(--line);
}
.dot {
  --halo: rgba(46, 230, 246, 0.5);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 var(--halo);
  animation: pulse 2s infinite;
  position: relative;
  top: 3px;
}
.dot.off {
  background: var(--amber);
  animation: none;
  box-shadow: none;
}
.dot-sm {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  vertical-align: middle;
  margin-bottom: 2px;
}
.dot-sm.off {
  background: var(--amber);
}
.dg-since-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.dg-grow-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.dg-grow-val {
  font-weight: 800;
  font-size: 16px;
}
.dg-since-track {
  height: 10px;
  border-radius: 6px;
  background: var(--panel2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.dg-since-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s;
}
.dg-since-fill.gdp {
  background: linear-gradient(90deg, #2ee6f6, #7fd8ff);
}
.dg-since-fill.debt {
  background: linear-gradient(90deg, #ff6b6b, #ff9f7f);
}
.dg-since-msg {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--halo);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.stamp {
  color: var(--muted);
}
/* Les deux pistes sont empilees dans une seule fenetre masquee : un fondu de 18 px (--fade) a
   gauche, partage par les deux etages, colle aux pastilles. contain isole la mise en page et le dessin du bandeau du
   reste de la page. Les pistes ne sont volontairement PAS mises sur une couche graphique a part
   (pas de will-change, translation 2D) : la piste des chiffres change de texte a chaque image,
   et une couche redessinee puis repositionnee a une fraction de pixel tressaute d'une image a
   l'autre. Redessinee en place, comme l'ancien bandeau, elle glisse sans a-coup ; seule la partie
   visible est peinte. */
.status-scroll {
  flex: 1;
  min-width: 0;
  height: 31px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  contain: layout paint;
  /* La fenetre deborde de la marge droite de la barre : le texte sort du cadre lui-meme, coupe
     net au bord, comme le bandeau d'origine. Sous 390 px la marge vaut 12 px, voir clarity.css. */
  margin-right: -16px;
  /* Fondu a gauche seulement, contre les pastilles. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}
.status-track {
  display: flex;
  width: max-content;
  height: 14px;
  line-height: 14px;
}
.status-seg {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 80px;
  /* Un demi-pixel plus haut : centre dans une zone de 13 px au lieu de 14, le texte remonte de
     0,5 px. Les pastilles tombaient pile au centre des capitales et des chiffres, donc un peu
     au-dessus du centre des minuscules, majoritaires sur les deux lignes ; ce demi-pixel les met
     au milieu de l'ensemble. Safari arrondit la ligne de base au pixel d'ecran (un pixel sur un
     ecran 2x), Chrome au pixel CSS entier (le demi-pixel y est sans effet, et un pixel entier
     serait trop). */
  padding-bottom: 1px;
  color: var(--txt);
}
.status-seg .fx-sep {
  color: var(--muted);
  margin: 0 10px;
}
/* Les deux compteurs en direct portent la couleur de leur pastille ; tout le reste du bandeau
   garde la couleur du texte. */
.status-seg .fig-debt {
  color: var(--violet);
}
.status-seg .fig-hero {
  color: var(--cyan);
}
/* Le mot d'etat prend la couleur de la pastille : cyan en AUTO, ambre en REFERENCE. */
.status-seg .ticker-mode {
  color: var(--cyan);
}
.status-seg .ticker-mode.is-ref {
  color: var(--amber);
}
/* Telephone : on ne touche pas a la taille des caracteres, seulement a l'air autour. */
@media (max-width: 680px) {
  .status {
    letter-spacing: 0.02em;
  }
  .status-seg {
    padding-right: 48px;
  }
  .status-seg .fx-sep {
    margin: 0 8px;
  }
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar {
  display: none;
}
.seg.lang {
  flex-shrink: 0;
}
.seg.cur {
  flex: 1 1 0;
  min-width: 0;
}
.seg button {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 7px 11px;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.seg button:hover {
  color: var(--txt);
}
.seg button.on {
  background: rgba(46, 230, 246, 0.12);
  color: var(--cyan);
}
.seg.t button.on {
  background: rgba(245, 177, 61, 0.12);
  color: var(--amber);
}
.seg.cur button.on {
  background: rgba(46, 230, 246, 0.16);
  color: var(--cyan);
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 680px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
}
.card .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.card .tag .agg {
  font-weight: 700;
}
.card .desc {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 3px;
  min-height: 30px;
}
.val {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 12px;
  color: #eef9fb;
  font-size: 27px;
}
.card.hero .val {
  font-size: 38px;
}
.val .u {
  font-size: 0.42em;
  color: var(--muted);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.deltas {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
}
.deltas .d span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted2);
  margin-bottom: 3px;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.spark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 116px;
  height: 34px;
  opacity: 0.45;
}
.card.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(46, 230, 246, 0.02) 3px 4px
  );
}
.card.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
  opacity: 0.7;
}
.card.info .val {
  font-size: 20px;
  color: var(--muted);
}

.chartcard {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: 14px 12px 8px;
}
.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 4px 10px;
}
.win-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-basis: 100%;
}
.controls .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-right: 2px;
}
.spacer {
  flex: 1;
}
.refresh {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
}
.refresh:hover {
  background: rgba(46, 230, 246, 0.08);
}
.refresh:disabled {
  opacity: 0.4;
  cursor: default;
}
.plot {
  position: relative;
  width: 100%;
}
#chart {
  display: block;
  width: 100%;
  height: auto;
}
.tip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -115%);
  background: #04080c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 5;
}
.tip .tdate {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.tip .trow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.calc {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: 16px;
}
.calc-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
}
.calc-sub {
  font-size: 12px;
  color: var(--muted);
}
.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
  gap: 10px;
}
@media (max-width: 680px) {
  .calc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.calc-grid label,
.share-fields label,
#lblYourWage {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.calc-grid label .lbltxt,
.share-fields label .lbltxt {
  display: flex;
  align-items: flex-end;
  min-height: 18px;
  line-height: 1.35;
}
#viewFiscal .share-fields {
  align-items: end;
}
#viewFiscal .share-fields label {
  justify-content: flex-end;
}
#viewFiscal .share-fields label .lbltxt {
  min-height: 30px;
}
#viewFiscal .share-fields label[style*="display:none"] {
  display: none !important;
}
@media (max-width: 680px) {
  #viewFiscal .share-fields {
    gap: 12px;
  }
  #viewFiscal .share-fields label .lbltxt {
    min-height: 0;
  }
}
.calc-grid .opt {
  color: var(--muted2);
  letter-spacing: 0;
  text-transform: none;
}
.calc-grid input,
.calc-grid select,
.share-fields input,
.share-fields select,
#yourWage {
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 15px;
  padding: 9px 10px;
  width: 100%;
}
.calc-grid input:focus,
.calc-grid select:focus,
.share-fields input:focus,
.share-fields select:focus {
  outline: none;
  border-color: var(--cyan-dim);
}
.share-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}
.share-fields + .share-fields {
  margin-top: 12px;
}
.calc-grid + .share-fields,
.share-fields + .calc-grid {
  margin-top: 12px;
}
.future-helper {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 16, 24, 0.72);
  overflow: hidden;
}
.future-helper-toggle {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: rgba(18, 190, 205, 0.07);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
}
.future-helper-panel {
  display: none;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.future-helper.open .future-helper-panel {
  display: block;
}
.future-helper-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.future-helper-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
}
.future-helper-grid input,
.future-helper-grid select {
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 15px;
  padding: 9px 10px;
  width: 100%;
}
.future-helper-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.future-helper-actions button {
  border: 1px solid var(--cyan-dim);
  border-radius: 9px;
  background: rgba(18, 190, 205, 0.1);
  color: var(--cyan);
  padding: 9px 12px;
  font-family: var(--mono);
  cursor: pointer;
}
.future-helper-result {
  font-family: var(--mono);
  color: var(--txt);
}
.future-helper-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 680px) {
  .future-helper-grid {
    grid-template-columns: 1fr;
  }
  .future-helper-actions {
    align-items: stretch;
  }
  .future-helper-actions button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .share-fields {
    grid-template-columns: 1fr;
  }
}
.calc-ref {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ref-desc {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  padding: 10px 12px;
  border-left: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.014);
  border-radius: 0 8px 8px 0;
}
.ref-desc b {
  color: var(--txt);
}
.calc-out {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-line {
  border-left: 2px solid var(--cyan);
  padding: 6px 0 6px 13px;
}
.calc-line.loss {
  border-color: var(--down);
}
.calc-line.gain {
  border-color: var(--up);
}
.calc-line.gap {
  border-color: var(--amber);
}
.calc-line.gap .v {
  color: var(--amber);
}
.calc-line .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.calc-line .v {
  font-family: var(--mono);
  font-size: 22px;
  color: #eef9fb;
}
.calc-line .v .x {
  font-size: 13px;
  color: var(--muted);
}
.calc-line p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--txt);
  line-height: 1.5;
}
.calc-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.55;
}
.calc-note b {
  color: var(--muted);
}

/* V82 · Une seule hierarchie de lecture pour tous les calculateurs.
     Le premier bloc repond a la question en langage courant, les trois cartes donnent
     les chiffres indispensables, puis les bases techniques restent accessibles sans
     prendre le dessus sur le resultat. */
.result-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.result-clear {
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(46, 230, 246, 0.035);
  padding: 13px 15px;
}
.result-clear.gain {
  border-left-color: var(--up);
  background: rgba(79, 227, 160, 0.035);
}
.result-clear.loss {
  border-left-color: var(--down);
  background: rgba(255, 107, 129, 0.035);
}
.result-clear.mixed {
  border-left-color: var(--amber);
  background: rgba(245, 177, 61, 0.035);
}
.result-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  color: var(--cyan-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.result-clear.gain .result-kicker {
  color: var(--up);
}
.result-clear.loss .result-kicker {
  color: var(--down);
}
.result-clear.mixed .result-kicker {
  color: var(--amber);
}
.result-verdict {
  font-size: 18px;
  line-height: 1.45;
  color: #eef9fb;
  max-width: 1100px;
}
.result-verdict b {
  font-weight: 750;
  color: #fff;
}
.result-verdict .up {
  color: var(--up);
}
.result-verdict .down {
  color: var(--down);
}
.result-verdict .amber {
  color: var(--amber);
}
.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.result-metric {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.014);
  padding: 11px 12px;
}
.result-metric-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 5px;
  line-height: 1.4;
}
.result-metric-value {
  display: block;
  font-family: var(--mono);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.25;
  color: #eef9fb;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.result-metric.gain .result-metric-value {
  color: var(--up);
}
.result-metric.loss .result-metric-value {
  color: var(--down);
}
.result-metric.amber .result-metric-value {
  color: var(--amber);
}
.result-compare {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.result-compare-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.result-rows {
  display: grid;
  gap: 7px;
}
.result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--cyan);
  background: rgba(255, 255, 255, 0.012);
}
.result-row.amber {
  border-left-color: var(--amber);
}
.result-row.gain {
  border-left-color: var(--up);
}
.result-row.loss {
  border-left-color: var(--down);
}
.result-row-copy {
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--txt);
}
.result-row-copy small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
.result-row-side {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 17px;
  color: #eef9fb;
  font-variant-numeric: tabular-nums;
}
.result-row-delta {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}
.result-row-delta.gain {
  color: var(--up);
}
.result-row-delta.loss {
  color: var(--down);
}
.result-details {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.01);
}
.result-details summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 10px 38px 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cyan);
}
.result-details summary::-webkit-details-marker {
  display: none;
}
.result-details summary::after {
  content: "+";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
}
.result-details[open] summary::after {
  content: "\2212";
}
.result-details summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 8px;
}
.result-detail-body {
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.result-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.025);
}
.result-detail-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.result-detail-row:last-child {
  padding-bottom: 0;
}
.result-detail-row b {
  color: var(--txt);
  font-family: var(--mono);
  font-weight: 600;
  text-align: right;
}
.result-detail-note {
  margin-top: 8px;
  color: var(--muted2);
}
@media (max-width: 680px) {
  .result-verdict {
    font-size: 16px;
  }
  .result-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .result-metric:nth-child(3):last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 460px) {
  .result-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .result-row-side {
    text-align: left;
    white-space: normal;
  }
  .result-detail-row {
    display: block;
  }
  .result-detail-row b {
    display: block;
    text-align: left;
    margin-top: 2px;
  }
}

.share-coach {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 16, 24, 0.72);
  padding: 14px;
}
.share-coach-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.share-coach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-coach label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
}
.share-coach input,
.share-coach select {
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 15px;
  padding: 9px 10px;
  width: 100%;
  color-scheme: dark;
}
.share-coach select option {
  background: #202328;
  color: #f4f6f8;
}
.share-coach input:focus,
.share-coach select:focus {
  outline: none;
  border-color: var(--cyan-dim);
}
.share-coach-results {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.share-coach-card {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.012);
}
.share-coach-card .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.share-coach-card .v {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--txt);
}
.share-coach-card.good .v {
  color: var(--up);
}
.share-coach-card.bad .v {
  color: var(--down);
}
.share-coach-verdict {
  margin-top: 12px;
  border-left: 2px solid var(--cyan);
  padding: 8px 0 8px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt);
}
.share-coach-verdict.good {
  border-color: var(--up);
}
.share-coach-verdict.bad {
  border-color: var(--down);
}
.share-coach-proj {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 680px) {
  .share-coach-grid,
  .share-coach-results {
    grid-template-columns: 1fr;
  }
}

.foot {
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
  font-size: 12px;
  color: var(--muted);
}
.foot b {
  color: var(--txt);
  font-weight: 600;
}
/* Liens de sources dans les notes et les pieds de carte (Source : BCE, FRED, Banque de France) :
   le bleu par defaut du navigateur jurait sur le fond sombre. Meme traitement que la signature. */
.foot a,
.note a,
.calc-note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 246, 0.35);
}
.foot a:hover,
.note a:hover,
.calc-note a:hover {
  border-color: var(--cyan);
}

/* Barre de terminal. Le menu adopte le vocabulaire que le site emploie deja partout :
     crochets autour de la selection, curseur, compteur d'index. L'invite de commande fixe
     a ete retiree le 18 aout 2026 : le chevron de gauche occupe desormais sa place et son
     role visuel, et il sert, lui.
     Les onglets defilent horizontalement au lieu de passer a la ligne sur telephone. */
.termbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  font-family: var(--mono);
}
.tb-rail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.tb-rail::-webkit-scrollbar {
  display: none;
}
/* Voile de fondu identique a celui du bandeau defilant (.status-scroll) : --fade de chaque
     cote, et applique EN PERMANENCE. Le conditionner au debordement le rendait absent a la
     premiere visite, puisque la mesure se fait avant que les polices soient chargees.
     La piste se rapproche des chevrons (10 px de gap de la barre moins 6 = 4 px) : le texte
     s'efface juste contre eux, comme contre les pastilles du bandeau. */
.tb-rail {
  margin: 0 -6px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
}
.tb-track {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-width: 100%;
}

/* La piste reserve a ses deux bouts ce qu'il faut pour que le crochet sorte du voile de
     fondu. Sans cela le premier onglet, une fois la piste recentree sur lui, vient se placer a
     l'abscisse zero, donc sous le degrade, et son crochet ouvrant disparait. Meme cause que le
     « [ » de À propos coupe a l'arrivee. Le bouton porte deja sa marge laterale (--tab-pad-x) :
     la piste n'ajoute que la difference avec --fade. */
.tb-track {
  padding: 0 max(0px, calc(var(--fade) - var(--tab-pad-x)));
}
.tabbtn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 5px var(--tab-pad-x);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease;
}
/* Les crochets sont TOUJOURS presents, seulement transparents hors selection : s'ils
     apparaissaient a la selection, toute la ligne se decalerait de deux caracteres. */
.tabbtn::before {
  content: "[";
  margin-right: 0.22em;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tabbtn::after {
  content: "]";
  margin-left: 0.22em;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tabbtn:hover {
  color: var(--txt);
}
.tabbtn.on {
  color: var(--cyan);
}
.tabbtn.on::before,
.tabbtn.on::after {
  opacity: 1;
}
.tabbtn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* L'ambre du Bitcoin est conserve, a l'etat normal comme a l'etat selectionne. */
#tabBtcBtn {
  color: #f7931a;
}
#tabBtcBtn:hover {
  color: #ffb347;
}
#tabBtcBtn.on {
  color: #ffb347;
}
.tb-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 15px;
  background: var(--cyan);
  animation: tbBlink 1.05s step-end infinite;
}
.tb-idx {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted2);
}
/* Chevrons de defilement a la souris. Ils vivent DANS LA RANGEE, entre l'invite et la
     piste puis entre la piste et le curseur, et surtout PAS dans .tb-rail : la piste porte
     un voile de fondu (--fade) a chaque bout, un chevron place dedans serait a moitie
     efface.
     ILS RESTENT ALLUMES EN PERMANENCE, demande explicite du 18 aout 2026. Ils ne s'eteignent
     donc jamais en bout de course : rien n'apparait, rien ne disparait, et la question du
     decalage de ligne ne se pose meme plus. Un clic en bout de course est simplement borne
     et ne fait rien. */
.tb-chev {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  color: var(--cyan);
  cursor: pointer;
  transition: filter 0.18s ease;
}
.tb-chev:hover {
  filter: brightness(1.35);
}
/* Zone de clic elargie SANS toucher a la mise en page : un calque transparent deborde du
     glyphe au lieu d'une marge interieure, qui elargirait le bouton et romprait l'egalite
     de largeur avec l'ancienne invite. Un glyphe de 14 px en chasse fixe ne fait que 8 px
     de large, beaucoup trop petit pour viser a la souris. */
.tb-chev::after {
  content: "";
  position: absolute;
  inset: -7px -6px;
}
@keyframes tbBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tb-caret {
    animation: none;
  }
  .tb-rail {
    scroll-behavior: auto;
  }
}

.counter {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
  text-align: center;
}
.counter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(46, 230, 246, 0.025) 3px 4px
  );
}
.counter .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--cyan-dim);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.counter .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 42px;
  color: #eef9fb;
  margin-top: 12px;
  letter-spacing: -0.01em;
  word-break: break-all;
  position: relative;
  z-index: 1;
}
.counter .sym {
  color: var(--cyan);
  margin-right: 8px;
}
.counter .rate {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--up);
  position: relative;
  z-index: 1;
}
.counter .note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.55;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 680px) {
  .counter .num {
    font-size: 26px;
  }
}

.gauge {
  margin-top: 18px;
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.gauge-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: visible;
}
.gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.4s ease;
}
.gauge-avg-marker {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 20px;
  background: var(--amber);
  border-radius: 1px;
}
.gauge-avg-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.gauge-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.gauge-labels b {
  color: var(--txt);
}
.gauge-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.gauge-note b.up {
  color: var(--up);
}
.gauge-note b.down {
  color: var(--down);
}

.gauge-year-ctrl {
  margin-top: 16px;
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.gauge-year-ctrl input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  cursor: pointer;
  height: 4px;
  display: block;
}
.gauge-year-val {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.gauge-year-val b {
  color: var(--amber);
}
.gauge-year-val button {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.gauge-year-val button:hover {
  background: rgba(46, 230, 246, 0.08);
}

.timeline {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.timeline .tcell {
  flex: 0 0 auto;
  min-width: 100px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.timeline .tcell .ty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.timeline .tcell .tv {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--txt);
  margin-top: 4px;
}

.records {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 680px) {
  .records {
    grid-template-columns: 1fr;
  }
}

/* ===== onglet Depuis ta visite (V54) ===== */
#viewSince .sc-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#viewSince .sc-hero {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: 24px 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#viewSince .sc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(46, 230, 246, 0.02) 3px 4px
  );
}
#viewSince .sc-away {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
#viewSince .sc-away b {
  color: var(--txt);
  font-weight: 700;
}
#viewSince .sc-dur {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
#viewSince .sc-free {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
#viewSince .sc-free input {
  width: 78px;
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 14px;
  padding: 7px 9px;
  text-align: right;
}
#viewSince .sc-free input:focus {
  outline: none;
  border-color: var(--cyan-dim);
}
#viewSince .sc-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(30px, 7.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#viewSince .sc-num .u {
  font-size: 0.34em;
  color: var(--muted);
  font-weight: 500;
  margin-left: 8px;
  letter-spacing: 0.04em;
}
#viewSince .sc-lab {
  font-size: 13px;
  color: var(--txt);
  margin-top: 12px;
}
#viewSince .sc-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted2);
  margin-top: 10px;
  text-transform: uppercase;
}
#viewSince .sc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 680px) {
  #viewSince .sc-cards {
    grid-template-columns: 1fr;
  }
}
#viewSince .sc-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
#viewSince .sc-card .t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
#viewSince .sc-card .v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  margin-top: 12px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
#viewSince .sc-card.n .v {
  color: #eef9fb;
}
#viewSince .sc-card .f {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 9px;
  min-height: 28px;
}
#viewSince .sc-lines {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#viewSince .sc-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
}
#viewSince .sc-line.loss {
  border-left-color: var(--amber);
}
#viewSince .sc-line.gap {
  border-left-color: var(--violet);
}
#viewSince .sc-line .k {
  font-size: 12px;
  color: var(--muted);
}
#viewSince .sc-line .k i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--muted2);
  margin-top: 3px;
}
#viewSince .sc-line .v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  color: #eef9fb;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
#viewSince .sc-line.loss .v {
  color: var(--amber);
}
#viewSince .sc-line.gap .v {
  color: var(--violet);
}
#viewSince .sc-ladder {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
}
#viewSince .sc-lhead,
#viewSince .sc-lrow {
  display: grid;
  grid-template-columns: 84px 1fr 108px;
  gap: 10px;
  align-items: center;
}
#viewSince .sc-lhead {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted2);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#viewSince .sc-lhead .a {
  text-align: right;
}
#viewSince .sc-lrow {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
#viewSince .sc-lrow:last-child {
  border-bottom: 0;
}
#viewSince .sc-lrow .d {
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
#viewSince .sc-lrow .a {
  font-weight: 700;
  color: var(--amber);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#viewSince .sc-lrow.on .d,
#viewSince .sc-lrow.on .a {
  color: var(--cyan);
}
#viewSince .sc-bar {
  height: 9px;
  border-radius: 3px;
  background: rgba(245, 177, 61, 0.16);
  position: relative;
  overflow: hidden;
}
#viewSince .sc-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--amber);
  opacity: 0.75;
  border-radius: 3px;
  transition: width 0.45s ease;
}
#viewSince .sc-lrow.on .sc-bar {
  background: rgba(46, 230, 246, 0.16);
}
#viewSince .sc-lrow.on .sc-bar i {
  background: var(--cyan);
}
#viewSince .sc-reset {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
#viewSince .sc-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: 0.15s;
}
#viewSince .sc-btn:hover {
  color: var(--txt);
  border-color: var(--cyan-dim);
}
#viewSince .sc-btn.danger {
  color: var(--down);
  border-color: rgba(255, 107, 129, 0.35);
}
#viewSince .sc-btn.danger:hover {
  background: rgba(255, 107, 129, 0.08);
}
#viewSince .sc-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
#viewSince .sc-confirm {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#viewSince .sc-confirm.open {
  display: flex;
}
#viewSince .sc-confirm .q {
  font-size: 12px;
  color: var(--txt);
}
#viewSince .sc-priv {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted2);
}
#viewSince .sc-spacer {
  flex: 1;
}
@media (prefers-reduced-motion: reduce) {
  #viewSince .sc-bar i {
    transition: none;
  }
}

.minic {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
  text-align: center;
  container-type: inline-size;
}
.minic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(46, 230, 246, 0.025) 3px 4px
  );
}
.minic-lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cyan-dim);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.minic-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(14px, 7cqw, 30px);
  color: #eef9fb;
  margin-top: 10px;
  letter-spacing: -0.01em;
  word-break: break-all;
  position: relative;
  z-index: 1;
}
.minic-sym {
  color: var(--cyan);
  margin-right: 7px;
}
.minic-rate {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--up);
  position: relative;
  z-index: 1;
}
.minic-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.5;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.minic.proj .minic-num,
.minic.proj .minic-rate {
  color: var(--amber);
}
.minic.proj .minic-sym {
  color: var(--amber);
}

.btc-hero {
  margin-top: 12px;
  border: 1px solid rgba(247, 147, 26, 0.35);
  border-radius: 14px;
  padding: 26px 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
  text-align: center;
}
.btc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(247, 147, 26, 0.025) 3px 4px
  );
}
.btc-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  background: rgba(247, 147, 26, 0.12);
  border: 2px solid #f7931a;
  color: #f7931a;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btc-price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 40px;
  color: #eef9fb;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.btc-price .sym {
  color: #f7931a;
  margin-right: 8px;
}
@media (max-width: 680px) {
  .btc-price {
    font-size: 28px;
  }
}

.btc-story {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--txt);
}
/* Accordeons de l'onglet A propos. Les explications de methode sont longues par
     necessite : celle sur la fiscalite fait a elle seule pres de 2 900 caracteres.
     Plutot que de les tronquer et de perdre en precision, on les replie derriere
     leur titre. Le filet fin et le chevron cyan gardent la meme grammaire visuelle
     que le reste de la section. */
/* Cartes repliables. Meme principe que les accordeons de l'onglet A propos, applique
     a une carte entiere : l'entete .calc-head devient le declencheur. On ne replie que
     du pedagogique ou de la methode. Tout ce qui qualifie la fiabilite d'un chiffre
     affiche (badges LIVE/REF, sources, avertissements) reste visible sans clic. */
details.calc-fold > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 0;
  padding-right: 30px;
}
details.calc-fold > summary::-webkit-details-marker {
  display: none;
}
details.calc-fold > summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.75;
}
details.calc-fold[open] > summary::after {
  content: "\2212";
}
details.calc-fold > summary:hover .eyebrow {
  color: var(--cyan);
}
details.calc-fold > summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}
details.calc-fold[open] > summary {
  margin-bottom: 14px;
}
/* Note de methode repliee a l'interieur d'un bloc .note existant. */
.note-fold summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 26px;
  font-weight: 600;
  color: var(--txt);
}
.note-fold summary::-webkit-details-marker {
  display: none;
}
.note-fold summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.75;
}
.note-fold[open] summary::after {
  content: "\2212";
}
.note-fold summary:hover {
  color: var(--cyan);
}
.note-fold summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}
.note-fold .accbody {
  margin-top: 8px;
  line-height: 1.7;
}
.acc-list {
  margin: 14px 0 0;
}
.acc-list details {
  border-top: 1px solid var(--line-soft);
}
.acc-list details:first-child {
  border-top: none;
}
.acc-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 11px 34px 11px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--txt);
}
.acc-list summary::-webkit-details-marker {
  display: none;
}
.acc-list summary::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--cyan);
  font-weight: 700;
  transition: transform 0.18s ease;
}
.acc-list details[open] summary::before {
  transform: rotate(90deg);
}
.acc-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.75;
}
.acc-list details[open] summary::after {
  content: "\2212";
}
.acc-list summary:hover {
  color: var(--cyan);
}
.acc-list summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}
.acc-list .accbody {
  padding: 0 8px 16px 22px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}
.btc-official-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: #f7931a;
  text-decoration: none;
  border: 1px solid rgba(247, 147, 26, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
}
.btc-official-link:hover {
  background: rgba(247, 147, 26, 0.1);
}
/* Liens vers les pages guides : filet fin et chevron cyan. Ce sont des entrées de
     sommaire, pas des boutons d'action, donc pas de cadre. */
.guide-links {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.guide-links li {
  border-top: 1px solid var(--line-soft);
}
.guide-links li:first-child {
  border-top: none;
}
.guide-links a {
  position: relative;
  display: block;
  padding: 10px 0 10px 22px;
  text-decoration: none;
  color: var(--txt);
  font-size: 14px;
  line-height: 1.5;
}
.guide-links a::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--cyan);
  font-weight: 700;
}
.guide-links a:hover {
  color: var(--cyan);
}
.guide-links .gl-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 2px;
}
.about-x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid rgba(46, 230, 246, 0.35);
  border-radius: 8px;
  height: 34px;
  padding: 0 12px;
  line-height: 1;
  box-sizing: border-box;
}
.about-x-link:hover {
  background: rgba(46, 230, 246, 0.1);
}
.about-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.about-actions .about-x-link {
  margin-top: 14px;
}
.about-bug-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 34px;
  padding: 0 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
  box-sizing: border-box;
}
.about-bug-btn:hover {
  color: var(--txt);
  border-color: var(--muted);
}
/* V85: les deux boutons restent cote a cote sur telephone, hauteurs egales,
     le libelle long passe a la ligne DANS le bouton plutot que de le faire descendre. */
.about-actions {
  flex-wrap: nowrap;
  align-items: stretch;
}
.about-actions > .about-x-link,
.about-actions > .about-bug-btn {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 34px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.3;
}
.site-sig {
  margin: 20px 0 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted2);
}
.fiscal-warn {
  margin-top: 12px;
  border: 1px solid rgba(245, 177, 61, 0.4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 177, 61, 0.1), var(--panel2));
  padding: 16px;
}
.fiscal-warn-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--amber);
  font-weight: 700;
}
.fiscal-warn-text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--txt);
}
.fiscal-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.fiscal-result-row:first-child {
  border-top: none;
}
.fiscal-result-row .val {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--txt);
}
.fiscal-result-row.best {
  color: var(--up);
}
.fiscal-result-row.best .val {
  color: var(--up);
}
.fiscal-net-big {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--cyan);
  margin-top: 4px;
}
.fiscal-net-caption {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 14px;
}
.fiscal-input-help {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(46, 230, 246, 0.035);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.fiscal-input-help b {
  color: var(--txt);
}
.fiscal-loss {
  margin-top: 10px;
  border: 1px solid rgba(255, 107, 129, 0.38);
  border-radius: 12px;
  background: rgba(255, 107, 129, 0.07);
  padding: 12px 14px;
  color: var(--down);
  font-weight: 700;
}
.fiscal-loss small {
  display: block;
  color: var(--txt);
  font-weight: 400;
  line-height: 1.55;
  margin-top: 6px;
}
.fiscal-rate {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.fiscal-theory {
  margin-top: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.015);
}
.fiscal-theory summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.fiscal-theory .note {
  margin-top: 8px;
}
.fiscal-result-divider {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.fiscal-report-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.fiscal-report-form textarea,
.fiscal-report-form input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
}
.fiscal-report-form button {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(46, 230, 246, 0.15), var(--panel2));
  border: 1px solid rgba(46, 230, 246, 0.4);
  border-radius: 10px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 18px;
  cursor: pointer;
}
.fiscal-report-form button:hover {
  background: rgba(46, 230, 246, 0.2);
}
.site-sig .sep {
  margin: 0 8px;
  opacity: 0.6;
}
.site-sig a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 246, 0.25);
}
.site-sig a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.btc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 680px) {
  .btc-compare {
    grid-template-columns: 1fr;
  }
}
.btc-compare-col {
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btc-compare-col.infinite {
  border: 1px solid rgba(255, 107, 179, 0.32);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.btc-compare-col.finite {
  border: 1px solid rgba(247, 147, 26, 0.35);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.btc-compare-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  color: #eef9fb;
  margin-top: 10px;
  word-break: break-all;
}
.btc-compare-num.small {
  font-size: 19px;
}
.btc-compare-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
}
.btc-compare-col .note {
  margin-top: 10px;
  font-size: 11px;
}

.halving-bars {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hbar-year {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  width: 56px;
  flex-shrink: 0;
}
.hbar-track {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
  height: 18px;
}
.hbar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f7931a, #ffb347);
}
.hbar-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt);
  width: 76px;
  text-align: right;
  flex-shrink: 0;
}

.halving-table {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--mono);
  font-size: 12px;
}
.ht-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.ht-row.head {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.ht-row .ht-y {
  color: var(--txt);
}
.ht-row .ht-r {
  color: #f7931a;
}
.ht-row .ht-s {
  color: var(--muted);
}

.btc-disclaimer {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 107, 179, 0.22);
  border-radius: 12px;
  background: rgba(255, 107, 179, 0.035);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.btc-disclaimer b {
  color: var(--muted2);
}

.life-inputs {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr);
  gap: 10px;
  max-width: 580px;
  align-items: end;
}
.life-inputs label,
.scale-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  justify-content: flex-end;
}
.life-inputs input,
.life-inputs select,
.scale-controls input,
.scale-controls select {
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 15px;
  padding: 9px 10px;
  width: 100%;
  height: 44px;
}
.life-inputs select,
.scale-controls select {
  line-height: 1.35;
}
.life-inputs input:focus,
.life-inputs select:focus,
.scale-controls input:focus,
.scale-controls select:focus {
  outline: none;
  border-color: var(--cyan-dim);
}
/* Le texte visible des menus potentiellement longs est séparé du select natif.
     Le select transparent conserve le menu et l'accessibilité mobile ; la piste permet
     d'afficher les jambages sans les rogner et de faire défiler uniquement les vrais débordements. */
.choice-marquee {
  position: relative;
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #070d13;
  overflow: hidden;
  color: var(--txt);
}
.choice-marquee:focus-within {
  border-color: var(--cyan-dim);
}
.choice-marquee::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 10 12 6 16 10'/%3E%3Cpolyline points='8 14 12 18 16 14'/%3E%3C/svg%3E");
}
/* A droite, la fenetre s'arrete 6 px avant le trait de l'icone (icone de 18 px a 14 px du bord,
   trait dessine de 4,5 a 12 px dans l'icone) : le texte qui defile s'efface contre elle. */
.choice-marquee-viewport {
  position: absolute;
  inset: 0 32px 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  text-transform: none;
  letter-spacing: normal;
}
/* Même voile que le bandeau principal : --fade à gauche et à droite. */
.choice-marquee.is-overflowing .choice-marquee-viewport {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
}
.choice-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.choice-marquee-copy {
  display: block;
  flex: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  padding-bottom: 1px;
  color: var(--txt);
  /* Safari peut gonfler uniquement les longues pistes max-content malgré font-size:15px.
       100 % conserve la taille CSS exacte, sans bloquer le zoom ni l'accessibilité. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Même distance entre les deux copies que les segments du bandeau principal. */
.choice-marquee-copy.loop {
  padding-right: 80px;
}
.choice-marquee select {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.life-feature-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
#basketGrid {
  min-width: 0;
}
.basket-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
  height: 100%;
}
.basket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.basket-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.basket-name {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt);
  letter-spacing: 0.04em;
}
.basket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12px;
}
.basket-row .bk {
  color: var(--muted);
}
.basket-row .bv {
  color: var(--txt);
  font-weight: 600;
  text-align: right;
}
.basket-row .bv.up {
  color: var(--up);
}
.basket-row .bv.down {
  color: var(--down);
}
.basket-row .bv.amber {
  color: var(--amber);
}
.basket-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.5;
}
.basket-slider {
  touch-action: pan-x;
  width: 100%;
  margin-top: 12px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.basket-slider-val {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* L'Échelle partage la ligne de la comparaison sélectionnée sur ordinateur, puis passe
     naturellement dessous sur téléphone. Elle n'ajoute donc jamais cinq nouvelles cartes. */
.scale-card {
  border: 1px solid rgba(245, 177, 61, 0.28);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(245, 177, 61, 0.035), var(--panel2));
  position: relative;
  overflow: hidden;
}
.scale-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.012) 3px 4px
  );
}
.scale-card > * {
  position: relative;
  z-index: 1;
}
.scale-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.scale-title {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.08em;
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
}
.scale-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 48ch;
}
.scale-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 24px;
  border: 1px solid rgba(245, 177, 61, 0.28);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scale-controls {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 9px;
  align-items: end;
}
.scale-controls .scale-custom {
  grid-column: 1/-1;
}
.scale-controls .scale-custom[hidden] {
  display: none;
}
.scale-kicker {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.scale-hero {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(29px, 4vw, 45px);
  line-height: 1.05;
  color: var(--amber);
  font-weight: 700;
  margin-top: 7px;
  letter-spacing: -0.03em;
}
.scale-hero.contract {
  color: var(--down);
}
.scale-hero.message {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 600;
}
.scale-phrase {
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt);
  margin-top: 8px;
}
.scale-ladder {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}
.scale-rung {
  display: grid;
  grid-template-columns: minmax(125px, 1fr) minmax(72px, 0.9fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}
.scale-rung-label {
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt);
}
.scale-rung-label small {
  display: block;
  color: var(--muted2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scale-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}
.scale-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-dim), var(--amber));
}
.scale-rung-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  white-space: nowrap;
  text-align: right;
}
.scale-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px;
  color: var(--muted2);
  line-height: 1.5;
}
@media (max-width: 680px) {
  .life-inputs,
  .life-feature-grid,
  .scale-controls {
    grid-template-columns: 1fr;
  }
  .scale-controls .scale-custom {
    grid-column: auto;
  }
  .scale-head {
    align-items: flex-start;
  }
  .scale-rung {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
  }
  .scale-track {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .basket-row {
    align-items: flex-start;
  }
}

.rec {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.rec .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
}
.rec .v {
  font-family: var(--mono);
  font-size: 23px;
  color: #eef9fb;
  margin-top: 8px;
}
.rec .v.up {
  color: var(--up);
}
.rec .v.down {
  color: var(--down);
}
.rec .d {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 5px;
}

/* Homogénéisation globale des menus déroulants : double chevron blanc */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 10 12 6 16 10'/%3E%3Cpolyline points='8 14 12 18 16 14'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}
select::-ms-expand {
  display: none;
}

/* Taille des compteurs calee sur la largeur reelle de la carte, pas sur celle de
     l'ecran. La regle mobile fixe a 26 px etait calculee trop juste : le pire cas du
     site est la dette en yuans, 19 caracteres plus le symbole, soit 20 a loger, ce qui
     depasse des que la carte descend sous environ 310 px.

     En monospace une ligne fait longueur x 0,6 x taille de police, donc 20 caracteres
     tiennent tant que la taille reste sous largeur / 12. Avec la marge du symbole et
     3 % de securite, cela donne 7,8 % de la largeur du conteneur, valeur qui reste
     valable de 280 px a 600 px de carte.

     Place en fin de feuille pour passer apres la media query. Un navigateur sans unites
     de conteneur ignore ces deux declarations et retrouve exactement le comportement
     precedent, sans regression. */
.counter {
  container-type: inline-size;
}
.counter .num {
  font-size: clamp(15px, 7.8cqw, 42px);
}
/* Montant des depenses publiques du panneau Zoom. Il portait sa taille de police en
     style en ligne (34 px), que ni la media query mobile ni aucune regle CSS ne pouvait
     surcharger : c'etait la seule valeur monetaire du site dans ce cas, et donc la seule
     a deborder de sa carte sur telephone. Meme formule que les compteurs, calee sur la
     largeur reelle de la carte. La cesure sert de filet si un cas non prevu survenait :
     le nombre passerait alors a la ligne au lieu de sortir du cadre. */
#dgFrRatioCard2 {
  container-type: inline-size;
}
.debt-spend-value {
  font-size: clamp(15px, 7.8cqw, 34px);
  word-break: break-all;
}
/* Les intitules de cartes sont de vraies balises h2. C'est ce qui donne a la page une
     structure de titres, et donc aux lecteurs d'ecran un moyen de sauter de section en
     section au lieu de tout parcourir lineairement. Le H1 est dans l'en-tete commune,
     donc toujours present quel que soit l'onglet affiche : la hierarchie ne saute jamais
     de niveau, et les titres des onglets masques sont hors de l'arbre d'accessibilite.

     Les valeurs par defaut du navigateur pour h2, marge et graisse notamment, sont
     neutralisees ici pour que le rendu reste rigoureusement identique a ce qu'il etait
     avec des <span> : sans cette regle, les intitules deviendraient gras et decales. */

/* ===================== BLOC D'ACCROCHE DE L'ONGLET A PROPOS =====================
     Une arrivee sur l'adresse nue tombe sur cet onglet, pas sur le tableau de bord. Le
     visiteur y trouvait donc la mission puis la methodologie avant le moindre chiffre, ce
     qu'un premier retour utilisateur a signale le 16 aout 2026 : « on ne sait pas pourquoi
     on est la qu'on nous presente deja plein de methodologies ». Le bloc repond a la seule
     question qui compte a l'arrivee, avec un chiffre qui bouge plutot qu'une explication.
     Aucun jeton neuf : on reprend --cyan, --amber, --panel, --line et --mono. */
/* MEME MARGE QUE TOUTE AUTRE CARTE, 12 px, comme .calc, .chartcard et .grid : le bloc
     etait colle sous la barre d'onglets alors que tout le reste du site respire. La marge
     basse reste a zero, celle de la carte suivante (.calc, 12 px) fait le travail. */
.hook {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 22px 18px;
  margin: 12px 0 0;
  text-align: center;
}
.hook-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px;
}
/* Le titre est un h2 : l'onglet n'a pas de h1, il est dans l'en-tete commune, donc la
     hierarchie ne saute aucun niveau. Les valeurs par defaut du navigateur sont neutralisees
     ici, sans quoi le titre arriverait gras et decale, comme pour h2.eyebrow. */
h2.hook-title {
  font-family: var(--mono);
  font-weight: 500;
  color: #eaf2f7;
  margin: 0 auto 16px;
  max-width: 22ch;
  font-size: clamp(19px, 5.2vw, 30px);
  line-height: 1.28;
  text-wrap: balance;
}
.hook-clab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
/* Chasse fixe et chiffres tabulaires : la largeur ne doit pas respirer a chaque image,
     sinon la ligne tressaute, exactement le probleme deja paye sur le bandeau defilant. */
/* DIMENSIONNEMENT DU NOMBRE. La chaine la plus longue que le format borne puisse produire
     fait 14 caracteres, mesure sur les 7 devises et sur des durees allant de dix secondes a
     une semaine de page ouverte. En chasse fixe un caractere occupe environ 0,63 fois la
     taille, marge comprise pour les metriques reelles de la fonte. Sur le plus etroit des
     telephones, 320 px, il reste environ 250 px utiles pour 210 px de texte. */
.hook-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--amber);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(24px, 8vw, 54px);
}
/* Palier reduit, pose par le JS quand la chaine depasse 12 caracteres. Le pire cas mesure
     fait 15 caracteres, « 387 069 233 CA$ » : a 6,6vw sur un ecran de 320 px cela occupe
     environ 200 px pour 250 px utiles. */
.hook-num.long {
  font-size: clamp(20px, 6.6vw, 44px);
}
.hook-num .hook-sym {
  color: var(--cyan);
  font-weight: 500;
  margin-left: 0.12em;
}
.hook-sub {
  font-family: var(--sans);
  color: var(--txt);
  opacity: 0.86;
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.5;
}
.hook-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.hook-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--txt);
}
.hook-btn.pri {
  border-color: rgba(46, 230, 246, 0.42);
  color: var(--cyan);
}
.hook-btn:active {
  transform: translateY(1px);
}
/* Lien video : meme bouton que les deux autres, en lien. Le triangle porte le cyan. */
.hook-btn.hook-video {
  display: inline-block;
  text-decoration: none;
  line-height: normal;
}
.hook-btn.hook-video:hover {
  border-color: rgba(46, 230, 246, 0.42);
}
.hook-play {
  color: var(--cyan);
  font-size: 10px;
  vertical-align: 1px;
}

/* ===================== V78 · ETAT DES SERVICES =====================
     Les cartes reprennent la construction visuelle de MoneyPrinter : fond technique,
     scanlines tres discretes et information utile en chasse fixe. Les trente traits ne
     sont jamais un historique invente : gris signifie simplement « aucune mesure ». */
.svc-overview {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  position: relative;
  overflow: hidden;
}
.svc-overview::after,
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.012) 3px 4px
  );
}
.svc-overview > *,
.svc-card > * {
  position: relative;
  z-index: 1;
}
.svc-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.svc-intro {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 5px 0 0;
  max-width: 74ch;
}
/* Hauteur fixe et absence de padding vertical : le point et la boite de ligne sont centres
     mathematiquement. Les capitales sont recentrees par text-box (voir « Centrage optique des
     libelles » dans clarity.css) : plus de pixel de compensation, qui ne valait que pour une
     police et decalait le texte vers le bas sur iPhone et iPad. */
.svc-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  line-height: 1;
  flex: 0 0 auto;
  border: 1px solid rgba(79, 227, 160, 0.28);
  border-radius: 999px;
  color: var(--up);
  background: rgba(79, 227, 160, 0.055);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#serviceLiveText {
  display: inline-block;
  line-height: 1;
}
.svc-live-pill.late {
  border-color: rgba(245, 177, 61, 0.3);
  color: var(--amber);
  background: rgba(245, 177, 61, 0.055);
}
.svc-live-pill.off {
  border-color: rgba(255, 107, 129, 0.28);
  color: var(--down);
  background: rgba(255, 107, 129, 0.05);
}
.svc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: svcPulse 2s infinite;
}
@keyframes svcPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 227, 160, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(79, 227, 160, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 227, 160, 0);
  }
}
.svc-summary {
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.012);
  display: flex;
  align-items: center;
  gap: 13px;
}
.svc-summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--up);
  background: rgba(79, 227, 160, 0.08);
  border: 1px solid rgba(79, 227, 160, 0.2);
}
.svc-summary.degraded .svc-summary-icon {
  color: var(--amber);
  background: rgba(245, 177, 61, 0.07);
  border-color: rgba(245, 177, 61, 0.22);
}
.svc-summary.down .svc-summary-icon,
.svc-summary.error .svc-summary-icon {
  color: var(--down);
  background: rgba(255, 107, 129, 0.07);
  border-color: rgba(255, 107, 129, 0.22);
}
.svc-summary.unknown .svc-summary-icon {
  color: var(--muted);
  background: rgba(95, 114, 128, 0.07);
  border-color: rgba(95, 114, 128, 0.22);
}
.svc-summary-copy {
  min-width: 0;
  flex: 1;
}
.svc-summary-title {
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.3;
  color: #eef9fb;
}
.svc-summary-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 3px;
}
.svc-section {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
/* Le filtre de l'historique est plus haut que son titre. Avec flex-end, il tirait le titre
     vers le bas. flex-start lui redonne exactement le meme retrait superieur que les autres
     titres de section, notamment « Sources mises a jour manuellement ». */
.svc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}
.svc-section-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.svc-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  background: linear-gradient(
    180deg,
    rgba(10, 17, 24, 0.94),
    rgba(7, 13, 19, 0.98)
  );
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-card.operational {
  border-color: rgba(79, 227, 160, 0.25);
}
.svc-card.degraded {
  border-color: rgba(245, 177, 61, 0.3);
}
.svc-card.down {
  border-color: rgba(255, 107, 129, 0.34);
}
.svc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
}
.svc-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.svc-provider-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  font-size: 17px;
  background: rgba(46, 230, 246, 0.06);
  border: 1px solid var(--line);
}
.svc-provider h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--txt);
  margin: 0;
}
.svc-provider p {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  margin: 3px 0 0;
}
.svc-state {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3.5px 7px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.82;
}
.svc-card.operational .svc-state {
  color: var(--up);
}
.svc-card.degraded .svc-state {
  color: var(--amber);
}
.svc-card.down .svc-state {
  color: var(--down);
}
.svc-strip {
  display: grid;
  grid-template-columns: repeat(48, minmax(1px, 1fr));
  gap: 1px;
  height: 30px;
  align-items: end;
  margin-top: auto;
  padding-top: 14px;
}
.svc-strip i {
  display: block;
  height: 21px;
  border-radius: 2px;
  background: rgba(95, 114, 128, 0.2);
}
.svc-strip i.operational {
  background: linear-gradient(180deg, #69f0b5, #2bbf7d);
}
.svc-strip i.degraded {
  background: linear-gradient(180deg, #ffd16e, #d79526);
}
.svc-strip i.down {
  background: linear-gradient(180deg, #ff8ca0, #d8455f);
}
.svc-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.svc-meta strong {
  font-size: 11px;
  color: var(--txt);
  font-weight: 600;
}
.svc-card .svc-meta strong.score-ok {
  color: var(--up);
}
.svc-card .svc-meta strong.score-warn {
  color: var(--amber);
}
.svc-card .svc-meta strong.score-bad {
  color: var(--down);
}
.svc-card .svc-meta strong.score-none {
  color: var(--muted);
}
.svc-reason {
  height: 14px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  line-height: 14px;
  color: var(--muted2);
}
.svc-reason:not(:empty)::before {
  content: "";
  width: 12px;
  height: 11px;
  flex: 0 0 12px;
  transform: translateY(-0.5px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1 23 21H1Z' fill='none' stroke='%23f5b13d' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 7v6' stroke='%23f5b13d' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='%23f5b13d'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.svc-manual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.svc-manual {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.012);
}
.svc-manual strong {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.35;
}
.svc-manual span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}
.svc-manual em {
  display: inline-flex;
  margin-top: 7px;
  border: 1px solid rgba(245, 177, 61, 0.24);
  border-radius: 999px;
  padding: 2.5px 6px;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}
#serviceHistorySection .svc-section-head {
  flex-wrap: wrap;
}
.svc-calendar-tools {
  display: grid;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(200px, 240px) minmax(260px, 320px);
  align-items: end;
  gap: 10px;
  margin-left: auto;
}
.svc-calendar-tools label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
}
.svc-calendar-tools select {
  width: 100%;
  height: 38px;
  min-width: 0;
  background: #070d13;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: normal;
  padding: 7px 42px 7px 9px;
}
.svc-incident-detail {
  margin-top: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.svc-incident-menu {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}
.svc-incident-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.svc-incident-menu summary::-webkit-details-marker {
  display: none;
}
.svc-incident-menu summary::after {
  content: "⌄";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.svc-incident-menu[open] summary::after {
  transform: rotate(180deg);
}
.svc-incident-body {
  border-top: 1px solid var(--line-soft);
  padding: 4px 11px 11px;
}
.svc-detail-empty {
  padding: 8px 0 4px;
  font-size: 11px;
  color: var(--muted);
}
.svc-event {
  display: block;
  padding: 9px 10px;
  border-left: 2px solid var(--amber);
  background: rgba(255, 255, 255, 0.012);
  border-radius: 0 8px 8px 0;
  margin-top: 7px;
}
.svc-event.down {
  border-color: var(--down);
}
.svc-event strong {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt);
  font-weight: 500;
}
.svc-event span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}
.svc-storage-note {
  margin-top: 10px;
  font-size: 10px;
  color: var(--amber);
  display: none;
}
.svc-storage-note.show {
  display: block;
}
@media (max-width: 860px) {
  .svc-manual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .svc-topline,
  .svc-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .svc-live-pill {
    align-self: flex-start;
  }
  .svc-summary {
    align-items: flex-start;
  }
  .svc-grid,
  .svc-manual-grid {
    grid-template-columns: 1fr;
  }
  .svc-card-head {
    gap: 7px;
  }
  .svc-state {
    font-size: 7px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .svc-calendar-tools {
    width: 100%;
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .svc-calendar-tools label,
  .svc-calendar-tools select {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-live-dot {
    animation: none;
  }
}
h2.eyebrow {
  margin: 0;
  font-weight: 400;
  font-size: 11px;
  line-height: inherit;
}