/* ==========================================================================
   Pezo design system — one flat stylesheet for a site rendered by Go
   html/template. No page needs JavaScript to be read or used (ADR-011).

   RULES OF THE SHEET
   - Tokens only. Colours, font sizes, spacing (margin, padding, gap), radii,
     shadows and durations come from :root. Raw values are left for geometry
     only (icon sizes, column widths, offsets).
   - One rule per selector and per media context. A selector is never
     redeclared further down to patch itself: edit the rule where it lives.
     A new component goes at the end of its section, never mid-section.
   - Surfaces are classes, not recipes. .glass-soft, .glass and .glass-tint
     carry background, border, radius, blur and shadow; a component only sets
     its layout, and may layer a decoration over the surface token, e.g.
       background: radial-gradient(...), var(--glass-bg);
   - Responsive overrides live in the breakpoint blocks that close each
     section, never next to the component (cascade order stays obvious).
   - Components are documented once, in the header comment of their partial
     in templates/, and shown with their tokens on /guide-de-style: reuse
     before creating.
   - css_test.go fails when a class is used without a rule or defined without
     a use (grep a name here AND in templates/ before creating it), when the
     sheet passes 40 960 bytes gzipped, and when the cost postes break the
     promise written next to them in :root.

   TOKENS (see :root)
   Colour, text — --encre (body text), --sourdine (secondary text, ≥4.5:1 on
     every tinted surface), --frais-texte (warnings, missing prices, "−"),
     --placeholder, --bleu (links, action), --bleu-fonce (blue text on a blue
     tint), --vert (the cheapest, a saving, "+"), --ambre (under condition).
   Colour, graphics only — --frais (✕ marks), --lavande (decorative icons),
     --bleu2 (gradients); never for text: they fail contrast.
   Colour, surfaces — --fond (page), --blanc, --givre (frosted white), --bord
     (hairline), --trait (separator inside a component), --bord-champ (form
     control border, ≥3:1). A bank's colour is its logo's alone: --brand
     reaches only a monogram, on its neutral pastille.
   Transparencies — --<colour>-<alpha> built with color-mix(): tints are
     backgrounds (08–18), borders (28–40).
   Signals — green says the cheapest or a saving, blue says action: neither
     decorates. Every bar of the site speaks one code: a zero is a green dot at
     the origin of its track (.bar-zero) with « Gratuit » written, a partial
     total ends on an open dashed cap (.bar-open).
   Type — --fs-2xs 11 … --fs-2xl 24, --fs-figure 32 and 40 for headline numbers
     only. One system of titles, one weight, 600: --fs-h1 28 (24 on a phone),
     --fs-h2 20, --fs-h3 16; --fs-display 40 is the home page's alone. Under an
     h1, one line of lead at most. Weights: 350 (text, on the variable axis), 400
     (text under 14 px), 500 (UI), 600 (titles, emphasis); 300 for the home
     page's display alone. Never 700.
   Spacing — --sp-1…8 = 4, 8, 12, 16, 24, 32, 48, 64 px; --sp-section between
     two sections (32 on a phone), --sp-title under a section's title.
   Radius — --r-sm 6, --r-md 12, --r-lg 16, --r-xl 20, --r-pill (every button).
   Elevation — one shadow per surface; --ring is a field's focus.
   Layout — --head-h (offset any sticky element by it), --dock-h (mobile bar).
   Motion — --t-fast .15s, --t .2s; nothing moves under prefers-reduced-motion.

   Actions: four levels, one shape (the pill), two sizes; polish_test.go allows
     no other btn class. .btn-go primary (one per view), .btn-ghost secondary,
     .seeall tertiary, .util utilities; no icon in a button but the header's.
   View transitions: style="{{vt "logo" .Slug}}" names an element that travels
     to the next page; a name is unique per page.
   Full width without overflow: a border image with fill and a 100vw outset is
     painted outside the box and never scrolls (.pillars, .banner-band).

   SECTIONS — core, then foundation, flow, banks, trades, content, tools; each
     carries its own breakpoints, print rules and fallbacks at its end.
   BREAKPOINTS (screen only; print has its own block) — 1180 the header
     tightens · 980 two-column heroes, sidebars and the bank header stack · 720
     phones: tables compact, actions wrap, the gutter narrows to 16 px · 560
     narrow phones: form grids and the trade mosaic drop a column.
   ========================================================================== */

:root {
  /* colour: text */
  --encre: #1E2B4F;
  --sourdine: #5B6682;
  --frais-texte: #9F4E3B;
  --placeholder: #6B7591;
  /* colour: brand and signals */
  --bleu: #4257D0;
  --bleu2: #5B6EE8;
  --bleu-fonce: color-mix(in srgb, var(--bleu) 85%, var(--encre));
  --lavande: #93A6E4;
  --frais: #C96F5A;
  --vert: #2F7D62;
  /* green text on a green tint: --vert alone reads 4.36:1 there, under AA */
  --vert-texte: #276B53;
  /* amber says « under condition » or « partial », never « excluded » */
  --ambre: #8A5A00;
  /* colour: surfaces */
  --fond: #FBFCFF;
  --blanc: #fff;
  --givre: #F4F6FF;
  --bord-champ: #848DA6;

  /* derived transparencies */
  --encre-06: color-mix(in srgb, var(--encre) 6%, transparent);
  --encre-10: color-mix(in srgb, var(--encre) 10%, transparent);
  --encre-20: color-mix(in srgb, var(--encre) 20%, transparent);
  --bleu-08: color-mix(in srgb, var(--bleu) 8%, transparent);
  --bleu-12: color-mix(in srgb, var(--bleu) 12%, transparent);
  --bleu-18: color-mix(in srgb, var(--bleu) 18%, transparent);
  --bleu-28: color-mix(in srgb, var(--bleu) 28%, transparent);
  --bleu-40: color-mix(in srgb, var(--bleu) 40%, transparent);
  --lavande-10: color-mix(in srgb, var(--lavande) 10%, transparent);
  --lavande-16: color-mix(in srgb, var(--lavande) 16%, transparent);
  --lavande-28: color-mix(in srgb, var(--lavande) 28%, transparent);
  --lavande-40: color-mix(in srgb, var(--lavande) 40%, transparent);
  --frais-10: color-mix(in srgb, var(--frais) 10%, transparent);
  --frais-28: color-mix(in srgb, var(--frais) 28%, transparent);
  --frais-40: color-mix(in srgb, var(--frais) 40%, transparent);
  --vert-10: color-mix(in srgb, var(--vert) 10%, transparent);
  --vert-28: color-mix(in srgb, var(--vert) 28%, transparent);
  --ambre-10: color-mix(in srgb, var(--ambre) 10%, transparent);
  --ambre-28: color-mix(in srgb, var(--ambre) 28%, transparent);
  --blanc-12: color-mix(in srgb, var(--blanc) 12%, transparent);
  --blanc-40: color-mix(in srgb, var(--blanc) 40%, transparent);
  --blanc-60: color-mix(in srgb, var(--blanc) 60%, transparent);
  --blanc-80: color-mix(in srgb, var(--blanc) 80%, transparent);
  --blanc-90: color-mix(in srgb, var(--blanc) 90%, transparent);
  --trait: var(--encre-06);
  --bord: var(--encre-10);

  /* glass */
  --glass-blur: blur(22px) saturate(150%);
  --glass-sheen: linear-gradient(150deg, var(--blanc-40), transparent 42%);
  --glass-soft-bg: var(--glass-sheen), linear-gradient(160deg, var(--blanc-60), var(--blanc-40));
  --glass-bg: var(--glass-sheen), linear-gradient(160deg, var(--blanc-90), var(--blanc-60)), var(--blanc-60);
  --glass-tint-bg: var(--glass-sheen), linear-gradient(135deg, var(--bleu-08), var(--lavande-16)), var(--blanc-60);
  --glass-edge: var(--blanc-80);
  --glass-soft-edge: var(--blanc-60);

  /* elevation */
  --shadow-glass-soft: 0 1px 0 var(--blanc-80) inset, 0 16px 38px -30px color-mix(in srgb, var(--encre) 50%, transparent);
  --shadow-glass: 0 1px 0 var(--blanc-90) inset, 0 22px 50px -34px color-mix(in srgb, var(--encre) 55%, transparent), 0 2px 10px -6px color-mix(in srgb, var(--encre) 18%, transparent);
  --shadow-lift: 0 1px 0 var(--blanc-90) inset, 0 30px 60px -32px color-mix(in srgb, var(--bleu) 50%, transparent), 0 3px 14px -8px color-mix(in srgb, var(--encre) 22%, transparent);
  --shadow-best: 0 22px 44px -30px color-mix(in srgb, var(--bleu) 80%, transparent);
  --shadow-go: 0 8px 18px -10px color-mix(in srgb, var(--bleu) 80%, transparent);
  --shadow-pop: 0 14px 30px -18px color-mix(in srgb, var(--encre) 50%, transparent);
  --shadow-sticky: 6px 0 12px -8px color-mix(in srgb, var(--encre) 28%, transparent);
  --ring: 0 0 0 3px var(--bleu-18);

  /* type */
  --f: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-figure: 32px;
  --fs-figure-lg: 40px;
  /* one system of titles, one weight (600): a page 28 (24 on a phone), a section
     20, a card 16; the home page's display 40 is the only light one */
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-display: clamp(30px, 3.4vw, 40px);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  /* one rhythm: between two sections, and between a title and its content */
  --sp-section: var(--sp-7);
  --sp-title: var(--sp-3);

  /* the search field: the button's height, and the inset around it on every side */
  --sb-h: 40px;
  --sb-pad: 6px;

  /* radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* cost postes: told apart on every pair under each colour vision deficiency
     (OKLab ΔE ≥ 13), each segment's edge at 3:1 on the track (css_test.go) */
  --poste-abonnement: #4257D0;
  --poste-operations: #259CCA;
  --poste-cartes: #A02A83;
  --poste-encaissement: #AC8B26;
  --poste-international: #642F08;

  /* layout and motion */
  --page-max: 1320px;
  --gutter: 24px;
  --head-h: 56px;
  --dock-h: 58px;
  --t-fast: .15s;
  --t: .2s;
}

/* ---- base ---------------------------------------------------------------- */

* { margin: 0; box-sizing: border-box }

/* a column: the footer stays at the bottom of a short page */
body {
  display: flex; flex-direction: column; min-height: 100dvh;
  font-family: var(--f); font-weight: 350; font-size: var(--fs-md); line-height: 1.55;
  color: var(--encre); background: var(--fond); overflow-x: hidden;
}

a { color: inherit }
b, strong { font-weight: 600 }
/* one title style for every page, in one weight: no light words beside bold ones */
h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance }
/* browsers draw these at 700, a weight the scale does not use */
h2, h3, th { font-weight: 600 }

.num { font-variant-numeric: tabular-nums lining-nums }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* focus: an outline that follows the element's own shape; fields show a ring */
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--bleu); box-shadow: var(--ring) }

/* ---- surfaces: one glass, four depths ------------------------------------- */

.glass-soft {
  position: relative; border-radius: var(--r-xl);
  background: var(--glass-soft-bg); border: 1px solid var(--glass-soft-edge); box-shadow: var(--shadow-glass-soft);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.glass {
  position: relative; border-radius: var(--r-xl);
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* the lavender glass is the reader's side: their profile, their next step */
.glass-tint {
  position: relative; border-radius: var(--r-xl);
  background: var(--glass-tint-bg); border: 1px solid var(--lavande-40); box-shadow: var(--shadow-glass-soft);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* a clickable surface brightens rather than moves far */
.glass-lift { transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease }
.glass-lift:hover { transform: translateY(-2px); border-color: var(--blanc-90); box-shadow: var(--shadow-lift) }

/* ---- page frame ----------------------------------------------------------- */

.lueur { position: fixed; inset: 0; z-index: 0; pointer-events: none }
.lueur i { position: absolute; border-radius: 50%; filter: blur(80px) }
.lueur i:nth-child(1) {
  width: 60vw; height: 44vw; top: -22vw; right: -14vw;
  background: radial-gradient(circle at 40% 40%, var(--lavande-40), transparent 65%);
}
.lueur i:nth-child(2) {
  width: 46vw; height: 34vw; bottom: -16vw; left: -12vw;
  background: radial-gradient(circle, var(--lavande-28), transparent 65%);
}

/* above the footer: a panel unrolled at the bottom of a page stays readable over it */
main { position: relative; z-index: 2; flex: 1 0 auto }
/* the wordmark is ink wherever it stands, the footer's grey included */
.brand { flex: none; font-weight: 600; font-size: var(--fs-2xl); letter-spacing: -.02em; color: var(--encre); text-decoration: none }
.brand span { color: var(--bleu) }

.page { width: min(100% - 2 * var(--gutter), var(--page-max)); margin: 0 auto }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--sourdine);
}
.crumbs a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px }
.crumbs a:hover { color: var(--bleu) }
.crumbs .sep { opacity: .5 }

/* pagehead: the head of every page — the trail, an overline, the h1, one line of
   lead, then the actions (one secondary or partner button, the utilities, the date) */
.pagehead { padding-bottom: var(--sp-1) }
.pagehead-main { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3) }
.pagehead-logo { display: inline-flex; flex: none }
.pagehead-text { min-width: 0 }
.pagehead-over { margin-bottom: var(--sp-2) }
.pagehead-over a { text-decoration: none }
.pagehead-over a:hover { text-decoration: underline }
.pagehead-lead { max-width: 68ch; margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--sourdine); text-wrap: pretty }
.pagehead-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4) }
.pagehead-lhs { min-width: 0 }
/* a head with a price panel: the words on the left, the figure and the button on
   the right, where the width was left empty */
.pagehead-sided .pagehead-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: center; gap: var(--sp-5) var(--sp-7) }
.pagehead-side { display: grid; gap: var(--sp-2); padding: var(--sp-5) }
.pagehead-side .pricetag {
  justify-self: start; flex-direction: row; align-items: baseline; gap: var(--sp-3);
  padding: 0; background: none; border: 0; box-shadow: none; text-align: left;
}
.pagehead-side .pricetag-year b { font-size: var(--fs-figure) }
.pagehead-side .pricetag-month { margin: 0; padding: 0 0 0 var(--sp-3); border-top: 0; border-left: 1px solid var(--bord) }
.pagehead-side-kicker { margin: 0 }
.pagehead-side-value { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2; color: var(--encre) }
.pagehead-side-note { font-size: var(--fs-sm); color: var(--sourdine) }
.pagehead-side .cta-go { margin-top: var(--sp-2) }
@media screen and (max-width: 720px) {
  .pagehead-sided .pagehead-body { grid-template-columns: minmax(0, 1fr) }
}

/* ---- type components ------------------------------------------------------ */

/* the one uppercase label of the site */
.overline { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine) }
.overline-bleu { color: var(--bleu) }

/* the tertiary action: a link and its arrow, « Tout voir », « Voir la fiche » */
.seeall {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--bleu); text-decoration: none; white-space: nowrap;
}
.seeall:hover { text-decoration: underline; text-underline-offset: 3px }

/* the partner mention sits under the button it qualifies, centred on it, in
   13 px at least and in ink: it must be read before the click (T7, MON-07); the
   unpaid one, which no law requires, stays discreet (ADR-067) */
.mention { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 400; color: var(--encre); text-align: center }
.mention-direct { font-size: var(--fs-xs); font-weight: 350; color: var(--sourdine) }

.prose { max-width: 72ch; margin-top: var(--sp-3) }
.prose h2 { font-size: var(--fs-h2); margin: var(--sp-6) 0 var(--sp-2) }
.prose h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2) }
.prose p, .prose li { font-size: var(--fs-md); margin: var(--sp-3) 0 }
.prose ul, .prose ol { padding-left: var(--sp-5) }
.prose a:not(.btn) { color: var(--bleu) }

/* ---- actions: four levels, one shape, two sizes ------------------------------ */

/* primary (.btn-go, filled, one per view), secondary (.btn-ghost, outlined), both
   pills without icon; tertiary is .seeall (a link and its arrow); utilities are
   .util (an icon and a short word) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); border: 1px solid transparent;
  font: inherit; font-size: var(--fs-base); font-weight: 500; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px) }
.btn-go { background: var(--bleu); color: var(--blanc); box-shadow: var(--shadow-go) }
.btn-go:hover { background: var(--bleu-fonce) }
.btn-ghost { background: var(--blanc); color: var(--bleu-fonce); border-color: var(--bleu-28) }
.btn-ghost:hover { background: var(--bleu-08); border-color: var(--bleu) }
.btn-sm { min-height: 32px; padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm) }
.btn-block { display: flex; width: 100% }

/* utilities: share, copy, back, remove — an icon and a short word, no frame */
.utils { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4) }
.util {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--sourdine); text-decoration: none;
  background: none; border: 0; cursor: pointer; transition: color var(--t-fast);
  --icon: 16;
}
.util:hover { color: var(--bleu) }
/* the copy button ships hidden: it shows only where the clipboard can be written */
.util[hidden] { display: none }
/* a link that opens elsewhere says so: icon here, words for screen readers */
.ext-ico { width: 12px; height: 12px; margin-left: var(--sp-1); opacity: .8; flex: none }
/* the partner button carries its mention underneath */
.cta-go { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1) }
.cta-go .mention { margin: 0 }
.bk-docs { margin-top: var(--sp-4) }
.bk-docs-line { margin-top: var(--sp-2); font-size: var(--fs-base); line-height: 1.5 }
.bk-docs-line::first-letter { text-transform: uppercase }
/* where the button leads, and what the bank asks: a line under the mention (PSY-09) */
.cta-arrive { align-self: center; max-width: 34ch; font-size: var(--fs-sm); line-height: 1.4; color: var(--sourdine); text-align: center; text-wrap: pretty }
.cta-block { display: flex; align-items: stretch; text-align: center }

/* ---- chips: one pastille ---------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine); background: var(--lavande-16);
}
.chip-line { background: var(--blanc-60); border-color: var(--bord) }
.chip-best { color: var(--bleu-fonce); background: var(--bleu-12); font-weight: 600 }
.chip-warn { color: var(--ambre); background: var(--ambre-10); font-weight: 600 }
.chip-partner { color: var(--frais-texte); background: var(--frais-10); font-weight: 600 }
.chip-yes { color: var(--encre); border-color: var(--vert-28) }
.chip-yes > span { color: var(--vert) }
.chip-no { border-color: var(--frais-28) }
.chip-no > span { color: var(--frais-texte) }
.chip-on { color: var(--bleu); font-weight: 500; border-color: var(--bleu-40); background: var(--bleu-12) }
.chip-caps { padding: 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 600; line-height: 1.7; letter-spacing: .07em; text-transform: uppercase }

/* ---- price tag: the year first, the month under it -------------------------- */

