/* Section possibilités — widgets néon lisibles */

.cap-scene {

  position: relative;

  min-height: 440px;

  margin: 0 auto;

  max-width: 100%;

  border-radius: 28px;

  border: 1px solid rgba(124, 138, 255, 0.32);

  background:

    radial-gradient(620px 320px at 28% 18%, rgba(124, 138, 255, 0.14), transparent 60%),

    radial-gradient(520px 300px at 78% 72%, rgba(56, 189, 248, 0.12), transparent 55%),

    radial-gradient(400px 240px at 50% 50%, rgba(192, 132, 252, 0.08), transparent 50%),

    rgba(10, 12, 18, 0.45);

  box-shadow: 0 0 48px rgba(124, 138, 255, 0.1), inset 0 0 60px rgba(124, 138, 255, 0.04);

  overflow: hidden;

}



.cap-scene__glow {

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(124, 138, 255, 0.12), transparent 70%);

  animation: capGlow 9s ease-in-out infinite alternate;

  pointer-events: none;

}



@keyframes capGlow {

  from { opacity: 0.45; transform: scale(1); }

  to { opacity: 1; transform: scale(1.05); }

}



/* Base tuile — verre + néon */

.cap-float {

  --cap-accent: var(--accent);

  position: absolute;

  left: var(--x, 10%);

  top: var(--y, 10%);

  width: clamp(150px, 22vw, 210px);

  padding: 14px 16px;

  border-radius: 16px;

  border: 1px solid color-mix(in srgb, var(--cap-accent) 58%, transparent);

  background: linear-gradient(155deg, rgba(32, 38, 62, 0.94), rgba(20, 24, 42, 0.9));

  backdrop-filter: blur(16px) saturate(1.2);

  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  box-shadow:

    0 10px 30px rgba(0, 0, 0, 0.32),

    0 0 28px color-mix(in srgb, var(--cap-accent) 32%, transparent),

    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  animation: capDrift 9s ease-in-out infinite;

  animation-delay: var(--delay, 0s);

  transition: border-color 0.25s, box-shadow 0.25s, filter 0.25s;

  user-select: none;

  pointer-events: auto;

}

.cap-float:hover {

  border-color: color-mix(in srgb, var(--cap-accent) 78%, transparent);

  box-shadow:

    0 14px 38px rgba(0, 0, 0, 0.36),

    0 0 44px color-mix(in srgb, var(--cap-accent) 48%, transparent),

    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  filter: brightness(1.07);

  animation-play-state: paused;

}



.cap-float::before {

  content: '';

  position: absolute;

  top: 0;

  left: 14px;

  right: 14px;

  height: 2px;

  border-radius: 2px;

  background: var(--cap-accent);

  box-shadow: 0 0 12px var(--cap-accent);

  opacity: 0.95;

}

.cap-float:hover::before {

  opacity: 1;

  box-shadow: 0 0 18px var(--cap-accent);

}



.cap-float header {

  font-family: var(--font-display);

  font-size: 0.74rem;

  font-weight: 600;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  color: #eef0ff;

  text-shadow: 0 0 14px color-mix(in srgb, var(--cap-accent) 70%, transparent);

  margin-bottom: 11px;

}



.cap-float--chart { --cap-accent: #7c8aff; }

.cap-float--planning { --cap-accent: #38bdf8; }

.cap-float--form { --cap-accent: #a78bfa; }

.cap-float--dash { --cap-accent: #818cf8; }

.cap-float--table { --cap-accent: #67e8f9; }

.cap-float--pdf { --cap-accent: #22d3ee; }

.cap-float--workflow { --cap-accent: #c084fc; }



@keyframes capDrift {

  0%, 100% { transform: translate(0, 0) rotate(0deg); }

  33% { transform: translate(8px, -12px) rotate(1.5deg); }

  66% { transform: translate(-6px, 8px) rotate(-1deg); }

}



/* Statistiques */

.cap-chart {

  display: flex;

  align-items: flex-end;

  gap: 5px;

  height: 68px;

  padding: 4px 2px 0;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.2);

}



.cap-chart span {

  flex: 1;

  height: var(--h, 50%);

  border-radius: 4px 4px 0 0;

  background: linear-gradient(180deg, rgba(124, 138, 255, 0.95), rgba(124, 138, 255, 0.25));

  box-shadow: 0 0 10px rgba(124, 138, 255, 0.45);

  animation: capBar 3s ease-in-out infinite alternate;

}



.cap-chart span:nth-child(2) {

  animation-delay: 0.3s;

  background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(56, 189, 248, 0.25));

  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);

}

.cap-chart span:nth-child(3) { animation-delay: 0.6s; }

.cap-chart span:nth-child(4) {

  animation-delay: 0.9s;

  background: linear-gradient(180deg, rgba(192, 132, 252, 0.9), rgba(192, 132, 252, 0.22));

  box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);

}

.cap-chart span:nth-child(5) { animation-delay: 1.2s; }

.cap-chart span:nth-child(6) {

  animation-delay: 1.5s;

  background: linear-gradient(180deg, rgba(251, 191, 36, 0.9), rgba(251, 191, 36, 0.22));

  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);

}



@keyframes capBar {

  from { transform: scaleY(0.88); opacity: 0.82; }

  to { transform: scaleY(1); opacity: 1; }

}



.cap-line {

  height: 7px;

  border-radius: 4px;

  background: rgba(220, 228, 255, 0.22);

  margin-top: 8px;

}



.cap-line--accent {

  width: 65%;

  background: rgba(124, 138, 255, 0.55);

  box-shadow: 0 0 8px rgba(124, 138, 255, 0.5);

}



/* Planning */

.cap-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5px;

  padding: 4px;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.18);

}



