/* 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;
}
/* floating (2026-11-03, « surcouche graphique »): a pill floating over the page (hero included), translucent page colour,
   hairline in the accent colour; the page starts under it (no reserved band). */
html[data-style-header="floating"] body > nav.cms-editorial-header {
  position: fixed !important; top: 14px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(var(--container, 1220px), calc(100vw - 24px)); padding: 6px 10px 6px 22px !important; border-radius: 999px;
  background: color-mix(in srgb, var(--cms-style-canvas) 80%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--cms-style-accent) 32%, transparent) !important;
  box-shadow: 0 10px 34px -14px color-mix(in srgb, var(--cms-style-accent) 40%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
html[data-style-header="floating"] body > nav.cms-editorial-header .cms-editorial-header__thematic-frame,
html[data-style-header="floating"] body > nav.cms-editorial-header > div { max-width: none; padding-inline: 0 !important; }
html[data-style-header="floating"] { --cms-style-header-h: 0px; scroll-padding-top: 96px; }
html[data-style-header="floating"] body { padding-top: 0 !important; }
html[data-style-header="floating"] body > nav.cms-editorial-header ~ main > :first-child:not(.cms-editorial-hero, [class*="hero"]) { padding-top: 96px; }
@media (max-width: 767px) {
  html[data-style-header="floating"] body > nav.cms-editorial-header { top: 10px; padding: 4px 6px 4px 16px !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) {
  /* MENU_SIZE_COMPACT_V1 (Julien 2026-11-03, « avec Actualités on sera trop grand »): 15px and a tighter gap; six entries
     or more (themes + Magazine + Actualités) step down to 14.5px. */
  html[data-style-menu-size="large"] .cms-editorial-header__desktop-nav { column-gap: clamp(20px, 1.9vw, 30px); }
  html[data-style-menu-size="large"] .cms-editorial-header__desktop-nav:has(> :nth-child(6)) { column-gap: clamp(16px, 1.4vw, 24px); }
  html[data-style-menu-size="large"] body > nav[x-data] .cms-editorial-header__desktop-nav[data-cms-thematic-nav] { column-gap: clamp(20px, 1.9vw, 30px); }
  html[data-style-menu-size="large"] body > nav[x-data] .cms-editorial-header__desktop-nav[data-cms-thematic-nav]:has(> :nth-child(6)) { column-gap: clamp(16px, 1.5vw, 24px); }
  /* 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: 15px; letter-spacing: -.005em; }
  html[data-style-menu-size="large"] body > nav.cms-editorial-header[x-data] [data-cms-thematic-nav]:has(> :nth-child(6)) .cms-thematic-nav__trigger,
  html[data-style-menu-size="large"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav:has(> :nth-child(6)) > a { font-size: 14.5px; }
}

/* ---- 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 .cms-thematic-nav__item.is-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.
   SECTION_ALT_FAQ_PLAIN_V1 (Julien 2026-10-22, « on reste toujours sans couleur de fond »): the section holding the FAQ
   or the closing notes (Avertissement, Mention d'affiliation) never takes it, even between two plain sections. */
html[data-style-sections="alternate"] .ej-section:nth-of-type(even):not(:has([data-component="faq"], .ej-endnote--disclaimer)) {
  background: var(--cms-style-alt);
  box-shadow: 0 0 0 100vmax var(--cms-style-alt);
  clip-path: inset(0 -100vmax);
}
/* SECTION_ALT_LAST_PAD_V1 (2026-11-04): HUB_END_SPACE_V1 drops the last section's bottom padding; on the secondary
   background its text then touched the end of the band (à propos, la rédaction). A coloured last section keeps it. */
html[data-style-sections="alternate"] .cms-surface-hub > .ej-reader--hub:last-child > .ej-section:last-child:nth-of-type(even):not(:has([data-component="faq"], .ej-endnote--disclaimer)) { padding-bottom: var(--ej-space-section, clamp(40px, 5vw, 64px)); }
/* SECTION_ALT_LAST_JOIN_V1 (Julien 2026-11-04): a page ending on a coloured section runs into the next band (newsletter)
   without the blank of its wrapper's bottom padding; the section's own padding keeps the text clear of the edge. */
html[data-style-sections="alternate"] .cms-surface-hub-section:has(.cms-surface-hub > .ej-reader--hub:last-child > .ej-section:last-child:nth-of-type(even), .cms-surface-hub > .cms-comparisons-hub:last-child > .cms-comparisons-hub__article:last-child > .ej-reader--hub:last-child > .ej-section:last-child:nth-of-type(even)) { padding-bottom: 0 !important; }
/* (a :has() cannot hold another :has(): the plain FAQ / closing-notes section gets the padding back separately) */
html[data-style-sections="alternate"] .cms-surface-hub-section:has(.cms-surface-hub > .ej-reader--hub:last-child > .ej-section:last-child:nth-of-type(even) :is([data-component="faq"], .ej-endnote--disclaimer), .cms-surface-hub > .cms-comparisons-hub:last-child > .cms-comparisons-hub__article:last-child > .ej-reader--hub:last-child > .ej-section:last-child:nth-of-type(even) :is([data-component="faq"], .ej-endnote--disclaimer)) { padding-bottom: clamp(48px,6vw,80px) !important; }
/* SECTION_END_INVERT_V1 (Julien 2026-10-21): on a coloured section, its end band (« Pour la suite », « À lire
   également ») sits on the light page background — on the same tint it merged into the section. */
html[data-style-sections="alternate"] .ej-section:nth-of-type(even):not(:has([data-component="faq"], .ej-endnote--disclaimer)) > .ej-section__end { background: color-mix(in srgb, var(--color-bg, #fff) 30%, #fff); }
/* 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__copy { border-top-color: var(--cms-style-line); }
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="centered"] .wi2-footer .wi2-footer__bottom { grid-template-columns: 1fr; grid-template-areas: "legal" "source" "copy"; justify-items: center; }
html[data-style-footer="centered"] .wi2-footer__legal { justify-content: center; }
html[data-style-footer="centered"] .wi2-footer .wi2-footer__bottom > .cms-preferred-source--footer { justify-self: 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);
}
/* LABEL_PILL_FIT_V1 (Julien 2026-10-21): in an article (editorial-journey sets the label to display:block) the pill kept the
   full column width and read as a bar on top of the section — it stays the size of its text. */
html[data-style-labels="pill"] .ej-reader [data-component="section-heading"] > .cms-section-heading__label { display: inline-block; width: fit-content; max-width: 100%; }
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; }
}

/* MENU_BAND_V1 (Julien 2026-10-25, revue-digitale « travaille un peu mieux le header, un léger gris derrière le menu »):
   menu_band soft = a light grey band behind the desktop top level. With the stacked header, the band runs edge to edge
   under the logo and closes the header (its bottom padding goes); with an inline menu, a rounded tray behind the items.
   Desktop only (the top-level menu shows from 1280 px); the mobile menu is unchanged. */
html[data-style-menu-band="soft"] { --cms-style-menu-band: color-mix(in srgb, var(--color-text, #111827) 5%, var(--cms-style-canvas, #fff)); }
@media (min-width: 1280px) {
  html[data-style-menu-band="soft"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav {
    background: var(--cms-style-menu-band); border-radius: 999px; padding: 7px 18px;
  }
  html[data-style-menu-band="soft"][data-style-header="stacked"] body > nav.cms-editorial-header { padding-bottom: 0 !important; }
  html[data-style-menu-band="soft"][data-style-header="stacked"] body > nav.cms-editorial-header > div > div:has(> .cms-editorial-header__bar) { padding-bottom: 0 !important; }
  html[data-style-menu-band="soft"][data-style-header="stacked"] .cms-editorial-header__bar { gap: 16px; }
  html[data-style-menu-band="soft"][data-style-header="stacked"] body > nav.cms-editorial-header[x-data] .cms-editorial-header__desktop-nav {
    align-self: stretch; justify-content: center; border-radius: 0; padding: 11px 0;
    /* Edge to edge without clipping (MENU_BAND_NO_CLIP_V1, 26/10: a clip-path cut the mega menus): the band is painted
       by a border-image outset on both sides only, which neither clips the submenus nor makes the page scroll. */
    background: none; border-image: linear-gradient(var(--cms-style-menu-band), var(--cms-style-menu-band)) fill 0 / / 0 100vmax;
  }
}

/* ==== MOTION_V1 (Julien 2026-11-03, web-insider: « ça manque un peu d'animations, des petites touches ») =============
   One shared motion layer for every site: buttons, cards, sections, newsletter. Short, eased, never on a reduced-motion
   setting, never on touch hover. */
:root { --cms-ease-out: cubic-bezier(.22, 1, .36, 1); --cms-ease-inout: cubic-bezier(.65, 0, .35, 1); }

/* BUTTON_SWEEP_V1: on hover a fill sweeps from left to right under the label, the button lifts with its shadow.
   The fill is a pseudo-element, so a family's own hover background (shorthand) never cancels it; on a dark button it
   is the accent, elsewhere a light shade over the button's own colour. */
:where(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button) { --cms-btn-sweep: rgb(0 0 0 / 16%); }
:is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button) {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .35s var(--cms-ease-out), box-shadow .35s ease, background-color .3s ease, color .3s ease, border-color .2s ease .3s !important;
}
:is(.wi2-btn--dark, .wi2-btn--ghost, .wi2-btn--outline, .wi2-btn--coral) { --cms-btn-sweep: color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #0f766e)) 82%, #000); }
:is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--cms-btn-sweep); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--cms-ease-inout);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button):hover::before { transform: scaleX(1); }
  :is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button):hover {
    transform: translateY(-2px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--color-text, #0f172a) 45%, transparent);
    /* The fill stops at the border: the border takes the fill colour once the sweep has crossed, so no frame is left. */
    border-color: var(--cms-btn-sweep);
  }
  :is(.wi2-btn--dark, .wi2-btn--ghost):hover { color: #fff; }
}
:is(.wi2-btn, .aff-cta, .mi-affiliate-card__cta, .cms-specialized-hero__action, .cms-editorial-hero__action, .wi-header-cta, .aff-show__cta, .aff-show__go, .cms-editorial-newsletter__form button):active { transform: translateY(0); transition-duration: .1s !important; }

/* LINK_UNDERLINE_V1 (Julien 2026-11-03): the « see all » text links of a section heading or a card answer like the menu
   links — a line draws itself from left to right under the label, the arrow moves forward. */
/* The link hugs its text (a grid parent would stretch it, and the line with it, to the full card width). */
:is(.aff-show__all, .cms-videos__more, .aff-hub__more) { position: relative; justify-self: start; width: fit-content; max-width: 100%; }
:is(.aff-show__all, .cms-videos__more, .aff-hub__more)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--cms-ease-out);
}
:is(.aff-show__all, .cms-videos__more, .aff-hub__more) svg { transition: transform .3s var(--cms-ease-out); }
@media (hover: hover) {
  :is(.aff-show__all, .cms-videos__more):hover::after, a:hover .aff-hub__more::after { transform: scaleX(1); }
  :is(.aff-show__all, .cms-videos__more):hover svg, a:hover .aff-hub__more svg { transform: translateX(3px); }
}
:is(.aff-show__all, .cms-videos__more):focus-visible::after { transform: scaleX(1); }

/* CARD_HOVER_V1: every card family answers the same way — its picture zooms slowly, its text lifts a few pixels.
   « À explorer ensuite » was the reference; resources, guides, tools, topics, reviews and videos now follow it. */
:is(.cms-editorial-post-card, .cms-post-card, .wi2-overlay-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family, .cms-videos__item,
    .aff-row, .aff-hub__mini, .aff-hub__row, .aff-hub__feature, .aff-hub__poster, .aff-hub__versus, .aff-show__row, .aff-show__lead) {
  --cms-card-zoom: 1.045; --cms-card-lift: -3px;
}
:is(.cms-editorial-post-card, .cms-post-card, .wi2-overlay-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family, .cms-videos__item,
    .aff-row, .aff-hub__mini, .aff-hub__row, .aff-hub__feature, .aff-hub__poster, .aff-hub__versus, .aff-show__row, .aff-show__lead)
  img:not([class*="logo"]):not(.is-logo img):not([width="16"]) { transition: transform .7s var(--cms-ease-out), filter .4s ease; }
:is(.cms-editorial-post-card, .cms-post-card, .wi2-overlay-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family,
    .aff-hub__mini, .aff-hub__row, .aff-hub__feature, .aff-hub__poster, .aff-hub__versus, .aff-show__row, .aff-show__lead)
  > :is([class*="__body"], [class*="__copy"], [class*="__content"], [class*="__text"]) { transition: transform .45s var(--cms-ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.cms-editorial-post-card, .cms-post-card, .wi2-overlay-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family, .cms-videos__item,
      .aff-row, .aff-hub__mini, .aff-hub__row, .aff-hub__feature, .aff-hub__poster, .aff-hub__versus, .aff-show__row, .aff-show__lead):hover
    img:not([class*="logo"]):not(.is-logo img):not([width="16"]) { transform: scale(var(--cms-card-zoom)); }
  :is(.cms-editorial-post-card, .cms-post-card, .wi2-overlay-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family,
      .aff-hub__mini, .aff-hub__row, .aff-hub__feature, .aff-hub__poster, .aff-hub__versus, .aff-show__row, .aff-show__lead):hover
    > :is([class*="__body"], [class*="__copy"], [class*="__content"], [class*="__text"]) { transform: translateY(var(--cms-card-lift)); }
}
/* A zoomed picture stays inside its frame. */
:is(.cms-editorial-post-card, .cms-post-card, .wi2-topic-card, .mi-duel-example-card, .cms-guide-family, .aff-hub__feature, .aff-hub__poster, .aff-show__lead)
  :is([class*="__media"], [class*="__visual"], [class*="__thumb"], [class*="__image"]) { overflow: hidden; }

/* MOTION_REVEAL_V1: below the fold, a section's content rises softly into place the first time it shows (js/motion.js
   marks it; without JS, or with reduced motion, nothing is hidden). Cards of a grid follow one another. */
.cms-motion .cms-reveal > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--cms-ease-out); }
.cms-motion .cms-reveal [data-cms-reveal-i] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--cms-ease-out); transition-delay: calc(var(--cms-reveal-i, 0) * 70ms); }
/* MOTION_REVEALED_CHILDREN_V1 (2026-11-04): a [data-reveal] block shown by common.js gets .revealed, not .is-in (motion.js
   bands only): its children stayed at opacity 0 (author listing of /la-redaction/). */
