/* OVERLAY_CARDS_V1 — the one image card of the site (Julien 2026-10-08): the image fills the card, a gradient, a badge in
   the accent of the main buttons, the title on the image; a product cut-out may stand on the picture. Renderer:
   includes/overlay-cards.php (cms_overlay_card, cms_overlay_cards_grid). Used by the home carousels, the tools and
   resources hubs, /comparatifs/ and the family block at the bottom of the affiliation pages. */

.wi2-overlay-card {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  align-items: flex-end;
  border-radius: var(--wi2-card-radius, 22px);
  color: #fff;
  background: var(--color-dark-bg, #161523);
  text-decoration: none;
  isolation: isolate;
}
.wi2-overlay-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.wi2-overlay-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0) 34%, rgba(10, 14, 28, .55) 62%, rgba(10, 14, 28, .9) 100%);
}
.wi2-overlay-card__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 22px;
}
.wi2-overlay-card__badge {
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--color-dark-bg, #161523);
  background: var(--color-accent-2, #f3b44e);
  font: 700 12px/1 var(--font-body, system-ui);
  letter-spacing: .02em;
}
.wi2-overlay-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font: 700 19px/1.25 var(--font-heading, system-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.wi2-overlay-card__text { color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; }
.wi2-overlay-card__cta { margin-top: 4px; color: #fff; font-weight: 700; font-size: 15px; }
.wi2-overlay-card__cta i { color: var(--color-accent-2, #f3b44e); font-style: normal; }
@media (hover: hover) and (pointer: fine) {
  .wi2-overlay-card:hover .wi2-overlay-card__bg { transform: scale(1.04); }
}

/* Comparisons: the 2 latest in 50/50, a single one across the width. */
.wi2-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wi2-comparison-grid .wi2-overlay-card--wide { aspect-ratio: 16 / 10; }
.wi2-comparison-grid--solo { grid-template-columns: minmax(0, 1fr); }
.wi2-comparison-grid--solo .wi2-overlay-card--wide { aspect-ratio: auto; min-height: 420px; }
.wi2-overlay-card--wide .wi2-overlay-card__body { max-width: 760px; gap: 12px; padding: clamp(24px, 3.4vw, 44px); }
.wi2-overlay-card--wide .wi2-overlay-card__title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; -webkit-line-clamp: 3; }
.wi2-comparison-grid--solo .wi2-overlay-card--wide::after { background: linear-gradient(90deg, rgba(10, 14, 28, .88) 0%, rgba(10, 14, 28, .6) 45%, rgba(10, 14, 28, .05) 85%); }
.wi2-comparison-grid--solo .wi2-overlay-card--wide { align-items: center; }
@media (max-width: 700px) {
  .wi2-comparison-grid { grid-template-columns: minmax(0, 1fr); }
  .wi2-comparison-grid .wi2-overlay-card--wide, .wi2-comparison-grid--solo .wi2-overlay-card--wide { aspect-ratio: 4 / 5; min-height: 0; align-items: flex-end; }
  .wi2-comparison-grid--solo .wi2-overlay-card--wide::after { background: linear-gradient(180deg, rgba(10, 14, 28, 0) 30%, rgba(10, 14, 28, .9) 100%); }
}

/* Overlay card with a product cut-out (product reviews): the product stands on the picture, above the gradient. */
.wi2-overlay-card__product {
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 0;
  width: auto;
  max-width: 62%;
  height: 46%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
}
.wi2-overlay-card__body { position: relative; z-index: 1; }

/* Two comparisons side by side: the text block is tall, the gradient starts higher; the text keeps 2 lines. */
.wi2-comparison-grid:not(.wi2-comparison-grid--solo) .wi2-overlay-card--wide::after {
  background: linear-gradient(180deg, rgba(10, 14, 28, .05) 0%, rgba(10, 14, 28, .55) 38%, rgba(10, 14, 28, .92) 100%);
}
.wi2-overlay-card--wide .wi2-overlay-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Grid: 4 per row on a desktop, 3 on a tablet, 2 on a phone; never a carousel. */
.cms-overlay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cms-overlay-grid > .wi2-overlay-card { min-width: 0; height: 100%; }
@media (max-width: 1099px) { .cms-overlay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cms-overlay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cms-overlay-grid .wi2-overlay-card { aspect-ratio: 3 / 4; }
  .cms-overlay-grid .wi2-overlay-card__body { gap: 7px; padding: 12px 12px 14px; }
  .cms-overlay-grid .wi2-overlay-card__title { font-size: 15px; -webkit-line-clamp: 4; }
  .cms-overlay-grid .wi2-overlay-card__badge { padding: 5px 8px; font-size: 11px; }
}

/* The family block at the bottom of the affiliation pages (aff_family_links_html): its band and container live here,
   with the cards, so the block is laid out on every page — surface pages do not load affiliate-blocks.css. */
.aff-family { position: relative; margin: clamp(48px, 7vw, 88px) 0 0; padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 84px); background: color-mix(in srgb, var(--color-accent, #14a3a8) 7%, var(--color-bg, #fff)); }
.aff-family.is-bottom { width: 100%; margin: 0; }
.aff-family .aff-family__inner { display: grid; gap: clamp(36px, 5vw, 56px); width: min(var(--container, 1220px), 100% - 32px); margin-inline: auto; }
.aff-family .aff-family__group { display: grid; gap: 22px; }
.aff-family .aff-family__head [data-component="section-heading"] { margin: 0; }
.aff-family .aff-family__cta { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 34px); }

/* HUB_FILTER_V1: a filtered-out item is hidden, whatever its own display. */
[data-filter-item][hidden], [data-filter-group][hidden] { display: none !important; }