.pricetag {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: var(--sp-2) var(--sp-4) var(--sp-3); border-radius: var(--r-lg); line-height: 1.1; text-align: right;
  background: var(--glass-sheen), linear-gradient(158deg, var(--blanc-90), color-mix(in srgb, var(--givre) 60%, transparent)), var(--lavande-10);
  border: 1px solid var(--blanc-80); box-shadow: var(--shadow-glass-soft), 0 0 0 1px var(--lavande-16);
}
.pricetag-kicker { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.pricetag-year { display: flex; align-items: baseline; gap: var(--sp-1); white-space: nowrap }
.pricetag-year b { font-size: var(--fs-2xl); letter-spacing: -.02em; color: var(--encre) }
.pricetag-month {
  display: flex; align-items: baseline; gap: var(--sp-1); white-space: nowrap;
  padding-top: var(--sp-1); margin-top: var(--sp-1); border-top: 1px solid var(--bord);
}
.pricetag-month b { font-size: var(--fs-sm); font-weight: 500; color: var(--sourdine) }
/* the unit is engraved in the tag; the full word stays in the HTML */
.pricetag-unit {
  font-size: var(--fs-2xs); font-weight: 400; letter-spacing: .01em; color: var(--sourdine);
  text-shadow: 0 1px 0 var(--blanc), 0 -1px 1px var(--encre-20);
}
.pricetag-free .pricetag-year b { color: var(--vert) }
.pricetag-star { margin-left: var(--sp-1); font-weight: 600; color: var(--frais-texte) }

/* ---- bank mark: one neutral pastille for every bank (GRA-13), the mark at 72 %
   of its side in its own colours; a monogram picks black or white text on its
   brand colour. No rule here recolours or stretches a logo (css_test.go) ---- */

.logo {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-md); letter-spacing: -.02em;
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--encre-10);
}
.logo-sm { width: 24px; height: 24px; border-radius: var(--r-sm); font-size: var(--fs-2xs) }
.logo-lg { width: 64px; height: 64px; border-radius: var(--r-lg); font-size: var(--fs-xl) }
.logo-mark { display: grid; place-items: center; width: 72%; height: 72%; border-radius: 22%; object-fit: contain }
/* white under a relative luminance of 0.179, black above: the higher of the two
   WCAG contrasts, whatever colour a bank brings */
.logo-mono {
  background: var(--brand, var(--bleu));
  color: var(--blanc);
  color: color(from var(--brand, var(--bleu)) srgb-linear
    clamp(0, calc((0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000), 1)
    clamp(0, calc((0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000), 1)
    clamp(0, calc((0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000), 1));
}

/* ---- form controls ---------------------------------------------------------- */

select, input[type="number"], input[type="date"] {
  font: inherit; font-size: var(--fs-base); color: inherit; width: 100%;
  padding: var(--sp-3) var(--sp-4); background: var(--blanc);
  border: 1px solid var(--bord-champ); border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
select:hover, input[type="number"]:hover { border-color: var(--bleu) }
/* native spinners would sit on the written unit ("€ par mois"); arrows keys still work */
input[type="number"] { appearance: textfield; -moz-appearance: textfield }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* ---- profile form: three questions, not eight loose fields ------------------ */

.form { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6) }
.fgroup + .fgroup { margin-top: var(--sp-4) }
/* the rule starts from the title itself, like the "ou" separator */
.fgroup-title { display: flex; align-items: center; gap: var(--sp-4) }
.fgroup-title::after { content: ""; flex: 1; height: 1px; background: var(--bord) }
.fgroup-title + .checks { margin-top: var(--sp-4) }
/* the label sits above its field: a label far left of its field leaves a gap to cross */
.field { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2) }
.flbl { position: relative; align-self: flex-start; min-width: 0; font-size: var(--fs-sm); line-height: 1.3; color: var(--sourdine) }
/* a figure carries its unit: "10" alone means nothing */
.fnum { position: relative; display: flex; align-items: center }
.fnum input { padding-right: var(--sp-8) }
.funit { position: absolute; right: var(--sp-3); font-size: var(--fs-2xs); color: var(--sourdine); pointer-events: none; white-space: nowrap }

/* two exclusive choices are taken in one gesture, not from a list */
.fradio { display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.radio { position: relative; display: inline-flex; cursor: pointer }
.radio input { position: absolute; opacity: 0; width: 0; height: 0 }
.radio span {
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--bord-champ); background: var(--blanc); color: var(--encre);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.radio:hover span { border-color: var(--bleu) }
.radio input:checked + span { color: var(--bleu); border-color: var(--bleu); background: var(--bleu-12) }
.radio input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px }
/* a bank's pastille carries its logo (GRA-23) */
.tool-bank span { display: inline-flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-2) }

/* a need lights up when it is ticked */
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-3) }
.check {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); font-size: var(--fs-base);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-pill);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.check:hover { border-color: var(--bleu-40) }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px }
.check-box {
  display: grid; place-items: center; flex: none; width: 17px; height: 17px;
  border-radius: var(--r-sm); border: 1.5px solid var(--bord-champ);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check-box::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid var(--blanc); border-bottom: 2px solid var(--blanc);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check:has(input:checked) { background: var(--bleu-12); border-color: var(--bleu-40) }
.check:has(input:checked) .check-box { background: var(--bleu); border-color: var(--bleu) }
.check:has(input:checked) .check-box::after { opacity: 1 }
.check:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px }

.factions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5) }
.deduit { font-size: var(--fs-xs); font-style: italic; line-height: 1.4; color: var(--sourdine) }

/* ---- the search field: one component, one height ------------------------------- */

/* searchbox: the button sits inside the pill with the same inset (--sb-pad) on its
   three sides, so its radius is the pill's less that inset: the curves are
   concentric. --sb-r is the outer radius; a narrow field turns it into a card */
.searchbox { container: searchbox / inline-size; display: flex; flex-direction: column; gap: var(--sp-2) }
.searchbox-label { font-size: var(--fs-sm); font-weight: 500; color: var(--encre) }
.searchbox-box {
  --sb-r: calc(var(--sb-h) / 2 + var(--sb-pad) + 1px);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sb-pad) var(--sb-pad) var(--sb-pad) var(--sp-4); border-radius: var(--sb-r);
  color: var(--placeholder); background: var(--blanc); border: 1px solid var(--bord-champ); box-shadow: var(--shadow-glass-soft);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* the whole box shows the focus: the field inside has no border of its own */
.searchbox-box:focus-within { border-color: var(--bleu); box-shadow: var(--ring), var(--shadow-glass-soft) }
.searchbox-input {
  flex: 1; min-width: 0; height: var(--sb-h); padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-md); color: var(--encre);
}
.searchbox-input:focus-visible { outline: none; box-shadow: none }
.searchbox-input::placeholder { color: var(--placeholder); font-size: var(--fs-base) }
.searchbox-go { flex: none; height: var(--sb-h); min-height: 0; border-radius: calc(var(--sb-r) - var(--sb-pad) - 1px); box-shadow: none }
/* the hint starts where the typed text does: border, inset, 20 px magnifier */
.searchbox-hint { margin-top: var(--sp-1); padding-left: calc(var(--sp-4) + var(--sp-2) + 21px); font-size: var(--fs-xs); color: var(--sourdine) }

/* ---- shared blocks ------------------------------------------------------------ */

/* a face-off form: two banks or one to add (the bar around it lives in the banks section) */
.versus-form { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) }
.versus-form select { width: auto; min-width: 150px }
.versus-vs { font-size: var(--fs-sm); font-weight: 600; color: var(--sourdine) }

/* what a figure rests on, folded in one line: a basis one cannot see is a figure
   one must believe, a basis spread in pastilles is a wall of words */
.assumed { margin-top: var(--sp-3) }
.assumed-sum {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; list-style: none; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; color: var(--sourdine); --icon: 16;
}
.assumed-sum::-webkit-details-marker { display: none }
.assumed-sum:hover { color: var(--bleu) }
.assumed-sum:hover .assumed-label { text-decoration: underline; text-underline-offset: 3px }
.assumed-sum .fold-mark { width: 7px; height: 7px; margin: -3px 0 0 var(--sp-1) }
.assumed[open] .assumed-sum .fold-mark { transform: rotate(-135deg); margin-top: 3px }
.assumed-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.assumed-link { min-height: 28px; color: var(--encre); text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast) }
.assumed-link:hover { color: var(--bleu); border-color: var(--bleu-40) }
.assumed-switch { font-weight: 600; color: var(--bleu) }
/* a trade page's assumptions that weigh most, each flipped in one click (PSY-10) */
.trade-switches { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3) }
.trade-switches-lead { font-size: var(--fs-sm); color: var(--sourdine) }


.fold { margin-bottom: var(--sp-2); overflow: hidden; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-lg) }
.fold > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none;
  padding: var(--sp-4); font-size: var(--fs-md); font-weight: 500;
}
.fold > summary::-webkit-details-marker { display: none }
.fold > summary:hover { color: var(--bleu) }
.fold[open] > summary { border-bottom: 1px solid var(--bord) }
.fold-mark {
  flex: none; width: 9px; height: 9px; transform: rotate(45deg); transition: transform var(--t);
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
}
.fold[open] > summary .fold-mark { transform: rotate(-135deg) }

.faq { margin-top: var(--sp-section) }
.faqlist { display: grid; gap: var(--sp-2) }
.faq-answer { max-width: 90ch; padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-base); line-height: 1.6; color: var(--sourdine) }

/* set aside: one card per bank, the reason in plain sight */
.exccards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-3);
}
.exccard a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); text-decoration: none;
}
.exccard a:hover { border-color: var(--bleu-40) }
.exccard-body { display: grid; gap: var(--sp-1); min-width: 0 }
.exccard-name { font-size: var(--fs-base); font-weight: 600; color: var(--encre) }
.exccard-why { font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }
.exccard-go { font-size: var(--fs-md); color: var(--lavande) }
.exccard a:hover .exccard-go { color: var(--bleu) }

/* the selection follows the reader down the page */
.basket {
  position: sticky; bottom: var(--sp-4); z-index: 3;
  width: fit-content; max-width: 100%; margin: var(--sp-5) auto 0; box-shadow: var(--shadow-best);
}
.basket-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) }
.basket-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.basket-list li {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
  font-size: var(--fs-sm); background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-pill);
}
.basket-name { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-weight: 500 }
.basket-plan { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.basket-drop {
  display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 50%;
  font-size: var(--fs-md); line-height: 1; color: var(--sourdine); text-decoration: none;
}
.basket-drop:hover { color: var(--frais-texte); background: var(--frais-10) }
.basket-act { display: flex; align-items: center; gap: var(--sp-4) }
.basket-hint { font-size: var(--fs-sm); color: var(--sourdine) }
.basket-go-short { display: none }
.basket-clear { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--fs-sm); color: var(--sourdine); text-decoration: none }
.basket-clear:hover { color: var(--frais-texte) }

.empty { padding: var(--sp-5); border-color: var(--frais-28) }
.empty h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl) }
.empty p { margin-top: var(--sp-2); color: var(--sourdine) }

/* ---- results ------------------------------------------------------------------ */


/* a result card reads in three beats: who and how much, what one pays, the proof */
.verdict { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3) }
.rescard { padding: var(--sp-5) var(--sp-5) var(--sp-4); overflow: hidden }
.rescard-best {
  border-color: var(--bleu-40);
  background: radial-gradient(120% 100% at 0% 0%, var(--bleu-08), transparent 55%), var(--glass-bg);
}
.res-top { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) }
.res-rank { font-size: var(--fs-lg); font-weight: 600; color: var(--sourdine); text-align: center }
.res-id { min-width: 0 }
.res-id h2 { font-size: var(--fs-h3) }
.res-plan { font-size: var(--fs-md); font-weight: 400; color: var(--sourdine) }
.res-sep { margin: 0 var(--sp-2); font-weight: 300; color: var(--encre-20) }
.res-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1) }
.res-tags:empty { display: none }
/* on a wide card, year and month stand side by side, alike */
.rescard .pricetag { flex-direction: row; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) }
.rescard .pricetag-month { margin: 0; padding: 0 0 0 var(--sp-3); border-top: 0; border-left: 1px solid var(--bord) }
.rescard .pricetag-month b { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; color: var(--encre) }
.rescard .pricetag-unit { font-size: var(--fs-xs) }
/* paying yearly really costs less: that side stands out, lightly */
.rescard .pricetag-saves .pricetag-year { margin: calc(-1 * var(--sp-1)) 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); background: var(--vert-10) }
.rescard .pricetag-saves .pricetag-year b { color: var(--vert) }
.rescard .pricetag-saves .pricetag-month b { font-weight: 500; color: var(--sourdine) }

.res-detail { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--trait) }
.lines { width: 100%; border-collapse: collapse; font-size: var(--fs-base) }
.lines th, .lines td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: baseline }
.lines thead th { padding-bottom: var(--sp-2) }
.lines tbody tr:nth-child(odd) { background: var(--lavande-10) }
.lines tbody th { font-weight: 500 }
.lines .line-how { font-size: var(--fs-sm); color: var(--sourdine) }
.lines .num { text-align: right; white-space: nowrap }
.lines tfoot th { border-top: 1px solid var(--bord) }
.lines tfoot td { font-weight: 600; text-align: right; border-top: 1px solid var(--bord) }
/* what the plan includes keeps its line: "compris" where a price would be */
.line-included th, .line-included td { color: var(--sourdine) }
.line-included .num { font-weight: 500 }
/* what the bank does not publish keeps its line too */
.line-unknown th, .line-unknown td { color: var(--frais-texte) }
.line-unknown .num { font-weight: 500 }
.res-note { margin-top: var(--sp-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--sourdine) }
/* where the button leads and what the bank asks, moved from under the button (T17) */
.res-arrive { text-wrap: pretty }
.res-exceeded {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.5; color: var(--encre); background: var(--frais-10);
}
.res-exceeded b { color: var(--frais-texte) }
/* reading on the left, commitment on the right, in keyboard order */
.res-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4) }
.res-act .cta-go { margin-left: auto }

/* ---- price grid: labels frozen on the left, offers scrolling past them ------- */

.gridwrap {
  overflow-x: auto; overflow-y: visible; border-radius: var(--r-xl);
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 210px; overscroll-behavior-x: contain;
}
/* the scrollbar shows: without it nothing says there is more */
.gridwrap::-webkit-scrollbar { height: 10px }
.gridwrap::-webkit-scrollbar-track { background: var(--lavande-10); border-radius: var(--r-pill) }
.gridwrap::-webkit-scrollbar-thumb { background: var(--bleu-28); border-radius: var(--r-pill) }
.gridwrap::-webkit-scrollbar-thumb:hover { background: var(--bleu-40) }
.pricegrid { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base) }
.pricegrid thead th {
  position: sticky; top: 0; z-index: 3;
  padding: var(--sp-4) var(--sp-4) var(--sp-3); text-align: right; vertical-align: bottom; white-space: nowrap;
  background: linear-gradient(160deg, color-mix(in srgb, var(--blanc) 95%, transparent), color-mix(in srgb, var(--givre) 92%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--bord);
}
/* the label column never leaves the screen, and stays opaque under the rows' hover */
.pricegrid thead th:first-child {
  left: 0; z-index: 4; text-align: left; font-weight: 400;
  background: var(--blanc); box-shadow: var(--shadow-sticky);
}
.pricegrid th[scope="row"] {
  position: sticky; left: 0; z-index: 2; min-width: 210px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6); text-align: left; vertical-align: middle; white-space: nowrap;
  font-weight: 400; color: var(--sourdine); background: var(--blanc); box-shadow: var(--shadow-sticky);
  border-top: 1px solid var(--trait);
}
/* text scrolling behind the frozen column fades instead of being cut */
.pricegrid th[scope="row"]::after,
.pricegrid thead th:first-child::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 24px; pointer-events: none;
  background: linear-gradient(90deg, var(--blanc), transparent);
}
/* a column head stacks name, price and button on shared rows across columns */
.pricegrid thead th[scope="col"] { vertical-align: top; height: 1px; scroll-snap-align: start; scroll-margin-left: 210px }
.pricegrid thead .col-best { background: linear-gradient(160deg, var(--bleu-12), var(--bleu-08)) }
.pricegrid thead .pricetag { align-items: center; margin: var(--sp-1) 0; padding: var(--sp-1) var(--sp-3) var(--sp-2); border-radius: var(--r-md) }
.pricegrid thead .pricetag-year, .pricegrid thead .pricetag-month { justify-content: center }
.pricegrid thead .pricetag-year b { font-size: var(--fs-xl); font-weight: 500 }
.pricegrid thead .pricetag-month b { font-size: var(--fs-xs) }
.pricegrid thead .pricetag-unit { font-size: var(--fs-2xs) }
.colhead { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: var(--sp-2); height: 100% }
.colhead-price { display: flex; align-items: center; min-height: 62px }
.plan-name { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--encre) }
.col-best .plan-name { color: var(--bleu) }
/* each family opens on a band that spans the table; its title stays at the edge */
.gridhead th {
  padding: var(--sp-2) 0; text-align: left; background: var(--lavande-16);
  border-top: 1px solid var(--bleu-12); border-bottom: 1px solid var(--bleu-12);
}
.gridhead-label { position: sticky; left: 0; display: inline-block; padding: 0 var(--sp-4) }
.gridhead + tr th[scope="row"], .gridhead + tr td { border-top: none }
.pricegrid td {
  padding: var(--sp-3) var(--sp-4); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums; color: var(--encre);
  border-top: 1px solid var(--trait);
}
/* hover lights the values, never the frozen labels */
.pricegrid tbody tr:hover td { background: var(--lavande-10) }
.row-label { font-size: var(--fs-base); color: var(--sourdine) }
.row-note { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine); white-space: normal }
/* a note wraps under its value instead of widening the whole table */
.cell-note { display: block; max-width: 24ch; margin: var(--sp-1) 0 0 auto; font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine); white-space: normal }
.cell-none { font-size: var(--fs-xs); font-weight: 400; color: var(--frais-texte); white-space: nowrap }
.cell-mark { width: 17px; height: 17px; vertical-align: middle }
.cell-yes { color: var(--vert) }
.cell-no { color: var(--frais) }
.cell-lead { font-weight: 500; color: var(--vert) }
/* silence is a dash; the words stay in the HTML and in the legend */
.cell-unknown { font-size: var(--fs-md); color: var(--sourdine); cursor: help }
.gridlegend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-3) var(--sp-1) 0; padding: 0 var(--sp-1); font-size: var(--fs-xs); color: var(--sourdine);
}
.legend-item { display: inline-flex; align-items: center; gap: var(--sp-2) }
.legend-item .cell-mark { width: 13px; height: 13px }
.legend-dash { font-size: var(--fs-base); font-weight: 400; line-height: 1; color: var(--sourdine) }
.legend-word { font-weight: 500; font-style: italic; color: var(--sourdine) }

/* ---- bank page (its header and tabs live in the banks section) ------------------ */

/* the reader's profile, folded like any basis, with its two exits beside it */
.minerow { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-3) }
.minerow .assumed { flex: 1 1 320px; min-width: 0; margin: 0 }

/* "is my legal form accepted" comes before any price */
.formsrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-1) }
.forms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }

.card { padding: var(--sp-5) var(--sp-6) }
.card h2 { margin-bottom: var(--sp-3); font-size: var(--fs-xl) }
.card-flat { overflow: hidden }
/* reading on the left, commitment on the right, the mention under its button */
.card-act { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--bord) }
.card-act .cta-go { margin-left: auto }
.bankcols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: var(--sp-5); margin-top: var(--sp-5) }
.prosgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-4) }

/* « métier par métier » (T15): facts point by point, in the ink of the text;
   no verdict, no band, no colour that would judge the bank */
.fits { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--bord) }
.fits-lead { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.fitgrid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); gap: var(--sp-3);
}
.fitcard { display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-4) var(--sp-3) }
.fit-job { font-size: var(--fs-base); font-weight: 600; color: var(--encre) }
.fit-lines { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2) }
.fit-lines li { font-size: var(--fs-xs); line-height: 1.45; color: var(--encre) }
.fit-lines b { font-weight: 500 }

