/* EDITORIAL_JOURNEY_V2 — one engine for every article and page (Présentation format).
   Order: tokens → layout → typography → navigation → block families → closing blocks → mobile/print.
   Every colour, font, radius and size comes from the site theme; a theme change re-skins everything. */

/* ── 1. Tokens (EJ_TOKENS_V2) ─────────────────────────────────────────────── */
.ej-reader{
  --ej-ink:var(--color-text,#172b2b);
  --ej-muted:var(--color-text-muted,color-mix(in srgb,var(--ej-ink) 68%,transparent));
  --ej-accent:var(--color-accent,#166b65);
  --ej-accent-2:var(--color-accent-2,var(--ej-accent));
  --ej-paper:var(--color-bg,#fff);
  --ej-heading:var(--cms-section-heading-title-color,var(--color-dark-bg,var(--ej-ink)));
  --ej-line:color-mix(in srgb,var(--ej-ink) 13%,transparent);
  --ej-tint:color-mix(in srgb,var(--ej-accent) 7%,var(--ej-paper));
  --ej-card:color-mix(in srgb,var(--ej-accent-2) 5%,var(--ej-paper));
  --ej-card-line:color-mix(in srgb,var(--ej-accent-2) 22%,var(--ej-line));
  --ej-note:color-mix(in srgb,var(--ej-accent) 10%,var(--ej-paper));
  --ej-good:color-mix(in srgb,var(--color-success,#12825a) 88%,var(--ej-ink));
  --ej-bad:color-mix(in srgb,var(--color-danger,#b4304a) 88%,var(--ej-ink));
  --ej-radius:var(--radius,16px);
  --ej-radius-sm:calc(var(--ej-radius) * .7);
  --ej-font:var(--font-body,inherit);
  --ej-font-heading:var(--font-heading,var(--ej-font));
  /* Two widths, defined once. */
  --ej-measure:760px;
  --ej-wide:1100px;
  /* One rhythm. */
  --ej-space-section:clamp(40px,5vw,64px);
  --ej-space-block:28px;
  --ej-space-head:18px;
  --ej-h2:clamp(1.55rem,2.4vw,2.15rem);
  --ej-h3:clamp(1.15rem,1.55vw,1.35rem);
  --ej-text:17px;
  --ej-small:14px;
  color:var(--ej-ink);font-family:var(--ej-font);max-width:var(--ej-wide);margin-inline:auto
}
.ej-reader [hidden]{display:none!important}
.page-editorial-journey,html:has(.ej-reader),body:has(.ej-reader){overflow-x:clip}
.cms-section:has(.ej-reader),.fw-post-section--editorial-journey{overflow:visible}

/* ── 2. Layout (EJ_LAYOUT_V2) ─────────────────────────────────────────────── */
/* One width variable, switched by the parent: every section child reads --ej-col (reading column);
   enriched blocks switch it to the wide column; their head, intro and caption switch it back. */
.ej-reader .ej-section{display:flex;flex-direction:column;align-items:center;gap:var(--ej-space-block);margin:0;padding:var(--ej-space-section) 0;border-top:1px solid var(--ej-line);scroll-margin-top:calc(var(--ej-toolbar-height,80px) + 24px)}
.ej-reader :is(.ej-section,.ej-section__body,.ej-opening)>*{--ej-col:var(--ej-measure)}
.ej-reader :is(.ej-section,.ej-opening)>:is(.cms-tool-shell,.ej-compare,.ej-sim,.ej-diagram,.cms-content-table,.cms-content-matrix,.cms-content-figure,.ej-photo-comparison,.ej-block:has(>.ej-cards--gallery),.ej-block--example:has(.ej-card__media),.ej-wide){--ej-col:var(--ej-wide)}
.ej-reader :is(.ej-section,.ej-opening)>*>:is([data-component="section-heading"],.ej-diagram__head,.cms-content-table__copy,.cms-content-src__head,.cms-tool-shell__head),
.ej-reader :is(.ej-compare__note,.cms-content-figure__caption){--ej-col:var(--ej-measure)}
/* The only place that consumes --ej-col. !important: the site theme forces width/margins on these slots. */
.ej-reader :is(.ej-section,.ej-section__body,.ej-opening)>*,
.ej-reader :is(.ej-section,.ej-opening)>*>:is([data-component="section-heading"],.ej-diagram__head,.cms-content-table__copy,.cms-content-src__head,.cms-tool-shell__head),
.ej-reader :is(.ej-compare__note,.cms-content-figure__caption){box-sizing:border-box;width:min(100%,var(--ej-col))!important;max-width:none!important;margin-inline:auto!important}
.ej-reader :is(.ej-section,.ej-section__body,.ej-opening)>*{margin-block:0!important}
.ej-reader .ej-section>:is([data-component="section-heading"],.ej-section__copy:has(>[data-component="section-heading"])){order:-1}
/* Head → body rhythm, identical for the section and for every block. */
.ej-reader :is(.ej-section,.ej-opening)>*>[data-component="section-heading"],.ej-reader .ej-section>.ej-section__copy>[data-component="section-heading"]{margin-block:0 var(--ej-space-head)!important}
.ej-reader :is(.ej-compare__note,.cms-content-figure__caption){margin-top:12px!important}
.ej-reader .ej-section__copy>:first-child{margin-top:0}
.ej-reader .ej-section__copy>:last-child{margin-bottom:0}
.ej-reader .ej-section__body{width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--ej-space-block)}
.ej-reader .ej-section--flow>.ej-section__head>[data-component="section-heading"]{margin:0}

/* ── 3. Typography ────────────────────────────────────────────────────────── */
/* The shared heading contract forces block/100%/880px/one font with !important; inside the format the two-width layout wins. */
.ej-reader :is(.ej-section,.ej-opening) [data-component="section-heading"]{display:flex!important;flex-direction:column;gap:8px;max-width:none!important;padding:0!important;text-align:left}
.ej-reader [data-component="section-heading"]>.cms-section-heading__label{display:block;margin:0;color:var(--cms-section-heading-label-color,var(--ej-accent));font:800 12px/1.1 var(--ej-font);letter-spacing:.04em;text-transform:uppercase}
.ej-reader :is(.ej-section,.ej-opening) [data-component="section-heading"]>:is(h2,h3).cms-section-heading__title{max-width:none!important;margin:0;color:var(--ej-heading)!important;font:700 var(--ej-h2)/1.12 var(--ej-font-heading)!important;letter-spacing:-.018em;text-wrap:balance}
.ej-reader :is(.ej-section,.ej-opening) [data-component="section-heading"]>h3.cms-section-heading__title{font-size:var(--ej-h3)!important;line-height:1.25!important}
.ej-reader :is(.ej-section,.ej-opening) [data-component="section-heading"]>.cms-section-heading__intro{max-width:none!important;margin:4px 0 0;color:var(--ej-muted)!important;font:400 16px/1.65 var(--ej-font)!important}
.ej-reader .ej-section__copy>p,.ej-reader .ej-section>p{margin:0 0 20px;color:var(--ej-ink);font-size:var(--ej-text);line-height:1.8}
.ej-reader .ej-section__lead,.ej-reader .ej-section__copy>.ej-section__lead{font-size:19px;line-height:1.65;color:var(--ej-ink);margin:0 0 24px}
.ej-reader .ej-section__copy strong,.ej-opening__intro strong,.ej-section__head strong{font-weight:700;color:var(--ej-ink)}
.ej-reader .ej-section__copy>.ej-section__bridge{margin:12px 0 0;padding:0;border:0;background:none;font-size:16px;font-weight:600;line-height:1.7;text-align:center;text-wrap:pretty}
.ej-reader .ej-section__bridge-label{display:flex;justify-content:center;margin:0 0 8px;color:var(--cms-section-heading-label-color,var(--ej-accent));font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.ej-reader .ej-section__bridge-label svg{display:none}
.ej-reader :focus-visible{outline:3px solid var(--ej-accent);outline-offset:4px}

/* Opening */
.ej-opening{display:flex;flex-direction:column;align-items:center;gap:var(--ej-space-block);max-width:var(--ej-wide);margin:0 auto var(--ej-space-section)}
.ej-reader .ej-opening__intro{font-size:19px;line-height:1.7;text-wrap:pretty}
.ej-reader .ej-opening>p:not([class]){color:var(--ej-ink);font-size:var(--ej-text);line-height:1.8}
/* Action chips: jump links of the opening and calculator scenarios (one rule); separators of the source text dropped. */
.ej-reader .ej-opening__links{display:flex;flex-wrap:wrap;gap:10px;font-size:0}
.ej-reader :is(.ej-opening__links a,.ej-calc__scenario){display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--ej-card-line);border-radius:999px;background:var(--ej-card);color:var(--ej-heading);font:650 14px/1.2 var(--ej-font);text-decoration:none}
.ej-reader .ej-opening__links a::after{content:"";width:7px;height:7px;border-right:2px solid var(--ej-accent);border-bottom:2px solid var(--ej-accent);transform:rotate(45deg) translateY(-2px)}
.ej-reader :is(.ej-opening__links a,.ej-calc__scenario):hover,.ej-reader .ej-calc__scenario[aria-pressed="true"]{border-color:var(--ej-accent)}
.ej-reader .ej-calc__scenario[aria-pressed="true"]{background:var(--ej-note)}
.ej-opening>.cms-content-figure{margin:0;width:100%}

/* ── 4. Navigation: toolbar, chapters, controls, immersive and fullscreen ── */
.ej-toolbar{position:sticky;top:calc(var(--cms-header-height,72px) + 12px);z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:12px 16px;margin-bottom:32px;background:var(--ej-paper);border:1px solid var(--ej-line);border-radius:var(--ej-radius);box-shadow:0 6px 28px color-mix(in srgb,var(--ej-ink) 7%,transparent);overflow:hidden;isolation:isolate}
.ej-toolbar:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--ej-progress,0%);max-width:100%;background:var(--ej-accent);pointer-events:none}
.ej-toolbar__identity,.ej-toolbar__actions{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;white-space:nowrap}
.ej-toolbar__actions{justify-content:flex-end;min-width:0}
.ej-toolbar__dot{width:8px;height:8px;background:var(--ej-accent);border-radius:50%}
.ej-toolbar output{font-variant-numeric:tabular-nums;opacity:.65}
.ej-toolbar__paging{display:flex;align-items:center;gap:2px;white-space:nowrap}
.ej-reader :is(.ej-toolbar,.ej-controls) button{font:inherit;cursor:pointer;min-height:44px;padding:10px 14px;border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm);background:var(--ej-paper);color:var(--ej-ink)}
.ej-reader .ej-toolbar__paging button{min-width:32px;padding:6px;border-color:transparent;background:transparent}
.ej-reader :is(.ej-toolbar,.ej-controls) :is(button[data-ej-mode],button[data-ej-next]):not(.ej-toolbar__paging *){background:var(--ej-accent);border-color:var(--ej-accent);color:var(--color-on-accent,#fff)}
.ej-reader :is(.ej-toolbar,.ej-controls) button:disabled{opacity:.4;cursor:default}
.ej-reader [data-ej-fullscreen-exit]{display:grid;place-items:center;width:44px;padding:8px}
.ej-reader [data-ej-fullscreen-exit][hidden]{display:none}
.ej-reader [data-ej-fullscreen-exit] svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ej-controls{display:flex;align-items:center;justify-content:center;gap:clamp(22px,2.5vw,32px);padding:24px 0}
.ej-chapters{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:16px;margin-bottom:32px;background:var(--ej-tint);border-radius:var(--ej-radius)}
.ej-chapters:not([hidden]){position:fixed;z-index:40;top:var(--ej-toc-top,100px);left:var(--ej-toc-left,12px);width:min(720px,var(--ej-toc-width,calc(100vw - 24px)));max-height:calc(100vh - var(--ej-toc-top,100px) - 16px);margin:0;overflow:auto;border:1px solid var(--ej-line);box-shadow:0 18px 44px color-mix(in srgb,var(--ej-ink) 18%,transparent)}
.ej-reader .ej-chapters a{display:flex;align-items:baseline;gap:12px;min-height:48px;padding:12px;line-height:1.35;color:var(--ej-ink);font-size:14px;text-decoration:none;background:var(--ej-paper);border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm)}
.ej-reader .ej-chapters a[aria-current]{font-weight:700}
.ej-reader .ej-chapters a[aria-current="step"]{border-color:var(--ej-accent);box-shadow:inset 3px 0 var(--ej-accent)}
.ej-chapters__group{min-width:0;display:grid;align-content:start;gap:3px}
.ej-reader .ej-chapters .ej-chapters__subitem{min-height:0;margin-left:18px;padding:7px 10px;font-size:13px;background:transparent;border-color:transparent}
.ej-chapters__number{flex:none;font-variant-numeric:tabular-nums;font-weight:800;color:var(--ej-accent)}
.ej-chapters__label{min-width:0;text-wrap:pretty}
.ej-reader:fullscreen{max-width:none;width:100%;height:100%;overflow-y:auto;background:var(--ej-fullscreen-background,var(--ej-paper));padding:24px max(24px,calc((100vw - var(--ej-wide))/2))}
.ej-reader:fullscreen .ej-toolbar{top:12px}
.ej-reader--immersive .ej-section{border:0;min-height:60vh;padding-top:16px}
.ej-reader--immersive :is(.ej-section,.ej-opening):not([hidden]){animation:ej-enter .2s ease-out}
.ej-reader--immersive .ej-opening{min-height:60vh;padding-top:16px}
@keyframes ej-enter{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Reading modes (READER_MODE_V1): tool and reference pages have no presentation mode; the tool mode adds a
   shortcut to the first tool, styled as the shared action chip. */
.ej-reader:not(.ej-reader--guided):not(.ej-reader--decision) :is([data-ej-mode],[data-ej-fullscreen]){display:none}
.ej-reader .ej-reader__shortcut{width:min(100%,var(--ej-measure));margin:0 auto 24px}
.ej-reader .ej-reader__shortcut-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--ej-accent);color:var(--color-on-accent,#fff);font:750 15px/1.2 var(--ej-font);text-decoration:none}
.ej-reader .ej-reader__shortcut-link::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}

/* ── 5. Block families ────────────────────────────────────────────────────── */
/* Content blocks are not clickable cards: no hover motion anywhere (EJ_STATIC_CONTENT_BLOCKS_V1). */
/* One surface for every card and panel of the format. Variants only switch --ej-panel-* on their parent. */
:where(.ej-reader) :where(.ej-card,.ej-cards--reading-list,.ej-photo-comparison__item,.ej-diagram__link,.ej-diagram__choice,.ej-endnote__data,.ej-compare__table,.ej-sim__panel,.ej-author-panel,.cms-content-calc){background:var(--ej-panel-bg,var(--ej-card));border:1px solid var(--ej-panel-line,var(--ej-card-line));border-radius:var(--ej-panel-radius,var(--ej-radius));box-shadow:none}
.ej-reader .ej-block{display:flex;flex-direction:column}
.ej-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;align-items:stretch}
.ej-cards--gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* EJ_PROSCONS_STACK_V1: pros/limits cards are read one under the other, full width, each keeping its two columns. */
.ej-reader .ej-block--proscons>.ej-cards--gallery{grid-template-columns:1fr}
.ej-card{position:relative;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* A card is always dressed: tinted paper plus an accent rule, or its image. */
.ej-card:not(.ej-card--has-media)::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--ej-accent),color-mix(in srgb,var(--ej-accent) 35%,var(--ej-accent-2)))}
.ej-card__body{display:flex;flex-direction:column;gap:14px;flex:1;padding:22px}
.ej-reader .ej-card :is(h3,h4){margin:0;color:var(--ej-heading);font-family:var(--ej-font-heading);font-size:var(--ej-h3);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.ej-reader .ej-card p{margin:0;color:var(--ej-ink);font-size:16px;line-height:1.65}
.ej-card__label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ej-accent)}
.ej-reader .ej-card .ej-card__fact{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ej-accent)}
.ej-card__media{position:relative;margin:0;overflow:hidden;background:var(--ej-tint)}
.ej-card__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0;border-radius:0}
.ej-reader .ej-card__media figcaption{position:absolute;inset:auto 0 0;margin:0;padding:32px 18px 14px;font-size:12px;line-height:1.55;color:#fff;text-align:left;text-shadow:0 1px 2px #0006;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--color-dark-bg,#0c1d1d) 82%,transparent) 45%)}
.ej-card--has-media .ej-card__media{display:flex;flex-direction:column}
.ej-card--has-media .ej-card__media img{flex:1;height:100%;min-height:260px;aspect-ratio:auto}
.ej-cards:is(.ej-cards--mixed-media,.ej-cards--wide-rows){grid-template-columns:minmax(0,1fr)}
.ej-cards:is(.ej-cards--mixed-media,.ej-cards--wide-rows) .ej-card--has-media,.ej-block--example .ej-card--has-media{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
/* Mini fact sheet (no rule above the first line) and the "point clé" notes. */
.ej-card__facts{display:grid;margin:0;padding:4px 16px;border-radius:var(--ej-radius-sm);background:color-mix(in srgb,var(--ej-paper) 75%,var(--ej-card))}
.ej-card__facts>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;padding:11px 0;border-top:1px solid var(--ej-line)}
.ej-card__facts>div:first-child{border-top:0}
.ej-card__facts :is(dt,dd){margin:0;font-size:14px;line-height:1.5}
.ej-card__facts dd{text-align:right;font-weight:700}
.ej-card__guidance{display:grid;gap:10px}
.ej-reader .ej-card .ej-card__note{padding:var(--ej-note-pad,16px 18px);border-left:var(--ej-note-rule,0);border-radius:var(--ej-note-radius,var(--ej-radius-sm));background:var(--ej-note-bg,var(--ej-note));font-size:15px;line-height:1.6}
.ej-reader .ej-card__note-label{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--ej-accent);font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.4;text-transform:uppercase}
.ej-reader .ej-card__note-label svg{display:block;flex:none;width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round}
.ej-card__palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ej-card__swatch{min-width:0;display:grid;grid-template-rows:44px auto;overflow:hidden;border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm);background:var(--ej-paper)}
.ej-card__swatch-color{display:block}
.ej-card__swatch-label{display:grid;gap:2px;padding:8px 9px;font-size:12px;font-weight:700;line-height:1.2}
.ej-card__swatch-label small{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ej-muted)}

