/* ============================================================
   Affilia — couche WordPress
   Prolonge mbtb.css : mêmes variables, mêmes partis pris.
   Rayon 0 partout, aucune ombre au repos, un seul accent.
   ============================================================ */

body.mbtb {
  margin: 0;
  background: var(--mbtb-bg);
  color: var(--mbtb-fg);
  font-family: var(--mbtb-body);
  -webkit-font-smoothing: antialiased;
}

.affilia-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mbtb-fg);
  color: var(--mbtb-bg);
  padding: 12px 20px;
  font-size: 0.875rem;
}
.affilia-skip:focus { left: 0; }

/* Le CSS d'origine cadre presque tout sur `.mbtb`. Le body porte la classe,
   mais les sections internes en ont besoin aussi pour leurs marges. */
.affilia-article,
.affilia-page,
.mbtb-foot { font-family: var(--mbtb-body); }

/* ---------- image de remplacement ---------- */
.affilia-ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--mbtb-bg-alt) 0 10px,
      var(--mbtb-bg) 10px 20px
    );
}

/* ============================================================
   Article de blog — le gabarit central du site
   ============================================================ */

.affilia-article__head { padding-top: clamp(32px, 4vw, 56px); }

.affilia-article__intro {
  max-width: 46rem;
  /* Sans marge basse : c'est la marge haute du corps qui règle l'écart,
     sinon les deux s'additionnent et creusent un trou sous la ligne de date. */
  margin-block: clamp(40px, 5vw, 64px) 0;
}

/* Avec une image de couverture, l'intro doit s'en détacher. */
.affilia-article__head:has(.affilia-article__cover) .affilia-article__intro {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.affilia-article__title {
  font-family: var(--mbtb-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

.affilia-article__lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  margin-top: clamp(24px, 2.4vw, 34px);
  color: color-mix(in srgb, var(--mbtb-fg) 74%, transparent);
}

.affilia-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 3.4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--mbtb-border);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mbtb-fg) 58%, transparent);
}
.affilia-article__author { color: var(--mbtb-accent); }

/* La couverture déborde de la colonne de lecture : elle respire, et la
   parallaxe du JS d'origine s'applique à l'`img`, pas au conteneur. */
.affilia-article__cover {
  /* La couverture s'aligne sur le conteneur de l'article plutôt que de
     border l'écran : pleine largeur, elle écrasait le titre et repoussait
     le texte sous la ligne de flottaison. */
  width: min(1200px, calc(100% - 2 * var(--mbtb-gutter, 24px)));
  margin-inline: auto;
  /* La hauteur est pilotée directement, sans `aspect-ratio` : combiné à une
     hauteur maximale, le ratio rétrécit la largeur du cadre au lieu de
     recadrer l'image. L'image, elle, est en `object-fit: cover`. */
}
/* Le cadre porte la hauteur et le rognage : la légende de crédit, elle, doit
   rester lisible sous l'image plutôt que d'être coupée avec le débordement
   du parallaxe. */
.affilia-article__cover-cadre {
  display: block;
  overflow: hidden;
  height: clamp(200px, 22vw, 320px);
}
.affilia-credit {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mbtb-muted, #6b6b6b);
}
.affilia-credit a { color: inherit; }
.affilia-article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.affilia-article__wrap { padding-block: clamp(44px, 4.5vw, 68px) clamp(56px, 7vw, 104px); }

/* L'article n'occupe pas les 1400 px du reste du site : sommaire et colonne
   de lecture réunis laissaient près de 500 px de vide à droite. Le conteneur
   est ramené à 1300 px — assez pour que la page paraisse pleine, assez large
   pour que le tableau comparatif ait de la place. */
.affilia-article .mbtb__inner { max-width: 1200px; }

.affilia-article__grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

/* Sans sommaire — article court, ou sans intertitres — la colonne latérale
   n'est pas rendue du tout : le texte occupe alors la largeur et se centre,
   au lieu de rester collé à droite d'un vide de 260 px.

   La mesure reste bornée à 68 caractères : au-delà, l'œil peine à retrouver
   le début de la ligne suivante. C'est la marge intérieure qui absorbe la
   largeur disponible, pas le texte qui s'étale. */