/* a document is named, not recited: file, site, date */
.detail { margin-top: var(--sp-5) }
.detail .card-flat { padding: var(--sp-2) 0 var(--sp-4) }
.srclist { list-style: none; padding: 0; margin: 0; display: grid }
.srclist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md) }
.srclist li:nth-child(odd) { background: var(--lavande-10) }
.srclist a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); color: var(--encre); text-decoration: none }
.srclist a:hover { color: var(--bleu); text-decoration: underline }
.src-id { min-width: 0 }
.src-line { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0 }
.src-pdf { color: var(--frais-texte); background: var(--frais-10) }
.src-web { color: var(--bleu); background: var(--bleu-12) }
.src-host { display: block; font-size: var(--fs-xs); color: var(--sourdine) }
.source { font-size: var(--fs-xs); color: var(--sourdine); white-space: nowrap }
.fact-src { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--sourdine) }
.srclegal { margin: var(--sp-4) var(--sp-4) 0; padding: var(--sp-3) 0 var(--sp-1); border-top: 1px solid var(--bord); font-size: var(--fs-xs); line-height: 1.5; color: var(--sourdine) }

/* ---- banks list -------------------------------------------------------------------- */

.banklist {
  list-style: none; padding: 0; margin: var(--sp-5) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); align-items: stretch; gap: var(--sp-4);
}
.banklist > li { display: flex; min-width: 0 }
.bankcard { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) }
/* on a narrow card the price goes under the name rather than squeezing it */
.bankcard-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) }
.bankcard-id { flex: 1 1 140px; min-width: 0 }
.bankcard-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-h3) }
/* the title's link stretches over the whole card */
.bankcard-link { color: inherit; text-decoration: none }
.bankcard-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit }
.bankcard:hover .bankcard-link, .bankcard-link:focus-visible { color: var(--bleu) }
.bankcard-plans { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--sourdine) }
.bankcard-price { flex: none; margin-left: auto; line-height: 1.2; text-align: right }
.bankcard-pitch { font-size: var(--fs-base); font-weight: 500; line-height: 1.45; color: var(--encre) }
.bankcard-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--trait) }
.pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5) }
.pager-state { font-size: var(--fs-base); color: var(--sourdine) }

/* ---- face-off ------------------------------------------------------------------------ */

/* the columns share their rows (subgrid): the fourth zone of one faces the fourth of the other */
.duel { display: grid; grid-auto-rows: min-content; gap: var(--sp-4); margin-top: var(--sp-5) }
.duel-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.duel-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.duel-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.duel-side { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; gap: var(--sp-3); padding: var(--sp-5); text-align: center }
.duel-win { border-color: var(--bleu-40); box-shadow: var(--shadow-best) }
.duel-crown {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill); color: var(--blanc); background: var(--bleu);
}
.duel-drop {
  position: absolute; top: var(--sp-2); right: var(--sp-3);
  display: grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: var(--r-sm);
  font-size: var(--fs-lg); line-height: 1; color: var(--sourdine); text-decoration: none;
}
.duel-drop:hover { color: var(--frais-texte); background: var(--frais-10) }
.ds-head, .ds-switch, .ds-price, .ds-notes { display: grid; justify-items: center; align-content: start; gap: var(--sp-2) }
/* an empty zone keeps its row, not its height */
.ds-switch:empty, .ds-notes:empty { display: none }
.duel-side .logo { margin: 0 auto }
.duel-side h2 { font-size: var(--fs-h3) }
/* switching offer is the face-off's central gesture: it shows */
.duel-switch {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-lg); background: var(--bleu-08); border: 1px solid var(--bleu-18);
}
.duel-switch-label { width: 100%; text-align: center }
.offertabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2) }
.offertab { white-space: nowrap; text-decoration: none }
.offertab:hover { color: var(--bleu); border-color: var(--bleu-40) }
.duel-out { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 600; color: var(--sourdine) }
.duel-warn { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--frais-texte) }
.duel-cheaper { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--frais-texte) }
.duel-verdict { min-height: 3em; font-size: var(--fs-base); color: var(--sourdine) }
.duel-3 .duel-verdict, .duel-4 .duel-verdict { font-size: var(--fs-sm) }
.duel-acts { display: grid; justify-items: center; align-content: end; gap: var(--sp-2) }

/* ---- trades ------------------------------------------------------------------------ */

/* when the search is sure of nothing it proposes rather than guesses */
.nearby { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5) }
.nearby-title { font-size: var(--fs-base); color: var(--encre) }
.nearby-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.nearby-foot { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }


/* ---- guides and articles ----------------------------------------------------------- */

/* a guide's body comes from the database; its two boxes are content classes
   (.prose .takeaways, .prose .sources, in the foundation) */
.article { max-width: 68ch }
.article ol > li::marker { font-weight: 600; color: var(--bleu) }

/* ==========================================================================
   Breakpoints — screen only, widest first
   ========================================================================== */

@media screen and (max-width: 980px) {
  .bankcols { grid-template-columns: 1fr }
  .prosgrid { grid-template-columns: 1fr }
  .duel-2, .duel-3, .duel-4 { grid-template-columns: 1fr }
}

@media screen and (max-width: 720px) {
  :root { --gutter: 16px; --fs-h1: 24px; --sp-section: var(--sp-6) }

  /* a phone keeps the logo beside the title, smaller */
  .pagehead-main { align-items: flex-start; gap: var(--sp-3) }
  .pagehead-logo .logo-lg { width: 40px; height: 40px; border-radius: var(--r-md); font-size: var(--fs-md) }

  .form { padding: var(--sp-5) var(--sp-4) }
  .card { padding: var(--sp-4) }

  /* results: name and price on two rows, never squeezed side by side */
  .res-top { grid-template-columns: 26px 38px minmax(0, 1fr); row-gap: var(--sp-3) }
  .res-act { gap: var(--sp-2) }
  .res-act .btn { flex: 1 1 auto }
  /* a phone: the button full width first, the two links under it */
  .res-mid .res-act { width: 100%; margin: 0; gap: var(--sp-2) var(--sp-5) }
  .res-mid .res-act .cta-go { order: -1; flex: 1 1 100%; margin: 0 }
  .res-mid .res-act .cta-go .btn { width: 100% }
  .lines th, .lines td { padding: var(--sp-2) }
  /* "how it is obtained" is a desktop comfort: the column shrinks to nothing
     instead of disappearing, so the footer's colspan still lands on the total */
  .lines .line-how, .lines thead th:nth-child(2) { padding: 0; font-size: 0 }

  /* the selection never eats the screen: logos, count, action */
  /* the selection floats above the mobile action bar, never under it */
  .basket { bottom: calc(var(--dock-h) + var(--sp-3)); width: auto }
  .basket-inner { flex-wrap: nowrap; gap: var(--sp-3); padding: var(--sp-3) }
  .basket-label, .basket-name, .basket-go-long { display: none }
  .basket-list { flex: none; gap: var(--sp-1) }
  .basket-list li { padding: var(--sp-1) }
  .basket-act { flex: 1; justify-content: flex-end; gap: var(--sp-3) }
  .basket-act .btn { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); white-space: nowrap }
  .basket-go-short { display: inline }
  .basket-hint { font-size: var(--fs-xs) }

  /* the frozen column never eats the screen: room for at least one value */
  .gridwrap { scroll-padding-left: 42vw }
  .pricegrid thead th { padding: var(--sp-3) }
  .pricegrid thead th[scope="col"] { scroll-margin-left: 42vw }
  .pricegrid th[scope="row"] {
    width: 42vw; min-width: 0; max-width: 42vw; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
    line-height: 1.3; white-space: normal;
  }
  .pricegrid td { padding: var(--sp-2) var(--sp-3) }
  .plan-name { font-size: var(--fs-base) }
  .gridhead-label { padding: 0 var(--sp-3) }

}

@media screen and (max-width: 560px) {
  .basket-inner { flex-wrap: wrap; justify-content: center }
}

/* a narrow search field: the button under the field, full width, the same inset
   all round, the pill turned into a card whose curve the button follows */
@container searchbox (max-width: 460px) {
  .searchbox-box { --sb-r: var(--r-xl); flex-wrap: wrap; row-gap: var(--sb-pad) }
  .searchbox-go { flex: 1 1 100%; margin-left: calc(var(--sb-pad) - var(--sp-4)) }
}

/* ==========================================================================
   Motion — every transition, animation and smooth scroll stops on request
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .glass-lift:hover, .btn:active { transform: none }
}

/* ==========================================================================
   Print — the ranking, the bank sheet and the face-off on white paper
   ========================================================================== */

@media print {
  @page { margin: 12mm }
  body { background: var(--blanc); font-size: 11pt }
  a { text-decoration: underline }
  .lueur, .crumbs, .btn, .cta-go, .mention, .basket,
  .entry-profilebar-skip, .duel-drop, .ds-switch,
  .gridlegend, .card-act { display: none }
  .glass-soft, .glass, .glass-tint, .pricetag, .rescard-best {
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--bord-champ);
  }
  .rescard, .duel-side, .fold, .srclist li, .pricegrid tr, .lines tr { break-inside: avoid }
  .gridwrap { overflow: visible; border-radius: 0 }
  .pricegrid { font-size: 8.5pt }
  .pricegrid thead th { position: static; padding: var(--sp-1) var(--sp-2); white-space: normal; -webkit-backdrop-filter: none; backdrop-filter: none }
  .pricegrid thead th:first-child { box-shadow: none }
  .pricegrid th[scope="row"] { position: static; min-width: 0; padding: var(--sp-1) var(--sp-2); box-shadow: none }
  .pricegrid th[scope="row"]::after, .pricegrid thead th:first-child::after { content: none }
  .pricegrid td { padding: var(--sp-1) var(--sp-2); white-space: normal }
  /* the offer columns must fit the sheet: the prices are on the first row already */
  .pricegrid thead .pricetag { display: none }
  .colhead-price { min-height: 0 }
  .plan-name { font-size: 10pt }
  .card-flat { overflow: visible }
  .duel-2, .duel-3, .duel-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ==== foundation: shared components and the site shell ==== */
/* This section carries its own breakpoints at its end, widest first, then the
   motion and the fallback for browsers without popover. */

/* ---- shell: icons, skip link, sticky header, menus, footer, mobile dock ------ */

html { scroll-padding-top: calc(var(--head-h) + var(--sp-3)) }
main[tabindex]:focus { outline: none }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
/* one stroke for every icon; --icon resizes it from any parent, to 16, 20 or 24 px
   only, a number of pixels, and the stroke is compensated to stay at 1.5 px on
   screen at each size: 30 / 16 = 1.875 units of the 20 grid, 30 / 24 = 1.25 (GRA §3) */
.icon {
  flex: none; width: calc(var(--icon, 20) * 1px); height: calc(var(--icon, 20) * 1px); vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: calc(30 / var(--icon, 20)); stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: absolute; top: var(--sp-2); left: var(--sp-3); z-index: 60; transform: translateY(-200%);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 500; color: var(--blanc); background: var(--bleu); text-decoration: none;
}
.skip:focus { transform: none }

.sitehead {
  position: sticky; top: 0; z-index: 30; height: var(--head-h);
  background: color-mix(in srgb, var(--fond) 86%, transparent); border-bottom: 1px solid var(--bord);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  view-transition-name: sitehead;
}
.sitehead-in {
  width: min(100% - 2 * var(--gutter), var(--page-max)); height: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
}
/* on a wide screen the menu is the header's own row; under 980 px, a sheet */
.sitemenu {
  position: static; inset: auto; display: flex; align-items: center; gap: var(--sp-4); flex: 1; min-width: 0;
  width: auto; height: auto; margin: 0; padding: 0; overflow: visible;
  color: inherit; background: none; border: 0;
}
.sitemenu-head { display: none }
.sitemenu-close {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  color: var(--encre); background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
}
.sitemenu-close:hover { background: var(--encre-06) }

.sitenav { flex: none }
.sitenav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp-1) }
.navlink {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 36px; padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-base); font-weight: 400; color: var(--sourdine); white-space: nowrap;
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer; text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.navlink:hover { color: var(--encre); background: var(--encre-06) }
.navlink[aria-current] { color: var(--bleu-fonce); font-weight: 500; background: var(--bleu-08) }
.navtrigger .icon { --icon: 16; transition: transform var(--t) }
.navmenu:has(.mega:popover-open) .navtrigger { color: var(--encre); background: var(--encre-06) }
.navmenu:has(.mega:popover-open) .navtrigger .icon { transform: rotate(180deg) }
.navfallback { display: none }

/* a panel drops under the header, centred on the page: no anchor positioning needed */
.mega {
  position: fixed; inset: calc(var(--head-h) + var(--sp-2)) 0 auto; margin: 0 auto;
  width: min(100% - 2 * var(--gutter), 940px); max-height: calc(100dvh - var(--head-h) - var(--sp-6)); overflow: auto;
  padding: var(--sp-5); color: var(--encre); background: var(--blanc);
  border: 1px solid var(--bord); border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
}
.mega:popover-open { animation: megain var(--t) ease-out }
@keyframes megain { from { opacity: 0; translate: 0 -6px } }
.mega-narrow { width: min(100% - 2 * var(--gutter), 660px) }
.mega-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-3) }
.megabanks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2) }
.megabanks a {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 500; text-decoration: none; transition: background var(--t-fast);
}
.megabanks a:hover { background: var(--givre) }
.megajobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5) }
.megajobs-cat { display: block; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; text-decoration: none }
.megajobs-cat:hover { color: var(--bleu) }
.megajobs-trades { list-style: none; margin: var(--sp-1) 0 0; padding: 0 }
.megajobs-trades a { display: block; font-size: var(--fs-sm); line-height: 24px; color: var(--sourdine); text-decoration: none }
.megajobs-trades a:hover { color: var(--bleu) }
.megalinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2) }
.megalinks a {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-base); text-decoration: none; transition: background var(--t-fast);
}
.megalinks a:hover { background: var(--givre) }
.megalinks .icon { color: var(--bleu) }
.megalinks b { display: block; font-weight: 500; line-height: 1.35 }
.megalinks small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine) }

/* the search is a page of its own: a discreet magnifier leads there */
.sitehead-search {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  color: var(--sourdine); text-decoration: none; transition: color var(--t-fast), background var(--t-fast);
}
.sitehead-search:hover, .sitehead-search[aria-current] { color: var(--encre); background: var(--encre-06) }
/* the one button of the site with an icon: the header's call to action */
.sitehead-cta { flex: none; padding: var(--sp-2) var(--sp-4) }
.sitehead-cta .icon { --icon: 16 }
.sitehead-burger {
  display: none; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto;
  color: var(--encre); background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
}
.sitehead-burger:hover { background: var(--encre-06) }

.sitefoot {
  position: relative; z-index: 1; margin-top: var(--sp-7); padding: var(--sp-6) 0 var(--sp-5);
  font-size: var(--fs-sm); color: var(--sourdine);
  background: linear-gradient(180deg, var(--lavande-10), var(--lavande-16)); border-top: 1px solid var(--bord);
}
.sitefoot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: var(--sp-6) }
.sitefoot-brand p { max-width: 30ch; margin-top: var(--sp-2) }
.sitefoot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5) }
.sitefoot-cols .overline { margin-bottom: var(--sp-2); color: var(--encre) }
.sitefoot-cols ul { list-style: none; margin: 0; padding: 0 }
.sitefoot-cols a { display: inline-block; line-height: 24px; text-decoration: none }
.sitefoot-cols a:hover { color: var(--bleu); text-decoration: underline }
.sitefoot-legal { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--bord); font-size: var(--fs-xs); font-weight: 400; line-height: 1.5 }
.sitefoot-legal p + p { margin-top: var(--sp-2) }
.sitefoot-legal a { color: var(--bleu) }

.dock { display: none }

/* ---- form controls the shell brings --------------------------------------------- */

input[type="range"] { width: 100%; accent-color: var(--bleu); cursor: pointer }
output { font-weight: 600; color: var(--encre) }

/* ---- components ------------------------------------------------------------------ */

/* shead: a section head, 20 px in weight 600, one section gap above it and one
   title gap under it; on the right « Tout voir », then a rail's arrows */
.shead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-section) 0 var(--sp-title) }
.shead-text { flex: 1 1 auto; min-width: 0 }
.shead-title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; letter-spacing: -.005em }
.shead-lead { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--sourdine) }

/* stat: the figure first, then what it measures */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-3) }
/* a tile is its own container: in a narrow column the figure steps down with it
   (a date, « 26/08/2026 », would otherwise run past the border) */
.stat { container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--blanc-80); border: 1px solid var(--bord) }
.stat-value { font-size: var(--fs-figure); font-size: min(var(--fs-figure), 16cqi); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--encre) }
.stat-label { font-size: var(--fs-sm); line-height: 1.35; color: var(--encre) }
.stat-note { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.stat-good .stat-value { color: var(--vert) }
.stat-warn .stat-value { color: var(--ambre) }

/* bento: four columns of tiles, two on a tablet, one on a phone */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--sp-4) }
.bento-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; padding: var(--sp-5); color: inherit; text-decoration: none }
.bento-tile > .icon { --icon: 24; color: var(--bleu) }
.bento-tile .seeall { margin-top: auto }
.bento-w2 { grid-column: span 2 }
.bento-w3 { grid-column: span 3 }
.bento-w4 { grid-column: 1 / -1 }
.bento-h2 { grid-row: span 2 }
.bento-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3 }
.bento-text { font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; color: var(--sourdine) }
.bento-figure { font-size: var(--fs-figure-lg); font-weight: 600; line-height: 1.05; letter-spacing: -.02em }

/* filters: GET links, the active one filled */
.filters { margin: var(--sp-3) 0 }
/* positioned, so a scrolling list clips the screen reader's words of an active
   filter (.sr-only is absolute): they widened the page to 514 px at 390 (S8-10) */
.filterlist { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.filter {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--encre); text-decoration: none;
  background: var(--blanc); border: 1px solid var(--bord);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.filter .icon { --icon: 16; color: var(--sourdine) }
.filter:hover { color: var(--bleu); border-color: var(--bleu-40) }
.filter[aria-current] { color: var(--bleu); border-color: var(--bleu) }
.filter[aria-current] .icon { color: inherit }
.filter-x { display: inline-flex; margin-right: calc(-1 * var(--sp-1)) }
.filter-x .icon { --icon: 16 }
.filter-count { min-width: 20px; padding: 0 var(--sp-1); border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; text-align: center; color: var(--sourdine); background: var(--encre-06) }
.filter[aria-current] .filter-count { color: var(--bleu); background: var(--bleu-08) }

/* callout: the icon says the kind, the colour repeats it */
.callout { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--bord); font-size: var(--fs-base); line-height: 1.5 }
.callout > .icon { margin-top: 1px }
.callout-body { min-width: 0 }
.callout-body p + p { margin-top: var(--sp-1) }
.callout-body .seeall { margin-top: var(--sp-2) }
.callout-title { font-weight: 600; color: var(--encre) }
.callout-info { background: var(--bleu-08); border-color: var(--bleu-18) }
.callout-info > .icon { color: var(--bleu) }
.callout-warn { background: var(--ambre-10); border-color: var(--ambre-28) }
.callout-warn > .icon { color: var(--ambre) }
.callout-save { background: var(--vert-10); border-color: var(--vert-28) }
.callout-save > .icon { color: var(--vert) }

/* stepper: numbered steps joined by a thread (.steps is the bank page's list) */
.stepper { list-style: none; margin: var(--sp-3) 0 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-4) }
.stepper-item { position: relative; min-height: 32px; padding-left: calc(32px + var(--sp-4)); counter-increment: step }
.stepper-item::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: var(--fs-base); font-weight: 600; color: var(--blanc); background: var(--bleu);
}
.stepper-item:not(:last-child)::after { content: ""; position: absolute; top: 36px; bottom: calc(-1 * var(--sp-4) + 4px); left: 15px; width: 2px; border-radius: var(--r-pill); background: var(--bleu-18) }
.stepper-title { padding-top: var(--sp-1); font-weight: 600; line-height: 1.4 }
.stepper-body { margin-top: var(--sp-1); font-size: var(--fs-base); color: var(--sourdine) }
.stepper-meta {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; color: var(--bleu-fonce); background: var(--bleu-08);
}
.stepper-meta .icon { --icon: 16 }
.stepper-when { display: none }

