/* Manifeste, section nuit, statique (docs/PLAN.md, 17 et 18). Aucune animation.
   Le verre nuit sort du cadre par la droite ; le corps et la clôture, décalés, empiètent dessus.
   Quatre mots en ambre des franges : « interchangeable », « le prix », « se voit », « plus cher ». */

.manifeste {
  /* Hauteur de l’image : l’écran, jamais plus de 15 % au-delà des 941 px natifs. */
  --h-masse: clamp(640px, 100svh, 1080px);
  /* Colonne de texte : jamais plus de 60 % de l’écran, pour que le verre reste massif partout. */
  --l-colonne: min(100vw - 2 * var(--marge), 64rem, 60vw);
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--h-masse);
  /* Marges réduites : la section garde la hauteur de l’image, qui n’est ainsi jamais agrandie. */
  padding-block: calc(var(--h-entete) + clamp(24px, 5svh, 56px)) clamp(40px, 7svh, 72px);
  overflow-x: clip;
}

.manifeste__masse {
  /* v5 : le verre occupe toute la hauteur de la section et en sort par le haut, le bas et la droite. */
  position: absolute;
  top: 0;
  /* Le noeud du verre est à 41,3 % de la largeur de l’image : la translation le pose exactement sur
     `left`, quelle que soit la hauteur de la section. Il tombe aux 90 % de la colonne de texte ; sur
     très grand écran, il recule pour que le bord droit de l’image (58,7 % de sa largeur, soit 1,043 fois
     sa hauteur, après le noeud) reste toujours hors du cadre. */
  left: max(
    calc(max(var(--marge), (100vw - var(--largeur-max)) / 2) + var(--l-colonne) * .9),
    calc(100vw - var(--h-masse) * 1.043 + 24px)
  );
  transform: translateX(-41.3%);
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 1672 / 941;
  /* Masque fonctionnel sur le seul fond vide de l’image (ses 18 % de gauche, loin du verre) : aucun
     raccord visible avec le fond de la section. Le verre, lui, n’est jamais fondu. */
  mask-image: linear-gradient(to right, transparent, #000 18%);
  pointer-events: none;
}

.manifeste__image {
  width: 100%;
  height: 100%;
  max-width: none;
}

.manifeste__contenu {
  position: relative;
  z-index: 1;
}

.manifeste__texte {
  container-type: inline-size;
  color: var(--nuit-titre);
}

.manifeste__titre {
  font-size: min(var(--t-titre), 10cqi);
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  line-height: .92;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.manifeste__phrase {
  display: block;
}

.manifeste__corps {
  display: grid;
  gap: 1em;
  margin-top: clamp(32px, 6svh, 64px);
  font-size: clamp(1.1875rem, 1.7vw, 1.75rem);
  font-variation-settings: "opsz" 28;
  font-weight: 350;
  line-height: 1.3;
}

.manifeste__cloture {
  margin-top: clamp(32px, 6svh, 72px);
  font-size: clamp(2rem, 3.9vw, 4rem);
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  line-height: .98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Les mots porteurs : l’ambre du verre, une pointe. Jamais coupés en fin de ligne. */
.manifeste__accent {
  color: var(--ambre);
  white-space: nowrap;
}

/* Petits écrans (v7b) : le verre occupe le premier écran en entier, comme une photographie, et le titre
   se pose sur son bas, là où un voile le ramène à la nuit de la section. Le corps du texte suit, sur la
   nuit pleine. Aucun bandeau rapporté, aucune coupure franche dans le verre. */
@media (max-width: 899.98px) {
  .manifeste {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(48px, 9svh, 88px);
  }

  .manifeste__masse {
    left: 0;
    transform: none;
    width: 100%;
    height: 100svh;
    aspect-ratio: auto;
    mask-image: none;
  }

  .manifeste__image {
    object-fit: cover;
    /* Le noeud du verre au centre du premier écran. */
    object-position: 50% 8%;
  }

  /* Voile de lisibilité : transparent sur le verre, nuit pleine là où le titre commence. */
  .manifeste::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100svh;
    background: linear-gradient(to bottom, transparent 30%, var(--voile-nuit) 56%, var(--nuit) 80%);
    pointer-events: none;
  }

  .manifeste__texte {
    padding-top: 56svh;
  }

  .manifeste__corps {
    margin-top: clamp(28px, 5svh, 48px);
  }
}

/* Bureau : le corps longe le verre (de 36 à 90 % de la colonne), la clôture déborde un peu plus loin,
   là où le bas du verre recule vers la droite. */
@media (min-width: 900px) {
  .manifeste__texte {
    width: var(--l-colonne);
  }

  .manifeste__corps,
  .manifeste__cloture {
    margin-left: 36%;
  }

  .manifeste__corps {
    max-width: 54%;
  }

  .manifeste__cloture {
    max-width: 62%;
    font-size: min(4rem, 3.9vw, 5.6cqi);
  }
}

@media (forced-colors: active) {
  .manifeste__accent {
    color: CanvasText;
  }
}