/* ==========================================================================
   .pm-tint — voile bleu au survol d'un article ou d'une carte

   La maquette ne dessine ce voile que sur deux images de la home, et j'y avais
   d'abord lu un marquage éditorial appliqué au repos. C'est un état de survol :
   les deux images concernées appartiennent aux deux seuls blocs dont le titre
   porte aussi une plage `styleOverrideTable` en UNDERLINE — « Col Gauche / 02 »
   et « Frame 17 / Titre 2 ». Voile et soulignement sont les deux moitiés du
   même état, dessiné sur un bloc de chaque colonne pour l'illustrer.

   Le voile est donc au repos transparent, et vaut pour toutes les images du
   fil et de la colonne, pas seulement les deux dessinées. Il répond au survol
   de l'image, rien d'autre : pas de couplage avec le titre, pas de JS.

   Le mode de fusion Figma a un équivalent CSS exact :
     Figma HUE   → mix-blend-mode: hue    (garde luminance et saturation)
     Figma COLOR → mix-blend-mode: color  (garde la seule luminance)

   La maquette emploie HUE sur la vignette de la colonne et COLOR sur la grande
   image du fil. Deux modes pour un même état : l'intégration retient COLOR,
   celui de la grande image, où l'effet est lisible et vérifiable. À signaler à
   la designer plutôt qu'à reproduire tel quel — un état ne peut pas changer
   d'aspect selon la colonne où il se produit.
   ========================================================================== */

.pm-tint {
  position: relative;
  display: block;
  width: fit-content;

  /* Indispensable : sans elle, la fusion déborderait sur le fond de la page au
     lieu de rester cantonnée à l'image. */
  isolation: isolate;
}

.pm-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pm-color-blue);
  mix-blend-mode: var(--pm-tint-blend, color);
  opacity: 0;
  transition: opacity var(--pm-duration) var(--pm-easing);
  pointer-events: none;
}

/* Le survol se déclenche sur le bloc entier, pas sur l'image seule : la
   maquette montre le titre souligné en même temps que l'image teintée, donc
   les deux répondent à un même geste. `:focus-within` fait le pendant au
   clavier, où il n'y a pas de survol — sans quoi l'état serait invisible en
   navigation par tabulation. */
.pm-article:hover .pm-tint::after,
.pm-article:focus-within .pm-tint::after,
.pm-card:hover .pm-tint::after,
.pm-card:focus-within .pm-tint::after,
article:hover .pm-tint::after,
article:focus-within .pm-tint::after,
.pm-teaser:hover .pm-tint::after,
.pm-teaser:focus-within .pm-tint::after {
  opacity: 1;
}


/* Conservé pour le jour où la designer tranchera en faveur de HUE : le mode
   reste une variable, il n'y a qu'une classe à poser. */
.pm-tint--hue {
  --pm-tint-blend: hue;
}