/*
 * signature.css — GÉNÉRÉ par web/build.py. Ne pas modifier à la main.
 *
 * Les valeurs sont lues dans `mobile/src/core/design/theme.tsx`, palette
 * sombre. C'est la même signature que dans l'application, au centième
 * d'opacité près — et c'est ce qui fait qu'une invitation ouverte dans un
 * navigateur ressemble à la carte qu'on verra ensuite dans POTEs!.
 */

:root {
  --voileImageLeger-debut: rgba(11, 14, 18, 0);
  --voileImageLeger-fin: rgba(11, 14, 18, 0.72);
  --gradientImage-debut: rgba(11, 14, 18, 0);
  --gradientImage-fin: rgba(11, 14, 18, 0.92);
  --voileImageFort-debut: rgba(11, 14, 18, 0.18);
  --voileImageFort-fin: rgba(11, 14, 18, 0.96);
  --signatureViolette-debut: rgba(99, 67, 179, 0.20);
  --signatureViolette-fin: rgba(99, 67, 179, 0.04);
}

/*
 * `.visuel` — la composition, identique à `FondDeCarte`.
 *
 *     image → voile sombre → teinte violette → contenu
 *
 * Les deux voiles sont des pseudo-éléments : ils n'ajoutent aucun nœud au
 * document, et le contenu reste au-dessus sans avoir à empiler des `z-index`.
 */
.visuel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--canvas);
  background-size: cover;
  background-position: center;
}

/* Le voile sombre, vertical : le haut respire, le bas porte le texte. */
.visuel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    var(--gradientImage-debut),
    var(--gradientImage-fin)
  );
}

/* La signature, en diagonale, et presque invisible. */
.visuel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top right,
    var(--signatureViolette-debut),
    var(--signatureViolette-fin)
  );
}

/* Le contenu passe au-dessus des deux voiles. */
.visuel > * {
  position: relative;
  z-index: 1;
}

/* Un grand visuel garde sa matière : voile LÉGER. */
.visuel--leger::before {
  background-image: linear-gradient(
    to bottom,
    var(--voileImageLeger-debut),
    var(--voileImageLeger-fin)
  );
}

/* Du texte fin sur une photo claire : voile DENSE. */
.visuel--fort::before {
  background-image: linear-gradient(
    to bottom,
    var(--voileImageFort-debut),
    var(--voileImageFort-fin)
  );
}