/* timeline (timeline.go, V1): an axis draws the days of the steps below it,
   aria-hidden, placed by Go; a phone reads the days in a gutter of the steps */
.timeline { margin: var(--sp-3) 0 0 }
.timeline-axis { position: relative; height: 76px; margin: var(--sp-4) 14px 0 }
.timeline-axis svg { position: absolute; top: 34px; left: 0; width: 100%; height: 4px; overflow: visible }
.timeline-axis line { stroke: var(--bleu-18); stroke-width: 2; vector-effect: non-scaling-stroke }
.timeline-axis rect { fill: var(--bleu) }
.timeline-axis span { position: absolute; transform: translateX(-50%); font-size: var(--fs-xs); white-space: nowrap }
.timeline-mark { top: 24px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--sp-1); border-radius: var(--r-pill); font-weight: 600; color: var(--blanc); background: var(--bleu) }
.timeline-day { top: 0; color: var(--sourdine) }
.timeline-span { top: 56px; font-weight: 500; color: var(--bleu-fonce) }
.timeline-axis .timeline-start { transform: none }
.timeline-axis .timeline-end { transform: translateX(-100%) }
@media screen and (max-width: 720px) {
  .timeline-axis { display: none }
  .timeline .stepper-item { padding-left: calc(104px + var(--sp-4)) }
  .timeline .stepper-item::before { left: 72px }
  .timeline .stepper-item:not(:last-child)::after { left: 87px }
  .timeline .stepper-when { display: block; position: absolute; top: 8px; left: 0; width: 68px; font-size: var(--fs-2xs); font-weight: 600; line-height: 1.3; color: var(--bleu-fonce) }
}

/* badge: « Meilleur pour… », always computed */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
  color: var(--vert-texte); background: var(--vert-10); border: 1px solid var(--vert-28);
}
.badge .icon { --icon: 16 }

/* costbars: one scale for every bar, the five postes in a fixed order, each with
   its colour and its own texture so no reader depends on the hue */
.costbars { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-xl); background: var(--blanc-80); border: 1px solid var(--bord) }
.costbars-cap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-4) }
.costbars-title { font-size: var(--fs-base); font-weight: 600 }
.costkeys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.costkey { display: inline-flex; align-items: center; gap: var(--sp-2) }
.costswatch { flex: none; width: 16px; height: 10px; border-radius: 2px; print-color-adjust: exact; -webkit-print-color-adjust: exact }
.costswatch-open { background: none; border: 1.5px dashed var(--sourdine) }
.costrows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3) }
.costrow { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--sp-4) }
.costrow-id { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); text-decoration: none }
a.costrow-id:hover .costrow-name { color: var(--bleu) }
.costrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }
.costrow-plan { font-weight: 400; color: var(--sourdine) }
.costrow-track { display: block; height: 18px; border-radius: var(--r-sm); background: var(--encre-06) }
.costrow-bar { display: flex; gap: 2px; height: 100%; max-width: 100% }
/* an inner ink hairline holds each segment's edge at 3:1 on the track */
.costseg {
  display: block; flex: 1 1 0; min-width: 3px; height: 100%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encre) 22%, transparent);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.costseg:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm) }
.costseg:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0 }
.costseg:only-child { border-radius: var(--r-sm) }
/* one code on every bar: a partial total ends on an open dashed cap (hatches are
   the encaissement's), a zero is a green dot at the origin, never a stub */
.bar-open::after {
  content: ""; flex: none; width: 12px; border: 1.5px dashed var(--sourdine); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bar-zero { position: relative }
.bar-zero::before {
  content: ""; position: absolute; inset: 0 auto 0 2px; width: 10px; height: 10px; margin: auto 0;
  border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px var(--vert-10);
}
.costrow-total { font-weight: 600; text-align: right; white-space: nowrap }
.costrow-min { font-size: var(--fs-xs); font-weight: 400; color: var(--ambre) }
.poste-abonnement { background: var(--poste-abonnement) }
.poste-operations { background: repeating-linear-gradient(45deg, var(--blanc-40) 0 1.5px, transparent 1.5px 5px), var(--poste-operations) }
.poste-cartes { background: radial-gradient(circle, var(--blanc-60) 1px, transparent 1.6px) 0 0 / 5px 5px, var(--poste-cartes) }
.poste-encaissement { background: repeating-linear-gradient(-45deg, var(--blanc-40) 0 1.5px, transparent 1.5px 5px), var(--poste-encaissement) }
.poste-international { background: repeating-linear-gradient(0deg, var(--blanc-40) 0 1.5px, transparent 1.5px 5px), var(--poste-international) }
.costbars-more { margin-top: var(--sp-4) }
.costbars-more > summary { width: fit-content; min-height: 24px; padding-block: 2px; font-size: var(--fs-sm); color: var(--bleu); cursor: pointer }
.costtable-wrap { margin-top: var(--sp-2); overflow-x: auto }
.costtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm) }
.costtable th, .costtable td { padding: var(--sp-2) var(--sp-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--trait) }
.costtable tbody th { font-weight: 500 }
.costtable .num { text-align: right }
/* price chart (UX-05, L8): an axis in euros from 0, at most five banks on it,
   each a point with its logo, its name and its amount. Go places each point
   (--x) and its lane (--l; --lw from a 560 px figure) so no two labels of a
   lane meet; a dashed stem joins a raised point to the axis, under every label */
.pchart { container: pchart / inline-size; max-width: 760px; margin-top: var(--sp-4); --lh: 40px }
.pchart-lead { margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 500 }
.pchart-plot { --lanes: var(--n); position: relative; isolation: isolate; height: calc(var(--lanes) * var(--lh)); margin: 0 15px; border-bottom: 1.5px solid var(--encre-20) }
.pchart-pin { --lane: var(--l); position: absolute; left: var(--x); bottom: calc(var(--lane) * var(--lh)); display: flex; align-items: center; gap: 6px; height: var(--lh); translate: -15px 0; white-space: nowrap }
.pchart-left { flex-direction: row-reverse; translate: calc(15px - 100%) 0; text-align: right }
.pchart-dot { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blanc); border: 1.5px solid var(--bord) }
.pchart-dot::after { content: ""; position: absolute; z-index: -1; top: 100%; left: 50%; height: calc(var(--lane) * var(--lh) + (var(--lh) - 30px) / 2); border-left: 1px dashed var(--encre-20) }
.pchart-dot .logo { width: 20px; height: 20px }
.pchart-tag { display: grid; line-height: 1.25 }
.pchart-name { font-size: var(--fs-xs); font-weight: 500 }
.pchart-amount { font-size: var(--fs-sm); font-weight: 600 }
.pchart-low .pchart-dot { border: 2px solid var(--vert); box-shadow: 0 0 0 3px var(--vert-10) }
.pchart-low .pchart-amount { color: var(--vert-texte) }
.pchart-open .pchart-dot { border-style: dashed; border-color: var(--sourdine) }
.pchart-mark .pchart-dot { border: 2px solid var(--encre) }
.pchart-mark .pchart-name { font-weight: 700 }
.pchart-duel .pchart-pin:not(.pchart-mark) { color: var(--sourdine) }
.pchart-median { position: absolute; z-index: -1; left: var(--x); top: 0; bottom: 0; border-left: 2px solid var(--sourdine) }
.pchart-axis { position: relative; height: 22px; margin: 0 15px; font-size: var(--fs-2xs); color: var(--sourdine) }
.pchart-tick { position: absolute; top: 5px; left: var(--x); translate: calc(-1 * var(--x)) 0; white-space: nowrap }
.pchart-tick::before { content: ""; position: absolute; top: -5px; left: var(--x); height: 4px; border-left: 1px solid var(--encre-20) }
.pchart-cap { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--sourdine) }
.pchart-key, .pchart-median-key { display: inline-block; vertical-align: -.1em }
.pchart-key { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--sourdine) }
.pchart-median-key { width: 2px; height: .9em; background: var(--sourdine) }
@container pchart (min-width: 560px) {
  .pchart-plot { --lanes: var(--nw) }
  .pchart-pin { --lane: var(--lw) }
}
/* statement (V4): a generic statement on white paper, the postes and their
   lines, then the bar they make; no bank's look */
.statement { max-width: 560px; margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--blanc); border: 1px solid var(--bord) }
.statement-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm) }
.statement-cap { margin-bottom: var(--sp-2); text-align: left; font-weight: 500 }
.statement-cap .overline { display: block }
.statement-table th { padding: var(--sp-1) 0; font-weight: 400; text-align: left; vertical-align: top }
.statement-table td { padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); text-align: right; vertical-align: top; white-space: nowrap }
.statement-table small { display: block; font-size: var(--fs-xs); color: var(--sourdine) }
.statement-poste > * { padding-top: var(--sp-3); font-weight: 600; border-bottom: 1px dashed var(--bord) }
.statement-line { display: flex; gap: var(--sp-2) }
.statement-line .costswatch { margin-top: 5px }
.statement-table tfoot > tr > * { padding-top: var(--sp-3); border-top: 2px solid var(--encre); font-size: var(--fs-base); font-weight: 600 }
.statement .costrow-track { margin-top: var(--sp-3) }
.statement-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--sourdine) }

/* prose boxes: the guides' « À retenir » and their dated sources, written in the
   content stored in base (css_test.go lists them as content classes) */
.prose .takeaways { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--bleu-08); border: 1px solid var(--bleu-18) }
.prose .takeaways h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-fonce) }
.prose .takeaways li { margin: var(--sp-2) 0; font-size: var(--fs-base) }
.prose .sources { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--bord) }
.prose .sources h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine) }
.prose .sources li { margin: var(--sp-1) 0; font-size: var(--fs-sm); color: var(--sourdine) }

/* ---- shell pages: errors, search, about, style guide ----------------------------- */

.errpage { max-width: 820px; margin: 0 auto; padding: var(--sp-6) 0 var(--sp-3); text-align: center }
.errpage h1 { margin-top: var(--sp-3) }
.errpage-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--sourdine) }
.errpage-note a { color: var(--bleu) }
.ways { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); text-align: left }
.way { display: flex; align-items: flex-start; gap: var(--sp-3); height: 100%; padding: var(--sp-4); text-decoration: none }
.way .icon { color: var(--bleu) }
.way b { display: block; font-weight: 600 }
.way small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }

.searchpage { max-width: 880px; padding-top: var(--sp-3) }
.searchprofile { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); text-decoration: none }
.searchprofile > .icon { color: var(--bleu) }
.searchprofile-text { flex: 1; min-width: 0 }
.searchprofile b { display: block; margin-top: var(--sp-1); font-weight: 600 }
.searchprofile:hover b { color: var(--bleu) }
.searchcount { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.searchgroup { margin-top: var(--sp-5) }
.searchgroup-title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-md) }
.searchgroup-title .icon { color: var(--bleu) }
.hits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2) }
.hit {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4); text-decoration: none;
  border-radius: var(--r-md); background: var(--blanc-60); border: 1px solid var(--bord);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hit:hover { background: var(--blanc); border-color: var(--bleu-40) }
.hit > span { flex: 1; min-width: 0 }
.hit b { display: block; font-weight: 500 }
.hit small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }
.hit > .icon { color: var(--lavande) }
.hit:hover > .icon { color: var(--bleu) }
.hits-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.hits-chips .hit { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); background: var(--blanc); border-radius: var(--r-pill) }
.searchmore { margin-top: var(--sp-3) }

.about-block > p { margin-top: var(--sp-2); line-height: 1.65 }
.about-block a:not(.seeall) { color: var(--bleu) }
.about-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5) }
.facts { display: grid; margin: var(--sp-3) 0 0 }
.facts div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--trait) }
.facts dt { font-size: var(--fs-sm); color: var(--sourdine) }

.sg { padding-bottom: var(--sp-4) }
.sg code { font-family: var(--f-mono); font-size: var(--fs-xs) }
.sg-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3) }
.sg-toc a { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-sm); text-decoration: none; background: var(--blanc); border: 1px solid var(--bord) }
.sg-toc a:hover { color: var(--bleu); border-color: var(--bleu-40) }
.sg-section { margin-top: var(--sp-6); padding-top: var(--sp-1); border-top: 1px solid var(--bord) }
.sg-note { margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.sg-api { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.sg-api code { padding: 0 var(--sp-1); border-radius: var(--r-sm); color: var(--encre); background: var(--givre) }
.sg-text { max-width: 72ch; margin-top: var(--sp-2) }
.sg-swatches { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp-3) }
.sg-swatches li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: var(--sp-3) }
.sg-swatches small { grid-column: 2; font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine) }
.sg-swatch { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--bord) }
.sg-display { font-size: var(--fs-display); font-weight: 300; line-height: 1.1; letter-spacing: -.015em }
.sg-h1 { margin: var(--sp-3) 0; font-size: var(--fs-h1); font-weight: 600; line-height: 1.25 }
.sg-h3 { margin: var(--sp-2) 0; font-size: var(--fs-h3); font-weight: 600 }
.sg-sizes { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--sourdine) }
.sg-sizes li { display: flex; gap: var(--sp-2) }
.sg-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2) }
.sg-icons li { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); background: var(--blanc); border: 1px solid var(--trait) }
/* the test of GRA §3: every drawing at 16 px on lavender */
.sg-small { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); border-radius: var(--r-lg); background: var(--lavande-16); --icon: 16 }
.sg-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3) }
.sg-logos li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--blanc); border: 1px solid var(--trait) }
.sg-logos small { flex-basis: 100%; font-size: var(--fs-xs); color: var(--sourdine) }
.sg-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3) }
.sg-stack { display: grid; gap: var(--sp-3) }
.sg-demo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) }
.sg-demo input { flex: 1 1 200px }
.sg-code { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); overflow-x: auto; border-radius: var(--r-md); font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.6; background: var(--givre); border: 1px solid var(--trait) }

.sg-sub { margin: var(--sp-5) 0 var(--sp-1); font-size: var(--fs-base); font-weight: 600; color: var(--sourdine) }
.sg-caption { font-size: var(--fs-xs); color: var(--sourdine) }
.sg-frame { padding: var(--sp-5) }
.sg-hero { padding: var(--sp-8) var(--sp-4); text-align: center }
.sg-covers { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--sp-4) }
.sg-covers li { display: grid; gap: var(--sp-2) }
.sg-covers small { font-size: var(--fs-xs); color: var(--sourdine) }

/* ---- library: rails, banners, pillars, trade picker, freshness, art (lib_*.go) ---- */

/* rail: cards in a row that scrolls sideways, snapped. The edges fade where cards
   remain: the script says where the row stands (data-at); without it the end fades.
   Six zones in six rows, passed down by subgrids, line up across the cards */
.rail { position: relative; margin: var(--sp-3) 0 var(--sp-5) }
.rail-track {
  --rail-w: clamp(248px, 26vw, 320px); --rail-fade-l: 0px; --rail-fade-r: var(--sp-7);
  --rail-mask: linear-gradient(90deg, transparent, #000 var(--rail-fade-l), #000 calc(100% - var(--rail-fade-r)), transparent);
  list-style: none; margin: 0; padding: var(--sp-2) var(--sp-1) var(--sp-4);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-w); grid-template-rows: repeat(6, auto); gap: 0 var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-1); scrollbar-width: thin;
  -webkit-mask-image: var(--rail-mask); mask-image: var(--rail-mask);
}
.rail[data-at="none"] .rail-track { --rail-fade-r: 0px }
.rail[data-at="middle"] .rail-track { --rail-fade-l: var(--sp-7) }
.rail[data-at="end"] .rail-track { --rail-fade-l: var(--sp-7); --rail-fade-r: 0px }
/* with the arrows the bar goes; the wheel, the finger and the keys still scroll */
.rail[data-at] .rail-track { scrollbar-width: none }
.rail[data-at] .rail-track::-webkit-scrollbar { display: none }
.rail-item { grid-row: span 6; display: grid; grid-template-rows: subgrid; min-width: 0; scroll-snap-align: start }
.rail-card { grid-row: span 6; display: grid; grid-template-rows: subgrid; min-width: 0; overflow: hidden; color: inherit; text-decoration: none }
.rail-media { display: block; overflow: hidden; background: var(--givre) }
.rail-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t) ease }
.rail-card:hover .rail-img { transform: scale(1.02) }
.rail-body { grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; gap: var(--sp-1); align-items: start; min-width: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4) }
.rail-ico { grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--sp-2); border-radius: var(--r-md); color: var(--bleu); background: linear-gradient(135deg, var(--bleu-08), var(--lavande-16)); --icon: 24 }
.rail-kicker { grid-row: 2; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine) }
.rail-title { grid-row: 3; font-size: var(--fs-md); font-weight: 600; line-height: 1.3; color: var(--encre) }
.rail-text { grid-row: 4; font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; color: var(--sourdine) }
.rail-body > .rail-cue { grid-row: 5; margin-top: var(--sp-2) }
/* a promoted card (Z3): its label in the kicker's zone, never in capitals (T7) */
.rail-body .banner-label { grid-row: 2; justify-self: start }
.rail-all { margin-top: calc(-1 * var(--sp-2)); text-align: right }
/* the arrows exist only with the script (pezo.js writes them), never on a touch
   screen; they sit in the section head, never over a card */
.rail-nav { display: flex; gap: var(--sp-2); flex: none }
.rail > .rail-nav { justify-content: flex-end; margin-bottom: var(--sp-2) }
.rail-nav [data-rail-arrow] {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; --icon: 16;
  color: var(--encre); background: var(--blanc); border: 1px solid var(--bord); border-radius: 50%; cursor: pointer;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rail-nav [data-rail-arrow]:hover { color: var(--bleu); border-color: var(--bleu-40) }
.rail-nav [data-rail-arrow]:disabled { opacity: .35; cursor: default; color: var(--encre); border-color: var(--bord) }
.rail-nav[hidden] { display: none }

/* portrait: the picture fills the card, its first row the picture's alone; a veil
   of 90 % ink under the words keeps white text at AA on any photograph */
.rail-portrait .rail-track { --rail-w: clamp(172px, 17vw, 216px); grid-template-rows: 112px repeat(5, auto) }
.rail-portrait .rail-card {
  position: relative; border-radius: var(--r-xl);
  color: var(--blanc); background: var(--encre); box-shadow: var(--shadow-glass-soft); transition: box-shadow var(--t) ease;
}
.rail-portrait .rail-card:hover { box-shadow: var(--shadow-lift) }
.rail-portrait .rail-media { position: absolute; inset: 0 }
.rail-portrait .rail-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--encre) 58%, transparent) 56%, color-mix(in srgb, var(--encre) 90%, transparent) 82%);
}
.rail-portrait .rail-body { position: relative; padding: var(--sp-4) }
.rail-portrait .rail-ico { width: 34px; height: 34px; color: var(--blanc); background: var(--blanc-12); box-shadow: inset 0 0 0 1px var(--blanc-40); --icon: 20 }
.rail-portrait .rail-title { color: var(--blanc) }
.rail-portrait .rail-kicker, .rail-portrait .rail-text { color: var(--blanc-90) }

/* landscape: a 16:9 picture above, the words under it */
.rail-landscape .rail-media { aspect-ratio: 16 / 9 }

