/* AFF_BLOCKS_V1 — affiliate blocks (offer list, verdict, compare, duel, scorecard, regulation, risk).
   Tokens: the editorial-journey ones inside the format, the theme ones elsewhere. No hover effect, one surface,
   one call to action. Selectors are (0,2,0)+ so the theme content rules (0,1,1) do not restyle the blocks. */

/* AFFILIATE_STYLE_TOKENS_V1 (demande Julien 07/10) — one look for every affiliation component, services (aff-*) and
   physical products (mi-*). No colour, font or radius of its own: every token reads the site theme (theme.json →
   --color-*, --font-*, --radius*, --style-button-radius, editorial-tokens --wi2-*), the fallbacks only serve a site
   without them. Same block in affiliate-blocks.css and affiliate-surface (style-align); change it in both. */
:root{
  --aff-ui-font:var(--font-body,inherit);
  --aff-ui-font-heading:var(--font-heading,var(--aff-ui-font));
  --aff-ui-ink:var(--color-text,#1d2a2c);
  --aff-ui-heading:var(--color-dark-bg,var(--aff-ui-ink));
  --aff-ui-muted:var(--color-text-muted,color-mix(in srgb,var(--aff-ui-ink) 65%,transparent));
  --aff-ui-paper:var(--color-bg,#fff);
  --aff-ui-accent:var(--color-accent,#166b65);
  --aff-ui-accent-2:var(--color-accent-2,var(--aff-ui-accent));
  --aff-ui-accent-ink:color-mix(in srgb,var(--aff-ui-accent) 72%,var(--aff-ui-heading));
  --aff-ui-line:color-mix(in srgb,var(--aff-ui-ink) 13%,transparent);
  /* cards and panels: the tinted panel of the aff blocks */
  --aff-ui-card-bg:color-mix(in srgb,var(--aff-ui-accent-2) 5%,var(--aff-ui-paper));
  --aff-ui-card-line:color-mix(in srgb,var(--aff-ui-accent-2) 22%,var(--aff-ui-line));
  --aff-ui-card-radius:var(--wi2-card-radius,var(--radius-lg,24px));
  --aff-ui-card-shadow:none;
  --aff-ui-card-hover-line:color-mix(in srgb,var(--aff-ui-accent) 32%,var(--aff-ui-card-line));
  --aff-ui-card-hover-shadow:var(--wi2-card-shadow-hover,var(--shadow-hover,0 12px 28px rgba(0,0,0,.08)));
  --aff-ui-card-lift:translateY(-2px);
  --aff-ui-inner-radius:calc(var(--radius,16px) * .75);
  --aff-ui-media-radius:calc(var(--aff-ui-card-radius) * .7);
  /* buttons: primary filled, secondary outlined, tertiary text link with arrow */
  --aff-btn-radius:var(--wi2-action-radius,var(--cms-ds-action-radius,var(--style-button-radius,12px)));
  --aff-btn-height:46px;
  --aff-btn-height-sm:40px;
  --aff-btn-pad:10px 18px;
  --aff-btn-pad-sm:8px 12px;
  --aff-btn-gap:8px;
  --aff-btn-font:800 14px/1.2 var(--aff-ui-font);
  --aff-btn-font-sm:800 13px/1.2 var(--aff-ui-font);
  --aff-btn-motion:var(--wi2-action-motion,.2s ease);
  --aff-btn-primary-bg:var(--aff-ui-accent-2);
  --aff-btn-primary-ink:var(--color-on-accent-2,var(--color-on-accent,#fff));
  --aff-btn-primary-shadow:0 8px 18px color-mix(in srgb,var(--aff-btn-primary-bg) 22%,transparent);
  --aff-btn-secondary-bg:var(--aff-ui-paper);
  --aff-btn-secondary-ink:var(--aff-ui-heading);
  --aff-btn-secondary-line:color-mix(in srgb,var(--aff-ui-ink) 16%,transparent);
  --aff-btn-tertiary-ink:var(--aff-ui-accent-ink);
  --aff-btn-hover-bg:var(--aff-ui-heading);
  --aff-btn-hover-ink:var(--color-dark-text,#fff);
  --aff-btn-hover-shadow:0 10px 22px color-mix(in srgb,var(--aff-btn-hover-bg) 16%,transparent);
  --aff-focus-ring:color-mix(in srgb,var(--aff-ui-accent) 45%,transparent);
  /* chips (facts), badges, rank medals (gold, silver, bronze are metals, not theme colours) */
  --aff-chip-radius:var(--radius-full,999px);
  --aff-chip-bg:color-mix(in srgb,var(--aff-ui-accent) 8%,var(--aff-ui-paper));
  --aff-chip-ink:var(--aff-ui-muted);
  --aff-chip-font:500 12.5px/1.3 var(--aff-ui-font);
  --aff-badge-bg:color-mix(in srgb,var(--aff-ui-accent) 12%,var(--aff-ui-paper));
  --aff-badge-media-bg:color-mix(in srgb,var(--aff-ui-paper) 92%,transparent);
  --aff-badge-ink:var(--aff-ui-accent-ink);
  --aff-badge-font:800 11px/1.25 var(--aff-ui-font);
  --aff-badge-tracking:.05em;
  --aff-rank-bg:var(--aff-ui-accent);--aff-rank-ink:var(--color-on-accent,var(--aff-ui-heading));
  --aff-medal-1:#f4c64f;--aff-medal-1-ink:#49350a;
  --aff-medal-2:#d5dde5;--aff-medal-2-ink:#34404c;
  --aff-medal-3:#d99a68;--aff-medal-3-ink:#4a2914;
  /* modals */
  --aff-modal-bg:var(--aff-ui-paper);
  --aff-modal-line:var(--aff-ui-card-line);
  --aff-modal-radius:var(--aff-ui-card-radius);
  --aff-modal-shadow:var(--shadow-lg,0 24px 72px rgba(0,0,0,.2));
  --aff-modal-backdrop:color-mix(in srgb,var(--color-dark-bg,#111) 62%,transparent);
  --aff-modal-close-size:40px
}
/* AFFILIATE_STYLE_TOKENS_V1_END */

.aff{
  --aff-accent:var(--ej-accent,var(--color-accent,#166b65));
  --aff-on-accent:var(--color-on-accent,#fff);
  --aff-ink:var(--ej-ink,var(--color-text,#1d2a2c));
  --aff-heading:var(--ej-heading,var(--aff-ink));
  --aff-muted:var(--ej-muted,var(--color-text-muted,#5d6a6d));
  --aff-line:var(--ej-line,var(--color-border,#e2e7e5));
  --aff-paper:var(--ej-paper,var(--color-bg,#fff));
  --aff-card:var(--ej-card,var(--aff-ui-card-bg));
  --aff-card-line:var(--ej-card-line,var(--aff-ui-card-line));
  --aff-note:var(--ej-note,color-mix(in srgb,var(--aff-accent) 7%,var(--aff-paper)));
  --aff-good:var(--ej-good,#1f7a50);
  --aff-bad:var(--ej-bad,#b0472f);
  --aff-good-soft:color-mix(in srgb,var(--aff-good) 9%,var(--aff-paper));
  --aff-bad-soft:color-mix(in srgb,var(--aff-bad) 8%,var(--aff-paper));
  --aff-radius:var(--aff-ui-card-radius);
  --aff-radius-sm:var(--aff-ui-inner-radius);
  color:var(--aff-ink);font-family:var(--aff-ui-font)
}
.aff :where(p,ul,ol,dl,dd,figure){margin:0}
.aff :where(ul){padding:0;list-style:none}
.aff :where(li){margin:0;padding:0;border:0;background:none;list-style:none}
.aff :where(li)::before{content:none}
/* The theme gives content paragraphs and lists vertical margins (0,1,1): the blocks own their rhythm. */
.ej-block.aff :is(p,ul,ol,dl){margin-top:0;margin-bottom:0}
.aff .aff-facts,.aff .aff-proscons ul,.aff .aff-scorecard__dims,.aff .aff-regulation__list{margin:0;padding:0;list-style:none}
.aff .aff-facts>li,.aff .aff-proscons li,.aff .aff-scorecard__dims>li,.aff .aff-regulation__list>li{margin:0;list-style:none}
.aff-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aff .aff-na{color:var(--aff-muted);font-weight:400}

/* One surface for every panel; variants switch the variables on their parent. */
:where(.aff) :where(.aff-row,.aff-verdict__panel,.aff-decision__panel,.aff-gallery__shots,.aff-test__panel,.aff-test__row,.aff-compare__scroll,.aff-duel__panel,.aff-scorecard__panel,.aff-regulation__item){
  background:var(--aff-panel-bg,var(--aff-card));border:1px solid var(--aff-panel-line,var(--aff-card-line));border-radius:var(--aff-panel-radius,var(--aff-radius))
}

/* Shared atoms: visual, rank, badge, score, ring, facts, offer, call to action. */
.aff .aff-visual{display:grid;place-items:center;flex:none;width:64px;height:64px;overflow:hidden;border-radius:var(--aff-radius-sm);background:var(--aff-paper);border:1px solid var(--aff-line)}
.aff .aff-visual img{width:100%;height:100%;object-fit:contain}
.aff .aff-visual.is-logo img{width:78%;height:78%}
.aff .aff-visual.is-photo{border-color:transparent}
.aff .aff-visual.is-monogram{font:800 20px/1 var(--aff-ui-font);color:var(--aff-accent);background:var(--aff-note);border-color:transparent}
.aff .aff-visual--lg{width:88px;height:88px}
.aff .aff-visual--sm{width:44px;height:44px;font-size:15px}
.aff .aff-rank{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--aff-note);color:var(--aff-heading);font:800 14px/1 var(--aff-ui-font)}
.aff .aff-rank svg{position:absolute;inset:-2px;width:38px;height:38px;fill:var(--aff-medal,var(--aff-accent));stroke:none;opacity:.38}
.aff .aff-rank b{position:relative}
.aff .aff-row--rank-1{--aff-medal:var(--aff-medal-1)}.aff .aff-row--rank-2{--aff-medal:var(--aff-medal-2)}.aff .aff-row--rank-3{--aff-medal:var(--aff-medal-3)}
.aff .aff-row--podium .aff-rank{background:color-mix(in srgb,var(--aff-medal) 18%,var(--aff-paper));color:color-mix(in srgb,var(--aff-medal) 70%,var(--aff-heading))}
.aff .aff-badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;padding:5px 10px;border-radius:var(--aff-chip-radius);background:var(--aff-badge-bg);color:var(--aff-badge-ink);font:var(--aff-badge-font);letter-spacing:var(--aff-badge-tracking);text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
.aff .aff-badge::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.aff .aff-score{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--aff-muted)}
.aff .aff-score svg{width:15px;height:15px;fill:#e0a526;stroke:none}
.aff .aff-score b{font-size:16px;font-weight:800;color:var(--aff-heading)}
.aff .aff-ring{--aff-ring:0;display:grid;place-items:center;align-content:center;flex:none;width:92px;height:92px;border-radius:50%;background:radial-gradient(closest-side,var(--aff-paper) 82%,transparent 83%),conic-gradient(var(--aff-accent) calc(var(--aff-ring) * 1%),var(--aff-line) 0);line-height:1}
.aff .aff-ring b{font-size:28px;font-weight:800;color:var(--aff-heading)}
.aff .aff-ring small{margin-top:3px;font-size:12px;color:var(--aff-muted)}
/* Facts read as the chips of the physical product cards (AFFILIATE_STYLE_TOKENS_V1). */
.aff .aff-facts{display:flex;flex-wrap:wrap;gap:6px}
.aff .aff-facts li{position:relative;padding:6px 11px 6px 27px;border-radius:var(--aff-chip-radius);background:var(--aff-chip-bg);font:var(--aff-chip-font);color:var(--aff-chip-ink)}
.aff .aff-facts li.is-no b{color:var(--aff-bad)}
.aff .aff-facts li::before{content:"✓";position:absolute;left:11px;top:6px;font-weight:800;color:var(--aff-good)}
.aff .aff-facts li.is-no::before{content:"✕";color:var(--aff-bad)}
.aff .aff-facts b{font-weight:650;color:var(--aff-ink)}
.aff .aff-offer{display:grid;gap:3px;width:100%;margin:0;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--aff-accent) 45%,transparent);border-radius:var(--aff-radius-sm);background:color-mix(in srgb,var(--aff-accent) 6%,var(--aff-paper));text-align:left}
.aff .aff-offer__label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-accent)}
.aff .aff-offer__label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-offer b{font-size:14.5px;font-weight:750;line-height:1.35;color:var(--aff-heading)}
.aff .aff-offer small{font-size:12.5px;color:var(--aff-muted)}
.aff .aff-offer--bonus b{color:var(--aff-heading)}
/* Buttons (AFFILIATE_STYLE_TOKENS_V1): the same three buttons as the physical product cards. The official-site
   button (--source) is the same primary button: one call to action per product, whatever the link. */
.aff a.aff-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--aff-btn-gap);min-height:var(--aff-btn-height);padding:var(--aff-btn-pad);border:1px solid transparent;border-radius:var(--aff-btn-radius);background:var(--aff-btn-primary-bg);color:var(--aff-btn-primary-ink);font:var(--aff-btn-font);text-decoration:none;white-space:nowrap;box-shadow:var(--aff-btn-primary-shadow)}
.aff a.aff-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.aff a.aff-cta--source{background:var(--aff-btn-primary-bg);color:var(--aff-btn-primary-ink);box-shadow:var(--aff-btn-primary-shadow)}
/* AFF_EXPOSURE_V1: a plain official-site button of a product without programme is the shared secondary (outlined) button;
   so is the button of the light pick card (aff-chooser alternative, AFF_CHOOSER_V1). */
.aff a.aff-cta--secondary,.aff.aff-verdict--pick-light a.aff-cta{background:var(--aff-btn-secondary-bg);color:var(--aff-btn-secondary-ink);border-color:var(--aff-btn-secondary-line);box-shadow:none}
.aff a.aff-cta:focus-visible,.aff a.aff-btn-review:focus-visible,.aff a.aff-review-link:focus-visible{outline:3px solid var(--aff-focus-ring);outline-offset:2px}
.aff a.aff-review-link{display:inline-flex;align-items:center;gap:6px;justify-self:center;font:var(--aff-btn-font-sm);color:var(--aff-btn-tertiary-ink);text-decoration:none;transition:color var(--aff-btn-motion)}
.aff a.aff-review-link::after{content:"→";transition:transform var(--aff-btn-motion)}
.aff a.aff-review-link:hover{color:var(--aff-ui-heading)}.aff a.aff-review-link:hover::after{transform:translateX(3px)}
.aff .aff-reg{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;padding:4px 10px;border-radius:var(--aff-chip-radius);font:700 12px/1.3 var(--aff-ui-font);background:var(--aff-note);color:var(--aff-muted)}
.aff .aff-reg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.aff .aff-reg--authorised{background:var(--aff-good-soft);color:var(--aff-good)}
.aff .aff-reg--refused{background:var(--aff-bad-soft);color:var(--aff-bad)}
.aff .aff-note{margin-top:10px;font-size:13px;line-height:1.55;color:var(--aff-muted)}

/* aff-offer-list (AFF_OFFER_LIST_V1): identity · why · offer. */
.aff-list__rows{display:grid;gap:20px}
.aff .aff-row{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.8fr) minmax(220px,.8fr);gap:18px 30px;align-items:center;padding:24px 26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.aff .aff-row--rank-1{--aff-panel-line:color-mix(in srgb,var(--aff-medal-1) 55%,var(--aff-card-line))}
.aff .aff-row__id{display:flex;align-items:center;gap:12px;min-width:0}
.aff .aff-row__name{display:grid;gap:4px;min-width:0}
.aff .aff-row__name strong{font-size:17px;line-height:1.25;color:var(--aff-heading)}
.aff .aff-row__why{display:grid;gap:9px;align-content:center;min-width:0}
.aff .aff-row__reason{font-size:14.5px;font-weight:650;line-height:1.45;color:var(--aff-ink)}
.aff .aff-row__offer{display:grid;gap:8px;justify-items:stretch}
.aff .aff-row__offer .aff-cta{width:100%}

/* aff-verdict (AFF_VERDICT_V1). */
.aff .aff-verdict__panel{display:grid;gap:18px;padding:22px 24px}
.aff .aff-verdict__head{display:flex;align-items:center;gap:18px;min-width:0}
.aff .aff-verdict__name{display:grid;gap:5px;flex:1;min-width:0}
.aff .aff-verdict__name strong{font-size:22px;line-height:1.2;color:var(--aff-heading)}
.aff .aff-verdict__text{font-size:16.5px;line-height:1.6;color:var(--aff-ink)}
.aff .aff-fit{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aff .aff-fit__item{padding:12px 14px;border-radius:var(--aff-radius-sm);background:var(--aff-good-soft)}
.aff .aff-fit__item.is-no{background:var(--aff-bad-soft)}
.aff .aff-fit dt{margin-bottom:3px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-good)}
.aff .aff-fit .is-no dt{color:var(--aff-bad)}
.aff .aff-fit dd{font-size:14.5px;line-height:1.45}
.aff .aff-proscons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aff .aff-proscons__col{display:grid;gap:8px;align-content:start;padding:14px 16px;border-radius:var(--aff-radius-sm);background:var(--aff-good-soft)}
.aff .aff-proscons__col.is-no{background:var(--aff-bad-soft)}
.aff .aff-proscons__col>p{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-good)}
.aff .aff-proscons__col.is-no>p{color:var(--aff-bad)}
.aff .aff-proscons ul{display:grid;gap:6px}
.aff .aff-proscons li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45}
.aff .aff-proscons li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--aff-good)}
.aff .aff-proscons .is-no li::before{content:"–";left:3px;color:var(--aff-bad)}
.aff .aff-verdict__decide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:center;padding-top:16px;border-top:1px solid var(--aff-line)}
.aff .aff-verdict__decide:not(:has(.aff-offer)){grid-template-columns:1fr;justify-items:end}
.aff .aff-verdict__actions{display:grid;gap:8px;justify-items:center}

/* aff-compare (AFF_COMPARE_V1): grid table (the theme restyles every <table>); the label column stays visible when it scrolls. */
.aff .aff-compare__scroll{overflow-x:auto;overscroll-behavior-x:contain}
.aff .aff-compare__scroll:focus-visible{outline:3px solid color-mix(in srgb,var(--aff-accent) 40%,transparent);outline-offset:2px}
.aff .aff-compare__grid{display:grid;min-width:calc(170px + var(--aff-cols,3) * 150px);font-size:14.5px;line-height:1.4}
.aff .aff-compare__row{display:grid;grid-template-columns:minmax(170px,1.1fr) repeat(var(--aff-cols,3),minmax(150px,1fr));border-top:1px solid var(--aff-line)}
.aff .aff-compare__row--head{border-top:0}
.aff .aff-compare__row>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 14px;text-align:center}
.aff .aff-compare__row>.aff-compare__label{position:sticky;left:0;z-index:1;align-items:flex-start;text-align:left;font-weight:650;color:var(--aff-heading);background:var(--aff-card)}
.aff .aff-compare__row--head>span{background:var(--aff-note)}
.aff .aff-compare__product strong{font-size:15px;line-height:1.25;color:var(--aff-heading)}
.aff .aff-compare__cell.is-best{background:var(--aff-good-soft);color:var(--aff-good);font-weight:750}
.aff .aff-compare__row--cta>span{justify-content:flex-start}
.aff .aff-compare__row--cta .aff-cta{min-height:var(--aff-btn-height-sm);padding:var(--aff-btn-pad-sm);font:var(--aff-btn-font-sm)}

/* aff-duel (AFF_DUEL_V1): A | label | B everywhere, the better side marked.
   AFF_DUEL_LABEL_COL_V1 (Julien 2026-10-22): one fixed middle column for the heads, the score rows and the fact rows,
   so every bar and value lines up whatever the label length (long labels wrap inside it). */
.aff .aff-duel__panel{--aff-duel-label:clamp(130px,26%,190px);display:grid;gap:20px;padding:22px 24px}
.aff .aff-duel__heads{display:grid;grid-template-columns:minmax(0,1fr) var(--aff-duel-label) minmax(0,1fr);align-items:center;justify-items:center;gap:12px}
.aff .aff-duel__side{display:grid;justify-items:center;gap:6px;text-align:center}
.aff .aff-duel__side strong{font-size:19px;line-height:1.2;color:var(--aff-heading)}
.aff .aff-duel__vs{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--aff-heading);color:var(--aff-paper);font:800 15px/1 var(--aff-ui-font)}
.aff .aff-duel__verdict{font-size:16px;line-height:1.6;text-align:center}
.aff .aff-duel__choose{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aff .aff-duel__choose p{display:grid;gap:4px;padding:12px 14px;border-radius:var(--aff-radius-sm);background:var(--aff-note);font-size:14.5px;line-height:1.45}
.aff .aff-duel__choose span{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--aff-accent)}
.aff .aff-duel__dims,.aff .aff-duel__facts{display:grid}
.aff .aff-duel__dim,.aff .aff-duel__fact{display:grid;grid-template-columns:minmax(0,1fr) var(--aff-duel-label) minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--aff-line)}
.aff .aff-duel__label{font-size:13.5px;font-weight:650;text-align:center;color:var(--aff-heading)}
.aff .aff-duel__bar{--aff-v:0%;display:grid;align-items:center;gap:10px}
.aff .aff-duel__bar--a{grid-template-columns:2.2em 1fr}
.aff .aff-duel__bar--b{grid-template-columns:1fr 2.2em}
.aff .aff-duel__bar i{height:12px;border-radius:999px;background:linear-gradient(to var(--aff-dir,right),color-mix(in srgb,var(--aff-muted) 35%,var(--aff-paper)) var(--aff-v),var(--aff-note) 0)}
.aff .aff-duel__bar--a i{--aff-dir:left}
.aff .aff-duel__bar.is-best i{background:linear-gradient(to var(--aff-dir,right),var(--aff-accent) var(--aff-v),var(--aff-note) 0)}
.aff .aff-duel__bar b{font-size:14px;font-weight:800;color:var(--aff-heading);text-align:center}
.aff .aff-duel__bar.is-best b{color:var(--aff-accent)}
.aff .aff-duel__fact>span:not(.aff-duel__label){font-size:14.5px;text-align:center}
.aff .aff-duel__fact>span.is-best{color:var(--aff-good);font-weight:750}
.aff .aff-duel__ctas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aff .aff-duel__ctas>div{display:grid;gap:7px;justify-items:center;align-content:start}

/* aff-scorecard (AFF_SCORECARD_V1). */
.aff .aff-scorecard__panel{display:grid;gap:16px;padding:22px 24px}
.aff .aff-scorecard__total{display:flex;align-items:center;gap:16px}
.aff .aff-scorecard__total p{display:grid;gap:2px}
.aff .aff-scorecard__total strong{font-size:18px;color:var(--aff-heading)}
.aff .aff-scorecard__total span{font-size:13px;color:var(--aff-muted)}
.aff .aff-scorecard__dims{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.aff .aff-scorecard__dims li{--aff-v:0%;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:baseline}
.aff .aff-scorecard__label{font-size:14.5px;font-weight:650;color:var(--aff-heading)}
.aff .aff-scorecard__dims b{font-size:15px;font-weight:800}
.aff .aff-meter{grid-column:1/-1;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--aff-accent) var(--aff-v),var(--aff-line) 0)}
.aff .aff-scorecard__dims small{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--aff-muted)}

/* aff-regulation (AFF_REGULATION_V1). */
.aff .aff-regulation__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.aff .aff-regulation__item{display:flex;align-items:flex-start;gap:14px;padding:16px 18px}
.aff .aff-regulation__item>div{display:grid;gap:5px;min-width:0}
.aff .aff-regulation__item strong{font-size:16px;color:var(--aff-heading)}
.aff .aff-regulation__item p{font-size:14px;line-height:1.45}
.aff .aff-regulation__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px!important;color:var(--aff-muted)}
.aff .aff-regulation__meta a{color:var(--aff-accent)}


/* aff-risk (AFF_RISK_V1): the closing note, quiet but complete. */
.aff.aff-risk{display:grid;gap:8px;padding:16px 18px;border-left:3px solid var(--aff-accent);border-radius:0 var(--aff-radius-sm) var(--aff-radius-sm) 0;background:var(--aff-note)}
.aff.aff-risk p{font-size:13.5px;line-height:1.6;color:var(--aff-ink)}
.aff.aff-risk .aff-risk__title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-accent)}

@media (max-width:860px){
  .aff .aff-row{grid-template-columns:1fr;gap:14px;padding:16px}
  .aff .aff-row__offer{padding-top:12px;border-top:1px solid var(--aff-line)}
  .aff .aff-verdict__decide{grid-template-columns:1fr}
}
@media (max-width:600px){
  .aff .aff-facts,.aff .aff-fit,.aff .aff-proscons,.aff .aff-scorecard__dims,.aff .aff-duel__choose{grid-template-columns:1fr}
  .aff .aff-verdict__panel,.aff .aff-duel__panel,.aff .aff-scorecard__panel{padding:16px}
  .aff .aff-verdict__head{flex-wrap:nowrap;gap:12px}
  .aff .aff-verdict__head .aff-visual--lg{width:56px;height:56px}
  .aff .aff-ring{width:72px;height:72px}.aff .aff-ring b{font-size:22px}
  .aff .aff-duel__heads{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .aff .aff-duel__dim,.aff .aff-duel__fact{grid-template-columns:1fr 1fr;gap:6px 10px}
  .aff .aff-duel__dim .aff-duel__label,.aff .aff-duel__fact .aff-duel__label{grid-column:1/-1;grid-row:1}
  .aff .aff-duel__ctas{grid-template-columns:1fr 1fr;gap:8px}
  .aff .aff-duel__ctas :is(.aff-cta,.aff-btn-review){padding-inline:12px}
}
@media print{.aff a.aff-cta{display:none}}

/* Inside the editorial-journey format, the wide blocks take the wide column (their heading stays in the reading column). */
.ej-reader :is(.ej-section,.ej-opening)>.aff:is(.aff-list,.aff-compare,.aff-duel,.aff-plan-cards,.aff-usage-cards){--ej-col:var(--ej-wide)}

/* AFF_RISK_AUTO_V2: risk paragraphs merged into the format's disclaimer box, under its text. */
.ej-endnote--disclaimer .ej-endnote__text>.ej-endnote__more{grid-column:2;display:block;margin-top:2px}

/* aff-sticky (AFF_STICKY_V1): the review's call to action at hand, at the bottom of the screen. */
.aff.aff-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--aff-paper) 94%,transparent);backdrop-filter:blur(10px);border-top:4px solid var(--color-accent,var(--aff-accent));box-shadow:0 -10px 30px color-mix(in srgb,var(--aff-ink) 10%,transparent)}
.aff.aff-sticky[hidden]{display:none}
.aff .aff-sticky__inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;max-width:1100px;margin:0 auto}
.aff .aff-sticky__id{display:flex;align-items:center;gap:12px;min-width:0}
.aff .aff-sticky__id p{display:grid;gap:1px;min-width:0}
.aff .aff-sticky__id strong{font-size:16px;color:var(--aff-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aff .aff-sticky__offer{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;align-self:center;margin:0;padding:7px 14px 7px 10px;border:1px dashed color-mix(in srgb,var(--aff-accent) 45%,transparent);border-radius:var(--aff-radius-sm);background:color-mix(in srgb,var(--aff-accent) 7%,var(--aff-paper));text-align:left}
.aff .aff-sticky__offer svg{grid-row:1 / 3;width:22px;height:22px;fill:none;stroke:var(--aff-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-sticky__offer span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-accent)}
.aff .aff-sticky__offer b{font-size:14px;line-height:1.3;color:var(--aff-heading)}
.aff .aff-sticky__id p{margin:0}.aff .aff-sticky .aff-score{gap:4px}
.aff.aff-slidebar{margin:18px auto 0;max-width:var(--ej-measure,760px);padding:14px 18px;border:1px solid var(--aff-card-line);border-radius:var(--aff-radius);background:var(--aff-card)}
.ej-reader:not(.ej-reader--immersive) .aff-slidebar{display:none}
/* AFF_SLIDEBAR_FIT_V1: in the presentation bar the identity keeps its width, the offer takes what is left (2 lines). */
@media (min-width:641px){.aff.aff-slidebar .aff-sticky__inner{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}.aff.aff-slidebar .aff-sticky__id{min-width:max-content}.aff.aff-slidebar .aff-sticky__offer{min-width:0}.aff.aff-slidebar .aff-sticky__offer b{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
@media (max-width:640px){.aff.aff-slidebar .aff-sticky__inner{grid-template-columns:minmax(0,1fr) auto}.aff.aff-slidebar .aff-sticky__offer{display:grid;grid-column:1 / -1;order:3}}
.aff .aff-sticky a.aff-cta{min-height:var(--aff-btn-height-sm);padding:var(--aff-btn-pad-sm);padding-inline:18px}
@media (max-width:640px){.aff .aff-sticky__inner{grid-template-columns:minmax(0,1fr) auto;gap:10px}.aff .aff-sticky__offer{display:none}.aff .aff-sticky a.aff-cta{padding-inline:14px}}
/* The site back-to-top button rises above the bar while it is shown (no overlap with the call to action). */
body:has(.aff-sticky:not([hidden])) .cms-back-to-top{bottom:calc(24px + 80px + env(safe-area-inset-bottom))}
@media print{.aff.aff-sticky{display:none!important}}
/* aff-decision (AFF_DECISION_V1): the closing « Oui, si / Non, si » of a review, on the pros/cons columns. */
.aff .aff-decision__panel{display:grid;gap:16px;padding:22px 24px}
.aff .aff-decision__panel>.aff-verdict__actions{justify-items:end}
/* aff-gallery (AFF_GALLERY_V1): screenshots of the service in a scroll strip, or one video. */
.aff .aff-gallery__shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,210px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px;overscroll-behavior-x:contain}
.aff .aff-gallery__shot{margin:0;scroll-snap-align:start;display:grid;gap:6px}
.aff .aff-gallery__shot img{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:var(--aff-radius-sm);border:1px solid var(--aff-line);background:var(--aff-paper)}
.aff .aff-gallery__shot figcaption{font-size:13px;line-height:1.4;color:var(--aff-muted)}
.aff .aff-gallery__video{position:relative;aspect-ratio:16/9;border-radius:var(--aff-radius);overflow:hidden;background:#000}
.aff .aff-gallery__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aff .aff-gallery__note{margin:0;font-size:var(--ej-small,13px);color:var(--aff-muted);text-align:center}
.aff.aff-gallery{display:grid;gap:12px}
/* aff-test (AFF_TEST_V1): « Notre test » — the shared panel, the gallery's caption style, local muted clips. */
.aff.aff-test{display:grid;gap:14px}
.aff .aff-test__panel{display:grid;gap:12px;padding:18px 20px}
.aff .aff-test__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.aff .aff-test__meta div{display:grid;gap:2px}
.aff .aff-test__meta dt{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--aff-muted)}
.aff .aff-test__meta dd{margin:0;font-weight:600;color:var(--aff-ui-heading)}
.aff .aff-test__verdict{margin:0;font-size:1.05em;font-weight:600;color:var(--aff-ui-heading)}
.aff .aff-test__points{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.aff .aff-test__points li{margin:0}
.aff .aff-test__muted{font-size:13px;color:var(--aff-muted);font-weight:400}
.aff .aff-test__protocol summary{cursor:pointer;font-weight:600;color:var(--aff-ui-accent-ink)}
.aff .aff-test__protocol ol{margin:8px 0 0;padding-left:1.3em}
.aff .aff-test__shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,300px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:4px}
.aff .aff-test__shots>div{scroll-snap-align:start}
.aff .aff-test__shot,.aff .aff-test__clip{margin:0;display:grid;gap:6px}
.aff .aff-test__shot img,.aff .aff-test__video{display:block;width:100%;height:auto;border-radius:var(--aff-radius-sm);border:1px solid var(--aff-line);background:var(--aff-paper)}
.aff .aff-test__shot figcaption,.aff .aff-test__clip figcaption{font-size:13px;line-height:1.4;color:var(--aff-muted)}
.aff .aff-test__clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.aff .aff-test__limits{margin:0;font-size:var(--ej-small,13px);color:var(--aff-muted)}
/* AFF_TEST_SOBER_V1 (Julien 2026-10-21): no data panel — captures legible one under the other, 2–3 measures in large
   type, one discreet proof line. */
.aff .aff-test__figures{display:grid;gap:26px}
.aff .aff-test__measures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px;margin:0}
.aff .aff-test__measures>div{display:grid;align-content:start;gap:8px;padding:16px 18px;border:1px solid var(--aff-line,rgba(16,24,32,.1));border-radius:14px;background:var(--aff-surface,#fff)}
.aff .aff-test__measures dt{font-size:13px;font-weight:600;color:var(--aff-muted)}
.aff .aff-test__measures dd{display:grid;align-content:start;gap:6px;margin:0}
.aff .aff-test__measures strong{font-size:clamp(22px,2.6vw,28px);line-height:1.1;font-weight:850;color:var(--aff-ui-heading)}
.aff .aff-test__measures small{font-size:12.5px;line-height:1.4;color:var(--aff-muted)}
.aff .aff-test__proof{margin:0;font-size:13px;color:var(--aff-muted)}
.aff .aff-test__proof a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.aff .aff-test__rows{display:grid;gap:12px}
.aff .aff-test__row{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:16px;align-items:start;padding:14px}
.aff .aff-test__row .aff-test__shot{margin:0}
.aff .aff-test__row-title{margin:0 0 4px;font-size:1.05em}
.aff .aff-test__row-body p{margin:0 0 6px}
.aff .aff-test__more{font-weight:600;color:var(--aff-btn-tertiary-ink)}
@media (max-width:640px){.aff .aff-test__row{grid-template-columns:1fr}.aff .aff-test__panel{padding:16px}}
@media (max-width:640px){.aff .aff-decision__panel{padding:16px}.aff .aff-decision__panel .aff-proscons{grid-template-columns:1fr}}

/* AFF_OFFER_LIST_V3 (demande Julien 07/10): the ranking card follows the product picks of the physical surfaces —
   a visual tile with its #rank pill and medal, a hover that lifts the card, an offer column with « Voir l'offre »
   and « Avis complet ». The tinted panel background and border stay (they cut with the white page). */
.aff .aff-row{box-shadow:var(--aff-ui-card-shadow)}
.aff .aff-row:hover{transform:var(--aff-ui-card-lift);border-color:var(--aff-ui-card-hover-line);box-shadow:var(--aff-ui-card-hover-shadow)}
.aff .aff-row__id{gap:16px}
.aff .aff-row__tile{position:relative;flex:none}
.aff .aff-row__tile .aff-visual{width:92px;height:92px;border-radius:var(--aff-ui-media-radius)}
/* The #rank pill and its medal: the colours of the physical product picks (rank 1-3 metals, then the site accent). */
.aff .aff-row__tile .aff-rank{position:absolute;z-index:1;top:-9px;left:-9px;display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;min-width:0;padding:6px 10px 6px 8px;border-radius:var(--aff-chip-radius);background:var(--aff-rank-bg);color:var(--aff-rank-ink);font:900 12.5px/1 var(--aff-ui-font);box-shadow:0 7px 16px color-mix(in srgb,var(--aff-ui-heading) 12%,transparent)}
.aff .aff-row__tile .aff-rank svg{position:static;inset:auto;width:15px;height:15px;opacity:1;fill:currentColor}
.aff .aff-row--rank-1 .aff-row__tile .aff-rank{background:var(--aff-medal-1);color:var(--aff-medal-1-ink)}
.aff .aff-row--rank-2 .aff-row__tile .aff-rank{background:var(--aff-medal-2);color:var(--aff-medal-2-ink)}
.aff .aff-row--rank-3 .aff-row__tile .aff-rank{background:var(--aff-medal-3);color:var(--aff-medal-3-ink)}
.aff .aff-row__name strong{font-size:19px;font-family:var(--aff-ui-font-heading)}
.aff .aff-row__offer{align-content:center;gap:10px}
.aff .aff-price{margin:0;text-align:right}.aff .aff-price b{font:700 24px/1.15 var(--aff-ui-font-heading);color:var(--aff-heading)}
.aff .aff-actions{display:grid;gap:8px}
.aff .aff-actions .aff-cta{width:100%}
.aff a.aff-btn-review{display:inline-flex;align-items:center;justify-content:center;gap:var(--aff-btn-gap);min-height:var(--aff-btn-height);padding:var(--aff-btn-pad);border:1px solid var(--aff-btn-secondary-line);border-radius:var(--aff-btn-radius);background:var(--aff-btn-secondary-bg);color:var(--aff-btn-secondary-ink);font:var(--aff-btn-font);text-decoration:none;white-space:nowrap;transition:transform var(--aff-btn-motion),box-shadow var(--aff-btn-motion),border-color var(--aff-btn-motion),color var(--aff-btn-motion),background var(--aff-btn-motion)}
.aff a.aff-btn-review svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.aff a.aff-cta{transition:transform var(--aff-btn-motion),box-shadow var(--aff-btn-motion),background var(--aff-btn-motion),color var(--aff-btn-motion)}
.aff a.aff-cta:hover,.aff a.aff-btn-review:hover{border-color:var(--aff-btn-hover-bg);background:var(--aff-btn-hover-bg);color:var(--aff-btn-hover-ink);transform:translateY(-1px);box-shadow:var(--aff-btn-hover-shadow)}
.aff .aff-verdict__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.aff .aff-duel__ctas>div{display:grid;gap:8px}
@media (max-width:760px){
  .aff .aff-row{padding:20px 18px}
  .aff .aff-row__tile .aff-visual{width:72px;height:72px}
  .aff .aff-price{text-align:left}
  .aff .aff-verdict__actions{justify-content:stretch}.aff .aff-verdict__actions>*{flex:1 1 100%}
}
.aff .aff-row__offer .aff-offer{padding:9px 11px}.aff .aff-row__offer .aff-offer b{font-size:13.5px;font-weight:700}

/* SCROLLBARS_SHARED_V1 (demande Julien 07/10) — every horizontal scroll area of the content (tables, matrices,
   comparisons, galleries, rails) shows the same thin rounded bar in the site colours. Same block in
   editorial-journey.css, affiliate-blocks.css and specialized-shared.css (one per page family); rails that hide
   their bar on purpose keep it hidden (zero-specificity fallback). */
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre),
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-accent,#14a3a8) 55%,#fff) color-mix(in srgb,var(--color-accent,#14a3a8) 9%,transparent)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar{height:8px;width:8px}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-track,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar-track{border-radius:999px;background:color-mix(in srgb,var(--color-accent,#14a3a8) 9%,transparent)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-thumb,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--color-accent,#14a3a8) 55%,#fff)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-thumb:hover{background:var(--color-accent,#14a3a8)}

/* AFF_GALLERY_V2: the app screens side by side in phone frames (no scroll strip on desktop), captions under each. */
.aff .aff-gallery__shots--phones{display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--aff-shots,3),minmax(0,230px));justify-content:center;gap:28px;padding:28px 20px;overflow:visible;scroll-snap-type:none}
.aff .aff-gallery__shots--phones .aff-gallery__shot{gap:12px;justify-items:center;text-align:center}
.aff .aff-gallery__device{display:block;width:100%;padding:8px;border-radius:34px;background:#1d2024;box-shadow:0 18px 36px rgba(22,21,35,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.aff .aff-gallery__shots--phones .aff-gallery__shot img{border:0;border-radius:27px;aspect-ratio:9/15.5;object-fit:cover;object-position:top}
.aff .aff-gallery__shots--phones figcaption{max-width:220px;font-size:13.5px;font-weight:650;color:var(--aff-heading)}
@media (max-width:760px){.aff .aff-gallery__shots--phones{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 16px}.aff .aff-gallery__shots--phones .aff-gallery__shot{scroll-snap-align:center}}

/* AFF_TABLE_V1 — the one comparison table (services and physical products): compact grid, criterion column kept
   in view, best value marked, product column heads; beyond --aff-per products, a column carousel with arrows. */
.aff.aff-table{display:grid;gap:12px}
.aff .aff-table__nav{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.aff .aff-table__position{font-size:13px;font-weight:650;color:var(--aff-muted);font-variant-numeric:tabular-nums}
.aff .aff-table__arrow{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--aff-card-line);border-radius:50%;background:var(--aff-paper);color:var(--aff-heading);cursor:pointer}
.aff .aff-table__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-table__arrow:disabled{opacity:.35;cursor:default}
.aff .aff-table__arrow:not(:disabled):hover{border-color:var(--aff-btn-hover-bg);background:var(--aff-btn-hover-bg);color:var(--aff-btn-hover-ink)}
.aff .aff-table__scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--aff-table-label,170px);background:var(--aff-panel-bg,var(--aff-card));border:1px solid var(--aff-panel-line,var(--aff-card-line));border-radius:var(--aff-panel-radius,var(--aff-radius))}
.aff .aff-table--carousel .aff-table__scroll{scrollbar-width:none}.aff .aff-table--carousel .aff-table__scroll::-webkit-scrollbar{display:none}
.aff .aff-table__grid{--aff-table-label:170px;--aff-table-col:calc((100% - var(--aff-table-label)) / var(--aff-per,4));display:grid;min-width:100%;width:calc(var(--aff-table-label) + var(--aff-cols,3) * max(var(--aff-table-min,150px),var(--aff-table-col)));font-size:14.5px;line-height:1.4}
.aff .aff-table__row{display:grid;grid-template-columns:var(--aff-table-label) repeat(var(--aff-cols,3),minmax(var(--aff-table-min,150px),1fr));border-top:1px solid var(--aff-line)}
.aff .aff-table__row--head{border-top:0}
.aff .aff-table__row>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 14px;text-align:center;scroll-snap-align:start}
.aff .aff-table__row>.aff-table__label{position:sticky;left:0;z-index:2;align-items:flex-start;text-align:left;font-weight:650;color:var(--aff-heading);background:var(--aff-card);box-shadow:1px 0 0 var(--aff-line)}
.aff .aff-table__row--head>span{background:var(--aff-note);padding-block:16px}
.aff .aff-table__product{position:relative}
.aff .aff-table__product .aff-visual{width:56px;height:56px}
.aff .aff-table__product strong{font-size:15px;line-height:1.25;color:var(--aff-heading)}
.aff .aff-table__brand{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-ui-accent-ink)}
.aff .aff-table__badge{padding:4px 9px;border-radius:var(--aff-chip-radius);background:var(--aff-badge-bg);color:var(--aff-badge-ink);font:var(--aff-badge-font);font-size:10.5px;letter-spacing:var(--aff-badge-tracking);text-transform:uppercase}
.aff .aff-table__cell.is-best{background:var(--aff-good-soft);color:var(--aff-good);font-weight:800}
.aff .aff-table__bool{display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.aff .aff-table__bool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-table__bool.is-yes{background:color-mix(in srgb,var(--aff-good) 16%,var(--aff-paper));color:var(--aff-good);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aff-good) 28%,transparent)}
.aff .aff-table__bool.is-no{background:var(--aff-bad-soft);color:color-mix(in srgb,var(--aff-bad) 80%,var(--aff-muted));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aff-bad) 18%,transparent)}
.aff .aff-table__row--cta>span{justify-content:flex-start}
.aff .aff-table__row--cta .aff-actions{width:100%}
.aff .aff-table__row--cta :is(.aff-cta,.aff-btn-review){min-height:var(--aff-btn-height-sm);padding:var(--aff-btn-pad-sm);font:var(--aff-btn-font-sm)}
.aff .aff-table__row--cta>.aff-table__cell{align-items:flex-start}
.aff .aff-table__row--cta .aff-actions{grid-template-rows:repeat(2,minmax(var(--aff-btn-height-sm,40px),auto))}
.aff .aff-table__row--cta :is(.aff-cta,.aff-btn-review){width:100%;justify-content:center}
/* No offer for a column: its « Avis complet » stays on the line of the others. */
.aff .aff-table__row--cta .aff-btn-review:only-child{grid-row:2}
@media (max-width:760px){.aff .aff-table__grid{--aff-table-label:96px;--aff-table-min:100px;--aff-per:2;font-size:13px}.aff .aff-table__row>span{padding:10px 8px}.aff .aff-table__product .aff-visual{width:44px;height:44px}}
/* AFF_TABLE_MOBILE_FIT_V1 (Julien 2026-10-08): on a phone a column never grows past its share — the buttons wrap instead
   of stretching it (they were cut in the comparator's modal), long labels break, cells may shrink. */
