/* ============================================================
   PARAMÈTRES DE STYLE — modifiez librement les valeurs ci-dessous
   ============================================================ */
:root{
  /* --- Couleurs de fond --- */
  --bg: #0A0E1A;              /* fond général de la page */
  --panel: #10162A;           /* fond du bloc contenant le graphique */
  --panel-bottom: #0C1122;    /* dégradé bas du bloc */
  --grid: #1D2440;            /* couleur des lignes de grille du graphique */

  /* --- Couleurs de texte --- */
  --text-main: #E8ECFB;       /* titre principal */
  --text-dim: #6B7492;        /* sous-titres, axes, légendes */

  /* --- Couleur de la courbe "Ouverture de compte" (dégradé) --- */
  --courbe-a-debut: #22D3EE;  /* cyan */
  --courbe-a-fin: #7C5CFF;    /* violet */

  /* --- Couleur de la courbe "Installs" (dégradé) --- */
  --courbe-b-debut: #FF2E92;  /* magenta */
  --courbe-b-fin: #FF8A3D;    /* orange */

  /* --- Halos décoratifs en arrière-plan --- */
  --halo-1: rgba(124,92,255,0.10);
  --halo-2: rgba(255,46,146,0.08);

  /* --- Typographie --- */
  --font-titre: 'Sora', sans-serif;
  --font-data: 'JetBrains Mono', monospace;

  /* --- Dimensions --- */
  --largeur-max: 980px;
  --hauteur-graphique: 420px;
  --hauteur-graphique-mobile: 320px;
  --rayon-coins: 20px;
}

* { box-sizing: border-box; }

/* ============================================================
   BACK BUTTON (Fixed en haut à gauche)
   ============================================================ */
.back-btn {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 1000;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  
  padding: 0.8rem 1.4rem;
  background: linear-gradient(135deg, var(--courbe-a-debut), var(--courbe-a-fin));
  color: #fff;
  text-decoration: none;
  font-family: var(--font-data);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  
  border: none;
  cursor: pointer;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}

.back-btn:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .back-btn {
    top: 1rem;
    left: 1rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .back-btn {
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.75rem;
  }
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 10%, var(--halo-1), transparent 40%),
    radial-gradient(circle at 80% 90%, var(--halo-2), transparent 40%),
    var(--bg);
  font-family: var(--font-titre);
  color: var(--text-main);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 16px;
}

.panel{
  width:100%;
  max-width: var(--largeur-max);
  background: linear-gradient(180deg, var(--panel), var(--panel-bottom));
  border: 1px solid rgba(124,92,255,0.18);
  border-radius: var(--rayon-coins);
  padding: 32px 28px 20px;
  box-shadow: 0 0 60px rgba(34,211,238,0.06), 0 20px 50px rgba(0,0,0,0.4);
}

.eyebrow{
  font-family: var(--font-data);
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--courbe-a-debut);
  margin: 0 0 70px;
}

h1{
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}

.subtitle{
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 20px;
  display:flex;
  align-items:center;
  gap:8px;
}

.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--courbe-a-debut);
  box-shadow: 0 0 8px var(--courbe-a-debut);
  display:inline-block;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}

.legend{
  display:flex; gap:20px; margin-bottom: 12px; flex-wrap: wrap;
}

.legend-item{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-dim);
}

.swatch{
  width:16px; height:3px; border-radius:2px;
}
.swatch-a{ background: linear-gradient(90deg, var(--courbe-a-debut), var(--courbe-a-fin)); }
.swatch-b{ background: linear-gradient(90deg, var(--courbe-b-debut), var(--courbe-b-fin)); }

.chart-wrap{
  position:relative;
  height: var(--hauteur-graphique);
}

@media (max-width:600px){
  .chart-wrap{ height: var(--hauteur-graphique-mobile); }
  h1{ font-size:18px; }
  .panel{ padding:22px 16px 14px; }
}

.page{
  width:100%;
  max-width: var(--largeur-max);
  display:flex;
  flex-direction:column;
  gap:24px;
}

.page .panel{
  max-width:none;
}