#phoenix-citadel-experience {
  --citadel-bg: #060708;
  --citadel-bg-soft: #101214;
  --citadel-gold: #DDA311;
  --citadel-bronze: #B38E58;
  --citadel-green: #28A418;
  --citadel-text: #F5F5F5;
  --citadel-muted: #A1A1AA;
  --citadel-border: rgba(255,255,255,0.12);

  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at center, var(--citadel-bg-soft) 0%, var(--citadel-bg) 70%);
  color: var(--citadel-text);
  overflow: hidden;
  font-family: inherit;
  isolation: isolate;
}

.citadel-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--citadel-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--citadel-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events: none;
}

.skip-intro {
  position: absolute; top: 24px; right: 24px; z-index: 50;
  background: transparent; border: 1px solid var(--citadel-border);
  color: var(--citadel-muted); padding: 8px 14px; border-radius: 999px;
  font-size: 12px; cursor: pointer; transition: 0.3s;
}
.skip-intro:hover { border-color: var(--citadel-gold); color: var(--citadel-gold); }

/* ---------- PHASE 1 : INTRO ---------- */
.phoenix-intro {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
.phoenix-mark { width: 220px; height: 220px; position: relative; z-index: 2; overflow: visible; }

/* Sphère filaire */
.phoenix-wireframe {
  opacity: 0; transform-origin: 100px 100px;
  transition: opacity 1s ease;
  animation: phoenix-sphere-rotate 40s linear infinite;
  animation-play-state: paused;
}
#phoenix-citadel-experience[data-state="intro"] .phoenix-wireframe,
#phoenix-citadel-experience[data-state="building"] .phoenix-wireframe {
  opacity: 0.55; animation-play-state: running;
}
@keyframes phoenix-sphere-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Facettes du Phoenix low-poly */
.facet {
  opacity: 0; transform-origin: 100px 100px;
  transform: scale(0.4);
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.facet:nth-child(1)  { transition-delay: 0.02s; }
.facet:nth-child(2)  { transition-delay: 0.06s; }
.facet:nth-child(3)  { transition-delay: 0.10s; }
.facet:nth-child(4)  { transition-delay: 0.14s; }
.facet:nth-child(5)  { transition-delay: 0.18s; }
.facet:nth-child(6)  { transition-delay: 0.22s; }
.facet:nth-child(7)  { transition-delay: 0.26s; }
.facet:nth-child(8)  { transition-delay: 0.30s; }
.facet:nth-child(9)  { transition-delay: 0.34s; }
.facet:nth-child(10) { transition-delay: 0.38s; }
.facet:nth-child(11) { transition-delay: 0.42s; }
.facet:nth-child(12) { transition-delay: 0.46s; }
.facet:nth-child(13) { transition-delay: 0.50s; }
.facet:nth-child(14) { transition-delay: 0.54s; }

#phoenix-citadel-experience[data-state="intro"] .facet {
  opacity: 1; transform: scale(1) translate(0,0) rotate(0deg);
}

#phoenix-citadel-experience[data-state="building"] .facet {
  opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.6);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.55, 0, 1, 0.45);
}

#phoenix-citadel-experience[data-state="building"] .phoenix-intro,
#phoenix-citadel-experience[data-state="navigation"] .phoenix-intro,
#phoenix-citadel-experience[data-state="focus"] .phoenix-intro {
  opacity: 0; pointer-events: none;
}

.keyword-cloud span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) translate(0,0);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--citadel-muted); opacity: 0; white-space: nowrap;
  border-bottom: 1px solid var(--citadel-border); padding-bottom: 2px;
  transition: opacity 0.6s ease, transform 1s ease;
  transition-delay: var(--d);
}
#phoenix-citadel-experience[data-state="intro"] .keyword-cloud span {
  opacity: 1; transform: translate(-50%,-50%) translate(var(--x), var(--y));
}

/* ---------- PHASE 2/3 : CITADELLE ---------- */
.citadel-wrapper {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 1s ease, transform 1s ease;
  transform: scale(0.92);
}
#phoenix-citadel-experience[data-state="navigation"] .citadel-wrapper,
#phoenix-citadel-experience[data-state="focus"] .citadel-wrapper {
  opacity: 1; transform: scale(1);
}

.citadel-wheel { width: min(460px, 80vw); height: min(460px, 80vw); position: relative; z-index: 2; overflow: visible; }

.citadel-petal {
  cursor: pointer; outline: none;
  transition: filter 0.3s ease, opacity 0.4s ease;
  opacity: 0; transform-origin: 200px 200px;
}
#phoenix-citadel-experience[data-state="navigation"] .citadel-petal,
#phoenix-citadel-experience[data-state="focus"] .citadel-petal {
  opacity: 1;
}
.citadel-petal:nth-of-type(1) { transition-delay: 0.05s; }
.citadel-petal:nth-of-type(2) { transition-delay: 0.1s; }
.citadel-petal:nth-of-type(3) { transition-delay: 0.15s; }
.citadel-petal:nth-of-type(4) { transition-delay: 0.2s; }
.citadel-petal:nth-of-type(5) { transition-delay: 0.25s; }
.citadel-petal:nth-of-type(6) { transition-delay: 0.3s; }

