@charset "utf-8";
/* CSS Document */

    html, body { margin: 0; overflow: hidden; background: #000; }
    canvas { display: block; }
	#meta-title h1 {  margin:0; font-size:1.3em; font-weight:bold; color:#00FFFF; }
	#meta-date {  flex:1; text-align:left ; font-size: 0.85em; }
	#countdown {  flex:1; text-align:right; font-size: 0.85em;  }
		
	@media (max-width: 768px) {
		#meta-title h1 {  font-size:1.0em;  }
		#meta-date {  font-size:0.65em;  }
		#countdown {  font-size:0.65em;  }
	}
	
		:root{
	  --neon:#00C2FF;
	  --neon-soft: rgba(0,194,255,.18);
	  --bg-glass: rgba(8,12,20,.55);
	
	  /* 🔧 nouveaux réglages “glass” */
	  --glass-alpha: .40;  /* 0 = transparent, 1 = opaque */
	  --glass-blur:  2px;  /* intensité du flou */
	}
	
	/* Barre meta auto-height + fixe */
	#meta-bar{
	  position:fixed; inset:0 auto auto 0; right:0;
	  background: rgba(20,20,20,var(--glass-alpha)); /* avant: rgba(20,20,20,0.78) */
	  color:#EAFEFF; font-family:Arial, system-ui, -apple-system, Segoe UI, Roboto;
	  display:grid; grid-template-columns: 140px 1fr 280px;
	  gap:10px; padding:8px 12px; z-index:9999;
	
	  /* blur plus léger + compat Safari/iOS */
	  backdrop-filter: blur(var(--glass-blur));
	  -webkit-backdrop-filter: blur(var(--glass-blur));
	
	  border-bottom:1px solid rgba(255,255,255,.06); /* avant: .08 */
	
	  /* Limitation hauteur */
	  max-height: 110px;   /* 👈 hauteur max souhaitée */
	  overflow: hidden;    /* cache ce qui dépasse */
	}
  
  
  
	 /* HYBRID: arc décoratif contraint en hauteur */
	#meta-center.style-hybrid {
	  --arc-min-h: 36px;
	  --arc-max-h: 68px;     /* 👉 hauteur max souhaitée */
	}
	 
  
  
  #meta-left{display:flex; align-items:center; justify-content:flex-start}
  #meta-right{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; font-size:.85em}
  #meta-center{display:flex; flex-direction:column; align-items:center; gap:6px}
  #meta-center h1{margin:0; font-size:1.2rem; color:#9BE6FF; text-shadow:0 0 6px rgba(0,194,255,.6)}
  #meta-spacer{height: var(--metaH, 110px);} /* sera ajusté en JS */

  /* Arc SVG (desktop) */
  .metrics-arc{display:block; width:100%; max-width:980px}
  .arc-btn{cursor:pointer; pointer-events: all;}
  .arc-fill{
    fill: rgba(0,194,255,.12);
    stroke: var(--neon); stroke-width:2;
    filter: drop-shadow(0 0 8px rgba(0,194,255,.5));
    transition: opacity .2s ease, transform .2s ease, filter .2s ease;
  }
  .arc-btn:hover .arc-fill{ opacity:.95; filter: drop-shadow(0 0 14px rgba(0,194,255,.9)) }
  .arc-btn.active .arc-fill{
    fill: rgba(0,194,255,.22);
    filter: drop-shadow(0 0 18px rgba(0,194,255,1));
  }
  .arc-label{ fill:#EAFEFF; font: 600 12px/1.1 Arial; pointer-events:none; text-shadow:0 0 6px rgba(0,194,255,.7) }

  /* Pills (mobile) dans la barre, pas en dessous */
  .metrics-pills{ display:none; gap:.6rem; flex-wrap:nowrap; overflow-x:auto; width:100%; padding:.2rem .2rem; }
  .metrics-pills::-webkit-scrollbar{height:6px}
  .metrics-pills::-webkit-scrollbar-thumb{background:rgba(0,194,255,.35); border-radius:6px}
  .metrics-pills button{
    -webkit-tap-highlight-color:transparent;
    white-space:nowrap;
    padding:.45rem .75rem; border:1px solid var(--neon); border-radius:999px;
    background:linear-gradient(to bottom, var(--neon-soft), transparent);
    color:#EAFEFF; font-weight:600; font-size: 0.9rem; /* 👈 Taille du texte ici */ 
	letter-spacing:.2px;
    box-shadow: 0 0 12px rgba(0,194,255,.35), inset 0 0 10px rgba(0,194,255,.15);
    cursor:pointer; transition: transform .12s ease, box-shadow .16s ease;
  }
	.metrics-pills button.active {
	  background: #00C2FF; /* Bleu plein */
	  color: #fff; /* Texte blanc */
	  border-color: #00C2FF;
	  box-shadow: 0 0 20px rgba(0,194,255,.9), 0 0 2px #fff inset;
	}

  /* Responsive */
  @media (max-width: 980px){
    #meta-bar{ grid-template-columns: 120px 1fr 220px }
    #meta-center h1{ font-size:0.8rem }
  }
  @media (max-width: 768px){
    #meta-bar{ grid-template-columns: 64px 1fr; grid-template-areas:
      "left center"
      "right center"; row-gap:6px; align-items:center;
    }
    #meta-left{ grid-area:left }
    #meta-right{ grid-area:right; align-items:flex-start; font-size:.8em; display:none  }
    #meta-center{ grid-area:center }
    .metrics-arc{ display:none }       /* cache l’arc */
    .metrics-pills{ display:flex; 
	    justify-content: center; /* 👈 Centre les boutons horizontalement */
	}     /* montre les pills dans la barre */
	.metrics-pills button {
		font-size: 0.55rem;      /* Texte plus petit */
		padding: .25rem .4rem;   /* Moins de padding horizontal */
		letter-spacing: 0px;     /* Supprimer l'espace entre lettres */
		font-weight: 500;        /* Moins épais que 600 */
		border-radius: 14px;     /* Moins rond → moins large */
		white-space: nowrap;     /* Garde sur une seule ligne */
		max-width: 48px;         /* 👈 Largeur max forcée (à ajuster) */
		overflow: hidden;        /* Cache si texte trop long */
		text-overflow: ellipsis; /* Ajoute "…" si coupé */
	}
    #meta-center h1{ font-size:.8rem; text-align:left }
    #meta-spacer{ height: var(--metaH, 138px) }
  }
  
	/* Aplatissement + lisibilité labels */
	.metrics-arc{ transform: scaleY(.72); transform-origin: 50% 0; }
	.arc-label{ font: 600 11px/1 Arial; }
	
	/* OPTION C : HYBRID ARC + PILLBAR */
	#meta-center.style-hybrid{ position:relative; }
	#meta-center.style-hybrid .metrics-arc{
	  display:block; width:100%; max-width:980px;
	  height: clamp(var(--arc-min-h), 10vh, var(--arc-max-h)); /* borné */
	  opacity:.6; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
	  margin-top:-6px;
	}
	/* réduit le bruit visuel des labels d'arc */
	#meta-center.style-hybrid .arc-label{ opacity:.65; font: 600 10px/1 Arial; }
	
	#meta-center.style-hybrid .metrics-pills{
	  position:absolute; left:50%; transform:translateX(-50%);
	  bottom:8px; display:flex; flex-wrap:wrap; justify-content:center;
	  gap:.4rem; padding:.2rem .3rem; background:rgba(8,12,20,.35);
	  border:1px solid rgba(255,255,255,.08); border-radius:999px;
	  backdrop-filter: blur(6px);
	}
	#meta-center.style-hybrid .metrics-pills button{
	  padding:.34rem .6rem; border:1px solid var(--neon); border-radius:999px;
	  background:rgba(0,194,255,.08);
	  color:#EAFEFF; font-weight:700; font-size:.82rem;
	  box-shadow: inset 0 0 8px rgba(0,194,255,.12);
	}
	#meta-center.style-hybrid .metrics-pills button.active{
	  background:#00C2FF; color:#001018; border-color:#00C2FF;
	  box-shadow:0 0 16px rgba(0,194,255,.85), 0 0 2px #fff inset;
	}
	@media (max-width:768px){
	  #meta-center.style-hybrid .metrics-arc{ display:none; }
	  #meta-center.style-hybrid .metrics-pills{
		position:static; transform:none; background:transparent; border:0; gap:.5rem;
	  }
	  #meta-center.style-hybrid .metrics-pills button{ font-size:.78rem; padding:.36rem .6rem; }
	}
	
	
	#meta-bar{ padding:6px 10px; }
	#meta-spacer{ height: var(--metaH, 86px); }
	@media (max-width:768px){ #meta-spacer{ height: var(--metaH, 104px); } }
	
	
	/* Conteneur avec profondeur et coins propres */
	.cosmic-stage{
	  position:relative;
	  width:100%;
	  height:60vh;            /* ajuste (ex: 70vh desktop, 75vh mobile) */
	  min-height:360px;
	  background:#000;
	  border-radius:16px;
	  overflow:hidden;
	}
	
	/* Canvases superposés */
	.cosmic-stage canvas{
	  position:absolute; inset:0;
	  width:100%; height:100%;
	  display:block;
	}
	#bgCanvas{ z-index:0; }
	
	/* Vignette douce pour le relief et la lisibilité */
	.cosmic-stage .vignette{
	  position:absolute; inset:-10%;
	  pointer-events:none; z-index:2;
	  background: radial-gradient(transparent 60%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100%);
	}
	
	/* Mobile : un peu plus haut */
	@media (max-width: 768px){
	  .cosmic-stage{ height:72vh; }
	}
	
	.tooltip {
	  position: fixed;
	  z-index: 9999;
	  max-width: min(320px, 90vw);
	  background: rgba(18,18,20,0.95);
	  color: #eee;
	  padding: 12px;
	  border: 1px solid #333;
	  border-radius: 10px;
	  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	  font-family: Arial, sans-serif;
	  font-size: 0.85em;
	  line-height: 1.25;         /* + d'air entre les lignes */
	  white-space: normal;       /* évite des lignes anormalement longues */
	}
	
	.tooltip--locked { pointer-events: auto; }
	
	.tooltip-header{
	  display:flex; align-items:center; gap:10px; text-align:center; 
	  margin: -2px 0 6px;   /* petite respiration au-dessus */
	}
	.token-logo{
	  width:32px; height:32px; border-radius:50%;
	  margin:2px; box-shadow:0 0 0 2px rgba(255,255,255,.07);
	  flex:0 0 auto;
	}
	.token-name{ font-weight:700; color:#fff;  }
	
	.spark-wrap{
	  width:100%;
	  height:180px;              /* tu peux passer a 180 si tu préferes */
	  margin:8px 0 14px;
	  position:relative;
	}
	.spark-wrap canvas{
	  display:block;
	  width:100%;
	  height:100%;
	}

	.tooltip-actions{
	  display: flex; 
	  gap: 8px; 
	  justify-content: flex-end; 
	  margin-top: 10px;
	  position: relative;        /* force un nouveau contexte d'empilement */
	  z-index: 5;                /* au-dessus du canvas, sans chevauchement */
	}

	.btn-ghost, .btn-primary {
	  display:inline-flex; align-items:center; justify-content:center;
	  min-height:34px; padding:6px 10px; border-radius:8px;
	  font: inherit; cursor:pointer; border:1px solid #444;
	  background:#1b1b1b; color:#eee; text-decoration:none;
	}
	.btn-primary { border-color:#0af; }
	.btn-ghost:hover, .btn-primary:hover { filter:brightness(1.15); }
	@media (pointer: coarse) { .btn-ghost, .btn-primary { min-height:40px; padding:8px 12px; } }
	
	/* espace clair autour du graph */
	.tooltip .spark-wrap{
	  width:250px;
	  height:180px;          /* <-- avec px ! */
	  margin:8px 0 14px;     /* respire au-dessus et en dessous */
	}