:root{
  /* Variables globales réutilisables partout (thème du site) */

  --bg:#0b0d12;
  /* Couleur de fond principale */

  --panel:#121626;
  /* Couleur de fond des panels */

  --card:#151b30;
  /* Couleur de fond des cartes */

  --stroke:rgba(255,255,255,.08);
  /* Couleur des bordures en transparent */

  --text:#e9ecff;
  /* Couleur principale du texte */

  --muted:rgba(233,236,255,.7);
  /* Texte secondaire plus “gris” */

  --accent:#7c5cff;
  /* Couleur accent violet */

  --accent2:#2ee7ff;
  /* Couleur accent cyan */

  --shadow: 0 12px 40px rgba(0,0,0,.45);
  /* Ombre utilisée sur les éléments */

  --radius:18px;
  /* Arrondi des coins (border-radius) */
}

*{box-sizing:border-box}
 /* Important : le padding/border est inclus dans la largeur, plus simple à gérer */

html,body{height:100%}
 /* Hauteur full page */

body{
  margin:0;
  /* Enlève les marges par défaut du navigateur */

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  /* Définit les polices (liste de secours) */

  background: radial-gradient(900px 500px at 10% 0%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(46,231,255,.18), transparent 60%),
              var(--bg);
  /* Fond avec 2 halos colorés + couleur de fond */

  color:var(--text);
  /* Couleur du texte */
}

a{color:inherit}
 /* Les liens gardent la même couleur que le texte */

.container{
  max-width:1100px;
  /* Largeur max du contenu */

  margin:26px auto;
  /* Centre la page + marge en haut */

  padding:0 18px;
  /* Espace sur les côtés */
}

.topbar{
  position:sticky;
  /* Barre collée en haut quand on scroll */

  top:0;
  /* Collée tout en haut */

  z-index:50;
  /* Elle passe devant les autres éléments */

  display:flex;
  /* Alignement en ligne (flexbox) */

  gap:14px;
  /* Espacement entre les blocs */

  align-items:center;
  /* Aligne verticalement */

  justify-content:space-between;
  /* Espace entre gauche et droite */

  padding:14px 18px;
  /* Padding intérieur */

  background: rgba(11,13,18,.7);
  /* Fond semi transparent */

  backdrop-filter: blur(14px);
  /* Effet flou derrière (style glass) */

  border-bottom:1px solid var(--stroke);
  /* Bordure fine en bas */
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  /* Logo + titre alignés */
}

.logo img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(91,140,255,0.6));
}
header{
  height: 100px;              /* hauteur FIXE */
  display: flex;
  align-items: center;       /* centre verticalement */
}

.title{font-weight:800;letter-spacing:.2px}
 /* Titre en gras + légère séparation des lettres */

.subtitle{font-size:12px;color:var(--muted)}
 /* Sous titre petit + couleur secondaire */

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  /* Barre boutons navigation */
}

.tab{
  border:1px solid var(--stroke);
  /* Bordure */

  background: rgba(255,255,255,.03);
  /* Fond léger */

  color:var(--text);
  /* Texte */

  padding:9px 12px;
  /* Taille du bouton */

  border-radius:999px;
  /* Bouton “pill” arrondi */

  cursor:pointer;
  /* Curseur main */

  transition:.15s transform, .15s background, .15s border;
  /* Animation quand hover */
}

.tab:hover{transform: translateY(-1px)}
 /* Petit lift au survol */

.tab.active{
  background: rgba(124,92,255,.2);
  border-color: rgba(124,92,255,.45);
  /* Style du bouton actif */
}

.userbox{
  display:flex;
  gap:10px;
  align-items:center;
  /* Zone utilisateur */
}

.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  /* Étiquette arrondie */
}

.panel{
  border:1px solid var(--stroke);
  /* Bordure panel */

  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  /* Fond léger */

  border-radius: var(--radius);
  /* Coins arrondis */

  padding:18px;
  /* Espace intérieur */

  box-shadow: var(--shadow);
  /* Ombre */
}

.panel-head h1{margin:0 0 6px 0;font-size:26px}
 /* Style du grand titre */

.panel-head p{margin:0;color:var(--muted)}
 /* Style texte sous titre */

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* 2 colonnes égales */

  gap:14px;
  margin-top:14px;
}

@media (max-width: 900px){
  .grid2{grid-template-columns:1fr}
  /* Sur mobile : 1 seule colonne */
}

