:root {
      --bg: #0f172a;          /* slate-900 */
      --panel: #111827;       /* gray-900 */
      --muted: #94a3b8;       /* slate-400 */
      --text: #e5e7eb;        /* gray-200 */
      --accent: #22c55e;      /* green-500 */
      --border: #1f2937;      /* gray-800 */
      --card: #0b1220;        /* deeper slate */
      --card2:#0e1628;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 10% -20%, #1b2a4a 0%, transparent 60%), radial-gradient(800px 400px at 90% 0%, #10213f 0%, transparent 55%), var(--bg);
      color: var(--text);
      min-height: 100vh;
    }
    header {
      padding: 20px clamp(16px,4vw,32px);
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(6px);
    }
    h1 { margin: 0; font-weight: 700; letter-spacing: .2px; }
    .sub { color: var(--muted); font-size: .95rem; margin-top: 6px; }

    /* Tabs */
   .tabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap; /* <-- empêche le retour à la ligne */
  overflow-x: auto;  /* permet de scroller si trop large pour l’écran */
  padding: 14px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.tab-btn {
  appearance: none;
  border: 1px solid var(--border);
  color: var(--text);
  background: linear-gradient(180deg, #0c1426, #0a1220);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 0 rgba(34,197,94,0);
  flex: 0 0 auto; /* empêche le bouton de se réduire */
}
    .tab-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
    .tab-btn.active { border-color: rgba(34,197,94,.35); box-shadow: 0 0 0 3px rgba(34,197,94,.15); color: #bbf7d0; }

    main { padding: 20px clamp(16px,4vw,32px) 60px; }
    .tab-panel { display: none; gap: 20px; }
    .tab-panel.active { display: grid; }
    .panel-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 420px;
      gap: 20px;
      align-items: start;
    }

    /* Left = form area */
    .card {
      background: linear-gradient(180deg, var(--card), var(--card2));
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
    }
    .card h2 { margin: 0 0 6px; }
    .consignes { color: var(--muted); font-size: .92rem; margin-bottom: 12px; line-height: 1.4; }
    .series-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);   /* 2 colonnes → 2 séries par ligne, lisible */
      gap: 12px;
    }
    @media (max-width: 1100px) {
      .panel-grid { grid-template-columns: 1fr; }
      .series-grid { grid-template-columns: 1fr; }
    }

    .serie {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(180deg,#0b1220,#0a101d);
    }
    .serie header {
      padding: 10px 12px;
      background: linear-gradient(180deg,#0f1a31,#0c1426);
      border-bottom: 1px solid var(--border);
      position: initial;
    }
    .serie header h3 { margin: 0; font-size: 1rem; letter-spacing: .3px; }
    .table-wrap { overflow: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .95rem;
    }
    th, td {
      border-bottom: 1px solid var(--border);
      padding: 8px 10px;
      text-align: center;
      white-space: nowrap;
    }
    th { color: #c7d2fe; font-weight: 700; background: rgba(99,102,241,.05); }
    td.qtext { text-align: left; min-width: 280px; }
    .qnum {
      display: inline-block;
      min-width: 32px;
      text-align: right;
      color: #93c5fd;
      margin-right: 8px;
      font-variant-numeric: tabular-nums;
    }

    /* Right = chart area */
    .chart-card {
      background: linear-gradient(180deg, #091225, #081020);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      position: sticky;
      top: 90px;
    }
    .chart-card h3 { margin-top: 0; }
    canvas { width: 100%; max-width: 100%; }

    /* Recap table */
    .totals {
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .totals table { width: 100%; }
    .totals th { text-align: left; }
    .totals td { text-align: right; }
    .muted { color: var(--muted); }



#series-aptitudes {
  display: flex;
  flex-wrap: wrap; /* Permet de créer de nouvelles lignes lorsque c'est nécessaire */
  gap: 40px; /* Espacement entre les séries */
}

/* Chaque série aura une taille fixe */
#series-aptitudes .serie {
  width: calc(95% - 20px); /* 4 séries par ligne avec un espacement de 20px */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #0b1220, #0a101d);
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden; /* Empêche les débordements horizontaux */
}

/* Styles des titres dans les séries */
.serie header {
  padding: 10px;
  background: linear-gradient(180deg, #0f1a31, #0c1426);
  color: #e5e7eb;
}

/* Styles des questions */
.serie .question {
  white-space: normal; /* Permet au texte de se couper à la ligne */
  word-wrap: break-word; /* Casse les mots trop longs */
  overflow-wrap: break-word; /* Compatibilité avec tous les navigateurs */
  margin-bottom: 12px; /* Espace sous chaque question */
}

/* Ajouter un retour à la ligne manuel si besoin */
.serie .question p {
  display: block;
  white-space: pre-wrap; /* Utiliser les retours à la ligne dans le texte */
  word-break: break-word; /* S'assurer que les mots longs sont coupés */
}

/* Styles pour les boutons radio */
.serie .question label {
  display: inline-block;
  margin-right: 10px;
}

/* S'assurer que les radios sont alignés correctement et bien visibles */
.serie .question input[type="radio"] {
  margin-right: 5px;
}

/* Empêcher les boutons radios de créer un scroll horizontal */
.serie .question {
  display: flex;
  flex-wrap: wrap; /* Permet aux radios de se placer correctement */
  gap: 10px; /* Espacement entre les radios */
}


/* Container pour les séries de personnalités */
#series-personnalites {
  display: flex;
  flex-direction: column; /* Chaque série sera une ligne distincte */
  gap: 20px; /* Espacement entre les séries */
}

/* Chaque série de personnalité aura une largeur de 100% */
#series-personnalites .serie {
  width: 100%; /* Chaque série prend toute la largeur disponible */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #0b1220, #0a101d);
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden; /* Empêche les débordements horizontaux */
}

/* Styles des titres dans les séries */
.serie header {
  padding: 10px;
  background: linear-gradient(180deg, #0f1a31, #0c1426);
  color: #e5e7eb;
}

/* Styles des questions dans les séries */
.serie .question {
  white-space: normal; /* Permet au texte de se couper à la ligne */
  word-wrap: break-word; /* Casse les mots trop longs */
  overflow-wrap: break-word; /* Compatibilité avec tous les navigateurs */
  margin-bottom: 12px; /* Espace sous chaque question */
}

/* Ajouter un retour à la ligne manuel si besoin */
.serie .question p {
  display: block;
  white-space: pre-wrap; /* Utiliser les retours à la ligne dans le texte */
  word-break: break-word; /* S'assurer que les mots longs sont coupés */
}

/* Styles pour les boutons radio */
.serie .question label {
  display: inline-block;
  margin-right: 10px;
}

/* S'assurer que les radios sont alignés correctement et bien visibles */
.serie .question input[type="radio"] {
  margin-right: 5px;
}

/* Empêcher les boutons radios de créer un scroll horizontal */
.serie .question {
  display: flex;
  flex-wrap: wrap; /* Permet aux radios de se placer correctement */
  gap: 10px; /* Espacement entre les radios */
}

#popup {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
}

#popup-content {
  background:white;
  padding:20px;
  border-radius:10px;
  max-width:400px;
  position:relative;
}

#close {
  position:absolute;
  top:10px; right:10px;
  cursor:pointer;
}