/* Les regles ci-dessous existent en double : avec « .htm-entry-content »
   pour peser plus lourd que le socle du theme HTM, et sans lui pour agir
   sous n importe quel autre theme. Sans la seconde forme, le style de
   lien du theme hote traverserait le module. */
/* =============================================================================
   HZM Patchwork — grilles en damier et en mosaïque

   Toute la mise en page tient dans une grille CSS : le damier impose des cases
   égales, la mosaïque laisse chacune déclarer son emprise. Les deux partagent
   le même balisage, seule la classe du conteneur change.
   ========================================================================== */

/* Bord à bord de la fenêtre.

   La grille franchit son conteneur par une marge négative égale à la moitié de
   ce qui dépasse. « 100vw » compte la barre de défilement, d'où le retrait de
   sa largeur.

   Le retrait latéral se règle ici, et pas sur la rangée ni sur la colonne :
   une marge posée sur celles-ci décale le point de départ du calcul, et un
   côté finit toujours de travers. En le réglant sur la grille elle-même, la
   même valeur retire de la largeur et s'ajoute à la marge — les deux côtés
   restent donc symétriques quoi qu'il arrive. */
.hzm-pw--bleed {
  --pw-bleed-x: 0px;
  width: calc(100vw - var(--htm-scrollbar, 0px) - var(--pw-bleed-x) * 2);
  max-width: none;
  margin-left: calc(50% - (100vw - var(--htm-scrollbar, 0px)) / 2 + var(--pw-bleed-x));
  margin-right: calc(50% - (100vw - var(--htm-scrollbar, 0px)) / 2 + var(--pw-bleed-x));
}

.hzm-pw {
  display: grid;
  grid-template-columns: repeat(var(--pw-cols, 4), minmax(0, 1fr));
  gap: var(--pw-gap, 16px);
}

/* Trois façons de régler la hauteur des cases.
   « Carrées » suit la largeur de la colonne et s'adapte donc à l'écran ;
   « hauteur fixe » impose une valeur ; « libre » laisse le contenu décider. */
.hzm-pw--ratio-square .hzm-pw-c { aspect-ratio: 1; }
.hzm-pw--ratio-fixed .hzm-pw-c { min-height: var(--pw-row, 280px); }
.hzm-pw--ratio-free .hzm-pw-c { min-height: 0; }

/* En mosaïque, les rangées ont une hauteur propre : sans elle, une cellule
   haute de deux cases n'aurait rien à mesurer. */
.hzm-pw--mosaic {
  grid-auto-rows: var(--pw-row, 220px);
  grid-auto-flow: dense;
}

.hzm-pw--mosaic .hzm-pw-c { aspect-ratio: auto; min-height: 0; }

/* --- La cellule ---------------------------------------------------------- */

