/* ------------------------------------------------------------------
   schema-layout.css — les faisceaux du schéma, les flèches, et ses trois mises en page :
   empilée (téléphone), en rangées (768-1 359 px), de gauche à droite (1 360 px et plus).
   Un faisceau est un tracé SVG de 1,5 px qui part du centre d'une carte et converge vers
   l'entrée du rail (ou en repart vers une carte). Trois SVG par colonne, un par mise en
   page ; les autres en display: none. Sans script, les extrémités sont aux sixièmes de la
   colonne ; avec, schema-scene.js les recale sur les positions réelles.
   La lumière qui glisse sur un faisceau (.pulse) est un clone créé par schema-flow.js.
   ------------------------------------------------------------------ */

/* --- Les faisceaux --- */
.beam-col {
  position: relative;
}

/* En absolu : un SVG étiré contribuerait sinon sa hauteur intrinsèque à la rangée */
.beams {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Les dégradés : un seul SVG de 0 × 0, toujours rendu (masqué, ses dégradés ne seraient plus résolus) */
.beam-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.bl {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.bl-gold {
  stroke-width: 2;
}

/* La troisième entrée : ce qui viendra, en pointillés (en parts du tracé : pathLength = 1) */
.bl-later {
  stroke-linecap: butt;
  stroke-dasharray: 0.012 0.024;
}

.bs-dim { stop-color: rgb(var(--muted-rgb) / 0.25); }
.bs-lit { stop-color: rgb(var(--soft-rgb) / 0.8); }
.bs-gold-lit { stop-color: var(--gold-bright); }
.bs-gold-dim { stop-color: rgb(var(--gold-rgb) / 0.55); }

/* La lumière : un seul tiret de 0,18 sur une période de 2, que le script pousse d'un bout à l'autre.
   Jamais de stroke-dashoffset ici : c'est le script qui l'écrit. */
.pulse {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-dasharray: 0.18 1.82;
  vector-effect: non-scaling-stroke;
}

.pulse-glow {
  stroke: rgb(var(--gold-rgb) / 0.35);
  stroke-width: 6;
}

/* --- Les flèches : là où la lumière arrive. Sur téléphone, au bout de chaque lien ;
       au-dessus, à l'entrée du rail et au bord de chaque carte de sortie. --- */
.beam-col::after,
.heart::before,
.out::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: solid var(--soft);
  border-width: 1.5px 1.5px 0 0;
  pointer-events: none;
}

.heart::before {
  z-index: 3;
}

.out-gold::before {
  border-color: var(--gold);
  border-width: 2px 2px 0 0;
}

/* --- Téléphone : tout s'empile ; un lien vertical de 32 px de chaque côté du panneau,
       qui ne descend jamais sous 280 px de large --- */
.beam-col {
  height: 32px;
  margin-block: 6px;
}

.beams-v {
  display: block;
}

.beam-col::after {
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%) rotate(135deg);
}

.heart::before,
.out::before {
  content: none;
}

/* Le panneau est placé explicitement : sans cela, la bande des mots (rangée 3 elle aussi)
   le repousserait en rangée 4 au placement automatique */
.heart-wrap {
  grid-row: 3;
  grid-column: 1;
  justify-self: center;
  width: 100%;
  min-width: 280px;
  max-width: 400px;
}

/* Sur téléphone, les mots se posent SUR le panneau : même cellule, même boîte (schema-core.css les place) */
.heart-steps {
  grid-row: 3;
  grid-column: 1;
  z-index: 2;
  justify-self: center;
  width: 100%;
  min-width: 280px;
  max-width: 400px;
  pointer-events: none;
}

/* --- 768 px et plus : les flèches passent sur le panneau et les cartes ; les mots reprennent leur rangée --- */
@media (min-width: 768px) {
  .heart-wrap,
  .heart-steps {
    grid-row: auto;
    grid-column: auto;
    max-width: 640px;
  }

  .heart-steps {
    pointer-events: auto;
  }

  .beam-col {
    height: auto;
    margin-block: 0;
  }

  .beams-v,
  .beam-col::after {
    display: none;
  }

  .heart::before,
  .out::before {
    content: "";
  }
}

/* --- De 768 à 1 359 px : entrées en rangée au-dessus, sorties en dessous, une bande de
       faisceaux de 72 px entre chaque rangée et le panneau. Les centres des cartes tombent
       aux sixièmes de la largeur : les marges sont sur les cartes, jamais un gap. --- */
@media (min-width: 768px) and (max-width: 1359px) {
  .flow-grid {
    grid-template-rows: auto 72px auto auto 72px auto;
    max-width: 800px;
    margin-inline: auto;
  }

  .lane {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .node {
    margin-inline: 7px;
  }

  .beams-y {
    display: block;
  }

  .heart::before,
  .out::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* --- 1 360 px et plus : de gauche à droite, comme on lit. Les cartes sont étirées à la
       hauteur de la rangée, en trois parts égales ; la convergence est au milieu du panneau. --- */
@media (min-width: 1360px) {
  .flow-grid {
    grid-template-columns: 232px 88px minmax(0, 1fr) 88px 264px;
    grid-template-rows: auto 48px;
    align-items: stretch;
    max-width: 1312px;
    margin-inline: auto;
  }

  /* La bande des mots a sa propre rangée : la première ne contient que le panneau et les cartes */
  .heart-steps {
    grid-row: 2;
    grid-column: 3;
    max-width: none;
  }

  .lane {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .node {
    margin-block: 5px;
  }

  .beams-x {
    display: block;
  }

  .heart-wrap {
    align-self: center;
    max-width: none;
  }

  .heart::before,
  .out::before {
    top: 50%;
    left: -10px;
    transform: translateY(-50%) rotate(45deg);
  }
}