/* ------------------------------------------------------------------
   schema-frame.css — le dessin, posé dans le panneau de verre : la scène, son image fixe,
   son canvas, et les trois mots qui nomment les zones sous le panneau. Le cadre lui-même
   ne porte aucun texte : la phrase sous le titre dit ce qu'est un point.
   Sans script, ou sous prefers-reduced-motion, l'image fixe (SVG) est affichée. Quand le
   moteur a pris la main, schema.js pose .is-live sur la section : le canvas la remplace.
   Le canvas n'est jamais en display: none (sa taille doit exister pour être mesurée).
   ------------------------------------------------------------------ */

/* --- La scène : le ratio du dessin (1 000 × 380) ; sur téléphone, 220 px de haut --- */
.stage {
  position: relative;
  aspect-ratio: 1000 / 380;
}

.stage-still,
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage-canvas {
  visibility: hidden;
}

.stage-still-tall {
  display: none;
}

.schema.is-live .stage-canvas {
  visibility: visible;
}

.schema.is-live .stage-still {
  display: none;
}

/* Le cadre ne porte plus aucun texte (23/09) : c'est la phrase sous le titre qui dit ce qu'on regarde */

/* --- L'image fixe : chaque classe reçoit sa couleur des tokens --- */
.sf-cold { stop-color: rgb(var(--zone-cold-rgb) / 0.5); }
.sf-warm { stop-color: rgb(var(--zone-warm-rgb) / 0.7); }
.sf-sep-end { stop-color: rgb(var(--accent-rgb) / 0); }
.sf-sep-mid { stop-color: rgb(var(--accent-rgb) / 0.32); }
.sf-rail-from { stop-color: rgb(var(--accent-rgb) / 0.2); }
.sf-rail-to { stop-color: rgb(var(--accent-bright-rgb) / 0.7); }
.sf-halo-in { stop-color: rgb(var(--accent-rgb) / 0.12); }
.sf-halo-out { stop-color: rgb(var(--accent-rgb) / 0); }

.sf-env-line,
.sf-sep,
.sf-rail,
.sf-grid {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sf-env-line { stroke: rgb(var(--soft-rgb) / 0.11); }
.sf-grid { stroke: rgb(var(--soft-rgb) / 0.04); }
.sf-rail { stroke-width: 1.3; }
.sf-sep-dot { fill: var(--accent); }
.sf-dot-faint { fill: rgb(var(--soft-rgb) / 0.25); }
/* Les rejetées rangées : la même opacité que dans le canvas */
.sf-rest { fill: rgb(var(--soft-rgb) / 0.32); }
.sf-dot-mid { fill: rgb(var(--soft-rgb) / 0.42); }
.sf-dot-lit { fill: rgb(var(--soft-rgb) / 0.72); }
.sf-gold { fill: var(--accent-bright); }

/* --- Les trois mots : le nom de chaque zone, centré sur elle. La bande a la largeur du
       panneau ; le dessin y est en retrait de 12 px de chaque côté. --- */
.zones {
  --inset: 12px;
  position: relative;
  height: 40px;
  color: var(--soft);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.zone {
  position: absolute;
  top: 16px;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 500ms ease-out, text-shadow 500ms ease-out;
}

.zone-1 { left: calc(var(--inset) + (100% - 2 * var(--inset)) * 0.195); }
.zone-2 { left: calc(var(--inset) + (100% - 2 * var(--inset)) * 0.475); }
.zone-3 { left: calc(var(--inset) + (100% - 2 * var(--inset)) * 0.775); }

/* Allumé en 120 ms, éteint en 500 ms */
.zone.is-lit {
  color: var(--accent-bright);
  text-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.8);
  transition-duration: 120ms;
}

/* Le traitement ne s'arrête jamais : le mot respire, doucement, tant que le moteur tourne */
@media (prefers-reduced-motion: no-preference) {
  .schema.is-live .zone-1 {
    animation: zone-breathe 2.6s ease-in-out infinite alternate;
  }
}

@keyframes zone-breathe {
  from { color: var(--soft); text-shadow: 0 0 0 rgb(var(--soft-rgb) / 0); }
  to { color: var(--white); text-shadow: 0 0 10px rgb(var(--soft-rgb) / 0.45); }
}

/* --- Sous 768 px : 220 px de haut, l'autre image fixe, les mots en trois colonnes égales --- */
@media (max-width: 767px) {
  .stage {
    aspect-ratio: auto;
    height: 220px;
  }

  .stage-still-wide {
    display: none;
  }

  .stage-still-tall {
    display: block;
  }

  .zones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    padding-top: 14px;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .zone {
    position: static;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zone {
    transition: none;
  }
}