:root {
  --c-primary: #4fc3dc;
  --c-primary-darker: #4fc3dc44;
  --c-secondary-lighter: #ff2d75;
  --c-secondary: #ff2d7544;
  --c-pale: #a9d2e7;
  --bg: #0c192c;
  --surface: #0f1c2e;
  --surface-2: #142440;
  --white: #ffffff;
  --police: "Space Grotesk", "Segoe UI Variable", system-ui, sans-serif;
  --r-contenant: 16px;
  --r-champ: 8px;
  --r-pilule: 999px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
  color: var(--white);
  background: radial-gradient(1200px 600px at 20% -10%, #14304a 0%, var(--bg) 55%) fixed;
}

[hidden] { display: none !important; }

/* Bulles : derrière tout, jamais cliquables. */
.bulles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bulle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 8px var(--c-primary);
  animation: rise linear infinite;
  opacity: 0;
}
.bulle.rose { background: var(--c-secondary-lighter); box-shadow: 0 0 8px var(--c-secondary-lighter); }
@keyframes rise {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(-20vh) scale(1); opacity: .85; }
}
@keyframes bright { 0%, 100% { color: #fff; } 50% { color: var(--c-primary); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.app, .connexion {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: grid;
  gap: 32px;
}

.entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.entete-droite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titre { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.titre::first-letter { animation: bright 6s ease-in-out infinite; }
.sous-titre { margin: 2px 0 0; color: var(--c-pale); }

.flux { font-size: .85rem; color: var(--c-pale); display: inline-flex; align-items: center; gap: 8px; }
.flux::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); box-shadow: 0 0 8px var(--c-primary);
}
.flux.coupe::before { background: var(--c-secondary-lighter); box-shadow: 0 0 8px var(--c-secondary-lighter); animation: pulse 1.2s infinite; }

.section { display: grid; gap: 8px; }
.section-titre {
  margin: 0; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-pale);
}