@media (max-width:760px){
  .aff .aff-table__row>span{min-width:0}
  .aff .aff-table__row>.aff-table__label{overflow-wrap:anywhere;hyphens:auto}
  .aff .aff-table__row--cta :is(.aff-cta,.aff-btn-review){white-space:normal;text-align:center;line-height:1.2;padding-inline:8px;font-size:13px;min-width:0}
  .aff .aff-table__row--cta .aff-actions{min-width:0}
}
.ej-reader :is(.ej-section,.ej-opening)>.aff.aff-table{--ej-col:var(--ej-wide)}
/* AFF_TABLE_STANDOUT_V1: a feature only a few models have reads as a strength of theirs. */
.aff .aff-table__cell.is-standout{background:var(--aff-good-soft)}

/* AFF_FAMILY_LINKS_V1 (Julien 2026-10-07) — bottom block of the affiliation pages: full-width band (the background is
   bled to the viewport edges without widening the page), one card family: picture, overlay, type badge, title; a review
   card shows its product over the comparison's picture. Theme colours, fonts and radius. */
.aff.aff-family{position:relative;margin:clamp(48px,7vw,88px) 0 0;padding:clamp(44px,6vw,72px) 0 clamp(52px,7vw,84px);background:var(--aff-family-bg,color-mix(in srgb,var(--color-accent,#14a3a8) 7%,var(--aff-paper)))}
.aff .aff-family__inner{display:grid;gap:clamp(36px,5vw,56px)}
/* Moved before the site footer: full width band, content at the container width, glued to the footer. */
.aff.aff-family.is-bottom{margin:0;width:100%}
.aff.aff-family.is-bottom .aff-family__inner{width:min(var(--container,1220px),100% - 32px);margin-inline:auto}
.aff .aff-family__group{display:grid;gap:22px}
.aff .aff-family__head [data-component="section-heading"]{margin:0}
.aff .aff-family__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.aff .aff-family__item{margin:0;padding:0;list-style:none}
.aff .aff-family__item::before,.aff .aff-family__item::marker{content:none}
.aff .aff-family__card{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:220px;height:100%;box-sizing:border-box;overflow:hidden;padding:18px;border-radius:var(--aff-radius,16px);background:var(--color-dark-bg,#1b2440);color:var(--color-dark-text,#fff);text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--color-text,#1c2733) 10%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.aff .aff-family__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--color-dark-bg,#1b2440) 10%,transparent) 0%,color-mix(in srgb,var(--color-dark-bg,#1b2440) 55%,transparent) 48%,color-mix(in srgb,var(--color-dark-bg,#1b2440) 92%,transparent) 100%)}
.aff .aff-family__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.aff .aff-family__product{position:absolute;z-index:0;top:14px;left:50%;width:auto;height:58%;max-width:70%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));transition:transform .3s ease}
.aff .aff-family__card.has-product::after{background:linear-gradient(180deg,color-mix(in srgb,var(--color-dark-bg,#1b2440) 38%,transparent) 0%,color-mix(in srgb,var(--color-dark-bg,#1b2440) 62%,transparent) 50%,color-mix(in srgb,var(--color-dark-bg,#1b2440) 94%,transparent) 100%)}
.aff .aff-family__body{position:relative;z-index:1;display:grid;gap:9px;justify-items:start}
.aff .aff-family__badge{padding:4px 10px;border-radius:var(--radius-full,999px);background:var(--color-accent-2,#f2b84b);color:var(--color-on-accent-2,var(--color-dark-bg,#1b2440));font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.aff .aff-family__title{font-family:var(--font-heading,inherit);font-size:clamp(17px,1.5vw,19px);font-weight:800;line-height:1.25;text-wrap:balance}
.aff .aff-family__card:hover{transform:translateY(-3px);box-shadow:0 12px 26px color-mix(in srgb,var(--color-text,#1c2733) 18%,transparent)}
.aff .aff-family__card:hover .aff-family__bg{transform:scale(1.05)}
.aff .aff-family__card:hover .aff-family__product{transform:translateX(-50%) translateY(-4px)}
.aff .aff-family__card:focus-visible{outline:3px solid var(--color-accent,#14a3a8);outline-offset:3px}
/* Mobile: one horizontal rail per group (a card and a half in view), snapped, thin shared scrollbar. */
@media (max-width:640px){.aff .aff-family__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}.aff .aff-family__item{scroll-snap-align:start}.aff .aff-family__card{min-height:190px;padding:14px}.aff .aff-family__title{font-size:16px}}
/* The rail scrolls inside the page width: nested grid items may shrink below their content. */
.aff .aff-family__inner>*,.aff .aff-family__group>*,.aff .aff-family__nav{min-width:0}
.aff .aff-family__inner{grid-template-columns:minmax(0,1fr)}
.aff .aff-family__group{grid-template-columns:minmax(0,1fr)}
/* AFF_STICKY_PRICE_V1: the observed price of a physical product, plain and readable (no promotion box). */
.aff .aff-sticky__price{display:grid;gap:1px;margin:0;line-height:1.1;text-align:right}
.aff .aff-sticky__price span{color:var(--aff-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.aff .aff-sticky__price b{color:var(--aff-heading,var(--color-dark-bg));font-family:var(--font-heading,inherit);font-size:22px;font-weight:800;white-space:nowrap}
@media (max-width:640px){.aff .aff-sticky__price span{display:none}.aff .aff-sticky__price b{font-size:18px}}
/* AFF_STICKY_MOBILE_ROW_V1 (Julien 2026-10-09): on a phone, a bar with a price keeps one row — product, price, then the button at its right. On a small phone the
   thumbnail gives way so the product name stays readable. */
@media (max-width:640px){.aff .aff-sticky__inner:has(>.aff-sticky__price){grid-template-columns:minmax(0,1fr) auto auto;gap:10px}}
@media (max-width:420px){.aff .aff-sticky__inner:has(>.aff-sticky__price){gap:8px}.aff .aff-sticky__inner:has(>.aff-sticky__price) .aff-sticky__id>.aff-visual{display:none}.aff .aff-sticky__inner:has(>.aff-sticky__price) a.aff-cta{padding-inline:12px}}

/* AFF_FAMILY_SINGLE_V1: 3 cards per row on desktop (6 at most). */
@media (min-width:900px){.aff .aff-family__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.aff .aff-family__card{min-height:240px}}

/* AFF_TRANSPARENCY_V1 — the affiliate note: present but discreet (small, light, italic). Same rule in specialized-shared.css. */
.aff-transparency{margin:14px 0 0;color:color-mix(in srgb,var(--color-text-muted,#64748b) 80%,transparent);font-size:12px;font-style:italic;line-height:1.55}
/* AFF_DISCLOSURE_SPLIT_V1: the short line under the hero links to the full note, which closes the page content. */
.aff-disclosure{margin-top:-24px;padding:0 0 40px;scroll-margin-top:96px}
#mention-affiliation{scroll-margin-top:96px}
/* AFF_DISCLOSURE_ENDNOTE_V1 (Julien 2026-10-22): the full note is an « Avertissement »-style endnote. After a FAQ or at the
   end of the content (outside the guided reader's block rhythm) it keeps the endnote's spacing and, outside an editorial
   page, the endnote colours fall back on the site theme. */
.ej-endnote.ej-endnote--affiliate{margin-top:40px}
.ej-endnote.ej-endnote--affiliate>[data-component="section-heading"]{margin-bottom:var(--ej-space-head,18px)!important}
.aff-disclosure .ej-endnote.ej-endnote--affiliate{margin-top:0}
.aff-disclosure .ej-endnote.ej-endnote--affiliate.ej-endnote--disclaimer .ej-endnote__text{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;margin:0;padding:16px 18px;border-radius:var(--ej-radius-sm,12px);background:var(--ej-tint,color-mix(in srgb,var(--color-accent,#166b65) 8%,var(--color-bg,#fff)));color:var(--ej-ink,var(--color-text,#1d2a2c));font-size:15px;line-height:1.65}
.aff-disclosure .ej-endnote.ej-endnote--affiliate.ej-endnote--disclaimer .ej-endnote__text svg{width:22px;height:22px;margin-top:1px;color:var(--ej-accent,var(--color-accent,#166b65));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* AFF_DISCLOSURE_SPLIT_V2 (Julien 2026-10-21): the full note reads as a plain closing paragraph of the article column; the
   short line sits centred right under the hero, close to it. */
.aff-disclosure__copy{box-sizing:border-box;width:min(var(--ej-measure,760px),100% - 32px);margin-inline:auto}
.aff-disclosure__copy>p{margin:0;color:var(--color-text-muted,#64748b);font-size:14px;line-height:1.65}
.aff-disclosure-line{box-sizing:border-box;width:min(var(--container,1220px),100% - 32px);margin:10px auto 0;text-align:center}
.aff-disclosure-line .aff-transparency.aff-transparency--short{margin:0 auto;max-width:none;text-align:center;font-size:12.5px}
.aff-transparency--short a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* SOFTWARE_OFFER_V1 (2026-10-19): « dès » price of a software product, its free/trial access, and the plans table. */
.aff .aff-softprice{display:grid;gap:8px;justify-items:end}
.aff .aff-softprice .aff-price{display:grid;gap:2px}
.aff .aff-softprice .aff-price b{font-size:20px}
.aff .aff-price small{font-size:13px;line-height:1.35;color:var(--aff-muted)}
.aff .aff-softprice__access{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:0;padding:0;list-style:none}
.aff .aff-softprice__access li{padding:4px 9px;border-radius:var(--aff-chip-radius);background:var(--aff-badge-bg);color:var(--aff-badge-ink);font:var(--aff-badge-font)}
.aff .aff-verdict__decide .aff-softprice{justify-items:start}.aff .aff-verdict__decide .aff-softprice__access{justify-content:flex-start}
.aff.aff-plans>.aff-softprice{justify-items:start;margin-bottom:14px}.aff.aff-plans>.aff-softprice .aff-softprice__access{justify-content:flex-start}
.aff .aff-plans__scroll{overflow-x:auto;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-inner-radius);background:var(--aff-ui-paper)}
.aff .aff-plans__table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.aff .aff-plans__table :is(th,td){padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--aff-line)}
.aff .aff-plans__table tbody tr:last-child :is(th,td){border-bottom:0}
.aff .aff-plans__table thead th{font:700 12px/1.3 var(--aff-ui-font);letter-spacing:.04em;text-transform:uppercase;color:var(--aff-muted);background:var(--aff-ui-card-bg)}
.aff .aff-plans__table tbody th strong{display:block;font:700 16px/1.25 var(--aff-ui-font-heading);color:var(--aff-heading)}
.aff .aff-plans__table tbody th small{display:block;margin-top:4px;font-size:12.5px;color:var(--aff-ui-accent-ink)}
.aff .aff-plans__table td{font-variant-numeric:tabular-nums;color:var(--aff-ink,var(--aff-ui-ink))}
.aff .aff-plans__table ul{margin:0;padding-left:1.1em;display:grid;gap:3px}
@media (max-width:760px){
  .aff .aff-softprice{justify-items:start}.aff .aff-softprice__access{justify-content:flex-start}
  .aff .aff-plans__scroll{overflow:visible;border:0;background:none}
  .aff .aff-plans__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .aff .aff-plans__table,.aff .aff-plans__table tbody,.aff .aff-plans__table tr,.aff .aff-plans__table :is(th,td){display:block;width:auto}
  .aff .aff-plans__table tr{margin-bottom:12px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-inner-radius);background:var(--aff-ui-paper);overflow:hidden}
  .aff .aff-plans__table tbody th{background:var(--aff-ui-card-bg)}
  .aff .aff-plans__table td{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:10px}
  .aff .aff-plans__table td::before{content:attr(data-label);font:700 12px/1.4 var(--aff-ui-font);letter-spacing:.03em;text-transform:uppercase;color:var(--aff-muted)}
}
/* A long unit (« 12 €/utilisateur/mois HT ») breaks inside its comparison cell instead of overflowing it. */
.aff .aff-table__row>span{overflow-wrap:anywhere}

/* AFF_VERDICT_PICK_V1 (Julien 2026-10-21, proposal): the recommendation closing a profile section — compact, set apart
   by an accent frame and a « Notre choix » label, light background on any section. */
.aff.aff-verdict--pick .aff-verdict__panel{gap:14px;padding:20px 22px;border:2px solid color-mix(in srgb,var(--aff-ui-accent,var(--color-accent,#0f8f95)) 55%,transparent);background:color-mix(in srgb,#fff 94%,var(--aff-ui-accent,var(--color-accent,#0f8f95)));box-shadow:0 14px 34px rgba(16,24,32,.07)}
.aff .aff-verdict__pick-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--aff-ui-accent-ink,var(--color-accent,#0f8f95))}
.aff .aff-verdict__pick-label span{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--aff-muted)}
.aff.aff-verdict--pick .aff-verdict__text{margin:0}
.aff.aff-verdict--pick .aff-fit{grid-template-columns:minmax(0,1fr)}

/* AFF_PICK_CARD_V1 (2026-10-22): one pick card renderer; a narrow card (grid of usage picks) stacks its decide row
   by itself (container query), whatever its column. */
.aff.aff-verdict--pick{container-type:inline-size}
.aff .aff-verdict__plan{margin:0;font-size:14px;color:var(--aff-muted)}
.aff .aff-verdict__plan strong{color:var(--aff-heading)}
.aff .aff-verdict__offer{display:grid;gap:6px;justify-items:start}
.aff .aff-fit dd ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
@container (max-width:520px){
  .aff.aff-verdict--pick .aff-verdict__decide{grid-template-columns:1fr;justify-items:stretch}
  .aff.aff-verdict--pick .aff-verdict__actions{justify-content:stretch}
  .aff.aff-verdict--pick .aff-verdict__actions>*{flex:1 1 100%}
  .aff.aff-verdict--pick .aff-verdict__decide :is(.aff-verdict__offer,.aff-softprice,.aff-price){justify-items:start;text-align:left}
  .aff.aff-verdict--pick .aff-verdict__head{gap:12px}
  .aff.aff-verdict--pick .aff-verdict__head .aff-visual--lg{width:56px;height:56px}
  .aff.aff-verdict--pick .aff-verdict__name strong{font-size:19px;overflow-wrap:anywhere}
  .aff.aff-verdict--pick .aff-ring{width:68px;height:68px}.aff.aff-verdict--pick .aff-ring b{font-size:21px}
}

/* AFF_PICK_CARD_NARROW_V1 (2026-10-22): below 320px (phone carousel card) logo and ring shrink so the product name
   keeps one word per line instead of breaking inside a word. */
@container (max-width:320px){
  .aff.aff-verdict--pick .aff-verdict__panel{padding:18px 16px}
  .aff.aff-verdict--pick .aff-verdict__head .aff-visual--lg{width:44px;height:44px}
  .aff.aff-verdict--pick .aff-ring{width:58px;height:58px}.aff.aff-verdict--pick .aff-ring b{font-size:18px}
  .aff.aff-verdict--pick .aff-verdict__name strong{font-size:17px;overflow-wrap:normal}
}

/* AFF_USAGE_PICKS_V1 (2026-10-22): the best products for one usage — shared pick cards in one row; only the row
   belongs to this block. AFF_USAGE_PICKS_CAROUSEL_V1 (Julien 2026-10-22): space before and after the block; only
   whole cards that fill the width — 2 cards side by side (50/50) on a wide block, 1 card on a phone, never a cut
   card; more cards scroll with snap, through arrows and dots (shared rail controller, shown only on overflow) or
   swipe; no visible scrollbar (touch and trackpad scrolling stay, also without JS). */
.aff.aff-usage-picks{container:aff-usage-picks / inline-size;display:grid;gap:14px;margin-block:clamp(32px,4vw,48px)}
.ej-reader .ej-section>.aff.aff-usage-picks{margin-block:clamp(8px,1.5vw,16px)!important}
/* The row is a scroll container: its padding (offset by negative margins) leaves room for the pick card's light
   shadow, which would otherwise be clipped. */
.aff .aff-usage-picks__grid{display:flex;gap:18px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-6px -16px -10px;padding:6px 16px 10px;scroll-padding-inline:16px}
.aff .aff-usage-picks__grid:focus-visible{outline:2px solid var(--color-accent,#0fbd74);outline-offset:2px;border-radius:var(--aff-ui-card-radius,var(--aff-radius))}
.aff .aff-usage-picks__grid>[role=listitem]{flex:1 1 0;min-width:0;display:flex;scroll-snap-align:start}
.aff .aff-usage-picks__grid::-webkit-scrollbar{display:none}
.aff.aff-usage-picks:not([data-count="1"]):not([data-count="2"]) .aff-usage-picks__grid>[role=listitem]{flex:0 0 calc((100% - 18px) / 2)}
@container aff-usage-picks (max-width:620px){
  /* Same specificity as the 3+ rule above, so the phone width wins for every count. */
  .aff.aff-usage-picks:not([data-count="1"]):not([data-count="0"]) .aff-usage-picks__grid>[role=listitem]{flex:0 0 100%}
}
.aff .aff-usage-picks__grid>[role=listitem]>.aff-verdict__panel{flex:1;display:flex;flex-direction:column}
/* AFF_USAGE_PICKS_SHADOW_V1 (Julien 2026-10-22: « trop de shadow »): in the row the pick card keeps its border and takes
   the light shadow of the other affiliate cards (family cards); the row's padding still holds it whole. */
.aff.aff-usage-picks .aff-usage-picks__grid>.aff-verdict--pick>.aff-verdict__panel{box-shadow:0 1px 2px color-mix(in srgb,var(--color-text,#1c2733) 10%,transparent)}
.aff .aff-usage-picks__grid>[role=listitem] .aff-verdict__decide{margin-top:auto}
.aff .aff-usage-picks__controls{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--aff-ui-muted,#5d6670)}
.aff .aff-usage-picks__controls[hidden]{display:none}

/* AFF_PLANS_ASIDE_V1 (2026-10-22): named variant « aside » of aff-software-plans — compact price box floated beside
   the review text on wide screens, a block at the top on a phone. Stays a 3-column table at every width. */
/* In the guided reader the section is a flex column (no float): a section holding an aside becomes two columns — the
   reading column (760px) and the aside beside it from the aside's place down; wide blocks still take the full width. */
@media (min-width:1100px){
  .ej-reader .ej-section:has(>.aff-plans--aside){display:grid;grid-template-columns:minmax(0,var(--ej-measure)) 300px;column-gap:40px;row-gap:0;justify-content:center;align-items:start}
  /* The reader zeroes block margins (margin-block:0 !important) and spaces blocks with the flex gap; the grid keeps the
     same rhythm token as a bottom margin (a row gap would add up across the aside's spanned rows). */
  .ej-reader .ej-section:has(>.aff-plans--aside)>*{grid-column:1;width:auto;max-width:none;margin-inline:0;margin-bottom:var(--ej-space-block)!important}
  .ej-reader .ej-section:has(>.aff-plans--aside)>:last-child{margin-bottom:0!important}
  .ej-reader .ej-section:has(>.aff-plans--aside)>:is(.ej-wide,.cms-content-table,.cms-tool-shell){grid-column:1 / -1}
  .ej-reader .ej-section:has(>.aff-plans--aside)>.aff-plans--aside{grid-column:2;grid-row:span 30;float:none;width:auto;margin:0}
}
.aff.aff-plans--aside{float:right;clear:right;width:min(340px,44%);margin:4px 0 20px 28px;padding:16px 16px 12px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper)}
.aff .aff-plans__aside-title{margin:0 0 12px;font:800 12px/1.3 var(--aff-ui-font);letter-spacing:.08em;text-transform:uppercase;color:var(--aff-ui-accent-ink)}
.aff .aff-plans__mini{display:grid;font-size:14px;line-height:1.35}
.aff .aff-plans__mini-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr);gap:8px;padding:9px 0;border-bottom:1px solid var(--aff-line)}
.aff .aff-plans__mini-row:last-child{border-bottom:0}
.aff .aff-plans__mini-head{padding-top:0;font:700 10px/1.3 var(--aff-ui-font);letter-spacing:.02em;text-transform:uppercase;color:var(--aff-muted)}
.aff .aff-plans__mini-row [role=rowheader] strong{display:block;font:700 14.5px/1.25 var(--aff-ui-font-heading);color:var(--aff-heading)}
.aff .aff-plans__mini-row [role=cell]{font-variant-numeric:tabular-nums;color:var(--aff-ink,var(--aff-ui-ink))}
.aff .aff-plans__mini-row [role=cell].is-span{grid-column:span 2}
.aff .aff-plans__mini-row small{display:block;margin-top:2px;font-size:11.5px;color:var(--aff-muted)}
.aff .aff-plans__aside-unit{margin:8px 0 0;font-size:12.5px;color:var(--aff-muted)}
.aff.aff-plans--aside .aff-note{margin-top:4px;font-size:12px}
@media (max-width:760px){
  .aff.aff-plans--aside{float:none;width:auto;margin:0 0 24px}
}

/* AFF_INTEGRATIONS_V1 (2026-10-22): integration badges — brand icon (server-side SVG) and name, wrapping. */
.aff .aff-integrations__panel{padding:16px 18px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper)}
.aff .aff-integrations__label{margin:0 0 10px;font:800 12px/1.3 var(--aff-ui-font);letter-spacing:.08em;text-transform:uppercase;color:var(--aff-muted)}
.aff .aff-integrations__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.aff .aff-integration{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 12px 7px 9px;border:1px solid var(--aff-ui-card-line);border-radius:999px;background:var(--aff-ui-card-bg);font:600 14px/1.2 var(--aff-ui-font);color:var(--aff-heading)}
.aff .aff-integration svg{width:20px;height:20px;flex:0 0 20px;color:var(--aff-ui-accent-ink)}

/* AFF_FIT_GAUGES_V1 (2026-10-22): « adapté à » — one row per profile: label, 5-segment gauge, level in words, note. */
.aff .aff-gauges__list{display:grid;gap:0;margin:0;padding:4px 18px;list-style:none;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper)}
.aff .aff-gauge{display:grid;grid-template-columns:minmax(0,1fr) auto 108px;align-items:center;gap:4px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--aff-line)}
.aff .aff-gauge:last-child{border-bottom:0}
.aff .aff-gauge__label{font:700 15px/1.35 var(--aff-ui-font);color:var(--aff-heading)}
.aff .aff-gauge__meter{display:inline-flex;gap:4px}
.aff .aff-gauge__meter i{display:block;width:22px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--aff-muted) 22%,transparent)}
.aff .aff-gauge__meter i.is-on{background:var(--aff-ui-accent,var(--color-accent,#0f8f95))}
.aff .aff-gauge[data-level="0"] .aff-gauge__meter i.is-on{background:var(--aff-bad)}
.aff .aff-gauge__level{font-size:13.5px;font-weight:700;color:var(--aff-ink,var(--aff-ui-ink))}
.aff .aff-gauge__note{grid-column:1 / -1;font-size:14px;line-height:1.45;color:var(--aff-muted)}
@media (max-width:560px){
  .aff .aff-gauge{grid-template-columns:auto minmax(0,1fr)}
  .aff .aff-gauge__label{grid-column:1 / -1}
}

/* AFF_USAGE_FILTER_V1 (2026-10-22): « Affinez votre besoin » — pills to the usage pages, wrapping, current marked. */
.aff.aff-usage-filter{display:grid;gap:10px}
.aff .aff-usage-filter__title{margin:0;font:800 12px/1.3 var(--aff-ui-font);letter-spacing:.08em;text-transform:uppercase;color:var(--aff-muted)}
.aff .aff-usage-filter__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.aff .aff-usage-filter__list li{margin:0}
.aff .aff-usage-filter__pill{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border:1px solid var(--aff-ui-card-line);border-radius:999px;background:var(--aff-ui-paper);font:600 14.5px/1.2 var(--aff-ui-font);color:var(--aff-heading);text-decoration:none;transition:border-color .15s,background .15s}
.aff .aff-usage-filter__pill:hover{border-color:var(--aff-ui-accent,var(--color-accent,#0f8f95))}
.aff .aff-usage-filter__pill:focus-visible{outline:var(--aff-focus-ring,3px solid var(--color-accent,#0f8f95));outline-offset:2px}
.aff .aff-usage-filter__pill.is-current{border-color:var(--aff-ui-accent,var(--color-accent,#0f8f95));background:var(--aff-ui-accent,var(--color-accent,#0f8f95));color:var(--aff-on-accent,#fff)}

/* AFF_SCORE_SCOPE_V1 (2026-10-22): what a borrowed score rates, under the ring (« Note hébergement web »). */
.aff .aff-ring-scope{display:grid;justify-items:center;gap:4px;flex:none;max-width:110px}
.aff .aff-ring-scope>small{font-size:11px;line-height:1.25;text-align:center;color:var(--aff-muted)}

/* AFF_REVIEW_SIGNALS_V1 (2026-10-22): what users say — one card per product, partial-fill stars (rating also in text),
   positive / negative rows of the shared aff-fit; the two rows sit side by side only when the card is wide enough. */
.aff .aff-signals__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.aff .aff-signal{container-type:inline-size;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper)}
.aff .aff-signal__head{display:flex;align-items:center;gap:12px;min-width:0}
.aff .aff-signal__head .aff-visual{width:48px;height:48px;flex:none}
.aff .aff-signal__name{display:grid;gap:4px;min-width:0}
.aff .aff-signal__name strong{font:700 18px/1.2 var(--aff-ui-font-heading);color:var(--aff-heading);overflow-wrap:anywhere}
.aff .aff-stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.aff .aff-stars svg{width:20px;height:20px;margin-right:2px}
.aff .aff-stars__base svg{fill:color-mix(in srgb,var(--aff-muted) 25%,transparent)}
.aff .aff-stars__fill{position:absolute;inset:0 auto 0 0;overflow:hidden}
.aff .aff-stars__fill svg{fill:#f2a516}
.aff .aff-signal__meta{margin:0;font-size:13.5px;color:var(--aff-muted)}
.aff .aff-signal__meta b{font-size:15px;color:var(--aff-heading)}
.aff .aff-signal__meta a{color:var(--aff-ui-accent-ink)}
.aff .aff-signal__fit{grid-template-columns:minmax(0,1fr);margin:0}
@container (min-width:520px){.aff .aff-signal__fit{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* AFF_POINTS_V1 (Julien 2026-10-22): short points with a tick (advantage) or a cross (limit); the meaning is also in a
   hidden text for screen readers, never in the colour alone. */
.aff .aff-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aff .aff-fit dd ul.aff-points,.aff ul.aff-points{display:grid;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.aff .aff-points li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;margin:0;padding:0}
.aff .aff-points li::before{content:none}
.aff .aff-points svg{width:18px;height:18px;margin-top:2px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-points.is-yes svg{stroke:var(--aff-good)}
.aff .aff-points.is-no svg{stroke:var(--aff-bad)}

/* AFF_CHOOSER_V1 (Julien 2026-10-22): « which product for my project? » — question pills (radio buttons), then the
   matching result: the shared pick card « Notre recommandation » and the named light variant « L'alternative
   intéressante » (aff-verdict--pick-light: no shadow, thin border, paper background). Without JS every combination is
   listed under its own line. */
.aff.aff-chooser{container:aff-chooser / inline-size;display:grid;gap:18px;margin-block:clamp(32px,4vw,48px)}
.ej-reader .ej-section>.aff.aff-chooser{margin-block:clamp(8px,1.5vw,16px)!important}
.aff .aff-chooser__form{display:grid;gap:14px;margin:0;padding:18px 20px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper)}
.aff .aff-chooser__form[hidden]{display:none}
.aff .aff-chooser__question{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.aff .aff-chooser__question legend{padding:0;margin:0 0 8px;color:var(--aff-heading);font-weight:700;font-size:15px}
.aff .aff-chooser__pills{display:flex;flex-wrap:wrap;gap:8px}
.aff .aff-chooser__pill{position:relative;display:inline-flex;cursor:pointer}
.aff .aff-chooser__pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.aff .aff-chooser__pill span{display:inline-flex;align-items:center;min-height:38px;padding:7px 15px;border:1px solid var(--aff-ui-card-line);border-radius:999px;background:var(--aff-ui-card-bg,#fff);color:var(--aff-ink);font-size:14.5px;font-weight:600;line-height:1.25;transition:background .15s ease,border-color .15s ease,color .15s ease}
.aff .aff-chooser__pill:hover span{border-color:color-mix(in srgb,var(--aff-accent) 45%,transparent)}
.aff .aff-chooser__pill input:checked+span{border-color:var(--aff-accent);background:var(--aff-accent);color:var(--aff-on-accent)}
.aff .aff-chooser__pill input:focus-visible+span{outline:2px solid var(--aff-accent);outline-offset:2px}
.aff .aff-chooser__results{display:grid;gap:22px}
.aff .aff-chooser__result{display:grid;gap:10px;min-width:0}
.aff .aff-chooser__result[hidden]{display:none}
.aff .aff-chooser__combo{margin:0;color:var(--aff-heading);font-size:15px;font-weight:700;line-height:1.4}
.aff.aff-chooser.is-interactive .aff-chooser__combo{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aff .aff-chooser__cards{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:stretch}
.aff .aff-chooser__cards.is-single{grid-template-columns:minmax(0,1fr)}
.aff .aff-chooser__cards>.aff-verdict--pick{display:flex;min-width:0}
.aff .aff-chooser__cards>.aff-verdict--pick>.aff-verdict__panel{flex:1;display:flex;flex-direction:column}
.aff .aff-chooser__cards .aff-verdict__decide{margin-top:auto}
@container aff-chooser (max-width:640px){.aff .aff-chooser__cards{grid-template-columns:minmax(0,1fr)}}
.aff.aff-verdict--pick-light .aff-verdict__panel{border-width:1px;border-color:var(--aff-ui-card-line);background:var(--aff-ui-paper);box-shadow:none}

/* AFF_PLANS_TABLE_SHARED_V1 (2026-10-22): the plans table is the shared table-block at the wide component width; like
   the copy of a wide table-block, the block's own lines (price from, reading date) stay in the reading column. */
.aff.aff-plans.ej-wide>:not(.cms-content-table){box-sizing:border-box;width:min(100%,var(--ej-measure,760px));margin-inline:auto}
.aff.aff-plans.ej-wide{display:grid;gap:14px}

/* AFF_PLAN_CARDS_V1 (Julien 2026-10-22): one card per plan, in the wide column. The row is the aff-usage-picks row
   (snap, no visible scrollbar, shared rail controls only on overflow): up to 3 cards share the width, 2 per view under
   900px, 1 under 620px. Card = the affiliate card tokens (border, radius, light shadow); a badged plan gets the accent
   border. Price (catalogue rules) under the name, « pour qui », specs with their icon, button at the bottom. */
.aff.aff-plan-cards{container:aff-plan-cards / inline-size;display:grid;gap:14px;margin-block:clamp(32px,4vw,48px)}
.ej-reader .ej-section>.aff.aff-plan-cards{margin-block:clamp(8px,1.5vw,16px)!important}
/* AFF_PLAN_CARDS_V2 (Julien 2026-10-22: rows aligned across cards): the row is one grid whose rows (head, price, for,
   each spec, points, button — count set inline by the renderer) are shared by every card through subgrid, so « Sites
   inclus » sits at the same height in each card. Cards per view: --aff-per (3, or the count when smaller; 2 under
   900px, 1 under 620px); more cards scroll with snap. */
.aff .aff-plan-cards__row{--aff-per:3;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--aff-plan-rows),auto);grid-auto-columns:calc((100% - (var(--aff-per) - 1) * 18px) / var(--aff-per));column-gap:18px;row-gap:0;min-width:0;margin:-6px -16px -10px;padding:6px 16px 10px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:16px}
.aff .aff-plan-cards__row::-webkit-scrollbar{display:none}
.aff .aff-plan-cards__row:focus-visible{outline:2px solid var(--color-accent,#0fbd74);outline-offset:2px;border-radius:var(--aff-ui-card-radius,var(--aff-radius))}
.aff.aff-plan-cards[data-count="2"] .aff-plan-cards__row{--aff-per:2}
.aff.aff-plan-cards[data-count="1"] .aff-plan-cards__row{grid-auto-columns:min(100%,var(--ej-measure,760px));justify-content:center}
@container aff-plan-cards (max-width:900px){.aff.aff-plan-cards:not([data-count="1"]) .aff-plan-cards__row{--aff-per:2}}
@container aff-plan-cards (max-width:620px){.aff.aff-plan-cards:not([data-count="1"]) .aff-plan-cards__row{--aff-per:1}}
.aff .aff-plan-card{grid-row:span var(--aff-plan-rows);display:grid;grid-template-rows:subgrid;row-gap:14px;min-width:0;margin:0;scroll-snap-align:start;padding:20px 22px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper,#fff);box-shadow:0 1px 2px color-mix(in srgb,var(--color-text,#1c2733) 10%,transparent)}
.aff .aff-plan-card.is-featured{border:2px solid color-mix(in srgb,var(--aff-ui-accent,var(--color-accent,#0f8f95)) 55%,transparent);background:color-mix(in srgb,#fff 94%,var(--aff-ui-accent,var(--color-accent,#0f8f95)))}
.aff .aff-plan-card__head{display:grid;gap:6px;justify-items:start;align-content:start}
.aff .aff-plan-card__name{margin:0;font:700 clamp(1.15rem,2vw,1.35rem)/1.2 var(--aff-ui-font-heading);color:var(--aff-heading)}
.aff .aff-plan-card__type{font-size:13px;font-weight:600;color:var(--aff-muted)}
.aff .aff-plan-card__price .aff-softprice{justify-items:start}
.aff .aff-plan-card__price .aff-price{text-align:left}
.aff .aff-plan-card__for{margin:0;font-size:14px;line-height:1.5}
.aff .aff-plan-card__for span{display:block;margin-bottom:2px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aff-ui-accent-ink,var(--color-accent,#0f8f95))}
.aff .aff-plan-card__specs{grid-row:span var(--aff-plan-spec-rows);display:grid;grid-template-rows:subgrid;row-gap:0;margin:0;border-top:1px solid var(--aff-line)}
.aff .aff-plan-card__specs>div{display:grid;gap:2px;align-content:start;padding:10px 0;border-bottom:1px solid var(--aff-line)}
.aff .aff-plan-card__points .aff-points{margin:0}
.aff .aff-plan-card__specs dt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--aff-muted)}
.aff .aff-plan-card__specs dt svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--aff-ui-accent,var(--color-accent,#0f8f95));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-plan-card__specs dd{margin:0;font-size:15px;line-height:1.45;color:var(--aff-ink)}
.aff .aff-plan-card__actions{display:flex;align-self:end}
.aff .aff-plan-card__actions>.aff-cta{flex:1 1 100%;justify-content:center}
.aff.aff-plan-cards>.aff-note{box-sizing:border-box;width:min(100%,var(--ej-measure,760px));margin:0 auto}

/* AFF_USAGE_CARDS_V1 (Julien 2026-10-22): usage by usage in cards, in the wide column — small cards (Julien 22/10 « des petites »),
   4 per row on a wide screen, then 3, 2, 1 as it narrows (auto-fill 230px). Card = the affiliate card tokens; head = usage icon + usage; then the verdict
   badge (duel: winner logo + « X l'emporte », tie: both logos + « Ex aequo »; review: coloured dot + level word, the
   word always written), then « why ». Level colours: 0 bad, 1 amber, 2 accent, 3–4 good. */
.aff.aff-usage-cards{display:grid;gap:14px;margin-block:clamp(32px,4vw,48px)}
.ej-reader .ej-section>.aff.aff-usage-cards{margin-block:clamp(8px,1.5vw,16px)!important}
.aff .aff-usage-cards__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.aff .aff-usage-card{display:flex;flex-direction:column;gap:9px;min-width:0;margin:0;padding:14px 16px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius,var(--aff-radius));background:var(--aff-ui-paper,#fff);box-shadow:0 1px 2px color-mix(in srgb,var(--color-text,#1c2733) 10%,transparent)}
.aff .aff-usage-card__head{display:flex;align-items:center;gap:10px}
.aff .aff-usage-card__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--aff-badge-bg)}
.aff .aff-usage-card__icon svg{width:18px;height:18px;fill:none;stroke:var(--aff-ui-accent-ink,var(--aff-ui-accent,#0f8f95));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aff .aff-usage-card__usage{margin:0;font:700 15px/1.3 var(--aff-ui-font-heading);color:var(--aff-heading)}
.aff .aff-usage-card__verdict{--aff-v:var(--aff-ui-accent,#0f8f95);display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0;padding:5px 12px 5px 6px;border-radius:999px;background:color-mix(in srgb,var(--aff-v) 12%,var(--aff-ui-paper,#fff));color:color-mix(in srgb,var(--aff-v) 80%,#000);font:800 12.5px/1.3 var(--aff-ui-font)}
.aff .aff-usage-card__verdict.is-level{padding-left:10px}
.aff .aff-usage-card__verdict.is-level i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--aff-v)}
.aff .aff-usage-card__verdict.is-tie{--aff-v:var(--aff-muted)}
.aff .aff-usage-card__logos{display:inline-flex}
.aff .aff-usage-card__logos .aff-visual{width:26px;height:26px;border-radius:50%;font-size:10px;background:#fff}
.aff .aff-usage-card__logos .aff-visual+.aff-visual{margin-left:-8px}
.aff .aff-usage-card__logos .aff-visual img{width:100%;height:100%;object-fit:contain;padding:3px}
.aff .aff-usage-card[data-level="4"] .aff-usage-card__verdict,.aff .aff-usage-card[data-level="3"] .aff-usage-card__verdict{--aff-v:var(--aff-good)}
.aff .aff-usage-card[data-level="1"] .aff-usage-card__verdict{--aff-v:var(--ej-warn,#a8650f)}
.aff .aff-usage-card[data-level="0"] .aff-usage-card__verdict{--aff-v:var(--aff-bad)}
.aff .aff-usage-card[data-level="0"]{border-color:color-mix(in srgb,var(--aff-bad) 30%,var(--aff-ui-card-line))}
.aff .aff-usage-card__why{margin:0;font-size:14px;line-height:1.45;color:var(--aff-ink)}