/* Wiki Pulse – mouvement. Règle du Mouvement Utile : une animation joue une fois à l'entrée dans la vue, puis
   s'arrête. Sous prefers-reduced-motion, tout s'affiche dans son état final. */

/* --- Révélations au défilement ------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revele, .revele-flou, .revele-gauche, .revele-droite {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-timing-function: ease-out;
      animation-timeline: view();
      animation-range: entry 10% contain 25%;
    }
    .revele { animation-name: monter-fondu; }
    .revele-flou { animation-name: fondu-flou; }
    .revele-gauche { animation-name: entrer-gauche; }
    .revele-droite { animation-name: entrer-droite; }
  }
}
@keyframes monter-fondu { from { opacity: 0; transform: translateY(24px); } }
@keyframes fondu-flou { from { opacity: 0; filter: blur(8px); } }
@keyframes entrer-gauche { from { opacity: 0; transform: translateX(-32px); } }
@keyframes entrer-droite { from { opacity: 0; transform: translateX(32px); } }

/* --- Animations des flux (lecteur : wiki/js/animations.js) ---------------------------------------------
   Un élément marqué .e1 … .e12 apparaît quand la figure reçoit la classe .vu-1 … .vu-12.
   Sans JS (pas de .anim-pret), tout est visible d'emblée. */