/* Reading list (steps, checklist, takeaway, single example): the list is the panel, its cards are rows. */
.ej-cards--reading-list{display:flex;flex-direction:column;gap:0;padding:6px 24px}
.ej-cards--reading-list>.ej-card{--ej-panel-bg:transparent;--ej-panel-line:transparent;--ej-panel-radius:0;--ej-note-pad:0 0 0 14px;--ej-note-rule:2px solid var(--ej-accent);--ej-note-radius:0;--ej-note-bg:transparent;border-top-color:var(--ej-line)}
.ej-cards--reading-list>.ej-card::before{display:none}
.ej-cards--reading-list>.ej-card:first-child{border-top-color:transparent}
.ej-cards--reading-list .ej-card__body{padding:18px 0;gap:8px}
.ej-cards--reading-list .ej-card--has-media{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:18px}
.ej-cards--reading-list .ej-card--has-media .ej-card__body{padding:0}
/* Variants: a class on the block, variables only. */
.ej-block--takeaway{--ej-panel-bg:var(--ej-note);--ej-panel-line:transparent}
.ej-block--takeaway .ej-cards--reading-list{border-left:4px solid var(--ej-accent)}
.ej-block--example{--ej-panel-bg:color-mix(in srgb,var(--ej-accent-2) 10%,var(--ej-paper))}
.ej-block--example .ej-cards{grid-template-columns:minmax(0,1fr)}
/* Steps own their numbering: the theme numbers every content <ol> with !important. */
.ej-reader .ej-block--steps ol.ej-cards{margin:0!important;padding:6px 24px!important;list-style:none!important;counter-reset:none!important}
.ej-reader .ej-block--steps ol.ej-cards>li.ej-card{margin:0!important;padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;list-style:none!important;counter-increment:none!important}
.ej-reader .ej-block--steps ol.ej-cards>li.ej-card::before{content:none!important;display:none!important}
/* The theme also removes every <li> border with !important: restore the row rule of the reading list. */
.ej-reader .ej-block--steps ol.ej-cards>li.ej-card+li.ej-card{border-top:1px solid var(--ej-line)!important}
.ej-reader :is(.ej-block--steps,.ej-block--checklist) .ej-card__body{position:relative;display:flex;padding-left:42px}
/* One marker for both lists: a numbered chip for steps, a check for the checklist. */
.ej-reader .ej-block--checklist .ej-card__body::before{content:""}
.ej-reader .ej-block--steps .ej-card__number,.ej-reader .ej-block--checklist .ej-card__body::before{position:absolute;left:0;top:18px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ej-note);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ej-accent) 30%,transparent);color:var(--ej-accent);font:800 13px/1 var(--ej-font)}
.ej-reader .ej-block--checklist .ej-card__body::after{content:"";position:absolute;left:11px;top:25px;width:5px;height:10px;border-right:2.5px solid var(--ej-accent);border-bottom:2.5px solid var(--ej-accent);transform:rotate(45deg)}

