/* ============================================================================
   Cosmeek V2 — Manifeste (node 3140:13047)
   Section crème qui suit le hero : défilement classique, texte plein.
   ========================================================================= */

.mani {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Après le hero (fond sombre) : `--sp-edge`. Rien en bas, la
     section suivante porte l'espace. */
  padding-block: var(--sp-edge) 0;
  background: var(--c-cream);
}

/* 56 à gauche, 58 à droite, colonnes 992 et 256 séparées de 78 :
   56 + 992 + 78 + 256 + 58 = 1440. */
.mani__grid {
  display: grid;
  grid-template-columns: minmax(0, 992fr) 256fr;
  gap: 78px;
  align-items: end;
  inline-size: min(100%, var(--shell-max));
  margin-inline: auto;
  padding-inline: 56px 58px;
}

.mani__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  margin: 0;
}

.mani__text p {
  margin: 0;
  font-size: var(--fs-h1);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--c-brown);
}

/* Chaque caractère porte sa position de lecture `--t` ; le front d'éclairage
   `--fill` est posé par js/manifeste.js. Sans JS, le texte reste plein. */
.mani__c {
  opacity: clamp(
    0.2,
    calc(0.2 + 0.8 * (var(--fill, 0) - var(--t)) / 0.045),
    1
  );
}

.mani__side {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: var(--sp-10);
}

.mani__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  color: var(--c-ink-2);
}

.mani__legend img {
  inline-size: 12.578px;
  block-size: 9.36px;
  rotate: 180deg;
}

.mani__shot {
  inline-size: 256px;
  block-size: 341.333px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.mani__tags {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-16);
  color: var(--c-ink-2);
  text-align: end;
}

@media (width < 900px) {
  .mani {
    min-block-size: 0;
  }

  .mani__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-40);
    padding-inline: var(--gutter);
  }

  /* Sur mobile la photo n'a pas à prendre toute la largeur : un cadre de la
     taille de celui du bureau (256), calé à droite comme lui. */
  .mani__shot {
    inline-size: min(62%, 240px);
    block-size: auto;
    aspect-ratio: 256 / 341.333;
  }

  .mani__tags {
    align-items: start;
    text-align: start;
  }
}