.cms-motion .cms-reveal:is(.is-in, .revealed) > *, .cms-motion .cms-reveal:is(.is-in, .revealed) [data-cms-reveal-i] { opacity: 1; transform: none; }

/* NEWSLETTER_MOTION_V1: the picture breathes in slowly as the band shows, the field and its button answer focus. */
.cms-editorial-newsletter__media img { transition: transform 1.6s var(--cms-ease-out); }
.cms-motion .cms-reveal.cms-editorial-newsletter__media img, .cms-motion .cms-editorial-newsletter.cms-reveal .cms-editorial-newsletter__media img { transform: scale(1.06); }
.cms-motion .cms-editorial-newsletter.cms-reveal.is-in .cms-editorial-newsletter__media img { transform: scale(1); }
.cms-editorial-newsletter__form input { transition: box-shadow .3s ease, border-color .3s ease, transform .3s var(--cms-ease-out); }
.cms-editorial-newsletter__form input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #0f766e)) 28%, transparent); }

/* SECTION_SHAPES_V1 (Julien 2026-11-03): theme.json style `shapes` = soft | rings | arcs (default none), `shapes_level` =
   faint | normal. Large discreet shapes behind some sections, moving a little slower than the page (parallax, js/motion.js).
   Simple to set, remove or tune per site; never a straight grid (see the texture rule). */