/* Pros and cons, compare, simulator: see ej-decision.css (same tokens). */

/* Photo comparison */
.ej-photo-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ej-photo-comparison__item{min-width:0;margin:0;padding:16px}
.ej-reader .ej-photo-comparison__item h3{display:flex;align-items:center;gap:10px;margin:0 0 13px;font-size:var(--ej-h3);line-height:1.3;color:var(--ej-heading)}
.ej-photo-comparison__status{display:grid;flex:none;place-items:center;width:29px;height:29px;border-radius:50%;background:color-mix(in srgb,var(--ej-bad) 12%,var(--ej-paper));color:var(--ej-bad)}
.ej-photo-comparison__item[data-assessment="prefer"] .ej-photo-comparison__status{background:color-mix(in srgb,var(--ej-good) 12%,var(--ej-paper));color:var(--ej-good)}
.ej-photo-comparison__status svg{width:15px;height:15px}
.ej-photo-comparison__visual{position:relative;overflow:hidden;border-radius:var(--ej-radius-sm);background:var(--ej-tint)}
.ej-reader .ej-photo-comparison__visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;border:0;border-radius:0}
.ej-photo-comparison__annotation{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--color-dark-bg,#132522) 88%,transparent);color:#fff;font-size:13px;font-weight:700;line-height:1.35}
.ej-reader .ej-photo-comparison__item figcaption{margin:11px 1px 1px;font-size:13px;line-height:1.5;color:var(--ej-muted)}

/* Figures and tables inside the format: wide body, caption in the reading column. */
.ej-reader .ej-section>.cms-content-figure img{border-radius:var(--ej-radius)}
.ej-reader .cms-content-figure__caption{color:var(--ej-muted);font-size:13px;line-height:1.55;text-align:center}
.ej-reader .cms-content-table__copy>.cms-section-heading{margin:0 0 var(--ej-space-head)!important}
.ej-reader .cms-content-table__copy:last-child{margin-top:12px!important}

/* Diagram (editorial-diagram): head in the reading column, items in the wide column. */
.ej-diagram{min-width:0;margin:0;color:var(--ej-ink)}
.ej-diagram>[data-component="section-heading"]{margin-bottom:var(--ej-space-head)}
.ej-diagram__head{margin:0 auto var(--ej-space-head)}
.ej-diagram__head h2,.ej-diagram__head h3{margin:0 0 8px;font-size:var(--ej-h3);line-height:1.25;color:var(--ej-heading)}
.ej-diagram__head p{margin:0;font-size:15px;line-height:1.6;color:var(--ej-muted)}
.ej-diagram__items{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.ej-diagram--comparison .ej-diagram__items{grid-template-columns:repeat(2,minmax(0,1fr))}
.ej-diagram--layers .ej-diagram__items{grid-template-columns:repeat(3,minmax(0,1fr))}
.ej-diagram--sequence .ej-diagram__items{grid-template-columns:repeat(3,minmax(0,1fr))}
.ej-diagram--grid-4 .ej-diagram__items{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
/* EJ_FOUR_ITEMS_V1 (Julien): exactly four diagram items or gallery cards read two by two on desktop (2 + 2 rather than 3 + 1). */
@media(min-width:851px){.ej-reader :is(.ej-diagram__items,.ej-cards--gallery):has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.ej-diagram__item{position:relative;min-width:0;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;list-style:none!important}
.ej-diagram__item::before{display:none!important;content:none!important}
.ej-diagram--sequence .ej-diagram__item:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:8px;border-right:2px solid var(--ej-accent);border-bottom:2px solid var(--ej-accent);transform:translateY(-50%) rotate(-45deg);pointer-events:none}
.ej-diagram--sequence:not(.ej-diagram--grid-4) .ej-diagram__item:nth-child(3n)::after,.ej-diagram--grid-4 .ej-diagram__item:nth-child(4n)::after{display:none}
.ej-diagram__link{box-sizing:border-box;height:100%;min-height:132px;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-content:start;padding:16px;color:inherit;text-decoration:none!important}
.ej-diagram__number{grid-column:1;grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ej-accent);color:var(--color-on-accent,#fff);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ej-diagram__motif{display:none}
.ej-diagram__label{grid-column:2;display:block;margin:4px 0 0;font-weight:750;font-size:16px;line-height:1.3;color:var(--ej-heading)}
.ej-diagram__body{grid-column:2;display:block;margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ej-muted)}
a.ej-diagram__link:focus-visible{border-color:var(--ej-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ej-accent) 18%,transparent)}
.ej-diagram__choice{width:100%;display:flex;flex-direction:column;gap:10px;padding:10px;text-align:left;color:var(--ej-ink);font:inherit}
.ej-diagram__choice:disabled{cursor:default;opacity:1}
.ej-diagram__item[data-diagram-active="1"]{--ej-panel-line:var(--ej-accent)}
.ej-diagram__item[data-diagram-active="1"] .ej-diagram__choice{box-shadow:0 0 0 3px color-mix(in srgb,var(--ej-accent) 11%,transparent)}
.ej-diagram__choice .ej-diagram__label{margin:0;padding:0 8px 4px}
.ej-diagram__item>.ej-diagram__body{margin:10px 9px 0}
.ej-diagram__scene{position:relative;display:block;width:100%;aspect-ratio:2.3;background:var(--ej-tint);border-radius:var(--ej-radius-sm);overflow:hidden}
.ej-diagram__scene::before,.ej-diagram__scene::after{content:"";position:absolute}
.ej-diagram__scene i{position:absolute;display:block}
.ej-diagram__scene:not(:is(.ej-diagram__scene--blocked,.ej-diagram__scene--clear,.ej-diagram__scene--scattered,.ej-diagram__scene--single,.ej-diagram__scene--general,.ej-diagram__scene--task,.ej-diagram__scene--ambient)){display:none}
/* Illustrated scenes keep their own pictorial colours (they depict objects, not the theme). */
.ej-diagram__scene--blocked,.ej-diagram__scene--clear{background:linear-gradient(90deg,#e8dfd1 0 12%,#f5f0e7 12% 88%,#dbe7e1 88%)}
.ej-diagram__scene--blocked i:nth-child(1),.ej-diagram__scene--clear i:nth-child(1){inset:20% auto auto 26%;width:29%;height:25%;border-radius:9px;background:#92745f}
.ej-diagram__scene--blocked i:nth-child(2),.ej-diagram__scene--clear i:nth-child(2){inset:55% 12% auto auto;width:24%;height:22%;border-radius:9px;background:#907c65}
.ej-diagram__scene--blocked i:nth-child(3){inset:45% auto auto 43%;width:18%;height:34%;border-radius:50%;background:#ba7a55}
.ej-diagram__scene--clear i:nth-child(3){inset:60% auto auto 18%;width:17%;height:27%;border-radius:50%;background:#ba7a55}
.ej-diagram__scene--blocked::after,.ej-diagram__scene--clear::after{inset:49% 9% auto 9%;height:0;border-top:4px dashed var(--ej-accent);transform:rotate(-8deg)}
.ej-diagram__scene--blocked::after{right:42%;border-color:#b55d43}
.ej-diagram__scene--blocked::before{z-index:1;inset:41% auto auto 59%;width:18px;height:18px;border:3px solid #b55d43;border-radius:50%;background:#fff}
.ej-diagram__scene--scattered,.ej-diagram__scene--single{background:linear-gradient(#eee6da 0 76%,#aa8b70 76% 100%)}
.ej-diagram__scene--scattered i:nth-child(1){inset:16% auto auto 13%;width:19%;height:34%;background:#be7156;box-shadow:0 0 0 5px #fdfaf4}
.ej-diagram__scene--scattered i:nth-child(2){inset:8% auto auto 45%;width:14%;height:43%;background:#6f7770;box-shadow:0 0 0 5px #fdfaf4}
.ej-diagram__scene--scattered i:nth-child(3){inset:24% 10% auto auto;width:19%;height:29%;background:#b2a370;box-shadow:0 0 0 5px #fdfaf4}
.ej-diagram__scene--single i:nth-child(1){inset:10% auto auto 39%;width:25%;height:43%;background:#ad704f;box-shadow:0 0 0 5px #fdfaf4}
.ej-diagram__scene--single i:nth-child(2){inset:auto 10% 13% auto;width:21%;height:13%;border-radius:50%;background:#6f775c}
.ej-diagram__scene--general,.ej-diagram__scene--task,.ej-diagram__scene--ambient{background:linear-gradient(#ded5c8 0 73%,#aa8b70 73% 100%)}
.ej-diagram__scene--general i:nth-child(1),.ej-diagram__scene--task i:nth-child(1),.ej-diagram__scene--ambient i:nth-child(1){inset:50% auto auto 20%;width:45%;height:28%;border-radius:18px 18px 2px 2px;background:#81776d}
.ej-diagram__scene--general::after{inset:-12% 28% 8%;background:radial-gradient(ellipse at top,#fff5bbad,transparent 65%)}
.ej-diagram__scene--task::after{inset:8% 6% 14% 62%;background:radial-gradient(ellipse at top,#fff2a9b8,transparent 68%)}
.ej-diagram__scene--ambient::after{inset:32% 48% 9% 5%;background:radial-gradient(ellipse at bottom,#f6bb8ba8,transparent 72%)}
.ej-diagram__scene--general i:nth-child(2){inset:0 auto auto 45%;height:24%;border-left:3px solid #6c635e}
.ej-diagram__scene--task i:nth-child(2){inset:24% 16% auto auto;height:53%;border-left:3px solid #6c635e}
.ej-diagram__scene--ambient i:nth-child(2){inset:56% auto auto 5%;width:18%;height:16%;border-radius:50%;background:#edbd89}
.ej-diagram__carousel-controls{display:none}

/* Deep dive: an invitation in the reading column, a focused overlay on demand. */
.ej-reader .ej-deep-dive__invitation{text-align:center}
.ej-reader .ej-deep-dive__invitation::before{content:"Pour approfondir";display:block;margin:0 0 10px;color:var(--ej-accent);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.ej-reader .ej-deep-dive__invitation .ej-deep-dive__intro{margin:0 0 16px;font-size:16px;line-height:1.75;text-align:left}
.ej-reader .ej-deep-dive{width:100%;margin:0}
.ej-reader .ej-deep-dive>summary{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;max-width:100%;min-height:46px;padding:13px 18px;border:1px solid transparent;border-radius:var(--wi2-action-radius,var(--ej-radius-sm));background:var(--color-dark-bg,var(--ej-ink));color:var(--color-dark-text,#fff);font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;list-style:none}
.ej-deep-dive>summary::-webkit-details-marker{display:none}
.ej-deep-dive__cta-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ej-deep-dive__overlay{margin-top:10px;text-align:left}
.ej-deep-dive__overlay[data-ej-open="0"]{display:none!important}
.ej-deep-dive__overlay[data-ej-open="1"]{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:24px 16px;background:color-mix(in srgb,var(--color-dark-bg,#091211) 70%,transparent);overflow:hidden;overscroll-behavior:contain}
.ej-deep-dive__panel{position:relative;box-sizing:border-box;padding:30px;border:1px solid var(--ej-line);border-radius:calc(var(--ej-radius) + 2px);background:var(--ej-paper);color:var(--ej-ink);font-family:var(--ej-font);box-shadow:0 14px 40px color-mix(in srgb,var(--ej-ink) 16%,transparent)}
.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__panel{flex:none;width:min(680px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ej-accent) var(--ej-tint)}
.ej-deep-dive__panel h3{margin:.15rem 3rem .75rem 0;color:var(--ej-heading)}
.ej-deep-dive__panel p{font-size:15px;line-height:1.65}
.ej-deep-dive__eyebrow{margin:0 0 .35rem;color:var(--ej-accent);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ej-deep-dive__summary{font-weight:650}
.ej-deep-dive__close{display:none}
.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm);background:var(--ej-paper);color:var(--ej-ink);font-size:20px;cursor:pointer}
.ej-deep-dive__checks{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none;counter-reset:deep-check}
/* EJ_DEEP_DIVE_LISTS_V2: a plain list written in a deep-dive panel reads as a list of the format (accent markers), not raw
   bullets. Not scoped to .ej-reader: the open panel is moved out of the reader, like the checks list above. */
.ej-deep-dive__panel>:is(ul,ol):not(.ej-deep-dive__checks){display:grid;gap:8px;margin:18px 0 0;padding:16px 18px;border-radius:var(--ej-radius-sm,10px);background:var(--ej-tint,color-mix(in srgb,var(--color-accent,#166b65) 7%,#fff));list-style:none}
.ej-deep-dive__panel>:is(ul,ol):not(.ej-deep-dive__checks)>li{position:relative;margin:0;padding:0 0 0 22px;border:0;background:none;font-size:15px;line-height:1.55;list-style:none}
.ej-deep-dive__panel>:is(ul,ol):not(.ej-deep-dive__checks)>li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ej-accent,var(--color-accent,#166b65))}
.ej-deep-dive__checks li{position:relative;display:grid;gap:5px;margin:0;padding:14px 16px 14px 50px;border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm);background:var(--ej-tint);font-size:15px;line-height:1.55;counter-increment:deep-check}
.ej-deep-dive__checks li::before{content:counter(deep-check,decimal-leading-zero);position:absolute;top:14px;left:15px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--ej-accent);color:var(--color-on-accent,#fff);font-size:11px;font-weight:700}
.ej-deep-dive__checks strong{font-size:16px}
.ej-deep-dive__media{margin:17px 0 20px}
.ej-deep-dive__media img{display:block;width:100%;max-height:225px;object-fit:cover;border-radius:var(--ej-radius-sm)}
.ej-deep-dive__media figcaption{margin-top:6px;color:var(--ej-muted);font-size:12px;line-height:1.45}
.ej-deep-dive__footer{display:none}
.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__footer{display:flex;justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--ej-line)}
.ej-deep-dive__footer-close{min-height:38px;padding:8px 16px;border:1px solid var(--ej-line);border-radius:var(--ej-radius-sm);background:var(--ej-paper);color:var(--ej-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
body.ej-deep-dive-open{overflow:hidden}

/* FAQ in a section (EJ_SECTION_FAQ_V2): reads like the section copy — no card, no bordered button, no repeated label. */
.ej-reader .ej-section .cms-content-faq{--cms-content-surface-background:transparent;--cms-content-surface-shadow:none;--cms-content-surface-padding:0;--cms-content-surface-radius:0;--cms-content-surface-border:0;padding:0;background:none;border:0;box-shadow:none}
.ej-reader .ej-section :is(.cms-content-faq__eyebrow,.cms-content-faq__deco){display:none}
.ej-reader .ej-section .cms-content-faq__item{margin:0;border:0;border-top:1px solid var(--ej-line);border-radius:0;background:none;box-shadow:none}
.ej-reader .ej-section .cms-content-faq__item:last-child{border-bottom:1px solid var(--ej-line)}
.ej-reader .ej-section .cms-content-faq__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;min-height:0;margin:0;padding:18px 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ej-heading);font:700 17px/1.4 var(--ej-font);text-align:left;cursor:pointer}
.ej-reader .ej-section .cms-content-faq__icon{flex:none;width:18px;height:18px;color:var(--ej-accent)}
.ej-reader .ej-section .cms-content-faq__answer-inner{padding:0 0 18px;color:var(--ej-ink);font-size:16px;line-height:1.75}

/* Legacy surface components inside the format (summary, checklist panel, comparison panel, sources…) take the
   format panel through the surface's own variables (the surface rule lives in a cascade layer). */
.ej-reader{--cms-content-surface-background:var(--ej-card);--cms-content-surface-shadow:none;--cms-content-surface-radius:var(--ej-radius);--cms-content-surface-border:1px solid var(--ej-card-line)}

/* ── 6. Closing blocks: Sources → Données → Avertissement (EJ_ENDNOTES_V1) ── */
.ej-endnote{display:flex;flex-direction:column}
.ej-endnote__list{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:ej-source}
.ej-endnote__list>.ej-endnote__item{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:12px 0;border-top:1px solid var(--ej-line);counter-increment:ej-source}
.ej-endnote__list>.ej-endnote__item:first-child{border-top:0;padding-top:0}
.ej-endnote__list>.ej-endnote__item::before{content:counter(ej-source);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ej-tint);color:var(--ej-accent);font-size:12px;font-weight:800}
.ej-endnote__name{font-weight:700;color:var(--ej-heading);text-decoration-color:color-mix(in srgb,var(--ej-accent) 45%,transparent);text-underline-offset:3px}
.ej-endnote__meta{display:block;margin-top:2px;color:var(--ej-muted);font-size:var(--ej-small);line-height:1.5}
.ej-endnote__data{display:grid;margin:0;overflow:hidden}
.ej-endnote__data>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:12px 18px;border-top:1px solid var(--ej-line)}
.ej-endnote__data dt{flex:1 1 300px;min-width:0}
.ej-endnote__data dd{flex:0 1 auto;text-align:right}
.ej-endnote__data>div:first-child{border-top:0}
.ej-endnote__data :is(dt,dd){margin:0;font-size:15px;line-height:1.5}
.ej-endnote__data dd{font-weight:700;font-variant-numeric:tabular-nums}
.ej-endnote__data .ej-endnote__date{font-weight:500;color:var(--ej-muted);font-size:var(--ej-small)}
.ej-endnote:is(.ej-endnote--disclaimer,.ej-endnote--method) .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);background:var(--ej-tint);color:var(--ej-ink);font-size:15px;line-height:1.65}
.ej-endnote:is(.ej-endnote--disclaimer,.ej-endnote--method) .ej-endnote__text svg{width:22px;height:22px;margin-top:1px;color:var(--ej-accent);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Closing author panel and "À lire ensuite" (EDITORIAL_CLOSING_V1). */
.ej-outro{display:grid;gap:40px;margin-top:32px}
.ej-outro__group{display:grid;gap:24px;min-width:0}
.ej-outro__readings{gap:24px;align-items:stretch}
.ej-author-panel{padding:28px 32px}
.ej-author-panel .ws-author{display:flex;align-items:flex-start;gap:24px;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.ej-author-panel .ws-author__media{display:block;flex:0 0 80px}
.ej-author-panel .ws-author__avatar{display:block;width:80px;height:80px;max-width:none;object-fit:cover;border-radius:50%;margin:0;border:3px solid var(--ej-paper)}
.ej-author-panel .ws-author__body{flex:1;min-width:0}
.ej-author-panel .ws-label{display:block;margin:0 0 8px;font-size:11px;letter-spacing:.09em;color:var(--ej-accent)}
.ej-author-panel .ws-author__name{display:inline-block;margin:0;font-size:21px;font-weight:700;line-height:1.35;color:var(--ej-heading);text-decoration:none}
.ej-author-panel .ws-author__name:hover{text-decoration:underline;text-underline-offset:4px}
.ej-author-panel p.ws-author__bio{max-width:75ch;margin:12px 0 0;font-size:15px;line-height:1.75}

/* ── 7. Mobile, motion, print ─────────────────────────────────────────────── */
@media(max-width:850px){.ej-diagram--layers .ej-diagram__items{grid-template-columns:1fr}.ej-diagram--layers .ej-diagram__scene{aspect-ratio:3.5}}
@media(max-width:767px){
  .ej-reader .ej-toolbar__paging button:is([data-ej-prev],[data-ej-next]){display:grid;place-items:center;flex:none;box-sizing:border-box;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;font-size:0;line-height:0}
  .ej-reader .ej-toolbar__paging button:is([data-ej-prev],[data-ej-next])::before{content:"";display:block;box-sizing:border-box;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor}
  .ej-reader .ej-toolbar__paging button[data-ej-prev]::before{transform:translateX(1px) rotate(-135deg)}
  .ej-reader .ej-toolbar__paging button[data-ej-next]::before{transform:translateX(-1px) rotate(45deg)}
  /* Diagrams become a two-card carousel. */
  .ej-diagram .ej-diagram__items{position:relative;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ej-diagram .ej-diagram__items::-webkit-scrollbar{display:none}
  .ej-diagram .ej-diagram__item{box-sizing:border-box;flex:0 0 calc((100% - 12px)/2);scroll-snap-align:start}
  .ej-diagram .ej-diagram__item::after{display:none!important}
  .ej-diagram .ej-diagram__link{grid-template-columns:1fr;grid-template-rows:none;align-content:start;row-gap:8px;min-height:170px;padding:14px;overflow-wrap:anywhere}
  .ej-diagram .ej-diagram__link>*{grid-column:1!important;grid-row:auto!important}
  .ej-diagram[data-carousel-ready="1"] .ej-diagram__carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
  .ej-diagram__carousel-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--ej-line);border-radius:50%;background:var(--ej-paper);color:var(--ej-ink);font:inherit;font-size:23px;line-height:1;cursor:pointer}
  .ej-diagram__carousel-controls button:disabled{opacity:.35;cursor:default}
  .ej-diagram__carousel-controls output{min-width:42px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
}
@media(max-width:719px){.ej-deep-dive__overlay[data-ej-open="1"]{padding:12px}.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__panel{max-height:calc(100dvh - 24px);padding:22px 18px}}
@media(max-width:700px){
  .ej-reader{--ej-space-block:24px;--ej-text:16px}
  .ej-toolbar{top:calc(var(--cms-header-height,72px) + 6px);grid-template-columns:1fr;gap:8px;padding:10px;margin-bottom:16px}
  .ej-reader:fullscreen .ej-toolbar{top:6px}
  .ej-reader .ej-toolbar__identity{justify-content:center;flex-wrap:nowrap;gap:4px}
  .ej-toolbar__dot{display:none}
  .ej-reader .ej-toolbar__actions{justify-content:space-between;flex-wrap:nowrap;gap:4px}
  .ej-reader .ej-toolbar__actions button{font-size:11px;padding:8px}
  .ej-reader .ej-toolbar__actions [data-ej-fullscreen]{padding:6px}
  .ej-toolbar output{font-size:11px;white-space:nowrap}
  .ej-controls{font-size:13px}
  .ej-reader .ej-section__lead,.ej-reader .ej-opening__intro{font-size:17px}
  .ej-cards,.ej-cards--gallery,.ej-photo-comparison{grid-template-columns:1fr}
  .ej-card__body{padding:20px}
  .ej-cards--reading-list{padding:4px 18px}
  .ej-cards:is(.ej-cards--mixed-media,.ej-cards--wide-rows,.ej-cards--reading-list) .ej-card--has-media,.ej-block--example .ej-card--has-media{grid-template-columns:1fr;gap:16px}
  .ej-card--has-media .ej-card__media img{height:auto;min-height:0;aspect-ratio:3/2}
  .ej-photo-comparison__item{padding:13px}
  .ej-endnote__data dd{text-align:left}
  .ej-outro{gap:30px}
  .ej-author-panel{padding:22px}
  .ej-author-panel .ws-author{display:grid;grid-template-columns:1fr;gap:16px}
  .ej-author-panel .ws-author__avatar{width:64px;height:64px}
  .ej-outro__readings{grid-template-columns:minmax(0,1fr)}
}
/* EJ_ENDNOTE_METHOD_V1: how the page was produced, at the bottom before the disclaimer — same box, its own background. */
.ej-endnote--method .ej-endnote__text{background:color-mix(in srgb,var(--ej-accent-2,var(--ej-accent)) 9%,var(--ej-paper))}
.ej-endnote--method .ej-endnote__text svg{color:var(--ej-accent-2,var(--ej-accent))}
.ej-endnote:is(.ej-endnote--method,.ej-endnote--disclaimer) .ej-endnote__text+.ej-endnote__text{margin-top:8px}
/* EJ_NOTE_V1: discreet aside (explanation, example, definition, tip) in the reading column. */
.ej-note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:16px 18px;border:0;border-radius:var(--ej-radius-sm,10px);background:var(--ej-tint);color:var(--ej-ink)}
.ej-note--exemple{background:color-mix(in srgb,var(--ej-accent-2,var(--ej-accent)) 7%,var(--ej-paper))}
.ej-note__icon{width:20px;height:20px;margin-top:2px;color:var(--ej-accent);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ej-note--exemple .ej-note__icon{color:var(--ej-accent-2,var(--ej-accent))}
.ej-note__body{margin:0;font-size:15px;line-height:1.6}
.ej-note__label{display:block}
/* EJ_ASIDE_FAMILY_V1 (Julien 2026-10-06): one look for every small aside of a slide — notes (explication, exemple,
   définition, astuce) and the slide end band, on the endnote box of the charter: flat tint, rounded corners, icon,
   small-caps accent label,
   15 px body text. The end band is the same panel holding its lines, separated by thin rules; its label sits above. */
:root{--ej-aside-label-size:11px}
.ej-reader .ej-section>.ej-section__end{--ej-col:var(--ej-measure);width:min(100%,var(--ej-measure))!important;max-width:var(--ej-measure)!important;margin-inline:auto!important;display:grid;padding:2px 18px;border:0;border-radius:var(--ej-radius-sm,10px);background:var(--ej-tint)}
.ej-section__end .ej-end-card{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;margin:0;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--ej-accent) 16%,transparent);background:none;text-align:left;color:var(--ej-ink)}
.ej-section__end .ej-end-card:first-child{border-top:0}
.ej-section__end .ej-end-card__icon{display:block;width:20px;height:20px;margin-top:1px;color:var(--ej-accent)}
.ej-section__end .ej-end-card__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ej-section__end .ej-end-card__body{display:grid;gap:4px;min-width:0}
.ej-section__end .ej-end-card__body>*{margin:0}
.ej-section__end :is(.ej-end-card__label,.ej-section__bridge-label,.ej-readalso__label),.ej-note__label{display:block;margin:0;color:var(--ej-accent);font-size:var(--ej-aside-label-size);font-weight:800;letter-spacing:.1em;line-height:1.5;text-transform:uppercase}
.ej-section__end .ej-section__bridge-label svg{display:none}
/* One body text for every line (and for the notes). */
.ej-section__end :is(.ej-deep-dive__intro,.ej-readalso__text),.ej-section__end .ej-end-card--bridge .ej-section__bridge,.ej-note__body{font-size:15px;font-weight:400;line-height:1.6;color:var(--ej-ink);text-align:left}
.ej-section__end .ej-end-card--bridge .ej-section__bridge{display:grid;gap:4px;margin:0;padding:0;border:0;background:none}
.ej-reader .ej-section__end .ej-deep-dive__invitation::before{content:none}
/* « Pour approfondir »: the deep dive opens from a quiet text action, not a dark button. */
.ej-section__end .ej-deep-dive{justify-self:start;margin:0}
.ej-reader .ej-section__end .ej-deep-dive>summary.wi2-btn{display:inline-flex;align-items:center;gap:8px;min-height:0;padding:7px 14px;border:0;border-radius:var(--ej-radius-sm,8px);background:color-mix(in srgb,var(--ej-accent) 82%,#000);box-shadow:none;color:#fff;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;cursor:pointer}
.ej-reader .ej-section__end .ej-deep-dive>summary.wi2-btn:hover{background:color-mix(in srgb,var(--ej-accent) 70%,#000);color:#fff}
.ej-reader .ej-section__end .ej-deep-dive>summary .ej-deep-dive__cta-icon{width:16px;height:16px}
.ej-section__end .ej-readalso__text a{font-weight:700;color:var(--ej-heading);text-decoration-color:color-mix(in srgb,var(--ej-accent) 45%,transparent);text-underline-offset:3px}
.ej-note .ej-note__label{margin-bottom:4px}
/* EJ_SECTION_END_V2_END */
@media(prefers-reduced-motion:reduce){.ej-reader--immersive :is(.ej-section,.ej-opening){animation:none}}
@media print{
  .ej-toolbar,.ej-chapters,.ej-controls,.ej-diagram__carousel-controls{display:none!important}
  .ej-reader [data-editorial-section][hidden]{display:flex!important}
  .ej-card,.ej-diagram__link,.ej-diagram__choice{break-inside:avoid;box-shadow:none!important}
  .ej-section{min-height:0!important}
  .ej-diagram .ej-diagram__items{display:grid;overflow:visible}
}

/* 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)}

/* EJ_BUTTONS_SHAPE_V1 (Julien 2026-10-07): the trigger « Pour approfondir » and the buttons of the dialog take the site's
   button shape (same chain as every CTA), the close button is round; no square button left in a dialog. */
:root{--ej-action-radius:var(--wi2-action-radius,var(--cms-ds-action-radius,var(--style-button-radius,var(--ej-radius-sm,10px))))}
.ej-reader .ej-section__end .ej-deep-dive>summary.wi2-btn,.ej-reader .ej-deep-dive>summary{border-radius:var(--ej-action-radius)}
.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__close{border-radius:999px;line-height:1;transition:background .18s,color .18s}
.ej-deep-dive__overlay[data-ej-open="1"] .ej-deep-dive__close:hover{background:var(--color-dark-bg,var(--ej-heading));color:var(--color-dark-text,#fff)}
.ej-deep-dive__footer-close{min-height:42px;padding:9px 18px;border-radius:var(--ej-action-radius);transition:background .18s,color .18s}
.ej-deep-dive__footer-close:hover{background:var(--color-dark-bg,var(--ej-heading));border-color:transparent;color:var(--color-dark-text,#fff)}
.ej-deep-dive__close:focus-visible,.ej-deep-dive__footer-close:focus-visible{outline:3px solid var(--color-accent,var(--ej-accent));outline-offset:2px}
/* EJ_FOCUS_QUIET_V1: the reader moves the focus to each step for screen readers (tabindex=-1); no visible frame for
   that programmatic focus — a keyboard user keeps the visible ring on real controls. */
.ej-reader [tabindex="-1"]:focus,.ej-reader [tabindex="-1"]:focus-visible{outline:none}

/* EJ_TOOLBAR_V3 (Julien 2026-10-07) — the reading toolbar's main actions are clear-cut: « Mode présentation » and the
   presentation « Suivant » on the theme's dark colour with light text (never ink on accent), an icon on « Mode
   présentation » and « Sommaire » (CSS mask, current colour). */
.ej-reader :is(.ej-toolbar,.ej-controls) :is(button[data-ej-mode],button[data-ej-next]):not(.ej-toolbar__paging *){background:var(--color-dark-bg,var(--ej-heading));border-color:var(--color-dark-bg,var(--ej-heading));color:var(--color-dark-text,#fff);font-weight:700;transition:background .18s,border-color .18s}
.ej-reader :is(.ej-toolbar,.ej-controls) :is(button[data-ej-mode],button[data-ej-next]):not(.ej-toolbar__paging *):hover:not(:disabled){background:color-mix(in srgb,var(--color-dark-bg,var(--ej-heading)) 82%,var(--color-accent,var(--ej-accent)));border-color:transparent}
.ej-reader .ej-toolbar :is(button[data-ej-mode],button[data-ej-toc-toggle]){display:inline-flex;align-items:center;gap:8px}
.ej-reader .ej-toolbar :is(button[data-ej-mode],button[data-ej-toc-toggle])::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ej-icon) center/contain no-repeat;mask:var(--ej-icon) center/contain no-repeat}
.ej-reader .ej-toolbar button[data-ej-mode]{--ej-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='m10 8 4 2-4 2z' fill='black'/%3E%3Cpath d='M12 16v4M8 20h8'/%3E%3C/svg%3E")}
.ej-reader .ej-toolbar button[data-ej-toc-toggle]{--ej-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.2' fill='black'/%3E%3Ccircle cx='4.5' cy='12' r='1.2' fill='black'/%3E%3Ccircle cx='4.5' cy='18' r='1.2' fill='black'/%3E%3C/svg%3E")}
.ej-reader .ej-toolbar button[data-ej-toc-toggle][aria-expanded="true"]{border-color:var(--color-accent,var(--ej-accent));color:var(--ej-heading)}

/* EJ_TOC_V3 — the open contents: a panel under the toolbar (it follows it while scrolling), above any hero, numbered
   steps in badges, the current step tinted, two columns on a wide screen, its own scroll. */
.ej-chapters:not([hidden]){z-index:95;gap:6px;padding:14px;border-radius:var(--ej-radius,14px);background:var(--ej-paper);border:1px solid color-mix(in srgb,var(--ej-ink) 12%,transparent);box-shadow:0 24px 60px color-mix(in srgb,var(--ej-ink) 22%,transparent);scrollbar-width:thin}
@media (min-width:900px){.ej-chapters:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}}
.ej-reader .ej-chapters a{align-items:center;gap:12px;min-height:46px;padding:9px 12px;border:1px solid transparent;border-radius:var(--ej-radius-sm,10px);background:transparent;color:var(--ej-ink);font-size:14px;font-weight:600;transition:background .15s,border-color .15s}
.ej-reader .ej-chapters a:hover{background:color-mix(in srgb,var(--color-accent,var(--ej-accent)) 8%,var(--ej-paper))}
.ej-reader .ej-chapters a[aria-current="step"]{background:color-mix(in srgb,var(--color-accent,var(--ej-accent)) 12%,var(--ej-paper));border-color:color-mix(in srgb,var(--color-accent,var(--ej-accent)) 40%,transparent);box-shadow:none;font-weight:700}
.ej-reader .ej-chapters .ej-chapters__number{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:color-mix(in srgb,var(--color-accent,var(--ej-accent)) 14%,var(--ej-paper));color:var(--ej-heading);font-size:12px;font-weight:800}
.ej-reader .ej-chapters a[aria-current="step"] .ej-chapters__number{background:var(--color-dark-bg,var(--ej-heading));color:var(--color-dark-text,#fff)}
.ej-reader .ej-chapters .ej-chapters__number[hidden]{display:grid!important;visibility:visible}
.ej-reader .ej-chapters .ej-chapters__number:empty{background:var(--color-accent-2,var(--ej-accent));}
.ej-reader .ej-chapters .ej-chapters__number:empty::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-dark-bg,var(--ej-heading))}
/* Two columns read top to bottom (column flow), each step kept whole. */
@media (min-width:900px){.ej-chapters:not([hidden]){display:block;columns:2;column-gap:10px}.ej-reader .ej-chapters:not([hidden]) a{break-inside:avoid;margin-bottom:6px}}

/* EJ_FIGURE_NATURAL_V1: an image asked at its natural ratio (cms-img-deco--aspect-auto: captures) is shown whole — the
   decorator's frame takes the image's own height instead of a fixed one; nothing is cropped. */
.ej-reader .cms-img-deco--aspect-auto,.ej-reader .cms-img-deco--aspect-auto .cms-img-deco__inner{height:auto!important;min-height:0!important;aspect-ratio:auto!important}
.ej-reader .cms-img-deco--aspect-auto .cms-img-deco__img{width:100%;height:auto!important;min-height:0!important;object-fit:contain!important}
/* Before the image is known, a landscape capture is the usual shape (16/10) rather than 300×150. */
.ej-reader .cms-img-deco--aspect-auto .cms-img-deco__img:not([style*="aspect-ratio"]){aspect-ratio:16/10!important}
/* Mobile presentation toolbar: « Quitter la présentation » fits (icon only label kept short). */
@media (max-width:420px){.ej-reader .ej-toolbar button[data-ej-mode]{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ej-reader.ej-reader--immersive .ej-toolbar button[data-ej-mode]{font-size:0;gap:0;padding:8px 10px}.ej-reader.ej-reader--immersive .ej-toolbar button[data-ej-mode]::before{content:"";width:18px;height:18px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}}

/* SURFACE_PROSE_MEASURE_V1: the editorial body of a resource (or tool) page reads at the section-heading width;
   its components (cards, tables with a class, tools) keep the container width. */
.cms-surface-editorial-body .cms-pc-std__content > :is(p, blockquote, h3, h4, dl):not([class]),
.cms-surface-editorial-body .cms-pc-std__content > :is(ul, ol):not([class]) { max-width: 880px; }

/* SURFACE_EDGE_V1 (Julien 2026-10-08): on a surface page (resource, tool) the embedded editorial body shares the page's
   left edge (the container): components keep the container width, prose is capped at 880 px and left-aligned. */
.cms-surface-editorial-body .cms-classic-v2--embedded { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; }
.cms-surface-editorial-body .cms-classic-v2--embedded > :is(.cms-classic-v2__intro, .cms-classic-v2__section) { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; }
.cms-surface-editorial-body .cms-classic-v2--embedded > :is(.cms-classic-v2__intro, .cms-classic-v2__section) > * { max-width: none; margin-inline: 0; }
.cms-surface-editorial-body .cms-classic-v2--embedded > :is(.cms-classic-v2__intro, .cms-classic-v2__section) > :is(p, ul, ol, blockquote, h2, h3, h4, dl, .cms-classic-v2__step):not(.cms-content-glossary):not([data-component]) { max-width: 880px; }

/* SURFACE_TOP_GAP_V1 (Julien 2026-10-08): with nothing above it (empty surface body), the editorial body of a resource
   or tool page starts right under the breadcrumb. */
.cms-surface-layout > .cms-surface-editorial-body:first-child { margin-top: 0; }

/* HUB_EDITORIAL_V1: a hub's own text in the Présentation frame — its opening centred under the hero, its article after
   the cards; no toolbar. */
.ej-reader.ej-reader--hub { margin-inline: auto; }
.ej-reader--hub.cms-hub-editorial--opening { margin-top: clamp(4px, 1vw, 12px); margin-bottom: clamp(8px, 2vw, 20px); }
.ej-reader--hub.cms-hub-editorial--opening > .ej-opening { margin-bottom: 0; }
.ej-reader--hub.cms-hub-editorial--article { margin-top: clamp(40px, 6vw, 80px); }

/* HUB_SPACING_V1 (Julien 2026-10-08: « le même espacement sur les 4 hubs ») — /guides/, /outils/, /ressources/ and
   /comparatifs/ share one rhythm: content on the breadcrumb's edge (16 px gutter on a phone), breadcrumb → opening as on
   the hubs, opening → first block 28 px, filters → cards 36 px. */
.cms-surface-hub-section > .cms-layout-shell { box-sizing: border-box; width: min(var(--container, 1220px), 100% - 32px); padding-inline: 0; }
.page-guides main > :is(.cms-hub-editorial, .cms-theme-filter, .cms-guide-family-list) { box-sizing: border-box; width: min(var(--container, 1220px), 100% - 32px); margin-inline: auto; }
.page-guides main > .cms-hub-editorial--opening { margin-top: calc(clamp(4px, 1vw, 12px) + 32px); }
.ej-reader--hub.cms-hub-editorial--opening { margin-bottom: 28px; }
.cms-hub-editorial--opening ~ .cms-theme-filter,
.cms-hub-editorial--opening ~ * .cms-theme-filter { margin-top: 0; margin-bottom: 36px; }
.cms-hub-editorial--opening ~ .cms-comparisons-hub > .cms-guide-family-list:first-of-type { margin-top: 0; }
.cms-hub-editorial--opening ~ .cms-guide-family-list { margin-top: 0; }

/* TOOL_OPENING_FIRST_V1: a tool page with an article opening above the tool keeps the hubs' rhythm — 32px section top,
   so breadcrumb → opening is identical to /outils/, /ressources/, /guides/ and /comparatifs/. */
body .ws-layout-section:has(.cms-surface-opening), body.page-tool .ws-layout-section:has(.cms-surface-opening) { --cms-section-pad-top: 32px; }
.cms-surface-opening .cms-hub-editorial--opening { margin-bottom: 28px; }

/* ARTICLE_IMAGE_MOBILE_V1 (Julien 2026-10-08): on a phone the article's images are a little taller, cropped on the
   sides from the centre — the full figures square (4:3 → 1:1), the info-card pictures 5:4 (16:10 → 5:4). */
@media (max-width: 700px) {
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-figure img,
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-figure__img {
    aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center;
  }
  /* A decorated figure (cms-img-deco) holds the ratio on its frame; the picture fills it (height: 100%). */
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-figure .cms-img-deco__inner {
    aspect-ratio: 1 / 1; height: auto;
  }
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-figure .cms-img-deco__img {
    aspect-ratio: auto; object-fit: cover; object-position: center;
  }
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-icg .cms-content-icg__figure .cms-content-icg__image,
  :is(.ej-reader, .cms-pc-std__content, .post-content, .fw-post-layout) .cms-content-icg__figure img {
    aspect-ratio: 5 / 4 !important; height: auto !important; object-fit: cover; object-position: center;
  }
}

/* EJ_LAST_CLOSE_V1: the last step's « Fermer » reads as an exit, not a forward step. EJ_TOOLBAR_FIT_V1: on a small phone
   the « Mode présentation » button stays whole. */
.ej-reader .ej-controls button.ej-controls__close { background: var(--color-dark-bg, #192443); border-color: var(--color-dark-bg, #192443); color: #fff; }
/* EJ_TOOLBAR_FIT_V2 (Julien 2026-10-08): on a phone the reader's bar has the same width on a post or a page as on a
   comparison (12px from the screen edges, out of the narrower reading column), and on a small screen the presentation
   button reads « Présentation » / « Quitter » (the full wording stays in the DOM for screen readers). */
@media (max-width: 560px) {
  .ej-reader .ej-toolbar.ej-toolbar { width: calc(100vw - 24px); max-width: none; margin-inline: calc(50% - 50vw + 12px); box-sizing: border-box; }
}
@media (max-width: 420px) {
  .ej-reader .ej-toolbar.ej-toolbar button[data-ej-mode] { font-size: 0 !important; white-space: nowrap; }
  /* Same type as « Sommaire » next to it (EJ_TOOLBAR_FIT_V3). */
  .ej-reader .ej-toolbar.ej-toolbar button[data-ej-mode]::after { content: "Présentation"; font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: normal; }
  .ej-reader.ej-reader--immersive .ej-toolbar.ej-toolbar button[data-ej-mode]::after { content: "Quitter"; }
}

/* EJ_TOOLBAR_ALIGN_V1 (Julien 2026-10-09): the paging chevrons are drawn as centred icons (the rotated bordered square
   looked a few px higher than the buttons), and the short « Présentation » label keeps the same icon spacing as
   « Sommaire » (the hidden full label must not add a second gap). */
.ej-reader .ej-toolbar .ej-toolbar__paging button:is([data-ej-prev],[data-ej-next]) { display: grid; place-items: center; grid-template: 1fr / 1fr; }
.ej-reader .ej-toolbar .ej-toolbar__paging button:is([data-ej-prev],[data-ej-next])::before {
  grid-area: 1 / 1; width: 18px; height: 18px; border: 0; transform: none; background: currentColor;
  -webkit-mask: var(--ej-chevron) center / contain no-repeat; mask: var(--ej-chevron) center / contain no-repeat;
}
.ej-reader .ej-toolbar .ej-toolbar__paging button[data-ej-prev] { --ej-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 6-6 6 6 6'/%3E%3C/svg%3E"); }
.ej-reader .ej-toolbar .ej-toolbar__paging button[data-ej-next] { --ej-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E"); }
@media (max-width: 420px) {
  .ej-reader .ej-toolbar.ej-toolbar button[data-ej-mode] { gap: 0; }
  .ej-reader .ej-toolbar.ej-toolbar button[data-ej-mode]::after { margin-left: 8px; }
}
/* EJ_TOOLBAR_PAIR_V1 (Julien 2026-10-09): on a phone « Présentation » sits close to « Sommaire »; the pair stays centred in
   the space right of the paging arrows. */
@media (max-width: 700px) {
  .ej-reader .ej-toolbar__actions { justify-content: flex-start; }
  .ej-reader .ej-toolbar__actions > [data-ej-toc-toggle] { margin-left: auto; }
  .ej-reader .ej-toolbar__actions > [data-ej-mode] { margin-left: 6px; margin-right: auto; }
}
/* EJ_MEDIA_TEXT_V1 (Julien 2026-10-09): one image beside one text, in the wide column. One component; the only setting
   is the side of the image (data-image-side = left | right), so a page can alternate. On a phone the image comes first. */
.ej-block.ej-block--media-text { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-block:clamp(28px,4vw,48px) }
.ej-block.ej-block--media-text[data-image-side="right"] .ej-media-text__media { order:2 }
.ej-media-text__media { margin:0;border-radius:var(--ej-radius,18px);overflow:hidden;background:var(--ej-tint);box-shadow:0 18px 44px color-mix(in srgb,var(--ej-ink) 12%,transparent) }
.ej-media-text__media img { display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover }
.ej-media-text__media figcaption { padding:10px 14px;color:var(--ej-muted);font-size:13px }
.ej-media-text__body { display:grid;gap:12px;min-width:0 }
.ej-media-text__eyebrow { font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ej-accent) }
.ej-reader .ej-media-text__title { margin:0;color:var(--ej-heading);font-family:var(--ej-font-heading,inherit);font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.01em }
.ej-reader .ej-media-text__body p { margin:0;line-height:1.6 }
.ej-reader .ej-media-text__lead { color:var(--ej-heading);font-size:calc(var(--ej-text,17px) + 1px) }
.ej-media-text__list { display:grid;gap:8px;margin:4px 0 0;padding:0;list-style:none }
.ej-media-text__list li { position:relative;padding-left:26px }
.ej-media-text__list li::before { content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--ej-accent) 16%,var(--ej-paper));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--ej-accent) 55%,transparent) }
.ej-reader .ej-block.ej-block--media-text + .ej-block.ej-block--media-text { padding-top:clamp(20px,3.5vw,48px) }
@media (max-width:760px) {
  .ej-block.ej-block--media-text { grid-template-columns:minmax(0,1fr);gap:18px }
  .ej-block.ej-block--media-text[data-image-side="right"] .ej-media-text__media { order:0 }
}