.anim {
  margin: 0 0 32px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-3xl);
  box-shadow: var(--ombre-surface);
}
.anim svg { display: block; width: 100%; height: auto; overflow: visible; }
.anim figcaption { margin-top: 16px; color: var(--texte-secondaire); font-size: var(--texte-sm); }
.anim-commandes { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.anim-commandes .anim-etat { margin-left: auto; color: var(--texte-secondaire); font-size: var(--texte-xs); }

.anim-pret :is(.e1, .e2, .e3, .e4, .e5, .e6, .e7, .e8, .e9, .e10, .e11, .e12) {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
  transform-box: fill-box;
}
.anim-pret.vu-1 .e1, .anim-pret.vu-2 .e2, .anim-pret.vu-3 .e3, .anim-pret.vu-4 .e4,
.anim-pret.vu-5 .e5, .anim-pret.vu-6 .e6, .anim-pret.vu-7 .e7, .anim-pret.vu-8 .e8,
.anim-pret.vu-9 .e9, .anim-pret.vu-10 .e10, .anim-pret.vu-11 .e11, .anim-pret.vu-12 .e12 {
  opacity: 1;
  transform: none;
}
/* Tracés qui se dessinent : pathLength="1" sur le chemin. */
.anim-pret .trace { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms ease; }
.anim-pret.vu-1 .trace.e1, .anim-pret.vu-2 .trace.e2, .anim-pret.vu-3 .trace.e3, .anim-pret.vu-4 .trace.e4,
.anim-pret.vu-5 .trace.e5, .anim-pret.vu-6 .trace.e6, .anim-pret.vu-7 .trace.e7, .anim-pret.vu-8 .trace.e8,
.anim-pret.vu-9 .trace.e9, .anim-pret.vu-10 .trace.e10, .anim-pret.vu-11 .trace.e11, .anim-pret.vu-12 .trace.e12 {
  stroke-dashoffset: 0;
}
/* L'étape en cours est mise en avant. */
.anim .actif-halo { opacity: 0; transition: opacity 400ms ease; }
.anim .en-cours .actif-halo { opacity: 1; }

/* Éléments communs des schémas */
.schema-boite { fill: var(--surface-attenuee); stroke: var(--lisere-remanent); stroke-width: 1.5; }
.schema-boite-active { fill: var(--primaire-eteint); stroke: var(--orange-incandescent); stroke-width: 1.5; }
.schema-texte { fill: var(--blanc-de-trait); font: 600 14px var(--police); }
.schema-texte-secondaire { fill: var(--gris-de-veille); font: 500 12px var(--police); }
.schema-fleche { fill: none; stroke: var(--gris-de-veille); stroke-width: 1.5; }
.schema-accompagne { fill: none; stroke: var(--mauve-remanence); stroke-width: 1.5; }

/* --- Visuel biotechnologique (héros) ------------------------------------------------------------------- */

.visage { width: 100%; max-width: 460px; margin-inline: auto; display: block; }
.visage .contour { fill: none; stroke: var(--blanc-de-trait); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.visage .detail { fill: none; stroke: var(--blanc-de-trait); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.visage .piste { fill: none; stroke: var(--mauve-remanence); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.visage .noeud { fill: var(--noir-de-chambre); stroke: var(--mauve-remanence); stroke-width: 1.4; }
.visage .noeud-chaud { fill: var(--orange-incandescent); stroke: none; }
.visage .pouls { fill: none; stroke: url(#degrade-trainee); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.visage .halo { fill: url(#halo-chaud); }

@media (prefers-reduced-motion: no-preference) {
  .visage .contour, .visage .detail, .visage .piste, .visage .pouls { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .visage .contour { animation: tracer 1.8s cubic-bezier(.6, 0, .3, 1) .2s forwards; }
  .visage .detail { animation: tracer 0.8s ease-out 1.6s forwards; }
  .visage .piste { animation: tracer 0.9s ease-out forwards; animation-delay: calc(1.9s + var(--i, 0) * 90ms); }
  .visage .noeud, .visage .noeud-chaud { opacity: 0; transform-box: fill-box; transform-origin: center; animation: allumer 0.5s ease-out forwards; animation-delay: calc(2.4s + var(--i, 0) * 80ms); }
  .visage .pouls { animation: tracer 1.4s cubic-bezier(.5, 0, .2, 1) 3.1s forwards; }
  .visage .halo { opacity: 0; animation: halo 1.6s ease-out 3.4s forwards; }
}
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes allumer { 0% { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes halo { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0.55; } }

/* --- Conversations simulées (wiki/js/console.js) ------------------------------------------------------- */

.conversation {
  margin: 0 0 24px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-2xl);
  overflow: hidden;
}
.conversation-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--lisere);
  color: var(--texte-secondaire);
  font-size: var(--texte-xs);
}
.conversation-barre .bouton { margin-left: auto; height: 1.75rem; }
.conversation-fil { padding: 16px; display: grid; gap: 12px; }
.conversation p {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--rayon-xl);
  font-size: var(--texte-sm);
  line-height: 1.6;
  white-space: pre-line;
}
.conversation p::before {
  display: block;
  margin-bottom: 2px;
  font-size: var(--texte-xs);
  font-weight: 600;
  color: var(--texte-secondaire);
}
.conversation p[data-role="vous"] { background: var(--primaire-eteint); justify-self: end; max-width: 85%; }
.conversation p[data-role="vous"]::before { content: "Vous"; color: var(--primaire); }
.conversation p[data-role="claude"] { background: var(--surface-attenuee); max-width: 92%; }
.conversation p[data-role="claude"]::before { content: "Claude (Pulse)"; color: var(--accompagne); }
.conversation p[data-role="outil"] { font-family: var(--police-code); font-size: var(--texte-xs); color: var(--texte-secondaire); border: 1px dashed var(--lisere); }
.conversation p[data-role="outil"]::before { content: "Dans les coulisses"; font-family: var(--police); }
.conversation code { font-size: 0.9em; }

.conversation-prete p { transition: opacity 300ms ease, transform 300ms ease; }
.conversation-prete p.cache { opacity: 0; transform: translateY(6px); }
.conversation-prete p.frappe::after { content: "▍"; color: var(--accompagne); margin-left: 1px; }

/* --- Séparateur en vague ------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .vague path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 2.4s ease-out forwards; }
  @supports (animation-timeline: view()) {
    .vague path { animation: tracer linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .carte, .bouton { transition: none; }
  .cta:hover .lettre { animation: none; }
}

/* Schémas de parcours : couleur de l'étape (échelle de maturité) doublée du numéro et du nom. */
.schema-boite-etape { fill: var(--surface-attenuee); stroke: var(--etape); stroke-width: 1.5; stroke-opacity: 0.7; }
.schema-boite-toujours { fill: none; stroke: var(--lisere-remanent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.schema-numero { fill: var(--etape); font: 600 13px var(--police); }
.schema-halo { fill: none; stroke: var(--etape); stroke-width: 2; filter: drop-shadow(0 0 8px var(--etape)); }
.schema-pouls { fill: none; stroke: var(--orange-incandescent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.schema-pointe { fill: var(--mauve-remanence); }
.schema-halo-primaire { fill: none; stroke: var(--orange-incandescent); stroke-width: 2; filter: drop-shadow(0 0 8px var(--orange-incandescent)); }
.schema-pointe-grise { fill: var(--gris-de-veille); }