.cms-shapes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cms-shapes-host { position: relative; isolation: isolate; }
.cms-shape { position: absolute; left: var(--cms-shape-x, 70%); top: var(--cms-shape-y, 10%); width: var(--cms-shape-size, 520px); aspect-ratio: 1;
  translate: -50% 0; transform: translate3d(0, var(--cms-shape-shift, 0px), 0) rotate(var(--cms-shape-turn, 0deg)); will-change: transform;
  --cms-shape-ink: color-mix(in srgb, var(--cms-style-accent, var(--color-accent, #0f766e)) var(--cms-shape-strength, 9%), transparent); }
html[data-style-shapes-level="faint"] .cms-shape { --cms-shape-strength: 5%; }
html[data-style-shapes="soft"] .cms-shape { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(closest-side, var(--cms-shape-ink), transparent); }
html[data-style-shapes="rings"] .cms-shape { border-radius: 50%; border: clamp(18px, 2.4vw, 34px) solid var(--cms-shape-ink); }
html[data-style-shapes="arcs"] .cms-shape { border-radius: 50%; border: 2px solid var(--cms-shape-ink); box-shadow: 0 0 0 28px transparent, 0 0 0 30px var(--cms-shape-ink), 0 0 0 62px transparent, 0 0 0 64px var(--cms-shape-ink); clip-path: inset(0 0 50% 0); }
@media (max-width: 720px) { .cms-shape { width: calc(var(--cms-shape-size, 520px) * .6); } }

@media (prefers-reduced-motion: reduce) {
  .cms-motion .cms-reveal > *, .cms-motion .cms-reveal [data-cms-reveal-i] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cms-shape { transform: rotate(var(--cms-shape-turn, 0deg)) !important; }
  :is(.aff-show__all, .cms-videos__more, .aff-hub__more)::after, :is(.aff-show__all, .cms-videos__more, .aff-hub__more) svg { transition: none; }
}

/* ---- topbar band (TOPBAR_BAND_V1, Julien 2026-11-04) ------------------------------------------------------------- */
/* theme.json style topbar = band: a thin band in the accent colour above the logo and the menu. Social accounts on the
   left; language (flag, dialog) and search on the right. It scrolls away with the page; the header keeps its behaviour. */
.cms-topbar { position: relative; z-index: 51; background: var(--cms-style-accent, var(--color-accent)); color: var(--color-on-accent, #fff); font-size: 13px; line-height: 1; }
.cms-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1320px, calc(100% - 40px)); min-height: 38px; margin-inline: auto; } /* the header frame's width */
.cms-topbar__social { display: flex; align-items: center; gap: 2px; margin: 0 0 0 -7px; padding: 0; list-style: none; }
.cms-topbar__social-link, .cms-topbar__search, .cms-topbar__lang { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; border-radius: 999px; color: inherit; text-decoration: none; opacity: .9; transition: background-color .16s ease, opacity .16s ease; }
.cms-topbar__social-link { justify-content: center; width: 30px; }
.cms-topbar__social-link svg { width: 15px; height: 15px; fill: currentColor; }
.cms-topbar__social-link:hover, .cms-topbar__search:hover, .cms-topbar__lang:hover,
.cms-topbar__social-link:focus-visible, .cms-topbar__search:focus-visible, .cms-topbar__lang:focus-visible { background: rgba(255, 255, 255, .14); opacity: 1; }
.cms-topbar :focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.cms-topbar__tools { display: flex; align-items: center; gap: 4px; margin-right: -11px; }
.cms-topbar__search, .cms-topbar__lang { padding: 0 11px; font: inherit; font-weight: 600; letter-spacing: .01em; }
.cms-topbar__lang { border: 0; background: transparent; cursor: pointer; }
.cms-topbar__search svg, .cms-topbar__caret { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cms-topbar__caret { width: 13px; height: 13px; opacity: .8; }
.cms-topbar__flag { width: 20px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.cms-topbar__code { display: inline-grid; place-items: center; min-width: 22px; height: 15px; border-radius: 3px; background: rgba(255, 255, 255, .2); font-size: 10px; font-weight: 800; }
.cms-lang-dialog { width: min(340px, calc(100% - 32px)); margin: 72px auto auto; padding: 18px 16px 12px; border: 1px solid var(--cms-style-line, var(--color-border)); border-radius: 16px; background: var(--color-bg, #fff); color: var(--color-text); box-shadow: 0 24px 60px -24px rgba(10, 19, 35, .45); }
.cms-lang-dialog::backdrop { background: rgba(10, 19, 35, .42); }
.cms-lang-dialog__title { margin: 0 34px 10px 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.cms-lang-dialog__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cms-lang-dialog__item { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; color: inherit; font-weight: 600; text-decoration: none; }
.cms-lang-dialog__item:hover, .cms-lang-dialog__item:focus-visible { background: color-mix(in srgb, var(--cms-style-accent, var(--color-accent)) 9%, transparent); }
.cms-lang-dialog__item[aria-current] { color: var(--cms-style-accent, var(--color-accent)); }
.cms-lang-dialog__item .cms-topbar__flag { width: 24px; height: 17px; }
.cms-lang-dialog__item .cms-topbar__code { background: color-mix(in srgb, currentColor 12%, transparent); }
.cms-lang-dialog__check { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cms-lang-dialog__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.cms-lang-dialog__close:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cms-lang-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html[data-mode="dark"] .cms-lang-dialog { background: var(--color-bg-alt, #13213a); }
@media (max-width: 767px) {
  .cms-topbar__inner { min-height: 36px; gap: 8px; }
  .cms-topbar__social-link { width: 28px; }
  .cms-topbar__search span { display: none; }
  .cms-topbar__search { width: 32px; padding: 0; justify-content: center; }
}
/* TOPBAR_BAND_V1 desktop rhythm: a slimmer band, more air in the logo/menu row, a lighter CTA set apart from the menu. */
@media (min-width: 1024px) {
  html[data-style-topbar="band"] .cms-topbar__inner { min-height: 30px; }
  html[data-style-topbar="band"] .cms-topbar__social-link, html[data-style-topbar="band"] .cms-topbar__search, html[data-style-topbar="band"] .cms-topbar__lang { min-height: 26px; }
  html[data-style-topbar="band"] .cms-topbar__social-link { width: 26px; }
  html[data-style-topbar="band"] .cms-topbar__social { margin-left: -5px; }
  html[data-style-topbar="band"] .cms-topbar__search, html[data-style-topbar="band"] .cms-topbar__lang { padding: 0 9px; }
  html[data-style-topbar="band"] .cms-topbar__tools { margin-right: -9px; }
  html[data-style-topbar="band"] body > nav[x-data] > div > div { padding-top: 19px !important; padding-bottom: 19px !important; }
  html[data-style-topbar="band"] .cms-editorial-header__cta { min-height: 36px; margin-left: 18px; }
}