/* ===== Thème / Variables globales ===== */
:root{
  --bg:#121212;
  --panel:#1b1b1b;
  --ring:#2a2a2a;
  --text:#f5f5f5;
  --muted:#9aa0a6;
  --accent:#3ABEF9;
  --gold:#FFD277;
  --shadow:0 12px 28px rgba(0,0,0,.45);

  /* Rayon de l'orbite (cercle pointillé + positionnement des bulles) */
  --R: clamp(160px, 34vw, 300px);
}

/* ===== Reset de base ===== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
}

body{
  min-block-size:100svh; /* fiable mobile */
  background: radial-gradient(1000px 1000px at 50% 30%, #171717 0%, #0e0e0e 60%) fixed;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ===== Header / Footer ===== */
.top{
  text-align:center;
  padding:10px;
}
.top h1{
  font-size:clamp(1.2rem,2.6vw,2rem);
}
.top h1 span{
  color:var(--accent);
}
.sub{
  color:var(--muted);
  margin-top:4px;
}
.foot{
  padding:20px;
  color:var(--muted);
}

/* =======================================================================
   HUB (cercle central + bulles en orbite)
   ======================================================================= */
.hub{
  position:relative;
  width:min(92vw, 860px);
  aspect-ratio:1 / 1;
  margin:18px auto;
  border-radius:50%;
  isolation:isolate;

  /* Active les unités cqw/cqh à l'intérieur */
  container-type:size;
}

/* Cercle pointillé centré avec le rayon global --R */
.hub::before{
  content:"";
  position:absolute;
  width:calc(var(--R) * 2);
  height:calc(var(--R) * 2);
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px dashed var(--ring);
  pointer-events:none;
  opacity:.85;
}

/* =======================================================================
   BULLES ORBITALES
   Chaque .node utilise un angle différent (--angle)
   et se place à distance --radius autour du centre.
   ======================================================================= */
.node{
  --angle:0deg;
  --node:clamp(90px, 14cqw, 130px);      /* diamètre de la bulle */
  --radius:var(--R);                     /* distance centre → centre bulle
                                            (si tu veux que le cercle soit tangent
                                             au bord des bulles, mets:
                                             --radius: calc(var(--R) - var(--node)/2); ) */

  position:absolute;
  left:50%;
  top:50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--radius))
    rotate(calc(-1 * var(--angle)));
  transform-origin:center;

  width:var(--node);
  height:var(--node);
  border-radius:50%;
  background:linear-gradient(180deg,#1f1f1f,#161616);
  border:1px solid #2b2b2b;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text);
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.node img{
  width:56%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.node span{
  font-size:clamp(.75rem,1.6cqw,.95rem);
  line-height:1.15;
  padding:0 6px;
  word-break:break-word;
}

/* Hover = pousse légèrement la bulle vers l'extérieur */
.node:hover{
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(calc(var(--radius) + 6px))
    rotate(calc(-1 * var(--angle)));
  border-color:#3ABEF9;
  box-shadow:0 0 26px rgba(58,190,249,.28);
}

/* Badges de statut optionnels */
.node[data-status]::after{
  content:attr(data-status);
  position:absolute;
  top:-6px;
  right:-6px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.2px;
  background:#263238;
  color:#cde7f6;
  border:1px solid #345;
  padding:4px 6px;
  border-radius:7px;
}
.node[data-status="FINAL"]::after{
  background:#0f2b12;
  color:#d7ffd9;
  border-color:#205c27;
}
.node[data-status="WIP"]::after{
  background:#392a00;
  color:#ffe7a9;
  border-color:#6c5600;
}
.node[data-status="DEMO"]::after{
  background:#001d2b;
  color:#cde7f6;
  border-color:#00405f;
}

/* =======================================================================
   BULLE CENTRALE
   ======================================================================= */
.center{
  --radius:0px;
  --node:clamp(120px, 20cqw, 160px);

  position:absolute;
  left:50%;
  top:50%;
  width:var(--node);
  height:var(--node);
  border-radius:50%;
  transform:translate(-50%, -50%);
  z-index:2;

  border:1px solid #333;
  background:radial-gradient(circle at 50% 30%, #202020 0%, #101010 70%);
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.center img{
  width:60%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

.center span{
  color:var(--gold);
  font-weight:700;
  text-align:center;
  margin-top:6px;
  font-size:clamp(.8rem,1.5cqw,1rem);
  line-height:1.2;
}

/* =======================================================================
   ANGLES (8 bulles autour du centre)
   nth-of-type(1) = .center, donc on commence à 2
   Ajuste le nombre de .node en HTML pour matcher ces angles.
   ======================================================================= */
.node:nth-of-type(2){ --angle:   0deg; }  /* nord        */
.node:nth-of-type(3){ --angle:  45deg; }  /* nord-est    */
.node:nth-of-type(4){ --angle:  90deg; }  /* est         */
.node:nth-of-type(5){ --angle: 135deg; }  /* sud-est     */
.node:nth-of-type(6){ --angle: 180deg; }  /* sud         */
.node:nth-of-type(7){ --angle: 225deg; }  /* sud-ouest   */
.node:nth-of-type(8){ --angle: 270deg; }  /* ouest       */
.node:nth-of-type(9){ --angle: 315deg; }  /* nord-ouest  */

/* =======================================================================
   PETITS ÉCRANS
   ======================================================================= */
@media (max-width:520px){
  .hub{
    width:90vw;
  }

  /* bulles un peu plus petites sur mobile */
  .node{
    --node:clamp(76px, 18cqw, 110px);
  }
}