.rail-tool .rail-track { --rail-w: clamp(248px, 24vw, 296px) }
.rail-tool .rail-body { padding: var(--sp-5) }
.rail-bars { display: grid; gap: var(--sp-1) }
/* the name and the amount on one line, the track on its own across the card: one
   length for every track (a track beside an amount drew a dearer bank shorter);
   the fill is neutral ink, a glimpse and not a signal */
.rail-bar { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-auto-flow: dense; gap: 2px var(--sp-2); font-size: var(--fs-2xs); font-weight: 400; line-height: 1.5; color: var(--sourdine) }
.rail-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rail-bar-track { grid-column: 1 / -1; display: block; height: 6px; border-radius: var(--r-pill); background: var(--encre-06) }
.rail-bar-fill { display: flex; height: 100%; border-radius: inherit }
.rail-bar-fill::before { content: ""; flex: 1; border-radius: inherit; background: color-mix(in srgb, var(--encre) 45%, transparent) }
.rail-bar-amount { font-weight: 600; color: var(--encre); white-space: nowrap }

/* expand: a plain rail; on a wide screen with a pointer, the card under it or the
   focus widens and shows its promise, the first one otherwise */
.rail-expand .rail-track { --rail-w: clamp(224px, 68vw, 280px) }
.rail-expand .rail-body { padding: var(--sp-4) }
.rail-expand .rail-text { font-size: var(--fs-sm); line-height: 1.45; color: var(--encre) }
.rail-more { grid-row: 5; align-self: stretch; display: grid; align-content: space-between; gap: var(--sp-2) }
.rail-more-text { font-size: var(--fs-sm); line-height: 1.45; color: var(--sourdine); max-width: 30rem }
.rail-cue { font-size: var(--fs-sm); font-weight: 600; color: var(--bleu) }

/* banner: a promoted space in the page's own clothes. Its label never hides, its one
   link covers the whole box */
.banner { position: relative; margin: var(--sp-5) 0 }
.banner-in { display: flex; align-items: center; gap: var(--sp-4) }
.banner-visual {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--r-lg);
  color: var(--bleu); background: var(--blanc-80); box-shadow: 0 0 0 1px var(--lavande-28), var(--shadow-glass-soft); --icon: 24;
}
.banner-body { flex: 1; min-width: 0 }
/* the mention is read before the rest: never smaller than the text it heads, in
   ink, no capitals (texte T7, MON-07; test) */
.banner-label { font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; color: var(--encre) }
.banner-paid .banner-label { display: inline-block; padding: 0 var(--sp-2); line-height: 1.7; border: 1px solid var(--bord-champ); border-radius: var(--r-sm) }
.banner-title { margin-top: var(--sp-1); font-size: var(--fs-md); font-weight: 600; line-height: 1.35 }
.banner-text { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--sourdine) }
.banner-why { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--sourdine) }
.banner-go { flex: none; white-space: nowrap }
/* the secondary button's link covers the whole banner */
.banner-go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl) }
.banner:hover .banner-go { background: var(--bleu-08); border-color: var(--bleu) }
/* band: full width through its border image, painted outside the box, so it never
   widens the page */
.banner-band { padding: var(--sp-5) 0; border-image: linear-gradient(180deg, transparent, var(--lavande-10) 16%, var(--lavande-16) 50%, var(--lavande-10) 84%, transparent) fill 0 / 0 / 0 100vw }
.banner-inset { padding: var(--sp-4) var(--sp-5); background: linear-gradient(115deg, var(--lavande-16), transparent 55%), var(--glass-soft-bg) }

/* pillars: the principles in a full-width band, no card, no figure; the tint is a
   border image painted outside the box, so the page never widens */
.pillars {
  position: relative; margin: var(--sp-7) 0; padding: var(--sp-6) 0 var(--sp-5);
  border-image: linear-gradient(180deg, transparent, var(--lavande-16) 22%, var(--lavande-10) 70%, transparent) fill 0 / 0 / 0 100vw;
}
.pillars-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--sp-5) }
.pillar { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-1) var(--sp-5) }
.pillar + .pillar { border-left: 1px solid var(--bord) }
.pillar > .icon { --icon: 24; margin-bottom: var(--sp-1); color: var(--bleu) }
.pillar-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3 }
.pillar-text { font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; color: var(--sourdine) }
.pillars-more { display: flex; width: fit-content; margin: var(--sp-5) 0 0 auto; padding-right: var(--sp-5) }

/* « Les banques comparées » (home.html, M-08a): each bank's mark and name, in
   alphabetical order, as many per line as fit */
.hbanks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sp-3) }
.hbank { display: flex; align-items: center; gap: var(--sp-3); height: 100%; padding: var(--sp-3); font-size: var(--fs-base); font-weight: 500; line-height: 1.3; color: inherit; text-decoration: none }
.hbanks-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }

/* trade picker (tradepicker.html): tab n shows the tiles of data-fam n, the first
   the data-top ones; a CSS counter counts what is shown */
.tradepicker { container: lib-tp / inline-size }
.tradepicker-panel { margin-top: var(--sp-4) }
/* folded: the panel unrolls under the field, over the page; the focus opens it
   without the script (the pointer keeps it open for a click), data-open with it */
.tradepicker-fold { position: relative; z-index: 6 }
.tradepicker-fold .tradepicker-panel {
  position: absolute; top: calc(100% - 1px); right: 0; left: 0; z-index: 1;
  display: none; max-height: min(64vh, 480px); margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); overflow-y: auto; overscroll-behavior: contain;
  background: var(--blanc); border: 1px solid var(--bleu); border-top-color: var(--trait);
  border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: var(--shadow-pop);
}
.tradepicker-fold:not([data-js]):focus-within .tradepicker-panel,
.tradepicker-fold:not([data-js]) .tradepicker-panel:hover,
.tradepicker-fold[data-open] .tradepicker-panel { display: block }
/* open, the field and the panel read as one: its lower corners square off */
.tradepicker-fold:not([data-js]):focus-within .searchbox-box,
.tradepicker-fold[data-open] .searchbox-box { border-radius: var(--sb-r) var(--sb-r) 0 0; box-shadow: var(--shadow-pop) }
.tradepicker-tabs {
  display: flex; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-2); overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-5)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-5)), transparent);
}
.tradepicker-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500;
  color: var(--sourdine); background: var(--blanc-80); border: 1px solid var(--bord); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.tradepicker-tab input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.tradepicker-tab-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--bleu); background: var(--bleu-08); --icon: 16 }
.tradepicker-tab:hover { color: var(--encre); border-color: var(--bleu-40) }
.tradepicker-tab:has(input:checked) { color: var(--blanc); background: var(--bleu); border-color: var(--bleu) }
.tradepicker-tab:has(input:checked) .tradepicker-tab-ico { color: var(--bleu); background: var(--blanc) }
.tradepicker-tab:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px }
.tradepicker[data-query] .tradepicker-tab { opacity: .55 }
/* the count starts on the list, not on the container: its style containment would
   keep the tiles' increments from the foot */
.tradepicker-tiles { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); counter-reset: lib-tp }
.tradepicker-tile { display: flex; counter-increment: lib-tp }
.tradepicker-tile[hidden] { display: none }
.tradepicker-tile a {
  flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; min-height: 52px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 500; line-height: 1.3; text-decoration: none;
  background: var(--blanc); border: 1px solid var(--bord);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tradepicker-tile a:hover { transform: translateY(-1px); border-color: var(--bleu-40); box-shadow: var(--shadow-pop) }
.tradepicker-ico {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md);
  color: var(--bleu); background: linear-gradient(135deg, var(--bleu-08), var(--lavande-16)); transition: color var(--t-fast), background var(--t-fast);
}
.tradepicker-tile a:hover .tradepicker-ico { color: var(--blanc); background: var(--bleu) }
.tradepicker-name { min-width: 0; overflow-wrap: anywhere }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(1) input:checked) .tradepicker-tile:not([data-top]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(2) input:checked) .tradepicker-tile:not([data-fam="2"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(3) input:checked) .tradepicker-tile:not([data-fam="3"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(4) input:checked) .tradepicker-tile:not([data-fam="4"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(5) input:checked) .tradepicker-tile:not([data-fam="5"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(6) input:checked) .tradepicker-tile:not([data-fam="6"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(7) input:checked) .tradepicker-tile:not([data-fam="7"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(8) input:checked) .tradepicker-tile:not([data-fam="8"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(9) input:checked) .tradepicker-tile:not([data-fam="9"]) { display: none }
.tradepicker:not([data-query]):has(.tradepicker-tab:nth-child(10) input:checked) .tradepicker-tile:not([data-fam="10"]) { display: none }
.tradepicker-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--sourdine) }
.tradepicker-count::before { content: counter(lib-tp) }
.tradepicker-empty a { color: var(--bleu) }
.tradepicker[data-empty] .tradepicker-empty {
  flex-basis: 100%; order: -1; padding: var(--sp-4); border-radius: var(--r-lg);
  font-size: var(--fs-base); color: var(--encre); background: var(--bleu-08); border: 1px dashed var(--bleu-28);
}

/* scopeline: the scope of a ranking, one line of note above it (T6); a phone reads
   the short form, which holds in two lines at 390 px */
.scopeline { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--sourdine); text-wrap: pretty }
.scopeline a { color: var(--bleu); font-weight: 500 }
.scope-short { display: none }
@media screen and (max-width: 560px) { .scope-full { display: none } .scope-short { display: inline } }

/* fresh: « Relevé le … »; past 14 days an amber dot, its age in a tooltip. The age is
   read in the flow by screen readers, shown as a bubble on hover and on focus */
.fresh { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine); white-space: nowrap }
.fresh-old { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -6px 0; border-radius: 50%; cursor: help }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 3px var(--ambre-10) }
.fresh-tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.fresh-old:hover .fresh-tip, .fresh-old:focus .fresh-tip {
  right: 0; bottom: calc(100% + var(--sp-1)); z-index: 5; width: auto; height: auto; overflow: visible; clip: auto;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500;
  color: var(--blanc); background: var(--encre); box-shadow: var(--shadow-pop);
}

/* guidecover: a section's drawing, 16:9 */
.guidecover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--givre) }

/* lib-herobg: the hero's art behind a block, edge to edge of the window (the body
   clips the sides), under a veil that keeps its text at AA */
.lib-herobg { position: relative; isolation: isolate }
.lib-herobg::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 54% at 50% 48%, var(--fond) 30%, color-mix(in srgb, var(--fond) 72%, transparent) 60%, transparent 86%), url("art/hero.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent);
}

/* ---- foundation breakpoints --------------------------------------------------------- */

@media screen and (max-width: 1180px) {
  .sitehead-in { gap: var(--sp-3) }
  .sitemenu { gap: var(--sp-3) }
  .navlink { padding: 0 var(--sp-2) }
  .sitefoot-top { grid-template-columns: 1fr; gap: var(--sp-5) }
}

@media screen and (max-width: 980px) {
  /* the menu becomes a sheet from the right, opened by the menu button */
  .sitehead-burger { display: inline-grid }
  .sitehead-search { margin-left: auto }
  .sitehead-cta + .sitehead-burger { margin-left: 0 }
  .sitemenu {
    display: none; position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100dvh; max-height: none; margin: 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-4) var(--sp-7); overflow-y: auto; overscroll-behavior: contain;
    background: var(--fond); border-left: 1px solid var(--bord); box-shadow: var(--shadow-pop);
  }
  .sitemenu:popover-open { display: flex }
  .sitemenu::backdrop { background: var(--encre-20) }
  .sitemenu-head { display: flex; justify-content: space-between; align-items: center }
  .sitenav-list { flex-direction: column; align-items: stretch; gap: var(--sp-3) }
  .navlink { height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-md); color: var(--encre) }
  .navtrigger { display: none }
  /* each panel shows in the sheet's flow, its title above it */
  .mega {
    position: static; display: block; width: auto; max-height: none; margin: 0; padding: var(--sp-3) var(--sp-1) 0;
    overflow: visible; background: none; border: 0; border-top: 1px solid var(--bord); border-radius: 0; box-shadow: none;
  }
  .megabanks { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .megajobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-4) }
  .megajobs-cat { padding: var(--sp-2) 0; font-weight: 500 }
  .megajobs-trades { display: none }
  .megalinks { grid-template-columns: 1fr }
  .megalinks small { display: none }
  body:has(.sitemenu:popover-open) { overflow: hidden }
  .sitefoot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .bento-w3 { grid-column: span 2 }
  .pillars-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pillar:nth-child(odd) { border-left: 0 }
}

@media screen and (min-width: 981px) and (hover: hover) {
  .rail-expand .rail-track { display: flex; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none }
  .rail-expand .rail-item { flex: 1 1 0; transition: flex-grow var(--t) ease }
  .rail-expand .rail-item:hover, .rail-expand .rail-item:focus-within { flex-grow: 2.6 }
  .rail-expand .rail-track:not(:has(.rail-item:hover, .rail-item:focus-within)) > .rail-item:first-child { flex-grow: 2.6 }
  .rail-expand .rail-card { display: flex; flex-direction: column; height: 216px }
  .rail-expand .rail-body { display: flex; flex-direction: column }
  .rail-more { max-height: 0; opacity: 0; overflow: hidden; transition: opacity var(--t) ease, max-height var(--t) ease }
  .rail-expand .rail-item:hover .rail-more, .rail-expand .rail-item:focus-within .rail-more { max-height: 8rem; opacity: 1 }
  .rail-expand .rail-track:not(:has(.rail-item:hover, .rail-item:focus-within)) > .rail-item:first-child .rail-more { max-height: 8rem; opacity: 1 }
}

@media screen and (max-width: 720px) {
  /* the action bar takes the call to action and the search; the page keeps room above it */
  body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)) }
  .sitehead-cta, .sitehead-search { display: none }
  .sitehead-cta + .sitehead-burger { margin-left: auto }
  .dock {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 25;
    display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: var(--sp-1);
    height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--blanc) 92%, transparent); border-top: 1px solid var(--bord);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    view-transition-name: dock;
  }
  .dock a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); height: 46px;
    border-radius: var(--r-md); font-size: var(--fs-2xs); font-weight: 500; color: var(--sourdine); text-decoration: none;
  }
  .dock a[aria-current] { color: var(--bleu) }
  .dock .dock-go { color: var(--blanc); background: var(--bleu); box-shadow: var(--shadow-go) }
  .dock:not(:has(.dock-go)) { grid-template-columns: 1fr 1fr }
  .costrow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3) }
  .costrow-track { grid-row: 2; grid-column: 1 / -1 }
  .costbars { padding: var(--sp-4) }
  .searchprofile { padding: var(--sp-3) var(--sp-4) }
  .facts div { grid-template-columns: 1fr; gap: 0 }
  /* two tiles a row on a phone: the figure steps down a size to fit */
  .stat { padding: var(--sp-3) }
  .stat-value { font-size: min(var(--fs-2xl), 16cqi) }
  .rail-nav { display: none }
  .rail-track { column-gap: var(--sp-3); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter) }
  .banner-in { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: var(--sp-3) var(--sp-3) }
  .banner-visual { width: 44px; height: 44px; --icon: 24 }
  .banner-go { grid-column: 2; justify-self: start }
  .banner-inset { padding: var(--sp-4) }
  /* the hero's art is composed on the edges: a phone only saw a stray fragment */
  .lib-herobg::before { content: none }
  .pillars { margin: var(--sp-6) 0; padding: var(--sp-5) 0 var(--sp-4) }
  .pillar { padding: var(--sp-1) var(--sp-3) }
  .pillars-more { padding-right: var(--sp-3) }
}

@media screen and (max-width: 560px) {
  .sitefoot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ways { grid-template-columns: 1fr }
  .bento { grid-template-columns: minmax(0, 1fr) }
  .bento-w2, .bento-w3 { grid-column: auto }
  .bento-h2 { grid-row: auto }
}

/* the trade picker counts its columns on its own width: a hero or a side column */
@container lib-tp (max-width: 780px) {
  .tradepicker-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@container lib-tp (max-width: 540px) {
  .tradepicker-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tradepicker-tile a { gap: var(--sp-2); padding: var(--sp-2); font-size: var(--fs-sm) }
  .tradepicker-ico { width: 30px; height: 30px; --icon: 16 }
}

@media (hover: none) {
  .rail-nav { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .rail-card:hover .rail-img, .tradepicker-tile a:hover { transform: none }
  .rail-more { transition: none }
}

/* ---- motion: pages cross-fade, named elements travel (see vt in components.go) ---- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: var(--t) }
}

/* ---- print: the page without its frame, the figures in their colours ----------- */

@media print {
  .sitehead, .dock, .skip, .sprite, .sitefoot-top, .searchbox, .ways, .sg-toc, .costbars-more > summary, .utils, .pagehead-acts { display: none }
  .sitefoot { margin-top: var(--sp-5); padding: 0; background: none; border: 0 }
  .sitefoot-legal { margin-top: 0; border: 0 }
  .costbars { background: none; border-color: var(--bord-champ); break-inside: avoid }
  .costrow { break-inside: avoid }
  .rail-track { display: flex; flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none }
  .rail-item { width: var(--rail-w) }
  .rail-nav, .banner, .tradepicker { display: none }
  .lib-herobg::before { content: none }
}

/* ---- without popover: the triggers become plain links, the sheet stays shut ----- */

@supports not selector(:popover-open) {
  .navtrigger, .mega, .sitehead-burger { display: none }
  .navfallback { display: inline-flex }
}
/* bars grow from their origin when a page arrives: the figure lands where the eye
   already is. Transform, not width: the width is the data and stays inline */
@media (prefers-reduced-motion: no-preference) {
  .costrow-bar { transform-origin: left center; animation: bar-grow var(--t) ease-out both }
  .costrow:nth-child(2) .costrow-bar { animation-delay: 30ms }
  .costrow:nth-child(3) .costrow-bar { animation-delay: 60ms }
  .costrow:nth-child(n+4) .costrow-bar { animation-delay: 90ms }
}
@keyframes bar-grow { from { transform: scaleX(0) } }
@media print { .costrow-bar { animation: none } }
/* a part being recomputed in place (pezo.js, data-swap) dims until it is replaced */
[aria-busy="true"] { opacity: .55; transition: opacity var(--t) ease }
/* ==== end foundation ==== */

/* ==== flow: home, profile form, results ==== */
/* The journey that answers: the home page, the comparator, the ranking.
   Breakpoints, print and motion of these pages close the section. */

/* ---- home: the question on its art, then the principles, the trades, the rails ---- */

.flow-hero { max-width: 880px; margin: 0 auto; padding: var(--sp-7) 0 var(--sp-6); text-align: center }
.flow-display { font-size: var(--fs-display); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance }
.flow-display b { color: var(--bleu) }
.flow-examples { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4) }
.flow-examples-lead { font-size: var(--fs-xs); color: var(--sourdine) }
.flow-examples-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2) }
/* on the art, the quick accesses keep a white ground: text stays at AA */
.flow-examples-list .chip { min-height: 28px; color: var(--encre); text-decoration: none; background: var(--blanc-90); transition: border-color var(--t-fast), color var(--t-fast) }
.flow-examples-list .chip:hover { color: var(--bleu); border-color: var(--bleu-40) }
/* the site's one search field, the hero's question */
.flow-hero .searchbox { margin-top: var(--sp-5); text-align: left }

/* ---- results: the profile bar, the answer, the bars, the cards ---------------------- */