.petal-shape {
  stroke: var(--citadel-bg);
  stroke-width: 2;
  transition: filter 0.3s ease, transform 0.3s ease;
  transform-origin: 200px 200px;
}
.citadel-petal:nth-of-type(1) .petal-shape { fill: #6E55A3; }
.citadel-petal:nth-of-type(2) .petal-shape { fill: #B38E58; }
.citadel-petal:nth-of-type(3) .petal-shape { fill: #1B6E6E; }
.citadel-petal:nth-of-type(4) .petal-shape { fill: #8C2F39; }
.citadel-petal:nth-of-type(5) .petal-shape { fill: #2F5C8C; }
.citadel-petal:nth-of-type(6) .petal-shape { fill: #4F7A3B; }

.citadel-petal:hover .petal-shape,
.citadel-petal:focus-visible .petal-shape {
  filter: brightness(1.25) drop-shadow(0 0 10px rgba(221,163,17,0.55));
}

.petal-label {
  fill: var(--citadel-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  text-transform: uppercase;
}

.citadel-hub {
  fill: var(--citadel-bg-soft);
  stroke: var(--citadel-gold);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}
#phoenix-citadel-experience[data-state="navigation"] .citadel-hub,
#phoenix-citadel-experience[data-state="focus"] .citadel-hub { opacity: 1; }

.citadel-hub-label {
  fill: var(--citadel-gold);
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}
#phoenix-citadel-experience[data-state="navigation"] .citadel-hub-label,
#phoenix-citadel-experience[data-state="focus"] .citadel-hub-label { opacity: 1; }

#phoenix-citadel-experience[data-state="focus"] .citadel-petal:not(.active) {
  opacity: 0.12;
}
#phoenix-citadel-experience[data-state="focus"] .citadel-petal.active .petal-shape {
  filter: brightness(1.3) drop-shadow(0 0 14px rgba(221,163,17,0.7));
}

.citadel-mobile-list { display: none; }

#phoenix-citadel-experience[data-state="focus"] .citadel-wrapper {
  transform: scale(0.45) translate(-55%, -25%);
}

/* ---------- PHASE 4 : PANNEAU ---------- */
.category-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 90vw);
  background: rgba(16,18,20,0.85); backdrop-filter: blur(14px);
  border-left: 1px solid var(--citadel-border);
  padding: 64px 32px; box-sizing: border-box;
  transform: translateX(100%); transition: transform 0.6s ease; z-index: 10;
  display: flex; flex-direction: column; gap: 16px;
}
#phoenix-citadel-experience[data-state="focus"] .category-panel { transform: translateX(0); }

.return-citadel {
  align-self: flex-start; background: none; border: none; color: var(--citadel-muted);
  font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 12px;
}
.return-citadel:hover { color: var(--citadel-gold); }
.category-title { font-size: 28px; color: var(--citadel-gold); margin: 0; }
.category-description { color: var(--citadel-muted); line-height: 1.6; }
.category-subitems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.category-subitems li {
  padding: 8px 12px; border: 1px solid var(--citadel-border); border-radius: 8px; font-size: 13px;
}
.category-cta {
  margin-top: auto; align-self: flex-start; background: var(--citadel-gold); color: #060708;
  padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px;
  transition: 0.3s;
}
.category-cta:hover { filter: brightness(1.1); }

/* ---------- ACCESSIBILITÉ / PERFORMANCE ---------- */
@media (prefers-reduced-motion: reduce) {
  #phoenix-citadel-experience * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .keyword-cloud { display: none; }
  .citadel-wheel { display: none; }

  .citadel-mobile-list {
    display: flex; flex-direction: column; gap: 10px; width: 80vw; max-width: 320px;
  }
  .citadel-mobile-list button {
    background: rgba(16,18,20,0.7); border: 1px solid var(--citadel-border);
    color: var(--citadel-text); padding: 12px 16px; border-radius: 10px;
    font-size: 13px; text-align: left; cursor: pointer; transition: 0.3s ease;
  }
  .citadel-mobile-list button:hover,
  .citadel-mobile-list button:focus-visible {
    border-color: var(--citadel-gold); color: var(--citadel-gold);
  }
  #phoenix-citadel-experience[data-state="focus"] .citadel-mobile-list button:not(.active) {
    opacity: 0.3;
  }

  .category-panel { width: 100%; border-left: none; }
  #phoenix-citadel-experience[data-state="focus"] .citadel-wrapper { transform: none; }
  #phoenix-citadel-experience[data-state="focus"] .citadel-wheel { display: none; }
}