/* ------------------------------------------------------------------
   schema.css — la section du système : le titre, les six cartes, les deux phrases.
   Les cartes disent ce qui entre et ce qui ressort, en une ligne chacune.
   Une seule carte dorée sur toute la page : SÉRIEUX → agenda.
   Quand la lumière d'un trajet arrive sur une carte de sortie, elle s'allume (is-hit,
   posée par schema-flow.js) : vite allumée, lentement éteinte.
   La profondeur (aurore, verre) : schema-depth.css. Le rail et la constellation :
   schema-core.css. Les faisceaux, les flèches et les mises en page : schema-layout.css.
   ------------------------------------------------------------------ */

.schema {
  padding-block: 80px;
}

.schema-wrap {
  max-width: 1320px;
}

.schema-title {
  margin-bottom: 44px;
  text-align: center;
}

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.lane {
  display: grid;
  gap: 10px;
}

/* --- Une carte d'entrée ou de sortie : pleine, un liseré d'or en haut, une ombre profonde.
       Le contenu est centré dans la carte : sur grand écran, les cartes sont étirées à la même
       hauteur pour que leurs centres tombent exactement sur les faisceaux. --- */
.node {
  position: relative;
  display: grid;
  align-content: center;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(var(--card-rgb) / 0.9), rgb(var(--deep-rgb) / 0.9));
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-rgb) / 0.1),
    0 20px 50px rgb(var(--black-rgb) / 0.45);
  transition: border-color 500ms ease-out, box-shadow 500ms ease-out, transform 300ms ease-out;
}

.node:hover {
  border-color: rgb(var(--gold-rgb) / 0.4);
  transform: translateY(-2px);
}

.node-name {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.node-to {
  margin-left: 4px;
  color: var(--soft);
  font-weight: 400;
}

.node-text {
  margin-top: 4px;
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* La troisième entrée dit l'avenir sans le promettre : bord en pointillés, ton retenu */
.src-later {
  border-style: dashed;
  border-color: rgb(var(--white-rgb) / 0.16);
  background: rgb(var(--deep-rgb) / 0.35);
  box-shadow: none;
}

.src-later .node-name {
  color: var(--soft);
}

/* --- La sortie qui compte : la seule carte dorée de la page. Filet d'or, fond à peine
       plus clair, lueur douce : le second point de fixation après le titre. --- */
.out-gold {
  border-color: rgb(var(--gold-rgb) / 0.45);
  background:
    linear-gradient(145deg, rgb(var(--gold-rgb) / 0.12), rgb(var(--gold-rgb) / 0.02)),
    linear-gradient(145deg, rgb(var(--card-rgb) / 0.95), rgb(var(--deep-rgb) / 0.95));
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-rgb) / 0.25),
    0 20px 50px rgb(var(--black-rgb) / 0.45),
    0 0 48px rgb(var(--gold-rgb) / 0.14);
}

.out-gold:hover {
  border-color: rgb(var(--gold-rgb) / 0.7);
}

.out-gold .node-name {
  color: var(--gold-bright);
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.out-gold .node-to {
  color: var(--gold);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.out-gold .node-text {
  color: var(--white);
}

/* --- La lumière arrive : la carte s'allume en 120 ms, s'éteint en 500 ms --- */
.node.is-hit {
  border-color: rgb(var(--soft-rgb) / 0.7);
  box-shadow:
    inset 0 1px 0 rgb(var(--soft-rgb) / 0.3),
    0 20px 50px rgb(var(--black-rgb) / 0.45),
    0 0 36px rgb(var(--soft-rgb) / 0.2);
  transition-duration: 120ms;
}

.out-gold.is-hit {
  border-color: rgb(var(--gold-rgb) / 0.95);
  box-shadow:
    inset 0 1px 0 rgb(var(--gold-rgb) / 0.4),
    0 20px 50px rgb(var(--black-rgb) / 0.45),
    0 0 64px rgb(var(--gold-rgb) / 0.38);
}

/* --- Sous le schéma : deux phrases, en italique --- */
.schema-lines {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 48px auto 0;
  color: rgb(var(--white-rgb) / 0.88);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .schema {
    padding-block: 56px;
  }

  .schema-title {
    margin-bottom: 32px;
  }

  .node {
    padding: 12px 16px;
  }

  .schema-lines {
    margin-top: 40px;
    font-size: 1.125rem;
  }
}

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

  .node:hover {
    transform: none;
  }
}