/* the profile in words; its settings button opens the whole form in place */
.entry-profilebar { margin-top: var(--sp-3) }
.entry-profilebar > summary {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  list-style: none; cursor: pointer; border-radius: inherit;
}
.entry-profilebar > summary::-webkit-details-marker { display: none }
.entry-profilebar > summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px }
.entry-profilebar-words { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); flex: 1; min-width: 0 }
.entry-profilebar-text { font-size: var(--fs-base); font-weight: 500; line-height: 1.4; color: var(--encre) }
.entry-profilebar-q { font-size: var(--fs-base); font-style: italic; color: var(--sourdine) }
.entry-profilebar-skip { flex-basis: 100%; font-size: var(--fs-sm); color: var(--sourdine) }
.entry-profilebar-set { flex: none }
.entry-profilebar > summary:hover .entry-profilebar-set { background: var(--bleu-08); border-color: var(--bleu) }
.entry-profilebar[open] .entry-profilebar-set { color: var(--blanc); background: var(--bleu); border-color: var(--bleu) }
.entry-profilebar .flow-form { margin: 0 var(--sp-2) var(--sp-2) }

.flow-answer { margin-top: var(--sp-4) }
/* one sentence where there were four tiles: the first's cost, then the gaps */
/* the quick filters keep one row: it scrolls sideways rather than stacking */
.flow-answer .filters { margin: 0 }
.flow-answer .filterlist { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-1) var(--sp-1) var(--sp-2); scrollbar-width: thin }
.flow-answer .filter { flex: none; white-space: nowrap }
/* what the ranking stands on, folded, then how it ranks and who it leaves out */
.flow-basis { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 var(--sp-5) }
.flow-basis .assumed { margin: 0 }
.flow-basis .seeall { min-height: 32px }

.flow-deadend { margin-top: var(--sp-4) }
.flow-ways { list-style: none; max-width: 600px; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2) }
.flow-way {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 44px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-base); color: var(--encre);
  text-decoration: none; background: var(--blanc); border: 1px solid var(--bord);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.flow-way:hover { color: var(--bleu); border-color: var(--bleu-40) }
.flow-deadend-help a { color: var(--bleu) }

/* the card: logo and total are named, they travel to the bank sheet (vt) */
.entry-card-name { font-size: var(--fs-h3) }
/* « Mettre de côté » is a tertiary link: an offer kept for the face-off says so in bold */
.res-pick[aria-current] { font-weight: 600 }
.flow-logo { display: inline-flex }
.flow-total { display: flex; justify-content: flex-end }
/* folded, a card still explains its price: three figures in a row, between the
   identity and the actions; the table waits in a drawer along the card's edge */
.res-mid { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--trait) }
/* chips, links and button share the button's line; the mention hangs below */
.res-mid .res-act { align-items: flex-start; margin: 0 0 0 auto }
.res-mid .res-act .seeall { min-height: 40px }
/* each figure is a chip carrying the swatch of its poste, as in the bars above */
.res-keys { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: var(--sp-2); flex: 1 1 22rem; min-width: 0; min-height: 40px; margin: 0; padding: 0; list-style: none }
.res-key {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); background: var(--lavande-10); font-size: var(--fs-sm); line-height: 1.3; white-space: nowrap;
}
.res-key .icon { --icon: 16; color: var(--vert) }
.res-key-label { color: var(--sourdine) }
.res-key-value { font-weight: 600; color: var(--encre) }
.res-key-warn .res-key-value { color: var(--ambre) }
.flow-detail { margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)); border-top: 1px solid var(--trait) }
.flow-detail > summary {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-5);
  list-style: none; font-size: var(--fs-sm); font-weight: 500; color: var(--bleu); cursor: pointer; transition: background var(--t-fast) ease;
}
.flow-detail > summary::-webkit-details-marker { display: none }
.flow-detail > summary:hover { background: var(--lavande-10) }
.flow-detail > summary .icon { --icon: 16; transition: transform var(--t) ease }
.flow-detail[open] > summary .icon { transform: rotate(180deg) }
.flow-detail .res-detail { margin: 0; padding: 0 var(--sp-5) var(--sp-4); border-top: 0 }

/* ---- comparator: a trade to start from, the dials, the ranking under them ---------- */

/* the dials fold under a bar on a phone; on a computer they stay open, without
   it, where ::details-content lets a closed fold show (older browsers keep the bar) */
.entry-dials > summary { border-radius: var(--r-xl) }
.entry-dials-form { margin-top: var(--sp-5) }
.entry-dials-form > .flow-form { margin-top: var(--sp-3) }
.entry-start { margin-top: var(--sp-5) }
@supports selector(::details-content) {
  @media screen and (min-width: 721px) {
    .entry-dials { margin-top: 0 }
    .entry-dials > summary { display: none }
    .entry-dials::details-content { content-visibility: visible; display: block }
  }
}
.flow-unread, .flow-fixed { margin-top: var(--sp-4) }
.flow-unread a { color: var(--bleu) }
.flow-statuses { margin: var(--sp-2) 0 var(--sp-3) }
.flow-statuses .filter { min-height: 44px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-base) }
.flow-fixed-list { margin: var(--sp-2) 0; padding-left: var(--sp-5) }
.flow-fixed-list a { color: var(--encre) }

.entry-preset { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); color: var(--encre) }
.entry-preset .icon { color: var(--bleu) }
.entry-preset a { font-weight: 600; color: var(--bleu) }

.entry-rank { margin-top: var(--sp-section) }
/* the answer is a sentence, 18 px, its names in weight 600 */
.entry-answer { margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: 1.4; text-wrap: balance }
.entry-answer b { font-weight: 600 }
.entry-limit { margin-top: var(--sp-2); font-size: var(--fs-base); color: var(--sourdine); text-wrap: pretty }
.entry-rank .costbars { margin-top: var(--sp-4) }
.entry-none { margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--sourdine) }
.entry-more { margin-top: var(--sp-4) }

.flow-fs { min-width: 0; margin: 0; padding: 0; border: 0 }
.flow-fs > legend { width: 100%; padding: 0 }
.flow-fs > legend + * { margin-top: var(--sp-4) }
.flow-form > .fgroup, .flow-form > .flow-pair, .flow-form > .factions { margin-top: var(--sp-5) }
.flow-form > :first-child { margin-top: 0 }
.flow-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) }
.flow-pair > .fgroup { margin-top: 0 }
.flow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--sp-4) var(--sp-5) }
.flow-slider { gap: var(--sp-2) }
.flow-slider-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 24px }
.flow-slider .flbl { align-self: center }
.flow-slider-row { display: flex; align-items: center; gap: var(--sp-3) }
.flow-slider-row .fnum { flex: none; width: 9.5rem }
.flow-range { flex: 1; min-width: 0; margin: 0; height: 24px }
.flow-radio-note { font-size: var(--fs-2xs); font-weight: 400; color: var(--sourdine) }
.flow-issue { font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; color: var(--frais-texte) }
.fradio + .flow-issue { margin-top: var(--sp-2) }
.flow-form input[aria-invalid="true"] { border-color: var(--frais-texte) }
.flow-form .radio input[aria-invalid="true"] + span { border-color: var(--frais-texte) }

/* the why of a figure: a button outside the label, a popover Escape closes */
.flow-help {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; font: inherit; font-size: var(--fs-2xs); font-weight: 600;
  color: var(--bleu); background: var(--bleu-12); cursor: pointer; transition: background var(--t-fast);
}
.flow-help:hover { background: var(--bleu-18) }
.flow-tip {
  max-width: min(340px, 100vw - 2 * var(--gutter)); margin: auto; padding: var(--sp-4);
  border: 1px solid var(--bord); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--encre); background: var(--blanc);
}
.flow-tip::backdrop { background: var(--encre-10) }
@supports (position-anchor: --a) {
  .flow-tip { inset: auto; top: anchor(bottom); left: anchor(left); margin: var(--sp-2) 0 0; position-try-fallbacks: flip-inline, flip-block }
  .flow-tip::backdrop { background: none }
}

/* ---- flow breakpoints ------------------------------------------------------------------- */

@media screen and (max-width: 720px) {
  .flow-hero { padding: var(--sp-5) 0 var(--sp-5) }
  .flow-display { font-size: var(--fs-h1) }
  .flow-examples { flex-direction: column; gap: var(--sp-2) }
  .entry-profilebar > summary { padding-left: var(--sp-4) }
  .entry-profilebar .flow-form { margin: 0 }
  /* the answer right under the bar (PSY-07) */
  .entry-dials + .entry-rank { margin-top: var(--sp-5) }
    /* the dock's call to action stays white on blue on its own page */
  .dock .dock-go[aria-current] { color: var(--blanc) }
  .flow-total { grid-column: 1 / -1; justify-content: flex-start }
  .flow-pair { grid-template-columns: 1fr }
  /* on a phone the explanation opens in the middle of the screen, full width */
  .flow-tip { inset: 0; margin: auto }
}

/* print: the ranking and its detail on paper, without the ways to change it */
@media print {
  .flow-answer .filters, .assumed-switch, .flow-detail > summary, .flow-deadend-help,
  .entry-profilebar, .assumed-sum, .flow-basis .seeall, .entry-more { display: none }
  .flow-detail::details-content, .assumed::details-content { content-visibility: visible; display: block }
  .assumed-link { border-color: var(--bord-champ) }
}
/* ==== end flow ==== */

/* ==== banks: bank list, bank sheet, face-off ==== */
/* Every class born here starts with bk-. The pages are decision pages: a figure
   answers first, the proof sits next to it. Breakpoints, then print, at the end. */

/* ---- bank list ------------------------------------------------------------------ */

.bk-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5) }
.bk-tools .filters { margin: 0 }
.bk-sort { display: flex; align-items: center; gap: var(--sp-2); min-width: 0 }
.bk-sort-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--sourdine); --icon: 16 }
/* a segmented switch: two exclusive orders, the current one filled */
.bk-sort-list { list-style: none; margin: 0; padding: 2px; display: flex; gap: 2px; border-radius: var(--r-pill); background: var(--blanc); border: 1px solid var(--bord) }
.bk-sort-opt {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--sourdine); text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.bk-sort-opt:hover { color: var(--bleu) }
.bk-sort-opt[aria-current] { font-weight: 500; color: var(--bleu-fonce); background: var(--bleu-12) }
.bk-tile-logo { display: inline-flex; flex: none }
/* the name gives way before the price does: a tag under the name wastes a row */
.banklist .bankcard-id { flex-basis: 96px }
.bk-noprice { font-size: var(--fs-sm); color: var(--sourdine) }
/* the four answers hold on one row of a tile */
.bk-caps { gap: var(--sp-1) }
.bk-cap { gap: 3px; padding: 2px var(--sp-2) }
.bk-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3) }
/* the date's tooltip answers the pointer above the link that covers the card */
.bk-tile-foot .fresh-old { z-index: 3 }
.bk-tile-go { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--bleu); white-space: nowrap; --icon: 16 }
.bankcard:hover .bk-tile-go .icon { translate: 2px 0 }
.bk-tile-go .icon { transition: translate var(--t-fast) }

/* the face-off invitation: one bar, two banks, one button */
.bk-duelbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-section); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
}
.bk-duelbar-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); color: var(--sourdine) }
.bk-duelbar-title .icon { color: var(--bleu) }
.bk-duelbar-title b { color: var(--encre) }
.bk-duelbar-form { gap: var(--sp-2) }
.bk-duelbar-form select { min-width: 140px; padding: var(--sp-2) var(--sp-3) }

/* ---- bank sheet: under the page head, the essentials; no bank's colour but its
   logo's (GRA §3) -------------------------------------------------------------- */

.bk-head { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); overflow: hidden }
/* the facts line: three answers under the name, then the date, on one line when it fits */
.bk-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6) }
.bk-fact { --icon: 16; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2); min-width: 0; font-size: var(--fs-sm); line-height: 1.5 }
.bk-fact > .icon { align-self: center; color: var(--bleu) }
.bk-fact-label { color: var(--sourdine) }
.bk-fact-value { font-size: var(--fs-md); font-weight: 600; color: var(--encre) }
.bk-fact-note { font-size: var(--fs-xs); color: var(--sourdine) }
.bk-fact-good .bk-fact-value { color: var(--vert-texte) }
.bk-fact-warn .bk-fact-value { color: var(--ambre) }
.bk-fact-fresh { display: inline-flex; align-items: center }
.bk-answers { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); margin-top: var(--sp-4); padding-top: var(--sp-1); border-top: 1px solid var(--trait) }
.bk-answers .formsrow { margin: var(--sp-3) 0 0; gap: var(--sp-3) }

/* the sheet's sections, one tap away, under the site header */
.bk-tabs {
  position: sticky; top: var(--head-h); z-index: 20; margin-top: var(--sp-5);
  background: color-mix(in srgb, var(--fond) 90%, transparent); border-bottom: 1px solid var(--bord);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.bk-tabs-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none }
.bk-tabs-list::-webkit-scrollbar { display: none }
.bk-tabs-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); margin-bottom: -1px;
  font-size: var(--fs-base); font-weight: 500; color: var(--sourdine); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.bk-tabs-list a:hover { color: var(--encre); border-color: var(--bleu-40) }
.bk-tabs-list a:focus-visible { outline-offset: -2px }
/* an anchored section lands under the header and the tabs, not behind them */
.bk-sec { margin-top: var(--sp-section); scroll-margin-top: var(--sp-7) }
.bk-left { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.bk-left b { font-weight: 500; color: var(--encre) }

/* the lines a bank never publishes: one sentence instead of a column of dashes */
.bk-silent {
  display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--sourdine); border-top: 1px solid var(--bord); background: var(--lavande-10);
}
.bk-silent b { font-weight: 500; color: var(--encre) }

.bk-desc { max-width: 80ch; margin-bottom: var(--sp-2); font-size: var(--fs-base); line-height: 1.6; color: var(--sourdine) }
.bk-know { max-width: 80ch; margin: var(--sp-3) 0 }
.bk-points { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2) }
.bk-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--sp-2); font-size: var(--fs-base); line-height: 1.45 }
.bk-points .icon { margin-top: 1px }
.bk-points-yes .icon { color: var(--vert) }
.bk-notfor { margin-top: var(--sp-4) }
.bk-open { margin-top: var(--sp-5) }

/* every other bank, face to face, with the gap on the stated profile */
.bk-duels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: var(--sp-3) }
.bk-duel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  height: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); color: inherit; text-decoration: none;
}
.bk-duel-logos { display: inline-flex }
.bk-duel-logos .logo + .logo { margin-left: calc(-1 * var(--sp-2)); box-shadow: 0 0 0 2px var(--blanc) }
.bk-duel-body { display: grid; gap: 2px; min-width: 0 }
.bk-duel-name { font-size: var(--fs-base); font-weight: 500; color: var(--encre) }
.bk-duel-vs { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.bk-duel-note { font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }
.bk-less { font-weight: 500; color: var(--vert) }
.bk-dearer { color: var(--frais-texte) }
.bk-duel-go { display: inline-flex; color: var(--lavande); --icon: 16 }
.bk-duel:hover .bk-duel-go { color: var(--bleu) }
.bk-duel:hover .bk-duel-name { color: var(--bleu) }

.bk-report { margin-top: var(--sp-4) }

/* ---- face-off --------------------------------------------------------------------- */

.bk-verdict { margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6) }
.bk-verdict-line { margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: 1.45 }
.bk-verdict-line b { font-weight: 600 }
.bk-verdict-gap { color: var(--vert) }
.bk-verdict-for { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--sourdine) }
.bk-verdict-for a { color: var(--bleu); font-weight: 500 }
/* the bars belong to the verdict: no second frame inside the first */
.bk-verdict .costbars { margin-top: var(--sp-5); padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none }

/* the values sit next to their labels in columns of one width, centred */
.bk-vs .pricegrid { table-layout: fixed }
.bk-vs-label { width: 38% }
.bk-vs .pricegrid th[scope="row"] { min-width: 0; white-space: normal }
.bk-vs .pricegrid thead th[scope="col"], .bk-vs .pricegrid td { text-align: center }
.bk-vs .cell-note { margin: var(--sp-1) auto 0 }
.bk-vs-bank { display: inline-flex; align-items: center; gap: var(--sp-2) }
/* the best answer of a row says so in words: colour alone is lost on paper */
.bk-lead {
  display: block; width: fit-content; margin: var(--sp-1) auto 0; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.6; color: var(--vert); background: var(--vert-10); white-space: nowrap;
}

.bk-others-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--sp-5) }
.bk-others-group { min-width: 0 }
.bk-others-who { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--sourdine) }
.bk-others-who b { font-weight: 600; color: var(--encre) }
.bk-others-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1) }
.bk-others-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); text-decoration: none;
  background: var(--blanc-60); border: 1px solid var(--bord); transition: border-color var(--t-fast), background var(--t-fast);
}
.bk-others-link:hover { background: var(--blanc); border-color: var(--bleu-40) }
.bk-others-name { font-size: var(--fs-base); font-weight: 500 }
.bk-others-link .bk-duel-note { text-align: right }
.bk-add { margin-top: var(--sp-5) }
.bk-add-label { font-size: var(--fs-sm); color: var(--sourdine) }
.bk-add-full { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--sourdine) }

/* ---- banks breakpoints --------------------------------------------------------------- */

@media screen and (max-width: 720px) {
  /* one row of filters that scrolls sideways, rather than four rows of pills */
  .bk-tools .filters { width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)) }
  .bk-tools .filterlist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter) 2px 2px }
  .bk-tools .filterlist::-webkit-scrollbar { display: none }
  .bk-tools .filter { white-space: nowrap }
  .bk-sort { width: 100%; overflow-x: auto }
  /* the price keeps its place beside the name on every card, not on some */
  .bankcard { padding: var(--sp-4) }
  .bankcard-top { gap: var(--sp-3) }
  .bankcard-price .pricetag { padding: var(--sp-1) var(--sp-3) var(--sp-2) }
  .bankcard-price .pricetag-year b { font-size: var(--fs-xl) }
  .bk-duelbar { padding: var(--sp-4) }
  .bk-duelbar-form { width: 100% }
  .bk-duelbar-form select { flex: 1 1 120px; min-width: 0; width: auto }
  .bk-duelbar-form .btn { flex: 1 1 100% }

  .bk-head { padding: var(--sp-4) }
  /* one answer per line: a phone reads the facts as a short list */
  .bk-facts { flex-direction: column; gap: var(--sp-2) }
  .bk-answers { gap: 0 }

  /* a narrower label column, so two offers show side by side on a phone */
  .bk-grid .gridwrap, .bk-vs .gridwrap { scroll-padding-left: 32vw }
  .bk-grid .pricegrid thead th[scope="col"], .bk-vs .pricegrid thead th[scope="col"] { scroll-margin-left: 32vw; padding: var(--sp-3) var(--sp-2) }
  .bk-grid .pricegrid th[scope="row"] { width: 32vw; max-width: 32vw; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); font-size: var(--fs-sm) }
  .bk-grid .pricegrid td { padding: var(--sp-2) }
  .bk-grid .pricegrid thead .pricetag { padding: var(--sp-1) var(--sp-2) }
  .bk-grid .pricegrid thead .pricetag-year b { font-size: var(--fs-md) }
  .bk-grid .row-note, .bk-vs .row-note { font-size: var(--fs-2xs) }
  .bk-silent { padding: var(--sp-3) var(--sp-4) }

  .bk-verdict { padding: var(--sp-4) }
  .bk-vs-label { width: 34% }
  .bk-vs .pricegrid th[scope="row"] { width: auto; max-width: none; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3) }
  .bk-vs .pricegrid td { padding: var(--sp-2) var(--sp-1) }
  /* three or four banks scroll sideways like the sheet: labels narrow, columns to their content */
  .bk-vs-wide .pricegrid { table-layout: auto }
  .bk-vs-wide .bk-vs-label { width: auto }
  .bk-vs-wide .pricegrid th[scope="row"] { width: 32vw; max-width: 32vw }
  .bk-vs-wide .pricegrid td { padding: var(--sp-2) }
  /* the first column clears the fade of the frozen labels */
  .bk-vs .pricegrid tr > th:nth-child(2), .bk-vs .pricegrid tr > td:nth-child(2) { padding-left: var(--sp-5) }
  .bk-others-link { grid-template-columns: auto minmax(0, 1fr); row-gap: 0 }
  .bk-others-link .bk-duel-note { grid-column: 2; text-align: left }
}

