/* ==========================================================================
   [data-link-area] — zone cliquable étendue (« stretched link »)

   Le lien marqué [data-link-target] étend sa surface cliquable à tout son
   [data-link-area] : son ::after, en position absolue, recouvre la zone.
   C'est un vrai lien qui reçoit le clic — clic du milieu, Ctrl+clic, menu
   contextuel, survol de l'URL dans la barre d'état fonctionnent, sans JS.

   Remplace le script « #337 have a single link for a single article teaser »
   de js/global.js, qui rejouait le clic en JS sur le lien cible.

   Contrainte : le ::after se cale sur l'ancêtre positionné le plus proche du
   lien. Aucun élément positionné ne doit donc s'intercaler entre la zone et
   le lien — d'où la règle sur les colonnes Bootstrap ci-dessous.
   ========================================================================== */

[data-link-area] {
  position: relative;
}

[data-link-target]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Bootstrap 4 met ses colonnes en position: relative : sans cela, la zone
   s'arrêterait à la colonne du titre et l'image voisine ne serait plus
   cliquable (accroches alt, teasers livre et personne). */
[data-link-area] .row > [class*="col"] {
  position: static;
}

/* Les autres éléments interactifs de la zone passent au-dessus du voile, pour
   rester cliquables (« Feuilleter », « Commander », liens contextuels…).
   :where() ramène la spécificité à zéro : un composant qui positionne déjà
   ses liens ou boutons garde la main. */
:where([data-link-area]) :where(a:not([data-link-target]), button, input, select, textarea, iframe) {
  position: relative;
  z-index: 2;
}