/* SITE_STYLE_V1 (Julien 2026-10-15) — named styles of the socle. A site chooses them in theme.json → "style"; the
 * layout writes data-style-* on <html> and loads this file only when a style is chosen. Every rule is scoped by its
 * attribute: without it nothing here applies. Brand colours stay in site-overrides.css. */

@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif/InstrumentSerif-Italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif/InstrumentSerif-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --cms-style-canvas: var(--color-canvas, var(--wi2-canvas, var(--color-bg, #fff))); /* the body colour (main.css) */
  --cms-style-alt: var(--color-bg-alt, #f4f4f2);
  --cms-style-accent: var(--color-accent, #c4602f);
  --cms-style-accent-on-dark: var(--color-accent-3, var(--color-accent, #c4602f));
  --cms-style-line: var(--color-border, rgba(0, 0, 0, .1));
  --cms-style-header-h: 78px;
}

/* ---- header ---------------------------------------------------------------------------------------------------- */
/* flat: the page colour, no shadow, no border; a hairline appears once the page scrolls (html.cms-is-scrolled). */
html[data-style-header] body > nav.cms-editorial-header { transition: box-shadow .2s ease, background-color .2s ease; }
html[data-style-header="flat"] body > nav.cms-editorial-header,
html[data-style-header="stacked"] body > nav.cms-editorial-header,
html[data-style-header="center-menu"] body > nav.cms-editorial-header {
  background: var(--cms-style-canvas) !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}
html.cms-is-scrolled[data-style-header] body > nav.cms-editorial-header,
html[data-style-header] body > nav.cms-editorial-header.cms-editorial-header--scrolled {
  box-shadow: 0 1px 0 var(--cms-style-line) !important;
}
@media (min-width: 1280px) {
  /* stacked: logo centred on top, menu centred below. */
  html[data-style-header="stacked"] .cms-editorial-header__bar { flex-direction: column; align-items: center; gap: 14px; }
  html[data-style-header="stacked"] .cms-editorial-header__desktop-nav { justify-content: center; }
  /* center-menu: the header takes the content width (theme container), the logo on the content's left edge, the menu
     centred in the room left beside it, anything else (CTA) right (Julien 2026-10-15: a page-wide bar left the logo
     out on the left while the menu sat in the middle). */
  html[data-style-header="center-menu"] .cms-editorial-header__thematic-frame { max-width: min(var(--container, 1220px), calc(100vw - 32px)); }
  html[data-style-header="center-menu"] .cms-editorial-header__thematic-frame > div { padding-inline: 0 !important; }
  html[data-style-header="center-menu"] .cms-editorial-header__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  html[data-style-header="center-menu"] .cms-editorial-header__brand { justify-self: start; }
  html[data-style-header="center-menu"] .cms-editorial-header__desktop-nav { justify-self: center; }
  html[data-style-header="center-menu"] .cms-editorial-header__bar > :nth-child(n+3) { justify-self: end; }
}

/* MENU_SIZE_V1 (Julien 2026-10-19, web-insider « le menu un peu plus gros, il y a de la place »): a larger desktop
   top level, wider spacing; the mobile menu is unchanged. */
@media (min-width: 1024px) {
  html[data-style-menu-size="large"] .cms-editorial-header__desktop-nav { column-gap: clamp(26px, 2.4vw, 40px); }
  /* Same selector chain as thematic-navigation.css, so the larger size wins without !important. */
  html[data-style-menu-size="large"] body > nav.cms-editorial-header[x-data] [data-cms-thematic-nav] .cms-thematic-nav__trigger,
  html[data-style-menu-size="large"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav > a,
  html[data-style-menu-size="large"] .cms-editorial-header__menu-parent > div > a { font-size: 16px; letter-spacing: -.005em; }
}

/* ---- menu (desktop top level) ----------------------------------------------------------------------------------- */
html[data-style-menu] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger,
html[data-style-menu] .cms-editorial-header__desktop-nav > a,
html[data-style-menu] .cms-editorial-header__menu-parent > div > a { position: relative; transition: color .18s ease, background-color .18s ease; }
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger,
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav > a,
html[data-style-menu="underline"] .cms-editorial-header__menu-parent > div > a { font-weight: 600; }
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger::after,
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav > a::after,
html[data-style-menu="underline"] .cms-editorial-header__menu-parent > div > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--cms-style-accent); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger:hover::after,
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger[aria-expanded="true"]::after,
html[data-style-menu="underline"] .cms-editorial-header__desktop-nav > a:hover::after,
html[data-style-menu="underline"] .cms-editorial-header__menu-parent > div > a:hover::after { transform: scaleX(1); }
html[data-style-menu="pill"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger,
html[data-style-menu="pill"] .cms-editorial-header__desktop-nav > a { padding: 7px 14px; border-radius: 999px; font-weight: 600; }
html[data-style-menu="pill"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger:hover,
html[data-style-menu="pill"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger[aria-expanded="true"],
html[data-style-menu="pill"] .cms-editorial-header__desktop-nav > a:hover { background: color-mix(in srgb, var(--cms-style-accent) 12%, transparent); color: var(--color-text, inherit); }
html[data-style-menu="caps"] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger,
html[data-style-menu="caps"] .cms-editorial-header__desktop-nav > a { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* tiles (Julien 2026-10-15): every parent on a discreet white tile — padding, radius, a fine border; the open or hovered
   one takes the accent. Pairs with header center-menu. The selectors match the weight of the menu's own trigger rule. */
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav { gap: 8px; column-gap: 8px; }
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger,
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav > a {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border: 1px solid var(--cms-style-line);
  border-radius: 10px; background: #fff; color: var(--color-text, inherit); font-weight: 650;
  letter-spacing: -.1px; box-shadow: 0 1px 2px rgba(16, 24, 32, .05);
}
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger:hover,
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav .cms-thematic-nav__item[open] > .cms-thematic-nav__trigger,
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav > a:hover {
  border-color: color-mix(in srgb, var(--cms-style-accent) 45%, var(--cms-style-line));
  background: color-mix(in srgb, var(--cms-style-accent) 9%, #fff); color: var(--color-text, inherit);
}
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav .cms-thematic-nav__trigger::after,
html[data-style-menu="tiles"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav > a::after { content: none; }

/* ---- hero ------------------------------------------------------------------------------------------------------- */
/* tall: every hero of the site fills the first screen with the header. */
html[data-style-hero="tall"] .cms-editorial-hero { min-height: calc(100svh - var(--cms-style-header-h)) !important; }
html[data-style-hero="tall"] .cms-specialized-hero { min-height: calc(100svh - var(--cms-style-header-h) - 64px); display: grid; align-content: end; }

/* ---- titles ----------------------------------------------------------------------------------------------------- */
/* The end of the H1 and of section titles (span.cms-title-tail written by cms_style_title_html()). */
html[data-style-titles] .cms-title-tail { color: var(--cms-style-accent); }
html[data-style-titles] :is(.cms-editorial-hero, .cms-specialized-hero) .cms-title-tail { color: var(--cms-style-accent-on-dark); }
body[data-hero-tone="light"] :is(.cms-editorial-hero, .cms-specialized-hero) .cms-title-tail { color: var(--cms-style-accent); }
html[data-style-titles="serif"] .cms-title-tail {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: 0; line-height: inherit;
}
html[data-style-titles="marker"] .cms-title-tail {
  color: inherit;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--color-accent-3, var(--cms-style-accent)) 55%, transparent) 60%);
  padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-style-titles="marker"] :is(.cms-editorial-hero, .cms-specialized-hero) .cms-title-tail {
  color: inherit; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--cms-style-accent) 72%, transparent) 62%);
}
html[data-style-title-scale="large"] :is(.cms-editorial-hero, .cms-specialized-hero) h1 { font-size: clamp(2.5rem, 5.2vw, 4.8rem); line-height: .98; letter-spacing: -.025em; }
html[data-style-title-scale="xl"] :is(.cms-editorial-hero, .cms-specialized-hero) h1 { font-size: clamp(2.9rem, 7vw, 6.4rem); line-height: .93; letter-spacing: -.035em; }

/* ---- sections of articles and presentation pages ------------------------------------------------------------------ */
html[data-style-sections] .ej-section { border-top: 0 !important; }
/* alternate: every other section on the secondary background, edge to edge, instead of a rule. */
html[data-style-sections="alternate"] .ej-section:nth-of-type(even) {
  background: var(--cms-style-alt);
  box-shadow: 0 0 0 100vmax var(--cms-style-alt);
  clip-path: inset(0 -100vmax);
}
/* SECTION_BAND_JOIN_V1: the band of the affiliation pages (« Les pages de ce comparatif ») takes the same secondary
   background, so a last section on that background runs into it without a seam (overlay-cards.css drops the gap). */
html[data-style-sections="alternate"] .aff-family.is-bottom { background: var(--cms-style-alt); }
/* cards: each section in a soft card. */
html[data-style-sections="cards"] .ej-section {
  background: var(--color-bg, #fff); border-radius: var(--radius-lg, 1.5rem);
  padding-inline: clamp(18px, 4vw, 48px) !important; margin-block: 18px;
  box-shadow: 0 1px 0 var(--cms-style-line), 0 18px 40px rgba(16, 24, 32, .05);
}

/* ---- footer ----------------------------------------------------------------------------------------------------- */
html[data-style-footer="light"] .wi2-footer { background: var(--cms-style-alt); color: var(--color-text, #222); border-top: 1px solid var(--cms-style-line); }
html[data-style-footer="light"] .wi2-footer strong,
html[data-style-footer="light"] .wi2-footer__logo strong { color: var(--color-text, #222); }
html[data-style-footer="light"] .wi2-footer a,
html[data-style-footer="light"] .wi2-footer__nav, /* legal links inherit their colour */
html[data-style-footer="light"] .wi2-footer__brand p,
html[data-style-footer="light"] .wi2-footer__note p,
html[data-style-footer="light"] .wi2-footer__bottom { color: var(--color-text-muted, #666); }
html[data-style-footer="light"] .wi2-footer a:hover { color: var(--cms-style-accent); }
html[data-style-footer="light"] .wi2-footer__note { background: var(--color-bg, #fff); border-color: var(--cms-style-line); }
html[data-style-footer="light"] .wi2-footer .wi-wordmark--footer span { color: var(--color-text, #222); }
html[data-style-footer="centered"] .wi2-footer__inner { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
html[data-style-footer="centered"] .wi2-footer__nav { grid-auto-flow: column; justify-content: center; gap: 10px 22px; flex-wrap: wrap; }
html[data-style-footer="centered"] .wi2-footer__nav strong { display: none; }
html[data-style-footer="centered"] .wi2-footer__brand p { margin-inline: auto; }
html[data-style-footer="centered"] .wi2-footer__bottom { justify-content: center; text-align: center; }
html[data-style-footer="minimal"] .wi2-footer__inner { grid-template-columns: 1fr !important; padding-block: 34px 10px !important; }
html[data-style-footer="minimal"] .wi2-footer__brand p,
html[data-style-footer="minimal"] .wi2-footer__note,
html[data-style-footer="minimal"] .wi2-footer__nav strong { display: none; }
html[data-style-footer="minimal"] .wi2-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
html[data-style-footer="minimal"] .wi2-footer__logo { margin-bottom: 0; }

/* ---- buttons ---------------------------------------------------------------------------------------------------- */
html[data-style-buttons] :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta) { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
html[data-style-buttons="pill"] :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta) { border-radius: 999px !important; }
html[data-style-buttons="square"] :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta) { border-radius: 4px !important; }
html[data-style-buttons="outline"] :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta) { background: transparent !important; color: var(--cms-style-accent) !important; box-shadow: inset 0 0 0 2px var(--cms-style-accent) !important; }
html[data-style-buttons="outline"] :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta):hover { background: var(--cms-style-accent) !important; color: var(--color-on-accent, #fff) !important; }

/* ---- labels (surtitles) ----------------------------------------------------------------------------------------- */
html[data-style-labels="pill"] .cms-section-heading__label {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--cms-style-accent) 12%, transparent);
}
html[data-style-labels="line"] .cms-section-heading__label { display: inline-flex; align-items: center; gap: 10px; }
html[data-style-labels="line"] .cms-section-heading__label::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }

/* ---- texture of the page background ------------------------------------------------------------------------------ */
/* SITE_TEXTURE_V2 (Julien 2026-10-19): fine, discreet patterns only — never a big straight grid. The pattern is drawn
   in the accent colour on a layer behind the top of the page and fades softly into the page background. */
html[data-style-texture] {
  --cms-texture-ink: color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #555)) 26%, transparent);
  --cms-texture-fade: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 55%) 38%, transparent 100%);
  --cms-texture-height: min(1200px, 130vh);
}
html[data-style-texture="dots"] { --cms-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='3' cy='3' r='.9' fill='%23000'/%3E%3Ccircle cx='10' cy='10' r='.6' fill='%23000'/%3E%3C/svg%3E"); --cms-texture-size: 14px 14px; }
html[data-style-texture="grid"] { --cms-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 -12L48 0M0 0L48 12M0 12L48 24M0 24L48 36M0 36L48 48M0 0L-12 48M12 0L0 48M24 0L12 48M36 0L24 48M48 0L36 48M60 0L48 48' fill='none' stroke='%23000' stroke-width='.45'/%3E%3C/svg%3E"); --cms-texture-size: 48px 48px; --cms-texture-ink: color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #555)) 18%, transparent); }
html[data-style-texture="waves"] { --cms-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20'%3E%3Cpath d='M0 10C8 5 16 5 24 10S40 15 48 10' fill='none' stroke='%23000' stroke-width='.6'/%3E%3C/svg%3E"); --cms-texture-size: 48px 20px; }
html[data-style-texture="nodes"] { --cms-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='.5'%3E%3Cpath d='M18 24L56 40L92 18M56 40L48 82L88 96M48 82L14 92M92 18L104 60L88 96'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='18' cy='24' r='1.6'/%3E%3Ccircle cx='56' cy='40' r='2'/%3E%3Ccircle cx='92' cy='18' r='1.4'/%3E%3Ccircle cx='48' cy='82' r='1.6'/%3E%3Ccircle cx='88' cy='96' r='2'/%3E%3Ccircle cx='14' cy='92' r='1.2'/%3E%3Ccircle cx='104' cy='60' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); --cms-texture-size: 120px 120px; }
html:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) body { position: relative; isolation: isolate; }
html:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--cms-texture-height); z-index: -1; pointer-events: none;
  background: var(--cms-texture-ink);
  -webkit-mask-image: var(--cms-texture), var(--cms-texture-fade); mask-image: var(--cms-texture), var(--cms-texture-fade);
  -webkit-mask-size: var(--cms-texture-size), 100% 100%; mask-size: var(--cms-texture-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-style-texture="grain"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* SITE_TEXTURE_FOOTER_V1 (Julien 2026-10-19, « un rappel niveau footer »): the same texture echoes in the footer,
   from its top right corner, fading out. Lighter ink on the dark footer, the page ink on a light one. */
html:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) .wi2-footer { position: relative; isolation: isolate; }
html:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) .wi2-footer::before {
  content: ""; position: absolute; top: 0; right: 0; width: min(760px, 70%); height: 100%; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #888)) 55%, #fff) 30%, transparent);
  -webkit-mask-image: var(--cms-texture), radial-gradient(ellipse at 100% 0%, #000 0%, rgb(0 0 0 / 45%) 38%, transparent 75%);
  mask-image: var(--cms-texture), radial-gradient(ellipse at 100% 0%, #000 0%, rgb(0 0 0 / 45%) 38%, transparent 75%);
  -webkit-mask-size: var(--cms-texture-size), 100% 100%; mask-size: var(--cms-texture-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-style-footer="light"]:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) .wi2-footer::before { background: var(--cms-texture-ink); }
@media (max-width: 700px) {
  html:is([data-style-texture="dots"], [data-style-texture="grid"], [data-style-texture="waves"], [data-style-texture="nodes"]) .wi2-footer::before { width: 100%; height: 420px; }
}

/* ---- density: room between page sections ------------------------------------------------------------------------ */
html[data-style-density="compact"] { --spacing-section: clamp(40px, 5vw, 64px); }
html[data-style-density="airy"] { --spacing-section: clamp(80px, 10vw, 140px); }

/* ---- links in running text -------------------------------------------------------------------------------------- */
html[data-style-links="underline"] :is(.ej-section, .ej-opening, .cms-prose, .post-content) p a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--cms-style-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
html[data-style-links="highlight"] :is(.ej-section, .ej-opening, .cms-prose, .post-content) p a {
  color: inherit; text-decoration: none;
  background: linear-gradient(color-mix(in srgb, var(--cms-style-accent) 22%, transparent), color-mix(in srgb, var(--cms-style-accent) 22%, transparent)) no-repeat 0 100% / 100% 2px;
  transition: background-size .2s ease;
}
html[data-style-links="highlight"] :is(.ej-section, .ej-opening, .cms-prose, .post-content) p a:hover { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  html[data-style-menu] .cms-editorial-header__desktop-nav *::after,
  html[data-style-header] body > nav.cms-editorial-header { transition: none !important; }
}

/* SECTION_SAME_BG_JOIN_V1 (Julien 2026-10-15): a band on the same background as the one before it (marked by the
   layout script) keeps only a small top room — the room below the previous band already separates them. */
main section.cms-band--joined { padding-top: clamp(16px, 2vw, 28px) !important; }

/* ---- card_texture + mascot (Julien 2026-10-15) ----------------------------------------------------------------------
   card_texture=dots: a fine dot weave, faded, on the registered card surfaces — the author card of the method block,
   the note card of the footer — and in a corner of the tinted blocks (CARD_TEXTURE_CORNER_V1); never on product grounds. mascot=on: the site's own pictogram
   (assets/images/brand/mark.svg) as a sticker by the FAQ title and in a corner of the footer note card. Decoration
   only (pseudo-elements, aria-free); the DOM does not change. */
html[data-style-card-texture="dots"] { --cms-card-dots: radial-gradient(color-mix(in srgb, var(--cms-style-accent, var(--color-accent)) 30%, transparent) 1.1px, transparent 1.6px); }
html[data-style-card-texture="dots"] :is(.mi-affiliate-methodology-section__author, .wi2-footer__note, .mi-review-decision-summary__card, .ej-section__end) { position: relative; overflow: hidden; isolation: isolate; }
html[data-style-card-texture="dots"] :is(.mi-affiliate-methodology-section__author, .wi2-footer__note, .mi-review-decision-summary__card, .ej-section__end)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--cms-card-dots); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000 100%); mask-image: linear-gradient(135deg, transparent 35%, #000 100%);
}
/* CARD_TEXTURE_CORNER_V1 (Julien 2026-10-16): never on the white ground of a product picture (picks, uses, review cards);
   on the tinted blocks (surface sections, the family band, the light home bands) the dots fill one corner and fade out. */
html[data-style-card-texture="dots"] :is(.ej-section--surface, .aff-family, .wi2-section--tone-light, .wi2-section--tone-soft) { position: relative; isolation: isolate; }
html[data-style-card-texture="dots"] :is(.ej-section--surface, .aff-family, .wi2-section--tone-light, .wi2-section--tone-soft)::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: min(560px, 62%); height: min(420px, 80%); pointer-events: none;
  background-image: var(--cms-card-dots); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, rgb(0 0 0 / 55%) 32%, transparent 72%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, rgb(0 0 0 / 55%) 32%, transparent 72%);
}
@media (max-width: 700px) {
  html[data-style-card-texture="dots"] :is(.ej-section--surface, .aff-family, .wi2-section--tone-light, .wi2-section--tone-soft)::before { width: 78%; height: 260px; }
}

html[data-style-mascot="on"] { --cms-mascot: url("/assets/images/brand/mark.svg"); }
html[data-style-mascot="on"] :is(.wi2-section--faq .cms-section-heading, :is(#faq, #questions-frequentes) > .cms-section-heading) { position: relative; padding-right: 96px; }
html[data-style-mascot="on"] :is(.wi2-section--faq .cms-section-heading, :is(#faq, #questions-frequentes) > .cms-section-heading)::after {
  content: ""; position: absolute; top: 2px; right: 0; width: 72px; height: 72px;
  background: var(--cms-mascot) center / contain no-repeat; transform: rotate(8deg);
  filter: drop-shadow(0 10px 18px rgb(16 24 32 / 16%));
}
html[data-style-mascot="on"] .wi2-footer__note { position: relative; padding-bottom: 92px; }
html[data-style-mascot="on"] .wi2-footer__note::after {
  content: ""; position: absolute; right: 18px; bottom: 18px; width: 56px; height: 56px;
  background: var(--cms-mascot) center / contain no-repeat; transform: rotate(-7deg);
  filter: drop-shadow(0 8px 14px rgb(16 24 32 / 14%));
}
@media (max-width: 640px) {
  html[data-style-mascot="on"] :is(.wi2-section--faq .cms-section-heading, :is(#faq, #questions-frequentes) > .cms-section-heading) { padding-right: 64px; }
  html[data-style-mascot="on"] :is(.wi2-section--faq .cms-section-heading, :is(#faq, #questions-frequentes) > .cms-section-heading)::after { right: 8px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-style-mascot="on"] :is(.wi2-section--faq .cms-section-heading, :is(#faq, #questions-frequentes) > .cms-section-heading)::after { transition: transform .3s ease; }
  html[data-style-mascot="on"] :is(.wi2-section--faq:hover .cms-section-heading, :is(#faq, #questions-frequentes):hover > .cms-section-heading)::after { transform: rotate(-4deg) translateY(-3px); }
}
html[data-style-mascot="on"] .page-404 .cms-specialized-hero__copy::before {
  content: ""; display: block; width: 92px; height: 92px; margin-bottom: 18px;
  background: var(--cms-mascot) center / contain no-repeat; transform: rotate(-8deg);
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 28%));
}
@media (max-width: 640px) { html[data-style-mascot="on"] .page-404 .cms-specialized-hero__copy::before { width: 64px; height: 64px; margin-bottom: 12px; } }

/* HEADER_SPACE_V1 (Julien 2026-10-19, coupe-bordure « réduis un peu les padding top et bot, le logo est plus haut »):
   a compact header keeps the logo size and trims the vertical space around it. */
html[data-style-header-space="compact"] body > nav.cms-editorial-header { padding-top: 6px; padding-bottom: 6px; }
html[data-style-header-space="compact"] body > nav.cms-editorial-header > div > div:has(> .cms-editorial-header__bar) { padding-top: 2px !important; padding-bottom: 2px !important; }

/* MENU_SIZE_V1 medium (Julien 2026-10-19, coupe-bordure « réduis un peu la taille des menus parents »): 15 px, between
   the default and large; same selector chain as large. */
@media (min-width: 1024px) {
  html[data-style-menu-size="medium"] body > nav.cms-editorial-header[x-data] [data-cms-thematic-nav] .cms-thematic-nav__trigger,
  html[data-style-menu-size="medium"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav > a,
  html[data-style-menu-size="medium"] .cms-editorial-header__menu-parent > div > a { font-size: 15px; }
}