/* ---- banks print --------------------------------------------------------------------- */

@media print {
  .bk-tabs, .bk-duelbar, .bk-add, .bk-sort, .bk-tools .filters, .bk-duel-go { display: none }
  .bk-head, .bk-verdict { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .bk-duel, .bk-others-link { break-inside: avoid }
}
/* ==== end banks ==== */

/* ==== trades: trades, categories ==== */
/* The trade pages, their families and the index: an answer first (the
   verdict, the price chart, the bill), then the podium, the bars and the list,
   then the links that go further. Classes are prefixed trade-. */

/* ---- head: the trade, its picture, its figures ---------------------------------- */

.trade-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 0 var(--sp-6) }
.trade-hero-text { min-width: 0 }
.trade-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass) }
.trade-photo img { display: block; width: 100%; height: 100%; object-fit: cover }
.trade-photo-ico {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-md); color: var(--bleu); background: var(--blanc-90); box-shadow: var(--shadow-glass-soft); --icon: 24;
}
/* the answer in one sentence and one note at most (L14); the price chart follows */
.trade-verdict { margin-top: var(--sp-4); padding-left: var(--sp-4); border-left: 3px solid var(--vert-28) }
.trade-verdict-line { max-width: 60ch; font-size: var(--fs-lg); line-height: 1.45; text-wrap: pretty }
.trade-verdict-line b { font-weight: 600 }
.trade-verdict-note { max-width: 70ch; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--sourdine) }
/* M1: the typical bill by poste, in the column the family's photograph held */
.trade-bill { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: var(--sp-5) }
.trade-bill-cap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3) }
.trade-bill-cap b { font-size: var(--fs-xl) }
.trade-bill-keys { margin-top: var(--sp-3) }
.trade-bill-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--sourdine) }
.trade-hero-more { grid-column: 1; min-width: 0 }

/* ---- the ranking: podium, bars, compact list ------------------------------------- */

.trade-board { margin-top: var(--sp-section) }
/* three steps, the cheapest highest: the order reads left to right, as the list */
.trade-podium { list-style: none; max-width: 820px; margin: var(--sp-4) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sp-3) }
.trade-step { display: flex; flex-direction: column; min-width: 0 }
.trade-step-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-4) var(--sp-3);
  text-align: center; text-decoration: none; background: var(--blanc); border: 1px solid var(--bord); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0; transition: box-shadow var(--t-fast);
}
.trade-step-card:hover { box-shadow: var(--shadow-lift) }
.trade-step-card .logo { margin-bottom: var(--sp-2) }
.trade-step-name { max-width: 100%; font-size: var(--fs-base); font-weight: 600; line-height: 1.3 }
.trade-step-card:hover .trade-step-name { color: var(--bleu) }
.trade-step-plan { max-width: 100%; font-size: var(--fs-xs); line-height: 1.35; color: var(--sourdine) }
.trade-step-price { margin-top: var(--sp-2); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -.02em }
.trade-step-price small { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; color: var(--sourdine) }
.trade-step-delta { min-height: 1.4em; font-size: var(--fs-xs); color: var(--sourdine) }
.trade-step-base {
  display: grid; place-items: center; height: 40px; border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-xl); font-weight: 600; color: var(--bleu-fonce);
  background: linear-gradient(180deg, var(--bleu-12), var(--bleu-08)); border: 1px solid var(--bleu-18);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.trade-step:nth-child(1) .trade-step-base { height: 72px }
.trade-step:nth-child(2) .trade-step-base { height: 54px }
.trade-step-best .trade-step-card { border-color: var(--vert-28); box-shadow: var(--shadow-best) }
.trade-step-best .trade-step-delta { font-weight: 600; color: var(--vert) }
.trade-step-best .trade-step-base { color: var(--vert); background: linear-gradient(180deg, var(--vert-28), var(--vert-10)); border-color: var(--vert-28) }
.trade-ahead { margin-top: var(--sp-4) }
.trade-list { container-type: inline-size; list-style: none; margin: var(--sp-4) 0 0; padding: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--blanc-80); border: 1px solid var(--bord) }
/* fixed price and action columns line the figures up: that is what makes the list comparable */
.trade-row { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) 150px 196px; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) }
.trade-row + .trade-row { border-top: 1px solid var(--bord) }
.trade-row-best { background: linear-gradient(90deg, var(--vert-10), transparent 70%) }
.trade-rank { font-size: var(--fs-lg); font-weight: 600; text-align: center; color: var(--sourdine) }
.trade-row-best .trade-rank { color: var(--vert) }
.trade-logo { display: inline-flex }
.trade-id { display: grid; gap: var(--sp-1); min-width: 0 }
.trade-name { font-size: var(--fs-md); font-weight: 600; line-height: 1.3 }
.trade-name a { text-decoration: none }
.trade-name a:hover { color: var(--bleu); text-decoration: underline }
.trade-plan { font-size: var(--fs-base); font-weight: 400; color: var(--sourdine) }
.trade-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.trade-line { position: relative; padding-left: var(--sp-4); font-size: var(--fs-sm); line-height: 1.45; color: var(--sourdine) }
.trade-line::before { position: absolute; left: 0; font-weight: 600 }
.trade-line-pro::before { content: "+"; color: var(--vert) }
.trade-line-con::before { content: "−"; color: var(--frais-texte) }
.trade-cost { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1) }
.trade-delta { font-size: var(--fs-xs); color: var(--sourdine); white-space: nowrap }
.trade-act { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2) }
.trade-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.trade-note .icon { --icon: 16; margin-top: 2px; color: var(--ambre) }
/* the banks set aside, folded under the ranking (L11) */
.trade-out .exccards { margin-top: var(--sp-3) }

/* ---- links: « Aller plus loin » on a trade, the guides and the tools on a hub ---- */

.trade-rail, .trade-rule { margin-top: var(--sp-section) }
.trade-rule .callout + .callout { margin-top: var(--sp-3) }
.trade-rail .rail { margin-bottom: 0 }
.trade-pick { margin-top: var(--sp-section) }

/* ---- the index: the picker is the page, the families follow ------------------------- */

.trade-hub-pick { margin-top: var(--sp-5); padding: var(--sp-5) }

/* ---- trades breakpoints, motion, print ----------------------------------------------- */

@media screen and (max-width: 980px) {
  .trade-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) }
  /* the picture becomes a band under the head: the trail and the title open the page */
  .trade-photo { aspect-ratio: 3 / 1 }
  /* the bill follows the answer, before the switches that correct it */
  .trade-bill { grid-column: auto; grid-row: auto; padding: var(--sp-4) }
  .trade-row { grid-template-columns: 28px 40px minmax(0, 1fr) 150px; }
  .trade-act { grid-column: 3 / -1; flex-direction: row; justify-content: space-between }
}

@media screen and (max-width: 720px) {
  .trade-verdict-line { font-size: var(--fs-md) }
  .trade-hub-pick { padding: var(--sp-4) }
  .trade-podium { gap: var(--sp-2) }
  .trade-step-card { padding: var(--sp-3) var(--sp-2) }
  .trade-step-price { font-size: var(--fs-lg) }
  .trade-step:nth-child(1) .trade-step-base { height: 56px }
  .trade-step:nth-child(2) .trade-step-base { height: 44px }
  .trade-step-base { height: 34px; font-size: var(--fs-md) }
  /* a phone reads the name and the price on one line, the reasons under them */
  .trade-row { grid-template-columns: 20px 40px minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4) }
  .trade-id { display: contents }
  .trade-rank, .trade-logo { grid-row: 1 }
  .trade-name { grid-row: 1; grid-column: 3 }
  .trade-cost { grid-row: 1; grid-column: 4 }
  .trade-cost .pricetag { padding: var(--sp-1) var(--sp-3) var(--sp-2) }
  .trade-cost .pricetag-year b { font-size: var(--fs-xl) }
  .trade-tags, .trade-line { grid-column: 3 / -1 }
  .trade-act { grid-column: 1 / -1; align-items: center; margin-top: var(--sp-1) }
}

@media screen and (max-width: 560px) {
  .trade-step-plan { display: none }
  .trade-step-name { font-size: var(--fs-sm) }
  /* a narrow step: « au moins » above, the price and its unit on one line */
  .trade-step-price { white-space: nowrap }
  .trade-step-price small:first-child:not(:last-child) { display: block }
}

/* the narrowest phones: the price leaves the name its line */
@container (max-width: 340px) {
  .trade-name { grid-column: 3 / -1 }
  .trade-cost { grid-row: 2; grid-column: 3 / -1; flex-direction: row; align-items: center; gap: var(--sp-3) }
}

@media print {
  .trade-photo, .trade-rail, .trade-pick, .trade-hub-pick { display: none }
  .trade-list { background: none; border-color: var(--bord-champ) }
  .trade-row { break-inside: avoid }
}
/* ==== end trades ==== */

/* ==== content: guides, feed, articles ==== */
/* One grid for the pages that read like a document: the body in a 72ch column,
   a side column in view on a desktop; on a phone the contents fold above the
   body and the side column goes last. */

.cx-stats { margin-top: var(--sp-5) }
.cx-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--sourdine) }
.cx-une + .filters { margin-top: var(--sp-5) }

/* the article takes the page's whole width: title and cover fill the main column,
   the side panel sits against the right edge, and running text keeps a readable
   measure inside the column instead of the whole grid being narrowed */
.cx-doc {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head side" "body side";
  align-items: start; column-gap: var(--sp-8);
}
.cx-docbody > * { max-width: 72ch }
.cx-docbody > table, .cx-docbody > figure { max-width: none }
.cx-dochead { grid-area: head; min-width: 0 }
.cx-docbody { grid-area: body; min-width: 0 }
.cx-docbody h2 { scroll-margin-top: calc(var(--head-h) + var(--sp-4)) }
.cx-docbody .callout { margin: var(--sp-4) 0 }
.cx-docbody .callout p { margin: 0; font-size: var(--fs-base) }
.cx-docbody .callout .callout-body p + p { margin-top: var(--sp-1) }
.cx-docbody .sources li, .cx-docbody code { overflow-wrap: anywhere }
.cx-side {
  grid-area: side; position: sticky; top: calc(var(--head-h) + var(--sp-4)); display: grid; gap: var(--sp-5);
  max-height: calc(100dvh - var(--head-h) - var(--sp-6)); overflow-y: auto; padding: var(--sp-5) var(--sp-1) var(--sp-2) 0;
}
.cx-tocfold { display: none }
.cx-tocfold .cx-toclist { margin: var(--sp-3) var(--sp-4) var(--sp-4) }
.cx-toc .overline, .cx-docs .overline { margin-bottom: var(--sp-2) }
.cx-toclist { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bord) }
.cx-toclist a {
  display: block; margin-left: -2px; padding: var(--sp-1) var(--sp-3); border-left: 2px solid transparent;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--sourdine); text-decoration: none;
}
.cx-toclist a:hover { color: var(--bleu); border-left-color: var(--bleu) }
.cx-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.cx-doclist a {
  --icon: 16; display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--encre); text-decoration: none;
}
.cx-doclist .icon { color: var(--sourdine) }
.cx-doclist a:hover { background: var(--blanc); color: var(--bleu) }
.cx-doclist a[aria-current] { font-weight: 500; color: var(--bleu-fonce); background: var(--bleu-08) }
.cx-doclist a[aria-current] .icon { color: var(--bleu) }

/* guide cards: the cover says the section, the title the subject */
.cx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-4) }
.cx-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none }
/* a cover is drawn 16:9 around a centre band of 16:7: every crop keeps that band */
.cx-card .guidecover { height: 140px; aspect-ratio: auto; border-radius: 0; object-position: 50% 55% }
.cx-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-4) }
.cx-card-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35 }
.cx-card:hover .cx-card-title { color: var(--bleu) }
.cx-card-meta { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--sourdine) }

/* the guides hub: one guide on top, then the sections */
.cx-une { margin-top: var(--sp-5) }
.cx-une-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); overflow: hidden; color: inherit; text-decoration: none }
.cx-une-card .guidecover { height: 100%; min-height: 240px; aspect-ratio: auto; border-radius: 0 }
.cx-une-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6) }
.cx-une-title { font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; text-wrap: balance }
.cx-une-card:hover .cx-une-title { color: var(--bleu) }
.cx-une-excerpt { font-size: var(--fs-base); color: var(--sourdine) }
.cx-une-body .seeall { margin-top: auto; padding-top: var(--sp-2) }
.cx-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5) }
.cx-rubrique { min-width: 0; scroll-margin-top: calc(var(--head-h) + var(--sp-4)) }
.cx-rubrique-wide, .cx-rubriques-one .cx-rubrique { grid-column: 1 / -1 }
.cx-rubrique-title { display: flex; align-items: center; gap: var(--sp-2) }
.cx-rubrique-title .icon { color: var(--bleu) }
.cx-sos { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) }
.cx-sos-title { font-size: var(--fs-md); font-weight: 600 }
.cx-sos-list, .cx-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.cx-sos-list a, .cx-jump a {
  --icon: 16; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--encre); text-decoration: none;
  background: var(--blanc); border: 1px solid var(--bord); transition: border-color var(--t-fast), color var(--t-fast);
}
.cx-sos-list .icon, .cx-jump .icon { color: var(--bleu) }
.cx-sos-list a:hover, .cx-jump a:hover { color: var(--bleu); border-color: var(--bleu-40) }
.cx-jump { margin-top: var(--sp-5) }
.cx-more { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-section); padding: var(--sp-4) var(--sp-5) }
.cx-more-title { font-weight: 600 }

/* a guide */
.cx-byline { --icon: 16; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--sourdine) }
.cx-byline span { display: inline-flex; align-items: center; gap: var(--sp-1) }
.cx-byline a { font-weight: 500; color: var(--encre) }
.cx-ai, .cx-verified { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--sourdine) }
/* the figures the engine writes in a guide, and its computed block (ADR-057) */
.fig { font-variant-numeric: tabular-nums }
.fig-note { font-size: var(--fs-sm); color: var(--sourdine) }
.fig-missing { font-style: italic; color: var(--sourdine) }
.figblock { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--bleu-18); border-left: 4px solid var(--bleu); border-radius: var(--r-lg) }
.figblock-title { font-weight: 600 }
.figblock-lines { margin: 0; padding-left: 1.2em }
.figblock-date { font-size: var(--fs-sm); color: var(--sourdine) }
.figblock .btn { justify-self: start }
.cx-article .cx-docbody { margin-top: var(--sp-2) }
.cx-sidebox { display: grid; gap: var(--sp-2); padding: var(--sp-4) }
.cx-sidebox-title { font-weight: 600 }
.cx-next { margin-top: var(--sp-section) }
.cx-nexttool { max-width: 72ch }
.cx-nexttool + .cx-nexttool { margin-top: var(--sp-3) }
.cx-next > .banner:first-child { margin-top: 0 }
/* the cover opens the guide, as a band cut to the drawing's centre */
.cx-article .guidecover { aspect-ratio: 16 / 7; margin: var(--sp-4) 0 var(--sp-5); object-position: 50% 55% }

/* the explaining pages */
.cx-docbody .cx-needs { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp-3) }
.cx-docbody .cx-need { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--blanc-80); border: 1px solid var(--bord) }
.cx-need .icon { flex: none; margin-top: 2px; color: var(--bleu) }
.cx-need b { display: block; font-size: var(--fs-base) }
.cx-need small { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.45; color: var(--sourdine) }
.cx-docbody .cx-postes { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-2) }
.cx-docbody .cx-postes li { display: grid; grid-template-columns: 16px 10rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); margin: 0; font-size: var(--fs-base) }
.cx-postes .costswatch { align-self: center }
.cx-postes small { font-size: var(--fs-sm); color: var(--sourdine) }
.cx-amber { font-weight: 500; color: var(--ambre) }
.cx-docbody .cx-panel { list-style: none; margin: var(--sp-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.cx-docbody .cx-panel li { margin: 0 }
.cx-docbody .cx-panel a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--bord);
}
.cx-docbody .cx-panel a:hover { color: var(--bleu); border-color: var(--bleu-40) }
.cx-docbody .cx-data { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-3) }
.cx-docbody .cx-datum { margin: 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--blanc-80); border: 1px solid var(--bord) }
.cx-docbody .cx-datum-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 600 }
.cx-datum-title .icon { color: var(--bleu) }
.cx-datum .facts { margin-top: var(--sp-2) }
.cx-datum .facts div { grid-template-columns: 9rem minmax(0, 1fr) }
.cx-datum dd { font-size: var(--fs-sm) }

/* the emergencies: the hub sums them up, one line each (the pain, the first
   gesture); a situation's page opens on its answer, then its sections, and ends
   on one gesture out, the statuses (content_situations.go) */
.cx-sits { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 72rem }
.cx-sit:target { outline: 2px solid var(--bleu); outline-offset: 2px }
.cx-sit-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3); padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none }
.cx-sit-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); color: var(--bleu); background: var(--bleu-08) }
.cx-sit-title { grid-column: 2; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3 }
.cx-sit-head:hover .cx-sit-title { color: var(--bleu) }
.cx-sit-problem { grid-column: 2; font-size: var(--fs-sm); line-height: 1.45; color: var(--sourdine) }
.cx-sit-go { grid-column: 3; grid-row: 1 / span 2; color: var(--bleu) }
.cx-disclaimer { max-width: 80ch; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--sourdine) }
.cx-answer { max-width: 72ch; margin-top: var(--sp-4); font-size: var(--fs-md); line-height: 1.5 }
.cx-sitsec { margin-top: var(--sp-6) }
.cx-sitsec h2 { margin-bottom: var(--sp-2); font-size: var(--fs-h2); font-weight: 600 }
.stepper-phase { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu-fonce) }
.cx-rights { list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); border: 1px solid var(--bleu-18); border-left: 4px solid var(--bleu); border-radius: var(--r-lg) }
.cx-cases dt { margin-top: var(--sp-4); font-weight: 600 }
.cx-cases dd { margin: var(--sp-1) 0 0 }
.cx-cases a, .cx-exit p a { color: var(--bleu) }
.cx-exit { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--bleu-08) }
.cx-exit-lead { font-weight: 600 }
.cx-exit p + p { margin-top: var(--sp-2) }

/* the tariff feed: before, after, and the move said in words */
.cx-month { margin-top: var(--sp-section) }
.cx-month-title { margin-bottom: var(--sp-title); font-size: var(--fs-h2); font-weight: 600 }
.cx-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.cx-change { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) var(--sp-4) }
.cx-change-bank { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: inherit; text-decoration: none }
.cx-change-bank b { display: block; font-weight: 600 }
.cx-change-bank small { display: block; font-size: var(--fs-xs); color: var(--sourdine) }
.cx-change-bank:hover b { color: var(--bleu) }
.cx-change-what { font-size: var(--fs-sm); color: var(--sourdine) }
.cx-change-move { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; font-size: var(--fs-md) }
.cx-was { color: var(--sourdine); text-decoration: line-through; text-decoration-color: var(--encre-20) }
.cx-arrow { color: var(--sourdine) }
.cx-now { font-weight: 600 }
.cx-delta { font-size: var(--fs-sm); color: var(--sourdine) }
.cx-change-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--sourdine); white-space: nowrap }
.cx-tag { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--sourdine); background: var(--encre-06) }
.cx-tag-good { color: var(--vert); background: var(--vert-10) }
.cx-tag-bad { color: var(--frais-texte); background: var(--frais-10) }
.cx-calm { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-5) }
.cx-calm > .icon { color: var(--bleu) }
.cx-calm-title { font-weight: 600 }
.cx-calm-title + p { margin-top: var(--sp-1); color: var(--sourdine) }