.affilia-article__grid--seul {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* Le sélecteur est doublé de `.mbtb` pour passer devant la règle qui libère
   la mesure sur les articles à colonne latérale : là-bas le texte doit
   remplir sa colonne, ici il doit s'arrêter avant les bords. */
.mbtb .affilia-article__grid--seul .affilia-article__body,
.affilia-article__grid--seul .affilia-article__body {
  width: 100%;
  max-width: 820px;
}

/* Le texte occupe toute la colonne, sans limite de mesure : c'est ce qui
   aligne les paragraphes sur le tableau comparatif. La largeur de lecture est
   réglée par celle du conteneur, définie plus bas.

   Le sélecteur est doublé de `.mbtb` : le corps porte aussi la classe
   `mbtb-rte`, dont la règle du thème (`.mbtb .mbtb-rte`) vaut 0,2,0 et
   l'emporterait sinon. */
.mbtb .affilia-article__body,
.affilia-article__body {
  max-width: none;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.75;
}

.affilia-article__body > * + * { margin-top: 1.5em; }

.affilia-article__body h2 {
  font-family: var(--mbtb-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 2.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--mbtb-border);
  position: relative;
}
/* Le premier élément du corps s'aligne sur le haut du sommaire : il n'a
   rien au-dessus dont il faudrait le séparer. */
.affilia-article__body > :first-child {
  margin-top: 0;
}
.affilia-article__body > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.affilia-article__body > h2:first-child::before {
  display: none;
}

/* Tiret doré : le rappel de l'eyebrow du thème d'origine. */
.affilia-article__body h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--mbtb-accent);
}

.affilia-article__body h3 {
  font-family: var(--mbtb-heading);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.35;
  margin-top: 2.2em;
}

/* Un titre suivi de son texte reste soudé : l'espace se met avant le titre,
   pas entre le titre et ce qu'il annonce. */
.affilia-article__body h2 + h3 { margin-top: 1.1em; }
.affilia-article__body h2 + p,
.affilia-article__body h3 + p { margin-top: 0.85em; }

.affilia-article__body a:not(.mbtb-btn):not(.affilia-offre):not(.affbloc__cta) {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--mbtb-accent), var(--mbtb-accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size 0.3s ease;
}
.affilia-article__body a:not(.mbtb-btn):not(.affilia-offre):not(.affbloc__cta):hover {
  background-size: 100% 100%;
  padding-bottom: 0;
}

.affilia-article__body ul,
.affilia-article__body ol { padding-left: 1.4em; }
.affilia-article__body li + li { margin-top: 0.7em; }

.affilia-article__body ul { list-style: none; padding-left: 0; }
.affilia-article__body ul > li {
  position: relative;
  padding-left: 1.6em;
}
.affilia-article__body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--mbtb-accent);
}

.affilia-article__body blockquote {
  margin: 2.6em 0;
  padding: 8px 0 8px 32px;
  border-left: 2px solid var(--mbtb-accent);
  font-family: var(--mbtb-heading);
  font-size: 1.1875rem;
  line-height: 1.5;
}
.affilia-article__body blockquote p + p { margin-top: 0.7em; }

.affilia-article__body figure { margin: 2.2em 0; }
.affilia-article__body img { display: block; height: auto; }
.affilia-article__body figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--mbtb-fg) 55%, transparent);
}

.affilia-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.affilia-article__body th,
.affilia-article__body td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mbtb-border);
  text-align: left;
  vertical-align: top;
}
.affilia-article__body thead th {
  font-family: var(--mbtb-heading);
  font-weight: 400;
  border-bottom-color: var(--mbtb-fg);
}

/* Un tableau large défile dans son propre conteneur ; le corps de page
   ne défile jamais horizontalement. */
.affilia-article__body .wp-block-table { overflow-x: auto; }

