/* La vue « Crypto » (crypto_vue.js, 01/10/2026) — grammaire de la vue Obligations (.obl-*).
   Préfixe crv-. ⚠ 1 rem = 10 px sur ce site ; `.per-page button` impose 14 px et 24 px
   de rayon en !important : chaque bouton d'ici a sa propre règle !important. */

#per-tab-narratives.vs-onglet { padding-top: 6px; }
.per-page .crv-vue h1.obl-titre em { color: #D2790F; }
.per-page .crv-vue button.obl-q:hover { border-color: rgba(210,121,15,.40) !important; background: rgba(210,121,15,.07) !important; }
.per-page .crv-vue .obl-sec { display: flex; flex-direction: column; gap: 16px; }
.per-page .crv-bas { padding-bottom: 10px; }
/* La gravure (chaîne de blocs) déborde en bas de son image : on la tient dans la tête. */
.per-page .crv-tete::after { top: 22px; bottom: 104px; background-position: center top; }

/* ── Logos ── */
.per-page .crv-vue .crv-logo { display: inline-block; flex: 0 0 auto; border-radius: 50%; object-fit: contain; vertical-align: middle; background: #FFFFFF; }
.per-page .crv-vue .crv-logo-vide { background: rgba(13,13,13,.07); }

/* ── Mini-visuel « cryptos » des cartes ── */
.per-page .crv-fv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; height: 100%; align-content: center; }
.per-page .crv-fv-i { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 3px; border-radius: 10px; background: #FFFFFF; border: 1px solid rgba(13,13,13,.06); min-width: 0; }
.per-page .crv-fv-i em { font-style: normal; font-size: 10.5px; font-weight: 650; color: #3D3D3D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.per-page .crv-fv-i b { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.per-page .obl-rub-p .crv-fv { gap: 4px; }
.per-page .obl-rub-p .crv-fv-i { padding: 2px; gap: 1px; }
.per-page .obl-rub-p .crv-fv-i em { display: none; }
.per-page .obl-rub-p .crv-fv-i .crv-logo { width: 16px; height: 16px; }
.per-page .obl-rub-p .crv-fv-i b { font-size: 9.5px; }

/* ── La ligne de lecture réservée (carte du marché) ── */
.per-page .crv-vue .crv-lec {
  display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 10px; margin-bottom: 8px; border-radius: 8px;
  background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); font-size: 13px; color: #2B2B2B; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.per-page .crv-vue .crv-lec b { font-weight: 700; }
.per-page .crv-vue .crv-lec-vide { color: #8A8A8A; }

/* ── La carte du marché (treemap) ── */

/* ── La course des narratifs ── */
.per-page .crv-vue .crv-cos { display: flex; flex-direction: column; }
.per-page .crv-vue .crv-co {
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) 76px 92px; gap: 12px; align-items: center;
  padding: 3px 6px; border-radius: 7px; font-size: 13px; cursor: pointer;
}
.per-page .crv-vue .crv-co:not(.crv-co-t):hover { background: rgba(124,58,237,.06); }
.per-page .crv-vue .crv-co:not(.crv-co-t):hover .crv-co-n span { color: #6D28D9; }
.per-page .crv-vue .crv-co-t { cursor: default; font-size: 11px; color: #8A8A8A; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 8px; }
.per-page .crv-vue .crv-co-t > span:nth-child(3), .per-page .crv-vue .crv-co-t > span:nth-child(4) { text-align: right; }
.per-page .crv-vue .crv-co-n { display: flex; align-items: center; gap: 9px; min-width: 0; }
.per-page .crv-vue .crv-co-n i { width: 16px; text-align: center; font-size: 12px; flex: 0 0 16px; }
.per-page .crv-vue .crv-co-n span { font-weight: 600; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.per-page .crv-vue .crv-co-b { position: relative; height: 20px; }
.per-page .crv-vue .crv-co-bar { position: absolute; top: 4px; height: 12px; border-radius: 3px; }
.per-page .crv-vue .crv-co-z { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #CFCFCF; }
.per-page .crv-vue .crv-co-btc { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed #F7931A; z-index: 1; opacity: .9; }
.per-page .crv-vue .crv-co-t .crv-co-b em { position: absolute; bottom: 0; transform: translateX(-50%); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 650; color: #B45309; white-space: nowrap; }
.per-page .crv-vue .crv-co-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-co-c { text-align: right; color: #6B6B6B; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ── Listes à barres (revenus, hausses, baisses, notes) ── */
.per-page .crv-vue .crv-gps { display: flex; flex-direction: column; gap: 2px; }
.per-page .crv-vue .crv-gp {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(60px, 1fr) 74px 98px; gap: 10px; align-items: center;
  padding: 4px 4px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.per-page .crv-vue .crv-gp.crv-gp-3 { grid-template-columns: minmax(0, 1.25fr) minmax(60px, 1fr) 74px; }
.per-page .crv-vue .crv-gp.crv-gp-n2 { grid-template-columns: minmax(0, 1fr) 52px; }
.per-page .crv-vue .crv-gp:not(.crv-gp-t):hover { background: rgba(13,13,13,.035); }
.per-page .crv-vue .crv-gp-t { cursor: default; font-size: 11px; color: #8A8A8A; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; white-space: nowrap; }
.per-page .crv-vue .crv-gp-t > span:nth-child(4) { text-align: right; }
.per-page .crv-vue .crv-gp-n { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.per-page .crv-vue .crv-gp-n b { font-weight: 650; color: #1F1F1F; flex: 0 0 auto; }
.per-page .crv-vue .crv-gp-n em { font-style: normal; color: #8A8A8A; font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.per-page .crv-vue .crv-gp-n > i { width: 16px; text-align: center; font-size: 12px; flex: 0 0 16px; }
.per-page .crv-vue .crv-gp-b { height: 10px; background: rgba(13,13,13,.05); border-radius: 5px; overflow: hidden; }
.per-page .crv-vue .crv-gp-b i { display: block; height: 100%; border-radius: 5px; }
.per-page .crv-vue .crv-gp-v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .crv-vue .crv-mult { justify-self: end; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 6px; background: rgba(13,13,13,.05); color: #3D3D3D; white-space: nowrap; }
.per-page .crv-vue .crv-m-bas { background: rgba(14,138,95,.12); color: #067A3C; padding: 1px 6px; border-radius: 5px; font-weight: 650; }
.per-page .crv-vue .crv-mult.crv-m-nm { background: transparent; color: #8A8A8A; font-style: italic; font-weight: 500; }
.per-page .crv-vue .crv-m-haut { background: rgba(194,65,12,.12); color: #C2410C; padding: 1px 6px; border-radius: 5px; font-weight: 650; }
.per-page .crv-vue .crv-note { justify-self: end; min-width: 44px; text-align: center; padding: 3px 7px; border-radius: 6px; color: #FFFFFF; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-barre-hz { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6B6B6B; }

/* ── Le chemin de l'argent ── */
.per-page .crv-vue .crv-fu { display: flex; flex-direction: column; gap: 16px; }
.per-page .crv-vue .crv-fu-l { display: grid; grid-template-columns: 250px minmax(0, 1fr) 128px; grid-template-rows: auto auto; column-gap: 18px; row-gap: 6px; align-items: center; }
.per-page .crv-vue .crv-fu-t { display: flex; flex-direction: column; gap: 2px; grid-row: 1 / span 2; }
.per-page .crv-vue .crv-fu-t b { font-size: 15px; font-weight: 700; color: var(--c); }
.per-page .crv-vue .crv-fu-t span { font-size: 12px; line-height: 1.4; color: #6B6B6B; }
.per-page .crv-vue .crv-fu-b { height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--c) 8%, #FFFFFF); overflow: hidden; }
.per-page .crv-vue .crv-fu-b i { display: block; height: 100%; border-radius: 8px; background: var(--c); }
.per-page .crv-vue .crv-fu-v { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; }
.per-page .crv-vue .crv-fu-v b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .crv-vue .crv-fu-v span { font-size: 12px; color: #6B6B6B; white-space: nowrap; }
.per-page .crv-vue .crv-fu-top { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #4D4D4D; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-fu-top span { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.per-page .crv-vue .crv-fu-top span:hover { color: #0D0D0D; text-decoration: underline; text-underline-offset: 2px; }

/* ── Les lanceurs vers les graphes en grand ── */
.per-page .crv-vue .crv-lanceurs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: #6B6B6B; }
/* La page impose à tout bouton 14 px, gras 700 et 24 px de rayon (!important, déclarée après) :
   la classe doublée l'emporte. */
.per-page .crv-vue button.crv-lance.crv-lance { margin-top: 0 !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 650 !important; padding: 7px 12px !important; }
.per-page .crv-vue button.crv-lance i { font-size: 12px; }

/* ── La répartition des notes ── */
.per-page .crv-vue .crv-hi { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; height: 250px; align-items: end; padding-top: 6px; flex: 1 1 auto; }
.per-page .crv-vue .crv-hi-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; gap: 4px; }
.per-page .crv-vue .crv-hi-c i { display: block; border-radius: 5px 5px 2px 2px; min-height: 2px; }
.per-page .crv-vue .crv-hi-n { text-align: center; font-size: 12px; font-weight: 700; color: #3D3D3D; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-hi-l { text-align: center; font-size: 11px; color: #8A8A8A; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Le trilemme des stablecoins ── */
.per-page .crv-vue .crv-tri { display: flex; flex-direction: column; gap: 6px; }
.per-page .crv-vue .crv-tri-l { display: grid; grid-template-columns: 230px minmax(80px, 1fr) 56px minmax(0, 1.1fr); gap: 12px; align-items: center; font-size: 13px; padding: 3px 0; }
.per-page .crv-vue .crv-tri-p { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.per-page .crv-vue .crv-tri-p i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.per-page .crv-vue .crv-tri-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: #4D4D4D; min-width: 0; }
.per-page .crv-vue .crv-tri-s span { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.per-page .crv-vue .crv-tri-s span:hover { color: #0F766E; text-decoration: underline; text-underline-offset: 2px; }
.per-page .crv-vue .crv-tri-s em { font-style: normal; color: #8A8A8A; }

/* ── Les parts du marché entier (aire 100 %) et « qui grossit » à côté ── */
.per-page .crv-vue .crv-pm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: stretch; }
.per-page .crv-vue .crv-pm-g { display: flex; flex-direction: column; min-width: 0; }
.per-page .crv-vue .crv-pm-q { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; border-radius: 10px; background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); }
.per-page .crv-vue .crv-pm-qt { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; border-bottom: 1px solid rgba(13,13,13,.08); }
.per-page .crv-vue .crv-pm-qt span { font-size: 12px; color: #6B6B6B; }
.per-page .crv-vue .crv-pm-qt b { font-size: 22px; font-weight: 750; color: #1F1F1F; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.per-page .crv-vue .crv-pm-qt em { font-style: normal; font-size: 12px; color: #8A8A8A; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-pm-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 5px; column-gap: 10px; }
.per-page .crv-vue .crv-pm-n { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 650; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.per-page .crv-vue .crv-pm-n i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }
.per-page .crv-vue .crv-pm-d { font-size: 14px; font-weight: 750; color: #1F1F1F; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .crv-vue .crv-pm-b { grid-column: 1 / -1; position: relative; height: 12px; }
.per-page .crv-vue .crv-pm-z { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #C9C9C9; }
.per-page .crv-vue .crv-pm-bar { position: absolute; top: 1px; height: 10px; border-radius: 3px; }
.per-page .crv-vue .crv-pm-x { grid-column: 1 / -1; font-size: 11.5px; color: #6B6B6B; font-variant-numeric: tabular-nums; }
.per-page .crv-vue .crv-pm-lec { margin: auto 0 0; font-size: 11.5px; color: #8A8A8A; line-height: 1.4; }

/* ── L'en-tête du détail, juste au-dessus des blocs anciens ── */
.per-page .crv-vue .crv-suite { margin-top: 8px; }
.per-page .crv-vue .crv-suite .fs-note-plus { margin-left: 4px; }

@media (max-width: 900px) {
  .per-page .crv-vue .crv-co { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px; }
  .per-page .crv-vue .crv-co-c { display: none; }
  .per-page .crv-vue .crv-fu-l { grid-template-columns: minmax(0, 1fr) 110px; }
  .per-page .crv-vue .crv-fu-t { grid-row: auto; grid-column: 1 / -1; }
  .per-page .crv-vue .crv-fu-b, .per-page .crv-vue .crv-fu-top { grid-column: 1; }
  .per-page .crv-vue .crv-fu-v { grid-column: 2; grid-row: 2 / span 2; }
  .per-page .crv-vue .crv-tri-l { grid-template-columns: minmax(0, 1fr) 80px 50px; }
  .per-page .crv-vue .crv-tri-s { grid-column: 1 / -1; }
  .per-page .crv-vue .crv-pm { grid-template-columns: minmax(0, 1fr); }
}

/* ══ LES BLOCS ANCIENS REPRIS DANS LES RUBRIQUES ══════════════════════════ */
/* Alignés sur la vue : l'ancien conteneur avait ses propres marges (40 px de chaque côté). */
.per-page #per-tab-narratives.vs-onglet > .per-container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
/* Le tableau des narratifs : son ancien titre et son chapeau sont remplacés par l'en-tête
   de la rubrique (« Le tableau des narratifs »). */
.per-page #per-tab-narratives.vs-onglet .per-chart-container[data-vs="narratifs"] > .per-chart-header { display: none; }
.per-page #per-tab-narratives.vs-onglet .per-chart-container[data-vs="narratifs"] { padding-top: 14px; padding-left: 18px; padding-right: 18px; }
/* Une rubrique suivie de blocs anciens : pas de grand vide entre son en-tête et eux. */
.per-page #per-tab-narratives.vs-onglet > .vs-haut > .crv-vue.obl-vue-rub { padding-bottom: 4px; }
/* Le tableau des narratifs : 15 colonnes sur 1 400 px imposés → 11 colonnes, sans
   largeur minimale, en-têtes sur une ligne (l'unité suit le nom au lieu de passer dessous). */
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund { min-width: 0 !important; width: 100% !important; table-layout: auto !important; font-size: 12px !important; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund col { width: auto !important; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund th:nth-child(4), .per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:nth-child(4),
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund th:nth-child(6), .per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:nth-child(6),
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund th:nth-child(14), .per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:nth-child(14),
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund th:nth-child(15), .per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:nth-child(15) { display: none !important; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund thead th { font-size: 11px !important; letter-spacing: .02em !important; padding: 0 5px 8px !important; height: 40px !important; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund thead th[data-unit]::after { display: none; }
/* Les trois « Perf » ne se distinguent que par leur unité (7 jours, 30 jours, 1 an) : elle suit le nom. */
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund thead th:nth-child(n+11):nth-child(-n+13)[data-unit]::after { display: inline; margin: 0 0 0 4px; font-size: 10px; letter-spacing: 0; text-transform: lowercase; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund td { padding: 0 5px !important; white-space: nowrap; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:first-child { max-width: 186px; overflow: hidden; text-overflow: ellipsis; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:first-child > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.per-page #per-tab-narratives.vs-onglet #perTableNarrFund td:first-child * { white-space: nowrap; }

/* Les 200 cryptos : 13 colonnes sur 1 180 px imposés → 11 colonnes (Capi / FDV et
   FDV / TVL restent dans chaque fiche), la famille en une ligne tronquée. */
.per-page #per-tab-narratives.vs-onglet .cry-table { min-width: 0 !important; }
.per-page #per-tab-narratives.vs-onglet .cry-table th:nth-child(6), .per-page #per-tab-narratives.vs-onglet .cry-table td:nth-child(6),
.per-page #per-tab-narratives.vs-onglet .cry-table th:nth-child(9), .per-page #per-tab-narratives.vs-onglet .cry-table td:nth-child(9) { display: none !important; }
.per-page #per-tab-narratives.vs-onglet .cry-table .cry-fam { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.per-page #per-tab-narratives.vs-onglet .cry-table .cry-nom em { max-width: 150px; }

/* La liste des stablecoins : son propre titre est remplacé par celui de la rubrique. */
.per-page #per-tab-narratives.vs-onglet #stc-liste .stc-liste-tete { display: none; }
.per-page #per-tab-narratives.vs-onglet #stc-liste .stc-liste-defil { overflow-x: visible; }

/* Le capital-risque : la vue vit d'ordinaire dans le pool caché (ouverte en fenêtre) ;
   dans sa rubrique, elle s'affiche en place. Son titre est celui de la rubrique. */
.per-page #per-tab-narratives[data-vs-rub="capital"] #per-nfund-vizpool { display: block !important; }
.per-page #per-tab-narratives.vs-onglet #viz-nfund-raises > .per-raises-head .per-chart-title,
.per-page #per-tab-narratives.vs-onglet #viz-nfund-raises > .per-raises-head .per-chart-subtitle { display: none; }
.per-page #per-tab-narratives.vs-onglet #viz-nfund-raises > .per-raises-head { justify-content: flex-end; margin-bottom: 0; }

/* « Toutes les autres », par narratif (02/10/2026) */
.per-page .crv-vue .crv-regl { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.per-page .crv-vue .crv-pn-q { max-height: 520px; }
.per-page .crv-vue .crv-pn-l { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 4px; min-height: 0; }
.per-page .crv-vue .crv-pn-r[role=button] { cursor: pointer; border-radius: 6px; padding: 3px 4px; margin: -3px -4px; }
.per-page .crv-vue .crv-pn-r[role=button]:hover, .per-page .crv-vue .crv-pn-r[role=button]:focus-visible { background: rgba(13,13,13,.045); outline: none; }
.per-page .crv-vue .crv-pn-l .crv-pm-r { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
.per-page .crv-vue .crv-pn-l .crv-pm-n { font-size: 12.5px; }
.per-page .crv-vue .crv-pn-l .crv-pm-d { font-size: 13px; }
.per-page .crv-vue .crv-pn-l .crv-pm-b { height: 8px; }
.per-page .crv-vue .crv-pn-l .crv-pm-bar { height: 6px; }
.per-page .crv-vue .crv-pn-l .crv-pm-x { font-size: 11px; }
.per-page .crv-vue .crv-pn-q { max-height: 640px; }