/* the lexicon */
.cx-lexfam { scroll-margin-top: calc(var(--head-h) + var(--sp-4)) }
.cx-lexfam-title { display: flex; align-items: center; gap: var(--sp-2) }
.cx-lexfam-title .icon { color: var(--bleu) }
.cx-lexlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-3) }
.cx-lexitem { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; padding: var(--sp-4); color: inherit; text-decoration: none }
.cx-lexitem-name { font-weight: 600 }
.cx-lexitem:hover .cx-lexitem-name { color: var(--bleu) }
.cx-lexitem-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--fs-sm); line-height: 1.5; color: var(--sourdine) }
.cx-lexitem-meta { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-xs); color: var(--sourdine) }
.cx-lexitem-meta b { font-weight: 600; color: var(--encre) }
.cx-tablewrap { overflow-x: auto; border-radius: var(--r-xl); background: var(--blanc-80); border: 1px solid var(--bord) }
.cx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base) }
.cx-table th, .cx-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait) }
.cx-table tbody tr:last-child > * { border-bottom: 0 }
.cx-table tbody th { font-weight: 500 }
.cx-bankcell { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none }
.cx-bankcell:hover { color: var(--bleu) }
.cx-plan { color: var(--sourdine) }
.cx-value { font-variant-numeric: tabular-nums lining-nums }
.cx-low { font-weight: 600; color: var(--vert) }
.cx-lowtag { font-size: var(--fs-xs); font-weight: 500; color: var(--vert) }
.cx-checked { font-size: var(--fs-xs); color: var(--sourdine); white-space: nowrap }
.cx-checked a { color: var(--bleu) }
.cx-row-none > * { color: var(--sourdine) }
/* the lexicon, one line under the guides */
.cx-lexlink { --icon: 16; display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--sourdine) }
.cx-lexlink .icon { flex: none; margin-top: 2px; color: var(--bleu) }
.cx-lexlink a { font-weight: 500; color: var(--bleu) }

@media screen and (max-width: 980px) {
  .cx-doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body" "side" }
  .cx-tocfold { grid-area: toc; display: block; margin-top: var(--sp-5) }
  .cx-side { position: static; max-height: none; overflow: visible; padding: var(--sp-6) 0 0 }
  .cx-side .cx-toc { display: none }
  /* a guide ends on the same next steps: its side column would repeat them */
  .cx-article .cx-side { display: none }
  .cx-une-card { grid-template-columns: minmax(0, 1fr) }
  .cx-une-card .guidecover { min-height: 0; height: 180px }
  .cx-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media screen and (max-width: 720px) {
  .cx-une-body { padding: var(--sp-4) }
  .cx-rubriques { grid-template-columns: minmax(0, 1fr) }
  .cx-more { padding: var(--sp-4) }
  .cx-sit-head { padding: var(--sp-3) var(--sp-4) }
  .cx-docbody .cx-postes li { grid-template-columns: 16px minmax(0, 1fr); row-gap: 0 }
  .cx-postes small { grid-column: 2 }
  .cx-datum .facts div { grid-template-columns: minmax(0, 1fr) }
  .cx-docbody .cx-datum { padding: var(--sp-3) var(--sp-4) }
  .cx-change { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3) }
  .cx-change-body { grid-column: 1 / -1; grid-row: 2 }
  /* the fee table reads as a list: bank and offer on the left, the figure on the right */
  .cx-table thead { display: none }
  .cx-table, .cx-table tbody { display: block }
  .cx-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--trait) }
  .cx-table tbody tr:last-child { border-bottom: 0 }
  .cx-table th, .cx-table td { display: block; padding: 0; border: 0 }
  .cx-table .cx-plan { grid-column: 1 }
  .cx-table .cx-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right }
  .cx-table .cx-checked { grid-column: 1 / -1; white-space: normal }
}

@media print {
  .cx-side, .cx-tocfold, .cx-jump, .cx-more, .cx-exit, .cx-next { display: none }
  .cx-doc { display: block }
  .cx-sit, .cx-change, .cx-lexitem { break-inside: avoid }
}
/* ==== end content ==== */

/* ==== tools: calculators ==== */
/* The hub and the five calculators (tools*.go, tool-*.html): the answer, then
   the form beside the detail, then how it is computed. Every class starts with
   tool-; the rest is borrowed from the shared components. */

.tool { padding-bottom: var(--sp-2) }

/* the answer: one sentence, then the figures; the form lands here */
.tool-answer { margin-top: var(--sp-5); padding: var(--sp-5); scroll-margin-top: calc(var(--head-h) + var(--sp-3)) }
.tool-answer-over { margin: 0 }
.tool-verdict { max-width: 74ch; margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: 1.45; text-wrap: pretty }
.tool-stats { margin-top: var(--sp-4) }
.tool-stats .stat:first-child .stat-value { font-size: var(--fs-figure-lg) }
.tool-answer .callout { margin-top: var(--sp-4) }

/* the duel of « Ma banque contre les autres »: two bars on one scale, the gap is the saving */
.tool-duel { display: grid; gap: var(--sp-3); margin-top: var(--sp-5) }
.tool-duel-row { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 9rem; align-items: center; gap: var(--sp-4) }
.tool-duel-who { min-width: 0; font-size: var(--fs-sm); line-height: 1.35 }
.tool-duel-who b { display: block; font-weight: 600; color: var(--sourdine) }
.tool-duel-track { display: block; height: 20px; border-radius: var(--r-sm); background: var(--encre-06) }
/* « Vous » in a flat 40 % ink: hatches say a partial total everywhere else */
.tool-duel-bar { display: flex; height: 100%; transform-origin: left; print-color-adjust: exact; -webkit-print-color-adjust: exact }
.tool-duel-bar::before { content: ""; flex: 1; border-radius: var(--r-sm); background: color-mix(in srgb, var(--encre) 40%, transparent) }
.tool-duel-best .tool-duel-bar::before { background: var(--vert) }
.tool-duel-best .tool-duel-who b { color: var(--vert) }
.tool-duel-total { font-size: var(--fs-xl); font-weight: 600; text-align: right; white-space: nowrap }
.tool-duel-best .tool-duel-total { color: var(--vert) }
.tool-duel-unit { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }

/* the form beside the result */
.tool-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: var(--sp-5); margin-top: var(--sp-5) }
.tool-form, .tool-which { display: grid; gap: var(--sp-4) }
.tool-form { padding: var(--sp-5) }
.tool-form-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3 }
.tool-form .deduit { margin-top: calc(-1 * var(--sp-2)) }
.tool-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0 }
/* the slider only speeds up the number field above it; 24 px keeps it a target */
.tool-range { height: 24px; margin-top: var(--sp-1) }
.tool-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) }
.tool-help { font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }
.tool-optional { margin-left: var(--sp-1); font-size: var(--fs-2xs); font-style: italic }
.tool-main { min-width: 0 }
.tool-main > :first-child { margin-top: 0 }
.tool-main > section:first-child > .shead:first-child { margin-top: 0 }
/* a rule or a warning between two sections */
.tool-note { margin-top: var(--sp-5) }

/* the ranking rows: who, the figures the tool is about, the total, then the way out */
.tool-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3) }
.tool-row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--blanc-80); border: 1px solid var(--bord);
}
.tool-row-best { border-color: var(--vert-28); box-shadow: var(--shadow-best) }
.tool-row-id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0 }
.tool-rank {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 600; color: var(--sourdine); background: var(--encre-06);
}
.tool-row-best .tool-rank { color: var(--blanc); background: var(--vert) }
.tool-logo { display: inline-flex; flex: none }
.tool-row-name { min-width: 0; line-height: 1.3 }
.tool-row-name a { font-weight: 600; text-decoration: none }
.tool-row-name a:hover { color: var(--bleu); text-decoration: underline }
.tool-row-plan { display: block; font-size: var(--fs-sm); color: var(--sourdine) }
.tool-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 }
.tool-fact { min-width: 0 }
.tool-fact dt { font-size: var(--fs-xs); color: var(--sourdine) }
.tool-fact dd { margin: 0; font-size: var(--fs-base); font-weight: 500; white-space: nowrap }
.tool-row-total { text-align: right }
.tool-total { font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; white-space: nowrap }
.tool-row-best .tool-total { color: var(--vert) }
.tool-min { font-size: var(--fs-xs); font-weight: 400; color: var(--ambre) }
.tool-total-note { font-size: var(--fs-xs); color: var(--sourdine) }
.tool-row-notes {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--trait);
}
.tool-row-notes > .seeall { margin-left: auto }
.tool-flag { display: inline-flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--ambre) }
.tool-flag .icon { --icon: 16; margin-top: 2px }
.tool-why { flex-basis: 100%; font-size: var(--fs-xs); line-height: 1.45; color: var(--sourdine) }
.tool-row-go { display: flex; justify-content: flex-end }

/* the banks left out, each with its reason */
.tool-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.tool-out {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--blanc-60); border: 1px solid var(--trait);
}
.tool-out a { font-weight: 500; text-decoration: none }
.tool-out a:hover { color: var(--bleu); text-decoration: underline }
.tool-out-why { color: var(--frais-texte) }

/* what the figures stand on, folded; their date; the whole ranking; further reading */
.tool-basis { margin-top: var(--sp-section) }
.tool-more { margin-top: var(--sp-4) }
.tool-reads { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); border-top: 1px solid var(--trait) }
.tool-reads .seeall { white-space: normal }

/* how it is computed: the text the bare page is indexed for, folded under its title */
.tool-about { margin-top: var(--sp-section) }
.tool-about-title { font-size: inherit; font-weight: inherit }
.tool-about-body { max-width: none; margin: 0; padding: 0 var(--sp-5) var(--sp-2) }

/* the hub: the calculators listed on the left, the one picked previewed on the
   right — a radio and :has, no script; on a phone each preview opens under its line.
   The sixth row takes the preview's extra height, so the list keeps its rhythm */
.toolhub {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(5, auto) 1fr;
  gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5);
}
.toolhub-item { display: contents }
.toolhub-pick {
  grid-column: 1; display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg); background: var(--blanc-80); border: 1px solid var(--bord); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.toolhub-pick:hover { border-color: var(--bleu-40) }
.toolhub-pick:has(input:checked) { background: var(--blanc); border-color: var(--bleu); box-shadow: var(--shadow-glass-soft) }
.toolhub-pick:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px }
.toolhub-ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  color: var(--bleu); background: linear-gradient(135deg, var(--bleu-08), var(--lavande-16)); transition: color var(--t-fast), background var(--t-fast);
}
.toolhub-pick:has(input:checked) .toolhub-ico { color: var(--blanc); background: var(--bleu) }
.toolhub-words { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
.toolhub-name { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3 }
.toolhub-short { font-size: var(--fs-sm); line-height: 1.4; color: var(--sourdine) }
.toolhub-mark { display: none }
.toolhub-panel { grid-column: 2; grid-row: 1 / -1; align-self: start; display: none; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6) }
.toolhub-item:has(input:checked) .toolhub-panel { display: flex }
.toolhub-title { font-size: var(--fs-h2); line-height: 1.3 }
.toolhub-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2) }
.toolhub-num { font-size: var(--fs-figure-lg); font-weight: 600; line-height: 1.05; letter-spacing: -.02em }
.toolhub-unit { font-size: var(--fs-base); color: var(--sourdine) }
.toolhub-example { font-size: var(--fs-sm); color: var(--sourdine) }
.toolhub-bars { width: 100%; max-width: 460px }
.toolhub-bars .rail-bar { font-size: var(--fs-xs) }
.toolhub-promise { width: 100%; padding-top: var(--sp-3); border-top: 1px solid var(--trait) }
.toolhub-fresh { font-size: var(--fs-xs); color: var(--sourdine) }

/* the other calculators */
.tool-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) }
.tool-other { display: flex; align-items: flex-start; gap: var(--sp-3); height: 100%; padding: var(--sp-4); text-decoration: none }
.tool-other > .icon { color: var(--bleu) }
.tool-other b { display: block; font-weight: 600; line-height: 1.3 }
.tool-other small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.4; color: var(--sourdine) }

/* the card chart, drawn in SVG by Go, each line named at its end: series 1 is the
   cheapest at the volume entered, the only green; the others ink, told by dashes */
.tool-chart { margin: 0; padding: var(--sp-4) var(--sp-5) }
.tool-chart-cap { margin-bottom: var(--sp-4) }
.tool-chart-box { position: relative; height: 240px; margin-left: 64px }
.tool-chart-svg { display: block; width: 100%; height: 100%; overflow: visible }
.tool-yticks { list-style: none; margin: 0; padding: 0 }
.tool-yticks li { position: absolute; right: calc(100% + var(--sp-2)); transform: translateY(-50%); font-size: var(--fs-2xs); color: var(--sourdine); white-space: nowrap }
.tool-xticks { list-style: none; margin: var(--sp-1) 0 0 64px; padding: 0; display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--sourdine) }
.tool-chart-you { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--sourdine) }
.tool-grid-line { stroke: var(--encre-10); stroke-width: 1; vector-effect: non-scaling-stroke }
.tool-you-line { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke }
.tool-series-1, .tool-series-2, .tool-series-3, .tool-series-4 { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.tool-series-1 { stroke: var(--vert); color: var(--vert-texte) }
.tool-series-2 { stroke: var(--encre); stroke-dasharray: 8 4; color: var(--encre) }
.tool-series-3 { stroke: var(--sourdine); color: var(--sourdine) }
.tool-series-4 { stroke: var(--sourdine); stroke-dasharray: 2 4; color: var(--sourdine) }
/* each name sits just above the end of its line, in its colour; Go keeps them apart */
.tool-ends { list-style: none; margin: 0; padding: 0 }
.tool-ends li { position: absolute; right: 0; transform: translateY(-100%); padding: 0 var(--sp-1); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; background: var(--blanc-80) }

/* the creator's ranking: the first two ranks, the trade-off said, then drawn
   (tradeoff.go, V2) — above the ranks on a wide screen, after them on a phone */
.tool-ranking { display: grid; gap: var(--sp-3) }
.trade-say { font-size: var(--fs-base); line-height: 1.5; text-wrap: pretty }
.tradeoff { order: -1; margin: 0; padding: var(--sp-4) var(--sp-5) }
.tradeoff-box { position: relative; height: 260px; margin: var(--sp-4) 0 var(--sp-6) 48px }
.tradeoff-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.tradeoff-split { stroke: var(--encre-20); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke }
.tradeoff-front { fill: none; stroke: var(--encre-20); stroke-width: 1.5; vector-effect: non-scaling-stroke }
.tradeoff-box > span { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-xs); white-space: nowrap }
.tradeoff-tick { color: var(--sourdine); margin-top: 12px }
.tradeoff-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 600; background: var(--blanc); border: 1px solid var(--encre-10) }
.tradeoff-dot img { width: 72%; height: 72%; border-radius: 3px }
.tradeoff-open { border: 1px dashed var(--ambre) }
.tradeoff-box > .tradeoff-name { transform: translateY(-50%); font-weight: 500 }
.tradeoff-cost { font-weight: 400; color: var(--sourdine) }

/* tipping points: the volume first, then who takes over */
.tool-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.tool-tip {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--blanc-60); border: 1px solid var(--trait);
}
.tool-tip-near { background: var(--bleu-08); border-color: var(--bleu-28) }
.tool-tip-at { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap }
.tool-tip-at span { font-size: var(--fs-xs); font-weight: 400; color: var(--sourdine) }
.tool-tip-text { font-size: var(--fs-sm) }


/* ---- tools breakpoints, motion, print ------------------------------------------ */

@media screen and (min-width: 981px) and (min-height: 820px) {
  /* the form stays beside the figures it drives, when it fits the screen */
  .tool-form { position: sticky; top: calc(var(--head-h) + var(--sp-4)) }
}

@media screen and (max-width: 1180px) {
  .tool-others { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media screen and (max-width: 980px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr) }
  .tool-row { grid-template-columns: minmax(0, 1fr) auto }
  .tool-facts { grid-column: 1 / -1; grid-row: 2 }
  .tool-row-notes { grid-row: 3 }
  .tool-row-go { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start }
}

@media screen and (max-width: 720px) {
  .tool-answer { padding: var(--sp-4) }
  /* the hub turns into an accordion: each preview under its own line */
  .toolhub { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  .toolhub-panel { grid-column: 1; grid-row: auto; margin-bottom: var(--sp-2); padding: var(--sp-4) }
  .toolhub-mark { display: block; flex: none }
  .toolhub-pick:has(input:checked) .toolhub-mark { transform: rotate(-135deg) }
  .tool-verdict { font-size: var(--fs-md) }
  .tool-stats .stat:first-child { grid-column: 1 / -1 }
  .tool-stats .stat:first-child .stat-value { font-size: var(--fs-figure) }
  .tool-duel-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3) }
  .tool-duel-track { grid-row: 2; grid-column: 1 / -1 }
  .tool-form { padding: var(--sp-4) }
  .tool-row { gap: var(--sp-3); padding: var(--sp-4) }
  .tool-chart { padding: var(--sp-4) }
  .tool-chart-box { margin-left: 52px }
  .tool-xticks { margin-left: 52px }
  .tool-tip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) }
  .tool-others { grid-template-columns: minmax(0, 1fr) }
  .tradeoff { order: 0; padding: var(--sp-4) }
  .tradeoff-box { height: 220px; margin-left: 40px }
  .tradeoff-box > span { font-size: var(--fs-2xs) }
  .tradeoff-dot { width: 20px; height: 20px }
  .tradeoff-cost { display: none }
}

@media (prefers-reduced-motion: no-preference) {
  /* a new figure grows into place: the eye sees what changed */
  .tool-duel-bar { animation: bar-grow var(--t) ease-out }
}

@media print {
  .tool-form, .tool-more, .tool-others, .tool-row-go { display: none }
  .tool-grid { grid-template-columns: minmax(0, 1fr) }
  .tool-row, .tool-chart { break-inside: avoid }
  .toolhub { display: block }
  .toolhub-panel { display: flex; margin: var(--sp-2) 0 var(--sp-4) }
}

/* without :has the hub cannot pick: every preview shows under its line */
@supports not selector(:has(*)) {
  .toolhub { display: block }
  .toolhub-panel { display: flex; margin: var(--sp-2) 0 var(--sp-4) }
}
/* ==== end tools ==== */

/* S8-16: a bank sheet draws the stair of a price, one step per document,
   dated under it (GRA-19); a hub lists the quarterly numbers */
.stairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-3); margin-top: var(--sp-3) }
.stair { margin: 0; padding: var(--sp-3) var(--sp-4) }
.stair-head { font-size: var(--fs-sm) }
.stair-draw { display: block; width: 100%; height: 48px; margin-top: var(--sp-2); overflow: visible }
.stair-draw path { fill: none; stroke: var(--bleu); stroke-width: 2; vector-effect: non-scaling-stroke }
.stair-steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm) }
.stair-steps time, .ed-excerpt { display: block; font-size: var(--fs-xs); color: var(--sourdine) }
.ed-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5) }