.affilia-article__body code {
  font-size: 0.875em;
  background: var(--mbtb-bg-alt);
  padding: 2px 6px;
}
.affilia-article__body pre {
  background: var(--mbtb-bg-alt);
  padding: 20px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- colonne latérale ---------- */
.affilia-article__aside {
  position: sticky;
  top: calc(var(--header-height, 72px) + 24px);
  display: grid;
  gap: 28px;
}

.affilia-toc {
  border-top: 2px solid var(--mbtb-fg);
  padding-top: 18px;
}
.affilia-toc__head {
  font-family: var(--mbtb-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--mbtb-accent);
  margin: 0 0 14px;
  /* Le sommaire est un `details` pour se replier sur petit écran ; le
     marqueur natif du `summary` n'a pas sa place dans cette typographie.
     Les deux déclarations sont nécessaires : `list-style` couvre les
     moteurs récents, le pseudo-élément les versions WebKit plus anciennes. */
  list-style: none;
  cursor: default;
}
.affilia-toc__head::-webkit-details-marker { display: none; }
.affilia-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
.affilia-toc__item + .affilia-toc__item { margin-top: 10px; }
.affilia-toc__item--h3 { padding-left: 16px; font-size: 0.8125rem; }
.affilia-toc__item a {
  color: color-mix(in srgb, var(--mbtb-fg) 68%, transparent);
  text-decoration: none;
  display: inline-block;
  position: relative;
}
/* Soulignement de droite à gauche au repos, de gauche à droite au survol :
   le geste signature du thème, repris ici. */
.affilia-toc__item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--mbtb-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}
.affilia-toc__item a:hover { color: var(--mbtb-fg); }
.affilia-toc__item a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.affilia-aside-card {
  border: 1px solid var(--mbtb-border);
  padding: 20px;
}
.affilia-aside-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--mbtb-fg) 55%, transparent);
  margin: 0 0 10px;
}
.affilia-aside-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mbtb-heading);
  font-size: 1.0625rem;
  color: inherit;
  text-decoration: none;
}
.affilia-aside-card__link svg {
  width: 20px;
  flex: none;
  transition: transform 0.3s ease;
}
.affilia-aside-card:hover { border-color: var(--mbtb-accent); }
.affilia-aside-card:hover .affilia-aside-card__link svg { transform: translateX(5px); }

/* ---------- divulgation ---------- */
.affilia-disclosure {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--mbtb-fg) 58%, transparent);
  border-left: 2px solid var(--mbtb-accent);
  padding: 10px 0 10px 16px;
  margin: 0 0 2.6em;
}
.affilia-disclosure--footer {
  border-left: 0;
  border-top: 1px solid var(--mbtb-border);
  padding: 20px 0 0;
  margin: 32px 0 0;
  max-width: 68ch;
}

/* ---------- lien vers la page argent ---------- */
.affilia-money {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 3.6em;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--mbtb-bg-alt);
  border-left: 3px solid var(--mbtb-accent);
}
.affilia-money__body { flex: 1 1 300px; }
.affilia-money__lead {
  font-family: var(--mbtb-heading);
  font-size: 1.125rem;
  line-height: 1.45;
  margin: 10px 0 0;
}

/* ---------- navigation article précédent / suivant ---------- */
.affilia-pair {
  display: grid;
  /* `auto-fit` plutôt que deux colonnes fixes : en début ou en fin de
     rubrique, il n'y a qu'un seul article voisin, et la seconde colonne
     laissait une case grise vide. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--mbtb-border);
  border-block: 1px solid var(--mbtb-border);
}
.affilia-pair__item {
  background: var(--mbtb-bg);
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 8px;
  transition: background 0.3s ease;
}
.affilia-pair__item:hover { background: var(--mbtb-bg-alt); }
.affilia-pair__item--next { text-align: right; }
.affilia-pair__item--next:only-child { text-align: left; }
.affilia-pair__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mbtb-accent);
}
.affilia-pair__title {
  font-family: var(--mbtb-heading);
  font-size: 1.0625rem;
  line-height: 1.35;
}

/* ---------- kicker de carte d'article ---------- */
.mbtb-post__kicker {
  display: block;
  margin-top: 14px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mbtb-accent);
}

/* ============================================================
   Silo — listings de rubriques
   ============================================================ */

.affilia-uplink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.affilia-uplink svg { width: 18px; transform: rotate(180deg); }
.affilia-uplink a { color: inherit; text-decoration: none; }