.card{
  border:1px solid var(--stroke);
  background: rgba(21,27,48,.8);
  border-radius: var(--radius);
  padding:16px;
  /* Carte = bloc de contenu */
}

.card h2{margin:0 0 10px 0;font-size:18px}
.card h3{margin:14px 0 8px 0;font-size:15px}
/* Styles titres dans les cartes */

.row{display:flex;gap:12px}
 /* Ligne avec plusieurs champs */

@media (max-width: 600px){.row{flex-direction:column}}
 /* Sur petit écran, les champs passent en colonne */

.field{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
 /* Champ formulaire : label + input */

label{font-size:12px;color:var(--muted)}
 /* Style labels */

input,select{
  padding:11px 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  /* Fond léger */

  color: var(--text);
  /* ✅ Couleur texte (corrige ton ancien black(--text)) */

  outline:none;
}

input:focus,select:focus{border-color: rgba(46,231,255,.55)}
 /* Bordure cyan quand on clique dans un champ */

.btn{
  border:none;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(46,231,255,.8));
  color:#0b0d12;
  font-weight:800;
  padding:11px 14px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: var(--shadow);
}
 /* Bouton principal */

.btn.ghost{
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  color:var(--text);
  box-shadow:none;
}
 /* Bouton “ghost” (transparent) */

.btn:active{transform: translateY(1px)}
 /* Effet quand on clique */

.mt{margin-top:12px}
 /* Classe utilitaire marge top */

.small{font-size:12px}
 /* Texte petit */

.muted{color:var(--muted)}
 /* Texte plus discret */

.advice{
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:12px;
  min-height: 120px;
}
 /* Zone de conseils */

.list{display:flex;flex-direction:column;gap:10px}
 /* Liste verticale */

.item{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:12px;
}
 /* Élément de liste (card mini) */

.item .meta{font-size:12px;color:var(--muted);margin-top:6px}
 /* Texte meta (petit gris) */

.rank-strip{display:flex;flex-wrap:wrap;gap:8px}
 /* Bande de badges */

.badge{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  font-size:12px;
}
 /* Badge rank */

.footer{
  padding:18px;
  text-align:center;
  border-top:1px solid var(--stroke);
  margin-top:24px;
}

.hint{
  color: var(--text);
  font-weight: 800;
}

.bigNumber{
  margin-top: 8px;
  font-size: 34px;
  font-weight: 900;
}

/* ===== FIX MENU SELECT (fond blanc illisible) ===== */

select{
  background-color: var(--card);
  /* Fond sombre dans le select */

  color: var(--text);
  /* Texte clair dans le select */
}

option{
  background-color: var(--card);
  /* Fond sombre des options */

  color: var(--text);
  /* Texte clair des options */
}

/* ====== AIM ANALYZER (résultat propre) ====== */

#aimReport{
  padding:14px;
  /* Espace dans la zone résultat */
}

.aimGrid{
  display:grid;
  /* Grille des 3 cartes */

  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  /* Responsive : 3 colonnes sur grand écran, 1 sur petit */

  gap:12px;
  /* Espacement entre cartes */

  margin-top:12px;
  /* Marge haut */
}

.aimCard{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  /* Fond glass */

  border:1px solid var(--stroke);
  /* Bordure fine */

  border-radius:14px;
  /* Arrondi */

  padding:14px;
  /* Padding */
}

.aimTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  font-weight:900;
  margin-bottom:10px;
  /* Titre + badge sur la même ligne */
}

.aimBadge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;

  background: rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.35);
  /* Badge violet par défaut */
}

.aimOk{
  background: rgba(46,231,255,.14);
  border-color: rgba(46,231,255,.45);
  /* Badge OK (cyan) */
}

.aimWarn{
  background: rgba(255,170,120,.14);
  border-color: rgba(255,170,120,.45);
  /* Badge warning (orange) */
}

.aimList{
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-direction:column;
  gap:6px;
  /* Liste verticale compacte */
}

.aimList li{
  display:flex;
  justify-content:space-between;
  gap:10px;

  padding:8px 10px;
  border-radius:10px;

  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.05);
  /* Ligne lisible */
}

.aimKey{
  color:var(--muted);
  /* Texte label discret */
}

.aimVal{
  font-weight:900;
  /* Valeur forte */
}

.aimTip{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  /* Texte conseil */
}