/* ============================================================
   Affilia Blocs — tableau comparatif dans l'article
   Reprend les variables du thème Affilia quand il est actif,
   avec des valeurs de repli pour rester présentable ailleurs.
   ============================================================ */

.affbloc {
  --affbloc-accent: var(--mbtb-accent, #cbaf87);
  --affbloc-fg: var(--mbtb-fg, #1c1c1c);
  --affbloc-bg: var(--mbtb-bg, #faf6f0);
  --affbloc-bg-alt: var(--mbtb-bg-alt, #f2ebe0);
  --affbloc-border: var(--mbtb-border, rgba(28, 28, 28, 0.12));
  --affbloc-titre: var(--mbtb-heading, "Libre Baskerville", Georgia, serif);

  margin-block: 2.8em;
  color: var(--affbloc-fg);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Tous les thèmes ne posent pas `border-box`. Sans lui, un bouton en
   `width: 100%` ajoute ses marges internes à la largeur de sa cellule et
   déborde : les boutons se rejoignent en une barre continue et le tableau
   se met à défiler sans raison. */
.affbloc,
.affbloc *,
.affbloc *::before,
.affbloc *::after {
  box-sizing: border-box;
}

.affbloc__titre {
  font-family: var(--affbloc-titre);
  font-size: clamp(1.4375rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 2px solid var(--affbloc-fg);
}

/* ------------------------------------------------------------
   Le tableau déborde la colonne de lecture : un comparatif à
   quatre colonnes ne tient pas dans 68 caractères.

   Il s'étend vers la DROITE uniquement. Un débordement centré
   sur le viewport passerait sous le sommaire, qui occupe la
   colonne de gauche et reste collé pendant le défilement.
   `--affbloc-large` est posée par le contexte (le thème la
   redéfinit selon sa grille) ; à défaut, le bloc reste dans
   la largeur du texte et défile.
   ------------------------------------------------------------ */
.affbloc--tableau {
  width: var(--affbloc-large, 100%);
  max-width: none;
  margin-left: 0;
}

/* Le bloc sert de repère aux flèches, posées en absolu par-dessus. */
.affbloc--tableau { position: relative; }

.affbloc__defilement {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.affbloc__defilement:focus-visible {
  outline: 2px solid var(--affbloc-accent);
  outline-offset: 2px;
}

.affbloc__table {
  border-collapse: collapse;
  /* Largeurs imposées : en disposition automatique, une colonne au texte
     plus long s'élargit et laisse croire à une hiérarchie entre les
     produits. Toutes les colonnes produit font la même largeur. */
  table-layout: fixed;
  width: max-content;
  /* Le tableau remplit la place disponible quand il y a peu de produits,
     et défile dans son conteneur quand il y en a beaucoup. */
  min-width: 100%;
}

.affbloc__table th,
.affbloc__table td {
  padding: 18px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--affbloc-border);
}

/* La première colonne porte les critères : elle reste visible
   pendant le défilement horizontal, sinon on ne sait plus ce
   qu'on compare. */
.affbloc__table tbody th,
.affbloc__table tfoot th,
.affbloc__coin {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--affbloc-bg);
  width: 172px;
  font-family: var(--affbloc-titre);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.affbloc__table thead th {
  background: var(--affbloc-bg);
  border-bottom: 2px solid var(--affbloc-fg);
  /* Ancrage en haut : aligné par le bas, un nom de produit sur deux lignes
     ferait remonter l'image de sa colonne et désalignerait tout l'en-tête. */
  vertical-align: top;
}

.affbloc__col {
  width: 210px;
  font-weight: 400;
}

/* Une colonne sans étiquette conserve la hauteur des autres. */
.affbloc__col > .affbloc__media:first-child {
  margin-top: 38px;
}

.affbloc__mention,
.affbloc__rang {
  display: inline-flex;
  align-items: center;
  /* Hauteur fixe, et non minimale : le numéro est composé dans une police
     plus grande que l'étiquette, et débordait de trois pixels. */
  height: 26px;
  margin-bottom: 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.affbloc__mention {
  background: var(--affbloc-fg);
  color: var(--affbloc-bg);
  padding: 3px 9px;
}
.affbloc__rang {
  color: var(--affbloc-accent);
  font-family: var(--affbloc-titre);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.affbloc__media {
  display: block;
  margin-bottom: 12px;
  aspect-ratio: 1;
  background: var(--affbloc-bg-alt);
  overflow: hidden;
}
.affbloc__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}
.affbloc__col:hover .affbloc__media img,
.affbloc__carte:hover .affbloc__media img { transform: scale(1.04); }

.affbloc__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--affbloc-bg-alt) 0 10px,
    var(--affbloc-bg) 10px 20px
  );
}

.affbloc__marque {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--affbloc-accent);
  margin-bottom: 4px;
}

.affbloc__nom {
  display: block;
  font-family: var(--affbloc-titre);
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Deux lignes réservées pour le nom : les colonnes gardent la même hauteur,
   que le titre tienne sur une ligne ou sur deux. */
.affbloc__col .affbloc__nom { min-height: 2.8em; }

.affbloc__prix {
  font-family: var(--affbloc-titre);
  font-size: 1.375rem;
}
.affbloc__prix-barre {
  margin-left: 8px;
  opacity: 0.45;
  font-size: 0.9375rem;
}
.affbloc__marchand {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  opacity: 0.6;
}

.affbloc__vide { opacity: 0.35; }

.affbloc__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.96875rem;
  line-height: 1.5;
}
.affbloc .affbloc__liste li {
  position: relative;
  padding-left: 18px;
}
.affbloc .affbloc__liste li + li { margin-top: 6px; }

/* La spécificité est montée d'un cran : le thème stylise toutes les
   puces du corps d'article, et sa règle sinon l'emporte à égalité. */
.affbloc .affbloc__liste li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-weight: 600;
  line-height: inherit;
}
.affbloc .affbloc__liste--plus li::before {
  content: "+";
  color: var(--affbloc-accent);
}
.affbloc .affbloc__liste--moins li::before {
  content: "−";
  opacity: 0.45;
}

/* ---------- bouton vers le marchand ---------- */
.affbloc a.affbloc__cta,
.affbloc a.affbloc__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: var(--affbloc-fg);
  color: var(--affbloc-bg);
  border: 1px solid var(--affbloc-fg);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.affbloc a.affbloc__cta:hover,
.affbloc a.affbloc__cta:focus-visible {
  background: transparent;
  color: var(--affbloc-fg);
}
.affbloc a.affbloc__cta:focus-visible {
  outline: 2px solid var(--affbloc-accent);
  outline-offset: 2px;
}
.affbloc a.affbloc__cta svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.3s ease;
}
.affbloc a.affbloc__cta:hover svg { transform: translate(2px, -2px); }

/* Rappel pour les thèmes qui habillent tous les liens de leur contenu :
   un bouton plein ne doit hériter ni de leur couleur ni de leur
   soulignement en fond. Le thème Affilia exclut déjà `.affbloc__cta` de
   ses règles ; ces deux lignes couvrent les autres. */
.affbloc a.affbloc__cta {
  background-image: none;
  text-decoration: none;
}

.affbloc__table tfoot th,
.affbloc__table tfoot td { border-bottom: 0; padding-top: 18px; }

.affbloc__note {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  opacity: 0.6;
}

/* ============================================================
   Disposition en cartes
   ============================================================ */

.affbloc__cartes {
  display: grid;
  grid-template-columns: repeat(var(--affbloc-cols, 3), minmax(0, 1fr));
  gap: 1px;
  background: var(--affbloc-border);
  border: 1px solid var(--affbloc-border);
}

.affbloc__carte {
  background: var(--affbloc-bg);
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.affbloc__carte .affbloc__media { margin-bottom: 4px; }
.affbloc__carte .affbloc__nom { font-size: 1.1875rem; }
/* Le bouton reste en bas quel que soit le contenu au-dessus :
   des cartes de hauteurs différentes désalignent les actions. */
.affbloc__carte a.affbloc__cta { margin-top: auto; }
.affbloc__prix-ligne { margin: 0; }

/* ============================================================
   Écrans étroits
   ============================================================ */

@media (max-width: 1000px) {
  .affbloc--tableau {
    width: auto;
    margin-inline: 0;
  }
  .affbloc__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .affbloc__cartes { grid-template-columns: minmax(0, 1fr); }
  .affbloc__table th,
  .affbloc__table td { padding: 12px; }
  .affbloc__table tbody th,
  .affbloc__table tfoot th,
  .affbloc__coin { width: 124px; min-width: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .affbloc__media img,
  .affbloc__cta,
  .affbloc__cta svg { transition: none; }
}

/* ============================================================
   Flèches de défilement du tableau
   Ajoutées par bloc.js, jamais rendues côté serveur : sans
   JavaScript, elles seraient inertes.
   ============================================================ */

.affbloc__nav {
  position: absolute;
  top: 46%;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--affbloc-fg);
  background: var(--affbloc-bg);
  color: var(--affbloc-fg);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.affbloc__nav:hover,
.affbloc__nav:focus-visible {
  background: var(--affbloc-fg);
  color: var(--affbloc-bg);
}
.affbloc__nav:focus-visible {
  outline: 2px solid var(--affbloc-accent);
  outline-offset: 2px;
}
.affbloc__nav svg { width: 20px; height: 20px; }

/* Les flèches chevauchent le bord du tableau : posées à l'intérieur, elles
   masqueraient une colonne ; posées à l'extérieur, elles sortiraient de la
   colonne de lecture. */
.affbloc__nav--prev { left: -14px; }
.affbloc__nav--next { right: -14px; }

@media (max-width: 599px) {
  .affbloc__nav { width: 40px; height: 40px; }
  .affbloc__nav--prev { left: -6px; }
  .affbloc__nav--next { right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .affbloc__nav { transition: none; }
}