.affilia-silo { margin-block: 32px 8px; }
.affilia-silo__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.affilia-silo__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--mbtb-border);
  color: inherit;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.affilia-silo__list a svg { width: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.affilia-silo__list a:hover { border-color: var(--mbtb-accent); background: var(--mbtb-bg-alt); }
.affilia-silo__list a:hover svg { opacity: 1; transform: translateX(0); }

/* ---------- note en étoiles, remplissage réel ---------- */
.affilia-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.875rem;
}
.affilia-rating__stars {
  position: relative;
  color: var(--mbtb-border);
  letter-spacing: 0.08em;
}
.affilia-rating__stars::before {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  overflow: hidden;
  color: var(--mbtb-accent);
  white-space: nowrap;
}
.affilia-rating__count { color: color-mix(in srgb, var(--mbtb-fg) 55%, transparent); }

/* ============================================================
   Pied de page
   ============================================================ */

.mbtb-foot { margin-top: clamp(48px, 6vw, 96px); }
.mbtb-foot__top { padding-block: 48px; }
.mbtb-foot__main { padding-block: 56px 32px; }

.mbtb-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
}
.mbtb-foot__brand img { max-width: 160px; height: auto; }
.mbtb-foot__text {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--mbtb-fg) 66%, transparent);
}
.mbtb-foot__title {
  font-family: var(--mbtb-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--mbtb-accent);
  margin: 0 0 16px;
}
.mbtb-foot__list,
.mbtb-foot__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}
.mbtb-foot__list li + li { margin-top: 10px; }
.mbtb-foot__list a,
.mbtb-foot__legal a { color: inherit; text-decoration: none; }
.mbtb-foot__list a:hover,
.mbtb-foot__legal a:hover { color: var(--mbtb-accent); }

.mbtb-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--mbtb-border);
  font-size: 0.8125rem;
}
.mbtb-foot__copy { margin: 0; }
.mbtb-foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }

/* ============================================================
   Pagination et recherche
   ============================================================ */

.affilia-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.affilia-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  border: 1px solid var(--mbtb-border);
  color: inherit;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.affilia-pagination .page-numbers:hover { border-color: var(--mbtb-accent); }
.affilia-pagination .page-numbers.current {
  background: var(--mbtb-fg);
  color: var(--mbtb-bg);
  border-color: var(--mbtb-fg);
}
.affilia-pagination .dots { border-color: transparent; }

.affilia-search { display: flex; gap: 0; max-width: 520px; }
.affilia-search input[type="search"] {
  flex: 1;
  border: 1px solid var(--mbtb-border);
  border-right: 0;
  background: transparent;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  border-radius: 0;
}
.affilia-search input[type="search"]:focus {
  outline: none;
  border-color: var(--mbtb-fg);
}
.affilia-search button {
  border: 1px solid var(--mbtb-fg);
  background: var(--mbtb-fg);
  color: var(--mbtb-bg);
  padding-inline: 24px;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0;
}

/* ============================================================
   Commentaires — discrets, ils ne sont pas le sujet du site
   ============================================================ */

.affilia-comments { max-width: 68ch; }
.affilia-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.affilia-comments .comment-list li { padding-block: 20px; border-bottom: 1px solid var(--mbtb-border); }
.affilia-comments input:not([type="submit"]),
.affilia-comments textarea {
  width: 100%;
  border: 1px solid var(--mbtb-border);
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  border-radius: 0;
}
.affilia-comments input[type="submit"] {
  border: 1px solid var(--mbtb-fg);
  background: var(--mbtb-fg);
  color: var(--mbtb-bg);
  padding: 14px 28px;
  font: inherit;
  cursor: pointer;
  border-radius: 0;
}

/* ============================================================
   Points de bascule — ceux du thème d'origine
   ============================================================ */