.cap-grid span {

  aspect-ratio: 1;

  border-radius: 6px;

  background: rgba(220, 228, 255, 0.12);

  border: 1px solid rgba(220, 228, 255, 0.15);

}



.cap-grid .is-busy {

  background: rgba(56, 189, 248, 0.45);

  border-color: rgba(56, 189, 248, 0.65);

  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);

  animation: capPulse 2s ease infinite;

}



@keyframes capPulse {

  0%, 100% { opacity: 0.75; }

  50% { opacity: 1; }

}



/* Formulaire */

.cap-field {

  height: 11px;

  border-radius: 6px;

  background: rgba(220, 228, 255, 0.28);

  border: 1px solid rgba(167, 139, 250, 0.25);

  margin-bottom: 8px;

}



.cap-field--short { width: 55%; }



.cap-btn {

  height: 24px;

  width: 72px;

  border-radius: 999px;

  margin-top: 4px;

  background: linear-gradient(90deg, rgba(167, 139, 250, 0.85), rgba(56, 189, 248, 0.65));

  box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);

  animation: capBtn 2.5s ease-in-out infinite;

}



@keyframes capBtn {

  0%, 100% { opacity: 0.8; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.04); }

}



/* Tableau de bord KPIs */

.cap-kpis {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 6px;

}



.cap-kpis div {

  padding: 7px 5px;

  border-radius: 9px;

  background: rgba(0, 0, 0, 0.22);

  border: 1px solid rgba(129, 140, 248, 0.35);

  text-align: center;

}



.cap-kpis small {

  display: block;

  font-size: 0.58rem;

  color: rgba(220, 228, 255, 0.75);

  font-weight: 500;

}



.cap-kpis strong {

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: #eef0ff;

  text-shadow: 0 0 12px rgba(129, 140, 248, 0.75);

}



/* Listes & exports */

.cap-rows { display: grid; gap: 7px; }



.cap-row {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr auto;

  gap: 5px;

  align-items: center;

}



.cap-row span:not(.pill) {

  height: 8px;

  border-radius: 4px;

  background: rgba(220, 228, 255, 0.42);

}



.cap-row span:first-child {

  background: rgba(220, 228, 255, 0.58);

}



.pill {

  width: 36px;

  height: 14px;

  border-radius: 999px;

  background: rgba(200, 210, 240, 0.28);

  border: 1px solid rgba(200, 210, 240, 0.2);

}



.pill--ok {

  background: rgba(56, 189, 248, 0.7);

  border-color: rgba(56, 189, 248, 0.55);

  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);

}



.pill--wait {

  background: rgba(251, 191, 36, 0.7);

  border-color: rgba(251, 191, 36, 0.5);

  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);

}



/* Export PDF */

.cap-doc {

  display: flex;

  gap: 8px;

  align-items: flex-end;

  padding: 4px;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.18);

}



.cap-doc__page {

  width: 36px;

  height: 48px;

  border-radius: 4px;

  border: 1px solid rgba(34, 211, 238, 0.55);

  background: rgba(34, 211, 238, 0.18);

  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);

  animation: capDoc 3s ease-in-out infinite;

}



@keyframes capDoc {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-4px); }

}



.cap-doc__lines {

  flex: 1;

  height: 38px;

  background: repeating-linear-gradient(

    180deg,

    rgba(220, 228, 255, 0.45) 0 4px,

    transparent 4px 10px

  );

}



/* Workflow */

.cap-flow {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 6px 4px;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.18);

}



.cap-flow .node {

  width: 16px;

  height: 16px;

  border-radius: 50%;

  border: 2px solid rgba(192, 132, 252, 0.45);

  background: rgba(255, 255, 255, 0.06);

}



.cap-flow .node.is-done {

  background: rgba(124, 138, 255, 0.65);

  border-color: #7c8aff;

  box-shadow: 0 0 12px rgba(124, 138, 255, 0.65);

}



.cap-flow .node.is-active {

  background: rgba(56, 189, 248, 0.65);

  border-color: #38bdf8;

  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75);

  animation: capPulse 1.5s ease infinite;

}



.cap-flow .link {

  flex: 1;

  height: 2px;

  background: linear-gradient(90deg, rgba(124, 138, 255, 0.5), rgba(56, 189, 248, 0.5));

  box-shadow: 0 0 6px rgba(56, 189, 248, 0.35);

}



#possibilites .cap-scene {

  border-color: rgba(56, 189, 248, 0.35);

  box-shadow:

    0 0 48px rgba(56, 189, 248, 0.12),

    inset 0 0 60px rgba(56, 189, 248, 0.04);

}



@media (max-width: 720px) {

  .cap-scene { min-height: 540px; }

  .cap-float { width: 136px; padding: 11px 12px; }

}



@media (prefers-reduced-motion: reduce) {

  .cap-float,

  .cap-chart span,

  .cap-doc__page,

  .cap-btn,

  .cap-grid .is-busy,

  .cap-flow .node.is-active,

  .cap-scene__glow {

    animation: none;

  }

}