/* Le direct : le héros de l'écran, seul à porter le grand halo. */
/* Le halo déborde de 60px : on lui laisse la place au lieu de le coller aux sections voisines. */
.direct { display: grid; gap: 16px; margin: 20px 0 40px; }
.carte {
  background: var(--surface);
  border: 1px solid #ffffff14;
  border-radius: var(--r-contenant);
  padding: 20px;
}
.carte-direct {
  display: grid; gap: 14px;
  box-shadow: 0 0 0 6px var(--c-secondary), 0 0 30px #ff2d75, 0 0 60px #ff2d75;
  border-color: #ff2d7566;
}
.carte-direct.attend { box-shadow: 0 0 0 3px var(--c-primary-darker), 0 0 16px #4fc3dc40; border-color: #4fc3dc55; }
.carte-direct .projet { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.carte-direct .description { margin: -6px 0 0; font-size: 1.05rem; color: var(--c-pale); }
.carte-direct .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--c-pale); font-size: .95rem; margin: 0; }
.carte-direct .agent-en-cours { font-size: 1.25rem; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-direct .agent-en-cours .depuis { color: var(--c-pale); font-size: .95rem; font-weight: 400; }
.carte-direct .outil { color: var(--c-pale); font-size: .95rem; }
.vide { color: var(--c-pale); margin: 0; padding: 20px 0; }

.badge {
  display: inline-flex; align-items: center; padding: 3px 12px;
  border-radius: var(--r-pilule); font-size: .8rem; font-weight: 500;
  background: var(--c-primary-darker); color: var(--c-primary);
}
.badge.rose { background: var(--c-secondary); color: #ff6b9c; }
.badge.travaille::before {
  content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: currentColor; animation: pulse 1.6s infinite;
}

.colonnes { display: grid; gap: 32px; align-items: start; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; background: var(--surface); border: 1px solid #ffffff0f; border-radius: 10px;
}
.ligne .principal { font-weight: 500; }
.ligne .secondaire { color: var(--c-pale); font-size: .875rem; }
.ligne .droite { text-align: right; color: var(--c-pale); font-size: .875rem; white-space: nowrap; }
.ligne-bouton {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  min-height: 44px;
}
.ligne-bouton:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-secondary), 0 0 16px #ff2d7540; }
.ligne-bouton[aria-current="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-darker); }

.liste-evenements .ligne { padding: 8px 14px; border-radius: 6px; }
.detail-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.bouton {
  font: inherit; font-weight: 500; cursor: pointer; min-height: 44px; padding: 10px 20px;
  border-radius: var(--r-pilule); border: 1px solid transparent; box-shadow: none;
  color: var(--white); background: var(--surface-2);
}
.bouton-principal {
  /* Rose foncé : le blanc doit tenir 4,5:1 dessus (5,1 mesuré), le halo garde le rose plein. */
  background: #d41f58; color: var(--white);
  box-shadow: 0 0 0 3px var(--c-secondary), 0 0 16px #ff2d7540;
}
.bouton-ghost { background: transparent; border-color: #ffffff2a; color: var(--c-pale); box-shadow: none; }
.bouton-block { width: 100%; }
.bouton:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-secondary), 0 0 16px #ff2d7540; }
.section-titre:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.fin { display: none; }

/* Bascule liste / carte : la vue en cours porte l'anneau, pas le remplissage. */
.vues { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #ffffff2a; border-radius: var(--r-pilule); }
.vue {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pilule); color: var(--c-pale); text-decoration: none; font-weight: 500; font-size: .9rem;
}
.vue[aria-current="page"] { color: var(--white); box-shadow: 0 0 0 2px var(--c-primary-darker), 0 0 12px #4fc3dc40; }
/* Anneau opaque : le rose translucide seul ne se voit pas sur le fond nuit (1,3:1 mesuré). */
.vue:focus-visible { outline: none; color: var(--white); box-shadow: 0 0 0 2px var(--c-secondary-lighter), 0 0 16px #ff2d7560; }

/* La carte : une scène qui se saisit, un monde qu'on déplace et qu'on zoome dedans. */
.app:has(#vue-carte:not([hidden])) { max-width: 1440px; }
.carte-vue { display: grid; gap: 8px; }
.carte-barre { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.carte-resume { margin: 0; color: var(--c-pale); font-size: .9rem; flex: 1; }
.carte-commandes { display: flex; gap: 8px; align-items: center; }
.bouton-rond { width: 44px; padding: 0; font-size: 1.4rem; line-height: 1; border-color: #ffffff2a; background: transparent; color: var(--c-pale); }
.carte-scene {
  position: relative; overflow: hidden; height: min(78vh, 900px); min-height: 420px;
  border: 1px solid #ffffff14; border-radius: var(--r-contenant); background-color: var(--bg);
  background-image: radial-gradient(#4fc3dc26 1px, transparent 1.5px); background-size: 26px 26px;
  cursor: grab; touch-action: none; user-select: none;
}
.carte-scene.saisie { cursor: grabbing; }
.carte-scene:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-darker); }
.carte-monde { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.carte-liens { position: absolute; top: 0; left: 0; overflow: visible; }
.carte-noeuds { position: absolute; top: 0; left: 0; }
.carte-vide { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }

.lien { fill: none; stroke: #4fc3dc55; stroke-width: 2; }
.lien.actif { stroke: var(--c-primary); stroke-dasharray: 5 11; stroke-linecap: round; animation: couler 1.1s linear infinite; }
.lien-agent.actif { stroke: var(--c-secondary-lighter); }
.lien.pointille { stroke-dasharray: 2 8; stroke: #4fc3dc33; animation: none; }
@keyframes couler { to { stroke-dashoffset: -16; } }

.noeud {
  position: absolute; top: 0; left: 0; display: grid; gap: 4px; align-content: center;
  padding: 14px 18px; background: var(--surface); border: 1px solid #ffffff1a; border-radius: var(--r-contenant);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
.noeud-role { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pale); }
.noeud-titre { font-weight: 700; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.noeud-sous, .noeud-depuis { color: var(--c-pale); font-size: .85rem; }
.noeud-projet .noeud-titre { font-size: 1.35rem; letter-spacing: -.02em; }
/* Claude est le héros de chaque bloc : seul à porter le grand halo, et il respire tant qu'il travaille. */
.noeud-claude.travaille { border-color: #ff2d7566; box-shadow: 0 0 0 6px var(--c-secondary), 0 0 18px #ff2d75, 0 0 36px #ff2d7580; }
/* La respiration anime l'opacité d'un calque, pas l'ombre : animer box-shadow sous un scale() fait trembler toute la carte. */
.noeud-claude.travaille::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 0 30px #ff2d75, 0 0 60px #ff2d75; animation: respire 3.2s ease-in-out infinite;
}
.noeud-claude.attend { border-color: #4fc3dc55; box-shadow: 0 0 0 3px var(--c-primary-darker), 0 0 16px #4fc3dc40; }
.noeud-claude .badge { justify-self: start; }
.noeud-agent { border-color: #ff2d7544; }
.noeud-outil { border-radius: var(--r-champ); background: #4fc3dc22; border-color: #4fc3dc33; padding: 10px 16px; }
.noeud-outil .noeud-titre { color: var(--c-primary); font-size: .95rem; font-weight: 500; }
.noeud-outil .noeud-role { color: var(--c-primary); }
@keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.noeud.surgit { animation: surgit .5s cubic-bezier(.2, .8, .2, 1) both; }
.noeud.disparait { animation: disparait .35s ease-in both; pointer-events: none; }
@keyframes surgit { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes disparait { to { opacity: 0; scale: .8; } }

.connexion { min-height: 100vh; align-content: center; }
.carte-connexion {
  display: grid; gap: 16px; max-width: 380px; width: 100%; margin: 0 auto;
  box-shadow: 0 0 0 6px var(--c-secondary), 0 0 30px #ff2d75, 0 0 60px #ff2d75;
}
.champ { display: grid; gap: 6px; color: var(--c-pale); font-size: .9rem; }
.champ input {
  font: inherit; color: var(--white); background: var(--bg);
  border: 1px solid #ffffff2a; border-radius: var(--r-champ); padding: 12px 14px; min-height: 44px;
}
.champ input:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-darker); }
.erreur { margin: 0; min-height: 1.4em; color: #ff8fb3; font-size: .9rem; }

@media (min-width: 900px) {
  .app { padding: 32px 24px 80px; }
  .colonnes { grid-template-columns: 1fr 1fr; }
  .direct { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .carte-direct .projet { font-size: 2.4rem; }
  .bouton-block { width: 100%; }
}

@media (hover: hover) and (pointer: fine) {
  .bouton:hover { filter: brightness(1.15); }
  .vue:hover { color: var(--white); }
  .ligne-bouton:hover { border-color: var(--c-primary-darker); }
}

@media (prefers-reduced-motion: reduce) {
  .bulle, .titre::first-letter, .flux.coupe::before, .badge.travaille::before, .lien, .noeud,
  .noeud.surgit, .noeud.disparait, .noeud-claude.travaille::after { animation: none; }
  .noeud { transition: none; }
  .noeud.disparait { opacity: 0; }
  .bulle { display: none; }
}