@media (max-width: 1000px) {
  .affilia-article__grid { grid-template-columns: minmax(0, 1fr); }
  .affilia-article__cover { height: clamp(180px, 30vw, 280px); }

  /* En dessous du seuil, la colonne de gauche passe au-dessus du texte.
     Un sommaire déplié y occuperait la moitié de l'écran avant le premier
     paragraphe : il devient un panneau repliable, fermé par défaut. */
  .affilia-article__aside {
    position: static;
    order: -1;
    max-width: none;
    gap: 20px;
  }

  .affilia-toc {
    border: 1px solid var(--mbtb-border);
    border-top-width: 2px;
    border-top-color: var(--mbtb-fg);
    padding: 0;
  }

  .affilia-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    cursor: pointer;
    margin: 0;
    /* La zone tactile fait au moins 48 px de haut, poignée comprise. */
    min-height: 48px;
    box-sizing: border-box;
    list-style: none;
    user-select: none;
  }
  .affilia-toc__head::-webkit-details-marker { display: none; }

  /* Chevron dessiné en CSS : pas d'image à charger pour un détail. */
  .affilia-toc__head::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 1.5px solid var(--mbtb-accent);
    border-bottom: 1.5px solid var(--mbtb-accent);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
  }
  .affilia-toc[open] .affilia-toc__head::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .affilia-toc__list {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--mbtb-border);
  }
  /* Les entrées sont plus espacées : au doigt, 10 px ne suffisent pas
     pour viser une ligne sans en toucher deux. */
  .affilia-toc__item + .affilia-toc__item { margin-top: 0; }
  .affilia-toc__item a {
    display: block;
    padding-block: 11px;
  }
  .affilia-toc__item + .affilia-toc__item a {
    border-top: 1px solid var(--mbtb-border);
  }
  /* Le soulignement au survol n'a pas de sens sans souris. */
  .affilia-toc__item a::after { display: none; }

  .affilia-aside-card { padding: 16px 18px; }
}

@media (max-width: 599px) {
  .affilia-toc__head { padding: 14px 16px; }
  .affilia-toc__list { padding: 4px 16px 16px; }
  .affilia-toc__item--h3 { padding-left: 14px; }
}

/* Le repli n'existe que sur petit écran : au-delà, le sommaire est toujours
   ouvert, quel que soit l'état de l'élément `details`. */
@media (min-width: 1001px) {
  .affilia-toc__list { display: block !important; }
}

@media (max-width: 599px) {
  .affilia-pair { grid-template-columns: minmax(0, 1fr); }
  .affilia-pair__item--next { text-align: left; }
  .affilia-money { padding: 24px; }
  .mbtb-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .affilia-article__cover { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .affilia-article__cover img { transform: none !important; }
}

/* ============================================================
   Carte produit — le seul badge prévu par le thème d'origine
   était « épuisé » ; en affiliation, c'est la remise qui compte.
   ============================================================ */

.pcard__flag {
  top: 10px;
  left: 10px;
  background: var(--mbtb-fg);
  color: var(--mbtb-bg);
  font-weight: 600;
}

.pcard .affilia-rating { margin-top: 6px; font-size: 0.8125rem; }
.pcard__price s { opacity: 0.45; font-size: 0.8125rem; }

/* ============================================================
   Blocs Affilia dans un article
   Le tableau comparatif a besoin de plus que les 68 caractères
   de la colonne de lecture. La grille de l'article étant connue
   ici — sommaire de 260 px, gouttière, marges — on lui donne la
   largeur exacte qui reste à droite, sans jamais recouvrir le
   sommaire collé à gauche.
   ============================================================ */

@media (min-width: 1001px) {
  .affilia-article__body {
    /* Le corps de l'article remplit déjà la colonne : le tableau n'a plus à
       déborder, il s'aligne simplement sur les paragraphes. */
    --affbloc-large: 100%;
  }
}

/* Les listes du comparatif ne suivent pas le retrait des listes de l'article. */
.affilia-article__body .affbloc__liste { padding-left: 0; }
.affilia-article__body .affbloc__liste > li { padding-left: 18px; }

/* Le bloc gère ses propres marges verticales. */
.affilia-article__body > .affbloc { margin-top: 2.8em; }

/* Le tableau comparatif déborde la mesure de lecture : quatre colonnes de
   produits ne tiennent pas dans 68 caractères, alors que le texte y tient. */
.affilia-article__grid--seul .affilia-article__body { --affbloc-large: 100%; }

@media (min-width: 1001px) {
  /* Le tableau déborde la mesure de lecture, symétriquement : quatre
     colonnes de produits ne tiennent pas dans la largeur d'un paragraphe. */
  .affilia-article__grid--seul .affilia-article__body { --affbloc-large: 1060px; }

  .affilia-article__grid--seul .affbloc--tableau {
    margin-inline: calc((820px - 1060px) / 2);
  }
}