.hzm-pw-c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--pw-radius, 12px);
  border: var(--pw-bw, 0) solid var(--pw-bd, transparent);
  background: var(--pw-cell-bg, var(--pw-even, #F1F3F7));
  color: var(--pw-cell-fg, var(--pw-text, inherit));
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Une case sur deux change de fond : c'est ce qui donne au damier son relief
   même quand les images manquent. */
.hzm-pw-c.is-odd { background: var(--pw-cell-bg, var(--pw-odd, #FFFFFF)); }

/* Les cases claires reprennent le second jeu de couleurs : un titre blanc,
   parfait sur le fond plein, devient invisible sur le fond pâle d'à côté. */
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-t { color: var(--pw-cell-fg, var(--pw-title2, var(--pw-title, inherit))); }
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-x { color: var(--pw-cell-fg, var(--pw-text2, var(--pw-text, inherit))); }
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-ico { color: var(--pw-icon2, var(--pw-icon, currentColor)); }
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-stat { color: var(--pw-title2, var(--pw-stat, currentColor)); }
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-statl { color: var(--pw-text2, var(--pw-statl, currentColor)); }

.hzm-pw--sh-soft .hzm-pw-c { box-shadow: 0 6px 18px rgba(20, 30, 55, .08); }
.hzm-pw--sh-strong .hzm-pw-c { box-shadow: 0 14px 36px rgba(20, 30, 55, .16); }

.hzm-pw--hov-lift .hzm-pw-c:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20, 30, 55, .18);
}

.hzm-pw--hov-light .hzm-pw-c:hover { filter: brightness(1.06); }

/* --- L'image ------------------------------------------------------------- */

/* L'image est desormais une vraie balise dans son cadre : « object-fit »
   remplace « background-size », et le zoom porte sur l'image elle-meme. */
.hzm-pw-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Le theme impose « height: auto » a toute image de contenu, avec deux
   niveaux de specificite : une classe seule n'y suffit pas, et l'image
   reprenait sa hauteur naturelle au lieu de remplir sa case. On reecrit donc
   avec le meme poids. L'arrondi et la largeur maximale viennent de la meme
   regle et genent tout autant : le cadre porte deja l'arrondi. */
/* Un cran au-dessus de la regle du theme : a poids egal, c'est l'ordre de
   chargement qui tranche, et rien ne garantit lequel des deux fichiers arrive
   en dernier. En citant le cadre, on ne depend plus de cet ordre. */
.hzm-pw-img-el,
.hzm-pw-img .hzm-pw-img-el,
.htm-entry-content .hzm-pw-img .hzm-pw-img-el,
.hzm-entry-content .hzm-pw-img .hzm-pw-img-el {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}
.hzm-pw-img .hzm-pw-img-el{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

.hzm-pw-img--vide {
  background: var(--pw-cell-bg, var(--pw-even, #E4E8F0));
}

.hzm-pw--hov-zoom .hzm-pw-c:hover .hzm-pw-img-el { transform: scale(1.06); }

/* Le texte posé sur une photo a besoin d'un voile : sans lui, il devient
   illisible dès que l'image s'éclaircit. Le voile se pose sur le cadre, non
   sur l'image : un « ::after » sur une balise « img » n'a pas d'effet. */
.hzm-pw-c--over .hzm-pw-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 30%,
    var(--pw-over, rgba(16, 26, 43, .78))
  );
}

.hzm-pw-c--over .hzm-pw-in {
  position: relative;
  z-index: 2;
  margin-top: auto;
  color: #fff;
}

.hzm-pw-c.hzm-pw-c--over .hzm-pw-t,
.hzm-pw-c.hzm-pw-c--over .hzm-pw-x,
.hzm-pw-c.hzm-pw-c--over .hzm-pw-ico { color: var(--pw-on-img, #fff); }

/* Le chiffre et sa legende suivent : leur teinte de palette est pensee pour un
   fond uni, elle se perd sur une photo. */
.hzm-pw-c.hzm-pw-c--over .hzm-pw-stat { color: var(--pw-on-img-stat, var(--pw-on-img, #fff)); }
.hzm-pw-c.hzm-pw-c--over .hzm-pw-statl { color: var(--pw-on-img, #fff); opacity: .85; }

.hzm-pw-c--over .hzm-pw-l,
.htm-entry-content .hzm-pw-c--over .hzm-pw-l,
.hzm-entry-content .hzm-pw-c--over .hzm-pw-l {
  color: var(--pw-on-img-link, var(--pw-on-img, #fff));
}
.hzm-pw-c--over .hzm-pw-l{
  color: var(--pw-on-img-link, var(--pw-on-img, #fff));
}

/* --- Le contenu ---------------------------------------------------------- */

.hzm-pw-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pw-pad, 34px);
}

/* Le titre en haut, le lien en bas : l'espace disponible se répartit entre les
   deux, ce qui aligne les liens d'une cellule à l'autre. */
.hzm-pw-c--text .hzm-pw-in {
  height: 100%;
  justify-content: space-between;
}

.hzm-pw-ico {
  font-size: 30px;
  line-height: 1;
  color: var(--pw-icon, var(--pw-link, currentColor));
}

.hzm-pw-t {
  font-size: var(--pw-title-s, 1.45rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--pw-cell-fg, var(--pw-title, inherit));
}

.hzm-pw-x {
  font-size: var(--pw-text-s, .95rem);
  line-height: 1.6;
  color: var(--pw-cell-fg, var(--pw-text, inherit));
  opacity: .92;
}

.hzm-pw-stat {
  font-size: var(--pw-stat-s, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pw-stat, currentColor);
}

.hzm-pw-statl {
  margin-top: -6px;
  font-size: .82rem;
  color: var(--pw-statl, currentColor);
  opacity: .8;
}

.hzm-pw-l,
.htm-entry-content .hzm-pw-l,
.hzm-entry-content .hzm-pw-l {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  color: var(--pw-link, currentColor);
}
.hzm-pw-l{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  color: var(--pw-link, currentColor);
}

/* Les cases claires ont leur propre teinte de lien, elle aussi ecrite avec la
   specificite qu'il faut pour passer devant celle du theme. */
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-l,
.htm-entry-content .hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-l,
.hzm-entry-content .hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-l {
  color: var(--pw-link2, var(--pw-link, currentColor));
}
.hzm-pw-c.is-odd:not(.hzm-pw-c--over) .hzm-pw-l{
  color: var(--pw-link2, var(--pw-link, currentColor));
}

/* Le thème souligne les liens de contenu ; ici la flèche suffit à signaler
   qu'on peut cliquer. Écrit avec la spécificité de la règle qui l'impose. */
.hzm-entry-content .hzm-pw-l,
.hzm-entry-content .hzm-pw-l:hover,
.htm-entry-content .hzm-pw-l,
.htm-entry-content .hzm-pw-l:hover,
.hzm-pw-l,
.hzm-pw-l:hover {
  text-decoration: none;
}
.hzm-pw-l,
.hzm-pw-l:hover{
  text-decoration: none;
}

.hzm-pw-la { transition: transform .2s ease; }
.hzm-pw-l:hover .hzm-pw-la { transform: translateX(4px); }

/* Toute la cellule répond au survol du lien, pas seulement le lien : la zone
   cliquable reste le lien, mais le retour visuel porte sur l'ensemble. */
.hzm-pw-c:has(.hzm-pw-l:hover) { z-index: 2; }

/* --- Place disponible ----------------------------------------------------
   Les seuils portent sur le conteneur, pas sur la fenêtre. Une grille posée
   dans une colonne rétrécie par une barre latérale dispose de huit cents
   pixels quand la fenêtre en fait mille quatre cents : un seuil de fenêtre ne
   se déclenche pas, et quatre colonnes s'écrasent — les cellules paraissent
   alors découpées.

   Le conteneur doit etre un ancetre : un element ne repond pas a sa propre
   requete. C'est donc l'enveloppe qui le porte, et la grille en est toujours
   pourvue — meme sans pagination ni fleches.

   La règle de fenêtre reste en repli pour les navigateurs anciens. */
.hzm-pw-wrap {
  container-type: inline-size;
}

@container (max-width: 1000px) {
  .hzm-pw { grid-template-columns: repeat(min(var(--pw-cols, 4), 3), minmax(0, 1fr)); }
}

@container (max-width: 720px) {
  .hzm-pw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Une cellule prévue sur quatre cases n'a plus de sens sur deux colonnes. */
  .hzm-pw--mosaic .hzm-pw-c { grid-column: span 1 !important; }
  .hzm-pw-in { padding: calc(var(--pw-pad, 34px) * .7); }
}

@container (max-width: 480px) {
  .hzm-pw { grid-template-columns: 1fr; }
  .hzm-pw--mosaic .hzm-pw-c { grid-row: span 1 !important; }
  .hzm-pw--ratio-square .hzm-pw-c { aspect-ratio: 16 / 10; }
}

/* Repli pour les navigateurs sans requêtes de conteneur. */
@supports not (container-type: inline-size) {
  @media (max-width: 1024px) {
    .hzm-pw { grid-template-columns: repeat(min(var(--pw-cols, 4), 3), minmax(0, 1fr)); }
  }

  @media (max-width: 782px) {
    .hzm-pw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hzm-pw--mosaic .hzm-pw-c { grid-column: span 1 !important; }
    .hzm-pw-in { padding: calc(var(--pw-pad, 34px) * .7); }
  }

  @media (max-width: 520px) {
    .hzm-pw { grid-template-columns: 1fr; }
    .hzm-pw--mosaic .hzm-pw-c { grid-row: span 1 !important; }
    .hzm-pw--ratio-square .hzm-pw-c { aspect-ratio: 16 / 10; }
  }
}

/* --- Apparition ----------------------------------------------------------
   Les cellules entrent en cascade plutôt que toutes ensemble : le décalage se
   calcule sur l'ordre de la cellule, ce qui donne à l'œil le temps de
   parcourir la grille. */

.hzm-pw--anim .hzm-pw-c {
  opacity: 0;
  animation: hzm-pw-in var(--pw-anim-dur, .6s) ease-out forwards;
  animation-delay: calc(var(--pw-anim-step, .07s) * var(--pw-i, 0));
}

.hzm-pw--anim-fade .hzm-pw-c { animation-name: hzm-pw-in; }
.hzm-pw--anim-up .hzm-pw-c { animation-name: hzm-pw-up; }
.hzm-pw--anim-zoom .hzm-pw-c { animation-name: hzm-pw-zoom; }
.hzm-pw--anim-side .hzm-pw-c { animation-name: hzm-pw-side; }

@keyframes hzm-pw-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hzm-pw-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes hzm-pw-zoom {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}

/* Les cellules entrent alternativement par la gauche et par la droite : le
   damier s'assemble sous les yeux. */
@keyframes hzm-pw-side {
  from { opacity: 0; transform: translateX(var(--pw-side, -30px)); }
  to { opacity: 1; transform: none; }
}

.hzm-pw--anim-side .hzm-pw-c.is-odd { --pw-side: 30px; }

/* Un visiteur qui a demandé moins d'animations voit la grille d'emblée. */
@media (prefers-reduced-motion: reduce) {
  .hzm-pw--anim .hzm-pw-c {
    opacity: 1;
    animation: none;
  }
}

/* --- Vidéo ----------------------------------------------------------------
   Contrairement à l'image, la vidéo garde ses commandes : on la pose dans un
   cadre plutôt qu'en fond, sinon elle serait rognée et les boutons de lecture
   sortiraient de la case. */
.hzm-pw-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.hzm-pw-video iframe,
.hzm-pw-video video,
.hzm-pw-video embed,
.hzm-pw-video object {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* WordPress enveloppe parfois l'insertion : le conteneur doit suivre. */
.hzm-pw-video .wp-video,
.hzm-pw-video .wp-video-shortcode,
.hzm-pw-video > * {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* --- Animations permanentes -----------------------------------------------
   Une grille figée passe inaperçue. Ces mouvements tournent en continu, sans
   attendre le survol, et ne portent que sur un élément à la fois : plusieurs
   animations simultanées fatiguent l'œil et brouillent le message. */

.hzm-pw--vive-ico .hzm-pw-ico {
  animation: hzm-pw-batt var(--pw-vive-dur, 3s) ease-in-out infinite;
  transform-origin: center;
}

.hzm-pw--vive-stat .hzm-pw-stat {
  display: inline-block;
  animation: hzm-pw-puls var(--pw-vive-dur, 3s) ease-in-out infinite;
  transform-origin: left center;
}

.hzm-pw--vive-link .hzm-pw-la {
  animation: hzm-pw-fleche var(--pw-vive-dur, 3s) ease-in-out infinite;
}

.hzm-pw--vive-img .hzm-pw-img-el {
  animation: hzm-pw-lent calc(var(--pw-vive-dur, 3s) * 4) ease-in-out infinite alternate;
}

/* Le soulignement se dessine puis s'efface, de gauche à droite. */
.hzm-pw--vive-title .hzm-pw-t {
  position: relative;
  display: inline-block;
}

.hzm-pw--vive-title .hzm-pw-t::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: currentColor;
  opacity: .55;
  animation: hzm-pw-trait var(--pw-vive-dur, 3s) ease-in-out infinite;
}

/* Le reflet passe dans un calque à part, sans toucher au contenu. */
.hzm-pw--vive-shine .hzm-pw-c::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  z-index: 3;
  width: 35%;
  height: 200%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: hzm-pw-reflet calc(var(--pw-vive-dur, 3s) * 2) ease-in-out infinite;
}

/* Le décalage entre cellules évite que tout batte à l'unisson. */
.hzm-pw--vive .hzm-pw-ico,
.hzm-pw--vive .hzm-pw-stat,
.hzm-pw--vive .hzm-pw-la,
.hzm-pw--vive .hzm-pw-t::after,
.hzm-pw--vive .hzm-pw-c::after {
  animation-delay: calc(.18s * var(--pw-i, 0));
}

@keyframes hzm-pw-batt {
  0%, 62%, 100% { transform: scale(1); }
  70% { transform: scale(1.14); }
  80% { transform: scale(1); }
  88% { transform: scale(1.07); }
}

@keyframes hzm-pw-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes hzm-pw-fleche {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes hzm-pw-lent {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

@keyframes hzm-pw-trait {
  0%, 100% { transform: scaleX(0); }
  35%, 65% { transform: scaleX(1); }
}

@keyframes hzm-pw-reflet {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .hzm-pw--vive .hzm-pw-ico,
  .hzm-pw--vive .hzm-pw-stat,
  .hzm-pw--vive .hzm-pw-la,
  .hzm-pw--vive .hzm-pw-img-el,
  .hzm-pw--vive .hzm-pw-t::after,
  .hzm-pw--vive .hzm-pw-c::after {
    animation: none !important;
  }
}

/* Repli quand un service vidéo n'est pas reconnu. */
.hzm-pw-vlink {
  position: relative;
  z-index: 2;
  margin: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #101A2B;
  font-weight: 600;
  text-decoration: none;
}

/* Vidéo en fond, texte par-dessus : le même voile que pour les images, sans
   quoi le texte se perdrait dans les images animées. */
.hzm-pw-video--fond::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 30%,
    var(--pw-over, rgba(16, 26, 43, .78))
  );
}

/* Le lecteur ne doit pas capter les clics quand il sert de fond : sinon il
   met en pause au lieu de suivre le lien de la cellule. */
.hzm-pw-video--fond iframe,
.hzm-pw-video--fond video {
  pointer-events: none;
}

/* Une vidéo de fond couvre la case, quitte à déborder. Un agrandissement fixe
   ne suffit pas : une vidéo en seize neuvièmes posée dans une case carrée
   laisse des bandes en haut et en bas, et l'écart dépend de la proportion de
   la case. On impose donc le rapport de la vidéo et une taille au moins égale
   à la case — le navigateur agrandit alors juste ce qu'il faut. */
.hzm-pw-video--fond video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Couvrir une case avec une vidéo en seize neuvièmes.

   « aspect-ratio » ne suffit pas sur une iframe : il cède devant min-width et
   min-height, et l'un des deux côtés reste court — d'où les bandes noires.

   La technique qui tient est celle des fonds vidéo plein écran, transposée au
   conteneur : on donne à l'iframe la largeur de la case et la hauteur qui en
   découle, puis on impose des minimums calculés dans l'autre sens. Le plus
   contraignant des deux gagne, et la vidéo déborde toujours d'un côté. */
.hzm-pw-video--fond {
  container-type: size;
  /* Fond sombre le temps que le lecteur démarre : voir le fondu plus bas. */
  background: #0B1220;
}

.hzm-pw-video--fond iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqw;
  height: 56.25cqw;   /* 100 × 9/16 */
  min-width: 177.78cqh; /* 100 × 16/9 */
  min-height: 100cqh;
  transform: translate(-50%, -50%);
  border: 0;
}

/* YouTube montre son affiche et ses commandes le temps de démarrer. La case
   reste sombre pendant ce court instant, puis le lecteur apparaît en fondu :
   le clignotement disparaît sans rien masquer de la vidéo elle-même. */
.hzm-pw-video--fond iframe,
.hzm-pw-video--fond video {
  opacity: 0;
  animation: hzm-pw-video-in .5s ease-out 1.1s forwards;
}

@keyframes hzm-pw-video-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hzm-pw-video--fond iframe,
  .hzm-pw-video--fond video {
    opacity: 1;
    animation: none;
  }
}

/* Repli pour les navigateurs sans requêtes de conteneur : un agrandissement
   suffisant pour couvrir une case carrée, la proportion la plus exigeante. */
@supports not (width: 100cqw) {
  .hzm-pw-video--fond iframe {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

/* =============================================================================
   Pagination, « voir plus » et défilement
   ========================================================================== */

.hzm-pw-wrap {
  position: relative;
}

/* --- Défilement horizontal ----------------------------------------------- */
.hzm-pw--scroll {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--pw-gap, 16px) * (var(--pw-cols, 4) - 1)) / var(--pw-cols, 4));
  grid-template-columns: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.hzm-pw--scroll::-webkit-scrollbar { display: none; }
.hzm-pw--scroll .hzm-pw-c { scroll-snap-align: start; }

.hzm-pw-arw {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--pw-nav-c, #101A2B);
  background: var(--pw-nav-bg, #fff);
  box-shadow: 0 6px 20px rgba(20, 30, 55, .18);
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

/* Les flèches n'apparaissent que si la bande déborde vraiment. */
.hzm-pw-wrap.is-over .hzm-pw-arw { display: inline-flex; }

.hzm-pw-arw--prev { left: -16px; }
.hzm-pw-arw--next { right: -16px; }

.hzm-pw-arw:hover {
  color: var(--pw-nav-bg, #fff);
  background: var(--pw-nav-on, var(--pw-even, #101A2B));
}

.hzm-pw-arw[disabled] {
  opacity: .3;
  pointer-events: none;
}

/* --- Pagination et « voir plus » ------------------------------------------ */
.hzm-pw-foot {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.hzm-pw-pager {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hzm-pw-pg {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--pw-nav-c, #101A2B);
  background: var(--pw-nav-bg, rgba(20, 30, 55, .06));
  transition: background .2s ease, color .2s ease;
}

.hzm-pw-pg:hover:not([disabled]),
.hzm-pw-pg.is-on {
  color: #fff;
  background: var(--pw-nav-on, var(--pw-even, #101A2B));
}

.hzm-pw-pg[disabled] {
  opacity: .35;
  pointer-events: none;
}

.hzm-pw-more {
  padding: 12px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: var(--pw-nav-on, var(--pw-even, #101A2B));
  transition: filter .2s ease;
}

.hzm-pw-more:hover { filter: brightness(1.1); }

/* Une cellule masquée par la pagination doit disparaître de la grille, pas
   seulement devenir invisible : « hidden » suffit, sauf si une règle
   d'affichage la contredit — d'où ce rappel. */
.hzm-pw-c[hidden] { display: none !important; }

@media (max-width: 782px) {
  .hzm-pw-arw--prev { left: 2px; }
  .hzm-pw-arw--next { right: 2px; }
  .hzm-pw--scroll { grid-auto-columns: 78%; }
}

/* --- Placement des flèches ------------------------------------------------
   Huit positions. Le principe est le même que pour le carrousel du module
   Articles : au centre les flèches encadrent la bande, en haut ou en bas elles
   se rangent côte à côte et la place leur est réservée — sinon elles
   chevaucheraient le contenu voisin. */

.hzm-pw-arw {
  width: var(--pw-arw-size, 44px);
  height: var(--pw-arw-size, 44px);
  min-width: var(--pw-arw-size, 44px);
  font-size: calc(var(--pw-arw-size, 44px) * .52);
  border-radius: var(--pw-arw-radius, 50%);
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* Formes */
.hzm-pw-wrap--arw-round .hzm-pw-arw { --pw-arw-radius: 10px; }
.hzm-pw-wrap--arw-square .hzm-pw-arw { --pw-arw-radius: 0; }

/* Au centre : dehors par défaut, dedans sur demande. */
.hzm-pw-arw--prev { left: calc(var(--pw-arw-offset, 16px) * -1); }
.hzm-pw-arw--next { right: calc(var(--pw-arw-offset, 16px) * -1); }

.hzm-pw-wrap--arw-inside .hzm-pw-arw--prev { left: var(--pw-arw-offset, 12px); }
.hzm-pw-wrap--arw-inside .hzm-pw-arw--next { right: var(--pw-arw-offset, 12px); }

/* En haut ou en bas : les deux flèches quittent le milieu. */
.hzm-pw-wrap--arw-top .hzm-pw-arw,
.hzm-pw-wrap--arw-bottom .hzm-pw-arw {
  top: auto;
  transform: none;
}

.hzm-pw-wrap--arw-top .hzm-pw-arw { bottom: calc(100% + 14px); }
.hzm-pw-wrap--arw-bottom .hzm-pw-arw { top: calc(100% + 14px); }

/* La place qu'elles occupent hors du cadre doit être réservée. */
.hzm-pw-wrap--arw-top { margin-top: calc(var(--pw-arw-size, 44px) + 18px); }
.hzm-pw-wrap--arw-bottom { margin-bottom: calc(var(--pw-arw-size, 44px) + 18px); }

/* Les trois ancrages horizontaux, valables en haut comme en bas. */
.hzm-pw-wrap--arw-tr .hzm-pw-arw--prev,
.hzm-pw-wrap--arw-br .hzm-pw-arw--prev { left: auto; right: calc(var(--pw-arw-size, 44px) + 10px); }
.hzm-pw-wrap--arw-tr .hzm-pw-arw--next,
.hzm-pw-wrap--arw-br .hzm-pw-arw--next { right: 0; }

.hzm-pw-wrap--arw-tl .hzm-pw-arw--prev,
.hzm-pw-wrap--arw-bl .hzm-pw-arw--prev { left: 0; right: auto; }
.hzm-pw-wrap--arw-tl .hzm-pw-arw--next,
.hzm-pw-wrap--arw-bl .hzm-pw-arw--next { left: calc(var(--pw-arw-size, 44px) + 10px); right: auto; }

.hzm-pw-wrap--arw-tc .hzm-pw-arw--prev,
.hzm-pw-wrap--arw-bc .hzm-pw-arw--prev { left: 50%; right: auto; margin-left: calc(var(--pw-arw-size, 44px) * -1 - 5px); }
.hzm-pw-wrap--arw-tc .hzm-pw-arw--next,
.hzm-pw-wrap--arw-bc .hzm-pw-arw--next { left: 50%; right: auto; margin-left: 5px; }

/* --- Cellule entièrement cliquable ----------------------------------------
   Un lien qui couvre la surface, posé sous le contenu. Envelopper la cellule
   dans une balise de lien aurait rendu chaque titre et chaque bouton
   imbriqué — ce que le HTML interdit et que les navigateurs corrigent mal. */
.hzm-pw-couvre {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

/* Le contenu repasse devant : le lien « Lire la suite » et les liens des
   textes gardent leur propre destination. */
.hzm-pw-c--clic .hzm-pw-in {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

/* ... mais seuls les liens redeviennent cliquables, pour que le reste de la
   surface renvoie bien au lien de la cellule. */
.hzm-pw-c--clic .hzm-pw-in a {
  pointer-events: auto;
}

.hzm-pw-c--clic { cursor: pointer; }

/* Le repère au clavier doit rester visible : sans cela, le lien couvrant est
   invisible pour qui navigue à la tabulation. */
.hzm-pw-couvre:focus-visible {
  outline: 3px solid var(--pw-link, #0072FF);
  outline-offset: -3px;
}