/* ---------- Transition « Matrix » : photo → code (piloté par le défilement) ---------- */
/* overflow-x: hidden sur body en fait un conteneur de défilement et casse position: sticky ; clip coupe sans ce défaut */
body { overflow-x: clip; }

.matrix {
  /* palette du site : fond sombre chaud, doré, terracotta clair, crème */
  --mx-bg: var(--dark);
  --mx-tag: var(--on-dark-accent);      /* balises */
  --mx-attr: var(--accent-deco);        /* attributs */
  --mx-str: var(--on-dark);             /* valeurs */
  --mx-txt: var(--on-dark-muted);       /* texte */
  --mx-com: #6b645b;                    /* commentaires */
  position: relative; height: 150vh; background: var(--mx-bg); color: var(--mx-txt);
}
/* la section Création web remonte par-dessus la fin de l'effet (effet rideau) : aucun temps mort */
.matrix + .chapter {
  position: relative; z-index: 1; margin-top: -45vh; padding-top: var(--s8);
  box-shadow: 0 -60px 80px -20px var(--dark);
}
.matrix__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
}
.matrix__rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: var(--rain-o, .35); }

/* Lignes de code horizontales */
.matrix__rows {
  position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: space-evenly;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; pointer-events: none;
}
.mrow { white-space: nowrap; will-change: transform; line-height: 1.2; font-weight: 500; }
.mrow--big { font-size: clamp(1.25rem, 3.6vw, 2.7rem); opacity: .9; }
.mrow--mid { font-size: clamp(.95rem, 2.4vw, 1.7rem); opacity: .5; }
.mrow--dim { font-size: clamp(.8rem, 1.7vw, 1.2rem); opacity: .25; }
.mrow .t { color: var(--mx-tag); }
.mrow .a { color: var(--mx-attr); }
.mrow .s { color: var(--mx-str); }
.mrow .c { color: var(--mx-com); font-style: italic; }
.mrow .p { color: var(--mx-txt); }

/* Voile central pour garder le titre lisible */
.matrix__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 30% at 50% 50%, rgba(17, 17, 17, .97) 0%, rgba(17, 17, 17, .9) 45%, rgba(17, 17, 17, .4) 75%, rgba(17, 17, 17, 0) 100%);
}

.matrix__center { text-align: center; padding-inline: var(--pad); }
.matrix__kicker {
  font: 600 .8rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .3em; color: var(--mx-tag);
  margin-bottom: var(--s2);
}
.matrix__title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem, 1.6rem + 6vw, 7.5rem); line-height: .98;
  color: var(--on-dark); text-wrap: balance; min-height: 2em;
}
.matrix__title.is-coding { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(2rem, 1rem + 5vw, 5.8rem); color: var(--mx-tag); }
.matrix__hint { margin-top: var(--s3); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mx-com); }

/* Fondu vers la section Création web à la fin */
.matrix__fade { position: absolute; inset: 0; z-index: 2; background: var(--dark); opacity: var(--end, 0); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .matrix { height: auto; }
  .matrix__stage { position: relative; height: auto; min-height: 70vh; padding-block: var(--s12); }
}